.page-faq {
  --faq-rail: 268px;
  --faq-gap: clamp(20px, 3.2vw, 48px);
  --faq-lamp-off: #4a635c;
  padding-bottom: clamp(48px, 7vw, 104px);
}

.page-faq .faq-hero {
  position: relative;
  margin-top: clamp(14px, 2vw, 26px);
  padding: clamp(22px, 3.4vw, 48px);
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(180deg, rgba(73, 242, 208, 0.035) 0 1px, transparent 1px 6px),
    linear-gradient(158deg, var(--ink-800) 0%, var(--ink-900) 58%, #04120D 100%);
  overflow: hidden;
}

.page-faq .faq-hero::before,
.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  opacity: 0.65;
  pointer-events: none;
}

.page-faq .faq-hero::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.page-faq .faq-hero::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
}

.page-faq .faq-hero__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 6.2vw, 56px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--ice);
}

.page-faq .faq-hero .lede {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--ice-soft);
}

.page-faq .faq-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-hero__media {
  margin: 0;
  border-color: var(--line-strong);
}

.page-faq .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 诊断台双栏 ---------- */
.page-faq .faq-console {
  display: grid;
  gap: var(--faq-gap);
  align-items: start;
  margin-top: clamp(32px, 5vw, 64px);
}

.page-faq .faq-rail {
  border: 1px solid var(--line);
  background: var(--ink-800);
  padding: 20px 18px 22px;
}

.page-faq .faq-rail__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}

.page-faq .faq-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: none;
}

.page-faq .faq-rail__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 8px;
  border-left: 2px solid transparent;
  color: var(--ice-soft);
  font-size: var(--fs-14);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-faq .faq-rail__list a:hover,
.page-faq .faq-rail__list a:focus-visible {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: rgba(73, 242, 208, 0.06);
}

.page-faq .faq-rail__num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--sand);
  flex: 0 0 auto;
}

.page-faq .faq-rail__foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-rail__foot p {
  margin: 0 0 10px;
  font-size: var(--fs-14);
  color: var(--cool);
}

.page-faq .faq-rail__foot .btn {
  width: 100%;
  justify-content: center;
}

.page-faq .faq-rail__stamp {
  margin: 14px 0 0 !important;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--sand) !important;
  opacity: 0.8;
}

.page-faq .faq-body {
  min-width: 0;
  display: grid;
  gap: clamp(40px, 6vw, 84px);
}

.page-faq .faq-section {
  scroll-margin-top: 96px;
  min-width: 0;
}

.page-faq .faq-intro {
  margin: 18px 0 0;
  max-width: 66ch;
  color: var(--ice-soft);
  font-size: var(--fs-16);
  line-height: 1.85;
}

.page-faq .faq-note {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--sand);
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--cool);
}

/* ---------- 问题分类图例 ---------- */
.page-faq .faq-map {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-faq .faq-map__item a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num title go"
    "num desc go";
  gap: 2px 14px;
  align-items: center;
  height: 100%;
  padding: 18px 16px;
  background: var(--ink-800);
  text-decoration: none;
  transition: background 0.22s var(--ease);
}

.page-faq .faq-map__item a:hover,
.page-faq .faq-map__item a:focus-visible {
  background: var(--ink-700);
}

.page-faq .faq-map__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1;
  color: var(--cyan);
  opacity: 0.85;
}

.page-faq .faq-map__title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  color: var(--ice);
}

.page-faq .faq-map__desc {
  grid-area: desc;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--cool);
}

.page-faq .faq-map__go {
  grid-area: go;
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  color: var(--orange);
  opacity: 0.7;
}

/* ---------- 步骤折叠 ---------- */
.page-faq .step {
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .step:first-of-type {
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.page-faq .step__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}

.page-faq .step__summary::-webkit-details-marker {
  display: none;
}

.page-faq .step__summary:hover .step__title,
.page-faq .step__summary:focus-visible .step__title {
  color: var(--cyan);
}

.page-faq .step__summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-faq .step__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--sand);
  letter-spacing: 0.08em;
}

.page-faq .step__title {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ice);
  min-width: 0;
}

.page-faq .faq-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--faq-lamp-off);
  border: 1px solid rgba(73, 242, 208, 0.28);
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.page-faq .step[open] .faq-lamp {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(73, 242, 208, 0.16);
}

.page-faq .step__body {
  padding: 2px 2px 22px 34px;
  display: grid;
  gap: 12px;
}

.page-faq .step__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.85;
  color: var(--ice-soft);
}

.page-faq .step__branch {
  padding: 10px 14px;
  border-left: 2px solid var(--orange);
  background: rgba(255, 122, 26, 0.07);
  color: var(--cool) !important;
  font-size: var(--fs-14);
}

.page-faq .step__link a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(73, 242, 208, 0.4);
  font-size: var(--fs-14);
}

.page-faq .step__link a:hover {
  border-bottom-color: var(--cyan);
}

/* ---------- 资料板块图文 ---------- */
.page-faq .faq-split {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.page-faq .faq-split__media {
  margin: 0;
  border-color: var(--line-soft);
}

.page-faq .faq-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--cyan);
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  background: rgba(73, 242, 208, 0.06);
  word-break: break-all;
}

.page-faq .faq-copyrow .copy-btn.is-copied {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-faq .faq-copyrow--wide {
  margin-top: 30px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ink-800);
}

/* ---------- 表格 ---------- */
.page-faq .faq-tablewrap {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
}

.page-faq .data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.page-faq .data-table th,
.page-faq .data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.page-faq .data-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  background: var(--ink-700);
  white-space: nowrap;
}

.page-faq .data-table td {
  color: var(--ice-soft);
  line-height: 1.7;
}

.page-faq .data-table td:first-child {
  font-family: var(--font-mono);
  color: var(--cyan);
  white-space: nowrap;
}

.page-faq .data-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-faq .data-table tbody tr:hover td {
  background: rgba(73, 242, 208, 0.04);
}

/* ---------- 提示块 ---------- */
.page-faq .faq-callout {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: linear-gradient(120deg, rgba(255, 122, 26, 0.08), transparent 62%);
}

.page-faq .faq-callout__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ice);
}

.page-faq .faq-callout__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--ice-soft);
}

/* ---------- 检查清单 ---------- */
.page-faq .faq-checklist {
  margin-top: 22px;
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.page-faq .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 2px;
  border-bottom: 1px dashed var(--line-soft);
  cursor: pointer;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ice-soft);
  transition: color 0.2s var(--ease);
}

.page-faq .check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 3px 0 0;
  position: relative;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
}

.page-faq .check input:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-faq .check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink-900);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.page-faq .check input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-faq .check input:checked + span {
  color: var(--cool);
  text-decoration: line-through;
  text-decoration-color: rgba(147, 166, 160, 0.6);
}

.page-faq .faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 服务时段 ---------- */
.page-faq .faq-hours {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

.page-faq .faq-hours__panel {
  border-left: 3px solid var(--cyan);
}

.page-faq .faq-hours__time {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  line-height: 1.2;
}

.page-faq .faq-hours__desc {
  margin: 12px 0 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--cool);
}

.page-faq .faq-paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-faq .faq-paths li {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-paths li:first-child {
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-paths__tag {
  justify-self: start;
}

.page-faq .faq-paths p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--ice-soft);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-faq .faq-map {
    grid-template-columns: 1fr 1fr;
  }

  .page-faq .faq-paths li {
    grid-template-columns: 110px 1fr;
    align-items: start;
    gap: 16px;
  }

  .page-faq .faq-hours {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 30px;
  }

  .page-faq .faq-hours {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }

  .page-faq .step__body {
    padding-left: 46px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-console {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-hero h1 {
    max-width: 20ch;
  }
}

@media (min-width: 1280px) {
  .page-faq {
    --faq-rail: 300px;
  }

  .page-faq .faq-body {
    gap: clamp(56px, 6vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-rail__list a,
  .page-faq .faq-map__item a,
  .page-faq .step__summary,
  .page-faq .faq-lamp,
  .page-faq .check {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <ol>
        <li><a href="/">首页</a></li>
        <li><span class="breadcrumb__sep" aria-hidden="true">/</span></li>
        <li><a href="/guide/" aria-current="page">帮助中心</a></li>
      </ol>
    </nav>

    <header class="faq-hero">
      <div class="faq-hero__body">
        <p class="kicker">访问诊断 · 自助排查</p>
        <h1>桌面端打不开、登录卡住，先在这里找到对应的一条路</h1>
        <p class="lede">三亿体育整理了一份按现象分类的排查流程：从网络、浏览器到账号状态逐项确认，多数情况在前几步就有答案。走完仍未恢复时，我们也说明了需要带上哪些信息再联系人工支持。</p>
        <div class="faq-hero__tags">
          <span class="tag tag--cyan">访问异常</span>
          <span class="tag tag--orange">登录问题</span>
          <span class="tag tag--sand">资料加载</span>
        </div>
        <div class="faq-hero__actions">
          <a class="btn btn--primary" href="#desktop">从桌面端开始排查</a>
          <a class="btn btn--ghost" href="/journal/">查看最近更新公告</a>
        </div>
      </div>
      <div class="media-frame faq-hero__media">
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="按访问、登录与资料加载分支展开的排查流程线稿示意">
        <p class="media-frame__caption">故障现象 → 自查路径 → 人工支持</p>
      </div>
    </header>
  </div>

  <div class="container faq-console">
    <aside class="faq-rail" aria-label="问题目录">
      <p class="faq-rail__label">问题目录</p>
      <ol class="faq-rail__list">
        <li><a href="#diagnose"><span class="faq-rail__num">01</span>先判断属于哪一类</a></li>
        <li><a href="#desktop"><span class="faq-rail__num">02</span>桌面端打不开</a></li>
        <li><a href="#login"><span class="faq-rail__num">03</span>中文版登录异常</a></li>
        <li><a href="#library"><span class="faq-rail__num">04</span>资料板块加载失败</a></li>
        <li><a href="#version"><span class="faq-rail__num">05</span>公告与版本号对照</a></li>
        <li><a href="#prepare"><span class="faq-rail__num">06</span>联系前准备</a></li>
        <li><a href="#hours"><span class="faq-rail__num">07</span>服务时段与回复</a></li>
      </ol>
      <div class="faq-rail__foot">
        <p>需要人工支持？</p>
        <a class="btn btn--ghost" href="/inquiry/">走咨询通道</a>
        <p class="faq-rail__stamp">SITE-2025.03</p>
      </div>
    </aside>

    <div class="faq-body">

      <section class="faq-section" id="diagnose" aria-labelledby="diagnose-title">
        <div class="section-head">
          <span class="section-head__index">01</span>
          <h2 class="section-head__title" id="diagnose-title">先判断属于哪一类</h2>
        </div>
        <p class="faq-intro">四类问题的处理顺序不一样。先对照下面的表现找到最接近的一条，再进入对应的排查步骤，能省下不少试错时间。</p>
        <ul class="faq-map">
          <li class="faq-map__item">
            <a href="#desktop">
              <span class="faq-map__num">01</span>
              <span class="faq-map__title">页面打不开</span>
              <span class="faq-map__desc">长时间白屏、加载后空白、点了没反应</span>
              <span class="faq-map__go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="faq-map__item">
            <a href="#login">
              <span class="faq-map__num">02</span>
              <span class="faq-map__title">登录卡住</span>
              <span class="faq-map__desc">验证码不刷新、登录后回到首页、提示重复登录</span>
              <span class="faq-map__go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="faq-map__item">
            <a href="#library">
              <span class="faq-map__num">03</span>
              <span class="faq-map__title">资料加载不全</span>
              <span class="faq-map__desc">球队资料页停在骨架屏、封面缺失、表格显示不完整</span>
              <span class="faq-map__go" aria-hidden="true">→</span>
            </a>
          </li>
          <li class="faq-map__item">
            <a href="#version">
              <span class="faq-map__num">04</span>
              <span class="faq-map__title">想确认是不是已知问题</span>
              <span class="faq-map__desc">手上有版本号或公告编号，想看进度与影响范围</span>
              <span class="faq-map__go" aria-hidden="true">→</span>
            </a>
          </li>
        </ul>
      </section>

      <section class="faq-section" id="desktop" aria-labelledby="desktop-title">
        <div class="section-head">
          <span class="section-head__index">02</span>
          <h2 class="section-head__title" id="desktop-title">三亿体育桌面端打不开时，按这个顺序走一遍</h2>
        </div>
        <p class="faq-intro">桌面端打不开大多集中在网络、浏览器版本、缓存和安全软件四层。建议从第一项开始，确认一项再往下走，找到断点就停下处理。</p>

        <details class="step" open>
          <summary class="step__summary">
            <span class="step__idx">01</span>
            <span class="step__title">先确认网络本身是否正常</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>换成手机热点，或者用另一个网络打开任意网站。如果别的网站也打不开，问题在网络本身；只有本站打不开，再进入下一项。</p>
            <p class="step__branch">结果判断：其他站点正常 → 继续第 02 步；其他站点同样异常 → 先处理本地网络。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">02</span>
            <span class="step__title">检查浏览器版本</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>桌面端在 Chrome、Edge 的近期版本上表现最稳定。版本过旧时页面脚本可能直接中断，先更新浏览器，再重新访问同一地址。</p>
            <p class="step__branch">结果判断：更新后正常 → 记录下旧版本号即可；仍打不开 → 进入第 03 步。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">03</span>
            <span class="step__title">清缓存，或换一个无痕窗口</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>缓存中残留的旧样式和旧脚本会让页面停在白屏。清空最近一天的缓存后刷新；不方便清理时，直接用无痕窗口打开同一地址做对比。</p>
            <p class="step__branch">结果判断：无痕窗口正常 → 基本可判定为缓存问题，清理后即可恢复。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">04</span>
            <span class="step__title">暂时关闭拦截类扩展与代理</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>广告拦截、脚本拦截插件，以及公司网络的代理设置，都可能拦下页面依赖的资源。逐项关闭后刷新，能快速定位是哪一环影响了加载。</p>
            <p class="step__branch">结果判断：关闭某项后恢复 → 将该站点加入该插件的信任名单。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">05</span>
            <span class="step__title">看一眼最近一轮公告</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>如果换设备、换网络都打不开，先到战报与公告页看最近一轮修正记录。公告里会写明已知问题、修复进度和影响范围，省去重复描述。</p>
            <p class="step__link"><a href="/journal/">前往战报与公告 →</a></p>
          </div>
        </details>

        <p class="faq-note">以上步骤用于缩小范围，不保证一次解决。走完仍无改善时，请按第 06 节准备材料后联系咨询通道。</p>
      </section>

      <section class="faq-section" id="login" aria-labelledby="login-title">
        <div class="section-head">
          <span class="section-head__index">03</span>
          <h2 class="section-head__title" id="login-title">中文版登录异常三亿体育账号与网络自查</h2>
        </div>
        <p class="faq-intro">验证码不刷新、登录后跳回首页、提示账号已在别处登录，多数与账号状态、系统时间或多端登录冲突有关。按下面顺序确认。</p>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">01</span>
            <span class="step__title">账号是否已在其他设备登录</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>同一账号在桌面端与移动端同时在线时，后登录的一端可能把前一端挤下线，表现就是反复回到登录页。先在另一台设备上退出，再回到桌面端重新登录。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">02</span>
            <span class="step__title">验证码刷新与系统时间</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>验证码长时间不变，先点刷新按钮换一张。换过之后仍提示失效，检查电脑系统时间是否准确——时间偏差过大会让验证码一生成就被判定过期。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">03</span>
            <span class="step__title">网络环境与 DNS</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>公司网络和校园网络常带有访问限制策略。换到手机热点后再登录一次；如果能进，说明原网络需调整。也可以在系统网络设置里改用公共 DNS 后重试。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">04</span>
            <span class="step__title">浏览器扩展与隐私模式</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>部分隐私类插件会阻断登录所需的请求。用无痕窗口重新登录即可判断：无痕下正常，说明是扩展影响，逐个关闭排查即可。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">05</span>
            <span class="step__title">换一个端确认账号本身是否正常</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>桌面端始终进不去时，先用移动端中文界面登录同一账号。移动端正常说明账号可用，问题在桌面端环境；两端都异常，再联系支持。</p>
          </div>
        </details>
      </section>

      <section class="faq-section" id="library" aria-labelledby="library-title">
        <div class="section-head">
          <span class="section-head__index">04</span>
          <h2 class="section-head__title" id="library-title">球队资料板块加载失败，先看版本再看缓存</h2>
        </div>
        <div class="faq-split">
          <div class="faq-split__text">
            <p class="faq-intro">资料板块一次要拉起赛季区间、历史版本和战绩表，链路比普通页面长，也更容易受旧链接和缓存影响。球队资料库现有 1,860 支球队档案，覆盖 32 项联赛与杯赛，页面上的版本号就是判断依据。</p>
          </div>
          <div class="media-frame faq-split__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="设备状态面板、缓存清理提示与版本号标签的暗调界面示意">
            <p class="media-frame__caption">版本号 · 缓存状态 · 公告记录</p>
          </div>
        </div>

        <details class="step" open>
          <summary class="step__summary">
            <span class="step__idx">01</span>
            <span class="step__title">先记下页面标注的版本号</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>每份球队资料页都标注赛季区间与历史版本号，写法由赛季、轮次与序号组合而成，例如 S24-R18-03。先把这个号记下来，后面判断是否为已知问题、联系支持时都用得上。</p>
            <div class="faq-copyrow">
              <code class="faq-code" id="sample-version">S24-R18-03</code>
              <button class="btn btn--quiet copy-btn" type="button" data-copy="S24-R18-03">复制示例版本号</button>
            </div>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">02</span>
            <span class="step__title">检查收藏链接是否已经换版</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>收藏夹里的旧链接可能指向已经换版的页面，打开就是空白或错误提示。回到服务与资料中心，从当前入口重新找到同一支球队，再收藏新地址。</p>
            <p class="step__link"><a href="/business/">回到服务与资料中心 →</a></p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">03</span>
            <span class="step__title">清缓存后重新加载</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>只看到骨架屏、队长封面缺失或战绩表少了几行时，清空缓存再打开一次。移动端可以切换网络后重试，弱网环境下大表格加载会明显变慢。</p>
          </div>
        </details>

        <details class="step">
          <summary class="step__summary">
            <span class="step__idx">04</span>
            <span class="step__title">对照最近三轮修正记录</span>
            <span class="faq-lamp" aria-hidden="true"></span>
          </summary>
          <div class="step__body">
            <p>打开战报与公告页，看最近三轮修正记录里有没有提到资料板块。若已有同类条目，说明正在处理，按公告写的影响范围判断自己是否在其中即可。</p>
          </div>
        </details>
      </section>

      <section class="faq-section" id="version" aria-labelledby="version-title">
        <div class="section-head">
          <span class="section-head__index">05</span>
          <h2 class="section-head__title" id="version-title">公告轮次和资料版本号怎么对</h2>
        </div>
        <p class="faq-intro">公告按 A-轮次编号发布，每轮写明已知问题、修复进度与影响范围；资料页版本号由赛季、轮次与序号组成。两组信息放在一起看，就能判断自己看到的是不是旧内容。</p>

        <div class="faq-tablewrap">
          <table class="data-table">
            <caption class="visually-hidden">公告轮次与资料版本号对照示例</caption>
            <thead>
              <tr>
                <th scope="col">公告编号</th>
                <th scope="col">记录内容</th>
                <th scope="col">影响范围</th>
                <th scope="col">对应版本</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>A-轮次 12</td>
                <td>桌面端静态资源加载缓慢</td>
                <td>部分桌面端浏览器</td>
                <td>S24-R17 及更早</td>
              </tr>
              <tr>
                <td>A-轮次 13</td>
                <td>资料页封面显示不完整</td>
                <td>移动端弱网环境</td>
                <td>S24-R18-01</td>
              </tr>
              <tr>
                <td>A-轮次 14</td>
                <td>登录后跳回首页</td>
                <td>多端同时登录的账号</td>
                <td>S24-R18-03</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="faq-callout">
          <p class="faq-callout__title">提交时这几样一起给，处理会快很多</p>
          <ul class="faq-callout__list">
            <li>出问题页面的截图，尽量包含地址栏与页脚版本戳</li>
            <li>访问时间，写到小时与分钟</li>
            <li>设备类型与浏览器名称、版本号</li>
            <li>完整页面地址，收藏链接请一并说明</li>
            <li>资料页上的版本号，或公告编号</li>
          </ul>
        </div>
      </section>

      <section class="faq-section" id="prepare" aria-labelledby="prepare-title">
        <div class="section-head">
          <span class="section-head__index">06</span>
          <h2 class="section-head__title" id="prepare-title">联系客服前把这些准备好</h2>
        </div>
        <p class="faq-intro">下面几项准备好，通常一轮沟通就能推进。可以边勾边确认，勾选状态只留在当前页面，不会提交到任何地方。</p>

        <div class="faq-checklist">
          <label class="check">
            <input type="checkbox">
            <span>问题页面的完整截图，含地址栏与页脚版本戳</span>
          </label>
          <label class="check">
            <input type="checkbox">
            <span>具体访问时间，精确到小时与分钟</span>
          </label>
          <label class="check">
            <input type="checkbox">
            <span>设备类型与操作系统，例如 Windows 11 桌面端</span>
          </label>
          <label class="check">
            <input type="checkbox">
            <span>浏览器名称与版本号</span>
          </label>
          <label class="check">
            <input type="checkbox">
            <span>出问题的页面地址，收藏链接请注明收藏时间</span>
          </label>
          <label class="check">
            <input type="checkbox">
            <span>资料页版本号或公告编号</span>
          </label>
        </div>

        <p class="faq-note">发送邮件时请勿附带账号密码。需要确认账号状态时，我们会说明如何在页面内自助查看，不会向您索取密码。</p>

        <div class="faq-actions">
          <a class="btn btn--primary" href="/inquiry/">前往咨询通道</a>
          <a class="btn btn--ghost" href="/company/">了解内容与技术支持团队</a>
        </div>
      </section>

      <section class="faq-section" id="hours" aria-labelledby="hours-title">
        <div class="section-head">
          <span class="section-head__index">07</span>
          <h2 class="section-head__title" id="hours-title">服务时段与常见回复路径</h2>
        </div>

        <div class="faq-hours">
          <div class="panel faq-hours__panel">
            <p class="kicker">人工支持时段</p>
            <p class="faq-hours__time">工作日 9:00–18:00</p>
            <p class="faq-hours__desc">周末与法定节假日收到的邮件，会在下一个工作日按顺序处理。情况紧急时，请在邮件标题里写明，方便优先查看。</p>
          </div>
          <ul class="faq-paths">
            <li>
              <span class="faq-paths__tag tag tag--cyan">访问类</span>
              <p>桌面端打不开、页面白屏，先按第 02 节走完五步，再把截图与访问时间一起发来。</p>
            </li>
            <li>
              <span class="faq-paths__tag tag tag--cyan">账号类</span>
              <p>登录异常、验证码失效，按第 03 节自查后仍无改善，请说明已经尝试过的步骤。</p>
            </li>
            <li>
              <span class="faq-paths__tag tag tag--sand">资料类</span>
              <p>球队资料加载不全或版本对不上，请附页面版本号，我们会告知当前轮次的状态。</p>
            </li>
            <li>
              <span class="faq-paths__tag tag tag--orange">合作类</span>
              <p>媒体与数据合作、内容授权相关咨询，请在邮件中写明机构名称与用途。</p>
            </li>
          </ul>
        </div>

        <div class="faq-copyrow faq-copyrow--wide">
          <code class="faq-code" id="service-mail">service@sanyizone.com.cn</code>
          <button class="btn btn--quiet copy-btn" type="button" data-copy="service@sanyizone.com.cn">复制客服邮箱</button>
          <a class="btn btn--ghost" href="/journal/">查看更新公告</a>
        </div>
      </section>

    </div>
  </div>
</main>

.page-faq {
  --faq-rail: 268px;
  --faq-gap: clamp(20px, 3.2vw, 48px);
  --faq-lamp-off: #4a635c;
  padding-bottom: clamp(48px, 7vw, 104px);
}

.page-faq .faq-hero {
  position: relative;
  margin-top: clamp(14px, 2vw, 26px);
  padding: clamp(22px, 3.4vw, 48px);
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(180deg, rgba(73, 242, 208, 0.035) 0 1px, transparent 1px 6px),
    linear-gradient(158deg, var(--ink-800) 0%, var(--ink-900) 58%, #04120D 100%);
  overflow: hidden;
}

.page-faq .faq-hero::before,
.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  opacity: 0.65;
  pointer-events: none;
}

.page-faq .faq-hero::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.page-faq .faq-hero::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
}

.page-faq .faq-hero__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 6.2vw, 56px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--ice);
}

.page-faq .faq-hero .lede {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--ice-soft);
}

.page-faq .faq-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-hero__media {
  margin: 0;
  border-color: var(--line-strong);
}

.page-faq .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 诊断台双栏 ---------- */
.page-faq .faq-console {
  display: grid;
  gap: var(--faq-gap);
  align-items: start;
  margin-top: clamp(32px, 5vw, 64px);
}

.page-faq .faq-rail {
  border: 1px solid var(--line);
  background: var(--ink-800);
  padding: 20px 18px 22px;
}

.page-faq .faq-rail__label {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}

.page-faq .faq-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-faq .faq-rail__list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 8px;
  border-left: 2px solid transparent;
  color: var(--ice-soft);
  font-size: var(--fs-14);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.page-faq .faq-rail__list a:hover,
.page-faq .faq-rail__list a:focus-visible {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: rgba(73, 242, 208, 0.06);
}

.page-faq .faq-rail__num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--sand);
  flex: 0 0 auto;
}

.page-faq .faq-rail__foot {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-rail__foot p {
  margin: 0 0 10px;
  font-size: var(--fs-14);
  color: var(--cool);
}

.page-faq .faq-rail__foot .btn {
  width: 100%;
  justify-content: center;
}

.page-faq .faq-rail__stamp {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--sand);
  opacity: 0.8;
}

.page-faq .faq-body {
  min-width: 0;
  display: grid;
  gap: clamp(40px, 6vw, 84px);
}

.page-faq .faq-section {
  scroll-margin-top: 96px;
  min-width: 0;
}

.page-faq .faq-intro {
  margin: 18px 0 0;
  max-width: 66ch;
  color: var(--ice-soft);
  font-size: var(--fs-16);
  line-height: 1.85;
}

.page-faq .faq-note {
  margin: 20px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--sand);
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--cool);
}

/* ---------- 问题分类图例 ---------- */
.page-faq .faq-map {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-faq .faq-map__item a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num title go"
    "num desc go";
  gap: 2px 14px;
  align-items: center;
  height: 100%;
  padding: 18px 16px;
  background: var(--ink-800);
  text-decoration: none;
  transition: background 0.22s var(--ease);
}

.page-faq .faq-map__item a:hover,
.page-faq .faq-map__item a:focus-visible {
  background: var(--ink-700);
}

.page-faq .faq-map__num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--fs-28);
  font-weight: 600;
  line-height: 1;
  color: var(--cyan);
  opacity: 0.85;
}

.page-faq .faq-map__title {
  grid-area: title;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  color: var(--ice);
}

.page-faq .faq-map__desc {
  grid-area: desc;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--cool);
}

.page-faq .faq-map__go {
  grid-area: go;
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  color: var(--orange);
  opacity: 0.7;
}

/* ---------- 步骤折叠 ---------- */
.page-faq .step {
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .step:first-of-type {
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.page-faq .step__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}

.page-faq .step__summary::-webkit-details-marker {
  display: none;
}

.page-faq .step__summary:hover .step__title,
.page-faq .step__summary:focus-visible .step__title {
  color: var(--cyan);
}

.page-faq .step__summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-faq .step__idx {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--sand);
  letter-spacing: 0.08em;
}

.page-faq .step__title {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ice);
  min-width: 0;
}

.page-faq .faq-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--faq-lamp-off);
  border: 1px solid rgba(73, 242, 208, 0.28);
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.page-faq .step[open] .faq-lamp {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(73, 242, 208, 0.16);
}

.page-faq .step__body {
  padding: 2px 2px 22px 34px;
  display: grid;
  gap: 12px;
}

.page-faq .step__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.85;
  color: var(--ice-soft);
}

.page-faq .step__branch {
  padding: 10px 14px;
  border-left: 2px solid var(--orange);
  background: rgba(255, 122, 26, 0.07);
  color: var(--cool) !important;
  font-size: var(--fs-14);
}

.page-faq .step__link a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(73, 242, 208, 0.4);
  font-size: var(--fs-14);
}

.page-faq .step__link a:hover {
  border-bottom-color: var(--cyan);
}

/* ---------- 资料板块图文 ---------- */
.page-faq .faq-split {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.page-faq .faq-split__media {
  margin: 0;
  border-color: var(--line-soft);
}

.page-faq .faq-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--cyan);
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  background: rgba(73, 242, 208, 0.06);
  word-break: break-all;
}

.page-faq .faq-copyrow .copy-btn.is-copied {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-faq .faq-copyrow--wide {
  margin-top: 30px;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ink-800);
}

/* ---------- 表格 ---------- */
.page-faq .faq-tablewrap {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
}

.page-faq .data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.page-faq .data-table th,
.page-faq .data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.page-faq .data-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  background: var(--ink-700);
  white-space: nowrap;
}

.page-faq .data-table td {
  color: var(--ice-soft);
  line-height: 1.7;
}

.page-faq .data-table td:first-child {
  font-family: var(--font-mono);
  color: var(--cyan);
  white-space: nowrap;
}

.page-faq .data-table tbody tr:last-child td {
  border-bottom: 0;
}

.page-faq .data-table tbody tr:hover td {
  background: rgba(73, 242, 208, 0.04);
}

/* ---------- 提示块 ---------- */
.page-faq .faq-callout {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: linear-gradient(120deg, rgba(255, 122, 26, 0.08), transparent 62%);
}

.page-faq .faq-callout__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ice);
}

.page-faq .faq-callout__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--ice-soft);
}

/* ---------- 检查清单 ---------- */
.page-faq .faq-checklist {
  margin-top: 22px;
  display: grid;
  border-top: 1px solid var(--line-soft);
}

.page-faq .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 2px;
  border-bottom: 1px dashed var(--line-soft);
  cursor: pointer;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--ice-soft);
  transition: color 0.2s var(--ease);
}

.page-faq .check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 3px 0 0;
  position: relative;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
}

.page-faq .check input:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}

.page-faq .check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ink-900);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.page-faq .check input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-faq .check input:checked + span {
  color: var(--cool);
  text-decoration: line-through;
  text-decoration-color: rgba(147, 166, 160, 0.6);
}

.page-faq .faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- 服务时段 ---------- */
.page-faq .faq-hours {
  margin-top: 24px;
  display: grid;
  gap: 20px;
}

.page-faq .faq-hours__panel {
  border-left: 3px solid var(--cyan);
}

.page-faq .faq-hours__time {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(22px, 4.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  line-height: 1.2;
}

.page-faq .faq-hours__desc {
  margin: 12px 0 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--cool);
}

.page-faq .faq-paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-faq .faq-paths li {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-faq .faq-paths li:first-child {
  border-top: 1px solid var(--line-soft);
}

.page-faq .faq-paths__tag {
  justify-self: start;
}

.page-faq .faq-paths p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--ice-soft);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-faq .faq-map {
    grid-template-columns: 1fr 1fr;
  }

  .page-faq .faq-paths li {
    grid-template-columns: 110px 1fr;
    align-items: start;
    gap: 16px;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 30px;
  }

  .page-faq .faq-hours {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }

  .page-faq .step__body {
    padding-left: 46px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .page-faq .faq-console {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 96px;
  }

  .page-faq .faq-hero h1 {
    max-width: 20ch;
  }
}

@media (min-width: 1280px) {
  .page-faq {
    --faq-rail: 300px;
  }

  .page-faq .faq-body {
    gap: clamp(56px, 6vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-rail__list a,
  .page-faq .faq-map__item a,
  .page-faq .step__summary,
  .page-faq .faq-lamp,
  .page-faq .check {
    transition: none;
  }
}