/* ===========================================================
   みなと区 防災の手引き（架空）
   型: document(資料・手引き) × high(高密度) × toc-first(目次から始まる) × instruction(指示の声)

   方針:
   ・表紙もヒーローも置かない。1画面目が目次。
   ・行政文書の書式をそのまま持ち込む：文書番号／章番号／図版番号／表番号／
     注意・危険の別／奥付／改訂履歴／切り取り線。
   ・装飾で読みやすさを作らない。罫線・番号・余白だけで階層を立てる。
   ・UDフォント系（IBM Plex Sans JP）＋等幅（IBM Plex Mono）で番号を揃える。
   ・印刷される前提の文書なので @media print を必ず持つ。
   =========================================================== */

:root{
  --navy:#123055;
  --navy-2:#1c4680;
  --ink:#1b1f26;
  --ink-2:#4d5661;
  --ink-3:#79828d;
  --paper:#ffffff;
  --paper-2:#f2f5f8;
  --line:#d3dae2;
  --line-2:#9fabb8;
  --warn:#a86a00;
  --warn-bg:#fff6e3;
  --danger:#b3122c;
  --danger-bg:#fdeef0;
  --ok:#00694b;

  --sans:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --fz:15px;
  --wrap:1000px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper-2); color:var(--ink);
  font-family:var(--sans); font-size:var(--fz); line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
body.is-large{--fz:17px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.c-num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- 帳票ヘッダー ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  background:var(--navy); color:#fff; border-bottom:3px solid var(--navy-2);
}
.bar-in{
  max-width:var(--wrap); margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.bar-doc{margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px}
.bar-code{
  font-family:var(--mono); font-size:11px; font-weight:500;
  border:1px solid rgba(255,255,255,.45); border-radius:2px; padding:1px 6px; letter-spacing:.04em;
}
.bar-ed{font-weight:400; color:#b8c8dc; font-size:12px}
.bar-nav{display:flex; gap:3px; margin-left:6px}
.bar-nav a{
  font-family:var(--mono); font-size:12px; color:#c8d6e6; text-decoration:none;
  width:24px; height:24px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); border-radius:2px;
}
.bar-nav a:hover{background:#fff; color:var(--navy); border-color:#fff}
.bar-tools{margin-left:auto; display:flex; gap:7px}
.bar-b{
  font-family:var(--sans); font-size:12px; font-weight:600; color:#fff;
  background:transparent; border:1px solid rgba(255,255,255,.45);
  border-radius:3px; padding:5px 11px; cursor:pointer; line-height:1.2;
}
.bar-b:hover{background:#fff; color:var(--navy)}
.bar-b[aria-pressed="true"]{background:#fff; color:var(--navy)}
.bar-b:focus-visible, .bar-nav a:focus-visible{outline:2px solid #ffd34d; outline-offset:2px}
/* 章送りナビ：スクロールスパイ（現在地の章を白抜きに） */
.bar-nav a.is-on{background:#fff; color:var(--navy); border-color:#fff}
/* 読了進捗バー（ヘッダー最下部の細い1本） */
.bar-read{height:2px; background:rgba(255,255,255,.14)}
.bar-read span{display:block; height:100%; width:0; background:#7fb0e6}

/* ---------- 目次 ---------- */
.toc{background:var(--paper); padding:44px 0 46px; border-bottom:1px solid var(--line)}
.doc-meta{
  margin:0 0 6px; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em;
}
.toc-h{
  margin:0 0 12px; font-size:38px; font-weight:700; letter-spacing:.16em;
  border-bottom:3px solid var(--navy); padding-bottom:10px;
}
.toc-note{margin:0 0 24px; font-size:14px; color:var(--ink-2); max-width:70ch}
.toc-note b{color:var(--ink)}

.toc-list{list-style:none; margin:0 0 24px; 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:56px 1fr auto 56px; align-items:baseline; gap:14px;
  padding:13px 8px; text-decoration:none; color:var(--ink);
}
.toc-list a:hover{background:var(--paper-2)}
.toc-list a:focus-visible{outline:2px solid var(--navy); outline-offset:-2px}
.toc-list .n{
  font-family:var(--mono); font-size:24px; font-weight:600; color:var(--navy);
  text-align:right; font-variant-numeric:tabular-nums;
}
.toc-list .t{font-size:19px; font-weight:700; letter-spacing:.02em}
.toc-list .d{font-size:12.5px; color:var(--ink-3)}
.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;
}

/* ---------- 注意・危険 ---------- */
.alert{border-left:6px solid; padding:14px 18px; margin:0 0 4px}
.alert p{margin:0}
.alert-h{font-weight:700; margin-bottom:4px !important; font-size:15px}
.alert p + p{margin-top:5px; font-size:13.5px; line-height:1.8}
.alert-warn{border-color:var(--warn); background:var(--warn-bg)}
.alert-warn .alert-h{color:var(--warn)}
.alert-warn .alert-h::before{content:"⚠ "; }
.alert-danger{border-color:var(--danger); background:var(--danger-bg); margin-bottom:26px}
.alert-danger .alert-h{color:var(--danger)}
.alert-danger .alert-h::before{content:"！ "; font-weight:700}

/* ---------- 章 ---------- */
.ch{background:var(--paper); padding:42px 0 46px; border-bottom:1px solid var(--line)}
.ch-alt{background:var(--paper-2)}
.ch-head{margin-bottom:22px}
.ch-n{
  margin:0; font-family:var(--mono); font-size:12px; font-weight:500;
  color:#fff; background:var(--navy); display:inline-block;
  padding:3px 10px; letter-spacing:.08em;
}
.ch-n b{font-size:14px; font-weight:600}
.ch-t{
  margin:8px 0 10px; font-size:29px; font-weight:700; letter-spacing:.04em;
  border-bottom:2px solid var(--navy); padding-bottom:9px;
}
.ch-lead{margin:0; font-size:14.5px; color:var(--ink-2); max-width:72ch}
.ch-lead b{color:var(--ink)}
.note{margin:10px 0 0; font-size:12px; color:var(--ink-3); line-height:1.85}
.note b{color:var(--ink-2)}

/* ---------- 章内サマリ数値（実直な3枠・count-up） ---------- */
.doc-stat{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--line-2); background:var(--paper); margin-bottom:16px;
}
.ds{padding:14px 18px 15px; border-left:1px solid var(--line)}
.ds:first-child{border-left:none}
.ds-l{margin:0 0 4px; font-size:12px; font-weight:600; color:var(--ink-2)}
.ds-v{
  margin:0; font-family:var(--mono); font-size:30px; font-weight:600; line-height:1.05;
  color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.ds-v.is-accent{color:var(--danger)}
.ds-u{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink-2); margin-left:4px}
.ds-d{margin:5px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.7}

/* ---------- チェックリスト ---------- */
.ck-status{
  background:var(--navy); color:#fff; padding:13px 18px; margin-bottom:16px;
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:center;
}
.ck-count{margin:0; font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums}
.ck-count b{font-size:26px; font-weight:600}
.ck-bar{height:9px; background:rgba(255,255,255,.22); overflow:hidden}
.ck-fill{display:block; height:100%; width:0; background:#7fd4a8; transition:width .25s ease}
.ck-msg{grid-column:1/-1; margin:0; font-size:12.5px; color:#c8d6e6}
.ck-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.ck-set{border:1px solid var(--line-2); background:var(--paper); margin:0; padding:12px 14px 14px}
.ck-set legend{
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--navy);
  padding:0 7px; letter-spacing:.04em;
}
.ck{display:flex; gap:9px; align-items:flex-start; padding:6px 0; font-size:13.5px; cursor:pointer; line-height:1.65}
.ck + .ck{border-top:1px dotted var(--line)}
.ck input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--navy); flex:0 0 auto}
.ck input:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.ck input:checked + span{color:var(--ink-3); text-decoration:line-through}

/* ---------- 手順 ---------- */
.step-list{list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.step-list li{
  border:1px solid var(--line); border-right:none; border-bottom:none;
  background:var(--paper); padding:14px 18px 16px; position:relative;
}
.step-list li:nth-child(2n){border-right:1px solid var(--line)}
.step-list li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.step-n{
  margin:0; font-family:var(--mono); font-size:26px; font-weight:600;
  color:var(--navy); line-height:1; letter-spacing:-.02em;
}
.step-t{margin:4px 0 5px; font-size:17px; font-weight:700}
.step-d{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.8}
.step-d b{color:var(--ink)}
.step-time{
  position:absolute; top:14px; right:18px; margin:0;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  border:1px solid var(--line); padding:2px 7px;
}

/* ---------- 図版 ---------- */
.fig{margin:0; border:1px solid var(--line-2); background:var(--paper)}
.fig-body{padding:16px 18px; background:var(--paper-2)}
.fig svg{width:100%; height:auto; display:block}
.fig .room{fill:#fff; stroke:var(--ink-2); stroke-width:2}
.fig .win{fill:#cfe0f0; stroke:none}
.fig .furn{fill:#dfe6ee; stroke:var(--ink-2); stroke-width:1.5}
.fig .desk{fill:#c9d4e0; stroke:var(--ink-2); stroke-width:1.5}
.fig .wall{fill:var(--ink-2)}
.fig .zone-x{fill:var(--danger-bg); stroke:var(--danger); stroke-width:1.5; stroke-dasharray:4 3}
.fig .ok{fill:#dff2e8; stroke:var(--ok); stroke-width:2}
.fig .lab{font-family:var(--sans); font-size:11px; fill:var(--ink-2); text-anchor:middle}
.fig .lab-x{font-family:var(--sans); font-size:10px; font-weight:700; fill:var(--danger); text-anchor:middle}
.fig .lab-o{font-family:var(--sans); font-size:10px; font-weight:700; fill:var(--ok); text-anchor:middle}
.fig figcaption{padding:10px 18px; font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--line)}
.fig figcaption b{font-family:var(--mono); color:var(--navy); margin-right:4px}
/* 図2-1 を scroll 進捗で組み上げる（JS有効時のみ初期非表示→順に立ち上げる） */
.ck-js .fig .fm{opacity:0; transition:opacity .5s var(--ck-ease, ease)}
.ck-js .fig .fm.is-in{opacity:1}

/* ---------- 表 ---------- */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line-2); background:var(--paper)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
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(--navy); margin-right:5px}
th,td{padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
thead th{
  background:var(--navy); color:#fff; font-size:12px; font-weight:600;
  letter-spacing:.04em; border-bottom:none; white-space:nowrap;
}
tbody tr:last-child td, tbody tr:last-child th{border-bottom:none}

/* 警戒レベル表 */
.lv .c-lv{width:74px; text-align:center; vertical-align:middle}
.lv .c-who{width:24%; font-size:12.5px; color:var(--ink-2)}
.lvb{
  display:inline-grid; place-items:center; width:34px; height:34px;
  font-family:var(--mono); font-size:19px; font-weight:600; color:#fff;
}
.lv1 .lvb{background:#7c8a99} .lv2 .lvb{background:#3f7cc0}
.lv3 .lvb{background:#c58a00} .lv4 .lvb{background:#c8102e}
.lv5 .lvb{background:#4a0d1c}
.lv tbody tr{background:var(--paper)}
.lv .lv4 td, .lv .lv5 td{background:var(--danger-bg)}
.lv td b{color:var(--danger)}
.lv1 td b, .lv2 td b{color:var(--ink)}

/* 避難所表 */
.sh .c-nm{font-weight:700; white-space:nowrap}
.sh td.y{color:var(--ok); font-weight:700; text-align:center}
.sh td.n{color:var(--ink-3); text-align:center}
.sh tbody tr:hover{background:var(--paper-2)}
.filter{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px}
.filter-l{font-size:12px; font-weight:700; color:var(--ink-2); margin-right:3px}
.fb{
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  padding:6px 13px; cursor:pointer; border-radius:2px; line-height:1.2;
}
.fb.is-on{background:var(--navy); color:#fff; border-color:var(--navy)}
.fb:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.filter-hit{margin:0 0 0 auto; font-family:var(--mono); font-size:12px; color:var(--ink-3)}

/* 備蓄表 */
.calc{
  background:var(--paper); border:1px solid var(--line-2); padding:14px 18px;
  margin-bottom:14px; display:grid; grid-template-columns:auto auto 1fr; gap:6px 18px; align-items:center;
}
.calc-l{font-size:13px; font-weight:700}
.calc-ui{display:flex; align-items:center; gap:8px}
.calc-b{
  width:34px; height:34px; font-size:19px; font-weight:600; line-height:1;
  border:1px solid var(--navy); background:var(--paper); color:var(--navy); cursor:pointer;
}
.calc-b:hover{background:var(--navy); color:#fff}
.calc-b:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.calc-v{font-family:var(--mono); font-size:26px; font-weight:600; min-width:2ch; text-align:center}
.calc-u{font-size:13px; color:var(--ink-2)}
.calc-n{margin:0; font-size:12.5px; color:var(--ink-3)}
.calc-n b{color:var(--ink-2)}
.st td b{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--navy)}
.st td:last-child{font-size:12.5px; color:var(--ink-2)}
.st td:last-child b{font-family:var(--sans); font-size:inherit; color:var(--danger)}

/* ---------- 切り取り ---------- */
.cut{
  border:2px dashed var(--ink-2); background:var(--paper); padding:20px 24px 22px; position:relative;
}
.cut-h{
  margin:0 0 14px; font-size:17px; font-weight:700; letter-spacing:.06em;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:2px solid var(--navy); padding-bottom:8px;
}
.cut-h span{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-3)}
.tel{margin:0 0 16px; display:grid; grid-template-columns:repeat(2,1fr); gap:0 26px}
.tel div{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dotted var(--line-2)}
.tel dt{font-size:13.5px; font-weight:600}
.tel dd{margin:0; font-family:var(--mono); font-size:17px; font-weight:600; color:var(--navy); white-space:nowrap}
.tel-write{border:1px solid var(--line-2); padding:12px 16px 6px; background:var(--paper-2)}
.tel-write-h{margin:0 0 8px; font-size:12.5px; font-weight:700; color:var(--ink-2)}
.tel-line{
  margin:0 0 12px; font-size:13px; color:var(--ink-2);
  border-bottom:1px solid var(--line-2); padding-bottom:6px;
}
.cut-f{margin:12px 0 0; font-size:11.5px; color:var(--ink-3)}

/* ---------- 奥付 ---------- */
.colo{background:var(--paper-2); padding:34px 0 44px}
.colo-t{background:var(--paper); border:1px solid var(--line-2); margin-bottom:14px}
.colo-t th{
  width:110px; background:var(--paper-2); font-size:12px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; border-right:1px solid var(--line);
}
.colo-t td{font-size:13px}
.colo-disc{
  margin:0 0 8px; font-size:11.5px; color:var(--ink-2); line-height:1.8;
  border:1px solid var(--line); background:var(--paper); padding:11px 14px;
}
.colo-c{margin:0; font-size:11px; color:var(--ink-3)}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .ck-grid{grid-template-columns:1fr}
  .step-list{grid-template-columns:1fr}
  .step-list li{border-right:1px solid var(--line)}
  .step-list li:last-child{border-bottom:1px solid var(--line)}
  .tel{grid-template-columns:1fr}
  .toc-list a{grid-template-columns:44px 1fr auto; row-gap:2px}
  .toc-list .p{grid-column:3; grid-row:1}
  .toc-list .d{grid-column:2/-1}
}
@media (max-width:560px){
  .bar-nav{display:none}
  .toc-h{font-size:29px}
  .ch-t{font-size:23px}
  .calc{grid-template-columns:1fr}
}

/* ---------- 印刷 ---------- */
@media print{
  :root{--fz:10.5pt}
  body{background:#fff}
  .bar, .filter, .calc-b, .ck-status, .doc-stat{display:none !important}
  .ch, .toc, .colo{padding:0 0 14pt; border:none; background:#fff !important}
  .wrap{max-width:none; padding:0}
  .ch{break-inside:avoid-page}
  .ch-t, .toc-h{break-after:avoid}
  .tbl-scroll, .fig, .cut, .step-list{break-inside:avoid}
  .cut{border:1.5pt dashed #000}
  a{color:inherit; text-decoration:none}
  .toc-list a{padding:5pt 0}
  thead th{background:#123055 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  /* craft-kit の reveal/進捗を印刷では必ず最終状態に（未スクロール章が消えないように） */
  [data-ck-reveal]{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important}
  .ck-js .fig .fm{opacity:1 !important}
}

@media (prefers-reduced-motion:reduce){
  .ck-fill{transition:none}
  .ck-js .fig .fm{opacity:1 !important; transition:none !important}
  .bar-read span{transition:none}
}