/* ==========================================================================
   Sangkwon Radar — design tokens
   서울 공공 안내판 체계: 기와진회색 레일, 한강은백색 바탕, 도로명판 파랑,
   과밀은 단청빨강 · 여유는 남산초록. 그림자 대신 진회색 선으로 면을 나눈다.
   ========================================================================== */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/overpass-latin.woff2") format("woff2");
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/overpass-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ground */
  --ground:     #ECECE8;   /* 앱 바탕 (한강은백색) */
  --paper:      #F6F6F2;   /* 붙박이 패널 */
  --white:      #FFFFFF;   /* 판정판 · 입력 */
  --wash:       #E3E4DF;   /* 눌린 칸, 표 머리 */

  /* rail · rules */
  --rail:       #3E4247;   /* 기와진회색 */
  --rail-deep:  #2E3135;
  --rail-ink:   #EDEDE8;
  --rail-dim:   #B9BCB7;
  --rule:       #3E4247;   /* 굵은 구획선 */
  --hair:       #CFD0CB;   /* 가는 선 */
  --hair-soft:  #DEDFDA;

  /* text */
  --ink:        #1D2024;
  --ink-2:      #3A3E44;
  --ink-3:      #55595F;   /* 보조 글 — paper 위 6:1 */
  --ink-4:      #686C72;   /* 캡션 — white 위 5:1 */

  /* road-name plate blue — 선택 · 판 · 주 버튼 */
  --plate:      #1E4FA0;
  --plate-deep: #163C7A;
  --plate-soft: #DCE4EF;
  --plate-line: #A9BEDC;

  /* verdict */
  --dense:      #C8352E;   /* 단청빨강 */
  --dense-deep: #9E2722;
  --dense-soft: #F5E2DF;
  --roomy:      #3F7A4F;   /* 남산초록 */
  --roomy-deep: #2F5E3C;
  --roomy-soft: #E1ECE3;
  --normal:     #3E4247;

  /* heat — 도로명판 파랑의 순차 5단 */
  --heat-1: #DCE4EF;
  --heat-2: #A9BEDC;
  --heat-3: #6E90C4;
  --heat-4: #3D69AE;
  --heat-5: #1E4FA0;

  /* shape */
  --r-sm: 3px;
  --r:    4px;
  --r-lg: 6px;

  /* type — 숫자는 한 서체를 정해진 단계로만 */
  --sans: "Overpass", "Gothic A1", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --ko:   "Gothic A1", "Overpass", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --fig-xl: 44px;
  --fig-l:  30px;
  --fig-m:  22px;
  --fig-s:  16px;

  --rail-w: 84px;
  --guide-h: 52px;
}

html[lang="ko"] { --sans: "Gothic A1", "Overpass", -apple-system, "Apple SD Gothic Neo", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--plate); text-decoration: none; }
a:hover { color: var(--plate-deep); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--plate); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.005em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ko { font-family: var(--ko); }

@keyframes pulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@keyframes plate-in { from { transform: translateY(-10px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes sheet-in { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}