* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
               "Apple SD Gothic Neo", sans-serif;
  color: #1f2328;
}

#layout { display: flex; height: 100%; }

/* ---------------- 사이드바 ---------------- */
#sidebar {
  width: 300px;
  flex: 0 0 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #e3e6ea;
  z-index: 10;
}
/* 스크린샷용 접기: 지도만 남긴다 */
#layout.collapsed #sidebar { display: none; }
#layout.collapsed #expand { display: block; }

#sidebar-head {
  padding: 16px 16px 12px; border-bottom: 1px solid #eef0f3;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
#sidebar-head h1 { margin: 0; font-size: 16px; font-weight: 700; }
#sidebar-head .sub { margin: 4px 0 0; font-size: 11px; color: #8b949e; }

#collapse, #expand {
  border: 1px solid #d6dae0; background: #fff; color: #57606a;
  width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; flex: 0 0 auto; font-family: inherit;
}
#collapse:hover, #expand:hover { background: #f3f5f7; }
#expand {
  display: none; position: absolute; top: 12px; left: 12px; z-index: 20;
  width: 28px; height: 28px; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.panel { padding: 14px 16px; border-bottom: 1px solid #eef0f3; }
.panel:last-of-type {
  border-bottom: none; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.panel h2 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  color: #57606a; letter-spacing: .02em;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; }
.panel-head h2 { margin-bottom: 8px; }

.bulk { display: flex; gap: 4px; }
.bulk button {
  border: 1px solid #d6dae0; background: #fff; color: #57606a;
  font-size: 11px; padding: 2px 7px; border-radius: 4px; cursor: pointer;
  font-family: inherit;
}
.bulk button:hover { background: #f3f5f7; }

/* 옵션 행 */
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.opt-row:last-child { margin-bottom: 0; }
.opt-label { font-size: 12px; color: #8b949e; width: 30px; flex: 0 0 auto; }
.seg { display: flex; border: 1px solid #d6dae0; border-radius: 5px; overflow: hidden; }
.seg button {
  border: none; background: #fff; color: #57606a; font-family: inherit;
  font-size: 11px; padding: 4px 11px; cursor: pointer;
}
.seg button + button { border-left: 1px solid #d6dae0; }
.seg button.on { background: #1f2328; color: #fff; }

#area-filter, #period-filter {
  font-family: inherit; font-size: 11px; padding: 3px 6px;
  border: 1px solid #d6dae0; border-radius: 5px; background: #fff; color: #57606a;
}

/* 아파트 목록 */
#apt-list { overflow-y: auto; flex: 1 1 auto; margin: 0 -6px; padding: 0 6px; }
.apt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 5px; font-size: 13px; cursor: pointer;
}
.apt-row:hover { background: #f3f5f7; }
.apt-row input { margin: 0; cursor: pointer; flex: 0 0 auto; }
.apt-row .a-name {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 이번 조건에서 거래가 하나도 없는 단지 — 목록에는 남기되 흐리게 둔다 */
.apt-row.empty .a-name { color: #b1b8c0; }
.apt-row .a-n {
  flex: 0 0 auto; font-size: 11px; color: #57606a;
  background: #eef0f3; border-radius: 9px; padding: 1px 7px;
  min-width: 24px; text-align: center; font-variant-numeric: tabular-nums;
}
.apt-row.empty .a-n { color: #b1b8c0; background: #f6f7f9; }

#sidebar-foot {
  padding: 10px 16px; border-top: 1px solid #eef0f3;
  font-size: 11px; color: #8b949e;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* ---------------- 지도 ---------------- */
#map-wrap { flex: 1 1 auto; height: 100%; position: relative; min-width: 0; }
#map { width: 100%; height: 100%; }

/* 스크린샷에 함께 찍히는 제목 / 범례 */
#map-caption {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 20; pointer-events: none;
  background: rgba(255,255,255,.94); border: 1px solid #dfe3e8; border-radius: 7px;
  padding: 8px 16px; text-align: center; box-shadow: 0 1px 5px rgba(0,0,0,.12);
  white-space: nowrap;
}
#map-caption .cap-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
#map-caption .cap-sub { margin-top: 2px; font-size: 11px; color: #8b949e; }

#map-legend {
  position: absolute; bottom: 24px; left: 12px; z-index: 20; pointer-events: none;
  background: rgba(255,255,255,.94); border: 1px solid #dfe3e8; border-radius: 7px;
  padding: 7px 12px; box-shadow: 0 1px 5px rgba(0,0,0,.12);
  font-size: 11px; line-height: 1.7;
}
#map-legend .lg-item { display: flex; align-items: center; gap: 6px; font-weight: 700; }
#map-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
#map-legend .lg-note { color: #8b949e; font-size: 10px; line-height: 1.5; }

/* ---------------- 단지 카드 (HTML 마커) ---------------- */
/* 위치 보정은 JS의 겹침 회피 배치가 anchor 로 처리하므로 여기서 transform 을 쓰지 않는다. */
.apt-card {
  background: #fff; border: 1px solid #c8ced6; border-radius: 7px;
  box-shadow: 0 2px 7px rgba(0,0,0,.2);
  font-size: 11px; line-height: 1.25; white-space: nowrap; cursor: pointer;
  overflow: hidden;
}
.apt-card:hover { border-color: #6b7684; }
.apt-card.active { border-color: #1f2328; box-shadow: 0 3px 11px rgba(0,0,0,.3); }

.apt-card .c-name {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; font-size: 11.5px; font-weight: 700;
  background: #f6f7f9; border-bottom: 1px solid #eef0f3;
}
/* 거래 종류를 색 점 하나로 표시한다. 한 번에 한 종류만 보므로 배지까지는 필요 없다. */
.apt-card .c-name .n-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.apt-card .c-name .n-count {
  margin-left: auto; font-weight: 400; color: #8b949e; font-size: 10.5px;
}
.apt-card .c-rows { padding: 3px 8px 4px; }
.apt-card .c-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.apt-card .r-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.apt-card .r-price-mid { color: navy; }
.apt-card .r-label { min-width: 52px; flex: 0 0 auto; color: #8b949e; font-size: 10.5px; }
/* 가격 뒤 거래연월을 오른쪽 끝에 붙인다 */
.apt-card .r-ym {
  margin-left: auto; color: #8b949e; font-size: 10px; font-variant-numeric: tabular-nums;
}

/* 카드가 좌표 바로 위에 놓였을 때만 꼬리를 붙인다 (밀려난 카드는 앵커 점으로 위치를 표시) */
.apt-card.tail-below { position: relative; }
.apt-card.tail-below::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  margin-left: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid #fff; filter: drop-shadow(0 1px 0 #c8ced6);
}

/* 카드 크기 측정용 (화면 밖) */
#measure { position: absolute; left: -9999px; top: -9999px; visibility: hidden; }

/* ---------------- InfoWindow ---------------- */
.iw {
  width: 360px; font-size: 12px;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
               "Apple SD Gothic Neo", sans-serif;
  color: #1f2328;
  background: #fff; border: 1px solid #c8ced6; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.24); overflow: hidden;
}
.iw-head { padding: 10px 12px 8px; border-bottom: 1px solid #eef0f3; }
.iw-head .t { font-size: 14px; font-weight: 700; }
/* 제목 옆 전용면적 — 어느 면적 카드에서 연 목록인지 알려준다 */
.iw-head .t .a { color: #57606a; font-size: 12.5px; font-weight: 400; }
.iw-head .m { margin-top: 3px; color: #8b949e; font-size: 11px; }

/* 20건 남짓까지는 스크롤 없이 보이게 잡는다. 내용이 적으면 그 높이로 줄어든다. */
.iw-body { max-height: 560px; overflow-y: auto; }
.iw table { width: 100%; border-collapse: collapse; }
.iw td { padding: 5px 10px; text-align: left; border-bottom: 1px solid #f1f3f5; }
.iw tr:last-child td { border-bottom: none; }
/* 달이 바뀌는 줄. border-collapse 라 아래 줄의 가는 선과 겹쳐도 굵은 쪽이 남는다. */
.iw tr.mb td { border-top: 2px solid #d0d7de; }
.iw td.d { color: #57606a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iw td.p {
  font-weight: 700; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums;
}
.iw td.p .unit { font-weight: 400; color: #8b949e; font-size: 10.5px; margin-left: 1px; }
.iw td.f { color: #57606a; white-space: nowrap; }
.iw td.a {
  color: #8b949e; white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums;
}
.iw-tag {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 3px;
  background: #eef0f3; color: #57606a; font-size: 10px; font-weight: 700;
}
.iw-empty { padding: 16px 12px; color: #8b949e; text-align: center; }

/* ---------------- 오류 배너 ---------------- */
#fatal {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 999; max-width: 560px;
  background: #fff3f3; border: 1px solid #f0b4b4; color: #8b1a1a;
  padding: 12px 16px; border-radius: 6px; font-size: 13px; line-height: 1.6;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}