/* ==========================================================================
   元鴻茶間 YUAN HONG TEA SALON
   設計系統 — 依品牌 GUIDELINE
   松柏綠 #445f4c ・麥杆黃 #ffef85 ・亞麻褐 #bfaf78 ・琥珀橘 #a9744f
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* 品牌色 */
  --green:        #445f4c;
  --green-deep:   #2f4337;
  --green-ink:    #1d2a22;
  --yellow:       #ffef85;
  --linen:        #bfaf78;
  --amber:        #a9744f;

  /* 中性 */
  --cream:        #faf6ec;
  --cream-2:      #f3ecdc;
  --paper:        #fffdf7;
  --ink:          #231f1a;
  --ink-60:       rgba(35,31,26,.62);
  --ink-38:       rgba(35,31,26,.38);
  --line:         rgba(68,95,76,.16);

  /* 排版 */
  --f-sans: "Noto Sans TC", -apple-system, "Segoe UI", sans-serif;
  --f-serif:"Noto Serif TC", Georgia, serif;
  --f-en:   "Cinzel", Georgia, serif;

  /* 尺度 */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;

  /* 節奏 */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .7s;

  --shadow-s: 0 2px 10px rgba(31,46,33,.06);
  --shadow-m: 0 10px 34px rgba(31,46,33,.10);
  --shadow-l: 0 24px 60px rgba(31,46,33,.16);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-sans); font-weight:400; line-height:1.85;
  font-size:16px; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-serif); font-weight:600; line-height:1.35; margin:0; letter-spacing:.03em; }
p{ margin:0; }
::selection{ background:var(--yellow); color:var(--green-ink); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px,11vw,140px); }
.section--tight{ padding-block:clamp(52px,8vw,96px); }
.bg-cream{ background:var(--cream); }
.bg-paper{ background:var(--paper); }
.bg-green{ background:var(--green-deep); color:var(--cream); }
.bg-green h1,.bg-green h2,.bg-green h3{ color:#fff; }

/* ---------- 標題組 ---------- */
.eyebrow{
  font-family:var(--f-en); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--amber); margin-bottom:.9em;
}
.bg-green .eyebrow{ color:var(--yellow); }
.h-xl{ font-size:clamp(2rem,5.2vw,3.4rem); }
.h-lg{ font-size:clamp(1.6rem,3.6vw,2.5rem); }
.h-md{ font-size:clamp(1.2rem,2.2vw,1.55rem); }
.lead{ font-size:clamp(1rem,1.4vw,1.09rem); color:var(--ink-60); max-width:62ch; }
.bg-green .lead{ color:rgba(250,246,236,.76); }
.sec-head{ margin-bottom:clamp(36px,5vw,62px); }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.9em; border-radius:999px;
  font-size:.95rem; font-weight:500; letter-spacing:.06em;
  border:1px solid transparent; transition:all .34s var(--ease);
  will-change:transform;
}
.btn-primary{ background:var(--yellow); color:var(--green-ink); box-shadow:var(--shadow-s); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn-ghost{ border-color:currentColor; }
.btn-ghost:hover{ background:var(--green); color:var(--cream); border-color:var(--green); }
.bg-green .btn-ghost:hover{ background:var(--cream); color:var(--green-deep); border-color:var(--cream); }
.btn-solid{ background:var(--green); color:var(--cream); }
.btn-solid:hover{ background:var(--green-deep); transform:translateY(-2px); }
.btn .arw{ transition:transform .34s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.link-more{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.92rem; letter-spacing:.06em; color:var(--green);
  border-bottom:1px solid var(--line); padding-bottom:.28em;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-more:hover{ border-color:var(--green); gap:.85em; }

/* ==========================================================================
   Header — 漂浮膠囊
   ========================================================================== */
.hdr{
  position:fixed; inset:14px 0 auto; z-index:80;
  display:flex; justify-content:center; padding-inline:var(--gut);
  pointer-events:none;
}
.hdr-in{
  pointer-events:auto;
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; gap:22px;
  padding:11px 14px 11px 22px; border-radius:999px;
  background:rgba(255,253,247,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(68,95,76,.10);
  box-shadow:0 6px 26px rgba(31,46,33,.07);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
.is-scrolled .hdr-in{ background:rgba(255,253,247,.94); box-shadow:0 10px 30px rgba(31,46,33,.11); }

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark{ width:32px; height:32px; flex:0 0 32px; }
.brand-tx{ display:flex; flex-direction:column; line-height:1.2; }
.brand-cn{ font-family:var(--f-serif); font-weight:600; font-size:1.03rem; letter-spacing:.12em; color:var(--green-deep); }
.brand-en{ font-family:var(--f-en); font-size:.52rem; letter-spacing:.24em; color:var(--linen); }

.nav{ display:flex; gap:2px; margin-inline:auto; }
.nav a{
  position:relative; padding:.55em .95em; border-radius:999px;
  font-size:.9rem; letter-spacing:.05em; color:var(--ink-60);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover{ color:var(--green-deep); background:rgba(68,95,76,.06); }
.nav a[aria-current="page"]{ color:var(--green-deep); font-weight:500; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:.24em; translate:-50% 0;
  width:14px; height:2px; border-radius:2px; background:var(--amber);
}

.hdr-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-line{
  display:inline-flex; align-items:center; gap:.45em;
  background:var(--green); color:var(--cream);
  padding:.62em 1.15em; border-radius:999px;
  font-size:.86rem; letter-spacing:.05em; white-space:nowrap;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn-line:hover{ background:var(--green-deep); transform:translateY(-1px); }

.burger{ display:none; width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; }
.burger span{ display:block; width:17px; height:1.6px; background:var(--green-deep); border-radius:2px; transition:.3s var(--ease); }
.burger span+span{ margin-top:4px; }

/* ==========================================================================
   Hero — 撥雲見日
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  overflow:hidden; isolation:isolate;
  background:var(--green-ink);
}
/* 主視覺照片（AI 生成・2026-08-02） */
.hero-bg{
  position:absolute; inset:0; z-index:-3;
  background:linear-gradient(180deg,#8ea78f 0%,#6d8a71 32%,#40573f 66%,#22301f 100%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:image-set(
      url("img/hero-sm.jpg") 1x,
      url("img/hero.jpg") 2x);
  background-image:url("img/hero.jpg");
  background-size:cover; background-position:center 58%;
  animation:kenburns 30s ease-in-out infinite alternate;
}
@media (max-width:820px){
  .hero-bg::after{ background-image:url("img/hero-md.jpg"); }
}
/* 照片上壓一層暗調，確保白字可讀 */
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(20,32,22,.42) 0%,rgba(20,32,22,.16) 34%,rgba(20,32,22,.30) 66%,rgba(18,28,20,.62) 100%),
    radial-gradient(58% 46% at 50% 42%,rgba(12,20,14,.30) 0%,rgba(12,20,14,0) 72%);
}
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

/* 雲層 — 三層不同速度飄移，開場向兩側散開 */
.cloud{
  position:absolute; left:-14%; right:-14%; z-index:-2;
  background-repeat:no-repeat; background-size:120% 100%;
  will-change:transform,opacity;
}
.cloud-1{
  top:-6%; height:62%;
  background-image:radial-gradient(60% 78% at 30% 52%,rgba(255,253,247,.92) 0%,rgba(255,253,247,0) 70%),
                   radial-gradient(52% 70% at 72% 44%,rgba(255,253,247,.80) 0%,rgba(255,253,247,0) 72%);
  animation:drift-a 44s linear infinite;
}
.cloud-2{
  top:16%; height:56%;
  background-image:radial-gradient(56% 74% at 62% 50%,rgba(244,240,228,.80) 0%,rgba(244,240,228,0) 70%),
                   radial-gradient(46% 62% at 18% 58%,rgba(255,253,247,.66) 0%,rgba(255,253,247,0) 72%);
  animation:drift-b 62s linear infinite;
}
.cloud-3{
  bottom:-4%; height:48%;
  background-image:radial-gradient(64% 70% at 46% 60%,rgba(226,232,220,.66) 0%,rgba(226,232,220,0) 74%);
  animation:drift-a 82s linear infinite reverse;
}
@keyframes drift-a{ from{ transform:translate3d(-4%,0,0); } to{ transform:translate3d(4%,0,0); } }
@keyframes drift-b{ from{ transform:translate3d(3%,0,0); } to{ transform:translate3d(-5%,0,0); } }

/* 開場：雲散開 */
.hero.is-revealing .cloud-1{ animation:part-up 2.9s var(--ease) forwards; }
.hero.is-revealing .cloud-3{ animation:part-down 3.1s var(--ease) forwards; }
@keyframes part-up  { from{ transform:translateY(0) scale(1.1); opacity:1; } to{ transform:translateY(-46%) scale(1.3); opacity:.34; } }
@keyframes part-down{ from{ transform:translateY(0) scale(1.1); opacity:1; } to{ transform:translateY(40%)  scale(1.3); opacity:.22; } }

/* 光暈 */
.hero-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 34% at 50% 34%,rgba(255,239,133,.30) 0%,rgba(255,239,133,0) 68%);
  opacity:0; animation:glow-in 3.4s var(--ease) .7s forwards;
}
@keyframes glow-in{ to{ opacity:1; } }

.hero-in{ position:relative; padding:120px var(--gut) 96px; max-width:900px; }
.hero-eyebrow{
  font-family:var(--f-en); font-size:.7rem; letter-spacing:.42em;
  text-transform:uppercase; color:rgba(255,239,133,.88); margin-bottom:1.6em;
}
.hero-title{
  font-family:var(--f-serif); font-weight:600; color:#fff;
  font-size:clamp(2.9rem,9vw,5.6rem); letter-spacing:.16em; line-height:1.1;
  text-shadow:0 3px 40px rgba(0,0,0,.34);
}
.hero-en{
  font-family:var(--f-en); font-size:clamp(.66rem,1.5vw,.9rem);
  letter-spacing:.44em; color:rgba(255,253,247,.72); margin-top:1.5em;
}
.hero-sub{
  margin-top:2.1em; font-size:clamp(.96rem,1.7vw,1.1rem);
  color:rgba(255,253,247,.88); line-height:2.05; letter-spacing:.05em;
}
.hero-btns{ margin-top:3em; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.hero .btn-ghost:hover{ background:#fff; color:var(--green-deep); border-color:#fff; }

/* 開場字組進場 */
.hero-in > *{ opacity:0; transform:translateY(20px); }
.hero.is-revealing .hero-in > *{ animation:rise .95s var(--ease) forwards; }
.hero.is-revealing .hero-eyebrow{ animation-delay:.55s; }
.hero.is-revealing .hero-title  { animation-delay:.75s; }
.hero.is-revealing .hero-en     { animation-delay:.95s; }
.hero.is-revealing .hero-sub    { animation-delay:1.12s; }
.hero.is-revealing .hero-btns   { animation-delay:1.3s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; bottom:30px; left:50%; translate:-50% 0;
  font-family:var(--f-en); font-size:.6rem; letter-spacing:.32em;
  color:rgba(255,253,247,.6); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  opacity:0; animation:rise .9s var(--ease) 2s forwards;
}
.scroll-cue i{ display:block; width:1px; height:34px; background:linear-gradient(rgba(255,253,247,.66),transparent); animation:cue 2.3s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; } 50%{ transform:scaleY(1); } }

/* ==========================================================================
   捲動進場
   ========================================================================== */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s; } .rv-d2{ transition-delay:.18s; }
.rv-d3{ transition-delay:.27s; } .rv-d4{ transition-delay:.36s; }
.rv-d5{ transition-delay:.45s; } .rv-d6{ transition-delay:.54s; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-in > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .cloud,.hero-bg::after,.scroll-cue{ animation:none !important; }
  .scroll-cue{ opacity:1; }
}

/* ==========================================================================
   數字帶
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); }
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2.1rem,5vw,3.1rem); color:var(--yellow); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat span{ display:block; margin-top:.9em; font-size:.83rem; letter-spacing:.11em; color:rgba(250,246,236,.66); }

/* ==========================================================================
   商品卡
   ========================================================================== */
.grid-p{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:clamp(18px,2.4vw,30px); }
.pcard{
  background:var(--paper); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-s);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.pcard-media{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(155deg,#7c9480 0%,#54705a 46%,#33452f 100%);
  display:grid; place-items:center;
}
.pcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard-media img{ transform:scale(1.05); }
.pcard-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--f-serif); writing-mode:vertical-rl;
  font-size:clamp(1.5rem,2.5vw,2rem); letter-spacing:.34em;
  color:rgba(255,253,247,.9); text-shadow:0 2px 18px rgba(0,0,0,.3);
}
.pcard-ph small{
  position:absolute; left:0; right:0; bottom:14px;
  writing-mode:horizontal-tb; text-align:center;
  font-family:var(--f-sans); font-size:.6rem; letter-spacing:.18em;
  color:rgba(255,253,247,.42);
}
.badge{
  position:absolute; top:13px; left:13px; z-index:2;
  background:var(--amber); color:#fff;
  padding:.34em .82em; border-radius:999px;
  font-size:.7rem; letter-spacing:.09em;
}
.badge--rare{ background:var(--green-deep); }
.pcard-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:.55em; flex:1; }
.pcard-region{ font-family:var(--f-en); font-size:.62rem; letter-spacing:.2em; color:var(--linen); text-transform:uppercase; }
.pcard-name{ font-family:var(--f-serif); font-size:1.06rem; font-weight:600; line-height:1.5; }
.pcard-desc{ font-size:.86rem; color:var(--ink-60); line-height:1.8; flex:1; }
.pcard-foot{ display:flex; align-items:baseline; gap:.6em; margin-top:.5em; padding-top:.9em; border-top:1px solid var(--line); }
.price{ font-family:var(--f-serif); font-size:1.32rem; font-weight:600; color:var(--green-deep); }
.price-was{ font-size:.82rem; color:var(--ink-38); text-decoration:line-through; }
.price-unit{ font-size:.76rem; color:var(--ink-38); margin-left:auto; }
.pcard-buy{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  margin-top:.9em; padding:.78em 1em; border-radius:var(--r-sm);
  background:var(--green); color:var(--cream);
  font-size:.88rem; letter-spacing:.06em;
  transition:background .3s var(--ease);
}
.pcard-buy:hover{ background:var(--green-deep); }
.pcard-buy .arw{ transition:transform .3s var(--ease); }
.pcard-buy:hover .arw{ transform:translateX(3px); }
.stock-warn{ font-size:.75rem; color:var(--amber); letter-spacing:.05em; }

/* ==========================================================================
   產區
   ========================================================================== */
.grid-o{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(14px,2vw,22px); }
.ocard{
  position:relative; border-radius:var(--r); overflow:hidden;
  min-height:290px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 20px; color:#fff;
  background:linear-gradient(168deg,#7e9682 0%,#4e6a54 50%,#26341f 100%);
  transition:transform .5s var(--ease);
}
.ocard:hover{ transform:translateY(-5px); }
.ocard::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(15,24,16,.62) 100%);
}
.ocard > *{ position:relative; }
.ocard-alt{ font-family:var(--f-en); font-size:.66rem; letter-spacing:.16em; color:var(--yellow); margin-bottom:.7em; }
.ocard-name{ font-family:var(--f-serif); font-size:1.28rem; font-weight:600; letter-spacing:.06em; }
.ocard-desc{ margin-top:.7em; font-size:.83rem; line-height:1.8; color:rgba(255,253,247,.8); }

/* ==========================================================================
   產區互動地圖（MapLibre，無需 token）
   ========================================================================== */
.omap-wrap{
  display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(18px,2.6vw,30px); align-items:stretch;
}
.omap{
  position:relative; min-height:clamp(360px,52vh,540px);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-m); background:#dfe6da;
}
.omap canvas{ outline:none; }
.omap-hint{
  position:absolute; left:14px; bottom:14px; z-index:2;
  background:rgba(255,253,247,.9); backdrop-filter:blur(8px);
  padding:.5em 1em; border-radius:999px;
  font-size:.76rem; letter-spacing:.05em; color:var(--ink-60);
  box-shadow:var(--shadow-s); pointer-events:none;
}
/* 茶罐造型金針 */
.omark{ cursor:pointer; transform-origin:50% 100%; transition:transform .3s var(--ease); }
.omark:hover{ transform:scale(1.14) translateY(-2px); }
.omark.on{ transform:scale(1.2) translateY(-3px); }
.omark svg{ display:block; filter:drop-shadow(0 3px 7px rgba(20,32,22,.42)); }

/* 產區詳情卡 */
.opanel{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-s); display:flex; flex-direction:column;
}
.opanel-alt{
  font-family:var(--f-en); font-size:.7rem; letter-spacing:.2em;
  color:var(--amber); text-transform:uppercase;
}
.opanel h3{ font-size:clamp(1.5rem,2.8vw,2rem); margin:.5em 0 .1em; letter-spacing:.06em; }
.opanel-en{ font-family:var(--f-en); font-size:.72rem; letter-spacing:.18em; color:var(--linen); }
.opanel-meta{ display:flex; gap:20px; flex-wrap:wrap; margin:1.5em 0 1.2em; padding-block:1.1em; border-block:1px solid var(--line); }
.opanel-meta div span{ display:block; font-size:.7rem; letter-spacing:.1em; color:var(--ink-38); margin-bottom:.4em; }
.opanel-meta div b{ font-family:var(--f-serif); font-size:1.02rem; font-weight:600; color:var(--green-deep); }
.opanel-desc{ font-size:.9rem; line-height:2; color:var(--ink-60); flex:1; }
.opanel-tea{ margin-top:1.4em; padding-top:1.2em; border-top:1px solid var(--line); }
.opanel-tea span{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-38); display:block; margin-bottom:.6em; }
.opanel-tea a{
  display:inline-flex; align-items:center; gap:.5em; font-size:.92rem;
  color:var(--green); border-bottom:1px solid var(--line); padding-bottom:.24em;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.opanel-tea a:hover{ border-color:var(--green); gap:.85em; }

/* 產區切換列 */
.ochips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(18px,2.4vw,26px); }
.ochip{
  padding:.55em 1.15em; border-radius:999px; font-size:.86rem; letter-spacing:.05em;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-60);
  cursor:pointer; transition:all .3s var(--ease);
}
.ochip:hover{ border-color:var(--green); color:var(--green); }
.ochip.on{ background:var(--green); color:var(--cream); border-color:var(--green); }

@media (max-width:880px){
  .omap-wrap{ grid-template-columns:1fr; }
  .omap{ min-height:320px; }
}

/* MapLibre 內建 UI 調成品牌調性 */
.maplibregl-ctrl-attrib{ font-size:10px; background:rgba(255,253,247,.82) !important; }
.maplibregl-ctrl-group{ border-radius:10px !important; overflow:hidden; box-shadow:var(--shadow-s) !important; }

/* ==========================================================================
   品質保證
   ========================================================================== */
.grid-q{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,36px); }
.qitem{ text-align:center; padding:6px; }
.qitem .ic{
  width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(68,95,76,.08); color:var(--green);
}
.qitem h3{ font-size:1.05rem; margin-bottom:.6em; }
.qitem p{ font-size:.87rem; color:var(--ink-60); line-height:1.85; }

/* ==========================================================================
   章節（茶間介紹）
   ========================================================================== */
.chapter{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(26px,5vw,72px); margin-bottom:clamp(56px,8vw,110px);
}
.chapter:nth-child(even) .chapter-media{ order:2; }
.chapter-media{
  aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg,#8ba28e,#4c6752 55%,#2b3a2b);
  display:grid; place-items:center; box-shadow:var(--shadow-m);
}
.chapter-media img{ width:100%; height:100%; object-fit:cover; }
.ph-note{
  font-size:.8rem; letter-spacing:.1em; color:rgba(255,253,247,.62);
  border:1px dashed rgba(255,253,247,.34); padding:.7em 1.2em; border-radius:999px;
}
.chapter-no{ font-family:var(--f-en); font-size:.68rem; letter-spacing:.28em; color:var(--amber); margin-bottom:1em; }

/* ==========================================================================
   評論
   ========================================================================== */
.rv-summary{
  display:flex; align-items:center; gap:clamp(18px,3vw,42px);
  flex-wrap:wrap; padding:clamp(24px,3.4vw,38px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-s); margin-bottom:34px;
}
.rv-score{ font-family:var(--f-serif); font-size:clamp(2.4rem,5vw,3.2rem); font-weight:600; color:var(--green-deep); line-height:1; }
.rv-stars{ color:var(--amber); letter-spacing:.14em; font-size:1.05rem; }
.rv-meta{ font-size:.85rem; color:var(--ink-60); margin-top:.4em; }
.grid-r{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2.2vw,24px); }
.rcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; gap:.85em;
}
.rcard-head{ display:flex; align-items:center; gap:12px; }
.rcard-av{
  width:40px; height:40px; border-radius:50%; flex:0 0 40px;
  display:grid; place-items:center; background:var(--green); color:var(--cream);
  font-family:var(--f-serif); font-size:1.02rem;
}
.rcard-name{ font-weight:500; font-size:.95rem; }
.rcard-sub{ font-size:.76rem; color:var(--ink-38); }
.rcard-text{ font-size:.9rem; line-height:1.9; color:var(--ink-60); }
.rcard-reply{
  margin-top:.3em; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(68,95,76,.055); font-size:.84rem; line-height:1.85; color:var(--ink-60);
}
.rcard-reply b{ display:block; color:var(--green); font-size:.78rem; letter-spacing:.06em; margin-bottom:.4em; font-weight:500; }

/* ==========================================================================
   頁首（內頁）
   ========================================================================== */
.phero{
  position:relative; padding:clamp(150px,17vw,220px) 0 clamp(52px,7vw,86px);
  background:linear-gradient(168deg,var(--green) 0%,var(--green-deep) 100%);
  color:#fff; overflow:hidden;
}
.phero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 74% at 78% 6%,rgba(255,239,133,.16),transparent 66%);
}
.phero .lead{ color:rgba(250,246,236,.8); margin-top:1.2em; }
.crumb{ margin-top:2.4em; font-size:.78rem; letter-spacing:.09em; color:rgba(250,246,236,.56); }
.crumb a:hover{ color:var(--yellow); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{ background:var(--green-ink); color:rgba(250,246,236,.72); padding-block:clamp(52px,7vw,80px) 30px; }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
.ftr h4{ font-family:var(--f-sans); font-size:.78rem; letter-spacing:.17em; color:var(--yellow); margin-bottom:1.4em; font-weight:500; }
.ftr-brand-cn{ font-family:var(--f-serif); font-size:1.3rem; color:#fff; letter-spacing:.1em; }
.ftr-brand-en{ font-family:var(--f-en); font-size:.6rem; letter-spacing:.26em; color:var(--linen); margin-top:.6em; }
.ftr p, .ftr li{ font-size:.86rem; line-height:2; }
.ftr ul{ list-style:none; margin:0; padding:0; }
.ftr a:hover{ color:var(--yellow); }
.ftr-social{ display:flex; gap:9px; margin-top:1.5em; }
.ftr-social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(250,246,236,.2); transition:.3s var(--ease);
}
.ftr-social a:hover{ background:var(--yellow); color:var(--green-ink); border-color:var(--yellow); }
.ftr-btm{
  margin-top:clamp(34px,5vw,54px); padding-top:24px;
  border-top:1px solid rgba(250,246,236,.13);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.76rem; color:rgba(250,246,236,.46);
}

/* ==========================================================================
   背景音樂鈕（左下）
   ========================================================================== */
.music{
  position:fixed; left:20px; bottom:20px; z-index:75;
  display:flex; align-items:center; gap:0;
  height:46px; padding:0 4px 0 0;
  border-radius:999px;
  background:rgba(255,253,247,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(68,95,76,.14);
  box-shadow:0 6px 22px rgba(31,46,33,.13);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
  overflow:hidden;
}
.music:hover{ box-shadow:0 10px 28px rgba(31,46,33,.19); }
.music-btn{
  width:46px; height:46px; flex:0 0 46px;
  display:grid; place-items:center; color:var(--green);
  border-radius:50%;
}
.music-label{
  font-size:.78rem; letter-spacing:.09em; color:var(--ink-60);
  max-width:0; opacity:0; white-space:nowrap;
  transition:max-width .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  padding-right:0;
}
.music:hover .music-label{ max-width:140px; opacity:1; padding-right:14px; }

/* 播放中：等化器動畫 */
.music .eq{ display:none; gap:2px; align-items:flex-end; height:15px; }
.music .eq i{ display:block; width:2.5px; background:var(--green); border-radius:2px; animation:eq 1s ease-in-out infinite; }
.music .eq i:nth-child(1){ height:60%; animation-delay:0s; }
.music .eq i:nth-child(2){ height:100%; animation-delay:.18s; }
.music .eq i:nth-child(3){ height:45%; animation-delay:.36s; }
.music .eq i:nth-child(4){ height:80%; animation-delay:.54s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.music.playing .ic-note{ display:none; }
.music.playing .eq{ display:flex; }
.music.playing{ background:var(--green); border-color:var(--green); }
.music.playing .music-btn{ color:var(--cream); }
.music.playing .music-label{ color:rgba(250,246,236,.86); }
.music.playing .eq i{ background:var(--yellow); }

@media (prefers-reduced-motion: reduce){ .music .eq i{ animation:none; } }

/* YouTube 播放器藏起來，只取聲音 */
#ytHost{ position:fixed; width:1px; height:1px; left:-9999px; top:-9999px; opacity:0; pointer-events:none; }

/* ==========================================================================
   手機
   ========================================================================== */
@media (max-width:880px){
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .chapter{ grid-template-columns:1fr; }
  .chapter:nth-child(even) .chapter-media{ order:0; }
  .ftr-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .burger{ display:flex; }
  .hdr-in{ padding:10px 12px 10px 16px; }
  .nav{
    position:fixed; inset:76px 14px auto; margin:0;
    flex-direction:column; gap:2px; padding:14px;
    background:rgba(255,253,247,.97); backdrop-filter:blur(18px);
    border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-l);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:.34s var(--ease);
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:.85em 1em; }
  .nav a[aria-current="page"]::after{ display:none; }
  .brand-en{ display:none; }
  .btn-line span{ display:none; }
  .btn-line{ padding:.62em .8em; }
  /* 底部固定購買列 */
  .mobile-buy{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
    display:flex; gap:8px;
  }
  /* 手機上音樂鈕上移，避開購買列 */
  .music{ left:12px; bottom:76px; height:40px; }
  .music-btn{ width:40px; height:40px; flex:0 0 40px; }
  .music:hover .music-label{ max-width:0; opacity:0; padding-right:0; }
  .mobile-buy a{
    flex:1; text-align:center; padding:.95em; border-radius:999px;
    font-size:.92rem; letter-spacing:.05em; box-shadow:var(--shadow-l);
  }
}
@media (min-width:761px){ .mobile-buy{ display:none; } }