/**
 * 区域包独立页样式 —— 只被 region.html 与预渲染的 regions/<code>.html 加载。
 *
 * 为什么不直接塞进 css/main.css：
 *   这份样式包含版面重排与打印规则，只有 17 个区域包页面需要；
 *   main.css 是全站每个页面都要下载的，放进去等于让首页也背上这段体积。
 *
 * 为什么打印规则和屏幕规则放在一个文件：
 *   两者改的常常是同一处属性（宽度、栅格列数）—— 拆成两个文件，
 *   改屏幕布局时就会忘记同步打印，导出的 PDF 会慢慢和屏幕不一致。
 *
 * 复用既有样式：
 *   .hy-pack-block / .hy-flow-* / .hy-struct-* / .hy-chain / .hy-caveat-list / .hy-pack-links
 *   这些在 main.css 里已经定义（原本给 regions.html 的折叠卡片用），
 *   js/region-page.js 产出的 markup 用的是同一套类名，所以这里只需要改「卡片场景 → 文档场景」
 *   的差异部分（去掉卡片内边距、放宽列宽），不重写一遍。
 */

/* ============================== 屏幕 ============================== */

/* 长文档的阅读宽度：比站点栅格窄一些，一行 30~40 个汉字最省眼力。
   宽屏下靠左侧对齐正文、右侧留给目录，不让它居中跑到很右边。 */
.region-page {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 3rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
}

/* 卡片场景的左右内边距在文档里是多余的（正文已经在一个居中的窄列里） */
.region-page .hy-pack-block {
  padding: 0;
  margin-top: 0;
}

.region-page .hy-pack-dims {
  padding: 0;
  margin-top: 0;
  background: none;
  border: 0;
}

.region-page .hy-chain {
  margin-top: 0.75rem;
}

/* ---- 量化参考（独立页专属块） ----
   设计要点：这一块的信息密度比其它块高（数值 + 年份 + 法条），
   所以用小字号 + 紧凑行距，避免打印时被拆得七零八落。 */

.region-page .hy-quant-meta {
  margin: 0.5rem 0 0.9rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface);
  border-left: 2px solid var(--primary);
  border-radius: 2px;
}

.region-page .hy-quant-note {
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.region-page .hy-quant-years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.region-page .hy-quant-year {
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.region-page .hy-quant-formula {
  margin: 0.6rem 0 0.75rem;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.75;
}

.region-page .hy-quant-formula li {
  margin: 0.15rem 0;
}

/* ---- 三算例对照（燃油 / 混动 / 纯电）----
   先给结论再给算式：读者最想知道的是「差在哪、差多少」。
   第二列是唯一的长文本列，允许折行；第三列是金额，不折。 */
.region-page .hy-quant-compare {
  width: 100%;
  margin: 0.5rem 0 1.1rem;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.region-page .hy-quant-compare th,
.region-page .hy-quant-compare td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.region-page .hy-quant-compare thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom-width: 2px;
}

.region-page .hy-quant-compare tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.region-page .hy-quant-compare-total {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* 单场景折叠：首场景默认展开，其余收起 —— 三个都摊开会让这一节长到看不到结尾 */
.region-page .hy-quant-scenario {
  margin: 0 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.region-page .hy-quant-scenario > summary.hy-quant-scenario-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  list-style: none;
}

.region-page .hy-quant-scenario > summary.hy-quant-scenario-head::-webkit-details-marker { display: none; }

.region-page .hy-quant-scenario > summary.hy-quant-scenario-head::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.region-page .hy-quant-scenario[open] > summary.hy-quant-scenario-head::after { content: "▴"; }

.region-page .hy-quant-scenario-label {
  font-weight: 600;
  color: var(--text);
}

.region-page .hy-quant-scenario-total {
  font-size: 0.82rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.region-page .hy-quant-scenario-body {
  padding: 0 0.85rem 0.85rem;
}

.region-page .hy-quant-scenario-body > .hy-quant-note:first-child { margin-top: 0; }

/* 结构依据单独一行：三个场景的依据可能来自不同法条或分档，混在 note 里读者分不出来 */
.region-page .hy-quant-source {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.region-page .hy-quant-source em {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

.region-page .hy-quant-source > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 算例表：三列纯数值对齐。中文长句才折行（见 structureBlock 注释），
   这里最长的单元格是算式，所以给算式列允许换行、其余列不折。 */
.region-page .hy-quant-table {
  width: 100%;
  margin: 0.5rem 0 0;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.region-page .hy-quant-table th,
.region-page .hy-quant-table td {
  padding: 0.42rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.region-page .hy-quant-table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom-width: 2px;
}

.region-page .hy-quant-table tbody th {
  font-weight: 500;
}

.region-page .hy-quant-table td:last-child,
.region-page .hy-quant-table thead th:last-child {
  text-align: right;
  white-space: nowrap;
}

.region-page .hy-quant-table tr.is-total th,
.region-page .hy-quant-table tr.is-total td {
  font-weight: 600;
  color: var(--primary);
  border-bottom: 0;
}

/* ---- 目录 ---- */

.region-toc {
  margin: 1.5rem 0 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}

.region-toc-title {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.region-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}

.region-toc-list li {
  margin: 0.22rem 0;
  font-size: 0.9rem;
  break-inside: avoid;
}

.region-toc-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.region-toc-list a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ---- 章节 ---- */

.region-block {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.region-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.region-block-head {
  margin-bottom: 1.1rem;
}

.region-block-head h2 {
  margin: 0 0 0.3rem;
  font-size: 1.28rem;
  line-height: 1.4;
}

/* 章节导语：比正文小一号、浅一档，读的时候可以跳过不影响理解 */
.region-block-hint {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* ---- 基本面 ---- */

.region-lead {
  margin: 0 0 1.2rem;
  font-size: 1.02rem;
}

.region-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.region-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.region-facts dt {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.region-facts dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---- 操作区 ---- */

.region-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

/* 次要动作（导出 PDF）不抢主 CTA 的视觉权重 */
.region-export-btn {
  cursor: pointer;
  font: inherit;
}

.region-export-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---- 依据与来源 ---- */

.region-page .hy-pack-refs .hy-struct-base a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 92, 99, 0.3);
  word-break: break-all;
}

.region-page .hy-pack-refs .hy-struct-base a:hover {
  border-bottom-color: var(--primary);
}

/* ---- 引用键 · 核对日期 ---- */

/* 引用键是这一版新增的对外标识：读者在邮件或纪要里写 [VN-03] 就能指回同一条来源。
   官方与第三方用同一形状、不同色调区分 —— 换个字形会让两套编号读起来像两种体系。 */
.hy-ref-badge {
  flex: 0 0 auto;
  padding: 0.05rem 0.36rem;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: nowrap;
}

.hy-ref-badge-off {
  background: rgba(13, 92, 99, 0.1);
  color: var(--primary);
  border: 1px solid rgba(13, 92, 99, 0.22);
}

.hy-ref-badge-third {
  background: rgba(180, 83, 9, 0.09);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.22);
}

.hy-ref-accessed {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.hy-ref-foot,
.hy-third-lead,
.hy-cite-lead {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.hy-ref-foot strong,
.hy-third-lead strong {
  color: var(--text);
}

/* ---- 第三方来源与交叉印证 ---- */

.region-page .hy-pack-thirdparty .hy-struct-base a {
  color: #b45309;
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 83, 9, 0.28);
  word-break: break-all;
}

.region-page .hy-pack-thirdparty .hy-struct-base a:hover {
  border-bottom-color: #b45309;
}

/* 性质标签贴在机构名右边：读者扫一眼就知道「这条是媒体、不是法条」 */
.hy-third-nature {
  flex: 0 1 auto;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #b45309;
  background: rgba(180, 83, 9, 0.07);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem;
}

.hy-third-extra {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.82rem;
}

/* ---- 引用说明 ---- */

.hy-cite-formats {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

/* 引用格式做成可整段复制的浅底块：引用者不需要自己拼标点与顺序 */
.hy-cite-format {
  padding: 0.7rem 0.9rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.hy-cite-lang {
  margin: 0 0 0.25rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hy-cite-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  word-break: break-word;
}

.hy-cite-text a {
  color: var(--primary);
}

.hy-cite-note {
  margin: 0.85rem 0 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--text-muted);
}

.hy-cite-note.hy-cite-disclaimer {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ---- 免责声明 ---- */

.region-disclaimer {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--text);
}

/* ---- 同区域互链 ---- */

.region-siblings {
  margin-top: 1.5rem;
}

/* ---- 折叠卡片里的「读完整详情页」入口 ----
   加在 regions.html 的 details 卡片里，把「横向对比」与「纵深材料」连起来。 */

.hy-pack-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0.9rem 1.2rem 0;
  padding: 0.55rem 0.8rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.hy-pack-more-link {
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: none;
  white-space: nowrap;
}

.hy-pack-more-link:hover {
  text-decoration: underline;
}

.hy-pack-more-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---- Hero 快捷锚点 ----
   独立页正文有十几节，读者进场时最想先看的是「跟钱有关的」和「最容易出事的」。
   这四个按钮把两跳（看出来 → 翻目录 → 找到）压成一次点击。
   Hero 底下是深色蒙层照片，所以按钮走半透明白底 + 白字，不能沿用正文的浅色描边。 */
.region-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.region-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.2;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.region-quick-btn:hover,
.region-quick-btn:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  border-color: #fff;
}

.region-quick-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ---- 底部折叠模块（附 A–D 与本页存疑） ----
   这些块默认收起：主线（流程、单证、税费、依据）读完还要再看细节的读者才展开，
   否则一篇区域包会拉成两屏半的长文档。 */
.region-collapsible {
  margin: 2.25rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.region-collapsible > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

/* 去掉 Chrome 默认的三角，换成一个随展开方向旋转的加号 */
.region-collapsible > summary::-webkit-details-marker { display: none; }

.region-collapsible > summary::before {
  content: "＋";
  font-size: 0.95rem;
  color: var(--primary);
  line-height: 1;
  transform: translateY(0.05em);
}

.region-collapsible[open] > summary::before { content: "－"; }

.region-collapsible-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-dark);
}

/* 收起时 hint 是唯一的解释；展开后正文自己会讲，留着只是噪音，所以隐藏 */
.region-collapsible-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}

.region-collapsible[open] > summary .region-collapsible-hint { display: none; }

.region-collapsible[open] > summary {
  border-bottom: 1px solid var(--border);
}

.region-collapsible-body {
  padding: 1.1rem 1.1rem 0.35rem;
}

/* 折叠块内部的子标题比正文小一号，避免和一级章节抢层级 */
.region-collapsible-body .hy-pack-dim-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 1.1rem 0 0.6rem;
}

/* ---- 附 A：CBU 整车 vs CKD / SKD 散件 ----
   两列并排的前提是「同一条维度左右对照」，所以维度名单独占一行、
   两个方案各占一列 —— 一旦把维度名塞进左列，对照关系就断了。 */
.hy-cbu-head {
  display: none;
}

.hy-cbu-row {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.hy-cbu-row:first-of-type { border-top: 0; }

.hy-cbu-item {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text);
}

.hy-cbu-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.hy-cbu-cell {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.7;
  border-left: 3px solid var(--border);
  background: var(--bg);
}

.hy-cbu-cell-cbu { border-left-color: var(--text-muted); }
.hy-cbu-cell-ckd { border-left-color: var(--primary); }

.hy-cbu-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hy-cbu-summary {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
}

/* 两列对照在窄屏上会被压成每列几个字，直接改成上下堆叠 */
@media (max-width: 640px) {
  .hy-cbu-pair { grid-template-columns: 1fr; }
}

/* ---- 附 B：风险矩阵 ----
   盘面（3×3 网格）负责「先看哪里」，下面的明细负责「具体怎么防」。
   盘面必须窄而等宽，宽窄不一的格子会让人以为某些格子里的事更严重。 */
.hy-rm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.hy-rm-table th,
.hy-rm-table td {
  border: 1px solid var(--border);
  padding: 0.5rem;
  vertical-align: top;
  text-align: left;
}

.hy-rm-table thead th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.hy-rm-table tbody th {
  background: var(--bg);
  width: 6.5rem;
  font-weight: 600;
  color: var(--text-muted);
}

.hy-rm-cell { min-height: 3rem; }

/* 用底色深浅表示优先级：深 = 先处理。黑白打印时靠 chips 的边框仍可区分。 */
.hy-rm-cell.is-high { background: var(--accent-soft); }
.hy-rm-cell.is-critical {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.hy-rm-chip {
  display: block;
  padding: 0.2rem 0.4rem;
  margin-bottom: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.5;
}

.hy-rm-hint {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hy-rm-tag {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--primary);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* ---- 附 C：高频问题 ---- */
.hy-faq-item {
  border-top: 1px solid var(--border);
  padding: 0.2rem 0;
}

.hy-faq-item:first-of-type { border-top: 0; }

.hy-faq-item > summary {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.hy-faq-item > summary::-webkit-details-marker { display: none; }

.hy-faq-num {
  flex: 0 0 auto;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35rem;
}

.hy-faq-a {
  padding: 0 0 0.85rem 1.95rem;
  color: var(--text);
}

.hy-faq-a p { margin: 0 0 0.4rem; }

.hy-faq-org {
  font-size: 0.85rem !important;
  color: var(--text-muted);
}

/* ---- 附 D：可复制工具模板 ----
   user-select:all 让点一下即全选整段：不依赖 JS，AI 抓取器与打印导出场景同样可用。 */
.hy-tool { margin-bottom: 1.35rem; }

.hy-tool-head {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.hy-tool-head em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
}

.hy-tool-pre {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.82rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  cursor: copy;
}

.hy-tool-pre:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- 量化参考里的免责提示 ----
   和页脚的 .region-disclaimer 分工不同：页脚那条声明整页性质，
   这条贴在第一张税率表上方，拦的是「直接抄百分比进报价单」。 */
.hy-quant-warn {
  margin: 0.5rem 0 1.25rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.86rem;
  color: var(--text);
}

/* ---- 本页存疑 ----
   做成和「注意事项」不同的样式（后者是提醒，这里是自我披露），
   所以走中性灰而不是 accent 色，避免和风险提示混为一谈。 */
.hy-uncertain-list li {
  margin-bottom: 0.55rem;
}

.hy-uncertain-detail {
  display: block;
  font-size: 0.87rem;
  color: var(--text-muted);
}

/* ---- 打印页眉页脚：屏幕上不显示 ---- */

.print-chrome {
  display: none;
}

/* ============================== 打印 ==============================
   「方便导出 PDF」落到实现上就是这一节。三条原则：
     1) 屏幕上用来导航的东西（页头页脚、悬浮导航、CTA 横幅、导出按钮）全部隐藏 ——
        它们印在纸上没有意义，还会把正文挤到第二页去；
     2) 每个重复单元（步骤、清单行、注意事项条目）不允许跨页断开 ——
        中间断开的「① 进口关税」比换页浪费的那点空间难读得多；
     3) 每页都带上主体信息（公司 / 品牌 / 网站 / 导出日期）——
        这是「导出 PDF 要带网站名、品牌名、公司名」的落点。 */

@page {
  size: A4;
  margin: 18mm 16mm 20mm;
  /* Chrome 目前不支持 @page 外边距框，这两条对 Chrome 无效（无害）。
     支持它的引擎会额外画出页码；Chrome 下页码由浏览器自带的页眉页脚提供，
     所以导出面板里明确提示「保留浏览器的页眉和页脚」。 */
  @bottom-right {
    content: counter(page);
  }
}

@media print {
  /* 1) 去掉一切导航性元素 */
  #site-header,
  #site-footer,
  .site-header,
  .site-footer,
  .nav-toggle,
  .nav-panel,
  .cta-band,
  .region-actions,
  .region-export-hint,
  .breadcrumb,
  .region-quick,
  .region-hero .page-hero-overlay {
    display: none !important;
  }

  /* 折叠模块在纸上没有「点开」这个动作 —— 收着印出去等于这几块不存在。
       平时由 js/region-page.js 在 beforeprint 时展开；这里再补一条纯 CSS 兜底，
        覆盖「无 JS 直接抓取页面 / 命令行导出」的场景。
       下面的 display 覆盖不到时，JS 那条仍然生效，两条互不依赖。 */
  details:not([open]) > *:not(summary),
  .region-collapsible > .region-collapsible-body,
  .hy-faq-item > .hy-faq-a {
    display: block !important;
    content-visibility: visible !important;
  }

  .region-collapsible {
    border: 1px solid #c9d2d7;
    background: none;
  }

  /* 场景算例在纸上不要跨页断开，也不显示折叠箭头（打印版已由 JS 统一展开） */
  .hy-quant-scenario {
    border-color: #999 !important;
    background: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hy-quant-scenario > summary.hy-quant-scenario-head::after {
    content: "" !important;
  }

  .hy-quant-compare th,
  .hy-quant-compare td {
    border-bottom-color: #999 !important;
  }

  .region-collapsible > summary {
    padding: 0.5rem 0;
    border-bottom: 1px solid #c9d2d7;
  }

  .region-collapsible > summary::before { content: none; }

  /* 折叠块的 hint 在屏幕上靠 summary 呈现，纸上没有折展状态，补回标题下的说明 */
  .region-collapsible[open] > summary .region-collapsible-hint,
  .region-collapsible > summary .region-collapsible-hint {
    display: inline;
  }

  /* 风险矩阵的优先级底色在黑白打印会糊成一片，改靠边框区分 */
  .hy-rm-cell.is-high,
  .hy-rm-cell.is-critical {
    background: none !important;
    box-shadow: none !important;
  }

  .hy-rm-cell.is-critical { border: 2px solid #333 !important; }

  /* hero 在纸上是一整块纯色，白占半页，所以压成标题条 */
  .region-hero {
    min-height: auto !important;
    padding: 0 0 0.75rem !important;
    background: none !important;
    border-bottom: 2px solid #0d5c63;
    margin-bottom: 1rem;
  }

  .region-hero .page-hero-bg {
    display: none !important;
  }

  .region-page {
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
    line-height: 1.7;
  }

  /* 打印不用 webfont。
     Noto Sans SC 被 Google Fonts 按 unicode-range 切成上百个子集，
     打印时「每一个用到了字的子集」都会被嵌进 PDF —— 14 页的越南页因此撑到 2.6 MB，
     字体对象 545 个、图像 0 个，体积全是字。
     纸面用系统字体完全够（Windows 微软雅黑 / macOS 苹方都是高质量中文黑体），
     而且不必等 webfont 加载完再出 PDF。
     注意这里必须 !important：--font 变量挂在 body 上，普通优先级压不住。 */
  body,
  .region-page,
  .print-chrome {
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
      "Source Han Sans SC", "Noto Sans CJK SC", system-ui, sans-serif !important;
  }

  body {
    background: #fff !important;
    color: #000;
  }

  /* 2) 重复单元不跨页断开；标题不与它下面的内容分离 */
  .hy-flow-step,
  .hy-struct-row,
  .hy-caveat-list li,
  .hy-pack-topic-chip,
  .region-facts > div,
  .region-toc-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .region-block-head,
  .hy-pack-dim-label,
  .hy-sub-label {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 算例表：行不跨页拆断，表头每页重复。表格是纯数值，打印走黑白也不丢信息 */
  .hy-quant-table {
    break-inside: auto;
    page-break-inside: auto;
  }

  .hy-quant-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hy-quant-table thead {
    display: table-header-group;
  }

  .hy-quant-table th,
  .hy-quant-table td {
    border-bottom-color: #999 !important;
  }

  .hy-quant-meta,
  .hy-quant-year {
    background: none !important;
    border-color: #999 !important;
  }

  /* 一级章节从新的一页开始：一份 12 节的材料，印出来还夹着上一节的尾巴很难翻 */
  .region-block {
    break-before: page;
    page-break-before: always;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  /* 第一节紧跟目录，不另起一页（否则第一页只有标题和目录，很浪费） */
  #pack-overview {
    break-before: avoid;
    page-break-before: avoid;
  }

  /* 目录在纸上是一次性导航，允许它和第一节同页 */
  .region-toc {
    break-inside: avoid;
    page-break-inside: avoid;
    background: none;
    columns: 2;
  }

  /* 卡片在纸上没有圆角和阴影的必要，边框反而更清楚 */
  .hy-pack-card,
  .region-toc,
  .region-facts,
  .region-disclaimer {
    box-shadow: none !important;
  }

  .region-disclaimer {
    background: #fff;
    border: 1px solid #999;
    border-left: 3px solid #999;
  }

  /* 外链在纸上点不开，把域名显式打出来，读者才知道去哪核对 */
  .region-page a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.78em;
    color: #444;
    word-break: break-all;
  }

  /* 但正文里的站内链接不需要把 URL 印出来 */
  .region-page a[href^="/"]::after,
  .region-page a[href^="#"]::after,
  .region-page a[href^="../"]::after {
    content: none;
  }

  /* 3) 每页重复的页眉页脚 —— position: fixed 在 Chrome 打印时会出现在每一页。
        正文上下留出对应的空白，避免内容压在这些文字上。 */
  .print-chrome {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 8.5pt;
    color: #333;
  }

  .print-chrome-head {
    top: 0;
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid #bbb;
  }

  .print-chrome-foot {
    bottom: 0;
    padding-top: 3mm;
    border-top: 0.5pt solid #bbb;
  }

  .print-chrome-brand {
    font-weight: 700;
    color: #0d5c63;
  }

  .print-chrome-org,
  .print-chrome-site {
    color: #444;
  }
}

/* ============ 二级导航长文页（根目录的 regions-* / cases-* / resources-* 独立页） ============
   这些页面与区域包独立页共用同一套版面（.region-page / .region-toc / .region-block /
   hy-* / print-chrome），所以不新写样式文件，只补两处既有规则覆盖不到的地方：
   1) 打印时第一节不另起一页 —— 区域包页靠 #pack-overview 那条规则，长文页第一节的 id
      各不相同，所以改用结构选择器（否则第一页只剩页眉、标题与目录，白费一页）；
   2) 正文里的对照表在纸上要能完整展开 —— .blog-table-wrap 在屏幕上是横向滚动容器，
      印到纸上会把它裁掉。 */
@media print {
  .region-page > .region-block:first-of-type {
    break-before: avoid;
    page-break-before: avoid;
  }

  .region-page .blog-table-wrap {
    overflow: visible !important;
  }

  .region-page .blog-table {
    width: 100%;
    table-layout: fixed;
    font-size: 9pt;
  }

  .region-page .blog-table th,
  .region-page .blog-table td {
    padding: 0.3rem 0.35rem;
    word-break: break-word;
  }
}