/* ============================================================================
   brand-home.css —— 原 brand.css 的 第 2 段（11 首页专用 / 12 响应式 / HERO 轮播 / PICK UP 精选动态）
   ----------------------------------------------------------------------------
   **逐字搬过来、没有重排一行**（原第 1032–1496 行）。拆的理由：brand.css 涨到 4278 行，
   改一条规则要在大文件里翻；分段后按主题定位，每段 ≤1000 行。

   🔴 **加载顺序就是层叠顺序**：本文件必须在 brand.css 之后引用（HTML 里已按序写 5 个 link）。
      段内规则**不要搬到别的段** —— 位置一变，覆盖关系就变，视觉会飘（而截图未必看得出来）。
      要验证拆分无损，跑 `node _probe_style_hash.cjs` 对比拆分前的指纹。
   ========================================================================== */
/* ==========================================================================
   11 · 首页专用
   ========================================================================== */
/* 2026-09-20 清理：原 hero 大字板块已整块替换为 PICK UP（.pk-*），
   .hero/.hero-bg/.hero-in/.hero-kicker/.hero-title/.hero-lead 六组死规则删除；
   2026-09-20 二次清理：.pk-foot（统计 + 双 CTA）整块删除，
   .hero-cta / .hero-stats 随之失去唯一使用方，一并删除。
   2026-10-16 三次清理：首页「按系列找」独立成页（sets.html）后，
   .set-grid / .set-card / .set-thumb 失去唯一使用方，整块删除；
   新页面用的是 .setpage 作用域的 .setgrid / .setcard（照原型 #/sets），别混。
   注意 .flag-mini（文件上部）**不能删** —— 商品卡还在用（store.js 的 productCard）。 */

/* 首页「职业入口」九宫格（.cls-grid / .cls-card）已于 2026-09-19 随版块删除，
   样式一并移除；职业入口改由卡库筛选栏的职业组 + 页脚承担。 */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--ink-4);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--ink-4); color: var(--text-2); }
.table tr:last-child td { border-bottom: none; }
code.k {
  background: var(--ink); border: 1px solid var(--ink-4); border-radius: 5px;
  padding: 2px 7px; font-size: 12px; color: var(--gold-ink);
}

.empty {
  text-align: center; padding: 70px 20px; color: var(--text-3);
}
.empty .big { font-size: 15px; color: var(--text-2); font-weight: 700; margin-bottom: 8px; }

.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 30px; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--ink-4); background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; transition: .14s;
}
.pager button:hover:not(:disabled) { border-color: var(--brand-2); color: var(--gold-ink); }
.pager button.on { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* 关于页 · 色卡 */
.swatch-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--ink-4); }
.swatch .chip { height: 62px; }
.swatch .lb { padding: 9px 11px; background: var(--ink-2); font-size: 11.5px; color: var(--text-2); }
.swatch .lb b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 2px; }

.flag-demo { display: grid; gap: 18px; }
.flag-demo .row { display: grid; grid-template-columns: 148px minmax(0,1fr) 200px; gap: 16px; align-items: center; }
.flag-demo .k { font-size: 12.5px; font-weight: 700; }
.flag-demo .d { font-size: 11.5px; color: var(--text-3); }
.rule-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-4); }
.rule-item:last-child { border-bottom: none; }
.rule-item .tag {
  flex: none; width: 74px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.tag.bad { color: var(--red); }
.tag.good { color: var(--green); }

/* ==========================================================================
   12 · 响应式
   ========================================================================== */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swatch-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-in { grid-template-columns: 1fr 1fr; }
  /* 左栏收窄，结果区留白同步收 */
  .shop { --fbar-w: 300px; }
  /* 栏内宽 310 → 250px：字段组的 4 列会把 5 字标签（灰姑娘偶像）截断 → 退回 3 列。
     与 .cols-4 的声明**必须共用一个断点**，否则中间会出现「列宽不够但仍是 4 列」的区间。 */
  .fopts.scroll.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* 窄屏空间不够左右分栏：筛选栏改为贴顶栏悬浮。
     这里必须用 fixed 而不是 sticky —— sticky 的可用高度受「包含块底边」限制，
     页面滚到后段时 .shop 底边进入视口，栏会被顶出上沿（实测 -92px，关键词框变得不可点）。
     fixed 直接锚在视口上，滚到任何深度都完整可用。 */
  /* 悬浮栏会盖住结果区顶部，给结果区让出与栏高等高的净空。
     2026-09-20 起窄屏筛选栏默认收成右下角小球（.fab-filters），
     只有 body.filters-open 时才出现 —— 平时不占屏幕。
     2026-09-20 二次拍板：展开态不再是「从头顶下拉的全宽悬浮块」，
     改成**居中模态卡**（对齐 decks.html 构筑弹窗的形态）：
     暗背景 + 居中圆角卡 + 弹窗头 ✕，点暗处也能关。 */
  .shop { display: block; padding-left: 0; padding-top: 26px; }
  .filters { display: none; }                 /* 默认收起：整栏隐藏，只剩小球 */
  body.filters-open .filters {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    position: fixed; inset: 0;
    width: auto; height: auto; max-height: none;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,8,8,.68);              /* 压暗页面 = 弹窗语义 */
    backdrop-filter: blur(3px);
    z-index: 70;                              /* 盖过吸顶顶栏(60) */
  }
  body.filters-open .filters-in {
    position: relative;
    width: 100%; max-width: 440px; max-height: 100%;
    border-radius: 18px;
    background: var(--ink-2);
    border: 1px solid var(--ink-4);
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.85);
    padding: 0 16px 16px;                     /* 顶部归弹窗头管 */
  }
  /* 弹窗头：吸住卡片滚动顶部，「筛选」标题 + ✕ 常驻可见 ——
     卡片内容长（字段 91 项），滚到多深关闭按钮都够得着 */
  .fmodal-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    margin: 0 -16px; padding: 14px 16px 11px;
    background: var(--ink-2);
    border-bottom: 1px solid var(--ink-4);
  }
  .fmodal-head .t {
    font-size: 12px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-3);
  }
  .fmodal-x {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: 1.5px solid var(--ink-4);
    background: var(--ink-3); color: var(--text-2);
    cursor: pointer; transition: .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fmodal-x:hover { color: var(--text); border-color: var(--text-3); }
  .fmodal-x svg { width: 15px; height: 15px; display: block; }

  /* ── 筛选小球本体 ─────────────────────────────────────────────
     金底 + 炭黑 C 字。2026-09-20 起改用官方字标图 assets/img/brand/coptus-c.png
     （无底黑 C + 亮金描边，即导航 coptus 字标首字母），替换原 SVG 几何重绘。
     展开时 C 淡出、✕ 顶上，同一颗球负责开与关。
     z-index 40：顶栏(60) 之下、筛选面板(20) 之上 —— 面板展开时球仍可点。 */
  .fab-filters {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; border-radius: 50%;
    padding: 0; border: none;
    background: var(--gold);
    box-shadow: 0 10px 26px -8px rgba(0,0,0,.65);
    z-index: 40;
    cursor: pointer;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .fab-filters:active { transform: scale(.9); }
  .fab-filters svg { width: 27px; height: 27px; display: block; color: var(--on-accent); }
  .fab-filters img.fab-c { width: 34px; height: 30px; object-fit: contain; display: block; }
  .fab-filters .fab-x { display: none; }
  body.filters-open .fab-filters .fab-c { display: none; }
  body.filters-open .fab-filters .fab-x { display: block; }
  /* 角标 = 生效中的筛选条件个数（含关键词 / 价格，多选按选中项数计） */
  .fab-filters .fab-badge {
    display: none; position: absolute; top: -3px; right: -3px;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; background: var(--brick);
    color: #FFE9EC; font-size: 12px; font-weight: 800; line-height: 22px;
    text-align: center; border: 2px solid var(--ink);
  }
  .fab-filters .fab-badge.on { display: block; }
  /* 窄屏下栏是全宽悬浮块：把内层高度按栏高等高，让 .panel 铺满整个栏盒 */
  .filters-in { flex: 1 1 auto; }
  .detail { grid-template-columns: 1fr; }
  .cart { grid-template-columns: 1fr; }
  .sum { position: static; }
  .detail-art { max-width: 396px; }
  /* 品牌页正文双栏 → 单栏（正文块列宽低于 ~340px 会挤成竖排） */
  .grid.g-21, .grid.g-31, .grid.g-41, .grid.g-11 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .flag-demo .row { grid-template-columns: 1fr; gap: 8px; }
  .badge { transform: scale(.94); transform-origin: left center; }
  /* 手机档：筛选是居中模态卡，不再需要给「头顶下拉块」让位的净空 */
  .fgroup { padding: 11px 0; }
  .fgroup h4 { margin-bottom: 8px; }

  /* ── 手机端主导航：顶栏第二行胶囊（2026-09-20）────────────────────
     旧版这里是 `.nav { display: none }` —— 手机上没有菜单入口，想换页只能滚到
     页脚绕路。改成换行到顶栏第二行：顶栏本身是 sticky，导航就跟着常驻可见，
     四个入口一直在拇指够得到的位置。
     放不下时横向滚动而不是压缩（现在 390px 刚好放得下 4 个，以后加页面也不用改）。 */
  .topbar-in {
    flex-wrap: wrap; height: auto; row-gap: 0;
    padding: 6px 14px 0;
  }
  .brand { height: 40px; }                 /* 第一行留出稳定高度，logo 垂直居中 */
  .nav {
    display: flex; order: 3; flex: 1 1 100%;
    margin: 6px 0 0; gap: 6px;
    padding: 7px 0;
    border-top: 1px solid var(--ink-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex: none; white-space: nowrap; line-height: 1.3;
    padding: 7px 14px; font-size: 13px;
  }

  /* ── 手机端首页：PICK UP 板块节奏（原 hero 竖排规则已随板块删除）────── */
  /* 错版偏移收小：30px 字号下原来 5px 的彩边会糊成一团，读不出字 */
  .plate-lg > .p-c { transform: translate(-2.6px, -1px); }
  .plate-lg > .p-m { transform: translate(2.2px, -1.8px); }
  .plate-lg > .p-y { transform: translate(-0.6px, 2.4px); }

  .sec { margin: 38px 0; }                 /* 108px 的版块间距在手机上太空 */
}


/* ============================================================================
   HERO 轮播（index.html 专用）—— 结构对齐官方卡表站首页
   中央主 banner + 两侧露出 + 金色箭头 + 菱形指示点；深底做墙，黄做光
   ========================================================================= */
.hc {
  /* 单一口径：**定高**（--hc-h），宽度由 CSS 反推（见 .hc-slide--shot）。
     这样「中央主图完整 + 两侧露出」在任何屏宽都成立，也不会因图片比例出现裁切。
     要整体调大调小轮播，只改这一行（媒体查询里各有一套覆盖值）。

     🔴 2026-10-21 从 `clamp(200px, 40vw, 500px)` 改成「宽高双约束」。
        原来只有 vw：1920 屏上 40vw = 768 → 固定吃满 500px，完全不看窗口有多高。
        于是 1080P 屏（浏览器可视高只有 ~940，任务栏 + 地址栏吃掉 140）时，
        首屏「顶栏 + 轮播 + 常用入口六格」刚好差 20px —— 店主截图圈的就是
        「下面工具栏看不完整」。轮播是**装饰**，六格入口是**导航**，
        该让路的是前者：`min(40vw, 46vh)` 让高度同时受视口高约束。
        实测 1920×940 下 500 → 432（省 68px），六格完整露出；
        1920×1080 下仍是 497（几乎不变，观感不动）。
        判据见 data/viewports.js 与 _verify_viewport_fit.cjs。 */
  /* 2026-10-24（前端设计体检）：原 clamp(200px, min(40vw,46vh), 500px) 在 1440×960 下
     吃掉约 44% 可视高度，商城首屏只能露出一排卡。轮播是**装饰**、商品是**内容**，
     让路给后者：32vw / 36vh / 上限 400。1920×940 实测 432 → 338。 */
  /* 2026-10-25 店主：「轮播图变大，高度一定要尽可能顶到最上面，
     宽度只需要不挡住旁边功能键（右侧屏导航）就行」。
     三个上限同时把关，取最小：
       · 44vw  —— 别把主图横向拉爆；
       · 52vh  —— 矮窗口（笔记本半屏、1080×540）里给六格入口留出位置；
       · (100vw - 520px) × 9/16 —— **为右侧屏导航让路**：容器 = 主图宽 + 两侧各 160
         的邻居区，所以主图宽 ≤ 100vw - 520 时，两侧各剩 100px，导航(40) 压不到图上。
     实测：1080×540 219→281（+28%）、1440×900 358→468（+31%）、1920×940 374→489。 */
  --hc-h: clamp(260px, min(44vw, 52vh, calc((100vw - 520px) * 9 / 16)), 620px);
  /* 主图宽度 = 高度 × 16/9。箭头要贴在主图内缘，就必须用同一个值算位置 ——
     （2026-10-19 版把箭头写死在页面左右边缘，宽屏上离主图 180px，看着像浮在空地上。） */
  --hc-w: calc(var(--hc-h) * 16 / 9);
  /* 视口上内边距（主图上方气口）。箭头的纵向中心要用它 + 主图高度算，
     所以**每个改 padding 的断点都必须同时改它**，否则箭头会偏心。
     2026-10-25 店主「高度要尽可能顶到最上面」：28 → 12，省下的全给主图。 */
  --hc-pad-top: 12px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(25,45,65,.55), transparent 58%), var(--ink);
  padding: 0 0 18px; border-bottom: 1px solid var(--ink-4);
}
/* 2026-10-25 店主：「首页轮播图太宽了，会把新功能给挡住」。
   原来是**通栏**（max-width: none），1920 屏上主图 869 + 两侧邻居一路铺到屏幕边缘，
   整条带子在视觉上就是"另一套宽度"——上面的顶栏、下面的六格入口都是 1136 内容宽，
   只有轮播是满屏，于是它既显得宽，又把六格挤到首屏之外。
   现在对齐正文栏（.wrap 1180 − 两侧 22 padding = 1136），和 .tool-panel 左右严格齐边；
   主图按 16:9 定高不变，两侧仍是"露出一点"的邻居（被容器裁掉）。
   手机上恢复通栏（≤900 的断点里写回 none）——那是全屏 hero 的常规做法。 */
.hc-viewport {
  position: relative;
  /* 2026-10-25 店主：「我的意思是只需要把两边稍微修一点，让旁边这个漏出来就好了」
     上一版限成 1136（= 正文栏宽）**修过头了**：主图两侧的邻居几乎被裁光，
     而"一滑一页"的首页又需要让人一眼看出"右边还有东西"。
     现在宽度**由主图反推**：主图宽(--hc-w) + 两侧各 160 的旁观区。
     · 邻居露出 ≈ 150px（减掉 .hc-slide 的 10px 外边距），够看出"还能滑"又不抢戏；
     · 容器永远不会有"内容结束了还剩一条空白"的观感（这正是上一版显得空的原因）；
     · 窄屏时 min() 自动退化成整宽（手机 --hc-w≈347，+320 已超视口）。 */
  /* 2026-10-25 第三次（店主：「PC 端的轮播图我和你说过了…两边都可以拉出来一点」）。
     历代口径：各 160（320）→ 各 220（440）。他 1920×960 上实测容器 1396，
     左侧从 262 才开始 —— 红框圈的就是这 262px 空白。
     现在各 **330**（660 总和）：1920 下容器 1616（左右各 152），
     1440 下容器 1300（左右各 70，命中保底）。
     保底 `100vw - 100px`：再往外就顶到右侧屏导航（right 10~50，40 宽）了。
     ⚠️ 这条**只给桌面**：手机上 `100vw - 140` = 250，会把 370 宽的主图裁掉两侧
        （2026-10-25 实测：容器 250、主图 370、图上的联动标题被切掉一截）。
        手机在下面的 ≤900 断点里 `max-width: none`。 */
  max-width: min(calc(100vw - 100px), calc(var(--hc-w) + 660px));
  margin: 0 auto;
  overflow: hidden;
  padding: var(--hc-pad-top) 0 0;
}
/* 两侧渐隐：主图以外露出的邻居在靠近容器边缘时淡出，切边不再是一条硬线。
   🔴 2026-10-25 店主：「这种硬边绝对不能出现！要用渐变去过渡一下」。
      硬边的根因是**阈值**：原来只在 `min-width: 1250px` 开，
      而店主的窗口内宽 ~1010 —— 渐隐层压根没生成，邻居图被容器 `overflow:hidden`
      一刀切断（截图里那条笔直的灰边）。
      现在门槛降到 900（真桌面都开），宽度从 10% 提到 **14%**：
      · 1080 下容器 881 → 123px，两侧各 99? 不够 → 见下面的保底宽度；
      · 只要渐隐宽度 ≤ 邻居区，就不会啃到主图（主图是视觉主体，不能被淡化）。
      终点用 `transparent` 而不是 `rgba(11,11,12,0)`：后者是"透明黑"，
      在白底上做过渡的中间色会偏脏。 */
@media (min-width: 901px) {
  .hc-viewport::before, .hc-viewport::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    /* 宽度 = **邻居区宽度的 60%**，不是整块邻居区。
       第一版取 100%（= 邻居区全部），实测 1920 下邻居被雾掉 300px，
       只剩靠主图那条薄薄的影子，等于"把邻居藏起来"—— 那不是柔边，是遮罩。
       店主原话是「让旁边这个漏出来」+「要做渐变」，两者要同时满足：
       邻居**内侧 40% 保持清晰**（看得出是下一张图），外侧 60% 淡出到背景。
       1920 下 330×0.6 ≈ 198px；1440 下 254×0.6 ≈ 152px。 */
    width: clamp(84px, calc((100% - var(--hc-w)) / 2 * 0.6), 220px);
    z-index: 4; pointer-events: none;
  }
  /* 三段而不是两段：最外侧 12% 保持**纯背景色**，把邻居图被 overflow 切断的
     那条硬边彻底盖住（两段渐变在 0% 处虽然也是实色，但立刻开始衰减，
     在图片高对比区域仍能看出"从第一像素就在变淡"的边缘感）；
     25% 之后才快速过渡到全透明。 */
  .hc-viewport::before {
    left: 0;
    /* 两段版兜底（老浏览器不认 color-mix 时整条声明会被丢掉，回退到这条） */
    background: linear-gradient(90deg, var(--ink) 0%, transparent 100%);
    background: linear-gradient(90deg,
      var(--ink) 0%, var(--ink) 9%, color-mix(in srgb, var(--ink) 32%, transparent) 52%, transparent 94%);
  }
  .hc-viewport::after {
    right: 0;
    background: linear-gradient(270deg, var(--ink) 0%, transparent 100%);
    background: linear-gradient(270deg,
      var(--ink) 0%, var(--ink) 9%, color-mix(in srgb, var(--ink) 32%, transparent) 52%, transparent 94%);
  }
}

/* 🔴 白主题也要开（2026-10-25 店主：「而且他妈要做渐变，你耳聋吗？」）。
   这里原来有一条 `html[data-theme="light"] .hc-viewport::before/after { display: none }`，
   成因是 2026-10-24 那版 banner **铺满视口、没有邻居**，渐隐只剩"把 banner 两端刷成纸色纱"
   的副作用。而现在首页是"主图 + 两侧折边"的形态，**邻居就在那里**，
   关掉渐隐 = 邻居图被容器 `overflow:hidden` 一刀切断 —— 就是他现在看到的硬边。
   店主用的正是白主题，所以之前怎么调阈值都没用：层根本没渲染。
   `--ink` 在白主题下就是页面底色（暖纸白），渐变末端融进背景，不会留下灰带。 */
.hc-track {
  display: flex; align-items: stretch; gap: 0;
  /* 只动 transform 一条属性：滑动的顺滑度全靠它，别的都别掺进来（抖动就是这么来的） */
  transition: transform .5s cubic-bezier(.16,.84,.34,1);
  will-change: transform;
}

/* —— 单张 banner（宽度默认 74%，仅作非 --shot 变体的兜底）—— */
.hc-slide {
  flex: 0 0 74%;
  position: relative; overflow: hidden;
  display: flex; align-items: stretch;
  height: var(--hc-h);
  margin: 0 10px;
  background:
    radial-gradient(120% 140% at 86% 30%, rgba(184,147,46,.16), transparent 55%),
    linear-gradient(100deg, var(--ink-2) 0%, var(--ink-3) 58%, #2c2617 100%);
  border: 1px solid var(--ink-4);
  text-decoration: none;
  opacity: .30;
  /* 亮/暗：**退场过渡、进场瞬变**（2026-10-19 定稿）。
     基础态这条 transition 只对「正在退场的那张」生效：1 → .30 走 .2s，柔和地退到两侧；
     .is-active 把 transition 覆盖成只剩边框/阴影 → 进场**没有** opacity 过渡，
     点下去那一帧就是满亮（实测 7ms）。
     2026-10-18 那版把点亮也给了 .18s，4× CPU 节流下要 191ms 才满亮 ——
     用户的现象「点了之后隔一会图才出来」就是这个过程，不是图没加载（img.decode 只要 7ms）。
     ⚠️ 2026-10-19 重做：**彻底不要 scale 了**。原来非主图 scale(.94)、主图 scale(1)，
        进场瞬变会让新主图「啪」地涨一圈（突跳），给它过渡又变回「慢慢长大」（又违反上面的要求）。
        现在所有 slide 同尺寸，位移只由 track 的 transform 负责 —— 一条属性、一条曲线，
        不抖不跳；两侧靠 .30 透明度和边缘渐隐让位，不靠缩小。 */
  transition: opacity .2s ease, border-color .3s ease, box-shadow .3s ease;
  pointer-events: none;
}
.hc-slide.is-active {
  opacity: 1;
  border-color: rgba(184,147,46,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,224,0,.08) inset;
  pointer-events: auto;
  /* ★ 进场**不过渡**（opacity / 尺寸都没有过渡）：点下去这一帧就是成品画面。
     只保留边框/阴影的过渡（纯色变化，不影响画面内容）。退场仍走基础态的 .2s。 */
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* 版口四角刻线（plate 语法） */
.hc-slide::before, .hc-slide::after {
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none;
}
.hc-slide::before { top: 10px; left: 10px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hc-slide::after  { bottom: 10px; right: 10px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* —— 纯图 banner（2026-10-15 用户拍板：官方宣传图直出）──────────────
   图自带文案/日期，页面不再叠字。宽度**由高度反推**（--hc-h × 16/9）而不是写百分比：
   图是 16:9、版口也做成 16:9 → object-fit:cover 恰好不裁切，整张宣传图完整可见；
   一旦按屏宽写百分比，宽高比会随屏幕漂移，宣传图两侧的角标与日期就会被切掉。
   两个「别动」：
     · 别改成 flex-basis 百分比（媒体查询里同样别写，后者会因为源码顺序覆盖这里）；
     · 别加 height —— 高度统一由 .hc / 媒体查询上的 --hc-h 一个口径控制。 */
.hc-slide--shot { flex: 0 0 auto; width: calc(var(--hc-h) * 16 / 9); }
/* <picture> 是 flex item，默认 display:inline 会撑不出高度 ——
   必须显式 block + 100%，否则内部的 img 百分比高度失真（图片被压扁/留白）。 */
.hc-slide--shot picture { display: block; width: 100%; height: 100%; }
.hc-slide--shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
/* 四角刻线是「文字版」的版口语法，压在宣传图上会切掉画面边缘，纯图版关掉 */
.hc-slide--shot::before, .hc-slide--shot::after { content: none; }

/* —— 箭头（金色三角，对齐官方站语法；2026-09-20 重做）——
   旧版两处硬伤都出在这段几何上：
     ① 方向全反：基准形状 polygon(100% 0, 100% 100%, 0 50%) 的顶点其实落在**左**边
        （即基准本身指 ◀），又给 .hc-prev 叠了一层 rotate(180deg) ——
        结果左键指右、右键指左，方向全拧反。
     ② 圆心靠百分比硬凑：translate(-42% / -58%, -50%) 两个不同的魔法数，
        三角形不在正中，且一改尺寸就得重调。
   现改为「基准形状指右，只翻转 prev」，定心交给 inset:0 + margin:auto（几何精确，无魔法数）。
   视觉沿用品牌「深底做墙、黄做光」：静态是暗金细框的黑牌（呼应 .hc-slide 的金描边），
   hover 时整块点亮成品牌黄、箭头反相为炭黑（同 .btn.l1 / .pill.on 的反相语法）。 */
.hc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: rgba(20,20,20,.55);
  border: 1px solid rgba(184,147,46,.5);
  border-radius: 3px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.hc-nav::before {
  content: ""; position: absolute; inset: 0; margin: auto;  /* 精确居中，不靠 translate 百分比 */
  width: 14px; height: 14px;
  background: var(--gold);
  clip-path: polygon(0 0, 0 100%, 100% 50%);                /* 基准形状：指向右 ▶ */
  transition: background .2s ease;
}
.hc-prev { left: clamp(12px, 3vw, 42px); }
.hc-prev::before { transform: rotate(180deg); }             /* 翻转成 ◀ */
.hc-next { right: clamp(12px, 3vw, 42px); }
.hc-next::before { transform: rotate(0deg); }               /* ▶ */
.hc-nav:hover {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255,224,0,.22), 0 8px 22px rgba(255,224,0,.2);
}
.hc-nav:hover::before { background: var(--ink); }           /* 点亮后箭头反相 */
.hc-nav:active { transform: translateY(-50%) scale(.94); }
.hc-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* —— HERO 专属：箭头贴在**主图内缘**（2026-10-19 重做）————————————————
   旧版用 `left/right: clamp(12px, 3vw, 42px)` —— 那是相对**整条视口**算的，
   1680 宽的主图左缘在 395px，箭头却在 42px 处，中间空出 350px 暗底，
   看着像两个孤零零的浮标（用户截图里的观感）。
   现在用 --hc-w 反推主图边缘、再内缩 14px；纵向用 --hc-pad-top + --hc-h/2 压在中线上。
   形状也换成圆形玻璃片：它属于这张图，不是页面上的第三个控件。
   （≤680 仍走下面媒体查询里的「图上方的控制条」，那里图窄、压上去会盖住日期文案。） */
#heroCarousel .hc-nav {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10,10,11,.52);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  top: calc(var(--hc-pad-top) + var(--hc-h) / 2);
}
#heroCarousel .hc-prev { left: calc(50% - var(--hc-w) / 2 + 14px); }
#heroCarousel .hc-next { right: calc(50% - var(--hc-w) / 2 + 14px); }
#heroCarousel .hc-nav::before { width: 14px; height: 14px; }
#heroCarousel .hc-nav:hover { background: var(--gold); border-color: var(--gold); box-shadow: 0 8px 24px rgba(255,224,0,.28); }
#heroCarousel .hc-nav:active { transform: translateY(-50%) scale(.92); }

/* —— 菱形指示点（对齐官方站黄菱形）—— */
.hc-dots { display: flex; justify-content: center; gap: 14px; padding: 18px 0 6px; }
.hc-dots button {
  width: 9px; height: 9px; padding: 0; border: 1px solid var(--brand-2);
  background: transparent; cursor: pointer;
  transform: rotate(45deg);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hc-dots button.is-on {
  background: var(--gold); border-color: var(--gold);
  transform: rotate(45deg) scale(1.25);
}
.hc-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* —— 响应式 ——
   ⚠️ 这里只准调 --hc-h（高度口径），**不要**再写 .hc-slide 的 flex-basis/height：
   媒体查询在源码后面，同优先级会直接盖掉 .hc-slide--shot 的宽度反推，比例就散了。 */
@media (max-width: 900px) {
  .hc { padding: 0 0 12px; --hc-h: clamp(190px, 42vw, 360px); --hc-pad-top: 18px; }
  /* 🔴 手机**必须覆盖 max-width**（2026-10-25 店主：「手机端的轮播图坏了」）。
     全局那条现在带 `calc(100vw - 100px)` 保底 —— 390 的屏上算出来 290，
     而主图按 `--hc-h × 16/9` 反推是 370 宽 → 容器比主图窄 80px，
     `overflow:hidden` 把主图两侧各切掉 40，联动标题首字直接被吃掉（实测）。
     手机上根本不存在"折边"，邻居就该整条不露，所以容器 = 整宽。 */
  .hc-viewport { max-width: none; padding: var(--hc-pad-top) 0 0; }
  .hc-nav { width: 40px; height: 40px; }
  #heroCarousel .hc-nav { width: 40px; height: 40px; }
}
/* 宽屏加成：16:9 定高之后，1920 屏上主图只剩 46%（比正文栏 1180 还窄，两侧邻居反而抢戏），
   这里把高度口径抬到 560 → 主图 996px，重新压回视觉主体。只动 --hc-h，比例不受影响。

   🔴 2026-10-21 加 `min(560px, 52vh)`：原来写死 560，**不看窗口有多高**。
      1080P 屏全屏时 52vh = 561 → 仍然吃 560（观感一点没变）；
      但浏览器可视高只有 940 时（任务栏 + 地址栏吃掉 140，这才是店主的真实视野），
      52vh = 489 → 自动让出 71px，首屏「顶栏 + 轮播 + 常用入口六格」刚好装得下。
      同一行里同时有 vw 和 vh，才叫「响应式高度」；只有 vw 的 clamp 在宽屏上是定值。
      判据：data/viewports.js 的 pc1080-可视（140px 损失是硬约束）。 */
@media (min-width: 1680px) {
  /* 2026-10-25 店主：「轮播图变大，高度一定要尽可能顶到最上面」。
     原来这里是 min(420px, 40vh)（1920×940 → 376）—— 结果**宽屏反而比 1440 还小**
     （1440 走主公式 52vh=468，1920 被这条压到 376），越大的屏轮播越矮，很反直觉。
     现在跟主公式同口径 56vh：1920×940 → 526，主图 935 宽，
     容器 1255 居中后两侧各 332 —— 右侧屏导航(40) 压不到图上。 */
  .hc { --hc-h: min(620px, 56vh); }
}
/* —— 矮窗口（浏览器半屏 / 笔记本 768 高的机器）：六格必须完整可见 ——
   2026-10-25 实测 1080×540：主图按 52vh=281 之后，
   顶栏 67 + 轮播容器 344 + 六格上方 38 + 六格 118 + 下内边距 16 = 583 > 540，
   六格被挤出屏（`fs-over` 阀门介入，要滚动才看得到入口）。
   这里两件事一起做：
     · 主图收到 46vh（540 → 248，仍比改前的 219 大 13%）；
     · 轮播↔六格之间的 38px 压到 26（`.sec` 22→14、面板上下 16→12）。
   只作用于 `min-height 901` 的**真桌面**，手机横屏（矮但粗指针）不受影响。 */
@media (max-height: 660px) and (min-width: 901px) {
  .hc { --hc-h: clamp(200px, 46vh, 320px); --hc-pad-top: 8px; padding-bottom: 10px; }
  html.fs-home .fs-pane--hero .sec { margin-top: 14px; }
  html.fs-home .fs-pane--hero .tool-panel { padding-top: 12px; padding-bottom: 12px; }
  /* 底部 28 是给"有余量时"留的气口；矮屏上它会把 pane 撑出 9px，
     触发 fs-over 阀门（整屏变成可滚）。收掉。 */
  html.fs-home .fs-pane--hero { padding-bottom: 10px; }
}

/* —— 手机端（2026-10-15 随纯图 banner 收敛）——
   文字版那套「卡图 absolute 铺满 + 文案吃满整卡」的规则已随内容一起删除：
   纯图 banner 本身自带文案，再叠蒙版只会糊掉图。现在手机上就是「一张整图 + 两侧露一点」。 */
@media (max-width: 680px) {
  .hc { padding: 0 0 10px; --hc-h: clamp(168px, 50vw, 300px); --hc-pad-top: 14px; }
  .hc-viewport { padding: var(--hc-pad-top) 0 0; }
  .hc-slide { margin: 0 8px; }
  /* 箭头作「步进器」钉在右上角：纵向不再居中，从 top:50% 改 top:12px */
  .hc-nav {
    top: 12px; transform: none;
    width: 34px; height: 34px;
    background: rgba(10,10,11,.62);
    -webkit-backdrop-filter: none; backdrop-filter: none;   /* 小屏省掉模糊开销 */
  }
  .hc-prev { left: auto; right: 66px; }
  .hc-next { right: 28px; }
  .hc-nav::before { width: 11px; height: 11px; }
  .hc-nav:active { transform: scale(.94); }   /* 覆盖桌面那条 translateY(-50%) */

  /* 🔴 hero 的箭头在手机上**整个不显示**（2026-10-24 店主圈图：「这个按钮我觉得不好看」）。
     原因不是审美偏好，是控制方式换了：
       · 手机主控是**手指滑**（`carousel.js` 已有 pointer 拖拽，位移 >40px 才算滑、滑过就不触发点击）；
       · 页码点负责"跳到第几张"，同时满足 WCAG 2.5.7「拖拽功能必须有点击替代」；
       · 那一对悬浮箭头是**桌面语法**（鼠标没有滑动），在 390px 宽上既挡住宣传图、
         又把「图上方让出 50px 控制条」这笔空间账变成纯浪费。
     所以：箭头隐藏 + 控制条撤掉，图片整体上移 50px（首屏多出 50px 给六格入口）。
     ⚠️ 桌面端（>680）的箭头一个都没动 —— `_verify_hero.cjs` / `_verify_hero_carousel.cjs`
        都在 1280~1680 视口下点它们，判据不受影响。
     公告条（`.pk`）同理：手机上一屏 1.2 张卡（`.pk-card` 78%），滑动意图已经很明显。 */
  #heroCarousel .hc-nav,
  .pk .hc-nav { display: none; }
  #heroCarousel .hc-viewport { padding: var(--hc-pad-top) 0 0; }
}

/* ============================================================================
   PICK UP · 精选动态（index.html 专用，2026-09-20 用户拍板模板）
   对齐官方站 PICK UP 板块的构成：左侧竖排描边大字 + 右侧横滑卡片行 + 箭头 + 圆点；
   配色不抄官方深蓝，仍走本站「深底做墙、黄做光」。箭头与指示点**直接复用**
   .hc-nav / .hc-dots 的全部规则（HTML 里就挂这两套类名），这里只写差异。
   环形循环由 index.html 的 loopCarousel 驱动（与 hero banner 同一份实现）。
   ========================================================================= */
.pk { position: relative; overflow: hidden; border-bottom: 1px solid var(--ink-4);
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(184,147,46,.07), transparent 50%),
    var(--ink); }
.pk-in {
  /* 2026-10-25 店主：「公告栏也要铺满」。
     原来是 max-width:1180 居中 —— 1920 屏上左右各空 370px，一屏只放 3 张卡，
     中间那条"公告"竖排大字还把这个板块压得更窄，整块像被塞在一个盒子里。
     首页既然已经是"一滑一页"，这一屏就该用满宽度：
       · 容器放开到整屏（只留页边距）；
       · 卡片**按屏宽决定一屏几张**（<1300 三张 / ≥1300 四张 / ≥1700 五张），
         而不是把 3 张拉大 —— 图是有比例的，拉大只会变成三张巨图。
     手机上仍是 .pk-card 78% 的横滑（见 ≤680 断点）。 */
  max-width: none; margin: 0 auto;
  /* 底部留白原由 .pk-foot 承担；该行删除后收口在这里（2026-09-20 拍板删行） */
  padding: 44px clamp(22px, 3.2vw, 64px) 46px;
  display: flex; gap: 30px; align-items: stretch;
}
/* —— 左侧「PICK UP」描边大字（横排两行 PICK/UP，高度跟卡片行走，
   不用竖排 —— 竖排 6 字母会把侧栏撑到 400px+，右边整块留白，实拍翻车一次）—— */
.pk-side { flex: 0 0 128px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.pk-word {
  font-size: clamp(34px, 3.6vw, 50px); font-weight: 900; letter-spacing: .06em;
  line-height: 1.04; width: 2.9em;
  color: transparent; -webkit-text-stroke: 1px rgba(184,147,46,.55);
  user-select: none;
}
.pk-kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--text-3);
}
.pk-kicker i { width: 18px; height: 2px; background: var(--gold); flex: none; }

/* —— 右侧卡片行 —— */
.pk-main { flex: 1 1 auto; min-width: 0; }
.pk-viewport { position: relative; overflow: hidden; }
.pk-track {
  display: flex; align-items: stretch;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.pk-card {
  flex: 0 0 calc((100% - 2 * 14px) / 3);       /* 桌面一屏 3 张，间距 14px（2026-09-20 用户拍板：4 张太碎，3 张 + 箭头） */
  margin-right: 14px;
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border: 1px solid var(--ink-4); border-radius: 4px;
  overflow: hidden; text-decoration: none;
  /* 2026-09-20 用户拍板：一屏 3 张**全部高亮**，不再做「中间亮、两侧暗」的聚焦态 ——
     原来的 opacity:.45 + scale(.97) 暗态与 .is-active 点亮规则一并删除 */
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pk-card:hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
/* 一屏几张随屏宽走（2026-10-25）。基数三张写在 .pk-card 里，这里只改 flex-basis，
   不动 flex-grow/shrink —— 改了就会按剩余空间抽条，卡片宽度不再统一。 */
@media (min-width: 1300px) {
  .pk-card { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (min-width: 1700px) {
  .pk-card { flex-basis: calc((100% - 4 * 14px) / 5); }
}
.pk-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.pk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* 店主公告没有配图时的占位（2026-10-18）：
   与官方卡片的 16:9 图区同高，避免这一张明显矮一截、和旁边格格不入。
   不用纯黑 —— 用品牌金线的低透明度，和整块「公告」栏的调子一致。 */
.pk-thumb--owner { display: flex; align-items: center; justify-content: center; }
.pk-thumb--owner span {
  font-size: 12.5px; letter-spacing: .5em; text-indent: .5em;
  color: rgba(240, 200, 96, .55); font-weight: 600;
}
.pk-t {
  padding: 10px 12px 2px;
  font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pk-d {
  padding: 3px 12px 12px;
  font-size: 12px; color: var(--text-3); line-height: 1.55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 指示点沿用 .hc-dots（HTML 挂同名类），只补上下间距 */
.pk-dots { padding-top: 14px; }

/* 页脚入口（2026-10-25 店主：「手机端连续上下滑动会卡住」）——
   那一手势在末屏有两个语义（翻页 vs 开抽屉），谁都不服谁。
   现在上拨只管翻页，页脚改由这一枚按钮打开：低调、贴右、不抢公告卡的视线。
   `width:fit-content + margin-left:auto` 负责右对齐（普通块级流），
   `align-self:flex-end` 负责整屏模式（`.pk-main` 在那里是 flex column）。 */
.pk-footlink {
  display: flex; align-items: center; gap: 5px;
  width: fit-content; margin-left: auto; margin-top: 12px;
  align-self: flex-end;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--ink-4); background: transparent;
  color: var(--text-3); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: color .16s, border-color .16s, background .16s;
}
.pk-footlink svg { width: 13px; height: 13px; flex: none; }
.pk-footlink:hover { color: var(--gold-ink); border-color: rgba(255, 224, 0, .45); background: rgba(255, 224, 0, .06); }
.pk-footlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 箭头底色加实（.hc-nav 默认 .55 透明在深底上只剩个三角），尺寸略收贴卡行。
   :where() 把特异性降为 0 —— 不能用 .pk-viewport .hc-nav（0,2,0 与 .hc-nav:hover 同级且靠后，
   会把悬停金底压掉、箭头变深色后隐身，实拍抓过一次） */
.pk-viewport :where(.hc-nav) { background: rgba(10,10,10,.85); width: 42px; height: 42px; }

/* —— 响应式 —— */
@media (max-width: 1080px) {
  .pk-card { flex-basis: calc((100% - 14px) / 2); }        /* 一屏 2 张 */
}
@media (max-width: 900px) {
  .pk-in { padding-top: 30px; gap: 20px; }
  .pk-side { justify-content: flex-start; }
}
@media (max-width: 680px) {
  /* 侧栏收成顶部一行小标题（描边字横排，本来就横排，只缩尺寸） */
  .pk-in { flex-direction: column; gap: 14px; padding: 26px 16px 34px; }
  .pk-side { flex: none; flex-direction: row; align-items: baseline; gap: 12px; }
  .pk-word { font-size: 26px; letter-spacing: .1em; width: auto; }
  .pk-kicker i { width: 14px; }
  .pk-card { flex-basis: 78%; }                            /* 一屏约 1.2 张，露边示意可滑 */
}