:root{
  /* 화면 글씨 크기는 여기 하나로 조절한다.
     100% = 기본(16px 기준), 150% = 지금보다 1.5배.
     ⚠️ 화면용 글자 크기는 모두 rem 이라 이 값 하나만 바꾸면 전부 따라온다.
        인쇄(@media print)는 pt 로 따로 잡혀 있어 영향을 받지 않는다.
        (2026-09-09: 100% → 150% 로 키웠다가 30% 줄여 105% 로 맞췄다) */
  font-size:105%;

  --bg:#f5f6f8; --card:#fff; --ink:#1b1f24; --muted:#6b7480;
  --line:#e3e6ea; --accent:#1f4f8b; --accent-soft:#eaf1fa;
  --good:#186a3b; --bad:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:0.875rem/1.55 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;}
main{max-width:1080px;margin:0 auto;padding:24px 20px 48px}

.topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--accent);color:#fff;padding:12px 24px}
.brand{color:#fff;text-decoration:none;font-weight:600;font-size:0.9375rem}
.userbox{display:flex;gap:14px;align-items:center;font-size:0.8125rem}
.userbox a{color:#cfe0f5;text-decoration:none}
.userbox a:hover{text-decoration:underline}

footer{max-width:1080px;margin:0 auto;padding:0 20px 32px;color:var(--muted);font-size:0.75rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;margin-bottom:16px}
h1{font-size:1.25rem;margin:0 0 6px}
h2{font-size:0.9375rem;margin:0 0 12px}
h2.section{font-size:0.9375rem;margin:26px 0 12px;color:var(--muted)}
.intro{margin-bottom:16px}
.intro p{color:var(--muted);margin:0}
.muted{color:var(--muted);font-weight:400}
.hint{color:var(--muted);font-size:0.75rem;margin:10px 0 0}
.warn{color:var(--bad);font-size:0.8125rem;margin:10px 0 0}
.error{color:var(--bad);font-size:0.8125rem;margin:0 0 8px}
code{background:#eef0f3;padding:1px 5px;border-radius:4px;font-size:0.75rem}

/* form */
label{display:block;font-size:0.75rem;color:var(--muted);margin-bottom:10px}
input,select{width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--line);
  border-radius:6px;font-size:0.875rem;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
button{background:var(--accent);color:#fff;border:0;border-radius:6px;
  padding:10px 22px;font-size:0.875rem;font-weight:600;cursor:pointer}
button:hover{background:#173d6d}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px}
/* 소재지 다섯 칸 — 시·도 · 권역 · 시·군·구 · 상권 · 전용면적 (구휘님 2026-09-13).
   ⚠️ 숨긴 칸은 `[hidden]{display:none}` 으로 **칸째** 빠진다. 오피스텔은
      권역·상권이 없어 세 칸, 인천·경기 상가는 권역이 없어 네 칸이 된다. */
/* ⚠️ `auto-fit` 은 칸이 줄면 남은 칸을 늘려 버린다 — 오피스텔에서 시·도·시·군·구
   둘만 남자 화면 절반씩 차지했다. `auto-fill` 은 빈 자리를 그대로 둬 칸 너비가
   늘 같다 (구휘님 2026-09-13 화면에서 잡음). */
.grid5{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 16px}
@media(max-width:700px){.grid5{grid-template-columns:repeat(2,1fr)}}
.inline{display:flex;gap:8px}
.inline input{flex:2}.inline select{flex:1}
.check{display:flex;align-items:center;gap:6px;margin-top:22px}
.check input{width:auto;margin:0}
details.assumptions{border-top:1px solid var(--line);margin:6px 0 16px;padding-top:12px}
details.assumptions summary{cursor:pointer;font-size:0.8125rem;color:var(--accent);margin-bottom:12px}

/* login */
.login-wrap{display:flex;justify-content:center;padding-top:60px}
.login{width:340px}

/* headline */
.headline .loc{color:var(--muted);font-size:0.8125rem}
.headline .value{font-size:2.375rem;font-weight:700;letter-spacing:-.5px;margin:6px 0 4px}
.headline .band{font-size:0.8125rem;color:var(--muted)}
/* 조회 기준 — 맨 위에서 '몇 달치로 잰 값인지'를 못 박는다 */
.headline .basis{margin-top:5px;font-size:0.8125rem;font-weight:600;color:var(--accent)}
.headline .basis .muted{font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{background:var(--accent-soft);color:var(--accent);border-radius:20px;
  padding:5px 12px;font-size:0.75rem;font-weight:600}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row2 .card{margin-bottom:0}
.row2+.card{margin-top:16px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:0.8125rem}
.kv th{text-align:left;font-weight:500;color:var(--muted);padding:7px 0;width:44%;vertical-align:top}
.kv td{padding:7px 0;text-align:right}
.kv tr+tr th,.kv tr+tr td{border-top:1px solid var(--line)}
.kv tr.total th,.kv tr.total td{font-weight:700;border-top:2px solid var(--ink)}
.minus{color:var(--bad)}
.good{color:var(--good);font-weight:600}
.bad{color:var(--bad);font-weight:600}

.scroll{overflow-x:auto}
.matrix,.samples{min-width:640px}
.matrix th,.matrix td{border:1px solid var(--line);padding:7px 8px;text-align:right}
.matrix thead th{background:#f0f2f5;text-align:center}
.matrix tbody th{background:#f0f2f5;text-align:center}
.matrix td.base{background:var(--accent-soft);font-weight:700}
.samples th,.samples td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:right;white-space:nowrap}
.samples th:nth-child(-n+3),.samples td:nth-child(-n+3){text-align:left}
.samples thead th{background:#f0f2f5;color:var(--muted);font-weight:500}
/* 제목줄 아래 작게 붙는 단위. 표마다 단위가 달라(매매 백만원 / 전월세 만원)
   반드시 밝혀야 한다 — 나란히 보다가 자릿수를 잘못 읽는다. */
.unit-head{display:block;font-size:0.6875rem;font-weight:400;opacity:.75}

/* 경고 안에 늘어놓는 목록 (자료가 빈 시군구 등). 점 없이 담백하게. */
ul.plain{margin:8px 0 0;padding-left:0;list-style:none;font-size:0.8125rem}
ul.plain li{padding:3px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}

.error-box h2{color:var(--bad)}

@media (max-width:820px){
  .grid3,.grid4,.row2{grid-template-columns:1fr}
  .headline .value{font-size:1.875rem}
}

/* ── 더 보기 단추 ─────────────────────────────────────────────────── */
.more-wrap{margin:12px 0 0}
.more-btn{background:#fff;color:var(--accent);border:1px solid var(--line);
  padding:7px 16px;font-size:0.8125rem;font-weight:500}
.more-btn:hover{background:var(--accent-soft)}

/* ── 인쇄 단추 ────────────────────────────────────────────────────── */
.actions{display:flex;justify-content:flex-end;margin-bottom:12px}
.print-btn{background:#fff;color:var(--accent);border:1px solid var(--accent);
  padding:8px 18px;font-size:0.8125rem}
.print-btn:hover{background:var(--accent-soft)}
.print-only{display:none}

/* ── 인쇄 (A4 한 장) ──────────────────────────────────────────────────
   ⚠️ 한 장에 넣으려고 **비교표본 목록은 인쇄에서 뺀다.** 표본이 30줄이면
      그것만으로 두 장을 넘긴다. 표본은 화면에서 보는 것으로 한다.
   ⚠️ 여백은 12mm 다. 프린터가 못 찍는 가장자리(보통 5mm 안팎)를 감안한 값이다.
      이보다 줄이면 프린터에 따라 표 오른쪽 끝이 잘린다.
   ⚠️ 값을 바꾸면 `scripts/check_print.py` 로 쪽수를 다시 재 볼 것.
   ------------------------------------------------------------------ */
/* 위 여백을 넉넉히 (구휘님 2026-09-11). 순서는 위·오른쪽·아래·왼쪽.
   ⚠️ 여백을 늘리면 담을 수 있는 높이가 줄어 **두 쪽으로 넘어갈 수 있다.**
      고친 뒤에는 반드시 `python -m scripts.check_print` 로 재 볼 것. */
@page{size:A4 portrait;margin:22mm 12mm 12mm}

@media print{
  :root{--bg:#fff}
  body{background:#fff;font-size:9pt;line-height:1.4}
  main{max-width:none;margin:0;padding:0}

  /* 화면에만 있는 것들 */
  .topbar,footer,.no-print,.more-wrap,
  h2.section,form,.intro{display:none !important}
  .print-only{display:block}

  .print-head{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1.5px solid var(--ink);padding-bottom:5px;margin-bottom:9px;
    font-size:10pt}
  .print-head span{font-size:8pt;color:var(--muted)}
  .print-foot{margin-top:8px;padding-top:5px;border-top:1px solid var(--line);
    font-size:7.5pt;color:var(--muted);line-height:1.35}

  /* 카드를 납작하게 — 그림자·둥근 모서리·여백을 걷어낸다 */
  .card{border:1px solid var(--line);border-radius:0;padding:8px 10px;
    margin-bottom:7px;break-inside:avoid;page-break-inside:avoid}
  h2{font-size:9.5pt;margin:0 0 6px}

  .headline .loc{font-size:9pt}
  .headline .value{font-size:19pt;margin:1px 0}
  .headline .band{font-size:8.5pt}
  .chips{margin-top:5px}
  .chip{font-size:8pt;padding:2px 7px}

  .row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  table.kv th,table.kv td{padding:2.5px 0;font-size:8.5pt}
  table.matrix th,table.matrix td{padding:2.5px 4px;font-size:8pt}

  /* ── 근거가 된 실거래 표 (구휘님 2026-09-11) ───────────────────────
     예전에는 `.scroll,.samples` 를 통째로 숨겨 한 장에 맞췄다. 이제는
     심사역이 무엇을 보고 낸 값인지 종이에서도 짚을 수 있어야 한다. */

  /* ⚠️ **접어 둔 줄은 종이에도 안 찍는다** — 화면과 같이 10줄까지다
     (구휘님 2026-09-11). 30줄을 다 찍었더니 종이가 2쪽이 됐다.
     '최근 30건' 이라는 제목과 어긋나던 문제는, 그 제목을 **없애서** 풀었다.
     그러니 여기서 `tr.more[hidden]` 을 되살리지 마라 — 다시 어긋난다. */

  /* ⚠️ 화면용 가로 스크롤을 풀어야 한다. 안 그러면 종이 밖으로 나간
     칸이 잘려 나간다 — 화면에서는 밀어서 보면 되지만 종이는 못 민다. */
  .scroll{overflow:visible !important}
  .matrix,.samples{min-width:0 !important}

  table.samples{width:100%;border-collapse:collapse}
  .samples th,.samples td{padding:2px 3px;font-size:7pt;line-height:1.3}
  .unit-head{font-size:6pt}
  .samples thead th{background:#f0f2f5;border-bottom:1px solid var(--ink)}
  /* ⚠️ 표가 다음 장으로 넘어가면 제목줄이 사라져 무슨 숫자인지 알 수 없다.
     `table-header-group` 이면 장마다 제목줄이 다시 찍힌다. */
  table.samples thead{display:table-header-group}
  .samples tr{break-inside:avoid;page-break-inside:avoid}

  /* ⚠️ `.card` 에 걸린 '쪼개지 말 것'을 실거래 칸에서는 풀어야 한다.
     30줄짜리 표는 한 장에 안 들어가는데, 쪼개지 말라고 하면 앞 장을
     통째로 비워 두고 넘어가 종이가 헛되이 늘어난다. */
  .samples-card{break-inside:auto;page-break-inside:auto}

  a{color:inherit;text-decoration:none}
}

/* 산정 근거에서 가장 중요한 두 줄 — 전용 평당 임대료·매매가.
   이 둘이 Cap Rate 와 가치를 정하므로 눈에 먼저 들어와야 한다 (구휘님 요청 2026-09-08). */
table.kv tr.key th{color:var(--ink);font-weight:600}
table.kv tr.key td strong{font-weight:700;font-size:0.9375rem}
@media print{ table.kv tr.key td strong{font-size:9.5pt} }

/* 결과 화면 오른쪽 위 단추들 (홈 · 인쇄). 인쇄물에는 나오지 않는다. */
.actions{gap:8px;flex-wrap:wrap;align-items:center}
.btn-ghost{display:inline-block;background:#fff;color:var(--accent);
  border:1px solid var(--line);border-radius:6px;padding:8px 18px;
  font-size:0.8125rem;font-weight:600;text-decoration:none;line-height:1.55}
.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent)}

/* '조건 재설정'으로 펼치는 입력칸 */
.refine{margin-bottom:16px}
.refine .form{border:0;padding:0;margin:0;background:transparent}

/* 전월세전환율·전세 포함 — 접힌 '산정 가정 조정'이 아니라 첫 화면에 둔다.
   전세를 표본에 넣으면 전환율이 임대료를 통째로 정하므로 눈에 보여야 한다. */
.primary-assumptions{align-items:end;margin-bottom:4px}
.primary-assumptions .hint{margin:0 0 10px;align-self:center}
label.check{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--ink)}
label.check input{width:auto;margin:0}

/* 조회 기록에서 산정 실패한 줄 */
tr.failed td{opacity:.55}
tr.failed td:first-child{border-left:3px solid var(--bad)}

/* 실행 단추는 입력칸에서 넉넉히 띄운다.
   붙어 있으면 마지막 입력칸의 일부처럼 보인다 (구휘님 2026-09-09). */
.form button[type="submit"]{margin-top:22px}

/* ── 계정 관리 ─────────────────────────────────────────────────────── */
.temp-pw{border-color:var(--accent)}
.temp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.6rem;font-weight:700;letter-spacing:2px;
  background:var(--accent-soft);color:var(--accent);
  padding:12px 18px;border-radius:8px;display:inline-block;margin:6px 0 10px;
  user-select:all}
.row-actions form{display:flex;flex-wrap:wrap;gap:5px}
button.mini{background:#fff;color:var(--accent);border:1px solid var(--line);
  padding:4px 10px;font-size:0.75rem;font-weight:500}
button.mini:hover{background:var(--accent-soft)}
button.mini.danger{color:var(--bad)}
button.mini.danger:hover{background:#fdecea;border-color:var(--bad)}

/* 계정 화면 우측 상단의 '관리자 변경' */
.admin-toggle{display:flex;align-items:center;gap:6px;margin-right:auto}
/* 화면 맨 아래로 내린 뒤로는 왼쪽에 붙는다 */
.admin-toggle.bottom{margin:0}
.admin-toggle label{margin:0;font-size:0.75rem;white-space:nowrap}
/* 고르는 칸은 **가장 긴 이름에 맞춰 저절로** 정해지게 둔다(width:auto).
   너비를 못 박으면 이름에 비해 칸이 커 보인다 (구휘님 2026-09-09).
   기본값 '-' 가 왼쪽에 붙어 보이지 않게 가운데로 맞춘다. */
.admin-toggle select{width:auto;margin:0;padding:6px 10px;
  font-size:0.8125rem;text-align:center;text-align-last:center}

/* 파란 바의 집 아이콘 — '홈' 단추를 여기로 모았다 (구휘님 2026-09-09) */
.userbox .home{display:inline-flex;align-items:center;color:#cfe0f5;padding:2px}
.userbox .home:hover{color:#fff}

/* 홈 화면의 유형 탭 (오피스텔 · 상가 · 오피스) */
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:2px solid var(--line)}
.tabs a{padding:8px 18px;color:var(--muted);text-decoration:none;font-weight:600;
  font-size:0.875rem;border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}

/* Cap Rate '조정' — 부동산원 상권 고르기 */
/* ⚠️ '권역 지정' 단추 바로 아래에서 펼쳐진다 (구휘님 2026-09-12). 위쪽 여백을
   조금 두어 소재지 줄과 붙지 않게 한다 — 붙으면 소재지 칸의 일부로 읽힌다. */
.district-box{border:1px solid var(--line);border-radius:8px;padding:12px;
  margin:2px 0 10px;background:#fbfcfd}
.district-box .hint{margin:0 0 8px}
#district-find{margin-bottom:8px}
.district-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
button.district{display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:7px 12px;font-size:0.8125rem;font-weight:400;text-align:left}
button.district:hover{background:var(--accent-soft);border-color:var(--accent)}
button.district strong{color:var(--accent);font-variant-numeric:tabular-nums}

/* ── 지역 시장지표 조회 (2026-09-11 목적 변경) ───────────────────────── */

/* 유형 고르기 — 라디오를 탭처럼 보이게 한다.
   ⚠️ 라디오 자체를 숨기지 않고 화면에서만 치운다(clip). 완전히 숨기면
      키보드로 고를 수 없고 화면낭독기도 못 읽는다. */
/* ⚠️ 유형 고르는 칸은 **탭처럼 보여야 한다** (구휘님 2026-09-12).
   밑줄만 그어 두었더니 고른 것 하나만 파랗고 나머지는 그냥 글씨라, 눌러서 바꿀 수
   있는 것인 줄 모르고 지나쳤다. 낱낱이 윤곽선을 둘러 서류철 꼬리표 꼴로 만든다.
   ⚠️ 고른 탭은 **아래 선을 지워** 아래 내용과 이어 붙인다 — 그래야 '이 탭을 열어
      둔 상태'로 읽힌다. 색만 바꾸면 종이 위의 여느 글씨와 구별되지 않는다. */
/* ⚠️ 선은 **얇게**, 칸은 **넓게** (구휘님 2026-09-12). 2px 짜리 테두리는
   서류철 꼬리표가 아니라 단추처럼 보였다. 1px 로 줄이고 좌우를 넓혀
   글자가 가운데 놓이게 한다. */
.kinds{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.kind{position:relative;padding:6px 44px;color:var(--muted);font-weight:700;
      font-size:1.22em;cursor:pointer;background:#f4f6f8;text-align:center;
      border:1px solid var(--line);
      border-radius:8px 8px 0 0;margin-bottom:-1px}
.kind input{position:absolute;width:1px;height:1px;opacity:0;
            clip:rect(0 0 0 0);clip-path:inset(50%)}
.kind:hover{color:var(--ink);background:#eef1f5}
.kind.on{color:var(--accent);background:var(--card,#fff);
         border-color:var(--line);border-bottom-color:transparent}
.kind:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* 대지용도 두 칸(대분류·중분류)을 나란히. 좁은 화면에서는 위아래로 쌓인다. */
.lu-row{display:flex;gap:16px;flex-wrap:wrap}
.lu-row label{margin-bottom:0}
.lu-row select{min-width:220px}

.series-row{margin-bottom:14px}
.series-row select{max-width:260px}
.series-row .hint{margin:6px 0 0}

/* 면적 칸의 숫자+단위를 한 줄로 */
.with-unit{display:flex;gap:6px}
.with-unit input{flex:1;min-width:0}
.with-unit select{width:72px;flex:none}

/* ⚠️ `.district-row` 는 없앴다 (구휘님 2026-09-12) — 단추가 법정동 옆으로
   올라가면서 이 줄에는 부스러기만 남았다. */
.run{margin-top:22px}

/* 결과 — Cap Rate 와 평당 임대료가 주인공이다 */
/* ⚠️ 칸 수가 유형마다 다르다 — 오피스텔은 셋, 상가·오피스는 둘
   (매매가는 임대료와 분모가 달라 뺐다). auto-fit 이라 저절로 나뉜다. */
.market{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:14px;margin-top:16px}
.mcell{background:var(--accent-soft);border-radius:10px;padding:16px 18px}
.mlabel{color:var(--muted);font-size:.86em;font-weight:600}
/* '(계약면적기준)' 처럼 이름에 붙는 단서. 이름보다 한 톤 작게. */
.mlabel .sub{font-weight:500;opacity:.85;margin-left:3px}
.mvalue{font-size:2.1em;font-weight:800;color:var(--accent);line-height:1.15;margin:4px 0 6px}
.mvalue .unit{font-size:.42em;font-weight:600;margin-left:3px}
.msrc{color:var(--muted);font-size:.8em;line-height:1.45}

@media (max-width:760px){
  .market{grid-template-columns:1fr}
}
@media print{
  /* ⚠️ 인쇄에서는 auto-fit 이 종이 폭을 좁게 보아 한 줄에 하나씩 쌓였다.
     칸 수(2~3개)에 맞춰 **가로로** 세운다 (2026-09-11). */
  .market{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin-top:6px}
  .mcell{padding:6px 8px;background:#f4f6f9}
  .mvalue{font-size:1.4em;margin:2px 0 3px}
  .msrc{font-size:7pt}
  .kinds,.run{display:none}
}

/* ⚠️ **`hidden` 속성이 CSS 에 눌리지 않게 한다.**
   `.run{display:flex}` 같은 규칙이 브라우저 기본값
   `[hidden]{display:none}` 를 이겨, 숨겼는데도 화면에 남았다 (2026-09-11).
   화면을 감추는 일은 언제나 이 규칙이 이겨야 한다. */
[hidden]{display:none !important}

/* 법정동 여러 개 고르기 + 조회 기간 (구휘님 2026-09-12) */
/* ⚠️ 아래쪽을 넉넉히 띄운다 (구휘님 2026-09-12). 법정동 설명 줄이 바로 밑의
   대지용도·층 칸에 붙어 있으면 그 칸을 설명하는 말로 읽힌다. */
.picked-row{margin-top:14px;margin-bottom:26px}
.picked-row .chips{margin-top:0}
/* 법정동 체크 상자 (구휘님 2026-09-12).
   ⚠️ 여러 열로 늘어놓고 높이를 묶어 굴린다 — 서울에는 법정동이 87개인 구가 있다.
      한 열로 세우면 화면이 통째로 그것만 남는다. */
.dong-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:2px 10px;max-height:168px;overflow-y:auto;margin-top:6px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
.dong-grid:empty{display:none}
.dong-item{display:flex;align-items:center;gap:6px;margin:0;padding:3px 2px;
  font-size:0.8125rem;color:var(--ink);cursor:pointer;border-radius:4px}
.dong-item:hover{background:var(--accent-soft)}
.dong-item input{width:auto;margin:0;flex:none;accent-color:var(--accent)}
/* '전체' 는 낱개 동과 성격이 다르다 — 한 줄을 다 쓰고 아래에 금을 긋는다 */
.dong-item.dong-all{grid-column:1/-1;font-weight:700;color:var(--accent);
  border-bottom:1px solid var(--line);border-radius:0;padding-bottom:6px;margin-bottom:3px}
#dong-find{margin-top:8px;margin-bottom:0}
/* '선택' 단추를 체크 목록 아래 왼쪽에 (구휘님 2026-09-12) */
.dong-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.dong-count{font-size:0.8125rem;font-weight:600;color:var(--accent)}
.dong-count.none{font-weight:400;color:var(--muted)}
.btn-linky{background:none;border:0;padding:0;color:var(--muted);font-size:0.75rem;
  text-decoration:underline;cursor:pointer;font-weight:400}
.btn-linky:hover{background:none;color:var(--ink)}
/* 조회 기간은 조회 단추 왼쪽에 나란히 선다 */
/* ⚠️ 왼쪽 정렬이다 (구휘님 2026-09-12). 위 칸들이 모두 왼쪽에서 시작하므로
   가운데로 모으면 이 줄만 따로 놀아 눈이 한 번 더 움직인다. */
.run{display:flex;align-items:flex-end;gap:12px;justify-content:flex-start;margin-top:22px}
.run .months{flex:none;margin:0;text-align:left;max-width:190px}
.run .months select{min-width:150px}
.dong-error{color:#c0392b;font-weight:600}
/* '권역 지정' 단추 — 시·도·시·군·구와 **같은 크기**로 한 칸을 쓴다 (구휘님 2026-09-12) */
/* ⚠️ 고르는 칸(`select`)과 안쪽 여백·글자 크기를 똑같이 준다. 크기가 다르면
   '같은 층의 선택지' 로 안 읽히고 딸린 부속처럼 보인다.
   ⚠️ 다른 칸의 `label` 은 아래쪽 여백이 10px 이다. 그 여백까지 함께 맞춰야
      단추만 10px 내려앉지 않는다. */
/* ⚠️ `select` 는 글줄 높이가 브라우저 기본값이라 `line-height` 로는 딱 안 맞는다.
   옆 칸에서 잰 값(37px)을 그대로 준다 — 3px 만 어긋나도 눈에 걸린다. */
.grid4 > .grid-btn{align-self:end;width:100%;height:37px;margin-bottom:10px;
  padding:0 10px;font-size:0.875rem}
/* 고른 권역·상권 — 단추 오른쪽 칸. **글자 밑선**을 단추에 맞춘다. */
.grid4 > .picked-district{align-self:end;margin-bottom:17px}
/* ⚠️ 다른 칸의 `label` 은 아래쪽 여백이 10px 이다. 그 여백까지 함께 바닥을 맞춰야
   단추가 고르는 칸보다 10px 내려앉지 않는다 (구휘님 화면에서 확인).
   ⚠️ 높이·글자 크기는 **옆 고르는 칸과 같게** 한다 (구휘님 2026-09-12).
      `button.mini` 의 작은 글씨(0.75rem)·좁은 여백(4px)을 여기서 되돌린다 —
      나란히 선 두 칸의 키가 다르면 단추가 딸린 부속처럼 보인다. */
/* 고른 상권 — 법정동 칩 줄 **오른쪽 끝**에 붙는다 */
.picked-line{display:flex;align-items:center;gap:8px}
.picked-line .lab{color:var(--muted);font-size:0.75rem}
.picked-line .chips{flex:1 1 auto;min-width:0}
/* 고른 권역·상권 — '권역 지정' 단추 **바로 오른쪽**에 붙는다 */
.picked-district{flex:none;align-self:center;font-size:0.8125rem;font-weight:600;
  color:var(--accent);white-space:nowrap}
.picked-district:empty{display:none}



/* 권역 지정 목록 — 권역으로 묶어 보여 준다 (구휘님 2026-09-12) */
/* ⚠️ 권역과 그에 딸린 상권을 **눈으로 구별**해야 한다. 같은 꼴로 늘어놓으면
   '강남' 과 '강남대로' 가 같은 층으로 읽혀, 권역 평균을 상권 값인 줄 안다. */
.district-none{border-style:dashed;color:var(--muted);margin-bottom:6px}
.district-region{background:var(--accent-soft);border-color:transparent;margin-top:6px}
.district-kid{margin-left:16px;width:calc(100% - 16px)}

/* Cap Rate 칸 — 전체 너비 음영 상자 (구휘님 2026-09-12) */
/* ⚠️ 값이 하나로 줄었어도 **상자는 그대로 둔다.** 상자까지 줄이면 화면이 통째로
   달라 보여, 쓰던 사람이 무엇이 바뀐 것인지 다시 익혀야 한다. */
.cap-cell{grid-column:1/-1}
/* Cap 칸이 전체를 덮으므로 아래도 정확히 두 칸 — 양쪽 끝을 맞춘다 */
.market.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){.market.pair{grid-template-columns:1fr}}

/* Cap Rate 칸 — 왼쪽에 값, 오른쪽에 산출식 (구휘님 2026-09-12) */
/* ⚠️ 분자와 분모가 **서로 다른 데서 온다** (부동산원 표본조사 / 국토부 실거래).
   식을 값 옆에 두지 않으면 한 군데서 받아온 수치로 여긴다. */
.cap-main{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.cap-num{flex:0 0 auto;min-width:190px}
.cap-formula{flex:1 1 300px;min-width:0;font-size:0.8125rem;line-height:1.45;
  display:flex;justify-content:center}
/* ⚠️ 안쪽 상자가 **글자 길이에 맞춰 줄어든다.** 그래야 가르는 선이 칸 전체를
   가로지르지 않고 식의 폭에 맞는다 — 길면 식이 아니라 구분선으로 읽힌다. */
.cap-formula .f-wrap{display:inline-block;max-width:100%}
.cap-formula .f-bar{border-top:1px solid var(--ink);margin:5px 0}
/* ⚠️ 한 줄로 붙여 둔다. 접히면 가르는 선과의 간격이 들쭉날쭉해 분수로 안 읽힌다.
   좁은 화면에서는 칸 안에서 옆으로 굴린다 — 글자를 줄이면 못 읽는다. */
.cap-formula .f-top,.cap-formula .f-bot{text-align:center;white-space:nowrap}
.cap-formula{overflow-x:auto}
@media(max-width:640px){.cap-formula{flex-basis:100%}}
@media print{
  .cap-main{gap:16px}
  .cap-formula{font-size:8pt}
}

/* 표본이 얇을 때의 알림 (구휘님 2026-09-13) */
/* ⚠️ 출처처럼 조용히 적으면 안 읽힌다. '서울특별시 전체' 다섯 글자가 그랬다 —
   무슨 뜻인지 구휘님도 물어보셔야 했다. 색과 테두리로 눈에 걸리게 한다. */
.thin-note{margin:12px 0 0;padding:9px 12px;border-radius:8px;
  background:#fdf3e7;border:1px solid #e8c39a;color:#8a4b08;
  font-size:0.8125rem;line-height:1.5}
.thin-note .muted{color:#a97b4a}
/* 아예 없을 때는 더 세게 — 값이 하나도 실측이 아니라는 뜻이다 */
.thin-note.none{background:#fdecea;border-color:#e8a9a2;color:#9b2c20}
@media print{.thin-note{font-size:8pt;padding:5px 8px;margin-top:6px}}

/* 소재지 줄 밑의 '해당사항 없음' 설명 — 줄 전체를 쓴다 */
.grid5 > .area-hint{grid-column:1/-1;margin:2px 0 10px}

/* 전용면적 — 법정동 다음 줄, 다른 칸과 같은 너비 (구휘님 2026-09-13) */
.area-row{max-width:260px;margin-bottom:16px}

/* 실거래 표 제목의 '건물 N곳' — 평당가를 낸 실제 표 수다 */
.samples-card .bldg{font-weight:600;color:var(--accent)}

/* 계정 유효기간 — 지났거나 곧 끝나는 것을 눈에 띄게 (구휘님 2026-09-13) */
.gone{color:var(--bad, #c0392b);font-weight:700}
.soon{color:#b26a00;font-weight:600}