@charset "utf-8";
/* =====================================================================
   YUKARI デザインシステム ⑤ ページ別スタイル（トップ）
   ===================================================================== */

/* ---- ヒーロー ---- */
/* 左右パディングは .wrap に任せる（padding短縮形で左右0にすると端に張り付くため縦のみ指定）*/
.hero-inner{ display:flex; align-items:center; gap:40px; padding-top:60px; padding-bottom:50px; }
.hero-copy{ flex:1 1 auto; min-width:0; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--green-d); font-weight:500; font-size:.85rem; background:#fff; border:1px solid var(--line); padding:5px 14px; border-radius:var(--radius-pill); }
.hero h1{ font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.45; margin:18px 0 6px; color:var(--green-d); }
.hero h1 b{ color:var(--maroon); font-weight:700; }
.hero .lead{ color:var(--muted); font-size:1.02rem; margin:0 0 24px; max-width:34em; }
.hero-art{ flex:0 0 260px; align-self:flex-end; text-align:center; }
.hero-art img{ width:230px; max-width:100%; filter:drop-shadow(0 8px 18px rgba(27,94,32,.15)); }

/* ---- 検索フォーム（トップ）---- */
/* ヘッダの検索トグル（閲読中に検索セクションを開閉。表示制御はワークスペースCSSの :has）*/
.nav-search-toggle{ display:none; appearance:none; border:1px solid var(--line); background:#fff; color:var(--green-d); width:38px; height:38px; border-radius:50%; cursor:pointer; align-items:center; justify-content:center; margin-left:12px; }
.nav-search-toggle:hover{ background:var(--green-l); }
.nav-search-toggle.is-active{ background:var(--green); color:#fff; border-color:var(--green); }
/* 左ペインの折りたたみ系ボタン・スプリッターはPC(≥901px)のみ。モバイルでは出さない */
.ws-list-collapse, .ws-list-reopen, .ws-divider, .ws-aux-divider{ display:none; }

/* 検索結果ページの検索フォームをスリムな一行に（Googleライク。検索バー＋詳細条件ボタンを横並び）
   ※ホーム(index)のヒーロー検索は従来の積み重ねレイアウトを維持するため .search-shell__top に限定 */
.search-shell__top .search-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.search-shell__top .search-row__form{ flex:1 1 460px; min-width:0; max-width:680px; }
.search-shell__top .search-row__more{ flex:0 0 auto; }
.search-options{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
/* 検索結果ページの検索バーはスリムに（フォーム幅に合わせ、低めの高さ）*/
.search-shell__top .search-row__form .searchbar{ max-width:none; box-shadow:none; }
.search-shell__top .searchbar input{ font-size:.98rem; padding:0 18px; height:42px; }
.search-shell__top .searchbar button{ padding:0 18px; font-size:1.02rem; }
.search-detail{ margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; max-width:620px; }
/* 索引検索（種別から）フォーム */
.badge-paid{ display:inline-block; margin-left:8px; font-size:.7rem; background:var(--green); color:#fff; padding:1px 9px; border-radius:999px; vertical-align:middle; font-weight:500; }
#search-mode{ margin-top:8px; }
.cond-switches{ display:flex; gap:8px; flex-wrap:wrap; }
/* 閲読カスタマイズ（設定画面）*/
.rc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:6px; }
.rc-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:6px; }
.rc-grid input[type=range], .rc-grid2 input[type=range]{ width:100%; }
@media (max-width:680px){ .rc-grid2{ grid-template-columns:1fr; } }
.rc-colors{ display:flex; flex-wrap:wrap; gap:10px 16px; }
.rc-colors label{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); }
.rc-colors input[type=color]{ width:34px; height:26px; border:1px solid var(--line); border-radius:5px; padding:0; cursor:pointer; background:#fff; }
.rc-preview{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:#fff; }
@media (max-width:680px){ .rc-grid{ grid-template-columns:1fr; } }
.year-row{ display:flex; gap:8px; align-items:center; }
.year-row .input{ flex:1; min-width:0; }
.year-sep{ color:var(--muted); }
.tagsearch{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tagsearch__type{ flex:0 0 auto; width:auto; min-width:90px; }
.tagsearch__word{ flex:1 1 220px; min-width:0; }
/* 日付検索の年月日入力 */
.tagsearch__date{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.td-grp{ display:inline-flex; align-items:center; gap:3px; font-size:.85rem; color:var(--muted); }
.td-in{ padding:7px 8px; border:1px solid var(--line); border-radius:var(--radius); font-family:inherit; font-size:.9rem; color:var(--ink); }
.td-y{ width:72px; } .td-m, .td-d{ width:56px; }
.td-range{ display:inline-flex; align-items:center; gap:4px; font-size:.82rem; color:var(--muted); cursor:pointer; }
.td-end{ display:inline-flex; align-items:center; gap:8px; }
.block-disabled{ opacity:.5; cursor:not-allowed; }
.block-disabled select, .block-disabled input, .block-disabled button{ cursor:not-allowed; }
.search-detail__title{ font-family:var(--font-serif); font-size:1.1rem; color:var(--green-d); margin:0 0 12px; }

/* ---- 4カード ---- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.cards .card{ height:100%; }   /* 4枚のカードを一番高いものに揃える */
.card .ico{ width:58px; height:58px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--green-l); color:var(--green-d); }
.card h3{ font-size:1.05rem; margin:0 0 8px; text-align:center; }
.card p{ font-size:.85rem; color:var(--muted); margin:0; text-align:center; line-height:1.7; }

/* ---- 会員特典＋価格 ---- */
.plans{ display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start; }
.benefits{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.benefits th, .benefits td{ text-align:center; }
.benefits tbody th{ text-align:left; font-weight:500; }
.benefits .yes{ color:var(--green); font-weight:700; }
.price-card{ background:linear-gradient(160deg,var(--green-d),var(--teal)); color:#fff; border-radius:var(--radius-lg); padding:34px 30px; text-align:center; box-shadow:var(--shadow); }
.price-card .tag{ font-size:.82rem; opacity:.85; letter-spacing:.14em; }
.price-card .amount{ font-family:var(--font-serif); font-weight:700; font-size:2.5rem; margin:8px 0; }
.price-card .amount small{ font-size:1rem; font-weight:500; opacity:.85; }
.price-card ul{ list-style:none; padding:0; margin:18px 0 22px; text-align:left; font-size:.86rem; }
.price-card li{ padding:5px 0; }
.price-card li i{ color:#9be8af; margin-right:8px; }
.price-card .note{ font-size:.74rem; opacity:.8; margin-top:14px; }
.btn-buy{ background:#fff; color:var(--green-d); width:100%; font-weight:700; font-size:1rem; padding:13px; }
.btn-buy:hover{ background:var(--green-l); color:var(--green-d); }

/* ---- USP：ショーケース（全体像）---- */
.showcase{ margin:0 0 44px; text-align:center; }
.showcase img{ width:100%; max-width:980px; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-hover); }
.showcase figcaption{ color:var(--muted); font-size:.86rem; margin-top:12px; }

/* ---- USP：フィーチャー行（画像＋文・左右交互）---- */
.feature-rows{ display:flex; flex-direction:column; gap:46px; }
.frow{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; }
.frow--rev .frow__media{ order:2; }
.frow__media img{ width:100%; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); display:block; }
.frow__ico{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--green-l); color:var(--green-d); margin-bottom:14px; }
.frow__body h3{ font-family:var(--font-serif); font-size:1.35rem; color:var(--green-d); margin:0 0 10px; line-height:1.5; }
.frow__body p{ color:var(--ink); font-size:.95rem; line-height:1.9; margin:0; }

/* ---- 索引検索（開発中・本命）バンド ---- */
.coming{ text-align:center; max-width:760px; margin:0 auto; padding:8px 0; }
.coming__badge{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; background:var(--warning); color:#fff; padding:3px 14px; border-radius:var(--radius-pill); }
.coming__title{ font-family:var(--font-serif); font-size:clamp(1.4rem,3vw,1.9rem); color:var(--green-d); margin:16px 0 12px; line-height:1.5; }
.coming__desc{ color:var(--ink); font-size:.98rem; line-height:1.95; margin:0 auto; max-width:40em; }
.coming__note{ color:var(--green-d); font-size:.86rem; margin-top:16px; }
.coming__note i{ margin-right:6px; }

/* ---- 認証・アカウント系ページ（signup/login_lost/edit）---- */
/* .card は .card p 等にホーム専用の中央寄せ副作用があるためフォームには使わず、専用の枠を用意 */
.auth{ max-width:560px; margin:0 auto; }
.auth__lead{ color:var(--muted); margin:0 0 1.2em; }
.auth__box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:24px; margin-top:1.2em; }
.auth__actions{ margin-top:1.4em; text-align:center; }
.auth-note{ background:#fff8e1; border:1px solid #f0d98a; color:#7a5c00; padding:10px 14px; border-radius:8px; margin:.6em 0; }

/* ---- モバイル ---- */
@media (max-width:880px){
  .hero-art{ display:none; }
  .hero-inner{ padding-top:40px; padding-bottom:30px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; gap:18px; }
  .frow--rev .frow__media{ order:0; }
}

/* =====================================================================
   引用コピー モーダル（cite.js）
   ===================================================================== */
.cite-modal .modal-card{ max-width:640px; width:100%; display:flex; flex-direction:column; max-height:88vh; overflow:hidden; }
.cite-head{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,var(--green-d),var(--teal)); padding:14px 20px; }
.cite-head__title{ color:#fff; font-family:var(--font-serif); font-weight:600; font-size:1.05rem; }
.cite-modal .cite-head .delete{ background:rgba(255,255,255,.25); }
.cite-modal .cite-head .delete::before, .cite-modal .cite-head .delete::after{ background:#fff; }
.cite-body{ padding:20px 22px; overflow-y:auto; }

.cite-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cite-row__label{ flex:0 0 84px; font-size:.82rem; color:var(--muted); font-weight:500; }

/* セグメンテッドラジオ（言語・範囲）*/
.cite-seg{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; }
.cite-seg label{ display:inline-flex; }
.cite-seg input{ position:absolute; opacity:0; width:0; height:0; }
.cite-seg span{ display:inline-block; padding:6px 13px; font-size:.82rem; color:var(--muted); background:#fff; cursor:pointer; border-left:1px solid var(--line); white-space:nowrap; }
.cite-seg label:first-child span{ border-left:none; }
.cite-seg span:hover{ color:var(--green-d); }
.cite-seg input:checked + span{ background:var(--green); color:#fff; font-weight:600; }
.cite-seg input:focus-visible + span{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }

.cite-style{ max-width:240px; }
.cite-tune{ gap:16px; }
.cite-tune__item{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); }
.cite-tune__item .form-select{ width:auto; min-width:62px; padding:6px 28px 6px 10px; font-size:.85rem; }
.cite-tune__chk{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:var(--muted); cursor:pointer; }

.cite-toc{ margin:0 0 14px; max-height:170px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; }
.cite-toc:empty{ display:none; }
.cite-toc__item{ display:flex; align-items:center; gap:7px; padding:3px 2px; font-size:.85rem; color:var(--ink); cursor:pointer; line-height:1.5; }
.cite-toc__item input{ accent-color:var(--green); flex:0 0 auto; }
.cite-toc__empty{ color:var(--muted); font-size:.8rem; margin:0; }

.cite-preview{ width:100%; font-family:inherit; font-size:.95rem; line-height:1.75; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; resize:vertical; background:#fff; color:var(--ink); }
.cite-preview:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,79,.15); }
.cite-note{ font-size:.76rem; color:var(--muted); margin:8px 0 0; }

.cite-foot{ display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--paper-alt); border-top:1px solid var(--line); }
.cite-copied{ font-size:.82rem; color:var(--green-d); font-weight:600; opacity:0; transition:opacity .2s; }
.cite-copied.show{ opacity:1; }

/* カスタム編集エリア（トークン挿入）*/
.cite-custom{ border:1px dashed var(--green); border-radius:var(--radius); padding:12px; margin:0 0 14px; background:var(--green-l); }
.cite-custom__tokens{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
.cite-token-label{ font-size:.78rem; color:var(--muted); }
.cite-token{ font-family:inherit; font-size:.8rem; border:1px solid var(--green); background:#fff; color:var(--green-d); border-radius:var(--radius-pill); padding:3px 12px; cursor:pointer; transition:.15s; }
.cite-token:hover{ background:var(--green); color:#fff; }
.cite-token--mark{ min-width:32px; text-align:center; font-size:.95rem; padding:3px 8px; }
.cite-custom__hint{ font-size:.74rem; color:var(--muted); margin:6px 0 0; line-height:1.6; }
/* .cite-row はデフォルト display:flex のため、hidden を明示的に効かせる */
.cite-row[hidden]{ display:none; }
.cite-tpl{ width:100%; font-family:inherit; font-size:.92rem; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; resize:vertical; background:#fff; color:var(--ink); }
.cite-tpl:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,79,.15); }
.cite-custom__save{ display:flex; gap:8px; margin-top:8px; align-items:center; }
.cite-tpl-name{ flex:1; min-width:0; }
.cite-custom__save .btn{ flex:0 0 auto; }

/* 管理リスト */
.cite-manage-row{ margin-top:6px; }
.cite-link{ background:none; border:none; color:var(--green-d); font-family:inherit; font-size:.82rem; cursor:pointer; padding:4px 0; text-decoration:underline; }
.cite-link:hover{ color:var(--green); }
.cite-link i{ margin-right:5px; }
.cite-manage{ margin-top:10px; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; }
.cite-manage__empty{ color:var(--muted); font-size:.8rem; margin:0; }
.cite-manage__item{ display:flex; align-items:center; gap:8px; padding:6px 2px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cite-manage__item:last-child{ border-bottom:none; }
.cite-manage__name{ font-weight:600; font-size:.85rem; color:var(--ink); flex:0 0 auto; }
.cite-manage__tpl{ flex:1 1 160px; min-width:0; font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cite-manage__btns{ display:inline-flex; gap:4px; flex:0 0 auto; }
.cite-mini{ font-family:inherit; font-size:.74rem; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:6px; padding:3px 8px; cursor:pointer; transition:.15s; }
.cite-mini:hover:not(:disabled){ border-color:var(--green); color:var(--green-d); }
.cite-mini:disabled{ opacity:.4; cursor:default; }
.cite-mini--del:hover{ border-color:var(--danger); color:var(--danger); }

@media (max-width:600px){
  .cite-row__label{ flex-basis:100%; }
  .cite-style{ max-width:none; }
}
@media (max-width:520px){ .cards{ grid-template-columns:1fr; } }

/* =====================================================================
   検索結果ページ
   ===================================================================== */
.search-hits{ background:var(--green-l); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; font-size:1.02rem; margin:0 0 22px; }
.search-hits .has-text-weight-bold{ font-weight:700; color:var(--green-d); }

#box-list{ display:flex; flex-direction:column; gap:14px; }
.result-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 24px; box-shadow:0 1px 4px rgba(27,94,32,.05); transition:box-shadow .15s, border-color .15s; }
.result-card:hover{ box-shadow:var(--shadow); border-color:#cfe0d2; }
.result-card__body{ line-height:1.95; }
.result-card__body p{ margin:.4em 0 0; }
.result-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.result-card__star{ display:flex; align-items:center; }

/* app.py が生成する詳細ボタン・星・引用数（フック温存のまま見た目だけ調整）*/
.result-detail{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:none; font-family:inherit; font-size:.85rem; font-weight:500; padding:7px 18px; border-radius:var(--radius-pill); background:var(--green); color:#fff; transition:background .15s, transform .12s; }
.result-detail:hover{ background:var(--green-d); transform:translateY(-1px); }
.icon-star{ color:var(--muted); cursor:pointer; font-size:1.15rem; transition:color .15s; }
.icon-star:hover{ color:var(--green); }
.icon-star.has-text-weight-bold{ color:var(--green); }   /* ブックマーク済み状態 */
.ref-count{ font-size:.8rem; color:var(--muted); margin:0 .7em 0 .3em; }
.result-card__star .fa-book{ color:var(--green-d); }

/* =====================================================================
   閲読モーダル（reading-modal）
   ===================================================================== */
.reading-modal .modal-card{ max-width:760px; width:100%; border-radius:var(--radius-lg); overflow:hidden; }
.reading-modal .modal-card-head{ background:linear-gradient(135deg,var(--green-d),var(--teal)); padding:14px 20px; display:block; border-bottom:none; }
.rm-toolbar{ display:flex; align-items:center; gap:8px; }
.rm-title{ color:#fff; font-family:var(--font-serif); font-weight:600; font-size:1.05rem; margin:.55em 0 0; word-break:break-all; line-height:1.5; }
.rm-btn{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-family:inherit; font-size:.82rem; padding:5px 11px; border-radius:var(--radius-pill); transition:.15s; }
.rm-btn:hover{ background:rgba(255,255,255,.25); }
.rm-btn.is-primary{ background:#fff; color:var(--green-d); border-color:#fff; }   /* script.js が目次/カナの有効状態で is-primary を付与 */
#icon-star{ color:#ffe766; cursor:pointer; font-size:1.25rem; }
#icon-star.has-text-weight-bold{ color:#fff; }   /* ブックマーク済み */
.reading-modal .delete{ background:rgba(255,255,255,.25); }
.reading-modal .delete::before, .reading-modal .delete::after{ background:#fff; }

.reading-modal .modal-card-body{ background:#fff; padding:24px 28px; }

.reading-modal .modal-card-foot{ background:var(--paper-alt); display:block; padding:12px 18px; border-top:1px solid var(--line); }
.rm-foot{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.rm-msg{ font-size:.78rem; color:var(--muted); margin:0; }
.rm-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-top:10px; }
.rm-panel .textarea{ width:100%; font-family:inherit; font-size:.95rem; border:1px solid var(--line); border-radius:var(--radius); padding:10px; resize:vertical; }
.rm-panel-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
#block-reference, #block-originRef{ margin-bottom:12px; font-size:.9rem; color:var(--ink); }
#reference-list, #originRef-list{ list-style:none; padding:0; margin:.4em 0 0; }
#reference-list li, #originRef-list li{ padding:6px 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.reference.is-clickable{ cursor:pointer; color:var(--green-d); }
.reference.is-clickable:hover{ text-decoration:underline; }

/* ---- 分類ハイライトのフィルタ／凡例（モーダル内）---- */
.hl-bar{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:0 0 12px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.hl-bar__label{ font-size:.76rem; color:var(--muted); margin-right:2px; }
.hl-mini{ font-size:.74rem; padding:4px 11px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid var(--green-d); background:#fff; color:var(--green-d); }
.hl-mini:hover{ background:var(--green-l); }
.hl-chip{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none; font-size:.76rem; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--line); background:#fff; color:var(--ink); transition:.15s; }
.hl-chip .sw{ width:12px; height:12px; border-radius:3px; }
.hl-chip.off{ opacity:.4; text-decoration:line-through; }

/* =====================================================================
   段階1: 検索ワークスペース（PC=2ペイン／スマホ=従来オーバーレイ）
   - #text-modal（閲読モーダル）を“中央ペイン”として再利用（フック全温存）
   ===================================================================== */
:root{ --ws-list-w:360px; --ws-top:74px; }   /* --ws-top ≒ ヘッダー高さ */
.search-shell{ display:block; }

@media (min-width:901px){
  .search-shell{ display:flex; flex-direction:column; height:calc(100dvh - var(--ws-top)); overflow:hidden; }
  .search-shell__top.section{ flex:0 0 auto; padding:12px 0; }
  .reading-workspace{ flex:1; min-height:0; display:flex; align-items:stretch; border-top:1px solid var(--line); }

  /* 左ペイン：検索結果 */
  .ws-list{ flex:0 0 var(--ws-list-w); display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); background:#fff; }
  .ws-list__head{ flex:0 0 auto; padding:12px 16px 0; display:flex; align-items:flex-start; gap:8px; }
  .ws-list__head .search-hits{ flex:1; min-width:0; margin:0 0 12px; font-size:.92rem; padding:10px 14px; }
  .ws-list #box-list{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; gap:12px; }
  .ws-list .result-card{ padding:14px 16px; }

  /* 左ペインの折りたたみ（クローズ）＋再表示ハンドル */
  .ws-list-collapse{ flex:0 0 auto; appearance:none; border:1px solid var(--line); background:#fff; color:var(--muted); width:30px; height:30px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .ws-list-collapse:hover{ color:var(--green-d); background:var(--green-l); border-color:var(--green); }
  .reading-workspace.list-collapsed .ws-list{ display:none; }
  .ws-list-reopen{ display:none; }
  .reading-workspace.list-collapsed .ws-list-reopen{ display:flex; align-items:center; justify-content:center; flex:0 0 22px; align-self:stretch; appearance:none; border:none; border-right:1px solid var(--line); background:var(--paper-alt); color:var(--muted); cursor:pointer; }
  .reading-workspace.list-collapsed .ws-list-reopen:hover{ color:var(--green-d); background:var(--green-l); }

  /* 中央ペイン：閲読モーダルをドック表示（オーバーレイを解除）*/
  .reading-workspace .reading-modal{ position:static; display:flex; flex-direction:column; flex:1; min-width:0; padding:0; z-index:auto; }
  .reading-workspace .reading-modal .modal-background{ display:none; }
  .reading-workspace .reading-modal .modal-card{ flex:1; min-height:0; max-width:none; width:100%; border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
  .reading-workspace .reading-modal .modal-card-body{ flex:1; min-height:0; overflow-y:auto; scrollbar-gutter:stable; }
  .reading-workspace #modal-text{ max-width:820px; margin:0 auto; }

  /* ワークスペースのスクロール領域は細く控えめなスクロールバーに（閲読のストレス軽減）。
     つまみが“ボタン”に見えないよう、薄い溝（トラック）を出して帯状＝スクロールバーと分かるように */
  .ws-list #box-list, .reading-workspace .modal-card-body, .ws-aux__body{
    scrollbar-width:thin; scrollbar-color:#cfe0d2 #f1f5f2;
  }
  .ws-list #box-list::-webkit-scrollbar,
  .reading-workspace .modal-card-body::-webkit-scrollbar,
  .ws-aux__body::-webkit-scrollbar{ width:10px; height:10px; }
  .ws-list #box-list::-webkit-scrollbar-track,
  .reading-workspace .modal-card-body::-webkit-scrollbar-track,
  .ws-aux__body::-webkit-scrollbar-track{ background:#f1f5f2; }
  .ws-list #box-list::-webkit-scrollbar-thumb,
  .reading-workspace .modal-card-body::-webkit-scrollbar-thumb,
  .ws-aux__body::-webkit-scrollbar-thumb{ background:#cfe0d2; border-radius:6px; border:2px solid #f1f5f2; background-clip:padding-box; }
  .ws-list #box-list::-webkit-scrollbar-thumb:hover,
  .reading-workspace .modal-card-body::-webkit-scrollbar-thumb:hover,
  .ws-aux__body::-webkit-scrollbar-thumb:hover{ background:var(--green); background-clip:padding-box; }

  /* 未選択(.is-activeでない)→プレースホルダ／選択で本文 */
  .reading-workspace .reading-modal:not(.is-active) .modal-card{ display:none; }
  .reading-workspace .reading-modal.is-active .ws-empty{ display:none; }
  .ws-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); text-align:center; padding:40px; line-height:1.8; }
  .ws-empty i{ font-size:2.8rem; color:#cfe3d4; }

  /* 検索/閲読ワークスペースは外枠（メインフレーム）を固定し、内側ペインだけスクロール。
     ＝行数が少ない頁で外枠が動く／多い頁で閲読が動く、の不一致を解消。フッターも撤去。*/
  html:has(.search-shell), body:has(.search-shell){ overflow:hidden; }
  body:has(.search-shell) .site-footer{ display:none; }

  /* 閲読中（文献を開いている）は検索セクションを隠す。ヘッダの検索アイコンで表示トグル */
  .search-shell:has(#text-modal.is-active):not(.search-open) .search-shell__top{ display:none; }
  /* 検索アイコンは閲読中のみヘッダに出す */
  #nav-search-toggle{ display:none; }
  body:has(#text-modal.is-active) #nav-search-toggle{ display:inline-flex; }
}

/* スマホ：閲読は従来のオーバーレイ（.ws-empty は使わない）*/
@media (max-width:900px){ .ws-empty{ display:none; } }

/* スマホの閲読ビュー（検索ワークスペース）の調整 */
@media (max-width:900px){
  /* 閲読モーダルのヘッダ：アイコンの文字ラベルは隠す（縦長になりデザインが崩れるため）。アイコンのみ表示 */
  .reading-modal .rm-toolbar .rm-btn .is-size-7{ display:none; }
  /* フッターは Copyright のみ表示（マーケ用の3段組みは隠す）。大画面で消す処理(≥901px)はそのまま */
  body:has(.search-shell) .site-footer{ margin-top:0; }
  body:has(.search-shell) .site-footer .footer-cols{ display:none; }
  /* 「さらに表示」ボタン／検索結果の最後とフッターの間に余白を入れる */
  .search-shell{ padding-bottom:28px; }
  /* ヘッダ内目次のテキストダンプ(#modal-title)はスマホでは出さない（下の補助ペインで代替）*/
  .reading-modal #modal-title{ display:none !important; }
}

/* =====================================================================
   段階2: 閲読ヘッダの書誌（書名／著者・出版社・出版年）＋言語切替＋ページャ
   ===================================================================== */
.bib-lang{ display:inline-flex; gap:2px; font-size:.72rem; margin-right:2px; }
.bib-lang a{ padding:3px 7px; border-radius:6px; color:rgba(255,255,255,.82); cursor:pointer; border:1px solid rgba(255,255,255,.35); }
.bib-lang a:hover{ background:rgba(255,255,255,.18); }
.bib-lang a.on{ background:#fff; color:var(--green-d); font-weight:700; border-color:#fff; }

.rm-bib{ margin-top:8px; }
.rm-bib__title{ color:#fff; font-family:var(--font-serif); font-weight:600; font-size:1.06rem; line-height:1.45; word-break:break-all; }
.rm-bib__title:empty{ display:none; }
.rm-bib__meta{ color:rgba(255,255,255,.88); font-size:.82rem; margin-top:3px; }

/* 行間ステッパー（閲読フッター）*/
/* 行間ステッパー（ヘッダのカナ変換と☆の間に配置。濃緑ヘッダに合わせ白系）*/
.rm-lh{ display:inline-flex; align-items:center; gap:3px; color:rgba(255,255,255,.85); font-size:.8rem; margin:0 2px; }
.rm-lh .rm-step{ width:22px; height:22px; line-height:1; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; border-radius:6px; cursor:pointer; font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; }
.rm-lh .rm-step:hover{ background:rgba(255,255,255,.25); }
.rm-pageind{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.15; font-variant-numeric:tabular-nums; margin:0 6px; min-width:72px; text-align:center; cursor:help; }
.rm-pageind .pg-main{ font-size:.9rem; font-weight:600; color:var(--green-d); }
.rm-pageind .pg-sub{ font-size:.68rem; color:var(--muted); }

/* フッター（明るい背景）のボタンは緑系に（ヘッダーの白文字スタイルだと見えないため）*/
.rm-foot .rm-btn{ color:var(--green-d); background:#fff; border-color:var(--green); }
.rm-foot .rm-btn:hover{ background:var(--green-l); }
.rm-foot .rm-btn.is-primary{ background:var(--green); color:#fff; border-color:var(--green); }
/* ノートあり：ノートボタンを点灯＋ドット（N1。ヘッダ配置）*/
#icon-note{ position:relative; }
#icon-note.has-note{ background:#fff; color:var(--green-d); border-color:#fff; }
#icon-note.has-note::after{ content:''; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:#e3b93f; border:2px solid var(--green-d); }

/* #modal-title は目次トグル時のみ表示（通常は上の rm-bib を表示）*/
.reading-modal #modal-title{ margin-top:8px; }
.reading-modal:not(:has(#modal-icon-index.is-primary)) #modal-title{ display:none; }

/* =====================================================================
   段階2: 検索結果カード ＝ カード全体クリックで開く／詳細ボタン廃止／★は右上の透かし
   ===================================================================== */
.result-card{ cursor:pointer; position:relative; }
.result-card__detail{ display:none; }            /* 「詳細」ボタンは隠す（DOMには残しクリック転送先に）*/
/* ★：ブックマーク済み(has-text-weight-bold)のみ右上に透かし表示・表示専用 */
.result-card__star .icon-star{ position:absolute; top:11px; right:14px; font-size:1.05rem; color:#e3b93f; pointer-events:none; }
.result-card__star .icon-star:not(.has-text-weight-bold){ display:none; }
/* ノートあり透かし（N2）：☆の左に小さく表示。サーバはノートがある時のみ出力 */
.result-card__star .card-note-icon{ position:absolute; top:12px; right:38px; font-size:.92rem; color:var(--green); pointer-events:none; }
/* フッターは引用/被引用バッジのみ（詳細・星を除いた残り）*/
.result-card__foot{ margin-top:8px; }
.result-card__body{ padding-right:18px; }         /* 透かし★と本文の重なり回避 */
/* 検索語ハイライト（カード要約。getSummary が <mark class="kw"> を付与）*/
.result-card__body .kw{ background:#ffe27a; border-radius:2px; padding:0 1px; color:inherit; }

/* ===== ページネーション（クライアント側） ===== */
.result-card.pg-hidden{ display:none; }
.ws-list__tools{ display:flex; align-items:center; gap:10px; padding:0 16px 10px; flex-wrap:wrap; }
.pg-size-label{ font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.pg-size-label select{ font-family:inherit; font-size:.82rem; padding:3px 6px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; }
.pg-status{ font-size:.78rem; color:var(--muted); }
/* カード絞り込み（ノート/引用文献）*/
.card-filter{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
.cf-btn{ display:inline-flex; align-items:center; gap:4px; font-family:inherit; font-size:.76rem; padding:3px 9px; border:1px solid var(--line); border-radius:var(--radius-pill); background:#fff; color:var(--muted); cursor:pointer; transition:.15s; }
.cf-btn:hover{ border-color:var(--green); color:var(--green-d); }
.cf-btn.is-active{ background:var(--green); border-color:var(--green); color:#fff; }
.cf-clear{ font-family:inherit; font-size:.74rem; padding:3px 8px; border:none; background:none; color:var(--muted); cursor:pointer; text-decoration:underline; }
.cf-clear:hover{ color:var(--green-d); }
.pg-more{ display:block; width:100%; margin-top:4px; padding:10px; border:1px dashed var(--green); border-radius:var(--radius); background:#fff; color:var(--green-d); font-family:inherit; font-size:.9rem; font-weight:500; cursor:pointer; transition:background .15s; }
.pg-more:hover{ background:var(--green-l); }
.pg-more:disabled, .pg-more.is-loading{ opacity:.6; cursor:wait; }

/* =====================================================================
   段階3-2a: 補助ペイン（ws-aux）の箱。中央(閲読)＋右(補助)を ws-main でまとめる
   ===================================================================== */
@media (min-width:901px){
  .ws-main{ flex:1; min-width:0; display:flex; align-items:stretch; }
  /* 補助ペイン幅はスプリッターで可変（既定320px）*/
  .ws-aux{ flex:0 0 var(--ws-aux-w, 320px); min-width:0; display:flex; flex-direction:column; border-left:1px solid var(--line); background:#fff; }
  .ws-aux__body{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; }
  .aux-empty{ color:var(--muted); font-size:.85rem; line-height:1.7; }

  /* ドック位置＝下（3-5）。既定は右。VSCodeライクに右⇄下を切替 */
  .ws-main.aux-bottom{ flex-direction:column; }
  /* 閲読は最低高さを確保（下ペインに覆われない）。下ペイン高さはスプリッターで可変（既定240px）*/
  .ws-main.aux-bottom .reading-modal{ flex:1 1 auto; min-height:200px; }
  .ws-main.aux-bottom .ws-aux{ flex:0 0 auto; height:var(--ws-aux-h, 240px); min-height:0; border-left:none; border-top:1px solid var(--line); }

  /* スプリッター（左ペイン境界・補助ペイン境界）。ドラッグでサイズ変更 */
  .ws-divider{ display:block; flex:0 0 6px; cursor:col-resize; background:transparent; transition:background .12s; }
  .ws-divider:hover, .ws-divider.dragging{ background:var(--green-l); }
  .reading-workspace.list-collapsed .ws-divider{ display:none; }
  .ws-main .ws-aux-divider{ flex:0 0 6px; cursor:col-resize; background:transparent; transition:background .12s; display:block; }
  .ws-main .ws-aux-divider:hover, .ws-main .ws-aux-divider.dragging{ background:var(--green-l); }
  .ws-main.aux-bottom .ws-aux-divider{ cursor:row-resize; }
  .ws-main.aux-closed .ws-aux-divider{ display:none; }
}
/* 補助ペインのタブ（3-4a）*/
.ws-aux__tabs{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); background:var(--paper-alt); }
.ws-tab{ position:relative; appearance:none; border:none; background:transparent; padding:9px 12px; font-size:.82rem; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
/* タブに「金色丸」インジケータ（ノート/引用ありを示す）*/
.ws-tab.has-dot::after{ content:''; position:absolute; top:4px; right:3px; width:8px; height:8px; border-radius:50%; background:#e3b93f; border:1.5px solid #fff; box-shadow:0 0 0 .5px rgba(0,0,0,.12); }
.ws-tab:hover{ color:var(--green-d); }
.ws-tab.is-active{ color:var(--green-d); font-weight:600; border-bottom-color:var(--green); background:#fff; }
.ws-tabs__close, #ws-aux-tabs .icon-btn{ align-self:center; }
/* タブ右のアイコンボタン（ドック切替・閉じる）*/
#ws-aux-tabs .icon-btn{ appearance:none; border:none; background:transparent; color:var(--muted); cursor:pointer; padding:6px 8px; font-size:.9rem; border-radius:6px; }
#ws-aux-tabs .icon-btn:hover{ color:var(--green-d); background:var(--green-l); }
.ws-pane{ display:none; }
.ws-pane.is-active{ display:block; }
/* ノートタブ（3-4b）：入力欄をペイン下限まで伸ばす。
   下ドック等の低い高さでも、カウンタと登録ボタンが必ず見えるよう
   テキストエリアは縮小可（min-height:0系）にし、カウンタ／ボタンは固定。*/
.ws-pane[data-pane="note"].is-active{ display:flex; flex-direction:column; height:100%; min-height:0; }
.ws-pane .aux-note{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; margin-top:0; }
.ws-pane .aux-note .textarea{ width:100%; flex:1 1 0; min-height:60px; resize:none; }
.ws-pane .aux-note .note-count{ flex:0 0 auto; }
.ws-pane .aux-note .rm-panel-actions{ flex:0 0 auto; }
/* 文字数カウンタ＋上限超過エラー */
.note-count{ font-size:.78rem; color:var(--muted); text-align:right; margin-top:6px; }
.note-count.is-over{ color:#c0392b; font-weight:600; }
.note-count__msg{ display:none; }
.note-count.is-over .note-count__msg{ display:inline; }
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* 引用文献タブ（3-4c）：パネルをペインに馴染ませる。タブ/×で閉じるので「閉じる」は隠す */
.ws-pane .aux-ref{ border:none; padding:0; margin-top:0; background:transparent; }
.ws-pane .aux-ref #block-reference, .ws-pane .aux-ref #block-originRef{ font-size:.85rem; line-height:1.7; margin-bottom:14px; }
.ws-pane #modal-reference-return{ display:none; }

/* トースト通知（3-4b）：自動で消える。半透明 */
.toast{ position:fixed; background:rgba(27,94,32,.78); color:#fff; padding:7px 15px;
  min-width:9.5em; text-align:center; border-radius:999px; font-size:.85rem;
  box-shadow:0 4px 14px rgba(0,0,0,.14); z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .18s ease; backdrop-filter:blur(1px); }
.toast.is-show{ opacity:1; }
/* アンカー指定（登録ボタンの真上）。なければ画面下中央 */
.toast--center{ left:50%; bottom:32px; transform:translateX(-50%); }
.toast--anchor{ transform:translate(-50%,-100%); }
/* スマホ：補助ペイン（目次/ノート/引用/索引）はボタンで開くオーバーレイ（ボトムシート）にする。
   閲読モーダルより前面に出し、× で閉じる。既定は閉じる（aux-pane.js が ws-main に aux-closed を付与）*/
@media (max-width:900px){
  .ws-aux{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; top:auto;
    height:78vh; max-height:78vh;
    z-index:1000; background:#fff;
    border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.22);
  }
  .ws-main.aux-closed .ws-aux{ display:none; }
  .ws-aux__tabs{ flex:0 0 auto; }
  .ws-aux__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px; }
  /* スマホでは右/下ドック切替は不要（常にボトムシート）*/
  #ws-aux-dock{ display:none; }
}

/* 補助ペインを閉じる（目次ボタン/×）*/
.ws-main.aux-closed .ws-aux{ display:none; }

/* 目次リスト（3-2b：表示。3-2cでハイライト/移動）*/
.aux-toc__cta{ margin:0 0 8px; padding:8px 10px; background:var(--green-l); color:var(--green-d); border-radius:7px; font-size:.8rem; line-height:1.6; }
.aux-toc__item{ padding:6px 8px; border-radius:6px; cursor:pointer; font-size:.85rem; line-height:1.6; border-left:3px solid transparent; }
.aux-toc__item:hover{ background:var(--green-l); }
.aux-toc__au{ font-weight:600; color:var(--green-d); }
/* 現在ページの章節をハイライト（3-2c）*/
.aux-toc__item.is-current{ background:var(--green-l); border-left-color:var(--green); font-weight:600; }

/* 索引一覧（#4）*/
.aux-index{ font-size:.85rem; line-height:1.6; }
.aux-index__note{ color:var(--muted); font-size:.78rem; margin:0 0 8px; }
/* 種別フィルタ（チップ）：上部に固定 */
.aux-index__filter{ position:sticky; top:0; background:#fff; display:flex; flex-wrap:wrap; gap:5px; padding:4px 0 8px; margin-bottom:6px; border-bottom:1px solid var(--line); z-index:2; }
.aux-index__chip{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:#fff; border-radius:var(--radius-pill); padding:3px 10px; font-size:.78rem; color:var(--muted); cursor:pointer; transition:.15s; }
.aux-index__chip:hover{ border-color:var(--green); color:var(--green-d); }
.aux-index__chip.is-active{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.aux-index__cnt{ font-size:.7rem; opacity:.85; }
.aux-index__group{ margin-bottom:14px; }
.aux-index__item{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:3px 2px; }
.aux-index__name{ border:none; background:none; padding:0; cursor:pointer; color:var(--ink); font-size:.85rem; font-weight:600; text-align:left; }
.aux-index__name:hover{ color:var(--green-d); text-decoration:underline; }
.aux-index__pages{ display:inline-flex; flex-wrap:wrap; gap:3px; }
.aux-index__pg{ border:1px solid var(--line); background:#fff; border-radius:5px; padding:1px 6px; font-size:.76rem; color:var(--muted); cursor:pointer; }
.aux-index__pg:hover{ border-color:var(--green); color:var(--green-d); background:var(--green-l); }