:root{--ink:#163a32;--muted:#70807b;--paper:#fbfaf6;--line:#e3e4de;--green:#1f8168;--green2:#2fa884;--gold:#e5a93f;--shadow:0 18px 55px rgba(22,58,50,.15)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans TC",sans-serif;color:var(--ink);background:#e9eee9}button{font:inherit;color:inherit}.shell{height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 430px;overflow:hidden}.map-panel{position:relative;min-width:0;background:#d7e6da;overflow:hidden}.map-stage{position:absolute;inset:0;overflow:hidden}.map-stage>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .55s cubic-bezier(.2,.75,.25,1);transform:scale(1.02)}.brand-card{position:absolute;z-index:5;left:22px;top:22px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.brand-card strong{display:block;font-size:18px;letter-spacing:.08em}.brand-card small{display:block;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-top:2px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:white;font-weight:900;font-size:21px}.map-actions{position:absolute;z-index:5;right:20px;top:22px;display:flex;gap:8px}.map-actions button{border:1px solid rgba(22,58,50,.15);background:rgba(255,255,255,.9);border-radius:999px;padding:10px 15px;box-shadow:0 8px 24px rgba(22,58,50,.11);cursor:pointer}.map-actions button:hover{background:white}.hotspots{position:absolute;inset:0}.hotspot{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;cursor:pointer;z-index:3}.hotspot::after{content:"";display:block;width:14px;height:14px;margin:5px auto 0;border-radius:50%;background:var(--gold);border:3px solid white;box-shadow:0 2px 12px rgba(0,0,0,.35);transition:.2s}.hotspot-label{display:block;white-space:nowrap;padding:7px 11px;border-radius:9px;background:rgba(255,255,255,.93);font-weight:700;font-size:13px;box-shadow:0 5px 18px rgba(19,45,38,.22);border:1px solid rgba(22,58,50,.12);transition:.2s}.hotspot:hover .hotspot-label,.hotspot.active .hotspot-label{background:var(--ink);color:white;transform:translateY(-2px)}.hotspot.active::after{background:#ff7b3a;transform:scale(1.4)}.hotspots.labels-off .hotspot-label{opacity:0;pointer-events:none}.map-hint{position:absolute;z-index:5;left:22px;bottom:20px;padding:9px 14px;border-radius:999px;background:rgba(20,52,45,.78);color:white;font-size:12px;backdrop-filter:blur(8px)}.map-hint span{color:#e9c766;margin:0 5px}.guide-panel{position:relative;z-index:8;background:var(--paper);padding:34px 30px 22px;overflow:auto;border-left:1px solid white}.eyebrow{font-size:11px;letter-spacing:.25em;color:var(--green);font-weight:700}.guide-panel h1{font-size:34px;margin:5px 0 4px;letter-spacing:.08em}.lead{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 22px}.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.filters button{border:1px solid var(--line);background:white;border-radius:10px;padding:9px 3px;cursor:pointer;font-size:14px}.filters button.active{background:var(--green);border-color:var(--green);color:white}.venue-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.venue{display:flex;align-items:center;gap:10px;min-height:70px;text-align:left;border:1px solid var(--line);background:white;border-radius:13px;padding:11px;cursor:pointer;transition:.2s}.venue:hover,.venue.active{transform:translateY(-2px);border-color:#9ac8ba;box-shadow:0 8px 20px rgba(22,58,50,.08)}.venue.active{background:#eff8f4}.venue-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef4ed;font-size:18px;flex:0 0 auto}.venue strong{display:block;font-size:14px;line-height:1.35}.venue small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.detail-card{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,#f3f7f2);box-shadow:0 12px 28px rgba(22,58,50,.07)}.detail-tag{display:inline-block;color:var(--green);background:#e6f4ef;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:700}.detail-card h2{font-size:22px;margin:8px 0}.detail-card p{font-size:13px;color:#5d6c67;line-height:1.75;margin:0}.detail-meta{margin-top:12px;padding-top:12px;border-top:1px dashed #ccd8d2;color:var(--muted);font-size:11px}.prototype-note{text-align:center;color:#9aa49f;font-size:10px;line-height:1.6;margin:16px 0 0}
@media(max-width:1000px){.shell{grid-template-columns:1fr;height:auto;min-height:100vh}.map-panel{height:62vh;min-height:480px}.guide-panel{border-left:0;border-top:1px solid white}.venue-list{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.map-panel{height:56vh;min-height:420px}.brand-card{left:12px;top:12px;padding:9px 12px 9px 9px}.brand-mark{width:34px;height:34px}.brand-card strong{font-size:15px}.brand-card small{display:none}.map-actions{right:10px;top:66px}.map-actions button{padding:8px 11px;font-size:12px}.map-hint{left:12px;bottom:12px}.hotspot-label{font-size:11px;padding:5px 8px}.guide-panel{padding:25px 18px}.guide-panel h1{font-size:28px}.venue-list{grid-template-columns:1fr 1fr}.venue{min-height:64px;padding:9px}.venue-icon{display:none}}
.road-layer{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .25s}.road-layer.hidden{opacity:0}.road-label{position:absolute;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:rgba(18,48,41,.86);color:white;border:1px solid rgba(255,255,255,.6);box-shadow:0 4px 14px rgba(0,0,0,.2);font-size:12px;font-weight:700;letter-spacing:.12em;white-space:nowrap;backdrop-filter:blur(6px)}.road-label.vertical{writing-mode:vertical-rl;padding:10px 6px}.gate-mark{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;background:#fff3d2;color:#6d5017;border:1px solid #e2b54b;font-size:11px;font-weight:700;white-space:nowrap}.gate-mark::before{content:"◆";color:#e0a62d}
.brand-mark img{width:32px;height:32px;object-fit:contain}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:-5px -5px 14px}.detail-gallery img{width:100%;height:120px;object-fit:cover;border-radius:11px;background:#e7ece8}.detail-gallery img:only-child{grid-column:1/-1;height:178px}.photo-status{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:var(--green);font-size:11px;font-weight:700}.photo-status.missing{color:#9b7a39}.detail-card.has-photo{padding-top:5px}.detail-card.has-photo .detail-tag{margin-top:0}.venue-photo-dot{width:6px;height:6px;border-radius:50%;background:var(--green2);display:inline-block;margin-left:5px;vertical-align:middle}
@media(max-width:650px){.detail-gallery img{height:100px}.detail-gallery img:only-child{height:150px}}
.detail-gallery>a{display:block}.detail-gallery>a:only-child{grid-column:1/-1}.detail-gallery>a:not(:only-child) img{height:120px}.detail-gallery>a:only-child img{height:178px}@media(max-width:650px){.detail-gallery>a:not(:only-child) img{height:100px}.detail-gallery>a:only-child img{height:150px}}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:24px;border-radius:13px;background:#e8eeea}.mode-switch button{border:0;border-radius:9px;padding:10px 8px;background:transparent;font-weight:700;cursor:pointer}.mode-switch button.active{background:white;color:var(--green);box-shadow:0 4px 12px rgba(22,58,50,.1)}
.pickup-filters{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:13px}.pickup-filters button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);background:white;border-radius:9px;padding:9px 5px;font-size:12px;cursor:pointer}.pickup-filters button:last-child{grid-column:1/-1}.pickup-filters button span{font-size:16px}.pickup-filters button.active{background:#173d34;color:white;border-color:#173d34}.direction-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:11px}.direction-legend span{padding:5px 8px;border-radius:999px;background:white;border:1px solid var(--line)}.direction-legend .guard::before{content:'👮';margin-right:4px}.pickup-info{min-height:72px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(22,58,50,.07)}.pickup-info strong,.pickup-info span{display:block}.pickup-info span{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.6}.pickup-notes{margin-top:14px;padding:16px;border-radius:14px;background:#f0f5f1}.pickup-notes h2{font-size:16px;margin:0 0 8px}.pickup-notes ul{margin:0;padding-left:20px;color:#5d6c67;font-size:12px;line-height:1.75}
.pickup-layer{position:absolute;inset:0;z-index:4;display:none;pointer-events:none}.pickup-mode .pickup-layer{display:block}.pickup-mode .hotspots{display:none}.pickup-mode .road-layer .gate-mark:not(.staff-gate){display:none}.pickup-layer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.pickup-focus-shade{transition:opacity .25s}.route{fill:none;stroke-width:.65;stroke-dasharray:2 1.2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px white)}.route.west{stroke:#e5483f}.route.east{stroke:#2779db}.route-arrow.west{fill:#e5483f}.route-arrow.east{fill:#2779db}.pickup-zone[hidden],.pickup-layer [hidden]{display:none}.pickup-zone{position:absolute;transform:translate(-50%,-50%);width:max(42px,var(--zone-width));border:0;background:transparent;pointer-events:auto;cursor:pointer;transition:.2s;padding:0}.pickup-zone::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:18px;height:10px;transform:translateY(-50%);border:2px solid rgba(255,255,255,.92);border-radius:999px;background:rgba(169,238,247,.46);box-shadow:0 2px 8px rgba(0,0,0,.2)}.pickup-zone:hover{transform:translate(-50%,-50%) scale(1.1);z-index:6}.pickup-symbol{display:grid;place-items:center;width:38px;height:38px;margin:auto;border:3px solid white;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.32);font-size:22px;transform:translateY(var(--icon-shift))}.pickup-symbol-label{display:block;width:max-content;max-width:90px;margin:3px auto 0;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.9);color:#173d34;font-size:8px;font-weight:800;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.16);transform:translateY(var(--icon-shift))}.pickup-zone.car .pickup-symbol{background:#a9eef7}.pickup-zone.scooter .pickup-symbol{background:#c7f7a8}.pickup-zone.scooter::before{background:rgba(199,247,168,.5)}.pickup-zone.walk .pickup-symbol{background:#fff0b8}.pickup-zone.walk::before{background:rgba(255,240,184,.52)}.pickup-zone.shuttle .pickup-symbol{background:#ffe56d}.pickup-zone.shuttle::before{background:rgba(255,229,109,.5)}.pickup-zone.warning .pickup-symbol{background:#ffd2cf}.pickup-zone.warning::before{background:rgba(255,98,88,.48);border-color:#fff}.pickup-gate-label{position:absolute;transform:translate(-50%,-50%);padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.95);color:#6d5017;border:1px solid #e2b54b;box-shadow:0 4px 13px rgba(0,0,0,.2);font-size:8px;font-weight:800;white-space:nowrap}.guard-point{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:3px;padding:3px 7px 3px 4px;border-radius:999px;background:rgba(255,255,255,.94);color:#173d34;border:2px solid #e5483f;box-shadow:0 4px 13px rgba(0,0,0,.26);font-size:9px;font-weight:900;white-space:nowrap}.guard-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e5483f;font-size:15px}.pickup-mode .map-stage>img{filter:saturate(.8) brightness(.9)}
.gate-mark.staff-gate{background:#ffe5df;color:#8c271d;border-color:#dc7769}.staff-only-mark{position:absolute;transform:translate(-50%,-50%);padding:7px 10px;border-radius:9px;background:#9d2d25;color:white;border:2px solid white;box-shadow:0 5px 16px rgba(0,0,0,.25);font-size:10px;font-weight:900;white-space:nowrap}
@media(max-width:650px){.mode-switch{margin-bottom:18px}.pickup-filters{grid-template-columns:repeat(2,1fr)}.pickup-symbol{width:32px;height:32px;font-size:18px}.pickup-symbol-label{font-size:7px}.guard-point{padding:2px 5px 2px 3px;font-size:7px}.guard-icon{width:20px;height:20px;font-size:12px}}

.guide-panel>.brand-card{position:static;display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 12px;border-radius:16px;background:#eef4ed;border:1px solid var(--line);box-shadow:none;backdrop-filter:none}.cursor-venue-tooltip{position:absolute;z-index:9;pointer-events:none;padding:7px 11px;border-radius:9px;background:rgba(22,58,50,.94);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 7px 20px rgba(0,0,0,.28);transform:translateZ(0)}.cursor-venue-tooltip[hidden]{display:none}@media(max-width:650px){.guide-panel>.brand-card{left:auto;top:auto;padding:9px 10px}.guide-panel>.brand-card small{display:block}.map-actions{top:12px}}

/* Compact default typography: approximately 50% of the original text scale. */
html,body{font-size:10px}
.brand-card strong{font-size:11px}.brand-card small{font-size:6px}
.map-actions button{font-size:10px}.hotspot-label{font-size:8px}.map-hint{font-size:7.5px}
.eyebrow{font-size:7px}.guide-panel h1{font-size:20px}.lead{font-size:9px}
.filters button{font-size:9px}.venue strong{font-size:9px}.venue small{font-size:7px}
.detail-tag{font-size:7px}.detail-card h2{font-size:14px}.detail-card p{font-size:8px}
.detail-meta,.photo-status{font-size:7px}.prototype-note{font-size:6px}
.road-label{font-size:7.5px}.gate-mark{font-size:7px}.mode-switch button{font-size:10px}
.pickup-filters button{font-size:7.5px}.direction-legend{font-size:7px}
.pickup-info span{font-size:7.5px}.pickup-notes h2{font-size:10px}.pickup-notes ul{font-size:7.5px}
.pickup-symbol-label{font-size:7px}.guard-point{font-size:7px}.staff-only-mark{font-size:6.5px}
.cursor-venue-tooltip{font-size:8px}
@media(max-width:650px){.brand-card strong{font-size:9px}.map-actions button{font-size:7.5px}.hotspot-label{font-size:7px}.guide-panel h1{font-size:17px}.pickup-symbol-label{font-size:6px}.guard-point{font-size:6px}}

/* Map-first layout: keep the information rail compact and reveal details on demand. */
@media(min-width:1001px){.shell{grid-template-columns:minmax(0,1fr) clamp(270px,20vw,320px)}.guide-panel{padding:24px 18px 18px}}
.guide-intro[hidden],.detail-card[hidden]{display:none}
.intro-cue{margin-top:14px;padding:12px;border:1px dashed #9ac8ba;border-radius:12px;background:#eff8f4;color:var(--green);font-size:8.5px;font-weight:700;text-align:center}
#campusGuide .prototype-note{margin-top:14px}
.staff-gate{display:none}.pickup-mode .staff-gate{display:flex}
.hotspot[data-id="pond"]{display:flex;flex-direction:column-reverse;align-items:center}.hotspot[data-id="pond"]::after{margin:0 auto 5px}

/* Compact map labels without location dots. */
.hotspot::after{display:block!important;width:4px;height:4px;margin:3px auto 0;border-width:1px}
.hotspot-label{padding:3px 6px;border-radius:6px}
.hotspot:hover .hotspot-label,.hotspot.active .hotspot-label{background:#ffd84d;color:#26352f;transform:translateY(-1px);border-color:#d6a91e}
.hotspot[data-id="pond"]{display:block}.hotspot[data-id="pond"]::after{margin:3px auto 0}