/* 旅宿惠 pp-theme 樣式：沿用核可的原型 v2（海岸明亮）。字體見 fonts.css。 */
/* 旅宿惠 Perk & Pillow 原型 v1：沿用範例 05「海岸明亮」。規劃見 10_功能與版面規劃.md */
:root {
  --ground: #F2F5F4;
  --panel: #FFFFFF;
  --ink: #13303F;
  --mute: #4D6470;
  --rule: #D6E0E2;
  --rule-strong: #B9C9CD;
  --soft: #E5EDEE;
  --accent: #B0432D;
  --accent-deep: #8F3322;
  --accent-soft: #FBEDE8;
  --seal: #B5402F;
  --ok: #24614F;
  --ok-soft: #E3F0EA;
  --sea: #13303F;
  --sea-ink: #EAF1F1;
  --sea-mute: #C6DEE3;
  --photo-bg: #D9E3E3;
  --serif: "Noto Serif TC", "Noto Serif Thai", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --radius: 14px;
  --shadow: 0 18px 40px -22px rgb(8 16 20 / .38);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.7 var(--sans); font-feature-settings: "palt"; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--sea-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: min(1280px, 100% - 64px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── 頁首 ── */
.site-head { position: sticky; top: 0; z-index: 20; background: rgb(242 245 244 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.site-head .bar { display: flex; align-items: center; gap: 28px; height: 68px; }
.site-head .logo img { height: 32px; width: auto; }
.main-nav { display: flex; gap: 26px; font-size: 15px; letter-spacing: .04em; }
.main-nav a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.main-nav a:hover { border-bottom-color: var(--rule-strong); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent-deep); }
.site-head .util { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); cursor: pointer; }
.market { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; font-size: 13px; }
.market button { border: 0; background: transparent; padding: 5px 13px; cursor: pointer; white-space: nowrap; }
.market button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ── 頁面標頭 ── */
.crumbs { font-size: 13px; color: var(--mute); padding-top: 28px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-head { padding: 10px 0 8px; }
.page-head h1 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.22; margin: 6px 0 14px; letter-spacing: .01em; }
.checked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14.5px; color: var(--mute); }
.checked b { color: var(--ink); font-weight: 600; }
.seal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--seal); color: var(--seal); font: 700 11px/1 "EB Garamond", Georgia, serif; flex: none; }
.disclose { font-size: 13px; color: var(--mute); margin: 8px 0 0; }
.disclose a { color: var(--ink); }

/* ── 區塊 ── */
.sec { padding: 56px 0 8px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.sec-head h2 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; }
.sec-head p { margin: 6px 0 0; color: var(--mute); font-size: 15px; }
.sec-head > a { font-size: 15px; white-space: nowrap; }
.lede { color: var(--mute); max-width: 62ch; margin: 0; }

/* 結論 */
.verdict { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); }
.verdict h2 { font-size: 22px; margin: 0 0 12px; }
.verdict ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.verdict li { display: grid; grid-template-columns: minmax(0, 16em) 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.verdict li:first-child { border-top: 0; }
.verdict .if { color: var(--mute); }
.verdict .then { font-weight: 600; }
.verdict .then small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; }
.verdict .then a { color: var(--accent-deep); }

/* 膠囊 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); background: var(--panel); border-radius: 999px; padding: 7px 14px; font-size: 14.5px; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .n { font-size: 12.5px; color: var(--mute); }
.chip[aria-pressed="true"] .n { color: var(--sea-mute); }
.chip-label { font-size: 13px; color: var(--mute); margin: 0 0 8px; }

/* 按鈕 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), transform .2s var(--ease); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink); font-weight: 500; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 8px 12px; font-size: 14px; border-radius: 8px; }
.link-out { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.link-out svg.i { width: 14px; height: 14px; }

/* 期限與狀態 */
.due { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.due.soon { color: var(--accent-deep); font-weight: 600; }
.tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 12.5px; background: var(--soft); color: var(--ink); white-space: nowrap; }
.tag.warn { background: var(--accent-soft); color: var(--accent-deep); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 優惠碼卡 ── */
.coupons { display: grid; gap: 16px; }
.coupon { display: grid; grid-template-columns: 200px 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 96px; }
.coupon:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.coupon .off { position: relative; padding: 22px 20px; border-right: 1.5px dashed var(--rule-strong); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.coupon .off::before, .coupon .off::after { content: ""; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ground); border: 1px solid var(--rule); }
.coupon .off::before { top: -10px; } .coupon .off::after { bottom: -10px; }
.coupon .big { font: 700 34px/1.1 var(--serif); color: var(--accent); }
.coupon .plat { font-size: 14px; color: var(--mute); letter-spacing: .04em; }
.coupon .body { padding: 18px 22px 16px; display: grid; gap: 8px; }
.coupon h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.coupon .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.coupon .trust { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mute); }
.code-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.code { font: 600 16px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; border: 1.5px dashed var(--accent); color: var(--accent-deep); background: var(--accent-soft); border-radius: 8px; padding: 11px 14px; user-select: all; }
.coupon details { font-size: 14px; color: var(--mute); }
.coupon summary { cursor: pointer; color: var(--ink); width: max-content; }
.coupon details ul { margin: 8px 0 0; padding-left: 20px; }
.report { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 13.5px; color: var(--mute); }
.report .q { color: var(--ink); }
.report button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule-strong); background: var(--panel); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13.5px; }
.report button[aria-pressed="true"] { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.report button.no[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.report button svg.i { width: 15px; height: 15px; }
.coupon[hidden] { display: none; }
.empty { padding: 28px; text-align: center; color: var(--mute); border: 1px dashed var(--rule-strong); border-radius: var(--radius); }

/* 已過期 */
.expired { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 16px; }
.expired summary { cursor: pointer; font-weight: 600; }
.expired .coupon { filter: grayscale(1); opacity: .62; margin-top: 12px; }

/* ── 響應式表格：桌機是表格，手機每列一張卡 ── */
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 15px; }
.rtable thead th:first-child { border-top-left-radius: var(--radius); }
.rtable thead th:last-child { border-top-right-radius: var(--radius); }
.rtable th, .rtable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.rtable thead th { position: sticky; top: calc(var(--head-h, 68px) + var(--toc-h, 0px)); z-index: 2; background: #EAF0F0; font-size: 13px; letter-spacing: .06em; color: var(--mute); font-weight: 600; }
.rtable tbody tr:last-child td { border-bottom: 0; }
.rtable tbody tr { transition: opacity .25s var(--ease), background .25s var(--ease); }
.rtable tr[hidden] { display: none; }
.rtable .key { font-weight: 600; white-space: nowrap; }
.rtable .key small { display: block; font-weight: 400; color: var(--mute); font-size: 13px; white-space: normal; }
.rtable .hl { font: 600 18px/1.35 var(--serif); color: var(--accent-deep); }
.rtable ul { margin: 0; padding-left: 18px; }
.rtable td.acts > * { display: flex; width: max-content; }
.rtable td.acts > * + * { margin-top: 8px; }
.rtable tr.dim { opacity: .38; }
.rtable tr.pick { background: #F4F9F7; }
.rtable tr.pick .key::after { content: var(--pick-text, "推薦"); display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: #fff; background: var(--ok); border-radius: 6px; padding: 1px 7px; vertical-align: 2px; }
.under-note { font-size: 13.5px; color: var(--mute); margin: 10px 0 0; }

/* ── 照片卡（首頁、攻略） ── */
.pcard { display: grid; grid-template-rows: auto 1fr; text-decoration: none; }
.pcard figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--photo-bg); border-radius: 10px; }
.pcard figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pcard:hover figure img { transform: scale(1.04); }
.pcard .badge { position: absolute; right: 10px; bottom: 10px; background: var(--panel); color: var(--accent-deep); font: 700 18px/1 var(--serif); padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .35); }
.pcard .body { padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.pcard .where { font-size: 13px; letter-spacing: .08em; color: var(--mute); }
.pcard h3 { margin: 0; font-size: 21px; line-height: 1.38; }
.pcard p { margin: 0; font-size: 14.5px; color: var(--mute); }
.pcard .foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--mute); }

/* ── 飯店卡（攻略內，橫式） ── */
.hotels { display: grid; gap: 14px; }
.hotel { display: grid; grid-template-columns: 240px 1fr; gap: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.hotel figure { margin: 0; position: relative; background: var(--photo-bg); min-height: 100%; }
.hotel figure img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hotel figure figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; background: rgb(255 255 255 / .9); padding: 2px 8px; border-radius: 6px; }
.hotel .body { padding: 18px 22px; display: grid; gap: 8px; }
.hotel .meta { font-size: 13px; letter-spacing: .06em; color: var(--mute); }
.hotel h4, .hotel h3.hname { margin: 0; font: 600 21px/1.35 var(--serif); }
.hotel h4 small, .hotel h3.hname small { font: 400 13px var(--sans); color: var(--mute); margin-left: 6px; letter-spacing: .02em; }
.hotel .fit { margin: 0; font-size: 15px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--mute); margin: 0; padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 6px; }
.facts svg.i { width: 16px; height: 16px; color: var(--ink); }
.know { font-size: 14px; background: var(--soft); border-radius: 8px; padding: 8px 12px; margin: 0; }
.know b { font-weight: 600; }
.cardperk { display: none; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ok); background: var(--ok-soft); border-radius: 8px; padding: 6px 10px; width: max-content; max-width: 100%; }
.cardperk.on { display: inline-flex; }
.book { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.book .fine { font-size: 12.5px; color: var(--mute); width: 100%; }
@media (min-width: 861px) {
  .hotel .body { grid-template-columns: minmax(0, 1fr) 230px; column-gap: 28px; }
  .hotel .side { display: grid; gap: 10px; align-content: end; }
  .hotel .cardperk { width: auto; }
  .hotel .book { display: grid; gap: 8px; }
  .hotel .book .btn { width: 100%; }
  .hotel .book .fine { text-align: center; }
}

/* ── 深海色帶 ── */
.band { background: var(--sea); color: var(--sea-ink); padding: 60px 0 64px; margin-top: 56px; }
.band .sec-head h2 { color: #fff; }
.band .sec-head p, .band .pcard p, .band .pcard .where, .band .pcard .foot { color: var(--sea-mute); }
.band .sec-head > a { color: var(--sea-ink); }
.band .seal { border-color: #F0A08C; color: #F0A08C; }
.band .due.soon { color: #F6B6A5; }

/* ── FAQ ── */
.faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--mute); }
.faq details[open] summary::after { content: "－"; }
.faq p { margin: 10px 0 0; color: var(--mute); max-width: 70ch; }

/* ── 頁尾 ── */
.site-foot { background: var(--sea); color: var(--sea-mute); margin-top: 80px; padding: 48px 0 28px; font-size: 14px; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.site-foot h2 { font: 600 15px var(--sans); color: #fff; margin: 0 0 10px; letter-spacing: .06em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot a { text-decoration: none; color: var(--sea-ink); }
.site-foot a:hover { text-decoration: underline; }
.site-foot .logo img { height: 34px; }
.site-foot .legal { border-top: 1px solid rgb(255 255 255 / .14); margin-top: 32px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }
.proto-note { background: #FFF6D9; color: #5A4500; font-size: 13px; text-align: center; padding: 6px 16px; }

/* ── 提示訊息 ── */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 18px; font-size: 14.5px; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .5); transition: opacity .25s var(--ease), transform .35s var(--ease); max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  html { scroll-padding-top: 120px; }
  .wrap { width: calc(100% - 32px); }
  .site-head .bar { flex-wrap: wrap; height: auto; gap: 0 12px; padding-top: 10px; }
  .site-head .logo img { height: 28px; }
  .main-nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; gap: 20px; font-size: 14px; margin-inline: -16px; padding: 8px 16px 8px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .crumbs { padding-top: 16px; }
  .page-head h1 { font-size: 30px; }
  .sec { padding-top: 44px; }
  .sec-head { flex-wrap: wrap; }
  .sec-head h2 { font-size: 25px; }
  .verdict { padding: 18px; }
  .verdict li { grid-template-columns: 1fr; gap: 2px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .coupon { grid-template-columns: minmax(0, 1fr); }
  .coupon .trust { flex-wrap: wrap; }
  .code-line .code { flex: 1 1 auto; text-align: center; }
  .coupon .off { flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0; border-bottom: 1.5px dashed var(--rule-strong); padding: 14px 18px; }
  .coupon .off::before, .coupon .off::after { top: auto; bottom: -10px; right: auto; }
  .coupon .off::before { left: -10px; } .coupon .off::after { right: -10px; left: auto; }
  .coupon .big { font-size: 28px; }
  .coupon .body { padding: 14px 18px; }
  .code-line .btn { flex: 1 1 100%; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable { background: transparent; border: 0; }
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable tbody { display: grid; gap: 12px; }
  .rtable tbody tr { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 16px 14px; }
  .rtable tbody tr[hidden] { display: none; }
  .rtable td { border: 0; padding: 8px 0 0; }
  .rtable td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .06em; color: var(--mute); margin-bottom: 2px; }
  .rtable td.key { font-size: 17px; padding-top: 10px; white-space: normal; }
  .rtable td.key::before { display: none; }
  .rtable td.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding-top: 12px; }
  .rtable td.acts > * { width: auto; margin: 0; }
  .rtable td.acts .btn { width: 100%; }
  .hotel { grid-template-columns: 1fr; }
  .hotel figure { aspect-ratio: 16 / 9; }
  .hotel .body { padding: 14px 16px 16px; }
  .book .btn-primary { flex: 1 1 100%; }
  .book .btn-ghost { flex: 1; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .site-foot .cols > div:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.hotel .info { display: grid; gap: 8px; align-content: start; }
.hotel .side { display: grid; gap: 10px; }

/* ── v2 元件 ── */
/* 原型 v2：下單優先。新增：訂這趟面板、商品卡、店家券卡、拿完券還沒訂。規劃見 11_下單導流規劃.md */

/* ── 訂這趟：分頁下單面板 ── */
.booker { background: var(--panel); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.booker [role="tablist"] { display: flex; gap: 0; background: var(--sea); padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; }
.booker [role="tablist"]::-webkit-scrollbar { display: none; }
.booker [role="tab"] { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: var(--sea-mute); padding: 12px 18px; border-radius: 12px 12px 0 0; font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.booker [role="tab"]:hover { color: #fff; }
.booker [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--ink); }
.booker [role="tab"] svg.i { width: 18px; height: 18px; }
.booker [role="tabpanel"] { padding: 18px 20px 20px; }
.booker [role="tabpanel"][hidden] { display: none; }
.fields { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fields label { display: grid; padding: 10px 14px 10px 0; font-size: 12.5px; letter-spacing: .05em; color: var(--mute); border-right: 1px solid var(--rule); min-width: 0; }
.fields label:last-child { border-right: 0; }
.fields label + label { padding-left: 14px; }
.fields input, .fields select { border: 0; outline: 0; background: transparent; font: 500 16px/1.5 var(--sans); color: var(--ink); padding: 2px 0 0; min-width: 0; width: 100%; }
.fields label:focus-within { background: #F4F8F8; }
.go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.go-row .lbl { font-size: 14px; color: var(--mute); margin-right: 4px; }
.go-row .fine { font-size: 12.5px; color: var(--mute); margin-left: auto; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 14px; }
.quick span { color: var(--mute); margin-right: 2px; padding: 6px 0; }
.quick a { text-decoration: none; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 12px; }
.quick a:hover { border-color: var(--ink); }

/* ── 商品卡（交通、門票、eSIM） ── */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.prod figure { margin: 0; aspect-ratio: 16 / 10; background: var(--photo-bg); position: relative; overflow: hidden; }
.prod figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.prod:hover figure img { transform: scale(1.04); }
.prod .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.prod h3 { margin: 0; font-size: 19px; line-height: 1.38; }
.prod p { margin: 0; font-size: 14px; color: var(--mute); }
.prod .price { font-size: 14px; color: var(--mute); }
.prod .price b { font: 700 22px/1 var(--serif); color: var(--ink); margin-right: 2px; }
.prod .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.prod .btns .btn { padding: 10px 8px; font-size: 14px; }

/* ── 店家券卡 ── */
.scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scard { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.scard[hidden] { display: none; }
.scard figure { margin: 0; aspect-ratio: 16 / 9; background: var(--photo-bg); position: relative; }
.scard figure img { width: 100%; height: 100%; object-fit: cover; }
.scard figure figcaption { position: absolute; left: 10px; top: 10px; background: rgb(255 255 255 / .94); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.scard .body { padding: 14px 18px 16px; display: grid; gap: 8px; align-content: start; }
.scard h3 { margin: 0; font-size: 20px; }
.scard .off { font: 700 21px/1.3 var(--serif); color: var(--accent-deep); margin: 0; }
.scard .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--mute); }
.scard .btns { display: flex; gap: 8px; margin-top: 4px; }
.scard .btns .btn { flex: 1; }

/* ── 拿完券，還沒訂的（導流區） ── */
.nextbook { background: var(--sea); color: var(--sea-ink); border-radius: var(--radius); padding: 24px 26px; }
.nextbook h2 { color: #fff; font-size: 24px; margin: 0 0 4px; }
.nextbook > p { margin: 0 0 16px; color: var(--sea-mute); font-size: 15px; }
.nextbook .rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nextbook .rows { gap: 0; }
.nextbook .row { padding: 4px 18px; display: grid; gap: 6px; align-content: start; border-left: 1px solid rgb(255 255 255 / .18); }
.nextbook .row:first-child { border-left: 0; padding-left: 0; }
.nextbook .row b { font: 600 17px/1.35 var(--serif); color: #fff; }
.nextbook .row span { font-size: 13.5px; color: var(--sea-mute); }
.nextbook .row .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nextbook .row .links a { font-size: 13.5px; font-weight: 600; color: var(--sea); background: #fff; border-radius: 8px; padding: 6px 10px; text-decoration: none; }
.nextbook .row .links a:hover { background: #F6D9D1; }

/* ── 目的地總頁：跳到要訂的項目 ── */
.trip-nav { position: sticky; top: var(--head-h, 68px); z-index: 6; background: var(--ground); border-bottom: 1px solid var(--rule); padding: 10px 0; }
.trip-nav .chips a { text-decoration: none; }
.trip-nav .chips a b { font-weight: 600; }
.step { padding-top: 52px; scroll-margin-top: calc(var(--head-h, 68px) + var(--toc-h, 0px) + 8px); }
.step-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.step-head h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); }
.step-head p { margin: 0; color: var(--mute); font-size: 15px; }
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.route { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 6px; }
.route b { font: 600 20px/1.3 var(--serif); }
.route span { font-size: 14px; color: var(--mute); }
.route .btns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.widget-slot { margin-top: 16px; border: 1.5px dashed var(--rule-strong); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; color: var(--mute); font-size: 14px; background: rgb(255 255 255 / .5); }
.widget-slot b { color: var(--ink); }

@media (max-width: 1080px) {
  .prods { grid-template-columns: repeat(2, 1fr); }
  .nextbook .rows { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .nextbook .row:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .booker [role="tab"] { flex: 0 0 auto; padding: 11px 14px; font-size: 14.5px; }
  .booker [role="tabpanel"] { padding: 14px; }
  .fields { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .fields label, .fields label + label { border-right: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .fields label:last-child { border-bottom: 0; }
  .fields label.wide { grid-column: 1 / -1; }
  .go-row .btn { flex: 1 1 calc(50% - 5px); }
  .go-row .btn-primary { flex-basis: 100%; }
  .go-row .fine { margin-left: 0; width: 100%; }
  .prods, .scards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .prods > *, .scards > * { scroll-snap-align: start; }
  .scards.grid-mobile { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 12px; }
  .scards.grid-mobile .scard figure { aspect-ratio: 21 / 8; }
  .scards.grid-mobile .scard figure.typo strong { font-size: 24px; }
  .nextbook { padding: 18px; }
  .nextbook .rows { grid-template-columns: 1fr; }
  .nextbook .row { border-left: 0; border-top: 1px solid rgb(255 255 255 / .18); padding: 14px 0; }
  .nextbook .row:first-child { border-top: 0; padding-top: 0; }
  .routes { grid-template-columns: 1fr; }
  .step { padding-top: 40px; }
}

/* ── index 頁（body.home） ── */
body.home .hero {position: relative; padding: 36px 0 44px;}
body.home .hero-grid {display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: end;}
body.home .hero h1 {margin: 0; font-size: clamp(40px, 4.6vw, 70px); line-height: 1.12;}
body.home .hero h1 em {font-style: normal; color: var(--accent);}
body.home .hero .sub {font-size: 17px; color: var(--mute); margin: 16px 0 0; max-width: 34ch;}
body.home .hero-photos {display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 150px 150px; gap: 10px;}
body.home .hero-photos figure {margin: 0; border-radius: 10px; overflow: hidden; background: var(--photo-bg); position: relative;}
body.home .hero-photos figure:first-child {grid-row: span 2;}
body.home .hero-photos img {width: 100%; height: 100%; object-fit: cover;}
body.home .hero-photos figcaption {position: absolute; left: 10px; bottom: 8px; background: rgb(255 255 255 / .94); font-size: 12px; padding: 3px 10px; border-radius: 999px;}
body.home .hero .booker {margin-top: 28px;}
.dests {display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 14px;}
.dest {position: relative; height: 300px; border-radius: 12px; overflow: hidden; color: #fff; text-decoration: none; background: #1E3A47;}
.dest img {width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease);}
.dest:hover img {transform: scale(1.05);}
.dest::after {content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgb(10 28 38 / .82));}
.dest span {position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 2px;}
.dest b {font: 600 28px/1.15 var(--serif);}
.dest small {font-size: 13px; color: #E4EEF0;}
body.home .coupon-entry {display: grid; grid-template-columns: 1fr 2fr; gap: 28px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px;}
body.home .coupon-entry h2 {margin: 0 0 8px; font-size: 28px;}
body.home .coupon-entry p {margin: 0 0 16px; color: var(--mute);}
body.home .coupon-entry .stores {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
body.home .coupon-entry .stores a {position: relative; display: block; height: 150px; border-radius: 10px; overflow: hidden; color: #fff; text-decoration: none; background: #1E3A47;}
body.home .coupon-entry .stores img {width: 100%; height: 100%; object-fit: cover;}
body.home .coupon-entry .stores a::after {content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgb(10 28 38 / .8));}
body.home .coupon-entry .stores span {position: absolute; z-index: 1; left: 12px; bottom: 10px; font: 600 17px var(--serif);}
body.home .tools {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
body.home .tools a {background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; display: grid; gap: 4px;}
body.home .tools a:hover {border-color: var(--ink);}
body.home .tools b {font: 600 19px var(--serif);}
body.home .tools span {font-size: 14px; color: var(--mute);}
@media (max-width: 860px) {
body.home .hero {padding: 20px 0 32px;}
body.home .hero-grid {grid-template-columns: 1fr; gap: 16px;}
body.home .hero h1 {font-size: 34px;}
body.home .hero .sub {font-size: 15.5px;}
body.home .hero-photos {display: none;}
body.home .hero .booker {margin-top: 18px;}
.dests {grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory;}
.dest {height: 200px; scroll-snap-align: start;}
.dest b {font-size: 22px;}
body.home .coupon-entry {grid-template-columns: 1fr; padding: 18px; gap: 14px;}
body.home .coupon-entry .stores {grid-template-columns: repeat(3, 1fr); gap: 8px;}
body.home .coupon-entry .stores a {height: 110px;}
body.home .coupon-entry .stores span {font-size: 14px;}
body.home .tools {grid-template-columns: 1fr; gap: 10px;}
}

/* ── tokyo 頁（body.tpl-destination） ── */
body.tpl-destination .top {display: grid; grid-template-columns: 4fr 7fr; gap: 28px; align-items: stretch; margin-top: 16px;}
body.tpl-destination .top figure {margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--photo-bg); min-height: 300px;}
body.tpl-destination .top figure img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
body.tpl-destination .top figcaption {position: absolute; left: 12px; bottom: 12px; background: rgb(255 255 255 / .94); font-size: 12px; padding: 4px 10px; border-radius: 999px;}
body.tpl-destination .top .booker {align-self: center;}
body.tpl-destination .areas {display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px;}
body.tpl-destination .areas a {display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; text-decoration: none;}
body.tpl-destination .areas a:hover {border-color: var(--ink);}
body.tpl-destination .areas b {font: 600 18px var(--serif);}
body.tpl-destination .areas span {font-size: 13px; color: var(--mute);}
body.tpl-destination .areas small {font-size: 12.5px; color: var(--accent-deep); font-weight: 600;}
body.tpl-destination .more {display: flex; justify-content: center; margin-top: 16px;}
body.tpl-destination .couponlink {display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 22px; text-decoration: none;}
body.tpl-destination .couponlink:hover {border-color: var(--ink);}
body.tpl-destination .couponlink img {width: 120px; height: 80px; object-fit: cover; border-radius: 8px;}
body.tpl-destination .couponlink b {font: 600 20px var(--serif); display: block;}
body.tpl-destination .couponlink div span {color: var(--mute); font-size: 14.5px;}
@media (max-width: 1080px) {
body.tpl-destination .areas {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 860px) {
body.tpl-destination .top {grid-template-columns: 1fr; gap: 14px;}
body.tpl-destination .top figure {min-height: 180px;}
body.tpl-destination .areas {grid-template-columns: 1fr 1fr;}
body.tpl-destination .couponlink {grid-template-columns: 88px 1fr;}
body.tpl-destination .couponlink img {width: 88px; height: 66px;}
body.tpl-destination .couponlink .btn {grid-column: 1 / -1;}
}

/* ── coupons-japan 頁（body.tpl-coupons） ── */
body.tpl-coupons .howto {display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 12px; margin-top: 20px;}
body.tpl-coupons .howto div {background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; color: var(--mute);}
body.tpl-coupons .howto b {display: block; color: var(--ink); font: 600 17px var(--serif); margin-bottom: 2px;}
body.tpl-coupons .howto .note {background: var(--accent-soft); border-color: #F1CFC4; color: var(--accent-deep);}
body.tpl-coupons .howto .note b {color: var(--accent-deep);}
body.tpl-coupons .fbar {position: sticky; top: var(--head-h, 68px); z-index: 5; background: var(--ground); padding: 14px 0 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 18px;}
body.tpl-coupons .fbar .grp {display: flex; align-items: center; gap: 10px;}
body.tpl-coupons .fbar .grp > span {font-size: 13px; color: var(--mute); width: 3em; flex: none;}
body.tpl-coupons .fbar .count {font-size: 14px; color: var(--mute);}
body.tpl-coupons .fbar .count b {color: var(--ink);}
body.tpl-coupons .scard figure.typo {display: grid; place-items: center; background-color: var(--sea); background-image: linear-gradient(135deg, #1E3A47, var(--sea));}
body.tpl-coupons .scard figure.typo strong {font: 700 30px/1.2 var(--serif); color: #fff; text-align: center; padding: 0 12px;}
body.tpl-coupons .scard figure.typo figcaption {background: #2B4A58; color: #fff;}
body.tpl-coupons .alltable td.key small {white-space: normal;}
@media (min-width: 861px) {
  body.tpl-coupons .alltable {table-layout: fixed;}
  body.tpl-coupons .alltable th:nth-child(1) {width: 20%;}
  body.tpl-coupons .alltable th:nth-child(2) {width: 34%;}
  body.tpl-coupons .alltable th:nth-child(4) {width: 16%;}
  body.tpl-coupons .alltable td.key {white-space: normal;}
}
@media (max-width: 1080px) {
body.tpl-coupons .howto {grid-template-columns: 1fr 1fr;}
body.tpl-coupons .scards {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 860px) {
body.tpl-coupons .scards.grid-mobile {grid-template-columns: minmax(0, 1fr);}
body.tpl-coupons .howto {grid-template-columns: 1fr; gap: 8px;}

body.tpl-coupons .fbar .grp > span {display: none;}
}

/* ── coupon-donki 頁（body.tpl-store） ── */
body.tpl-store .cp {display: grid; grid-template-columns: 5fr 7fr; gap: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 18px; box-shadow: var(--shadow);}
body.tpl-store .cp figure {margin: 0; position: relative; background: var(--photo-bg); min-height: 320px;}
body.tpl-store .cp figure img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
body.tpl-store .cp figure figcaption {position: absolute; left: 10px; bottom: 10px; background: rgb(255 255 255 / .94); font-size: 12px; padding: 3px 10px; border-radius: 999px;}
body.tpl-store .cp .body {padding: 24px 28px; display: grid; gap: 12px; align-content: start;}
body.tpl-store .cp .off {font: 700 clamp(26px, 2.6vw, 36px)/1.25 var(--serif); color: var(--accent-deep); margin: 0;}
body.tpl-store .cp ol {margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px;}
body.tpl-store .cp .btns {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;}
body.tpl-store .warn-list {margin: 0; padding: 12px 16px 12px 34px; background: var(--accent-soft); border-radius: 10px; font-size: 14.5px; color: var(--accent-deep); display: grid; gap: 2px;}
body.tpl-store .shops td .near {display: inline-flex; gap: 6px; flex-wrap: wrap;}
@media (max-width: 860px) {
body.tpl-store .cp {grid-template-columns: 1fr;}
body.tpl-store .cp figure {min-height: 190px;}
body.tpl-store .cp .body {padding: 18px;}
body.tpl-store .cp .btns .btn {flex: 1 1 100%;}
}

/* ── stay-tokyo 頁（body.tpl-stay） ── */
body.tpl-stay .top {display: grid; grid-template-columns: 5fr 6fr; gap: 32px; align-items: stretch; margin-top: 18px;}
body.tpl-stay .top figure {margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--photo-bg); min-height: 380px;}
body.tpl-stay .top figure img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
body.tpl-stay .top figcaption {position: absolute; left: 12px; bottom: 12px; background: rgb(255 255 255 / .94); font-size: 12px; padding: 4px 10px; border-radius: 999px;}
body.tpl-stay .top .verdict {box-shadow: none;}
body.tpl-stay .top .verdict li {grid-template-columns: 7.5em 1fr;}
body.tpl-stay .picker {background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 24px;}
body.tpl-stay .picker h2 {font-size: 22px; margin: 0 0 4px;}
body.tpl-stay .picker #sit-result {margin: 0 0 14px; color: var(--mute); font-size: 14.5px; min-height: 1.7em;}
@media (min-width: 861px) {
  body.tpl-stay .cmp .rtable {table-layout: fixed;}
  body.tpl-stay .cmp .rtable th:nth-child(1) {width: 20%;}
  body.tpl-stay .cmp .rtable th:nth-child(2) {width: 23%;}
  body.tpl-stay .cmp .rtable th:nth-child(3) {width: 76px;}
  body.tpl-stay .cmp .rtable th:nth-child(4) {width: 22%;}
  body.tpl-stay .cmp .rtable td.pband {white-space: nowrap;}
}
body.tpl-stay .cmp {display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin-top: 20px;}
body.tpl-stay .map {position: sticky; top: 92px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px;}
body.tpl-stay .map svg {width: 100%; height: auto; display: block;}
body.tpl-stay .map .loop {fill: none; stroke: #9DB5B5; stroke-width: 6;}
body.tpl-stay .map .line {fill: none; stroke: #C9D7D7; stroke-width: 3; stroke-dasharray: 6 6;}
body.tpl-stay .map .air {font: 600 13px var(--sans); fill: var(--mute);}
body.tpl-stay .map g[data-area] {cursor: pointer; transition: opacity .25s var(--ease);}
body.tpl-stay .map g[data-area] circle {fill: var(--ink); transition: fill .25s var(--ease);}
body.tpl-stay .map g[data-area] text.n {font: 700 15px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: central;}
body.tpl-stay .map g[data-area] text.l {font: 600 15px var(--serif); fill: var(--ink);}
body.tpl-stay .map g.pick circle {fill: var(--accent);}
body.tpl-stay .map g.dim {opacity: .3;}
body.tpl-stay .map figcaption {font-size: 12.5px; color: var(--mute); margin-top: 6px;}
body.tpl-stay .areanav {position: sticky; top: var(--head-h, 68px); z-index: 6; background: var(--ground); padding: 10px 0; border-bottom: 1px solid var(--rule);}
body.tpl-stay .areanav .chips a {text-decoration: none;}
body.tpl-stay .area {padding-top: 48px; scroll-margin-top: 130px;}
body.tpl-stay .area.dim .area-head {opacity: .55;}
body.tpl-stay .area-head {display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; margin-bottom: 20px; transition: opacity .25s var(--ease);}
body.tpl-stay .area-head figure {margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--photo-bg);}
body.tpl-stay .area-head figure img {width: 100%; height: 100%; object-fit: cover;}
body.tpl-stay .area-head .area-title {font-size: 30px; margin: 0 0 6px;}
body.tpl-stay .area-head .area-title span {display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 16px var(--sans); margin-right: 10px; vertical-align: 4px;}
body.tpl-stay .area.pick .area-head .area-title span {background: var(--accent);}
body.tpl-stay .area-head .one {font-size: 17px; margin: 0 0 12px;}
body.tpl-stay .fitgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px;}
body.tpl-stay .fitgrid div {border-radius: 10px; padding: 12px 14px; font-size: 14.5px;}
body.tpl-stay .fitgrid .y {background: var(--ok-soft);}
body.tpl-stay .fitgrid .n {background: var(--accent-soft);}
body.tpl-stay .fitgrid b {display: block; font-size: 13px; margin-bottom: 2px;}
body.tpl-stay .fitgrid .y b {color: var(--ok);}
body.tpl-stay .fitgrid .n b {color: var(--accent-deep);}
body.tpl-stay .fitgrid ul {margin: 0; padding-left: 18px;}
body.tpl-stay .area-head .move {font-size: 14.5px; color: var(--mute); margin: 0;}
body.tpl-stay .perkhint {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--ok-soft); color: var(--ink); border-radius: 12px; padding: 14px 18px; font-size: 15px; margin-top: 28px;}
body.tpl-stay .save {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
body.tpl-stay .save a {background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; text-decoration: none; display: grid; gap: 4px;}
body.tpl-stay .save a:hover {border-color: var(--ink);}
body.tpl-stay .save b {font: 600 18px var(--serif);}
body.tpl-stay .save span {font-size: 14px; color: var(--mute);}
body.tpl-stay .share {display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: var(--sea); color: var(--sea-ink); border-radius: var(--radius); padding: 26px 30px;}
body.tpl-stay .share h2 {color: #fff; margin: 0 0 4px; font-size: 24px;}
body.tpl-stay .share p {margin: 0; color: var(--sea-mute); font-size: 15px;}
body.tpl-stay .band-note {font-size: 13.5px; color: var(--mute); margin: 10px 0 0;}
@media (max-width: 1080px) {
body.tpl-stay .cmp {grid-template-columns: 1fr;}
body.tpl-stay .map {position: static; max-width: 520px;}
}
@media (max-width: 860px) {
body.tpl-stay .top {grid-template-columns: 1fr; gap: 14px;}
body.tpl-stay .top figure {min-height: 220px; order: -1;}
body.tpl-stay .top .verdict li {grid-template-columns: 1fr;}
body.tpl-stay .picker {padding: 16px;}
body.tpl-stay .areanav {top: 92px;}
body.tpl-stay .area {padding-top: 36px;}
body.tpl-stay .area-head {grid-template-columns: 1fr; gap: 14px;}
body.tpl-stay .area-head .area-title {font-size: 25px;}
body.tpl-stay .fitgrid {grid-template-columns: 1fr;}
body.tpl-stay .save {grid-template-columns: 1fr;}
body.tpl-stay .share {grid-template-columns: 1fr; padding: 20px;}
}

/* ── 正式站新增元件 ── */
.fields:not(:has(label)) { display: none; }
.trip-btn { position: relative; }
.trip-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.save-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--mute); font-size: 13.5px; padding: 6px 0; cursor: pointer; margin-top: 2px; }
.save-btn svg.i { width: 16px; height: 16px; }
.save-btn:hover { color: var(--ink); }
.save-btn[aria-pressed="true"] { color: var(--accent-deep); }
.save-btn[aria-pressed="true"] svg.i { fill: currentColor; }
.linkbtn { border: 0; background: none; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; padding: 4px 0; font-size: 14px; color: var(--ink); }
.hotel figure.nophoto { display: grid; place-items: center; background-color: var(--sea); background-image: linear-gradient(135deg, #1E3A47, var(--sea)); min-height: 160px; }
.hotel figure.nophoto span { font: 600 20px/1.4 var(--serif); color: #fff; padding: 16px; text-align: center; }
.hotel .src, .sources { font-size: 12.5px; color: var(--mute); margin: 0; }
.sources { margin-top: 24px; }
.credit { position: absolute; right: 8px; bottom: 6px; font-size: 12px; color: #fff; background: rgb(8 16 20 / .62); padding: 2px 8px; border-radius: 6px; }
.expired-note { background: var(--accent-soft); color: var(--accent-deep); border-radius: 10px; padding: 12px 16px; }
.src-link { font-size: 12px; color: var(--mute); }
.under-note a { color: inherit; }
.how { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 32px 36px; }
.how h2 { margin: 0 0 10px; font-size: 28px; }
.how ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how li b { display: block; font: 600 18px/1.4 var(--serif); margin-bottom: 4px; }
.how li { font-size: 14.5px; color: var(--mute); }
.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-item { display: grid; gap: 10px; text-decoration: none; }
.post-item img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 10px; }
.post-item b { font: 600 19px/1.4 var(--serif); display: block; }
.post-item small { color: var(--mute); }
.searchbar { display: flex; gap: 10px; max-width: 640px; margin: 8px 0 20px; }
.searchbar input { flex: 1; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 12px 14px; font: inherit; background: var(--panel); }
.hit-list { display: grid; gap: 8px; padding-left: 20px; margin: 0 0 28px; }
.empty { color: var(--mute); }

/* 文章與信任頁 */
.article-wrap { max-width: 860px; }
.article .page-head h1 { font-size: clamp(30px, 3vw, 42px); }
.article-hero { margin: 16px 0 0; }
.article-hero img { width: 100%; height: auto; border-radius: var(--radius); }
.prose { font-size: 17px; line-height: 1.85; max-width: 70ch; }
.prose h2 { font-size: 26px; margin: 40px 0 12px; }
.prose h3 { font-size: 21px; margin: 28px 0 8px; }
.prose a { color: var(--accent-deep); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 16px 0; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 10px 12px; text-align: left; }
.prose img { height: auto; border-radius: 10px; }
.prose ul, .prose ol { padding-left: 22px; }

/* 表單 */
.share-form { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 860px; }
.share-form h2 { margin: 0; font-size: 24px; }
.share-form > p { margin: 0; color: var(--mute); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label { display: grid; gap: 4px; font-size: 14px; color: var(--mute); min-width: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; max-width: 100%; font: inherit; color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 12px; background: #fff; }
.form-grid .consent { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; font-size: 14px; color: var(--ok); }
.share-form .btn { justify-self: start; }

/* 工具 */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.tool-card { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .2s var(--ease); }
.tool-card:hover { border-color: var(--ink); }
.tool-card figure { margin: 0; height: 176px; background: var(--photo-bg); overflow: hidden; }
.tool-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tool-card:hover figure img { transform: scale(1.04); }
.tool-card figure.typo { display: grid; place-items: center; background-color: var(--sea); background-image: linear-gradient(135deg, #1E3A47, var(--sea)); }
.tool-card figure.typo strong { font: 600 22px/1.3 var(--serif); color: #fff; text-align: center; padding: 0 18px; }
.tool-card .txt { display: grid; gap: 4px; align-content: start; padding: 16px 20px 20px; }
.tool-card b { font: 600 19px var(--serif); }
.tool-card .txt span { font-size: 14px; color: var(--mute); }
.tool-form { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; margin-top: 18px; }
.tool-form .fields { border-top: 0; }
.tool-form.jr { background: none; border: 0; padding: 0; }
.tool-verdict { font: 600 18px/1.5 var(--serif); margin: 18px 0 0; }
.tool-out h2 { font-size: 22px; }
.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 8px 0 12px; }
.total b { font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); color: var(--accent-deep); }
.total.bad b { color: var(--ink); }
.total span { color: var(--mute); }
.calc-line { color: var(--mute); margin: 0; }
.jr .qty { width: 5em; font: inherit; border: 1px solid var(--rule-strong); border-radius: 8px; padding: 6px 8px; }
.jr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.jr-card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.jr-card b { font: 600 19px var(--serif); }
.jr-card.win { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.jr-card.win .verdict-line { color: var(--ok); font-weight: 600; }
.jr-card .verdict-line { margin: 4px 0 0; }
.addons { border: 0; padding: 0; margin: 14px 0 0; }
.addons legend { font-weight: 600; margin-bottom: 8px; }
.addon-list { display: flex; flex-wrap: wrap; gap: 8px; }
.addon { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 6px 12px; font-size: 14px; background: #fff; cursor: pointer; }
.tax-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tax-table h3 { font-size: 20px; margin: 0 0 8px; }
.tax-table.on .rtable { border-color: var(--accent); }
.tips { padding-left: 20px; display: grid; gap: 6px; }
.check-progress { font-size: 15px; }
.check-progress b { color: var(--accent-deep); font-size: 20px; }
.checklist { display: grid; gap: 18px; }
.check-group { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 22px; }
.check-group h2 { font-size: 21px; margin: 0 0 8px; }
.check-group ul { list-style: none; margin: 0; padding: 0; }
.check-group li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.check-group li:first-child { border-top: 0; }
.check-group label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check-group input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ok); flex: none; }
.check-group label span { display: grid; }
.check-group small { color: var(--mute); font-size: 13.5px; }
.check-group input:checked + span b { text-decoration: line-through; color: var(--mute); }
.trip-list { display: grid; gap: 18px; margin-top: 18px; }
.trip-group h2 { font-size: 21px; margin: 0 0 8px; }
.trip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; }
.trip-row .links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.tpl-store .cp figure.typo { display: grid; place-items: center; align-content: center; background-color: var(--sea); background-image: linear-gradient(135deg, #1E3A47, var(--sea)); color: #fff; }
body.tpl-store .cp figure.typo strong { font: 700 34px/1.2 var(--serif); }
body.tpl-store .cp figure.typo small { color: var(--sea-mute); }
body.tpl-store .meta-line { margin: 0; font-size: 14px; color: var(--mute); }
.report { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid var(--rule); padding-top: 10px; font-size: 13.5px; color: var(--mute); }
.report .q { color: var(--ink); }
.report button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule-strong); background: var(--panel); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.report button[aria-pressed="true"] { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.report button svg.i { width: 15px; height: 15px; }
.scard h3 a { text-decoration: none; }
.scard h3 a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .how { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .how ol { grid-template-columns: 1fr; gap: 14px; }
  .post-list, .tool-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .share-form { padding: 18px; }
  .check-group li { flex-wrap: wrap; }
  .trip-row { padding: 12px 14px; }
}

.prod figure.typo { aspect-ratio: 16 / 7; display: grid; place-items: center; background-color: var(--sea); background-image: linear-gradient(135deg, #1E3A47, var(--sea)); }
.prod figure.typo strong { font: 600 22px/1.3 var(--serif); color: #fff; text-align: center; padding: 0 16px; }

.trip-n[hidden], [hidden] { display: none !important; }

.nextbook { margin-top: 32px; }

/* ── 信用卡優惠總表（body.tpl-cards） ── */
body.tpl-cards .cards-verdict {margin-top: 20px; box-shadow: none;}
body.tpl-cards .cards-verdict li {grid-template-columns: minmax(0, 18em) 1fr;}
body.tpl-cards .fbar {display: grid; gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); margin-bottom: 18px;}
body.tpl-cards .fbar .grp {display: grid; grid-template-columns: 7em 1fr; align-items: start; gap: 10px;}
body.tpl-cards .fbar .grp > span {font-size: 13px; color: var(--mute); padding-top: 8px;}
body.tpl-cards .fbar .grp > span small {display: block; font-size: 12px;}
body.tpl-cards .fbar .count {font-size: 14px; color: var(--mute); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px;}
body.tpl-cards .fbar .count b {color: var(--ink);}
body.tpl-cards .fbar .count .fine {font-size: 12.5px;}
body.tpl-cards .cardtable .offer b {font: 600 17px/1.45 var(--serif); display: block;}
body.tpl-cards .cardtable small {display: block; font-size: 13px; color: var(--mute); margin-top: 4px;}
body.tpl-cards .cardtable small.warn {color: var(--accent-deep);}
body.tpl-cards .cardtable .due {display: block; font-size: 14.5px; color: var(--ink);}
body.tpl-cards .cardtable .due.soon {color: var(--accent-deep);}
body.tpl-cards .report {margin-top: 16px;}
body.tpl-cards .caution {margin: 40px 0 0; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); font-size: 14px; color: var(--mute); text-align: center;}
@media (min-width: 861px) {
  body.tpl-cards .cardtable {table-layout: fixed;}
  body.tpl-cards .cardtable thead th:nth-child(1) {width: 13%;}
  body.tpl-cards .cardtable thead th:nth-child(2) {width: 26%;}
  body.tpl-cards .cardtable thead th:nth-child(4) {width: 14%;}
  body.tpl-cards .cardtable thead th:nth-child(5) {width: 170px;}
}
@media (max-width: 860px) {
  body.tpl-cards .cards-verdict li {grid-template-columns: 1fr;}
  body.tpl-cards .fbar .grp {grid-template-columns: 1fr; gap: 4px;}
  body.tpl-cards .fbar .grp > span {padding-top: 0;}
  body.tpl-cards .fbar .chips {flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;}
  body.tpl-cards .fbar .chip {flex: none;}
}

/* ── 優惠日曆（body.tpl-calendar） ── */
body.tpl-calendar .today-card {margin-top: 20px; background: var(--sea); color: var(--sea-ink); border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow);}
body.tpl-calendar .today-card h2 {margin: 0 0 12px; font-size: 24px; color: #fff;}
body.tpl-calendar .today-card h2 span {font: 600 18px var(--sans); color: var(--sea-mute); margin-left: 6px;}
body.tpl-calendar .today-card ul {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;}
body.tpl-calendar .today-card li a {display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 10px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); text-decoration: none; transition: background .2s var(--ease);}
body.tpl-calendar .today-card li a:hover {background: rgb(255 255 255 / .14);}
body.tpl-calendar .today-card .tag {font-size: 12px; color: #F6B6A5; font-weight: 600;}
body.tpl-calendar .today-card b {font: 600 17px/1.4 var(--serif); color: #fff;}
body.tpl-calendar .today-card small {font-size: 13.5px; color: var(--sea-mute);}
body.tpl-calendar .today-card .fine {color: var(--sea-mute); font-size: 15px;}
body.tpl-calendar .daychips {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;}
body.tpl-calendar .daychip {display: grid; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; transition: border-color .2s var(--ease);}
body.tpl-calendar .daychip:hover {border-color: var(--ink);}
body.tpl-calendar .daychip b {font: 700 26px/1.1 var(--serif);}
body.tpl-calendar .daychip span {font-weight: 600;}
body.tpl-calendar .daychip small {font-size: 13.5px; color: var(--mute);}
body.tpl-calendar .daychip.now {background: var(--sea); border-color: var(--sea); color: #fff;}
body.tpl-calendar .daychip.now small {color: var(--sea-mute);}
body.tpl-calendar .weekgrid {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;}
body.tpl-calendar .wday {background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 12px; display: grid; align-content: start; gap: 8px; min-height: 120px; font-size: 13.5px;}
body.tpl-calendar .wday > b {font: 600 17px var(--serif);}
body.tpl-calendar .wday a {text-decoration: none; color: var(--mute); line-height: 1.5;}
body.tpl-calendar .wday a span {display: block; color: var(--ink); font-weight: 600;}
body.tpl-calendar .wday .none {color: var(--rule-strong);}
body.tpl-calendar .wday.now {border-color: var(--accent); background: var(--accent-soft);}
body.tpl-calendar .evmonth {margin-bottom: 28px;}
body.tpl-calendar .evmonth h3 {font-size: 20px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); width: max-content;}
body.tpl-calendar .ev {display: grid; grid-template-columns: 9em minmax(0, 1fr) auto; gap: 18px; align-items: start; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px;}
body.tpl-calendar .ev-status {margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--mute);}
body.tpl-calendar .ev.live .ev-status {color: var(--ok);}
body.tpl-calendar .ev.soon .ev-status {color: var(--accent-deep);}
body.tpl-calendar .ev.off {opacity: .65;}
body.tpl-calendar .ev h4 {margin: 0; font: 600 18px/1.45 var(--serif);}
body.tpl-calendar .ev h4 .plat {font: 600 12.5px var(--sans); color: var(--mute); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px;}
body.tpl-calendar .ev-what {margin: 4px 0 6px; color: var(--mute); font-size: 15px;}
body.tpl-calendar .ev-dates {display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 14px;}
body.tpl-calendar .ev-dates div {display: flex; gap: 6px;}
body.tpl-calendar .ev-dates dt {color: var(--mute);}
body.tpl-calendar .ev-dates dd {margin: 0; font-weight: 600;}
body.tpl-calendar .ev-last {margin: 6px 0 0; font-size: 13px; color: var(--mute);}
body.tpl-calendar .ev-acts {display: grid; gap: 8px;}
body.tpl-calendar .ev-ended {margin-top: 8px;}
body.tpl-calendar .ev-ended summary {cursor: pointer; color: var(--mute); padding: 8px 0;}
@media (max-width: 860px) {
  body.tpl-calendar .today-card {padding: 18px;}
  body.tpl-calendar .weekgrid {grid-template-columns: 1fr; gap: 6px;}
  body.tpl-calendar .wday {min-height: 0; grid-template-columns: 3.5em 1fr; align-items: baseline;}
  body.tpl-calendar .wday > a, body.tpl-calendar .wday > .none {grid-column: 2;}
  body.tpl-calendar .ev {grid-template-columns: 1fr; gap: 8px;}
  body.tpl-calendar .ev-acts {grid-template-columns: 1fr 1fr;}
}

body.home .home-cards {box-shadow: none;}

/* 手機頁首：LOGO 和工具鈕同一列；選單、訂這趟分頁可以橫滑，右緣淡出提示還有內容 */
@media (max-width: 860px) {
  .main-nav { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .booker { position: relative; }
  .booker::before { content: ""; position: absolute; top: 0; right: 0; width: 44px; height: 50px; background: linear-gradient(90deg, transparent, var(--sea) 80%); border-top-right-radius: var(--radius); pointer-events: none; z-index: 2; }
}
@media (max-width: 480px) {
  .site-head .bar { gap: 0 8px; }
  .site-head .logo img { height: 24px; }
  .site-head .util { gap: 8px; }
  .icon-btn { width: 34px; height: 34px; }
  .market { font-size: 12.5px; }
  .market button { padding: 4px 9px; }
}

/* ── 卡片網格不留半空的最後一列（桌機）：12 欄，整列 4 張；剩 3 張各占 1/3、剩 2 張各占一半、剩 1 張整列，剩 1–2 張改橫式卡 ── */
.routes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1081px) {
  .prods, .tool-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .prods > *, .tool-grid > * { grid-column: span 3; }
  .prods > :nth-last-child(3):nth-child(4n+1), .prods > :nth-last-child(2):nth-child(4n+2), .prods > :last-child:nth-child(4n+3),
  .tool-grid > :nth-last-child(3):nth-child(4n+1), .tool-grid > :nth-last-child(2):nth-child(4n+2), .tool-grid > :last-child:nth-child(4n+3) { grid-column: span 4; }
  .prods > :nth-last-child(2):nth-child(4n+1), .prods > :last-child:nth-child(4n+2),
  .tool-grid > :nth-last-child(2):nth-child(4n+1), .tool-grid > :last-child:nth-child(4n+2) { grid-column: span 6; }
  .prods > :last-child:nth-child(4n+1), .tool-grid > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .prods > :nth-last-child(2):nth-child(4n+1), .prods > :last-child:nth-child(4n+2), .prods > :last-child:nth-child(4n+1) { grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .prods > :last-child:nth-child(4n+1) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .prods > :nth-last-child(2):nth-child(4n+1) figure, .prods > :last-child:nth-child(4n+2) figure, .prods > :last-child:nth-child(4n+1) figure { aspect-ratio: auto; min-height: 230px; height: 100%; }
  .prods > :nth-last-child(2):nth-child(4n+1) .body, .prods > :last-child:nth-child(4n+2) .body, .prods > :last-child:nth-child(4n+1) .body { padding: 20px 22px; align-content: center; }
  .prods > :last-child:nth-child(4n+1) .btns { max-width: 380px; }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .prods > :last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .prods > :last-child:nth-child(odd) figure { aspect-ratio: auto; min-height: 220px; height: 100%; }
}

/* 不把詞拆成兩行：標題依空格分段（.nw），表格的機場、票價、時間不換行，「來源」放在價格下一行 */
.nw { white-space: nowrap; }
.rtable td.nowrap, .rtable td.num { white-space: nowrap; }
.rtable .src-link { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }

/* 信用卡表：每張卡一組，組頭放卡名、銀行、卡片介紹 */
body.tpl-cards .cardtable .chead th {position: static; background: var(--soft); border-bottom: 1px solid var(--rule-strong); padding: 12px 16px; text-align: left; font-weight: 400; letter-spacing: 0; color: var(--ink);}
body.tpl-cards .cardtable .chead .cname {font: 600 19px/1.3 var(--serif); margin-right: 10px;}
body.tpl-cards .cardtable .chead .cbank {font-size: 14px; color: var(--mute); margin-right: 14px;}
body.tpl-cards .cardtable .chead a {font-size: 13.5px; color: var(--accent-deep);}
body.tpl-cards .cardtable td.key {white-space: nowrap;}
@media (max-width: 860px) {
  body.tpl-cards .cardtable tbody.cgroup {display: grid; gap: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;}
  body.tpl-cards .cardtable tbody.cgroup[hidden] {display: none;}
  body.tpl-cards .cardtable .chead {display: block; background: var(--soft); padding: 0; border: 0; border-radius: 0;}
  body.tpl-cards .cardtable .chead th {display: block; border: 0;}
  body.tpl-cards .cardtable tbody.cgroup tr[data-plat] {border: 0; border-top: 1px solid var(--rule); border-radius: 0;}
  body.tpl-cards .cardtable tbody.cgroup tr[data-plat]:first-of-type {border-top: 0;}
}

/* ── 匯率換算 ── */
.fields label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0; color: var(--ink); }
.fields label.check input { width: auto; }
.fx-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) {
  /* 兩欄小表在手機維持表格（疊成卡片會看不到是哪個幣別） */
  .fx-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fx-tables .rtable { display: table; }
  .fx-tables .rtable thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .fx-tables .rtable thead th { position: static; }
  .fx-tables .rtable tbody { display: table-row-group; }
  .fx-tables .rtable tr { display: table-row; }
  .fx-tables .rtable th, .fx-tables .rtable td { display: table-cell; width: auto; padding: 8px 10px; }
  .fx-tables .rtable td[data-label]::before { content: none; }
}

/* ── 語言切換 ── */
.langs { position: relative; }
.langs summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 13.5px; font-weight: 600; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg.i { width: 18px; height: 18px; }
.langs ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; list-style: none; margin: 0; padding: 6px; min-width: 190px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); }
.langs li a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 14.5px; }
.langs li a:hover { background: var(--soft); }
.langs li a[aria-current] { font-weight: 700; color: var(--accent-deep); }
@media (max-width: 480px) { .langs summary { height: 34px; padding: 0 9px; } }

/* ── 目的地總覽 ── */
.dcards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.dcards.solo .dcard { grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dcards.solo .dcard .ph { aspect-ratio: auto; min-height: 260px; }
.dcards.solo .dcard .body { align-content: center; padding: 24px 28px; }
.dcard { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.dcard .ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--photo-bg); }
.dcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.dcard:hover .ph img { transform: scale(1.04); }
.dcard .body { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.dcard h3 { margin: 0; font-size: 24px; }
.dcard h3 a { text-decoration: none; }
.dcard p { margin: 0; color: var(--mute); font-size: 14.5px; }
.dcard .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 1080px) { .dcards { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .dcards, .dcards.solo .dcard { grid-template-columns: 1fr; } .dcards.solo .dcard .ph { aspect-ratio: 16 / 10; min-height: 0; } }

/* 外語版：拼音文字的首頁大標比中文長，字級降一級避免斷成五行 */
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"], [lang^="th"]) body.home .hero h1 {font-size: clamp(32px, 3.4vw, 50px);}
/* 日文依詞組斷行（不在「探せ／る」「ク／ーポン」中間斷）；韓文以空格斷行 */
html[lang^="ja"] body {word-break: auto-phrase; line-break: strict;}
html[lang^="ko"] body {word-break: keep-all;}
html[lang^="ja"] body.home .hero h1 {font-size: clamp(32px, 3.4vw, 50px);}

/* 外語版：拼音文字不加字距、長段落限制行長；日文長片假名名稱可斷行 */
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"], [lang^="th"]) :is(.hotel .meta, .site-foot h2) {letter-spacing: 0;}
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"], [lang^="th"]) :is(body.tpl-stay .area-head .move, body.tpl-stay .area-head .one, .hotel .facts li, .know, .share-form > p, .under-note) {max-width: 62ch;}
.scard .off, .rtable td.key span {overflow-wrap: anywhere;}
html[lang^="ja"] :is(.hotel h3, .hotel small) {overflow-wrap: anywhere;}
/* 換匯工具「換算金額」旁的幣別代碼 */
.tool-form label small {font-size: 13px; letter-spacing: .04em;}
/* 優惠券篩選列：手機的 chips 不換行橫捲，不能把整頁撐寬 */
body.tpl-coupons .fbar {grid-template-columns: minmax(0, 1fr);}
body.tpl-coupons .fbar .grp > .chips {min-width: 0;}
/* 優惠券卡：欄寬固定在卡片內，按鈕列與長折扣文字不撐破卡片（overflow:hidden 會把字切掉） */
.scard, .scard .body {grid-template-columns: minmax(0, 1fr);}
.scard .btns {flex-wrap: wrap;}
.scard .btns .btn {flex: 1 1 auto;}
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"], [lang^="th"]) .rtable td.key span {white-space: normal;}
/* 泰文上下有聲調與母音符號，標題行高要放鬆 */
html[lang^="th"] :is(h1, h2, h3) {line-height: 1.4;}
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"]) body.tpl-coupons .fbar .grp > span {width: auto; min-width: 3em;}
html:is([lang^="en"], [lang^="vi"], [lang^="id"], [lang^="de"], [lang^="fr"]) .rtable th {hyphens: auto; overflow-wrap: break-word;}

/* ── 固定頁首捲動後的分界、頁內目錄、回到頁首 ── */
.site-head { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.site-head.scrolled { background: rgb(242 245 244 / .97); box-shadow: 0 6px 18px -10px rgb(19 48 63 / .35); }
main :is(h2, h3)[id], .areas > [id], .hotel[id] { scroll-margin-top: calc(var(--head-h, 68px) + var(--toc-h, 0px) + 12px); }
.pagetoc { position: sticky; top: var(--head-h, 68px); z-index: 6; background: rgb(242 245 244 / .97); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 4px 0 22px; }
.pagetoc .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pagetoc .chips::-webkit-scrollbar { display: none; }
.pagetoc .chip { white-space: nowrap; text-decoration: none; color: var(--ink); }
:is(.pagetoc, .trip-nav, .areanav) .chips a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.to-top { position: fixed; right: 20px; bottom: 24px; z-index: 30; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 8px 22px -8px rgb(19 48 63 / .55); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .to-top { right: 14px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .site-head { transition: none; } }

/* ── 攻略：先給結論與重點數字，再分段；段落限行長、表格與商品滿版 ── */
.g-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; margin: 6px 0 30px; }
.g-answer { background: var(--sea); color: #fff; border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); }
.g-answer-h { margin: 0 0 10px; font-size: 20px; color: var(--sea-mute); letter-spacing: .02em; }
.g-answer p { margin: 0; font-size: 17px; line-height: 1.8; max-width: 62ch; }
.g-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.g-facts div { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; }
.g-facts dt { font-size: 13px; color: var(--mute); }
.g-facts dd { margin: 4px 0 0; font: 600 20px/1.3 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.g-sec { padding-top: 34px; }
.g-sec > h2 { margin: 0 0 14px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.3; }
.g-sec > p { max-width: 68ch; margin: 0 0 12px; line-height: 1.85; }
.g-sec .know { max-width: 68ch; margin-top: 14px; }
.g-table { margin: 16px 0; }
.g-steps { counter-reset: st; list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; max-width: 72ch; }
.g-steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 54px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; line-height: 1.7; }
.g-steps li::before { content: counter(st); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 600 14px/1 var(--sans); }
.g-prods { margin-top: 16px; }
.g-stay { display: grid; gap: 12px; margin-top: 18px; }
.g-stay-lead { margin: 0; font-weight: 600; }
.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gcard { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.gcard[hidden] { display: none; }
.gcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.gcard figure { margin: 0; aspect-ratio: 16 / 9; background: var(--photo-bg); position: relative; overflow: hidden; }
.gcard figure img { width: 100%; height: 100%; object-fit: cover; }
.gcard figcaption { position: absolute; left: 10px; top: 10px; background: rgb(255 255 255 / .94); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.gcard .body { display: grid; gap: 8px; padding: 14px 16px 16px; align-content: start; }
.gcard b { font: 600 19px/1.4 var(--serif); }
.gcard small { color: var(--mute); font-size: 14.5px; line-height: 1.65; }
.gcard .meta { font-size: 13px; color: var(--mute); }
.g-fbar { margin-top: 18px; }
.g-sources { margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--mute); }
.g-sources h2 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.g-sources ul { margin: 0 0 8px; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.g-sources li { margin-bottom: 4px; break-inside: avoid; }
.g-sources p { max-width: 72ch; }
@media (max-width: 1080px) { .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .g-top { grid-template-columns: minmax(0, 1fr); }
  .g-answer { padding: 20px; }
  .g-cards { grid-template-columns: minmax(0, 1fr); }
  .g-sources ul { columns: 1; }
}
body.tpl-guides .fbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
body.tpl-guides .fbar .grp { display: flex; align-items: center; gap: 10px; }
body.tpl-guides .fbar .grp > span { font-size: 13px; color: var(--mute); min-width: 3em; flex: none; }
body.tpl-guides .fbar .grp > .chips { min-width: 0; }
body.tpl-guides .fbar .count { margin: 0; font-size: 14px; color: var(--mute); }
@media (max-width: 860px) { body.tpl-guides .fbar .grp > span { display: none; } }
/* 住哪區：飯店篩選列（跟區域目錄一起固定在頁首下） */
body.tpl-stay .areanav .hfilter { margin-top: 8px; align-items: center; }
.hf-label { font-size: 13px; color: var(--mute); flex: none; }
.hf-count { margin-left: auto; font-size: 13.5px; color: var(--mute); white-space: nowrap; flex: none; padding-left: 8px; }
.hf-count b { color: var(--ink); }
.hotel[hidden] { display: none; }
.hf-none { margin: 4px 0 0; padding: 14px 16px; border: 1px dashed var(--rule-strong); border-radius: 12px; color: var(--mute); }
@media (max-width: 860px) { .hf-count { margin-left: 0; } }
/* 最近看過（存在這台裝置） */
.recent { margin: 28px 0 0; }
.recent .sec-head { margin-bottom: 10px; }
.recent .sec-head h2 { font-size: 22px; }
.recent .chips a { text-decoration: none; color: var(--ink); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.linkish { background: none; border: 0; padding: 0; color: var(--mute); font-size: 14px; text-decoration: underline; cursor: pointer; }

/* ── 新頁首與導覽：桌機單行＋「訂這趟」；手機 56px 單行、往下捲收起、選單抽屜、底部操作列 ── */
.book-btn { white-space: nowrap; }
.menu-btn { display: none; }
.menu-btn svg, .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-head { transition: transform .28s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
html.head-up .site-head { transform: translateY(-100%); }
:is(.pagetoc, .trip-nav, .areanav, body.tpl-coupons .fbar) { transition: top .28s var(--ease); }

dialog { border: 0; padding: 0; color: var(--ink); background: var(--panel); }
dialog::backdrop { background: rgb(8 20 28 / .45); backdrop-filter: blur(2px); }
html.dlg-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); font: 600 18px/1.3 var(--serif); }
.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(360px, 88vw); }
.drawer-nav { display: grid; padding: 8px 10px; }
.drawer-nav a { padding: 14px 12px; border-radius: 10px; text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--rule); }
.drawer-nav a:hover { background: var(--soft); }
.drawer-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; }
.drawer-opts .langs ul { position: static; margin-top: 8px; box-shadow: none; }
.book-dlg { width: min(1080px, 94vw); max-height: 90dvh; border-radius: 18px; overflow: auto; }
.book-dlg .booker { box-shadow: none; border-radius: 0; }
.search-dlg { margin-top: 8vh; width: min(720px, 94vw); max-height: 80dvh; border-radius: 16px; overflow: auto; }
.search-box { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.search-box > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--mute); stroke-width: 2; }
.search-box input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 17px; padding: 8px 4px; background: transparent; }
.search-box input:focus { outline: none; }
.search-res { padding: 6px 10px 14px; }
.search-res section { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.search-res h3 { margin: 4px 8px 6px; font: 600 13px/1.4 var(--sans); color: var(--mute); letter-spacing: .04em; }
.search-res a { display: block; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--ink); line-height: 1.5; }
.search-res a:hover, .search-res a:focus-visible { background: var(--soft); }
.search-hint { margin: 14px 8px; color: var(--mute); }

.bbar { display: none; }
@media (max-width: 860px) {
  .site-head .bar { flex-wrap: nowrap; height: 56px; padding-top: 0; gap: 8px; }
  .site-head .logo img { height: 24px; }
  .site-head .main-nav, .site-head .util .market, .site-head .util .langs, .site-head .book-btn { display: none; }
  .site-head .util { gap: 6px; }
  .icon-btn, .menu-btn { width: 44px; height: 44px; display: inline-grid; }
  .book-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .search-dlg { margin-top: 0; width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 64px; padding-bottom: env(safe-area-inset-bottom); background: rgb(255 255 255 / .97); border-top: 1px solid var(--rule); box-shadow: 0 -8px 20px -14px rgb(19 48 63 / .4); }
  .bbar a, .bbar button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: none; color: var(--ink); font: 500 12px/1.2 var(--sans); text-decoration: none; cursor: pointer; padding: 6px 2px; }
  .bbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bbar [aria-current="page"] { color: var(--accent-deep); }
  .bbar .bb-main { margin: 7px 4px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
  body { padding-bottom: 72px; }
  .to-top { bottom: 84px; }
  .toast { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { .site-head, :is(.pagetoc, .trip-nav, .areanav) { transition: none; } }
/* 住哪區手機精簡：沒照片的飯店卡不放名字色塊、區域說明收合、頂圖縮小 */
.area-more > summary { list-style: none; cursor: pointer; display: none; }
.area-more > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  .hotel { grid-template-columns: minmax(0, 1fr); }
  .hotel figure.nophoto { display: none; }
  .area-more > summary { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--panel); font-size: 14px; font-weight: 600; }
  .area-more > summary::after { content: "＋"; color: var(--mute); }
  .area-more[open] > summary::after { content: "－"; }
  body.tpl-stay .area-head figure { max-height: 170px; }
  body.tpl-stay .area-head figure img { height: 170px; }
  body.tpl-stay .top figure { min-height: 160px; max-height: 200px; }
}
/* 住哪區比較表：手機只留「區域・機場交通・價位帶」，適合／取捨在各區段落裡 */
.cmp-go { color: inherit; text-decoration: none; }
.cmp-go:hover span { text-decoration: underline; }
@media (max-width: 860px) {
  body.tpl-stay .cmp .rtable :is(td.c-fit, td.c-cut), body.tpl-stay .cmp .rtable td.key small { display: none; }
  body.tpl-stay .cmp .rtable tr { padding: 12px 14px; }
  body.tpl-stay .cmp .rtable td { padding: 2px 0; font-size: 14px; }
  body.tpl-stay .cmp .rtable td.key { font-size: 17px; }
  body.tpl-stay .cmp .rtable td.key .cmp-go::after { content: " ›"; color: var(--accent); }
}
/* 店家優惠券總入口 */
.hub-countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 8px 0 10px; }
.hub-c { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.hub-c figure { margin: 0; aspect-ratio: 16 / 7; background: var(--photo-bg); }
.hub-c figure img { width: 100%; height: 100%; object-fit: cover; }
.hub-c .body { display: grid; gap: 6px; padding: 16px 20px 20px; justify-items: start; }
.hub-c b { font: 600 26px/1.25 var(--serif); }
.hub-c .num { font: 600 18px/1 var(--serif); color: var(--accent-deep); }
.hub-c small { color: var(--mute); font-size: 14.5px; }
.hub-c .btn { margin-top: 6px; }
.hub-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hub-cat { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.hub-cat h3 { margin: 0 0 8px; font-size: 18px; }
.hub-cat ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-cat a { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.hub-cat li:first-child a { border-top: 0; }
.hub-cat a span { font-size: 13.5px; color: var(--accent-deep); }
@media (max-width: 1080px) { .hub-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .hub-countries, .hub-cats { grid-template-columns: minmax(0, 1fr); } }
/* 城市分頁列／國家切換 */
.citytabs { margin: 2px 0 6px; }
.citytabs .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.citytabs .chips::-webkit-scrollbar { display: none; }
.citytabs .chip { white-space: nowrap; text-decoration: none; color: var(--ink); }
.citytabs .chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.citytabs .chip b { font-weight: 600; margin-left: 2px; }
/* ── 出發前要知道：每月溫度範圍（城市 vs 台北，同一溫度軸）＋重點表 ── */
:root { --wx-city: var(--accent); --wx-tpe: #3A6EA5; }
.wx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--mute); margin: 0 0 10px; }
.wx-legend .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; }
.wx-legend .k.city { background: var(--wx-city); } .wx-legend .k.tpe { background: var(--wx-tpe); }
.wx-legend .src { margin-left: auto; font-size: 13px; }
.wx { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); height: 230px; padding: 10px 0 26px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.wx-axis { position: relative; }
.wx-axis span { position: absolute; right: 6px; transform: translateY(50%); font-size: 12px; color: var(--mute); }
.wx-cols { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: repeating-linear-gradient(to top, transparent 0 calc(20% - 1px), var(--rule) calc(20% - 1px) 20%); margin-right: 10px; }
.wx-m { position: relative; cursor: default; outline: none; }
.wx-m .bar { position: absolute; width: 9px; border-radius: 4px; }
.wx-m .bar.city { left: calc(50% - 10px); background: var(--wx-city); }
.wx-m .bar.tpe { left: calc(50% + 1px); background: var(--wx-tpe); }
.wx-m .lab { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font: 500 12px/1 var(--sans); color: var(--mute); }
.wx-m.now .lab { color: var(--ink); font-weight: 700; }
.wx-m.now { background: rgb(176 67 45 / .06); border-radius: 8px; }
.wx-m:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; z-index: 3; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 8px; pointer-events: none; }
.wx-m:first-child:is(:hover, :focus-visible)::after { left: 0; transform: none; }
.wx-m:last-child:is(:hover, :focus-visible)::after { left: auto; right: 0; transform: none; }
.wx-table tr.now { background: #FBF3EF; }
.info-kv { margin: 6px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-kv div { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; }
.info-kv dt { font-size: 13px; color: var(--mute); }
.info-kv dd { margin: 4px 0 0; line-height: 1.7; }
@media (max-width: 860px) {
  .info-kv { grid-template-columns: minmax(0, 1fr); }
  .wx { height: 200px; }
  .wx-m .bar { width: 6px; } .wx-m .bar.city { left: calc(50% - 7px); }
  .wx-m .lab { font-size: 12px; white-space: nowrap; }
  .wx-m .lab span { display: none; }
}
.info-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.info-sum > * { display: grid; gap: 4px; align-content: start; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.info-sum small { font-size: 13px; color: var(--mute); }
.info-sum b { font: 600 19px/1.35 var(--serif); }
.info-sum span { font-size: 14px; color: var(--mute); line-height: 1.6; }
.info-now { background: var(--sea) !important; color: #fff !important; border-color: var(--sea) !important; }
.info-now small, .info-now span { color: var(--sea-mute); }
.info-now b { font-size: 24px; }
@media (max-width: 1080px) { .info-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .info-sum { grid-template-columns: minmax(0, 1fr); } }
/* ── 排這趟（行程規劃器） ── */
.plan-form { display: grid; gap: 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow); margin: 8px 0 24px; }
.plan-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plan-form legend { font-size: 14px; font-weight: 600; color: var(--mute); margin-bottom: 8px; padding: 0; }
.plan-form .chip { position: relative; }
.plan-form .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.plan-form .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.plan-form .chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-form .fields { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
.plan-form .fields label { display: grid; gap: 4px; font-size: 13px; color: var(--mute); }
.plan-form .fields :is(input, select) { font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: #fff; min-width: 0; }
.pf-go { justify-self: start; min-width: 200px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.btns-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.plan-area { margin-top: 18px; }
.plan-area h3 { display: grid; gap: 2px; margin: 0 0 10px; font-size: 22px; }
.plan-area h3 small { font: 400 14.5px/1.6 var(--sans); color: var(--mute); }
.plan-sub { margin: 20px 0 10px; font-size: 20px; }
.plan-coupons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-cp { display: grid; gap: 3px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; color: var(--ink); }
.plan-cp b { font: 600 17px/1.35 var(--serif); }
.plan-cp span { color: var(--accent-deep); font-size: 14px; }
.plan-cp small { color: var(--mute); font-size: 13px; }
@media (max-width: 1080px) { .plan-coupons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .plan-form { padding: 16px; }
  .plan-form .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-form .fields label:first-child { grid-column: 1 / -1; }
  .plan-coupons { grid-template-columns: minmax(0, 1fr); }
  .pf-go { justify-self: stretch; }
}
.hero-cta { margin: 14px 0 6px; }
.plan-cta { margin: 6px 0 14px; }
@media (max-width: 860px) { :is(.hero-cta, .plan-cta) .btn { width: 100%; justify-content: center; } }
.near-cp { margin-top: 12px; display: grid; gap: 6px; }
.near-cp b { font-size: 14px; }
.near-cp .chip { text-decoration: none; color: var(--ink); font-size: 14px; }
/* 我的這趟：已訂、分享 */
.trip-row .tname { font-weight: 600; color: var(--ink); }
.trip-row .booked { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mute); cursor: pointer; }
.trip-row.done { opacity: .55; }
.trip-row.done .tname { text-decoration: line-through; }
.trip-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trip-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; margin: 8px 0 16px; background: var(--accent-soft); border-radius: 12px; }
.trip-share p { margin: 0; flex: 1 1 260px; font-weight: 600; }

/* 手機：每月天氣卡精簡成「月份＋四格數字一行＋穿搭」，十二個月不用滑十幾屏 */
@media (max-width: 860px) {
  .wx-table tbody { gap: 8px; }
  .wx-table tbody tr { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.45fr) minmax(0, .8fr); column-gap: 8px; padding: 4px 14px 12px; }
  .wx-table td { padding-top: 6px; }
  .wx-table td.key { grid-column: 1 / -1; font-size: 16px; padding-top: 8px; }
  .wx-table td.num { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .wx-table td[data-label]::before { font-size: 11px; letter-spacing: .02em; font-weight: 400; }
  .wx-table td:last-child { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.6; }
  .wx-table tr.now { background: #FBF3EF; border-color: #E7C9BD; }
}

/* 信用卡頁：排序＋選了平台就給答案 */
body.tpl-cards .csort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); justify-self: start; }
body.tpl-cards .csort select { min-height: 44px; font: 500 15px var(--sans); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0 12px; background: #fff; }
.cans { background: #F4F9F7; border: 1px solid #CFE3DC; border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px; display: grid; gap: 8px; }
.cans p { margin: 0; }
.cans-h { font-size: 14px; color: var(--mute); }
.cans-best { font: 600 19px/1.45 var(--serif); color: var(--ink); }
.cans-best small, .cans-alt small { display: block; font: 400 13.5px/1.5 var(--sans); color: var(--mute); margin-top: 2px; }
.cans-alt { font-size: 15px; }
.cans-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (max-width: 860px) { .cans { padding: 14px 16px; } .cans-best { font-size: 17px; } .cans-acts .btn { flex: 1 1 auto; } }

/* 旅費試算：算完接下一步 */
.next-steps { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0 8px; }
.next-steps .ns-h { margin: 0 0 4px; font: 600 18px/1.4 var(--serif); color: var(--ink); }
.next-steps [hidden] { display: none; }
@media (max-width: 860px) { .next-steps { padding: 14px 16px; } .next-steps .btn { flex: 1 1 100%; justify-content: center; } }

/* 首頁：接下來 30 天 */
.up-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.up-col { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.up-col h3 { margin: 0 0 6px; font: 600 18px/1.4 var(--serif); color: var(--ink); }
.up-col ul { list-style: none; margin: 0; padding: 0; }
.up-col li { border-top: 1px solid var(--rule); }
.up-col li:first-child { border-top: 0; }
.up-col li > a, .up-col li:not(:has(> a)) { display: grid; gap: 2px; padding: 12px 0; color: inherit; text-decoration: none; min-height: 44px; }
.up-col li > a:hover b { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.up-col b { font-size: 15.5px; line-height: 1.45; }
.up-col small { font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.up-col .due, .up-col .up-k { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--accent-deep); }
.up-col .fine { margin: 8px 0 0; font-size: 12px; color: var(--mute); }
@media (max-width: 860px) { .up-col { padding: 14px 16px; } }

/* 單券頁：短標題＋領券鈕先，條件一列一項 */
body.tpl-store .cp-terms { margin: 4px 0 0; display: grid; border-top: 1px solid var(--rule); }
body.tpl-store .cp-terms > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
body.tpl-store .cp-terms dt { font-size: 13.5px; font-weight: 600; color: var(--mute); }
body.tpl-store .cp-terms dd { margin: 0; font-size: 15px; line-height: 1.65; }
@media (max-width: 860px) {
  body.tpl-store .cp figure.typo { min-height: 96px; padding: 14px; }
  body.tpl-store .cp figure.typo strong { font-size: 26px; }
  body.tpl-store .cp figure:not(.typo) { min-height: 170px; }
  body.tpl-store .cp-terms > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 券列表：教學與新制提示收成可展開的列，首屏先給券（R11 P1-11） */
.howto-bars { display: grid; gap: 8px; margin: 14px 0 0; }
.howto-bar { background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; }
.howto-bar.note { background: #FBF0EC; border-color: #EBCFC4; }
.howto-bar summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; cursor: pointer; font-size: 14.5px; line-height: 1.45; list-style: none; }
.howto-bar summary::-webkit-details-marker { display: none; }
.howto-bar summary::after { content: "＋"; margin-left: auto; color: var(--mute); }
.howto-bar[open] summary::after { content: "－"; }
.howto-bar summary b { flex: none; font-size: 12.5px; font-weight: 700; color: var(--accent-deep); letter-spacing: .04em; }
.howto-bar ol, .howto-bar p { margin: 0; padding: 0 16px 14px 36px; font-size: 14.5px; line-height: 1.65; }
.howto-bar p { padding-left: 16px; }

/* 手機觸控目標補到 44px（R11 P1-19）：行內連結用「內距撐大、負外距抵銷」不改版面 */
@media (max-width: 860px) {
  .chip, .btn-sm, .save-btn, .quick a, .row .links a, .vote button, .site-head .logo { min-height: 44px; }
  .btn-sm { display: inline-flex; align-items: center; }
  .save-btn { padding-block: 0; }
  .site-head .logo { display: inline-flex; align-items: center; }
  .faq summary, details > summary { min-height: 44px; align-items: center; }
  .crumbs a, .sec-head > a, .step-head a, .cardtable .chead a, main h3 > a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .report button, a.logo { min-height: 44px; }
  a.logo { display: inline-flex; align-items: center; }
  .consent input[type=checkbox] { width: 22px; height: 22px; }
}

/* 幾月去哪裡 */
.wtg-months { margin-bottom: 14px; }
.wtg-months .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wtg-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wtg-rank li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; }
.wtg-rank li.top { border-color: #CFE3DC; background: #F4F9F7; }
.wtg-rank .n { font: 600 22px/1 var(--serif); color: var(--mute); text-align: center; }
.wtg-rank li.top .n { color: var(--ok); }
.wtg-rank .b { display: grid; gap: 2px; min-width: 0; }
.wtg-rank .nm { font: 600 18px/1.35 var(--serif); color: var(--ink); text-decoration: none; }
.wtg-rank .nm:hover { text-decoration: underline; text-underline-offset: 3px; }
.wtg-rank .t { font-weight: 600; font-size: 15px; }
.wtg-rank .t small { font-weight: 400; color: var(--mute); margin-left: 10px; font-size: 13.5px; }
.wtg-rank .w { font-size: 14px; color: var(--mute); line-height: 1.55; }
.wtg-rank .h { font-size: 13.5px; color: var(--accent-deep); font-weight: 600; }
.wtg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--mute); margin: 0 0 10px; }
.wtg-legend .k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: -8px; vertical-align: -2px; }
.wtg-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.wtg-table { border-collapse: separate; border-spacing: 2px; min-width: 860px; width: 100%; font-size: 13px; }
.wtg-table th { font-weight: 600; color: var(--mute); padding: 8px 4px; text-align: center; }
.wtg-table thead th.on { color: var(--ink); }
.wtg-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; padding: 8px 10px; white-space: nowrap; }
.wtg-table tbody th a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.wtg-table td { text-align: center; padding: 7px 2px; border-radius: 6px; line-height: 1.25; color: var(--ink); }
.wtg-table td b { display: block; font-size: 15px; }
.wtg-table td span { display: block; color: #3D5560; }
.wtg-table td small { display: block; color: #3D5560; font-size: 11px; margin-top: 2px; }
.wtg-table td.on { outline: 2px solid var(--ink); outline-offset: -2px; }
:is(.wtg-table td, .wtg-legend .k).c2 { background: #C9D9EC; }
:is(.wtg-table td, .wtg-legend .k).c1 { background: #E3EBF4; }
:is(.wtg-table td, .wtg-legend .k).ok { background: #EEF1EF; }
:is(.wtg-table td, .wtg-legend .k).h1 { background: #F6E1D8; }
:is(.wtg-table td, .wtg-legend .k).h2 { background: #EDC6B6; }
@media (max-width: 860px) {
  .wtg-rank li { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 14px; }
  .wtg-rank li > .btn { grid-column: 2; justify-self: start; }
  .wtg-months { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; }
}
.wtg-scroll { padding: 6px; }
.wx { padding-left: 6px; padding-right: 8px; }