/*! 外观包 8「手账 · 拼贴邮政」（journal）— 奶油纸 + 橄榄墨，胶带、邮票齿孔、拍立得与虚线路线。
 *
 * 只在本模板下生效：全部规则以 `html[data-template=journal]` 开头。
 * 独立成包而不是并进 app.css，因为这套换的不止配色：圆角整体收小（纸没有圆角）、
 * 标题换手写体、分隔线换成虚线、卡片换成"贴上去"的（胶带 / 齿孔 / 相框），
 * 统计块与侧栏卡还带一点角度——这些 app.css 装不下。
 * 加载方式见 templates/layout.php：只有当前模板是 journal 才多一个 <link>。
 *
 * 四条自律（与 design-spec 一致）：
 *  ① 不出现位图、不出现 clamp/vw/vh、不出现 background-image:url。
 *     纸纹是两层 1px 的 radial-gradient 点阵，齿孔是四个方向上的纸色圆点，
 *     胶带是半透明色块 + clip-path 的斜切口，路线是内联 SVG。
 *  ② **大面积永远是纸**（§5.0.5 的教训）：品牌 600 只出现在字、线、按钮上。
 *     上一套把黄绿整块铺开被用户判为"伤眼"，这一套同样落在这个色相区，
 *     所以 600 铺开的最大面积被限制在查询按钮那 96×44 里，其余一律 ≤ 2px 的线。
 *  ③ 角度只给**小件**：统计贴纸 ±1°、侧栏卡 ±0.5°、胶带 ±2.6°。
 *     查询主便签与正文永远水平——输入框一旦歪着，读者第一反应是"页面没加载好"。
 *  ④ 不做"假资料"：胶带下面不压"照片"，拍立得里不画"人像"，
 *     首屏那条路线也不写"已解锁 / 第 3 站"之类的假进度。
 */

/* ── ① 奶油纸与橄榄墨 ────────────────────────────────────────────────────
   只覆盖中性色与品牌派生，不改语义（--c-text 等仍由 app.css 从 --c-ink-* 派生）。
   纸色 #FAF4E7 不是纯白也不是米黄：纯白配暖棕读起来"脏"，太黄的米色压不住
   橄榄绿（两者明度太近，整页会糊成一片）。这一档的 L* 是 96，比纯白低 4 点，
   够托住卡片，又不至于让正文发灰。
   墨色 #2C2619 是暖炭，不是纯黑：纯黑落在奶油纸上像描边，暖炭才像"写上去的"。
   对照度（实测，逐个过 4.5 线）：正文 13.15:1、次要 8.62:1、弱文字 4.66:1。 */
html[data-template=journal]{
  --c-paper:#F7EFDC;--c-paper-2:#F2E7CE;
  --c-ink-100:#F4EBD7;--c-ink-200:#E7DBBF;--c-ink-400:#75654E;--c-ink-500:#675943;
  --c-ink-700:#463D2D;--c-ink-900:#2C2619;--c-line-strong:#C2AF8E;
  --c-surface-sub:#F4EAD4;--c-surface-head:#EDE1C5;
  /* 语义色跟着奶油纸重配：默认那套按纯白配的，落在 #FAF4E7 上会发灰、黄底还会串色 */
  --c-info-text:#2E5A6B;--c-info-bg:#E6EFF2;
  --c-ok-text:#3D6B3A;--c-ok-bg:#E7EFDD;
  --c-warn-text:#7A4A10;--c-warn-bg:#FBEED3;
  --c-danger-text:#9A3B2E;--c-danger-bg:#F8E5DF;
  --c-ring-in:#F7EFDC;
  --c-brand-glow:rgba(95,98,41,.16);
  --c-shade:rgba(96,78,50,.07);--c-shade-2:rgba(96,78,50,.12);
  /* 纸卡片的两层影：第一层贴脸（1px，几乎看不见，负责"边"），第二层大范围负扩散（负责"浮"）。
     不用弥散柔影——纸是硬的，影子要收敛，不能像玻璃包那样糊成一团。 */
  --sh-1:0 1px 2px rgba(96,78,50,.07),0 10px 22px -14px rgba(96,78,50,.42);
  --sh-2:0 2px 4px rgba(96,78,50,.09),0 18px 34px -18px rgba(96,78,50,.46);
  /* 圆角收小：纸不会卷边。三档 3/5/8，只有胶囊另走 --r-full */
  --r-1:3px;--r-2:5px;--r-3:8px;
  --t-h1:26px;--t-h2:19px;--t-h3:15px;--t-body:14px;--t-caption:12px;
  /* 手写体：优先落霞文楷（有人装），其次系统楷体。**只给标题与编号用**，
     正文一律回 --font-sans——楷体 14px 排长段落会糊。 */
  --font-hand:"LXGW WenKai","Kaiti SC","STKaiti","KaiTi","楷体","Songti SC",serif;
  /* 本包内部变量 */
  --jn-card:#FFFDF6;
  --jn-red:#B04A3C;--jn-blue:#6E93AC;--jn-tan:#C8A883;
  --jn-line:rgba(120,101,78,.22);--jn-hair:rgba(120,101,78,.13);
  --jn-tape-red:rgba(176,74,60,.30);--jn-tape-blue:rgba(110,147,172,.34);--jn-tape-olive:rgba(95,98,41,.24);
  --jn-paper-edge:var(--c-paper);
}

/* ── ② 纸面：奶白 + 两层纸纤维 ──────────────────────────────────────────
   纤维用两层 1px 的点阵叠出来（6px 与 13px 两套间距、偏移错开）。
   为什么是点阵而不是斜纹：斜纹在 1x 屏上会跟子像素打架，出摩尔纹，
   表现出来是"屏幕上有一层脏";点阵在 3 种 DPR 下都稳定，且 alpha 只需 .03–.06
   ——超过 .08 就从"纸纹"变成"沙子"。
   右上角再加一团极淡的暖光，把大面积的奶油白打散，避免整页像一张没印完的纸。 */
html[data-template=journal] body{
  background-color:var(--c-paper);
  background-image:
    radial-gradient(rgba(150,120,80,.055) 1px,transparent 1px),
    radial-gradient(rgba(150,120,80,.032) 1px,transparent 1px),
    radial-gradient(58% 34% at 82% -2%,rgba(200,168,131,.22),transparent 72%);
  background-size:6px 6px,13px 13px,100% 100%;
  background-position:0 0,3px 7px,0 0;
}

/* ── ③ 字：标题手写，正文照旧 ────────────────────────────────────────────
   需求写的是"标题可带轻微手写感，但正文必须清晰易读"——这条分工是硬约束：
   楷体只在 h1 / h2 / 侧栏标题 / 步骤编号上出现，正文、列表、表格、表单
   全部回退到系统无衬线。行长也与默认模板一致（1.7），不做"松一档"那种治愈系处理：
   手账可以软，但这是查询站，读邮编的人要快。 */
html[data-template=journal] body{font-family:var(--font-sans);font-size:14px;line-height:1.7}
html[data-template=journal] h1,
html[data-template=journal] h2,
html[data-template=journal] .side-card__t,
html[data-template=journal] .ft__title{font-family:var(--font-hand);font-weight:700;letter-spacing:.01em}
html[data-template=journal] h1{line-height:1.32}
/* 数字统一等宽 + 微收字距：邮编是六位一组的读数，比例字宽会让 1 和 8 之间空一格 */
html[data-template=journal] .zip,
html[data-template=journal] .num,
html[data-template=journal] .row__zip,
html[data-template=journal] .stat__n,
html[data-template=journal] .zipbreak__d,
html[data-template=journal] .qbox__num dd,
html[data-template=journal] .kv-copy__v{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:.01em}

/* ── ④ 纸卡片：一件通用件 ────────────────────────────────────────────────
   所有"贴在页面上"的板都走这一套：奶油白卡面 + 1px 暖边 + 两层纸影。
   卡面 #FFFCF3 比纸 #FAF4E7 亮一档——不亮这一档，卡片会跟背景融成一张纸，
   胶带和齿孔就失去"贴上去"的意思了。 */
html[data-template=journal] .panel,
html[data-template=journal] .zipcard,
html[data-template=journal] .qbox__card,
html[data-template=journal] .table-wrap,
html[data-template=journal] .tool-way,
html[data-template=journal] .side-card,
html[data-template=journal] .branch,
html[data-template=journal] .envwrap,
html[data-template=journal] .search__pop,
html[data-template=journal] .addr,
html[data-template=journal] .more-block{
  position:relative;
  background:var(--jn-card);
  border:1px solid var(--jn-line);
  border-radius:var(--r-1);
  box-shadow:var(--sh-1);
}
html[data-template=journal] .tool-way,
html[data-template=journal] .qbox__card{transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
html[data-template=journal] .panel,
html[data-template=journal] .zipcard,
html[data-template=journal] .side-card,
html[data-template=journal] .branch{transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
/* 只有点了会有事发生的才抬起来（.tool-way 是 <a>）；
   容器只加深边线，位移会骗人——上一套在这条上踩过（两层位移叠着走）。 */
html[data-template=journal] .tool-way:hover{
  transform:translate(-1px,-1px);
  border-color:var(--jn-line);
  box-shadow:3px 3px 0 rgba(200,168,131,.30),var(--sh-2);
}
html[data-template=journal] .side-card:hover,
html[data-template=journal] .branch:hover,
html[data-template=journal] .panel:hover,
html[data-template=journal] .zipcard:hover{border-color:var(--c-line-strong);box-shadow:var(--sh-2)}
html[data-template=journal] .qbox__card:hover{border-color:var(--c-line-strong);box-shadow:var(--sh-2)}

/* ── ⑤ 页头：一枚小邮戳 + 一条虚线 ──────────────────────────────────────
   虚线是手账的语言（撕纸边、装订线、裁切线都是虚的），页头用 1px 虚线收口，
   比默认的实线轻，也比"没有线"有边界。图标不是裸 svg，而是套一个 28px 的
   小方框：像一枚盖在页眉的戳，也是全站唯一用 olvie 描边的 logo 处理。 */
html[data-template=journal] .hdr{background:transparent;border-bottom:1px dashed var(--jn-line)}
html[data-template=journal] .hdr__logo{font-family:var(--font-hand);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--c-ink-900)}
html[data-template=journal] .hdr__logo svg{
  width:28px;height:28px;padding:5px;color:var(--c-brand-600);
  background:var(--jn-card);border:1px dashed var(--c-brand-500);border-radius:2px;
  transform:rotate(-3deg);
}
html[data-template=journal] .hdr__logo:hover svg{transform:rotate(0)}
html[data-template=journal] .hdr__logo svg{transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
html[data-template=journal] .hdr__link{color:var(--c-text-sub);font-weight:600}
html[data-template=journal] .hdr__link:hover{
  color:var(--c-brand-700);background:transparent;
  text-decoration:underline dashed;text-decoration-thickness:1px;text-underline-offset:6px;
}
html[data-template=journal] .hdr__searchico{color:var(--c-text-mute)}
html[data-template=journal] .hdr__searchico:hover{color:var(--c-brand-600)}

/* ── ⑥ 首屏：手写标题 + 一支荧光笔 + 右侧路线 ──────────────────────────
   标题下那道斜条是全站唯一的"随手划"：宽 126px，只压住开头几个字，
   不铺满整行——真拿荧光笔划标题的人也不会划满。
   做法是把它画成 h1 自己的 **背景**，而不是伪元素：
   伪元素要压到字的下面就得 z-index:-1，而负层在含 background-image 的
   body 上会跟自己的层叠上下文打架（实测：写进去、算得出 128×11，就是不显示）。
   背景天然在文字之下，没有层叠问题；斜度用 100deg 的渐变方向近似，
   比 transform 更稳——它不影响盒子尺寸。
   透明度上限 .30：再高正文的笔画边会发虚，而这行字是首屏唯一的大标题。 */
html[data-template=journal] .hero{padding-top:var(--s-4)}
html[data-template=journal] .hero__title{
  position:relative;color:var(--c-ink-900);
  background-image:linear-gradient(100deg,rgba(95,98,41,.30),rgba(95,98,41,.13));
  background-repeat:no-repeat;
  background-size:126px 11px;
  background-position:0 78%;
}
html[data-template=journal] .hero__sub{color:var(--c-text-sub)}
html[data-template=journal] .hero__lead{color:var(--c-text-sub);max-width:600px}
/* 路线装饰：只在 ≥900 出现，靠 hero 的右内边距给它让位。
   < 900 时整块 display:none —— 手机上首屏每一像素都归查询框，这是既定规矩。 */
html[data-template=journal] .jn-route{
  display:none;position:absolute;right:0;top:var(--s-3);width:280px;height:140px;
  color:var(--c-brand-600);pointer-events:none;
}
html[data-template=journal] .jn-route__pin{color:var(--jn-red)}
html[data-template=journal] .jn-route__plane{color:var(--c-brand-700);fill:none}
html[data-template=journal] .jn-route__dot1{fill:var(--jn-blue)}
html[data-template=journal] .jn-route__dot2{fill:var(--jn-red)}
@media (min-width:900px){
  html[data-template=journal] .hero{position:relative;padding-right:300px;padding-bottom:var(--s-2)}
  html[data-template=journal] .jn-route{display:block}
}
@media (min-width:1024px){html[data-template=journal] .jn-route{top:var(--s-4)}}

/* ── ⑦ 区块标题：一枚歪着的墨点 + 手写体 ────────────────────────────────
   编号（01/02/03）没有做：导视包用 counter 已经把"编号"这条语言用尽了，
   手账的层级感来自"贴纸与胶带"，不是序号。这里换成一枚 7px 的歪方块，
   像手写标题前面随手点的一个墨点。 */
html[data-template=journal] .sec>h2{display:flex;align-items:baseline;gap:9px;margin-bottom:var(--s-2);color:var(--c-ink-900)}
html[data-template=journal] .sec>h2::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:1px;
  background:var(--c-brand-600);opacity:.6;transform:rotate(14deg) translateY(-1px);
}
html[data-template=journal] .sec__desc{color:var(--c-text-mute)}

/* ── ⑧ 主便签：查询区 ───────────────────────────────────────────────────
   这一块是"一张贴上去的便签"，三件东西说明这件事：
     · 左上角一条砖红胶带（半透明、斜切口、压住卡片的边）；
     · 卡面比纸亮一档，四边 1px 暖线（撕下来的纸片有毛边，但不画锯齿）；
     · 右下角略微重一点的影（纸片只有一角翘起，不是整块浮起来）。
   在这里叠纸纹会跟输入框打架，所以便签**不加**点阵——全页只有 body 有纸纹。
   胶带用 absolute 而不是伪元素占位：.qbox__card 是 grid 容器，
   除了 absolute 的子元素都会被算成一个格子。 */
html[data-template=journal] .qbox__card{padding:20px;overflow:visible}
@media (min-width:900px){
  html[data-template=journal] .qbox__card{grid-template-columns:minmax(0,1fr) 288px}
  html[data-template=journal] .qbox--full .qbox__card{grid-template-columns:minmax(0,1fr) 288px}
}
html[data-template=journal] .qbox--slim .qbox__card{padding:14px}
html[data-template=journal] .qbox__card::before{
  content:"";position:absolute;left:24px;top:-11px;width:94px;height:22px;z-index:2;
  background:var(--jn-tape-red);
  clip-path:polygon(2% 6%,96% 0,100% 88%,5% 100%);
  transform:rotate(-2.6deg);pointer-events:none;
}
/* 第二条胶带在右上，颜色换淡蓝：两条不同色的胶带是手账最典型的"贴法"，
   一条会读成"这里破了"，两条才读出"是贴上去的"。 */
html[data-template=journal] .qbox__card::after{
  content:"";position:absolute;right:30px;top:-9px;width:64px;height:19px;z-index:2;
  background:var(--jn-tape-blue);
  clip-path:polygon(4% 0,100% 8%,96% 100%,0 92%);
  transform:rotate(1.8deg);pointer-events:none;
}

/* ── ⑨ tab / 输入 / 按钮：索引页签 + 填空线 + 贴章 ──────────────────────
   tab 从"胶囊分段控件"改成**笔记本的索引页签**：直角、只圆上两角、
   底边压在一条虚线上。选中态的页签"长"在线上（底边没有线），
   未选中的挂在线上方——这是索引本最直白的视觉语法。
   输入框是"一条填空线"：底边 1.5px 实线、其余三边几乎看不见，
   焦点时底线变品牌绿并加粗到 2px。按钮是"贴上去的标签"：
   实心橄榄 + 右下 2px 的实色偏移影，按下去影收掉、块下移 2px。 */
html[data-template=journal] .qbox__tabs{
  display:flex;flex-wrap:wrap;gap:4px;padding:0 0 0 2px;
  background:transparent;border:0;border-radius:0;
}
html[data-template=journal] .qbox__tab{
  height:32px;padding:0 14px;
  font:600 13px/1 var(--font-sans);color:var(--c-text-mute);
  background:rgba(200,168,131,.10);
  border:1px solid var(--jn-hair);border-bottom:0;border-radius:4px 4px 0 0;
  box-shadow:none;
}
html[data-template=journal] .qbox__tab:hover{color:var(--c-brand-700);background:rgba(200,168,131,.26)}
html[data-template=journal] .qbox__tab.is-on{
  color:var(--c-brand-700);background:var(--jn-card);
  border-color:var(--jn-line);box-shadow:inset 0 2px 0 var(--c-brand-600);
}
/* 页签下面那条虚线：挂在 tabs 容器上，贯穿整行，页签"坐"在它上面 */
html[data-template=journal] .qbox__tabs{position:relative;padding-bottom:0}
html[data-template=journal] .qbox__tabs::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:0;
  border-top:1px dashed var(--jn-line);pointer-events:none;
}
html[data-template=journal] .qbox__form{margin-top:var(--s-2)}
html[data-template=journal] .search__field{position:relative}
html[data-template=journal] .qbox .search__input{
  height:50px;padding:0 82px 0 34px;
  font:400 15px/1.2 var(--font-sans);color:var(--c-text);
  background:var(--jn-card);
  border:1px solid var(--jn-hair);border-bottom:1.5px solid var(--c-line-strong);
  border-radius:3px;box-shadow:inset 0 1px 0 rgba(120,101,78,.05);
}
html[data-template=journal] .qbox .search__input::placeholder{color:var(--c-ink-400);opacity:1}
html[data-template=journal] .qbox .search__input:hover{border-bottom-color:var(--c-brand-500)}
html[data-template=journal] .qbox .search__input:focus{
  border-color:var(--jn-hair);border-bottom:2px solid var(--c-brand-600);
  box-shadow:inset 0 1px 0 rgba(120,101,78,.05);
}
html[data-template=journal] .search__icon{color:var(--c-brand-500)}
html[data-template=journal] .qbox .search__btn{
  right:5px;top:5px;min-width:70px;height:40px;padding:0 14px;
  font:700 14px/1 var(--font-sans);color:#FFFFFF;
  background-color:var(--c-brand-600);
  background-image:none;
  border:0;border-radius:3px;
  box-shadow:2px 2px 0 var(--c-brand-700);
  transition:box-shadow 120ms var(--ease),transform 120ms var(--ease),background-color var(--dur) var(--ease);
}
html[data-template=journal] .qbox .search__btn:hover{background-color:var(--c-brand-700);box-shadow:3px 3px 0 var(--c-brand-700)}
html[data-template=journal] .qbox .search__btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--c-brand-700)}
/* 示例行：下划线改成虚线，像用尺子画歪的那一条 */
html[data-template=journal] .qbox__eg{color:var(--c-text-mute);margin-top:var(--s-2)}
html[data-template=journal] .qbox__eg a{
  color:var(--c-brand-700);text-decoration:underline dashed;text-decoration-thickness:1px;
  text-underline-offset:3px;padding:2px 3px;
}
html[data-template=journal] .qbox__eg a:hover{background:var(--c-brand-50);text-decoration-style:solid}
html[data-template=journal] .qbox__cov{color:var(--c-text-mute)}

/* ── ⑩ 右栏：收集册的一页 ───────────────────────────────────────────────
   这块是"数据贴纸"：浅一档的底 + 虚线边，与主便签区分开。
   三格数字用品牌 700（橄榄墨）而不是纯黑——它们读起来像"用绿笔记在页边的数字"。 */
html[data-template=journal] .qbox__side{
  position:relative;padding:14px;
  background:var(--c-surface-sub);
  border:1px dashed var(--jn-line);border-radius:3px;
  box-shadow:none;
}
html[data-template=journal] .qbox__side-h{color:var(--c-text-mute);font-size:12px}
html[data-template=journal] .qbox__live{background:var(--c-brand-600)}
html[data-template=journal] .qbox__num dd{color:var(--c-brand-700);font:700 24px/1.1 var(--font-sans);letter-spacing:0}
html[data-template=journal] .qbox__num dt{color:var(--c-text-mute)}
html[data-template=journal] .qbox__links a{color:var(--c-text-sub)}
html[data-template=journal] .qbox__links a:hover{color:var(--c-brand-700)}

/* ── ⑪ 邮编主卡：一枚邮票 ───────────────────────────────────────────────
   整套包里"齿孔"只出现在两个地方：这张主卡，与下方六位拆解的三小格。
   齿孔不做 mask（mask-composite 在旧 Chrome/Safari 上要 -webkit- 双写，
   还得处理圆角，一改布局就塌）——改成**用纸色画圆点**：
   四个方向各铺一排半径 3.4px 的圆，圆心正好压在边界上，半颗圆在卡外、
   半颗在卡内，视觉上就是被"咬掉"了一口。前提是卡片必须直接坐在纸上
   （--jn-paper-edge 取 --c-paper），所以这张卡不能塞进任何有底色的容器里。
   主数字用品牌 700 而不是墨黑：它是"盖上去的绿色数字"，8.64:1 足够读。 */
/* 去边框而不是"边框透明"：1px 透明边框仍占位，卡片的背景会铺到边框下面，
   于是齿孔上方留出一条 1px 的白线——在 1x 下正是它把"凹口"读成了"凸起"（像素采样确认）。 */
html[data-template=journal] .zipcard{padding:23px 23px 19px;border-radius:2px;border:0}
html[data-template=journal] .zipcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  /* 必须裁到卡片自身：不裁的话，齿孔的影圈有一半画在卡片外面，
     半圆就翻过来读成"边缘鼓出一排小疙瘩"（实测截图）。裁掉外半圈才是"咬掉一口"。 */
  clip-path:inset(0);
  background:
    radial-gradient(circle at 50% -1px,var(--jn-paper-edge) 0 3.7px,rgba(96,78,50,.20) 3.8px 4.5px,transparent 4.6px) 0 0/13px 13px repeat-x,
    radial-gradient(circle at 50% calc(100% + 1px),var(--jn-paper-edge) 0 3.7px,rgba(96,78,50,.20) 3.8px 4.5px,transparent 4.6px) 0 100%/13px 13px repeat-x,
    radial-gradient(circle at -1px 50%,var(--jn-paper-edge) 0 3.7px,rgba(96,78,50,.20) 3.8px 4.5px,transparent 4.6px) 0 0/13px 13px repeat-y,
    radial-gradient(circle at calc(100% + 1px) 50%,var(--jn-paper-edge) 0 3.7px,rgba(96,78,50,.20) 3.8px 4.5px,transparent 4.6px) 100% 0/13px 13px repeat-y;
}
html[data-template=journal] .zipcard__num{position:relative;z-index:1}
html[data-template=journal] .zip{color:var(--c-brand-700);letter-spacing:.05em}
html[data-template=journal] .copy{
  color:var(--c-brand-700);background:var(--c-brand-50);
  border:1px dashed var(--c-brand-500);border-radius:3px;
}
html[data-template=journal] .copy:hover{background:var(--c-brand-100);border-style:solid}
html[data-template=journal] .kv-copy{
  border:1px dashed var(--jn-line);border-radius:3px;color:var(--c-text-mute);
}
html[data-template=journal] .kv-copy:hover{border-style:solid;border-color:var(--c-brand-500);background:var(--c-brand-50)}
html[data-template=journal] .zipcard__note{color:var(--c-text-mute)}

/* ── ⑫ 六位拆解 / 统计 / 步骤 / 列表 / 表格 / 问答 ──────────────────────
   六位拆解的三格 = 三枚小邮票（同 §11 的齿孔，尺寸缩小到 3px 圆点）。
   统计块 = 三张贴纸，各自歪 ±1°，带一层实色偏移影（贴纸压在纸上有厚度）。
   步骤 = 一条虚线路线 + 三枚圆形编号戳，跟首屏那条路线是同一个语言。
   列表 / 表格 / 问答一律换虚线分隔：手账里的行是"画出来的"，不是"印出来的"。 */
html[data-template=journal] .zipbreak{gap:10px;max-width:520px}
html[data-template=journal] .zipbreak__g{
  position:relative;padding:10px 8px;
  background:var(--jn-card);border:0;border-radius:2px;
  box-shadow:0 1px 2px rgba(96,78,50,.08);
}
html[data-template=journal] .zipbreak__g::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  clip-path:inset(0);
  background:
    radial-gradient(circle at 50% -1px,var(--jn-paper-edge) 0 2.9px,rgba(96,78,50,.20) 3.0px 3.6px,transparent 3.7px) 0 0/11px 11px repeat-x,
    radial-gradient(circle at 50% calc(100% + 1px),var(--jn-paper-edge) 0 2.9px,rgba(96,78,50,.20) 3.0px 3.6px,transparent 3.7px) 0 100%/11px 11px repeat-x,
    radial-gradient(circle at -1px 50%,var(--jn-paper-edge) 0 2.9px,rgba(96,78,50,.20) 3.0px 3.6px,transparent 3.7px) 0 0/11px 11px repeat-y,
    radial-gradient(circle at calc(100% + 1px) 50%,var(--jn-paper-edge) 0 2.9px,rgba(96,78,50,.20) 3.0px 3.6px,transparent 3.7px) 100% 0/11px 11px repeat-y;
}
html[data-template=journal] .zipbreak__d{color:var(--c-brand-700)}
html[data-template=journal] .zipbreak__k{color:var(--c-text-sub)}
html[data-template=journal] .zipbreak__v{color:var(--c-text-mute)}

/* 统计贴纸：底边去掉（基样式用 border-left / border-top 拼格子），改成整块贴纸 */
html[data-template=journal] .stats{gap:18px}
html[data-template=journal] .stat{
  padding:12px 14px;
  background:var(--jn-card);border:1px solid var(--jn-line);border-radius:3px;
  box-shadow:2px 3px 0 rgba(176,131,88,.30),0 8px 16px -10px rgba(96,78,50,.40);
}
html[data-template=journal] .stat:nth-child(3n+1){transform:rotate(-1.3deg)}
html[data-template=journal] .stat:nth-child(3n+2){transform:rotate(1deg)}
html[data-template=journal] .stat:nth-child(3n){transform:rotate(-.5deg)}
html[data-template=journal] .stat__n{color:var(--c-brand-700)}
html[data-template=journal] .stat__k{color:var(--c-text-mute)}

/* 步骤：虚线路线 + 圆形编号戳 */
html[data-template=journal] .steps{list-style:none;padding-left:0;gap:16px;counter-reset:jnstep;color:var(--c-text-sub)}
html[data-template=journal] .steps li{position:relative;padding-left:40px;counter-increment:jnstep;min-height:28px}
html[data-template=journal] .steps li::before{
  content:counter(jnstep);position:absolute;left:0;top:-2px;width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--font-hand);color:var(--c-brand-700);
  background:var(--jn-card);border:1px dashed var(--c-brand-500);border-radius:50%;
  transform:rotate(-4deg);
}
html[data-template=journal] .steps li::after{
  content:"";position:absolute;left:13px;top:29px;bottom:-16px;width:0;
  border-left:1px dashed rgba(95,98,41,.38);pointer-events:none;
}
html[data-template=journal] .steps li:last-child::after{display:none}

/* 列表行：虚线分隔 */
html[data-template=journal] .row{border-bottom:1px dashed var(--jn-line)}
html[data-template=journal] .rows--card .row{border-bottom:1px dashed var(--jn-hair)}
html[data-template=journal] .rows--card>li:last-child .row{border-bottom:0}
html[data-template=journal] .row:hover{background:rgba(200,168,131,.16)}
html[data-template=journal] .row__zip{color:var(--c-brand-700)}
html[data-template=journal] .row__meta{color:var(--c-text-mute)}

/* 表格：表头像一条贴上去的米色纸带 */
html[data-template=journal] .table{font-size:13.5px}
html[data-template=journal] .table th{
  background:var(--c-surface-head);color:var(--c-text-sub);
  font-weight:700;border-bottom:1px solid var(--c-line-strong);
}
html[data-template=journal] .table td{border-bottom:1px dashed var(--jn-hair)}
html[data-template=journal] .table tr:hover td{background:rgba(200,168,131,.14)}
html[data-template=journal] .table-wrap{border-radius:3px;overflow:hidden}

/* 问答：虚线分隔 + 手写体的问题 */
html[data-template=journal] .faq{border-top:1px dashed var(--jn-line)}
html[data-template=journal] .faq__item{border-bottom:1px dashed var(--jn-line)}
html[data-template=journal] .faq summary{font-family:var(--font-sans);font-weight:600}
html[data-template=journal] .faq summary:hover{color:var(--c-brand-700)}

/* 提示条 / 来源注：左边缘一条橄榄竖线，像页边的批注 */
html[data-template=journal] .note{
  padding-left:11px;border-left:2px solid rgba(95,98,41,.30);color:var(--c-text-mute);
}
html[data-template=journal] .bar{
  background:var(--c-info-bg);border-left:3px solid var(--c-brand-500);
  border-radius:2px;color:var(--c-info-text);
}

/* ── ⑬ 侧栏 / 面包屑 / 地区网格 / 工具卡 / 信封 ────────────────────────
   侧栏三张卡是"拍立得"：卡面比正文卡再白一点、下边留一条厚白边（相框的底），
   顶上贴一条胶带，整张歪 0.5°。歪是刻意的，但不能更多——
   侧栏是竖排文字，超过 1° 就开始显得"页面歪了"而不是"照片歪了"。 */
html[data-template=journal] .split__side .side-card{
  padding:14px 14px 20px;border-radius:2px;
  box-shadow:1px 2px 0 rgba(200,168,131,.30),var(--sh-1);
}
html[data-template=journal] .split__side .side-card:nth-child(odd){transform:rotate(-.5deg)}
html[data-template=journal] .split__side .side-card:nth-child(even){transform:rotate(.45deg)}
html[data-template=journal] .split__side .side-card::before{
  content:"";position:absolute;left:50%;top:-9px;width:62px;height:18px;margin-left:-31px;
  background:var(--jn-tape-blue);
  clip-path:polygon(3% 0,100% 6%,97% 100%,0 94%);
  transform:rotate(-1.6deg);pointer-events:none;
}
html[data-template=journal] .split__side .side-card:nth-child(even)::before{
  background:var(--jn-tape-red);transform:rotate(1.8deg);
}
html[data-template=journal] .side-card__t{font-size:16px;color:var(--c-ink-900)}
html[data-template=journal] .side-list__v{color:var(--c-brand-700)}

/* 面包屑：一条虚线路线，当前项是一枚小标签 */
html[data-template=journal] .bc{color:var(--c-text-mute)}
html[data-template=journal] .bc__item a{color:var(--c-text-sub);text-decoration:underline dashed;text-underline-offset:3px}
html[data-template=journal] .bc__item a:hover{color:var(--c-brand-700)}
html[data-template=journal] .bc__item+.bc__item::before{content:"·";color:var(--c-brand-500)}

/* 地区网格：一枚枚小纸签 */
html[data-template=journal] .chip{
  background:var(--jn-card);border:1px solid var(--jn-line);border-radius:2px;
  color:var(--c-text-sub);font-weight:600;
}
html[data-template=journal] .chip:hover{
  border-color:var(--c-brand-500);color:var(--c-brand-700);background:var(--c-brand-50);
  box-shadow:2px 2px 0 rgba(200,168,131,.36);
}

/* 工具卡 / 信封示意 / 地址块 */
html[data-template=journal] .tool-way__t{font-family:var(--font-hand);font-size:16px;font-weight:700;color:var(--c-ink-900)}
html[data-template=journal] .tool-way__d{color:var(--c-text-mute)}
html[data-template=journal] .tool-way__go{color:var(--c-brand-700)}
html[data-template=journal] .envwrap{background:var(--c-surface-sub);border-style:dashed}
html[data-template=journal] .addr{background:var(--c-surface-sub);border-style:dashed}
html[data-template=journal] .tag{
  background:var(--c-brand-100);color:var(--c-brand-700);border-radius:2px;
  box-shadow:1px 1px 0 rgba(200,168,131,.5);
}
html[data-template=journal] .pager__btn{background:var(--jn-card);border:1px solid var(--jn-line);border-radius:2px}
html[data-template=journal] .pager__btn:hover{border-color:var(--c-brand-500);color:var(--c-brand-700)}

/* ── ⑭ 页脚：封底 ───────────────────────────────────────────────────────
   比纸深一档的米色 + 顶上一条虚线封口 + 正中一条胶带。
   不写"THE END"之类的假落款，也不放装饰插画——页脚只有导航与免责，
   这是全站唯一每页都在的地方，多一件装饰就是几十万个页面各多一件。 */
html[data-template=journal] .ft{
  position:relative;margin-top:var(--s-6);
  background:#F1E6CE;border-top:1px dashed var(--c-line-strong);
}
html[data-template=journal] .ft::before{
  content:"";position:absolute;left:50%;top:-10px;width:96px;height:21px;margin-left:-48px;
  background:var(--jn-tape-olive);
  clip-path:polygon(2% 4%,98% 0,100% 94%,0 100%);
  transform:rotate(-1.2deg);pointer-events:none;
}
html[data-template=journal] .ft__title{font-size:15px;color:var(--c-ink-900)}
html[data-template=journal] .ft__link{color:var(--c-text-sub)}
html[data-template=journal] .ft__link:hover{color:var(--c-brand-700)}
html[data-template=journal] .ft__legal,
html[data-template=journal] .ft__icp{color:var(--c-ink-500)}

/* ── ⑮ 焦点环与动效 ────────────────────────────────────────────────────
   全局焦点环是「纸色内圈 + 品牌外圈」两层 box-shadow。本包在四个组件上用
   box-shadow 做了造型（输入框的内阴影、按钮的实色偏移、页签的顶部色线、
   选中的页签），这些规则的特异性都高于 `button:focus-visible`，
   于是**焦点环被自己的造型盖掉了**——实测 Tab 到查询按钮与两个未选中页签时
   只剩下一圈透明 outline，键盘用户看不见焦点在哪。
   这里把它们逐个补回来：焦点态优先给环，造型的那一层暂时让位
   （松开 Tab 立刻恢复）。四件套一起写，避免下次改造型又漏一处。 */
html[data-template=journal] .qbox .search__input:focus-visible,
html[data-template=journal] .qbox .search__btn:focus-visible,
html[data-template=journal] .qbox__tab:focus-visible,
html[data-template=journal] .qbox__tab.is-on:focus-visible,
html[data-template=journal] .chip:focus-visible,
html[data-template=journal] .pager__btn: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:3px;
}
html[data-template=journal] .stat,
html[data-template=journal] .split__side .side-card{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}

/* ── ⑯ 窄屏 ─────────────────────────────────────────────────────────────
   < 900：路线装饰收起（首屏让给查询框），主便签 padding 收到 14，
          胶带缩短（96 宽的胶带在 390 上占到卡片四分之一，读起来像一块补丁）。
   < 520：页头小戳 24px，站名 15px，标题 23px，按钮与输入框各让 4px。
   ≤ 374：输入框与按钮分两行——横排在 320 上只剩 180px，占位词必被切。 */
@media (max-width:899px){
  html[data-template=journal] .qbox__card{padding:16px}
  html[data-template=journal] .qbox__card::before{width:74px;height:19px;left:16px;top:-9px}
  html[data-template=journal] .qbox__card::after{width:52px;height:17px;right:20px;top:-8px}
  html[data-template=journal] .zipcard{padding:18px 16px 14px}
  html[data-template=journal] .stat:nth-child(3n+1),
  html[data-template=journal] .stat:nth-child(3n+2),
  html[data-template=journal] .stat:nth-child(3n),
  html[data-template=journal] .split__side .side-card:nth-child(odd),
  html[data-template=journal] .split__side .side-card:nth-child(even){transform:none}
}
@media (max-width:519px){
  html[data-template=journal] .hdr__logo{font-size:14px;gap:7px}
  html[data-template=journal] .hdr__logo svg{width:24px;height:24px;padding:4px}
  /* 页头那枚放大镜整条撤掉：它指向 /search，而 /search 的唯一入口就是查询框，
     而查询框在每一页都紧跟页头（实测 390 宽下它吃掉 40px，站名正好差 1px 被截成「邮编区号查…」）。 */
  html[data-template=journal] .hdr__searchico{display:none}
  html[data-template=journal] .hero__title{font-size:23px}
  html[data-template=journal] .qbox__tab{padding:0 11px;height:31px;font-size:12.5px}
  /* 输入框左侧那枚放大镜同理撤掉：右侧已经有写着「查询」的按钮，这里再画一个镜片是重复信息。
     省下的 22px 全部给占位词——390 宽下原本被切成「输入 6 位邮编，」，
     示例号「如 530000」整个看不见（实测需要 162px，可用只有 114px）。 */
  html[data-template=journal] .search__icon{display:none}
  html[data-template=journal] .qbox .search__input{padding:0 68px 0 14px;font-size:14px}
  html[data-template=journal] .qbox .search__btn{min-width:56px;padding:0 10px;font-size:13px}
  html[data-template=journal] .qbox--slim .qbox__card{padding:12px}
  html[data-template=journal] .stats{gap:12px}
}
@media (max-width:374px){
  /* 320 宽横排只剩 180px：占位词必被切、按钮也挤。
     改成上下两段，只对 --full（首页与 /chaxun）；slim 条变两行等于每页多 56px，不值。
     选择器写 `.qbox.qbox--full` 而不是后代：这两个类在同一个元素上，
     写成 `.qbox--full .qbox` 永远匹配不到（上一版就是这么静默失效的）。 */
  html[data-template=journal] .qbox.qbox--full .search__field{display:grid;grid-template-columns:1fr;gap:8px}
  html[data-template=journal] .qbox.qbox--full .search__input{padding:0 14px;height:48px}
  html[data-template=journal] .qbox.qbox--full .search__btn{position:static;width:100%;height:42px;box-shadow:2px 2px 0 var(--c-brand-700)}
  html[data-template=journal] .qbox.qbox--full .search__btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--c-brand-700)}
}
  html[data-template=journal] .qbox--full .qbox .search__input,html[data-template=journal] .qbox .qbox--full .search__input{padding:0 14px}
  html[data-template=journal] .qbox .qbox--full .search__btn,html[data-template=journal] .qbox--full .qbox .search__btn{position:static;width:100%;height:42px;box-shadow:2px 2px 0 var(--c-brand-700)}
  html[data-template=journal] .qbox--full .search__btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--c-brand-700)}
}