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

/* ===== 小林：胡桃木紋 × 暖光書房 ===== */
:root{
  --bg:#241810;
  --ink:#f1e7d6; --ink-2:#d3c1a5; --ink-3:#a28d71; --ink-4:#6f5c47;
  --line:rgba(231,201,152,.16); --line-2:rgba(231,201,152,.09);
  --o-50:#1f1710; --o-100:#271d13; --o-200:#3e2e1d; --o-300:#7a5d39;
  --o-400:#c9a46a; --o-500:#d8b680; --o-600:#e6c994; --o-700:#f2e1c2;
  --brass:#c9a46a; --brass-2:#e6c994; --brass-d:#a07f4e;
  --panel:rgba(44,31,21,.54);
  --r:16px; --r-sm:11px;
  --font:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:"Noto Serif TC",Georgia,"Songti TC",serif;
}
body.shop-kobayashi{ background:#1c130c; background-image:none; color:var(--ink); }

/* 背景：胡桃木牆（板材 + 木紋 + 雜訊 + 暖光 + 暗角） */
.kb-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#1c130c}
.kb-wood{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,
    transparent 0 176px,
    rgba(16,10,5,.62) 176px 178px,
    rgba(150,115,70,.11) 178px 180px,
    transparent 180px 182px),
  repeating-linear-gradient(90.7deg,
    rgba(40,27,16,0) 0 3px, rgba(30,20,11,.3) 3px 4px,
    rgba(84,61,38,0) 4px 9px, rgba(98,73,46,.1) 9px 10px),
  radial-gradient(135% 82% at 60% 4%, #5d4329 0%, #412e1c 46%, #2a1c11 100%);}
.kb-grain{position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.035' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23w)'/></svg>");}
.kb-glow{position:absolute;inset:0;background:
  radial-gradient(60% 42% at 62% 2%, rgba(226,180,110,.2), transparent 64%);
  animation:kbGlow 14s ease-in-out infinite}
@keyframes kbGlow{0%{opacity:.75}50%{opacity:1}100%{opacity:.75}}
.kb-veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(26,17,10,.1) 0%, rgba(25,16,9,.4) 54%, rgba(23,15,9,.74) 86%, #1c130c 100%),
  radial-gradient(92% 62% at 50% 28%, transparent 50%, rgba(18,11,6,.5) 100%);}
@media (prefers-reduced-motion:reduce){ .kb-glow{animation:none} }

/* 品牌區 */
.brand{padding:50px 0 26px;text-align:center}
.kb-hero{display:flex;flex-direction:column;align-items:center}
.kb-eyebrow{font-size:10.5px;letter-spacing:.4em;color:var(--brass);font-weight:700;margin:0 0 18px;padding-left:.4em}
.avatar.kb-avatar{
  width:152px;height:152px;margin:0 auto;border-radius:50%;overflow:hidden;background:#2a1d12;
  border:1px solid rgba(231,201,152,.4);
  box-shadow:0 0 0 6px rgba(201,164,106,.07), 0 0 50px -10px rgba(201,164,106,.4), 0 26px 60px rgba(0,0,0,.62);}
.avatar.kb-avatar img{width:100%;height:100%;object-fit:cover;object-position:52% 16%}
.avatar.kb-avatar>span{font-size:56px}
#brandName,.brand h1{font-family:var(--serif);font-weight:900;font-size:46px;letter-spacing:.06em;margin-top:18px;line-height:1;
  color:#f5ecda;text-shadow:0 2px 26px rgba(201,164,106,.26)}
#tagline,.tagline{font-size:12px;color:var(--brass);font-weight:600;letter-spacing:.3em;margin-top:13px;padding-left:.3em}
.kb-rule{width:56px;height:1px;margin:22px auto 0;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.72}
#memberChip{margin-top:18px}

/* 區塊標題 */
.block-head h2{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.04em;display:flex;align-items:baseline;gap:10px}
.block-head h2 small{font-family:var(--font);font-size:9.5px;letter-spacing:.3em;color:var(--ink-4);font-weight:700}
.more-link{color:var(--brass)} .more-link:hover{color:var(--brass-2)}

/* 方案卡 */
.plans{gap:12px}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:border-color .22s, box-shadow .22s, transform .12s}
.plan::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.55}
.plan:hover{border-color:rgba(231,201,152,.42);transform:translateY(-1px)}
.plan.on{border-color:rgba(231,201,152,.62);box-shadow:inset 0 0 0 1px rgba(231,201,152,.38), 0 0 40px -10px rgba(201,164,106,.5)}
.plan.is-featured{border-color:rgba(231,201,152,.48)}
.plan.is-featured::before{height:2px;opacity:.9}
.plan-name{color:var(--ink);font-family:var(--serif);font-weight:700}
.plan-sub{color:var(--ink-3)}
.plan-price b{color:var(--brass-2)} .plan-price b small{color:var(--ink-3)}
.plan-was{color:var(--ink-4)}
.plan-tag{background:linear-gradient(135deg,var(--brass-d),var(--brass));color:#20160b}
.plan-feats li{color:var(--ink-2)} .plan-feats li::before{color:var(--brass)}
.tick{border-color:var(--ink-4)}
.plan.on .tick,.pay.on .tick{border-color:var(--brass);background:var(--brass)}
.plan.on .tick::after,.pay.on .tick::after{color:#20160b}

/* 付款方式 */
.pays{gap:10px}
.pay{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.pay:hover{border-color:rgba(231,201,152,.42)}
.pay.on{border-color:var(--brass);background:rgba(201,164,106,.1)}
.pay b{color:var(--ink)} .pay span{color:var(--ink-3)}

/* 聯絡表單 */
.fld>span{color:var(--ink-2)} .fld i{color:var(--brass-2)} .fld em{color:var(--ink-4)}
.fld input,.fld select,.fld textarea{background:rgba(14,9,5,.6);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-sm)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(201,164,106,.15);outline:none}

/* 結帳列 */
.checkout{background:rgba(18,12,7,.93);border-top:1px solid var(--line);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.total #totalLabel,.total span{color:var(--ink-3)}
#totalAmount{color:var(--brass-2);font-family:var(--serif)}
.pay-btn{background:linear-gradient(135deg,#e3c88f,#c9a46a);color:#20160b;font-weight:800;border:0;box-shadow:0 10px 30px rgba(201,164,106,.3)}
.pay-btn:hover{filter:brightness(1.05)} .pay-btn:disabled{opacity:.5;filter:none}
.fineprint{color:var(--ink-4)}

/* 注意事項 */
.disclaimer{background:rgba(40,28,18,.6) !important;border:1px solid var(--line) !important;
  border-left:2px solid var(--brass) !important;border-radius:var(--r-sm);color:var(--ink-2) !important;line-height:1.95}
.copyright{color:var(--ink-4)}

/* 載入骨架 */
.sk{background:linear-gradient(100deg,rgba(201,164,106,.05),rgba(201,164,106,.12),rgba(201,164,106,.05));border-radius:var(--r)}

@media (min-width:560px){ .sheet{max-width:496px} }