/* =========================================================
   攻略図鑑 デザイン見本 共通CSS（ミナ・2026-11-07）
   - 外部依存は Google Fonts のみ
   - ライト／ダークは html[data-theme] で切り替え（common.js が端末設定から決める）
   - ゲームごとのアクセント色は body.game-xxx で差し替える（--main / --accent / --main-soft）
   - タイプ色は .t-{type} に3つの変数（--tb 基準色・--tbg 地・--tfg 文字）
   ========================================================= */

/* ---------- 1. 色の土台（ライト） ---------- */
:root {
  --bg: #FAF8F3;          /* 紙 */
  --surface: #FFFFFF;     /* カード */
  --text: #23262A;
  --muted: #5B6068;
  --line: #E3DFD5;
  --note-bg: #FFF4D6;
  --note-text: #6B4A00;
  --focus: #1F6B5C;

  /* ゲーム別（初期値＝ポケモン：森の緑＋夕焼けの橙） */
  --main: #1F6B5C;
  --main-soft: #E4F0EC;
  --accent: #B8501A;      /* 方針書の #C2571B は白文字で 4.49:1 のため濃くした */
  --on-accent: #FFFFFF;

  /* 相性の倍率セル */
  --m4-bg: #B8501A; --m4-fg: #FFFFFF;
  --m2-bg: #F9D9C4; --m2-fg: #7A2E08;
  --mh-bg: #D6E6F7; --mh-fg: #1B4778;
  --mq-bg: #9EC2EA; --mq-fg: #0F2F55;
  --m0-bg: #4A4E55; --m0-fg: #FFFFFF;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(35, 38, 42, .06);
  color-scheme: light;
}

/* ---------- 2. ダーク ---------- */
html[data-theme="dark"] {
  --bg: #16181B;
  --surface: #1F2226;
  --text: #E8E6E1;
  --muted: #A9AEB5;
  --line: #33373D;
  --note-bg: #3A2E10;
  --note-text: #F6D98A;
  --focus: #6CC4AE;

  --main: #6CC4AE;
  --main-soft: #1B3A33;
  --accent: #F2A36B;
  --on-accent: #16181B;

  --m4-bg: #F2A36B; --m4-fg: #16181B;
  --m2-bg: #4A2614; --m2-fg: #FFD2B5;
  --mh-bg: #142A42; --mh-fg: #BFD9F5;
  --mq-bg: #23446A; --mq-fg: #E2EEFB;
  --m0-bg: #C9CDD3; --m0-fg: #16181B;

  --shadow: none;
  color-scheme: dark;
}

/* ---------- 3. ゲーム別アクセント（使い回しの仕組み） ---------- */
body.game-pokemon { /* 初期値のまま */ }
body.game-minecraft,
.game-minecraft {
  --main: #2F6690;       /* 仮：空色。マイクラ開始時に決め直す */
  --main-soft: #E3EDF5;
  --accent: #8A5A2B;     /* 仮：土の茶 */
  --on-accent: #FFFFFF;
}
html[data-theme="dark"] body.game-minecraft,
html[data-theme="dark"] .game-minecraft {
  --main: #8CC0E8;
  --main-soft: #1A2E3D;
  --accent: #E0B07A;
  --on-accent: #16181B;
}
/* カード単位で色を当てるための補助（トップのゲーム選択） */
.game-pokemon-card {
  --main: #1F6B5C; --main-soft: #E4F0EC; --accent: #B8501A; --on-accent: #FFFFFF;
}
html[data-theme="dark"] .game-pokemon-card {
  --main: #6CC4AE; --main-soft: #1B3A33; --accent: #F2A36B; --on-accent: #16181B;
}

/* ---------- 4. タイプ18色（自前の配色。文字と地の比は コントラスト.md） ---------- */
.t-normal   { --tb:#8A8778; --tbg:#EFEEE8; --tfg:#45443B; }
.t-fire     { --tb:#E2622B; --tbg:#FDE9DF; --tfg:#8A2E0B; }
.t-water    { --tb:#2F7FD6; --tbg:#E2EEFB; --tfg:#164A85; }
.t-electric { --tb:#E0B200; --tbg:#FBF3CC; --tfg:#6B5300; }
.t-grass    { --tb:#3FA34D; --tbg:#E3F3E4; --tfg:#1E5B27; }
.t-ice      { --tb:#3DB8C4; --tbg:#DFF5F7; --tfg:#135A61; }
.t-fighting { --tb:#B5402F; --tbg:#F7E1DD; --tfg:#6E2016; }
.t-poison   { --tb:#9A4BB0; --tbg:#F1E3F5; --tfg:#5A2468; }
.t-ground   { --tb:#B9883A; --tbg:#F5EBD9; --tfg:#63461A; }
.t-flying   { --tb:#7C8FE0; --tbg:#E9ECFB; --tfg:#34408A; }
.t-psychic  { --tb:#E0507E; --tbg:#FCE3EB; --tfg:#8A1F43; }
.t-bug      { --tb:#8FA628; --tbg:#EFF3D9; --tfg:#4A5710; }
.t-rock     { --tb:#A89452; --tbg:#F2EEDD; --tfg:#554A20; }
.t-ghost    { --tb:#6A5AA8; --tbg:#E8E5F4; --tfg:#382D6B; }
.t-dragon   { --tb:#4F5CC9; --tbg:#E4E6F8; --tfg:#26307E; }
.t-dark     { --tb:#5B4E46; --tbg:#E9E5E2; --tfg:#3A302A; }
.t-steel    { --tb:#6E8A99; --tbg:#E6EDF0; --tfg:#33505E; }
.t-fairy    { --tb:#D97BC4; --tbg:#FAE6F5; --tfg:#7E2A6B; }

html[data-theme="dark"] .t-normal   { --tbg:#33322C; --tfg:#E6E4DA; }
html[data-theme="dark"] .t-fire     { --tbg:#3D1E12; --tfg:#FFCFB8; }
html[data-theme="dark"] .t-water    { --tbg:#13263D; --tfg:#C4DDFA; }
html[data-theme="dark"] .t-electric { --tbg:#332B08; --tfg:#F6E39A; }
html[data-theme="dark"] .t-grass    { --tbg:#16301A; --tfg:#C3E8C7; }
html[data-theme="dark"] .t-ice      { --tbg:#12302F; --tfg:#BDEDF1; }
html[data-theme="dark"] .t-fighting { --tbg:#351814; --tfg:#F3C3BA; }
html[data-theme="dark"] .t-poison   { --tbg:#2D1A33; --tfg:#E5C5EE; }
html[data-theme="dark"] .t-ground   { --tbg:#302616; --tfg:#EBD3A8; }
html[data-theme="dark"] .t-flying   { --tbg:#1E2240; --tfg:#CED6F7; }
html[data-theme="dark"] .t-psychic  { --tbg:#3A1724; --tfg:#F8C3D4; }
html[data-theme="dark"] .t-bug      { --tbg:#262C10; --tfg:#DAE6A6; }
html[data-theme="dark"] .t-rock     { --tbg:#2C2816; --tfg:#E2D9B0; }
html[data-theme="dark"] .t-ghost    { --tbg:#221E38; --tfg:#D3CDF0; }
html[data-theme="dark"] .t-dragon   { --tbg:#191D3E; --tfg:#C9CEF5; }
html[data-theme="dark"] .t-dark     { --tbg:#2A2420; --tfg:#DCD3CC; }
html[data-theme="dark"] .t-steel    { --tbg:#1C272D; --tfg:#C9D9E1; }
html[data-theme="dark"] .t-fairy    { --tbg:#36182F; --tfg:#F3CBE9; }

/* ---------- 5. 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 {
  font-family: "Zen Maru Gothic", "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 .5em;
}
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p { margin: 0 0 1em; }
a { color: var(--main); text-underline-offset: 3px; }
small, .note { font-size: 13px; color: var(--muted); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.wrap-wide { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.section { margin: 48px 0; }
.section > h2::before {   /* 見出しの印：手帳の「しおりひも」風の短い縦線 */
  content: ""; display: inline-block; width: 4px; height: .9em;
  background: var(--main); border-radius: 2px; margin-right: 10px; vertical-align: -1px;
}

/* ---------- 6. ヘッダー・作品チップ ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
/* ロゴ「攻略図鑑」と添え書きは別のかたまり（ノリ指摘3）：
   ロゴ＝丸ゴシック700・20px・本文色、リンク／添え書き＝UDゴシック400・12px・補足色、ロゴの外（リンクの外）に置く */
.brand-block { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 0; padding: 6px 0; }
.brand { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
.brand-name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; }
.brand-name::before { /* しおりひもの1本線（ロゴの飾りはこれだけ） */
  content: ""; display: inline-block; width: 3px; height: 18px; background: var(--main);
  border-radius: 2px; margin-right: 8px; vertical-align: -2px;
}
.brand-sub { margin: 0; font-family: "BIZ UDPGothic", sans-serif; font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.4; padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 420px) { .brand-sub { padding-left: 0; border-left: none; width: 100%; margin-top: -6px; } }
.icon-btn {
  min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}

.game-chip-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.game-chip-bar .wrap { display: flex; align-items: center; min-height: 52px; }
.game-chip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 6px 12px;
  border: 1.5px solid var(--main); border-radius: 999px;
  background: var(--main-soft); color: var(--text);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.game-chip .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* 作品名は省略しない（取り違え防止が最優先）。狭い画面では2行に折り返す */
.game-chip .name { font-weight: 700; flex: 1; min-width: 0; line-height: 1.35; }
.game-chip .count { font-size: 12px; white-space: nowrap; }
.game-chip .change { color: var(--main); font-weight: 700; white-space: nowrap; font-size: 13px; }

/* 作品をえらぶシート（スマホは下から出る） */
dialog.sheet {
  border: none; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: 85vh; border-radius: 16px 16px 0 0;
  background: var(--surface); color: var(--text);
}
@media (min-width: 720px) { dialog.sheet { margin: auto; border-radius: 16px; } }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .45); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.sheet-head h2 { font-size: 18px; margin: 0; }
.sheet-body { padding: 8px 16px 24px; }
.sheet-gen { font-size: 13px; color: var(--muted); margin: 16px 0 6px; }
.sheet-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px;
  padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.sheet-opt[aria-current="true"] { border: 2px solid var(--main); background: var(--main-soft); }
.sheet-opt[aria-current="true"] .nm::before { content: "✓ "; color: var(--main); }
.sheet-opt[disabled] { cursor: not-allowed; color: var(--muted); }
.sheet-opt .nm { flex: 1; font-weight: 700; }
.sheet-opt[disabled] .nm { font-weight: 400; }
.pill {
  display: inline-block; font-size: 12px; line-height: 1.5; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap;
}

/* ---------- 7. パンくず・注意の帯 ---------- */
.crumb { font-size: 13px; color: var(--muted); margin: 16px 0 8px; }
.crumb a { color: var(--muted); }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumb li + li::before { content: "＞"; margin-right: 4px; }
.game-kicker { font-size: 13px; color: var(--main); font-weight: 700; margin: 0 0 4px; }
.notice {
  background: var(--note-bg); color: var(--note-text);
  border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.7; margin: 12px 0;
}
.notice a { color: var(--note-text); font-weight: 700; }
.mock-flag {  /* 見本であることを示すラベル（本番では消す） */
  display: inline-block; font-size: 12px; font-weight: 700; padding: 0 8px; border-radius: 6px;
  border: 1.5px dashed var(--muted); color: var(--muted); vertical-align: 2px; white-space: nowrap;
}
.mock-box { border: 1.5px dashed var(--muted); border-radius: var(--radius); padding: 12px 14px; color: var(--muted); font-size: 14px; }

/* ---------- 8. タイプラベル ---------- */
.type {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 0; border-radius: 6px;
  background: var(--tbg); color: var(--tfg);
  font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap;
  overflow: hidden;
}
.type::before { content: ""; align-self: stretch; width: 4px; background: var(--tb); }
.types { display: flex; flex-wrap: wrap; gap: 6px; }
.type.lg { font-size: 15px; padding: 4px 12px 4px 0; }

/* ---------- 9. ボタン・カード ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 10px 20px; border-radius: 12px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--main); border: 1.5px solid var(--main); }
.btn-block { width: 100%; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 12px; }

/* ---------- 10. 道のりライン ---------- */
.route { list-style: none; display: flex; margin: 12px 0; padding: 0; position: relative; }
.route::before { content: ""; position: absolute; left: 12px; right: 12px; top: 13px; height: 2px; background: var(--line); }
.route li { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; font-size: 11px; color: var(--muted); }
.route .dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 700;
}
.route li.on .dot { border-color: var(--main); color: var(--main); }
.route li.now .dot { background: var(--main); border-color: var(--main); color: var(--surface); }
.route li.now { color: var(--text); font-weight: 700; }
.route .cap { margin-top: 2px; white-space: nowrap; }

/* ---------- 11. 案内役の枠（ツクボー起用は社長回答待ち。差し替え前提） ---------- */
.guide { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; }
.guide-face {
  flex: 0 0 44px; height: 44px; border-radius: 50%;
  border: 1.5px dashed var(--muted); display: grid; place-items: center;
  font-size: 10px; line-height: 1.2; color: var(--muted); text-align: center;
}
.guide-face.has-img { border: none; flex-basis: 56px; height: 64px; }
.guide-face img { width: 56px; height: 56px; object-fit: contain; display: block; }
.guide-bubble {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 1.7;
}
.guide-bubble::before {
  content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.guide-name { display: block; font-size: 12px; color: var(--muted); }

/* ---------- 12. 表 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: 14px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
table.data tr:last-child td, table.data tr:last-child th { border-bottom: none; }
table.data td.n { text-align: right; white-space: nowrap; }

/* ---------- 13. 倍率セル ---------- */
.m { display: inline-block; min-width: 2.6em; text-align: center; border-radius: 4px; font-weight: 700; font-size: 13px; line-height: 1.7; }
.m4 { background: var(--m4-bg); color: var(--m4-fg); }
.m2 { background: var(--m2-bg); color: var(--m2-fg); }
.mh { background: var(--mh-bg); color: var(--mh-fg); }
.mq { background: var(--mq-bg); color: var(--mq-fg); }
.m0 { background: var(--m0-bg); color: var(--m0-fg); }
.m1 { color: var(--muted); }

/* ---------- 14. 目次・折りたたみ ---------- */
details.fold { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
details.fold > summary { min-height: 48px; padding: 10px 14px; cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "＋ ひらく"; font-size: 13px; color: var(--main); font-weight: 700; }
details.fold[open] > summary::after { content: "－ とじる"; }
details.fold > .fold-body { padding: 0 14px 14px; }

/* ---------- 15. フッター ---------- */
.site-footer { margin-top: 64px; padding: 32px 0 48px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); line-height: 1.8; }
.site-footer h2 { font-size: 15px; color: var(--text); margin-top: 16px; }
.site-footer a { color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; list-style: none; }
.footer-links a { display: inline-block; min-height: 44px; line-height: 44px; }

/* =========================================================
   攻略図鑑 本番用の追加CSS（build.py が site.css の後ろに連結する）
   見本（design/mock/common.css）に無い部品だけをここに書く
   ========================================================= */

/* 記事本文 */
.article h1 { margin-top: 4px; }
.article ul, .article ol { padding-left: 1.4em; margin: 0 0 1em; }
.article li { margin-bottom: 4px; }
.article .table-scroll { margin: 8px 0 16px; }
.article table.data td, .article table.data th { min-width: 5.5em; }
.article table.data thead th { white-space: normal; }
.article .section { margin: 40px 0; }
.article .section h3 { margin-top: 28px; }
.article small { display: block; line-height: 1.7; }
.lead-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0 16px; }
.lead-box p:last-child, .lead-box ul:last-child { margin-bottom: 0; }

/* チェックリスト（保存して使える） */
ul.checklist { list-style: none; padding-left: 0; }
ul.checklist li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
ul.checklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; min-height: 32px; }
ul.checklist input { width: 20px; height: 20px; margin-top: 4px; flex: 0 0 auto; accent-color: var(--main); }

/* 準備中のリンク（リンクにしない） */
.soon { color: var(--muted); }
.soon-pill { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 6px; margin-left: 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.pending-box { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 12px 14px; color: var(--muted); font-size: 14px; background: transparent; }

/* 目次 */
.toc ol { margin: 0; padding-left: 1.4em; line-height: 2.1; }

/* よくある質問（1問ずつ開く・シェア） */
.faq-list { display: grid; gap: 8px; }
details.faq > summary { font-family: "Zen Maru Gothic", "BIZ UDPGothic", sans-serif; gap: 10px; line-height: 1.5; }
details.faq > summary .q { flex: 1; min-width: 0; }
details.faq > summary::after { flex: 0 0 auto; }
details.faq:target { border-color: var(--main); }
.faq .fold-body > p:first-child { margin-top: 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.share-lbl { font-size: 12px; color: var(--muted); margin-right: 4px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 6px 12px;
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.share-btn:hover { border-color: var(--main); }

/* 相性表の「タイプごとの相性」（静的に書き出す） */
.type-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.type-links a { text-decoration: none; }
.type-each { margin: 24px 0; }
.type-each h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.type-each .rowx { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; align-items: start; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.type-each .k { font-weight: 700; font-size: 14px; }
.type-each .k small { display: block; font-weight: 400; color: var(--muted); }
.type-each h4 { font-size: 14px; color: var(--muted); margin: 10px 0 6px; }
.mode-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.mode-btns a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border: 1.5px solid var(--main); border-radius: 12px; text-decoration: none; font-weight: 700; color: var(--main); background: var(--surface); line-height: 1.3; text-align: center; padding: 4px; }
.mode-btns a small { font-weight: 400; color: var(--muted); font-size: 11px; }

/* ポケモン個別 */
.type.t-unknown { --tb: #8A8778; --tbg: transparent; --tfg: var(--muted); border: 1px dashed var(--line); }
.vlabel { display: inline-block; font-size: 11px; line-height: 1.4; padding: 0 6px; border: 1px solid var(--muted); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.where-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 0; }
.pager a, .pager span { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; font-size: 14px; font-weight: 700; }
.pager .next { justify-content: flex-end; text-align: right; }
.pager span { color: var(--muted); font-weight: 400; }
.ab-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.evo-rows { display: grid; gap: 8px; }
table.data td .types { flex-wrap: nowrap; }
.moves-table td:nth-child(3), .moves-table td:nth-child(4) { white-space: nowrap; }

/* /pokemon/ と トップ */
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.article-list a { display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 700; }
.article-list a small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.quick span.off, .tile.off { opacity: .75; }
.quick span.off {
  display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;
  min-height: 48px; padding: 8px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1.5px dashed var(--line); color: var(--muted); line-height: 1.3;
}
.search select { min-height: 48px; font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); max-width: 9em; }
.search { flex-wrap: wrap; }

/* フッター */
.disclaimer { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.disclaimer p { margin: 0 0 6px; }
.disclaimer p:last-child { margin-bottom: 0; }

/* 表の文字が1文字ずつ折り返さないように（はみ出す分は表の中で横スクロール） */
table.data tbody th[scope="row"] { white-space: nowrap; }
table.data td.wide { min-width: 13em; }
table.data td .type { white-space: nowrap; }

/* 作品トップ：押せる道のりライン（見本の .route を流用） */
.route-pick li { cursor: pointer; }
.route-pick a.dot { text-decoration: none; position: relative; z-index: 1; }
.route-pick a.dot:hover { border-color: var(--main); }
.route-pick li.now a.dot { color: var(--surface); }
.route-pick .dot { width: 30px; height: 30px; }
.badge-pane { margin-top: 12px; }
.badge-pane h3 { font-size: 17px; }
.catch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catch-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catch-list .no { font-size: 12px; color: var(--muted); }
.catch-list .nm { font-weight: 700; font-size: 16px; line-height: 1.35; }
.catch-list .where-sub { font-size: 12px; line-height: 1.5; }
.catch-list li.note { grid-column: 1 / -1; }
table.vdiff td { width: 50%; vertical-align: top; }
table.vdiff td > span { display: flex; flex-direction: column; gap: 2px; }
table.vdiff .no { font-size: 12px; color: var(--muted); }
.tile.off .q { color: var(--muted); }

/* ポケモン一覧 */
.type-filter { margin-bottom: 4px; }
.type-filter .type.t-all { --tb: var(--main); --tbg: var(--main-soft); --tfg: var(--text); }
table.mon-list td.n { width: 3.5em; }