/* ==========================================================================
   現代精油心靈指引卡 · 日式美學與 LINE Seed TW 旗艦樣式表 (style.css v13)
   字型已拆分為 fonts.css 非同步載入，實現秒開零阻斷
   ========================================================================== */

:root {
  /* 日式款待美學 (Omotenashi) 與和色規範 - 單一標準定義 (消滅覆寫飄移) */
  --paper-light: #FAF6EC;                     /* 胡粉 (Gofun) - 頁面頂部柔光 */
  --paper: #F6F1E7;                           /* 白茶 (Shiracha) - 主背景底色，WCAG AA 對比度 >= 10:1 */
  --paper-deep: #ECE3D2;                      /* 利休白茶 (Rikyu-shiracha) - 邊界與微深卡片底色 */
  --ink: #322E28;                             /* 墨 (Sumi) - 內文主文字 */
  --ink-soft: #635A4F;                        /* 灰墨 (Hai-sumi) - 次要指引文字 */
  --forest: #435B48;                          /* 常磐木 (Tokiwa-gi) - 品牌自然輔色 */
  --forest-deep: #2B3D31;                     /* 常磐深綠 (Tokiwa-midori) - 核心動作與主按鈕 */
  --sage: #828E7C;                            /* 柳染 (Yanagi-zome) - 英文副標與 SKU */
  --gold: #B8912E;                            /* 蒔繪金 (Makie-gold) - 核心印章與高光金箔 */
  --gold-soft: #CBA959;                       /* 柔光金 (Yawara-kin) - 次級強調外框 */
  --gold-hairline: rgba(184, 145, 46, 0.22);  /* 蒔繪金線 - 0.5px 細微分割線 */
  --card-back: #F9F5EC;                       /* 牌背和紙底色 */
  
  --nav-h: 60px;                              /* 頂部導覽列標準高度 */
  --bar-h: 64px;                              /* 手機底部操作列高度 */
  --content-max: 1080px;                      /* 閱讀舒適寬度 */
  --page-gutter: clamp(14px, 3.5vw, 28px);    /* 流體呼吸間距 */
  
  --font-family-base: 'LINE Seed TW', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-diffuse: 0 4px 20px rgba(50, 46, 40, 0.035), 0 16px 44px rgba(50, 46, 40, 0.065);
  --shadow-card: 0 6px 24px rgba(50, 46, 40, 0.05), 0 20px 48px rgba(50, 46, 40, 0.08);
  --shadow-btn: 0 4px 16px rgba(43, 61, 49, 0.22);
  --shadow-hover: 0 8px 28px rgba(43, 61, 49, 0.28);
  --ease-zen: cubic-bezier(0.22, 1, 0.36, 1);  /* 所作禪意平滑緩動 */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:var(--font-family-base); letter-spacing:.045em; line-height:1.9;
  background:radial-gradient(ellipse at top,#FAF6EC 0%,var(--paper) 55%,var(--paper-deep) 100%);
  color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden; width:100%; min-width:280px;
}
body.has-fixed-nav{ padding-top:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
body.has-fixed-bar{ padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

.back-home-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  font-size:12.5px; color:var(--forest); text-decoration:none; letter-spacing:.03em;
}

/* ---------- 固定頂部導覽列 ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; height:calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index:100;
  padding-top:env(safe-area-inset-top, 0px);
  background:rgba(246,241,231,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(184,145,46,.28);
  display:flex; align-items:center;
}
.site-nav-inner{
  width:100%; max-width:var(--content-max); margin:0 auto; padding:0 var(--page-gutter);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.site-nav-logo{
  font-family:var(--font-family-base);
  font-size:15px; letter-spacing:.08em; color:var(--forest-deep); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site-nav-cta{
  flex-shrink:0; min-height:44px; padding:0 16px;
  background:var(--forest); color:#fff; border:none; border-radius:22px;
  font-size:13px; letter-spacing:.04em; cursor:pointer;
  box-shadow:0 2px 8px rgba(51,70,58,.25);
}
.site-nav-cta:active{opacity:0.88;}

/* ---------- 固定手機底部操作列 ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:100; height:var(--bar-h);
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:rgba(250,246,236,.96); backdrop-filter:blur(6px);
  border-top:1px solid rgba(184,145,46,.28);
  display:flex; gap:10px;
}
.mobile-bar-btn{
  flex:1; min-height:44px; border-radius:22px; font-size:14px; letter-spacing:.04em;
  cursor:pointer; border:1px solid transparent;
}
.mobile-bar-btn.primary{ background:var(--forest); color:#fff; box-shadow:0 3px 10px rgba(51,70,58,.28); }
.mobile-bar-btn.primary:active{ opacity:0.88; }
.mobile-bar-btn.secondary{ background:transparent; border-color:var(--gold); color:var(--forest-deep); }
.mobile-bar-btn.secondary:active{ background:rgba(184,145,46,.12); }

.site-toast{
  position:fixed; left:50%; bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px);
  transform:translateX(-50%) translateY(8px); opacity:0; pointer-events:none;
  background:var(--forest-deep); color:#fff; font-size:12.5px; letter-spacing:.03em;
  padding:9px 16px; border-radius:20px; box-shadow:0 4px 14px rgba(0,0,0,.18);
  z-index:200; transition:opacity .25s ease, transform .25s ease; max-width:calc(100% - 32px); text-align:center;
}
.site-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.brand-title{font-family:var(--font-family-base);text-align:center;padding:20px 16px 4px;letter-spacing:.12em;}
.brand-title h1{font-size:clamp(18px,5vw,26px);margin:0 0 4px;color:var(--forest-deep);font-weight:600;}
.brand-title p{margin:0;font-size:10.5px;color:var(--sage);letter-spacing:.3em;}
.ornament-divider{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);opacity:.7;margin:6px auto 14px;}
.ornament-divider::before,.ornament-divider::after{content:"";flex:1;max-width:60px;height:1px;background:var(--gold);opacity:.5;}

main{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 var(--page-gutter) 40px;width:100%;max-width:100%;}

#mode-select{width:100%;max-width:720px;display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.mode-btn{background:linear-gradient(135deg,#fff9ee,var(--paper));border:1px solid rgba(184,145,46,.4);border-radius:14px;padding:14px 18px;min-height:44px;text-align:left;cursor:pointer;box-shadow:0 2px 6px rgba(58,54,46,.08);display:flex;align-items:center;gap:12px;}
.mode-btn{width:100%;font:inherit;color:inherit;}
.mode-btn:active{opacity:0.88;}
.mode-num{font-family:var(--font-family-base);font-size:22px;color:var(--forest);width:30px;text-align:center;flex-shrink:0;}
.mode-text b{display:block;font-size:15px;color:var(--ink);}
.mode-text span{font-size:11.5px;color:var(--ink-soft);}

#stage{width:100%;max-width:760px;display:none;flex-direction:column;align-items:center;}
#stage.active{display:flex;}
.stage-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:6px;}
.back-btn{background:none;border:1px solid var(--forest);color:var(--forest);border-radius:20px;padding:5px 14px;min-height:44px;min-width:44px;font-size:12.5px;cursor:pointer;transition:all .2s ease;}
.back-btn:active{transform:scale(0.94);opacity:.85;}
.stage-title{font-size:14px;color:var(--forest-deep);letter-spacing:.05em;}
.instruction{font-size:13px;color:var(--ink-soft);text-align:center;margin:4px 0 6px;min-height:18px;}

#indicator-select{display:none;flex-direction:column;gap:8px;width:100%;max-width:420px;margin:8px 0 16px;}
.indicator-item{background:#fffaf3;border:1px solid rgba(184,145,46,.35);border-radius:10px;padding:11px 16px;min-height:44px;font-size:14px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;}
.indicator-item:active{background:var(--paper-deep);transform:scale(0.98);}
.indicator-item .en{font-size:10.5px;color:var(--ink-soft);}

#fan-wrap{width:100%;display:none;flex-direction:column;align-items:center;}
#fan-stage{
  position:relative; width:100%; max-width:720px;
  height:min(72vh, 640px); min-height:440px;
  margin:8px auto 4px; overflow:visible;
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
}
#fan-stage.shuffling .fan-card{ animation:fanShuffle .9s ease-in-out infinite; }
@keyframes fanShuffle{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.06);} }
.fan-card{
  position:absolute;
  width:clamp(52px, 7.5vw, 78px);
  height:calc(clamp(52px, 7.5vw, 78px) * 1.4);
  border-radius:9px;
  background-image:url("images/Gemini_Generated_Image.png");
  background-size:cover;
  background-position:center;
  border:1px solid var(--gold-hairline);
  box-shadow:var(--shadow-diffuse);
  transform-origin:bottom center;
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.fan-card:active{ box-shadow:0 6px 16px rgba(51,70,58,.3); }
.fan-card.revealed{
  background-image:none; background:#fff; pointer-events:none;
  animation:fanReveal .4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:0 0 14px rgba(197, 160, 89, 0.4), var(--shadow-diffuse);
}
@keyframes fanReveal{
  0%{ transform: scale(0.92) rotateY(70deg); filter: brightness(1.25); }
  100%{ transform: scale(1) rotateY(0deg); filter: brightness(1); }
}
.fan-card.revealed img{
  width:100%; height:72%; object-fit:cover; border-radius:9px 9px 0 0;
  transform:scale(1.35); transform-origin:center;
}
.fan-card.revealed .mini-cap{font-size:8px;text-align:center;color:var(--forest-deep);padding:2px 2px;line-height:1.2;overflow:hidden;}
.fan-card.dimmed{ opacity:.28; pointer-events:none; }
.fan-card.spotlight{ box-shadow:0 0 0 3px var(--forest), 0 6px 16px rgba(51,70,58,.35); z-index:5; }

.deck-hint{font-size:12px;color:var(--sage);margin-top:6px;}

.send-status{font-size:12.5px;color:var(--sage);text-align:center;margin-top:14px;min-height:16px;}
.again-btn{margin:10px auto 0;background:var(--forest);color:#fff;border:none;border-radius:24px;padding:10px 28px;min-height:44px;font-size:13.5px;cursor:pointer;box-shadow:0 4px 12px rgba(51,70,58,.3);}
.again-btn:active{opacity:0.88;}

/* ---------- 首頁（外層 / 1樓）專屬樣式 ---------- */
.site-nav-links{ display:flex; align-items:center; gap:18px; }
.site-nav-links a{
  font-size:12.5px; color:var(--ink-soft); text-decoration:none; letter-spacing:.03em;
  white-space:nowrap;
}
.site-nav-links a:hover{ color:var(--forest-deep); }

.home-hero{
  width:100%; max-width:var(--content-max); margin:0 auto;
  padding:clamp(64px,9vw,96px) var(--page-gutter) clamp(48px,6vw,68px);
  display:flex; flex-wrap:wrap; align-items:center; gap:48px;
}
.home-hero-text{ flex:1 1 360px; min-width:0; }
.home-kicker{
  display:flex; align-items:center; gap:10px; color:var(--gold-soft);
  font-size:11px; letter-spacing:.32em; margin-bottom:18px;
}
.home-kicker::before,.home-kicker::after{ content:""; width:34px; height:1px; background:var(--gold-soft); opacity:.7; }
.home-hero h1{
  font-family:var(--font-family-base); font-weight:600;
  font-size:clamp(30px,6vw,50px); line-height:1.35; color:var(--forest-deep);
  margin:0 0 18px;
}
.home-hero p.home-sub{ font-size:14.5px; color:var(--ink-soft); line-height:1.8; margin:0 0 26px; max-width:38em; }
.home-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.home-cta{
  min-height:48px; padding:0 22px; border-radius:24px; font-size:14.5px; letter-spacing:.03em;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.home-cta.primary{ background:var(--forest); color:#fff; box-shadow:0 4px 14px rgba(51,70,58,.28); }
.home-cta.primary:active{ opacity:0.88; }
.home-cta.secondary{ background:transparent; border-color:var(--gold); color:var(--forest-deep); }
.home-cta.secondary:active{ background:rgba(184,145,46,.1); }
.home-disclaimer{ font-size:11px; color:var(--sage); letter-spacing:.02em; }

.home-hero-visual{ flex:0 1 300px; min-width:220px; display:flex; justify-content:center; }
.home-card-mock{
  width:100%; max-width:260px; aspect-ratio:3/4; border-radius:16px;
  background:linear-gradient(160deg,#EDF1E9,#DCE4D8);
  border:1px solid rgba(75,99,80,.25); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center;
}
.home-card-mock .spark{ color:var(--gold); font-size:22px; }
.home-card-mock .eyebrow{ font-size:10px; letter-spacing:.28em; color:var(--forest); }
.home-card-mock .title{ font-family:var(--font-family-base); font-size:26px; color:var(--forest-deep); font-weight:600; }
.home-card-mock .line{ font-size:11.5px; color:var(--ink-soft); line-height:1.7; }

.home-section{ width:100%; max-width:var(--content-max); margin:0 auto; padding:8px var(--page-gutter) 48px; }
.home-section-title{
  font-family:var(--font-family-base); font-size:20px; color:var(--forest-deep);
  text-align:center; margin:0 0 22px; letter-spacing:.04em;
}
.home-feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.home-feature-card{
  background:#fffaf3; border:1px solid rgba(184,145,46,.3); border-radius:14px;
  padding:20px 18px; text-align:left;
}
.home-feature-card b{ display:block; font-size:14.5px; color:var(--forest-deep); margin-bottom:6px; }
.home-feature-card span{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; }

.home-footer{ width:100%; text-align:center; padding:20px 16px 8px; font-size:11px; color:var(--sage); letter-spacing:.05em; }

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(184,145,46,.78);
  outline-offset:3px;
}

/* ---------- 抽牌結果：平放卡片列（點擊看詳情） ---------- */
#drawn-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,180px));gap:14px;
  justify-content:center;width:100%;max-width:760px;margin:14px auto 0;
}
.drawn-slot{display:flex;width:100%;min-width:0;}
.drawn-card{
  width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--gold-hairline);
  box-shadow:var(--shadow-diffuse); background:#fffaf3; display:flex; flex-direction:column;
  animation:cardReveal .5s ease; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  position:relative;
  transition:transform 0.45s var(--ease-zen), box-shadow 0.45s var(--ease-zen), border-color 0.35s ease;
}
.drawn-card::after{
  content:'';
  position:absolute;
  top:0; left:-120%;
  width:100%; height:100%;
  background:linear-gradient(115deg, transparent 20%, rgba(203, 169, 89, 0.25) 45%, rgba(255, 250, 240, 0.45) 50%, rgba(203, 169, 89, 0.25) 55%, transparent 80%);
  transform:skewX(-20deg);
  animation:makiEShimmer 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  pointer-events:none;
}
@keyframes makiEShimmer{
  0%{ left:-120%; opacity:0; }
  25%{ opacity:1; }
  100%{ left:220%; opacity:0; }
}
.drawn-card:hover{
  border-color:rgba(184, 145, 46, 0.55);
  box-shadow:0 8px 24px rgba(50, 46, 40, 0.08), 0 0 16px rgba(197, 160, 89, 0.22);
  transform:translateY(-3px);
}
.drawn-card:active{ opacity:0.88; transform:scale(0.98); }
@keyframes cardReveal{ from{opacity:0;transform:translateY(10px) scale(.95);} to{opacity:1;transform:translateY(0) scale(1);} }
.drawn-card .slot-label{font-size:10.5px;color:var(--sage);letter-spacing:.05em;text-align:center;padding:8px 6px 6px;}
.drawn-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.drawn-card .cap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 6px 4px;text-align:center;gap:2px;}
.drawn-card .cap b{font-size:13px;color:var(--forest-deep);}
.drawn-card .cap span{font-size:9.5px;color:var(--ink-soft);}
.drawn-card .read-link{font-size:10.5px;color:var(--forest);padding:0 6px 10px;text-align:center;}

/* ---------- 專屬體驗碼面板 ---------- */
.experience-panel{
  width:100%; max-width:420px; margin:32px auto 0; text-align:center;
  background:#fffaf3; border:1px solid rgba(184,145,46,.4); border-top:3px solid var(--gold-soft);
  border-radius:16px; padding:20px 20px 18px; box-shadow:0 3px 10px rgba(58,54,46,.08);
}
.experience-panel .ep-label{font-size:11px;color:var(--sage);letter-spacing:.1em;margin-bottom:6px;}
.experience-panel .ep-code{font-family:var(--font-family-base);font-size:22px;letter-spacing:.06em;color:var(--forest-deep);font-weight:600;margin-bottom:8px;word-break:break-all;}
.experience-panel .ep-desc{font-size:11.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px;}
.experience-panel .ep-send-btn{
  width:100%; min-height:44px; background:var(--forest); color:#fff; border:none; border-radius:22px;
  font-size:13.5px; letter-spacing:.03em; cursor:pointer; box-shadow:0 3px 10px rgba(51,70,58,.28);
}
.experience-panel .ep-send-btn:active{ opacity:0.88; }
.experience-panel .ep-send-btn:disabled{ opacity:.6; }
.experience-panel .ep-book-link{ display:block; margin-top:12px; font-size:11.5px; color:var(--forest); text-decoration:none; }

/* ---------- 詳情彈窗 ---------- */
.insight-modal{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(58,54,46,.55); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:16px;
}
.insight-modal.open{ display:flex; }
.insight-modal-card{
  width:100%; max-width:820px; max-height:90vh; overflow-y:auto;
  background:var(--paper); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex; flex-wrap:wrap; position:relative;
}
.insight-modal-img{ flex:1 1 300px; min-width:0; }
.insight-modal-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
@media (min-width:601px){
  .insight-modal-img img{ height:100%; aspect-ratio:auto; min-height:300px; }
}
.insight-modal-body{ flex:1 1 340px; min-width:0; padding:30px 30px 26px; }
.insight-modal-close{
  position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.88); border:none; font-size:18px; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.insight-modal-close:active{ transform:scale(0.9); }
.im-eyebrow{ font-size:11px; letter-spacing:.22em; color:var(--sage); margin-bottom:12px; }
.im-name{ font-family:var(--font-family-base); font-size:28px; color:var(--forest-deep); font-weight:600; }
.im-name-en{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.im-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.im-pill{ font-size:12px; padding:5px 14px; border-radius:14px; background:var(--paper-deep); color:var(--forest-deep); }
.im-guidance{ font-size:14.5px; line-height:1.9; color:var(--ink); margin-bottom:10px; white-space:pre-line; }
.im-chakra{ font-size:12px; color:var(--sage); margin-top:4px; }

.im-gate{ border-top:1px solid rgba(184,145,46,.3); margin-top:14px; padding-top:16px; text-align:center; }
.im-gate .gate-eyebrow{ font-size:10px; letter-spacing:.2em; color:var(--gold-soft); margin-bottom:8px; }
.im-gate .gate-title{ font-size:15px; color:var(--forest-deep); font-weight:600; margin-bottom:8px; }
.im-gate .gate-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:6px; }
.im-gate .gate-note{ font-size:10.5px; color:var(--sage); margin-bottom:14px; }
.im-gate .gate-qr{ width:150px; height:150px; margin:0 auto 14px; border-radius:10px; overflow:hidden; border:1px solid rgba(184,145,46,.3); background:#fff; }
.im-gate .gate-qr img{ width:100%; height:100%; object-fit:contain; }
.im-gate .gate-confirm-btn{
  width:100%; min-height:44px; background:var(--forest-deep); color:#fff; border:none; border-radius:22px;
  font-size:13.5px; cursor:pointer; margin-bottom:10px;
}
.im-gate .gate-skip-btn{ background:none; border:none; font-size:12px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; min-height:44px; }

/* ---------- 貴賓體驗預約表單 ---------- */
#booking-form-wrap{ width:100%; max-width:560px; }
.booking-intro{ font-size:13px; color:var(--ink-soft); line-height:1.8; text-align:center; margin:0 0 22px; }

/* 日式調息逸品奉呈卡 (Cart Summary Banner) */
.cart-summary-banner {
  background: #FFFDF9;
  border: 1px solid var(--gold-hairline);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-diffuse);
}
.csb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(184, 145, 46, 0.18);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.csb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--forest-deep);
  letter-spacing: 0.04em;
}
.csb-seal {
  background: rgba(184, 145, 46, 0.12);
  color: var(--gold);
  border: 1px solid rgba(184, 145, 46, 0.35);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.csb-count {
  font-size: 11.5px;
  color: var(--sage);
}
.csb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.csb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  gap: 10px;
}
.csb-item-img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(184, 145, 46, 0.2);
  flex-shrink: 0;
}
.csb-item-name {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}
.csb-item-meta {
  font-size: 11px;
  color: var(--sage);
}
.csb-item-price {
  font-weight: 700;
  color: var(--forest-deep);
  white-space: nowrap;
  font-size: 13.5px;
}
.csb-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px dashed rgba(184, 145, 46, 0.25);
  padding-top: 10px;
}
.csb-label {
  font-size: 12px;
  color: var(--ink-soft);
}
.csb-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--forest-deep);
}

.booking-form{ display:flex; flex-direction:column; gap:16px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-label{ font-size:12.5px; color:var(--forest-deep); letter-spacing:.03em; }
.form-label .req{ color:var(--gold); }
.form-input{
  min-height:44px; padding:0 14px; border-radius:10px; border:1px solid rgba(184,145,46,.4);
  background:#fffaf3; font-family:inherit; font-size:14px; color:var(--ink);
}
.form-input:focus{ outline:2px solid var(--forest); outline-offset:1px; }
.form-textarea{ min-height:88px; padding:10px 14px; resize:vertical; }
.draw-code-note{ font-size:12px; color:var(--forest); background:var(--paper-deep); border-radius:10px; padding:10px 14px; }
.form-submit-btn{
  min-height:48px; background:var(--forest); color:#fff; border:none; border-radius:24px;
  font-size:14.5px; letter-spacing:.03em; cursor:pointer; box-shadow:0 4px 14px rgba(51,70,58,.28);
}
.form-submit-btn:active{ opacity:0.88; }
.form-submit-btn:disabled{ opacity:.6; }
.booking-disclaimer{ font-size:10.5px; color:var(--sage); line-height:1.7; text-align:center; margin:2px 0 0; }

.booking-confirm{
  width:100%; max-width:420px; margin:0 auto; text-align:center;
  background:#fffaf3; border:1px solid rgba(184,145,46,.4); border-radius:16px;
  padding:26px 22px; box-shadow:0 3px 10px rgba(58,54,46,.08);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.booking-confirm .home-cta{ margin-top:14px; }

/* ---------- 管理後台 ---------- */
.admin-login-wrap{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:16px; margin:0 auto; }
.admin-msg{ font-size:12.5px; color:var(--sage); text-align:center; min-height:16px; }

.admin-dashboard{ width:100%; max-width:960px; }
.admin-stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px; }
.admin-stat-card{
  flex:1; background:#fffaf3; border:1px solid rgba(184,145,46,.35); border-radius:14px;
  padding:16px; text-align:center; display:flex; flex-direction:column; gap:4px;
}
.admin-stat-card b{ font-family:var(--font-family-base); font-size:28px; color:var(--forest-deep); }
.admin-stat-card span{ font-size:11.5px; color:var(--ink-soft); }

.admin-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.admin-toolbar .form-input{ flex:1 1 160px; min-width:0; }
.admin-status-filter{ flex:0 0 120px; }
.admin-logout-btn{ min-height:44px; padding:0 16px; }

.booking-list{ display:flex; flex-direction:column; gap:14px; }
.booking-card{
  background:#fffaf3; border:1px solid rgba(184,145,46,.35); border-radius:14px;
  padding:16px 18px; box-shadow:0 2px 8px rgba(58,54,46,.08);
}
.booking-card-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; gap:10px; }
.booking-receipt{ font-family:var(--font-family-base); font-size:17px; color:var(--forest-deep); font-weight:600; }
.booking-created{ font-size:10.5px; color:var(--sage); }
.status-badge{ font-size:11px; padding:4px 12px; border-radius:12px; white-space:nowrap; flex-shrink:0; }
.status-badge.status-pending{ background:#F3E7C9; color:#7A5C1E; }
.status-badge.status-contacted{ background:#DCE7E0; color:var(--forest-deep); }
.status-badge.status-done{ background:var(--forest); color:#fff; }
.status-badge.status-cancelled{ background:#EADCDC; color:#7A3B3B; }

.booking-row{ font-size:12.5px; color:var(--ink); line-height:1.7; }
.booking-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.booking-status-select{ flex:0 0 120px; min-height:40px; }
.draw-toggle-btn{
  min-height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--forest); background:none;
  color:var(--forest); font-size:12.5px; cursor:pointer;
}

.draw-detail{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(184,145,46,.3); }
.draw-detail-meta{ font-size:11px; color:var(--sage); margin-bottom:8px; }
.draw-detail-cards{ display:flex; flex-wrap:wrap; gap:10px; }
.draw-detail-card{ width:76px; text-align:center; }
.draw-detail-card img{ width:76px; height:57px; object-fit:cover; border-radius:8px; border:1px solid rgba(184,145,46,.35); }
.draw-detail-card .ddc-label{ font-size:9px; color:var(--sage); margin-top:4px; }
.draw-detail-card .ddc-name{ font-size:10.5px; color:var(--forest-deep); }

/* ---------- 卡牌說明書入口 ---------- */
.guide-book-link{
  display:block; text-align:center; font-size:12.5px; color:var(--forest);
  text-decoration:none; margin-bottom:14px; min-height:44px; line-height:44px;
}
.card-data-state{min-height:20px;text-align:center;font-size:12px;color:var(--sage);}
.card-data-retry{
  align-self:center;min-height:44px;border:1px solid var(--forest);border-radius:22px;
  background:transparent;color:var(--forest);font:inherit;font-size:12.5px;padding:7px 18px;cursor:pointer;
}

/* ---------- 卡牌說明書彈窗 ---------- */
.guide-modal{
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(58,54,46,.55); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:16px;
}
.guide-modal.open{ display:flex; }
.guide-modal-card{
  width:100%; max-width:760px; max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  padding:32px 28px; position:relative;
}
.guide-modal-close{
  position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.88); border:none; font-size:18px; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.guide-modal-close:active{ transform:scale(0.9); }
.guide-modal-eyebrow{ text-align:center; font-size:10.5px; letter-spacing:.24em; color:var(--sage); }
.guide-modal-title{ text-align:center; font-family:var(--font-family-base); font-size:26px; color:var(--forest-deep); font-weight:600; margin:6px 0 8px; }
.guide-modal-sub{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-bottom:26px; }
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.guide-item{ background:#fffaf3; border:1px solid rgba(184,145,46,.35); border-radius:14px; padding:18px 18px 20px; }
.guide-item .gi-num{ font-family:var(--font-family-base); font-size:12px; color:var(--gold-soft); }
.guide-item .gi-title{ font-size:16px; color:var(--forest-deep); font-weight:600; margin:2px 0 10px; }
.guide-item .gi-h{ font-size:11px; color:var(--sage); letter-spacing:.05em; margin-bottom:4px; }
.guide-item .gi-p{ font-size:12px; color:var(--ink); line-height:1.7; margin-bottom:12px; }
.guide-diagram{ display:flex; gap:6px; }
.guide-diagram .gd-box{
  flex:1; min-width:0; background:var(--paper-deep); border:1px solid rgba(184,145,46,.3); border-radius:6px;
  font-size:9.5px; color:var(--forest-deep); text-align:center; padding:10px 4px; line-height:1.4;
}
.guide-diagram .gd-box.gd-circle{ border-radius:50%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; flex:0 0 44px; }

/* ---------- 模式五：抽牌前引導 ---------- */
.mode5-intro{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:18px; margin:12px auto 0; text-align:center; }
.mode5-intro-sub{ font-size:13px; color:var(--ink-soft); margin:0; }
.mode5-card-back{
  width:150px; aspect-ratio:1/1.4; border-radius:12px;
  background-image:url("images/Gemini_Generated_Image.png"); background-size:cover; background-position:center;
  border:1px solid var(--gold-hairline); box-shadow:0 10px 26px rgba(58,54,46,.22);
}

/* ---------- 模式七：流年/流月/流日 分頁選擇 ---------- */
.mode7-tabs{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px; margin:12px auto 0; }
.mode7-tab-btn{
  min-height:48px; border-radius:14px; border:1px solid rgba(184,145,46,.4); background:#fffaf3;
  color:var(--forest-deep); font-size:14px; cursor:pointer;
}
.mode7-tab-btn:active{ opacity:0.88; }

/* ---------- O2O 實體精油處方箋 ---------- */
.o2o-panel{
  width:100%; max-width:480px; margin:18px auto 0; background:#fffaf3;
  border:1px solid rgba(184,145,46,.4); border-radius:14px; padding:16px 18px;
}
.o2o-title{ font-size:13.5px; color:var(--forest-deep); font-weight:600; margin-bottom:10px; }
.o2o-item{ padding:10px 0; border-top:1px solid rgba(184,145,46,.25); }
.o2o-item:first-of-type{ border-top:none; }
.o2o-label{ font-size:11px; color:var(--sage); margin-bottom:2px; }
.o2o-card-name{ font-size:13px; color:var(--forest-deep); font-weight:600; margin-bottom:4px; }
.o2o-text{ font-size:12px; color:var(--ink); line-height:1.8; white-space:pre-line; }
.o2o-note{ font-size:10px; color:var(--sage); line-height:1.6; margin-top:10px; }

/* ---------- 三大分類選單（鏡子／河流／岔路） ---------- */
.category-question{ font-size:16px; color:var(--forest-deep); text-align:center; margin:4px 0 16px; font-family:var(--font-family-base); }
.category-row{ display:flex; width:100%; max-width:720px; gap:10px; margin:0 auto 20px; }
.category-card{
  flex:1; min-width:0; min-height:88px; background:#fffaf3; border:1px solid rgba(184,145,46,.35);
  border-radius:14px; padding:14px 10px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:all .25s var(--ease-zen);
}
.category-card:active{ transform:scale(0.96); }
.category-card.active{ border-color:var(--forest); background:linear-gradient(135deg,#fff9ee,var(--paper-deep)); box-shadow:0 3px 10px rgba(51,70,58,.15); }
.category-card:disabled,.mode-btn:disabled{cursor:wait;opacity:.58;transform:none;}
.category-card .cc-icon{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(184,145,46,.5);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--forest-deep);
}
.category-card .cc-name{ font-size:13.5px; color:var(--forest-deep); font-weight:600; }
.category-card .cc-tagline{ font-size:9.5px; color:var(--ink-soft); line-height:1.4; }

.category-detail{ width:100%; }
.cd-eyebrow{ text-align:center; font-size:10px; letter-spacing:.25em; color:var(--sage); margin-bottom:6px; }
.cd-title{ text-align:center; font-size:16px; color:var(--forest-deep); font-weight:600; margin-bottom:4px; }
.cd-sub{ text-align:center; font-size:11.5px; color:var(--ink-soft); margin-bottom:16px; }
.cd-modes{ display:flex; flex-direction:column; gap:10px; }

/* ---------- 管理後台：模組卡片列（受付／庫存／網站管理） ---------- */
.admin-module-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.admin-module-card{
  flex:1 1 200px; min-width:0; background:#fffaf3; border:1px solid rgba(184,145,46,.35);
  border-radius:14px; padding:16px 18px;
}
.admin-module-card.is-stub{ opacity:.9; }
.amc-eyebrow{ font-size:9.5px; letter-spacing:.15em; color:var(--gold-soft); margin-bottom:6px; }
.amc-title{ font-size:14.5px; color:var(--forest-deep); font-weight:600; margin-bottom:6px; }
.amc-desc{ font-size:11px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px; }
.amc-link{ font-size:12px; color:var(--forest); text-decoration:none; }

/* ---------- 庫存管理：新增/編輯表單 ---------- */
.inv-form-wrap{
  width:100%; display:flex; flex-direction:column; gap:12px; margin-bottom:20px;
  background:#fffaf3; border:1px solid rgba(184,145,46,.4); border-radius:14px; padding:16px 18px;
}
.inv-form-actions{ display:flex; gap:10px; }
.inv-form-actions .form-submit-btn{ flex:1; }
.inv-form-actions .mode7-tab-btn{ flex:1; min-height:44px; }

/* ---------- 首頁 footer 後台入口（低調文字連結） ---------- */
.admin-entry-link{ color:var(--sage); text-decoration:underline; }

/* ---------- 危險管理操作 ---------- */
.danger-action-btn{
  min-height:40px; padding:0 14px; border-radius:10px;
  border:1px solid #9A4B4B; background:#FFF7F5; color:#7A2F2F;
  font-family:inherit; font-size:12.5px; cursor:pointer;
}
.danger-action-btn:hover{ background:#F7E6E2; }
.danger-action-btn:disabled{ opacity:.55; cursor:not-allowed; }
.admin-reset-btn{ flex:0 0 auto; min-height:44px; }

/* ---------- 首頁 LOG4 輕量留資料區塊 ---------- */
.quick-lead-card{
  max-width:480px; margin:0 auto; background:#fffaf3; border:1px solid rgba(184,145,46,.4);
  border-radius:16px; padding:22px 20px; text-align:center;
}
.ql-title{ font-size:14px; color:var(--forest-deep); font-weight:600; line-height:1.6; margin-bottom:4px; }
.ql-sub{ font-size:12px; color:var(--ink-soft); margin-bottom:16px; }
.ql-fields{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }

/* ---------- 預約確認：AI 生成的客製化前導訊息 ---------- */
.ai-confirm-msg{
  font-size:13px; line-height:1.9; color:var(--ink); text-align:left;
  background:var(--paper-deep); border-radius:12px; padding:14px 16px; margin:14px 0;
  white-space:pre-line;
}

/* ---------- 庫存分類卡片：可點擊篩選 ---------- */
.admin-stat-filter{ cursor:pointer; font-family:inherit; transition:border-color .15s ease, box-shadow .15s ease; }
.admin-stat-filter:active{ opacity:0.88; }
.admin-stat-filter.active{ border-color:var(--forest); box-shadow:0 0 0 2px rgba(75,99,80,.25); }
.inv-active-filter{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:12px; color:var(--forest-deep); margin-bottom:12px;
}
.inv-active-filter button{
  background:none; border:1px solid var(--forest); color:var(--forest); border-radius:14px;
  font-size:11px; padding:3px 10px; cursor:pointer;
}

/* ---------- 響應式版面 ---------- */
@media (min-width:841px){
  .cd-modes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:840px){
  :root{ --nav-h:104px; }

  .site-nav-inner{
    height:100%; flex-wrap:wrap; align-content:center;
    gap:6px 10px; padding:6px 14px;
  }
  .site-nav-logo{ flex:1 1 auto; min-width:0; }
  .site-nav-links{
    order:3; width:100%; justify-content:space-between; gap:8px;
  }
  .site-nav-links a{ flex:1; text-align:center; }
  .site-nav-cta{ min-height:40px; padding:0 14px; }

  .home-hero{
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    gap:28px; padding:36px 16px 32px;
  }
  .home-hero-text{ flex:0 1 auto; width:100%; }
  .home-hero-visual{ flex:0 1 auto; width:100%; min-width:0; }
  .home-card-mock{ max-width:240px; margin:0 auto; }
  .home-section{ padding:8px 16px 36px; }
  .home-feature-grid{ grid-template-columns:1fr; }

  #fan-stage{ height:min(62vh,520px); min-height:360px; }
  .admin-dashboard{ max-width:100%; }
  .admin-toolbar .form-input{ flex-basis:100%; }
  .admin-status-filter,
  .admin-reset-btn,
  .admin-toolbar .admin-logout-btn{ flex:1 1 calc(50% - 4px); }
  .booking-card-head{ flex-wrap:wrap; }
  .guide-modal-card,
  .insight-modal-card{ max-height:92vh; }
}

@media (max-width:480px){
  :root{ --page-gutter:12px; }
  .site-nav-logo{ font-size:13px; letter-spacing:.04em; }
  .site-nav-links a{ font-size:11.5px; }
  .site-nav-cta{ padding:0 12px; font-size:12.5px; }

  .home-hero h1{ font-size:clamp(28px,9vw,38px); }
  .home-cta-row{ flex-direction:column; }
  .home-cta{ width:100%; }
  .home-kicker{ letter-spacing:.22em; }
  .home-kicker::before,
  .home-kicker::after{ width:24px; }

  .stage-header{ gap:12px; align-items:center; }
  .back-btn{ flex:0 1 auto; padding:5px 12px; }
  .stage-title{ flex:1; text-align:right; overflow-wrap:anywhere; }
  #fan-stage{ min-height:330px; }
  #drawn-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:370px; }
  #drawn-row .drawn-slot:only-child{ grid-column:1 / -1; width:min(190px,100%); justify-self:center; }
  .drawn-card .cap b{ font-size:14px; }
  .drawn-card .cap span,
  .drawn-card .read-link{ font-size:11px; }
  .category-row{ gap:6px; }
  .category-card{ min-height:96px; padding:12px 5px; }
  .category-card .cc-name{ font-size:13px; }
  .category-card .cc-tagline{ font-size:10.5px; overflow-wrap:anywhere; }
  .form-input{ font-size:16px; }
  .experience-panel{ padding:18px 14px 16px; }
  .guide-modal,
  .insight-modal{ padding:8px calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px)); }
  .guide-modal-card{ padding:28px 18px calc(22px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; max-height:calc(92vh - env(safe-area-inset-bottom, 0px)); }
  .insight-modal-body{ padding:22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .admin-stats-row{ gap:8px; }
  .admin-stat-card{ padding:13px 8px; }
  .booking-card{ padding:14px; }
  .booking-status-select,
  .draw-toggle-btn,
  .delete-booking-btn{ flex:1 1 100%; }
}


/* ========== 日式「おもてなし（款待）」增強元件樣式 ========== */
.omotenashi-steps {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 10px;
}
.omotenashi-steps::before {
  content: "";
  position: absolute;
  top: 18px; left: 40px; right: 40px;
  height: 1px;
  background: var(--gold-hairline);
  z-index: 0;
}
.omotenashi-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FAF6EC;
  border: 1px solid var(--gold);
  color: var(--forest-deep);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.step-text {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* 款待美學安心標籤列 */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--gold-hairline);
  font-size: 12px;
  color: var(--sage);
  letter-spacing: 0.03em;
}
.trust-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-badge-item svg {
  width: 14px; height: 14px;
  stroke: var(--forest);
  fill: none;
}

/* 所作（動態平滑優雅提升） */
.home-cta, .mode-btn, .drawn-card, .home-feature-card, .site-nav-cta {
  transition: transform 0.45s var(--ease-zen), box-shadow 0.45s var(--ease-zen), background-color 0.35s ease, border-color 0.35s ease !important;
}
.home-cta.primary:hover, .site-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: var(--forest-deep);
}
.home-cta.primary:active, .site-nav-cta:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 8px rgba(43, 61, 49, 0.2);
}
.home-cta.secondary:hover {
  transform: translateY(-2px);
  background: rgba(184, 145, 46, 0.08);
  border-color: var(--gold-soft);
}
.home-cta.secondary:active {
  transform: translateY(1px) scale(0.97);
  background: rgba(184, 145, 46, 0.16);
}
.mode-btn:active, .drawn-card:active {
  transform: scale(0.97);
}
.home-card-mock {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gold-hairline);
  transition: transform 0.6s var(--ease-zen), box-shadow 0.6s var(--ease-zen);
}
.home-card-mock:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(50, 46, 40, 0.1);
}

.home-hero h1 {
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-wrap: balance;
}
.home-hero p.home-sub {
  line-height: 2.0;
  letter-spacing: 0.05em;
  text-wrap: pretty;
}
.prescription-content, .card-desc, .shop-card-desc, .cart-summary-banner {
  text-wrap: pretty;
}

/* ========== 品牌官方識別 Logo（雫之洞悉 · 返魂堂）大氣升級樣式 ========== */
.site-nav-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--forest-deep);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: opacity 0.3s ease;
}
.site-nav-logo:hover {
  opacity: 0.85;
}
.site-nav-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.brand-title-emblem {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
  opacity: 0.96;
}
.card-mock-emblem {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.hero-brand-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.hero-brand-logo {
  width: clamp(160px, 24vw, 220px);
  height: auto;
  display: block;
  opacity: 0.95;
}
.home-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px 28px;
}
.footer-logo {
  width: 140px;
  height: auto;
  display: block;
  margin-bottom: 12px;
  opacity: 0.92;
}

@media (max-width: 840px) {
  .site-nav-logo { font-size: 15.5px; gap: 10px; }
  .site-nav-logo-img { width: 38px; height: 38px; }
  .brand-title-emblem { width: 72px; height: 72px; }
  .footer-logo { width: 120px; }
}
@media (max-width: 480px) {
  .site-nav-logo { font-size: 14px; gap: 8px; }
  .site-nav-logo-img { width: 34px; height: 34px; }
  .hero-brand-logo { width: 140px; }
}

/* ========== 頁尾後台入口（Logo 與專屬微標籤雙入口） ========== */
.footer-logo-link {
  display: inline-block;
  transition: transform 0.35s ease, opacity 0.35s ease;
  cursor: pointer;
  text-decoration: none;
}
.footer-logo-link:hover {
  transform: translateY(-2px);
  opacity: 0.82;
}



/* ========== 日式自然醫學調息箋 (Insight Modal) 樣式 ========== */
.seal-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.seal-pill {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 5px;
}
.seal-usage {
  background: rgba(184,145,46,0.1); color: var(--forest-deep); border: 1px solid var(--gold-hairline);
}
.seal-safety {
  font-size: 11px; padding: 3px 9px; border-radius: 10px; font-weight: 600;
}
.safety-direct { background: #E8F2EA; color: #2B5738; border: 1px solid #94C4A0; }
.safety-sensitive { background: #FFF4E5; color: #8F5500; border: 1px solid #ECC48B; }
.safety-dilute { background: #FDE8E8; color: #9B1C1C; border: 1px solid #F8B4B4; }
.tag-balance { background: rgba(75,99,80,0.12); color: #2D4232; border: 1px solid rgba(75,99,80,0.3); }
.tag-mercy { background: rgba(184,145,46,0.14); color: #785A12; border: 1px solid rgba(184,145,46,0.35); }
.tag-severity { background: rgba(60,80,100,0.12); color: #243545; border: 1px solid rgba(60,80,100,0.3); }

.doctor-prescription-box {
  background: #FFFDF9;
  border: 1px solid rgba(184,145,46,0.4);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0 14px;
  text-align: left;
}
.prescription-title {
  font-size: 12px; font-weight: 700; color: var(--forest-deep);
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.05em;
}
.prescription-content {
  font-size: 13px; line-height: 1.85; color: var(--ink);
  letter-spacing: 0.03em;
}
.im-sku-tag {
  font-size: 11px; color: var(--sage); letter-spacing: 0.06em; margin-bottom: 2px;
}