/* ==========================================================================
   韋諾帕 Wenopa — 「地圖動線」版式覆寫層（Q13，使用者 2026-10-07 選定）
   載入順序：Google Fonts（Noto Sans TC＋Manrope）→ wenopa.css → wenopa-map.css。全站共用。
   只改 token 與元件外觀，不改 class 名稱與 HTML。對比值寫在 dir-e-notes.md。
   版型語言：淡薄荷底當「地圖」，白色浮動資訊卡當「面板」，
   章節目錄與章節欄畫成路線＋站點，目前章節是紅色「目前位置」。
   ========================================================================== */

:root{
  --ink:#0F2A3F;        /* 標題與主文字：深海藍（14.75 on white） */
  --ink-2:#22394D;
  --body:#3D5265;       /* 正文（8.10 white / 7.31 paper） */
  --mute:#526679;       /* 次要文字（5.94 white / 5.05 sky） */
  --mute-2:#4F6982;     /* 次要文字二（5.71 white / 4.86 sky） */
  --line:#D2E1E3;
  --line-2:#BFD3D8;
  --paper:#EDF5F3;      /* 頁面底：淡薄荷，地圖的「陸地」 */
  --bg:#E3EEF8;         /* 淡天空藍：提示、表頭、晶片底 */
  --land:#DCEDE8;       /* 首屏地圖底 */
  --park:#C7E5D0;       /* 地圖公園塊 */
  --water:#C9DFF5;      /* 地圖水域塊 */
  --road:#FFFFFF;

  --blue:#0B5BC2;       /* 路線色（文字／連結／白字底）6.38 on white */
  --blue-d:#08479A;
  --route:#1570EF;      /* 路線色（只畫線條、圓點，不當小字） */
  --route-soft:#B6D3F6; /* 尚未走過的實線、外環 */
  --route-dot:#9DB3C4;  /* 尚未走過的虛線 */
  --pin:#D63A27;        /* 目前位置大頭針（白字 4.67） */
  --pin-ink:#C0301F;    /* 紅色當文字（5.70 on white） */
  --amber:#F4A51C;      /* 第二針色：起點、提醒（只做色塊） */
  --accent:#D63A27;
  --accent-ink:#C0301F;
  --danger:#A8261C;
  --danger-bg:#FFF3F0;
  --danger-ink:#4A2320;
  --green:#06C755;      /* LINE 官方綠，使用者決定不改 */
  --on-dark:#E8F1FD;
  --on-dark-2:#D5E6FB;
  --on-dark-3:#C4DAF7;
  --dark-line:#3A78C9;

  --num:"Manrope","Noto Sans TC",-apple-system,sans-serif;
  --mono:"Manrope","Noto Sans TC",-apple-system,sans-serif;

  --r-s:12px;
  --r:18px;
  --r-l:24px;
  --sh-s:0 1px 2px rgba(15,42,63,.06),0 2px 8px -2px rgba(15,42,63,.10);
  --sh:0 1px 3px rgba(15,42,63,.06),0 10px 28px -10px rgba(15,42,63,.20);
  --sh-l:0 2px 6px rgba(15,42,63,.06),0 22px 48px -18px rgba(15,42,63,.28);

  --stop:36px;          /* 章節站點直徑 */
  --gut:58px;           /* 章節欄左側路線寬 */
}

body{ background:var(--paper); color:var(--ink) }
a{ color:var(--blue) }
a:hover{ color:var(--blue-d) }
.eyebrow{ font-family:var(--num); font-weight:700; font-size:11.5px; letter-spacing:.12em; color:var(--ink-2) }
.skip{ background:var(--blue); border-radius:0 0 var(--r-s) 0 }
:focus-visible{ outline:3px solid var(--route); outline-offset:2px; border-radius:6px }

/* 正文連結：柔和底線，像地圖上的可點地名 */
.ch p a,.ch dd a,.note a,.faq a,.card p a,.trow .cn a,.trow .v a{
  text-decoration:underline; text-decoration-color:var(--route-soft);
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.ch p a:hover,.ch dd a:hover,.note a:hover,.faq a:hover,.card p a:hover,.trow .cn a:hover,.trow .v a:hover{ text-decoration-color:var(--route) }

/* 共用：大頭針形狀（給 ::before/::after 用） */
.hero > div::after,.cta > div::before,.chan .m::after{
  content:""; position:absolute; width:34px; height:34px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:radial-gradient(circle at 50% 50%,#fff 0 6px,transparent 6.5px),var(--pin);
  box-shadow:-3px 3px 8px rgba(15,42,63,.25);
  pointer-events:none;
}

/* ---------- 工具列（桌機） ---------- */
.utility{ background:transparent }
.utility > div{ padding-top:10px; padding-bottom:0 }
.utility p{ color:var(--mute); font-size:12.5px }
.utility .mail{ font-family:var(--num); font-weight:600; font-size:11.5px; letter-spacing:.06em; color:var(--mute) }
.utility .mail:hover{ color:var(--blue) }
.utility .line{ background:var(--green); color:#fff; padding:4px 12px 4px 10px; border-radius:999px; font-size:12.5px }
.utility .line i{ background:#fff }
.utility .line:hover{ color:#fff; filter:brightness(.95) }

/* ---------- 頁首：浮動搜尋列 ---------- */
.site-header{
  background:transparent; backdrop-filter:none; border-bottom:0;
  padding:10px var(--pad) 0; pointer-events:none;
}
.site-header > div{
  pointer-events:auto;
  max-width:calc(var(--max) - 2 * var(--pad));
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-radius:999px; box-shadow:var(--sh);
  padding:8px 10px 8px 20px;
}
.wordmark i{ color:var(--pin-ink) }
/* 圖標、中文與英文字的視覺中心對齊（2026-10-07） */
.wordmark,.footer-grid .about .wordmark{ align-items:center }
.wordmark b,.wordmark i{ line-height:1; position:relative }
.wordmark b{ top:.07em }
.wordmark i{ top:-.12em }
.nav{ gap:4px; margin-left:auto; font-size:14.5px }
.nav a{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; color:var(--ink-2); font-weight:500 }
.nav a:hover{ background:var(--paper); color:var(--ink) }
.nav a.on{ background:var(--bg); color:var(--blue); font-weight:700; border-bottom:0; padding-bottom:7px }
.nav a.on::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--pin); box-shadow:0 0 0 3px rgba(214,58,39,.18) }

.crumb{ border-bottom:0; color:var(--mute) }
.crumb > div{ padding:12px var(--pad) 12px calc(var(--pad) + 6px) }
.crumb > div::before{
  content:""; display:inline-block; width:10px; height:10px; margin-right:9px; vertical-align:0;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pin);
}
.crumb b{ color:var(--ink); font-weight:500 }

/* ---------- 首屏：CSS 地圖 ---------- */
.hero{
  position:relative; overflow:hidden;
  margin:0 var(--pad); border-radius:var(--r-l);
  border-bottom:0; box-shadow:inset 0 0 0 1px rgba(15,42,63,.06);
  background-color:var(--land);
  background-image:
    linear-gradient(116deg,transparent 0 61%,var(--road) 61% calc(61% + 13px),transparent calc(61% + 13px)),
    linear-gradient(0deg,transparent 0 22%,var(--road) 22% calc(22% + 9px),transparent calc(22% + 9px)),
    linear-gradient(90deg,transparent 0 83%,var(--road) 83% calc(83% + 9px),transparent calc(83% + 9px)),
    linear-gradient(90deg,transparent 0 47%,rgba(255,255,255,.85) 47% calc(47% + 5px),transparent calc(47% + 5px)),
    radial-gradient(ellipse 230px 140px at 92% 14%,var(--park) 0 62%,transparent 63%),
    radial-gradient(ellipse 150px 90px at 8% 108%,var(--park) 0 62%,transparent 63%),
    radial-gradient(ellipse 560px 210px at 102% 112%,var(--water) 0 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 34px);
}
.hero > div{ position:relative; padding:clamp(26px,4vw,56px) clamp(18px,3.4vw,48px) clamp(30px,4.4vw,60px) }
/* 虛線路線＋終點大頭針 */
.hero > div::before{
  content:""; position:absolute; pointer-events:none;
  right:clamp(40px,9%,130px); top:26%; width:min(24%,280px); height:48%;
  border:5px dashed var(--route); border-left:0; border-bottom:0;
  border-top-right-radius:72px; opacity:.85;
}
.hero > div::after{ right:calc(clamp(40px,9%,130px) - 14.5px); top:calc(74% - 40px) }
/* 雙欄首屏：資訊卡蓋在地圖路線上，裝飾不覆蓋可點內容。 */
.hero-2{ position:relative; z-index:1 }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border-radius:999px; padding:5px 13px 5px 9px; box-shadow:var(--sh-s);
}
.hero .eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(15,42,63,.15) }
.hero h1{
  color:var(--ink); max-width:17ch;
  text-shadow:0 0 1px var(--land),0 0 6px var(--land),0 0 12px var(--land);
}
.hero h1 em{ color:var(--blue) }
.hero .sub{
  position:relative; margin-top:18px; max-width:50ch;
  background:rgba(255,255,255,.95); color:var(--body);
  border-radius:var(--r); padding:14px 18px; box-shadow:var(--sh);
}
.hero .sub + .sub{
  display:table; margin-top:12px; padding:5px 14px; border-radius:999px;
  font-family:var(--num); font-weight:600; color:var(--mute); box-shadow:var(--sh-s);
}
.facts{ border-top:0; gap:10px; padding-top:0 }
.facts span{ background:#fff; border-radius:var(--r-s); padding:10px 14px; box-shadow:var(--sh-s) }
.facts em{ color:var(--mute) }

/* 首屏側欄（其他頁用） */
.stack{ gap:8px }
.pick,.plate,.plate-3,.pick-h{ border-radius:var(--r-s); box-shadow:var(--sh-s) }
.pick:hover{ background:#fff; box-shadow:var(--sh) }
.pick i{ border:0; background:var(--bg); color:var(--blue); font-family:var(--num); font-weight:800 }
.pick-h{ font-family:var(--num); font-weight:700; color:var(--mute) }
.plate.note-row{ background:var(--bg) }

/* ---------- 路線摘要列（原深色提示條） ---------- */
.strip{ background:transparent }
.strip > div{ padding-top:18px; padding-bottom:4px; gap:14px }
.strip .a{
  flex:1; display:flex; align-items:center; gap:12px;
  font-family:var(--han); font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--ink-2);
}
.strip .a::before{ content:""; flex:0 0 12px; height:12px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(15,42,63,.15) }
.strip .a::after{ content:""; flex:1; height:4px; border-radius:4px; background:repeating-linear-gradient(90deg,var(--route) 0 12px,transparent 12px 20px) }
.strip .b{ margin-left:0; display:flex; align-items:center; gap:8px; font-family:var(--num); font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--ink) }
.strip .b::before{ content:""; width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pin) }

/* ---------- 章節目錄：路線面板 ---------- */
.shell{ padding-top:clamp(18px,2.6vw,32px) }
.rail{
  top:92px; background:#fff; border-radius:var(--r-l); box-shadow:var(--sh);
  padding:16px 14px 14px; max-width:280px;
  max-height:calc(100vh - 108px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.rail-h{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 10px 4px; padding:0;
  border-bottom:0; font-family:var(--num); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--mute);
}
.rail-h::before{ content:""; width:14px; height:4px; border-radius:3px; background:var(--route) }
.rail a.r{
  position:relative; align-items:flex-start; gap:11px;
  padding:7px 10px 7px 6px; border-bottom:0; border-radius:14px; color:var(--ink-2);
}
.rail a.r::before{
  content:""; position:absolute; left:18px; top:0; bottom:0; width:4px;
  background:repeating-linear-gradient(180deg,var(--route-dot) 0 4px,transparent 4px 9px);
}
.rail a.r:first-of-type::before{ top:21px }
.rail a.r:last-of-type::before{ bottom:calc(100% - 21px) }
.rail a.r:has(~ a.r.on)::before{ background:var(--route) }
.rail a.r.on::before{ background:linear-gradient(180deg,var(--route) 0 21px,transparent 21px),repeating-linear-gradient(180deg,var(--route-dot) 0 4px,transparent 4px 9px) }
.rail a.r:hover{ color:var(--blue); background:var(--paper) }
.rail a.r .n{
  position:relative; z-index:1; flex:0 0 28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px var(--line-2);
  font-family:var(--num); font-weight:800; font-size:11px; color:var(--mute);
}
.rail a.r:has(~ a.r.on) .n{ box-shadow:inset 0 0 0 3px var(--route); color:var(--blue) }
.rail a.r .t{ padding-top:3px; font-size:14px; line-height:1.55 }
.rail a.r.on{ background:var(--bg); color:var(--ink) }
.rail a.r.on .n{ background:var(--pin); color:#fff; box-shadow:0 0 0 4px rgba(214,58,39,.2) }
.rail a.r.on .t{ font-weight:700 }
.rail-box{ margin-top:14px; background:var(--paper); border-radius:var(--r); padding:15px 15px 14px }
.rail-box .k{ display:inline-block; font-family:var(--num); font-weight:800; font-size:10.5px; letter-spacing:.12em; color:var(--blue) }
.rail-box .b{ border-radius:999px; height:46px }
.rail-box .b.dark{ background:var(--blue) }
.rail-box .more{ font-size:13.5px }

/* ---------- 章節：站點與路線 ---------- */
.chapters{ padding-left:var(--gut) }
.chapters::before{ display:none }
.ch::before{
  content:""; position:absolute; left:calc(var(--stop) / 2 - 2px - var(--gut)); width:4px;
  top:calc(var(--stop) / 2 + 4px); bottom:calc(-1 * (var(--stop) / 2 + 4px));
  background:var(--route); border-radius:2px;
}
.ch:last-child::before{ display:none }
.ch:has(> .n.on)::before,.ch:has(> .n.on) ~ .ch::before{
  background:repeating-linear-gradient(180deg,var(--route-dot) 0 5px,transparent 5px 11px);
}
.ch > .n{
  left:calc(-1 * var(--gut)); top:4px; z-index:1;
  width:var(--stop); height:var(--stop);
  background:#fff; color:var(--blue);
  box-shadow:inset 0 0 0 3px var(--route),0 2px 6px rgba(15,42,63,.12);
  font-family:var(--num); font-weight:800; font-size:13px;
}
.ch:has(> .n.on) ~ .ch > .n{ color:var(--mute); box-shadow:inset 0 0 0 3px var(--line-2),0 2px 6px rgba(15,42,63,.08) }
.ch > .n.on{ background:var(--pin); color:#fff; box-shadow:0 0 0 6px rgba(214,58,39,.18),0 4px 10px rgba(214,58,39,.35) }
.ch h2{ color:var(--ink) }
.ch .aside{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  background:#fff; border-radius:16px; padding:3px 13px 3px 10px; box-shadow:var(--sh-s);
  font-size:13px; font-weight:700; color:var(--ink-2);
}
.ch .aside::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--route) }
.ch .lede{ color:var(--ink) }
.linkline{ border-bottom:0; padding:6px 14px; border-radius:999px; background:#fff; box-shadow:var(--sh-s) }
.linkline:hover{ box-shadow:var(--sh) }

/* ---------- 格線、表列：資訊卡 ---------- */
.grid{ gap:12px }
.grid:has(> .trow),.grid:has(> .thead){
  gap:0; background:#fff; border-radius:var(--r); box-shadow:var(--sh); overflow:hidden;
}
.cell{ border-radius:var(--r); box-shadow:var(--sh-s) }
.cell.tint{ background:var(--bg); box-shadow:none }
.cell.mark{ background:#fff; box-shadow:inset 0 0 0 2px var(--route),var(--sh) }
.cell .k{ color:var(--blue) }
a.cell:hover{ background:#fff; box-shadow:var(--sh) }
.cell.dark{ background:var(--blue); box-shadow:var(--sh) }
.cell.dark p{ color:var(--on-dark) }
.cell.dark .k{ color:#fff }
a.cell.dark:hover{ background:var(--blue-d) }

.thead{ background:var(--bg); padding:10px 18px }
.thead span{ font-family:var(--han); font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--blue) }
.trow{ background:#fff; box-shadow:none; border-top:1px solid var(--line); padding:14px 18px }
.thead + .trow,.grid > .trow:first-child{ border-top:0 }
.trow.tint{ background:var(--paper) }
.trow .c1::before{
  content:""; display:inline-block; width:10px; height:10px; margin-right:9px; vertical-align:0;
  border-radius:50%; box-shadow:inset 0 0 0 3px var(--route);
}
.trow .head .p{ border-bottom:0; padding:2px 10px; border-radius:999px; background:var(--bg) }

/* 定義表：標籤晶片 */
.spec > div{ border-top:1px dashed var(--line-2) }
.spec dt{
  display:inline-block; justify-self:start; align-self:start;
  padding:2px 11px; border-radius:999px; background:var(--bg);
  font-size:12.5px; font-weight:700; color:var(--blue); line-height:1.7;
}
.spec.inline dt{ padding-top:2px; margin-top:2px }
.spec.flat > div:last-child{ border-bottom:1px dashed var(--line-2) }
/* 官方資料、依據、法規：來源清單字級縮小（2026-10-19 二次調整） */
.spec.sources > div{ padding:6px 0 }
.spec.sources dt{ padding:0 8px; font-size:10.5px; line-height:1.8 }
.spec.sources dd{ margin-top:2px; font-size:12.5px; line-height:1.65 }
.nlist.sources > div{ padding:6px 0 }
.nlist.sources dt{ font-size:10.5px }
.nlist.sources dd{ font-size:12.5px; line-height:1.65 }
.nlist.sources > div::before{ display:none }

/* 步驟清單：逐步導航 */
.nlist > div{ position:relative; grid-template-columns:30px 1fr; gap:14px; padding:11px 0; border-top:0 }
.nlist > div:last-child{ border-bottom:0 }
.nlist > div::before{ content:""; position:absolute; left:13px; top:41px; bottom:-11px; width:4px; border-radius:2px; background:var(--route-soft) }
.nlist > div:last-child::before{ display:none }
.nlist dt{
  position:relative; z-index:1; width:30px; height:30px; padding-top:0;
  display:grid; place-items:center; border-radius:50%;
  background:var(--blue); color:#fff; font-family:var(--num); font-weight:800; font-size:11.5px;
}
.nlist dd{ padding-top:2px }

.xlist li{ padding-left:30px }
.xlist li::before{
  content:"×"; top:5px; width:20px; height:20px; display:grid; place-items:center;
  border-radius:50%; background:var(--pin-ink); color:#fff; font-size:13px; line-height:1;
}
.dlist li::before{ content:""; top:.72em; width:9px; height:9px; border-radius:50%; background:var(--route) }

/* 提示框：資訊視窗 */
.note{
  position:relative; background:#fff; border-radius:var(--r);
  padding:16px 20px 16px 56px; box-shadow:var(--sh); max-width:62ch;
}
.note::before{
  content:"i"; position:absolute; left:17px; top:17px; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--blue); color:#fff; font-family:var(--num); font-weight:800; font-size:14px; line-height:1;
}
.note.warn{ background:var(--danger-bg); box-shadow:inset 0 0 0 1px #F3C6BD }
.note.warn::before{ content:"!"; background:var(--pin-ink) }
.card .note{ background:var(--paper); box-shadow:none }

/* FAQ：可展開的資訊卡 */
.faq{ border-top:0; display:flex; flex-direction:column; gap:10px }
.faq details{ background:#fff; border-bottom:0; border-radius:var(--r); box-shadow:var(--sh-s) }
.faq details[open]{ box-shadow:var(--sh) }
.faq summary{ padding:15px 18px; align-items:center }
.faq summary::after{
  content:"+"; flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--bg); color:var(--blue); font-family:var(--num); font-weight:800; font-size:16px;
}
.faq details[open] summary::after{ content:"−"; background:var(--blue); color:#fff }
.faq p{ padding:0 18px 18px }
.faq details.flag{ background:var(--bg) }

/* ---------- 其他頁的深色元件改淺色 ---------- */
.pt{ background:#fff; border-radius:var(--r); box-shadow:var(--sh) }
.pt-h,.pt-r{ border-bottom-color:var(--line) }
.pt-h span{ font-family:var(--num); font-weight:700; color:var(--mute) }
.pt-r .lv,.pt-r .amt{ color:var(--ink) }
.pt-r .lv em,.pt-foot span{ color:var(--mute) }
.pt-r.pin{ background:var(--danger-bg); margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:var(--r-s) }
.pt-r.pin .lv,.pt-r.pin .lv em,.pt-r.pin .amt{ color:var(--pin-ink) }
.ticks i{ background:var(--line); border-radius:3px }
.ticks i.on{ background:var(--route) }
.pt-r.pin .ticks i.on{ background:var(--pin) }
.pt a,.pt a:hover{ color:var(--blue); border-bottom-color:var(--route-soft) }
.calc-box,.mini,.ex{ border-radius:var(--r); box-shadow:var(--sh-s) }
.calc-in label{ border-radius:var(--r-s) }
.calc-out{ background:var(--bg); border-radius:var(--r) }
.calc-out .lb{ color:var(--body) }
.calc-out .big{ color:var(--ink) }
.calc-out .amt{ color:var(--pin-ink) }
.art.tint{ border-radius:var(--r) }
.art.dark{ background:var(--bg); border-radius:var(--r) }
.art.dark .art-h .n{ color:var(--pin-ink) }
.art.dark .art-h h2,.art.dark strong{ color:var(--ink) }
.art.dark p{ color:var(--body) }
.art.dark a{ color:var(--blue); border-bottom-color:var(--route-soft) }
.art.dark .legal-cta .m{ background:#fff; color:var(--ink); box-shadow:var(--sh-s) }
.art.dark .legal-cta .m .k{ color:var(--blue) }
.legal-meta,.rights div,.legal-cta a{ border-radius:var(--r) }
.err{ background:var(--land) }
.err h1{ color:var(--ink) }
.err p{ color:var(--body) }
.err .btn{ border-radius:999px; box-shadow:var(--sh) }
.quick{ gap:10px }
.quick a{ border-radius:var(--r-s); box-shadow:var(--sh-s) }
.works .shot{ border-radius:var(--r-s) }
.band{ background:var(--bg) }

/* ---------- 聯絡管道 ---------- */
.chan a{ border-radius:var(--r-l) }
.chan .k{
  align-self:flex-start; padding:3px 11px; border-radius:999px;
  font-family:var(--num); font-weight:800; font-size:11px; letter-spacing:.14em;
}
.chan .l{ box-shadow:0 14px 30px -14px rgba(6,199,85,.55) }
.chan .l .k{ background:rgba(255,255,255,.2); color:#fff }
.chan .m{ position:relative; background:#fff; box-shadow:var(--sh) }
.chan .m:hover{ box-shadow:var(--sh-l) }
.chan .m::after{ right:28px; top:24px }
.chan .m .k{ background:var(--bg); color:var(--blue) }
.chan .m .t{ font-family:var(--num); font-weight:700; padding-right:44px }
.jump a{ border-top:1px dashed var(--line-2) }
.jump .go{
  flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:#fff; color:var(--blue); box-shadow:var(--sh-s); font-family:var(--num); font-weight:800;
}
.card{ border-radius:var(--r-l); box-shadow:var(--sh) }
.card.tint{ background:var(--bg); box-shadow:none }
.card.tint .jump a{ border-top-color:#C3D6EA }

/* ---------- CTA：目的地資訊卡 ---------- */
.cta{
  background-color:var(--land);
  background-image:
    radial-gradient(ellipse 340px 160px at 6% 0%,var(--park) 0 62%,transparent 63%),
    radial-gradient(ellipse 520px 200px at 100% 104%,var(--water) 0 66%,transparent 67%),
    linear-gradient(0deg,transparent 0 58%,var(--road) 58% calc(58% + 10px),transparent calc(58% + 10px)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 34px);
  padding:clamp(34px,5vw,64px) var(--pad);
}
.cta > div{
  position:relative; max-width:calc(var(--max) - 2 * var(--pad));
  background:#fff; border-radius:var(--r-l); box-shadow:var(--sh-l);
  padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,48px);
}
.cta > div::before{ left:clamp(22px,3.4vw,48px); top:-20px }
.cta h2{ color:var(--ink) }
.cta p{ color:var(--body) }
.cta p strong{ color:var(--ink) }
.cta .fine{ color:var(--mute) }
.cta .fine a{ color:var(--blue); border-bottom-color:var(--route-soft) }
.cta-actions a{ border-radius:999px }
.btn-line{ box-shadow:0 10px 22px -12px rgba(6,199,85,.7) }
.btn-outline{ border:2px solid var(--route-soft); color:var(--blue); font-family:var(--num); font-weight:700; font-size:14px; letter-spacing:.03em }
.btn-outline:hover{ color:var(--blue-d); border-color:var(--route) }
.btn-outline.han{ font-family:var(--han); font-size:15px }

/* ---------- 頁尾 ---------- */
.site-footer{ position:relative; background:#fff; border-top:0 }
.site-footer::before{
  content:""; display:block; height:5px;
  background:repeating-linear-gradient(90deg,var(--route) 0 16px,transparent 16px 26px); opacity:.55;
}
.footer-grid h4{ display:flex; align-items:center; gap:8px; color:var(--ink) }
.footer-grid h4::before{ content:""; width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 2.5px var(--route) }
.footer-grid a{ color:var(--body) }
.footer-grid a:hover{ color:var(--blue) }
.footer-grid .f-contact{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; font-size:13.5px }
.footer-grid .f-contact a.f-line{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:999px; background:var(--green); color:#fff; font-weight:700 }
.footer-grid .f-contact a.f-line:hover{ color:#fff; filter:brightness(.95) }
.footer-grid .f-contact a.f-page{ font-weight:700; color:var(--blue) }
.footer-bottom{ border-top:1px dashed var(--line-2) }
.footer-legal a:hover{ color:var(--blue) }

/* ---------- 抽屜 ---------- */
.drawer-scrim{ background:rgba(15,42,63,.38) }
.drawer-panel{ background:#fff; border-left:0; border-radius:var(--r-l) 0 0 var(--r-l); box-shadow:-24px 0 48px -16px rgba(15,42,63,.3) }
.drawer-close{ border:0; background:var(--bg); color:var(--blue); font-family:var(--num); font-weight:800 }
.drawer-nav{ border-top:0 }
.drawer-nav > li{ border-bottom:1px dashed var(--line-2) }
.drawer-nav .n{
  min-width:0; flex:0 0 26px; height:26px; display:grid; place-items:center; border-radius:50%;
  box-shadow:inset 0 0 0 2.5px var(--route); color:var(--blue); font-family:var(--num); font-weight:800; font-size:10.5px;
}
.drawer-nav .arr{ color:var(--blue) }
.drawer-sub{ position:relative; margin-left:11px; padding-left:12px; border-left:4px solid var(--route-soft); border-radius:2px; margin-bottom:12px; padding-bottom:0 }
.drawer-sub a{ border-top:0; padding:9px 2px 9px 6px; border-radius:10px }
.drawer-sub a:hover{ background:var(--paper) }
.drawer-sub .cc{ font-family:var(--num); font-weight:700; font-size:10px; letter-spacing:.06em; color:var(--mute-2); min-width:56px }
.drawer-cta a{ border-radius:999px }
.drawer-cta .d{ background:var(--blue) }
.drawer-foot{ font-family:var(--num); font-weight:600; color:var(--mute) }

.to-top{ border:0; box-shadow:var(--sh); color:var(--blue) }
.to-top:hover{ background:var(--blue); border-color:var(--blue) }

/* ==========================================================================
   桌機主選單下拉（使用者 2026-10-09 選 A）
   ========================================================================== */
.nav{ align-items:center }
.nav-item{ position:relative; display:flex; align-items:center }
.nav-item.has-drop > a{ padding-right:4px }
.nav-more{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:30px; margin-left:-2px; padding:0; border:0; border-radius:999px; background:none; color:var(--mute); cursor:pointer }
.nav-more:hover{ color:var(--ink) }
.nav-more svg{ transition:transform .15s }
.nav-item.open .nav-more svg{ transform:rotate(180deg) }
.nav-drop{ display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:320px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(14,20,24,.14); z-index:60; text-align:left }
.nav-drop::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px }
.nav-item.open .nav-drop{ display:block }
@media (hover:hover) and (min-width:1024px){
  .nav-item.has-drop:hover .nav-drop{ display:block }
  .nav-item.has-drop:hover .nav-more svg{ transform:rotate(180deg) }
}
.nav .nav-drop a{ display:block; padding:9px 12px; border-radius:10px; background:none; color:var(--ink); font-weight:400; white-space:normal }
.nav .nav-drop a:hover{ background:var(--bg); color:var(--ink) }
.nav .nav-drop a b{ display:block; font-size:14.5px; font-weight:700 }
.nav .nav-drop a span{ display:block; margin-top:2px; font-size:12.5px; color:var(--mute) }
.nav .nav-drop .nd-head{ margin-bottom:4px; border-bottom:1px solid var(--line); border-radius:10px 10px 0 0; font-size:13px; font-weight:700; color:var(--blue) }
.nav-item:nth-last-child(-n+3) .nav-drop{ left:auto; right:0; transform:none }
@media (min-width:1024px) and (max-width:1180px){
  .nav-item.has-drop > a{ padding-right:2px }
  .nav-more{ width:16px; margin-left:-1px }
}

/* ==========================================================================
   響應式
   ========================================================================== */
@media (min-width:1024px) and (max-width:1180px){
  .site-header > div{ padding-left:16px }
  .nav{ gap:0; font-size:13.5px }
  .nav a{ padding:7px 9px }
  .nav a.on{ padding-bottom:7px }
}

@media (max-width:1023px){
  :root{ --stop:30px; --gut:46px }
  .site-header{ padding-top:8px }
  .site-header > div{ height:56px; padding:0 8px 0 16px }
  .nav-toggle{ border:0; background:var(--bg); padding:9px 14px }
  .nav-toggle .bars i{ background:var(--blue) }
  .nav-toggle .lbl{ font-family:var(--num); font-weight:800; font-size:11px; color:var(--blue) }
  .wordmark b{ font-size:20px }

  .hero > div::before{ display:none }
  .hero > div::after{ right:20px; top:24px; width:26px; height:26px; background:radial-gradient(circle at 50% 50%,#fff 0 4.5px,transparent 5px),var(--pin) }
  .hero h1{ max-width:none; padding-right:28px }

  .rail{ position:static; max-width:none; max-height:none; overflow:visible; padding:14px 10px 10px }
  .ch > .n{ top:0; font-size:11.5px }
  .ch::before{ top:calc(var(--stop) / 2); bottom:calc(-1 * var(--stop) / 2) }

  .bottombar{
    background:transparent; backdrop-filter:none; border-top:0;
    padding:0 12px calc(10px + env(safe-area-inset-bottom));
  }
  .bottombar > div{
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-radius:999px; box-shadow:var(--sh-l); padding:7px;
  }
  .bottombar a{ height:48px; border-radius:999px }
  .bottombar .d{ background:var(--blue) }
  body{ padding-bottom:84px }
  .to-top{ bottom:calc(84px + env(safe-area-inset-bottom)) }
}

@media (max-width:560px){
  .hero{ margin:0 10px; border-radius:var(--r) }
  .hero > div{ padding-left:16px; padding-right:16px }
  .strip .a{ font-size:13px }
  .note{ padding:14px 16px 14px 50px }
  .note::before{ left:14px; top:15px }
  .cta{ padding-left:10px; padding-right:10px }
  .cta > div{ padding:28px 18px 22px }
  .trow,.thead{ padding-left:15px; padding-right:15px }
  .spec.inline > div{ grid-template-columns:96px 1fr }
}

@media print{
  .hero,.cta{ background:none; margin:0 }
  .hero > div::before,.hero > div::after,.cta > div::before{ display:none }
  .ch::before{ display:none }
  .site-header{ position:static }
}