証拠画像（図鑑本文内）
   引用として成立させるため、本文が主・画像が従の関係を保つ。
   撮影日と出典URLのキャプションを必ず添える。
   ========================================================= */
.zk-fig { margin:var(--s5) 0 var(--s6); display:flex; flex-direction:column; gap:var(--s3);
  max-width:760px; }
.zk-fig img { width:100%; height:auto; display:block;
  border:3px solid var(--line); border-radius:14px; box-shadow:6px 6px 0 var(--shadow); background:var(--bg2); }
.zk-fig figcaption { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); align-items:baseline;
  font-size:12.5px; line-height:1.75; color:var(--ink3); }
.zk-fig figcaption b { font-size:13px; font-weight:900; color:var(--ink2); }
.zk-fig figcaption .cap-date { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  background:var(--bg3); border:2px solid var(--line); border-radius:999px; color:var(--ink2); }
.zk-fig figcaption a { color:var(--c-mth); font-weight:700; word-break:break-all; }

/* =========================================================
   見出し直下のチケット帯（ミシン目型）
   オリパ＝くじ。半券として成立させるには、点線ではなく
   「穴の連続」と「上下から地色が食い込む欠き」が要る。
   ※ このブロックは1箇所だけ。重複させると古い定義が勝つ。
   ========================================================= */
.zk-quick { display:flex; align-items:stretch; max-width:820px; margin-top:var(--s4);
  background:var(--yellow); border:3px solid var(--line); border-radius:14px;
  box-shadow:6px 6px 0 var(--shadow); }
.zk-quick-body { flex:1; min-width:0; padding:16px 24px; display:flex; flex-direction:column; gap:2px; justify-content:center; }
.zk-quick-kick { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:#7A6636; }
.zk-quick .zk-code-val { font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:.18em;
  color:#20170C; line-height:1.2; user-select:all; -webkit-user-select:all; overflow-wrap:anywhere; }
.zk-quick-row { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:6px; }
.zk-quick .zk-copy { min-height:34px; padding:0 14px; font-size:11.5px; box-shadow:3px 3px 0 var(--shadow); }
.zk-quick-row small { font-size:10px; font-weight:700; letter-spacing:.06em; color:#7A6636; }
.zk-quick-perf { position:relative; flex:none; width:0; border-left:3px dotted var(--line); margin:13px 0; }
.zk-quick-perf .bite { position:absolute; left:-11.5px; width:20px; height:20px;
  background:var(--bg); border:3px solid var(--line); border-radius:999px; }
.zk-quick-perf .bite.t { top:-24px; }
.zk-quick-perf .bite.b { bottom:-24px; }
.zk-quick-stub { flex:none; width:212px; background:var(--bg3); border-radius:0 11px 11px 0;
  padding:16px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.zk-quick-no { font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--ink3); }
.zk-quick-go { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px;
  font-size:14px; font-weight:900; line-height:1; text-decoration:none; color:#fff; background:var(--c-zkn);
  border:3px solid var(--line); border-radius:999px; box-shadow:4px 4px 0 var(--shadow); white-space:nowrap; }
.zk-quick-stub small { font-size:10px; font-weight:700; color:var(--ink3); }
.zk-quick.is-nocode .zk-quick-stub { width:auto; flex:1; border-radius:11px; }
@media (max-width:640px) {
  .zk-quick { flex-direction:column; }
  .zk-quick-perf { width:auto; height:0; border-left:0; border-top:3px dotted var(--line); margin:0 13px; }
  .zk-quick-perf .bite { left:auto; top:-11.5px; }
  .zk-quick-perf .bite.t { left:-24px; }
  .zk-quick-perf .bite.b { right:-24px; bottom:auto; }
  .zk-quick-stub { width:auto; border-radius:0 0 11px 11px; }
  .zk-quick-go { width:100%; }
}

/* ============================================================
   長文記事の可読性（2026-09-08）
   30,000字級の記事で、目次・表の幅・進捗を扱えるようにする。
   ============================================================ */

/* 表だけ本文幅（70ch）を突き抜けて、コンテナ幅いっぱいに広げる。
   .art-body は .wrap の中で左寄せなので、左端を基準に幅を伸ばせばよい。 */
.art-body .ledger { width: min(1092px, calc(100vw - 48px)); max-width: none; }
@media (max-width:600px){
  .art-body .ledger { width: calc(100vw - 36px); }
}

/* 読了進捗 */
.rp { position:fixed; top:0; left:0; height:3px; width:0; z-index:9999;
  background:var(--accent, #E0393E); transition:width .1s linear; }

/* 目次 */
.toc { border:3px solid var(--ink, #20170C); border-radius:14px; background:#fff;
  box-shadow:5px 5px 0 var(--ink, #20170C); margin:var(--s6) 0 var(--s7); overflow:hidden;
  width:min(1092px, calc(100vw - 48px)); }
@media (max-width:600px){ .toc { width:calc(100vw - 36px); } }
.toc > summary { list-style:none; cursor:pointer; padding:14px 20px; font-weight:900; font-size:16px;
  background:var(--yellow, #FFD43B); border-bottom:3px solid var(--ink, #20170C);
  display:flex; align-items:center; gap:10px; }
.toc > summary::-webkit-details-marker { display:none; }
.toc > summary::after { content:"開く"; margin-left:auto; font-size:12px; font-weight:900;
  border:2px solid var(--ink, #20170C); border-radius:999px; padding:2px 10px; background:#fff; }
.toc[open] > summary::after { content:"閉じる"; }
.toc .toc-n { font-size:12px; font-weight:900; color:#6B6047; }
.toc ol { list-style:none; margin:0; padding:14px 20px; counter-reset:toc;
  columns:2; column-gap:32px; }
@media (max-width:760px){ .toc ol { columns:1; } }
.toc li { margin:0 0 6px; line-height:1.55; break-inside:avoid; }
.toc li.l2 { margin-top:2px; }
.toc li.l3 { padding-left:1.4em; font-size:13.5px; }
.toc a { color:var(--ink, #20170C); text-decoration:none; border-bottom:1px solid rgba(32,23,12,.2); font-weight:700; font-size:14.5px; }
.toc li.l3 a { font-weight:500; color:#4A4030; }
.toc a:hover { border-color:var(--ink, #20170C); }

/* 見出しへのアンカー位置（追従ヘッダーぶん） */
.art-body h2[id], .art-body h3[id] { scroll-margin-top:88px; }

/* 大きい数字のブロック */
.figs { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;
  margin:var(--s5) 0 var(--s7); width:min(1092px, calc(100vw - 48px)); }
@media (max-width:600px){ .figs { width:calc(100vw - 36px); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } }
.fig { border:4px solid var(--ink, #20170C); border-radius:14px; background:#fff;
  box-shadow:5px 5px 0 var(--ink, #20170C); padding:16px 18px; }
.fig span { display:block; font-size:12.5px; font-weight:900; color:#8A7C60; letter-spacing:.03em; }
.fig b { display:block; margin-top:4px; font-size:34px; font-weight:900; letter-spacing:-.03em; line-height:1.15; }
.fig small { display:block; margin-top:4px; font-size:12.5px; font-weight:700; color:#6B6047; }
.fig.alert { background:#FFE1E8; border-color:#D11440; box-shadow:5px 5px 0 #D11440; }
.fig.alert b { color:#D11440; }

/* 比較表の絞り込み */
.tfil { display:flex; flex-wrap:wrap; gap:8px; margin:var(--s4) 0 var(--s3); align-items:center; }
.tfil-lb { font-size:12px; font-weight:900; color:#8A7C60; letter-spacing:.06em; margin-right:2px; }
.tfil button { font-size:13.5px; font-weight:900; color:var(--ink, #20170C); background:#fff;
  border:3px solid var(--ink, #20170C); border-radius:999px; padding:6px 15px; cursor:pointer;
  box-shadow:3px 3px 0 var(--ink, #20170C); line-height:1.5; }
.tfil button[aria-pressed="true"] { background:var(--ink, #20170C); color:#fff; }
.tfil .tfil-hit { margin-left:auto; font-size:12.5px; font-weight:900; color:#6B6047; }
tr.tf-hide { display:none; }

/* 個別解説のアコーディオン */
.sited { border:3px solid var(--ink, #20170C); border-radius:12px; background:#fff;
  box-shadow:4px 4px 0 var(--ink, #20170C); margin-bottom:14px;
  width:min(1092px, calc(100vw - 48px)); }
@media (max-width:600px){ .sited { width:calc(100vw - 36px); } }
.sited > summary { list-style:none; cursor:pointer; padding:13px 18px; font-weight:900; font-size:17px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sited > summary::-webkit-details-marker { display:none; }
.sited > summary::after { content:"＋"; margin-left:auto; font-size:17px; font-weight:900; color:#8A7C60; }
.sited[open] > summary { border-bottom:3px solid var(--ink, #20170C); background:#FFF8E9; }
.sited[open] > summary::after { content:"−"; }
.sited .sited-tag { font-size:12px; font-weight:900; border:2px solid #14110A; border-radius:999px;
  padding:1px 10px; background:#FFD43B; }
.sited .sited-tag.gy { background:#E7E2D2; color:#6E664F; border-color:#B8B09A; }
.sited .sited-in { padding:16px 18px 18px; }
.sited .sited-in > *:first-child { margin-top:0; }
.sited .sited-in .zk-tbl, .sited .sited-in .ledger { width:100%; }

/* 個別解説のジャンプリンク */
.jumps { display:flex; flex-wrap:wrap; gap:7px; margin:var(--s4) 0 var(--s6);
  width:min(1092px, calc(100vw - 48px)); }
@media (max-width:600px){ .jumps { width:calc(100vw - 36px); } }
.jumps a { font-size:13px; font-weight:800; color:#4A4030; background:#fff;
  border:2px solid #B8B09A; border-radius:999px; padding:4px 12px; text-decoration:none; }
.jumps a:hover { border-color:var(--ink, #20170C); color:var(--ink, #20170C); }

/* ============================================================
   スマホでの文字切れの修正（2026-09-08）
   原因は2つ。
   (1) .zk-tbl が overflow:hidden なので、溢れた内容が
       スクロールできずに切り落とされていた。
   (2) .zk-tbl th の white-space:nowrap と width:34% が
       狭い画面で table を container より広げていた。
   ============================================================ */

/* 全体：長い語や英数字の連続を折り返せるようにする */
.art-body .zk-tbl td, .art-body .zk-tbl th,
.art-body .ledger td, .art-body .ledger th,
.art-body li, .art-body p { overflow-wrap:anywhere; word-break:normal; }

/* 溢れたら切るのではなくスクロールさせる。角丸は維持する */
.art-body .zk-tbl { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.art-body .zk-tbl table { min-width:0; }

@media (max-width:700px){
  /* 見出しセルを折り返せるようにして、table を画面内に収める */
  .art-body .zk-tbl th {
    white-space:normal;
    width:34%;
    min-width:6.5em;
    padding:12px 12px;
    line-height:1.5;
  }
  .art-body .zk-tbl td { padding:12px 12px; line-height:1.75; }
  .art-body .zk-tbl table { font-size:13.5px; }

  /* ledger は元々スクロールするが、セルの詰まりを緩める */
  .art-body .ledger th, .art-body .ledger td { padding-left:12px; padding-right:12px; }
  .art-body .ledger { font-size:13.5px; }

  /* 数字ブロックが溢れないように */
  .fig b { font-size:27px; }
  .fig span, .fig small { overflow-wrap:anywhere; }

  /* アコーディオンの見出しが横に溢れないように */
  .sited > summary { font-size:15.5px; gap:8px; padding:12px 14px; }
  .sited .sited-in { padding:14px 14px 16px; }

  /* 目次 */
  .toc > summary { font-size:15px; padding:12px 14px; }
  .toc ol { padding:12px 14px; }
  .toc a { font-size:14px; }
}

/* 極端に狭い端末（iPhone SE など） */
@media (max-width:380px){
  .art-body .zk-tbl th { width:38%; min-width:5.5em; font-size:13px; }
  .art-body .zk-tbl td { font-size:13px; }
  .fig b { font-size:24px; }
}

/* コード・招待コードの類が溢れないように */
.art-body code { overflow-wrap:anywhere; word-break:break-all; }