/* ==========================================================================
   report.css — AI・VPN・記事・PRODUCT LAB・LAB など大半のページのスタイル（移行中）
   デザインの正本は .claude/skills/monetization-lab-design/SKILL.md。

   ⚠️ 2026-09-15 改訂。旧「検査成績書（紙色＋藍＋角丸0）をサイト標準にする」方針は廃止した。
      2026-09-15 の Phase 1A〜1C で、色（1A）・共通部品の角丸と影（1B）・スマホヘッダー（1C-1）・
      本文ブロックの余白（1C-2）・書体（1C-3）を public/assets/tokens.css（--jm-*）へ接続した。
      ページ専用CSSで作られた部品は未移行（Phase 2）。

   どのCSSを読むかは BaseLayout の design プロパティが決める。
      design="report" … tokens.css → このファイル
      design 省略      … /assets/style.css（トップ・旧深緑ページ）

   ⚠️ 既存の変数名（--paper --ink --accent …）は残す。ページ内CSSがこの名前を見ているため、
      値だけを var(--jm-*) にすれば全ページが追従する。新しいルールで旧名を増やさない。
   ⚠️ 新しい色・角丸・影・文字サイズの生の値を書かない（npm run verify:design が止める）。
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 面 (Surface) --- */
  --paper:      var(--jm-bg);             /* 地。旧 #FBFAF7 */
  --field:      var(--jm-surface);        /* カード・表・入力欄。旧 #FFFFFF */
  --field-alt:  var(--jm-surface-sunk);   /* 表ヘッダ・フッタ。旧 #F4F2EC */

  /* --- 文字 (Ink / Muted) --- */
  --ink:        var(--jm-text);           /* 本文。旧 #1A1A1A */
  --ink-2:      var(--jm-text-2);         /* 補足。旧 #57544C */
  --ink-3:      var(--jm-text-3);         /* 注記（12px以上）。旧 #6B6757 */

  /* --- 罫線 --- */
  --rule:       var(--jm-line);           /* 旧 #DAD5C9 */
  --rule-firm:  var(--jm-line);           /* 旧 #B6B0A0。トークンに「濃い線」は無いので同じ線にそろえる */

  /* --- Accent: 緑（旧: 藍 #3A5F8A）--- */
  --accent:     var(--jm-green-ink);      /* リンク・操作・実測/公式確認。旧 #3A5F8A */
  --accent-dp:  var(--jm-green-deep);     /* hover・押した状態。旧 #2E4C6F */
  --accent-vl:  var(--jm-green-veil);     /* ごく薄い面。旧 #EFF3F7 */

  /* --- Amber: 保留・不承認・未検証 --- */
  --amber:      #FFD98A;                  /* 面と下線だけ。文字には使わない。対応するトークンが無いので旧値のまま */
  --amber-ink:  var(--jm-amber-ink);      /* 旧 #7A5A0F（同値） */
  --amber-vl:   var(--jm-amber-surface);  /* 旧 #FFF6E4（同値） */

  /* --- 書体: システムフォント（Phase 1C-3。旧 Zen Kaku Gothic New / IBM Plex Mono の Webフォント読み込みは廃止） --- */
  --sans: var(--jm-font-sans);
  --disp: var(--jm-font-sans);
  --mono: var(--jm-font-mono);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.25em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shell { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }

/* 欄外の小ラベル。12px が下限 */
.cap {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 本文の途中から飛べるように、リンク先の見出しに余白を確保する */
:target { scroll-margin-top: 1.5rem; }

/* ==========================================================================
   共通ヘッダ / フッタ
   既存コンポーネント（SiteHeader.astro / SiteFooter.astro）のclass名を
   そのまま使っています。コンポーネント側は変更していません。
   ========================================================================== */
.site-header {
  position: relative;          /* 旧デザインは absolute でヒーローに重ねていた */
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .shell {
  display: flex;
  flex-wrap: wrap;            /* ナビが入りきらないときは折り返す。横スクロールを出さない保険 */
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
/* 旧デザインは丸い光る点。帳票なので四角にする */
.brand-mark { width: 9px; height: 9px; flex: none; background: var(--accent); }
.brand-ja { font-family: var(--sans); font-weight: 400; font-size: 0.75rem; color: var(--ink-2); }

.site-nav { display: flex; gap: clamp(0.75rem, 3vw, 1.75rem); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;       /* タップ領域 44px */
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--accent); text-decoration: underline; }

.site-footer { margin-top: 0; padding: 2.5rem 0 3.5rem; border-top: 2px solid var(--ink); background: var(--field-alt); }
.footer-top { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.footer-links a:hover { color: var(--accent); }
.affiliate-notice {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: 46em;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--ink-2);
}
.copyright { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ink-3); }

/* ==========================================================================
   検証ラベル（Signature の一部）
   形（■ ◇ △ ―）と日本語を必ずセットにする ＝ 色を消しても意味が通る。

   .mk    … ページ固有のラベルを書くときの下地
   .trust … TrustLabel.astro が出す4種。同じ見た目にそろえる
   ========================================================================== */
.mk,
.trust {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border: 1px solid currentColor;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.mk-g { font-family: var(--mono); font-size: 0.8125rem; font-style: normal; }

/* TrustLabel はマークアップに記号を持たないので、CSSで足す。
   日本語ラベルは常に出ているので、記号が読めなくても意味は通る。 */
.trust::before { font-family: var(--mono); }
.trust--tested::before   { content: "■"; }
.trust--official::before { content: "◇"; }
.trust--external::before { content: "△"; }
.trust--untested::before { content: "―"; }

.mk--tested,   .trust--tested   { color: var(--accent);    background: var(--accent-vl); }
.mk--official, .trust--official { color: var(--accent);    background: transparent; }
.mk--external, .trust--external { color: var(--ink-2);     background: transparent; }
.mk--untested, .trust--untested { color: var(--amber-ink); background: var(--amber-vl); border-style: dashed; }

.mk--sm { margin-top: 0.35rem; padding: 0.1rem 0.4rem 0.1rem 0.3rem; font-size: 0.75rem; }
.mk--flat { margin-top: 0; }

.trust-date { font-weight: 400; font-size: 0.75rem; color: var(--ink-2); }

/* 実験ステータス（StatusBadge.astro）。TESTING / VERIFIED / ARCHIVED */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.25rem 0.6rem;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
}
.status .dot { width: 7px; height: 7px; background: currentColor; }
.status--testing  { color: var(--accent); background: var(--accent-vl); }
.status--verified { color: var(--accent); background: transparent; }
.status--archived { color: var(--ink-3);  background: transparent; }

/* ==========================================================================
   測定票（Signature UI）
   必須4項目: 測定日 / 条件 / 実測値 / 出所
   未実測でも同じ器を使う。値の欄を空にするのではなく「―」を置く。
   ========================================================================== */
.slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }

.slip { position: relative; overflow: clip; border: 1px solid var(--rule-firm); border-radius: var(--jm-radius-card); background: var(--field); box-shadow: var(--jm-shadow); }
.slip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.slip--todo { border-style: dashed; background: var(--amber-vl); box-shadow: none; }
.slip--todo::before { background: var(--amber); }

.slip-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem 0.7rem 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.slip-date { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-2); }
.slip-body { padding: 1.15rem 1.1rem 0.4rem 1.35rem; }
.slip-item { margin: 0; font-family: var(--disp); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.slip-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.slip-value .v { font-size: clamp(2.25rem, 9vw, 3rem); letter-spacing: -0.02em; }
.slip-value .u { font-size: 1.0625rem; color: var(--ink-2); }
.slip--todo .slip-value .v { color: var(--amber-ink); }

.slip-fields { margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.slip-fields > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.slip-fields > div:last-child { border-bottom: 0; }
.slip-fields dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 0.3rem; }
.slip-fields dd { margin: 0; font-size: 0.9375rem; line-height: 1.8; color: var(--ink-2); }
.slip-fields dd b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   実験進捗トラック
   01〜06 は本物の順序（先へ進まないと次に行けない）なので番号を振ってよい。
   ⚠️ 失敗した段階を消さない。「不承認」も結果として同じ強さで出す。
   ========================================================================== */
.stage-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule-firm);
  border-bottom: 0;
  border-top-left-radius: var(--jm-radius-card);
  border-top-right-radius: var(--jm-radius-card);
  background: var(--field-alt);
}
.stage-now { font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.04em; }
.stage-now b { color: var(--accent); }

.stages { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule-firm); border-bottom-left-radius: var(--jm-radius-card); border-bottom-right-radius: var(--jm-radius-card); background: var(--field); }
.stage {
  display: grid;
  grid-template-columns: 2.25rem 1.35rem 1fr auto;
  gap: 0 0.75rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.stage:last-child { border-bottom: 0; }
.stage-n { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.node { width: 0.7rem; height: 0.7rem; border: 1px solid var(--rule-firm); background: transparent; }
.is-done .node { border-color: var(--accent); background: var(--accent); }
.is-stop .node { border-color: var(--amber-ink); background: var(--amber); }
.is-now  .node { border: 3px solid var(--accent); background: var(--field); }

.stage-label { font-size: 0.9375rem; font-weight: 700; }
.is-todo .stage-label { color: var(--ink-3); font-weight: 400; }
.stage-state { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-align: right; }
.is-done .stage-state { color: var(--accent); }
.is-stop .stage-state { color: var(--amber-ink); }
.is-now  .stage-state { color: var(--accent); font-weight: 600; }
.is-todo .stage-state { color: var(--ink-3); }

/* ページ中で唯一動くもの。「いま動いている」以外の意味は持たせない */
.stage-run { grid-column: 3 / -1; position: relative; height: 2px; margin-top: 0.5rem; background: var(--rule); overflow: hidden; }
.stage-run::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 32%;
  background: var(--accent);
  animation: run 2.8s linear infinite;
}
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(413%); } }

@media (prefers-reduced-motion: reduce) {
  .stage-run::after { animation: none; width: 45%; }
}

/* ==========================================================================
   表
   ========================================================================== */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--rule-firm); border-radius: var(--jm-radius-card); background: var(--field); box-shadow: var(--jm-shadow); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp--wide { min-width: 40rem; }
.cmp caption {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--field-alt);
  text-align: left;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.cmp th, .cmp td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.8;
}
.cmp thead th {
  font-family: var(--disp);
  font-weight: 700;
  background: var(--field-alt);
  border-bottom: 1px solid var(--rule-firm);
  white-space: nowrap;
}
.cmp tbody th {
  position: sticky;
  left: 0;
  background: var(--field);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 1px 0 0 var(--rule);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }
.cell-v { display: block; font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.cell-v.na { color: var(--ink-3); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0 0 1rem; padding: 0; list-style: none; }

/* 本文中の表。1列目は固定せず折り返す（項目名が長いため） */
.cmp--text tbody th { position: static; box-shadow: none; white-space: normal; width: 7.5rem; }

/* ==========================================================================
   ボタン / 出口
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--jm-radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s linear;
}
.btn:hover { background: var(--accent-dp); border-color: var(--accent-dp); }
.btn .ext { font-family: var(--mono); font-size: 0.875rem; }

.exits { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.exit {
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  box-shadow: var(--jm-shadow);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s linear;
}
.exit:hover { border-color: var(--accent); box-shadow: var(--jm-shadow-hover); }
.exit-k { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); }
.exit-t { display: block; margin-top: 0.3rem; font-family: var(--disp); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.exit-d { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }
.exit--soon { border-style: dashed; background: transparent; box-shadow: none; cursor: default; }
.exit--soon .exit-k { color: var(--ink-3); }
.exit--soon .exit-t { color: var(--ink-2); }

/* ==========================================================================
   記事ページ
   本文は「気持ちよく読めるWeb記事」。罫線もカードも本文には持ち込まない。
   検査成績書らしさは、本文の外側（メタ・票・進捗・確認日）だけで出す。
   ========================================================================== */

/* 記事の柱。本文は読みやすい幅で、証拠と票だけが外へはみ出す */
.entry {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [wide-start] minmax(0, 5rem)
    [text-start] minmax(0, 38rem) [text-end]
    minmax(0, 5rem) [wide-end]
    minmax(1.25rem, 1fr) [full-end];
}
.entry > * { grid-column: text; }
.entry > .wide { grid-column: wide; }

.entry-head { padding: clamp(1.75rem, 5vw, 2.75rem) 0 0; }
.entry-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.entry-rail .sp { margin-left: auto; }

.entry-head h1 {
  margin: 1.15rem 0 0;
  font-family: var(--disp);
  font-size: clamp(1.75rem, 5.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.entry-lead { margin: 1.1rem 0 0; font-size: 1.0625rem; line-height: 2; color: var(--ink-2); }
.entry-lead b { color: var(--ink); font-weight: 700; }

.entry-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 1.25rem 0 0; }
.entry-when { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-2); }

/* --- 目次。既定は閉じている。JSは使わない（<details>/<summary>） --- */
.toc {
  margin: clamp(1.5rem, 4vw, 2rem) 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.toc > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;          /* 48px。タップ領域 */
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-3);
}
.toc[open] > summary::after { content: "−"; }
.toc > summary:hover { color: var(--accent); }
.toc-n { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }

.toc-list { margin: 0 0 0.9rem; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.toc-list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;       /* 44px */
  padding: 0.25rem 0;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-decoration: none;
}
.toc-list a:hover { color: var(--accent); text-decoration: underline; }
.toc-list .n { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); margin-right: 0.6rem; }

/* --- 本文 --- */
.prose { margin: clamp(2rem, 5vw, 3rem) 0 0; font-size: 1.0625rem; line-height: 2.05; }
.prose > p { margin: 0 0 1.55em; }
.prose > h2 {
  margin: 2.6em 0 0.9em;
  font-family: var(--disp);
  font-size: clamp(1.375rem, 4.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  scroll-margin-top: 1.5rem;
}
/* 本文ブロックの先頭・末尾の余白は外側（.prose / .pl-sec / .entry-foot）が持つ（Phase 1C-2）。
   ⚠️ .entry は grid なので、子の margin が相殺されず足し算になる（段落の下 26px ＋ 次の節の上 40px ＝ 65px の空白）。 */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose > h3 { margin: 2.2em 0 0.7em; font-family: var(--disp); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.prose > ul, .prose > ol { margin: 0 0 1.55em; padding-left: 1.35em; }
.prose li { margin-bottom: 0.75em; }
.prose li:last-child { margin-bottom: 0; }
.prose b, .prose strong { font-weight: 700; }
.prose a { font-weight: 700; }

/* 手順。番号は「順番どおりにやったこと」を表すので使ってよい */
.steps-log { margin: 0 0 1.55em; padding: 0; list-style: none; counter-reset: st; }
.steps-log > li { counter-increment: st; margin: 0 0 1.4em; padding-left: 2.6rem; position: relative; }
.steps-log > li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.35em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}
.steps-log h3 { margin: 0 0 0.35em; font-family: var(--disp); font-size: 1.0625rem; font-weight: 700; line-height: 1.6; }
.steps-log p { margin: 0; }

/* 順番が変わった、を見せる1行。カードにも表にもしない */
.flow {
  margin: 0 0 1.55em;
  padding: 0.9rem 1.1rem;
  background: var(--accent-vl);
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}

/* 受け取った英文の原文 */
.quote-en { margin: 0 0 1.55em; padding: 1rem 1.2rem; border-left: 3px solid var(--amber); background: var(--amber-vl); }
.quote-en p { margin: 0; font-family: var(--mono); font-size: 0.9375rem; line-height: 1.85; }
.quote-en cite { display: block; margin-top: 0.6rem; font-family: var(--sans); font-size: 0.8125rem; font-style: normal; color: var(--ink-2); }

/* 本文中の未検証マーク */
.tbd {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.4rem;
  padding: 0.05rem 0.45rem 0.05rem 0.35rem;
  border: 1px dashed var(--amber-ink);
  background: var(--amber-vl);
  color: var(--amber-ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.tbd::before { content: "―"; font-family: var(--mono); }

/* --- 一次証拠 --- */
.evidence { margin: 0 0 1.8em; }
.evidence img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-firm); background: var(--field); }
.evidence figcaption { margin-top: 0.7rem; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }
.evidence figcaption b { color: var(--ink); font-weight: 700; }
.ev-mask { display: block; margin-top: 0.3rem; font-size: 0.8125rem; color: var(--ink-3); }

/* 画像が入るまでの受け皿。差し替え手順は docs/evidence-images.md */
.ev-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  border: 1px dashed var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  text-align: center;
}
.ev-slot-k { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--accent); }
.ev-slot-t { font-size: 0.9375rem; color: var(--ink-2); max-width: 26em; line-height: 1.8; }

/* 更新履歴 */
.update-log { margin: 0; padding: 0; list-style: none; }
.update-log li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.update-log li:last-child { border-bottom: 0; }
.update-log time { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); padding-top: 0.15rem; }

.entry-foot { padding: clamp(2.5rem, 6vw, 4rem) 0 4rem; }
.pl-sec.entry-foot { padding-top: 0; }   /* 節の上余白（.pl-sec）と二重にしない（Phase 1C-2） */
.entry-foot-note { margin: 1.5rem 0 0; font-size: 0.875rem; line-height: 1.9; color: var(--ink-2); }

/* ==========================================================================
   スタイル見本ページ（/design-test/）専用
   本番ページでは使いません。昇格が全部済んだら、このブロックごと消せます。
   ========================================================================== */
.mock { background: var(--ink); color: var(--paper); padding: 0.6rem 0; font-size: 0.8125rem; }
.mock .shell { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; }
.mock b { font-weight: 700; }
.mock a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--paper); text-decoration: underline; }

.sec { padding: clamp(2.75rem, 7vw, 4.5rem) 0; border-top: 1px solid var(--rule); }
.sec-head { margin: 0 0 clamp(1.5rem, 4vw, 2.25rem); }
.sec-head .cap { margin-bottom: 0.5rem; }
.sec-head h2 {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(1.25rem, 3.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.5;
}
.sec-lead { margin: 0.6rem 0 0; max-width: 40em; font-size: 0.9375rem; color: var(--ink-2); }
.sec-lead b { color: var(--ink); font-weight: 700; }

.doc { padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(2rem, 5vw, 3rem); }
.doc-rail {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  padding-bottom: 0.7rem; border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-2);
}
.doc-rail .sp { margin-left: auto; }
.doc-kind { margin: 1.4rem 0 0; font-family: var(--disp); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.62em; color: var(--ink-2); }
.doc h1 { margin: 0.5rem 0 0; font-family: var(--disp); font-size: clamp(2rem, 7.5vw, 3.5rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.doc-lead { margin: 1.1rem 0 0; max-width: 34em; font-size: 1rem; color: var(--ink-2); }
.doc-lead b { color: var(--ink); font-weight: 700; }
.doc-by { margin: 1.6rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.doc-by b { font-family: var(--disp); font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }

.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 2rem 0 0; padding: 0; list-style: none; border: 1px solid var(--rule-firm); background: var(--field); }
.tally li { padding: 0.9rem 1.1rem 1rem; border-right: 1px solid var(--rule); }
.tally li:last-child { border-right: 0; }
.tally-k { display: block; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-2); }
.tally-v { display: block; margin-top: 0.15rem; font-family: var(--mono); font-size: 1.75rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tally-n { font-size: 0.75rem; font-family: var(--mono); letter-spacing: 0.08em; color: var(--ink-3); }
.tally li.is-empty { background: var(--amber-vl); }
.tally li.is-empty .tally-v,
.tally li.is-empty .tally-n { color: var(--amber-ink); }

.type-row { display: grid; gap: 0.4rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.type-row:first-child { border-top: 1px solid var(--rule-firm); }
.type-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; }
.type-name { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.type-role { font-size: 0.75rem; color: var(--ink-2); }
.type-alt .type-name { color: var(--amber-ink); }
.type-sample { margin: 0; font-size: 1.5rem; line-height: 1.6; }
.type-sample small { display: block; font-size: 0.9375rem; color: var(--ink-2); }
.f-zen  { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; }
.f-noto { font-family: "Noto Sans JP", sans-serif; font-weight: 400; }
.f-mono { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-variant-numeric: tabular-nums; }
.f-biz  { font-family: "BIZ UDPGothic", sans-serif; font-weight: 700; }
.f-sys  { font-family: -apple-system, "Segoe UI", "Yu Gothic", Meiryo, sans-serif; font-weight: 700; }

.defs { margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.defs > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.4rem 1.25rem; align-items: start; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.defs dt { margin: 0; }
.defs dd { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }

.btn-quiet { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0.5rem 0.25rem; color: var(--ink-2); font-size: 0.9375rem; text-decoration: underline; }
.btn-quiet:hover { color: var(--ink); }
.cta { border: 1px solid var(--rule-firm); border-top: 3px solid var(--accent); border-radius: var(--jm-radius-section); background: var(--field); box-shadow: var(--jm-shadow); padding: clamp(1.35rem, 4vw, 2rem); }
.cta h3 { margin: 0; font-family: var(--disp); font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.cta-lead { margin: 0.6rem 0 0; max-width: 36em; font-size: 0.9375rem; color: var(--ink-2); }
.cta-act { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.35rem; }
.cta-note { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-2); }

.sw { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sw li { border: 1px solid var(--rule); background: var(--field); }
.sw-chip { height: 3.25rem; border-bottom: 1px solid var(--rule); }
.sw-meta { padding: 0.6rem 0.75rem 0.75rem; }
.sw-name { display: block; font-size: 0.8125rem; font-weight: 700; }
.sw-hex { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); }
.sw-use { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ink-3); }
.rules { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); }
.rules li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.rules .ok { font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); white-space: nowrap; }
.tap-demo { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px dashed var(--accent); font-family: var(--mono); font-size: 0.75rem; color: var(--accent); }
.foot { padding: 2rem 0 4rem; border-top: 2px solid var(--ink); font-size: 0.8125rem; color: var(--ink-2); }
.foot p { margin: 0.4rem 0 0; }

/* ==========================================================================
   PRODUCT LAB 共通部品（2026-08-19 追加）
   /<サービス名>/ の全ページで使う。ElevenLabs専用のCSSは1行も書かない。
   ========================================================================== */

/* 表の中など狭い場所に置く検証ラベル。.mk--sm と同じ寸法 */
.trust--sm { padding: 0.1rem 0.4rem 0.1rem 0.3rem; font-size: 0.75rem; }

/* 外部リンクの矢印 */
.ext { font-family: var(--mono); font-size: 0.875rem; }

/* 節の間隔。⚠️ .prose と併用する。.prose より後ろに書いてあるので、こちらの余白が勝つ（意図通り） */
.pl-sec { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.pl-h2 {
  margin: 0 0 0.75rem;
  font-family: var(--disp);
  font-size: clamp(1.375rem, 4.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.55;
  scroll-margin-top: 1.5rem;
}
/* 節（.pl-sec）の中に置く小見出しブロック。H3の単位で区切るときの余白 */
.pl-sub { margin-top: clamp(2rem, 5vw, 3rem); }

.pl-lead { margin: 0 0 1.5rem; max-width: 40em; font-size: 0.9375rem; line-height: 1.9; color: var(--ink-2); }
.pl-lead strong { color: var(--ink); font-weight: 700; }
.sec-cap { margin-bottom: 0.7rem; }

/* --------------------------------------------------------------------------
   向く人 / 向かない人
   ⚠️ 星の数では書かない。「誰にでもおすすめ」も書かない。
   -------------------------------------------------------------------------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fit-col {
  position: relative;
  overflow: clip;
  padding: 1.2rem 1.3rem 1.3rem 1.5rem;
  border: 1px solid var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  box-shadow: var(--jm-shadow);
}
.fit-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.fit-col--yes::before { background: var(--accent); }
.fit-col--no { background: var(--amber-vl); border-style: dashed; box-shadow: none; }
.fit-col--no::before { background: var(--amber); }
.fit-h { margin: 0 0 0.7rem; font-family: var(--disp); font-size: 1rem; font-weight: 700; }
.fit-col--no .fit-h { color: var(--amber-ink); }
.fit-list { margin: 0; padding-left: 1.1em; }
.fit-list li { margin-bottom: 0.5em; font-size: 0.9375rem; line-height: 1.85; }
.fit-list li:last-child { margin-bottom: 0; }
.fit-note { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   AUDIO LAB — 同じ原稿を各サービスに読ませて聴き比べる
   再生は audio 要素のネイティブ機能。JavaScriptは足さない。
   ⚠️ 音声が無いサービスは「音声未設置」の枠のまま出す。無い音を作らない。
   -------------------------------------------------------------------------- */
.alab { overflow: clip; border: 1px solid var(--rule-firm); border-radius: var(--jm-radius-section); background: var(--field); box-shadow: var(--jm-shadow); }
.alab-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--field-alt);
}
.alab-count { font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.04em; }
.alab-count .num { color: var(--accent); }

.alab-script { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--accent-vl); }
.alab-script-t { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.95; font-weight: 700; }
.alab-script-n { margin: 0.7rem 0 0; font-size: 0.875rem; line-height: 1.85; color: var(--ink-2); }

.alab-list { margin: 0; padding: 0; list-style: none; }
.alab-item { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); }
.alab-item:last-child { border-bottom: 0; }
.alab-item--empty { background: var(--paper); }
.alab-item-top { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-bottom: 0.8rem; }
.alab-svc { margin: 0; font-family: var(--disp); font-size: 1.0625rem; font-weight: 700; }

.alab-player { display: block; width: 100%; height: 2.75rem; }

.alab-empty {
  margin: 0;
  padding: 1.1rem 1rem;
  border: 1px dashed var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--amber-ink);
}

.alab-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; margin: 0.9rem 0 0; }
.alab-meta dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.alab-meta dd { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
.alab-note { margin: 0.8rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   事実の表 / 比較表の見出し
   -------------------------------------------------------------------------- */
.fact-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.fact-title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  line-height: 1.55;
  scroll-margin-top: 1.5rem;
}
/* .fact-title は節の見出し(h2)としても、節の中の小見出し(h3)としても使う。
   大きさだけは要素で明示的に分ける（意図した上書き。事故ではない）。 */
h2.fact-title { font-size: clamp(1.375rem, 4.2vw, 1.75rem); }
h3.fact-title { font-size: clamp(1.0625rem, 3vw, 1.25rem); }
.fact-when { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-3); }
.fact-v { display: block; font-weight: 700; }
.fact-n { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--ink-2); }
.fact-ev { width: 1%; white-space: nowrap; }
.fact-foot { margin: 0.9rem 0 0; font-size: 0.875rem; line-height: 1.85; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   LAB SCORE — 点数より先に採点基準を出す
   ⚠️ 根拠不明の総合点を出さない。材料が無いうちは基準だけ公開する。
   -------------------------------------------------------------------------- */
.score-hold {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--amber-ink);
  border-radius: var(--jm-radius-card);
  background: var(--amber-vl);
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink);
}
.score-hold strong { color: var(--amber-ink); }

.score-list { overflow: clip; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule-firm); border-radius: var(--jm-radius-card); background: var(--field); box-shadow: var(--jm-shadow); }
.score-row {
  display: grid;
  grid-template-columns: 1fr 5rem;
  gap: 0 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.score-row:last-child { border-bottom: 0; }
.score-row.is-todo { background: var(--paper); }
.score-k { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; }
.score-key { font-size: 0.9375rem; font-weight: 700; }
.score-how { grid-column: 1; margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }
.score-v {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   出口（PRODUCT LAB）。売り込まない。
   -------------------------------------------------------------------------- */
.cta-h { margin: 0; font-family: var(--disp); font-size: clamp(1.125rem, 3.4vw, 1.375rem); font-weight: 700; line-height: 1.6; }
.cta-caveat { margin-top: 1.35rem; padding: 1rem 1.15rem; border: 1px dashed var(--amber-ink); border-radius: var(--jm-radius-card); background: var(--amber-vl); }
.cta-caveat-list { margin: 0.6rem 0 0; padding-left: 1.1em; }
.cta-caveat-list li { margin-bottom: 0.4em; font-size: 0.875rem; line-height: 1.8; }
.cta-caveat-list li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   試聴評価（運営者の主観）— AI音声ジャンルの共通部品
   ⚠️ 測定票と見た目をはっきり分ける。ここに ■実測 のラベルは出さない。
      測定票 = 藍の帯 ／ 未実測 = 琥珀の破線 ／ 試聴評価 = グレーの帯（この第3の見え方）
   -------------------------------------------------------------------------- */
.lnote { position: relative; overflow: clip; border: 1px solid var(--rule-firm); border-radius: var(--jm-radius-card); background: var(--field); box-shadow: var(--jm-shadow); }
.lnote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ink-3); }

.lnote-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.1rem 0.6rem 1.35rem;
  border-bottom: 1px solid var(--rule);
  background: var(--field-alt);
}
.lnote-kind {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.lnote-when { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

.lnote-body { padding: 1.1rem 1.1rem 1.2rem 1.35rem; }
.lnote-h { margin: 0; font-family: var(--disp); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.lnote-setup { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.lnote-sum { margin: 0.7rem 0 1rem; font-size: 0.9375rem; line-height: 1.9; }

.lnote-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
.lnote-ck { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-3); }
.lnote-list { margin: 0; padding-left: 1.1em; }
.lnote-list li { margin-bottom: 0.4em; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }
.lnote-list li:last-child { margin-bottom: 0; }

.lnote-cond { margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.lnote-cond > div { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 0.9rem; padding: 0.7rem 0 0; }
.lnote-cond dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-3); padding-top: 0.25rem; }
.lnote-cond dd { margin: 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-2); }

.lnote-warn { margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.8; color: var(--ink-3); }
.lnote-warn strong { color: var(--ink-2); }

/* 試聴評価の一覧表。検証ラベルを付けない表 */
.ltable-cond { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.85; color: var(--ink-2); }
.cmp--subj tbody td { color: var(--ink-2); }

/* 生成した音声ファイルを載せていない理由を書く欄 */
.nofile {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-2);
}
.nofile strong { color: var(--ink); }

/* ジャンルのハブで使う、検証状況の一覧 */
.genre { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.genre-item {
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule-firm);
  border-radius: var(--jm-radius-card);
  background: var(--field);
  box-shadow: var(--jm-shadow);
  color: var(--ink);
  text-decoration: none;
}
a.genre-item:hover { border-color: var(--accent); box-shadow: var(--jm-shadow-hover); }
.genre-item--soon { border-style: dashed; background: transparent; box-shadow: none; }
.genre-k { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); }
.genre-item--soon .genre-k { color: var(--ink-3); }
.genre-t { display: block; margin-top: 0.3rem; font-family: var(--disp); font-size: 1.0625rem; font-weight: 700; line-height: 1.55; }
.genre-d { display: block; margin-top: 0.3rem; font-size: 0.875rem; line-height: 1.85; color: var(--ink-2); }

/* ==========================================================================
   狭い画面
   ========================================================================== */
@media (max-width: 40rem) {
  .shell { width: min(68rem, 100% - 1.75rem); }
  .entry { grid-template-columns: [full-start] 0.875rem [wide-start] 0 [text-start] 1fr [text-end] 0 [wide-end] 0.875rem [full-end]; }
  .doc-rail .sp, .entry-rail .sp { margin-left: 0; }
  .doc-kind { letter-spacing: 0.4em; }
  .tally { grid-template-columns: 1fr 1fr; }
  .tally li:nth-child(2n) { border-right: 0; }
  .tally li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .defs > div { grid-template-columns: 1fr; }
  .cta-act { flex-direction: column; align-items: stretch; }
  .btn, .btn-quiet { width: 100%; }
  .prose { font-size: 1rem; line-height: 1.95; }
  .entry-lead { font-size: 1rem; }
  .update-log li { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; gap: 0.5rem; }

  /* ヘッダーを 56px・1行にする（Phase 1C-1）。
     ⚠️ ナビ項目は減らさない。入りきらない分は「ナビの中だけ」横にスクロールさせる（ページ全体は横スクロールさせない）。
     ⚠️ 項目が全部入る幅では、PCと同じく右に寄せる（先頭の auto マージン。はみ出すと 0 になり左端から見える）。 */
  .site-header { padding: 0; }
  .site-header .shell { flex-wrap: nowrap; min-height: calc(var(--jm-header-h) - 1px); }
  .brand { flex: none; }
  .site-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav > :first-child { margin-left: auto; }
  .site-nav a { min-width: var(--jm-tap); justify-content: center; }   /* 「AI音声」が幅40pxだった。タップ領域を縦横44px以上に */

  /* 進捗トラックを詰める。本文開始位置を早くするため */
  .stage { grid-template-columns: 2rem 1.1rem 1fr; padding: 0.55rem 0.9rem; }
  .stage-state { grid-column: 3; text-align: left; margin-top: 0.1rem; }

  /* 票も1枚あたりの丈を詰める。構造（判定・項目・値・条件・出所）は変えない */
  .slip-body { padding: 1rem 1rem 0.3rem 1.15rem; }
  .slip-value .v { font-size: 2.25rem; }
  .slip-fields > div { grid-template-columns: 3.75rem 1fr; padding: 0.6rem 0; }
}

/* 375px級の端末。ブランド名の添え字（装飾・aria-hidden）を落として
   ヘッダーを1行に収める。これが無いと 375px でナビが18pxはみ出す。 */
@media (max-width: 24rem) {
  .brand-ja { display: none; }
  .site-nav { gap: 0 0.75rem; }
  /* --- PRODUCT LAB --- */
  .fit { grid-template-columns: 1fr; }
  .alab-meta { grid-template-columns: 1fr; gap: 0.5rem 0; }
  .alab-meta > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 0.75rem; align-items: baseline; }
  .alab-meta dd { margin: 0; }
  .alab-script-t { font-size: 0.9375rem; }
  .score-row { grid-template-columns: 1fr 3.5rem; }
  .score-v { font-size: 1.25rem; }
  .fact-head { justify-content: flex-start; }
  /* --- 試聴評価 --- */
  .lnote-cols { grid-template-columns: 1fr; }
  .genre-t { font-size: 1rem; }
}



/* --------------------------------------------------------------------------
   テスト原稿の全文（LAB）。折りたたみの中に置く
   -------------------------------------------------------------------------- */
.script-full { padding: 0 0 1.2rem; }
.script-body {
  margin: 0.6rem 0 0;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--field);
  font-size: 1rem;
  line-height: 2.05;
  white-space: pre-wrap;
}
.script-note { margin: 0.8rem 0 0; font-size: 0.875rem; line-height: 1.85; color: var(--ink-2); }
.script-note b { color: var(--ink); }

/* --------------------------------------------------------------------------
   ASP広告（A8.net）— 2026-09-02 追記
   ⚠️ 既存ルールは書き換えず、追記だけで足している。
   ⚠️ **A8の広告コードには class を付けられない**（無改変で出すため）。
      だから見た目は、外側のラッパー `.a8-cta` からの子孫セレクタで当てる。
      値は上の `.btn` / `.btn:hover` と同じものを使うこと。片方だけ直さない。
   -------------------------------------------------------------------------- */

/* CTAブロックの中で、読者がやることを1行で言う（ASP素材の文言は変えられないため） */
.cta-act-lead {
  margin: 1.35rem 0 0;
  max-width: 36em;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}
.cta-act-lead + .cta-act { margin-top: 0.75rem; }

/* ラッパー自体はレイアウトに影響させない（A8コードが .cta-act の直下にあるのと同じ状態にする） */
.a8-cta { display: contents; }

/* A8のリンクを、既存の .btn と同じ見た目にする */
.a8-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--jm-radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s linear;
}
.a8-cta a:hover { background: var(--accent-dp); border-color: var(--accent-dp); }

/* 1×1の成果計測画像が、ボタンの隣で1pxの隙間を作らないようにする（削除はしない） */
.a8-cta img[width="1"] { position: absolute; }

@media (max-width: 40rem) {
  .a8-cta a { width: 100%; }
}