@charset "utf-8";
/* ==========================================================================
   口座びらきの記録 ── デザインシステム
   採取元 https://www.ma-jan.or.jp/（比率だけ。色と書体は写していない）

   ■ 申告（A-09：ここに書いた数字は実装と一致していること）
     配色      CN-1 生成りの紙＋臙脂。彩度25%以上の色は臙脂の1色相だけ
                 効かせ色 #982A26 = H 2.1 / S 60.0% / L 37.3%
                 地・面・濃い面・無彩色5段は、いずれも S 21.4% 未満（＝彩度色に数えない）
                 実測の塗り面積（375×635 のどの位置でも最大）：
                   明るい画面 3.70%（kiji-3, y=1690）／暗い画面 1.87%（kiji-4, y=1440）
                   色相はすべて H0〜15 の1帯。R-03 の上限10%を下回る
     書体      FN-1 Literata（欧文・opsz 7..72 可変）／ Klee One（和文見出し）
                 ／ BIZ UDGothic（和文本文）／ Reddit Mono（数字）
     レイアウト LN-1 帯と副柱。1164px の器を 148 : 636 : 268 の非対称3列に割り、
                 器そのものを左に寄せて左右の余白を不均等にする
     動きの語彙 3種
                 ① 面がひらく    clip-path: inset(0 100% 0 0) → inset(0)
                                  ＝ここから先が読める状態になった
                 ② 札を返す      rotateY(0→180deg)（:checked＝読者が押したときだけ）
                                  ＝申込画面に書いてあること／実際に要ること の表と裏
                 ③ 地と字が入れ替わる  mix-blend-mode: difference
                                  ＝章の地の色が変わったこと（JS を1行も使わない）
     @keyframes 総数 0本（登場は transition のみ）／ animation の使用 0箇所
     イージング 2本  --ez（時間の演出）／ --ez-lin（スクロール進捗の等倍写像・P-11例外）
     影        4層＋輪郭の1組だけ。**押せる要素（a / button / label）にしか付けない**
     角丸      押せる要素 2px のみ。それ以外は 0（A-06）
     余白の刻み 7px の倍数。実際に鳴っている音は 7 / 14 / 21 / 35 / 56 / 91 の6つ
                 （実測。カードを重ねる箇所だけ罫を1本に見せるため -1px を使う）
     級数      375px で 13.2 → 14.5 → 16.0 → 17.6 → 19.4（比 1.10）→ 26.9（比 1.387 の跳ね）
                 → 32.5 → 39.3（比 1.208）。見出しの clamp は最小:最大 = 1 : 1.5 で統一
   ========================================================================== */

/* ── 変数 ───────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* 無彩色5段（暖かい墨。R-20：ここ以外の灰色を作らない） */
  --n1: #E6E4DD;   /* S 15.3% */
  --n2: #B9B5A9;   /* S 10.3% */
  --n3: #6E6A5F;   /* S  7.3% */
  --n4: #3A3730;   /* S  9.4% */
  --n5: #1C1A16;   /* S 12.0% */

  /* 面（3枚。P-16：章はこの3枚の切り替えで分ける） */
  --face-0: #F2F1ED;   /* 地      S 16.1% */
  --face-1: #E9E7E0;   /* 面      S 17.0% */
  --face-2: #2A2721;   /* 濃い面  S 12.0% */
  --paper:  #FAF9F7;   /* 紙      S 21.4% */

  /* 効かせ色（1色相だけ。R-03） */
  --ac:      #982A26;  /* H 2.1  S 60.0% L 37.3% */
  --ac-deep: #6E1D1B;  /* H 1.4  S 60.6% L 26.9% */
  --ac-tint: #EDE6E4;  /* S 20.0%（彩度色に数えない） */
  /* 濃い面の上では、同じ色相のまま明度だけ上げる（色相は1つのまま：R-03） */
  --ac-on-dark: #E0776D;         /* H 5.2  S 65.0% L 65.3%（濃い面で 4.98:1） */
  --acc-on-dark-rgb: 224 119 109;
  --ac-base: #982A26;            /* 面の入れ替えに引きずられない、素の効かせ色 */

  /* 文字 */
  --ink:     var(--n5);
  --ink-mid: var(--n3);
  --on-dark: #E8E5DC;         /* 濃い面の上に乗る文字 */
  --on-dark-rgb: 232 229 220; /* ↑と同じ色の三つ組。濃い面の中の淡い文字・質感はこれを使う */
  --on-dark-mid: #ADA89A;     /* 濃い面の上の、少し弱い文字 */

  /* 透明度は5段だけ（P-02） */
  --o1: .06; --o2: .12; --o3: .22; --o4: .44; --o5: .70;
  --ink-rgb: 28 26 22;
  --acc-rgb: 152 42 38;

  /* 操作できるものの色は別名前空間（P-19） */
  --form-face:   #FAF9F7;
  --form-edge:   #B9B5A9;
  --form-ink:    #1C1A16;
  --form-accent: #6E1D1B;
  --form-on:     #FAF9F7;

  /* 影は4層＋輪郭の1組。押せる要素だけに使う（R-07 / P-13 / A-06） */
  --sh: 0 0 0 1px rgb(var(--ink-rgb) / var(--o2)),
        0 1px 1px rgb(var(--ink-rgb) / var(--o1)),
        0 3px 8px rgb(var(--ink-rgb) / var(--o1)),
        0 10px 22px rgb(var(--ink-rgb) / var(--o1));
  --sh-up: 0 0 0 1px rgb(var(--ink-rgb) / var(--o3)),
        0 2px 2px rgb(var(--ink-rgb) / var(--o1)),
        0 6px 14px rgb(var(--ink-rgb) / var(--o2)),
        0 16px 34px rgb(var(--ink-rgb) / var(--o1));

  /* 動き（R-04：既定のカーブを1つも使わない） */
  --ez: cubic-bezier(.22, .61, .24, 1);
  --ez-lin: cubic-bezier(0, 0, 1, 1);      /* 進捗の等倍写像だけ（P-11 例外・運用） */
  --t-color: .16s;
  --t-move: .32s;
  --t-face: .62s;

  /* 余白：7px の倍数（1,2,3,5,8,13,21） */
  --s1: 7px; --s2: 14px; --s3: 21px; --s4: 35px;
  --s5: 56px; --s6: 91px; --s7: 147px;

  /* 画面の高さ（R-09 / P-14：100vh を書かない） */
  --lvh: 1vh;

  /* 差の合成（mix-blend-mode: difference）で反転させるための中間灰。
     色として読むものではなく、反転の基準値。R-20 の「場当たりの灰色」を作らないため変数で持つ */
  --diff-ink: #8C8C8C;
  /* 端を溶かすマスク（P-15）。マスクは不透明度だけを見るので色の値は意味を持たない */
  --edge: linear-gradient(90deg, transparent 0, rgb(var(--ink-rgb) / 1) 14px,
                          rgb(var(--ink-rgb) / 1) calc(100% - 14px), transparent 100%);

  /* 書体（P-04：欧文 → 和文 → 総称） */
  --f-head: 'Literata', 'Klee One', 'Hiragino Mincho ProN', serif;
  --f-body: 'Literata', 'BIZ UDGothic', 'Hiragino Sans', sans-serif;
  --f-num:  'Reddit Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* 級数 */
  --f-cap:  13.2px;
  --f-note: 14.5px;
  --f-base: 16px;
  --f-lede: clamp(17.6px, 15.36px + .597vw, 24px);
  --f-h3:   clamp(19.4px, 15.98px + .911vw, 29.1px);
  --f-h2:   clamp(26.9px, 22.15px + 1.268vw, 40.4px);
  --f-h1:   clamp(32.5px, 26.76px + 1.531vw, 48.8px);
  --f-disp: clamp(39.3px, 32.36px + 1.850vw, 59px);

  /* 器 */
  --shell: 1164px;
  --read: 636px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --n1: #2E2B25; --n2: #4E4A41; --n3: #9A958A; --n4: #C9C5BA; --n5: #E8E5DC;
    --face-0: #1A1814; --face-1: #211F1A; --face-2: #E9E7E0; --paper: #24221C;
    --ac: #E0776D; --ac-deep: #EFA096; --ac-tint: #2E2320;
    --ac-on-dark: #982A26; --acc-on-dark-rgb: 152 42 38; --ac-base: #E0776D;
    --ink: var(--n5); --ink-mid: var(--n3);
    --on-dark: #1C1A16; --on-dark-rgb: 28 26 22; --on-dark-mid: #5A554B;
    --ink-rgb: 232 229 220;
    --acc-rgb: 224 119 109;
    --form-face: #24221C; --form-edge: #4E4A41; --form-ink: #E8E5DC;
    --form-accent: #EFA096; --form-on: #1C1A16;
  }
}

/* ── 土台 ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--face-0);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--f-base);
  line-height: 1.88;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;      /* 約物の処理（P-06） */
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--form-accent); color: var(--form-on);
  padding: var(--s2) var(--s3); font-size: var(--f-note);
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* ── 文字の役（P-17：見出しはタグでなくクラスで当てる） ───────────── */
.t-disp, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-head);
  font-weight: 600;
  margin: 0;
  text-wrap: pretty;
}
.t-disp { font-size: var(--f-disp); line-height: 1.06; letter-spacing: -.034em; }
.t-h1   { font-size: var(--f-h1);   line-height: 1.08; letter-spacing: -.026em; }
.t-h2   { font-size: var(--f-h2);   line-height: 1.14; letter-spacing: -.018em; }
.t-h3   { font-size: var(--f-h3);   line-height: 1.28; letter-spacing: -.008em; }
.t-lede { font-size: var(--f-lede); line-height: 1.72; letter-spacing: .012em; margin: 0; }
.t-body { font-size: var(--f-base); line-height: 1.88; letter-spacing: .02em; margin: 0; }
.t-note { font-size: var(--f-note); line-height: 1.62; letter-spacing: .026em; margin: 0; color: var(--ink-mid); }
.t-cap  { font-size: var(--f-cap);  line-height: 1.62; letter-spacing: .03em; margin: 0; color: var(--ink-mid); }
.t-lab  {
  font-family: var(--f-num);
  font-size: var(--f-cap); line-height: 1.4; letter-spacing: .16em;
  text-transform: uppercase; margin: 0; color: var(--ink-mid);
}
.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500; letter-spacing: 0;
}
strong { font-weight: 700; color: var(--ac-deep); }
.ph { white-space: nowrap; }        /* 文節ロック（P-21 / R-19） */

/* 章の中でいちばん強い1〜2段落。赤い塊にせず、罫と字面の太さで出す */
.lead-line {
  border-left: 3px solid var(--ac);
  padding: var(--s1) 0 var(--s1) var(--s3);
  font-size: var(--f-lede); line-height: 1.72;
}
.lead-line strong { color: var(--ink); font-weight: 700; }
.band--f2 .lead-line strong { color: var(--on-dark); }

/* ── 骨格 ───────────────────────────────────────────────────────── */
.band { padding-block: var(--s6); }
.band--f0 { background: var(--face-0); }
.band--f1 { background: var(--face-1); }
/* 濃い面の中では、効かせ色を明るい側に差し替える（色相は変えない） */
.band--f2, .fv, .site, .foot {
  --ac: var(--ac-on-dark);
  --ac-deep: var(--ac-on-dark);
  --acc-rgb: var(--acc-on-dark-rgb);
  --ink-rgb: var(--on-dark-rgb);
  --ink-mid: var(--on-dark-mid);
}
.band--f2 { background: var(--face-2); color: var(--on-dark); }
.band--f2 .t-note, .band--f2 .t-cap, .band--f2 .t-lab { color: var(--on-dark-mid); }
.band--f2 strong { color: var(--ac-deep); }
.band--f2 .notes { background: rgb(var(--on-dark-rgb) / var(--o1)); }
.band--f2 .notes .t-note { color: var(--on-dark); }
.band--f2 .disc { background: rgb(var(--on-dark-rgb) / var(--o1)); }

/* 地の質感（A-07：ベタ塗りにしない。紙の目＋うすい罫） */
.band--f0 {
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / var(--o1)) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 18% 8%, rgb(var(--ink-rgb) / var(--o1)) 0, transparent 42%);
  background-size: 7px 100%, 100% 100%;
}
.band--f1 {
  background-image:
    repeating-linear-gradient(0deg, rgb(var(--ink-rgb) / var(--o1)) 0 1px, transparent 1px 28px);
}
.band--f2 {
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--on-dark-rgb) / var(--o1)) 0 1px, transparent 1px 21px),
    linear-gradient(168deg, rgb(var(--acc-rgb) / var(--o1)) 0%, transparent 46%);
}

/* 器：148 : 636 : 268 の非対称3列。器そのものを左に寄せる（R-02） */
.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--s3);
  max-width: var(--shell);
  margin-inline: auto;
}
@media (min-width: 1040px) {
  .grid {
    grid-template-columns: minmax(0, 148px) minmax(0, var(--read)) minmax(0, 268px);
    margin-left: max(var(--s5), calc((100vw - var(--shell)) * .38));
    margin-right: 0;
    padding-inline: 0 var(--s3);
  }
  .grid--wide { grid-template-columns: minmax(0, 148px) minmax(0, 1fr); }
}
.rail { min-width: 0; }
.stack { min-width: 0; }
/* 余白のリズム（A-03）。7px の倍数から、実際に鳴らす音を6つ選んでいる：
   7 / 14 / 21 / 35 / 56 / 91 */
.stack > * + * { margin-top: var(--s3); }     /* 21 …段落と段落 */
.stack > .t-h3 + * { margin-top: var(--s2); } /* 14 …見出しの直後 */
.stack > * + .t-h3 { margin-top: var(--s5); } /* 56 …章の切り替わり */
.stack > .fig + .t-h3 { margin-top: var(--s6); } /* 91 …図のあとの章 */
.stack > * + .t-h2 { margin-top: var(--s6); }
.stack > * + .fig  { margin-top: var(--s4); } /* 35 …図の前 */
.stack > .fig + *  { margin-top: var(--s4); }
.stack > * + .notes { margin-top: var(--s4); }
.stack > .notes + .notes { margin-top: var(--s2); }
.stack > * + .cl   { margin-top: var(--s2); }
.stack > * + .ad   { margin-top: var(--s5); }
.stack > .t-lede + * { margin-top: var(--s1); } /* 7 …リードと断りは近づける */
.stack > .disc + * { margin-top: var(--s4); }
.stack > * + .lead-line { margin-top: var(--s4); }
.stack > .lead-line + * { margin-top: var(--s4); }

/* ── ヘッダー ────────────────────────────────────────────────── */
.site {
  position: relative; z-index: 20;
  background: var(--face-2); color: var(--on-dark);
  border-bottom: 3px solid var(--ac);
}
.site__in {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--s2) var(--s3);
  display: grid; gap: var(--s2);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
}
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__t { display: grid; }
.brand__n { font-family: var(--f-head); font-size: 17.6px; line-height: 1.14; letter-spacing: .01em; font-weight: 600; }
.brand__s { font-family: var(--f-num); font-size: 10.5px; line-height: 1.4; letter-spacing: .18em; opacity: var(--o5); }
.nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); justify-content: flex-end; }
.nav a {
  font-size: var(--f-note); line-height: 1.4; letter-spacing: .04em;
  text-decoration: none; padding: 3px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-color) var(--ez), color var(--t-color) var(--ez);
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ac); }

/* 章帯：地の色が変わると字が入れ替わる（動きの語彙③ mix-blend-mode） */
.strip {
  position: sticky; top: 0; z-index: 15;
  mix-blend-mode: difference;
  pointer-events: none;
  padding: var(--s1) var(--s3);
  max-width: var(--shell); margin-inline: auto;
}
.strip__in {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  font-family: var(--f-num); font-size: 11px; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--diff-ink);
}
@supports not (mix-blend-mode: difference) { .strip { display: none; } }

/* ── ファーストビュー（P-18 定義文型 / VN-1 除外先出し型 / R-13 CTAなし） ── */
.fv {
  position: relative; overflow: hidden;
  background: var(--face-2); color: var(--on-dark);
  min-height: calc(74 * var(--lvh));          /* P-14：100vh を書かない */
  display: grid; align-content: center;
  padding-block: var(--s6);
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--on-dark-rgb) / var(--o1)) 0 1px, transparent 1px 21px),
    linear-gradient(162deg, rgb(var(--acc-rgb) / var(--o1)) 0%, transparent 52%);
}
.fv__grid {
  max-width: var(--shell); margin-inline: auto; width: 100%;
  padding-inline: var(--s3);
  display: grid; gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1040px) {
  .fv__grid {
    grid-template-columns: minmax(0, 13fr) minmax(0, 9fr);
    align-items: center;
    margin-left: max(var(--s5), calc((100vw - var(--shell)) * .38));
    margin-right: 0;
  }
}
.fv__lab { color: var(--ac-deep); }
.fv__t { margin-top: var(--s2); }
.fv__lede { margin-top: var(--s3); max-width: 34em; color: var(--on-dark); }
.fv__excl {
  margin-top: var(--s4);
  border-left: 3px solid var(--ac);
  padding: var(--s2) 0 var(--s2) var(--s3);
  background: linear-gradient(90deg, rgb(var(--on-dark-rgb) / var(--o1)) 0%, transparent 72%);
}
.fv__excl dt { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .16em; color: var(--ac-deep); }
.fv__excl dd { margin: var(--s1) 0 0; font-size: var(--f-note); line-height: 1.62; color: var(--on-dark); }
.fv__art { align-self: center; margin: 0; }
.fv__art .isoart { color: var(--on-dark); opacity: .92; }
.fv__cap {
  margin: var(--s2) 0 0; font-size: var(--f-cap); line-height: 1.62;
  letter-spacing: .03em; color: var(--on-dark-mid); max-width: 32em;
}

/* ── 箇条書き ─────────────────────────────────────────────────── */
.cl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: cl; }
.cl__item {
  counter-increment: cl;
  display: grid; gap: 2px var(--s2);
  grid-template-columns: minmax(0, 30px) minmax(0, 1fr);
  padding: var(--s2) 0;
  border-top: 1px solid rgb(var(--ink-rgb) / var(--o2));
}
.cl__item::before {
  content: counter(cl, decimal-leading-zero);
  font-family: var(--f-num); font-size: var(--f-cap); line-height: 1.9;
  color: var(--ac); letter-spacing: 0;
}
.cl__k { font-weight: 700; font-size: var(--f-base); line-height: 1.5; }
.cl__p { grid-column: 2; }

/* ── 注記（B-12：先に断る注記を、小さく隠さずに置く） ─────────────── */
.notes {
  background: var(--paper);
  border-left: 5px solid var(--ac);
  padding: var(--s3);
  display: grid; gap: var(--s1);
}
.notes__t { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .16em; color: var(--ac-deep); }
.notes .t-note { font-size: var(--f-note); color: var(--ink); }
.notes__src { font-size: var(--f-cap); color: var(--ink-mid); }

/* ── 図 ───────────────────────────────────────────────────────── */
.fig { margin: 0; background: var(--paper); padding: var(--s3); }
.fig__body { overflow-x: auto; }
.fig__cap { font-size: var(--f-cap); line-height: 1.62; margin: var(--s2) 0 0; color: var(--ink-mid); }
.fig__note { font-size: var(--f-cap); line-height: 1.62; margin: 2px 0 0; color: var(--ink-mid); }

/* ── 図の中身（GN-1 等角投影の板）────────────────────────────
   図の文字は HTML で書く。SVG の <text> は viewBox の縮尺で縮み、
   375px の実機で 13px を割るため（落とし穴4）。SVG は形だけを描く。 */
.dv { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.dv__scale {
  position: relative; height: 26px;
  margin-left: 120px; margin-right: 48px;
  border-bottom: 1px solid rgb(var(--ink-rgb) / var(--o3));
}
.dv__tick { position: absolute; left: calc(var(--p) * 100%); bottom: 0; }
.dv__tick b {
  display: block; transform: translateX(-50%); width: max-content;
  font-size: var(--f-cap); line-height: 1.4; font-weight: 400;
  color: var(--ink-mid); padding-bottom: 4px;
}
.dv__tick::before {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 1px; height: 5px;
  background: rgb(var(--ink-rgb) / var(--o3));
}
.dv__row {
  display: grid; align-items: center; gap: var(--s2);
  grid-template-columns: minmax(0, 106px) minmax(0, 1fr) minmax(0, 34px);
}
.dv__lab { font-size: var(--f-cap); line-height: 1.4; }
.dv__bar {
  display: block; height: 26px; position: relative;
  background-image: repeating-linear-gradient(90deg,
    rgb(var(--ink-rgb) / var(--o2)) 0 1px, transparent 1px 25%);
  border-bottom: 1px solid rgb(var(--ink-rgb) / var(--o3));
}
.dv__fill {
  display: block; height: 22px; width: calc(var(--v) * 100%);
  background: linear-gradient(96deg, var(--ac) 0%, var(--ac-deep) 100%);
  clip-path: polygon(0 100%, 11px 0, 100% 0, calc(100% - 11px) 100%);
  position: absolute; left: 0; top: 2px;
}
.dv__v { font-size: var(--f-note); text-align: right; }
.dv__unit {
  margin: 0; font-size: var(--f-cap); line-height: 1.62; color: var(--ink-mid);
  border-top: 1px solid rgb(var(--ink-rgb) / var(--o2)); padding-top: var(--s1);
}

.dv--steps { gap: 0; }
.dv__st {
  display: grid; gap: 0 var(--s2); align-items: baseline;
  grid-template-columns: minmax(0, 34px) minmax(0, 1fr);
  padding: var(--s2) 0;
  border-top: 1px solid rgb(var(--ink-rgb) / var(--o2));
  position: relative;
}
.dv__st::after {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px;
  background: rgb(var(--ink-rgb) / var(--o2));
}
.dv__st:last-child::after { bottom: 50%; }
.dv__stn {
  font-size: var(--f-cap); color: var(--ac); position: relative; z-index: 1;
  background: var(--paper); padding: 2px 0;
}
.dv__stl { font-weight: 700; font-size: var(--f-note); line-height: 1.5; }
.dv__sts { grid-column: 2; font-size: var(--f-cap); line-height: 1.62; color: var(--ink-mid); }

.dv--tree { gap: 0; }
.dv__tr {
  padding: var(--s1) var(--s2);
  margin-left: calc((var(--d) - 1) * 21px);
  margin-top: 3px;
  border-left: 3px solid var(--ac);
  background: rgb(var(--ink-rgb) / var(--o1));
}
.dv__tr[data-d="1"] { font-weight: 700; }
.dv__tr[data-d="2"] { border-left-color: rgb(var(--acc-rgb) / var(--o4)); }
.dv__tr[data-d="3"] { border-left-color: rgb(var(--ink-rgb) / var(--o3)); }
.dv__trl { font-size: var(--f-note); line-height: 1.5; }

.dv--pairs { gap: 0; }
.dv__pr {
  display: grid; gap: var(--s1) var(--s2); align-items: center;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  padding: var(--s2) 0;
  border-top: 1px solid rgb(var(--ink-rgb) / var(--o2));
}
.dv__pl { font-weight: 700; font-size: var(--f-note); line-height: 1.5; }
.dv__pv { font-size: var(--f-note); line-height: 1.5; color: var(--ink-mid); }
.dv__pa {
  height: 22px; display: block; background: var(--ac);
  clip-path: polygon(0 calc(50% - .5px), calc(100% - 7px) calc(50% - .5px),
                     calc(100% - 7px) 30%, 100% 50%, calc(100% - 7px) 70%,
                     calc(100% - 7px) calc(50% + .5px), 0 calc(50% + .5px));
}

.dv--nums { gap: 0; }
.dv__nr {
  display: grid; gap: var(--s2); align-items: baseline;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  padding: var(--s2) 0; border-top: 1px solid rgb(var(--ink-rgb) / var(--o2));
}
.dv__nl { font-size: var(--f-note); line-height: 1.5; }
.dv__nv { font-size: 26.9px; line-height: 1.14; letter-spacing: -.018em; color: var(--ac); }
.dv--nums .dv__unit { border-top: 1px solid rgb(var(--ink-rgb) / var(--o2)); }

/* ── 表 ───────────────────────────────────────────────────────── */
.tw {
  overflow-x: auto;
  -webkit-mask-image: var(--edge); mask-image: var(--edge);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: var(--f-note); }
th, td { text-align: left; padding: var(--s2); border-bottom: 1px solid rgb(var(--ink-rgb) / var(--o2)); vertical-align: top; line-height: 1.62; }
thead th { background: var(--face-2); color: var(--on-dark); font-weight: 600; letter-spacing: .04em; }
tbody th { font-weight: 700; }

/* ── 広告枠（S-11）と 広告開示（S-12） ───────────────────────────── */
.disc {
  display: grid; gap: var(--s1);
  grid-template-columns: minmax(0, 1fr);
  background: var(--ac-tint);
  border-top: 2px solid var(--ac);
  padding: var(--s2) var(--s3);
  font-size: var(--f-note); line-height: 1.62;
}
@media (min-width: 560px) { .disc { grid-template-columns: minmax(0, 108px) minmax(0, 1fr); gap: var(--s3); } }
.disc__t { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .14em; color: var(--ac-deep); }
.ad { border: 1px solid rgb(var(--ink-rgb) / var(--o3)); background: var(--paper); }
.ad__head {
  display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s1) var(--s2);
  background: var(--ac-tint);
  font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .12em; color: var(--ac-deep);
}
.ad__body { padding: var(--s3); display: grid; gap: var(--s2); }
.ad__slot {
  min-height: 96px; display: grid; place-items: center;
  border: 1px solid rgb(var(--ink-rgb) / var(--o2));
  background:
    repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / var(--o1)) 0 1px, transparent 1px 9px);
  color: var(--ink-mid); font-size: var(--f-cap); letter-spacing: .1em; text-align: center;
  padding: var(--s3);
}

/* ── 押せるもの（影と角丸はここだけ：A-06） ─────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--form-face); color: var(--form-ink);
  border: 1px solid var(--form-edge); border-radius: 2px;
  padding: var(--s2) var(--s3);
  font-family: var(--f-body); font-size: var(--f-note); line-height: 1.4; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--sh);
  transition: box-shadow var(--t-move) var(--ez), transform var(--t-move) var(--ez),
              background-color var(--t-color) var(--ez);
}
.btn:hover { box-shadow: var(--sh-up); transform: translateY(-1px); }
.btn--solid { background: var(--form-accent); color: var(--form-on); border-color: var(--form-accent); }

.card {
  display: grid; gap: var(--s1);
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / var(--o2));
  border-left: 4px solid var(--ac);
  padding: var(--s3);
  text-decoration: none;
  transition: border-left-width var(--t-move) var(--ez), background-color var(--t-color) var(--ez);
}
.card:hover { border-left-width: 9px; background: var(--ac-tint); }
.card__n { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .14em; color: var(--ac); }
.card__t { font-family: var(--f-head); font-weight: 600; font-size: 19.4px; line-height: 1.28; letter-spacing: -.008em; }
.card__d { font-size: var(--f-note); line-height: 1.62; color: var(--ink-mid); }

/* ── 動きの語彙② 札を返す（読者が押したときだけ動く） ───────────── */
.flip { display: grid; }
.flip__sw { position: absolute; opacity: 0; pointer-events: none; }
.flip__box {
  display: grid; cursor: pointer;
  perspective: 1100px;
  border-radius: 2px;
  box-shadow: var(--sh);
}
.flip__in {
  display: grid; grid-template-areas: "f";
  transform-style: preserve-3d;
  transition: transform var(--t-face) var(--ez);
  min-height: 168px;
}
.flip__f, .flip__b {
  grid-area: f; backface-visibility: hidden;
  padding: var(--s3); display: grid; gap: var(--s1); align-content: center;
}
.flip__f { background: rgb(var(--on-dark-rgb) / var(--o1)); color: var(--on-dark); }
.flip__f .t-note { color: var(--on-dark-mid); }
.flip__b { background: var(--on-dark); color: var(--face-2); transform: rotateY(180deg); }
.flip__b .t-note, .flip__b .cl__k { color: var(--face-2); }
.flip__b .flip__hint { color: var(--ac-base); }
.flip__sw:checked + .flip__box .flip__in { transform: rotateY(180deg); }
.flip__hint { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .12em; color: var(--ac); }

/* ── 動きの語彙① 面がひらく ────────────────────────────────────── */
html.js [data-rv] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--t-move) var(--ez), clip-path var(--t-face) var(--ez);
}
html.js [data-rv="in"] { opacity: 1; clip-path: inset(0 0 0 0); }

/* ── 読書プログレス（B-14：JSを1行も使わない） ────────────────── */
.prog {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 30;
  background: var(--ac); transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll(root)) {
  .prog {
    animation-name: prog; animation-duration: 1ms;
    animation-timing-function: var(--ez-lin);
    animation-fill-mode: both;
    animation-timeline: scroll(root);
  }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── 副柱 ───────────────────────────────────────────────────── */
.rail__box { border-top: 2px solid var(--ac); padding-top: var(--s2); display: grid; gap: var(--s2); }
.rail__t { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .14em; color: var(--ac-deep); }
.rail__l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.rail__l a { font-size: var(--f-note); line-height: 1.5; }
.chap { display: grid; gap: var(--s1); position: sticky; top: var(--s5); }
.chap__i { font-family: var(--f-num); font-size: var(--f-cap); letter-spacing: .1em; color: var(--ink-mid); text-decoration: none; }
.chap__i[aria-current="true"] { color: var(--ac); }

/* ── フッター ─────────────────────────────────────────────────── */
.foot { background: var(--face-2); color: var(--on-dark); padding-block: var(--s5); }
.foot__in {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--s3);
  display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) { .foot__in { grid-template-columns: minmax(0, 12fr) minmax(0, 7fr) minmax(0, 5fr); } }
.foot a { color: inherit; }
.foot__l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--f-note); }
.foot__c { font-size: var(--f-cap); line-height: 1.62; color: rgb(var(--ink-rgb) / var(--o5)); }

/* ── 印刷（B-15） ─────────────────────────────────────────────── */
@media print {
  .site, .strip, .prog, .nav, .ad { display: none !important; }
  body { background: var(--paper); }
  .band { padding-block: var(--s3); break-inside: avoid; }
  .fig, .notes, .cl__item { break-inside: avoid; }
  html.js [data-rv] { opacity: 1 !important; clip-path: none !important; }
}

/* ── 動きを止める（R-10） ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js [data-rv] { opacity: 1 !important; clip-path: inset(0 0 0 0) !important; }
}