/* 어반리뷰랩 — 건축규제 영향 분석 시스템 공통 스타일
   시뮬레이터(sim.html)와 같은 팔레트·서체를 쓴다. */
@font-face{font-family:Pretendard;font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Pretendard-Regular.woff') format('woff');}
@font-face{font-family:Pretendard;font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Pretendard-Regular.woff') format('woff');}
@font-face{font-family:Pretendard;font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Pretendard-SemiBold.woff') format('woff');}
@font-face{font-family:Pretendard;font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Pretendard-Bold.woff') format('woff');}

:root{
  --navy:#102058; --blue:#0070F8; --ink:#353B49; --muted:#6B7382;
  --line:#E2E6EE; --soft:#F4F6FA; --surface:#fff; --warn:#B4541F; --ok:#1E7A53;
  --font:Pretendard,Inter,'Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;line-height:1.62;word-break:keep-all}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--navy);margin:0;line-height:1.3;letter-spacing:-.015em}
b,strong{font-weight:700;color:var(--navy)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* ── 헤더 ───────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;color:var(--navy);
  font-size:16.5px;letter-spacing:-.02em}
.brand .sep{width:1px;height:15px;background:var(--line);align-self:center}
.brand .sub{font-weight:500;font-size:13.5px;color:var(--muted);letter-spacing:0}
.top nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--muted)}
.top nav a:hover{color:var(--navy)}

/* ── 버튼 ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 20px;border-radius:9px;border:1px solid var(--navy);
  background:var(--navy);color:#fff;font-family:var(--font);font-size:14.5px;
  font-weight:600;cursor:pointer;transition:.14s;white-space:nowrap}
.btn:hover{background:#0a1740}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.ghost:hover{background:var(--soft)}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:7px}
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.blue:hover{background:#0060d8}

/* ── 폼 ─────────────────────────────────────────── */
label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin:0 0 6px}
input[type=text],input[type=tel]{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);
  border-radius:9px;font-family:var(--font);font-size:15.5px;color:var(--ink);background:#fff}
input:focus{outline:2px solid rgba(0,112,248,.28);outline-offset:1px;border-color:var(--blue)}
.msg{font-size:13.5px;margin-top:10px;min-height:19px}
.msg.err{color:var(--warn)} .msg.ok{color:var(--ok)}

/* ── 카드·표 ─────────────────────────────────────── */
.card{border:1px solid var(--line);border-radius:13px;background:#fff;padding:22px 24px}
.grid{display:grid;gap:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--soft);
  border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:hover{background:#FAFBFD}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--soft);color:var(--muted)}
.tag.charge{background:#E8F1FE;color:var(--blue)}
.tag.re{background:#F1F3F7;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ── 이용권 게이지 ────────────────────────────────── */
.quota{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quota .big{font-size:34px;font-weight:700;color:var(--navy);line-height:1;
  font-variant-numeric:tabular-nums}
.bar{flex:1;min-width:180px;height:9px;border-radius:999px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:999px}

/* ── 푸터 ───────────────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:72px;padding:30px 0 46px;
  font-size:13px;color:var(--muted)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .top .wrap{height:56px}
  .brand .sub{display:none}
}