/* ⚠️ 本文件 = 【手机端】首页专属，改这里不影响另一端
另一端在：src/app/home-1to1.css + src/components/home/Home{Hero,Engines,Ai,Library,Tools,LifeMap,Trust}.tsx
共用层见 docs/PLATFORM-MAP.md（改共用层必须两端各自验证：PC 1440×900 + 手机 390×844）
禁：在此文件里引用另一端的类名/组件 · 闸门：node scripts/check-home-isolation.mjs */
/* ═══════════════════════════════════════════════════════════════════════════════
九宫首页 · 手机端专属样式（手机方案 v4 · **逐项对齐用户设计图 + 用户代码包**）
═══════════════════════════════════════════════════════════════════════════════
用户报障 2026-09-18：「太极完全被你变样了，距离也不对 —— 严格按照我提供的一比一复刻」
→ 本轮重做：① 仪盘改用**用户代码包的分层结构 + 设计图画形**（v3 复用站内 TaijiWheel
classic 几何 = 偏橙粗环 + 近黑实心太极，与设计图的「暖金细线浅色罗盘」不符 → 已弃用）；
② 全部间距改为设计图实测值（v3 的 hero 72vh 造成 442px 死区 = 用户说的「距离不对」）。
唯一视觉标准 = 设计图 C:\Users\4513\Desktop\手机端\4776b953-….png（853×1844 = 390×844
屏的 2.1872 倍稿；本文件写的 px = 实测 png px ÷ 2.1872）
结构/文案/动画 = 用户代码包（index.html + styles/mobile-home.css + scripts/mobile-home.js）
+ HERMES_MOBILE_PROMPT.md
── 设计图实测总表（css px @390；本轮以此逐条落地）────────────────────────
页边距 21.5 · 四格卡 167.3×77.3（row2 75.0）· 卡横距 12.3 / 纵距 6.8
卡内：图标 52（左内缩 2.3）· 标题 12px（字面 40.7×11.0）· 副标题 9px（字面 45.7×7.3）
箭头 10×6.5（右 11.6 / 底 22.4）
仪盘：外径 164 · top 26（y26..190，圆心 (195,108)）· 中心太极 36 · 顶针 x=195 y0→108
文案：h1 字面 y174.2..207.6 · h2 219.0..233.6 · 短语 246.0..255.6 · 胶囊 147×34 y273..307
区块：hero 0..336 · 入口 339.7..498.8 · 易学书馆 505..611.3 · 九宫文库 621.4..730.6
· 页脚盒 740.3..787 · 花形纹横线 792 · 底部山水带 800..843（整页 843 = 单屏稿）
── 与用户代码包的 5 处「集成适配」（都不改设计图视觉，逐条列明）──────────
① 作用域：用户样式是独立 demo（html/body 级裸选择器）→ 全部规则加 `.jgm-home`
前缀、整份包在 `@media (max-width:842px)` 内 → 结构上不可能命中 PC 视口；
② `.mountains` 由「div + background(cover)」改为「![]()
+ width:100%」= 只缩放不裁切；
③ 站内 PC 版式（固定导航 / PC 页脚 / 旧长图页）在本页让位；
④ 繁/简 与 昼/夜 两个站内开关保留在抽屉里（用户 2026-09-17 明确要求）；
⑤ 仪盘：用户包 assets/taiji-wheel.svg **实际不存在**（zip 只有 5 个文件）→ 按设计图
逐环实测还原为手机端内联 SVG（分层结构照用户 mobile-home.css 的 .orbit/.bagua/
.grid/.glow/.taiji 五层），分层参数照用户指令。
── 素材来源（**一份也不重绘**）────────────────────────────────────────────
· 顶部山水 /home/mobile-hero.webp = 站内既有九宫宣纸山水原稿（只缩放）
· 书脊照片 /home/mobile-books.webp = public/home/sec-library.webp 的书脊局部（只缩放）
· 底部山水带 /home/mobile-foot.webp = public/home/footer-bg.webp 的下部（只缩放、贴底）
· 仪盘 / 徽章 / 统计图标 / 页脚图标 / 角饰 / 云纹带 = 按设计图形状内联 SVG 描线
（交付包无 assets/；颜色走令牌 → 昼夜两套都能跟随）
── P3-A 新增（2026-09-19 · 方案A 插入式）────────────────────────────────────
在 Hero 与四格入口之间插入两块：① AI 入口按钮（金色胶囊「问 AI 一句话 →」）
② 人生场景（标题 + 副题 + 一张大卡四行）。样式见本文件「══ 3c.」段，
结构见 HomeMobilePage.tsx 的 （唯一 AI 入口区，2026-10-01 三块合一）。
**既有 5 个区块（hero/entries/book/library/foot）尺寸一字未改**，只整体下移
341.9px@390（文档高 846 → 1188）。图稿与令牌出处：
docs/v2phase1-20260919/P3-DESIGN-NOTES.md + P3-mockup-mobile-ai.html（业主选定方案A）。
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 842px) {
/* ══ 0. 集成适配（只让站内 PC 版式让位；不动设计图任何视觉值） ══════════ */
body:has(main > .jh-home) .jh-m-page,
html.jg-home-page .jh-m-page {
padding-top: 0 !important;
min-height: 100dvh;
}
/* 站内固定导航（6 胶囊工具条 / 繁简 / 昼夜 / 汉堡）：整条让位给本页 .jg-header */
body:has(main > .jh-home) nav.fixed,
html.jg-home-page nav.fixed {
display: none !important;
}
/* 站内 PC 页脚：本页不渲染（本页自带设计图那条页脚） */
main:has(> .jh-home) ~ footer,
html.jg-home-page main ~ footer {
display: none;
}
/* 页面底色跟随本页令牌（压过 BRAND 组的暗底；PC 断点下的规则不受影响） */
html:has(main > .jh-home) {
background-color: #f4f0e7;
}
html:has(main > .jh-home) body {
background-color: #f4f0e7;
color: #24231f;
}
html:has(main > .jh-home):has(.jgm-home[data-jgm-theme='ink']) {
background-color: #080b0c;
}
html:has(main > .jh-home):has(.jgm-home[data-jgm-theme='ink']) body {
background-color: #080b0c;
color: #f0e9da;
}
/* ══ 1. 页面令牌（昼夜两套值逐字取自用户方案）══════════════════════════ */
.jh-m-page.jgm-home {
--jgm-bg: #f4f0e7;
--jgm-surface: #faf8f2;
--jgm-soft: #ece7dc;
--jgm-ink: #24231f;
--jgm-muted: #6f695d;
--jgm-gold: #b08a3c;
--jgm-line: rgba(80, 65, 40, 0.14);
/* 设计图卡片/环线描边：实测 (210,186,150) = #b08a3c 于 #faf8f2 上 α≈0.5 */
--jgm-cardline: rgba(176, 138, 60, 0.5);
/* 仪盘细线（设计图：暖金发丝线，最外圈最淡） */
--jgm-wline: rgba(176, 138, 60, 0.55);
--jgm-wline-soft: rgba(176, 138, 60, 0.34);
/* 仪盘中心太极（设计图实测色）：底 奶米黄 / 半瓣 暖褐 / 点 暖褐 & 奶白 */
--jgm-tj-bg: #fbe7bc;
--jgm-tj-tan: #c79a5c;
--jgm-tj-deep: #a9783c;
--jgm-tj-light: #fef6df;
/* 用户 .hero:after 渐变里的暖白色（按主题换成墨色，只换颜色、不动构图） */
--jgm-haze: 250, 248, 242;
display: block;
position: relative;
width: 100%;
margin: 0;
padding-bottom: 0;
background: var(--jgm-bg);
color: var(--jgm-ink);
font-family: 'Noto Serif SC', 'Songti SC', serif;
line-height: 1.5;
overflow-x: clip;
}
.jh-m-page.jgm-home[data-jgm-theme='ink'] {
--jgm-bg: #080b0c;
--jgm-surface: #111517;
--jgm-soft: #171b1d;
--jgm-ink: #f0e9da;
--jgm-muted: #aaa292;
--jgm-gold: #c6a060;
--jgm-line: rgba(198, 160, 96, 0.18);
--jgm-cardline: rgba(198, 160, 96, 0.42);
--jgm-wline: rgba(198, 160, 96, 0.6);
--jgm-wline-soft: rgba(198, 160, 96, 0.36);
--jgm-tj-bg: #e8d3a6;
--jgm-tj-tan: #a9814a;
--jgm-tj-deep: #8d6934;
--jgm-tj-light: #f2e3c0;
--jgm-haze: 8, 11, 12;
}
.jh-m-page.jgm-home a {
color: inherit;
text-decoration: none;
}
.jh-m-page.jgm-home img {
max-width: 100%;
}
/* ══ 2. 顶部导航（设计图：透明、浮在山水上；印 26 / 字标 18 / 汉堡 14×11 / 右距 24）
顶距：设计图实测印顶 y8.7，用户书面指令「顶部约 20~28px」→ 取 20（+安全区）══ */
.jh-m-page.jgm-home .jg-header {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 12px;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border-bottom: 1px solid transparent;
transition: 0.25s;
box-shadow: none !important;
}
.jh-m-page.jgm-home .jg-header.scrolled {
background: color-mix(in srgb, var(--jgm-surface) 88%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom-color: var(--jgm-cardline);
}
.jh-m-page.jgm-home .jg-logo {
display: flex;
align-items: center;
gap: 7px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.06em;
color: #24231f;
}
.jh-m-page.jgm-home .jg-header.scrolled .jg-logo,
.jh-m-page.jgm-home .jg-header.scrolled .menu {
color: var(--jgm-ink);
}
/* 太极印：设计图实测直径 26 */
.jh-m-page.jgm-home .mark {
width: 26px;
height: 26px;
border: 1.2px solid currentColor;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 17px;
line-height: 1;
}
/* 汉堡：设计图实测线长 14、线粗 1、线距 4；点击区 ≥44×34 不可见（无障碍） */
.jh-m-page.jgm-home .menu {
width: 44px;
height: 34px;
border: 0;
background: transparent;
color: #24231f;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
cursor: pointer;
padding: 0;
}
.jh-m-page.jgm-home .menu i {
display: block;
width: 14px;
height: 1px;
background: currentColor;
}
/* ══ 3. Hero（设计图实测：hero 区 0..336 = 336/390 = 86.15vw；山水只缩放不裁切）
v3 用的是 72vh(=608) → 山水(260) 与文案(442) 之间 182px 死区 = 「距离不对」主因
→ 本轮整条按设计图重排：文案贴山水下缘，h1 字面落在 y174.2（设计图实测）══ */
.jh-m-page.jgm-home .hero {
position: relative;
height: 86.15vw;
min-height: 0;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
background: var(--jgm-bg);
}
/* 山水：只缩放（宽高比由文件 1200×800 决定 → 390 宽出 260 高）；下缘羽化融进纸面。
羽化 = 只做 alpha 渐隐，不加滤镜/不改色/不裁切、不动构图。 */
.jh-m-page.jgm-home .mountains {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block;
opacity: 0.98;
-webkit-mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0 74%, transparent 100%);
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
/* 用户原 .hero:after 渐变（暖白 → 透明 → 暖白 78%）：把山水带下缘融进纸面/墨面。
只把暖白换成主题令牌（--jgm-haze），角度/停靠点/透明度一字未改。 */
.jh-m-page.jgm-home .hero:after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(var(--jgm-haze), 0.08),
transparent 38%,
rgba(var(--jgm-haze), 0.78)
);
pointer-events: none;
}
/* 设计图 hero 下缘那道「云纹双细线 + 中心花饰」装饰带（实测 y320~336，页宽贯通）。
交付包无此素材 → 按设计图形状内联 SVG 描线（只做装饰线，不占布局高度）。 */
.jh-m-page.jgm-home .hero-band {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4.1vw;
background: var(--jgm-band);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 100%;
opacity: 0.95;
pointer-events: none;
z-index: 4;
}
/* ── 3a. 仪盘（设计图实测：外径 164、top 26、圆心 (195,108)；顶针 x=195 y0→108）
分层结构照用户 mobile-home.css 的 .orbit / .bagua / .grid / .glow / .taiji 五层；
分层旋转照用户指令（见下 .jgm-w-* 各条）。**不旋转整张图**，山水/建筑静止。── */
.jh-m-page.jgm-home .wheel {
position: absolute;
z-index: 2;
top: 6.67vw; /* 设计图实测 26/390 */
left: 50%;
width: 42.05vw; /* 设计图实测 164/390 */
aspect-ratio: 1;
transform: translateX(-50%);
pointer-events: none;
}
/* 顶部竖针：设计图实测一条发丝金线，从页面最顶(y0)垂到仪盘圆心(y108)，
中部一枚菱形花饰。放在仪盘外层（**不参与任何旋转**）。 */
.jh-m-page.jgm-home .wheel .needle {
position: absolute;
left: 50%;
bottom: 50%; /* 圆心高度 */
width: 1px;
/* 设计图实测：针从页面最顶 y0 垂到圆心 y108 → 高 108/390 = 27.7vw */
height: 27.7vw;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent 0, var(--jgm-wline) 30%, var(--jgm-wline) 100%);
}
.jh-m-page.jgm-home .wheel .needle i {
position: absolute;
top: 44%; /* 设计图菱形花饰 ≈ y47 */
left: 50%;
width: 4px;
height: 4px;
margin-left: -2px;
border: 1px solid var(--jgm-wline);
transform: rotate(45deg);
}
.jh-m-page.jgm-home .wheel .needle i:last-child {
top: 76%; /* 设计图：针与仪盘外环相交处 y26 一枚细环 */
width: 7px;
height: 7px;
margin-left: -3.5px;
border-radius: 50%;
transform: none;
}
/* 分层：每层各一块