/* ⚠️ 本文件 = 【PC 端】首页专属，改这里不影响另一端
   另一端在：src/components/home/HomeMobilePage.tsx + src/app/home-mobile.css
   共用层见 docs/PLATFORM-MAP.md（改共用层必须两端各自验证：PC 1440×900 + 手机 390×844）
   禁：在此文件里引用另一端的类名/组件 · 闸门：node scripts/check-home-isolation.mjs */

/* ============================================================================
   九宫首页 · 1:1 落地样式（「完全保真」版）
   源：桌面代码包 jiugong-homepage-1to1/styles.css（设计稿画布 842 × 1536）
       index.html / styles.css 是唯一标准 —— 图形一律逐字照搬。

   落地方式 —— 「画布等比缩放」：
     --u = 当前视口下「1 个设计像素」的实际尺寸
             ≥843px：--u = min(100vw / 842, 1440px / 842)
                     → 设计稿按比例放大；超过 1440 后**舞台定宽 1440**、两侧留白交给
                       margin:0 auto（V2 2026-09-20：旧上限 2.2px = 舞台 1852.4px 会让
                       2560/3840 上中间"收缩"，且 1024–1440 逐像素与旧值完全一致）
             ≤842px：--u = 100vw / 430               → 移动端画布基准
     所有尺寸一律写作 calc(N * var(--u))，N 就是代码包里的原值。

   【用户裁定 2026-09-16 · 完全保真（方案 A）】
     · 字号回归设计稿比例：代码包里 5–9px 的辅助文字原样保留（首页豁免全站
       ≥12px 字号下限；该下限对站内其它页面继续生效）
     · 图形必须与代码包逐字一致：渐变色标百分比（如 transparent 30% / 30.5% 34%
       / 34.5%）、blur 与 drop-shadow 半径、星空 background-size/position、
       SVG viewBox 与滤镜、全部坐标值，一律照抄。
       —— 禁止「看起来差不多」的简化写法（简化 = 山形/光晕/星点全部走样）。

   与代码包仅存的差异（其余一律逐字照搬，逐条在此列明）：
     1. 导航 / 页脚复用站内 <Nav> / <Footer>（代码包 .nav / .footer 不落地）；
        首屏以 --jh-navh（JS 量取导航真实高度）避让固定导航。
     2. 链接指向站内真实 ASCII 路由；馆藏数字取自 src/data/site-stats.ts。
     3. 移动端断点按代码包 @media(max-width:842px) 落地；首屏因站内固定导航
        （移动端含常驻工具条）改为常规流 + auto 高度，避免内容被裁切；
        移动端罗盘不透明度 .75 → .35（站内移动端文案整幅宽，.75 会压住第四问）。
     4. 显式声明 line-height:normal —— 代码包没设行距（= 浏览器初始 normal），
        而站内 Tailwind preflight 把 html 设成 1.5 并被继承；不显式回到 normal，
        所有未指定行距的文案会比设计稿高约 25%（对账脚本 .home-pkg-vs-built.mjs）。
     5. 【2026-09-19 · V2 起始包第一阶段】**新增**两个层级：一句话定位（.jh-position）与
        人生问题入口（.jh-lifeq），插在 Hero 与「三大核心产品」之间（纯加法，既有七区块
        顺序/版式/切片/配色一字未动；详见本文件底部该段落的说明块）。
     6. 【2026-09-19 · V2 起始包第二阶段】① `.jh-ai`（九宫AI顾问）在**版面顺序**上上移到
        「人生问题入口」之后、「三大核心产品」之前（只换顺序：顺序在 src/app/HomeClient.tsx
        的 JSX 里，本文件关于 .jh-ai 的规则一字未改）；② Hero 四问（那条横向卡片条，6 条规则）
        随 DOM 删除一并删掉，Hero 自身几何一行未改（高度由 aspect-ratio 决定，见
        .jh-hero-sub 下方那段删除记录）。两端隔离闸门 8/8 仍通过。
   ============================================================================ */

.jh-home {
  --u: 1px;

  /* ── 品牌色 Token（与 globals.css 同值）——仅用于「非图形」的底色/正文色 ── */
  --h-ink: #080B0C;
  --h-ink-2: #111619;
  --h-paper: #F5F2EA;
  --h-gold: #B08A3C;
  --h-text: #252321;

  --h-serif: 'Cormorant Garamond', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', Georgia, serif;
  --h-sans: 'Noto Sans SC', system-ui, sans-serif;

  position: relative;
  width: 100%;
  max-width: calc(842 * var(--u));
  margin: 0 auto;
  /* 首屏压到站内固定导航之下：设计稿的导航是「浮在首屏上」的，站内复用现有
     <Nav>（fixed）。这里抵消 layout 给 <main> 的 pt-16（=64px，与导航高度一致）。 */
  margin-top: -64px;
  background: var(--h-paper);
  color: var(--h-text);
  font-family: var(--h-sans);
  /* 代码包 styles.css 只设了 font-family，没设 line-height → 取初始值 normal。
     站内 Tailwind preflight 把 html 设成 line-height:1.5 并被全站继承，首页若照继承
     会比设计稿高出约 25%（实测同样一张引擎卡正文 58px vs 代码包 52px），
     所以这里显式回到 normal —— 与代码包同宽渲染逐元素对账（.home-pkg-vs-built.mjs）。 */
  line-height: normal;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 843px) {
  /* 【V2 2026-09-20】上限 2.2px → 1440px/842（写成表达式，避免 1.7102 这类四舍五入误差）。
     · 视口 ≤1440：100vw/842 ≤ 1440/842 → min() 取前项 → 843–1440 逐像素零变化（截图不变式已证）
     · 视口 ≥1440：舞台恒 1440.00px（实测），两侧留白由 .jh-home 的 margin:0 auto 承担 */
  .jh-home { --u: min(calc(100vw / 842), calc(1440px / 842)); }
}

/* 【V2 2026-09-20 · 头/尾内层对齐 1440 —— 只对首页生效】
   目标：1440 及以上，Header / 正文 / Footer 的**内容块左右边完全相同**（一条轴线）。
   难点：Nav / Footer 是 .jh-home 的兄弟（LayoutClient：<Nav/> <main> <Footer/>），
        拿不到定义在 .jh-home 上的 --u → 用 html:has(.jh-home) 把选择器提到根上，
        再用与 --u 同一算式的两个常数（min(5.2256532vw, 75.249406px) = 44u）对齐内容线。
   范围：
     · html:has(.jh-home) → 离开首页即失效（本文件本身也只被首页 HomeClient.tsx 引入）
     · 整段包在 @media (min-width:843px) → 手机端（max-width:842px 各行）一行未动
     · nav.fixed（Nav.tsx:127 的外层导航）限定 —— 不误伤 Nav.tsx:267 那条 <nav> 常驻
       工具条的 `nav > div`（它在 <1024px 是可见的），也不误伤其它页面里的面包屑 <nav>
   数值推导：44/842×100 = 5.225653206650831% ；44×1440/842 = 75.24940617577197px
            禁止写成百分比内边距（百分比内边距按含块宽解析，3840 上会变成 200.6px） */
@media (min-width: 843px) {
  html:has(.jh-home) nav.fixed > div,
  html:has(.jh-home) footer.jg-footer > div {
    width: min(100%, 1440px);
    max-width: 1440px;
    padding-left: min(5.2256532vw, 75.249406px);
    padding-right: min(5.2256532vw, 75.249406px);
  }
}

.jh-home *,
.jh-home *::before,
.jh-home *::after { box-sizing: border-box; }

.jh-home a { text-decoration: none; color: inherit; }
.jh-home h1, .jh-home h2, .jh-home h3, .jh-home p, .jh-home ul { margin: 0; }
.jh-home ul { padding: 0; list-style: none; }

/* ══════════════════════════ HERO 首屏（代码包 .hero / 380px 高） ══════════════════════════ */
.jh-hero {
  position: relative;
  /* 【顶部图落地 2026-09-16 · 第二轮修正】
     容器宽高比锁死为顶图裁切图的原比例 1545 : 697（≈ 设计稿 842 : 380，两者相差 0.04%）。
     这样位图与动态轮处于同一坐标系：位图 100%/100% 恰好铺满容器（零裁切零拉伸），
     动态轮按「容器百分比」定位 → 任意视口（PC / 平板 / 手机）都精确同心等径。
     旧写法（height: calc(380*var(--u)) + background-size:cover + background-position）
     在 >1852px 视口会错开：--u 被 2.2px 封顶而容器仍随 vw 变宽，
     轮心按 u 算 (600u = 1320px)、图心按百分比算 (71.26% = 1368px) → 差 48px。 */
  aspect-ratio: 1545 / 697;
  overflow: hidden;
  color: #f3eadb;
  background-color: #060a0c;
  }
  /* 【2026-09-19 · A 方案：深色带满屏延伸（第二版 · 实测修正）】
     2026-09-20 V2 同步重算：舞台上限 1852.4 → 1440，本段的两个数字必须同时改
     （本段是本文件里唯一「硬编码舞台宽」的地方，是 --u 上限的隐式依赖）。 */
  /* 第一版用 .jh-hero 自身的 box-shadow 向左右平移铺色 —— **实测无效**：
     祖先 .jh-home 是 overflow:hidden（宽 1440，实测 overflow=hidden/hidden），
     阴影被裁在 1440 之内，两侧留白照旧。
     正解：把深色带画在**满宽且不裁剪的 main** 上。main 宽 = 视口，Hero 与其后
     所有 section 都在它内部；画一段与 Hero 等高的深色，其后透明 —— Hero 自己盖住
     中段，两侧留白由这层背景补齐；Hero 之下的纸境区块各有自己的背景，不受影响。
     只在 ≥1441px 生效（1440 及以下舞台 == 视口，无留白，不需要这条带）。
     带高 = 1440 × 697/1545 = 649.631px = 新 Hero 高（旧值 842×2.2×697/1545 = 835.678px
     是 1852.4 舞台下的 Hero 高；不同步改的话大屏上深色带会比 Hero 高 186px、糊到纸白区块），
     与 .jh-hero 的 aspect-ratio 同源，不会错位。 */
  @media (min-width: 1441px) {
  main:has(.jh-home) {
    background-image: linear-gradient(
      #060a0c 0,
      #060a0c calc(1440px * 136.751 / 842),
      transparent calc(1440px * 136.751 / 842)
    );
    background-repeat: no-repeat;
    background-color: transparent;
  }
  }
/* 顶图（= 用户原图「九宫图.png」按 842:380 版面几何裁切的 1545×697，**像素零改动**：
   上一轮那版「镜像填补抹掉图里罗盘」的残图已撤销）+ 动态轮的共同容器。
   桌面 = 绝对定位铺满首屏；移动端 = 常规流里的「整宽等比带」（见文件末移动端段）。 */
.jh-hero-art {
  position: absolute; inset: 0;
  background-image: url('/home/hero-bg.webp');
  background-size: 100% 100%;      /* 容器比例 == 图比例 → 恰好铺满，不裁切、不拉伸 */
  background-repeat: no-repeat;
  overflow: hidden;                /* 与设计稿一致：动态轮溢出容器下沿的 35u 被裁掉 */
}
/* ── 【FIX-PC-R8 · ①】PC 端 Hero 区高度压到原来的 3/5（业主：顶部图整体太高、很突兀）──
   数字（@1440 设计尺；≥1440 时整页 transform: scale(--sc) → 四档自动等比）：
     原 Hero 高 = 舞台宽 1440 × 697/1545 = 649.6339px = 379.863u（u = 1440/842 = 1.710213）
     新 Hero 高 = 649.6339 × 0.6 = 389.7803px = 227.918u（= 去掉 259.8536px = 五分之二）
   ✗ 位图不拉伸：.jh-hero-art 仍保持 1545:697 原始比例（高 379.863u），只把 .jh-hero 变成
     「高 227.918u 的窗口」，art 上移到 53.47u（= 91.45px）→ 由 .jh-hero 裁切。
     ⇒ 位图与动态罗盘（art 的子元素，按 art 百分比定位）**配准关系一字未改**：
       罗盘圆心仍在 art 内 (754.90, 318.83)，落进窗口后 = 页 y 227.38（窗口高 389.78 的正中）。
   ✗ 不动宽度、✗ 不动罗盘层盒/圆心/转速、✗ 不动移动端（本块只在 min-width:843px 内）。 */
@media (min-width: 843px) {
  .jh-hero {
    aspect-ratio: auto;
    height: calc(136.751 * var(--u));
  }
  /* 文案列 top：新窗口只有 389.78px，文案块高 256.52（删掉关键词行后）→
     收到 max(35u, 导航下缘+6) = 71.00px，块底 327.52 < 389.78（留 62.26px 下余量）。
     ✗ 不动字号/行距/文案本身，只改容器 top。 */
  .jh-hero-copy { top: max(calc(35 * var(--u)), calc(var(--jh-navh, 64px) + 6px)); }
  /* ⚠ top 必须为**负**：窗口取位图下半段的「罗盘带」，位图整体上移 91.4525px@1440。
     实测（第 1 次构建，top 误写成正值）：罗盘圆心落页 y = 410.25（= 91.44 + 318.81），
     可见墨迹 252.6…567.9 全在窗口(0…389.78)下沿之外；改成负值后圆心 227.38。 */
  .jh-hero-art {
    top: calc(-53.47 * var(--u));
    bottom: auto;
    height: calc(379.863 * var(--u));
  }
}

/* 天空：金色天光（63% 49%）+ 墨色渐变 —— 逐字照搬 */
.jh-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 63% 49%, #c6a06059 0, #806b4730 18%, transparent 43%),
    linear-gradient(#05090b, #0b1013);
}
/* 星空：两层点阵 + 各自的 background-size / position（密度与错位由此决定） */
.jh-stars {
  position: absolute; inset: 0; opacity: .65;
  background-image:
    radial-gradient(circle, #e4ca93 0 1px, transparent 1.4px),
    radial-gradient(circle, #e4ca93 0 .7px, transparent 1px);
  background-size: calc(97 * var(--u)) calc(83 * var(--u)), calc(131 * var(--u)) calc(111 * var(--u));
  background-position: calc(12 * var(--u)) calc(16 * var(--u)), calc(40 * var(--u)) calc(29 * var(--u));
}
/* 右侧金色光晕：radial-gradient + blur(4px)（生硬感的元凶之一：漏掉 blur 就成硬边圆） */
.jh-glow {
  position: absolute;
  width: calc(380 * var(--u)); height: calc(230 * var(--u));
  left: calc(430 * var(--u)); top: calc(105 * var(--u));
  background: radial-gradient(circle, #f2d99b32, transparent 68%);
  filter: blur(4px);
}
/* 山峦三层：代码包用「精确百分比色标」的 linear-gradient 切出山形（非位图）→ 首屏零大图 */
.jh-mt { position: absolute; left: 0; right: 0; bottom: calc(47 * var(--u)); height: calc(170 * var(--u)); }
.jh-mt::before, .jh-mt::after {
  content: ""; position: absolute; inset: auto 0 0; height: 100%; background-repeat: no-repeat;
}
.jh-mt.back::before {
  background:
    linear-gradient(135deg, transparent 30%, #283035 30.5% 34%, transparent 34.5%),
    linear-gradient(25deg, transparent 31%, #20272b 31.5% 40%, transparent 40.5%),
    linear-gradient(160deg, transparent 36%, #30383a 36.5% 44%, transparent 44.5%);
  opacity: .65;
}
.jh-mt.mid::before {
  background:
    linear-gradient(150deg, transparent 35%, #171e21 35.4% 49%, transparent 49.5%),
    linear-gradient(25deg, transparent 43%, #1a2023 43.4% 56%, transparent 56.5%);
  opacity: .9;
}
.jh-mt.front::before {
  background:
    linear-gradient(155deg, transparent 43%, #080d10 43.4% 59%, transparent 59.5%),
    linear-gradient(23deg, transparent 48%, #080c0e 48.4% 66%, transparent 66.5%);
  filter: drop-shadow(0 -1px 5px #9a783f33);
}
/* 水面：墨色渐变 + 顶部金线 + 中央 1px 反光（左起 54%） */
.jh-water {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(76 * var(--u));
  background: linear-gradient(#101619, #070b0d 65%);
  border-top: 1px solid #b28a4b33;
}
.jh-water::after {
  content: ""; position: absolute; left: 54%; top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(#dfbd7a99, transparent);
}
/* 【顶部图落地 2026-09-16 · 换图不换格局】
   代码包用 CSS 渐变「画」出来的天空/星空/三层山峦/水面，现在由位图顶图承担
   （九宫图.png 本身就是同一场景：暗夜空 + 山峦 + 云雾 + 水面倒影）。
   上面 .jh-sky / .jh-stars / .jh-mt / .jh-water 五层的坐标、层级、渐变全部原样保留，
   只让它们不再绘制 —— 否则 CSS 的深色多边形山形会硬压在照片上（脏边）。
   如需回退：删掉这一条规则即可恢复「纯 CSS 首屏」。 */
.jh-sky, .jh-stars, .jh-mt, .jh-water { display: none; }

/* 左栏文案（代码包 .hero-copy：left 44 / top 92 / width 360）
   差异 1：top 取 max(92u, 导航高度 + 10px) —— 站内导航是 fixed，移动端更高。 */
.jh-hero-copy {
  position: absolute; z-index: 8;
  left: calc(44 * var(--u));
  top: max(calc(92 * var(--u)), calc(var(--jh-navh, 64px) + 10px));
  width: calc(360 * var(--u));
}
.jh-eyebrow {
  font-size: calc(9 * var(--u));
  letter-spacing: calc(2.8 * var(--u));
  color: #d1b57d;
  margin-bottom: calc(11 * var(--u));
}
.jh-hero h1 {
  font-family: var(--h-serif);
  font-size: calc(36 * var(--u));
  line-height: 1.23;
  letter-spacing: calc(1 * var(--u));
  font-weight: 600;
  color: #f5efe3;
}
/* 注意：选择器必须写成 .jh-hero .jh-hero-sub（0,2,0）——
   上面 `.jh-home p{margin:0}` 是 (0,1,1)，比单个类 (0,1,0) 更具体，
   只写 .jh-hero-sub 会让这里的 13px/18px 外边距被清零（真踩过，实测少 31px）。 */
.jh-hero .jh-hero-sub {
  font-family: var(--h-serif);
  font-size: calc(9 * var(--u));
  letter-spacing: calc(5 * var(--u));
  color: #b8aa91;
  margin: calc(13 * var(--u)) 0 calc(18 * var(--u));
}
/* 【2026-09-19 · V2 起始包第二阶段 P2】Hero 四问（事业/财富/感情/人生 —— 原来紧挨在副标题
   下方的那条横向卡片条，内含 4 个 `/ai?q=<问题原文>` 深链）已**从 DOM 中彻底删除**，本文件里
   配套的 6 条样式规则（卡片条容器 / 链接 / 链接悬停 / 卡片标题 / 问句 / 问句悬停）同批删除，
   不留死代码、不留任何替代选择器。类名与规则的完整原样见 git 历史（回退直接 revert 本 commit）。
   —— 没有替代选择器：既不改写成 sr-only/visually-hidden 隐藏，也没有把卡片挪到别处。
   —— Hero 内部**无需**补任何高度：.jh-hero 的高度由上面的 `aspect-ratio: 1545 / 697`
      × 自身宽度决定（内部各层全是绝对定位，内容不参与高度计算）→ 删卡前后同为
      646.921875px（1440×900 有头 Chrome，业主口径 647px，误差 0）；art / h1 / 副标题 /
      CTA 的 getComputedStyle 746 个字段逐字段不变（复现：node scripts/v2p2-hero-invariant.mjs）。
      删卡让出的纵向空白自然落在 CTA 下方，成为「把少掉的高度补回 Hero 自身的空白」。
   如需回退：从 git 历史取回这一段（commit 里的 diff 即为完整原样）。 */

/* 金色主按钮（逐字：linear-gradient(135deg,#f1d28d,#c9a65b) + 700 8px serif） */
.jh-gold-btn {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u));
  background: linear-gradient(135deg, #f1d28d, #c9a65b);
  color: #292217;
  border-radius: calc(20 * var(--u));
  padding: calc(9 * var(--u)) calc(17 * var(--u));
  font-family: var(--h-serif);
  font-size: calc(8 * var(--u));
  font-weight: 700;
  box-shadow: 0 5px 20px #0006;
  transition: filter .2s ease, transform .2s ease;
}
.jh-gold-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.jh-gold-btn i { font-style: normal; }

/* 右侧竖排小字（代码包 .hero-side-copy：right 31 / top 88 / 10px/1.85 / 字距 4px）
   代码包用 `<br>` 逐字竖排（非 writing-mode）；参考设计稿此处为「两列竖排」。 */
.jh-side-copy {
  position: absolute; z-index: 7; right: calc(31 * var(--u)); top: calc(88 * var(--u));
  color: #c9ad73;
  font-family: var(--h-serif);
  font-size: calc(10 * var(--u));
  line-height: 1.85;
  letter-spacing: calc(4 * var(--u));
  text-align: center;
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
}
.jh-side-copy .jh-side-col--inner { margin-top: calc(10 * var(--u)); }

/* 九宫太极罗盘（代码包 .wheel-wrap：left 405 / top 25 / 390×390）
   【2026-09-16 第二轮】定位基准从「--u 设计像素」改为「顶图容器百分比」——
   与图里那个罗盘严格同心、同径覆盖：
     中心 = 设计稿轮心 (600/842, 220/380) = (71.259%, 57.895%)，也正是裁切顶图时
            钉住的「图内罗盘中心」（整图 1920×1080 上 (1297, 507)，裁切后落在该点）；
     直径 = 390/842 × 1.05 = 48.634%（1.05 倍微放大：动态轮最外环半径 353.5px
            vs 图内罗盘最外密集环 ≈340px → 确保「盖严」，视觉上只剩一个会转的轮）
     left = 71.259% − 48.634%/2 = 46.942%
     top  = 57.895% × H − 24.317% × W，换算成 H 的百分比 = 3.993%
   （容器 1545:697 ≈ 842:380 → 百分比与设计稿的 u 坐标等价：
     405/842 = 48.100%、25/380 = 6.579%，与上面微放大后的值一一对应。） */
.jh-wheel-wrap {
  position: absolute;
  width: 48.634%;
  aspect-ratio: 1;
  left: 46.942%;
  top: 3.993%;
  z-index: 6;
}

/* ════════════════════════════════════════════════════════════════════════════
   九宫太极轮 · 多层独立旋转（桌面代码包 jiugong-taiji-wheel-rotation/wheel.css
   逐条移植；结构见 src/components/home/TaijiWheel.tsx）

   原包参数（一字未改）：
     外层星轨 .orbit  ↻  70s/圈      八卦环 .bagua ↺ 42s/圈（反向）
     刻度层   .scale  ↻  58s/圈      中央太极 .taiji ↻ 22s/圈
     中央光晕 .center 呼吸 breath 3.8s · 外圈光晕 .glow 呼吸 breath 5s
     顶部金珠 .orb    闪烁 orb 2.4s
     linear/ease-in-out 缓动、关键帧内容、颜色与描边宽度全部照抄。

   三处「落地适配」（其余一律逐字，逐条列明）：
     ① 作用域：原包的 .layer/.glow/.center/.orb/.controls 是通用类名，站内
        （Tailwind + 各页 CSS）可能撞车 → 全部规则挂在站内既有、仅在首页出现的
        .jh-wheel-wrap 下（等价于前缀隔离）；DOM 里类名保持原样。
     ② 关键帧改名 cw/ccw/breath/orb → jg-cw/jg-ccw/jg-breath/jg-orb（帧内容与
        时长/方向/缓动一字未改，只为避免将来与站内同名关键帧互相覆盖）。
     ③ 原包以 620px 固定舞台写死的两处像素尺寸换算成舞台百分比，SVG 与舞台随
        --u 等比缩放才不走样：.orb 9px→1.4516%（blur 半径是视觉参数，按原值
        8px/18px 保留）。

   【2026-09-17 校正】用户裁定「必须和设计稿里的罗盘一模一样」。做法：把设计稿
   （1920×1080）里那个罗盘裁到「与动态轮同宽的盒子」（盒子 = 409.5 设计单位
   ×1.8349 px/单位 = 751.4 px），做极坐标展开 + 天顶干净扇区亮度剖面，实测出每个
  环/字带的半径与颜色，再换算进 viewBox 600（半宽 300）；几何写在 TaijiWheel.tsx。
   【两套几何，按 variant 分流】PC 首页传 variant="design" → 渲染 .wheel-stage.design，
   用下方 `.jh-wheel-wrap .wheel-stage.design …` 那一组**校正后**的颜色/线宽；
   手机端（<HomeMobilePage/> 直接复用本组件、不传 prop → 默认 classic）用**本段上面这组
   原样未改**的规则 —— 所以手机端渲染逐属性等于改前，一个像素不动。
   校正后的颜色/线宽（只作用于 .design，**动画参数一律未动**）：
     · 描边色由偏橙的金（#c6a060/#d3ae69/#d9b772）改为设计稿实测的暖米金
       （#cbb37f 系，环线亮度峰值实测 #fffdEC 附近、均值 #6c5c4b → 取中间调）
     · 环线宽 1.1/1.2 → 1.5（设计稿环线实测 ≈2 设计 px ≈1.6 viewBox 单位）
     · 八卦爻线宽 7 → 4（设计稿爻画实测 ≈4 设计 px ≈3.2 单位），爻距 18 → 7.5
     · 字色由 #dfbd79 改为设计稿字色实测的米白 #eddfc0；卦名 25px → 22px、
       天干 15px → 17.5px（设计稿实测字号换算）
     · 中央太极：半径 86/76 → 48/42.3（设计稿太极外缘实测 53 px ≈ 42.3 单位，
       原来大了 1.8 倍，这是「顶部太极和设计稿不一样」的主因）；配色改为设计稿
       实测的米黄 #e6d6b0 + 暖墨 #221d17（原来偏黄、偏冷），并沿竖轴镜像使其与
       设计稿朝向一致
    · .center 中央光晕 25% → 40%（随太极等比收小/跟随新太极尺度）
   ════════════════════════════════════════════════════════════════════════════ */
.jh-wheel-wrap .wheel-stage {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center;
}
.jh-wheel-wrap .layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 50% 50%; fill: none;
}
/* ↓↓↓ 以下到 .glow 为止 = **原包原值**（手机端 variant="classic" 用这一组，未改一字） ↓↓↓ */
.jh-wheel-wrap .orbit { stroke: #c6a06088; stroke-width: 1.1; animation: jg-cw 70s linear infinite; }
.jh-wheel-wrap .orbit .dash { stroke-dasharray: 2 13; }
.jh-wheel-wrap .bagua { stroke: #d3ae69c0; stroke-width: 1.2; animation: jg-ccw 42s linear infinite; }
/* 原包的 .chars/.inner 取 body 的 serif（探针实测 font-family:serif）；
   站内 .jh-home 是 Noto Sans SC → 这里显式给回衬线，字形与代码包一致。 */
.jh-wheel-wrap .chars,
.jh-wheel-wrap .inner {
  fill: #dfbd79; stroke: none; font-size: 25px; text-anchor: middle;
  font-family: var(--h-serif);
}
.jh-wheel-wrap .trigrams path { stroke: #d9b772; stroke-width: 7; stroke-linecap: round; }
.jh-wheel-wrap .scale { stroke: #d9b67499; stroke-width: 1; animation: jg-cw 58s linear infinite; }
.jh-wheel-wrap .ticks path { stroke: #d9b772; }
.jh-wheel-wrap .inner { font-size: 15px; }
.jh-wheel-wrap .taiji { animation: jg-cw 22s linear infinite; }
.jh-wheel-wrap .center {
  position: absolute; width: 25%; height: 25%; border-radius: 50%;
  background: radial-gradient(circle, #ffdc9638, #c6a06014 45%, transparent 72%);
  filter: blur(8px);
  animation: jg-breath 3.8s ease-in-out infinite;
}
/* ══ PC 首页（.wheel-stage.design）专用覆盖：按用户设计稿实测校正后的颜色/线宽 ══
   特异性 (0,4,0) > 上面那组 (0,2,0)，与文件顺序无关；动画声明**不覆盖**
   （仍用上面那组完全相同的 animation，参数一字未改）。 */
.jh-wheel-wrap .wheel-stage.design .orbit { stroke: #cbb37f80; stroke-width: 1.5; }
.jh-wheel-wrap .wheel-stage.design .bagua { stroke: #d7c295bb; stroke-width: 1.5; }
.jh-wheel-wrap .wheel-stage.design .chars,
.jh-wheel-wrap .wheel-stage.design .inner {
  fill: #eddfc0; font-size: 22px;
}
.jh-wheel-wrap .wheel-stage.design .trigrams path { stroke: #e6d5ae; stroke-width: 4; }
.jh-wheel-wrap .wheel-stage.design .scale { stroke: #cbb37f99; stroke-width: 1.4; }
.jh-wheel-wrap .wheel-stage.design .ticks path { stroke: #d7c29599; stroke-width: 1.2; }
.jh-wheel-wrap .wheel-stage.design .inner { font-size: 17.5px; }
.jh-wheel-wrap .wheel-stage.design .center { width: 40%; height: 40%; }
.jh-wheel-wrap .glow {
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, #e0b96826, transparent 58%);
  filter: blur(18px);
  animation: jg-breath 5s ease-in-out infinite;
}
.jh-wheel-wrap .orb {
  position: absolute; top: 1.5%; left: 50%;
  width: 1.4516%; height: 1.4516%; border-radius: 50%;
  transform: translateX(-50%);
  background: #ffe3a6;
  box-shadow: 0 0 10px #ffe2a4, 0 0 28px #e5bd73;
  animation: jg-orb 2.4s ease-in-out infinite;
}
/* 暂停：原包在 .wheel-stage 上 toggle .paused */
.jh-wheel-wrap .paused .layer,
.jh-wheel-wrap .paused .glow,
.jh-wheel-wrap .paused .center,
.jh-wheel-wrap .paused .orb { animation-play-state: paused; }

/* ── 播放控制（原包 .controls：fixed 悬浮胶囊；原包靠 body 的 grid 居中，
      这里用 left:50%+translateX(-50%) 把「同样的居中」写成确定值） ── */
.jh-wheel-wrap .controls {
  position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #080b0cd9; border: 1px solid #c6a06055; border-radius: 30px;
  padding: 10px 15px; display: flex; gap: 15px; align-items: center;
  font: 13px sans-serif; color: #d7bd80; white-space: nowrap;
  /* 【小瑕疵修复 2026-09-16】原包把控制胶囊 fixed 在视口底部居中 → 滚动后正压在
     「奇门遁甲」卡片标题上。改为「仅悬停 / 键盘聚焦时出现」（位置/尺寸/参数不变，
     只加显隐），悬停太极轮或 Tab 到胶囊内按钮即出现。 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  transform: translateX(-50%) translateY(6px);
}
.jh-wheel-wrap:hover .controls,
.jh-wheel-wrap:focus-within .controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}
.jh-wheel-wrap .controls button {
  background: #171717; border: 1px solid #806737; color: #dfc283;
  border-radius: 20px; padding: 5px 12px; cursor: pointer; font: inherit;
}
.jh-wheel-wrap .controls button:hover { border-color: #c6a060; color: #f0d79c; }
.jh-wheel-wrap .controls input { accent-color: #c6a060; }
.jh-wheel-wrap .controls input[type="range"] { width: 120px; vertical-align: middle; }

@keyframes jg-cw { to { transform: rotate(360deg); } }
@keyframes jg-ccw { to { transform: rotate(-360deg); } }
@keyframes jg-breath {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes jg-orb {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; box-shadow: 0 0 14px #ffe2a4, 0 0 35px #e5bd73; }
}
/* 【2026-09-19 · B 方案：太极强制转 —— 业主裁定「必须自己照转」】
   原实现（原包同款）在系统「减少动态效果」下把仪盘四层全部停转；本机因此看不到转动
   （实测：Windows 的 MinAnimate / SPI_GETCLIENTAREAANIMATION 被优化工具置 0 →
     Chrome 报 prefers-reduced-motion:reduce → 站点礼貌停转）。
   业主裁定：PC 首页仪盘**不受该设置影响，永远照转**。故此处取消降级。
   影响面仅限 PC 首页仪盘（70s/圈慢转 + 呼吸光，动幅极小）。
   其余三处降级**继续尊重系统设置**：home-mobile.css 手机首页动效、jiugong-theme.css 主题过渡、
   CoinToss.tsx 抛铜钱动画。

   原规则（已按业主裁定移除，留档备查）：
   @media (prefers-reduced-motion: reduce) {
     .jh-wheel-wrap .layer,
     .jh-wheel-wrap .glow,
     .jh-wheel-wrap .center,
     .jh-wheel-wrap .orb { animation: none !important; }
   }
*/

/* ══════════════════════════ 纸白区块（代码包 .section / .paper） ══════════════════════════ */
.jh-section {
  position: relative;
  padding: calc(23 * var(--u)) calc(44 * var(--u));
  background: var(--h-paper);
}
.jh-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: calc(14 * var(--u));
}
/* 代码包 `font:17px var(--serif)` 是简写 → 字重归 normal，勿加粗 */
.jh-head h2 {
  display: inline;
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: calc(17 * var(--u));
  color: #28241e;
}
.jh-head .jh-head-sub { font-size: calc(7 * var(--u)); color: #999082; margin-left: calc(12 * var(--u)); }
.jh-head > a { font-family: var(--h-serif); font-size: calc(7 * var(--u)); color: #806b43; white-space: nowrap; }
.jh-head > a:hover { color: var(--h-gold); }
.jh-head.compact { margin-bottom: calc(11 * var(--u)); }

/* ── 三大核心产品（代码包 .engine-grid：3 列 / 卡高 128） ──
   【2026-09-16 第二轮】三个卡位改用用户提供的三张水墨山水原图（桌面「三幅图」）：
   产物 public/home/eng-card-{1,2,3}.webp 只做「等比缩放 + WebP q92 编码」，
   零滤镜 / 零调色 / 零暗纱 / 零重绘 / 零裁切。
   图按 contain 居中挂在卡面（图 3:2，卡 ≈1.9:1 → 上下满高、左右留边）；
   留边填「图里取色的纸底纯色」（每个卡位各自的 --eng-paper = 该图纸色），
   而不是给图加底色 → 不对用户的画做任何叠加着色。 */
.jh-engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }
.jh-engine {
  height: calc(128 * var(--u));
  border: 1px solid #ded7c9;
  border-radius: calc(6 * var(--u));
  padding: calc(13 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u));
  position: relative;
  background-color: var(--eng-paper, #efe9dc);
  background-image: var(--eng-art, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 3px 10px #6f62431a;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* 卡位 → 用户三张图（顺序 = 用户给的文件顺序）
   1 四柱八字   ← 52460ec4-0113-46d2-9485-4ad6d5f69dcd.png
   2 紫微斗数   ← 三大核心卡2.png
   3 奇门遁甲   ← 三大核心卡3.png */
.jh-engine-1 { --eng-art: url('/home/eng-card-1.webp'); --eng-paper: #f1eae0; }
.jh-engine-2 { --eng-art: url('/home/eng-card-2.webp'); --eng-paper: #f5f0e6; }
.jh-engine-3 { --eng-art: url('/home/eng-card-3.webp'); --eng-paper: #f4ede1; }
/* 代码包 .engine-card:after 的右下椭圆高光原本是给「纯渐变卡面」加层次；
   卡面换成用户的画作后，它会在画的右下角叠一层 31% 米色 = 对用户的图叠加着色，
   故在三张卡位上关闭（卡的边框 / 圆角 / 阴影 / hover 反馈全部保留）。 */
.jh-engine::after { display: none; }
.jh-engine:hover { border-color: #c9a85b; box-shadow: 0 4px 16px #6f62432b; }
.jh-engine-icon {
  position: absolute; left: calc(13 * var(--u)); top: calc(13 * var(--u));
  width: calc(35 * var(--u)); height: calc(35 * var(--u)); border-radius: 50%;
  display: grid; place-items: center;
  background: #101517; color: #caa45e;
  border: 1px solid #c29a4e;
  font-size: calc(17 * var(--u));
}
/* 奇门遁甲标志 = 站内既有图形（页脚 BaguaMark 八卦轮 SVG，见 HomeEngines.tsx）→ 定尺寸。
   24u 直径 vs 另两枚 17u 字标：视觉重量相当，且「八卦环」与「圆弧碗☯」「四角星✦」两两明显可辨。 */
.jh-engine-icon svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.jh-engine-body { margin-left: calc(47 * var(--u)); position: relative; z-index: 2; }
/* 【小瑕疵修复 2026-09-16】卡内小字压在用户水墨画上偏淡（用户点名「看人生周期」与标签行）。
   只改「字」本身：加深字色 + 极淡纸色描边（text-shadow = 极淡底衬，贴着字形，不成块、
   不覆盖画面），**不动用户的画一个像素**（无底色块、无遮罩、无滤镜）。
   纸色描边在浅色画面上提对比、在深色图标圈上也把字形从背景里托出来（两侧都可读）。 */
.jh-engine small {
  font-size: calc(6 * var(--u));
  color: #6b5734;                                  /* 原 #9a8a6b → 加深 */
  text-shadow: 0 0 calc(3 * var(--u)) #fffdf7ee, 0 0 calc(1.5 * var(--u)) #fffdf7dd;
}
.jh-engine h3 {
  font-family: var(--h-serif); font-weight: 400;
  font-size: calc(14 * var(--u));
  color: #252321;
  margin: calc(1 * var(--u)) 0;
}
.jh-engine p {
  font-size: calc(7 * var(--u));
  color: #4c4436;                                  /* 原 #776f62 → 加深 */
  text-shadow: 0 0 calc(3 * var(--u)) #fffdf7ee, 0 0 calc(1.5 * var(--u)) #fffdf7dd;
}
.jh-chips { display: flex; gap: calc(5 * var(--u)); margin-top: calc(14 * var(--u)); position: relative; z-index: 2; }
.jh-chips i {
  font-style: normal;
  font-size: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(7 * var(--u));
  /* 标签底色加实、字色加深（标签是站内 UI 元素，非用户的画）。
     细边用 inset box-shadow 而不是 border：**不改变 chips 行任何盒尺寸**（避免 PC 端
     换行/裁切风险，符合「PC 版式不变」）。 */
  background: #f1ece1f2; border-radius: calc(3 * var(--u)); color: #544d3d;
  box-shadow: inset 0 0 0 1px #0000000f;
  white-space: nowrap;
}
.jh-engine > a {
  position: absolute; left: calc(13 * var(--u)); bottom: calc(9 * var(--u));
  font-size: calc(6.5 * var(--u)); color: #927849; z-index: 2;
}
.jh-engine > a:hover { color: var(--h-gold); }

/* ── AI 决策分析（代码包 .ai-section：高 208 / 深墨 / 斜切山形 opacity .65） ── */
.jh-ai {
  position: relative; overflow: hidden;
  height: calc(208 * var(--u));   /* 【R8②】PC 断点内覆盖为 124.8u（×0.6），见文件末 R8 段 */
  background: #071013;
  color: #eee8da;
}
.jh-ai-bg {
  position: absolute; inset: 0;
  /* 【整图落地 2026-09-16 · 原图像素直贴】AI 决策段背景 = 用户桌面
     「AI 区背景（含人影）.png」的**原样像素切片** x 0–2172 / y 147–683
     → public/home/sec-ai-people.webp（2172×536，q88，未做任何修补/滤镜/压暗）。
     切片比例 2172:536 = 4.052 与 .jh-ai 版面 842:208 = 4.048 一致
     → cover 零变形、零可见裁切，人影（影像 x 0–14%）/ 金色天光（x≈17%）/
     山峦 / 水面逐像素落在原位。文案在 left 195u（23%）起，落人影右侧暗面上。
     深墨渐变只作下层兜底（位图加载失败时仍是原深底）。 */
  /* 【A 方案整改 2026-09-16 · 用户图片一律「只缩放不裁切 · 整张完整可见」】
     cover → contain：整张影像（原图左侧人影 / 金色天光 / 山峦 / 水面）完整可见，
     零裁切、零变形。盒比例 842:208 = 4.0485 与影像 2172:536 = 4.0522 近乎相等 →
     contain 的留边只有上下各 ~0.2px（实测量化见报告），与改前逐像素对照无差异。
     另按要求：留边 / 加载失败兜底只用「从影像四边取样的纯色」#0b1113，
     原来的 radial-gradient（光效）+ linear-gradient（渐变）两层已删除。 */
  /* 【原设计替换 2026-10-14】PC AI 中间图使用桌面「九宫PC端V3/中间图.png」原始 PNG。
     原文件 2170×725，逐字节复制为 public/home/sec-ai-mid-v3.png；
     保持原始比例、完整山水/人物/法阵/右侧金线卡框，不裁切、不变形、不转码。 */
  background-color: #0b1113;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.jh-ai-bg[data-bg-ready="true"] {
  background-image: url('/home/sec-ai-mid-v3.png');
}
.jh-ai-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(140deg, transparent 35%, #273236 35.4% 48%, transparent 48.4%),
    linear-gradient(25deg, transparent 46%, #1a2327 46.4% 61%, transparent 61.4%);
  opacity: .65;
  /* 位图自带山峦/水面 → CSS 多边形山形不再绘制（否则硬边压照片） */
  display: none;
}
.jh-ai-copy { position: absolute; left: calc(195 * var(--u)); top: calc(37 * var(--u)); z-index: 3; }
.jh-ai-copy h2 {
  font-family: var(--h-serif); font-weight: 400;
  font-size: calc(17 * var(--u));
  margin: calc(4 * var(--u)) 0 calc(10 * var(--u));
}
/* 代码包只写了 margin-bottom:13px，上外边距吃的是 UA 默认的 1em（= 7px）；
   站内 Tailwind preflight 把 margin 全局清零 → 这里把 1em 显式补回，行高/间距才与代码包一致 */
.jh-ai-copy p { font-size: calc(7 * var(--u)); line-height: 1.9; color: #aaa79c; margin: calc(7 * var(--u)) 0 calc(13 * var(--u)); }
.jh-ai-copy .jh-gold-btn { font-size: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(15 * var(--u)); }
.jh-eyebrow--dark { color: #d1b57d; }

.jh-chat { position: absolute; right: calc(42 * var(--u)); top: calc(26 * var(--u)); width: calc(250 * var(--u)); z-index: 4; }
.jh-bubble {
  display: inline-block; margin-left: calc(25 * var(--u));
  background: #d7d6d1; color: #343638;
  border-radius: calc(12 * var(--u));
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  font-size: calc(7 * var(--u));
}
.jh-chat-panel {
  margin-top: calc(7 * var(--u));
  border: 1px solid #51585a; border-radius: calc(7 * var(--u));
  background: #0e1518e8;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.jh-chat-title { font-size: calc(8 * var(--u)); color: #e1c482; margin-bottom: calc(8 * var(--u)); }
.jh-chat-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: calc(10 * var(--u)); }
.jh-chat-cols li { font-size: calc(7 * var(--u)); padding: calc(3 * var(--u)) 0; color: #bbb7ab; }
.jh-chat-cols li::before { content: "◆"; color: #b99758; font-size: calc(5 * var(--u)); margin-right: calc(6 * var(--u)); }
.jh-chat-cols > div { border-left: 1px solid #555d5e; padding-left: calc(12 * var(--u)); }
.jh-chat-cols b { font-family: var(--h-serif); font-weight: 400; font-size: calc(8 * var(--u)); color: #d9c18e; }
.jh-chat-cols p { font-size: calc(6.5 * var(--u)); line-height: 1.7; color: #c5c0b4; margin: calc(6.5 * var(--u)) 0; }
.jh-chat-cols a { font-size: calc(6 * var(--u)); color: #cda960; }
.jh-chat-cols a:hover { color: #f1d28d; }

/* ── 易学书馆（代码包 .library / .book-banner：高 105） ── */
.jh-library { min-height: calc(187 * var(--u)); }
.jh-book-banner {
  min-height: calc(105 * var(--u));
  /* 高度由原图切片比例决定（1488:239）→ 位图 cover 时零裁切、零变形，
     原图构图（书脊位置、山水走势、朱印位置）逐像素保持 */
  aspect-ratio: 1488 / 239;
  border: 1px solid var(--h-paper); border-radius: calc(5 * var(--u));
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  /* 【整图落地 2026-09-16 · 原图像素直贴】易学书馆横幅 = 「6cf2bddf….png」第 1 横带
     的原样像素切片 x 9–1497 / y 141–380（public/home/sec-library.webp，1488×239，q88）。
     切片内含：5 部古籍书脊（题签逐字：河图洛书 / 道德经 / 白泽精怪图 / 经国雄略 /
     易经正鑑）+ 山水长卷 + 右下竹简 + 右上「九宫」朱印 —— 全部原封不动。
     站内只收起**自己的** CSS 书脊（.jh-spines）与 ◇ 印（.jh-seal），
     让原图的书脊与朱印显出来；站内真文字叠在原图留白处。 */
  /* 【A 方案整改】cover → contain：盒已锁在切片原比例（1488:239）→ 整张图完整可见、
     零裁切零变形；渐变兜底层换成从切片四边取样的纯色 #d2cabd（无渐变/无光效）。 */
  background-color: #d2cabd;
  background-image: url('/home/sec-library.webp');
  background-size: contain;
  /* 【V6.3 · 2026-09-24 · ③ 修 1px 硬边竖缝】border 颜色 transparent → var(--h-paper)
     根因：本盒有 `border: 1px solid transparent` 而 `background-origin: border-box`
     → 不透明的 background-color / 位图会在**透明边框下面**透出，沿盒子四边画出
     一圈 1px 的硬线（实测 x=75 / x=1364 处 |Δ| 峰值 ≈35–45）。
     只把边框颜色从 transparent 改成纸色 → 边框的绘制在背景**之上**（CSS 绘制顺序：
     background → border），1px 环被纸色盖住 → 缝消失。
     · 盒模型、内边距、子项坐标、background-origin/background-size **一个字没动**
       → 位图仍按 border box 定位与 contain（✗ 不发生任何重采样/缩放变化，
         实测位图最佳配准位移 (dx,dy) = (0,0)）
     · 实测：位图四边的 1px 环自 (226,218,207)/(229,221,209)/(231,225,215)/… → (245,242,234)
       = 与页面纸面同值；x=75 处逐列 |Δ| 从 13.37 → 2.93
     · 手机端（≤842）这些盒被 `.jh-home > section:not(.jh-m-page){display:none}` 整块隐藏
       → 本改动对 390×844 逐字节无影响（截图 sha 相同）。 */
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
}
/* 横幅右上斜切纹（逐字：150deg 25% / 30deg 46% 两组色标） */
.jh-book-banner::after {
  content: ""; position: absolute; right: 0; top: 0; width: 60%; height: 100%;
  background:
    linear-gradient(150deg, transparent 25%, #d7d0c244 25.5% 29%, transparent 29.5%),
    linear-gradient(30deg, transparent 46%, #c7bdab40 46.5% 50%, transparent 50.5%);
  /* 位图横幅自带山水/纸纹 → CSS 斜切纹不再叠画 */
  display: none;
}
/* 书脊陈列（逐字：width 205 / padding-left 9 / gap 3 / 书脊 34×76 / 四段不同书脊渐变） */
.jh-spines {
  height: 100%; width: calc(205 * var(--u)); flex: none;
  display: flex; align-items: center; padding-left: calc(9 * var(--u)); gap: calc(3 * var(--u));
  z-index: 2;
}
.jh-spines b {
  height: calc(76 * var(--u)); width: calc(34 * var(--u));
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  background: linear-gradient(90deg, #171516, #534638 45%, #171515);
  color: #d4bc8b;
  font-family: var(--h-serif); font-weight: 400;
  font-size: calc(8 * var(--u));
  box-shadow: 2px 0 4px #0003;
  border-radius: calc(2 * var(--u));
  /* 【整图落地 2026-09-16】位图横幅左端已画好 5 部古籍书脊（含书名题签）→
     这里只保留原定位（205u 陈列位、间距、书脊尺寸一字未改），不再叠画 CSS 书脊，
     否则 CSS 实心书脊会整块盖住位图书脊。 */
  visibility: hidden;
}
.jh-spines b:nth-child(2) { background: linear-gradient(90deg, #302a22, #6b5a45, #24211d); }
.jh-spines b:nth-child(3) { background: linear-gradient(90deg, #23221f, #7d6a4d, #2a2824); }
.jh-spines b:nth-child(4) { background: linear-gradient(90deg, #24211d, #524a3e, #1a1917); }
.jh-book-list {
  z-index: 3;
  font-family: var(--h-serif);
  font-size: calc(7 * var(--u));
  line-height: 1.9;
  color: #4c463c;
  width: calc(140 * var(--u));
  flex: none;
}
.jh-book-list a { display: block; margin-top: calc(4 * var(--u)); color: #806b43; }
.jh-book-list a:hover { color: var(--h-gold); }
/* 原典引言（代码包 .book-quote：10px/1.7 serif / 宽 260） */
.jh-book-quote {
  z-index: 3;
  font-family: var(--h-serif);
  font-size: calc(10 * var(--u));
  line-height: 1.7;
  color: #3f3b34;
  flex: 1 1 auto;
  min-width: 0;
}
/* 代码包用 `font:6px var(--sans)` 简写 → 行距被重置为 normal，不会继承 .book-quote 的 1.7 */
.jh-book-quote small { display: block; font-family: var(--h-sans); font-size: calc(6 * var(--u)); line-height: normal; color: #918778; margin-top: calc(7 * var(--u)); }
/* 采纳依据小卡（站内新增：代码包此位是空白区，用于放真实证据链入口） */
.jh-evidence {
  z-index: 3;
  border: 1px solid #ded5c4;
  background: #fbf9f3cc;
  border-radius: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  width: calc(150 * var(--u));
  flex: none;
  font-size: calc(6 * var(--u));
  line-height: 1.7;
  color: #6f6a60;
}
.jh-evidence b { display: block; font-family: var(--h-serif); font-weight: 400; font-size: calc(6.5 * var(--u)); color: #4a453c; margin-bottom: calc(3 * var(--u)); }
.jh-evidence a { color: #806b43; }
.jh-evidence a:hover { color: var(--h-gold); }
/* 位图横幅右上角已是真实「九宫」朱印 → 原 ◇ 字形不再叠画（占位与右间距不变） */
.jh-seal { z-index: 3; color: #b58c4c; font-size: calc(20 * var(--u)); margin-left: auto; margin-right: calc(36 * var(--u)); flex: none; visibility: hidden; }

/* ── 术数大全（代码包 .tools / .tool-strip：高 87 / 书脊条 130×76） ── */
.jh-tools { min-height: calc(145 * var(--u)); padding-top: calc(13 * var(--u)); }
.jh-strip {
  /* 高度 = 原图切片比例（1439:138）→ cover 零裁切零变形 */
  aspect-ratio: 1439 / 138;
  min-height: 0;
  /* 边框走位图（.jh-strip 自身边框转透明，占位 1px 不变） */
  border: 1px solid var(--h-paper); border-radius: calc(5 * var(--u));
  /* 【整图落地 2026-09-16 · 原图像素直贴】术数大全条 = 「6cf2bddf….png」第 2 横带
     的原样像素切片 x 10–1449 / y 466–604（public/home/sec-tools.webp，1439×138，q88）。
     切片内含：左侧 5 部书脊堆 + 中部 6 个圆形线描图标格（含竖向分隔线）+ 右端「→」，
     原封不动；站内收起自己的 CSS 书脊条（.jh-mini-books），让原图书脊显出来。 */
  /* 【A 方案整改】cover → contain：盒锁在切片原比例（1439:138）→ 整张条完整可见、
     零裁切零变形；渐变兜底层换成从切片四边取样的纯色 #dad3c9。 */
  background-color: #dad3c9;
  background-image: url('/home/sec-tools.webp');
  background-size: contain;
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  /* 原图每格「图标在上、下方留白」→ 站内六格文字改用贴底对齐，落进原图留白里；
   原图的线描图标本身就是这一行的图标，站内不再叠画 Unicode 字形（见下方 .jh-tool） */
  display: flex; align-items: flex-end; padding-bottom: calc(4 * var(--u));
  position: relative; overflow: hidden;
}
/* 书脊条（逐字：6 段色标 0 16% / 16.5% 29% / … / 72.5%） */
.jh-mini-books {
  width: calc(130 * var(--u)); height: calc(76 * var(--u)); flex: none;
  background: linear-gradient(90deg, #1a1815 0 16%, #665443 16.5% 29%, #26221e 29.5% 44%, #5d4d3d 44.5% 57%, #2a2722 57.5% 72%, transparent 72.5%);
  margin-left: calc(10 * var(--u));
  /* 位图条左端已是原图的书脊堆 → 不再叠画 CSS 书脊（占位 130×76 与左边距一字未改） */
  visibility: hidden;
}
.jh-strip-books { font-family: var(--h-serif); font-size: calc(7 * var(--u)); line-height: 1.8; width: calc(115 * var(--u)); flex: none; color: #4c463c; }
.jh-tool { width: calc(58 * var(--u)); flex: none; text-align: center; font-size: calc(18 * var(--u)); color: #7b6d55; transition: color .2s ease; }
.jh-tool b { display: block; font-family: var(--h-sans); font-weight: 400; font-size: calc(6 * var(--u)); margin-top: calc(5 * var(--u)); color: #686154; }
.jh-tool:hover { color: var(--h-gold); }
.jh-tool-more { font-size: calc(7 * var(--u)); margin-left: auto; margin-right: calc(17 * var(--u)); color: #816e4b; flex: none; white-space: nowrap; }
.jh-tool-more:hover { color: var(--h-gold); }
/* 【2026-09-17 对齐校正】六格名称按位图图标中心绝对定位（数值实测自 public/home/sec-tools.webp：
   6 个圆形线描图标的 x 中心 = 652.5/788.7/925.2/1048.8/1157.4/1267.6（条宽 1439）→
   45.35%/54.81%/64.29%/72.89%/80.43%/88.09%；左端箭头中心 96.55%）。
   垂直仍是原来的 bottom 4u（等价于原来 flex-end + padding-bottom 4u 的位置，一字未动）；
   宽度/字号/行高/颜色/悬停高亮一字未改，只是把水平落点钉在图标正下方。 */
.jh-strip .jh-tool {
  position: absolute;
  bottom: calc(4 * var(--u));
  transform: translateX(-50%);
}
.jh-strip .jh-tool-more {
  position: absolute;
  bottom: calc(4 * var(--u));
  left: 96.55%;
  transform: translateX(-50%);
  margin-left: 0; margin-right: 0;
}
/* 【整图落地 2026-09-16 · 原图像素直贴】原图条内 6 个圆形线描图标 = 这一行的图标本体
   → 站内不再叠画 Unicode 字形（只改绘制；字号/行高/占位与六格宽度一字未改），
   六格名称保留原色、悬停高亮，落在原图每格下方的留白里。 */
/* 【2026-09-16 真·修复】原来只写 `.jh-tool{color:transparent}`（0,1,0）会被上面
   `.jh-home a{color:inherit}`（0,1,1）压过 → 站内 Unicode 字形其实一直还画在原图图标上
   （实测计算样式 color=rgb(37,35,33)）。改为 `.jh-home .jh-tool`（0,2,0）后，工具条里
   只剩用户原图自己的 6 个圆形线描图标 —— 与「只按用户提供的图去做」一致。
   字形本身仍占位（只改颜色，不动字号/行高/占位），所以六格名称位置一个像素没变。 */
.jh-home .jh-tool,
.jh-home .jh-tool:hover { color: transparent; }
.jh-home .jh-tool:hover b { color: var(--h-gold); }
/* 书脊条与书名文字仍垂直居中（不受 .jh-strip 的贴底对齐影响） */
.jh-mini-books, .jh-strip-books { align-self: center; }

/* ── 你的人生图谱（代码包 .life / .life-icons / .profile-panel） ── */
.jh-life { min-height: calc(253 * var(--u)); padding-top: calc(4 * var(--u)); }
.jh-icons {
  /* 原图九格固定中心：每个名称用独立绝对定位，避免 flex space-around 与位图图标漂移。 */
  position: relative;
  display: block;
  aspect-ratio: 1281 / 113;
  min-height: 0;
  border: 1px solid var(--h-paper); border-radius: calc(5 * var(--u));
  background-color: #eee9e0;
  background-image: url('/home/sec-lifemap-icons.webp');
  background-size: contain;
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  color: #8d754b;
}
.jh-icons a,
.jh-icons a:hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 11.11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: calc(13 * var(--u));
  font-size: 0;
  text-align: center;
  color: transparent;
  transition: color .2s ease;
}
.jh-icons a:nth-child(1) { left: 0%; }
.jh-icons a:nth-child(2) { left: 11.11%; }
.jh-icons a:nth-child(3) { left: 22.22%; }
.jh-icons a:nth-child(4) { left: 33.33%; }
.jh-icons a:nth-child(5) { left: 44.44%; }
.jh-icons a:nth-child(6) { left: 55.55%; }
.jh-icons a:nth-child(7) { left: 66.66%; }
.jh-icons a:nth-child(8) { left: 77.77%; }
.jh-icons a:nth-child(9) { left: 88.88%; }
.jh-icons span {
  display: block;
  margin: 0;
  font-size: calc(6 * var(--u));
  line-height: 1;
  white-space: nowrap;
  color: #676159;
}
.jh-icons a:hover span { color: var(--h-gold); }

.jh-panel {
  min-height: calc(150 * var(--u));
  display: grid;
  grid-template-columns: calc(170 * var(--u)) calc(300 * var(--u)) 1fr;
  gap: calc(12 * var(--u));
  align-items: center;
}
/* 【整图落地 2026-09-16 · 原图像素直贴】人生图谱面板 = 「6cf2bddf….png」第 4 横带
   按三张卡片原样切成三块像素切片，各自贴到对应的 .jh-* 盒上；盒高用切片自身的比例锁定
   （aspect-ratio + cover = 零裁切、零变形、零重画）：
     左说明卡     x 76–374   / y 834–1012 → sec-lifemap-copy.webp   （298×178）
     中图表卡     x 405–1003 / y 856–1017 → sec-lifemap-chart.webp  （598×161）
     右当前阶段卡 x 1022–1399/ y 852–1013 → sec-lifemap-current.webp（377×161）
   三块切片保留原图全部内容（4 个灰 tab 药丸 / 彩色曲线 / 竖向金色指示线 / 灰骨架条 /
   橙点 / 金色示意按钮都在），未抹除、未修补；站内真文字与真 CTA 按原图位置叠上去。
   （站内自己那 4 条 CSS 倾斜折线 .jh-line 不再绘制 —— 原图已是真实曲线。） */
.jh-panel-copy {
  position: relative;
  aspect-ratio: 298 / 178;
  padding: calc(7 * var(--u)) calc(8 * var(--u)) 0;
  background-image: url('/home/sec-lifemap-copy.webp');
  /* 【A 方案整改】cover → contain（盒锁在切片原比例 298:178）→ 整张卡完整可见、零裁切。
     兜底纯色 #eeeae1 = 该切片四边取样色。 */
  background-color: #eeeae1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* 原图左卡内的金色示意按钮（切片内 x 23–193 / y 78–117）→ 站内真 CTA 按同一处同样大
   叠上去（百分比坐标：任何视口 / 任何 --u 都贴在同一位置、同一比例） */
.jh-panel-copy .jh-btn-small {
  position: absolute;
  left: 7.7%; top: 43.8%; width: 57%; height: 22%;
  margin: 0; padding: 0;
  justify-content: center;
  border-radius: calc(11 * var(--u));
}
.jh-panel-copy h3 {
  font-family: var(--h-serif); font-weight: 400;
  font-size: calc(11 * var(--u));
  color: #252321;
  margin-bottom: calc(7 * var(--u));
}
.jh-panel-copy p { font-size: calc(6.5 * var(--u)); line-height: 1.8; color: #777166; margin: calc(6.5 * var(--u)) 0; }
.jh-btn-small { font-size: calc(6.5 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); margin-top: calc(5 * var(--u)); }
.jh-chart {
  /* 高度 = 原图切片比例（598:161）→ cover 零裁切零变形 */
  height: auto;
  aspect-ratio: 598 / 161;
  position: relative;
  /* 边框走位图（自身 border-bottom 转透明，占位 1px 不变） */
  border-bottom: 1px solid transparent;
  /* 【原图像素直贴】中图表卡 = 第 4 横带中卡原样切片：卡片描边、4 个灰 tab 药丸、
     5 条彩色趋势曲线、竖直金色指示线（含节点圆点）、底部刻度点，全部原封不动。 */
  /* 【A 方案整改】cover → contain：盒锁在切片原比例（598:161）→ 整张卡（灰 tab 药丸、
     5 条彩色曲线、金色竖线、底部刻度点）完整可见、零裁切零变形；
     原渐变（假网格线）兜底层删除，换成从切片四边取样的纯色 #f1ede5。 */
  background-color: #f1ede5;
  background-image: url('/home/sec-lifemap-chart.webp');
  background-size: contain;
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
}
/* 【2026-09-17 对齐校正】用户报障「四组词与相应底色胶囊不重合；趋势二字无底色背景」。
   成因：四组词原来是 flex 顺序排（从卡片最左边起 + gap 18u），而四个灰胶囊在**位图**里
   （public/home/sec-lifemap-chart.webp，598×161 实测）的中心分别是
   x = 57.5 / 137.5 / 218 / 298.5 → 9.62% / 22.99% / 36.45% / 49.92%（卡宽 598）；
   两边的落点完全对不上 → 右侧「人生总览」实测偏左约 95 位图像素，「趋势」更被挤到胶囊之外
   （所以它看上去「没有底色」）。
   做法：四组词改为按各自胶囊中心绝对定位（left + top 取胶囊可见区中心）+ translate(-50%,-50%)
   → 每组词正好居中压在它自己的胶囊上。字号/字色/粗细（趋势=深金加粗）一字未改。
   胶囊可见行中心：第 1 个（深色激活胶囊）8.5/161 = 5.28%，其余 6.5/161 = 4.04%。 */
.jh-chart-tabs {
  position: absolute; inset: 0; display: block; margin: 0;
  font-size: calc(6 * var(--u)); color: #9a9285;
  pointer-events: none;
}
.jh-chart-tabs b,
.jh-chart-tabs span {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
}
.jh-chart-tabs b { left: 9.62%; top: 5.28%; color: #6d5b3e; font-weight: 700; }
.jh-chart-tabs span:nth-of-type(1) { left: 22.99%; top: 4.04%; }
.jh-chart-tabs span:nth-of-type(2) { left: 36.45%; top: 4.04%; }
.jh-chart-tabs span:nth-of-type(3) { left: 49.92%; top: 4.04%; }
/* 折线 4 条（逐字照搬代码包的 4 个颜色与 4 个倾斜角；l4 只 skewY(4deg) 不 rotate） */
.jh-line { position: absolute; left: 0; right: 0; top: calc(45 * var(--u)); height: calc(45 * var(--u)); border-top: 1px solid; opacity: .6; transform: skewY(-7deg) rotate(-2deg); }
.jh-line { display: none; }
.jh-line.l1 { border-color: #c49b55; top: calc(51 * var(--u)); }
.jh-line.l2 { border-color: #719d99; top: calc(59 * var(--u)); transform: skewY(8deg) rotate(1deg); }
.jh-line.l3 { border-color: #ad6d6d; top: calc(72 * var(--u)); transform: skewY(-12deg); }
.jh-line.l4 { border-color: #8a84a7; top: calc(62 * var(--u)); transform: skewY(4deg); }
.jh-axis { position: absolute; bottom: calc(-13 * var(--u)); left: 0; right: 0; display: flex; justify-content: space-between; font-size: calc(6 * var(--u)); color: #aaa294; }
.jh-current {
  align-self: start;

  aspect-ratio: 377 / 161;
  min-height: 0;
  position: relative;
  /* 【2026-09-17 第二轮对齐校正 · 根因（上一轮只改了 left/top 数值，没修坐标系，故未修好）】
     ① 坐标系错位：原来 border:1px solid transparent + background-size:contain。
        盒（含 1px 边框）比例 377:161 === 切片比例，但**像素实际铺进的是 padding-box**
        （少 2px，比例 442.7:187.91 = 2.3559 ≠ 切片 2.3416）→ contain 按高铺满后
        左右各留 1.35px 空边，位图整体右移 1.35px；而绝对定位子元素 left/width 的百分比
        是按 **padding-box** 解析的 → 真链接比位图药丸左偏 1.75px、宽 0.85px，
        圆角半径 11u(18.8px) 也大于位图药丸(≈17.2px) → 药丸左/下露出深金色「月牙」。
     ② 文字与骨架条错位：真文字按 padding 11u 左对齐 = x20，而位图骨架条左缘在
        x26.9（标题条）/ x46.0（三条带橙点条目的条）→ 文字整体左偏 6.9~24.8px；
        且第 4 行「谨慎…」比它那条骨架条高 12.4px（肉眼即「文字与底色背景错乱」）。
     校正：border 归 0 + background-origin:border-box + background-size:100% 100%
      → 位图坐标系与 padding-box **完全重合**（下列百分比/数值因此可直接取位图实测值，
        任何视口都同比缩放、零裁切零变形）；文字按位图骨架条逐行对齐
        （每条骨架条中心 = 该行文字行框中心，骨架条左缘 = 该行文字左缘）。 */
  border: 0;
  border-radius: calc(6 * var(--u));
  /* 上 10.92u / 右 11u / 下 11u / 左 15.3u（左 = 位图标题条左缘 x23 折算 27.1px 再减去字形左侧留白） */
  padding: calc(10.92 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u)) calc(15.3 * var(--u));
  box-shadow: none;
  /* 【原图像素直贴】右当前阶段卡 = 第 4 横带右卡原样切片：卡内原图的灰骨架条、
     橙色点、金色示意按钮都保留；站内真文字与真 CTA 叠在原图对应位置上。 */
  background-color: #efebe4;
  background-image: url('/home/sec-lifemap-current.webp');
  background-origin: border-box;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.jh-current {
  isolation: isolate;
  background-image: none;
  background-color: transparent;
}
.jh-current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: #efebe4 url('/home/sec-lifemap-current.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
/* 原图右卡内的金色示意按钮（切片内 x 21–141 / y 113–146）→ 站内真链接按同一处
   同样大盖上去（百分比坐标，任何视口都贴在同一位置）。
   选择器写成 .jh-panel .jh-current a（0,2,1）以稳胜文件后面原有的 .jh-current a（0,1,1），
   否则圆角/显示方式会被原规则覆盖成 2u 圆角方块，压不住原图的药丸形按钮。 */
.jh-panel .jh-current a {
  position: absolute;
  /* 【2026-09-17 第二轮对齐校正】坐标系已与位图重合（见上 .jh-current 的 border:0 +
     background-origin:border-box + background-size:100% 100%），故下列四个值**直接取位图实测值**：
     位图 sec-lifemap-current.webp（377×161）里那个金色示意药丸实测
     x 19.4..138.9 / y 114.4..143.7（含抗锯齿半像素）
       → left 19.4/377=5.146%、width 119.5/377=31.698%、top 114.4/161=71.056%、height 29.3/161=18.199%。
     圆角改 9999px（= 高度一半的整圆端，与位图药丸同形），不再用 11u（18.8px > 位图半径 ≈17.2px，
     半径偏大就会在药丸端点/底边露出位图那圈深金色月牙）。文字 inline-flex 居中 → 文字与金色药丸重合。 */
  left: 5.146%; top: 71.056%; width: 31.698%; height: 18.199%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
  border-radius: 9999px;
}
/* 骨架条逐行对齐（位图实测，坐标已与 CSS 盒重合）：
   标题条   y19..27（中心 23）·x23     → 文字行 1 中心 23/161、左缘 x23/377
   橙点条目 y45..53（中心 49）·条 x39  → 文字行 2 中心 49/161、左缘 x39/377
   橙点条目 y67..75（中心 71）·条 x39  → 文字行 3 中心 71/161、左缘 x39/377
   橙点条目 y89..97（中心 93）·条 x39  → 文字行 4 中心 93/161、左缘 x39/377
   即：行距 22 位图像素 = 15.17u；第 2~4 行整体再右缩进（39-23）= 16 位图像素 ≈ 11u。
   实测微调（1440 真机量）：padding-top 10.25u→10.92u（第 1、2 行 +1.15px），
   p 的 margin-top 6.2u→3.18u（第 3、4 行随之下移量抵消 -5.17px）→ 四行行框中心与骨架条中心差 ≤0.05px。 */
.jh-current > b,
.jh-current small,
.jh-current p {
  position: relative;
  z-index: 2;
}
.jh-current a { z-index: 2; }
.jh-current > b { display: block; font-family: var(--h-serif); font-weight: 400; font-size: calc(7 * var(--u)); color: #252321; margin-bottom: calc(8.25 * var(--u)); }
.jh-current small { display: block; font-size: calc(6.5 * var(--u)); color: #7e776d; line-height: 1.7; padding-left: calc(11 * var(--u)); }
.jh-current p { font-size: calc(6.5 * var(--u)); color: #7e776d; line-height: calc(15.17 * var(--u)); margin: calc(3.18 * var(--u)) 0; padding-left: calc(11 * var(--u)); }
.jh-current a {
  display: inline-block; background: #c19a50; color: #fff8e9;
  font-size: calc(6.5 * var(--u));
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(2 * var(--u));
}
.jh-current a:hover { filter: brightness(1.08); }

/* ── 为什么选择九宫八卦（代码包 .trust：高 113 / 6 列） ── */
.jh-trust { min-height: calc(113 * var(--u)); padding-top: calc(10 * var(--u)); padding-bottom: calc(12 * var(--u)); }
.jh-trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(8 * var(--u)); }
.jh-trust-grid > div { text-align: center; }
.jh-trust-grid b { display: block; font-size: calc(15 * var(--u)); font-weight: 400; color: #8d7650; margin-bottom: calc(3 * var(--u)); }
.jh-trust-grid strong { display: block; font-family: var(--h-serif); font-weight: 400; font-size: calc(7 * var(--u)); color: #252321; }
.jh-trust-grid small { display: block; font-size: calc(6 * var(--u)); color: #999287; margin-top: calc(3 * var(--u)); }

/* ══════════════════════ PC AI 入口收敛（2026-10-01） ══════════════════════
   PC 首页删除独立 HomeLifeQuestions 挂载，将四类问题入口并入 .jh-ai。
   HomePosition 只负责九宫定位与方法依据；.jh-ai 负责唯一 AI 问题分流。
   手机端仍由 HomeMobilePage + home-mobile.css 独立承载，手机版面不由本段改动。
   所有本轮新增视觉规则均在 @media (min-width: 843px) 内。
*/

/* ── ① 一句话定位（paper 区块，沿用 .jh-section 的底与内边距） ── */
.jh-position { padding-top: calc(23 * var(--u)); padding-bottom: calc(20 * var(--u)); }
.jh-position-card {
  border: 1px solid #ded7c9;                  /* 既有值（.jh-engine 边框） */
  border-radius: calc(6 * var(--u));          /* 既有值（.jh-engine 圆角） */
  background: #fbf9f3cc;                      /* 既有值（.jh-evidence 底色） */
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(18 * var(--u));
}
.jh-position-copy { flex: 1 1 auto; min-width: 0; }
/* 选择器写足 (0,2,0)：`.jh-home p{margin:0}` 是 (0,1,1)，单类会被清零（本文件 .jh-hero-sub 已踩过） */
.jh-position .jh-position-line {
  font-family: var(--h-serif);
  font-size: calc(11 * var(--u));
  line-height: 1.75;
  color: #28241e;                             /* 既有值（.jh-head h2） */
  margin: 0;
}
.jh-position .jh-position-sub {
  font-size: calc(6.5 * var(--u));
  line-height: 1.85;
  color: #777166;                             /* 既有值（.jh-panel-copy p） */
  margin: calc(7 * var(--u)) 0 0;
}
/* AI 入口（第一阶段 B 项）：按钮本体仍是被全站首页复用的金色主按钮，只按本区块尺度收紧占位 */
.jh-position-cta { flex: none; font-size: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }

/* ── ② 人生问题入口（8 个人生域 → 站内真实 AI 深链 /ai?q=<问题原文>） ── */
.jh-lifeq { padding-top: calc(6 * var(--u)); }
.jh-lifeq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)); }
.jh-lifeq-item {
  display: block;
  border: 1px solid #ded7c9;                  /* 既有值 */
  border-radius: calc(6 * var(--u));          /* 既有值 */
  background: #fbf9f3cc;                      /* 既有值 */
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.jh-lifeq-item:hover { border-color: #c9a85b; box-shadow: 0 4px 16px #6f62432b; }  /* 既有值（.jh-engine:hover） */
.jh-lifeq-item b {
  display: block;
  font-family: var(--h-serif); font-weight: 400;
  font-size: calc(9.5 * var(--u));
  color: #806b43;                             /* 既有值（.jh-head > a / .jh-book-list a） */
  margin-bottom: calc(5 * var(--u));
}
.jh-lifeq-item span { display: block; font-size: calc(7 * var(--u)); line-height: 1.7; color: #4c463c; }  /* 既有值（.jh-book-list） */
.jh-lifeq-item em {
  display: block; font-style: normal;
  font-size: calc(6 * var(--u));
  color: #999082;                             /* 既有值（.jh-head-sub） */
  margin-top: calc(6 * var(--u));
}
.jh-lifeq-item:hover b { color: var(--h-gold); }
.jh-lifeq-item:hover span { color: #252321; } /* 既有值（.jh-engine h3） */

/* ══════════════════════════ 移动端（代码包 @media(max-width:842px)） ══════════════════════════ */
@media (max-width: 842px) {
  .jh-home { --u: calc(100vw / 430); }

  /* 首屏：代码包移动端把 .hero-copy 留在 left:6%、罗盘改 left:42% + opacity:.75。
     站内导航是 fixed（移动端还带常驻工具条）→ 首屏顶部让出 --jh-navh，
     文案改常规流，避免被导航压住 / 被固定高度裁掉（差异 3）。 */
  .jh-hero {
    aspect-ratio: auto; height: auto; min-height: 0;
    padding: calc(var(--jh-navh, 104px) + 14px) 0 calc(34 * var(--u));
  }
  /* 【2026-09-16 第二轮 · 三端只留一个轮】移动端顶图不再 cover 铺满整屏。
     旧写法（cover + background-position）在手机屏（≈390×600 的竖屏盒）上会把
     1545×697 的横图按「高度」放大到 0.86 倍 → 只看见图中间一小块，
     图里罗盘被放大成大罗盘，而动态轮按 430u 基准算（0.907 窄屏下 = 354px）
     既盖不住也偏位 → 屏上两个太极（真 bug）。
     改为「整宽等比带」：整张图完整可见（等比，不裁切），动态轮就在同一个带里
     按百分比定位 → 与图里罗盘精确同心同径（间距/尺寸与 PC 完全同比）。
     预留高度直接由带的 aspect-ratio 决定（= 1545:697），文字落在带下方（图外）。 */
  .jh-hero-art {
    position: relative; inset: auto;
    width: 100%; height: auto;
    aspect-ratio: 1545 / 697;
  }
  .jh-hero-copy { position: relative; z-index: 8; left: auto; top: auto; width: 100%; padding: 0 6%; }
  .jh-glow { display: none; }
  /* 旧的移动端差异：① 文案压在照片上 → 给照片盖 55% 暗纱（用户明令禁暗纱，已删）；
     ② 罗盘不透明度降到 .35 以免压字。现在文案已移到图外，罗盘恢复满不透明度
     （与 PC 一致 = 1）—— 这是「动态轮盖住图里那个罗盘、视觉上只剩一个」的前提。 */
  .jh-side-copy { display: none; }

  .jh-section { padding-left: 6%; padding-right: 6%; }
  /* 代码包：.engine-grid{grid-template-columns:1fr} + .engine-card{height:115px}
     —— 115u 作为下限保留；但站内正文字体是自托管 Noto Sans SC，其 normal 行距比代码包
     所在环境的系统回退字体高约 1px/行 → 单列卡（内容 94px + 底部绝对定位的
     「了解更多」17.8px）在 115u(104px) 内会压在一起 8px。故高度改 auto + 115u 下限，
     并给底部绝对定位的链接预留 30u 独占空间（chips 底 → link 顶留 9px）。 */
  .jh-engines { grid-template-columns: 1fr; }
  /* 【2026-09-16 第二轮】单列卡在手机上会变很高很宽（≈378u × 内容高），
     若仍 contain 居中 → 用户的画会被缩成中间一小块。改为「整宽等比带」：
     padding-top = 100% / 1.5（= 图高，百分比解析的是本卡的包含块宽度）
     + 10u 间隙；图仍 contain、靠上（center top），整张完整可见不裁切；
     卡内文案/图标/芯片/「了解更多 →」全部落在带下方（图外），文案一字未删。 */
  .jh-engine {
    height: auto; min-height: calc(115 * var(--u));
    padding-top: calc(100% / 1.5 + 10 * var(--u));
    padding-bottom: calc(30 * var(--u));
    background-position: center top;
  }

  /* 代码包：.ai-copy{left:6%} .ai-chat{right:5%;width:42%} —— 两栏绝对定位在
     390px 屏上会互相压住，故改为上下堆叠（内容与字号不变，仅换排布）。 */
  /* 【A 方案整改 2026-09-16】人影在原图【左侧】→ 移动端把整张影像（含人影）
     铺成段落最上沿的一条整宽等比带（contain，不裁切、不压暗、不变形），
     文案 / 金色按钮 / 对话卡整体下移到影像【之外】（图外）→
     人物区域零覆盖：没有任何文字、按钮或卡片压在人物上。
     padding-top 的百分比解析的是包含块宽度（= 本段宽度）→ 与影像宽度一致，
     预留高度 = 影像高 × (段宽 / 影像宽) + 18u 间隙，严格包住整条影像。 */
  .jh-ai {
    height: auto; min-height: calc(208 * var(--u));
    padding: calc(100% / 4.0522 + 18 * var(--u)) 6% calc(26 * var(--u));
  }
  .jh-ai-bg::after { display: none; }
  .jh-ai-copy { position: relative; z-index: 3; left: auto; top: auto; }
  .jh-chat { position: relative; z-index: 4; right: auto; top: auto; width: 100%; margin-top: calc(20 * var(--u)); }
  .jh-chat-cols { grid-template-columns: 1fr; gap: calc(12 * var(--u)); }
  .jh-chat-cols > div { border-left: 0; padding-left: 0; border-top: 1px solid #555d5e; padding-top: calc(10 * var(--u)); }

  /* 代码包：.library{height:auto} .book-banner{height:105px} .tool-strip{overflow-x:auto} */
  .jh-library { min-height: 0; }
  /* 【A 方案整改】移动端不再 cover 裁切：整张原图铺成盒顶的整宽等比带，
     文字全部落在带下方（图外）；padding-top 的百分比 = 包含块宽度（= 本盒宽度）
     → 预留高度与图高严格相等，整张图一丝不缺。 */
  .jh-book-banner {
    min-height: 0; flex-wrap: wrap; row-gap: calc(12 * var(--u));
    padding: calc(100% / 6.2259 + 12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    background-size: contain; background-position: center top;
  }
  /* 位图带里已是原图真实的 5 部古籍书脊 → 站内那 4 条 CSS 书脊不再重复绘制
     （4 部书名在 .jh-book-list 里照常逐条列出，一个字未删） */
  .jh-spines { display: none; }
  .jh-book-list { width: calc(140 * var(--u)); }
  .jh-book-quote { flex: 1 1 100%; }
  .jh-evidence { width: 100%; flex: 1 1 100%; }
  .jh-seal { display: none; }
  .jh-tools { min-height: 0; }
  /* 【A 方案整改】术数大全条：整张原图铺成盒顶的整宽等比带（不裁切），
     内容改换行排布（原来横向可滑 = 右侧内容默认在屏外看不见），
     六格 + 「更多 →」全部落在带下方的屏内。 */
  .jh-strip {
    padding-top: calc(100% / 10.4275 + 8 * var(--u));
    background-size: contain; background-position: center top;
    flex-wrap: wrap; row-gap: calc(6 * var(--u)); overflow-x: visible;
  }
  .jh-tool { width: calc(40 * var(--u)); }
  /* 位图带左端已是原图的书脊堆 → 站内 CSS 书脊条不再重复绘制（纯装饰、无文字） */
  .jh-mini-books { display: none; }

  /* 代码包：.life{height:auto} .profile-panel{grid-template-columns:1fr}
     .profile-panel .chart,.current-card{display:none} */
  .jh-life { min-height: 0; }
  /* 【A 方案整改】图标行：整张原图铺成盒顶的整宽等比带（不裁切）；九格仍是一行
     space-around（与位图里 8 个图标圈 + 右端「→」的列位一致，实测列心偏差 ≤0.4%）
     → 名称正好落在位图对应图标下方，比原来换行三行更紧凑（用户要求「紧凑一些」）。 */
  .jh-icons {
    flex-wrap: nowrap; justify-content: space-around; gap: 0;
    /* 左右内边距必须为 0：内容盒要与 padding box 等宽，九格列心才与位图里
       8 个图标圈 + 右端「→」的列位逐格对齐（有位图对照实测 ≤0.4%） */
    padding: calc(100% / 11.3363 + 8 * var(--u)) 0 calc(10 * var(--u));
    background-size: contain; background-position: center top;
  }
  .jh-icons a { width: 11.11%; }
  /* 【A 方案整改】面板三张卡在移动端照常展示：原代码包移动端把中/右两张卡
     display:none —— 那会让两张用户图在手机端整张看不到，且卡内真文案被隐掉
     （违反「用户图片一律完整可见 + 移动端不删文案」）。三张卡都锁在各自切片原比例
     + contain → 零裁切零变形。栅格行距 30u 兜住中卡伸出盒外 13u 的刻度轴。 */
  .jh-panel { grid-template-columns: 1fr; gap: calc(30 * var(--u)); }

  /* 控制胶囊：390px 屏上按原尺寸会顶到屏幕两边 → 收紧间距与滑杆宽度
     （位置/做法/参数不变，仅缩小占位，避免与右侧悬浮入口或屏幕边缘顶死） */
  .jh-wheel-wrap .controls { gap: 10px; padding: 8px 12px; font-size: 12px; bottom: 18px; }
  .jh-wheel-wrap .controls input[type="range"] { width: 84px; }

  /* 代码包：.trust{height:auto} .trust-grid{grid-template-columns:repeat(3,1fr)} */
  .jh-trust { min-height: 0; }
  .jh-trust-grid { grid-template-columns: repeat(3, 1fr); row-gap: calc(16 * var(--u)); }

  /* ── 位图落地的移动端适配（所有像素仍全部来自用户原图，只改绘制方式） ──
     【A 方案整改 2026-09-16】移动端同样「只缩放不裁切」：不再放开比例 + cover，
     而是把原图铺成各板块顶部的整宽等比带（上面各盒用 padding-top 预留带高），
     文字与 CTA 全部落在带下方（图外）；图内占位元素（书脊堆 / 图标圈 / 灰 tab 药丸 /
     骨架条 / 金色示意按钮）逐像素原样可见 —— 不抹平、不重画、不调色、不压暗。 */
  .jh-book-banner, .jh-strip, .jh-icons { aspect-ratio: auto; }
  /* 保持移动端原有的条高（由内容撑住，不改任何坐标） */
  .jh-strip { min-height: calc(87 * var(--u)); align-items: center; padding-bottom: 0; }
  /* 位图带里已是原图真实的书脊/图标 → 站内那套 CSS 书脊条与 Unicode 字形不再重复绘制
     （与桌面端处理一致：占位不变、只改绘制；六格/九格名称照常显示，文字一字未删），
     悬停仍高亮名称，真链接照常可点。 */
  .jh-tool:hover b { color: var(--h-gold); }
  .jh-icons a:hover span { color: var(--h-gold); }
  /* AI 段位图：整张影像（含左侧人影）铺在段落最上沿，contain 不裁切；
     文案 / 按钮 / 对话卡全部在影像之下（见上方 .jh-ai 的 padding-top）。 */
  .jh-ai-bg { background-size: contain; background-position: center top; }
}

/* ══════════════════════════ 导航透明浮屏（顶部图落地配套） ══════════════════════════
   参考稿的导航是「透明浮在首屏图上、文字浅色」。站内 <Nav> 对首页已设
   background:transparent，但移动端常驻工具条（<nav> 内嵌的那条）写死了
   bg-[#F5F2EA] 纸白底 → 首屏上仍是一条白条。按要求「不改 Nav.tsx，用首页 CSS 覆盖」：

   · 作用域：html.jg-home-top 由 HomeClient 在首页挂载时加、卸载时摘
     （离开首页自动失效，不影响任何其它页面的导航）。
   · 只改导航自身的绘制（底色/边框/文字色），不动它的高度、内边距、位置与任何区块坐标。
   · 滚动超过首屏后 HomeClient 摘掉该类 → 导航回到站内原有暗底，浅色文字在纸白
     区块上照样清晰（站内原来的「首页导航始终透明」在滚动后会出现浅字压白底读不清）。 */
html.jg-home-top nav {
  background: transparent !important;
  border-bottom-color: rgba(176, 138, 60, .12) !important;
  box-shadow: none !important;
}
html.jg-home-top nav nav {
  background: transparent !important;
  border-top-color: rgba(176, 138, 60, .16) !important;
}
/* 移动端工具条的胶囊：纸白药丸 → 半透明深色药丸，浅色字（首屏图上可读） */
html.jg-home-top nav nav a {
  background: rgba(6, 10, 12, .38) !important;
  border-color: rgba(176, 138, 60, .34) !important;
  color: #e9dcc0 !important;
}
/* 导航工具条内的按钮（繁/夜、主题、汉堡、搜索触发）原为深灰描边字 → 首屏图上改浅色。
   选择器限定 nav 的第一个 div（工具条），避免连带改到移动端展开菜单（白底面板）里的按钮。 */
html.jg-home-top nav > div:first-of-type button {
  color: #d6c9ae !important;
  border-color: rgba(176, 138, 60, .38) !important;
}
html.jg-home-top nav > div:first-of-type button:hover { color: #f2e3c0 !important; }
/* 搜索触发里嵌的 ⌘K 键位徽标原为纸白底，在首屏照片上是一块突兀的白 → 同改半透明深色
   （只认按钮里的 kbd，搜索弹窗内的 ESC 徽标在白底弹窗上保持原样） */
html.jg-home-top nav > div:first-of-type button kbd {
  background: rgba(255, 255, 255, .12) !important;
  color: #d6c9ae !important;
}

/* 滚过首屏：站内 <Nav> 给首页写的是「永远透明」的内联样式，浅色文字压到纸白区块上
   会读不清 → 这里用 .jg-home-scrolled 把它拉回站内其它页面同款的暗底导航。
   （同为首页 CSS 覆盖，不动 Nav.tsx；两个类由 HomeClient 互斥切换） */
html.jg-home-scrolled nav {
  background: rgba(8, 11, 12, .94) !important;
  border-bottom-color: rgba(176, 138, 60, .14) !important;
}
html.jg-home-scrolled nav nav {
  background: #111517 !important;
  border-top-color: rgba(176, 138, 60, .2) !important;
}
html.jg-home-scrolled nav nav a {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #cfc7b6 !important;
}
html.jg-home-scrolled nav > div:first-of-type button { color: #b9b3a6 !important; border-color: rgba(255, 255, 255, .18) !important; }

/* ══════════════════════ 移动端常驻工具条（小瑕疵修复 2026-09-16） ══════════════════════
   现象：390×844 屏上，常驻工具条 6 个胶囊「🏠 首页 / 📜 排盘 / 📅 宜忌 / 💬 AI 对话 /
   📖 古籍书馆 / ⚡ 快速测算」按站内原尺寸（px-3 + gap-1 + 12px 字）合计 ≈455px，
   超过 390px 视口 → 最后一项被裁在屏外（Nav.tsx 内层已写 overflow-x-auto + no-scrollbar，
   能滑但滚动条被隐藏，看上去就是「被裁掉」）。
   做法：不改 Nav.tsx。首页挂载期间由 HomeClient 给 html 挂 .jg-home-page，用首页 CSS
   把这条工具的横向占位收紧（左右内边距 12→8px、间距 4→2px、字号 12→11px，
   首页豁免全站 ≥12px 字号下限），390px 内 6 项全部可见；≤360px 的机型仍可横向滑动
   （overflow-x:auto 是 Nav.tsx 原有的，未动），并显式给出细滚动条作为「还能滑」的提示。
   只改工具条自身的 padding/gap/字号，不动它的高度、位置与任何区块坐标。 */
html.jg-home-page nav nav > div {
  gap: 2px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
}
html.jg-home-page nav nav a {
  padding-left: 7px !important;
  padding-right: 7px !important;
  font-size: 10px !important;
}

/* ══════════════════ 手机端「一幅完整长图」视觉层（< 843px 断点） ══════════════════
   【用户交付 2026-09-16 · 九宫手机端总方案】
   · 手机首页整屏 = 一幅完整长图（public/home/mobile-homepage.webp，用户给的
     1024×1536 整页设计图，**只缩放不裁切**：width:100% + height:auto，无 cover、无裁切）。
   · 长图里自带的「静态太极九宫仪盘」按用户许可的清理方式抹掉（同图干净区域径向对称插值；
     改动只落在 x329–694 / y34–288，该范围以外与用户原图逐字节相同）。
   · 在**同一位置**叠加 PC 端同一个 SVG 仪盘组件（.jh-wheel-wrap → TaijiWheel）：
     太极 22s ↻ / 八卦 42s ↺ 反向 / 刻度 58s ↻ / 星轨 70s ↻ + 光晕呼吸 / 灵珠闪烁 / 星点呼吸；
     山水、建筑、水面全部静止 —— 页面里没有任何被旋转的位图。
   · 热点用真实 ASCII 路由（与 PC 首页/导航同源），DOM 里带 sr-only 文案。
   · PC 断点（≥843px）：.jh-m-page 自身 display:none，不参与布局 → PC 版式与 DOM 呈现不变。
   ── 坐标依据（长图坐标 → 容器百分比，容器宽高比 = 1024:1536）──
     仪盘圆心 (512, 216)  →  50.000% / 14.0625%
     仪盘最外环 r=176px（= 叠加轮最外点 0.95×盒宽/2）→ 盒宽 = 2×176/0.95 = 370.5px = 36.181%
     left = 50% − 36.181%/2 = 31.9095%
     top  = 14.0625% − (36.181% × 1024/1536)/2 = 2.002%
   （实测核对：叠加轮的 176.0/138.3/124.7/107.4/93.2 环，与长图里那套环 176/138/125/107/96
     逐个吻合，偏差 ≤1.4px） */
.jh-m-page { display: none; }

@media (max-width: 842px) {
  /* PC 版七个区块在手机端整块让位给长图（DOM 仍留在静态 HTML 里 → 抓取/无障碍不受损）。
     注意必须排除 .jh-m-page 自身（它也是 .jh-home 的子 section）——漏了就会把自己也隐藏。 */
  .jh-home > section:not(.jh-m-page) { display: none; }

  /* 【2026-09-17 用户铁律：PC / 手机 = 两套物理独立方案】手机端新增的任何规则（含
     「手机端首页不再渲染站内 PC 页脚」）一律写进 **src/app/home-mobile.css**（手机侧专属文件，
     由 HomeMobilePage.tsx 引入）；本文件（PC 断点版式）不再承载手机端规则。 */

  .jh-m-page {
    display: block;
    /* 让开站内固定导航（移动端含常驻工具条）：长图整体落在导航下方，不与导航重叠 */
    padding-top: var(--jh-navh, 104px);
    background: var(--h-paper);
  }
  /* 【2026-09-18 清账】旧手机端「单幅长图」方案遗留的 16 条死选择器已删除
     （.jh-m-stage / .jh-m-image / .jh-m-page .jh-m-wheel / .jh-m-hot*，
      全仓 TSX 0 引用；闸门 check-home-isolation.mjs --strict 已过 exit 0）。
     ⚠️ 上面 .jh-m-page 是**活规则**（手机端在用的根 section），不许删。 */
  /* 141px 直径下 SVG 原生 1.1 单位描边 ≈ 0.26px（会看不见）→ 手机端按同一比例加粗描边。
     取值依据：长图自带环线宽 ≈1.5–2 图像像素 → 在手机端（图 1024 → 屏 390，0.381 倍）
     等于 0.57–0.76 CSS px；换算回 600 单位 viewBox 即 2.4–3.2 ⇒ 取 3.0/3.0/2.6，
     与「长图里那套环线」同一视觉重量。坐标、结构、动画时长与方向一字未改。
     （PC 断点描边仍为原值 1.1 / 1.2 / 1） */
  .jh-m-page .jh-wheel-wrap .orbit { stroke-width: 3.0; }
  .jh-m-page .jh-wheel-wrap .bagua { stroke-width: 3.0; }
  .jh-m-page .jh-wheel-wrap .scale { stroke-width: 2.6; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   【V6 2026-09-24】把已验收的「整页等比放大」做成真页面 —— 业主指定的四处手术
   ───────────────────────────────────────────────────────────────────────────────
   ① 顶部罗盘：手绘 SVG 盘 → 业主给的 7 层素材 + 08 光晕（组件 HomeCompassLayers.tsx）
      圆心 (754.90, 262.83)@1440（= 设计 1248 图 (654.35, 227.83) × 1.153846），
      层盒直径 --jh-cmp-d 按「设计口径可见外径 ≈378」标定（标定过程见 REPORT.md §3）；
      转速 01↻90 / 02↺120 / 03↻180 / 04↺240 / 05↺300 / 06↻360s + 07 呼吸 7s。
   ② PC 整页等比放大：固定 1440 设计舞台，整页（含文字）乘 scale(100vw / 1440px)。
      用「逐块（nav / main / footer）各自 transform」而不是给 body 加 transform ——
      body 一旦有 transform，站内 position:fixed 的导航会被拖进变换后的包含块、
      失去「浮在屏上」的行为；分开加则导航仍是真 fixed，同时与整页同一个比例尺。
      transform 不改布局盒 → 文档可滚动高度要另补：body padding-bottom = H×(scale−1)，
      H = main+footer 的布局高（由 HomeClient 写入 --jh-page-h，缺省 3942.14px 兜底）。
      media 起点取 1440（该宽度下 scale 恰好 = 1，逐像素与改动前相同——有 A/B 零差异证据）。
   ③ 底部水面波纹：footer 上叠一条「设计里那条水带」的高通纹理，soft-light 混合 + 横向流动。
      静帧不变的原因：纹理以中灰 128 为基准，soft-light 下中灰 = 恒等。
   ④ 两侧：设计自带的页边（内容列 44 设计单位 = 75.25px）与整页同一条 scale 一起放大，
      不再手工拼贴任何延伸带。
   ✗ 中间六大区块（三大核心产品 / AI 决策 / 易学书馆 / 术数大全 / 人生图谱 / 为什么选择）
      的 DOM、文案、排版、CSS 一行未动（改动前后 1440 截图逐像素比对：见 REPORT.md §5）。
   ✗ 手机端（≤842px）一行未动：本段所有规则都在 min-width 断点里或只作用于 PC 专属类名。
   ══════════════════════════════════════════════════════════════════════════════ */

/* ───────────── ① 7 层罗盘 ───────────── */
.jh-cmp-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  /* 只让「罗盘盒」和「控制胶囊」接收指针事件：
     不整块遮住 Hero（否则会挡掉 CTA 链接），但仍能靠 :hover 链显示控制胶囊 */
  pointer-events: none;
}
.jh-cmp-wrap .controls { pointer-events: auto; }

.jh-compass {
  /* 层盒直径：--jh-cmp-d-x 仅供验证时外部覆盖（截图扫描标定），缺省值 = 设计标定值 */
  --jh-cmp-d: var(--jh-cmp-d-x, calc(297.53 * var(--u)));
  /* 【V6.2 · 2026-09-24 · 业主目视提的「整组罗盘下移」】只加在 top 上 → 只改位置，
     ✗ 不改尺寸 / ✗ 不改缩放 / ✗ 不改横向位置（left 与 --jh-cmp-d 一字未动）。
     取值 56px 的依据（实测，见 FIX-COMPASS-Y.md §1–§2）：
       · 纯黑底盘（只留罗盘层、隐掉导航与所有 fixed/sticky）量得罗盘最外可见墨迹
         的「北向最高点」@1440 = y 27（判据：底盘原始亮度 > 3，与「最外有墨半径」同一条判据）；
       · 站内导航 nav.fixed 的下边界 @1440 = y 65.00；
       · ⇒ 现状是罗盘外沿压进导航带 38.00px —— 不是「接近」，是真重叠。
       · 下移 56.00px 后：冻结相位空隙 18.00px、最不利旋转相位 16.46px，两者都 ≥ 16px。
     ≥1440 断点里本组随整页 transform: scale(--sc) 一起放大，所以这条 56px 是「设计尺 px」：
     四档（1440/1920/2560/3840）折算回 1440 都是同一个 56.00。 */
  --jh-cmp-dy: 56px;
  --jh-gold-gain: 1.15;     /* 02–05 金线层增益（素材是半透明线稿 → plus-lighter 加色） */
  --jh-glow-gain: 2.4;      /* 07 弥散金光（α_max 仅 18，普通叠法看不见） */
  --jh-bloom-gain: 0.8;     /* 08 光晕（从设计图抠出的残差层） */
  position: absolute;
  /* 圆心：x = 画心中线 50% + 34.90px@1440（=20.406u），再 margin-left 回半个层盒；
          y = 262.83px@1440（=153.675u）− 半个层盒 + --jh-cmp-dy（【V6.2】整组下移，见上）。
          50% 与 .jh-hero-art 同宽 → 任何视口都同心 */
  left: calc(50% + calc(20.406 * var(--u)));
  top: calc(calc(153.675 * var(--u)) - var(--jh-cmp-d) / 2 + var(--jh-cmp-dy));
  margin-left: calc(var(--jh-cmp-d) / -2);
  width: var(--jh-cmp-d);
  height: var(--jh-cmp-d);
  pointer-events: auto;      /* 罗盘盒 = 控制胶囊的悬停触发区（盒 513×513，不压 CTA） */
  /* ✗ 这里不能加 filter：filter 会把本组变成隔离组，子层的 mix-blend-mode 就只能
     在本组透明底上混、不再与 Hero 底图相加（上一版踩过：金光变成一层压暗的纱）。 */
}
.jh-compass .jh-cmp-stack { position: absolute; inset: 0; pointer-events: none; }
.jh-compass img.jh-cmp-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;          /* 2800 → 层盒，等比，不裁不缩 */
  display: block;
}
/* 03–05：半透明金线稿 → plus-lighter 加色（01/02 两层继续停用）。
   01 外圈有明显断口，02 外圈虽闭合但本轮已回退，不作为动态外环。 */
.jh-compass .l3,
.jh-compass .l4, .jh-compass .l5 { mix-blend-mode: plus-lighter; filter: brightness(var(--jh-gold-gain)); }
/* 06：太极实心盘 → 普通 alpha（加色会把黑白分界糊掉） */
.jh-compass .l6 { mix-blend-mode: normal; }
/* 07：弥散金光 → 提亮 + plus-lighter + 7s 呼吸 */
.jh-compass .l7 {
  mix-blend-mode: plus-lighter;
  filter: brightness(var(--jh-glow-gain));
  animation: jh-cmp-breathe 7s ease-in-out infinite;
}
/* 08：光晕层 → plus-lighter + 径向遮罩，把加色收在罗盘范围内（区外逐位为 0） */
.jh-compass .l8 {
  mix-blend-mode: plus-lighter;
  filter: brightness(var(--jh-bloom-gain));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 25.54%,
        rgba(0, 0, 0, .72) 31.44%, rgba(0, 0, 0, .34) 36.35%, rgba(0, 0, 0, 0) 41.27%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 25.54%,
        rgba(0, 0, 0, .72) 31.44%, rgba(0, 0, 0, .34) 36.35%, rgba(0, 0, 0, 0) 41.27%);
}
/* 01–06：纯旋转，同心同径（业主拍板转速） */
.jh-compass .l3 { animation: jh-cmp-cw  180s linear infinite; }
.jh-compass .l4 { animation: jh-cmp-ccw 240s linear infinite; }
.jh-compass .l5 { animation: jh-cmp-ccw 300s linear infinite; }

/* ── 【FIX-PC-R5 · B · 2026-09-25】太极外缘「小圈」错乱的两处外科手术 ──────────────
   ─────────────────────────────────────────────────────────────────────────────
   诊断（全部实测，脚本/数字见 docs/fix-round5-20260925/，在 2800×2800 **原素材**上量）：
     ① 06_taiji_solid 的 alpha 在 r 284→294 素材px（= 1.82 页px）里从 242 一路掉到 0
        —— 一条 10 素材px 宽的半透明外缘；
     ② 05_inner_compass 的墨在该带内**仍然存在**（α 均值 89–96、角度覆盖 90–92%），
        而它在 r≈269–272 处被硬切过（|Δα| 13.4–16.7）→ 被切掉的内边界透过 06 的半透明外缘
        露出来，在太极边缘形成「发虚的一圈 + 一道偏移的淡弧 / 断口」。
     ③ 逐项排除（都有数字）：
        · **上一轮「01 层叠一份转 180°」(L1_DUP) 不是原因**：那一份的墨落在
          素材 r 1023–1293 = **页半径 185.9–235.0px**，与太极/内环区（页半径 ≤ 66px）
          **径向完全不重叠**，最小间距 119.9px —— 物理上不可能在太极附近产生任何像素。
          （另有开关对照渲染，差异 100% 落在页半径 > 180px 处，见报告 §2。）
        · plus-lighter 摩尔纹不是原因：亮度告缺在**素材自身的 alpha** 里就存在
          （在该带内 05 的 α 均值只有 89–96），加色混合只会变亮、不会造出双弧。
        · 508.83px 层盒降采样不是原因：羽化带是在 2800² 原素材上量到的，不是渲染产物
          （降采样只让对比度再掉 ~25%，是**放大**不是**根因**）。
   修法一（素材侧，见 b_fix06.py）：把 06 的羽化外缘改成设计里那种清晰边 ——
     · 只改 r 280…293.78 素材px 这一带内**像素的 alpha 取值**；
     · `nonzero-alpha 像素集合逐位不变`、`有墨外半径 293.784 → 293.784 不变`、
       `RGB 改动 0 字节`、`带外 max|Δ| = 0`、阴阳鱼/鱼眼/圆心/比例一律未动。
   修法二（CSS 遮罩）—— **实测后**被否决**，本仓库**不留这条规则**：
     试过给 `.l5` 加 `mask-image: radial-gradient(circle, transparent 0 14.547%, #000 14.839%)`
     （页半径 ≤53.39px 全透明），意图是把 05 在 06 收口带下的墨彻底挡掉。**它在 1440 档确实只动了
     1,562 个像素且全部落在页半径 49.5–54.6px**，但 `mask-image` 会让浏览器把该层改成另一条
     光栅化路径 → **2560 / 3840 档整个罗盘（页半径 3–249px）都被重新光栅化**：
       2560 档 罗盘盒内 325,280 个像素变化、max|Δ|=98
       （对照：把该遮罩关掉再拍一次，罗盘盒内只有 2,757 个像素变化 → 差异来源就是这条遮罩）
     ⇒ 与「只修错乱、别的一律不动」相悖，**按证据否决**，改为只做素材侧（修法一）。
     残留：06 收口带 r 288.3…293.78 素材px（= **0.90 页px**，改前 284…294 = 1.82 页px）仍会让
     05 的墨透出一点。**如实登记**在报告「还差什么」里，不再用带副作用的 CSS 手段去压。 */
.jh-compass .l6 { animation: jh-cmp-cw  360s linear infinite; }
@keyframes jh-cmp-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes jh-cmp-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes jh-cmp-breathe {
  0%   { opacity: .55; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.012); }
  100% { opacity: .55; transform: scale(1); }
}
.jh-compass.paused .jh-cmp-layer { animation-play-state: paused; }

/* 控制胶囊：DOM/参数与旧盘一致（同类名同结构，只把作用域从 .jh-wheel-wrap 换成 .jh-cmp-wrap） */
.jh-cmp-wrap .controls {
  position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: #080b0cd9; border: 1px solid #c6a06055; border-radius: 30px;
  padding: 10px 15px; display: flex; gap: 15px; align-items: center;
  font: 13px sans-serif; color: #d7bd80; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  transform: translateX(-50%) translateY(6px);
}
.jh-cmp-wrap:hover .controls,
.jh-cmp-wrap:focus-within .controls {
  opacity: 1; pointer-events: auto; transform: translateX(-50%);
}
.jh-cmp-wrap .controls button {
  background: #171717; border: 1px solid #806737; color: #dfc283;
  border-radius: 20px; padding: 5px 12px; cursor: pointer; font: inherit;
}
.jh-cmp-wrap .controls button:hover { border-color: #c6a060; color: #f0d79c; }
.jh-cmp-wrap .controls input { accent-color: #c6a060; }
.jh-cmp-wrap .controls input[type="range"] { width: 120px; vertical-align: middle; }

/* ───────────── ② PC 整页等比放大（≥1440） ─────────────
   为什么「逐块 transform」而不是「给 body 加 transform」：
     站内导航是 position:fixed（首屏透明浮屏）。一旦祖先有 transform，fixed 的包含块
     就变成那个祖先 → 导航会失去「浮在屏上」的行为。逐块加则导航仍是真 fixed。
   为什么 footer 要另外补一段 translateY：
     transform-origin 是**元素自己的左上角**。nav/main 的布局顶边都在 0，绕自己的左上角
     缩放 = 绕页面原点缩放 ✓；但 footer 的布局 top 是 main 的高度（3262.02px），
     只写 scale 会留在 3262 而不是 3262×scale → 与 main 的缩放内容重叠。
     所以补 translateY(布局top × (scale−1))，由 HomeClient 写入 --jh-foot-top。
     footer 自身再锁 margin-top:0（抵消 mt-auto），保证「布局顶 = main 高」与视口高无关。
   1440 档 scale 恰好 = 1 → 与改动前逐像素相同（REPORT.md §6 有 A/B 证据：2 个像素差 1 级）。 */
@media (min-width: 1440px) {
  html:has(.jh-home) { --sc: calc(100vw / 1440px); }

  html:has(.jh-home) nav.fixed,
  html:has(.jh-home) main:has(.jh-home),
  html:has(.jh-home) footer.jg-footer {
    width: 1440px;
    max-width: none;
    transform-origin: top left;
  }
  html:has(.jh-home) nav.fixed,
  html:has(.jh-home) main:has(.jh-home) { transform: scale(var(--sc)); }
  html:has(.jh-home) footer.jg-footer {
    transform: translateY(calc(var(--jh-foot-top, 3262.02px) * (var(--sc) - 1))) scale(var(--sc));
    margin-top: 0;
    /* 页脚内边距在源文件里写成百分比（18.92% / 2.87%）→ 百分比按**包含块宽度**解析：
       1440 档时包含块 = 页脚自己（1440）没问题；但页脚被锁成 1440 宽、包含块却是视口宽之后，
       1920 档会算出 363px 而不是 272.4px → 把页脚从 680.125px 撑到 785px、破坏与设计的同比例。
       这里按 1440 重新钉死（数值与源规则在 1440 档完全一致，1440 档 A/B 逐像素不变）。 */
    padding-top: calc(1440px * 18.92 / 100);
    padding-bottom: calc(1440px * 2.87 / 100);
  }
  /* transform 不改布局盒 → 文档高度得自己补，否则大屏上页面下半截滚不到 */
  html:has(.jh-home) body {
    padding-bottom: calc(var(--jh-page-h, 3942.14px) * (var(--sc) - 1));
    overflow-x: hidden;
  }
  /* main 是 flex-1：视口比内容还高时会被拉伸，把 footer 往下推 → 锁死不参与拉伸 */
  html:has(.jh-home) main:has(.jh-home) { flex: none; }
}

/* ───────────── ③ 底部水面波纹流动（≥1440，页脚宽度已锁 1440 的那档） ─────────────
   【素材来源 · 合规说明（业主铁律，逐条对应见 REPORT.md §4）】
     叠层用的就是页脚自己那张底图 public/home/footer-bg.webp（= 用户「九宫PC端底部最终版」），
     没有新素材、没有生成纹理、没有 AI 补图 —— 只是把**同一张图、同一比例、同一子像素相位**
     再画一遍并裁出水带那一条（clip-path）来做位移。
   【为什么静帧能 100% 一致】叠层的 background 与页脚底图是「同图、同尺寸、同位置」：
     t=0 时叠层画出来的像素 == 底图自身像素，盖上去等于没盖 → 逐像素相同（实测 max|Δ| = 0）。
     对比：早先用「独立裁出的小水带图 + 另存 webp」那版，因重采样/量化不同会差 max|Δ|=27；
     用「高通中灰 + soft-light」那版会改写画面 max|Δ|=56（两版都已废弃，数字留档 work/waterB.json）。
   【动效】只改 background-position（±4px / ∓2.5px，11s / 8.6s，关键帧首尾都回到 0）：
     水面相对自身位移 = 波纹流动；不做整块循环（实测水带首尾列差 mean 15.9 = 内部相邻列的 4.5 倍，
     循环会在画面里拉出一道设计里没有的竖缝 → ✗ 按铁律放弃）。
     ✗ 刻意不用 will-change / opacity / mix-blend-mode：它们会把本层提为合成层，
       实测会让页脚文字的抗锯齿跟着变（页脚其它区域出现 max|Δ|=81 的差）。 */
@media (min-width: 1440px) {
  html:has(.jh-home) footer.jg-footer { position: relative; }
  /* 【V6.3 · 2026-09-24 · 已迁移】原来挂在本元素 ::before/::after 上的水面两层，
     随「页脚底图换成底部图.png + 页脚盒从 680.125 收到 239 + 水带改按距页底口径」
     一起搬到 .jhf-art::before/::after（见文件末 V6.3 段）。
     这两条旧规则必须留成「不生成」——否则它们还会用旧 footer-bg.webp 画一遍旧水带、
     并带着旧的 clip-path(185.0488px 0px 442.4623px) 与新水带叠在一起。 */
  html:has(.jh-home) footer.jg-footer::before,
  html:has(.jh-home) footer.jg-footer::after { content: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   【V6.1 · 2026-09-24】业主看图后的三处外科手术（② ③ 在这里；① 在上面的罗盘段）
   ─────────────────────────────────────────────────────────────────────────────
   ① 罗盘外圈发灰 / 右侧·下方「没收口」→ 见上方 `.jh-compass`（--jh-g1: 1.90）
      与 `HomeCompassLayers.tsx` 的 `L1_DUP`（同素材第二份转 180° 拼成闭环）。
      处置清单：**只有 01_outer_orbit 的增益从 1.15 提到 1.90**；02–05 的增益按实测不动
      （02/03/04/05 的带 p99 = 148.5 / 148.5 / 226.7 / — 全部已 ≥ 设计口径 71.7 / 136 / 98，
        再提亮就是「超出设计」，与「看得见的范围与设计一致」相悖）。
   ② Hero 左栏文字容器：`width` 由 `360u`(615.672px) 收紧为 `max-content`(444.625px)，
      并给 h1 加 `white-space:nowrap` + 显式 `overflow:visible`。
      · 为什么：h1 第二行「看清真实处境。」的**墨迹**只到 x=518.14（像素实测 475），
        而 360u 的列宽让**容器的右边缘探到 x=690.91**，比罗盘盒左缘（x=500.48）
        还往右 190.43px —— 一个 615px 宽的文本框压在会转的金盘上（实测：文本区本身
        ink>6 的像素 = 0，即**没有**一个字被覆盖，但「文本框压着罗盘」这件事本身
        在窄一点的容器/宽一点的字体下随时会变成真截断）。
      · 改后：容器右缘 690.91 → 519.86（与罗盘盒的重叠 190.43px → 19.31px，
        即收掉 89.9%）；`nowrap` 保证任何字体度量下都不会折行成第三行。
      · ✗ 文字内容、字体、字号、字距、行高、颜色一律未改（改前改后该区域逐像素 0 差）。
   ③ 导航右侧那个「黄色小圆点」：**不是**导航自己的元素、也不是伪元素或主题开关，
      它是 `public/home/hero-bg.webp` 这张底图里**旧罗盘顶部那枚金色宝珠**（业主原图自带）。
      隐藏底图即消失（实测：该区域暖亮像素 810 → 164，164 是 📁 图标本身）。
      实测位置 x 1026–1068 / y 26–60（最大连通块 978px，中心 (1047,43)，峰值 RGB[255,250,225]）。
      设计图对应位置（设计坐标 (900,37)）是暗夜空、什么都没有 → 按「设计里是什么就做什么」
      用一层**只压这一点**的径向遮罩把它压回天空亮度。✗ 没删任何元素、✗ 没动底图像素
      （hero-bg.webp sha256 不变）、✗ 没盖住导航文字（遮罩在 .jh-hero-art 内、导航在其之上）。
   ───────────────────────────────────────────────────────────────────────────── */

/* ───────────── ② Hero 左栏文字容器（仅 PC 断点；<843px 手机端一行不进） ───────────── */
@media (min-width: 843px) {
  .jh-home .jh-hero-copy {
    /* 360u 是设计的一栏宽度，但 h1 最长一行只需要 444.63px —— 让容器贴合内容，
       既不再把「文本框」横跨到罗盘上，也不会比内容更窄（永远不会溢出自己的盒）。 */
    width: max-content;
    max-width: calc(360 * var(--u));   /* 兜底：绝不比设计栏宽 */
  }
  /* h1：每行都自带 <br/>，nowrap 只保证「一行就是一行」；overflow 显式声明为 visible，
     免得将来任何祖先/自身规则把它变成裁切盒。文字/字体/字号一字未改。 */
  .jh-home .jh-hero-copy h1 {
    white-space: nowrap;
    overflow: visible;
  }
}

/* ───────────── ③ 导航右侧黄点：旧底图顶珠遮罩 —— 【2026-09-24 已删除】 ─────────────
   这条 `.jh-hero-art::after`（中心页面 (1047,43)@1440、直径 90px、径向压暗到 rgba(2,4,7,.88)）
   是**专门为旧 `hero-bg.webp` 里那枚金色宝珠**设的：旧底图 = 夜空版山水 + 自带的大罗盘，
   罗盘顶珠落在该处，才需要把它压回天空亮度。

   底图已换成业主新给的「不带太极图」山水（`public/home/hero-bg.webp`，无罗盘、金色黄昏），
   该处现在是干净云层 —— 遮罩失去目标，反而在天空上**制造一个 90px 的暗斑**
   （实测：该处地图像素 mean=29.7 / p95=68 / max=185，被压到 ~5 → 肉眼可见）。
   因此整条删除。删除后 Hero 背景 = 新底图（罗盘盒以外逐像素等于新底图），
   也是本轮「差异只发生在罗盘盒内」验收的前提。
   ✗ 没有改导航、✗ 没有改罗盘、✗ 没有改左栏文字。 */


/* ══════════════════════════════════════════════════════════════════════════════
   【V6.3 · 2026-09-24】业主本轮五条：② 左右页边 158 通高延伸 · ① 页脚换
   「底部图.png」 · ④ 页脚收紧到设计口径 · ⑤ 水面保持动态波动
   ─────────────────────────────────────────────────────────────────────────────
   全部数字都是「设计尺 px」（@1440 舞台；≥1440 时整页 transform: scale(--sc)
   → 四档 1440/1920/2560/3840 自动等比，不需要第二套数值）。
   整块只包在 @media (min-width:1440px)：**843–1439 与手机端（≤842）一行未改**。

   ② 两侧页边 = 底部图的左右边缘列，通高延伸、上淡下浓
      · 素材：public/home/side-band-{l,r}.webp —— 直接把「底部图.png」最左/最右
        217.6 源列按**与页脚同一个配准比例** s = 1440/1983 = 0.7261724 等比缩到 158px
        宽（零拉伸、零重绘、零 AI），再**上下镜像拼成一个无缝 tile**，最后按页面高度
        叠上「上淡下浓」的纸色透明度斜坡（α 从 0.115 线性升到 1.0）。
        全部是真实像素 + 真实渐变，没有任何生成/重绘。
      · 画法：作为 .jh-home 自己的**背景层**（两层，左/右各一）——背景永远画在内容
        之下、自身 background-color 之上 → **✗ 不会盖住任何一个中间区块的像素**
        （中间六块的内容、卡片边、文字都完整保留在带子之上）。段底色改用
        「按宽度定位的纯色图层」只画 158…1282，0…158 让给延伸带。
      · Hero 的底图整幅铺满 0…1440，所以 Hero 段另用两条同源同相位的带子
        (.jh-hero-art::before/::after，z-index 1 → 在 Hero 底图之上、左栏文字
        z-index 8 之下) → 深色画心两侧回缩到 158，与设计「暗块内缩 159…1281」一致。
   ① 页脚底图 = 桌面「九宫PC端V3/底部图.png」(1983×793)
      · 配准（脚本 scripts/build_assets.py，数字见 out/assets-reg.json）：
        scale = 1440/1983（唯一能让画面铺满页脚 1440 宽且**零拉伸**的等比比例）；
        offset = -82.0575px（= 源行 113 × s），由「行包络 NCC 最大 + 水带必须落在
        真水面」的约束配准得到。CSS：background-size: 1440px auto（= 源尺寸 × s）。
      · 旧文件未删：public/home/footer-bg.webp 原样保留（备份也在
        D:/logs/v6-sides-footer-20260924/before/footer-bg.webp.bak）。
   ④ 页脚收紧：高 239px（= 设计页脚高）、贴页底；四栏/品牌/版权/免责**一条没删**，
      只重排到更紧的字号/行距（见 .jhf-* 规则）；山水卷压在文字之下的同一 239px 盒里，
      上面「上淡下浓」的纸色斜坡保证文字可读，水带 185…237 完全不上纸色。
   ⑤ 水面动效：与旧版同一套思路（同图、同尺寸、同位置画第二遍 + clip-path 只露水带），
      所以 **t=0 静帧与底图逐像素相同（max|Δ|=0）**；两帧差 100% 落在水带内。
      幅度仍按「看得出在动」保留（±4.0 / ±2.6px），✗ 没有为了凑 1–2px 把它降到看不见。
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  html:has(.jh-home) {
    --sf-side: 158px;              /* 设计页边（= 1248 档 137px × 1.1538） */
    --sf-mid: calc(100% - 316px);  /* 中央内容列 158…1282（1124 宽） */
    --sf-paper: #F5F2EA;           /* 与站内纸底同值 → 延伸带与纸面无接缝 */
    --sf-pageh: 3179px;            /* 【R8】页面设计高（main 2652.24 + 页脚 239 = 2891.24；随 Hero/中段 ×0.6 与七段内距统一下移） → 带子图像高（带子素材同批重制为 214×2891） */
    --sf-foottop: 2940px;      /* 【R8】页脚顶（main 布局高；原 3262.02 → 2652.24） */
    --sf-arth: 239px;              /* 页脚山水卷高 = 设计页脚高 */
    --sf-bg-src-off: 0px;          /* 【FIX-ROUND1·B1】底部图配准 offset：0（源行 0）；旧值 82.0575px 见下说明 */
  }

  /* ── ② 侧边延伸带：.jh-home 的两层背景（永远在内容之下） ── */
  html:has(.jh-home) .jh-home {
    background-color: transparent;
    background-image: url('/home/side-band-l.webp'), url('/home/side-band-r.webp');
    background-size: var(--sf-side) var(--sf-pageh), var(--sf-side) var(--sf-pageh);
    background-position: left 20px, right 20px;
    background-repeat: no-repeat, no-repeat;
  }
  /* 纸白区块：底色改成「只画 158…1282」的纯色图层 → 0…158 / 1282…1440 透出延伸带。
     盒模型、内边距、子项坐标一个字没动（只是背景不再画到两侧）。 */
  html:has(.jh-home) .jh-home > .jh-section {
    background-color: transparent;
    background-image: linear-gradient(var(--sf-paper), var(--sf-paper));
    background-size: var(--sf-mid) 100%;
    background-position: var(--sf-side) 0;
    background-repeat: no-repeat;
  }
  /* 深色 AI 段的位图（.jh-ai-bg 是空盒，无子元素、无 blend）→ 直接 clip 到内容列，
     ✗ 不缩放、✗ 不裁内容（文案在 left 195u=333px，安全） */
  html:has(.jh-home) .jh-ai-bg { clip-path: inset(0 var(--sf-side) 0 var(--sf-side)); }
  /* .jh-ai 自身那层深墨（rgb(7,16,19)）也必须只画内容列，否则它会盖住两侧延伸带
     （实测：y1300–1631 的 0…158 全被压成 rgb(14,14,14)、带子看不见）。 */
  html:has(.jh-home) .jh-home > .jh-ai {
    background-color: transparent;
    background-image: linear-gradient(#071013, #071013);
    background-size: var(--sf-mid) 100%;
    background-position: var(--sf-side) 0;
    background-repeat: no-repeat;
  }
  /* Hero 自身那层深墨同理（.jh-hero-art 整幅铺满，通常盖住它；这里只做一致性兜底） */
  html:has(.jh-home) .jh-home > .jh-hero {
    background-color: transparent;
    background-image: linear-gradient(#060a0c, #060a0c);
    background-size: var(--sf-mid) 100%;
    background-position: var(--sf-side) 0;
    background-repeat: no-repeat;
  }

  /* Hero：底图之上补两条同相位带子（Hero 底图是 100%/100% 整幅铺满，无法只裁背景）
     ══════════════════════════════════════════════════════════════════════════════
     【FIX-ROUND1 · 2026-09-24 · A1/A2/A3 致命项】这两条纸色带子**本轮停用**（content:none）。
     为什么（实测，不是估计）：
       · 结构矛盾：左栏文案左缘 = 44u = 75.25px，而深色画心左界 = 侧带右缘 = 158px
         → 主标题 55.7% 的字形落在浅色带子上（白字 vs 米底 对比 ≈1.49:1，等于不可读）。
       · 为什么不能「把文案右移」：罗盘可见墨迹（与「隐掉罗盘」两帧逐像素相减得到）
         在 h1 所在行带 y198–350 的**最左墨迹 x = 520**，而 h1 墨迹右缘已到 518.14
         —— 文案右移 1px 就会压到盘上（设计侧该行右缘 513、盘左缘 553.9，留 41px）。
       · 为什么不能「收窄版心」：中间六块内容列 = 1289.5px（越出画心各 82.8px），
         收窄到设计口径 ≈1000.4px 属 C2，业主明确要求先问再动。
       · 因此唯一不越界的修法 = 让首屏背景整幅为深色（业主指定口径：「让首屏文案所在的背景为深色」）。
         hero-bg.webp 在文案区（disp x75..519 / y198..350）的亮度：p50 = 60.3、p95 = 157、
         >185 仅 1.7% → 白字 #F5EFE3 对比 ≈9.4:1（同位置设计侧深底白字 ≈11:1 量级）。
     ✗ 没有动罗盘（尺寸/位置/图层/动效一字未改）、✗ 没有动中间六块、✗ 没有动手机端
     （本段只在 @media (min-width:1440px) 内）。带子素材与产出方式保留，可一行回退。
     ══════════════════════════════════════════════════════════════════════════════ */
  html:has(.jh-home) .jh-hero-art::before,
  html:has(.jh-home) .jh-hero-art::after { content: none; }

  /* ── ①④⑤ 页脚：高 239px、贴页底，山水卷压在同一盒里 ── */
  html:has(.jh-home) footer.jg-footer {
    aspect-ratio: auto;
    height: var(--sf-arth);
    min-height: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    /* 三层（上→下）：纸面（只 158…1282）· 左侧延伸带 · 右侧延伸带。
       带子的 background-position-y 取 -页脚顶 → 与 main 段那条带**像素连成一条**
       （同一张图、同一个页面坐标）。 */
    background-image:
      linear-gradient(var(--sf-paper), var(--sf-paper)),
      url('/home/side-band-l.webp'),
      url('/home/side-band-r.webp');
    background-size: var(--sf-mid) 100%, var(--sf-side) var(--sf-pageh), var(--sf-side) var(--sf-pageh);
    background-position:
      var(--sf-side) 0,
      left calc(-1 * var(--sf-foottop)),
      right calc(-1 * var(--sf-foottop));
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  html:has(.jh-home) footer.jg-footer > div.jhf-body {
    position: relative;
    z-index: 2;                        /* 文字在山水卷之上 */
    width: 1440px; max-width: none;
    height: 100%;
    padding: 0 var(--sf-side);
    box-sizing: border-box;
  }
  /* 文字区容器：四栏 + 底栏 + 免责，全部收在山水卷上部 */
  html:has(.jh-home) footer.jg-footer .jhf-grid {
    position: relative;
    top: 24px;
    padding: 4px 0 0;
    gap: 0;
  }
  html:has(.jh-home) footer.jg-footer .jhf-col { padding-left: 0; }
  html:has(.jh-home) footer.jg-footer .jhf-vline { top: 4px; bottom: auto; height: 148px; }
  html:has(.jh-home) footer.jg-footer .jhf-head { gap: 10px; }
  html:has(.jh-home) footer.jg-footer .jgf-markwrap { width: 26px; height: 26px; }
  /* 【FIX-FOOTER-LEI2 · 2026-09-25】金环徽标四栏统一：四栏环同径 24px，「雷」提到与栏题同字号 15px。
     上一轮（FIX-FOOTER-LEI）把环 46px→21px、字 15px→14px 后遗留三处：①「雷」墨高 13.00 比栏题 14.00 低 1.00px；
     ②①栏环 21px 比其余三栏环小（三栏是 SVG：路径外径 24.05px、含 0.81px 描边外缘 24.86px，像素实测 25.0px）；
     ③环心比栏题墨心低 3.125px。本轮按业主口径统一：
       · 环 24px  —— 与其余三栏环同径（环外缘 24.0 vs 25.0，同一尺寸档）
       · 字 15px  —— 与栏题同字号，墨高 13.75 vs 栏题 14.00（差 0.25px ≤ 0.5px）
       · 环/字号 = 24/15 = 1.600（设计基准《九宫底部设计图》环 49.5÷字墨 31 = 1.597，同一口径的 1.60 档）
       · margin-top -4.625px —— 实测反推：槽顶 3267.9063 + 24/2 + mt = 栏题墨心 3275.2813 ⇒ mt = -4.625
         ⇒ 环心 - 栏题墨心 = 0.000px（上一轮 3.125px 已消）
     1.4px 描边、槽 .jgf-markwrap 26×26、品牌金 #B08A3C 一律未改（版式靠槽保住）。 */
  html:has(.jh-home) footer.jg-footer .jgf-mark { width: 24px; height: 24px; font-size: 15px; margin-top: -4.625px; }
  html:has(.jh-home) footer.jg-footer .jgf-markwrap:has(.jgf-mark) { display: flex; align-items: flex-start; justify-content: flex-start; }
  /* 【R4-①·2026-09-25】②③④栏 SVG 徽标环心对齐栏题墨心（①栏上一轮已由 .jgf-mark 的 margin-top 对齐）。
     实测反推：槽顶 3267.9063 + 26/2 = 3280.9063（改前②③④栏环盒心）→ 目标 = 栏题墨心 3275.2813
     ⇒ margin-top = -5.625px（1/64px 网格上可精确表示，与①栏环盒心 3275.2813 逐位相同）。
     槽 .jgf-markwrap 仍 26×26（版式不变）；SVG 盒上移 5.625px，环外缘 25px 仍在页脚裁剪边界内。 */
  html:has(.jh-home) footer.jg-footer .jgf-markwrap > svg { margin-top: -5.625px; }
  html:has(.jh-home) footer.jg-footer .jhf-title { font-size: 15px; line-height: 16px; }
  html:has(.jh-home) footer.jg-footer .jhf-latin { margin-top: 1px; font-size: 7px; line-height: 8px; }
  html:has(.jh-home) footer.jg-footer .jhf-rule { margin-top: 2px; width: 26px; height: 1px; }
  html:has(.jh-home) footer.jg-footer .jhf-list { margin-top: 2px; padding-left: 0; }
  html:has(.jh-home) footer.jg-footer .jhf-item {
    font-size: 12px; line-height: 14.2px; padding-left: 9px;
  }
  html:has(.jh-home) footer.jg-footer .jhf-bar { margin-top: 3px; }
  html:has(.jh-home) footer.jg-footer .jhf-brand { padding-left: 0; gap-x: 12px; }
  /* 【2026-10-14】PC 首页底部图：按业主标注移除品牌文字「九宫八卦」，
     仅隐藏底栏品牌名，不动印章、标语、版权、四栏和山水素材；内页不受影响。 */
  html:has(.jh-home) footer.jg-footer .jhf-name { display: none; }
  html:has(.jh-home) footer.jg-footer .jhf-name { font-size: 16px; }
  html:has(.jh-home) footer.jg-footer .jhf-tag,
  html:has(.jh-home) footer.jg-footer .jhf-copy { font-size: 12px; line-height: 16px; }
  html:has(.jh-home) footer.jg-footer .jhf-note {
    margin-top: 2px; padding-bottom: 0; font-size: 11px; line-height: 13px;
  }

  /* 山水卷（.jhf-art）= 同一 239px 盒里的底层图 + 上层水波动效
     ══════════════════════════════════════════════════════════════════════════════
     【FIX-ROUND1 · 2026-09-24 · B1 页脚山水「等于没画出来」】
     改前两处根因（都可复算）：
       ① **配准错了**：旧 offset = -82.0575px → 只取底部图（1440 宽后 576 高）的行 82…321；
          而设计基准的「山水长卷」（设计 y1674–1872 = 同尺 1931.6–2160，高 228.5）对应的是
          底部图的**行 0…239**。判据 = 低频（GaussianBlur 8）二维 NCC：
             offset 0    → NCC 0.6175   ← 最优
             offset -82  → NCC 0.2329   （旧值，只有最优解的 38%）
          （模糊半径 0/3/8 三档一致：0.369 / 0.513 / 0.618 vs 0.135 / 0.189 / 0.233）
       ② **纸色渐变把它盖死**：`rgba(245,242,234,.97) 0% → .92 52% → .30 68% → 0 73%`
          → 盒内 0…174.5px（73%）近乎纯纸白，实测 y3262–3410 逐点 (244,240,231)。
     本轮改法：① offset 归 0；② 纸色斜坡改为「只在四栏文字所在的上段留一层薄纱」：
        .78 0% → .52 34% → .12 58% → 0 70%（= 盒内 167px 以下完全不上纸色）。
     实测（1440）：可见山水高度 64px → 190px；盒内主色由 (244,240,231) 变为山水实像素。
     ✗ 没有删任何链接/品牌/版权；✗ 没有改素材像素；✗ 没有动罗盘/手机端。
     ─────────────────────────────────────────────────────────────────────────────
     【FIX-FOOTER-VEIL · 2026-09-25】整卷纸色渐变遮罩**取消**。
     依据：线上 `footer-bg-v3.webp` 与设计文件夹 `底部图.png` 是逐像素同一张
     （corr 1.0000 / mean|Δ|=0.00，都是 1983×793）—— 亭台、飞鸟、太阳光晕、瀑布
     **全部画在图上**，改前只是被这层纸色（0.70@0 → 0.46@30% → 0.18@58% → 0@72%）
     洗淡了：改前对比度保留率 飞鸟 0.757 / 光晕 0.884 / 亭台左 0.896 / 亭台右 0.978。
     改法：本层只留底图一层；`background-size/position` 与改前**逐字相同**
     （100% auto + center calc(-1×--sf-bg-src-off)）→ 画面倍率、配准、露出范围一律不变
     （页脚高 239、内容线 220.61–1219.39、面板线 159.05–1280.95 都未动）。
     文字可读性改由下面那条 `footer.jg-footer::before`「四条局部稳定带」负责。
     ══════════════════════════════════════════════════════════════════════════════ */
  html:has(.jh-home) footer.jg-footer .jhf-art {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background-size: 100% auto;
    background-position: center calc(-1 * var(--sf-bg-src-off));
    background-repeat: no-repeat;
    }
    html:has(.jh-home) footer.jg-footer .jhf-art[data-bg-ready="true"] {
    background-image: url('/home/footer-bg-v3.webp');
    }

  /* ── 【FIX-FOOTER-VEIL】页脚文字稳定层：四条「文字行带」的局部纸色带（不是整带遮罩） ──
     为什么需要：遮罩取消后文字直接压在山水实像素上。逐字形像素实测（字形像素的局部背景
     vs 该文字颜色，WCAG 相对亮度）：「无遮罩」状态下 标语 min 2.63、©行 min 3.02、
     免责 min 1.80（免责那行改前就已是 1.80 —— 遮罩在行 172 以下早就是 0，与本次无关）。
     为什么「局部」：页脚只有四处行带真的有字，其余行带（含山水主景）一律 0 遮罩。
     横向 = 两层 mask（各带自己的 size/position → 各自的行带范围 + 各自的左右淡出）：
       M1 rows 0–121   x 206→226 淡入 · 1134→1158 淡出（上部两条带；文字墨迹最左 x=217.61）
       M2 rows 133–193 x 290→330 淡入 · 1134→1158 淡出（下部两条带；该两带内最左墨迹 = 品牌印 x=307）
       → 左右页边 x<206 / x>1158 全域零遮罩：瀑布 x160–225、亭台左 x80–139、
         亭台右 x1296–1440 的对比度保留率与「完全无遮罩」完全相同（1.0204 / 1.0228 / 1.0182）。
     纵向 = 四条 px 停点的带（盒高固定 239px → 1440/1920/2560/3840 四档同一套值）：
       B1   0– 41px α .34 → 栏题(行 4–20) + 英文小字(行 21–29)
       B2  86–120px α .10 → 链接末两行(行 88–117)：只需把「帮助中心」那格 4.22 抬过 4.5
       B3 134–172px α .45 → 底栏 品牌/标语/©/社交图标(行 142.9–162.9)
       B4 164–192px α .55 → 免责声明(行 171.4–184.4)：把该行 min 从 1.80 抬到 ≥4.5 的最小 α
     实测（1440）：页脚 34 个可量测字形块（33 个文字块 + 金环徽标「雷」）：
       改前 5 行 min<4.5 / 2 行 p5<4.5  →  改后 2 行 min<4.5（徽标「雷」+ ABOUT US）/ 1 行 p5<4.5（徽标「雷」）。
       即 33 个文字块里 32 块 min≥4.5、33 块 p5≥4.5；未过的两块见
     FIX-FOOTER-VEIL.md「两处未能达标及其原因」（金环徽标「雷」= 金压金，任何纸色层都救不了；
     ABOUT US 有 7 个像素压在「雷」金环上，而金环画在本稳定层之上）。
     ✗ 未改字号/字色/文案/列结构/页脚高；✗ 未碰 .tsx / 素材 / i18n；本段只在 ≥1440 内。
     ══════════════════════════════════════════════════════════════════════════════ */
  html:has(.jh-home) footer.jg-footer::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background-image:
      linear-gradient(to bottom,
        rgba(245,242,234,0) 0px, rgba(245,242,234,.34) 6px,
        rgba(245,242,234,.34) 31px, rgba(245,242,234,0) 41px),
      linear-gradient(to bottom,
        rgba(245,242,234,0) 86px, rgba(245,242,234,.10) 90px,
        rgba(245,242,234,.10) 116px, rgba(245,242,234,0) 120px),
      linear-gradient(to bottom,
        rgba(245,242,234,0) 134px, rgba(245,242,234,.45) 142px,
        rgba(245,242,234,.45) 163px, rgba(245,242,234,0) 172px),
      linear-gradient(to bottom,
        rgba(245,242,234,0) 164px, rgba(245,242,234,.55) 171px,
        rgba(245,242,234,.55) 185px, rgba(245,242,234,0) 192px);
    background-repeat: no-repeat;
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 206px, rgba(0,0,0,1) 226px,
        rgba(0,0,0,1) 1134px, rgba(0,0,0,0) 1158px),
      linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 290px, rgba(0,0,0,1) 330px,
        rgba(0,0,0,1) 1134px, rgba(0,0,0,0) 1158px);
    -webkit-mask-size: 1440px 121px, 1440px 60px;
    -webkit-mask-position: 0px 0px, 0px 133px;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 206px, rgba(0,0,0,1) 226px,
        rgba(0,0,0,1) 1134px, rgba(0,0,0,0) 1158px),
      linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 290px, rgba(0,0,0,1) 330px,
        rgba(0,0,0,1) 1134px, rgba(0,0,0,0) 1158px);
    mask-size: 1440px 121px, 1440px 60px;
    mask-position: 0px 0px, 0px 133px;
    mask-repeat: no-repeat, no-repeat;
  }
  /* ⑤ 水面两层位移（同图/同尺寸/同位置画第二遍 + 只露水带）
     水带 = 页脚盒 y 185.0488…237.6627（高 52.61px）
     【FIX-ROUND1·B2/B3】配准归 0 后，这 52.6px 落在底部图的**行 185…238**：
       与设计侧独立量到的水线一致 —— 设计长卷（1440×239 同尺）逐行垂直差分 |d/dy| 的
       下段强边在行 203–206、行均亮在行 192 由暗转亮；PROBLEMS P19 也把设计水线读在
       「段内 y≈125 / 距段顶 73.2–73.5%」= 同尺 y2115 → 长卷行 192。
       → 本层的可见区间与设计的**真水面**对齐（改前因配准错 82px，动的是行 368…440，不是水面）。
     ✗ 不动画幅（±4.0 / ±2.6px 保留）、✗ 静帧逐像素等于底图（同图同尺寸同位置，t=0 max|Δ|=0）。
     B3：background-size 由 1440px auto 改 100% auto —— 1440 档两者等价（盒宽 1440），
       但 ≥1441 档盒宽被锁 1440、整页 transform:scale(--sc) 放大 → 100% 随舞台一起放大。 */
  /* ⑤ 水面两层位移 —— **【FIX-PC-R5 · A · 2026-09-25】已整条删除（业主：取消水波动效）**
     ─────────────────────────────────────────────────────────────────────────────
     改前：`.jhf-art::before/::after` 两层「同图/同尺寸/同位置画第二遍 + clip-path 只露水带」
     挂在页脚盒 y 185.0488…237.6627（高 52.61px），跑 jh-water-drift-a/b（9.5s / 7.3s linear infinite）。
     本轮处置（✗ 不留动画属性、✗ 不留空图层）：
       · 两层伪元素的**全部声明删除**（含 clip-path 与 url），只留 `content: none`
         —— 伪元素不再生成 → 渲染树里没有任何多余层（真删除，不是「藏起来」）；
       · 两条 `animation:` 声明删除；
       · `@keyframes jh-water-drift-a / -b`（旧 11s/8.6s ease-in-out 那对与本轮 9.5s/7.3s linear 那对）
         **全部删除**（全仓已无引用，见下方 C5 校验）；
       · `@media (min-width:1440px) and (prefers-reduced-motion: reduce)` 里的「水面豁免压制」两条
         **一并删除**（那是为「永不停」服务的，静帧后不再需要）。
     为什么删掉后**画面一格都不变**（这是本项的验收依据，不是推断）：
       这两层的 background 与页脚底图是「同图、同尺寸、同位置」——t=0（也就是 animation-delay:0
       那一帧）时叠层画出来的像素 == 底图自身像素，盖上去等于没盖。历轮实测 t=0 帧 max|Δ| = 0
       （FIX-ROUND1 起的同一结论，数字留档 work/round4/water-frames.json）。运动中的帧才会位移。
       ⇒ 静帧化之后，水面的**位置 / 高度 / 与底图的关系**由底图那一层原样承担，
          `.jhf-art` 的 background-size/position、页脚 239px 盒、四条文字稳定带一律未动。
     ✗ 未动底图/素材像素、✗ 未动页脚版式与文案、✗ 未动罗盘与中段六块、✗ 手机端一行不进。 */
  html:has(.jh-home) footer.jg-footer .jhf-art::before,
  html:has(.jh-home) footer.jg-footer .jhf-art::after { content: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   【FIX-ROUND1 · 2026-09-24】按「第三轮对比」逐项修：D1 Hero 关键词行 / D2 多余浮层
   ─────────────────────────────────────────────────────────────────────────────
   全部规则只在 @media (min-width: 843px) 里（手机端 ≤842 一行不进）；
   ✗ 未改罗盘（.jh-compass / HomeCompassLayers.tsx 一字未动）、
   ✗ 未改中间六块的内容/文案/图片/排版、✗ 未动 i18n 相关文件、✗ 未部署。
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 843px) {

  /* ── B1 配套：页脚文字可读性（山水露出来后，浅色文字要跟着调深） ──
     改前这些文字压在「97% 纸色薄纱」上（≈纯纸），现在直接压在山水实像素上：
     实测字形像素局部背景亮度 p50 = 229（小字英文 7px / 品牌标语 / 版权 rgb(111,105,93)、
     免责声明 rgb(138,132,120)），按 WCAG 相对亮度算：
       rgb(111,105,93) on 229 → 4.2:1（12px 正文未达 4.5:1）
       rgb(138,132,120) on 229 → 2.9:1（未达）
     处置：只把这两个「次要/最弱」文字令牌在**首页页脚范围内**调深到 #4A453A（74,69,58）
     → 同一背景下 7.3:1（达 AA 4.5:1 要求）。主文字 rgb(36,35,31) 未动（12.7:1）。
     ✗ 没有删链接/品牌/版权、✗ 没有改字号（字号是 V6.3 定的）、✗ 没有动其它页面
     （选择器带 html:has(.jh-home) footer.jg-footer，本文件也只在首页被引入）。 */
  html:has(.jh-home) footer.jg-footer {
    --jg-text-secondary: #4A453A;
    --jg-text-faint: #4A453A;
  }

  /* ── D2：隐藏设计里没有的两处浮层（确认后隐藏，不删组件、可一行回退） ──
     ① 右侧竖排金文案 `.jh-side-copy`（2 列，PROBLEMS P15）：
        设计右侧页边（x1282..1440）金色像素 = 0（程序：设计金色像素 x 最大值 = 1111 design px
        = 面板右缘）→ 线上 x1322/y150.5 与 x1363/y150.5 两条竖排是设计里没有的。
     ② 全站吸底金色浮窗「专家解析」（`FloatingExpertButton.tsx`，PROBLEMS P16）：
        fixed right-0 top-1/2，1440 下 x1402..1440 y382..518，实色金 rgb(187,153,86)
        → 设计右侧页边无任何浮窗/按钮。
     两处都用 CSS 在本页隐藏：组件与其它页面（工具页）保持原样，✗ 没删任何元素。
     用 [title="专家解析"] 选中（比 Tailwind 类名稳，类名会被重构）。 */
  html:has(.jh-home) .jh-home .jh-side-copy { display: none; }
  html:has(.jh-home) button[title="专家解析"] { display: none; }
}

/* ─────────── 【FIX-ROUND1 · B4】页脚版式：往设计的「居中单轴」靠 ───────────
   设计页脚（PROBLEMS P17）：品牌标**居中**（x≈720）、链接**横排一行居中**（8 条）、
   版权**居中**、社交 4 圆**居中**、菱形饰件居中；
   线上：品牌在**左下**（x158）、四栏链接（x158/439/720/1001 各 281 宽）、版权**右下**（x895.6）、
   社交 4 个**右下**（x1142/1182/1222/1262）。
   本轮能做的：把底栏（品牌 + © + 社交）从「左右贴边」改为**居中一条轴**（= 设计口径）。
   本轮做不了的（如实登记，需业主定）：设计与线上**链接数 8 : 34**，
   业主口径「✗ 不删链接」→ 34 条无法压成设计的一行居中 8 链接；四栏结构保留。
   ✗ 没有删任何一个链接/品牌/版权元素，✗ 没有改字号，✗ 没有动山水卷。 */
@media (min-width: 1440px) {
  html:has(.jh-home) footer.jg-footer .jhf-bar { justify-content: center; gap: 34px; }
  /* 9.8% 的左缩进是「躲开旧注册下左下角松石/小舟笔墨」用的；配准归 0 后那片笔墨
     落在盒内 y185 以下的水带里，底栏（盒内 y136–169）不再压到它 → 收缩进改为居中。 */
  html:has(.jh-home) footer.jg-footer .jhf-brand { padding-left: 0; justify-content: center; }
}

/* ─────────── 【FIX-ROUND2 · 2026-09-24】第二轮：逐项复测后，**有权改**的几处（✗ 不部署）───────────
   本轮复测结论见 FIX-ROUND2.md：第一轮 A1/A2/A3/P04/B1/B2/B3/C1/D1/D2/D3 全部**真落地**
   （逐项数字见报告 §1），但复测同时暴露两件事：
   ① 上一轮修 A1（首屏改整幅深色）在 1440 下**新引入**了一处不可见文字：导航 Logo 的 ☯；
   ② 设计里「首页」那条激活下划线，线上一直没有；
   ③ 第一轮 D3 的「最小字号」普查漏了页脚（页脚英文小字实测 7px）；④ 第一轮 D1 补回的关键词行有 2 条小字 <AA。
   下面四处**只改颜色 / 只加一个 ::after / 只抬字号**：✗ 不新增元素、✗ 不动任何几何、✗ 不碰手机端。 */

/* ── R2-1 · 导航「当前页」金色下划线（设计有 · 线上缺 → PROBLEMS P22 / ELEMENT-TABLE §2「激活态」）──
   设计侧证据（程序量测，非目视）：设计图 1248 档 **行 40–41、x 384..403** 有一条**连续金色横条**
   （20×2 design px = 23×2.3 同尺 px）；其正上方 x384..403 正是设计第 1 个菜单项「首页」的列投影
   （同尺 x ≈440..468）；横条上下（行 33–39 / 42–49）全为深底（max < 78）→ 不是文字笔画。
   线上侧：8 个菜单项**一个激活态都没有**（DOM 实测无下划线 / 无高亮类）。
   位置对齐（DOM）：线上「首页」链接盒 x621.2 y22 w28 h20 → 横条左右各内缩 3px（渲染色块 x624..645 宽 22
   ≈ 设计 23）、文字盒顶 +24px（渲染 y46..47 ≈ 设计 y46.2..47.3）、厚 2.3px（= 设计 2.3px）。
   颜色：用站内既有金色令牌 --color-gold-300（设计采样偏淡 (217,214,160)，见报告 §2）。
   断点取 ≥1024px：实测 843–1023px 下**桌面菜单不渲染**，此时唯一可见的「首页」是底部栏项
   （x6 y73 52×27.3），若把本规则放到 843px 会误画到那条底部栏上。
   ✗ 不改菜单 IA/顺序/文案；:not(:has(span)) 用来排除同 href="/" 的 Logo 链接。 */
@media (min-width: 1024px) {
  html:has(.jh-home) nav.fixed a[href="/"]:not(:has(span)) { position: relative; }
  html:has(.jh-home) nav.fixed a[href="/"]:not(:has(span))::after {
    content: "";
    position: absolute;
    left: 3px; right: 3px; top: 24px; height: 2.3px;
    border-radius: 2.3px;
    background: var(--color-gold-300, #C9A85B);
    pointer-events: none;
  }
}

/* ── R2-2 · 导航 Logo「☯」在深底上不可见（1440 下是上一轮 A1 的回归；900–1280 下改前就已如此）──
   量测（同一套「字形像素 × 其局部背景亮度」口径，p50）：
     W=1440 改前(预第一轮构建)：☯ 字形 297px，局部背景 **240.2** → **13.83:1**（纸色页边）
     W=1440 本轮：              ☯ 字形 246px，局部背景 **8.7**   → **1.27:1**（A1 后整幅深色）
     W=900/1024/1280 改前：     局部背景 8.3–8.7 → **1.27:1**（这几个宽度本来就已经不可见）
     W=843 改前：              局部背景 7.9   → **1.27:1**
     → 改后（#D6C9AE）W=843/900/1024/1280/1440 全部 **12.18–12.24:1**。
   设计侧：Logo「徽记」在设计图 design x210..222 / 行 23..31 是**金色**（最亮像素 (254,230,192)），
   且线上同排的「九宫八卦」也是金 (138,112,32) → 该元素本应为金，不该是近黑。
   取**站内导航里已有**的淡暖金 rgb(214,201,174) = #D6C9AE（同一导航里 🔍速查 / 🌐简体中文 用的色），
   与设计徽记的淡金色 (254,230,192) 同族。
   ✗ 没改 Nav.tsx（其中 {getT('site.name')} 属另一窗口的 i18n）、✗ 没改字号/位置/尺寸。 */
@media (min-width: 843px) {
  html:has(.jh-home) nav.fixed a[href="/"] > span:first-child { color: #D6C9AE; }

  /* ── R2-4 · Hero 关键词行的 4 条小字说明里，有 2 条**低于 WCAG AA**（该行是第一轮 D1 补回的）──
     量测（阈值 >40 的字形掩膜 × 其局部背景亮度 p50）：
       六爻起卦 7.91:1 / 梅花易数 5.10:1 / **八字大运 3.50:1** / **小六壬 3.70:1**
       （局部背景 p50 分别是 9.7 / 50.2 / 74.6 / 71.1 —— 右侧那两项正落在首屏背景较亮的一段上，
         而这条小字的现色 rgb(176,162,137) = #B0A289 是「暗字」，越亮处越低对比。）
     这 4 条之上的一级标签（13.68px, rgb(230,209,159)）实测 8.31–12.31:1，**不动**。
     → 只把这 4 条小字换成**站内导航里已有的**淡暖金 #D6C9AE（rgb 214,201,174，🔍速查/🌐简体中文/本轮 ☯ 同色）：
       改后 12.11 / 7.81 / **5.36** / **5.67**:1（mean 口径最差 5.13）→ 全部 ≥4.5。
     ✗ 不改字数/字号/位置/字距；✗ 不改一级标签；断点与 `.jh-hero-kw` 原规则一致（≥843px）。 */
  html:has(.jh-home) .jh-hero-kw a span { color: #D6C9AE; }
}

/* ── R2-3 · 页脚栏题上方的英文小字仍只有 7px（第一轮 D3「全页最小字号」口径的盲区）──
   第一轮 D3 的普查只跑了 `.jh-home *`，而页脚在 `footer.jg-footer` 下 → 当时「<10px 的项 = 0」
   对页脚不成立：`.jhf-latin`（ABOUT US / FUNCTIONS / RESOURCES / LEGAL）实测 **7px**（line-height 8px）。
   本处只把字号抬到 10px，**line-height 仍留 8px** → 行盒高度不变 → 版式零位移
   （复测：四个 .jhf-latin 的 rect 仍是 y3283.02 h8，八个 section 几何与 docH 3501 逐字段不变）。
   断点与它覆盖的原规则一致（原规则写在 ≥1440 块里）。
   ✗ 不改文案、✗ 不改字距/颜色、✗ 不改列结构（设计里根本没有这行英文，见报告 §4「待拍板」）。 */
@media (min-width: 1440px) {
  html:has(.jh-home) footer.jg-footer .jhf-latin { font-size: 10px; line-height: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   【FIX-ROUND4 · 2026-09-25】业主新指出两个硬问题后新增：① 统一中央内容列 ② 水面永久循环
   ─────────────────────────────────────────────────────────────────────────────
   ① 统一中央内容列 —— 设计基准 `无损图.png`（1248×1872，同尺 ×1.153846 → 1440）
      本轮**交叉量测**（4 套独立判据，脚本见 docs/fix-round4-20260925/）把历轮三个不一致的数
      （1000.4 / 1121.6 / 1124）拆开：设计里其实是**两条并列的线**，不是同一个对象：
        · 面板线（区块背景/卡片外框）= 设计 x138..1110（972 设计px）
          → 1440 档 159.05..1280.95（1121.9 宽；= 历轮的 1121.6/1124，差 2.4px 是量法阈值）
          判据 a：六段浅色卡片「卡片白 (247,244,236)」逐行外缘 mode = 138/1110，6/6 段一致
          判据 b：深色画心（hero y61..464）= 138..1110；中段深色带（m2/m3）= 138..1110
          判据 c：导航条深底 = 138..1110（竖边能量比 100%/100%）
        · 内容线（正文与内层卡片左缘）= 设计 x191..1057（867 设计px）
          → 1440 档 220.61..1219.39（998.8 宽；= 历轮的 1000.4，Δ1.6px）
          判据 d：段内深色内层卡 191..1057（m4 术数 / m5 图谱）；导航 Logo 起 197.9；
                  hero 文案左缘 195–209（均为设计px）→ 三点同族
      → 两条线的 CSS 值：93u = 93×1440/842 = 159.049px（面板线）· 129u = 220.618px（内容线）
        （u = min(100vw/842, 1440/842)，≥1440 档被 min() 封顶在 1.710213）
      **断点只放 ≥1440**：设计只有 1248 一档，唯一忠实映射就是 u 封顶的 1440 档；
      843–1439 档导航/页脚文字是固定 px（非 u 缩放）→ 收窄版心实测把页脚四栏挤到换行
      （1024 档 docH +183、4 个 .jhf-col 各溢出 11px）→ 该档**保持原状**，列在报告「剩余差异」里。
      ✗ 未改中段六块的文案/图片/内部排版逻辑（只改段外框 padding + 一条宽横幅的负外边距）
      ✗ 未改任何 .tsx / i18n 文件；全部规则在 @media (min-width:1440px) 内 → 手机端一行不进
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  /* ── ①-a 两条列线的定义（覆盖 FIX-ROUND1 的 158px / 1124 宽） ── */
  html:has(.jh-home) {
    --sf-side: min(11.0451307vw, 159.049406px);   /* 面板线 93u（设计 137.9 设计px ×1.153846） */
    --sf-mid: calc(100% - 318.0988px);            /* 面板宽 1121.9（原 1124） */
  }
  /* ── ①-b 内容线 129u：导航内层 / 页脚内容（原 44u = 75.25px） ──
     ⚠ 这里必须用 min(百分比, px) 的常数式：--u 定义在 .jh-home 上，而
       nav.fixed / footer.jg-footer 在 .jh-home **之外**（拿不到 --u → 声明会整条失效）。
       129/842×100 = 15.3206651vw ；129×1440/842 = 220.617577px */
  html:has(.jh-home) nav.fixed > div,
  html:has(.jh-home) footer.jg-footer > div {
    padding-left: min(15.3206651vw, 220.617577px);
    padding-right: min(15.3206651vw, 220.617577px);
  }
  html:has(.jh-home) footer.jg-footer > div.jhf-body {
    padding-left: min(15.3206651vw, 220.617577px);
    padding-right: min(15.3206651vw, 220.617577px);
  }
  /* ── ①-c 中段各段内容列 → 内容线（原 44u；七段实测全部 220.61..1219.39） ──
     ✗ 只改外框横向 padding：段内文案/图片/排版规则一个字没动 */
  html:has(.jh-home) .jh-section {
    padding-left: calc(129 * var(--u));
    padding-right: calc(129 * var(--u));
  }
  /* 易学书馆宽横幅 = 设计里那条**跨面板**的宽卡（138..1110）→ 单独拉回面板线
     （-36u = -61.57px；六段里只有它需要比内容线宽——它的固定宽子项合计 1117.9px） */
  /* 【FIX-PC-R8 · ⑤】原 -36u（= 面板线 159.05…1280.96，宽 1121.91）→ 归 0：
     横幅回到**内容线 220.61…1219.39（宽 998.78）**，与中段其余六块的左右边界完全一致
     （⑤「宽/对齐整齐」；依据：设计稿中段实心块左缘实测 design x 190…194 = 页 219.2…223.8）。
     ✗ 未动横幅内的文案/图片，✗ 未动 aspect-ratio（1488:239 → 整图完整可见、零裁切）。 */
  html:has(.jh-home) .jh-section.jh-library .jh-book-banner {
    margin-left: 0;
    margin-right: 0;
    min-height: 0;          /* 原 min-height:105u=179.57px 会把盒撑高（宽 998.78 时 1488:239 只给
                               160.44）→ 归 0 后盒子 = 精确等比、零 letterbox */
  }
  /* AI 段对话卡原来越界到右侧纸带 86.2px（数轮登记的 S7 根因之一）→ 收到内容线 */
  html:has(.jh-home) .jh-ai .jh-chat { right: calc(129 * var(--u)); }

  /* ── ② Hero 文案列：左缘 = 内容线；右缘收在罗盘墨迹左缘（本轮实测 519，红线不可动）以内 ── */
  html:has(.jh-home) .jh-hero-copy {
    left: calc(129 * var(--u));
    width: calc(175.4 * var(--u));           /* 300.0px（原 360u=615.7 的容器宽，实测盒 442.9） */
  }
  /* h1 36u=61.57px → 23.5u=40.2px：设计侧字形高 43.5（同尺）→ 63% 页面高不再压盘；
     2 行不变（「在关键时刻，」7 字 = 281px < 300px 盒宽），字号仍在可读性下限之上 */
  html:has(.jh-home) .jh-hero h1 { font-size: calc(23.5 * var(--u)); }
  /* 副标题字距 5u=8.55px(=字号 55.6%) → 1.2u=2.05px：设计侧是紧排（历轮 L3 登记） */
  html:has(.jh-home) .jh-hero .jh-hero-sub { letter-spacing: calc(1.2 * var(--u)); }
  html:has(.jh-home) .jh-hero-kw { max-width: calc(175.4 * var(--u)); }
  /* ── ③ Hero 主按钮 → 设计金胶囊 185×42（实测 184.98×41.9；原 199.67×50.78） ── */
  html:has(.jh-home) .jh-hero .jh-gold-btn {
    padding: calc(6.4 * var(--u)) calc(12.7 * var(--u));
  }
  /* ── ④ Hero 两侧纸边恢复 ──
     设计：深色画心内缩 138..1110，两侧 137.9/137.1 设计px 是纸带；文案本轮已移进画心内
     （左缘 220.61 > 面板左缘 159.05）→ 恢复纸带不再把白字压到浅底上（FIX-ROUND1 A1 的前提已变）。
     FIX-ROUND1 当时写的是 `content: none`（停用），此处按原素材/原几何恢复。 */
  html:has(.jh-home) .jh-hero-art::before,
  html:has(.jh-home) .jh-hero-art::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: url('/home/side-band-l.webp');
    background-size: var(--sf-side) var(--sf-pageh);
    background-position: left top; background-repeat: no-repeat;
  }
  html:has(.jh-home) .jh-hero-art::after {
    background-image: url('/home/side-band-r.webp');
    background-position: right top;
  }
  /* ── ⑤ 导航「当前页」激活条颜色 → 设计侧实测浅黄 (227,224,179)（R2-1 用的 --color-gold-300 偏深） ── */
  html:has(.jh-home) nav.fixed a[href="/"]:not(:has(span))::after { background: rgb(227, 224, 179); }

  /* ── ⑥ 水面动效 —— **【FIX-PC-R5 · A · 2026-09-25】整条取消，回静帧**
     业主本轮口径：「PC 端底部水波动态的效果取消」。
     删除清单（全部删净，✗ 不留动画属性、✗ 不留空图层、✗ 不留 reduced-motion 分支）：
       · 上面 @media(min-width:1440px) 里 `.jhf-art::before/::after` 的**全部声明**（含 clip-path/url）
         → 只剩 `content: none`（伪元素不生成）；
       · `@keyframes jh-water-drift-a` / `jh-water-drift-b`（旧 11s/8.6s ease-in-out 与本轮 9.5s/7.3s
         linear 两版）全部删除 → C5 校验：`grep -c 'jh-water-drift' src/` = 0 处引用；
       · 本节原有两条 `animation:` 覆盖 与 紧随其后的
         `@media (min-width:1440px) and (prefers-reduced-motion: reduce)`「水面豁免压制」块
         **一并删除**。
     为什么画面不变（静帧 = 原动画的 t=0 帧）：那两层与页脚底图同图/同尺寸/同位置，
     t=0 帧叠出来的像素 == 底图自身像素（历轮实测 max|Δ|=0）→ 删掉后逐像素等同。
     ✗ 不动 `.jhf-art` 的 background-size/position、✗ 不动页脚 239px 盒与四条文字稳定带、
     ✗ 不动素材像素、✗ 中间六块与手机端一行不进。 */
}

/* ══════════════════════════════════════════════════════════════════════════════
   【FIX-PC-R6 · 2026-09-25】业主三项指令（PC 端首页）· 全部量化口径见 FIX-PC-R6.md
     ① 左右两侧延伸带与页脚山水合为**同一幅连续山水**（消除「三幅图」/T 形硬缝）
     ② 把「边缘有山峦、切入自然」扩到**中间内容区左右两侧边缘（通高）**
     ③ 页脚四栏重排：关于我们+功能服务居左 / 资源中心+法律声明居右，中间腾出太极位
   ✗ 未碰任何 .tsx / .ts / i18n 文件；✗ 全部规则只在 ≥1440 → 手机端一行不进
   ─────────────────────────────────────────────────────────────────────────────
   几何（可复算）：
     · 带子素材 214×3502（原 158×3502 + 新增 56 列「切入列」）
       带体 158 列 ↔ 面板线 159.049406px（**原口径一字不改**）
       切入列 56 列 ↔ 页 159.049406…215.4168（落进中间内容区，内容线 220.6176 不受影响）
     · 带体↔内容列（x=159.049）两侧取自**同一张图的相邻列** → 竖直缝天然 = 0（实测见报告表③）
     · 纸面只画 215.4168…1224.5832（= 100% − 2×215.4168）→ 两侧各 56.37px 露出带子切入列
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  html:has(.jh-home) {
    --sf-bleed: 56.3674px;                        /* 切入列在页面上的宽（= 214/158×159.049406 − 159.049406） */
    --sf-bandw: 215.4168px;                       /* 带子素材在页面上的绘制宽 = 159.049406 + 56.3674 */
    --sf-paperw: calc(100% - 430.8336px);         /* 纸面宽 = 1440 − 2×215.4168 = 1009.1664 */
    --sf-paperx: 215.4168px;                      /* 纸面左缘 */
  }

  /* ── ② 带子绘制宽 → 含切入列：墨色在内容列内 56.37px 内淡出到纸色 ── */
  html:has(.jh-home) .jh-home {
    background-size: var(--sf-bandw) var(--sf-pageh), var(--sf-bandw) var(--sf-pageh);
  }
  /* ── ② 纸白区块只画「纸面宽」→ 两侧各露出 56.37px 的切入列（淡墨山峦缓入） ── */
  html:has(.jh-home) .jh-home > .jh-section {
    background-size: var(--sf-paperw) 100%;
    background-position: var(--sf-paperx) 0;
  }
  /* ── ② Hero：同一条带子（素材已含切入列）→ 首屏两侧同步「切入自然」 ──
     （原规则在文件末段，用 --sf-side 绘制；此处只把绘制宽换成 --sf-bandw） */
  html:has(.jh-home) .jh-hero-art::before,
  html:has(.jh-home) .jh-hero-art::after {
    background-size: var(--sf-bandw) var(--sf-pageh);
  }
  /* ── ① 页脚盒里那两层带子同步（页脚与 main 段仍是同一张图、同一页面坐标）；
     页脚纸面层同宽收进，保证「带子—纸面—带子」三者的水平关系全页一致。
     ✗ 未动 .jhf-art（底部图）的 size/position → 页脚山水与中央太极图逐像素不变 ── */
  html:has(.jh-home) footer.jg-footer {
    background-size: var(--sf-paperw) 100%,
                     var(--sf-bandw) var(--sf-pageh),
                     var(--sf-bandw) var(--sf-pageh);
    background-position: var(--sf-paperx) 0,
                         left calc(-1 * var(--sf-foottop)),
                         right calc(-1 * var(--sf-foottop));
  }

  /* ══ ③ 页脚四栏重排 ══════════════════════════════════════════════════════════
     改前（四等分，`lg:grid-cols-4`）：列左缘 220.61 / 470.30 / 720.00 / 969.69，列宽 249.69
       → 第 3 栏「资源中心」左缘正好压在太极圆心（实测太极圆心页 x = 737.8、外圈直径 ≈ 220px）。
     改后（六轨，列占 1/2/5/6 轨，空出 3/4 轨）：每轨 166.46
       → 列左缘 220.61 / 387.07 / 886.46 / 1052.93，列宽 166.46
       → 中间空档 = 553.54…886.46（宽 332.92），太极外圈 627.8…847.8 完全落在空档内
         （左余 74.26px / 右余 38.66px，太极位置一字未动）。
     ✗ 不删任何链接/文案（四个 .jhf-col 子项一个没动，只改 grid-column 与轨宽）
     ✗ 不改字号/字色/行距/列表内容；✗ 不动底栏与免责声明                      ══════ */
  html:has(.jh-home) footer.jg-footer .jhf-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  html:has(.jh-home) footer.jg-footer .jhf-col:nth-of-type(1) { grid-column: 1; }
  html:has(.jh-home) footer.jg-footer .jhf-col:nth-of-type(2) { grid-column: 2; }
  html:has(.jh-home) footer.jg-footer .jhf-col:nth-of-type(3) { grid-column: 5; }
  html:has(.jh-home) footer.jg-footer .jhf-col:nth-of-type(4) { grid-column: 6; }
  /* 竖金线：改前 25/50/75%（第二条正好落在太极圆心上）→ 改后 16.667/33.333/66.667/83.333%
     （四个内部栏界；对称于 50%，正中一条不再穿太极）。
     前三条是 TSX 的行内 style（left:25%/50%/75%），必须 !important 覆盖；
     第四条用 .jhf-grid::after 生成（✗ 不改 .tsx）。 */
  html:has(.jh-home) footer.jg-footer .jhf-vline { top: 4px; height: 148px; bottom: auto; }
  html:has(.jh-home) footer.jg-footer .jhf-vline:nth-of-type(1) { left: 16.667% !important; }
  html:has(.jh-home) footer.jg-footer .jhf-vline:nth-of-type(2) { left: 33.333% !important; }
  html:has(.jh-home) footer.jg-footer .jhf-vline:nth-of-type(3) { left: 66.667% !important; }
  html:has(.jh-home) footer.jg-footer .jhf-grid::after {
    content: ""; position: absolute;
    left: 83.333%; top: 4px; height: 148px; width: 1px;
    background: var(--jg-brand-line); pointer-events: none;
  }
  /* 六轨后列变窄（166.46）：栏题/列表文字先按宽度收紧，避免换行把页脚撑高。
     ✗ 只动字号与行距的**上限**（均在原值以内），✗ 不动文案 */
  html:has(.jh-home) footer.jg-footer .jhf-col { padding-left: 0; }
  html:has(.jh-home) footer.jg-footer .jhf-head { gap: 10px; }
  html:has(.jh-home) footer.jg-footer .jhf-list { padding-left: 0; }
  html:has(.jh-home) footer.jg-footer .jhf-item {
    white-space: nowrap; overflow: visible;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   【FIX-PC-R8 · ②⑤ · 2026-09-25】中段（AI 决策段）重建压缩 + 中间各区块对齐
     ② 中段高度 ×0.6：208u → 124.8u（355.72 → 213.43px@1440）；底图换成业主指定的
        「九宫PC端V3/中间图.png」重建件（纯裁切 + 等比，见 docs/fix-round8-20260925/a1_mid_asset.py）。
        段内两块（文案 / 对话卡）随之压缩纵向间距，保证**不溢出、不被裁**（数字见报告 §1②）。
     ⑤ 中段七段的块边界做成整齐的（业主：图大的大小的小、上下乱七八糟）：
        统一 —— 段顶→标题 23u（原 6u/10u/13u/4u/23u 五种混用）
                标题→内容  14u（原 .jh-head.compact 11u / 普通 14u 两种）
                内容→段底  23u（原 12u/20u 及 min-height 兜底造成的 70.17px 三种）
        ⇒ 改后七段全部 39.33 / 23.93 / 39.33px（= 23u / 14u / 23u @1440），逐段实测见报告 §5。
        ✗ 不动任何段内文案、图片、字号、行距；✗ 不动页头/页脚/手机端（整块只在 min-width:843px）。
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 843px) {
  /* ── ② 中段高度再次缩减五分之二：124.8u → 74.88u ── */
  .jh-ai { height: calc(74.88 * var(--u)); }
  /* ── ② 段内文案块：原 top 37u → 12u（总高 188.95px < 213.43px，留 24.5px 余量） ── */
  .jh-ai-copy { top: calc(12 * var(--u)); }
  /* ── ② 段内对话卡：原 top 26u → 6u，卡内三处间距按 0.6 收紧（✗ 文案一字未改） ── */
  .jh-chat { top: calc(6 * var(--u)); }
  .jh-chat-panel { margin-top: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); }
  .jh-chat-title { margin-bottom: calc(5 * var(--u)); }
  .jh-chat-cols li { padding: calc(1.5 * var(--u)) 0; }
  .jh-chat-cols p { margin: calc(4 * var(--u)) 0; }

  /* ── ⑤ 七段统一内距（上 23u / 下 23u）＋ 取消各段自己的 padding / min-height 兜底 ── */
  .jh-home > .jh-section { padding-top: calc(23 * var(--u)); padding-bottom: calc(23 * var(--u)); }
  .jh-section.jh-position,
  .jh-section.jh-lifeq,
  .jh-section.jh-tools,
  .jh-section.jh-life,
  .jh-section.jh-trust { padding-top: calc(23 * var(--u)); padding-bottom: calc(23 * var(--u)); }
  .jh-section.jh-library,
  .jh-section.jh-tools,
  .jh-section.jh-life,
  .jh-section.jh-trust { min-height: 0; }
  /* ── ⑤ 标题→内容一律 14u（.jh-head.compact 原 11u） ── */
  .jh-section .jh-head,
  .jh-section .jh-head.compact { margin-bottom: calc(14 * var(--u)); }
}


/* ══ 【FIX-PC-R8】≥1440 的收尾（其余规则全部沿用 R6/R7 原样） ══════════════════
   ① Hero 的 .jh-hero-art 在 ≥843 已上移 91.4525px（= 53.47u @1440），而
      .jh-hero-art::before/::after 是**页坐标**的延伸带（背景图 214×2891，1:1 对齐页 y）。
      ⇒ 必须把带子同量上移，否则整条带子在首屏内错 91.4525px（纸/雾的纵向位置对不上）。
      91.4525 = 53.47 × 1440/842（与 --u 同源）；写设计尺 px，随整页 scale 一起缩放。
   ② 罗盘：停用 01/02 后可见外径 2×157.63 = 315.26px（原 2×235.15 = 470.30px）；
      圆心仍在页 (754.90, 227.38) —— 层盒 --jh-cmp-d / 圆心 / 转速一字未改。 */
@media (min-width: 1440px) {
  html:has(.jh-home) .jh-hero-art::before { background-position: left -91.4525px; }
  html:has(.jh-home) .jh-hero-art::after  { background-position: right -91.4525px; }
}

/* ══ 【FIX-PC-R8 · 收尾块】必须放在文件最末（同特异性下靠后生效） ══════════════
   ① Hero 文案列在新窗口内的落位（新 Hero 高 389.78px）
   ② 中段（AI 段）压到 213.43px 后，段内两块按 0.6 收紧纵向间距，保证 0 溢出：
      改前（未收）copy 底 231.44 / chat 底 225.66（段高 213.42）→ 溢出 18.0 / 12.2
      改后实测见 FIX-PC-R8.md §1② —— ✗ 文案一字未改、✗ 字号未改，只改外边距/内边距。 */
@media (min-width: 843px) {
  .jh-hero-copy { top: max(calc(35 * var(--u)), calc(var(--jh-navh, 64px) + 6px)); }

  .jh-ai-copy .jh-eyebrow { margin-bottom: calc(7 * var(--u)); }
  .jh-ai-copy h2 { margin: calc(2 * var(--u)) 0 calc(6 * var(--u)); }
  .jh-ai-copy p { margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
  .jh-chat-panel { margin-top: calc(3 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); }
  .jh-chat-title { margin-bottom: calc(3 * var(--u)); }
  .jh-chat-cols li { padding: calc(1 * var(--u)) 0; }
  .jh-chat-cols p { margin: calc(2.5 * var(--u)) 0; }
}

/* ══ FIX-PC-LIFEMAP-CURRENT · 右侧阶段卡恢复正常文档流 ═══════════════════════
   根因：旧版三列固定为 170u / 300u / 1fr，在 PC 内容宽度下把右卡压到约 154px；
   377:161 切片仍按比例缩放，真实文字遂溢出并穿过底图骨架。
   方案：PC 宽屏给右卡真实最小轨道；阶段内容不再依赖绝对坐标/骨架底图，背景与文字同属一张自适应卡。
   手机端不命中本段。 */
@media (min-width: 1200px) {
  .jh-panel {
    grid-template-columns: minmax(220px, .95fr) minmax(340px, 1.65fr) minmax(220px, 1fr);
    gap: calc(12 * var(--u));
    align-items: start;
    min-height: 0;
  }
  /* 左卡原图比例导致底部留下大块空白；按右侧阶段卡的实际高度裁掉空白尾部，
     使用 cover 保持素材比例，不拉伸图片；左、右卡底线统一。 */
  .jh-panel-copy {
    height: calc(110 * var(--u));
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    background-size: cover;
    background-position: center top;
  }
  .jh-panel-copy {
    isolation: isolate;
    background-image: url('/home/sec-lifemap-copy-clean2.png');
  }
  .jh-panel-copy .jh-btn-small {
    top: 57%;
    z-index: 2;
    box-shadow: none;
  }
  .jh-panel > .jh-chart {
    align-self: center;
  }
}
@media (min-width: 843px) and (max-width: 1199px) {
  .jh-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: calc(12 * var(--u));
    align-items: stretch;
  }
  .jh-current { grid-column: 1 / -1; }
}
@media (min-width: 843px) {
  .jh-current {
    min-width: 0;
    min-height: calc(110 * var(--u));
    height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: calc(12 * var(--u)) calc(14 * var(--u));
    border-radius: calc(6 * var(--u));
    border: 1px solid rgba(143, 121, 82, .18);
    background: #efebe4;
    overflow: hidden;
  }
  .jh-current::before { display: none; }
  .jh-current > b,
  .jh-current small,
  .jh-current p,
  .jh-current a {
    position: static;
    z-index: auto;
    padding-left: 0;
  }
  .jh-current > b {
    display: block;
    margin: 0 0 calc(7 * var(--u));
    font-size: calc(7.2 * var(--u));
    line-height: 1.35;
    white-space: normal;
  }
  .jh-current small {
    margin: 0 0 calc(7 * var(--u));
    font-size: calc(6.2 * var(--u));
    line-height: 1.55;
  }
  .jh-current p {
    margin: 0;
    font-size: calc(6.2 * var(--u));
    line-height: 1.65;
  }
  .jh-panel .jh-current a {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    padding: calc(5 * var(--u)) calc(8 * var(--u));
    font-size: calc(6.2 * var(--u));
    line-height: 1;
    border-radius: 9999px;
    white-space: nowrap;
  }
}



/* ══ 【FIX-PC-R9 · 2026-09-25】业主两项整改（PC 端首页中段） ══════════════════════
   ── ① 中段那幅图（sec-ai-mid.webp）收进「中间固定版面」 ──────────────────────
   实测现状 @1440（逐像素扫 shots/cur-1440-full.png 中段行带；脚本 work/r9/probe.py）：
     · 图可见左右界 = **159.05 … 1280.95**（宽 1121.90）= 面板线（--sf-side = 93u）
     · 内容线（中段七块共同的左右边界）= **220.61 … 1219.39**（宽 998.78）
   ⇒ 图**没有越面板线**（超出 0.00px）；**左右各越内容线 61.44 / 61.56px**。
     业主截图里「比其它块宽出去一大截」= 这 61.5px；也正因为他截的窄条只到页 x≈394，
     图的右缘（1280.95）根本不在画面里 ⇒ 现象只能来自左缘比对。
   设计依据（无损图.png 逐列 dev 剖面，脚本 work/r9/hlines2.py）：
     · 设计「中段块边界线」跨 design x **191…1057** → 页 220.4…1219.4 = **内容线**
       y=702：x140..170 dev 0 · x185/190 dev −20/−18 · x700 dev −15 · x1058 dev −15 · x1080..1110 dev 0
       y=1045：x195 dev −12 · x220/250 dev −84 · x1058 dev +5 · x1080..1110 dev 0
     ⇒ 设计里中段「固定版面」的左右界就是内容线（191/1057 设计 px）。
   做法：把 .jh-ai-bg 的 clip 与 .jh-ai 的暗底从 --sf-side/--sf-mid（面板线）
         换成内容线 129u / 宽 584u；影像 background-size 用 584u 定宽 + auto
         = **等比缩放（✗ 不拉伸、✗ 不裁切）**；素材 sec-ai-mid.webp 同步重裁到盒比例
         （2170×464，见 a1_mid_asset.py：只改裁切行数 412→464，宽度/取样点不变）。
   ── ② 中间固定版面（面板线）上下边界线复刻 ────────────────────────────────
   设计实测（无损图.png 逐行/逐列剖面，work/r9/hlines2.py + 逐像素取样）：
     · 上边界线 = design y=466（Hero 深色块 y464 结束后的第 1 个亮行）
         颜色 rgb(255,255,250)（x200 (255,255,250) · x300 (255,255,251)）
         厚 **1 design px**；贯通 97.6% 面板宽（138…1110）；对照纸色 y=470 (243,240,231) → Δlum **+8.5**
     · 下边界线 = design y=1719（页脚顶）
         颜色 rgb(230,218,203)（x500 (229,217,203) · x700 (232,216,200)）
         厚 **1 design px**（y=1718 为半覆盖行）；贯通 98.2% 面板宽；对照纸色 y=1712 (245,242,232) → Δlum **−22**
   现状（我们，逐像素）：y=390 与 y=395 同值 (245,242,234) ⇒ **上边界线根本不存在**（只有 Hero 位图硬边）；
     y=2940 只有页脚自身边 (233,222,207)，Δlum 仅 **−13** 且不跨固定版面 ⇒ 下边界线太淡。
   做法：在首/末两个 .jh-section 上各加一条 1 design px 横线（= calc(0.6747*var(--u)) = 1.1538px@1440），
         跨面板线宽（left/right = var(--sf-side)），上=设计近白、下=设计褐灰，位置贴版面上/下缘。
   ✗ 不动 i18n / 手机端 / 阴阳鱼本体 / 中段文案文字 / 页脚四栏与太极居中；
   ✗ 不动页脚 239 / 四栏左缘 / 内容线 / 罗盘位置；本块只在 @media(min-width:1440px) 内。
   ⚠ 不确定度（如实登记）：设计 无损图.png 上边界线本身只有 Δlum +8.5（很淡），
     其「清晰」靠紧邻上方深色块形成的斜切边；本轮照该值 1:1 复刻，不额外加深。 */
@media (min-width: 1440px) {
  /* ── ① 中段影像 / 暗底 → 中间固定版面（内容线 129u，宽 584u = 998.775px@1440） ── */
  html:has(.jh-home) .jh-ai-bg {
    clip-path: inset(0 calc(100% - 129 * var(--u)) 0 calc(129 * var(--u)));
    background-size: calc(584 * var(--u)) auto;   /* 等比：定宽 998.78，高随比例 → 零拉伸零裁切 */
    background-position: center center;
  }
  html:has(.jh-home) .jh-home > .jh-ai {
    /* 上层 = 内容列暗底；下层 = 面板线整条纸底（内容线与面板线之间那 61.5px 两条纸带） */
    background-image:
      linear-gradient(#071013, #071013),
      linear-gradient(var(--sf-paper), var(--sf-paper));
    background-size: calc(584 * var(--u)) 100%, var(--sf-mid) 100%;
    background-position: calc(129 * var(--u)) 0, var(--sf-side) 0;
    background-repeat: no-repeat, no-repeat;
    background-color: transparent;
  }
  /* ── ② 固定版面的上/下边界线 ── */
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before,
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    content: ""; position: absolute; left: var(--sf-side); right: var(--sf-side);
    height: calc(0.6747 * var(--u));       /* 1 design px = 1440/1248 = 1.153846px@1440 */
    pointer-events: none; z-index: 4;
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before {
    top: 0; background: rgb(255, 255, 250);
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    bottom: 0; background: rgb(230, 218, 203);
  }
}


/* ══ 【FIX-PC-R10 · 2026-09-26】业主五处错误的整改（PC 端首页） ═══════════════════
   设计基准 = `C:/Users/Administrator/Desktop/九宫PC端V3/无损图.png`（1248×1872 ×1.153846 → 1440×2160）
   素材     = `顶部图.png`(1816×866) · `中间图.png`(2170×725)
   所有实测数字见 FIX-PC-R10.md §2；量测脚本 docs/fix-round10-20260926/ + work/r10/

   ── ① 顶部图 / 中间图「完整展示」（✗ 不得左右剪裁）──
   设计实测（无损图.png 逐行/逐列）：
     · hero 深色画心 = 设计 x138..1110 → 页 159.2..1280.8（在 y40/80/…/440 共 12 行逐行一致）
     · 中段深色带   = 设计 x138..1110 → 页 159.2..1280.8，y721..988 → 页 831.9..1139.9
     · 顶部图.png @ 页宽 1121.6 → 高 535.0（设计 hero 带高 537.7，差 0.5%）
       ⇒ 设计中「顶部图」的完整画面范围 = 面板线 159.2..1280.8
   现状（改前，逐像素）：
     · hero 底图 hero-bg.webp 画到 1440 宽 ⇒ 源 px×0.79297（设计口径 0.61759 的 1.2836 倍）
       → 左右各被两侧延伸带盖住 56.4px ⇒ **左右被裁**（业主第 1 处）
     · 中段影像被裁到内容线 129u（998.78 宽）⇒ 左右各少 61.4px ⇒ **左右被裁**
   改法：
     · hero 底图 → 业主 素材 `顶部图.png` 完整整幅（public/home/hero-top.webp 1816×866，像素零改动）
       等比到 `calc(656 * var(--u))` = 1121.90px（= 设计 1121.6，Δ0.30px）→ **整幅可见、零左右裁切、零拉伸**
       画在 `.jh-hero::before`（z-index 2 > 两侧带子的 1）→ 带子的 56.37px「切入列」不再盖住图的左右边缘
       纵向：图自带盘心（源 964,442；由设计盘心 (755,273) ÷ 0.61762 反解）对齐罗盘圆心 页(754.898,227.367)
             ⇒ background-position: center -45.69px（图占页 y −45.69…489.37，窗 0…389.78 取其中段）
     · 中段影像 → 业主 素材 `中间图.png` 完整整幅（public/home/sec-ai-mid.webp 2170×725）
       `background-size: 100% auto` ⇒ 画宽 = 盒宽 1121.90 = 原图整宽 → **整幅可见、零左右裁切、零拉伸**
   ── ③ 中段两侧「白茫茫一片白」→ 撤销 ──
   R9 在面板线内、内容线外加了一层 `linear-gradient(--sf-paper)` 纯纸色（实测 x160..220 恒为
   rgb(245,242,234) 240.0 平值）⇒ 业主看到的「白茫茫一片白」。设计在同行带是 x138..190 的
   影像本色（逐列 32.8 / 30.8 / 33.2 / 35.7 / 39.7 / 41.2 / 45.3 / 47.3 …，自然过渡）。
   改法：撤销那层纸色（下面的 .jh-ai 规则覆盖回 R8 的面板线口径）→ 面板线内全部是影像本色。
   ── ② 中间版块上下边界线「清晰明显」（✗ 禁白底白线）──
   设计实测两条线：
     · 上（hero 深色块下沿第一亮行）设计 y=466 → 页 537.69 · rgb(255,250,240) · 1 设计px · 贯通 97.6%
     · 下（页脚顶）设计 y=1719 → 页 1983.46 · rgb(229,217,203)/(230,218,203) · 1 设计px · 贯通 98.2%
     · 另一条设计已有的**深褐灰横线**：设计 y=702 → 页 810.00 · rgb(229,221,208) · Δlum −17.66（对纸 237.84）
   改前（R9）：上=rgb(255,255,250) 画在纸上 → 对下方纸 Δlum 仅 +13.34 ⇒ 业主：「白色的几乎看不到」✗
   改法：上边界 = **双行**（上 1 设计px 设计实测近白 rgb(255,250,240)，下 1 设计px 设计实测深褐灰
     rgb(229,221,208) Δlum −17.7）⇒ 既 1:1 复刻设计色，又保证在纸上肉眼可见；下边界 = 设计 y=1719 原色。
     厚度：1 设计px = 1440/1248 = 1.153846px → calc(0.6747 * var(--u))；上边界双行 = calc(1.3494 * var(--u))
   ── ⑤ 太极外圈（根因）──
   实测（work/r10/p11_rings.py，页坐标环带 / 角向覆盖）：
     环带(页r)        关掉 hero 位图时      位图 + 叠层（现行）
     r185.9–235.0      41.94% / 101°         96.11% / 6°     ← 多出来的墨 = hero 位图自带的罗盘环
     r152.1–191.2      76.67% /  42°        100.00% / 0°
     r118.1–157.4     100.00% /   0°        100.00% / 0°   （= 层 03，本已闭环）
   ⇒ 「杂乱、不完整的外圈」根因 = **hero 位图自带的罗盘环**：它被放大到 1.2836 倍后落在
     r≈182–222（素材 顶部图 的亮环 r230–280 × 0.79297），与叠层素材（最外 03 到 r157.4）
     错开 ~25px ⇒ 两套同心环互相打架 = 重影。① 把 hero 底图等比缩回设计口径（×0.61759）后，
     该环落到 r≈142–173，与叠层 03/08 落在同一带内 ⇒ 重影消除。
     ✗ 未重绘阴阳鱼本体（06_taiji_solid_* 文件与像素一字未动），✗ 未动罗盘层盒/圆心/转速。
   ✗ 不碰 i18n / 手机端 / 阴阳鱼本体 / 中段文案；本块只在 @media(min-width:1440px) 内。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  /* ── ①-a Hero 底图 = 顶部图.png 完整整幅（1816×866），等比到面板线宽 656u = 1121.90px ──
     ⚠ 必须画在「两侧延伸带之上」（带子 = .jh-hero-art::before/::after, z-index 1）：
       否则带子那 56.37px「切入列」会盖住图的左右各 56.37px ⇒ 又变成左右被裁。
       画在 .jh-hero::before（z-index 2）：在带子(1)之上、罗盘 .jh-cmp-wrap(6) 与文案(8) 之下。 */
  html:has(.jh-home) .jh-hero-art { background-image: none; }
  html:has(.jh-home) .jh-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-image: url('/home/hero-top.webp');
    background-size: calc(656 * var(--u)) auto;   /* 1121.90px = 设计 hero 图宽 1121.6（Δ0.30px） */
    background-position: center -45.69px;         /* 图的自带盘心(源 964,442) 对齐罗盘圆心 页(754.898,227.367) */
    background-repeat: no-repeat;
  }
  /* ── ①-b 中段影像 = 中间图.png 完整整幅（2170×725）跨面板线整宽，等比（✗ 不裁不拉伸）── */
  html:has(.jh-home) .jh-ai-bg {
    clip-path: inset(0 var(--sf-side) 0 var(--sf-side));
    /* ⚠ 必须写 calc(656 * var(--u)) 而不是 100%：.jh-ai-bg 是 inset:0 的整宽盒（1440），
       100% = 1440 ⇒ 图被画到 1440 宽再被 clip-path 裁到 1121.9 ⇒ 反而变成左右裁切。
       写死 1121.90px = 面板线宽 = 原图整宽 ⇒ 整幅可见、等比（✗ 不裁不拉伸）。*/
    background-size: calc(656 * var(--u)) auto;
    background-position: center 15px;       /* 实测扫参：顶部过渡曲线 mean|Δ| 最低（22.31） */
    background-repeat: no-repeat;
  }
  /* 上下过渡的最佳纵向配准不同：保留上半部 + 叠加一份仅裁到底半部的影像。 */
  html:has(.jh-home) .jh-ai-bg::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: url('/home/sec-ai-mid.webp') center -69px / calc(656 * var(--u)) auto no-repeat;
    clip-path: inset(50% 0 0 0);
    pointer-events: none;
  }
  html:has(.jh-home) .jh-home > .jh-ai {
    background-color: transparent;
    background-image: linear-gradient(#071013, #071013);
    background-size: var(--sf-mid) 100%;
    background-position: var(--sf-side) 0;
    background-repeat: no-repeat;
  }
  /* ── ② 两条上下边界线：设计实测色，上边界双行（近白 + 深褐灰）保证肉眼可见 ── */
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before,
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    content: ""; position: absolute; left: var(--sf-side); right: var(--sf-side);
    pointer-events: none; z-index: 4;
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before {
    top: 0;
    height: calc(1.3494 * var(--u));         /* 2 设计px = 2.3077px @1440 */
    background: linear-gradient(rgb(255, 250, 240) 0 50%, rgb(229, 221, 208) 50% 100%);
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    bottom: 0;
    height: calc(0.6747 * var(--u));         /* 1 设计px = 1.153846px @1440 */
    background: rgb(230, 218, 203);
  }
}


/* ══ 【FIX-PC-R11 · 2026-09-26】业主两项顶修（PC 端首页）════════════════════════════
   设计基准 `C:/Users/Administrator/Desktop/九宫PC端V3/无损图.png`（1248×1872 ×1.153846 → 1440×2160）
   全部实测数字与逐层拆解见 FIX-PC-R11.md；量测脚本 work/r11/*.py、证据图 docs/fix-round11-20260926/shots/

   ── B. 中间固定版块「上下边界线」必须肉眼一看就看到 ───────────────────────────────
   根因（实测，不是推断）：R9/R10 把这两条线写在 `@media (min-width:1440px)` 里
     ⇒ 视口 < 1440（Windows 常见的 1280 / 1366 窗口）时**这两条规则完全不生效 = 页面里根本没有线**。
   本轮：把规则起点降到 **843px（PC 断点）**，位置/宽度沿用设计实测（面板线 x159.05…1280.95）。
   设计原稿两条线本体（无损图.png 逐行剖面，work/r11/b1_lines.py）：
     · 上边界：设计 y=465..468 三行，核心 y=466 亮度 250.12 rgb(255,255,251)，
               上行 y=465 = 184.39，下行 y=467 = 236.10，再下 y=470 纸 241.47 ⇒ 上下行亮度差 +65.7 / −14.0
               贯通：y=466 上亮于纸 >8 的列占 x138..1110 的 58.2%（最大连续缺口 80px）
     · 下边界：设计 y=1718..1720 三行，核心 y=1719 亮度 221.77 rgb(228,221,205)，
               上行 y=1718 = 233.55，下行 y=1720 = 228.26，对照纸 y=1712 = 240.27 ⇒ −11.78 / +6.49
               贯通：y=1719 暗于纸 >8 的列占 x138..1110 的 101.0%
     · 设计第三条同类横线（原稿自带）：y=702 亮度 220.03 rgb(230,218,204)，对纸 y=705 241.98 ⇒ −15.05
   做法：**3 行带（3 设计px = 3.4615px@1440）**
     行1 = 设计 y466 实测近白 rgb(255,250,240)   ← 1:1 复刻设计主色
     行2 = 可见性补偿行 rgb(176,146,88)（深金褐，对纸 Δlum ≈ −93）
     行3 = 设计 y702 实测深褐灰 rgb(229,221,208)
   ⇒ 上边界逐行：hero 115 → 250 → 148 → 232 → 纸 242（摆幅 +135 / −102 / +84）
     下边界逐行：纸 241 → 148 → 250 → 页脚 227（摆幅 −93 / +102 / −23）
   —— 「1:1 复刻」与「一眼看到」的取舍：业主 R10 后仍判「没有」，本轮按任务书授权「加直到明显为止」，
      加厚到 3 设计px 并补一行深色；若要回到纯设计色 1 设计px，把 height 改回 calc(0.6747*var(--u))
      并删掉 gradient 的第 2 段即可（1 行回退）。

   ── A. 中心最小太极「乱套」──
   逐层实测（work/r11/a1_layers.py · a6_ghost.py · a7_diff.py · a8_edge_fit.py）：
     · 素材 06 本体**不糊**：黑鱼/白鱼像素质心偏移 9.78px@44.4°（设计 9.13px@39.6°，差 4.8°）、
       白/暗面积比 0.7079（设计 0.7108）、S 曲线主轴 37.4°（设计 34.2°）⇒ 形状/朝向/比例一致。
     · 「乱套」来自**叠加**：① 顶部底图（顶部图.png）自带一整套罗盘（盘心 源964,442），
       其太极半径 ≈43 页px、叠层太极 ≈53 页px ⇒ 页半径 52–78px 一带**两套同心环错位打架**；
       ② `08_bloom` 的 plus-lighter 加色正好覆盖该带（素材 α 在 r294–400 = 16.76）；
       ③ `06` 外沿 α 按角度不均（有墨% 在 r288–292 为 75.9→45.7→56.5→71.6→38.2 非单调）
          ⇒ 太极外沿一圈锯齿状淡弧 + 05 层的墨穿透（重影）。
   本轮：
     · 素材侧（可逐像素证）：从现有 06 派生，把外沿 r∈[288,293.784] 的 α 由「按角度不均」改成
       「只按 r 单调」；RGB 0 字节改动、带外 max|Δ|=0、有墨外半径 293.784 不变（见 b_asset06.py）。
     · CSS 侧：叠加增益按「与设计同尺逐带 |Δ| 最小」选优（work/r11/e3_eval2.py 的 6 组并列）：
       --jh-gold-gain 1.15 → 1.4、--jh-bloom-gain 0.8 → 0.4；
       并把顶部底图在罗盘覆盖区轻微压暗（r<78px ×0.62 → 96px 恢复 1.0），
       使两套同心环不再等强打架。
       ⇒ 页半径 <60px 的逐像素 MAE 28.26 → 27.74；r52–72px 55.73 → 53.08（越小越像设计）。
   ✗ 不动：小太极层盒/圆心/外径、顶部图高度、中间图高度、左右两边、阴阳鱼形状与配色、i18n、手机端；
   ✗ 本块只在 @media(min-width:843px) 内（手机端断点 ≤842px 完全不受影响）。
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── B：中间固定版块上下边界线（任何 PC 视口宽度都存在；`html:has(.jh-home)` 与 R10 同特异性，靠后生效）── */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before,
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    content: "";
    position: absolute;
    left: var(--sf-side);
    right: var(--sf-side);
    pointer-events: none;
    z-index: 4;
    height: calc(0.6747 * var(--u));      /* 1 design px：回到无损图的实际线宽 */
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-position::before {
    top: 0;
    background: rgb(255, 250, 240);       /* 无损图 y=466 核心色 */
  }
  html:has(.jh-home) .jh-home > .jh-section.jh-trust::after {
    bottom: 0;
    background: rgb(230, 218, 203);       /* 无损图 y=1719 核心色 */
  }
}

/* ── A：叠加增益（按与设计同尺逐带 |Δ| 选优）── */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-compass {
    --jh-gold-gain: 1.4;
    --jh-bloom-gain: 0.4;
  }
}

/* ── A：顶部底图在罗盘覆盖区轻微压暗（75.2→96px 平滑过渡；罗盘盒外一律 1.0）── */
@media (min-width: 1440px) {
  html:has(.jh-home) .jh-hero::before {
    -webkit-mask-image: radial-gradient(circle at calc(50% + 20.406 * var(--u)) 227.367px,
        rgba(0, 0, 0, 0.62) 0 78px, rgba(0, 0, 0, 1) 96px);
            mask-image: radial-gradient(circle at calc(50% + 20.406 * var(--u)) 227.367px,
        rgba(0, 0, 0, 0.62) 0 78px, rgba(0, 0, 0, 1) 96px);
  }
}

/* ══ 【PC-V3-A · 2026-09-26】按 V3 整体参照图重排（仅 PC） ═══════════════════════
   PC 端去掉非 V3 版面的两个附加区块；Hero 恢复无损图的 536.54 CSS px 画布高。
   手机端 ≤842px 不进入本块，HomeMobilePage/home-mobile.css 保持原状。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-hero {
    aspect-ratio: auto;
    height: calc(313.73 * var(--u));       /* 536.54px @1440 = 无损图 y0..465 */
  }
  html:has(.jh-home) .jh-hero-art {
    top: 0;
    bottom: 0;
    height: 100%;
  }
  html:has(.jh-home) .jh-compass {
    --jh-cmp-dy: 0.60px;                  /* 圆心向下校正至无损图 y=251.54px */
  }
  html:has(.jh-home) .jh-hero + .jh-section {
    height: calc(189 * var(--u));        /* 卡片完整落在三大核心产品浅色区域内，避免压入 AI 图层 */
    min-height: 0;
  }
  html:has(.jh-home) .jh-ai {
    height: calc(108.084 * var(--u));      /* AI 中间版块再缩减五分之二：约 184.85px @1440 */
    min-height: 0;
  }
  html:has(.jh-home) .jh-ai::before,
  html:has(.jh-home) .jh-ai::after {
    content: "";
    position: absolute;
    left: calc(93 * var(--u));
    right: calc(93 * var(--u));
    height: calc(0.6747 * var(--u));
    pointer-events: none;
    z-index: 4;
  }
  html:has(.jh-home) .jh-ai::before {
    top: 0;
    background: rgb(236, 236, 230);
  }
  html:has(.jh-home) .jh-ai::after {
    bottom: 0;
    background: rgb(108, 108, 106);
  }
}
@media (min-width: 1440px) {
  html:has(.jh-home) main:has(.jh-home) {
    background-image: linear-gradient(
      #060a0c 0,
      #060a0c calc(1440px * 313.73 * 0.875 / 842),
      transparent calc(1440px * 313.73 * 0.875 / 842)
    );
  }
  html:has(.jh-home) .jh-hero::before {
    background-position: center 0;
  }
}

/* ── PC-only: original-design side ellipses + continuous footer landscape ── */
@media (min-width: 843px) {
  /* 原设计底部：整幅底图从优势区下方开始，覆盖连接区与页脚；不使用 side-band */
  html:has(.jh-home) .jh-home {
    background-image: none;
  }
  html:has(.jh-home) .jh-home::before,
  html:has(.jh-home) .jh-home::after {
    content: none;
  }
  html:has(.jh-home) .jh-home > .jh-hero,
  html:has(.jh-home) .jh-home > .jh-section {
    position: relative;
    z-index: 1;
  }
  html:has(.jh-home) footer.jg-footer .jhf-art {
    left: 0;
    right: 0;
    width: auto;
    background-size: 100% auto;
    background-position: center calc(-1 * var(--sf-bg-src-off));
  }
  /* 本轮只恢复原设计两侧山水；底部规则保持不动 */
  @media (min-width: 1440px) {
    html:has(.jh-home) .jh-home {
      background-image: url('/home/side-band-l.webp'), url('/home/side-band-r.webp');
      background-size: var(--sf-side) var(--sf-pageh), var(--sf-side) var(--sf-pageh);
      background-position: left 20px, right 20px;
      background-repeat: no-repeat, no-repeat;
    }
  }

  /* 本轮只做中央板块与左右延伸的两条清晰垂直分界线；底部不参与 */
  @media (min-width: 1440px) {
    html:has(.jh-home) .jh-home > .jh-hero,
    html:has(.jh-home) .jh-home > .jh-section {
      box-shadow: none;
    }
    html:has(.jh-home) .jh-home::before,
    html:has(.jh-home) .jh-home::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      z-index: 3;
      background: rgba(112, 92, 70, 0.18);
      pointer-events: none;
    }
    html:has(.jh-home) .jh-home::before { left: var(--sf-side); }
    html:has(.jh-home) .jh-home::after { right: var(--sf-side); }
  }

  html:has(.jh-home) footer.jg-footer { box-shadow: none; }

  html:has(.jh-home) footer.jg-footer {
    height: 239px;
    min-height: 0;
    overflow: hidden;
    /* 2026-10-04：本元素不再自绘底图。原先第三层 url('/home/footer-bg-clean.webp')（350 KB）
       已被上层 .jhf-art 的 /home/footer-bg-v3.png 完整覆盖（v3 为 1983×793，按 background-size:100% auto
       在 1440 宽下渲染 575.9px > 本盒 184.29px），视觉零影响，去掉的只是那 350 KB 多余下载。
       左右两条 1px 分界线（前两层 gradient）原样保留。 */
    background:
      linear-gradient(rgba(112, 92, 70, 0.18), rgba(112, 92, 70, 0.18)) var(--sf-side) 0 / 1px 100% no-repeat,
      linear-gradient(rgba(112, 92, 70, 0.18), rgba(112, 92, 70, 0.18)) calc(100% - var(--sf-side)) 0 / 1px 100% no-repeat;
  }
  html:has(.jh-home) footer.jg-footer {
    position: relative;
  }
  html:has(.jh-home) footer.jg-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(rgba(112, 92, 70, 0.18), rgba(112, 92, 70, 0.18)) var(--sf-side) 0 / 1px 100% no-repeat,
      linear-gradient(rgba(112, 92, 70, 0.18), rgba(112, 92, 70, 0.18)) calc(100% - var(--sf-side)) 0 / 1px 100% no-repeat;
  }
  html:has(.jh-home) footer.jg-footer::after {
    content: none;
  }

  /* PC 首页四栏与中央太极：用真实五列轨道锁定左右镜像关系。
     第 3 列是太极安全区，不放栏目；四栏不再依赖内容宽度或背景图猜间距。 */
  @media (min-width: 843px) {
    html:has(.jh-home) footer.jg-footer .jhf-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 280px minmax(0, 1fr) minmax(0, 1fr) !important;
      column-gap: 0;
    }
    html:has(.jh-home) footer.jg-footer .jhf-grid > .jhf-col:nth-of-type(1) { grid-column: 1; }
    html:has(.jh-home) footer.jg-footer .jhf-grid > .jhf-col:nth-of-type(2) { grid-column: 2; }
    html:has(.jh-home) footer.jg-footer .jhf-grid > .jhf-col:nth-of-type(3) { grid-column: 4; }
    html:has(.jh-home) footer.jg-footer .jhf-grid > .jhf-col:nth-of-type(4) { grid-column: 5; }
    html:has(.jh-home) footer.jg-footer .jhf-grid > .jhf-col {
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* PC 首页底栏：文字与社交信息分列到太极两侧，中央只保留底图太极的呼吸空间。
     手机端不命中本段，继续使用 HomeMobilePage 独立页脚。 */
  @media (min-width: 843px) {
    html:has(.jh-home) footer.jg-footer .jhf-bar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr) minmax(0, 1fr);
      align-items: center;
      min-height: 184.29px;
      gap: 0;
      position: relative;
      top: -12px;
    }
    html:has(.jh-home) footer.jg-footer .jhf-left {
      grid-column: 1;
      justify-self: end;
      padding-right: 34px;
      text-align: right;
      z-index: 4;
    }
    html:has(.jh-home) footer.jg-footer .jhf-brand {
      position: static;
      display: flex;
      justify-content: flex-end;
      transform: none;
      padding-left: 0;
      gap: 12px;
      white-space: nowrap;
    }
    html:has(.jh-home) footer.jg-footer .jhf-brand > a > span:first-child,
    html:has(.jh-home) footer.jg-footer .jhf-brand > span,
    html:has(.jh-home) footer.jg-footer .jhf-brand .jhf-tag {
      display: none !important;
    }
    html:has(.jh-home) footer.jg-footer .jhf-name {
      font-size: 22px;
      line-height: 28px;
    }
    html:has(.jh-home) footer.jg-footer .jhf-copy {
      margin-top: 8px;
      white-space: nowrap;
    }
    html:has(.jh-home) footer.jg-footer .jhf-social {
      grid-column: 3;
      justify-self: start;
      padding-left: 34px;
      z-index: 4;
    }
  }

  html:has(.jh-home) footer.jg-footer .jhf-body {
    position: relative;
    z-index: 2;
  }
  /* 太极定稿候选：hero-top 保留原设计本体；透明层只做低强度动态，不再重绘中心 */
  html:has(.jh-home) .jh-compass .l3,
  html:has(.jh-home) .jh-compass .l4,
  html:has(.jh-home) .jh-compass .l5 { opacity: .22; }
  html:has(.jh-home) .jh-compass .l6 {
    opacity: .08;
    animation: jh-cmp-cw 360s linear infinite;
  }
  html:has(.jh-home) .jh-compass .l7,
  html:has(.jh-home) .jh-compass .l8 { opacity: .10; }
  html:has(.jh-home) .jh-compass::after { content: none; }

  /* PC-only：三大核心产品的三个圆形板块图标高度缩减五分之二，保持圆形比例。 */
  html:has(.jh-home) .jh-engine-icon {
    width: calc(21 * var(--u));
    height: calc(21 * var(--u));
    font-size: calc(10.2 * var(--u));
  }
  html:has(.jh-home) .jh-engine-icon svg {
    width: calc(14.4 * var(--u));
    height: calc(14.4 * var(--u));
  }

  /* PC-only：九宫传习使用业主指定原图，整幅等比展示，不叠加旧工具图标和文字。 */
  html:has(.jh-home) .jh-strip {
    aspect-ratio: 2167 / 350;
    background-image: url('/home/jiugong-chuanxi.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 0;
  }
  html:has(.jh-home) .jh-strip > .jh-mini-books,
  html:has(.jh-home) .jh-strip > .jh-strip-books,
  html:has(.jh-home) .jh-strip > .jh-tool,
  html:has(.jh-home) .jh-strip > .jh-tool-more {
    visibility: hidden;
    pointer-events: none;
  }

  html:has(.jh-home) .jh-chuanxi-total {
    display: block;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  html:has(.jh-home) .jh-chuanxi-total:hover {
    border-color: #c9a85b;
    box-shadow: 0 4px 16px #6f62432b;
  }
  html:has(.jh-home) .jh-chuanxi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(12 * var(--u));
    margin-top: calc(12 * var(--u));
  }
  html:has(.jh-home) .jh-chuanxi-card {
    min-height: calc(78 * var(--u));
    display: flex;
    flex-direction: column;
    padding: calc(13 * var(--u));
    border: 1px solid #ded7c9;
    border-radius: calc(6 * var(--u));
    background: #fbf9f3cc;
    color: #4c463c;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  html:has(.jh-home) .jh-chuanxi-card:hover {
    border-color: #c9a85b;
    box-shadow: 0 4px 16px #6f62432b;
    transform: translateY(-2px);
  }
  html:has(.jh-home) .jh-chuanxi-card b {
    color: #806b43;
    font-family: var(--h-serif);
    font-size: calc(12 * var(--u));
    font-weight: 400;
    margin-bottom: calc(5 * var(--u));
  }
  html:has(.jh-home) .jh-chuanxi-card span {
    font-size: calc(7 * var(--u));
    line-height: 1.7;
  }
  html:has(.jh-home) .jh-chuanxi-card em {
    margin-top: calc(6 * var(--u));
    color: #999082;
    font-size: calc(5.8 * var(--u));
    font-style: normal;
  }
  html:has(.jh-home) .jh-chuanxi-card small {
    margin-top: auto;
    padding-top: calc(8 * var(--u));
    color: #927849;
    font-size: calc(6.5 * var(--u));
  }

  /* PC-only：三个入口嵌入九宫传习横幅的中右留白，参考易学书馆的文字索引排法。 */
  html:has(.jh-home) .jh-chuanxi-links {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  html:has(.jh-home) .jh-chuanxi-link {
    position: absolute;
    top: 29%;
    width: 8%;
    height: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #9b7b4d99;
    background: #f7efdf66;
    color: #554837;
    pointer-events: auto;
    text-shadow: 0 1px 2px #fff8e8cc;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  html:has(.jh-home) .jh-chuanxi-link:nth-child(1) { left: 58%; }
  html:has(.jh-home) .jh-chuanxi-link:nth-child(2) { left: 68%; }
  html:has(.jh-home) .jh-chuanxi-link:nth-child(3) { left: 78%; }
  html:has(.jh-home) .jh-chuanxi-link:hover {
    background: #f7efdfcc;
    border-color: #b18b4e;
    color: #806b43;
  }
  html:has(.jh-home) .jh-chuanxi-enter {
    position: absolute;
    left: 87%;
    top: 29%;
    width: 12%;
    height: 42%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 1px solid #9b7b4d99;
    background: #f7efdf66;
    color: #554837;
    font-family: var(--h-serif);
    font-size: calc(7.2 * var(--u));
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1px 2px #fff8e8cc;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  html:has(.jh-home) .jh-chuanxi-enter:hover {
    border-color: #b18b4e;
    background: #f7efdfcc;
    color: #806b43;
  }
  html:has(.jh-home) .jh-chuanxi-link b {
    font-family: var(--h-serif);
    font-size: calc(7.2 * var(--u));
    font-weight: 400;
    white-space: nowrap;
  }
  html:has(.jh-home) .jh-chuanxi-link span {
    margin-top: calc(3 * var(--u));
    color: #806b43;
    font-size: calc(5.3 * var(--u));
    white-space: nowrap;
  }
  html:has(.jh-home) .jh-chuanxi-slogan {
    position: absolute;
    left: 42%;
    top: 28%;
    width: 13%;
    height: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #554837;
    background: #f7efdf44;
    border-bottom: 1px solid #9b7b4d66;
    text-shadow: 0 1px 2px #fff8e8cc;
    pointer-events: none;
  }
  html:has(.jh-home) .jh-chuanxi-slogan b {
    font-family: var(--h-serif);
    font-size: calc(8 * var(--u));
    font-weight: 400;
    white-space: nowrap;
  }
  html:has(.jh-home) .jh-chuanxi-slogan span {
    margin-top: calc(3 * var(--u));
    color: #806b43;
    font-size: calc(6 * var(--u));
    white-space: nowrap;
  }
}

/* PC-only：顶部太极罗盘动态方案 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-compass .l3 { animation-name: jh-cmp-cw; animation-duration: 90s; }
  html:has(.jh-home) .jh-compass .l4 { animation-name: jh-cmp-cw; animation-duration: 180s; }
  html:has(.jh-home) .jh-compass .l5 { animation-name: jh-cmp-ccw; animation-duration: 260s; }
  html:has(.jh-home) .jh-compass .l6 { animation-name: jh-cmp-cw; animation-duration: 120s; }
  html:has(.jh-home) .jh-compass .l7 { animation-duration: 8s; }
  html:has(.jh-home) .jh-compass .l8 {
    animation: jh-cmp-breathe-soft 12s ease-in-out infinite;
  }
  html:has(.jh-home) .jh-cmp-stack {
    animation: jh-cmp-intro 1.2s ease-out both;
  }
  @keyframes jh-cmp-breathe-soft {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.015); }
  }
  @keyframes jh-cmp-intro {
    0% { opacity: 0; transform: scale(.96); }
    100% { opacity: 1; transform: scale(1); }
  }
}



@media (min-width: 843px) and (prefers-reduced-motion: reduce) {
  html:has(.jh-home) .jh-cmp-stack,
  html:has(.jh-home) .jh-compass .jh-cmp-layer {
    animation: none !important;
  }
}

/* PC-only：底部中央太极只使用 /home/footer-bg-v3.png 内置的单一图案。
   禁止再叠加 footer-taiji-instrument.svg，避免中央出现两个重叠太极。 */
/* PC-only：AI 决策区内嵌四类问题入口；手机端由独立 HomeMobilePage 承载。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-ai-scenes {
    display: flex;
    gap: calc(4 * var(--u));
    margin: calc(5 * var(--u)) 0 calc(6 * var(--u));
  }
  html:has(.jh-home) .jh-ai-scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: calc(48 * var(--u));
    padding: calc(4 * var(--u)) calc(6 * var(--u));
    border: 1px solid #66706c;
    border-radius: calc(3 * var(--u));
    background: #0e1719b8;
    color: #ded6c5;
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease;
  }
  html:has(.jh-home) .jh-ai-scene:hover {
    border-color: #c9a85b;
    background: #182427e8;
  }
  html:has(.jh-home) .jh-ai-scene b {
    font-family: var(--h-serif);
    font-size: calc(7 * var(--u));
    font-weight: 400;
    color: #e1c482;
  }
  html:has(.jh-home) .jh-ai-scene span {
    margin-top: calc(1.5 * var(--u));
    font-size: calc(5.2 * var(--u));
    line-height: 1.2;
    color: #aaa79c;
    white-space: nowrap;
  }
  html:has(.jh-home) .jh-ai-copy > .jh-gold-btn {
    font-size: calc(6.5 * var(--u));
    padding: calc(5 * var(--u)) calc(10 * var(--u));
  }
}

/* PC-only：AI 中段完整内容适配（固定现有高度，不裁文字）。
   根因：.jh-ai 在 R8 后被压到 108.084u，但内部仍按原 208u 结构定位，
   再叠加 overflow:hidden，导致入口卡与分析卡底部硬裁。本段只收紧
   内部间距/定位，保留外层高度和完整功能；手机端不进入。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-ai {
    overflow: hidden;
  }

  /* 内容线对齐；把原先 top:37u/26u 的两列同时上移，给底部完整内容留空间。 */
  html:has(.jh-home) .jh-ai-copy {
    left: calc(129 * var(--u));
    top: calc(4 * var(--u));
    width: calc(320 * var(--u));
  }
  html:has(.jh-home) .jh-ai-copy .jh-eyebrow {
    margin-bottom: calc(3 * var(--u));
  }
  html:has(.jh-home) .jh-ai-copy h2 {
    margin-top: calc(1 * var(--u));
    margin-bottom: calc(3 * var(--u));
  }
  html:has(.jh-home) .jh-ai-copy p {
    margin-top: calc(2 * var(--u));
    margin-bottom: calc(3 * var(--u));
    line-height: 1.35;
  }
  html:has(.jh-home) .jh-ai-scenes {
    gap: calc(3 * var(--u));
    margin-top: calc(2 * var(--u));
    margin-bottom: calc(3 * var(--u));
  }
  html:has(.jh-home) .jh-ai-scene {
    min-width: 0;
    flex: 1 1 0;
    padding: calc(2 * var(--u)) calc(3 * var(--u));
  }
  html:has(.jh-home) .jh-ai-scene b {
    font-size: calc(6.5 * var(--u));
  }
  html:has(.jh-home) .jh-ai-scene span {
    font-size: calc(4.7 * var(--u));
  }
  html:has(.jh-home) .jh-ai-copy > .jh-gold-btn {
    font-size: calc(6.2 * var(--u));
    padding-top: calc(3 * var(--u));
    padding-bottom: calc(3 * var(--u));
  }

  html:has(.jh-home) .jh-chat {
    right: calc(129 * var(--u));
    top: 0;
  }
  html:has(.jh-home) .jh-bubble {
    padding-top: calc(3 * var(--u));
    padding-bottom: calc(3 * var(--u));
  }
  html:has(.jh-home) .jh-chat-panel {
    margin-top: calc(3 * var(--u));
    padding: calc(3 * var(--u)) calc(7 * var(--u));
  }
  html:has(.jh-home) .jh-chat-title {
    margin-bottom: calc(2 * var(--u));
  }
  html:has(.jh-home) .jh-chat-cols {
    gap: calc(5 * var(--u));
  }
  html:has(.jh-home) .jh-chat-cols li {
    padding-top: calc(1 * var(--u));
    padding-bottom: calc(1 * var(--u));
  }
  html:has(.jh-home) .jh-chat-cols > div {
    padding-left: calc(6 * var(--u));
  }
  html:has(.jh-home) .jh-chat-cols p {
    margin-top: calc(2 * var(--u));
    margin-bottom: calc(2 * var(--u));
    line-height: 1.25;
  }
}

/* PC-only：AI 区改为与首页其他子版块一致的纵向内容流。
   原规则把文案与对话预览分别绝对定位在同一条横向带内，
   因而视觉上像一张横向铺开的独立页面；这里让两块进入正常文档流，
   不改变手机端独立首页结构，也不改 AI 对话页 /ai 的内部布局。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-ai {
    height: auto;
    min-height: calc(390 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(22 * var(--u));
    padding: calc(30 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
    box-sizing: border-box;
    overflow: hidden;
  }

  html:has(.jh-home) .jh-ai-copy,
  html:has(.jh-home) .jh-chat {
    position: relative;
    inset: auto;
    z-index: 3;
    width: min(100%, calc(620 * var(--u)));
    margin: 0 auto;
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-ai-copy {
    text-align: center;
  }

  html:has(.jh-home) .jh-ai-copy h2 {
    margin-top: calc(4 * var(--u));
    margin-bottom: calc(7 * var(--u));
  }

  html:has(.jh-home) .jh-ai-copy p {
    margin: 0 auto calc(9 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scenes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(6 * var(--u));
    margin: calc(10 * var(--u)) auto calc(12 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scene {
    min-width: 0;
    min-height: calc(38 * var(--u));
    padding: calc(7 * var(--u)) calc(8 * var(--u));
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-ai-scene span {
    white-space: normal;
  }

  html:has(.jh-home) .jh-ai-copy > .jh-gold-btn {
    display: inline-flex;
    justify-content: center;
  }

  html:has(.jh-home) .jh-chat {
    flex: none;
  }

  html:has(.jh-home) .jh-bubble {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: calc(20 * var(--u));
  }

  html:has(.jh-home) .jh-chat-panel {
    width: 100%;
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-chat-cols {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
  }

  html:has(.jh-home) .jh-chat-cols > div {
    border-left: 0;
    border-top: 1px solid #555d5e;
    padding-left: 0;
    padding-top: calc(10 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scenes {
    grid-template-columns: 1fr;
  }
}

/* PC-only：AI 文字与背景亮部隔离（2026-10-01）。
   不改原图、不改位置、不改高度；只给左侧文案与右侧分析卡增加局部可读性保护。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-ai-copy {
    isolation: isolate;
  }
  html:has(.jh-home) .jh-ai-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: calc(-10 * var(--u));
    right: calc(-12 * var(--u));
    top: calc(-5 * var(--u));
    bottom: calc(-5 * var(--u));
    border-radius: calc(7 * var(--u));
    background: linear-gradient(90deg, #071013e8 0%, #071013b8 55%, #07101324 100%);
    pointer-events: none;
  }
  html:has(.jh-home) .jh-ai-copy .jh-eyebrow,
  html:has(.jh-home) .jh-ai-copy h2,
  html:has(.jh-home) .jh-ai-copy p {
    text-shadow: 0 1px calc(2 * var(--u)) #05090bcc, 0 0 calc(1 * var(--u)) #05090b99;
  }
  html:has(.jh-home) .jh-chat-panel {
    background: #0e1518f5;
  }
  html:has(.jh-home) .jh-chat-title {
    text-shadow: 0 1px calc(1.5 * var(--u)) #05090bcc;
  }
}

/* PC-only：Hero 按业主红圈基准只裁掉当前高度的 1/8。
   只缩短窗口，不缩放/移动原图和动态罗盘：保留太极完整、转速与配准不变。
   手机端不进入本段。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-hero {
    aspect-ratio: auto;
    height: calc(313.73 * 0.875 * var(--u));
    overflow: hidden;
    isolation: isolate;
  }

  html:has(.jh-home) .jh-hero-art {
    top: 0;
    bottom: auto;
    height: calc(313.73 * var(--u));
    overflow: hidden;
    background-size: 100% 100%;
  }

  html:has(.jh-home) .jh-hero + .jh-section {
    position: relative;
    z-index: 2;
    margin-top: 16px;
    clear: both;
  }

  html:has(.jh-home) .jh-hero-copy {
    top: max(calc(35 * var(--u)), calc(var(--jh-navh, 64px) + 6px));
    transform: none;
    transform-origin: initial;
  }

  html:has(.jh-home) .jh-hero-copy .jh-hero-sub {
    margin-bottom: calc(18 * var(--u));
  }

  html:has(.jh-home) .jh-compass {
    --jh-cmp-d: calc(297.53 * var(--u));
    --jh-cmp-dy: 5px;
  }

  @media (min-width: 1440px) {
    html:has(.jh-home) .jh-compass {
      --jh-cmp-dy: 0.60px;
    }
  }

  html:has(.jh-home) .jh-compass .l3 { animation-duration: 36s; }
  html:has(.jh-home) .jh-compass .l4 { animation-duration: 48s; }
  html:has(.jh-home) .jh-compass .l5 { animation-duration: 60s; }
  html:has(.jh-home) .jh-compass .l6 { animation-duration: 72s; }
}

/* PC-only：罗盘各层独立旋转。
   外层八卦、外圈卦象、内层罗盘、太极盘分别转动；光晕层继续呼吸，
   不再让整组 jh-cmp-stack 作为刚性组合体旋转。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-compass .jh-cmp-stack {
    animation: none !important;
    transform-origin: 50% 50%;
    will-change: transform;
  }

  html:has(.jh-home) .jh-compass img.jh-cmp-layer {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
  }

  html:has(.jh-home) .jh-compass .l3 {
    animation: jh-cmp-cw 36s linear infinite !important;
  }
  html:has(.jh-home) .jh-compass .l4 {
    animation: jh-cmp-ccw 48s linear infinite !important;
  }
  html:has(.jh-home) .jh-compass .l5 {
    animation: jh-cmp-ccw 60s linear infinite !important;
  }
  html:has(.jh-home) .jh-compass .l6 {
    animation: jh-cmp-cw 72s linear infinite !important;
  }

  html:has(.jh-home) .jh-compass.paused .jh-cmp-stack,
  html:has(.jh-home) .jh-compass.paused .jh-cmp-layer {
    animation-play-state: paused !important;
  }
}

/* PC-only：AI 纵向布局最终覆盖，必须位于全部历史收尾规则之后。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-ai {
    height: auto;
    min-height: calc(390 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(22 * var(--u));
    padding: calc(30 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
    box-sizing: border-box;
    overflow: hidden;
  }

  html:has(.jh-home) .jh-ai-copy,
  html:has(.jh-home) .jh-chat {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    inset: auto;
    z-index: 3;
    width: min(100%, calc(620 * var(--u)));
    margin: 0 auto;
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-ai .jh-chat {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  html:has(.jh-home) .jh-ai-copy {
    text-align: center;
  }

  html:has(.jh-home) .jh-ai-copy h2 {
    margin-top: calc(4 * var(--u));
    margin-bottom: calc(7 * var(--u));
  }

  html:has(.jh-home) .jh-ai-copy p {
    margin: 0 auto calc(9 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scenes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(6 * var(--u));
    margin: calc(10 * var(--u)) auto calc(12 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scene {
    min-width: 0;
    min-height: calc(38 * var(--u));
    padding: calc(7 * var(--u)) calc(8 * var(--u));
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-ai-scene span {
    white-space: normal;
  }

  html:has(.jh-home) .jh-ai-copy > .jh-gold-btn {
    display: inline-flex;
    justify-content: center;
  }

  html:has(.jh-home) .jh-chat {
    flex: none;
  }

  html:has(.jh-home) .jh-bubble {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: calc(20 * var(--u));
  }

  html:has(.jh-home) .jh-chat-panel {
    width: 100%;
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-chat-cols {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
  }

  html:has(.jh-home) .jh-chat-cols > div {
    border-left: 0;
    border-top: 1px solid #555d5e;
    padding-left: 0;
    padding-top: calc(10 * var(--u));
  }

  html:has(.jh-home) .jh-ai-scenes {
    grid-template-columns: 1fr;
  }
}

/* PC-only：V3 原始中间图为唯一视觉底层；文字直接落图，不再加黑底/重复边框。 */
@media (min-width: 843px) {
  html:has(.jh-home) .jh-panel .jh-chart {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  html:has(.jh-home) .jh-life .jh-panel {
    margin-top: calc(14 * var(--u));
  }

  html:has(.jh-home) .jh-ai {
    height: calc(124.8 * var(--u)) !important;
    max-height: calc(124.8 * var(--u)) !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    display: block;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden;
  }

  /* 【2026-10-15 · AI 底图门控修复】本条原为「无条件 + !important」，且位于
     .jh-ai-bg[data-bg-ready="true"] 之后 ⇒ 必然压过延迟加载规则，导致 AI 图首屏照常请求
     （实测：首屏 sec-ai-mid-v3.png 请求 1 次；该轮省下的 1.53 MiB 实际只来自 Footer 图）。
     现补 [data-bg-ready="true"] 门控；!important 与其余 PC 参数全部保留，ready 后视觉逐项不变。 */
  html:has(.jh-home) .jh-ai-bg[data-bg-ready="true"] {
    inset: 0;
    left: 0;
    right: 0;
    clip-path: none !important;
    background-color: transparent !important;
    background-image: url('/home/sec-ai-mid-v3.png') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat;
  }

  html:has(.jh-home) .jh-ai-bg::after {
    display: none !important;
    content: none !important;
  }

  html:has(.jh-home) .jh-ai-copy {
    position: absolute;
    left: 13%;
    top: 18%;
    width: 42%;
    margin: 0;
    text-align: left;
    z-index: 3;
  }

  html:has(.jh-home) .jh-ai-copy::before {
    display: none !important;
    content: none !important;
  }

  html:has(.jh-home) .jh-ai-copy h2,
  html:has(.jh-home) .jh-ai-copy p,
  html:has(.jh-home) .jh-ai-copy .jh-eyebrow {
    text-shadow: 0 1px 2px #05090bcc;
  }

  html:has(.jh-home) .jh-ai-scenes {
    display: flex;
    width: 100%;
    gap: 14px;
    margin: 42px 0 30px;
  }

  html:has(.jh-home) .jh-ai-scene {
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    padding: 8px 6px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  html:has(.jh-home) .jh-ai-scene span {
    white-space: nowrap;
  }

  html:has(.jh-home) .jh-ai-scene b {
    color: #f4d477;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(4, 8, 9, .92), 0 0 5px rgba(4, 8, 9, .62);
  }

  html:has(.jh-home) .jh-chat {
    position: absolute;
    left: auto;
    right: 8%;
    top: 22%;
    bottom: auto;
    width: 34%;
    margin: 0;
    z-index: 4;
  }

  /* 【2026-10-15 第二次校正】红圈文字属于左侧说明组下方内容，
     不随黄色圈标题做水平右移；仅将红圈内容上移。
     黄色圈标题单独右移，避免压住背景人物。 */
  html:has(.jh-home) .jh-ai-copy {
    left: 13%;
  }
  html:has(.jh-home) .jh-ai-copy .jh-eyebrow,
  html:has(.jh-home) .jh-ai-copy h2,
  html:has(.jh-home) .jh-ai-copy > p {
    position: relative;
    left: 12%;
  }
  html:has(.jh-home) .jh-ai-scenes {
    margin-top: 16px;
  }
  /* 【2026-10-15 · AI 右侧文字安全区】保留中间图内嵌金色框，
     只收紧 HTML 对话内容，使标题、列表和分析文字完整落在框内。
     不删文案、不改中间图、不增加遮罩；仅 PC 首页生效。 */
  html:has(.jh-home) .jh-ai .jh-chat {
    width: 31%;
    right: 10% !important;
    top: 14% !important;
  }
  html:has(.jh-home) .jh-ai .jh-chat-cols {
    grid-template-columns: .78fr 1fr;
    gap: 12px;
  }
  html:has(.jh-home) .jh-ai .jh-chat-cols > div {
    position: relative;
    top: -24px;
    padding-left: 10px;
  }
  html:has(.jh-home) .jh-ai .jh-chat-cols li {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  /* 右框底部两处文字（「古籍依据」「查看完整推演」）仍压到框线外：
     不再只移动整组，而是收紧两列内部的行距，让四项列表和推演链接
     都落在图片内嵌边框的上下安全区内，保持文字字号不变。 */
  html:has(.jh-home) .jh-ai .jh-chat-cols li {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25;
  }
  html:has(.jh-home) .jh-ai .jh-chat-cols p {
    margin-top: 1px;
    margin-bottom: 1px;
    line-height: 1.35;
  }

  html:has(.jh-home) .jh-ai-scene {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  html:has(.jh-home) .jh-bubble {
    margin-bottom: 18px;
  }

  html:has(.jh-home) .jh-chat-title {
    margin-bottom: 16px;
  }

  html:has(.jh-home) .jh-chat-cols ul,
  html:has(.jh-home) .jh-chat-cols p {
    line-height: 1.7;
  }

  html:has(.jh-home) .jh-chat-cols li {
    padding: 4px 0;
  }

  html:has(.jh-home) .jh-bubble {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #eee8da;
    text-shadow: 0 1px 2px #05090bcc;
  }

  html:has(.jh-home) .jh-chat-panel {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  html:has(.jh-home) .jh-chat-cols {
    grid-template-columns: 1fr 1.3fr;
    gap: 16px;
  }

  html:has(.jh-home) .jh-chat-cols > div {
    border: 0;
    padding: 0;
  }
}

/* PC：AI 中间图与 Hero 的固定版心同宽，不允许铺到两侧留白。 */
@media (min-width: 1440px) {
  html:has(.jh-home) .jh-ai {
    width: calc(100% - (2 * var(--sf-side)));
    margin-left: var(--sf-side);
    margin-right: var(--sf-side);
  }
}

@media (min-width: 843px) and (max-width: 1439px) {
  html:has(.jh-home) .jh-ai {
    width: 88%;
    margin-left: 6%;
    margin-right: 6%;
  }
}

/* PC 首页导航：按设计稿收敛为八个主入口 + 搜索 + 登录注册。
   仅命中首页桌面导航，不触碰移动端和其它页面导航。 */
@media (min-width: 1024px) {
  html:has(.jh-home) nav.fixed .home-desktop-nav {
    gap: clamp(14px, 1.35vw, 22px);
    color: #d6c9ae;
  }
  html:has(.jh-home) nav.fixed .home-nav-link {
    position: relative;
    color: #d6c9ae;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    transition: color .2s ease;
  }
  html:has(.jh-home) nav.fixed .home-nav-link:hover {
    color: #f0d38f;
  }
  html:has(.jh-home) nav.fixed .home-nav-link.is-active {
    color: #f0d38f;
    font-weight: 600;
  }
  html:has(.jh-home) nav.fixed .home-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 24px;
    height: 2px;
    transform: translateX(-50%);
    background: #e3c77b;
  }
  html:has(.jh-home) nav.fixed .home-desktop-nav > [aria-label="全站速查"] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #d6c9ae;
  }
  html:has(.jh-home) nav.fixed .home-desktop-nav > [aria-label="全站速查"] > span:not(:first-child),
  html:has(.jh-home) nav.fixed .home-desktop-nav > [aria-label="全站速查"] > kbd {
    display: none;
  }
  html:has(.jh-home) nav.fixed .home-nav-login {
    padding: 7px 15px;
    border: 1px solid rgba(226, 195, 119, .78);
    border-radius: 999px;
    color: #f0d38f;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
  }
  html:has(.jh-home) nav.fixed .home-nav-login:hover {
    color: #171412;
    background: #e8c779;
  }
}