:root{--navy:#07182e;--panel:#0c2340;--text:#f5f8ff;--muted:#9fb1ca;--cyan:#3de0c5;--shadow:0 14px 40px rgba(3,12,26,.28)}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;background:var(--navy);color:var(--text)}button,input,select{font:inherit}.app{height:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.topbar{z-index:1000;display:flex;align-items:center;gap:18px;padding:13px 18px;background:rgba(7,24,46,.97);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 5px 24px rgba(0,0,0,.16)}
.brand{display:flex;align-items:center;gap:12px;min-width:330px}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#37dec8,#2866df);font-weight:950;font-size:19px;letter-spacing:-.08em;box-shadow:0 8px 22px rgba(55,222,200,.28),inset 0 0 0 1px rgba(255,255,255,.18)}.brand h1{font-size:22px;letter-spacing:-.045em;margin:0}.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}
.search{position:relative;display:block;width:min(360px,36vw)}.search span{position:absolute;left:13px;top:7px;color:var(--muted);font-size:24px}.search input{width:100%;height:42px;border:1px solid rgba(255,255,255,.14);background:#102947;color:white;border-radius:11px;padding:0 14px 0 39px;outline:none}.search input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(61,224,197,.12)}.search input::placeholder{color:#879ab5}.period{margin-left:auto;min-width:max-content;text-align:right}.period strong{font-size:14px;display:block}.period span{font-size:12px;color:var(--muted)}
main{min-height:0;display:grid;grid-template-columns:324px 1fr}.sidebar{position:relative;z-index:800;min-height:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid rgba(255,255,255,.09);box-shadow:10px 0 32px rgba(0,0,0,.12)}
.summary{padding:17px 16px 15px;border-bottom:1px solid rgba(255,255,255,.08)}.eyebrow{font-size:12px;color:var(--cyan);font-weight:900;letter-spacing:.08em}.summary-title{display:flex;align-items:end;justify-content:space-between;gap:8px}.summary h2{font-size:22px;letter-spacing:-.05em;margin:5px 0 13px}.summary-title>span{font-size:11px;color:var(--muted);margin-bottom:15px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stats>div{padding:10px;background:rgba(255,255,255,.055);border-radius:10px}.stats span{font-size:11px;color:var(--muted)}.stats strong{font-size:14px;display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats>div:first-child strong{color:#ff7c88}.stats>div:last-child strong{color:#79a8ff}
.line-filter{display:flex;flex:0 0 auto;gap:6px;overflow-x:auto;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.08);scrollbar-width:none}.line-filter::-webkit-scrollbar{display:none}.chip{border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--muted);border-radius:99px;padding:7px 11px;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}.chip:hover{border-color:#fff}.chip.active{background:#fff;color:#10213b;border-color:#fff}
.list-head{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;padding:10px 14px 5px;color:var(--muted);font-size:12px;font-weight:700}.list-head select{border:0;background:transparent;color:#dbe7f7;font-size:12px;outline:none}.list-head option{color:#111}.station-list{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 8px 10px}.station-row{width:100%;border:0;background:transparent;color:white;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:10px 9px;border-bottom:1px solid rgba(255,255,255,.06);border-radius:9px;text-align:left;cursor:pointer}.station-row:hover,.station-row.active{background:rgba(255,255,255,.08)}.rank{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--muted);font-size:12px;font-weight:900}.station-name{font-size:14px;font-weight:900}.station-lines{display:block;margin-top:3px;font-size:11px;color:var(--muted)}.station-number{text-align:right;font-size:13px;font-weight:900}.station-number small{display:block;margin-top:3px;font-size:10px;color:var(--muted);font-weight:500}
.map-wrap{position:relative;min-width:0}.map-wrap,#map{height:100%;width:100%}#map{background:#dbe7ef}.leaflet-container{font-family:inherit}.leaflet-control-zoom a{background:#0b2340;color:#fff;border-color:#294565}.leaflet-control-zoom a:hover{background:#14375d;color:#fff}.leaflet-control-attribution{font-size:10px}
.station-div-icon{background:none!important;border:0!important}.ridership-label{position:relative;width:var(--label-w);height:var(--label-h);overflow:hidden;border:1px solid rgba(19,36,61,.72);border-radius:7px;background:#fff;box-shadow:0 3px 10px rgba(10,25,48,.28);color:#071426;cursor:pointer;transition:transform .14s,box-shadow .14s;transform-origin:center bottom;font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.ridership-label:before{content:"";display:block;height:var(--stripe);background:var(--route-stripe,var(--route))}.ridership-label:hover,.ridership-label.selected{transform:scale(1.06);border-color:var(--route);box-shadow:0 5px 15px rgba(5,18,38,.4),0 0 0 2px color-mix(in srgb,var(--route) 72%,white);z-index:20}.label-title{height:var(--title-h);padding:1px clamp(1px,3%,5px) 0;display:flex;align-items:center;justify-content:center;background:#fff;color:#071426;font-size:var(--title-f);line-height:1;font-weight:950;letter-spacing:-.055em;border-bottom:1px solid #d8dee8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label-values{height:calc(var(--label-h) - var(--title-h) - var(--stripe) - 2px);padding:var(--value-pad) clamp(1px,4%,5px) 1px;background:#f7f9fc;font-variant-numeric:tabular-nums}.label-values span{height:50%;display:flex;align-items:center;justify-content:space-between;gap:1px;white-space:nowrap;line-height:1}.label-values b{font-size:var(--key-f);letter-spacing:-.06em}.label-values span:first-child b,.label-values span:first-child em{color:var(--board-color)}.label-values span:nth-child(2) b,.label-values span:nth-child(2) em{color:var(--alight-color)}.label-values em{font-size:var(--value-f);font-style:normal;font-weight:950;letter-spacing:-.065em}.label-values .no-data{height:100%;display:flex;justify-content:center;font-size:var(--no-data-f);color:#637086;font-weight:800}.ridership-label:after{display:none}
.leaflet-tooltip.commute-tooltip{width:248px;padding:0;border:0;border-radius:12px;background:rgba(7,24,46,.97);box-shadow:0 12px 34px rgba(3,12,26,.42);color:#fff}.leaflet-tooltip.commute-tooltip:before{border-right-color:rgba(7,24,46,.97)}.commute-card{padding:12px 13px;font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}.commute-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.commute-head>span>strong{display:block;font-size:14px}.commute-head>span>small{display:block;margin-top:2px;color:#9fb1ca;font-size:11px}.traffic-grade{display:flex;flex:0 0 45px;height:45px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:11px;color:#fff;font-size:22px!important;font-weight:950;line-height:.9;box-shadow:0 5px 14px rgba(0,0,0,.24)}.traffic-grade small{margin-bottom:3px;color:inherit;font-size:8px;font-weight:850;line-height:1}.grade-s{background:#d92f4b}.grade-a{background:#2865d7}.grade-b{background:#f4c430;color:#19243a}.grade-c{background:#239b62}.commute-route{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid rgba(255,255,255,.09);font-size:12px}.commute-route>span{color:#dce8f7}.commute-route>b{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}.travel-time{font-size:12px;font-weight:950;text-shadow:0 0 10px currentColor}.time-red{color:#ff667b}.time-blue{color:#79a9ff}.time-yellow{color:#ffd45d}.time-green{color:#4fd28c}.commute-route em{margin-left:4px;color:#3de0c5;font-size:10px;font-style:normal}.commute-card p{margin:8px 0 0;color:#8fa3be;font-size:9px;line-height:1.35}
.map-guide,.opacity-control,.data-note,.recenter{position:absolute;z-index:700;background:rgba(7,24,46,.94);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);color:white}.map-guide{left:16px;top:16px;border-radius:12px;padding:10px 12px}.map-guide strong{display:block;font-size:13px}.map-guide>span{display:block;color:var(--muted);font-size:11px;margin:2px 0 7px}.map-guide div{display:flex;align-items:center;gap:7px;font-size:11px}.map-guide>small{display:block;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.13);color:#cbd6e6;font-size:10px}.map-guide>small b{color:#ffd166;font-size:12px}.map-guide i{width:16px;height:12px;background:#ef7c1c;border:2px solid #30270a}.map-guide div b:first-of-type{color:#ff8a94}.map-guide div b:last-of-type{color:#7eacff}.opacity-control{left:16px;top:127px;width:176px;border-radius:12px;padding:9px 11px}.opacity-control label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:850}.opacity-control output{color:var(--cyan);font-variant-numeric:tabular-nums}.opacity-control input{display:block;width:100%;height:16px;margin:5px 0 0;accent-color:var(--cyan);cursor:pointer}.recenter{right:14px;top:14px;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer}.data-note{right:14px;bottom:14px;border-radius:8px;padding:7px 9px;font-size:10px;color:#cfdbeb}.loading,.error{padding:22px;color:var(--muted);font-size:13px;line-height:1.6}.error{color:#ff9ba4}
.demand-control{position:absolute;z-index:700;left:16px;top:171px;width:176px;padding:9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(7,24,46,.94);box-shadow:var(--shadow);color:#fff}.heat-toggle,.heat-options>label{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:850}.heat-toggle{cursor:pointer}.heat-toggle input{width:31px;height:17px;margin:0;accent-color:var(--cyan);cursor:pointer}.heat-options{padding-top:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,.12)}.heat-options[hidden]{display:none}.heat-options output{color:var(--cyan);font-variant-numeric:tabular-nums}.heat-options>input{display:block;width:100%;height:16px;margin:5px 0 0;accent-color:var(--cyan);cursor:pointer}.heat-legend{display:grid;gap:4px;margin-top:7px;font-size:10px;font-weight:800}.heat-legend span{display:flex;align-items:center;gap:6px}.heat-legend span:before{content:"";width:25px;height:6px;border-radius:99px}.heat-legend .residential:before{background:linear-gradient(90deg,#ffd7dd,#d7193f,#830018)}.heat-legend .business:before{background:linear-gradient(90deg,#dbe7ff,#275fc7,#103583)}.heat-options small{display:block;margin-top:7px;color:var(--muted);font-size:9px;line-height:1.35}
@media(max-width:820px){.topbar{padding:10px 11px;gap:9px;flex-wrap:wrap}.brand{min-width:0;flex:1}.brand-icon{width:37px;height:37px;border-radius:11px;font-size:16px}.brand h1{font-size:18px}.brand p{display:none}.period strong{font-size:12px}.period span{font-size:10px}.search{order:3;width:100%}.search input{height:39px}main{display:block;position:relative}.sidebar{position:absolute;left:8px;right:8px;bottom:8px;height:215px;border:1px solid rgba(255,255,255,.14);border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.summary{padding:9px 12px}.eyebrow,.stats{display:none}.summary h2{font-size:16px;margin:0}.summary-title>span{margin:0}.line-filter{padding:7px 9px}.list-head{display:none}.station-list{display:flex;overflow-x:auto;overflow-y:hidden;padding:3px 6px}.station-row{min-width:175px;height:82px;border-bottom:0;border-right:1px solid rgba(255,255,255,.07)}.map-wrap{height:100%}.map-guide{left:9px;top:9px;padding:7px 9px}.map-guide>span,.map-guide div{display:none}.opacity-control{left:9px;top:68px;width:145px;padding:7px 9px}.opacity-control input{margin-top:3px}.demand-control{left:9px;top:124px;width:145px;padding:7px 9px}.heat-options small{display:none}.recenter{right:9px;top:9px}.data-note{display:none}}