:root { --navy:#143f84; --navy-dark:#102c5c; --bg:#f3f6fb; --line:#dbe2ec; --text:#111827; --muted:#6b7280; --green:#079455; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button { border:0; border-radius:12px; background:var(--navy); color:#fff; padding:12px 18px; cursor:pointer; font-weight:700; }
button:hover { background:var(--navy-dark); }
.hidden { display:none !important; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(145deg,#eef4ff,#f9fbff); }
.login-card { width:min(440px,100%); background:#fff; border:1px solid var(--line); border-radius:24px; padding:42px; box-shadow:0 22px 70px rgba(20,63,132,.12); }
.brand-mark { width:62px; height:62px; display:grid; place-items:center; background:var(--navy); color:#fff; border-radius:18px; font-size:20px; font-weight:900; }
.login-card h1 { margin:24px 0 8px; font-size:28px; }
.login-card p { color:var(--muted); margin:0 0 28px; }
label { display:grid; gap:8px; margin:16px 0; font-weight:700; }
input,select { width:100%; border:1px solid var(--line); background:#fff; border-radius:12px; padding:13px 14px; outline:none; }
input:focus,select:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(20,63,132,.1); }
.login-card button { width:100%; margin-top:12px; }
.error { color:#d92d20; min-height:22px; margin-top:14px; }
header { height:72px; padding:0 max(24px,calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
header strong { font-size:20px; } header span { color:var(--muted); margin-left:10px; }
.ghost { background:transparent; color:var(--muted); padding:8px 12px; }
.app-shell main { width:min(1240px,calc(100% - 48px)); margin:38px auto 80px; }
.title-row,.panel-head { display:flex; justify-content:space-between; gap:24px; align-items:center; }
h1,h2,p { margin-top:0; } .title-row p { color:var(--muted); margin-bottom:0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:28px 0; }
.metric,.detail-metric { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }
.metric span,.detail-metric span { color:var(--muted); display:block; margin-bottom:10px; }
.metric strong { font-size:30px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.panel-head { padding:24px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; }.filters { display:flex; gap:10px; }.filters select,.filters input { min-width:150px; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:16px 20px; border-bottom:1px solid #edf0f4; text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:13px; background:#fafbfc; } td.address { max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.row-button { padding:8px 12px; background:#edf3ff; color:var(--navy); }.empty { padding:64px; text-align:center; color:var(--muted); }
dialog { width:min(980px,calc(100% - 32px)); border:0; border-radius:24px; padding:0; box-shadow:0 24px 80px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(15,23,42,.55); }.dialog-head { display:flex; justify-content:space-between; align-items:center; padding:24px 28px 18px; }
.dialog-head span { color:var(--navy); font-weight:800; }.dialog-head h2 { margin:4px 0 0; }.icon-button { background:transparent; color:var(--muted); font-size:34px; padding:0 8px; }
.map { height:430px; margin:0 28px; border-radius:18px; overflow:hidden; background:#e8eef6; display:grid; place-items:center; }.map-empty { color:var(--muted); }
.detail-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px 28px; }.detail-metric strong { font-size:21px; }
.address-card { margin:0 28px; border:1px solid var(--line); border-radius:16px; padding:10px 20px; }.address-card div { display:grid; grid-template-columns:56px 1fr; padding:13px 0; }.address-card div+div { border-top:1px solid var(--line); }.address-card b:first-child { color:var(--navy); }.address-card span { color:var(--muted); }
.dialog-actions { display:flex; justify-content:flex-end; padding:20px 28px 28px; }
@media (max-width:820px) { .metrics { grid-template-columns:repeat(2,1fr); }.panel-head,.title-row { align-items:stretch; flex-direction:column; }.filters { flex-wrap:wrap; }.filters>* { flex:1; }.detail-metrics { grid-template-columns:repeat(2,1fr); }.map { height:330px; } }
@media (max-width:520px) { .login-card { padding:28px; }.app-shell main { width:calc(100% - 24px); margin-top:24px; }.metrics { gap:10px; }.metric { padding:16px; }.metric strong { font-size:23px; }.filters { display:grid; grid-template-columns:1fr 1fr; }.filters button { grid-column:1/-1; }.map { margin:0 14px; height:280px; }.dialog-head,.detail-metrics,.dialog-actions { padding-left:14px; padding-right:14px; }.address-card { margin:0 14px; } }