/* NOMISMA — 貨幣学の学校
   意匠: 図録（墨地に金）。入口も学びの画面も同じ意匠で通す。
   ⚠ 以前は「表は図録、中は紙」と分けていたが、入口と中で別サイトに見えた。
      可読性を理由にしていたが、暗地でも行間と文字寸法を取れば読める。
   ⚠ 図版だけは生成りの紙に載せる（.fig-box）。実際の図録が
      「墨の頁に、生成りの図版」で組まれているのと同じ。可読性もここで担保する。 */

/* ⚠⚠ 2026-08-01: 墨地（黒）を廃し、学校の面と同じ紙地に統一した。
   なぜ: 未ログインの `/` は白地・図録調の入口なのに、**ログインした瞬間に同じ URL が
   黒地の別サイトの見た目**になっていた。入口で作った信用が、代金を払った先で消えていた。
   値は academic.css の `.ac` と**同じもの**を使う（似た色を別に作らない。ここがずれると
   学校の面と教材の面で紙の色が違って見える）。
   ⚠ 没入ツアー（.watch）だけは墨のまま。全画面の映像装置なので、白くすると情景が読めない。
      そこはこのファイルの下の方で、`.watch` に暗地の値を局所的に戻している。 */
:root {
  /* 地（明るい方から沈む方へ） */
  --paper: #F8F9FA;        /* 頁の地 */
  --paper-hi: #FFFFFF;     /* 箱の地（一段浮かせる） */
  --paper-lo: #F4F1E9;     /* 沈める箱の地（羊皮） */
  /* 文字（濃い方から淡い方へ）。⚠ --ink-faint は三つの地すべてで AAA 7:1 を満たす値 */
  --ink: #191C1D;          /* 本文 */
  --ink-mid: #44464E;      /* 補助 */
  --ink-faint: #515359;    /* かすれ */
  /* 差し色。⚠ 紙地では明るい金が飛ぶので、文字に使う金は深い方を取る */
  --navy: #0A1F44;
  --navy-deep: #00081E;
  --shu: #0A1F44;          /* 行き先を示す色＝紺（学校の面と同じ） */
  --gold: #C5A059;
  --gold-bright: #775A19;  /* 紙の上の金の文字（学校の面の --gold-deep と同値） */
  --rule: #E1E3E4;
  --rule-strong: #C5C6CF;
  /* 図版の紙（ここだけ生成り） */
  --plate: #f3ecdd;
  --plate-ink: #241c11;
  --font-mincho: "Noto Serif CJK JP", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-data: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* ⚠ 暗地は同じ行間だと詰まって見える。行間と字間を少し開けて読めるようにする */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mincho);
  line-height: 2.0;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--shu); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 5vw 6rem; }
.wide { max-width: 1180px; }

/* ── ヘッダ ───────────────────────────────
   ⚠ 2026-08-01: 公開画面の頭は academic.css の .ac-head-bar（二段）に一本化した。
      そのとき .head / .head-in を「どの要素にも当たらない死んだ規則」として落とした。
   ⚠⚠ 2026-08-06 の実測: **落とした先で、管理画面が使っていた**。
      admin-ui/index.html は `<header class="head"><div class="head-in">` で組み、
      `/style.css` しか読まない（academic.css は読まない）。
      その結果、五日間にわたって**管理画面の頭が縦積みのまま**配信されていた。
      ⚠ 「参照が 0 件」を確かめる走査は、public/ の中しか見ていなかった。
        **admin-ui/ を見ていなかったので、0 件と出た**（principles §13-1）。
      → 走査対象を列挙しない。死んだ規則を落とすときは、リポジトリ全体を見る。
   ⚠ 追従の高さは :root の --head-h（下の方）が持つ。 */
.head { border-bottom: 1px solid var(--rule-strong); background: var(--paper-hi); }
.head-in { max-width: 1180px; margin: 0 auto; padding: 0.9rem 5vw;
           display: flex; align-items: center; gap: 1.2rem; }
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ink); }
/* ⚠⚠ 金は「紙の上の文字」に使わない（2026-08-01 実測で是正）。
   墨地では #C5A059 が映えたが、紙地（#F8F9FA）では**コントラスト比 2.33**＝読めない。
   黒地から紙地へ移したとき、金だけ黒地時代の値のまま残っていた（実測で 57 件の文字が該当）。
   → **文字には --gold-deep(#775A19・比 6.11)／罫・枠・下線には --gold** と役割で分ける。
   ⚠ 暗い地（.ac-sec--navy / .ac-hero / .watch）の上では従来どおり --gold でよい。 */
.brand small { display: block; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.34em; color: var(--gold-bright); margin-top: 2px; }
.nav { margin-left: auto; display: flex; gap: 1.1rem; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.06em; }
.nav a { color: var(--ink-mid); }
.nav a.on { color: var(--shu); border-bottom: 1px solid var(--shu); }
/* ユーティリティ帯（入学・ログイン）。様式の五つと混ぜない — 細い罫で区切る */
/* ⚠ 2026-09-04: 学校の面の帯には仕切り線が無い。学びの画面だけ線があり、頁を移ると帯が変わって見えた → 線を外す */
.nav-util { display: flex; gap: 1.1rem; margin-left: 1.4rem; padding-left: 0; }
@media (max-width: 640px) { .nav-util { margin-left: .9rem; padding-left: .9rem; } }
/* 身分の札。在籍はリンクではない — 状態の表示 */
/* ⚠ リンクではないので上下の余白が付かず、**字だけが 9px 上にずれていた**（実測 2026-08-01:
   他の項目は字 top=25px、在籍のみ 16px）。箱は揃っているので目視では見つからない。
   余白を写すと元が変わったときにずれるので、行の中で天地中央に置く。 */
/* ⚠ 2026-09-04: 札は行き先を持つ <a> になった。縁のある小さな札にして、隣の「マイページ」「ログアウト」と区別する */
.nav-state { color: var(--ink-mid); letter-spacing: 0.06em;
  display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.1rem 0.65rem; line-height: 1.4; }
.nav-state:hover { border-color: var(--gold); color: var(--ink); text-decoration: none; }

/* ── 見出し ─────────────────────────────── */
h1 { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: 0.08em; margin: 2.4rem 0 0.4rem; font-weight: 600; }
/* 見出しの孤立行（1語だけ次行に落ちる）を避ける。未対応ブラウザでは単に無視される */
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: 20px; letter-spacing: 0.06em; margin: 2.6rem 0 0.8rem; font-weight: 600;
     border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; }
h3 { font-size: 20px; margin: 1.8rem 0 0.5rem; font-weight: 600; }
.sub { color: var(--ink-mid); font-size: 0.95rem; margin: 0 0 1.6rem; }
.kicker { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.3em; color: var(--gold-bright); }

/* ── 科目カード ──────────────────────────── */
.axis-head { display: flex; align-items: baseline; gap: 0.8rem; margin: 2.6rem 0 0.6rem; }
.axis-head h2 { border: 0; margin: 0; padding: 0; }
.axis-head .count { font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); }

.cards { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  border: 1px solid var(--rule); background: var(--paper-hi);
  padding: 0.95rem 1.1rem; border-radius: 2px; display: block; color: var(--ink);
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--gold); text-decoration: none; transform: translateY(-1px); }
.card .code { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.2em; color: var(--gold-bright); }
/* 学問の名（史料批判・図像学…）。⚠ 捨てずに符号の隣に置くが、見出しにはしない。
   読者はまだ学んでいないので、名前が先だと意味が渡らない（オーナー指摘 2026-08-02）。
   ⚠ 頁側（academic.css の .ac-course-field）と同じ扱い。片方だけ直さない。 */
.card .code .field {
  font-family: var(--font-mincho); font-style: normal; font-size: 14px;
  letter-spacing: 0.02em; color: var(--ink-mid); margin-left: 0.5em;
}
.card .code .field::before { content: '／'; color: var(--rule); margin-right: 0.5em; }
.card .t { font-size: 1.02rem; font-weight: 600; margin: 0.25rem 0 0.15rem; }
.card .s { font-size: 14px; color: var(--ink-mid); }
/* ⚠ 0.68rem は小さい。かすれ色だと紙地で 3.13 になり読めない（実測 2026-08-01）。
   小さい字ほど濃くする（大きさと濃さは反比例させる）。 */
.card .meta { font-family: var(--font-data); font-size: 14px; color: var(--ink-mid); margin-top: 0.6rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
/* 札の絵。⚠ 会員面の札は文字だけだった（実測 2026-08-01: home・歩み・修了論文・読み合い・
   学生の論文の五画面は写真 0 枚）。教材の画面には写真があるのに、代金を払った人の画面だけが
   文字と罫だった。⚠ 絵は様式の目印なので、比率を揃えて場所を固定する。 */
.card-fig { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px 2px 0 0;
  margin: -0.95rem -1.1rem 0.8rem; background: var(--rule); }  /* ⚠ .card の内余白と同じ値（ずらすと縁が出る） */
.card-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.not-ready { opacity: 0.62; }
.badge { display: inline-block; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.12em;
         padding: 0.12rem 0.45rem; border: 1px solid currentColor; border-radius: 2px; }
.badge.ready { color: var(--shu); }
.badge.wait { color: var(--ink-faint); }

/* ── ドリル ─────────────────────────────── */
.drill { border: 1px solid var(--rule); background: var(--paper-hi); padding: 1.3rem 1.4rem; margin: 1.1rem 0; border-radius: 2px;
  content-visibility: auto; contain-intrinsic-height: auto 740px; }
/* 回答の保存（2026-09-07 工程 2）。⚠ 説明の文字は 14px を下回らない */
.drill-save { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:.6rem 0 0; }
.drill-when { font-size:14px; color:var(--ink-faint); }
.drill-other { margin:.5rem 0; font-size:14px; }
/* 2026-10-24 学習体験の点検 項目 12（単位 D）: 自己評価の直後に出す支援（読み返す場所・答えと解説を見る）。文字の床 14px */
.note.drill-help { margin:.6rem 0; font-size:16px; }   /* .note（0.86rem）より後の詳しさで 15px にする */
.drill-help a { display:inline-block; min-height:44px; line-height:44px; }
.drill-other blockquote { margin:.3rem 0 0; padding:.4rem .7rem; border-left:3px solid var(--rule); white-space:pre-wrap; }

.drill .q { font-size: 1rem; line-height: 2; }
.drill .q blockquote { margin: 0.9rem 0; padding: 0.7rem 1rem; border-left: 3px solid var(--gold);
                       background: var(--paper-lo); font-size: 0.95rem; }
.drill .src { font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); margin-top: 0.8rem; }
/* 選択肢。⚠ どれも同じ幅・同じ高さの箱にする。文字数の差が「選びやすさ」にならないように
   （長い選択肢が正解に見える、という当てずっぽうを潰す）。番号も振らない。 */
.picks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
         border-radius: 2px; margin: 1.1rem 0 0.4rem; }
.picks .pick { display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: var(--paper-hi); color: var(--ink); font-family: inherit; font-size: 0.92rem;
  line-height: 1.7; padding: 0.72rem 0.95rem; cursor: pointer; transition: background 0.15s; }
.picks .pick:hover { background: var(--paper-lo); }
.picks .pick:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* 選んだあとに出す印。⚠ 正解の位置は選ぶ前には出さない */
.picks .pick.right { background: rgba(194, 161, 91, 0.16); color: var(--gold-bright); }
.picks .pick.wrong { background: rgba(212, 97, 79, 0.14); color: var(--shu); }
.picks .pick.sel { box-shadow: inset 3px 0 0 currentColor; }

.answer { margin-top: 1rem; padding: 1rem; background: var(--paper-lo); border-radius: 2px; display: none; }
.answer.open { display: block; }
.answer .lab { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.2em; color: var(--gold-bright); }

/* ⚠⚠ 2026-08-06 の実測: ここは type を**列挙**していたため、
   管理画面の `type="number"`（着金額など 4 箇所）と公開画面の `type="search"` が
   どの規則にも当たらず、**ブラウザ既定の暗い入力欄**のまま配信されていた
   （明るい紙面の中で一つだけ黒く潰れて見える）。
   → 列挙をやめ、**当てないものを除外する**書き方にする（principles §13-1 と同じ形）。
   ⚠ checkbox / radio / range / color は既定の見た目が要るので除く。 */
textarea, select,
input:not([type]),
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]) {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--rule-strong);
  background: var(--paper-hi); color: var(--ink); font-family: inherit; font-size: 0.95rem; border-radius: 2px;
}
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--gold-bright); }
::placeholder { color: var(--ink-faint); }
textarea { min-height: 6rem; line-height: 1.8; resize: vertical; }
label { display: block; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-mid); margin: 0.9rem 0 0.3rem; }

button, .btn {
  font-family: var(--font-data); font-size: 14px; letter-spacing: 0.1em;
  padding: 0.55rem 1.2rem; border: 1px solid transparent;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #20180a; font-weight: 700;
  border-radius: 2px; cursor: pointer; transition: filter 0.2s, transform 0.2s;
}
button:hover, .btn:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink);
  border-color: var(--rule-strong); font-weight: 400; }
button.ghost:hover, .btn.ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
button.small { padding: 0.32rem 0.75rem; font-size: 14px; }
.rating { display: flex; gap: 0.5rem; margin: 0.7rem 0; flex-wrap: wrap; align-items: center; }
.rating-q { font-size: 14px; color: var(--ink-faint); }
.rating button { background: transparent; color: var(--ink-mid); border-color: var(--rule-strong); }
.rating button.sel { background: var(--shu); border-color: var(--shu); color: #fff; }

/* ── 表 ────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 1rem 0; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 500; }
.tbl-wrap { overflow-x: auto; }

/* ── 進捗 ─────────────────────────────── */
.bar { height: 4px; background: var(--paper-lo); border-radius: 2px; overflow: hidden; margin-top: 0.4rem; }
.bar i { display: block; height: 100%; background: var(--shu); }

/* ── 検索 ─────────────────────────────── */
.hit { border-bottom: 1px solid var(--rule); padding: 0.8rem 0; }
.hit .h-meta { font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); }
.hit .h-snip { font-size: 0.92rem; margin-top: 0.25rem; }
.hit .h-snip 《, .hit b { color: var(--shu); font-weight: 600; }

/* ── 注記 ─────────────────────────────── */
.note { font-size: 16px; color: var(--ink-mid); background: var(--paper-lo);
        border-left: 3px solid var(--gold); padding: 0.8rem 1rem; margin: 1.2rem 0; }
.warn { border-left-color: var(--shu); }
.msg { padding: 0.7rem 1rem; border-radius: 2px; margin: 1rem 0; font-size: 0.9rem; }
.msg.err { background: rgba(212, 97, 79, 0.14); color: #e8a294; border-left: 3px solid var(--shu); }
.msg.ok { background: rgba(140, 170, 120, 0.14); color: #b8cfa6; border-left: 3px solid #7d9b68; }
.msg.wait { background: rgba(196, 168, 111, 0.12); color: var(--gold, #c4a86f); border-left: 3px solid #a8894f; }
.foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding-top: 1.4rem;
        font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ── 言語切替 ────────────────────────────── */
/* ⚠ 2026-09-04: 学校の面（acshell の .ac-lang）は「日本語 ⌄」の文字だけ。学びの画面だけ枠付きの箱だったので、同じ見た目にそろえる */
.lang-sel {
  width: auto; margin-left: 0.8rem; padding: 0 1.1rem 0 0; min-height: 2.4rem;
  font-family: var(--font-data); font-size: 14px; letter-spacing: 0.04em;
  border: 0; background: transparent; color: var(--ink-mid); border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M1 2.5l3 3 3-3' fill='none' stroke='%23a89f8c' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 0.1rem center;
}
.lang-sel:hover { color: var(--ink); }

/* ── 入口 ────────────────────────────────── */
.lead-block p { font-size: 1rem; line-height: 2.05; }
.lead-block strong { border-bottom: 1px solid var(--gold); }
.stats { display: flex; gap: 2.2rem; flex-wrap: wrap; margin: 2rem 0 1rem;
         padding: 1.1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stats b { display: block; font-family: var(--font-data); font-size: 1.5rem; font-weight: 500; color: var(--shu); line-height: 1.2; }
.stats span { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.12em; color: var(--ink-faint); }

/* ── 到達の四段 ──────────────────────────── */
.stages { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 1rem 0; }
/* ⚠ 裸の `.stage` にしない。科目ページの段（.part）と名がぶつかり、冊子の段すべてが
   この札の枠・背景・0.86rem・かすれ色を被った（2026-07-28 の実害）。`.stages` の中に閉じる。 */
.stages .stage { border: 1px solid var(--rule); background: var(--paper-hi); padding: 0.7rem 0.8rem;
         border-radius: 2px; font-size: 14px; color: var(--ink-faint); }
.stages .stage b { display: block; font-family: var(--font-data); font-size: 14px; letter-spacing: 0.2em; margin-bottom: 0.2rem; }
.stages .stage.on { border-color: var(--shu); color: var(--ink); }
.stages .stage.on b { color: var(--shu); }

/* ── 科目本文 ────────────────────────────── */
.body p { font-size: 0.98rem; }
.body ul { padding-left: 1.3rem; }
.body li { margin: 0.3rem 0; font-size: 0.95rem; }
.body strong { color: var(--gold-bright); font-weight: 600; }
/* 引用（教材からの抜き）。⚠ 字下げだけだと墨地では引用と分からない */
.body blockquote { margin: 1.1rem 0; padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--gold); background: var(--paper-lo);
  font-size: 0.95rem; color: var(--ink-mid); }
.lvl { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.14em; color: var(--ink-faint); margin-left: 0.7rem; }
.dim { color: var(--ink-faint); }
.center { text-align: center; }
/* ── 長い一枚の頁は、視界の外を描画しない ─────────────────────────
   用語集は 322 語で 42,000px、科目は八段で 18,000px（実測）。分頁にすると
   「引く」「一冊の小冊子」という設計が壊れるので、DOM と錨はそのままに
   描画だけを間引く。⚠ 見積り寸法が実寸とかけ離れるとスクロールバーが跳ねる。
   ⚠ 見積りは**高さだけ**に与える（contain-intrinsic-size は幅にも効き、SP で図版が 500px に広がって横スクロールが出た実害）。
   見積りは実寸平均（2026-07-31 実測: gl-item 130 / drill 739 / reading 460 / lesson 1254） */
.readings > li { content-visibility: auto; contain-intrinsic-height: auto 460px; }
/* 錠の案内。閉じている事実と開け方を、その場で一枚にして言う */
.lock-note { border-color: var(--gold-bright); background: rgba(197, 160, 89, 0.16); }
.lock-note .route-act { margin-top: .8rem; }
/* 無料の札（入口カード・航路の一文） */
.entry-free { margin-left: .6rem; vertical-align: middle; }
.free-line { font-size: .88rem; }
/* 入学までの三歩。いまどこに居るかを金で示す */
.enroll-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .7rem; margin: .6rem 0 1.8rem; padding: 0; }
.enroll-steps li { border: 1px solid var(--rule); border-radius: 2px; padding: .7rem .9rem;
  display: flex; gap: .7rem; align-items: baseline; font-size: 14px; line-height: 1.8;
  color: var(--ink-faint); }
.enroll-steps li b { font-family: var(--font-mincho); font-size: 1.2rem; color: var(--ink-faint); }
.enroll-steps li.is-now { border-color: var(--gold-bright); color: var(--ink); }
.enroll-steps li.is-now b { color: var(--gold-bright); }
.enroll-steps li.is-done { opacity: .75; }
.enroll-steps li.is-done b { color: var(--gold-bright); }
@media (max-width: 720px) { .enroll-steps { grid-template-columns: 1fr; } }

/* 入学で開くものの一覧。図録の目録のように、罫で刻む */
.offer-list { list-style: none; margin: .9rem 0 1.1rem; padding: 0; }
.offer-list li { padding: .55rem 0 .55rem 1.4rem; border-bottom: 1px solid var(--rule);
  position: relative; font-size: .92rem; line-height: 1.9; }
.offer-list li::before { content: '◆'; position: absolute; left: .1rem; top: .6rem;
  color: var(--gold-bright); font-size: 14px; }
/* フッターの法務リンク（特商法・プライバシー）。控えめに、だが常に在る */
.foot-legal { font-family: var(--font-data); font-size: 14px; letter-spacing: .06em; }
.foot-legal a { color: var(--ink-faint); }
.foot-legal a:hover { color: var(--gold-bright); }
.hit .t { font-size: 1rem; font-weight: 600; margin: 0.15rem 0; }
code { font-family: var(--font-data); font-size: max(14px, 0.9em); background: var(--paper-lo); color: var(--gold-bright); padding: 0.05em 0.3em; border-radius: 2px; }

/* ⚠ 中国語・アラビア数字混在で明朝が崩れる環境がある。ラテン系言語では字面を優先する */
html:lang(en) body, html:lang(fr) body, html:lang(de) body,
html:lang(es) body, html:lang(it) body { font-family: "Hanken Grotesk", Georgia, serif; line-height: 1.75; }
html:lang(zh) body { font-family: "Songti SC", "Noto Serif SC", var(--font-mincho); }

/* ── 学びの順序 ─────────────────────────── */
.goals { background: linear-gradient(180deg, rgba(197, 160, 89, 0.18), transparent); border: 1px solid var(--gold); border-radius: 2px;
         padding: 1.2rem 1.5rem 1.4rem; margin: 2rem 0; }
.goals h2 { border: 0; margin: 0 0 0.3rem; padding: 0; font-size: 20px; color: var(--gold-bright); }
.goals .sub { margin-bottom: 0.9rem; font-size: 14px; }
.goal-list { counter-reset: g; list-style: none; padding: 0; margin: 0; }
.goal-list li { counter-increment: g; position: relative; padding: 0.45rem 0 0.45rem 2.1rem;
                font-size: 1rem; line-height: 1.85; border-bottom: 1px dashed var(--rule); }
.goal-list li:last-child { border-bottom: 0; }
.goal-list li::before { content: counter(g); position: absolute; left: 0; top: 0.5rem;
  width: 1.5rem; height: 1.5rem; border: 1px solid var(--gold); border-radius: 50%;
  font-family: var(--font-data); font-size: 14px; color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; }

.lesson { margin: 2.2rem 0 2.8rem; content-visibility: auto; contain-intrinsic-height: auto 1250px; }
.lesson h3 { display: flex; align-items: baseline; gap: 0.7rem; font-size: 20px; margin: 0 0 0.9rem; }
.takeaway { background: var(--paper-lo); border-left: 3px solid var(--shu);
            padding: 0.7rem 1rem; margin: 1.1rem 0 0; font-size: 0.95rem; }
.takeaway b { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.16em; color: var(--shu); }

/* 図 */
.fig { margin: 0 0 1.4rem; padding: 0; }
/* ⚠ 図版だけは生成りの紙。墨地に線画を描くと細部が沈む。図録の図版と同じ扱い */
.fig-box { background: var(--plate); border: 1px solid var(--rule-strong); border-radius: 2px;
           padding: 1.1rem 1.2rem; overflow-x: auto;
           box-shadow: 0 14px 30px rgba(10, 15, 30, 0.12); }
.fig-svg { width: 100%; height: auto; display: block; min-width: 460px; font-family: var(--font-mincho); }
.fig-cap { font-size: 16px; color: var(--ink-mid); margin: 0.5rem 0 0; }
.fig-read { font-size: 0.9rem; margin: 0.5rem 0 0; }
.fig-read b { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.16em; color: var(--gold-bright); }
.fig-src { font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); margin: 0.35rem 0 0; }

.readings { counter-reset: r; list-style: none; padding: 0; }
.readings li { counter-increment: r; position: relative; padding: 0.7rem 0 0.7rem 2.2rem;
               border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.readings li::before { content: counter(r); position: absolute; left: 0; top: 0.75rem;
  font-family: var(--font-data); font-size: 14px; color: var(--gold-bright); }
.readings .why { font-size: 14px; color: var(--ink-mid); margin-top: 0.2rem; }

/* ── D軸: 実物のコイン ───────────────────── */
/* ⚠ コインは図録の主役。墨地に浮かせ、影を落として金属らしく見せる。
   ⚠ 画像は透過 webp/png が多い。地の色が透けるので、背景は敷かない。 */
.coins { display: grid; gap: 1.1rem; margin: 1.2rem 0;
         grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.coin { display: block; text-align: center; color: var(--ink); padding: 0.6rem 0.4rem 0.9rem;
        border: 1px solid transparent; border-radius: 2px; transition: border-color 0.2s, transform 0.2s; }
/* ⚠⚠ 2026-08-05: `.coin { display: block }` は `[hidden]` の display:none を打ち消す
      （作り手の指定が UA の指定に勝つ）。JS で hidden を立てても**画素は残っていた**。
      「48/217 を表示」と数えられるのに高さが 22,743px から動かず、そこで気づいた。
      ⚠ `.gl-thumb.coin` にも同じ組を使っているので、図録の中だけに効かせる。 */
.coins > .coin[hidden] { display: none; }
.coin:hover { border-color: var(--rule-strong); text-decoration: none; transform: translateY(-2px); }
.coin-img { display: flex; align-items: center; justify-content: center; height: 108px; }
.coin-img img { max-width: 100%; max-height: 108px; object-fit: contain;
                filter: drop-shadow(0 10px 18px rgba(10, 15, 30, 0.16)); }
.coin-name { display: block; font-size: 0.88rem; margin-top: 0.7rem; line-height: 1.6; }
.coin-meta { display: block; font-family: var(--font-data); font-size: 14px;
             letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 0.25rem; }

/* 個別の表裏 */
.coin-faces { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center;
              margin: 1.6rem 0 2rem; }
.coin-faces figure { margin: 0; text-align: center; }
.coin-faces img { max-width: 260px; max-height: 260px; object-fit: contain;
                  filter: drop-shadow(0 20px 34px rgba(10, 15, 30, 0.18)); }
.coin-faces figcaption { font-family: var(--font-data); font-size: 16px;
                         letter-spacing: 0.2em; color: var(--gold-bright); margin-top: 0.9rem; }

/* 絞り込み */
.filters { margin: 1.4rem 0 0.6rem; }
.frow { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.flab { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.16em;
        color: var(--ink-faint); margin-right: 0.4rem; flex: 0 0 auto; }
.chip { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.04em;
        padding: 0.2rem 0.6rem; border: 1px solid var(--rule); border-radius: 2px;
        color: var(--ink-mid); }
.chip:hover { border-color: var(--gold); color: var(--ink); text-decoration: none; }
/* ⚠ 選ばれている札。⚠ 淡い金の地の上で深い金の文字は 2.62 で読めない（実測 2026-08-01）。
   選択の状態は**紺**で示す（この学校では紺＝構造・金＝行動の飾り）。 */
.chip.on { border-color: var(--navy); background: var(--navy); color: #fff; }

@media (max-width: 560px) {
  .coins { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.7rem; }
  .coin-img { height: 84px; }
  .coin-img img { max-height: 84px; }
  .coin-faces { gap: 1.2rem; }
  .coin-faces img { max-width: 150px; max-height: 150px; }
}

/* ── 修了論文の四関門 ────────────────────── */
.gate { border-top: 1px solid var(--rule-strong); padding: 1.6rem 0 0.6rem; }
.gate-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.gate-head b { font-family: var(--font-data); font-size: 1.6rem; font-weight: 400; color: var(--rule-strong); line-height: 1; }
.gate-head h2 { border: 0; margin: 0; padding: 0; font-size: 20px; }
.gate.has .gate-head b { color: var(--shu); }
.submit-box { margin-top: 0.9rem; }
.submit-box summary { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.08em; color: var(--shu); }
.sub-card { border: 1px solid var(--rule); background: var(--paper-hi); padding: 0.9rem 1.1rem; margin: 0.8rem 0; border-radius: 2px; }
.sub-card .t { font-size: 1rem; font-weight: 600; margin: 0.2rem 0 0.4rem; }
.eval { background: var(--paper-lo); padding: 0.7rem 0.9rem; margin: 0.6rem 0; border-radius: 2px; }
.eval .lab { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.16em; color: var(--gold-bright); }
.eval p { font-size: 0.9rem; margin: 0.4rem 0 0; }
.scores { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.4rem 0; font-family: var(--font-data); }
.scores span { font-size: 1.05rem; color: var(--shu); }
.scores i { display: block; font-style: normal; font-size: 14px; letter-spacing: 0.1em; color: var(--ink-faint); }

@media (max-width: 640px) {
  /* SP のヘッダーは二段で確定させる: 1段目 = ブランド（一行）+ 言語、2段目 = ナビ。
     ⚠ 折り返し積み上げ（ブランド2行+ナビ2行+言語1行 = 実測184px・画面の22%）をやめ、
     ナビは一行の横スクロールにする。独・西・仏の長い語も折り返さず流れる。
     ⚠ 釦のタップ領域は 44px 以上（vald30 で確定した基準）。padding で作る */
  .head-in { align-items: center; gap: 0 .8rem; padding: 0.5rem 4vw 0; }
  .brand small { display: inline; margin-left: .5em; }
  .lang-sel { order: 2; margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0.8rem 0.65rem; white-space: nowrap; }
  .cards { grid-template-columns: 1fr; }
  .stats { gap: 1.4rem; }
}

/* 広い版面でも、文章は読みやすい幅のままにする。左端は揃うので右端だけが開く組みになる。
   ⚠ 図版の格子だけが版面いっぱいに広がる（図録の図版頁と本文頁の関係と同じ）。 */
.wide > h1, .wide > .lead-block, .wide > .note, .wide > .entry { max-width: 720px; }

/* ── 用語の印 ────────────────────────────────────────
   ⚠ 専門語を説明なしで出さない（「ホードって何？」）。押すとその場に一行が開く。
   ⚠ 別画面へ飛ばさない。読んでいる途中で連れ出すと戻ってこられない。
   ⚠ 印は**節ごとの初出一回だけ**。全部に付けると本文が印だらけで、かえって読めない。 */
.gloss { font: inherit; color: inherit; background: none; border: 0; padding: 0;
  border-bottom: 1px dotted var(--gold); cursor: help; }
.gloss:hover, .gloss.on { color: var(--gold-bright); border-bottom-style: solid; }
.gloss-note { display: block; margin: 0.5rem 0; padding: 0.6rem 0.9rem;
  background: var(--paper-lo); border-left: 2px solid var(--gold);
  font-size: 16px; line-height: 1.85; color: var(--ink-mid); }
.gloss-note b { color: var(--ink); margin-right: 0.5rem; }
.gloss-note i { font-style: normal; color: var(--ink-faint); font-size: 16px; margin-right: 0.6rem; }

/* 節の要点は、節の**頭**に置く。⚠ 末尾にだけ置くと、意味が最後まで来ない
   （「最も新しい一枚が、時計になる」が何の話か、読み終わるまで分からなかった）。 */
.deck { margin: 0.2rem 0 1.2rem; padding-left: 0.9rem; border-left: 2px solid var(--gold);
  font-size: 0.98rem; line-height: 1.95; color: var(--ink); }
/* ⚠⚠ 2026-10-26 没入改稿（オーナー点検 7・担当 VIEW）: 上の「頭に置く」は改めた。頭に置くと出来事を追う前に結論が出る。
   要点は本文（と図）の後、区切り（上の罫）の後に見出し付きで置く（public/app.js の viewCourse・data/section-layout.json）。 */
.sec-point { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.lesson .sec-point .sec-point-lab { margin: 0 0 .4rem; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .08em; color: var(--ink-mid); line-height: 1.6; }
.sec-point .deck { margin-bottom: 0; }
/* 節の情景（再現画）を図にして、下に役割の札（.img-role は academic.css・静的な頁と共通） */
.sec-scene-fig { margin: .9rem 0 1.1rem; }
.sec-scene-fig .sec-scene { margin: 0; }

/* 朗読の釦。⚠ 各編がすでに公開している音声を繋いでいるだけ */
.listen { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.14em;
  color: var(--gold-bright); background: none; border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 0.1rem 0.5rem; margin-left: 0.6rem; cursor: pointer; }
.listen:hover { border-color: var(--gold); }
.listen.on { background: rgba(194, 161, 91, 0.18); color: var(--gold-bright); }
.listen.ng { color: var(--ink-faint); border-color: var(--rule); cursor: default; }

/* 順路 — この科目を終えると開く科目 */
.path { margin-top: 1.8rem; }
.path-lab { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.16em;
  color: var(--gold-bright); margin: 0 0 0.7rem; }

/* ── W19 第 1 単位（2026-10-16）: 有料の章の事前表示・読み終わりの印・次に無料で読む・戻った節の焦点 ──
   ⚠ 文字は 14px 以上（読者は 60 代が多い・type-scale の床）。無料の次と有料の先は見た目を分ける:
     無料＝金の札＋主釦／有料＝破線の札「有料受講者向け」つきの札（.card） */
.paid-note { margin: .6rem 0 .2rem; font-size: 16px; color: var(--ink-mid); display: flex; flex-wrap: wrap;
  gap: .5rem; align-items: baseline; }
.end-mark { margin: 0 0 1.2rem; padding: .7rem 0; border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong); font-size: 16px; font-weight: 600; text-align: center; }
.next-free { margin: 0 0 1.8rem; }
.next-free-go { margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.next-free-go .btn { white-space: normal; text-align: left; max-width: 100%; }
.next-free-why { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-mid); }
.further .card .tag { display: inline-block; margin-top: .4rem; }
.lesson h3.return-focus:focus { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 2px; }

/* 用語集の頁 */
.glossary { margin: 1.6rem 0 0; }
/* ⚠ 罫は項目の枠（.gl-item）が引く。dt にも引くと、図版の列を跨がずに文字の列だけに線が出る
   （実際に、見出しの上だけ途中から始まる罫が出た）。区切りは一箇所で引く。 */
.glossary dt { font-family: var(--font-mincho); font-size: 1.02rem; font-weight: 600;
  color: var(--ink); padding-top: 0; }
.glossary dt span { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-left: 0.7rem; }
.glossary dd { margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.95; color: var(--ink-mid); }
.gl-where { margin: 0.4rem 0 0; font-family: var(--font-data); font-size: 14px;
  letter-spacing: 0.1em; color: var(--ink-faint); }
.gl-where a { margin-right: 0.5rem; }

/* ── 科目のページ = 一冊の小冊子 ──────────────────────────
   ⚠ 八段が同じ見た目の見出しで並び、「どこからが教本でどこからが問題か分からない」
   （オーナー指摘 2026-07-28）。冊子の「部の扉」と同じに、段の番号を大きく打って区切る。 */
/* ⚠⚠ 飛び先が固定ヘッダーの下に潜っていた（過去実害）。scrollIntoView も #hash も
   この一行で揃うので、JS ではなく CSS で持つ。
   ⚠ 高さはヘッダーの実寸（2026-07-31 再構成後: PC 70px / SP 82px）。
   ⚠ 切替は .nav の折り返しと同じ 640px に置く — 前は 720px で、641〜720px の帯だけ
   ヘッダーは低いのに余白 183px を取り、飛び先が約 98px 行き過ぎていた。 */
:root {
  /* ⚠⚠ 追従ヘッダーの高さ。飛び先の余白（scroll-margin-top）がここから決まるので、
     実寸とずれると**見出しが頭の下に潜る**。実測 2026-08-01: 頭を二段にしたのに 70px の
     ままで、目次から飛ぶと 40px ぶん潜っていた。二段の実寸（38 + 84）に合わせる。
     ⚠ 数を直に置かず、頭を組む値から出す（片方だけ変えるとまたずれる）。 */
  --head-top-h: 38px;   /* 上段（教材の帯）*/
  --head-main-h: 84px;  /* 下段（学校の帯）*/
  --head-h: calc(var(--head-top-h) + var(--head-main-h));
  /* 重なりの階層。⚠ 生値で書かない — 7 値がバラ書きで階層の意図が読めなかった */
  --z-head: 10; --z-rail: 20; --z-toc-veil: 54; --z-toc-btn: 55; --z-rail-open: 56;
  --z-reading-bar: 60; --z-watch: 100;
  /* 図版（紙地）の墨・金・朱 — 暗地用トークンより濃い。⚠ 別値なのは意図
     （生成りの紙の上では暗地用の金 #c2a15b が立たない）。読むのは figures.js */
  /* 暗地の上の「掲示の文字」（字幕・格言・LP の札の見出し）。本文 --ink より一段明るい。
     2026-07-31 統合: 旧 f3ead6 / f2ece0 / f4ead4（Δ≤6/ch）をこの一値に併合 */
  --ink-bright: #f4ecda;
  --fig-ink: #14120f; --fig-mid: #4a453d; --fig-faint: #8b8479; --fig-shu: #c0392b;
  --fig-gold: #a8842c; --fig-rule: #ddd8cd; --fig-paper: #fbfaf7; --fig-lo: #e8e5dd;
}
/* ⚠ 上段は 62.5rem 未満では出ない（academic.css の .ac-head-top）。下段だけの高さにする。 */
@media (max-width: 999px) { :root { --head-top-h: 0px; --head-main-h: 64px; } }
@media (min-width: 1000px) and (max-width: 62.4rem) { :root { --head-top-h: 0px; } }
.part, [id^="sec-"] { scroll-margin-top: calc(var(--head-h) + 0.8rem); }

.part { margin: 3.2rem 0 0; }
.part-head { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start;
  gap: 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 1.4rem; }
.part-no { font-family: var(--font-mincho); font-size: 2rem; line-height: 0.95;
  color: var(--gold-bright); letter-spacing: 0; }
.part-t { display: block; padding-top: 0.15rem; }
.part-t b { display: block; font-family: var(--font-mincho); font-size: 1.22rem;
  font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
.part-t i { display: block; font-style: normal; margin-top: 0.3rem;
  font-size: 14px; line-height: 1.85; color: var(--ink-mid); }
/* 段の中では h2 を使わない。使うと扉と二重に見出しが立つ */
.part > h2 { display: none; }
.part.thin { margin-top: 2.2rem; }
.prereq-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 0; }
/* 2026-10-24 学習体験の点検 項目 07: 先に読む講座を必須・任意・方法に分けた一覧（app.js の part-prereq）。
   添え書き（small）は文字の床 14px を割らない大きさにする（0.9rem＝14.4px） */
.prereq-ul { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.prereq-ul li { margin: 0 0 0.6rem; line-height: 1.7; }
.prereq-ul small { font-size: 0.9rem; color: var(--ink-mid); }

/* 手を動かす側（⑥⑦）は地を沈める。読む側と目で分かれるように */
.part.work { background: var(--paper-lo); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.2rem 1.3rem 1.4rem; }
.part-head.work .part-no { color: var(--shu); }

/* 中扉 — 冊子の扉一枚ぶん。ここが読む側と手を動かす側の境目 */
.half-break { display: flex; align-items: center; gap: 1.1rem; margin: 3.6rem 0 0.6rem; }
.half-break::before, .half-break::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.half-break span { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.3em;
  color: var(--shu); white-space: nowrap; }

/* ⑤ の中に置く実物。段を分けず、読む教材の続きとして並べる */
.in-course-coins { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.in-course-coins h3 { margin-top: 0; }

@media (max-width: 640px) {
  .part-head { grid-template-columns: 2rem 1fr; gap: 0 0.7rem; }
  .part-no { font-size: 1.6rem; }
  .part-t b { font-size: 1.08rem; }
  .part.work { padding: 0.2rem 0.85rem 1.1rem; }
  .half-break span { letter-spacing: 0.18em; }
}

/* ── 科目一覧 — 図版の帖 ──────────────────────────────────
   箱を 29 個並べると「29 個ある」ことだけが伝わる。図録の図版頁と同じに組む。
   一枚の紙に標本を並べ、罫で仕切る（仕切りは gap:1px と地の色で作る＝箱ではなく一枚に見える）。
   ⚠ `.plates` を付けた一覧だけに掛ける。検索結果の `.cards` は図版を持たないので巻き込まない。 */
.cards.plates {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
}
/* 罫は枡ごとの ring で描く。⚠ 格子側に地色を敷いて gap を罫に見せる手は使わない
   （最終行の余った枡まで塗られて、明るい塊が残る）。ring なら余った枡は地のまま。 */
.plates .card { box-shadow: 0 0 0 1px var(--rule); }
.plates .card {
  border: 0; border-radius: 0; padding: 1rem 1.15rem;
  display: grid; grid-template-columns: 76px 1fr; gap: 1.05rem; align-items: center;
}
/* 罫で仕切った一枚なので、持ち上げずに地を変える（浮かせると帖が割れて見える） */
.plates .card:hover { transform: none; background: var(--paper-lo); }

/* 図版 — その科目の読む教材に実際に登場する一枚。透過画像なので、
   丸・楕円（小判）・角（一分銀）・穴あき（通宝）の輪郭がそのまま差になる。 */
.plates .plate { width: 76px; height: 76px; display: grid; place-items: center; }
.plates .plate img { max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 11px rgba(10, 15, 30, 0.16)); }
/* 図版のない科目は、無理に一枚を当てず空の枠にする（図録の「図版なし」の項と同じ） */
.plates .plate-none { border: 1px solid var(--rule); }
.plates .plate-none::before { content: ""; width: 20px; height: 1px; background: var(--rule-strong); }

.plates .card-text { display: block; min-width: 0; }
.plates .card .code { display: block; font-size: 14px; }
.plates .card .t { display: block; font-size: 1.05rem; margin: 0.16rem 0 0.18rem; line-height: 1.45; }
/* 書き出しは 2 行で切る。⚠ 語の切り方は言語ごとに違うので、字数で刈らず行数で刈る */
.plates .card .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; line-height: 1.7; }
.plates .card .meta { margin-top: 0.45rem; font-size: 14px; }
/* 前提の一言（先に ◯◯）。読む順の根拠を札の上に出す */
.card .meta .before { color: var(--gold-deep, var(--ink-faint)); }

/* ── 制作中の科目 ─────────────────────────────────────
   隠さず、開けない札で出す（軸の全体像を読者に見せる）。<a> ではないので押せない */
.card.not-ready { opacity: 0.55; cursor: default; }
.card.not-ready:hover { transform: none; box-shadow: none; }
.pending-tag { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.08em;
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0.1rem 0.45rem; }

/* 修了証のカード（2026-10-24 指示 74）。横長・左揃え・7 言語とも同じ配置。
   ⚠ 金の縁取り・紋章・朱色の丸い印・縦書きは使わない。線は灰色（--ink-faint）だけ（--rule-strong は面によって金を帯びるので使わない）。
   ⚠ 注記は本文と同じ色（--ink）・本文 16px の 0.9 倍＝14.4px（指示「約 90% より小さくしない」） */
.dcards { display: grid; gap: 16px; margin: 12px 0 8px; }
.dcard { max-width: 640px; display: grid; gap: 10px;
  padding: 20px 22px; border: 1px solid var(--ink-faint); border-radius: 4px;
  background: var(--paper); color: var(--ink); text-align: left; font-size: 16px; }
.dcard p { margin: 0; }
.dcard-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.dcard-brand { font-size: 16px; letter-spacing: .14em; font-weight: 600; }
.dcard-word { font-size: 18px; font-weight: 600; }
.dcard-course { font-size: 22px; line-height: 1.4; font-weight: 600; }
.dcard-date { font-size: 16px; }
.dcard-note { font-size: 14.4px; color: var(--ink); line-height: 1.6; }
.cert .dcard-note { margin-top: 1em; }

/* ── 入口 ────────────────────────────────────────────
   ほかの全科目がこの一科目を前提にしている、という事実を画面に出す。
   ⚠ 事実が崩れたら app.js 側がこの塊を出さない（entryCourseOf）。 */
.entry {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: center;
  margin: 1.9rem 0 0.4rem; padding: 1.5rem 1.6rem; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: linear-gradient(180deg, var(--paper-hi), var(--paper-lo));
  transition: border-color 0.2s;
}
.entry:hover { border-color: var(--gold); text-decoration: none; }
.entry-mark { grid-column: 1 / -1; font-family: var(--font-data); font-size: 14px;
  letter-spacing: 0.28em; color: var(--shu); margin-bottom: 0.75rem; }
.entry-code { font-family: var(--font-data); font-size: 2.6rem; font-weight: 500;
  color: var(--gold-bright); letter-spacing: 0.04em; line-height: 1; }
.entry-text { display: block; min-width: 0; }
.entry-text b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.4; }
.entry-text i { display: block; font-style: normal; font-size: 0.9rem; color: var(--ink-mid);
  margin-top: 0.12rem; }
.entry-text em { display: block; font-style: normal; font-size: 14px; color: var(--gold-bright);
  line-height: 1.8; margin-top: 0.6rem; }
.entry-text .meta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.5rem;
  font-family: var(--font-data); font-size: 14px; color: var(--ink-faint); }

@media (max-width: 640px) {
  /* ⚠ 上の `.cards { grid-template-columns: 1fr }` は `.cards.plates` に負けるので、
     ここで明示的に 1 列へ戻す。書かないと SP で 320px の格子が残る。 */
  .cards.plates { grid-template-columns: 1fr; }
  .plates .card { grid-template-columns: 62px 1fr; gap: 0.85rem; padding: 0.85rem 0.9rem; }
  .plates .plate { width: 62px; height: 62px; }
  .plates .card .t { font-size: 1rem; }
  .entry { grid-template-columns: 1fr; gap: 0.55rem; padding: 1.2rem 1.1rem; }
  .entry-code { font-size: 2rem; }
  .entry-text b { font-size: 1.25rem; }
}

/* ── 教科書の版面 ────────────────────────────────
   ⚠ 「ラーニングの部分は教科書のようなデザインに」「直感的に分かるように」（オーナー指摘 2026-07-29）。
   足りていなかったのは装飾ではなく、**位置を示す仕掛け**だった。
   紙の教科書には必ずある ── 目次・柱（いま何節か）・ノンブル・図番号・章末のまとめ。
   長い一枚の頁を上から下へ流すだけでは、読者は自分がどこにいるか分からない。 */

/* 読んだ量の線。画面のいちばん上に一本だけ */
.reading-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-reading-bar);
  background: transparent; pointer-events: none; }
.reading-fill { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%); }

/* 目次の柱。⚠ PC でだけ左の余白に立てる。版面（本文の幅）には触らない。
   ⚠ 出す条件は「柱が収まる幅」= 1308px 以上。
   left = 50% - 430px(.wrap 860 の半分) - 14rem(柱13rem+隙間1rem) が 0 以上になるのは
   vw ≥ 1308px。1180px で出すと柱の 31% が画面左の外に切れていた（実測 left=-64px）。
   それ未満は SP と同じ目次釦（.toc-btn）に受けさせる */
.rail { display: none; }
@media (min-width: 1308px) {
  .rail { display: block; position: fixed; top: 7.5rem; width: 13rem;
    left: calc(50% - 430px - 14rem); max-height: calc(100vh - 10rem);
    overflow-y: auto; overscroll-behavior: contain; z-index: var(--z-rail); }
  /* ⚠ 柱そのものに枠を付けない。付けると本文と競って、目が二か所に散る */
  .rail-lab { font-family: var(--font-data); font-size: 14px; letter-spacing: .22em;
    color: var(--ink-faint); margin: 0 0 .9rem; padding-left: .2rem; }
  .rail-list, .rail-sub { list-style: none; margin: 0; padding: 0; }
  .rail-list > li { margin: 0 0 .1rem; }
  .rail a { display: grid; grid-template-columns: 1.5rem 1fr; gap: .3rem; align-items: baseline;
    padding: .34rem .4rem .34rem .2rem; font-size: 14px; line-height: 1.5;
    color: var(--ink-faint); text-decoration: none;
    border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
  .rail a:hover { color: var(--ink-mid); }
  .rail-no { font-family: var(--font-mincho); color: var(--gold-bright); opacity: .55; }
  .rail a.work .rail-no { color: var(--shu); }
  /* いま読んでいる段。⚠ 色だけでなく罫でも示す（色の差は小さな文字では見分けにくい） */
  .rail a.now { color: var(--ink); border-left-color: var(--gold-bright); }
  .rail a.now .rail-no { opacity: 1; }
  .rail-sub { margin: 0 0 .3rem .2rem; padding-left: 1.5rem;
    border-left: 1px solid var(--rule); }
  /* ⚠ 節の題は長い。折り返しを許すと柱が本文より縦に伸びて、目次でなくなる。二行で打ち切る */
  .rail-sub a { grid-template-columns: 1fr; font-size: 14px; padding: .2rem .3rem;
    border-left: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
  .rail-sub a.now { color: var(--gold-bright); border-left: none; }
}
/* ⚠ 1308px 未満では柱を出さない（収まらない。上の media query の計算を参照）。
   代わりに、上の細い線が「あとどれくらいか」を伝える。 */

/* 見出しの下の目安。読む前に「どれくらいの分量か」が分かると、身構え方が決まる */
.course-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
  font-family: var(--font-data); font-size: 14px; letter-spacing: .06em;
  color: var(--ink-faint); margin: .9rem 0 1.6rem; }
.course-meta .lvl { margin: 0; }

/* 節の見出し。⚠ 番号を数字だけで打つと、本文中の数字と見分けがつかない */
.lesson h3 { align-items: baseline; }
.lesson-no { flex: none; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .12em; color: var(--gold-bright); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: .12rem .5rem; line-height: 1.6; white-space: nowrap; }
.lesson-t { font-weight: 600; }

/* 図の番号。図録の図版につく番号と同じ扱い */
.fig-no { font-family: var(--font-data); font-size: 14px; letter-spacing: .14em;
  color: var(--gold-bright); margin-right: .7rem; white-space: nowrap; }

/* 章末のまとめ。⚠ 新しいことを書く場所ではない。各節の要点を並べ直すだけ */
.summary { margin: 2.8rem 0 .6rem; padding: 1.3rem 1.4rem 1.5rem;
  background: var(--paper-hi); border: 1px solid var(--rule); border-radius: 2px; }
.summary-lab { font-family: var(--font-mincho); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .08em; color: var(--gold-bright); margin: 0 0 .3rem; }
.summary-note { font-size: 16px; line-height: 1.85; color: var(--ink-faint); margin: 0 0 1rem; }
.summary-list { margin: 0; padding-left: 0; list-style: none; counter-reset: sm; }
.summary-list li { position: relative; padding: .55rem 0 .55rem 0; font-size: .95rem;
  line-height: 1.9; border-top: 1px dotted var(--rule); }
.summary-list li:first-child { border-top: none; }
.summary-list li a { display: inline-block; min-width: 3.4rem; font-family: var(--font-data);
  font-size: 14px; letter-spacing: .1em; color: var(--gold-bright); text-decoration: none; }
.summary-list li a:hover { color: var(--gold-bright); text-decoration: underline; }

@media (max-width: 640px) {
  .lesson h3 { flex-wrap: wrap; gap: .4rem .6rem; }
  .summary { padding: 1.1rem 1rem 1.2rem; }
  .summary-list li a { display: block; min-width: 0; margin-bottom: .1rem; }
}

/* ── 狭い画面の目次 ──────────────────────────────
   ⚠ 柱を出せない幅では、節を行き来する手立てが何も無くなる。
      八段ぶんを指で延々と繰るのは、教科書で目次も柱も無い本を読むのと同じ。
      画面の隅に常駐する一つの釦から、目次を開けるようにする。 */
.toc-btn { display: none; }
@media (max-width: 1307px) {
  .toc-btn { display: flex; position: fixed; right: 1rem; bottom: 1.1rem; z-index: var(--z-toc-btn);
    align-items: center; gap: .45rem; padding: .6rem 1rem;
    background: var(--paper-hi); color: var(--gold-bright);
    border: 1px solid var(--rule-strong); border-radius: 2rem;
    font-family: var(--font-data); font-size: 14px; letter-spacing: .1em;
    box-shadow: 0 4px 18px rgba(10, 15, 30, .16); cursor: pointer; }
  .toc-btn .toc-now { color: var(--ink-faint); font-size: 14px; max-width: 8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 開いた目次。⚠ 画面いっぱいに覆わない。読んでいた場所が見えていたほうが戻りやすい */
  .rail.open { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-rail-open);
    max-height: 68vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper-hi); border-top: 1px solid var(--rule-strong);
    border-radius: 6px 6px 0 0; padding: 1.1rem 1.2rem 4.6rem;
    box-shadow: 0 -8px 30px rgba(10, 15, 30, .14); }
  .rail.open .rail-lab { font-family: var(--font-data); font-size: 14px; letter-spacing: .2em;
    color: var(--ink-faint); margin: 0 0 .8rem; }
  .rail.open .rail-list, .rail.open .rail-sub { list-style: none; margin: 0; padding: 0; }
  .rail.open a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem;
    align-items: baseline; padding: .62rem .3rem; color: var(--ink-mid);
    text-decoration: none; border-bottom: 1px dotted var(--rule); font-size: .95rem; }
  .rail.open .rail-no { font-family: var(--font-mincho); color: var(--gold-bright); }
  .rail.open a.work .rail-no { color: var(--shu); }
  .rail.open a.now { color: var(--gold-bright); }
  .rail.open .rail-sub { padding-left: 2.1rem; }
  .rail.open .rail-sub a { grid-template-columns: 1fr; font-size: 14px;
    color: var(--ink-faint); padding: .5rem .3rem; }
  .toc-veil { position: fixed; inset: 0; z-index: var(--z-toc-veil); background: rgba(0, 0, 0, .45); }
}

/* ── 用語集を辞書として引く ─────────────────────
   ⚠ 語が 28 のうちは一列に並べれば足りたが、293 語では上から読むものにならない。
      辞書は引くもの。絞り込みと分類が無い辞書は、無いのと同じ。 */
.gl-tools { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 .9rem; }
.gl-q { flex: 1; min-width: 0; background: var(--paper-hi); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: .6rem .9rem;
  font-family: var(--font-mincho); font-size: 1rem; letter-spacing: .04em; }
.gl-q:focus { outline: none; border-color: var(--gold-bright); }
.gl-q::placeholder { color: var(--ink-faint); }
.gl-count { flex: none; margin: 0; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .08em; color: var(--ink-faint); }

.gl-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.gl-tabs button { background: transparent; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 2rem; padding: .3rem .9rem;
  font-family: var(--font-mincho); font-size: .88rem; letter-spacing: .04em; cursor: pointer; }
.gl-tabs button:hover { color: var(--ink-mid); border-color: var(--rule-strong); }
/* ⚠ 選ばれている分類は、色の差だけにしない。地を反転して確実に分かるようにする */
.gl-tabs button.on { background: var(--gold); color: #191C1D; border-color: var(--gold-bright); }   /* ⚠ 紙色の字は金の上で 2.33:1 だった（2026-09-04 実測）。墨（固定値。暗い面では --ink が白になるので変数にしない）で 6.98:1 */

.gl-item[hidden] { display: none; }
.gl-alias { display: inline-block; margin-left: .7rem; font-size: 14px; color: var(--ink-faint); }
.gl-more { margin-left: .8rem; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .08em; color: var(--gold-bright); white-space: nowrap;
  /* ⚠ 指で押せる高さ（2026-08-05）。同じセレクタを後ろに足すと css_lint が落ちる
     ——**規則は一箇所に置く**。二箇所あると、片方だけ直して気づけなくなる */
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 .2rem; }
.gl-none { color: var(--ink-faint); padding: 2rem 0; }

@media (max-width: 640px) {
  .gl-tools { flex-wrap: wrap; gap: .5rem .8rem; }
  .gl-q { flex: 1 1 100%; }
  .gl-tabs { gap: .35rem; }
  .gl-tabs button { font-size: 14px; padding: .26rem .7rem; }
}
.gloss-more { display: inline-block; margin-left: .8rem; font-family: var(--font-data);
  font-size: 14px; letter-spacing: .08em; color: var(--gold-bright); white-space: nowrap; }

/* ── 情景 ────────────────────────────────────────
   ⚠ オーナー指摘（2026-07-29）「全体的に文字ばかりのイメージ。難しく感じる。
      絵や画像を用いてもっと疲れないようなデザインに」。
   ⚠ **作る前に、在るものを探した。** 姉妹の八編は停留所ごとの挿絵を 1,391 枚持っていた。
      新しく生成した絵より、その停留所そのものを描いた絵のほうが正確で、飾りにならない。
   ⚠ 絵は各編のドメインから読む（複製しない）。片方を直したとき、もう片方が古くならない。 */

/* 科目の扉 = 口絵。⚠ 本の口絵と同じで、題より前に置く。帯のように横長にして、頁を占領させない */
/* ⚠ 頁の上端に貼り付くと、口絵ではなく帯に見える。本の口絵と同じだけ余白を取る */
.cover { margin: 2.2rem 0 1.8rem; }
.cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--rule-strong); }
.cover figcaption { margin-top: .5rem; font-family: var(--font-data); font-size: 16px;
  letter-spacing: .12em; color: var(--ink-faint); }

/* 節の頭の情景。⚠ 見出しの直後・要点の前。ここで目がひと息つく */
.sec-scene { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: 2px; margin: .9rem 0 1.1rem; box-shadow: 0 0 0 1px var(--rule); }

/* 読む教材 = 図版の帖。⚠ 一覧が文字だけだと、どこへ行くのか分からないまま押すことになる */
.readings.plates { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1px; }
.readings.plates > li { display: grid; grid-template-columns: 13rem 1fr; gap: 0 1.2rem;
  align-items: start; padding: 1rem 1.1rem; box-shadow: 0 0 0 1px var(--rule);
  border-radius: 2px; counter-increment: none; }
.readings.plates > li::before { content: none; }
.read-scene { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.read-body { min-width: 0; }
/* 読む教材の絵の器（2026-10-26 VIEW2: 札を絵の左上に重ねるため。.img-roled は academic.css） */
.read-scene-box { display: block; min-width: 0; }
/* ⚠ 一枚ごとに欄の順序を変えない。実測すると朗読の釦だけが 2 通りの位置に散っていた
   （題が短い行では題の隣、長い行では次の行）。年代→題→なぜ読むか→朗読、で固定する。 */
.read-era { margin: 0 0 .2rem; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .14em; color: var(--ink-faint); }
.read-t { margin: 0 0 .4rem; line-height: 1.7; }
.readings.plates .why { margin: 0 0 .6rem; }
.readings.plates .listen { margin: 0; }
/* 教材そのもの。⚠ 学校の声（なぜ読むか）と、教材の声を、同じ版面で続けて出さない。
   紙の教科書が引用を一段落として組むのと同じで、**地を沈め、明朝で、左に罫**。
   これが無いと、学生は「学校の説明」と「一次の教材」の境目を見失う。 */
.read-src { font-family: var(--font-mincho); font-size: .95rem; line-height: 2.0;
  color: var(--ink); background: var(--paper-lo); border-left: 2px solid var(--rule);
  padding: .85rem 1rem; margin: 0 0 .6rem; border-radius: 0 2px 2px 0;
  text-align: justify; }
/* 訳の無い言語で出すときの断り。⚠ 教材の直前に置く（読み始めてから気づかせない） */
.read-src-note { margin: 0 0 .3rem; font-family: var(--font-data); font-size: 16px;
  letter-spacing: .06em; color: var(--ink-faint); }

@media (max-width: 720px) {
  /* ⚠ 狭い画面で横並びにすると、絵も文字も両方潰れる。縦に積む */
  .readings.plates > li { grid-template-columns: 1fr; gap: .8rem; padding: .9rem; }
  .read-scene { aspect-ratio: 16 / 8; }
  .cover img { aspect-ratio: 16 / 8; }
  .sec-scene { aspect-ratio: 16 / 9; }
}
/* 実物のコインが無い科目の枠。⚠ 空の枠は「まだ何も無い科目」に見える。
   ただしコインの代わりに丸く見せない。**場面の写真として、枠いっぱいに敷く** */
.plate-scene { background-size: cover; background-position: center;
  filter: saturate(.85) brightness(.78); }
.plates .card:hover .plate-scene { filter: saturate(1) brightness(.95); }
/* 入口の科目。⚠ 最初に目に入る枠が文字だけだと、それが site 全体の第一印象になる。
   情景を敷くが、**文字の側を暗く覆って可読性を先に確保する**（左 38% は地の色そのまま）。
   ⚠ 絵の URL は app.js が --entry-img で渡す。グラデはインラインで書かない —
   インラインに書くと下の SP ルールが永久に負ける（実際に一度も効いていなかった） */
.entry.has-scene { background-size: cover; background-position: right center;
  background-image: linear-gradient(90deg, rgba(255,255,255,.97) 38%, rgba(255,255,255,.62) 100%), var(--entry-img); }
@media (max-width: 720px) {
  /* ⚠ 狭い画面では横に逃がせないので、全体を暗く覆う */
  .entry.has-scene { background-image: linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)), var(--entry-img); }
}
/* 用語集の一覧の図版。⚠ 実測すると 42,000px の文字の壁だった（絵 0 枚）。
   辞書とはいえ、引く手がかりが文字しかないのは重い。
   ⚠ 実物（透過の標本）と場面（写真）で見せ方を分ける。同じ枠に入れると標本が写真に見える。 */
.gl-item { content-visibility: auto; contain-intrinsic-height: auto 105px;
  display: grid; grid-template-columns: 4.6rem 1fr; gap: .2rem 1rem;
  align-items: start; padding: .9rem 0; border-bottom: 1px dotted var(--rule); }
.gl-item.no-thumb { grid-template-columns: 1fr; }
.gl-item dt { grid-column: 2; }
.gl-item dd { grid-column: 2; }
.gl-item.no-thumb dt, .gl-item.no-thumb dd { grid-column: 1; }
.gl-thumb { grid-row: 1 / span 2; grid-column: 1; width: 4.6rem; height: 4.6rem;
  border-radius: 2px; }
.gl-thumb.coin { object-fit: contain; }
.gl-thumb.scene { object-fit: cover; box-shadow: 0 0 0 1px var(--rule); filter: saturate(.9); }
@media (max-width: 640px) {
  .gl-item { grid-template-columns: 3.4rem 1fr; gap: .2rem .8rem; }
  .gl-thumb { width: 3.4rem; height: 3.4rem; }
}
/* 検索結果の情景。⚠ 1,388 件から選ぶとき、文字だけではどこの場面か分からないまま開くことになる */
.hit.has-scene { display: grid; grid-template-columns: 7rem 1fr; gap: 0 1rem; align-items: start; }
.hit-scene { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--rule); }
.hit-body { min-width: 0; }
@media (max-width: 640px) { .hit.has-scene { grid-template-columns: 4.6rem 1fr; gap: 0 .7rem; } }

/* ── 航路（観る）三分類 ─────────────────────────────────
   ⚠ 2026-07-30 作り直し。オーナー指摘「ただ陳列しただけ。ものすごく見にくい」。
   数（章・停留所）を前に出すのをやめ、**時代の幅と所要時間と次の一手**を前に出す。
   国編は「概観」と「深掘り」を同じ行に並べ、二つの深さが同じ国のものだと分かる形にする。 */
.route-kind { margin: 0 0 3.2rem; }
.route-kind > h2 { font-size: 20px; margin: 0 0 .2rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule-strong); display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 0 .9rem; }
.route-kind > h2 small { font-weight: normal; font-size: 14px; color: var(--ink-faint);
  letter-spacing: .04em; }
.route-kind > .sub { margin: .6rem 0 1.1rem; font-size: 14px; }

/* 歴史編 = 一枚の大きな札（ここが主動線） */
.route-hero { display: grid; grid-template-columns: 20rem 1fr; gap: 0 1.4rem; align-items: start;
  padding: 1.1rem; box-shadow: 0 0 0 1px var(--rule); border-radius: 2px; margin-top: 1.1rem; }
.route-hero img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.route-parts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.route-parts > li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  font-size: .92rem; }
.route-parts .pt { min-width: 12rem; }
.route-parts.big { display: grid; gap: 2rem; }
.route-parts.big > li { display: block; }
.route-parts.big h2 { font-size: 20px; margin: 0 0 .5rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: baseline; }

/* 国編 = 国ごとに一行。概観と深掘りを縦に並べ、札で深さを示す */
/* ⚠ 16 か国を縦一列に並べると PC で 3,139px（画面3枚半）になる。札の格子にする。
   ⚠ 画像を上に置く縦型の札にすると、横並びより短く、国名が視線の同じ高さに揃う。 */
.route-countries { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1px; }
.route-countries > li { display: block; padding: .8rem .9rem;
  box-shadow: 0 0 0 1px var(--rule); border-radius: 2px; }
.route-countries .rc-scene { margin-bottom: .6rem; }
.rc-scene, .rt-scene { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.rc-body { min-width: 0; }
.rc-t { margin: 0 0 .45rem; font-size: 1.02rem; }
.rc-row { margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  font-size: .88rem; }
.tag { font-family: var(--font-data); font-size: 14px; letter-spacing: .14em;
  padding: .2rem .5rem; border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink-faint); white-space: nowrap; }
.tag-gold { border-color: var(--gold); color: var(--gold-bright); }
.tag-dim { border-style: dashed; }

/* テーマ編 = 短い一本を四つ */
.route-themes { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; }
.route-themes > li { padding: .9rem 1rem; box-shadow: 0 0 0 1px var(--rule); border-radius: 2px; }
.rt-t { margin: .6rem 0 .35rem; }

/* 章立て = 章を畳んで出す（停留所は開いた人にだけ） */
.route-chs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.route-chs summary { cursor: pointer; font-size: .95rem; }
.route-stops { list-style: none; margin: .4rem 0 .6rem 1.2rem; padding: 0; display: grid; gap: .3rem; }
.route-stops > li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .88rem; }

/* 「観る」釦。朗読の釦（.listen）と同じ寸法・書体で、色だけ変える。
   ⚠ 再生画面のコンテナ（.watch）と同名にしない。同名だった間、釦の nowrap を
   再生画面が継承して字幕が枠外へ流れていた（.coin-img 事故と同型・2026-07-31 根治） */
.watch-link { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.14em;
  /* ⚠ 指で押せる高さ（2026-08-05）。文字の大きさが 0.64rem なので、余白だけでは 44px に届かない */
  display: inline-flex; align-items: center; min-height: 36px;
  padding: .34rem .8rem; border: 1px solid var(--gold); border-radius: 2px;
  /* ⚠ 淡い金の地に金の文字は 2.62 で読めない（実測 2026-08-01）。紺で示す。 */
  color: #fff; background: var(--navy); text-decoration: none;
  white-space: nowrap; }
.watch-link:hover { background: var(--navy-deep); }
.read-act { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* 有料の章へのリンクは名前が長い（「総論・世界2700年 第 33 章『偽金の歴史』（有料受講者向け）」）。
   nowrap のままだと SP 390 で右へ 130px はみ出した（2026-10-16 実測）。折り返して枠の中に収める */
.read-act .watch-link { white-space: normal; max-width: 100%; }
.route-act { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

@media (max-width: 720px) {
  .route-hero, .route-countries > li { grid-template-columns: 1fr; gap: .8rem 0; }
  .route-parts .pt { min-width: 0; }
}

/* 入口の四段（進み方）。⚠ 釦にしない＝選択肢に見せない */
.lp .lp-path { margin: 1.2rem 0 0; padding: 0 0 0 1.4rem; max-width: 34rem;
  font-size: 14px; color: var(--ink-faint); }
.lp .lp-path > li { margin: .25rem 0; }
/* 国編の二層。⚠ 深掘りのある国と概観だけの国を同じ重さで並べない（2分と4時間は別物）。 */
.route-sub { font-size: .92rem; margin: 1.6rem 0 .5rem; letter-spacing: .04em;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rule); }
.dim.small { font-size: 14px; margin: 0 0 .8rem; }
.route-ovonly { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem 1rem; }
.route-ovonly > li { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
  font-size: .9rem; padding: .45rem .2rem; border-bottom: 1px solid var(--rule); }

/* 国編は 16 か国を一つの並びに。⚠ 未完成を隠さず、状態で示す（オーナー指示 2026-07-30）。
   公開中は情景つきで大きく、制作中・近日は同じ枠のまま淡く置く（並びから外さない）。 */
.route-countries > li.st-soon, .route-countries > li.st-building { opacity: .78; }
.route-countries > li.st-soon .rc-scene, .route-countries > li.st-building .rc-scene { filter: grayscale(.35); }

/* 航路の分類タブ。⚠ 三分類を縦に積むと PC で画面3枚半になり、構造も埋もれる。
   タブにして選ばれた分類だけを描く。既定は歴史編（＝推奨の順路をそのまま既定にする）。
   ⚠ 数と時間をラベルに添える（選ぶ前に判断できるように）。 */
.kind-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.8rem; }
.kind-tab { display: flex; flex-direction: column; gap: .15rem; min-width: 9.5rem;
  padding: .6rem .9rem; border: 1px solid var(--rule-strong); border-radius: 2px;
  text-decoration: none; color: var(--ink); background: transparent; }
.kind-tab:hover { border-color: var(--gold); }
.kind-tab.is-on { border-color: var(--gold-bright); background: rgba(194, 161, 91, 0.12); }
.kind-tab .kt-name { font-size: .95rem; }
.kind-tab .kt-meta { font-family: var(--font-data); font-size: 14px; letter-spacing: .12em;
  color: var(--ink-faint); }
/* 分類が一つだけ描かれるので、節の見出しは控えめにする（タブと二重に見えないため） */
.kind-tabs + .route-kind > h2 { border-bottom-color: var(--rule); }
@media (max-width: 720px) { .kind-tab { flex: 1 1 8rem; min-width: 0; } }
/* SP の国編は16枚が縦一列になるので、札の画像を薄くして総丈を詰める
   （画像は消さない＝空の枠を作らないため。丈だけ落とす） */
@media (max-width: 720px) {
  .route-countries .rc-scene { aspect-ratio: 21 / 9; margin-bottom: .45rem; }
  .route-countries > li { padding: .6rem .7rem; }
}
/* 入口の申し出。⚠ 無料と在籍を左右に並べ、価格は在籍側の末尾に置く（先に中身、あとに値段）。 */
.lp-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 1.6rem 0 0; max-width: 46rem; }
.lp-offer-col { padding: 1rem 1.1rem; box-shadow: 0 0 0 1px var(--rule); border-radius: 2px; }
.lp-offer-col.is-paid { box-shadow: 0 0 0 1px var(--gold); }
.lp-offer-t { margin: 0 0 .4rem; font-size: .95rem; }
.lp-offer-b { margin: 0 0 .5rem; font-size: 14px; color: var(--ink-faint); }
.lp-price { margin: .6rem 0 0; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .1em; color: var(--gold-bright); }
@media (max-width: 720px) { .lp-offer { grid-template-columns: 1fr; } }
/* ツアーの再生（学校の中）。⚠ 情景を主役にし、字幕は情景の上、本文は下に置く。 */
/* ⚠⚠ 再生は**全画面**（オーナー指摘 2026-07-31「そもそも動画が全画面にならない」）。
   各編のツアーと同じく viewport を占有し、ヘッダーごと覆う。箱に収めない */
/* ⚠⚠ 没入ツアーだけは墨地のまま（2026-08-01 の統一の例外）。
   全画面の映像装置なので、紙地にすると情景の上の字も、情景そのものも読めない。
   頁の地を紙にした結果、ここの字（--ink 等）が黒に変わって**黒地に黒**になるため、
   この器の中だけ暗地の値へ戻す。⚠ 値は 2026-08-01 以前の :root と同じもの。 */
.watch {
  --ink: #ece3d0; --ink-mid: #c3b799; --ink-faint: #9a8c6f;
  --gold: #c2a15b; --gold-bright: #dcbd7c;
  --rule: rgba(194, 161, 91, 0.2); --rule-strong: rgba(194, 161, 91, 0.4);
  position: fixed; inset: 0; z-index: var(--z-watch); background: #000;
  /* ⚠ 変数の再定義だけでは色は変わらない。color を宣言しない子（本文パネル等）は
     body の暗色 ink を継承し、黒地に黒文字になる（実測 2026-08-10）。 */
  color: var(--ink);
}
body.watching { overflow: hidden; }
.watch-stage { position: absolute; inset: 0; background: #000; overflow: hidden; }
.watch-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: center; }
.watch-caps { position: absolute; left: 0; right: 0; bottom: 6.2rem; z-index: 2;
  /* SP は操作帯が二段に折れて高くなる。字幕を帯に重ねない */
  display: grid; gap: .2rem;
  justify-items: center; text-align: center; padding: 0 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.9); font-size: clamp(1rem, 2.2vw, 1.5rem); color: var(--ink-bright); }
/* 操作は下端の帯に重ねる（情景の上に、読める最小限の墨を敷く） */
.watch-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  justify-content: space-between; margin: 0;
  padding: 2.2rem 1.2rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(8, 7, 5, 0.85) 55%); font-size: 14px; }
.watch-ctl { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* 朗読の操作ひとまとまり（聴く・声・速さ）。narration_state=missing のときは JS がこれごと隠す */
.watch-audio { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* 朗読の出所の注記（2026-09-01 主従入替）。stale=本文が朗読より新しい（警告・朱）／
   unknown=一致を未確認（情報・控えめ）。current は何も出さず、missing は .watch-audio ごと消える。
   flex-basis:100% で操作列の下に一行で回り込む */
.watch-drift { flex-basis: 100%; font-family: var(--font-data); font-size: 14px;
  letter-spacing: .04em; line-height: 1.6; }
.watch-drift.warn { color: var(--gold); }
  /* ⚠ --shu はこの計画では朱ではなく紺（行き先の色）＝暗幕の上では見えない。
     ⚠ --gold-bright(#775A19) は「紙の上」用の暗い金で、これも暗幕では沈む。
     様式の定め（この css の冒頭注記）どおり、暗い地（.watch）の強調は --gold を使う */
.watch-drift.info { color: var(--ink-faint); }
/* 本文（語りの全文）。求めた人にだけ、右の袖から出す */
.watch-text-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
  width: min(30rem, 92vw); margin: 0; padding: 4.2rem 1.6rem 6rem; overflow-y: auto;
  background: rgba(12, 10, 7, 0.94); backdrop-filter: blur(4px); display: none;
  line-height: 2; font-size: .95rem; }
.watch-text-panel.open { display: block; }
/* 閉じる（航路の章立てへ戻る） */
.watch-exit { position: absolute; top: .9rem; right: .9rem; z-index: 8;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: rgba(10, 9, 8, 0.6); border: 1px solid var(--rule-strong); border-radius: 50%;
  color: var(--ink); font-size: 1rem; padding: 0; font-weight: 400; }
.watch-exit:hover { filter: none; transform: none; border-color: var(--gold); color: var(--gold-bright); }
/* 観る前の画面へ戻る（出発点へ）。✕ と同じ帰り先だが、言葉のある動線として左上に置く */
.watch-back { position: absolute; top: .9rem; left: .9rem; z-index: 8;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(10, 9, 8, 0.6); border: 1px solid var(--rule-strong); border-radius: 2rem;
  color: var(--ink); font-family: var(--font-data); font-size: 14px; letter-spacing: .08em;
  font-weight: 400; padding: .55rem 1.1rem; }
.watch-back:hover { filter: none; transform: none; border-color: var(--gold); color: var(--gold-bright); }
/* 情景の種別の札（2026-10-26 没入改稿 VIEW2）。情景の左上＝戻る釦（top .9rem・高さ約 2.6rem）の下に重ねる。字は 14px・地は戻る釦と同じ墨。
   ⚠ 操作の自動退避（hud-off）では消さない（札は操作ではなく画像の説明）。扉（z 7）と操作帯（z 6）・本文の袖（z 5）より下 */
.watch-role { position: absolute; top: calc(.9rem + 3.1rem); left: .9rem; z-index: 3; margin: 0;
  background: rgba(10, 9, 8, 0.72); color: var(--ink); border-color: var(--rule-strong); }
/* ── HUD の自動退避（オーナー要望 2026-07-31）───────────────────────
   再生中は操作を情景に譲り、触れたら出す。字幕は内容なので消さない。
   ⚠ pointer-events も切る（透明なまま押せると、情景タップのつもりが釦に当たる） */
.watch-bar, .watch-exit, .watch-back { transition: opacity .35s ease; }
.watch.hud-off .watch-bar, .watch.hud-off .watch-exit, .watch.hud-off .watch-back {
  opacity: 0; pointer-events: none; }
/* 再生の操作釦。⚠ 既定の button（金の主釦）に落とさない — 8個の操作が全部主釦になると
   階層が消える。副次操作は静かな枠線、選択中（.is-on）だけ金で示す */
.tour-btn { background: transparent; color: var(--ink-mid); font-weight: 400;
  border: 1px solid var(--rule-strong); padding: .38rem .7rem; font-size: 14px; }
.tour-btn:hover { filter: none; transform: none; border-color: var(--gold); color: var(--gold-bright); }
.tour-btn.is-on { background: rgba(194, 161, 91, 0.16); border-color: var(--gold-bright);
  color: var(--gold-bright); }
.tour-rate-label { font-family: var(--font-data); font-size: 14px; letter-spacing: .1em;
  color: var(--ink-faint); margin-left: .4rem; }
/* 「← 戻る」「章立てを見る」等の小さな道しるべリンク */
.more { font-family: var(--font-data); font-size: 14px; letter-spacing: .08em;
  display: inline-block; padding: .4rem 0; }

/* ── 学校の中の再生画面（各編ツアーと同じ体験を出す） ────────────────────
   ⚠ 2026-07-30 オーナー指摘「なんで動画がフルで見れなくなってるの？仕様変えないでよ」。
      情景＋字幕だけの簡易版にしていた。Ken Burns・王の切り抜き・格言・章の扉を戻す。 */
/* Ken Burns。停留所ごとに寄り引きを変える（同じ動きが続くと画が死ぬ） */
.watch-scene.kb-0 { animation: kb0 26s ease-out forwards; }
.watch-scene.kb-1 { animation: kb1 26s ease-out forwards; }
.watch-scene.kb-2 { animation: kb2 26s ease-out forwards; }
.watch-scene.kb-3 { animation: kb3 26s ease-out forwards; }
.watch-scene.kb-4 { animation: kb4 26s ease-out forwards; }
@keyframes kb0 { from { transform: scale(1.02) } to { transform: scale(1.13) } }
@keyframes kb1 { from { transform: scale(1.13) } to { transform: scale(1.02) } }
@keyframes kb2 { from { transform: scale(1.04) translateX(1.5%) } to { transform: scale(1.14) translateX(-1.5%) } }
@keyframes kb3 { from { transform: scale(1.04) translateY(1.5%) } to { transform: scale(1.14) translateY(-1.5%) } }
@keyframes kb4 { from { transform: scale(1.12) translateX(-1.5%) } to { transform: scale(1.03) translateX(1.5%) } }
.watch-stage.is-paused .watch-scene { animation-play-state: paused; }

/* 王・支配者の切り抜き（想像図）。字幕にかからない高さで右に立たせる */
.watch-figures { position: absolute; right: 2%; bottom: 12%; display: flex; align-items: flex-end;
  gap: .5rem; pointer-events: none; }
.watch-figure { height: min(46vh, 340px); width: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)); animation: figIn 1.2s ease-out both; }
@keyframes figIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* 格言と章末の栞 */
.watch-quote { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: .4rem; padding: 8% 10%; text-align: center; background: rgba(10,9,8,.72); backdrop-filter: blur(3px);
  z-index: 5; }
/* ⚠⚠ display を明示した要素は hidden 属性が効かない（UA の [hidden]{display:none} が負ける）。
   実害: 格言の黒幕が**再生中ずっと**画面に被さり、「映像が動かず音声のみ」に見えていた */
.watch-quote[hidden] { display: none; }
/* 停止中の話の案内（2026-10-27 CAPS）: 字幕の位置に置く。文字は 16px 以上。hidden を明示（display を持つ要素は UA の hidden が負ける） */
.watch-held { position: absolute; left: 6%; right: 6%; bottom: 6.2rem; z-index: 4; display: grid; justify-items: center; gap: .5rem;
  padding: .9rem 1rem; text-align: center; background: rgba(10,9,8,.78); border-radius: 8px; }
.watch-held[hidden] { display: none; }
.watch-held-note { margin: 0; font-size: 16px; line-height: 1.6; color: #f4efe6; }
.watch-held-act { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.watch-held-act .tour-btn { font-size: 16px; }
/* 試読の終わり（W19 第 2 単位）: 次に無料で読む・さらに学ぶ・料金・受講案内まで載るので、SP 320 で縦に溢れる。
   上から並べて、黒幕の中で縦に巻けるようにする。文字は 14px 以上 */
.watch-quote.free-end { align-content: start; overflow-y: auto; padding: 4.2rem 6% 2rem; z-index: 7; }
.watch-quote.free-end .watch-quote-label { font-size: 15px; }
.watch-quote.free-end .watch-quote-by { font-size: 14px; color: var(--ink-mid); }
.watch-next-free, .watch-further { max-width: 34rem; text-align: left; }
.watch-quote-mark { font-family: var(--font-mincho); font-size: 2.6rem; color: var(--gold-bright); line-height: 1; }
.watch-quote-text { font-family: var(--font-mincho); font-size: clamp(1rem, 2.2vw, 1.5rem); line-height: 1.9;
  color: var(--ink-bright); max-width: 34em; }
.watch-quote-by { font-size: 14px; color: var(--gold-bright); letter-spacing: .06em; }
.watch-quote-label { font-size: 14px; letter-spacing: .18em; color: var(--gold-bright); }

/* 章の扉。押した動作が、そのまま音の許可になる */
.watch-door { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: .5rem; background: rgba(10,9,8,.78); backdrop-filter: blur(2px); text-align: center; padding: 6%;
  z-index: 6; }
/* ⚠⚠ 2026-09-07: 扉と操作帯が同じ z-index 6 で、DOM の後ろにある帯が勝っていた。
   SP では帯が 365px に折れ、「読みはじめる」を丸ごと覆って章を開けなかった（実測 390/360/414px）。
   扉が出ている間は、扉を帯より上に置き、帯は触れない（扉の前の 前/次/聴く は何も指していない）。
   ✕ と ← 戻る は扉より上に残す＝どの状態でも出口は塞がない。 */
.watch.has-door .watch-door { z-index: 7; }
/* 2026-09-11: 扉が出ている間は帯を見せない（半透明の扉越しに 9 釦が透けていた）。opacity は .watch-bar の transition で戻る */
.watch.has-door .watch-bar { pointer-events: none; opacity: 0; }
.watch-door-era { font-size: 14px; letter-spacing: .2em; color: var(--gold-bright); }
.watch-door-no { font-family: var(--font-mincho); font-size: 3rem; line-height: 1; color: var(--gold-bright); }
.watch-door-t { font-family: var(--font-mincho); font-size: clamp(20px, 3vw, 22px); margin: 0; }   /* 2026-10-26 要件定義書 v2 5 章: h2 は 20〜22px（旧 上限 2rem＝32px） */
.watch-door-n { font-size: 14px; color: var(--ink-faint); margin-bottom: .6rem; }
/* 2026-10-26 没入改稿 LINK: 停を名指しして来た人への一行（「〜」から読みます）と、元の場所へ戻る口。
   字は 14px 以上（読者は 60 代が多い・既存の .watch-door-n と同じ 14px）。戻る口は扉の外の操作帯にも出る */
.watch-door-stop { font-size: 16px; color: var(--ink); margin: 0 0 .4rem; }
.watch-door-ret { margin: .4rem 0 0; font-size: 14px; }
.watch-ret { font-size: 14px; white-space: nowrap; }
@media (max-width: 720px) { .watch-figure { height: min(34vh, 240px); }
  .watch-caps { bottom: 9.4rem; } }

/* シラバス（章の地図）— 節々の前に置く導入。節と紛れないよう罫で受ける */
.syllabus { border-left: 2px solid var(--gold, var(--rule-strong)); padding-left: 1.1rem;
  margin-bottom: 2.2rem; color: var(--ink-mid); }

/* 常時ダークの製品であることを UA に伝える（スクロールバー・フォーム部品の配色） */
:root { color-scheme: dark; }

/* タップ寸法: 実測で 40px 未満だった操作要素に触れ幅を足す（見た目の寸法は変えない）。
   ⚠ SP（≤640px）のナビは横スクロール一行の専用設計（padding 0.8rem 0.65rem）が既にある —
   そこを上書きしないよう、この底上げは PC 幅に限る */
@media (min-width: 641px) {
  .nav a, .nav-util a { display: inline-block; padding: .55rem 0; }
}
.foot a { display: inline-block; padding: .45rem .1rem; }

/* 動きを抑える設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* 振込の申込（2026-08-04）。⚠ 受付番号は**画面に出すのが主**（便りは控え）。
   ⚠ <pre> は既定で折り返さない。SP(390px) で横にはみ出したので white-space を明示する
   （実測で捕まえた。宣言だけしても、幅を当てて見るまで分からない）。 */
.bank-applied { margin: 1.2rem 0; }
.bank-ref { font-size: 1.05rem; letter-spacing: 0.04em; }
.bank-ref strong { font-size: 1.5rem; letter-spacing: 0.16em; color: var(--shu); }
.bank-info {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--rule-strong);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ── 指と鍵盤（2026-08-04 の実測で直した三点） ─────────────────────
   ⚠⚠ ① 押せるものの高さが足りなかった。実測: 「カードで支払う」39px・
      「銀行振込で申し込む」39px・実物の絞り込み札 31px（27 個）。
      指標は 44px。**買っていただく釦が押しにくい**のは、体裁の話ではなく売上の話。
   ⚠ 文字を大きくして解くと版面が崩れるので、**縦の余白で高さを稼ぐ**。 */
button, .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
button.small, .btn.small, .mini { min-height: 36px; }   /* 補助の釦は 36px（並びが崩れないため） */
/* 絞り込みの札は数が多い。36px で、行が増えすぎない高さにする */
/* ⚠ 選択子は**実物の class を見てから**書く。最初 .picks .pick / .gl-tag / .coin-filter button と
   書いたが、実際は .frow > .chip（実物の絞り込み）で、25 個が 31px のまま残っていた。 */
.chip, .picks .pick, .gl-tag { min-height: 36px; display: inline-flex; align-items: center; }
/* 航路の「最初から観る」等は .btn ではなく .watch-link。block なので余白で高さを作る */

/* ⚠⚠ ② 鍵盤で辿ったときの輪郭が、ブラウザ既定（明るい地に細い黒線）のままだった。
      実測: outline: auto 1px rgb(16,16,16)。**ほぼ見えない**。
      鍵盤だけで使う人が、いまどこに居るのか分からない状態だった。 */
:where(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ⚠⚠ ③ 金地に金文字の帯が読みにくかった（合成して測ると AA を下回る）。
      「いまは聴講（無料）です…」は**入学の一歩手前の人が読む一文**なので、ここは落とせない。
      地の色は残し、文字だけ本文と同じ濃さにする。 */
/* ⚠ `.msg.wait` は金文字を指定しており、詳細度が高いのでこちらが負けていた（実測: 比 2.14）。
   同じ詳細度で当て直す。地の金は残す＝**印としての金は保ち、読む文字だけ濃くする**。 */
.msg.ok, .msg.wait { color: var(--ink); }

/* ⚠⚠ 用語集の 2,744 個を「押しにくい」と機械が数えたが、**2,422 個は文中のリンク**
   （科目コード B03 等）だった。WCAG 2.5.8 も文の中のリンクは対象外としている。
   ここに 36px を当てると行送りが壊れて版面が崩れる。**指標を全部に当てるのは誤り**。
   行末の独立した動作（くわしく →）だけを、指で押せる大きさにする。 */
/* 文中のリンクは、間隔で誤爆を防ぐ（大きさではなく距離で解く） */
.gl-courses a { padding: 0.15rem 0.25rem; margin: 0 0.05rem; }

/* 続きを出す押しどころ（用語集・実物）— 2026-08-05
   ⚠ 一息に全件を出すと用語集 44,195px / 実物 22,661px あった。
      辞典も図録も端から読むものではないので、最初は一画面ぶんだけ出す。 */
.gl-more-wrap { margin: 1.6rem 0 0; text-align: center; }
.gl-more-wrap .btn { min-width: 14rem; }

/* ── 貨幣学検定・合格証（2026-08-09 新設）── */
.exam-level { border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; margin: 14px 0; }
/* ⚠ 2026-10-16（W19 第 4 単位）: 段の見出しを隠す規則（.part > h2 { display: none }）が検定の級の名（三級・二級・一級）・受験の記録・
   結果の見出しまで隠していた（実測: 級の札に名が無く、説明と問数だけが並んでいた）。検定の段では見出しを出す */
/* 科目の頁の「参考文献」も同じ原因で隠れていた（W19 第 4 単位の追補）。自前の h2 を持つ段だけを、印（class）で名指して出す */
.part.exam-part > h2, .part.part-own-h2 > h2 { display: block; margin: 0 0 .4rem; font-size: 20px; }
.exam-q .body { margin-bottom: 8px; }
.exam-choices { display: grid; gap: 6px; margin: 8px 0 4px; }
.exam-choice { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
.exam-choice:hover { background: rgba(255,255,255,.04); }
.exam-hist { width: 100%; border-collapse: collapse; }
.exam-hist td { border-bottom: 1px solid var(--rule); padding: 8px 10px; }
.cert { max-width: 720px; margin: 40px auto; padding: 48px 44px; text-align: center;
  border: 1px solid var(--rule-strong); background: var(--paper); }  /* 2026-10-24 指示 74: 金の二重罫をやめた */
.cert-school { letter-spacing: .18em; font-size: 14px; color: var(--ink-mid); }
.cert-title { font-size: 2rem; margin: .6em 0; letter-spacing: .3em; }
.cert-line { font-size: 1.1rem; line-height: 2; margin: 1.2em 0; }
.cert-score { color: var(--ink-mid); }
.cert-meta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin: 1.6em 0 .8em; color: var(--ink-mid); font-size: .92rem; }
.cert-verify { font-size: 14px; color: var(--ink-faint); word-break: break-all; }
@media print {
  body > *:not(#view), .cert-print { display: none !important; }
  .cert { border-color: #333; color: #000; background: #fff; margin: 0; }
  .cert-school, .cert-score, .cert-meta { color: #333; }
}

.exam-levels { display: grid; gap: 4px; }
.exam-start { min-width: 220px; }
.ref-list { line-height: 1.9; }
.ref-list small { color: var(--ink-faint); }
.sup-credit { color: var(--ink-mid); }

/* ── マイページ（#/me・2026-09-04）。⚠ どの文字も 14px 以上（09-04 裁定） ── */
.me-stats { display: grid; gap: 0.6rem; grid-template-columns: repeat(3, 1fr); margin: 0.8rem 0 1rem; }
@media (max-width: 640px) { .me-stat { padding: 0.6rem 0.6rem; } .me-stat b { font-size: 1.4rem; } }
.me-stat { border: 1px solid var(--rule); background: var(--paper-hi); padding: 0.8rem 0.9rem; border-radius: 2px; }
.me-stat b { display: block; font-family: var(--font-data); font-size: 1.7rem; line-height: 1.1; color: var(--gold-bright); }
.me-stat span { display: block; font-size: 0.9rem; color: var(--ink-mid); margin-top: 0.3rem; }
.me-kv { display: grid; gap: 0.6rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0.6rem 0 1.2rem; }
.me-kv > div { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.me-kv dt { font-family: var(--font-data); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--ink-mid); }
.me-kv dd { margin: 0.15rem 0 0; font-size: 1rem; overflow-wrap: anywhere; }
.me-pay th { font-size: 0.9rem; color: var(--ink-mid); font-weight: 500; text-align: left; }
.me-pay td.num { font-family: var(--font-data); }
/* ⚠ SP で「方法」「振込」「着金待ち」が一字ずつ折れていた（実測）。PC は折らない表、
   SP は一件ごとの札（見出しは各セルの data-l から）。横に送る表は、送れることが見えない */
.me-pay th, .me-pay td { white-space: nowrap; }
@media (max-width: 640px) {
  .me-pay, .me-pay tbody { display: block; }
  .me-pay thead { display: none; }
  .me-pay tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; border: 1px solid var(--rule); border-radius: 2px; padding: 0.7rem 0.9rem; margin: 0 0 0.6rem; }
  .me-pay td { display: block; white-space: normal; padding: 0; border: 0; }
  .me-pay td::before { content: attr(data-l); display: block; font-family: var(--font-data); font-size: 0.9rem; color: var(--ink-mid); }
}
#foot { margin-top: 4rem; }
.me-offer { border: 1px solid var(--rule); background: var(--paper-hi); padding: 1rem 1.2rem 1.2rem; margin: 1.2rem 0; border-radius: 2px; }
.me-offer .route-act { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.me-forms { display: grid; gap: 1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.me-forms form, .me-forms > div { border: 1px solid var(--rule); background: var(--paper-hi); padding: 1rem 1.1rem 1.2rem; border-radius: 2px; min-width: 0; }
.me-forms h3 { margin: 0 0 0.6rem; font-size: 20px; }
.me-forms label { font-size: 0.9rem; }
.me-forms input, .me-forms select { width: 100%; max-width: 100%; box-sizing: border-box; }
.me-forms button { margin-top: 0.9rem; }
.me-forms .dim { font-size: 0.9rem; }
.me-email { font-family: var(--font-data); overflow-wrap: anywhere; margin: 0.2rem 0 0.4rem; }
.me-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1rem 0 2rem; }

/* 写真の格子（FIG.photos・2026-09-05） */
.fig-photos { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
.fig-photo { margin: 0; }
.fig-photo img { width: 100%; height: auto; display: block; border-radius: 6px; background: #f1ede4; }
.fig-photo figcaption { font-size: 16px; line-height: 1.5; margin-top: 4px; color: var(--plate-ink); }   /* ⚠ この説明文は台紙 .fig-box（両面ともクリーム）の上に載る。面の文字色 --ink-mid は暗い面で明るい灰になり読めない（2026-09-05 実測 rgb(224,227,229) on #f3ecdd）。SVG の図と同じ台紙用の墨 --plate-ink を使う */
.fig-photo figcaption b { margin-right: 6px; }
.fig-photo figcaption span { opacity: .8; }
/* 2026-10-26 没入改稿 E2: 見る箇所の枠（画像に重ねる・画像は加工しない）と、押すと元の画像を開く */
.fig-photo-open { display: block; }
.fig-photo-wrap { position: relative; display: block; }
.fig-mark { position: absolute; border: 3px solid #0A1F44; box-shadow: 0 0 0 2px #fff; border-radius: 2px; pointer-events: none; }
.fig-mark b { position: absolute; top: -2px; left: -2px; transform: translate(-100%, 0); min-width: 1.4em; padding: 0 .3em; font-size: 14px; line-height: 1.5; text-align: center; color: #fff; background: #0A1F44; }
@media (max-width: 600px) { .fig-photos { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); } }

/* 四週間の案内（任意・2026-09-07）。⚠ 遅れを赤で示さない。現在地は下線だけ */
.plan-next { margin:.8rem 0 1rem; }
.plan-next .btn { margin-left:.8rem; }
.plan-list { margin:0 0 1.6rem; padding-left:1.4rem; font-size:16px; line-height:1.9; }
.plan-list .plan-no { display:inline-block; min-width:8.5em; color:var(--ink-faint); font-size:14px; }
.plan-list li.plan-now { text-decoration:underline; text-underline-offset:4px; }
.plan-list small { margin-left:.6rem; font-size:14px; }

/* 参加・休止（2026-09-07 工程 2B）。⚠ 状態は色だけで示さない（語で書く） */
.plan-state { margin:.4rem 0 1rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:16px; }
.plan-state .dim { font-size:14px; }

/* 回の終わりに残す成果（2026-09-07・R4 §0.4）。案内の中に畳んで置く。
   ⚠ 演習の欄と同じ見た目にしない — 演習の答えではないことが、見て分かるようにする */
.unit-task { margin: .5rem 0 .8rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 6px; }
.unit-task > summary { cursor: pointer; font-size: 16px; line-height: 1.7; }
.unit-task .ut-f { display: block; margin: .5rem 0; font-size: 14px; }
.unit-task .ut-f textarea { width: 100%; font-size: 16px; line-height: 1.8; }
.unit-task .ut-hint { font-size: 14px; margin: .2rem 0 .4rem; }

/* 出題を止めた問題（2026-09-07 編集判断 §1）。本人の記録があるときだけ、演習の最後に畳んで置く。
   ⚠ 現役の演習と同じ見た目にしない — 書く欄が無いことが、開く前に分かるようにする */
.retired-drills { margin: 1.2rem 0 0; padding: .6rem .8rem; border: 1px dashed var(--rule); border-radius: 6px; }
.retired-drills > summary { cursor: pointer; font-size: 16px; color: var(--ink-mid); }
.retired-drills .drill--retired { opacity: .92; border: 0; padding: .4rem 0; }
.retired-drills blockquote { margin: .3rem 0 0; padding-left: .8rem; border-left: 2px solid var(--rule); font-size: 16px; }

/* 回の成果の欄（2026-09-07 編集判断 §4）。補助文は常に読める位置に置く */
.unit-task .ut-intro { font-size: 16px; line-height: 1.9; margin: .4rem 0 .6rem; }
.unit-task .ut-common, .unit-task .ut-note { font-size: 14px; margin: .4rem 0; }
.unit-task .ut-note { font-size: 16px; }   /* 2026-10-26 要件定義書 v2 5 章: 注記は 16px（同じ規則のほかの選択子は変えない） */
.unit-task .ut-f > b { display: block; font-size: 16px; }
.unit-task .ut-f .ut-hint { display: block; font-size: 14px; color: var(--ink-faint); margin: .1rem 0 .2rem; }
.unit-task .ut-explain { margin: .6rem 0; padding: .5rem .8rem; border-left: 3px solid var(--rule); font-size: 16px; line-height: 1.9; }
.unit-task .ut-coin { margin: .6rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.unit-task .ut-coin img { width: 100%; height: auto; border-radius: 4px; }
.unit-task .ut-coin figcaption { grid-column: 1 / -1; font-size: 16px; line-height: 1.8; }
.unit-task .ut-before { margin: .6rem 0; font-size: 14px; }
.unit-task .ut-before blockquote { margin: .2rem 0; padding-left: .8rem; border-left: 2px solid var(--rule); font-size: 16px; }
/* ⚠ 2026-09-07（編集判断 §1）: 携帯で二枚を横に並べると片方 146px しかなく、角や銘の位置が見えない。
   狭い画面では一枚ずつ縦に置く（実測 390px で 358px 幅・2 倍の画面なら 716 物理 px） */
@media (max-width: 560px) {
  .unit-task .ut-coin { grid-template-columns: 1fr; }
}
/* この回の資料（2026-09-07 E2 §2）。役割（主資料／背景資料）を、読者が開く場所に出す */
.unit-task .ut-mats { margin: .6rem 0; font-size: 14px; }
.unit-task .ut-mats ul { margin: .2rem 0; padding-left: 1.2rem; }
.unit-task .ut-mats li { font-size: 16px; line-height: 1.9; }

/* 実物ページから「この貨幣を観察する」で来たときに、目当ての回を示す（2026-09-08）
   ⚠ 記録は動かさない。見た目だけの目印 */
.plan-aimed { outline: 2px solid var(--gold, #d8b25a); outline-offset: 6px; border-radius: 4px; }

/* ⚠⚠ 2026-09-08 監査 A-030: JS を動かす前に読まれる静的本文（section.static-home・
   tools/lp_static_home.mjs が描画後の入口から機械で写す）に、寸法の指定が無い <img> が 26 枚あり、
   自然の幅（1,248〜1,536px）のまま並んでいた。実測（配信面・作業木 19113）:
     JS なし    390px → 中身 1,556px（299% はみ出し）／1,280px → 1,810px（41%）
     JS あり    入口の CLS = SP 0.089・PC 0.230（描画途中に 1,810px まで広がってから縮む）
   app.js が起動すれば #view ごと置き換わるが、**置き換わるまでの版面は本物の版面**である。
   ⚠ 生成物（index.html）は手で直さない決まりなので、装いはここで与える。
   ⚠ 高さは持っていないので aspect-ratio は書かない（根拠のない値を入れない）。 */
.static-home img { max-width: 100%; height: auto; }

/* 2026-10-23 申込みの最終確認（特商法） */
.enroll-sum { border: 2px solid var(--gold); border-radius: 12px; padding: 16px 20px; margin: 16px 0; }
.enroll-sum-h { font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.enroll-sum dt { font-weight: 700; font-size: 16px; margin-top: 10px; }
.enroll-sum dd { margin: 4px 0 0; font-size: 16px; line-height: 1.7; }
.path-door { margin: 16px 0 0; }
.p1-guide { margin: 24px 0; }   /* 2026-10-23 第 2 段 54: P1 の第 1 節の後の登録の案内 */   /* 2026-10-23 第 2 段: 3 本読んだ人への隣の扉 */
.enroll-endnote { margin: 12px 0 0; font-size: 14.4px; line-height: 1.7; color: inherit; }   /* 2026-10-23 第 2 段 57: 料金の枠の注記と同じ（本文 16px の 90%・灰色にしない） */

/* マイページのお試し期間と返金の申し出（2026-10-23）。押せる物は 44px 以上・字は 16px */
.me-trial { margin: 0 0 24px; }
.me-trial p { margin: 0 0 8px; font-size: 16px; }
.me-refund summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 16px; font-weight: 700; }
.me-refund form { display: grid; gap: 8px; margin-top: 8px; }
.me-refund textarea { font: inherit; font-size: 16px; min-height: 88px; padding: 8px; }
.me-refund [hidden] { display: none !important; }   /* 2026-10-23 指示 5: ボタンを押すまでフォームを出さない・押したらボタンを隠す（.btn・grid の display が hidden を打ち消さないように） */
.me-refund select, .me-refund input:not([type="checkbox"]) { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 8px; }
.me-refund-bank { display: grid; gap: 8px; border: 1px solid currentColor; border-radius: 6px; padding: 12px; margin: 4px 0; }
.me-refund-bank legend { font-weight: 700; padding: 0 4px; }
.me-refund-yucho { margin: 0; padding: 8px 10px; border-left: 4px solid currentColor; font-size: 16px; }
.me-refund button[disabled] { opacity: .5; cursor: not-allowed; }
.me-refund-ok { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 16px; }
.me-refund-ok input { width: 24px; height: 24px; }
/* 外国語版の撤回権の同意の欄（2026-10-23）。押せる範囲は 44px 以上・字は 16px */
.enroll-waiver { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; margin: 12px 0; font-size: 16px; line-height: 1.6; cursor: pointer; }
.enroll-waiver input { width: 24px; height: 24px; flex: none; margin-top: 2px; }
/* 鍵の印（2026-10-24 指示 75）の .lk は public/academic.css にある（学びの画面も academic.css を読む） */

/* 検索の結果の札と空のときの退路（2026-10-24 学習体験の点検 §18）。読者は 60 代が多い — 14px 以上 */
html .hit .h-meta { font-size: 14px; }
.s-fmt { display: inline-block; font-family: var(--font-data); font-size: 14px; letter-spacing: 0; border: 1px solid var(--rule); border-radius: 3px; padding: 0 6px; margin-right: 6px; color: var(--ink); }
.s-state { font-size: 14px; color: var(--ink-faint); margin-right: 6px; }
.s-alt a, .s-lists a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.s-help { font-size: 16px; }
.s-lists { padding-left: 1.2em; }
.hit-scene.s-coin { aspect-ratio: 1 / 1; object-fit: contain; }

/* 2026-10-25 学習体験の点検 項目 21 の残り: 節・問いから窓口（/support）へ行く口（public/app.js askHref）。本文より控えめ・文字 14px・押せる高さ 44px */
.ask-line { margin: .8rem 0 0; font-size: 14px; }
.ask-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-mid); }

/* ── 2026-10-26 公開前の直し（単位 B・オーナー 10/25 23:40「金で塗ったボタンは藍。アイボリー地の金の文字は濃い金 #775A19 だけ」）──
   上の button, .btn（金のグラデーション）と用語の種別の釦（.gl-tabs button.on）を、明るい面だけ藍 #0A1F44・字 #FBF6EA に。
   :where() で包んで詳細度を元の規則（button＝0,0,1／.btn＝0,1,0）と同じにする＝個別に地を決めている釦（.rating button・.gl-tabs button・ghost など）はそのまま勝つ。
   暗い面は従来の金のまま */
:where(html[data-theme="light"]) button { background: #0A1F44; color: #FBF6EA; }
:where(html[data-theme="light"]) .btn { background: #0A1F44; color: #FBF6EA; }
html[data-theme="light"] .gl-tabs button.on { background: #0A1F44; color: #FBF6EA; border-color: #0A1F44; }
html[data-theme="light"] .msg.wait { color: var(--gold-bright); }   /* 旧 --gold（#C5A059・アイボリー地で 2.2）。字の金 #775A19 に */

/* 2026-10-27 没入改稿 E2: 本文・問いの中の写真の並び（app.js の md() の画像だけの行）。押すと元の画像を開く */
.md-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: .8rem 0; }
.md-imgs figure { margin: 0; }
.md-imgs img { width: 100%; height: auto; display: block; border-radius: 6px; background: #f1ede4; }
.md-imgs figcaption { font-size: 14px; line-height: 1.5; margin-top: 4px; }