/* ============================================================
   優妃思 · 全站設計 token（色票／字體／間距／基礎元件）
   全部收斂在 .ufans-ai-page 底下，避免與 Flatsome 同名 class 互撞
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   優妃思 · AI 顧問頁
   來源：Claude Design「UFans 首頁互動設計」畫板 2b（桌機）+ 3a（手機）
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 底與紙 */
  --bg:        #FDF8F5;
  --surface:   #FFFFFF;
  --surface-2: #FFF4EF;
  --line:      #F0E2DA;
  --line-2:    #FFD8C6;

  /* 字 */
  --ink:   #241820;
  --ink-2: #5A4750;
  --ink-3: #6B5560;
  --muted: #A08894;

  /* 品牌 */
  --orange: #FF7A4D;
  --pink:   #FF6B9D;
  --rose:   #E04F82;
  --amber:  #D99417;
  --grad:   linear-gradient(100deg, #FF7A4D, #FF6B9D);

  /* 深色帶 */
  --dark-a: #241820;
  --dark-b: #3A2530;

  --sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Space Grotesk", "Noto Sans TC", system-ui, sans-serif;

  --pad: clamp(1.25rem, 4vw, 3.25rem);
  --radius: 18px;
}

.ufans-ai-page *{ box-sizing: border-box; }

body.ufans-ai-page{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* 不設 overflow-x：一軸非 visible 時另一軸會被算成 auto，
     body 會自己變成捲動容器，window 捲動與 sticky 都會失常 */
}

.ufans-ai-page a{ color: inherit; text-decoration: none; }
.ufans-ai-page img, .ufans-ai-page svg{ max-width: 100%; }

.ufans-ai-page :where(a, .ufans-ai-page button):focus-visible{
  outline: 2px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

.ufans-ai-page .wrap{ width: min(100% - 2rem, 1180px); margin-inline: auto; }

.ufans-ai-page .eyebrow{
  font-family: var(--display);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .16em;
  color: var(--rose);
  margin: 0;
}

.ufans-ai-page h1, .ufans-ai-page h2, .ufans-ai-page h3{ text-wrap: balance; margin: 0; }