/* 基本UI (バー, ドロワー, オーバーレイ) */
.mb-bar{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;background:#fff;border-radius:999px;box-shadow:0 1px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);transition:opacity .3s,transform .3s;padding:2px 4px;pointer-events:auto}
/* ID:481 メモ/保存ボタンの位置はモーダル開閉で変わらないようにする。
   ドロワー (.md-dw) を開いてもバー (.mb-bar) を画面の同じ位置に表示し続ける。
   従来は .mb-bar--shifted で opacity:0 にしていたが、ドロワー内の重複バー
   (.md-dw-bar) と位置が異なり「ボタンが移動する」ように見えていた。
   バーは z-index 9999 でドロワー (9998) の上に重なる構造。 */
.mb-bar--shifted{opacity:1;pointer-events:auto}
.mb-bar__btn{display:flex;align-items:center;gap:5px;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:13px;font-family:inherit;color:#333;white-space:nowrap;transition:color .2s;pointer-events:auto}
.mb-bar__btn:hover{color:#111}
.mb-bar__btn:disabled, .md-dw-bar__btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.mb-bar__label{font-weight:500}
.mb-bar__icon-wrap{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:4px}
.mb-bar__icon-wrap svg{width:100%;height:100%;display:block;color:#333;pointer-events:none}
.mb-bar__btn--active{color:#2b9a9b}
.mb-bar__btn--active .mb-bar__icon-wrap svg, .mb-bar__btn--active .mb-bar__bm{color:#2b9a9b;fill:#2b9a9b;stroke:#2b9a9b}
.mb-bar__btn--active .mb-bar__icon-wrap svg path {fill:#2b9a9b;stroke:#2b9a9b}

.md-dw{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:92vw;overflow-x:hidden;z-index:9998;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-2px 0 20px rgba(0,0,0,.08);border-left:1px solid #e5e5e5}
.md-dw--on{transform:translateX(0)}
.md-hd{display:flex;justify-content:flex-end;align-items:center;padding:8px 12px;flex-shrink:0}
.md-hd__x{background:none;border:none;cursor:pointer;font-size:18px;color:#999;padding:4px;line-height:1}
.md-hd__x:hover{color:#333}
.md-body{flex:1;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
/* ID:481 ドロワー内バーは浮動バー (.mb-bar) と役割が重複し位置も異なるため非表示。
   元の inline-flex スタイルは保留（display のみ none に変更）。 */
.md-dw-bar{display:none;align-items:center;justify-content:center;gap:0;padding:2px 4px;border-top:none;flex-shrink:0;background:#fff;border-radius:999px;box-shadow:0 1px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);margin:8px 12px 12px auto;width:auto}
.md-dw-bar__btn{display:flex;align-items:center;gap:5px;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:13px;font-family:inherit;color:#333;white-space:nowrap;transition:color .2s}
.md-dw-bar__btn:hover{color:#111}
.md-dw-bar__btn--active{color:#2b9a9b}
.md-dw-bar__btn--active svg path{fill:#2b9a9b;stroke:#2b9a9b}
.md-dw-bar__icon-wrap{display:flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:4px}
.md-dw-bar__icon-wrap svg{width:100%;height:100%;display:block;color:currentColor;pointer-events:none}
.md-add-memo-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;width:100%;margin:16px 0 0;background:#fff;border:1px solid #333;border-radius:8px;cursor:pointer;font-size:11px;font-family:inherit;color:#333;transition:background .15s}
.md-add-memo-btn:hover{background:#f5f5f5}
.md-add-memo-btn__icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center}
.md-add-memo-btn__icon svg{width:100%;height:100%}
.md-add-memo-btn__icon svg circle{stroke:#666}
.md-add-memo-btn__icon svg path{stroke:#666}
.md-add-memo-btn--disabled{cursor:not-allowed;border-color:#d32f2f;color:#d32f2f;background:#fff}
.md-add-memo-btn--disabled:hover{background:#fff}
.md-add-memo-btn--disabled .md-add-memo-btn__icon svg circle{stroke:#d32f2f}
.md-add-memo-btn--disabled .md-add-memo-btn__icon svg path{stroke:#d32f2f}

/* Overlay */
.md-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.01);z-index:9997;display:none}
.md-overlay--on{display:block}

/* Delete Modal */
.md-del-modal-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);opacity:0;transition:opacity .25s;pointer-events:none}
.md-del-modal-wrap--on{opacity:1;pointer-events:auto}
.md-del-modal{background:#fff;width:340px;border-radius:12px;padding:24px 20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.2);transform:scale(0.95);transition:transform .25s}
.md-del-modal-wrap--on .md-del-modal{transform:scale(1)}
.md-del-modal__t{margin:0 0 12px;font-size:16px;font-weight:700;color:#333}
.md-del-modal__d{margin:0 0 24px;font-size:13px;color:#666;line-height:1.5}
.md-del-modal__acts{display:flex;gap:12px;justify-content:center}
.md-del-modal__cancel{background:none;border:none;cursor:pointer;font-size:14px;color:#666;padding:8px 16px;font-weight:500}
.md-del-modal__exec{background:#d32f2f;border:none;border-radius:6px;cursor:pointer;font-size:14px;color:#fff;padding:8px 20px;font-weight:600;transition:background .2s}
.md-del-modal__exec:hover{background:#b71c1c}

/* メモ上限モーダル */
.md-limit-modal-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);opacity:0;transition:opacity .25s;pointer-events:none}
.md-limit-modal-wrap--on{opacity:1;pointer-events:auto}
.md-limit-modal{background:#fff;width:320px;border-radius:12px;padding:32px 20px 20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.2);transform:scale(0.95);transition:transform .25s;display:flex;flex-direction:column;align-items:center}
.md-limit-modal-wrap--on .md-limit-modal{transform:scale(1)}
.md-limit-modal__msg{display:flex;flex-direction:column;align-items:center;margin:0 0 24px}
.md-limit-modal__icon{margin:0 0 16px}
.md-limit-modal__lead{font-size:11px;color:#2b9a9b;font-weight:500;margin:0 0 8px}
.md-limit-modal__sub{font-size:11px;color:#333;margin:0;line-height:1.7}
.md-limit-modal__acts{width:100%;display:flex;flex-direction:column;gap:8px}
.md-limit-modal__btn{display:block;width:100%;padding:14px;border:1px solid #2b9a9b;border-radius:8px;font-size:11px;font-weight:600;text-align:center;cursor:pointer;font-family:inherit;box-sizing:border-box;transition:background .2s}
.md-limit-modal__back{background:#fff;color:#2b9a9b}
.md-limit-modal__back:hover{background:#f0fafa}
.md-limit-modal__upgrade{background:#2b9a9b;color:#fff;border-color:#2b9a9b}
.md-limit-modal__upgrade:hover{background:#238080}

/* Card List */
.md-list{display:flex;flex-direction:column; gap:16px; padding-bottom:24px;}
.md-card{padding:16px; border:1px solid #e0e0e0; border-radius:12px; background:#fff; position:relative; transition:border-color .2s,box-shadow .2s;}
.md-card--active{border-color:#0d7a7b;box-shadow:0 0 0 2px rgba(13,122,123,0.25);}
.md-card__hero{margin-bottom:10px;border-radius:6px;overflow:hidden}
.md-card__hero img{width:100%;height:80px;object-fit:cover;display:block}
/* ID:482 (5/12 岩下差戻) 引用 (excerpt) ボックスの角を丸→角に。
   ::before の縦線端点が box の border-radius と重なって丸く見える問題を解消。 */
.md-card__snippet{font-size:13px;color:#555;line-height:1.6;padding:10px 12px;background:#f7f9f9;border-radius:0;margin-bottom:10px;border-left:none;position:relative;padding-left:14px;}
.md-card__snippet::before{content:'';position:absolute;left:0;top:10%;bottom:10%;width:3px;background-color:#0d7a7b;border-radius:0;}
.md-card__article-box{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eee;border-radius:8px;padding:0;overflow:hidden;margin-bottom:12px;}
.md-card__article-img{width:80px;height:80px;object-fit:cover;flex-shrink:0;}
.md-card__article-title{font-size:13px;font-weight:600;color:#333;padding:0 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.md-card__figure-box{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eee;border-radius:8px;padding:0;overflow:hidden;margin-bottom:12px;}
.md-card__figure-img{width:80px;height:80px;object-fit:cover;flex-shrink:0;}
.md-card__figure-caption{font-size:13px;font-weight:500;color:#555;padding:0 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

.md-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.md-tag{font-size:12px;color:#2b9a9b;padding:2px 10px;border:1px solid #2b9a9b;border-radius:14px;font-weight:500}
.md-card__text{font-size:14px;line-height:1.75;margin:0 0 8px;color:#333;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.md-card__meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.md-card__time{font-size:12px;color:#aaa}
.md-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 12px;flex:1;}
.md-empty__main{color:#2b9a9b;font-size:11px;font-weight:600;margin:0 0 8px;}
.md-empty__sub{color:#999;font-size:11px;margin:0;line-height:1.5;white-space:nowrap;}

/* Menu */
.md-menu-wrap{position:static}
.md-menu-trigger{background:none;border:none;cursor:pointer;padding:4px;color:#999;transition:color .2s}
.md-menu-trigger:hover{color:#333}
.md-menu-pop{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  background:#fff; border:1px solid #eee; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15); padding:8px 0; width:160px;
  display:none; z-index:10;
}
.md-menu-pop--open{display:block}
.md-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;cursor:pointer;text-align:left;font-size:13px;color:#333;transition:background .1s}
.md-menu-item:hover{background:#f7f9f9}
.md-menu-item--del{color:#d32f2f} .md-menu-item--del svg{stroke:#d32f2f}

/* Form */
.md-form{padding-bottom:8px}
.md-form__hero{display:flex;align-items:center;gap:12px;padding:12px;background:#f7f7f7;border-radius:8px;margin-bottom:16px}
.md-form__hero-img{width:64px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0}
.md-form__hero-title{margin:0;font-size:13px;font-weight:600;color:#333;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.md-form__snippet-box-wrap{background:#fff;border-radius:6px;padding:12px;position:relative;}
.md-form__snippet-line{position:absolute;left:0;top:12px;bottom:12px;width:4px;background:#0d7a7b;border-radius:0 4px 4px 0;}
.md-form__snippet-content{padding-left:14px;font-size:14px;line-height:1.6;color:#333;}
.md-form__tags-area{margin-bottom:10px}
.md-form__tags-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.md-tag-slot{display:inline-flex}
.md-tag-add-btn{display:inline-flex;align-items:center;padding:6px 16px;border:1.5px dashed #2b9a9b;border-radius:20px;background:#fff;cursor:pointer;font-size:13px;font-family:inherit;color:#2b9a9b;font-weight:500;transition:background .15s;white-space:nowrap;height:31px;box-sizing:border-box}
.md-tag-add-btn:hover{background:rgba(43,154,155,.06)}
.md-tag-inline-input{display:inline-flex;align-items:center;padding:6px 16px;border:1px solid #d9d4cc;border-radius:4px;background:#fff;font-size:13px;font-family:inherit;font-weight:500;color:#333;outline:none;width:140px;box-sizing:border-box;height:31px}
.md-tag-inline-input:focus{border:1px solid #d9d4cc;padding:6px 16px;outline:none;box-shadow:none;height:31px}
.md-tag-inline-input::placeholder{color:#aaa;font-size:13px;font-weight:500}
.md-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(43,154,155,0.1);border-radius:20px;font-size:13px;color:#2b9a9b;font-weight:500;white-space:nowrap}
.md-pill__x{background:none;border:none;cursor:pointer;font-size:15px;color:#2b9a9b;padding:0;line-height:1}
.md-pill__x:hover{color:#e74c3c}
.md-form__input-box{background:#fff;padding:16px;border-radius:8px;}
.md-form__memo-label{display:block;font-size:13px;color:#888;margin-bottom:6px}
.md-form__textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;resize:none;line-height:1.7;min-height:90px;box-sizing:border-box;color:#333;outline:none}
.md-form__textarea:focus{border:1px solid #2b9a9b;padding:12px 14px;outline:none;box-shadow:none}
.md-form__msg{font-size:13px;border-radius:4px;max-height:0;overflow:hidden;padding:0;transition:max-height .25s,padding .25s}
.md-form__msg--er{padding:10px 12px;max-height:60px;background:#fef0f0;color:#c0392b;border:1px solid #f5c6cb}
.md-form__msg--ok{padding:10px 12px;max-height:60px;background:#eafaf1;color:#1a8a5c;border:1px solid #a3d9b1}
.md-form__msg--warn{padding:10px 12px;max-height:60px;background:#fff8e1;color:#e65100;border:1px solid #ffe0b2}
.md-global-msg{font-size:13px;border-radius:4px;max-height:0;overflow:hidden;padding:0;margin:0 20px;transition:max-height .25s,padding .25s,margin .25s}
.md-global-msg--er{padding:10px 12px;max-height:60px;margin:0 20px 8px;background:#fef0f0;color:#c0392b;border:1px solid #f5c6cb}
.md-global-msg--warn{padding:10px 12px;max-height:60px;margin:0 20px 8px;background:#fff8e1;color:#e65100;border:1px solid #ffe0b2}
.md-global-msg--ok{padding:10px 12px;max-height:60px;margin:0 20px 8px;background:#eafaf1;color:#1a8a5c;border:1px solid #a3d9b1}
.md-form__foot{display:flex;justify-content:flex-end;gap:20px;margin-top:16px;padding-top:8px}
.md-form__cancel{background:none;border:none;cursor:pointer;font-size:14px;color:#888;font-family:inherit;padding:6px 4px}
.md-form__cancel:hover{color:#333}
.md-form__done{background:none;border:none;cursor:pointer;font-size:14px;color:#2b9a9b;font-weight:600;font-family:inherit;padding:6px 4px}
.md-form__done:hover{color:#1f7e7f}
.md-form__done:disabled{color:#ccc;cursor:not-allowed}

/* ログイン促進画面 */
.md-login-prompt{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:32px 4px 8px;text-align:center}
.md-login-prompt__msg{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
/* 2026-05-16: PC 版はメッセージ (「無料会員は〜」) の直下にログインボタンを置く。
   旧実装は flex:1 でメッセージ領域を引き伸ばしボタンが画面下端に貼り付いていた。
   全体は中央配置のまま、msg と action を縦にまとめる。 */
@media (min-width: 769px) {
  .md-login-prompt__msg{flex:none;margin-bottom:16px}
  .md-login-prompt__action{width:100%;padding:0}
}
.md-login-prompt__lead{font-size:11px;color:#2b9a9b;font-weight:500;margin:0 0 8px}
.md-login-prompt__sub{font-size:11px;color:#333;margin:0;white-space:nowrap}
.md-login-prompt__link{color:#333;font-weight:600;text-decoration:none}
.md-login-prompt__link:hover{text-decoration:underline}
.md-login-prompt__action{width:100%;padding:0 0 8px}
.md-login-prompt__btn{display:block;width:100%;padding:14px;background:#fff;border:1px solid #2b9a9b;border-radius:8px;color:#2b9a9b;font-size:11px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;font-family:inherit;box-sizing:border-box}
.md-login-prompt__btn:hover{background:#f0fafa}

/* 段落 & パラグラフウィジェット */
.memo-p {cursor:pointer;position:relative;z-index:1;padding-left:20px !important;transition:none}
.memo-p--hv, .memo-p--ac { box-shadow: inset 4px 0 0 #0d7a7b; }
blockquote.memo-p {padding-left:clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem) !important;border-left:none !important;box-shadow:none}
blockquote.memo-p.memo-p--hv, blockquote.memo-p.memo-p--ac {box-shadow:inset 4px 0 0 #0d7a7b}

/* 埋め込みメディアのメモ機能 */
.memo-embedded {
  cursor: pointer;
  position: relative;
  transition: none;
}
.memo-embedded--hv {
  box-shadow: inset 4px 0 0 #0d7a7b;
}
/* 緑線の z-index 補強: 動画 iframe や play ボタン等の子要素が前面に重なって
   緑線が隠れるのを防ぐため、::before で別レイヤーに描画する。 */
.memo-embedded--hv::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #0d7a7b;
  z-index: 10;
  pointer-events: none;
}
.memo-embedded a, .memo-embedded button {
  cursor: pointer;
  position: relative;
  z-index: 5;
}

/* 埋め込みメディア記事の保存ボタン2 */
.save-memo-btn {
  background: transparent !important;
  border: none !important;
  opacity: 0.7;
  transition: opacity 0.2s !important;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-memo-btn:hover {
  opacity: 1 !important;
}
.save-memo-btn:active {
  opacity: 0.5 !important;
}
.save-memo-btn--active {
  opacity: 1 !important;
}
.save-memo-btn--active .save-btn-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%232b9a9b' stroke='none'%3E%3Cpath d='M5 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v18l-7-4.5L5 22V4z'/%3E%3C/svg%3E");
}
.save-btn-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.6'%3E%3Cpath d='M5 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v18l-7-4.5L5 22V4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* パラグラフウィジェット */
.mw-container {
  position:absolute;
  max-width:280px;
  z-index:9990;
  pointer-events:auto;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
}

.mw-bubble {
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  padding:8px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  font-size:12px;
  color:#333;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
}

.mw-tag-item {
  color:#2b9a9b;
  font-weight:600;
  background:rgba(43,154,155,0.08);
  padding:2px 8px;
  border-radius:12px;
  flex-shrink:0;
}

.mw-extra-count {
  color:#2b9a9b;
  font-weight:700;
  font-size:11px;
  margin-left:2px;
  flex-shrink:0;
}

.mw-text {
  color:#555;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}

/* プラスボタン */
.mw-plus-btn {
  position:absolute; width:16px; height:16px;
  z-index:9990; pointer-events:auto; transform:translateY(-50%);
  cursor:pointer; display:none;
}
/* 当たり判定拡張: 段落の右端 + 24px の位置に + ボタンが置かれるため、
   左 -40px で段落とボタンの間の隙間を完全にカバーする (mouseleave 誤発火を防ぐ)。 */
.mw-plus-btn::before { content: ''; position: absolute; top: -24px; bottom: -24px; left: -40px; right: -24px; z-index: -1; }
.mw-plus-btn svg {width:100%;height:100%;display:block;position:relative;z-index:1}
.mw-plus-btn:hover svg circle {stroke:#2b9a9b}
.mw-plus-btn:hover svg path {stroke:#2b9a9b}

/* ブックマーク状態 */
.is-bookmarked svg,.is-bookmarked img{filter:brightness(0) saturate(100%) invert(44%) sepia(75%) saturate(481%) hue-rotate(140deg) brightness(93%) contrast(92%)}
.p-articleIntro__iconListItem--keep .text,.c-contentAuthorIconListItem--keep .text{display:none}

/* マイノート */
.p-articleMynote__input-box{flex-basis:calc(100% - 28px);border:1px solid var(--border-color, #ddd);border-radius:6px;padding:12px;box-sizing:border-box}
.p-articleMynote__input-box .p-articleMynote__body--content{border:none;padding:0;width:100%;resize:none;outline:none;font-size:14px;font-family:inherit;line-height:1.7;color:#333}
.p-articleMynote__input-box .p-articleMynote__body--content:focus{outline:none;border:none}
.p-articleMynote__input-box:focus-within{border-color:#2b9a9b}
.p-articleMynote__actions{display:none;justify-content:flex-end;gap:20px;padding-top:8px}
.p-articleMynote__actions--visible{display:flex}


@media(max-width:768px){
  .mb-bar{bottom:16px;right:50%;transform:translateX(50%)}
  .mb-bar--shifted{right:50%;transform:translateX(50%)}
  .md-dw{width:100%;max-width:100%;top:auto;bottom:0;height:85vh;border-radius:16px 16px 0 0;border-left:none;border-top:1px solid #e5e5e5;transform:translateY(100%)}
  .md-dw--on{transform:translateY(0)}
  .memo-p{border-left:none;padding-left:0;margin-left:0}
  .mw-container{display:none}
  .mw-plus-btn{display:none !important}
}