/* ============================================================
   CN NEWSWIRE — guide.css
   内容型落地页专用样式（Chinese Media List / Translation Service /
   How to Distribute）。依赖 style.css 的 :root 变量与 .container /
   .section / .btn / .page-hero 等基础类，因此必须在 style.css 之后加载。
   CSS 加载顺序：fonts → style → homepage → guide（专属放最后）
   ============================================================ */

/* ---------- 页内锚点导航（长页面用） ---------- */
.gnav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gnav__inner {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  min-height: 54px;
  white-space: nowrap;
  font-size: 0.9rem;
}
.gnav a {
  color: var(--muted);
  font-weight: 600;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.gnav a:hover { color: var(--ink); border-bottom-color: var(--red); }

/* ---------- 正文排版 ---------- */
.gbody { max-width: 880px; }
.gbody > p { color: var(--ink-soft); margin-bottom: var(--space-4); }
.gbody h2 {
  font-size: var(--fs-h2);
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-2);
  scroll-margin-top: 90px;
}
.gbody h2:first-child { margin-top: 0; }
.gbody h3 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-3); }
/* style.css 里有全局 `ul { list-style: none }`（站点原有的列表都是组件化的），
   所以正文里的 <ul> 默认没有项目符号，长列表只能靠缩进区分，可读性明显变差。
   这里只在 .gbody 范围内把符号恢复回来。
   :not(.gsteps) 是必须的 —— .gsteps 是自带圆形编号的步骤列表，
   若被 list-style: decimal 命中会出现「原生 1. + 自定义圆号」两套编号。 */
.gbody ul,
.gbody ol:not(.gsteps) {
  list-style: disc;
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
  color: var(--ink-soft);
}
.gbody ol:not(.gsteps) { list-style: decimal; }
.gbody ul li::marker,
.gbody ol:not(.gsteps) li::marker { color: var(--red); }
.gbody li { margin-bottom: var(--space-2); }
.gbody strong { color: var(--ink); font-weight: 700; }
.gbody a { color: var(--red-deep); border-bottom: 1px solid oklch(0.53 0.19 27 / 0.3); }
.gbody a:hover { border-bottom-color: var(--red); }

/* 导语：比正文大一号，用于 hero 下方第一段 */
.glede {
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--ink-soft);
  margin-bottom: var(--space-6) !important;
}

/* ---------- 关键数字条 ---------- */
.gstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--space-7);
}
.gstats__i { background: var(--paper-2); padding: var(--space-5) var(--space-4); }
.gstats__n {
  font-family: "Playfair Display", serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.gstats__l { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; margin-top: 2px; }
@media (max-width: 720px) { .gstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 数据表（媒体清单等） ---------- */
.gtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  margin-bottom: var(--space-5);
}
.gtable { width: 100%; border-collapse: collapse; min-width: 620px; }
.gtable th, .gtable td {
  text-align: left;
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  vertical-align: top;
}
.gtable thead th {
  background: var(--warm-mist);
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gtable tbody tr:last-child th, .gtable tbody tr:last-child td { border-bottom: none; }
.gtable tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.gtable td { color: var(--muted); }
.gtable .gdomain { display: block; font-size: 0.8rem; color: var(--faint, #999); font-weight: 400; margin-top: 2px; }

/* ---------- 编号步骤 ---------- */
.gsteps { counter-reset: gs; list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.gsteps > li {
  counter-increment: gs;
  position: relative;
  padding-left: 54px;
  padding-bottom: var(--space-6);
  border-left: 1px solid var(--line);
  margin-left: 17px;
}
.gsteps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.gsteps > li::before {
  content: counter(gs);
  position: absolute; left: -17px; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}
.gsteps > li > h3 { margin: 4px 0 var(--space-2); font-size: var(--fs-h3); }
.gsteps > li > p { color: var(--ink-soft); margin-bottom: var(--space-2); }
.gsteps > li ul { margin-bottom: var(--space-2); }

/* ---------- 提示框 ---------- */
.gnote {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.gnote__t {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--red); margin-bottom: var(--space-2);
}
.gnote p:last-child, .gnote ul:last-child { margin-bottom: 0; }
.gnote--quiet { border-left-color: var(--muted); background: var(--warm-mist); }
.gnote--quiet .gnote__t { color: var(--muted); }

/* ---------- 卡片网格 ---------- */
.gcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gcards { grid-template-columns: 1fr; } }
.gcard {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-5);
}
.gcard__n {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem; font-weight: 700; color: var(--red);
  line-height: 1; margin-bottom: var(--space-3);
}
.gcard h3 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.gcard p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---------- 原文 ↔ 本地化改写 对照 ---------- */
.gpair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 700px) { .gpair { grid-template-columns: 1fr; } }
.gpair__col {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  background: var(--paper-2);
}
.gpair__lab {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: var(--space-3);
}
.gpair__col--bad .gpair__lab { color: var(--red); }
.gpair__col--good { border-color: oklch(0.53 0.19 27 / 0.28); }
.gpair__col--good .gpair__lab { color: var(--red); }
.gpair__col p { margin: 0 0 var(--space-3); font-size: 0.94rem; color: var(--ink-soft); }
.gpair__col p:last-child { margin-bottom: 0; }
.gpair__col--bad p { color: var(--muted); }
.gpair__col--bad .strike { text-decoration: line-through; text-decoration-color: oklch(0.53 0.19 27 / 0.45); }

/* ---------- FAQ 折叠（原生 details，无需 JS） ---------- */
.gfaq { border-top: 1px solid var(--line); max-width: 880px; }
.gfaq details { border-bottom: 1px solid var(--line); }
.gfaq summary {
  cursor: pointer; list-style: none;
  padding: var(--space-5) 44px var(--space-5) 0;
  position: relative;
  font-weight: 700; color: var(--ink); font-size: 1.02rem;
}
.gfaq summary::-webkit-details-marker { display: none; }
.gfaq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--red); font-weight: 700; line-height: 1;
}
.gfaq details[open] summary::after { content: "−"; }
.gfaq details > div { padding: 0 var(--space-6) var(--space-5) 0; color: var(--ink-soft); }
.gfaq details > div p:last-child { margin-bottom: 0; }

/* ---------- 更新时间 / 免责说明 ---------- */
.gupdated {
  font-size: 0.85rem; color: var(--muted);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* ---------- 相关页推荐 ---------- */
.grel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 620px) { .grel { grid-template-columns: 1fr; } }
.grel a {
  display: block; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-5); background: var(--paper-2);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.grel a:hover { border-color: oklch(0.53 0.19 27 / 0.4); transform: translateY(-2px); }
.grel__k { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.grel__t { display: block; margin-top: 6px; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.grel__d { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--muted); }