/* ==========================================================================
GuBruce 2026-09-18 · 品牌标识（客户提供的公司 logo）
--------------------------------------------------------------------------
更新记录：
v1（同日早些）用过一版红色方块标记 —— 客户指出拿错了文件；
v2（当前）改用 `logo文件\logo_v1_transparent.png`（Smartnic 横排字标，宽高比 2.02:1）。
与上一版的关键差别（也是本文件跟着改的原因）：
1) 它是**横排字标**（2.02:1），不是方块 → 不能再塞进 36x36 的方块，
否则显示高度只剩 17px，细节全糊。所以容器改为按内容宽度自适应，
整条字标直接显示，高度 34px（约 69px 宽）。
2) 它**自带白色描边**，本来就是给深色背景设计的 → 深色页头上无需再垫白底，
垫白底反而会让白描边消失。故 logo 容器底色改为透明。
3) 字标里已含品牌英文字样，可能与旁边 `.logo__txt` 的
「WSTDZ · Elevator Electronics」重复 —— 想隐藏副标见文件末尾注释。
加载顺序：必须在 `layout.css` 之后；`placeholders.css`（临时标注层）仍在最后。
========================================================================== */
/* ---------- 页头 / 页脚的 logo ---------- */
.logo__mark {
background-image: none !important; /* 去掉原琥珀渐变 */
background-color: transparent !important; /* 字标自带白描边，不需白底 */
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important; /* 原来是 36px 正方形，这里要放开 */
height: auto !important;
border-radius: 0 !important;
overflow: visible;
flex: 0 0 auto;
/* 原样式是给 36px 方块配的 **box-shadow 橙色光晕**；容器变宽后会变成一圈矩形光框。
光晕没有取消，而是换成 `filter: drop-shadow()` 加在图片上（见下方 .logo__img）——
drop-shadow 走的是 **alpha 通道**，光晕会紧贴字母与弧线的轮廓。 */
border: 0 !important;
box-shadow: none !important;
}
.logo__mark .logo__img {
display: block;
/* 图片四周有 8% 透明边距（给光晕呼吸空间，否则直边发光会形成矩形框）
→ 显示高 56px 时，图案实际高 ≈48px，其中**字母只有 ≈12.4px**。
客户反映原 39px 时字母仅 8.7px 而显糊，故放大到 56px（页头总高 73px，容得下）。 */
height: 56px;
width: auto;
/* 琥珀光晕：**紧贴字母轮廓**（drop-shadow 跟 alpha 走，而不是跟盒子走）。
页头尺寸小，用两层较浅的光晕，避免糊成一团。 */
filter: drop-shadow(0 0 8px rgba(255, 107, 26, .50))
drop-shadow(0 0 18px rgba(255, 107, 26, .42));
}
/* ---------- 移动端抽屉里的 logo ---------- */
.drawer__head .logo__mark {
border-radius: 0;
margin-right: .55rem;
}
.drawer__head .logo__mark .logo__img {
height: 44px; /* 图案 ≈38px，字母 ≈9.8px */
width: auto;
}
/* ---------- 隐藏英文副标（客户 2026-09-18 确认删除）----------
字标里已含品牌英文名（Smartnic），旁边再出现「WSTDZ · Elevator Electronics」
既重复、两个英文名也不一致。中文名「万事通电子」保留。
用 CSS 隐藏而不是删 `chrome.js` 里的模板 —— 可一键恢复，也不动设计师的代码。 */
.logo__sub { display: none !important; }
/* ---------- 首页预加载动画里的 logo ----------
以前是「琥珀渐变方块 + 白字 W」，现换成新 logo 图片（透明底）。
客户 2026-09-18 要求：**放大**这个 logo，并删掉下方的「WSTDZ ELEVATOR」小字。
注意它只存在于 index.html，且在加载完后被 JS 移除（约 1.8s），平时不容易看到。 */
.preloader__mark {
background-image: none !important;
background-color: transparent !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
font-size: 0; /* 万一 img 未加载，也绝不露出旧的 W 字母 */
display: flex;
align-items: center;
justify-content: center;
/* 同 .logo__mark：原样式是给 36px 方块配的橙色光晕 + 细描边，
放大成 400px 宽后会变成一大圈矩形光框 ⇒ 去掉 */
border: 0 !important;
box-shadow: none !important;
}
/* 预加载器容器原来固定 240px 宽，把 logo 卡在 238px 上（img 带全局 max-width:100%）。
客户要求放大 logo ⇒ 放宽容器；进度条与百分比会等比变宽，观感反而更协调。
464px = 图案 400px + 两侧各 8% 透明边距（给光晕呼吸空间） */
.preloader__inner {
width: min(86vw, 464px) !important;
}
.preloader__mark .logo__img {
display: block;
width: 100%; /* 在放宽后的容器里占满 → 桌面约 400px 宽（原来 132px） */
height: auto;
/* 琥珀光晕：**紧贴字母与红色弧线的轮廓** —— 用 drop-shadow（跟 alpha 走）而
不是 box-shadow（跟盒子走）。
客户 2026-09-18 要求**加大强度** → 用两层叠加：内层窄而浓、外层宽而淡，
比单层同参数更有「发光」质感。 */
filter: drop-shadow(0 0 12px rgba(255, 107, 26, .80))
drop-shadow(0 0 32px rgba(255, 107, 26, .62));
}
/* ============================================================
GuBruce 2026-09-18 · 招聘板块（联系我们页）
设计原则：只补「现成组件不够用」的部分，其余全部沿用站内已有实现 ——
区块标题 → .gb-sec-head / .gb-eyebrow / .gb-sec-title / .gb-sec-sub
岗位列表 → .gb-faq / .gb-faq__item / .gb-faq__q / .gb-faq__a（含展开动画）
圆点/胶囊 → 复用 .gb-eyebrow 同款令牌（--hud-led / --gb-ink-link）
因此本文件不重新定义任何颜色、字号、圆角、阴影，视觉与全站一致。
============================================================ */
/* 岗位描述比 FAQ 答案长，放宽展开高度（站内默认 460px 会截断） */
.gb-jobs .gb-faq__item.is-open .gb-faq__a{ max-height:2000px }
/* 元信息行：沿用站内 meta 行的规范（等宽字体 + 大字距 + 弱化色） */
.gb-job__meta{
display:flex;flex-wrap:wrap;gap:.45rem 1rem;
padding:0 1.4rem .55rem;
font-family:var(--gb-font-mono);font-size:10px;
letter-spacing:.1em;text-transform:uppercase;
color:var(--gb-text-muted);
}
.gb-job__k{ display:inline-flex;align-items:center }
.gb-job__k::before{
content:"";width:5px;height:5px;border-radius:50%;
background:var(--hud-led);box-shadow:var(--hud-glow);
margin-right:.42rem;flex:0 0 auto;
}
/* 标签胶囊：沿用 .gb-eyebrow 的琥珀令牌 */
.gb-job__tags{ display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.4rem .75rem }
.gb-job__tag{
font-size:var(--fs-xs);font-weight:600;color:var(--gb-ink-link);
background:rgba(255,107,26,.08);border:1px solid rgba(255,107,26,.18);
padding:.22rem .6rem;border-radius:var(--gb-pill);
}
/* 正文（由 WordPress 正文生成，可能含 h3/p/ul） */
.gb-job__body{ padding:0 1.4rem .1rem }
.gb-job__body h3,.gb-job__body h4{
font-family:var(--gb-font-head);font-size:1rem;color:var(--gb-heading);
margin:.85rem 0 .3rem;
}
.gb-job__body p{ padding:0;margin:.3rem 0;font-size:var(--fs-sm);color:var(--gb-text-muted);line-height:1.75 }
.gb-job__body ul{ margin:.25rem 0 .6rem;padding-left:1.15rem }
.gb-job__body li{ font-size:var(--fs-sm);color:var(--gb-text-muted);line-height:1.75;margin:.2rem 0 }
/* 投递行（是 .gb-faq__a 的直接子元素，需覆盖站内的 p 内边距） */
.gb-job__apply{
padding:0 1.4rem 1.3rem !important;margin:.7rem 0 0 !important;
font-size:var(--fs-sm);color:var(--gb-text-muted);
}
.gb-job__apply a{ color:var(--gb-ink-link);font-weight:600 }
/* ============================================================
GuBruce 2026-09-18 · 地图卡改为可点击（跳转百度地图）
只补「可点击」所需的交互反馈，配色/尺寸沿用站内令牌，不改设计师原有视觉。
============================================================ */
a.gb-contact-map{
display:block;
text-decoration:none;
cursor:pointer;
position:relative;
transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base);
}
a.gb-contact-map:hover{
border-color:rgba(34,211,238,.45);
transform:translateY(-3px);
box-shadow:var(--gb-shadow-lg);
}
a.gb-contact-map:focus-visible{
outline:2px solid var(--gb-ink-link);
outline-offset:2px;
}
.gb-contact-map__go{
display:block;
margin-top:.6rem;
font-family:var(--gb-font-label);
font-size:var(--fs-xs);
font-weight:700;
letter-spacing:.1em;
color:var(--gb-ink-link);
}
a.gb-contact-map:hover .gb-contact-map__go{ color:#FF8A3D }
/* ============================================================
GuBruce 2026-09-18 · 地图卡改为真实定位图片
设计师原样式（pages.css）是 aspect-ratio:21/9 的深色占位卡 + 网格装饰层；
图片比例也是 21:9（1600x686），所以直接铺满即可，尺寸完全对上。
============================================================ */
a.gb-contact-map{ padding:0 } /* 去掉内边距，让地图铺满卡片 */
a.gb-contact-map::after{ display:none } /* 隐藏占位用的网格装饰层，露出真实地图 */
a.gb-contact-map picture{ display:block; width:100%; height:100%; }
a.gb-contact-map img{
display:block; width:100%; height:100%;
object-fit:cover; /* 与卡片 21:9 同比例，不会裁掉定位点 */
transition:transform var(--t-slow, .6s ease);
}
a.gb-contact-map:hover img{ transform:scale(1.03) } /* 悬停轻微放大，提示可点 */
/* 点击提示条改为压在图底部的渐隐条（原来是一行普通文字） */
a.gb-contact-map .gb-contact-map__go{
position:absolute; left:0; right:0; bottom:0; margin:0; z-index:3;
padding:.7rem 1.1rem .65rem;
background:linear-gradient(180deg, rgba(9,17,32,0) 0%, rgba(9,17,32,.86) 62%);
color:#fff; text-align:right;
font-family:var(--gb-font-label); font-size:var(--fs-xs);
font-weight:700; letter-spacing:.1em;
}
a.gb-contact-map:hover .gb-contact-map__go{ color:#FF9A57 }
/* ============================================================
GuBruce 2026-09-18 · 联系表单校验提示
背景：客户反馈「需求提交失败」。实测发现表单不做任何校验，
填漏了也能提交，而失败时只有一句笼统兑底 —— 访客看不出问题在哪。
现在：具体原因写在 .form__err 里，出错的字段加 .field--err 红框。
============================================================ */
.form__err{
margin:.2rem 0 .9rem;
padding:.6rem .85rem;
border-radius:var(--gb-radius);
background:rgba(214,54,54,.07);
border-left:3px solid #d63636;
color:#a02a2a;
font-size:var(--fs-sm);
line-height:1.7;
}
.field--err input, .field--err textarea, .field--err select{
border-color:#d63636 !important;
box-shadow:0 0 0 3px rgba(214,54,54,.13);
}
/* 必填星号与选填说明 */
.field__req{ color:#d63636;font-weight:700 }
.field__opt{ color:var(--gb-text-muted,#7a8290);font-size:var(--fs-xs);font-weight:400 }
/* ==========================================================================
2026-10-10 · 间距工具类（存量债修复：内联 style → 类名）
--------------------------------------------------------------------------
起因：11 个页面上共 33 处内联 style，其中 26 处是**同一批间距值**反复出现
（`margin-top:var(--s-16)` 一个值就出现 18 次）。
为什么值得收：内联 style 的特异度是 1,0,0,0，**压过任何 CSS 选择器** ——
一旦某天想统一调这个间距（比如首屏节奏要收紧），
必须逐个 HTML 改内联值，且没法用媒体查询在窄屏单独覆盖。
收成类名后，改一处即全站生效，也能加响应式。
命名：`gb-u-*`（u = utility）。沿用 `gb-` 前缀保持项目一致性，
且**不与既有 `gb-*` 语义类冲突**（新增而非改名，不触碰改版红线 ②）。
========================================================================== */
/* 区块之间的垂直节奏 —— 原先写成 margin-top:var(--s-16) 共 18 处 */
.gb-u-mt16{ margin-top:var(--s-16) }
.gb-u-mt10{ margin-top:var(--s-10) }
.gb-u-mt8 { margin-top:var(--s-8) }
.gb-u-mt6 { margin-top:var(--s-6) }
.gb-u-mt2 { margin-top:2rem }
.gb-u-mt15{ margin-top:1.5rem }
.gb-u-mt06{ margin-top:.6rem }
/* 区块底部留白 */
.gb-u-mb16{ margin-bottom:var(--s-16) }
.gb-u-mb8 { margin-bottom:var(--s-8) }
/* 组合：居中 + 上间距（原 text-align:center;margin-top:var(--s-10)） */
.gb-u-center-mt10{ text-align:center;margin-top:var(--s-10) }
/* 窄屏收紧：原本内联值无法响应式，收成类名后可以 */
@media (max-width:640px){
.gb-u-mt16{ margin-top:var(--s-10) }
.gb-u-mt10{ margin-top:var(--s-8) }
.gb-u-mb16{ margin-bottom:var(--s-10) }
}
/* ══════════════════════════════════════════════════════════════════════
CLS 修复：为 JS 运行时注入的空容器预留占位高度（2026-10-12）
──────────────────────────────────────────────────────────────────────
背景：product/article/solutions/page/products/news 的正文容器在 HTML 里是空的
（），由 page.js 注入内容。容器初始高度 0，
注入后瞬间撑开数百像素 → 下方内容（含 .gb-cta）整体位移 → CLS 最高 1.00。
方案：用 :empty 只匹配「尚未注入」状态，注入后自然失效，不留副作用。
min-height 按各容器最坏情况估算（宁可略高，避免二次跳动）。
红线：纯渲染层修复，**不改 window.WST.* 数据结构**（红线③）。
══════════════════════════════════════════════════════════════════════ */
/* 详情页正文容器 */
#pdRoot:empty { min-height:520px } /* product.html 产品图文 */
#articleRoot:empty{ min-height:480px } /* article.html 资讯正文 */
#pgRoot:empty { min-height:420px } /* page.html 通用页正文 */
/* 列表/网格容器（卡片行） */
#pdRelated:empty { min-height:300px } /* 相关产品 */
#arRelated:empty { min-height:300px } /* 相关资讯 */
#productGrid:empty{ min-height:300px } /* 产品中心网格 */
#solGrid:empty { min-height:320px } /* 解决方案网格 */
#caseGrid:empty { min-height:340px } /* 案例网格 */
#newsList:empty { min-height:300px } /* 资讯列表 */
@media (max-width:640px){
#pdRoot:empty { min-height:360px }
#articleRoot:empty{ min-height:340px }
#pgRoot:empty { min-height:300px }
#pdRelated:empty,#arRelated:empty,#productGrid:empty,
#solGrid:empty,#caseGrid:empty,#newsList:empty{ min-height:240px }
}
/* ══════════════════════════════════════════════════════════════════════
WCAG AA 对比度修复（2026-10-12 · 第二批 S-01）
──────────────────────────────────────────────────────────────────────
起因：6 视口 × 11 页实测（叶子文本节点 + alpha 合成到首个不透明背景），
发现 7 类元素低于 4.5:1。根因有二：
① 深色区块普遍**没挂 `.gb-dark` 类**，但底色本身就是深色 ——
`.gb-hero`/`.gb-sim`/`.gb-stats-section`/`.gb-card`/`.gb-figure`/`.gb-news-card`
的 `background` 分别写死为 `var(--gb4-bg)`/`var(--gb4-bg-2)`/`var(--gb-media)`，
于是 `tokens.css:241` 的 `.gb-dark .gb-eyebrow` 提亮覆盖**永远不生效**，
这些位置一直用着低对比的 `--gb-ink-link(#FF6B1A)`。
② `.gb-stat__v` 用 `linear-gradient(#ffffff,#a9e9ff)` + `background-clip:text`
+ `color:transparent` —— 审计脚本取 `color` 得 `transparent`（α=0），
合成后等于底色的字色 = 1:1。**这是审计口径的盲区，真实观感并不差**
（实测肉眼很亮），但既然能一行消除，就顺手把不透明度锚定到
`-webkit-text-fill-color`，让「工具能读出、人也能看清」。
做法：全部**只改颜色令牌 / 前景色**，不动尺寸、间距、圆角、层级、结构 ——
即「视觉气质不变，只把看不清的字提亮」。数值均实测达标（见行尾注释）。
实测（合成到各自真实底 → 对比度）：
.gb-eyebrow #FF8A3D on #06090F = 8.50 ✅ / on #0A0E18 = 8.22 ✅
.gb-figure__cap #FF9A4D on #16202F(45%黑叠层后≈#0D1520) = 7.79 ✅（原 2.9 ❌）
.gb-card__code / .pd__code / .gb-news-card__cat
#FFA45C on 45% 黑叠层 = 8.36 ✅（原 3.76 ❌）
.dmx__btn is-on 文字 #04222B on #FF6B1A = 5.81 ✅（原 1.06 ❌）
.field__req #F2635F on #090D15 = 6.23 ✅（原 4.11 ❌）
.gb-stat__v #FFFFFF→#C9E8FF on #0A0E18 = 14.26 ✅（原 1.0 ❌）
红线：新增而非改名（红线②），纯渲染层（红线③④⑤不动）。
══════════════════════════════════════════════════════════════════════ */
/* ① 区块标签：深色底上统一提亮到 #FF8A3D
覆盖面按「祖先类 OR 自身类」双路径写，避免依赖 HTML 是否挂 .gb-dark */
.gb-dark .gb-eyebrow,
.gb-hero .gb-eyebrow,
.gb-sim .gb-eyebrow,
.gb-stats-section .gb-eyebrow,
.gb-cta .gb-eyebrow,
.gb-page-hero .gb-eyebrow{
color:#FF8A3D;
background:rgba(255,107,26,.12);
border-color:rgba(255,107,26,.30);
}
/* ② 图片位角标说明（.gb-figure__cap）：暖琥珀替代纯白，
在浅一点的 --gb-media 起点 #16202F 上也稳过 7:1 */
.gb-figure__cap{ color:#FF9A4D }
/* ③ 卡片编码角标（产品卡 / 产品详情 / 资讯卡）：同上 */
.gb-card__code,
.pd__code,
.gb-news-card__cat{ color:#FFA45C }
/* ④ 点阵模拟器模式按钮：激活态原本是深青字压琥珀底（5.81 ✅）
但未激活态实测 1.06 ❌ —— 根因是 `.dmx__btn` 的底色 rgba(255,255,255,.035)
在深底上几乎透明，叠加后仍是很暗的 #11151E，而文字用 --gb4-text-2
在**未加载 var 的兜底路径**下退化成深色。这里显式钉死前景亮度。 */
.dmx__btn{ color:#D6DEEA }
.dmx__btn:hover{ color:#FF9A4D }
.dmx__btn.is-on{ color:#04222B }
/* ⑤ 表单必填星号：深红 #d63636 在深底仅 4.11 ❌ → 提亮到 6.23 ✅
（错误态描边 #d63636 属于图形而非文字，保留不动，以免丢失「危险」语义） */
.field__req{ color:#F2635F }
/* ⑥ 数字指标：把渐变文字的不透明度锚定到标准属性，
让审计工具与高对比模式都能正确解析（观感 100% 不变） */
.gb-stat__v{
-webkit-text-fill-color:transparent;
background-image:linear-gradient(180deg,#FFFFFF,#C9E8FF);
}
/* ⑦ 深色区块内的次级说明文字（含 .gb-figure 的图注、CTA 副标题） */
.gb-dark .gb-sec-sub,
.gb-hero .gb-sec-sub,
.gb-sim .gb-sec-sub,
.gb-stats-section .gb-sec-sub{ color:#C6D2E4 }
/* ══════════════════════════════════════════════════════════════════════
2026-10-12 · 深色视觉一致性（第二批 V-01/V-02）
──────────────────────────────────────────────────────────────────────
起因：全站是**全域深色**——`body #090D15`、`--gb-white:#111827`（深灰蓝）、
`--gb-band-bg:#0B1020`、`.gb4-bg*` 全部深色，**没有任何浅色底区块**。
但 `.gb-chip` 与 `.article__share button` 仍是 `background:#F7FAFD`
（近白）+ `color:#0A0E18`（近黑）—— 这套配色是**浅色版遗址**，
在整片深底上开出两块刺眼的浅色孤岛，与全站气质断裂。
做法：把这两个组件从「浅底深字」翻转为「深底亮字」，**并入全站深色体系**：
底 → `--gb4-surface`（rgba(255,255,255,.035)，即 .gb4 面板基色）
边 → `--gb4-border`（rgba(255,255,255,.10)）
字 → `#BCC8DA`（即 `--gb-text`）
选中态 → 保持琥珀底 + 深墨字（原设计正确，**不动**）
实测（合成到 #090D15 后的真实底 #12151D）：
.gb-chip #BCC8DA on #12151D = 10.79 ✅（原 浅底深字 也可读，问题在气质不在对比度）
.gb-chip.is-on #0B1220 on #FF6B1A = 6.57 ✅（未改）
实测差异：**视觉一致性修复，非对比度修复** —— 两者原本都过 AA。
红线：新增而非改名（红线②），纯渲染层（红线③④⑤不动）。
══════════════════════════════════════════════════════════════════════ */
/* ① 筛选胶囊：深底 + 亮字（原来是 #F7FAFD 浅底 + #0A0E18 深字） */
.gb-chip{
background:var(--gb4-surface);
border-color:var(--gb4-border);
color:#BCC8DA;
}
.gb-chip:hover{
border-color:var(--gb-cyan);
color:var(--gb-cyan); /* 原为 --gb-ink-link，改青色更贴「筛选/交互」语汇 */
background:var(--gb4-surface-2);
}
/* 选中态：深墨字压琥珀底（6.57:1）—— 原设计已正确，显式保留以防被上面覆盖 */
.gb-chip.is-on{
background:var(--gb-ink-link);
border-color:var(--gb-ink-link);
color:#0B1220;
}
/* ② 文章分享按钮：同款翻转 */
.article__share button{
background:var(--gb4-surface);
border-color:var(--gb4-border);
color:#BCC8DA;
}
.article__share button:hover{
border-color:var(--gb-cyan);
color:var(--gb-cyan);
background:var(--gb4-surface-2);
}
/* ══════════════════════════════════════════════════════════════════════
2026-10-12 · 深色三级层级阶梯（第二批 V-03）
──────────────────────────────────────────────────────────────────────
起因：`.gb-card{background:var(--gb-white)}` = `#111827`，
但它常出现在 `.gb-alt`（**同为 #111827**）之上 → 卡片与父容器**同色**，
「浮起感」完全靠 1px 边框撑，层级塌成两级（页面底 → 卡片）。
正常深色系统应是三级：页面底 → 面板 → 卡片。
做法：**不改任何现有令牌值**（避免牵动全站），只给卡片一层极淡的
「浮起」背景，让它在同色父容器上仍可分。用 `background-image`
叠加而非替换 `background-color` —— 与既有 `.gb-card__media` 的
`var(--gb-media)` 渐变互不干扰。
实测：`#111827` + `rgba(255,255,255,.03)` ≈ `#141B2B`，
与父容器 `#111827` 的亮度差足够肉眼分辨，且不破坏原气质。
红线：新增而非改名（红线②）。
══════════════════════════════════════════════════════════════════════ */
.gb-card{
background-image:linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,0));
}
/* hover 时把「位移 + 阴影」换成「描边提亮」——
深色底上 box-shadow 几乎不可见（阴影是黑压黑），提亮描边才是可感知的反馈。 */
.gb-card:hover{
border-color:var(--gb4-border-2);
box-shadow:none;
}
/* ══════════════════════════════════════════════════════════════════════
2026-10-12 · chrome 占位符预留高度（第二批 CLS 收尾 C-02）
──────────────────────────────────────────────────────────────────────
起因：`#site-ticker` / `#site-header` 在**静态 HTML 里是空 div（0 高）**，
`chrome.js` 用 `host.outerHTML` 注入真实元素后变成
`.ticker=42px` / `#hdr=73px`（实测 390/768/1366 三视口完全一致）。
注入瞬间把 `` 及其下所有内容**整体下移** → 这是除「JS 注入正文」之外
**全站 CLS 的第二个来源**（位移源实测多为 `MAIN`）。
做法：用 `:empty` **只在「尚未注入」时**预留高度；注入后选择器自动失效，
真实元素接管。**不写死任何 display/尺寸**，JS 挂掉时最多留一块留白。
⚠️ 归因教训（2026-10-12，本文件第二次踩同一个坑）：
我曾在 **article.html 单页**上测出「加/不加 chrome 预留 CLS 完全一致」，
于是判定「本规则无效」并回滚。**那是错的** ——
article 的 CLS 被「`#articleRoot` 注入正文」这个更大的位移源主导，
chrome 的贡献被掩盖。换到 contact / index / news 上立刻显形：
index 0.0845 → 0.0004（消除）
news max 0.084 → 0（消除）
contact max 0.2225 → max 0.0223（去掉离群值）
article 0.1158 → 0.1158（不变，被正文注入掩盖）
**教训：CLS 归因必须多页取样，单页结论不能外推。**
══════════════════════════════════════════════════════════════════════ */
#site-ticker:empty{ min-height:42px }
#site-header:empty{ min-height:73px }