:root{--fs:1;--sand:#faf6ef;--paper:#fff;--ink:#1f2a33;--muted:#4a5560;--sea:#12395e;--sea2:#1d5687;--accent:#a8481f;--line:#067a3a;--border:#e6dccb;--soft:#f1e9dc;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:1.1875rem/1.85 "PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;padding-bottom:84px}
@media(min-width:900px){body{font-size:1.25rem;padding-bottom:0}}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--sea2)}
h1,h2,h3{line-height:1.35;color:var(--sea);margin:0 0 .5em;letter-spacing:.02em}
h2{font-size:clamp(1.875rem,calc(4.2vw * var(--fs)),2.75rem)}
h3{font-size:clamp(1.4375rem,calc(2.4vw * var(--fs)),1.75rem)}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{display:inline-block;font-size:1rem;font-weight:700;letter-spacing:.18em;color:var(--accent);margin-bottom:10px}
.lead{font-size:clamp(1.25rem,calc(2vw * var(--fs)),1.4375rem);color:var(--muted);max-width:46em}
section{padding:72px 0}
section.alt{background:var(--paper)}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:99}
/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.97);border-bottom:1px solid var(--border)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{font-weight:800;font-size:1.375rem;color:var(--sea);text-decoration:none;line-height:1.2}
.brand small{display:block;font-size:0.75rem;letter-spacing:.2em;color:var(--muted);font-weight:600}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font-size:1.125rem;padding:8px 12px;border-radius:10px}
.nav a:hover{background:var(--soft)}
.top .call{display:none}
@media(min-width:1000px){.nav{display:flex}.top .call{display:inline-flex}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:12px 28px;border-radius:999px;font-size:1.25rem;font-weight:700;text-decoration:none;border:2px solid transparent;line-height:1.2}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#8d3a16}
.btn-line{background:var(--line);color:#fff}
.btn-line:hover{background:#05652f}
.btn-ghost{background:#fff;color:var(--sea);border-color:var(--sea)}
.btn-sm{min-height:46px;font-size:1.0625rem;padding:8px 18px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* hero */
.hero{position:relative;padding:0;background:#0d2a44;color:#fff}
.hero picture img{width:100%;height:min(78vh,760px);min-height:520px;object-fit:cover}
.hero .cap{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(8,26,44,.72) 0%,rgba(8,26,44,.45) 45%,rgba(8,26,44,0) 75%),linear-gradient(180deg,rgba(8,26,44,0) 40%,rgba(8,26,44,.6) 100%)}
.hero .cap .wrap{width:100%;padding-bottom:56px}
.hero .eyebrow{color:#ffd9b8}
.hero h1{color:#fff;font-size:clamp(2.125rem,calc(5.6vw * var(--fs)),3.875rem);margin-bottom:.35em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{font-size:clamp(1.1875rem,calc(2vw * var(--fs)),1.5rem);max-width:34em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero .tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:4px 16px;font-size:1.0625rem;margin:0 8px 10px 0}
.hero .btn-ghost{background:rgba(255,255,255,.95)}
/* pillars */
.pillars{display:grid;gap:22px;margin-top:34px}
@media(min-width:860px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--paper);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.pillar img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pillar .b{padding:22px 24px 26px}
.pillar h3{font-size:1.75rem}
.pillar ul{margin:0;padding-left:1.1em}
.pillar li{margin-bottom:6px}
.pillar a.more{font-weight:700}
/* split */
.split{display:grid;gap:34px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1.05fr 1fr}.split.rev>:first-child{order:2}}
.rounded{border-radius:var(--r)}
.figgrid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.figgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
figure{margin:0}
figcaption{font-size:1rem;color:var(--muted);margin-top:6px;line-height:1.5}
.note{background:var(--soft);border-left:6px solid var(--accent);padding:16px 20px;border-radius:10px;font-size:1.125rem}
.facts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:26px 0}
.fact{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.fact b{display:block;font-size:1.5rem;color:var(--sea)}
/* cards */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:30px}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
section.alt .card{background:var(--sand)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card .b{padding:20px 22px 24px}
.card h3{font-size:1.5rem}
.card p{margin:0;color:var(--muted);font-size:1.125rem}
.card .b p+p{margin-top:.6em}
.badge{display:inline-block;background:var(--sea);color:#fff;border-radius:8px;padding:2px 10px;font-size:0.9375rem;font-weight:700;margin-bottom:8px}
/* price */
.plans{display:grid;gap:20px;margin-top:30px}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--paper);border:2px solid var(--border);border-radius:var(--r);padding:26px 24px;text-align:center}
.plan h3{font-size:1.625rem;margin-bottom:4px}
.plan .price{font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1.2;margin:12px 0 4px}
.plan .price small{font-size:1.25rem;color:var(--muted);font-weight:600}
.plan .sub{font-size:1.1875rem;font-weight:700;color:var(--ink)}
.plan p{color:var(--muted);font-size:1.125rem;margin:10px 0 0}
table.fee{width:100%;border-collapse:collapse;margin-top:26px;background:var(--paper);border-radius:14px;overflow:hidden;font-size:1.125rem}
table.fee th,table.fee td{border-bottom:1px solid var(--border);padding:14px 16px;text-align:left;vertical-align:top}
table.fee th{width:34%;background:var(--soft);color:var(--sea)}
.steps{display:grid;gap:16px;counter-reset:s;margin-top:24px}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:20px 22px;position:relative}
.step h3{font-size:1.375rem}
.step p{margin:0;color:var(--muted);font-size:1.125rem}
/* timeline */
.day{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:28px}
.day figure{background:var(--paper);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.day img{width:100%;aspect-ratio:4/3;object-fit:cover}
.day figcaption{padding:10px 16px 14px;font-size:1.125rem;color:var(--ink)}
.day figcaption b{color:var(--sea);display:block;font-size:1.25rem}
/* gallery */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-top:28px}
@media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery a{display:block;border-radius:12px;overflow:hidden;background:#ddd}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s}
.gallery a:hover img{transform:scale(1.04)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* 相簿與景點：附近景點文字（景點地圖圖已拿掉，改單欄；限制行寬好閱讀） */
.nearby-text{max-width:820px}
.chips a{background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:8px 16px;text-decoration:none;color:var(--sea);font-size:1.0625rem}
/* faq */
details{background:var(--paper);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;padding:0 20px}
section.alt details{background:var(--sand)}
summary{cursor:pointer;font-weight:700;font-size:1.25rem;padding:18px 0;color:var(--sea);list-style:none}
summary::after{content:"＋";float:right;color:var(--accent)}
details[open] summary::after{content:"－"}
details p{color:var(--muted);font-size:1.125rem}
/* contact */
.contact{background:var(--sea);color:#fff}
.contact h2,.contact h3{color:#fff}
.contact .lead{color:#dce8f3}
.cgrid{display:grid;gap:18px;margin-top:28px}
@media(min-width:860px){.cgrid{grid-template-columns:repeat(3,1fr)}}
.cbox{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);padding:24px}
.cbox .big{font-size:1.75rem;font-weight:800;color:#fff;text-decoration:none;display:block;line-height:1.4}
.cbox p{color:#dce8f3;font-size:1.125rem;margin:6px 0 0}
.cbox .btn{margin-top:14px;width:100%}
footer{background:#0b2238;color:#b9c8d6;font-size:1rem;padding:30px 0 40px}
footer a{color:#dce8f3}
/* sticky mobile cta */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1fr;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 18px rgba(0,0,0,.08);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.mcta a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px;margin:0 4px;border-radius:12px;text-decoration:none;font-weight:800;font-size:1.125rem;line-height:1.2}
.mcta a span{font-size:0.875rem;font-weight:600;opacity:.9}
.mcta .c1{background:var(--sea);color:#fff}.mcta .c2{background:var(--line);color:#fff}.mcta .c3{background:var(--accent);color:#fff}
@media(min-width:900px){.mcta{display:none}}
.draft{background:#fff3cd;color:#664d03;text-align:center;font-size:0.9375rem;padding:6px 12px}
:focus-visible{outline:3px solid #f0a020;outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery img{transition:none}}

html{font-size:100%}
html[data-fs="l"]{font-size:118.75%;--fs:1.1875}
html[data-fs="l"] body{--fs:1.1875}
.fsw{display:inline-flex;align-items:center;gap:4px;margin-left:auto;background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px}
@media(min-width:1000px){.fsw{margin-left:8px}}
.fsw .lbl{font-size:.9375rem;color:var(--muted);padding:0 6px 0 10px;font-weight:700}
.fsw button{font:inherit;font-weight:800;border:0;background:transparent;color:var(--sea);border-radius:999px;min-width:44px;min-height:44px;cursor:pointer;line-height:1}
.fsw button{padding:0 14px}.fsw button[data-v="m"]{font-size:17px}.fsw button[data-v="l"]{font-size:21px}
.fsw button[aria-pressed="true"]{background:var(--sea);color:#fff}
.fsw button:hover{background:var(--soft)}.fsw button[aria-pressed="true"]:hover{background:var(--sea2)}
@media(max-width:420px){.fsw .lbl{display:none}.brand{font-size:1.25rem}}
.top .wrap{max-width:1320px}
.top a,.top button,.fsw .lbl,.brand small{white-space:nowrap}
.nav a{font-size:1.0625rem;padding:8px 10px}
@media(max-width:1239px){.nav{display:none!important}.fsw{margin-left:auto!important}}
@media(min-width:1240px){.nav{display:flex}}
/* header elements keep fixed size so switcher always fits */
.brand{font-size:21px}.brand small{font-size:11px;letter-spacing:.12em}
.fsw .lbl{font-size:15px}
@media(max-width:480px){.top .wrap{padding:0 12px;gap:8px}.brand{font-size:19px}.brand small{letter-spacing:.04em}.fsw button{min-width:52px;padding:0 10px}}
@media(max-width:360px){.brand small{display:none}}
/* mobile hero: photo on top, text below (no overlap with header) */
@media(max-width:899px){
.hero picture img{height:46vh;min-height:280px;max-height:420px}
.hero .cap{position:static;background:var(--sea)}
.hero .cap .wrap{padding-top:26px;padding-bottom:36px}
}
html,body{overflow-x:clip}
@media(min-width:1100px){.gallery{grid-template-columns:repeat(3,1fr)}}
.cards.four{grid-template-columns:1fr}
@media(min-width:640px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.wide img{width:100%;aspect-ratio:21/9;object-fit:cover}
/* ===== multi-page additions ===== */
.hero>img{width:100%;height:min(78vh,760px);min-height:520px;object-fit:cover}
@media(max-width:899px){.hero>img{height:46vh;min-height:280px;max-height:420px}}
.top{position:sticky}
.nav a[aria-current="page"]{background:var(--sea);color:#fff;font-weight:700}
.menubtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:2px solid var(--sea);background:#fff;color:var(--sea);border-radius:999px;font:inherit;font-size:17px;font-weight:800;cursor:pointer;white-space:nowrap}
.menubtn .bars{position:relative;width:18px;height:2px;background:currentColor;display:inline-block}
.menubtn .bars::before,.menubtn .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menubtn .bars::before{top:-6px}.menubtn .bars::after{top:6px}
.menubtn[aria-expanded="true"]{background:var(--sea);color:#fff}
.menubtn[aria-expanded="true"] .bars{background:transparent}
.menubtn[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menubtn[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
@media(min-width:1240px){.menubtn{display:none}}
@media(max-width:480px){.menubtn{padding:0 12px;font-size:16px}}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 12px 24px rgba(0,0,0,.12);padding:8px 16px 16px;max-height:calc(100vh - 70px);overflow:auto}
.mnav[hidden]{display:none}
.mnav a{display:flex;align-items:center;min-height:60px;padding:0 18px;font-size:1.3125rem;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);border-radius:12px}
.mnav a[aria-current="page"]{background:var(--sea);color:#fff}
.mnav a[aria-current="page"]::after{content:"目前頁面";margin-left:auto;font-size:.875rem;font-weight:600;opacity:.9}
.mnav a.mvisit{margin-top:12px;justify-content:center;background:var(--accent);color:#fff;border:0}
@media(min-width:1240px){.mnav{display:none!important}}
/* page head */
.pagehead{padding:48px 0 40px;background:linear-gradient(180deg,#fff 0%,var(--sand) 100%);border-bottom:1px solid var(--border)}
.pagehead h1{font-size:clamp(2rem,calc(4.6vw * var(--fs)),3.125rem);margin-bottom:.3em}
.pagehead .lead{margin:0}
.ph-split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.ph-split{grid-template-columns:1.1fr 1fr}}
.ph-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
/* park map */
figure.map img{width:100%;border:1px solid var(--border)}
figure.map a{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* farm with portrait video */
.farm{margin-top:28px}
.farm.hasv{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.farm.hasv{grid-template-columns:minmax(260px,340px) 1fr}}
.vloop video{width:100%;max-width:360px;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r);background:#cfd8c4;margin:0 auto}
.vloop figcaption{text-align:center}
/* CTA band */
.ctaband{background:var(--soft);padding:48px 0}
.ctaband .wrap{display:grid;gap:10px;align-items:center}
@media(min-width:1000px){.ctaband .wrap{grid-template-columns:1fr auto}.ctaband .btns{margin-top:0}}
.ctaband h2{margin-bottom:.2em}.ctaband p{margin:0;color:var(--muted)}
.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px}
.fnav a{color:#fff;font-weight:700;text-decoration:none;padding:6px 0}
.fnav a:hover{text-decoration:underline}
/* 小港站即時公車看板（bus.js） */
.bus{background:var(--paper);border:2px solid var(--sea);border-radius:var(--r);padding:20px 22px;margin-top:28px;box-shadow:0 6px 20px rgba(18,57,94,.08)}
.bus h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;color:var(--sea);font-size:1.5rem}
.bus h3 .live{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:700;color:var(--line);background:#e6f4ec;border-radius:999px;padding:3px 10px}
.bus h3 .live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);animation:busdot 1.6s ease-in-out infinite}
@keyframes busdot{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.bus h3 .live::before{animation:none}}
.bus .bus-note{margin:0 0 12px;color:var(--muted);font-size:1rem}
.bus-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bus-rows li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;background:var(--sand);border:1px solid var(--border);border-radius:14px;padding:12px 16px;font-size:1.375rem;line-height:1.3}
.bus-rows .r{background:var(--sea);color:#fff;font-weight:900;border-radius:8px;padding:2px 10px;font-size:1.25rem}
.bus-rows .d{font-weight:800;color:var(--ink)}
.bus-rows .t{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;text-align:left;font-weight:800;color:var(--muted)}
.bus-rows .t small{display:inline-block;font-size:.9375rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.bus-rows .st-live .t{color:var(--line)}
.bus-rows .st-arriving .t{color:var(--accent)}
/* 狀態一律獨立一行：路線＋方向在上，倒數或「末班已過／明日首班」在下 */
.bus-rows .t .nx{font-size:1rem;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bus-rows .t>span:first-child{white-space:nowrap}
@media(max-width:520px){.bus-rows li{font-size:1.25rem}}
.bus .bus-upd{margin:10px 0 0;font-size:.9375rem;color:var(--muted)}
.bus .bus-fb{margin:0;font-size:1.0625rem}
.bus .bus-src{margin:6px 0 0;font-size:.8125rem;color:var(--muted)}
.bus[data-compact]{margin-top:30px}
.bus[data-compact] .bus-rows{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bus .more{display:inline-block;margin-top:10px;font-weight:700}
.bus.bus-err h3 .live{display:none}
/* 看板方向分頁（公車：往花蓮／往靜浦・成功；火車：北上／南下），切換邏輯在 site.js */
.bus [hidden]{display:none!important}
.bus-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--sand);border:1px solid var(--border);border-radius:16px;padding:5px;margin:4px 0 12px}
.bus-tabs [role="tab"]{font:inherit;font-size:1.1875rem;font-weight:800;line-height:1.25;color:var(--sea);background:transparent;border:0;border-radius:12px;min-height:56px;padding:8px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;-webkit-tap-highlight-color:transparent;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:380px){.bus-tabs [role="tab"]{padding:8px 4px}}
.bus-tabs [role="tab"] small{font-size:.875rem;font-weight:600;opacity:.9}
.bus-tabs [role="tab"]:hover{background:#fff}
.bus-tabs [role="tab"][aria-selected="true"]{background:var(--sea);color:#fff;box-shadow:0 2px 8px rgba(18,57,94,.25)}
.bus-tabs [role="tab"]:focus-visible,.bus-panel:focus-visible{outline:3px solid #f0a020;outline-offset:2px}
/* 兩個方向並排的原生左右滑動輪播：下一個方向露出一截；手指直接滑（scroll-snap），分頁鈕跟著亮 */
.bus-panels{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.bus-panels::-webkit-scrollbar{display:none}
.bus-panel{scroll-snap-align:start;scroll-snap-stop:always;min-width:0;border-radius:14px;background:#fff;border:1px solid var(--border);padding:10px;opacity:.6;transition:opacity .2s}
.bus-panel.is-cur{opacity:1;border-color:var(--sea2)}
@media(prefers-reduced-motion:reduce){.bus-panel{transition:none}}
.tab-in-r{animation:tabInR .22s ease-out}.tab-in-l{animation:tabInL .22s ease-out}
@keyframes tabInR{from{opacity:.3;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes tabInL{from{opacity:.3;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tab-in-r,.tab-in-l{animation:none}}
.bus-swipe{margin:8px 0 0;font-size:.875rem;color:var(--muted);text-align:center}
@media(hover:hover) and (pointer:fine){.bus-swipe{display:none}}
/* 花蓮今日（hualien.js） */
.hl{background:var(--paper);border:2px solid var(--sea);border-radius:var(--r);padding:20px 22px;margin-top:28px;box-shadow:0 6px 20px rgba(18,57,94,.08)}
.hl h3{margin:0 0 12px;color:var(--sea);font-size:1.5rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.hl h3 small{font-size:1rem;color:var(--muted);font-weight:600}
.hl-warn{background:#b3261e;color:#fff;border-radius:14px;padding:14px 18px;margin-bottom:14px;font-size:1.25rem;line-height:1.45}
.hl-warn p{margin:0}.hl-warn p+p{margin-top:6px}
.hl-warn .hl-wt{font-size:1.0625rem;opacity:.95}
.hl-typh{background:#fff4d6;border:1px solid #e8c55a;color:#5b4300;border-radius:14px;padding:12px 16px;margin-bottom:14px;font-size:1.125rem;font-weight:700}
.hl-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hl-tile{background:var(--sand);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.hl-tile h4{margin:0 0 8px;font-size:1.0625rem;color:var(--muted);font-weight:800;letter-spacing:.04em}
.hl-tile p{margin:0}
.hl-wx{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hl-ico{font-size:2.75rem;line-height:1}
.hl-temp{font-size:2.5rem;font-weight:900;color:var(--ink);line-height:1}
.hl-wxt{display:flex;flex-direction:column;font-size:1.1875rem;line-height:1.35}
.hl-pop{color:var(--sea2)}
.hl-sub{margin-top:8px!important;font-size:1rem;color:var(--muted);line-height:1.55}
.hl-ok{font-size:1.25rem;font-weight:800;color:var(--line)}
.hl-road{margin:0;padding-left:1.1em;font-size:1.0625rem;line-height:1.5}
.hl-road li+li{margin-top:6px}
.hl-road b{color:#b3261e}
.hl-aqi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:1.25rem}
.hl-badge{display:inline-block;font-weight:900;border-radius:10px;padding:6px 12px;font-size:1.25rem}
.hl-badge.a1{background:#00a65a;color:#fff}.hl-badge.a2{background:#ffd400;color:#3a3000}.hl-badge.a3{background:#ff8a00;color:#2d1600}
.hl-badge.a4{background:#e02020;color:#fff}.hl-badge.a5{background:#7e3fa8;color:#fff}.hl-badge.a6{background:#7a1f1f;color:#fff}
.hl-sun{list-style:none;margin:0;padding:0;display:flex;gap:10px 26px;flex-wrap:wrap}
.hl-sun li{display:flex;flex-direction:column}
.hl-sun span{font-size:1rem;color:var(--muted);font-weight:700}
.hl-sun b{font-size:1.75rem;line-height:1.2;color:var(--accent)}
.hl-sun small{font-size:.9375rem;color:var(--muted)}
.hl-na,.hl-wait{font-size:1.0625rem;color:var(--muted)}
.hl-off{opacity:.75}
.hl-upd{margin:12px 0 0;font-size:.9375rem;color:var(--muted)}
.hl-src{margin:4px 0 0;font-size:.8125rem;color:var(--muted)}
.hl .more{display:inline-block;margin-top:10px;font-weight:700}
.hl[data-compact] .hl-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(max-width:520px){.hl{padding:16px}.hl-grid{grid-template-columns:1fr}}
/* 花蓮火車站即時列車（沿用 .bus 卡片外觀；北上／南下兩欄，窄螢幕上下排） */
.train h3 .nw{white-space:nowrap}
.tr-col h4{margin:0 0 8px;font-size:1.25rem;color:var(--sea);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.tr-col h4 small{font-size:1rem;color:var(--muted);font-weight:600}
.tr-last{margin:0 0 8px;background:#fff4d6;border:1px solid #e8c55a;color:#5b4300;border-radius:12px;padding:8px 12px;font-size:1.0625rem;font-weight:700}
.tr-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tr-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--sand);border:1px solid var(--border);border-radius:14px;padding:10px 14px;font-size:1.1875rem;line-height:1.35}
.tr-ty{font-weight:900;border-radius:8px;padding:1px 9px;font-size:1rem;color:#fff;background:#6b7280;white-space:nowrap}
.tr-ty.tk{background:#c2410c}.tr-ty.py{background:#b91c1c}.tr-ty.zq{background:#c2410c}.tr-ty.jg{background:#a16207}.tr-ty.fx{background:#1d4ed8}.tr-ty.qj{background:var(--sea)}.tr-ty.pk{background:#4b5563}
.tr-no{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-d{font-weight:700;color:var(--ink)}
.tr-t{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-weight:800}
.tr-hm{font-size:1.375rem;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-hm em{font-style:normal;font-size:1rem;color:var(--muted)}
.tr-st{white-space:nowrap}
.tr-rows .st-ontime .tr-st{color:var(--line)}
.tr-rows .st-late .tr-st{color:#b3261e}
.tr-rows .st-cancel .tr-st{color:#fff;background:#b3261e;border-radius:6px;padding:0 8px}
.tr-rows .st-cancel .tr-hm{text-decoration:line-through;color:var(--muted)}
.tr-eta{font-size:1rem;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-sched{font-size:1rem;font-weight:600;color:var(--muted)}
.train .tr-fb{margin:0;font-size:1.0625rem}
.train.tr-nolive h3 .live{display:none}
@media(max-width:520px){.tr-rows li{font-size:1.125rem;padding:10px 12px}.tr-hm{font-size:1.25rem}}
/* 線上預約參觀表單（contact.html#visit，visit.js → api/visit.php） */
#visit,#vform,#contact{scroll-margin-top:84px}
/* 預約參觀表單 */
.visit-split{align-items:start}
.vform{background:var(--paper);border:2px solid var(--sea);border-radius:var(--r);padding:22px 22px 24px;box-shadow:0 6px 20px rgba(18,57,94,.08)}
section.alt .vform{background:#fff}
.vform h3{margin-bottom:4px}
.vf-hint,.vf-privacy{font-size:1rem;color:var(--muted);margin:0 0 12px}
.req{color:#b3261e;font-weight:900}
.vf-row{margin-bottom:14px;min-width:0}
.vf-row label{display:block;font-weight:800;color:var(--ink);margin-bottom:6px;font-size:1.125rem}
.vf-row label small{font-weight:600;color:var(--muted);font-size:.9375rem}
.vform input,.vform select,.vform textarea{width:100%;font:inherit;font-size:max(16px,1.125rem);color:var(--ink);background:#fff;border:2px solid #c9bba4;border-radius:12px;min-height:54px;padding:10px 14px}
.vform textarea{min-height:120px;resize:vertical;line-height:1.6}
.vform input:focus,.vform select:focus,.vform textarea:focus{border-color:var(--sea2);outline:3px solid #f0a020;outline-offset:1px}
.vform [aria-invalid="true"]{border-color:#b3261e;background:#fff7f6}
.vf-2{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:520px){.vf-2{grid-template-columns:1fr 1fr}}
.vf-help{margin:4px 0 0;font-size:.9375rem;color:var(--muted)}
.vf-err{margin:6px 0 0;font-size:1rem;font-weight:700;color:#b3261e}
.vf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vf-submit{width:100%;margin-top:4px;cursor:pointer}
.vf-submit[disabled]{opacity:.7;cursor:wait}
.vf-msg{margin-top:14px;border-radius:12px;padding:14px 16px;font-size:1.125rem;line-height:1.6}
.vf-msg.ok{background:#e6f4ec;border:2px solid var(--line);color:#064d26}
.vf-msg.bad{background:#fff1f0;border:2px solid #b3261e;color:#7a1712}
.vform [hidden]{display:none!important}
/* 交通與聯絡頁：前往「預約參觀」頁的大按鈕 */
.btn-visit{min-height:64px;font-size:1.375rem;padding:14px 34px;box-shadow:0 6px 16px rgba(168,72,31,.25)}
/* 頁首：選單多了「預約參觀」，電腦版頁首字固定大小（大字模式也不擠出畫面）；手機選單按鈕改為圖示＋小字上下排，320／430 寬也放得下 */
.top .nav a{font-size:17px;padding:8px 9px}
.top .call{font-size:17px}
@media(max-width:480px){.menubtn{flex-direction:column;justify-content:center;gap:4px;min-width:52px;min-height:52px;padding:0 6px;border-radius:14px;font-size:12px;line-height:1}}
/* ===== 頁面縮短（20261011n）：間距收緊、手機橫向滑動、展開看更多、相簿先顯示部分 ===== */
section{padding:56px 0}
.pagehead{padding:36px 0 30px}
@media(max-width:759px){
  section{padding:40px 0}
  .pagehead{padding:26px 0 22px}
  .pillars,.cards,.plans{margin-top:20px}
  .facts{margin:18px 0}
  .btns{margin-top:18px}
  /* 手機：卡片／照片列改成左右滑動 */
  .hscroll{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-left:-22px;margin-right:-22px;padding:0 22px 6px;scroll-padding:0 22px;-webkit-overflow-scrolling:touch;align-items:stretch;scrollbar-width:thin}
  .hscroll>*{scroll-snap-align:start;min-width:0}
  .figgrid.hscroll{grid-auto-columns:72%}
  .day.hscroll{grid-auto-columns:72%}
  .split.hscroll video{max-height:420px;width:100%;object-fit:contain;background:#000}
  .hs-hint{margin:6px 0 0;text-align:center;font-size:.9375rem;color:var(--muted)}
  /* 手機已有底部固定的「電話／LINE／預約參觀」，頁尾的預約橫幅就不重複 */
  .ctaband{display:none}
  .plan{padding:18px 18px}
  .plan .price{margin:6px 0 2px}
  .pillar .b{padding:18px 18px 20px}
  .card .b{padding:16px 18px 18px}
  #traffic figure img{max-height:220px;width:100%;object-fit:cover}
}
@media(min-width:760px){.hs-hint{display:none}}
/* 展開看更多 */
details.more{background:none!important;border:0;padding:0;margin:4px 0 12px}
details.more>summary{display:inline-block;font-size:1.0625rem;padding:6px 0;color:var(--sea2,var(--sea));text-decoration:underline;text-underline-offset:3px}
details.more>summary::after{content:" ▾";float:none;color:inherit}
details.more[open]>summary::after{content:" ▴"}
details.more>summary:focus-visible{outline:3px solid #f0a020;outline-offset:2px;border-radius:4px}
details.more p{color:inherit;font-size:inherit}
details.more .note{margin:6px 0 0}
details.more figure{margin:8px 0 0}
/* 相簿：先顯示一部分，按「看更多照片」全部打開（沒開 JS 時全部顯示） */
@media(max-width:759px){.gallery.capped>a:nth-child(n+5){display:none}}
@media(min-width:760px){.gallery.capped>a:nth-child(n+7){display:none}}
.gal-more{justify-content:center}
.gal-more[hidden]{display:none}
@media(max-width:759px){
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .fact{padding:12px 14px;font-size:1rem}
  .fact b{font-size:1.3125rem}
  /* 方案卡：名稱與價格同一行，其餘說明在下面 */
  .plan{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;text-align:left}
  .plan>*{order:3;flex-basis:100%}
  .plan h3{order:1;flex-basis:auto;margin:0}
  .plan .price{order:2;flex-basis:auto;margin:0 0 0 auto;font-size:2rem}
  .plan p{margin-top:4px}
  .plans{gap:12px}
  summary{padding:13px 0}
  .vloop video{max-height:440px}
  .cbox{padding:18px}
}
/* 照片大圖（燈箱，site.js） */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:#0b1724;display:grid;grid-template-rows:auto 1fr auto;color:#fff}
.lb[hidden]{display:none}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.lb-count{font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lb-close{font:inherit;font-size:1.0625rem;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:999px;min-height:48px;padding:6px 18px;cursor:pointer}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 8px;touch-action:pan-y pinch-zoom}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:72px;border:1px solid rgba(255,255,255,.45);border-radius:14px;background:rgba(0,0,0,.45);color:#fff;font-size:2.75rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-nav:hover:not(:disabled){background:rgba(0,0,0,.65)}
.lb-nav:disabled{opacity:.25;cursor:default}
.lb-nav[hidden]{display:none}
.lb button:focus-visible{outline:3px solid #f0a020;outline-offset:2px}
.lb-cap{margin:0;padding:8px 16px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));text-align:center;font-size:1.0625rem;color:#dce8f3}
.lb-cap[hidden]{display:none}
@media(max-width:759px){.lb-nav{width:46px;height:60px;font-size:2.25rem;background:rgba(0,0,0,.35)}.lb-prev{left:4px}.lb-next{right:4px}.lb-stage{padding:0}}
.lb-in-r{animation:lbInR .2s ease-out}.lb-in-l{animation:lbInL .2s ease-out}
@keyframes lbInR{from{opacity:.4;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes lbInL{from{opacity:.4;transform:translateX(-30px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lb-in-r,.lb-in-l{animation:none}}
/* 360° 環景（gallery.html；pano.js） */
.panos{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:18px}
@media(min-width:760px){.panos{grid-template-columns:repeat(3,1fr)}.panos .pano-cap{font-size:1.0625rem;padding:10px 14px}.panos .pano-cap::after{content:"點開看一圈 →";display:block;font-size:1rem}}
.pano-h{margin:36px 0 6px;font-size:1.5rem;color:var(--sea);scroll-margin-top:96px}
.pano-card{position:relative;display:block;width:100%;padding:0;border:2px solid var(--border);border-radius:var(--r);overflow:hidden;background:#0d2a44;cursor:pointer;font:inherit;text-align:left;color:inherit}
.pano-card img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform .4s}
.pano-card:hover img{transform:scale(1.04)}
.pano-card:focus-visible{outline:3px solid #f0a020;outline-offset:2px}
.pano-badge{position:absolute;top:12px;left:12px;background:rgba(8,26,44,.8);color:#fff;font-weight:900;border-radius:999px;padding:4px 14px;font-size:1.0625rem}
.pano-cap{display:block;padding:12px 16px;background:var(--sand);color:var(--sea);font-weight:800;font-size:1.125rem;line-height:1.5}
.pano-cap::after{content:"　點開看一圈 →";color:var(--accent);font-weight:700}
.pv{position:fixed;inset:0;z-index:200;background:#0b1724;color:#fff;display:grid;grid-template-rows:auto 1fr auto}
.pv[hidden]{display:none}
.pv [hidden]{display:none!important}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
.pv-cap{margin:0;font-size:1.125rem;font-weight:800;line-height:1.4}
.pv-stage{position:relative;min-height:0;overflow:hidden}
.pv-c{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.pv-c:active{cursor:grabbing}
.pv-load{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:1.25rem;font-weight:700;pointer-events:none}
.pv-flat{position:absolute;inset:0;overflow:auto}.pv-flat img{max-width:none;height:100%}
.pv-zoom{position:absolute;right:10px;bottom:12px;display:flex;flex-direction:column;gap:8px}
.pv-zoom button{width:52px;height:52px;border:1px solid rgba(255,255,255,.4);border-radius:14px;background:rgba(0,0,0,.45);color:#fff;font-size:28px;font-weight:900;cursor:pointer;line-height:1}
.pv-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:8px 14px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.pv-tip{margin:0;font-size:1.0625rem;color:#dce8f3}
.pv-tools{display:flex;gap:8px;flex-wrap:wrap}
.pv-btn{font:inherit;font-size:1.0625rem;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:999px;min-height:48px;padding:6px 18px;cursor:pointer}
.pv-btn[aria-pressed="true"]{background:#f0a020;color:#0b1724;border-color:#f0a020}
.pv button:hover{background:rgba(255,255,255,.28)}
.pv-btn[aria-pressed="true"]:hover{background:#f5b440}
.pv button:focus-visible,.pv-c:focus-visible{outline:3px solid #f0a020;outline-offset:-3px}
@media(max-width:759px){.panos.hscroll{grid-auto-columns:84%}.pano-cap{font-size:1.0625rem;padding:10px 14px}.pv-cap{font-size:1.0625rem}}
/* 分享按鈕與小視窗 */
.share-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 16px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--sea);font:inherit;font-size:1.0625rem;font-weight:700;cursor:pointer;line-height:1.2}
.share-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.share-btn:hover{border-color:var(--sea);background:var(--soft)}
.share-btn:focus-visible,.sharepop :focus-visible{outline:3px solid #f0a020;outline-offset:2px}
.ph-share{margin:14px 0 0}
.fshare{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.15)}
.fshare .share-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.fshare .share-btn:hover{background:rgba(255,255,255,.12)}
.fshare span{font-size:1rem}
.sharepop{position:absolute;z-index:120;width:min(340px,calc(100vw - 16px));background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.18);padding:14px 16px 12px}
.sharepop[hidden]{display:none}
.sharepop.sp-sheet{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;bottom:calc(8px + env(safe-area-inset-bottom))}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:1.125rem;color:var(--sea)}
.sp-x{width:44px;height:44px;border:0;border-radius:999px;background:var(--soft);color:var(--ink);font-size:1.125rem;cursor:pointer}
.sp-lbl{display:block;font-size:.9375rem;color:var(--muted);margin-bottom:4px}
.sp-url{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:1rem;color:var(--ink);background:var(--sand)}
.sp-acts{display:grid;gap:8px;margin-top:10px}
.sp-acts>*{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font:inherit;font-size:1.0625rem;font-weight:800;text-decoration:none;cursor:pointer;border:2px solid transparent}
.sp-copy{background:var(--sea);color:#fff}
.sp-line{background:var(--line);color:#fff}
.sp-fb{background:#1877f2;color:#fff}
.sp-msg{margin:8px 0 0;font-size:1rem;color:var(--line);min-height:1.2em}
.sp-msg:empty{min-height:0;margin:0}
.pv-close{flex:none;white-space:nowrap}
/* 即時影像按鈕列：一列左右滑（手機、電腦都一樣），右側露出下一顆＋淡出邊緣 */
.crow-wrap{position:relative;margin-top:12px}
.chips.crow{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-top:0;padding:4px 2px 6px}
.chips.crow::-webkit-scrollbar{display:none}
.chips.crow a{flex:none;white-space:nowrap;scroll-snap-align:start;min-height:48px;display:inline-flex;align-items:center}
.crow-wrap.is-over:not(.at-end) .crow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.crow-wrap.is-over:not(.at-end):not(.at-start) .crow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.crow-wrap.is-over.at-end:not(.at-start) .crow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.crow-btn{display:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--sea);font-size:1.75rem;line-height:1;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:2}
.crow-prev{left:-14px}.crow-next{right:-14px}
.crow-btn:disabled{display:none!important}
.crow-btn:hover{background:var(--soft)}
@media(min-width:760px) and (pointer:fine){.crow-wrap.is-over .crow-btn{display:flex;align-items:center;justify-content:center}}
.crow-hint{margin:6px 0 0;text-align:center;font-size:.9375rem;color:var(--muted)}
.crow-hint[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.chips.crow{scroll-behavior:auto}}
/* 方案卡（首頁、方案頁）：整張可點到預約表單（卡內「預約參觀 →」用 ::after 撐滿整張卡）；「看方案說明」小連結疊在上層、各自獨立 */
.plan-link{position:relative;transition:border-color .15s,box-shadow .15s,transform .15s}
.plan-link h3{color:var(--sea)}
.plan-link:hover{border-color:var(--sea2);box-shadow:0 8px 22px rgba(18,57,94,.14);transform:translateY(-2px)}
.plan-link:focus-within{border-color:var(--sea2)}
.plan .plan-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;margin:auto 0 0;padding-top:14px;color:inherit}
.plan-go{font-size:1.125rem;font-weight:800;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.plan-go::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.plan-go:focus-visible{outline:none}
.plan-go:focus-visible::after{outline:3px solid #f0a020;outline-offset:3px}
.plan-info{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:1rem;font-weight:700;color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.plan-info:focus-visible{outline:3px solid #f0a020;outline-offset:2px;border-radius:6px}
.plan[id],#plan-details{scroll-margin-top:96px}
@media(min-width:860px){.plan-link{display:flex;flex-direction:column;align-items:center}}
@media(max-width:759px){.plan-link .plan-acts{order:4;flex-basis:100%;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.plan-link{transition:none}.plan-link:hover{transform:none}}
/* 月租會員卡：右上角「首月優惠」標籤（首月 NT$18,000）；三張卡同樣的框線 */
/* 月租會員卡：卡片上方整條橘色標頭「首月優惠」（高度用 rem，大字模式一起放大）；其他兩張卡不變，頂端對齊 */
.plans{padding-top:2.75rem}
.plan-feat{position:relative;border-top-left-radius:0;border-top-right-radius:0}
.plan-ribbon{position:absolute;left:-2px;right:-2px;bottom:100%;height:2.75rem;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;font-size:1.25rem;font-weight:900;letter-spacing:.12em;border-radius:var(--r) var(--r) 0 0;pointer-events:none;z-index:3}
.plan .sub-offer{color:var(--accent);font-weight:900}
@media(max-width:759px){.plans{padding-top:2.5rem}.plan-ribbon{height:2.5rem;font-size:1.1875rem}}
/* 手機：方案卡左右滑（上方留出「首月優惠」標頭的空間；卡片等高） */
@media(max-width:759px){.plans.hscroll{padding-top:2.5rem;align-items:stretch}.plans.hscroll .plan-link:hover{transform:none}}
/* 手機：方案卡置中對齊，中間的月租會員卡左右各露出一截 */
@media(max-width:759px){.plans.hscroll{grid-auto-columns:80%}.plans.hscroll>*{scroll-snap-align:center}}
/* ===== 首頁再縮短（手機為主） ===== */
@media(max-width:759px){
  /* 首頁大圖：電話、LINE 按鈕底部列已有，手機只留「預約參觀」 */
  .hero-btns .hide-m{display:none}
  .pg-index .hero picture img,.pg-index .hero>img{height:34vh;min-height:220px;max-height:300px}
  .pg-index .hero .cap .wrap{padding-top:20px;padding-bottom:26px}
  .pg-index .hero h1{margin-bottom:.25em}
  .pg-index .hero p{margin-bottom:10px}
  .pg-index .hero .tag{font-size:.9375rem;padding:3px 12px;margin:0 6px 8px 0}
  .pg-index .hero .btns{margin-top:8px}
  .pg-index section:not(.hero){padding:30px 0}
  .pg-index .lead{margin-bottom:0}
  .pg-index .pillars{margin-top:16px}
  .pg-index .pillar img{aspect-ratio:16/9}
  .pg-index .pillar .b{padding:14px 16px 16px}
  .pg-index .pillar h3{font-size:1.4375rem;margin-bottom:6px}
  .pg-index .pillar li{margin-bottom:3px}
  .pg-index .facts{margin:16px 0 0;gap:8px}
  .pg-index .fact{padding:10px 12px}
  .pg-index .bus,.pg-index .hl{margin-top:18px}
  .pg-index .bus{padding:16px 14px}
  .pg-index .bus .bus-note{margin-bottom:8px}
  .pg-index .bus-tabs{margin:2px 0 8px}
  .pg-index .bus-rows{gap:8px}
  .pg-index .bus-rows li{padding:10px 12px}
  .pg-index .plans.hscroll{margin-top:10px}
  /* 花蓮今日：手機 2×2（首頁與交通資訊頁） */
  .hl{padding:16px 14px}
  .hl .hl-grid,.hl[data-compact] .hl-grid{grid-template-columns:1fr 1fr;gap:8px}
  .hl-tile{padding:10px 12px;min-width:0}
  .hl-tile h4{font-size:.9375rem;margin-bottom:4px}
  .hl-ico{font-size:2rem}
  .hl-temp{font-size:1.875rem}
  .hl-wxt{font-size:1rem}
  .hl-wx{gap:8px}
  .hl-sub{font-size:.9375rem}
  .hl-aqi{font-size:1.0625rem;gap:6px}
  .hl-badge{font-size:1.0625rem;padding:4px 10px}
  .hl-sun{gap:4px 10px}
  .hl-sun b{font-size:1.1875rem}
  .hl-road{font-size:.9375rem;padding-left:1em}
  .hl-ok{font-size:1rem}
  .hl h3{font-size:1.375rem;margin-bottom:8px}
}
/* ===== 首頁：公車／火車看板只放交通資訊頁，首頁改放連結 ===== */
.go-live{margin:22px 0 0;text-align:center}
.go-live .btn{min-width:min(100%,320px)}
#bus,#train{scroll-margin-top:84px}
@media(max-width:759px){.go-live{margin-top:16px}.go-live .btn{width:100%}}
/* ===== 去重複：首頁改為各頁入口連結；環境頁空拍大圖 ===== */
.go-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.go-links .btn{min-width:0}
.env-wide{margin:28px 0 0}
.env-wide img{width:100%;height:auto}
@media(min-width:760px){.go-links .btn{flex:1 1 calc(50% - 12px)}}
@media(max-width:759px){.go-links{gap:10px}.go-links .btn{width:100%;font-size:1.125rem;min-height:52px;padding:10px 18px}}
@media(min-width:760px){.env-wide{max-width:760px;margin-left:auto;margin-right:auto}}

/* intro video */
.intro-video{padding:28px 0 8px}
.intro-video h2{margin:0 0 12px}
.intro-video h2 small{font-size:.6em;font-weight:400;color:#667}
.iv-box{position:relative}
.iv-box video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:14px}
.iv-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}.iv-head h2{margin:0}
.iv-sound{font:inherit;font-size:1.125rem;font-weight:800;padding:8px 18px;min-height:48px;border:2px solid var(--accent);border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap}
.iv-sound[aria-pressed="true"]{background:#fff;color:var(--accent)}
.iv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:2.6rem;line-height:88px;padding:0 0 0 8px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.4)}.iv-play[hidden]{display:none}.iv-play:focus-visible{outline:3px solid #ffb84d;outline-offset:3px}
.iv-sound:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
@media (max-width:600px){.iv-sound{font-size:1.05rem;padding:6px 14px}}
/* environment page polish (scoped) */
.pg-environment section:not(.pagehead){padding:64px 0}
.pg-environment section h2{margin-bottom:.4em}
.pg-environment .eyebrow{display:flex;align-items:center;gap:10px}
.pg-environment .eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--accent)}
.pg-environment figure{margin:0}
.pg-environment figcaption{margin-top:10px;padding-left:12px;border-left:3px solid var(--border);color:var(--muted)}
.pg-environment .rounded{box-shadow:0 10px 28px rgba(18,57,94,.12)}
.pg-environment .env-wide{margin:36px auto 0;max-width:none}
.pg-environment .env-wide img{aspect-ratio:21/9;object-fit:cover}
.pg-environment .facts{grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 0}
.pg-environment .fact{position:relative;text-align:center;padding:22px 14px 18px;border:1px solid var(--border);border-top:5px solid var(--sea2);border-radius:16px;background:var(--paper);color:var(--ink);line-height:1.5;font-size:1.0625rem}
.pg-environment .fact b{font-size:2rem;line-height:1.2;margin-bottom:6px;color:var(--sea)}
.pg-environment .fact:nth-child(even){border-top-color:var(--accent)}
.pg-environment figure.map{margin-top:22px}
.pg-environment figure.map img{box-shadow:0 10px 28px rgba(18,57,94,.12)}
.pg-environment .pano-h{margin:18px 0 6px}
.pg-environment .env-panointro{color:var(--muted);max-width:46em}
.pg-environment .env-room{margin-top:28px}
.pg-environment .env-room h3{padding-bottom:8px;border-bottom:3px solid var(--soft)}
.pg-environment .env-roomgrid{margin-top:28px;grid-template-columns:repeat(3,1fr);gap:18px}
.pg-environment .env-roomgrid figcaption{border-left-color:var(--accent);font-weight:600;color:var(--ink)}
.pg-environment #rooms .btns{margin-top:26px}
@media(max-width:899px){.pg-environment .facts{grid-template-columns:1fr 1fr;gap:12px}.pg-environment .fact{padding:16px 10px 14px;font-size:1rem}.pg-environment .fact b{font-size:1.625rem}}
@media(max-width:759px){.pg-environment section:not(.pagehead){padding:44px 0}.pg-environment .env-wide{margin-top:24px}.pg-environment .env-wide img{aspect-ratio:16/9}.pg-environment .facts{margin-top:24px}}
/* AI 示意圖標示 */
.ai-wrap{position:relative;display:block}
.ai-wrap>img{display:block}
.ai-chip{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(20,28,36,.82);color:#fff;font-size:.9375rem;font-weight:700;line-height:1.3;padding:4px 10px;border-radius:8px;pointer-events:none;letter-spacing:.02em}
.mv-credit{font-size:.8125rem;color:var(--muted);margin:6px 0 18px}
#iv:focus-visible,#mv:focus-visible{outline:3px solid #ffb84d;outline-offset:3px}
/* 即時影像：台11線路線圖（莊園居中） */
.camroute{--rl:#12395e;margin-top:16px;position:relative}
.camroute ol,.cr-off{list-style:none;margin:0;padding:0}
.cr-dir{margin:0 0 6px;font-weight:700;color:var(--muted);font-size:1.0625rem}
.camroute li a,.cr-off li a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:10px 16px;background:var(--paper);border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--sea)}
.camroute li a:hover,.cr-off li a:hover,.camroute li a:focus-visible,.cr-off li a:focus-visible{border-color:var(--sea);box-shadow:0 0 0 2px var(--sea)}
.cr-name{font-size:1.1875rem;font-weight:700}
.cr-time{font-size:1.0625rem;color:var(--muted);margin-top:2px}
.cr-manor{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--accent);color:#fff;border-radius:14px;padding:12px 16px;position:relative}
.cr-manor b{font-size:1.3125rem}.cr-manor span:not(.cr-dot){font-size:1rem}
.cr-dot{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--accent);border:4px solid #fff;box-shadow:0 0 0 2px var(--accent)}
.cr-offh{margin:22px 0 8px;font-size:1.1875rem}
.cr-off{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cr-note{font-size:1rem;color:var(--muted);margin-top:12px}
@media (max-width:759px){
 .camroute{padding-left:30px}
 .camroute::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--rl)}
 .camroute ol{display:flex;flex-direction:column;gap:10px}
 .camroute li{position:relative}
 .camroute li::before{content:"";position:absolute;left:-27px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--rl)}
 .cr-manor{margin:14px 0}
 .cr-dot{left:-35px;top:50%;margin-top:-10px}
 .cr-s .cr-dir{margin-top:0}
}
@media (min-width:760px){
 .camroute{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start}
 .camroute ol{display:flex;flex-direction:column;gap:10px}
 .cr-manor{margin-top:34px}
 .cr-manor{align-self:center;align-items:center;text-align:center;min-width:180px}
 .cr-dot{display:none}
 .cr-n .cr-dir::after{content:"（由近到遠）";font-weight:400}
 .cr-s .cr-dir::after{content:"（由近到遠）";font-weight:400}
}
.cr-map{margin:14px 0 6px}.cr-map img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.cr-attr{font-size:.9375rem;color:var(--muted);margin-top:4px}.cr-attr a{color:var(--sea)}
@media (min-width:760px){
 .cr-map{display:none}
 .camroute{padding:22px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(rgba(250,246,239,.8),rgba(250,246,239,.8)),url(img/cam-map-1600.webp?v=20261013d) 62% center/cover no-repeat}
}
@media (max-width:759px){.cr-map img{max-height:420px;object-fit:cover;object-position:50% 50%}}
.iv-btns{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
.iv-fs{font:inherit;font-size:1.125rem;font-weight:800;padding:8px 18px;min-height:48px;border:2px solid var(--sea);border-radius:999px;background:#fff;color:var(--sea);cursor:pointer;white-space:nowrap}
.iv-fs[hidden]{display:none}.iv-fs:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.iv-box:fullscreen{background:#000;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.iv-box:-webkit-full-screen{background:#000;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.iv-box:fullscreen video{width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:0}
.iv-box:-webkit-full-screen video{width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:0}
@media (max-width:600px){.iv-head h2{flex:1 0 100%}.iv-fs{font-size:1.05rem;padding:6px 14px}}
/* 即時影像直接標在地圖上 */
.cm-hint{font-size:1.0625rem;color:var(--muted);margin:10px 0}
.cammap{position:relative;max-width:640px;margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--border);container-type:inline-size}
.cammap>img{display:block;width:100%;height:auto}
.cm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cm-lines line{stroke:#12395e;stroke-width:2.5;vector-effect:non-scaling-stroke}
.cm-lab{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;min-height:44px;box-sizing:border-box;padding:3px 8px;background:#fff;border:2px solid var(--sea);border-radius:10px;color:var(--sea);text-decoration:none;line-height:1.2;font-size:max(15px,2.9cqi);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cm-lab b{font-weight:800}.cm-lab span{color:#33404b;font-weight:500}
.cm-r{left:58%;right:1%}.cm-l{left:1%;width:33%}
a.cm-lab:hover,a.cm-lab:focus-visible{background:#eaf1f8;outline:3px solid var(--accent);outline-offset:1px}
.cm-manor{background:var(--accent);border-color:var(--accent);color:#fff}.cm-manor span{color:#fff}
.cm-isl{position:absolute;right:1%;bottom:1.2%;width:41%;background:#fff;border:2px solid var(--sea);border-radius:10px;padding:4px 6px;font-size:max(15px,2.9cqi);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cm-isl p{margin:0 0 2px;font-weight:800;color:#33404b;line-height:1.3}
.cm-isl a{display:flex;align-items:center;min-height:44px;color:var(--sea);font-weight:700;text-decoration:underline;line-height:1.2}
.cm-nl{stroke:#a8481f!important;stroke-width:2!important;stroke-dasharray:4 3}
.cm-nd{fill:#a8481f;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.cm-n{position:absolute;transform:translate(-50%,-50%);width:max(24px,4.2cqi);height:max(24px,4.2cqi);border-radius:50%;background:var(--accent);color:#fff;border:2px solid #fff;font-weight:800;font-size:max(14px,2.6cqi);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.spots{max-width:900px;margin:18px auto 0}.spots h3{margin:18px 0 6px}
.sp-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.sp-list{grid-template-columns:1fr 1fr}}
.sp-n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.sp-cam{background:#eaf1f8}
.sp details{background:#fff!important;border:1px solid var(--border);border-radius:12px;margin:0;padding:0}
.sp summary{display:flex;font-size:1rem;font-weight:400;align-items:center;gap:10px;min-height:48px;padding:6px 12px;cursor:pointer;list-style:none}
.sp summary::-webkit-details-marker{display:none}
.sp summary::after{content:"▾";float:none;margin-left:auto;color:var(--sea);font-size:1.1rem;transition:transform .2s}
.sp details[open] summary::after{content:"▾";transform:rotate(180deg)}
.sp summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
.sp-nm{font-weight:800;font-size:1.125rem;color:var(--sea);line-height:1.3}.sp-t{font-size:.95rem;color:#33404b;font-weight:600;white-space:nowrap}
.sp-b{padding:0 12px 10px 54px}.sp-b p{margin:0 0 4px;font-size:1.0625rem;line-height:1.55}.sp-b a{font-size:.95rem;color:var(--sea)}
@media(prefers-reduced-motion:reduce){.sp summary::after{transition:none}}
#gallery .env-panointro{color:var(--muted);max-width:46em}
.iv-lang{display:inline-flex;border:2px solid var(--accent);border-radius:999px;overflow:hidden}
.iv-lang button{font:inherit;font-size:.95rem;font-weight:700;padding:6px 12px;min-height:40px;border:0;background:#fff;color:var(--accent);cursor:pointer}
.iv-lang button[aria-pressed="true"]{background:var(--accent);color:#fff}
.iv-lang button:focus-visible{outline:3px solid var(--sea);outline-offset:-3px}

/* 附近路況（台11線即時影像） */
.rc .rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;max-width:820px}
.rc-cam{display:flex;flex-direction:column;background:var(--sand);border:1px solid var(--border);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none;min-width:0;min-height:44px}
.rc-cam:hover,.rc-cam:focus-visible{border-color:var(--sea2)}
.rc-cam img,.rc-noimg{display:block;width:100%;aspect-ratio:22/15;object-fit:cover;background:#dfe5ea}
.rc-noimg{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1rem}
.rc-cap{display:flex;flex-direction:column;padding:8px 12px 10px;line-height:1.4}
.rc-cap b{font-size:1.0625rem}
.rc-cap small{font-size:.9375rem;color:var(--muted)}
.rc-cap .rc-stale{color:#8a4b00}
.rc-h{margin:18px 0 8px;font-size:1.0625rem;color:var(--muted);font-weight:800}
.rc-alerts p{margin:0}
@media(max-width:380px){.rc .rc-grid{gap:8px}.rc-cap{padding:6px 8px 8px}.rc-cap b{font-size:.9375rem}.rc-cap small{font-size:.8125rem}}
.rc-media{position:relative;cursor:pointer}
.rc-media[role=button]:focus-visible{outline:3px solid var(--sea2);outline-offset:-3px}
.rc-msg{position:absolute;left:8px;right:8px;top:8px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.875rem}
.rc-cap{color:var(--ink);text-decoration:none;min-height:44px}
.rc-cap .rc-more{color:var(--sea2);font-weight:700}
.rc-p{margin:8px 0 0;font-size:.9375rem;color:var(--muted)}
.rc-hint{position:absolute;left:8px;bottom:8px;right:8px;width:max-content;max-width:calc(100% - 16px);padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:.8125rem;pointer-events:none}
.bs-fig{max-width:360px;margin:0 auto}
.bs-fig img{width:100%;height:auto}
@media(max-width:759px){#traffic .bs-fig{max-width:min(100%,260px)}#traffic .bs-fig img{max-height:none;object-fit:initial}}

/* lightbox nav below photo on phones */
@media(max-width:759px){.lb{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto}.lb-top,.lb-stage,.lb-cap{grid-column:1/-1}.lb-top{grid-row:1}.lb-stage{grid-row:2}.lb-cap{grid-row:4}.lb-nav{position:static;transform:none;grid-row:3;margin:8px 16px 4px;background:rgba(255,255,255,.12)}.lb-prev{grid-column:1;justify-self:start}.lb-next{grid-column:2;justify-self:end}}
/* 2026-10-16 header fit: 9 menu items + LINE button must fit from 1240px */
@media(min-width:1240px){.top .wrap{gap:10px;padding:0 16px}.nav{gap:0}.nav a{font-size:1rem;padding:8px 7px}.fsw .lbl{display:none}.top .call{padding-left:14px;padding-right:14px}}
@media(min-width:1240px) and (max-width:1359px){.brand small{display:none}}

/* 線條圖示（取代 emoji） */
.ic{width:1em;height:1em;flex:none;vertical-align:-.15em}
.hl h3{align-items:center}
.hl h3 .ic,.bus h3 .ic{width:1.1em;height:1.1em;color:var(--sea);margin-right:2px}
.train h3 .nw{display:inline-flex;align-items:center;gap:6px}
.hl-ico .ic{width:2.75rem;height:2.75rem;color:var(--sea);stroke-width:1.6}
@media(max-width:759px){.hl-ico .ic{width:2rem;height:2rem}}
.hl-ok{display:flex;align-items:center;gap:8px}
.hl-ok .ic{width:1.2em;height:1.2em}
.hl-ok span{white-space:nowrap}
.hl-ok .hl-okt{white-space:normal;min-width:0;line-height:1.35}
.hl-ok:has(.hl-okt){align-items:flex-start}
.hl-ok:has(.hl-okt) .ic{margin-top:.1em}
.hl-warn .ic,.hl-typh .ic{width:1.1em;height:1.1em;margin-right:4px}
.go-links .btn{gap:12px;align-items:center}
.go-links .btn .ic{width:1.5rem;height:1.5rem;color:var(--accent,var(--sea))}
.step h3{display:flex;align-items:center;gap:8px}
.step h3 .ic{width:1.1em;height:1.1em;color:var(--sea)}