/* style.css — 小児科 暗記ノート（唯一のスタイル正本）
 *
 * デザイン層の出所: github.com/mathbullet/skills
 *   plugins/html/skills/html/design-system/document.css（MIT License）
 *   Copyright (c) 2024 Hayate Funakura
 *   ローカル複製: ~/.claude/skills/tech-writing/assets/mathbullet-doc.css
 *
 * 上流からの意図的な差分は3点だけ:
 *   1) 書体 — 上流の "Ubuntu Sans" はこのMacに無く、"Noto Sans JP" は Black ウェイトしか
 *      入っていない（~/Library/Fonts に NotoSansJP-Black.ttf のみ）。先頭に置くと本文・表・
 *      引用まで全部が極太で組まれるため、Hiragino Sans を先頭に据える。
 *   2) ダークテーマ — 上流はライトのみ。本サイトは夜間に使うのでトークンを反転させた層を足す。
 *   3) 学習UI（進捗・3状態・メモ・図解カード）— 上流に無い部品。上流のトークンだけで組む。
 *
 * このファイルは build.sh がローカル版・公開版の双方へコピーする唯一の実体である。
 * 以前は build.sh のヒアドキュメント／暗記サイト/style.css／公開リポの手編集版の3箇所に
 * 実体があり、互いにズレていた。ここ以外に CSS を書かないこと。
 */

/* ============================================================
   1. トークン
   ============================================================ */

:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --ink: #111110;
  --ink-body: #1a1a1a;
  --border: #111110;
  --rule: #dfdfdf;
  --muted: #595959;
  --faint: #757570;
  --link: #2990da;
  --accent: #d63a2f;

  --radius: 12px;
  --radius-sm: 8px;
  --bw: 1.5px;

  /* 書体: Hiragino 先頭（上流との意図的差分。冒頭コメント参照） */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Ubuntu Mono", monospace;

  /* 学習UIの機能色（状態の識別にのみ使う。装飾には使わない） */
  --known: #1a7f37;
  --shaky: #b45309;

  --measure: 760px;
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 96px;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt";
}

/* pandoc の title-block は topnav と重複するので出さない */
#title-block-header {
  display: none;
}

/* ============================================================
   2. 見出し（上流: 左バー h1=12px / h2=10px）
   ============================================================ */

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

h1 {
  font-size: 28px;
  border-left: 12px solid var(--ink);
  padding-left: 18px;
  margin: 28px 0 20px;
}

h2 {
  font-size: 21px;
  border-left: 10px solid var(--ink);
  padding-left: 14px;
  margin: 52px 0 16px;
  /* 見出し内で float する .rev-ctl を見出しの箱に含める。
     含めないと直後の本文が学習UIに回り込んで1行目だけ短くなる。 */
  display: flow-root;
}

h3 {
  font-size: 17px;
  margin: 32px 0 10px;
}

h4 {
  font-size: 15px;
  margin: 24px 0 8px;
  color: var(--muted);
}

/* 習得状態で見出しの左バーを塗り分ける（色は状態の識別のみ） */
h2[data-mastery="known"] {
  border-left-color: var(--known);
}
h2[data-mastery="shaky"] {
  border-left-color: var(--shaky);
}

/* ============================================================
   3. 本文要素
   ============================================================ */

p {
  margin: 12px 0;
}
p,
li {
  overflow-wrap: break-word;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

strong {
  color: var(--ink);
}

/* 上流は em をアクセント赤にする。医学文では強調が多く赤が氾濫するため、
   赤は .doc-key 相当（後述 .key）に限り、em は素の強調に留める */
em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.key {
  color: var(--accent);
  font-weight: 700;
}

ul,
ol {
  padding-left: 1.6em;
  margin: 12px 0;
}
ul {
  list-style: none;
}
ul > li {
  position: relative;
}
ul > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 0.85em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--ink);
}
ul ul > li::before {
  width: 0.3em;
  height: 0.3em;
  top: 0.9em;
  background: var(--muted);
}
li {
  margin: 4px 0;
}
li > ul,
li > ol {
  margin: 4px 0;
}

hr {
  border: none;
  border-top: var(--bw) solid var(--rule);
  margin: 40px 0;
}

blockquote {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin: 24px 0;
}
blockquote > :first-child {
  margin-top: 0;
}
blockquote > :last-child {
  margin-bottom: 0;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
p code,
li code,
td code {
  background: #f1efe9;
  border-radius: 5px;
  padding: 0.08em 0.35em;
}
pre {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  overflow-x: auto;
  line-height: 1.6;
  margin: 20px 0;
}
pre code {
  background: none;
  padding: 0;
  font-size: 13.5px;
}

/* ============================================================
   4. 表（暗記シートの主役）
   ============================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.7;
  display: block;
  overflow-x: auto;
}
th,
td {
  border: var(--bw) solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  min-width: 4.5em;
}
th {
  color: var(--ink);
  border-bottom: var(--bw) solid var(--border);
  background: var(--surface);
  white-space: nowrap;
  font-weight: 700;
}

/* ============================================================
   5. トップナビ
   ============================================================ */

.topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  margin-bottom: 4px;
  border-bottom: var(--bw) solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
}
.topnav a {
  color: var(--ink);
  font-weight: 700;
}
.topnav a:hover {
  color: var(--link);
}

/* 目次へ戻らずシート間を移動するためのグループ別ドロップダウン。
   <details> だけで組み、JS を増やさない。 */
.nav-brand {
  flex: 0 0 auto;
}
.nav-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  margin-right: 46px; /* 右上に固定表示されるテーマ切替ボタンを避ける */
  /* overflow は指定しない。overflow-x:auto を入れると縦方向もクリップされ、
     開いた .nav-menu（position:absolute）が見えなくなる。 */
}
.nav-sec {
  position: relative;
  flex: 0 0 auto;
}
.nav-sec > summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
  font-weight: 700;
}
.nav-sec > summary::-webkit-details-marker {
  display: none;
}
.nav-sec > summary::after {
  content: " ▾";
  color: var(--faint);
}
.nav-sec[open] > summary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.nav-sec[open] > summary::after {
  color: var(--bg);
}
.nav-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  display: grid;
  padding: 6px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 14px;
}
.nav-menu a {
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 400;
  white-space: nowrap;
}
.nav-menu a:hover {
  background: var(--rule);
  text-decoration: none;
}

@media (max-width: 720px) {
  /* 1行目＝「目次へ戻る」と図表モード、2行目＝グループ。
     右上に固定表示されるテーマ切替ボタンの分だけ1行目を空ける。 */
  .topnav {
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 46px;
  }
  .nav-groups {
    order: 3;
    width: 100%;
    margin: 0;
  }
  .nav-menu {
    right: auto;
    left: 0;
    min-width: 190px;
  }
}

/* ============================================================
   6. 目次
   ------------------------------------------------------------
   旧CSSは nav#TOC ul ul{display:none} で h2 以下を全部隠していた。
   pandoc は h2 を h1 配下にネストするため、12個の節があっても
   表示は h1 の1行だけになっていた（＝目次が機能していなかった）。
   ここでは h1 の行を畳んで h2 を連番付きで出し、h3 以下だけ隠す。
   ============================================================ */

nav#TOC {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  padding: 16px 24px;
  margin: 24px 0 32px;
  font-size: 14.5px;
  line-height: 1.75;
}

nav#TOC::before {
  content: "目次";
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
}

nav#TOC ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav#TOC li {
  margin: 0;
}
nav#TOC li::before {
  content: none;
}

/* h1 が1つのシートでは、その行はページ見出しと重複するのでリンクを畳む。
   心電図・画像アトラスのように h1 が4つあるシートでは区切り見出しとして残す。 */
nav#TOC > ul > li:only-child > a {
  display: none;
}
nav#TOC > ul > li:not(:only-child) > a {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 4px;
}
nav#TOC > ul > li:not(:only-child):first-child > a {
  margin-top: 0;
}

/* h2 の階層＝実際の目次。連番を振る */
nav#TOC > ul > li > ul {
  counter-reset: toc;
  columns: 2;
  column-gap: 32px;
}
nav#TOC > ul > li > ul > li {
  counter-increment: toc;
  break-inside: avoid;
  padding-left: 2.4em;
  text-indent: -2.4em;
  margin: 3px 0;
}
nav#TOC > ul > li > ul > li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  color: var(--faint);
  margin-right: 0.8em;
  position: static;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* h3 以下は畳む（暗記シートは h2 で拾えれば足りる） */
nav#TOC > ul > li > ul > li > ul {
  display: none;
}

nav#TOC a {
  color: var(--ink-body);
}
nav#TOC a:hover {
  color: var(--link);
}

@media (max-width: 640px) {
  nav#TOC > ul > li > ul {
    columns: 1;
  }
}

/* ============================================================
   7. ホーム（一覧）
   ------------------------------------------------------------
   旧デザインは白カードのグリッド。カード高さが揃うため中身の薄い
   領域が縦半分空白になっていた。1枠に閉じた明細行へ置き換える。
   クラス名は app.js の buildIndex() が参照するため据え置く。
   ============================================================ */

.hero {
  padding: 36px 0 8px;
}
.hero .kicker,
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.hero h1 {
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 32px;
}
.hero .sub {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  max-width: var(--measure);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-transform: uppercase;
  margin: 40px 0 10px;
}

/* 一覧は「枠1つ・中はヘアラインで区切る」＝カードを並べない */
.cards {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 8px;
}

.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  align-items: center;
  gap: 8px 24px;
  padding: 14px 20px;
  color: var(--ink-body);
  text-decoration: none;
  border-top: var(--bw) solid var(--rule);
}
.card:first-child {
  border-top: none;
}
.card:hover {
  background: #f4f2ed;
  text-decoration: none;
}
.card:hover h2 {
  color: var(--link);
}

.card h2 {
  grid-column: 1;
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
}
.card .tag {
  grid-column: 1;
  grid-row: 2;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.card p {
  grid-column: 1;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* 進捗（app.js が .card 末尾へ追加する） */
.card-prog {
  grid-column: 2;
  grid-row: 1 / -1; /* 説明文の有無で行数が変わるため全行にまたがらせる */
  align-self: center;
  margin: 0;
}
.card-prog__track {
  height: 4px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.card-prog__track span {
  display: block;
  height: 100%;
  background: var(--known);
  width: 0;
}
.card-prog__nums {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.card-prog__nums--empty {
  color: var(--faint);
}

footer {
  margin-top: 64px;
  padding-top: 16px;
  border-top: var(--bw) solid var(--rule);
  color: var(--faint);
  font-size: 12.5px;
}

/* ============================================================
   8. 検索・絞り込み（ホーム: app.js buildIndex）
   ============================================================ */

.study-tools {
  display: grid;
  gap: 12px;
  margin: 24px 0 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
}
.study-search {
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
}
.study-search input {
  width: 100%;
  min-height: 44px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-body);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  padding: 8px 12px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
}
.filter-chips button,
.visual-mode-toggle {
  min-height: 36px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
}
.filter-chips button:hover {
  background: var(--rule);
}
.filter-chips button.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.study-search input:focus-visible,
.filter-chips button:focus-visible,
.visual-mode-toggle:focus-visible,
.source-link:focus-visible,
.card:focus-visible,
#theme-toggle:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* ============================================================
   9. 進捗パネル（シート: app.js buildSheet）
   ============================================================ */

.rev-warn {
  background: var(--surface);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius);
  color: var(--ink-body);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.rev-progress {
  margin: 16px 0 24px;
  padding: 14px 20px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
}
.rev-progress__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.rev-progress__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
}
.rev-progress__nums {
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.rev-progress__nums b {
  font-weight: 700;
}
.rev-progress__nums .is-known {
  color: var(--known);
}
.rev-progress__nums .is-shaky {
  color: var(--shaky);
}
.rev-progress__nums .is-todo {
  color: var(--muted);
}

.rev-progress__reset {
  margin-left: auto;
  background: var(--surface);
  border: var(--bw) solid var(--rule);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
}
.rev-progress__reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rev-progress__filters {
  margin-top: 12px;
}

.rev-progress__track {
  height: 4px;
  background: var(--rule);
  border-radius: 999px;
  margin-top: 12px;
  overflow: hidden;
}
.rev-progress__fill {
  display: block;
  height: 100%;
  background: var(--known);
  width: 0;
  transition: width 0.25s;
}
.rev-progress__focus-message {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
}
.rev-progress.is-complete {
  border-color: var(--known);
}
.rev-progress.is-complete .rev-progress__focus-message {
  color: var(--known);
  font-weight: 700;
}

/* ============================================================
   10. 3状態セグメント＋メモ（見出し内）
   ============================================================ */

/* 学習UI は float で見出しの右端へ寄せる。
   見出しを flex コンテナにすると、見出し内の <strong>（分野・出題年ラベル）が
   独立したフレックス項目になり、本文から右端まで引き離されてしまう。 */
.rev-ctl {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0 12px;
  font-weight: 400;
}

.rev-seg {
  display: inline-flex;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.rev-seg__btn {
  border: none;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  padding: 4px 10px;
  cursor: pointer;
}
.rev-seg__btn + .rev-seg__btn {
  border-left: var(--bw) solid var(--rule);
}
.rev-seg__btn:hover {
  background: var(--rule);
}
.rev-seg__btn.is-active.is-known {
  background: var(--known);
  color: #fff;
}
.rev-seg__btn.is-active.is-shaky {
  background: var(--shaky);
  color: #fff;
}
.rev-seg__btn.is-active.is-todo {
  background: var(--ink);
  color: var(--bg);
}

.rev-memo-toggle {
  border: var(--bw) solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
}
.rev-memo-toggle:hover {
  background: var(--rule);
}

/* ---- 箇条書き1行ごとのチェック ---------------------------------------- */

/* チェックを持つ行は、既定の点マーカーを消してチェックボックスに置き換える */
li.has-check::before {
  content: none !important;
}
li.has-check {
  position: relative;
  padding-left: 2em;
}
ol li.has-check {
  padding-left: 0.4em;
}

.rev-check {
  position: absolute;
  left: -0.1em;
  top: 0.42em;
  width: 1.35em;
  height: 1.35em;
  padding: 0;
  border: var(--bw) solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  flex: 0 0 auto;
  /* 指で押せる当たり判定を、見た目を変えずに広げる */
  box-shadow: 0 0 0 0.45em transparent;
}
/* 番号付きリストでは番号の右に並べる。
   position は relative のままにする（static にすると ::after のチェックマークが
   li 基準になって箱の外に描かれる）。 */
ol li.has-check .rev-check {
  position: relative;
  left: 0;
  top: 0;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: -0.25em;
}
.rev-check::after {
  content: "";
  position: absolute;
  left: 0.34em;
  top: 0.1em;
  width: 0.34em;
  height: 0.62em;
  border: solid var(--surface);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
  opacity: 0;
}
.rev-check:hover {
  background: var(--rule);
}
.rev-check:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* チェック済み（「覚えた行を表示」で見えている状態）は塗って淡くする */
li.has-check.is-checked > .rev-check {
  background: var(--known);
  border-color: var(--known);
}
li.has-check.is-checked > .rev-check::after {
  opacity: 1;
}
li.has-check.is-checked {
  color: var(--faint);
}
li.has-check.is-checked strong {
  color: var(--faint);
  font-weight: 400;
}

/* ---- 端末間同期 ---- */
.rev-sync {
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--bw) solid var(--rule);
}
.rev-sync__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rev-sync__status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-right: auto;
}
.rev-sync__btn {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 5px 12px;
  cursor: pointer;
}
.rev-sync__btn:hover {
  border-color: var(--border);
  color: var(--ink);
}
.rev-sync__panel {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.rev-sync__panel p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
}
.rev-sync__key {
  display: block;
  padding: 10px 12px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
  user-select: all;
}
.rev-sync__panel input {
  flex: 1 1 12em;
  min-height: 40px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 6px 10px;
}
.rev-sync__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

@media print {
  .rev-sync {
    display: none;
  }
}

.rev-progress__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* 書き出し（チェック状態は端末内にしか無いので、台帳へ渡す出口） */
.rev-progress__export {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 5px 12px;
  cursor: pointer;
}
.rev-progress__export:hover {
  border-color: var(--border);
  color: var(--ink);
}

.rev-export {
  margin-top: 10px;
}
.rev-export__msg {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.rev-export textarea {
  width: 100%;
  min-height: 9em;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-body);
  background: var(--bg);
  resize: vertical;
}

.rev-progress__reveal {
  margin-top: 0;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 5px 12px;
  cursor: pointer;
}
.rev-progress__reveal:hover {
  border-color: var(--border);
  color: var(--ink);
}
.rev-progress__reveal[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

@media (max-width: 720px) {
  /* 親指で押せる大きさに。行の字送りは変えない */
  li.has-check {
    padding-left: 2.2em;
  }
  .rev-check {
    width: 1.5em;
    height: 1.5em;
    top: 0.35em;
  }
}

@media print {
  .rev-check {
    display: none;
  }
  li.has-check {
    padding-left: 0;
  }
  li.has-check::before {
    content: "" !important;
  }
}

.rev-memo {
  margin: 4px 0 20px;
  clear: both; /* 見出し内の float した .rev-ctl を回り込ませない */
}
.rev-memo textarea {
  width: 100%;
  min-height: 4.5em;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-body);
  background: var(--surface);
  resize: vertical;
}
.rev-memo textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(41, 144, 218, 0.16);
}

/* ============================================================
   11. テーマ切替
   ============================================================ */

#theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#theme-toggle:hover {
  background: var(--rule);
}

/* ============================================================
   12. 図解層（app.js renderVisuals）
   ------------------------------------------------------------
   旧デザインは影＋大きな角丸＋塗りカードの積み重ねだった。
   上流トークン（白面・黒1.5px枠・角丸12px・影なし）へ揃える。
   ============================================================ */

.visual-atlas {
  margin: 24px 0 56px;
}

/* 要点ボックス（上流 .doc-summary 相当） */
.exam-focus {
  display: grid;
  gap: 6px;
  padding: 16px 24px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 24px;
}
.exam-focus > span {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.exam-focus strong {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

.atlas-heading {
  margin: 40px 0 16px;
}
.atlas-heading p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--faint);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.atlas-heading h2 {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 22px;
}

.visual-card {
  margin: 20px 0;
  padding: 20px 24px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  scroll-margin-top: 24px;
}
.visual-card > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: none;
  padding: 0 0 12px;
  margin: 0 0 16px;
  font-size: 18px;
  border-bottom: var(--bw) solid var(--rule);
}

/* 重要度は上流 .doc-chip（角丸8px・黒枠）へ。色付きピルは使わない */
.importance {
  flex: 0 0 auto;
  display: inline-block;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.6em;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.8;
  background: var(--surface);
  color: var(--ink);
}
.importance--top {
  background: var(--ink);
  color: var(--bg);
}

.topic-infographic {
  margin: 0 0 16px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.topic-infographic__link {
  position: relative;
  display: block;
  min-height: 44px;
}
.topic-infographic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}
.topic-infographic__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}
.topic-infographic figcaption {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-top: var(--bw) solid var(--rule);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}
.topic-infographic figcaption strong {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 流れ図 */
.diagram {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
}
.diagram-node {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 140px;
  flex: 1 0 140px;
  padding: 12px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.6;
  scroll-snap-align: start;
}
.diagram-node .step {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
/* 血流の色分けは病態の識別＝機能色として残す */
.diagram-node.oxygenated {
  border-color: #c43d4b;
  color: #8e2a35;
}
.diagram-node.venous {
  border-color: #2878b8;
  color: #1e5a8c;
}
.diagram-node.mixed {
  border-color: #7553a6;
  color: #573d7c;
}

.diagram-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  color: var(--faint);
  font-weight: 700;
}
.visual-card--compare .diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: visible;
}
.visual-card--compare .diagram-node {
  min-width: 0;
}
.visual-card--compare .diagram-arrow {
  display: none;
}

.takeaway {
  display: grid;
  gap: 4px;
  margin: 4px 0 16px;
  padding: 12px 0;
  border-top: var(--bw) solid var(--rule);
  border-bottom: var(--bw) solid var(--rule);
  font-size: 14.5px;
  line-height: 1.7;
}
.takeaway strong {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}

.exam-grid {
  display: grid;
  gap: 12px;
}
.exam-box {
  padding: 12px 14px;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.exam-box > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.exam-box p {
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}
.exam-box--hit {
  border-left: 4px solid var(--ink);
}
.exam-box--trap {
  border-left: 4px solid var(--accent);
}
.exam-box--review {
  border-left: 4px solid var(--link);
}

.source-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--link);
}

/* まとめ図（textbook-figure） */
.textbook-figure {
  margin: 20px 0 40px;
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  color: var(--ink-body);
}
.textbook-figure__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  border-bottom: var(--bw) solid var(--rule);
}
.textbook-figure__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
}
.textbook-figure__eyebrow {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.textbook-figure__copy h2 {
  display: block;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.5;
}
.textbook-figure__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.textbook-figure__art {
  position: relative;
  min-height: 200px;
  overflow: hidden;
  background: var(--bg);
}
.textbook-figure__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.textbook-figure__art-note {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.textbook-process,
.textbook-clues {
  padding: 20px 24px;
}
.textbook-clues {
  border-top: var(--bw) solid var(--rule);
}

.textbook-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.textbook-section-title > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.textbook-section-title h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.textbook-section-title h3::before {
  content: none;
}

.textbook-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.textbook-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 4px 0;
  border-top: 3px solid var(--muted);
}
.textbook-step::before {
  content: none;
}
.textbook-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 22px;
  color: var(--faint);
  font-weight: 700;
}
.textbook-step--red {
  border-top-color: #b43f49;
}
.textbook-step--blue {
  border-top-color: #2f74a5;
}
.textbook-step--purple {
  border-top-color: #72569d;
}
.textbook-step--quiet {
  border-top-color: var(--muted);
}
.textbook-step__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
  text-transform: uppercase;
}
.textbook-step strong {
  margin: 3px 0 2px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.textbook-step small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.textbook-clues__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--bw) solid var(--rule);
  border-left: var(--bw) solid var(--rule);
}
.textbook-clue {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-right: var(--bw) solid var(--rule);
  border-bottom: var(--bw) solid var(--rule);
}
.textbook-clue span {
  font-size: 12px;
  color: var(--muted);
}
.textbook-clue strong {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

.textbook-close {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--bw) solid var(--rule);
}
.textbook-trap,
.textbook-recall {
  padding: 16px 20px;
}
.textbook-trap {
  border-right: var(--bw) solid var(--rule);
}
.textbook-recall {
  background: var(--ink);
  color: var(--bg);
}
.textbook-trap > span,
.textbook-recall > span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.textbook-trap > span {
  color: var(--accent);
}
.textbook-recall > span {
  color: var(--faint);
}
.textbook-trap p,
.textbook-recall p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  font-weight: 700;
}
.textbook-recall p {
  color: var(--bg);
}

.textbook-sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 20px;
  border-top: var(--bw) solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
}
.textbook-sources > span {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 図表だけ見るモード */
.visual-mode-toggle {
  margin-left: auto;
}
.is-visual-review #TOC,
.is-visual-review h1,
.is-visual-review .rev-progress,
.is-visual-review .visual-atlas ~ * {
  display: none !important;
}
.is-visual-review .visual-atlas,
.is-visual-review .visual-atlas * {
  display: revert;
}
.is-visual-review .visual-atlas {
  margin-top: 16px;
}

/* 読書位置 */
.reading-position {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 100;
  background: transparent;
}
.reading-position span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
}

/* ============================================================
   13. レスポンシブ
   ============================================================ */

@media (min-width: 700px) {
  .study-tools {
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
  }
  .exam-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .diagram {
    overflow: visible;
  }
  .diagram-node {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  body {
    padding: 0 16px 72px;
    font-size: 15.5px;
  }
  h1 {
    font-size: 24px;
    border-left-width: 8px;
    padding-left: 12px;
  }
  .hero h1 {
    font-size: 26px;
  }
  h2 {
    font-size: 18.5px;
    border-left-width: 7px;
    padding-left: 10px;
    margin-top: 40px;
  }

  .card {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
  }
  .card-prog {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }

  /* 見出し内の学習UIは1行に落として親指で押せる大きさへ */
  /* 狭い画面では見出しに並べず、独立した1行に落として親指で押せる大きさにする */
  .rev-ctl {
    float: none;
    display: flex;
    width: 100%;
    margin: 8px 0 0;
    justify-content: space-between;
  }
  .rev-seg__btn,
  .rev-memo-toggle {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .textbook-figure__intro {
    grid-template-columns: 1fr;
  }
  .textbook-figure__art {
    min-height: 170px;
    max-height: 210px;
  }
  .textbook-process,
  .textbook-clues {
    padding: 16px;
  }
  .textbook-process ol {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .textbook-step {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0 12px;
    padding: 8px 0 8px 12px;
    border-top: 0;
    border-left: 3px solid var(--muted);
  }
  .textbook-step--red {
    border-left-color: #b43f49;
    border-top-color: transparent;
  }
  .textbook-step--blue {
    border-left-color: #2f74a5;
    border-top-color: transparent;
  }
  .textbook-step--purple {
    border-left-color: #72569d;
    border-top-color: transparent;
  }
  .textbook-step--quiet {
    border-left-color: var(--muted);
    border-top-color: transparent;
  }
  .textbook-step__label {
    grid-row: 1 / 3;
    align-self: center;
  }
  .textbook-step:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 8px;
    top: auto;
    bottom: -10px;
  }
  .textbook-clues__grid,
  .textbook-close {
    grid-template-columns: 1fr;
  }
  .textbook-trap {
    border-right: none;
    border-bottom: var(--bw) solid var(--rule);
  }

  .visual-card {
    padding: 16px;
  }
  .visual-card--compare .diagram {
    grid-template-columns: 1fr;
  }
}

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

/* ============================================================
   14. ダークテーマ（上流に無い層。トークンだけ差し替える）
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14140f;
  --surface: #1c1c18;
  --ink: #f2f0ea;
  --ink-body: #e4e2db;
  --border: #6e6c64;
  --rule: #35342e;
  --muted: #a9a69c;
  --faint: #8b887e;
  --link: #6fb6e8;
  --accent: #f0796c;
  --known: #5fbe7c;
  --shaky: #e0a040;
}
:root[data-theme="dark"] p code,
:root[data-theme="dark"] li code,
:root[data-theme="dark"] td code {
  background: #2a2a24;
}
:root[data-theme="dark"] .card:hover {
  background: #24241f;
}
:root[data-theme="dark"] .filter-chips button:hover,
:root[data-theme="dark"] .rev-seg__btn:hover,
:root[data-theme="dark"] .rev-memo-toggle:hover,
:root[data-theme="dark"] #theme-toggle:hover {
  background: #2a2a24;
}
:root[data-theme="dark"] .filter-chips button.is-active,
:root[data-theme="dark"] .rev-seg__btn.is-active.is-todo,
:root[data-theme="dark"] .importance--top,
:root[data-theme="dark"] .textbook-figure__eyebrow,
:root[data-theme="dark"] .textbook-section-title > span,
:root[data-theme="dark"] .diagram-node .step,
:root[data-theme="dark"] .topic-infographic__zoom,
:root[data-theme="dark"] .textbook-figure__art-note {
  background: var(--ink);
  color: var(--bg);
}
:root[data-theme="dark"] .textbook-recall {
  background: #26261f;
}
:root[data-theme="dark"] .textbook-recall p {
  color: var(--ink);
}
:root[data-theme="dark"] .diagram-node.oxygenated {
  border-color: #d9707b;
  color: #e9a0a8;
}
:root[data-theme="dark"] .diagram-node.venous {
  border-color: #5c9fd4;
  color: #96c4e6;
}
:root[data-theme="dark"] .diagram-node.mixed {
  border-color: #9b82c4;
  color: #bca9da;
}

/* ============================================================
   15. 印刷（A4・紙で回す用。上流の印刷規約を踏襲）
   ============================================================ */

@media print {
  @page {
    size: A4;
    margin: 14mm;
  }

  html,
  body {
    font-size: 10pt;
    line-height: 1.5;
    background: #ffffff;
    max-width: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .topnav,
  #theme-toggle,
  .rev-progress,
  .rev-ctl,
  .rev-memo-toggle,
  .visual-mode-toggle,
  .reading-position,
  .study-tools,
  footer {
    display: none !important;
  }

  /* 絞り込みで隠れていた節も紙には全部出す */
  h2[hidden],
  .visual-card[hidden],
  nav#TOC li[hidden] {
    display: revert !important;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
  }
  .visual-card,
  .exam-focus,
  blockquote,
  figure,
  nav#TOC,
  table,
  tr,
  pre,
  .textbook-figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: none;
  }
  .topic-infographic__zoom,
  .source-link {
    display: none;
  }
}