/* ── 手寫的自訂樣式 ── */

/* 正能量 energys —— 溫暖奶油風
   參考 The Coffee Movement 的調性：奶油底、深咖啡文字、焦糖強調色，
   大量留白、圓潤、乾淨。原本是深色霓虹綠的重磅風格，整組換掉。
   2026-09-05 重新設計。 */

:root{
  /* 底：溫暖的奶油白，不是純白，才有紙感與溫度 */
  --bg:#FBF7F2;
  --surface:#FFFFFF;

  /* 字：深咖啡棕。純黑在奶油底上會太銳利、有距離感 */
  --ink:#2C1810;
  --ink-2:#5A4438;
  --ink-3:#8B7565;
  --ink-4:#A89684;

  /* 線：比底色再深一階的暖灰，收邊用，不要搶戲 */
  --line:#EBE1D6;
  --line-2:#F3EBE2;

  /* 圓角放大 —— 圓潤是這個風格的骨架 */
  --r:20px;
  --r-sm:14px;

  /* 強調色：焦糖。整組色階都往暖的方向調 */
  --o-500:#A9714B;
  --o-600:#8B5A3C;
  --o-400:#C08E68;
  --o-300:#D9B295;
  --o-200:#EFDFD1;
  --o-100:#F6ECE2;
  --o-50:#FBF5EF;
}

/* ── 字體 ──
   全站思源黑體（Noto Sans TC）。標題 900（粗黑體）、內文 400（Regular）。
   價格、總金額、按鈕維持 700 —— 那是功能性強調，掉到 400 會像壞掉，不算內文。 */
body{
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-weight:400;
}
body,p,li,dd,dt,label,.tagline,.plan-feats li,
.disclaimer,.copyright,.fineprint,.fld > span{
  font-weight:400;
}

/* ── 背景裝飾 ──
   原本是深色底上的霓虹光球與斜線網格，在奶油底上會變髒。
   改成兩團極淡的暖色光暈，只是讓大片留白不要死板。 */
.slash{display:none}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.55}
.o1{width:380px;height:380px;top:-120px;right:-80px;background:rgba(216,178,149,.45)}
.o2{width:320px;height:320px;bottom:4%;left:-110px;background:rgba(233,214,190,.5)}
.sheet{position:relative;z-index:1}

/* ── 品牌區 ──
   留白給足，標題不再是全大寫的重磅字，改成有份量但溫和的樣子。 */
.brand{padding-top:34px;padding-bottom:8px}

/* 跑馬燈：原本是螢光綠的粗框，改成細細的一條暖線，安靜很多 */
.ticker{
  overflow:hidden;white-space:nowrap;margin-bottom:26px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:9px 0;
}
.ticker span{
  display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.3em;color:var(--o-500);text-transform:uppercase;
  animation:slide 26s linear infinite;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker span{animation:none}}

/* 頭像：圓形、焦糖漸層、柔和的暖色投影（原本是方形歪斜 + 硬邊陰影） */
.avatar{
  border-radius:50%;transform:none;
  background:linear-gradient(140deg,var(--o-300),var(--o-500));
  box-shadow:0 10px 28px rgba(139,90,60,.22);
}
.avatar span{transform:none}
.avatar img{border-radius:50%}

.brand h1{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(34px,9vw,46px);
  font-weight:900;letter-spacing:-.01em;line-height:1.15;
  text-transform:none;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--ink);
}
.tagline{
  font-weight:500;letter-spacing:.14em;font-size:12px;
  text-transform:none;color:var(--ink-3);margin-top:8px;
}

/* ── 區塊標題 ──
   原本是粗底線 + 全大寫，改成細線 + 一般字重，讓版面安靜下來 */
.block{margin-bottom:34px}
.block-head{border-bottom:1px solid var(--line);padding-bottom:10px}
.block-head h2{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:19px;font-weight:900;letter-spacing:0;text-transform:none;color:var(--ink);
}
.more-link{
  font-weight:600;letter-spacing:.04em;font-size:12.5px;
  text-transform:none;color:var(--o-600);
}

/* ── 方案卡 ──
   白底、圓角、極淡的暖色陰影。原本的歪斜與硬邊位移陰影全部拿掉。 */
.plan{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transform:none;
  box-shadow:0 2px 10px rgba(90,68,56,.05);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.plan > *{transform:none}
.plan:hover{
  border-color:var(--o-300);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(90,68,56,.10);
}
.plan.on{
  border-color:var(--o-500);
  background:var(--surface);
  box-shadow:0 0 0 1px var(--o-500), 0 12px 30px rgba(139,90,60,.14);
}
.plan-name{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:19px;font-weight:900;letter-spacing:0;color:var(--ink);
}
.plan-price b{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:29px;font-weight:700;letter-spacing:-.01em;color:var(--o-600);
}
.plan-tag{
  background:var(--o-500);color:#fff;
  font-weight:700;font-size:11px;letter-spacing:.06em;
  border-radius:999px;transform:none;padding:4px 11px;
}
.plan-feats li::before{content:"·";color:var(--o-500);font-weight:900}
.tick{border-radius:50%;border-width:2px}

/* ── 付款方式與表單 ── */
.pay{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .18s, box-shadow .18s;
}
.pay.on{
  border-color:var(--o-500);
  background:var(--o-50);
  box-shadow:0 0 0 1px var(--o-500);
}
.fld > span{
  font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:none;color:var(--ink-2);
}
.fld input,.fld textarea,.fld select{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink);font-weight:500;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4);font-weight:400}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  border-color:var(--o-500);
  box-shadow:0 0 0 3px rgba(169,113,75,.14);
}

/* ── 底部結帳列 ──
   奶油色的霧面玻璃，上面一條細線，不要粗框。 */
.checkout{
  background:rgba(251,247,242,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.total b{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:29px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}

/* 主要行動按鈕（「讓願望成真」那顆）：焦糖漸層、全圓角、柔和暖影 */
.pay-btn{
  background:linear-gradient(135deg,var(--o-500),var(--o-600));
  color:#fff;
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:16.5px;font-weight:700;letter-spacing:.06em;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(139,90,60,.28);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(139,90,60,.34);
  filter:brightness(1.04);
}
.pay-btn:active{transform:translateY(0)}
.pay-btn:disabled{background:var(--o-200);color:var(--ink-4);box-shadow:none}

/* ── 其他零件 ── */
.line-box{
  background:var(--o-50);
  border:1px solid var(--o-200);
  border-radius:var(--r-sm);
}
.sk{background:linear-gradient(90deg,#F3EBE2,#FAF5EF,#F3EBE2)}
.toast{
  background:var(--ink);color:#FBF7F2;
  border:none;border-radius:999px;font-weight:600;
  box-shadow:0 8px 24px rgba(44,24,16,.25);
}
.disclaimer,.copyright,.fineprint{color:var(--ink-4);line-height:1.8}

/* footer 與底部說明：跟整體同一個溫度，不要突然變冷灰 */
.footer{background:transparent;border-top:1px solid var(--line);margin-top:8px}
.footer .copyright{color:var(--ink-4)}

/* ── 訂單頁／付款頁 ──
   客人結帳走過去不會突然換皮，同一套奶油＋焦糖。 */
.result-page{background:var(--bg)}
.result-card,.bank-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 4px 18px rgba(90,68,56,.06);
}
.bank-box{background:var(--o-50);border-color:var(--o-200)}
.bank-box h4{color:var(--o-600)}
.result-card h1{
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  font-weight:900;color:var(--ink);
}
.kv-row.total dd{color:var(--o-600)}
.nav{background:rgba(251,247,242,.92);border-bottom:1px solid var(--line)}
.logo-mark{
  background:linear-gradient(140deg,var(--o-300),var(--o-500));
  box-shadow:0 6px 16px rgba(139,90,60,.2);
}
.btn-primary{
  background:linear-gradient(135deg,var(--o-500),var(--o-600));
  color:#fff;border-radius:999px;
  box-shadow:0 8px 22px rgba(139,90,60,.26);
}
.btn-ghost{
  background:var(--surface);color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;
}
.badge-status{border-radius:999px}