/* ==========================================================================
   ZRG 地域文化库 · 前端样式表（多端：PC / 移动 H5 / 小程序嵌入）
   设计令牌与多端映射规则见 docs/DESIGN.md —— 改样式前先读它。

   三条铁律（违反会导致夜间模式漏光或"AI 生成感"）：
  1) 颜色只允许来自 zibll 主题变量，或用 currentColor 派生；
      禁止裸写色值，否则夜间模式漏白/刺眼，且改主题色时不会跟随。
      唯一例外：令牌 --zrg-on-accent（强调色底上的文字），已在令牌区声明。
   2) 不在卡片单侧加粗色边（border-left: 2px solid <亮色>）——
      这是最容易识别出"AI 生成 UI"的特征。
   3) 动效只用 transform / opacity，并尊重 prefers-reduced-motion。

   ⚠️ 变量名必须用主题「真实定义」的（曾踩坑：旧样式写 --main-bg，主题根本没这个变量，
      一直走兜底值 → 夜间模式卡片全白）：
        --theme-color        主题强调色（本站 #f04494）
        --main-bg-color      卡片/盒子背景（日 #fff / 夜 #323335）★ 不是 --main-bg
        --muted-bg-color     次级填充（日 #eee / 夜 #2d2e31）
        --main-color         正文色
        --muted-color        次要文字
        --main-border-color  描边
      夜间模式通过 body.dark-theme 覆盖这些变量，因此本文件不写任何夜间专用规则。

   类名清单由 templates/ 实际使用情况确定（66 个），新增类名前先查用。
   ========================================================================== */

/* --------------------------------------------------------------------------
   L1 语义令牌：把 zibll 主题变量收敛成 --zrg-* 一层。
   兜底值用 currentColor 派生（而不是 #fff），因此夜间模式自动跟随。

   ⚠️ 必须声明在 body（不是只在 :root）：
   子比主题把这批变量定义在 body 上（body / body.dark-theme），
   而 CSS 自定义属性只向下继承 —— 写在 :root 上读 var(--main-bg-color)
   会取到空值，从而永远走兜底值。实测踩过，别改回去。
   -------------------------------------------------------------------------- */
:root,
body {
  --zrg-accent:        var(--theme-color, currentColor);
  --zrg-accent-weak:   color-mix(in oklab, var(--theme-color, currentColor) 12%, transparent);
  --zrg-surface:       var(--main-bg-color, color-mix(in oklab, currentColor 4%, transparent));
  --zrg-surface-2:     var(--muted-bg-color, color-mix(in oklab, currentColor 6%, transparent));
  --zrg-border:        var(--main-border-color, color-mix(in oklab, currentColor 15%, transparent));
  --zrg-text:          var(--main-color, inherit);
  --zrg-muted:         var(--muted-color, color-mix(in oklab, currentColor 62%, transparent));
  --zrg-tint:          var(--muted-bg-color, color-mix(in oklab, currentColor 5%, transparent));
  --zrg-tint-strong:   color-mix(in oklab, currentColor 10%, transparent);
  /* 版本时间轴「历史节点」的点色（站长 2026-09-29：历史节点也要有颜色的点，
     但必须与最新一版区分开）。改这一个变量即可换色；备选见下方注释。
     亮/暗主题都可读的中性蓝；备选：青 #4f9d8e / 金 #bf9a3a / 石墨 #6b7280 */
  --zrg-dot-past:      #6f8fc4;
  --zrg-shadow-hover:  0 6px 18px color-mix(in oklab, currentColor 13%, transparent);
  --zrg-radius:        10px;
  --zrg-radius-sm:     8px;
  --zrg-gap:           16px;
  --zrg-ease:          cubic-bezier(.2, .7, .2, 1);
  --zrg-on-accent:     #fff; /* 唯一允许的裸色：强调色底上的文字，与夜间模式无关 */
}

/* --------------------------------------------------------------------------
   页面骨架
   -------------------------------------------------------------------------- */
.zrg-page {
  /* 上内距 0：对齐子比 main.container（实测其 padding-top 为 0，页面留白由容器外边距给）。
     曾经是 28px —— 那会让面包屑比子比文章页低 28px（实测 116 vs 88，用户反馈"高度不一样"）。
     下内距 48 → 0：站长 2026-10-02「要和 ZBP 插件一样和 footer 距离」。
     ZBP 书库页实测「页面下内距 = 0」，末块到 footer 那 20px 来自 .zrg-article
     自身的 margin-bottom（ZRG 侧同样有这一层），不是页面内距。 */
  padding-block: 0;
  color: var(--zrg-text);
}

.zrg-section {
  margin-top: 18px;
}

.zrg-section > .box-title,
.zrg-section > h2,
.zrg-section > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.zrg-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-muted {
  color: var(--zrg-muted);
}

.zrg-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--zrg-muted);
  border: 1px dashed var(--zrg-border);
  border-radius: var(--zrg-radius);
}

/* --------------------------------------------------------------------------
   通用卡片与网格
   网格用 min(<min>, 100%) 防止窄屏溢出——这是移动端最常见的横向滚动来源。
   -------------------------------------------------------------------------- */
.zrg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--zrg-gap);
}

.zrg-card {
  padding: 18px;
  background: var(--zrg-surface);
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius);
}

.zrg-card h2,
.zrg-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
}

.zrg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--zrg-muted);
}

/* --------------------------------------------------------------------------
   数据表（基础信息 / 古称）
   -------------------------------------------------------------------------- */
.zrg-table {
  width: 100%;
  border-collapse: collapse;
}

.zrg-table th,
.zrg-table td {
  padding: 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--zrg-border);
}

.zrg-table tr:last-child td {
  border-bottom: 0;
}

/* 首列是「类型」（古称/曾用名/别名）：必须 nowrap，否则会被挤到逐字竖排
   （实测：列宽不足时「古称」两个字上下堆叠）。 */
.zrg-table td:first-child {
  white-space: nowrap;
  padding-right: 14px;
}

/* 表内的来源标注要比正文小一号，否则每行都被长引用撑高、压过正文。 */
.zrg-table .zrg-muted {
  font-size: 12px;
  line-height: 1.6;
}

/* ---- 古称/曾用名：每条目一块 ----
   层级三手段：类型小角标 / 名称加重 / 时期右对齐（区间整段不折行）。
   来源若各条共用同一出处，则只在区块末尾出现一次（见 .zrg-names-footnote）。 */
.zrg-names-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--zrg-border);
}

.zrg-names-item:first-child {
  padding-top: 2px;
}

.zrg-names-item:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.zrg-names-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 类型角标：严格照主题 .badg 的实测配方 ——
   padding 1px 8px / radius 4px / 12px / 10% 半透明底色 + 同色文字 / 无可见描边。
   （实测主题「共 16 个」角标：12px、padding 1px 8px、radius 4px、bg 10% 透明、border 透明。）
   用主题色而不是中性灰：整块原本太灰，角标是唯一能上色又不喧哗的位置，
   且与章节标题的粉色竖条同一色源。 */
.zrg-names-type {
  flex: none;
  padding: 1px 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--theme-color) 10%, transparent);
  font-size: 12px;
  line-height: 1.7;
  color: var(--theme-color);
}

/* 类型为空时不渲染空壳角标（否则会剩一个空底色块） */
.zrg-names-type:empty {
  display: none;
}

.zrg-names-text {
  font-size: 17px;
  font-weight: 600;
}

/* 时期紧跟名称之后，不走两端对齐 —— 名称多为 1~2 字，右对齐会在中间留出大片空洞
   （实测「别名 范阳 ……………… 唐」看着是散的）。 */
.zrg-names-period {
  flex: none;
  white-space: nowrap;
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-names-desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
}

.zrg-names-src {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--zrg-muted);
}

/* 共用来源：整块只出现一次，压在区块末尾 */
.zrg-names-footnote {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--zrg-border);
  font-size: 12px;
  line-height: 1.7;
  color: var(--zrg-muted);
}

/* --------------------------------------------------------------------------
   古籍卡片：访问状态角标 + 区块底部转化位
   漏斗分工「地名做量、古籍变现」：地名页全免费做收录，古籍区块是收银台。
   角标必须让人一眼看出"哪些要会员"，但**不能遮住内容**（内容本身也是索引资产）。
   -------------------------------------------------------------------------- */
.zrg-books-grid .zrg-book-cover {
  position: relative;
}

.zrg-book-access {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 1px 8px;               /* 与主题 .badg 同一套尺寸配方 */
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.7;
  background: color-mix(in oklab, var(--zrg-muted) 12%, var(--main-bg-color));
  color: var(--zrg-muted);
}

/* 需会员：用主题色点出来（这是唯一的"要付费"提示，不夸张） */
.zrg-book-access--vip {
  background: color-mix(in oklab, var(--theme-color) 12%, var(--main-bg-color));
  color: var(--theme-color);
}

.zrg-books-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--mini-radius);
  background: color-mix(in oklab, var(--theme-color) 4%, transparent);
}

.zrg-books-cta-text {
  font-size: 14px;
  line-height: 1.7;
}

.zrg-books-cta-text > i {
  margin-right: 4px;
  color: var(--theme-color);
}

.zrg-books-cta-text b {
  font-weight: 600;
}

.zrg-books-cta-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.zrg-books-cta-actions .but {
  margin: 0;
}

/* 手机：排不下「名称 —— 时期」两端对齐，时期单独一行；此时允许折行 */
@media (max-width: 767px) {
  .zrg-names-period {
    margin-left: 0;
    width: 100%;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   历史沿革时间线
   原来是 border-left:2px solid 亮色 —— 检测器判定为 AI 生成感特征，
   改为中性细轨 + 强调色圆点，层级不变但不再"贴边发亮"。
   -------------------------------------------------------------------------- */
.zrg-timeline {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--zrg-border);
}

.zrg-event {
  position: relative;
  margin: 0 0 18px;
}

.zrg-event:last-child {
  margin-bottom: 0;
}

.zrg-event::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zrg-accent);
  box-shadow: 0 0 0 3px var(--zrg-surface);
}

.zrg-event-title,
.zrg-event h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   面包屑 / 分页
   -------------------------------------------------------------------------- */
/* 面包屑：**对齐子比原生的 .breadcrumb 规格**（主题 css/main.css）。
   原生规格：background:transparent / padding:0 8px / opacity:.6 / margin-bottom:12px / font-size:12px，
   分隔符由 `> li + li:before` 出（Bootstrap 的 "/"，padding-left:6px）。
   这里逐条对齐，让 ZRG 全部 8 处面包屑与主题文章页的面包屑看起来是同一个东西。
   ⚠️ 别再加自己的字号/间距；要改就改这里，且先量一遍主题的 main.css。 */
.zrg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;                 /* 斜杠是模板里的字面文本，间距由 gap 出（原生是 6px） */
  padding: 0 8px;
  margin-bottom: 12px;
  background: transparent;
  opacity: .6;
  color: var(--main-color);
}


.zrg-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.zrg-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  color: var(--zrg-text);
  text-decoration: none;
  transition: border-color .18s var(--zrg-ease), color .18s var(--zrg-ease);
}

.zrg-pagination a:hover,
.zrg-pagination a:focus-visible {
  border-color: var(--zrg-accent);
  color: var(--zrg-accent);
}

.zrg-pagination a.active {
  border-color: var(--zrg-accent);
  background: var(--zrg-accent-weak);
  color: var(--zrg-accent);
  font-weight: 700;
}

.zrg-page-gap,
.zrg-page-info {
  font-size: 13px;
  color: var(--zrg-muted);
}

/* --------------------------------------------------------------------------
   标签页（类型筛选 / 文化分类）
   窄屏改为横向滚动而不是折行——折行会把标题挤到无规律的位置。
   -------------------------------------------------------------------------- */
.zrg-tabs,
.zrg-type-tabs {
  display: flex;
  gap: 10px;
  margin: 16px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.zrg-tabs::-webkit-scrollbar {
  height: 0;
}

.zrg-tab {
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--zrg-tint);
  color: var(--zrg-muted);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--zrg-ease), color .18s var(--zrg-ease);
}

.zrg-tab:hover,
.zrg-tab:focus-visible {
  background: var(--zrg-tint-strong);
  color: var(--zrg-text);
}

.zrg-tab.active {
  background: var(--zrg-accent);
  color: var(--zrg-on-accent);
}

/* --------------------------------------------------------------------------
   搜索（表单 / 高级筛选 / 建议）
   -------------------------------------------------------------------------- */
.zrg-search {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}

.zrg-search input {
  flex: 1;
  min-width: 0;
}

.zrg-search-form {
  margin-bottom: 12px;
}

.zrg-search-advanced {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  background: var(--zrg-tint);
}

.zrg-search-advanced label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-search-advanced select {
  padding: 4px 8px;
  border-radius: 6px;
}

.zrg-search-advanced .zrg-checkbox {
  gap: 4px;
}

.zrg-reset {
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-search-locked {
  padding: 12px 14px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  background: var(--zrg-tint);
  color: var(--zrg-muted);
  font-size: 13px;
}

.zrg-suggest {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zrg-suggest-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--zrg-border);
}

.zrg-suggest-item:last-child {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   地域列表（按层级分组）/ 下级网格 / 同级网格
   -------------------------------------------------------------------------- */
/* ⚠️ 这里**不能**用 grid：.zrg-region-list 的子元素是**每个层级一个 section**
   （省级 / 地市级 / 县级 / 乡级）。一旦按 160px 分列，区块就被压成并排窄栏 ——
   实测「县级 16 条」会把那一栏拉得老长、旁边三栏几乎空着，目录看着很乱。
   现在：层级区块一律**整行堆叠**，条目在各自区块内横向分列（见 .zrg-samename-list）。 */
.zrg-region-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zrg-level-group {
  margin-bottom: 22px;
}

.zrg-region-link {
  color: var(--zrg-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--zrg-ease), border-color .18s var(--zrg-ease);
}

.zrg-region-link:hover,
.zrg-region-link:focus-visible {
  color: var(--zrg-accent);
  border-bottom-color: var(--zrg-accent);
}

/* --------------------------------------------------------------------------
   同名地名
   -------------------------------------------------------------------------- */
.zrg-samename-list {
  display: grid;
  /* 条目在层级区块内横向铺开（桌面约 4 列），不再一条一行堆到底 */
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 10px var(--zrg-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.zrg-samename-item {
  /* relative —— 供下方 .zrg-samename-name::after 铺满整卡（stretched link） */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 12px 14px;
  background: var(--zrg-surface);
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  transition: border-color .2s var(--zrg-ease);
}

/* 整张卡可点：<a> 只包住地名文字，行政代码 / 提示都在链接之外，
   故用 ::after 把链接热区铺满整卡 —— 点卡片任意位置都进入该地域。
   搜索页与同名地名页共用本组件，两处一起生效。 */
.zrg-samename-name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.zrg-samename-item:hover {
  border-color: var(--zrg-accent);
}

.zrg-samename-name {
  font-weight: 600;
}

.zrg-samename-code {
  font-size: 12px;
  color: var(--zrg-muted);
  font-variant-numeric: tabular-nums;
}

.zrg-samename-hint,
.zrg-samename-more {
  font-size: 13px;
  color: var(--zrg-muted);
}

/* --------------------------------------------------------------------------
   关联古籍（ZPB 联动）
   -------------------------------------------------------------------------- */
.zrg-books .title-theme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.zrg-books-grid {
  display: grid;
  /* 2026-09-22 统一：列宽下限 150→200px，与地名页词条卡 .zrg-content-grid 完全同宽。
     地名页「本地历代方志」的 5 列编号分页是更具体的规则，不受此处影响。 */
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--zrg-gap);
  margin-top: 14px;
}

.zrg-book {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zrg-surface);
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius);
  color: var(--zrg-text);
  text-decoration: none;
  transition: transform .2s var(--zrg-ease), box-shadow .2s var(--zrg-ease);
}

.zrg-book:hover,
.zrg-book:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--zrg-shadow-hover);
}

/* 封面裁剪方式：**照搬 ZPB 资源页**（.zpb-res-cover），不用 object-fit。
   ZPB 的做法是「容器固定尺寸 + overflow:hidden，图片 height:100%; width:auto;
   max-width:none」，图片按原始比例铺满高度、**从左边开始排**，右侧超出部分被裁掉
   —— 所以古籍封面只露左侧，与资源页视觉一致。
   若改用 object-fit:cover（默认居中裁剪），溢出的封面会露出中间、两侧被削，
   与被扫描古籍封面的实际信息位置不符（用户指出过）。 */
.zrg-book-cover {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--zrg-tint);
}

.zrg-book-cover img,
.zrg-book-cover .linebook-cover {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* 纯 CSS 生成的封面（无图）仍铺满容器，否则会只剩一条竖边 */
.zrg-book-cover .linebook-cover {
  width: 100%;
  height: 100%;
}

.zrg-book-body {
  padding: 10px 12px;
}

.zrg-book-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.zrg-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-books-more {
  margin-top: 12px;
  font-size: 13px;
}

/* 祖先回退说明（本级无数据、显示上级时）。要低调，但必须在标题下方紧邻出现，
   否则用户会把上级的数据误当成本级的。方志区块与词条频道共用这套样式。 */
.zrg-books-src,
.zrg-list-src {
  margin: -2px 0 12px;
  font-size: 12px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   文化 / 特产词条
   -------------------------------------------------------------------------- */
.zrg-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--zrg-gap);
  margin-top: 14px;
}

.zrg-content-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zrg-surface);
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius);
  color: var(--zrg-text);
  text-decoration: none;
  transition: transform .2s var(--zrg-ease), box-shadow .2s var(--zrg-ease);
}

.zrg-content-card:hover,
.zrg-content-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--zrg-shadow-hover);
}

.zrg-content-cover {
  position: relative;
  /* 别用 flex 居中：图比画框高时会把溢出居中，等价于居中裁剪。
     占位图标改用绝对定位单独居中（见下一条）。 */
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zrg-tint);
}

.zrg-content-cover img {
  /* 按画框宽度等比缩放，超高部分从**下**裁掉（顶端对齐）；
     不写 object-fit（默认居中裁剪）——与 ZPB 书封"靠左裁右"同一约定。 */
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.zrg-content-cover .fa {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px;
  color: var(--zrg-accent);
  opacity: .7;
}

.zrg-content-badge {
  position: absolute;
  left: 8px;
  top: 8px;
}

.zrg-content-body {
  padding: 10px 12px;
}

.zrg-content-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.zrg-content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.zrg-content-excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--zrg-muted);
}

.zrg-content-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  font-size: 13px;
}

.zrg-content-hero {
  margin: 14px 0;
  border-radius: var(--zrg-radius-sm);
  overflow: hidden;
}

.zrg-content-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.zrg-region-contents .box-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.zrg-region-contents .zrg-more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
}

.zrg-related {
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   付费墙 / 会员权益 / 额度提示
   结构沿用 zibll 按钮类（如 but jb-blue），本文件只负责容器与信息层级。
   -------------------------------------------------------------------------- */
.zrg-paywall {
  margin-top: 24px;
}

.zrg-paywall-card {
  padding: 24px;
  background: var(--zrg-surface);
  border: 1px solid var(--zrg-border);
  border-radius: 12px;
}

.zrg-paywall-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.zrg-paywall-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--zrg-accent-weak);
  color: var(--zrg-accent);
  font-size: 12px;
  font-weight: 600;
}

.zrg-paywall-price {
  color: var(--zrg-accent);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.zrg-paywall-title {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--zrg-text);
}

.zrg-paywall-features {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
  color: var(--zrg-muted);
}

.zrg-paywall-features li {
  position: relative;
  padding-left: 18px;
}

.zrg-paywall-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zrg-accent);
}

.zrg-paywall-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zrg-paywall-btn,
.zrg-points-pay-btn,
.zrg-pack-points-btn {
  width: 100%;
}

.zrg-pay-form {
  margin: 0;
}

.zrg-pay-form .dependency-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zrg-quota-notice {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  background: var(--zrg-tint);
  color: var(--zrg-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   省份数据包 / 导出
   数据包页复用 .zrg-paywall-* 容器；这里只加「字段清单」与「导出入口」。
   -------------------------------------------------------------------------- */
.zrg-pack-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.zrg-pack-field {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--zrg-tint);
  color: var(--zrg-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.zrg-export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.zrg-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zrg-export-limit {
  font-size: 13px;
  color: var(--zrg-muted);
}

/* --------------------------------------------------------------------------
   无障碍：可见焦点环（不能只靠浏览器默认，主题常把它抹掉）
   -------------------------------------------------------------------------- */
.zrg-page :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.zrg-paywall :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--zrg-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   多端断点
   720px 以下为移动端主场景（微信内置浏览器 / 手机 Chrome）。
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .zrg-page {
    /* 手机端下内距同样对齐 ZBP（32 → 0） */
    padding-block: 18px 0;
  }

  .zrg-card {
    padding: 15px;
  }

  .zrg-paywall-card {
    padding: 18px;
  }

  .zrg-content-grid,
  .zrg-books-grid {
    gap: 12px;
  }

  .zrg-region-contents .zrg-more {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .zrg-search {
    flex-wrap: wrap;
  }

  .zrg-search input {
    flex-basis: 100%;
  }

  .zrg-search > button,
  .zrg-search > .but {
    flex: 1;
  }

  .zrg-grid,
  .zrg-content-grid,
  .zrg-books-grid {
    grid-template-columns: 1fr;
  }

  /* 数据表在极窄屏允许横向滚动，避免把页面撑宽 */
  .zrg-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .zrg-samename-item {
    padding: 10px 12px;
  }

  /* 导出按钮移动端占满整行（触屏热区） */
  .zrg-export-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 触屏设备：可见性更高的点击态（:hover 在触屏上是粘住的） */
@media (hover: none) {
  .zrg-book:hover,
  .zrg-content-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   降低动效（无障碍：前庭敏感用户）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .zrg-page *,
  .zrg-paywall * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .zrg-book:hover,
  .zrg-book:focus-visible,
  .zrg-content-card:hover,
  .zrg-content-card:focus-visible,
  .zrg-card:hover,
  .zrg-card:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   视觉层（2026-09-13 v3 · 子比文章模式）
   —— 前两版的错误：
        v1：自造视觉语言（衬线标题 / 自绘强调条 / 胶囊）→ 与主题冲突
        v2：把每个章节做成独立 .zib-widget → 一页十几张等权重白卡，又丑又乱
      v3：回到子比自己的**文章模式** —— 一页一整块内容面板，章节靠发丝线分隔，
         卡片只留给侧栏。所有规格取自主题实测值（见 docs/DESIGN.md §10）。

   实测依据（无头 Chrome，勿凭感觉改）：
     内容面板  .main-bg + .box-body（padding 20px）+ .radius8（radius 8px）+ 主题投影
     h1        无衬线 22px / 700 / 行高 1.4
     卡片标题   .zib-widget > h3：15px / 500 + 40×3px 强调条（bottom:3px, radius 5px, 主题色+微光）
     正文       16px / 400 / 行高 2.0
     角标/按钮  .badg / .but：radius 4px + --this-* 变量
     --main-radius 8px ；--mini-radius calc(8px/1.4) ；--main-shadow rgba(116,116,116,.08)
   ========================================================================== */

/* --------------------------------------------------------------------------
   一页一块：章节之间只用一条发丝线，不再各自成卡
   -------------------------------------------------------------------------- */
.zrg-page .zrg-section {
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid var(--main-border-color);
}

.zrg-page .zrg-section:first-of-type,
.zrg-page .zrg-hero + .zrg-section {
  padding-top: 0;
  border-top: 0;
}

/* 章节标题：规格取自主题正文 h3（.wp-posts-content h3 = 18px/700）
   强调条规则主题自有（.wp-posts-content>h3:before 与 .zib-widget>h3:before 同组），
   本插件章节不在 .wp-posts-content 内，故按同款数值复刻。 */
.zrg-page .zrg-section > h3,
.zrg-page .zrg-section > h2 {
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 0 13px;
  border: 0;
  background: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--main-color);
}

/* 强调条改为左侧竖条：原先的下置横条位置取决于字号与字体度量，
   在不同浏览器/字体下会贴到甚至压住字形（实测被用户指出错位）。
   竖条与字形高度无关，物理上不可能压字；高度用 em 跟随字号。 */
.zrg-page .zrg-section > h3::before,
.zrg-page .zrg-section > h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.05em;
  margin-top: -.525em;
  border-radius: 2px;
  background: var(--theme-color);
}

/* 计数角标用主题 .badg 的文本形态（4px 圆角），不用自造胶囊。
   行高收紧到 1.6 并与标题行居中对齐 —— 原先 1.9 会让角标盒比文字盒更低，
   与标题并排时看起来像"掉下去了"。 */
.zrg-page .zrg-section .badg.zrg-badg-text {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   标题区（hero）：与主题 h1 同规格；关键数字改成一行紧凑数据带
   -------------------------------------------------------------------------- */
.zrg-hero {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--main-border-color);
}

.zrg-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.zrg-hero-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--main-color);
}

.zrg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--muted-color);
}

.zrg-hero-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* 关键数字：一条数据带（竖线分隔），不再是几个空荡的大方块 */
.zrg-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 14px;
}

.zrg-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 18px;
  border-left: 1px solid var(--main-border-color);
}

.zrg-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.zrg-stat-num {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--main-color);
}

.zrg-stat-label {
  font-size: 13px;
  color: var(--muted-color);
}

/* --------------------------------------------------------------------------
   基础信息：轻量键值行（去掉方框网格，只剩发丝线行）
   -------------------------------------------------------------------------- */
.zrg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 0 28px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.zrg-fact {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  background: none;
  border-bottom: 1px solid var(--main-border-color);
}

.zrg-fact-label {
  flex: 0 0 4.6em;
  margin: 0;
  font-size: 13px;
  color: var(--muted-color);
}

.zrg-fact-value {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--main-color);
  word-break: break-word;
}

.zrg-fact-provenance .zrg-fact-value {
  font-size: 13px;
  color: var(--muted-color);
  /* 「来源」常并列多个出处（实测最长 6 行，把这一格撑得极高、整行都被带偏）：
     限制最多两行，超出用省略号收尾；完整内容挂在 title 上，悬停可看全文。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   卡片式链接（下级地区 / 同级地名）：白面板内用浅底色 chip，不再叠加白底描边
   -------------------------------------------------------------------------- */
.zrg-page .zrg-grid {
  /* 用令牌而不是写死数值：留白节奏统一由 L7「留白节奏」段控制（曾写死 8px，
     导致 L7 里改 --zrg-gap 对本网格完全无效）。 */
  gap: var(--zrg-gap);
}

/* --------------------------------------------------------------------------
   下级地区 / 同级地名：紧凑瓦片
   原来用 minmax(220px) 的浅灰大块，每块 340×135 只放两个词 —— 空得发虚。
   现在：单行 + 发丝描边 + 悬停抬升（方案 B 的「瓦片悬停抬升」）。
   ⚠️ 选择器必须带 .zrg-grid--tiles：文件里另有两处同名的 .zrg-card 规则
      （一处给了 min-height:58px + 透明边框，L7 留白层给了 padding:20px / h3 margin-bottom:12px），
      只写 .zrg-page .zrg-card 会被它们反压 → 实测瓦片高 77px、悬停失效。
   -------------------------------------------------------------------------- */
.zrg-page .zrg-grid--tiles {
  /* 比默认 220px 窄得多，桌面一行 4 张、手机自动 2 张；
     用 min() 兜底，窄屏不会因为 158px 最小宽而横向溢出。 */
  grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
}

.zrg-page .zrg-grid--tiles .zrg-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* 副标签较长时折到下一行，不挤压名称 */
  gap: 6px;
  min-height: 0;                /* 覆盖另一层的 min-height:58px */
  padding: 12px 14px;           /* 覆盖 L7 留白层的 padding:20px */
  background: transparent;
  border: 1px solid var(--zrg-border);
  border-radius: var(--mini-radius);
  text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .15s;
}

.zrg-page .zrg-grid--tiles .zrg-card h3 {
  flex: 1 1 auto;
  margin: 0;                    /* 覆盖 L7 的 margin-bottom:12px */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--main-color);
  overflow-wrap: anywhere;
}

/* 层级不统一时才出现的逐块标注 */
.zrg-page .zrg-grid--tiles .zrg-card > .zrg-muted,
.zrg-page .zrg-grid--tiles .zrg-card > .zrg-meta {
  flex: none;
  font-size: 12px;
}

/* 右端箭头：默认极弱（只作可点提示），悬停时亮成主题色并右移 2px */
.zrg-page .zrg-grid--tiles .zrg-card-arrow {
  flex: none;
  margin-left: auto;            /* 折行时也把箭头留在同一行的右端 */
  font-size: 13px;
  color: color-mix(in oklab, var(--zrg-muted) 55%, transparent);
  transition: color .15s, transform .15s;
}

.zrg-page .zrg-grid--tiles .zrg-card:hover,
.zrg-page .zrg-grid--tiles .zrg-card:focus-visible {
  background: color-mix(in oklab, var(--theme-color) 5%, transparent);
  border-color: color-mix(in oklab, var(--theme-color) 40%, var(--zrg-border));
  transform: translateY(-1px);
}

.zrg-page .zrg-grid--tiles .zrg-card:hover h3,
.zrg-page .zrg-grid--tiles .zrg-card:focus-visible h3 {
  color: var(--theme-color);
}

.zrg-page .zrg-grid--tiles .zrg-card:hover .zrg-card-arrow,
.zrg-page .zrg-grid--tiles .zrg-card:focus-visible .zrg-card-arrow {
  color: var(--theme-color);
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   付费墙 / 额度提示：压扁（原实现 350px 高，横插在正文中间）
   要点：特性列表改为行内排布、按钮改为横排、去掉圆点与全宽按钮
   -------------------------------------------------------------------------- */
.zrg-page .zrg-paywall {
  margin-top: 0;
}

.zrg-page .zrg-paywall-card {
  padding: 16px 18px;
  background: var(--muted-bg-color);
  border: 0;
  border-radius: var(--mini-radius);
}

.zrg-paywall-head {
  margin-bottom: 8px;
}

.zrg-paywall-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
}

.zrg-paywall-features {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted-color);
}

.zrg-paywall-features li {
  padding-left: 0;
}

.zrg-paywall-features li::before {
  display: none;
}

.zrg-paywall-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.zrg-paywall-btn,
.zrg-points-pay-btn {
  width: auto;
}

.zrg-quota-notice {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   桌面双栏：左侧一整块内容面板 + 右侧 widget 卡（子比文章页的标准结构）
   -------------------------------------------------------------------------- */
.zrg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.zrg-article,
.zrg-main {
  min-width: 0;
}

.zrg-aside {
  display: grid;
  /* 显式列定义：缺了它，grid 的隐含列按「最大内容宽度」计算，
     长书名这类 nowrap 文本会把轨道顶宽（实测 326 容器 → 341 轨道 → 卡片溢出）。
     主布局 .zrg-layout 一直有这条，侧栏当初漏了。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-content: start;
}
/* 作为 .zrg-layout 的网格项，默认 min-width:auto 会被内部 nowrap 文本（如长书名）
   撑开整条轨道 —— 侧栏实测被撑到 450px、主栏被挤窄。必须显式归零。
   （.zrg-main 早有这一条，侧栏当初漏了。） */
.zrg-aside {
  min-width: 0;
}

@media (min-width: 1024px) {
  .zrg-layout {
    /* 数值照抄子比文章页（实测 .sidebar 宽 311、间隙 15 → 主栏 844）：
       .content-layout { margin-right: calc(311px + 15px) }
       改这里就等于改"主栏多宽"，别随手调。 */
    grid-template-columns: minmax(0, 1fr) 311px;
    gap: 15px;
  }

  .zrg-aside {
    /* 不吸附（用户明确要求"不要跟着内容走"）：侧栏随页面一起滚走。
       ⚠️ 这里曾经长期写着 position:sticky 但其实从未生效 —— 网格子项默认 stretch，
       侧栏被拉成与主栏等高（实测 7276px），sticky 没有可移动余量。
       别再把它加回去，也不要指望用它来"修"左长右短。
       align-self:start 保留：让侧栏盒子等于自身内容高度，而不是撑满整列。 */
    align-self: start;
    position: static;
    /* 与左侧面板对齐（用户：「这里要跟上对齐，和左边卡片一样」）：
       左侧是出血面板，贴齐卡片的上/右边缘（实测上 536、右 1298）；
       而侧栏首卡原本在上 551、右 1283，上/右各差 15px（= 主题 .zib-widget 内距）。
       用负偏移补齐 → 首卡与左侧面板同一条顶线、右缘也贴齐。
       ⚠️ 若以后改主题面板内距或头部区内距，这里的 15px 要跟着改。 */
    margin-top: -15px;
    margin-right: -15px;
  }
}

.zrg-aside-card h3 {
  margin: 0 0 12px;
}

.zrg-aside-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.zrg-aside-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.zrg-aside-list .zrg-aside-k {
  font-size: 13px;
  color: var(--muted-color);
  white-space: nowrap;
}

.zrg-aside-list .zrg-aside-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--main-color);
}

.zrg-aside-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted-color);
}

.zrg-aside-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.zrg-aside-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--main-color);
  text-decoration: none;
}

.zrg-aside-links a:hover,
.zrg-aside-links a:focus-visible {
  color: var(--theme-color);
}

.zrg-aside-links .fa {
  color: var(--theme-color);
  font-size: 12px;
}

/* 条数角标：靠右对齐（.zrg-aside-links a 本身已是 flex 行）。 */
.zrg-aside-links .zrg-aside-count {
  margin-left: auto;
  flex: none;
  padding: 1px 8px;
  border-radius: var(--mini-radius, 4px);
  background: color-mix(in oklab, var(--theme-color) 10%, transparent);
  color: var(--theme-color);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .zrg-aside {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   移动端
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .zrg-hero {
    padding-bottom: 14px;
  }

  .zrg-hero-title {
    font-size: 20px;
  }

  .zrg-hero-stats {
    margin-top: 12px;
  }

  .zrg-stat {
    padding: 0 12px;
  }

  .zrg-stat-num {
    font-size: 16px;
  }

  .zrg-facts {
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   页面标题与表单控件
   背景：归档/搜索页原实现用了浏览器默认样式的 <input type="search"> 与
   <button>（黑边输入框 + 灰按钮），与主题完全不搭。这里按主题的盒子规格统一：
   描边 var(--main-border-color) + 圆角 var(--mini-radius) + 底色 var(--main-bg-color)
   -------------------------------------------------------------------------- */
.zrg-page h1 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--main-color);
}

.zrg-page input[type="text"],
.zrg-page input[type="search"],
.zrg-page input[type="number"],
.zrg-page input[type="email"],
.zrg-page input[type="tel"],
.zrg-page select,
.zrg-page textarea {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--main-border-color);
  border-radius: var(--mini-radius);
  background: var(--main-bg-color);
  color: var(--main-color);
  font-size: 14px;
  line-height: 1.6;
  transition: border-color .15s;
}

.zrg-page input:focus,
.zrg-page select:focus,
.zrg-page textarea:focus {
  border-color: var(--theme-color);
  outline: none;
}

.zrg-page button:not(.but),
.zrg-page input[type="submit"]:not(.but) {
  min-height: 38px;
  padding: 6px 16px;
  border: 1px solid var(--main-border-color);
  border-radius: var(--mini-radius);
  background: var(--muted-bg-color);
  color: var(--main-color);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.zrg-page button:not(.but):hover,
.zrg-page input[type="submit"]:not(.but):hover {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

/* 搜索行：输入框占满、按钮固定宽度 */
.zrg-page .zrg-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.zrg-page .zrg-search input[type="search"],
.zrg-page .zrg-search input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   设计层 v4（2026-09-13 · 用户选定方案 B：主题骨架上加设计感）
   —— 骨架全部保留主题规格（面板/圆角/投影/字体栈/强调条/角标），
      只在三处做加法：① 头部区 ② 章节头 ③ 数据呈现。
      刻意偏离主题的部分仅限：头部出血配色、标题字号放大、章节头延伸细线。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① 头部区：面板内通栏出血 + 主题色调淡底，形成明确的"实体头部"
   （面板 .zib-widget 内距 15px，故用 -15px 抵消；圆角只保留上方）
   -------------------------------------------------------------------------- */
.zrg-page .zrg-hero-bleed {
  margin: -15px -15px 20px;
  /* 22px：头部区内文的左右内距。下方区块要对齐的就是这条竖线，
     差额由 .zrg-main > .zrg-section 补齐（见文件末尾「区块内收」段）。 */
  padding: 18px 22px 20px;
  background: color-mix(in oklab, var(--theme-color) 6%, var(--main-bg-color));
  border-radius: var(--main-radius) var(--main-radius) 0 0;
  border-bottom: 0;
}

.zrg-hero-crumb {
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted-color);
}

/* 卡片上方的面包屑。
   宽度必须与**子比文章页的面包屑**一致：实测文章页 .breadcrumb 宽 844（左 128），
   即它只占主栏宽 —— 主题靠 .content-layout { margin-right: calc(311px + 15px) } 实现。
   这里照抄同一公式（若不收窄，它会横跨整个 1170，明显比文章页宽）。
   另外不带原生那 0 8px 内距，否则左缘比卡片内缩 8px。 */
.zrg-page-crumb {
  margin-right: 0;   /* 窄屏单栏：不能收窄，否则宽度只剩几十 px、面包屑会被挤成多行 */
}
@media (min-width: 1024px) {
  /* 只在两栏布局下收窄成"主栏宽"，与子比文章页面包屑一致（实测 844）*/
  .zrg-page-crumb {
    margin-right: calc(311px + 15px);
  }
}

.zrg-page-crumb .zrg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* 保留主题 .breadcrumb 的 0 8px 内距（不再归零）→ 文字与子比文章页同一位置（左 136）。
     曾归零是为了让文字与卡片左缘齐平，但那与主题不一致（用户要求对齐）。 */
  padding: 0 8px;
  /* 不写死 line-height：让它跟随字号继承主题的行高比例
     （14px → 20px 高；小屏 12px → 17px 高，与主题 .breadcrumb 实测完全一致）。
     此处曾钉成 20px 来补"12px 字号导致只有 17px"的问题 —— 病根是字号，字号修好后钉死反而
     让手机端比主题高 3px。 */
  line-height: inherit;
  /* 12px = 主题 .breadcrumb 的 margin-bottom（实测文章页：面包屑底 108 → 内容顶 120）。
     不写 font-size：主题的 12px 是**小屏媒体查询**里的值，桌面端应为继承的 14px；
     写死 12px 会让这一行比文章页矮 3px（实测 17 vs 20）。 */
  margin: 0 0 12px;
}

/* 头部标题放大到 28px：这是方案 B 里唯一刻意超过主题标题号的元素，
   用于拉开"实体头部"与"正文分节"的层级（主题页面标题仅 22px） */
.zrg-hero .zrg-hero-title {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: .01em;
}

.zrg-hero .zrg-hero-meta {
  font-size: 13px;
}

/* 关键数字：头部内的三段数据格（浅底 + 分隔），数字用主题色强调 */
/* 数据带**按内容宽收缩**：只有 1 个统计时（很多行政村/自然村页就只有「下级地区」一项）
   原来那套 auto-fit + 1fr 会把唯一一格拉满整行 —— 一条白底描边带子里只搁一个数字，
   右侧全是空的（用户实测指出）。现在改成 flex：每格 flex:0 0 auto + min-width:108px、
   容器 width:fit-content —— 几格就是几格宽，且每格不小于 108px（窄屏 72px）。
   多格时仍是一行数据带，外观不变。 */
/* 用 flex 而不是 grid：grid 的 auto-fit/fit-content 组合在 Chrome 里算不准
   （实测 4 格只排出 3 格、第 4 格被 overflow:hidden 裁掉）。
   flex + flex:0 0 auto + width:fit-content 是确定性的：几格就是几格宽。 */
.zrg-hero .zrg-hero-stats {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 0;
  margin-top: 16px;
  overflow: hidden;
  border-radius: var(--mini-radius);
  background: color-mix(in oklab, var(--theme-color) 8%, var(--main-bg-color));
}

/* 地名库首页：五级层级标签短（省级/地市级/县级/乡级/村级），把格宽下限调小，
   让 5 格排在**同一行**——108px 下限在「1fr + 34% 地图」两栏里只算得出 4 列，
   第 5 格会折行、右半留空。列表页（4 字标签）仍用 108px，不受影响。 */
.zrg-hero .zrg-hero-stats--levels {
  width: 100%;      /* 与地图并排的那条要占满左栏，不能跟着内容收缩 */
}

.zrg-hero .zrg-hero-stats--levels .zrg-stat {
  flex: 1 1 0;      /* 五级标签等分整栏 */
  min-width: 0;
}

.zrg-hero .zrg-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;              /* 宽度由内容决定，不拉伸 —— 只有 1 个统计时不会占满整行 */
  min-width: 108px;            /* 但一格也不小于 108px（「下级地区」4 字标签的舒适宽） */
  box-sizing: border-box;
  padding: 10px 14px;
  border-left: 1px solid color-mix(in oklab, var(--theme-color) 18%, transparent);
}

.zrg-hero .zrg-stat:first-child {
  border-left: 0;
}

.zrg-hero .zrg-stat-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--theme-color);
}

.zrg-hero .zrg-stat-label {
  font-size: 12px;
  color: var(--muted-color);
}

/* --------------------------------------------------------------------------
   ② 章节头：保留主题 40×3px 强调条，右侧延伸一条发丝线（编辑设计感）
   -------------------------------------------------------------------------- */
.zrg-page .zrg-section > h3,
.zrg-page .zrg-section > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zrg-page .zrg-section > h3::after,
.zrg-page .zrg-section > h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--main-border-color);
}

/* 标题内的图标与计数角标在延伸线之前，不参与拉伸 */
.zrg-page .zrg-section > h3 > *,
.zrg-page .zrg-section > h2 > * {
  flex: 0 0 auto;
}

.zrg-page .zrg-section .zrg-more {
  margin-left: auto;
}

/* 章节纵向节奏放宽，避免密集 */
.zrg-page .zrg-section {
  padding-top: 26px;
}

/* --------------------------------------------------------------------------
   ③ 数据呈现：瓦片加悬停抬升 + 层级标签；侧栏键值加强
   -------------------------------------------------------------------------- */
.zrg-page .zrg-card {
  min-height: 58px;
  justify-content: center;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s;
}

.zrg-page .zrg-card:hover,
.zrg-page .zrg-card:focus-visible {
  border-color: color-mix(in oklab, var(--theme-color) 35%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--main-color) 8%, transparent);
}

.zrg-page .zrg-card h3 {
  font-size: 15px;
  font-weight: 600;
}

.zrg-page .zrg-card .zrg-muted {
  font-size: 12px;
}

/* 侧栏：键值行加一条极浅分隔，数值用主题色，形成"数据卡"观感 */
.zrg-aside-list li {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--main-border-color);
}

.zrg-aside-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 速览里的值：回归正文色。
   原来这里把**所有值**都染成主题色，一屏粉字很突兀（用户反馈「有点突兀了」）。
   主题色只保留给可点的链接，值本身用正文色即可 —— 层级靠字重与字数，不靠色。 */
/* 速览联动主题色（用户要求「这个右边还是联动主题好一点」）。
   曾经因为「来源」那行长文本也被染成主题色而显得突兀，现已把长文本移到「数据说明」卡，
   剩下的都是短值，用主题色既统一又不会压屏。 */
.zrg-aside-list .zrg-aside-v {
  color: var(--theme-color);
}
.zrg-aside-list .zrg-aside-v a {
  color: var(--theme-color);
}
/* 键值行细节：行距、分隔线、末行收边 —— 让速览读起来更利落 */
/* 键值行：行距修匀。
   原来基础 padding 与后加的 margin/padding 叠成两倍，行与行之间忽大忽小。 */
.zrg-aside-list li {
  line-height: 1.6;
  padding: 9px 0;
}
/* 注意：不要再给 li + li 加 border-top。
   上面的 li 已经有 border-bottom（且 :last-child 清零），两条叠在一起就是双线
   （用户反馈「每个项目中间是两分隔线」），实测过。 */
.zrg-aside-list li + li {
  margin: 0;
}
/* 标签一行：值改成小角标（复用主题 .badg），过长时自动换行、不挤 */
.zrg-aside-list .zrg-aside-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 74%;
}
.zrg-aside-list .zrg-aside-chips .badg {
  font-weight: 400;
  /* 标签角标联动主题色：原来用主题 .badg 的默认灰底灰字，在一列主题色值里显得脱节
     （用户要求「联动主题好一点」）。沿用主题角标的配方：同色淡底 + 同色字。 */
  background: color-mix(in oklab, var(--theme-color) 10%, transparent);
  color: var(--theme-color);
  border-color: transparent;
}
.zrg-aside-list .zrg-aside-k {
  line-height: 1.6;
}
.zrg-aside-list .zrg-aside-v {
  line-height: 1.6;
  max-width: 68%;
}

/* 数据说明里的"已核验"标记 */
.zrg-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding: 2px 9px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--theme-color) 10%, transparent);
  color: var(--theme-color);
  font-size: 12px;
}

.zrg-verified .fa {
  font-size: 12px;
}

@media (max-width: 720px) {
  .zrg-page .zrg-hero-bleed {
    margin: -15px -15px 16px;
    padding: 14px 16px 16px;
  }

  .zrg-hero .zrg-hero-title {
    font-size: 22px;
  }

  .zrg-hero .zrg-stat {
    padding: 9px 11px;
  }

  .zrg-hero .zrg-stat-num {
    font-size: 18px;
  }

  .zrg-page .zrg-section > h3,
  .zrg-page .zrg-section > h2 {
    gap: 9px;
  }
}

/* v4 修正：头部数据格太弱（淡底看不见、数字太小）→ 改为白底 + 主题色描边 + 大号数字，
   并在头部下沿补一条分隔线，让出血区有明确的收口 */
.zrg-page .zrg-hero-bleed {
  background: color-mix(in oklab, var(--theme-color) 7%, var(--main-bg-color));
  border-bottom: 1px solid color-mix(in oklab, var(--theme-color) 16%, transparent);
}

.zrg-hero .zrg-hero-stats {
  background: var(--main-bg-color);
  border: 1px solid color-mix(in oklab, var(--theme-color) 16%, transparent);
  box-shadow: 0 2px 10px color-mix(in oklab, var(--main-color) 5%, transparent);
}

.zrg-hero .zrg-stat {
  padding: 12px 16px;
  border-left-color: var(--main-border-color);
}

.zrg-hero .zrg-stat-num {
  font-size: 22px;
}

.zrg-hero .zrg-stat-label {
  font-size: 12px;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   卡片标题（侧栏「速览 / 延伸阅读 / 数据说明」等）统一改用左侧竖条
   背景：主题的 .zib-widget>h3::before 是"下置横条"，位置由字号与字体度量决定，
   在字体度量不同的浏览器上会贴住甚至压住字形（用户实测指出错位）。
   本层覆盖为左侧竖条，与正文分节标题保持同一套视觉语言。
   -------------------------------------------------------------------------- */
.zrg-page .zib-widget > h3 {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 0 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.zrg-page .zib-widget > h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1.05em;
  margin-top: -.525em;
  border-radius: 2px;
  background: var(--theme-color);
  box-shadow: none;
}

.zrg-page .zib-widget > h3 {
  display: block;
}

/* ==========================================================================
   横向滑动轮播（图片盒子式）—— 用于「本地历代方志」等长列表
   设计约束：
     · 本体是原生横向滚动容器（scroll-snap），JS 只做翻页按钮与状态同步；
       因此触屏滑动 / 触控板横扫 / 键盘方向键直接可用，JS 失效也能手动滑
     · 白面板内不叠加白底卡：沿用浅底色 chip 语言
     · 封面图 lazy，滑入视口才加载
   ========================================================================== */
.zrg-page .zrg-carousel {
  --zrg-carousel-gap: 16px;
  position: relative;
}

.zrg-page .zrg-carousel-viewport {
  position: relative;
  overflow: hidden;
}

/* 右缘渐隐：提示「右边还有」，滑到末尾自动消失（由 JS 写 data-zrg-carousel-at） */
.zrg-page .zrg-carousel-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--main-bg-color) 92%);
  transition: opacity .2s;
}

.zrg-page .zrg-carousel[data-zrg-carousel-at="end"] .zrg-carousel-viewport::after {
  opacity: 0;
}

/* 轨道：横向滚动 + 吸附 */
.zrg-page .zrg-carousel-track.zrg-books-grid {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
  gap: var(--zrg-carousel-gap);
  margin-top: 14px;
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.zrg-page .zrg-carousel-track::-webkit-scrollbar {
  height: 6px;
}

.zrg-page .zrg-carousel-track::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: color-mix(in oklab, var(--main-color) 18%, transparent);
}

.zrg-page .zrg-carousel-track:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}

/* 每屏 5 张（桌面）→ 4 / 3 / 2.2（逐级收窄），与截图里的五列观感一致 */
.zrg-page .zrg-carousel .zrg-book {
  flex: 0 0 calc((100% - 4 * var(--zrg-carousel-gap)) / 5);
  scroll-snap-align: start;
}

@media (max-width: 1023px) {
  .zrg-page .zrg-carousel .zrg-book {
    flex-basis: calc((100% - 3 * var(--zrg-carousel-gap)) / 4);
  }
}

@media (max-width: 720px) {
  .zrg-page .zrg-carousel {
    --zrg-carousel-gap: 12px;
  }

  .zrg-page .zrg-carousel .zrg-book {
    flex-basis: calc((100% - 2 * var(--zrg-carousel-gap)) / 3);
  }
}

@media (max-width: 480px) {
  /* 露出小半张，明确提示可滑动 */
  .zrg-page .zrg-carousel .zrg-book {
    flex-basis: 44%;
  }
}

/* 翻页按钮：圆形、贴内容区左右边缘（面板内距 15px，故 -12px 仍在面板内）
   ⚠️ 必须提高特异性：本文件前面有 `.zrg-page button:not(.but)`（0,2,1），
   否则按钮会被那条规则改成长方形灰底。 */
.zrg-page .zrg-carousel button.zrg-carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--main-border-color);
  background: var(--main-bg-color);
  color: var(--main-color);
  box-shadow: 0 2px 10px color-mix(in oklab, var(--main-color) 14%, transparent);
  cursor: pointer;
  z-index: 2;
  transition: opacity .15s, border-color .15s, color .15s;
}

.zrg-page .zrg-carousel button.zrg-carousel-prev {
  left: -12px;
}

.zrg-page .zrg-carousel button.zrg-carousel-next {
  right: -12px;
}

.zrg-page .zrg-carousel button.zrg-carousel-btn:hover:not(:disabled) {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

/* 到头/到尾时按钮淡出（而不是变灰留着碍眼） */
.zrg-page .zrg-carousel button.zrg-carousel-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

/* 触屏：直接滑动，不放按钮 */
@media (hover: none) {
  .zrg-page .zrg-carousel button.zrg-carousel-btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zrg-page .zrg-carousel-track.zrg-books-grid {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   古籍列表底部：「加载更多」按钮 + 状态行（AJAX 分页）
   首屏只渲染第一页；其余按需取，避免一次性下发几百张卡片。
   -------------------------------------------------------------------------- */
.zrg-page .zrg-books-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
}

.zrg-page button.zrg-carousel-more {
  min-height: 32px;
  padding: 5px 16px;
  border: 1px solid var(--main-border-color);
  border-radius: var(--mini-radius);
  background: var(--muted-bg-color);
  color: var(--main-color);
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.zrg-page button.zrg-carousel-more:hover:not(:disabled) {
  border-color: var(--theme-color);
  color: var(--theme-color);
}

.zrg-page button.zrg-carousel-more:disabled {
  opacity: .6;
  cursor: default;
}

.zrg-page .zrg-books-footer .zrg-books-more {
  margin: 0;
  font-size: 13px;
}

/* ==========================================================================
   历史名人（任务P2-04）
   约定：颜色只用 --zrg-* 令牌或主题变量；不自绘强调条；H2/H3 一律不带图标。
   只补卡片元信息、筛选项、代表作列表与页尾内链四类细节，其余复用既有类名。
   ========================================================================== */

/* 卡片元信息：朝代 · 生卒 · 领域 + 字号（弱化，不抢标题） */
.zrg-person-card .zrg-person-meta,
.zrg-person-card .zrg-person-alias {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.6;
}

/* 筛选项计数：用浅底小角标，与主题 .badg 的文本形态同源 */
.zrg-filter-count {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--zrg-tint);
  color: var(--zrg-muted);
  font-size: 11px;
  line-height: 1.7;
}

/* 地域筛选行：下拉 + 按钮，窄屏自动折行（不产生横向滚动） */
.zrg-person-region-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.zrg-person-region-label {
  font-size: 13px;
  color: var(--zrg-muted);
}

.zrg-person-region-filter select {
  max-width: min(280px, 100%);
  padding: 6px 10px;
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius-sm);
  background: var(--zrg-surface);
  color: var(--zrg-text);
  font-size: 13px;
}

/* 代表作：点列（不用自造卡片） */
.zrg-works-list {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
}

.zrg-works-list li {
  list-style: disc;
}

/* 页尾内链：与地名页 .zrg-region-link 同一视觉语言 */
.zrg-person-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   古籍编号分页（AJAX 换页，不跳转）
   页码本体复用主题语汇的 .zrg-pagination 样式（方角描边 + 主题色选中），
   这里只补容器间距与"换页中"的状态表现。
   -------------------------------------------------------------------------- */
.zrg-page .zrg-books-pager {
  margin-top: 16px;
}

/* 换页中：网格轻微降透明并禁止点击，避免连点；不使用 loading 遮罩（会盖住封面） */
.zrg-page [data-zrg-books-loading="1"] [data-zrg-books-grid] {
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s;
}

.zrg-page [data-zrg-books-grid] {
  transition: opacity .15s;
}

/* 页码项的禁态（首/末页用 span 渲染）用与链接一致的盒子，只是更淡 */
.zrg-page .zrg-books-pager .zrg-page-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  margin: 0;
  border: 1px solid var(--main-border-color);
  border-radius: var(--mini-radius);
  color: var(--muted-color);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   古籍分页网格的列数（与「每页条数」绑定！）
   ----------------------------------------------------------------------------
   需求是「每页控制在两行」。网格列数随屏宽变化，所以列数必须显式指定，
   否则小屏断点（.zrg-books-grid { grid-template-columns: 1fr }）会把整页
   变成一列的长条（实测手机 390px 就是 1 列 10 行）。

   本组规则与 templates/parts/books.php 的 $per 是一对：
     桌面 4 列 × 8 部 = 正好两行；改列数或 $per 必须同步改另一处。
   2026-10-02 站长要求「一行四个」：5 列 × 10 部 → 4 列 × 8 部。
   -------------------------------------------------------------------------- */
.zrg-page .zrg-books-paged .zrg-books-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .zrg-page .zrg-books-paged .zrg-books-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .zrg-page .zrg-books-paged .zrg-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .zrg-page .zrg-books-paged .zrg-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   L5 头部区定位图（2026-09-13）
   --------------------------------------------------------------------------
   需求：头部区右侧放定位图，并用遮罩让它融进出血底色，而不是贴一张方图。

   「好看」靠三层叠出来，缺一层都会显得突兀：
   1) 遮罩 mask-image：左缘渐隐 —— 图的左边不是硬边，而是化进主题淡底；
      这是「遮罩效果」的核心。底部也轻微渐隐，避免与下方内容形成硬横线。
   2) 主题色罩层 ::after：把外部底图（第三方地图的绿/蓝色系）拉到主题色系里，
      否则和粉调出血底打架。
   3) 定位点脉冲：动效只用 box-shadow/transform，并尊重 prefers-reduced-motion。

   ⚠️ 定位图是纯装饰元素（pointer-events: none），绝不能挡住标题区里的
      面包屑与数字格子的点击。
   ========================================================================== */

/* 有定位图时头部区变为两栏（左文字 / 右定位图）。
   align-items: stretch 让右栏**拉满整个头部区的高度**（用户要求「拉大到一整个盒子的高度」），
   因此定位图不再用固定宽高比：高度由文字栏撑开的行高决定。
   窄屏退化为单栏并隐藏定位图 —— hero 在窄屏本就拥挤，图会逼标题与数字缩行。 */
.zrg-hero-has-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: 24px;
  align-items: stretch;
}

.zrg-hero-map {
  position: relative;
  /* 头部区通栏出血：抵消 .zrg-hero-bleed 的内距（上 18 / 右 22 / 下 20），
     让定位图**贴满整个盒子的高度与右侧边缘**（用户要求「拉大到一整个盒子的高度」）。
     圆角只保留右上角，与 .zrg-hero-bleed 的 border-radius 对齐。 */
  margin: -18px -22px -20px 0;
  border-radius: 0 var(--main-radius) 0 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in oklab, var(--theme-color) 5%, var(--main-bg-color));
  pointer-events: none;
  isolation: isolate;
  /* 左缘渐隐：让地图化进主题淡底。
     ⚠️ 遮罩加在容器上，因此容器内的角标也会被渐隐影响 —— 左下角的经纬度角标
     必须定位在**渐隐带之外**（渐隐到 27% 处才完全不透明），否则文字会被"洗掉"。
     这也意味着：若以后加深/加长渐隐，要同步右移角标的 left 值。 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 27%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 27%, #000 100%);
}

/* 外部底图：object-fit: cover 且**居中**，而不是像书封那样靠左。
   原因：定位点叠在容器的 50%/50%，只有「图心 == 容器心」时点位才准确；
   靠左裁剪会把图心推到容器中线右侧，定位点就偏了。（书封靠左是另一回事：那里的
   左侧是封面正文区，且不需要几何精确。） */
.zrg-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.85) contrast(.96);
}

/* 角标行容器：桌面 display:contents —— 不生成盒子，两个角标保持各自原有的
   绝对定位（左下/右下），与历史版式完全一致。窄屏才变成真正的 flex 行。 */
.zrg-map-tags {
  display: contents;
}

/* 主题色罩层 */
.zrg-hero-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, var(--zrg-accent-weak), transparent 58%),
    linear-gradient(to top, color-mix(in oklab, var(--main-bg-color) 48%, transparent), transparent 44%);
}

/* ---- 无 Key 时的坐标示意：经纬网格 + 同心圈（不绘制任何行政边界） ---- */
.zrg-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--zrg-border) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--zrg-border) 0 1px, transparent 1px 46px);
  opacity: .5;
}

.zrg-map-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 186px;
  height: 186px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 31%, var(--zrg-accent-weak) 31% 33%,
    transparent 33% 51%, var(--zrg-accent-weak) 51% 53%,
    transparent 53% 71%, var(--zrg-accent-weak) 71% 73%,
    transparent 73% 100%);
}

.zrg-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--theme-color);
  animation: zrg-map-pulse 2.6s var(--zrg-ease) infinite;
}

@keyframes zrg-map-pulse {
  0%   { box-shadow: 0 0 0 3px color-mix(in oklab, var(--theme-color) 34%, transparent); }
  70%  { box-shadow: 0 0 0 19px transparent; }
  100% { box-shadow: 0 0 0 19px transparent; }
}

.zrg-map-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  padding: 1px 7px;
  border-radius: var(--mini-radius, 4px);
  background: color-mix(in oklab, var(--main-bg-color) 78%, transparent);
  color: var(--muted-color);
  font-size: 11px;
  line-height: 1.8;
}

@media (max-width: 1023px) {
  .zrg-hero-has-map {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 窄屏：定位图不再是右栏，而是**右上角的遮罩装饰**（用户要求）。
     要点：
       ① 贴住盒子右上角（负偏移抵消 .zrg-hero-bleed 的内距），只保留右上圆角；
       ② 用**单条 radial 遮罩**锚在右上角 —— 一次同时向左、向下化开，
          比"两条 linear + mask-composite"简单且兼容性更好；
       ③ pointer-events: none：纯装饰不抢点击；opacity 压低，不与标题争视线；
       ④ 署名移到遮罩的不透明区（天地图要求可见），经纬度角标窄屏隐藏
          （信息已在「基础信息」里，装饰上再挂文字会乱）。 */
  .zrg-hero {
    position: relative;
    /* 早先靠 overflow:hidden 裁掉负偏移造成的横向溢出，但那会连带切掉图片顶边
       （用户反馈「地图位置有点问题」）。现在装饰不留负偏移、贴合盒子右边缘，
       所以不再需要裁切。 */
  }
  .zrg-hero-main {
    position: relative;
    z-index: 1;
  }
  .zrg-hero-map {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    /* 与 PHP 侧取图尺寸同比例（340×300 → 2 倍图显示为 170×150）：
       框与图宽高比一致 + object-fit:cover 居中 → 图上不发生任何位移与裁切。 */
    width: min(46%, 170px);
    height: 150px;
    margin: 0;
    border-radius: 0 var(--main-radius) 0 0;
    background: none;
    opacity: .6;
    /* 不透明区放大到 42%、渐隐拉到 88%：原先 30%/76% 让主体还没到边缘就开始淡，
       看着像是被切掉了一块。 */
    -webkit-mask-image: radial-gradient(135% 125% at 100% 0%, #000 42%, transparent 88%);
    mask-image: radial-gradient(135% 125% at 100% 0%, #000 42%, transparent 88%);
  }
  .zrg-hero-map::after {
    background: linear-gradient(200deg, var(--zrg-accent-weak), transparent 60%);
  }
  /* 遮罩下移：窄屏只遮罩**图片与主题罩层**，容器不再遮罩 ——
     否则容器内的角标会被一起洗淡（父级 mask 无法被子元素逃逸，本项目已因此返工过）。
     视觉效果不变：容器的淡底在窄屏本就是 none，图片与罩层渐隐就等于整块渐隐。 */
  .zrg-hero-map {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .zrg-map-img,
  .zrg-hero-map::after {
    -webkit-mask-image: radial-gradient(135% 125% at 100% 0%, #000 42%, transparent 88%);
    mask-image: radial-gradient(135% 125% at 100% 0%, #000 42%, transparent 88%);
  }

  /* 两个角标并排一行，贴在装饰框右上角：经纬度在前，署名在后。
     ⚠️ 必须带 .zrg-hero-map 前缀提高特异性：基础规则 .zrg-map-coords 写在
     文件更靠后的位置（约 2501 行），同特异性时后者胜 —— 不加前缀会被它按回绝对定位。 */
  .zrg-hero-map .zrg-map-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 3;
  }
  .zrg-hero-map .zrg-map-coords,
  .zrg-hero-map .zrg-map-credit {
    position: static;
    font-size: 10px;
    line-height: 1.7;
    white-space: nowrap;
  }
  .zrg-map-pin {
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -5px;
  }
  .zrg-map-rings {
    width: 130px;
    height: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zrg-map-pin {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--theme-color) 30%, transparent);
  }
}

/* --------------------------------------------------------------------------
   章节标题右侧的「更多」入口（.zrg-more）
   ----------------------------------------------------------------------------
   用于替代原先在内容区放一个实心按钮的做法（同名地名区块曾因此显得突兀）。

   两个关键点：
   1) order: 1 —— 章节标题行的最后一个元素是 ::after 的延伸发丝线（flex:1），
      把链接的 order 设为 1 才能排到细线之后，落在标题行最右端。
   2) 覆盖全局的 margin-left: auto —— auto 会吃掉细线的伸展空间，细线就没了。
   -------------------------------------------------------------------------- */
.zrg-page .zrg-section > h3 .zrg-more,
.zrg-page .zrg-section > h2 .zrg-more {
  order: 1;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted-color);
  white-space: nowrap;
  transition: color .15s var(--zrg-ease);
}

.zrg-page .zrg-section > h3 .zrg-more:hover,
.zrg-page .zrg-section > h2 .zrg-more:hover {
  color: var(--theme-color);
}

.zrg-page .zrg-section > h3 .zrg-more .fa,
.zrg-page .zrg-section > h2 .zrg-more .fa {
  font-size: 12px;
}

/* ==========================================================================
   L7 留白节奏（呼吸感）+ 地图经纬度角标
   --------------------------------------------------------------------------
   反馈：「每项之间排布太密集，需要留白」。这里把纵向节奏统一放宽一档，
   **集中放在本段便于整体调节** —— 以后要调松紧只改这一处，不要散落着改。

   调节尺度（相对上一版）：
     · 章节之间       44px → 56px
     · 章节标题下距    14px → 18px
     · 网格单元间距    16px → 20px（--zrg-gap，卡片与古籍网格共用）
     · 时间线条目间距  18px → 26px
     · 卡片内距        18px → 20px；卡片标题下距 10px → 12px
     · 数据表行距     9px → 11px
     · 侧栏键值行距    8px → 11px
   ========================================================================== */
.zrg-page {
  --zrg-gap: 20px;
}

.zrg-page .zrg-section {
  margin-top: 22px;
  padding-top: 34px;
}

/* 第一个章节紧跟头部区，不再多出一段空白 */
.zrg-page .zrg-section:first-of-type {
  padding-top: 0;
}

.zrg-page .zrg-section > h3,
.zrg-page .zrg-section > h2 {
  margin: 0 0 18px;
}

.zrg-page .zrg-event {
  margin-bottom: 26px;
}

.zrg-page .zrg-card {
  padding: 20px;
}

.zrg-page .zrg-card h3 {
  margin-bottom: 12px;
}

.zrg-page .zrg-table th,
.zrg-page .zrg-table td {
  padding: 11px 0;
}

.zrg-page .zrg-aside-list li {
  padding-bottom: 11px;
}

/* ---- 地图左下角：经纬度角标（与右下角署名同一套"贴片"样式）----
   位置说明：left 用百分比而不是固定 px —— 容器左缘渐隐到 27% 处才完全不透明，
   角标必须落在渐隐带之外才不会被"洗淡"，用百分比可随容器宽度自适应。 */
.zrg-map-coords {
  position: absolute;
  left: 28%;
  bottom: 8px;
  z-index: 3;
  padding: 1px 8px;
  border-radius: var(--mini-radius, 4px);
  background: color-mix(in oklab, var(--main-bg-color) 78%, transparent);
  color: var(--muted-color);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
  white-space: nowrap;
}

.zrg-map-coords .fa {
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   窄屏：右下角署名让位给左下角经纬度角标
   ----------------------------------------------------------------------------
   背景：容器左缘渐隐到 27% 处才完全不透明，经纬度角标必须落在渐隐带之外
   （left: 28%），于是底行被它占去一大段。地图宽度随视口变化：
     视口 1400 → 地图 306px（放得下两个角标）
     视口 1200 → 地图 281px（相撞 3px）
     视口 1024 → 地图 224px（相撞 44px）
   所以在窄屏把署名移到**右上角**（不遮挡、仍完整可见，署名要求依然满足），
   把整条底边留给经纬度角标。
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .zrg-map-credit {
    top: 8px;
    right: 10px;
    bottom: auto;
  }
}

/* ── 入口与锚点（2026-09-13）───────────────────────────────────────────────
   背景：实测「本地历代方志」原在桌面第 7.8 屏 / 手机第 15.2 屏，几乎无人到达。
   首屏给两个入口：hero 统计格（可点锚点）+ 侧栏第一张卡；
   正文章节上移到查证类内容之后。锚点跳转要留出吸顶页头的高度，否则标题被盖住。 */
#zrg-children,
#zrg-names,
#zrg-history,
#zrg-books {
  scroll-margin-top: 90px;
}

/* 统计格里的可点项：外观与静态格一致，只在悬停时给足反馈（不喧哗）。
   下缘 2px 强调条用的是主题自己的强调条语言（标题左侧竖条同色源），
   比只改文字颜色更容易被看出"这里能点"。 */
a.zrg-stat {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: background-color .2s ease;
}
a.zrg-stat::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--theme-color);
  opacity: 0;
  transition: opacity .2s ease;
}
a.zrg-stat:hover {
  background: color-mix(in oklab, var(--theme-color) 7%, transparent);
}
a.zrg-stat:hover .zrg-stat-label {
  color: var(--theme-color);
}
a.zrg-stat:hover::after {
  opacity: 1;
}


/* 手机统计格：**与桌面端完全同一套外观**（用户明确要求）——
   同样是一行、发丝分隔线、同样的数字字号与标签色。
   只做两处适配：宽窄不够时改 4 列等分（auto-fit 会退成 3+1 留空），并收窄内距
   让「下级地区」这类 4 字标签在 390px 下不折行。
   注：先前那版"浅色小瓦片"已被否决 —— 不要为了没有悬停而另造一套外观。 */
@media (max-width: 640px) {
  /* 手机：格宽下限从 108px 降到 72px（4 个 4 字标签也落在 390px 内），
     仍按内容排 —— 只有 1 个统计时同样不会撑满整行。 */
  .zrg-hero .zrg-stat {
    min-width: 72px;      /* 手机：4 个 4 字标签也落在 390px 内 */
  }
  .zrg-hero .zrg-stat {
    padding: 10px 8px;
  }
}

/* ── 区块内收：与头部区内文对齐（2026-09-13）──────────────────────────────
   用户反馈「基础信息及以下都需要往内收一收」。
   实测根因不是"太宽"，而是**左右边线不一致**：
     头部区出血面板内距 22px（.zrg-hero-bleed 的 padding）→ 内文左边线 150px
     下方区块用主题 .zib-widget 内距 15px              → 左边线 143px，偏左 7px
   所以这里补的是差额（写成 calc 让来由可见），而不是随手加个内距。
   右侧同样补，补完区块内容右边线 986 与头部面板内文右边线一致。
   ⚠️ 调头部区内距时必须同步这里，否则 10 个区块会再次错开。 */
.zrg-main > .zrg-section {
  padding-left: calc(22px - 15px);
  padding-right: calc(22px - 15px);
}

@media (max-width: 720px) {
  /* 窄屏头部区内距是 16px（见上面的 @media 720px 段）→ 差额 1px */
  .zrg-main > .zrg-section {
    padding-left: calc(16px - 15px);
    padding-right: calc(16px - 15px);
  }
}

/* 小屏 12px：与主题 .breadcrumb 完全同断点
   （主题 main.css：`.px12-sm, .icon-card, .breadcrumb { font-size: 12px }` 位于 max-width:640px）。
   桌面端不写字号 = 继承 14px，这也是主题的行为（实测文章页 .breadcrumb 为 14px）。 */
@media (max-width: 640px) {
  .zrg-breadcrumb {
    font-size: 12px;
  }
}

/* ============================================================
   L9 条目行（无封面图时的列表形态）
   用途：词条 / 人物没有配图时，替代"灰底占位封面卡"。
   规则：短字段一行对齐（名称 ←→ 类型）、说明独占一行、条目之间发丝线。
   取值：内距与行距沿用 L7 留白节奏；分隔线用主题令牌，不写死颜色。
   注意：只作用于 .zrg-entry-row，不触碰筛选标签与按钮。
   ============================================================ */
/* 混排：条目行跨满整行；卡片保持自己的格子宽度（**不能**改成 display:block，
   那会把单张卡片撑成整页宽 —— 实测过，巨图一张，很难看）。 */
.zrg-content-grid .zrg-entry-row {
    grid-column: 1 / -1;
}
.zrg-entry-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--main-border-color, rgba(0, 0, 0, .06));
    color: inherit;
    text-decoration: none;
}
.zrg-entry-row:first-child {
    padding-top: 4px;
}
.zrg-entry-row:last-child {
    border-bottom: 0;
}
.zrg-entry-main {
    display: block;
    min-width: 0;
    flex: 1;
}
.zrg-entry-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.zrg-entry-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
/* 有图的大气行：标题与摘要都放大一档（对齐子比文章卡的层级） */
.zrg-entry-row--thumb .zrg-entry-title {
    font-size: 19px;
    line-height: 1.45;
}
.zrg-entry-row--thumb .zrg-entry-type {
    font-size: 13px;
}
.zrg-entry-row--thumb .zrg-entry-desc {
    font-size: 15px;
    line-height: 1.85;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zrg-entry-type {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.zrg-entry-meta,
.zrg-entry-desc {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    margin-top: 3px;
}
.zrg-entry-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 5px;
}
.zrg-entry-arrow {
    flex: 0 0 auto;
    align-self: center;
    font-size: 14px;
    opacity: .35;
    transition: opacity .2s, transform .2s;
}
.zrg-entry-row:hover .zrg-entry-title,
.zrg-entry-row:focus-visible .zrg-entry-title {
    color: var(--theme-color, #f04494);
}
.zrg-entry-row:hover .zrg-entry-arrow,
.zrg-entry-row:focus-visible .zrg-entry-arrow {
    opacity: .8;
    transform: translateX(2px);
}
@media (max-width: 640px) {
}

/* 有图的列表：做成"左大图 + 右文字"的宽版条目行（对齐子比文章卡那种大气感）。
   比例与卡片封面一致（16:10）；14px 圆角 + 卡片底，让有图的条目自成一块。 */
.zrg-entry-row--thumb {
    align-items: flex-start;
    gap: 20px;
    padding: 18px 0;
}
.zrg-entry-thumb {
    flex: 0 0 auto;
    width: 220px;
    height: 138px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zrg-tint);
}
.zrg-entry-thumb img {
    /* 与卡片封面同一套：按宽度缩放、顶端对齐、超出下方裁掉 */
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
@media (max-width: 640px) {
}

/* 卡片正文收紧：主题的 .text-ellipsis-2 会给两行占位高度，卡片里标题只有一行时
   就会在标题和摘要之间留出一大块空白（实测 ~40px）。这里在卡片作用域内清掉。
   同时空标签行不占位；摘要上距收紧。 */
.zrg-content-card .zrg-content-body {
    padding: 10px 12px 12px;
}
.zrg-content-card .zrg-content-body h3 {
    margin: 0;
    min-height: 0;
}
.zrg-content-card .text-ellipsis-2 {
    min-height: 0 !important;
}
.zrg-content-card .zrg-content-tags {
    margin: 0;
    min-height: 0;
}
.zrg-content-card .zrg-content-tags:empty {
    display: none;
}
.zrg-content-card .zrg-content-excerpt {
    margin: 6px 0 0;
    min-height: 0;
}

/* 封面左上角标：原来沿用主题 .badg 的"10% 淡底"形态，压在图上太灰、不显眼。
   改为**主题色实心 + 白字**（与主题按钮同一套配色），压图加一点投影保证可读。 */
.zrg-content-badge {
    background: var(--theme-color, #f04494) !important;
    color: #fff !important;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 4px;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    text-shadow: none;
}
.zrg-content-badge::before {
    background: none;
}

/* 卡片标题：主题 .text-ellipsis-2 在卡片里会按两行预留高度，单行标题下就白留一行
   （实测 42px 的盒装 21px 的字）。这里在卡片作用域内显式定死字号/行高/两行截断，
   盒高跟着内容走。 */
.zrg-content-card .zrg-content-body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 卡片行 → 第一条列表 之间的空档收窄：实测由 卡片下边距 + 网格行距 + 行内上距 叠成，
   叠起来偏大。混合形态下把卡片下边距让掉，行内上距同步收一点。 */
.zrg-content-grid .zrg-content-card {
    margin-bottom: 0;
}
.zrg-content-grid .zrg-entry-row {
    padding-top: 10px;
}
.zrg-content-grid .zrg-entry-row:last-child {
    padding-bottom: 10px;
}

/* 面包屑宽度：三个详情页（地域 / 词条 / 名人）统一与主内容区同宽，
   即容器宽 - 侧栏 311 - 间隙 15（与主题文章页 .content-layout 的公式一致）。
   只在桌面生效：窄屏约束会让面包屑被挤成一条竖线（曾实测 390px 下 72px 高）。 */
@media (min-width: 1024px) {
  /* 只作用于词条页 / 名人页：它们的面包屑没有别处给的宽度约束。
     地名页的面包屑自带约束，用同一条会叠成两倍宽（实测 844 → 518）。 */
  .zrg-page .zrg-breadcrumb--wide {
    margin-right: calc(311px + 15px);
  }
}

/* 详情页封面：原来是整幅撑满主栏（实测 810px 宽，像一堵墙）。
   收成一张图卡的尺度：最宽 560px、按宽度等比缩放、顶端对齐。 */
.zrg-page .zrg-content-hero {
  max-width: 560px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--zrg-tint);
}
.zrg-page .zrg-content-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* 词条/名人详情页：封面放进 hero 的地图位（复用 .zrg-hero-map 的几何与左缘遮罩）。
   填充方式用 cover + 左上锚点，延续"不做居中裁剪"的约定。 */
.zrg-page .zrg-hero-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* hero 里的地域名：以前误用了 .zrg-hero-code（那是给行政代码「110000」用的，
   带等宽字体 + 0.52px 字距 + tabular-nums），中文地名用它会显得与旁边文字不同源
   （用户反馈「北京市这里的字体不统一」）。这里显式继承 meta 的字体与颜色，
   只在悬停时给主题色，作为"可点"的提示。 */
.zrg-hero-meta .zrg-hero-region {
  /* 与相邻文字完全同源：把所有可能分叉的排版属性一次拉平。
     实测只有字体族/字距会分叉，但字重、装饰、合成、平滑也会被主题链接样式影响，
     这里一并显式声明，避免"看起来还是不一样重"（用户第二次反馈）。 */
  font: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-stretch: inherit;
  font-synthesis: inherit;
  font-variant-numeric: normal;
  letter-spacing: normal;
  line-height: inherit;
  color: inherit;
  opacity: inherit;
  text-decoration: none;
  -webkit-font-smoothing: inherit;
}
.zrg-hero-meta .zrg-hero-region:hover,
.zrg-hero-meta .zrg-hero-region:focus-visible {
  color: var(--theme-color, #f04494);
}
/* 等宽那套只保留给真正的行政代码（地名页 hero 里的 110000） */
.zrg-hero-meta .zrg-hero-code {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   列表页（/culture/、/produce/）重设计的配套样式
   骨架与地名页/详情页一致；这里只补筛选区与 hero 里新增的小元素。
   ============================================================ */
.zrg-filters {
  margin: 4px 0 18px;
  border-top: 1px solid var(--main-border-color, rgba(0, 0, 0, .06));
  padding-top: 14px;
}
.zrg-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.zrg-filter-row + .zrg-filter-row {
  margin-top: 10px;
}
/* .zrg-tabs 自带 margin:16px 0（给独立使用的场景留白），在筛选排里必须抵消，
   否则每排上下各 16px、三排叠起来视觉间距接近 50px（用户反馈"太大"）。 */
.zrg-filter-row .zrg-tabs {
  margin: 0;
  gap: 8px;
}
.zrg-filter-label {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.6;
  opacity: .8;
}
/* 三排筛选的胶囊必须完全一致（曾经给类型排单独收小一档，用户指出不统一）。 */
/* 回退提示（本级无收录、取数用上级） */
.zrg-hero-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .zrg-filter-row {
    gap: 8px;
  }
  .zrg-filter-label {
    flex: 0 0 100%;
  }
}

/* 筛选胶囊里的条数已按用户要求移除（2026-09）。 */

/* 筛选胶囊尺寸：三排共用同一套，不允许单排特例。
   2026-09 调整史：原 13px/5px 14px → 收成 12px/4px 12px（用户反馈"太小了"）→ 回到 13px/5px 14px。
   间距同理：真凶是 .zrg-tabs 自带的 16px 外边距（见上），而不是胶囊尺寸。 */
.zrg-filter-row .zrg-tab {
  font-size: 13px;
  padding: 5px 14px;
}
.zrg-filter-row .zrg-tabs {
  gap: 10px;
}

/* 筛选与列表之间的分隔：两端渐隐的发丝线（比整条实线柔和，和主题的细边框同一语汇） */
.zrg-filters {
  padding-bottom: 12px;
}
.zrg-filters::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 14px;
  background: linear-gradient(to right, transparent 0,
              var(--main-border-color, rgba(0, 0, 0, .08)) 10%,
              var(--main-border-color, rgba(0, 0, 0, .08)) 90%,
              transparent 100%);
}

/* ============================================================
   全国图（未选地域时的 hero 右图）
   hero-map 默认的左缘渐隐是 27% —— 那是给「某地域定位图」设计的
   （图靠右上、左边要化进粉色底）。全国图用同一条遮罩会把新疆西藏整块吃掉
   （实测：遮罩盖到 83°E，我国西端 73°E 全没了）。所以单独收窄到 8%：
   只留一道柔边用于和 hero 底色衔接，不再遮挡国土。
   ============================================================ */
.zrg-hero-map--china {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 100%);
}

/* ============================================================
   侧栏链接行：统一成「图标 + 名称(单行省略) + 条数」的两端对齐
   起因：方志书名较长（如「北京城区旧有地名检查材料存稿（民国）」）会折成两行，
   行高翻倍、右缘参差，整块看着乱。改为单行省略 + 悬停 title 看全名。
   ============================================================ */
.zrg-aside-links > li > a,
.zrg-aside-links > li > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.zrg-aside-links .zrg-aside-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.zrg-aside-links > li > a > i,
.zrg-aside-links > li > span > i {
  flex: 0 0 auto;
}
.zrg-aside-links .zrg-aside-count {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
/* 「查看全部」做成卡片底部的整行入口，左侧竖条与标题同一语汇 */
.zrg-aside-more {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--main-border-color, rgba(0, 0, 0, .06));
  font-size: 13px;
  color: var(--theme-color);
  text-decoration: none;
}
.zrg-aside-more:hover,
.zrg-aside-more:focus-visible {
  opacity: .82;
}

/* ============================================================
   侧栏卡片宽度：必须 border-box
   .zib-widget 带 padding:15px，而这里的盒子是 content-box 时，
   卡片实际宽 = 轨道宽 + 30px，会撑出侧栏 31px（实测 326 轨道 → 357 卡片）。
   1440 视口下页面够宽所以看不出来，窄窗口/放大时直接顶到屏幕外被切掉。
   ============================================================ */
.zrg-aside-card,
.zrg-aside > .zib-widget,
.zrg-main .zib-widget {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* 卡片链路上的每一级都要 min-width:0 ——
   卡片是 .zrg-aside（grid）的项、卡内 ul/li/a 又是 flex/grid 的项，
   默认 min-width:auto 会被内部 nowrap 长书名顶到最小内容宽度（实测卡片 357 > 侧栏 326）。
   只给最内层 .zrg-aside-name 设是不够的，链路每一级都要放行。 */
.zrg-aside-card,
.zrg-aside-card > .zrg-aside-links,
.zrg-aside-card .zrg-aside-links > li,
.zrg-aside-card .zrg-aside-links > li > a,
.zrg-aside-card .zrg-aside-links > li > span {
  min-width: 0;
}

/* ============================================================
   卡片封面角标 + 标题下标签行
   用户反馈：封面角标偏大、标题下方留空。角标收小一档；标签行填入词条 tags。
   ============================================================ */
.zrg-content-cover .zrg-content-badge {
  font-size: 11px;
  line-height: 1.5;
  padding: 2px 8px;
  font-weight: 400;
}
.zrg-content-card .zrg-content-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
}
.zrg-content-card .zrg-content-tags .badg {
  font-size: 11px;
  line-height: 1.5;
  padding: 2px 7px;
  font-weight: 400;
}
/* 说明文字与标签行之间留出呼吸，避免挤在一起 */
.zrg-content-card .zrg-content-tags + .zrg-content-excerpt {
  margin-top: 8px;
}

/* ============================================================
   地名库搜索框按钮：统一为主题色（原先用主题的 .but jb-blue 蓝色按钮，
   与其它页面的筛选胶囊风格不一致 —— 用户要求统一）。
   搜索仍需表单提交（文本输入无法用链接表达），只有按钮样式统一。
   ============================================================ */
/* 选择器刻意写得比主题的按钮规则更具体（.zrg-page + [type]），
   否则会被主题 main.min.css（在 frontend.css 之后加载）的 button 样式压住
   —— 实测按钮仍是主题默认的灰底 44px。不靠 !important。 */
.zrg-page .zrg-search > button[type="submit"],
.zrg-page .zrg-search .zrg-search-submit {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--theme-color, #f04494);
  color: #fff;
  font-size: 13px;
  line-height: 34px;
  cursor: pointer;
}
.zrg-page .zrg-search > button[type="submit"]:hover,
.zrg-page .zrg-search > button[type="submit"]:focus-visible {
  opacity: .88;
}

/* ============================================================
   中国省级地图（可交互）
   配色沿用主题语汇：底色 = 主题色极淡填充，描边 = 主题边框色，
   hover = 主题色填充 + 白字浮起，点击进入该省级地名页。
   ============================================================ */
.zrg-cnmap-wrap {
  margin: 4px auto 10px;
  max-width: 560px;
}
.zrg-cnmap-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.zrg-cnmap-p {
  /* 每省一色（官方「分省设色」淡彩），颜色由 SVG 内联 --zrg-pc 注入 */
  fill: var(--zrg-pc, color-mix(in oklab, var(--theme-color, #f04494) 10%, var(--main-bg-color, #fff)));
  stroke: color-mix(in oklab, var(--theme-color, #f04494) 30%, var(--main-border-color, rgba(0,0,0,.12)));
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s ease, stroke .18s ease;
}
.zrg-cnmap-p:hover,
.zrg-cnmap-p.is-active {
  fill: var(--theme-color, #f04494);
  stroke: var(--theme-color, #f04494);
}
.zrg-cnmap-p--inset {
  stroke-width: .5;
}
.zrg-cnmap-line {
  fill: none;
  stroke: var(--theme-color, #f04494);
  stroke-width: 1.6;
  stroke-linecap: round;
  pointer-events: none;
}
.zrg-cnmap-inset-bg {
  fill: color-mix(in oklab, var(--theme-color, #f04494) 3%, var(--main-bg-color, #fff));
}
.zrg-cnmap-inset-edge {
  fill: none;
  stroke: var(--main-border-color, rgba(0, 0, 0, .16));
  stroke-width: 1;
}
.zrg-cnmap-inset-label {
  font-size: 11px;
  fill: var(--muted-color, #888);
}
.zrg-cnmap-note {
  font-size: 12px;
  line-height: 1.7;
  margin: 8px 0 0;
}
@media (max-width: 640px) {
  .zrg-cnmap-inset-label {
    font-size: 9px;
  }
}

/* 省名标注：白描边保证压在色块与边界线上都能读清；pointer-events:none 不挡省份点击 */
.zrg-cnmap-label {
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #5b5f66;
  font-weight: 400;
  letter-spacing: .5px;
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  .zrg-cnmap-label {
    font-size: 10px;
    stroke-width: 2;
  }
}

/* 2026-09：列表「条目名」由 h3 降级为 div.zrg-item-title（列表项不该占标题层级，
   地名页曾有 34 个 h3）。下方镜像原 h3 规则，保证外观零变化。 */
.zrg-item-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.zrg-page .zrg-card .zrg-item-title { margin-bottom: 12px; }
.zrg-page .zrg-grid--tiles .zrg-card .zrg-item-title { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 500; }
.zrg-page .zrg-grid--tiles .zrg-card:focus-visible .zrg-item-title { color: var(--theme-color); }
.zrg-content-card .zrg-content-body .zrg-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }
.zrg-samename-item .zrg-item-title { margin: 0; }

/* 2026-09：地名库页面去掉头部「捐助本站」入口（含其悬停出的「助站书友/助站居士」卡片）。
   用户口径：地名区不放任何收费/捐助信息，避免给收录页带上付费信号。
   用 :has() 精确命中「容器里有该按钮」的那一个 span，不会误伤其它 hover-show。 */
body.is-zrg-page .hover-show.inline-block.zrg-hide-payvip { display: none !important; }

/* —— 归属地域徽标（地名页/频道页上标出条目真实归属，如省页里的「平江县」）—— */
.zrg-content-region,
.zrg-entry-region,
.zrg-person-region {
	opacity: .85;
}
.zrg-content-region i,
.zrg-entry-region i,
.zrg-person-region i {
	margin-right: 2px;
	font-size: .9em;
}

/* —— 页内目录（锚点导航，2026-09-29 加；2026-09-29 二次细化为编号卡片）——
   宽屏：浅底卡片 + auto-fill 网格，每项带两位编号（tabular-nums 对齐）；
   窄屏：一条横向滚动条带（本站正文里的长列表一贯做法），不占竖向空间；
   当前所在节由 frontend.js 打 .is-current（进入视口上沿的那一节）。 */
.zrg-anchor { scroll-margin-top: 90px; }               /* 锚点跳转不被吸顶头部挡住 */

.zrg-toc-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
  gap: 2px 8px;
  background: var(--zrg-tint);
  border: 1px solid var(--zrg-border);
  border-radius: var(--zrg-radius);
  counter-reset: zrg-toc;
}

.zrg-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--zrg-radius-sm);
  color: var(--zrg-text);
  text-decoration: none;
  transition: background-color .18s var(--zrg-ease), color .18s var(--zrg-ease);
}

/* 两位编号（01 02 …）：用计数器，不写死在 PHP 里 */
.zrg-toc-list a::before {
  counter-increment: zrg-toc;
  content: counter(zrg-toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.8;
  color: var(--zrg-muted);
  font-variant-numeric: tabular-nums;
}

.zrg-toc-list a:hover,
.zrg-toc-list a:focus-visible {
  background: var(--zrg-tint-strong);
  color: var(--zrg-accent);
}

.zrg-toc-list a.is-current {
  background: var(--zrg-tint-strong);
  color: var(--zrg-accent);
}

.zrg-toc-list a.is-current::before {
  color: var(--zrg-accent);
}

@media (max-width: 640px) {
  .zrg-toc-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .zrg-toc-list li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .zrg-toc-list a {
    white-space: nowrap;
  }
}

/* —— 相邻地区（四至）——
   行式语言跟齐「古称/曾用名」区块（发丝分隔线 + 首末行收边）；
   方位用主题 .badg 的角标配方（4px 圆角 / 12px），不自造胶囊。

   列只有两栏：方位 | 内容（地名 + 状态，备注另起一行）。
   曾经试过「方位 | 地名 | 备注右贴」三栏 —— 宽度不够时 grid 会把 auto 列
   一路压到 min-content，备注变成每行一两个字竖着掉下来（700px 档实测）。
   两栏版在任何宽度都不会挤，备注也不再甩出孤立字。 */
.zrg-adj-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zrg-adj-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--zrg-border);
}

.zrg-adj-row:first-child {
  padding-top: 2px;
}

.zrg-adj-row:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.zrg-adj-dir {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--zrg-tint-strong);
  color: var(--zrg-muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
}

.zrg-adj-body {
  min-width: 0;
}

.zrg-adj-name {
  font-weight: 500;
  text-wrap: pretty;
}

/* 可点的邻区名沿用站内内联链接惯例（.zrg-region-link：平时不亮，悬停才给主题色 + 下划线），
   不额外发明点击感。 */
.zrg-adj-name.zrg-region-link {
  font-weight: 500;
}

.zrg-adj-state {
  font-size: 12px;
}

.zrg-adj-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--zrg-muted);
  text-wrap: pretty;
}

/* 代码查无此地：只做「待核对」层级，不加彩色（站点唯一允许的裸色是强调色底上的文字） */
.zrg-adj-badcode code {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--zrg-tint);
}

.zrg-adj-src {
  font-size: 12px;
  margin: 10px 0 0;
}

/* 反向记载：与正向隔一条虚线，语气是「附注」而非主数据 */
.zrg-adj-reverse {
  text-wrap: pretty;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--zrg-border);
  font-size: 13px;
  line-height: 1.8;
  color: var(--zrg-muted);
}

.zrg-adj-reverse-title {
  margin-right: 6px;
}

.zrg-adj-reverse a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--zrg-ease), border-color .18s var(--zrg-ease);
}

.zrg-adj-reverse a:hover,
.zrg-adj-reverse a:focus-visible {
  color: var(--zrg-accent);
  border-bottom-color: var(--zrg-accent);
}

/* —— 自然地理 ——
   术语在左、释义在右（术语列 84px，宽屏一眼能扫），
   窄屏术语折到正文上方并加重，避免左列被挤成逐字竖排。 */
.zrg-geo-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--zrg-border);
}

.zrg-geo-item:first-child {
  padding-top: 2px;
}

.zrg-geo-item:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

.zrg-geo-title {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--zrg-muted);
  white-space: nowrap;
}

.zrg-geo-text {
  line-height: 1.8;
  text-wrap: pretty;
}

.zrg-geo-text > p {
  margin: 0 0 8px;
}

.zrg-geo-text > p:last-child {
  margin-bottom: 0;
}

/* 区块自身窄于 460px（手机，或桌面档里正文栏被挤窄）→ 备注折到地名下方、左对齐，
   当作「第二行说明」，不再右贴成一条细列。 */

/* 兜底：不支持容器查询的浏览器仍按视口判断（与上面等效） */
@media (max-width: 640px) {
  .zrg-geo-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .zrg-geo-title {
    font-weight: 600;
    color: inherit;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   数据版本更新说明（侧栏卡，2026-09-29 加；同日二次重排为时间轴）
   版面：标题行（当前版本角标右贴）→ 说明行 → 时间轴（最近 3 条）→「更早的 N 条」→ 免责声明
   时间轴沿用「历史沿革」的语言：中性细轨 + 圆点，最新一版实心点。
   （贴边发亮的左边框在本主题里被判过「AI 生成感」，不要用。）
   -------------------------------------------------------------------------- */
.zrg-version-card > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.zrg-version-current {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--zrg-accent-weak);
  color: var(--zrg-accent);
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.zrg-version-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  margin: 5px 0 12px;
  font-size: 12px;
  color: var(--zrg-muted);
}

.zrg-version-list {
  position: relative;
  margin: 0;
  padding: 0 0 0 15px;
  list-style: none;
}

/* 时间轴细轨 */
.zrg-version-list::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--zrg-border);
}

.zrg-version-item {
  position: relative;
  padding: 0 0 14px;
}

.zrg-version-item:last-child { padding-bottom: 0; }

/* 节点：历史版＝实心彩色点（--zrg-dot-past）；最新一版换成强调色 + 弱光环。
   站长 2026-09-29：每个历史节点都要有颜色的点，且与最新点区分开。 */
.zrg-version-item::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zrg-dot-past);
}

.zrg-version-item.is-latest::before {
  background: var(--zrg-accent);
  box-shadow: 0 0 0 3px var(--zrg-accent-weak);
}

.zrg-version-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--zrg-muted);
}

/* 类型角标（收录/更新/导入/核验）：历史版用与点同色系的浅蓝底 + 蓝字；
   最新一版换成强调色底 + 强调色字（与「已核验」角标同一套配方）——
   站长 2026-09-29：方块也给上颜色，且与最新一版区分。 */
.zrg-version-kind {
  padding: 0 6px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--zrg-dot-past) 14%, transparent);
  /* 文字色与 currentColor 混：--zrg-text 在本站会退成 `inherit`，混进 color-mix 会失效；
     currentColor 始终有效，且夜间模式自动跟随（本文件铁律：不写裸色值）。 */
  color: color-mix(in oklab, var(--zrg-dot-past) 78%, currentColor);
  font-size: 11px;
  line-height: 1.8;
}

.zrg-version-item.is-latest .zrg-version-kind {
  background: color-mix(in oklab, var(--zrg-accent) 12%, transparent);
  color: var(--zrg-accent);
}

.zrg-version-date { font-variant-numeric: tabular-nums; }

/* 谁录的贴右端，前面带「操作人：」标签 —— 免得一个名字孤零零飘在右边。
   「操作人：」用浅色，名字用正文色；整块不拆行（要换行就整体换到下一行）。 */
.zrg-version-op {
  margin-left: auto;
  white-space: nowrap;
}

.zrg-version-op-key {
  color: var(--zrg-muted);
}

.zrg-version-op-name {
  color: var(--zrg-text);
}

/* 摘要：字重/字色锁死，避免被侧栏卡的其他 p 规则带偏（最新一版不该看起来更粗） */
.zrg-version-sum {
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--zrg-text);
  text-wrap: pretty;
}

.zrg-version-src {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--zrg-muted);
  text-wrap: pretty;
}

.zrg-version-more { margin-top: 10px; }

.zrg-version-more > summary {
  font-size: 12px;
  color: var(--zrg-muted);
  cursor: pointer;
  list-style: none;
}

.zrg-version-more > summary::-webkit-details-marker { display: none; }

.zrg-version-more > summary::before {
  content: '⌄';
  margin-right: 5px;
}

.zrg-version-more[open] > summary::before { content: '⌃'; }

.zrg-version-more > summary:hover,
.zrg-version-more > summary:focus-visible { color: var(--zrg-accent); }

/* 展开后的更早条目：沿用同一条时间轴（缩进对齐） */
.zrg-version-list--cont { margin-top: 10px; }

.zrg-version-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
}

/* ==========================================================================
   面包屑：手机端强制单行 + 超长处理（2026-09-29 站长要求）
   --------------------------------------------------------------------------
   原来 flex-wrap: wrap —— 长路径/长书名在手机上会折成两行。
   方案（不改任何现有视觉，只加两条行为规则）：
     ① 强制单行：flex-wrap: nowrap
     ② 各节（首页/栏目/上级）不收缩，保持可读
     ③ 末节「当前页名」允许收缩并用省略号 —— 最长的一段通常是书名/地名，
        截断它比截断路径更不伤信息
     ④ 若连路径本身都超长：整条横向可滑动（隐藏滚动条，手指可滑），
        仍然一行、不撑破容器
   ========================================================================== */
.zrg-page-crumb .zrg-breadcrumb,
.zrg-breadcrumb {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zrg-page-crumb .zrg-breadcrumb::-webkit-scrollbar,
.zrg-breadcrumb::-webkit-scrollbar {
  display: none;
}
.zrg-page-crumb .zrg-breadcrumb > a,
.zrg-breadcrumb > a {
  flex: 0 0 auto;
}
.zrg-page-crumb .zrg-breadcrumb .cur,
.zrg-breadcrumb .cur {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==========================================================================
   与 ZBP（资源目录 / 资源详情页）统一 —— 站长 2026-10-01
   1) 面包屑：12.5px / 无内距 / 55% 主字色 / 下间距 8 / 满宽（撤掉给旧侧栏让位的收窄）
   2) hero：从「卡片内的淡底块」改成「通栏淡底带」——铺满屏宽、内容仍收在 1170，
      内部「文字在左 + 定位图在右」两栏原样保留。
   实现说明：hero 挂在 .zrg-main 里。桌面有侧栏时 .zrg-main 是左栏（不居中），
   用「视口宽 - 1170」的偏移量出血；≤1023 单栏时 .zrg-main 自身居中，改用标准的
   calc(50% - 50vw) 写法（它在居中容器里自洽，不需要写死数字）。
   ========================================================================== */
/* 出血带比可视区宽出滚动条宽 → 根元素收口（写在 body 上会被传播到视口而失效） */
html { overflow-x: hidden; scrollbar-gutter: stable; }

/* ---- 1. 面包屑 ---- */
.zrg-page .zrg-page-crumb,
.zrg-page .zrg-breadcrumb--wide { margin: 0 0 8px; }
.zrg-page .zrg-breadcrumb {
    padding: 0;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: color-mix(in oklab, var(--zrg-text) 55%, transparent);
}
.zrg-page .zrg-breadcrumb > a { color: inherit; }
.zrg-page .zrg-breadcrumb > a:hover { color: var(--zrg-accent); }

/* ---- 2. hero 通栏淡底带（标记已提到卡片层，与 ZBP 同构：卡片内、居中，故用标准出血写法） ---- */
/* 说明：hero 由 .zrg-main 里提到 <div class="zrg-layout"> 之前（10 个模板同改），
   于是它与 ZBP 的 hero 一样落在「居中的卡片内容盒」里，calc(50% - 50vw) 自洽，不需要写死偏移量。
   竖向 padding 30/34 与 ZBP 资源目录一致；横向让出「(视口 − 1170)/2」，内容与卡片左缘成一条竖线。 */
.zrg-page .zrg-hero-bleed {
    --zrg-hero-base: var(--body-bg-color, var(--zrg-surface-2));
    position: relative;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 0 calc(50% - 50vw) 24px;
    padding: 30px max(15px, calc((100vw - 1170px) / 2)) 34px;
    background: color-mix(in oklab, var(--zrg-accent) 8%, var(--zrg-hero-base));
    border-bottom: 0;
    border-radius: 0;
    overflow: hidden;
}
/* 定位图：原来靠负边距抵消卡片内距往边上贴，现在它就在内容区里 —— 四角统一 8px 圆角 */
.zrg-page .zrg-hero-map { margin: 0; border-radius: var(--zrg-radius-sm); }
/* ---- 3. 左右栏分开（照 ZBP）----
   ZBP 实测：.zpb-article / .zpb-layout 都透明；.zpb-main 自己就是一张白卡
   （814 宽 / 圆角 12 / 内距 24），右侧每张侧栏卡各自独立白卡（333 宽）。
   ZRG 原来两栏共用外层 article.zrg-article 那一张白卡，主栏没有自己的卡 ——
   这里把外层让出来，主栏自己成卡；侧栏卡本来已是 .zib-widget 白卡，不动。 */
.zrg-page .zrg-article {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.zrg-page .zrg-main {
    box-sizing: border-box;      /* 不给 border-box 的话 padding 会把 814 顶成 814+48 */
    width: 100%;
    padding: 24px;                /* 与 ZBP 的 .zpb-main 同值（原 20px 24px）*/
    background: var(--zrg-surface);
    border-radius: var(--zrg-radius);
}

@media (max-width: 767px) {
    .zrg-page .zrg-hero-bleed {
        margin: 0 calc(50% - 50vw) 20px;
        padding: 24px max(15px, calc((100vw - 1170px) / 2)) 26px;
    }
    /* 手机上定位图是绝对定位贴在带子右上角：右边距跟着同样的内距，别顶到视口边缘 */
    .zrg-page .zrg-hero-map { right: max(15px, calc((100vw - 1170px) / 2)); }
}

/* ---- 4. 头卡里的搜索框（站长 2026-10-01：搜索放到 hero 条里，样式与 ZBP 资源库一致）----
   ZBP 配方（zibll-pdf-books/assets/css/library-layout.css · .zpb-hero-search）：
     外壳 flex / 高 52 / 圆角 26 / 内距 0 8px 0 16px / 1px 描边 / 白底 / 最大宽 720
     图标 15 muted；输入框 flex:1、无边框透明底、13.5px；按钮高 36 / 圆角 18 / 内距 0 24 / 13px
     手机：外壳 44 / 圆角 22 / 内距 0 6 0 14；输入 16px（防 iOS 聚焦缩放）；按钮 32 / 圆角 16 / 12.5px
   颜色一律走 ZRG 令牌（DESIGN.md 铁律 1），不写裸色值。 */
.zrg-page .zrg-hero-search {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 52px;
    /* min(720px, 100%)：头卡右侧有定位图时，左栏窄于 720 —— 写死 720 会压到地图上（站长实拍）。 */
    max-width: min(720px, 100%);
    margin: 14px 0 2px;
    padding: 0 8px 0 16px;
    border: 1px solid var(--zrg-border);
    border-radius: 26px;
    background: var(--main-bg-color, #fff);   /* 锁死底色：主题会给 input 的聚焦态着色（ZBP 踩过「填入文字后背景变深」） */
}
.zrg-page .zrg-hero-search .fa {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--zrg-muted);
}
.zrg-page .zrg-hero-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: var(--zrg-text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}
.zrg-page .zrg-hero-search input[type="search"]::-webkit-search-decoration,
.zrg-page .zrg-hero-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.zrg-page .zrg-hero-search input::placeholder { color: var(--zrg-muted); }
/* Chrome 自动填充会刷掉底色：UA 行为，只能 !important 盖 */
.zrg-page .zrg-hero-search input[type="search"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--main-bg-color, #fff) inset !important;
    box-shadow: 0 0 0 1000px var(--main-bg-color, #fff) inset !important;
    -webkit-text-fill-color: var(--zrg-text) !important;
    caret-color: var(--zrg-text);
}
.zrg-page .zrg-hero-search button {
    flex: 0 0 auto;
    height: 36px;
    min-height: 0;        /* 主题给 button 兜了 min-height:38px，会把高度顶高 2px */
    padding: 0 24px;
    border: 0;
    border-radius: 18px;
    background: var(--zrg-accent);
    color: var(--zrg-on-accent);
    font-size: 13px;
    cursor: pointer;
}
.zrg-page .zrg-hero-search button:hover,
.zrg-page .zrg-hero-search button:focus-visible { opacity: .9; }
@media (max-width: 767px) {
    .zrg-page .zrg-hero-search {
        height: 44px;
        max-width: none;
        padding: 0 6px 0 14px;
        border-radius: 22px;
    }
    .zrg-page .zrg-hero-search input[type="search"] { font-size: 16px; }
    .zrg-page .zrg-hero-search button {
        height: 32px;
        padding: 0 16px;
        border-radius: 16px;
        font-size: 12.5px;
    }
}
/* 头卡搜索下面的辅助行（位置与 ZBP 头卡里「热门检索」那一行一致） */
.zrg-page .zrg-hero-search-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.7;
}
.zrg-page .zrg-hero-search-note a {
    color: var(--zrg-muted);
    text-decoration: none;
}
.zrg-page .zrg-hero-search-note a:hover,
.zrg-page .zrg-hero-search-note a:focus-visible { color: var(--zrg-accent); }
/* ---- 5. 头卡里的图跟随头卡高度自动填满（站长 2026-10-01）----
   原来竖向内距写在带子上（30 / 34），图只能长到「内容行高」，上下各留一条底色边。
   把竖向内距挪到左栏（.zrg-hero-main），带子自身竖向不留白 ——
   图作为栅格子项被拉伸到整行，高度 = 带高，内容多高图就多高，自动跟随。 */
.zrg-page .zrg-hero-bleed { padding: 0 max(15px, calc((100vw - 1170px) / 2)); }
.zrg-page .zrg-hero-bleed > .zrg-hero-main { padding: 30px 0 34px; }
/* 顶到上下沿之后圆角会在四角露出底色，去掉 */
.zrg-page .zrg-hero-map { border-radius: 0; }
@media (max-width: 767px) {
    .zrg-page .zrg-hero-bleed { padding: 0 15px; }
    .zrg-page .zrg-hero-bleed > .zrg-hero-main { padding: 24px 0 26px; }
}
/* ---- 6. 对齐修正（站长 2026-10-01：图片没对齐最右侧、区块顶部没对齐）----
   侧栏那组 margin-top / margin-right: -15px 是为「两栏共用一张白卡、卡片内距 15px」补的：
   让首卡上移 15px 贴住出血面板的顶线、右移 15px 贴住卡片右缘。
   现在卡片已让出（左右栏分开）、出血面板也移到卡外 —— 这两个负偏移就变成错位：
   侧栏首卡比左栏高 15px（顶线不齐），右缘又比内容右缘多出 15px（右侧不齐，
   而右侧的定位图右缘正好在内容右缘上）。去掉它们，两栏各自落在自己的轨道上。 */
.zrg-page .zrg-aside {
    margin-top: 0;
    margin-right: 0;
}
/* ---- 7. 首个区块的顶距（站长 2026-10-01：这里比 ZBP 的空白高一点）----
   原来 = 卡内距 20 + 区块自身 margin-top 18 → 标题被推下 42px（ZBP 是 24px）。
   卡片内距已改 24，再把卡内第一个子块的顶距清零 —— 标题正好落在卡顶 +24px，与 ZBP 一致。
   块与块之间的间距（.zrg-section 的 18px）不动。 */
.zrg-page .zrg-main > :first-child { margin-top: 0; }
/* ---- 8. 地图融入头卡（站长 2026-10-01 定稿）----
   前两版都不对：① 只补右缘线性渐隐 → 上下仍是硬边；② 居中椭圆 → 中心实、边角虚，
   但四条边的中段仍留有约 2/3 不透明度，远看还是一个方块。
   定稿：**四条边都化到 0** —— 两条线性渐变（横、竖）相乘（mask-composite: intersect），
   每边从边缘的 0 渐入到 26%(横) / 22%(竖) 处实心，中段保持实心。
   这样不存在任何一条硬边，图整体化进头卡底色里；
   容器底色一并 none，免得化开后又留一层方块底。
   遮罩加在 <img>（「天地图」版权字与经纬度角标在容器里，不能被洗淡）。
   只在桌面档改；手机端地图是右上角小缩略图，另一套 radial。 */
@media (min-width: 1024px) {
    .zrg-page .zrg-hero-map {
        -webkit-mask-image: none;
        mask-image: none;
        background: none;
    }
    /* 容器上还挂着一层装饰性粉色渐变（::after，inset:0）——
       图化开之后它就变成一个实心粉方块，正是「边缘突兀」的元凶之一。 */
    .zrg-page .zrg-hero-map::after {
        display: none;
    }
    .zrg-page .zrg-hero-map img {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%),
                            linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%),
                    linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}


/* ---- 9. 筛选区跟 ZBP 一致（站长 2026-10-01）----
   ZBP 实测（.zpb-filter-row / .zpb-chips / .zpb-chip）：
     行 内距 10px 0 / gap 12；胶囊容器 flex-wrap:wrap（**换行，不横滚**）+ gap 8；
     胶囊 高 30 / 圆角 15 / 内距 0 12 / 字号 12.5。
   ZRG 原来是「胶囊容器 overflow-x:auto、不换行」→ 地域那一排会拖出一条横向滚动条（站长实拍）。
   只在桌面档改：手机端保留 ZRG 原有的「横滑条带」写法（窄屏折行会把标题挤乱，是当初刻意的）。 */
@media (min-width: 1024px) {
    .zrg-page .zrg-filter-row {
        padding: 10px 0;
        align-items: flex-start;
    }
    /* 标签与胶囊同一行（ZBP 同构：标签定宽在左，胶囊自成列在右并按列宽换行）。
       不给胶囊列 flex:1 + min-width:0 的话，overflow 从 auto 变 visible 后
       它的最小内容宽度会把标签挤到上一行。 */
    .zrg-page .zrg-filter-label {
        flex: 0 0 auto;
        padding-top: 7px;
    }
    .zrg-page .zrg-filter-row .zrg-tabs {
        /* 基础值 0（不是 auto）：flex 的换行判定用「假设主尺寸」，
           取 auto 就是内容宽度 —— 地域那一排内容较宽，会被判成一行放不下而整列换行，
           标签于是被挤到上一行。给 0% 后必定与标签同行，再按剩余宽度换行。 */
        flex: 1 1 0%;
        min-width: 0;
        flex-wrap: wrap;
        overflow: visible;
        gap: 8px;
    }
    .zrg-page .zrg-filter-row .zrg-tab {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 12px;
        border-radius: 15px;
        font-size: 12.5px;
        line-height: 1.2;
    }
}
/* ---- 10. 地域层级路径（站长 2026-10-01：与其它筛选行同一语言）----
   路径本身就是一排胶囊（复用 .zrg-tab）：全国 › 省 › 市，当前地域是选中的胶囊，
   再点一次 = 清空（与 ZBP 重复点选中胶囊同义）。
   ⚠️ 必须显式 align-items: center —— .zrg-tabs 的默认 align-items 是 stretch，
   箭头（<i> 图标）会被拉成整行高、字形贴在顶部，看起来「没居中」（站长实拍）。 */
.zrg-page .zrg-region-path {
    align-items: center;
}
.zrg-page .zrg-region-path > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
    color: var(--zrg-muted);
}
/* ---- 11. 筛选块 = ZBP 同款独立白卡（站长 2026-10-01：筛选的样式没有写）----
   ZBP 的筛选是**独立一张白卡**（section.zib-widget.box-body.zpb-filter：白底 / 圆角 12 / 内距 18px 22px），
   夹在头卡与列表卡之间；ZRG 原来只是列表卡内部一块透明区域（没有卡片边界）。
   标记侧已把筛选块移到 <article> 之前（archive-content / archive-person）。
   选择器用 .content-layout > .zrg-filters 只命中「移到卡外」的那些 ——
   搜索页的筛选仍在自己的卡里，不该再套一层白卡（卡中卡会露出第二层圆角）。 */
.zrg-page .content-layout > .zrg-filters {
    margin: 0 0 20px;
    padding: 18px 22px;
    background: var(--zrg-surface);
    border-top: 0;
    border-radius: var(--zrg-radius);
}
/* 原来那条两端渐隐的发丝线属于「卡内分隔」，独立成卡后不再需要 */
.zrg-page .content-layout > .zrg-filters::after {
    display: none;
}
/* ---- 12. 词条列表行排版优化（站长 2026-10-01：还需要再优化一下）----
   原来 .zrg-entry-line 是 justify-content: space-between —— 标题 / 类型 / 归属地域
   三个元素被摊到整行宽，类型孤零零飘在中间（与左右都不挨着）。
   改成：标题与类型贴左（类型就是标题的注解），归属地域靠右成一条竖线。
   另把悬停反馈从只有 :focus-visible 扩到 :hover（ZRG 自己的卡片语言：箭头提亮并右移一点）。 */
.zrg-page .zrg-entry-line {
    justify-content: flex-start;
}
.zrg-page .zrg-entry-line .zrg-entry-region {
    margin-left: auto;
}
.zrg-page .zrg-entry-row:hover .zrg-entry-title {
    color: var(--theme-color, #f04494);
}
.zrg-page .zrg-entry-row:hover .zrg-entry-arrow {
    opacity: .8;
    transform: translateX(2px);
}
/* ==========================================================================
   移动端：hero 里的地图要贴到卡片右缘（站长 2026-10-01）
   --------------------------------------------------------------------------
   现象：手机上（≤720）地图右边总差 15px，没顶到卡片右缘。
   原因：地图是 .zrg-hero 的直接子元素、position:absolute; right:0，
        而绝对定位的 right:0 是相对**父级的内距盒**算的 —— hero 左右各有 15px 内距，
        于是地图永远缩在里面 15px（hero 又有 overflow:hidden，负 right 会被裁掉）。
   改法：把 hero 的右内距抽掉、15px 还给内文（.zrg-hero-main），
        地图的 right:0 就落在 hero 的**边框盒**上 = 卡片右缘。视觉与原来完全一致，
        只是地图那一侧不再留白。
   ========================================================================== */
@media (max-width: 720px) {
  /* 出血面板右内距归零，15px 还给内文 —— 地图的 right 才有机会落到边框盒上 */
  .zrg-page .zrg-hero-bleed { padding-right: 0; }
  .zrg-page .zrg-hero-bleed > .zrg-hero-main { padding-right: 15px; }
  /* 地图自己也要归零：≤767 那条 .zrg-page .zrg-hero-map 会把它按回 15px */
  .zrg-page .zrg-hero-map { right: 0; }
}

/* ==========================================================================
   右栏：手机精简（站长 2026-10-02 澄清后的口径）
   站长原话：「我不是要删除右侧边栏，只是说在手机上就只显示出数据版本更新说明，
   桌面端还是需要照旧的呀。」
   所以 —— 桌面：三张卡（速览 / 延伸阅读 / 数据版本更新说明）照旧全显示；
           ≤767：只留「数据版本更新说明」，其余卡片不显示。
   用 :has 判断，不改模板；以后口径变了删这段即可。
   ========================================================================== */
@media (max-width: 767px) {
  .zrg-aside > .zrg-aside-card:not(.zrg-version-card) { display: none; }
  /* 手机端侧栏里没有版本卡时，整条侧栏不出，免得多出一个空档 */
  .zrg-layout > .zrg-aside.zrg-aside--empty { display: none; }
}

/* ==========================================================================
   书目卡改版（站长 2026-10-02）
   站长：做成 ZBP 资源卡那种样式（图2）。
   数值照抄 zibll-pdf-books/assets/css/library-layout.css 的 .zpb-card 一套。
   注意：轮播、编号分页那几条选择器是 .zrg-page 开头（3 个类），优先级更高，
   这里只覆盖普通栅格里的卡片，不会动到轮播那套尺寸。
   ========================================================================== */
@media (min-width: 768px) {
  .zrg-books-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  }
}

.zrg-book {
  padding: 10px 10px 16px;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.zrg-book:hover,
.zrg-book:focus-visible {
  transform: none;
  box-shadow: 0 6px 18px color-mix(in oklab, currentColor 8%, transparent);
  border-color: color-mix(in oklab, var(--theme-color, #f04494) 35%, transparent);
}

/* 封面：与 ZBP .zpb-card-cover 同比例（293/168），contain 完整显示不裁切 */
.zrg-book-cover {
  display: block;
  aspect-ratio: 293 / 168;
  border-radius: 8px;
  background: #edeef1;
}

.zrg-book-cover img,
.zrg-book-cover .linebook-cover {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.zrg-book-body { padding: 0; }

.zrg-book-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 14px 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 22px;
  min-height: 44px;
}

.zrg-book-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 11px;
}

.zrg-book-meta .zrg-book-dl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--theme-color, #f04494);
}

.zrg-book-meta .zrg-book-dl .fa { font-size: 11px; }

.zrg-book:hover .zrg-book-title { color: var(--theme-color, #f04494); }

/* ==========================================================================
   底部空白收窄（站长 2026-10-02：卡片与 footer 之间太空）
   实测（手机 390）原本叠了三层 20px：
     版本卡 margin-bottom 20 + .zrg-article margin-bottom 20 + .zrg-page padding-bottom 20 = 60px
   ZBP 同类页面只有 .zrg-article 那一层（20px）。
   处理：页面下内距归 0（上面已改），侧栏最后一张卡的下外边距也清零 → 只留 20px。
   ========================================================================== */
.zrg-page .zrg-aside > .zrg-aside-card:last-child { margin-bottom: 0; }

/* ==========================================================================
   地名页 / 名人页 hero 统计格：手机端拉满整行、三格等分
   2026-10-02 站长截图反馈：统计卡片（地方文化/地方特产/历史名人）在手机上只占左侧约四成宽。
   根因：.zrg-hero-stats 用了 width: fit-content（当初为了"只有 1 个统计时按内容宽收缩"），
   3 个统计时在窄屏就只占一小条。这里只改手机档，桌面维持原样。
   ========================================================================== */
@media screen and (max-width: 720px){
  .zrg-hero .zrg-hero-stats{ width:100%; max-width:100%; }
  .zrg-hero .zrg-hero-stats .zrg-stat{ flex:1 1 0; min-width:0; justify-content:center; text-align:center; }
  .zrg-hero .zrg-hero-stats .zrg-stat .zrg-stat-num,
  .zrg-hero .zrg-hero-stats .zrg-stat .zrg-stat-label{ text-align:center; }
}

/* 追加（2026-10-02）：三格等分之后，格内数字与文字要居中——原设计是 fit-content 靠左，
   所以 .zrg-stat-num / .zrg-stat-label 需要显式居中，同时把每格改成纵向居中的 flex。 */
@media screen and (max-width: 720px){
  .zrg-hero .zrg-hero-stats .zrg-stat{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .zrg-hero .zrg-hero-stats .zrg-stat-num,
  .zrg-hero .zrg-hero-stats .zrg-stat-label{
    text-align:center; width:100%;
  }
}

/* ==========================================================================
   下级地区瓦片：手机端固定一行两个（2026-10-02 站长反馈）
   根因：.zrg-grid--tiles 用 auto-fill + minmax(min(158px,100%),1fr)，
   390px 下两列 2×158=316 本可容纳，但加上网格间距就超过可用宽，auto-fill 直接退成一列。
   这里在手机档显式给两列，并同步收内距与字号，保证「东城区 + ›」在 170px 卡内不折行。
   ========================================================================== */
@media screen and (max-width: 720px){
  #zrg-children .zrg-grid--tiles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #zrg-children .zrg-grid--tiles .zrg-card{
    padding: 10px 12px;
    gap: 4px;
  }
  #zrg-children .zrg-grid--tiles .zrg-card .zrg-item-title,
  #zrg-children .zrg-grid--tiles .zrg-card h3{
    font-size: 14px;
  }
  #zrg-children .zrg-grid--tiles .zrg-card-arrow{
    font-size: 12px;
  }
}



/* ==========================================================================
   词条列表 · 手机端布局（2026-10-02 重写）
   目标：一行一条，左侧配图按原始比例显示（不裁、不拉），右侧信息层次清楚、不截断。
   取代此前散落在 4 个 @media 块里的零散规则（含一版错误的 cover 竖版裁切）。
   ========================================================================== */
@media screen and (max-width: 720px){
  /* 行：左图右文；整行上下居中（站长要求图与文字块居中对齐） */
  .zrg-entry-row{ padding: 14px 0; gap: 12px; align-items: center; }
  .zrg-entry-row--thumb{ gap: 12px; padding: 14px 0; align-items: center; }

  /* 配图容器：给一个确定的占位宽，图按自身比例缩放在其中，垂直居中 */
  .zrg-entry-thumb{
    flex: 0 0 104px; width: 104px; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 6px;
    overflow: hidden; padding: 0; line-height: 0;
  }
  .zrg-entry-thumb img{
    display: block;
    width: auto; height: auto;
    max-width: 104px; max-height: 140px;
    object-fit: contain;
  }
  /* 无配图：容器塌成 0 宽，不占位、不露灰底 */
  .zrg-entry-thumb:empty{ display: none; }

  /* 文字列占满剩余宽度 */
  .zrg-entry-main{ flex: 1 1 auto; min-width: 0; }

  /* 标题与副标题分两行（行内并排时「文学家」这类尾巴在窄屏会被截断） */
  .zrg-entry-line{ display: block; }
  .zrg-entry-title{ display: block; font-size: 16px; line-height: 1.4; margin: 0; }
  .zrg-entry-type{ display: block; font-size: 12px; line-height: 1.5; margin-top: 2px; }
  .zrg-entry-meta{ display: block; font-size: 12.5px; line-height: 1.6; margin-top: 4px; }
  .zrg-entry-desc{
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 13.5px; line-height: 1.7; margin-top: 6px;
  }
  /* 箭头与标题行对齐，不参与换行 */
  .zrg-entry-arrow{ flex: 0 0 auto; align-self: center; margin: 0 0 0 6px; font-size: 13px; }
}

/* ==========================================================================
   词条详情页 hero 配图：补一层真正的遮罩（2026-10-02 站长截图）
   现状：.zrg-hero-map::after 只有一层 12% 的粉色渐变（为浅色线稿地图设计），
        压在照片上几乎不可见；且桌面档该伪元素被 display:none 关掉。
   处理：仅对「配图形态」（:has(.zrg-hero-media)）补真实压暗——
        左→右向正文淡出（保证左侧文字可读）+ 底部轻压，色值取页面底色系，
        与浅色站点一致，不引入黑色罩子。
   ========================================================================== */
.zrg-page .zrg-hero-map--cover{
  /* 遮罩不自造：站长 2026-10-03 指定「套用地名页的遮罩」。 */
  border-radius: 0 0 0 14px;
  overflow: hidden;
}
/* 站长 2026-10-03：「手机端也套用」+ 此前两次「可以压很重」。
   地名页那条 ::after 的结构原样照搬（200deg 粉调 + 底部渐隐），
   但它的浓度是给浅色线稿地图调的 12%，压照片等于看不见 → 只把浓度按比例提高，
   结构和方向与地名页保持一致（手机/桌面都生效，不再有 display:none 的差别）。 */
.zrg-page .zrg-hero-map--cover::after{
  background:
    linear-gradient(200deg,
      color-mix(in oklab, var(--theme-color, #f04494) 42%, transparent),
      transparent 62%),
    linear-gradient(to top,
      color-mix(in oklab, var(--main-bg-color) 72%, transparent),
      transparent 46%);
}