/* Kai Chat 官方網站
 *
 * 配色跟 App 一致：系統的淺灰底＋白卡片、藍色連結（App 沒有自訂強調色，用的是系統藍）。
 * 對比全部由 scripts/check-contrast.py 實際算出來，**不要憑感覺填數字**；改任何顏色都要重跑。
 */

:root {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #3A3A3A;
  --ink-muted: #4A4A4A;
  --line: #D8D8DE;
  --accent: #004C9F;
  --accent-ink: #FFFFFF;
  --brand: #2E62F0;         /* 「Kai」裡 ai 的藍（App 圖示的顏色）；只用在大字標誌，不當文字色 */
  --tint: #E7F0FC;          /* 教學區塊的淡藍底 */
}

/* 深色有兩個入口：系統是深色且使用者沒手動選白色；或使用者手動選黑色（theme.js 在 <html> 上放 data-theme）。
 * CSS 沒辦法把 media query 跟屬性選擇器寫成同一條規則，所以下面兩塊**必須一模一樣** ——
 * scripts/check-contrast.py 會逐個變數比對，改一邊忘了另一邊會直接紅。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1A3F;
    --card: #132A52;
    --ink: #F2F2F7;
    --ink-soft: #D5DCE8;
    --ink-muted: #BAC5D8;
    --line: #284573;
    --accent: #9CCBFF;
    --accent-ink: #0A1A3F;
    --brand: #8FB4FF;
    --tint: #10284F;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1A3F;
  --card: #132A52;
  --ink: #F2F2F7;
  --ink-soft: #D5DCE8;
  --ink-muted: #BAC5D8;
  --line: #284573;
  --accent: #9CCBFF;
  --accent-ink: #0A1A3F;
  --brand: #8FB4FF;
  --tint: #10284F;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
        "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  overflow-wrap: break-word;      /* 長網址不撐出水平捲軸 */
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* 頁首：手機上讓導覽自己占一列並可橫向捲動。
 * ⚠ 子項少了 shrink-0 / white-space:nowrap 會被壓成一字一行；只加那兩個又會把整頁撐出
 *   水平捲軸 —— 兩種壞法要一起解，所以 nav 自己 overflow-x:auto。（後台踩過，見 web-ux 技能） */
header.site {
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  padding: 1rem 0 0.75rem;
}
header.site .wrap { padding-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.brand {
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  text-decoration: none; flex: 0 0 auto; white-space: nowrap;
}
nav.site {
  display: flex; gap: 0.25rem; min-width: 0; width: 100%; order: 3;
  overflow-x: auto; margin: 0 -0.25rem; padding: 0 0.25rem;
}
@media (min-width: 30rem) { nav.site { width: auto; order: 2; margin-left: auto; } }

/* 外觀切換：跟 App 設定頁同一組字（自動／白色／黑色）。用 <details> 開合，不用 JS 也點得開；
 * theme.js 只負責記住選擇、套到 <html>、選完關起來。手機上排在品牌名右邊，桌機排在導覽最右。
 * 按鈕本身要有文字，不能只剩一個圖示（web-ux：手機沒有 hover，裸圖示等於沒說明）。 */
details.theme { position: relative; order: 2; margin-left: auto; flex: 0 0 auto; }
@media (min-width: 30rem) { details.theme { order: 3; margin-left: 0; } }
details.theme > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem; padding: 0.35rem 0.7rem;                /* 44px：年長者的手指要按得到 */
  border: 1px solid var(--line); border-radius: 0.5rem;
  color: var(--ink-soft); font-size: 1rem; white-space: nowrap; background: var(--card);
}
details.theme > summary::-webkit-details-marker { display: none; }
details.theme > summary:hover, details.theme[open] > summary { color: var(--ink); border-color: var(--ink-muted); }
details.theme > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.theme > summary svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 10; min-width: 9.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); padding: 0.3rem;
}
.theme-menu button {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  min-height: 2.75rem; padding: 0.45rem 0.8rem; border: 0; border-radius: 0.4rem;
  background: none; color: var(--ink); font: inherit; font-size: 1.0625rem; cursor: pointer;
}
.theme-menu button:hover { background: var(--bg); }
.theme-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.theme-menu button::before { content: ""; width: 1.1rem; flex: 0 0 auto; text-align: center; color: var(--accent); font-weight: 700; }
.theme-menu button[aria-checked="true"]::before { content: "✓"; }
nav.site a {
  flex: 0 0 auto; white-space: nowrap;
  padding: 0.35rem 0.6rem; border-radius: 0.4rem;
  color: var(--ink-soft); text-decoration: none; font-size: 1rem;
}
nav.site a:hover { background: var(--card); }
nav.site a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

h1 { font-size: 1.875rem; line-height: 1.35; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3125rem; line-height: 1.45; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
p, li { color: var(--ink-soft); }
li { margin: 0.35rem 0; }
ul { padding-left: 1.3rem; }
strong { color: var(--ink); }

a { color: var(--accent); }
a:focus-visible, nav.site a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lede { font-size: 1.0625rem; color: var(--ink-soft); }
.meta { font-size: 0.9375rem; color: var(--ink-muted); }   /* 15px，年長者可讀的下限 */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 1.25rem 1.25rem 1rem; margin: 1.5rem 0;
}
.card h2, .card h3 { margin-top: 0; }
.card > :first-child { margin-top: 0; }   /* 卡片只放一段（例如條款第九章的信箱）時，段落的上間距會跟卡片內距疊成一大塊空白 */
.card :last-child { margin-bottom: 0; }

/* 表格在窄畫面自己捲，不要讓 body 出現水平捲軸 */
.table-scroll { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 24rem; font-size: 1rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; background: var(--card); }
td { color: var(--ink-soft); }

footer.site {
  border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem;
  font-size: 0.9375rem; color: var(--ink-muted);
}
footer.site a { color: var(--ink-muted); }
footer.site p { color: var(--ink-muted); margin: 0.35rem 0; }

/* 內嵌模式（?embed=1，App 內建瀏覽器用，見 theme.js）：藏掉站台導覽與頁尾，只留內文 */
html.embed header.site,
html.embed footer.site { display: none; }
html.embed main.wrap { padding-top: 1rem; }

.toc { font-size: 1rem; }
.toc ol { padding-left: 1.4rem; margin: 0.5rem 0 0; }

.email { font-size: 1.125rem; }

/* 宣傳圖：手機上橫向捲動的長條。
 * 圖是 853×1844 的直式圖，三張並排在窄畫面塞不下 —— 讓這一條自己捲，
 * 而不是縮到看不清楚，也不可以讓 body 出現水平捲軸。
 * img 一定要寫 width/height 屬性：沒有的話載入時版面會跳動（CLS）。 */

/* ---- 首頁（一頁式宣傳） ---- */
.ai { color: var(--brand); }
/* 開頭色帶：App 圖示的藍（加深，白字才到 7:1；不用紫色，使用者 2026-10-24）＋青色光暈＋白色四芒星。整頁只有這裡用大面積色彩。 */
header.site + .hero { margin-top: -2rem; }
.hero {
  position: relative; overflow: hidden; text-align: center; color: #FFFFFF;
  padding: 3.5rem 0 3.25rem; margin-bottom: 2rem;
  background:
    radial-gradient(circle at 50% 36%, rgba(34, 195, 230, 0.18), transparent 58%),
    linear-gradient(135deg, #1740B4 0%, #0A2878 100%);
  /* 光暈在 ::before 另外疊一層做呼吸（減少動態效果時沒有這層，靠上面那一份） */
}
.hero .sparkle {
  position: absolute; left: 50%; top: 50%; width: 16rem; height: 16rem;
  transform: translate(-50%, -54%); color: rgba(255, 255, 255, 0.16);
}
.hero .wrap { position: relative; padding-bottom: 0; }
.hero h1 { font-size: 3.25rem; line-height: 1.15; color: #FFFFFF; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.hero .ai { color: #A6EBF9; }
.hero .lede { color: #FFFFFF; font-size: 1.25rem; margin: 0; }
.features { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }
.features .card { margin: 0; }
.features h3 { font-size: 1.125rem; margin: 0 0 0.375rem; display: flex; align-items: center; gap: 0.5rem; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; color: #FFFFFF;
  background: linear-gradient(135deg, #2E62F0, #1580B8);
}
.chip svg { width: 1.125rem; height: 1.125rem; }

/* 教學區塊的淡藍底：手機上滿版，寬螢幕是圓角塊 */
.band { background: var(--tint); margin: 2.5rem -1.25rem 0; padding: 0.25rem 1.25rem 0.75rem; }
.band h2 { margin-top: 1.5rem; }
@media (min-width: 48rem) { .band { border-radius: 1.5rem; } }
.features p { margin: 0; color: var(--ink-soft); }
.tool-list { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--ink-soft); }

/* 左右滑動的區塊（教學影片、App 截圖）。不加 JavaScript，靠 scroll-snap。 */
.carousel {
  display: flex; gap: 0.875rem; overflow-x: auto;
  margin: 1rem -1.25rem 0.5rem; padding: 0.25rem 1.25rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel figure { flex: 0 0 auto; margin: 0; scroll-snap-align: center; width: 15rem; }
.carousel img, .carousel video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 1.5rem; background: var(--card);
}
.carousel figcaption { font-size: 0.9375rem; color: var(--ink-muted); text-align: center; margin-top: 0.5rem; }
.carousel figure.landscape { width: min(26rem, 85vw); }
.carousel figure.unfolded { width: min(19rem, 70vw); }
.carousel figure.landscape img, .carousel figure.unfolded img { border-radius: 1rem; }
@media (min-width: 48rem) { .carousel figure { width: 13rem; } .carousel figure.landscape { width: 23rem; } .carousel figure.unfolded { width: 17rem; } }
.notes { font-size: 0.9375rem; color: var(--ink-muted); margin-top: 2.5rem; padding-left: 0; list-style: none; }
.notes li { margin: 0.25rem 0; }
.notes sup { margin-right: 0.25rem; }
/* 註解上標：小字、可點，點了跳到頁面下方對應的註解 */
sup.fn { font-size: 0.65em; margin-left: 0.125rem; }
sup.fn a { color: inherit; text-decoration: none; }

/* ---- 動態效果（系統要求減少動態效果時全部不播） ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 開頭：四芒星慢慢閃爍、微轉；光暈呼吸 */
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 36%, rgba(34, 195, 230, 0.18), transparent 58%);
    animation: glow 6s ease-in-out infinite;
  }
  .hero .sparkle { animation: twinkle 7s ease-in-out infinite; }
  /* 開頭標題進場：載入時播一次 */
  .hero h1, .hero .lede { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .lede { animation-delay: 0.15s; }

  /* 捲到才浮現：只有 theme.js 標了 html.motion 才先藏；site.js 沒載入時 4 秒後照樣顯示 */
  html.motion .reveal { opacity: 0; transform: translateY(1.25rem); animation: show 0s 4s forwards; }
  html.motion .reveal.shown {
    opacity: 1; transform: none; animation: none;
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .features .reveal:nth-child(2) { transition-delay: 0.08s; }
  .features .reveal:nth-child(3) { transition-delay: 0.16s; }
  .features .reveal:nth-child(4) { transition-delay: 0.24s; }
  .features .reveal:nth-child(5) { transition-delay: 0.32s; }
}
@keyframes glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes twinkle {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -54%) rotate(0deg) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -54%) rotate(12deg) scale(1.06); }
}
@keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes show { to { opacity: 1; transform: none; } }