/* ============================================================
   方志专题「深度剖析」文章页 —— 共享样式（15 篇共用）
   ------------------------------------------------------------
   页面：gz-<key>-deep.html，正文容器 .gz-deep
   配色一律走主题变量（--wb-*），日 / 夜 / 暖三态自适应。

   ⚠️ 暗色铁律（同 gz-classes.css）：
     ① 压深底 / 强调底的前景字用 var(--wb-on-accent)，
        别用 var(--wb-paper)（夜下它是墨黑，会变黑字压黑底）；
     ② 「深底亮字小章」用 var(--wb-chip) 配 --wb-on-accent，
        别拿 var(--wb-ink) 当底色（夜下会变浅，对比度≈1）；
     ③ 边框 / 分隔线一律 var(--wb-line)，不写死颜色。
   ============================================================ */

/* ---------- 页体 ---------- */
.wb-page-gz-deep .wb-gz-deep-wrap { padding-top: 34px; }

.gz-deep {
  max-width: 780px;
  margin: 0 auto;
}

/* ---------- 章节目录 ---------- */
.gz-deep__toc {
  margin: 0 0 42px;
  padding: 20px 22px 18px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: var(--wb-surface);
}
.gz-deep__toc-h {
  margin: 0 0 12px;
  color: var(--wb-label);
  font-family: var(--wb-pixel);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gz-deep__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gzdToc;
}
.gz-deep__toc li { counter-increment: gzdToc; }
.gz-deep__toc li + li { margin-top: 7px; }
.gz-deep__toc a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--wb-ink);
  font-size: 14.5px;
  line-height: 1.6;
  text-decoration: none;
  transition: color .15s ease;
}
.gz-deep__toc a::before {
  content: counter(gzdToc, cjk-ideographic);
  flex: 0 0 auto;
  min-width: 18px;
  color: var(--wb-accent, var(--wb-ink));
  font-size: 12px;
  font-weight: 700;
}
.gz-deep__toc a:hover { color: var(--wb-accent, var(--wb-ink)); }
.gz-deep__toc a em {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--wb-muted);
  font-family: var(--wb-pixel);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .04em;
}

/* ---------- 章 ---------- */
.gz-deep__sec { margin: 0 0 52px; scroll-margin-top: 84px; }
.gz-deep__sec:last-of-type { margin-bottom: 34px; }

.gz-deep__h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--wb-line);
  color: var(--wb-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.gz-deep__h2 em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wb-chip);
  color: var(--wb-on-accent);
  font-family: var(--wb-pixel);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0;
}

/* 章首导语（左竖线小字） */
.gz-deep__lead {
  margin: 0 0 20px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--wb-acid);
  color: var(--wb-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* ---------- 段落 ---------- */
.gz-deep__p {
  margin: 0 0 18px;
  color: var(--wb-ink);
  font-size: 16.5px;
  line-height: 1.95;
}
.gz-deep__p:last-child { margin-bottom: 0; }
.gz-deep__p b { color: var(--wb-ink); font-weight: 700; }
.gz-deep__p strong {
  background: linear-gradient(transparent 62%, var(--wb-acid-soft) 62%);
  color: var(--wb-ink);
  font-weight: 700;
}
.gz-deep__p code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--wb-paper);
  color: var(--wb-accent-deep);
  font-family: var(--wb-pixel);
  font-size: 13.5px;
}

/* 引文（志书原文 / 步哥口播感） */
.gz-deep__quote {
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--wb-line);
  border-left: 4px solid var(--wb-accent, var(--wb-ink));
  border-radius: 0 8px 8px 0;
  background: var(--wb-surface);
  color: var(--wb-ink);
  font-size: 15.5px;
  line-height: 1.9;
}
.gz-deep__quote cite {
  display: block;
  margin-top: 9px;
  color: var(--wb-muted);
  font-size: 12.5px;
  font-style: normal;
}

/* ---------- 数据图卡（由 assets/gz-deep.js 渲染） ---------- */
.gz-deep__fig {
  margin: 0 0 26px;
  padding: 20px 22px 18px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: var(--wb-surface);
}
.gz-deep__fig-h {
  margin: 0 0 4px;
  color: var(--wb-ink);
  font-size: 14.5px;
  font-weight: 700;
}
.gz-deep__fig-cap {
  margin: 0 0 16px;
  color: var(--wb-muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.gz-deep__fig-lg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  color: var(--wb-muted);
  font-size: 12px;
}
.gz-deep__fig-lg i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

/* 条形行（通用） */
.gz-deep__rows { margin: 0; padding: 0; list-style: none; }

.gz-deep__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.gz-deep__row-k {
  flex: 0 0 92px;
  color: var(--wb-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gz-deep__row-t {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
  border-radius: 7px;
  background: var(--wb-paper);
  overflow: hidden;
}
.gz-deep__row-t i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 7px;
  background: var(--wb-accent-deep);
}
.gz-deep__row-t i.is-top { background: var(--wb-acid); }
.gz-deep__row-t i.is-low { background: var(--wb-line); }
.gz-deep__row-v {
  flex: 0 0 62px;
  text-align: right;
  color: var(--wb-ink);
  font-family: var(--wb-pixel);
  font-size: 12px;
}

/* 双色对比行（如「平舆 vs 传统九部」） */
.gz-deep__row--dual .gz-deep__row-t { height: 16px; }
.gz-deep__row--dual .gz-deep__row-t i.is-a { background: var(--wb-acid); }
.gz-deep__row--dual .gz-deep__row-t i.is-a.is-low { background: var(--wb-line); }
.gz-deep__row--dual .gz-deep__row-t i.is-b { background: var(--wb-accent-deep); opacity: .55; }

/* ---------- 热力矩阵表（十门 × 十县） ---------- */
.gz-deep__mtx-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gz-deep__mtx {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 12.5px;
}
.gz-deep__mtx th,
.gz-deep__mtx td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--wb-line);
  text-align: right;
  white-space: nowrap;
}
.gz-deep__mtx th {
  color: var(--wb-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.gz-deep__mtx th.k,
.gz-deep__mtx td.k {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--wb-surface);
  color: var(--wb-ink);
  text-align: left;
  font-weight: 600;
}
.gz-deep__mtx th.avg,
.gz-deep__mtx td.avg {
  color: var(--wb-ink);
  font-weight: 700;
}
.gz-deep__mtx td.is-py,
.gz-deep__mtx th.is-py { color: var(--wb-accent-deep); }
.gz-deep__mtx td .c {
  position: relative;
  display: block;
  padding: 3px 7px;
  border-radius: 5px;
}
.gz-deep__mtx td .c::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--wb-acid);
  opacity: var(--o, .2);
}
.gz-deep__mtx td .c b {
  position: relative;
  color: var(--wb-ink);
  font-family: var(--wb-pixel);
  font-size: 11.5px;
  font-weight: 500;
}

/* ---------- 小结论块 ---------- */
.gz-deep__tag {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wb-chip);
  color: var(--wb-on-accent);
  font-family: var(--wb-pixel);
  font-size: 10px;
  letter-spacing: .1em;
}

.gz-deep__callout {
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px dashed var(--wb-line);
  border-radius: 10px;
  background: var(--wb-surface);
}
.gz-deep__callout h4 {
  margin: 0 0 8px;
  color: var(--wb-ink);
  font-size: 15px;
  font-weight: 700;
}
.gz-deep__callout p {
  margin: 0;
  color: var(--wb-muted);
  font-size: 14px;
  line-height: 1.85;
}

/* ---------- 文末：方法说明 ---------- */
.gz-deep__method {
  margin: 0 0 30px;
  padding: 20px 22px;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  background: var(--wb-paper);
}
.gz-deep__method h3 {
  margin: 0 0 10px;
  color: var(--wb-ink);
  font-size: 15px;
  font-weight: 700;
}
.gz-deep__method p {
  margin: 0 0 10px;
  color: var(--wb-muted);
  font-size: 13px;
  line-height: 1.85;
}
.gz-deep__method p:last-child { margin-bottom: 0; }
.gz-deep__method b { color: var(--wb-ink); }

/* ---------- 上一页 / 回专题 ---------- */
.gz-deep__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
}
.gz-deep__nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--wb-ink);
  border-radius: 8px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--wb-ink);
  transition: transform .15s ease, background .15s ease;
}
.gz-deep__nav a:hover { transform: translate(-1px, -1px); }
.gz-deep__nav a.is-primary {
  background: var(--wb-acid);
  color: var(--wb-on-acid, #0d0f0a);
}

/* ============================================================
   专题页 → 深度剖析 的入口卡（放在专题页正文之后）
   15 个专题页共用；样式随本文件一起被专题页引用。
   ============================================================ */
.gz-deep-entry__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--wb-ink);
  border-radius: 10px;
  background: var(--wb-surface);
  box-shadow: 5px 5px 0 var(--wb-ink);
  text-decoration: none;
  transition: transform .15s ease;
}
.gz-deep-entry__card:hover { transform: translate(-2px, -2px); }

.gz-deep-entry__badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--wb-chip);
  color: var(--wb-on-accent);
  font-family: var(--wb-pixel);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
}

.gz-deep-entry__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gz-deep-entry__t {
  color: var(--wb-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.gz-deep-entry__d {
  color: var(--wb-muted);
  font-size: 13px;
  line-height: 1.75;
}

.gz-deep-entry__go {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  color: var(--wb-accent-deep);
  font-family: var(--wb-pixel);
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .gz-deep-entry__card {
    flex-wrap: wrap;
    gap: 12px;
    padding: 17px 16px;
    box-shadow: 4px 4px 0 var(--wb-ink);
  }
  .gz-deep-entry__t { font-size: 15.5px; }
  .gz-deep-entry__go { margin-left: 0; padding-left: 0; }
}

/* 竖排分隔线（专题头 eyebrow 用，与专题页 .gz-cls-sep 同款） */
.gz-deep-sep {
  display: inline-block;
  width: 1px;
  height: .95em;
  margin: 0 9px;
  vertical-align: -.12em;
  background: color-mix(in srgb, var(--wb-ink) 32%, transparent);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .wb-page-gz-deep .wb-gz-deep-wrap { padding-top: 24px; }
  .gz-deep__sec { margin-bottom: 40px; }
  .gz-deep__h2 { font-size: 19px; }
  .gz-deep__h2 em { width: 28px; height: 28px; font-size: 11.5px; }
  .gz-deep__p { font-size: 15.5px; line-height: 1.9; }
  .gz-deep__fig { padding: 16px 15px 14px; }
  .gz-deep__row-k { flex-basis: 76px; font-size: 12.5px; }
  .gz-deep__row-v { flex-basis: 54px; font-size: 11.5px; }
  .gz-deep__toc { padding: 16px 16px 14px; }
  .gz-deep__quote { padding: 14px 15px; }
}

/* 窄屏：双色对比行的读值列改窄 */
@media (max-width: 480px) {
  .gz-deep__row { gap: 7px; }
  .gz-deep__row-k { flex-basis: 64px; }
}


/* ============================================================
   2026-10-14 深度剖析长文：文章式头部 + 目录吸顶 + 阅读进度
   ------------------------------------------------------------
   整节追加；@media 一律排在本节最末。
   ============================================================ */

/* 顶部阅读进度条（由 assets/gz-deep.js 注入） */
.gz-deep__prog {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 0;
  height: 3px;
  background: var(--wb-acid);
  pointer-events: none;
}

/* 目录里的「字数 ･ 阅读时长」（JS 注入） */
.gz-deep__toc-meta {
  margin: 0 0 12px;
  color: var(--wb-muted);
  font-family: var(--wb-pixel);
  font-size: 10.5px;
  letter-spacing: .04em;
}

/* 目录当前章高亮 */
.gz-deep__toc li { position: relative; }
.gz-deep__toc li.is-on > a { color: var(--wb-accent-deep); font-weight: 700; }
.gz-deep__toc li.is-on > a em { color: var(--wb-accent-deep); opacity: 1; }
.gz-deep__toc li.is-on::before {
  content: '';
  position: absolute;
  left: -11px;
  top: .45em;
  width: 3px;
  height: .95em;
  background: var(--wb-acid);
}

/* 深度页与专题页区分：标题再大一档（专题页是栏目页，这里是一篇长文） */
body.wb-page-gz-deep .wb-topic h1 { font-size: clamp(36px, 4.8vw, 58px); }

/* 宽屏：目录从「正文顶部的一块」升为「左侧常驻栏」
   左侧 212px 目录 + 40px 间隙 + 780px 正文 = 1032px，与原先正文测量宽度一致（不改变行宽）。 */
@media (min-width: 1160px) {
  .gz-deep {
    max-width: 1032px;
    display: grid;
    grid-template-columns: 212px minmax(0, 780px);
    column-gap: 40px;
    align-items: start;
  }
  .gz-deep > .gz-deep__toc {
    grid-column: 1;
    grid-row: 1 / span 200;
    align-self: start;
    position: sticky;
    top: 92px;
    margin: 0;
    padding: 16px 16px 14px;
  }
  .gz-deep > *:not(.gz-deep__toc) { grid-column: 2; }
  .gz-deep__toc a { gap: 8px; font-size: 13px; }
  .gz-deep__toc a em { display: none; }
  .gz-deep__toc-h { margin-bottom: 10px; font-size: 10px; }
}