/* ============================================================================
 * 九游游戏攻略长图 · 组件库样式（交付物 2 / 共 3 件）
 * 数据源：spec/component-map.yaml v0.5.0 —— 所有数值以该文件为唯一权威，
 *         本文件不得自行新增设计尺寸；如需改动请先改 map 再同步到这里。
 *
 * 单位机制（map: meta.unit）
 *   --gu 恒等于「750 设计稿上的 1px」= 100vw / 750，并在视口 >750px 时封顶为 1px
 *   所有尺寸写成 calc(设计稿px * var(--gu))，等价于 spec §5 的 px/750*100=vw，
 *   但额外拿到 >750px 视口的封顶（纯 vw 无法封顶）。
 *   验算：375 视口 → --gu = 0.5px → 正文 calc(32 * --gu) = 16px ✓；750 视口 → 32px ✓；1024 → 仍 32px（封顶）✓
 *   例外：值恰为 1px 的细线保持 1px 不转换（分割线 / 表格竖分隔 / 一级标题虚线粗细 /
 *   stroke/01 边框 / 菱形 border-radius）。
 *
 * 承载场景差异（map: R4/R5 + spec §1 C1/C2）
 *   图片装饰对 __frame 与 __media 两套选择器双写：攻略详情页会把 <img> 换成
 *   LazyImage 并丢弃原类名（此时只有祖先 __frame 生效），其他场景 <img> 自身类名保留。
 *   SVG 图片一律背景图渲染（map R18）：img 链路会丢 class，压缩服务还会把非 gif 转 webp。
 *
 * 高度策略（map: R17）
 *   容器一律不设 height，只用 min-height + padding，真实高度由内容撑开；
 *   通栏图 width:100% + height:auto 不裁切；卡片内配图与 142 缩略图为例外，保留定高 cover。
 * ========================================================================== */

:root {
  --gu: min(calc(100vw / 750), 1px);

  /* --- 颜色 token（map: meta + spec_deviations；#f99c32 实稿未登记为 token，见偏差清单#9） --- */
  --guide-c-brand: #f96432;
  --guide-c-brand-soft: #ffe8d7;
  --guide-c-brand-tip: #f99c32;
  /* 正文荧光笔 decor/accent-1：实稿为写死的 #ffeed1（未登记为 token），与 brand-soft #ffe8d7 不是同一个色 */
  --guide-c-mark-bg: #ffeed1;
  --guide-c-text-primary: #262626;
  --guide-c-text-secondary: #595959;
  --guide-c-text-muted: #bfbfbf;
  --guide-c-text-inverse: #fff;
  --guide-c-surface-base: #fff;
  --guide-c-surface-card: #fafafa;
  --guide-c-surface-brand-subtle: #fff0eb;
  --guide-c-surface-brand-tail: #fff7f5;
  --guide-c-surface-warning: #fff8eb;
  --guide-c-neutral-900: #323538;
  --guide-c-border-card: #f3f3f3;
  --guide-c-border-subtle: #ebecec;
  --guide-c-border-brand-subtle: #ffe3da;
  --guide-c-border-warning: #fff0da;

  /* --- 装饰资源（map: meta.assets.variables，10 项全部已就位，逐个实测 HTTP 200 + MIME 正确） ---
   * --guide-asset-title-icon 是兜底图（seq 21 general-default）：一级标题图标由 21 个
   * .guide-title__icon--<semantic> 通过 --guide-icon 覆盖，未命中时回落到本变量。 */
  --guide-asset-title-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/072349599e6e44c683aa750a839ce87c.svg");
  --guide-asset-title-decor: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/9ab2a6b813e348718b16b1e824ba02cd.png");
  --guide-asset-summary-illustration: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/fd759568418548f3903b5f2bb5188736.png");
  --guide-asset-summary-decor: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/21d9f47eabe948c188cc9688d79da464.svg");
  --guide-asset-step-arrow: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/6d10ee9e531b4492a69e866c2909b5b9.svg");
  --guide-asset-step-dots: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/65e580a7b4cd494d8d64cf9bede6aa98.svg");
  --guide-asset-footer-brand: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/787675c13ac044ce8986f702ea323a22.svg");
  --guide-asset-footer-mark: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/c16e7ca56c53474b90b0b5f8995611dc.png");
  --guide-asset-notice-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/5d414fa1df5145249c8905b8c756c1ca.svg");
  --guide-asset-notice-icon-tip: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/b82892772f9842f7ae9301ec6fd0d8b6.svg");

  /* --- 阴影（Guide/Shadow/Image：0 2px 8px rgba(0,0,0,.30)） --- */
  --guide-shadow-image: 0 calc(2 * var(--gu)) calc(8 * var(--gu)) rgba(0, 0, 0, .3);
}

/* ----------------------------------------------------------------------------
 * 0. 基线与复位
 * ---------------------------------------------------------------------------- */
[class^="guide-"],
[class*=" guide-"] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 只复位「guide 容器内未挂 guide- 类的裸 p」。⚠ 禁止扩大到 `[class^="guide-"] p`：
 * 那条是 (0,1,1)，会静默压掉单类字号规则与 `> * + *` 间距 margin（论证与宿主核实见 spec/pixel-spec.md §19）。 */
[class^="guide-"] p:not([class*="guide-"]),
[class*=" guide-"] p:not([class*="guide-"]) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ----------------------------------------------------------------------------
 * 1. 可选装配容器（map: skeleton；R1 不强制使用，用到才有对应间距）
 * ---------------------------------------------------------------------------- */
.guide-page {
  /* 750 是设计稿页面宽：--gu 在宽视口封顶 1px，若不限宽，容器会继续撑满视口，
   * 固定列宽的组件（table）右侧就会露出大块空白；居中后与设计稿一致 */
  width: 100%;
  max-width: calc(750 * var(--gu));
  margin-left: auto;
  margin-right: auto;
  /* 不设左右内边距：攻略详情页承载容器 .PostsDetail--content 已有 32rpx 内边距，
   * 再加会双重内缩（750 − 32×2 = 686，正是 v0.5 组件库的设计宽） */
  background: var(--guide-c-surface-base);
  color: var(--guide-c-text-secondary);
  /* 按约定全量文本不指定 font-family，字体由宿主页面提供（九游详情页 global.less 的 body 规则） */
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  -webkit-font-smoothing: antialiased;
}

/* 间距一律用兄弟 margin，不用 gap——宿主旧版 WebView 对 flex gap 不兼容。
 * ⚠ `> * + *` 是 (0,1,0)，不得被顶部 p 复位扩大范围（详见 spec/pixel-spec.md §19）。 */

/* 一级间距 space/48 */
.guide-flow {
  display: flex;
  flex-direction: column;
}

.guide-flow > * + * {
  margin-top: calc(48 * var(--gu));
}

/* 板块内间距 space/28 */
.guide-section {
  display: flex;
  flex-direction: column;
}

.guide-section > * + * {
  margin-top: calc(28 * var(--gu));
}

/* ----------------------------------------------------------------------------
 * 2. 行内强调（map: inline；R9 只允许这三种形态）
 * ---------------------------------------------------------------------------- */
.guide-em {
  color: var(--guide-c-brand);
}

.guide-strong {
  font-weight: 500;
}

/* 划线强调：复刻实稿 decor/accent-1（352×32 的 #ffeed1 荧光块，压在正文行内，radius 4）。
 * 实稿该图层坐标绑定示例文案 → 改为跟随文字的背景块，多行文本时每行整体罩一次。
 * z-index:0 + ::before z-index:-1 让色块落在卡片底之上、文字之下。 */
.guide-mark {
  position: relative;
  z-index: 0;
}

.guide-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(14 * var(--gu));
  bottom: calc(4 * var(--gu));
  left: calc(-2 * var(--gu));
  right: calc(-2 * var(--gu));
  background: var(--guide-c-mark-bg);
  border-radius: calc(4 * var(--gu));
}

/* ----------------------------------------------------------------------------
 * 3. Guide/Intro/Summary（231:11903，686×156）—— 固定页头（R14）
 * ---------------------------------------------------------------------------- */
.guide-summary {
  position: relative;
  min-height: calc(156 * var(--gu));
  padding: calc(28 * var(--gu)) calc(28 * var(--gu)) calc(28 * var(--gu)) calc(116 * var(--gu));
  /* 设计稿 3px 边框 → 375 视口算得 1.5px，浏览器对 border-width 向下取整为 1px
   * （padding/min-height 等分数值会保留，只有 border 会）。偏差 0.5px，在 ≤1px 验收线内，
   * 不要为此改成 box-shadow——那会让边框不再占据盒模型、连带 116 内缩一起失准。 */
  border: calc(3 * var(--gu)) solid var(--guide-c-surface-brand-subtle);
  border-radius: calc(12 * var(--gu));
  background: linear-gradient(180deg, var(--guide-c-surface-brand-subtle) 0%, var(--guide-c-surface-brand-tail) 100%);
  overflow: hidden;
}

.guide-summary__text {
  position: relative;
  z-index: 1;
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-primary);
}

/* 左槽插画 88×76 @ Figma(16,28)；绝对定位装饰不参与撑高（R17），坐标已扣除 3px 边框 */
.guide-summary::before {
  content: "";
  position: absolute;
  left: calc(13 * var(--gu));
  top: calc(25 * var(--gu));
  width: calc(88 * var(--gu));
  height: calc(76 * var(--gu));
  background: var(--guide-asset-summary-illustration) no-repeat center / contain;
}

/* 右下 9GAME 斜纹 260×88 @ Figma right 28 / bottom 14（SVG 内嵌 opacity .2，此处不再叠加） */
.guide-summary::after {
  content: "";
  position: absolute;
  right: calc(28 * var(--gu));
  bottom: calc(14 * var(--gu));
  width: calc(260 * var(--gu));
  height: calc(88 * var(--gu));
  background: var(--guide-asset-summary-decor) no-repeat right bottom / contain;
}

/* ----------------------------------------------------------------------------
 * 4. Guide/Title 三级形态（R7：--l1|--l2|--l3 必带其一）
 * ---------------------------------------------------------------------------- */
.guide-title {
  position: relative;
}

/* --- 一级标题（20:1523，686×94）：图标 + 文本 + 橙色虚线底线 + 右上九游标记 ---
 * 纵向分解（实稿外框 94，详见 spec/pixel-spec.md §1）：
 *   padding-top 12 + 行 48 + 22（文案底→虚线中心）+ 12（虚线→组件底）= 94
 * 曾误把总高当 82（= 虚线所在 y），导致虚线下方 12px 丢失。 */
.guide-title--l1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: calc(12 * var(--gu)) 0 calc(34 * var(--gu));
}

/* 图标 → 文案 12（::before/::after 为 absolute 不参与 flex）。
 * 子项含 <p> → 必须双类父选择器抬到 (0,2,0)，否则被 UA 复位的 (0,1,1) 吃掉 */
.guide-title.guide-title--l1 > * + * {
  margin-left: calc(12 * var(--gu));
}

/* 图标位 48×48：AI 输出 <i> + 背景图，不用 <img>——详情页会把 img 替换成 LazyImage
 * 并丢掉 class，改背景图后节点原样保留。语义 modifier 覆盖 map 的 21 项枚举，
 * 未命中时用 --guide-asset-title-icon（seq 21 general-default）兜底。 */
.guide-title__icon {
  flex: none;
  display: block;
  width: calc(48 * var(--gu));
  height: calc(48 * var(--gu));
  background-image: var(--guide-icon, var(--guide-asset-title-icon));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.guide-title__icon--game-overview      { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/45042d08eaa34918972236538c618ca6.svg"); }
.guide-title__icon--beginner-start     { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/27a9e39aa894494caf4f230a543b440c.svg"); }
.guide-title__icon--controls-settings  { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/f1cb59f28e664aa98c1eb5d6991fb8bd.svg"); }
.guide-title__icon--characters-classes { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/cca040681b8342ddb83fb5fe1e93153f.svg"); }
.guide-title__icon--character-build    { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/7dec5ef4ec194a379ee896b0926da14f.svg"); }
.guide-title__icon--skills-abilities   { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/8aaa7fa98b0d482abc34b7cdfa4a0bfd.svg"); }
.guide-title__icon--weapons-equipment  { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/9b5def2ddb2f412f90f5dd157f9410f3.svg"); }
.guide-title__icon--combat-system      { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/98f409290e4a4448a60392b2ae30a165.svg"); }
.guide-title__icon--team-formation     { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/8c98f3e1c143464a922550e0b47e789d.svg"); }
.guide-title__icon--strategy-tips      { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/f89601397e614882b7fa9777363db6dd.svg"); }
.guide-title__icon--map-exploration    { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/83e3ec354f75478e87783a1570900a5f.svg"); }
.guide-title__icon--stages-dungeons    { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/c36f47192b0d4804972599f03a206815.svg"); }
.guide-title__icon--boss-guide         { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/9a0fed510c0c4b32b99f3c91399bca81.svg"); }
.guide-title__icon--quests-achievements { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/c527343009e0409f89574baf2f5a42c5.svg"); }
.guide-title__icon--resources-materials { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/d93386befebc4b60acbab6d9a5bcd75d.svg"); }
.guide-title__icon--rewards-gifts      { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/f3d2cb8a91a242e98c26f9b75a87ea75.svg"); }
.guide-title__icon--gacha-recruit      { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/b90e820508da464c9127fc139ce8c5a4.svg"); }
.guide-title__icon--upgrade-advance    { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/5268f877224e44519885b942412819bd.svg"); }
.guide-title__icon--pvp-ranking        { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/14fa9dd99c5a4733afbd548c1399a9ab.svg"); }
.guide-title__icon--limited-events     { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/69b663c7c88a457c9a7fd0f43eecc92e.svg"); }
.guide-title__icon--general-default    { --guide-icon: url("https://img.9game.cn/9game_inner/ieu-data-mng/figma/072349599e6e44c683aa750a839ce87c.svg"); }

.guide-title--l1 .guide-title__text {
  flex: 1;
  min-width: 0;
  /* v0.5：右上九游标记从 x=584.8 收到 570（宽 116）→ 文本可用宽 = 570 − 60 = 510 */
  max-width: calc(510 * var(--gu));
  font-size: calc(40 * var(--gu));
  line-height: calc(48 * var(--gu));
  font-weight: bolder;
  color: var(--guide-c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部 1px 橙色虚线（dash 6/6，复刻 SVG Line 44）—— 1px 细线不转换。
 * 线中心必须落在组件内 y=82（距底 12）：bottom = 12×--gu − 0.5px 使 1px 线居中于该位置。 */
.guide-title--l1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12 * var(--gu) - 0.5px);
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
      var(--guide-c-brand) 0,
      var(--guide-c-brand) calc(6 * var(--gu)),
      transparent calc(6 * var(--gu)),
      transparent calc(12 * var(--gu)));
}

/* 右上「九游」标记 116×44.615 @ (570, 12.3) → right 0 / top 12.3（与图标、文字顶齐平） */
.guide-title--l1::before {
  content: "";
  position: absolute;
  right: 0;
  top: calc(12.3 * var(--gu));
  width: calc(116 * var(--gu));
  height: calc(44.615 * var(--gu));
  background: var(--guide-asset-title-decor) no-repeat right top / contain;
  pointer-events: none;
}

/* --- 二级标题（12:150，686×60）：实心菱形 + 14px 品牌浅色粗划线 ---
 * 字体权威值（Guide/Title/Subsection）：Bold 36 / line-height 44 / weight 700。
 * 菱形 12×12 + rotate(-45°) 的外接盒 = 16.971；设计里 marker 占位就是 16.971 + gap 12，
 * 而 CSS 的 transform 不改布局盒（仍 12）→ 左内缩补 2.485、间距补 2.485 才能对齐文字左边界 x=36.971。 */
.guide-title--l2 {
  display: inline-flex;
  align-self: flex-start;
  flex-direction: row;
  align-items: center;
  padding: calc(8 * var(--gu)) calc(8 * var(--gu)) calc(8 * var(--gu)) calc(10.485 * var(--gu));
  /* 14 粗划线是画在行盒**内部**的底描边（实稿 content 在 60 高组件里 y=8、h=44，已含这条线）。
   * ⚠ 不能用 CSS `border-bottom`：Dev Mode 把 Figma 的 bottom stroke 翻译成 border，
   * 但 CSS border 会撑高盒子、把线顶到文字下方 → 变成完全分开、无重叠（就是之前的偏差）。
   * 改用背景色带压在文字底部：距元素底 8 起、高 14（组件坐标 y=38..52，与 36 号字下缘重叠 10）。 */
  background-image: linear-gradient(to top,
      transparent 0, transparent calc(8 * var(--gu)),
      var(--guide-c-brand-soft) calc(8 * var(--gu)), var(--guide-c-brand-soft) calc(22 * var(--gu)),
      transparent calc(22 * var(--gu)), transparent 100%);
}

.guide-title--l2 .guide-title__text {
  font-size: calc(36 * var(--gu));
  line-height: calc(44 * var(--gu));
  font-weight: bold;
  color: var(--guide-c-text-primary);
  white-space: nowrap;
}

.guide-title--l2::before {
  content: "";
  flex: none;
  width: calc(12 * var(--gu));
  height: calc(12 * var(--gu));
  /* 首子项是伪元素，> * + * 匹配不到 → 间距挂在 marker 自身上 */
  margin-right: calc(14.485 * var(--gu));
  border-radius: 1px;
  background: var(--guide-c-brand);
  transform: rotate(-45deg);
}

/* --- 三级标题（20:1593，242×42 起内容撑高）：空心菱形 + 最多两行 ---
 * 字体权威值（Guide/Title/Minor）：Medium 34 / line-height 42 / weight 500；字重实现为关键字 normal。 */
.guide-title--l3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* 左内缩 = 设计 8 + 旋转溢出 2.485；右侧 8 为实稿 px-[8px] */
  padding: 0 calc(8 * var(--gu)) 0 calc(10.485 * var(--gu));
}

.guide-title--l3 .guide-title__text {
  flex: 1;
  min-width: 0;
  font-size: calc(34 * var(--gu));
  line-height: calc(42 * var(--gu));
  font-weight: normal;
  color: var(--guide-c-text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 空心菱形：2px 描边 + 12×12 + rotate(-45°)；贴首行居中（行高 42 → 中心 21 → 元素顶 15） */
.guide-title--l3::before {
  content: "";
  flex: none;
  /* 必须 border-box：设计里 marker 占位盒就是 12×12（border 2 内含），
   * content-box 会算成 12+4=16 布局宽 → 把文字右推 4 设计px */
  box-sizing: border-box;
  width: calc(12 * var(--gu));
  height: calc(12 * var(--gu));
  margin-top: calc(15 * var(--gu));
  margin-right: calc(12.485 * var(--gu));
  border: calc(2 * var(--gu)) solid var(--guide-c-brand);
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------------------
 * 5. Guide/Divider（49:1649）—— 1px 分割线，设计固定宽 633（symbol 无定位声明，
 *    按实例「内容区左右各余 6.5」的对称实测判为居中）；卡片内的分隔线由各组件自生成
 * ---------------------------------------------------------------------------- */
.guide-divider {
  width: calc(633 * var(--gu));
  height: 0;
  margin: 0 auto;
  border-top: 1px solid var(--guide-c-border-subtle);
}

/* ----------------------------------------------------------------------------
 * 6. Guide/Text/Body（56:3345，686×150 / 文本 686）—— 最常用的兜底组件（R12）
 * v0.5：正文取消左右 30px 缩进（文本铺满 686），并统一两端对齐
 * ---------------------------------------------------------------------------- */
.guide-text {
  padding: 0;
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  font-weight: 400;
  color: var(--guide-c-text-secondary);
}

/* ----------------------------------------------------------------------------
 * 7. Guide/Media/Image（239:7794）—— 通栏配图（R17：不裁切）
 * ---------------------------------------------------------------------------- */
.guide-image {
  display: flex;
  flex-direction: column;
}

.guide-image.guide-image--caption > * + * {
  margin-top: calc(12 * var(--gu));
}

/* 8px 白描边 + 阴影 + 无圆角；C2 双通道：有 __frame 时挂祖先 */
.guide-image__frame {
  border: calc(8 * var(--gu)) solid var(--guide-c-surface-base);
  box-shadow: var(--guide-shadow-image);
}

/* 无 __frame 的写法：装饰直接落 <img>（R4 允许） */
.guide-image > .guide-image__media {
  border: calc(8 * var(--gu)) solid var(--guide-c-surface-base);
  box-shadow: var(--guide-shadow-image);
}

/* R17：通栏图 width 100% + height auto，任意比例完整显示 */
.guide-image__media {
  display: block;
  width: 100%;
  height: auto;
}

.guide-image__caption {
  font-size: calc(22 * var(--gu));
  line-height: calc(32 * var(--gu));
  color: var(--guide-c-text-muted);
}

/* SVG 内容图（R18）：SVG 不能走 <img>——详情页会换成 LazyImage 并丢 class，压缩服务还会把非 gif 转 webp。
 * 统一用 <i class="guide-svg"> + 内联 background-image 渲染（R2 唯一例外，另允许 aspect-ratio）。
 * 通栏图由内联 aspect-ratio 撑高；定高图框内由父级高度铺满。 */
.guide-svg {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 无 __frame 时由自身承载与位图一致的描边/阴影 */
.guide-image > .guide-svg {
  border: calc(8 * var(--gu)) solid var(--guide-c-surface-base);
  box-shadow: var(--guide-shadow-image);
}

/* 定高图框（图文卡 / 缩略图）内铺满，视觉对齐位图的 object-fit: cover */
.guide-text-image__frame > .guide-svg,
.guide-media-detail__frame > .guide-svg {
  height: 100%;
  background-size: cover;
}

/* ----------------------------------------------------------------------------
 * 8. Guide/Media/TextImage（236:5578）—— 图文组合卡（R7：位置 + 数量 modifier 成对）
 * ---------------------------------------------------------------------------- */
.guide-text-image {
  position: relative;
  padding: calc(28 * var(--gu));
  border: 1px solid var(--guide-c-border-card);
  border-radius: calc(12 * var(--gu));
  background: var(--guide-c-surface-card);
  overflow: hidden;
}

.guide-text-image__text {
  /* 不设 z-index：实稿斜纹图层排在文字之后（压在文字上方），文字若提层会反过来盖住斜纹 */
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-secondary);
}

/* 位置：AI 按视觉顺序书写节点，CSS 只决定轴向 */
.guide-text-image--top,
.guide-text-image--bottom {
  display: flex;
  flex-direction: column;
}

.guide-text-image.guide-text-image--top > * + *,
.guide-text-image.guide-text-image--bottom > * + * {
  margin-top: calc(24 * var(--gu));
}

.guide-text-image--left,
.guide-text-image--right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.guide-text-image--left > * + *,
.guide-text-image--right > * + * {
  margin-left: calc(28 * var(--gu));
}

/* 图行：宽 628（= 686 − 2×28 padding − 2×1px 边框），按设计稿 justify-between 铺满；
 * 微旋由 transform 溢出，不再用行内 padding 承载（v0.5 双图 302、三图 202）。 */
.guide-text-image__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* R17 例外：卡片内配图保留定高 + cover（多图行等高对齐、倾斜与白描边依赖固定框） */
.guide-text-image__frame {
  flex: none;
  overflow: hidden;
  border: calc(8 * var(--gu)) solid var(--guide-c-surface-base);
  box-shadow: var(--guide-shadow-image);
}

.guide-text-image--count-3 .guide-text-image__frame {
  border-width: calc(4 * var(--gu));
}

.guide-text-image__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 定高尺寸：上下排版单图 628×265（宽度铺满内容区） */
.guide-text-image--count-1.guide-text-image--top .guide-text-image__frame,
.guide-text-image--count-1.guide-text-image--bottom .guide-text-image__frame {
  width: 100%;
  height: calc(265 * var(--gu));
}

/* 左右排版单图 200×352。
 * 实稿图位的布局槽是旋转后的外包盒 218.162×361.976（200×352 转 ±3° 所得），
 * 而 CSS 的 transform 不参与布局 → 用等值 margin 把槽补齐，否则文字列起点会偏 18 设计px。 */
.guide-text-image--count-1.guide-text-image--left .guide-text-image__frame,
.guide-text-image--count-1.guide-text-image--right .guide-text-image__frame {
  width: calc(200 * var(--gu));
  height: calc(352 * var(--gu));
  margin: calc(4.988 * var(--gu)) calc(9.081 * var(--gu));
}

/* 双图 302×212 */
.guide-text-image--count-2 .guide-text-image__frame {
  width: calc(302 * var(--gu));
  height: calc(212 * var(--gu));
}

/* 三图 202×146 */
.guide-text-image--count-3 .guide-text-image__frame {
  width: calc(202 * var(--gu));
  height: calc(146 * var(--gu));
}

/* 行高补齐：实稿行高由最高的旋转外包盒决定（双图 227.516 / 三图 156.371），
 * 图片在行内垂直居中，故只需给行设 min-height，不必逐图加外包盒 margin。 */
.guide-text-image--count-2 .guide-text-image__row {
  min-height: calc(227.516 * var(--gu));
}

.guide-text-image--count-3 .guide-text-image__row {
  min-height: calc(156.371 * var(--gu));
}

/* 微旋（实稿值）：左右单图**同为 +3°**（design_context 两处均为 rotate-3，此前 --left 误写 −3°）、
 * 双图 −3°/+2°、三图 +1°/+3°/−2°、上下单图不旋 */
.guide-text-image--right.guide-text-image--count-1 .guide-text-image__frame {
  transform: rotate(3deg);
}

.guide-text-image--left.guide-text-image--count-1 .guide-text-image__frame {
  transform: rotate(3deg);
}

.guide-text-image--count-2 .guide-text-image__frame:nth-child(1) {
  transform: rotate(-3deg);
}

.guide-text-image--count-2 .guide-text-image__frame:nth-child(2) {
  transform: rotate(2deg);
}

.guide-text-image--count-3 .guide-text-image__frame:nth-child(1) {
  transform: rotate(1deg);
}

.guide-text-image--count-3 .guide-text-image__frame:nth-child(2) {
  transform: rotate(3deg);
}

.guide-text-image--count-3 .guide-text-image__frame:nth-child(3) {
  transform: rotate(-2deg);
}

/* 卡内 9GAME 斜纹（装饰元素 1，259.237×88）：存在于 --left/--right 的 count-1（y=305）
 * 与无图样式 --text-only（y=94，278:8061）；其余带图变体无此图层。
 * 复用 Summary 那张（内嵌 .2 浓度）叠加 opacity .4 → .08；坐标取 design_context 值（已扣 1px 边框）。
 * 用 ::after 而非 ::before：实稿图层排在文字之后，需压在文字上方。 */
.guide-text-image--left.guide-text-image--count-1::after,
.guide-text-image--right.guide-text-image--count-1::after,
.guide-text-image--text-only::after {
  content: "";
  position: absolute;
  width: calc(259.237 * var(--gu));
  height: calc(88 * var(--gu));
  opacity: .4;
  background: var(--guide-asset-summary-decor) no-repeat left top / contain;
  pointer-events: none;
}

.guide-text-image--left.guide-text-image--count-1::after {
  /* 右基准：斜纹贴卡右侧（外框 686 − 400 − 259.237 − 1px 右边框 = 25.763gu） */
  right: calc(25.763 * var(--gu) - 1px);
  top: calc(305 * var(--gu));
}

.guide-text-image--right.guide-text-image--count-1::after {
  left: calc(24 * var(--gu));
  top: calc(305 * var(--gu));
}

/* 无图样式（278:8061，变体集里标为 ImagePosition=Bottom, MediaCount=1 但无任何图节点）：
 * 只有 __text + 斜纹，卡高纯由文本行数决定（实稿 3 行 = 208）；不带位置/数量 modifier。 */
.guide-text-image--text-only::after {
  right: calc(25.763 * var(--gu) - 1px);
  top: calc(94 * var(--gu));
}

/* ----------------------------------------------------------------------------
 * 9. Guide/Notice（236:5577）—— 提示条（R7：--warning|--tip 必带其一；R15：按序交替）
 * ---------------------------------------------------------------------------- */
.guide-notice {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* v0.5：左 20 / 上右下 28（图标视觉左缘 20 + 9 ≈ 28，正文宽 578） */
  padding: calc(28 * var(--gu)) calc(28 * var(--gu)) calc(28 * var(--gu)) calc(20 * var(--gu));
  border: 1px solid transparent;
  border-radius: calc(12 * var(--gu));
}

.guide-notice--warning {
  background: var(--guide-c-surface-brand-subtle);
  border-color: var(--guide-c-border-brand-subtle);
}

.guide-notice--tip {
  background: var(--guide-c-surface-warning);
  border-color: var(--guide-c-border-warning);
}

/* 图标位 48×48 整容器导出（气泡占 9,9→39,34.9）→ 直接铺满，无需内缩推算 */
.guide-notice::before {
  content: "";
  flex: none;
  width: calc(48 * var(--gu));
  height: calc(48 * var(--gu));
  /* 权威间距：design_context 给 layout/content `gap-[var(--space/12,12px)]`；
   * 首子项是伪元素 → margin 挂在它自身上。曾误用 metadata 反推为 8（把 content 的 x=28 当成图标 x）。 */
  margin-right: calc(12 * var(--gu));
  background: no-repeat center / contain;
}

.guide-notice--warning::before {
  background-image: var(--guide-asset-notice-icon);
}

.guide-notice--tip::before {
  background-image: var(--guide-asset-notice-icon-tip);
}

.guide-notice__text {
  flex: 1;
  min-width: 0;
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-secondary);
}

/* ----------------------------------------------------------------------------
 * 10. Guide/Data/Table（225:9602）—— 数据对照表
 * v0.5 四预设（宽度 686，行内 padding 28 → 内容宽 630）：
 *   B（默认 cols-2）130 + 40 + FILL(460)；D（cols-2 equal）305×2 + 20
 *   C（默认 cols-3）115 + 40 + 180 + 40 + 255；A（cols-3 equal）196×3 + 20×2
 * 列距语义：label 预设为「20 + 零宽分隔线 + 20 = 40」，equal 预设为 20（与设计稿数值自洽）。
 * 分隔线仍由 CSS 绝对定位生成、不占流（R13）。不用 gap：列距挂后一列的 margin-left。
 * ---------------------------------------------------------------------------- */
.guide-table {
  display: flex;
  flex-direction: column;
  /* 宽 100%（宿主内容区 686 = 750 − 32×2）：v0.5 组件设计宽已与宿主一致，
   * 不再需要 702gu 定宽 + 负 margin 溢出居中 */
  width: 100%;
}

/* 表头与各行、行与行之间 16（实稿 header 底 60 → row-1 顶 76） */
.guide-table > * + * {
  margin-top: calc(16 * var(--gu));
}

.guide-table__head,
.guide-table__row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ── B：2 列 label-content —— 键列 130 定宽（Header 坐标 28 + 130 + 40 = 198）+ 值 460 填充 ── */
.guide-table--cols-2 .guide-table__cell--key,
.guide-table--cols-2 .guide-table__head-cell:first-child {
  flex: none;
  width: calc(130 * var(--gu));
}

/* 值列没有专用 modifier 类（map structure 里只有 guide-table__cell / --key）
 * → 用 :not(--key) 定位，不存活的 --value 类名会静默失效 */
.guide-table--cols-2 .guide-table__cell:not(.guide-table__cell--key),
.guide-table--cols-2 .guide-table__head-cell:last-child {
  flex: 1 1 0;
  min-width: 0;
  margin-left: calc(40 * var(--gu));
}

/* ── D：2 列 equal —— 305×2 + 20 = 630（等宽预设列距 20，不含分隔线占位） ── */
.guide-table--cols-2.guide-table--equal .guide-table__cell,
.guide-table--cols-2.guide-table--equal .guide-table__head-cell {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.guide-table--cols-2.guide-table--equal .guide-table__cell:nth-child(2),
.guide-table--cols-2.guide-table--equal .guide-table__head-cell:nth-child(2) {
  margin-left: calc(20 * var(--gu));
}

/* ── C：3 列 label-value-desc —— 115 + 40 + 180 + 40 + 255 = 630 ── */
.guide-table--cols-3 .guide-table__cell:nth-child(1),
.guide-table--cols-3 .guide-table__head-cell:nth-child(1) {
  flex: none;
  width: calc(115 * var(--gu));
}

.guide-table--cols-3 .guide-table__cell:nth-child(2),
.guide-table--cols-3 .guide-table__head-cell:nth-child(2) {
  flex: none;
  width: calc(180 * var(--gu));
  margin-left: calc(40 * var(--gu));
}

.guide-table--cols-3 .guide-table__cell:nth-child(3),
.guide-table--cols-3 .guide-table__head-cell:nth-child(3) {
  flex: none;
  width: calc(255 * var(--gu));
  margin-left: calc(40 * var(--gu));
}

/* ── A：3 列 equal —— 196×3 + 20×2 ≈ 630（按比例铺满，避免溢出） ── */
.guide-table--cols-3.guide-table--equal .guide-table__cell,
.guide-table--cols-3.guide-table--equal .guide-table__head-cell {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.guide-table--cols-3.guide-table--equal .guide-table__cell:nth-child(2),
.guide-table--cols-3.guide-table--equal .guide-table__head-cell:nth-child(2),
.guide-table--cols-3.guide-table--equal .guide-table__cell:nth-child(3),
.guide-table--cols-3.guide-table--equal .guide-table__head-cell:nth-child(3) {
  margin-left: calc(20 * var(--gu));
}

.guide-table__head {
  min-height: calc(60 * var(--gu));
  padding: calc(9 * var(--gu)) calc(28 * var(--gu));
  border-radius: calc(8 * var(--gu));
  background: var(--guide-c-neutral-900);
}

.guide-table__head-cell {
  position: relative;
  font-size: calc(26 * var(--gu));
  line-height: calc(41 * var(--gu));
  font-weight: 500;
  color: var(--guide-c-text-inverse);
}

.guide-table__row {
  padding: calc(9 * var(--gu)) calc(28 * var(--gu));
  border-radius: calc(8 * var(--gu));
  background: var(--guide-c-surface-card);
}

.guide-table__cell {
  position: relative;
  min-width: 0;
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-secondary);
}

/* 键列不设 white-space:nowrap——服侧键长度不可控（B 预设键列定宽 130，超长时换行），
 * 允许换行由行高撑开（R17） */
.guide-table__cell--key {
  font-weight: 500;
  line-height: normal;
  color: var(--guide-c-text-primary);
}

/* 列间竖分隔：1px × 36（复刻 SVG Line 51，实稿为横线 rotate 90°）。
 * 仅存在于数据行——表头是纯绝对定位文字，**无线**；
 * label 预设列距 40 → 线落在中点（本列左缘 −20）；equal 预设列距 20 → −10。 */
.guide-table__cell:not(.guide-table__cell--key)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-20 * var(--gu));
  width: 1px;
  height: calc(36 * var(--gu));
  background: var(--guide-c-border-subtle);
  transform: translateY(-50%);
}

.guide-table--equal .guide-table__cell:not(.guide-table__cell--key)::before {
  left: calc(-10 * var(--gu));
}

/* ----------------------------------------------------------------------------
 * 11. Guide/Process/Step（73:1708，686×262）+ Timeline（78:2234）
 * ---------------------------------------------------------------------------- */
.guide-step {
  position: relative;
  padding: calc(20 * var(--gu)) calc(28 * var(--gu)) calc(24 * var(--gu));
  border: 1px solid var(--guide-c-border-card);
  border-radius: calc(12 * var(--gu));
  background: var(--guide-c-surface-card);
  overflow: hidden;
}

/* 实稿卡片 gap 28 只作用于「标签 → 内容块」，标题↔正文是 12 → 用兄弟选择器分别表达 */
.guide-step > * + * {
  margin-top: calc(28 * var(--gu));
}

.guide-step__title + .guide-step__text {
  margin-top: calc(12 * var(--gu));
}

.guide-step__label {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.guide-step__label-text {
  padding: 0 calc(10 * var(--gu));
  background: var(--guide-c-text-primary);
  color: var(--guide-c-text-inverse);
  font-size: calc(24 * var(--gu));
  line-height: calc(34 * var(--gu));
  font-weight: 500;
  white-space: nowrap;
}

/* 标签尾切：Rectangle 142 = 5×34，实稿带 scaleY(-1) → 顶点 (0,0)(5,6.18)(5,34)(0,34)。
 * left: -1px 做 1px 重叠防缝隙；重叠段必须在裁剪多边形里保持平顶，
 * 否则接缝处伪元素顶部已沿斜边下沉，视觉上会出现「台阶」缺口。
 * ⇒ 宽度 = 5gu + 2px（1px 重叠 + 1px 平顶），顶点前 2px 画平段，斜切跨度仍为 5gu。 */
.guide-step__label::after {
  content: "";
  position: relative;
  left: -1px;
  flex: none;
  width: calc(5 * var(--gu) + 2px);
  height: calc(34 * var(--gu));
  background: var(--guide-c-text-primary);
  clip-path: polygon(0 0, 2px 0, 100% 18.18%, 100% 100%, 0 100%);
}

/* 标签下方渐变横线：decor/divider 636×1 @ (25, 71)，居中，黑→透明，opacity .3 */
.guide-step::before {
  content: "";
  position: absolute;
  left: calc(25 * var(--gu));
  right: calc(25 * var(--gu));
  top: calc(71 * var(--gu));
  height: 1px;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 100%);
}

/* 右上角标两层：折角箭头 20×13 @ Figma(654,46) + 9GAME 点阵 62.19×15 @ Figma(612,15)。
 * 两者 y 区间不重叠（46-59 / 15-30），但都归 ::after 一个槽 → 用双 background 层表达。
 * 横向用**右基准**（100% − 右距）：卡外框 686gu 减去 1px 右边框后为背景定位区，
 *   dots 右距 = (686−598−62.19)gu − 1px，arrow 右距 = (686−640−19.59)gu − 1px 。
 * 不能用 left 基准：容器宽 ≠ 686gu（宿主自带边距/宽屏预览）时两图会整体靠左；
 * 1px 边框不随 gu 缩放，故写成 ±1px 而不是并入 gu 系数。 */
.guide-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--guide-asset-step-dots), var(--guide-asset-step-arrow);
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(100% - 25.811 * var(--gu) + 1px) calc(15 * var(--gu)),
    calc(100% - 26.41 * var(--gu) + 1px) calc(44 * var(--gu));
  background-size:
    calc(62.19 * var(--gu)) calc(15 * var(--gu)),
    calc(20 * var(--gu)) calc(13 * var(--gu));
  pointer-events: none;
}

.guide-step__title {
  font-size: calc(32 * var(--gu));
  line-height: calc(42 * var(--gu));
  font-weight: 700;
  color: var(--guide-c-text-primary);
}

.guide-step__title--brand {
  color: var(--guide-c-brand);
}

/* R16 唯一例外：本段不使用品牌橙高亮，需要强调请用 .guide-mark */
.guide-step__text {
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-secondary);
}

.guide-timeline {
  display: flex;
  flex-direction: column;
}

.guide-timeline > * + * {
  margin-top: calc(24 * var(--gu));
}

/* ----------------------------------------------------------------------------
 * 12. Guide/Card/MediaDetail（49:1631，630×142）
 * ---------------------------------------------------------------------------- */
.guide-media-detail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* 缩略图 → 内容 24（实稿 media 右 142 → content 左 166） */
.guide-media-detail > * + * {
  margin-left: calc(24 * var(--gu));
}

/* R17 例外：列表条目行对齐依赖固定缩略图尺寸；无白描边、无阴影（与 guide-image 不同） */
.guide-media-detail__frame {
  flex: none;
  width: calc(142 * var(--gu));
  height: calc(142 * var(--gu));
  border-radius: calc(12 * var(--gu));
  overflow: hidden;
}

.guide-media-detail__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-media-detail__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 标题 → 正文 12（实稿 title-block 底 42 → body 顶 54） */
.guide-media-detail .guide-media-detail__content > * + * {
  margin-top: calc(12 * var(--gu));
}

/* 字体权威值（design_context 49:1631 → Guide/Title/Minor）：Medium **34 / line-height 42**。
 * 左内缩 = 设计 px-8 的 8 + 菱形旋转溢出 2.485（与 L3 同一套取值）。 */
.guide-media-detail__title {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 calc(8 * var(--gu)) 0 calc(10.485 * var(--gu));
  font-size: calc(34 * var(--gu));
  line-height: calc(42 * var(--gu));
  font-weight: 500;
  color: var(--guide-c-text-primary);
}

/* 菱形：实稿占位盒 16.971 + gap 10，而 transform 不改布局盒（仍 12）
 * → margin-right 补 2.485；行高 42 下中心 21 → margin-top 15（与 L3 一致） */
.guide-media-detail__title::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: calc(12 * var(--gu));
  height: calc(12 * var(--gu));
  margin-top: calc(15 * var(--gu));
  margin-right: calc(12.485 * var(--gu));
  border: calc(2 * var(--gu)) solid var(--guide-c-brand);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.guide-media-detail__text {
  /* 正文与标题区不同：实稿无 px-8，左缘与 layout/content 对齐 */
  padding: 0;
  text-align: justify;
  font-size: calc(32 * var(--gu));
  line-height: calc(50 * var(--gu));
  color: var(--guide-c-text-secondary);
}

/* ----------------------------------------------------------------------------
 * 13. Guide/Card/ContentList（49:1680，686×1008）—— 复合内容卡
 * ---------------------------------------------------------------------------- */
.guide-card-list {
  padding: calc(28 * var(--gu));
  border: 1px solid var(--guide-c-border-card);
  border-radius: calc(12 * var(--gu));
  background: var(--guide-c-surface-card);
}

/* 相邻子项分隔线：实稿为「子项 24 → Divider → 24」，故用 margin + padding 双侧留白，
 * 顺序无关（R8：不依赖具体排列） */
.guide-card-list > * + * {
  margin-top: calc(24 * var(--gu));
  padding-top: calc(24 * var(--gu));
  border-top: 1px solid var(--guide-c-border-subtle);
}

/* __item 是纯结构容器（内部只放一个 guide-media-detail），自身无视觉；
 * 分隔线与间距统一由 .guide-card-list > * + * 负责（R8：与子项顺序无关） */
.guide-card-list__item {
  display: block;
}

.guide-card-list__group {
  display: flex;
  flex-direction: column;
}

.guide-card-list .guide-card-list__group > * + * {
  margin-top: calc(12 * var(--gu));
}

/* 卡内正文与条目对齐：卡片已有 28 padding（内容宽 628，再扣 1px 边框） */
.guide-card-list .guide-text {
  padding-left: 0;
  padding-right: 0;
}

/* ----------------------------------------------------------------------------
 * 14. Guide/Brand/Footer（46:1319，750×129.09）—— 通栏页脚
 * ---------------------------------------------------------------------------- */
.guide-footer {
  position: relative;
  /* 必须是 flex（或其它建 BFC 的方式）：一旦子项写垂直 margin，会穿透 footer 与宿主 body 合并出去，
   * 实测会让白字落在深底上方（白底白字）并让滚动高度少算 39px。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: calc(129 * var(--gu));
  /* 纵向内缩由 footer 自己的 padding 承载：上 78 / 下 19 / 左 32（实稿 text @ (32,78)，598×32） */
  padding: calc(78 * var(--gu)) 0 calc(19 * var(--gu)) calc(32 * var(--gu));
  margin-top: calc(40 * var(--gu));
}

/* 通栏：仅在 guide-page 内做负边距突破安全边距，其他宿主不自拉负边距 */
.guide-page > .guide-footer {
  /* 686 内容区 → 750 通栏：左右各 −32（与宿主 .PostsDetail--content 的 32rpx 内边距一致） */
  margin-left: calc(-32 * var(--gu));
  margin-right: calc(-32 * var(--gu));
}

/* 深色底：Rectangle 132 = 750×86 @ y43，双折点 (0,0)(477.692,17.4121)(750,0.5)。
 * 底落在 inset:0 的伪元素上 → 容器被文本撑高时随高度延展，斜切角度不变（R17）。
 * 477.692 / 750 = 63.692% */
.guide-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--guide-c-neutral-900);
  clip-path: polygon(0 calc(43 * var(--gu)),
      63.692% calc(60.412 * var(--gu)),
      100% calc(43.5 * var(--gu)),
      100% 100%,
      0 100%);
}

/* 品牌图形两层（R13：AI 不产装饰节点，页脚 structure 里只有 __text）：
 *   · [ by 9game ] 313×64 @ (434.96,62) —— 水印浓度 opacity .08 已内嵌在 SVG 内，此处不再叠加
 *   · 装饰标志 123.91 @ (615,3) —— 图形内部自带 11.96° 旋转，CSS 不要再转
 * 实稿层级：角标压在品牌字之上 → 角标写在第一个 background 层。
 * 横向一律用**右基准**（100% − 右距）：mark 右距 11.09 = 750−615−123.91，brand 右距 2.04 = 750−434.96−313。
 * 不能用 left 基准：宿主容器宽 ≠ 750gu（自带边距/宽屏预览）时两图会整体靠左，与设计「贴右」不符。
 * 纵向仍锚组件顶（3 / 62），容器被文本撑高时二者随深色带上沿不动。 */
.guide-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--guide-asset-footer-mark), var(--guide-asset-footer-brand);
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(100% - 11.09 * var(--gu)) calc(3 * var(--gu)),
    calc(100% - 2.04 * var(--gu)) calc(62 * var(--gu));
  background-size:
    calc(123.91 * var(--gu)) calc(123.91 * var(--gu)),
    calc(313 * var(--gu)) calc(64 * var(--gu));
  pointer-events: none;
}

.guide-footer__text {
  position: relative;
  z-index: 1;
  /* 位置由 .guide-footer 的 padding 给，此处不写 margin；按约定免责声明**限一行**，超出省略号。
   * 实稿 598 宽（右缘 630，右侧留 120 给品牌装饰）→ 598 / 22 ≡ 27.2 个汉字，文案建议 ≤ 27 字（map 已告知服侧 AI）。 */
  width: calc(598 * var(--gu));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(22 * var(--gu));
  line-height: calc(32 * var(--gu));
  font-weight: 400;
  color: var(--guide-c-text-inverse);
  opacity: .9;
}

/* ----------------------------------------------------------------------------
 * 15. 攻略详情页场景复位（spec §1 C1/C2）
 *     前端把 <img> 换成 <LazyImage className={styles.imgWrap}>，CSS Modules 哈希类名
 *     无法命中 → 用「__frame 后代元素选择器」绕过，把默认 margin/圆角/尺寸打回设计值。
 * ---------------------------------------------------------------------------- */
.guide-media__frame > div,
.guide-media__frame img {
  margin: 0 !important;
  max-width: 100% !important;
}

.guide-media__frame img {
  display: block;
  border-radius: 0 !important;
}

/* 通栏图：height auto 与前端现状（.richTextRoot img / .imgWrap img）一致，无需提权 */
.guide-image.guide-media__frame img,
.guide-image .guide-media__frame img {
  width: 100%;
  height: auto;
}

/* 定高槽（图文卡 / 缩略图）：必须铺满固定框，故提权覆盖前端的 height:auto */
.guide-text-image .guide-media__frame img,
.guide-media-detail .guide-media__frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.guide-media-detail .guide-media__frame img {
  border-radius: inherit !important;
}