:root{--bg:#eef2f7;--bg-grad-1:#e7edf5;--bg-grad-2:#f4f6fb;--card:#ffffff;--card-2:#fbfcfe;--border:#e3e8ef;--border-strong:#d3dae4;--text:#10151c;--muted:#64748b;--chip:#f1f5f9;--shadow:0 1px 2px rgba(16,24,40,0.04),0 8px 24px rgba(16,24,40,0.06);--shadow-hover:0 2px 4px rgba(16,24,40,0.06),0 16px 40px rgba(16,24,40,0.1);--brand:#16a34a;--canUse:#16a34a;--inUse:#ea8a0b;--preparing:#0284c7;--maintenance:#dc2626;--error:#dc2626}:root[data-theme=dark]{--bg:#0b0e13;--bg-grad-1:#0d1119;--bg-grad-2:#0a0d12;--card:#161b23;--card-2:#1b212b;--border:#262e3a;--border-strong:#323c4a;--text:#eef2f7;--muted:#93a0b2;--chip:#222a35;--shadow:0 1px 2px rgba(0,0,0,0.3),0 12px 32px rgba(0,0,0,0.4);--shadow-hover:0 2px 4px rgba(0,0,0,0.4),0 20px 48px rgba(0,0,0,0.55);--brand:#22c55e;--canUse:#22c55e;--inUse:#f59e0b;--preparing:#38bdf8;--maintenance:#f87171;--error:#f87171}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body,html{margin:0;padding:0;min-height:100%;color:var(--text);background:var(--bg);background-image:radial-gradient(1200px 600px at 100% -10%,var(--bg-grad-1),transparent 60%),radial-gradient(1000px 500px at -10% 0,var(--bg-grad-2),transparent 55%);background-attachment:fixed;font-family:Pretendard,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Malgun Gothic,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.wrap{max-width:760px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 72px max(18px,env(safe-area-inset-left))}.header{justify-content:space-between;margin-bottom:18px}.brand,.header{display:flex;align-items:center;gap:12px}.brand{min-width:0}.brandLogo{width:36px;height:36px;border-radius:10px;box-shadow:var(--shadow);background:var(--card)}.title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}.subtitle{font-size:12.5px;color:var(--muted);margin:2px 0 0}.iconBtn{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:color .15s,border-color .15s,transform .12s,background .15s}.iconBtn:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);background:var(--card-2)}.iconBtn:active:not(:disabled){transform:scale(.92)}.iconBtn:disabled{opacity:.6;cursor:default}.themeSeg{flex:0 0 auto;display:inline-flex;gap:2px;padding:3px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}.themeSeg button{width:32px;height:32px;display:grid;place-items:center;border:none;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background .15s,transform .12s}.themeSeg button:hover{color:var(--text)}.themeSeg button:active{transform:scale(.9)}.themeSeg button[aria-pressed=true]{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)}.meta{display:flex;justify-content:space-between;gap:12px;margin:0 2px 16px}.live,.meta{align-items:center}.live{display:inline-flex;gap:8px;color:var(--muted);font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.liveDot{width:8px;height:8px;border-radius:50%;background:var(--canUse);box-shadow:0 0 0 0 color-mix(in srgb,var(--canUse) 60%,transparent);animation:pulse 2s infinite}.liveDot.busy{background:var(--inUse);animation-duration:.9s}.iconBtn .spin{animation:spin .8s linear infinite;transform-origin:center}.grid{display:grid;grid-gap:16px;gap:16px}.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s,border-color .2s}.card:hover{box-shadow:var(--shadow-hover);border-color:var(--border-strong);transform:translateY(-2px)}.stationHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.stationTitle{min-width:0}.stationName{font-size:17px;font-weight:750;letter-spacing:-.01em;margin:0 0 4px}.addr,.stationName{overflow-wrap:anywhere}.addr{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0}.availPill{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:4px;padding:7px 12px;border-radius:12px;border:1px solid transparent;white-space:nowrap}.availPill strong{font-size:18px;font-weight:800;line-height:1}.availSub{font-size:11.5px;opacity:.85}.availPill.on{color:var(--canUse);background:color-mix(in srgb,var(--canUse) 12%,transparent);border-color:color-mix(in srgb,var(--canUse) 30%,transparent)}.availPill.off{color:var(--muted);background:var(--chip);border-color:var(--border)}.chargerList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.chargerRow{--sc:var(--muted);position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--sc) 6%,var(--card));overflow:hidden}.chargerRow.s-canUse{--sc:var(--canUse)}.chargerRow.s-inUse{--sc:var(--inUse)}.chargerRow.s-preparing{--sc:var(--preparing)}.chargerRow.s-maintenance{--sc:var(--maintenance)}.statusRail{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sc)}.chargerNo{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--sc) 16%,transparent);color:var(--sc);font-weight:800;font-size:14px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.chargerInfo{flex:1 1 auto;min-width:0}.chargerName{font-size:14.5px;font-weight:700;margin:0 0 2px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.chargerMeta{color:var(--muted);font-size:12.5px;margin:0}.usedAt{color:var(--muted);font-size:12px;margin:3px 0 0;opacity:.9}.badge{flex:0 0 auto;--sc:var(--muted);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);border:1px solid color-mix(in srgb,var(--sc) 28%,transparent)}.badge.s-canUse{--sc:var(--canUse)}.badge.s-inUse{--sc:var(--inUse)}.badge.s-preparing{--sc:var(--preparing)}.badge.s-maintenance{--sc:var(--maintenance)}.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--sc)}.badge.s-canUse .dot{box-shadow:0 0 0 0 color-mix(in srgb,var(--sc) 60%,transparent);animation:pulse 2s infinite}.cardError{border-color:color-mix(in srgb,var(--maintenance) 40%,var(--border))}.errText{color:var(--error);font-size:14px;font-weight:600;margin:6px 0 0}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--canUse) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:480px){.wrap{padding:max(20px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.header{margin-bottom:16px}.title{font-size:18px}.brandLogo{width:34px;height:34px}.iconBtn{width:42px;height:42px}.themeSeg button{width:36px;height:36px}.card{padding:15px;border-radius:16px}.stationHead{margin-bottom:14px}.stationName{font-size:16px}.availPill{padding:6px 10px}.availPill strong{font-size:16px}.chargerRow{gap:10px;padding:12px 12px 12px 15px}.chargerNo{width:32px;height:32px}.chargerName{font-size:14px}.badge{padding:6px 10px;font-size:12.5px}}@media (prefers-reduced-motion:reduce){.badge .dot,.iconBtn .spin,.liveDot{animation:none}.card:hover{transform:none}}