.modebar { background: var(--modebar-bg) !important; }
.modebar-btn path { fill: var(--mid) !important; }
.modebar-btn:hover path { fill: var(--text) !important; }

/* 詳細モーダル */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
:where(html, body)[data-theme="light"] .modal-backdrop { background: rgba(0,0,0,0.45); }
.modal-backdrop.visible { display: flex; }
.modal {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 2rem 2.2rem 1.8rem;
  max-width: 960px;
  width: 100%;
  min-height: 70vh;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.modal-close {
  position: absolute; top: 0.7rem; right: 0.9rem;
  background: transparent; border: none;
  font-size: 1.5rem; color: var(--mid);
  cursor: pointer; line-height: 1;
  padding: 0.2rem 0.4rem; border-radius: 4px;
}
.modal-close:hover { color: var(--text); background: var(--surface2); }
.modal-back {
  background: var(--surface2);
  border: 1px solid var(--border-strong);
  color: var(--mid);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 99px;
  cursor: pointer;
  margin-bottom: 0.8rem;
  transition: all 0.12s;
  display: inline-flex; align-items: center;
}
.modal-back:hover { color: var(--accent); border-color: var(--accent); }
.modal-header {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  align-items: flex-start;
}
/* 🔴 **表紙は共有 `WorkCover`** (2026-09-13・owner 指示「カバーを表示する場所、全部」)。
   ⇒ ここが持つのは **幅だけ** — 2:3 の枠 / 黒下地 / fit 自動判定 / 角丸は
   `components/work-cover.css` が持つ (domain 9 面の entry も link するようにした)。
   🗄️ 旧: この面だけ `.modal-cover-img` / `.modal-cover-fallback` を自前で描き、
     「9 entry へ link を足さない最小形」として `fit-cache` だけ共有していた。
     ⚠ 下地 (`--surface2`) と枠 (1px) と `border-radius: 8px` もここが持っていたが、
     **カードの面 = カバーそのもの**の仕様に反するので落とす (radius / background は
     cascade で共有が勝つが、**border は勝たずに残って描かれていた**)。 */
.modal-cover {
  flex-shrink: 0;
  width: 160px;
}
.modal-header-text {
  flex: 1;
  min-width: 0;
}
.modal-header-text .modal-meta { margin-bottom: 0; }
@media (max-width: 640px) {
  .modal-header { flex-direction: column; align-items: center; }
  .modal-cover { width: 120px; }
}

.modal-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--text); line-height: 1.2;
  margin-bottom: 0.15rem; padding-right: 2rem;
}
.modal-subtitle {
  color: var(--mid); font-size: 0.85rem;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
}
.modal-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
}
/* 狭い幅 (≤480) は 1 列。2 列のままでは 320 でラベルと値を横に並べる幅が足りず、値が語ごとに
   折れるうえ、長い値が隣の列に重なった (2026-09-26 の板で案 A として確認・不採用)。 */
@media (max-width: 480px) { .modal-meta { grid-template-columns: 1fr; } }
.modal-meta-row {
  display: flex; justify-content: space-between; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding: 0.32rem 0;
}
/* 🔴 値もラベルも**切らずに折り返す**。旧 = 値だけ `nowrap` + ellipsis で、値の側が
   `overflow: hidden` のため flex の最小幅 0 になり、長いラベル (fr `POPULARITÉ INTERNATIONALE`
   等) に押されて `10/10` が `1…`・期間 `1995–1996` が `19…` に切れていた (390 fr / es・320 en
   で実測。5 domain × 4 作品 × 4 断面で 94 件)。折り返せば 1 語より狭くならないので短い値は
   切れず、長い名前の列挙は語の境界で折れる。`break-word` は 1 語がセルより長い時の保険
   (⚠ `anywhere` にしない — flex の最小幅が 1 文字まで縮み、`10/10` が字の途中で折れうる)。
   🔴 幅は**値が先に取る**: ラベルは `flex: 1 1 0` (内容の幅を主張しない・最長の 1 語より狭くは
   ならない)、値は `flex: 0 1 auto` (必要な幅を取り、足りない時だけ縮んで折れる)。
   ⚠ 値の `flex-shrink` を 1 未満にしない — 縮む係数の合計が 1 未満だと、足りない幅のその割合
   しか縮まず、長い値が行からはみ出す (0.01 で `Julius J. Epstein / Philip G. Epstein` が切れた)。 */
.modal-meta-label {
  color: var(--mid); font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  overflow-wrap: break-word;
  flex: 1 1 0;
}
.modal-meta-value {
  color: var(--text); font-weight: 600;
  text-align: right; overflow-wrap: break-word;
  flex: 0 1 auto;
}
.modal-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 700;
  color: var(--mid); text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0.4rem 0 0.4rem;
}
/* 作品ページ (みんなの評価・レビュー) への主要導線 — ヘッダー直下に目立たせて配置 */
.modal-workpage-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0.3rem 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-weight: 800; font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--t-accent) 35%, transparent);
  transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.1s ease;
}
.modal-workpage-cta:hover {
  opacity: 0.94;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--t-accent) 45%, transparent);
}
.modal-workpage-arrow { font-weight: 900; transition: transform 0.12s ease; }
/* 語の境界だけで折る — 2 span を inline-block にし、折返し点を span の間に限る
   (1 本の text だと CJK は字間で折れ「レビュ｜ー）」になる・360 未満で実測) */
.modal-workpage-label { text-align: center; }
.modal-workpage-label > span { display: inline-block; }
/* 2 span の間隔は margin で持つ (JSX の空白は ja で全角括弧の余白と二重になる)。
   全角括弧が自前の余白を持つ ja / zh だけ 0 */
.modal-workpage-label > span + span { margin-inline-start: 0.3em; }
:lang(ja) .modal-workpage-label > span + span,
:lang(zh) .modal-workpage-label > span + span { margin-inline-start: 0; }
.modal-workpage-cta:hover .modal-workpage-arrow { transform: translateX(3px); }
.modal-scores {
  display: flex; flex-direction: column;
  gap: 0.35rem; margin-bottom: 1rem;
}
.modal-score-row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem;
}
.modal-score-name {
  width: 7em; font-weight: 600;
  flex-shrink: 0;
}
.modal-score-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 700;
  width: 1.8em; text-align: center;
}
.modal-score-meter {
  flex: 1; height: 7px; background: var(--surface2);
  border-radius: 4px; overflow: hidden;
}
.modal-score-meter-fill {
  height: 100%; border-radius: 4px;
}
.modal-score-val {
  width: 2.5em; text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 0.8rem;
}
.modal-tags {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin-bottom: 1.2rem;
}
.modal-tag {
  background: var(--surface2);
  padding: 0.22rem 0.6rem;
  border-radius: 99px;
  font-size: 0.72rem;
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.1s;
}
.modal-tag:hover { border-color: var(--accent); color: var(--accent); }
.modal-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
/* L-AFFIL: アフィリエイト disclosure 近傍 1 行 (景表法/Amazon 規約/FTC) */
.affil-disclosure {
  margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--t-muted);
}
.affil-disclosure a { color: var(--t-accent, var(--accent)); text-decoration: none; }
.affil-disclosure a:hover { text-decoration: underline; }
.modal-link {
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700; font-size: 0.8rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: opacity 0.1s;
}
.modal-link:hover { opacity: 0.85; }
.modal-link.amazon { background: #ff9900; color: #111; } /* hardcode-ok: Amazon brand color */
.modal-link.wiki { background: var(--surface2); color: var(--text); border: 1px solid var(--border-strong); }
.modal-link.mylist {
  background: var(--surface2);
  color: var(--mid);
  border: 1px solid var(--border-strong);
}
.modal-link.mylist.on.read { background: var(--t-list-read); color: var(--t-on-accent); border-color: var(--t-list-read); }
.modal-link.mylist.on.favorite { background: var(--t-list-fav); color: #111; border-color: var(--t-list-fav); } /* hardcode-ok: gold チップ上の dark text (両 theme 共通) */
.modal-link.mylist.on.wishlist { background: var(--t-list-wish); color: var(--t-on-accent); border-color: var(--t-list-wish); }
/* v=74: Not my taste は赤系で他 toggle と視覚区別 */
.modal-link.mylist.on.dislike { background: var(--t-negative); color: var(--t-on-accent); border-color: var(--t-negative); }

/* UX C7: Tasteome 連動 hint */
.modal-tasteome-hint {
  margin: 0.3rem 0 0.6rem;
  font-size: 0.78rem; color: var(--text-muted, #8a8fa3);
  padding: 0.35rem 0.6rem;
  background: color-mix(in srgb, var(--t-accent) 8%, transparent);
  border-left: 3px solid var(--t-accent);
  border-radius: 0 6px 6px 0;
}
.modal-tasteome-link { color: var(--t-accent); font-weight: 600; text-decoration: none; }
.modal-tasteome-link:hover { text-decoration: underline; }

/* Sprint 3 Day 1: Review inline */
.review-inline {
  flex: 1 1 100%;
  margin-top: 0.6rem;
  background: var(--surface2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.review-label {
  display: block; font-size: 0.78rem;
  color: var(--text-muted, #8a8fa3); margin-bottom: 0.35rem;
}
.review-input {
  width: 100%; min-height: 60px; max-height: 120px;
  background: transparent; color: var(--text);
  border: none; outline: none; resize: vertical;
  font-family: inherit; font-size: 0.92rem; line-height: 1.45;
}
.review-meta {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--text-muted, #8a8fa3);
  margin-top: 0.2rem;
}
.review-status { color: var(--t-emo); } /* semantic: positive state (teal) */

/* hardcode-ok-begin: streaming サービスの brand color (theme 不依存) */
.modal-link.netflix { background: #e50914; color: #fff; }
.modal-link.crunchy { background: #f47521; color: #fff; }
.modal-link.prime { background: #00a8e1; color: #fff; }
/* hardcode-ok-end */

/* 配信プラットフォーム チップ */
.modal-streaming {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-bottom: 1.2rem;
}
.streaming-chip {
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}
/* ブランドカラー (左ボーダー強調、テキストのみ・ロゴなし) */
/* hardcode-ok-begin: streaming/電子書籍 各社の brand color (theme 不依存) */
.streaming-chip.streaming-netflix       { border-left: 4px solid #e50914; }
.streaming-chip.streaming-prime-video   { border-left: 4px solid #00a8e1; }
.streaming-chip.streaming-crunchyroll   { border-left: 4px solid #f47521; }
.streaming-chip.streaming-d-anime       { border-left: 4px solid #ff4500; }
.streaming-chip.streaming-u-next        { border-left: 4px solid #d20a14; }
.streaming-chip.streaming-disney-plus   { border-left: 4px solid #0063e5; }
.streaming-chip.streaming-hulu          { border-left: 4px solid #1ce783; }
.streaming-chip.streaming-abema         { border-left: 4px solid #1ac0dc; }
.streaming-chip.streaming-dmm-tv        { border-left: 4px solid #ff5500; }
.streaming-chip.streaming-bandai-channel{ border-left: 4px solid #d50032; }
.streaming-chip.streaming-apple-tv      { border-left: 4px solid #ffffff; }
/* manga 電子書籍 */
.streaming-chip.streaming-kindle        { border-left: 4px solid #ff9900; }
.streaming-chip.streaming-ebookjapan    { border-left: 4px solid #e60012; }
.streaming-chip.streaming-bookwalker    { border-left: 4px solid #1a73e8; }
.streaming-chip.streaming-line-manga    { border-left: 4px solid #06c755; }
.streaming-chip.streaming-piccoma       { border-left: 4px solid #ff4f00; }
.streaming-chip.streaming-cmoa          { border-left: 4px solid #f08200; }
.streaming-chip.streaming-rakuten-kobo  { border-left: 4px solid #bf0000; }
.streaming-chip.streaming-dmm-books     { border-left: 4px solid #ff5500; }
.streaming-chip.streaming-mangaoukoku   { border-left: 4px solid #ff7d00; }
/* hardcode-ok-end */