/* =========================
   Global tokens & resets
========================= */
:root{
  /* Colors */

  --bg-2:#FFFFFF;          /* 純白 */
  --text:#d36073;          /* 主字色（品牌粉） */
  --ink:#333132;           /* 內文深灰 */
  --muted:#7A6F6A;         /* 可可灰 */
  --accent:#b57696a8;      /* 玫瑰棕（半透明） */
  --accent-2:#D7C6BA;      /* 淡玫灰 */
  --line:#E9E2DC;          /* 細線柔灰（原 #472405 會太深） */
  --success:#2E7D32;
  --error:#B00020;

  /* Effects */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow2:0 14px 36px rgba(0,0,0,.12);

  /* Radii */
  --radius:18px;
  --radius-lg:24px;

  /* Gallery cards */
  --card:220px;
  --gap:14px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans TC', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans CJK TC", sans-serif;
  line-height:1.6;

  /* 背景圖＋柔霧 */
  
}


h1,h2,h3,h4{
  font-family:'Noto Serif TC', serif; line-height:1.3; margin:0 0 .5rem;
}
h1{ font-size:clamp(28px,4.5vw,56px) }
h2{ font-size:clamp(22px,3vw,36px) }
h3{ font-size:clamp(18px,2.2vw,24px) }
p{ margin:.5rem 0 1rem }
a{ color:inherit; text-decoration:none }
.container{ width:min(1120px,92%); margin-inline:auto }
.brand { display:inline-flex; align-items:center; line-height:1; }
.brand img { height:70px; width:auto; display:block; }


/* =========================
   Header / Nav
========================= */
.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; background:#fff; padding:.6rem .9rem; border-radius:8px; z-index:9999;
}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:color-mix(in oklab, var(--bg) 70%, white 30%);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
header,
.nav,
.nav-actions {
  position: relative;
  z-index: 1001;
}

/* 保險：避免有透明元素蓋住 header（若有的話） */
header .overlay,
.nav .overlay {
  pointer-events: none;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.8rem 0;
}
.brand{ font-family:'Noto Serif TC', serif; font-weight:700; letter-spacing:.06em; }
.nav a{ opacity:.9 } .nav a:hover{ opacity:1 }
.nav-links{ display:flex; gap:1.2rem; align-items:center; color:#B17844; }
.nav-actions{ display:flex; gap:.6rem; align-items:center; }

/* 桌／平／手機 RWD */
@media (min-width:1024px){ .nav-actions{ justify-content:flex-end; gap:.7rem } }
@media (min-width:641px) and (max-width:1023px){
  .nav-actions{ gap:.5rem } .nav-actions .btn{ padding:.5rem .7rem }
}
@media (max-width:640px){
  .nav-actions{ gap:.35rem; justify-content:flex-end; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .nav-actions::-webkit-scrollbar{ display:none }
  .nav-actions .btn{ border-radius:12px; padding:.45rem .6rem; font-size:.92rem }
  .nav-actions .label{ display:none } .nav-actions .icon{ width:22px; height:22px }
  .nav-actions .chip{ padding:.32rem .6rem; font-size:.9rem; text-align:center }
}
@media (max-width:420px){ .nav-actions .chip{ display:none } }

/* 桌機下拉選單 */
.nav-item{ position:relative }
.nav-item .submenu{
  position:absolute; top:100%; left:0; min-width:160px;
  background:#fff; border:1px solid #eee; padding:.6rem 0; border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.08); display:none;
}
.nav-item:hover .submenu{ display:block }
.submenu a{
  display:block; padding:.4rem .9rem; font-size:.95rem; color:#333; white-space:nowrap;
}
.submenu a:hover{ background:#fac5c5bb }

/* 漢堡按鈕（合併為一份） */
.hamburger{
  display:none; position:relative; width:40px; height:40px; z-index:70;
  border-radius:999px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg-2) 80%, white 20%);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  justify-content:center; align-items:center; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hamburger:hover{ box-shadow:var(--shadow) }
.hamburger:active{ transform:scale(.98) }
.hamburger span{
  position:absolute; left:50%; width:18px; height:2px; border-radius:2px;
  background:#B58E76; transform:translateX(-50%); transition:.25s cubic-bezier(.2,.7,.2,1);
}
.hamburger span:nth-child(1){ top:14px }
.hamburger span:nth-child(2){ top:19px }
.hamburger span:nth-child(3){ top:24px }
.hamburger.open span:nth-child(1){ top:19px; transform:translateX(-50%) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ top:19px; transform:translateX(-50%) rotate(-45deg) }
@media (max-width:880px){ .nav-links{ display:none } .hamburger{ display:flex } }
/* ===== Drawer 疊放層級修正（確保可點到關閉鈕） ===== */
header{ z-index: 1001; }                 /* 保持原設定 */
.overlay{ z-index: 1990 !important; }    /* 背景遮罩在 header 之上 */
.drawer{ z-index: 2000 !important; }     /* 抽屜 > 遮罩 > header */
/* Drawer（合併為一份） */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(78%,340px);
  background:var(--bg-2); border-top-left-radius:20px; border-bottom-left-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transform:translateX(100%); transition:.35s cubic-bezier(.2,.7,.2,1);
  z-index:60; display:flex; flex-direction:column; color:#D1B26E;
}
.drawer.open{ transform:translateX(0) }
.drawer .hd{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.2rem; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(6px);
  background:color-mix(in oklab, var(--bg) 85%, white 15%);
}
.drawer a{ padding:1rem 1.2rem; border-bottom:1px dashed var(--line) }
.drawer details{ margin:.4rem 0 }
.drawer details summary{ padding:.6rem 0; cursor:pointer }
.drawer details a{ display:block; padding:.3rem 1rem; font-size:.95rem }

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.3s; z-index:55;
}
.overlay.show{ opacity:1; pointer-events:auto }
/* =========================
   Buttons & Chips
========================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.2rem; border-radius:999px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:.25s ease; border:1px solid transparent;
}
.btn-primary{
  background:var(--text); color:#fff; border:none;
  padding:12px 20px; border-radius:999px; font-weight:700; letter-spacing:.6px;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow2) }
.btn-primary:active{ transform:translateY(0) }

.btn-ghost{
  background:rgba(255,255,255,.55);
  border:1px solid var(--text); color:var(--text);
}
.btn-ghost:hover{ transform:translateY(-1px) }

.tag{
  display:inline-block; font-size:.75rem; padding:.25rem .6rem;
  border-radius:999px; background:#cea0b8d0; color:#f6f6f6; margin-right:.4rem;
}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--text);
  font-size:.8rem; color:var(--text);
}