/* 量産ラインの共通スタイル＝DIGIT デザイン言語の既定。
   言語の正本は design/DIGIT-DESIGN-LANGUAGE.md（原則6・署名7・変奏の規則）。
   部品の一覧・使う場面・やらないことは、このフォルダの外の DESIGN-PARTS.md に在る。

   読み方（この順に並んでいる）
     1. 棚ごとのトークン      --digit-* ＝ 役割の名前。色名や用途名を変数名に入れない（言語 §5）
     2. 旧名の別名            既存の本・promo.css・apply_unify.py が使う --bg 等を --digit-* へ繋ぐ
     3. 暗色の変奏            OS の設定。棚の気配は保ったまま地と文字を入れ替える
     4. 下地                  reset と本文の読みやすさ
     5. 署名の部品            分かる人が気付く細部（8個。1画面には 3〜5個だけ使う）
     6. 骨格                  header / main / card / panel / 操作 / 表 / 広告枠 / 法務
     7. 幅と動きの作法        狭い幅・reduced-motion

   作る側の線（言語 §4「変えてよいもの／変えないもの」）
     変えてよい: 色相、紙の質感、見出しの書体、図の語彙、密度の強弱（＝棚ごとのトークンの値）
     変えない  : 1画面1主役と視線3手、署名の意味、数字の作法、動きの時間と reduced-motion、
                 声、AI開示の誠実さ、フォーカスの可視性
   🔴 アプリ側で色を直書きしない。足す色は必ずトークンを1つ増やしてから使う。
*/

/* ─── 1. 棚ごとのトークン ──────────────────────────────────────────────────
   棚の既定は tool（暮らしと仕事の道具＝静か・迷わない・手元に残る）。
   4棚の文字・非文字コントラストは静的に実測済み（n=72 対・線を下回る 0 対・WCAG 2.1 SC 1.4.3／1.4.11）。
   🔴 --digit-line は「節の境目の構造の細線」で 3:1 を課していない（装飾の区切りは SC 1.4.11 の対象外）。
   **操作の輪郭には --digit-line-control を使う**（4棚とも 3:1 以上を実測）。 */
:root, [data-theme="tool"] {
  color-scheme: light;
  --digit-bg:#f1f2ed;                /* ページの地 */
  --digit-surface:#fff;              /* 読む面 */
  --digit-surface-raised:#fff;       /* 一段だけ浮く面 */
  --digit-ink:#112c2a;               /* 主本文 */
  --digit-ink-muted:#5c6b67;         /* 補助本文 */
  --digit-line:#cbd4ce;              /* 構造の罫線（節の境目） */
  --digit-line-control:#748a86;      /* 操作の輪郭（入力欄・副操作） */
  --digit-signal:#087862;            /* 主操作と現在地 */
  --digit-signal-ink:#fff;           /* signal 上の文字 */
  --digit-signal-deep:#05604e;       /* 押している最中の signal */
  --digit-soft:#e2efe9;              /* 現在地をごく薄く塗る面 */
  --digit-ok:#0a6b4f;                /* 完了 */
  --digit-caution:#8a5a00;           /* 要確認 */
  --digit-danger:#a3261d;            /* 失敗 */
  --digit-paper-texture:none;        /* 棚固有のごく薄い質感 */
  --digit-font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --digit-font-display:var(--digit-font-body);
  --digit-font-numeric:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --digit-reading-measure:40em;      /* 35〜45字の行長（日本語は全角で約半分） */
  --digit-space-related:12px;        /* 同じ話の内部 */
  --digit-space-section:38px;        /* 話が変わる境目 */
  --digit-radius-control:2px;        /* 操作 */
  --digit-radius-surface:0px;        /* 面 */
  --digit-cut-size:18px;             /* 社章由来の切り角 */
  --digit-shadow-one:0 18px 45px #17352b14;  /* 唯一の影 */
  --digit-focus-ring:#b06c00;        /* フォーカス指輪 */
  --digit-trace:#183f3810;           /* 一本の結線（地に残る痕） */
  --digit-enter-duration:160ms;
  --digit-exit-duration:120ms;
  --digit-ease-out:ease-out;
  --digit-measure-frame:1120px;      /* 画面の器の幅 */
}

/* 毎日のパズル＝温かい、触りたくなる（紙と墨・季節色・見出しの明朝） */
[data-theme="chabudai"] {
  --digit-bg:#f5f3ed; --digit-surface:#fffdf7; --digit-surface-raised:#fff;
  --digit-ink:#24312d; --digit-ink-muted:#5a6661;
  --digit-line:#dcd3c2; --digit-line-control:#948771;
  --digit-signal:#8a5813; --digit-signal-ink:#fff; --digit-signal-deep:#68400b;
  --digit-soft:#f7ecd8;
  --digit-ok:#1f5c3d; --digit-caution:#7a5200; --digit-danger:#a22626;
  --digit-paper-texture:radial-gradient(#00000005 1px, transparent 1px);
  --digit-font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --digit-radius-control:6px; --digit-radius-surface:4px;
  --digit-shadow-one:0 14px 34px #3d2f1a14;
  --digit-focus-ring:#0b5f9c; --digit-trace:#4a3a1c12;
}

/* 生成AIと発信＝紙面、編集、根拠が見える（段組・欄外注・強い見出し） */
[data-theme="press"] {
  --digit-bg:#f6f5f1; --digit-surface:#fff; --digit-surface-raised:#fff;
  --digit-ink:#15161a; --digit-ink-muted:#55575f;
  --digit-line:#d3d1c8; --digit-line-control:#8d8b81;
  --digit-signal:#8c2f24; --digit-signal-ink:#fff; --digit-signal-deep:#6d2019;
  --digit-soft:#f3e7e4;
  --digit-ok:#1b6b3a; --digit-caution:#7a5200; --digit-danger:#a3261d;
  --digit-font-display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --digit-radius-control:1px; --digit-radius-surface:0px;
  --digit-reading-measure:34em;
  --digit-shadow-one:0 16px 38px #1a181412;
  --digit-focus-ring:#1140c8; --digit-trace:#1516190f;
}

/* 実験室＝計器、仮説、観測中（濃い地・信号色・等幅数字・状態灯） */
[data-theme="lab"] {
  color-scheme: dark;
  --digit-bg:#0e141a; --digit-surface:#151d25; --digit-surface-raised:#1b252f;
  --digit-ink:#e9eff4; --digit-ink-muted:#9aabb7;
  --digit-line:#2f3f4a; --digit-line-control:#5b7886;
  --digit-signal:#2fbf9a; --digit-signal-ink:#062018; --digit-signal-deep:#23a383;
  --digit-soft:#152b2a;
  --digit-ok:#45d6a6; --digit-caution:#f0c06a; --digit-danger:#ff9b91;
  --digit-font-display:var(--digit-font-body);
  --digit-radius-control:2px; --digit-radius-surface:0px;
  --digit-shadow-one:0 18px 45px #00000059;
  --digit-focus-ring:#ffcc33; --digit-trace:#8fd8c41a;
}

/* ─── 2. 旧名の別名 ────────────────────────────────────────────────────────
   既存の本（n=74・2026-11-01 実測）と promo.css・共通CSSの差し込み器は
   --bg / --surface / --ink / --ink-2 / --line / --fill / --accent / --on-accent /
   --ok / --warn / --danger / --radius / --base を使う。名前を消すと静かに色が落ちるので、
   🔴 **旧名は捨てずに --digit-* へ繋ぐ**。新しく書く CSS では旧名を使わない。 */
:root {
  --bg:var(--digit-bg); --surface:var(--digit-surface); --ink:var(--digit-ink);
  --ink-2:var(--digit-ink-muted); --line:var(--digit-line); --fill:var(--digit-soft);
  --accent:var(--digit-signal); --on-accent:var(--digit-signal-ink);
  --ok:var(--digit-ok); --warn:var(--digit-caution); --danger:var(--digit-danger);
  --radius:var(--digit-radius-surface); --base:16px;
  font-family:var(--digit-font-body);
}

/* ─── 3. 暗色の変奏 ────────────────────────────────────────────────────────
   OS の設定で地と文字を入れ替える。🔴 棚の気配（信号色・書体・質感）は保つ——
   暗くすると4棚が同じ顔になるのは「テンプレ」へ戻ることである。
   lab は既定が濃い地なので入れ替えない。 */
@media (prefers-color-scheme: dark) {
  :root, [data-theme="tool"] {
    color-scheme:dark;
    --digit-bg:#0f1512; --digit-surface:#17201d; --digit-surface-raised:#1d2724;
    --digit-ink:#e7efe9; --digit-ink-muted:#9fb0a9;
    --digit-line:#2f3d38; --digit-line-control:#63817a;
    --digit-signal:#5fd2b2; --digit-signal-ink:#06201a; --digit-signal-deep:#45b998;
    --digit-soft:#15302a;
    --digit-ok:#5fd2b2; --digit-caution:#f0c06a; --digit-danger:#ff9b91;
    --digit-shadow-one:0 18px 45px #00000059; --digit-focus-ring:#ffcc33;
    --digit-trace:#8fd8c41a;
  }
  [data-theme="chabudai"] {
    color-scheme:dark;
    --digit-bg:#17130d; --digit-surface:#201a12; --digit-surface-raised:#282015;
    --digit-ink:#f4ecdd; --digit-ink-muted:#bdae97;
    --digit-line:#453a28; --digit-line-control:#8b7a5e;
    --digit-signal:#e8b967; --digit-signal-ink:#2a1d07; --digit-signal-deep:#cfa254;
    --digit-soft:#33280f;
    --digit-ok:#7fcfa4; --digit-caution:#e8b967; --digit-danger:#ff9b91;
    --digit-shadow-one:0 14px 34px #00000059; --digit-focus-ring:#7cc6ff;
    --digit-trace:#e8b9671a;
  }
  [data-theme="press"] {
    color-scheme:dark;
    --digit-bg:#121214; --digit-surface:#1a1a1d; --digit-surface-raised:#212125;
    --digit-ink:#eeeef1; --digit-ink-muted:#a9a9b2;
    --digit-line:#34343a; --digit-line-control:#76767f;
    --digit-signal:#f08b7d; --digit-signal-ink:#2a0f0b; --digit-signal-deep:#d9756a;
    --digit-soft:#331d19;
    --digit-ok:#6ccf94; --digit-caution:#e8b967; --digit-danger:#ff9b91;
    --digit-shadow-one:0 16px 38px #00000059; --digit-focus-ring:#8fb4ff;
    --digit-trace:#eeeef10f;
  }
}

/* ─── 4. 下地 ──────────────────────────────────────────────────────────────
   本文は 16px 以上、補助文は 14px 以上（法務など限定用途だけ 12px まで・言語 §2.3）。 */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-width:0;
  background:var(--digit-bg); background-image:var(--digit-paper-texture); background-size:14px 14px;
  color:var(--digit-ink);
  font-family:var(--digit-font-body); font-size:16px; line-height:1.8; letter-spacing:.01em;
  overflow-wrap:anywhere;
}
a { color:var(--digit-signal); text-underline-offset:4px; text-decoration-thickness:1px; }
img, svg, canvas { max-width:100%; height:auto; }
[hidden] { display:none !important; }

/* ─── 5. 署名の部品 ────────────────────────────────────────────────────────
   8個ある。🔴 **1画面に全部を並べない**（言語 §3）。原則 3〜5個を選び、機能に結び付ける。
   使ったものは HTML 側へ data-digit-signature="<名>" を書く（機械が種類数を数える口・言語 §7 #4）。
   既定の index.html が使うのは ai-band / cut-mark / heading / trace / focus の5個。
   figure（数字の顔）・verdict（判定の印）・dot（余白の一点）はアプリ本体が要るときに足す。 */

/* ① AI 開示帯 — 左端に切り角と短い見出し、そのあと詳細（言語 §3）。
      🔴 画面中央を横切る警告色の帯・極小文字・閉じると戻らない表示にしない。 */
.ai-disclosure {
  padding:9px max(20px, calc((100vw - var(--digit-measure-frame)) / 2));
  border-bottom:1px solid var(--digit-line);
  background:var(--digit-surface);
  color:var(--digit-ink-muted);
  text-align:left; font-size:13px; line-height:1.7;
}
.ai-disclosure::before {
  content:"◆ AI運営";
  display:inline-block; margin-right:10px;
  color:var(--digit-signal);
  font:700 12px/1.7 var(--digit-font-numeric); letter-spacing:.06em;
  white-space:nowrap;
}

/* ② 社章の印 — 正方形の一角だけを斜めに切る。小さく反復する（面の右上・要所の印）。
      🔴 すべてのカードを同じ切り角にしない。本文の箇条書きには使わない。 */
.brand-mark, .cut-mark {
  display:grid; place-items:center; flex:none;
  clip-path:polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}
.cut-mark { width:34px; height:34px; background:var(--digit-signal); color:var(--digit-signal-ink); font-weight:700; }
/* 面の右上を1枚だけ切る。--digit-cut-size を 0 にすれば棚ごとに外せる。 */
.panel { position:relative; clip-path:polygon(0 0, calc(100% - var(--digit-cut-size)) 0, 100% var(--digit-cut-size), 100% 100%, 0 100%); }

/* ③ 見出しの階層 — 見出しは名詞で閉じず語りかける。階層は大きさだけで作らない。 */
h1, h2, h3 { font-family:var(--digit-font-display); }
h1 {
  max-width:20ch; margin:0 0 18px;
  font-size:clamp(32px, 5.4vw, 60px); font-weight:750; line-height:1.14; letter-spacing:-.03em;
  text-wrap:balance;                 /* 行の長さを揃える */
  word-break:auto-phrase;            /* 日本語を文節で折る（「空い／ています」の語中割れを防ぐ）。
                                        🔴 keep-all / break-all は共通契約が止める形なので使わない */
}
h2 { margin:0 0 var(--digit-space-related); font-size:21px; line-height:1.45; }
h3 { margin:0 0 8px; font-size:17px; line-height:1.5; }
.kicker {                            /* 見出しの前に置く小さな通し名。等幅で機械の声にする */
  display:block; margin:0 0 10px;
  color:var(--digit-signal);
  font:700 12px/1.6 var(--digit-font-numeric); letter-spacing:.15em; text-transform:uppercase;
}
.lead { max-width:var(--digit-reading-measure); margin:0 0 var(--digit-space-section); font-size:18px; }
.muted { color:var(--digit-ink-muted); font-size:14px; }

/* ④ 数字の顔 — 等幅・千位区切り・単位を添える。数と単位は詰め、ラベルとは空ける。
      🔴 飾りの巨大数字にしない（意味のある1つだけ大きくする）。 */
.numeric, .figure-value, td.numeric, th.numeric {
  font-family:var(--digit-font-numeric); font-variant-numeric:tabular-nums;
}
.figure { display:flex; align-items:baseline; gap:6px; margin:0; }
.figure-label { color:var(--digit-ink-muted); font-size:14px; font-weight:700; }
.figure-value { font-size:clamp(30px, 7vw, 46px); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.figure-unit { color:var(--digit-ink-muted); font-size:15px; font-weight:700; }

/* ⑤ 判定の印 — 完了・可は丸、未完・要入力は四角。🔴 色だけでなく形と語を併記する。 */
.verdict { display:flex; align-items:center; gap:9px; margin:0; font-weight:700; }
.verdict::before { content:"□"; flex:none; color:var(--digit-caution); font:700 20px/1 var(--digit-font-numeric); }
.verdict.is-ok::before { content:"○"; color:var(--digit-ok); }
.verdict.is-bad::before { content:"□"; color:var(--digit-danger); }

/* ⑥ 一本の結線 — 意味のある2点を一度だけ結ぶ。
      .journey の横の罫が 01→02→03 を結ぶ本体で、いま居る所だけ signal 色になる。
      🔴 画面を貫く飾り線を足さない——結んでいる2点が言えない線は、ただの背景模様である
      （1280px で実際に撮って確かめた: 中央の縦線は何も結ばず、区切りの誤読を生んでいた）。
      --digit-trace は、棚が「関係を示す薄い線」に使うために残してある。 */
.journey { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:620px; margin:34px 0 var(--digit-space-section); padding:0; list-style:none; }
.journey > * { border-top:1px solid var(--digit-line); padding:10px 8px 0 0; font-weight:700; }
.journey > .is-now { border-top-color:var(--digit-signal); }
.journey b { display:block; color:var(--digit-signal); font:700 12px/1.6 var(--digit-font-numeric); letter-spacing:.12em; }

/* ⑦ 余白の一点 — 大きな空きの端に一つだけ。稼働・現在地・節の起点を示す。
      🔴 複数を散らして粒子背景にしない。意味なしに点滅させない。 */
.dot { display:block; width:8px; height:8px; margin:30px 0 0 auto; border-radius:50%; background:var(--digit-signal); }

/* ⑧ フォーカスの指輪 — キーボードフォーカス時に必ず見える。🔴 outline:none だけで消さない。 */
:focus-visible { outline:3px solid var(--digit-focus-ring); outline-offset:3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color:var(--digit-signal); outline-offset:1px;
}

/* ─── 6. 骨格 ──────────────────────────────────────────────────────────────
   視線3手: 第1手=何の画面か（h1）／第2手=いま何が起きているか（.journey・状態）／
   第3手=次に何をするか（.actions の主操作）。HTML 側へ data-digit-step="1|2|3" を書く。 */
.site-header, main, .site-footer > * { width:min(100% - 40px, var(--digit-measure-frame)); margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; }
.brand { display:inline-flex; align-items:center; gap:12px; min-width:0; color:var(--digit-ink); font-size:18px; font-weight:700; text-decoration:none; letter-spacing:.03em; }
.brand-mark { width:32px; height:32px; }
.badge { flex:none; border:1px solid var(--digit-line-control); border-radius:999px; padding:3px 12px; color:var(--digit-ink-muted); font-size:12px; font-weight:700; white-space:nowrap; }
main { padding:clamp(30px, 6vw, 68px) 0 80px; }
.content { max-width:820px; }

/* 読む面。🔴 すべてを .card に入れて同格にしない（言語 §2.1）——主役は .card の外に置く。 */
.card { position:relative; margin:0 0 24px; padding:22px; border:1px solid var(--digit-line); border-radius:var(--digit-radius-surface); background:var(--digit-surface); }
.card > :last-child { margin-bottom:0; }
.card-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:18px; }
.card-list > .card { margin:0; }
/* 一段だけ浮く面（影は画面に1種類だけ・言語 §2.5） */
.panel { padding:26px; background:var(--digit-surface-raised); box-shadow:var(--digit-shadow-one); }
/* 節の境目は 線・空き・地の切替 の**どれか一つ**だけ使う（三つを重ねない・言語 §2.2） */
.rule { margin:var(--digit-space-section) 0; border:0; border-top:1px solid var(--digit-line); }
.notice { border-left:3px solid var(--digit-line-control); padding:10px 14px; background:var(--digit-soft); }
.error { border-left:4px solid var(--digit-danger); padding:12px 16px; color:var(--digit-danger); }

button, input, select, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
input, select, textarea {
  width:100%; min-height:48px; padding:11px 13px;
  border:1px solid var(--digit-line-control); border-radius:var(--digit-radius-control);
  background:var(--digit-surface);
}
textarea { min-height:104px; resize:vertical; line-height:1.6; }
label { display:grid; gap:7px; margin:20px 0 7px; font-weight:700; }
label:has(input[type="radio"]), label:has(input[type="checkbox"]) { display:flex; align-items:center; min-height:48px; gap:10px; margin:0; cursor:pointer; }

.primary, .secondary {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; min-height:48px; padding:10px 22px;
  border-radius:var(--digit-radius-control); font-weight:700; text-align:center; text-decoration:none;
  transition:background var(--digit-enter-duration) var(--digit-ease-out), transform var(--digit-exit-duration) var(--digit-ease-out);
}
.primary { border:1px solid var(--digit-signal); background:var(--digit-signal); color:var(--digit-signal-ink); }
.primary:hover { background:var(--digit-signal-deep); border-color:var(--digit-signal-deep); }
.primary:active, .secondary:active { transform:translateY(1px); }
.secondary { border:1px solid var(--digit-line-control); background:var(--digit-surface); color:var(--digit-ink); }
.primary:disabled, .secondary:disabled { opacity:.5; cursor:default; transform:none; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.copy-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.copy-row > button { min-height:48px; border:1px solid var(--digit-line-control); border-radius:var(--digit-radius-control); padding:10px 18px; background:var(--digit-surface); color:var(--digit-ink); font-weight:700; }
.copy-row > [aria-live] { min-height:1.7em; margin:0; color:var(--digit-ink-muted); }
.status { min-height:1.7em; color:var(--digit-signal); font-weight:700; }

table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; font-variant-numeric:tabular-nums; }
td, th { padding:12px; border-bottom:1px solid var(--digit-line); text-align:left; white-space:nowrap; }
th { color:var(--digit-ink-muted); font-size:14px; }

/* FAQ の寸法は既存の共通形を引き継ぐ（寸法は変えていない）。 */
details.faq, .faq details, section[aria-labelledby="faq-title"] details { border-top:1px solid var(--digit-line); padding:10px 0; }
details.faq > summary, .faq details > summary, section[aria-labelledby="faq-title"] details > summary { min-height:48px; display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; list-style:none; }
details.faq > summary::-webkit-details-marker, .faq details > summary::-webkit-details-marker, section[aria-labelledby="faq-title"] details > summary::-webkit-details-marker { display:none; }
details.faq > summary::before, .faq details > summary::before, section[aria-labelledby="faq-title"] details > summary::before { content:"▶"; display:grid; place-items:center; width:24px; height:24px; flex:none; background:var(--digit-signal); color:var(--digit-signal-ink); font-size:11px; line-height:1; clip-path:polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%); }
details.faq[open] > summary::before, .faq details[open] > summary::before, section[aria-labelledby="faq-title"] details[open] > summary::before { transform:rotate(90deg); }
details.faq > :not(summary), .faq details > :not(summary), section[aria-labelledby="faq-title"] details > :not(summary) { color:var(--digit-ink-muted); }

/* 広告枠。札（class="ad-label"）は見て分かる形で残す＝ステルスマーケティング規制。 */
.ad-slot { min-height:100px; margin:var(--digit-space-section) 0; padding:16px; display:grid; place-items:center; gap:2px; border:1px dashed var(--digit-line-control); border-radius:var(--digit-radius-surface); color:var(--digit-ink-muted); text-align:center; }
.ad-slot p, .ad-slot small { margin:0; }
.ad-label { font-size:12px; font-weight:700; }

.legal h2 { margin-top:24px; font-size:17px; }
.legal p { margin:0 0 8px; max-width:var(--digit-reading-measure); }
.site-footer { margin-top:var(--digit-space-section); padding:26px 0 34px; border-top:1px solid var(--digit-line); color:var(--digit-ink-muted); font-size:13px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; }
.site-footer p { margin:10px auto 0; }
.copyright { font-variant-numeric:tabular-nums; }

/* ─── 7. 幅と動きの作法 ────────────────────────────────────────────────────
   1画面に 題名・状態・主操作が収まることを 320px と 1280px の両方で確かめる（人の仕事）。 */
@media (max-width:640px) {
  .ai-disclosure { padding:8px 20px; }
  .ai-disclosure::before { display:block; margin:0 0 2px; }
  .site-header, main, .site-footer > * { width:min(100% - 32px, var(--digit-measure-frame)); }
  main { padding:28px 0 56px; }
  h1 { font-size:clamp(30px, 10vw, 44px); }
  .lead { font-size:16px; }
  .journey { margin:26px 0 30px; }
  .journey > :nth-child(2) { text-align:center; }
  .journey > :nth-child(3) { padding-right:0; text-align:right; }
  .card { padding:18px; }
  .panel { padding:20px; }
  table { font-size:14px; }
}
@media (max-width:359px) {
  .site-header { flex-wrap:wrap; }
  .site-header .badge { order:3; flex-basis:100%; margin-top:4px; }
  .journey { font-size:14px; }
}
/* 1280px 以上では主役と仕事面を左右に分け、視線の第2手・第3手を右へ渡す。 */
@media (min-width:900px) {
  main.has-panel { display:grid; grid-template-columns:minmax(0, .95fr) minmax(400px, 1.05fr); column-gap:64px; align-items:start; }
  main.has-panel > .intro { grid-column:1; }
  main.has-panel > .content { grid-column:2; grid-row:1 / 3; }
}
/* 動きは状態の変化だけ。reduced-motion では移動と反復を止める（言語 §2.4）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* 方角たどり固有: 盤・命令・4択。色は棚の役割トークンだけを使う。 */
.puzzle-panel { padding:clamp(20px,5vw,42px); }
#board-wrap { width:min(100%,420px); margin:var(--digit-space-related) auto; }
.board { display:block; width:100%; aspect-ratio:1; background:var(--digit-surface); border:2px solid var(--digit-line-control); }
.board-line { fill:none; stroke:var(--digit-line); stroke-width:1.5; }
.board-trail { fill:none; stroke:var(--digit-signal); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.board-star,.board-arrow,.board-label,.board-north { fill:var(--digit-ink); text-anchor:middle; font-family:var(--digit-font-numeric); font-weight:800; }
.board-star { font-size:28px; }.board-arrow { font-size:24px; }.board-label { font-size:28px; paint-order:stroke; stroke:var(--digit-surface); stroke-width:5px; }.board-north { font-size:18px; text-anchor:end; }
.commands { display:grid; gap:6px; margin-block:var(--digit-space-related); font-size:18px; }
.question { margin-top:var(--digit-space-section); font-family:var(--digit-font-display); font-size:20px; font-weight:700; }
.answer-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-block:var(--digit-space-related); }
.answer-option { position:relative; min-height:64px; display:flex; align-items:center; justify-content:center; gap:12px; border:2px solid var(--digit-line-control); background:var(--digit-surface); color:var(--digit-ink); font-size:22px; font-weight:800; }
.answer-option:not(:disabled):hover { background:var(--digit-soft); }.answer-option:disabled { opacity:.72; }
.option-number { font:700 16px/1 var(--digit-font-numeric); }.wrong-mark { color:var(--digit-danger); font-size:28px; }
.record { display:flex; flex-wrap:wrap; gap:var(--digit-space-related); padding-top:var(--digit-space-related); border-top:1px solid var(--digit-line); }
#trace { margin-top:var(--digit-space-related); }.copy-row { align-items:center; }
@media (max-width:420px) { .puzzle-panel { padding:18px 14px; }.answer-option { min-width:0; } }

/* ヘッダの名前が 375px で語の途中で折れていた→空白の所でだけ折る／答えの文が空のときに□だけが出ていた（第11便・仁科の手直し） */
.site-header .brand { word-break:keep-all; }
#status.verdict:empty::before { content:none; }

/* 時刻表固有 */
.progress{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:20px}.question{font-size:18px;font-weight:700}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choices button{width:100%;min-height:48px;border:1px solid var(--digit-line-control);border-radius:var(--digit-radius-control);background:var(--digit-surface);font-weight:700}.choices button:hover{border-color:var(--digit-signal)}.route-table{width:100%;display:table;table-layout:fixed}.route-table td,.route-table th{white-space:normal;padding:8px}.branch-note{margin:12px 0;padding:10px 14px;background:var(--digit-soft)}@media(max-width:400px){.choices{grid-template-columns:1fr}.route-table{font-size:13px}.route-table td,.route-table th{padding:6px 4px}}

@media (max-width:640px){main{width:100%;padding-inline:16px}}