* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  background: #f5f5f0;
  color: #1a1a1a;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 머리줄은 연한 초록 바탕이다. 검정이었을 때는 이름 옆 아이콘(초록 타일)이 바탕에 묻혀 2.8:1이었고
   작은 글씨도 잘 안 읽혔다. 아이콘과 같은 계열의 밝은 바탕이면 아이콘은 5.1:1로 서고,
   글자는 가장 흐린 것(만든이)도 5.2:1 — WCAG AA 4.5:1 위다. */
header {
  background: #e3ebdd;
  color: #1a1a1a;
  border-bottom: 1px solid #b9c9b1;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* 이름만으로는 무엇을 주는 도구인지 알 수 없다. 헤더가 한 줄 flex라
   이름 옆에 붙인다 — 높이가 그대로라 아래 레이아웃이 밀리지 않는다.
   좁아지면 이것만 줄어들고 버전 배지는 남는다. 배지는 '안 되는데요'를
   받았을 때 어느 버전인지 묻는 수단이라 잘리면 안 된다. */
header span.tagline {
  font-size: 13px;
  font-weight: 400;
  color: #465643;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 이름 옆의 아이콘. 파비콘과 같은 그림이다. */
header .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
header .brand img { display: block; width: 28px; height: 28px; }

/* 자매 사이트(plotscape)와 사용법. 오른쪽으로 민다.
   새 탭으로 연다 — 같은 탭이면 지도와 입력해 둔 주소가 사라진다.
   앱이 서버 밖을 '부르는' 것이 아니라 사용자가 눌러야 열리는 링크다(CLAUDE.md 4번). */
header .links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
header .links a {
  color: #1f3a1b;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
header .links a b { font-weight: 700; }
header .links a:hover { text-decoration: underline; }
header .links a[aria-current="page"] { font-weight: 700; }

header span.badge {
  flex-shrink: 0;
  background: #3d6b35;
  color: #fff;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 5px;
}

.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.panel {
  width: 320px;
  background: #fff;
  border-right: 1px solid #d4d2cb;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex-shrink: 0;
}

/* ── 패널 구역 ──
   무엇을 그릴지(대상) · 어떻게 보일지(도면) · 내보내기. 셋을 눈으로
   갈라 놓지 않으면 어느 설정이 어디에 딸린 것인지 보이지 않는다. */
.pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e2e0d9;
  border-radius: 8px;
  background: #fdfdfb;
}
.pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.pane-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3d6b35;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.pane-note {
  font-size: 11px;
  color: #8a8577;
  line-height: 1.6;
}
/* 없어도 도면은 나온다는 표시 */
.pane-opt {
  padding: 1px 5px;
  border-radius: 3px;
  background: #ebe9e3;
  font-size: 10px;
  font-weight: 400;
  color: #8a8577;
}
/* 단계마다 지금까지 무엇이 잡혔는지 */
.pane-state {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: #3d6b35;
}
/* 아직 할 수 없는 일이 할 수 있는 일처럼 보이면 안 된다.
   막지는 않는다 — 축척이나 레이어는 미리 골라 둬도 된다. */
.pane.off {
  opacity: 0.5;
}
.pane.off .pane-num {
  background: #b5b2a8;
}
/* 흐름(①②③)이 아니라 도면이 생긴 뒤에 만지는 도구 */
.pane.tool {
  border-style: dashed;
  background: #fff;
}

/* ── 지도 클릭 모드 ──
   토글은 ①(위치 찍기)과 ③(필지 선택)에 나뉘어 있고 상태는 하나다.
   한 쌍으로 묶어 두면 서로 다른 두 단계에 걸쳐 어디에도 속하지 못한다. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1px solid #d4d2cb;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: #3d3d3a;
  cursor: pointer;
}
.chip:hover:not(:disabled) { border-color: #888; }
.chip:disabled {
  opacity: 0.45;
  cursor: default;
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #b5b2a8;
  background: #fff;
}
.chip.active {
  border-color: #3d6b35;
  background: #f1f6ef;
  color: #2c4d26;
  font-weight: 600;
}
.chip.active .chip-dot {
  border-color: #3d6b35;
  background: #3d6b35;
  box-shadow: inset 0 0 0 2px #f1f6ef;
}

.field label {
  display: block;
  font-size: 12px;
  color: #6b6a65;
  margin-bottom: 6px;
  font-weight: 500;
}
.field label .hint {
  font-weight: 400;
  color: #a09e97;
}

.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d2cb;
  border-radius: 6px;
  font-size: 14px;
  background: #fafaf7;
  outline: none;
  transition: border-color 0.15s;
}
.field input[type="text"]:focus,
.field textarea:focus {
  border-color: #3d6b35;
  background: #fff;
}
/* 주소를 찾는 동안은 잠근다. 끝난 요청이 그 사이 붙여넣은 새 목록을
   덮어쓰면, 화면에는 새 목록이 보이는데 그려지는 것은 옛 주소가 된다. */
.field textarea.busy {
  background: #f2f1ec;
  color: #8a8577;
  cursor: progress;
}

/* 여러 줄 주소 — 붙여넣은 목록을 한눈에 보게 줄바꿈을 살린다 */
.field textarea {
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 84px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* ── 못 찾은 주소 ──
   잘 찾은 줄은 '대상 필지' 목록에 있다. 여기는 문제가 있는 줄만. */
.input-report {
  border: 1px solid #e2c8c8;
  border-radius: 6px;
  background: #fdf6f6;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
}
.report-head {
  font-weight: 600;
  color: #791f1f;
  margin-bottom: 4px;
}
.report-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid #f0e0e0;
  color: #6b6a65;
}
.report-query {
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-why {
  flex-shrink: 0;
  color: #a32d2d;
}
.report-item.locatable {
  cursor: pointer;
}
.report-item.locatable:hover {
  background: #f8ecec;
}

.scale-group,
.basemap-group {
  display: flex;
  gap: 6px;
}
/* 축척 계단이 7개라 한 줄에 다 들어가지 않는다 */
.scale-group {
  flex-wrap: wrap;
}
.scale-group button,
.basemap-group button {
  flex: 1 1 56px;
  padding: 8px 0;
  border: 1px solid #d4d2cb;
  border-radius: 6px;
  background: #fafaf7;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: #3d3d3a;
}
.scale-group button.active,
.basemap-group button.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.scale-group button:hover:not(.active),
.basemap-group button:hover:not(.active) {
  border-color: #888;
}

.btn-fit {
  margin-top: 6px;
  width: 100%;
  padding: 8px 0;
  border: 1px solid #d4d2cb;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #3d3d3a;
}
.btn-fit:hover:not(:disabled) {
  border-color: #888;
}
.btn-fit:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── 레이어 그룹 ── */
/* 큰 덩어리 둘(지적선·건물)만 먼저 보이고, 세부는 펼쳐서 본다 */
.layer-group {
  border: 1px solid #d4d2cb;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.layer-group + .layer-group {
  margin-top: 6px;
}
.layer-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  background: #fafaf7;
  list-style: none;
  user-select: none;
}
.layer-group summary::-webkit-details-marker {
  display: none;
}
/* 펼침 표시 — 오른쪽 끝에서 회전한다 */
.layer-group summary::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #8a8577;
  border-bottom: 1.5px solid #8a8577;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}
.layer-group[open] summary::after {
  transform: rotate(-135deg);
}
.layer-group summary:hover {
  background: #f2f1ec;
}
.group-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.group-note {
  font-size: 11px;
  color: #8a8577;
}
.group-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px 10px 32px;
  border-top: 1px solid #ebe9e3;
}
.items-sub {
  margin-top: 3px;
  font-size: 11px;
  color: #8a8577;
}
/* 그룹이 꺼져 있으면 안쪽은 아무 효과가 없다 — 눌리기는 하되 흐리게 */
.layer-group.off .group-items {
  opacity: 0.4;
}
.layer-group.off .group-name {
  color: #8a8577;
}
/* 도면으로 옮길 수 없는 것 표시 */
.tag {
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #ebe9e3;
  font-size: 10px;
  color: #6b6a65;
}

.group-items label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #3d3d3a;
  cursor: pointer;
  user-select: none;
}
.group-items input,
.layer-group summary input {
  accent-color: #3d6b35;
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: #3d6b35;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #2d5028; }
.btn-primary:disabled {
  background: #b4b2a9;
  cursor: not-allowed;
}

.download-group {
  display: flex;
  gap: 6px;
}
.btn-download {
  flex: 1;
  padding: 10px;
  border: 1px solid #d4d2cb;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  color: #3d3d3a;
}
.btn-download:hover { border-color: #3d6b35; color: #3d6b35; }
.btn-download:disabled { opacity: 0.4; cursor: not-allowed; }

.status {
  font-size: 12px;
  color: #6b6a65;
  min-height: 18px;
  line-height: 1.5;
}
.status.error { color: #a32d2d; }

.divider {
  border: none;
  border-top: 1px solid #e8e6df;
}

.info-box {
  background: #fafaf7;
  border: 1px solid #e8e6df;
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
  color: #6b6a65;
  line-height: 1.6;
}
.info-box.warn {
  border-color: #e2c8c8;
  background: #fdf6f6;
  color: #791f1f;
}

/* 도움말 — 레이어 그룹과 같은 접힘 방식이라 UI 어휘가 하나로 맞는다 */
.help {
  border: 1px solid #e8e6df;
  border-radius: 6px;
  background: #fafaf7;
}
.help summary {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6b6a65;
  cursor: pointer;
  user-select: none;
}
.help-body {
  padding: 0 12px 12px;
  font-size: 12px;
  color: #6b6a65;
  line-height: 1.6;
}

.map-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* 지도와 도면(A4 미리보기)은 같은 범위의 두 가지 보기라 탭 줄이 아니라 스위치다.
   머리줄의 화면 탭(도면 뽑기 · 답사 묶음)과 모양이 겹치지 않게 하고, 탭 줄만큼(약 40px) 지도가 넓어진다.
   지도 왼쪽 위에 얹는다 — 확대·축소가 오른쪽 아래로 가서 이 자리가 비었다. */
.view-switch {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid #d4d2cb;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.view-switch button {
  padding: 5px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: #3b4e37;
  cursor: pointer;
}
.view-switch button:hover:not(:disabled):not(.active) { background: #ebf0e7; }
.view-switch button.active {
  background: #3d6b35;
  color: #fff;
  font-weight: 600;
}
.view-switch button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.view-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
/* 지금 지도를 누르면 무엇이 되는가 — 지도 자신이 말하게 한다. 왼쪽 아래다(위는 스위치, 오른쪽 아래는 확대·축소와 표제란).
   bottom 28px은 오른쪽 아래 확대·축소 버튼의 바닥과 같은 높이다(Leaflet 저작권 표시 18px + 여백 10px). */
.map-badge {
  position: absolute;
  bottom: 28px;
  left: 12px;
  z-index: 500;
  padding: 5px 11px;
  border: 1px solid #d4d2cb;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  font-size: 12px;
  color: #3d3d3a;
  pointer-events: none;
}
.map-badge:empty,
#map[hidden] ~ .map-badge {
  display: none;
}
/* 빈 지도 한가운데의 소개 카드. 스위치·배지·확대·축소가 모서리에 있어 가운데는 비어 있다.
   잠깐 띄우는 안내라 패널 글자(12~13px)보다 크지 않게. 사용법 링크 말고는 클릭과 휠을
   밑의 지도로 흘려보낸다 */
.map-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  width: min(360px, calc(100% - 32px));
  padding: 14px 16px;
  border: 1px solid #d4d2cb;
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  font-size: 12px;
  line-height: 1.6;
  color: #3d3d3a;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}
.map-intro p { margin: 0; }
/* 지도에서 찍을 때 걸리면 끈다. 오른쪽 위 모서리, 첫 줄 글자와는 겹치지 않는다 */
.map-intro-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  pointer-events: auto;
}
.map-intro-close:hover { background: #f0efe9; color: #3d3d3a; }
.map-intro .map-intro-lead {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
/* 패널의 칩과 같은 모양. 헤더의 '사용법'처럼 새 탭 — 같은 탭이면 입력해 둔 주소가 사라진다 */
.map-intro-guide {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid #d4d2cb;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: #3d3d3a;
  text-decoration: none;
  pointer-events: auto;
}
.map-intro-guide:hover { border-color: #888; }
.map-intro[hidden],
#map[hidden] ~ .map-intro {
  display: none;
}
/* 도면 표제란 — 지도 위 오른쪽 아래. 종이에서와 같은 자리다.
   Leaflet 저작권 표시가 맨 아래에 있으므로 그 위로 띄우고, 확대·축소 버튼(오른쪽 끝 34px + 여백)
   왼쪽으로 비킨다 — right 64px. */
.sheet-info {
  position: absolute;
  right: 64px;
  bottom: 24px;
  z-index: 500;
  width: 234px;
  max-height: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d4d2cb;
  border-radius: 4px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font-size: 11.5px;
}
/* display를 직접 준 요소는 [hidden]의 기본 display:none을 덮어쓴다.
   이게 없으면 도면이 없을 때도 빈 표제란이 지도에 떠 있다. */
.sheet-info[hidden],
#map[hidden] ~ .sheet-info {
  display: none;
}
.sheet-info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid #e6e4dd;
  background: #f6f5f1;
  font: inherit;
  font-weight: 600;
  color: #3d3d3a;
  text-align: left;
  cursor: pointer;
}
.sheet-info-caret {
  color: #8a8781;
  transition: transform 0.12s;
}
.sheet-info.closed .sheet-info-rows {
  display: none;
}
.sheet-info.closed .sheet-info-caret {
  transform: rotate(-90deg);
}
.sheet-info-rows {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 3px 8px;
  margin: 0;
  padding: 7px 10px 9px;
  overflow-y: auto;
}
.sheet-info-rows dt {
  color: #6b6a65;
}
.sheet-info-rows dd {
  margin: 0;
  color: #1a1a1a;
  /* 한글은 낱말 가운데서 끊지 않는다 — '철근콘크/리트구조'가 된다.
     그래도 PNU 19자리처럼 띄어쓰기 없는 값은 넘치므로 그때만 끊게 둔다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#map {
  width: 100%;
  height: 100%;
}
/* display를 직접 준 요소는 [hidden]의 기본 display:none을 덮어쓴다.
   이걸 빠뜨리면 감춰야 할 도면이 지도 위에 그대로 남는다. */
#map[hidden],
#sheet-view[hidden] {
  display: none;
}

/* 도면 — 종이처럼 가운데에 놓는다.
   확대하면 종이가 칸보다 커진다. flex의 justify-content:center는 넘친 왼쪽을 스크롤로도 못 가게
   만들므로(왼쪽이 잘린다) 종이에 margin:auto를 주어 가운데에 둔다 — 넘치면 auto가 0이 되어 왼쪽부터 보인다.
   배율(--sheet-zoom)은 app.js가 정한다. 1이 '맞춤'(칸 폭, 최대 1100px)이다. */
#sheet-view {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f2f1ec;
  /* 위쪽은 왼쪽 위 스위치(높이 약 36px + 위 여백 12px)에 종이가 가려지지 않게 비운다 */
  padding: 60px 20px 20px;
  display: flex;
  align-items: flex-start;
}
#sheet-view svg {
  flex: none;
  margin: 0 auto;
  width: calc(min(100%, 1100px) * var(--sheet-zoom, 1));
  height: auto;
  background: #fff;
  border: 1px solid #d4d2cb;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  /* 끌어서 옮길 때 SVG 안의 글자가 선택되지 않게 */
  user-select: none;
}
#sheet-view.pannable { cursor: grab; }
#sheet-view.panning { cursor: grabbing; }

/* A4 미리보기 확대·축소 — 지도의 확대·축소와 같은 오른쪽 아래 자리(그 버튼은 지도와 함께 숨는다).
   Leaflet 모양을 따른다: 흰 네모 버튼이 세로로 붙는다. */
.sheet-zoom {
  position: absolute;
  right: 10px;
  bottom: 28px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.sheet-zoom button {
  width: 30px;
  height: 30px;
  border: 0;
  border-bottom: 1px solid #ccc;
  background: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: #333;
  cursor: pointer;
}
.sheet-zoom button:last-child { border-bottom: 0; }
.sheet-zoom button:hover { background: #f4f4f4; }
/* 가운데 단추는 지금 배율이고 누르면 맞춤이다 */
.sheet-zoom #sheet-zoom-fit { font-size: 10px; font-weight: 600; letter-spacing: -0.5px; }
/* display를 직접 준 요소는 [hidden]을 덮어쓴다 — 도면이 숨겨지면(지도 보기) 이것도 숨긴다 */
#sheet-view[hidden] ~ .sheet-zoom { display: none; }

/* ── 인쇄 (PDF로 저장) ──
   A4 가로 · 여백 0 · 배율 100%로 저장하면 도면이 1:1 축척으로 나온다. */
#print-area { display: none; }

@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  body {
    height: auto;
    display: block;
    background: #fff;
  }
  body > *:not(#print-area) { display: none !important; }
  #print-area {
    display: block;
    margin: 0;
    padding: 0;
  }
  #print-area svg {
    display: block;
    width: 297mm;
    height: 210mm;
  }
}

/* ── 선택된 대상 필지 목록 ── */
.targets {
  border: 1px solid #e8e6df;
  border-radius: 6px;
  background: #fafaf7;
  font-size: 12px;
}
.targets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #e8e6df;
  color: #6b6a65;
}
.targets-head b { color: #1a1a1a; }
.targets-head button {
  border: none;
  background: none;
  color: #a32d2d;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.targets ul {
  list-style: none;
  max-height: 160px;
  overflow-y: auto;
}
.targets li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #efede6;
}
.targets li:last-child { border-bottom: none; }
/* 지번은 절대 쪼개지 않는다 — '73-19'가 '73-' / '19'로 갈리면 다른 지번처럼
   읽힌다. 길어지는 것은 뒤의 지목·면적·용도 쪽이니 그쪽이 접히게 둔다. */
.targets li .jibeon {
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  flex-shrink: 0;
}
.targets li .meta { color: #6b6a65; margin-left: auto; }
/* 로드뷰 — 글자 대신 사람 표시 하나. 행이 이미 지번·지목·면적·용도로 차 있다. */
.targets li .roadview {
  display: inline-flex;
  align-items: center;
  color: #6b6a65;
  line-height: 0;
}
.targets li .roadview:hover {
  color: #2f6b4f;
}
.targets li button {
  border: none;
  background: none;
  color: #a32d2d;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.targets-total {
  padding: 8px 10px;
  border-top: 1px solid #e8e6df;
  color: #3d3d3a;
}

/* ── 지번 라벨 ──
   배경 타일에 구워진 도로명 건물번호(검정·회색)와 구분되게 진한 초록을 쓰고,
   흰 테두리를 둘러 항공사진 위에서도 읽히게 한다.
   divIcon의 iconSize가 [0,0]이라 translate로 직접 가운데를 맞춘다. */
.jibeon-label,
.building-label {
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
     0    0   3px #fff;
  pointer-events: none;
}

/* 지번은 도형 중심 바로 위, 건물 표기는 바로 아래에 놓는다.
   건물은 보통 필지 한가운데 있어 둘 다 중심에 찍으면 정확히 포개진다. */
.jibeon-label {
  transform: translate(-50%, -110%);
  font-size: 11px;
  font-weight: 600;
  color: #1f3d1a;
}

/* 건물 표기는 지번보다 한 단계 여리게 — 지번이 먼저 읽혀야 한다 */
.building-label {
  transform: translate(-50%, 10%);
  font-size: 10px;
  font-weight: 500;
  color: #5a544a;
}

/* 줌이 얕으면 이름 있는 건물만 남긴다 (app.js의 applyLabelDetail) */
.coarse .building-label.minor { display: none; }

/* ── 화면 사이 이동 (도면 · 답사 묶음) ──
   같은 서버 안의 페이지라 외부 링크가 아니다. 지금 화면은 굵게만 하고 누를 수 있게 둔다. */
/* 화면 이동(도면 뽑기 · 답사 묶음)은 탭이다. 예전에는 선택된 쪽만 알약이고 다른 쪽은 맨 글자라
   '강조된 단어'로 보여 탭인 줄 몰랐다.
   - 머리줄 바닥(테두리 위)에 닿아 아래 화면의 탭이라는 것이 보인다. 위는 머리줄 여백만큼 띄운다
   - 선택된 탭은 진한 초록 면 + 연두(#BEFF42) 밑줄. 연두는 항공사진 위 지적선 색이다. 연두는
     밝은 바탕에서는 밝기 대비가 1.0:1이라 면을 어둡게 깔았다(진한 초록 위 7.8:1)
   - 이름·부제·배지 쪽과 36px 띄운다. 붙어 있으면 '무엇인가'와 '어디로 가나'가 한 덩어리로 읽혔다
   - 아래 지도·A4 미리보기는 탭이 아니라 지도 위 스위치(.view-switch)라 이 탭과 겹치지 않는다 */
header nav.screens {
  display: flex;
  align-self: stretch;
  gap: 4px;
  flex-shrink: 0;
  margin: 0 0 -15px 36px;
}
header nav.screens a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-bottom: 4px solid transparent;
  border-radius: 6px 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #3b4e37;
  text-decoration: none;
}
header nav.screens a:hover { color: #1a1a1a; background: rgba(61, 107, 53, 0.1); }
header nav.screens a[aria-current="page"] {
  background: #2c4f27;
  color: #fff;
  border-bottom-color: #BEFF42;
}
/* 아이콘은 마스크로 글자색을 따른다. 마스크를 모르는 오래된 브라우저에서는 네모로 번지므로 아예 그리지 않는다 */
@supports ((-webkit-mask: url(x)) or (mask: url(x))) {
  header nav.screens a::before {
    content: "";
    width: 19px;
    height: 19px;
    background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat;
    mask: var(--ic) center / contain no-repeat;
  }
  header nav.screens a:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3z M3 12h8 M11 6v12 M16 6v6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  header nav.screens a:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='8' r='3'/%3E%3Ccircle cx='15' cy='6' r='2.4'/%3E%3Ccircle cx='11' cy='15' r='3'/%3E%3Ccircle cx='19' cy='16' r='2.4'/%3E%3C/svg%3E"); }
}

/* ── 답사 묶음 화면 (plan.html) ── */
.field label.check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: #3d3d3a;
  font-weight: 400;
  cursor: pointer;
}
.field input[type="range"] {
  width: 100%;
  accent-color: #3d6b35;
}
.plan-summary {
  font-size: 12px;
  color: #3d3d3a;
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f1f6ef;
}
.pane-state.warn { color: #a32d2d; }
/* .pane이 display:flex라 [hidden]을 덮어쓴다 — 못 찾은 줄이 없어도 빈 칸이 남는다 */
.pane[hidden] { display: none; }
.missing-group {
  border-top: 1px solid #f0e0e0;
  font-size: 12px;
}
.missing-group summary {
  padding: 6px 0;
  cursor: pointer;
  color: #791f1f;
  user-select: none;
}
.missing-group ul {
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  padding-bottom: 6px;
}
.missing-group li {
  padding: 2px 0;
  color: #1a1a1a;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.missing-why {
  margin-left: 6px;
  color: #a32d2d;
}
/* 몰린 정도는 배경 위에 반투명으로 — 도로가 보여야 덩어리의 경계가 읽힌다 */
.heat-layer {
  position: absolute;
  opacity: 0.7;
  pointer-events: none;
}
.bundle-summary {
  font-size: 12px;
  color: #3d3d3a;
}
.bundle-summary:empty { display: none; }
/* 묶음이 수십 개여도 패널이 끝없이 길어지지 않게 */
.bundle-list {
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid #e8e6df;
}
.bundle-list:empty { display: none; }
.bundle-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid #f0efe9;
  font-size: 12px;
  color: #1a1a1a;
  cursor: pointer;
}
.bundle-list li:hover { background: #f5f5f0; }
.bundle-list li.active {
  background: #f1f6ef;
  font-weight: 600;
}
.bundle-swatch {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.bundle-scale {
  margin-left: auto;
  color: #3d6b35;
  font-variant-numeric: tabular-nums;
}
.bundle-scale.cut { color: #a32d2d; }
.bundle-scale.hidden { color: #b45309; }
/* 슬라이더를 끄는 동안 목록은 옛 묶음이다 — 놓으면 다시 그린다. 옛 줄의 번호는 새 묶음과
   맞지 않으므로 누르지 못하게 한다(다른 묶음이 골라진다) */
.bundle-list.stale { opacity: 0.45; pointer-events: none; }

/* ── 고른 묶음의 필지 목록 (지도 위, plan.html) ──
   몰린 정도를 가리지 않게 제목줄만 보이도록 접혀 있다가 누르면 펼친다.
   도면 화면의 표제란(.sheet-info)과 같은 모양이다. */
.bundle-box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  width: 300px;
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d4d2cb;
  border-radius: 4px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font-size: 12px;
}
/* display를 직접 줘서 [hidden]을 덮어쓴다 — 고른 묶음이 없어도 빈 상자가 뜬다 */
.bundle-box[hidden] { display: none; }
.bundle-box-head {
  display: flex;
  align-items: stretch;
  background: #f6f5f1;
  border-bottom: 1px solid #e6e4dd;
}
.bundle-box.closed .bundle-box-head { border-bottom: 0; }
.bundle-box-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #3d3d3a;
  text-align: left;
  cursor: pointer;
}
.bundle-box-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundle-box-caret {
  color: #8a8781;
  transition: transform 0.12s;
}
.bundle-box.closed .bundle-box-caret { transform: rotate(-90deg); }
.bundle-box-close {
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #e6e4dd;
  background: none;
  font-size: 15px;
  color: #8a8781;
  cursor: pointer;
}
.bundle-box-close:hover { color: #1a1a1a; }
.bundle-box-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bundle-box.closed .bundle-box-body { display: none; }
.bundle-parcels {
  margin: 0;
  padding: 4px 0 4px 30px;
  overflow-y: auto;
}
.bundle-parcels li {
  padding: 3px 10px 3px 0;
  color: #1a1a1a;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.bundle-parcels li:hover { color: #3d6b35; text-decoration: underline; }
.bundle-parcel-more {
  margin-left: 6px;
  color: #8a8577;
  font-size: 11px;
}
.bundle-box-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid #e6e4dd;
}
.btn-copy {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid #d4d2cb;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  color: #3d3d3a;
  cursor: pointer;
}
.btn-copy:hover { border-color: #3d6b35; color: #3d6b35; }
.bundle-copy-note { color: #3d6b35; font-size: 11px; }
.bundle-copy-note.error { color: #a32d2d; }