.page-privacy {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.page-privacy .privacy-hero {
  padding: clamp(1.2rem, 3.5vw, 2rem) 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-privacy .privacy-hero .breadcrumb {
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}

.page-privacy .privacy-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion);
}

.page-privacy .privacy-hero__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold-45);
}

.page-privacy .privacy-hero__title {
  margin: 0 0 1.1rem;
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.85rem, 6.4vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-privacy .privacy-hero__lede {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.98rem, 2.3vw, 1.1rem);
  line-height: 1.85;
  color: var(--ink-72);
}

.page-privacy .privacy-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding-top: 0.95rem;
  border-top: 2px solid var(--ink);
  font-size: 0.76rem;
  color: var(--slate);
}

.page-privacy .privacy-hero__dot {
  width: 6px;
  height: 6px;
  background: var(--vermilion);
  transform: rotate(45deg);
}

.page-privacy .privacy-figure {
  margin: 0;
}

.page-privacy .privacy-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: var(--line);
  box-shadow: var(--hard);
  background: var(--snow);
  object-fit: cover;
}

.page-privacy .privacy-figure__caption {
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--gold);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-privacy .privacy-body {
  padding: clamp(2rem, 5.5vw, 3.6rem) 0 clamp(2.4rem, 6vw, 4.4rem);
}

.page-privacy .privacy-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-privacy .toc {
  padding: 1rem 1rem 1.1rem;
  background: var(--snow);
  border: var(--line);
  box-shadow: var(--hard-sm);
}

.page-privacy .toc__title {
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
}

.page-privacy .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.page-privacy .toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem;
  border-left: 3px solid transparent;
  color: var(--ink-72);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.55;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-privacy .toc__link:hover,
.page-privacy .toc__link:focus-visible {
  color: var(--ink);
  border-left-color: var(--vermilion);
  background: rgba(195, 58, 44, 0.08);
}

.page-privacy .toc__num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--vermilion);
}

.page-privacy .privacy-doc {
  min-width: 0;
}

.page-privacy .clause {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  scroll-margin-top: 6.5rem;
}

.page-privacy .clause__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
  padding: 0.65rem 0.85rem;
  background: var(--indigo);
  border: var(--line);
  box-shadow: var(--hard-sm);
}

.page-privacy .clause__num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.page-privacy .clause__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.02rem, 2.7vw, 1.32rem);
  line-height: 1.45;
  color: var(--snow);
}

.page-privacy .clause p {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--ink-72);
}

.page-privacy .clause p:last-child {
  margin-bottom: 0;
}

.page-privacy .clause strong {
  color: var(--ink);
  font-weight: 600;
}

.page-privacy .info-cards {
  list-style: none;
  margin: 1.3rem 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-privacy .info-card {
  position: relative;
  padding: 1.1rem 1.05rem 1.1rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
}

.page-privacy .info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--vermilion), var(--amber) 55%, var(--gold));
}

.page-privacy .info-card__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--vermilion);
}

.page-privacy .info-card__title {
  margin: 0.45rem 0 0.5rem;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--indigo);
}

.page-privacy .clause .info-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--ink-72);
}

.page-privacy .purpose-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-privacy .purpose-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.82;
  color: var(--ink-72);
}

.page-privacy .purpose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--vermilion);
  border: 1px solid var(--ink);
}

.page-privacy .flow {
  list-style: none;
  position: relative;
  margin: 1.3rem 0 0;
  padding: 0 0 0 1.4rem;
  display: grid;
  gap: 0.9rem;
}

.page-privacy .flow::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--vermilion));
}

.page-privacy .flow__item {
  position: relative;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  font-size: 0.91rem;
  line-height: 1.78;
  color: var(--ink-72);
}

.page-privacy .flow__item::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -1.42rem;
  top: 1.05rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  transform: rotate(45deg);
}

.page-privacy .rights {
  margin-top: 1.2rem;
}

.page-privacy .rights .accordion__item {
  margin-bottom: 0.7rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
}

.page-privacy .rights .accordion__item:last-child {
  margin-bottom: 0;
}

.page-privacy .rights .accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-privacy .rights .accordion__trigger:hover,
.page-privacy .rights .accordion__trigger:focus-visible {
  background: rgba(22, 50, 74, 0.06);
}

.page-privacy .rights .accordion__trigger[aria-expanded="true"] {
  color: var(--vermilion);
}

.page-privacy .rights .accordion__icon {
  flex: none;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--gold);
  transition: transform 0.22s var(--ease);
}

.page-privacy .rights .accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.page-privacy .rights .accordion__panel {
  padding: 0 1rem 1rem;
}

.page-privacy .clause .rights .accordion__panel p {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--gold-45);
  font-size: 0.9rem;
  line-height: 1.82;
  color: var(--ink-72);
}

.page-privacy .contact-note {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: clamp(1.2rem, 3.4vw, 1.9rem);
  background: var(--indigo);
  border: var(--line);
  box-shadow: var(--hard);
  scroll-margin-top: 6.5rem;
}

.page-privacy .contact-note__title {
  margin: 0 0 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--gold-45);
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.8vw, 1.32rem);
  line-height: 1.5;
  color: var(--snow);
}

.page-privacy .contact-note__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--snow-72);
}

.page-privacy .contact-note__text strong {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--gold);
  word-break: break-all;
}

.page-privacy .related {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  gap: 0.75rem;
}

.page-privacy .related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.55;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-privacy .related__link::after {
  content: "→";
  flex: none;
  font-family: var(--mono);
  color: var(--vermilion);
  transition: transform 0.18s var(--ease);
}

.page-privacy .related__link:hover,
.page-privacy .related__link:focus-visible {
  transform: translate(-2px, -2px);
  background: #fff;
  border-color: var(--vermilion);
}

.page-privacy .related__link:hover::after,
.page-privacy .related__link:focus-visible::after {
  transform: translateX(3px);
}

.page-privacy .back-top {
  margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
  text-align: right;
}

.page-privacy .back-top a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-privacy .back-top a:hover,
.page-privacy .back-top a:focus-visible {
  background: var(--vermilion);
  color: var(--snow);
  border-color: var(--vermilion);
}

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

  .page-privacy .related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-privacy .privacy-body__grid {
    grid-template-columns: 246px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }

  .page-privacy .toc {
    position: sticky;
    top: 5.5rem;
  }

  .page-privacy .related {
    grid-template-columns: 1fr;
  }

  .page-privacy .clause p,
  .page-privacy .purpose-list li,
  .page-privacy .flow__item {
    font-size: 0.98rem;
  }
}

@media (min-width: 1120px) {
  .page-privacy .info-cards {
    gap: 1.15rem;
  }

  .page-privacy .privacy-figure__caption {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .toc__link,
  .page-privacy .related__link,
  .page-privacy .related__link::after,
  .page-privacy .rights .accordion__icon,
  .page-privacy .back-top a {
    transition: none;
  }

  .page-privacy .related__link:hover,
  .page-privacy .related__link:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-privacy">
  <div class="privacy-hero" id="doc-top">
    <div class="container">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">品牌首页</a></li>
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/personal-data/" aria-current="page">个人信息说明</a></li>
        </ol>
      </nav>
      <p class="privacy-hero__eyebrow">乐冠服务 · 个人信息说明</p>
      <h1 class="privacy-hero__title">您的信息如何被收集、使用与保管</h1>
      <p class="privacy-hero__lede">在乐冠服务注册账号、查看会员权益、下载资料或写信给客服时，您会留下少量必要的信息。这份说明把四件事讲清楚：我们需要什么、为什么需要、放在哪里由谁接触，以及您可以怎样查询、更正或收回。</p>
      <div class="privacy-hero__meta">
        <span class="mono">适用网站：victory-leguan.com.cn</span>
        <span class="privacy-hero__dot" aria-hidden="true"></span>
        <span class="mono">客服工作日 10:00–18:00 在线</span>
      </div>
    </div>
  </div>

  <div class="container">
    <figure class="privacy-figure">
      <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="暖纸色底上的抽象数据流与藏式几何纹样，表现信息在系统内被有秩序地接收与保管" decoding="async">
      <figcaption class="privacy-figure__caption">从您填写到进入保管，每一段流转都对应一个明确用途</figcaption>
    </figure>
  </div>

  <div class="privacy-body">
    <div class="container privacy-body__grid">
      <aside class="toc" aria-label="章节导航">
        <p class="toc__title">本页章节</p>
        <ul class="toc__list">
          <li><a class="toc__link" href="#scope"><span class="toc__num">01</span>这份说明覆盖哪些场景</a></li>
          <li><a class="toc__link" href="#types"><span class="toc__num">02</span>我们会接触到的四类信息</a></li>
          <li><a class="toc__link" href="#purpose"><span class="toc__num">03</span>每一项信息为什么被使用</a></li>
          <li><a class="toc__link" href="#security"><span class="toc__num">04</span>保存多久与如何看护</a></li>
          <li><a class="toc__link" href="#sharing"><span class="toc__num">05</span>什么情况下会交给别人</a></li>
          <li><a class="toc__link" href="#rights"><span class="toc__num">06</span>您可以主动做的事</a></li>
        </ul>
      </aside>

      <article class="privacy-doc">
        <section class="clause" id="scope">
          <div class="clause__head">
            <span class="clause__num">01</span>
            <h2 class="clause__title">这份说明覆盖哪些场景</h2>
          </div>
          <p>当您注册账号、进入会员权益中心按等级查看可用权益、在 2026 资料库的文件区取走资料，或者通过客服邮箱与我们沟通选题、教程与合作事宜时，都会产生与本说明相关的信息。</p>
          <p>电脑端与移动端适用同一套做法。移动端区域资料库入口位于页尾悬浮按钮，您在手机上打开它时，同样受这份说明约束。如果您只是以访客身份浏览公开页面，我们只接收维持页面正常打开所需的基础访问记录。</p>
          <p>后续内容按“接触什么—为何使用—怎么保管—您能做什么”的顺序展开，左侧章节可以直接跳到您最关心的部分。</p>
        </section>

        <section class="clause" id="types">
          <div class="clause__head">
            <span class="clause__num">02</span>
            <h2 class="clause__title">我们会接触到的四类信息</h2>
          </div>
          <p>与您相关的信息分为四类，每一类都对应一个具体用途，不做与用途无关的延伸。</p>
          <ul class="info-cards">
            <li class="info-card">
              <span class="info-card__num">TYPE 01</span>
              <h3 class="info-card__title">账号信息</h3>
              <p>您注册时填写的邮箱、登录名，以及选定的会员等级。它用来确认登录者是您本人，并在权益中心按等级呈现对应的权益分组。</p>
            </li>
            <li class="info-card">
              <span class="info-card__num">TYPE 02</span>
              <h3 class="info-card__title">访问日志</h3>
              <p>访问时间、设备类型、浏览器版本与粗略网络位置。它用来保证页面顺畅打开、排查访问异常，也帮助我们持续调整移动端入口的位置。</p>
            </li>
            <li class="info-card">
              <span class="info-card__num">TYPE 03</span>
              <h3 class="info-card__title">下载记录</h3>
              <p>您取走的文件名称、取走时间，以及文件校验值的匹配结果。它支撑下载校验与历史版本回溯，也便于在文件区出现问题时快速定位。</p>
            </li>
            <li class="info-card">
              <span class="info-card__num">TYPE 04</span>
              <h3 class="info-card__title">客服邮件</h3>
              <p>您来信中留下的联系方式与问题描述。它用于回复咨询、跟进合作意向，或帮您解决首次访问资源下载时遇到的具体障碍。</p>
            </li>
          </ul>
          <p>除上述四类之外，我们不会以其他名义向您索取身份、财务或生物识别信息。</p>
        </section>

        <section class="clause" id="purpose">
          <div class="clause__head">
            <span class="clause__num">03</span>
            <h2 class="clause__title">每一项信息为什么被使用</h2>
          </div>
          <p>信息只有在能对应到一项具体服务时才会被调取，常见情形有以下几种。</p>
          <ul class="purpose-list">
            <li><strong>确认身份。</strong>登录时核对邮箱与登录名，确认操作者是账号本人，并按会员等级开放对应范围的资料与目录。</li>
            <li><strong>展示权益。</strong>在电脑端会员权益中心按启阅、进阶、尊享、典藏四档组织条目，让您一眼看清自己所处等级下可以使用的权益，不必逐页翻找。</li>
            <li><strong>校验文件。</strong>文件区标注文件大小与最近修订时间，并附带 SHA-256 校验值，方便您确认取到的文件与发布时完全一致。</li>
            <li><strong>提醒更新。</strong>资料库每月新增或修订 25 至 40 份资料，更新记录在每月最后一个工作周发布，订阅目录的会员会收到当月变化摘要。</li>
            <li><strong>回复来信。</strong>客服在工作日 10:00 至 18:00 处理邮件；需要电话沟通时，会按您在邮件中留下的联系方式回拨。</li>
          </ul>
        </section>

        <section class="clause" id="security">
          <div class="clause__head">
            <span class="clause__num">04</span>
            <h2 class="clause__title">保存多久与如何看护</h2>
          </div>
          <p>保存时间与实际用途挂钩，不为“以后可能有用”而无期限留存。账号信息在账号有效期间存续，您随时可以申请注销；访问日志与下载记录保留到完成异常排查与文件区维护所需的周期；客服邮件在问题处理完毕后继续保留一段时间，方便双方回看往来。</p>
          <ul class="flow">
            <li class="flow__item"><strong>按用途定时间。</strong>每类信息在进入系统时就对应一个保存周期，周期结束即进入清理流程。</li>
            <li class="flow__item"><strong>按角色分权限。</strong>客服、内容审校与产品岗位可查看的范围各不相同，调取留痕，跨岗位查看需要额外说明理由。</li>
            <li class="flow__item"><strong>发布即生成校验值。</strong>文件上线时同步生成 SHA-256 校验值并随文件一同展示，您取走后可自行比对，确认内容未被改动。</li>
            <li class="flow__item"><strong>到期按流程清理。</strong>超出保存周期的访问日志与下载记录由责任人按既定流程删除或匿名化处理。</li>
          </ul>
        </section>

        <section class="clause" id="sharing">
          <div class="clause__head">
            <span class="clause__num">05</span>
            <h2 class="clause__title">什么情况下会交给别人</h2>
          </div>
          <p>我们不出售您的信息，也不会把它交给与提供服务无关的第三方。</p>
          <p>为了让网站正常运转，少量技术服务方会在约定范围内接触必要数据，例如承载页面访问、处理邮件投递的服务商。他们只能按约定的目的处理这些数据，超出约定范围即须停止并删除。</p>
          <p>当您与内容合作机构发生选题协作往来时，我们只提供与该次协作直接相关的内容，不附带您的账号信息与下载记录。依照法律法规或主管部门的正式要求必须提供时，我们会在条件允许的情况下把情况告知您。</p>
        </section>

        <section class="clause" id="rights">
          <div class="clause__head">
            <span class="clause__num">06</span>
            <h2 class="clause__title">您可以主动做的事</h2>
          </div>
          <p>对留在乐冠服务的信息，您有几项可以随时行使的权利。展开每一项可以看到具体做法。</p>
          <div class="accordion rights">
            <div class="accordion__item">
              <button type="button" class="accordion__trigger" data-accordion-trigger aria-controls="right-1" aria-expanded="false">
                <span>查询自己留了哪些信息</span>
                <span class="accordion__icon" aria-hidden="true">＋</span>
              </button>
              <div class="accordion__panel" id="right-1" hidden>
                <p>写信到客服邮箱，说明您希望查看的信息范围，例如账号信息、下载记录或某段时间的客服往来。我们会在工作日 10:00 至 18:00 内回复，并告知获取方式与所需时间。</p>
              </div>
            </div>
            <div class="accordion__item">
              <button type="button" class="accordion__trigger" data-accordion-trigger aria-controls="right-2" aria-expanded="false">
                <span>更正填写有误的内容</span>
                <span class="accordion__icon" aria-hidden="true">＋</span>
              </button>
              <div class="accordion__panel" id="right-2" hidden>
                <p>邮箱、登录名或会员等级填写有误时，通过同一邮箱提出更正请求，说明需要修改的项目。核实账号归属后，我们会协助修正并回信确认结果。</p>
              </div>
            </div>
            <div class="accordion__item">
              <button type="button" class="accordion__trigger" data-accordion-trigger aria-controls="right-3" aria-expanded="false">
                <span>删除信息或注销账号</span>
                <span class="accordion__icon" aria-hidden="true">＋</span>
              </button>
              <div class="accordion__panel" id="right-3" hidden>
                <p>不再使用账号时，可通过客服邮箱申请注销。注销后账号信息与下载记录按流程处理，已产生的客服往来在必要期限内继续保留，以便处理后续争议。</p>
              </div>
            </div>
            <div class="accordion__item">
              <button type="button" class="accordion__trigger" data-accordion-trigger aria-controls="right-4" aria-expanded="false">
                <span>收回不必要的同意</span>
                <span class="accordion__icon" aria-hidden="true">＋</span>
              </button>
              <div class="accordion__panel" id="right-4" hidden>
                <p>对目录订阅、月度更新提醒这类非必要通知，您可以随时表示不再接收。收回同意不影响此前已经完成的处理，也不影响您继续使用与通知无关的功能。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="contact-note" id="contact">
          <h2 class="contact-note__title">个人信息相关的问题，直接写信给我们</h2>
          <p class="contact-note__text">请发送邮件至 <strong>contact@victory-leguan.com.cn</strong>。客服在工作日 10:00 至 18:00 回复；如需电话沟通，请在邮件中留下您的联系方式，我们会按您留下的号码回拨。非工作时间的来信将顺延到下一个工作日处理。</p>
        </section>

        <div class="related">
          <a class="related__link" href="/legal/">
            <span>法律声明：资料的使用范围与版权归属</span>
          </a>
          <a class="related__link" href="/cooperation/">
            <span>合作联系：内容合作方式与客服渠道</span>
          </a>
          <a class="related__link" href="/tutorial/">
            <span>使用教程：首次下载与文件校验的操作步骤</span>
          </a>
        </div>

        <p class="back-top"><a href="#doc-top">回到页面顶部</a></p>
      </article>
    </div>
  </div>
</main>

.page-privacy {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.page-privacy .privacy-hero {
  padding: clamp(1.2rem, 3.5vw, 2rem) 0 clamp(1.6rem, 4vw, 2.6rem);
}

.page-privacy .privacy-hero .breadcrumb {
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}

.page-privacy .privacy-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion);
}

.page-privacy .privacy-hero__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gold-45);
}

.page-privacy .privacy-hero__title {
  margin: 0 0 1.1rem;
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.85rem, 6.4vw, 3.3rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-privacy .privacy-hero__lede {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.98rem, 2.3vw, 1.1rem);
  line-height: 1.85;
  color: var(--ink-72);
}

.page-privacy .privacy-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  padding-top: 0.95rem;
  border-top: 2px solid var(--ink);
  font-size: 0.76rem;
  color: var(--slate);
}

.page-privacy .privacy-hero__dot {
  width: 6px;
  height: 6px;
  background: var(--vermilion);
  transform: rotate(45deg);
}

.page-privacy .privacy-figure {
  margin: 0;
}

.page-privacy .privacy-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: var(--line);
  box-shadow: var(--hard);
  background: var(--snow);
  object-fit: cover;
}

.page-privacy .privacy-figure__caption {
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--gold);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.page-privacy .privacy-body {
  padding: clamp(2rem, 5.5vw, 3.6rem) 0 clamp(2.4rem, 6vw, 4.4rem);
}

.page-privacy .privacy-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.page-privacy .toc {
  padding: 1rem 1rem 1.1rem;
  background: var(--snow);
  border: var(--line);
  box-shadow: var(--hard-sm);
}

.page-privacy .toc__title {
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
}

.page-privacy .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

.page-privacy .toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem;
  border-left: 3px solid transparent;
  color: var(--ink-72);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.55;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.page-privacy .toc__link:hover,
.page-privacy .toc__link:focus-visible {
  color: var(--ink);
  border-left-color: var(--vermilion);
  background: rgba(195, 58, 44, 0.08);
}

.page-privacy .toc__num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--vermilion);
}

.page-privacy .privacy-doc {
  min-width: 0;
}

.page-privacy .clause {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  scroll-margin-top: 6.5rem;
}

.page-privacy .clause__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
  padding: 0.65rem 0.85rem;
  background: var(--indigo);
  border: var(--line);
  box-shadow: var(--hard-sm);
}

.page-privacy .clause__num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.page-privacy .clause__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.02rem, 2.7vw, 1.32rem);
  line-height: 1.45;
  color: var(--snow);
}

.page-privacy .clause p {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--ink-72);
}

.page-privacy .clause p:last-child {
  margin-bottom: 0;
}

.page-privacy .clause strong {
  color: var(--ink);
  font-weight: 600;
}

.page-privacy .info-cards {
  list-style: none;
  margin: 1.3rem 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-privacy .info-card {
  position: relative;
  padding: 1.1rem 1.05rem 1.1rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
}

.page-privacy .info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--vermilion), var(--amber) 55%, var(--gold));
}

.page-privacy .info-card__num {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--vermilion);
}

.page-privacy .info-card__title {
  margin: 0.45rem 0 0.5rem;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--indigo);
}

.page-privacy .clause .info-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.78;
  color: var(--ink-72);
}

.page-privacy .purpose-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.page-privacy .purpose-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.82;
  color: var(--ink-72);
}

.page-privacy .purpose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--vermilion);
  border: 1px solid var(--ink);
}

.page-privacy .flow {
  list-style: none;
  position: relative;
  margin: 1.3rem 0 0;
  padding: 0 0 0 1.4rem;
  display: grid;
  gap: 0.9rem;
}

.page-privacy .flow::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--vermilion));
}

.page-privacy .flow__item {
  position: relative;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  font-size: 0.91rem;
  line-height: 1.78;
  color: var(--ink-72);
}

.page-privacy .flow__item::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -1.42rem;
  top: 1.05rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  transform: rotate(45deg);
}

.page-privacy .rights {
  margin-top: 1.2rem;
}

.page-privacy .rights .accordion__item {
  margin-bottom: 0.7rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
}

.page-privacy .rights .accordion__item:last-child {
  margin-bottom: 0;
}

.page-privacy .rights .accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.page-privacy .rights .accordion__trigger:hover,
.page-privacy .rights .accordion__trigger:focus-visible {
  background: rgba(22, 50, 74, 0.06);
}

.page-privacy .rights .accordion__trigger[aria-expanded="true"] {
  color: var(--vermilion);
}

.page-privacy .rights .accordion__icon {
  flex: none;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--gold);
  transition: transform 0.22s var(--ease);
}

.page-privacy .rights .accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
}

.page-privacy .rights .accordion__panel {
  padding: 0 1rem 1rem;
}

.page-privacy .clause .rights .accordion__panel p {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--gold-45);
  font-size: 0.9rem;
  line-height: 1.82;
  color: var(--ink-72);
}

.page-privacy .contact-note {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: clamp(1.2rem, 3.4vw, 1.9rem);
  background: var(--indigo);
  border: var(--line);
  box-shadow: var(--hard);
  scroll-margin-top: 6.5rem;
}

.page-privacy .contact-note__title {
  margin: 0 0 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--gold-45);
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.8vw, 1.32rem);
  line-height: 1.5;
  color: var(--snow);
}

.page-privacy .contact-note__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--snow-72);
}

.page-privacy .contact-note__text strong {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--gold);
  word-break: break-all;
}

.page-privacy .related {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  gap: 0.75rem;
}

.page-privacy .related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--snow);
  border: 2px solid var(--ink);
  box-shadow: var(--hard-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.55;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-privacy .related__link::after {
  content: "→";
  flex: none;
  font-family: var(--mono);
  color: var(--vermilion);
  transition: transform 0.18s var(--ease);
}

.page-privacy .related__link:hover,
.page-privacy .related__link:focus-visible {
  transform: translate(-2px, -2px);
  background: #fff;
  border-color: var(--vermilion);
}

.page-privacy .related__link:hover::after,
.page-privacy .related__link:focus-visible::after {
  transform: translateX(3px);
}

.page-privacy .back-top {
  margin: clamp(1.6rem, 4vw, 2.2rem) 0 0;
  text-align: right;
}

.page-privacy .back-top a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.page-privacy .back-top a:hover,
.page-privacy .back-top a:focus-visible {
  background: var(--vermilion);
  color: var(--snow);
  border-color: var(--vermilion);
}

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

  .page-privacy .related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-privacy .privacy-body__grid {
    grid-template-columns: 246px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }

  .page-privacy .toc {
    position: sticky;
    top: 5.5rem;
  }

  .page-privacy .related {
    grid-template-columns: 1fr;
  }

  .page-privacy .clause p,
  .page-privacy .purpose-list li,
  .page-privacy .flow__item {
    font-size: 0.98rem;
  }
}

@media (min-width: 1120px) {
  .page-privacy .info-cards {
    gap: 1.15rem;
  }

  .page-privacy .privacy-figure__caption {
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-privacy .toc__link,
  .page-privacy .related__link,
  .page-privacy .related__link::after,
  .page-privacy .rights .accordion__icon,
  .page-privacy .back-top a {
    transition: none;
  }

  .page-privacy .related__link:hover,
  .page-privacy .related__link:focus-visible {
    transform: none;
  }
}
