*{box-sizing:border-box}html,body{margin:0;min-width:320px;height:100%;font-family:'Pretendard','Malgun Gothic',system-ui,sans-serif;color:#20382f;background:#f6f8f7}body{display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #286be8;outline-offset:3px}[hidden]{display:none!important}
.toolbar{height:76px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dde5df;background:#fff;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:42px;height:46px;background:#17865e;border-radius:13px;color:white;font-size:44px;font-weight:bold;line-height:1}.brand h1{font-size:22px;letter-spacing:-.9px;margin:0}.brand p{margin:4px 0 0;color:#7a8c82;font-size:12px}.sync{text-align:right;font-size:13px;color:#61756a;line-height:1.6}.sync span{display:block;font-weight:650}.sync time{font-size:12px;color:#798a80}.sync .fresh{color:#118559}
main{display:flex;flex:1;min-height:0;padding:16px;gap:16px;max-width:1500px;width:100%;margin:auto}.map-area{position:relative;flex:1;min-width:0;display:flex;justify-content:center;align-items:center;background:#eaf0e7;border:1px solid #dfe6dc;border-radius:16px;overflow:hidden}.map-frame{position:relative;flex:none;aspect-ratio:6/7;max-width:100%;max-height:100%}#map-image{display:block;width:100%;height:100%;object-fit:contain}#markers{position:absolute;inset:0}.ev-marker{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;z-index:1;border-radius:50%}.marker-light{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#53606b;border:2px solid white;box-shadow:0 1px 5px #18374a40;pointer-events:none}.marker-light svg{width:17px;height:17px;fill:#fff}.availability-on .marker-light{background:#159667}.availability-unknown .marker-light{background:#fff;border-color:#354f68;box-shadow:0 0 0 2px #fff,0 2px 5px #18374a40}.availability-unknown svg{fill:#354f68}.ev-marker[aria-pressed=true]{z-index:2}.ev-marker[aria-pressed=true] .marker-light{outline:3px solid #286be8;outline-offset:3px}#map-error{position:absolute;bottom:16px;left:16px;right:16px;padding:12px;background:white;font-size:13px;border-radius:10px}
#detail-panel{width:320px;flex:none;border:1px solid #dfe6e1;background:#fff;border-radius:16px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.empty-detail{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;text-align:center}.empty-bolt{background:#eff5f0;color:#439374;width:64px;height:64px;display:grid;place-items:center;border-radius:20px;font-size:48px}.empty-detail h2{font-size:19px;letter-spacing:-.6px;margin:22px 0 10px}.empty-detail p{font-size:13px;color:#829187;line-height:1.9;margin:0}.apartment-count{display:flex;gap:30px;border-top:1px solid #e9eee9;padding-top:24px;margin-top:34px}.apartment-count strong{font-size:26px;font-weight:600}.apartment-count span{font-size:12px;color:#7b8c82;margin-left:5px;font-weight:400}#detail-content{display:flex;flex-direction:column;min-height:0;flex:1;padding:22px 20px 0}.panel-heading{display:flex;align-items:center;justify-content:space-between;flex:none}.panel-heading p{font-size:12px;color:#7f9085;margin:0 0 4px}.panel-heading h2{font-size:27px;letter-spacing:-1px;margin:0}.panel-heading button{width:44px;height:44px;border:0;background:#f2f5f3;border-radius:12px;font-size:29px}.panel-summary{font-size:14px;margin:26px 0 6px;color:#72867a;flex:none}.panel-summary strong{font-size:38px;color:#11855b;margin-right:6px;letter-spacing:-1px}.panel-summary.unknown strong{font-size:28px;color:#485c6a}.panel-note{font-size:12px;color:#7b8c81;line-height:1.6;margin:8px 0 18px;flex:none}#charger-list{list-style:none;padding:0;margin:0;overflow:auto;min-height:0;flex:1}.charger-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf1ed;padding:19px 0;gap:8px}.charger-row strong{display:block;font-size:14px;font-weight:650}.charger-row small{display:block;margin-top:5px;color:#8a988f;font-size:12px}.charger-state{font-size:13px;white-space:nowrap;padding:7px 9px;border-radius:7px;background:#eef1f3;color:#65737e}.charger-state.available{color:#0d8456;background:#e8f6ee}.panel-foot{font-size:11px;line-height:1.8;color:#627a6b;padding:16px 20px;margin:0;border-top:1px solid #edf1ed;flex:none}.panel-foot span{color:#9aa69d}footer{min-height:52px;flex:none;padding:0 24px 10px;display:flex;align-items:center;gap:20px;color:#74867a;font-size:12px}.legend{display:flex;align-items:center;gap:16px;white-space:nowrap}.legend span{display:flex;align-items:center;gap:6px}.legend i{font-style:normal;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;font-size:20px;font-weight:bold;line-height:1;color:#fff}.legend .on{background:#159667}.legend .off{background:#53606b}.legend .unknown{background:white;border:2px solid #354f68;color:#354f68}footer p{flex:1;font-size:11px;line-height:1.5}footer a{color:#8a978e;font-size:11px;text-decoration:none;white-space:nowrap}
@media(max-width:1200px){.toolbar{height:64px;padding:0 20px}main{padding:12px;gap:12px}#detail-panel{width:300px}.brand h1{font-size:20px}footer{gap:12px;padding:0 18px 6px}footer a{display:none}}
@media(min-width:701px) and (max-width:850px){.toolbar{height:56px;padding:0 14px}.brand-icon{width:34px;height:36px;font-size:36px;border-radius:9px}.brand h1{font-size:18px}.brand p{display:none}.sync{font-size:12px}.sync time{font-size:11px}main{padding:8px;gap:8px}#detail-panel{width:280px;border-radius:12px}.map-area{border-radius:12px}#detail-content{padding:16px 16px 0}.panel-summary{margin-top:18px}.legend{gap:12px}footer p{font-size:10px}footer{min-height:48px;padding-left:12px}}
@media(max-width:700px){body{height:auto;min-height:100dvh}.toolbar{height:66px;padding:0 14px}.brand{gap:8px}.brand h1{font-size:17px}.brand p{font-size:11px}.brand-icon{width:32px;height:36px;font-size:34px;border-radius:9px}.sync{font-size:11px}.sync time{font-size:10px}main{display:block;padding:8px;flex:1}.map-area{height:auto;min-height:410px;border-radius:12px}.map-frame{width:100%;max-height:none}#detail-panel{display:none}body.panel-open #detail-panel{display:flex;position:fixed;z-index:10;bottom:10px;left:10px;right:10px;width:auto;max-height:55dvh;box-shadow:0 8px 40px #163b3433;border-radius:16px}body.panel-open .panel-foot{display:none}#detail-content{padding:14px 18px 0}.panel-heading h2{font-size:24px}.panel-summary{margin-top:10px}.panel-summary strong{font-size:30px}.panel-note{margin:5px 0 10px;font-size:11px}.charger-row{padding:12px 0;min-height:60px}footer{padding:5px 14px 14px;flex-wrap:wrap;gap:4px;min-height:68px}.legend{font-size:11px;gap:14px}footer p{flex-basis:100%;margin:3px 0 0}.ev-marker{width:44px;height:44px}.marker-light{width:23px;height:23px}.marker-light svg{width:15px;height:15px}}
.api-health{position:relative;flex:none;margin:0;padding:0 18px;background:#f0f5f1;border-bottom:1px solid #e0e8e2;z-index:20;font-size:12px}.api-health summary{display:flex;align-items:center;gap:20px;justify-content:space-between;cursor:pointer;min-height:44px;list-style:none;padding:4px 0;touch-action:manipulation}.api-health summary::-webkit-details-marker{display:none}.api-health summary:focus-visible{outline:3px solid #286be8;outline-offset:-2px}.api-health summary::after{content:'⌄';margin-left:0;font-size:18px}#api-state{display:flex;align-items:center;gap:7px;flex:1}#api-state::before{content:'';width:7px;height:7px;border-radius:50%;background:#899790;flex:none}.api-health[data-state=ok] #api-state::before{background:#159667}.api-health[data-state=error] #api-state::before,.api-health[data-state=interrupted] #api-state::before{background:#bc6b37}.api-health[data-state=refreshing] #api-state::before{background:#458acf}#api-remaining{color:#687d6f;white-space:nowrap}.api-details{position:absolute;right:12px;top:calc(100% + 6px);width:370px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 170px);overflow:auto;background:white;border:1px solid #dce6de;border-radius:14px;padding:20px;box-shadow:0 8px 32px #163c342b}.api-details h2{font-size:17px;margin:0 0 10px}.api-details>p{line-height:1.65}.api-details dl{margin:18px 0;display:grid;grid-template-columns:108px 1fr;gap:12px 8px;font-size:12px}.api-details dt{color:#85958a}.api-details dd{margin:0;overflow-wrap:anywhere}.api-details .api-help{font-size:11px;color:#7b8d81;border-top:1px solid #edf1ed;padding-top:12px;margin-bottom:0}@media(max-width:700px){.api-health{padding:0 14px;font-size:11px}.api-health summary{gap:8px}.api-details{padding:16px}.api-details dl{grid-template-columns:98px 1fr}}
.brand{min-width:0;flex:1}.brand>div{min-width:0}.brand h1{word-break:keep-all;line-height:1.25}.brand-icon,.sync{flex-shrink:0}
.charger-row>div{min-width:0;flex:1}.charger-row small{line-height:1.65}

/* The map is a larger image behind the viewport; markers share its coordinates. */
main{max-width:none}
.map-area{display:block;background:#edf0e7}
.map-frame{position:absolute;aspect-ratio:auto;max-width:none;max-height:none}
#map-image{object-fit:fill}
.map-credit{position:absolute;bottom:8px;right:9px;padding:3px 6px;border-radius:4px;background:#ffffffd9;color:#33483f;font-size:10px;text-decoration:none;z-index:3}
.api-health summary::after{content:'';display:block;flex:0 0 8px;width:8px;height:8px;border:solid #687d6f;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 2px;align-self:center}
.api-health[open] summary::after{transform:rotate(225deg)}
.ev-marker .marker-light{width:32px;height:32px;border:0;background:transparent;box-shadow:none}
.marker-light svg{display:block;width:32px;height:32px;overflow:visible;filter:drop-shadow(0 1px 2px #18374a55)}
.charger-slice{stroke:#fff;stroke-width:1.2;stroke-linejoin:round}
.charger-slice.available{fill:#159667}
.charger-slice.charging{fill:#e99a24}
.charger-slice.unavailable{fill:#65737e}
.charger-slice.unknown{fill:#fff}
.marker-outline{fill:none;stroke:#526b5e;stroke-width:.7}
.marker-bolt{fill:white;stroke:#365445;stroke-width:.65;stroke-linejoin:round;paint-order:stroke fill}
.charger-state.charging{color:#935b08;background:#fff1d8}
.charger-state.unknown{color:#637369;background:#f7faf8;border:1px solid #dce5df}
.legend i{width:14px;height:14px}
.legend .charging{background:#e99a24}
.legend .unknown{border:1px solid #526b5e}
.map-area{user-select:none;touch-action:none;overscroll-behavior:contain}
.map-area .ev-marker{touch-action:none}
.map-area[data-zoomed=true]{cursor:grab}
.map-area.dragging{cursor:grabbing}
.map-controls{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;z-index:4;border:1px solid #d6dfd7;background:#fffffff5;border-radius:10px;box-shadow:0 2px 8px #18374a20;overflow:hidden;cursor:default}
.map-controls button{width:44px;height:44px;border:0;background:transparent;font-size:23px;line-height:1}
.map-controls button+button{border-top:1px solid #e7ece7}
.map-controls button:disabled{color:#b7c2ba;cursor:default}
.map-controls #map-reset{font-size:12px}
#map-zoom-level{font-size:10px;text-align:center;padding:0 0 7px;color:#6a7c70}
@media(max-width:700px){
  body{height:100dvh;min-height:560px}
  main{display:flex;min-height:0}
  .map-area{height:100%;min-height:0}
  .legend{gap:10px;font-size:10px}
  .legend span{gap:4px}
}