/* 급지표 — 모바일 우선 · 조밀한 리스트. 건조한 사실 표현(C-09): 경고색·낙인·석차 없음. */
:root {
  --bg: #ffffff; --panel: #f7f8fa; --line: #e7e9ee; --text: #1f2430;
  --muted: #6b7280; --accent-soft: #eef1f6; --est: #b45309;
  --app: 480px;
  /* 지도 순차 램프 — 모래·황토 6단계. 값은 CLAUDE.md 지정값 그대로.
     근거: 지적편집도 주거지역=노랑, 오방색 황=토(土). 빨강·파랑(선거·증시 관습)
     과 초록(자연녹지)은 의미 충돌로 금지. 값이 클수록 진하다.
     ⚠ 1단계(#F6F2E9)는 흰 배경 대비 1.12:1 로 검사기 하한(2:1) 미달 — 지정값 유지.
     지도 배경을 1단계 톤으로 깔아 옅은 칸도 구분되게 했다. */
  --seq-1: #F6F2E9; --seq-2: #E7DCC6; --seq-3: #D2BE9C;
  --seq-4: #B69B71; --seq-5: #8F744C; --seq-6: #63502F;
  /* 지도 바탕 = **바다**. 땅 바깥이 곧 바다이므로 물빛으로 칠하면 해안선이 살아난다.
     램프가 모래·황토 계열이라 차가운 물빛과 겹치지 않는다 — 오히려 땅이 도드라진다.
     램프에 파랑을 금지한 것(C-14)은 '값을 나타내는 색' 규칙이고, 물은 값이 아니라 지형이다. */
  --map-bg: #C9DAE3;
  /* 물빛 — 데이터 색(모래·황토 램프)과 겹치지 않게 차가운 계열을 쓴다.
     램프에 파랑을 금지한 것(C-14)은 '값을 나타내는 색'에 대한 규칙이고,
     물은 값이 아니라 지형이라 헷갈리지 않는다. */
  --water: #A9C4D2;   /* 하천 — 바다보다 한 톤 진하게 해 땅 위에서 보이게 */
  --land: #EFEDE8;    /* 지금 화면 밖 육지 — 값이 아니므로 램프와 섞이지 않게 무채에 가깝게 */
  /* 지역 경계선 — --line(아주 옅은 회색)은 모래 램프 위에서 안 보여 같은 색끼리
     붙은 지역의 경계가 사라진다. 반투명 짙은 갈색이라 어느 명도의 칸 위에서도 보인다. */
  --map-edge: rgba(74, 58, 36, .55);
}
@media (prefers-color-scheme: dark) {
  #map .dlabel.b4, #map .dlabel.b5 { fill: var(--text); stroke: var(--map-bg); }
  #map .dlabel.b0, #map .dlabel.b1 { fill: #fff; stroke: #3a3020; }
  :root { --bg:#0f1319; --panel:#161b22; --line:#252c37; --text:#e6e9ef;
    --muted:#9aa4b2; --accent-soft:#1b222c; --est:#d69a3a;
    /* 다크는 같은 6색을 순서만 뒤집는다 — 어두운 배경에서 검사기 전 항목 통과
       (가장 옅은 단계가 배경과 2.41:1) */
    --seq-1:#63502F; --seq-2:#8F744C; --seq-3:#B69B71;
    --seq-4:#D2BE9C; --seq-5:#E7DCC6; --seq-6:#F6F2E9;
    --map-bg:#18242B; --water:#2C4351; --land:#22252A;
    --map-edge: rgba(235, 228, 214, .40); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.45; font-size: 15px; }
.wrap { max-width: var(--app); margin: 0 auto; padding: 0 12px; }

header { border-bottom: 1px solid var(--line); }
.title { padding: 14px 0 3px; }
.title h1 { font-size: 18px; margin: 0; letter-spacing: -0.02em; }
.desc { color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.desc b { color: var(--text); font-weight: 600; }

/* 탭 */
.tabs { display: flex; align-items: center; gap: 4px; padding: 8px 0 0; }
/* 산정 기준 — 탭 줄 오른쪽 끝. 눈에 띄되 탭을 가리지 않게 */
.rulebtn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px 5px 8px;
  cursor: pointer; align-self: center; white-space: nowrap; }
.rulebtn + .rulebtn { margin-left: 0; }   /* 둘째 버튼은 auto 여백을 다시 주지 않는다 */
.rulebtn { font-weight: 600; }
.rulebtn:active { background: var(--accent-soft); color: var(--text); }
@media (max-width: 330px) { .rulebtn span { display: none; } }  /* 아주 좁을 때만 ? 만 */
.tab { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.tab.is-on { color: var(--text); border-bottom-color: var(--text); }
/* 좁은 화면에서 탭 3개 + 버튼 2개가 줄바꿈돼 "지 도"처럼 쪼개지던 것 — 여백만 줄인다 */
@media (max-width: 400px) {
  .tab { padding: 8px 7px; }
  .rulebtn { padding: 5px 8px 5px 7px; gap: 3px; font-size: 11.5px; }
  .tabs { gap: 2px; }
}

/* ── 지도 (D-24) — 크기 규칙은 #map 전용 선택자로만.
   전역 svg{} 를 쓰면 검색창 아이콘까지 부풀어 오른다(실제 겪은 사고). ── */
#map { margin: 8px 0 14px; }
#map .map-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; }
#map .map-crumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 12.5px; }
#map .map-crumb button { font: inherit; font-size: 12.5px; color: var(--text);
  background: none; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
#map .map-crumb button:last-of-type { font-weight: 700; }
#map .map-crumb span { color: var(--muted); }
#map .map-up { font: inherit; font-size: 12px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer; }

/* 핀치가 페이지 스크롤과 충돌하지 않도록 touch-action 필수 */
/* 지도는 화면을 넉넉히 쓴다 — 탐색이 목적인 화면이므로 */
#map .map-wrap { touch-action: none; -webkit-user-select: none; user-select: none;
  background: var(--map-bg); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; min-height: 280px; }   /* 실제 높이는 fitHeight() 가 계산 */
#map #map-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#map #map-svg:active { cursor: grabbing; }
/* 밑layer — 자기 색 테두리로 살짝 부풀려 인접 구끼리 틈(흰 빈칸)을 메운다.
   테두리가 줌에 비례(scaling)해 어느 배율에서도 틈이 닫힌다. 경계선·클릭은 위layer가 맡는다. */
#map .dbase { stroke-width: .5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
#map .dpath { stroke: var(--map-edge); stroke-width: .9; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; cursor: pointer; }
/* 가져다 대면(호버) 경계를 살짝 굵게 — 클릭 전에도 어디가 잡히는지 보인다 */
#map .dpath.is-hover { stroke: var(--text); stroke-width: 1.6; }
#map #map-sel { stroke: var(--text); stroke-width: 2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: none; }
/* 라벨은 배경색 외곽선(헤일로)을 둘러 폴리곤 위에서도 또렷하게 */
#map .dlabel { fill: var(--text); text-anchor: middle; pointer-events: none;
  font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 2.4px;
  stroke-linejoin: round; }
/* 진한 칸 위에서만 흰 글씨. 진한 쪽 단계가 모드마다 달라 CSS 에서 갈라 준다
   (라이트=값 큰 쪽이 진함, 다크=값 작은 쪽이 진함) */
#map .dlabel.b4, #map .dlabel.b5 { fill: #fff; stroke: #3a3020; }

#map .map-ctrl { display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; }
#map .map-level { color: var(--muted); font-size: 11.5px; }
/* R-03 — 지도 기준일 상시 표기(캡처 대비). 지도는 고정 높이라 스크롤과 무관하게 남는다. */
#map .map-stamp { color: var(--muted); font-size: 10.5px; margin-top: 4px; }
#map .map-zoom { display: inline-flex; gap: 4px; }
#map .map-zoom button { font: inherit; font-size: 14px; line-height: 1; width: 32px;
  height: 28px; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
#map .map-zoom button:active { background: var(--accent-soft); }

#map .map-info:empty { display: none; }
#map .map-hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
#map .map-info { margin-top: 8px; padding: 10px 11px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; }
#map .mi-main { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 13.5px; }
#map .mi-v { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#map .mi-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#map .mi-btns button { font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; }
#map .mi-btns button:active { background: var(--accent-soft); }

#map .legend { display: flex; align-items: center; gap: 4px; margin-top: 6px;
  color: var(--muted); font-size: 10px; flex-wrap: wrap; }
#map .legend .sw { width: 22px; height: 8px; border-radius: 2px; }
#map .legend .sw.hatch { margin-left: 6px; background: repeating-linear-gradient(45deg,
  var(--land) 0 3px, var(--map-edge) 3px 3.8px); }

.controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 0;
  position: sticky; top: 0; background: var(--bg); z-index: 6; }
#panel-map .controls { position: static; padding: 6px 0; }   /* 지도 탭은 세로 공간 확보 */
#panel-map .desc { font-size: 11.5px; padding-bottom: 6px; }
/* 계단식 지역 선택기(region.js) — 시·도 / 시·군·구 / 동을 한 줄에 나란히.
   ⚠ 선택기가 줄 전체를 먹으면 정렬(급지순)이 아래로 밀려 한 줄이 더 생긴다 →
   선택기는 남는 폭을 쓰고(flex:1) 정렬은 그 옆에 붙는다. */
/* basis 를 auto 로 두면 내용 폭만큼 차지해 정렬이 아래 줄로 밀린다 → 0 으로 두어 나눈다 */
#scope-mount { flex: 1 1 0; min-width: 0; }
.regionrow { display: flex; gap: 6px; width: 100%; }
.regionrow select { flex: 1 1 0; min-width: 0; }
.regionrow select:disabled { opacity: .5; }
.controls #sort { flex: 0 0 auto; }
.searchrow { display: flex; gap: 7px; width: 100%; }
.searchbox { position: relative; flex: 1; display: flex; }
.searchbox #q { width: 100%; padding-right: 30px; }
.clearbtn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; line-height: 1; font-size: 16px; color: var(--muted);
  background: none; border: 0; border-radius: 12px; cursor: pointer; padding: 0; }
.clearbtn:active { background: var(--accent-soft); }
.gobtn { flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.gobtn:active { background: var(--line); }
.subbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 0 6px; }
select, input[type="search"] { font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; -webkit-appearance: none; appearance: none; }
#q { flex: 1; min-width: 0; }
#sort { font-size: 12.5px; padding: 6px 8px; flex: 0 0 auto; }
/* 아주 좁은 화면에서는 4개가 한 줄에 안 들어가므로 지역 선택기만 한 줄을 쓴다 */
@media (max-width: 400px) { #scope-mount { flex: 1 1 100%; } }
.meta { color: var(--muted); font-size: 11.5px; text-align: right; }
.meta b { color: var(--text); font-weight: 600; }
/* R-03 — 캡처 대비 기준일·비교군 한 줄 표기 (작은 회색 글씨) */
.stamp { color: var(--muted); font-size: 11px; margin: 0 0 6px; }
.stamp b { color: var(--text); font-weight: 600; }
.banner { font-size: 11.5px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; margin: 0 0 8px; }
.unitrow { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 5px; }
.units { color: var(--muted); font-size: 10.5px; }
.units b { color: var(--text); font-weight: 600; }
/* 전용면적 단위 전환 (평 / ㎡) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; flex: 0 0 auto; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; font-size: 11.5px; color: var(--muted);
  padding: 5px 11px; cursor: pointer; background: var(--bg); }
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { background: var(--accent-soft); color: var(--text); font-weight: 600; }

/* ── 단지 상세 · 주변과 견주어 보기 (D-25) ── */
#detail { border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 12px; margin: 6px 0 10px; }
#detail .dt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#detail .dt-name { font-weight: 700; font-size: 15px; }
#detail .dt-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
#detail .dt-close { font: inherit; font-size: 12px; color: var(--muted); background: none;
  border: 0; cursor: pointer; padding: 2px 4px; }
/* 머리 — 급지 하나만 크게 세운다. 숫자 여섯 개를 같은 크기로 늘어놓으니 읽히지 않았다. */
#detail .dt-lead { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px;
  font-variant-numeric: tabular-nums; }
#detail .dt-lead-n { display: flex; align-items: baseline; gap: 3px; }
#detail .dt-lead-n b { font-size: 30px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; }
#detail .dt-lead-n span { font-size: 13px; color: var(--muted); }
/* R-03 — 급지 옆 비교군 병기. 잘려 캡처돼도 "어느 비교군의 급지"인지 남는다. */
#detail .dt-lead-m { color: var(--muted); font-size: 12px; }
#detail .dt-lead-m b { color: var(--text); font-weight: 600; }

/* 근거 — 라벨/값을 같은 격자에 넣어 눈이 세로로 훑을 수 있게 */
#detail .dt-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px;
  margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
@media (min-width: 460px) { #detail .dt-facts { grid-template-columns: repeat(4, 1fr); } }
#detail .dt-facts dt { color: var(--muted); font-size: 11px; }
#detail .dt-facts dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; color: var(--text); }
#detail .dt-facts dd small { display: block; font-size: 10.5px; font-weight: 400;
  color: var(--muted); margin-top: 1px; }
#detail .dt-peer { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; }
#detail .acc { margin-top: 10px; border-top: 1px solid var(--line); }
#detail details { border-bottom: 1px solid var(--line); }
#detail summary { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 9px 2px; cursor: pointer; font-size: 13px; list-style: none; }
#detail summary::-webkit-details-marker { display: none; }
#detail summary .amt { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; }
#detail summary .amt b { color: var(--text); font-size: 13px; font-weight: 700; }
#detail summary .acc-n { font-size: 10.5px; }        /* 모집단 크기 — 급지의 근거 */
#detail summary .acc-mid { font-size: 11px; }        /* 지역 중앙값 — 보조 정보로 한 단계 뒤 */
@media (max-width: 380px) { #detail summary .acc-mid { display: none; } }
#detail .accmap { padding: 4px 0 10px; }
/* 정적 지도(아코디언 안) — 조작 없음 */
#detail .is-static .map-zoom, #detail .is-static .map-bar { display: none; }
#detail .is-static .map-wrap { touch-action: auto; }
#detail .is-static #map-svg { cursor: default; }

/* 조밀한 리스트 — 순번 없음(D-07). 열 순서: 급지·상위%·단지·소재지·평당가·기준 */
/* 좁은 화면(폰)에서는 열을 더 줄일 수 없다 — 실측 390px 에서 급지·평당가·소재지가
   글자째 잘렸다(각각 60·60·23칸). 폭을 억지로 나누지 말고 **가로 스크롤**로 넘긴다.
   min-width 아래에서만 스크롤이 생기고, 그 위에서는 지금과 똑같이 꽉 찬다. */
.tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablewrap table { min-width: 560px; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 13px;
  table-layout: fixed; font-variant-numeric: tabular-nums; }
/* 열 너비 고정 — 헤더·데이터 칸 정렬 일치 */
/* 폭 배분 — **단지명이 가장 길고 자주 읽히는 값**이라 가장 넓게 준다.
   소재지는 동 이름 한 단어라 좁혀도 되고, 좁힌 만큼 단지명 줄바꿈이 줄어든다. */
col.c-grade { width: 8.5%; }
col.c-pct   { width: 9.5%; }
col.c-name  { width: 30%; }   /* 거래일·소재지에서 넘겨받아 넓힌 자리 */
col.c-dong  { width: 12%; }   /* 동 이름 한 단어(압구정동)는 안 잘리는 최소치 */
col.c-amt   { width: 12%; }   /* 매매가 — 신고 금액(억) */
col.c-ppp   { width: 11.5%; }
col.c-date  { width: 8.5%; }  /* YY.MM — 정확한 날짜는 상세에서 */
col.c-area  { width: 8%; }
/* 열 여백 통일(좌우 4px) — 항목 간 간격 일정 */
.tablewrap thead th { background: var(--bg); color: var(--muted); font-size: 10px;
  font-weight: 600; text-align: left; padding: 5px 4px; line-height: 1.2;
  border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom;
  overflow: hidden; }   /* 비교군 이름이 길면 옆 칸을 침범한다 → 그 칸 안에서 자른다 */
.thsub { font-weight: 500; opacity: .8; display: block;
  overflow: hidden; text-overflow: ellipsis; }
.tablewrap tbody td { padding: 6px 4px; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; }
.tablewrap th.num, .tablewrap td.num { text-align: right; }
.tablewrap tbody tr:active td { background: var(--accent-soft); }

td.grade { font-weight: 700; font-size: 13px; }
td.pct { color: var(--muted); font-size: 11px; letter-spacing: -0.03em; }
/* 단지명 — 줄바꿈 허용(긴 이름도 전부 표시). 괄호 부속은 다음 줄로.
   ⚠ 선택자를 `.tablewrap tbody td.name` 으로 쓴다. `td.name` 만 쓰면 위의
   `.tablewrap tbody td { white-space: nowrap }` (0,1,2)에 져서(0,1,1) **줄바꿈이 안 먹고
   이름이 한 줄로 잘린다**. 범위를 좁히려고 `.tablewrap` 을 붙인 순간 우선순위가 올라간
   탓이다 — CLAUDE.md '전역 선택자' 항목의 같은 함정. */
.tablewrap tbody td.name { font-weight: 600; font-size: 12.5px; letter-spacing: -0.02em;
  white-space: normal; }
.tablewrap tbody td.name .nm { display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.22;
  /* 띄어쓰기에서 먼저 끊고, 붙여 쓴 긴 이름만 어쩔 수 없이 중간에서 끊는다 */
  word-break: keep-all; overflow-wrap: anywhere; }
td.name .sfx { display: block; font-weight: 500; font-size: 10.5px;
  color: var(--muted); letter-spacing: -0.03em; }
td.dong { color: var(--muted); font-size: 10.5px; letter-spacing: -0.03em; }
td.ppp { font-weight: 600; font-size: 12px; letter-spacing: -0.02em; }
td.date { color: var(--muted); font-size: 10.5px; letter-spacing: -0.04em; }
td.area { color: var(--muted); font-size: 10.5px; }
.est-tag { color: var(--est); font-size: 9.5px; border: 1px solid var(--est);
  border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: middle; }
/* V-03 — 동명이 단지 구분표시(준공년도). 같은 이름이 둘 이상일 때만 붙는다. */
.dup-tag { color: var(--muted); font-size: 10px; margin-left: 5px; vertical-align: middle;
  white-space: nowrap; }
#detail .dt-name .dup-tag { font-size: 12px; }

.morebtn { width: 100%; font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px; cursor: pointer; margin: 10px 0 6px; }
.morebtn:active { background: var(--accent-soft); }
.morebtn .rest { color: var(--muted); font-size: 12px; }

.dongsec { margin: 18px 0; }
.dongsec h2 { font-size: 14px; margin: 0 0 3px; }
.donggrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 7px; }
.dongcard { border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; background: var(--panel); }
.dongcard .n { font-weight: 600; font-size: 12.5px; }
.dongcard .v { font-variant-numeric: tabular-nums; font-size: 13px; margin-top: 1px; }
.dongcard .v small { color: var(--muted); font-weight: 400; font-size: 10.5px; }
.dongcard .c { color: var(--muted); font-size: 10.5px; }

footer { border-top: 1px solid var(--line); margin-top: 18px; padding: 12px 0 36px;
  color: var(--muted); font-size: 11px; }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── 산정 기준·유의사항 모달 ── */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(15, 19, 25, .5); }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: var(--app); max-height: 88vh; display: flex;
  flex-direction: column; background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px 14px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.18); }
@media (min-width: 520px) {
  .modal { align-items: center; }
  .modal-box { border-radius: 14px; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 14px 8px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 15.5px; letter-spacing: -0.02em; }
.modal-x { font: inherit; font-size: 15px; color: var(--muted); background: none;
  border: 0; cursor: pointer; padding: 2px 6px; }
.modal-body { overflow-y: auto; padding: 12px 14px 4px; -webkit-overflow-scrolling: touch; }
.modal-body h3 { font-size: 13px; margin: 14px 0 5px; letter-spacing: -0.01em; }
.modal-body h3:first-of-type { margin-top: 8px; }
.modal-body p, .modal-body li { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.modal-body b { color: var(--text); font-weight: 600; }
.modal-body ul { margin: 4px 0; padding-left: 17px; }
.modal-body li { margin: 3px 0; }
.m-lead { margin: 0 0 4px; }
.m-eq { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0; font-variant-numeric: tabular-nums;
  color: var(--text) !important; font-size: 12.5px; }
.m-warn li { color: var(--text); }
.m-x { color: var(--muted); font-size: 11.5px; }
.modal-body li b { color: var(--text); }
.m-src { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.m-again { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.m-again input { width: 15px; height: 15px; }
.modal-foot .gobtn { flex: 0 0 auto; }

/* U-13 룰북 6줄 — 짧게. 한 화면에 들어오게 여백을 촘촘히. */
#intro .modal-body .m-line { color: var(--text); font-size: 13px; line-height: 1.55;
  margin: 0 0 9px; }
#intro .modal-body .m-line b { color: var(--text); font-weight: 700; }
/* 자세한 규칙 링크 — 룰북 푸터 좌측 */
.m-detail-link { margin-right: auto; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent, #4a5a72); background: none; border: 0; padding: 4px 2px;
  text-decoration: underline; cursor: pointer; }
#rules { z-index: 60; }   /* 룰북 위에 겹쳐 뜬다(왕복) */

/* ── U-15 사용법 오버레이 ── */
#howto { position: fixed; inset: 0; z-index: 70; }
#howto[hidden] { display: none; }
#howto .ho-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
#howto .ho-scrim { fill: rgba(12, 16, 22, .72); }
#howto .ho-ring { fill: none; stroke: #fff; stroke-width: 2; opacity: .95; }
#howto .ho-line { stroke: #fff; stroke-width: 1.5; opacity: .8; }
#howto .ho-label { position: absolute; z-index: 2; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); max-width: 200px; }
#howto .ho-label b { display: block; font-size: 13px; color: var(--text); }
#howto .ho-label span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45;
  color: var(--muted); }
#howto .ho-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px;
  font-size: 18px; color: #fff; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; cursor: pointer; }
#howto .ho-foot { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center;
  color: #fff; font-size: 12px; opacity: .85; z-index: 2; pointer-events: none; }


/* ── 급지표 만들기 (D-26) ────────────────────────────────────────────
   하위 칸도 같은 색 계열, 경고색 없음(C-09). 순서를 손으로 바꾸는 UI 없음(C-12). */
/* ⚠ 예전엔 저장 버튼 하나뿐이라 `width:100%` 였다. 지금은 링크 복사와 **한 줄에 나란히**
   서므로 폭은 .sharerow 가 정한다. 이 규칙(ID 선택자)을 남겨 두면 특이도로 이겨서
   저장 버튼만 한 줄을 차지하고 두 단추 크기가 어긋난다. */
#panel-build .bd-save { margin-top: 0; }
#bd-msg:empty { display: none; }

.pyr { border: 1px solid var(--line); border-radius: 12px; padding: 12px 11px;
  background: var(--panel); }
/* 추출 결과 = **저장될 이미지 그대로**. 폭에 맞춰 줄여 보여 준다(원본은 1080px 폭). */
.pyr-img { display: block; width: 100%; height: auto; border-radius: 8px;
  background: #fff; }
.pyr-head { margin-bottom: 10px; }
.pyr-title { font-size: 15px; font-weight: 700; }
.pyr-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pyr-legend { display: flex; gap: 6px; font-size: 10px; color: var(--muted);
  padding-bottom: 5px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pyr-legend span:first-child { width: 22px; }
.pyr-legend span:nth-child(2) { flex: 1; }
.pyr-legend span:last-child { text-align: right; }

.pyr-row { display: flex; align-items: flex-start; gap: 6px; padding: 5px 0;
  border-bottom: 1px solid var(--line); }
.pyr-row:last-of-type { border-bottom: 0; }
.pyr-no { width: 22px; font-size: 13px; font-weight: 700; text-align: center;
  color: var(--text); padding-top: 1px; }
.pyr-barwrap { flex: 1; min-width: 0; }
.pyr-bar { height: 7px; border-radius: 3px; margin-bottom: 3px; }
.pyr-bar.b1 { background: var(--seq-1); } .pyr-bar.b2 { background: var(--seq-2); }
.pyr-bar.b3 { background: var(--seq-2); } .pyr-bar.b4 { background: var(--seq-3); }
.pyr-bar.b5 { background: var(--seq-3); } .pyr-bar.b6 { background: var(--seq-4); }
.pyr-bar.b7 { background: var(--seq-4); } .pyr-bar.b8 { background: var(--seq-5); }
.pyr-bar.b9 { background: var(--seq-6); }
.pyr-names { font-size: 11.5px; line-height: 1.45; word-break: keep-all; }
.pyr-amt { width: 62px; text-align: right; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; padding-top: 1px; }
/* 빈 칸도 지우지 않는다 — 지우면 실제보다 촘촘해 보여 왜곡된다 */
.pyr-row.is-empty .pyr-names, .pyr-row.is-empty .pyr-amt { color: var(--muted); }
.pyr-row.is-empty .pyr-bar { opacity: .45; }
.pyr-note { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin-top: 9px;
  padding-top: 8px; border-top: 1px solid var(--line); }

/* 문의·정정 창구 (D-27) — 면책 고지와 함께 배치한다 */
.contact { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.contact a { color: var(--text); font-weight: 600; }
.contact .muted { color: var(--muted); }
#detail .dt-fix { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 3px 7px; }
#detail .dt-fix a { color: var(--text); font-weight: 600; }
#detail .dt-fix-note { flex: 1; min-width: 180px; }

/* 산정 기준 팝업 안의 문의 링크 — 규칙을 읽은 자리에서 바로 제보 (D-27) */
#intro .m-contact { margin: 6px 0 14px; }
#intro .m-contact a { display: inline-block; font-weight: 700; color: var(--text);
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; text-decoration: none; }
#intro .m-contact a:active { background: var(--line); }

/* 하천 — 땅 위에 얹되 클릭을 가로채지 않는다 */
#map .rpath { fill: var(--water); stroke: none; pointer-events: none; }

/* 전국 육지 밑그림 — 깊은 단계에서 주변이 바다로 보이지 않게 (서울 옆은 경기도다) */
#map .landpath { fill: var(--land); stroke: none; pointer-events: none; }

/* 만들기 안내 — 대상이 적거나 많을 때 다른 범위를 권한다 (M-03) */
#bd-msg { line-height: 1.6; }
#bd-msg button { font: inherit; font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 11px; margin-top: 6px; cursor: pointer; display: inline-block; }
#bd-msg button:active { background: var(--line); }

/* ── 약관·방침 페이지 ────────────────────────────────────────────────
   고정 URL 이 있어야 외부에서 참조할 수 있고 법적으로도 인용이 된다.
   그래서 모달이 아니라 별도 페이지로 둔다. */
.doc { padding: 18px 14px 60px; line-height: 1.75; font-size: 13.5px; }
.doc h1 { font-size: 20px; margin: 6px 0 14px; }
.doc h2 { font-size: 15px; margin: 26px 0 8px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.doc p { margin: 8px 0; }
.doc ol, .doc ul { margin: 8px 0; padding-left: 20px; }
.doc li { margin: 5px 0; word-break: keep-all; }
.doc ul ul { margin: 4px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.doc table { table-layout: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: 7px 8px; text-align: left;
  vertical-align: top; white-space: normal; overflow: visible; text-overflow: clip;
  word-break: keep-all; }
.doc th { background: var(--panel); color: var(--muted); font-weight: 600; }
.doc-back { font-size: 12.5px; }
.doc-back a { color: var(--text); font-weight: 600; }
.doc-date { color: var(--muted); font-size: 12.5px; }
/* 출시 전 표시 — 검토가 끝나면 페이지에서 이 문단을 지운다 */
.doc-draft { background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }

/* 푸터의 약관 링크 */
.legal { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.legal a { color: var(--text); font-weight: 600; }

/* 급지 추출 — 이미지 저장 / 링크 복사 / 공유 (두 통로) */
.sharerow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sharerow .gobtn { flex: 1 1 0; min-width: 0; text-align: center;
                   justify-content: center; }   /* 두 단추 폭을 똑같이 */
.bd-share2 { background: var(--panel); color: var(--text); }
.sharemsg { min-height: 16px; margin: 6px 2px 0; font-size: 12px; color: var(--muted);
            overflow-wrap: anywhere; }
.sharenote { padding-top: 2px; }

/* ── CI (아파트 급지 스캐너) ─────────────────────────────────────────
   마크 = 지도 램프의 세 칸(낮음·중간·높음). 디자인 A안(seq-2/4/6).
   ⚠ 색을 값으로 박지 말고 **토큰**으로 둔다 — 다크모드는 램프가 뒤집히므로
   토큰을 쓰면 로고도 함께 뒤집혀 배경 대비가 유지된다(값을 박으면 글자가 묻힌다).
   C안(seq-1)은 흰 배경 대비 1.12:1 이라 첫 칸이 사라져 쓰지 않았다. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 54px; height: 41px; flex: 0 0 auto; }
.bm-frame { fill: none; stroke: var(--seq-6); stroke-width: 3; }
.bm-b1 { fill: var(--seq-2); }
.bm-b2 { fill: var(--seq-4); }
.bm-b3 { fill: var(--seq-6); }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 워드마크 = **글자를 패스로 뜬 로고타이프**(scripts/make_wordmark.py).
   폰트를 링크로 부르지 않는 이유: 웹폰트 CDN 을 쓰면 방문자 IP 가 그 서버로 나가
   개인정보처리방침(처리위탁)이 바뀐다. 패스로 박으면 외부 요청 0 · 어느 기기에서나 같은 모양.
   원본 서체 Pretendard (SIL OFL 1.1) — 오픈 라이선스라 로고 사용에 제약이 없다. */
.brand-text h1 { margin: 0; line-height: 0; }
.brand-word { display: block; height: 21px; width: auto; fill: var(--seq-6); }
.brand-sub { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
             /* 워드마크와 **같은 색**을 옅게. 회색을 쓰면 브랜드 밖 색이 하나 늘고,
                같은 진하기로 두면 워드마크와 층이 사라진다. */
             color: var(--seq-6); opacity: .72; }
@media (max-width: 380px) {
  .brand-mark { width: 44px; height: 33px; }
  .brand-text h1 { font-size: 18px; }
  .brand-sub { font-size: 10.5px; }
}