.page-faq {
  --faq-num: 56px;
  --faq-gap: 14px;
}

@media (min-width: 720px) {
  .page-faq {
    --faq-num: 64px;
    --faq-gap: 18px;
  }
}

.page-faq .faq-hero {
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 104px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}

.page-faq .faq-hero__crumb {
  margin: 0 0 28px;
}

.page-faq .faq-hero__crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--paper-60);
}

.page-faq .faq-hero__crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--paper-40);
}

.page-faq .faq-hero__crumb a {
  color: var(--paper-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-faq .faq-hero__crumb a:hover,
.page-faq .faq-hero__crumb a:focus-visible {
  color: var(--gold-lit);
  border-bottom-color: var(--gold-lit);
  outline: none;
}

.page-faq .faq-hero .eyebrow,
.page-faq .faq-human .eyebrow {
  color: var(--gold);
}

.page-faq .faq-hero h1 {
  max-width: 14em;
  margin: 16px 0 0;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--paper-2);
}

.page-faq .faq-hero__lead {
  max-width: 44em;
  margin: 22px 0 0;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--paper-70);
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--line-on-ink);
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
}

.page-faq .faq-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--ink);
}

.page-faq .faq-stat__n {
  font-size: var(--fs-26);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--gold);
}

.page-faq .faq-stat__t {
  font-size: var(--fs-12);
  letter-spacing: .05em;
  color: var(--paper-60);
}

.page-faq .faq-hero__art {
  margin: 0;
  border: 1px solid var(--line-on-ink);
  background: var(--ink-2);
  overflow: hidden;
}

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

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-hero__art {
    margin-top: 44px;
  }
}

.page-faq .faq-head {
  max-width: 780px;
}

.page-faq .faq-head h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--ink);
}

.page-faq .faq-head__sub {
  max-width: 40em;
  margin: 16px 0 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--mute);
}

.page-faq .faq-human .faq-head h2 {
  color: var(--paper-2);
}

.page-faq .faq-human .faq-head__sub {
  color: var(--paper-70);
}

.page-faq .faq-cats {
  display: grid;
  gap: 1px;
  margin-top: clamp(32px, 5vw, 56px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-faq .faq-cat {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 24px 20px 22px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-base) var(--ease);
}

.page-faq .faq-cat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  background: var(--paper-2);
  outline: none;
}

.page-faq .faq-cat:hover::before,
.page-faq .faq-cat:focus-visible::before {
  transform: scaleY(1);
}

.page-faq .faq-cat__range {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--red-deep);
}

.page-faq .faq-cat__name {
  font-size: var(--fs-20);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-faq .faq-cat__desc {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--mute);
}

.page-faq .faq-cat__count {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--jade);
}

@media (min-width: 640px) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-cat:nth-child(2),
  .page-faq .faq-cat:nth-child(5) {
    margin-top: 28px;
  }
}

.page-faq .faq-index__figure {
  margin: clamp(32px, 5vw, 56px) 0 0;
}

.page-faq .faq-index__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.page-faq .faq-index__figure figcaption {
  margin-top: 12px;
  font-size: var(--fs-12);
  letter-spacing: .05em;
  color: var(--mute);
}

.page-faq .faq-flow__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1000px) {
  .page-faq .faq-flow__grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 32px;
  }
}

.page-faq .faq-toc__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.page-faq .faq-toc__link:hover,
.page-faq .faq-toc__link:focus-visible {
  color: var(--red);
  outline: none;
}

.page-faq .faq-toc__link em {
  font-style: normal;
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--mute);
}

.page-faq .faq-toc__link--go {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-faq .faq-group {
  position: relative;
  scroll-margin-top: 28px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(48px, 6vw, 76px);
}

.page-faq .faq-group__head {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}

.page-faq .faq-group__head > .num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--red-deep);
}

.page-faq .faq-group__head h2 {
  margin: 10px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--ink);
  transition: color var(--t-base) var(--ease);
}

.page-faq .faq-group:target .faq-group__head h2 {
  color: var(--red);
}

.page-faq .faq-group__head p {
  margin: 10px 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--mute);
}

.page-faq .faq-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 2px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--jade);
}

.page-faq .faq-sub .num {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--mute);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-item__head {
  display: grid;
  grid-template-columns: var(--faq-num) minmax(0, 1fr) 22px;
  gap: var(--faq-gap);
  align-items: start;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item__num {
  padding-top: 2px;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red);
}

.page-faq .faq-item__title {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.page-faq .faq-item__head:hover .faq-item__title,
.page-faq .faq-item__head:focus-visible .faq-item__title {
  color: var(--red);
}

.page-faq .faq-item__head:focus-visible {
  outline: none;
}

.page-faq .faq-item__sign {
  justify-self: center;
  align-self: center;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.page-faq .faq-item[open] .faq-item__sign {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--red);
}

.page-faq .faq-item__body {
  max-width: 62em;
  padding: 0 0 24px calc(var(--faq-num) + var(--faq-gap));
}

.page-faq .faq-item__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.9;
  color: var(--mute);
}

.page-faq .faq-group__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 2px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-faq .faq-group__more:hover,
.page-faq .faq-group__more:focus-visible {
  color: var(--red-deep);
  border-bottom-color: var(--red-deep);
  outline: none;
}

.page-faq .faq-log {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-faq .faq-log__row {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-log__no {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}

.page-faq .faq-log__row .tag {
  justify-self: start;
}

@media (min-width: 720px) {
  .page-faq .faq-log__row {
    grid-template-columns: 88px 100px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-faq .faq-human__grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(32px, 5vw, 52px);
  background: var(--line-on-ink);
  border: 1px solid var(--line-on-ink);
}

.page-faq .faq-human__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--ink);
}

.page-faq .faq-human__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.85;
  color: var(--paper-70);
}

.page-faq .faq-human__addr {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.7;
  color: var(--paper-2);
}

.page-faq .copy-btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  align-self: flex-start;
  padding: 4px 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-on-ink);
  font: inherit;
  color: var(--paper-2);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.page-faq .copy-btn:hover,
.page-faq .copy-btn:focus-visible {
  border-bottom-color: var(--gold-lit);
  outline: none;
}

.page-faq .copy-btn__value {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 600;
  letter-spacing: .01em;
  word-break: break-word;
}

.page-faq .copy-btn__hint {
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--paper-60);
  transition: color var(--t-fast) var(--ease);
}

.page-faq .copy-btn[data-copy-state="ok"] .copy-btn__hint {
  color: var(--gold-lit);
}

.page-faq .copy-btn[data-copy-state="fail"] .copy-btn__hint {
  color: var(--gold);
}

@media (min-width: 760px) {
  .page-faq .faq-human__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-human__card--wide {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-cat::before,
  .page-faq .faq-item__sign,
  .page-faq .copy-btn,
  .page-faq .faq-group__more,
  .page-faq .faq-toc__link {
    transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  }
}


<main id="main-content" class="page-faq">

  <section class="section section--ink faq-hero">
    <div class="shell faq-hero__grid">
      <div class="faq-hero__copy">
        <nav class="breadcrumb faq-hero__crumb" aria-label="页面路径">
          <ol>
            <li><a href="/">首页</a></li>
            <li aria-current="page">常见问题条目</li>
          </ol>
        </nav>
        <p class="eyebrow">客服通道 · 第 12 版 · 186 条</p>
        <h1>卡在哪一步，就先查哪一条</h1>
        <p class="faq-hero__lead">账户设置、记录查询、桌面端通道、活动周期，遇到的具体问题大多能在下面按编号找到答案。博九娱乐会馆把这 186 条问题归成六类，编号从 001 排到 186，第 12 版主要补充了桌面端窗口缩放与活动周期跨月归属两类问法。看完还有疑问，页面最下方就是找人的方式。</p>
        <div class="faq-hero__stats">
          <div class="faq-stat">
            <span class="num faq-stat__n">186</span>
            <span class="faq-stat__t">条已归档条目</span>
          </div>
          <div class="faq-stat">
            <span class="num faq-stat__n">6</span>
            <span class="faq-stat__t">个问题类别</span>
          </div>
          <div class="faq-stat">
            <span class="num faq-stat__n">第 12 版</span>
            <span class="faq-stat__t">本季条目版本</span>
          </div>
          <div class="faq-stat">
            <span class="num faq-stat__n">2 小时</span>
            <span class="faq-stat__t">邮件首次响应</span>
          </div>
        </div>
      </div>
      <figure class="faq-hero__art">
        <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="三位编号与标题在展开、收起两种状态下的排布示意">
      </figure>
    </div>
  </section>

  <section class="section section--paper faq-index" id="index">
    <div class="shell">
      <header class="faq-head">
        <p class="eyebrow">六类条目索引</p>
        <h2>先看类别，再翻编号</h2>
        <p class="faq-head__sub serif">六类按日常提问量排位，前两类占了将近一半。点类别直接跳到对应分组，每块右上角的编号区间就是下面条目的起止号。</p>
      </header>
      <div class="faq-cats">
        <a class="faq-cat" href="#g-account">
          <span class="faq-cat__range num">001–042</span>
          <span class="faq-cat__name">账户设置</span>
          <span class="faq-cat__desc">三步流程停住、验证信息重填、栏目偏好调整</span>
          <span class="faq-cat__count num">42 条</span>
        </a>
        <a class="faq-cat" href="#g-account">
          <span class="faq-cat__range num">043–078</span>
          <span class="faq-cat__name">记录查询</span>
          <span class="faq-cat__desc">条件组合、结果为空、跨年度往前翻</span>
          <span class="faq-cat__count num">36 条</span>
        </a>
        <a class="faq-cat" href="#g-desktop">
          <span class="faq-cat__range num">079–112</span>
          <span class="faq-cat__name">桌面端通道</span>
          <span class="faq-cat__desc">系统版本、窗口尺寸、侧轨索引与快捷键面板</span>
          <span class="faq-cat__count num">34 条</span>
        </a>
        <a class="faq-cat" href="#g-cycle">
          <span class="faq-cat__range num">113–143</span>
          <span class="faq-cat__name">活动周期</span>
          <span class="faq-cat__desc">档期读法、跨月归属、往年内容回看</span>
          <span class="faq-cat__count num">31 条</span>
        </a>
        <a class="faq-cat" href="#human">
          <span class="faq-cat__range num">144–168</span>
          <span class="faq-cat__name">账户安全</span>
          <span class="faq-cat__desc">登录状态、设备管理、密码重设与异常提醒</span>
          <span class="faq-cat__count num">25 条</span>
        </a>
        <a class="faq-cat" href="#human">
          <span class="faq-cat__range num">169–186</span>
          <span class="faq-cat__name">到访与咨询</span>
          <span class="faq-cat__desc">会馆地址、值守时段、当面咨询前的准备</span>
          <span class="faq-cat__count num">18 条</span>
        </a>
      </div>
      <figure class="faq-index__figure">
        <img loading="lazy" decoding="async" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="六个分类块按条目数排开的信息图，前两块对应账户设置与记录查询">
        <figcaption>六类条目按提问量排列，前两块合计 78 条，是访客最先翻到的位置。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--white faq-flow" id="entries">
    <div class="shell faq-flow__grid">
      <aside class="faq-toc">
        <p class="eyebrow">高频条目</p>
        <nav aria-label="条目内部分类">
          <a class="faq-toc__link" href="#g-account">账户设置与记录查询<em class="num">001–078</em></a>
          <a class="faq-toc__link" href="#g-desktop">桌面端 2026 通道<em class="num">079–112</em></a>
          <a class="faq-toc__link" href="#g-cycle">活动周期对照<em class="num">113–143</em></a>
          <a class="faq-toc__link" href="#g-changelog">第 12 版变化<em class="num">16 条新增</em></a>
          <a class="faq-toc__link faq-toc__link--go" href="/inquiry/">直接找人<em>咨询通道</em></a>
        </nav>
      </aside>

      <div class="faq-stream">

        <article class="faq-group" id="g-account">
          <header class="faq-group__head">
            <span class="num">001–078</span>
            <h2>账户设置与记录查询</h2>
            <p>从第一步填信息到最后翻出一笔记录，这两类问题最常被问起。碰到卡住的环节，先看有没有一样的问法。</p>
          </header>

          <p class="faq-sub"><span>账户设置</span><span class="num">001–042</span></p>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">001</span>
              <span class="faq-item__title">三步设置走到第二步卡住，重新进来要从头填吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>不用。信息确认、安全项绑定、栏目偏好设置这三步各自保存已经填好的内容，重新进入会停在您没做完的那一步。换一台设备继续也一样，用同一手机号或邮箱登录，进度跟着账户走。三步走完平均 4 分钟，绝大多数人一次就能过。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">002</span>
              <span class="faq-item__title">安全项绑定迟迟收不到验证码怎么办？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>先确认手机号位数完整，再点一次重发。两分钟内仍然没到，换绑邮箱接收验证码，通常立刻能收到。如果只差这一步，工作日 10:00—19:00 也可以打 400-7289-8285，请值守同事帮您看一下发送通道的状态。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">003</span>
              <span class="faq-item__title">栏目偏好选错了，还能改回来吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>能，随时改。栏目偏好只决定首页推荐内容的先后顺序，不碰账户本身，也不影响已经产生的记录。重新进偏好设置，勾好新的类别保存，原来的选择就被覆盖了。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">004</span>
              <span class="faq-item__title">在公共电脑上做完设置，退出后会留下信息吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>退出后本地不再保留登录状态。稳妥一点，做完设置再到账户安全里点一次「退出所有设备」，把其他机器上的临时登录一起清掉，下次用的时候重新登录。</p>
            </div>
          </details>

          <p class="faq-sub"><span>记录查询</span><span class="num">043–078</span></p>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">043</span>
              <span class="faq-item__title">查询结果为空，是不是真的没有记录？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>多半是条件叠得太紧。记录查询支持按月份区间、栏目分类与操作类型三种条件组合，三个同时选中时按「同时满足」来筛。先只留月份区间查一次，再逐项加上另外两个，就能看出是哪一条把结果筛没了。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">044</span>
              <span class="faq-item__title">想看整年的记录，只能一个月一个月翻吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>不用。把月份刻度起点拖到年初、终点拖到年末，区间里的记录会连续列出来，并且按月分段。翻页时列头固定不动，长列表里也不会看丢列名。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">045</span>
              <span class="faq-item__title">记录能往前翻多久？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>账户存续期间都可以翻，最早回到您完成三步设置的当月。把刻度拖到可见范围左边缘之外，系统会接着加载上一年度的内容，不用回到首页重新进。</p>
            </div>
          </details>

          <a class="faq-group__more" href="/inquiry/">这一步还是卡着，找值守同事聊聊 →</a>
        </article>

        <article class="faq-group" id="g-desktop">
          <header class="faq-group__head">
            <span class="num">079–112</span>
            <h2>桌面端 2026 通道</h2>
            <p>系统要求、窗口尺寸和快捷键这三块问得最多。2026 版是第 3 个年度版本，侧轨收起的规则比往年细了一些。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">079</span>
              <span class="faq-item__title">桌面端 2026 通道对电脑有什么要求？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>Windows 10 及以上，或 macOS 12 及以上，窗口最小 1280×720。屏幕本身是 1366×768 的笔记本，建议最大化窗口再用；否则侧轨会收成图标条，要展开才看到栏目全称。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">080</span>
              <span class="faq-item__title">侧轨索引找不到了，是被隐藏了吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>窗口宽度低于 1280 时会自动收起，只留编号和状态灯。把窗口拉宽就会自动展开；也可以把鼠标移到侧轨上临时展开，看完自动收回原位。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">081</span>
              <span class="faq-item__title">18 个快捷操作记不住怎么办？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>按 F1 唤出快捷键面板，面板按功能分成几组，18 个操作全列在里面，还能输入关键词过滤，比如输入「月份」会直接定位到刻度相关的几个。常用的可以固定在侧轨底部，下次开窗口还在原位。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">082</span>
              <span class="faq-item__title">从旧版本升到 2026 版，之前的设置要重新配一遍吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>不用逐项重来。升级会读取上一版的侧轨顺序和面板分组，习惯保持不变。只有两个快捷键组合有调整，升级完成后会提示您确认一次，确认完就能照常用。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">083</span>
              <span class="faq-item__title">窗口缩小后月份刻度不见了，是出错了吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>不是出错。宽度不够时月份刻度会收进侧轨的二级面板，点侧轨上的日历图标就能展开。窗口恢复到 1280 以上，刻度会自动回到顶部。</p>
            </div>
          </details>

          <a class="faq-group__more" href="/products/">想看完整的通道说明，去栏目通道 →</a>
        </article>

        <article class="faq-group" id="g-cycle">
          <header class="faq-group__head">
            <span class="num">113–143</span>
            <h2>活动周期对照</h2>
            <p>全年 12 个月划成 4 个季度主题档期与 12 个月度小档。第一次看长卷容易发懵，下面几条能把读法讲清楚。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">113</span>
              <span class="faq-item__title">活动周期对照里的档期怎么读？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>以月份刻度为单位看。季度主题档期跨三个月，刻度上是颜色更深的段落；月度小档落在单月内，显示为浅色细条。深浅两层叠在一起，哪个月有档期一眼就能扫出来。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">114</span>
              <span class="faq-item__title">跨月的档期算在哪个月？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>按开始的月份归属。比如一个从某月下旬开始、延续到次月上旬的档期，条目挂在起始月下面，结束日期写在条目说明里。找的时候以开始的那个月为准最省事。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">115</span>
              <span class="faq-item__title">版本更新以后，之前看过的档期还能查吗？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>能。往期档期按季度归档，长卷往左拖可以一直看到最早的记录。版本更新影响的是当季新增的内容，已经结束的档期原样保留。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">116</span>
              <span class="faq-item__title">一个月里档期太多，怎么快速定位？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>先在月份刻度上选中区间，长卷里对应的档期条目会同时高亮，右侧列表也跟着过滤。整段看下来平均 90 秒左右，比逐月翻要快得多。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__head">
              <span class="faq-item__num num">117</span>
              <span class="faq-item__title">季度档期和月度小档会不会撞车？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__body">
              <p>不会，两者是同一时段的不同层次。列表里季度档期排在上面，月度小档缩进排在下方，重叠的时段一眼能看出来，不会互相覆盖。</p>
            </div>
          </details>

          <a class="faq-group__more" href="/reports/">档期还有不清楚的，去看栏目观察 →</a>
        </article>

      </div>
    </div>
  </section>

  <section class="section section--paper faq-changelog" id="g-changelog">
    <div class="shell">
      <header class="faq-head">
        <p class="eyebrow">第 12 版 · 相比第 11 版</p>
        <h2>回访用户只看动了的地方</h2>
        <p class="faq-head__sub serif">条目总数从 174 条增至 186 条：新增 16 条、重写 12 条、8 条合并为 4 条。下面按动作类型列出主要变化，经常回来的话，扫一眼这几行就够。</p>
      </header>
      <ol class="faq-log">
        <li class="faq-log__row">
          <span class="tag tag--red">新增</span>
          <span class="faq-log__no num">079–081</span>
          <p>桌面端窗口缩放的 3 条，对应 2026 版侧轨收起规则的变化。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--red">新增</span>
          <span class="faq-log__no num">114–115</span>
          <p>活动周期跨月归属的 2 条，把「算在哪个起始月」讲清楚了。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--red">新增</span>
          <span class="faq-log__no num">046–047</span>
          <p>记录查询跨年度往前翻的 2 条，配合刻度拖拽的用法。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--red">新增</span>
          <span class="faq-log__no num">144–148</span>
          <p>账户安全里的设备管理 5 条，覆盖临时登录与退出所有设备。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--red">新增</span>
          <span class="faq-log__no num">169–172</span>
          <p>到访前的约访流程 4 条，含会馆三类功能空间的用途。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--gold">重写</span>
          <span class="faq-log__no num">001–004</span>
          <p>三步设置的失败处理合并重写，把验证码超时单列成一条。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--gold">重写</span>
          <span class="faq-log__no num">043–045</span>
          <p>记录查询的条件组合，改成「先单条件、再逐步加」的讲法。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--jade">合并</span>
          <span class="faq-log__no num">8 → 4</span>
          <p>原来的登录类问法并入账户设置，重复的表达收掉，只留 4 条不同问法。</p>
        </li>
        <li class="faq-log__row">
          <span class="tag tag--jade">调整</span>
          <span class="faq-log__no num">位置</span>
          <p>咨询入口从页面最末尾移到每个分组下方，省得来回翻。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section section--ink faq-human" id="human">
    <div class="shell">
      <header class="faq-head">
        <p class="eyebrow">自助之后</p>
        <h2>还是没对上号，就找值守的人</h2>
        <p class="faq-head__sub serif">电话和邮件各有适合的场景：急着要答复的打电话，需要说清来龙去脉的写邮件。会馆也接待当面咨询，来之前先约个时间。</p>
      </header>
      <div class="faq-human__grid">
        <div class="faq-human__card">
          <p class="eyebrow">电话</p>
          <button class="copy-btn" type="button" data-copy="400-7289-8285">
            <span class="copy-btn__value">400-7289-8285</span>
            <span class="copy-btn__hint">点击复制</span>
          </button>
          <p class="faq-human__text">工作日 10:00—19:00（北京时间）有值守同事接听，电话接通率 96%。账户设置卡在某一步这类问题，电话里几分钟就能说清。</p>
        </div>
        <div class="faq-human__card">
          <p class="eyebrow">邮件</p>
          <button class="copy-btn" type="button" data-copy="contact@star-bojiu.com.cn">
            <span class="copy-btn__value">contact@star-bojiu.com.cn</span>
            <span class="copy-btn__hint">点击复制</span>
          </button>
          <p class="faq-human__text">平均 2 小时内首次回复。标题里写清入口名称，比如「账户设置」「桌面端通道」「活动周期」，能更快分到对应的同事手里。</p>
        </div>
        <div class="faq-human__card faq-human__card--wide">
          <p class="eyebrow">到访</p>
          <p class="faq-human__addr">新疆省乌鲁木齐市天山区解放北路128号博九娱乐会馆大厦7层</p>
          <p class="faq-human__text">会馆设有迎宾区、栏目索引区与咨询洽谈区三类空间，来之前建议先打电话约一下时间，到现场可以直接在索引区把问题指给我们看。</p>
        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-num: 56px;
  --faq-gap: 14px;
}

@media (min-width: 720px) {
  .page-faq {
    --faq-num: 64px;
    --faq-gap: 18px;
  }
}

.page-faq .faq-hero {
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 104px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}

.page-faq .faq-hero__crumb {
  margin: 0 0 28px;
}

.page-faq .faq-hero__crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--paper-60);
}

.page-faq .faq-hero__crumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--paper-40);
}

.page-faq .faq-hero__crumb a {
  color: var(--paper-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-faq .faq-hero__crumb a:hover,
.page-faq .faq-hero__crumb a:focus-visible {
  color: var(--gold-lit);
  border-bottom-color: var(--gold-lit);
  outline: none;
}

.page-faq .faq-hero .eyebrow,
.page-faq .faq-human .eyebrow {
  color: var(--gold);
}

.page-faq .faq-hero h1 {
  max-width: 14em;
  margin: 16px 0 0;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--paper-2);
}

.page-faq .faq-hero__lead {
  max-width: 44em;
  margin: 22px 0 0;
  font-size: var(--fs-16);
  line-height: 1.85;
  color: var(--paper-70);
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--line-on-ink);
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
}

.page-faq .faq-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--ink);
}

.page-faq .faq-stat__n {
  font-size: var(--fs-26);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--gold);
}

.page-faq .faq-stat__t {
  font-size: var(--fs-12);
  letter-spacing: .05em;
  color: var(--paper-60);
}

.page-faq .faq-hero__art {
  margin: 0;
  border: 1px solid var(--line-on-ink);
  background: var(--ink-2);
  overflow: hidden;
}

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

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-hero__art {
    margin-top: 44px;
  }
}

.page-faq .faq-head {
  max-width: 780px;
}

.page-faq .faq-head h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--ink);
}

.page-faq .faq-head__sub {
  max-width: 40em;
  margin: 16px 0 0;
  font-size: var(--fs-16);
  line-height: 1.8;
  color: var(--mute);
}

.page-faq .faq-human .faq-head h2 {
  color: var(--paper-2);
}

.page-faq .faq-human .faq-head__sub {
  color: var(--paper-70);
}

.page-faq .faq-cats {
  display: grid;
  gap: 1px;
  margin-top: clamp(32px, 5vw, 56px);
  background: var(--line);
  border: 1px solid var(--line);
}

.page-faq .faq-cat {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 24px 20px 22px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-base) var(--ease);
}

.page-faq .faq-cat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease);
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  background: var(--paper-2);
  outline: none;
}

.page-faq .faq-cat:hover::before,
.page-faq .faq-cat:focus-visible::before {
  transform: scaleY(1);
}

.page-faq .faq-cat__range {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--red-deep);
}

.page-faq .faq-cat__name {
  font-size: var(--fs-20);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-faq .faq-cat__desc {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--mute);
}

.page-faq .faq-cat__count {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--jade);
}

@media (min-width: 640px) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-faq .faq-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-cat:nth-child(2),
  .page-faq .faq-cat:nth-child(5) {
    margin-top: 28px;
  }
}

.page-faq .faq-index__figure {
  margin: clamp(32px, 5vw, 56px) 0 0;
}

.page-faq .faq-index__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper-2);
}

.page-faq .faq-index__figure figcaption {
  margin-top: 12px;
  font-size: var(--fs-12);
  letter-spacing: .05em;
  color: var(--mute);
}

.page-faq .faq-flow__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1000px) {
  .page-faq .faq-flow__grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 32px;
  }
}

.page-faq .faq-toc__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.page-faq .faq-toc__link:hover,
.page-faq .faq-toc__link:focus-visible {
  color: var(--red);
  outline: none;
}

.page-faq .faq-toc__link em {
  font-style: normal;
  font-size: var(--fs-12);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--mute);
}

.page-faq .faq-toc__link--go {
  color: var(--red);
  border-bottom-color: var(--red);
}

.page-faq .faq-group {
  position: relative;
  scroll-margin-top: 28px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(48px, 6vw, 76px);
}

.page-faq .faq-group__head {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}

.page-faq .faq-group__head > .num {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--red-deep);
}

.page-faq .faq-group__head h2 {
  margin: 10px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--ink);
  transition: color var(--t-base) var(--ease);
}

.page-faq .faq-group:target .faq-group__head h2 {
  color: var(--red);
}

.page-faq .faq-group__head p {
  margin: 10px 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--mute);
}

.page-faq .faq-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 2px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--jade);
}

.page-faq .faq-sub .num {
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--mute);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-item__head {
  display: grid;
  grid-template-columns: var(--faq-num) minmax(0, 1fr) 22px;
  gap: var(--faq-gap);
  align-items: start;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item__num {
  padding-top: 2px;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--red);
}

.page-faq .faq-item__title {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}

.page-faq .faq-item__head:hover .faq-item__title,
.page-faq .faq-item__head:focus-visible .faq-item__title {
  color: var(--red);
}

.page-faq .faq-item__head:focus-visible {
  outline: none;
}

.page-faq .faq-item__sign {
  justify-self: center;
  align-self: center;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.page-faq .faq-item[open] .faq-item__sign {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--red);
}

.page-faq .faq-item__body {
  max-width: 62em;
  padding: 0 0 24px calc(var(--faq-num) + var(--faq-gap));
}

.page-faq .faq-item__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.9;
  color: var(--mute);
}

.page-faq .faq-group__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 2px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.page-faq .faq-group__more:hover,
.page-faq .faq-group__more:focus-visible {
  color: var(--red-deep);
  border-bottom-color: var(--red-deep);
  outline: none;
}

.page-faq .faq-log {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.page-faq .faq-log__row {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-log__no {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}

.page-faq .faq-log__row .tag {
  justify-self: start;
}

@media (min-width: 720px) {
  .page-faq .faq-log__row {
    grid-template-columns: 88px 100px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

.page-faq .faq-human__grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(32px, 5vw, 52px);
  background: var(--line-on-ink);
  border: 1px solid var(--line-on-ink);
}

.page-faq .faq-human__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--ink);
}

.page-faq .faq-human__text {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.85;
  color: var(--paper-70);
}

.page-faq .faq-human__addr {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.7;
  color: var(--paper-2);
}

.page-faq .copy-btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  align-self: flex-start;
  padding: 4px 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-on-ink);
  font: inherit;
  color: var(--paper-2);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.page-faq .copy-btn:hover,
.page-faq .copy-btn:focus-visible {
  border-bottom-color: var(--gold-lit);
  outline: none;
}

.page-faq .copy-btn__value {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 600;
  letter-spacing: .01em;
  word-break: break-word;
}

.page-faq .copy-btn__hint {
  font-size: var(--fs-12);
  letter-spacing: .06em;
  color: var(--paper-60);
  transition: color var(--t-fast) var(--ease);
}

.page-faq .copy-btn[data-copy-state="ok"] .copy-btn__hint {
  color: var(--gold-lit);
}

.page-faq .copy-btn[data-copy-state="fail"] .copy-btn__hint {
  color: var(--gold);
}

@media (min-width: 760px) {
  .page-faq .faq-human__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-faq .faq-human__card--wide {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-cat::before,
  .page-faq .faq-item__sign,
  .page-faq .copy-btn,
  .page-faq .faq-group__more,
  .page-faq .faq-toc__link {
    transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  }
}