/* work-cover.css — 作品カバー + 1 行タイトルの統一様式 (カバー統一 PR-1)。
 *
 * owner 裁定 2026-08-19 (案 F + 黒固定):
 *   - 枠は全ドメイン 2:3 (album 解錠時も枠は変えず contain で受ける)
 *   - fit は実寸から自動 (app/cover-fit.ts — クロップ 18% 以内なら cover、超えたら contain)
 *   - contain の余白と読込前の下地 = --t-cover-plate (テーマ非追従の黒固定)
 *   - タイトルは 1 行 + ellipsis (line-clamp:1 は使わない — 単行は nowrap が正)
 * 利用面は幅だけ選ぶ (--s/m/l preset か自前幅)。高さは aspect-ratio が決める。
 * tier 盤面 (.tl-chip 系) は DOM 契約があるため tier-board.css 側で同じ規約を持つ。 */

.work-cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  /* 🔴 **角丸は参照 (owner 提供画像) の実測 R≈4** (2026-09-13)。⚠ 新しい token は足さず
     既存の `--t-r-sm` (5px) を使う — 1px の差は実写で判別できず、token を増やす方が高い。
     🗄️ 旧 `--t-r-md` (8px) は面別に 5 通り上書きされていた (work 4 / hub 6 / hub-slot 0 /
     onboarding 0 / quick 0) = **共有の値が実質どこにも効いていなかった**。 */
  border-radius: var(--t-r-sm);
  background: var(--t-cover-plate);
}

.work-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-cover-img.is-contain { object-fit: contain; }
/* ⚠ `draggable={false}` (WorkCover.tsx) と**対**。Safari は属性だけでは画像 drag を
   止めないことがあるので CSS 側でも止める (`tier-board.css` の `.tl-chip-cover` と同型)。 */
.work-cover-img { -webkit-user-drag: none; }

/* ── カバーが無い時の受け皿 = 案 3「帯」 (owner 選択 2026-09-27「案3で。」・WEB-COVER-FALLBACK-CARD) ─────────
 * 上 = ドメインの記号 + 題名 (左寄せ) / 下 30% = ドメイン色の帯に作り手 + 年。
 * 🗄️ 旧: 案 B (2026-09-14) = 記号 + 題名を中央に積む。
 * 🔴 **例外表示ではなく通常の見た目** — ローンチはカバー 100% を待たない (owner 方針 2026-09-27)。
 * ⚠ 地・帯は **plate に domain の accent を混ぜて沈める** (実カバーの隣で浮かない量)。色は token 由来のみ (`CSS_COLOR_RULES`)。
 * ⚠ plate は theme 非追従の黒 (tokens.css) なので、カードの色は light / dark で同じ。 */
.work-cover { container-type: inline-size; }
.work-cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--t-cover-plate-ink);
  text-align: start;
}
/* 🔴 地は **共有 class 側**が持つ — `/tier/` `/tierlist/` の駒 (`.tl-chip-ph`) は
   `work-cover-ph` を名乗らないので、こちらに置かないと**背景が消える** (実測 2026-09-14)。
   ⚠ `--dom` は下の data-dom 対応表が入れる。未知 domain は既定のまま = 従来の黒板。 */
.cover-ph { background: var(--dom-plate, var(--t-cover-plate)); }
/* domain → accent。⚠ **対応表はここ 1 つ** (面ごとに写さない・tier の駒も同じ表を引く)。 */
.cover-ph[data-dom="manga"]    { --dom: var(--t-domain-manga); }
.cover-ph[data-dom="anime"]    { --dom: var(--t-domain-anime); }
.cover-ph[data-dom="movie"]    { --dom: var(--t-domain-movie); }
.cover-ph[data-dom="game"]     { --dom: var(--t-domain-game); }
.cover-ph[data-dom="drama"]    { --dom: var(--t-domain-drama); }
.cover-ph[data-dom="book"]     { --dom: var(--t-domain-book); }
.cover-ph[data-dom="variety"]  { --dom: var(--t-domain-variety); }
.cover-ph[data-dom="musician"] { --dom: var(--t-domain-musician); }
.cover-ph[data-dom="album"]    { --dom: var(--t-domain-album); }
.cover-ph[data-dom] {
  /* 地 = accent を plate へ**わずかに**混ぜる (壁紙化させない量)。 */
  --dom-plate: color-mix(in srgb, var(--dom) 13%, var(--t-cover-plate));
  /* 🔴 **`--dom` の既定を必ず置く** — 対応表に無い値 (`custom` / 空文字 = custom tierlist の駒) だと
     `color-mix()` が計算値時に無効になり、`color` が親の `--t-fg` を継承して不可視になる (Final review 2026-09-14)。 */
  color: color-mix(in srgb, var(--dom, var(--t-cover-plate-fg)) 55%, var(--t-cover-plate-fg));
}
.work-cover-ph[data-dom] { color: var(--t-cover-plate-ink); }

/* 上 = 記号 + 題名 */
.work-cover-ph-top {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  padding: 9cqw 9cqw 6cqw;
}
.work-cover-ph-i {
  display: flex;
  line-height: 0;
  color: color-mix(in srgb, var(--dom, var(--t-cover-plate-fg)) 60%, var(--t-cover-plate-fg));
}
/* 🔴 **字形は枠に合わせて縮む** — 固定 34px だと 28px の枠 (`/mypage/` のおすすめ行) で切れる (Final review 2026-09-14)。 */
.work-cover-ph-i > svg { width: min(34px, 13cqw); min-width: 12px; height: auto; }
/* 題名。🔴 **文節で折る** — 折れ目は JSX の `<wbr>` (`app/cover-card.ts`)・それ以外は `keep-all` で折らない。
   `line-break: strict` で長音・小書き仮名・句読点を行頭に置かない。
   🔴 字の大きさ = 長さの段階 (`--step`) と「最長の文節が 1 行に収まる大きさ」(`78cqw ÷ --fit-em`) の小さい方・**下限 10px**。 */
.work-cover-ph-t {
  font-weight: 700;
  line-height: 1.22;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-size: max(min(var(--step), calc(78cqw / var(--fit-em))), 10px);
}
.work-cover-ph-t.is-t1 { --step: 24cqw; }
.work-cover-ph-t.is-t2 { --step: 14.5cqw; }
.work-cover-ph-t.is-t3 { --step: 11.5cqw; }
.work-cover-ph-t.is-t4 { --step: 9.5cqw; }
.work-cover-ph-t[data-fit="4"]  { --fit-em: 4; }
.work-cover-ph-t[data-fit="6"]  { --fit-em: 6; }
.work-cover-ph-t[data-fit="8"]  { --fit-em: 8; }
.work-cover-ph-t[data-fit="10"] { --fit-em: 10; }
.work-cover-ph-t[data-fit="12"] { --fit-em: 12; }

/* 下 = 帯 (作り手 + 年)。⚠ 作り手 / 年が無くても色だけで出す (分野の手がかり)。 */
.work-cover-ph-band {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2cqw;
  padding: 5cqw 9cqw;
  background: color-mix(in srgb, var(--dom, var(--t-cover-plate)) var(--band-mix, 32%), var(--t-cover-plate));
  color: var(--t-cover-plate-ink);
}
.work-cover-ph-by {
  font-weight: 700;
  font-size: max(9cqw, 10px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-cover-ph-y { font-size: max(8.5cqw, 10px); font-variant-numeric: tabular-nums; }

/* 🔴 **10px で題名が収まらない枠では題名を出さない** (hub 条件)。最小幅 = 10px × em ÷ 0.78 (内寸の比)。
   題名は枠の外にも 1 行出ているので、情報は失われない。 */
@container (max-width: 153px) { .work-cover-ph-t[data-fit="12"] { display: none; } }
@container (max-width: 127px) { .work-cover-ph-t[data-fit="10"] { display: none; } }
@container (max-width: 102px) { .work-cover-ph-t[data-fit="8"] { display: none; } }
@container (max-width: 76px)  { .work-cover-ph-t[data-fit="6"] { display: none; } }
/* 帯の作り手は 120px 未満で落とし、年だけにする。 */
@container (max-width: 119px) {
  .work-cover-ph-by { display: none; }
  .work-cover-ph-band { flex-basis: 20%; }
}
/* 🔴 **44px 級 (<64px) は記号 + 帯の色だけ**。 */
@container (max-width: 63px) {
  .work-cover-ph-t, .work-cover-ph-y { display: none; }
  .work-cover-ph-top { align-items: center; justify-content: center; padding: 6%; }
  .work-cover-ph-i > svg { width: 54cqw; }
  .work-cover-ph-band { flex-basis: 16%; padding: 0; }
}

/* 幅 preset (面ごとの選択肢 — 数値を面 CSS へ複製しない) */
.work-cover--s { width: 40px; }
.work-cover--m { width: 44px; }
.work-cover--l { width: 80px; }

.work-title {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}