/* 子页面样式（第八轮自动生成：design/tools/site_build/subcss.py）。颜色与字体取自 style.css 的变量。 */

:root {
  --sp-wrap: var(--wrap); --sp-gutter: var(--gutter); --sp-sticky-top: 104px;
  --sp-ink: var(--ink); --sp-head: var(--navy); --sp-muted: var(--muted); --sp-line: var(--line); --sp-line2: var(--line-strong);
  --sp-surface: #FFFFFF; --sp-soft: var(--bg-soft); --sp-tint: var(--ice);
  --sp-accent: var(--cyan); --sp-accent-ink: var(--link); --sp-link: var(--link); --sp-warn: #A35A00;
  --sp-radius: var(--r-md); --sp-radius-sm: var(--r-sm); --sp-shadow: var(--sh-1); --sp-ease: var(--ease);
  --sp-display: var(--f); --sp-h1-weight: 700; --sp-h2-weight: 700;
  --sp-hero-bg: var(--navy-deep); --sp-hero-ink: #FFFFFF; --sp-hero-title: #FFFFFF; --sp-hero-lead: #D3DEEA; --sp-hero-muted: var(--muted-light);
  --sp-hero-line: transparent; --sp-eyebrow: var(--cyan-light);
  --sp-sib-bg: rgba(255, 255, 255, .04); --sp-sib-line: rgba(255, 255, 255, .24); --sp-sib-ink: #D3DEEA; --sp-sib-hover: rgba(255, 255, 255, .7);
  --sp-sib-cur-bg: #FFFFFF; --sp-sib-cur-ink: var(--navy);
  --sp-check-bg: var(--ice); --sp-check: var(--check);
  --sp-step-bg: var(--navy); --sp-step-ink: #FFFFFF; --sp-step-radius: 10px;
  --sp-thead-bg: var(--bg-soft); --sp-thead-ink: var(--navy);
  --sp-band-bg: var(--navy-2); --sp-band-ink: #FFFFFF; --sp-band-title: #FFFFFF; --sp-band-muted: #C9D7E6;
  --sp-btn-bg: #FFFFFF; --sp-btn-ink: var(--navy); --sp-btn-hover: var(--ice); --sp-btn-radius: var(--r-sm);
  --sp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sp-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 3.5H3.5v9h9v-3M9.5 2.5h4v4M13.5 2.5 7.5 8.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sp-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ---------- 子页面骨架 ---------- */
.sp-wrap { width: min(var(--sp-wrap), 100% - var(--sp-gutter) * 2); margin-inline: auto; }
.sp-hero { position: relative; overflow: hidden; background-color: var(--sp-hero-bg); color: var(--sp-hero-ink);
  padding: clamp(32px, 4.5vw, 56px) 0 clamp(48px, 6vw, 84px); border-bottom: 1px solid var(--sp-hero-line); }
.sp-hero-inner { position: relative; z-index: 1; }
.sp-crumbs ol { list-style: none; margin: 0 0 clamp(22px, 3.4vw, 44px); padding: 0; display: flex; flex-wrap: wrap; align-items: center;
  font-size: .82rem; line-height: 1.5; color: var(--sp-hero-muted); }
.sp-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.sp-crumbs li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 12px 0 9px; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.sp-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
.sp-crumbs a:hover { color: var(--sp-hero-ink); text-decoration: underline; text-underline-offset: 3px; }
.sp-crumbs [aria-current="page"] { color: var(--sp-hero-ink); }
.sp-eyebrow { margin: 0 0 16px; font-size: .84rem; font-weight: 700; letter-spacing: .14em; color: var(--sp-eyebrow); }
.sp-title { margin: 0; max-width: 21em; font-family: var(--sp-display); font-weight: var(--sp-h1-weight);
  font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.2rem); line-height: 1.36; letter-spacing: var(--sp-h1-ls, .02em);
  color: var(--sp-hero-title); text-wrap: balance; word-break: auto-phrase; }
.sp-lead { margin: 22px 0 0; max-width: 40em; font-size: clamp(1rem, .96rem + .22vw, 1.1rem); line-height: 1.95; color: var(--sp-hero-lead); text-wrap: pretty; }
.sp-hero-note { margin: 18px 0 0; max-width: 46em; font-size: .84rem; line-height: 1.8; color: var(--sp-hero-muted); }

/* 同级页面切换（三级页面的页头） */
.sp-siblings { margin-top: clamp(28px, 4vw, 44px); }
.sp-siblings ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-siblings a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--sp-sib-line); border-radius: var(--sp-radius-sm); background: var(--sp-sib-bg); color: var(--sp-sib-ink);
  font-size: .9rem; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.sp-siblings a:hover { border-color: var(--sp-sib-hover); color: var(--sp-hero-ink); }
.sp-siblings a[aria-current="page"] { background: var(--sp-sib-cur-bg); border-color: var(--sp-sib-cur-bg); color: var(--sp-sib-cur-ink); font-weight: 700; }
.sp-sib-no { font-size: .76rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .75; }

/* 本文 + 页内目次 */
.sp-doc { display: grid; gap: 36px; padding-block: clamp(44px, 6vw, 88px) clamp(60px, 7vw, 108px); }
.sp-toc { font-size: .9rem; }
.sp-toc-title { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--sp-muted); }
.sp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.sp-toc li { counter-increment: toc; }
.sp-toc a { display: flex; gap: 12px; align-items: baseline; min-height: 40px; padding: 8px 0; box-sizing: border-box;
  color: var(--sp-ink); line-height: 1.6; text-decoration: none; }
.sp-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--sp-accent-ink); }
.sp-toc a:hover { color: var(--sp-link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1079px) {
  .sp-toc { padding: 18px 22px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
  .sp-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); column-gap: 28px; }
}
@media (min-width: 1080px) {
  .sp-doc.has-toc { grid-template-columns: 216px minmax(0, 1fr); gap: clamp(48px, 5vw, 80px); align-items: start; }
  .sp-toc { position: sticky; top: var(--sp-sticky-top, 104px); padding-left: 18px; border-left: 1px solid var(--sp-line); }
}
.sp-body { min-width: 0; max-width: 780px; }
.sp-body > :first-child { margin-top: 0; }
.sp-body h2 { margin: clamp(56px, 6vw, 84px) 0 22px; font-family: var(--sp-display); font-weight: var(--sp-h2-weight);
  font-size: clamp(1.38rem, 1.05rem + 1.05vw, 1.9rem); line-height: 1.45; color: var(--sp-head); text-wrap: balance; }
.sp-body h3 { margin: 40px 0 12px; font-size: 1.1rem; line-height: 1.6; font-weight: 700; color: var(--sp-head); }
.sp-body p { margin: 0 0 1.15em; max-width: 42em; }
.sp-body a:not([class]) { color: var(--sp-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sp-body a:not([class]):hover { text-decoration-thickness: 2px; }
.sp-body a[href^="http"]::after { content: ""; display: inline-block; width: .78em; height: .78em; margin-left: .22em; vertical-align: -.04em;
  background: currentColor; -webkit-mask: var(--sp-ext) center / contain no-repeat; mask: var(--sp-ext) center / contain no-repeat; }
.sp-body ul:not([class]), .sp-body ol:not([class]) { margin: 0 0 1.3em; padding-left: 1.4em; }
.sp-body li { margin-bottom: .45em; }
.sp-body strong { font-weight: 700; color: var(--sp-head); }
.sp-note { font-size: .9rem; color: var(--sp-muted); }

/* 勾选清单 */
.sp-checks { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 10px; }
.sp-checks li { position: relative; margin: 0; padding: 14px 18px 14px 52px; background: var(--sp-surface); border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm); line-height: 1.75; }
.sp-checks li::before { content: ""; position: absolute; left: 18px; top: calc(14px + .875em - 10px); width: 20px; height: 20px; border-radius: 50%;
  background: var(--sp-check-bg) var(--sp-check) center / 12px no-repeat; }

/* 步骤 */
.sp-steps { list-style: none; margin: 10px 0 1.6em; padding: 0; counter-reset: step; }
.sp-steps li { counter-increment: step; position: relative; margin: 0; padding: 0 0 28px 64px; }
.sp-steps li::before { content: counter(step, var(--sp-step-style, decimal)); position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  display: grid; place-items: center; box-sizing: border-box; border-radius: var(--sp-step-radius); background: var(--sp-step-bg);
  border: 1px solid var(--sp-step-border, transparent); color: var(--sp-step-ink); font-family: var(--sp-step-font, inherit);
  font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sp-steps li::after { content: ""; position: absolute; left: 19.5px; top: 48px; bottom: 6px; width: 1px; background: var(--sp-line2); }
.sp-steps li:last-child { padding-bottom: 0; }
.sp-steps li:last-child::after { display: none; }
.sp-step-title { display: block; margin: 6px 0 6px; font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: var(--sp-head); }
.sp-steps p { margin: 0; }

/* 表格 */
.sp-table-wrap { margin: 10px 0 1.6em; overflow-x: auto; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.sp-table-wrap:focus-visible { outline: 2px solid var(--sp-link); outline-offset: 2px; }
.sp-table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.75; }
.sp-table-wide .sp-table { min-width: 640px; }
.sp-table caption { padding: 14px 18px 0; text-align: left; font-weight: 700; color: var(--sp-head); }
.sp-table th, .sp-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sp-line); }
.sp-table thead th { background: var(--sp-thead-bg); color: var(--sp-thead-ink); font-size: .84rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sp-table tbody th { font-weight: 700; color: var(--sp-head); }
.sp-table tbody tr:last-child > * { border-bottom: 0; }
.sp-table-note { margin: -.4em 0 1.6em; font-size: .86rem; color: var(--sp-muted); }

/* 定义列表 */
.sp-dl { margin: 10px 0 1.6em; border-top: 1px solid var(--sp-line); }
.sp-dl > div { display: grid; gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--sp-line); }
.sp-dl dt { font-weight: 700; color: var(--sp-head); }
.sp-dl dd { margin: 0; }
@media (min-width: 720px) { .sp-dl > div { grid-template-columns: 11em minmax(0, 1fr); } }

/* 提示框 */
.sp-callout { margin: 10px 0 1.6em; padding: 20px 24px; background: var(--sp-tint); border-left: 3px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; }
.sp-callout.is-warn { border-left-color: var(--sp-warn); }
.sp-callout-title { margin: 0 0 6px; font-weight: 700; color: var(--sp-head); }
.sp-callout p:last-child { margin-bottom: 0; }

/* 链接卡片 */
.sp-cards { list-style: none; margin: 4px 0 1.6em; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); }
.sp-cards li { margin: 0; }
.sp-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 22px 24px 56px;
  background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); color: var(--sp-ink); text-decoration: none;
  transition: border-color .2s, box-shadow .2s, translate .2s var(--sp-ease); }
.sp-card:hover { border-color: var(--sp-line2); box-shadow: var(--sp-shadow); translate: 0 -2px; }
.sp-card-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--sp-accent-ink); }
.sp-card-title { font-size: 1.06rem; font-weight: 700; line-height: 1.55; color: var(--sp-head); }
.sp-card-text { font-size: .92rem; line-height: 1.8; color: var(--sp-muted); }
.sp-card::after { content: ""; position: absolute; left: 24px; bottom: 22px; width: 18px; height: 18px; background: var(--sp-accent-ink);
  -webkit-mask: var(--sp-arrow) center / contain no-repeat; mask: var(--sp-arrow) center / contain no-repeat; transition: translate .2s var(--sp-ease); }
.sp-card:hover::after { translate: 4px 0; }

/* 成果物标签 */
.sp-chips { list-style: none; margin: 10px 0 1.6em; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips li { margin: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 16px; box-sizing: border-box;
  border: 1px solid var(--sp-line2); border-radius: var(--sp-radius-sm); background: var(--sp-surface); font-size: .92rem; font-weight: 500; }
.sp-chips li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--sp-chip-dot, 2px); background: var(--sp-accent); }

/* 公式来源 */
.sp-sources { list-style: none; margin: 10px 0 1.4em; padding: 0; border-top: 1px solid var(--sp-line); font-size: .93rem; }
.sp-sources li { margin: 0; border-bottom: 1px solid var(--sp-line); }
.sp-body .sp-sources a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 8px 0;
  color: var(--sp-link); text-decoration: none; }
.sp-body .sp-sources a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 问答 */
.sp-qa { margin: 6px 0 1.6em; border-top: 1px solid var(--sp-line); }
.sp-qa details { border-bottom: 1px solid var(--sp-line); scroll-margin-top: var(--sp-sticky-top, 104px); }
.sp-qa summary { position: relative; display: block; min-height: 44px; padding: 18px 48px 18px 0; box-sizing: border-box; cursor: pointer;
  list-style: none; font-weight: 700; line-height: 1.7; color: var(--sp-head); }
.sp-qa summary::-webkit-details-marker { display: none; }
.sp-qa summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: var(--sp-accent-ink); -webkit-mask: var(--sp-plus) center / contain no-repeat; mask: var(--sp-plus) center / contain no-repeat;
  transition: rotate .2s var(--sp-ease); }
.sp-qa details[open] summary::after { rotate: 45deg; }
.sp-qa summary:hover { color: var(--sp-link); }
.sp-qa-a { padding: 0 0 20px; }
.sp-qa-a p { margin: 0 0 .8em; }
.sp-qa-a p:last-child { margin-bottom: 0; }

/* 前后页 */
.sp-pager { display: grid; gap: 12px; margin-top: clamp(52px, 6vw, 76px); padding-top: 28px; border-top: 1px solid var(--sp-line); }
@media (min-width: 720px) { .sp-pager { grid-template-columns: 1fr 1fr; } .sp-pager .next { grid-column: 2; } }
.sp-pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm);
  background: var(--sp-surface); color: var(--sp-head); font-weight: 700; text-decoration: none; transition: border-color .15s; }
.sp-pager a:hover { border-color: var(--sp-accent); }
.sp-pager a span { font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--sp-muted); }
.sp-pager .next { text-align: right; }

/* 关联页面 */
.sp-related { padding: clamp(52px, 6vw, 84px) 0; background: var(--sp-soft); border-top: 1px solid var(--sp-line); }
.sp-related-title { margin: 0 0 22px; font-family: var(--sp-display); font-weight: var(--sp-h2-weight); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); color: var(--sp-head); }
.sp-related .sp-cards { margin-bottom: 0; }

/* 底部咨询带 */
.sp-cta { position: relative; overflow: hidden; background-color: var(--sp-band-bg); color: var(--sp-band-ink); padding: clamp(56px, 7vw, 100px) 0; }
.sp-cta-inner { position: relative; z-index: 1; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .sp-cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } }
.sp-cta h2 { margin: 0 0 12px; font-family: var(--sp-display); font-weight: var(--sp-h2-weight); font-size: clamp(1.4rem, 1.05rem + 1.2vw, 2.05rem);
  line-height: 1.45; color: var(--sp-band-title); text-wrap: balance; }
.sp-cta p { margin: 0; max-width: 36em; color: var(--sp-band-muted); }
.sp-cta p.sp-cta-mail { margin-top: 10px; }
.sp-cta-mail a { color: var(--sp-band-ink); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.sp-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; box-sizing: border-box;
  border-radius: var(--sp-btn-radius); background: var(--sp-btn-bg); color: var(--sp-btn-ink); font-weight: 700; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap; transition: background-color .15s; justify-self: start; }
.sp-cta-btn::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sp-arrow) center / contain no-repeat;
  mask: var(--sp-arrow) center / contain no-repeat; transition: translate .2s var(--sp-ease); }
.sp-cta-btn:hover { background: var(--sp-btn-hover); color: var(--sp-btn-ink); }
.sp-cta-btn:hover::after { translate: 3px 0; }
/* 日文按词组换行（Chrome 119+），避免「そ／のうえで」这类断在词中间 */
.sp-lead, .sp-card-title, .sp-card-text, .sp-toc a, .sp-step-title, .sp-qa summary, .sp-dl dt, .sp-table th, .sp-siblings a, .sp-pager a, .sp-cta p { word-break: auto-phrase; }

/* 手机：表格改为逐行卡片，列名用 data-label 显示（保留 role，读屏仍按表格朗读） */
@media (max-width: 639px) {
  .sp-table-wide .sp-table { min-width: 0; }
  .sp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sp-table, .sp-table tbody, .sp-table tr, .sp-table th, .sp-table td { display: block; }
  .sp-table tbody tr { padding: 14px 18px; border-bottom: 1px solid var(--sp-line); }
  .sp-table tbody tr:last-child { border-bottom: 0; }
  .sp-table th, .sp-table td, .sp-table tbody tr:last-child > * { padding: 0; border: 0; }
  .sp-table tbody th { margin-bottom: 4px; }
  .sp-table td + td { margin-top: 8px; }
  .sp-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--sp-muted); }
  .sp-table-2col td[data-label]::before { display: none; }
  .sp-table caption { padding: 14px 18px 0; }
}

/* 手机：同级页面导航改为一行横向滚动，当前页由 main.js 滚到可见处 */
@media (max-width: 719px) {
  .sp-siblings { margin-inline: calc(var(--sp-gutter) * -1); }
  .sp-siblings ol { flex-wrap: nowrap; overflow-x: auto; padding: 2px var(--sp-gutter) 8px; scroll-padding-inline: var(--sp-gutter); scrollbar-width: none; }
  .sp-siblings ol::-webkit-scrollbar { display: none; }
  .sp-siblings li { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-card::after, .sp-cta-btn::after, .sp-qa summary::after { transition: none; }
  .sp-card:hover { translate: none; }
}

/* WL：蓝图网格页头 + 青蓝短线标题（与首页首屏、页脚同一套深海军蓝） */
.sp-hero { background-image: var(--grid-light); background-size: 32px 32px; }
.sp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--cyan) 0 96px, transparent 96px); }
.sp-hero .sp-crumbs a:focus-visible, .sp-siblings a:focus-visible { outline-color: #FFFFFF; }
.sp-body h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--cyan); }
.sp-cta { background-image: var(--grid-light); background-size: 32px 32px; }
.sp-steps li::before { box-shadow: 0 0 0 4px var(--ice); }