/* ═══════════════════════════════════════════════════════════════
   賴奇勇官網共用樣式
   松山買房推薦 賴奇勇｜大師房屋 敦北民生

   2026-09-10 從 public/index.html 的 <style> 區塊原樣抽出來。
   抽出來的原因：官網要從單頁改成多頁（首頁／關於我／銷售物件／社區介紹），
   樣式再寫死在單一 HTML 裡，每加一頁就多一份要維護，導覽列改一次要改五個檔。

   🔴 這個檔是全站唯一的樣式來源。改配色、改字體、改版心寬度都改這裡。
      靜態的 index.html 與 Next.js 的頁面都 link 同一份。
   ═══════════════════════════════════════════════════════════════ */

/* ── 大師房屋 CIS ───────────────────────────────────────────── */
:root{
  --master-gold:#C8A24A;
  --master-gold-light:#E2C880;
  --master-gold-dark:#9A7628;
  --master-gold-soft:#F6EEDC;

  --master-ink:#101314;
  --master-forest:#12241D;

  --master-text:#1C1F1E;
  --master-text-muted:#6B6F6C;

  --master-white:#FFFFFF;
  --master-bg:#FAF8F3;
  --master-border:#E4DCC9;

  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --roman:"Marcellus","Noto Serif TC",Georgia,serif;

  --shell:1140px;
  --gutter:clamp(20px,5vw,56px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--master-bg);
  color:var(--master-text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.35;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:36em}

.skip{position:absolute;left:-9999px;top:0;background:var(--master-gold);color:var(--master-ink);padding:10px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--master-gold);outline-offset:3px;border-radius:2px;
}

/* ── 頁首 ───────────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(16,19,20,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(200,162,74,.28);
}
.masthead__in{display:flex;align-items:center;gap:24px;min-height:66px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.brand__mark{
  font-family:var(--roman);font-size:19px;letter-spacing:.24em;
  color:var(--master-gold);line-height:1;padding-right:14px;
  border-right:1px solid rgba(200,162,74,.4);
}
.brand__who{color:#F3EFE6;font-size:15px;letter-spacing:.06em;line-height:1.3}
.brand__who small{display:block;font-size:11px;color:rgba(243,239,230,.6);letter-spacing:.14em}

.nav{display:flex;gap:26px}
.nav a{
  color:rgba(243,239,230,.82);text-decoration:none;font-size:14px;letter-spacing:.05em;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--master-gold-light);border-bottom-color:var(--master-gold)}

.masthead__cta{
  font-family:var(--roman);letter-spacing:.1em;font-size:15px;
  color:var(--master-ink);background:var(--master-gold);
  text-decoration:none;padding:9px 18px;white-space:nowrap;
  transition:background .2s;
}
.masthead__cta:hover{background:var(--master-gold-light)}

.burger{display:none;background:none;border:1px solid rgba(200,162,74,.5);color:var(--master-gold);
  padding:8px 12px;font-size:13px;letter-spacing:.1em;cursor:pointer;font-family:var(--sans)}

@media (max-width:880px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--master-ink);
    border-bottom:1px solid rgba(200,162,74,.3);padding:8px var(--gutter) 18px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .burger{display:block;order:3}
  .masthead__cta{display:none}
}

/* ── 主視覺 ─────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(120% 90% at 88% 12%,rgba(200,162,74,.20),transparent 58%),
    linear-gradient(158deg,var(--master-ink) 0%,var(--master-forest) 100%);
  color:#F3EFE6;
  border-bottom:1px solid var(--master-gold-dark);
  overflow:hidden;
}
.hero__in{
  /* 2026-09-10 賴奇勇：照片調到合適大小。
     400px 寬 × 3:4 = 533px 高，略低於左邊文字區塊（約 565px），底部對齊時剛好齊平。
     原廠是 430px，但當時 figure 的預設邊界吃掉 80px，實際只有 350px。 */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);
  gap:clamp(28px,5vw,64px);align-items:end;
  padding-top:clamp(48px,7vw,84px);
}
.hero__copy{padding-bottom:clamp(48px,7vw,84px)}

.eyebrow{
  font-family:var(--roman);font-size:12px;letter-spacing:.3em;
  color:var(--master-gold);text-transform:uppercase;
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--master-gold-dark),transparent)}

.hero h1{font-size:clamp(30px,5.2vw,50px);color:var(--master-white);letter-spacing:.01em}
.hero h1 .sub{display:block;font-size:clamp(15px,2.2vw,20px);font-family:var(--sans);font-weight:400;
  color:var(--master-gold-light);letter-spacing:.16em;margin-top:14px}
.hero__lead{margin-top:24px;max-width:30em;color:rgba(243,239,230,.86);font-size:16.5px}

.hero__facts{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;border-top:1px solid rgba(200,162,74,.3)}
.hero__facts li{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid rgba(200,162,74,.22)}
.hero__facts li:last-child{border-right:0;margin-right:0}
.hero__facts b{display:block;font-family:var(--roman);font-size:26px;color:var(--master-gold);line-height:1.1;
  font-variant-numeric:tabular-nums}
.hero__facts span{font-size:12.5px;letter-spacing:.12em;color:rgba(243,239,230,.65)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.06em;
  padding:13px 26px;border:1px solid transparent;transition:all .2s;
}
.btn--gold{background:var(--master-gold);color:var(--master-ink)}
.btn--gold:hover{background:var(--master-gold-light)}
.btn--ghost{border-color:rgba(200,162,74,.6);color:var(--master-gold-light);background:transparent}
.btn--ghost:hover{background:rgba(200,162,74,.12)}
.btn--dark{background:var(--master-ink);color:var(--master-gold-light);border-color:var(--master-ink)}
.btn--dark:hover{background:var(--master-forest)}

/* 🔴 2026-09-10：margin:0 不能拿掉。
   <figure> 瀏覽器預設有 margin:1em 40px，左右各吃掉 40px，
   照片會比欄位窄 80px（欄位 330 → 照片只有 250），看起來莫名其妙偏小。 */
.hero__portrait{position:relative;align-self:end;margin:0}
/* 圖檔本身已裁成 3:4 頭肩身，這裡的 cover 只是保險，不會再裁到臉 */
/* 🔴 2026-09-10 修：一定要有 height:auto。
   img 標籤上寫著 height="1120"，那個寫死的高度會贏過 aspect-ratio，
   於是圖框不管欄位多寬永遠 1120px 高，整個主視覺被撐到 1237px（接近兩個螢幕），
   文字上方空出 671px。加上 height:auto 之後 aspect-ratio 才真的生效。 */
.hero__portrait img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;
  filter:saturate(1.02) contrast(1.02);
}
.hero__portrait::before{
  content:"";position:absolute;inset:-14px -14px 0 -14px;
  border:1px solid rgba(200,162,74,.45);border-bottom:0;pointer-events:none;
}
.hero__plate{
  position:absolute;left:-14px;bottom:26px;background:var(--master-gold);color:var(--master-ink);
  padding:8px 16px;font-size:12.5px;letter-spacing:.14em;font-weight:500;
}
@media (max-width:820px){
  .hero__in{grid-template-columns:1fr;align-items:start}
  .hero__copy{padding-bottom:0}
  .hero__portrait{max-width:330px;margin-top:36px}
  .hero__facts li{padding-right:18px;margin-right:18px}
}

/* ── 信任列 ─────────────────────────────────────────────────── */
.trust{background:var(--master-ink);border-bottom:1px solid rgba(200,162,74,.22)}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(200,162,74,.2)}
.trust li{background:var(--master-ink);padding:20px 8px;text-align:center;color:rgba(243,239,230,.9);
  font-size:13.5px;letter-spacing:.08em}
.trust b{color:var(--master-gold);font-weight:500}
@media (max-width:700px){.trust ul{grid-template-columns:repeat(2,1fr)}}

/* ── 區塊骨架（左側標籤欄 + 右側內容） ────────────────────────── */
.band{padding-block:clamp(56px,7vw,96px);border-bottom:1px solid var(--master-border)}
.band--paper{background:var(--master-white)}
.band__grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.band__label{position:sticky;top:96px}
.band__label .idx{font-family:var(--roman);font-size:12px;letter-spacing:.28em;color:var(--master-gold-dark);display:block}
.band__label h2{font-size:clamp(22px,2.6vw,28px);margin-top:10px}
.band__label .rule{width:44px;height:2px;background:var(--master-gold);margin-top:16px}
@media (max-width:820px){
  .band__grid{grid-template-columns:1fr;gap:26px}
  .band__label{position:static}
}

.lede{font-size:17px;color:var(--master-text);margin-bottom:28px}
.muted{color:var(--master-text-muted)}
.note{
  font-size:13.5px;color:var(--master-text-muted);line-height:1.75;
  border-left:2px solid var(--master-gold);padding-left:14px;margin-top:26px;max-width:40em;
}

/* 招牌第二行的羅馬字（2026-09-10 賴奇勇：松山買房推薦下面加回 MASTER） */
.brand__roman{
  display:block;font-family:var(--roman);font-size:11px;letter-spacing:.42em;
  color:var(--master-gold-dark);margin-top:2px;font-weight:400;
}

/* ── 關於 ───────────────────────────────────────────────────── */
/* 2026-09-10 賴奇勇：關於我不要照片，原本的 200px 照片欄拿掉，改單欄。 */
.about{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.5vw,40px);align-items:start}
/* 2026-09-10 賴奇勇：關於我不要照片。樣式留著備用，目前沒有元素套用。 */
.about__photo{border:1px solid var(--master-border);padding:7px;background:var(--master-white)}
.about__photo img{aspect-ratio:1;object-fit:cover}
.about p + p{margin-top:16px}
.about__sig{font-family:var(--serif);font-size:19px;color:var(--master-gold-dark);margin-top:24px}
@media (max-width:640px){.about{grid-template-columns:1fr}.about__photo{max-width:180px}}

/* ── 門市實景 ───────────────────────────────────────────────── */
/* 比正文欄寬一階，寬螢幕才有份量；.shell 之後宣告才蓋得過它的 max-width */
.shell.shop-wrap{max-width:1320px;margin-top:clamp(40px,5vw,60px)}
.shop__title{font-size:clamp(20px,2.4vw,25px);margin:0 0 8px}
.shop__intro{font-size:15px;color:var(--master-text-muted);max-width:40em;margin-bottom:22px}
.shop__hint{
  display:inline-block;margin-left:8px;padding:2px 10px;
  font-size:12px;letter-spacing:.1em;color:var(--master-gold-dark);
  border:1px solid var(--master-border);background:var(--master-gold-soft);
}

.shop{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}
.shop figure{margin:0;position:relative;overflow:hidden;background:var(--master-border)}
.shop__tall{grid-row:span 2}
.shop__wide{aspect-ratio:4/3}

.shop__btn{
  display:block;position:relative;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;
}
.shop__btn img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,.68,0,1)}
.shop__tall .shop__btn img{object-position:50% 45%}
.shop__btn:hover img,.shop__btn:focus-visible img{transform:scale(1.035)}
.shop__btn::after{
  content:"⤢";position:absolute;top:10px;right:10px;
  width:30px;height:30px;display:grid;place-items:center;
  background:rgba(16,19,20,.58);color:#F6F2EA;font-size:14px;line-height:1;
  transition:background .2s,color .2s;
}
.shop__btn:hover::after,.shop__btn:focus-visible::after{background:var(--master-gold);color:var(--master-ink)}

.shop figcaption{
  position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  padding:28px 15px 12px;
  font-size:13px;line-height:1.55;letter-spacing:.03em;color:#F6F2EA;
  background:linear-gradient(transparent,rgba(16,19,20,.55) 42%,rgba(16,19,20,.88));
}
@media (max-width:560px){
  .shop{grid-template-columns:1fr}
  .shop__tall{grid-row:auto;aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){
  .shop__btn img{transition:none}
  .shop__btn:hover img,.shop__btn:focus-visible img{transform:none}
}

/* ── 曝光通路（深色說服段） ─────────────────────────────────── */
.band--dark{
  background:
    radial-gradient(88% 70% at 86% 0%,rgba(200,162,74,.15),transparent 62%),
    linear-gradient(200deg,var(--master-forest),var(--master-ink));
  color:#F3EFE6;border-bottom:1px solid var(--master-gold-dark);
}
.band--dark .band__label h2{color:var(--master-white)}
.band--dark .band__label .idx{color:var(--master-gold)}
.band--dark .lede{color:rgba(243,239,230,.86)}

.expo{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(24px,3.5vw,44px);align-items:start}
.expo__map{margin:0;position:sticky;top:96px}
.expo__map svg{width:100%;height:auto;display:block;
  border:1px solid rgba(200,162,74,.28);background:rgba(0,0,0,.22)}
.expo__map figcaption{margin-top:9px;font-size:12px;letter-spacing:.05em;color:rgba(243,239,230,.5)}

.emap-road{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.13);stroke-width:1}
.emap-dash{stroke:rgba(243,239,230,.20);stroke-width:1.5;stroke-dasharray:8 9;fill:none}
.emap-blk{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.10);stroke-width:1}
.emap-shop{fill:rgba(200,162,74,.15);stroke:var(--master-gold);stroke-width:1.5}
.emap-face{stroke:var(--master-gold-light);stroke-width:5;stroke-linecap:square;fill:none}
.emap-arrow{stroke:var(--master-gold);stroke-width:1.6;fill:none}
.emap-head{fill:var(--master-gold);stroke:none}
.emap-t{fill:rgba(243,239,230,.7);font-family:var(--sans);font-size:11px;letter-spacing:.08em}
.emap-t--gold{fill:var(--master-gold-light);font-family:var(--serif);font-size:14px;letter-spacing:.1em}

.expo__list{display:flex;flex-direction:column;gap:0}
.expo__list li{padding:20px 0;border-top:1px solid rgba(200,162,74,.24)}
.expo__list li:first-child{padding-top:0;border-top:0}
.expo__k{font-family:var(--roman);font-size:11px;letter-spacing:.22em;color:var(--master-gold);display:block;margin-bottom:7px}
.expo__list h3{font-size:18px;color:var(--master-white);margin-bottom:6px}
.expo__list p{font-size:15px;color:rgba(243,239,230,.76);max-width:34em}

.expo__h{font-size:20px;color:var(--master-white);margin:clamp(38px,4.5vw,52px) 0 18px}
.chan{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:rgba(200,162,74,.22);border:1px solid rgba(200,162,74,.22)}
.chan li{background:rgba(16,19,20,.55);padding:18px 20px;font-size:14px;
  color:rgba(243,239,230,.74);line-height:1.75}
.chan b{display:block;font-weight:500;font-size:15px;color:var(--master-gold-light);
  letter-spacing:.04em;margin-bottom:5px}

.expo__close{margin-top:clamp(34px,4vw,46px);border-top:1px solid rgba(200,162,74,.3);padding-top:26px}
.expo__close p{font-size:16px;color:rgba(243,239,230,.88);max-width:38em}
.expo__close p + p{margin-top:14px;color:rgba(243,239,230,.7);font-size:15px}
.expo__close strong{color:var(--master-gold-light)}

@media (max-width:760px){
  .expo{grid-template-columns:1fr}
  .expo__map{position:static;max-width:340px}
}

/* ── 放大檢視 ───────────────────────────────────────────────── */
.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
.lb::backdrop{background:rgba(9,11,11,.90)}
.lb__box{position:relative}
.lb img{
  display:block;margin:0 auto;
  max-width:min(1180px,92vw);max-height:80vh;width:auto;height:auto;
  border:1px solid rgba(200,162,74,.45);background:var(--master-ink);
}
.lb__cap{
  margin:14px 0 0;text-align:center;
  font-size:13.5px;letter-spacing:.05em;color:rgba(246,242,234,.88);
}
.lb__close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;line-height:1;font-size:15px;cursor:pointer;
  color:var(--master-gold-light);background:rgba(16,19,20,.75);
  border:1px solid rgba(200,162,74,.5);font-family:var(--sans);
  transition:background .2s,color .2s;
}
.lb__close:hover{background:var(--master-gold);color:var(--master-ink)}

/* ── 服務區域 ───────────────────────────────────────────────── */
.area-core{
  background:var(--master-gold-soft);border:1px solid var(--master-border);
  padding:22px 24px;margin-bottom:28px;
}
.area-core h3{font-size:19px;margin-bottom:8px}
.streets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.streets li{
  font-size:13.5px;letter-spacing:.04em;background:var(--master-white);
  border:1px solid var(--master-border);padding:5px 13px;color:var(--master-text);
}
.area-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0}
.area-more div{padding:18px 22px 18px 0;border-top:1px solid var(--master-border)}
.area-more h4{font-family:var(--serif);font-size:16px;margin:0 0 6px}
.area-more p{font-size:14px;color:var(--master-text-muted)}

/* ── 戰績（規格表，不用大數字磚） ──────────────────────────────── */
.record{border-top:1px solid var(--master-border)}
.record__row{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(14px,3vw,32px);
  padding:20px 0;border-bottom:1px solid var(--master-border);align-items:baseline;
}
.record__key{font-family:var(--roman);font-size:13px;letter-spacing:.18em;color:var(--master-gold-dark)}
.record__val{font-size:16.5px}
.record__val strong{font-family:var(--serif);font-size:20px;color:var(--master-text)}
.record__val em{display:block;font-style:normal;font-size:14px;color:var(--master-text-muted);margin-top:4px}
@media (max-width:600px){.record__row{grid-template-columns:1fr;gap:4px}}

/* ── 服務項目 ───────────────────────────────────────────────── */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--master-border);border:1px solid var(--master-border)}
.service{background:var(--master-white);padding:30px 26px}
.service__ico{width:38px;height:38px;color:var(--master-gold-dark);margin-bottom:18px}
.service h3{font-size:20px;margin-bottom:6px}
.service .en{font-family:var(--roman);font-size:11.5px;letter-spacing:.22em;color:var(--master-gold-dark);
  text-transform:uppercase;display:block;margin-bottom:14px}
.service p{font-size:15px;color:var(--master-text-muted);line-height:1.85}
.service ul{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.service li{position:relative;padding-left:16px;font-size:14px;color:var(--master-text)}
.service li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--master-gold)}

/* ── 流程（真的有先後順序，所以編號） ─────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(18px,3vw,30px);
  counter-reset:step}
.flow li{counter-increment:step;border-top:2px solid var(--master-gold);padding-top:16px}
.flow li::before{content:"STEP " counter(step);font-family:var(--roman);font-size:11.5px;
  letter-spacing:.22em;color:var(--master-gold-dark);display:block;margin-bottom:8px}
.flow h3{font-size:17px;margin-bottom:6px}
.flow p{font-size:14px;color:var(--master-text-muted)}

/* ── 常見問題 ───────────────────────────────────────────────── */
.faq{border-top:1px solid var(--master-border)}
.faq details{border-bottom:1px solid var(--master-border)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:var(--serif);font-size:17px;font-weight:700;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"＋";position:absolute;right:4px;top:19px;color:var(--master-gold-dark);
  font-size:18px;font-family:var(--sans);transition:transform .2s;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--master-gold-dark)}
.faq__a{padding:0 0 22px;font-size:15.5px;color:var(--master-text-muted);max-width:44em}
.faq__a strong{color:var(--master-text)}

/* ── 預約 ───────────────────────────────────────────────────── */
.booking{
  background:
    radial-gradient(100% 80% at 12% 0%,rgba(200,162,74,.16),transparent 60%),
    linear-gradient(200deg,var(--master-forest),var(--master-ink));
  color:#F3EFE6;padding-block:clamp(56px,7vw,92px);
}
.booking__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(30px,5vw,60px)}
.booking h2{font-size:clamp(24px,3.4vw,34px);color:var(--master-white)}
.booking .lede{color:rgba(243,239,230,.85);margin-top:16px}
.contact-list{margin-top:30px;display:flex;flex-direction:column;gap:0}
.contact-list li{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-top:1px solid rgba(200,162,74,.25)}
.contact-list .k{font-family:var(--roman);font-size:12px;letter-spacing:.2em;color:var(--master-gold);width:76px;flex:none}
.contact-list a{color:var(--master-gold-light);text-decoration:none;font-size:18px;letter-spacing:.06em}
.contact-list a:hover{text-decoration:underline}
.contact-list .v{font-size:15px;color:rgba(243,239,230,.9)}

/* 線上預約系統入口：這一區是主要路徑，下面的表單退為備援 */
.book-cta{
  display:block;text-decoration:none;position:relative;
  background:linear-gradient(135deg,rgba(200,162,74,.18),rgba(200,162,74,.06));
  border:1px solid var(--master-gold);padding:22px 24px;margin-bottom:26px;
  transition:background .25s,transform .25s;
}
.book-cta:hover{background:linear-gradient(135deg,rgba(200,162,74,.3),rgba(200,162,74,.12));transform:translateY(-2px)}
.book-cta__k{
  display:block;font-family:var(--roman);font-size:11.5px;letter-spacing:.24em;
  color:var(--master-gold);text-transform:uppercase;margin-bottom:9px;
}
.book-cta__t{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.4vw,23px);color:var(--master-white);line-height:1.4}
.book-cta__d{display:block;margin-top:9px;font-size:14.5px;line-height:1.75;color:rgba(243,239,230,.8);max-width:32em}
.book-cta__go{
  display:inline-block;margin-top:16px;padding:9px 20px;
  background:var(--master-gold);color:var(--master-ink);
  font-size:14.5px;font-weight:500;letter-spacing:.06em;
}
.book-cta:hover .book-cta__go{background:var(--master-gold-light)}

.form{background:rgba(255,255,255,.05);border:1px solid rgba(200,162,74,.35);padding:clamp(22px,3vw,30px)}
.form h3{font-size:19px;color:var(--master-white);margin-bottom:4px}
.form__hint{font-size:13px;color:rgba(243,239,230,.6);margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:13px;letter-spacing:.1em;color:var(--master-gold-light)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:#F3EFE6;
  background:rgba(0,0,0,.28);border:1px solid rgba(200,162,74,.3);
  padding:11px 13px;width:100%;border-radius:0;
}
.field textarea{resize:vertical;min-height:76px}
.field select option{background:var(--master-ink);color:#F3EFE6}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,239,230,.35)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form__out{
  display:none;margin-top:16px;padding:14px;font-size:13.5px;line-height:1.8;
  background:rgba(0,0,0,.3);border:1px solid rgba(200,162,74,.3);white-space:pre-wrap;
  color:rgba(243,239,230,.9);
}
.form__out.is-on{display:block}
.form__privacy{font-size:12px;color:rgba(243,239,230,.5);margin-top:14px;line-height:1.7}
@media (max-width:860px){.booking__grid{grid-template-columns:1fr}}
@media (max-width:460px){.field-row{grid-template-columns:1fr}}

/* ── 頁尾 ───────────────────────────────────────────────────── */
.foot{background:var(--master-ink);color:rgba(243,239,230,.7);padding-block:44px;font-size:13.5px}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.foot h3{font-family:var(--roman);font-size:13px;letter-spacing:.24em;color:var(--master-gold);margin-bottom:14px}
.foot li{padding:3px 0}
.foot a{color:rgba(243,239,230,.78);text-decoration:none}
.foot a:hover{color:var(--master-gold-light)}
.foot__legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(200,162,74,.2);
  font-size:12px;color:rgba(243,239,230,.45);line-height:1.9}

/* ── 手機底部快捷列 ─────────────────────────────────────────── */
.dock{display:none}
@media (max-width:700px){
  .dock{
    display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:120;
    border-top:1px solid var(--master-gold-dark);
  }
  .dock a{
    display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 6px;
    text-decoration:none;font-size:14.5px;font-weight:500;letter-spacing:.04em;
  }
  .dock .d-call{background:var(--master-ink);color:var(--master-gold-light)}
  .dock .d-line{background:var(--master-forest);color:var(--master-gold-light);
    border-left:1px solid rgba(200,162,74,.3)}
  .dock .d-book{background:var(--master-gold);color:var(--master-ink);font-weight:700}
  body{padding-bottom:56px}
}

/* ── 進場（只位移不淡入，任何時點截圖內容都是可讀的） ────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .6s cubic-bezier(.22,.68,0,1) both}
  @keyframes rise{from{transform:translateY(12px)}to{transform:none}}
}