/* cage-size (project-07-03) 固有スタイル
   ★ 07-02(densha-carry)の style.css をそのまま複製し、05-01 の入口の2ボタンの型を戻して、末尾に「07-03 固有」を足した
   (以下は 07-02 の見出しのまま: 05-01 の style.css をそのまま複製し、末尾に「07-02 固有」を足した)
     (設計01 §9: 複製元は 05-01。05-01 は 06-02 の複製=fieldset の min-width・44px のラジオ・
     flex の min-width を初見走行 ID711 の後の形で持っている)。
   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の全面適用ではなくトークン単位で守る)。 */
.hero__title, .hd h2, .lead, .note, /* ★ 2026-09-03(project-06-01)で足した枠。
   `body` の `word-break: keep-all` + `overflow-wrap: break-word` のままだと、
   日本語のひとつながりが「切れない語」として扱われ、**溢れた時に禁則を飛ばして折り返す**
   ——実測(320px)で `.source-note` の「…世論調査です。」の**句点だけが行頭に落ちた**。
   `word-break: normal` に戻すと `line-break: strict` の禁則が効く。
   **新しい表示枠を足したら、この一覧にも足すこと。** */
.move, .source-section, .source-note,
.src-box, .cmp, .sec, .route, .err{
  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; }

/* ★ 版 25c: inline-flex をやめて inline-block にした(上の同名の規則=土台の複製より後ろなので、こちらが効く。
     03-01 版 25d c11f980c と同じ1規則・指揮者判定 A 2026-09-25 17:4x)。
     inline-flex だと、リンクの中の文字列と <span> が**別々のフレックスの子(=列)になり**、
     320/375 でWHO の Q&A(題を逐語で入れた)のリンクが3列に割れていた(2026-09-25 実測)。
     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; }
.move__t { font-weight: 700; }



.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; }
.route__v { font-weight: 700; }

.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 と同じ) */
.row__lab { display: flex; align-items: center; min-height: 44px; font-size: 0.85rem; color: var(--color-text-muted); }
.row__num {
  min-height: 44px;
  font-size: 1rem;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  max-width: 100%;
}
.row__num { width: 9em; }
.row__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.row__field { display: flex; flex-direction: column; min-width: 0; }
.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; }
.src-by { margin: 4px 0 0; font-size: 0.78rem; color: var(--color-text-muted); }

/* 並置の1件(線ごとに1行=`.cmp__line`)。
   ★ 「線の数値以上」を緑にしない——色が「このケージで足りる」と読まれるため(07-02 の「中にある」と同じ趣旨)。 */
.cmp-list { list-style: none; margin: 0; padding: 0; }
/* ★ 各項目を枠の面(--color-surface)に載せる=面の階層(完成基準1)。背景と同じ面だと項目の切れ目が読めない */
.cmp {
  padding: 8px 10px;
  margin: 0 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.cmp__line { display: block; font-size: 0.85rem; line-height: 1.55; }
.st { font-weight: 700; }
.st--short { color: var(--color-warning); }
.st--ok { color: var(--color-text); }
.st--na, .st--none { color: var(--color-text-muted); }

/* 今日の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) */
.row__num--s { width: 5em; }
/* 会社ごとの逐語(毎画面・`.co-quotes`)。★ result と offer では**初回表示の中**に置く(設計01 §3)。
   0.9rem のままだと、JR東海+JR東日本 の両方を選んだ時に 320×568 の result で下端が 583px(15px はみ出す)だった
   (2026-09-24 実測)→ 1手の下の逐語(`.move .src-quote`)と同じ 0.85rem にした */
.co-quotes .src-quote { font-size: 0.85rem; }
/* 出所の1行の後に次の逐語が続く時(JR東海の2文)は間を空ける=どの出所がどの文のものかを読み違えない */
.src-by + .src-quote { margin-top: 10px; }

/* ===== 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 は変えない) */
.co-quotes { margin: 8px 0; }
.co-quotes .src-by { margin-top: 2px; line-height: 1.4; }
.co-quotes .src-by + .src-quote { margin-top: 6px; }
.co-quotes ~ .move { margin-top: 8px; }

/* ===== 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; }
.route-q { margin: var(--space-2) 0 0; font-weight: 700; }
/* 前置き(省令の名宛人と告示)。result・offer では h2 の直下=初回表示の中 */
.maeoki .src-lead { color: var(--color-text); }

/* ★ 選択肢の文字が長い(「毎日、ケージの外で自由に動ける時間がある」)と、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 と同じ色) */
.st--under, .st--signOut, .st--platOut { color: var(--color-warning); }
.st--signIn, .st--platIn { color: var(--color-text); }
/* スリップサインの選択欄: 4本を2つずつ2段(320px の枠で 2つまで=雛形 §13) */
.sel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.row__sel {
  min-height: 44px;
  font-size: 1rem;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* ===== 06-03(イヤホンの音量)で足したもの。05-03 からの差分はここだけ ===== */
/* 場面のカード: 見出し+「1日の分・週の日数」の2欄(320px の枠で 80px の欄は2つまで=雛形 §13)+音量の欄 */
.scene { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 12px 12px; margin: 0 0 12px; background: var(--color-surface, transparent); }
.scene__t { font-size: 1rem; margin: 0 0 4px; }
.row__sel--s { width: 5em; }
/* 英語の逐語に添える当サイトの訳 */
.src-trans { margin: 2px 0 8px; font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); }
/* 場面ごとの並び: 1段下の行は2行目に小さく */
.cmp__sub { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.st--share, .st--le60, .st--below { color: var(--color-text); }
.st--gt60 { color: var(--color-warning); }
/* 脚注(4画面の下に固定) */
.footnote { margin-top: 16px; }

/* ★ 2026-09-27(ID804 版 27a): **footer のリンクを折り返す。**「お問い合わせ」を足して3本になり、折り返しの無い flex
   (design-tokens 正本の .hub-footer__nav)のままだと 320px で右端 348px=28px はみ出した(実測 00:4x)。09-01(ID775)と同じ1行。 */
.hub-footer__nav { flex-wrap: wrap; }

/* ★ 2026-09-27(ID785 版 27a): 商品の画面の前置きと広告の開示文が「普通の折り方」の一覧から漏れていた=body の keep-all のままで、
   07-03 の 320px で「…かを確かめてから|、足りない辺と…」の読点が行頭に落ちた(実測・HEAD 25a でも同じ)。同じ枠を持つ6本に足す。
   カタカナ語は guardStaticKatakana / App.appendText の span が守る。 */
.offer__lead, .offer__pr { word-break: normal; overflow-wrap: anywhere; }