/* ============================================================
   首页
   欢迎语、特色卡片、横向滚动卡片墙
   ============================================================ */

/* ---- 欢迎语 ---- */
.greeting h1 {
    padding: clamp(28px, 5vw, 60px) var(--gutter-ramp) 0px;
    font-size: 55px;
    font-weight: 700;
    letter-spacing: -0.02em;   /* 大标题收紧字距，苹果排版习惯 */
}
/* 「先刷重点」整块未渲染时（开关关/卡片删光），Banner 直接邻接策展标题：
   补回 70px 顶距（与 .hlts-section padding-top 的 70 同规，全断点生效）。
   相邻选择器只在 Banner 紧跟标题时命中——「先刷重点」渲染时中间隔着
   .hlts-section，不命中，画廊→标题 80px（浮条所在段）零影响；
   显隐条件与模板渲染条件自同步，无需模板配合（2026-10-15） */
.home-banner + .greeting {
    margin-top: 70px;
}
.greeting h2 {
    /* 2026-10-14 用户指定 70px 顶距；2026-10-15 归零：与上方「先刷重点」画廊的 70px
       总间距改由 .hlts-section 的 padding-bottom 独自承担（一处承担原则，避免两处叠加难算）。
       首页 h2 仅「最新作品」标题一处，归零无其他影响；
       「先刷重点」不渲染时的 70px 由上方 .home-banner + .greeting 相邻选择器补回 */
    padding: 0px var(--gutter-ramp);
    margin-top: 0;
    font-size: 25px;    /* 2026-10-14：22px → 25px，与「帮手在此」货架标题（.help-shelf-title）字号对齐 */
    font-weight: 600;   /* 500 → 600，同上，字重一并对齐 */
    color: var(--color-text-sub);
}
/* 卡片行标题两段色（2026-10-14）：前半深色 + 后半次级灰，参照帮手货架标题
   （.help-shelf-title / .help-shelf-title-sub）的用色；字号/字重已对齐货架标题
   （见上方 .greeting h2），这里只管颜色 */
.greeting h2 .rail-title { color: #1d1d1f; }
.greeting h2 .rail-title-sub { color: #6e6e73; }   /* 苹果次级灰，同帮手货架 */

/* ---- 首页顶部背景图（和用户信息页尺寸一致） ---- */
/* 2026-10-13：默认兜底图（head_photo.jpg）按需求移除——后台没传图就
   没有背景；图和文字行都没设置时整个 Banner 区压根不渲染（home.html）。
   background-size/position 保留：后台传图后按这些规则铺满居中。 */
.home-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin-top: calc(-1 * var(--nav-height));  /* 往上延伸到导航栏底下 */
    padding-top: var(--nav-height);              /* 内容在导航栏下方 */
    /* 高度对齐苹果官网首页置顶大图（--hero-content-height 桌面基础档 580px）。
       苹果的数值是"导航栏以下"的净高；我们的 Banner 钻进 48px 导航栏底下
       （全局 border-box，min-height 含 padding-top），所以统一 + var(--nav-height)。
       其余档位见下方媒体查询梯队。 */
    min-height: calc(580px + var(--nav-height));
    display: flex;
    align-items: center;
}

/* ---- Banner 高度梯队：1:1 对齐苹果官网首页 hero（homepage.built.css :root 变量） ----
   苹果按"屏宽 × 视口高"双条件选档：大屏高视口给最高档 692，
   竖屏窗口/平板给 650，手机 500。断点沿用苹果原值（1069/1068/734）。 */
@media (min-width: 1069px) and (min-height: 776px) {
    .home-banner { min-height: calc(692px + var(--nav-height)); }   /* 1920×1080 全屏就是这一档 */
}
@media (max-width: 1068px) {
    .home-banner { min-height: calc(570px + var(--nav-height)); }
}
@media (max-width: 1068px) and (min-height: 734px) {
    .home-banner { min-height: calc(650px + var(--nav-height)); }   /* 后写覆盖上行：视口够高时用 650 */
}
@media (max-width: 734px) {
    .home-banner { min-height: calc(500px + var(--nav-height)); }   /* 手机档 */
}
.home-banner h1 {
    position: relative;
    z-index: 1;
    padding: 0 var(--gutter-ramp);
}
/* h1 自身字号归零（2026-10-13）：.greeting h1 的 55px 会成为每个行盒的
   「支柱」（strut），把小字号行也撑到 63px 高——行与行之间出现一大截
   假间距（用户截图报障）。文字段的字号全部由 .banner-seg 的变量显式
   给出，h1 本身不需要字号；归零后每行高度回归真实内容高度。 */
.home-banner h1.home-banner-text { font-size: 0; }

/* ---- Banner 文字行（后台「Banner 区」行编辑表，行号是分组键） ----
   两级结构（home.html regroup 分组）：
   .banner-line = 行（相同行号归一行，display:block 竖排各占一行）；
   .banner-seg  = 段（同一行里的几段文字肩并肩 inline-block，基线对齐）。
   每段的样式变量由 home.html 逐段内联输出，没设过的段落到逗号后默认值。 */
.home-banner .banner-line {
    display: block;
}
.home-banner .banner-seg {
    display: inline-block;
    line-height: 1.15;                          /* 行距=该段字号×1.15，大小字号混排不松散 */
    /* 颜色三级回落（2026-10-15）：行级 --ln-color > 块级 --hero-color（后台
       「Banner 文字颜色」注入在 .home-banner 上）> 白（历史默认）。 */
    color: var(--ln-color, var(--hero-color, #fff));
    font-size: var(--ln-fs, 55px);              /* 默认 55px，同 .greeting h1 */
    font-weight: var(--ln-fw, 700);             /* 默认加粗 */
    letter-spacing: var(--ln-ls, -0.02em);      /* 默认大标题微收紧（苹果排版习惯） */
}
.home-banner .banner-seg + .banner-seg { margin-left: 0.35em; }   /* 同行段间留缝防粘连 */
/* 行与行之间的呼吸感：后台「Banner 行间距」注入 --hero-line-gap（px），
   只加在相邻行之间（首行上方/末行下方不加）。留空回落 0 = 紧凑。 */
.home-banner .banner-line + .banner-line { margin-top: var(--hero-line-gap, 0px); }

/* ---- Banner 文字九宫格位置（后台「Banner 区」选择；留空不输出类 = 左中现状） ----
   横向 = justify-content（flex 容器级），纵向 = align-items，
   text-align 管 h1 内多行折行时的对齐方向。
   上/下两排额外补 24px 呼吸空间，避免文字贴着导航栏底缘或区块底边。 */
.home-banner.hero-pos-tl { justify-content: flex-start; align-items: flex-start; text-align: left;   padding-top: calc(var(--nav-height) + 24px); }
.home-banner.hero-pos-tc { justify-content: center;      align-items: flex-start; text-align: center; padding-top: calc(var(--nav-height) + 24px); }
.home-banner.hero-pos-tr { justify-content: flex-end;    align-items: flex-start; text-align: right;  padding-top: calc(var(--nav-height) + 24px); }
.home-banner.hero-pos-ml { justify-content: flex-start;  align-items: center;     text-align: left; }
.home-banner.hero-pos-mc { justify-content: center;      align-items: center;     text-align: center; }
.home-banner.hero-pos-mr { justify-content: flex-end;    align-items: center;     text-align: right; }
.home-banner.hero-pos-bl { justify-content: flex-start;  align-items: flex-end;   text-align: left;   padding-bottom: 24px; }
.home-banner.hero-pos-bc { justify-content: center;      align-items: flex-end;   text-align: center; padding-bottom: 24px; }
.home-banner.hero-pos-br { justify-content: flex-end;    align-items: flex-end;   text-align: right;  padding-bottom: 24px; }

/* ---- 卡片墙（横向滑动） ---- */
.card-rail {
    overflow-x: auto;               /* 超出可横向滚动 */
    scroll-padding-left: var(--gutter-ramp);
    /* 吸附全部由 main.js 的 rAF 动画接管（触摸拖拽/滚轮/箭头统一一套）：
       方向优先 + 慢速指数趋近。CSS 原生 snap 完全弃用——
       它的收尾速度浏览器写死，且只会"吸最近"（会往滑动反方向回吸） */
    touch-action: pan-y;            /* 触摸端：纵向手势留给页面滚动，横向手势归 JS 拖拽 */
    will-change: scroll-position;   /* 预告：JS 会逐帧驱动这个容器滚动，让浏览器提前把它优化成独立滚动层 */
    cursor: grab;                   /* 桌面暗示：可以按住拖动 */
    scrollbar-width: none;          /* 隐藏滚动条（Firefox） */
}
/* 拖拽进行中：抓手变握拳，禁止选中文字 */
.card-rail.is-dragging { cursor: grabbing; user-select: none; }
/* 横滑进行中（拖拽跟手 + 吸附动画，is-moving 由 main.js 添加/移除）：
   关掉卡片 hover 的放大和阴影。这两条过渡走的是主线程重绘，滚动中鼠标底下的
   卡片会反复进出 hover，白白吃掉本就紧张的每帧预算——而且画面在动，hover 根本看不见。
   阴影保留静态值（与 cards.css 的默认值一致），避免切换瞬间闪一下。 */
.card-rail.is-moving .work-card { transition: none; }
.card-rail.is-moving .work-card:hover {
    transform: none;
    box-shadow: var(--card-shadow);   /* 滑动中回退到默认阴影（引用变量，自动跟随全局调整） */
}
/* 禁止卡片图片的原生拖拽（拖影），否则鼠标拖动会被图片抢走 */
.card-rail img { -webkit-user-drag: none; }
.card-rail::-webkit-scrollbar { display: none; }  /* 隐藏滚动条（Chrome） */

.rail-track {
    --card-w: 480px;      /* 本排卡片宽度：卡片、间距、末尾垫三处共用这一个数 */
    --rail-gap: 20px;     /* 卡片间距：对齐下方帮手卡排（苹果货架实测 2×10px margin），两排视觉节奏一致 */
    display: flex;
    gap: var(--rail-gap);
    padding: clamp(12px, 1.5vw, 20px) 0 clamp(24px, 2.5vw, 32px); 
    padding-left: var(--gutter-ramp);
}

.rail-track::after {
    content: "";
    /* 末尾垫 = 轨道可视宽 - 卡宽 - 间距：
       保证最后一张卡恰好能滑到与欢迎语左缘对齐的位置。
       卡片改宽、窗口变窄，垫子自动重算，永不过时 */
    flex: 0 0 max(0px, calc(100% - var(--card-w) - var(--rail-gap)));
}

/* ---- 左右滑动按钮 ---- */
/* 1:1 对齐 apple.com.cn/store 货架的 paddlenav（rs-merch-4.19.6 store-home.css 实测）：
   苹果该处 class = paddlenav-alpha + paddlenav-elevated，56px 档、半透明灰、无阴影。
   苹果把外观抽成 --sk-paddlenav-* 变量，这里照搬同一思路抽成 --paddle-*，
   两排货架（作品卡行 + 帮手卡行）共用本段，换肤只动这一处。 */
.card-rail-wrap { position: relative; }

.rail-btn {
    --paddle-d: 56px;                                /* 按钮直径（苹果 elevated 档） */
    --paddle-bg: rgba(210, 210, 215, 0.64);          /* 常态背景 #d2d2d7a3 */
    --paddle-bg-hover: rgba(222, 222, 227, 0.7);     /* 悬停背景（hsla(240,7%,88%,.698) 换算） */
    --paddle-bg-active: rgba(194, 194, 199, 0.65);   /* 按下背景（hsla(240,4%,77%,.654) 换算） */
    --paddle-icon: rgba(0, 0, 0, 0.56);              /* 箭头墨色 #0000008f */
    --paddle-icon-hover: rgba(0, 0, 0, 0.64);        /* 悬停/按下墨色 #000000a3 */
    position: absolute;
    top: 49%;                                /* 苹果货架微调档（rf-cards-scroller 用 49%） */
    margin-top: calc(var(--paddle-d) / -2);  /* 上移半高垂直居中（苹果同款手法，把 transform 留给显隐动画） */
    z-index: 10;
    width: var(--paddle-d);
    height: var(--paddle-d);
    display: flex;
    align-items: center;             /* 图标垂直居中 */
    justify-content: center;         /* 图标水平居中 */
    border: none;
    border-radius: 50%;
    overflow: hidden;                /* 苹果同款：按圆形裁切 */
    cursor: pointer;
    line-height: 1;
    color: var(--paddle-icon);       /* svg path 走 currentColor，跟随此色联动 */
    background: var(--paddle-bg);
    opacity: 1;                      /* 默认显示，到头由 main.js 加 is-hidden 隐藏 */
    pointer-events: auto;
    transition: background .1s linear, color .1s linear,   /* 苹果：背景/墨色 0.1s 直切 */
                opacity .5s ease, transform .5s ease;      /* 显隐：0.5s 淡入淡出（配合 scale 弹出入场） */
}
.rail-btn svg {
    display: block;                  /* svg 是内联元素，block 才能在圆里严格居中 */
    width: 100%;                     /* 苹果实测（headless 读 computed style）：svg 撑满整个按钮
                                        （56×56），chevron 视觉高度 ≈ 按钮的 47.6%；
                                        之前按 36px 视窗原尺寸渲染导致图标偏小 */
    height: 100%;
    fill: currentColor;              /* 原版为实心填充，颜色不写死在 svg 属性上 */
    pointer-events: none;            /* 图标不拦截点击，click 始终落回 button */
}
/* 到头一侧隐藏：淡出 + 缩小（苹果 disabled 退场同款；恢复显示时 transition 自动反向弹出） */
.rail-btn.is-hidden {
    opacity: 0;
    transform: scale(.8);
    pointer-events: none;
}
.rail-btn:hover  { background: var(--paddle-bg-hover);  color: var(--paddle-icon-hover); }
.rail-btn:active { background: var(--paddle-bg-active); color: var(--paddle-icon-hover); }

/* 距货架边缘 18px（苹果 inset-inline 18px） */
.rail-prev { left: 18px; }
.rail-next { right: 18px; }

/* （吸附已全部由 main.js 接管：触摸端拖拽 + 方向优先慢速吸附；
   无障碍「减少动态效果」的降级在 JS 里处理——直接跳到目标位置不播动画） */

/* ============================================================
   「帮手在此」卡片行（1:1 复刻 apple.com.cn/store 的 rf-ccard-50 货架）
   数值全部取自苹果 store-home.css 实测（其 rem 基准 17px，已换算成 px）：
   卡片 480×500、圆角 18、间距 20、文字区宽 340（内边距 28）、
   标题 28px/600、眉题 12px/600 #424245、描述 14px #1d1d1f、
   阴影 2px 4px 12px 8%黑、悬停放大 1.01 + 阴影加深
   ============================================================ */

/* 区块上下留白（2026-10-14 用户指定改为 70px）：
   上方视觉间距 = 作品卡轨道自带底垫 clamp(24px, 2.5vw, 32px) + 本值 = 70px 恒定，
   所以这里用 calc 反补差值——轨道底垫随窗口宽窄变化，本值跟着变，总间距锁死 70。
   （轨道底垫不能归零：它同时参与左右滑块按钮的垂直居中。）
   底部维持苹果节奏不动：54 + 轨道底垫 32 = 86 */
.help-shelf {
    padding-top: calc(70px - clamp(24px, 2.5vw, 32px));
    padding-bottom: 54px;
}

/* 货架标题：左右缩进与卡片对齐（沿用苹果三档渐变留白 --gutter-ramp 网格）；
   苹果标题与卡片行间距 8px；两个 span 同行排列 */
.help-shelf-heading {
    margin: 0 var(--gutter-ramp) 8px;
    font-weight: 600;
}
.help-shelf-title,
.help-shelf-title-sub {
    /* 用户指定 25px（2026-10-13 覆盖：原 26px 为对齐苹方 28px 观感的实测值）；
       行高锁 35px（苹果 :lang(zh) 的绝对行高），不随字号缩水 */
    font-size: 25px;
    font-weight: 600;
    letter-spacing: .007em;
    line-height: 35px;
}
.help-shelf-title { color: #1d1d1f; }
.help-shelf-title-sub { color: #6e6e73; }   /* 苹果次级灰 */

/* 轨道覆盖：卡宽 480、间距 20（苹果 item 间距 = 2×10px margin）。
   末尾垫 .rail-track::after 吃同一组变量，卡宽改了它自动跟着算 */
.help-shelf .rail-track {
    --card-w: 480px;
    --rail-gap: 20px;
}

/* 卡片本体（= 苹果 .rf-ccard-50）：整卡图铺满底层 + 文字浮上层（苹果同构） */
.help-card {
    display: flex;
    flex-direction: column;      /* 文字块竖排（图片已绝对定位不占流） */
    flex: 0 0 var(--card-w);     /* 弹性轨道里不许被压缩 */
    width: var(--card-w);
    height: 500px;
    background-color: #fff;
    border-radius: 18px;
    box-shadow: var(--card-shadow);   /* 苹果 #00000014（值定义在 base.css，全站统一调用） */
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all .3s cubic-bezier(0, 0, .5, 1);  /* 苹果同款缓动 */
}
/* 悬停：苹果同款轻微放大 + 阴影加深（桌面端） */
.help-card:hover {
    transform: scale3d(1.01, 1.01, 1.01);
    box-shadow: var(--card-shadow-hover);   /* 苹果 #00000029（值定义在 base.css，全站统一调用） */
}

/* 文字区（= .rf-ccard-content-info）：苹果同构——图片铺满整卡，文字浮在上层
   （素材 960×1000 顶部自带白色留白，正好衬文字）；相对定位保证 z 序在图上 */
.help-card-info {
    position: relative;
    padding: 28px;
    width: auto;
}

/* 眉题（= .rf-ccard-content-header-eyebrow）
   12px/16px：鸿蒙 12px 墨迹观感≈苹方 12px（字形同源设计），保持苹果原生值 */
.help-card-eyebrow {
    margin: 0;
    white-space: pre-line;       /* 后台 textarea 里敲的回车 = 前台真换行（默认规则会把 \n 折叠成空格） */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;           /* 苹果 :lang(zh) 覆盖：中文无字距 */
    line-height: 16px;
    color: #424245;
    padding-bottom: 8px;         /* 与标题的真实间距只有这 8px（苹果用相邻选择器清了标题的 24px） */
}

/* ===== 标题英文自动加粗（2026-10-14）=====
   需求：帮手卡片标题里的英文/数字自动比中文粗一档，后台仍填纯文本。
   原理：CSS 没有「按字符类型选中」的选择器，但 @font-face 的 unicode-range 可以——
   注册一条只声明「拉丁字符」字形的独立 face「HOS SC En-Bold」，字形文件取自
   鸿蒙官方 Black(900) 字重（全家族最粗档）的拉丁子集——来源：官方 v1.0 TTF
   （lobehub webfont 包经 npmmirror 下载），fontTools subset 拉丁区后仅 17.6KB。
   （2026-10-15 起分片包已补齐 Black(900)，但本子集仍独立保留：它来自 v1.0 且在字形
   层面做过拉丁专属收窄（_t10 = -0.01em），分片包的 Black 分片无此处理，换用会改变
   现有标题的英文断字宽度。）
   然后让标题的
   字体栈把它排在鸿蒙家族之前：
   - 英文/数字/英文标点（U+20-7E 等拉丁区）→ 命中 En-Bold → 渲染 Black 900 字形
   - 中文汉字 → 不在该 face 的 unicode-range 内 → 回退鸿蒙 SemiBold 600（观感不变）
   全端一致：字形来自项目自托管文件，与访客系统装了什么字体无关。
   影响面：仅 .help-card-header 引用该 family，全站其余文本不受影响。 */
@font-face {
    font-family: "HOS SC En-Bold";
    src: url("../../fonts/harmonyos-sans-sc/Black_latin_900_t10.8aab6dc92eb8.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;            /* 与标题声明的字重同值：请求 600 时精确命中，无歧义 */
    font-display: swap;
    /* range 照抄鸿蒙官方拉丁分片的切片方案：覆盖 ASCII 字母数字
       英文标点与扩展拉丁（拼音音标）；汉字、全角中文标点都不在 range 内，中文零变化。
       注意：本子集来自官方 v1.0（harmonyos.css 分片为 v2.400），拉丁字形两代差异极小；
       若观感突兀可回退 Bold 分片 Bold_fdb231.woff2（700）。
       字距说明：CSS letter-spacing 无法只作用于英文，故在字体文件层面把每个拉丁字形
       的占位宽度收窄 10 units（upm=1000 即 0.01em，等效英文专属负字距）——文件名
       _t10 即 tighten 10 的意思；想更紧/更松改这个数重裁即可（10=0.01em 当前值，
       20=0.02em，30=0.03em）。 */
    unicode-range:U+20-7e,U+a0-17f,U+18f,U+192,U+1a0-1a1,U+1af-1b0,U+1cd-1dc,U+1e5,U+1e7,U+1e9,U+1ef-1f0,U+1f9-1ff,U+218-21b,U+21f,U+237,U+2c6-2c7,U+2c9,U+300,U+302,U+304,U+30c,U+ff04,U+ff0b,U+ff1c-ff1e,U+ff3e,U+ff40,U+ff5c,U+ff5e,U+ffe0-ffe5;
}
.help-card-header {
    font-family: "HOS SC En-Bold", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 卡片标题（= .rf-ccard-content-header）
   25px/35px：苹果原生 28px 基础上按用户要求再收 1px（26→25）；
   按鸿蒙实测宽验算，四张卡断字位置仍与苹果官网逐字一致（卡1/卡3"帮"后、卡2 一行） */
.help-card-header {
    margin: 0;
    white-space: pre-line;       /* 同眉题：保留后台框内手动换行，窄屏自动折行照常叠加生效 */
    font-size: 25px;
    font-weight: 600;
    letter-spacing: .007em;
    line-height: 35px;
    color: #1d1d1f;
}
/* 无眉题的卡（Genius Bar）：苹果标题自带 24px 顶部内边距（有眉题时被相邻选择器清零，
   这里同样用「眉题 + 标题」相邻选择器清零，眉题的 8px 底距保持不变） */
.help-card-header {
    padding-top: 24px;
}
.help-card-eyebrow + .help-card-header {
    padding-top: 0;
}

/* 补充描述（= .rf-ccard-content-desc，仅第二、三张卡有）
   13px/19px：鸿蒙 13px 观感=苹方 14px（苹果原生值），按用户要求从 12px 加回 1px。
   注意：13px 整串 442px > 424 列宽，桌面 desc 会折成两行（苹果官网因苹方紧排是一行）；
   若想回到一行用 12px。 */
.help-card-desc {
    margin: 0;
    white-space: pre-line;       /* 同眉题：保留后台框内手动换行（多敲回车 = 前台也空行，所见即所得） */
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 19px;
    color: #1d1d1f;
    padding-top: 10px;
}

/* 标题收窄微调（2026-10-14 从四档 class 改为自由数值：后台输入收窄百分数 N，
   内联输出 CSS 变量 --hcard-fit，这里统一换算成 margin-right。
   只支持收窄方向（原 ex5 放宽档随机制废弃）；移动端统一归零见下方断点。 */
.help-card-header { margin-right: calc(var(--hcard-fit, 0) * 1%); }

/* 整卡图（= 苹果 .rf-ccard-50 img）：960×1000 素材 cover 铺满整卡（苹果同构）。
   之前"下半区容器 + cover"的结构会把整卡图放大裁出中间一条带，构图全偏 */
.help-card-img {
    position: absolute;
    inset: 0;                    /* 铺满整卡（配合卡片 overflow:hidden 吃圆角） */
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 苹果同款 object-fit/position（50% 50% 默认值） */
}

/* 滑动进行中禁用悬停（与作品卡同款规则，选择器对齐帮手卡） */
.card-rail.is-moving .help-card { transition: none; }
.card-rail.is-moving .help-card:hover {
    transform: none;
    box-shadow: var(--card-shadow);   /* 滑动中回退到默认阴影（引用变量） */
}

/* ---- 「帮手在此」手机端适配（苹果 ≤736px 断点数值，套主页 768 断点） ---- */
@media (max-width: 768px) {
    /* padding-top 不再单独覆盖：基础规则的 calc 在移动端自动得 70−24=46px，
       加上轨道底垫 24px 总间距同样锁 70px；只保留底部 44px 移动端节奏 */
    .help-shelf { padding-bottom: 44px; }
    /* 货架标题移动端：鸿蒙 22px 观感对齐苹方 24px（同一换算比例），行高锁苹果实测 31px */
    .help-shelf-title, .help-shelf-title-sub {
        font-size: 22px;
        letter-spacing: .009em;
        line-height: 31px;
    }
    .help-shelf .rail-track { --card-w: 309px; }   /* 苹果移动卡宽 309（覆盖全局的 80vw） */
    .help-card { height: 450px; }
    .help-card-info { width: auto; }               /* 占满卡宽：309 − 2×28 = 253 文字列，和苹果一致 */
    .help-card-header {
        font-size: 20px;                           /* 鸿蒙 20px 观感对齐苹方移动端 21px（折行位置已验算一致） */
        letter-spacing: .011em;
        line-height: 28px;                         /* 苹果中文移动端行高绝对值（实测 21px 字号渲染 28px 行高） */
    }
    .help-card-header { padding-top: 23px; }       /* 无眉题标题顶部间距移动端 23px（苹果实测） */
    .help-card-eyebrow + .help-card-header { padding-top: 0; }
    /* 苹果移动端 dd 微调几乎全部归零（dd-compact-right-small-* 只有天才吧留 10% 的
       特例随四档机制一起废弃）：自由数值后移动端统一不微调，小屏卡窄收窄意义小 */
    .help-card-header { margin-right: 0; }
    .help-card-eyebrow { padding-bottom: 7px; }
    .help-card-desc {
        font-size: 13px;                           /* 鸿蒙 13px 观感对齐苹方 14px（移动端 desc 本就两行，无折行约束） */
        line-height: 19px;                         /* 行高锁苹果绝对值 */
        padding-top: 6px;
    }
    /* （作品卡标题移动端 25→20px 已于 2026-10-16 上移为 cards.css 组件级机制：
       .card-text h3 = calc(25px × --card-fs)，≤768px 断点系数 0.8 全站统一生效，
       2026-10-14 的本条页面级补丁随之退役，本页不再单独覆盖） */
}
/* 超小屏（苹果 ≤320px 数值） */
@media (max-width: 320px) {
    .help-shelf .rail-track { --card-w: 260px; }
    .help-card { width: 260px; }
    .help-card-info { width: auto; }               /* 260 − 2×28 = 204 文字列 */
}

/* ============================================================
   首页手机端适配
   ============================================================ */
@media (max-width: 768px) {
    .greeting h1 { font-size: 30px; }
    /* 货架标题手机端同步（2026-10-14）：作品货架标题 .greeting h2 桌面 25px 无移动端覆盖，
       而「帮手在此」货架标题（.help-shelf-title）在断点内降到 22px——手机端两行货架标题一大一小
       （与同日卡片标题不同步是同一根因）。这里逐项抄帮手货架标题的移动端值，保证两行完全一致 */
    .greeting h2 {
        font-size: 22px;                /* 同 .help-shelf-title 移动端（鸿蒙 22px 观感对齐苹方 24px） */
        letter-spacing: .009em;
        line-height: 31px;              /* 行高锁苹果实测绝对值 */
    }
    /* Banner 文字段手机档：全体行按同一系数等比缩放（0.55 → 55px 变 30.25px，
       观感对齐旧版的 30px）。不再用 min() 绝对钳制——那会把所有超过 30px 的
       行拍成同一字号，大小行混排时区分度被抹平（2026-10-15 修复）；
       等比缩放保留后台设置的行间比例，设过的小字也按比例缩。 */
    .home-banner .banner-seg { font-size: calc(var(--ln-fs, 55px) * 0.55); }
    /* （作品轨手机卡宽 80vw 已于 2026-10-16 下移到 734 断点：iPad mini 竖屏
       视口正好 768/744，曾被 768 断点误判为手机——卡被放大到 80vw 而字号
       却吃 cards.css 手机档，平板上「卡大字小」；下移后 iPad mini 竖屏
       回归桌面卡宽 480px，与 cards.css 卡片字号断点同值联动） */

    /* 手机端直接手指滑，不显示按钮 */
    .rail-btn { display: none; }
}
/* 作品轨手机卡宽（≤734 才算手机，与 cards.css 卡片字号断点同值） */
@media (max-width: 734px) {
    .rail-track { --card-w: 80vw; }   /* 卡片和末尾垫吃同一个变量，改一处两处齐变 */
}