/* 价格、协议、隐私、退款、联系页（src/shared/public-pages.ts 生成的纯 HTML）。
   颜色、字体跟首页 landing.css 一家：白纸、黑字、红铅笔，标题宋体，正文黑体。
   正文栏控制在 40 个汉字左右一行，长文读得下去。 */

:root {
  --bg: #fbfbfa;
  --sheet: #ffffff;
  --ink: #141414;
  --ink-body: #34342f;
  --ink-soft: #55554f;
  --ink-faint: #73736c;
  --line: rgba(20, 20, 20, 0.1);
  --line-strong: rgba(20, 20, 20, 0.22);
  --pencil: #c8302a;
  --link: #a3281f;
  --ok: #23824a;
  --serif: 'Songti SC', 'STSong', 'Noto Serif SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'SimSun', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --latin: 'Didot', 'Bodoni 72', 'Bodoni MT', 'Playfair Display', Georgia, serif;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(163, 40, 31, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--pencil); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }

/* —— 顶栏 —— */
.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.logo { font-family: var(--serif); font-size: 18px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink); text-decoration: none; }
.logo span { margin-left: 10px; font-family: var(--latin); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-faint); }
.home { font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.home:hover { color: var(--ink); }

/* —— 左栏：页面列表 + 当前页目录 —— */
.layout { display: grid; grid-template-columns: 188px minmax(0, 680px); gap: 72px; padding-top: 48px; padding-bottom: 72px; }
.side { position: sticky; top: 32px; align-self: start; display: flex; flex-direction: column; font-size: 14px; }
.side-label { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint); }
.side > a { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; }
.side > a:hover { color: var(--ink); }
.side > a[aria-current] { border-left-color: var(--pencil); color: var(--ink); font-weight: 600; }
.toc { border-left: 2px solid var(--line); padding: 2px 0 8px; }
.toc ol, .toc-m ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 4px 0 4px 26px; font-size: 13px; line-height: 1.5; color: var(--ink-faint); text-decoration: none; }
.toc a:hover { color: var(--ink); }

/* —— 正文 —— */
main { min-width: 0; }
h1 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; }
.updated { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
section { margin-top: 44px; scroll-margin-top: 24px; }
h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; line-height: 1.5; }
p { margin: 10px 0; font-size: 15px; line-height: 1.9; color: var(--ink-body); }
strong { font-weight: 600; color: var(--ink); }

/* 窄屏的折叠目录 */
.toc-m { display: none; margin-top: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.toc-m summary { padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.toc-m ol { padding: 0 16px 12px; }
.toc-m a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-soft); text-decoration: none; }

/* —— 价格卡 —— */
.offer { margin-top: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); overflow: hidden; }
.offer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 28px 24px; }
.offer-label { margin: 0; font-size: 13px; color: var(--ink-faint); }
.offer-price { margin: 6px 0 0; line-height: 1.1; color: var(--ink); }
.offer-price strong { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.offer-price span { margin-left: 8px; font-size: 16px; color: var(--ink-soft); }
.offer-note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.button {
  display: inline-flex; align-items: center; flex-shrink: 0; height: 42px; padding: 0 22px; border-radius: 6px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
}
.button:hover { background: #333; }

table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
caption { padding: 14px 28px 10px; text-align: left; font-size: 13px; color: var(--ink-faint); border-top: 1px solid var(--line); }
th, td { padding: 11px 28px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
th { font-size: 12px; font-weight: 500; color: var(--ink-faint); background: #f7f7f5; }
th:not(:first-child), td:not(:first-child) { text-align: right; }
td { color: var(--ink); }
.gift { display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 20px; color: var(--ok); background: #e8f5ec; }

/* —— 联系卡 —— */
.contact { margin-top: 32px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.contact-label, .contact-note { margin: 0; font-size: 13px; color: var(--ink-faint); }
.contact-mail { display: inline-block; margin: 8px 0 6px; font-size: 24px; font-weight: 600; color: var(--ink); text-decoration-color: var(--line-strong); }

/* —— 页脚 —— */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; padding-bottom: 32px; font-size: 13px; color: var(--ink-faint); }
.foot a { color: var(--ink-soft); }

/* —— 窄屏：左栏变成横向标签，目录折叠到标题下面 —— */
@media (max-width: 880px) {
  .wrap { padding: 0 16px; }
  .layout { display: block; padding-top: 0; padding-bottom: 48px; }
  .side {
    position: static; flex-direction: row; gap: 20px; margin: 0 -16px 28px; padding: 0 16px;
    overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  .side::-webkit-scrollbar { display: none; }
  .side-label, .toc { display: none; }
  .side > a { padding: 13px 0 11px; border-left: 0; border-bottom: 2px solid transparent; }
  .side > a[aria-current] { border-bottom-color: var(--pencil); }
  .toc-m { display: block; }
  h1 { font-size: 28px; }
  section { margin-top: 36px; }
  .logo span { display: none; }
}
@media (max-width: 560px) {
  .offer-head { flex-direction: column; align-items: stretch; padding: 22px 20px 20px; }
  .offer-price strong { font-size: 40px; }
  .button { justify-content: center; }
  caption { padding: 12px 20px 8px; }
  th, td { padding: 10px 20px; }
  .gift { display: block; width: fit-content; margin: 0 0 2px auto; }
  .contact { padding: 20px; }
  .contact-mail { font-size: 20px; }
}

@media print {
  .top, .side, .toc-m, .foot, .button { display: none; }
  :root, body { background: #fff; }
  .layout { display: block; padding: 0; }
  section { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}