/* sumaho-norikae-tejun (project-03-02) 固有スタイル
   ★ 03-01(shower-suiryou)の style.css をそのまま複製し、末尾に「03-02 の画面だけの規則」を足した(ID861・2026-10-01)。
     03-01 の系譜: 07-03 → 07-02 → 05-01 → 06-02(fieldset の min-width・44px のラジオ・flex の min-width を初見走行 ID711 の後の形で持つ)。
     ★ 03-01 の先頭の注は 07-03 の見出しのままだった(複製の時に直し忘れ)=ここでは直した。
   design-tokens.css (バンドル内コピー) の上に載せる。
   外部フォント・CDN・外部画像は使わない(完成基準11)。 */
@import url("../design-tokens.css");

/* ★★ `hidden` を、クラスの display より強くする(ID662 の型・09-01/07-01/04-03 と同じ1行)★★
   `hidden` を効かせているのは UA の `[hidden]{display:none}` で、作者のクラス規則より弱い。
   このツールは猫だけの欄(`[data-cat-only]`)と誤りの表示で hidden を使うので、
   **生まれた時から塞ぐ**(05-01 から複製した1行)。
   入れる前に数えた: このツールの CSS/JS に `display:…!important` は0件、`style.display` への代入も0件。 */
[hidden] { display: none !important; }

/* design-tokens.css の body に word-break 指定が無いため、狭い画面幅で日本語の禁則が崩れる。
   line-break: strict で行頭禁則を維持し、word-break: keep-all でカタカナ語の途中改行を防ぎ、
   overflow-wrap: break-word を安全弁に置く(04-01/04-02/04-03 と同じ三点セット)。 */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.page-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

/* ===== 画面切替 =====

   ★ 入場演出で opacity を使わない。動かすのは位置だけにする。

   04-03 は「opacity:0 から始める演出」で2回、結果画面が真っ白になった。
   **演出が止まった時に何が残るかで設計を決める。**
   opacity を 0 から始める演出は、止まると「見えない」に落ちる。
   位置(transform)だけなら、止まっても「12px ずれた場所にちゃんと見える」で済む。
   **中身が読めなくなる演出は、演出として釣り合っていない。** */
.screen {
  transform: none;
}

.screen:not([hidden]) {
  animation: coffee-screen-in var(--duration-base, 0.24s) var(--ease, ease) 1;
}

@keyframes coffee-screen-in {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.screen[hidden] { display: none; }

/* ===== 入口 =====
   ★ 04-02 では hero が 320×568 で 413px=画面の7割強を占め、道具本体を毎回画面外へ
     押し出していた(2026-08-26 実測)。ここは2行に抑え、症状の選択肢と同居させる。 */
.hero {
  padding: var(--space-2) 0 var(--space-1);
}

.hero[hidden] { display: none; }

.hero__title {
  margin: 0;
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  line-height: 1.45;
}

/* ===== 画面の枠 ===== */

.hd { padding: var(--space-2) 0 var(--space-1); }

/* ★ 2026-08-29 実描画で見つけた見落とし:
   design-tokens.css の `h2` は**「小さく追跡させたラベル」**として定義されていて、
   `font-size: 0.8rem / letter-spacing: 0.25em / color: --color-text-muted` が付いている。
   こちらは h2 を**画面の見出し**として使っているのに font-size と line-height しか
   上書きしておらず、**letter-spacing 0.25em(実測 4.2px)と muted 色がそのまま残っていた**
   ——「先 に 分 け て か ら 、」と1文字ずつ離れて出ていた。
   **共通部品を別の役割で使う時は、その部品が持っている指定を全部見て打ち消す。**
   font-size を上書きしたことで letter-spacing の em 値が実寸で増えてもいた(0.8rem→1.05rem)。 */
.hd h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

.lead {
  margin: 4px 0 0;
  font-size: var(--fs-sm, 0.82rem);
  color: var(--color-text-muted);
}

.note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== 収益導線 =====
   ★ 10分プランを開いた後にだけ出る(手を動かす前に物を売らない)。
     開示は導線の**直前**に置く——04-02 ID242 で、開示とリンクが 518px 離れていて
     320×568 では同一画面に入らなかった(是正後 101px)。 */
.offer__pr {
  display: block;
  margin-bottom: 5px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ===== ボタン =====
   ★ 高さは 44px を割らない。04-01/04-02 では .btn--ghost が 320px 幅でだけ 39px になり、
     375px 以上では届いていた——**1つの幅だけ見ると存在しない欠陥に見える形**だった
     (ID261/ID263)。最初から min-height で押さえる。 */
.btn {
  display: block;
  width: 100%;
  min-height: 44px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-bottom: 3px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              color var(--duration-fast, 0.15s) var(--ease, ease);
}

.btn--ghost:hover {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

.btn--small { font-size: var(--fs-xs, 0.76rem); }

.offer__link { width: 100%; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm, 0.82rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.back:hover { color: var(--color-accent-hover); }

/* ===== 版表示 =====
   ★ 04-01 ID258: ユーザーテストで「是正が効いていない」ように見えた時、
     **キャッシュで古い版が動いていたのか、直っていないのか**を切り分ける手段が無かった。
     テストのたびに「どの版を触ったか」を確定できるようにする。 */
.build-stamp {
  margin: var(--space-3) 0 0;
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ===== 日本語組版(完成基準9) ===== */

/* カタカナ複合語を途中で折らない。分割は app-state.js splitKatakanaSegments が行う */
.no-break-katakana { white-space: nowrap; }

/* 地の文は通常の改行点を使わせる(禁則を効かせるため)。
   カタカナ語の保護は上の .no-break-katakana が個別に担う
   (04-02 ID148 と同じ考え方: CSSの全面適用ではなくトークン単位で守る)。 */
/* ★ 2026-09-03(project-06-01)で足した枠。
   `body` の `word-break: keep-all` + `overflow-wrap: break-word` のままだと、
   日本語のひとつながりが「切れない語」として扱われ、**溢れた時に禁則を飛ばして折り返す**
   ——実測(320px)で `.source-note` の「…世論調査です。」の**句点だけが行頭に落ちた**。
   `word-break: normal` に戻すと `line-break: strict` の禁則が効く。
   **新しい表示枠を足したら、この一覧にも足すこと。** */
.hero__title, .hd h2, .lead, .note, .move, .source-section, .source-note, .src-box, .sec, .route, .err, .method { /* ★ 03-01 で足した枠(量り方の手順・前の値の箱) */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ハブ復帰導線のタップ対象については、このファイルには何も置かない。
   ★ 2026-08-29(ID271)に 90×18 / 112×24 / 54×16 を検出して**ツールの中だけ**を
     暫定で上書きしていたが、**原因は design-tokens.css(正本)側で全ツール共通**だった。
     ID275 で正本が直った(--hub-tap-min: 44px)ため、**この上書きは削除した**(ID276)。
     暫定の上書きを残すと、正本が直ったことに誰も気づかないまま二重管理になる。
   ★ 2026-09-03(project-06-01): この注記は、付いていた規則(.act)を未使用として
     削除した後も**決定として生きている**ので残す。 */

/* ===== 完成基準7: prefers-reduced-motion で動きを止める =====
   design-tokens.css 側にも一括対応(*, *::before, *::after)があるが、
   **依存を前提にしない。**このファイルで新設した動きをここでも明示して止める。

   ★ 04-03 ID249 の教訓: 自分の点検が `animation` だけを数えていて `transition` を
     見落とし、`.quiz-opt` が漏れていた。**animation と transition の両方**を数えること。
     このファイルで動きを持つのは:
       animation … .screen:not([hidden])
       transition … .btn--ghost
     の**2つ**。ここに2つとも書く。
     ★ 2026-09-24(project-05-01): 06-02 から複製した後、未使用の `.opt`(transition を持っていた)を
       規則ごと消したので 3 → 2 になった。**数を書いたコメントは、規則を消した時に一緒に嘘になる。**
     ★ 2026-09-03(project-06-01)で数え直した。09-03 では5つだったが、
       未使用CSSの削除で `.check__btn`(手順のチェック)と `.time__fill`(10分プランの経過)が
       **規則ごと消えた**ので3つになった。
       **数を書いたコメントは、規則を消した時に一緒に嘘になる。**削除の後は必ず数え直すこと。
       なお `.offer__link` は `.btn--ghost` を付けているので、この3つに含まれている。 */
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) {
    animation: none;
  }
  .btn--ghost{
    transition-duration: 0.01ms;
  }
}

/* ハブフッターの3つ目の子(プライバシーの1行)。
   .hub-footer は flex なので、そのままだとブランド・ナビと同じ行に並ぼうとする。
   幅いっぱいで折り返して、独立した1行にする。 */
.hub-footer__privacy {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
}

/* 開示の中の法令リンク。地の文の中のリンクなので、文の流れを壊さない
   (44px の下限は、独立した操作要素に掛ける指標であって、文中のリンクには掛けない)。 */
.offer__pr a {
  color: var(--color-accent-hover);
}

/* ===== この手順のもとになった記事(ID288 ③)=====
   ★ 記事リンクは「導線」ではなく**結論の出どころ**として出す(04-03 と同型)。
     静的HTMLに置いてあるので、リンクグラフの実測にも検索側にも出る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===================================================================
   09-03 固有(09-02 から複製した土台の上に載せる)

   ★ 土台には 09-02 用のセレクタ(.steps / .notice / .timebar / .tells 等)も
     含まれている。**このツールでは使っていない。**
     消さずに残しているのは、**共通部品の書き方をコピーする(標準A1)方針の下で、
     次に同型のツールを作る人が同じ土台から始められるようにするため。**
     ただし「使っていないものが載っている」ことは事実なので、ここに書いておく
     ——**黙って残さない。**総合監査で不要と判定されたら削る。
   =================================================================== */

/* ===== 次の1杯で試す1手(このツールの主役)===== */
.move {
  margin: 8px 0 0;
  padding: 10px 11px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent-strong);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ===== この手順のもとになった記事(標準B1)=====
   ★ リンクは静的HTMLに置いてある。JS は印を付けるだけで、リンクは作らない
     ——JS が動かなくても2本のリンクは残る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list li:last-child { border-bottom: 0; }

/* ★ 版 25d: inline-flex をやめて inline-block にした(上の同名の規則=土台の複製より後ろなので、こちらが効く)。
     inline-flex だと、リンクの中の文字列と <span> が**別々のフレックスの子(=列)になり**、
     320/375 で要綱のリンクが「足立/区『|足立区節湯型…|』/(PDF/)」の3列に割れていた(2026-09-25 実測)。
     静的な文のカタカナ語を span で包む(screens.js guardStaticKatakana)と、どのリンクでも同じ割れ方になる。
     44px は上下の padding で取る(1行 = 0.82rem×1.55 ≈ 20.3px + 24px)。 */
.source-list a {
  display: inline-block;
  min-height: 44px;
  padding: 12px 0;
  box-sizing: border-box;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===== 法令導線のタップ対象(ID303。ID300 監査の条件)=====
   ★ 地の文の中に置いたままでは 44px にできない(縦に広げると行が重なる)。
     **文と分けて独立した行に出し**、そのうえで 44px を確保する。
   ★ それまでは「文中のリンクには 44px を掛けない」という扱いを status.md に書いていたが、
     **監査の判断で、法令導線は独立した操作要素として扱うことになった**(2026-08-29)。 */
.offer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
}

.offer__pr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
}

/* ★★ 防御(2026-09-03 maker)★★
   `.no-break-katakana` は**カタカナ語の途中改行を防ぐためだけ**のラッパーで、
   見た目を持つ意図は無い。ところが element セレクタ(`.move span` `.quiz-opt__text span`
   `.tell span` 等)は**このラッパーにも当たる。**
   実測(2026-09-03): 公開中の 09-03 で `.move span { display: block }` が
   「次の1杯:豆の量を増やす(**コーヒー**:水 = …)」の「コーヒー」に当たり、
   1つの文が**3行に割れて**いた(小さい灰色の別行になっていた)。06-01 でも同じ形が出ていた。
   → **改行のためだけの入れ物は、他のスタイルを受け取らない**ようにここで固定する。
   セレクタを `span.no-break-katakana`(0,1,1)にして、`.xxx span`(0,1,1)と同点にしたうえで
   **ファイル末尾に置いて後勝ちにしている。**位置を動かすと効かなくなる。
   ★★ **ただし、親が flex / grid の時は、この規則は位置に関係なく効かない**(2026-09-20 / ID699)。★★
     フレックスアイテム・グリッドアイテムの `display` は**カスケードの後にブロック化される**ので、
     `display: inline` と書いても計算値は `block` になる。**後勝ちにしても勝てない。**
     実測(06-01 / 2026-09-20): `.offer__pr a { display: inline-flex }` の中のこのラッパーは `block` だった。
     **見た目が壊れているかは別である**——06-01 の 390px では3断片が横一列(リンクは 334×44)で崩れていない。
     直す必要が出たら、**包む側(`appendText()`)で「親が flex/grid なら包まない」**にする
     ——CSS の後勝ち合戦を続けても、flex を使う箇所が増えるたびに同じ穴が開く。
   ★ ID699 では「読み上げの名前が欠ける」とも疑ったが、**それは測定器(read_page)の性質**で、
     このブロック化とは無関係だった(対照4本で確認。`shared/knowledge-base.md` の該当項)。 */
span.no-break-katakana {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* ===== 06-02 固有(2026-09-22 ID711)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ タップ対象は 44px 以上(標準C1)。ラジオ・チェックボックスの**ラベルごと**当たり判定にする
     ——ID269(04-02 のラベル14個が26px)と同型の穴を、最初から塞ぐ。 */

.q {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-2);
  margin: 0 0 var(--space-2);
  background: var(--color-surface);
  /* ★★ `fieldset` は UA 既定で `min-width: min-content` を持つ。★★
     指定しないと**親より縮まず、320px で 306px のまま外へはみ出す**
     (2026-09-22 実測: 親 288px に対して right=322)。`box-sizing` では直らない。 */
  min-width: 0;
}
/* ★ `legend` も UA 既定で縮まない(fieldset の min-width と同じ理由で 320px を超える)。
   実測 2026-09-22: 親 256px に対して right=328。`max-width: 100%` で親に収める。 */
.q__legend { font-weight: 700; padding: 0 4px; max-width: 100%; box-sizing: border-box; }

/* ★ ラベル全体を押せるようにし、高さを 44px 以上にする */
.q__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  cursor: pointer;
}

/* ★★ 操作子そのものを 44px にする(2026-09-22 実測で 13x13 だった)★★
   ラベルを 44px にしても、**`input` の実体は 13px のまま**である。
   標準C1 の対象集合は `input` 類を含むので、**ラベルだけ大きくしても満たさない。**
   ID269(04-02 のラベル14個が26px)と同じ穴を、**操作子の側で**塞ぐ。
   → `appearance: none` で UA の描画を外し、**44x44 の箱に丸を描く**。 */
.q__opt input[type="radio"],
.q__opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.q__opt input[type="radio"]::before,
.q__opt input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  box-sizing: border-box;
}
.q__opt input[type="radio"]::before { border-radius: 50%; }
.q__opt input[type="checkbox"]::before { border-radius: 3px; }
.q__opt input:checked::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.q__opt input:focus-visible::before {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.q__optlabel { line-height: 1.4; }

.move { margin: var(--space-2) 0; }

.offer__lead { color: var(--color-text-muted); font-size: 0.9rem; }
.restart-row { margin-top: var(--space-2); }

/* ===== 05-01 から複製した並置の型(2026-09-24 ID719 → 07-02 ID735)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ タップ対象は 44px 以上(標準C1)。選択は 06-02 の `.q__opt`(44x44 の箱に丸)をそのまま使う。
   ★ 動き(animation / transition)は足していない=reduced-motion の数(2つ)は変わらない。
   ★ 07-02 で使わない規則(05-01 の第0問のボタン・容器の行・国際線の欄・種類の見分け方など 12 クラス)は
     `directors/tools/check-unused-css.py` で拾い、JS の `mk()` で付くクラスを grep で除いてから消した(2026-09-24)。 */

/* measure の上に出す「乗る会社」 */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 4px 0 0; font-size: 0.9rem; }

.sec { margin: var(--space-3) 0 0; }
.sec__t {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

/* ★ `for` を持つラベルは押すと入力に飛ぶ=当たり判定がある。44px に揃える(06-02 の .q__numlabel と同じ) */

.err { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.5; }
.err { color: var(--color-warning); font-weight: 700; }

/* JR の資料の逐語(`.src-quote` の中身は1字も変えない=設計01 §2。当サイトの文ではない印でもある) */
.src-box { margin: var(--space-2) 0; }
.src-lead { margin: 0 0 4px; font-size: 0.85rem; color: var(--color-text-muted); }
.src-quote {
  margin: 0;
  border-left: 3px solid var(--color-border);
  padding-left: 10px;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
}
.src-quote + .src-quote { margin-top: 6px; }

/* 並置の1件(線ごとに1行=`.cmp__line`)。
   ★ 「線の数値以上」を緑にしない——色が「このケージで足りる」と読まれるため(07-02 の「中にある」と同じ趣旨)。 */

/* ★ 各項目を枠の面(--color-surface)に載せる=面の階層(完成基準1)。背景と同じ面だと項目の切れ目が読めない */

.st { font-weight: 700; }

/* 今日の1手の枠(06-02 の .move)は太字。**中の逐語は太字にしない** */
.move .src-box { font-weight: 400; margin: 6px 0 8px; }
.move .src-quote { font-size: 0.85rem; }

/* ===== 07-02 から複製した型(2026-09-24 ID735)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ 動き(animation / transition)は足していない=reduced-motion の数(2つ)は変わらない。 */

/* 数字の入力(3つを1行に。320px で 288px の中に 3×80px+間 24px) */

/* 会社ごとの逐語(毎画面・`.co-quotes`)。★ result と offer では**初回表示の中**に置く(設計01 §3)。
   0.9rem のままだと、JR東海+JR東日本 の両方を選んだ時に 320×568 の result で下端が 583px(15px はみ出す)だった
   (2026-09-24 実測)→ 1手の下の逐語(`.move .src-quote`)と同じ 0.85rem にした */

/* 出所の1行の後に次の逐語が続く時(JR東海の2文)は間を空ける=どの出所がどの文のものかを読み違えない */

/* ===== ID756(総合監査 ID737 の 320×568 の2件・指揮者判定 A/A・2026-09-24)=====
   ★ 手がかりの文を足さない・1手を逐語の上へ動かさない(どちらも B=採らない)。**高さを詰めるだけ**で満たす。
   ★ 44px は保つ(`.q__opt` は min-height 44px・操作子は 44x44 のまま=上下の余白だけを 0 にする)。 */

/* ① 入口の主ボタン「選んだ会社で進む」を 320×568 の初回表示内に(版 24a は 616〜660=まるごと外) */
.hero { padding: 8px 0 4px; }
#screen-intro .lead { line-height: 1.5; margin-top: 2px; }
#screen-intro .q__legend { line-height: 1.4; }
#screen-intro .q { padding-top: 6px; padding-bottom: 6px; margin-bottom: 10px; }
#screen-intro .q__opt { padding-top: 0; padding-bottom: 0; }

/* ② 両社を選んだ時の結果の「今日の1手」の下端を 568 以内に(版 24a は 549〜592=下端が 24px 外)。
   逐語3つの間の余白と、出所の1行の行間・余白を詰める(逐語の字の大きさと行間 1.6 は変えない) */

/* ===== 07-03 固有(2026-09-24 ID753)=====
   ★ 色は1つも新設しない。動き(animation / transition)も足していない=reduced-motion の数(2つ)は変わらない。 */

/* 第0問のボタン2つ(入口。05-01 の型を戻した)。押すと measure へ */
.route-btns { margin: var(--space-2) 0 0; }
.route-btns .btn + .btn { margin-top: 10px; }

/* 前置き(省令の名宛人と告示)。result・offer では h2 の直下=初回表示の中 */

/* ★ 選択肢の文字が長い(「毎日、ケージの外で自由に動ける時間がある」)と、body の `word-break: keep-all` で1語として扱われ、
   320px で 44px はみ出した(2026-09-24 実測)。選択肢の文字も日本語の途中で折り返す(禁則は line-break: strict が守る) */
.q__optlabel { word-break: normal; overflow-wrap: anywhere; min-width: 0; }

/* ===== 05-03(タイヤの溝)で足したもの。07-03 からの差分はここだけ ===== */
/* 状態の色: 線の数値未満・スリップサインが出ている・プラットホームが出ている=注意の色(07-03 の .st--short と同じ色) */

/* スリップサインの選択欄: 4本を2つずつ2段(320px の枠で 2つまで=雛形 §13) */

/* ===== 06-03(イヤホンの音量)で足したもの。05-03 からの差分はここだけ ===== */
/* 場面のカード: 見出し+「1日の分・週の日数」の2欄(320px の枠で 80px の欄は2つまで=雛形 §13)+音量の欄 */

/* 英語の逐語に添える当サイトの訳 */

/* 場面ごとの並び: 1段下の行は2行目に小さく */

/* 脚注(4画面の下に固定) */

/* ===== 03-01(シャワーの水量)で足した枠(2026-09-25 ID778 実装・設計01 163bc0a9)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ 動き(animation / transition)は足していない=reduced-motion の数(2つ)は変わらない。
   ★ 状態の語(今より少ない/多い・短い/長い・同じ)は**色を分けない**——「多い」を警告の色にすると、判定に読まれる(並置であって判定ではない)。 */
.method { margin: var(--space-2) 0; padding-left: 1.4em; font-size: 0.9rem; line-height: 1.6; }
.method li + li { margin-top: 4px; }

.route-btns .btn + .btn--ghost { margin-top: 10px; }

/* ★ 2026-09-27(ID804 の形・版 25e=総合監査 9f3880e8 の条件2): footer のリンクを折り返す。「お問い合わせ」を足して3本になり、
   折り返しの無い flex(design-tokens 正本の .hub-footer__nav)のままだと 320px ではみ出す(15本は 27a で同じ1行) */
.hub-footer__nav { flex-wrap: wrap; }

/* ===== 03-02 の画面だけの規則(ID861・2026-10-01)===== */
/* 加工の表示(毎画面=条件5)。逐語の「詳細は…」と2行で1組 */
.pdl { margin: var(--space-2) 0; }
.pdl .src-quote { margin: 4px 0 0; }
/* 手順の行(設計01 §5)。行の名・逐語・行動の文・総務省の頁へのリンク */

/* 開示1行(条件4=リンクの直下) */

/* 出典の記載の行(公共データ利用規約の形=URL つき)。URL は切れない長い文字なので、リンクにして折り返せる形にする
   (2026-10-01 実測: 320 で 292>288 のはみ出し・375 で URL の直後の「)」が行頭=URL を末尾のリンクへ移した) */
.src-attrib a { display: inline-block; min-height: 44px; line-height: 1.5; padding: 10px 0; overflow-wrap: anywhere; word-break: normal; }   /* 折り目は「/」の後ろの <wbr>(英字の語の途中で折らない) */
/* ★ 約物の詰め(text-spacing-trim)を切る(2026-10-01 実測): 「総務省『②乗換えの基本と費用を知ってる？』」が 320 で1行のまま 292>288 にはみ出した。
   詰めた幅では1行に収まると判断され(折らない)、描いた幅は詰めない幅だった=word-break・overflow-wrap では直らない。
   space-all にすると2行に折れて収まる(右端 266)。Safari は詰めを持たないので影響しない */
.source-list a { text-spacing-trim: space-all; }

/* ★ 03-03(ID900・2026-10-07 の試作で見つけた): 毎画面の出典の箱(.pdl)も普通の折り方に。keep-all のままだと
     「経済産業省ウェブサイト『蛍光灯からLED照明への切り替えはお済みですか？』」が折れずに 320 で右端 364(LayoutProbe)。
     約物(『』)の詰めでも折れないので text-spacing-trim: space-all(03-02 §18 と同じ直し) */
.pdl { word-break: normal; overflow-wrap: anywhere; }
.source-list a { text-spacing-trim: space-all; }

/* ===== 04-04 洗濯表示(ID940・2026-10-13)=この道具だけの部品。色はトークン参照(雛形 §0) ===== */
.kind { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.opt {
  display: block; width: 100%; min-height: 44px; text-align: left; font: inherit; cursor: pointer;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); padding: 10px 12px;
}
.opt__t { display: block; font-weight: 700; }
.opt__s { display: block; color: var(--color-text-muted); font-size: 0.85rem; }
.col { background: var(--color-surface); border: 1px solid var(--color-border); padding: 10px; margin: 0 0 10px; min-width: 0; }
.col__h { font-weight: 700; margin: 0 0 6px; }
.syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.sym {
  min-height: 44px; min-width: 44px; padding: 2px; font: inherit; cursor: pointer;
  background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
}
.sym svg { width: 40px; height: 44px; display: block; margin: 0 auto; }
.sym[aria-pressed="true"] { border-color: var(--color-accent-strong); outline: 2px solid var(--color-accent-strong); background: var(--color-accent-wash); }
.sym--none { grid-column: 1 / -1; font-size: 0.85rem; word-break: normal; overflow-wrap: anywhere; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 10px 12px; margin: 0 0 var(--space-2); }
.card__h { font-size: 1rem; margin: 0 0 6px; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.row__icon svg { width: 40px; height: 44px; display: block; }
.row__col { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.row__t { margin: 0; font-weight: 700; }
.row__alt { margin: 4px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.row .src-box { margin: 6px 0 0; }
.src-by { display: block; margin: 2px 0 0; font-size: 0.78rem; color: var(--color-text-muted); }
.groups { background: var(--color-surface); border: 2px solid var(--color-accent-strong); padding: 10px 12px; margin: 0 0 var(--space-2); }
.groups__h { font-size: 1rem; margin: 0 0 6px; }
.groups__list { margin: 0 0 6px; padding-left: 1.2em; }
.groups__together { margin: 0 0 6px; font-weight: 700; }
.symlist { margin: var(--space-3) 0; }
.symlist__title { font-size: 1.1rem; margin: 0 0 var(--space-1); }
.symlist__group { background: var(--color-surface); border: 1px solid var(--color-border); margin: 0 0 var(--space-1); padding: 0 10px; }
.symlist__summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.symlist__col { font-size: 0.95rem; margin: 10px 0 4px; }
.symlist__items { list-style: none; margin: 0; padding: 0; }
.symlist__item { display: grid; grid-template-columns: 44px 2.4em minmax(0, 1fr); gap: 6px; align-items: start; padding: 4px 0; border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.symlist__icon svg { width: 40px; height: 44px; display: block; }
.symlist__no { color: var(--color-text-muted); padding-top: 2px; }
.symlist__item .src-quote { border-left: 0; padding-left: 0; font-size: 0.85rem; }
.inline-link { display: inline-block; min-height: 44px; padding: 12px 0; box-sizing: border-box; color: var(--color-accent-hover); text-decoration: underline; text-spacing-trim: space-all; }
/* 普通の折り方(body の keep-all のままだと、長い語が 320 で折れない=雛形 §13・§17) */
.opt__s, .row__t, .row__col, .row__alt, .groups__list, .groups__together, .symlist__item, .card__h, .note { word-break: normal; overflow-wrap: anywhere; }
.row__body { min-width: 0; }
/* 記号を選ぶ画面の操作は下に固定(sticky=04-02 の .reflect-dock と同じ型)。.screen の入場の animation(translateY 12px・0.24秒)の間だけ
   帯が 12px ずれる=終わった後は正しく効く(測る時は getAnimations().finish() の後) */
.pick-dock { position: sticky; bottom: 0; z-index: 5; margin: var(--space-2) 0 0; padding: 6px 0; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.pick-dock__count { margin: 0 0 4px; }
.pick-dock__btns { display: flex; flex-wrap: wrap; gap: 8px; }