/*
 * site/site.css — 正式網站公開頁（/privacy、/terms、/support、404）樣式
 * 規格：docs/design/screens/public-web-pages.md（UI-39，UI-WEB-*）§2、§3、§6、§7
 * 由 scripts/build-public-site.ts 原樣複製到 site/dist/site.css。HTML 不得有行內 style（CSP style-src 'self'）。
 */

/* §2.1 淺色色票（品牌手冊 §5.2、§5.3 token） */
:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --chip: #f3efe6;
  --text: #2b2623;
  --text-2: #605852;
  --link: #3f6e52;
  --link-hover: #2d4f3b;
  --on-link: #ffffff;
  --border: #e6e0d5;
  --border-subtle: #f0ece4;
  --shadow: 0 2px 10px rgba(43, 38, 35, 0.04);
  --gutter: 16px;
}

/* §2.2 深色色票（只用於公開網頁） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1a17;
    --card: #28231f;
    --chip: #2f2925;
    --text: #f3eee7;
    --text-2: #c9c0b6;
    --link: #8fbf9f;
    --link-hover: #a9d2b5;
    --on-link: #1e1a17;
    --border: #3a332e;
    --border-subtle: #2f2925;
    --shadow: none;
  }
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere; /* UI-WEB-11 長字串自動斷行 */
}

/* UI-WEB-10 連結 */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:visited {
  color: var(--link);
}
a:hover {
  color: var(--link-hover);
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

main:focus {
  outline: none;
}

/* UI-WEB-06 跳到主要內容 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 10;
  padding: 8px 16px;
  background: var(--card);
  color: var(--link);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 8px;
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* 共用寬度 */
.site-header__inner,
main,
.site-footer {
  max-width: calc(680px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* UI-WEB-07 頁首（不固定，§6） */
.site-header {
  position: static;
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}
.brand:visited,
.brand:hover {
  color: var(--text);
}
.brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: none;
}

/* main */
main {
  padding-top: 32px;
  padding-bottom: 48px;
}

/* 字級（§2.3） */
h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--text);
}
@media (min-width: 600px) {
  h1 {
    font-size: 1.75rem;
  }
}
h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}
h3 {
  margin: 24px 0 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
}
p {
  margin: 0 0 16px;
}
strong {
  font-weight: 700;
  color: var(--text);
}

/* §2.4 節分隔線：線上 40px、線下 24px；錨點不被遮（UI-WEB-28） */
.doc-section,
.page-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
[id] {
  scroll-margin-top: 16px;
}

/* 版本列、副標（§2.3） */
.doc-meta {
  margin: 0 0 24px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
}
.lead {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-2);
}
.note {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* 條列（§2.4、UI-WEB-26） */
ul,
ol {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
ul {
  list-style-type: disc;
}
ul ul {
  list-style-type: circle;
  margin: 6px 0 0;
}
li + li {
  margin-top: 6px;
}
li::marker {
  color: var(--text-2);
}

/* 卡片（§2.4） */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.card + .card {
  margin-top: 12px;
}
.card > :first-child {
  margin-top: 0;
}
.card > :last-child {
  margin-bottom: 0;
}
@media (min-width: 600px) {
  .card {
    padding: 20px;
  }
}

/* UI-WEB-12 草稿預覽橫幅 */
.draft-banner {
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--chip);
  border-radius: 16px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}

/* UI-WEB-23 目錄 */
.toc {
  margin: 0 0 24px;
}
.toc details {
  padding-block: 0;
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}
.toc summary::-webkit-details-marker {
  display: none;
}
/* ChevronDown 樣式箭頭（CSS 繪製，裝飾） */
.toc summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg);
}
.toc details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
}
.toc li + li {
  margin-top: 8px;
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* 支援頁快速連結膠囊（UI-WEB-41） */
.quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.quicklinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--chip);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-decoration: none;
}

.contact-email {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.faq-list,
.delete-cards {
  margin: 0 0 16px;
}
.card h3 {
  margin-top: 0;
}

/* 主按鈕（§2.4、UI-WEB-52） */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  margin-top: 4px;
  background: var(--link);
  color: var(--on-link);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.button:visited,
.button:hover {
  color: var(--on-link);
}
.button:hover {
  background: var(--link-hover);
}
@media (max-width: 599.98px) {
  .button {
    display: flex;
    width: 100%;
  }
}

/* 404 */
.notfound-links {
  list-style: none;
  padding: 0;
}

/* 頁尾（UI-WEB-08、UI-WEB-09） */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-2);
}
.site-footer p {
  margin: 0;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 4px;
  margin-bottom: 8px;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
/* UI-WEB-13 列印 */
@media print {
  :root {
    --bg: #ffffff;
    --card: #ffffff;
    --chip: #ffffff;
    --text: #000000;
    --text-2: #000000;
    --link: #000000;
    --link-hover: #000000;
    --on-link: #000000;
    --shadow: none;
  }
  html {
    color-scheme: light;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
  .site-header,
  .skip-link {
    display: none;
  }
  .card {
    box-shadow: none;
  }
  .button {
    background: none;
    border: 1px solid #000000;
  }
  /* 目錄展開列印：支援 ::details-content 的瀏覽器（Chrome 131+、Safari 18.4+） */
  .toc details::details-content {
    content-visibility: visible;
    display: block;
  }
  .toc summary::after {
    display: none;
  }
}