/* site.css — 公開頁與會員頁的共用設計基礎(2026-09-17、網站重整階段 2)
 *
 * 由「逐頁一字不差重複」的樣式抽出來:14 個獨立頁各自帶著同一份色票、字體、頁首標誌、
 * 按鈕、頁尾規則,改一個顏色要改十四遍。抽取條件很保守:
 *   - 規則本文在 5 頁以上**完全相同**,且在每一頁裡該選擇器只出現一次(搬走不改變層疊結果);
 *   - 設計變數的值在 8 頁以上相同。
 * 各頁仍可在自己的 <style>(載入順序在本檔之後)覆寫,產品色(OCCASIO 藍、放貸綠)就是這樣保留的。
 */

:root {
  /* 2026-09-25 全站單一深色(深夜藍底、品牌金不變);淺色色票已移除(頁首本來就永遠深色、Chrome 強制深色淺底無解) */
  --bg: #0b1020;
  --bg-2: #111a2e;
  --paper: #131c31;
  --blue: #60a5fa;
  --brand: #d4af37;
  --brand-2: #e8c878;
  --brand-3: #e6c477;
  --brand-soft: #d4af3722;
  --gain: #2dc97a;
  --gain-soft: #2dc97a1a;
  --ink: #f3efe4;
  --ink-2: #cfc7b2;
  --ink-3: #8f8a7c;
  --ink-4: #5a5f6e;
  --loss: #ff6453;
  --loss-soft: #ff64531a;
  --rule: #f3efe424;
  --num: "JetBrains Mono", "Noto Sans TC", "Inter", ui-monospace, monospace;
  --tech: "Audiowide", "Oswald", "Noto Sans TC", sans-serif;
  --sans: "Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --max-w: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
}

html { color-scheme: dark; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; height: auto; display: block; }

.brand .word { font-family: var(--tech); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.05em; line-height: 1; display: inline-flex; gap: 4px; }

.brand .word .word-occa { color: var(--blue); animation: brand-glow 4s ease-in-out infinite 2s; }

.brand .word .word-per { color: var(--brand); animation: brand-glow 4s ease-in-out infinite; }

.brand .word .word-yv { color: #2dc97a; filter: drop-shadow(0 0 6px rgba(45,201,122,0.25)); animation: brand-glow 4s ease-in-out infinite 1s; }

.brand .word em { font-style: normal; }

.foot a { font-size: 14px; color: var(--ink-2); }

.foot a:hover { color: var(--brand); }

.foot h4 { font-family: var(--num); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }

.foot li { padding: 6px 0; }

.foot ul { list-style: none; padding: 0; margin: 0; }

.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(20px, 4vw, 48px); margin-bottom: 48px; }

.foot-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

.foot-legal { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--num); font-size: 11.5px; color: var(--ink-3); }

.nowrap { white-space: nowrap; }

.section + .section { border-top: 1px solid var(--rule); }

.section h2 .accent { color: var(--brand); }

.section-sub b { color: var(--ink); font-weight: 700; }

.shell { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }

/* ── Mobile baseline + targeted fixes ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Mobile baseline ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@keyframes brand-glow {
0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50%      { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 2px currentColor); }
}

section[id] { scroll-margin-top: 96px; }