/* 色は【用途別】に分ける。文字は 4.5:1、線は 3:1（§9.2）。
   旧実装の --hair:#DDE3EC は 1.29:1 で線の要件を満たしていなかった。 */
:root{
  /* ⭐VIS-1（2026-08-08）: ブラウザ側の部品（スクロールバー・フォーム・選択範囲）も
     ⭐明暗に追従させる。⛔これが無いと、ダークでスクロールバーだけ白く残る。
     `accent-color` はチェックボックス・range（設定画面にある）に効く。 */
  color-scheme:light dark;
  accent-color:var(--accent);

  /* ⭐2026-08-08 デザイン刷新（本人が参考サイトを指定）。地は【白ではなく淡い紙】。
     ⚠️白地＋線だけの構成は「役所の申請フォーム」に見えていた（CEO実測）。
     ⭐淡い紙の上に白いカードが乗る形にすると、影を足さなくても階層が立つ。 */
  --bg:#F4F7FA;              /* 紙（ページの地） */
  --card:#FFFFFF;            /* カード（この上に文章が載る） */
  --fg:#1F2530;              /* ⛔真っ黒にしない。濃いグレーのほうが刺さらない */
  --muted:#59616E;
  --hair:#828FA3;            /* 線 3:1 以上（白カード 3.28 / 紙 3.05） */
  --ok-text:#0F7A52; --ok-line:#1F9D6B;
  --ng-text:#B3261E; --ng-line:#D9483F;
  --accent:#0B6BA8;          /* ⭐冷たくない明るい青 */
  /* リンクは【用途別の変数】に分ける（accent はボタン背景で用途が違う）。
     ⚠️2026-08-07 の実機検証まで a{color} の規則自体が無く、UA既定の青がそのまま出ていた。
     ダーク背景では 1.9:1（要件4.5:1）。⛔規則が無い欠陥は「定義済みの色を測る」検査には映らない。 */
  --link:#0B6BA8; --link-visited:#7A4DA8;
  /* 面。⭐解説やカードを「紙が1枚上に乗っている」ように見せるための背景（本文とは役割が違う）。
     ⚠️背景色なので 4.5:1 の対象ではないが、この上に載る文字は --fg で 4.5:1 を満たす必要がある */
  --surface:#EDF1F6; --surface-line:#DCE3EC;

  /* ⭐角の丸み。⚠️大きめに取る＝この製品の「柔らかさ」の主担当。
     ⛔書体に頼らない——丸ゴシックが無い端末（Windows）でも同じ印象になるようにするため。 */
  --r-sm:.5rem; --r-md:.875rem; --r-lg:1.125rem;

  /* ⭐間隔の体系（2026-08-08 UI改善）。0.25rem 刻み。
     ⛔個別に margin を書かない——リズムが崩れて「散らかって見える」のが見づらさの主因だった */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;

  /* ⭐文字の階層（2026-08-08 UI改善）。
     ⚠️改善前は .8125〜1.0625rem の狭い帯に【全部】潰れており、設問も出典も注記も同じ重みに見えていた。
     ⛔px を使わない（利用者の文字サイズ設定を殺す・§9.1 #4）。 */
  --t-lead:1.25rem;    /* ホームの導入・見出し級 */
  --t-q:1.125rem;      /* 設問——いちばん長く読むもの */
  --t-body:1rem;       /* 選択肢・解説の本文 */
  --t-meta:.875rem;    /* 補助情報 */
  --t-fine:.8125rem;   /* 出典・注記など、必要な人だけが読むもの */

  /* ⭐行間。長文ほど広く。⚠️改善前は全部 1.6 の一律だった */
  --lh-read:1.85;      /* 設問・解説（じっくり読む） */
  --lh-ui:1.5;         /* ボタン・メタ（ちらっと見る） */

  --ui-scale:1;
}
@media (prefers-color-scheme: dark){
  /* ⭐ダークへの翻訳: 「淡い紙＋白いカード」を【暗い地＋一段明るいカード】に置き換える。
     ⛔明暗を単純反転しない——反転するとカードが真っ黒になり、紙の上に乗る感じが消える。 */
  :root{ --bg:#121821; --card:#1C2430; --fg:#E7EAF0; --muted:#9AA4B2; --hair:#65707E;
         --ok-text:#5FD3A2; --ok-line:#3FB588; --ng-text:#FF9C93; --ng-line:#E4695E;
         --accent:#5FBDF0;
         --link:#5FBDF0; --link-visited:#CBA6F0;
         --surface:#242D3A; --surface-line:#333D4B; }
}
/* 利用者の既定文字サイズを尊重する。html に px を書かない（§9.1 #4） */
html{ font-size:calc(100% * var(--ui-scale)); }
body{
  margin:0; padding:var(--s4) var(--s4) var(--s7); background:var(--bg); color:var(--fg);
  /* ⚠️⚠️VIS-3 ＋ VIS-17（2026-08-08・⛔この2件は同じ1行なので必ず一緒に直す）。
     ⛔丸ゴシックを先頭に置いていたが、**本人のiPhoneで太さの階層が壊れて**いた
       （合成太字が汚く出る）。⚠️そして Windows には日本語の丸ゴシックが1つも無いので、
       ⭐**かなだけが別の書体に落ちて 25% 細く**なっていた（VIS-17）。
     🔴⛔**本人のiPhoneでは VIS-17 が出ません**——出るのは Windows/Android の訪問者です。
       ⭐**直ったかを本人が確かめられない項目**なので、検査で押さえる。
     ⭐柔らかさの主担当は、もともと書体ではなく【角の丸み・淡い紙・余白】に置いてある。 */
  font-family:system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
              "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height:var(--lh-ui);
  /* ⭐日本語の字面を締める。長文が「ばらけて」見えるのを防ぐ（0 だと和欧混植で緩む） */
  font-feature-settings:"palt" 1;
}
main{ max-width:38rem; margin:0 auto; }   /* 日本語で約38文字 */

/* リンク。⛔UA既定にフォールバックさせない（ダークで 1.9:1 になる・§9.2）。
   下線は残す＝色だけで「リンクである」ことを示さない（§9.1 #3 の脱・色依存と同じ考え） */
a{ color:var(--link); }
/* ⚠️⚠️VIS-4（2026-08-08）: 無限定の `a:visited` が**ナビ部品にも当たって**いた。
   ⛔とくに `.unit-start`（青枠のボタン風リンク）が**青枠×紫文字**になっていた。
   ⭐`:visited` は【本文の中のリンク】にだけ効かせる（⛔部品は「押すもの」で、既読の概念が無い）。 */
:where(p, li, td, dd, .prose-list) a:visited{ color:var(--link-visited); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.meta{ color:var(--muted); font-size:var(--t-meta); margin:0 0 var(--s1); }

/* ⭐設問。この画面でいちばん長く読むもの＝いちばん読みやすくする。
   ⚠️改善前は 1.0625rem/1.6 で、周りの補助情報（.875rem）と近すぎて沈んでいた。 */
.q{
  font-size:var(--t-q); font-weight:600; line-height:var(--lh-read);
  margin:0 0 var(--s5); white-space:pre-wrap;
  letter-spacing:.01em;
}
.q-text{ font-size:var(--t-body); line-height:var(--lh-read); margin:0 0 var(--s4); white-space:pre-wrap; }

/* 表は横に長くなり得る。ページ本体を横スクロールさせず、表だけを流す */
/* ⭐表。⚠️本人がスマホ実機で「表がめっちゃ見づらい」と指摘（2026-08-08）。
   ⛔⛔`overflow-x:auto` は【宣言されているのに効いていなかった】——
     table-layout:auto は**枠の幅に収まるよう列を潰す**ので、そもそも溢れず、
     溢れないスクロールは発動しない。実測: 4列の表が 375px 幅で列幅 67〜95px＝**1行4文字**。
   ⭐これは自分で言語化した「宣言したことと効くことは別。効く条件まで検査する」の型そのもの。
   ⭐直し方: **各列に最低幅を与えて、わざと溢れさせる**。溢れて初めて横スクロールが働く。
     6em ＝ 日本語で約6文字（16px 時に約96px）。⛔4文字では単語が読めない。 */
.table-wrap{ overflow-x:auto; margin:0 0 var(--s4); }
.table-wrap table{
  border-collapse:collapse; font-size:var(--t-meta);
  table-layout:auto; width:max-content; max-width:none;
}
.table-wrap th, .table-wrap td{
  /* ⚠️⚠️2026-08-08 初見レビュー B-5: ここだけ --surface-line（実測 1.20:1）のままだった。
     ⭐線の要件 3:1 を満たすよう --hair に直した日に、**表が取り残されていた**
     ——「届いていない場所を数える」の再演。⛔表は【読む対象】なので、罫線が見えないと
     どの数字がどの列なのかが分からなくなる（＝内容が読めない）。 */
  border:1px solid var(--hair); padding:var(--s2) var(--s3);
  text-align:left; vertical-align:top; line-height:var(--lh-ui);
  min-width:6em;              /* ⭐1行あたり約6文字を下限にする */
  max-width:18em;             /* ⛔長い文は折り返す（1列が画面より広くならない） */
}
.table-wrap thead th{ font-weight:700; background:var(--surface); }
/* ⭐行の見出し（先頭列）は横スクロールしても残す（2026-08-08・初見レビュー B-6）。
   ⚠️9列の表は実測で74%が画面外に出る。⛔先頭列が流れると「どの行の話か」を見失う。
   ⚠️sticky が効くのは、祖先が overflow を切っていない軸だけ。横スクロールは
     .table-wrap の overflow-x で起きるので、その中の left 固定は効く。 */
.table-wrap tbody th{
  position:sticky; left:0; z-index:1;
  background:var(--card);     /* ⛔透明のままだと下の列が透ける */
}
/* ⭐はみ出している表だけに印を付ける（⛔収まっている表に出すと嘘になる）。
   ⛔色や影だけに頼らない——**文字**（.table-hint）が主で、枠はその補強。 */
.table-hint{ margin:0 0 var(--s2); color:var(--muted); }
.table-wrap.scrollable{ border:1px dashed var(--hair); }
/* ⭐表もカードの上に乗る（枠は角丸で受ける） */
.table-wrap{ border-radius:var(--r-md); }

/* ⛔⛔**author の display 指定は、ブラウザ既定の [hidden]{display:none} に勝つ**。
   ⚠️2026-08-08 実測: `.confirm-bar{display:flex}` のせいで、hidden を立てても
   「回答する」が消えなかった（ワンタップに切り替えても押す必要のないボタンが残った）。
   ⭐**個別に打ち消さず、ここで一度だけ止める**。display を足すたびに同じ穴が空くため。
   （[hidden] と .class はどちらも詳細度 0,1,0＝記述順で決まってしまう。!important で断ち切る） */
[hidden]{ display:none !important; }

/* ⭐選択肢。この製品でいちばん触られる部品。
   ⭐2026-08-08 本人指示で §6.6 を2度改訂＝**1行まるごとが1つのボタン**／
     ⭐**既定は「選ぶ→『回答する』で確定」の2段階**（ワンタップは設定に残る）。
   ⚠️記号を独立した正方形の面にするのは残す（押せる部品だと目で分かるため・この画面の signature）。 */
.choices{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
/* ⚠️wrap を許すのは【バッジ（解答後の "✗ あなたの解答"）を回り込ませる】ため。
   ⭐バッジは押せない表示専用なので、次の行に回ってよい（ボタン本体は縮んで同じ行に残る）。
   ⛔これが無いと、文字サイズ最大(1.6×)×375px でバッジが画面外へ出る（2026-08-08 実機で30px超過）。 */
.choice{
  display:flex; flex-wrap:wrap; align-items:stretch;
  /* ⭐白いカード＋2pxの枠。⛔影に頼らない（紙とカードの差＋枠で階層が立つ）。
     ⚠️枠は --hair（3:1以上）を使う。⛔--surface-line は 1.5:1 しかなく、
       【押せる部品の境界】には足りない——紙とカードの差は 1.08:1 なので、
       枠が見えないと選択肢の当たり判定が目で分からなくなる。 */
  border:2px solid var(--hair); border-radius:var(--r-lg); background:var(--card);
  overflow:hidden;
}
/* ⭐行全体が1つのボタン（2026-08-08 本人指示で §6.6 を改訂・消し込みを削除）。
   ⚠️**押した結果はモードで変わる**: 既定＝選択されるだけ／設定でワンタップ＝即確定。
   ⚠️当たり判定を分けていたのは【隣に別機能（消し込み）があった】から＝
   押し間違える相手そのものが無くなったので、行全体を押せるほうが片手で扱いやすい。
   ⭐flex:1 1 0 ＋ min-width:0（width:100% ではない）＝バッジと同じ行に並び、
     文字が大きいときだけバッジが回り込む。⛔100% にするとバッジが常に次行へ落ちる。 */
.choice-btn{
  display:flex; align-items:stretch; flex:1 1 0; min-width:0;
  /* ⭐選択肢は大きく取る。参考サイトも高さを大きく取っており、片手で押しやすい */
  min-height:72px; background:transparent; color:inherit;
  border:0; padding:0; font:inherit; text-align:left; cursor:pointer;
  line-height:var(--lh-ui);
}
/* 記号＝確定。正方形の面にして「ここが決定ボタン」と分かるようにする */
.choice .sym{
  flex:0 0 3rem; display:flex; align-items:center; justify-content:center;
  font-size:var(--t-q); font-weight:700; padding:0;
  background:var(--surface); border-right:1px solid var(--surface-line);
}
.choice-btn:hover .sym{ background:var(--surface-line); }
/* ⭐min-width:0 が要（flex の既定 min-width:auto は「中身より小さくならない」）。
   これが無いと本文が縮まず、隣のバッジを画面外へ押し出す。 */
/* ⭐本文も上下中央に置く（本人がiPhone実機で指摘・2026-08-08）。
   ⚠️記号は自前の flex で中央に来ていたが、本文は指定が無く、親の align-items:stretch で
     縦いっぱいに伸ばされた結果【上寄せ】になっていた——短い選択肢ほど下に余白が空いて不揃いに見える。
   ⭐align-self:center で直す。⛔ここで display:flex にはしない——
     本文は【複数行に折り返す文章】なので、入れ子の flex を作ると折り返しの都合が増えるだけ。
     align-self なら、本文の高さが1行でも5行でも【その塊が中央に来る】。 */
.choice .body{
  flex:1 1 0; min-width:0; align-self:center;
  padding:var(--s3) var(--s4); font-size:var(--t-body);
}
/* ⭐選択中（2段階回答・本人指示 2026-08-08）。
   ⛔色だけに頼らない——**枠を太く**し、**「選択中」の文字**も出す（§9.1 #3 と同じ考え方）。
   ⚠️まだ採点していない状態なので、正誤の色（緑・赤）は絶対に使わない。 */
.choice.selected{ border-color:var(--link); border-width:2px; }
.choice.selected .sym{ background:var(--link); color:var(--bg); }
.sel-tag{
  font-size:var(--t-fine); font-weight:700; white-space:nowrap; color:var(--link);
  display:flex; align-items:center; padding:var(--s2) var(--s3); margin-left:auto;
}

/* ⭐「回答する」バー。⚠️sticky で【常に画面内】に留める——
   ボタンが1つ増えると縦が伸び、文字サイズ最大×375px では素直に置くと画面外へ落ちる
   （積み残し#4 と同じ型）。⛔「選んだらスクロールして見せる」ではなく、出ない状態をCSSで作る。
   ⚠️解答した瞬間に hidden にする（残すと解説の上に居座る）。 */
.confirm-bar{
  position:sticky; bottom:0; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  margin-top:var(--s4); padding:var(--s3) 0;
  background:var(--bg); border-top:1px solid var(--hair);
}
.confirm-bar #confirm{ margin-left:auto; }
#confirm-hint:empty{ display:none; }

/* 正誤は色だけで示さない。バッジの文言＋線の太さで二重化する（§9.1 #3） */
.choice.correct{ border-color:var(--ok-line); border-width:2px; }
/* ⚠️面に使うなら【文字用の濃さ】を使う。--ok-line は線用（3:1）なので、
   その上に --bg を載せるとライトで 3.45:1 になり 4.5:1 を満たさない（2026-08-08 実測）。
   ⭐--ok-text（文字用・4.5:1 設計）を背景にすると 5.35:1 で通る。 */
.choice.correct .sym{ background:var(--ok-text); color:var(--bg); }
.choice.chosen-wrong{ border-color:var(--ng-line); border-width:2px; border-style:dashed; }
/* 回り込んだときは右寄せ。⛔nowrap は残す（"✗ あなたの/解答" と割れると読みにくい）が、
   行ごと回り込めるので画面外には出ない。 */
.badge{
  font-size:var(--t-fine); font-weight:700; white-space:nowrap;
  display:flex; align-items:center; padding:var(--s2) var(--s3); margin-left:auto;
}
.badge.ok{ color:var(--ok-text); }
.badge.ng{ color:var(--ng-text); }

/* ボタン。⭐主要な操作（次へ・はじめる）は 52px＝片手の親指で確実に押せる高さ */
button.primary, button.ghost{
  min-height:52px; padding:var(--s3) var(--s5); border-radius:var(--r-md);
  font:inherit; font-weight:600; cursor:pointer; line-height:var(--lh-ui);
}
button.primary{ background:var(--accent); color:var(--bg); border:2px solid var(--accent); }
button.ghost{ background:transparent; color:var(--fg); border:2px solid var(--hair); }
button[disabled]{ cursor:default; opacity:1; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ⭐解説。解答後にいちばん長く読むもの＝【紙が1枚上に乗っている】ように見せる。
   ⚠️改善前は左に線が1本あるだけで、設問との境目が弱く「どこからが解説か」が掴みにくかった。 */
.explain{
  margin:var(--s5) 0; padding:var(--s5); border-radius:var(--r-lg);
  background:var(--card); border:2px solid var(--surface-line);
  font-size:var(--t-body); line-height:var(--lh-read);
}
.explain-short{ font-weight:700; margin:0 0 var(--s3); font-size:var(--t-body); }
/* 絞り込み中の表示（2026-08-08・B-1）。⭐邪魔をしないが、見落とさない濃さにする */
/* ⭐パンくず（2026-08-08 SEO実測: 単元・年度34枚が「入口1本・出口ゼロ」だった）。
   ⛔フッタの方針は変えない——被リンクが法務ページに集中する逆転を、本文側で解く。 */
/* ⭐単元の要点（2026-08-08）。設問リストより【前】に出る自前テキスト。
   ⛔後ろだと答え合わせのように読める（CEO裁定）。⭐面に載せて「読み物」だと分かる形にする。 */
.unit-note{
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:var(--s4); margin:var(--s5) 0;
}
.unit-note h2{ margin:0 0 var(--s3); font-size:var(--t-lead); border:0; padding:0; }
.unit-note p{ margin:0 0 var(--s3); line-height:var(--lh-read); }
.unit-note p:last-child{ margin-bottom:0; }
/* ⭐分布の行は単元ページへのリンク（年度→単元の行き来） */
.topic-row a.t-name{ text-decoration:underline; }

.crumbs{ margin:0 0 var(--s4); font-size:var(--t-meta); }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:0 var(--s2); margin:0; padding:0; }
.crumbs li + li::before{ content:"›"; margin-right:var(--s2); color:var(--muted); }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; }
.crumbs [aria-current]{ color:var(--muted); display:inline-flex; align-items:center; min-height:44px; }

.filter-note{
  margin:0 0 var(--s4); padding:var(--s2) var(--s3);
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-sm);
  font-size:var(--t-meta); line-height:var(--lh-ui);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:center;
}
.filter-note a{ min-height:44px; display:inline-flex; align-items:center; }

/* ⭐解説の見出し（2026-08-08・初見レビュー C）。⛔大きくしない——設問より目立たせない。 */
.explain-head{
  margin:0 0 var(--s2); font-size:var(--t-meta); font-weight:700;
  color:var(--muted); letter-spacing:.04em;
}
/* ⭐「なぜ違うのか」は押して開く部品。⛔規則が1行も無く、押せる大きさも見た目も未定義だった。 */
#whynot > summary{
  display:flex; align-items:center; min-height:44px;
  padding:var(--s2) var(--s3); margin:var(--s4) 0 0;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md);
  font-weight:700; font-size:var(--t-meta); cursor:pointer; color:var(--link);
}
#whynot[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

#explain-body{ margin:0; }
/* ⭐解説は段落ごとに <p>。⛔white-space に段落の仕事をさせない（2026-08-08） */
#explain-body p{ margin:0 0 var(--s4); line-height:var(--lh-read); }
#explain-body p:last-child{ margin-bottom:0; }
/* ⭐設問の引用（科目Bの事例文）。記号は落とし、引用であることは【左の線】で示す */
.q-quote{
  margin:0 0 var(--s4); padding:var(--s2) 0 var(--s2) var(--s3);
  border-left:3px solid var(--hair);
}
.q-quote p{ margin:0 0 var(--s3); line-height:var(--lh-read); white-space:pre-wrap; }
.q-quote p:last-child{ margin-bottom:0; }
.whynot-list{ margin:var(--s3) 0 0; padding-left:var(--s5); line-height:var(--lh-read); }
.whynot-list li{ margin:var(--s3) 0; }

/* 判定。⭐解答直後にいちばん先に目に入る＝少し大きく */
.verdict{
  font-weight:700; font-size:var(--t-q); margin:var(--s5) 0 var(--s3);
  line-height:var(--lh-ui);
}
.verdict.ok{ color:var(--ok-text); }
.verdict.ng{ color:var(--ng-text); }
.source, .dup, .depth{ color:var(--muted); font-size:var(--t-fine); margin:var(--s2) 0; }
.note-body{ color:var(--muted); font-size:var(--t-fine); white-space:pre-wrap; line-height:var(--lh-read); }
.alert{
  border:1px solid var(--ng-line); color:var(--ng-text);
  padding:var(--s3) var(--s4); border-radius:var(--r-md); margin:0 auto var(--s4);
  max-width:38rem; font-size:var(--t-meta); line-height:var(--lh-read);
}
/* 入口。⭐選ぶだけの画面なので、ボタンを横に並べて一目で選択肢の数が分かるようにする */
.entry-buttons{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s5) 0 0; }
.entry-note{ color:var(--muted); font-size:var(--t-meta); margin:0 0 var(--s4); }
#entry-heading{ font-size:var(--t-lead); line-height:var(--lh-ui); margin:0 0 var(--s3); }
/* 副次的な操作は主要ボタンより控えめに（視線の競合を避ける） */
.tools{ margin-top:var(--s7); }
#wrapup{ font-size:var(--t-meta); min-height:44px; }
#weak-list{ font-size:var(--t-meta); color:var(--muted); line-height:var(--lh-read); }
.foot{
  max-width:38rem; margin:var(--s7) auto 0; padding-top:var(--s4);
  border-top:1px solid var(--surface-line);
  color:var(--muted); font-size:var(--t-fine); line-height:var(--lh-read);
}
kbd{
  border:1px solid var(--surface-line); background:var(--surface); border-radius:var(--r-sm);
  padding:0 var(--s1); font-size:var(--t-fine);
}

/* 広告枠は主要ボタン・本文に密着させない（サイト設計書§6.2.1・タップターゲット44pxの外側） */
.ad-slot{ margin-top:3rem; }

/* 進捗リンクの復元ダイアログ（§8.2）。3つの選択肢は縦に積む＝押し間違いを防ぐ */
#restore-dialog{
  max-width:32rem; border:2px solid var(--hair); border-radius:var(--r-lg);
  background:var(--card); color:var(--fg); padding:var(--s5);
  line-height:var(--lh-read);
}
#restore-dialog h2{ font-size:var(--t-lead); line-height:var(--lh-ui); margin:0 0 var(--s3); }
#restore-dialog::backdrop{ background:rgba(0,0,0,.5); }
#restore-summary{
  background:var(--surface); border-radius:var(--r-sm); padding:var(--s3);
  font-size:var(--t-meta); margin:0 0 var(--s4);
}
.restore-buttons{ display:flex; flex-direction:column; gap:var(--s3); margin:var(--s4) 0 0; }
#link-offer{ margin-top:var(--s4); line-height:var(--lh-read); }

/* 公開ページ（/units/ /how/ ほか・build_pages.py が生成） */
main h1{ font-size:var(--t-lead); line-height:var(--lh-ui); margin:0 0 var(--s4); }
main h2{ font-size:var(--t-q); line-height:var(--lh-ui); margin:var(--s6) 0 var(--s3); }
main p, main li{ line-height:var(--lh-read); }
main p{ margin:0 0 var(--s4); }
main ul, main ol{ padding-left:var(--s5); margin:0 0 var(--s5); }
main ul li, main ol li{ margin:0 0 var(--s2); }
/* ⭐見出しの下に細い区切りを1本。⛔飾りではなく「ここから別の話」を示す最小の装置 */
main h2{ padding-bottom:var(--s2); border-bottom:2px solid var(--surface-line); }
.pagenav{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  margin:var(--s3) 0 0; padding:0; list-style:none;
}
/* ⭐フッタnavは毎ページ出る＝タップしやすさを本文リンクより優先する。
   ⚠️padding だけでは 44px に届かない（実測 35.5px・CEO実機 40px）。
   ⛔「余白を足したから大丈夫」で済ませず min-height で【下限を保証】する。 */
.pagenav a{
  /* ⚠️2026-08-08 初見レビュー B-8: 高さは44pxあったが【幅が37px】だった（「ホーム」の2文字）。
     ⭐当たり判定は縦横の両方。⛔片方だけ満たしても指は外す。 */
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 var(--s3);
}
/* ⭐⭐静的ページにも演習画面と【同じ設計言語】を通す（本人指摘「不恰好すぎる」2026-08-08）。
   ⚠️演習画面だけ「淡い紙＋白カード＋丸み」になり、公開7ページは素のHTMLのまま残っていた
     （黒丸の箇条書き＋下線リンク＋裸のテキスト）＝**同じサイトに見えない**のが不恰好の正体。
   ⛔新しいデザインを作り直すのではなく、既にあるトークン（--card/--hair/--r-lg/--s*）を当てる。 */

/* 本文もカードに載せる＝紙の上に置かれた1枚、という関係を全ページで同じにする */
main > h1 + p, main > p, main > .table-wrap, main > ul:not(.pagenav), main > ol, main > dl{
  margin-left:0; margin-right:0;
}
.page-card{
  background:var(--card); border:2px solid var(--surface-line); border-radius:var(--r-lg);
  padding:var(--s5); margin:var(--s5) 0;
}

/* ⭐単元一覧: 1単元＝1カード。行まるごとがリンク＝タップ先が大きい */
.topic-list{ list-style:none; padding-left:0; display:grid; gap:var(--s3); margin:var(--s5) 0; }
.unit-card{ margin:0; }
.unit-card > a{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4);
  min-height:64px; padding:var(--s3) var(--s4);
  background:var(--card); border:2px solid var(--hair); border-radius:var(--r-lg);
  color:var(--fg); text-decoration:none;
}
.unit-card > a:hover{ border-color:var(--link); }
/* ⚠️問数は【折り返さない位置】に置く（本人指摘）。名前が伸びても右端に残す。
   ⛔以前はリンクの外の裸テキストで、本文と一緒に折り返していた。 */
.u-name{ flex:1 1 12rem; min-width:0; font-weight:700; line-height:var(--lh-ui); }
.u-count{
  flex:0 0 auto; margin-left:auto; white-space:nowrap;
  font-size:var(--t-meta); font-weight:700; color:var(--link);
}

/* 単元ページの論点行。⛔こちらはリンクではないので枠は付けず、面と区切りだけ */
.topic-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--surface-line);
}
.topic-row:last-child{ border-bottom:0; }
.t-name{ flex:1 1 12rem; min-width:0; }
.t-n{ flex:0 0 auto; margin-left:auto; white-space:nowrap;
      font-size:var(--t-fine); color:var(--muted); }
/* ⭐科目Bの印。⛔色だけに頼らない——「科目B」という文字そのものが印なので、
   色が見えなくても意味は伝わる。枠で囲って「ラベル」だと分かるようにする。 */
.t-sec{
  flex:0 0 auto; margin-left:auto; white-space:nowrap;
  font-size:var(--t-fine); font-weight:700; color:var(--link);
  border:1px solid var(--link); border-radius:var(--r-sm); padding:0 var(--s2);
}

/* ⭐本文中の箇条書き（利用規約・運営者情報・作り方の約束）。
   ⛔カード化はしない——【文章の一部】なので、囲うとかえって読みの流れが切れる。
   ⚠️ただし素のままにもしない: 印を控えめな色にし、行間と字下げを本文と揃える。 */
.prose-list{ padding-left:var(--s5); margin:0 0 var(--s5); }
.prose-list li{ margin:0 0 var(--s3); line-height:var(--lh-read); }
.prose-list li::marker{ color:var(--hair); }
.weak-list{ list-style:none; padding-left:0; }

/* 修正履歴も同じ間の取り方に揃える */
.fixes-list{ list-style:none; padding-left:0; display:grid; gap:var(--s3); margin:var(--s5) 0; }
.fixes-list li{
  margin:0; padding:var(--s3) 0; border-bottom:1px solid var(--surface-line);
  line-height:var(--lh-read);
}
.fixes-list li:last-child{ border-bottom:0; }
.fixes-list time{ font-weight:700; }
/* 単元ページの「この単元だけ解く」。⭐inline だと行の折返しで矩形が2つに割れ、
   中心がリンクの外に落ちる（2026-08-08 実機実測）。inline-block で1つの矩形にし、
   タップターゲット44px（§9.1 #5）を満たす。⛔本文リンクと区別が付くよう枠を付ける */
.unit-start{
  display:inline-block; min-height:44px; padding:.6rem 1rem; box-sizing:border-box;
  border:2px solid var(--link); border-radius:var(--r-md); text-decoration:none;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ホーム（本人要件 2026-08-08・道場を参考に構成／⛔文言・デザインの複製はしない）。
   ⭐視線の順序を【サイト名 → 何ができるか → 今日の例題 → はじめる】に固定する。 */
#home-title{ font-size:1.5rem; line-height:1.3; margin:0 0 var(--s2); letter-spacing:.02em; }
#home-lead{ font-size:var(--t-body); line-height:var(--lh-read); margin:0 0 var(--s2); }
#home-stats{ margin:0 0 var(--s5); }
#home-start{ width:100%; }                    /* 片手で押せるよう横幅いっぱい */
#home-resume{ margin:var(--s3) 0 0; }
.home-sample{
  background:var(--card); border:2px solid var(--surface-line); border-radius:var(--r-lg);
  padding:var(--s4); margin:0 0 var(--s5);
}
#home-sample-title{
  font-size:var(--t-fine); font-weight:700; color:var(--muted);
  letter-spacing:.08em; margin:0 0 var(--s3);
}
.home-sample .q{ font-size:var(--t-body); font-weight:600; margin:0 0 var(--s3); }
.home-sample-choices{ list-style:none; margin:0; padding:0; font-size:var(--t-meta); }
.home-sample-choices li{ margin:var(--s2) 0; line-height:var(--lh-read); }
#home-sample-src{ margin:var(--s3) 0 0; font-size:var(--t-fine); }
/* うちにあって道場に無い3点。⭐記号を消して「読む箇条書き」にする（装飾の点は情報を持たない） */
.home-points{ list-style:none; padding:0; margin:var(--s6) 0; }
.home-points li{
  margin:var(--s4) 0; padding-left:var(--s4);
  border-left:2px solid var(--surface-line); line-height:var(--lh-read);
}
.home-points b{ display:block; }
#home-fixes{ margin:var(--s5) 0 0; }
.home-links{ margin-top:var(--s6); line-height:var(--lh-read); }
/* ⭐ホームの行き先も指で押す（2026-08-08・初見レビュー B-8）。
   ⚠️実測: 高さ21px しか無かった＝行の高さのまま。⛔44px は【ボタンだけの話ではない】。 */
.home-links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s2); }

/* ⭐VIS-2（2026-08-08）: 押した瞬間の手ごたえ。⛔いま押しても何も起きないので、
   タップが効いたか分からない（⚠️通信の遅い端末ほど不安になる）。
   ⭐`transform` は再描画が軽く、⛔色を変えるより「押した」感が出る。 */
button:active, .unit-start:active, .choice-btn:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){
  button:active, .unit-start:active, .choice-btn:active{ transform:none; }
}

/* ⭐VIS-6（2026-08-08）: 数字の幅をそろえる。⛔「残り 12問」→「残り 9問」で
   ⚠️**行全体が横に揺れて**いた（等幅でない数字は幅が変わる）。
   ⭐数を出す場所にだけ当てる（⛔本文に当てると和文の字面が緩む）。 */
#left, #streak, #recent, .u-count, .t-n, #home-stats{ font-variant-numeric:tabular-nums; }