/* ============================================================
   拍拍毛孩 PawSnap — Landing Page
   設計 token 對齊 docs/07-design-spec.md §1
   手機優先（375px 起），深色模式跟隨系統
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* brand */
  --paw-coral: #FF7757;
  --paw-coral-pressed: #E5603F;
  --calm-teal: #2E9E8F;
  --soft-cream: #FBF6EF;
  /* neutral */
  --bg-primary: #FBF9F6;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3EFE9;
  --text-primary: #2B2520;
  --text-secondary: #6E6660;
  --text-tertiary: #A39B93;
  --separator: #E8E2DA;
  /* semantic */
  --danger: #D93B3B;
  --safe: #2E8B57;
  --safe-bg: #E9F4ED;
  /* 衍生：插畫用淡色塊 */
  --coral-soft: #FFE3DA;
  --teal-soft: #DCF0EC;
  /* radius（spec §1.4） */
  --r-chip: 8px;
  --r-field: 12px;
  --r-card: 16px;
  --r-sheet: 24px;
  --r-round: 999px;
  /* spacing 4pt 網格 */
  --sp-s: 8px;
  --sp-m: 12px;
  --sp-l: 16px;   /* 頁面左右邊距標準值 */
  --sp-xl: 24px;
  --sp-xxl: 32px;
  /* shadow */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 6px 16px rgba(255, 119, 87, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paw-coral: #FF8A6E;
    --paw-coral-pressed: #FF9D85;
    --calm-teal: #4DB8A8;
    --soft-cream: #211E1A;
    --bg-primary: #171513;
    --bg-secondary: #23211E;
    --bg-tertiary: #2E2B27;
    --text-primary: #F2EDE7;
    --text-secondary: #A8A19A;
    --text-tertiary: #6B655F;
    --separator: #3A3631;
    --danger: #FF6B5E;
    --safe: #52C77E;
    --safe-bg: #1C2F24;
    --coral-soft: #4A2B22;
    --teal-soft: #1E332F;
    /* Dark 模式卡片改弱陰影＋描邊（spec §1.4） */
    --shadow-card: 0 0 0 1px var(--bg-tertiary);
    --shadow-floating: 0 6px 16px rgba(255, 138, 110, 0.2);
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  /* 系統字 stack＋PingFang TC，思源黑體（Noto Sans TC）fallback，不載第三方字體 */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro TC", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65; /* 繁中行距偏緊，整體放寬（spec §1.3） */
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

h1, h2 { line-height: 1.35; letter-spacing: 0.01em; }
p { margin: 0 0 0.8em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- CTA 按鈕 ---------- */
.cta-primary {
  display: block;
  width: 100%;
  min-height: 52px;                /* 實作備註 1：行動版 CTA ≥ 52px */
  padding: 14px var(--sp-xl);
  border: none;
  border-radius: var(--r-round);   /* 主 CTA 膠囊 */
  background: var(--paw-coral);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-floating);
  transition: background 0.2s ease-out, transform 0.2s ease-out;
}
.cta-primary:active {
  background: var(--paw-coral-pressed);
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-block;
  padding: 10px var(--sp-l);
  border: 1.5px solid var(--paw-coral);
  border-radius: var(--r-round);
  background: transparent;
  color: var(--paw-coral);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease-out;
}
.btn-secondary:active { background: var(--coral-soft); }

/* ---------- 1. Hero ---------- */
.hero {
  background: var(--soft-cream);
  padding: max(var(--sp-xxl), env(safe-area-inset-top)) var(--sp-l) var(--sp-xxl);
  text-align: center;
}
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--calm-teal);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-l);
}
.hero h1 {
  font-size: 34px;                 /* 行動版 ≥ 32px（實作備註 1） */
  font-weight: 800;
  margin: 0 0 var(--sp-l);
}
.hero .subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 auto var(--sp-xl);
  max-width: 34em;
}
.hero .cta-primary { max-width: 360px; margin: 0 auto; }
.cta-note {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: var(--sp-m) 0 0;
}
.hero-visual {
  margin: var(--sp-xl) auto 0;
  max-width: 420px;
}
.hero-visual svg { width: 100%; height: auto; display: block; }

/* ---------- SVG 插畫共用 class（單線手繪風） ---------- */
.ink, .dog, .cat { stroke: var(--text-primary); }
.stroke-coral { stroke: var(--paw-coral); }
.stroke-teal { stroke: var(--calm-teal); }
.stroke-ink { stroke: var(--text-primary); }
.stroke-white { stroke: #FFFFFF; }
.fill-coral { fill: var(--coral-soft); stroke: var(--paw-coral); }
.fill-teal { fill: var(--teal-soft); stroke: var(--calm-teal); }
.fill-coral-soft { fill: var(--coral-soft); }
.fill-teal-soft { fill: var(--teal-soft); }
.fill-cream { fill: var(--bg-secondary); }
.fill-card { fill: var(--bg-secondary); }
.dot { fill: var(--text-primary); stroke: none; }
.paws circle { fill: var(--paw-coral); opacity: 0.4; }

/* ---------- 2. 共鳴橋段（窄欄、引號體） ---------- */
.empathy {
  padding: var(--sp-xxl) var(--sp-l);
}
.empathy blockquote {
  max-width: 30em;
  margin: 0 auto;
  padding-left: var(--sp-l);
  border-left: 3px solid var(--paw-coral);
  color: var(--text-secondary);
}
.empathy-quote {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---------- 3. 三大賣點 ---------- */
.features {
  display: grid;
  grid-template-columns: 1fr;      /* 行動版直排 */
  gap: var(--sp-l);
  padding: var(--sp-l);
  max-width: 1080px;
  margin: 0 auto;
}
.feature {
  background: var(--bg-secondary);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
}
.feature-icon { width: 64px; height: 64px; margin-bottom: var(--sp-m); }
.feature-icon svg { width: 100%; height: 100%; }
.feature h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--sp-m);
}
.feature p { color: var(--text-secondary); font-size: 16px; }
.feature strong { color: var(--text-primary); }
.disclaimer {
  font-size: 12px !important;
  color: var(--text-tertiary) !important;
  background: var(--bg-tertiary);
  border-radius: var(--r-chip);
  padding: var(--sp-s) var(--sp-m);
  margin-bottom: 0 !important;
}

/* ---------- 4. 信任補強帶 ---------- */
.trust-bar {
  background: var(--safe-bg);
  color: var(--safe);
  text-align: center;
  padding: var(--sp-l);
  margin: var(--sp-xl) 0;
}
.trust-bar p { margin: 0; font-size: 15px; font-weight: 500; max-width: 40em; margin-inline: auto; }

/* ---------- 5. 創始會員 ---------- */
.founders-offer {
  background: var(--soft-cream);
  border-radius: var(--r-sheet);
  max-width: 680px;
  margin: var(--sp-xl) var(--sp-l);
  padding: var(--sp-xxl) var(--sp-xl);
}
.founders-offer h2 { font-size: 26px; margin: 0 0 var(--sp-l); }
.founders-offer p { color: var(--text-secondary); }
.founders-offer .price {
  color: var(--paw-coral);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.price-original { font-size: 14px; color: var(--text-tertiary); }
.slots-counter {
  display: inline-block;
  background: var(--bg-tertiary);
  border-radius: var(--r-chip);
  padding: 6px var(--sp-m);
  font-size: 14px;
  font-weight: 600;
}
#slots-remaining { color: var(--paw-coral); font-variant-numeric: tabular-nums; }
.benefits {
  list-style: none;
  padding: 0;
  margin: var(--sp-l) 0 var(--sp-xl);
  display: grid;
  gap: var(--sp-m);
}
.benefits li {
  background: var(--bg-secondary);
  border-radius: var(--r-field);
  box-shadow: var(--shadow-card);
  padding: var(--sp-m) var(--sp-l);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- 6. FAQ（手風琴） ---------- */
.faq {
  max-width: 680px;
  margin: var(--sp-xxl) auto;
  padding: 0 var(--sp-l);
}
.faq h2 { font-size: 26px; text-align: center; margin-bottom: var(--sp-xl); }
.faq details {
  background: var(--bg-secondary);
  border-radius: var(--r-field);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-m);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-l);
  font-weight: 600;
  font-size: 16px;
  position: relative;
  padding-right: 44px;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  position: absolute;
  right: var(--sp-l);
  top: 50%;
  transform: translateY(-50%);
  color: var(--paw-coral);
  font-weight: 700;
  transition: transform 0.2s ease-out;
}
.faq details[open] summary::after { content: "－"; }
.faq details p {
  margin: 0;
  padding: 0 var(--sp-l) var(--sp-l);
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- 7. 報名表單 ---------- */
.signup {
  max-width: 480px;
  margin: var(--sp-xxl) auto;
  padding: 0 var(--sp-l);
  text-align: center;
  scroll-margin-top: var(--sp-xl);
}
.signup h2 { font-size: 26px; margin-bottom: var(--sp-m); }
.signup > p { color: var(--text-secondary); margin-bottom: var(--sp-xl); }

#waitlist-form input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--sp-l);
  border: 1.5px solid var(--separator);
  border-radius: var(--r-field);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 17px;
  font-family: inherit;
}
#waitlist-form input[type="email"]::placeholder { color: var(--text-tertiary); }
#waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--paw-coral);
}
#waitlist-form input[type="email"].invalid { border-color: var(--danger); }

#waitlist-form fieldset {
  border: none;
  margin: var(--sp-xl) 0;
  padding: 0;
  text-align: left;
}
#waitlist-form legend {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: var(--sp-m);
  padding: 0;
}
.wish-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-s);
}
.wish-options label {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  background: var(--bg-secondary);
  border: 1.5px solid var(--separator);
  border-radius: var(--r-field);
  padding: var(--sp-m);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease-out, background 0.2s ease-out;
}
.wish-options label:has(input:checked) {
  border-color: var(--paw-coral);
  background: var(--coral-soft);
}
.wish-options input { accent-color: var(--paw-coral); margin: 0; }

.form-error {
  color: var(--danger);
  font-size: 14px;
  margin: var(--sp-s) 0 0;
  text-align: left;
}

#submit-btn[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- 成功態 ---------- */
.success {
  background: var(--safe-bg);
  border-radius: var(--r-card);
  padding: var(--sp-xl);
  text-align: left;
}
.success-title { font-size: 20px; font-weight: 700; color: var(--safe); }
.success hr { border: none; border-top: 1px solid var(--separator); margin: var(--sp-l) 0; }
.referral-box {
  display: flex;
  gap: var(--sp-s);
  margin: var(--sp-l) 0 var(--sp-m);
}
.referral-box input {
  flex: 1;
  min-width: 0;
  padding: 10px var(--sp-m);
  border: 1.5px solid var(--separator);
  border-radius: var(--r-field);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.referral-box .btn-secondary { flex-shrink: 0; }
.share-row { display: flex; gap: var(--sp-s); }
.share-row .btn-secondary { flex: 1; }

/* ---------- 8. Footer ---------- */
.site-footer {
  background: var(--bg-tertiary);
  text-align: center;
  padding: var(--sp-xxl) var(--sp-l) max(var(--sp-xxl), env(safe-area-inset-bottom));
  margin-top: var(--sp-xxl);
  font-size: 14px;
  color: var(--text-secondary);
}
.site-footer .legal { font-size: 12px; color: var(--text-tertiary); }
.site-footer nav { margin-top: var(--sp-m); }
.site-footer a { color: var(--text-secondary); }

/* ============================================================
   桌機版（≥ 768px）
   ============================================================ */
@media (min-width: 768px) {
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .hero h1 { font-size: 48px; }
  .hero .subtitle { font-size: 18px; }
  .hero .cta-primary { width: auto; min-width: 280px; display: inline-block; }

  .features {
    grid-template-columns: repeat(3, 1fr); /* 桌機三欄 */
    gap: var(--sp-xl);
    padding: var(--sp-xl);
  }

  .founders-offer {
    margin-inline: auto;
    padding: 48px;
    text-align: center;
  }
  .founders-offer .benefits { text-align: left; }
  .founders-offer .cta-primary { width: auto; min-width: 320px; display: inline-block; }

  .signup .cta-primary { max-width: 360px; margin-inline: auto; }
}

/* 動效尊重使用者設定 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ============================================================
   Cookie 同意條（GA4，main.js 控制顯示）
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: var(--sp-md, 16px);
  right: var(--sp-md, 16px);
  bottom: var(--sp-md, 16px);
  z-index: 100;
  background: var(--bg-secondary);
  border: 1px solid var(--separator);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(43, 37, 32, 0.14);
  padding: var(--sp-md, 16px);
}
.cookie-consent p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-consent-actions .cta-primary.consent-accept {
  width: auto;
  min-width: 96px;
  padding: 10px 20px;
  min-height: 0;
}
@media (min-width: 768px) {
  .cookie-consent {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
  }
}