/* 全站主样式 - 异步加载，包含所有非首屏组件 */

/* ═══════════════════════════════════════════
   字体加载（变量字体单文件）
   ═══════════════════════════════════════════ */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   通用元素
   ═══════════════════════════════════════════ */
ul, ol { padding-left: 1.5em; line-height: var(--lh-relaxed); }
ul li, ol li { margin-bottom: var(--space-2); }
strong, b { font-weight: var(--fw-semibold); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-text);
}
blockquote p:last-child { margin-bottom: 0; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
}

/* ═══════════════════════════════════════════
   Header 移动端菜单展开
   ═══════════════════════════════════════════ */
.site-nav.is-open {
  display: grid;
  position: fixed;
  inset: 64px 0 0 0;
  background: #fff;
  grid-template-columns: 1fr;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--z-overlay);
  border-top: 1px solid var(--color-border);
}
.site-nav.is-open .nav-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.site-nav.is-open .nav-label {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 var(--space-1);
}
.site-nav.is-open a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.site-nav.is-open a:hover {
  background: var(--color-primary-soft);
  text-decoration: none;
}
.site-nav .nav-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  padding-top: var(--space-4);
}
body.nav-open {
  overflow: hidden;
}
@media (min-width: 1024px) {
  .site-nav.is-open {
    position: static;
    display: flex;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }
}

/* ═══════════════════════════════════════════
   阅读进度条 + 浮动目录
   ═══════════════════════════════════════════ */
.reading-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--color-accent);
  z-index: var(--z-progress);
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════
   Hero 首页
   ═══════════════════════════════════════════ */
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
}
.hero-art {
  display: flex; justify-content: center; align-items: center;
  padding: var(--space-4);
}
.hero-art svg { max-width: 480px; width: 100%; height: auto; }

.hero-quick-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-quick-tools a {
  display: flex; flex-direction: column;
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
}
.hero-quick-tools a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}
.hero-quick-tools strong { color: var(--color-text); font-size: var(--fs-md); }
.hero-quick-tools span { color: var(--color-text-muted); font-size: var(--fs-xs); margin-top: var(--space-1); }

/* ═══════════════════════════════════════════
   集群分类卡（首页 + Pillar）
   ═══════════════════════════════════════════ */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.cluster-card {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--cluster-color, var(--color-primary));
  text-decoration: none;
  transition: var(--transition);
  min-height: 220px;
}
.cluster-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cluster-color, var(--color-primary));
}
.cluster-card .cluster-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--cluster-color, var(--color-primary)) 10%, #fff);
  border-radius: 14px;
  color: var(--cluster-color, var(--color-primary));
}
.cluster-card .cluster-icon svg { width: 40px; height: 40px; display: block; }

/* ═══════════════════════════════════════════
   统一页面宽度与内容对齐
   ═══════════════════════════════════════════ */
.guide-page,
.calculator-page,
.pillar-page,
.project-page,
.legal-page {
  width: 100%;
  max-width: 100%;
}
.guide-page > *,
.calculator-page > *,
.pillar-page > *,
.project-page > *,
.legal-page > * {
  min-width: 0;
}
.guide-page p,
.calculator-page p,
.pillar-page p,
.project-page p,
.legal-page p,
.guide-page ul,
.guide-page ol,
.calculator-page ul,
.calculator-page ol,
.pillar-page ul,
.pillar-page ol,
.project-page ul,
.project-page ol,
.legal-page ul,
.legal-page ol {
  max-width: 70ch;
}
.guide-page .calculator-tool,
.calculator-page .calculator-tool,
.pillar-page .calculator-tool,
.project-page .calculator-tool,
.data-table-wrap,
.examples-grid,
.related-grid,
.faq-list,
.page-figure,
.article-toc,
.references-section {
  max-width: 100%;
}
.data-table-wrap,
.examples-section,
.related-section,
.faq-section,
.coverage-tables-section,
.references-section {
  width: 100%;
}

/* ═══════════════════════════════════════════
   页面插图：insight / step / workflow / variables
   ═══════════════════════════════════════════ */
.page-figure {
  margin: var(--space-6) 0;
  padding: 0;
  text-align: center;
}
.page-figure img {
  width: 100%;
  height: auto;
  max-width: 720px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.page-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.figure-insight img { border-top: 4px solid var(--cluster-color, var(--color-primary)); }
.figure-step img { border-left: 4px solid var(--cluster-color, var(--color-primary)); }
.figure-workflow img { border: 1px solid var(--color-border); }
.cluster-card h3 { color: var(--color-text); margin-bottom: var(--space-2); font-size: var(--fs-md); }
.cluster-card p { color: var(--color-text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-3); flex: 1; }
.cluster-card .cluster-cta { color: var(--cluster-color, var(--color-primary)); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════
   计算器组件
   ═══════════════════════════════════════════ */
.calculator-tool {
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .calculator-tool { padding: var(--space-6); }
}
.calc-title {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.calc-instruction {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}
.calc-presets {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5);
  align-items: center;
}
.presets-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--fw-semibold);
}
.preset-btn {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--fs-xs);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 36px;
}
.preset-btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.calc-fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.calc-field { min-width: 0; }
.calc-field label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.calc-field abbr {
  background: var(--color-bg-soft);
  border-radius: 50%;
  width: 18px; height: 18px; line-height: 16px;
  display: inline-block; text-align: center;
  font-size: 11px; color: var(--color-text-muted);
  margin-left: 4px; cursor: help; text-decoration: none;
  border: 1px solid var(--color-border);
}
.calc-input-row {
  display: flex; gap: 0;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: var(--transition-fast);
  min-width: 0;
  max-width: 100%;
}
.calc-input-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.calc-input {
  flex: 1; min-width: 0;
  border: 0; padding: 12px 14px;
  font-size: var(--fs-md);
  background: transparent;
  color: var(--color-text);
  min-height: 48px;
}
.calc-input:focus { outline: none; }
.calc-unit {
  border: 0; border-left: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  width: clamp(64px, 24vw, 84px);
  min-width: 0;
  max-width: 42%;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.calc-unit-static {
  display: flex; align-items: center;
  padding: 0 var(--space-2);
  background: var(--color-bg-soft);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  width: clamp(54px, 20vw, 72px);
  min-width: 0;
  max-width: 38%;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .calc-input-row {
    flex-direction: column;
  }
  .calc-unit,
  .calc-unit-static {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}

.calc-results {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-3);
  padding: var(--space-5);
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fff 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.calc-output {
  display: flex; flex-direction: column;
  text-align: center;
  padding: var(--space-3);
  min-width: 0;
}
.output-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.output-value {
  font-size: clamp(1.35rem, 6vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  color: var(--cluster-color, var(--color-primary));
  font-family: var(--font-mono);
  line-height: 1.1;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.calc-disclaimer {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* ═══════════════════════════════════════════
   公式 / Insight 区块
   ═══════════════════════════════════════════ */
.formula-block {
  background: #0E1A2B;
  color: #F4F7FB;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  margin: var(--space-4) 0;
  overflow-x: auto;
}
.formula-block .var { color: var(--color-accent); font-weight: var(--fw-semibold); }
.formula-block .op { color: #8FB3D9; }
.formula-caption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: -8px;
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════
   数据表
   ═══════════════════════════════════════════ */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: #fff;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.data-table thead th {
  background: var(--color-bg-soft);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
}
.data-table tbody tr:nth-child(even) { background: var(--color-bg-panel); }
.data-table tbody tr:hover { background: var(--color-primary-soft); }
.data-table tbody th[scope="row"] { font-weight: var(--fw-semibold); color: var(--color-text); }
.table-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ═══════════════════════════════════════════
   示例计算卡片
   ═══════════════════════════════════════════ */
.examples-section { margin: var(--space-8) 0; }
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.example-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
}
.example-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cluster-color, var(--color-primary));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.example-card h3 { font-size: var(--fs-md); margin-top: 0; margin-bottom: var(--space-2); }
.example-scenario { color: var(--color-text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.example-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}
.example-inputs > div { display: flex; flex-direction: column; }
.example-inputs dt { color: var(--color-text-muted); margin: 0; }
.example-inputs dd { color: var(--color-text); margin: 0; font-weight: var(--fw-semibold); }
.example-result {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-3); background: var(--color-primary-soft); border-radius: var(--radius-sm);
  margin: var(--space-3) 0;
}
.example-result strong { color: var(--color-text); font-size: var(--fs-sm); }
.result-value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary-dark); }

/* 权威来源与项目路径模块 */
.references-section {
  margin: var(--space-8) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.references-intro {
  color: var(--color-text-muted);
  margin-top: calc(var(--space-2) * -1);
}
.references-list {
  display: grid;
  gap: var(--space-4);
  padding-left: 1.25rem;
}
.references-list li {
  padding-left: var(--space-2);
}
.reference-publisher {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-1);
}
.project-materials .related-grid {
  margin-top: var(--space-4);
}
.example-takeaway { font-size: var(--fs-sm); color: var(--color-text-secondary); margin: 0; }

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.faq-section { margin: var(--space-8) 0; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition: var(--transition-fast);
}
.faq-item[open] { border-color: var(--color-primary-light); box-shadow: var(--shadow-xs); }
.faq-item summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  list-style: none;
  position: relative;
  padding-right: 48px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: var(--space-4); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xl);
  color: var(--color-primary);
  font-weight: var(--fw-regular);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { content: '–'; }
.faq-answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-secondary); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   相关推荐
   ═══════════════════════════════════════════ */
.related-section { margin: var(--space-8) 0; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.related-card {
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition);
  min-height: 180px;
}
.related-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cluster-color, var(--color-primary));
}
.related-cluster {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--fw-bold);
  color: var(--cluster-color);
  margin-bottom: var(--space-2);
}
.related-card h3 { font-size: var(--fs-md); margin: 0 0 var(--space-2); color: var(--color-text); }
.related-card p { color: var(--color-text-secondary); font-size: var(--fs-sm); margin-bottom: var(--space-3); flex: 1; }
.related-cta { color: var(--cluster-color, var(--color-primary)); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════
   作者署名
   ═══════════════════════════════════════════ */
.author-byline {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  margin: var(--space-5) 0;
}
.byline-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.byline-line { margin: 0; font-size: var(--fs-sm); }
.byline-line a { font-weight: var(--fw-semibold); color: var(--color-primary-dark); }
.byline-dates { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ═══════════════════════════════════════════
   现场经验提示框（Sarah Miller anecdote）
   ═══════════════════════════════════════════ */
.anecdote {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: #FFF8EA;
  border: 1px solid #F0DCAA;
  border-left: 4px solid var(--color-accent-dark);
  border-radius: var(--radius-md);
  color: #5D4109;
}
.anecdote p { margin: 0; }
.anecdote strong { color: var(--color-accent-dark); }

/* ═══════════════════════════════════════════
   AdSense 占位 + 智能隐藏
   ═══════════════════════════════════════════ */
.ad-slot {
  margin: var(--space-6) 0;
  text-align: center;
  min-height: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-panel);
  transition: opacity var(--transition);
}
.ad-slot[data-ad-state="empty"] {
  display: none !important;
  margin: 0;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
.ad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  display: block;
}

/* ═══════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════ */
.site-footer {
  margin-top: var(--space-10);
  padding: var(--space-10) 0 var(--space-6);
  background: var(--color-text);
  color: #B8C2CF;
  font-size: var(--fs-sm);
}
.site-footer a { color: #D9DEE5; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
}
.footer-col h4 {
  color: #fff;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid #2D3D52;
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: var(--fs-xs);
  color: #8B95A6;
}
.footer-brand {
  display: flex; align-items: center; gap: var(--space-2);
  color: #fff;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════
   I-Language 区块通用
   ═══════════════════════════════════════════ */
.il-section { margin: var(--space-8) 0; }
.il-section .section-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cluster-color, var(--color-primary));
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.il-section h2 { margin-top: 0; }
.section-transition {
  font-style: italic;
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-border-strong);
  padding-left: var(--space-4);
  margin-top: var(--space-6);
}
.content-hook {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}
.content-hook p { margin: 0; }

/* 内容预告块 */
.content-preview {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.content-preview p { font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.content-preview ul { margin: 0; padding-left: 1.4em; }
.content-preview li { margin-bottom: var(--space-1); color: var(--color-text-secondary); }

/* 文章目录 */
.article-toc {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.toc-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.article-toc ol { padding-left: 1.4em; margin: 0; }
.article-toc li { margin-bottom: var(--space-2); font-size: var(--fs-sm); }

/* ═══════════════════════════════════════════
   表格内嵌（如 Coverage Tables、Density 对照表）
   ═══════════════════════════════════════════ */
.coverage-tables-section { margin: var(--space-8) 0; }
.coverage-tables-section h2 { margin-bottom: var(--space-4); }

@media (max-width: 767px) {
  .hero { padding: var(--space-8) 0 var(--space-6); }
  .page-intro { padding: var(--space-4) 0 var(--space-2); }
  .il-section,
  .faq-section,
  .examples-section,
  .related-section,
  .coverage-tables-section,
  .references-section {
    margin: var(--space-6) 0;
  }
  .related-section { padding: var(--space-4) 0; }
  .calculator-tool,
  .ad-slot {
    margin: var(--space-5) 0;
  }
  .site-footer {
    margin-top: var(--space-8);
    padding: var(--space-8) 0 var(--space-5);
  }
}

/* ═══════════════════════════════════════════
   通用工具类
   ═══════════════════════════════════════════ */
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.section-eyebrow { display: inline-block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.no-margin { margin: 0; }