/*!
 * AI解体新書 ― すべての巻の共通スタイルシート
 * simple_dx(物語之巻) / simple_xxx(微塵之巻) / simple(シンプル版) / simple_ex(裏之巻) /
 * exhaustive_dx(網羅物語之巻) / exhaustive_xxx(網羅微塵之巻) / exhaustive(網羅版) / exhaustive_ex(網羅裏之巻)と外伝kitan(奇譚之巻)が共有する。
 * 外部依存(Webフォント・CDN・アイコンフォント)は持たない。1ファイルで完結する。
 *
 * 目次
 *   1. デザイントークン(ライト / ダーク / 裏之巻 / 裏之巻ダーク / 微塵之巻 / 微塵之巻ダーク)
 *   2. リセットと基本要素
 *   3. スキップリンク・ヘッダー・グローバルナビ
 *   4. レイアウト(page-body / content / sidebar)
 *   5. 記事コンポーネント(パンくず・記事ヘッダー・本文・コールアウト・要点)
 *   6. トップページ・サイトマップ・404 用コンポーネント
 *   7. フッター・ページ先頭へ戻る
 *   8. レスポンシブ
 *   9. 印刷・モーション低減・強制配色
 */

/* ============================================================
   1. デザイントークン
   ============================================================ */
:root {
  /* 面 */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fc;
  --color-surface: #ffffff;
  --color-surface-alt: #f8f9fe;
  --color-border: #e3e6f0;
  --color-border-strong: #c9cee0;
  /* 文字 */
  --color-text: #1b1e2b;
  --color-text-muted: #55596e;
  --color-text-faint: #6a6f83;
  /* 主色 */
  --color-primary: #3b4ccf;
  --color-primary-dark: #2b39a8;
  --color-primary-soft: #edf0fd;
  --color-primary-border: #b9c1f2;
  --color-on-primary: #ffffff;
  /* 副色(通常のコールアウト・図表の強調) */
  --color-accent: #ac5218;
  --color-accent-soft: #fff3ea;
  --color-accent-border: #f0c9ac;
  /* 状態色 */
  --color-success: #1f7a58;
  --color-success-soft: #e8f7f0;
  --color-warning: #b8323f;
  --color-warning-soft: #fdecef;
  --color-warning-border: #eeb4bd;
  /* コード・引用 */
  --color-code-bg: #f2f4fb;
  --color-code-text: #29304a;
  /* 影 */
  --shadow-sm: 0 1px 2px rgba(20, 24, 45, .06), 0 1px 3px rgba(20, 24, 45, .04);
  --shadow-md: 0 4px 12px rgba(20, 24, 45, .07), 0 1px 3px rgba(20, 24, 45, .05);
  --shadow-lg: 0 14px 38px rgba(20, 24, 45, .12), 0 3px 10px rgba(20, 24, 45, .06);
  /* 形状 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  /* レイアウト定数 */
  --header-height: 68px;
  --sidebar-width: 280px;
  --content-max: 1180px;
  /* 書体(OS標準スタックのみ。外部フォントを読み込まない) */
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
             "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-en: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
             "Hiragino Kaku Gothic ProN", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #12141d;
    --color-bg-alt: #181b27;
    --color-surface: #1c2032;
    --color-surface-alt: #212639;
    --color-border: #2b2f45;
    --color-border-strong: #3d4360;
    --color-text: #edeffa;
    --color-text-muted: #adb2cc;
    --color-text-faint: #9298b4;
    --color-primary: #8fa0ff;
    --color-primary-dark: #7f8dec;
    --color-primary-soft: #232849;
    --color-primary-border: #3f4780;
    --color-on-primary: #12141d;
    --color-accent: #ffab7d;
    --color-accent-soft: #3a2a20;
    --color-accent-border: #5e4331;
    --color-success: #63d3a6;
    --color-success-soft: #17342a;
    --color-warning: #ff8b9d;
    --color-warning-soft: #3a1f26;
    --color-warning-border: #63333d;
    --color-code-bg: #1f2436;
    --color-code-text: #dfe3f5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .5);
  }
}

/* 裏之巻(simple_ex / exhaustive_ex)。26トークンすべてを暖色系で定義し直す。
   .callout は中立色、.callout-warning は赤系に残して警告の段階を保つ。 */
body.theme-ura {
  --color-bg: #fffdfb;
  --color-bg-alt: #f8f3ee;
  --color-surface: #ffffff;
  --color-surface-alt: #fbf6f2;
  --color-border: #e8ddd4;
  --color-border-strong: #d3c2b5;
  --color-text: #241c1a;
  --color-text-muted: #5f544e;
  --color-text-faint: #786b64;
  --color-primary: #a53a29;
  --color-primary-dark: #85291b;
  --color-primary-soft: #fbeeea;
  --color-primary-border: #e8c3b8;
  --color-on-primary: #ffffff;
  --color-accent: #6f6257;
  --color-accent-soft: #f6f2ef;
  --color-accent-border: #ddd2c8;
  --color-success: #1f7a58;
  --color-success-soft: #e8f7f0;
  --color-warning: #9c2233;
  --color-warning-soft: #fdeaee;
  --color-warning-border: #eab0ba;
  --color-code-bg: #f6f1ec;
  --color-code-text: #33291f;
}

@media (prefers-color-scheme: dark) {
  body.theme-ura {
    --color-bg: #191315;
    --color-bg-alt: #201819;
    --color-surface: #241b1e;
    --color-surface-alt: #2a2023;
    --color-border: #392b2e;
    --color-border-strong: #4d3b3f;
    --color-text: #f6ecea;
    --color-text-muted: #c5b3ae;
    --color-text-faint: #ab9a95;
    --color-primary: #ff9070;
    --color-primary-dark: #e5745a;
    --color-primary-soft: #33211e;
    --color-primary-border: #5f3a2f;
    --color-on-primary: #191315;
    --color-accent: #cbbba9;
    --color-accent-soft: #262129;
    --color-accent-border: #453c40;
    --color-success: #63d3a6;
    --color-success-soft: #17342a;
    --color-warning: #ff8b9d;
    --color-warning-soft: #3b1f26;
    --color-warning-border: #6b343e;
    --color-code-bg: #251d20;
    --color-code-text: #ece0dd;
  }
}

/* 微塵之巻・網羅微塵之巻(simple_xxx / exhaustive_xxx)。灰と葡萄色。配色トークンを定義し直す。
   物語の巻と同じ部品(p.say・div.doc・div.pause)を使い、配色だけを変える。 */
body.theme-mijin {
  --color-bg: #fbfafb;
  --color-bg-alt: #f3f1f4;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f5f8;
  --color-border: #e2dee5;
  --color-border-strong: #c8c2cd;
  --color-text: #1e1b21;
  --color-text-muted: #56505b;
  --color-text-faint: #6b6470;
  --color-primary: #6a3f73;
  --color-primary-dark: #522f59;
  --color-primary-soft: #f3ecf4;
  --color-primary-border: #d5c1d9;
  --color-on-primary: #ffffff;
  --color-accent: #6b6258;
  --color-accent-soft: #f4f1ee;
  --color-accent-border: #dcd4cc;
  --color-success: #1f7a58;
  --color-success-soft: #e8f7f0;
  --color-warning: #a3283a;
  --color-warning-soft: #fcebee;
  --color-warning-border: #ebb3bd;
  --color-code-bg: #f2f0f3;
  --color-code-text: #2e2933;
}

@media (prefers-color-scheme: dark) {
  body.theme-mijin {
    --color-bg: #151317;
    --color-bg-alt: #1b191e;
    --color-surface: #211e25;
    --color-surface-alt: #27232b;
    --color-border: #332e38;
    --color-border-strong: #463f4c;
    --color-text: #eeeaf1;
    --color-text-muted: #bdb5c3;
    --color-text-faint: #a39aa9;
    --color-primary: #d6a6e0;
    --color-primary-dark: #c392ce;
    --color-primary-soft: #2e2433;
    --color-primary-border: #574460;
    --color-on-primary: #151317;
    --color-accent: #cdbfb2;
    --color-accent-soft: #272327;
    --color-accent-border: #463e42;
    --color-success: #63d3a6;
    --color-success-soft: #17342a;
    --color-warning: #ff8b9d;
    --color-warning-soft: #3b1f27;
    --color-warning-border: #6b343e;
    --color-code-bg: #221f26;
    --color-code-text: #e6e0ea;
  }
}

/* ============================================================
   2. リセットと基本要素
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* sticky ヘッダーの下にアンカー着地点が隠れるのを全アンカーで一括回避する */
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  text-underline-offset: .18em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  letter-spacing: .01em;
}

a { color: var(--color-primary); text-decoration-thickness: 1px; }
a:hover { color: var(--color-primary-dark); }

img, svg { max-width: 100%; }
img { height: auto; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: .12em .35em;
  border-radius: 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

/* ============================================================
   3. スキップリンク・ヘッダー・グローバルナビ
   ============================================================ */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease-out;
}
.skip-link:focus { transform: translateY(0); color: var(--color-on-primary); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--color-text);
  flex: 0 0 auto;
}
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
}
.brand-sub {
  font-size: .68rem;
  color: var(--color-text-muted);
  letter-spacing: .02em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.header-nav > a,
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-jp);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.header-nav > a:hover,
.nav-dropdown-toggle:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.header-nav > a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.nav-dropdown-toggle.is-active {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
}
.nav-caret { width: 10px; height: 10px; transition: transform .16s ease; }
.nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
/* 開閉の真実はクラス .is-open ただ一つ。:hover / :focus-within では開かない
   (CSSとJSの二重制御による aria-expanded の食い違いを避ける)。 */
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  display: none;
  min-width: 300px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.nav-dropdown.is-open > .nav-dropdown-panel { display: block; }
.nav-dropdown-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-dropdown-panel .nav-group-label {
  display: block;
  margin: 6px 8px 4px;
  font-family: var(--font-en);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.nav-dropdown-panel a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--color-text);
  text-decoration: none;
}
.nav-dropdown-panel a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.nav-dropdown-panel a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.nav-dropdown-panel .nav-chapter-num {
  display: inline-block;
  min-width: 3.4em;
  padding-right: 6px;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .78rem;
}
.nav-dropdown-panel a[aria-current="page"] .nav-chapter-num { color: var(--color-primary-dark); }

/* 網羅版(31章)のメガパネル */
.nav-dropdown-panel.mega {
  display: none;
  width: min(78vw, 940px);
  right: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;
  padding: 16px 18px;
}
.nav-dropdown.is-open > .nav-dropdown-panel.mega { display: grid; }
.mega-group { break-inside: avoid; }
.mega-group + .mega-group { margin-top: 2px; }

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}
.hamburger:hover { background: var(--color-bg-alt); }

/* ============================================================
   4. レイアウト
   ============================================================ */
.page-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 44px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 34px 24px 72px;
}

.content { min-width: 0; }
.content-wide { max-width: 820px; }

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 2px;
}

.side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.side-card h3 {
  margin: 0 0 10px;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.side-card p { margin: 0 0 8px; font-size: .84rem; color: var(--color-text-muted); }
.side-card p:last-child { margin-bottom: 0; }

/* 目次(ビルド時に本文の h2/h3 から生成し、JSは現在位置の強調のみを担う) */
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block;
  padding: 5px 9px;
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-decoration: none;
}
.toc-list a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.toc-list a.active,
.toc-list a[aria-current="true"] {
  border-left-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.toc-list .toc-h3 a { padding-left: 22px; font-size: .8rem; }

/* サイドバーの章ナビ(モバイルではドロワーとして全章を提供する) */
.side-nav { }
.side-nav a {
  display: block;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text);
  text-decoration: none;
}
.side-nav a:hover { background: var(--color-bg-alt); color: var(--color-primary-dark); }
.side-nav a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav .nav-chapter-num {
  margin-right: .45em;
  color: var(--color-text-muted);
  font-size: .78rem;
}
.side-nav a[aria-current="page"] .nav-chapter-num { color: inherit; }
.side-nav-group { margin-top: 10px; }
.side-nav-group:first-of-type { margin-top: 4px; }
.side-nav-group-label {
  display: block;
  margin: 0 0 3px;
  font-family: var(--font-en);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.side-nav details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 3px;
  font-family: var(--font-en);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.side-nav details > summary::-webkit-details-marker { display: none; }
.side-nav details > summary::before {
  content: "";
  flex: 0 0 auto;
  margin-top: .3em;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.side-nav details[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.side-nav .side-nav-count {
  color: var(--color-text-faint);
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.side-nav details > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }

.sidebar-overlay { display: none; }

/* ============================================================
   5. 記事コンポーネント
   ============================================================ */
.breadcrumb { margin: 0 0 18px; font-size: .82rem; color: var(--color-text-muted); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before {
  content: "/";
  color: var(--color-border-strong);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 700; }

.article-header { margin: 0 0 30px; }
.article-header h1 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.25rem);
  letter-spacing: .005em;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.article-meta > span, .article-meta > time { display: inline-flex; align-items: center; gap: 5px; }
/* 記事ヘッダーの最終確認日。信頼のために出すが、読む判断には効かないので一段弱く出す */
.article-meta .meta-rev { color: var(--color-text-faint); }
.article-lead {
  margin: 0;
  padding: 16px 20px;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* 裏之巻の定型注記(類型であること・架空事例であること) */
.notice {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: .84rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.notice strong { color: var(--color-text); }

/* 読み進み具合のバー。要素は main.js が作るので、JS無効時は存在しない */
.read-progress {
  position: fixed;
  top: calc(var(--header-height) - 3px);
  left: 0;
  z-index: 99;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.read-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-primary);
}

.article-body { margin: 0; }
.article-body > section { margin: 0 0 12px; }
.article-body h2 {
  margin: 46px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
  font-size: clamp(1.24rem, 1.05rem + .6vw, 1.5rem);
}
.article-body h2:first-child { margin-top: 8px; }
.article-body h3 {
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
  font-size: 1.08rem;
}
.article-body p { margin: 0 0 18px; }
/* シンプル版と同主題の章で「この章が足すもの」を示す1行。地の文から一段引いて出す */
.article-body p.chapter-delta {
  padding: 10px 14px;
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .92rem;
  color: var(--color-text-muted);
}
/* 地の文は1行あたり全角46字程度に収める(日本語は50字を超えると行の追跡が落ちる)。
   表・コールアウト・要点は箱として全幅を使うため、直下の要素だけを対象にする。 */
.article-body > section > p,
.article-body > section > ul,
.article-body > section > ol { max-width: 46em; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 1.5em; }
.article-body li { margin-bottom: 8px; }
.article-body li > ul, .article-body li > ol { margin-top: 8px; margin-bottom: 4px; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: normal; background: linear-gradient(transparent 62%, var(--color-primary-soft) 62%); }

.table-scroll { overflow-x: auto; margin: 0 0 24px; }
/* 表は本文中でもトップページの節でも同じ体裁で出す(.table-scroll は生成側が必ず付ける) */
.article-body table,
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--color-surface);
}
.article-body caption,
.table-scroll caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.article-body th, .article-body td,
.table-scroll th, .table-scroll td {
  border: 1px solid var(--color-border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.article-body thead th,
.table-scroll thead th {
  background: var(--color-bg-alt);
  font-weight: 700;
  white-space: nowrap;
}
.article-body tbody th,
.table-scroll tbody th { background: var(--color-surface-alt); font-weight: 700; }

/* コールアウト。.callout-warning が単独で使われても枠と余白が効くように
   両クラスに基底スタイルを持たせる(基底クラス欠落による表示崩れの予防)。 */
.callout,
.callout-warning {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  font-size: .95rem;
  line-height: 1.85;
}
.callout > strong:first-child,
.callout-warning > strong:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--color-accent);
  font-size: .93rem;
}
.callout p:last-child, .callout-warning p:last-child { margin-bottom: 0; }
/* 事例が架空であることの担保。本文の各文に留保を付ける代わりにラベル側で1回示す */
.callout-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--color-accent-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-faint);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.callout ul, .callout-warning ul { margin-bottom: 0; }
.callout-warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
}
.callout-warning > strong:first-child { color: var(--color-warning); }

.keypoints {
  margin: 44px 0 0;
  padding: 20px 22px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
}
.keypoints h2, .keypoints h3 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
  color: var(--color-primary-dark);
}
.keypoints ul { list-style: none; margin: 0; padding: 0; }
.keypoints li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
  font-size: .93rem;
  line-height: 1.8;
}
.keypoints li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-primary);
}
.keypoints li:last-child { margin-bottom: 0; }
.keypoints .todo {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.keypoints .todo strong { color: var(--color-primary-dark); }

/* チェックリスト(実チェックボックス。状態は localStorage に保持する) */
.checklist { list-style: none; margin: 0 0 24px; padding: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .93rem;
  line-height: 1.75;
}
.checklist input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: .35em 0 0;
  accent-color: var(--color-primary);
}
.checklist label { cursor: pointer; }
.checklist input:checked + label { color: var(--color-text-muted); text-decoration: line-through; }

/* 用語集 */
.glossary { margin: 0 0 28px; }
.glossary dt {
  margin: 20px 0 6px;
  padding-left: 11px;
  border-left: 3px solid var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
  scroll-margin-top: calc(var(--header-height) + 20px);
}
.glossary dd {
  margin: 0 0 0 14px;
  color: var(--color-text);
  font-size: .93rem;
  line-height: 1.8;
}
.glossary dd .glossary-ref { font-size: .84rem; color: var(--color-text-muted); }
.term-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 26px;
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  list-style: none;
}
.term-index li { margin: 0; }
.term-index a {
  display: inline-block;
  padding: 2px 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: .8rem;
  text-decoration: none;
}
.term-index a:hover { border-color: var(--color-primary); }

/* 記事末尾の関連リンクと前後ナビ */
.related {
  margin: 40px 0 0;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.related h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 1rem;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin-bottom: 12px; font-size: .92rem; line-height: 1.7; }
.related li:last-child { margin-bottom: 0; }
.related a { font-weight: 700; text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related .related-note { display: block; color: var(--color-text-muted); font-size: .85rem; font-weight: 400; }

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 34px 0 0;
}
.article-nav a {
  display: block;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.article-nav a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.article-nav .nav-dir {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.article-nav .nav-title { font-size: .92rem; font-weight: 700; color: var(--color-text); line-height: 1.6; }
.article-nav .next { grid-column: 2; text-align: right; }

/* ============================================================
   6. トップページ・サイトマップ・404
   ============================================================ */
.hero {
  padding: 46px 0 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 34px;
}
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  background: var(--color-primary-soft);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-primary-dark);
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.32;
}
.hero p { margin: 0 0 18px; font-size: 1.02rem; max-width: 62ch; color: var(--color-text-muted); }
/* 読者の状況を並べる導入文。本文より一段大きく、地の文の色で出す */
.hero p.hero-lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--color-text);
  max-width: 56ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px !important; max-width: none !important; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.hero-stats strong { color: var(--color-text); font-size: 1.02rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }

.part-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 44px;
}
.part-overview-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.part-overview-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.part-overview-card .part-eyebrow { margin-bottom: 6px; }
.part-overview-card h2, .part-overview-card h3 {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-size: 1.04rem;
}
.part-overview-card p { margin: 0 0 10px; font-size: .875rem; color: var(--color-text-muted); line-height: 1.75; }
.part-overview-card .card-meta {
  margin-top: auto;
  font-size: .78rem;
  color: var(--color-text-faint);
  font-family: var(--font-en);
}

.part-eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.part-section { margin: 0 0 46px; scroll-margin-top: calc(var(--header-height) + 20px); }
.part-section > h2 {
  margin: 6px 0 6px;
  font-size: 1.35rem;
}
.part-section > p { margin: 0 0 18px; color: var(--color-text-muted); font-size: .92rem; max-width: 70ch; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
.card-grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.topic-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.topic-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.topic-card h3 { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.55; }
.topic-card p { margin: 0; font-size: .86rem; color: var(--color-text-muted); line-height: 1.75; }
.topic-card .card-meta { margin-top: auto; font-size: .76rem; color: var(--color-text-faint); font-family: var(--font-en); }
.topic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-on-primary);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: .82rem;
}
.topic-icon.b { background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 60%, #000)); }
.topic-icon.c { background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, #000)); }

/* ルート(4バリアント選択)の2×2マトリクス */
.variant-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 18px;
  margin: 0 0 20px;
}
.variant-card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
}
.variant-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); }
.variant-card .variant-axis {
  display: inline-block;
  margin-bottom: 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary);
}
.variant-card h2 { margin: 0 0 12px; font-size: 1.22rem; }
/* 迷っている読者に既定の入口を1つ示す。色以外の手掛かり(バッジ・枠の太さ)も持たせる */
.variant-badge {
  display: inline-block;
  margin-left: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.variant-card.is-default {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
}
.variant-card dl { margin: 0 0 14px; font-size: .87rem; line-height: 1.75; }
.variant-card dt {
  float: left;
  width: 6.6em;
  clear: left;
  color: var(--color-text-faint);
  font-size: .8rem;
}
.variant-card dd { margin: 0 0 6px 6.8em; color: var(--color-text-muted); }
.variant-card .variant-go {
  margin-top: auto;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.variant-card.is-ura { border-top: 4px solid #a53a29; }
.variant-card.is-omote { border-top: 4px solid var(--color-primary); }

.sitemap-group { margin: 0 0 34px; }
.sitemap-group > h2 { margin: 0 0 4px; font-size: 1.16rem; }
.sitemap-group > p { margin: 0 0 14px; font-size: .88rem; color: var(--color-text-muted); }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .93rem;
}
.sitemap-list .sitemap-num {
  flex: 0 0 4.6em;
  color: var(--color-text-faint);
  font-family: var(--font-en);
  font-size: .84rem;
}
.sitemap-list a { font-weight: 700; text-decoration: none; }
.sitemap-list a:hover { text-decoration: underline; }
.sitemap-desc {
  display: block;
  margin-top: 2px;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 400;
}

.error-code {
  margin: 30px 0 8px;
  font-family: var(--font-en);
  font-size: clamp(3.4rem, 2rem + 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 0 30px;
}
.info-item {
  padding: 16px 18px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}
.info-item h3 { margin: 0 0 6px; font-size: .92rem; }
.info-item p { margin: 0; font-size: .85rem; color: var(--color-text-muted); line-height: 1.75; }

.site-note {
  margin: 40px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: .84rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.site-note h2, .site-note h3 { margin: 0 0 8px; font-size: .92rem; color: var(--color-text); }
.site-note p { margin: 0 0 8px; }
.site-note p:last-child { margin-bottom: 0; }
.site-note dl { margin: 0; }
.site-note dt { float: left; clear: left; width: 6.2em; font-weight: 700; color: var(--color-text); }
.site-note dd { margin: 0 0 6px 6.6em; }

/* ============================================================
   7. フッター・ページ先頭へ戻る
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 40px 24px 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.footer-col h3 {
  margin: 0 0 12px;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--color-text);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a { font-size: .85rem; color: var(--color-text-muted); text-decoration: none; }
.footer-col a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.footer-col .sitemap-desc { font-size: .78rem; margin-bottom: 4px; }
.footer-col p { margin: 0 0 10px; font-size: .84rem; color: var(--color-text-muted); line-height: 1.75; }
.footer-group-label {
  display: block;
  margin: 12px 0 4px;
  font-family: var(--font-en);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.footer-group-label:first-child { margin-top: 0; }
.footer-bottom {
  max-width: var(--content-max);
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: .78rem;
  color: var(--color-text-faint);
}
.footer-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--color-text); }
.footer-brand .brand-mark { width: 28px; height: 28px; }

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-primary-dark);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-primary-dark); }

/* ============================================================
   7b. 物語之巻・網羅物語之巻(kind="story" の話)
   配色トークンは増やさない(4テーマのコントラスト検査の対象を増やさないため)。
   使うのは既存の組だけ: 本文 / 地色・副地色、微弱文字 / 地色、主色 / 地色・カード。
   ============================================================ */
/* 記事ヘッダーの「第N話 物語之巻」 */
.story-no {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary);
}
.story-no span + span { color: var(--color-text-faint); font-weight: 400; }
.content-story .article-header h1 { letter-spacing: .02em; }

/* 物語の本文。場面の見出し(h2)は章の見出しより控えめにする */
.content-story .article-body p { line-height: 2.05; }
.content-story .article-body h2 {
  margin-top: 44px;
  font-size: 1.08rem;
  color: var(--color-text-muted);
  letter-spacing: .04em;
}

/* 会話。話者は本文に書かず data-who に持ち、::before で札として出す。
   札の欄幅は名前ごとに決まる(max-content)ので、札の長さに制限はない。
   セリフ本体は sitegen.wrap_say_lines() が span.say-body で1つに包む。 */
.article-body p.say {
  margin-bottom: 14px;
}
.article-body p.say[data-who] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .6em;
  align-items: baseline;
}
.article-body p.say[data-who]::before {
  content: attr(data-who);
  font-size: .8em;
  white-space: nowrap;
  color: var(--color-text-faint);
}

/* 作中の文書・画面(提案書の抜粋、報告書の数字、AIの出力、メール)。
   人が口に出した言葉(p.say)と、書かれた文の引用を分ける。 */
.doc {
  margin: 20px 0 24px;
  padding: 14px 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .93rem;
}
.doc p { margin: 0 0 8px; line-height: 1.85; }
.doc p:last-child { margin-bottom: 0; }
.doc ul, .doc ol { margin: 0 0 8px; }
.doc .doc-label {
  margin-bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-faint);
}

/* 考えてみる ― 話の途中で1度立ち止まる。答え合わせはしない */
.pause {
  margin: 34px 0;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pause::before {
  content: "考えてみる";
  display: block;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-primary);
}
.pause .pause-q {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-text);
}

/* 知識・罠の巻の現場のシーンから、同じ出来事を描いた物語の話へ */
.callout .callout-link {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* 物語 → 解説の章への一覧 */
.story-refs { border-left: 4px solid var(--color-primary); }

/* 知識・罠の章 → 物語の話への案内(記事ヘッダー) */
.story-pointer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 14px 0 0;
  font-size: .88rem;
  line-height: 1.7;
}
.story-pointer-label {
  padding: 1px 9px;
  border: 1px solid var(--color-primary-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.story-pointer a { font-weight: 700; }

/* 物語の巻のトップの登場人物 */
.cast { margin: 0 0 30px; }
.cast dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
}
.cast dt { font-weight: 700; color: var(--color-text); white-space: nowrap; }
.cast dd { margin: 0; color: var(--color-text-muted); }

/* 入口の組ごとのまとまり */
.variant-set { margin: 0 0 30px; }
.variant-set-name { margin: 0 0 6px; font-size: 1.1rem; }
.variant-set > p { margin: 0 0 14px; color: var(--color-text-muted); font-size: .92rem; }
.variant-card h3,
.variant-card h4 { margin: 0 0 12px; font-size: 1.18rem; }
.variant-card.is-story { border-top: 4px solid var(--color-success); }
.variant-card.is-mijin { border-top: 4px solid #6a3f73; }

/* ============================================================
   8. レスポンシブ
   ============================================================ */
@media (max-width: 1080px) {
  .page-body { gap: 30px; }
  .nav-dropdown-panel.mega { width: min(92vw, 820px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .header-nav { display: none; }
  .hamburger { display: flex; }

  /* ルートはドロワーを持たないため、ヘッダーのリンクを隠さず折り返して残す */
  .header-nav.header-nav-plain {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }
  .header-nav.header-nav-plain > a { padding: 6px 9px; font-size: .82rem; }
  .page-body { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 64px; }
  .site-header { padding: 0 16px; }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 130;
    width: min(88vw, 340px);
    max-height: none;
    height: 100%;
    margin: 0;
    padding: calc(var(--header-height) + 14px) 18px 34px;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  /* JS無効時のフォールバック: #sidebar への遷移で開ける */
  .sidebar:target { transform: translateX(0); }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    background: rgba(9, 11, 20, .5);
  }
  body.sidebar-open .sidebar-overlay { display: block; }
  body.sidebar-open { overflow: hidden; }

  .article-nav { grid-template-columns: 1fr; }
  .article-nav .next { grid-column: 1; }
  .hero { padding-top: 30px; }
  .variant-card dt { float: none; width: auto; }
  .variant-card dd { margin-left: 0; }
  .site-note dt { float: none; width: auto; }
  .site-note dd { margin-left: 0; }
}

@media (max-width: 560px) {
  .site-header { height: auto; min-height: var(--header-height); padding: 10px 14px; flex-wrap: wrap; }
  .site-header .brand-sub { display: none; }
  .header-nav.header-nav-plain { width: 100%; justify-content: flex-start; margin-left: 0; }
  .article-body h2 { margin-top: 36px; }
  .keypoints, .related, .callout, .callout-warning, .pause, .doc { padding-left: 15px; padding-right: 15px; }
  .cast dl { grid-template-columns: 1fr; gap: 2px; }
  .cast dd { margin-bottom: 8px; }
  .article-body p.say[data-who]::before { font-size: .76em; }
  .article-lead { padding: 14px 16px; }
  .back-to-top { right: 14px; bottom: 14px; }
}

/* ============================================================
   9. 印刷・モーション低減・強制配色
   ============================================================ */
@media print {
  :root {
    --color-bg: #fff;
    --color-bg-alt: #fff;
    --color-surface: #fff;
    --color-surface-alt: #fff;
    --color-text: #000;
    --color-text-muted: #333;
    --color-text-faint: #555;
    --color-primary: #000;
    --color-primary-dark: #000;
    --color-primary-soft: #fff;
    --color-border: #999;
    --color-border-strong: #666;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
  .site-header, .sidebar, .sidebar-overlay, .site-footer,
  .back-to-top, .hamburger, .skip-link, .article-nav, .breadcrumb,
  .read-progress, [data-checklist-reset], .term-index { display: none !important; }
  body { font-size: 11pt; line-height: 1.6; }
  .page-body { display: block; max-width: none; padding: 0; }
  .content { max-width: none; }
  .article-header h1 { font-size: 18pt; }
  .article-body h2 { font-size: 13pt; margin-top: 18pt; page-break-after: avoid; }
  .article-body h3 { font-size: 11.5pt; page-break-after: avoid; }
  .article-body p, .article-body li { orphans: 3; widows: 3; }
  .callout, .callout-warning, .keypoints, .related, .checklist li, .article-lead, .pause, .doc {
    border: 1px solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .checklist input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 1.2pt solid #000; border-radius: 2px; }
  .article-body table { page-break-inside: avoid; }
  .article-body a { color: #000; text-decoration: underline; }
  .table-scroll { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .topic-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .read-progress span { background: Highlight; }
  .error-code { color: CanvasText; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  .topic-icon { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .callout, .callout-warning, .keypoints, .side-card, .topic-card, .variant-card { border: 1px solid CanvasText; }
  .article-body em { background: none; text-decoration: underline; }
}


/* 奇譚之巻(kitan・外伝)。表=藍、裏=朱に対して紫紺。読み物であって資料ではないことを
   配色でも示す。26トークンすべてを定義し直し、警告色だけは裏之巻と同じ段階を保つ。 */
body.theme-kitan {
  --color-bg: #fdfcff;
  --color-bg-alt: #f3f0fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f8f6fd;
  --color-border: #e3dff1;
  --color-border-strong: #c5bddd;
  --color-text: #1d1a2b;
  --color-text-muted: #55506e;
  --color-text-faint: #6a6483;
  --color-primary: #5a3fa8;
  --color-primary-dark: #452f85;
  --color-primary-soft: #f1ecfb;
  --color-primary-border: #c9bdea;
  --color-on-primary: #ffffff;
  --color-accent: #8a5a12;
  --color-accent-soft: #fdf4e7;
  --color-accent-border: #ecd7b5;
  --color-success: #1f7a58;
  --color-success-soft: #e8f7f0;
  --color-warning: #b02a44;
  --color-warning-soft: #fdeaef;
  --color-warning-border: #efb3c0;
  --color-code-bg: #f3f1fa;
  --color-code-text: #2b2740;
}

@media (prefers-color-scheme: dark) {
  body.theme-kitan {
    --color-bg: #15121d;
    --color-bg-alt: #1b1726;
    --color-surface: #201b2e;
    --color-surface-alt: #262036;
    --color-border: #322b45;
    --color-border-strong: #473e60;
    --color-text: #efecf9;
    --color-text-muted: #b6afce;
    --color-text-faint: #9c95b6;
    --color-primary: #b49cff;
    --color-primary-dark: #a28bf0;
    --color-primary-soft: #272046;
    --color-primary-border: #463c75;
    --color-on-primary: #15121d;
    --color-accent: #f0c07a;
    --color-accent-soft: #352a1c;
    --color-accent-border: #55432c;
    --color-success: #63d3a6;
    --color-success-soft: #17342a;
    --color-warning: #ff8b9d;
    --color-warning-soft: #3a1f26;
    --color-warning-border: #63333d;
    --color-code-bg: #221d31;
    --color-code-text: #e3dff2;
  }
}

.scene-break {
  margin: 26px 0;
  border: 0;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1;
}

.variant-card.is-kitan { border-top: 4px solid #5a3fa8; }
.variant-card.is-kitankai { border-top: 4px solid #0f6b78; }
.variant-extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* 全巻を並べる入口のナビは、巻が増えても折り返して表示する。 */
.site-header-root {
  height: auto;
  min-height: var(--header-height);
  flex-wrap: wrap;
  row-gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-header-root .header-nav-plain {
  flex-wrap: wrap;
  min-width: 0;
}

@media (max-width: 880px) {
  .variant-extras { grid-template-columns: minmax(0, 1fr); }
}