/* ============================================================
   法律文件三頁共用樣式（服務條款／隱私權政策／資訊安全）· 唯一一份
   ------------------------------------------------------------
   這三頁是**靜態檔**，不進 Vue 應用：法律文件要在任何情況下都打得開，
   包括登入失敗、應用建置壞掉、或使用者只是想在簽約前先看一眼。
   它們不需要 JS，也不該需要。

   設計上刻意跟產品介面**不一樣**：沒有登機證、沒有金色、沒有動畫。
   這是要被逐條讀完（而且可能被列印、被律師標註）的文件，
   所以它長得像文件——一欄、高行距、看得見的層級。
   ============================================================ */
:root {
  --font-tc: "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --font-sans: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --bg: #f2f3f4;
  --surface: #ffffff;
  --ink: #16181a;
  --ink-2: #33383d;
  --muted: #6b7278;
  --line: #e3e6e8;
  --line-strong: #c9ced2;
  --accent: #8a6b3d;
  --warn-wash: #fbf6ec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1113; --surface: #17191c; --ink: #eef0f2; --ink-2: #cdd2d6;
    --muted: #939a9f; --line: #2a2e32; --line-strong: #3a4046;
    --accent: #c9a468; --warn-wash: #221d14;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-tc); font-size: 14px; line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }

/* ── 抬頭 ── */
header.top {
  border-bottom: 1px solid var(--line-strong); background: var(--surface);
  padding: 22px 0 18px; margin-bottom: 34px;
}
header.top .wrap { padding-bottom: 0; }
.brand {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink); text-decoration: none;
}
.brand span { color: var(--muted); font-weight: 500; margin-left: 8px; font-size: 12px; }
h1 { font-family: var(--font-sans); font-size: 27px; margin: 16px 0 6px; letter-spacing: -.01em; }
/*
  版本與生效日。**它是這一頁最重要的中繼資料**：
  「他同意的是哪一版」在爭議時是第一個要回答的問題，
  所以它印在標題下面，而且用等寬字（看得出是一個可以被引用的識別碼）。
*/
.ver {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  letter-spacing: .04em;
}
.lede { margin: 14px 0 0; color: var(--ink-2); max-width: 68ch; }

/* ── 目錄 ── */
nav.toc {
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface);
  padding: 14px 18px; margin: 26px 0 34px;
}
nav.toc b {
  display: block; font-size: 10px; letter-spacing: .16em; color: var(--muted);
  font-weight: 500; margin-bottom: 8px; font-family: var(--font-mono);
}
nav.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
nav.toc li { margin: 2px 0; line-height: 1.7; }
nav.toc a { color: var(--ink-2); text-decoration: none; }
nav.toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) { nav.toc ol { columns: 1; } }

/* ── 條文 ── */
section { margin: 0 0 30px; scroll-margin-top: 20px; }
h2 {
  font-family: var(--font-sans); font-size: 17px; margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
h3 { font-size: 14px; margin: 20px 0 6px; color: var(--ink); }
p { margin: 0 0 12px; }
ul, ol.body { margin: 0 0 12px; padding-left: 22px; }
li { margin: 4px 0; }
b, strong { color: var(--ink); font-weight: 600; }
a { color: var(--accent); }

/*
  要人停下來讀的那幾段（免責、責任限制、跨境傳輸、AI 收費）。
  底色只用一階，不用紅色——紅色會讓人以為是錯誤訊息。
*/
.note {
  border-left: 3px solid var(--accent); background: var(--warn-wash);
  padding: 12px 16px; margin: 0 0 14px; border-radius: 0 3px 3px 0;
}
.note p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
th { background: var(--surface); font-weight: 600; white-space: nowrap; }
code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px;
}

footer.bot {
  border-top: 1px solid var(--line); margin-top: 46px; padding-top: 18px;
  font-size: 12px; color: var(--muted);
}
footer.bot a { margin: 0 4px; }

@media print {
  body { background: #fff; font-size: 11pt; }
  nav.toc, footer.bot, header.top { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}