/* =============================================================================
   デマ図鑑 (dema-zukan) — デザイントークン v1
   -----------------------------------------------------------------------------
   方針: 「標本箱と紙」— 温かいクリーム地に版インクの黒、8種は"図鑑の色板(plate)"
   のように少しくすんだガッシュ調。ライトテーマのみ(教材・印刷親和)。
   外部フォント読込なし(システムフォントスタックのみ)。
   姉妹ブランドとの描き分け:
     A 園カルテ   = 温色フラット・強い角丸・ベビーアプリ調
     B コンプラ図鑑 = 端正なモノ・エディトリアル
     C デマ図鑑    = 博物学の野帳(field guide)= 温クリーム+版インク+色板+標本枠
   命名規約: 間隔=--space-* / 種の色=--sp-<romaji> / それ以外は用途名。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     1. 地・面・インク(ニュートラル / 紙とインク)
     ------------------------------------------------------------------------ */
  --paper:            #F6F1E5;   /* ページ地: 温かいクリーム */
  --surface:          #FCFAF3;   /* カード面: 紙より明るい */
  --surface-sunken:   #EFE8D6;   /* 沈み面: 標本プレート・入力欄 */
  --creature-belly:   #FBF7EE;   /* 生きものの顔・腹のハイライト(8種共通) */
  --creature-shadow:  rgba(43,42,40,.10); /* 接地影(デッチアゲのみ省略) */

  --ink:              #2B2A28;   /* 本文・アウトライン: 温かい版の黒(純黒は使わない) */
  --ink-soft:         #635D53;   /* 副次テキスト(AA: paper上で約5:1) */
  --ink-faint:        #938B7B;   /* メタ・キャプション(14px以上/装飾用途に限る) */
  --line:             #E4DBC7;   /* 罫線・ヘアライン(野帳の罫) */
  --line-strong:      #D2C7AC;   /* 強い区切り */

  /* ---------------------------------------------------------------------------
     2. アクセント(グローバル操作色 = 緑青/verdigris・8種と重複しない唯一の色相)
        ページの主役(その回の生きもの)と競合させないため、chrome は中立に保つ。
     ------------------------------------------------------------------------ */
  --accent:           #256B63;   /* リンク・CTA・フォーカス(paper上でAA) */
  --accent-strong:    #1F5A53;   /* hover/active */
  --accent-tint:      #E1EEEA;   /* 淡いアクセント地 */
  --accent-ink:       #FBF9F2;   /* アクセント上のテキスト */
  --focus-ring:       #256B63;

  /* ---------------------------------------------------------------------------
     3. 意味色(このビジネスの生命線UI)
     ------------------------------------------------------------------------ */
  /* 検証主体の判定(帰属付き結論)= 落ち着いた"検証済み"の信頼色。赤い FALSE 印にしない */
  --verdict-bg:       #E1EEEA;
  --verdict-ink:      #1F5A53;
  --verdict-border:   #7FB3AC;

  /* 誤情報の引用「」を入れる器 = 砂/黄土。断じて赤にしない(告発調・恐怖訴求の禁止)。
     「これは事実ではなく"未確認の主張"」を視覚的に隔離するための容器スタイル。 */
  --claim-bg:         #F6ECD4;
  --claim-border:     #BC8F3C;
  --claim-ink:        #6B5A2C;
  --claim-label-bg:   #BC8F3C;
  --claim-label-ink:  #FBF9F2;

  /* 史料モード(重い事例=関東大震災の流言等)= 種の色を外し、ほぼモノで静かに。
     黒帯は使わない(告発調になる)。ヘアラインと余白で"記録"の落ち着きを作る。 */
  --archival-bg:      #F2EEE4;
  --archival-ink:     #33302B;
  --archival-line:    #D8D0BF;
  --archival-meta:    #6E665A;

  /* ---------------------------------------------------------------------------
     4. 種(species)の固有色 — 図鑑の色板。低〜中彩度のガッシュ調で8色を共存させる。
        各種 3値: 面(--sp-x) / 文字用の濃色(--sp-x-ink, paper上AA狙い) / 淡地(--sp-x-bg)
        色相は8方向に散らし、隣接種が並ぶグリッドでも振動しないよう調整。
     ------------------------------------------------------------------------ */
  /* No.01 マジバケ  — 珊瑚/テラコッタ(おどけ・仮面) */
  --sp-majibake:      #DD8A5A;
  --sp-majibake-ink:  #A5572C;
  --sp-majibake-bg:   #F7E7D8;

  /* No.02 ツリダシ  — 琥珀/金(光る撒き餌=釣り) */
  --sp-tsuridashi:    #E3B248;
  --sp-tsuridashi-ink:#856011;
  --sp-tsuridashi-bg: #F8EFD3;

  /* No.03 モリスギ  — 葡萄/紫(盛って膨らむ・統計トリック) */
  --sp-morisugi:      #8C79B4;
  --sp-morisugi-ink:  #5E4C86;
  --sp-morisugi-bg:   #ECE6F3;

  /* No.04 キリトリ  — 若葉/緑(切り取り・別文脈へ移植) */
  --sp-kiritori:      #77A45A;
  --sp-kiritori-ink:  #4C7433;
  --sp-kiritori-bg:   #E7F0DD;

  /* No.05 ナリスマシ — 鋼青/ブルー(権威の借用・偽バッジ) */
  --sp-narisumashi:   #5A80B8;
  --sp-narisumashi-ink:#3A5A8C;
  --sp-narisumashi-bg:#E1E9F3;

  /* No.06 ツギハギ  — 亜麻褐色/トープ(継ぎ接ぎ・キルト。本来は多色=素材色として褐色) */
  --sp-tsugihagi:     #A98A66;
  --sp-tsugihagi-ink: #6F543A;
  --sp-tsugihagi-bg:  #EFE7DA;

  /* No.07 デッチアゲ — 薔薇/マゼンタ(合成のきらめき・AI生成) */
  --sp-decchiage:     #C56F9B;
  --sp-decchiage-ink: #944468;
  --sp-decchiage-bg:  #F4E2EB;

  /* No.08 ヨミガエリ — 宵闇/藍菫(否定済みが季節ごとに戻る) */
  --sp-yomigaeri:     #6E6A9C;
  --sp-yomigaeri-ink: #47456E;
  --sp-yomigaeri-bg:  #E7E5F0;

  /* ---------------------------------------------------------------------------
     5. タイポグラフィ(外部フォントなし・システムスタックのみ)
        ・見出し = 明朝(図鑑の版面の風格・信頼のバラスト。可愛いキャラを支える)
        ・本文/UI = ゴシック(保護者・教員・シニアの可読性。JPは行間広め)
        ・番号/ラベル = ゴシック + tabular-nums + トラッキング(No.04 の図鑑感)
     ------------------------------------------------------------------------ */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
                "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
                "Noto Sans JP", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                "Noto Serif JP", "Songti SC", "Times New Roman", Georgia, serif;

  /* サイズ(rem基準16px。JP本文は17pxで下限を上げ、シニア可読性を確保) */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-small:   0.875rem;   /* 14 */
  --fs-body:    1.0625rem;  /* 17 — 本文既定 */
  --fs-lead:    1.1875rem;  /* 19 — リード文 */
  --fs-h4:      1.25rem;    /* 20 */
  --fs-h3:      1.5rem;     /* 24 */
  --fs-h2:      1.875rem;   /* 30 */
  --fs-h1:      2.375rem;   /* 38 */
  --fs-display: clamp(2.5rem, 6vw, 3.25rem); /* 40–52 表紙/種名 */

  /* 行間(JP本文は 1.8 を基準に。詰めるのは見出しのみ) */
  --lh-tight:   1.3;   /* display */
  --lh-heading: 1.42;  /* 見出し */
  --lh-body:    1.8;   /* 本文(JP) */
  --lh-relaxed: 1.9;   /* 長文・史料 */

  /* 字間 */
  --ls-tight:   -0.01em; /* 欧文display */
  --ls-label:   0.08em;  /* ラベル・No.・タグ(図鑑感) */
  --ls-body:    0.01em;  /* JP本文の僅かな開き */

  /* 太さ(システムフォントの実効weightに合わせ3段) */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* 可読行長(JPは約38em) */
  --measure:        38em;
  --measure-narrow: 32em;

  /* ---------------------------------------------------------------------------
     6. 間隔(8ptベース)
     ------------------------------------------------------------------------ */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---------------------------------------------------------------------------
     7. 角丸(A=強角丸/B=角ばり の中間。野帳カードの中庸な丸み)
     ------------------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;  /* カード既定 */
  --radius-lg:   14px;  /* ヒーロー・標本プレート */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     8. 影・境界(印刷質感 = 影より罫線に働かせる)
     ------------------------------------------------------------------------ */
  --border-hair:      1px solid var(--line);
  --border-card:      1px solid var(--line);
  --border-strong:    1px solid var(--line-strong);
  --shadow-card:      0 1px 2px rgba(43,42,40,.06), 0 2px 8px rgba(43,42,40,.05);
  --shadow-pop:       0 3px 6px rgba(43,42,40,.08), 0 8px 20px rgba(43,42,40,.07);
  --shadow-plate:     inset 0 1px 3px rgba(43,42,40,.06); /* 標本プレートの沈み */

  /* ---------------------------------------------------------------------------
     9. レイアウト・モーション
     ------------------------------------------------------------------------ */
  --container:        1080px;
  --container-narrow: 720px;  /* 記事・事例ページ(1ページ1質問は狭めで読みやすく) */
  --gutter:           var(--space-lg);
  --transition-fast:  120ms ease;
  --transition:       200ms ease;

  /* 生きもの共通SVGパラメータ(参照値。実装は direction.md 参照) */
  --creature-viewbox:      128;  /* viewBox 0 0 128 128 */
  --creature-stroke:       3;    /* アウトライン */
  --creature-stroke-fine:  2;    /* 内部ディテール */
}

/* prefers-reduced-motion 尊重 */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition: 0ms; }
}

/* ライトテーマのみ。dark は提供しない(印刷・教材親和のため意図的)。
   端末のダーク設定でも地色を保つ:
   必要に応じて color-scheme を light 固定にする。 */
:root { color-scheme: light; }


/* =============================================================================
   デマ図鑑 — ブランドトークン上書き(正典: projects/dema-zukan/brand/)
   tokens.css(v1 野帳)の後に連結し、Kei の Claude Design ブランドへ寄せる。
   パレット・フォントは brand の LP/キャラクター一覧から抽出した実測値。
   ========================================================================== */

:root {
  /* 紙とインク(brand: クリーム #F7F3E8 × 墨紫 #332C3A) */
  --paper:            #F7F3E8;
  --surface:          #FCF8EE;
  --surface-sunken:   #EFEDE6;
  --creature-belly:   #FCF4E4;
  --creature-shadow:  rgba(51, 44, 58, .12);

  --ink:              #332C3A;
  --ink-soft:         #6b6472;
  --ink-faint:        #9B968C;
  --line:             #E2DCCB;
  --line-strong:      #C9C5BC;

  /* アクセント = 朱(brand の #C94A4A)。CTA・「こうかばつぐん!」・番号ラベル。
     文字リンクにはコントラスト確保のため strong を使う */
  --accent:           #C94A4A;
  --accent-strong:    #A83636;
  --accent-tint:      #F7E4E0;
  --accent-ink:       #FCF4E4;
  --focus-ring:       #C94A4A;

  /* 帰属バッジ(検証の信頼色)— brand の深緑系を流用 */
  --verdict-bg:       #DFF0EC;
  --verdict-ink:      #2E7F74;
  --verdict-border:   #43A99A;

  /* 主張の器 = 黄土(継続。brand の橙系インクに合わせ微調整) */
  --claim-bg:         #F8EED6;
  --claim-border:     #C96F26;
  --claim-ink:        #6B5A2C;
  --claim-label-bg:   #C96F26;
  --claim-label-ink:  #FCF4E4;

  /* 史料モード(継続・墨紫ベースに調整) */
  --archival-bg:      #F1EEE6;
  --archival-ink:     #332C3A;
  --archival-line:    #D5D0C2;
  --archival-meta:    #6b6472;

  /* 系統色(brand 実測: 錬成=紫 / 化かし=橙 / 憑依=青緑 / 蘇り=白灰) */
  --lin-rensei:       #8F6FCB;
  --lin-rensei-ink:   #6E4FA8;
  --lin-rensei-bg:    #EFE8FA;
  --lin-bakashi:      #F09140;
  --lin-bakashi-ink:  #C96F26;
  --lin-bakashi-bg:   #FCEBD8;
  --lin-hyoi:         #43A99A;
  --lin-hyoi-ink:     #2E7F74;
  --lin-hyoi-bg:      #DFF0EC;
  --lin-yomigaeri:    #C9C5BC;
  --lin-yomigaeri-ink:#6b6472;
  --lin-yomigaeri-bg: #EFEDE6;

  /* フォント(brand: 丸ゴシック本文+ドット文字ラベル。Google Fonts・無料) */
  --font-sans:  'M PLUS Rounded 1c', -apple-system, BlinkMacSystemFont,
                "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --font-serif: 'M PLUS Rounded 1c', -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; /* 見出しも丸ゴ(ポップ・ゆるい・子どもに見せられる) */
  --font-dot:   'DotGothic16', 'Osaka-Mono', 'MS Gothic', monospace;   /* No./系統EN/ステータス(ゲーム攻略風) */
}

:root { --fw-bold: 800; } /* brand 見出し・バッジは wght 800(design v2 M3) */


/* =============================================================================
   デマ図鑑 — ページCSS(tokens.css の後に連結される)
   影より罫線・クリーム地・野帳カード。design/page-blueprints.md 準拠。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--font-serif); line-height: var(--lh-heading); font-weight: var(--fw-bold); margin: 0 0 var(--space-md); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-md); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
main { padding-block: var(--space-xl) var(--space-4xl); }
section { margin-block: var(--space-3xl); }
.section-lead { color: var(--ink-soft); max-width: var(--measure); }

/* ---------- プロトタイプ帯・ヘッダ・フッタ ---------- */
.proto-strip {
  background: var(--surface-sunken); color: var(--ink-soft);
  font-size: var(--fs-caption); text-align: center; padding: 4px var(--space-md);
  letter-spacing: var(--ls-label); border-bottom: var(--border-hair);
}
.site-header { background: var(--surface); border-bottom: var(--border-strong); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-sm); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--font-serif); font-weight: var(--fw-bold); font-size: var(--fs-h4); letter-spacing: 0.04em; }
.site-nav { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-inline-start: auto; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--fs-small); padding: 4px 2px; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--accent); }
.nav-cta {
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  padding: 8px 14px; border-radius: var(--radius-pill); white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-strong); color: var(--accent-ink); }

.site-footer { background: var(--surface); border-top: var(--border-strong); padding-block: var(--space-xl); color: var(--ink-soft); font-size: var(--fs-small); }
.footer-links { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.footer-links a { color: var(--ink-soft); }
.footer-disclaimer { max-width: var(--measure); }
.footer-copy { font-family: var(--font-serif); color: var(--ink-faint); }

/* ---------- ヒーロー(図鑑の表紙) ---------- */
.hero { margin-block: var(--space-2xl); display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); margin-bottom: var(--space-sm); }
.hero-copy { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: var(--space-sm); }
.hero-desc { color: var(--ink-soft); max-width: var(--measure-narrow); }
.hero-ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); }
.btn { display: inline-block; text-decoration: none; border-radius: var(--radius-pill); padding: 12px 22px; font-weight: var(--fw-medium); font-size: var(--fs-body); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border: var(--border-strong); }
.hero-plate {
  background: var(--surface); border: var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-lg);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); align-items: end;
}
.hero-plate .creature { width: 100%; }
.hero-plate-caption { grid-column: 1 / -1; text-align: center; color: var(--ink-faint); font-size: var(--fs-caption); letter-spacing: var(--ls-label); margin-top: var(--space-2xs); }

/* ---------- 緊急導線(これ、デマかも?) ---------- */
.dema-kamo { background: var(--surface); border: var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-xl); }
.dema-kamo h2 { margin-bottom: var(--space-2xs); }
.guide-note { color: var(--ink-soft); font-size: var(--fs-small); }
.quick-links { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
.quick-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--surface-sunken); color: var(--ink); border: var(--border-hair);
  border-radius: var(--radius-pill); padding: 9px 16px; font-size: var(--fs-small);
}
.quick-link:hover { border-color: var(--accent); color: var(--accent-strong); }
.quick-link .hab-icon { width: 18px; height: 18px; }
.quick-steps { margin: var(--space-md) 0 0; padding-left: 1.4em; color: var(--ink-soft); }
.quick-steps li { margin-bottom: var(--space-2xs); }

/* ---------- 標本カード(種グリッド) ---------- */
.specimen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.specimen-grid--3 { grid-template-columns: repeat(3, 1fr); }
.specimen-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.specimen-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.specimen-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); color: var(--ink); }
.specimen-plate { padding: var(--space-md); border-bottom: var(--border-hair); }
.specimen-plate .creature { display: block; width: 76%; margin-inline: auto; }
.specimen-meta { display: flex; flex-direction: column; gap: 4px; padding: var(--space-md); }
.specimen-no { font-size: var(--fs-caption); letter-spacing: var(--ls-label); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.specimen-name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.specimen-framework { font-size: var(--fs-caption); color: var(--ink-soft); }
.specimen-def { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }
.specimen-foot { margin-top: var(--space-xs); }
.count-chip, .pending-chip {
  display: inline-block; font-size: var(--fs-caption); border-radius: var(--radius-pill);
  padding: 3px 10px; letter-spacing: var(--ls-label);
}
.count-chip { background: var(--accent-tint); color: var(--verdict-ink); }
.pending-chip { background: var(--surface-sunken); color: var(--ink-soft); border: 1px dashed var(--line-strong); }

/* ---------- 主張の器(砂地+黄土罫・赤禁止) ---------- */
.claim-box {
  background: var(--claim-bg); border-left: 5px solid var(--claim-border);
  border-radius: var(--radius-sm); padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-md);
}
.claim-label {
  display: inline-block; background: var(--claim-label-bg); color: var(--claim-label-ink);
  font-size: var(--fs-caption); letter-spacing: var(--ls-label);
  border-radius: var(--radius-xs); padding: 2px 8px; margin-bottom: var(--space-xs);
}
.claim-text { color: var(--claim-ink); font-size: var(--fs-lead); font-weight: var(--fw-medium); margin: 0; }
.claim-box--small .claim-text { font-size: var(--fs-body); }

/* ---------- 帰属バッジ ---------- */
.verdict-badge {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  background: var(--verdict-bg); border: 1px solid var(--verdict-border);
  color: var(--verdict-ink); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md); margin-block: var(--space-md);
}
.verdict-check { flex: none; margin-top: 4px; }
.verdict-text { line-height: 1.7; }
.verdict-src { color: var(--verdict-ink); font-size: var(--fs-small); margin-left: 6px; }

/* ---------- 生息域タグ ---------- */
.habitat-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.habitat-tag {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--surface-sunken); color: var(--ink-soft); border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: var(--fs-caption); letter-spacing: var(--ls-label);
}
.habitat-tag:hover { color: var(--accent-strong); }
.habitat-tag .hab-icon { width: 16px; height: 16px; }

/* ---------- 事例カード ---------- */
.case-list { display: grid; gap: var(--space-md); }
.case-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-fast);
}
.case-card:hover { box-shadow: var(--shadow-pop); color: var(--ink); }
.case-claim { font-weight: var(--fw-medium); margin-bottom: var(--space-xs); }
.case-claim-label {
  display: inline-block; background: var(--claim-bg); color: var(--claim-ink);
  border: 1px solid var(--claim-border); border-radius: var(--radius-xs);
  font-size: var(--fs-caption); padding: 1px 7px; margin-right: 8px; vertical-align: 2px;
}
.case-verdict { color: var(--verdict-ink); font-size: var(--fs-small); margin-bottom: var(--space-xs); }
.case-foot { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; font-size: var(--fs-caption); color: var(--ink-soft); }
.case-species { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); letter-spacing: var(--ls-label); }
.type-mark { width: 15px; height: 15px; }

/* grave(史料モード)— 種色・色板を外し静かに */
.case-card--grave { background: var(--archival-bg); border-color: var(--archival-line); box-shadow: none; }
.case-card--grave .case-claim { color: var(--archival-ink); }
.case-card--grave .case-verdict { color: var(--archival-meta); }
.grave-note { display: block; font-size: var(--fs-caption); color: var(--archival-meta); letter-spacing: var(--ls-label); margin-bottom: var(--space-xs); }
.case-species-mono { display: inline-flex; align-items: center; gap: 6px; color: var(--archival-meta); }

/* ---------- 出典ブロック ---------- */
.source-block { margin-top: var(--space-2xl); }
.source-heading { font-size: var(--fs-h3); }
.source-list { display: grid; gap: var(--space-sm); }
.source-card {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--surface); border: var(--border-card); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
}
.source-title { color: var(--ink); font-weight: var(--fw-medium); line-height: 1.6; }
.source-publisher { color: var(--ink-soft); font-size: var(--fs-small); }
.source-meta { color: var(--ink-faint); font-size: var(--fs-caption); }
.source-url { color: var(--accent); font-size: var(--fs-caption); word-break: break-all; }

/* ---------- ランキング(件数バー) ---------- */
.ranking-note {
  background: var(--surface-sunken); border: var(--border-hair); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); color: var(--ink-soft); font-size: var(--fs-small);
}
.count-bars { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); }
.count-bar {
  display: grid; grid-template-columns: 220px 1fr 72px; gap: var(--space-md); align-items: center;
  text-decoration: none; color: var(--ink); padding: 8px 10px; border-radius: var(--radius-sm);
}
.count-bar:hover { background: var(--surface); color: var(--ink); }
.bar-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.bar-label .hab-icon { width: 18px; height: 18px; }
.bar-name { font-weight: var(--fw-medium); }
.bar-sub { color: var(--ink-faint); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.bar-track { background: var(--surface-sunken); border-radius: var(--radius-pill); height: 14px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); opacity: .75; }
.bar-count { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- 信頼バンド ---------- */
.trust-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.trust-item {
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-md);
  padding: var(--space-md);
}
.trust-title { display: block; font-weight: var(--fw-bold); margin-bottom: 4px; font-size: var(--fs-small); }
.trust-desc { color: var(--ink-soft); font-size: var(--fs-caption); line-height: 1.6; }

/* ---------- 種ページ ---------- */
.species-hero {
  border-radius: var(--radius-lg); border: var(--border-strong);
  padding: var(--space-2xl); display: grid; grid-template-columns: 300px 1fr;
  gap: var(--space-2xl); align-items: center; margin-block: var(--space-xl);
}
.species-hero .creature { width: 100%; max-width: 280px; }
.species-no { font-size: var(--fs-small); letter-spacing: var(--ls-label); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.species-hero h1 { font-size: var(--fs-display); margin-bottom: var(--space-2xs); }
.species-framework { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: var(--space-md); }
.species-flavor { font-family: var(--font-serif); font-size: var(--fs-lead); max-width: var(--measure-narrow); }
.field-section h2 { border-bottom: var(--border-strong); padding-bottom: var(--space-xs); }
.spot-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.spot-list li {
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md); padding-left: 44px; position: relative;
}
.spot-list li::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--accent); opacity: .85;
}
.counter-list { padding-left: 1.4em; }
.counter-list li { margin-bottom: var(--space-xs); }
.combo-note { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); color: var(--ink-soft); font-size: var(--fs-small); }
.framework-src { color: var(--ink-faint); font-size: var(--fs-caption); }

/* ---------- 事例ページ ---------- */
.case-page h1 { font-size: var(--fs-h2); }
.case-hero-meta { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: var(--space-lg); }
.species-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: var(--fw-medium); letter-spacing: var(--ls-label); }
.case-section h2 { font-size: var(--fs-h3); border-bottom: var(--border-hair); padding-bottom: var(--space-xs); }
.case-section { margin-block: var(--space-2xl); }
.related-cases { display: grid; gap: var(--space-sm); }

/* 史料モード(gravity: grave のページ) */
.archival-mode { background: var(--archival-bg); border: 1px solid var(--archival-line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.archival-note { color: var(--archival-meta); font-size: var(--fs-small); letter-spacing: var(--ls-label); border-bottom: 1px solid var(--archival-line); padding-bottom: var(--space-xs); margin-bottom: var(--space-lg); }
.archival-mode .claim-box { background: var(--surface-sunken); border-left-color: var(--archival-meta); }
.archival-mode .claim-label { background: var(--archival-meta); }
.archival-mode .claim-text { color: var(--archival-ink); }
.archival-mode p { line-height: var(--lh-relaxed); }

/* ---------- 特集 ---------- */
.tokushu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.tokushu-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-md);
  padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.tokushu-card:hover { box-shadow: var(--shadow-pop); color: var(--ink); }
.tokushu-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-xs); }
.tokushu-card p { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }
.tokushu-lead-quiet {
  background: var(--archival-bg); border: 1px solid var(--archival-line);
  border-radius: var(--radius-md); padding: var(--space-lg); color: var(--archival-ink);
  max-width: var(--measure);
}
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.checklist li { background: var(--surface); border: var(--border-card); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); }

/* ---------- 生息域セクション ---------- */
.habitat-band { border: var(--border-card); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-lg); margin-bottom: var(--space-md); }
.habitat-band-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.habitat-band-head .hab-icon { width: 24px; height: 24px; }
.habitat-band-head h3 { margin: 0; font-size: var(--fs-h4); }
.habitat-band-count { color: var(--ink-faint); font-size: var(--fs-caption); }
.mini-case-links { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); }

/* ---------- about ---------- */
.about-section h2 { border-bottom: var(--border-strong); padding-bottom: var(--space-xs); }
.about-section { margin-block: var(--space-2xl); }

/* ---------- パンくず ---------- */
.crumbs { font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom: var(--space-lg); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  .specimen-grid { grid-template-columns: repeat(3, 1fr); }
  .specimen-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .trust-band { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .species-hero { grid-template-columns: 220px 1fr; padding: var(--space-xl); }
  .tokushu-grid { grid-template-columns: 1fr; }
  .count-bar { grid-template-columns: 160px 1fr 64px; }
}
@media (max-width: 640px) {
  .specimen-grid, .specimen-grid--3, .specimen-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .specimen-name { font-size: var(--fs-h4); }
  .species-hero { grid-template-columns: 1fr; text-align: center; }
  .species-hero .creature { margin-inline: auto; }
  .species-flavor { text-align: left; }
  .trust-band { grid-template-columns: 1fr; }
  .count-bar { grid-template-columns: 1fr; gap: 6px; }
  .bar-count { text-align: left; }
  .header-inner { gap: var(--space-sm); }
  .site-nav { order: 3; width: 100%; }
  h1 { font-size: var(--fs-h2); }
}

/* 13px 情報テキストは ink-soft(tokens の --ink-faint 規約=14px以上/装飾限定・design レビュー M6) */
.specimen-no, .crumbs, .source-meta, .habitat-band-count, .bar-sub { color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

/* 印刷(教材配布を想定) */
@media print {
  .site-header, .nav-cta, .proto-strip, .hero-ctas { display: none; }
  body { background: #fff; }
}

/* =============================================================================
   v2 — ブランド正典(brand/)対応: 妖怪・系統・ドットラベル・こうかばつぐん
   ========================================================================== */

.dot-label { font-family: var(--font-dot); letter-spacing: 0.06em; font-weight: 400; }

.brand-en { font-family: var(--font-dot); font-size: var(--fs-caption); color: var(--ink-faint); margin-left: 6px; }
.footer-catch { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--space-sm); }

.hero-eyebrow { color: var(--accent-strong); font-size: var(--fs-small); margin-bottom: var(--space-xs); }
.hero h1 { letter-spacing: 0.02em; }

/* 妖怪SVG(viewBox 260x300) */
.yokai-svg { display: block; width: 78%; margin-inline: auto; height: auto; }
.hero-plate .yokai-svg { width: 100%; }
.yokai-hero-svg { width: 100%; max-width: 260px; }

/* 系統 */
.lineage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.lineage-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: var(--border-card); border-top: 4px solid var(--ink);
  border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-card);
}
.lineage-card:hover { box-shadow: var(--shadow-pop); color: var(--ink); }
.lineage-card-name { font-weight: var(--fw-bold); font-size: var(--fs-h4); }
.lineage-card-en { font-family: var(--font-dot); color: var(--ink-faint); font-size: var(--fs-caption); }
.lineage-card-action { font-weight: var(--fw-medium); font-size: var(--fs-small); }
.lineage-card-summary { color: var(--ink-soft); font-size: var(--fs-caption); line-height: 1.6; }
.lineage-card-count { margin-top: 4px; color: var(--ink-faint); font-size: var(--fs-caption); }

.lineage-section { margin-bottom: var(--space-2xl); }
.lineage-head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; border-bottom: var(--border-strong); padding-bottom: var(--space-xs); margin-bottom: var(--space-lg); }
.lineage-head h3 { margin: 0; font-size: var(--fs-h3); }
.lineage-swatch { width: 14px; height: 14px; border-radius: 4px; align-self: center; }
.lineage-en { color: var(--ink-faint); font-size: var(--fs-small); }
.lineage-action { font-weight: var(--fw-medium); color: var(--ink-soft); font-size: var(--fs-small); }
.lineage-summary { color: var(--ink-faint); font-size: var(--fs-caption); }

.zukan-status { display: flex; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.zukan-status h1 { margin: 0; }
.status-counter { color: var(--accent-strong); font-size: var(--fs-small); border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); padding: 6px 14px; }

.specimen-lineage { font-family: var(--font-sans); font-weight: var(--fw-medium); }

/* No.013 ??? 新種発見待ち */
.specimen-card--next { border-style: dashed; box-shadow: none; }
.specimen-plate--next { display: grid; place-items: center; min-height: 150px; background: var(--surface-sunken); }
.next-q { font-size: 64px; color: var(--ink-faint); }

/* 妖怪チップ(関与表示) */
.yokai-chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--surface); border: var(--border-card); border-radius: var(--radius-pill);
  padding: 3px 12px 3px 8px; font-size: var(--fs-caption); color: var(--ink); letter-spacing: 0.02em;
}
a.yokai-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.yokai-chip--main { font-weight: var(--fw-bold); border-color: var(--line-strong); }
.yokai-chip--mono { color: var(--archival-meta); background: transparent; }
.chip-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip-dot--mono { border: 1.6px solid var(--archival-meta); }
.chip-no { font-family: var(--font-dot); font-size: 0.72rem; color: var(--ink-faint); }
.chip-main {
  font-size: 0.68rem; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-xs); padding: 1px 5px; margin-left: 2px; letter-spacing: 0.08em;
}
.yokai-chip--mono .chip-main { background: var(--archival-meta); }
.yokai-involved { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.yokai-involved .yokai-chip { font-size: var(--fs-small); padding: 6px 14px 6px 10px; }
.yokai-involved-note { color: var(--ink-faint); font-size: var(--fs-caption); margin-top: var(--space-xs); }

/* こうかばつぐん!(弱点属性コールアウト) */
.koka-callout {
  position: relative; background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); margin-top: var(--space-lg);
}
.koka-label {
  position: absolute; top: -14px; left: 18px; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); padding: 3px 14px; font-size: var(--fs-small);
}
.weakness-list { list-style: none; padding: 0; margin: var(--space-xs) 0 0; display: grid; gap: var(--space-xs); }
.weakness-list li { padding-left: 28px; position: relative; font-weight: var(--fw-medium); }
.weakness-list li::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--accent);
}
.framework-note { color: var(--ink-faint); font-size: var(--fs-caption); margin-left: 6px; }

.case-group-head { font-size: var(--fs-h4); color: var(--ink-soft); margin: var(--space-lg) 0 var(--space-sm); }

/* 家系図 */
.pedigree-line { padding-left: 22px; position: relative; }
.pedigree-line::before { content: ''; position: absolute; left: 4px; top: 0.35em; width: 10px; height: 10px; border-left: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); border-radius: 0 0 0 3px; }

/* grave では系統色スウォッチも落とす */
.archival-mode .chip-dot { background: transparent !important; border: 1.6px solid var(--archival-meta); }

@media (max-width: 960px) {
  .lineage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lineage-grid { grid-template-columns: 1fr; }
  .zukan-status { gap: var(--space-sm); }
}

/* =============================================================================
   design v2 レビュー反映(M1〜M4)
   ========================================================================== */

/* M2: 朱=アクション、リンク=インク、データ=中立(AA回復) */
a { color: var(--ink); text-decoration-color: var(--line-strong); }
a:hover { color: var(--accent-strong); }
.action-link { color: var(--accent-strong); }
.bar-fill { background: var(--ink); opacity: .5; }
.source-card { border-left: 4px solid var(--line-strong); }
.source-url { color: var(--ink-soft); }
.chip-no { font-size: 0.75rem; color: var(--ink-soft); }
.chip-main { background: var(--accent-strong); font-size: 0.72rem; }
.count-chip { background: var(--verdict-bg); color: var(--ink); }
.lineage-swatch, .chip-dot { border: 1.5px solid var(--ink); }
.chip-dot--mono { background: transparent; border: 1.6px solid var(--archival-meta); }

/* M1-c: 史料モードの朱中和 */
.archival-mode a { color: var(--archival-ink); }
.archival-mode .spot-list li::before { border-color: var(--archival-meta); }
.archival-mode .source-card { border-left-color: var(--archival-line); }
.archival-mode .source-url { color: var(--archival-meta); }

/* M3: 図鑑前半のポップ・クロム(brand: 太い墨紫枠+ハードシャドウ)。
   事例カード・出典・史料・チェックリスト=後半はヘアラインのまま(§7 zoning) */
.specimen-card { border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 rgba(51,44,58,.13); }
.specimen-card:hover { transform: translate(-1px,-3px); box-shadow: 7px 7px 0 rgba(51,44,58,.16); }
.specimen-plate { border-bottom: 2.5px solid var(--ink); }
.specimen-card--next { border: 2.5px dashed var(--line-strong); box-shadow: none; }
.lineage-card { border: 2.5px solid var(--ink); border-top-width: 10px; border-radius: 16px; box-shadow: 4px 4px 0 rgba(51,44,58,.12); }
.hero-plate { border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 rgba(51,44,58,.12); }
.species-hero { border: 3px solid var(--ink); border-radius: 20px; }
.btn { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(51,44,58,.22); font-weight: var(--fw-bold); }
.btn-secondary { background: #fff; }
.nav-cta { border: 2px solid var(--ink); }

/* M4: kana(よみがな) */
.species-kana { display: block; color: var(--ink-soft); font-size: var(--fs-small); letter-spacing: .14em; }

/* design v2 §8 follow-up: grave 面の hover 朱漏れ(詳細度)+注記の可読性+バー3:1 */
.archival-mode a:hover,
.archival-mode a.yokai-chip:hover,
.archival-mode .habitat-tag:hover,
.archival-mode .crumbs a:hover { color: var(--archival-ink); border-color: var(--archival-line); }
.yokai-involved-note { color: var(--ink-soft); }
.bar-fill { opacity: .55; }

/* ---------- こうかばつぐん: 弱ったすがた+Admin キャラクターボード(2026-07-12) ---------- */
.koka-body { display: flex; gap: var(--space-lg); align-items: center; }
.koka-body .weakness-list { flex: 1; }
.koka-weakened { flex: none; width: 130px; margin: 0; text-align: center; }
.koka-weakened figcaption { font-size: var(--fs-caption); color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 640px) { .koka-body { flex-direction: column; } }

.admin-table-wrap { overflow-x: auto; background: var(--surface); border: var(--border-strong); border-radius: var(--radius-md); }
.admin-table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); line-height: 1.6; }
.admin-table th, .admin-table td { border-bottom: var(--border-hair); padding: 8px 10px; text-align: left; vertical-align: top; }
.admin-table th { background: var(--surface-sunken); font-size: var(--fs-caption); letter-spacing: var(--ls-label); white-space: nowrap; }
.admin-thumb .yokai-svg { width: 72px; }
.admin-kana { color: var(--ink-soft); font-size: var(--fs-caption); }
.admin-note { color: var(--ink-faint); font-size: var(--fs-caption); }
.admin-flag { display: inline-block; background: var(--claim-bg); color: var(--claim-ink); border: 1px solid var(--claim-border); border-radius: var(--radius-xs); font-size: var(--fs-caption); padding: 0 6px; }
.admin-ok { display: inline-block; background: var(--verdict-bg); color: var(--verdict-ink); border-radius: var(--radius-xs); font-size: var(--fs-caption); padding: 0 6px; }
.admin-cases { font-size: var(--fs-caption); }
.admin-table code { font-size: 0.72rem; color: var(--ink-soft); }
.admin-verdict { display: block; margin-top: 4px; color: var(--claim-ink); font-size: 0.72rem; line-height: 1.5; max-width: 220px; }

/* ============================================================
   顛末タイムライン(story)コンポーネント — design 2026-07-16
   normal 事例のみ(grave は史料モードのため非適用)
   ============================================================ */

/* 節見出しの帯(顛末の期間・データから機械生成) */
.sec-strap { font-family: var(--font-dot); font-size: var(--fs-caption); color: var(--ink-soft);
  letter-spacing: .12em; margin-left: 10px; white-space: nowrap; }

/* 導入(モード切替の一文・テンプレ固定文言) */
.story-lead { color: var(--ink-soft); font-size: var(--fs-small); max-width: var(--measure); }

/* ヘッダメタの「みやぶられるまで」チップ(発端→決着の機械計算・中立色) */
.meta-duration { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-dot);
  font-size: var(--fs-caption); color: var(--ink); background: var(--surface-sunken);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px 12px; }
.meta-duration .md-label { color: var(--ink-soft); letter-spacing: .1em; }

/* タイムラインの背骨 */
.story-beats { list-style: none; margin: var(--space-lg) 0 0; padding: 0; position: relative; }
.story-beats::before { content: ''; position: absolute; left: 18px; top: 12px; bottom: 28px;
  border-left: 2.5px dashed var(--line-strong); }
.story-beat { position: relative; padding: 0 0 var(--space-xl) 58px; }
.story-beat:last-child { padding-bottom: 0; }

/* 節点(丸判・DotGothic 番号) */
.beat-node { position: absolute; left: 0; top: -1px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--ink); display: grid; place-items: center;
  font-family: var(--font-dot); font-size: .85rem; color: var(--ink); z-index: 1; }
.story-beat--kecchaku .beat-node { border-color: var(--accent-strong); color: var(--accent-strong);
  background: var(--accent-tint); }

/* 拍の眉(局面の動詞+漢字レジスタ+日付+この場面の手口) */
.beat-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.beat-verb { font-weight: 800; font-size: var(--fs-body); letter-spacing: .06em; }
.beat-phase { font-family: var(--font-dot); font-size: .78rem; color: var(--ink-soft); letter-spacing: .18em; }
.beat-date { font-family: var(--font-dot); font-size: .78rem; background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 10px;
  color: var(--ink-soft); white-space: nowrap; }
.beat-eyebrow .yokai-chip { padding: 2px 10px 2px 7px; font-size: var(--fs-caption); margin-left: auto; }

/* 拍の見出し(見出しだけ拾い読みしても顛末が分かる) */
.beat-title { font-size: var(--fs-h4); font-weight: 800; line-height: 1.5; margin: 4px 0 8px; }
.beat-text { margin: 0; max-width: var(--measure); }

/* --- 抜き出しカード(pull)3種 --- */
.beat-pull { margin-top: var(--space-sm); }

/* pull: stat — 数字の記録(DotGothic 大・中立色) */
.pull-stat { display: flex; flex-direction: column; gap: 2px; background: var(--surface);
  border: 2.5px solid var(--ink); border-radius: 16px; padding: 14px 20px 12px;
  box-shadow: 4px 4px 0 rgba(51,44,58,.10); max-width: 520px; }
.pull-stat-label { font-family: var(--font-dot); font-size: .75rem; letter-spacing: .16em; color: var(--ink-soft); }
.pull-stat-value { font-family: var(--font-dot); font-size: 1.65rem; line-height: 1.25; color: var(--ink); font-weight: 400; }
.pull-stat-value .arrow { color: var(--accent-strong); padding: 0 4px; }
.pull-note { color: var(--ink-soft); font-size: var(--fs-caption); margin-top: 2px; }

/* pull: quote(from claim)は既存 .claim-box--small の意匠を流用 */
.pull-quote-claim { max-width: 560px; }

/* pull: quote(from record)— 記録・証言の引用(中立の証言カード) */
.pull-quote-record { background: var(--surface); border: var(--border-card);
  border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 12px 18px 10px; max-width: 560px; }
.pull-quote-record .q { font-weight: 700; margin: 0 0 2px; }

/* pull: kimete —「こうかばつぐん!」見破りの決め手(弱点属性と同じ朱の意匠) */
.pull-kimete { position: relative; background: var(--surface); border: 2px solid var(--accent);
  border-radius: 16px; padding: 18px 20px 14px; margin-top: 20px; max-width: 560px; }
.pull-kimete-label { position: absolute; top: -14px; left: 16px; background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); padding: 3px 14px; font-size: var(--fs-small); font-weight: 800; }
.pull-kimete-method { font-weight: 800; margin: 0 0 4px; }
.pull-kimete-text { margin: 0; font-size: var(--fs-body); }
.pull-kimete-weak { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: var(--fs-caption); color: var(--ink-soft); }
.pull-kimete-weak a { color: var(--accent-strong); }

@media (max-width: 640px) {
  .story-beats::before { left: 15px; }
  .story-beat { padding-left: 48px; }
  .beat-node { width: 32px; height: 32px; font-size: .78rem; }
  .beat-eyebrow .yokai-chip { margin-left: 0; }
  .pull-stat-value { font-size: 1.35rem; }
}