/* ===========================================================
   令和の米白書（架空）
   型: report(白書) × high(高密度) × toc-first(目次から始まる) × academic(学術組版)

   方針:
   ・表紙もヒーローも置かない。1画面目が目次。
   ・章番号・図表番号・脚注・出典・参考文献・図表一覧 という学術/白書の書式をそのまま。
   ・チャートは craft-kit の data-ck-progress（--p 0..1）だけを読み、
     自前のスクロール計測は一切書かない（app.js 参照）。
   ・明朝(見出し) + グロテスク(英字ラベル/本文欧字) + 和文ゴシック(本文) + 等幅(数値)。
   ・白基調・差し色は一色（朱華色に寄せた焦茶朱）のみ。
   =========================================================== */

:root{
  --paper:#fdfbf6;
  --paper-2:#f5f0e6;
  --paper-3:#efe8d9;
  --ink:#211d17;
  --ink-2:#544d41;
  --ink-3:#8d8272;
  --line:#e2d9c5;
  --line-2:#c7b99d;
  --accent:#a13c1c;
  --accent-2:#c65a30;
  --accent-bg:#fbeee3;
  --accent-bg-2:#f6ddc9;

  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --grotesk:"Space Grotesk","Zen Kaku Gothic New",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --fz:15.5px;
  --wrap:1040px;
}

*{box-sizing:border-box}
html{background:var(--paper-2)}
body{
  margin:0; background:var(--paper-2); color:var(--ink);
  font-family:var(--sans); font-size:var(--fz); line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-large{--fz:17.5px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
img{max-width:100%; display:block}
.num, .c-num{
  font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0;
}
.c-num{text-align:right}
b{font-weight:700}

/* ---------- 帳票ヘッダー ---------- */
.bar{
  position:sticky; top:0; z-index:30;
  background:var(--ink); color:#fdfbf6; border-bottom:3px solid var(--accent);
}
.bar-in{
  max-width:var(--wrap); margin:0 auto; padding:9px 26px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.bar-doc{margin:0; font-size:13px; font-weight:500; display:flex; align-items:center; gap:10px}
.bar-code{
  font-family:var(--mono); font-size:11px; font-weight:500;
  border:1px solid rgba(253,251,246,.4); border-radius:2px; padding:1px 7px; letter-spacing:.06em;
  color:#f0c9ab;
}
.bar-t{font-family:var(--serif); font-weight:700; letter-spacing:.03em}
.bar-ed{font-weight:400; color:#c9beac; font-size:12px}
.bar-nav{display:flex; gap:3px; margin-left:8px}
.bar-nav a{
  font-family:var(--mono); font-size:12px; color:#d8cdb9; text-decoration:none;
  width:24px; height:24px; display:grid; place-items:center;
  border:1px solid rgba(253,251,246,.24); border-radius:2px;
}
.bar-nav a:hover, .bar-nav a.is-on{background:var(--accent); color:#fff; border-color:var(--accent)}
.bar-tools{margin-left:auto; display:flex; gap:7px}
.bar-b{
  font-family:var(--sans); font-size:12px; font-weight:600; color:#fdfbf6;
  background:transparent; border:1px solid rgba(253,251,246,.4);
  border-radius:3px; padding:5px 11px; cursor:pointer; line-height:1.2;
}
.bar-b:hover{background:#fdfbf6; color:var(--ink)}
.bar-b[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}
.bar-b:focus-visible, .bar-nav a:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.bar-read{height:2px; background:rgba(253,251,246,.14)}
.bar-read > span{display:block; height:100%; width:0; background:var(--accent-2)}

/* ---------- 目次 ---------- */
.toc{background:var(--paper); padding:48px 0 44px; border-bottom:1px solid var(--line)}
.doc-meta{
  margin:0 0 8px; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.05em;
}
.toc-h{
  margin:0 0 14px; font-family:var(--serif); font-size:40px; font-weight:700; letter-spacing:.18em;
  border-bottom:3px solid var(--ink); padding-bottom:12px;
}
.toc-sub{margin:0 0 20px; font-size:14px; color:var(--ink-2); max-width:64ch}
.toc-note{margin:0 0 26px; font-size:13.5px; color:var(--ink-2); max-width:70ch; line-height:1.9}
.toc-note b{color:var(--ink)}

.toc-list{list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--line)}
.toc-list li{border-bottom:1px solid var(--line)}
.toc-list a{
  display:grid; grid-template-columns:52px 1fr auto 52px; align-items:baseline; gap:16px;
  padding:14px 8px; text-decoration:none; color:var(--ink);
}
.toc-list a:hover{background:var(--paper-2)}
.toc-list a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.toc-list .n{
  font-family:var(--mono); font-size:22px; font-weight:600; color:var(--accent);
  text-align:right; font-variant-numeric:tabular-nums;
}
.toc-list .t{font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.02em}
.toc-list .d{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.toc-list .p{
  font-family:var(--mono); font-size:13px; color:var(--ink-3); text-align:right;
  border-left:1px dotted var(--line-2); padding-left:14px;
}
.toc-list li.is-app .n{color:var(--ink-3); font-size:16px}

/* ---------- 注記ボックス ---------- */
.alert{border-left:6px solid; padding:15px 19px; margin:0}
.alert p{margin:0}
.alert-h{font-weight:700; margin-bottom:5px !important; font-size:14.5px}
.alert p + p{margin-top:6px; font-size:13px; line-height:1.85}
.alert-note{border-color:var(--accent); background:var(--accent-bg)}
.alert-note .alert-h{color:var(--accent)}
.alert-note .alert-h::before{content:"※ "}

/* ---------- 章 ---------- */
.ch{background:var(--paper); padding:50px 0 52px; border-bottom:1px solid var(--line)}
.ch-alt{background:var(--paper-2)}
.ch-head{margin-bottom:26px; max-width:78ch}
.ch-n{
  margin:0; font-family:var(--grotesk); font-size:11.5px; font-weight:600;
  color:var(--accent); letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
}
.ch-n::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block}
.ch-t{
  margin:9px 0 12px; font-family:var(--serif); font-size:32px; font-weight:700; letter-spacing:.03em;
  border-bottom:2px solid var(--ink); padding-bottom:11px;
}
.ch-lead{margin:0; font-size:14.5px; color:var(--ink-2); max-width:74ch; line-height:1.95}
.ch-lead b{color:var(--ink)}
.fn-mark{
  font-family:var(--mono); font-size:11px; color:var(--accent); vertical-align:super;
  line-height:0; margin-left:1px;
}
.note{margin:10px 0 0; font-size:12px; color:var(--ink-3); line-height:1.9}
.note b{color:var(--ink-2)}

/* ---------- 章扉写真（控えめ・全画面禁止） ---------- */
.ch-photo{
  display:grid; grid-template-columns:280px 1fr; gap:22px; align-items:stretch;
  margin:0 0 30px; border:1px solid var(--line-2); background:var(--paper);
}
.ch-photo-fig{margin:0; position:relative; overflow:hidden; background:var(--paper-3)}
.ch-photo-fig img{width:100%; height:100%; object-fit:cover; display:block}
.ch-photo-tag{
  position:absolute; left:0; bottom:0; background:rgba(33,29,23,.82); color:#f1e6d4;
  font-family:var(--grotesk); font-size:10.5px; letter-spacing:.1em;
  padding:4px 9px 4px 8px;
}
.ch-photo-body{padding:16px 20px 16px 0; display:flex; flex-direction:column; justify-content:center; gap:7px}
.ch-photo-cap{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.8}
.ch-photo-cap b{color:var(--ink)}
.ch-photo-src{margin:0; font-size:11px; color:var(--ink-3)}

/* ---------- 統計ストリップ（count-up） ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line-2); background:var(--paper); margin:0 0 30px;
}
.stat{padding:16px 20px; border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat-l{margin:0 0 6px; font-family:var(--grotesk); font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase}
.stat-v{margin:0; font-family:var(--mono); font-size:29px; font-weight:600; color:var(--ink); line-height:1}
.stat-v .u{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-2); margin-left:2px}
.stat-v.is-accent{color:var(--accent)}
.stat-d{margin:5px 0 0; font-size:11.5px; color:var(--ink-3)}

/* ---------- 図（チャート） ---------- */
.fig{margin:0 0 14px; border:1px solid var(--line-2); background:var(--paper)}
.fig-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 18px; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.fig-title{margin:0; font-size:13.5px; font-weight:700; color:var(--ink)}
.fig-title b{font-family:var(--mono); color:var(--accent); margin-right:6px; font-weight:600}
.fig-unit{margin:0; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.fig-body{padding:18px 20px 8px}
.fig svg{width:100%; height:auto; display:block; overflow:visible}
.fig-legend{display:flex; gap:18px; flex-wrap:wrap; padding:2px 20px 14px; font-size:12px; color:var(--ink-2)}
.fig-legend .lg{display:inline-flex; align-items:center; gap:7px}
.fig-legend .sw{width:16px; height:3px; display:inline-block; background:var(--accent)}
.fig-legend .sw.dash{background-image:linear-gradient(90deg,var(--ink-3) 0 6px,transparent 6px 10px); background-size:10px 3px; background-color:transparent}
.fig-legend .num{font-family:var(--mono); color:var(--ink)}
figcaption.fig-cap{
  padding:10px 18px 13px; font-size:12px; color:var(--ink-2); border-top:1px solid var(--line);
}
figcaption.fig-cap b{color:var(--ink)}

/* chart svg elements */
.ax-grid{stroke:var(--line); stroke-width:1}
.ax-label{font-family:var(--mono); font-size:10.5px; fill:var(--ink-3)}
.ax-label.axis-r{fill:var(--ink-2)}
.x-label{font-family:var(--mono); font-size:10.5px; fill:var(--ink-3); text-anchor:middle}
.chart-line{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.chart-line.is-b{stroke:var(--ink-3); stroke-dasharray:6 5}
.chart-dot{fill:var(--paper); stroke:var(--accent); stroke-width:2.6; opacity:0}
.chart-dot.is-b{stroke:var(--ink-3)}
.chart-dot.is-in{opacity:1}
.chart-dot.is-last{fill:var(--accent)}
.dot-label{font-family:var(--mono); font-size:11px; fill:var(--ink); font-weight:600; opacity:0}
.dot-label.is-in{opacity:1}

/* 棒（ランキング） */
.bar-chart .row-label{font-family:var(--sans); font-size:12.5px; fill:var(--ink); text-anchor:end}
.bar-chart .row-label.is-oth{fill:var(--ink-3); font-style:italic}
.bar-chart .row-track{fill:var(--paper-3)}
.bar-chart .row-bar{fill:var(--accent)}
.bar-chart .row-bar.is-oth{fill:var(--ink-3)}
.bar-chart .row-val{font-family:var(--mono); font-size:12.5px; font-weight:600; fill:var(--ink)}

/* ドーナツ */
.donut-seg{fill:none; stroke-linecap:butt}
.donut-center-v{font-family:var(--serif); font-size:30px; font-weight:700; fill:var(--ink); text-anchor:middle}
.donut-center-l{font-family:var(--grotesk); font-size:10px; letter-spacing:.08em; fill:var(--ink-3); text-anchor:middle; text-transform:uppercase}
.donut-legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.donut-legend li{
  display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px dotted var(--line-2); font-size:13px;
}
.donut-legend li:last-child{border-bottom:none}
.donut-legend .sw{width:14px; height:14px; border-radius:2px}
.donut-legend .lv{font-family:var(--mono); font-weight:700; color:var(--ink); font-size:15px}
.donut-wrap{display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:center}

/* 小さい2本棒（比較） */
.mini-bar-chart .m-label{font-family:var(--sans); font-size:12.5px; fill:var(--ink-2)}
.mini-bar-chart .m-track{fill:var(--paper-3)}
.mini-bar-chart .m-bar{fill:var(--ink-3)}
.mini-bar-chart .m-bar.is-now{fill:var(--accent)}
.mini-bar-chart .m-val{font-family:var(--mono); font-size:15px; font-weight:700; fill:var(--ink)}

/* ---------- 表 ---------- */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line-2); background:var(--paper); margin:0 0 14px}
table{width:100%; border-collapse:collapse; font-size:13px}
caption{
  text-align:left; font-size:12.5px; font-weight:600; color:var(--ink-2);
  padding:9px 14px; background:var(--paper-2); border-bottom:1px solid var(--line-2);
}
caption b{font-family:var(--mono); color:var(--accent); margin-right:6px}
th,td{padding:9px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
thead th{
  background:var(--ink); color:#f2e9d8; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; border-bottom:none; white-space:nowrap;
}
tbody tr:last-child td, tbody tr:last-child th{border-bottom:none}
tbody tr:hover{background:var(--paper-2)}
td.c-num, th.c-num{font-family:var(--mono)}

/* ---------- 脚注 ---------- */
.fn-box{
  margin-top:24px; padding-top:16px; border-top:1px dashed var(--line-2);
}
.fn-box p{margin:0 0 5px; font-family:var(--grotesk); font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase}
.fn-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.fn-list li{font-size:12px; color:var(--ink-2); line-height:1.85; display:flex; gap:6px}
.fn-list .fn-n{font-family:var(--mono); color:var(--accent); flex:0 0 auto}

/* ---------- 結論（第5章） ---------- */
.findings{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 28px; border:1px solid var(--line-2)}
.finding{padding:20px 22px; border-right:1px solid var(--line); background:var(--paper)}
.finding:last-child{border-right:none}
.finding-n{
  margin:0 0 10px; font-family:var(--serif); font-size:26px; font-weight:700; color:var(--accent); line-height:1;
}
.finding-t{margin:0 0 8px; font-size:14.5px; font-weight:700; color:var(--ink)}
.finding-d{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.85}
.concl-p{margin:0 0 14px; font-size:14.5px; color:var(--ink-2); line-height:2; max-width:76ch}
.concl-p b{color:var(--ink)}

/* ---------- 参考文献／図表一覧 ---------- */
.app-sec{background:var(--paper); padding:40px 0; border-bottom:1px solid var(--line)}
.app-sec.alt{background:var(--paper-2)}
.app-h{
  margin:0 0 20px; font-family:var(--serif); font-size:22px; font-weight:700;
  border-bottom:2px solid var(--ink); padding-bottom:9px; display:flex; align-items:baseline; gap:10px;
}
.app-h .en{font-family:var(--grotesk); font-size:11px; color:var(--ink-3); font-weight:500; letter-spacing:.1em}
.ref-list{list-style:none; margin:0; padding:0; counter-reset:ref}
.ref-list li{
  counter-increment:ref; display:flex; gap:12px; padding:11px 0; border-bottom:1px dotted var(--line-2);
  font-size:13px; color:var(--ink-2); line-height:1.85;
}
.ref-list li::before{
  content:"["counter(ref)"]"; font-family:var(--mono); color:var(--accent); font-weight:600; flex:0 0 auto; font-size:12.5px;
}
.ref-list li b{color:var(--ink)}
.figlist-list{list-style:none; margin:0; padding:0}
.figlist-list li{
  display:grid; grid-template-columns:74px 1fr 44px; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1px dotted var(--line-2); font-size:13px;
}
.figlist-list a.fl-link{display:contents; color:var(--ink); text-decoration:none; cursor:pointer}
.figlist-list a.fl-link:hover .fl-t{color:var(--accent); text-decoration:underline}
.figlist-list .fl-n{font-family:var(--mono); font-weight:700; color:var(--accent); font-size:12.5px}
.figlist-list .fl-t{color:var(--ink)}
.figlist-list .fl-p{font-family:var(--mono); color:var(--ink-3); text-align:right; font-size:12px}

/* ---------- 奥付 ---------- */
.colo{background:var(--paper-2); padding:36px 0 46px}
.colo-t{background:var(--paper); border:1px solid var(--line-2); margin-bottom:16px}
.colo-t th{
  width:120px; background:var(--paper-2); font-size:11.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; border-right:1px solid var(--line);
}
.colo-t td{font-size:12.5px}
.colo-disc{
  margin:0 0 8px; font-size:11.5px; color:var(--ink-2); line-height:1.9;
  border:1px solid var(--line); background:var(--paper); padding:12px 15px;
}
.colo-c{margin:0; font-size:11px; color:var(--ink-3)}

/* ---------- レスポンシブ ---------- */
@media (max-width:920px){
  .findings{grid-template-columns:1fr}
  .finding{border-right:none; border-bottom:1px solid var(--line)}
  .finding:last-child{border-bottom:none}
  .stat-strip{grid-template-columns:1fr}
  .stat{border-right:none; border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
  .ch-photo{grid-template-columns:1fr}
  .ch-photo-fig{aspect-ratio:16/9}
  .ch-photo-body{padding:0 20px 18px}
  .donut-wrap{grid-template-columns:1fr}
  .toc-list a{grid-template-columns:40px 1fr auto; row-gap:3px}
  .toc-list .p{grid-column:3; grid-row:1}
  .toc-list .d{grid-column:2/-1}
}
@media (max-width:600px){
  .bar-nav{display:none}
  .toc-h{font-size:28px}
  .ch-t{font-size:23px}
  .fig-body{padding:14px 12px 6px}
}

@media (prefers-reduced-motion:reduce){
  .bar-read > span{transition:none}
}