/* ============================================================
   legal.css — 法务页面（隐私政策 / 用户协议）
   ------------------------------------------------------------
   两个页面共用一套排版：左侧粘性目录 + 右侧长文正文。
   目录由 legal.js 从正文的 h2[id] 自动生成，不在 i18n 里重复一份标题
   —— 否则每加一节就要在两处各翻 7 遍，迟早对不上。

   正文块（.lg-body）是 data-i18n 的落点，整块 innerHTML 由字典替换，
   所以这里的选择器只能命中「块内的通用标签」，不能依赖块内的 class。
   ============================================================ */

/* ── 页头 ── */
.lg-head { padding: 56px 24px 40px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.lg-head h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; margin-bottom: 14px; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-3); }
.lg-meta span { display: inline-flex; align-items: center; gap: 7px; }
.lg-meta svg { width: 15px; height: 15px; flex: none; stroke: var(--ink-4); }
.lg-lead { margin-top: 20px; max-width: 68ch; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.lg-lead strong { font-weight: 600; color: var(--ink); }

/* 兄弟文件互链（隐私政策 ↔ 用户协议） */
.lg-switch { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.lg-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--surface); box-shadow: 0 0 0 1px var(--border-2); }
.lg-switch a:hover { color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.lg-switch a[aria-current="page"] { background: var(--red-light); color: var(--red); box-shadow: 0 0 0 1px var(--red-mid); }

/* ── 主体两栏 ── */
.lg-wrap { padding: 48px 24px 88px; }
.lg-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) { .lg-grid { grid-template-columns: 248px minmax(0, 1fr); gap: 56px; } }

/* ── 目录 ── */
.lg-toc { min-width: 0; }
@media (min-width: 1000px) { .lg-toc { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; } }
.lg-toc-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.lg-toc li { margin: 0; }
.lg-toc a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.lg-toc a:hover { color: var(--ink); }
.lg-toc a.on { color: var(--red); border-left-color: var(--red); font-weight: 500; }
/* 窄屏折叠成一个 details，免得几十条目录把正文压到屏幕外 */
.lg-toc-fold summary { cursor: pointer; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; font-weight: 600; list-style: none; }
.lg-toc-fold summary::-webkit-details-marker { display: none; }
.lg-toc-fold summary::after { content: '⌄'; float: right; }
.lg-toc-fold[open] summary { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.lg-toc-fold .lg-toc-body { padding: 14px 16px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
@media (min-width: 1000px) { .lg-toc-fold summary { display: none; } .lg-toc-fold .lg-toc-body { padding: 0; border: 0; } }

/* ── 正文 ── */
.lg-doc { min-width: 0; max-width: 76ch; }
.lg-sec { padding-top: 8px; margin-bottom: 44px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-sec > h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.lg-sec > h2 .lg-num { color: var(--red); margin-right: 10px; font-variant-numeric: tabular-nums; }

.lg-body { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.lg-body > * + * { margin-top: 14px; }
.lg-body h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 26px; letter-spacing: -.01em; }
.lg-body strong { font-weight: 600; color: var(--ink); }
.lg-body a { color: var(--red); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.lg-body ul, .lg-body ol { padding-left: 22px; margin-block: 14px; }
.lg-body li + li { margin-top: 8px; }
.lg-body li::marker { color: var(--ink-4); }
.lg-body code { font-size: .92em; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--ink); word-break: break-all; }

/* 重点提示块：用 <blockquote> 承载，块内不写 class 也能命中 */
.lg-body blockquote { margin: 18px 0; padding: 16px 18px; border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--red-light); color: var(--ink-2); font-size: 15px; }
.lg-body blockquote > * + * { margin-top: 10px; }

/* 表格：窄屏可横向滚动，别把版心撑破 */
.lg-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; background: var(--surface); }
.lg-body table th, .lg-body table td { padding: 11px 13px; border: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.65; }
.lg-body table th { background: var(--surface-2); font-weight: 600; color: var(--ink); white-space: nowrap; }
.lg-body table tr:nth-child(even) td { background: var(--surface-2); }
.lg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.lg-scroll table { margin: 0; min-width: 560px; }

/* ── 页脚联系卡 ── */
.lg-contact { margin-top: 8px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.lg-contact h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }

/* ── 打印：法务/应用商店审核常要打印或存 PDF ── */
@media print {
  .lg-toc, .lg-switch, .site-header, .site-footer, .crumbs, .lg-head { display: none !important; }
  .lg-doc { max-width: none; }
  .lg-sec { break-inside: avoid; }
  .lg-body { color: #000; font-size: 11pt; }
}