/* ══════════════════════════════════════════════════════════════════════
   지역 드릴다운 공용 스타일 — 매매(trade-drill.js) / 전세·월세(rent-drill.js) 공용

   🔴 이 파일은 자족(self-contained)이다. 페이지 CSS(trade-list.css / rent-list.css)의
   클래스를 빌려 쓰지 않는다. 빌려 쓰던 시절에 실제로 다음 문제가 났다.
     - .dong-row 의 margin-bottom 이 새어들어 2열 배치 마지막 행 테두리가 어긋남
     - .dong-row / .dong-meta / .legend / .badge 가 trade-list.css 와 rent-list.css 에
       다른 값으로 중복 정의돼 있어서, 같은 드릴이 매매와 임대에서 다르게 보임
       (.dong-row 12px vs 14px, .dong-meta 11px vs 13px, .dong-stack-* 는 의미까지 다름)
   그래서 드릴이 쓰는 모든 클래스에 drill- 접두사를 붙여 여기서만 정의한다.
   페이지 CSS 에 drill- 클래스를 추가하지 말 것.

   층 순서(z-index): 헤더 10000 > 스트립 100 > 트레일 50 > 검색 1 > 목록 auto
   ══════════════════════════════════════════════════════════════════════ */

.region-drill { position: relative; margin-top: 4px; }
.region-drill.is-loading { opacity: .55; pointer-events: none; }
.drill-noscript { color: var(--text-faint); font-size: 13px; padding: 20px; text-align: center; }
.drill-empty { color: var(--text-faint); font-size: 13px; padding: 28px 12px; text-align: center; }

/* ─── 단지 검색 ──────────────────────────────────────
   전체 폭 흰 입력창. 맨 위에 있을 때는 이게 가장 튀는 요소였는데
   빵부스러기(트레일) 아래로 내리니 그 문제가 사라져서 원래 모양을 유지한다.
   폭을 좁히고 배경을 낮춰본 안은 입력창인지 모를 만큼 사라져서 되돌렸다.

   🔴 z-index 는 1. 검색창이 트레일 아래에 있으므로
   트레일(스티키, 50)이 이 위를 덮어야 하고, 결과 목록은 아래 목록(auto)을 덮어야 한다.
   두 조건을 동시에 만족하는 값이 1 이다. 예전에 130 으로 올렸다가 스트립까지 덮어
   월 네비가 숨는 버그를 만들었다. */
.drill-search { position: relative; z-index: 1; margin-bottom: 12px; }
.drill-search-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--card-bg, #fff); color: var(--text);
  font-family: inherit; }
.drill-search-input:focus { outline: none; border-color: var(--primary); }
.drill-search-res { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 120;
  background: var(--card-bg, #fff); border: 1px solid var(--primary); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(15,23,42,.14);
  /* 결과 상한이 200 이라 많아질 수 있다. 스크롤로 다 볼 수 있게, 화면 높이에 맞춰 잘리지 않게. */
  max-height: min(420px, 60vh); overflow-y: auto; }
.drill-search-res.is-open { display: block; }
.drill-qrow { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  padding: 10px 12px; font-size: 13px; background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-family: inherit; }
.drill-qrow:last-child { border-bottom: none; }
.drill-qrow:hover { background: var(--hover-bg, #f1f5f9); }
/* 결과 머리: 검색 범위(페이지 지역 전체)와 대상(그 달 계약이 있는 단지)을 밝힌다.
   말없이 걸러지고 있어서 "그 단지 없나" 하는 오해가 실제로 났다. */
.drill-qhead { padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--text-muted, #475569);
  background: var(--hover-bg, #f8fafc); border-bottom: 1px solid var(--border);
  word-break: keep-all; line-height: 1.45; }
.drill-qrow.is-none { color: var(--text-muted, #475569); cursor: default;
  white-space: normal; word-break: keep-all; line-height: 1.5; }
.drill-qloc { font-size: 13px; color: var(--text-muted, #475569); }

/* ─── 빵부스러기(지나온 단계) ───────────────────────── */
.drill-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 16px;
  padding: 11px 14px; background: var(--hover-bg, #f1f5f9); border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px;
  position: sticky; top: calc(var(--header-h, 61px) + var(--strip-h, 0px)); z-index: 50; }
/* 모바일은 세로가 좁아 헤더+스트립+트레일 3겹이면 화면의 1/4 를 먹는다.
   달 이동(스트립)만 고정하고 트레일은 같이 흐르게 둔다. 복귀는 "맨 위로" 버튼이 담당. */
@media (max-width: 700px) {
  .drill-trail { position: static; }
}
.drill-crumb { display: inline-flex; align-items: center; background: none; border: none; padding: 2px 2px;
  color: var(--primary); font-weight: 700; cursor: pointer; font-size: 13.5px; font-family: inherit; }
.drill-crumb:hover { opacity: 0.7; }
.drill-crumb-cur { display: inline-flex; align-items: center; padding: 2px 2px;
  color: var(--text); font-weight: 800; font-size: 13.5px; }
.drill-sep { color: var(--text-faint); font-size: 12px; }
.drill-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--primary-soft, #eff6ff); color: var(--primary);
  font-size: 10.5px; font-weight: 800; margin-right: 5px; }
.drill-lvtag { font-size: 10px; font-weight: 800; color: #fff; border-radius: 4px; padding: 1px 5px;
  margin-right: 5px; letter-spacing: .02em; }
.drill-lvtag.lv-sido { background: #2563eb; }
.drill-lvtag.lv-sgg { background: #7c3aed; }
.drill-lvtag.lv-dong { background: #0891b2; }
.drill-lvtag.lv-danji { background: #d97706; }
/* 기준 달 배지는 경로 바로 뒤 좌측. 우측 정렬(margin-left:auto)은 쓰지 않는다 — 년월은 좌측이 규칙. */
.drill-trail-ym { margin-left: 8px; }

/* ─── 단지 상세 제목 ────────────────────────────────── */
.drill-apt-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px;
  font-size: 17px; font-weight: 800; color: var(--text); }
.drill-apt-name { font-size: 17px; font-weight: 800; color: var(--text); }
/* 단지 상세로 가는 버튼. 예전에는 단지명 자체가 링크(파랑+굵게+꼬리 화살표)였는데,
   카드 밖 제목 자리에 있어 섹션 제목으로 읽혔고 빵부스러기에도 같은 이름이 있어 눌리는 줄 몰랐다.
   그래서 제목은 검은 글씨로 되돌리고, 가는 곳을 말로 적은 버튼을 따로 세운다.
   밑줄은 쓰지 않는다(목록의 .apt-link 와 같은 규칙 - rent-list.css:122). */
/* 오른쪽 끝(margin-left:auto)에 뒀더니 "한참을 찾았다"는 지적. 제목 바로 옆으로 붙인다. */
.drill-apt-link { display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 13px; border: 1px solid var(--primary); border-radius: 20px;
  color: var(--primary); font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; }
.drill-apt-link::after { content: '›'; font-weight: 800; }
.drill-apt-link:hover { background: var(--primary); color: #fff; text-decoration: none; }
.drill-apt-sub { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }

/* ─── 정렬 칩 ───────────────────────────────────────── */
.drill-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
/* 8제약 #7(보조 13px 이상, 회색 작은 글자 금지) 하한을 지킨다. */
.drill-sortlbl { font-size: 13px; font-weight: 700; color: var(--text-muted, #475569); margin-right: 2px; }
.drill-chip { font-size: 11.5px; font-weight: 700; color: var(--text-sub, #475569);
  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 18px;
  padding: 4px 10px; cursor: pointer; font-family: inherit; }
.drill-chip:hover { border-color: var(--primary); }
.drill-chip.is-on { color: var(--primary); background: var(--primary-soft, #eff6ff); border-color: var(--primary); }
/* 도움말은 details/summary 로 접는다. 접힌 상태에서는 제목 한 줄만 차지한다.
   padding 은 summary/본문에 각각 준다 - 컨테이너에 주면 접었을 때 빈 여백이 남는다. */
.drill-sorthint { font-size: 12.5px; color: var(--text-sub, #475569); line-height: 1.55;
  margin: 6px 0 10px; background: var(--primary-soft, #eff6ff);
  border: 1px solid var(--accent-bd, #bfdbfe); border-radius: 8px; }
.drill-sorthint-sum { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer;
  list-style: none; }
.drill-sorthint-sum::-webkit-details-marker { display: none; }
.drill-sorthint-sum::after { content: '\25BE'; margin-left: auto; font-size: 11px; }
.drill-sorthint[open] .drill-sorthint-sum::after { content: '\25B4'; }
.drill-sorthint-sum:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
.drill-sorthint-body { padding: 0 12px 10px; }
/* 정렬 규칙 고지(소표본 뒤로 보내기). 도움말과 달리 항상 보인다. */
.drill-sortnote { font-size: 13px; color: var(--text-sub, #475569); line-height: 1.5; margin: 6px 0 0; }
.drill-sorthint b { color: var(--primary); font-weight: 800; }
.drill-sorthint-eg { display: block; margin-top: 5px; font-size: 12px;
  color: var(--text-sub, #475569); font-style: italic; }

/* ─── 탭 (매매의 신고가 있는 곳 / 그 외) ─────────────── */
.drill-tabs { display: flex; gap: 4px; margin: 12px 0 6px; border-bottom: 2px solid var(--border); }
.drill-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: 9px 15px; font-size: 13px; font-weight: 800; color: var(--text-sub, #475569); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.drill-tab:hover { color: var(--text); }
.drill-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.drill-tab.is-nh.is-active { color: #DC2626; border-bottom-color: #DC2626; }
.drill-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--hover-bg, #f1f5f9);
  color: var(--text-sub, #475569); font-size: 11px; font-weight: 800; }
.drill-tab.is-nh .drill-tab-n { background: #fef2f2; color: #DC2626; }
.drill-tab.is-active .drill-tab-n { background: var(--primary-soft, #eff6ff); color: var(--primary); }
.drill-tab.is-nh.is-active .drill-tab-n { background: #fef2f2; color: #DC2626; }

/* ─── 그룹 행 목록 ──────────────────────────────────────
   한 행에 2개. 막대가 비율 막대(항상 100% 폭에 구간 분할)라서 폭이 절반이어도
   비교가 그대로 된다. 길이가 아니라 구간 비율을 보므로 잃는 정보가 없고 스크롤이 절반으로 준다. */
.drill-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@media (max-width: 760px) {
  /* 좁으면 1열로. 컬럼을 지우는 게 아니라 배치만 세로로 (구현원칙 10) */
  .drill-rows { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; }
}
/* 그룹 행 = 카드 (PC·모바일 공통) - 같은 배경+밑줄 하나로는 어디서 끊기는지 구분이 안 간다는 지적. */
.drill-row { display: block; width: 100%; margin: 0; text-align: left;
  background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; color: var(--text);
  font: inherit; text-decoration: none; }
.drill-row:hover { background: var(--hover-bg, #f1f5f9); border-color: var(--primary); }

/* 행 구조: 위줄 = 이름 + 배지 + 메타 문장 / 아래줄 = 막대(전체 폭)
   막대를 이름 옆에 두면 이름 길이만큼 시작점이 밀려 행마다 어긋나고,
   막대만 아래로 내리면 위줄 오른쪽이 텅 빈다. 메타를 위줄로 올려 둘 다 피한다. */
.drill-row-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 7px; }
.drill-name { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--primary);
  text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
.drill-name:hover { text-decoration: none; }
.drill-row-meta { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal;
  word-break: keep-all; line-height: 1.5; font-size: 12px; color: var(--text-muted); }
.drill-row-meta strong { color: var(--text-main); font-weight: 700; }
/* 정렬 키가 된 값 하나만 칠한다(계약 많은순 / 보증금 높은순 / 월세 높은순).
   막대 줄 강조와 같은 원칙 — 줄 세운 값이 화면 어디인지 눈으로 잡히게. */
.drill-row-meta.by-count .drill-k-count,
.drill-row-meta.by-dep .drill-k-dep,
.drill-row-meta.by-mr .drill-k-mr,
.drill-row-meta.by-price .drill-k-price,
.drill-row-meta.by-py .drill-k-py,
.drill-row-meta.by-cnt .drill-k-cnt,
.drill-row-meta.by-pct .drill-k-pct { color: var(--primary); }

/* ─── 비율 막대 ──────────────────────────────────────
   방향색만 쓴다(상승 웜 / 하락 쿨 / 보합 중립). 가치판단 색은 쓰지 않는다 — P-047.
   임대는 신규/갱신 두 줄이라 줄마다 라벨을 앞에 둔다. */
.drill-bar { display: flex; width: 100%; height: 10px; border-radius: 9999px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); }
.drill-bar-up { background: #fca5a5; height: 100%; }
.drill-bar-down { background: #60a5fa; height: 100%; }
.drill-bar-flat { background: #cbd5e1; height: 100%; }
/* 막대 줄 하나 = 라벨 + 막대 + 설명. 임대에서 신규/갱신 두 줄로 쓴다. */
.drill-barline { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.drill-barline-lbl { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-sub, #475569);
  min-width: 62px; }
.drill-barline .drill-bar { flex: 1 1 auto; }
.drill-barline-meta { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.drill-barline-meta strong { color: var(--text-main); font-weight: 700; }
/* 오름 정렬 중인 줄 강조 — 정렬 키가 화면의 어느 숫자인지 눈으로 잡히게.
   색은 강조가 아니라 위치 표시용이라 방향색을 쓰지 않고 파랑(선택) 계열로 둔다. */
.drill-barline.is-sortkey { background: var(--primary-soft, #eff6ff); border-radius: 6px;
  padding: 3px 6px; margin-left: -6px; margin-right: -6px; }
.drill-barline.is-sortkey .drill-barline-lbl { color: var(--primary); font-weight: 800; }
/* 그 줄 안에서도 정렬 키가 된 값 하나만 칠한다.
   건수로 정렬했는데 비율까지 파랗게 되면 무엇으로 줄 세웠는지 다시 모호해진다. */
.drill-barline.is-sortkey.by-cnt .drill-k-cnt { color: var(--primary); }
.drill-barline.is-sortkey.by-pct .drill-k-pct { color: var(--primary); }
/* 월세: 계약 수 머리 한 줄 + 축별 막대 두 줄.
   보증금과 월세 어느 쪽도 대표가 아니므로 두 축을 같은 들여쓰기·같은 무게로 둔다. */
.drill-axishead { margin-top: 7px; font-size: 12px; font-weight: 700;
  color: var(--text-sub, #475569); }
/* 무엇과 견줬는지는 머리에 한 번만. 축 줄마다 되풀이하면 같은 말이 두 번 나온다. */
.drill-axishead-cmp { font-weight: 400; color: var(--text-muted); }
.drill-barline.drill-axisline { margin-top: 3px; padding-left: 12px; }
.drill-barline.drill-axisline .drill-barline-lbl { min-width: 44px; }
.drill-barline.drill-axisline.is-sortkey { margin-left: 6px; padding-left: 6px; }

@media (max-width: 560px) {
  /* 좁으면 라벨을 위로. 라벨은 지우지 않는다(구현원칙 10) */
  .drill-barline { flex-wrap: wrap; }
  .drill-barline-lbl { flex: 1 1 100%; min-width: 0; }
  .drill-barline-meta { flex: 1 1 100%; white-space: normal; word-break: keep-all; }
  /* 축 라벨은 짧아서(보증금 / 월세) 막대와 한 줄에 들어간다. 기준 라벨("신규 162건")처럼
     위로 올릴 이유가 없고, 라벨이 막대에 붙어 있어야 어느 축의 막대인지 바로 읽힌다.
     한 줄 아끼는 만큼 목록 길이도 줄어든다. */
  .drill-barline.drill-axisline .drill-barline-lbl { flex: 0 0 auto; min-width: 40px; }
  /* 🔴 basis 를 0 으로. .drill-bar 는 width:100% 라 flex-basis:auto 면 기준 폭이 컨테이너 전체가 되고,
     그러면 라벨이 밀려 제 줄로 내려간다(실측: 라벨 40px 이 혼자 한 줄, 그룹당 72px 낭비). */
  .drill-barline.drill-axisline .drill-bar { flex: 1 1 0; min-width: 0; }
}

/* ─── 범례 ─────────────────────────────────────────── */
.drill-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 6px;
  font-size: 13px; color: var(--text-muted, #475569); }
/* 범례 설명 접기 - 정렬 도움말(.drill-sorthint) 스타일 재사용, 목록과의 간격만 */
.drill-legendhint { margin: 0 0 10px; }
.drill-legend span { display: inline-flex; align-items: center; }
.drill-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  vertical-align: middle; margin-right: 4px; }

/* ─── 더보기 ───────────────────────────────────────── */
.drill-more { display: block; width: 100%; margin: 8px 0; padding: 10px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--primary); background: var(--card-bg, #fff);
  border: 1px dashed var(--primary); border-radius: 8px; cursor: pointer; font-family: inherit; }
.drill-more:hover { background: var(--primary-soft, #eff6ff); }

/* ─── 단지 안 도구 ──────────────────────────────────────
   "걸러보기"(무엇을 남길지)와 "순서"(어떻게 줄 세울지)를 줄로 나눈다.
   한 줄에 섞으면 같은 모양 컨트롤이라 무엇이 필터인지 구분이 안 갔다. */
.drill-scope { display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 22px; }
.drill-scope-lbl { font-size: 13px; font-weight: 800; color: var(--text); }
.drill-tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 라벨 폭을 맞춰 두 줄의 컨트롤 시작점이 나란히 오게 한다 */
.drill-tool-row > .drill-sortlbl { flex: 0 0 58px; margin-right: 0; }
.drill-select { font-size: 13px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px;
  background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit; }
.drill-select:focus { outline: none; border-color: var(--primary); }
.drill-check { display: flex; align-items: center; gap: 5px; font-size: 13px;
  color: var(--text-muted); cursor: pointer; }
.drill-check input { cursor: pointer; accent-color: var(--primary); }
@media (max-width: 768px) {
  .drill-tool-row { align-items: flex-start; }
  .drill-tool-row > .drill-sortlbl { flex: 1 1 100%; }
  .drill-select { width: 100%; }
}

/* ─── 평형밴드 ──────────────────────────────────────────
   머리(전용 N평 요약)가 아래 표를 품는 카드. 머리에 얇은 선 한 줄만 있던 시절엔
   표의 한 행처럼 보여 구분이 안 갔다. */
.drill-band { margin-bottom: 12px; background: var(--card-bg, #fff);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* 머리 배경은 연한 파랑 - 페이지 배경과 같은 회색조였을 때 어디가 머리인지 묻힌다는 지적.
   가치판단색이 아니라 위계(머리/본문) 구분색이라 허용(P-047). */
.drill-band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 11px 14px; cursor: pointer; background: var(--primary-soft, #eff6ff); }
.drill-band-head:hover { background: #e0ecff; }
/* 펼친 상태에서는 머리와 표 사이를 굵은 선으로 끊는다 */
.drill-band.is-open .drill-band-head { border-bottom: 2px solid var(--border); }
.drill-band-body { display: none; }
.drill-band.is-open .drill-band-body { display: block; }
/* 표는 밴드 카드가 이미 테두리를 갖고 있으니 자기 테두리를 지운다(이중 테두리 방지) */
.drill-band-body .drill-tblwrap { background: none; border: none; border-radius: 0; }
/* 더보기는 전체 폭 버튼이라 밴드 안에서는 좌우 여백을 줘야 카드 테두리에 붙지 않는다.
   🔴 width: auto 로 두면 안 된다 - button 은 display:block 이어도 auto 면 내용 폭으로 줄어들어
   (폼 컨트롤의 shrink-to-fit) 왼쪽에 작게 붙고 오른쪽이 텅 빈다. 여백만큼 뺀 폭으로 지정한다. */
.drill-band-body .drill-more { width: calc(100% - 24px); margin: 10px 12px 12px; }
/* 기본이 접힘이라 이 표시가 "누르면 열린다"의 유일한 단서다(모바일은 hover 도 없다).
   회색 › 18px 로는 약했고, 게다가 › 는 단지 상세 링크에도 써서 뜻이 겹쳤다.
   그래서 아래 방향 ▾ 를 동그란 버튼으로 감쌌다. 상호작용 표시색이라 가치판단색 금지(제약7)와 무관. */
.drill-cv { flex: 0 0 auto; width: 24px; height: 24px; display: flex;
  align-items: center; justify-content: center; border-radius: 50%;
  background: #fff; border: 1px solid var(--primary); color: var(--primary);
  font-size: 12px; font-weight: 800; line-height: 1; transition: transform .15s; }
.drill-band-head:hover .drill-cv { background: var(--primary); color: #fff; }
.drill-band.is-open .drill-cv { transform: rotate(180deg); }
.drill-band-name { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; }
.drill-band-head .drill-bar { flex: 1; min-width: 80px; max-width: 200px; height: 10px; border-radius: 5px; }
.drill-band-meta { font-size: 12.5px; color: var(--text-sub, #475569); white-space: nowrap; }
.drill-band-meta strong { color: var(--text); font-weight: 800; }
/* 표본이 적어 막대를 못 그릴 때의 안내. 막대 자리를 대신 차지한다. */
.drill-band-note { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) {
  /* 🔴 메타·안내는 nowrap 이라 같은 줄에 두면 잘린다(실측 360px: 머리 폭 334px).
     각자 한 줄을 차지하게 해서 잘림 없이 다 보이게 한다. order 로 읽는 순서를 고정:
     전용면적·배지(1) -> 중간 거래가·거래 수(2) -> 막대 또는 안내(3) */
  /* 전월세 메타는 보증금+월세+계약구분까지 길어서 nowrap 이면 오른쪽이 잘린다(실측 스샷) - 줄바꿈 허용 */
  .drill-band-head .drill-band-meta { flex: 1 1 100%; order: 2; white-space: normal; word-break: keep-all; }
  .drill-band-head .drill-bar { max-width: none; flex-basis: 100%; order: 3; }
  .drill-band-head .drill-band-note { flex: 1 1 100%; order: 3; white-space: normal; word-break: keep-all; }
}

/* ─── 배지 ─────────────────────────────────────────── */
.drill-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 13px;
  font-weight: 700; white-space: nowrap; }
.drill-badge-new-high  { background: #FDE8E8; color: #DC2626; }
.drill-badge-up        { background: #FEF3C7; color: #D97706; }
.drill-badge-flat      { background: #F3F4F6; color: #6B7280; }
.drill-badge-down      { background: #DBEAFE; color: #2563EB; }
.drill-badge-first     { background: #E0E7FF; color: #4F46E5; }
.drill-badge-cancelled { background: #FEE2E2; color: #991B1B; }
.drill-badge-new       { background: #DBEAFE; color: #1D4ED8; }
.drill-badge-renew     { background: #E0E7FF; color: #4338CA; }
/* 신고가 강조 배지 (그룹 행·밴드 머리) */
.drill-nh { display: inline-block; font-size: 11.5px; font-weight: 800; color: #DC2626;
  background: #fee2e2; border-radius: 5px; padding: 2px 7px; }
/* 평형밴드 메타 안에서는 인라인이라 자체 여백이 필요하고, 이름 줄에서는 flex gap 이 이미 띄운다 */
.drill-nh-lead { margin: 0 8px 0 0; }
.drill-row-top .drill-nh-lead { margin: 0; }

/* 변동 방향색 (상승 웜 / 하락 쿨) — P-047 */
.drill-chg-up { color: #DC2626; }
.drill-chg-down { color: #2563EB; }
.drill-chg-flat { color: var(--text-faint); }

/* ─── 거래·계약 표 ─────────────────────────────────── */
.drill-tblwrap { overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; }
.drill-ttbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.drill-ttbl th { font-size: 12px; color: var(--text-faint); font-weight: 700; text-align: left;
  padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.drill-ttbl td { padding: 8px; border-bottom: 1px solid var(--line2, #eef2f7); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.drill-ttbl tr:last-child td { border-bottom: none; }
.drill-ttbl th.r, .drill-ttbl td.r { text-align: right; }
.drill-ttbl th.c, .drill-ttbl td.c { text-align: center; }
.drill-ttbl tr.row-cancelled td { color: var(--text-faint); text-decoration: line-through; }
/* 직전 금액을 담는 줄이라 읽히는 글자여야 한다(8제약 #7: 보조 13px 이상, 회색 작은 글자 금지).
   11px + text-faint 였을 때 화면에서 흐려서 값이 있는 줄로 보이지 않았다. */
.drill-prev-sub { display: block; font-size: 13px; color: var(--text-sub, #475569); font-weight: 400;
  margin-top: 2px; text-decoration: none; }

/* 월세 둘째 축(보증금이 대표면 월세, 그 반대면 보증금) 변동 줄.
   기준 줄(.drill-prev-sub)과 달리 이건 변동값이라 같은 무게로 읽혀야 하고,
   보증금과 월세가 반대로 갈 수 있어(실측 47%) 색은 자기 축의 방향색을 따른다.
   🔴 그래서 여기서 color 를 지정하지 않는다 - 지정하면 방향색을 덮는다. */
.drill-chg-2nd { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }

/* PC: 컬럼 전부 가운데 정렬(헤더와 값 정렬 일치). 모바일 라벨:값은 왼쪽 유지 */
@media (min-width: 561px) {
  .drill-ttbl th, .drill-ttbl td,
  .drill-ttbl th.r, .drill-ttbl td.r,
  .drill-ttbl th.c, .drill-ttbl td.c { text-align: center; }
}

@media (max-width: 560px) {
  /* 각 거래를 블록 카드로, 모든 컬럼을 라벨:값 으로 세로 스택.
     컬럼 숨김·가로 스크롤 없음 (구현원칙 10) */
  .drill-ttbl, .drill-ttbl thead, .drill-ttbl tbody, .drill-ttbl td { display: block; width: 100%; }
  .drill-ttbl thead { display: none; }
  /* 밴드 머리·바닥과 계약 카드 사이가 붙어 있다는 지적 - 본문 사방 12px.
     더보기 버튼이 이어질 땐 버튼 위 여백을 0 으로(패딩 12px 가 이미 간격). */
  .drill-band-body .drill-tblwrap { padding: 12px; }
  .drill-band-body .drill-more { margin-top: 0; }
  /* 계약 하나 = 카드 하나. 1px 밑줄만으로는 어디서 끊기는지 티가 안 난다는 지적(실측 스샷) -
     테두리+둥근 모서리+카드 사이 10px 로 덩어리를 만든다. 항목 간격도 7 → 9px (숨막힘 완화). */
  .drill-ttbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; align-items: baseline;
    padding: 14px; background: var(--card-bg, #fff); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; }
  .drill-ttbl tr:last-child { margin-bottom: 0; }
  .drill-ttbl td, .drill-ttbl td.r, .drill-ttbl td.c { text-align: left; }
  .drill-ttbl td { padding: 0; border: none; white-space: normal; word-break: keep-all; font-size: 14px; }
  .drill-ttbl td::before { content: attr(data-label) " "; color: var(--text-faint);
    font-weight: 700; font-size: 11px; margin-right: 5px; }
  /* 보조 줄(직전·직전최고)을 값과 같은 x 로 들여쓴다. 라벨(::before 11px "변동" 20px + margin 5px)만큼.
     안 밀면 라벨과 같은 위치에서 시작해 값에 딸린 정보로 읽히지 않았다(실측 둘 다 left 17px). */
  .drill-ttbl td.change .drill-prev-sub,
  .drill-ttbl td.change .drill-chg-2nd { padding-left: 25px; }

  /* [A안] 정보를 세 덩어리로 묶는다: 물건(거래일·전용·층·연식·상태/계약)  →  구분선  →
     가격(거래가·평당가 / 보증금·월세 + 변동·직전). DOM 순서대로 흘리면 가격 식구가
     사방에 흩어져 "여기 봤다 저기 봤다" 하게 되던 지적. order 로만 재배치(마크업 불변). */
  .drill-ttbl td.date   { order: 1; }
  .drill-ttbl td.area   { order: 2; }
  .drill-ttbl td.floor  { order: 3; }
  .drill-ttbl td.age    { order: 4; }
  .drill-ttbl td.term   { order: 5; }
  /* 상태/계약구분: 배지가 둘이면 반쪽 칸에 안 들어가 둘째 배지가 떨어졌다(실측) - 전체 폭. */
  .drill-ttbl td.status { order: 6; grid-column: 1 / -1; }
  /* 물건 블록과 가격 블록 사이 구분선. tr 이 grid 라 ::before 가 아이템으로 낀다. */
  .drill-ttbl tr::before { content: ''; order: 7; grid-column: 1 / -1;
    border-top: 1px dashed var(--border); margin: 2px 0; }
  .drill-ttbl td.price        { order: 8; font-size: 16px; font-weight: 800; }
  .drill-ttbl td.price::before { font-size: 11px; font-weight: 700; }
  .drill-ttbl td.pyeong-price { order: 9; }   /* 매매: 거래가 옆 */
  .drill-ttbl td.rent         { order: 9; }   /* 월세: 보증금 옆 */
  .drill-ttbl td.change       { order: 10; grid-column: 1 / -1; }
}