.page-products {
  --pc-gap: clamp(16px, 2.6vw, 28px);
  --pc-cut: 34px;
  --pc-rise: 56px;
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 4.6vw, 58px);
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(52vw, 560px);
  height: clamp(120px, 18vw, 200px);
  background: linear-gradient(118deg, var(--jade-600) 0%, rgba(20, 102, 79, 0) 82%);
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
  opacity: 0.6;
  pointer-events: none;
}

.page-products .prod-hero__grid {
  position: relative;
  display: grid;
  gap: var(--pc-gap);
}

.page-products .prod-hero__title {
  margin: 0.18em 0 0.32em;
  font-size: var(--fs-88);
  line-height: 0.94;
}

.page-products .prod-hero__lead .lede {
  max-width: 44ch;
}

.page-products .prod-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(20px, 3vw, 34px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-500);
}

.page-products .prod-fact {
  min-width: 0;
}

.page-products .prod-fact dt {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted-400);
}

.page-products .prod-fact dd {
  margin: 6px 0 0;
  font-size: var(--fs-28);
  font-weight: 600;
  color: var(--gold-400);
}

.page-products .prod-hero__media {
  margin: 0;
}

/* 图片比例工具类（本页作用域内） */
.page-products .ratio-hero { aspect-ratio: 1400 / 900; }
.page-products .ratio-tall { aspect-ratio: 900 / 1400; }
.page-products .ratio-band { aspect-ratio: 1200 / 600; }
.page-products .ratio-3x2 { aspect-ratio: 1200 / 800; }
.page-products .ratio-4x3 { aspect-ratio: 1200 / 900; }

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

/* ---------- 栏目卡片 ---------- */
.page-products .cat-deck {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(22px, 3.4vw, 42px);
}

.page-products .cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--ink-800);
  border: 1px solid var(--line-500);
  clip-path: polygon(
    0 0,
    calc(100% - var(--pc-cut)) 0,
    100% var(--pc-cut),
    100% 100%,
    26px 100%,
    0 calc(100% - 26px)
  );
  transition: background var(--dur-2) var(--ease);
}

.page-products .cat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-400), rgba(47, 240, 200, 0));
}

.page-products .cat-card:hover {
  background: var(--ink-700);
}

.page-products .cat-card__idx {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-products .cat-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--paper-100);
}

.page-products .cat-card__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-14);
  color: var(--muted-400);
}

.page-products .cat-card__meta .num {
  color: var(--gold-400);
  font-weight: 600;
}

.page-products .cat-card__body {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-100);
}

.page-products .cat-card__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--cyan-400);
  font-size: var(--fs-14);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.page-products .cat-card__link:hover {
  color: var(--cyan-200);
}

@media (min-width: 960px) {
  .page-products .cat-deck {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 0;
  }

  .page-products .cat-card:nth-child(1) {
    grid-column: 1 / span 7;
  }

  .page-products .cat-card:nth-child(2) {
    grid-column: 8 / span 5;
    margin-top: var(--pc-rise);
  }

  .page-products .cat-card:nth-child(3) {
    grid-column: 1 / span 4;
    margin-top: 26px;
  }

  .page-products .cat-card:nth-child(4) {
    grid-column: 5 / span 8;
    margin-top: 88px;
  }
}

/* ---------- 球员表字段条 ---------- */
.page-products .col-strip {
  counter-reset: col;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .col-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  font-size: var(--fs-14);
  color: var(--paper-100);
}

.page-products .col-strip__item::before {
  counter-increment: col;
  content: counter(col, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
}

.page-products .col-strip__item--a::before { color: var(--cyan-400); }
.page-products .col-strip__item--b::before { color: var(--gold-400); }
.page-products .col-strip__item--c::before { color: var(--cyan-200); }

/* ---------- 俱乐部档案 ---------- */
.page-products .hist-grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-products .hist-figure {
  margin: 0;
}

.page-products .hist-band {
  margin: clamp(24px, 3.4vw, 44px) 0 0;
}

@media (min-width: 900px) {
  .page-products .hist-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

/* ---------- 工作台 ---------- */
.page-products .wb-grid {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(20px, 3vw, 34px);
}

.page-products .wb-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-500);
  border-radius: var(--r-md);
  background: var(--ink-800);
}

.page-products .wb-side__lead {
  margin: 0;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--paper-100);
}

.page-products .wb-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--muted-400);
}

.page-products .wb-side .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-products .wb-main .data-table {
  min-width: 620px;
}

.page-products .wb-main .data-table th[scope="row"] {
  color: var(--cyan-200);
  font-weight: 500;
}

@media (min-width: 960px) {
  .page-products .wb-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: start;
  }
}

/* ---------- 字段字典 ---------- */
.page-products .dict-tools {
  display: grid;
  gap: 10px;
  margin: clamp(18px, 2.6vw, 30px) 0 clamp(10px, 1.6vw, 18px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-500);
}

.page-products .dict-search {
  display: grid;
  gap: 6px;
  max-width: 520px;
}

.page-products .dict-search__label {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted-400);
}

.page-products .dict-search__input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--paper-100);
  background: var(--ink-800);
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.page-products .dict-search__input::placeholder {
  color: var(--muted-400);
}

.page-products .dict-search__input:focus-visible {
  border-color: var(--cyan-200);
  background: var(--ink-700);
}

.page-products .dict-search__hint {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--muted-400);
}

.page-products .dict-search__hint .num {
  color: var(--cyan-400);
  font-weight: 600;
}

.page-products .dict-list {
  margin: 0;
  padding: 0;
}

.page-products .dict-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ink-700);
}

.page-products .dict-term {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-16);
  color: var(--paper-100);
}

.page-products .dict-abbr {
  flex: 0 0 auto;
  min-width: 42px;
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--cyan-400);
}

.page-products .dict-desc {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted-400);
}

.page-products .dict-unit {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 9px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  color: var(--cyan-200);
}

@media (min-width: 720px) {
  .page-products .dict-item {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 4px 20px;
    align-items: baseline;
  }
}

@media (min-width: 1040px) {
  .page-products .dict-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

/* ---------- 图表变体 ---------- */
.page-products .chart-set {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(22px, 3vw, 38px);
}

.page-products .chart-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-500);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
}

.page-products .chart-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.04em;
  color: var(--paper-100);
}

.page-products .chart-tile__body {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted-400);
}

.page-products .chart-bars {
  display: grid;
  gap: 5px;
}

.page-products .chart-bars__i {
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
}

.page-products .chart-bars__i:nth-child(1) { width: 30%; background: var(--blue-500); }
.page-products .chart-bars__i:nth-child(2) { width: 44%; background: var(--cyan-400); }
.page-products .chart-bars__i:nth-child(3) { width: 58%; background: var(--cyan-200); }
.page-products .chart-bars__i:nth-child(4) { width: 74%; background: var(--gold-400); }
.page-products .chart-bars__i:nth-child(5) { width: 92%; background: var(--orange-500); }

.page-products .chart-rungs {
  display: grid;
  gap: 7px;
}

.page-products .chart-rungs__row {
  display: block;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--jade-600);
}

.page-products .chart-rungs__row:nth-child(1) { width: 36%; }
.page-products .chart-rungs__row:nth-child(2) { width: 54%; margin-left: 8%; }
.page-products .chart-rungs__row:nth-child(3) { width: 72%; margin-left: 16%; }
.page-products .chart-rungs__row:nth-child(4) { width: 88%; margin-left: 24%; }

.page-products .chart-line svg {
  display: block;
  width: 100%;
  height: 78px;
}

@media (min-width: 880px) {
  .page-products .chart-set {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: start;
  }

  .page-products .chart-tile:nth-child(2) {
    margin-top: 36px;
  }

  .page-products .chart-tile:nth-child(3) {
    margin-top: 72px;
  }
}

/* ---------- 规则说明列表 ---------- */
.page-products .rules-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
}

.page-products .rules-list .num {
  color: var(--gold-400);
  font-weight: 600;
}

/* ---------- 结尾导航 ---------- */
.page-products .prod-next {
  border-top: 1px solid var(--line-500);
}

.page-products .prod-next__title {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: var(--fs-28);
}

.page-products .prod-next__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .prod-next__link {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  font-size: var(--fs-14);
  color: var(--cyan-200);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.page-products .prod-next__link:hover {
  border-color: var(--cyan-200);
  background: var(--ink-700);
  color: var(--paper-100);
}

/* ---------- 窄屏保护 ---------- */
@media (max-width: 599px) {
  .page-products .prod-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .cat-card {
    clip-path: polygon(
      0 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% 100%,
      18px 100%,
      0 calc(100% - 18px)
    );
  }

  .page-products .chart-line svg {
    height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-card,
  .page-products .prod-next__link,
  .page-products .dict-search__input {
    transition: none;
  }
}
<<<END>>>

等等，我需要再确认一下：`` 里的图片路径 `{zhanqunpic:...}`，在页面渲染时可能不会自动处理。不过看示例，这种占位符本来就是按照能出图的方向写的，应该没问题。

另外，`media-frame` 的共用 CSS 里应该有 `--wide` 和 `--tall` 的修饰类，但我用的是自定义的比例类，应该没事。

我注意到 `grid--5-7` 这个共用类在 `<div class="grid grid--5-7">` 里出现了，而 `grid--7-5` 在友谊赛区块里也出现了——这些应该都是共享样式里定义过的，没问题。

然后我在“球员表结构”那个区块里，用了 `grid--5-7` 把 `section__head` 和 `prose` 分到两边，但没给它们指定网格区域。如果共享样式里 `grid--5-7` 只是定义了列比例，那这两个子元素会自动落进对应的列里。嗯，可以接受。

再检查一下锚点标签：`data-index-link="map"` 对应 `#map`，而 `#map` 的 `section` 上有 `data-index-section="map"`。其他的也都对得上。

还有 `index-band`，我在里面加了一个 `<div class="wrap">` 包裹列表——公共样式里 `index-band__list` 应该是横向滚动的，没问题。

最后，字段字典搜索结果里的 `data-index-item`，共 18 条，数量没错。
<main id="main-content" class="page-products">

  <div class="wrap">
    <nav class="crumbs" aria-label="当前位置">
      <span class="crumbs__item"><a class="crumbs__link" href="/">本赛季总览</a></span>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <span class="crumbs__item">数据栏目中心</span>
    </nav>
  </div>

  <section class="section prod-hero" aria-labelledby="prod-h1">
    <div class="wrap">
      <div class="prod-hero__grid">
        <div class="prod-hero__lead">
          <p class="eyebrow">栏目索引 · 字段口径 · 对照方式</p>
          <h1 id="prod-h1" class="title-display prod-hero__title">数据栏目中心</h1>
          <p class="lede">
            bc体育赛事把本赛季的公开记录拆成四块可以相互对照的内容：球员出场与进球助攻、俱乐部征战档案、
            友谊赛窗口与逐月赛事日历。四块内容共用同一套 18 项字段和同一组位置色码，任何两张表都能横向拼起来读。
          </p>
          <dl class="prod-hero__facts">
            <div class="prod-fact">
              <dt>赛程单元</dt>
              <dd><span class="num">46</span></dd>
            </div>
            <div class="prod-fact">
              <dt>表内字段</dt>
              <dd><span class="num">18</span></dd>
            </div>
            <div class="prod-fact">
              <dt>赛季档案</dt>
              <dd><span class="num">18</span></dd>
            </div>
          </dl>
        </div>

        <figure class="media-frame ratio-hero prod-hero__media">
          <img class="media-frame__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="暗调球场俯拍画面上叠加半透明的表格线条与数值标注，画面中不含可识别的球员与队伍标识">
          <span class="media-frame__overlay" aria-hidden="true"></span>
          <figcaption class="media-frame__caption">表线、轮次刻度与位置色码来自同一套模板，四块栏目共用，便于跨栏目拼表。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <nav class="index-band" aria-label="本页栏目索引">
    <div class="wrap">
      <ul class="index-band__list">
        <li><a class="index-band__link" href="#map" data-index-link="map">01 栏目地图</a></li>
        <li><a class="index-band__link" href="#squad" data-index-link="squad">02 球员表结构</a></li>
        <li><a class="index-band__link" href="#history" data-index-link="history">03 征战档案</a></li>
        <li><a class="index-band__link" href="#friendlies" data-index-link="friendlies">04 友谊赛窗口</a></li>
        <li><a class="index-band__link" href="#calendar" data-index-link="calendar">05 赛事日历</a></li>
        <li><a class="index-band__link" href="#workbench" data-index-link="workbench">06 对照工作台</a></li>
        <li><a class="index-band__link" href="#dictionary" data-index-link="dictionary">07 字段字典</a></li>
        <li><a class="index-band__link" href="#charts" data-index-link="charts">08 图表变体</a></li>
        <li><a class="index-band__link" href="#rules" data-index-link="rules">09 规则说明</a></li>
      </ul>
    </div>
  </nav>

  <section class="section" id="map" data-index-section="map" aria-labelledby="map-h">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">四块内容</p>
        <h2 id="map-h" class="title-display section__title">一张摊开的目录桌</h2>
        <p class="lede">
          四块栏目的数据体量差得不少：球员数据最厚，逐月日历最薄。下面的卡片按各自的体量分配尺寸与位置，
          尺寸差本身就是一份信息——哪块内容值得先看，从版面就能读出来。
        </p>
      </div>

      <div class="cat-deck">

        <article class="cat-card">
          <p class="cat-card__idx">栏目 01</p>
          <h3 class="cat-card__title">球员出场与进球助攻</h3>
          <ul class="cat-card__meta">
            <li><span class="num">34</span> 轮联赛 + <span class="num">12</span> 场杯赛</li>
            <li>登记球员 <span class="num">476</span> 名，有出场记录 <span class="num">418</span> 名</li>
            <li>每张表固定 <span class="num">18</span> 项字段</li>
          </ul>
          <p class="cat-card__body">
            行按轮次推进，列按门将、后卫、中场、前锋四类位置分色。适合查某个位置在某一轮的表现，
            也适合把同位置的两名球员整个赛季叠起来看。
          </p>
          <a class="cat-card__link" href="#squad">看表结构</a>
        </article>

        <article class="cat-card">
          <p class="cat-card__idx">栏目 02</p>
          <h3 class="cat-card__title">俱乐部征战档案</h3>
          <ul class="cat-card__meta">
            <li>起于 1994 年，共 <span class="num">31</span> 个顶级联赛赛季</li>
            <li><span class="num">6</span> 家俱乐部全程在列</li>
            <li>主客场胜率色带分 <span class="num">5</span> 档</li>
          </ul>
          <p class="cat-card__body">
            BC体育网俱乐部简史是这块栏目的主线：每支球队一份档案，先排赛季序列，再排胜率色带，
            最后留一格给当前赛季走势做叠放。
          </p>
          <a class="cat-card__link" href="#history">看档案组织</a>
        </article>

        <article class="cat-card">
          <p class="cat-card__idx">栏目 03</p>
          <h3 class="cat-card__title">友谊赛窗口与赛程</h3>
          <ul class="cat-card__meta">
            <li>窗口固定在每年 6 月至 8 月</li>
            <li>本赛季已登记 <span class="num">24</span> 场</li>
            <li>覆盖 <span class="num">12</span> 个举办地</li>
          </ul>
          <p class="cat-card__body">
            逐场列明对手、日期与举办地，可按月折叠、按举办地筛选，适合排期参考与出行前的粗筛。
          </p>
          <a class="cat-card__link" href="#friendlies">看登记方式</a>
        </article>

        <article class="cat-card">
          <p class="cat-card__idx">栏目 04</p>
          <h3 class="cat-card__title">赛事日历与规则说明</h3>
          <ul class="cat-card__meta">
            <li>按 <span class="num">12</span> 个自然月划分</li>
            <li>密度以点阵表示，一点一个赛程单元</li>
            <li>规则说明当前 <span class="num">v3.2</span>，共 <span class="num">24</span> 条</li>
          </ul>
          <p class="cat-card__body">
            日历给的是全年节奏感，规则说明给的是每轮数字的口径依据。两者成对出现，
            翻日历的时候顺手就能校准读法。
          </p>
          <a class="cat-card__link" href="#calendar">看月份格</a>
        </article>

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

  <section class="section" id="squad" data-index-section="squad" aria-labelledby="squad-h">
    <div class="wrap">
      <div class="grid grid--5-7">
        <div class="section__head">
          <p class="eyebrow">栏目 01 展开</p>
          <h2 id="squad-h" class="title-display section__title">18 项字段的排列顺序</h2>
          <p class="lede">
            字段顺序不是随意排的：先看有没有上场，再看进攻产出，最后防守与纪律。左到右读下来，
            刚好是一次从轻到重的检查。
          </p>
        </div>
        <div class="prose">
          <p>
            每张球员数据表固定 18 项字段，分三段。出场段三项：出场次数、首发次数、出场分钟。
            进攻段六项：进球、助攻、射门、射正、关键传球、传球成功率。防守与纪律段九项：
            抢断、拦截、解围、封堵、扑救、失球、零封、黄牌、红牌。
          </p>
          <p>
            行方向按轮次推进，从第 1 轮到第 34 轮；列方向按四类位置分色，门将、后卫、中场、前锋各占一组。
            同一名球员跨轮次的表现连起来读，能直接看出出场时间的断点在哪一轮。
          </p>
        </div>
      </div>

      <ol class="col-strip" aria-label="球员数据表 18 项字段的列顺序">
        <li class="col-strip__item col-strip__item--a">出场次数</li>
        <li class="col-strip__item col-strip__item--a">首发次数</li>
        <li class="col-strip__item col-strip__item--a">出场分钟</li>
        <li class="col-strip__item col-strip__item--b">进球</li>
        <li class="col-strip__item col-strip__item--b">助攻</li>
        <li class="col-strip__item col-strip__item--b">射门</li>
        <li class="col-strip__item col-strip__item--b">射正</li>
        <li class="col-strip__item col-strip__item--b">关键传球</li>
        <li class="col-strip__item col-strip__item--b">传球成功率</li>
        <li class="col-strip__item col-strip__item--c">抢断</li>
        <li class="col-strip__item col-strip__item--c">拦截</li>
        <li class="col-strip__item col-strip__item--c">解围</li>
        <li class="col-strip__item col-strip__item--c">封堵</li>
        <li class="col-strip__item col-strip__item--c">扑救</li>
        <li class="col-strip__item col-strip__item--c">失球</li>
        <li class="col-strip__item col-strip__item--c">零封</li>
        <li class="col-strip__item col-strip__item--c">黄牌</li>
        <li class="col-strip__item col-strip__item--c">红牌</li>
      </ol>

      <div class="rule-note">
        <p class="rule-note__head">手机端的折叠规则</p>
        <div class="rule-note__body">
          <p>
            窄屏下表格默认只展开出场次数、出场分钟、进球、助攻四列，其余十四列收进可横向滑动的区段。
            表头固定不随横滑移动，位置色码在折叠状态下仍然保留，避免把前锋的数据误读成后卫的。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="history" data-index-section="history" aria-labelledby="history-h">
    <div class="wrap">
      <div class="hist-grid">
        <figure class="media-frame ratio-tall hist-figure">
          <img class="media-frame__img" src="{zhanqunpic:h:1400w:900}" width="900" height="1400" alt="纵向排布的时间轴图形，暖金圆点标识关键年份节点，右侧为分段胜率色带的示意条" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">档案以赛季为刻度自上而下排列，节点之间用细线连接。</figcaption>
        </figure>

        <div class="hist-body">
          <div class="section__head">
            <p class="eyebrow">栏目 02 展开</p>
            <h2 id="history-h" class="title-display section__title">31 个赛季怎么读</h2>
            <p class="lede">
              从 1994 年算起，顶级联赛一共留下 31 个赛季的记录，其中 6 家俱乐部每一个赛季都在列。
              档案不写故事，只排刻度。
            </p>
          </div>
          <div class="prose">
            <p>
              每支球队一份档案，结构统一：上半部分是赛季序列，标注每个赛季所处的级别与名次区间；
              下半部分是主客场胜率色带，从冷蓝到橙红分五档，冷端代表胜率偏低的赛季档，暖端代表偏高的赛季档。
              色带只表示档位，不表示精确到小数点后的数值。
            </p>
            <p>
              要和当前赛季做对照时，把本赛季的走势叠在色带最右一档上即可。历史档案覆盖自 1994 年以来的
              31 个顶级联赛赛季，与本赛季的 34 轮联赛、12 场杯赛分属两套计数，页码之间不互相替代。
            </p>
          </div>
        </div>
      </div>

      <figure class="media-frame ratio-band hist-band">
        <img class="media-frame__img" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="横向五段色带示意图，颜色由冷蓝依次过渡到橙红，下方带有档位刻度，图中不标注具体球队名称" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">五档主客场胜率色带。档位之间的边界值不做跨档直接比较。</figcaption>
      </figure>

      <div class="rule-note rule-note--paper">
        <p class="rule-note__head">色带的读法</p>
        <div class="rule-note__body">
          <p>
            同一条色带里，相邻两档只说明高低关系，不说明差了多少。要判断两支球队的历史区间是否接近，
            需要把两队色带并排放在对照工作台里看，单看一条色带容易把边界误读成差距。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="friendlies" data-index-section="friendlies" aria-labelledby="friendlies-h">
    <div class="wrap">
      <div class="grid grid--7-5">
        <div class="section__head">
          <p class="eyebrow">栏目 03 展开</p>
          <h2 id="friendlies-h" class="title-display section__title">6 月至 8 月的逐场登记</h2>
          <p class="lede">
            友谊赛窗口固定在每年 6 月至 8 月之间，本赛季已登记 24 场，分布在 12 个举办地。
            排期参考时，先按月份圈定范围，再按举办地收敛。
          </p>
        </div>
        <div class="prose">
          <p>
            每一场的必填三项是对手、日期、举办地。月份是折叠层：默认只展开当前月份，其余月份收成一行标题，
            点开才铺开场次。这样在一屏之内就能把三个月的分布看全。
          </p>
          <p>
            筛选维度有三个方向：按对手找同一支球队的全部场次，按举办地把出行半径内的场次挑出来，
            按月份看某个月的密度。三个方向可以叠加，叠加后的结果仍按日期排序。
          </p>
        </div>
      </div>

      <figure class="media-frame ratio-3x2">
        <img class="media-frame__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多张赛程卡片按月份分组错位排列的界面示意，卡片表面只有几何色块与线条，没有球队名称与人员照片" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">场次卡片按月份分组错位排列，同月内按日期先后顺序落下。</figcaption>
      </figure>

      <p class="side-note">
        查赛程遇到月份与日期对不上的情况，可以在数据支持页核对登记口径，或者直接把场次信息发到客服邮箱。
      </p>
    </div>
  </section>

  <section class="section" id="calendar" data-index-section="calendar" aria-labelledby="calendar-h">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">栏目 04 展开</p>
        <h2 id="calendar-h" class="title-display section__title">十二个自然月的密度格</h2>
        <p class="lede">
          全年切成 12 个自然月，一个月一格。格内用点阵表示密度，一个点对应一个赛程单元，
          本赛季的 46 个赛程单元就落在这 12 格里。
        </p>
      </div>

      <div class="grid grid--4-8">
        <div class="prose">
          <p>
            点阵在桌面端悬停可以看到当月单元数，移动端直接在格角标注数字，避免悬停操作在小屏上不可用。
            联赛与杯赛用两种点色区分，同一格内两种点同时出现时，按先联赛后杯赛的顺序排列。
          </p>
          <p>
            日历页的作用是给全年一个节奏感，具体到某一轮的字段读法，仍然要回到球员数据表里查。
            两处共用同一套轮次刻度。
          </p>
        </div>
        <figure class="media-frame ratio-4x3">
          <img class="media-frame__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="十二等分的月份网格信息图，每格内部以点阵疏密表示赛程密度，格角带数字标注" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">十二格月份面板，点阵疏密即当月赛程密度。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section" id="workbench" data-index-section="workbench" aria-labelledby="workbench-h">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">核心工具</p>
        <h2 id="workbench-h" class="title-display section__title">对照数据工作台能放什么</h2>
        <p class="lede">
          体育赛事对照数据在这里只做一件事：把选中的对象并排摊开，让色带和条形重新按当前范围计算。
          所有筛选与重算都在浏览器里完成，不上传、不保存、不需要账号。
        </p>
      </div>

      <div class="wb-grid">
        <aside class="wb-side">
          <p class="wb-side__lead">
            一次最多并列 4 名球员，或者 4 支球队，两类对象不在同一张表里混排。
          </p>
          <ul class="wb-list">
            <li>增减一列时，五段光谱按当前列的最小值与最大值重新分档。</li>
            <li>点击表头切换升序或降序，当前排序列用荧光青箭头标出。</li>
            <li>超出上限时提示先移除一项，而不是自动顶掉最早选中的那项。</li>
            <li>导出只在浏览器端生成表格文件，关闭页面后选择不保留。</li>
          </ul>
          <a class="btn btn--ghost" href="/support/">查操作步骤</a>
        </aside>

        <div class="wb-main">
          <div class="table-shell">
            <table class="data-table">
              <caption>对照数据工作台的选取范围与限制</caption>
              <thead>
                <tr>
                  <th scope="col">维度</th>
                  <th scope="col">可选范围</th>
                  <th scope="col">上限</th>
                  <th scope="col">口径说明</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">对照对象</th>
                  <td>球员或球队，两者不混排</td>
                  <td class="num">4 列</td>
                  <td>一次只对照同一类对象，便于同口径比较</td>
                </tr>
                <tr>
                  <th scope="row">对照指标</th>
                  <td>18 项字段中任选</td>
                  <td class="num">6 项</td>
                  <td>超出上限时先移除一项再添加</td>
                </tr>
                <tr>
                  <th scope="row">轮次区间</th>
                  <td>第 1 轮至第 34 轮</td>
                  <td class="num">34 轮</td>
                  <td>可整季取用，也可只取一段比对</td>
                </tr>
                <tr>
                  <th scope="row">位置筛选</th>
                  <td>门将、后卫、中场、前锋</td>
                  <td class="num">4 类</td>
                  <td>与全站表格、图表共用同一组色码</td>
                </tr>
                <tr>
                  <th scope="row">排序依据</th>
                  <td>任一已选指标</td>
                  <td class="num">1 列</td>
                  <td>点击表头切换升降序，同时只按一列排</td>
                </tr>
                <tr>
                  <th scope="row">结果导出</th>
                  <td>当前视图</td>
                  <td class="num">1 份</td>
                  <td>由浏览器端生成表格文件，不经服务器</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p class="side-note">
            工作台没有账号体系、没有云端保存、也不提供数据接口；关掉页面，选择就重新开始。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="dictionary" data-index-section="dictionary" aria-labelledby="dictionary-h">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">口径底稿</p>
        <h2 id="dictionary-h" class="title-display section__title">字段字典</h2>
        <p class="lede">
          18 项字段的中文名、缩写、单位与统计口径全在这张单子里。缩写左侧悬挂，方便和表格里的列头直接对上。
        </p>
      </div>

      <div class="dict-tools">
        <label class="dict-search">
          <span class="dict-search__label">按字段中文名或缩写过滤</span>
          <input class="dict-search__input" type="search" data-index-search placeholder="例如：抢断 或 TKL" autocomplete="off">
        </label>
        <p class="dict-search__hint">当前共 <span class="num" data-index-count>18</span> 项字段，输入关键词可实时收敛。</p>
      </div>

      <dl class="dict-list">
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">APP</span>出场次数</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 场</span>统计进入比赛名单且实际登场时间大于零的场次，联赛与杯赛分别计数。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">STA</span>首发次数</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 场</span>以开赛时位于场上的名单为准，中途被换下不扣减。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">MIN</span>出场分钟</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 分钟</span>按每场九十分钟基准累计，补时不单独计入。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">GLS</span>进球</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 球</span>以赛事记录判定的本方进球为准，点球与乌龙球另列。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">AST</span>助攻</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>以最后一传直接导致进球为判定标准，线路被折射改变的不计。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">SHO</span>射门</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>所有朝球门方向的触球尝试，是否射正另列一项。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">STG</span>射正</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>射门中需要门将或防守方干预才能阻止入网的次数。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">KEY</span>关键传球</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>直接形成射门的传球，助攻是它的一个子集。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">PSR</span>传球成功率</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 %</span>成功传球数除以总传球数，向前传球与横向传球同一口径。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">TKL</span>抢断</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>防守方主动出脚并取得球权的动作。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">INT</span>拦截</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>传球线路被截断且未出脚争抢的球权转换。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">CLR</span>解围</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>在防守三区把球踢出危险区域的处置动作。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">BLK</span>封堵</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>用身体挡下对方射门或传中线路的动作。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">SAV</span>扑救</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 次</span>门将位置专属字段，其他位置此列为空。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">CON</span>失球</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 球</span>按在场时间分摊，替补登场期间的失球单独记录。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">CLS</span>零封</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 场</span>门将打满全场且未失球的场次，非门将位置不填写。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">YCD</span>黄牌</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 张</span>单场两黄累计变红的场合，两张黄牌都计入。</dd>
        </div>
        <div class="dict-item" data-index-item>
          <dt class="dict-term"><span class="dict-abbr">RED</span>红牌</dt>
          <dd class="dict-desc"><span class="dict-unit">单位 张</span>直接红牌与两黄变红各记一张。</dd>
        </div>
      </dl>

      <div class="rule-note">
        <p class="rule-note__head">口径反馈</p>
        <div class="rule-note__body">
          <p>
            字段定义由口径复核组维护，本赛季累计纠正字段 312 处，纠错反馈在 1 个工作日内回复。
            发现某个数字对不上，可以在联络页按格式提交，附上轮次、字段缩写与两处不一致的读数。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="charts" data-index-section="charts" aria-labelledby="charts-h">
    <div class="wrap">
      <div class="section__head">
        <p class="eyebrow">同一组数字的三种读法</p>
        <h2 id="charts-h" class="title-display section__title">图表样式变体</h2>
        <p class="lede">
          三类图表各管一件事。同一个数字换个图形，读出来的重点会变，所以每张图旁边都配了口径说明。
        </p>
      </div>

      <div class="chart-set">
        <article class="chart-tile chart-tile--band">
          <h3 class="chart-tile__title">光谱色带</h3>
          <div class="chart-bars" aria-hidden="true">
            <i class="chart-bars__i"></i>
            <i class="chart-bars__i"></i>
            <i class="chart-bars__i"></i>
            <i class="chart-bars__i"></i>
            <i class="chart-bars__i"></i>
          </div>
          <p class="chart-tile__body">
            看档位，不看单点。一条记录落在哪一档比具体数值更重要，但档与档之间是离散的，
            边界两侧的数值不要直接拿来比较。
          </p>
        </article>

        <article class="chart-tile chart-tile--bar">
          <h3 class="chart-tile__title">阶梯条形</h3>
          <div class="chart-rungs" aria-hidden="true">
            <span class="chart-rungs__row"></span>
            <span class="chart-rungs__row"></span>
            <span class="chart-rungs__row"></span>
            <span class="chart-rungs__row"></span>
          </div>
          <p class="chart-tile__body">
            适合同位置球员之间的长度对比。高低差一眼可见，但差异小于一档宽度时，几根条会黏在一起，
            这时要回到表格里读数字。
          </p>
        </article>

        <article class="chart-tile chart-tile--line">
          <h3 class="chart-tile__title">轮次折线</h3>
          <div class="chart-line" aria-hidden="true">
            <svg viewBox="0 0 120 60" preserveAspectRatio="none" focusable="false">
              <polyline points="0,46 20,38 40,42 60,22 80,28 100,10 120,16" fill="none" stroke="var(--cyan-400)" stroke-width="2"></polyline>
              <polyline points="0,52 20,50 40,44 60,46 80,36 100,34 120,26" fill="none" stroke="var(--gold-400)" stroke-width="2" stroke-dasharray="4 4"></polyline>
            </svg>
          </div>
          <p class="chart-tile__body">
            看趋势和拐点用折线。单轮的偶然波动在折线里会被放大，读之前先看当轮规则说明里的条目，
            确认口径有没有变动。
          </p>
        </article>
      </div>

      <p class="side-note">
        图表与表格永远相邻出现：先看图形找方向，再到表格核对具体读数。轮次复盘的专题写法可以看赛事观察栏目。
      </p>
    </div>
  </section>

  <section class="section" id="rules" data-index-section="rules" aria-labelledby="rules-h">
    <div class="wrap">
      <div class="grid grid--5-7">
        <div class="section__head">
          <p class="eyebrow">固定附页</p>
          <h2 id="rules-h" class="title-display section__title">每轮数据后面的那一页说明</h2>
          <p class="lede">
            规则说明不单独成页，也不折叠到别处，它固定跟在每一轮数据表之后。数据在哪，说明就在哪。
          </p>
        </div>
        <div class="prose">
          <p>
            当前版本 v3.2，共 24 条条目。条目编号用两段式：轮次两位在前，条目两位在后，
            中间用短横连接。第 7 轮的第 4 条写成 07-04，第 34 轮的第 22 条写成 34-22。
          </p>
          <p>
            口径变动不删旧条目，而是在原条目下追加一行注记，并把版本号的小数位向上抬一格。
            每周三进行一次全量口径复核，复核结果写进当周条目的注记里，留痕可查。
            编辑室的分工与校验流程记在编辑室与使命页。
          </p>
        </div>
      </div>

      <div class="rule-note rule-note--paper">
        <p class="rule-note__head">编号与版本</p>
        <div class="rule-note__body">
          <ul class="rules-list">
            <li><span class="num">24</span> 条条目覆盖全部 18 项字段的判定边界</li>
            <li>版本号写在说明模块内的等宽小字处，不写进标题</li>
            <li>条目注记保留历史版本，不覆盖、不合并</li>
            <li>每轮结束后 90 分钟内发布摘要，24 小时内完成全表校验</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section prod-next" aria-labelledby="next-h">
    <div class="wrap">
      <h2 id="next-h" class="title-display prod-next__title">接下来去哪</h2>
      <ul class="prod-next__list">
        <li><a class="prod-next__link" href="/support/">数据支持 · 查赛程与操作步骤</a></li>
        <li><a class="prod-next__link" href="/blog/">赛事观察 · 轮次复盘与口径说明</a></li>
        <li><a class="prod-next__link" href="/mission/">编辑室与使命 · 校验流程与档案整理</a></li>
        <li><a class="prod-next__link" href="/cooperation/">联络与合作 · 纠错提交与转载咨询</a></li>
      </ul>
    </div>
  </section>

</main>

.page-products {
  --pc-gap: clamp(16px, 2.6vw, 28px);
  --pc-cut: 34px;
  --pc-rise: 56px;
}

/* ---------- 首屏 ---------- */
.page-products .prod-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(26px, 4.6vw, 58px);
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(52vw, 560px);
  height: clamp(120px, 18vw, 200px);
  background: linear-gradient(118deg, var(--jade-600) 0%, rgba(20, 102, 79, 0) 82%);
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
  opacity: 0.6;
  pointer-events: none;
}

.page-products .prod-hero__grid {
  position: relative;
  display: grid;
  gap: var(--pc-gap);
}

.page-products .prod-hero__title {
  margin: 0.18em 0 0.32em;
  font-size: var(--fs-88);
  line-height: 0.94;
}

.page-products .prod-hero__lead .lede {
  max-width: 44ch;
}

.page-products .prod-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(20px, 3vw, 34px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-500);
}

.page-products .prod-fact {
  min-width: 0;
}

.page-products .prod-fact dt {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted-400);
}

.page-products .prod-fact dd {
  margin: 6px 0 0;
  font-size: var(--fs-28);
  font-weight: 600;
  color: var(--gold-400);
}

.page-products .prod-hero__media {
  margin: 0;
}

.page-products .ratio-hero { aspect-ratio: 1400 / 900; }
.page-products .ratio-tall { aspect-ratio: 900 / 1400; }
.page-products .ratio-band { aspect-ratio: 1200 / 600; }
.page-products .ratio-3x2 { aspect-ratio: 1200 / 800; }
.page-products .ratio-4x3 { aspect-ratio: 1200 / 900; }

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

/* ---------- 栏目卡片 ---------- */
.page-products .cat-deck {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(22px, 3.4vw, 42px);
}

.page-products .cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--ink-800);
  border: 1px solid var(--line-500);
  clip-path: polygon(
    0 0,
    calc(100% - var(--pc-cut)) 0,
    100% var(--pc-cut),
    100% 100%,
    26px 100%,
    0 calc(100% - 26px)
  );
  transition: background var(--dur-2) var(--ease);
}

.page-products .cat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-400), rgba(47, 240, 200, 0));
}

.page-products .cat-card:hover {
  background: var(--ink-700);
}

.page-products .cat-card__idx {
  margin: 0;
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-products .cat-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--paper-100);
}

.page-products .cat-card__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-14);
  color: var(--muted-400);
}

.page-products .cat-card__meta .num {
  color: var(--gold-400);
  font-weight: 600;
}

.page-products .cat-card__body {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-100);
}

.page-products .cat-card__link {
  margin-top: auto;
  align-self: flex-start;
  color: var(--cyan-400);
  font-size: var(--fs-14);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.page-products .cat-card__link:hover {
  color: var(--cyan-200);
}

@media (min-width: 960px) {
  .page-products .cat-deck {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 0;
  }

  .page-products .cat-card:nth-child(1) {
    grid-column: 1 / span 7;
  }

  .page-products .cat-card:nth-child(2) {
    grid-column: 8 / span 5;
    margin-top: var(--pc-rise);
  }

  .page-products .cat-card:nth-child(3) {
    grid-column: 1 / span 4;
    margin-top: 26px;
  }

  .page-products .cat-card:nth-child(4) {
    grid-column: 5 / span 8;
    margin-top: 88px;
  }
}

/* ---------- 球员表字段条 ---------- */
.page-products .col-strip {
  counter-reset: col;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.page-products .col-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  font-size: var(--fs-14);
  color: var(--paper-100);
}

.page-products .col-strip__item::before {
  counter-increment: col;
  content: counter(col, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
}

.page-products .col-strip__item--a::before { color: var(--cyan-400); }
.page-products .col-strip__item--b::before { color: var(--gold-400); }
.page-products .col-strip__item--c::before { color: var(--cyan-200); }

/* ---------- 俱乐部档案 ---------- */
.page-products .hist-grid {
  display: grid;
  gap: var(--pc-gap);
}

.page-products .hist-figure {
  margin: 0;
}

.page-products .hist-band {
  margin: clamp(24px, 3.4vw, 44px) 0 0;
}

@media (min-width: 900px) {
  .page-products .hist-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}

/* ---------- 工作台 ---------- */
.page-products .wb-grid {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(20px, 3vw, 34px);
}

.page-products .wb-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-500);
  border-radius: var(--r-md);
  background: var(--ink-800);
}

.page-products .wb-side__lead {
  margin: 0;
  font-size: var(--fs-20);
  line-height: 1.6;
  color: var(--paper-100);
}

.page-products .wb-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--muted-400);
}

.page-products .wb-side .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-products .wb-main .data-table {
  min-width: 620px;
}

.page-products .wb-main .data-table th[scope="row"] {
  color: var(--cyan-200);
  font-weight: 500;
}

@media (min-width: 960px) {
  .page-products .wb-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: start;
  }
}

/* ---------- 字段字典 ---------- */
.page-products .dict-tools {
  display: grid;
  gap: 10px;
  margin: clamp(18px, 2.6vw, 30px) 0 clamp(10px, 1.6vw, 18px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-500);
}

.page-products .dict-search {
  display: grid;
  gap: 6px;
  max-width: 520px;
}

.page-products .dict-search__label {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted-400);
}

.page-products .dict-search__input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--paper-100);
  background: var(--ink-800);
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}

.page-products .dict-search__input::placeholder {
  color: var(--muted-400);
}

.page-products .dict-search__input:focus-visible {
  border-color: var(--cyan-200);
  background: var(--ink-700);
}

.page-products .dict-search__hint {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--muted-400);
}

.page-products .dict-search__hint .num {
  color: var(--cyan-400);
  font-weight: 600;
}

.page-products .dict-list {
  margin: 0;
  padding: 0;
}

.page-products .dict-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ink-700);
}

.page-products .dict-term {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-16);
  color: var(--paper-100);
}

.page-products .dict-abbr {
  flex: 0 0 auto;
  min-width: 42px;
  font-family: var(--font-num);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--cyan-400);
}

.page-products .dict-desc {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted-400);
}

.page-products .dict-unit {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 9px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  color: var(--cyan-200);
}

@media (min-width: 720px) {
  .page-products .dict-item {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 4px 20px;
    align-items: baseline;
  }
}

@media (min-width: 1040px) {
  .page-products .dict-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

/* ---------- 图表变体 ---------- */
.page-products .chart-set {
  display: grid;
  gap: var(--pc-gap);
  margin-top: clamp(22px, 3vw, 38px);
}

.page-products .chart-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line-500);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
}

.page-products .chart-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.04em;
  color: var(--paper-100);
}

.page-products .chart-tile__body {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted-400);
}

.page-products .chart-bars {
  display: grid;
  gap: 5px;
}

.page-products .chart-bars__i {
  display: block;
  height: 10px;
  border-radius: var(--r-pill);
}

.page-products .chart-bars__i:nth-child(1) { width: 30%; background: var(--blue-500); }
.page-products .chart-bars__i:nth-child(2) { width: 44%; background: var(--cyan-400); }
.page-products .chart-bars__i:nth-child(3) { width: 58%; background: var(--cyan-200); }
.page-products .chart-bars__i:nth-child(4) { width: 74%; background: var(--gold-400); }
.page-products .chart-bars__i:nth-child(5) { width: 92%; background: var(--orange-500); }

.page-products .chart-rungs {
  display: grid;
  gap: 7px;
}

.page-products .chart-rungs__row {
  display: block;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--jade-600);
}

.page-products .chart-rungs__row:nth-child(1) { width: 36%; }
.page-products .chart-rungs__row:nth-child(2) { width: 54%; margin-left: 8%; }
.page-products .chart-rungs__row:nth-child(3) { width: 72%; margin-left: 16%; }
.page-products .chart-rungs__row:nth-child(4) { width: 88%; margin-left: 24%; }

.page-products .chart-line svg {
  display: block;
  width: 100%;
  height: 78px;
}

@media (min-width: 880px) {
  .page-products .chart-set {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: start;
  }

  .page-products .chart-tile:nth-child(2) {
    margin-top: 36px;
  }

  .page-products .chart-tile:nth-child(3) {
    margin-top: 72px;
  }
}

/* ---------- 规则说明列表 ---------- */
.page-products .rules-list {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
}

.page-products .rules-list .num {
  color: var(--gold-400);
  font-weight: 600;
}

/* ---------- 结尾导航 ---------- */
.page-products .prod-next {
  border-top: 1px solid var(--line-500);
}

.page-products .prod-next__title {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: var(--fs-28);
}

.page-products .prod-next__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .prod-next__link {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--line-500);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  font-size: var(--fs-14);
  color: var(--cyan-200);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.page-products .prod-next__link:hover {
  border-color: var(--cyan-200);
  background: var(--ink-700);
  color: var(--paper-100);
}

/* ---------- 窄屏保护 ---------- */
@media (max-width: 599px) {
  .page-products .prod-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .cat-card {
    clip-path: polygon(
      0 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% 100%,
      18px 100%,
      0 calc(100% - 18px)
    );
  }

  .page-products .chart-line svg {
    height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .cat-card,
  .page-products .prod-next__link,
  .page-products .dict-search__input {
    transition: none;
  }
}
<<<END>>>

等等——我得注意一下 `` 里面给的图片路径 `{zhanqunpic:...}`。这种占位符在渲染时应该不会真的去解析成一张图，不过按站点要求本来就是把图片源写成这种占位格式，所以没问题。

另外，`media-frame` 那个共用 CSS 里好像已经有 `--wide` 和 `--tall` 这种修饰类，但我这里没有用它们，而是自己定义了比例类，这也没问题。

还有一个潜在问题：`.page-products .media-frame img { width: 100%; height: 100%; }` 这样写，如果 `.media-frame` 本身没有固定高度或者 `aspect-ratio`，图片就有可能会被拉伸。但我给每个 `.media-frame` 都套了对应的比例类，应该能撑起来。

`grid--5-7` 和 `grid--7-5` 这些共用类在 site_kit 里已经定义了，页面里直接使用是允许的。

嗯，不过我在“球员表结构”那一节里把 `section__head` 和 `prose` 放进了 `grid--5-7` 的两列里，但没有给它们指定明确的落位顺序。如果共享样式里只定义了列比例，那两个子元素就会按顺序自动放进两列，视觉上会变成左边标题、右边正文，这个效果我是接受的，没问题。

最后再确认一下锚点：`data-index-link="map"` 对应的就是 `#map`，`#map` 元素上有 `data-index-section="map"`，其他的一一对应，没有遗漏。

还有 `index-band` 里的那个 `wrap` 我只是顺手包了一层，共用样式里 `index-band__list` 本身应该已经能横向滚动，这样写不会影响功能。

字段字典里 `data-index-item` 一共 18 条，数量和描述都一致。