/* 風情驛站 AI 形象官網樣式。手機優先（320 寬起）。
 * 三種配色：paper 質感白（預設的開燈版）、sky 極淡淺藍、night 夜晚（跟 App 的夜藍底、米白字、暖金強調同一套）。
 * 配色全部是 :root 上的 CSS 變數（html[data-theme="paper|sky|night"]），下面的樣式一律用變數、不寫死顏色。
 * 新增配色：複製一份變數區塊、改 data-theme 名稱與色票，再到 content/*.mjs 的 ui.theme 加名稱、lib/layout.mjs 的 THEMES 加一列。
 * 字疊在照片上的地方（.hero 主視覺、.sec-dark 的場景牆與掌櫃）不管哪種配色都用夜晚的變數：照片上的字不能因為配色變淺而看不清楚。 */

/* 不隨配色變的常數 */
:root {
  --paper: #f7efe0;
  --paper-ink: #2b1d18;
  --paper-ink-2: #5a463c;
  --gold-fill: #dcab62;
  --gold-fill-2: #f0c987;
  --gold-hover-1: #f6d9a3;
  --gold-hover-2: #e6b872;
  --on-gold: #1d1508;
  --on-jujube: #fff7ea;
  --on-jujube-hover: #fff;
  --scrim-rgb: 15, 25, 42;
  --photo-line: rgba(255, 255, 255, 0.14);
  --radius: 18px;
  --gutter: 16px;
  --header-h: 60px;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans", sans-serif;
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "Noto Serif", serif;
}
:lang(zh-Hans) { --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; }
:lang(ja) { --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif; --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
:lang(ko) { --sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; }

/* paper 質感白：沒有選過、系統也不是深色模式時的預設 */
:root,
:root[data-theme="paper"] {
  --bg: #faf7f1;
  --bg-2: #f3ede1;
  --surface: #ffffff;
  --surface-2: #f6f1e6;
  --line: rgba(70, 45, 25, 0.14);
  --hdr-bg: rgba(250, 247, 241, 0.92);
  --ftr-bg: #efe8da;
  --ink: #2b1d18;
  --ink-strong: #1a100c;
  --text-doc: #43342c;
  --text-card: #4a3b33;
  --text-cool: #4a3b33;
  --text-faq: #4a3b33;
  --text-ftr: #4a3b33;
  --text-hero: #efe6d6;
  --muted: #6b5a50;
  --muted-2: #6d5d53;
  --gold: #86570f;
  --gold-2: #6d4509;
  --gold-soft: rgba(184, 129, 44, 0.14);
  --gold-soft-2: rgba(184, 129, 44, 0.16);
  --gold-line: rgba(169, 116, 31, 0.55);
  --gold-line-2: rgba(169, 116, 31, 0.5);
  --gold-edge: #a9741f;
  --gold-shadow: 0 6px 16px rgba(138, 90, 18, 0.2);
  --jujube: #a93a3a;
  --jujube-2: #8f2f2f;
  --age-ink: #a93a3a;
  --age-line: #a93a3a;
  --note-bg: rgba(184, 129, 44, 0.13);
  --note-line: rgba(169, 116, 31, 0.6);
  --note-ink: #5e3d05;
  --hover: rgba(70, 45, 25, 0.07);
  --ghost-bg: rgba(70, 45, 25, 0.04);
  --ghost-line: rgba(70, 45, 25, 0.6);
  --ghost-hover: rgba(70, 45, 25, 0.09);
  --shadow-pop: 0 14px 36px rgba(70, 45, 25, 0.18);
  --shadow-fab: 0 8px 22px rgba(70, 45, 25, 0.2);
  --shadow-card: 0 8px 22px rgba(70, 45, 25, 0.14);
  --shadow-cta: 0 18px 44px rgba(70, 45, 25, 0.2);
  --cta-edge: rgba(70, 45, 25, 0.14);
  --elev: 0 1px 2px rgba(70, 45, 25, 0.06), 0 6px 18px rgba(70, 45, 25, 0.05);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .3  0 0 0 0 .18  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --show-lt: block;
  --show-dk: none;
  color-scheme: light;
}
/* sky 極淡淺藍 */
:root[data-theme="sky"] {
  --bg: #f3f7fc;
  --bg-2: #e8f0f9;
  --surface: #ffffff;
  --surface-2: #edf3fa;
  --line: rgba(30, 55, 100, 0.14);
  --hdr-bg: rgba(243, 247, 252, 0.92);
  --ftr-bg: #e3ecf7;
  --ink: #14213a;
  --ink-strong: #0b1426;
  --text-doc: #2c3a55;
  --text-card: #34425d;
  --text-cool: #34425d;
  --text-faq: #34425d;
  --text-ftr: #34425d;
  --text-hero: #efe6d6;
  --muted: #52607a;
  --muted-2: #586680;
  --gold: #855810;
  --gold-2: #6a4309;
  --gold-soft: rgba(184, 129, 44, 0.15);
  --gold-soft-2: rgba(184, 129, 44, 0.17);
  --gold-line: rgba(169, 116, 31, 0.55);
  --gold-line-2: rgba(169, 116, 31, 0.5);
  --gold-edge: #a9741f;
  --gold-shadow: 0 6px 16px rgba(120, 85, 20, 0.2);
  --jujube: #a93a3a;
  --jujube-2: #8f2f2f;
  --age-ink: #a93a3a;
  --age-line: #a93a3a;
  --note-bg: rgba(184, 129, 44, 0.13);
  --note-line: rgba(169, 116, 31, 0.6);
  --note-ink: #5a3b05;
  --hover: rgba(30, 55, 100, 0.07);
  --ghost-bg: rgba(30, 55, 100, 0.04);
  --ghost-line: rgba(30, 55, 100, 0.6);
  --ghost-hover: rgba(30, 55, 100, 0.09);
  --shadow-pop: 0 14px 36px rgba(30, 55, 100, 0.18);
  --shadow-fab: 0 8px 22px rgba(30, 55, 100, 0.2);
  --shadow-card: 0 8px 22px rgba(30, 55, 100, 0.14);
  --shadow-cta: 0 18px 44px rgba(30, 55, 100, 0.2);
  --cta-edge: rgba(30, 55, 100, 0.14);
  --elev: 0 1px 2px rgba(30, 55, 100, 0.06), 0 6px 18px rgba(30, 55, 100, 0.05);
  --grain: none;
  --show-lt: block;
  --show-dk: none;
  color-scheme: light;
}
/* night 夜晚；照片上的區塊（.hero、.sec-dark）不管哪種配色都用它 */
:root[data-theme="night"],
.hero,
.sec-dark {
  --bg: #0f192a;
  --bg-2: #132036;
  --surface: #182741;
  --surface-2: #1e3050;
  --line: rgba(255, 255, 255, 0.1);
  --hdr-bg: rgba(15, 25, 42, 0.92);
  --ftr-bg: #0b1322;
  --ink: #f4ede1;
  --ink-strong: #fff3dc;
  --text-doc: #e3dccf;
  --text-card: #dcd5c8;
  --text-cool: #cfd6e2;
  --text-faq: #d3dae6;
  --text-ftr: #d9d2c4;
  --text-hero: #efe6d6;
  --muted: #b9c1ce;
  --muted-2: #8892a3;
  --gold: #dcab62;
  --gold-2: #f0c987;
  --gold-soft: rgba(220, 171, 98, 0.14);
  --gold-soft-2: rgba(220, 171, 98, 0.18);
  --gold-line: rgba(220, 171, 98, 0.5);
  --gold-line-2: rgba(220, 171, 98, 0.45);
  --gold-edge: transparent;
  --gold-shadow: none;
  --jujube: #a93a3a;
  --jujube-2: #c24a4a;
  --age-ink: #ffb9b9;
  --age-line: #c24a4a;
  --note-bg: rgba(220, 171, 98, 0.12);
  --note-line: rgba(220, 171, 98, 0.55);
  --note-ink: #f6dba5;
  --hover: rgba(255, 255, 255, 0.07);
  --ghost-bg: rgba(255, 255, 255, 0.06);
  --ghost-line: rgba(255, 255, 255, 0.28);
  --ghost-hover: rgba(255, 255, 255, 0.14);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-fab: 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.25);
  --shadow-cta: 0 20px 50px rgba(0, 0, 0, 0.35);
  --cta-edge: transparent;
  --elev: none;
  --grain: none;
  --show-lt: none;
  --show-dk: block;
  color-scheme: dark;
  color: var(--ink);
}
/* 沒有 JavaScript（沒有 data-theme）時，系統是深色模式就用夜晚 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f192a;
    --bg-2: #132036;
    --surface: #182741;
    --surface-2: #1e3050;
    --line: rgba(255, 255, 255, 0.1);
    --hdr-bg: rgba(15, 25, 42, 0.92);
    --ftr-bg: #0b1322;
    --ink: #f4ede1;
    --ink-strong: #fff3dc;
    --text-doc: #e3dccf;
    --text-card: #dcd5c8;
    --text-cool: #cfd6e2;
    --text-faq: #d3dae6;
    --text-ftr: #d9d2c4;
    --text-hero: #efe6d6;
    --muted: #b9c1ce;
    --muted-2: #8892a3;
    --gold: #dcab62;
    --gold-2: #f0c987;
    --gold-soft: rgba(220, 171, 98, 0.14);
    --gold-soft-2: rgba(220, 171, 98, 0.18);
    --gold-line: rgba(220, 171, 98, 0.5);
    --gold-line-2: rgba(220, 171, 98, 0.45);
    --gold-edge: transparent;
    --gold-shadow: none;
    --jujube: #a93a3a;
    --jujube-2: #c24a4a;
    --age-ink: #ffb9b9;
    --age-line: #c24a4a;
    --note-bg: rgba(220, 171, 98, 0.12);
    --note-line: rgba(220, 171, 98, 0.55);
    --note-ink: #f6dba5;
    --hover: rgba(255, 255, 255, 0.07);
    --ghost-bg: rgba(255, 255, 255, 0.06);
    --ghost-line: rgba(255, 255, 255, 0.28);
    --ghost-hover: rgba(255, 255, 255, 0.14);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-fab: 0 10px 24px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.25);
    --shadow-cta: 0 20px 50px rgba(0, 0, 0, 0.35);
    --cta-edge: transparent;
    --elev: none;
    --grain: none;
    --show-lt: none;
    --show-dk: block;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; background: var(--bg) var(--grain); color: var(--ink); font: 16px/1.75 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; }
:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-2); }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.ic { flex: none; }

.wrap { width: min(100% - 2 * var(--gutter), 1160px); margin-inline: auto; }
.narrow { max-width: 860px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--gold-fill); color: #1a1208; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 8px; }

/* ───────── 按鈕 ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0.55em 1.35em; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 650; line-height: 1.3; text-decoration: none; text-align: center; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-fill-2), var(--gold-fill)); color: var(--on-gold); border-color: var(--gold-edge); box-shadow: var(--gold-shadow); }
.btn-gold:hover { background: linear-gradient(180deg, var(--gold-hover-1), var(--gold-hover-2)); color: var(--on-gold); }
.btn-ghost { background: var(--ghost-bg); color: var(--ink); border-color: var(--ghost-line); }
.btn-ghost:hover { background: var(--ghost-hover); color: var(--ink); }
.btn-jujube { background: var(--jujube); color: var(--on-jujube); }
.btn-jujube:hover { background: var(--jujube-2); color: var(--on-jujube-hover); }
.btn-sm { min-height: 38px; padding: 0.35em 1em; font-size: 0.92rem; }
.btn-lg { min-height: 50px; padding: 0.6em 1.7em; font-size: 1.05rem; }

/* ───────── 頂欄 ───────── */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--hdr-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }
/* 兩種 LOGO：夜晚用白字版、質感白與淺藍用棗紅字版（誰顯示由配色變數決定；沒顯示的那張 loading="lazy" 不會下載） */
.logo .logo-lt { display: var(--show-lt); }
.logo .logo-dk { display: var(--show-dk); }
.nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; }
.nav a { color: var(--ink); text-decoration: none; padding: 12px 4px; font-weight: 550; border-bottom: 1px solid var(--line); }
.nav a:hover { color: var(--gold-2); }
.hdr.nav-open .nav { display: flex; }
.hdr-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.hdr.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.nav-open .burger span:nth-child(2) { opacity: 0; }
.hdr.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hdr-cta { display: none; white-space: nowrap; }
.nav .nav-cta { margin-top: 14px; border-bottom: 1px solid var(--gold-edge); color: var(--on-gold); }
.nav .nav-cta:hover { color: var(--on-gold); }

.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; font-size: 0.92rem; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang .lang-cur { display: none; white-space: nowrap; }
.lang[open] .lang-chev { transform: rotate(180deg); }
.lang-chev { transition: transform 0.2s ease; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-pop); z-index: 60; }
.lang-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a[aria-current] { color: var(--gold-2); font-weight: 700; }

/* 配色按鈕：頂欄語言選單旁；選單三選一（質感白、淺藍、夜晚）。沒有 JavaScript 時整個藏起來（照系統） */
.theme { position: relative; }
.theme summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; user-select: none; }
.theme summary::-webkit-details-marker { display: none; }
.theme summary:hover { background: var(--hover); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 188px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-pop); z-index: 60; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt .theme-name { flex: 1; min-width: 0; }
.theme-opt .theme-tick { opacity: 0; color: var(--gold-2); }
.theme-opt[aria-pressed="true"] { color: var(--gold-2); font-weight: 700; }
.theme-opt[aria-pressed="true"] .theme-tick { opacity: 1; }
.sw { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(120, 120, 120, 0.55); }
.sw-paper { background: #faf7f1; box-shadow: inset 0 0 0 4px #efe8da; }
.sw-sky { background: #f3f7fc; box-shadow: inset 0 0 0 4px #dbe8f7; }
.sw-night { background: #0f192a; box-shadow: inset 0 0 0 4px #1e3050; }

@media (min-width: 480px) { .hdr-cta { display: inline-flex; } }
@media (min-width: 520px) { .lang .lang-cur { display: inline; } }
/* 320～379 寬：頂欄放得下 LOGO、語言、配色、選單四個（每個點擊範圍都 44 像素） */
@media (max-width: 379px) { .hdr-r { gap: 6px; } .lang-chev { display: none; } }
@media (max-width: 359px) { .logo img { height: 30px; } }
@media (min-width: 900px) {
  :root { --header-h: 68px; }
  .logo img { height: 38px; }
  .burger { display: none; }
  .nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }
  .nav a { border: 0; padding: 8px 12px; border-radius: 10px; }
  .nav a:hover { background: var(--hover); }
  .nav .nav-cta { display: none; }
}
@media (min-width: 900px) and (max-width: 1049px) { .nav a { padding: 8px 8px; font-size: 0.95rem; } }

/* ───────── 主視覺 ───────── */
.hero { position: relative; min-height: clamp(560px, 88svh, 800px); display: flex; align-items: flex-end; overflow: hidden; background: var(--bg); }
.hero-media, .hero-shade { position: absolute; inset: 0; }
.slide, .slide-alt { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.is-on, .slide-alt.is-on { opacity: 1; }
/* .slide-alt：某個配色專屬的主視覺圖（lib/home.mjs 的 HERO.themes），疊在預設圖上面，換配色時淡入淡出 */
.slide-alt { transition-duration: 0.6s; }
.slide img, .slide-alt img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 25%); }
.hero-shade { background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.5) 0%, rgba(var(--scrim-rgb), 0) 20%, rgba(var(--scrim-rgb), 0.1) 40%, rgba(var(--scrim-rgb), 0.94) 100%); }
.hero-in { position: relative; padding: 0 0 36px; }
.eyebrow { color: var(--gold-2); font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.hero h1 { font: 700 clamp(2.05rem, 8.4vw, 3.9rem)/1.18 var(--serif); letter-spacing: 0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.hero-sub { margin-top: 14px; max-width: 34em; font-size: clamp(1rem, 3.6vw, 1.15rem); color: var(--text-hero); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; max-width: 560px; }
.stats > div { background: rgba(var(--scrim-rgb), 0.6); border: 1px solid var(--photo-line); border-radius: 14px; padding: 10px 8px; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column-reverse; gap: 2px; }
.stats dd { margin: 0; font: 700 1.55rem/1.1 var(--serif); color: var(--gold-2); }
.stats dt { font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
/* 手機窄螢幕（ART5：W1 是 2:3 的直式海報）：海報完整放在最上面（人物不被字蓋住），標語疊在上方的天空、按鈕疊在下方的石板路，說明文字與數字放在海報下面 */
@media (max-width: 519px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: start; min-height: 0; }
  .hero-media { position: relative; inset: auto; grid-area: 1 / 1; aspect-ratio: 2 / 3; }
  .hero-shade { grid-area: 1 / 1 / 2 / 2; background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.62) 0%, rgba(var(--scrim-rgb), 0) 24%, rgba(var(--scrim-rgb), 0) 66%, rgba(var(--scrim-rgb), 0.72) 88%, var(--bg) 100%); }
  .hero-in { display: contents; }
  .hero-in > * { margin-inline: var(--gutter); }
  .hero-in .eyebrow { grid-area: 1 / 1; align-self: start; margin-top: 18px; margin-bottom: 0; position: relative; }
  .hero-in h1 { grid-area: 1 / 1; align-self: start; margin-top: 42px; position: relative; font-size: clamp(1.7rem, 7.2vw, 2.4rem); }
  .hero-in .hero-cta { grid-area: 1 / 1; align-self: end; margin-top: 0; margin-bottom: 20px; position: relative; }
  .hero-in .hero-sub { grid-area: 2 / 1; margin-top: 4px; }
  .hero-in .stats { grid-area: 3 / 1; margin-bottom: 36px; }
}
@media (min-width: 760px) {
  .hero { align-items: center; min-height: clamp(560px, 82vh, 780px); }
  .slide img, .slide-alt img { object-position: var(--pos-d, 70% 40%); }
  .hero-shade { background: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.93) 0%, rgba(var(--scrim-rgb), 0.74) 34%, rgba(var(--scrim-rgb), 0.12) 62%, rgba(var(--scrim-rgb), 0) 100%), linear-gradient(0deg, rgba(var(--scrim-rgb), 0.6), rgba(var(--scrim-rgb), 0) 28%); }
  .hero-in { padding: 40px 0; }
  .hero-in > * { max-width: 560px; }
  .stats { margin-top: 36px; }
}
/* 標語照詞折行：文案 hero.title 用 | 標出可以斷行的地方（lib/html.mjs 的 flow() 換成 <wbr>，h1 加 data-flow）。
 * 中文、日文沒有空格，瀏覽器預設在任何兩個字之間都能斷，窄欄裡會把「手機」「ひらいた、」拆開；有標記的標語改成只在 <wbr> 與空格斷行（keep-all），
 * 一段放不下整欄時才退回任意位置斷（break-word），所以不會溢出。桌機、手機寬度都一樣（手機直式海報、淺藍 49% 窄欄也用同一套標記）；
 * 每一段不能比最窄的欄寬（淺藍 49% 欄在 320 寬約 6 個全形字）更長，brand.test.ts 守著。
 * 英文、韓文沒有標記（本來就照空格折），不受影響。 */
.hero h1[data-flow] { word-break: keep-all; overflow-wrap: break-word; }

/* ───────── 開燈版主視覺（白天圖，淺色版面）─────────
 * <html data-hero-light>（由 <head> 的配色小腳本與 site.js 標；圖在 lib/home.mjs 的 HERO.themes）：目前的配色有專屬主視覺圖時，主視覺換成淺色版面——
 * 白天圖是亮色，所以不蓋深色遮罩、字改深褐（#2b1d18），金色、按鈕框線、次要字等其他顏色沿用這個配色自己的變數（inherit）；黃昏圖淡出。
 * 屬性值空字串＝這個配色只有桌機圖：只有桌機寬度（≥ 760）是淺色版面，手機寬度仍是黃昏直式圖、維持上面的夜晚版面。
 * 屬性值 "m"＝這個配色也有手機直式圖（質感白 M-A1、淺藍 M-B1）：所有寬度都是淺色版面。
 *   ≤ 759（手機、大手機、小平板；lib/home.mjs 的 MOBILE_ALT_MAX，brand.test.ts 守著要一致）：直式海報版面——標語疊在海報上方的天空、按鈕疊在下方的石板路，說明文字與數字在海報下面；
 *     ≤ 519 海報佔滿寬度；520～759 海報最寬 600px（--poster-w，再寬 2:3 的圖會比螢幕高）並置中，標語與按鈕的大小、位置跟著海報寬度縮放（cqw）；
 *   760～1099：圖在上（16:9 完整顯示、不裁切），字排在圖下面的頁面底上；
 *   ≥ 1100：字疊在圖左側的亮部（x 約 5.5～35.5%），高度跟著圖的比例走，髮簪、臉與迎客的手在各種寬度都不被裁到（取景 posD 在 lib/home.mjs）。
 * 兩個配色的標語位置各自微調（淺藍的 M-B1 右上有屋簷與燈籠：標語只放在左邊的天空，見下面 data-theme="sky" 的規則）。 */
@media (min-width: 760px) {
  :root[data-hero-light] .hero {
    --bg: inherit;
    --gold: inherit;
    --gold-2: inherit;
    --muted: inherit;
    --muted-2: inherit;
    --gold-edge: inherit;
    --gold-shadow: inherit;
    --ghost-bg: inherit;
    --ghost-line: inherit;
    --ghost-hover: inherit;
    --ink: #2b1d18;
    --text-hero: #43342c;
    color-scheme: light;
  }
  :root[data-hero-light] .hero .eyebrow { color: #5e3d05; } /* 小字，加深一點（淡色背景上留餘裕） */
  :root[data-hero-light] .hero h1 { text-shadow: 0 1px 18px rgba(250, 247, 241, 0.7); }
  :root[data-hero-light] .hero-sub { text-shadow: 0 1px 12px rgba(250, 247, 241, 0.7); }
  :root[data-hero-light] .slide.is-on { opacity: 0; }
  :root[data-hero-light] .slide, :root[data-hero-light] .slide-alt { transition-duration: 0.5s; }
  :root[data-hero-light] .hero-shade { display: none; } /* 白天圖本來就有亮部，不加遮罩（遮罩會把迎客的手洗淡） */
  :root[data-hero-light] .stats > div { background: rgba(250, 247, 241, 0.78); border-color: rgba(70, 45, 25, 0.16); }
}
@media (max-width: 759px) {
  :root[data-hero-light="m"] .hero {
    --bg: inherit;
    --gold: inherit;
    --gold-2: inherit;
    --muted: inherit;
    --muted-2: inherit;
    --gold-edge: inherit;
    --gold-shadow: inherit;
    --ghost-bg: inherit;
    --ghost-line: inherit;
    --ghost-hover: inherit;
    --ink: #2b1d18;
    --text-hero: #43342c;
    color-scheme: light;
  }
  :root[data-hero-light="m"] .hero .eyebrow { color: #5e3d05; } /* 小字，加深一點（淡色背景上留餘裕） */
  :root[data-hero-light="m"] .hero h1 { text-shadow: 0 1px 18px rgba(250, 247, 241, 0.7); }
  :root[data-hero-light="m"] .hero-sub { text-shadow: 0 1px 12px rgba(250, 247, 241, 0.7); }
  :root[data-hero-light="m"] .slide.is-on { opacity: 0; }
  :root[data-hero-light="m"] .slide, :root[data-hero-light="m"] .slide-alt { transition-duration: 0.5s; }
  :root[data-hero-light="m"] .hero-shade { display: none; } /* 白天圖本來就有亮部，不加遮罩（遮罩會把迎客的手洗淡） */
  :root[data-hero-light="m"] .stats > div { background: rgba(250, 247, 241, 0.78); border-color: rgba(70, 45, 25, 0.16); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  :root[data-hero-light] .hero { display: block; min-height: 0; }
  :root[data-hero-light] .hero-media { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  :root[data-hero-light] .hero-in { padding: 28px 0 48px; }
}
@media (min-width: 520px) and (max-width: 759px) {
  /* 大手機、小平板：跟 ≤ 519 同一個直式海報版面（上面通用的 @media (max-width: 519px) 那一組，這裡重寫一份只給開燈版；夜晚版面 520～759 不動）。
   * .hero 自己變成「海報欄」：寬度封頂在 --poster-w（600px，並且不高過螢幕：高度 ≤ 100svh − 頂欄），置中；
   * 欄寬就是海報寬，所以拿它當容器（container-type），字級、位置用 cqw（＝海報寬的 1%）縮放，各寬度、各語言的標語換行與位置都跟 ≤ 519 時一模一樣的比例。
   * 欄比螢幕窄時（有留邊）海報四角變圓、離頂欄留一點縫；欄跟螢幕一樣寬時（寬度 520～600，視窗夠高）圓角與縫都是 0＝滿版，跟 ≤ 519 的海報一個樣子。 */
  :root[data-hero-light="m"] .hero {
    --poster-w: max(440px, min(600px, calc((100vh - 80px) * 2 / 3)));
    --poster-w: max(440px, min(600px, calc((100svh - 80px) * 2 / 3)));
    --edge: clamp(0px, calc((100vw - var(--poster-w)) * 100), 1px); /* 有留邊＝1px，沒留邊＝0（拿來乘出圓角與頂部縫） */
    width: min(100%, var(--poster-w));
    margin: calc(var(--edge) * 14) auto 0;
    background: transparent; /* 海報欄比螢幕窄時，欄外與欄內（海報下面的說明文字）都是頁面底色 */
    container-type: inline-size;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: start; min-height: 0;
  }
  :root[data-hero-light="m"] .hero-media { position: relative; inset: auto; grid-area: 1 / 1; aspect-ratio: 2 / 3; }
  :root[data-hero-light="m"] .hero-media, :root[data-hero-light="m"] .hero-shade { border-radius: calc(var(--edge) * 20); overflow: hidden; }
  :root[data-hero-light="m"] .hero-shade { grid-area: 1 / 1 / 2 / 2; }
  :root[data-hero-light="m"] .hero-in { display: contents; padding: 0; }
  :root[data-hero-light="m"] .hero-in > * { margin-inline: var(--gutter); margin-inline: max(var(--gutter), 4.1cqw); }
  :root[data-hero-light="m"] .hero-in .eyebrow { grid-area: 1 / 1; align-self: start; margin-top: 18px; margin-top: 3.5cqw; margin-bottom: 0; position: relative; }
  :root[data-hero-light="m"] .hero-in h1 { grid-area: 1 / 1; align-self: start; margin-top: 42px; margin-top: 8.1cqw; position: relative; font-size: 2.4rem; font-size: max(1.35rem, 7cqw); }
  :root[data-hero-light="m"] .hero-in .hero-cta { grid-area: 1 / 1; align-self: end; margin-top: 0; margin-bottom: 20px; margin-bottom: 3.85cqw; position: relative; }
  :root[data-hero-light="m"] .hero-in .hero-sub { grid-area: 2 / 1; margin-top: 4px; max-width: none; }
  :root[data-hero-light="m"] .hero-in .stats { grid-area: 3 / 1; margin-top: 28px; margin-bottom: 36px; max-width: none; }
  /* 淺藍（M-B1）：右上有屋簷（左端在 x 52%、y 14%，往右上升）與樹葉，標語只放在左邊的天空：欄寬收在海報的 49% 以內（扣掉左邊留白），一行放不下就折成兩、三行（折行方式見下面 ≤ 759 那一組） */
  :root[data-hero-light="m"][data-theme="sky"] .hero-in h1 { max-width: calc(49vw - var(--gutter)); max-width: calc(49cqw - max(var(--gutter), 4.1cqw)); }
  /* 質感白的日文標語（16 字）：照詞折行後第二行「ひらいた、小さな宿場」有 10 個字，會拉到海報的 x 75%、壓到右邊較暗的樹葉（對比掉到 4.3）；
   * 比照淺藍把欄寬收在 49%，折成 3 行（スマホの中に／ひらいた、／小さな宿場，每行 ≤ 6 個字）。質感白的中文是一行（10 個字、x ≤ 77%，對比 ≥ 6.7），不受影響。 */
  :root[data-hero-light="m"][data-theme="paper"]:lang(ja) .hero-in h1 { max-width: calc(49vw - var(--gutter)); max-width: calc(49cqw - max(var(--gutter), 4.1cqw)); }
}
@media (min-width: 1100px) {
  /* 高度跟著圖的 16:9 比例走（1100～1680 寬完全不裁切）；更寬時封頂，取景只裁上下，保留髮簪、臉與迎客的手 */
  :root[data-hero-light] .hero { min-height: clamp(560px, 56.25vw, max(940px, 49vw)); }
  /* 文字區：左邊留 5.5%、寬 30%（右緣約 35%，在人物與迎客的手〔約 38% 起〕的左邊） */
  :root[data-hero-light] .hero-in { width: min(600px, 30vw); margin: 0 auto 0 max(var(--gutter), 5.5vw); }
  :root[data-hero-light] .hero-in > * { max-width: none; }
  /* 窄欄裡字級跟著寬度縮放、間距收緊：日文等長標語（折成 4 行）才不會把主視覺撐高、讓圖被橫向裁掉（1100～1440 寬任何語言都維持 16:9 不裁切） */
  :root[data-hero-light] .hero-in { padding: 32px 0; }
  :root[data-hero-light] .hero h1 { font-size: clamp(1.7rem, 3.4vw, 3.9rem); }
  :root[data-hero-light] .hero-sub { font-size: clamp(0.95rem, 1.45vw, 1.15rem); margin-top: 12px; }
  :root[data-hero-light] .hero-cta { margin-top: 20px; }
  :root[data-hero-light] .stats { margin-top: 22px; }
}
@media (max-width: 759px) {
  /* 手機直式海報（≤ 759）：最上方蓋一層淡淡的遮罩（標語所在位置：左邊的樹葉、右邊的深色屋簷會讓深褐字看不清楚；夜晚版也是在這裡蓋深色遮罩），
   * 最底下淡出到頁面底，讓海報跟下面的說明文字自然接起來（不蓋住按鈕區）。第一行是不支援 color-mix 的瀏覽器用的備援（米白，質感白的頁面底色附近）；
   * 淺藍配色用 color-mix 混 var(--bg)（淺藍的頁面底色），所以遮罩是淡藍白。 */
  :root[data-hero-light="m"] .hero-shade {
    display: block;
    background: linear-gradient(180deg, rgba(250, 247, 241, 0.74) 0%, rgba(250, 247, 241, 0.6) 13%, rgba(250, 247, 241, 0) 30%), linear-gradient(180deg, transparent 94%, var(--bg) 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 74%, transparent) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 13%, transparent 30%), linear-gradient(180deg, transparent 94%, var(--bg) 100%);
  }
  /* 次要按鈕疊在石板路上（右邊靠近深色的門與灌木）：底色改成較不透明的米白，各語言的按鈕字都看得清楚 */
  :root[data-hero-light="m"] .hero-cta .btn-ghost { background: rgba(250, 247, 241, 0.78); }
  /* 淺藍的標語折行：全站的 h1 預設是 text-wrap: balance（折得平均）；淺藍的標語欄很窄，中文、日文平均折行會把「手機」切成兩半，所以這兩種語言照一般折行（寫滿一行再折）；英文、韓文照單字折，保留平均 */
  :root[data-hero-light="m"][data-theme="sky"] .hero-in h1 { text-wrap: wrap; }
  :root[data-hero-light="m"][data-theme="sky"]:lang(en) .hero-in h1, :root[data-hero-light="m"][data-theme="sky"]:lang(ko) .hero-in h1 { text-wrap: balance; }
}
@media (max-width: 519px) {
  :root[data-hero-light="m"][data-theme="sky"] .hero-in h1 { max-width: calc(49vw - var(--gutter)); } /* 理由見上面 520～759 那一組 */
  :root[data-hero-light="m"][data-theme="paper"]:lang(ja) .hero-in h1 { max-width: calc(49vw - var(--gutter)); } /* 質感白的日文：同上 */
  /* 標語一行寫在海報上方的天空：字級依寬度縮放，讓一行大約收在 x ≤ 76%（再右邊是深色屋簷） */
  :root[data-hero-light="m"] .hero-in h1 { font-size: clamp(1.35rem, 7vw, 2.4rem); }
}

/* ───────── 區塊 ───────── */
.sec { padding: clamp(56px, 9vw, 104px) 0; }
.sec-alt { background: var(--bg-2) var(--grain); }
.sec-dark:not(.sec-alt) { background: var(--bg); }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 5vw, 48px); }
.sec-head h2, .mascot-txt h2, .soon h2, .cta-txt h2 { font: 700 clamp(1.6rem, 5.4vw, 2.4rem)/1.3 var(--serif); letter-spacing: 0.02em; }
.sec-head .eyebrow { margin-bottom: 8px; }
.sec-intro { margin-top: 12px; color: var(--muted); }
.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }

/* 功能卡 */
.cards { gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--elev); }
.feat-media { background: var(--paper); }
.feat-media img { width: 100%; height: auto; }
.feat-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.feat-body h3 { font: 700 1.3rem/1.3 var(--serif); }
.feat-lead { color: var(--gold-2); font-weight: 600; }
.feat-body p { color: var(--text-card); font-size: 0.98rem; }
.ticks { display: grid; gap: 8px; margin-top: 6px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.93rem; color: var(--text-cool); }
.ticks .ic { margin-top: 3px; color: var(--gold); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 為什麼選擇／場景應用 */
.why, .uses { gap: 14px; }
.why-item, .use { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--elev); }
.sec-alt .why-item { background: var(--surface); }
.why-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-2); margin-bottom: 12px; }
.why-item h3, .use h3, .ch h3 { font: 700 1.1rem/1.4 var(--serif); margin-bottom: 6px; }
.why-item p, .use p, .ch p { color: var(--text-cool); font-size: 0.95rem; }
@media (min-width: 640px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .uses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 場景牆 */
.scenes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scene { flex: 0 0 82%; scroll-snap-align: center; min-width: 0; }
.scene img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 16 / 9; object-fit: cover; }
.scene figcaption { margin-top: 8px; font-size: 0.92rem; color: var(--muted); text-align: center; }
@media (min-width: 640px) {
  .scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100% - 2 * var(--gutter), 1160px); margin-inline: auto; padding: 0; overflow: visible; gap: 18px; }
  .scene { flex: none; }
}
@media (min-width: 1000px) { .scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 掌櫃 */
.mascot-in { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.mascot-fig { position: relative; display: flex; justify-content: center; }
.mascot-fig img { position: relative; width: auto; max-width: 62%; max-height: 480px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35)); }
.mascot-glow { position: absolute; inset: 8% 8% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 171, 98, 0.32), rgba(169, 58, 58, 0.14) 60%, transparent 75%); }
.mascot-txt { display: flex; flex-direction: column; gap: 14px; }
.mascot-txt p { color: var(--text-card); }
.bubble { position: relative; background: var(--paper); color: var(--paper-ink) !important; border-radius: 18px; padding: 14px 18px; font-weight: 600; box-shadow: var(--shadow-card); }
.bubble::before { content: ""; position: absolute; left: 28px; top: -9px; width: 18px; height: 18px; background: var(--paper); transform: rotate(45deg); border-radius: 3px; }
@media (min-width: 800px) {
  .mascot-in { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; }
  .mascot-fig img { max-width: 100%; }
  .bubble::before { left: -8px; top: 22px; }
}

/* 最新公告 */
.news-list { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.news-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--elev); }
.news-list time { color: var(--gold-2); font-size: 0.82rem; font-weight: 650; }
.news-list h3 { font: 700 1.08rem/1.45 var(--serif); margin: 4px 0; overflow-wrap: anywhere; }
.news-list p { color: var(--text-cool); font-size: 0.93rem; overflow-wrap: anywhere; }
.news-list a { display: inline-block; margin-top: 8px; font-size: 0.92rem; }
.news-more { text-align: center; margin-top: 22px; }

/* 玩家回饋（占位） */
.soon { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; background: var(--surface); border: 1px dashed var(--gold-line); border-radius: 22px; padding: 28px 22px; text-align: center; }
.soon > div:last-child { flex: 1 1 280px; min-width: 0; }
.soon-fig img { width: 120px; height: auto; }
.soon h2 { margin: 8px 0 6px; }
.soon p { color: var(--muted); }
.badge { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--gold-soft-2); color: var(--gold-2); font-size: 0.82rem; font-weight: 700; }

/* 常見問題 */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 18px; cursor: pointer; font-weight: 650; overflow-wrap: anywhere; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { min-width: 0; }
.faq-chev { transition: transform 0.2s ease; color: var(--gold); }
.faq details[open] .faq-chev { transform: rotate(180deg); }
.faq details[open] { border-color: var(--gold-line-2); }
.faq-a { padding: 0 18px 18px; color: var(--text-faq); }
.faq-more { text-align: center; margin-top: 20px; }

/* 行動呼籲 */
.cta { padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 9vw, 104px); }
.cta-box { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-cta), 0 0 0 1px var(--cta-edge); }
.cta-img img { width: 100%; height: auto; }
.cta-txt { padding: 20px 20px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-txt h2 { color: var(--paper-ink); }
.cta-txt p { color: var(--paper-ink-2); }
@media (min-width: 760px) {
  .cta-txt { position: absolute; inset: 0 auto 0 0; width: 54%; justify-content: center; padding: 0 clamp(24px, 4vw, 56px); }
}

/* ───────── 頁尾 ───────── */
.ftr { background: var(--ftr-bg); border-top: 1px solid var(--line); padding: 40px 0 28px; margin-top: 0; }
.ftr-top { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.ftr-brand p { margin-top: 10px; color: var(--muted); font-size: 0.93rem; }
.ftr-col { display: flex; flex-direction: column; gap: 4px; }
.ftr-col a { color: var(--text-ftr); text-decoration: none; padding: 6px 0; font-size: 0.95rem; }
.ftr-col a:hover { color: var(--gold-2); }
.ftr-col a[aria-current] { color: var(--gold-2); font-weight: 650; }
.ftr-age { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
.age-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--age-line); color: var(--age-ink); font-weight: 800; font-size: 0.85rem; }
.ftr-line { margin-top: 10px; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.ftr-copy { margin-top: 16px; color: var(--muted-2); font-size: 0.82rem; }
@media (min-width: 760px) { .ftr-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }

.totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--gold-2); border: 1px solid var(--gold-line-2); border-radius: 50%; box-shadow: var(--shadow-fab); }
.totop:hover { background: var(--surface); }

/* ───────── 法務、聯絡、價格頁 ───────── */
.doc-page { padding: 28px 0 72px; min-height: 60vh; }
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.88rem; margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.doc-head h1 { font: 700 clamp(1.8rem, 6vw, 2.6rem)/1.25 var(--serif); }
.doc-meta { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
.doc-intro { color: var(--text-card); margin-top: 16px; }
.note { margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text-cool); font-size: 0.92rem; }
.note-draft { background: var(--note-bg); border-color: var(--note-line); color: var(--note-ink); font-weight: 600; }
.doc-grid { display: grid; gap: 28px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }
.toc { display: none; }
.doc section { padding-top: 6px; margin-top: 30px; }
.doc section:first-of-type { margin-top: 20px; }
.doc h2, .h2-sm { font: 700 1.3rem/1.4 var(--serif); margin: 0 0 10px; }
.h2-sm { margin-top: 36px; }
.doc p, .doc li, .plain li, .topics dd { color: var(--text-doc); }
.doc ul, .plain { display: grid; gap: 8px; margin: 8px 0; padding-left: 1.2em; list-style: disc; }
.doc ol { display: grid; gap: 8px; margin: 8px 0; padding-left: 1.4em; list-style: decimal; }
.doc li::marker, .plain li::marker { color: var(--gold); }
.doc strong { color: var(--ink-strong); }
.doc-back { margin-top: 36px; }
.notfound { text-align: center; padding: 56px 0; }
.notfound .doc-intro { margin-bottom: 24px; }
@media (min-width: 960px) {
  .doc-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 20px); align-self: start; font-size: 0.92rem; }
  .toc-title { color: var(--gold-2); font-weight: 700; margin-bottom: 8px; }
  .toc ol { display: grid; gap: 2px; }
  .toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; }
  .toc a:hover { color: var(--gold-2); border-color: var(--gold); }
}
.channels { margin-top: 12px; }
.ch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; box-shadow: var(--elev); }
.ch-pending { border-style: dashed; }
.ch .btn { margin-top: 6px; max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 760px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topics { display: grid; gap: 12px; margin-top: 8px; }
.topics > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: var(--elev); }
.topics dt { font-weight: 700; color: var(--gold-2); }
.topics dd { margin: 2px 0 0; font-size: 0.95rem; }
.plans { margin-top: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--elev); }
.plan h3 { font: 700 1.4rem/1.3 var(--serif); color: var(--gold-2); }
.plan-price { margin: 8px 0 14px; }
.plan-price strong { font-size: 1.9rem; }
.plan-price span { color: var(--muted); }
.plan-price small { color: var(--muted); display: block; font-size: 0.86rem; }
.plans-note { margin-top: 14px; color: var(--muted); font-size: 0.92rem; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}