/* TASTEOME /discover/ Cross-Domain Recommendations (Sprint 3 Day 6) */

/* ── Container (2026-09-06 batch 1 `/discover/` 案 A) ─────────────────────
   旧 `.hub-main` (`pages/identity-hub.css:33`) を `/me/` `/profile/` と共有していたため、
   /discover/ は自動的にツール幅 1100 に落ちていた。/discover/ は**読み物 / 一覧**の型なので
   container を割り、本文幅だけ `--t-page-max` (960) にする (型の分類の正 = `core/tokens.css`)。
   ⚠ **幅以外は `.hub-main` と同値**にする — 見た目の差を幅の 1 点に閉じ込めるため
     (flex / width / margin / padding、および mobile の `padding-bottom: 5rem`)。
   ⚠ `body.tasteome` の縦 flex に `#react-root { display: contents }` で接続されるので、
     `flex: 1` が無いと短い loading / empty 状態で footer が浮く (`pages/discover/index.html`)。
   ⚠ 4rem / 5rem は spacing token に段が無いので `.hub-main` と同じ実値のまま
     (ここで新しい段を足すと token 側の 1 source が崩れる)。 */
.dc-main {
  flex: 1;
  max-width: var(--t-page-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--t-sp-4) var(--t-sp-6) 4rem;
}
/* `.hub-main` の mobile 追加 (identity-hub.css:275-277) と同値 — sticky bar 分の余白。 */
@media (max-width: 768px) {
  .dc-main { padding-bottom: 5rem; }
}
/* 🔴 390 の左右余白 (2026-09-06 batch 1 `/discover/` 案 A) — 板の `.page` は `padding: 14px`。
   最寄りの token = `--t-sp-4` (16)。⚠ 上下 (`--t-sp-4` / 4rem) と 768 の
   `padding-bottom: 5rem` は上書きしない (左右だけを指定する)。
   ⇒ 390 で rail の scrollport = 390 − 16×2 = 358。カード 166×2 + gap 10 = 342 が収まり、
     3 枚目は `166 + 10 + 166 + 10 = 352` から始まるので **6px 覗く** (= 続きがある手がかり)。
   ⚠ gap は 2 本ある (card | gap | card | gap | card) — 1 本しか引かないと 16px と誤算する。 */
@media (max-width: 600px) {
  .dc-main { padding-left: var(--t-sp-4); padding-right: var(--t-sp-4); }
}

/* hardcode-ok-begin: dc-hero は type-grad backdrop 上の brand 演出 (white 系 ALLOWLIST 済) */
.dc-hero {
  position: relative;
  padding: 2rem 1.5rem;
  border-radius: 16px;
  /* type 色の単色 backdrop (white 系文字前提)。実値は JS が --type-hero-bg で渡す
     (app/profile/type-visual.ts の typeHeroBackground — 薄い文字でも AA を満たす暗さへ寄せた値)。 */
  background: var(--type-hero-bg, #110021);
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  overflow: hidden;
}
.dc-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.dc-hero-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem; letter-spacing: 0.18em;
  opacity: 0.9; font-weight: 600;
}
.dc-hero-title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700; line-height: 1.3;
}
.dc-hero-title strong { font-style: italic; }
.dc-hero-sub { margin: 0 auto 0.7rem; max-width: 32em; opacity: 0.9; line-height: 1.5; }
.dc-hero-method { margin: 0; opacity: 0.9; }
.dc-hero-method a { color: inherit; text-decoration: underline; }

/* hardcode-ok-end */
/* 🔴 節の箱を外す (2026-09-06 batch 1 `/discover/` 案 A) — 採択板の domain 節は
   margin だけで border / 背景 / padding を持たない (箱があるのは hero だけ)。
   ⚠ 箱を残したままだと 390 で `.dc-main` の左右 padding に節の padding 22.4×2 + border が
     二重にかかり、rail の scrollport が 295 まで落ちて板の「カード 2 枚」が入らなかった (実測)。
   🔴 面の分離は罫線が担う (`docs/design/ART_DIRECTION.md §0`「カードと影の多用はしない。
     箱で囲うのは、それ自体が独立した単位である時だけ」) — **節を囲わず**、節と節の間に
     hairline を 1 本だけ引く。
   ⚠ 色は罫線用の `--t-rule` を使う (箱の縁の `--t-border` とは役割が違う。宣言と
     根拠 = `core/tokens.css` の「Rule (面を区切る罫線)」節)。
   ⚠ 板の節間 18 は spacing token に段が無いので、最寄りの `--t-sp-5` (20) を罫線の
     上下に対称に置く (gap 20 / padding-top 20)。 */
.dc-sections { display: flex; flex-direction: column; gap: var(--t-sp-5); margin-bottom: 2rem; }

.dc-domain-section + .dc-domain-section {
  border-top: 1px solid var(--t-rule);
  padding-top: var(--t-sp-5);
}
.dc-domain-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem;
}
.dc-domain-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.dc-domain-icon { font-size: 1.2em; margin-right: 0.3em; }
/* 🔴 タップ目標 (2026-09-06 batch 1 `/discover/` 案 A / C-3) — 実測 可変×16px。
   「{dom} を探索 →」は節から一覧へ渡る**一次動作**なので `--t-tap-min` (44)。
   ⚠ `@media` の中ではなく**常時**床にする (C-3 の是正の本体)。
   ⚠ 親 `.dc-domain-head` の `align-items: baseline` は残す — inline-flex の baseline は
     中の text run の baseline なので、h2 と文字のベースラインは今までどおり揃う
     (増えるのは行の高さだけ)。書き方の前例 = `pages/search.css:123` の `.sr-tab`。 */
.dc-domain-head a {
  color: var(--accent, var(--t-accent));
  min-height: var(--t-tap-min);
  display: inline-flex; align-items: center;
}
.dc-empty { margin: 0; padding: 0.5rem 0; }

/* v=112 二段表示 (RECOMMENDATION_ENGINE §7.3): tier 見出し + tier1 省略時の注記 */
.dc-tier-head {
  margin: 0.9rem 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--t-fg-soft);
}
.dc-tier-head:first-of-type { margin-top: 0.2rem; }
.dc-tier-note {
  margin: 0.2rem 0 0.7rem;
  padding: 0.45rem 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--t-fg) 18%, transparent);
  border-radius: 8px;
  color: var(--t-dim);
}

/* v=286 越境行 (taste bridge): 他ドメインの好み → このドメインの作品 (折りたたみ) */
.dc-bridge {
  margin-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--t-fg) 10%, transparent);
  padding-top: 0.7rem;
}
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 295×30.6px。節内の**副次**操作なので
   `--t-tap-sub` (32)。⚠ 常時床 (`@media` に閉じない)。 */
.dc-bridge-toggle {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  min-height: var(--t-tap-sub);
  background: transparent; border: none; padding: 0.3rem 0;
  cursor: pointer; font: inherit; text-align: left; color: var(--t-fg-soft);
}
.dc-bridge-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  white-space: nowrap;
}
.dc-bridge-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-bridge-chevron { color: var(--t-dim); flex-shrink: 0; }
.dc-bridge-toggle:hover .dc-bridge-label { color: var(--t-fg); }
.dc-bridge-body { margin-top: 0.3rem; }
.dc-bridge-row-head {
  display: flex; align-items: center; gap: 0.35rem;
  margin: 0.85rem 0 0.5rem;
  font-size: 0.75rem; font-weight: 600; color: var(--t-dim);
}

/* 🔴 1 段 rail (2026-09-06 batch 1 `/discover/` 案 A) — 旧 grid
   (`auto-fill minmax(220px,1fr)` + 600px で 1 列) は 390 で 1 枚ずつの縦積みになり、
   節あたり 8 枚が縦を食っていた。板の型は **横 1 列の rail**。
   ⚠ 横スクロールの作法は新規に発明しない — 既存 rail 2 本
     (`pages/identity-hub.css` の `.hub-slots` / `apps/web/src/ui/tierlist/discover.css`
     の `.tld-rail`) に揃える: proximity snap + touch 慣性 + 細い scrollbar。
   ⚠ `overflow-x: auto` は `overflow-y` も auto になるので `hidden` を明示
     (`.dc-mood-chips` と同じ理由 — カードの hover 影で縦バーが出る)。
   ⚠ overflow 要素の padding-left はスクロール中に効かないので、左右の余白は
     container (`.dc-main`) が持つ。ここは snap 余白と右端の余白だけ (`.tld-rail` 同値)。 */
/* 🔴 rail 1 本ぶんの器 = 横スクローラ + **その直下**の説明パネル (2026-09-19)。
   パネルを `.dc-cards` の中へ戻さない — 中は `overflow-x: auto` で、本文の幅がカード幅に
   縛られる (実測: カード 166px で列 99px / 4 行・107px で 40px / 6 行 = 読めない)。 */
.dc-rail { display: block; }
/* 開いているカードを**色だけに依存せず**示す (どのカードの説明かの対応)。 */
.dc-card.is-explained { outline: 2px solid var(--t-fg); outline-offset: 2px; }
/* パネル冒頭の作品名 (どのカードの説明か)。 */
.rec-expl-work {
  margin: 0 0 0.3rem; font-weight: 700; font-size: 0.82rem; color: var(--t-fg);
}

.dc-cards {
  display: flex;
  /* 🔴 カード間は 10px (owner 指摘 2026-09-13)。⚠ カード幅と**セット**で
     「390 で 2 枚 + 端が切れる」を決めている — gap を戻したので幅も 166 に戻す。 */
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 2px; scroll-padding-right: 2px;
  padding: 2px 0.25rem 6px 0;
  /* 🔴 stretch にしない (Final review 2026-09-06) — 既定の stretch だと ⓘ で内訳パネルを
     開いた 1 枚に合わせて **同じ rail の全カードが伸び**、開いていない側が空箱になる
     (旧 grid は 600px 以下が 1 列だったのでこの症状が出なかった)。 */
  align-items: flex-start;
}
.dc-cards::-webkit-scrollbar { height: 4px; }
.dc-cards::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 2px; }

/* 🔴 rail のカード (板 A: 幅 168 / ≥1080 は 200・padding 8・border 1・radius 10)。
   幅と padding は **面固有の layout 値**なので discover.css のローカル値で持つ。
   🔴 `min-width: 0` が横 overflow の根治点 — これが無いと flex item の automatic
      minimum size が min-content になり、`.work-title { white-space: nowrap }`
      (`components/work-cover.css`) の折り返せないタイトルが page 全体を押し広げる
      (実測: 390 で ja +61px / en +73px)。
   ⚠ `min-height` は落とす (板は 2 段の小カード)。高さは中身なり
     (rail は `align-items: flex-start` = 揃えない・理由は `.dc-cards` の注記)。 */
.dc-card {
  /* 押せる面 (`.dc-card-open::after`) の containing block。 */
  position: relative;
  /* 🔴 **107** (owner 裁定 2026-09-19 = 板 案 C「カバー主体・3 枚見え」)。
     🗄️ 旧 166 = 2 枚見え。カバーが 40px の行型カードだった頃の幅。
     ⚠ **gap は枚数分ある** (`card | gap | card | gap | card | gap | …`) — 1 本しか引くと誤算する。
       390 の scrollport 358 に対し `358 − (107×3 + 10×3) = 7px` 覗き (**実測 7px**)。
       旧 166 も同じ式で `358 − (166×2 + 10×2) = 6px` (**実測 6px**) — 覗きは同等に保たれる。
     🔴 **この節の旧コメントは「覗き 16px」と誤記していた** (2026-09-19 実測で訂正)。
       正しい値は file 冒頭 `:24-29` が既に書いていた (「1 本しか引かないと 16px と誤算する」)。 */
  flex: 0 0 107px;
  min-width: 0;
  scroll-snap-align: start;
  /* 🔴 **カードの面 = カバー画像そのもの** (owner 指示 2026-09-13) — 下地 / 枠 / 内側の
     余白を剥がす。⚠ カード幅 166px は**覗き 16px の勘定で決まっている** (上の注記) ので
     動かさない — 変えるのは中身の chrome だけ。 */
  background: none;
  border: 0;
  border-radius: var(--t-r-sm);
  padding: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; flex-direction: column; gap: 0.4rem;
}
/* ≥1080 = カード 130 (案 C)。⚠ この帯は **rail 幅が可変** (1080:732 / 1440:912 実測) なので
   覗きを一定にできない (旧 200 も 1440 では 82px 覗いていた)。130 は板で owner が見た値。 */
@media (min-width: 1080px) {
  .dc-card { flex-basis: 130px; }
}
.dc-card:hover {
  background: var(--hover-bg, color-mix(in srgb, var(--t-accent) 12%, transparent));
  border-color: var(--accent, var(--t-accent));
  transform: translateY(-1px);
}
.dc-card-icon { font-size: 1.4rem; line-height: 1; }
/* カバー画像 + タイトルのヘッダ (v=250)。
   🔴 **カバーはカード幅いっぱい** (owner 裁定 2026-09-19 = 案 C)。高さは 2:3 が決める。
   🗄️ 旧: `display: flex` で `work-cover--s` (40px) を左に置き、右にタイトル + 年・著者の
      行型だった。size preset は JSX 側から外した (面固有の size class は作らず、幅はセルが
      決める)。⚠ 旧規則を残して後から上書きしない — 同詳細度で順序依存になる。 */
.dc-card-head { display: block; }
.dc-card-cover { width: 100%; }
.dc-card-titleblock { min-width: 0; }
/* タイトルは 1 行 ellipsis (中の .work-title が持つ) — 旧 2 行 clamp は撤去。
   ⚠ カードが 107px になったので字送りを詰める (0.84rem だと 6 文字で切れる)。 */
.dc-card-name {
  margin: 4px 0 0; font-size: 0.72rem; font-weight: 600; line-height: 1.3;
}
/* 🔴 押せる面はここ 1 つ (Final review 2026-09-06) — `<article>` に `role="button"` を
   付けると ARIA の children-presentational で中の button (📌 / ⓘ) が AT から刈り取られる。
   ⇒ 開く操作は**タイトルの button** が持ち、`::after` を card 全面へ広げて
   「カードのどこを押しても開く」を作る (stretched link の定型)。
   ⚠ この面より上に居るべき操作 (`.dc-card-actions` / `.rec-explanation`) は
     `position: relative` + `z-index` で必ず上へ出す — でないと押せなくなる。
   ⚠ 実タップ領域は card 全面 (166×約 190) で、要素の矩形 (タイトル 1 行) ではない。 */
.dc-card-open {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; min-width: 0;
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.dc-card-open::after { content: ''; position: absolute; inset: 0; z-index: 0; }
/* ⚠ padding を 0 にしたので **外向きの ring は rail の `overflow-x` で切れる** (Final 2026-09-13)。
   tier と同じく**内側**へ出す (`outline-offset: 0`)。 */
.dc-card-open:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 0; }
/* 🗄️ `.dc-card-meta` (年・著者) と `.dc-card-why` (理由 1〜2 行) は **2026-09-19 (案 C) に
   撤去** — カード面をカバーそのものにしたため、下段の chrome が作品より前に出ていた。
   理由は ⓘ の説明パネル (rail 直下) が引き続き持つ。 */
/* 🔴 操作 row (2026-09-06) — 📌 (`.dc-card-wishlist`) と ⓘ (`.rec-explain-btn`) を
   in-flow の 1 行に集める。
   ⚠ 絶対配置をやめた理由: カード幅が板の 168 になり、右上固定の 📌 がタイトル 1 行目の
     右端 32px を覆っていた (実測)。in-flow に降ろすとカードは約 40px 伸びるが、
     タイトルは全幅で 1 行 ellipsis に戻る (裁定どおり許容)。
   高さ = `--t-tap-sub` (32) は各 button 側が持つ。行間 = `--t-sp-2` (8) は副次 tap の
   裁定値とセット (`core/tokens.css` の `--t-tap-sub` 注記)。 */
.dc-card-actions {
  display: flex; align-items: center; gap: var(--t-sp-2);
  margin-top: var(--t-sp-2);
  /* `.dc-card-open::after` の面より上 (でないと 📌 / ⓘ が押せない)。 */
  position: relative; z-index: 1;
}
/* 内訳パネル (ⓘ で開く) も同じ理由で面より上へ — 中の「もっと見る」も押せる必要がある。 */
.dc-card .rec-explanation { position: relative; z-index: 1; }

/* ── Phase B-2: Wild card + Negative feedback ─────────────────── */
.dc-card.is-wild {
  background: color-mix(in srgb, var(--t-accent-warm) 7%, transparent);
  border-color: color-mix(in srgb, var(--t-accent-warm) 30%, transparent);
}
.dc-card.is-wild:hover {
  border-color: var(--t-accent-warm);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.dc-card-wild-badge {
  /* 🔴 2026-09-06: card 上部の in-flow から **操作 row の右** へ (Final review F2)。
     上部に積むと、このバッジを持つカードだけ約 26px 高くなり rail の下端が揃わなかった。
     ⚠ v=52 に absolute → in-flow へ変えた理由 (左上 icon との重なり) は、📌 が副次 row へ
       移ったこの形では起きない。⚠ 文言と色は不変。 */
  margin-left: auto;
  min-height: var(--t-tap-sub);
  display: inline-flex; align-items: center;
  /* 🔴 長い言語で行から溢れさせない — 実測 (390): 「驚き枠」47px / "Wild card" 66px に対し
     row の有効幅は 148px (166 − padding 16 − 📌 32 − ⓘ 32 − gap 8×2)。en は 2px 溢れ、
     fr の "Carte surprise" は約 27px 溢れる見込み。⇒ 縮められる flex item にして ellipsis で
     畳む (全文は `title` が持つ)。⚠ `flex-wrap` で折り返すと wild card のカードだけ背が
     高くなり、せっかく 1 種に揃えた rail の下端がまた割れる。 */
  min-width: 0; flex-shrink: 1;
  overflow: hidden; text-overflow: ellipsis;
  background: var(--t-accent-warm);
  color: var(--t-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  /* 既存 .dc-card の gap (0.4rem) と組合せて icon との spacing 自然に確保 */
}
/* v=101: 旧 .dc-card-negative (👎 dislike) を .dc-card-wishlist (📌) に置換。
   wishlist は positive action なので color は accent 系 (`is-on` = 登録済の面を濃くする)。 */
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 30.8×26px。card の**副次**操作なので
   `--t-tap-sub` (32)。中身 (📌) は inline-flex + center で箱の中央に置く
   (min-height だけだと上寄せになる)。
   🔴 2026-09-06: 絶対配置 (`position/top/right/z-index`) と既定 `opacity: 0`
     (hover / focus-within で 0.85 に出す) を撤去 — `.dc-card-actions` の in-flow に
     置く以上、既定で見えていないと行がただの空隙になる。touch には hover が無いので
     「hover で出す」は元々 mobile で機能していなかった。 */
.dc-card-wishlist {
  min-width: var(--t-tap-sub); min-height: var(--t-tap-sub);
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-fg) 14%, transparent);
  color: var(--t-fg);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dc-card-wishlist:hover {
  background: color-mix(in srgb, var(--t-accent) 22%, transparent);
  border-color: var(--t-accent);
}
.dc-card-wishlist.is-on {
  background: color-mix(in srgb, var(--t-accent) 28%, transparent);
  border-color: var(--t-accent);
  color: var(--t-fg);
}
.dc-card-actions > .dc-card-wishlist-badge:not(.dc-card-wild-badge + *) { margin-left: auto; }
.dc-card-wishlist-badge {
  /* 既に wishlist 登録済の rec に小 badge 表示 (操作 row の右・wild-badge と並ぶ)。
     ⚠ `margin-left: auto` は先に来る wild-badge が持つので、2 つ並ぶ時はこちらは付けない
       (両方に付けると間が開く)。単独の時のために `:first-child` で補う。 */
  min-height: var(--t-tap-sub);
  display: inline-flex; align-items: center;
  background: color-mix(in srgb, var(--t-accent) 28%, transparent);
  color: var(--t-fg);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--t-accent) 45%, transparent);
}

/* ── Phase 4B-1: Surprise me ───────────────────────────────── */
/* v=103: hero の 2 ボタン (おまかせ発見 + 別のおすすめ) を横並び */
.dc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 133×37px。hero の**一次動作**なので
   `--t-tap-min` (44)。inline-block のままだと min-height 分が下に余るので
   inline-flex + center にする (前例 = `pages/search.css:123` の `.sr-tab`)。 */
.dc-surprise-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--t-tap-min);
  padding: 0.6rem 1.3rem;
  /* hardcode-ok: hero は theme 非依存の暗色 backdrop — 前景は hero に対して決める */
  background: #ffffff;
  border: none;
  /* hardcode-ok: 白面の上の暗 ink (旧 --t-on-accent は light theme で白 = gold 面に 2.09:1) */
  color: #1a1d2b;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--t-shadow-md);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dc-surprise-btn:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-lg); }

/* v=103: 別のおすすめ (手動シャッフル) — surprise より控えめな secondary 見た目 */
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 135×39px。hero の**一次動作**なので
   `--t-tap-min` (44)。`.dc-surprise-btn` と同じ書き方。 */
.dc-shuffle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--t-tap-min);
  padding: 0.55rem 1.15rem;
  /* hardcode-ok: 暗い hero 上の secondary 面 (theme 追随だと light で hero と同化する) */
  background: rgba(255,255,255,0.08);
  /* hardcode-ok: 暗い hero 上の UI 境界 (theme 追随だと light で消える) */
  border: 1px solid rgba(255,255,255,0.7);
  /* hardcode-ok: 暗い hero 上の前景 — var(--t-fg) 追随は light theme で 1.23:1 だった */
  color: #ffffff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.dc-shuffle-btn:hover {
  transform: translateY(-2px);
  /* hardcode-ok: 暗い hero 上の hover 面 (theme 追随だと light で hero と同化する) */
  background: rgba(255,255,255,0.16);
  /* hardcode-ok: 暗い hero 上の hover 境界 */
  border-color: rgba(255,255,255,0.85);
}
.dc-shuffle-btn:active { transform: translateY(0); }

.dc-surprise-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.dc-surprise-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}
.dc-surprise-dialog {
  position: relative;
  max-width: 460px; width: 100%;
  background: var(--t-surface);
  border: 1px solid color-mix(in srgb, var(--t-accent-warm) 30%, transparent);
  border-radius: 14px;
  padding: 1.8rem 1.4rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  color: var(--t-fg);
  text-align: center;
}
.dc-surprise-close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: transparent; border: none;
  color: var(--t-muted, #8a8fa3);
  font-size: 1.4rem; cursor: pointer;
}
.dc-surprise-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--t-accent-warm) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent-warm) 35%, transparent);
  color: var(--t-accent-warm);
  font-size: 0.75rem; font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}
.dc-surprise-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}
.dc-surprise-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 0.3rem; flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.dc-surprise-emoji { font-size: 1.4rem; }
.dc-surprise-why {
  background: var(--t-bg-elev);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin: 0.8rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.dc-surprise-actions {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.dc-surprise-btn-go {
  display: inline-block;
  background: var(--t-accent-grad);
  color: var(--t-on-accent); text-decoration: none;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
}
.dc-surprise-btn-again {
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
  border: 1px solid var(--t-border-strong);
  color: var(--t-fg);
  font-family: inherit;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
}

/* ─── Phase 4B-2: Mood bar ────────────────────────────────────────────── */
.dc-mood-bar {
  margin: 1.2rem auto 1.8rem;
  max-width: 920px;
  padding: 0.9rem 1.1rem 1rem;
  /* 不透明の面 (CSS_COLOR_RULES の浮遊面と同じ)。旧 `--t-bg-elev` は dark で rgba 4% の半透明で、
     下の chip 列の地色も半透明になり、chip-scroll の影を覆えなかった (右端に色差 50・2026-09-26)。 */
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 14px;
}
.dc-mood-head {
  display: flex; align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.dc-mood-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t-fg, #e8eaf2);
}
.dc-mood-hint {
  font-size: 0.7rem;
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  color: var(--t-muted);
  flex: 1;
}
.dc-mood-clear {
  font-family: var(--t-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--t-muted);
  background: transparent;
  border: 1px solid var(--t-border-strong);
  border-radius: 4px;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
  transition: all 0.15s;
}
.dc-mood-clear:hover {
  color: var(--t-fg);
  border-color: color-mix(in srgb, var(--t-fg) 30%, transparent);
}
/* 🔴 1 段 + 横スクロール (2026-09-06 batch 1 `/discover/` 案 A §6.1-2「chip は 1 段・
   横スクロールで逃がす」) — 390 では `flex-wrap: wrap` で 2 段以上に折り返し、mood bar
   だけで縦を食っていた。**新しい UI 型を持ち込まず**、既に `/search/` で使っている
   `pages/search.css:19-45` の `.sr-tabs` (両端 scroll shadow + scrollbar 非表示) を
   そのまま横に適用する。
   ⚠ 影の下地色は**この行が乗る面**の色 = `.dc-mood-bar` の `--t-surface` を使う
     (shared/css で色 hardcode は禁止 — `docs/reference/CSS_COLOR_RULES.md`)。
   ⚠ scrollbar を隠してよいのは scroll shadow が「まだ続きがある」手がかりを担うから。
     shadow (background-image) と `scrollbar-width` を一緒に消さないこと。
   ⚠ `overflow-x: auto` は `overflow-y` も auto にするので、chip の影で縦スクロールバーが
     出ないよう `hidden` を明示する (`.sr-tabs` と同じ理由)。 */
.dc-mood-chips {
  /* ⚠ 送りの機構は共有 `components/chip-scroll.css` (`chip-scroll` class) が持つ。
     🔴 **地色だけ面側で渡す** — 影のグラデーションの下地は「**この行が乗る面**の色」で
       なければ端に違う色の帯が出る。この行は `.dc-mood-bar` の上に乗るので同じ `--t-surface`。
       🔴 **半透明の値を渡さない** — 下の影を覆えず、溢れていない列でも右端に影が残る。 */
  --chip-scroll-bg: var(--t-surface);
  /* 🔴 副次 tap の行間 8 (`--t-tap-sub` とセットの裁定値)。旧 0.4rem (6.4px) は 8 未満。 */
  gap: var(--t-sp-2);
}
/* 🗄️ `::-webkit-scrollbar` の非表示は utility が持つ (2026-09-19 に集約)。 */
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 88〜124×31.6px。**副次** chip なので
   `--t-tap-sub` (32)。⚠ 常時床 (`@media` に閉じない)。
   `flex: 0 0 auto` + `white-space: nowrap` は 1 段横スクロール化の要件 (`.sr-tab` と同じ)。 */
.dc-mood-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--t-tap-sub);
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 0.25em;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.34rem 0.75rem;
  background: var(--t-bg-elev);
  border: 1px solid var(--t-border-strong);
  color: var(--t-fg);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.dc-mood-chip:hover {
  background: color-mix(in srgb, var(--t-fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--t-fg) 22%, transparent);
}
.dc-mood-chip:active { transform: scale(0.97); }
.dc-mood-chip.is-on {
  background: color-mix(in srgb, var(--t-accent) 18%, transparent);
  border-color: var(--t-accent);
  color: var(--t-fg);
  box-shadow: 0 0 0 1px var(--t-accent) inset;
}
/* v=83: light theme で accent text on light-tinted bg は contrast 不足 → fg に強制 */
:where(html, body)[data-theme="light"] .dc-mood-chip.is-on { color: var(--t-fg); }
@media (max-width: 640px) {
  .dc-mood-bar { padding: 0.7rem 0.85rem 0.85rem; margin: 1rem 0.5rem 1.4rem; }
  .dc-mood-chip { font-size: 0.74rem; padding: 0.3rem 0.65rem; }
}

/* ─── v=91: P1 Transparency UI (rec explain expander) ─────────────────── */
/* 🔴 タップ目標 (2026-09-06 / C-3) — 実測 26.8×22px。説明を開く**副次** icon なので
   `--t-tap-sub` (32)。中身 (ⓘ) は inline-flex + center で箱の中央に置く。 */
.rec-explain-btn {
  appearance: none; -webkit-appearance: none;
  min-width: var(--t-tap-sub); min-height: var(--t-tap-sub);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--t-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  margin-left: 0.25rem;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rec-explain-btn:hover {
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-fg) 8%, transparent);
}
.rec-explain-btn:focus-visible {
  outline: none;
  border-color: var(--t-accent);
  color: var(--t-accent);
}
.rec-explain-btn[aria-expanded="true"] {
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-fg) 10%, transparent);
}
:where(html, body)[data-theme="light"] .rec-explain-btn[aria-expanded="true"] {
  color: var(--t-fg);
}

.rec-explanation {
  margin-top: 0.5rem;
  padding: 0.7rem 0.85rem 0.65rem;
  background: color-mix(in srgb, var(--t-fg) 5%, transparent);
  border: 1px solid var(--t-border);
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--t-fg);
  animation: recExplFadeIn 0.15s ease;
  cursor: default;
}
@keyframes recExplFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.rec-expl-header {
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--t-fg);
  font-size: 0.82rem;
}
.rec-expl-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.12rem 0;
}
.rec-expl-row .rec-expl-text {
  flex: 1;
  min-width: 0;
}
.rec-expl-row.ok { color: var(--t-fg); }
.rec-expl-row.warn { color: color-mix(in srgb, var(--t-fg) 78%, transparent); }
.rec-expl-row.info { color: var(--t-muted); }
.rec-expl-row .delta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--t-fg);
  white-space: nowrap;
}
.rec-expl-row .delta.neg {
  color: color-mix(in srgb, var(--t-cog, #ff6b9d) 70%, var(--t-fg));
}
.rec-expl-sub {
  color: var(--t-muted);
  font-size: 0.7rem;
  margin-left: 0.25rem;
}
/* v=97: 「他 N 件」 collapse + hidden rows */
.rec-expl-more {
  cursor: pointer;
  user-select: none;
  transition: color 0.1s;
}
.rec-expl-more:hover { color: var(--t-accent); }
.rec-expl-more:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 4px; }
.rec-expl-more-row.is-hidden { display: none; }
.rec-expl-more-row {
  /* 展開時に subtle indent */
  padding-left: 0.6rem;
  border-left: 2px solid color-mix(in srgb, var(--t-fg) 8%, transparent);
}
.rec-expl-total {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--t-border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  text-align: right;
  color: var(--t-fg);
}
.rec-expl-gate {
  margin-top: 0.4rem;
  color: var(--t-muted);
  font-style: italic;
}
.rec-expl-gate small { font-size: 0.7rem; }
@media (max-width: 600px) {
  .rec-explanation { font-size: 0.74rem; padding: 0.6rem 0.7rem; }
  .rec-expl-header { font-size: 0.78rem; }
}

/* ── mobile: hero 圧縮 (デカすぎ user feedback 2026-07-02) ─────────── */
@media (max-width: 600px) {
  .dc-hero { padding: 1.1rem 1rem 1rem; border-radius: 12px; margin-bottom: 1.2rem; }
  .dc-hero-eyebrow { font-size: 0.7rem; margin-bottom: 0.3rem; }
  .dc-hero-title { font-size: 1.15rem; margin-bottom: 0.4rem; }
  .dc-hero-sub { font-size: 0.82rem; margin-bottom: 0.4rem; }
  .dc-hero-actions { margin-top: 0.7rem; }
  .dc-surprise-btn, .dc-shuffle-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
}