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

:root{
  --bg:#F7F5EE; --surface:#FFFDF6; --ink:#2E2A24; --ink-2:#5B5348; --ink-3:#8A8073;
  --line:#DFD8C8; --line-2:#EDE8DC; --r:4px; --r-sm:3px;
  --o-500:#D4622A; --o-600:#B44F1E; --o-400:#E88B5A; --o-300:#F0AE87;
  --o-200:#F7D3BE; --o-100:#FBE7DA; --o-50:#FDF3EC;
}
body{
  background:var(--bg);
  /* 方格紙 */
  background-image:
    linear-gradient(rgba(70,90,120,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,90,120,.07) 1px, transparent 1px);
  background-size:24px 24px;
}
/* 左邊的紅色頁邊線 */
.paper-edge{position:fixed;left:max(18px,calc(50% - 260px));top:0;bottom:0;width:1.5px;
  background:rgba(200,70,70,.35);pointer-events:none;z-index:0}
/* 紙膠帶 */
.tape{position:fixed;width:104px;height:30px;background:rgba(226,205,150,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.08);pointer-events:none;z-index:1}
.tape-1{top:-8px;left:14%;transform:rotate(-4deg)}
.tape-2{top:-10px;right:12%;transform:rotate(3deg)}
.sheet{position:relative;z-index:2}

.brand h1{font-family:"Gochi Hand",cursive;font-size:clamp(34px,9vw,46px);font-weight:400;letter-spacing:.02em}
.tagline{font-family:"Gochi Hand",cursive;font-size:17px;color:var(--ink-3)}
.scribble{color:var(--o-500);max-width:190px;margin:6px auto 0;opacity:.75}
.scribble svg{width:100%;display:block}
.avatar{background:transparent;border:2px dashed var(--line);box-shadow:none;border-radius:8px}

.block-head h2{font-family:"Gochi Hand",cursive;font-size:22px;font-weight:400}
.block-head{border-bottom:1.5px dashed var(--line);padding-bottom:6px}
.more-link{font-family:"Gochi Hand",cursive;font-size:15px}

/* 方案 = 便利貼 */
.plan{
  background:#FFF9D6;border:none;border-radius:2px;
  box-shadow:2px 3px 8px rgba(46,42,36,.10);
  transform:rotate(-.5deg);
}
.plan:nth-child(2n){background:#E8F6E0;transform:rotate(.6deg)}
.plan:nth-child(3n){background:#E4F0FA;transform:rotate(-.3deg)}
.plan:hover{transform:rotate(0deg) translateY(-2px);box-shadow:3px 5px 14px rgba(46,42,36,.16)}
.plan.on{box-shadow:0 0 0 2px var(--o-500), 3px 5px 14px rgba(212,98,42,.2);transform:rotate(0deg)}
.plan-name{font-family:"Gochi Hand",cursive;font-size:20px;font-weight:400}
.plan-price b{font-family:"Gochi Hand",cursive;font-weight:400}
.plan-tag{background:var(--o-500);color:#fff;border-radius:2px;transform:rotate(-3deg);font-family:"Gochi Hand",cursive}
.plan-feats li::before{content:"✓";color:var(--o-500);font-family:"Gochi Hand",cursive}

.pay{background:var(--surface);border:1.5px solid var(--line);border-radius:3px}
.pay.on{border-color:var(--o-500);background:#FFF9D6}

.fld > span{font-family:"Gochi Hand",cursive;font-size:16px}
.fld input,.fld textarea,.fld select{
  background:transparent;border:none;border-bottom:1.5px solid var(--line);border-radius:0;padding-left:2px;
}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  border-bottom-color:var(--o-500);box-shadow:none;background:rgba(255,249,214,.5)
}

.checkout{background:rgba(247,245,238,.96);border-top:1.5px dashed var(--line)}
.total b{font-family:"Gochi Hand",cursive}
.pay-btn{
  background:var(--ink);color:#FFF9D6;border-radius:3px;
  font-family:"Gochi Hand",cursive;font-size:20px;font-weight:400;letter-spacing:.06em;
  box-shadow:2px 3px 0 var(--o-500);
}
.pay-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 var(--o-500)}
.disclaimer,.copyright,.fineprint{font-family:"Gochi Hand",cursive;font-size:14px;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════
   數字改用標準字型（2026-09-07）

   這間店整體是手寫筆記風，用的是 Gochi Hand。
   問題出在它的數字：0/6/8/9 的字腔很小、3 和 5 的上半部幾乎一樣，
   價格一多位數就認不出來 —— 「NT$16,000」看起來像「NT$18,006」。
   文字看不清楚頂多重看一次，金額看錯是會下錯單的。

   所以拆成兩件事做：
     1. 純數字的元素（價格、總額、倒數、匯款帳號）直接換成系統標準字型
     2. 其餘夾在中文裡的零星數字，用 unicode-range 只換掉數字字形，
        文字部分照樣是手寫體，版面調性不變
   ══════════════════════════════════════════════════════════ */

/* 系統原生的無襯線字。刻意不指定 Google 字體 ——
   金額是最不能等的東西，網路慢或字體載入失敗時
   總不能讓客人先看到一串亂掉的價格。 */
:root{
  --num:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",
        "Roboto",Arial,"PingFang TC","Microsoft JhengHei",sans-serif;
}

/* ── 1. 純數字元素：整個換掉 ──
   tabular-nums 是等寬數字，金額對齊、跳動時不會左右晃。 */
.plan-price,
.plan-price b,
.plan-price b small,
.plan-was,
.total,
.total b,
.countdown .cd-time,
.kv-row dd,
.kv-row.total dd,
.copy-row b,
.summary-row.total b,
.bank-box .copy-row b{
  font-family:var(--num) !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  letter-spacing:0;
}
/* 手寫體是 400，換成標準字型後要補粗一點，
   不然同樣大小會顯得比原本輕、失去重點感 */
.plan-price b,.total b,.kv-row.total dd{font-weight:800}
.plan-price b small{font-weight:600}

/* 輸入框裡的手機、卡號後四碼、匯款帳號也要對齊好讀 */
.fld input,.fld textarea,.fld select{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ── 2. 夾在中文裡的零星數字 ──
   只把「數字與貨幣符號」這幾個碼位換成系統字型，其他字元不受影響。
   src 用 local()：吃使用者裝置上已經有的字，不多下載任何東西。
   萬一整組 local() 都沒命中，這個 @font-face 等於不存在，
   會自動退回後面的 Gochi Hand —— 就是現在的樣子，不會壞。 */
@font-face{
  font-family:'NumClear';
  src:local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),
      local('Segoe UI'),local('Roboto'),local('Noto Sans'),local('SF Pro Text');
  unicode-range:U+0024,U+0025,U+002B-002F,U+0030-0039,U+003A;
  font-display:swap;
}
/* 把 NumClear 插在 Gochi Hand 前面：
   數字命中 NumClear，中文與英文字母落到 Gochi Hand，兩者並存。 */
.brand h1,.tagline,.block-head h2,.more-link,
.plan-name,.plan-tag,.fld > span,.pay-btn,
.disclaimer,.copyright,.fineprint{
  font-family:'NumClear',"Gochi Hand",cursive;
}