:root{
  --navy:#0C1341; --navy-2:#1E2A5A; --gold:#F8B62B; --gold-ink:#906A19; --gold-soft:#FDF1D6;
  --paper:#F5EFE4; --card:#FFFCF6; --ink:#1D2333; --muted:#5E6474; --line:#E6DDCC; --chip:#F4EDE0;
  --serif:"Noto Serif TC",serif; --sans:"Noto Sans TC",system-ui,sans-serif;
  --side:372px; --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 8px 24px rgba(12,19,65,.12),0 1px 3px rgba(12,19,65,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#app{position:fixed;inset:0}
#stage{position:absolute;inset:0;right:var(--side)}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#tags,#pins{position:absolute;inset:0;right:var(--side);pointer-events:none;overflow:hidden}

/* 島名牌 */
.tag{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;border:0;
  background:rgba(255,252,246,.95);color:var(--navy);font:700 13px/1 var(--sans);white-space:nowrap;box-shadow:0 2px 10px rgba(12,19,65,.16);transition:background .18s,color .18s,box-shadow .18s;will-change:transform}
.tag b{font:900 11px/1 var(--serif);color:var(--gold-ink);letter-spacing:.02em}
.tag.small{font-size:12px;padding:5px 10px 5px 8px}
.tag:hover,.tag.hover{box-shadow:0 0 0 2px var(--gold),0 4px 14px rgba(12,19,65,.2)}
.tag.on{background:var(--navy);color:#fff}
.tag.on b{color:var(--gold)}
.tag.route{background:var(--navy);color:var(--gold)}
.tag.group{background:var(--gold);color:var(--navy);font-size:14px;padding:7px 14px 7px 11px}
.tag.group b{color:var(--navy)}
.tag.route b{color:#fff}
.tag.dock{background:var(--navy);color:#fff;font-size:12px;pointer-events:none}
.tag.dock b{color:var(--gold)}
.tag.dock.lit{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:#fff;color:var(--navy);font:700 13px/1 var(--sans);white-space:nowrap;box-shadow:0 0 0 2px var(--gold),0 4px 12px rgba(12,19,65,.18);animation:pinIn .4s var(--ease) both}
.pin i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--gold);font:900 12px/1 var(--serif);font-style:normal}
.pin::after{content:"";position:absolute;left:15px;top:100%;width:2px;height:16px;background:var(--gold)}
@keyframes pinIn{from{opacity:0;margin-top:-8px}to{opacity:1;margin-top:0}}

/* 左上品牌 */
.brand{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;background:rgba(255,252,246,.94);border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.brand .logo img{height:30px;display:block}
.brand-r{border-left:1px solid var(--line);padding-left:14px}
.brand h1{margin:0;font:900 20px/1.15 var(--serif);color:var(--navy);letter-spacing:.06em}
.brand p{margin:3px 0 0;font:700 12px/1.3 var(--sans);color:var(--muted);letter-spacing:.04em}
.brand em{font-style:normal;color:var(--gold-ink);margin-left:2px}

/* 上方工具列 */
.hud{position:absolute;bottom:18px;left:calc(50% - var(--side)/2);transform:translateX(-50%);display:flex;gap:8px}
.seg{display:flex;align-items:center;gap:2px;padding:5px;background:rgba(255,252,246,.94);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.seg button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;height:48px;padding:0 6px;border-radius:13px;color:var(--muted);font:700 11px/1 var(--sans);transition:background .15s,color .15s}
.seg button svg{width:19px;height:19px}
.seg button:hover{background:var(--chip);color:var(--navy)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button[data-toggle="frozen"][aria-pressed="false"]{background:none;color:var(--muted)}
.seg button[data-toggle="frozen"][aria-pressed="true"]{background:var(--gold);color:var(--navy)}
.seg output{font:700 13px/1 var(--sans);color:var(--navy);padding:0 10px 0 6px;font-variant-numeric:tabular-nums;min-width:52px}

/* 右上按鈕 */
.nav{position:absolute;top:18px;right:calc(var(--side) + 18px);display:flex;gap:8px}
.nav button{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;border-radius:14px;background:rgba(255,252,246,.94);color:var(--navy);font:700 14px/1 var(--sans);box-shadow:var(--shadow)}
.nav button svg{width:15px;height:15px}
.nav button:hover{box-shadow:0 0 0 2px var(--gold),var(--shadow)}
.nav .gold{background:var(--navy);color:var(--gold)}
.nav #btn-help{width:44px;justify-content:center;padding:0;font-size:16px}
.mob{display:none!important}
body:has(.card:not([hidden])) .hud{left:calc(410px + (100% - var(--side) - 410px)/2)}

/* 右側清單 */
.sidebar{position:absolute;top:0;right:0;bottom:0;width:var(--side);background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:6}
.side-head{padding:24px 22px 0}
.eyebrow{font:900 11px/1 var(--serif);letter-spacing:.22em;color:var(--gold-ink)}
.side-head h2{margin:10px 0 8px;font:900 24px/1.35 var(--serif);color:var(--navy)}
.facts{margin:0 0 14px;font:500 13px/1.5 var(--sans);color:var(--muted)}
.facts b{font:900 15px/1 var(--serif);color:var(--navy)}
.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:0 10px 0 12px;background:#fff;transition:border-color .15s}
.search-wrap:focus-within{border-color:var(--navy)}
.search-wrap svg{width:18px;height:18px;color:var(--muted);flex:none}
.search{flex:1;min-width:0;border:0;outline:0;padding:12px 0;font:15px var(--sans);background:none;color:var(--ink)}
.search-wrap kbd{font:700 11px/1 var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:12px 0 0;padding:4px;background:var(--chip);border-radius:14px}
.tabs button{border:0;background:none;padding:9px 0;border-radius:10px;font:700 13px/1 var(--sans);color:var(--muted)}
.tabs button.on{background:var(--navy);color:#fff}
.list{flex:1;overflow:auto;padding:8px 10px 14px;scrollbar-width:thin}
.row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:11px 12px;border-radius:14px;transition:background .15s}
.row:hover{background:#F6F0E4}
.row.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
.row .no{font:900 italic 21px/1 var(--serif);color:var(--gold-ink);min-width:32px}
.row .tx{flex:1;min-width:0}
.row .nm{display:block;font:700 15.5px/1.35 var(--sans);color:var(--navy)}
.row .sub{display:block;font:400 12.5px/1.45 var(--sans);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .go{color:var(--muted);font-size:13px;opacity:0;transition:opacity .15s}
.row:hover .go,.row.on .go{opacity:1}
.row.child{padding-left:30px}
.row.child .no{font-size:16px;min-width:26px}
.row.flow .no{font:900 13px/1 var(--sans);font-style:normal;background:var(--navy);color:var(--gold);border-radius:8px;padding:6px 0;text-align:center;min-width:34px}
.row.course .nm{font-weight:500}
.group-h{display:flex;gap:12px;align-items:center;padding:14px 12px 4px}
.group-h .no{font:900 21px/1 var(--serif);color:var(--gold-ink);min-width:32px}
.group-h b{display:block;font:700 15.5px/1.3 var(--sans);color:var(--navy)}
.group-h small{display:block;font:12.5px/1.45 var(--sans);color:var(--muted)}
.list .note{margin:6px 12px 8px;font:13px/1.65 var(--sans);color:var(--muted)}
.empty{padding:22px 12px;display:grid;gap:6px}
.empty b{font:700 15px var(--sans);color:var(--navy)}
.empty span{font:13.5px/1.65 var(--sans);color:var(--muted)}
.side-foot{padding:16px 22px 20px;background:var(--navy);color:#fff}
.side-foot p{margin:0 0 12px;font:700 15px/1.5 var(--sans)}
.side-foot p span{display:block;font:400 13px/1.5 var(--sans);color:#C9CCE0}
.cta{display:block;text-align:center;background:var(--gold);color:var(--navy);font:900 16px/1 var(--sans);padding:14px;border-radius:14px;text-decoration:none;transition:transform .15s}
.cta:hover{transform:translateY(-1px)}
.contact{margin-top:10px;font:12.5px/1.5 var(--sans);color:#C9CCE0}
.contact a{color:#fff}

/* 卡片 */
.card{position:absolute;left:20px;top:118px;bottom:20px;width:380px;overscroll-behavior:contain;background:var(--card);border-radius:24px;box-shadow:0 20px 50px rgba(12,19,65,.24);overflow:auto;z-index:5;animation:cardIn .32s var(--ease);scrollbar-width:thin}
.card[hidden]{display:none}
@keyframes cardIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.card-close{position:sticky;top:14px;float:right;margin:14px 14px -50px 0;background:rgba(255,255,255,.92);width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--navy);z-index:2}
.card-close:hover{border-color:var(--navy)}
.handle{position:sticky;top:0;width:100%;height:22px;border:0;background:var(--card);z-index:3}
.handle i{display:block;width:44px;height:5px;border-radius:3px;background:#D5CCBC;margin:8px auto 0}
.cb{padding:24px 26px 26px}
.cb .head{display:flex;gap:12px;align-items:center;padding-right:40px}
.cb .head h3{margin:4px 0 0}
.tile{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,#FFF6E2,#F6DFAE);color:var(--navy);box-shadow:0 3px 8px rgba(248,182,43,.25)}
.tile svg{width:26px;height:26px;stroke-width:1.7}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:0 0 16px}
.stats div{background:#fff;border-radius:14px;padding:10px 10px 10px 13px;box-shadow:inset 3px 0 0 var(--gold),0 2px 6px rgba(12,19,65,.06)}
.stats b{display:block;font:900 clamp(15px,1.4vw,20px)/1.1 var(--serif);color:var(--navy);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:4px;font:12px/1.4 var(--sans);color:var(--muted)}
.routemap{display:grid;grid-template-columns:1fr auto 1.2fr;align-items:center;gap:8px;margin:2px 0 16px;padding:10px;border-radius:14px;background:var(--chip)}
.routemap button{display:flex;align-items:center;gap:6px;width:100%;border:0;background:#fff;border-radius:10px;padding:7px 8px;margin:2px 0;font:700 12.5px/1.3 var(--sans);color:var(--navy);text-align:left}
.routemap button:hover{box-shadow:0 0 0 2px var(--gold)}
.routemap svg{width:18px;height:18px;flex:none}
.routemap .arr{font:900 18px/1 var(--sans);color:var(--gold-ink)}
.stats.three div{padding:9px 10px 10px 12px}
.stats.three span{margin:0 0 4px;font-size:11px;letter-spacing:.06em}
.stats.three b{font:900 15px/1.3 var(--sans)}
.status{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 12px;border-radius:12px;background:#EAF5EC;color:#2F6B45;font:700 13.5px/1.3 var(--sans)}
.status i{width:8px;height:8px;border-radius:50%;background:#3E9B62;box-shadow:0 0 0 3px rgba(62,155,98,.22)}
.prog{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:0 0 18px;font:700 11.5px/1 var(--sans);color:var(--muted)}
.prog::after{content:"";grid-column:2;grid-row:1;height:6px;border-radius:3px;background:var(--chip)}
.prog i{grid-column:2;grid-row:1;height:6px;border-radius:3px;background:var(--gold);z-index:1}
.sub-h{margin:0 0 8px;font:700 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.bubble{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:4px;padding:4px 10px 4px 5px;border-radius:999px;border:1.5px solid #F2DDB0;background:#FFFCF6;color:var(--navy);font:500 11.5px/1 var(--sans);white-space:nowrap;box-shadow:0 3px 10px rgba(12,19,65,.15)}
.bubble b{font-weight:700;color:var(--gold-ink)}
.bubble i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gold-soft)}
.bubble svg{width:12px;height:12px;stroke-width:2.2}
.dlg{position:absolute;left:calc(50% - var(--side)/2);bottom:22px;transform:translateX(-50%);width:min(680px,calc(100% - var(--side) - 40px));z-index:11;animation:dlgIn .3s var(--ease)}
.dlg[hidden]{display:none}
@keyframes dlgIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
.dlg-top{display:flex;align-items:center;gap:10px;margin:0 0 6px 6px}
#dlg-step{padding:5px 12px;border-radius:999px;background:var(--navy);color:var(--gold);font:700 12px/1 var(--sans);box-shadow:var(--shadow)}
.dots4{display:flex;gap:5px}
.dots4[hidden]{display:none}
.dots4 i{width:22px;height:6px;border-radius:3px;background:rgba(255,252,246,.85);box-shadow:0 1px 3px rgba(12,19,65,.2)}
.dots4 i.on{background:var(--gold)}
.dlg-box{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding:16px 18px 14px;border-radius:20px;background:rgba(255,252,246,.97);border:3px solid var(--navy);box-shadow:0 0 0 3px var(--gold-soft),0 18px 44px rgba(12,19,65,.3)}
.dlg-ava{grid-row:span 2;width:84px;height:84px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#FFF6E2,#F6DFAE);display:grid;place-items:center;border:2px solid var(--gold)}
.dlg-ava img{width:100%;height:100%;object-fit:cover}
.dlg-ava img.logo{object-fit:contain;padding:10px}
.dlg-ava svg{width:40px;height:40px;stroke-width:1.6;color:var(--navy)}
.dlg-name{display:inline-block;padding:3px 10px;border-radius:8px;background:var(--navy);color:#fff;font:700 13px/1.3 var(--sans);margin-bottom:6px}
#dlg-text{margin:0;min-height:3.4em;font:500 16.5px/1.75 var(--sans);color:var(--ink)}
.dlg-btns{grid-column:2;display:flex;justify-content:flex-end;gap:8px}
.dlg-btns button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 14px;font:700 13.5px/1 var(--sans);color:var(--navy);min-height:40px}
.dlg-btns .next{background:var(--navy);border-color:var(--navy);color:var(--gold);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateX(3px)}}
.dlg-btns button[hidden]{display:none}
body.theater .hud,body:has(.dlg:not([hidden])) .hud{display:none}
body:has(.card:not([hidden])) .dlg{left:calc(410px + (100% - var(--side) - 410px)/2);width:min(600px,calc(100% - var(--side) - 440px))}
body.theater .tag:not(.dock){opacity:.55}
.hero{margin:0;border-radius:24px 24px 0 0;overflow:hidden;aspect-ratio:9/5;background:linear-gradient(160deg,#CFE8EA,#F3EBDC)}
.hero img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.hero img[src]:not([src=""]){opacity:1}
.card .hero + .cb{padding-top:16px}
.lead.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:14px}
details.more{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
details.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 0;font:700 14px/1 var(--sans);color:var(--navy)}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"＋";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--chip);color:var(--gold-ink);font-weight:900}
details.more[open] summary::before{content:"－"}
.pinlist button{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 5px;border:0;border-radius:999px;background:var(--chip);font:700 13px/1 var(--sans);color:var(--navy);min-height:34px}
.pinlist button:hover,.pinlist button.on{background:var(--navy);color:#fff}
.pinlist button i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--gold);font:900 11px/1 var(--serif);font-style:normal}
.pinlist button.on i,.pinlist button:hover i{background:var(--gold);color:var(--navy)}
.dlg-quote{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--gold-soft);border-left:4px solid var(--gold);font:900 16px/1.6 var(--serif);color:var(--navy)}
.dlg-quote[hidden]{display:none}
.dlg-quote b{display:block;font:700 11px/1 var(--sans);letter-spacing:.14em;color:var(--gold-ink);margin-bottom:6px}
.fade{position:sticky;bottom:0;height:34px;margin-top:-34px;background:linear-gradient(rgba(255,252,246,0),var(--card));pointer-events:none}
mark{background:#FCE7A8;color:inherit;border-radius:3px;padding:0 1px}
.row.hot{background:#F6F0E4}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pin{pointer-events:auto;cursor:pointer;border:0}
.pin.on,.pin:hover{background:var(--navy);color:#fff}
.cb .kick{font:900 11px/1 var(--serif);letter-spacing:.18em;color:var(--gold-ink)}
.cb h3{margin:10px 0 6px;font:900 29px/1.25 var(--serif);color:var(--navy)}
.cb .tagline{margin:0 0 14px;font:700 15.5px/1.6 var(--sans);color:var(--navy)}
.cb .lead{margin:0;font:15px/1.85 var(--sans);color:#3A4152;padding:2px 0 2px 14px;border-left:3px solid var(--gold)}
.blk{margin-top:22px}
.blk h4{margin:0 0 10px;font:700 12.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.pinlist{display:flex;flex-wrap:wrap;gap:6px}
.pinlist span{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--chip);font:700 13px/1 var(--sans);color:var(--navy)}
.pinlist i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy);color:var(--gold);font:900 11px/1 var(--serif);font-style:normal}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trio div{background:var(--chip);border-radius:14px;padding:12px 10px}
.trio small{display:block;font:700 10.5px/1.2 var(--sans);letter-spacing:.04em;color:var(--gold-ink)}
.trio b{display:block;margin:6px 0 4px;font:900 18px/1.2 var(--serif);color:var(--navy)}
.trio span{font:13px/1.5 var(--sans);color:var(--muted)}
.pairs div{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.pairs div:first-child{border-top:0;padding-top:0}
.pairs b{flex:none;font:900 16px/1.6 var(--serif);color:var(--navy);min-width:4.2em}
.pairs span{font:14.5px/1.7 var(--sans);color:#3A4152}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:500 13.5px/1 var(--sans);color:var(--navy);background:#fff}
.olist{margin:0;padding:0;list-style:none;counter-reset:n}
.olist li{counter-increment:n;display:flex;gap:12px;padding:9px 12px;margin-bottom:6px;border-radius:12px;background:#fff;border:1px solid var(--line);font:14.5px/1.55 var(--sans)}
.olist li::before{content:counter(n,decimal-leading-zero);font:900 13px/1.75 var(--serif);color:var(--gold-ink);min-width:22px}
.blk .note{margin:0 0 8px;font:13px/1.6 var(--sans);color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font:13.5px/1.55 var(--sans)}
.tbl th{text-align:left;font:700 12px/1.4 var(--sans);color:var(--muted);padding:6px 8px;border-bottom:2px solid var(--navy)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td:first-child{color:var(--navy);font-weight:700}
.tbl.c3 td:first-child{white-space:nowrap}
.refs{margin:0;padding:0;list-style:none}
.refs li{font:13px/1.6 var(--sans);color:#4A5060;padding:5px 0 5px 14px;position:relative}
.refs li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:1px;background:var(--muted)}
.plain{margin:0;font:14.5px/1.8 var(--sans);color:#3A4152}
.stalls{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stalls div{background:var(--chip);border-radius:12px;padding:10px 12px}
.stalls b{display:block;font:700 14.5px/1.35 var(--sans);color:var(--navy)}
.stalls span{font:12.5px/1.4 var(--sans);color:var(--muted)}
.flows{display:grid;gap:7px}
.flow-chip{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 12px;transition:border-color .15s,box-shadow .15s}
.flow-chip:hover{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
.flow-chip b{flex:none;font:900 12px/1 var(--sans);background:var(--navy);color:var(--gold);border-radius:8px;padding:6px 7px}
.flow-chip span{font:700 14px/1.35 var(--sans);color:var(--navy)}
.flow-chip em{margin-left:auto;font:400 12px/1.4 var(--sans);font-style:normal;color:var(--muted);text-align:right}
.route{margin:0;padding:0;list-style:none}
.route li{display:grid;grid-template-columns:38px 1fr;gap:0 10px;padding:12px 0;border-top:1px solid var(--line);opacity:.4;transition:opacity .45s}
.route li.lit{opacity:1}
.route .dn{grid-row:span 3;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--gold);font:900 14px/34px var(--serif);text-align:center}
.route li.lit .dn{box-shadow:0 0 0 3px var(--gold-soft)}
.route .ph{font:700 11px/1 var(--sans);letter-spacing:.1em;color:var(--gold-ink)}
.route .rt{font:700 15.5px/1.5 var(--sans);color:var(--navy);margin:4px 0 6px}
.route .ab{display:grid;grid-template-columns:1fr 1fr;gap:8px;font:13px/1.55 var(--sans)}
.route .ab div{background:var(--chip);border-radius:10px;padding:8px 10px}
.route .ab small{display:block;font:700 11px/1.3 var(--sans);color:var(--muted);margin-bottom:3px}
.route li.loop .dn{background:var(--gold);color:var(--navy)}
.route li.loop .rt{grid-row:span 3;align-self:center;margin:0}
.card-actions{display:flex;gap:8px;margin-top:24px}
.card-actions a,.card-actions button{flex:1;text-align:center;border-radius:14px;padding:13px 10px;font:700 14.5px/1.25 var(--sans);text-decoration:none}
.card-actions .ask{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.card-actions .next{background:#fff;color:var(--navy);border:1px solid var(--line)}
.card-actions .next:hover{border-color:var(--navy)}

/* 提示、導覽、載入 */
.toast{position:absolute;left:calc(50% - var(--side)/2);bottom:92px;transform:translate(-50%,20px);padding:11px 18px;border-radius:999px;background:var(--navy);color:#fff;font:700 14px/1.3 var(--sans);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:9;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.intro{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(12,19,65,.28);backdrop-filter:blur(3px);padding:16px}
.intro[hidden]{display:none}
.intro-box{width:min(460px,100%);background:var(--card);border-radius:24px;padding:28px 28px 22px;box-shadow:0 24px 60px rgba(12,19,65,.3);animation:cardIn .3s var(--ease)}
.intro-box h2{margin:12px 0 10px;font:900 24px/1.35 var(--serif);color:var(--navy)}
.intro-box p{margin:0;font:15px/1.8 var(--sans);color:#3A4152}
.intro-foot{display:flex;align-items:center;gap:8px;margin-top:22px}
.dots{display:flex;gap:6px;margin-right:auto}
.dots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .25s,background .25s}
.dots i.on{width:22px;background:var(--gold)}
.intro-foot button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 16px;font:700 14px/1 var(--sans);color:var(--navy)}
.intro-foot .next{background:var(--navy);border-color:var(--navy);color:#fff}
.loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--paper);color:var(--navy);transition:opacity .6s}
.loading img{height:40px}
.loading b{font:900 30px/1 var(--serif);letter-spacing:.08em}
.loading span{font:14px var(--sans);color:var(--muted)}
.loading.done{opacity:0;pointer-events:none}

@media (max-width:1180px) and (min-width:901px){
  .seg.toggles span{display:none}
  .seg.toggles button{min-width:40px}
}
@media (max-width:900px){
  :root{--side:0px}
  .mob{display:flex!important}
  .hud{display:none}
  .brand{left:12px;top:12px;padding:9px 12px 9px 10px;gap:10px;border-radius:16px}
  .brand .logo img{height:22px}
  .brand-r{padding-left:10px}
  .brand h1{font-size:16px}
  .brand p{font-size:11px}
  .nav{top:12px;right:12px;flex-direction:column;gap:7px;z-index:9}
  body:has(.card:not([hidden])) .brand{display:none}
  .nav button{width:52px;height:50px;padding:4px 0 0;font-size:10.5px;border-radius:13px;flex-direction:column;justify-content:center;gap:3px;line-height:1}
  .nav button svg{width:16px;height:16px}
  .nav #btn-route{font-size:0}
  .nav #btn-route::after{content:"航道";font-size:10.5px}
  .nav #btn-help{width:52px;padding:0;justify-content:center;font-size:16px}
  .hero{aspect-ratio:16/6}
  body:has(.card:not([hidden])) .dlg,.dlg{left:8px;right:8px;width:auto;transform:none;bottom:calc(10px + env(safe-area-inset-bottom));animation:none}
  body:has(.card:not([hidden])) .dlg{bottom:calc(40vh + 8px)}
  .dlg-box{grid-template-columns:auto 1fr;padding:12px;gap:4px 12px}
  .dlg-ava{width:60px;height:60px;border-radius:12px}
  #dlg-text{font-size:15px;min-height:4.6em}
  .dlg-btns{grid-column:1/-1}
  .sidebar{border:0;transform:translateY(100%);transition:transform .35s var(--ease);z-index:10;width:100%;top:30vh;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(12,19,65,.25)}
  body.list-open .sidebar{transform:none}
  .side-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;color:var(--navy);align-items:center;justify-content:center}
  .side-head{padding:20px 16px 0}
  .side-head h2{font-size:20px;padding-right:44px}
  .facts{display:none}
  .search{font-size:16px}
  .side-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .side-foot p,.contact{display:none}
  .cta{padding:12px}
  .card{left:8px;right:8px;top:auto;bottom:0;width:auto;height:58vh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom);z-index:8;transition:height .32s var(--ease);animation:sheetIn .32s var(--ease)}
  .card[data-snap="third"]{height:40vh}
  .card[data-snap="third"] .handle::after{content:"往上拉看更多";display:block;font:700 11px/1 var(--sans);color:var(--muted);margin-top:4px}
  .card[data-snap="third"] .handle{height:34px}
  .card[data-snap="half"]{height:58vh}
  .card[data-snap="full"]{height:88vh}
  @keyframes sheetIn{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .card-close{position:absolute;top:10px;right:12px;margin:0}
  .cb{padding:8px 18px 24px}
  .cb h3{font-size:24px;padding-right:40px}
  .tag{font-size:12px;padding:5px 10px 5px 8px}
  .tag.small{font-size:11px}
  .pin{font-size:12px}
  .toast{left:50%;bottom:calc(16px + env(safe-area-inset-bottom))}
  body:has(.card:not([hidden])) .toast{bottom:calc(60vh + 12px)}
  .hud{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}