.page-faq {
  --faq-hair: rgba(124, 136, 148, 0.26);
  --faq-hair-strong: rgba(124, 136, 148, 0.46);
  --faq-soft: rgba(242, 237, 228, 0.78);
  --faq-faint: rgba(242, 237, 228, 0.58);
  display: block;
  background: var(--ink-abyss);
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 84% 0%, rgba(43, 227, 200, 0.13), transparent 62%),
    linear-gradient(158deg, var(--ink-deep) 0%, var(--ink-abyss) 66%);
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -34%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 31, 0.16), transparent 68%);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 5vw, 48px);
  padding: clamp(28px, 5vw, 54px) 0 clamp(36px, 6vw, 68px);
}

.page-faq .faq-hero__eyebrow {
  margin: 18px 0 12px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-faq .faq-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 8.2vw, 82px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__lead {
  max-width: 46ch;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--faq-soft);
}

.page-faq .faq-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__jump a {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.page-faq .faq-hero__jump a:hover,
.page-faq .faq-hero__jump a:focus-visible {
  border-color: var(--signal);
  color: var(--signal-soft);
}

.page-faq .faq-hero__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--faq-hair-strong);
  background: var(--ink-shade);
}

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

.page-faq .faq-hero__visual-cap {
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone);
  border-top: 1px solid var(--faq-hair);
}

/* ---------- 主体条目 ---------- */
.page-faq .faq-body {
  padding: clamp(20px, 4vw, 40px) 0 clamp(48px, 8vw, 96px);
}

.page-faq .faq-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: clamp(26px, 4.5vw, 44px) 0;
  border-top: 1px solid var(--faq-hair);
  scroll-margin-top: calc(var(--bar-h-compact) + 20px);
}

.page-faq .faq-item:first-child {
  border-top: 1px solid var(--faq-hair-strong);
}

.page-faq .faq-item__rail {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-faq .faq-item__rail::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--faq-hair-strong);
}

.page-faq .faq-item__num {
  font-family: var(--font-data);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--signal);
}

.page-faq .faq-item__q {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-item__verdict {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--signal);
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--paper);
}

.page-faq .faq-item__tail {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--faq-faint);
}

.page-faq .faq-item__tail a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-item__tail a:hover,
.page-faq .faq-item__tail a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

.page-faq .faq-item__figure {
  margin: 22px 0 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 130, 0.34);
  background: rgba(138, 113, 84, 0.12);
}

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

.page-faq .faq-item__figure figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--sand);
  border-top: 1px solid rgba(201, 168, 130, 0.28);
}

/* ---------- 步骤条 ---------- */
.page-faq .faq-steps {
  counter-reset: faqstep;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  counter-increment: faqstep;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 13px 18px 13px 14px;
  border: 1px solid var(--faq-hair);
  border-radius: var(--radius-md);
  background: rgba(18, 41, 63, 0.6);
}

.page-faq .faq-step::before {
  content: counter(faqstep, decimal-leading-zero);
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 106, 31, 0.45);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--signal-soft);
}

.page-faq .faq-step__label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper);
}

.page-faq .faq-step__desc {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-soft);
}

.page-faq .faq-step__desc a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
}

.page-faq .faq-step__desc a:hover,
.page-faq .faq-step__desc a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- 档案三步流程 ---------- */
.page-faq .faq-flow {
  display: grid;
  gap: 12px;
  margin: 0 0 4px;
}

.page-faq .faq-flow__node {
  padding: 16px 18px;
  border: 1px solid rgba(201, 168, 130, 0.34);
  border-radius: var(--radius-md);
  background: rgba(138, 113, 84, 0.14);
}

.page-faq .faq-flow__mark {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--sand-deep);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-abyss);
}

.page-faq .faq-flow__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--sand);
}

.page-faq .faq-flow__node p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(242, 237, 228, 0.72);
}

.page-faq .faq-flow__node p a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
}

.page-faq .faq-flow__node p a:hover,
.page-faq .faq-flow__node p a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- 联赛说明列表 ---------- */
.page-faq .faq-notes {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-note {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-note__k {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--neon);
}

.page-faq .faq-note__v {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-soft);
}

/* ---------- 射门速查表 ---------- */
.page-faq .faq-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-md);
  background: rgba(18, 41, 63, 0.5);
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-faq .faq-table caption {
  padding: 14px 16px 10px;
  text-align: left;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-faq .faq-table th,
.page-faq .faq-table td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stone);
  background: rgba(8, 21, 36, 0.6);
}

.page-faq .faq-table tbody tr:nth-child(odd) {
  background: rgba(8, 21, 36, 0.34);
}

.page-faq .faq-table tbody th {
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-table tbody td {
  color: var(--faq-soft);
}

.page-faq .faq-table tbody td:last-child {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--signal-soft);
}

/* ---------- 联系条目 ---------- */
.page-faq .faq-item--contact {
  border-bottom: 1px solid var(--faq-hair-strong);
}

.page-faq .faq-contact {
  display: grid;
  gap: 0;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, rgba(18, 41, 63, 0.92), rgba(10, 27, 46, 0.92));
  overflow: hidden;
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-contact__row:first-child {
  border-top: 0;
}

.page-faq .faq-contact__k {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-faq .faq-contact__v {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper);
  word-break: break-word;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-note {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }

  .page-faq .faq-contact__row {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 5fr 6fr;
    align-items: end;
  }

  .page-faq .faq-hero__visual {
    align-self: stretch;
  }

  .page-faq .faq-hero__visual img {
    height: 100%;
    min-height: 340px;
  }

  .page-faq .faq-item {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px 28px;
  }

  .page-faq .faq-item__rail {
    position: sticky;
    top: calc(var(--bar-h-compact) + 26px);
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page-faq .faq-item__rail::after {
    width: 2px;
    height: 52px;
    flex: none;
    border-radius: 2px;
    background: linear-gradient(var(--signal), rgba(255, 106, 31, 0));
  }

  .page-faq .faq-item__num {
    font-size: 40px;
  }
}

@media (min-width: 1100px) {
  .page-faq .faq-item {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .page-faq .faq-item__q {
    max-width: 30ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-hero__jump a,
  .page-faq .faq-item__tail a,
  .page-faq .faq-flow__node p a {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <section class="faq-hero">
    <div class="shell faq-hero__inner">
      <div class="faq-hero__copy" data-reveal>
        <nav class="breadcrumb" aria-label="当前位置">
          <a href="/">主场总览</a>
          <span class="breadcrumb__sep" aria-hidden="true">/</span>
          <span aria-current="page">使用教程</span>
        </nav>
        <p class="faq-hero__eyebrow">操作手册 · 本季第27轮</p>
        <h1 class="faq-hero__title">卡在哪一步，<br>就从哪一条读起</h1>
        <p class="faq-hero__lead">比赛日看完球想核对数据、要给团队挑一版合适的资料、或者想把旧赛季的存档翻出来做分析，都可以先读这一页。九游会J9主站把球队资料、版本对照与射门数据放在同一套入口下，下面按最常见的使用顺序，把每一步点哪里、看到什么讲清楚。</p>
        <ul class="faq-hero__jump">
          <li><a href="#t-update">数据什么时候更新</a></li>
          <li><a href="#t-compare">对比表怎么看</a></li>
          <li><a href="#t-archive">旧资料去哪找</a></li>
          <li><a href="#t-league">多联赛怎么切换</a></li>
          <li><a href="#t-shots">射门指标速查</a></li>
        </ul>
      </div>
      <figure class="faq-hero__visual" data-reveal data-reveal-delay="120">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="数据看板界面局部特写，指标卡片与图形排列整齐，无人物与文字水印">
        <figcaption class="faq-hero__visual-cap">工具台界面切片：榜单、日历与对照图在同一屏内可切换</figcaption>
      </figure>
    </div>
  </section>

  <div class="shell faq-body">

    <article class="faq-item" id="t-update" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">01</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">比赛打完之后，球队页和射手榜什么时候能用上新数据？</h2>
        <p class="faq-item__verdict">比赛日结束后两小时内，本轮数据完成更新与校对，球队页的轮次进度、赛事日历先落地，射手榜紧跟着重排。</p>
        <ol class="faq-steps">
          <li class="faq-step">
            <span class="faq-step__label">终场哨响后</span>
            <span class="faq-step__desc">编辑先把本轮比分、进球与球队页的四组字段录进当前轮次。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">两小时之内</span>
            <span class="faq-step__desc">赛事日历与球队页的轮次进度完成，这时刷新页面已经能看到本轮结果。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">校对完成之后</span>
            <span class="faq-step__desc">射手榜按新轮次整体重排，名次发生变化的条目会用荧光青标出来，方便你一眼找到改动。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">非比赛日</span>
            <span class="faq-step__desc">榜单停留在上一轮结果，专题文章与旧版档案照常可以翻阅，不受影响。</span>
          </li>
        </ol>
      </div>
    </article>

    <article class="faq-item" id="t-compare" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">02</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">版本对比打开之后，怎么快速看出两个版本差在哪？</h2>
        <p class="faq-item__verdict">默认是左右双栏锁步滚动，两边永远停在同一条记录上；想省时间就勾上“只看差异行”，变化的字段会被描边标出来。</p>
        <ol class="faq-steps">
          <li class="faq-step">
            <span class="faq-step__label">选版本</span>
            <span class="faq-step__desc">进入<a href="/tools/">数据工具台</a>的版本对比，左右两栏分别选你要比的两个版本，点一下即可切换。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">拖一侧，另一侧跟着走</span>
            <span class="faq-step__desc">滚动任意一栏，另一栏同步对齐，不会出现比对错行的情况。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">只看差异行</span>
            <span class="faq-step__desc">勾选后页面只保留有变化的记录，差异字段以荧光青描边显示，没变的字段自动收起来。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">键盘逐行跳</span>
            <span class="faq-step__desc">用方向键可以在差异行之间上下移动，适合一条一条对着看。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">带走结果</span>
            <span class="faq-step__desc">点“复制为文本”，对照结果会变成纯文本，粘到自己的表格里就能接着处理。</span>
          </li>
        </ol>
      </div>
    </article>

    <article class="faq-item" id="t-archive" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">03</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">想看几年前的老资料，从哪个入口进去最快？</h2>
        <p class="faq-item__verdict">从数据工具台的旧版本档案库进去，按赛季、版本、轮次三级往下筛，三步就能落到具体某一场。2019 赛季以来的资料都在里面，档案页做过单独的加载优化，翻老资料不用一路滚到底。</p>
        <div class="faq-flow">
          <div class="faq-flow__node">
            <span class="faq-flow__mark">第一步</span>
            <h3 class="faq-flow__title">进入档案库</h3>
            <p>在<a href="/tools/">数据工具台</a>里找到旧版本档案入口，页面会直接停在筛选条上。</p>
          </div>
          <div class="faq-flow__node">
            <span class="faq-flow__mark">第二步</span>
            <h3 class="faq-flow__title">按赛季与版本筛</h3>
            <p>先定赛季，再定版本，胶囊筛选一点即生效，不用刷新页面。</p>
          </div>
          <div class="faq-flow__node">
            <span class="faq-flow__mark">第三步</span>
            <h3 class="faq-flow__title">打开那一轮</h3>
            <p>在轮次列表里点开目标轮次，存档按当时的字段结构展示，原样保留。</p>
          </div>
        </div>
        <figure class="faq-item__figure">
          <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="分层排列的档案盒示意图形，标签按赛季与版本分组，整体偏砂岩暖调" loading="lazy" decoding="async">
          <figcaption>档案库按赛季、版本、轮次三级分组，越靠里层越接近当年的原始记录。</figcaption>
        </figure>
      </div>
    </article>

    <article class="faq-item" id="t-league" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">04</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">同时盯好几个联赛，来回切换的时候榜单会不会对不上？</h2>
        <p class="faq-item__verdict">不会。切联赛用的是同一套字段和同一套排序规则，射手榜怎么排、球队页看哪四组数据，在哪个联赛里都是同一副样子。</p>
        <ol class="faq-steps">
          <li class="faq-step">
            <span class="faq-step__label">点胶囊切换</span>
            <span class="faq-step__desc">页面顶部是一排横向联赛胶囊，选中的那个填充电子橙，其余保持描边。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">榜单与日历一起换</span>
            <span class="faq-step__desc">切换时榜单和日历做一次两百毫秒的交叉淡入，你正在看的那一栏不会跳到别的位置。</span>
          </li>
          <li class="faq-step">
            <span class="faq-step__label">轮次不一样怎么办</span>
            <span class="faq-step__desc">各联赛进度本来就有快有慢，页头会单独标出该联赛当前进行到第几轮，榜单只按它自己的轮次排，不跟别的联赛混着算。</span>
          </li>
        </ol>
        <ul class="faq-notes">
          <li class="faq-note">
            <span class="faq-note__k">进度领先的联赛</span>
            <span class="faq-note__v">页头轮次徽标显示它自己的轮数，榜单条目数随轮次增长。</span>
          </li>
          <li class="faq-note">
            <span class="faq-note__k">进度落后的联赛</span>
            <span class="faq-note__v">显示上一轮结果，不会拿别的联赛数据补齐空位。</span>
          </li>
          <li class="faq-note">
            <span class="faq-note__k">跨联赛比同一名球员</span>
            <span class="faq-note__v">在球队对照视图里选两支球队，数据会按同一组字段并排摆开。</span>
          </li>
        </ul>
      </div>
    </article>

    <article class="faq-item" id="t-shots" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">05</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">射门统计里那一堆字段，哪个该看、哪个对应哪张图？</h2>
        <p class="faq-item__verdict">每场记录四十余项射门相关字段，常用的其实就下面这几个。先看你想回答什么问题，再对着表找视图，比一个个字段点过去快得多。</p>
        <div class="faq-table-wrap">
          <table class="faq-table">
            <caption>常用射门字段与对应视图</caption>
            <thead>
              <tr>
                <th scope="col">字段</th>
                <th scope="col">它回答什么问题</th>
                <th scope="col">看哪个视图</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">射门位置</th>
                <td>球是从哪个区域起脚的</td>
                <td>落点散点</td>
              </tr>
              <tr>
                <th scope="row">射正比例</th>
                <td>多少脚打在了门框范围内</td>
                <td>转化趋势</td>
              </tr>
              <tr>
                <th scope="row">禁区内外分布</th>
                <td>进攻是不是都堆在禁区外</td>
                <td>热区分布</td>
              </tr>
              <tr>
                <th scope="row">射门转化</th>
                <td>平均多少脚换来一个进球</td>
                <td>转化趋势</td>
              </tr>
              <tr>
                <th scope="row">时段分布</th>
                <td>哪个时间段射门最密集</td>
                <td>时段分布</td>
              </tr>
              <tr>
                <th scope="row">球队对照</th>
                <td>两支球队同一场数据差多少</td>
                <td>对比柱状</td>
              </tr>
            </tbody>
          </table>
        </div>
        <p class="faq-item__tail">这套视图放在<a href="/tools/">数据工具台</a>的射门统计评测里，落点散点、热区分布、转化趋势、对比柱状、时段分布与球队对照六个视图一键切换，场上换了哪套打法，图形会先露出来。</p>
      </div>
    </article>

    <article class="faq-item faq-item--contact" id="t-contact" data-reveal>
      <div class="faq-item__rail">
        <span class="faq-item__num">06</span>
      </div>
      <div class="faq-item__body">
        <h2 class="faq-item__q">按上面走完还是没找到，或者发现某轮数据有问题怎么办？</h2>
        <p class="faq-item__verdict">直接写邮件给客服邮箱就行，工作日 9:00-18:00 有人回复，工作时段内的邮件当天就会有人接。</p>
        <div class="faq-contact">
          <div class="faq-contact__row">
            <span class="faq-contact__k">客服邮箱</span>
            <span class="faq-contact__v">service@j9-club-jiuyouhui.com.cn</span>
          </div>
          <div class="faq-contact__row">
            <span class="faq-contact__k">回复时段</span>
            <span class="faq-contact__v">工作日 9:00-18:00</span>
          </div>
          <div class="faq-contact__row">
            <span class="faq-contact__k">写信时请带上</span>
            <span class="faq-contact__v">联赛名称与具体轮次，越具体越省一轮来回</span>
          </div>
        </div>
        <p class="faq-item__tail">数据订正、存档取用、专题共写，都走<a href="/connect/">联系通道</a>这一条线；想先了解这个站是谁在做、栏目怎么分，可以去看<a href="/profile/">品牌档案</a>。</p>
      </div>
    </article>

  </div>
</main>

.page-faq {
  --faq-hair: rgba(124, 136, 148, 0.26);
  --faq-hair-strong: rgba(124, 136, 148, 0.46);
  --faq-soft: rgba(242, 237, 228, 0.78);
  --faq-faint: rgba(242, 237, 228, 0.58);
  display: block;
  background: var(--ink-abyss);
  color: var(--paper);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 84% 0%, rgba(43, 227, 200, 0.13), transparent 62%),
    linear-gradient(158deg, var(--ink-deep) 0%, var(--ink-abyss) 66%);
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -34%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 31, 0.16), transparent 68%);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(26px, 5vw, 48px);
  padding: clamp(28px, 5vw, 54px) 0 clamp(36px, 6vw, 68px);
}

.page-faq .faq-hero__eyebrow {
  margin: 18px 0 12px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon);
}

.page-faq .faq-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 8.2vw, 82px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__lead {
  max-width: 46ch;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--faq-soft);
}

.page-faq .faq-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__jump a {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--paper);
  text-decoration: none;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.page-faq .faq-hero__jump a:hover,
.page-faq .faq-hero__jump a:focus-visible {
  border-color: var(--signal);
  color: var(--signal-soft);
}

.page-faq .faq-hero__visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--faq-hair-strong);
  background: var(--ink-shade);
}

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

.page-faq .faq-hero__visual-cap {
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--stone);
  border-top: 1px solid var(--faq-hair);
}

/* ---------- 主体条目 ---------- */
.page-faq .faq-body {
  padding: clamp(20px, 4vw, 40px) 0 clamp(48px, 8vw, 96px);
}

.page-faq .faq-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: clamp(26px, 4.5vw, 44px) 0;
  border-top: 1px solid var(--faq-hair);
  scroll-margin-top: calc(var(--bar-h-compact) + 20px);
}

.page-faq .faq-item:first-child {
  border-top: 1px solid var(--faq-hair-strong);
}

.page-faq .faq-item__rail {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-faq .faq-item__rail::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--faq-hair-strong);
}

.page-faq .faq-item__num {
  font-family: var(--font-data);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--signal);
}

.page-faq .faq-item__q {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-item__verdict {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 3px solid var(--signal);
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--paper);
}

.page-faq .faq-item__tail {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.76;
  color: var(--faq-faint);
}

.page-faq .faq-item__tail a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-faq .faq-item__tail a:hover,
.page-faq .faq-item__tail a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

.page-faq .faq-item__figure {
  margin: 22px 0 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 130, 0.34);
  background: rgba(138, 113, 84, 0.12);
}

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

.page-faq .faq-item__figure figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--sand);
  border-top: 1px solid rgba(201, 168, 130, 0.28);
}

/* ---------- 步骤条 ---------- */
.page-faq .faq-steps {
  counter-reset: faqstep;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  counter-increment: faqstep;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 13px 18px 13px 14px;
  border: 1px solid var(--faq-hair);
  border-radius: var(--radius-md);
  background: rgba(18, 41, 63, 0.6);
}

.page-faq .faq-step::before {
  content: counter(faqstep, decimal-leading-zero);
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 106, 31, 0.45);
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--signal-soft);
}

.page-faq .faq-step__label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper);
}

.page-faq .faq-step__desc {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-soft);
}

.page-faq .faq-step__desc a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
}

.page-faq .faq-step__desc a:hover,
.page-faq .faq-step__desc a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- 档案三步流程 ---------- */
.page-faq .faq-flow {
  display: grid;
  gap: 12px;
  margin: 0 0 4px;
}

.page-faq .faq-flow__node {
  padding: 16px 18px;
  border: 1px solid rgba(201, 168, 130, 0.34);
  border-radius: var(--radius-md);
  background: rgba(138, 113, 84, 0.14);
}

.page-faq .faq-flow__mark {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--sand-deep);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-abyss);
}

.page-faq .faq-flow__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--sand);
}

.page-faq .faq-flow__node p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(242, 237, 228, 0.72);
}

.page-faq .faq-flow__node p a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 227, 200, 0.42);
}

.page-faq .faq-flow__node p a:hover,
.page-faq .faq-flow__node p a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- 联赛说明列表 ---------- */
.page-faq .faq-notes {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-note {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-note__k {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--neon);
}

.page-faq .faq-note__v {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--faq-soft);
}

/* ---------- 射门速查表 ---------- */
.page-faq .faq-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-md);
  background: rgba(18, 41, 63, 0.5);
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-faq .faq-table caption {
  padding: 14px 16px 10px;
  text-align: left;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-faq .faq-table th,
.page-faq .faq-table td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stone);
  background: rgba(8, 21, 36, 0.6);
}

.page-faq .faq-table tbody tr:nth-child(odd) {
  background: rgba(8, 21, 36, 0.34);
}

.page-faq .faq-table tbody th {
  font-weight: 700;
  color: var(--paper);
}

.page-faq .faq-table tbody td {
  color: var(--faq-soft);
}

.page-faq .faq-table tbody td:last-child {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--signal-soft);
}

/* ---------- 联系条目 ---------- */
.page-faq .faq-item--contact {
  border-bottom: 1px solid var(--faq-hair-strong);
}

.page-faq .faq-contact {
  display: grid;
  gap: 0;
  border: 1px solid var(--faq-hair-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, rgba(18, 41, 63, 0.92), rgba(10, 27, 46, 0.92));
  overflow: hidden;
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-contact__row:first-child {
  border-top: 0;
}

.page-faq .faq-contact__k {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.page-faq .faq-contact__v {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper);
  word-break: break-word;
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-note {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }

  .page-faq .faq-contact__row {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 5fr 6fr;
    align-items: end;
  }

  .page-faq .faq-hero__visual {
    align-self: stretch;
  }

  .page-faq .faq-hero__visual img {
    height: 100%;
    min-height: 340px;
  }

  .page-faq .faq-item {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px 28px;
  }

  .page-faq .faq-item__rail {
    position: sticky;
    top: calc(var(--bar-h-compact) + 26px);
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page-faq .faq-item__rail::after {
    width: 2px;
    height: 52px;
    flex: none;
    border-radius: 2px;
    background: linear-gradient(var(--signal), rgba(255, 106, 31, 0));
  }

  .page-faq .faq-item__num {
    font-size: 40px;
  }
}

@media (min-width: 1100px) {
  .page-faq .faq-item {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .page-faq .faq-item__q {
    max-width: 30ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-hero__jump a,
  .page-faq .faq-item__tail a,
  .page-faq .faq-flow__node p a {
    transition: none;
  }
}