/* ══════════════════════════════════════════════════════════════════
   styles-v4.css —— v4「一份公司文档」设计系统（2026-09-07 建）
   规范：方案/v4-设计规范-2026-09-07.md §1〜§2。
   参照 cognition.com（米白纸面、两条贯通发丝竖线、左侧极窄编号栏、
   零插画零摄影）、anthropic.com（左大标题右说明的两栏首屏）。

   ── 三条使用规矩 ──
   1. 本文件必须是页面 <link> 里的最后一份 CSS。
   2. 页面 <body> 只写 class="v4-page"，旧皮肤的 v3-page / ai2-page /
      ai-root / ed-page 一个都不许留（留了就把旧底色和 42em 段宽带回来）。
   3. 正文里不许写 style=""、不许写页内 <style>；要新样式先改规范。

   ── 本文件自带字体变量 ──
   styles.css / ai-blue.css / case-editorial.css 各自也定义了同一组
   --font-* 变量，值一字不差。这里再写一份，是为了让 v4 页面可以只引
   site-chrome.css + backtotop.css + styles-v4.css 三份就跑起来，
   不必为了拿字体去引整份旧皮肤。三份同时在场时值相同，不会打架。
   ══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. 变量
   ──────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── 1.1 颜色（全站颜色只在这里定义，别处不许再写颜色值） ── */
  --v4-paper:       #f7f6f3;                  /* 页面底色（米白），全站唯一底色 */
  --v4-surface:     #ffffff;                  /* 只给图片衬底与表格奇行 */
  --v4-ink:         #14161a;                  /* 标题 */
  --v4-ink-body:    #2f333a;                  /* 正文 */
  --v4-ink-muted:   #6c727c;                  /* 眉标、编号、图注、注记、表头 */
  --v4-hair:        rgba(16, 19, 24, 0.10);   /* 竖栏线、section 分隔线 */
  --v4-hair-strong: rgba(16, 19, 24, 0.20);   /* 只给表格外框与线框按钮 */
  --v4-mark:        rgba(185, 143, 63, 0.28); /* 关键词下划线底纹 —— 正文区唯一的金 */
  --v4-mark-line:   #8a6a2b;                  /* 底纹下那根 2px 线 */

  /* ── 1.2 字体（按语种切栈，见下面两段 html[lang]） ── */
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-ja);
  --font-mono: "SFMono-Regular", "Roboto Mono", "Courier New", monospace;
  /* v4 の見出しは明朝体を使わない。--font-display は参照しないこと。 */

  /* ── 1.3 字号梯（全站只有这 5 档 ＋ 按钮 1 档） ── */
  /* --v4-fs-display は規範の clamp(30px,3.8vw,52px) から下げてある。
     理由：首屏は 1.15fr / 0.85fr の二欄なので h1 の欄幅は最大 612px。
     §6 の日文成稿でいちばん長い行は assistant の 25 文字、systems の 22 文字で、
     52px だと 1 行 1300px 必要になり、keep-all を掛けた瞬間に横スクロールが出る。
     参照した cognition.com の h1 実測も約 38px で、40px 上限はその値。 */
  --v4-fs-display: clamp(28px, 3vw, 40px);
  --v4-fs-h2:      clamp(20px, 1.9vw, 26px);
  --v4-fs-h3:      17px;
  --v4-fs-body:    16px;
  --v4-fs-meta:    12px;
  --v4-fs-btn:     14px;   /* .v4-btn 専用。正文に出たら違反 */

  --v4-lh-tight: 1.35;
  --v4-lh-head:  1.5;
  --v4-lh-body:  1.9;

  /* ── 1.4 栅格与间距 ── */
  --v4-page:    1160px;
  --v4-rail:    92px;
  --v4-col:     760px;
  --v4-measure: 45em;
  --v4-gutter:  clamp(18px, 4vw, 32px);
  --v4-sec:     clamp(120px, 11vw, 160px);
  --v4-sec-in:  clamp(26px, 2.8vw, 40px);
  --v4-stack:   18px;
  --v4-tight:   10px;

  /* 页头高度。site-chrome.css の .hqx-header にも同値がある。
     両方同時に直すこと（片方だけ変えるとアンカーの停止位置がずれる）。 */
  --hqx-height: 64px;
}

html[lang="zh-CN"] { --font-body: var(--font-zh); }
html[lang="en"]    { --font-body: var(--font-en); }

/* ────────────────────────────────────────────────────────────────
   2. 保命四条（規範 §2.4）＋ 全局重置
   ──────────────────────────────────────────────────────────────── */

html {
  /* overflow-x は html に。body に書くと sticky ヘッダーが死ぬ（既知の穴）。 */
  overflow-x: hidden;
  scroll-padding-top: calc(var(--hqx-height, 64px) + 20px);
  scroll-behavior: smooth;
}

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

.v4-page :where(img) { display: block; max-width: 100%; height: auto; }

.v4-page {
  display: flex;
  min-height: 100vh;
  min-width: 320px;
  flex-direction: column;
  margin: 0;
  background: var(--v4-paper);
  color: var(--v4-ink-body);
  font-family: var(--font-body, sans-serif);
  font-size: var(--v4-fs-body);
  font-synthesis-weight: none;
  letter-spacing: 0;
  line-height: var(--v4-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ⚠ リセットは必ず :where() で包む。`.v4-page h2 { margin:0 }` と素で書くと
   詳細度 (0,1,1) になり、あとから来る `.v4-h2 { margin-bottom: … }` (0,1,0) を
   打ち負かして見出しの下余白が消える（実測で踏んだ）。
   :where() の中身は詳細度 0 なので、この塊は全部 (0,1,0) 止まりになる。 */
.v4-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.v4-page :where(ul, ol) { padding: 0; list-style: none; }
.v4-page :where(a) { color: inherit; text-decoration: none; }
.v4-page :where(button, input, select, textarea) { font: inherit; }
.v4-page :where(button) { color: inherit; }
.v4-page :where(a, button) { -webkit-tap-highlight-color: transparent; }
.v4-page :focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 3px; }

/* 长串半角数字（法人番号・電話）と メールアドレス は絶対に折り返さない。
   v3 の手机版で info@huaqi.j ＋ p に割れた。style="" は禁なのでこの class を使う。 */
.v4-nowrap { white-space: nowrap; }

/* ────────────────────────────────────────────────────────────────
   3. 骨架
   ──────────────────────────────────────────────────────────────── */

.v4-main { flex: 1 0 auto; min-width: 0; }

/* section の余白は .v4-section ではなく .v4-shell に持たせている。
   .v4-section 側に padding を置くと、shell の左右の発丝竖线が
   section ごとに途切れて破線に見える（cognition は全ページ貫通）。
   間隔の実測値は規範どおり（上下 --v4-sec/2 ずつ＝合計 --v4-sec）。 */
.v4-section { padding-block: 0; }

.v4-shell {
  width: min(100% - var(--v4-gutter) * 2, var(--v4-page));
  min-width: 0;
  margin-inline: auto;
  border-inline: 1px solid var(--v4-hair);
  padding-block: calc(var(--v4-sec) / 2);
  padding-inline: var(--v4-gutter);
}

.v4-section--tight > .v4-shell { padding-block: calc(var(--v4-sec) / 4); }

/* 首屏のすぐ下に来る図版は、首屏との間だけ詰める（規範 §3.2 の並び）。 */
.v4-hero + .v4-section > .v4-shell { padding-top: calc(var(--v4-sec) / 4); }

/* 编号栏：左 --v4-rail に 01/02、右が本文。右側の border-left が
   「本文の始まる線」になる（cognition の縦罫）。 */
.v4-row {
  display: grid;
  grid-template-columns: var(--v4-rail) minmax(0, 1fr);
  min-width: 0;
}
.v4-row > * { min-width: 0; }
.v4-row-body {
  border-left: 1px solid var(--v4-hair);
  padding-left: var(--v4-gutter);
}

.v4-num {
  color: var(--v4-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--v4-fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: var(--v4-lh-body);
  padding-top: 4px;
}

/* .v4-rule は 15 ページのどこからも使っていなかったので削除（2026-09-07）。
   区切り線が要るときは .v4-section の上辺の発丝線を使う。 */

.v4-col { max-width: min(var(--v4-col), 100%); }

/* 表・広い塊はこれで包む。documentElement を押し広げないこと。 */
.v4-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ────────────────────────────────────────────────────────────────
   4. 文字
   ──────────────────────────────────────────────────────────────── */

.v4-eyebrow {
  margin-bottom: var(--v4-tight);
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: var(--v4-lh-head);
  /* v3 の金色短線は廃止。線は引かない。 */
}

.v4-h1, .v4-h2, .v4-h3 {
  color: var(--v4-ink);
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
}

.v4-h1 {
  font-size: var(--v4-fs-display);
  font-weight: 600;          /* 40px 級で 700 は日文黑体だと潰れる */
  letter-spacing: -0.005em;
  line-height: var(--v4-lh-tight);
  /* 単語の途中で折らない。日文は data-ja 側に手書きの <br> で断点を置く。 */
  line-break: strict;
  overflow-wrap: normal;
  word-break: normal;
  /* 行の長さを揃える。<br> で断点を置いても、その前後がさらに折り返して
     「うち、」「承り、」のような 3 文字だけの行が残ることがある（systems と
     contact で実測）。balance を掛けると同じ行数のまま長さが揃い、孤立行が消える。
     未対応ブラウザは無視するだけで、版面は現状と同じになる。 */
  text-wrap: balance;
}
/* 日文だけ auto-phrase。文節の切れ目でしか折らないので
   「仕組み／みで支える」型の割れが出ない。
   ⚠ keep-all は使わない：中文には空白が無いので keep-all を掛けると
   1 行が折り返せず、375px で必ず横スクロールが出る（規範 §8.2-1 に抵触）。
   auto-phrase 未対応のブラウザは normal に落ちるだけで、壊れない。 */
html[lang="ja"] .v4-h1,
html[lang="ja"] .v4-h2,
html[lang="ja"] .v4-h3,
html[lang="ja"] .v4-eyebrow,
html[lang="ja"] .v4-block-title,
html[lang="ja"] .v4-step-title,
html[lang="ja"] .v4-stage-k,
html[lang="ja"] .v4-btn,
html[lang="ja"] .v4-dl dt,
html[lang="ja"] .v4-table th { word-break: auto-phrase; }

/* 中文も日文と同じ手当てを入れる（2026-09-07 の複験で「中文だけ素通し」だった）。
   ⚠ auto-phrase は日文専用。中文に掛けてもブラウザ側に語分割の辞書が無く、
   normal と同じ挙動になる（＝書いても効かない）。中文は代わりに
   ① line-break:strict で「，。）」を行頭に落とさない
   ② overflow-wrap/word-break を normal に固定して英数字混じりの語を割らない
   ③ 見出しは text-wrap:balance で行長を揃え、最終行 1 文字を消す
   の 3 本立てにする。keep-all は使わない（空白の無い中文では 1 行が
   まったく折り返せなくなり、375px で必ず横スクロールが出る）。 */
html[lang="zh-CN"] .v4-h1,
html[lang="zh-CN"] .v4-h2,
html[lang="zh-CN"] .v4-h3,
html[lang="zh-CN"] .v4-eyebrow,
html[lang="zh-CN"] .v4-block-title,
html[lang="zh-CN"] .v4-step-title,
html[lang="zh-CN"] .v4-stage-k,
html[lang="zh-CN"] .v4-btn,
html[lang="zh-CN"] .v4-dl dt,
html[lang="zh-CN"] .v4-table th {
  line-break: strict;
  overflow-wrap: normal;
  word-break: normal;
}
html[lang="zh-CN"] .v4-h2,
html[lang="zh-CN"] .v4-h3,
html[lang="zh-CN"] .v4-block-title,
html[lang="zh-CN"] .v4-step-title,
html[lang="zh-CN"] .v4-stage-k { text-wrap: balance; }

/* 見出し系は共通で禁則を厳しく。長音符と小書きかなを行頭に落とさない。 */
.v4-h3, .v4-eyebrow, .v4-block-title, .v4-step-title,
.v4-stage-k, .v4-dl dt, .v4-table th {
  line-break: strict;
  overflow-wrap: normal;
}

.v4-h2 {
  margin-bottom: var(--v4-sec-in);
  font-size: var(--v4-fs-h2);
  line-height: var(--v4-lh-head);
  line-break: strict;
  overflow-wrap: normal;
}
/* CTA の一句は下に何も続かないので余白を戻す。 */
.v4-cta .v4-h2 { margin-bottom: 0; }
.v4-h1 + .v4-lead,
.v4-h1 + .v4-p { margin-top: var(--v4-sec-in); }

.v4-h3 {
  font-size: var(--v4-fs-h3);
  line-height: var(--v4-lh-head);
}

.v4-lead {
  max-width: min(var(--v4-measure), 100%);
  color: var(--v4-ink);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}

.v4-p {
  max-width: min(var(--v4-measure), 100%);
  color: var(--v4-ink-body);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}
.v4-p + .v4-p { margin-top: var(--v4-stack); }

.v4-note {
  max-width: min(var(--v4-measure), 100%);
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  line-height: 1.8;
}
.v4-note + .v4-note { margin-top: 6px; }

/* ── 本文の孤字行つぶし（2026-09-07 複験の指摘） ──
   段落の最終行に 1〜2 文字だけ残る「孤字行」を無くす。
   text-wrap:pretty は最後の数行だけを引き直して最終行を長くする指定で、
   段落の途中の行長は変わらない（＝版面は今のまま、尻尾だけ直る）。
   ⚠ 効かないブラウザでは balance に落とさず、素の折り返しのまま。
      balance は段落全体の行長を揃えにいくので、長い本文に掛けると
      行数が増えたり読みの重心がずれる。孤字行の代償としては大きすぎる。
      balance を使うのは見出し（4〜6 行以内）だけ、と切り分ける。 */
.v4-lead,
.v4-p,
.v4-note,
.v4-stage-v,
.v4-log-body,
.v4-step-body,
.v4-figcaption,
.v4-dl dd,
.v4-page li { text-wrap: pretty; }

/* 日文の本文は文節（＝意味の切れ目）でしか折らない。
   「仕組み／みで支える」型の割れと、助詞 1 文字だけの行が消える。
   ⚠ 未対応ブラウザは normal に落ちるだけ。入る phrase が行幅に収まらない
   ときはブラウザが通常の折り返しに戻すので、375px でも溢れない。 */
html[lang="ja"] .v4-lead,
html[lang="ja"] .v4-p,
html[lang="ja"] .v4-note,
html[lang="ja"] .v4-stage-v,
html[lang="ja"] .v4-log-body,
html[lang="ja"] .v4-step-body,
html[lang="ja"] .v4-figcaption,
html[lang="ja"] .v4-dl dd,
html[lang="ja"] .v4-page li { word-break: auto-phrase; }

/* 全站正文で金色が許される唯一の場所。1 ページ最多 2 か所、.v4-h1 の中だけ。
   <mark> の UA 既定（黄底・黒字）を先に消してから底纹を敷く。 */
.v4-mark {
  background-color: transparent;
  background-image: linear-gradient(transparent 62%, var(--v4-mark) 62%);
  border-bottom: 2px solid var(--v4-mark-line);
  color: inherit;
  padding-bottom: 1px;
}

/* ────────────────────────────────────────────────────────────────
   5. 组件 1 —— 首屏 v4-hero（anthropic 式两栏）
   ──────────────────────────────────────────────────────────────── */

.v4-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--v4-gutter);
  align-items: start;
}
.v4-hero-copy, .v4-hero-aside { min-width: 0; }
.v4-hero-aside { padding-top: clamp(4px, 0.9vw, 12px); }
.v4-hero-aside .v4-actions { margin-top: var(--v4-sec-in); }

/* ────────────────────────────────────────────────────────────────
   6. 组件 2 —— 图与图注 v4-figure
   ──────────────────────────────────────────────────────────────── */

.v4-figure { margin: 0; min-width: 0; }
.v4-figure img {
  width: 100%;
  border: 1px solid var(--v4-hair);
  background: var(--v4-surface);
  /* 圆角なし・影なし。cognition 式の紙面。 */
}
.v4-figcaption {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  line-height: 1.8;
}
.v4-fig-no {
  color: var(--v4-ink-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  /* 金色ではない。灰の等幅。 */
}

/* ────────────────────────────────────────────────────────────────
   7. 组件 3 —— 散文块 v4-blocks（卡片墙の代替）
   枠なし・底色なし・図标なし。区切りは発丝横線 1 本だけ。
   ──────────────────────────────────────────────────────────────── */

.v4-blocks { display: grid; }
.v4-block { min-width: 0; padding-block: var(--v4-sec-in); }
.v4-block:first-child { padding-top: 0; }
.v4-block:last-child { padding-bottom: 0; }
.v4-block + .v4-block { border-top: 1px solid var(--v4-hair); }
.v4-block-title {
  margin-bottom: var(--v4-tight);
  color: var(--v4-ink);
  font-size: var(--v4-fs-h3);
  font-weight: 700;
  line-height: var(--v4-lh-head);
}
.v4-block .v4-link { margin-top: var(--v4-tight); display: inline-block; }
/* 塊の並びの後ろに置く「一覧へ」の 1 本リンク。
   これを 4 つ目の .v4-block にすると見出しも本文も無い空の塊になり、
   .v4-block + .v4-block の発丝線が 1 本余計に引かれる（index 03 で発生）。
   塊の外に出して、節と同じ間隔だけ空ける。 */
.v4-blocks + .v4-link { display: inline-block; margin-top: var(--v4-sec-in); }

/* ────────────────────────────────────────────────────────────────
   8. 组件 4 —— 客户阶段 v4-stages（thoughtbot 式）
   ──────────────────────────────────────────────────────────────── */

.v4-stages { display: grid; }
.v4-stage {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--v4-gutter);
  align-items: start;
  border-top: 1px solid var(--v4-hair);
  padding-block: 22px;
  min-width: 0;
}
.v4-stage:last-child { border-bottom: 1px solid var(--v4-hair); }
.v4-stage > * { min-width: 0; }
.v4-stage-k {
  color: var(--v4-ink);
  font-size: var(--v4-fs-h3);
  font-weight: 700;
  line-height: var(--v4-lh-head);
}
.v4-stage-v {
  color: var(--v4-ink-body);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}
.v4-stage-v .v4-link { margin-top: 6px; display: inline-block; }

/* ────────────────────────────────────────────────────────────────
   9. 组件 5 —— 带日期的事实 v4-log（cognition の Articles 列表）
   ──────────────────────────────────────────────────────────────── */

.v4-log { display: grid; }
.v4-log-item {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: var(--v4-gutter);
  align-items: baseline;
  border-top: 1px solid var(--v4-hair);
  padding-block: 20px;
  min-width: 0;
}
.v4-log-item:last-child { border-bottom: 1px solid var(--v4-hair); }
.v4-log-item > * { min-width: 0; }
.v4-log-date {
  color: var(--v4-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--v4-fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--v4-lh-body);
}
.v4-log-body {
  color: var(--v4-ink-body);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}
.v4-log-body .v4-link { margin-left: 8px; }

/* ────────────────────────────────────────────────────────────────
   10. 组件 6 —— 步骤 v4-steps
   ──────────────────────────────────────────────────────────────── */

.v4-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v4-gutter);
  border-top: 1px solid var(--v4-hair);
  padding-top: 22px;
}
.v4-step { min-width: 0; display: grid; gap: 8px; align-content: start; }
.v4-step + .v4-step {
  border-left: 1px solid var(--v4-hair);
  padding-left: var(--v4-gutter);
}
.v4-step-no {
  color: var(--v4-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--v4-fs-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.v4-step-title {
  color: var(--v4-ink);
  font-size: var(--v4-fs-h3);
  font-weight: 700;
  line-height: var(--v4-lh-head);
}
.v4-step-body {
  color: var(--v4-ink-body);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}

/* ────────────────────────────────────────────────────────────────
   11. 组件 7 —— 定义表 v4-dl
   ──────────────────────────────────────────────────────────────── */

.v4-dl {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  border-top: 1px solid var(--v4-hair);
  min-width: 0;
}
.v4-dl dt, .v4-dl dd {
  border-bottom: 1px solid var(--v4-hair);
  padding-block: 16px;
  min-width: 0;
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
}
.v4-dl dt { color: var(--v4-ink-muted); padding-right: var(--v4-gutter); }
.v4-dl dd {
  color: var(--v4-ink-body);
  /* 半角数字の長い列（法人番号）は CJK 中で折れない。文案側で &#10; を
     入れて折る運用なので pre-line にしておく。 */
  white-space: pre-line;
}

/* ────────────────────────────────────────────────────────────────
   12. 组件 8 —— 数据表 v4-table（必ず .v4-scroll で包む）
   ──────────────────────────────────────────────────────────────── */

.v4-table {
  width: 100%;
  /* min-width は置かない（2026-09-07 廃止）。手机では 720px 以下でカード
     組みに切り替えるので、横スクロールも文字の潰れも起こらない。 */
  border: 1px solid var(--v4-hair-strong);
  border-collapse: collapse;
  background: var(--v4-paper);
  font-size: var(--v4-fs-body);
}
.v4-table caption {
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  padding-bottom: 10px;
  text-align: left;
}
.v4-table th, .v4-table td {
  border-bottom: 1px solid var(--v4-hair);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.v4-table thead th {
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-h3);
  font-weight: 700;
  white-space: nowrap;
}
.v4-table tbody th { color: var(--v4-ink); font-weight: 700; }
.v4-table tbody tr:last-child th,
.v4-table tbody tr:last-child td { border-bottom: 0; }
.v4-table tbody tr:nth-child(odd) { background: var(--v4-surface); }

/* 料金表：初期費用と月額（2・3 列目）だけ等幅の右寄せ。
   4 列目「標準構成（目安）」は地の文なので左寄せに戻す。
   列数が違う表では .v4-td-num を明示的に付ける。 */
.v4-table--price th:not(:first-child),
.v4-table--price td:not(:first-child) { text-align: right; }
.v4-table--price td:nth-child(2),
.v4-table--price td:nth-child(3) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v4-table--price th:last-child,
.v4-table--price td:last-child {
  font-family: inherit;
  text-align: left;
  white-space: normal;
}
.v4-table .v4-td-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────
   13. 组件 9 —— 按钮与行内链接
   ──────────────────────────────────────────────────────────────── */

.v4-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.v4-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 2px;
  padding-inline: 20px;
  font-size: var(--v4-fs-btn);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.v4-btn--solid { background: var(--v4-ink); color: var(--v4-paper); }
.v4-btn--solid:hover { background: #000; }
.v4-btn--line { border-color: var(--v4-hair-strong); color: var(--v4-ink); }
.v4-btn--line:hover { border-color: var(--v4-ink); }

.v4-link {
  border-bottom: 1px solid var(--v4-hair-strong);
  color: var(--v4-ink);
  padding-bottom: 1px;
  transition: border-color 160ms ease;
}
.v4-link::after { content: " \2192"; }
.v4-link:hover { border-bottom-color: var(--v4-ink); }

/* 文中に埋め込むリンク。矢印を付けると読点のように見えて文が切れるので、
   .v4-link の ::after を打ち消し、下線だけを残す。
   ⚠ .v4-link と同じ詳細度なので、必ず .v4-link の後ろに置くこと。 */
.v4-link--inline { border-bottom-color: var(--v4-hair-strong); }
.v4-link--inline::after { content: none; }

/* ────────────────────────────────────────────────────────────────
   13.5 组件 9b —— 語種ごとの手動改行 .v4-br-ja / .v4-br-zh
   .v4-h1 は日文の断点を data-ja 側ではなく <br class="v4-br-ja"> で置いている。
   EN / ZH では 2 つ目の span が空文字（または続きの文）になるため、
   この <br> が残ると見出しの下に空行が 1 行できる／文が不自然に折れる。
   なので日文以外では消す。html[lang] は ai-i18n.js / main-i18n.js が切り替える。

   2026-09-07 複験：同じ仕掛けを中文にも用意した（.v4-br-zh）。
   中文には語を区切る空白が無く、ブラウザは「どこで折ってもいい」と判断するので、
   長い見出しほど意味の切れ目を無視した位置で折れる。日文の auto-phrase に当たる
   ものが中文には無いため、切りたい位置は人が <br class="v4-br-zh"> で置く。
   ⚠ 置くのは各ページの担当（HTML 側）。この CSS は「置かれていれば効く」だけ。
      置かれていないページは今までどおり自動折り返しのまま、壊れない。
   ⚠ 中文の断点は日文と同じ位置とは限らない。文の構造が違うので、
      .v4-br-ja と .v4-br-zh は必ず別々の <br> として書くこと（兼用は不可）。
   ──────────────────────────────────────────────────────────────── */

.v4-br-ja,
.v4-br-zh { display: none; }
html[lang="ja"]    .v4-br-ja { display: inline; }
html[lang="zh-CN"] .v4-br-zh { display: inline; }

/* ────────────────────────────────────────────────────────────────
   13.6 组件 9c —— 咨询表单 v4-form（contact.html だけで使う）
   紙面と同じ規則：角丸 2px、影なし、線は 1px のヘアライン。
   幅は本文と同じ measure に収める（入力欄だけ横に広いと版面が崩れる）。
   ──────────────────────────────────────────────────────────────── */

.v4-form {
  max-width: min(var(--v4-measure), 100%);
  margin-top: var(--v4-sec-in);
}

.v4-field { display: grid; gap: 6px; min-width: 0; }
.v4-field + .v4-field { margin-top: var(--v4-stack); }

.v4-label {
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* input と textarea は同じ見た目。width:100% ＋ min-width:0 が無いと
   375px で入力欄がグリッドを押し広げて横スクロールが出る。 */
.v4-input,
.v4-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--v4-hair-strong);
  border-radius: 2px;
  background: var(--v4-surface);
  color: var(--v4-ink);
  font-family: inherit;
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-head);
  padding: 10px 12px;
  transition: border-color 160ms ease;
}
.v4-input { min-height: 44px; }
.v4-textarea { min-height: 132px; resize: vertical; }
.v4-input::placeholder,
.v4-textarea::placeholder { color: var(--v4-ink-muted); }
.v4-input:hover,
.v4-textarea:hover { border-color: var(--v4-ink-muted); }
/* focus 時は枠線だけ濃くする。outline は消さない
   （.v4-page :focus-visible の 2px 枠がキーボード操作の唯一の目印）。 */
.v4-input:focus,
.v4-textarea:focus { border-color: var(--v4-ink); }

.v4-form .v4-actions { margin-top: var(--v4-sec-in); }

/* ────────────────────────────────────────────────────────────────
   14. 组件 10 —— 页尾行动区 v4-cta
   ──────────────────────────────────────────────────────────────── */

.v4-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--v4-gutter);
  align-items: center;
  border-top: 1px solid var(--v4-hair);
  padding-top: var(--v4-sec-in);
}
.v4-cta > * { min-width: 0; }
.v4-cta .v4-h2 { max-width: min(var(--v4-measure), 100%); }
.v4-cta .v4-actions { justify-content: flex-end; }

/* ────────────────────────────────────────────────────────────────
   15. 响应式
   1080px：首屏と 3 列を単欄に。
    900px：编号栏を畳む。CTA を単欄に。
    720px：定义表・阶段・事实列表を上下積みに。
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .v4-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--v4-sec-in); }
  .v4-hero-aside { padding-top: 0; }

  .v4-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .v4-step { padding-block: 22px; }
  .v4-step:first-child { padding-top: 0; }
  .v4-step:last-child { padding-bottom: 0; }
  .v4-step + .v4-step {
    border-left: 0;
    border-top: 1px solid var(--v4-hair);
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .v4-row { grid-template-columns: minmax(0, 1fr); }
  .v4-num { padding-top: 0; padding-bottom: 6px; }
  .v4-row-body { border-left: 0; padding-left: 0; }

  .v4-cta { grid-template-columns: minmax(0, 1fr); }
  .v4-cta .v4-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .v4-dl { grid-template-columns: minmax(0, 1fr); }
  .v4-dl dt { border-bottom: 0; padding-block: 14px 0; padding-right: 0; }
  .v4-dl dd { padding-block: 2px 14px; }

  .v4-stage { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .v4-log-item { grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }

  .v4-figcaption { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .v4-actions { gap: 10px; }
  .v4-btn { flex: 1 1 auto; min-width: 160px; }

  /* ── 表：1 行 1 枚のカードに組み替える（2026-09-07）──────────────
     以前は .v4-table に min-width: 520px を置き、.v4-scroll で横に
     流していた。375px では表の 4 列が視口の外へ出て、指で横に送らないと
     月額が読めない。手机では行ごとにカードへ畳み、列見出しは
     data-label-ja / -en / -zh から擬似要素で各セルの上に出す。
     .v4-scroll は桌面用に残す（720px 超では今までどおり表のまま）。 */
  .v4-table {
    border: 0;
    background: transparent;
  }
  /* 列見出し行は読み上げには残す（視覚だけ隠す）。 */
  .v4-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* カードは白（--v4-surface）。ページの地色（--v4-paper）から浮かせる。 */
  .v4-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--v4-hair-strong);
    background: var(--v4-surface);
  }
  /* 縞模様はカードでは意味がないので消す。 */
  .v4-table tbody tr:nth-child(odd) { background: var(--v4-surface); }
  .v4-table tbody tr:last-child { margin-bottom: 0; }
  .v4-table tbody th,
  .v4-table tbody td {
    display: block;
    width: auto;
    padding: 12px 14px;
    border-bottom: 1px solid var(--v4-hair);
    text-align: left;
  }
  /* カードの見出しはサービス名。地色を薄く敷いて値のセルと分ける。 */
  .v4-table tbody th {
    background: var(--v4-paper);
    font-size: var(--v4-fs-body);
  }
  .v4-table tbody tr th:last-child,
  .v4-table tbody tr td:last-child { border-bottom: 0; }

  /* 字段名。既定は日文、html[lang] で差し替える。 */
  .v4-table tbody td[data-label-ja]::before {
    display: block;
    margin-bottom: 2px;
    color: var(--v4-ink-muted);
    font-family: var(--font-body, sans-serif);
    font-size: var(--v4-fs-meta);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: normal;
    content: attr(data-label-ja);
  }
  html[lang="en"] .v4-table tbody td[data-label-en]::before { content: attr(data-label-en); }
  html[lang="zh-CN"] .v4-table tbody td[data-label-zh]::before { content: attr(data-label-zh); }

  /* 料金表：桌面の右寄せはカードでは左揃えに戻す（字段名と頭を揃える）。 */
  .v4-table--price th:not(:first-child),
  .v4-table--price td:not(:first-child) { text-align: left; }
  .v4-table .v4-td-num { text-align: left; }

  /* 中文の大見出しの折り返し（375px で 15 ページ実測して決めた・2026-09-07）。
     桌面（720px 超）は 1 行が長いのでこの節は掛けない＝今までどおり。

     ⚠ keep-all は掛けない。375px の .v4-h1 は 1 行に約 10 文字しか入らず、
       「网站并非上线即告结束，」のような 11 文字以上の句が必ず溢れる。
       keep-all ＋ overflow-wrap:anywhere で試すと、溢れた分が最後の 1 文字で
       強制的に折られ、「，」だけの行が web・trade・systems・pokemon・sloth・
       ec・pricing の 7 ページで出た（禁則違反）。実測値：孤立行 9 本。
     ⚠ auto-phrase も掛けない。Chrome の文節辞書は日文用で、中文では normal と
       同じ結果になることを 15 ページで確認した（I/J 案＝G 案と 1 文字も違わない）。

     効いたのは text-wrap:pretty だった。.v4-h1 の共通指定 text-wrap:balance は
     行長を揃えようとして 1 行目を短く切り、「网站并非上／线即告结束」のように
     語の途中で折っていた（老板の言う「断词」）。pretty に差し替えると
     孤立行が 7 本 → 4 本に減り、残る 4 本は文案側の <br> 由来（index と custom）。
     未対応ブラウザは balance のまま＝現状と同じで、壊れない。 */
  html[lang="zh-CN"] .v4-h1 {
    word-break: normal;
    overflow-wrap: anywhere;   /* 半角の長い語（URL 等）が入ったときの保険 */
    line-break: strict;        /* 「，。）」を行頭に落とさない */
    text-wrap: pretty;
  }

  /* text-wrap:pretty でも残る「語の途中で折れる」5 か所（index 销|路 /
     web 英|语 / systems 判|断 / pokemon 分|工 / sloth 报|价）を潰す最後の一手。
     375px の .v4-h1 は 1 行 10 文字。ブラウザは中文のどこでも折れると判断するので、
     割ってはいけない語だけを人が .v4-nw-zh で囲み、その語の内部だけ折り返しを禁じる。
     ⚠ 掛けるのはこのメディアクエリの中だけ＝桌面（720px 超）の版面は一切変わらない。
     ⚠ 囲むのは 2〜3 文字の語まで。長い句を囲むと折り返せず横スクロールが出る。 */
  html[lang="zh-CN"] .v4-h1 .v4-nw-zh { white-space: nowrap; }
}

/* ────────────────────────────────────────────────────────────────
   16. 旧皮肤の中和（保険）
   2026-09-10 の整合で、15 ページの <head> は
   backtotop.css → site-chrome.css → styles-v4.css の 3 枚だけになった。
   旧皮肤（styles.css / ai-blue.css / styles-v3.css / case-editorial.css /
   sloth-app.css）はどのページからも読み込んでいない。
   ⚠ styles.css は index.html だけに残っていて、`:lang(en) h1` の
   letter-spacing と `h1{font-family:var(--font-display)}` が効いてしまい、
   index の h1 だけ他の 14 ページと字送りが違っていた（実測で判明し、外した）。
   以下は旧皮肤を誰かが戻したときの受け皿。本文件は最後に読み込まれる。
   ──────────────────────────────────────────────────────────────── */

/* 淡入し忘れで本文が opacity:0 のまま残る事故を防ぐ。
   v4 は淡入アニメーションを使わない。 */
.v4-page .ai-reveal { opacity: 1; transform: none; transition: none; }
.v4-page .ai-grid,
.v4-page .ai-noise { display: none; }

/* 旧皮肤の丸角・影・グラデーションが漏れてきたときの受け皿。
   v4 の見出しは明朝体を使わない（case-editorial.css の h1〜h4 規則を上書き）。 */
.v4-page .v4-h1,
.v4-page .v4-h2,
.v4-page .v4-h3 { font-family: var(--font-body, sans-serif); }

/* 回到页首ボタン：角丸 10px ＋ 影は v4 の紙面に合わない。 */
.v4-page .hq-totop {
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  color: #f2f4f8; /* 箭头色：压住 .v4-page :where(button){color:inherit} */
}

/* ────────────────────────────────────────────────────────────────
   17. 動きを減らす設定・印刷
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v4-page *, .v4-page *::before, .v4-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .v4-page { background: #fff; }
  .v4-shell { border-inline: 0; }
  .v4-btn, .hq-totop { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   18. 明暗节奏（暗带）与金色描边章号
   2026-09-12 老板「网站太素了」→ 采纳 A 案（明暗节奏＋大幅真实画面）
   叠加 B 案的金色描边大章号与 section 顶 4px 金线。B 案的金底横幅未采纳。

   本节只加东西，不删前面 1〜17 节的任何一条。覆盖的只有两处：
   §1 的 --v4-rail（92px → 168px，装得下描边大号数字）、
   §3 的 .v4-num（12px 灰色等幅小字 → 金色描边空心字）。

   ── 本节新增的可复用组件（其余 14 页照抄这几个 class 即可）──
   .v4-band-dark   墨黑带  #14161a（与页脚同色）
   .v4-band-gray   深灰带  #23262b
       两者都写在 <section class="v4-section v4-band-dark"> 上，
       不必再写别的 class；带内的 v4-h2 / v4-p / v4-link / v4-btn /
       v4-dl / v4-num 全部自动换成暗底的一套颜色。
   .v4-figure-wide 通栏图版（1200px，比 shell 宽 20px／边），套在 .v4-figure 上
   .v4-frame       画面外框（1px 边＋8px 圆角＋一层落影），包住 <img>
   .v4-showcase    三张画面横排（1080px 转两列，720px 转单列）
       └ .v4-shot-card / .v4-shot-title（金色小标）
   .v4-band-foot   暗带底部单独一行的「一覧へ」链接（右端）
   .v4-stages--card / .v4-stage--card  阶段列表改成卡片横排（暗底上用）
   .v4-col--wide   把 .v4-col 的 760px 上限放开到 shell 满宽

   页面纵向节奏（index）：浅 → 墨黑 → 浅 → 深灰 → 深灰 → 页脚墨黑。
   ⚠ 所有网格列一律 minmax(0, 1fr)；.v4-figure-wide 的宽度写 100vw 减两个
     gutter 的兜底，不许写死 1200px（375px 会横向溢出）。
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 18.1 暗底的一组值。亮底那套 --v4-* 一个都不改 ── */
  --v4-ink-bg:     #14161a;                    /* 墨黑带（与页脚同色，首尾呼应） */
  --v4-slate-bg:   #23262b;                    /* 深灰带 */
  --v4-slate-card: #2b2f36;                    /* 深灰带上的卡片面 */
  --v4-on-dark:       #f2efe8;                 /* 暗底上的标题 */
  --v4-on-dark-body:  #b9bcc3;                 /* 暗底上的正文 */
  --v4-on-dark-muted: #878d97;                 /* 暗底上的图注、注记 */
  --v4-hair-dark:      rgba(255, 255, 255, 0.13);
  --v4-hair-dark-soft: rgba(255, 255, 255, 0.08);

  /* ── 18.2 金色三档 ──
     品牌金 #b98f3f 在墨黑上对比度只有 4.0:1，暗底一律换 #d0a95f＝7.4:1。
     色相不变，仍是同一支金。 */
  --v4-gold:             #b98f3f;                    /* 线：section 顶 4px 金线 */
  --v4-gold-deep:        #8a6a2b;                    /* 亮底上的金字（描边不可用时的兜底） */
  --v4-gold-on-dark:     #d0a95f;                    /* 暗底上的金字 */
  --v4-gold-stroke:      rgba(185, 143, 63, 0.62);   /* 亮底章号的笔画 */
  --v4-gold-stroke-dark: rgba(208, 169, 95, 0.72);   /* 暗底章号的笔画 */

  /* ── 18.3 编号栏加宽，装得下描边大号数字 ──
     140px 的「01」实测宽约 140px（字距 -0.055em 已算进去），168px 装得下。
     正文列由 1004px 压到 928px，.v4-col 的 760px 上限没变＝行长不变。 */
  --v4-rail: 168px;
}

/* ────────────────────────────────────────────────────────────────
   18.4 暗带 .v4-band-dark / .v4-band-gray
   背景挂在 .v4-section 上（不是 .v4-shell），这样左右两条发丝竖线
   还留在 shell 上、暗色一直铺满整个视口宽度。
   ──────────────────────────────────────────────────────────────── */

.v4-band-dark { background: var(--v4-ink-bg); color: var(--v4-on-dark-body); }
.v4-band-gray { background: var(--v4-slate-bg); color: var(--v4-on-dark-body); }

/* shell 的两条竖线在暗底上要换成浅色，不然整条线消失、
   页面从「一份文档」变成「几个色块」。 */
:is(.v4-band-dark, .v4-band-gray) > .v4-shell { border-inline-color: var(--v4-hair-dark); }
:is(.v4-band-dark, .v4-band-gray) .v4-row-body { border-left-color: var(--v4-hair-dark); }

:is(.v4-band-dark, .v4-band-gray) .v4-h1,
:is(.v4-band-dark, .v4-band-gray) .v4-h2,
:is(.v4-band-dark, .v4-band-gray) .v4-h3,
:is(.v4-band-dark, .v4-band-gray) .v4-block-title,
:is(.v4-band-dark, .v4-band-gray) .v4-step-title,
:is(.v4-band-dark, .v4-band-gray) .v4-stage-k { color: var(--v4-on-dark); }

:is(.v4-band-dark, .v4-band-gray) .v4-lead,
:is(.v4-band-dark, .v4-band-gray) .v4-p,
:is(.v4-band-dark, .v4-band-gray) .v4-stage-v,
:is(.v4-band-dark, .v4-band-gray) .v4-log-body,
:is(.v4-band-dark, .v4-band-gray) .v4-step-body { color: var(--v4-on-dark-body); }

:is(.v4-band-dark, .v4-band-gray) .v4-eyebrow,
:is(.v4-band-dark, .v4-band-gray) .v4-figcaption,
:is(.v4-band-dark, .v4-band-gray) .v4-fig-no,
:is(.v4-band-dark, .v4-band-gray) .v4-log-date,
:is(.v4-band-dark, .v4-band-gray) .v4-note { color: var(--v4-on-dark-muted); }

/* 発丝横线：暗底上要提亮，否则整条线看不见。 */
:is(.v4-band-dark, .v4-band-gray) .v4-block + .v4-block,
:is(.v4-band-dark, .v4-band-gray) .v4-stage,
:is(.v4-band-dark, .v4-band-gray) .v4-stage:last-child,
:is(.v4-band-dark, .v4-band-gray) .v4-log-item,
:is(.v4-band-dark, .v4-band-gray) .v4-log-item:last-child,
:is(.v4-band-dark, .v4-band-gray) .v4-steps,
:is(.v4-band-dark, .v4-band-gray) .v4-cta { border-color: var(--v4-hair-dark); }

/* 暗底上的定义表（会社概要）。 */
:is(.v4-band-dark, .v4-band-gray) .v4-dl { border-top-color: var(--v4-hair-dark); }
:is(.v4-band-dark, .v4-band-gray) .v4-dl dt,
:is(.v4-band-dark, .v4-band-gray) .v4-dl dd { border-bottom-color: var(--v4-hair-dark); }
:is(.v4-band-dark, .v4-band-gray) .v4-dl dt { color: var(--v4-on-dark-muted); }
:is(.v4-band-dark, .v4-band-gray) .v4-dl dd { color: var(--v4-on-dark); }

/* 暗底上的行内链接。亮底是「墨黑字＋发丝下划线」，暗底照抄同一形状，
   只把颜色换成暗底的标题色；hover 时下划线变金。 */
:is(.v4-band-dark, .v4-band-gray) .v4-link {
  color: var(--v4-on-dark);
  border-bottom-color: var(--v4-hair-dark);
}
:is(.v4-band-dark, .v4-band-gray) .v4-link:hover { border-bottom-color: var(--v4-gold-on-dark); }
:is(.v4-band-dark, .v4-band-gray) :focus-visible { outline-color: var(--v4-on-dark); }

/* 暗底上的按钮：实心键翻成浅底深字，线框键换白线。 */
:is(.v4-band-dark, .v4-band-gray) .v4-btn--solid { background: var(--v4-on-dark); color: var(--v4-ink-bg); }
:is(.v4-band-dark, .v4-band-gray) .v4-btn--solid:hover { background: #fff; }
:is(.v4-band-dark, .v4-band-gray) .v4-btn--line { border-color: var(--v4-hair-dark); color: var(--v4-on-dark); }
:is(.v4-band-dark, .v4-band-gray) .v4-btn--line:hover { border-color: var(--v4-on-dark); }

/* 暗底上的表格（其余页面可能用到）。 */
:is(.v4-band-dark, .v4-band-gray) .v4-table { border-color: var(--v4-hair-dark); }
:is(.v4-band-dark, .v4-band-gray) .v4-table th,
:is(.v4-band-dark, .v4-band-gray) .v4-table td { border-color: var(--v4-hair-dark); color: var(--v4-on-dark-body); }
:is(.v4-band-dark, .v4-band-gray) .v4-table thead th { color: var(--v4-on-dark-muted); }
:is(.v4-band-dark, .v4-band-gray) .v4-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }

/* ── 18.5 纵向节奏 ──
   1. §3 有一条「首屏の次の section は上余白を半分に」，那条是给
      「首屏＋紧跟的图版」设计的。现在首屏自己就带图，紧跟的是暗带，
      上余白要拿回来，否则暗色边压着首屏图注。
   2. 连着两块暗带之间不必留满额间距（一块暗色里的两节，不是两块暗色）。
      取 --v4-sec/4，与 .v4-section--tight 自己的上余白同值＝页尾那节不用另写例外。
   3. 最后一块暗带与页脚（墨黑）之间不留浅色缝。 */
.v4-hero + :is(.v4-band-dark, .v4-band-gray) > .v4-shell { padding-top: calc(var(--v4-sec) / 2); }
:is(.v4-band-dark, .v4-band-gray) + :is(.v4-band-dark, .v4-band-gray) > .v4-shell { padding-top: calc(var(--v4-sec) / 4); }
:is(.v4-band-dark, .v4-band-gray):last-of-type > .v4-shell { padding-bottom: calc(var(--v4-sec) / 2); }

/* ────────────────────────────────────────────────────────────────
   18.6 通栏图版 .v4-figure-wide ＋ 画面外框 .v4-frame
   .v4-shell 里的内容宽 1096px。首屏这一张要 1200px，比 shell 还宽，
   所以用居中溢出：left:50% ＋ translateX(-50%)。
   ⚠ 视口不足时退回 100vw - 2×gutter，不能写死 1200px
     （写死的话 375px 会横向溢出，html 的 overflow-x:hidden 会把右边切掉）。
   ──────────────────────────────────────────────────────────────── */

.v4-figure-wide {
  position: relative;
  left: 50%;
  width: min(100vw - var(--v4-gutter) * 2, 1200px);
  margin-top: var(--v4-sec-in);
  transform: translateX(-50%);
}

/* ⚠ 这里刻意不画窗口栏（三个圆点那条）。首屏用的
     assets/cases/sloth-01-research-*.webp 截图里已经带了一条 mac 窗口栏，
     外面再加一条就是两层窗口栏叠着。外框只负责一条边、一个圆角、一层落影。
   ⚠ 落影是纯灰、无色相、无扩散光晕——不是发光边框。 */
.v4-frame {
  border: 1px solid var(--v4-hair-strong);
  border-radius: 8px;
  background: var(--v4-surface);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(16, 19, 24, 0.06),
    0 30px 60px -34px rgba(16, 19, 24, 0.40);
}
.v4-frame img {
  width: 100%;
  border: 0;              /* 外框已经有边了，图自己不再画一条 */
  border-radius: 0;
}
.v4-figure-wide .v4-figcaption { margin-top: 14px; }

/* 通栏图版后面还接着正文行时（実績四页的 04 节：第一张通栏，余下两张回到
   正文列），下面那一行要自己拿回节内间距——.v4-row 本身没有 margin，
   不加这条的话图注与下一张图之间是 0px。 */
.v4-figure-wide + .v4-row { margin-top: var(--v4-sec-in); }

/* ────────────────────────────────────────────────────────────────
   18.7 三张画面横排 .v4-showcase
   ──────────────────────────────────────────────────────────────── */

/* 这一带要用满 shell 的宽度，不受 --v4-col(760px) 限制。 */
.v4-col--wide { max-width: 100%; }

.v4-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: var(--v4-sec-in);
}
.v4-shot-card { min-width: 0; margin: 0; }

/* 三张原图的高宽比不同（1600×777 / 1600×900 / 1600×1000）。
   统一裁成 16:10 并顶端对齐，横排时三张的上下沿才齐。 */
.v4-shot-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--v4-hair-strong);
  border-radius: 4px;
  background: var(--v4-surface);
  object-fit: cover;
  object-position: top center;
}
:is(.v4-band-dark, .v4-band-gray) .v4-shot-card img {
  border-color: var(--v4-hair-dark);
  background: #0f1115;
}
.v4-shot-card figcaption { margin-top: 16px; }

/* 金色小标。暗带里的金只有这一处（章号的描边另算）。
   亮底走深金 #8a6a2b，暗底走亮金 #d0a95f，两处都是同一支金。 */
.v4-shot-title {
  margin-bottom: var(--v4-tight);
  color: var(--v4-gold-deep);
  font-size: var(--v4-fs-h3);
  font-weight: 700;
  line-height: var(--v4-lh-head);
}
:is(.v4-band-dark, .v4-band-gray) .v4-shot-title { color: var(--v4-gold-on-dark); }
.v4-shot-card .v4-p + .v4-p { margin-top: var(--v4-tight); }
.v4-shot-card .v4-link { display: inline-block; margin-top: var(--v4-tight); }

/* 「実績一覧」那条链接单独一行，压在三栏下面、右端。 */
.v4-band-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--v4-sec-in);
  padding-top: var(--v4-sec-in);
  border-top: 1px solid var(--v4-hair-dark-soft);
}

/* ────────────────────────────────────────────────────────────────
   18.8 阶段卡 .v4-stages--card / .v4-stage--card
   原来的 .v4-stages 是「左键右值＋一条发丝横线」的两栏列表。
   深灰底上横线看不清，改成三张卡片横排。文案一字不动。
   ──────────────────────────────────────────────────────────────── */

.v4-stages--card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: var(--v4-sec-in);
}
.v4-stage--card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* §8 的两栏在卡里不用 */
  align-content: start;
  gap: var(--v4-tight);
  min-width: 0;
  border-radius: 4px;
  padding: clamp(20px, 2vw, 26px);
}
/* ⚠ §8 的 `.v4-stage:last-child{border-bottom:…}` 是 (0,2,0)，比单个 class 高一档，
   所以这里必须把 :last-child 一起写出来，否则最后一张卡的下边会留着亮底那根线。 */
.v4-stage--card,
.v4-stage--card:last-child {
  border: 1px solid var(--v4-hair-strong);
  background: var(--v4-surface);
}
:is(.v4-band-dark, .v4-band-gray) .v4-stage--card,
:is(.v4-band-dark, .v4-band-gray) .v4-stage--card:last-child {
  border-color: var(--v4-hair-dark);
  background: var(--v4-slate-card);
}
.v4-stage--card .v4-stage-k { color: var(--v4-gold-deep); }
:is(.v4-band-dark, .v4-band-gray) .v4-stage--card .v4-stage-k { color: var(--v4-gold-on-dark); }
/* 一张卡里有两条链接时（「運用を整える」「内製化する」），各占一行。
   inline-block 会让两条挤在同一行，所以用 block ＋ width:fit-content——
   下划线仍然只画在文字底下，不拉满整张卡。 */
.v4-stage--card .v4-link { display: block; width: fit-content; margin-top: 2px; }
.v4-stage--card .v4-link + .v4-link { margin-top: 8px; }

/* ────────────────────────────────────────────────────────────────
   18.9 section 顶 4px 金线 ＋ 金色描边大章号
   金线画在 .v4-shell 的 border-top 上：shell 的宽度刚好，左右端与页面的
   两条发丝竖线严丝合缝（另起一个元素画会差 1px）。
   只有带章号的 section 有这条线——首屏与没编号的段落不画。
   ──────────────────────────────────────────────────────────────── */

.v4-section:has(.v4-num) > .v4-shell { border-top: 4px solid var(--v4-gold); }

/* 章号：由 12px 灰色等幅小字换成金色描边空心字。
   空心描边编号是杂志目录页与年报的常用件，它不表意，只承担版面的重量。 */
.v4-num {
  color: var(--v4-paper, #f6f3ec); /* 填充用底色（不是透明），配合 paint-order 让填充盖住 miter 尖刺 */
  -webkit-text-stroke: 2px var(--v4-gold-stroke);
  paint-order: stroke fill;
  font-family: var(--font-en);
  font-size: clamp(78px, 9.8vw, 140px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.78;
  padding-top: 6px;
  user-select: none;
}
:is(.v4-band-dark, .v4-band-gray) .v4-num {
  color: var(--v4-ink-bg); /* 暗带内填充用带底色 */
  -webkit-text-stroke-color: var(--v4-gold-stroke-dark);
}
.v4-band-gray .v4-num { color: var(--v4-slate-bg); }
/* ⚠ -webkit-text-stroke 不支持时 color:transparent 会让编号整个消失。
   兜底：不描边，直接上金色实心字。 */
@supports not (-webkit-text-stroke: 1px #000) {
  .v4-num { color: var(--v4-gold-deep); }
  :is(.v4-band-dark, .v4-band-gray) .v4-num { color: var(--v4-gold-on-dark); }
}

/* ────────────────────────────────────────────────────────────────
   18.10 响应式
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .v4-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-stages--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --v4-rail: 120px; }
}

@media (max-width: 900px) {
  /* 编号栏折叠时，竖线也没了，暗带里的正文要自己拿回左边距。 */
  :is(.v4-band-dark, .v4-band-gray) .v4-row-body { border-left: 0; padding-left: 0; }
  /* 编号站到标题正上方，这个位置 140px 太大，降一档。 */
  .v4-num {
    font-size: clamp(64px, 15vw, 92px);
    padding-top: 0;
    padding-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .v4-showcase { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .v4-stages--card { grid-template-columns: minmax(0, 1fr); }
  .v4-frame { border-radius: 6px; }
  .v4-band-foot { justify-content: flex-start; }
  .v4-num { -webkit-text-stroke-width: 1.5px; }
  .v4-section:has(.v4-num) > .v4-shell { border-top-width: 3px; }
}

@media print {
  .v4-band-dark,
  .v4-band-gray { background: #fff !important; color: #14161a !important; }
  :is(.v4-band-dark, .v4-band-gray) .v4-h2,
  :is(.v4-band-dark, .v4-band-gray) .v4-h3,
  :is(.v4-band-dark, .v4-band-gray) .v4-shot-title,
  :is(.v4-band-dark, .v4-band-gray) .v4-stage-k { color: #14161a !important; }
  .v4-stage--card { background: #fff !important; }
  .v4-frame { box-shadow: none; }
  .v4-num { color: #6c727c !important; -webkit-text-stroke: 0; font-size: 12px; }
  .v4-section:has(.v4-num) > .v4-shell { border-top: 0; }
}

/* ────────────────────────────────────────────────────────────────
   19. 组件 —— 面包屑 v4-crumbs（2026-09-08 SEO 审计 #11）
   14 个非首页の <h1> の上、眉標のさらに上に 1 行だけ置く。
   分隔符「›」は CSS の ::before で描く——HTML に書くと三語の
   data-ja / -en / -zh の数が合わなくなる（check-i18n.sh 第 1 条）。
   ──────────────────────────────────────────────────────────────── */

.v4-crumbs { margin-bottom: var(--v4-tight); }

.v4-crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v4-crumb {
  color: var(--v4-ink-muted);
  font-size: var(--v4-fs-meta);
  letter-spacing: 0.06em;
  line-height: var(--v4-lh-head);
}
.v4-crumb + .v4-crumb::before {
  content: "\203A";
  margin-right: 6px;
  color: var(--v4-hair-strong);
}
.v4-crumb a {
  border-bottom: 1px solid transparent;
  color: inherit;
  padding-bottom: 1px;
  transition: border-color 160ms ease;
}
.v4-crumb a:hover { border-bottom-color: var(--v4-ink-muted); }
.v4-crumb[aria-current="page"] { color: var(--v4-ink-body); }

/* ────────────────────────────────────────────────────────────────
   20. 组件 —— よくあるご質問 v4-faq（2026-09-08 SEO 審計 #9）
   <details>/<summary> の素の見た目のまま、罫線だけ v4 の発丝線に揃える。
   開閉記号は ＋／− の 1 文字。三角マーカーは消す。
   ──────────────────────────────────────────────────────────────── */

.v4-faq {
  margin-top: var(--v4-sec-in);
  border-top: 1px solid var(--v4-hair);
}

.v4-faq-item { border-bottom: 1px solid var(--v4-hair); }

.v4-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v4-gutter);
  padding-block: 16px;
  color: var(--v4-ink);
  cursor: pointer;
  font-size: var(--v4-fs-body);
  font-weight: 700;
  line-height: var(--v4-lh-head);
  list-style: none;
}
.v4-faq-q::-webkit-details-marker { display: none; }
.v4-faq-q::after {
  content: "\002B";
  flex: 0 0 auto;
  color: var(--v4-ink-muted);
  font-family: var(--font-mono);
  font-weight: 400;
}
.v4-faq-item[open] .v4-faq-q::after { content: "\2212"; }
.v4-faq-q:focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 2px; }

.v4-faq-a {
  max-width: min(var(--v4-measure), 100%);
  margin: 0;
  padding-bottom: 20px;
  color: var(--v4-ink-body);
  font-size: var(--v4-fs-body);
  line-height: var(--v4-lh-body);
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .v4-faq-q { gap: 12px; }
}
