/*
============================================================
🎨 初學者友善註解版（styles.css）
------------------------------------------------------------
設計理念：
- 以 CSS 變數（Design Tokens）管理顏色、圓角、陰影、spacing、斷點。
- 元件化命名（.card、.tile、.btn…）+ 修飾（--alt、--sm、--lg）。
- 手機優先（Mobile-first）與實務斷點（1100px 因應 IG/內建瀏覽器）。
- 無障礙細節：:focus-visible 樣式、scroll-margin-top 避免錨點被 header 蓋住。
============================================================
*/
/* =========================
   Design Tokens / 色彩 / 斷點
   ========================= */
/* 基本 Design Tokens：可在此統一調色與尺寸 */
:root{
  --bg:#ffffff; --ink:#0f172a; --muted:#5f6b7a; --line:#e8edf2; --paper:#f8fafc; --sand:#f5f2ea;
  --accent:#0f766e; --accent-strong:#115e59;
  --support:#f59e0b;
  --radius:14px; --radius-lg:18px; --maxw:1200px;
  --s1:8px; --s2:12px; --s3:16px; --s4:20px; --s5:28px; --s6:40px; --s7:64px;
  --shadow-sm:0 8px 18px rgba(0,0,0,.06);
  --shadow-md:0 12px 26px rgba(0,0,0,.08);
  --shadow-lg:0 18px 40px rgba(0,0,0,.12);
  /* 導覽列高度（錨點位移用；手機會覆寫） */
  --header-h: 68px;
}
/* 各 section 可覆寫的主色 */
/* 基本 Design Tokens：可在此統一調色與尺寸 */
:root{
  --tone-teal:#0ea5a7; --tone-teal-2:#0b766d;
  --tone-sky:#3b82f6;  --tone-sky-2:#1e40af;
  --tone-amber:#f59e0b;--tone-amber-2:#b45309;
  --tone-coral:#f97316;--tone-coral-2:#c2410c;
  --tone-violet:#8b5cf6;--tone-violet-2:#6d28d9;
}
.tone-teal    { --accent:var(--tone-teal);   --accent-strong:var(--tone-teal-2); }
.tone-sky     { --accent:var(--tone-sky);    --accent-strong:var(--tone-sky-2); }
.tone-amber   { --accent:var(--tone-amber);  --accent-strong:var(--tone-amber-2); }
.tone-coral   { --accent:var(--tone-coral);  --accent-strong:var(--tone-coral-2); }
.tone-violet  { --accent:var(--tone-violet); --accent-strong:var(--tone-violet-2); }

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.7 Manrope, system-ui, -apple-system, "PingFang TC","Noto Sans TC", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
img{display:block; width:100%; height:auto}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}
@media (min-width:1400px){ .container{padding:0 var(--s4)} }

/* 鍵盤跳主內容 */
/* 跳過導覽（Skip link）：僅在鍵盤聚焦時顯示，滑鼠使用者不會看到 */
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s3); top:calc(env(safe-area-inset-top) + var(--s3)); background:var(--ink); color:#fff; padding:var(--s2) var(--s3); border-radius:10px}

/* 錨點滾動位移：跟著導覽高度 */
/* 錨點滾動位移：避免點錨點時被 sticky header 擋住 */
section{scroll-margin-top: calc(var(--header-h) + 16px)}

/* =========================
   Header / Nav
   ========================= */
/* Sticky Header：固定在頂端 + 玻璃擬態背景（backdrop-filter） */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.brand{font-weight:800; letter-spacing:.3px}

.menu-toggle{display:none; border:0; background:transparent; padding:8px; border-radius:10px}
.menu-toggle:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 70%, #000 30%)}

.nav{display:flex; gap:var(--s3)}
.nav a{padding:8px 10px; border-radius:10px}
.nav a:hover{background:var(--paper)}
.accentbar{height:3px; background:linear-gradient(90deg, var(--accent), var(--accent-strong))}

/* ===== 手機 / IG 內建瀏覽器：把斷點拉高到 1100px ===== */
/*
  RWD 斷點：
  - 1100px 是針對部分行動瀏覽器 UI 佔用高度，
    將桌機導覽轉為抽屜式（.nav.open 切換進出場）。
*/
@media (max-width: 1100px){
  /* 基本 Design Tokens：可在此統一調色與尺寸 */
:root{ --header-h: 56px; } /* 手機導覽較矮，錨點位移也更新 */

  .menu-toggle{ display:inline-grid; place-items:center }

  /* 預設關閉：完全不可見不可點，避免撐出你截圖那條大白塊 */
  .nav{
    position:fixed; left:0; right:0;
    top: calc(var(--header-h) + env(safe-area-inset-top,0px));
    /* 舊版 iOS 相容 */
    top: calc(var(--header-h) + constant(safe-area-inset-top,0px));

    z-index:70; width:100vw; max-height:75vh; overflow:auto;
    display:grid; gap:0; background:#fff;
    border-top:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.16);

    transform:translateY(-120%); opacity:0; visibility:hidden; pointer-events:none;
    bottom:auto;
  }
  .nav a{padding:16px 20px; border-radius:0}

  /* 打開時 */
  .nav.open{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto }

  .nav-backdrop{
    position:fixed; inset:0; z-index:60;
    background:rgba(15,23,42,.28); backdrop-filter: blur(2px);
  }
}
.nav-backdrop[hidden]{ display:none }

/* =========================
   Type
   ========================= */
.display{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(34px, 5.2vw, 56px);
  line-height:1.12; margin:.2em 0 .35em;
  text-wrap:balance;
}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.lede{font-size:clamp(16px, 2.4vw, 18px); color:var(--muted); max-width:62ch}
.h2{font-family:"Playfair Display", Georgia, serif; font-size:clamp(24px, 3.6vw, 30px); margin:0}
.h4{font-size:18px; margin:0; font-weight:800}
.h5{font-size:16px; margin:0; font-weight:800}
.kicker{color:var(--muted)}
.meta{color:var(--muted)}

/* 超窄螢幕（≤360px）再縮排版 */
@media (max-width: 360px){
  .display{ font-size:28px; line-height:1.15 }
  /* 首屏 Hero：用多層漸層打造柔和背景，並保留可讀性 */
.hero{ padding:28px 0 24px }
  .texture{ opacity:.12 }
  .cta{ gap:12px }
}

/* =========================
   Hero
   ========================= */
/* 首屏 Hero：用多層漸層打造柔和背景，並保留可讀性 */
.hero{
  position:relative;
  padding:clamp(36px, 6vw, 64px) 0 var(--s5);
  background:
    radial-gradient(700px 360px at 85% -120px, color-mix(in oklab, var(--accent) 20%, #fff 80%), transparent 62%),
    radial-gradient(520px 260px at 5% -60px, color-mix(in oklab, var(--accent-strong) 14%, #fff 86%), transparent 60%),
    linear-gradient(180deg, #fff 0, #fff 72%, var(--paper) 100%);
}
.texture{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 2px, transparent 2px 7px); opacity:.6}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s4); align-items:center}
.hero__points{display:flex; gap:var(--s3); flex-wrap:wrap; list-style:none; padding:0; margin:var(--s2) 0 0; color:var(--muted)}
.cta{display:flex; gap:var(--s3); margin:var(--s3) 0; flex-wrap:wrap}

.hero__media{display:grid; gap:var(--s3)}
.frame{margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg)}
.frame img{aspect-ratio:16/9}
.frame figcaption{font-size:13px; color:var(--muted); padding:8px 12px}

.thumbnails{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
/* 小縮圖樣式與 caption */
.thumb { margin:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm)}
.thumb img { aspect-ratio:1/1; display:block }
.thumb figcaption { font-size:13px; color:var(--muted); padding:8px 12px }

.wave{display:block; width:100%; height:90px}
.wave path{fill:var(--paper)}

/*
  RWD 斷點：
  - 1100px 是針對部分行動瀏覽器 UI 佔用高度，
    將桌機導覽轉為抽屜式（.nav.open 切換進出場）。
*/
@media (max-width: 1100px){ .hero__grid{grid-template-columns:1fr} }
@media (max-width: 360px){
  .cta > /* 按鈕基礎樣式：
   - 用 CSS 變數定義主色，modifier（data-tone）可覆寫。
   - 內建 hover/active/keyboard 等狀態。
*/
.btn{ width:100% }
  .hero__points{ gap:8px }
}

/* =========================
   Buttons（含 ripple）
   ========================= */
/* 按鈕基礎樣式：
   - 用 CSS 變數定義主色，modifier（data-tone）可覆寫。
   - 內建 hover/active/keyboard 等狀態。
*/
.btn{
  --btn-accent: var(--accent, var(--tone-teal));
  --btn-accent-2: var(--accent-strong, var(--tone-teal-2));
  position:relative; display:inline-grid; place-items:center;
  padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--line); cursor:pointer; user-select:none; line-height:1;
  transition: transform .12s ease, box-shadow .18s ease, background-position .35s ease,
             background-color .18s ease, color .18s ease, border-color .18s ease;
  outline:none; text-decoration:none; overflow:hidden;
}
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none!important; box-shadow:none!important }
.btn[data-tone="teal"]   { --btn-accent:var(--tone-teal);   --btn-accent-2:var(--tone-teal-2); }
.btn[data-tone="sky"]    { --btn-accent:var(--tone-sky);    --btn-accent-2:var(--tone-sky-2); }
.btn[data-tone="amber"]  { --btn-accent:var(--tone-amber);  --btn-accent-2:var(--tone-amber-2); }
.btn[data-tone="coral"]  { --btn-accent:var(--tone-coral);  --btn-accent-2:var(--tone-coral-2); }
.btn[data-tone="violet"] { --btn-accent:var(--tone-violet); --btn-accent-2:var(--tone-violet-2); }

.btn--solid{
  color:#fff; border:none;
  background:linear-gradient(100deg, var(--btn-accent) 0%, var(--btn-accent-2) 50%, var(--btn-accent) 100%);
  background-size:200% 100%; box-shadow:0 10px 24px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.2) inset;
}
.btn--solid:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(0,0,0,.14); background-position:100% 0; }
.btn--solid:active{ transform:translateY(0) scale(.985); box-shadow:0 6px 14px rgba(0,0,0,.10) }

.btn--outline{ background:#fff; color:var(--btn-accent); border-color: color-mix(in oklab, #000 12%, var(--btn-accent) 88%); }
.btn--outline:hover{ background: color-mix(in oklab, #fff 88%, var(--btn-accent) 12%); box-shadow: 0 0 0 6px color-mix(in oklab, var(--btn-accent) 16%, #fff 84%); }
.btn--outline:active{ transform: translateY(0) scale(.985) }

.btn--glass{
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45));
  backdrop-filter: blur(6px) saturate(120%); color:var(--btn-accent);
  border-color:rgba(255,255,255,.6); box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.btn--sm{ padding:10px 14px; border-radius:10px; font-size:14px }
.btn--lg{ padding:14px 22px; border-radius:14px; font-size:18px }
.btn:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 5px color-mix(in oklab, var(--btn-accent) 70%, #000 30%) }

/* sheen + ripple */
/* sheen 閃光效果：滑過時有一道高光掃過 */
.btn::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%) skewX(-16deg); transition: transform .6s ease;
}
.btn:hover::before{ transform: translateX(120%) skewX(-16deg) }
/* ripple 水波動畫：搭配 JS 注入 .ripple span */
.btn .ripple{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background: color-mix(in oklab, #fff 45%, var(--btn-accent) 55%); opacity:.35; pointer-events:none;
  animation: btn-ripple .6s ease-out forwards; filter: blur(.3px);
}
@keyframes btn-ripple{ to{ transform:translate(-50%,-50%) scale(18); opacity:0 } }

/* =========================
   Sections / Common
   ========================= */
.section{padding:clamp(36px, 6vw, 64px) 0}
.section--alt{background:var(--sand)}
.section__head{display:flex; align-items:flex-end; gap:12px; margin:0 0 var(--s3)}
.index{display:inline-block; font-weight:800; color:#fff; background:var(--accent-strong); padding:4px 10px; border-radius:999px}

/* Cards */
.cards{display:grid; gap:var(--s3)}
.cards--auto{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--line) 50%, var(--accent) 50%)}
.card__bar{height:4px; background:var(--accent)}
.card__media{aspect-ratio:3/2}
.card__body{padding:14px 16px}

/* Tiles（景點卡） */
.tiles{display:grid; gap:var(--s3); align-items:stretch}
.tiles--auto{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.tile{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md)}
.tile__media{position:relative}
.tile__media img{aspect-ratio:3/2}
.badge{position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:999px; color:#fff;
  background:linear-gradient(90deg, var(--accent), var(--accent-strong)); font-weight:800; font-size:12px; box-shadow:0 8px 18px rgba(0,0,0,.12)}
.tile__body{padding:14px 16px; display:flex; flex-direction:column; min-height:100%}
.tile__body > /* 按鈕基礎樣式：
   - 用 CSS 變數定義主色，modifier（data-tone）可覆寫。
   - 內建 hover/active/keyboard 等狀態。
*/
.btn{ margin-top:auto; } /* 讓按鈕齊底 */

/* Menus（美食） */
.menus{display:grid; gap:var(--s3)}
.menus--auto{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.menu{display:grid; grid-template-rows:auto 1fr; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md)}
.menu img{aspect-ratio:3/2}
.menu__body{padding:14px 16px; border-left:4px solid var(--accent); display:flex; flex-direction:column}
.menu__body .cta{ margin-top:auto; }
.menu__body ul{margin:8px 0 10px; padding-left:18px}

/* Steps（交通） */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.step{display:grid; grid-template-columns:96px 1fr; gap:var(--s3); padding:var(--s3); border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); position:relative}
.step::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-top-left-radius:14px; border-bottom-left-radius:14px}
.step__media img{width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}
/*
  RWD 斷點：
  - 1100px 是針對部分行動瀏覽器 UI 佔用高度，
    將桌機導覽轉為抽屜式（.nav.open 切換進出場）。
*/
@media (max-width: 1100px){ .steps{grid-template-columns:1fr} }

/* Banners（活動） */
.banners{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.banners--auto{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.banner{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column}
.banner__media{position:relative}
.banner__media img{aspect-ratio:16/9}
.pill{position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px; background:var(--support); color:#1b1204; font-weight:800; box-shadow:0 6px 14px rgba(0,0,0,.12)}
.banner p{padding:10px 14px; margin:0}
.banner .cta{margin-top:auto; padding:10px 14px}

/* About */
.about{display:grid; gap:var(--s3)}
.about--auto{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.aboutcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md)}
.aboutcard img{aspect-ratio:16/9}
.aboutcard__body{padding:14px 16px; display:flex; flex-direction:column}
.aboutcard__body .cta{ margin-top:auto; }

/* Map */
.map-embed{border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); background:#fff}
.map-embed iframe{width:100%; height:440px; display:block; border:0}
@media (max-width: 720px){ .map-embed iframe{ height:320px } }
@media (max-width: 480px){ .map-embed iframe{ height:260px } }

/* Contact（明信片表單） */
.postcard{position:relative; border:1px solid var(--line); border-radius:18px; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, var(--accent), var(--accent-strong)) border-box; box-shadow:var(--shadow-md); padding:1px}
.postcard__cols{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s4); padding:var(--s4); background:#fff; border-radius:17px}
.field{display:grid; gap:6px; margin-bottom:12px}
.field input,.field textarea{border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; outline:none}
.field input:focus,.field textarea:focus{border-color:color-mix(in oklab, var(--line) 40%, var(--accent) 60%); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, #fff 80%)}
.form-msg{margin-top:6px; color:var(--muted)}
/*
  RWD 斷點：
  - 1100px 是針對部分行動瀏覽器 UI 佔用高度，
    將桌機導覽轉為抽屜式（.nav.open 切換進出場）。
*/
@media (max-width: 1100px){ .postcard__cols{grid-template-columns:1fr; gap:var(--s3); padding:var(--s3)} }

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:var(--s5) 0; color:var(--muted); display:flex; align-items:center; justify-content:space-between}
@media (max-width: 720px){ .site-footer{flex-direction:column; gap:8px} }

/* =========================
   Lightbox（圖片放大）
   ========================= */
img[data-zoom] { cursor: zoom-in }
/* Lightbox 覆蓋層：固定定位 + 半透明背景 */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,23,42,.9);
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none }
.lightbox__img {
  max-width: min(96vw, 1200px); max-height: 78vh;
  border-radius: 12px; box-shadow: var(--shadow-lg);
  cursor: zoom-out; background:#111;
}
.lightbox__cap { color:#fff; margin-top:12px; text-align:center; opacity:.85; max-width: min(92vw, 960px) }
.lightbox__close {
  position:absolute; top: clamp(12px, 2.5vw, 24px); right: clamp(12px, 2.5vw, 24px);
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius: 10px; padding: 8px 10px; backdrop-filter: blur(6px); cursor: pointer;
}
.lightbox__close:focus-visible { outline:2px solid #fff }