/*! 默认模板「政务工单」— 白纸 + 深墨绿印章 + 便签卡片；禁 clamp/vw/vh、禁位图；裸 HEX 只在 :root */
:root{color-scheme:light dark;
--c-paper:#FFFFFF;--c-paper-2:#F7F9F8;--c-ink-100:#EFF2F0;--c-ink-200:#E4E8E6;--c-ink-400:#6E7874;--c-ink-500:#5F6B67;--c-ink-700:#3A4441;--c-ink-900:#161C1A;--c-line-strong:#6F7B76;
--c-text:var(--c-ink-900);--c-text-sub:var(--c-ink-700);--c-text-mute:var(--c-ink-500);--c-text-off:var(--c-ink-400);--c-line:var(--c-ink-200);--c-surface-sub:var(--c-paper-2);--c-surface-head:var(--c-ink-100);
--c-info-text:#0B4A3C;--c-info-bg:#E8F1ED;--c-ok-text:#0B6B3A;--c-ok-bg:#E6F3EB;--c-warn-text:#7A4A00;--c-warn-bg:#FFF6E0;--c-danger-text:#A4211A;--c-danger-bg:#FDECEA;
--c-ring-in:var(--c-paper);--c-toast-bg:#1B211F;--c-toast-fg:#FFFFFF;
--c-brand-glow:rgba(15,74,60,.14);--c-shade:rgba(22,28,26,.05);--c-shade-2:rgba(22,28,26,.09);
--sh-1:0 1px 2px var(--c-shade),0 6px 18px var(--c-shade);--sh-2:0 2px 6px var(--c-shade),0 16px 36px var(--c-shade-2);
--ease:cubic-bezier(.2,.7,.3,1);--dur:.2s;
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
--t-zip-1:48px;--t-zip-2:40px;--t-zip-3:32px;--t-h1:24px;--t-h2:18px;--t-h3:15px;--t-body:14px;--t-caption:12px;
--s-1:8px;--s-2:16px;--s-3:24px;--s-4:40px;--s-5:56px;--s-6:72px;--s-half:4px;
--r-0:0;--r-1:10px;--r-2:12px;--r-3:16px;--r-full:999px}
@media (prefers-color-scheme:dark){:root{--c-paper:#101413;--c-paper-2:#171C1A;--c-ink-100:#1F2624;--c-ink-200:#2A322F;--c-ink-400:#8C9793;--c-ink-500:#A9B4B0;--c-ink-700:#C6CFCB;--c-ink-900:#E9EEEB;--c-line-strong:#6B7672;--c-info-text:#9BD6C3;--c-info-bg:#132A24;--c-ok-text:#7FD1A0;--c-ok-bg:#12291D;--c-warn-text:#F0C070;--c-warn-bg:#2E2410;--c-danger-text:#F5A29C;--c-danger-bg:#341A18;
--c-brand-glow:rgba(127,192,172,.20);--c-shade:rgba(0,0,0,.36);--c-shade-2:rgba(0,0,0,.48)}}
html[data-theme=light]{color-scheme:light}
/* 强制暗反过来声明一次：不写的话，系统是亮色时浏览器会把表单控件（下拉、滚动条）
   画成亮色，落在深底上像三块白补丁。auto 站不打 data-theme，仍跟随系统。 */
html[data-theme=dark]{color-scheme:dark}

/*② 基础：正文 14 / 说明 12 / 模块标题 18 / 大标题 24 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
/* 短页（关于 / 搜索无结果 / 404）页脚下面会露一条白带，看着像没加载完。
   用 body 纵向 flex 把页脚压到底：100% 不是视口单位，红线只禁 vw/vh。 */
body{margin:0;display:flex;flex-direction:column;min-height:100%;background:var(--c-paper);color:var(--c-text);font:400 var(--t-body)/1.7 var(--font-sans);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
/* 交叉轴上 margin:auto 会取消 stretch：不写 width:100%，main 会缩成内容宽再居中（首页从 1040 缩到 640） */
body>header,body>main,body>footer{width:100%}
main{flex:1 0 auto}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--t-h1);line-height:1.35}
h2{font-size:var(--t-h2);line-height:1.4}
h3{font-size:var(--t-h3);line-height:1.5;font-weight:600;letter-spacing:0}
p,dd{margin:0}
a{color:var(--c-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
ul,ol,dl{margin:0;padding:0;list-style:none}
svg{display:block}
.zip,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--c-ring-in),0 0 0 4px var(--c-focus);border-radius:var(--r-2)}
.skip-link{position:absolute;left:-9999px;top:var(--s-1);height:48px;line-height:48px;padding:0 var(--s-2);background:var(--c-brand-600);color:var(--c-paper);text-decoration:none;border-radius:var(--r-2)}
.skip-link:focus{left:var(--s-1)}
.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/*③ 版面骨架：宽屏 1120，区块之间留 40/56 */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s-2)}
.sec{margin-top:var(--s-4)}
/* 紧跟在页面标题后的第一块：40px 的上边距会变成标题与正文之间的一段空档（/youbian 曾出现）。
   标题已经自带视觉分隔，这里收到正常段间距。 */
h1+.sec{margin-top:var(--s-2)}
.sec>h2{margin-bottom:var(--s-2)}
.sec__desc{margin:-8px 0 var(--s-2);max-width:720px;font-size:var(--t-caption);line-height:1.7;color:var(--c-text-mute)}
.lead{max-width:640px}
.note,.rows__cap{font-size:var(--t-caption);line-height:1.7;color:var(--c-text-mute)}
/* 12 px 的说明在 1040 宽的容器里一行能排 130 多字，读起来要来回摆头；按 design-spec 的行宽上限收在 680 */
.note{max-width:680px}
/* 页尾来源注（原 S-M8 两大块收成一行后）：裸 p 没有 .sec 的 margin-top，会紧贴 FAQ 末项
   看起来像最后一条问答。补上间距与一条分隔线，明确它是脚注而不是正文。 */
.note--src{margin-top:var(--s-4);padding-top:var(--s-2);border-top:1px solid var(--c-line)}
.rows__cap{margin-bottom:var(--s-1)}
.prose p+p{margin-top:var(--s-1)}
/* 正文段落同样收在 680：邮编页那句「六位数字各代表什么」在 1040 宽下一行接近 100 字 */
.prose>p:not(.bar){max-width:680px}
.prose .note+.note{margin-top:var(--s-half)}
/* 信息页正文里的 h2：全局 h2 的 margin 已归零（靠 .sec>h2 供间距），
   但 /disclaimer 有 6 个章节标题，不补间距会连成一大段，读不出层级。 */
.prose h2{margin:var(--s-4) 0 var(--s-1);font-size:var(--t-h3)}
.prose h2:first-child{margin-top:var(--s-2)}

/*④ 页头：品牌 / 导航 / 搜索三段，底部 1px 极浅分隔线（无汉堡、无抽屉、不吸顶） */
.hdr{height:64px;background:var(--c-paper);border-bottom:1px solid var(--c-line)}
.hdr__in{display:flex;align-items:center;gap:var(--s-2);height:100%;max-width:1120px;margin:0 auto;padding:0 var(--s-2)}
.hdr__logo{display:flex;align-items:center;gap:var(--s-1);flex:0 1 auto;min-width:0;color:var(--c-ink-900);font-size:15px;font-weight:800;letter-spacing:-.01em;text-decoration:none;transition:color var(--dur) var(--ease)}
/* 站名比导航长时才截站名：导航被裁会切出半个汉字（320 下「邮编」只剩「邮」），站名截断至少可读 */
.hdr__logo>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr__logo svg{width:26px;height:26px;color:var(--c-brand-600);transition:color var(--dur) var(--ease)}
.hdr__logo:hover{color:var(--c-brand-700)}
.hdr__nav{flex:0 0 auto;min-width:0;margin-left:auto;overflow:visible;scrollbar-width:none}
.hdr__list{display:flex;align-items:center;gap:var(--s-1)}
.hdr__list>li:nth-child(n+4){display:none}
.hdr__link,.hdr__searchico{display:flex;align-items:center;height:40px;color:var(--c-text-sub);text-decoration:none;white-space:nowrap}
.hdr__link{font-size:14px;font-weight:600;padding:0 var(--s-1);border-radius:var(--r-1);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.hdr__link:hover{color:var(--c-brand-600);background:var(--c-brand-50)}
.hdr__searchico{justify-content:center;flex:0 0 40px;color:var(--c-text-mute);border-radius:var(--r-1)}
.hdr__searchico svg{width:20px;height:20px}
.hdr__search{display:none}

/*⑤ 首屏标题区：大标题 + 小字副题 + 一句引导，靠字重字号分级，无边框 */
.hero{padding:var(--s-4) 0 0}
.hero__title{font-size:var(--t-h1);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--c-ink-900)}
.hero__sub{margin-top:var(--s-1);font-size:var(--t-body);line-height:1.6;color:var(--c-text-sub);letter-spacing:.02em}
.hero__lead{margin-top:var(--s-2);max-width:640px;color:var(--c-text-mute)}

/*⑥ 白卡片：16 圆角 + 柔化投影，悬停时投影轻微加深 */
.panel{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-3);box-shadow:var(--sh-1);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.panel:hover{box-shadow:var(--sh-2)}
.panel__body{padding:var(--s-2)}
.panel__foot{padding:0 var(--s-2) var(--s-2)}

/*⑦ 搜索：基础形态（页头/搜索页/404）+ 大形态（首页卡片内，输入与按钮并排） */
.search{position:relative;max-width:560px}
.search__field{position:relative}
.search__input{display:block;width:100%;height:48px;padding:0 88px 0 40px;font:400 15px/1.2 var(--font-sans);color:var(--c-text);background:var(--c-paper);border:1px solid var(--c-line-strong);border-radius:var(--r-2);appearance:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.search__input::placeholder{color:var(--c-text-off)}
.search__input:hover{border-color:var(--c-ink-400)}
.search__input:focus{outline:none;border-color:var(--c-brand-600);background:var(--c-paper);box-shadow:0 0 0 3px var(--c-brand-glow)}
.search__icon{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--c-text-off);pointer-events:none;transition:color var(--dur) var(--ease)}
.search__field:focus-within .search__icon{color:var(--c-brand-600)}
.search__btn{position:absolute;right:var(--s-half);top:var(--s-half);min-width:76px;height:40px;padding:0 var(--s-2);font:600 15px/1 var(--font-sans);color:var(--c-paper);background:var(--c-brand-600);border:0;border-radius:var(--r-2);cursor:pointer;transition:background var(--dur) var(--ease),transform 120ms var(--ease),box-shadow var(--dur) var(--ease)}
.search__btn:hover{background:var(--c-brand-700);box-shadow:0 2px 8px var(--c-brand-glow)}
.search__btn:active{transform:scale(.98)}
.search--big{max-width:none}
.search--big .search__field{display:flex;gap:var(--s-1)}
.search--big .search__input{flex:1 1 auto;height:56px;padding:0 var(--s-2) 0 44px;font-size:15px}
.search--big .search__icon{top:18px;left:16px}
.search--big .search__btn{position:static;flex:0 0 auto;min-width:104px;height:56px;font-size:15px}
.search__pop{position:absolute;z-index:5;top:calc(100% + var(--s-half));left:0;right:0;overflow:hidden;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-2);box-shadow:var(--sh-2)}
.search__opt{display:block;min-height:52px;padding:var(--s-1) var(--s-2);color:var(--c-text);text-decoration:none;transition:background var(--dur) var(--ease)}
.search__opt b,.search__opt small{display:block;line-height:1.5}
.search__opt b{font-size:14px;font-weight:600}
.search__opt small{font-size:var(--t-caption);color:var(--c-text-mute)}
.search__opt:hover,.search__opt.is-on{background:var(--c-brand-50)}
.search__opt.is-on{box-shadow:inset 4px 0 0 0 var(--c-brand-600)}
.samples{margin-top:var(--s-2);font-size:var(--t-caption);line-height:1.7;color:var(--c-text-mute)}
.samples a{color:var(--c-brand-700);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;padding:2px 6px;border-radius:var(--r-1);transition:color var(--dur) var(--ease),background var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
.samples a:hover{color:var(--c-brand-700);background:var(--c-brand-50);text-decoration-style:solid}
.samples__tip{margin-right:var(--s-half)}

/*⑧ 全站查询模块 .qbox —— 工具站的「识别件」。
   为什么做成 tab + 输入 + 按钮这一套，而不是一个裸输入框：读者从搜索结果直接落到某个区县页，
   第一眼要能确认「这里能查、而且能查三种东西」。tab 上的三个词（邮编 / 地区 / 区号）
   既是操作提示，也是本页的关键词上下文，对「工具站」这类检索意图是正向信号。
   视觉上：浅底分段控件 + 大输入 + 品牌色按钮，四角圆角与卡片一致，不做渐变不做阴影堆叠。 */
/* width:100% 不能省：.wrap 自带 margin:0 auto，而 body 是 flex column——
   交叉轴上的 auto margin 会取消 stretch，整条查询带会缩成内容宽再居中（实测只有 300 px）。 */
/* 紧跟其后的那块（多数页是 .sec 里的 h1）用 24px 收住：.sec 自带 40px 上边距，
   叠加查询条的 24px 会变成 64px 的空档，标题像被扔到了下一屏（实测 /quhao、/postcode）。 */
.qbar{width:100%;margin-top:var(--s-2)}
/* 用 .qbar+.sec 而不是 .qbar+*：媒体查询里的 .sec{margin-top:56px} 与 .qbar+* 特异性相同、
   又排在后面，会把它盖掉（1280 宽下标题仍被推到 96px 之外）。加一个类才压得住。 */
.qbar+.sec,.qbar+h1{margin-top:var(--s-3)}
/* 版式（2026-11 改）：桌面端左右分栏——左「查」，右「数」。
   只有输入框的居中条看着像搜索页；左操作 + 右仪表盘才是工具的样子。
   右栏 < 900 不渲染：手机上首屏每一像素都归搜索框。 */
.qbox__card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);align-items:center;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-3);padding:var(--s-2)}
.qbox--full{margin-top:var(--s-2)}
.qbox--full .qbox__card{padding:var(--s-3);box-shadow:var(--sh-1)}
.qbox__main{min-width:0}
.qbox__side{display:none}
@media (min-width:900px){
  .qbox__card{grid-template-columns:minmax(0,1fr) 296px;gap:var(--s-3)}
  .qbox--full .qbox__card{grid-template-columns:minmax(0,1fr) 320px}
  /* 右栏做成内嵌面板（浅底 + 圆角 + 细边）而不是「左边一条分割线」：
     分割线只是把一块空白切开，看起来还是搜索框；内嵌面板才有「仪表」的实体感。
     底色只比纸色深一档，不喧宾夺主。 */
  .qbox__side{display:block;padding:var(--s-2);background:var(--c-ink-100);border:1px solid var(--c-line);border-radius:var(--r-2)}
}
/* 绿点不是装饰：它替代了「数据更新于 2026-11-03」这类需要解释的文案，
   一眼说明「这是活的库，不是采集完就扔的静态页」。 */
.qbox__side-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--c-text-mute)}
.qbox__live{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--c-brand-600);box-shadow:0 0 0 3px var(--c-brand-glow)}
/* 20px 而不是 22：264 宽三列每列约 76px，「38,930」在 22px 下正好溢出。
   dt 在 dd 之前是规范要求，column-reverse 只负责视觉上的「数字在上」。 */
.qbox__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-1);margin-top:var(--s-1)}
.qbox__num{display:flex;flex-direction:column-reverse;gap:1px}
.qbox__num dd{font:700 22px/1.1 var(--font-sans);letter-spacing:-.03em;color:var(--c-text)}
.qbox__num dt{font-size:11px;line-height:1.5;color:var(--c-text-mute);white-space:nowrap}
/* 两条快捷入口竖排、箭头右对齐：横排时「›」会紧贴前一条的文字尾巴，
   读起来像一句话里的逗号（实测 264 宽下就是这样）。竖排还顺手把右栏高度
   撑到与左侧搜索区齐平，卡片不会被拉出下半截空白。 */
.qbox__links{display:flex;flex-direction:column;margin-top:var(--s-1);padding-top:var(--s-1);border-top:1px dashed var(--c-line)}
.qbox__links a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);font-size:12px;line-height:1.9;color:var(--c-text-sub);text-decoration:none;transition:color var(--dur) var(--ease)}
.qbox__links a:hover{color:var(--c-brand-700)}
.qbox__links span{color:var(--c-text-off);transition:transform var(--dur) var(--ease)}
.qbox__links a:hover span{transform:translateX(2px)}
.qbox__tabs{display:inline-flex;gap:2px;padding:3px;background:var(--c-surface-sub);border:1px solid var(--c-line);border-radius:var(--r-full)}
.qbox__tab{height:34px;padding:0 var(--s-2);font:600 13px/1 var(--font-sans);color:var(--c-text-mute);background:transparent;border:0;border-radius:var(--r-full);cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.qbox__tab:hover{color:var(--c-text-sub);background:var(--c-shade)}
.qbox__tab.is-on{color:var(--c-brand-700);background:var(--c-paper);box-shadow:0 1px 2px var(--c-shade)}
.qbox__form{margin-top:var(--s-2)}
/* 页头下那条（slim）压到 48 高、少一层间距：它要在每一页都出现，包括 54 万个村页，
   占掉 150 px 首屏会把正文挤到折线以下 */
.qbox--slim .qbox__form{margin-top:var(--s-1)}
.qbox--slim .search__input,.qbox--slim .search__btn{height:48px}
.qbox--slim .search__icon{top:14px}
/* 窄屏：按钮不换行占满整行。原来的 .search--big 在 479 以下会把按钮压成整行，
   那条规则对首页 hero 是对的（视线从上往下），对一条随身查询带则多占 56 px。 */
.qbox .search--big .search__field{display:flex}
.qbox .search--big .search__btn{width:auto;min-width:76px;margin-top:0;height:48px;padding:0 var(--s-2);font-size:14px}
/* flex-basis 必须归零：basis:auto 会取 width:100%，而按钮是定宽，两者相加超出容器后
   input 不会自动收缩（实测 390 宽时按钮被挤出屏幕）。1 1 0 才是「剩余空间里平分」。 */
.qbox .search--big .search__input{flex:1 1 0;width:auto;height:48px;min-width:0}
.qbox__eg{margin-top:var(--s-2);font-size:var(--t-caption);line-height:1.7;color:var(--c-text-mute)}
/* slim 版也要有示例：没有它，输入框下面是一块比输入框还高的空白（省页 / 区县页实测）。
   间距收一档，让左栏总高（tab 34 + 8 + 输入 48 + 8 + 示例 20 ≈ 118）与右栏数字块齐平。 */
.qbox--slim .qbox__eg{margin-top:var(--s-1)}
.qbox__eg-t{margin-right:var(--s-half)}
.qbox__eg-g{display:inline}
/* [hidden] 的 display:none 会被上面的 display:inline 覆盖：不写这条，三个 tab 的示例会同时露出来 */
.qbox__eg-g[hidden]{display:none}
.qbox__eg a{color:var(--c-brand-700);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;padding:2px 4px;border-radius:var(--r-1);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.qbox__eg a:hover{background:var(--c-brand-50);text-decoration-style:solid}
.qbox__eg-s{margin-left:2px;color:var(--c-text-off);font-size:11px}
.qbox__dot{margin:0 2px;color:var(--c-text-off);font-style:normal}
.qbox__cov{margin-top:var(--s-1);font-size:var(--t-caption);line-height:1.7;color:var(--c-text-off)}

/*⑧ 按地区浏览：小标签按钮 10 圆角，悬停绿边 + 极浅绿底 + 1px 上浮 */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
/* 空结果兜底的省份 chips 要跟上面的说明拉开一档，原来写在模板里的 margin-top:12px 不在刻度上 */
.chips--after{margin-top:var(--s-2)}
.grid-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s-1)}
/* 网格里的按钮必须撑满单元格：inline-flex 会按文字收缩，34 个省名长短不一，
   收缩后就变成宽度参差的按钮墙（北京 57、黑龙江 78），行列对不齐。 */
.grid-links .chip{display:flex;width:100%}
.chip,.pager__btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--s-1);border:1px solid var(--c-line);border-radius:var(--r-1);background:var(--c-paper);font-size:13px;font-weight:600;color:var(--c-text-sub);text-decoration:none;white-space:nowrap;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.chip:hover,.pager__btn:hover{border-color:var(--c-brand-600);background:var(--c-brand-50);color:var(--c-brand-700);transform:translateY(-1px);box-shadow:0 2px 8px var(--c-brand-glow)}
.chip:active,.pager__btn:active{transform:scale(.97);box-shadow:none}

/*⑨ 列表：行内分隔线两端不贴边，悬停整行提亮、右侧信息与箭头同步转绿 */
.rows{border-top:1px solid var(--c-line)}
.rows__head{display:none}
.row{display:flex;align-items:center;gap:var(--s-1);min-height:56px;padding:var(--s-1) 0;border-bottom:1px solid var(--c-line);color:var(--c-text);text-decoration:none;transition:background var(--dur) var(--ease)}
.row__name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;line-height:1.4}
.row__meta{flex:0 0 auto;font-size:var(--t-caption);line-height:1.5;color:var(--c-text-mute);transition:color var(--dur) var(--ease)}
.row__zip{flex:0 0 auto;font-size:14px;font-weight:600;transition:color var(--dur) var(--ease)}
/* 行内标签：与「区号」同构，避免右侧出现一个没有说明的六位数字 */
.row__k{margin-right:var(--s-half);font-size:var(--t-caption);font-weight:400;color:var(--c-text-mute)}
.row::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:var(--s-half);border-top:1.5px solid var(--c-text-off);border-right:1.5px solid var(--c-text-off);transform:rotate(45deg);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.row:hover{background:var(--c-paper-2);color:var(--c-brand-700)}
.row:hover .row__meta,.row:hover .row__zip{color:var(--c-brand-700)}
.row:hover::after{border-color:var(--c-brand-600);transform:rotate(45deg) translate(1px,-1px)}
/* 触屏无 hover，active 是唯一的按下反馈，不能删（§10.1） */
.row:active{background:var(--c-brand-50)}
/* 卡片内列表：分隔线由行自身画，两端不贴卡片边。
   两种 DOM 都要覆盖 —— 多数页是 `<li class="row">`（行即 li），首页是 `<li><a class="row">`
   （整行是链接）。用 `:first-child` 判断会错：a.row 是 li 的唯一子元素，每一行都命中。 */
.rows--card{border-top:0}
.rows--card .row{min-height:52px;padding:var(--s-1) var(--s-2);border-bottom:0}
.rows--card>*+*.row,.rows--card>*+*>.row{border-top:1px solid var(--c-line)}
.rows--card>*:first-child.row,.rows--card>*:first-child>.row{border-radius:var(--r-3) var(--r-3) 0 0}
.rows--card>*:last-child.row,.rows--card>*:last-child>.row{border-radius:0 0 var(--r-3) var(--r-3)}
.card-list{padding:var(--s-half) 0}

/*⑩ 邮编主卡 + 复制控件
   旧版是三枚深绿实心方块：52×52 的主按钮 + 两枚 44×44 的无字图标方块。
   方块没有文字说明点它复制什么，尺寸又彼此不同，排在一起像三块补丁。
   现在改成「主值一枚浅色药丸 + 附属值整块可点」，视觉上只有一个重心。 */
.zipcard{margin:var(--s-2) 0 var(--s-3);padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-paper);box-shadow:var(--sh-1)}
.zipcard__num{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.zip{flex:0 1 auto;min-width:0;font-size:var(--t-zip-1);line-height:1.06;font-weight:700;letter-spacing:.01em;color:var(--c-ink-900)}
.zip--off{color:var(--c-text-off)}
.zipcard--m{padding:var(--s-2)}
.zipcard--m .zip{font-size:var(--t-zip-2);line-height:1.08}
.zipcard--s{padding:var(--s-2);border-radius:var(--r-2);box-shadow:none}
.zipcard--s .zip{font-size:var(--t-zip-3);line-height:1.12}
.zipcard__sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin-top:var(--s-2)}
.zipcard__item{display:inline-flex;align-items:center;gap:var(--s-half)}
.zipcard__note{margin-top:var(--s-2);max-width:680px;font-size:var(--t-caption);line-height:1.7;color:var(--c-text-mute)}

/* 主复制：浅底 + 细边 + 深绿字。比实心按钮弱一档，因为邮编本身才是主角 */
/* min-width 固定成两态的较大者：「复制」→「已复制」多一个字，不固定就会把数字挤动一格 */
.copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;min-width:92px;height:36px;padding:0 14px;
  font:600 13px/1 var(--font-sans);color:var(--c-brand-700);background:var(--c-brand-50);
  border:1px solid var(--c-brand-100);border-radius:var(--r-1);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 120ms var(--ease)}
.copy:hover{background:var(--c-brand-100)}
.copy:active{transform:scale(.98)}
.copy__i{width:15px;height:15px;flex:0 0 auto}
.copy.is-copied{background:var(--c-ok-bg);border-color:transparent;color:var(--c-ok-text)}
.copy.is-failed{background:var(--c-warn-bg);border-color:transparent;color:var(--c-warn-text)}

/* 附属值：整块是一个复制按钮。「标签 + 数值 + 淡图标」，不用悬浮方块 */
.kv-copy{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  font:400 13px/1 var(--font-sans);color:var(--c-text-mute);background:transparent;
  border:1px solid var(--c-line);border-radius:var(--r-1);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
button.kv-copy:hover{background:var(--c-brand-50);border-color:var(--c-brand-100);color:var(--c-brand-700)}
.kv-copy.is-flat{cursor:default;border-color:transparent;background:transparent;padding:0 2px}
.kv-copy__k{color:var(--c-text-mute)}
.kv-copy__v{font-size:14px;font-weight:600;color:var(--c-text);letter-spacing:.01em}
.kv-copy__i{width:13px;height:13px;flex:0 0 auto;opacity:.5;transition:opacity var(--dur) var(--ease)}
button.kv-copy:hover .kv-copy__i{opacity:1}
.kv-copy.is-copied{border-color:var(--c-ok-text);color:var(--c-ok-text)}
.kv-copy.is-copied .kv-copy__i{opacity:1;color:var(--c-ok-text)}
.kv-copy.is-failed{border-color:var(--c-warn-text);color:var(--c-warn-text)}

/*⑪ 键值表 / 分页 / FAQ / 空态 / 提示条 / 步骤 / 统计 */
.kv{border-top:1px solid var(--c-line)}
.kv__row{display:flex;gap:var(--s-1);align-items:baseline;min-height:44px;padding:var(--s-1) 0;border-bottom:1px solid var(--c-line)}
.kv__k{flex:0 0 96px;font-size:var(--t-caption);line-height:1.6;color:var(--c-text-mute)}
.kv__v{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}

/* 数据表（身份证地址码对照）：与列表行同一套分隔线语言，不另起一套表格外观 */
.table-wrap{margin-top:var(--s-2);overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-paper)}
/* 长数据块折叠：默认 10 条 + 「展开全部」。.is-extra 在无 JS 时可见（没有 .is-collapsed），
   JS 给 .more-block 加上 .is-collapsed 后才隐藏——顺序不能反过来，否则禁用 JS 就看不到了。 */
.more-block.is-collapsed .is-extra{display:none!important}
.more{margin-top:var(--s-2);text-align:center}
.more-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:1px solid var(--c-line);border-radius:var(--r-full);background:var(--c-paper);font:600 14px/1 var(--font-sans);color:var(--c-text-sub);cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}
.more-btn:hover{border-color:var(--c-line-strong);color:var(--c-text)}
.more-btn:focus-visible{outline:2px solid var(--c-brand-600);outline-offset:2px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table caption{padding:10px var(--s-2) 0;text-align:left}
.table--codes th:nth-child(2),.table--codes td:nth-child(2){width:180px}
.table--codes th:nth-child(3),.table--codes td:nth-child(3){width:140px}
.table th,.table td{padding:10px var(--s-2);text-align:left;border-bottom:1px solid var(--c-line);white-space:nowrap}
.table thead th{background:var(--c-surface-head);font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;color:var(--c-text-mute)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--c-paper-2)}
.table a{color:var(--c-text);text-decoration:none}
.table a:hover{color:var(--c-brand-700);text-decoration:underline}
.table tr.is-cur{background:var(--c-brand-50)}
.tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-1);background:var(--c-brand-100);color:var(--c-brand-700);font-size:var(--t-caption);font-weight:600;vertical-align:1px}

/* 地址书写示例：三行等宽对齐，读者可以直接照着抄 */
.addr{margin-top:var(--s-2);padding:var(--s-1) var(--s-2);border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-paper-2)}
.addr__l{display:flex;gap:var(--s-2);align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--c-line)}
.addr__l:last-child{border-bottom:0}
.addr__k{flex:0 0 76px;font-size:var(--t-caption);color:var(--c-text-mute)}
.addr__v{flex:1 1 auto;min-width:0;font-size:14px;overflow-wrap:anywhere}
.pager{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-3) 0}
.pager__btn{min-width:44px;padding:0 var(--s-1)}
.pager__btn.is-current{background:var(--c-brand-600);border-color:var(--c-brand-600);color:var(--c-paper)}
.pager__btn.is-current:hover{transform:none;box-shadow:none}
.pager__gap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;color:var(--c-text-off)}
.bar{display:flex;gap:var(--s-1);padding:var(--s-2);border-radius:var(--r-2);font-size:var(--t-caption);line-height:1.7;background:var(--b);color:var(--f);border:1px solid var(--c-line)}
.bar--info{--b:var(--c-info-bg);--f:var(--c-info-text)}
.steps{display:grid;gap:var(--s-1);padding-left:var(--s-2);list-style:decimal;color:var(--c-text-sub)}
.steps li{padding-left:var(--s-half)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.stat__n{font-size:var(--t-zip-3);line-height:1.12;font-weight:700;letter-spacing:-.01em}
/* 「不设邮编」这类占位：同一行高但减重，否则 32 px 粗破折号会被读成分隔线 */
.stat__n--off{font-weight:400;color:var(--c-text-off)}
.stat__k{font-size:var(--t-caption);line-height:1.6;color:var(--c-text-mute)}
/* 邮编结构：两位一组摊开，读者能对着自己的号码逐段核对 */
.zipbreak{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);max-width:520px;margin-top:var(--s-2)}
.zipbreak__g{display:grid;gap:2px;padding:var(--s-1) var(--s-1);border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-paper-2);text-align:center}
.zipbreak__d{font-size:var(--t-zip-3);line-height:1.15;letter-spacing:.04em}
.zipbreak__k{font-size:var(--t-caption);color:var(--c-text-sub)}
.zipbreak__v{font-size:var(--t-caption);color:var(--c-text-off)}
.empty{padding:var(--s-4) 0;text-align:center}
/* 主卡里的空态：卡本身已经有内边距，再叠 40 会让「不设邮编」占掉半屏 */
.zipcard .empty{padding:var(--s-2) 0}
.empty__art{width:48px;height:48px;margin:0 auto var(--s-2);color:var(--c-text-off)}
.empty__title{margin-bottom:var(--s-1);font-size:16px;font-weight:600}
.empty__desc{max-width:680px;margin:0 auto;font-size:var(--t-caption);line-height:1.8;color:var(--c-text-mute)}
.empty__alt{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;font-weight:600}
.faq{border-top:1px solid var(--c-line)}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq summary{display:flex;align-items:center;gap:var(--s-1);min-height:52px;padding:var(--s-1) 0;font-size:15px;font-weight:600;cursor:pointer;list-style:none;transition:color var(--dur) var(--ease)}
.faq summary:hover{color:var(--c-brand-600)}
.faq summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:400;color:var(--c-text-mute)}
.faq__item[open] summary::after{content:"−"}
.faq__a{padding-bottom:var(--s-2);font-size:var(--t-body);line-height:1.8;color:var(--c-text-sub)}

/*⑫ 面包屑 / 页脚 / Toast */
.bc{padding:var(--s-1) 0;font-size:var(--t-caption);line-height:1.6;color:var(--c-text-mute)}
.bc__list{display:flex;flex-wrap:wrap;align-items:center}
.bc__item{display:flex;align-items:center}
.bc__item+.bc__item::before{content:"›";margin:0 var(--s-half);color:var(--c-text-off)}
.bc__item a{padding:0 var(--s-half);color:var(--c-text-mute);text-decoration:none;transition:color var(--dur) var(--ease)}
.bc__item a:hover{color:var(--c-brand-600)}
.bc__item [aria-current]{color:var(--c-text-sub);font-weight:600}
.ft{margin-top:var(--s-5);padding:var(--s-4) 0 var(--s-3);background:var(--c-surface-sub);border-top:1px solid var(--c-line)}
.ft__in{max-width:1120px;margin:0 auto;padding:0 var(--s-2)}
.ft__cols{display:grid;gap:var(--s-3)}
.ft__title{margin-bottom:var(--s-half);font-size:var(--t-caption);font-weight:600;letter-spacing:.04em;color:var(--c-text-sub)}
.ft__link{display:flex;align-items:center;min-height:40px;font-size:13px;color:var(--c-text-mute);text-decoration:none;transition:color var(--dur) var(--ease)}
.ft__link:hover{color:var(--c-brand-600)}
.ft__legal,.ft__icp{max-width:680px;font-size:var(--t-caption);line-height:1.9;color:var(--c-text-mute)}
.ft__legal{margin-top:var(--s-2)}
.ft__icp{margin-top:var(--s-1)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--s-2);z-index:20;display:flex;align-items:center;height:44px;max-width:320px;padding:0 var(--s-2);background:var(--c-toast-bg);color:var(--c-toast-fg);font-size:14px;font-weight:600;border-radius:var(--r-full);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.toast.is-on{opacity:1}

/*⑬ 动效：入场错开 0.1s；交互一律 0.2s；列表行滚动入场只在支持 animation-timeline 时启用 */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes flash{0%,100%{background:var(--c-paper)}35%{background:var(--c-brand-50)}}
.is-flash{animation:flash .6s var(--ease)}
.rise{animation:rise .5s var(--ease) both}
.rise-2{animation-delay:.1s}
.rise-3{animation-delay:.2s}
.rise-4{animation-delay:.3s}
/* 列表行不做滚动入场：viewport 时间轴会让视口外的行停在 opacity:0，整页截图/打印/无滚动首屏
   看到的就是一张空白卡片；同理不做 IntersectionObserver 版（无 JS 与整页截图都会漏行）。
   入场节奏留在首屏（.rise），列表靠 hover/active 反馈，这是「看得见」优先于「动得花」。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation:none!important}
}

/*⑭ 断点：720 起页头进搜索框、列表转表格式密度；1024 起页头三段对齐、间距放宽 */
@media (min-width:720px){
.wrap,.hdr__in,.ft__in{padding:0 var(--s-3)}
.hdr{height:68px}
.hdr__in{gap:var(--s-3)}
.hdr__list{gap:var(--s-half)}
.hdr__link{padding:0 var(--s-2)}
.hdr__list>li:nth-child(n){display:list-item}
.hdr__searchico{display:none}
.hdr__search{display:block;flex:0 0 260px;max-width:none}
.hdr__search .search__input{height:40px;padding:0 76px 0 36px;font-size:14px}
.hdr__search .search__icon{top:11px;left:11px;width:17px;height:17px}
.hdr__search .search__btn{height:32px;min-width:64px;font-size:14px}
.hdr__search .search__pop{width:320px;right:0;left:auto}
.hero{padding:var(--s-4) 0 0}
.rows--tbl .rows__head,.rows--tbl .row{display:grid;grid-template-columns:46% 20% 16% 18%;align-items:center;column-gap:var(--s-1)}
.rows--tbl .rows__head{min-height:0;padding:var(--s-1) 0;background:var(--c-surface-head);font-size:var(--t-caption);font-weight:600;color:var(--c-text-sub)}
.rows--tbl .row::after{justify-self:end;margin-right:var(--s-half)}
.ft__cols{grid-template-columns:1fr 1fr}
.ft__link{min-height:32px}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media (min-width:1024px){
.wrap,.hdr__in,.ft__in{padding:0 var(--s-4)}
.hdr{height:72px}
.hdr__in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-3)}
/* 导航绝对居中：`1fr auto 1fr` 在两侧内容宽度不等时会把中间列推偏（品牌名比搜索框窄/宽都会偏几十像素），
   而「导航在正中间」是这套模板的构图基准，宁可脱离文档流也要对得准。1024 以上两侧留白足够，不会压到导航。 */
.hdr__nav{position:absolute;left:50%;transform:translateX(-50%);margin:0;overflow:visible}
/* 导航脱离文档流后，logo 与搜索必须显式落列，否则搜索会被自动排进宽度为 0 的中间列 */
.hdr__logo{grid-column:1;justify-self:start}
.hdr__search{grid-column:3}
.hdr__list{gap:var(--s-1)}
.hdr__search{justify-self:end;flex:0 0 300px;width:300px}
.sec{margin-top:var(--s-5)}
.hero{padding:var(--s-5) 0 0}
.panel__body{padding:var(--s-3)}
.panel__foot{padding:0 var(--s-3) var(--s-3)}
.rows--card .row{padding:var(--s-1) var(--s-3)}
.ft{margin-top:var(--s-6);padding:var(--s-5) 0 var(--s-4)}
.ft__cols{grid-template-columns:1fr 1fr 1fr}}
/*320–374：三档字号同降（§3.2）；导航留前 2 项*/
@media (max-width:479px){
/* 窄屏首页搜索改上下两段：并排时输入框只剩约 250px，占位词「输入区县名、乡镇名或 6 位邮编」会被截成半句 */
.search--big .search__field{display:block}
.search--big .search__btn{width:100%;margin-top:var(--s-1);min-width:0}
.grid-links{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.search--big .search__input{font-size:14px;padding-left:40px}
.row__name{font-size:14px}
.row__meta{font-size:var(--t-caption)}
/* 320–479：行改两段式。单行时「贵州省毕节市威宁彝族回族苗族自治县」只剩约 90 px，
   折成 3 行且右列数字被挤在折行的缝里；县名独占一行后 254 px 够 18 个字，第二行放区号与邮编 */
.rows--card .row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  row-gap:var(--s-half);column-gap:var(--s-1);padding:var(--s-1) var(--s-2)}
.rows--card .row__name{grid-column:1/-1}
.rows--card .row__meta{grid-column:1}
.rows--card .row__zip{grid-column:2}
.rows--card .row::after{grid-column:3;margin-right:0}
}
/* 导航按「装得下才显示」截断，不用 375 这种整数拍脑袋：
   每项 44 宽 + 8 间距，页头可用 = 宽 − 32 边距 − 站名 138 − 32 间隙 − 图标 40。
   1 项要 286、2 项 338、3 项 390。原先 375–389 交给 3 项，实际差 15 px，「区号」被切掉半个字。 */
/* 320–337 只留 1 项时，导航不再靠 margin-left:auto 顶到右边 —— 单项悬在中间最右、
   左边一段空档，看起来像少画了一个按钮。改为紧贴站名，搜索图标独占右侧。 */
@media (max-width:337px){.hdr__list>li:nth-child(n+2){display:none}
.hdr__nav{margin-left:var(--s-2)}.hdr__searchico{margin-left:auto}}
@media (min-width:338px) and (max-width:389px){.hdr__list>li:nth-child(n+3){display:none}}
@media (max-width:374px){
/* 只降数字档：标题层级在全断点保持 24/18。320 下 9 个字 × 24 = 216，容器 288，放得下 */
:root{--t-zip-1:40px;--t-zip-2:36px;--t-zip-3:28px}
.zipcard{padding:var(--s-2)}
/* 320 下 6 位数字 160px + 药丸 96px + 间距 16 正好压线，缩到 88 才不换行 */
.copy{padding:0 12px}}
/* 触屏设备输入框 16px：iOS Safari 对 font-size<16 的 input 会在聚焦瞬间强制放大整页 */
@media (hover:none) and (pointer:coarse){
.search__input,.search--big .search__input,.hdr__search .search__input{font-size:16px}}

/* ⑫ 内页双列（2026-11）：正文单列时，1120 的内容区里段落只有 680 宽，右边 380 空着，
   读者以为页面没加载完。改成「主栏 + 侧栏」：主栏按可用空间自适应，侧栏固定 300，
   放的全是本页已有的真实入口（同市邮编、上级地区、相关查询），不是装饰。
   窄屏折回单列，顺序保持主栏在前——侧栏内容在手机上接在正文之后，不是插在中间。 */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.split__main{min-width:0}
.split__side{display:grid;gap:var(--s-3);align-content:start;min-width:0}

/* 两列的「第一行」必须齐平（2026-11-04）。
   问题：.split 是 grid，子元素的 margin **不会**穿出网格，所以主栏首元素自带的
   margin-top 全留在栏内，只把主栏压低；侧栏第一张卡贴着网格顶端。实测三档：
     · 邮编详情 / 省页 / 区号页：首元素 section.sec，margin-top 56 → 侧栏高 56px
     · 区县页 / 乡镇页：首元素 section.zipcard，margin-top 16 → 侧栏高 16px
     · 邮编索引页：首元素无类名，margin 0 → 本来就齐
   做法：把这笔 margin 从栏内**搬到 .split 自己身上**。主栏内容的绝对位置一点不变，
   侧栏跟着一起下移，两列同一条起跑线。不选「把侧栏也压低」是因为那个值随页面变，
   写死一个数只能对上其中一档；也不选「全栏首元素一律归零」——那会把主栏内容整体上提，
   邮编页 h1 会贴到查询卡底下。
   为什么圈定 .sec / .zipcard 两种：其余首元素（索引页那个无名 section）本来就 margin 0，
   不认识的首元素一律不动，宁可少修也不要多推。 */
.split:has(>.split__main>.sec:first-child),
.split:has(>.split__main>.zipcard:first-child){margin-top:var(--s-5)}
.split:has(>.split__main>.zipcard:first-child){margin-top:var(--s-2)}
.split:has(>.split__main>.sec:first-child)>.split__main>:first-child,
.split:has(>.split__main>.zipcard:first-child)>.split__main>:first-child{margin-top:0}
.split__side>:first-child{margin-top:0}
@media (min-width:1024px){
.split{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-4)}
/* 长页（邮编反查动辄四千像素高）侧栏不吸顶就只是「把空白挪到右边」：
   滚过第一屏后右边继续空。吸顶解决这件事，代价是侧栏比视口高时下半截够不到，
   所以侧栏只放短块（≤3 张卡、每卡 ≤10 条）。 */
.split__side{position:sticky;top:var(--s-2)}}
/* 侧栏卡：沿用 .addr 的「浅底 + 细边」语言，不另起一套外观 */
.side-card{padding:var(--s-2);border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-paper-2)}
.side-card__t{margin:0 0 var(--s-1);font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;color:var(--c-text-mute)}
.side-list{margin:0;padding:0;list-style:none}
.side-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);min-height:38px;font-size:14px;color:var(--c-text);text-decoration:none;border-bottom:1px solid var(--c-line)}
.side-list li:last-child a{border-bottom:0}
.side-list a:hover{color:var(--c-brand-700)}
.side-list__v{flex:0 0 auto;font-size:var(--t-caption);color:var(--c-text-mute)}
/* 侧栏 chips 保持 flex：相邻邮编常常只有 1–2 个，用两列网格会把单个 chip 拉成
   半个卡片宽的大按钮，看着像「这里少画了一个」。 */
.side-card .chips{gap:var(--s-half)}
/* 侧栏里的 FAQ：折叠条降到 44 高、字号降一档，300 px 宽度下标题才不折成两行 */
.side-card .faq{border-top:0}
.side-card .faq summary{min-height:44px;font-size:14px;line-height:1.5}
.side-card .faq__a{font-size:13px;line-height:1.8}

/* 表格形态（≥720）下，表头已经说明这一列是什么，行内不再重复「区号 024」这种字段名——
   「区号」列每格都以「区号」开头，读者会以为这个前缀是数据的一部分。
   窄屏没有表头，标签必须留着（见 templates/partials/list.php 的 meta_k）。 */
@media (min-width:720px){.rows--tbl .row__k{display:none}}

/* /postcode 索引页的号码列表排两列（≥768）：单列 200 行时「覆盖 N 个区县」被推到行尾，
   行中间空出四百多像素。两列是目录页的常规密度，窄屏仍是一列。
   只作用于带 .rows--two 的列表，其它 .rows 不受影响。 */
@media (min-width:768px){
.rows--two{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-5)}
.rows--two .row__name{font-size:14px}
}

/* 统计块加一层「框架 + 分隔」：原来四个数字直接摊在页面上，和下方「档案」「下辖表」之间
   没有边界，看起来像正文段落的一部分。加边框把那 4 个数字收成一块，格间竖线负责切分——
   2 列（窄屏）时右列一条竖线、第二行一条横线；宽屏 auto-fit 后只剩竖线。 */
.stats{border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-paper);gap:0;padding:var(--s-2) 0}
.stat{padding:var(--s-1) var(--s-3)}
.stat:nth-child(even){border-left:1px solid var(--c-line)}
.stat:nth-child(n+3){border-top:1px solid var(--c-line)}
@media (min-width:1024px){
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat:nth-child(n+3){border-top:0}
.stat:not(:first-child){border-left:1px solid var(--c-line)}
}

/* ==========================================================================
   信封示例 / 四段地址表 / 邮政网点 / 全国层级导航（2026-11 新增）

   这四个块共同解决一件事：把「邮编」从一串数字变回「寄件时到底怎么写」。
   信封是一张真图（`/og/e/{adcode}/{zip}.png`，与 og:image 同源），四段地址表与
   网点表沿用既有 .table 体系，只补列宽与换行规则——不新造表格样式，避免和
   .table--codes 打架。
   ========================================================================== */

/* 信封：外面加一层浅底框，让它在正文里像一块「示例区」而不是插画 */
.envwrap{margin-top:var(--s-3);max-width:680px;padding:var(--s-2);border:1px solid var(--c-line);border-radius:var(--r-3);background:var(--c-paper-2)}
.envwrap + .note{margin-top:var(--s-2)}

/* 信封图（2026-11 起由内联 SVG 换成真 <img>，为了进图片搜索）
   高度交给 width/height 属性推出的比例，这里只约束宽度与行内间隙；
   不要写死 height，也不要加 max-height——写了就会在窄屏上把 1200×630 压成一条。
   display:block 去掉 img 自带的基线空隙，否则 figure 底下会多出 4px 白边。 */
.envfig{margin:0}
.envfig__img{display:block;width:100%;height:auto;border-radius:var(--r-2)}

/* 四段地址表：前三列定宽，最后一列吃掉剩余并允许换行（nowrap 会把整表撑到横滚） */
.table--fill th:nth-child(1),.table--fill td:nth-child(1){width:112px}
.table--fill th:nth-child(2),.table--fill td:nth-child(2){width:112px}
.table--fill th:nth-child(3),.table--fill td:nth-child(3){width:112px}
.table--fill td.fill-table__free{white-space:normal;color:var(--c-text-mute)}

/* 网点表：地址列必须能折行，否则一行 40 个字会把「电话」列推到屏幕外 */
.table--branch .branch__addr{white-space:normal;min-width:240px}

/* 邮编页的网点卡（通常只有 1–2 条，用卡片比表格轻） */
.branch-cards{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:var(--s-2)}
.branch{padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-paper)}
.branch__n{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.5}
.branch__a{margin:0 0 8px;font-size:13px;line-height:1.65;color:var(--c-text-sub)}
.branch__m{display:flex;flex-wrap:wrap;gap:8px var(--s-3);margin:0}
.branch__m div{display:flex;align-items:baseline;gap:6px}
.branch__m dt{font-size:var(--t-caption);color:var(--c-text-mute)}
.branch__m dd{margin:0;font-size:13px;font-weight:600}

/* 全国层级导航：34 个省 + 本省下级的文字链墙。
   不做下拉、不做 tab——这个块的唯一作用就是「让人和爬虫都看见能去哪」。 */
.sec--geonav{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--c-line)}
.geonav{display:flex;flex-direction:column;gap:var(--s-3)}
.geonav__t{margin:0 0 6px;font-size:var(--t-caption);font-weight:700;letter-spacing:.04em;color:var(--c-text-mute)}
.geonav__list{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:13px;line-height:1.9}
.geonav__list a{padding:1px 0;color:var(--c-text-sub);text-decoration:none;border-bottom:1px solid transparent}
.geonav__list a:hover{color:var(--c-brand-700);border-bottom-color:currentColor}
.geonav__list a.is-on{color:var(--c-brand-700);font-weight:700}

/* ==========================================================================
   工具入口页 /chaxun
   ========================================================================== */

/* 三张「查法」卡：每张对应一个真实问题（我有地名 / 我有数字 / 我有区号），
   所以用卡片而不是一排按钮——按钮只写得出「按地区查」，写不下「什么情况下用它」。 */
.tool-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-2);margin-top:var(--s-2)}
/* 五张卡在宽屏排成一行：auto-fit 的 230px 下限在 1120 容器里只落 4 列，
   第 5 张被挤到下一行单独站着，那一格空白读起来像"内容没加载完"。
   类名由模板显式声明（只有固定 5 张的那个块带 --5），/chaxun 的三种查法不受影响。
   1100 起生效：再窄一点每列只剩 190 以下，标题会折成两行。 */
@media (min-width:1100px){.tool-ways--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tool-way{display:flex;flex-direction:column;gap:6px;padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-2);background:var(--c-paper);text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tool-way:hover{border-color:var(--c-brand-600);background:var(--c-brand-50);box-shadow:0 2px 10px var(--c-brand-glow)}
.tool-way__t{font-size:15px;font-weight:700;line-height:1.5;color:var(--c-text)}
.tool-way__d{font-size:13px;line-height:1.65;color:var(--c-text-sub)}
.tool-way__go{margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--c-brand-700)}

/* 常用号码按钮里带一行小字地区名：只给号码，读者不知道 100010 是哪，还得点进去看 */
.chip__sub{margin-left:6px;font-size:11px;font-weight:400;color:var(--c-text-mute)}

/* ==========================================================================
   ⑰ 首页友情链接（M14）
   ==========================================================================
   为什么比同页其它模块「轻」：友链是出口，不是内容。做成和数据口径同级的白卡片，
   读者的视线会在页尾再被拽一次，而这里并没有他们要的答案。
   所以：浅底、无投影、小字，只有悬停时给一层品牌浅色 —— 想点的人才点得到东西。

   一条格子 = 名称 + 一句说明。没有说明时不占第二行（height 由内容决定，
   不用固定高度：短名与长名混排时固定高度会留出半格空白，看着像没对齐）。
   ========================================================================== */
.sec--flinks{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--c-line)}
.flinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s-1);margin-top:var(--s-2)}
.flinks__i{min-width:0}
.flinks__a{display:flex;flex-direction:column;gap:1px;height:100%;padding:9px 12px;background:var(--c-surface-sub);border:1px solid var(--c-line);border-radius:var(--r-2);text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.flinks__a:hover{border-color:var(--c-brand-600);background:var(--c-brand-50);box-shadow:0 2px 8px var(--c-brand-glow)}
.flinks__n{font-size:13px;font-weight:600;line-height:1.5;color:var(--c-text);transition:color var(--dur) var(--ease)}
.flinks__a:hover .flinks__n{color:var(--c-brand-700)}
/* 说明行允许折两行：单行省略在「区划与人口数据来源」这种 9 字说明上会把后半句吃掉，
   而友链的说明通常就是「这站是干什么的」，吃掉一半等于没说。 */
.flinks__d{font-size:var(--t-caption);line-height:1.55;color:var(--c-text-mute);overflow-wrap:anywhere}
/* 焦点环自带：全局 a:focus-visible 已覆盖，这里只补圆角与外扩量一致 */
.sec--flinks a:focus-visible{border-radius:var(--r-2);outline-offset:2px}
/* 390 宽：168px 的下限在 358 容器里落两列（每列约 175），说明行折两行仍读得下；
   320 宽只剩一列，不硬塞两列——那一列只剩 140px，名称与说明都会折成三行。 */
@media (max-width:360px){
.flinks{grid-template-columns:minmax(0,1fr)}
}