/* index2 워크벤치 스타일 — index2.html 인라인 <style>에서 분리(내용 무변경) */
/* ============================================================
   index2 — 지도 상시 + 우측 세로 탭 워크벤치.
   index.html(모바일)과 백엔드 공유. 경사·사면향 화살표, 시간별 그림자(해 UI),
   Chart.js 월별 발전량, 판정 지점 마커, 전용 보고서 창까지 index 자산을 이식했다.
   ============================================================ */
:root {
  /* index.html과 동일한 팔레트 — 두 화면의 브랜드 톤을 맞춘다 */
  --sun:#F5A623; --sun-light:#FFF8E7; --sun-mid:#FDEBC4;
  --green:#2D6A4F; --green-light:#D8F3DC; --green-mid:#95D5B2;
  --sky:#1B4F72; --sky-light:#EAF4FB; --sky-mid:#AED6F1;
  --red:#C0392B; --red-light:#FDEDEC;
  --text:#1A1A18; --muted:#5D6D7E; --hint:#6B7784;
  /* --hint 는 #AAB7B8 이었다(흰 바탕 대비 2.06). 출처·원문·연계값처럼 판단 근거가 되는 글이
     이 색으로 찍혀 데스크톱에서도 읽기 어려웠다(2026-09-04 검토). #6B7784 는 흰 바탕 4.6,
     연한 카드 바탕(sun-light 등) 위 4.3 — 본문(--muted 5.3)보다 한 눈금만 옅어 위계는 남긴다. */
  --bg:#F8F9FA; --surface:#FFFFFF; --border:#E5E8EB;

  /* ── 글자 크기 척도 ─────────────────────────────────────────────────────
     패널(#panel) 글자는 <b>이 일곱 단계만</b> 쓴다. 새 요소를 만들 때도 여기서 고른다.
     ⚠ 2026-09-04 이전에는 크기를 필요할 때마다 직접 박아 <b>19종</b>이 됐다(실측: 글자
     요소 776개). 그중 본문 덩어리 408개가 13.5·13·12.5·12 네 가지로, 작은 글자 295개가
     11.5·11·10.5·10·9.5 다섯 가지로 갈려 있었다 — 0.5px 차이는 사람이 못 읽으므로
     위계가 아니라 들쭉날쭉함으로만 보였다. 단계 사이를 눈에 보일 만큼 벌리고 수를 줄인다.
     바닥은 11px 이다(그 아래는 만들지 않는다).
     ※ 지도 위 도구·범례·모달은 이 척도를 쓰지 않는다 — 좁은 화면을 나눠 쓰는 라벨이라
       읽는 글과 기준이 다르다(해당 블록 주석 참고). */
  --fs-num:20px;      /* 요약 KPI·투자비 같은 '답'이 되는 숫자 */
  --fs-chap:19px;     /* 장 제목(종합판정·입지분석…) */
  --fs-lead:17.5px;   /* 판정 이름 등 장 안의 머리 */
  --fs-head:15px;     /* 카드·섹션 제목 */
  --fs-body:13.5px;   /* 본문·표 본문 — 읽는 글은 전부 이것 */
  --fs-label:12px;    /* 라벨·표 머리·보조 설명 */
  --fs-mini:11px;     /* 배지·알약·각주·출처 */
  --green-bg:var(--green-light); --amber-bg:var(--sun-light); --blue-bg:var(--sky-light);
  --red-bg:var(--red-light); --blue:var(--sky); --amber:#9A6200;
  /* 호박색 글자는 #B9770E 였다(흰 바탕 대비 3.7, 연노랑 바탕 3.5 — AA 4.5 미달). 확인 필요 알약·
     카드 제목·수치가 이 색이라 #9A6200(흰 5.1 · 연노랑 4.8)으로 일괄 내렸다(2026-09-04). */
  --r:14px; --rs:9px; --top:44px;
  /* 패널 폭 — <b>내용이 정하는 값</b>이지 화면의 절반이 아니다. 예전 clamp(470,46vw,860)은
     1920 화면에서 860px(44.8%)라 지도를 반 가까이 덮었는데, 실측해 보니 그 860px 를
     요구하는 내용이 하나도 없었다(사용자 제기 → 전 탭 훑어 확인):
       · 상한 720px(2026-09-04 실측으로 680 → 720). 근거 둘 —
         ⑴ 판정 항목 격자(.fx-grid)의 칸 폭: 680 에서 2열 266px 이라 긴 제목이 접혔다
            (의성 203-4: 제목 11개 중 '주거밀집지역(10호 이상) 미달' 1개가 두 줄). 720 이면
            287px 이 되어 접힘이 0 이 된다(760 은 307px, 역시 0).
         ⑵ 금액 자릿수가 큰 필지(순창 210: 2,489만원/년 · 207만원/월)에서 '예상 순수익' KPI 가
            720px 아래일 때 두 줄이 됐다(65 → 93px). 720 은 그 경계를 함께 넘는다.
         ⚠ <b>767px 이 절벽이다</b> — 카드 안쪽 폭이 644px(=200×3+22×2)를 넘는 순간 .fx-grid 가
            auto-fit 으로 <b>3열</b>이 되며 칸이 217px 로 <b>되레 좁아진다</b>(820px 실측:
            3열 217px · 지도만 140px 손해). 그래서 상한은 767 미만이어야 하고, 720 은 그
            절벽에서 47px 여유를 둔 값이다(글꼴·항목명이 조금 길어져도 견딘다).
         ※ 세로는 이 조정으로 거의 안 준다(스크롤 11.0 → 10.6화면) — 가로를 넓혀 세로를 줄이려는
            시도는 여기서 효과가 없다.
       · 하한 580px = 수익분석 시나리오 표(보수·기준·낙관 4열)가 안 잘리는 폭.
         표 실폭은 금액 자릿수를 따라 451~463px 로 움직이는데(필지별), 가장 긴 쪽에 여유를
         둔 값이다(실측: 545px 에서 12px 잘림 · 560px 부터 안 잘림).
       · 38vw = 두 값 사이를 잇는 기울기. 1920→720(상한에 걸림) · 1600→608 · 1366→580(하한).
     결과: 1920 화면에서 지도 1200px(62.5%) · 패널 720px(37.5%). 긴 근거 문장의 한 줄도 그만큼 짧아져
     읽기에도 낫다(예전 주석이 걱정하던 바로 그 문제다). */
  --panel:clamp(580px, 38vw, 720px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
/* 글꼴은 index.html과 같은 스택 — 두 화면을 오가도 같은 서체로 보이게 */
body { font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif; background:var(--bg);
  color:var(--text); font-size:14px; line-height:1.55; }
button { font-family:inherit; cursor:pointer; }
a { color:var(--blue); }

/* ── 상단 바 (얇게) ── */
#topbar { display:flex; align-items:center; gap:10px; padding:0 14px;
  background:linear-gradient(160deg,#0D2137 0%,#1B4F72 55%,#2D6A4F 100%);
  color:#fff; height:var(--top); }
/* 로고와 액션이 양쪽에서 같은 몫(flex:1)을 가져가므로 '검색 묶음'이 화면 정중앙에 선다.
   좁아지면 입력창이 먼저 줄고(flex-shrink), 그래도 모자라면 액션 쪽이 밀고 들어온다. */
#topbar .logo { flex:1; font-weight:900; font-size:15px; white-space:nowrap; }
#topact { flex:1; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
#searchgrp { flex:0 1 auto; display:flex; align-items:center; gap:9px; min-width:0; }
/* width 를 같이 줘야 한다 — flex-basis 만 두면 바깥 묶음의 폭 계산에 input 의
   기본 크기(≈225px)가 쓰여 검색창이 그만큼 쪼그라든다 */
/* 420px —— 560px 은 남아돌았다(실측 2026-08-31, 12px 기준): 가장 긴 글자인 placeholder
   전체가 342px, 실제로 넣는 가장 긴 주소('경상북도 의성군 봉양면 신평리 203-4')가
   239px 다. 220px 이 늘 빈 채로 상단바 한가운데를 차지했다.
   ⚠ 342px 이 바닥이다 — 이 아래로 줄이면 placeholder 뒤가 잘려 예시 주소 형식이 안 보인다
   (좁은 화면에서 안 잘리는 이유는 flex-shrink 가 아니라 아래 @media 의 56% 규칙이다).
   줄인 폭은 옆 예시 칩(#exwrap)이 가져간다 — 칩이 접히기 시작하는 창 너비가 그만큼 내려간다. */
#searchwrap { flex:0 1 420px; width:420px; position:relative; }
#exwrap { display:flex; align-items:center; gap:6px; }
/* 예시 칩 — index.html 검색 박스의 .ex-label/.ex 와 같은 모양.
   어두운 바 위라 알약에만 흰 배경을 깔았고 크기·radius·호버는 동일하다 */
.ex-lab { font-size:12px; color:rgba(255,255,255,.55); white-space:nowrap; }
/* 12px — 상단바의 다른 글자(예시 칩·용어사전·보고서)가 전부 12px 인데 검색창만 13px 라
   혼자 커 보였다(제보: '상단이 답답하다'). 줄 높이도 그만큼 낮아진다. */
#addr { width:100%; padding:7px 38px 7px 13px; border-radius:18px; border:1.5px solid transparent;
  font-size:12px; font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s; }
/* 포커스 링·실행 버튼은 index.html의 검색 UI와 같은 sun 계열 */
#addr:focus { border-color:var(--sun); box-shadow:0 0 0 3px rgba(245,166,35,.25); }
#addr::placeholder { color:var(--hint); }
#goBtn { position:absolute; right:3px; top:2px; bottom:2px; width:30px; border:none;
  border-radius:50%; background:linear-gradient(135deg,#F5A623,#E8960A); color:#fff;
  box-shadow:0 1px 6px rgba(245,166,35,.4); }
#cands { position:absolute; top:105%; left:0; right:0; background:#fff; border:1px solid var(--border);
  border-radius:var(--rs); box-shadow:0 8px 24px rgba(0,0,0,.2); display:none; z-index:90;
  max-height:300px; overflow-y:auto; }
#cands .cand-item { padding:8px 13px; font-size:var(--fs-body); color:var(--text); cursor:pointer; }
#cands .cand-item:hover { background:var(--green-bg); }
/* 엔터로 열렸을 때의 안내 — '왜 분석이 안 시작됐는지'를 목록 머리에서 답한다 */
#cands .cand-msg { padding:7px 13px; font-size:11.5px; font-weight:700; color:#784212;
  background:var(--sun-light); border-bottom:1px solid var(--sun-mid); cursor:default; }
#cands .cand-msg.cand-none { color:#784212; background:var(--sun-light); }   /* 후보 0건 — 안내가 아니라 경고 */
#cands.ask { animation:candask .9s ease 2; }
@keyframes candask { 0%,100% { box-shadow:0 8px 24px rgba(0,0,0,.2); }
  50% { box-shadow:0 0 0 3px var(--sun), 0 8px 24px rgba(0,0,0,.2); } }
.ex-chip { font-size:var(--fs-label); padding:5px 13px; border-radius:20px; border:1px solid var(--border);
  background:rgba(255,255,255,.92); color:var(--muted); white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s; }
.ex-chip:hover { border-color:var(--sun); color:#9A6200; background:var(--sun-light); }
#reportBtn { padding:6px 13px; font-size:12px; border:none; border-radius:16px;
  background:var(--sun); color:#0D2137; font-weight:800; white-space:nowrap; }
/* #rulesBtn 도 같은 규칙 — 2026-09-10 에 버튼을 추가하며 이 줄에 넣지 않아 브라우저 기본 버튼(13.3px·1px 6px 여백)에
   v3 의 둥근 테두리만 얹힌 채로 옆 두 버튼과 키·글자가 달랐다(제보 2026-09-12). */
#rulesBtn, #glossBtn { padding:6px 13px; font-size:12px; border:1px solid var(--border); border-radius:16px;
  background:#fff; color:var(--text); font-weight:700; white-space:nowrap; }
#rulesBtn:hover, #glossBtn:hover { border-color:var(--sun); background:var(--sun-light); }
/* 외부 API 에 문제가 있으면 판단 기준 버튼에 빨간 점 — 자세한 사유는 창 상단 표(#apiHealth). 점은 글자 밖
   오른쪽 위에 걸쳐 버튼 폭을 바꾸지 않는다. */
#rulesBtn { position:relative; }
#rulesBtn.warn { border-color:#E05A4E; color:#B3261E; }
#rulesBtn.warn::after { content:''; position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%;
  background:#E5342B; border:2px solid #fff; box-shadow:0 0 0 1px rgba(229,52,43,.35); }
/* 판단 기준 창 상단 — 외부 API 상태 표. 실패 행은 붉은 바탕, 정상은 초록 점, 아직 안 부른 것은 회색 점. */
#apiHealth { margin:0 0 10px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; }
#apiHealth .ah-head { display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:11.5px; font-weight:800;
  background:#F4F6F8; border-bottom:1px solid var(--border); }
#apiHealth .ah-head .ah-sum { font-weight:600; color:var(--muted); }
#apiHealth .ah-head .ah-sum.bad { color:#B3261E; }
#apiHealth .ah-head button { margin-left:auto; font-size:10.5px; padding:2px 8px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--muted); cursor:pointer; }
#apiHealth .ah-row { display:grid; grid-template-columns:12px 1fr auto; gap:0 8px; align-items:start; padding:5px 10px;
  border-top:1px solid #EEF1F4; font-size:11px; line-height:1.45; }
#apiHealth .ah-row:first-of-type { border-top:0; }
#apiHealth .ah-row.fail { background:#FFF3F2; }
#apiHealth .ah-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; background:#B9C2CC; }
#apiHealth .ah-row.ok .ah-dot { background:#2E9E5B; }
#apiHealth .ah-row.fail .ah-dot { background:#E5342B; }
#apiHealth .ah-name { font-weight:700; color:var(--text); }
#apiHealth .ah-why { grid-column:2 / 4; color:#8A2A22; font-size:10.5px; word-break:break-all; }
#apiHealth .ah-row.ok .ah-why { color:var(--muted); }
#apiHealth .ah-t { color:var(--hint); font-size:10.5px; white-space:nowrap; }
#apiHealth .ah-none { padding:8px 10px; font-size:11px; color:var(--muted); }

/* ── 용어 사전 — 어려운 행정·전기 용어를 쉬운 말로. 분석 결과를 읽다 막히면 여기로 ── */
#glossWrap { display:none; position:fixed; inset:0; z-index:60; background:rgba(13,33,55,.45); }
/* height 를 고정한다(max-height 아님) — 검색으로 목록이 줄면 상자가 같이 줄어들고
   가운데 정렬이라 위아래로 튄다. 높이를 붙박아 두면 목록만 바뀌고 창은 제자리에 있는다. */
#gloss { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(680px, 92vw); height:min(78vh, 720px); display:flex; flex-direction:column;
  background:#fff; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.3); overflow:hidden; }
#gloss .g-head { display:flex; align-items:center; gap:10px; padding:14px 18px 10px;
  border-bottom:1px solid var(--border); }
#gloss .g-head h3 { margin:0; font-size:15px; }
#gloss .g-head input { flex:1; padding:7px 12px; font-size:12.5px; border:1px solid var(--border);
  border-radius:16px; outline:none; }
#gloss .g-head input:focus { border-color:var(--sun); }
#gloss .g-x { border:none; background:none; font-size:18px; color:var(--hint); cursor:pointer; padding:2px 6px; }
#gloss .g-body { overflow-y:auto; padding:8px 18px 16px; }
#gloss .g-grp { font-size:11px; font-weight:800; color:var(--hint); letter-spacing:.4px;
  margin:12px 0 4px; }
#gloss .g-item { padding:7px 0; border-bottom:1px dashed var(--border); font-size:12.5px; line-height:1.65; }
#gloss .g-item b { display:block; font-size:12.5px; }
#gloss .g-item .g-d { color:var(--muted); }
#gloss .g-item .g-why { color:#7E5109; font-size:11.5px; margin-top:1px; }
#gloss .g-none { color:var(--hint); font-size:12px; padding:16px 0; text-align:center; }

/* 애매 항목 AI 검토 카드 */
.aj-btn { margin-top:8px; padding:7px 16px; font-size:12px; font-weight:800; border:none;
  border-radius:16px; background:var(--sky-light); color:#1B4F72; cursor:pointer; }
.aj-btn:hover { filter:brightness(.96); }
.aj-btn:disabled { opacity:.6; cursor:default; }
.aj-item { padding:8px 0; border-top:1px dashed var(--border); font-size:var(--fs-body); line-height:1.65; }

/* ── 본문: 지도(좌) + 패널(우), 탭은 패널 왼쪽에 붙는 띠지 ── */
/* position:relative — 탭 띠지(#rail)를 패널 왼쪽 가장자리에 절대배치하는 기준 */
#stage { display:flex; height:calc(100vh - var(--top)); position:relative; }
/* 패널이 넓어져도 지도가 필지+이격반경(수백 m)을 담을 최소폭은 지킨다 */
#mapcol { flex:1; min-width:420px; position:relative; display:flex; flex-direction:column; }
#olmap { flex:1; min-height:0; background:#DDE5E0; }

/* 지도 위 컨트롤 */
/* 지도 도구 — 좌상단 세로 카드 2장(레이어 / 분석 도구). 제목이 있어야 켜고 끄는 것(레이어)과
   하나만 켜는 것(분석)이 다른 성격임이 읽힌다. 가로 칩은 8항목부터 줄바꿈이 지저분해진다 */
/* 컬럼을 지도 높이만큼 잡아 두면 마지막 항목(출처)을 margin-top:auto 로 바닥에 붙일 수 있다.
   대신 카드 사이 빈 공간이 지도를 덮으므로 컨테이너는 클릭을 통과시키고 자식만 받는다
   (안 그러면 왼쪽 162px 폭에서 지도 클릭·드래그가 죽는다). */
/* 좌: 레이어 · 우: 분석 도구. 한 컬럼에 다 담으면 지도 높이를 넘겨 스크롤이 생겼다.
   2열 버튼 배치도 시도했으나 라벨이 촘촘해 읽기 나빠 1열로 되돌리고, 대신 카드를 좌우로 갈랐다.
   height 가 아니라 max-height 다: 내용이 짧으면 컬럼이 그만큼만 차지해 지도 좌하단이 열린다.
   스크롤은 남겨 두되(아주 낮은 창의 안전판) 평상시에는 걸리지 않는 것이 목표다. */
/* 폭 152px — 실측으로 정했다. 안에 들어가는 것 중 가장 넓은 것이 하한이고, 그 하한은
   <b>3D 에서만 나타나는 행</b>이 쥐고 있다:
     #mapmode 3D 행('🧭 북쪽 정렬' + 여백 3 + '⛰️ 지형 음영') 134.5px — 컬럼 145px 에서
     한 줄로 서고 144px 에서 접힌다(실측). · 3버튼 한 줄(위성·일반·다크) 128.3px
     · 레이어 최장 라벨('📍 이격 대상') 83px
   → 하한 145px 에 글꼴이 달라질 여지 7px 을 얹어 152px(안쪽 폭 142px, 여유 7.5px).
   ⚠ 112px 이던 시절 3D 에서 오른쪽이 <b>잘렸다</b>(제보: '🌙 다크'가 초승달만, '지형 음영'이
   '지형'만 보였다). 위 하한 목록에서 3D 전용 둘(🌙 다크 · 북쪽 정렬·지형 음영 행)이 빠진 채
   2D 화면만 보고 잰 값이었고, .mm 은 white-space:nowrap 이라 좁아지지 못한 채 컬럼의
   overflow-x:hidden 에 그대로 베였다.
   ('📍 분석 필지로' 95px 도 하한이었으나 그 버튼이 아이콘만 남아 빠졌다.)
   예전 162px 은 근거 없이 넓었다(주석에 '버튼 44px×3' 이라 적혀 있었으나 실측은 3버튼 합
   72px). 그중 10px 은 여전히 지도 몫이다. */
#maptools { position:absolute; top:10px; left:10px; z-index:6; display:flex; flex-direction:column;
  gap:8px; width:152px; max-height:calc(100% - 20px); overflow-y:auto; overflow-x:hidden;
  pointer-events:none; }
/* 분석 도구 컬럼 — 옛 #maptopbar 가 쓰던 지도 위쪽 자리. 오른쪽 위는 지금 비어 있다
   (#mapCredit·#mapLegend 는 아래, #rail 은 패널 쪽). 폰에서는 이 컬럼 자체가 '분석도구'
   버튼으로 열리는 좌측 팝오버가 된다(아래 @media 640). 빈 컬럼은 클릭을 먹지 않는다. */
/* 폭을 좌측(152px)과 맞추지 않는다. 좌측은 #mapmode 의 3D 행(북쪽 정렬·지형 음영)이
   하한을 정해 152px 아래로 못 내려가는데, 이 컬럼에는 그런 제약이 없어 그대로 따라가면
   오른쪽에 빈 여백만 남는다. 두 컬럼은 지도 반대편에 떨어져 있어 나란히 비교되지 않으므로
   폭이 달라도 어긋나 보이지 않는다 — 통일성은 '컬럼 안에서' 지키면 된다.
   fit-content: 가장 긴 라벨('⛰️ 경사·사면향')이 폭을 정하고, 그보다 좁아지지는 않는다. */
/* right 는 10px 가 아니라 42px 다. 넓은 화면에서 #rail(세로 탭 띠지)이 지도 오른쪽 끝
   31px 을 차지하는데(z8), 10px 로 두면 이 컬럼이 그 <b>밑으로</b> 깔려 버튼이 가려진다
   (실측 1600px 폭: 레일 x833~864, 컬럼 x740~854 → 21px 겹침).
   좁은 화면에서는 레일이 지도 아래로 내려가 가로로 눕는데, 그때는 여백만 조금 남을 뿐이라
   해가 없다. 아래 #mapLegend 도 같은 이유로 같은 값을 쓴다. */
#maptoolsR { position:absolute; top:10px; right:42px; z-index:6; display:flex; flex-direction:column;
  gap:8px; width:fit-content; max-width:162px; max-height:calc(100% - 20px);
  overflow-y:auto; overflow-x:hidden; pointer-events:none; }
/* 카드를 flex 열로 — width:100% 인 버튼은 fit-content 계산에서 0 으로 접혀 카드가 라벨 폭을
   못 따라간다. flex 열의 stretch 는 반대로 <b>가장 긴 버튼이 폭을 정하고 나머지가 그 폭까지
   늘어난다</b>. auto 로만 두면 버튼마다 폭이 달라(98·69·83px) 켜짐 배경이 들쭉날쭉해진다. */
#maptoolsR .mapcard { min-width:0; }
/* 버튼 사이 3px — 여백이 곧 구분선이다. 켜진 버튼(초록 알약)이 여러 개 이어지면 경계가
   없어 한 덩어리로 보인다(제보: 필지~이격 대상 5개가 초록 기둥 하나처럼).
   두 카드 모두에 건다 — 폰만 고쳤더니 데스크톱 레이어 카드가 그대로였다(제보).
   숨긴 머리글(#maptools > .mapcard > h4)은 display:none 이라 gap 을 만들지 않는다. */
#maptools > .mapcard, #maptoolsR > .mapcard {
  display:flex; flex-direction:column; gap:3px; }
/* 묶음 첫 버튼 —— 묶음 경계는 <b>가는 선</b>으로 긋는다.
   여백만으로 나눠 봤더니(6px→12px) 벌릴수록 카드에 빈 구멍이 생겨 보였다: 6px 은 경계로
   안 읽히고(32px 과 38px 는 '간격이 들쭉날쭉'으로 보인다), 12px 은 읽히지만 흰 공백이
   덩그러니 남는다(제보). 선은 1px 만 쓰고 여백을 12px 로 되돌려도 경계가 서기 때문에
   같은 구조를 절반의 빈자리로 만든다.
   선은 <b>버튼 안쪽 여백(8px)에 맞춰 들여 긋는다</b> — 카드 테두리까지 끌면 카드가 3등분된
   것처럼 무거워지고, 카드 폭이 가장 긴 라벨을 따라 늘었다 줄었다 하는 것도 그대로 드러난다.
   ::before 로 그린다: DOM 을 늘리지 않고, flex 열의 칸 수(gap 계산)도 건드리지 않는다.
   소제목으로는 못 나눈다 — 데스크톱은 카드 머리글이 display:none 이라(여닫이 버튼이 곧
   머리다) 묶음 제목만 남으면 정체 모를 글자가 된다. 순서와 이 선이 제목 몫을 한다. */
.mapcard .mt.grp { margin-top:9px; position:relative; }
.mapcard .mt.grp::before { content:''; position:absolute; left:8px; right:8px; top:-6px;
  height:1px; background:var(--border); }
#maptoolsR .mt { width:auto; }
#maptoolsR > * { pointer-events:auto; }
#maptools > * { pointer-events:auto; }
/* 지도 도구 여닫이 —— 버튼 두 개(레이어 · 분석 도구)는 <b>양쪽 화면 모두</b>에 있다.
   자리만 다르다: 폰은 왼쪽 위 #mtBar 에 나란히, 데스크톱은 각자 제 카드 머리로 간다
   (placeMapMode 가 DOM 을 옮긴다). #mtBar 는 데스크톱에서 비므로 숨긴다. */
#mtBar { display:none; }
#mtLayers, #mtTools { display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--border); background:rgba(255,255,255,.96); color:var(--text);
  font-size:var(--fs-mini); font-weight:700; padding:6px 11px; border-radius:15px; white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.14); }
#mtLayers:hover, #mtTools:hover { background:#fff; }
#mtLayers.on, #mtTools.on { background:var(--green); border-color:var(--green); color:#fff; }
/* 캐럿은 <b>누르면 패널이 어느 쪽으로 움직이는지</b>를 말한다 — 이 두 카드는 버튼 아래로
   펼쳐지므로 접힘이 ▾(내려온다) · 펴짐이 ▴(올라가 접힌다)다.
   범례(#lgToggle)는 버튼 <b>위로</b> 펼쳐져 방향이 반대인데, 규칙은 같다. */
#mtLayers::after, #mtTools::after { content:'▾'; font-size:var(--fs-mini); color:var(--hint); }
#mtLayers.on::after, #mtTools.on::after { content:'▴'; color:rgba(255,255,255,.75); }

/* 접힘/펴짐 —— 접었을 때 사라지는 범위가 화면마다 다르다.
   데스크톱은 <b>카드만</b> 접힌다: 같은 컬럼의 배경·시점 패널(#mapmode)과 'ⓘ 데이터 출처'는
   카드가 아니라 상시 컨트롤이라 남아야 한다. 폰은 팝오버 자체가 통째로 사라진다
   (아래 @media 640 의 #maptools / #maptoolsR 규칙). 두 경우 모두 상태 클래스는 .mt-open 하나다.
   display 값을 카드마다 따로 쓴다 — 왼쪽 레이어 카드는 블록, 오른쪽 분석 도구 카드는
   flex 열이다(가장 긴 버튼이 폭을 정하게 하려고. 위 #maptoolsR .mapcard 주석 참고). */
/* 카드 안 제목(<h4>🗺️ 레이어 / 📐 분석 도구)은 없앤다 — 여닫이 버튼이 곧 그 카드의 머리라
   같은 말이 위아래로 두 번 나온다. 카드마다 세로 20px 도 돌려받는다.
   DOM 에는 남겨 둔다(display:none) — 보고서·검색 등 다른 코드가 이 카드를 훑을 때의 이름이다. */
#maptools > .mapcard > h4, #maptoolsR > .mapcard > h4 { display:none; }
/* 접힘·펴짐은 display 가 아니라 max-height 로 — display 는 전환이 붙지 않아 뚝 끊긴다.
   접힌 카드는 높이·여백·테두리·그림자를 전부 0으로 눌러 흔적 없이 사라지고(margin-top:-8px 는
   컬럼 gap 8px 상쇄), 펼 때 그 값들이 함께 자라며 스르륵 내려온다.
   max-height 480px 는 레이어 카드 실측(~310px)의 여유값 — 너무 크게 잡으면 '닫히는' 전환에서
   실높이까지 내려오는 동안 아무 일도 없는 구간이 생겨 반응이 굼떠 보인다. */
#maptools > .mapcard, #maptoolsR > .mapcard { overflow:hidden; max-height:0; opacity:0;
  margin-top:-8px; padding-top:0; padding-bottom:0; border-width:0; box-shadow:none;
  transition:max-height .28s ease, opacity .2s ease, margin .28s ease,
             padding .28s ease, border-width .28s ease; }
#maptools.mt-open > .mapcard, #maptoolsR.mt-open > .mapcard { max-height:480px; opacity:1;
  margin-top:0; padding:7px; border-width:1px; box-shadow:0 2px 10px rgba(0,0,0,.14); }
/* 배경 지도 모드(위성/일반 · 2D/3D) — 레이어 카드와 성격이 달라 알약 패널로 분리.
   세그먼트 토글: 라벨이 '동작'이 아니라 '현재 상태'이고, 켜진 쪽이 강조된다
   (라벨만 바꾸는 단일 버튼은 위성이 켜진 건지 누르면 켜지는 건지 늘 헷갈렸다). */
/* 지도 설정 여닫이는 폰 전용 — 데스크톱은 도구 컬럼에 자리가 남아 접을 이유가 없다 */
#mmToggle { display:none; }
/* display:contents — 데스크톱에서는 이 두 래퍼가 <b>없는 셈</b>이 되어 안의 행들이 그대로
   #mapmode 의 플렉스 항목이 된다. 폰 구조(머리 + 따로 뜨는 카드)를 위해 만든 상자라,
   데스크톱 레이아웃은 한 픽셀도 달라지지 않아야 한다. */
#mmHead, #mmBody { display:contents; }
#mapmode { display:flex; flex-direction:column; gap:3px; padding:4px;
  background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.14); }
/* flex-wrap:wrap 는 <b>안전판</b>이다. 평소에는 아무 일도 하지 않는다(컬럼 폭이 가장 넓은
   행보다 넓다 — 위 152px). 다만 .mm 은 white-space:nowrap 이라 폭이 모자라면 줄지 못하고 컬럼의
   overflow-x:hidden 에 잘리는데(3D 에서 실제로 그랬다), 잘린 글자는 무엇을 누르는 버튼인지
   읽을 길이 없다. 라벨이 길어지거나 글꼴이 달라져 다시 폭이 모자라면 잘리는 대신 접히게 둔다. */
.mm-row { display:flex; flex-wrap:wrap; gap:3px; }
/* 데스크톱 전용 — 📍 를 2D·3D 행 <b>옆</b>으로 접어 한 행을 없앤다(≈88 → 57px).
   폰은 #mmHead(📍·⚙️ 상시) / #mmBody(설정 카드) 구조가 따로 있으므로 건드리지 않는다.
   방법: 세로 한 줄씩 쌓던 것을 'row wrap' 으로 바꾸고, 혼자 한 줄을 써야 하는 행에만
   width:100% 를 준다. 2D·3D 행은 flex:1 1 0(기준폭 0)이라 📍 를 놓고 남는 폭을 가져간다 —
   기준폭이 auto 면 내용폭(≈60px)+📍(26px)이 안쪽 폭(102px)에 아슬아슬해 줄이 접힐 수 있다.
   순서(order)는 배경 → 2D·3D + 📍 → 3D 옵션. DOM 은 폰 구조를 따르므로 여기서만 뒤집는다. */
@media (min-width:641px) {
  #mapmode { flex-flow:row wrap; align-items:center; }
  #mmBody > .mm-row:nth-child(1) { order:1; width:100%; }   /* 위성·일반·다크 */
  /* min-width:0 이 <b>줄바꿈 방지</b>다. 이게 없으면 이 행의 자동 최소폭(내용폭 73.1px)이
     줄나눔 계산에 그대로 쓰여 73.1 + 여백 3 + 📍 26 = 102.1px 로 안쪽 폭 102px 를
     0.1px 넘겨 📍 가 아래로 떨어졌다(실측). 0 으로 풀면 줄은 반드시 붙고, 실제로는
     남는 폭 75px 을 받아 내용폭보다 넓으므로 글자가 눌리지도 않는다. */
  #mmBody > .mm-row:nth-child(2) { order:2; flex:1 1 0; min-width:0; }   /* 2D·3D */
  #mmHomeRow { order:3; flex:none; }                        /* 📍 */
  #mmNorthRow { order:4; width:100%; }                      /* 북쪽 정렬·지형 음영(3D) */
}
.mm { flex:1; border:none; background:none; border-radius:14px; padding:5px 2px;
  font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; text-align:center; }
.mm:hover { background:var(--bg); }
.mm.on { background:var(--green); color:#fff; }

.mapcard { background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 2px 10px rgba(0,0,0,.14); padding:7px; }
.mapcard h4 { font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.04em;
  padding:3px 7px 6px; margin:0; }
.mt { width:100%; display:flex; align-items:center; gap:7px; border:none; background:none;
  font-size:12px; color:var(--text); padding:6px 8px; border-radius:8px; text-align:left;
  white-space:nowrap; }
.mt:hover { background:var(--bg); }
.mt.on { background:var(--green); color:#fff; font-weight:700; }
.mt-hint { font-size:10px; color:var(--hint); padding:4px 8px 2px; line-height:1.5; white-space:normal; }
.bb-btn { display:flex; flex-direction:column; align-items:center; line-height:1.25;
  border:none; background:none; border-radius:15px; padding:4px 11px; font-size:11.5px;
  font-weight:700; color:var(--muted); white-space:nowrap; transition:background .12s, color .12s; }
.bb-btn small { font-size:9px; font-weight:600; color:var(--hint); }
.bb-btn:hover { background:var(--bg); }
.bb-btn.on { background:var(--sky); color:#fff; }
.bb-btn.on small { color:rgba(255,255,255,.75); }
/* 도로 기준을 고를 수 없을 때 그 이유를 대신 놓는 자리(#basisBar 와 같은 줄).
   '없어졌다'와 '못 불러왔다'는 사용자가 할 일이 다르므로 후자만 눈에 띄게 한다. */
#basisNone { display:flex; align-items:center; gap:5px; padding:0 6px; font-size:10.5px;
  font-weight:700; color:var(--hint); white-space:nowrap; }
#basisNone.warn { color:#B26A00; }
#basisNone button { border:none; background:var(--sky); color:#fff; border-radius:12px;
  padding:3px 9px; font-size:10.5px; font-weight:700; }
/* 도로 기준 — 범례 상자 안, 색상 범례 바로 위. 팝오버(누르기 전엔 안 보임)와 상단 바
   (지도 위쪽을 상시 점유)를 둘 다 거쳐 여기로 왔다. 켜져 있는 도로가 어느 데이터인지와
   그 색이 무엇인지가 한 상자 안에서 같이 읽힌다. */
#lgRoad #basisBar { display:flex; flex-direction:column; gap:3px; padding:0 4px 3px; }
/* 한 줄짜리 버튼이다. 부제(정밀·전수 / 주요도로)는 범례 제목 옆으로 나갔다 — 두 줄이면
   버튼 두 개가 범례를 30px 넘게 늘렸고, 어차피 한 번에 하나만 적용된다. */
/* 9.5px — 범례 본문(.mt-leg)과 같은 눈금이다. 이 버튼은 범례 안의 보조 컨트롤이라
   본문보다 클 이유가 없고, 두 줄(23px×2)이 범례 높이의 5분의 1을 쓰고 있었다.
   이름이 길어도(‘국가기본도_차도링크’) 152px 안에 한 줄로 들어간다. */
#lgRoad .bb-btn { display:block; width:100%; padding:3px 6px; border:1px solid var(--border);
  border-radius:7px; background:none; font-size:9.5px; font-weight:700; color:var(--muted);
  line-height:1.3; text-align:left; white-space:nowrap; }
#lgRoad .bb-btn:hover { background:var(--bg); }
#lgRoad .bb-btn.on { background:var(--green); color:#fff; border-color:var(--green); }
#lgRoad .bb-btn.on small { color:rgba(255,255,255,.85); }
#lgRoad #basisNone { font-size:9.5px; font-weight:700; color:var(--hint); line-height:1.45;
  padding:0 5px 5px; white-space:normal; }
#lgRoad #basisNone.warn { color:#B26A00; }
#lgRoad #basisNone button { border:none; background:var(--sky); color:#fff; border-radius:10px;
  padding:2px 7px; font-size:9.5px; font-weight:700; margin-top:3px; }

/* 레이어 행 바로 밑에 붙는 미니 범례(도로 등급색·건물 구분) */
/* 행 간격 0 — 항목마다 아이콘·글자가 이미 한 줄 높이를 갖고 있어 사이를 띄우지 않아도
   읽힌다. 도로 범례가 6행이라 1px 씩만 줄여도 눈에 띄게 짧아진다. */
.mt-leg { display:grid; grid-template-columns:1fr 1fr; gap:0 4px; padding:1px 8px 3px;
  font-size:9.5px; color:var(--muted); }
.mt-leg span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.mt-leg i { width:10px; height:3px; border-radius:2px; flex-shrink:0; }
.mt-leg i.sq { width:8px; height:8px; }

/* (#maptopbar·.mtb-div — 지도 위쪽을 가로로 잘라먹던 상시 도구바. 담긴 것이 '분석 필지로'와
   '도로 기준' 둘뿐이라, 앞은 #mapmode 맨 위로, 뒤는 지도 범례(#lgRoad)로 옮기고 없앴다.
   #basisMeta(제공기관·갱신일)도 함께 사라졌다 — 범례에 넣을 자리가 없고, 같은 내용이
   입지분석 탭 도로 항목에 상시로 있다.) */
/* 분석 필지로 — 상단바 시절의 알약을 그대로 가져왔다. 옆 세그먼트(.mm)와 색·모양이 다른
   것이 요점이다: 저것들은 고르는 것이고 이건 누르는 것이라, 같은 옷을 입히면 '켜짐' 으로
   읽힌다. 글자는 뗐다 — 📍 하나로 '그 자리로 돌아간다'가 읽히고(툴팁·aria 로 보강),
   라벨 때문에 한 행을 통째로 쓰던 것이 패널 높이의 3분의 1이었다. 폰이 이미 그렇게 쓰고
   있어 두 화면의 모양도 같아진다. */
#homeBtn { flex:none; display:flex; align-items:center; justify-content:center;
  width:24px; height:23px; padding:0; font-size:12.5px; line-height:1; color:#7E5109;
  border:1px solid var(--sun-mid); border-radius:12px;
  background:linear-gradient(180deg,#FFFDF7,#FFF3D6); transition:filter .12s; }
#homeBtn:hover { filter:brightness(.97); }
#basisBar { display:flex; align-items:stretch; }

/* 지도 클릭 정보 팝업.
   폭을 340px 로 넓혔다 — 지정현황·건물 목록이 붙으면서 310px 에서는 값이 자주 두 줄로 접혀
   그만큼 세로로 길어졌다. 가로를 조금 주는 편이 세로를 크게 줄인다.
   그래도 내용이 길어질 수 있으므로 본문에 max-height 를 걸어 '지도 안에 항상 들어가는 크기'로
   묶는다. 이게 없으면 autoPan 으로 밀어도 팝업이 지도보다 길어 머리가 잘린다(실측 688px).

   z-index 10 — 떠 있는 지도 UI 전부(#maptools·#maptoolsR 6 · #mapLegend 8 · #rail 8 ·
   #attribPanel·#sh3dToast·#mapCredit 9)보다 위. 이게 없으면 팝업이 <b>도구바 밑으로 깔려</b>
   윗부분(지목·면적 등)이 가려진다(제보 + 실측: #mapInfo 와 조상이 모두 z-index:auto 라
   위치는 잡혀도 겹침 순서에서 항상 졌다).
   autoPan 으로는 못 고친다 — 도구바는 지도 '가장자리'가 아니라 지도 <b>위에 떠 있는</b>
   요소라, 여백을 아무리 늘려도 OL 은 그 존재를 모른다. 겹침 순서로만 풀린다.
   팝업이 도구바를 잠깐 가리는 것은 감수한다: 사용자가 직접 눌러서 연 것이고 ✕ 로 닫힌다. */
#mapInfo { display:none; position:relative; z-index:10;
  background:rgba(255,255,255,.97); border:1px solid var(--border);
  border-radius:11px; box-shadow:0 6px 20px rgba(0,0,0,.25); padding:10px 26px 10px 12px;
  min-width:200px; max-width:340px; font-size:12px; }
#mapInfo .mi-body { max-height:46vh; overflow-y:auto; overscroll-behavior:contain;
  padding-right:2px; }
/* 스크롤이 생겼다는 것을 알려 주는 옅은 경계 — 없으면 아래 내용이 있는 줄 모르고 닫는다 */
#mapInfo .mi-body::-webkit-scrollbar { width:7px; }
#mapInfo .mi-body::-webkit-scrollbar-thumb { background:#CBD5D0; border-radius:4px; }
#mapInfo .mi-kv { display:grid; grid-template-columns:58px 1fr; gap:2px 8px; margin-top:5px; font-size:11.5px; }
/* 자손(span)이 아니라 '직계 자식'만 — 라벨만 흐리게 하려는 규칙인데, 값 쪽(<b> 안)에도
   span 이 들어간다. 자손으로 두면 값의 span 까지 라벨색으로 죽는다(실측) */
#mapInfo .mi-kv > span { color:var(--hint); }
#mapInfo .mi-kv b { color:var(--text); font-weight:600; }
/* 팝업에는 제한 등급 색을 두지 않는다 — 등급 판단은 분석 패널 한 곳에서만 한다(.zl 참고) */
/* '지정 없음'은 값이 아니라 상태다 — 지정 이름과 같은 굵기로 두면 그런 이름의 지구가
   있는 것처럼 읽힌다. 흐리게 눕혀 '해당 없음'임을 형태로 구분한다 */
#mapInfo .mi-nozone { color:var(--hint); font-weight:500; font-style:italic; }
/* 접힌 상세 — 팝업이 길어 "정리 안 돼 보인다"는 지적(2026-08-14)에 따라 요약 우선으로 바꿨다.
   네이티브 <details> 를 쓴다: 팝업 HTML 은 innerHTML 로 통째로 갈리는데, 토글 상태를 JS 로
   관리하면 다시 그릴 때마다 리스너를 새로 걸어야 한다 — <details> 는 브라우저가 다 해 준다. */
#mapInfo .mi-more { margin-top:4px; }
#mapInfo .mi-more summary { cursor:pointer; color:var(--sky); font-size:11px; font-weight:700;
  list-style:none; user-select:none; }
#mapInfo .mi-more summary::before { content:'▸ '; font-size:10px; }
#mapInfo .mi-more[open] summary::before { content:'▾ '; }
#mapInfo .mi-more summary::-webkit-details-marker { display:none; }
#mapInfo .mi-x { position:absolute; top:4px; right:6px; border:none; background:none;
  font-size:14px; color:var(--hint); padding:2px 4px; }
#mapInfo .mi-sec { padding:3px 0; }
#mapInfo .mi-sec + .mi-sec { border-top:1px dashed var(--border); margin-top:4px; padding-top:7px; }
#mapInfo .mi-t { font-weight:800; font-size:12.5px; }
#mapInfo .mi-d { color:var(--muted); font-size:11.5px; margin-top:2px; line-height:1.55; }
/* 등급 색 막대 — 지도 범례와 같은 색이라 "지금 누른 도로가 저 색 도로"임이 바로 보인다 */
#mapInfo .mi-chip { display:inline-block; width:15px; height:4px; border-radius:2px;
  vertical-align:middle; margin:0 4px 1px 1px; }
/* 안내 한 줄(멀리 있는 도로를 잡았다·등급 자료가 없다) — 맨 아래 흐리게 */
#mapInfo .mi-src { color:var(--hint); font-size:10.5px; margin-top:5px; }
#mapInfo .mi-none, #mapInfo .mi-load { color:var(--hint); font-size:11.5px; }

/* 거리·면적 측정 툴팁 */
.ms-tip { background:rgba(22,50,79,.88); color:#fff; font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:9px; white-space:nowrap; pointer-events:none; }
/* ── 지도 위 오버레이 셋(경사 범례 · 그림자 컨트롤 · 일사량 바)의 <b>공통 자리</b> ──
   셋은 서로 배타적이라(setOverlay 는 한 번에 하나) 같은 자리를 나눠 쓴다. 자리는 <b>왼쪽
   아래</b>다 — 폰에서 이미 그렇게 쓰고 있었고(아래 @media 640), 데스크톱만 제각각이었다:
   경사 범례는 오른쪽 위, 일사량 바는 오른쪽 아래, 그림자 컨트롤은 가로 전폭이라 무엇을
   켜느냐에 따라 눈이 화면을 옮겨 다녀야 했다(사용자 지적).
   ⚠ 오른쪽 끝 202px 은 비운다 — 범례 상자(#mapLegend, right:42 + 152)와 그 여닫이 버튼이
   상시 그 자리다. 실제로 그림자 컨트롤이 펼친 범례를 덮고 있었다(제보 화면).
   bottom:43px = 왼쪽 아래 'ⓘ 데이터 출처' 버튼(bottom:8 + 높이 27) + 여백 8. 셋이 공유한다.
   (32px 이던 값은 그 버튼 머리를 3px 물고 있었다 — 실측) */
.slope-leg { position:absolute; top:auto; bottom:43px; left:10px; right:auto;
  z-index:6; background:rgba(255,255,255,.93);
  border:1px solid var(--border); border-radius:var(--rs); padding:7px 10px; font-size:11px;
  line-height:1.9; pointer-events:none; display:none; }
.slope-leg i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; }
/* 아래 네 줄은 예전 인라인 style 을 그대로 옮긴 것이다(데스크톱 모양 동일) —
   폰에서 가로로 눕히려면 미디어쿼리가 닿는 곳에 있어야 한다. */
.slope-leg .sl-h { margin-bottom:3px; }
.slope-leg .sl-bar { height:9px; border-radius:2px; margin-bottom:2px;
  background:linear-gradient(90deg,rgb(76,111,168),rgb(150,160,158),rgb(240,168,30)); }
.slope-leg .sl-ends { display:flex; justify-content:space-between; font-size:9px;
  color:var(--hint); margin-bottom:6px; }
.slope-leg .sl-steps > span { display:block; }
/* .sl-cols/.sl-col 은 데스크톱에서 아무 일도 하지 않는다(그냥 블록) — 폰에서만 2단이 된다 */

/* 햇빛마을 검토 범례 — 위 .slope-leg 와 <b>같은 자리·같은 껍데기</b>(왼쪽 아래, bottom:43px, 오른쪽 202px 비움).
   오른쪽 아래 #mapLegend 의 한 절이던 것을 2026-09-12 여기로 옮겼다(사용자 요청 — 도로·건물 사이에 끼어
   구분이 안 됐다). 이 지도를 켜면 오버레이 셋이 내려가므로(toggleSunmap) 자리 다툼은 없다.
   폭: 완화 조건 두 줄이 읽히는 최소 폭. 일사량 바(330px)와 같은 상한을 쓴다. */
#sunbar { display:none; position:absolute; left:10px; right:auto; bottom:43px; z-index:7;
  width:min(330px, calc(100% - 212px)); max-height:calc(100% - 70px); overflow:auto;
  background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 6px 22px rgba(0,0,0,.18); padding:9px 12px 8px; }
#sunbar .sb-h { font-size:12px; font-weight:800; margin-bottom:7px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
#sunbar .sb-h small { font-weight:500; color:var(--hint); font-size:10px; }
/* 색 견본 — 지도 폴리곤과 같은 반투명 채움 + 짙은 윤곽(JS paintSunLegend 가 색을 넣는다). 14px 로 도로·건물
   범례의 8px 보다 크게 잡는다 — 이 지도는 색 셋이 곧 내용이라 한눈에 대조돼야 한다. */
#sunbar .sb-sw { display:flex; gap:14px; font-size:11.5px; font-weight:700; margin-bottom:4px; }
#sunbar .sb-sw span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
#sunbar .sb-sw i { display:inline-block; width:14px; height:14px; border-radius:3px; border:2px solid #999; box-sizing:border-box; }
#sunbar .sb-status { display:none; font-size:10.5px; color:var(--muted); margin:2px 0 4px; }


/* 그림자 컨트롤(지도 하단 스트립) — index.html의 해 UI 이식 */
/* 그림자 컨트롤 — 지도 '아래'가 아니라 지도 '위에 겹치는' 플로팅 패널.
   (별도 블록으로 두면 플렉스에서 지도 캔버스가 안 줄어 화면 밖으로 밀리는 문제가 있었다) */
/* bottom 32px — 10px 였는데 상시 출처 표기(#mapCredit)가 바닥 왼쪽에 앉으면서 그만큼 비켰다 */
/* 폭: 예전에는 left:10~right:62 로 <b>지도 가로를 통째로</b> 썼다(1440px 창에서 706px).
   내용이 그만큼 필요해서가 아니라 좌우를 못 박아 늘어난 것이라, 해 그림(.shsky)만 하염없이
   길어지고 오른쪽 끝에서는 펼친 범례와 겹쳤다. 내용에 맞는 폭(520px)으로 죄고 왼쪽에 붙인다.
   calc(100% - 212px): 왼쪽 여백 10 + 오른쪽 범례 자리 202 — 좁은 창에서도 범례를 안 덮는다. */
#shbar { display:none; position:absolute; left:10px; right:auto; bottom:43px; z-index:7;
  background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 6px 22px rgba(0,0,0,.18); padding:10px 14px 12px;
  width:min(520px, calc(100% - 212px));
  max-height:calc(100% - 70px); overflow:auto; }
#shbar.flash { animation:shflash 1.2s ease 2; }
@keyframes shflash { 0%,100% { background:var(--surface); } 50% { background:#FFF3D6; } }
/* 12개가 <b>반드시 한 줄</b>이다 — 폭 520px 바에서 예전 값(칩 좌우 여백 9 · 칩 사이 4)이면
   합이 497.1px 로 안쪽 폭 490px 을 7px 넘겨 '12월' 하나만 다음 줄로 떨어졌다(실측).
   9→8 · 4→3 으로 465px 이 되어 25px 이 남는다(글꼴이 달라져도 견딘다).
   overflow-x 는 그 여유마저 사라졌을 때의 안전판 — 접히는 대신 옆으로 밀린다(폰과 같은 방식). */
.ter-months { display:flex; gap:3px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  margin-bottom:8px; }
.ter-months::-webkit-scrollbar { display:none; }
.ter-mon { font-size:11px; padding:3px 8px; border-radius:12px; border:1px solid var(--border);
  background:none; color:var(--muted); flex:0 0 auto; }
.ter-mon.on { background:var(--sun); border-color:var(--sun); color:#fff; font-weight:700; }
/* flex-wrap — 지도가 좁아 바가 calc 하한까지 죄이면 두 칸이 서로를 뭉개는 대신 접힌다
   (해 그림은 min-width 아래로 안 줄어든다: 더 줄면 해를 끌 자리가 없다) */
#shRow { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.shsky { position:relative; height:74px; flex:1 1 200px; min-width:200px;
  border-radius:var(--rs); overflow:hidden;
  transition:background .4s ease; background:linear-gradient(#4FA8E0,#A8D8F0);
  cursor:grab; touch-action:none; user-select:none; }
.shsky.dragging { cursor:grabbing; }
.shsky.dragging .shorb { transition:background .4s, box-shadow .4s; }
.shorb { position:absolute; width:30px; height:30px; border-radius:50%;
  transform:translate(-50%,-50%); transition:left .3s ease, top .3s ease, background .4s, box-shadow .4s; }
.shhint { position:absolute; left:10px; top:6px; font-size:10.5px; color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none; }
.shhills { position:absolute; left:0; right:0; bottom:0; width:100%; height:30px; display:block; }
/* 200px — 예전 240px 는 이 칸에 2D/3D 버튼까지 있던 시절의 값이다. 지금 들어가는 것은
   시계 한 줄과 슬라이더+재생 한 줄뿐이라 40px 이 그냥 남았다(그 40px 은 해 그림 몫이다). */
#shSide { width:200px; flex:0 0 200px; }
.shclock { text-align:center; font-size:var(--fs-num); font-weight:800; letter-spacing:-1px; line-height:1; }
.shclock .sc-ampm { font-size:13px; font-weight:700; color:var(--muted); margin-right:6px; vertical-align:3px; }
.shclock .sc-hm { color:var(--sun); }
.shclock .sc-alt { display:block; font-size:10.5px; font-weight:500; color:var(--muted); margin-top:5px; }
.ter-ctrl { display:flex; gap:8px; align-items:center; margin-top:8px; }
.ter-ctrl input[type=range] { flex:1; accent-color:var(--sun); }
.ter-play { padding:4px 10px; font-size:11px; border:1px solid var(--border); border-radius:14px;
  background:none; color:var(--muted); white-space:nowrap; }
/* 평상시 캡션은 감춘다(사용자 요청) — 남는 것은 '그림자 데이터가 없습니다' 같은 사정뿐이다.
   폰에서 쓰던 규칙을 그대로 두 화면 공용으로 올렸다(index2.html 의 #shCap 주석 참고). */
#shCap { font-size:10.5px; color:var(--hint); margin-top:6px; }
#shCap:not(.sh-err) { display:none; }

/* ── 우측: 세로 탭 레일 + 콘텐츠 패널 ── */
/* 탭 = 패널 왼쪽에 꽂힌 책갈피 띠지. 레이아웃 흐름에서 빼 지도 폭을 그만큼 넓힌다.
   right 를 --panel 로 잡아 패널이 넓어져도 항상 패널 왼쪽 모서리에 붙는다. */
/* align-items:flex-end — 기본값(stretch)이면 버튼 하나가 넓어질 때 형제들도 같이 늘어나
   레일 전체가 들썩인다. 오른쪽(패널 쪽)에 붙여 각 버튼이 제 너비를 갖게 한다. */
#rail { position:absolute; right:var(--panel); top:14px; z-index:8;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
/* 폰에서만 쓰는 sticky 감지 표식 — 데스크톱 띠지는 절대배치라 붙고 말고가 없다 */
#railStick { display:none; }
/* '맨 위로'는 폰 전용 — 데스크톱은 패널이 제 스크롤러라 이미 항상 요약이 위에 있다 */
#toTop { display:none; }
/* 입체감: 위에서 빛이 오는 그라데이션 + 윗면 하이라이트(inset) + 바닥 그림자 2겹 */
/* 세로 글자라 letter-spacing 이 글자 사이 '세로 간격'이 된다 — 0.5px 이상이면 띠지가 길어진다.
   좌우 여백(padding-x)은 선택 상태와 반드시 합이 같아야 한다(아래 .rl.on 주석 참고). */
.rl { writing-mode:vertical-rl; text-orientation:upright;
  border:1px solid rgba(255,255,255,.10); border-right:none;
  background:linear-gradient(105deg,#1E436B 0%,#16324F 55%,#112741 100%);
  color:#C6D4E1; font-size:11.5px; font-weight:600; letter-spacing:0;
  padding:10px 5px; border-radius:11px 0 0 11px; display:flex; align-items:center; gap:4px;
  box-shadow:-3px 3px 8px rgba(13,33,55,.35), -1px 1px 2px rgba(13,33,55,.3),
             inset 1px 1px 0 rgba(255,255,255,.10);
  transition:color .12s, background .15s, box-shadow .15s; }
.rl b { font-size:14px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* 호버는 색·그림자만 바꾼다. padding 이나 transform 을 건드리면 버튼 너비·위치가 변해
   레일 전체가 들썩이고(형제 stretch), 패널 사이에 틈이 생긴다 — 손댄 버튼만 반응해야 한다. */
.rl:hover { color:#fff;
  background:linear-gradient(105deg,#27527F 0%,#1B3D60 55%,#153050 100%);
  box-shadow:-5px 4px 12px rgba(13,33,55,.4), -1px 1px 2px rgba(13,33,55,.3),
             inset 1px 1px 0 rgba(255,255,255,.16); }
/* 선택된 띠지는 패널과 같은 흰색으로 이어 붙여 '지금 이 장' 느낌을 준다(1px 겹쳐 경계선 숨김).
   ※ 왼쪽 안쪽 여백을 기본 상태와 맞춘다: 기본 border-left 1px + padding-left 5px = 6px 이므로
     선택 시 border-left 3px + padding-left 3px = 6px. 예전처럼 padding-left 를 12px 로 두면
     왼쪽만 8px 밀려 글자가 오른쪽으로 치우쳐 보인다(실사고). */
.rl.on { background:linear-gradient(105deg,#FFFFFF 0%,#FBFCFD 60%,#F1F4F7 100%);
  color:var(--text); font-weight:800; margin-right:-1px; padding-left:3px;
  border-color:var(--border); border-left:3px solid var(--sun);
  box-shadow:-5px 4px 14px rgba(13,33,55,.30), -2px 2px 4px rgba(13,33,55,.18),
             inset 1px 1px 0 #fff; }
/* 선택된 띠지는 호버해도 그대로 — 이미 '지금 이 장'이라 반응할 필요가 없다 */
.rl.on:hover { background:linear-gradient(105deg,#FFFFFF 0%,#FBFCFD 60%,#F1F4F7 100%);
  color:var(--text); }
#panel { width:var(--panel); background:var(--surface); border-left:1px solid var(--border);
  overflow-y:auto; flex-shrink:0; }

/* ── 패널 접기 ────────────────────────────────────────────────
   지도를 넓게 보고 싶을 때 패널을 오른쪽으로 밀어낸다.
   width 를 0 으로 줄이지 않는다 — 그러면 패널 안 표·차트가 매 프레임 다시 배치되면서
   전환이 끊긴다. 대신 폭은 그대로 두고 음수 마진으로 flex 계산에서 빼면,
   패널은 통째로 미끄러져 나가고 지도(flex:1)가 그만큼 자연스럽게 커진다. */
#stage { overflow:hidden; }          /* 밀려난 패널을 화면 밖에서 잘라낸다 */
#panel { transition:margin-right .38s cubic-bezier(.4,0,.2,1); will-change:margin-right; }
#rail { transition:right .38s cubic-bezier(.4,0,.2,1); }
#stage.panel-hidden #panel { margin-right:calc(-1 * var(--panel)); }
#stage.panel-hidden #rail { right:0; }
/* 손잡이는 탭 띠지 '안'의 맨 위에 둔다.
   예전엔 top:50% 절대배치라 창 높이에 따라 수익분석·추진절차 띠지 위에 얹혔고,
   맨 아래로 옮겼더니 빈 공간에 홀로 떠 보였다. 맨 위면 탭 개수·창 높이와 무관하게
   자리가 고정되고, 패널 상단(요약 헤더)과 나란해 무엇을 접는 버튼인지 위치로 읽힌다.
   띠지가 통째로 움직이므로 손잡이에는 별도 위치 전환이 필요 없다.
   align-self:stretch — 띠지와 같은 폭이라 오른쪽 가장자리가 한 덩어리로 읽힌다. */
#panelToggle { align-self:stretch; margin-bottom:12px; height:30px; padding:0;
  font-size:13px; line-height:1; color:var(--muted);
  border:1px solid var(--border); border-right:none; border-radius:9px 0 0 9px;
  background:var(--surface); box-shadow:-2px 0 9px rgba(13,33,55,.13); }
#panelToggle:hover { background:var(--bg); color:var(--text); }
/* 여백·글자 크기 상향(2026-08-25 밀도 제보) — 정보를 빼는 대신 본문 12.5px 안팎·카드 간격을
   넉넉히 잡는다. 원칙: 본문(이유·설명)은 12~12.5px 아래로 내려가지 않게, 각주·출처만 10~11px. */
.pane { display:none; padding:18px 20px 44px; }
.pane.on { display:block; }
.pane h2 { font-size:var(--fs-head); margin-bottom:12px; }
.pane h3 { font-size:var(--fs-head); margin:18px 0 9px; }

/* 판정 헤더(패널 최상단 공통) — 결과 요약 블록.
   ⚠ 예전에는 이 블록 자체가 sticky 였다. 그런데 높이가 286px(데스크톱 패널의 32%)·
   모바일 407px(화면의 50%)라 늘 붙어 있으면 답답하다(제보). 지금은 <b>맨 위에서만</b>
   보이고 스크롤하면 아래 #vbar 한 줄이 대신 붙는다. */
#vhead { padding:14px 18px; border-bottom:1px solid var(--border);
  background:var(--surface); box-shadow:0 2px 10px rgba(13,33,55,.06); }

/* 압축 판정 바 — 높이 0(레이아웃에 영향 없음) + 내부 절대배치로 내용 위에 떠서 붙는다.
   sticky 요소가 흐름에서 높이를 가지면 접힘/펼침마다 아래 내용이 튀기 때문이다. */
#vbar { position:sticky; top:0; z-index:11; height:0; }
#vbar .vb-in { position:absolute; top:0; left:0; right:0; display:none;
  align-items:center; gap:8px; padding:9px 16px; cursor:pointer;
  background:rgba(255,255,255,.97); border-bottom:1px solid var(--border);
  box-shadow:0 3px 12px rgba(13,33,55,.10); }
#vbar.on .vb-in { display:flex; }
#vbar .vb-in:hover { background:#fff; }
#vbar .vb-ico { font-size:17px; line-height:1; flex-shrink:0; }
#vbar .vb-name { font-size:13px; font-weight:900; white-space:nowrap; flex-shrink:0; }
/* 결론 한 줄은 남는 폭만큼만 — 넘치면 … 로 자른다(전문은 위 요약으로 올라가면 보인다) */
#vbar .vb-why { flex:1; min-width:0; font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#vbar .vb-up { flex-shrink:0; font-size:10px; font-weight:700; color:var(--hint); }
/* 판정 색은 왼쪽 띠로만 — 바 전체를 물들이면 아래 내용과 충돌한다 */
#vbar .vb-in.lv-bad { border-left:4px solid var(--red); }
#vbar .vb-in.lv-cond { border-left:4px solid var(--sun); }
#vbar .vb-in.lv-check { border-left:4px solid var(--sky-mid); }
#vbar .vb-in.lv-ok { border-left:4px solid var(--green-mid); }
#vbar .vb-in.lv-scope { border-left:4px solid #B0B8C1; }
#vhead .badge-lv { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:var(--rs); }
/* index.html .fit-banner 색·테두리 체계 그대로 */
#vhead .lv-ok    { background:linear-gradient(135deg,#FFF8E7,#FFFBF0); border:2px solid var(--sun-mid); }
#vhead .lv-cond  { background:var(--sun-light); border:2px solid #FAD7A0; }
#vhead .lv-check { background:var(--sky-light); border:2px solid var(--sky-mid); }
#vhead .lv-bad   { background:var(--red-light); border:2px solid #F5B7B1; }
#vhead .lv-scope { background:#F3F4F6; border:2px solid #CBD2D9; }   /* 분석 대상 밖 — 판정색이 아닌 회색 */
#vhead .lv-name { font-size:var(--fs-lead); font-weight:900; }
#vhead .lv-why { font-size:var(--fs-body); color:var(--muted); margin-top:3px; line-height:1.55; }
#vhead .addr { font-size:var(--fs-label); color:var(--hint); margin-top:7px; }
/* 남색 띠(2026-09-04) — 흰 타일 넉 장은 아래 카드들과 무게가 같아 답으로 서지 못했다.
   상단바와 같은 남색 계열에 흰 숫자로 세워 요약이 한 덩어리로 읽히게 한다. 페이지에서 이런
   강한 대비는 여기 한 곳뿐이어야 한다(다른 곳에 또 쓰면 기준점이 사라진다). 칸 사이는 테두리가
   아니라 옅은 세로선 — 타일 넉 장이 아니라 띠 하나에 칸이 나뉜 것으로 보이게. */
#kpis { display:flex; gap:0; margin-top:10px; padding:4px 0; border-radius:var(--rs);
  background:linear-gradient(135deg,#0D2137 0%,#16324F 60%,#1B4F72 100%); }
/* flex-basis:0 필수 — 기본값(auto)이면 칸 폭이 '내용 길이'를 따라가 값이 길어질수록 그 칸만
   넓어진다(설비 용량 칸이 173px, 나머지 147px 이던 이유). 0 으로 두면 flex 비율대로만 나뉜다. */
/* 넉 장이 <b>같은 세 줄 틀</b>이다 — 라벨 / 값 / 각주(사용자 지정 디자인).
   각주가 없는 칸(시공비·회수기간)은 그 줄이 비고, 카드는 stretch 로 높이만 맞춘다.
   세로는 죈다: 줄높이를 1.15~1.25 로 눌러 세 줄이 예전 두 줄(65px)과 비슷한 68px 에 든다
   — 요약 높이는 이 서비스에서 가장 비싼 공간이라(탭마다 맨 위) 줄 수가 늘면 그만큼 죈다. */
/* 세로 가운데 정렬 — 각주가 없는 칸(시공비·회수기간)은 아래가 그만큼 비어 값이 위로
   올라붙어 보인다(제보). 카드는 stretch 로 높이가 같으므로, 남는 여백을 위아래로 <b>나눠</b>
   갖게 하면 넉 장이 같은 무게로 앉는다. 각주가 있는 칸은 내용이 높이를 꽉 채워 그대로다. */
.kpi { flex:1 1 0; min-width:0; border:none; border-radius:0;
  padding:8px 12px 9px; display:flex; flex-direction:column; justify-content:center; }
.kpi + .kpi { box-shadow:inset 1px 0 0 rgba(255,255,255,.14); }
/* 수익 칸만 폭을 더 준다 — 라벨 줄에 조건 꼬리표('제한 해소 시')가 함께 서야 해서
   (라벨 60 + 꼬리표 62 + 여백) 다른 칸과 같은 폭이면 꼬리표가 다음 줄로 떨어진다. */
.kpi.kpi-rev { flex-grow:1.6; }
/* 라벨 줄 — 꼬리표는 <b>카드 오른쪽 끝</b>으로 민다(space-between). 라벨은 왼쪽, 조건은
   오른쪽이라 눈이 왼쪽 열만 훑어도 넉 장의 이름이 읽힌다. */
.kpi .k { display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-size:var(--fs-label); color:rgba(255,255,255,.72); line-height:1.25; }
/* 값 뒤에 붙는 단위(/년) — 값의 일부지만 <b>읽는 숫자는 앞</b>이라 작고 흐리게 */
.v-u { margin-left:1px; font-size:var(--fs-label); font-weight:700; color:rgba(255,255,255,.6); }
/* 각주 줄 — 값을 읽는 데 필요한 전제('이용률 75% 기준')나 보조 값('월평균 207만원').
   보조 <b>값</b>은 굵게(b) — 숫자는 문장이 아니라 값으로 읽혀야 한다. */
.k-foot { margin-top:2px; font-size:var(--fs-label); color:rgba(255,255,255,.72); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-foot b { font-weight:800; color:#fff; }
/* 조건부 꼬리표 — 라벨 자체는 고정하고 조건만 여기에 단다(같은 자리에서 매번 다른 말을
   읽지 않도록). 색은 경고가 아니라 단서 톤. */
.k-if { display:inline-block; margin-left:4px; padding:0 6px; border-radius:8px;
  background:rgba(245,166,35,.22); color:#F8D06B; font-size:var(--fs-mini); font-weight:800;
  border:1px solid rgba(245,166,35,.45); vertical-align:1px; white-space:nowrap; }
/* 19px — 핵심 숫자가 화면의 답이다. 단서(전제·보조값)는 작게 밑에 깔린다.
   15px 시절에는 숫자와 단서가 같은 무게라 훑어도 값이 안 잡혔다.
   line-height 1.15 는 세 줄 틀에서 값 줄이 먹는 높이를 줄이려는 것(28 → 22px). */
.kpi .v { font-size:var(--fs-num); font-weight:900; letter-spacing:-.3px; line-height:1.15;
  margin-top:1px; white-space:nowrap; color:#fff; }
.kpi .rng { font-size:var(--fs-mini); color:rgba(255,255,255,.6); }
/* 부분 실패 배너 — 판정 배지보다 먼저 읽혀야 한다(빠진 항목을 모른 채 읽은 결과는 좋게만 읽힌다) */
.vh-fail { margin-bottom:9px; padding:7px 11px; border-radius:var(--rs); cursor:pointer;
  background:var(--sun-light); border:1px solid var(--sun-mid); color:#784212;
  font-size:var(--fs-body); line-height:1.55; }
.vh-fail u { font-weight:700; }
.vh-fail:hover { filter:brightness(.98); }
/* 도로 기준 갈림 배너 — 실패 배너와 같은 자리·크기, 색만 정보성(하늘). 버튼으로 바로 바꿔 본다 */
.vh-basis { margin-bottom:9px; padding:7px 11px; border-radius:var(--rs);
  background:var(--sky-light); border:1px solid var(--sky-mid); color:var(--sky);
  font-size:var(--fs-body); line-height:1.55; }
.vh-basis button { margin-left:6px; padding:1px 8px; border-radius:9px; border:1px solid var(--sky-mid);
  background:#fff; color:var(--sky); font-size:var(--fs-mini); font-weight:700; cursor:pointer; }
/* 판정 배너 밑 결정 요인 칩 */
.lv-facts { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.lv-fact { font-size:var(--fs-label); font-weight:700; padding:3px 9px; border-radius:11px;
  background:var(--red-light); color:var(--red); border:1px solid #F5B7B1; }
.lv-fact.info { background:var(--sky-light); color:var(--sky); border-color:var(--sky-mid); }
/* 확정 저촉 — '저촉 가능'과 같은 빨강 계열이되 채워서 구분한다(판정을 '설치 불가'로 만든 요인). */
.lv-fact.sure { background:var(--red); color:#fff; border-color:var(--red); }
/* 계통 포화 — 이격 저촉(빨강)과 종류가 다른 리스크라 색을 나눈다. 거리는 물러나면 풀리지만
   계통은 한전 보강 일정에 달려 있어 내가 못 푼다. 같은 빨강으로 묶으면 그 차이가 지워진다. */
.lv-fact.grid { background:#FDF0D5; color:#9C6500; border-color:#E8C07D; }
/* 접힘 목록(통과 기준·이후 절차) */
details.fold { border:1px solid var(--border); border-radius:var(--rs); padding:0; margin-top:8px; }
details.fold summary { cursor:pointer; padding:8px 12px; font-size:var(--fs-body); font-weight:700;
  color:var(--muted); list-style:none; }
details.fold summary::before { content:'▸ '; }
details.fold[open] summary::before { content:'▾ '; }
details.fold .fold-body { padding:2px 12px 10px; }

/* ── [근거] — 모든 판단·숫자 옆에 붙는 인라인 칩. 같은 자리에서 펼쳐지고 새 창·탭 이동이 없다.
      상자는 값·출처(+실측/추정/조회/공표 꼬리표)·규정 세 줄뿐(2026-09-12, workbench.js ev 주석). ── */
/* 테두리만 있는 칩(2026-09-04) — 채운 하늘색 칩이 카드마다 두세 개씩 반복되며 본문보다 먼저
   눈에 걸렸다. 누를 수 있다는 것은 테두리·색 글자로 충분하고, 호버에서만 채운다. */
.ev-chip { display:inline-flex; align-items:center; gap:3px; font-size:var(--fs-mini); font-weight:700;
  color:var(--blue); background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:2px 9px; cursor:pointer; white-space:nowrap; vertical-align:middle; }
.ev-chip:hover, .ev-chip.on { background:var(--sky-light); border-color:var(--sky-mid); color:#0D2137; }
.ev-box { display:none; margin-top:6px; border:1px solid var(--sky-mid); border-radius:var(--rs);
  background:var(--sky-light); padding:7px 10px; font-size:var(--fs-label); line-height:1.55; }
.ev-box.on { display:block; }
.ev-l { display:flex; gap:8px; align-items:flex-start; }
.ev-l + .ev-l { margin-top:2px; }
.ev-k { flex:0 0 28px; color:var(--muted); font-weight:700; }
.ev-v { min-width:0; color:var(--text); word-break:break-word; }
/* 실측/추정/조회/공표 꼬리표 — 출처 줄 끝의 한 단어. 풀이는 title 툴팁과 용어 사전 */
.ev-m { display:inline-block; margin-left:6px; padding:0 6px; border-radius:8px; font-size:var(--fs-mini); font-weight:700;
  background:rgba(0,0,0,.06); color:var(--muted); vertical-align:1px; }
.ev-fail { color:var(--red); font-weight:700; margin-bottom:3px; }

/* ── 상태 배지 5종 — '해당 없음'과 '충족'은 절대 같은 색을 쓰지 않는다 ── */
/* 알약은 어디서나 한 모양(2026-09-04): 11px·800·2px 9px·1px 테두리. 판정 열·카드 상태·지정 칩
   (.zi-s)·배지(.badge)가 같은 옷을 입어야 화면 어디서든 같은 색이 같은 뜻으로 읽힌다. */
.st { display:inline-block; font-size:var(--fs-mini); font-weight:800; padding:2px 9px; border-radius:10px;
  border:1px solid transparent; white-space:nowrap; line-height:1.5; }
.st-ok   { background:var(--green-light); color:var(--green); border-color:var(--green-mid); }
.st-todo { background:var(--sun-light); color:#9A6200; border-color:var(--sun-mid); }
.st-bad  { background:var(--red-light); color:var(--red); border-color:#F5B7B1; }
.st-na   { background:#F1F3F4; color:var(--muted); border-color:#DDE2E6; }
.st-fail { background:#F4ECEC; color:#8E6C6C; border-color:#E3D3D3; }

/* 조례 근거 목록 — '시행문'과 '별표 첨부'를 각각 제목 있는 묶음으로 나눈다.
   예전에는 둘을 한 덩어리로 흘려서, 별표에서 기준을 뽑아낸 지자체(나주시)에서는
   같은 별표가 위아래로 두 번 보였다 */
.ord-src + .ord-src { margin-top:7px; padding-top:7px; border-top:1px dashed var(--border); }
.ord-src > b { display:block; font-size:var(--fs-mini); font-weight:800; color:var(--hint);
  letter-spacing:.04em; margin-bottom:3px; }
.ord-src .os-i { line-height:1.7; }
/* 본문까지 열어 기준을 실제로 추출한 별표 — 목록에서 어느 것이 판정 근거인지 구분된다 */
.os-tag { display:inline-block; margin-left:5px; padding:0 5px; border-radius:7px;
  font-size:var(--fs-mini); font-weight:800; background:var(--green-light); color:var(--green);
  vertical-align:1px; }

/* ── 이격거리 한눈 요약 표 — 항목|기준|실측|판정. 서술형 카드의 앞에 서는 '답'이다.
      실측 열만 진하게 — 네 열이 같은 무게면 표가 답을 못 준다. ── */
.sbt-wrap { overflow-x:auto; }
.sbt { width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.sbt th { text-align:left; font-size:var(--fs-label); color:var(--muted); font-weight:700;
  border-bottom:2px solid var(--border); padding:5px 8px 6px; }
.sbt td { padding:9px 8px; border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums; vertical-align:middle; }
.sbt tr:last-child td { border-bottom:none; }
.sbt .sbt-n { font-weight:700; }
.sbt .sbt-a { font-weight:800; }
.sbt tr.sbt-r { cursor:pointer; }
.sbt tr.sbt-r:hover td { background:var(--bg); }
/* 저촉 행은 바탕을 칠하지 않고 <b>왼쪽 3px 붉은 띠</b>로만 표시한다(2026-09-04). 분홍 바탕은
   행이 여럿 이어지면 표 절반이 물들어 어느 행이 문제인지 되레 흐려졌다. 띠는 스캔되고 표는 흰 채로. */
.sbt tr.sbt-bad td:first-child { box-shadow:inset 3px 0 0 var(--red); }
.sbt tr.sbt-bad:hover td { background:#FDF6F5; }
.sbt-src { font-size:var(--fs-label); color:var(--hint); margin-top:6px; line-height:1.55; }
/* 표 안의 구간 제목 행(조례 기준 ↓ 절차·기반) */
.sbt tr.sbt-sec td { background:#F0F4F1; color:var(--muted); font-size:var(--fs-label); font-weight:800;
  padding:4px 8px; border-bottom:1px solid var(--border); }
/* 절차 행 — 누르면 다음 행(상세)이 열린다. 캐럿이 '열 수 있음'을 말한다 */
.sbt tr.sbt-proc .sbt-car { display:inline-block; width:12px; color:var(--hint);
  font-size:var(--fs-mini); transition:transform .15s; }
.sbt tr.sbt-proc.open .sbt-car { transform:rotate(90deg); }
.sbt tr.sbt-det { display:none; }
.sbt tr.sbt-det.on { display:table-row; }
.sbt tr.sbt-det > td { background:#FBFCFB; padding:11px 14px 13px; border-bottom:1px solid var(--border); }
.sbt tr.sbt-det .sd-why { font-size:var(--fs-body); line-height:1.7; color:var(--text); }
.sbt tr.sbt-det .sd-act { margin-top:6px; font-size:var(--fs-body); line-height:1.65; color:#7E5109; }

/* ── 계통 3계층 카드 — 변전소→주변압기→배전선로. 병목이 첫눈에 보이는 요약(원본은 gtbl 표) ── */
.g3-wrap { display:flex; gap:4px; align-items:stretch; margin-top:8px; }
.g3 { flex:1; min-width:0; border:1px solid var(--border); border-radius:var(--rs);
  padding:8px 10px; background:#FBFCFB; }
.g3.g3-bad { border-color:#F5B7B1; background:#FFFAFA; }
.g3-h { display:flex; justify-content:space-between; align-items:center; gap:4px;
  font-size:var(--fs-mini); font-weight:800; color:var(--muted); }
.g3-nm { font-size:var(--fs-body); font-weight:800; margin-top:2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.g3-bar { height:6px; border-radius:3px; background:#E6EAE7; overflow:hidden; margin:6px 0 4px; }
.g3-bar i { display:block; height:100%; border-radius:3px; background:var(--green); }
.g3-bad .g3-bar i { background:var(--red); }
.g3-kv { font-size:var(--fs-label); color:var(--muted); line-height:1.5; }
.g3-kv b { color:var(--text); }
.g3-ar { align-self:center; color:var(--hint); font-weight:900; flex-shrink:0; }
.g3-note { font-size:var(--fs-label); color:var(--muted); margin-top:6px; line-height:1.6; }

/* 조례 시행일 칩 — 조례는 개정이 잦아 '언제 기준인가'가 기준값만큼 중요하다 */
.ord-date { margin-left:6px; font-size:var(--fs-mini); font-weight:800; padding:1px 7px;
  border-radius:9px; background:var(--sky-light); color:var(--sky);
  border:1px solid var(--sky-mid); vertical-align:2px; white-space:nowrap; }

/* ── 토지 정보 카드 — 라벨 좌 · 값 우(경쟁 화면과 같은 표 형태). 값이 오른끝에 정렬돼야
      숫자(면적·공시지가)의 자릿수가 한 축으로 읽힌다 ── */
/* 토지 정보 — 스펙 격자(2026-09-12, workbench.js landInfoCard 주석). 칸 = 작은 라벨 위 + 굵은 값 아래.
   118px 칸이 패널 폭(455~595px)에서 3~4열, 폰(299px)에서 2열로 선다. 긴 값은 .wide 로 두 칸. */
.land-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; }
.land-grid .lg-c { min-width:0; border:1px solid var(--border); border-radius:9px; background:#F8FAFC; padding:8px 10px; }
.land-grid .lg-c.wide { grid-column:span 2; }
.land-grid .lg-c span { display:block; font-size:var(--fs-mini); color:var(--hint); margin-bottom:3px; }
.land-grid .lg-c b { display:block; font-size:var(--fs-body); font-weight:800; line-height:1.4; overflow-wrap:anywhere; }
/* PNU — 제목 줄 오른쪽 꼬리표. 19자리 코드는 값이 아니라 식별자라 격자에서 뺐다(칸 하나를 혼자 다 먹었다) */
.land-pnu { margin-left:auto; font-size:var(--fs-mini); font-weight:600; color:var(--hint);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap; }

/* ── 토지이용계획 카드(2026-09-14 시안, workbench.js zoneCard 주석) ─────────────────────
   용도지역 = 머리 블록(.za): 큰 이름 · '필지 일부' 알약 · 오른쪽 상태 알약 · 아래 조건 줄(.za-c).
   지구·구역·기타 = 얇은 [라벨 | 값] 줄(.zr). 아래에 각주(.zc-foot)와, 용도지역이 여럿일 때만 초록 안내(.zc-call). */
.zc-sub { font-size:var(--fs-label); color:var(--muted); margin:-4px 0 6px; }
.za { padding:9px 0 10px; border-top:1px solid var(--border); }
.za:first-of-type { border-top:0; padding-top:2px; }
.za-h { display:flex; align-items:center; gap:10px; }
.za-b { flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:0; background:none; text-align:left;
  padding:2px 0; border-radius:6px; cursor:pointer; }
.za-b:hover { background:var(--bg); }
.za-b:focus-visible { outline:2px solid var(--sun); outline-offset:1px; }
.za-n { font-size:var(--fs-head); font-weight:800; color:var(--text); line-height:1.4; }
.za-b::after { content:'▸'; font-size:var(--fs-mini); color:var(--hint); flex-shrink:0; }
.za-b[aria-expanded="true"]::after { content:'▾'; }
/* '필지 일부' — 이름 옆 회색 알약. 저촉(일부만 걸침)을 괄호 글자보다 먼저 눈에 들어오게 */
.za-part { font-style:normal; font-size:var(--fs-mini); font-weight:700; color:var(--muted); background:#EEF2F6;
  border-radius:7px; padding:1px 7px; white-space:nowrap; }
.za-s { font-size:var(--fs-label); padding:4px 12px; border-radius:999px; }
.za-c { margin:4px 0 0; padding:0 0 0 2px; list-style:none; font-size:var(--fs-label); color:var(--muted); line-height:1.65; }
.za-c .zg-hit { color:#A33A3A; font-weight:800; }
.zr-c { margin-top:2px; font-size:var(--fs-mini); }
.zrows { border-top:1px solid var(--border); }
.zr { display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 10px; padding:8px 0; border-bottom:1px solid var(--border); align-items:start; }
.zr-k { font-size:var(--fs-label); font-weight:800; color:var(--text); padding-top:3px; white-space:nowrap; }
.zr-v { min-width:0; }
.zr .zitem + .zitem { margin-top:3px; }
.zr .zi-n { font-size:var(--fs-label); }
.zr-none { font-size:var(--fs-label); color:var(--muted); display:inline-block; padding-top:3px; }
.zc-foot { margin-top:8px; font-size:var(--fs-mini); color:var(--hint); line-height:1.5; }
.zc-call { margin-top:10px; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px;
  background:var(--green-light); border:1px solid var(--green-mid); font-size:var(--fs-label); line-height:1.55; color:var(--muted); }
.zc-call b { display:block; color:var(--text); }
.zc-call a { margin-left:auto; flex-shrink:0; white-space:nowrap; border:1px solid var(--green); color:var(--green);
  border-radius:9px; padding:6px 11px; font-weight:800; text-decoration:none; background:#fff; }
.zc-call a:hover { background:var(--green); color:#fff; }
@media (max-width:640px) {
  .zc-call { flex-direction:column; align-items:stretch; }
  .zc-call a { margin-left:0; text-align:center; }
}

/* 지정 한 줄. 버튼 전체가 누름 영역이라 손가락·키보드 모두 닿는다(툴팁 의존 금지). */
.zitem + .zitem { margin-top:2px; }
.zi-b { display:flex; align-items:center; gap:8px; width:100%; padding:3px 4px 3px 0;
  border:none; background:none; text-align:left; border-radius:6px; }
.zi-b:hover { background:var(--bg); }
.zi-b:focus-visible { outline:2px solid var(--sun); outline-offset:1px; }
.zi-n { flex:1; min-width:0; font-size:var(--fs-body); font-weight:700; color:var(--text);
  line-height:1.45; }
.zi-n i { font-style:normal; font-size:var(--fs-mini); font-weight:600; color:var(--hint); }
/* 펼침 표시 — 캐럿이 '더 있다'를 말한다. 접근성은 aria-expanded 가 따로 맡는다 */
.zi-b::after { content:'▸'; font-size:var(--fs-mini); color:var(--hint); flex-shrink:0; }
.zi-b[aria-expanded="true"]::after { content:'▾'; }
.zi-d { font-size:var(--fs-body); color:var(--muted); line-height:1.6; padding:2px 0 6px 2px; }
/* 근거 조례 원문 링크 — 근거 문장 끝에 한 줄로 선다(문장 중간에 끼우면 읽는 흐름이 끊긴다) */
.zi-src { display:inline-block; margin-top:4px; font-weight:600; color:var(--sky);
          text-decoration:none; border-bottom:1px solid transparent; }
.zi-src:hover, .zi-src:focus-visible { border-bottom-color:currentColor; }

/* 상태 칩 세 가지. <b>라벨에 글자가 있어</b> 별도 범례가 필요 없다 — 색은 거들 뿐이다. */
.zi-s { flex-shrink:0; font-size:var(--fs-mini); font-weight:800; padding:2px 9px; border-radius:10px;
  border:1px solid transparent; white-space:nowrap; }
.zs-block { background:var(--red-light); color:var(--red); border-color:#F5B7B1; }
.zs-check { background:var(--sun-light); color:#9A6200; border-color:var(--sun-mid); }
.zs-pass  { background:var(--green-light); color:var(--green); border-color:var(--green-mid); }
/* 태양광과 무관한 지정(info) — 칩이 없고 이름도 흐리다. 건수·판정에 들어가지 않는다. */
.zitem-info .zi-n { font-weight:600; color:var(--hint); }

/* 조례 통합 표 밑의 저촉·확인필요 할 일 — 카드 대신 이 자리로 옮겨온 안내 */
.sbt-act { margin-top:8px; padding:8px 11px; border-radius:var(--rs); font-size:var(--fs-body);
  line-height:1.6; background:#FFFDF8; border:1px solid #FAD7A0; }
.sbt-act b { font-size:var(--fs-body); }

/* ── 종합 판정 탭: 최종 판정 카드 — 라벨/판정/배지/한 문장 결론/오독 방지 순서 ── */
.vd-lab { font-size:var(--fs-mini); font-weight:800; color:var(--hint); letter-spacing:.5px; }
.vd-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:3px 0 8px; }
.vd-ico { font-size:24px; }
.vd-name { font-size:20px; font-weight:900; }
.vd-tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; }
.vd-head { font-size:16px; font-weight:800; line-height:1.55; }
.vd-sub { font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.7; }
.vd-ev { margin-left:auto; }

/* 긍정/차단은 나란히 — 좋은 조건만 보고 결론 내리지 않도록 같은 화면에 둔다.
   패널이 좁아지면 자동으로 한 줄씩 쌓인다(auto-fit). */
.two-col { display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); gap:12px;
  margin-top:12px; align-items:start; }
.two-col .card { margin-top:0; }
/* 카드 바탕은 전부 흰색(2026-09-04). 섹션을 통째로 연한 색으로 칠하면 화면이 파스텔 한 장이 되어
   정작 강조할 숫자(부족분·판정 알약)가 묻힌다. 성격은 테두리 색과 제목 색이 말하고, 색 면은
   판정 값(알약·수치·막대)에만 남긴다. */
.card.good { border-color:var(--green-mid); background:#fff; }
.card.good > h3 { color:var(--green); }
.card.risk { border-color:#F1A9A0; background:#fff; }
.card.risk > h3 { color:var(--red); }
/* AI 종합 결론 — 네 탭을 가로질러 읽어 주는 카드.
   판정 카드(초록/빨강/호박)와 색이 겹치지 않게 청록 계열로 둔다. AI 가 만든 문장이라는 것이
   색으로도 구분돼야 사용자가 룰 판정과 헷갈리지 않는다. */
.card.aisum { border-color:#AED6F1; background:#fff; }
.card.aisum > h3 { color:#1B4F72; }
.ai-sum { margin-top:8px; }
.ais-h { font-size:var(--fs-head); font-weight:800; color:#1B4F72; line-height:1.5; }
.ais-sum { font-size:var(--fs-body); color:var(--text); line-height:1.75; margin-top:4px; }
.ais-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:8px; margin-top:9px; }
.ais-c { border:1px solid; border-radius:7px; padding:8px 10px; }
.ais-t { font-size:var(--fs-body); font-weight:800; margin-bottom:3px; }
.ais-p { font-size:var(--fs-body); line-height:1.65; color:var(--text); margin-top:2px; }
.ais-next { margin-top:10px; border-top:1px dashed var(--border); padding-top:8px; }
.ais-nt { font-size:var(--fs-body); font-weight:800; color:#1B4F72; margin-bottom:4px; }
.ais-s { display:flex; gap:7px; align-items:flex-start; font-size:var(--fs-body); line-height:1.65;
  margin-top:3px; }
.ais-s b { flex-shrink:0; width:16px; height:16px; border-radius:50%; background:#1B4F72;
  color:#fff; font-size:var(--fs-mini); display:flex; align-items:center; justify-content:center; margin-top:2px; }

/* 확인이 남은 항목 — '확정된 문제'(risk, 빨강)와 색으로 갈라 놓는다. 한 카드에 섞여 있던
   시절에는 "적용 대상이 아닙니다"로 시작하는 항목이 사업을 막는 문제로 읽혔다.
   호박색은 상태 칩 st-todo(확인 필요)와 같은 계열이라 카드와 칩이 같은 말을 한다. */
.card.todo { border-color:#F0C674; background:#fff; }
.card.todo > h3 { color:var(--amber); }
.todo-note { font-size:var(--fs-label); color:var(--muted); line-height:1.6; margin:-2px 0 7px; }
/* 예외·심의 조항 — 이 조항 하나로 판정이 통째로 뒤집힐 수 있는데 예전에는 작은 회색 글씨라
   그냥 지나쳤다. 판정 카드들과 다른 색(보라)으로 세워 '성격이 다른 정보'임을 먼저 알린다. */
.card.flipcard { border-color:#D7BDE2; background:#fff; }
.card.flipcard > h3 { color:#6C3483; }
/* 옥상형 참고 카드 — 지상형 판정색(빨강·노랑·초록)과 겹치지 않는 남색 계열 */
.card.roofcard { border-color:#AEB6D6; background:#fff; }
.card.roofcard > h3 { color:#2C3E70; }
.card.roofcard .muted { color:var(--muted); font-weight:400; font-size:var(--fs-label); }

/* ── 판정 근거 행(긍정·차단·확인 남음 공통) ──
   [아이콘 · 항목(굵게)+근거 한 줄 · 오른쪽 수치]. 수치가 오른쪽 한 축에 정렬돼야
   여러 항목을 위아래로 훑을 수 있다(문장을 이어 붙이면 스캔이 안 된다). */
/* 행을 2열로 흘린다 — 전폭 카드 안에서 항목이 많아도 높이가 절반이고, 좌우 카드 배치처럼
   한쪽이 통째로 비는 일이 없다. 패널이 좁으면(470px대) 자동으로 1열. */
/* 270px = 2열의 경계값. 패널 폭이 clamp(470px, 46vw, 860px)라 내용폭은 434~824px인데,
   200px —— 2열이 서는 문턱이다(200*2 + gap 22 = 422px). 예전 값 270px 은 문턱이 562px
   인데 지금 패널이 clamp(580px, 38vw, 720px) 라 내용 폭이 455~595px 뿐이라, <b>최대
   패널에서도 7px 이 모자라 2열이 한 번도 서지 않았다</b>(실측 2026-08-31, 상한 680px 시절).
   화면 모드마다 열 수가 알아서 갈린다(미디어쿼리 없이 auto-fit 하나로 덮인다) —
   실측 2026-08-31: 웹(패널 580px, 내용 455px) 2열 216px · 좁은 웹(패널이 전폭이라
   내용 775px) 3열 243px · 폰(내용 299px) 1열. 셋 다 버튼 쌓임 0건이다.
   ⚠ 좁은 웹에서 3열이 서는 것은 <b>의도한 결과다</b>. 그 모드는 패널이 화면 전폭을 쓰므로
   내용 폭이 웹 모드보다 오히려 넓다 — 열 수를 폭으로 묶어 두면 그 자리를 놀린다.
   ⚠ 이 값만 낮추면 안 된다. 2열에서 항목의 버튼 줄(.fx-ev)이 받는 폭은 118~130px 인데
   [근거 보기]+[지도에서 보기] 가 177px 이라 세로로 쌓인다. 그래서 칩 글자를 [근거]·[지도]
   로 줄여 114px 에 맞췄다(workbench.js 의 ev-chip). 둘은 반드시 함께 간다. */
.fx-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:0 22px; align-items:start; }
.fx { display:flex; gap:9px; align-items:flex-start; padding:9px 0;
  border-bottom:1px dashed var(--border); }
/* 2열이라 '마지막 행'이 시각적 마지막이 아니다 — 아래 두 칸만 선을 지운다 */
.fx:last-child, .fx:nth-last-child(2):nth-child(odd) { border-bottom:none; }
.fx-ev { margin-top:5px; display:flex; flex-wrap:wrap; gap:4px; }
.fx-i { flex-shrink:0; width:19px; text-align:center; font-size:var(--fs-head); line-height:1.45; }
.fx-b { flex:1; min-width:0; }
.fx-b > b { font-size:var(--fs-body); font-weight:800; line-height:1.45; }
.fx-d { font-size:var(--fs-body); color:var(--muted); line-height:1.65; margin-top:2px; }
/* 긴 서버 설명은 3줄까지만 — 나머지는 [더 보기]. 지우지 않되 벽으로 두지도 않는다 */
.fx-d.clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fx-more { margin-top:3px; padding:1px 8px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--muted); font-size:var(--fs-mini); font-weight:700; }
.fx-more:hover { border-color:var(--sun); color:#9A6200; }
/* 수치는 굵게·오른쪽 정렬·자릿수 고정. 카드 색이 곧 판정이라 글자색도 카드를 따른다 */
.fx-v { flex-shrink:0; max-width:44%; text-align:right; font-size:var(--fs-body); font-weight:800;
  line-height:1.45; font-variant-numeric:tabular-nums; word-break:keep-all; }
.card.good .fx-v { color:var(--green); }
.card.risk .fx-v { color:var(--red); }
.card.todo .fx-v { color:#9A6200; }
/* 저촉 행의 미니 막대 — 배경(연빨강)=기준까지 남은 몫, 채움(초록)=실측 달성분 */
.fx-bar { height:7px; border-radius:4px; background:#F8D0CB; overflow:hidden;
  margin:6px 0 4px; max-width:250px; }
.fx-bar i { display:block; height:100%; background:var(--green); border-radius:3px 0 0 3px; }
/* 제목 옆 건수 — 'N건' 텍스트보다 눈에 먼저 걸린다 */
.h3-cnt { display:inline-block; min-width:19px; padding:1px 6px; border-radius:10px;
  background:rgba(13,33,55,.07); color:var(--muted); font-size:var(--fs-label); font-weight:800;
  vertical-align:1px; text-align:center; }


/* ── 데이터 신뢰도 — 칸 단위 막대라 "9칸 중 6칸"이 눈으로 세어진다 ── */
.dq-seg { display:flex; gap:4px; margin:7px 0 9px; }
.dq-seg i { flex:1; height:7px; border-radius:4px; background:#E6EAE7; }
.dq-row { display:flex; align-items:center; gap:7px; font-size:var(--fs-body); padding:5px 0;
  border-bottom:1px dashed var(--border); }
.dq-row:last-of-type { border-bottom:none; }
.dq-row .s { font-weight:900; flex-shrink:0; width:13px; text-align:center; }
.dq-row .t { flex:1; }
.dq-retry { font-size:var(--fs-mini); font-weight:700; padding:2px 9px; border-radius:11px;
  border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; white-space:nowrap; }
.dq-retry:hover { border-color:var(--sun); color:#9A6200; background:var(--sun-light); }
.dq-retry:disabled { opacity:.5; cursor:default; }

/* ── 설비·발전량 탭: 면적 → 용량 사슬 ── */
.chain { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-body); margin:4px 0 2px; }
.chain .cell { border:1px solid var(--border); border-radius:8px; padding:6px 10px; text-align:center;
  background:#fff; }
.chain .cell b { display:block; font-size:var(--fs-head); font-weight:900; }
.chain .cell.res { border-color:var(--sun-mid); background:var(--sun-light); }
.chain .op { font-size:var(--fs-head); font-weight:900; color:var(--hint); }
.chain .cell .cl { font-size:var(--fs-mini); color:var(--muted); }

/* 부지 이용률 조절 — 사슬 바로 아래에 붙여 "이 칸을 내가 움직인다"가 보이게 한다 */
.lur { margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:#FBFCFB; }
.lur-hd { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:var(--fs-body); color:var(--muted); }
.lur-hd b { font-size:var(--fs-body); color:var(--text); }
.lur-row { display:flex; align-items:center; gap:8px; margin:6px 0 3px; }
.lur-end { font-size:var(--fs-mini); font-weight:700; color:var(--hint); flex-shrink:0; }
.lur-sl { flex:1; min-width:0; margin:0; accent-color:var(--sun-mid); cursor:pointer; }
.lur-pre { display:flex; gap:6px; flex-wrap:wrap; }
.lur-b { font-size:var(--fs-mini); font-weight:700; padding:3px 10px; border-radius:11px;
  border:1px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; }
.lur-b:hover { border-color:var(--sun); color:#9A6200; }
.lur-b.on { border-color:var(--sun-mid); background:var(--sun-light); color:#9A6200; }
.lur-h { font-size:var(--fs-label); color:var(--muted); line-height:1.65; margin-top:6px; }

/* 용량에 붙는 REC 가중치 — 용량을 바꾸면 단가도 바뀐다는 사실을 숫자 옆에 붙여 둔다 */
.rec-tag { margin-left:5px; font-size:var(--fs-mini); font-weight:800; padding:1px 6px; border-radius:9px;
  border:1px solid var(--sun-mid); background:var(--sun-light); color:#9A6200;
  vertical-align:middle; white-space:nowrap; cursor:help; }
.rec-tag.forest { border-color:#F5B7B1; background:var(--red-light); color:var(--red); }
.rec-tag:hover { filter:brightness(.96); }
.recb code { font-size:var(--fs-mini); background:#EEF2EF; border-radius:3px; padding:1px 4px; }
.recb { margin-top:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:#FBFCFB; }
.recb-hd { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:var(--fs-body); color:var(--muted); }
.recb-hd b { font-size:var(--fs-body); color:var(--text); }
.recb-h { font-size:var(--fs-label); color:var(--muted); line-height:1.65; margin-top:6px; }

/* ── 발전량 탭: 손실 막대 — 숫자만 나열하면 어느 것이 큰지 안 보인다 ── */
.lb { display:grid; grid-template-columns:1fr 46px; gap:4px 8px; align-items:center;
  font-size:var(--fs-body); margin-top:5px; }
.lb .lb-l { grid-column:1 / -1; color:var(--muted); }
.lb .lb-t { height:8px; border-radius:4px; background:#E6EAE7; overflow:hidden; }
.lb .lb-t i { display:block; height:100%; border-radius:4px; }
.lb .lb-v { text-align:right; font-weight:800; }

/* ── 사업성: 3시나리오 표 ── */
/* 원 단위 금액은 자릿수가 길다 — 표가 패널보다 넓어지면 페이지가 아니라 표만 가로로 민다.
   숫자는 tabular-nums 로 자릿수를 세로로 맞춰야 세 시나리오의 크기 차이가 눈에 잡힌다. */
.sc-wrap { overflow-x:auto; margin-top:6px; }
/* 11.5px 유지 — 패널 하한 580px(내용 455px)에서 원 단위 금액 표가 12px 이면 25px 넘쳐 낙관 열이
   잘렸다(실측 2026-09-04, 부안 1804-2). 셀 좌우 여백만 6→5px 로 죄어 그 자리에서 안 잘리게 한다. */
.sc { width:100%; border-collapse:collapse; font-size:var(--fs-label); }
.sc th, .sc td { padding:6px 5px; border-bottom:1px solid var(--border); text-align:right;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.sc th:first-child, .sc td:first-child { text-align:left; color:var(--muted); }
.sc thead th { font-size:var(--fs-label); color:var(--muted); border-bottom:2px solid var(--border); }
.sc thead th.base { color:var(--sky); }
.sc td.base { background:var(--sky-light); font-weight:800; }
/* ── 수익분석 장 — 시안(2026-09-04)의 분위기만 가져온다: 기준 열은 하늘색 틀로 '이 열을 보라',
   운영비는 빨간 음수, 순수익 행은 굵은 선 위에 크게, 체크리스트는 원형 ✓/✕ 배지.
   구조(행 라벨 1열 + 시나리오 3열 한 표)는 그대로다 — 시안처럼 카드 3장에 행 이름을 세 번
   반복하지 않는다. 전부 #chap-biz 범위라 다른 장은 건드리지 않는다. ── */
/* 기준 열 강조는 <b>배경 한 겹</b>으로 끝낸다.
   ⚠ 2026-09-04 두 가지를 고쳤다(대안 시안과 나란히 놓고 비교).
   ⑴ 예전에는 배경 + 좌우 테두리 틀 + 파란 글자, 셋으로 한 가지 일을 했다 — 배경만으로 열이
      충분히 서고 나머지는 소음이라 틀과 글자색을 걷었다.
   ⑵ <b>기준 열 숫자만 파랗게 칠하지 않는다.</b> 보수·기준·낙관은 같은 값을 다른 가정으로 계산한
      것이라 색이 다르면 다른 종류의 값처럼 읽혀 가로 비교가 끊긴다. 표에서 색은 <b>뜻</b>
      (음수=빨강)에만 쓰고 <b>자리</b>에는 쓰지 않는다. 강조는 굵기가 맡는다(td.base font-weight).
   색은 하늘(선택·기준)이다 — 초록은 이 패널에서 '충족'이라(.st-ok·.card.good) 기준 시나리오가
   좋은 결과인 것처럼 읽힌다. 기준은 판정이 아니라 가운데 가정이다. */
.sc thead th.base { font-weight:800; }
/* 행 순서는 paneBiz 가 고정한다(매출 → 운영비 → 순수익 → 월평균 → 투자비 → 회수기간).
   운영비 행(2번째)만 빼는 돈이라 빨강 — 표에서 색은 값의 부호에만 쓴다. */
.sc tbody tr:nth-child(2) td + td { color:var(--red); }
.sc tr.net td { border-top:2px solid var(--border); font-size:var(--fs-body); padding-top:8px; }
.sc tr.net td:first-child { color:var(--text); }
.sc tbody tr:last-child td + td { font-weight:800; }
.sc td:first-child { font-weight:600; }
/* 첫 열(행 이름)만 줄바꿈을 허용하고 보조 설명(.sc-f)을 이름 아래로 내린다 — 원 단위 금액이
   긴 필지(부안 1804-2: 312,200,000원)에서 표가 패널 내용폭 455px 을 18px 넘겨 옆으로 밀렸다.
   숫자 열은 nowrap 그대로다(숫자가 접히면 자릿수 비교가 깨진다). */
.sc th:first-child, .sc td:first-child { white-space:normal; line-height:1.35; }
.sc td:first-child .sc-f { display:block; margin-left:0; margin-top:1px; }
/* 카드 제목 아래 가는 선 — 시안의 카드 머리. 이 장에서만(다른 장은 장 머리글이 제목을 맡는다). */
#chap-biz .card > h3 { padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:10px; }
/* 표 위 한 줄 설명 — 이제 JS 가 .t-sub 를 붙인다(인라인 크기를 !important 로 누르던 규칙 삭제) */
#chap-biz .card > h3 + .t-sub { margin-bottom:6px; }
/* 경고 상자 첫 굵은 글('매출은 순수익이 아닙니다' · '미포함')은 빨강 — 시안의 첫 문장 강조 */
#chap-biz .card > .warnbox > b:first-child { color:var(--red); }
/* 투자비 큰 숫자·산식 — 이제 JS 가 .t-big / .t-sub 를 붙인다. nth-child + !important 로 집던 규칙은
   지웠다: 카드 안 순서가 하나 바뀌면 조용히 빗나가는 선택자였다. 여백만 이 장에서 손본다. */
#chap-biz .two-col > .card:first-child > .t-big { margin-top:2px; }
#chap-biz .two-col > .card:first-child > .t-sub { margin-top:3px; }
/* ── 반영/미반영 체크리스트 — 배지 + 항목 + 값 3열 격자 ────────────────────────
   ⚠ align-items 는 <b>stretch</b>(기본)여야 한다. center 로 두면 칸마다 제 내용 높이로
   줄어들어 <b>칸 아래 점선이 행마다 다른 높이에 그려진다</b> — 항목 이름이 두 줄인 행
   ('설비·환경 손실(성능계수 0.8)', '부담금·계통 분담금·진입로')에서 배지·이름·값의 선이
   층계처럼 어긋났다(2026-09-04 제보). stretch 면 세 칸이 같은 행 높이를 채워 선이 한 줄로 선다.
   세로 가운데 정렬은 격자가 아니라 <b>칸 안에서</b> flex 로 준다. */
.incl { display:grid; grid-template-columns:18px 1fr auto; gap:4px 10px;
  font-size:var(--fs-body); align-items:stretch; }
/* 항목 칸 — 두 줄이 될 때 <b>괄호 앞에서</b> 끊는다.
   ⚠ word-break 기본값은 한글을 <b>글자 단위</b>로 쪼갠다 — '설비·환경 손실(성 / 능계수 0.8)',
   '금융비용(대출 이 / 자)' 처럼 낱말 한가운데가 갈렸다(2026-09-04 제보). keep-all 로 띄어쓰기
   에서만 끊고, 괄호 부분은 JS 가 <small> 로 감싸 아래 줄에 통째로 내린다 — 그래야 두 줄이
   '이름 / (단서)' 로 딱 나뉜다. 칸 폭을 넓혀 한 줄로 만드는 방법은 없다: 카드가 2열 안에
   들어가 이름+값이 한 줄에 설 폭이 애초에 안 나온다. */
.incl > span { display:flex; align-items:center; padding:6px 0;
  border-bottom:1px dashed var(--border); word-break:keep-all; }
.incl > span small { display:block; font-size:inherit; }
.incl > span:nth-last-child(-n+3) { border-bottom:none; }
/* 배지 — 칸은 행 높이만큼 늘어나야 선이 맞는데 원은 18px 로 고정돼야 한다. 그래서 원을
   height 로 만들지 않고 <b>가운데 고정 크기 배경</b>(radial-gradient)으로 그린다.
   ::before + z-index 로 깔면 카드 배경 뒤로 숨는 문제가 있어 배경 이미지를 썼다. */
.incl .y, .incl .n { justify-content:center; background-repeat:no-repeat;
  background-position:center; background-size:18px 18px;
  font-size:var(--fs-mini); font-weight:900; line-height:1; }
/* 진한 초록 원(흰 ✓)은 무거워 보였다(2026-09-04 제보) — 알약과 같은 연한 바탕 + 색 글자로 */
.incl .y { color:var(--green);
  background-image:radial-gradient(circle, var(--green-light) 0 48%, transparent 49%); }
.incl .n { color:var(--red);
  background-image:radial-gradient(circle, var(--red-light) 0 48%, transparent 49%); }
.incl .v { justify-content:flex-end; text-align:right; white-space:nowrap;
  color:var(--muted); font-size:var(--fs-label); }
/* 이름 칸은 flex 라 <small> 이 블록이어도 한 줄로 눕는다 — 세로로 쌓이게 방향을 돌린다 */
.incl > .y + span, .incl > .n + span { flex-direction:column; align-items:flex-start;
  justify-content:center; }
.incl > .n + span { color:var(--muted); }
/* 반영 5행 다음에 미반영이 시작된다(paneBiz 고정) — 16~18번째 칸이 첫 미반영 행. 그 위에 굵은 선 */
.incl > span:nth-child(16), .incl > span:nth-child(17), .incl > span:nth-child(18) {
  border-top:2px solid var(--border); margin-top:4px; padding-top:9px; }
.sc tr.net td { font-weight:900; }
/* 투자비 행 — 시나리오별 값이 아니라 세 열에 공통으로 걸리는 분자라 한 칸으로 합친다 */
/* 시나리오 카드 부속(2026-09-14 시안) — 제목 오른쪽 [계산 근거] 칩, 머리 '기준값' 알약, 표 밑 투자비 줄, ⓘ 안내 */
.sc-ev { margin-left:auto; }
.sc-capex { display:flex; align-items:center; gap:8px; padding:10px 6px; border-bottom:1px solid var(--border);
  font-size:var(--fs-label); }
.sc-capex-k { font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-pill { font-style:normal; font-size:var(--fs-mini); font-weight:700; color:var(--muted); background:#EEF2F6;
  border-radius:999px; padding:1px 8px; white-space:nowrap; }
.sc-capex-v { margin-left:auto; text-align:right; font-weight:800; font-size:var(--fs-body); color:var(--text); white-space:nowrap; }
.sc-capex-v small { display:block; font-weight:500; font-size:var(--fs-mini); color:var(--hint); }
.sc-note { margin-top:10px; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px;
  background:#FFF8E1; border:1px solid #F5D77A; font-size:var(--fs-label); line-height:1.55; color:var(--muted); }
.sc-note-i { color:#C48A00; font-size:16px; line-height:1.2; flex-shrink:0; }
.sc-note b { display:block; color:var(--text); }
.sc .sc-f { font-size:var(--fs-mini); font-weight:600; color:var(--hint); margin-left:5px; white-space:nowrap; }
/* (예전에 여기 또 있던 .incl 선언은 위 한 블록으로 합쳤다 — 뒤에서 align-items:center 로
   앞의 규칙을 덮어 점선이 어긋나고 있었다. 같은 선택자를 두 군데 두지 말 것.) */

/* ══ 탭 5 · 추진 절차 (np- = next procedure) ═══════════════════════════════
   공단「발전사업추진절차」표의 읽기 문법 셋을 옮겨 왔다.
     ① 척추가 하나 — 세로 흐름선이 단계를 관통한다. 전체가 하나의 길로 읽힌다.
     ② 곁가지는 옆으로 — 병행·조건부 절차는 아래가 아니라 오른쪽으로 갈라진다.
        '순서가 아니라 부속'이라는 걸 <b>방향</b>이 말한다(색이 아니라).
     ③ 오른쪽은 늘 '누구에게' — 문의처가 항상 같은 자리에 온다. 이 탭의 목적이다.

   원본은 4열 표(min-width 580px)라 가로 스크롤이 전제인데, 패널 최소폭이 470px라
   그대로는 못 쓴다. 그래서 '구분/절차' 두 열은 척추로, '세부내용/비고' 두 열은
   본문 한 칸으로 합쳤다 — 어느 폭에서도 가로 스크롤이 없다.

   ⚠ 클래스 이름을 전부 np- 로 접두한 이유: 목업에서 쓰던 .body/.org/.node/.src 는
   공용 스타일시트에 그대로 넣으면 다른 화면을 건드린다. */

/* 네 단계의 색. 색이 뜻하는 것은 <b>몇 번째 단계인가</b>지 판정 상태가 아니다
   — 이 탭에는 이 땅에 대한 판정이 하나도 들어가지 않는다.
   --np-acc  글자·굵은 화살표(흰 배경 위 대비 확보)
   --np-line 테두리·가는 흐름선
   --np-tint 구간 판 배경 — 공단 표의 '구분' 열과 열 배경 패턴이 하던 일을 대신한다
   --np-chip 문의처 칩 배경 */
.np-s1 { --np-acc:#1B4F72; --np-line:#4A81AE; --np-tint:#F4F9FD; --np-chip:#EAF4FB; }
.np-s2 { --np-acc:#9A6200; --np-line:#E8A33D; --np-tint:#FFFCF4; --np-chip:#FFF3DC; }
.np-s3 { --np-acc:#0F7A73; --np-line:#31A79F; --np-tint:#F3FBFA; --np-chip:#E2F5F3; }
.np-s4 { --np-acc:#2D6A4F; --np-line:#5CA37C; --np-tint:#F4FBF6; --np-chip:#DFF3E6; }
.np-stage { --np-spine:62px; --np-nodew:124px; --np-gap:16px; display:block; }

/* 맨 위 전제 — 이 서비스의 분석은 공식 확인이 아니다. 이 한 칸이 탭 전체의 조건이라
   접거나 작게 만들지 말 것(작게 했다가 "확인해 준 걸로 알았다"는 오해가 났던 자리다). */
.np-caveat { padding:10px 12px; border-radius:var(--rs); background:var(--sun-light);
  border:1px solid #FAD7A0; font-size:var(--fs-body); color:#7A5200; line-height:1.55;
  word-break:keep-all; }
.np-caveat b { color:#5C3D00; }

/* ── 구간 제목과 구간 판 ── */
.np-h { font-size:var(--fs-head); font-weight:800; color:var(--np-acc); margin:24px 0 0;
  display:flex; align-items:center; gap:8px; letter-spacing:-.2px; }
.np-h::after { content:''; flex:1; height:2px; border-radius:2px;
  background:var(--np-line); opacity:.45; }
.np-n { font-size:var(--fs-mini); font-weight:800; color:#fff; background:var(--np-acc);
  border-radius:50%; width:21px; height:21px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; }
.np-grp { margin-top:11px; padding:15px 14px; border-radius:12px; background:var(--np-tint);
  border:1px solid color-mix(in srgb, var(--np-line) 30%, transparent); }
.np-flow { position:relative; }

/* ── 척추 ── */
.np-row { display:grid; grid-template-columns:var(--np-nodew) 1fr; gap:var(--np-gap);
  align-items:start; position:relative; padding-bottom:20px; }
.np-row:last-child { padding-bottom:0; }
/* 흐름선. .cont 는 '구간의 마지막이지만 다음 구간으로 이어진다'는 뜻이라
   :last-child 여도 선을 남긴다 — 공단 표에서 화살표가 구분선을 뚫고 내려가던 그것. */
.np-row:not(:last-child)::before, .np-row.cont::before {
  content:''; position:absolute; left:var(--np-spine); top:8px; bottom:-2px; width:2px;
  margin-left:-1px; background:var(--np-line); opacity:.55; z-index:0; }
.np-row.strong::before { width:4px; margin-left:-2px; opacity:1;
  background:linear-gradient(180deg, var(--np-acc),
    color-mix(in srgb, var(--np-acc) 30%, transparent)); }
.np-row:not(:last-child)::after, .np-row.cont::after {
  content:''; position:absolute; left:var(--np-spine); bottom:2px; margin-left:-5px;
  border:5px solid transparent; border-top-color:var(--np-line); z-index:0; }
.np-row.strong::after { margin-left:-7px; border-width:7px; border-top-color:var(--np-acc); }

/* 단계 박스 — 흰 배경이라 뒤로 지나가는 흐름선을 가린다(z-index 로 위에 뜬다) */
.np-node { position:relative; z-index:1; border:2px solid var(--np-line); border-radius:8px;
  background:#fff; text-align:center; padding:9px 5px; font-size:var(--fs-label); font-weight:800;
  color:var(--np-acc); line-height:1.25; letter-spacing:-.3px; word-break:keep-all;
  box-shadow:0 1px 3px rgba(0,0,0,.05); }
.np-law { display:block; font-size:var(--fs-mini); font-weight:700; color:var(--hint); margin-top:3px; }

/* ── 본문: 문의처 + 설명 ── */
.np-body { padding-top:1px; min-width:0; }
/* 문의처 줄 — 이 탭이 존재하는 이유라 한 줄을 통째로 준다 */
.np-ask { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.np-askl { font-size:var(--fs-mini); font-weight:800; color:var(--hint); flex-shrink:0; letter-spacing:.3px; }
.np-org { font-size:var(--fs-label); font-weight:800; padding:2px 8px; border-radius:10px;
  white-space:nowrap; background:var(--np-chip); color:var(--np-acc); }
/* 전화번호는 칩을 비워 둔다 — 기관명 칩과 한눈에 갈라야 어디로 거는 번호인지 헷갈리지 않는다 */
.np-tel { background:var(--surface);
  border:1px solid color-mix(in srgb, var(--np-line) 45%, transparent); }
.np-more { font-size:var(--fs-mini); font-weight:800; color:var(--np-acc); text-decoration:none;
  border-bottom:1px solid var(--np-line); white-space:nowrap; opacity:.9; }
.np-more:hover { opacity:1; }

.np-d { list-style:none; margin:0; padding:0; }
.np-d li { position:relative; padding-left:11px; font-size:var(--fs-body); color:var(--muted);
  line-height:1.5; word-break:keep-all; }
.np-d li + li { margin-top:3px; }
.np-d li::before { content:''; position:absolute; left:1px; top:7px; width:0; height:0;
  border:3px solid transparent; border-left-color:var(--hint); }
.np-d li b { color:var(--text); font-weight:800; }
/* 벌금·과태료·기한처럼 <b>놓치면 되돌릴 수 없는 것</b>만 빨강. 남발하면 무게가 사라진다. */
.np-d li.np-warn { color:var(--red); }
.np-d li.np-warn::before { border-left-color:var(--red); }
.np-d li.np-warn b { color:var(--red); }

/* ── 곁가지 ──
   색은 그 구간 색을 그대로 쓰고 <b>점선</b>으로만 구분한다. 가지에 따로 색(예전엔 초록)을
   주면 네 단계의 색 구분과 부딪혀 색이 무엇을 뜻하는지 흐려진다.
   색 = 몇 번째 단계인가 / 선 모양 = 본 절차인가 곁가지인가 — 두 신호가 겹치지 않는다. */
.np-br { display:grid; grid-template-columns:var(--np-nodew) 1fr; gap:var(--np-gap);
  position:relative; padding-bottom:20px; }
.np-br::before { content:''; position:absolute; left:var(--np-spine); top:0; bottom:-2px;
  width:2px; margin-left:-1px; background:var(--np-line); opacity:.55; z-index:0; }
.np-br::after { content:''; position:absolute; left:var(--np-spine); top:15px;
  width:calc(var(--np-nodew) - var(--np-spine) + var(--np-gap) - 8px); height:0;
  border-top:2px dashed var(--np-line); z-index:0; }
.np-gbox { grid-column:2; position:relative; z-index:1; border:2px dashed var(--np-line);
  border-radius:8px; background:var(--surface); padding:9px 11px; }
.np-gbox::before { content:''; position:absolute; left:-9px; top:9px;
  border:5px solid transparent; border-left-color:var(--np-line); }
.np-gt { font-size:var(--fs-body); font-weight:800; color:var(--np-acc); margin-bottom:5px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.np-cond { font-size:var(--fs-mini); font-weight:800; color:#fff; background:var(--np-acc);
  border-radius:9px; padding:1px 7px; }

/* ── 아래 안내 ── */
.np-penal { margin-top:22px; padding:11px 13px; border:1px solid #F5C6C0;
  border-radius:var(--rs); background:var(--red-light); }
.np-penal-t { font-size:var(--fs-label); font-weight:800; color:var(--red); margin-bottom:5px; }
.np-penal ul { list-style:none; margin:0; padding:0; }
.np-penal li { position:relative; padding-left:11px; font-size:var(--fs-body); color:#8E4B42;
  line-height:1.5; }
.np-penal li + li { margin-top:2px; }
.np-penal li::before { content:''; position:absolute; left:1px; top:7px; width:0; height:0;
  border:3px solid transparent; border-left-color:var(--red); }
.np-penal li b { color:var(--red); font-weight:800; }

/* 지적측량 안내 — 절차 번호 <b>밖</b>의 참고 한 칸. 점선 테두리로 '해야 할 일'과 구분한다
   (번호 안에 끼우면 '선택'이라 적어도 의무로 읽힌다 — 예전 탭에서 실제로 그렇게 읽혔다). */
/* 지적측량 안내 배너(2026-09-14 시안) — [아이콘 타일][제목·설명·전화][버튼+주소]. 절차 번호 밖에 두어 의무로 안 읽히게 한 자리는 그대로다. */
.np-foot { margin-top:12px; display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border);
  border-radius:12px; background:#fff; font-size:var(--fs-label); line-height:1.6; color:var(--muted); }
.np-foot-ic { flex:0 0 52px; height:52px; border-radius:12px; background:#E6F4EF; display:flex; align-items:center; justify-content:center; }
.np-foot-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.np-foot-b > b { font-size:var(--fs-head); color:#1F3A5F; line-height:1.4; }
.np-foot-tel { margin-top:4px; color:var(--text); }
.np-foot-tel b { font-size:var(--fs-body); color:#1F3A5F; letter-spacing:.02em; }
.np-foot-cta { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.np-foot-cta a { border:1.5px solid #2F8F7A; color:#1E6E5C; background:#fff; border-radius:10px; padding:8px 14px; font-weight:800;
  text-decoration:none; white-space:nowrap; font-size:var(--fs-label); }
.np-foot-cta a:hover { background:#E6F4EF; }
.np-foot-cta small { font-size:var(--fs-mini); color:var(--hint); }
@media (max-width:640px) {
  .np-foot { flex-wrap:wrap; }
  .np-foot-cta { flex-direction:row; align-items:center; gap:10px; width:100%; padding-left:66px; }
}
.np-src { margin-top:14px; font-size:var(--fs-mini); color:var(--hint); line-height:1.6; }
.np-src a { color:var(--hint); }

/* ── 상위법 이격거리 요약표(조례 카드 안 접힌 상세) ──────────────────────────
   조례 표(.sbt)와 성격이 다르다: 저건 <b>이 땅</b>의 판정이고 이건 <b>규정 자체</b>의 변화다.
   그래서 판정 알약 색(빨강 저촉·초록 충족)을 쓰지 않는다 — '적용 가능=초록'으로 읽히면
   규제가 남는 것이 좋은 일처럼 보여 뜻이 뒤집힌다. 굵기로만 구분한다.
   구조는 '구분 / 기준' 2열이고, 같은 기준이 걸리는 구분은 <b>기준 칸을 rowspan 으로 병합</b>한다
   (사용자 지정 2026-09-04) — 같은 말이 다섯 번 반복되면 표가 목록으로 읽혀 묶음이 안 보인다. */
/* 표 자체가 <b>한 덩어리</b>로 보이게 바깥 테두리와 둥근 모서리를 준다. 예전에는 셀 아래
   선만 있어서 접힌 상세의 바탕 위에 글자가 흩어져 있는 것처럼 보였다(제보).
   ⚠ border-collapse 는 <b>separate</b> 를 쓴다 — collapse 면 테이블에 준 border-radius 가
   안 먹는다. 그래서 칸 사이 선은 border-top / border-left 로 직접 긋고, 선이 두 겹이 되지
   않게 '위'와 '왼쪽'만 쓴다(첫 행·첫 열에서는 뺀다). */
.lawtbl { width:100%; border-collapse:separate; border-spacing:0; margin-top:8px;
  font-size:var(--fs-body); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--rs); }
.lawtbl th { text-align:left; font-size:var(--fs-mini); font-weight:700; color:var(--muted);
  background:#F0F4F1; padding:7px 10px; border-bottom:1px solid var(--border); }
.lawtbl td { padding:8px 10px; line-height:1.5; color:var(--text); vertical-align:middle;
  border-top:1px solid var(--border); }
/* 머리글 아래 선이 이미 있으니 첫 본문 행의 윗선은 뺀다 */
.lawtbl tbody tr:first-child td { border-top:none; }
.lawtbl td:first-child { font-weight:700; }
/* 세로 칸막이 — 구분 열과 기준 열을 가른다 */
.lawtbl th + th, .lawtbl td + td { border-left:1px solid var(--border); }
/* 병합 칸 — 세로 가운데 정렬 + 아주 옅은 바탕. 묶음 안에서는 구분 열에만 가로선이 남아
   오른쪽이 통으로 이어지는 것이 눈에 띈다. */
.lawtbl td.lw-v { color:var(--muted); background:#FBFCFD; }
.lawtbl td.lw-v b { color:var(--text); }
/* 모서리 — separate 라 칸 배경이 둥근 테두리 밖으로 삐져나온다. 네 귀퉁이를 직접 깎는다. */
.lawtbl thead th:first-child { border-top-left-radius:var(--rs); }
.lawtbl thead th:last-child  { border-top-right-radius:var(--rs); }
.lawtbl tbody tr:last-child td:first-child { border-bottom-left-radius:var(--rs); }
.lawtbl tbody tr:last-child td:last-child  { border-bottom-right-radius:var(--rs); }
/* 인용 조문 — 원문임을 왼쪽 선으로 드러내고 본문과 섞이지 않게 한다 */
.lawquote { margin-top:9px; padding:7px 11px; border-left:3px solid var(--sky-mid);
  background:var(--bg); font-size:var(--fs-label); line-height:1.65; color:var(--muted); }
/* ── 글자 유틸 — JS 가 만드는 조각에 크기를 인라인으로 박지 않기 위한 최소 세트.
   인라인으로 두면 척도(--fs-*) 밖으로 새어 나가고, 폰에서 토큰만 올리는 방식도 안 먹는다.
   (2026-09-04: 인라인 25곳을 이 다섯으로 걷어냈다.) */
.t-sub  { font-size:var(--fs-label); color:var(--muted); line-height:1.65; }
.t-note { font-size:var(--fs-body); line-height:1.7; }
.t-tag  { font-size:var(--fs-mini); font-weight:600; color:var(--hint); }
.t-hint { font-size:var(--fs-mini); color:var(--hint); }
.t-big  { font-size:var(--fs-num); font-weight:900; letter-spacing:-.3px; line-height:1.2; }
/* 접힌 상세의 본문 — 예전에는 여는 쪽(JS)이 인라인으로 크기를 줬다 */
details.fold .fold-body { font-size:var(--fs-body); line-height:1.7; color:var(--muted); }
/* 판정 배지의 아이콘·꼬리표 — 아이콘은 글자 척도가 아니라 그림이라 따로 둔다 */
#vhead .lv-ico { font-size:26px; line-height:1; }
#vhead .lv-tag { background:rgba(255,255,255,.55); color:inherit; }

.lawquote cite { display:block; margin-top:4px; font-style:normal; font-size:var(--fs-mini); color:var(--hint); }

/* 뒤집을 조건 — 질문형 체크 */
.flip { padding:8px 0; border-bottom:1px dashed var(--border); font-size:var(--fs-body); }
.flip:last-child { border-bottom:none; }
/* 패턴에 걸린 조항은 요약 질문이, 못 걸린 조항은 원문이 그대로 이 자리에 온다 —
   원문은 길어서 두세 줄이 되므로 줄간격을 준다(어느 쪽이든 굵기는 같다) */
.flip .q { font-weight:700; line-height:1.5; }
.flip .src { font-size:var(--fs-label); color:var(--hint); margin-top:3px; line-height:1.55; }

/* 공용 요소 */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 18px; margin-bottom:16px; }
/* index.html .sec-head/.sec-icon 축소판 — 패널 폭에 맞춘 섹션 머리 */
.sec-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px;
  border-bottom:1px solid var(--border); }
.sec-icon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:var(--fs-head); flex-shrink:0; }
.sec-title { font-size:var(--fs-head); font-weight:700; }
.sec-sub { font-size:var(--fs-body); color:var(--muted); margin-top:2px; }
.note { font-size:var(--fs-body); color:var(--muted); background:#FBFBF9; border:1px solid var(--border);
  border-radius:var(--rs); padding:9px 12px; line-height:1.7; margin-top:8px; }
.warnbox { font-size:var(--fs-body); color:#784212; background:var(--sun-light); border:1px solid var(--sun-mid);
  border-radius:var(--rs); padding:9px 12px; line-height:1.7; margin-top:8px; }
/* 예외·심의 조항 상자 — .note(작은 회색)로 두면 기준표 아래 각주처럼 읽혀 그냥 넘긴다.
   판정을 통째로 뒤집을 수 있는 정보라 종합판정 카드와 같은 보라 계열로 세운다. */
.excbox { font-size:var(--fs-body); color:#4A235A; background:#fff; border:1px solid #D7BDE2;
  border-radius:var(--rs); padding:9px 12px; line-height:1.7; margin-top:8px; }
.excbox b { color:#6C3483; }
/* 원문 4건은 종합판정 카드가 질문형과 함께 담는다 — 여기서 다시 늘어놓으면 같은 글이 두 탭에
   그대로 깔린다. 여기서는 '단서가 있다'는 신호와 건수만 주고 그쪽으로 보낸다. */
.exc-go { display:inline-block; margin-left:6px; padding:2px 9px; border-radius:11px;
  border:1px solid #D7BDE2; background:#fff; color:#6C3483;
  font-size:var(--fs-mini); font-weight:800; white-space:nowrap; }
.exc-go:hover { background:#F4ECF7; }
dl.kv { display:grid; grid-template-columns:96px 1fr; gap:5px 10px; font-size:var(--fs-body); }
dl.kv dt { color:var(--muted); } dl.kv dd { font-weight:600; }
.badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:var(--fs-mini); font-weight:800;
  border:1px solid transparent; line-height:1.5; }
.badge.ok { background:var(--green-bg); color:var(--green); border-color:var(--green-mid); }
.badge.warn { background:var(--red-bg); color:var(--red); border-color:#F5B7B1; }
.badge.info { background:var(--blue-bg); color:var(--blue); border-color:var(--sky-mid); }
/* '해당 없음' — 통과한 것이 아니라 적용 대상이 아닌 기준. 회색으로 충족과 확실히 구분한다 */
.badge.none { background:#F1F3F4; color:var(--muted); border-color:#DDE2E6; }

.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid var(--border); border-radius:var(--rs); background:#FFFDF7;
  padding:6px 10px; font-size:var(--fs-body); }
.chip b { color:#7E5109; font-size:var(--fs-body); }
.mgen-chartbox { position:relative; height:190px; }
/* 누적 현금흐름 차트(수익분석 장) — 세로 220px: 20년 축과 억 단위 눈금 6개가 겹치지 않는 최소 높이 */
.cf-chartbox { position:relative; height:220px; margin-top:8px; }
.cf-note { font-size:12px; color:var(--muted); line-height:1.6; margin-top:6px; }
.cf-note b { color:var(--text); }
#chap-biz .card > h3 .st { vertical-align:middle; margin-left:6px; }

/* ── 전국 일사량(index.html 이식) — 메인 지도 오버레이 + 판독 바 ──
   격자가 전국 축척이라 필지 줌(17)에서 깔면 단색 한 장이 된다. 그래서 이 도구는
   켜질 때 전국 보기로 물러나고, 끄면 보던 자리로 되돌린다(#shbar 와 같은 하단 바 형식). */
/* 게이지·차트 좌우 배치 — 세로 쌓기(max-width:520)는 바가 지도 가운데까지 올라와 가렸다 */
/* 일사량 카드 — 지도 오른쪽 아래(도구 컬럼 왼쪽). 예전에는 left:10px~right:62px 로
   화면 폭을 거의 다 차지해 지도를 가렸다. 폭을 내용에 맞춰 좁히고 오른쪽에 붙인다.
   두 칸(inso-cols)이 나란히 서면 여전히 넓어지므로 좁은 화면에서는 세로로 쌓는다. */
/* 일사량 판독 바 — 지도 오른쪽 아래(도구 컬럼 왼쪽).
   계절 차트를 '설비발전량' 패널로 옮긴 뒤로는 게이지 한 줄만 남아 훨씬 작아졌다.
   예전에는 left:10px~right:62px 에 차트까지 들어 화면을 크게 가렸다(사용자 피드백). */
/* bottom 32px — #shbar 와 같은 이유(상시 출처 표기 자리 확보) */
/* 자리는 위 .slope-leg 주석의 공통 규칙 — 왼쪽 아래, 오른쪽 202px(범례)은 비운다 */
#insobar { display:none; position:absolute; left:10px; right:auto; bottom:43px; z-index:7;
  background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 6px 22px rgba(0,0,0,.18); padding:8px 14px; width:min(330px, calc(100% - 212px));
  max-height:calc(100% - 70px); overflow:auto; }
.inso-cols { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.inso-col { min-width:0; }
#insoTitle { font-size:12px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
#insoTitle small { font-weight:500; color:var(--hint); }
.inso-load { font-size:12px; color:var(--muted); text-align:center; padding:18px 0; }
.gauge { margin-bottom:0; }
.gauge-head { font-size:13px; color:var(--text); text-align:center; margin-bottom:6px; }
.gauge-head b { font-size:16px; }
/* 값 축은 색 띠 하나 — 낮음(파랑)~높음(빨강)이 히트맵 색과 같은 순서다 */
/* 위 26 / 아래 4 — 이 값을 정하는 것은 색띠가 아니라 <b>띠에 붙어 띠 밖으로 나가 있는
   라벨</b>이다. 위: '내 땅' 삼각형 + 글자 / 아래: '전국평균' 점선 글자.
   폰에서 쓰던 두 수법을 데스크톱에도 들여와 세로를 죈다(사용자 요청) —
   ⑴ 삼각형을 띠에 <b>붙이고</b> 라벨의 줄높이를 1 로 눌러 위 묶음을 21px 로 만든다.
   ⑵ '전국평균' 라벨을 눈금 줄(낮음·높음)과 <b>같은 높이</b>로 끌어올려 한 줄로 읽게 한다
      — 아래로 두 줄을 쓰던 것이 한 줄이 된다.
   ⚠ 위 여백을 21px 밑으로 더 줄이려면 '내 땅' 글자를 빼는 수밖에 없다(폰이 그렇게 한다).
   데스크톱은 남긴다 — 폰은 '이 땅 연평균 4.24' 가 띠 <b>바로 왼쪽</b>에 붙어 있어 검은
   삼각형이 무엇인지 자명하지만, 여기서는 그 문장이 가운데 위에 있어 표식과 떨어져 있다.
   실측: 게이지 높이 125.8 → 87.8px. */
.gauge-bar { position:relative; height:14px; border-radius:7px; margin:26px 4px 4px;
  background:linear-gradient(90deg,#313695,#74add1,#abd978,#fee050,#d73027); }
/* 삼각형은 띠에 <b>닿는다</b>(top = 제 높이 -9). 라벨의 위치 기준은 이 삼각형의 <b>패딩
   상자</b>다 — 폭·높이 0 에 테두리로만 그린 도형이라 그 상자는 삼각형 <b>밑변</b>(= 띠 윗면)
   에 있다. top:-21 은 거기서 21px 위, 곧 삼각형 꼭짓점보다 12px 위다.
   ⚠ 이 기준을 삼각형 <b>꼭대기</b>로 착각하면 글자가 삼각형을 파고든다 — 실제로 -19 로
   잡았다가 7.5px 겹쳤다(제보 그림). */
.gauge-mk { position:absolute; top:-9px; transform:translateX(-50%); width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid #1B2A3A; }
.gauge-mk::after { content:'내 땅'; position:absolute; top:-21px; left:50%; transform:translateX(-50%);
  font-size:10px; line-height:1; font-weight:700; color:#1B2A3A; white-space:nowrap; }
.gauge-avg { position:absolute; top:-4px; bottom:-4px; width:0;
  border-left:2px dashed rgba(0,0,0,.45); transform:translateX(-50%); }
/* bottom:-17 = 눈금 줄과 같은 높이(위 ⑵). 전국평균은 눈금이 곧 전국 최소~최대라 늘
   가운데쯤에 서므로(실측 60.3%), 양 끝에 붙는 '낮음/높음' 글자와 부딪히지 않는다. */
.gauge-avg::after { content:'전국평균'; position:absolute; bottom:-17px; left:50%;
  transform:translateX(-50%); font-size:9.5px; color:var(--muted); white-space:nowrap; }
.gauge-scale { display:flex; justify-content:space-between; margin:6px 4px 0;
  font-size:11px; color:var(--muted); }
.gauge-note { text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }
.gauge-note .g-hi { color:#E8322F; }
.gauge-note .g-lo { color:#2E77C7; }
.season-head { font-size:12px; font-weight:700; text-align:center; margin-bottom:8px; }
.season-unit { font-weight:400; color:var(--muted); font-size:11px; }
.season-chartbox { position:relative; height:108px; }
.inso-cap { font-size:11px; color:var(--muted); text-align:center; margin-top:4px; line-height:1.6; }
#empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; z-index:5; text-align:center; padding:20px;
  background:linear-gradient(160deg,#0D2137 0%,#1B4F72 45%,#2D6A4F 100%); }
#empty .tag { display:inline-block; font-size:12px; padding:5px 14px; background:rgba(245,166,35,.2);
  color:#F8D06B; border-radius:20px; font-weight:600; margin-bottom:18px;
  border:1px solid rgba(245,166,35,.3); }
#empty h1 { font-size:30px; font-weight:900; margin-bottom:10px; color:#fff; letter-spacing:-1px; }
#empty h1 span { color:var(--sun); }
#empty p { color:rgba(255,255,255,.78); font-size:13.5px; line-height:1.8; }
#empty .scope { margin-top:22px; max-width:520px; font-size:12px; text-align:left; }
#empty .scope .row { display:flex; gap:8px; padding:8px 12px; border-radius:var(--rs); margin-bottom:8px;
  line-height:1.7; }
#empty .scope .yes { background:rgba(216,243,220,.14); border:1px solid rgba(149,213,178,.45); color:#D8F3DC; }
#empty .scope .no { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.72); }
#loading { display:none; position:fixed; inset:0; background:rgba(13,33,55,.55); z-index:99;
  align-items:center; justify-content:center; }
#loading .box { background:#fff; border-radius:var(--r); padding:22px 26px; width:420px; max-width:92vw; }
#loading h3 { font-size:14px; margin-bottom:2px; }
#loading .lsub { font-size:11.5px; color:var(--hint); margin-bottom:12px; }
.lstep { display:flex; gap:8px; font-size:12px; color:var(--hint); padding:3px 0; align-items:flex-start; }
.lstep .dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:9px; margin-top:1px; }
.lstep.done { color:var(--text); } .lstep.done .dot { background:var(--green); border-color:var(--green); color:#fff; }
.lstep.now { color:var(--green); font-weight:700; } .lstep.now .dot { border-color:var(--green); animation:pulse 1s infinite; }
/* 무슨 자료를 어디서 가져오는 중인지 — 지금 도는 단계에서만 펼친다(다 펼치면 벽이 된다) */
.lstep .lhint { display:none; font-size:11px; font-weight:400; color:var(--hint); margin-top:2px; line-height:1.5; }
.lstep.now .lhint { display:block; }
.lstep .ltag { font-size:10px; font-weight:700; color:#9C6500; background:#FDF0D5;
  border:1px solid #E8C07D; border-radius:8px; padding:0 5px; margin-left:5px; }
#lfoot { margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--hint); display:flex; justify-content:space-between; gap:10px; }
#lwhy { margin-top:9px; font-size:11.5px; line-height:1.6; color:#9C6500;
  background:#FDF0D5; border:1px solid #E8C07D; border-radius:8px; padding:8px 10px; display:none; }
@keyframes pulse { 50% { transform:scale(1.25); } }

/* 이용 동의 게이트 — 동의 전에는 어떤 조작도 못 하게 최상위에서 전부 덮는다.
   법적 효력·인허가 책임 고지를 화면 구석 각주로만 두면 아무도 안 읽는다 —
   서비스의 성격('참고 자료')을 처음에 확인받는 것이 제공자·사용자 모두를 지킨다. */
#consent { position:fixed; inset:0; z-index:200; background:rgba(13,33,55,.62);
  display:flex; align-items:center; justify-content:center; }
/* 폭·글자 크기 — 고지 문장이 길어 490px/13px 에서는 항목마다 여러 줄로 접혀 '두 가지를
   고지한다'는 구조가 묻혔다(실측: 53자 2줄 / 86자 3줄). 읽히지 않는 고지는 고지가 아니다.
   인허가 책임이 걸린 문장이라 본문(li)을 본문 기본값보다 크게 잡았다.
   max-width:92vw 가 좁은 화면을 받는다(뷰포트 838px 이하부터 92vw 가 이긴다). */
#consent .cs-box { background:#fff; border-radius:var(--r); width:771px; max-width:92vw;
  padding:30px 34px; box-shadow:0 8px 40px rgba(13,33,55,.35); }
#consent .cs-title { font-size:17px; font-weight:800; margin-bottom:16px; }
#consent .cs-body ul { margin:0 0 12px 18px; padding:0; }
#consent .cs-body li { font-size:16.5px; line-height:1.8; margin-bottom:11px; color:var(--text); }
#consent .cs-sub { font-size:11.5px; color:var(--hint); line-height:1.6; padding-top:10px;
  border-top:1px solid var(--border); }
#consent .cs-btn { margin-top:16px; width:100%; padding:12px; border-radius:12px; border:0;
  background:var(--green); color:#fff; font-size:17px; font-weight:800; cursor:pointer; }
#consent .cs-btn:hover { filter:brightness(1.06); }

@media (max-width:1000px) {
  html,body { overflow:auto; }
  #stage { flex-direction:column; height:auto; overflow:visible; }
  /* 세로 배치에선 패널이 지도 아래에 오므로 '옆으로 밀어내기'가 의미 없다 — 접기 자체를 끈다 */
  #panelToggle { display:none; }
  #stage.panel-hidden #panel { margin-right:0; }
  /* ⚠ #stage 의 overflow:hidden 을 푼다. 그건 접힌 패널을 화면 밖에서 잘라내려고 둔 것인데
     (바로 위에서 접기 기능을 끈 지금은 쓸 일이 없다), 조상에 overflow:hidden 이 있으면
     그 안의 position:sticky 가 화면에 붙지 못한다 — 그래서 모바일에서만 판정 바가 그냥
     스크롤돼 사라졌다(실측). 화면이 좁아 결론이 더 필요한 쪽에서 안전장치가 꺼져 있던 셈. */
  #stage { overflow:visible; }
  /* flex:none 필수 — 세로 배치가 되면 flex:1 의 flex-basis:0 이 height:52vh 를 이겨 지도가 사라진다 */
  /* min-width:0 — 데스크톱용 최소폭 420px 를 풀어야 한다. 세로 배치에선 지도가 어차피 전폭인데,
     420px 미만 폰(375px 등)에서는 이 최소폭이 뷰포트를 뚫어 페이지 전체에 가로 스크롤을 만든다(실측).
     높이는 이제 <b>비율이 아니라 뺄셈</b>이다: 화면에서 상단바와 하단 탭바를 뺀 나머지를
     지도가 통째로 쓴다 — 첫 화면은 [상단바][지도][탭바] 셋뿐이고, 지도가 탭바에 맞붙는다
     (사용자 요청). 폰마다 다른 상단바 높이는 JS 가 재서 --top-h·--rail-h 로 넣는다
     (setChromeVars — 글자 크기·줄바꿈에 따라 달라지므로 CSS 상수로는 못 적는다).
     var() 의 기본값은 JS 가 늦거나 실패해도 화면이 무너지지 않게 두는 안전판이다.

     ⚠ svh 가 아니라 <b>dvh</b>다. 예전에 svh 를 쓴 이유는 '주소창이 있는 동안 지도가 길게
     잡혀 탭바가 첫 화면에서 밀려나는' 문제였는데, 탭바를 화면 아래 fixed 로 내린 뒤로는
     그 문제 자체가 없다(탭바는 늘 보인다). 반대로 svh 로 두면 주소창이 접힐 때 지도만
     그대로라 지도와 탭바 사이에 빈 틈이 생긴다 — dvh 는 그 틈 없이 계속 맞붙는다.
     앞 줄 vh 는 dvh 미지원 브라우저 fallback. */
  #mapcol { flex:none; min-width:0;
    height:calc(100vh  - var(--top-h, 78px) - var(--rail-h, 54px));
    height:calc(100dvh - var(--top-h, 78px) - var(--rail-h, 54px)); }
  /* 좁은 화면에선 띠지를 풀어 가로 탭바로 되돌리고, 화면 <b>아래에 고정</b>한다.
     폰은 엄지로 쓴다 — 812px 화면의 맨 위는 한 손으로 닿지 않는 자리다(사용자 제안).
     5개짜리 하단 탭은 iOS·안드로이드 양쪽의 표준 자리이기도 하다.
     ⚠ 예전처럼 '위에 붙였다 뗐다' 하지 않는다. sticky 로 위에 붙이다가 붙는 순간 아래로
       보내면 바가 화면 위 → 아래로 <b>순간이동</b>한다(스크롤 한 픽셀에 500px 도약).
       늘 아래에 있으면 그 문제가 아예 없고, 본문이 밀려 흔들리는 일도 없다.
     position:fixed 라 흐름에서 빠진다 — 지도(1px 이음선) 아래는 #panel 이 곧장 이어받고,
     본문 끝이 바에 가리지 않도록 #panel 에 그만큼 아래 여백을 준다(아래).
     padding-bottom:env(...) — 아이폰 홈 인디케이터 위로 띄운다. */
  #railStick { display:block; height:1px; background:#16324F; }
  #rail { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:12;
    width:100%; flex-direction:row; gap:0; background:#16324F;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -3px 10px rgba(13,33,55,.34); }
  /* 비선택 탭을 한 눈금 더 가라앉힌다(#C6D4E1 → 반투명 흰색) — '지금 어느 장인가'는
     색 대비가 말해야 하는데, 다섯이 비슷한 밝기면 켜진 탭의 윗금(주황)만 찾게 된다. */
  /* justify-content:center 필수. 기본값(flex-start)이면 세로 배치에서 내용이 <b>위에</b>
     몰린다. 펼친 상태는 높이가 내용대로라 padding 9px 이 위아래를 맞춰 티가 안 나지만,
     붙은 상태(#rail.stuck)는 height:38px 고정에 padding:0 이라 남는 11px 이 전부 아래로
     가고 아이콘이 띠 윗변에 닿는다 — '위 패딩이 없다'로 보였다(제보 스크린샷). */
  .rl { flex:1; min-width:0; writing-mode:horizontal-tb; flex-direction:column; gap:3px;
    justify-content:center;
    font-size:10.5px; line-height:1.15; white-space:nowrap; color:rgba(255,255,255,.55);
    padding:7px 4px; border:none; border-radius:0; box-shadow:none; letter-spacing:0;
    background:#16324F; border-top:3px solid transparent;
    transition:height .14s, padding .14s, font-size .14s, gap .14s; }
  /* 칸 사이 세로 구분선 — 다섯이 배경색까지 같으면 하나의 긴 띠로 읽혀 '버튼'으로 안
     보였다(사용자 지적). 테두리가 아니라 inset 그림자다: 테두리는 폭을 먹어 1px 씩
     다섯 칸의 폭이 어긋난다. */
  .rl + .rl { box-shadow:inset 1px 0 0 rgba(255,255,255,.09); }
  /* 켜진 칸 표시는 아이콘 뒤 <b>알약</b>으로 — 머티리얼 하단 탭바의 방식이다.
     윗금(주황) 하나만으로는 다섯 중 어디가 켜졌는지 눈이 한 번 훑어야 찾았다.
     b 를 고정 크기 상자로 만들어야 알약이 글자 폭에 따라 들쭉날쭉해지지 않는다. */
  .rl b { display:flex; align-items:center; justify-content:center;
    width:42px; height:23px; border-radius:12px; opacity:.75;
    font-size:17px; filter:none; line-height:1;
    transition:background .14s, opacity .14s; }
  .rl.on b { opacity:1; background:rgba(245,166,35,.24); }
  .rl:active b { background:rgba(255,255,255,.14); }
  .rl:hover { padding-left:4px; transform:none; box-shadow:none; }
  .rl.on { margin-right:0; padding-left:4px; border-left:none; border-top-color:var(--sun);
    box-shadow:none; background:rgba(255,255,255,.10); color:#fff; font-weight:800; }
  /* 켜진 칸은 왼쪽 구분선을 지운다 — 알약·배경으로 이미 갈라져 보이고, 선이 남으면
     밝아진 칸의 왼쪽 모서리에 군더더기 한 줄이 걸린다. */
  .rl.on + .rl, .rl.on { box-shadow:none; }
  /* 본문을 읽는 중(=지도가 화면 밖)에는 그림자만 한 눈금 더 준다. 예전에 이 클래스는
     바를 38px 로 <b>줄이는</b> 스위치였는데, 아래로 내린 뒤로는 줄일 이유가 없다 —
     위에 붙을 때는 읽던 본문을 먹으니 아꼈지만, 하단 탭바는 원래 제 자리를 갖는 물건이다
     (iOS 49pt · 안드로이드 56dp — 지금 54px 이 그 사이다).
     높이가 안 변하니 아래 #panel 의 여백도 한 값으로 고정된다. */
  #rail.stuck { box-shadow:0 -5px 16px rgba(13,33,55,.42); }
  /* 맨 위로 — 하단 탭바 바로 위, 오른쪽. 반투명이라 본문 글자를 덮어도 읽힌다.
     탭을 누르면 지도가 화면 밖으로 걷히므로(railScrollTop), 지도로 되돌아갈 길이다.
     z13 — 탭바(12)보다 위. 조금이라도 내려간 동안에만 뜬다(syncToTop). */
  #toTop { position:fixed; right:12px; z-index:13;
    bottom:calc(var(--rail-h, 54px) + env(safe-area-inset-bottom) + 12px);
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:20px; font-size:17px; line-height:1;
    border:1px solid rgba(255,255,255,.34); background:rgba(13,33,55,.44); color:#fff;
    box-shadow:0 3px 12px rgba(13,33,55,.32); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  #toTop.on { opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity .2s ease, transform .2s ease; }
  /* overflow:visible 필수 — 세로 배치에선 패널이 스크롤러가 아니라 페이지(body)가 스크롤한다.
     그런데 패널에 overflow-y:auto 가 남아 있으면 그 안의 sticky(#vbar)가 '패널 기준'으로
     묶여 화면에 붙지 못하고 같이 흘러가 버린다(실측: bar top −412px). */
  /* 아래 여백 = 하단 탭바(54px) + 홈 인디케이터. 없으면 본문 마지막 줄이 바에 가린다.
     ⚠ #rail 이 position:fixed 라 흐름에서 자리를 차지하지 않는다 — 이 여백이 그 대역이다. */
  #panel { width:100%; overflow:visible;
    padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  /* 좁은 화면에선 예시 지역 묶음을 접는다 — 검색창이 밀려 좁아지는 것보다 낫다 */
  #exwrap { display:none; }
}

/* ── 한전 계통 상세 표(입지분석 탭 ② 항목) ──
   패널 470px 안에 5열이 들어가야 해서 숫자 폰트를 줄이고 '연계' 누적치는 소자(小字)로 눕힌다.
   병목(g-min) 셀만 배경까지 칠한다 — 전부 빨강이면 아무것도 안 보인다. */
.gtbl-wrap { margin-top:8px; }
.gtbl-wrap .g-cap { font-size:var(--fs-label); font-weight:700; color:var(--muted); margin-bottom:4px; }
.gtbl-wrap .g-lv { font-weight:600; color:var(--hint); }
.gtbl { width:100%; border-collapse:collapse; font-size:var(--fs-label); }
.gtbl th { background:#F0F4F1; border:1px solid #E0E5E1; padding:3px 4px; font-size:var(--fs-mini);
  font-weight:700; color:var(--muted); text-align:center; line-height:1.25; }
.gtbl td { border:1px solid #E0E5E1; padding:3px 5px; text-align:right; vertical-align:top;
  font-variant-numeric:tabular-nums; }
.gtbl td.g-name { text-align:left; font-weight:700; white-space:nowrap; }
.gtbl .g-sub { font-size:var(--fs-mini); font-weight:400; color:var(--hint); }
.gtbl td.g-bad { color:var(--red); font-weight:700; }
.gtbl td.g-min { background:var(--red-light); }
.gtbl td.g-min.g-ok { background:#FDF6EC; color:var(--amber); }  /* 여유는 있으나 병목인 단계 */
.gtbl tr.g-rep td { background-color:rgba(45,106,79,.045); }
.gtbl .g-star { color:var(--amber); font-size:var(--fs-mini); }
.gtbl-wrap .g-note { font-size:var(--fs-label); color:var(--muted); margin-top:5px; line-height:1.5; }
.gtbl-wrap .g-bad-i { color:var(--red); font-weight:700; }
.gtbl-wrap .g-substline { font-size:var(--fs-body); margin-top:7px; padding:7px 9px;
  background:#F9F5FB; border:1px solid #E8DFF0; border-radius:6px; line-height:1.55; }
.gtbl-wrap .g-mapbtn { border:1px solid #C9A9DC; background:#fff; color:#7D3C98;
  font-size:var(--fs-mini); font-weight:700; border-radius:11px; padding:2px 9px; cursor:pointer;
  margin-left:4px; vertical-align:1px; }
.gtbl-wrap .g-mapbtn:hover { background:#F4EAF9; }
.gtbl-wrap .g-src { font-size:var(--fs-mini); color:var(--hint); margin-top:4px; line-height:1.5; }

/* ── 3D 모드 화면 — 별도 창이 아니라 지도의 다른 표현이다.
   z-index 4: 지도(#olmap) 위, 모든 컨트롤(#maptools 6 · #shbar 7 · #rail 8) 아래 —
   기존 UI(월 버튼·해 끌기·슬라이더·재생)가 3D 위에서 그대로 동작한다.
   ⚠️ 배경은 반드시 불투명. 투명으로 두면 타일이 아직 안 온 영역(로딩 중·과확대·과축소)이
   뚫려서 뒤에 깔린 2D 지도가 비쳐 두 지도가 겹쳐 보인다(제보). 색은 style 의 fog-color 와
   같은 계열로 맞춰 빈 곳이 '아직 안 그려진 하늘'로 읽히게 한다. ── */
#sh3d { position:absolute; inset:0; z-index:4; background:#DDE7EE; }
#sh3dMap { position:absolute; inset:0; }
/* MapLibre 기본 컨트롤은 쓰지 않는다 — #sh3d 가 z4 라 레일(z8)·도구바(z7) 밑에 깔려
   보이지도 눌리지도 않았다(제보). 나침반 기능만 #mapmode 의 '북쪽 정렬'로 옮겼다. */
#sh3dMap .maplibregl-control-container { display:none; }

/* 지도 출처 표기 — 상시 노출(클릭 없이). 2D·3D 공용이라 지도 라이브러리 컨트롤 대신 이걸 쓴다.
   자리: 오른쪽 아래(레일 왼쪽). 왼쪽 아래는 #maptools 컬럼이 화면 높이를 다 쓰고(height:100%-20px)
   그 바닥에 'ⓘ 데이터 출처' 버튼이 붙어 있어 겹쳤다(제보). right:68px 는 레일 영역(62px) 바로 왼쪽.
   z9: 하단 바(#shbar·#insobar z7)보다 위. 두 바의 bottom 을 10px → 32px 로 올려 자리를 비웠다. */
#mapCredit { position:absolute; right:10px; bottom:8px; z-index:9;
  background:rgba(255,255,255,.82); color:var(--muted); font-size:10px; line-height:1.4;
  padding:2px 8px; border-radius:10px; pointer-events:auto; white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.12); }
#mapCredit a { color:var(--muted); text-decoration:none; }
#mapCredit a:hover { color:var(--text); text-decoration:underline; }

/* ── 레이어 범례 (도로·건물) ─────────────────────────────────────────────────
   원래 도구 컬럼의 '레이어' 카드 안에 있었는데, 도로를 켜면 169px·건물을 켜면 63px 이
   카드에 얹혀 컬럼이 지도 높이를 넘겼다(실측 410px → 654px). 범례는 켤지 말지를 정하는
   버튼과 달리 '지금 그려진 것'을 설명하므로 지도 옆이 제자리이기도 하다.

   자리: 오른쪽 아래, #mapCredit(bottom:8px, 높이 18px) 바로 위.
   z8 — #shbar·#insobar(z7)보다 위다. 그림자 바는 left:10px~right:62px 를 쓰지만
   max-width:760px 로 가운데 정렬이라 넓은 화면에서는 오른쪽 끝이 비어 있고, 겹치더라도
   범례가 위로 올라와 읽힌다(가려지면 켜 놓은 레이어를 설명할 수 없어 존재 의미가 없다).
   max-height 로 아주 낮은 창에서도 지도를 넘지 않게 묶고, 넘치면 이 박스만 스크롤한다. */
/* 폭 152px — 도로 범례 2열(최장 항목 58px ×2 + 간격)이 하한이고, 도로 기준 버튼
   ('국가기본도_차도링크' 102px + padding)도 이 안에 들어간다. 건물 라벨에서 괄호 설명을
   걷어내며 210px → 152px 로 줄었다(가장 긴 '주택 밀집(조례 기준 호수↑)' 123px 이 50px 로). */
/* 범례 여닫이 버튼 — 데스크톱·폰 공용. 152×236px 이 지도 오른쪽 아래를 상시 먹고 있어
   데스크톱에도 접는 길을 뒀다(기본값은 화면마다 다르다 — workbench.js 의 legendOpen 참고).
   표시 여부는 syncLegendBox 가 인라인 style 로 정한다: 켠 레이어가 없으면 버튼도 없앤다
   (설명할 것이 없으면 여는 의미도 없다).
   right:42px 는 범례·#maptoolsR 과 같은 값 — 세로 탭 띠지(62px) 자리를 비운다.
   #shbar(z7)와 겹칠 수 있지만 z8 로 위에 온다. 범례 상자가 지금까지 써 온 규칙 그대로이고,
   접혀 있을 때의 이 버튼은 상자보다 훨씬 작아 겹치는 면적이 오히려 줄었다. */
#lgToggle { position:absolute; right:42px; bottom:32px; z-index:8;
  border:1px solid var(--border); background:rgba(255,255,255,.96); color:var(--text);
  font-size:11px; font-weight:700; padding:6px 12px; border-radius:15px; white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.18); }
#lgToggle:hover { background:#fff; }
#lgToggle.on { background:var(--green); border-color:var(--green); color:#fff; }
/* 캐럿이 '어느 쪽으로 열리는지'를 말한다 — 접혀 있으면 위로(▴) 펴지고, 펴져 있으면 눌러
   아래로(▾) 접힌다. 색만으로는 켜짐인지 눌러야 켜지는 것인지 헷갈린다(.mm 주석과 같은 이유). */
#lgToggle::after { content:' ▴'; font-size:9px; color:var(--hint); }
#lgToggle.on::after { content:' ▾'; color:rgba(255,255,255,.75); }

/* bottom:66px — 여닫이 버튼(bottom:32px, 높이 28px) 바로 위. 상자는 버튼에서 위로 펼쳐진다.
   max-height 는 바로 위 분석 도구 컬럼(top 10px + 카드 187px)을 피하는 값이다.
   범례는 bottom 고정이라 내용이 늘면 <b>위로</b> 자란다 — 기준 선택이 들어오면서 200px 에서
   277px 이 되자 분석 도구 카드를 33px 덮어 '면적 측정' 버튼이 가려졌다(실측).
   271px = 카드 바닥(197) + 간격(8) + 범례 바닥여백(66). 넘치면 범례 안에서만 스크롤한다 —
   낮은 창에서만 걸리고, 창이 커지면 자동으로 전부 펼쳐진다. */
#mapLegend { position:absolute; right:42px; bottom:66px; z-index:8; width:152px;
  max-height:calc(100% - 271px); overflow-y:auto;
  background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:0 2px 10px rgba(0,0,0,.14); padding:6px 4px; }
/* 여닫이 전환 — display 는 JS(syncLegendBox)가 '내용이 있나'로만 쓰고, 펴짐/접힘은 이
   .open 클래스가 맡는다(그래야 opacity·transform 전환이 붙는다). visibility 를 닫힘에만
   지연(0s linear .22s)시키는 이유: 사라지는 동안은 보이되, 다 사라진 뒤에는 눌리지도
   스크린리더에 읽히지도 않아야 한다. 버튼 위로 펼쳐지는 상자라 아래(+8px)에서 올라온다. */
#mapLegend { opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
#mapLegend.open { opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .22s ease, transform .22s ease; }
.lg-sec + .lg-sec { margin-top:5px; border-top:1px solid var(--border); padding-top:5px; }
#mapLegend h5 { font-size:10.5px; color:var(--muted); font-weight:700; letter-spacing:.04em;
  padding:0 8px 3px; margin:0; }
/* 지금 적용된 기준의 성격. 제목과 같은 줄이라 세로를 쓰지 않는다 */
#roadBasisSub { font-size:9px; font-weight:600; color:var(--hint); letter-spacing:0; }
#roadBasisSub:not(:empty)::before { content:'· '; }

/* 3D 조작 안내 토스트 — 전환 순간에만 4.5초. #sh3d(z4) 밖에 둬야 레일·도구바에 안 가린다 */
#sh3dToast { display:none; position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  z-index:9; background:rgba(22,50,79,.92); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:18px; white-space:nowrap; pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.28); }
#sh3dToast.show { display:block; animation:toastIn .25s ease, toastOut .5s ease 4s forwards; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(6px); } }
@keyframes toastOut { to { opacity:0; } }

/* 데이터 출처 — 표기 의무(OSM ODbL 등)가 있어 상시 노출. 우측 상단: 아래쪽은 그림자·일사량
   바가, 맨 오른쪽 62px 는 탭 레일이 차지해 그 사이가 유일하게 안 겹치는 자리다. */
/* 지도 왼쪽 아래 고정(#mapCredit 과 같은 줄의 반대편) — 예전에는 도구 컬럼의 바닥이었는데
   컬럼(레이어 카드)이 접히는 물건이 되면서 상시 표기여야 할 출처 진입점까지 오르내렸다.
   출처는 카드 개폐와 무관하게 언제나 같은 자리에 있어야 한다. z9 = #mapCredit 과 같은 층. */
#attribBtn { position:absolute; left:10px; bottom:8px; z-index:9; border:1px solid var(--border);
  background:rgba(255,255,255,.94); color:var(--muted); font-size:10.5px; font-weight:700;
  padding:5px 10px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.14); }
#attribBtn:hover { background:#fff; color:var(--text); }
/* 패널은 버튼 바로 위로 스르륵 열린다(범례와 같은 전환 규칙 — .open 클래스, JS toggleAttrib) */
#attribPanel { position:absolute; left:10px; bottom:38px; z-index:9; width:290px;
  max-height:calc(100% - 120px); overflow:auto; background:rgba(255,255,255,.98);
  border:1px solid var(--border); border-radius:var(--r); padding:10px 12px;
  box-shadow:0 6px 22px rgba(0,0,0,.2); font-size:11px;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
#attribPanel.open { opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .22s ease, transform .22s ease; }
#attribPanel .ab-head { font-size:12px; font-weight:800; margin-bottom:7px;
  display:flex; justify-content:space-between; align-items:center; }
#attribPanel .ab-x { border:none; background:none; font-size:13px; color:var(--hint); padding:0 2px; }
#attribPanel dl { margin:0; }
#attribPanel dt { color:var(--hint); font-size:10px; font-weight:700; margin-top:6px; }
#attribPanel dd { margin:1px 0 0; color:var(--text); line-height:1.5; }
#attribPanel .ab-more { margin-top:9px; padding-top:7px; border-top:1px solid var(--border); }
#attribPanel .ab-more a { color:var(--sky); font-size:10.5px; font-weight:700; text-decoration:none; }
#attribPanel .ab-more a:hover { text-decoration:underline; }
#attribPanel .ab-foot { margin-top:9px; padding-top:7px; border-top:1px solid var(--border);
  color:var(--muted); font-size:10.5px; line-height:1.55; }

/* 3D 클릭 팝업 — 내용물(#mapInfo)이 자체 배경을 가지므로 MapLibre 팝업 껍데기는 투명하게 */
.sh3d-pop .maplibregl-popup-content { padding:0; background:transparent; box-shadow:none; }
.sh3d-pop .maplibregl-popup-tip { display:none; }

/* ════════════════════════════════════════════════════════════════
   모바일(폰, ≤640px) — 위 1000px 쿼리(세로 스택 전환)에 얹는 폰 전용 보정.
   데스크톱·태블릿에는 아무 영향이 없다. 원칙: 지도 위 플로팅 요소들이
   "오른쪽 62px 는 탭 레일, 가운데 위는 넓다"는 데스크톱 가정을 깔고 있어
   그 가정을 폰 기준으로 되돌리는 것이 이 블록의 대부분이다.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  /* 폰은 같은 글자를 355px 폭에서 팔 뻗은 거리로 읽는다 — 읽는 글만 한 눈금 올린다.
     예전에는 선언마다 크기를 다시 적었는데(약 40줄), 척도를 토큰으로 묶은 뒤로는 값만 바꾸면
     된다. 장 제목은 반대로 내린다(19px 는 폰 폭에서 두 줄로 꺾인다). */
  :root { --fs-chap:17px; --fs-lead:18px; --fs-head:15.5px;
          --fs-body:14px; --fs-label:12.5px; --fs-mini:11px; }
  /* ── 상단바: 한 줄 → 두 줄. 375px 한 줄에 로고+검색+버튼 2개를 두면 검색창이
     53px 로 뭉개진다(실측) — 서비스의 유일한 진입점이라 검색을 전폭 한 줄로 편다. */
  #topbar { flex-wrap:wrap; height:auto; padding:7px 10px 9px; row-gap:7px; }
  #topbar .logo { font-size:14px; }
  #topact { flex:0 0 auto; }
  #searchgrp { order:3; flex-basis:100%; gap:7px; }
  /* 검색창은 전폭이 아니라 60% — 남는 오른쪽에 예시 칩을 세운다.
     전폭 한 줄이던 시절에는 예시가 아예 안 보였고(아래 #exwrap 주석), 검색만 놓인 줄에
     100px 넘게 여백이 남았다. 최소 폭은 지켜야 한다(주소 입력 중 글자가 안 보이면 안 된다). */
  #searchwrap { flex:0 0 56%; width:auto; min-width:150px; }
  /* 글자 12.5px(14px 에서 -11%) — 단, <b>iOS 사파리만 16px 를 지킨다</b>(아래 @supports).
     iOS 는 16px 미만 입력창에 포커스하면 화면을 강제 확대하고 해제해 주지 않는다.
     ⚠ 그래서 <b>아이폰에서는 이 값이 안 먹는다</b> — 줄이고 싶어도 16px 가 바닥이다.
     안드로이드·데스크톱은 그런 동작이 없어 12.5px 로 내려도 안전하다.
     placeholder 의 긴 예시 주소는 placeMapMode 가 폰에서 떼어 낸다 — 어차피 잘려서
     안 읽히고, 예시는 바로 오른쪽 칩이 대신 보여 준다. */
  #addr { padding:6px 38px 6px 12px; }
  #goBtn { width:30px; }
  /* 상단바 자체도 한 눈금 낮춘다 — 지도가 그만큼 커진다 */
  #topbar { padding:6px 10px 7px; row-gap:6px; }
  /* 상단 버튼 두 개는 더 얇게 — 로고와 같은 줄이라 높이가 그 줄 전체를 정한다 */
  /* 아이콘만 남긴다(사용자 요청) — 로고까지 합쳐 첫 줄이 365/375px 로 꽉 차 있었다
     (남는 폭 10px). 라벨을 떼면 156.3 → 약 70px 이라 로고가 숨을 쉰다.
     높이는 그대로다: 줄 높이를 정하는 것은 글자가 아니라 padding 이다.
     읽어 주는 이름은 aria-label 로 따로 붙였다(index2.html). */
  /* padding 을 4 → 2px 로 함께 내린다 — 글자를 11 → 13px 로 키우면(아이콘은 커야 읽힌다)
     줄 높이가 26 → 29px 이 되어 상단바가 되레 3px 자란다(실측). 높이를 정하는 것은
     글자가 아니라 padding 이다. */
  #rulesBtn, #glossBtn, #reportBtn { padding:2px 10px; font-size:13px; font-weight:700; line-height:1.45; }
  #rulesBtn .ta-t, #glossBtn .ta-t, #reportBtn .ta-t { display:none; }

  /* ── 예시 칩: 폰에서는 되살린다.
     위 1000px 쿼리가 이걸 숨기는 것은 '한 줄 상단바'(로고+검색+버튼)에서 칩이 검색창을
     밀어내기 때문인데, 640px 아래에서는 상단바가 두 줄로 접혀 검색 묶음이 제 줄을
     통째로 갖는다 — 그 줄의 오른쪽 40% 는 원래 빈 자리였다.
     6개가 한 줄에 다 안 들어가므로 가로 스크롤로 흘리고, 오른쪽 끝을 페이드시켜
     '더 있다'를 보여 준다(스크롤바는 폰에서 자리만 먹어 숨긴다). */
  /* flex-basis 0 필수 — auto 로 두면 칩 6개의 내용 폭(294px)이 기준이 되어 줄이 넘치고,
     그 부족분을 <b>검색창이</b> 대신 토해 낸다(실측: 213px → min-width 150px 까지 쪼그라듦).
     0 이면 검색창이 제 몫(56%)을 먼저 갖고 남는 폭만 칩 줄이 쓴다(넘치면 가로 스크롤). */
  #exwrap { display:flex; flex:1 1 0; min-width:0; gap:4px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent); }
  #exwrap::-webkit-scrollbar { display:none; }
  .ex-lab { font-size:10.5px; }
  .ex-chip { font-size:11px; padding:4px 10px; }

  /* ── 지도 도구: 기본 접힘. 도구 컬럼이 폰 지도의 절반을 상시 덮기 때문이다.
     왼쪽 위 토글 바의 두 버튼('레이어' / '분석도구')이 각자의 팝오버를 그 아래로 연다.
     아이콘 하나(🛠️)가 둘을 한 팝오버에 몰아 열던 시절에는 세로 12항목이 지도 높이를
     다 먹었고, 무엇이 열리는지도 눌러 봐야 알았다. 데스크톱이 이미 갈라 놓은 구분
     (레이어 컬럼 / 분석 도구 컬럼)을 폰에서도 그대로 쓴다.
     왼쪽 위인 이유: 오른쪽 위는 배경·시점 패널(#mapmode)이 상시 차지하고,
     아래쪽은 그림자·일사량 바와 범례 자리다. */
  /* 버튼 <b>모양</b>은 위 공용 규칙(#mtLayers,#mtTools)이 맡는다 — 여기서는 자리와
     폰용 여백만 손본다. 데스크톱은 컬럼 폭에 맞춰 늘어나는 전폭 버튼이고, 폰은 둘이
     나란히 서는 알약이라 좌우 여백이 조금 더 필요하다. */
  #mtBar { display:flex; gap:5px; position:absolute; top:8px; left:8px; z-index:7; }
  #mtBar button { height:30px; padding:0 11px; font-size:11px;
    box-shadow:0 2px 10px rgba(0,0,0,.18); }
  /* top:44px — 토글 바(top:8px, 높이 30px) 바로 아래. 열린 팝오버는 사용자가 부른 일시
     상태라 지도를 덮어도 된다(같은 버튼으로 닫힌다). 둘은 서로 배타적으로 열린다.
     display 스위치 대신 visibility+transform — 버튼 밑에서 스르륵 내려오고(translateY -8→0),
     닫힘이 끝난 뒤에만 visibility:hidden 이 걸려(0s linear .22s) 사라지는 동안은 보인다. */
  #maptools, #maptoolsR { display:flex; top:44px; left:8px; right:auto; height:auto;
    max-height:calc(100% - 56px);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
  #maptools { width:140px; }
  #maptoolsR { width:auto; max-width:calc(100% - 16px); }
  #maptools.mt-open, #maptoolsR.mt-open { opacity:1; visibility:visible; transform:none;
    transition:opacity .22s ease, transform .22s ease; }
  /* 카드는 폰에서 항상 편 채로 둔다 — 여닫이는 팝오버 자체가 맡으므로, 데스크톱의 카드
     접힘 규칙이 여기까지 살아 있으면 팝오버가 내려오는 동안 카드가 또 한 번 자라는
     이중 전환이 된다. */
  /* 버튼 사이 3px 은 이제 공용 규칙이다(데스크톱·폰 공통) — 여기서는 여백만 죈다.
     ⚠ padding 은 .mt-open 을 붙여야 먹는다. 데스크톱 여닫이 규칙
     `#maptools.mt-open > .mapcard{padding:7px}` 이 특정도 (1,1,1)로 더 세서,
     폰에서도 카드가 열려 있는 동안은 그쪽이 이긴다(6px 로 적어도 7px 이 나왔다·실측). */
  #maptools > .mapcard, #maptoolsR > .mapcard { max-height:none; opacity:1; margin-top:0;
    border-width:1px; box-shadow:0 2px 10px rgba(0,0,0,.14); transition:none; }
  #maptools.mt-open > .mapcard, #maptoolsR.mt-open > .mapcard { padding:6px; }
  /* 팝오버 안 버튼은 손가락으로 누른다 — 세로 여백을 데스크톱(6px)보다 준다(≈31px 높이).
     글자는 한 눈금 내린다(12→11px): 이 버튼들은 '읽는 글'이 아니라 라벨이고, 모바일
     표준(라벨 11~13px·캡션 10~11px)에서 라벨 하한이면 충분하다 — 터치 면적은 글자가
     아니라 padding 이 만들므로 누르기는 그대로다. 카드 머리(h4)도 캡션 눈금으로. */
  #maptools .mt, #maptoolsR .mt { padding:7px 8px; font-size:11px; }
  .mapcard h4 { padding:2px 6px 3px; }
  .mapcard h4 { font-size:10px; }
  .mt-hint { font-size:9.5px; }

  /* ── 배경·시점 패널: 지도 오른쪽 위에 상시(placeMapMode 가 #mapcol 직속으로 꺼내 온다).
     '보면서 바로 바꾸는' 조작이라 팝오버 뒤에 숨기지 않는다. 대신 폰 폭에 맞춰 죈다 —
     데스크톱 눈금 그대로면 3버튼 한 줄(위성·일반·다크)이 132px 로 지도 폭의 3분의 1이다. */
  #mapmode { position:absolute; top:8px; right:8px; z-index:6;
    padding:3px; gap:2px; border-radius:14px; }
  .mm-row { gap:2px; }
  .mm { padding:5px 5px; font-size:10px; border-radius:11px; }
  /* ── 머리(항상) + 설정 카드(펼쳤을 때만) ────────────────────────────────────
     예전 95.3×60px 패널이 지도에서 가장 붐비는 자리였다(사용자 지적).
     규칙은 레이어/분석도구와 <b>같다</b>: 손잡이 버튼은 제자리에 그대로 있고, 카드만 그
     아래로 떨어진다. 그래서 📍 는 설정을 펼쳐도 카드 <b>안으로 들어가지 않는다</b> —
     '되돌아가기'와 '설정'은 성격이 다른 동작이라 한 상자에 담기면 어색하다(사용자 지적).
     #mapmode 자체는 껍데기를 벗는다(배경·테두리·그림자 없음) — 떠 있는 것은 그 안의
     아이콘 둘과 카드 하나지, 이 상자가 아니다. */
  #mapmode { background:none; border:none; box-shadow:none; padding:0; gap:6px;
    align-items:flex-end; }
  #mmHead { display:flex; flex-direction:row; align-items:center; gap:4px; }
  #mmBody { display:flex; flex-direction:column; gap:2px; padding:3px;
    background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.14); }
  #mapmode:not(.mm-open) #mmBody { display:none; }
  /* ⚙️ — 🗺 는 '지도'로만 읽혀 무엇을 여는 버튼인지 안 보였다(사용자 지적) */
  #mmToggle { display:flex; align-items:center; justify-content:center; flex:none;
    width:30px; height:26px; padding:0; font-size:13px; line-height:1;
    border:1px solid var(--border); background:rgba(255,255,255,.96); color:var(--text);
    border-radius:13px; box-shadow:0 2px 10px rgba(0,0,0,.14); }
  #mmToggle.on { background:var(--green); border-color:var(--green); }
  /* 분석 필지로 — 데스크톱과 같은 아이콘 알약이되 손가락 크기(30×26)로 키우고 그림자를
     준다. 여기서는 카드 밖에 홀로 떠 있기 때문이다.
     펼침·접힘 어느 쪽에서도 같은 모양이다: 머리에 붙박이라 상태에 따라 변할 이유가 없다. */
  #homeBtn { width:30px; height:26px; border-radius:13px;
    box-shadow:0 2px 10px rgba(0,0,0,.14); }
  /* ── 범례: 폰에서는 <b>기본이 접힘</b>이다(데스크톱은 펴짐 — workbench.js legendOpen).
     도로를 켜면 상자가 252px 까지 자라 422px 지도의 60%를 덮기 때문이다.
     자리는 오른쪽 끝으로 붙인다 — 데스크톱의 42px 은 세로 탭 띠지를 피하는 값인데,
     폰에서는 그 띠지가 지도 아래 가로 탭바로 내려가 비켜 줄 것이 없다.
     폭은 폰에서도 152px 로 충분하다. */
  /* 32px = 아래 줄(출처 표기 13px · ⓘ 버튼 21px, 둘 다 bottom:8px)의 위 끝 29px +
     여유 3px. 이 값은 <b>ⓘ 버튼 높이가 정한다</b> — 표기 줄은 21px 까지밖에 안 온다.
     30px 이었을 때는 ⓘ 버튼 머리가 바 아래로 파고들었다(실측). */
  #lgToggle { right:8px; bottom:32px; }
  #mapLegend { right:8px; bottom:66px; max-height:calc(100% - 212px); }


  /* ── 지도 위 상시 표기·범례 — 좁은 폭 기준으로 재배치 */
  /* 출처 표기는 줄바꿈 허용 — nowrap 한 줄(≈360px)이 지도 폭을 다 먹었다.
     ODbL 표기 의무 때문에 숨기는 선택지는 없다. */
  /* 왼쪽 아래 ⓘ 버튼(30.5px) 자리만 비켜 준다 — 예전 118px 는 버튼에 '데이터 출처' 글자가
     붙어 있을 때의 값이다. 60px 로 풀면 표기가 <b>한 줄</b>에 선다(실측 313.8px, 16.1px).
     ⚠ 줄바꿈 자체는 계속 허용한다(nowrap 아님) — 375px 보다 좁은 폰에서는 다시 두 줄이
     되어야지, 잘리면 ODbL 표기 의무를 못 지킨다. */
  #mapCredit { white-space:normal; max-width:calc(100% - 56px); right:8px;
    font-size:8.5px; line-height:1.3; padding:1px 7px; text-align:right; }
  /* 폰에서는 <b>ⓘ 만 남긴다</b> — 글자 '데이터 출처'를 떼면 86.7 → 약 30px.
     이 60px 이 곧 아래 #mapCredit 의 폭이다: 출처 표기가 두 줄에서 <b>한 줄</b>로 서면서
     28.3 → 16.1px 이 되고, 두 줄일 때 범례 버튼 아래를 6.3px 파고들던 것도 없어진다.
     표기 의무는 이 버튼이 아니라 #mapCredit 한 줄이 지고 있으므로(항상 보인다) ⓘ 로
     줄여도 무방하다 — 이 버튼은 '더 자세한 목록'으로 가는 문일 뿐이다.
     읽어 주는 이름은 aria-label 로 따로 붙여 뒀다(index2.html). */
  /* ⓘ 도 표기 줄과 같은 무게로 — 27px 짜리 알약이 8.5px 글자 옆에서 혼자 컸다.
     ⚠ 이보다 더 줄이지 말 것. 손가락 기준으로 이미 작은 편이고(권장 44px), 여기서 더
     깎아도 바가 내려갈 수 있는 폭은 몇 px 뿐이다 — 남는 건 못 누르는 버튼이다. */
  #attribBtn { left:8px; bottom:8px; padding:3px 8px; font-size:10px; line-height:1.3;
    border-radius:11px; }
  .ab-t { display:none; }
  /* ── 지도 위 오버레이(경사 범례·그림자 바·일사량 바)의 폰 규칙 ─────────────
     폰 지도는 487px(60svh, 812px 폰 기준)뿐이라 데스크톱 크기 그대로 띄우면 지도를 덮는다
     (실측: 그림자 바 245px = 지도의 58%, 경사 범례 185px, 일사량 바 177px).
     세 가지를 같은 규칙으로 맞춘다 —
     ⑴ 셋 다 <b>범례 버튼과 같은 줄</b>에 선다(bottom:32px = #lgToggle, left:8px~right:90px).
        예전에는 bottom:64px 전폭이라 버튼 한 줄(34px)이 통째로 비어 있었다.
     ⑵ 높이는 <b>180px 이내</b>: 지도 한가운데(=분석 필지 마커, 바닥에서 211px)를 덮지 않는
        최대치다. 이 예산 안에 넣으려고 아래에서 줄·여백·글자를 깎는다
        (실측: 그림자 바 153px → 위 끝 183px, 일사량 바 93px, 경사 범례 57px).
     ⑶ 제목줄은 폰에서 없앤다 — 셋 다 무엇인지는 방금 누른 오버레이 버튼이 말해 준다. */
  /* 경사 범례는 폰에서 <b>아래쪽 띠</b>가 된다 — 원래 자리(오른쪽 위, top:52px)는 이제
     배경·시점 패널(#mapmode, top 8~122px)이 상시 차지한다.
     두 묶음을 <b>좌우 2단</b>으로 세운다: 색띠는 폭을 다 쓸 이유가 없고(왼쪽 46%면 충분),
     남는 오른쪽에 기울기 네 등급이 2×2 로 들어간다. 세로로 다 쌓던 185px → 약 55px. */
  /* 자리는 일사량 바(#insobar)와 <b>똑같은 규칙</b>이다 — 왼쪽에 범례, 오른쪽에 범례 버튼
     (bottom:32px = #lgToggle 과 같은 줄, right:90px = 버튼 74px + 양쪽 8px).
     예전 bottom:64px · right:8px 는 전폭이라 버튼 줄 '위'에 얹혔고, 버튼 한 줄(34px)이
     통째로 낭비였다(일사량 바에서 이미 고친 것과 같은 문제 — 사용자 요청). */
  .slope-leg { top:auto; bottom:32px; left:8px; right:90px; font-size:9.5px; line-height:1.4;
    padding:6px 9px; }
  /* 자리를 반칸으로 줄이면(359→277px) 글자도 같이 줄여야 한다 — 예전 치수로는
     세 방위 라벨과 네 등급이 간격 0px 로 맞붙어 서 있었다(실측: 라벨 합계 113px = 칸 폭 113px). */
  .slope-leg .sl-cols { display:flex; gap:10px; align-items:flex-start; }
  .slope-leg .sl-col:first-child { flex:0 0 46%; min-width:0; }
  .slope-leg .sl-col:last-child { flex:1; min-width:0; }
  .slope-leg .sl-h { margin-bottom:2px; font-weight:700; }
  .slope-leg .sl-bar { height:7px; }
  .slope-leg .sl-ends { margin-bottom:0; font-size:8px; }
  .slope-leg i { width:8px; height:8px; margin-right:3px; }
  /* 네 등급을 2×2 로 — 한 줄에 넷을 넣으면(실측 182px) 오른쪽 칸을 넘는다 */
  .slope-leg .sl-steps { display:grid; grid-template-columns:1fr 1fr; gap:1px 5px; }
  .slope-leg .sl-steps > span { display:flex; align-items:center; white-space:nowrap; }
  /* 괄호 풀이('표시 안 함'·'급경사')는 폰에서 뺀다 — 줄을 더 쓰는 대신 지도를 보여준다.
     ('클릭하면 숫자로' 안내와 '지도를 움직이면 다시 계산합니다' 한 줄은 아예 없앴다 —
      두 화면 모두에서. 사용자 요청) */
  .slope-leg .sl-x { display:none; }
  /* 햇빛마을 범례도 경사 범례와 같은 줄·같은 폭 규칙(왼쪽 8px ~ 범례 버튼 앞 90px). 폰에서는 완화 조건
     두 줄이 지도를 너무 가려 견본 한 줄과 상태 줄만 남긴다 — 조건은 폴리곤을 눌러 팝업으로 읽는다. */
  #sunbar { left:8px; right:90px; width:auto; bottom:32px; padding:6px 9px; }
  #sunbar .sb-h { font-size:11px; margin-bottom:4px; }
  #sunbar .sb-h small { display:none; }
  #sunbar .sb-sw { gap:10px; font-size:10.5px; margin-bottom:0; }
  #sunbar .lg-note { display:none; }
  #attribPanel { left:8px; right:8px; width:auto; bottom:32px; }
  #mapInfo { max-width:min(340px, calc(100vw - 30px)); }
  /* 지도가 60svh 뿐이라 46vh 팝업 본문이 지도를 통째로 덮었다 */
  #mapInfo .mi-body { max-height:32vh; }

  /* ── 하단 컨트롤 바(그림자·일사량): right:62px 는 데스크톱 레일 자리 — 폰에선 전폭. */
  /* 두 바의 <b>제목줄을 통째로 없앤다</b>(사용자 요청). 폰에서 가장 비싼 한 조각이었다 —
     일사량은 부제가 두 줄로 꺾여 39px, 그림자는 22px 로, 게이지(36px)보다 제목이 컸다.
     실측: 일사량 바 93 → 50px, 그림자 바 153 → 127px.
     ⚠ 함께 사라지는 것 둘 —
     ⑴ 접기(⌄) 버튼: 제목줄 안에 있던 버튼이라 같이 없앴다(마크업·foldMapBar 도 삭제).
        이제 바를 치우려면 오버레이 버튼으로 끈다 — 대신 지도 위 색까지 사라진다.
     ⑵ 일사량 단서('천리안2A 5개년 연평균 · 원본 2km 격자'): 이 숫자의 정밀도를 말하는
        문구라 없애기 아까웠지만, 같은 내용이 'ⓘ 데이터 출처' 패널에 그대로 있다.
     데스크톱은 지도가 넓어 그대로 둔다 — 제목이 없으면 떠 있는 카드가 무엇인지 모른다. */
  #insoTitle { display:none; }   /* (그림자 컨트롤의 제목 줄은 아예 없앴다 — 데스크톱도 같다) */

  /* 그림자 바도 일사량 바와 같은 줄에 선다 — 왼쪽에 바, 오른쪽에 범례 버튼
     (bottom:32px = #lgToggle 과 동일, right:90px = 버튼 74px + 양쪽 8px).
     월 버튼은 걸림돌이 아니다: 이미 한 줄 가로 스크롤(.ter-months nowrap)이라 폭이
     줄면 스크롤 길이만 늘어난다. 대신 <b>해 끌기 하늘과 슬라이더가 좁아진다</b> —
     하늘 359 → 255px, 슬라이더는 아래 min-width 로 바닥을 잡아 준다. */
  /* width:auto 를 반드시 되돌린다 — 데스크톱이 폭을 min(520px, 100%-212px) 로 못 박아 두는데,
     그 값이 남으면 left·right 를 무시하고 폰 지도(375px)에서 163px 짜리 바가 된다.
     일사량 바가 같은 이유로 이미 width:auto 를 달고 있다(아래). */
  #shbar { left:8px; right:90px; width:auto; bottom:32px; padding:6px 10px 8px;
    max-height:calc(100% - 72px); }
  /* 해 그림·오른쪽 칸의 데스크톱 하한(min-width 200 / flex 0 0 200)도 폰에서는 푼다 —
     그대로 두면 두 칸이 접혀 세로로 쌓인다(폰 지도 높이에서 그만큼이 아깝다). */
  #shRow { flex-wrap:nowrap; }
  /* 12개가 두 줄로 접히며 52px 를 먹었다 → 한 줄 가로 스크롤(칩도 한 눈금 줄인다) */
  .ter-months { flex-wrap:nowrap; overflow-x:auto; gap:3px; margin-bottom:5px;
    scrollbar-width:none; }
  .ter-months::-webkit-scrollbar { display:none; }
  .ter-mon { flex:0 0 auto; font-size:10px; padding:2px 7px; }
  /* 하늘·시계·재생을 <b>한 줄</b>로 세운다(사용자 요청). 예전에는 세로로 쌓아
     하늘 40px + 컨트롤 23px = 68px 였다. 데스크톱은 그대로 세로 2단이다. */
  #shRow { flex-direction:row; align-items:center; gap:8px; }
  /* flex-basis 0 + min-width 0 — auto 로 두면 하늘이 내용 폭(=0)으로 쪼그라든다.
     높이는 가로 배치라 flex 와 무관하게 40px 이 그대로 선다.
     해(.shorb) 위치는 % 라 폭·높이가 줄어도 그대로 맞는다. */
  .shsky { flex:1 1 0; min-width:0; height:40px; }
  .shorb { width:22px; height:22px; }
  .shhills { height:18px; }
  .shhint { font-size:9.5px; left:8px; top:4px; }
  /* 시계·재생을 하늘 오른쪽에 <b>위아래 2단</b>으로 쌓는다 — 가로로 나란히 두면 둘이
     122.5px 를 먹어 하늘이 124.5px 밖에 안 남았다. 쌓으면 폭이 둘 중 넓은 쪽(시계
     63.7px)만 필요해 하늘이 183.3px 로 넓어진다. 값은 바 높이 5px(82→87px).
     하늘 폭은 곧 <b>시각을 고르는 해상도</b>다 — 슬라이더를 뺀 뒤로는 해를 끄는 것이
     시각을 바꾸는 유일한 수단이라, 이 5px 는 살 만한 값이다(사용자 요청). */
  /* ⚠ 폭을 <b>내용에 맡기면 안 된다</b>(auto 로 뒀다가 잡았다). 시계 글자는 '오전 9:00'
     54.3px ↔ '오후 12:30' 63.7px 로 폭이 변하는데, 그러면 해를 끄는 동안 시각이 바뀔
     때마다 하늘 폭이 9.4px 씩 출렁이고, bindSkyDrag 가 그 바뀐 rect 로 비율을 다시
     재면서 <b>해가 손가락 밑에서 튄다</b>. 66px = 가장 넓은 시계(63.7px) + 2px. */
  #shSide { flex:0 0 66px; display:flex; flex-direction:column;
    align-items:stretch; gap:4px; }
  .shclock { flex:0 0 auto; text-align:center; white-space:nowrap; }
  .shclock .sc-ampm { font-size:11px; margin-right:3px; vertical-align:2px; }
  /* 태양 고도 문구는 폰에서 뺀다 — 시계·슬라이더·재생이 한 줄에 겨우 서는 폭이다.
     고도 자체는 해 끌기 하늘의 해 높이와 하늘색이 이미 그림으로 말하고 있다. */
  .shclock .sc-alt { display:none; }
  /* 슬라이더는 폰에서 없앤다(사용자 요청) — 시각은 <b>해를 끌어</b> 바꾼다.
     기능이 사라지는 것이 아니다: bindSkyDrag 가 끌린 x 를 #shHour 의 value 로 그대로
     써넣으므로(같은 값·같은 updateShadow), 재생 버튼도 예전과 똑같이 동작한다.
     ⚠ display:none 이지 제거가 아니다 — shSelectedTime()·setShMonth() 가 이 input 의
     value/max 를 계속 읽고 쓴다. DOM 에서 빼면 그림자 시각 자체가 깨진다. */
  #shHour { display:none; }
  .ter-ctrl { flex:0 0 auto; min-width:0; margin-top:0; }
  .ter-play { padding:3px 8px; font-size:10.5px; }
  /* 설명줄도 폰에서는 없앤다(사용자 요청) — 17.3px. 그림자 바 127.3 → 110.0px.
     지운 문구는 셋 다 화면이 이미 답하고 있다: '○월 기준'은 눌린 월 버튼이,
     '어두운 곳이 그늘'은 지도 그 자체가, '움직이면 다시 계산'은 실제로 다시 그려지는 것이.
     ⚠ 딱 하나, <b>오류 문구는 남긴다</b> — 그림자 데이터가 없을 때(shInfo.available=false)
     이 줄이 유일한 안내다. 이걸 같이 감추면 🌑 를 눌렀는데 빈 바만 뜬다.
     JS 가 그때만 .sh-err 를 붙인다(setOverlay·updateShadow). */
  #shCap { font-size:9.5px; margin-top:4px; line-height:1.4; }

  /* 일사량 바는 <b>범례 버튼과 같은 줄</b>에 선다(bottom:32px = #lgToggle 과 동일) —
     왼쪽에 바, 오른쪽에 범례 버튼(right:90px = 버튼 74px + 양쪽 8px). 예전 bottom:64px 는
     범례 버튼 '위'에 얹히는 자리라 버튼 한 줄이 통째로 낭비였다(제보 스크린샷).
     좁아진 만큼(359→277px) 지도 오른쪽 아래가 드러난다. */
  #insobar { left:8px; right:90px; width:auto; bottom:32px; padding:6px 10px;
    max-height:calc(100% - 106px); }
  /* 게이지도 경사 범례와 같은 수법 — 세로로 쌓인 것을 좌우로 세운다.
     왼쪽 칸에 '이 땅 연평균 4.24', 오른쪽 칸에 막대와 눈금.
     DOM 은 손대지 않았다 — JS 가 만드는 마크업이라 grid-area 로 자리만 바꿔 끼운다. */
  /* 왼쪽 칸 84px = '4.24 kwh/㎡·일'(14px 값 + 10px 단위) 한 줄의 최소폭.
     76px 로 줄였더니 '일' 한 글자만 셋째 줄로 꺾였다(실측). 값(b)은 14px 를 지킨다:
     이 바에서 유일하게 '읽는 숫자'다. */
  .inso-col.gauge { display:grid; grid-template-columns:84px 1fr; column-gap:9px;
    grid-template-areas:"head bar" "head scale"; align-items:center; }
  .gauge-head { grid-area:head; text-align:left; margin:0; font-size:10px; line-height:1.5; }
  .gauge-head b { font-size:14px; }
  /* 위 여백 6px = 삼각형 표식 높이(7px)가 서는 자리다 — 표식 <b>끝을 막대에 1px 걸치게</b>
     내려 붙여(top:-6px) 여백을 표식 높이보다 작게 쓴다. 예전에는 표식 9px 이 막대에서
     2px 떠 있어 12px 를 먹었다(실측). 바 전체 98.7px → 92.7px.
     아래는 '전국평균' 라벨(.gauge-avg::after)이 매달리는 자리라 0 으로는 못 줄인다 —
     대신 그 라벨을 눈금 줄과 <b>같은 높이</b>로 끌어올려(bottom:-16px) 셋이 한 줄로
     읽히게 했다. 막대~눈금 간격 13px → 6px. */
  .gauge-bar { grid-area:bar; height:12px; margin:6px 4px 2px; }
  .gauge-scale { grid-area:scale; margin:4px 4px 0; font-size:9px; line-height:1.3; }
  .gauge-avg::after { bottom:-15px; font-size:8.5px; }
  /* '내 땅' 글자는 뺀다 — 막대 <b>위로 30px 넘게</b> 비워야 서는 라벨인데(46px→36px 까지가
     한계였다), 바로 왼쪽 칸이 이미 '이 땅 연평균 4.24' 라고 적고 있어 검은 삼각형이
     무엇을 가리키는지 헷갈릴 여지가 없다. 점선('전국평균')은 라벨을 그대로 둔다. */
  .gauge-mk::after { display:none; }
  .gauge-mk { top:-6px; border-top-width:7px; border-left-width:5px; border-right-width:5px; }
  .gauge-note { font-size:11px; margin-top:6px; }

  /* ── 패널: KPI 4장은 한 줄이면 장당 ~80px 라 숫자가 접힌다 — 2×2 격자로.
     수익 칸은 전폭으로 늘리지 않는다: 4장 중 하나만 두 칸을 먹으면 격자가 3줄이 되면서
     <b>끝에 빈 반칸</b>이 남고 요약이 56px 높아진다(실측). 대신 반 칸 안에서 연·월을
     세로로 쌓는다 — 높이는 21px 만 늘고 빈칸도 없다. */
  #kpis { display:grid; grid-template-columns:1fr 1fr; }
  #kpis .kpi.kpi-rev { grid-column:auto; }
  #vhead { padding:12px 12px; }
  .pane { padding:14px 12px 40px; }
  /* 한전 계통 표(5열)는 본문보다 넓어질 수 있다 — 페이지가 아니라 표만 가로로 민다
     (수익분석 3시나리오 표 .sc-wrap 과 같은 처리) */
  .gtbl-wrap { overflow-x:auto; }

  /* ── 패널 본문 글자 크기 — 폰에서 한 눈금(≈1px) 올린다.
     데스크톱 눈금은 패널 폭 470~860px 을 전제로 잡은 것인데(본문 12~12.5px), 폰에서는
     같은 글자를 355px 폭에서 팔을 뻗은 거리로 읽는다. 항목을 빼지 않고 크기만 올린다.
     대상은 <b>읽는 글</b>(제목·결론·설명·표 본문)뿐이고, 각주·출처·배지 같은 10px 안팎의
     보조 글자는 그대로 둔다 — 그것까지 키우면 본문과 무게가 같아져 위계가 무너진다.
     지도 위 컨트롤도 건드리지 않는다(위 블록에서 오히려 죄었다 — 그쪽은 '읽는 글'이 아니라
     좁은 화면을 나눠 쓰는 도구다). */
  .vd-head { font-size:16.5px; }
  .vd-sub { font-size:13.5px; }
  .fx-b > b { font-size:13.5px; }
  /* 근거 상자 — 정의 목록의 라벨 열도 글자와 함께 넓힌다 */
  /* 카드 좌우 여백은 폰에서 줄인다 — 글자를 키운 만큼 한 줄에 들어가는 글자 수를 지킨다 */
  .card { padding:14px 13px; }

  /* ── 동의 게이트: 데스크톱 여백(30px)·글자(16.5px)를 폰 폭에 맞춰 죄고,
     가로모드 등 낮은 화면에서 버튼이 화면 밖에 잠기지 않게 상자 자체를 스크롤 가능하게 */
  #consent .cs-box { padding:20px 18px; max-height:92vh; overflow:auto; }
  #consent .cs-title { font-size:16px; }
  #consent .cs-body li { font-size:14.5px; line-height:1.7; }
  #consent .cs-btn { font-size:15.5px; }

  /* ── 시작 히어로: 데스크톱 크기 그대로면 30px 제목이 두 줄로 접힌다.
     본문의 <br> 강제 줄바꿈도 푼다(375px 에선 어차피 자연 줄바꿈이 먼저 온다). */
  #empty h1 { font-size:24px; }
  #empty p { font-size:12.5px; }
  #empty p br { display:none; }

  /* 계통 3계층 카드 — 폰에서 가로 3장은 장당 ~100px 라 숫자가 접힌다 → 세로 스택 */
  .g3-wrap { flex-direction:column; }
  .g3-ar { transform:rotate(90deg); }
}

/* 검색창 글자 — iOS 사파리만 16px 로 되돌린다(-webkit-touch-callout 은 iOS 에만 있다).
   16px 미만 입력창에 포커스하면 iOS 가 화면을 강제 확대하고 해제해 주지 않기 때문.
   위 640px 블록의 14px 는 그 동작이 없는 안드로이드·데스크톱용이다. */
@supports (-webkit-touch-callout: none) {
  @media (max-width:640px) {
    #addr { font-size:var(--fs-head); padding:5px 38px 5px 12px; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   패널의 장(chapter) —— 다섯 장을 한 스크롤에 잇고, 경계를 눈에 보이게 세운다.

   화면 모드가 셋이라 셋 다 따로 확인해야 한다:
     ① 웹(>=1001px)      — #panel 이 스스로 스크롤. 레일은 패널 왼쪽 세로 띠지.
     ② 좁은 웹(<=1000px) — 문서(body)가 스크롤. 레일은 화면 아래 가로 고정(54px).
     ③ 모바일(<=640px)   — ② 에 더해 글자·여백이 줄고 팝오버가 낀다.
   ① 과 ② 은 스크롤 주체가 다르다 — sticky 머리글이 '무엇을 기준으로' 서는지가 갈린다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 압축 판정 바(#vbar .vb-in)가 화면 위에서 덮는 높이. 장 머리글은 그 아래에 선다 —
   같은 값을 JS(chapterTopOffset)도 읽어 쓰므로, 스크롤이 멈추는 자리와 머리글이 서는
   자리가 늘 일치한다. 두 곳에 숫자를 따로 적으면 반드시 어긋난다. */
:root { --chap-top:40px; }

/* 장 = 한 덩어리. 묶음은 <b>왼쪽 색선</b>이 맡는다 — 머리글에서 본문 끝까지 이어져
   '이 선 오른쪽은 전부 이 장'이라고 말하는 괄호다.
   ⚠ 처음에는 장 바탕을 #F4F6F8 로 깔았다가 되돌렸다. 안쪽에는 흰 카드만 있는 게 아니라
   바탕이 <b>비치는</b> 글(.sec-sub·근거 줄 등)이 섞여 있어서, 그 글들이 회색 위에 앉으며
   흐려졌다(제보). 실측 대비: --muted #5D6D7E 가 흰 바탕 5.31 -> 회색 바탕 4.90,
   --hint 는 2.06 -> 1.91. AA(4.5)는 넘지만 눈에 띄게 묽어진다.
   지금 바탕 #FCFDFE 는 흰색에서 1% 만 내린 값이라 카드가 얹힌 느낌만 남기고 대비는
   사실상 그대로다(--muted 5.25).
   ⚠ 가로 구분선은 따로 긋지 않는다 — 머리글에 이미 아래 1px 테두리와 왼쪽 3px 색선이
   있어서, 그 위에 선을 더하면 40px 사이에 평행선이 두 줄 생기고 음영의 가장자리까지
   겹쳐 테두리가 두 겹으로 보인다. 경계는 음영 하나가 맡는다.
   여백은 34px -> 10px. 음영이 경계를 만드는 이상 여백은 블록 사이 숨구멍이면 족하다
   (34px 은 그냥 빈 구멍으로 보였다 — 제보). */
.chap { margin:18px 0 0; background:#FCFDFE;
  border-left:3px solid var(--acc); border-radius:0 14px 14px 0; }
.chap:first-child { margin-top:0; }

/* 장 머리글 —— 구분의 주력. 위치(sticky) · 크기(19px) · 번호(2 / 5)가 함께 경계를 긋는다.
   ⚠ 조상에 overflow:hidden 을 걸지 않는다 — 그 안의 sticky 는 '그 상자 기준'으로 묶여
   화면에 붙지 못한다(#vbar 가 같은 이유로 한 번 깨진 적이 있다. @media 1000 의 #stage
   주석 참고). */
/* 왼쪽 색선은 .chap 이 그린다(장 전체 높이로 이어져야 괄호가 된다) — 머리글이 또 그리면
   같은 자리에 두 겹이 겹친다. 여기서는 위 모서리만 맞춘다. */
.chap-h { position:sticky; top:var(--chap-top); z-index:6;
  display:flex; align-items:baseline; gap:10px; padding:13px 14px;
  border-bottom:1px solid var(--border); border-radius:0 14px 0 0;
  /* 장 바탕과 같은 색이다 — 머리글은 색이 아니라 큰 제목·번호·색선으로 이미 도드라진다.
     다만 <b>불투명해야</b> 한다: 붙어 있는 동안 본문이 그 아래로 지나가기 때문이다.
     본문(#FCFDFE)보다 한 눈금 진해서 '이 덩어리의 머리'로 읽힌다. */
  background:#F1F4F7; }
/* 연속한 sticky 머리글은 문서 순서대로 쌓여야 '지나가면 다음 것이 받는다'로 읽힌다 */
#chap-can   .chap-h { z-index:6; }
#chap-check .chap-h { z-index:7; }
#chap-plan  .chap-h { z-index:8; }
#chap-biz   .chap-h { z-index:9; }
#chap-next  .chap-h { z-index:10; }

.chap-n { flex-shrink:0; font-size:var(--fs-mini); font-weight:800; letter-spacing:.04em;
  color:var(--acc); font-variant-numeric:tabular-nums; }
.chap-ic { flex-shrink:0; font-size:var(--fs-lead); line-height:1; }
.chap-tt { flex-shrink:0; font-size:var(--fs-chap); font-weight:900; letter-spacing:-.01em;
  color:var(--text); white-space:nowrap; }
/* 머리글이 붙어 있는 동안 계속 보이는 한 줄 — 남는 폭만큼만 쓰고 넘치면 … 로 자른다
   (#vbar .vb-why 와 같은 규칙) */
.chap-sum { flex:1; min-width:0; font-size:var(--fs-label); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 좌우 여백은 본문에만 준다 — 머리글은 블록 폭을 꽉 채워야 '이 덩어리의 머리'로 읽힌다 */
.chap-b { padding:16px 14px 20px; }

/* 장 머리글이 제목을 맡았으니 안쪽 섹션 머리의 아이콘·제목은 <b>같은 말의 반복</b>이다 —
   '1 / 5 종합판정' 바로 아래에 '종합 판정'이 또 나오면서 40px 안에 가로 띠가 세 겹으로
   쌓여 답답해 보였다(제보). 설명 한 줄(.sec-sub)과 근거 버튼은 장 머리글에 없는 정보라
   남긴다. 탭 화면(?panel=tabs)에서는 이 머리가 그 탭의 유일한 제목이므로 건드리지 않는다. */
.chap .sec-head > .sec-icon,
.chap .sec-head .sec-title { display:none; }
.chap .sec-head { margin-bottom:10px; padding-bottom:8px; }

@media (max-width:640px) {
  :root { --chap-top:38px; }        /* 폰에서는 판정 바가 한 눈금 낮다 */
  .chap { margin-top:12px; }
  .chap-h { padding:11px 11px; gap:8px; }
  .chap-tt { font-size:var(--fs-lead); }
  .chap-sum { font-size:var(--fs-mini); }
  .chap-b { padding:14px 10px 16px; }
}