/* ------------------------------------------------------------------
   法务页（privacy.html / terms.html）
   隐私政策与用户协议是长篇法律文本：编号标题、正文段落、条款列表，
   还有两张说明性表格（设备权限、第三方 SDK）。站点既有组件里没有
   正文表格，也没有长文排版，所以这里补一个最小样式块。
   所有选择器都限定在 .legal 作用域内，不影响任何既有页面。
   ------------------------------------------------------------------ */

.legal {
  /* 法务页没有 Hero，正文直接接在固定导航下面，自己让出导航高度 */
  padding-top: calc(var(--nav-h) + var(--sp-10));
}

.legal__inner {
  /* 长文阅读宽度：比 --container-text 略宽，因为权限表有两到三列 */
  max-width: 920px;
}

.legal__head {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-gold);
}

.legal__eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--gold-300);
  font: var(--fs-xs) var(--font-num);
  letter-spacing: var(--ls-wide);
}

.legal__meta {
  margin: var(--sp-5) 0 0;
  color: var(--fg-3);
  font-size: var(--fs-sm);
}

.legal__related {
  margin: var(--sp-2) 0 0;
  color: var(--fg-3);
  font-size: var(--fs-sm);
}

.legal h2 {
  margin: var(--sp-12) 0 var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--brand-500);
  font-size: var(--fs-h3);
}

.legal h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-h4);
}

.legal ul {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  color: var(--fg-2);
}

.legal li {
  margin-bottom: var(--sp-2);
}

.legal li::marker {
  color: var(--brand-400);
}

/* 原文用 <strong> 标识「特别提示」类条款，有法律意义，必须读得出来 */
.legal strong {
  color: var(--fg-1);
  font-weight: var(--fw-semi);
}

/* 说明性表格。窄屏用横向滚动而不是压缩列宽，
   滚动容器给 tabindex，键盘用户也能滚。 */
.legal__table {
  margin: 0 0 var(--sp-6);
  overflow-x: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal th,
.legal td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  color: var(--fg-2);
  text-align: left;
  vertical-align: top;
}

.legal th {
  background: var(--bg-2);
  color: var(--fg-1);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}

.legal tbody tr:nth-child(even) td {
  background: rgba(30,45,70,.35);
}

.legal tbody tr:last-child td {
  border-bottom: 0;
}

/* 提示框。原文的 .box / .box.warn 两级提示在这里落成一个面板组件：
   默认是中性的「阅读提示」，--warn 用于账号注销这类不可撤销的条款。 */
.legal__panel {
  margin: var(--sp-6) 0;
  padding: var(--sp-6);
  border: 1px solid var(--line-1);
  border-left: 2px solid var(--brand-400);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.legal__panel--warn {
  border-color: rgba(255,180,84,.28);
  border-left-color: var(--warn);
  background: rgba(255,180,84,.08);
}

.legal__panel--warn h3 {
  color: var(--warn);
}

.legal__panel h3:first-child {
  margin-top: 0;
}

.legal__panel > :last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .legal__head h1 {
    font-size: var(--fs-h1);
  }
}