/* 색을 두 종류로 나눠 쓴다.
 *
 *   지면색  브라운 계열. 배경·테두리·강조. 제품의 얼굴이라 그대로 둔다.
 *   구분색  뜻이 있는 색. 거리 밴드, 분면, 물건 종류. 서로 **구별되는 것**이
 *           유일한 임무라 브라운에서 떼어내 색상환을 넓게 쓴다.
 *
 * 둘을 섞어 쓰다가 밴드 다섯 개가 전부 같은 브라운 링으로 그려져 있었다.
 * 화면에서 0-1km 와 10-20km 를 눈으로 가릴 수 없었다.
 */
:root{
  /* ── 지면 ── 중립 회색. 색은 전부 자료가 쓴다. */
  --ground:#F6F7F9; --surface:#FFFFFF; --surface-2:#EDEFF3;
  --ink:#171A1F; --muted:#59616E; --faint:#6B7280;
  --border:#E2E6EC; --border-strong:#C2C9D4;
  --accent:#3F5B77; --accent-soft:#E8EDF3; --on-accent:#FFFFFF;

  /* ── 영업소: 교통량 4단계 — 차가움 → 따뜻함 ──
     명도만 다른 한 색상은 지도를 확대하면 구별이 안 됩니다(2026-09-03 지시).
     그래서 색상 자체를 바꾸되, **차가운 색에서 따뜻한 색으로** 가서 순서를
     잃지 않게 했습니다. 온도가 크기·라벨과 같은 말을 합니다.
     네 색은 전 쌍 검사(색약 포함) 통과. */
  --tg-1:#3FBFB5;   /* ~1만대   민트 */
  --tg-2:#3B82D9;   /* 1~2만대  파랑 */
  --tg-3:#E2571E;   /* 2~3만대  붉은 주황 */
  --tg-4:#C2186B;   /* 3만대+   진분홍 */

  /* 신설 — 그 해에 처음 교통량이 잡힌 영업소.
     개통 효과를 보는 제품에서 가장 중요한 관측 대상이라 교통량 구간에
     섞지 않고 따로 표시합니다. 신설은 '교통량이 적은 곳' 이 아니라
     '이제 막 생긴 곳' 입니다.

     처음에는 2~3만 구간이 주황(#F08C28)이라 노랑과 ΔE 15.9 로, 통과는
     하지만 작은 마커에서는 헷갈렸습니다. 2~3만을 붉은 주황으로 밀어
     ΔE 27.7 로 벌렸습니다. 링도 거의 검정으로 두껍게 둘러, 흰 링을
     두른 네 구간과 **테두리 색만 봐도** 갈립니다. */
  --tg-new:#FACC15; --tg-new-ring:#1A1205;

  /* 통행량 미공개 — 도로공사 TCS 에 통행량이 한 해도 없는 영업소.
     민자 운영사가 요금을 직접 걷는 노선이라(마도·남봉담 등 수도권
     제2순환 봉담~송산) 도로공사가 그 자료를 갖고 있지 않습니다.

     **채우지 않고 테두리만 그립니다.** 네 구간과 신설은 속이 찬 점이라
     '값이 있다' 를 뜻하고, 이것은 속이 비어 '값이 없다' 를 뜻합니다.
     색으로 한 구간 더 만들면 '통행량이 이만큼인 곳' 처럼 읽혀, 정반대의
     결론이 나옵니다 — 한산한 IC 가 아니라 자료가 없는 IC 입니다. */
  --tg-none:#4B5563;

  /* ── 거리 밴드: 원색 점선 ──
     화면에 그리는 밴드는 **영향범위 3개까지**입니다. 위약 대조(5-10km)는
     분석 절차라 화면에서 뺐고, 그만큼 색상환에 자리가 생겨 원색을 쓸 수
     있게 됐습니다(2026-09-03 지시).

     세 색은 전 쌍 검사(색약 포함)를 통과합니다. 면은 채우지 않습니다 —
     넓은 색면은 한국 토지이용계획도의 용도지역(주거 노랑·상업 빨강·
     공업 보라·녹지 초록)처럼 읽히는데, 우리 밴드는 용도와 무관합니다.
     실선도 쓰지 않습니다. 배경 지도의 행정경계·도로와 섞입니다. */
  --band-1:#7C3AED;   /* 0-1  */
  --band-2:#DB2777;   /* 1-3  */
  --band-3:#0891B2;   /* 3-5  */
  --band-4:#6B7280;   /* 5-10 위약 대조 — 화면에는 안 그림, 분석 전용 */
  --band-5:#4B5563;

  /* ── 실거래·매물 ──
     한국 토지이용계획도는 색이 법으로 정해져 있습니다 — 주거 노랑,
     상업 빨강, **공업 보라**, 녹지 초록. 땅을 보는 사람은 그 색을 몸으로
     압니다. 그래서 공장·창고에 보라를 줍니다(관행과 일치). 토지는 흙갈색
     — 초록으로 두면 영업소 민트와 붙고, 적록색약에서 따뜻한 단계와도
     무너집니다. 흙갈색은 그 함정이 없습니다. */
  /* ── 실거래 — 용도지역 색으로 칠합니다 ──
     한국 지적편집도를 읽어온 분들에게 이 색은 곧 뜻입니다. 법정
     용도지역 색 계열을 그대로 쓰되, 지도 위 3.5px 점에서도 보이도록
     채도를 올렸습니다 (법정 색은 넓은 면을 칠하라고 만든 옅은 색이라
     점으로 찍으면 배경에 묻힙니다).

       계획관리  살구·주황 계열 → 진한 벽돌 주황
       생산관리  연두 계열      → 연두
       자연녹지  초록 계열      → 진초록
       공업      보라 계열      → 보라   ← 공장·창고가 여기 해당

     계획관리를 #D97706 로 두면 영업소 2~3만(#E2571E)과 ΔE 7.0 이라
     작은 배율에서 헷갈립니다. #92400E 로 낮춰 15.0 을 확보했습니다.
     거래끼리는 최소 20.2, 배경과는 최소 32.7 입니다. */
  /* 거래는 **종류 둘**로만 나눈다. 예전에는 용도지역별로 다섯 색을
     썼는데, 화면에 영업소 6색 + 밴드 3색이 이미 있어서 점이 열 몇 가지
     색의 원으로 뒤덮였다 — 사장님 지적대로 어느 것이 IC 이고 어느 것이
     거래인지 구분이 안 됐다.

     색을 고르기 전에 **모양으로 갈랐다.** 영업소는 원, 거래는 네모(토지)
     와 마름모(공장)다. 모양이 먼저 갈라주므로 색은 두 가지면 된다.

     두 색은 눈으로 고르지 않고 쟀다(OKLab ΔE). 영업소 6색·밴드 3색·
     배경 5색 전부와 최소 16.0, 둘끼리 44.8 이다. 채도도 높다(.186/.255)
     — 원색으로 해달라는 요구가 그것이다. */
  --kind-land:#00A63E;      /* 토지 — 초록. 네모 */
  --kind-factory:#1414CC;   /* 공장 — 진파랑. 마름모 */
  --kind-warehouse:#B8860B; /* 창고 — 황토. 마름모 (공장과 모양은 같고 색이 다르다) */
  --kind-etc:#7A5FA6;       /* 그 밖 산업시설 — 보라. 축사·정비소·주유소 등 */
  --listing:#111827;        /* 매물 — 짙은 먹, 마름모로 따로 구별 */

  /* ── 분면 (스코어보드 전용) ── */
  --q-under:#2563C9; --q-rising:#1F8A54; --q-over:#C2740B; --q-quiet:#6B7280;

  /* ── 교통량 계열 (추이 비교) ── */
  --traffic-1:#171A1F; --traffic-2:#E2571E; --traffic-3:#C2186B; --traffic-4:#3B82D9;

  --danger:#C62828;
  --shadow:0 1px 2px rgba(23,26,31,.06), 0 8px 24px -18px rgba(23,26,31,.30);
  --rail-w:16rem; --detail-w:23rem; --top-h:3.75rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101318; --surface:#181C22; --surface-2:#222831;
    --ink:#EDF0F4; --muted:#9AA4B2; --faint:#7E8794;
    --border:#2A313A; --border-strong:#3D4753;
    --accent:#9FC0DE; --accent-soft:#1C242E; --on-accent:#0E1319;
    --kind-land:#22D36A; --kind-factory:#6B7BFF; --kind-warehouse:#E0B44A; --kind-etc:#B69BE0;
    --tg-1:#4FD8CD; --tg-2:#6BA6F0; --tg-3:#F2703A; --tg-4:#E8558F;
    --tg-new:#FDE047; --tg-new-ring:#FEF9C3;
    --tg-none:#DCE3EC;
    --band-1:#A78BFA; --band-2:#F472B6; --band-3:#22D3EE;
    --band-4:#9CA3AF; --band-5:#D1D5DB;
  --listing:#F3F4F6;
    --q-under:#6BA8F5; --q-rising:#5FCB90; --q-over:#E8A94A; --q-quiet:#8E97A4;
    --traffic-1:#EDF0F4; --traffic-2:#F5A24E; --traffic-3:#E8558F; --traffic-4:#6BA6F0;
    --danger:#F0837A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
--ground:#101318; --surface:#181C22; --surface-2:#222831;
  --ink:#EDF0F4; --muted:#9AA4B2; --faint:#7E8794;
  --border:#2A313A; --border-strong:#3D4753;
  --accent:#9FC0DE; --accent-soft:#1C242E; --on-accent:#0E1319;
  --tg-1:#4FD8CD; --tg-2:#6BA6F0; --tg-3:#F2703A; --tg-4:#E8558F;
    --tg-new:#FDE047; --tg-new-ring:#FEF9C3;
    --tg-none:#DCE3EC;
  --band-1:#E5E7EB; --band-2:#9CA3AF; --band-3:#6B7280;
  --band-4:#D1D5DB; --band-5:#F3F4F6;
  --kind-land:#22D36A; --kind-factory:#6B7BFF; --kind-warehouse:#E0B44A; --kind-etc:#B69BE0;
  --listing:#F3F4F6;
  --q-under:#6BA8F5; --q-rising:#5FCB90; --q-over:#E8A94A; --q-quiet:#8E97A4;
  --traffic-1:#EDF0F4; --traffic-2:#F5A24E; --traffic-3:#E8558F; --traffic-4:#6BA6F0;
  --danger:#F0837A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}

/* hidden 속성은 브라우저 기본 규칙(display:none)으로 감춰지는데, 클래스에
   display 를 주면 그쪽이 이긴다. 그래서 .banner{display:flex} 를 단
   #demo-banner 가 hidden 인 채로 계속 보였고, **실자료 화면에 '데모 데이터,
   합성 데이터입니다' 배너가 떠 있었다.** 회원 가입까지 하고 들어온 사람에게
   자기 제품을 가짜라고 말하고 있었던 셈이다.
   .form{display:grid} 를 단 회원가입 폼, .home-link 도 같은 처지였다.
   한 줄로 전부 막는다. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:14px; line-height:1.6; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
.hint{color:var(--faint); font-size:.8rem; margin:.25rem 0}
.num{text-align:right; font-variant-numeric:tabular-nums}
.scroller{overflow-x:auto}

/* ── 배너 ── */
.banner{
  display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap;
  padding:.5rem 1.1rem; font-size:.82rem;
  background:var(--q-over); color:#1A1408;
}
.banner strong{font-weight:700}

/* ── 상단바 ── */
.topbar{
  flex:0 0 auto; height:var(--top-h);
  display:flex; align-items:center; gap:1.5rem; padding:0 1.1rem;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.65rem}
.mark{
  width:1.6rem; height:1.6rem; border-radius:.35rem; flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
}
.brand-name{font-weight:700; font-size:.95rem; line-height:1.2}
.brand-sub{font-size:.72rem; color:var(--faint); line-height:1.2}
.tabs{display:flex; gap:.25rem}
.tab{
  font:inherit; font-size:.85rem; font-weight:500; cursor:pointer;
  padding:.4rem .85rem; border-radius:.4rem;
  background:none; border:1px solid transparent; color:var(--muted);
}
.tab:hover{background:var(--surface-2); color:var(--ink)}
.tab.is-active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.guide-link{
  margin-left:auto; white-space:nowrap;
  font-size:.82rem; font-weight:600; color:var(--accent); text-decoration:none;
  padding:.35rem .7rem; border-radius:.4rem; border:1px solid var(--accent);
}
.guide-link:hover{background:var(--accent-soft)}
.guide-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.meta-stamp{margin-left:.9rem; font-size:.74rem; color:var(--faint); text-align:right}

/* ── 뷰 ── */
.view{display:none; flex:1; min-height:0}
.view.is-active{display:flex}
#view-board.is-active,#view-listings.is-active{display:block; overflow:auto}

/* ── 좌측 레일 ── */
.rail{
  flex:0 0 var(--rail-w); overflow:auto; padding:1rem;
  background:var(--surface); border-right:1px solid var(--border);
}
.rail-block{padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--border)}
.rail-block:last-child{border-bottom:none; margin-bottom:0}
.rail-block h2{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:.6rem;
}
.quad-filters{display:grid; gap:.3rem}
.quad-btn{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem;
  font:inherit; font-size:.83rem; text-align:left; cursor:pointer;
  padding:.4rem .55rem; border-radius:.4rem;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.quad-btn .dot{width:.6rem; height:.6rem; border-radius:50%; background:var(--c)}
.quad-btn .n{font-variant-numeric:tabular-nums; color:var(--faint); font-size:.78rem}
/* 지도의 마커와 같은 모양을 씁니다 — 속이 빈 점은 값이 없다는 뜻입니다. */
.quad-btn.is-hollow .dot{background:var(--surface); box-shadow:inset 0 0 0 2px var(--c)}
.quad-btn[aria-pressed="false"]{opacity:.42}
.quad-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.checks{display:grid; gap:.25rem; margin-bottom:.75rem}
.check{display:flex; gap:.5rem; align-items:baseline; font-size:.83rem; cursor:pointer}
.check em{font-style:normal; color:var(--faint); font-size:.75rem}
.field{display:grid; gap:.25rem; font-size:.8rem; color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; padding:.42rem .6rem; border-radius:.35rem;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
}
.field input[type=range]{padding:0; border:none; background:none; accent-color:var(--accent)}
.field output{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.legend{display:grid; gap:.3rem; font-size:.78rem; color:var(--muted)}
.legend .row{display:flex; align-items:center; gap:.5rem}
/* 밴드마다 다른 색. 전에는 다섯 개가 전부 같은 브라운이라 범례가 범례 구실을
   못 했다. --c 는 JS 가 밴드 순서에 맞춰 넣는다. */
.legend .ring{
  width:.85rem; height:.85rem; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--c, var(--accent));
}
.legend .row.is-placebo{color:var(--ink)}
.legend .row .tagline{
  margin-left:auto; font-size:.68rem; font-weight:600;
  color:var(--band-5); white-space:nowrap;
}

/* ── 지도 ── */
/* 접기 단추는 모바일 전용이다 (아래 미디어쿼리에서 켠다). */
.rail-toggle{display:none}

.map-wrap{flex:1; position:relative; min-width:0}
#map{position:absolute; inset:0; background:var(--surface-2)}
.leaflet-container{font:inherit; background:var(--surface-2)}
/* 배경 지도의 채도를 낮춰 자료가 앞에 오게 한다. 무채색 타일 서비스는
   API 키를 요구하므로 키 없이 같은 결과를 낸다. 타일 판에만 걸어야
   한다 — .leaflet-container 에 걸면 그 위의 마커·밴드까지 같이
   흐려져서 고치려던 것을 정확히 반대로 만든다. */
/* 배경 지도 — 도로 위계를 살립니다.
 *
 * 예전에는 saturate(.10) 으로 거의 흑백을 만들었습니다. 거래 점을
 * 돋보이게 하려던 것인데, 그 바람에 **OSM 이 원래 갖고 있던 도로
 * 위계 색을 우리가 지웠습니다.** 고속도로는 분홍빛 빨강, 국도는
 * 주황빛 노랑, 지방도는 연노랑으로 칠해져 오는데 전부 회색이 됐고,
 * 그래서 지도에서 고속도로가 어디인지 알 수 없었습니다. IC 주변
 * 땅값을 보는 제품에서 고속도로가 안 보이는 것은 앞뒤가 안 맞습니다.
 *
 * 이제 채도를 절반 넘게 살립니다. 그래도 거래 점이 묻히지 않는 이유는
 * 색이 아니라 **흰 테두리** 로 배경과 끊기 때문입니다 (app.js 의
 * drawTrades). 색으로 이기려 들면 배경을 계속 죽여야 하고, 그러면
 * 지도가 지도 노릇을 못 합니다. */
.leaflet-tile-pane{filter:saturate(.62) brightness(1.03) contrast(.97)}
.map-tools{
  position:absolute; top:.6rem; right:.6rem; z-index:500;
  display:flex; gap:.4rem;
}
.map-switch{
  display:flex; align-items:center; gap:.4rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:.4rem; padding:.35rem .6rem; font-size:.76rem;
  font-weight:600; color:var(--ink); box-shadow:var(--shadow);
}
.map-switch input{margin:0}

.map-legend{
  position:absolute; left:.75rem; bottom:.75rem; z-index:500;
  background:var(--surface); border:1px solid var(--border); border-radius:.45rem;
  padding:.55rem .7rem; font-size:.75rem; box-shadow:var(--shadow); display:grid; gap:.25rem;
}
/* 넓은 화면에서는 범례를 항상 펼쳐 둔다. 여는 단추는 모바일 전용이다. */
.map-legend > .legend-peek{display:none}
.map-legend > .legend-rows{display:grid; gap:.25rem}
.map-legend .row{display:flex; align-items:center; gap:.45rem; color:var(--muted)}
.map-legend .sw{width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto}
.map-legend .sw.ring{background:none; border:2px solid var(--c)}
/* 거래 스와치는 지도의 점과 같이 흰 테두리를 두른다 — 지도에서 점을
   배경과 끊어주는 것이 바로 그 테두리라, 범례에도 있어야 짝이 맞는다. */
.map-legend .sw.sw-dot{box-shadow:0 0 0 1.2px #fff, 0 0 0 2px rgba(0,0,0,.18)}
/* 매물은 지도에서 마름모다. 범례도 같은 모양이어야 눈이 잇는다.
   클래스 이름을 'listing' 으로 두면 안 된다 — 매물 카드(.listing)가
   display:grid 를 걸고 있어서 스와치가 카드 크기로 부푼다. 흔한
   이름을 재사용하면 이렇게 조용히 다른 규칙을 물려받는다. */
.map-legend .sw.sw-listing{
  background:var(--listing); border-radius:.1rem; transform:rotate(45deg);
  width:.55rem; height:.55rem;
}
.map-legend .grp{margin-top:.15rem; font-size:.68rem; color:var(--faint);
  letter-spacing:.08em; text-transform:uppercase}
.tg-marker{border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px rgba(0,0,0,.25)}
/* 확대했을 때 뜨는 영업소 이름표. 지도 위 글자는 배경이 무엇이든 읽혀야
   하므로 흰 테두리를 두른다. 말풍선 꼬리는 없앤다 — 442개가 한꺼번에
   뜨면 꼬리가 화면을 어지럽힌다. */
.leaflet-tooltip.tg-label{
  background:none; border:none; box-shadow:none; padding:0;
  font-size:.68rem; font-weight:600; color:var(--ink);
  text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.leaflet-tooltip.tg-label::before{display:none}
/* 필터 두 칸을 나란히 (거래 시작·끝) */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.field select,.field input[type=month]{
  font:inherit; font-size:.82rem; padding:.3rem .4rem; width:100%;
  border:1px solid var(--border-strong); border-radius:.35rem;
  background:var(--surface); color:var(--ink);
}
.tg-marker.is-selected{outline:3px solid var(--ink); outline-offset:1px}

/* ── 상세 패널 ── */
.detail{
  flex:0 0 var(--detail-w); overflow:auto; padding:1.1rem;
  background:var(--surface); border-left:1px solid var(--border);
}
.detail-empty{color:var(--muted); padding-top:2rem}
.detail h2{font-size:1.05rem}
.detail .sub{font-size:.78rem; color:var(--faint); margin-bottom:.85rem}
.badge{
  display:inline-block; font-size:.72rem; font-weight:600;
  padding:.14rem .5rem; border-radius:999px; color:var(--on-accent); background:var(--c);
}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:.85rem 0}
.stat{padding:.55rem .65rem; border-radius:.4rem; background:var(--surface-2)}
.stat .k{font-size:.7rem; color:var(--faint)}
.stat .v{font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums}
.stat .v.up{color:var(--q-rising)} .stat .v.down{color:var(--danger)}
.chart{margin:.5rem 0 1rem}
.chart h3{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:.3rem}
.chart svg{width:100%; height:5.5rem; display:block; overflow:visible}
.chart .axis{font-size:.62rem; fill:var(--faint)}
.detail table{width:100%; border-collapse:collapse; font-size:.8rem}
.detail th,.detail td{padding:.3rem .4rem; border-bottom:1px solid var(--border); text-align:left}
.detail thead th{font-size:.68rem; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}

/* ── 스코어보드 / 매물 공용 ── */
.board,.listings{
  max-width:76rem; margin:0 auto; padding:1.5rem 1.1rem 3rem;
  display:grid; gap:1.1rem;
}
.board{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:60rem){.board{grid-template-columns:1fr}}
.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:.6rem; padding:1.1rem 1.2rem; box-shadow:var(--shadow);
}
.panel h2{font-size:1rem}
.panel-head{display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem}
.panel-head h2{flex:1}
.count{
  font-size:.75rem; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:.1rem .45rem; border-radius:999px;
}
#board-search{
  font:inherit; font-size:.82rem; padding:.35rem .6rem; border-radius:.35rem;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
}
#matrix svg{width:100%; height:auto; display:block}
#board-table{width:100%; border-collapse:collapse; font-size:.83rem}
#board-table th,#board-table td{padding:.4rem .5rem; border-bottom:1px solid var(--border); text-align:left}
#board-table thead th{font-size:.68rem; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}
#board-table tbody tr{cursor:pointer}
#board-table tbody tr:hover{background:var(--surface-2)}
.q-tag{font-size:.72rem; font-weight:600; color:var(--c); white-space:nowrap}

/* ── 교통량 순위 (지시4) ── */
#view-rank.is-active{display:block; overflow:auto}
.rank-wrap{max-width:76rem; margin:0 auto; padding:1.5rem 1.1rem 3rem; display:grid; gap:1.1rem}
.rank-controls{display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:flex-end}
.rank-controls .field{min-width:9rem}
.rank-controls .field select,.rank-controls .field input{min-width:9rem}
.rank-note{
  font-size:.8rem; line-height:1.55; color:var(--muted);
  padding:.6rem .8rem; border-radius:.45rem;
  background:var(--surface-2); border-left:3px solid var(--accent);
}
#rank-table{width:100%; border-collapse:collapse; font-size:.85rem}
#rank-table th,#rank-table td{padding:.42rem .55rem; border-bottom:1px solid var(--border); text-align:left}
#rank-table thead th{
  position:sticky; top:0; z-index:1; background:var(--surface);
  font-size:.68rem; color:var(--faint); text-transform:uppercase; letter-spacing:.06em;
}
#rank-table td.rank{font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent)}
#rank-table tbody tr:hover{background:var(--surface-2)}
/* 막대는 값 크기를 눈으로 읽게 한다. 숫자만으로는 1위와 40위 차이가 안 보인다. */
.bar{position:relative; min-width:7rem}
.bar span{
  position:absolute; inset:.18rem auto .18rem 0; border-radius:.15rem;
  background:var(--band-4); opacity:.28;
}
.bar b{position:relative; font-weight:500; font-variant-numeric:tabular-nums}
.delta.up{color:var(--q-rising); font-weight:600}
.delta.down{color:var(--danger); font-weight:600}
.rank-scroll{max-height:32rem; overflow:auto}
.vt-table{width:100%; border-collapse:collapse; font-size:.82rem; margin-top:.4rem}
.vt-table th,.vt-table td{padding:.35rem .5rem; border-bottom:1px solid var(--border); vertical-align:top}
.vt-table th{white-space:nowrap; color:var(--ink); font-weight:600; text-align:left}
.vt-table td{color:var(--muted)}
.vt-swatch{
  display:inline-block; width:.6rem; height:.6rem; border-radius:.15rem;
  margin-right:.4rem; background:var(--c);
}

/* ── 추이 비교 ── */
#view-trend.is-active{display:block; overflow:auto}
.trend-wrap{
  max-width:76rem; margin:0 auto; padding:1.5rem 1.1rem 3rem;
  display:grid; gap:1.1rem; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
}
@media (max-width:64rem){.trend-wrap{grid-template-columns:1fr}}
.trend-controls{display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:flex-end; margin:.6rem 0 .3rem}
.trend-controls .seg{margin-bottom:0}
.chart-box{position:relative; margin:.6rem 0 .3rem}
#trend-chart{width:100%; height:20rem; display:block; overflow:visible}
#trend-chart .grid{stroke:var(--border)}
#trend-chart .axis{font-size:.68rem; fill:var(--faint)}
#trend-chart .baseline{stroke:var(--border-strong); stroke-dasharray:3 3}
#trend-chart .lead{stroke:var(--ink); stroke-width:1; opacity:.35}
#trend-chart path.series{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
#trend-chart path.series.thick{stroke-width:3}
#trend-chart path.series.dashed{stroke-dasharray:5 4}
#trend-chart circle.dot{stroke:var(--surface); stroke-width:1.5}
.chart-readout{
  position:absolute; top:.4rem; right:.4rem; z-index:2; pointer-events:none;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:.45rem;
  padding:.5rem .65rem; font-size:.76rem; box-shadow:var(--shadow); min-width:11rem;
}
.chart-readout .yr{font-weight:700; margin-bottom:.25rem}
.chart-readout .row{display:flex; align-items:center; gap:.4rem; justify-content:space-between}
.chart-readout .row b{font-variant-numeric:tabular-nums; font-weight:600}
.chart-readout .sw{width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; background:var(--c)}
.chart-readout .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trend-legend{display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.78rem; margin-top:.3rem}
.trend-legend .item{display:flex; align-items:center; gap:.35rem; color:var(--muted)}
.trend-legend .sw{width:1.1rem; height:0; border-top:2px solid var(--c); flex:0 0 auto}
.trend-legend .sw.thick{border-top-width:3px}
.trend-legend .sw.dashed{border-top-style:dashed}
.series-groups{display:grid; gap:.9rem}
.series-groups h3{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:.35rem;
}
.series-groups .opts{display:grid; gap:.25rem}
.series-opt{display:flex; gap:.5rem; align-items:center; font-size:.83rem; cursor:pointer}
.series-opt input{margin:0}
.series-opt .sw{width:.9rem; height:0; border-top:2px solid var(--c); flex:0 0 auto}
.series-opt .sw.thick{border-top-width:3px}
.series-opt .sw.dashed{border-top-style:dashed}
.series-opt.is-off{opacity:.5}
.series-opt .why{margin-left:auto; font-size:.7rem; color:var(--faint)}
.chart-empty{
  display:grid; place-content:center; min-height:12rem; text-align:center;
  color:var(--muted); font-size:.86rem; gap:.3rem; padding:1rem;
}

/* ── 매물 ── */
.listings{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:60rem){.listings{grid-template-columns:1fr}}
.notice{
  font-size:.8rem; line-height:1.55; margin-bottom:1rem;
  padding:.7rem .85rem; border-radius:.45rem;
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink);
}
.notice em{display:block; margin-top:.35rem; font-style:normal; color:var(--muted)}
.form{display:grid; gap:.7rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem}
@media (max-width:34rem){.grid-2,.grid-3{grid-template-columns:1fr}}
.form-foot{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.3rem}
.fee{flex:1; margin:0; font-size:.82rem; color:var(--muted)}
.btn{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.5rem 1.1rem; border-radius:.4rem;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn.ghost{background:none; color:var(--muted); border-color:var(--border-strong); font-weight:500}
.listing-list{display:grid; gap:.55rem}
.listing{
  display:grid; gap:.2rem; padding:.7rem .85rem;
  border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:.45rem;
}
.listing .top{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.listing .price{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums}
.listing .who{font-size:.74rem; color:var(--faint)}
.listing .memo{font-size:.8rem; color:var(--muted)}
.empty{color:var(--faint); font-size:.85rem; padding:1.5rem 0; text-align:center}

.disclaimer{
  flex:0 0 auto; padding:.6rem 1.1rem; font-size:.74rem; color:var(--faint);
  background:var(--surface); border-top:1px solid var(--border);
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.map-fallback{
  position:absolute; inset:0; display:grid; place-content:center; gap:.2rem;
  text-align:center; padding:2rem; color:var(--muted);
}
.map-fallback p{margin:0}

/* ── 인증 / 매물 (서버 연동) ── */
.seg{display:inline-flex; gap:.2rem; padding:.15rem; border-radius:.45rem;
     background:var(--surface-2); margin-bottom:.85rem}
.seg-btn{
  font:inherit; font-size:.8rem; font-weight:500; cursor:pointer;
  padding:.3rem .8rem; border-radius:.35rem;
  border:none; background:none; color:var(--muted);
}
.seg-btn.is-on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.field span em{font-style:normal; color:var(--faint)}

.who-bar{
  display:flex; align-items:flex-start; gap:1rem;
  padding-bottom:.85rem; margin-bottom:1rem; border-bottom:1px solid var(--border);
}
.who-bar > div:first-child{flex:1; min-width:0}
.who-bar strong{font-size:.95rem}

.coord-row{display:grid; grid-template-columns:1fr 1fr auto; gap:.7rem; align-items:end}
@media (max-width:34rem){.coord-row{grid-template-columns:1fr 1fr; }
  .coord-row .btn{grid-column:1 / -1}}

.form-error{
  margin:.2rem 0 0; padding:.5rem .7rem; border-radius:.35rem;
  font-size:.82rem; color:var(--danger);
  background:color-mix(in srgb, var(--danger) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.tag{
  font-size:.68rem; font-weight:600; padding:.1rem .45rem; border-radius:999px;
  border:1px solid currentColor;
}
.tag.active{color:var(--q-rising)}
.tag.pending{color:var(--q-over)}
.tag.expired{color:var(--faint)}
.listing .actions{display:flex; gap:.4rem; margin-top:.45rem}
.btn.small{padding:.28rem .7rem; font-size:.78rem}
.link{
  font:inherit; font-size:inherit; cursor:pointer; padding:0;
  background:none; border:none; color:var(--accent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
}
.link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.listing-pin{
  background:var(--listing); border:2px solid var(--surface); border-radius:.2rem;
  transform:rotate(45deg); box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
body.picking .leaflet-container{cursor:crosshair}
.pick-hint{
  position:absolute; top:.75rem; left:50%; transform:translateX(-50%); z-index:600;
  background:var(--accent); color:var(--on-accent); font-size:.82rem; font-weight:600;
  padding:.45rem .9rem; border-radius:999px; box-shadow:var(--shadow);
}

/* ── 홈으로 / 오프라인 안내 ── */
.home-link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:500; color:var(--muted); text-decoration:none;
  padding:.35rem .7rem; border-radius:.4rem; border:1px solid var(--border-strong);
  white-space:nowrap;
}
.home-link:hover{background:var(--surface-2); color:var(--ink)}
.home-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.offline-notice{
  max-width:34rem; margin:4rem auto; padding:2rem;
  text-align:center; color:var(--muted);
  background:var(--surface); border:1px solid var(--border);
  border-radius:.6rem; box-shadow:var(--shadow);
}
.offline-notice h2{font-size:1.1rem; color:var(--ink); margin-bottom:.6rem}
.offline-notice p{margin:.4rem 0}

/* ══════════════════════════════════════════════════════════════
   모바일 — 좁은 화면에서는 세로로 쌓는다.
   기본 레이아웃은 레일(16rem)+지도+상세(23rem)를 가로로 놓아
   최소 폭이 39rem(≈624px)이다. 390px 폰에서는 화면이 옆으로 밀린다.
   이벤트 페이지가 카톡으로 유통되므로 유입 대부분이 모바일이다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:56rem){
  :root{--top-h:auto}

  .topbar{
    height:auto; flex-wrap:wrap; gap:.5rem .75rem; padding:.55rem .8rem;
  }
  .brand-sub{display:none}
  .meta-stamp{display:none}
  .guide-link{margin-left:auto; font-size:.76rem; padding:.28rem .55rem}
  .tabs{order:3; width:100%; gap:.3rem}
  /* 단어 중간에서 끊기면 '추이 비 / 교' 처럼 읽힌다. 끊지 말고 넘치면
     가로로 밀어 보게 한다. */
  .tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .tab{flex:0 0 auto; text-align:center; padding:.4rem .6rem;
       font-size:.82rem; white-space:nowrap}

  /* 탐색 뷰: 레일 → 지도 → 상세 순으로 세로 배치 */
  #view-explore.is-active{flex-direction:column; overflow:auto}

  .rail{
    flex:0 0 auto; width:100%; max-height:none;
    border-right:none; border-bottom:1px solid var(--border);
    padding:.8rem .9rem;
  }
  /* 필터는 가로로 늘어놓아 세로 공간을 아낀다 */
  .rail-block{padding-bottom:.8rem; margin-bottom:.8rem}
  .quad-filters{grid-template-columns:1fr 1fr; gap:.35rem}
  .quad-btn{font-size:.78rem; padding:.35rem .45rem}
  .checks{grid-auto-flow:column; grid-auto-columns:max-content; gap:.9rem; overflow-x:auto}
  .legend{grid-template-columns:1fr 1fr}

  /* 필터를 접을 수 있게. 기본은 접힌 상태로 시작해(app.js) 지도가
     화면 위쪽에 바로 오게 한다. */
  .rail{padding:0}
  .rail-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:.6rem .9rem; background:none; border:none;
    font:inherit; font-size:.85rem; font-weight:600; color:var(--ink);
    cursor:pointer;
  }
  .rail-toggle-mark{
    width:.5rem; height:.5rem; border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted); transform:rotate(45deg);
    transition:transform .15s; margin-bottom:.2rem;
  }
  .rail[aria-hidden]{}
  .rail.is-folded .rail-toggle-mark{transform:rotate(-135deg); margin-bottom:-.2rem}
  .rail.is-folded .rail-body{display:none}
  .rail-body{padding:0 .9rem .8rem}

  /* 지도를 키운다. 접힌 상태에서 화면 대부분을 지도가 쓴다.
     dvh 는 주소창이 접혔다 펴져도 튀지 않는다 — vh 는 모바일에서
     주소창 높이를 안 빼서 아래가 잘린다. */
  .map-wrap{flex:0 0 auto; height:74dvh; min-height:24rem}

  /* 범례를 접는다. 좁은 화면에서 12줄짜리 범례는 지도의 3분의 1을
     덮는다 — 지도를 키워 놓고 그 위를 범례로 다시 가리는 셈이다.
     기본은 접힌 알약 하나, 누르면 펼친다. */
  .map-legend{
    left:.5rem; bottom:.5rem; right:auto; max-width:calc(100% - 1rem);
    padding:0; gap:0; overflow:hidden;
  }
  .map-legend > .legend-rows{display:none; padding:.5rem .7rem; gap:.25rem}
  .map-legend.is-open > .legend-rows{display:grid}
  .map-legend > .legend-peek{
    display:flex; align-items:center; gap:.4rem;
    padding:.4rem .6rem; font-size:.72rem; font-weight:600; color:var(--ink);
    background:none; border:none; font-family:inherit; cursor:pointer;
  }

  .detail{
    flex:1 1 auto; width:100%; overflow:visible;
    border-left:none; border-top:1px solid var(--border);
  }
  .detail-empty{padding-top:.5rem; text-align:center}

  /* 스코어보드·매물은 이미 grid 1열로 떨어지지만 여백만 줄인다 */
  .board,.listings{padding:1rem .9rem 2.5rem}
  .panel{padding:.9rem 1rem}
  #matrix svg{max-width:22rem; margin:0 auto}
}

/* 아주 좁은 화면 */
@media (max-width:24rem){
  .quad-filters{grid-template-columns:1fr}
  .tab{font-size:.76rem}
}

/* 누른 자리의 용도지역 말풍선.
   지도 위에 뜨는 것이라 좁게 잡는다 — 넓으면 정작 보려던 땅을 가린다. */
.zone-pop { font-size: .9rem; line-height: 1.5; }
.zone-pop b { font-size: 1rem; }
.zone-pop .muted { color: var(--muted, #7a6a58); font-size: .82rem; }


/* 거래 표식 — 영업소(원)와 **모양으로** 가른다.
   색만으로 가르면 화면에 색이 열 몇 가지가 되고, 그러면 색이 뜻을
   잃는다. 모양이 먼저 종류를 말하고 색이 토지·공장을 말한다.

   흰 테두리는 그대로 둔다. 배경이 어떤 색이든 표식을 배경에서 끊어주는
   것은 색이 아니라 테두리다. */
/* <i> 는 기본이 inline 이라 width/height 가 무시된다 — 그러면 테두리만
   남아 지도에 흰 막대가 선다. display:block 이 이 규칙의 핵심이다. */
.trade-mark { display: block; width: 100%; height: 100%; box-sizing: border-box;
              border: 1.2px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.trade-mark.trade-land { background: var(--kind-land); }
.trade-mark.trade-factory { background: var(--kind-factory); transform: rotate(45deg); }
.trade-mark.trade-warehouse { background: var(--kind-warehouse); transform: rotate(45deg); }
.trade-mark.trade-etc { background: var(--kind-etc); transform: rotate(45deg); }
/* 법정동 중심점 좌표는 ±1~2km 라 '그 자리' 가 아니다. 옅게 찍어 지번
   좌표와 구별한다 — 테두리가 있어 옅어도 보인다. */
.trade-mark.trade-coarse { opacity: .55; }
/* Leaflet 이 divIcon 에 주는 기본 배경·테두리를 지운다. */
.trade-icon { background: none; border: 0; }

/* 범례 스와치도 지도와 같은 모양이어야 한다. 지도에서는 네모인데
   범례에서는 동그라미면 눈으로 짝을 못 맞춘다.

   셀렉터를 '.map-legend .sw' 에 맞춘다. 위쪽에 .map-legend .sw{border-radius:50%}
   가 있어서, 클래스 하나짜리 규칙으로는 그것을 못 이기고 동그라미가 된다. */
.map-legend .sw.sw-trade {
  width: 11px; height: 11px; border-radius: 0; display: inline-block;
  border: 1.2px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.35);
}
.map-legend .sw.sw-trade.trade-land { background: var(--kind-land); }
.map-legend .sw.sw-trade.trade-factory {
  background: var(--kind-factory); transform: rotate(45deg) scale(.82);
}
.map-legend .sw.sw-trade.trade-warehouse {
  background: var(--kind-warehouse); transform: rotate(45deg) scale(.82);
}
.map-legend .sw.sw-trade.trade-etc {
  background: var(--kind-etc); transform: rotate(45deg) scale(.82);
}

/* ── 세 가설 판정 ──
   판정 딱지에 색을 준다. 다만 색만으로 뜻을 말하지 않는다 — 딱지에
   '지지'·'아직 모름' 이라는 **글자**가 그대로 들어 있다. 색약이거나
   흑백으로 인쇄해도 뜻이 살아야 한다. */
#view-verdict.is-active{display:block; overflow:auto}
.verdict-wrap{
  max-width:64rem; margin:0 auto; padding:1.5rem 1.1rem 3rem;
  display:grid; gap:1.1rem;
}
.verdict-cards{display:grid; gap:.85rem; margin-top:.9rem}
.verdict-card{
  border:1px solid var(--border); border-left:4px solid var(--c, var(--border-strong));
  border-radius:.5rem; padding:.85rem 1rem; background:var(--surface);
}
.verdict-card.is-ok{--c:var(--q-rising)}
.verdict-card.is-no{--c:var(--danger)}
.verdict-card.is-warn{--c:var(--q-over)}
.verdict-card.is-unknown{--c:var(--q-quiet)}
.verdict-card header{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.verdict-card header b{font-size:.95rem}
.verdict-badge{
  font-size:.74rem; font-weight:700; white-space:nowrap;
  padding:.14rem .55rem; border-radius:999px;
  color:var(--on-accent); background:var(--c, var(--q-quiet));
}
.verdict-badge.is-ok{--c:var(--q-rising)}
.verdict-badge.is-no{--c:var(--danger)}
.verdict-badge.is-warn{--c:var(--q-over)}
.verdict-badge.is-unknown{--c:var(--q-quiet)}
.verdict-card .claim{margin:.45rem 0 .2rem; font-size:.86rem; color:var(--muted)}
.verdict-card .why{margin:.2rem 0 .6rem; font-size:.86rem; color:var(--ink)}
.verdict-card .vt-table{margin-top:.2rem}

/* 경고는 표보다 위에 둔다. 사람은 먼저 본 숫자를 기억한다. */
.verdict-flag{
  margin:.5rem 0; padding:.55rem .75rem; border-radius:.4rem;
  font-size:.82rem; line-height:1.55;
  border:1px solid var(--c); color:var(--ink);
  background:color-mix(in srgb, var(--c) 10%, transparent);
}
.verdict-flag.is-ok{--c:var(--q-rising)}
.verdict-flag.is-no{--c:var(--danger)}
.verdict-flag.is-warn{--c:var(--q-over)}

/* 95% 구간이 0 을 품으면 '말할 수 없다' 다. 계수 부호만 보고 읽지
   않도록 두 경우를 눈으로 갈라 둔다. */
.ci-away{font-variant-numeric:tabular-nums; font-weight:600}
.ci-null{font-variant-numeric:tabular-nums; color:var(--faint)}
.ci-null::after{content:' (0 포함)'; font-size:.72rem}

/* 인구 원의 색과 범례는 원과 함께 사라졌다 (2026-09-08).
   인구는 이제 땅값 글자 옆의 (XX만) 이다 — .lp-card b em. */

/* 판정 '관계 있음(상관)' — 초록(지지)과 반드시 달라야 한다. 있는 것은
   맞지만 인과가 아니라서, 같은 색을 주면 읽는 사람이 구별할 방법이 없다. */
.verdict-card.is-corr{--c:var(--accent)}
.verdict-badge.is-corr{--c:var(--accent); color:var(--ink)}
.verdict-flag.is-corr{--c:var(--accent)}
/* 계수가 '잡을 수 있는 최소' 보다 작은 줄. 이 줄의 계수는 크기를 읽으면
   안 된다 — 표본이 그만큼을 못 가른다.

   셀렉터를 '.vt-table td' 에 맞춘다. 위에 .vt-table td{color:var(--muted)}
   가 있어서, 클래스 하나짜리로는 그것을 못 이기고 회색으로 남는다.
   검사가 '검정만 아니면 통과' 라 이걸 놓칠 뻔했다 — 그래서 검사도
   --danger 와 같은 색인지 재도록 고쳤다. */
.vt-table td.mde-weak{color:var(--danger); font-weight:700}

/* ── 거래 상세 말풍선 ──
   지도에 점만 있으면 얼마에 팔렸는지를 알 수 없어 스크리닝에 못 쓴다.
   눌렀을 때 값·면적·평당가·용도지역이 한 번에 보여야 한다. */
.trade-popup .leaflet-popup-content { margin: 12px 14px; }
.trade-pop { font-size: 13px; line-height: 1.5; }
.pop-kind {
  font-weight: 800; font-size: 11.5px; letter-spacing: .04em;
  margin: 0 0 2px; color: var(--kind-land);
}
.pop-kind.is-factory { color: var(--kind-factory); }
.pop-kind.is-warehouse { color: var(--kind-warehouse); }
.pop-kind.is-etc { color: var(--kind-etc); }
.pop-addr { margin: 0 0 8px; font-weight: 700; font-size: 13.5px; }
.pop-table { border-collapse: collapse; width: 100%; }
.pop-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  padding: 2px 10px 2px 0; white-space: nowrap; vertical-align: top;
}
.pop-table td { padding: 2px 0; text-align: right; font-variant-numeric: tabular-nums; }
.pop-table .mut { color: var(--muted); font-weight: 400; }
.pop-warn {
  margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--line);
  color: var(--danger); font-size: 11.5px; line-height: 1.45;
}

/* ── 땅값 분위지도 막대 (2026-09-08 지시) ──
   지도 아래에 붙인다. 연도를 밀면서 색이 어떻게 변하는지 보는 것이
   이 화면의 전부라, 손가락이 닿는 자리에 있어야 한다. */
.land-price-bar {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem; z-index: 500;
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end;
  padding: .55rem .7rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); font-size: .8rem;
}

/* 호갱노노식 필터 칩 (사장님 지시 2026-09-08).
   <select> 를 안 쓰는 이유 — 휴대폰의 <select> 는 굴림판이 화면 바닥에서
   올라오고, 열기 전에는 무엇을 고를 수 있는지 안 보이며, optgroup 이
   기기마다 다르게 그려진다. 칩은 지금 고른 값을 늘 보여준다. */
.lp-chips { display: flex; flex-wrap: wrap; gap: .4rem; flex-basis: 100%; }
.lp-filter { position: relative; }
.lp-pill {
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); white-space: nowrap;
}
.lp-pill::after { content: ' ⌄'; color: var(--muted); font-weight: 400; }
.lp-pill[aria-expanded="true"] { border-color: #3B73C4; color: #123B7A; background: #EEF4FC; }
.lp-menu {
  position: absolute; bottom: calc(100% + .35rem); left: 0; z-index: 600;
  min-width: 9rem; padding: .3rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.lp-menu-head {
  font-size: .7rem; font-weight: 800; color: var(--muted);
  padding: .35rem .5rem .15rem; letter-spacing: .02em;
}
.lp-opt {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: .35rem .6rem; border: 0; border-radius: 7px;
  background: none; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.lp-opt:hover { background: #EEF4FC; }
.lp-opt.is-on { background: #3B73C4; color: #fff; font-weight: 700; }

.land-price-bar .hint { flex-basis: 100%; margin: 0; }
/* 이 화면에 더 맞는 용도지역이 있을 때 뜨는 단추.
   서울을 계획관리로 보면 지도가 비는데, 자연녹지로 바꾸면 바로 보인다.
   그것을 사람이 스스로 알아내게 두지 않는다. */
.lp-swap {
  flex-basis: 100%; text-align: left; font: inherit; font-weight: 700;
  padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
  border: 1px solid #3B73C4; background: #EEF4FC; color: #123B7A;
}
.lp-swap:hover { background: #DCE9F8; }
@media (max-width: 640px) {
  .land-price-bar { font-size: .75rem; gap: .4rem .5rem; }
  .land-price-bar .field { min-width: 6rem; }
}

/* 땅값 표찰 — 호갱노노식 사각형 (사장님 지시 2026-09-08).
 *
 * 알약 하나에 '이름 값' 을 나란히 쓰면 이름이 길수록 표찰이 옆으로
 * 늘어나 서로 겹친다. 사각형에 **이름을 위, 값을 아래**로 두면 폭이
 * 이름 길이에만 매이고, 눈은 값만 훑을 수 있다.
 *
 * divIcon 은 기본으로 흰 네모 테두리를 갖는다. 그것을 지우고 크기도
 * 내용에 맡긴다 — 값마다 자릿수가 달라서 고정폭을 주면 잘리거나 뜬다. */
.lp-card-wrap { background: none; border: 0; width: auto !important; height: auto !important; }
.lp-card {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 2px 8px 3px; border-radius: 6px;
  line-height: 1.25; color: #fff; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 3px rgba(16, 32, 64, .35);
  transform: translate(-50%, -50%);
}
.lp-card b { font-size: 10.5px; font-weight: 600; opacity: .95; }
.lp-card i { font-size: 12.5px; font-weight: 800; font-style: normal; }
/* 단위. 값만 있으면 평인지 ㎡인지 알 수 없다 — 두 글자로 그 오독을 막는다.
   <u> 기본 밑줄은 지운다. */
.lp-card u { text-decoration: none; font-size: 9.5px; font-weight: 600; opacity: .85; }

/* 말풍선 — 값 하나가 아니라 **읽을 거리**를 담는다.
   같은 평당 80만원이라도 3년째 오르는 80만과 꺾여 내려온 80만은
   다른 물건이다. 그래서 최근 추이를 함께 그린다. */
.leaflet-tooltip.lp-tip {
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); font-size: 12px; line-height: 1.45;
  max-width: 15rem; white-space: normal;
}
.lp-tip-h { font-weight: 800; }
.lp-tip-h em { font-style: normal; font-weight: 500; color: var(--muted); }
.lp-tip-v { margin-top: 2px; }
.lp-tip-v b { font-size: 14.5px; color: #123B7A; }
/* ㎡ 단가는 평단가 **아랫줄**로 (사장님 지시 2026-09-08). 한 줄에 두 값을
   이어 놓으면 어느 숫자가 어느 단위인지 눈이 못 잡는다. */
.lp-tip-v2 { color: var(--muted); font-size: 11.5px; margin-bottom: 1px; }
.lp-tip-v em { font-style: normal; color: var(--muted); font-size: 11px; }
.lp-tip-m { color: var(--muted); font-size: 11px; }
.lp-spark { display: block; margin: 5px 0 2px; }
.lp-spark em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.lp-tip-g {
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line);
  font-size: 11px;
}
.lp-tip-g em { font-style: normal; color: var(--muted); }
.lp-tip-n { margin-top: 3px; font-size: 10.5px; color: var(--muted); }

/* 필지 특성. 도로접은 값을 가장 크게 가르는 칸이라(실측 +66~67%)
   글자만 적어 두면 눈에 안 들어온다. 작은 표를 하나 붙인다. */
.road-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  line-height: 1.6; white-space: nowrap;
}
.road-tag.is-ok { background: var(--q-rising); color: #fff; }
.road-tag.is-no { background: var(--q-quiet); color: #fff; }

/* '조사 안 됨' 을 경고색으로 칠하지 않는다. 잘못된 자료가 아니라
   아직 안 받은 자료다. */
.pop-note {
  margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; line-height: 1.45;
}

/* 물음표 원 — 설명을 접어 두는 단추 (사장님 지시 2026-09-08).
   제목 옆에 붙어 있어야 '이 항목의 설명' 으로 읽힌다. 따로 떨어뜨리면
   그것 자체가 또 하나의 못 알아볼 표시가 된다.

   **이름을 .why 로 지으면 안 된다.** 그 이름은 이미 두 곳이 쓰고 있다 —
   가설 판정 카드의 근거 문단(.verdict-card .why)과 추이 비교의 계열
   설명(.series-opt .why). 둘 다 우리 규칙의 box 부분을 그대로 물려받아
   16px 동그라미가 된다. 흔한 이름을 재사용하면 이렇게 조용히 다른 곳을
   부순다 — 이 저장소에서 .listing 으로 이미 한 번 겪었다. */
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.info-dot:hover { border-color: #3B73C4; color: #3B73C4; }
.info-dot.is-on { background: #3B73C4; border-color: #3B73C4; color: #fff; }
.info-pop {
  margin: 6px 0 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
.info-pop p { margin: 0; }
.info-pop p + p { margin-top: 6px; }
.info-pop strong { color: var(--ink); }

/* ── 토지 필터 (개발단계 · 용도지역) ── */
.rail-sub {
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  margin: 16px 0 6px; color: var(--ink);
}
.mini-btn {
  font: inherit; font-size: 11.5px; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.mini-btn:hover { border-color: var(--border-strong); color: var(--ink); }
/* 용도지역이 25종이라 그대로 늘어놓으면 옆판이 통째로 밀린다.
   접어 두고 안에서 굴린다. */
.scroll-box { max-height: 190px; overflow-y: auto; padding-right: 4px; }
.checks .n { color: var(--muted); font-weight: 400; font-size: 11.5px; }


/* ── 필지 진단 카드 (2026-09-08 방향 전환) ──
   "어떤 토지이든 나쁜 토지는 없다. 어떤 방향으로 개발할 지가 문제다."

   레이더는 넓이를 점수로 읽히게 두면 안 된다 — 축 순서만 바꿔도 넓이가
   달라진다. 그래서 면은 옅게 깔고, 축마다 백분위와 원값을 글자로 적는다. */
.parcel-card { font-size: 13px; }
.pc-head { display: flex; align-items: baseline; gap: .5rem; }
.pc-head b { font-size: 15px; }
.pc-head span { color: var(--muted); font-size: 12px; }
.pc-size { color: var(--muted); font-size: 12.5px; margin-bottom: .4rem; }
.pc-size em { font-style: normal; }
.radar { display: block; margin: .2rem auto .5rem; overflow: visible; }
.pc-axes { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pc-axes th {
  text-align: left; font-weight: 600; padding: 3px 8px 3px 0; white-space: nowrap;
}
.pc-axes td { padding: 3px 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-axes td.raw {
  text-align: right; color: var(--muted); font-size: 11.5px;
  padding-left: 8px; font-variant-numeric: normal;
}
.pc-axes em { font-style: normal; color: var(--faint); }
.pc-peer {
  margin: .55rem 0 0; padding-top: .5rem; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}
.pc-note { margin: .35rem 0 0; font-size: 11px; color: var(--faint); line-height: 1.5; }


/* ── 큰 분류 셋 + 왼쪽 칸 (사장님 지시 2026-09-08) ──
   "왼쪽 필터를 큰 분류별로 묶어주세요 (호갱노노 참조).
    실거래 표시 / IC / 실거래 가격 으로 묶어주고,
    선택하면 하단에 현재 필터들을 선택할 수 있도록"
   그리고 뒤이어:
   "왼쪽 위에 (+)(-)와 필터가 겹칩니다. 클릭 시 화면 아래로 표시되는데
    이건 왼쪽으로 기존 처럼 옮겨주세요."

   처음에는 지도 위에 칩을 띄우고 아래에서 시트를 올렸는데 둘 다
   문제였다 — 칩이 Leaflet 의 +/- 단추와 겹쳤고, 시트는 지도의 아래쪽을
   덮었다. 지도 **밖**의 왼쪽 칸으로 옮기면 둘 다 없어진다.

   닫혀 있을 때는 칩 줄만큼만 좁다. 열면 필터 폭으로 벌어진다. */
.side {
  flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0;
  width: 8.2rem; background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width .15s;
}
.side.is-open { width: 17rem; }
.cat-bar {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .6rem; border-bottom: 1px solid var(--border);
}
.cat {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: .45rem .7rem; border-radius: .45rem; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong);
}
.cat:hover { border-color: #3B73C4; }
.cat.is-on { background: #3B73C4; border-color: #3B73C4; color: #fff; }

.sheet { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .7rem .4rem; border-bottom: 1px solid var(--border);
}
.sheet-head b { font-size: .88rem; }
.sheet-close {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: none; border: 0; color: var(--accent); padding: .2rem .3rem;
}
.sheet-body { overflow: auto; padding: .7rem; }
.sheet-pane h3 {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: .9rem 0 .45rem;
}
.sheet-pane h3:first-child { margin-top: 0; }

/* 연도 범위 — 좌/우 손잡이 (호갱노노 참조).
   <input type=range> 둘을 겹쳐 놓는다. 위에 놓인 것이 누름을 다 먹으므로
   트랙은 pointer-events 를 끄고 손잡이만 살린다. */
.year-range { margin-bottom: .3rem; }
.year-range output {
  display: block; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.yr-track { position: relative; height: 26px; }
.yr-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  border-radius: 2px; background: var(--surface-2);
}
.yr-fill {
  position: absolute; top: 11px; height: 4px; border-radius: 2px;
  background: #3B73C4;
}
.yr-track input[type=range] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%;
  margin: 0; padding: 0; height: 26px;
  -webkit-appearance: none; appearance: none;
  background: none; pointer-events: none;
}
.yr-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid #3B73C4; cursor: pointer;
  box-shadow: 0 1px 3px rgba(16,32,64,.3);
}
.yr-track input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid #3B73C4; cursor: pointer;
}

/* 좁은 화면에서는 왼쪽 칸이 위로 올라가 가로로 눕는다 — 세로로 두면
   지도가 오른쪽 조각으로 남는다. */
@media (max-width: 56rem) {
  #view-explore.is-active { flex-direction: column; }
  .side, .side.is-open { width: 100%; border-right: none;
    border-bottom: 1px solid var(--border); }
  .cat-bar { flex-direction: row; }
  .cat { flex: 1; text-align: center; font-size: .78rem; }
  .sheet-body { max-height: 44vh; }
  .map-wrap { flex: 1 1 auto; min-height: 24rem; }
}

/* 땅값 글자의 용도지역 칸 — **법령 구조 그대로** (사장님 지시 2026-09-09).

     국토계획법 §36①  도시지역 / 관리지역 / 농림지역 / 자연환경보전지역
     시행령 §30①      주거·상업·공업·녹지
     같은 법 §38       개발제한구역은 용도구역

   class="checks" 를 뺐다. 그 클래스가 좁은 화면에서
   grid-auto-flow:column 을 걸어 두는데, 여기 grid-template-columns 와
   만나면 칸이 **옆으로** 흐른다 — 머리글이 첫 칸에 세로로 눕고
   상업지역이 관리지역 줄에 붙어 보였다. id 로 이겨도 auto-flow 는
   그대로 상속되므로, 클래스를 떼는 것이 맞는 고침이다. */
#lp-groups { display: block; margin-bottom: .5rem; }

/* 대분류는 줄을 긋는다 — 법의 네 칸이 눈에 먼저 들어와야 한다. */
.zone-major {
  margin: .55rem 0 .15rem; padding-bottom: .12rem;
  border-bottom: 1px solid var(--border-strong, var(--border));
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
}
.zone-major:first-child { margin-top: 0; }
/* 중분류(주거·상업·공업·녹지)는 한 단 들여쓴다. */
.zone-middle {
  margin: .3rem 0 .12rem .1rem;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
}
.zone-row {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-flow: row; gap: .2rem;
}

.zone-opt {
  display: flex; align-items: center; gap: .35rem;
  padding: .22rem .3rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--fg);
  font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
}
.zone-opt span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 켠 칸. **색만으로 알리지 않는다** — 테두리를 굵게 하고 배경을 바꾼다.
   색약인 사람에게 켠 것과 끈 것이 같아 보이면 안 된다. */
.zone-opt[aria-pressed="true"] {
  border-color: var(--accent); border-width: 2px;
  padding: calc(.22rem - 1px) calc(.3rem - 1px);
  background: var(--accent-soft);
  font-weight: 700;
}
.zone-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 범례 색칸. 무늬는 zoneSwatch() 가 겹배경으로 넣는다. */
.zone-sw {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid rgba(0,0,0,.28);
}

/* '왜 이 칸인가'. 사유가 있는 것에만 붙는다 — 기타·용도구역·세분 없음. */
.zone-why {
  margin-left: auto; flex: 0 0 auto;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--border-strong, var(--border));
  font-size: 9px; font-weight: 700; line-height: 11px; text-align: center;
  color: var(--muted);
}
.zone-note {
  margin: .1rem 0 .5rem; padding: .35rem .45rem;
  border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0;
  background: var(--accent-soft);
  font-size: 11px; line-height: 1.45;
}

/* 이름 옆 인구. **아주 작게** (사장님 지시) — 값이 주인공이고 인구는
   그 값을 읽는 맥락이다. 같은 크기로 적으면 둘이 경쟁한다. */
.lp-card b em {
  font-style: normal; font-weight: 500; font-size: 8.5px;
  opacity: .78; margin-left: .18em;
}


/* ─── 지역 검색 ──────────────────────────────────────────────────────
   **머리띠로 올라왔다** (사장님 지시 2026-09-09: "검색해서 찾는 것을
   A(토지·건축 가이드) 삭제 후 이동"). 지도 위에 얹었더니 지도의 윗줄을
   먹었고, 탭을 옮기면 사라졌다. 여기 있으면 지도가 그만큼 넓어진다. */
.map-find { position: relative; min-width: 0; }
#find-q {
  width: min(20rem, 42vw); box-sizing: border-box;
  padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .8rem;
}
#find-q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 목록은 머리띠 밖으로 흘러야 한다. 안에 가두면 잘린다. */
.find-list {
  position: absolute; z-index: 900; top: calc(100% + .25rem); right: 0;
  width: min(22rem, 80vw);
  margin: 0; padding: .2rem; list-style: none;
  max-height: 15rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.find-list li {
  display: flex; align-items: baseline; gap: .35rem;
  padding: .28rem .4rem; border-radius: 5px; cursor: pointer;
  font-size: .8rem;
}
.find-list li.is-on, .find-list li:hover { background: var(--accent-soft); }
.find-list li b { font-weight: 700; }
.find-list li span { color: var(--muted); font-size: .7rem; }
.find-list li em {
  margin-left: auto; font-style: normal; font-size: .65rem;
  color: var(--faint); white-space: nowrap;
}
.find-none { color: var(--muted); cursor: default; display: block; }
.find-none em { font-style: normal; font-size: .68rem; color: var(--faint); }

/* 가이드는 화면 제일 아래 (사장님 지시 2026-09-09). */
.page-foot {
  padding: 0 1rem 2rem; text-align: center;
}
.page-foot .guide-link { font-size: .8rem; }

/* 상세 패널은 고를 때만. 안 고른 화면에서는 지도가 전부를 쓴다. */
.detail[hidden] { display: none; }

/* ─── 5분위 눈금 (사장님 지시 2026-09-09, 2번) ───────────────────────
   왼쪽 아래. 오른쪽 아래는 Leaflet 출처 표시 자리다. */
.lp-scale {
  position: absolute; z-index: 610;
  left: .6rem; bottom: .6rem; width: 12.5rem;
  padding: .35rem .45rem;
  border: 1px solid var(--line); border-radius: 7px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 1px 5px rgba(0,0,0,.14);
  pointer-events: none;
}
.lps-h { font-size: 10.5px; font-weight: 700; margin-bottom: .22rem; }
.lps-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; }
.lps-cell { flex: 1 1 0; }
/* 눈금 여섯 개를 다섯 칸의 **경계**에 세운다. 칸 가운데에 놓으면
   '이 색이 이 값' 으로 읽혀 경계값이 사라진다. */
.lps-ticks {
  display: flex; justify-content: space-between;
  margin-top: .12rem; font-size: 8.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lps-ticks span { flex: 1 1 0; text-align: center; }
.lps-ticks span.is-first { text-align: left; }
.lps-ticks span.is-last { text-align: right; }
.lps-note { margin-top: .18rem; font-size: 9px; color: var(--faint); }

@media (max-width: 760px) {
  /* 좁은 화면에서는 눈금이 지도의 절반을 먹는다. 글자만 남긴다. */
  .lp-scale { width: 10.5rem; }
  .lps-ticks { font-size: 8px; }
  /* 머리띠가 좁으므로 검색칸이 한 줄을 통째로 쓴다. */
  .map-find { flex: 1 1 100%; order: 9; }
  #find-q { width: 100%; }
  .find-list { right: auto; left: 0; width: 100%; }
}

/* ── 태그 셋째 줄: 지금 N / 오늘 M명 ──────────────────────────
   사장님 지시(2026-09-09 2차). 값보다 **작고 흐리게** 둔다 — 이
   화면의 주인공은 땅값이고, 조회수는 곁들이는 숫자다. 값과 같은
   무게로 적으면 눈이 어디를 봐야 할지 모른다. */
.lp-card s {
  text-decoration: none;
  font-size: 8.5px; font-weight: 500; opacity: .8;
  margin-top: 1px; letter-spacing: -.01em;
}

/* 주간 1등 별표. 시·군 안에서 하나뿐이라 눈에 띄어야 하지만,
   이름을 밀어내면 안 된다. */
.lp-card b mark {
  background: none; color: #FFD874;
  font-size: 10px; margin-right: .12em;
  text-shadow: 0 0 2px rgba(0, 0, 0, .45);
}