/* ============================================================
   角色攻略 · 富版式（role-guide.css）· v2 2026-10-24
   ------------------------------------------------------------
   用途：角色攻略类长文（抽取建议 / 技能机制 / 环合反应 / 弧盘 /
         空幕卡带 / 技能加点 / 觉醒 / 配队）。

   v2 版式来源：运营侧《明音凛 角色攻略》设计稿（1280 画布，
   版心 1020，头部名片 1060）。与 v1 的差别：

     v1  每节一张白卡（border + 圆角 + 阴影），头部是浅色名片
     v2  整页平铺在浅灰底上，节与节之间只用 1px 分隔线 + 大留白；
         头部换成深色渐变名片（角色头像 + 角色切换条）；表格是白底
         面板，表头浅灰、行间 1px 细线；标题改成「01 抽取建议」
         的序号 + 标题双色排版（序号由 CSS 计数器生成，不用改文案）。

   【配色】结构色仍走 design-system/tokens.css（surface / line / ink
         / brand），设计稿里 token 表达不了的那几档（章节序号的亮蓝、
         首选/次选标签、T0~T3 档位深浅）在 .rg-guide 上定义本地变量
         --rg-*，取色直接对齐设计稿实测值，作用域只在本组件内。

   【作用域】全部挂在 .rg-guide 下（配合 <article class="article-body">
         > <div class="rg-guide">），外层 article 的白卡壳用 :has() 去掉。
   【例外】白色线条图标（.skb 技能 / .awkb 觉醒 / .drvic 驱动块 /
         .elx 属性）必须深色底片，浅底看不见；弧盘与套装图标
         （.itic）自带深色方底，不能再叠一层底片。
   ============================================================ */

/* ---------- 0. 版心 ----------------------------------------
   设计稿：内容 1020 / 头部名片 1060（左右各外扩 20）。
   页面里改成容器 1060 + .rg-guide 左右 20px 内边距，
   名片再用负外边距顶出去，视觉上就是设计稿的样子。 */
/* 容器 1100 = 内容 1060 + 左右 20px 内边距（.container 自带），
   再减去 .rg-guide 的 20px、把名片负边距顶出去，最终：
   正文 1020 / 名片 1060，和设计稿一致。 */
.article-wrap:has(.rg-guide){max-width:1100px}

/* 外层 <article class="article-body"> 在 article.css / overlay.css 里是白卡
   （白底 + 1px 边 + 圆角 + 阴影 + 40px 内边距），设计稿是大面积平铺，
   这里用 :has() 把外壳脱掉。article 的 class 必须保持纯 article-body：
   build_seo.ps1 靠 `<article class="article-body">` 抓正文摘要。 */
.article-body:has(> .rg-guide){
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  margin-top:20px;
}

.rg-guide{
  /* 本地色板：对齐设计稿实测值 */
  --rg-ink:#15181d;          /* 标题 / 段落 / 表格正文 */
  --rg-text:#5a616b;         /* 列表正文 */
  --rg-muted:#6e7682;        /* 表头 / 批注 / 次要说明 */
  --rg-faint:#9aa1ab;        /* 极弱信息 / 编号 / 页脚 */
  --rg-line:#e8eaee;         /* 1px 分隔线（设计稿实测） */
  --rg-blue:#2f6bff;         /* 章节序号 */
  --rg-blue-deep:#0a46c4;    /* 强调文字 / T0 */
  --rg-blue-lit:#0b5fff;     /* T1 */
  --rg-chip:#f3f4f7;         /* 浅灰胶囊底 */
  --rg-pink:#fdf0f6;         /* 首选标签底 */
  --rg-pink-ink:#be2a5f;     /* 首选标签字 */
  --rg-pad:20px;             /* 版心内边距 */

  counter-reset:rgsec;
  padding:0 var(--rg-pad);
  font-size:15px;
  line-height:1.8;
  color:var(--rg-text);
}

.rg-guide p{margin:12px 0;font-size:15px;line-height:1.8;color:var(--rg-ink)}
.rg-guide strong,.rg-guide b{color:var(--rg-ink)}
.rg-guide a{color:var(--rg-blue-deep)}
.rg-guide hr{display:none}   /* 分隔线由 .rg-sec 自己画 */
.rg-guide img{max-width:100%}

/* ---------- 1. 头部名片 ------------------------------------
   深色渐变 + 右下角蓝色辉光；头像 132、右下角属性角标；
   底部是角色切换条（当前角色放大 + 蓝色名签），最右是图鉴入口。 */
.rg-guide .rg-hero{
  position:relative;
  margin:16px calc(-1 * var(--rg-pad)) 0;
  padding:32px var(--rg-pad) 20px;
  border:0;
  border-radius:20px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(95% 120% at 98% 100%, rgba(82,140,222,.98) 0%, rgba(62,110,186,.55) 40%, rgba(40,70,130,0) 72%),
    radial-gradient(80% 110% at 88% -6%, rgba(96,92,196,.50) 0%, rgba(96,92,196,0) 58%),
    linear-gradient(100deg,#0a1118 0%,#111c2d 34%,#182b48 62%,#22416b 100%);
  box-shadow:0 14px 34px rgba(15,26,43,.22);
}
.rg-guide .rg-herotop{display:flex;align-items:center;gap:26px}

/* 头像 + 属性角标 */
.rg-guide .rg-herow{position:relative;flex:none}
.rg-guide .rg-hero-img{
  display:block;
  width:132px;height:132px;
  border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 9px rgba(122,170,255,.16),
    0 12px 30px rgba(0,0,0,.45);
}
.rg-guide .rg-elb{
  position:absolute;
  right:-4px;bottom:-2px;
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.rg-guide .rg-elb .elx{width:28px;height:28px;background-color:#171d2b;background-size:20px 20px;background-position:center;background-repeat:no-repeat;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--elc,rgba(255,255,255,0))}

/* 标题区 */
.rg-guide .rg-heroinfo{min-width:0}
.rg-guide .rg-eyebrow{
  font-size:14px;
  line-height:1.6;
  letter-spacing:1px;
  color:rgba(255,255,255,.55);
}
.rg-guide .rg-heroinfo h1{
  margin:6px 0 14px;
  padding:0;
  border:0;
  font-size:32px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.5px;
  color:#fff;
}
.rg-guide .rg-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
}
.rg-guide .rg-meta+.rg-meta{margin-top:10px}
.rg-guide .rg-meta>span{display:inline-flex;align-items:center;gap:6px}
.rg-guide .rg-meta i{
  font-style:normal;
  font-size:12px;
  color:rgba(255,255,255,.5);
  margin-right:2px;
}
.rg-guide .rg-meta b{
  font-size:15.5px;
  font-weight:700;
  color:#fff;
  margin-right:6px;
}
.rg-guide .rg-el{width:20px;height:20px;object-fit:contain;display:inline-block;filter:drop-shadow(0 0 1px rgba(20,26,40,.9)) drop-shadow(0 0 2px rgba(20,26,40,.5))}

/* 角色切换条：左边横向滚动的头像，右边固定的图鉴入口
   （按钮放在滚动容器外面，头像再多也不会被它盖住） */
.rg-guide .rg-railrow{
  display:flex;
  align-items:flex-end;
  gap:18px;
  margin-top:42px;
  padding-bottom:2px;
}
.rg-guide .rg-rail{
  display:flex;
  flex:1;
  min-width:0;
  align-items:flex-end;
  gap:18px;
  padding-bottom:20px;   /* 给选中项的名签留位置，否会被滚动容器裁掉 */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.rg-guide .rg-rail::-webkit-scrollbar{height:5px}
.rg-guide .rg-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
.rg-guide .rg-rc{
  position:relative;
  flex:none;
  width:56px;height:56px;
  border-radius:16px;
  overflow:visible;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .18s ease,box-shadow .18s ease;
}
.rg-guide .rg-rc img{
  width:100%;height:100%;
  border-radius:inherit;
  object-fit:cover;
  object-position:top center;
}
.rg-guide .rg-rc:hover{transform:translateY(-2px)}
.rg-guide .rg-rc.is-on{
  width:64px;height:64px;
  border-radius:18px;
  box-shadow:
    0 0 0 2px rgba(122,170,255,.9),
    0 0 20px rgba(62,132,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.18);
}
.rg-guide .rg-rc.is-on img{border-radius:17px}
.rg-guide .rg-rc .rlbl{
  position:absolute;
  left:50%;bottom:-16px;
  transform:translateX(-50%);
  padding:2px 8px;
  border-radius:10px;
  background:var(--rg-blue);
  color:#fff;
  font-size:11px;
  line-height:16px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.rg-guide .rg-all{
  flex:none;
  width:56px;height:56px;
  border-radius:16px;
  background:#fff;
  color:#2b3440;
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.rg-guide .rg-all:hover{transform:translateY(-2px)}
.rg-guide .rg-all svg{width:22px;height:22px;display:block}

/* ---------- 2. 分节：无卡片，只有 1px 分隔线 + 留白 ---------- */
.rg-guide .rg-sec{
  counter-increment:rgsec;
  padding:34px 0 38px;
  margin:0;
  border:0;
  border-top:1px solid var(--rg-line);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.rg-guide .rg-sec:first-of-type{border-top:0;padding-top:34px}
.rg-guide .rg-sec:last-child{padding-bottom:26px}

/* ---------- 3. 标题层级 ------------------------------------
   h2 = 序号 28 / 标题 24；h3、h4 = 17。 */
.rg-guide h2{
  display:flex;
  align-items:baseline;
  gap:22px;
  margin:0 0 22px;
  padding:0;
  border:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.2px;
  color:var(--rg-ink);
}
.rg-guide h2::before{
  content:counter(rgsec,decimal-leading-zero);
  flex:none;
  font-size:28px;
  font-weight:800;
  line-height:1;
  letter-spacing:1.5px;
  color:var(--rg-blue);
  font-variant-numeric:tabular-nums;
}
.rg-guide h2+h3,
.rg-guide h2+*{margin-top:0}
.rg-guide h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:30px 0 12px;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  color:var(--rg-ink);
}
.rg-guide h4{
  margin:24px 0 8px;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  color:var(--rg-ink);
}
.rg-guide h2+p,.rg-guide h2+ul,.rg-guide h2+ol,.rg-guide h2+table,
.rg-guide h2+div,.rg-guide h2+.note{margin-top:0}

/* ---------- 4. 列表 / 批注 --------------------------------
   设计稿不用项目符号：正文缩进 17px，行高 1.8。 */
.rg-guide ul,.rg-guide ol{
  list-style:none;
  margin:10px 0;
  padding:0;
}
.rg-guide li{
  position:relative;
  margin:0;
  padding-left:17px;
  font-size:15px;
  line-height:1.8;
  color:var(--rg-text);
}
.rg-guide li b,.rg-guide li strong{color:var(--rg-ink)}
.rg-guide li ul,.rg-guide li ol{margin:2px 0 2px 0}
.rg-guide li li{padding-left:17px}

/* 批注条：左侧 2px 竖线，无底色 */
.rg-guide .note{
  margin:22px 0;
  padding:2px 0 2px 12px;
  border:0;
  border-left:2px solid #d8dce2;
  border-radius:0;
  background:none;
  font-size:15px;
  line-height:1.75;
  color:var(--rg-muted);
}
.rg-guide .note b{color:var(--rg-text)}
.rg-guide .note img{vertical-align:-7px}

/* 抽取结论（设计稿没有这一条，保留内容但压成一行引言语） */
.rg-guide .verdict{
  display:block;
  margin:0 0 22px;
  padding:2px 0 2px 12px;
  border:0;
  border-left:2px solid var(--rg-blue);
  border-radius:0;
  background:none;
  font-size:15px;
  line-height:1.75;
  color:var(--rg-text);
}
.rg-guide .verdict b{font-size:15px;color:var(--rg-blue-deep);letter-spacing:0}

/* ---------- 5. 图标 ---------------------------------------- */
/* 弧盘 / 套装图标：自带深色方底，只做圆角，不再叠底片 */
.rg-guide .itic{
  width:60px;height:60px;
  object-fit:contain;
  border-radius:10px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  vertical-align:middle;
  display:inline-block;
}
/* 白色线条图标：深靛底片（站点深色，不用设计稿的纯黑） */
.rg-guide .skb{
  width:40px;height:40px;
  object-fit:contain;
  display:inline-block;   /* main.css 的 img{display:block} 会把并排的图标拆成两行 */
  vertical-align:middle;
  border-radius:50%;
  padding:7px;
  background:linear-gradient(160deg,#2b3a5c,#182238);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  flex:none;
}
.rg-guide h3 .skb{width:40px;height:40px;border-radius:50%;padding:7px}
.rg-guide .note .skb{margin-right:6px;vertical-align:-8px}
.rg-guide .arc{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.rg-guide .arc b{white-space:nowrap;font-weight:600}
.rg-guide .mini{font-size:13px;color:var(--rg-muted);margin-left:6px}
.rg-guide .hint{font-size:13px;color:var(--rg-faint);margin-left:4px}

/* ---------- 6. 表格：白底面板，表头浅灰，行间细线 ---------- */
.rg-guide .twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 0}
.rg-guide table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:15px;
  margin:18px 0 0;
}
.rg-guide th{
  background:#fff;
  text-align:left;
  font-weight:400;
  font-size:15px;
  color:var(--rg-muted);
  padding:14px;
  border:0;
  border-bottom:1px solid var(--rg-line);
  white-space:normal;
  vertical-align:middle;
}
.rg-guide td{
  padding:13px 14px;
  border:0;
  border-bottom:1px solid var(--rg-line);
  vertical-align:middle;
  color:var(--rg-ink);
  background:none;
}
.rg-guide tr:last-child td{border-bottom:0}
.rg-guide tr:nth-child(even) td{background:none}
.rg-guide .twrap table{margin:0}
.rg-guide td b{font-weight:600}

/* ---------- 7. 弧盘表 -------------------------------------- */
.rg-guide .arct th:first-child,
.rg-guide .arct td:first-child{text-align:left;padding-left:14px}
.rg-guide .arclv{
  display:inline-block;
  font-size:13px;
  line-height:1.5;
  padding:2px 9px;
  border-radius:5px;
  white-space:nowrap;
  font-weight:500;
}
.rg-guide .lv1{background:var(--rg-pink);color:var(--rg-pink-ink);font-weight:600}
.rg-guide .lv2{background:#f1f2f5;color:#3a4048}
.rg-guide .lv3{background:#f1f2f5;color:var(--rg-faint)}
.rg-guide .arct td{line-height:1.85}

/* ---------- 8. 驱动块 -------------------------------------- */
.rg-guide .drives{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.rg-guide .drv{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--rg-line);
  border-radius:12px;
  background:#fff;
  min-width:104px;
}
.rg-guide .drvic{
  width:58px;height:58px;
  object-fit:contain;
  border-radius:9px;
  padding:5px;
  background:linear-gradient(160deg,#2b3a5c,#182238);
  border:1px solid rgba(255,255,255,.10);
}
.rg-guide .drv b{font-size:13px;color:var(--rg-ink)}
.rg-guide .drv span{font-size:11.5px;color:var(--rg-faint)}

/* ---------- 9. 技能加点 / 觉醒 ---------------------------- */
.rg-guide .lvorder{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rg-guide .sv{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--rg-chip);
  border:0;
  border-radius:9px;
  padding:4px 12px 4px 6px;
}
.rg-guide .sv b{font-size:13.5px;font-weight:600;color:var(--rg-ink)}
.rg-guide .gt{font-style:normal;color:var(--rg-faint);font-size:13px}

.rg-guide .awline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rg-guide .awv{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--rg-chip);
  border:0;
  border-radius:999px;
  padding:5px 14px 5px 5px;
}
.rg-guide .awkb{
  width:40px;height:40px;
  object-fit:contain;
  border-radius:50%;
  padding:7px;
  background:linear-gradient(160deg,#2b3a5c,#182238);
  border:1px solid rgba(255,255,255,.10);
}
.rg-guide .awv b{font-size:13px;font-weight:600;color:var(--rg-ink)}

/* ---------- 10. 环合反应：两列 + 中缝细线 ------------------ */
.rg-guide .reacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:0;
  margin:22px 0 0;
  border-top:1px solid var(--rg-line);
}
.rg-guide .rx{
  padding:26px 38px 26px 0;
  border:0;
  border-bottom:1px solid var(--rg-line);
  border-radius:0;
  background:none;
}
.rg-guide .rx:nth-child(2n){padding-left:38px;padding-right:0;border-left:1px solid var(--rg-line)}
.rg-guide .rxl{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.rg-guide .elres{display:inline-flex;align-items:center;gap:4px}
.rg-guide .rxl b{font-size:17px;font-weight:700;color:var(--rg-ink);letter-spacing:.2px;margin-left:4px}
.rg-guide .el{
  width:34px;height:34px;
  object-fit:contain;
  vertical-align:middle;
  background:#16213a;
  border-radius:50%;
  padding:3px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 1px 4px rgba(22,33,58,.25);
}
.rg-guide .eq{font-style:normal;color:var(--rg-faint);font-size:14px;font-weight:400}
.rg-guide .rxp{margin:0;font-size:15px;line-height:1.75;color:var(--rg-text)}

/* ---------- 11. 抽取建议：人群 + 分档 ---------------------- */
.rg-guide .advice{display:block;margin:0}
.rg-guide .adv{
  padding:0;
  margin:0 0 24px;
  border:0;
  border-radius:0;
  background:none;
}
.rg-guide .adv:last-child{margin-bottom:0}
.rg-guide .adv h4{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  color:var(--rg-ink);
  display:block;
}
.rg-guide .adv h4::before{content:none}
.rg-guide .adv ul{margin:0}

/* 分档建议：一行三段 —— 人群（蓝）/ 档位（粗）/ 说明 */
.rg-guide .pick{
  display:block;
  margin:26px 0 0;
  padding:0;
  border-top:1px solid var(--rg-line);
}
.rg-guide .pk{
  display:grid;
  grid-template-columns:108px 120px minmax(0,1fr);
  align-items:baseline;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:none;
}
.rg-guide .pk .ph1{
  display:block;
  margin:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  font-size:15px;
  font-weight:600;
  color:var(--rg-blue-deep);
}
.rg-guide .pk b{
  display:block;
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--rg-ink);
}
.rg-guide .pk p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--rg-text);
}

/* ---------- 12. 配队 -------------------------------------- */
.rg-guide .grp{
  display:flex;
  align-items:center;
  gap:10px;
  margin:34px 0 0;
  padding:0 0 12px;
  border-bottom:1px solid var(--rg-line);
  font-size:17px;
  font-weight:700;
  color:var(--rg-ink);
}
.rg-guide .grp:first-of-type{margin-top:8px}
.rg-guide .gp{display:inline-flex;align-items:center;gap:4px}
.rg-guide .gel{
  width:25px;height:25px;
  object-fit:contain;
  border-radius:50%;
  padding:2px;
  background:#16213a;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9);
}
.rg-guide .grp b{color:var(--rg-ink)}
.rg-guide .gcnt{
  font-size:13px;
  font-weight:400;
  color:var(--rg-faint);
  margin-left:2px;
}
.rg-guide .gdef{margin:14px 0 0;font-size:15px;line-height:1.75;color:var(--rg-muted)}
.rg-guide .gdef b{color:var(--rg-ink);font-weight:600}
.rg-guide .gdef .gpair{color:var(--rg-faint)}

.rg-guide table.teams{table-layout:fixed;min-width:640px}
.rg-guide table.teams .memcell{padding:12px 8px}
.rg-guide .mem{display:flex;gap:8px;flex-wrap:nowrap}
.rg-guide .m{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:80px;
  flex:0 0 80px;
}
.rg-guide .ava{position:relative;display:block;width:60px;height:60px}
.rg-guide .av{
  display:block;
  width:60px;height:60px;
  border-radius:50%;
  background-color:#eef1f6;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 1px 4px rgba(24,34,56,.16);
}
.rg-guide .elb{
  position:absolute;
  right:-6px;bottom:-6px;
  width:24px;height:24px;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(24,34,56,.24);
}
.rg-guide .elb .elx{width:22px;height:22px;background-color:#171d2b;background-size:16px 16px;background-position:center;background-repeat:no-repeat;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--elc,rgba(255,255,255,0))}
.rg-guide .m b{
  font-size:11px;
  font-weight:400;
  color:#3a4048;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
}
.rg-guide .no{
  color:var(--rg-faint);
  font-size:14px;
  font-variant-numeric:tabular-nums;
  width:44px;
}
.rg-guide .tc{text-align:left}
.rg-guide .tag{color:var(--rg-ink);font-size:15px;font-weight:400;line-height:1.75}
.rg-guide .tier{
  display:inline-block;
  min-width:36px;
  padding:3px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:20px;
  text-align:center;
  white-space:nowrap;
}
.rg-guide .tT0{background:var(--rg-blue-deep);color:#fff}
.rg-guide .tT1{background:var(--rg-blue-lit);color:#fff}
.rg-guide .tT1-5{background:#d6e2ff;color:var(--rg-blue-deep)}
.rg-guide .tT2{background:#e8eaee;color:#5a616b}
.rg-guide .tT2-5{background:#f1f2f5;color:var(--rg-muted)}
.rg-guide .tT3{background:#f7f8fa;color:var(--rg-faint)}

/* ---------- 13. 页脚署名 ---------------------------------- */
.rg-guide .rg-colophon{
  margin-top:8px;
  padding-top:26px;
  border-top:1px solid var(--rg-line);
  text-align:center;
  font-size:13px;
  line-height:1.9;
  color:var(--rg-faint);
}
.rg-guide .rg-colophon span{display:block}

/* ---------- 14. 头像 / 元素角标的图片映射 ------------------
   路径相对本文件：assets/css/ → ../img/ */
.rg-guide .avi-1{background-image:url(../img/chars/char-mingyinlin.png)}
.rg-guide .avi-2{background-image:url(../img/chars/char-heiyu.png)}
.rg-guide .avi-3{background-image:url(../img/chars/char-yiluoyi.png)}
.rg-guide .avi-4{background-image:url(../img/chars/char-zaowu.png)}
.rg-guide .avi-5{background-image:url(../img/chars/char-ling.png)}
.rg-guide .avi-6{background-image:url(../img/chars/char-haniya.png)}
.rg-guide .avi-7{background-image:url(../img/chars/char-lingke.png)}
.rg-guide .avi-8{background-image:url(../img/chars/char-xun.png)}
.rg-guide .avi-9{background-image:url(../img/chars/char-canhong.png)}
.rg-guide .avi-10{background-image:url(../img/chars/char-dafudier.png)}
.rg-guide .avi-11{background-image:url(../img/chars/char-nanali.png)}
.rg-guide .avi-12{background-image:url(../img/chars/char-hasuoer.png)}
.rg-guide .avi-13{background-image:url(../img/chars/char-fadiya.png)}
.rg-guide .avi-14{background-image:url(../img/chars/char-adele.png)}
.rg-guide .avi-15{background-image:url(../img/chars/char-zhenhong.png)}
.rg-guide .avi-16{background-image:url(../img/chars/char-anhunqu.png)}
.rg-guide .avi-17{background-image:url(../img/chars/char-yi.png)}
.rg-guide .avi-18{background-image:url(../img/chars/char-kaesi.png)}

/* 元素角标：图标为客户端原图 UI/UI/Player/UI_avatarbg_Icon_0X，色值取自 DT_CharacterElementTypeData */
.rg-guide .elx-相{--elc:#FFBA3A;background-image:url(../img/element/xiang.png)}
.rg-guide .elx-魂{--elc:#3886DF;background-image:url(../img/element/hun.png)}
.rg-guide .elx-光{--elc:#D2D0C2;background-image:url(../img/element/guang.png)}
.rg-guide .elx-暗{--elc:#8C59BD;background-image:url(../img/element/an.png)}
.rg-guide .elx-灵{--elc:#10C797;background-image:url(../img/element/ling.png)}
.rg-guide .elx-咒{--elc:#C6314B;background-image:url(../img/element/zhou.png)}

/* ---------- 15. 窄屏 -------------------------------------- */
@media(max-width:900px){
  .rg-guide .rg-herotop{gap:18px}
  .rg-guide .rg-hero-img{width:104px;height:104px}
  .rg-guide .rg-heroinfo h1{font-size:26px}
  .rg-guide .rg-meta{gap:6px 18px}
  .rg-guide h2{font-size:21px;gap:14px}
  .rg-guide h2::before{font-size:24px}
  .rg-guide .reacts{grid-template-columns:1fr}
  .rg-guide .rx{padding:22px 0}
  .rg-guide .rx:nth-child(2n){padding-left:0;border-left:0}
}
@media(max-width:767px){
  .rg-guide{--rg-pad:16px;padding:0 var(--rg-pad)}
  .rg-guide .rg-hero{margin-top:12px;padding:24px var(--rg-pad) 16px;border-radius:16px}
  .rg-guide .rg-herotop{flex-direction:column;align-items:flex-start;gap:14px}
  .rg-guide .rg-hero-img{width:88px;height:88px}
  .rg-guide .rg-heroinfo h1{font-size:23px;margin:4px 0 10px}
  .rg-guide .rg-meta{font-size:12.5px}
  .rg-guide .rg-railrow{margin-top:26px;gap:12px}
  .rg-guide .rg-rail{gap:12px}
  .rg-guide .rg-rc{width:48px;height:48px;border-radius:14px}
  .rg-guide .rg-rc.is-on{width:56px;height:56px;border-radius:16px}
  .rg-guide .rg-all{width:48px;height:48px;border-radius:14px}
  .rg-guide .rg-sec{padding:26px 0 28px}
  .rg-guide h2{font-size:20px;margin-bottom:16px}
  .rg-guide h2::before{font-size:22px}
  .rg-guide h3,.rg-guide h4{font-size:16px}
  .rg-guide .pk{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .rg-guide .pk p{margin-top:4px}
  .rg-guide table{font-size:14px}
  .rg-guide th,.rg-guide td{padding:10px}
  .rg-guide td:first-child{white-space:nowrap}   /* 「主 C」「泛音列」这类短标签别折行 */
  .rg-guide table.teams{min-width:540px}
  .rg-guide .arct td,.rg-guide .tag{line-height:1.7}
  .rg-guide .m{width:50px;flex:0 0 50px}
  .rg-guide .lg-ref{display:none}
}