/* 트래픽 캐스트 — whose.one 지도 화면의 크림·민트 톤을 이어받는다 */
:root{font-family:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#294c50;background:#ebf5ee;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0}
a{color:inherit;text-decoration:none}
#map{position:fixed;inset:0}
header{position:absolute;top:22px;left:26px;right:26px;display:flex;align-items:center;gap:20px;pointer-events:none}
header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px}
.brand>b{background:#25b59f;color:white;border-radius:16px;font-size:26px;padding:8px 12px;box-shadow:0 5px 0 #1b9182;font-weight:900;letter-spacing:-1px}
.brand span{font-size:23px;font-weight:900;letter-spacing:-1px}
.brand small{display:block;font-size:10px;letter-spacing:1px;margin-top:3px;color:#648986;font-weight:600}
.stage{font-size:9px;letter-spacing:2px;border:1px solid #85b5aa;border-radius:20px;padding:8px 12px;background:#f7fcf0aa}
.panel{position:absolute;left:26px;top:100px;width:270px;background:#fffdf2f2;padding:22px 24px;border-radius:24px;border:1px solid white;box-shadow:0 14px 40px #315f5a15}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.8px;color:#3fa797}
.panel h1{font-size:34px;letter-spacing:-1.5px;margin:10px 0 6px}
.panel p{font-size:12px;line-height:1.8;color:#698784;margin:6px 0}
.panel .fine{font-size:10px;color:#8ba198;line-height:1.6}
.panel-toggle{display:none;position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:10px;background:#eef5ea;font-size:14px}
.panel.collapsed>*:not(.panel-toggle):not(.eyebrow):not(h1){display:none}
.panel.collapsed .panel-toggle{transform:rotate(180deg)}
.legend{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 6px}
.legend button{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:5px 8px;border-radius:9px;background:#f1f5ea;color:#4d6b64;opacity:.45}
.legend button[aria-pressed=true]{opacity:1}
.legend button.live{outline:2px solid #ffffff;box-shadow:0 0 0 1.5px #29b99d55}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend small{color:#8ba198;font-weight:500}
.map-actions{position:absolute;right:26px;top:100px;display:grid;gap:6px}
.map-actions button{background:#fffdf4ef;border:1px solid white;width:46px;height:46px;border-radius:15px;font-size:18px;box-shadow:0 4px 13px #30585112}
.map-actions button:nth-child(n+3){font-size:10px;font-weight:700}
.map-actions button[aria-pressed=true]{background:#d2eee1}
footer{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#fffdf2ed;border:1px solid white;border-radius:18px;padding:12px 20px;min-width:320px;max-width:90vw;text-align:center;box-shadow:0 7px 25px #315f5a12;display:flex;align-items:center;justify-content:center;gap:10px}
footer b{font-size:12px}
footer span{font-size:10px;color:#73948b}
.live-dot{background:#c9d6cf;width:8px;height:8px;border-radius:50%;flex:none;transition:background .4s}
.live-dot.on{background:#29b99d;box-shadow:0 0 0 4px #29b99d22}
.live-dot.stale{background:#ffbd75}
.maplibregl-ctrl-attrib{font-size:10px!important;background:#fffdf4dd!important}
.station-tip{font:700 11px 'Malgun Gothic',sans-serif;color:#2f5c56;background:#fffdf2f0;border:1px solid white;padding:6px 10px;border-radius:12px;pointer-events:none;box-shadow:0 4px 12px #2c6a541a;white-space:nowrap}
.station-tip small{display:block;font-weight:500;color:#7c9a92;font-size:10px}
@media (max-width:760px){
  .panel-toggle{display:block}
  header{left:14px;right:14px;top:14px}
  .brand span{font-size:18px}.stage{display:none}
  .panel{left:14px;right:14px;width:auto;top:auto;bottom:80px;padding:14px 16px;border-radius:18px}
  .panel h1{font-size:24px;margin:6px 0 2px}
  .panel .fine:last-child{display:none}
  .map-actions{top:80px;right:14px}
  footer{bottom:14px;min-width:0;width:calc(100% - 28px);padding:10px 14px}
}