/* TASTEOME Onboarding (Sprint 2 Day 1-2) */
/* design token は tokens.css canonical — :root 全体上書きは禁止 (Theme persistence bug 修正 2026-06-03)。 */

/* box-sizing は tokens.css に統一 */
html, body { padding: 0; background: var(--bg); color: var(--fg); }
body.onboarding-body {
  min-height: 100dvh; display: flex; flex-direction: column;
  /* ⚠ 左右の gutter は **ここ 1 箇所**。`.ob-progress` は `.ob-main` の**外**にあるため
     同じ値を各自で書くと片方だけ mobile 追随して左端がズレる (実際にズレていた)。 */
  --ob-gutter: 1.5rem;
}
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* ── Header ──────────────────────────────────────────────── */
/* hamburger (site-drawer が inject) + brand を左に集約、 残り (search / signin) は
   brand の margin-right:auto で右へ押し出す。 space-between だと 5 要素が均等分散して
   ☰ と brand が離れるため gap+auto 方式に変更 (2026-07-04 ヘッダー崩れ修正)。 */
.ob-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 1rem var(--ob-gutter); max-width: 1100px; width: 100%; margin: 0 auto;
}
/* 他ページの .site-brand / .hub-brand と揃える (logo-mark + inline-flex + 同 letter-spacing/size)。
   旧 ob-brand はマーク無しのテキストのみで他ページと不一致だった (2026-07-04)。 */
.ob-brand {
  display: inline-flex; align-items: center; gap: 0.5em;
  /* 🔴 D-1 — ここも**主導線 (ヘッダ)** なので常時 44 (`tokens.css:307-312` の逐語)。
     ⚠ 撮影の全数実測で見つけた抜け: 他の全面は共有 `.site-brand` が実測ちょうど 44 なのに、
       `/start/` だけ自前の `.ob-brand` が **21.83px** だった (上のコメントが謳う「他ページと
       揃える」が高さでは未達だった)。⚠ `.ob-header` は hamburger / search が既に 44 なので
       行の高さは動かない (当たり判定だけが広がる = 構造不変の約束を破らない)。 */
  min-height: var(--t-tap-min);
  font-weight: 700; letter-spacing: 0.15em; color: var(--fg); font-size: 1.05rem;
  margin-right: auto;
}
.ob-brand::before {
  content: '';
  /* 1 : 2.02 の縦長。方式の理由は site-header.css の .site-brand::before を参照。 */
  width: 0.65em; height: 1.3em;
  background-color: var(--t-fg);
  -webkit-mask-image: url('/assets/logo-mark.svg');
  mask-image: url('/assets/logo-mark.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* onboarding 中の #tasteome-link (fingerprint) は現在ページ (/start/) への redundant link
   なので隠す。 search / signin は別要素なので影響しない。 */
body.onboarding-body #tasteome-link { display: none; }

/* ── Progress bar (4 セグメント) ──────────────────────────── */
.ob-progress {
  /* ⚠ 枚数は `ObProgress.tsx` の SEGMENTS と**対で**変える (1e で 4 → 5 = tier 段の挿入)。 */
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  /* ⚠ step 本体と同じ幅・同じ左端に揃える (600px だけ狭く、見出しと 126px ずれていた)。
     header 直下 0px だったので上にも余白を置く。 */
  max-width: 720px; width: calc(100% - var(--ob-gutter) * 2); margin: 1rem auto;
}
/* 🔴 Step0 だけのサインイン導線 (owner 裁定 2026-09-12)。
   onboarding 中は header を描かないので、**これが唯一の離脱路**になる。
   ⚠ tap 床 44px を張る (`--t-tap-min`) — 一次動作ではないが唯一の出口なので確実に押せるように。
   ⚠ 主ボタンより弱い階層に置く (主行動を食わない)。 */
.ob-signin-line { margin: var(--t-sp-3) 0 0; text-align: center; }
.ob-signin-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--t-tap-min); padding: 0 var(--t-sp-3);
  font-size: 0.85rem; color: var(--t-muted); text-decoration: underline;
}
.ob-signin-link:hover { color: var(--t-fg); }

/* 🔴 案 A = 1 行ヘッダ (owner 採択 2026-09-12)。`戻る / バー / n / 5` を 1 行に収める。
   参照 = Appllama 実面 (SmartBP 型)。390 で縦を最も節約でき、作品 grid に高さが残る。 */
.ob-head {
  display: flex; align-items: center; gap: var(--t-sp-3);
  /* ⚠ **step 本体と同じ幅・同じ左端に揃える** — 旧 `.ob-progress` が単独で持っていた指定を
     ここへ引き上げた。揃えないと見出しと横位置がずれる (`:51-52` の注記と同じ罠)。 */
  max-width: 720px; width: calc(100% - var(--ob-gutter) * 2); margin: var(--t-sp-3) auto;
}
/* ⚠ 戻れない段でも幅を確保する — 出し入れでバーの左端が動くと目が滑る。 */
.ob-back-slot {
  flex: 0 0 auto; width: var(--t-tap-min); height: var(--t-tap-min);
  display: flex; align-items: center; justify-content: center;
}
.ob-back-btn {
  margin-inline-start: calc(var(--t-sp-3) * -1);
  background: transparent; border: 0; border-radius: var(--t-r-md);
  color: var(--t-fg); cursor: pointer; padding: 0;
}
.ob-back-btn:hover { background: var(--t-bg-elev); }
.ob-head-count {
  flex: 0 0 auto; font-size: 0.82rem; color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}
/* ⚠ `.ob-progress` は単独で置かれていた頃の余白 (`:48-56`) を自前で持つ。`.ob-head` の
   中では二重になるので打ち消す — 余白は `.ob-head` 側が一括で持つ。 */
.ob-head .ob-progress {
  flex: 1; min-width: 0;
  margin: 0; padding: 0; max-width: none;
}

.ob-progress-seg {
  height: 3px; background: var(--card-border); border-radius: 2px;
  transition: background 0.3s;
}
/* 🔴 **到達した段は塗る** — `done` (通過済み) も `active` (現在地) も同じ塗り。
   🗄️ 旧実装は `active` だけ `linear-gradient(... var(--p, 0%) ...)` で **部分塗り**にしていたが、
   `--p` を書く箇所が repo に 1 つも無く、fallback 0% で 3 つの色停止が全て 0% に潰れて
   **未到達の段と同じ色**で描かれていた (実測: active RGB(30,33,44) vs 未到達 RGB(30,32,43) = 1 階調差)。
   🔴 とくに **Step0 では `done` が 1 つも無い**ため、user が最初に見る進捗バーは**完全な空バー**だった。
   ⇒ 部分塗りの仕組みごと撤去する。`--p` の書き手を新設する必要は無く、機構が 1 つ減る。
   ⚠ 現在地を「途中まで塗る」表現へ戻すなら、**書き手 (`--p` を実際に設定する箇所) と対で**作ること。 */
.ob-progress-seg.done,
.ob-progress-seg.active { background: var(--accent); }

/* ── Step 3 = tier 作成 (1e・canonical §7 / spec §2.5) ─────────────────────
   🔴 C′ = 平面 + 罫線。行を箱で囲まず `--t-rule` の 1 本で仕切る (影・角丸の島を作らない)。
   ⚠ tier ラベルの色だけは **tier 表 (`app/tier/tiers.ts`) の値**を inline style で受ける —
     5 段の配色は 1 つの体系なので、ここで 1 段だけ token へ寄せると体系が割れる
     (体系ごとの見直しは redesign slice 6)。 */
.ob-tier-domains { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; }
.ob-tier-domains > .ctl-select { justify-content: flex-start; gap: 0.6rem; }
.ob-tier-domain-name { flex: 1 1 auto; text-align: left; }
.ob-tier-domain-count { color: var(--t-fg-soft); font-variant-numeric: tabular-nums; }
/* ⚠ 「おすすめ」は**弱い**添え字 — 自動確定しない以上、選択を促す以上の強さを持たせない。 */
.ob-tier-domain-reco { font-size: 0.78rem; color: var(--t-fg-soft); }
/* ⚠ ジャンル名と「ジャンルを変える」を 1 行に揃える。`Button` が自前の padding を持つので
   `gap` は 0 にし、中黒の前だけ最小の余白を置く (実写で空きが二重になっていた)。 */
.ob-tier-current {
  margin: 0 0 1rem;
  /* ⚠ 中黒の**左右を対称に**する (2026-09-12)。gap: 0 + 右側だけ button の padding が
     効いていたため、実写が「マンガ· ドメインを変える」と左詰めに見えていた。
     ⇒ 中黒の左に同じ空きを 1 つ入れ、button 側の追加 margin は外す。 */
  display: flex; align-items: center; gap: var(--t-sp-1);
}
/* ⚠ box の gap が 4/4 でも、button は自前の inline padding (9.6px) を持つので
   **インクの空きは 4 / 13.6 に割れる** (実測)。この行では padding を外して揃える —
   高さ 44px は保つので、二次動作の当たりは規約 (24px) を下回らない。 */
.ob-tier-current > .ctl-btn { padding-inline: 0; }

.ob-tier-rows { display: grid; gap: 0; margin: 0 0 1.25rem; }
.ob-tier-row {
  /* ⚠ gap は `--tl-row-gap` 経由で持つ — 六角徽章の左余白 (`tier-board.css` の `.tl-tier-plate`) が
     この値 + chip 列の左 padding を読んで左右を揃えるので、直書きすると左だけ狭くなる。 */
  --tl-row-gap: 0.6rem;
  display: flex; align-items: center; gap: var(--tl-row-gap);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--t-rule);
}
/* ⚠ 必須の行だけ地をわずかに起こす — 色を足さず、明度だけで区別する (無彩の原則)。 */
.ob-tier-row.is-required { background: var(--t-press-bg); }
.ob-tier-label {
  flex: 0 0 auto; min-width: 2.75rem; padding: 0.2rem 0.4rem;
  border-radius: var(--t-r-sm); text-align: center;
  font-weight: 700; font-size: 0.82rem;
  /* ⚠ 文字色は **CSS で決めない** — 地が tier 表の色 (行ごとに違う・theme 非依存) なので、
     `readableInkOn` が **その地に対して** contrast で選んだ値を inline で受ける
     (`Step3Tier.tsx`)。ここで固定色を書くと、暗い行 (B) で読めなくなる。 */
}
.ob-tier-slot { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
/* 🗄️ `.ob-tier-chip` (作品名の文字ボタン) は **2026-09-13 撤去**、`.ob-tier-drop` (「ここに置く」) は
   **2026-09-26 撤去** (S2 = 段のどこを押しても置ける・`MOBILE-TIER-ROW-TAP-DND`)。
   🔴 選択中の段 = 破線の枠 + pointer。⚠ **outline** で描く (border にすると 1px ぶん段が動く)。
   ⚠ 色は本文色 (`--t-fg`) — 破線は「押せる先」の合図で、段の色 (tier 表) とは競わない。 */
.ob-tier-row.is-armed {
  outline: 1px dashed var(--t-fg); outline-offset: -1px; cursor: pointer;
}
.ob-tier-armed-hint { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--t-fg); }
/* ⚠ 行の縦は **chip の高さ**で決まる (cover chip は 2:3 のカバーを持つ) — 中身が
   折り返さないよう `align-items` は center のまま、行の padding だけ詰める。 */
.ob-tier-row .ob-tier-slot { align-items: center; }
.ob-tier-remaining { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--t-fg); }

/* ── Main ─────────────────────────────────────────────────── */
.ob-main { flex: 1; max-width: 768px; width: 100%; margin: 0 auto; padding: 0.5rem var(--ob-gutter) 3rem; }

/* ── Loading ──────────────────────────────────────────────── */
.ob-loading {
  min-height: 40dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem; color: var(--muted);
}
/* .dna-spinner / @keyframes dnaSpin は components/loading.css が canonical (color は alias 同値)。
   start/ は loading.css も読むため重複定義を撤去 (DRY, 2026-06-22)。 */

/* ── Step common ──────────────────────────────────────────── */
.ob-step { animation: stepFade 0.3s ease; }
/* 🔴 **tier の段だけ transform を使わない** (2026-09-19・Codex Plan review ⑥)。
   ⚠ `stepFade` の keyframe は `transform: translateY(8px)` を持つので、**animation 中だけ
     `.ob-step` が `fixed` の containing block になる** (CSS Containment / Transforms の規則)。
     ⇒ 下端固定プール (`.tl-pool-dock`) が 0.3s のあいだ **`x=16 / w=358` へ inset** し、
     完了後に `x=0 / w=390` へ飛ぶ (実測・390)。全幅で固定にすると desktop でも目に付く。
   ⚠ **`stepFade` 自体は変えない** — keyframe は Step0〜4 の全段が共有していて、
     transform を外すと**全段の入場 motion が変わる**。⇒ tier の段にだけ別 animation を当てる。 */
.ob-step.ob-tier { animation: stepFadeFlat 0.3s ease; }
@keyframes stepFadeFlat {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes stepFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ob-step h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0 0 0.4rem; }
.ob-step p.intro { color: var(--muted); margin: 0 0 1.5rem; line-height: 1.5; }

.ob-actions {
  display: flex; gap: 0.8rem; justify-content: center;
  margin-top: 2rem; flex-wrap: wrap;
}

/* 🔴 **モバイルでは CTA を画面下に貼る** (2026-08-30 / batch 4 の H-4 回収・owner 裁定)。
   実測 360x780: `.ob-actions` は static で bottom 753 に来るのに対し、同意バナーは
   画面下 120px を占める (top 645) ので **step0 の 2 つのボタンがどちらも押せない**
   (`elementFromPoint` がバナーを返す)。約 93px スクロールすれば逃げられるが、
   onboarding の最初の画面で主導線が隠れている状態なので常時可視にする。
   ⚠ **`padding-bottom` では直らない** — 通常フローの要素の**下**に空きを作るだけで
     要素自身は上がらない (batch 3 で実測して効かないことを確認済み)。
   ⚠ **見た目は隣の `.ob-step1-status` と同値にする** — step0 と step1 で画面下の
     CTA バーが違う見え方になると、同じ flow の中で不揃いになる。
   ⚠ **desktop は触らない** — 広い画面ではバナーが 69px で重なりも起きず、
     常時貼り付ける必要が無い (未計測のまま desktop を変えない)。
   ⚠ バナーの分だけ上げる offset は**バナー側が持つ** (`ui/settings/consent-banner.css`)。
     「画面下に貼る主導線をバナー分だけ上げる」は `.ob-step1-status` と共通の契約なので、
     1 箇所に集める。
     🔴 **`.view-selector` (domain 面) は 2026-09-07 にこの契約から外れた** (batch 3 E-1) —
     domain 面は主導線ではなく**バナー自身**を bar の高さ (54px) だけ上げる形へ移した
     (下端に bar が在る面では、主導線を上げるとバナーの実高が要り、desktop に高さ契約が
     無いぶんだけ bar が宙に浮くため)。`/start/` は下端に bar が無いので CTA 側が動く
     ままでよい = 2 面で担当が違う。 */
@media (max-width: 767px) {
  .ob-actions {
    position: sticky; bottom: 0; z-index: 10;
    background: var(--t-bg); border-top: 1px solid var(--t-border);
    /* ⚠ **gutter は `--ob-gutter` から取る** (:9-11 の契約)。`1.5rem` を直書きすると
       `:326` の `@media (max-width: 480px)` で `.ob-main` の padding だけが 1rem へ落ち、
       負 margin が 24px のまま残って **左右へ 8px ずつはみ出す** (360 幅で実測:
       `.ob-actions` が -8…353 / `scrollWidth 353 > clientWidth 345`)。 */
    padding: 1rem var(--ob-gutter); margin: 2rem calc(-1 * var(--ob-gutter)) 0;
  }
}
/* 🔴 button の見た目は共有部品 `Button` (`.ctl-btn` = ui/shared/controls.css) が持つ。
   旧 `.primary` / `.secondary` / `.text-only` の 3 系統はここから撤去した
   (skip 経路の撤去で `.text-only` の消費者も無くなった)。 */
.ob-actions > .ctl-btn { flex: 1 1 auto; max-width: 22rem; }

/* ── Step 0: Domain selection ─────────────────────────────── */
.ob-domain-grid {
  display: grid; gap: 0.8rem;
  /* ⚠ **列数は「最終行が 1 枚にならない」ものだけを使う**。
     auto-fit は幅次第で任意の列数を取る = 孤立を防げないので使わない。
     domain が増えたら test/app/onboarding-grid.test.ts が赤くなり、ここを再裁定する。
     2026-08-13 (book 追加で 6 枚) の裁定: 旧 5 列は 6 枚だと 5+1 で孤立する。
     3 列は **5 枚 (3+2) でも 6 枚 (3+3) でも孤立しない**うえ、`.ob-main` の
     max-width 768px では 6 列だとカード幅が ~109px まで痩せる (旧 5 列で ~134px、
     下の 760px 段が「5 列だと窮屈」と判定していた幅) ため 6 列は採らない。 */
  grid-template-columns: repeat(3, 1fr);
  /* ⚠ 行ごとに高さが決まるので、どれか 1 枚の label が折り返すと**その行だけ**高くなる。
     折り返しの有無は言語で変わる (es 'Videojuegos' / ko '애니메이션' は狭幅で 2 行) ため
     「1 行に収める」では守れない。`grid-auto-rows: 1fr` はコンテナ高さが確定していないと
     内容サイズのままなので効かない → 折り返す幅で label に 2 行分を予約して揃える
     (下の max-width: 400px を参照)。 */
  margin: 0 auto;
}
/* ⚠ 旧 760px 段 (5 列 → 3 列) は既定が 3 列になったので撤去。2 列は経由させない
   (6 枚 = 2+2+2 で孤立はしないが 5 枚だと 2+2+1 で孤立する = ドメイン数に脆い)。
   次の段は 480px の 1 列 (下の狭幅ブロック)。 */
/* 🔴 選択カードは共有部品 `SelectButton` (`.ctl-select` = ui/shared/controls.css) になった。
   **見た目 (境界 / 面 / 選択の ✓ / 押下) は部品が持つ**ので、ここは**レイアウトだけ**を書く。
   ⚠ 同じ要素に `.ctl-select` と `.ob-domain-card` の両方が付く。**単一 class どうしだと
     どちらが勝つかは 2 つの stylesheet の読み込み順で決まる**ので、上書きする宣言は必ず
     **親を含めた selector** (`.ob-domain-grid > .ctl-select`) にして順序に依存させない。
   ⚠ 旧 `.selected` class と `::after` の ✓ は撤去 — 状態は `aria-checked` が単一の出所で、
     部品側の `[aria-checked='true']` が 色 + 面 + ✓ の 3 チャネルを出す (ART_DIRECTION §4)。 */
.ob-domain-grid > .ctl-select {
  /* grid-auto-rows: 1fr で伸びた分を上下に散らさず中央に置く */
  flex-direction: column;
  justify-content: center;
  padding: 1.2rem 0.6rem;
  text-align: center;
  user-select: none;
}
/* 🔴 ① ジャンルごとの色 (owner 指摘 2026-09-12)。**既存の `--t-domain-*` を引くだけ** —
   新しい色も新しい表も作らない (`core/tokens.css:92-107`・実体は軸色の流用)。
   ⚠ 色は**アイコンと左の細帯だけ**に載せる。面や文字色に載せると contrast 規約
   (`CSS_COLOR_RULES §2`) を 9 色ぶん検証することになり、選択状態 (枠 + 面 + ✓) とも競合する。 */
.ob-domain-card { position: relative; }
.ob-domain-card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  border-start-start-radius: inherit; border-end-start-radius: inherit;
  background: var(--ob-domain-accent, transparent);
}
.ob-domain-icon { color: var(--ob-domain-accent, var(--t-fg)); }

.ob-domain-card-body {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}
.ob-domain-icon { font-size: 2rem; line-height: 1; display: flex; justify-content: center; }
/* ⚠ 折り返しの有無は言語で変わる (ja/zh は 2〜3 字、es 'Videojuegos' は 11 字)。
   「1 行に収める」は ja でしか成り立たないので、寸法は ja/zh 基準に取り、
   折り返しが起きる幅では下の media query で高さを揃える / 行レイアウトへ逃がす。 */
.ob-domain-name {
  /* 短縮ラベル (DOMAIN_LABELS_SHORT) 前提。 */
  font-size: 0.95rem; font-weight: 600; margin-top: 0.4rem;
  letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.ob-domain-count { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }

.ob-counter { text-align: center; color: var(--muted); margin-top: 1rem; font-size: 0.9rem; }

/* ── Step 1: Works grid (Pinterest-like) ──────────────────── */
.ob-domain-section {
  margin-bottom: 0.5rem;
  background: var(--t-bg-elev);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.ob-domain-section.collapsed { background: transparent; }
.ob-domain-section.expanded { border-color: var(--dom-ac, var(--accent)); }
.ob-domain-section-head {
  display: flex; align-items: center; gap: 0.6rem;
  /* 🔴 D-1 — tap 床は **明示する**。padding だけだと実効 ~45px でも保証が無く、書体や
     icon サイズを 1 段変えただけで 44px を割る (媒体を問わず常時・media query に閉じない)。 */
  min-height: var(--t-tap-min);
  margin: 0; padding: 0.8rem 1rem;
  width: 100%; cursor: pointer; background: none; border: none;
  font-family: inherit; color: var(--fg);
  transition: background 0.15s;
}
.ob-domain-section-head:hover { background: var(--t-bg-elev); }
.ob-domain-section-head h2 { font-size: 1rem; margin: 0; font-weight: 600; color: var(--fg); flex: 1; text-align: left; }
.ob-domain-section-head .count { font-size: 0.8rem; color: var(--muted); }
.ob-toggle-arrow { font-size: 1.1em; color: var(--muted); margin-left: 0.3em; }
.ob-domain-section .ob-works-grid { padding: 0.6rem 0.8rem 0; }
.ob-domain-section .ob-more-btn { margin: 0.4rem 0.8rem 0.8rem; }

.ob-quick-badge {
  display: inline-block; background: var(--accent); color: var(--t-on-accent);
  padding: 0.15em 0.6em; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; vertical-align: middle;
}

/* 🔴 `.ob-time-estimate` (「1 分で完了」) は撤去 — owner 裁定 2026-08-31 で
   **時間の約束を copy からも KPI からも撤回**した (ONBOARDING_DESIGN §2)。 */
/* 🔴 v2 ではここが **主要な信号**になった (P-2: 主行動が先頭ジャンルを名指しする)。
   旧は右寄せ 0.82rem の `--t-muted` = 補助テキストの見え方で、下の一覧より弱かった。
   ⚠ **一覧より強く**する — 「あと何件か」が最初に読まれる行。 */
.ob-finish-hint {
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  color: var(--t-fg);
  text-align: start;
  transition: color 0.2s;
}
.ob-finish-hint.done { color: var(--t-accent); }

.ob-works-grid {
  /* 🔴 カード間は 10px (owner 指摘 2026-09-13「カード同士の間が結構開いてる」)。 */
  display: grid; gap: 10px;
  /* 🔴 **最低 3 列** (owner 指示 2026-09-25「2 列になっているけど、3 列にして」)。
     最小幅を「96px」と「3 等分 (100% − gap 2 本) / 3」の小さい方にする — 広い幅では従来どおり
     96px で列が増え、狭い幅 (360 級) ではカードが 96px より細くなって 3 列を保つ。
     ⚠ mobile は `apps/mobile/src/ui/onboarding/works-grid.ts` の `WORK_GRID_MIN_COLS` が同じ規則。
     ⚠ gap (10px) を変える時は下の `20px` (= gap × 2) も一緒に変える。 */
  grid-template-columns: repeat(auto-fill, minmax(min(96px, calc((100% - 20px) / 3)), 1fr));
}
/* カバー統一 (owner 指示 2026-08-19): 共有 WorkCover (2:3・fit 判定・黒下地・ドメイン
   アイコン fallback) + 下にテキスト部の縦積み。旧の全面背景 + スクリム + 白文字は撤去 —
   テキストはカバー下の通常領域に出るため、スクリム前提の contrast hardcode も不要になる。 */
/* 🔴 domain card と同じ理由で `SelectButton` (`.ctl-select`) に載る。ここはレイアウトだけ。
   ⚠ 上書きは親つき selector で (読み込み順に依存させない)。 */
.ob-works-grid > .ctl-select {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 0;               /* カバーが高さを決める (44px の下限は不要) */
  overflow: hidden;
  user-select: none;
  /* 🔴 **カードの面 = カバー画像そのもの** (owner 指示 2026-09-13) — 共有 `SelectButton` の
     枠と下地をこの面では剥がす。⚠ 選択の ring は `box-shadow: inset` なので**枠を消しても
     レイアウトは動かない** (下の `[aria-checked]` 規則がそのまま効く)。
     ⚠ 44px の床は既に `min-height: 0` で外してあり、当たりは
     `minmax(96px,1fr) × aspect-ratio 2/3` の高さ (144px) が支えている。 */
  border: 0;
  background: none;
  border-radius: var(--t-r-sm);
}
/* 🔴 ⑦ 選択状態の視認性 (owner 指摘 2026-09-12)。
   共有 `SelectButton` は **枠 + 面 + ✓** の 3 チャネルを持つが、この面はカードの
   **大半がカバー画像**なので面の色が画像に隠れ、1px の枠と小さな ✓ しか残らない
   — カバーが明るい作品ほど埋もれる (owner 実機指摘)。
   ⇒ この面だけ **① 内側 ring を 2px ② カバーを沈める ③ ✓ を一回り大きく** して差を作る。
   ⚠ **`border-width` は変えない** — 1px→2px にすると内容が 1px ずつ動く。`box-shadow` の
     inset ring なら **レイアウトを動かさずに**太さだけ足せる。
   ⚠ 共有部品の規則は触らない (他面の選択表現を巻き込まない)。
   ⚠ 参照 = Appllama の Eat This Much (画像 grid の複数選択 = 色枠 + 右上のチェック丸)。 */
/* 🔴 **輪郭は `::after` で出す** (Final 2026-09-13)。
   ⚠ 🗄️ 旧は `box-shadow: inset` だったが、**inset は要素の背景レイヤに描かれる**ので、
     子の `WorkCover` (`<img position:absolute; inset:0>`) が載るとカバーの範囲で**隠れる**。
     カバーは カードのほぼ全面なので、実質「輪郭が出ていない」状態だった
     (明度落としと ✓ だけが出ていたので気づきにくい)。
   ⚠ `.ctl-select__mark` は `z-index` を持たない絶対配置なので、輪郭 (`::after`) より
     **後ろに来ないよう** z-index を与える。 */
.ob-works-grid > .ctl-select { position: relative; }
/* ⚠ 共有 `SelectButton` は選択時に**面の色** (`--t-active-bg`) も足すが、この面は
   カードの大半がカバーなので、見えるのは**タイトルの下に残る帯**だけになる
   (= 「カードの面 = カバー」の仕様に対する chrome の残り)。選択は輪郭 + 明度 + ✓ の
   3 チャネルで足りているので、面の色はこの面では出さない。 */
.ob-works-grid > .ctl-select[aria-checked='true'] { background: none; }
.ob-works-grid > .ctl-select[aria-checked='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--t-accent);
  border-radius: inherit;
  pointer-events: none;
}
.ob-works-grid > .ctl-select .ctl-select__mark { z-index: 1; }
.ob-works-grid > .ctl-select[aria-checked='true'] .ob-work-cover {
  /* 画像を沈めて「選んだ」を面で伝える。⚠ 色を被せず**明度だけ**落とす
     (色被せはカバーの色調で効き方が変わる)。 */
  filter: brightness(0.62);
}
.ob-works-grid > .ctl-select .ob-work-cover { transition: filter 0.15s; }
.ob-works-grid > .ctl-select[aria-checked='true'] .ctl-select__mark {
  transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  .ob-works-grid > .ctl-select .ob-work-cover { transition: none; }
}

/* 共有 .work-cover (fluid) — カード内では角丸をカード側 (overflow hidden) に任せる */
.ob-work-card .ob-work-cover { width: 100%; border-radius: 0; }
.ob-work-body {
  /* 🔴 **タイトルの左端はカバーの左端に揃える** (owner 指示・参照どおり左右 0)。
     上下も参照の「カバー → タイトル 10px」に合わせる。 */
  display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto;
  padding: 6px 0 0;
}
/* タイトル 1 行のみ (owner 指示 2026-08-19 — 旧 [mNN] ID と西暦の行は撤去)。
   nowrap/ellipsis は共有 .work-title (WorkTitle) が持つ — ここは書体だけ */
.ob-work-name {
  font-size: 0.82rem; line-height: 1.25; font-weight: 500;
}

/* 🔴 ⑥ quick 段の下端を縮める (owner 実機指摘 2026-09-12)。
   実測 = 旧 `.ob-step1-status` が **256.03px = viewport 844 の 30.3%** を占め、
   作品 grid は **312.98px (37.1%)** しか見えていなかった。
   ⚠ **文言は落とさず畳む** — 「正しさではない」の添え書き (付録 C-3) は意図が要るので
     `<details>` に入れて既定で閉じる。次の一手は状態行へ同居させて 2 行 → 1 行。 */
/* 🗄️ 2026-09-12: quick 段から「この帯について」の折り畳みと「このまま進む」を
   撤去したので、その 2 要素だけを詰めていた規則も併せて撤去した。 */
/* ⚠ 下端のボタンの間隔も詰める。 */
.ob-status-tight .ob-step1-actions { margin-top: var(--t-sp-3); }

/* 🔴 **「もっと見る」で画面を動かさない** (owner 逐語 2026-09-19)。`Step1Works.tsx` の
   `window.scrollTo` 補正を外しただけでは、Chromium の scroll anchoring が
   **2 domain 以上 × ボタンが画面上端付近**で実測 +1126px 跳ばす。
   ⚠ **当て先は section** — `.ob-works-grid` に当てると grid がアンカー候補から外れ、
     挿入点より下が選ばれて**全条件 1126px 跳ぶ** (実測・各条件 2 回で一致)。
     section に当てると 1/2/3 domain × ボタン上端/中央/下端 × 390/1440 の全 18 条件で 0px。 */
.ob-domain-section { overflow-anchor: none; }

.ob-more-btn {
  /* 🔴 D-1 — 実効 ~32px だったので tap 床を張る (常時・media query に閉じない)。
     ⚠ `display: block` のままだと床で伸びた分だけラベルが上へ寄る (行送りは中央に来ない)
       ので flex + 中央揃えにする。`padding` は変えない (見た目の余白は現行のまま)。 */
  display: flex; align-items: center; justify-content: center;
  min-height: var(--t-tap-min);
  width: 100%; margin-top: 0.8rem;
  /* 🔴 **目立たせる** (owner 選択 2026-09-19・案 B)。
     🗄️ 旧: 破線 border + `--muted` の文字 = 面が無く、押せるものに見えていなかった
       (owner 逐語「もっと見るボタンを目立たせて」)。
     ⚠ 色は増やさない — 面は `--t-fg` の薄い mix で作る (`ART_DIRECTION` = 無彩・色は意味にだけ)。
     ⚠ **主行動と同じ accent 塗りにはしない** — Step1 の「次へ」が `ctl-btn--primary`
       (= `--t-accent` 塗り) なので、同じ強さの塗りが 1 画面に 2 つになる。 */
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid transparent;
  color: var(--t-fg); padding: 0.5rem; border-radius: var(--t-r-md);
  cursor: pointer; font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  transition: background-color var(--t-trans-fast), border-color var(--t-trans-fast);
}
.ob-more-btn:hover { background: var(--t-active-bg); border-color: var(--t-border-strong); }

.ob-step1-status {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--card-border);
  /* ⚠ gutter は `--ob-gutter` から (:9-11 の契約)。直書きだと ≤480px で 8px はみ出す —
     `.ob-actions` と同じ型 (2026-08-30 の Final review で両方まとめて是正)。 */
  padding: 1rem var(--ob-gutter); margin: 2rem calc(-1 * var(--ob-gutter)) 0;
  /* 🔴 v2 は「名指しの不足数 → 全ジャンルの一覧 → (上限の理由) → 主行動」の縦積み。
     旧の分数カウンタ (`.count-box`) は撤去した — `18 / 10` は上限と誤読される (P-9)。 */
  display: flex; flex-direction: column; align-items: stretch;
  row-gap: 0.5rem;
  z-index: 10;
}
/* 上限の理由 + 次の一手 (ART_DIRECTION §4c の型)。 */
.ob-cap-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  font-size: 0.82rem; color: var(--t-fg-soft);
}
.ob-cap-next { color: var(--t-fg); font-weight: 600; }
.ob-step1-actions { display: flex; }
/* 🔴 **tier の段の固定 dock の中では左右の負の margin を外す** (WEB-UX-AUDIT-START)。
   ⚠ 上の `margin: 2rem calc(-1 * var(--ob-gutter)) 0` は、作品の段で `.ob-main` の padding を打ち消して
     帯を本文の端まで伸ばすための物。dock (`.tl-pool-dock` = `left: 0; right: 0` の fixed・`tier-board.css`) の
     中では打ち消す padding が無いので、**viewport の外へ gutter 分ずつはみ出していた** (実測 1280 で
     left -24 / width 1328 = 「あと N 件」が左端 0px に張り付き、次へのボタンの左右が切れる)。
   ⚠ padding の gutter は残す (= 文字とボタンが dock の中で gutter 分内側に入る)。作品の段は不変。 */
.tl-pool-dock > .ob-step1-status { margin-left: 0; margin-right: 0; }

/* 🔴 復元セッションの「最初からやり直す」(canonical §4 — 復元と不可分)。
   ⚠ **主行動より弱く**置く — 破壊操作なので、次へ (塗り) と競わせない。
   ⚠ 2 段目 (確認) は同じ行に畳む。狭幅で折り返しても押せる高さは部品が持つ。 */
.ob-restart {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.2rem 0.5rem;
  justify-content: center;
}
.ob-restart-ask {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.82rem;
  color: var(--t-fg-soft);
}

/* 🗄️ Step 2 の軸質問 (`.ob-quiz*`) は v2 で **quick 追加へ置換**され、規則ごと撤去した
   (canonical §2.1)。quick 段は `.ob-works-grid` を使う (🗄️ `.ob-meter*` は 2026-09-13 撤去)。 */

/* ── Step 3: Transition ───────────────────────────────────── */
.ob-transition {
  min-height: 60dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
}
.ob-transition h2 {
  font-size: 1.3rem; color: var(--accent); margin: 0;
  letter-spacing: 0.05em; animation: pulse 1.5s ease infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}
.ob-transition .sub { color: var(--muted); }

/* ── Footer ───────────────────────────────────────────────── */
.ob-footer {
  text-align: center; padding: 2rem 1rem 1.5rem;
  border-top: 1px solid var(--card-border); margin-top: 2rem;
}
.ob-footer p { margin: 0; }

/* Mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  body.onboarding-body { --ob-gutter: 1rem; }
  .ob-main { padding-bottom: 2rem; }
  /* 🔴 狭幅でも**最低 3 列** (owner 指示 2026-09-25) — 旧は最小幅 95px の上書きで、360 級では 2 列に
     落ちていた。規則は上の `.ob-works-grid` と同じ式 (最小幅 = 95px と 3 等分の小さい方)。 */
  .ob-works-grid { grid-template-columns: repeat(auto-fill, minmax(min(95px, calc((100% - 20px) / 3)), 1fr)); }
  /* 🔴 3 列だとカード内幅が 58〜72px しか無く、ラテン語圏・韓国語の単語が**語中で割れる**
     (実測: es 'Videojuegos' → 'Videojue/gos'、ko '애니메이션')。件数も 2 行に折れていた。
     この幅では列を諦めて**全幅の行レイアウト**へ切替える — label に 250px 以上を渡せるので
     どの言語でも 1 行に収まり、語中破断も高さの段差も原理的に起きない。
     ⚠ 1 列は「最終行 1 枚」だが全行が 1 枚なので孤立ではない (gate の条件は cols > 1)。 */
  .ob-domain-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .ob-domain-grid > .ctl-select { padding: 0.75rem 0.9rem; text-align: left; }
  .ob-domain-card-body {
    flex-direction: row; align-items: center; gap: 0.8rem;
  }
  .ob-domain-icon { font-size: 1.4rem; flex: 0 0 auto; }
  .ob-domain-name { margin-top: 0; }
  /* 件数は右端へ。✓ と重ならないよう右に 1rem 空ける */
  .ob-domain-count {
    margin-top: 0; margin-left: auto; padding: 0 1rem 0 0.5rem; white-space: nowrap;
  }
}
/* ⚠ 320px では header の中身が viewport を 40px 超えていた (fr 'Se connecter' /
   es 'Iniciar sesión' が長い)。他ページは narrow で nav ごと drawer へ畳まれるが、
   onboarding header は inline のまま。**実際に溢れる幅だけ** wordmark を落とす
   (360px 超は全言語で収まるので、常用の phone 幅ではブランドを残す)。 */
@media (max-width: 360px) {
  .ob-brand { font-size: 0; gap: 0; }
  .ob-brand::before { width: 22px; height: 22px; }
}

/* 🗄️ tier 段の pool の独自 grid (`.ob-tier-pool { grid-template-columns: … 78px … }`) は
   **2026-09-13 に撤去**。pool は `/tier/` と同じ `.tl-pool-grid.tl-pool-scroll` + `TierWorkChip`
   を読む形にしたので、列幅も横スクロールも**共有側が持つ** (1 面 2 実装の解消)。
   ⚠ `.ob-tier-pool` の class 自体は e2e / test の目印として残している (見た目は持たない)。 */

/* 🔴 quick 段の**ドメインごとの節**の見出し (2026-09-13 の flow 改定)。
   ⚠ Step 1 の accordion 見出し (`.ob-domain-section-head h2`) と**同じ大きさ**にする —
     同じ「ドメインの節」なのに 2 面で別の重さだと、同じ構造に見えない。
   ⚠ 節そのものは Step 1 の `.ob-domain-section.expanded` を**そのまま読む** (新設しない)。 */
.ob-quick-domain {
  margin: 0 0 var(--t-sp-2);
  font-size: 1rem; font-weight: 700; color: var(--t-fg);
}

/* 🔴 onboarding は **ボトムナビを出さない** (AppShell の `variant='onboarding'`) ので、
   共有 dock の既定 offset (`--t-bnav-h`) を打ち消す。⚠ 打ち消さないと**下端に 53px の
   空きが開く** (ナビが在る `/tier/` `/tierlist/` と同じ数字で浮く)。 */
.ob-tier { --tl-dock-offset: 0px; }