/*
 * danji v2 지도 스타일(워크스트림 M 소유) — C5 디자인 시스템 v1.1(토스인베스트 벤치마크, 다크 퍼스트).
 * 토큰 그대로. 이모지 금지, 장식색 0, 트랜지션 150ms 1종, 그림자 금지(표면 대비로 위계).
 * Leaflet CSS는 map.js가 vendor에서 지연 로드(여기서 참조 안 함).
 */

:root {
  --danji-bg: #0F0F13;        /* 배경(셸과 통일) */
  --danji-surface: #17171D;   /* 서피스(카드·패널·버블) */
  --danji-surface2: #26262F;  /* 서피스2(호버·인풋) */
  --danji-ink: #ECECEF;       /* 본문 */
  --danji-sub: #84848E;       /* 보조 텍스트 */
  --danji-rule: #24242C;      /* 괘선 */
  --danji-rule2: #33333D;     /* 강조 괘선 */
  --danji-accent: #3E8BFF;    /* 액센트·링크(다크 위 텍스트, 링크 5.78:1) */
  --danji-accent-solid: #2A6FD6; /* 화이트 텍스트 버튼 배경(white 4.84:1 · non-text 3.96:1) */
  --danji-over: #F04452;      /* 상승·고평가(레드) */
  --danji-under: #3485FA;     /* 하락·저평가(블루) */
  --danji-fair: #8B8B93;      /* 적정·중립 */
  --danji-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--danji-font);
  color: var(--danji-ink);
  background: var(--danji-bg);
}

#danji-map, #map {
  position: absolute;
  inset: 0;
  background: var(--danji-bg);
}

/* 숫자 표기 일관 */
.danji-bub,
.danji-v,
.danji-chg,
#danji-panel {
  font-variant-numeric: tabular-nums;
}

/* ---- 지도 버블(C5 v1.1: 서피스 배경 + 판정색 1.5px 테두리 + 판정색 숫자, 라운드 풀필) ---- */
.danji-bub {
  display: inline-block;
  transform: translate(-50%, -50%);
  background: var(--danji-surface);
  border: 1.5px solid var(--danji-fair);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--danji-fair);
}
/* 거래량 상위 단지: 한 단계 크게(시각 위계) */
.danji-bub.danji-lg {
  font-size: 14px;
  padding: 3px 11px;
}
/* 근사 좌표(coordAcc="dong"): 점선 + 60% 불투명 */
.danji-bub.danji-approx {
  border-style: dashed;
  opacity: 0.6;
}

/* ---- 범례 ---- */
#danji-legend {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  max-width: 92vw;
  padding: 7px 15px;
  background: rgba(23, 23, 29, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--danji-rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--danji-sub);
}
.danji-ltitle { color: var(--danji-ink); font-weight: 700; }
.danji-lchip { display: inline-flex; align-items: center; gap: 5px; }
.danji-ldot {
  width: 12px;
  height: 12px;
  background: var(--danji-surface);
  border: 1.5px solid var(--danji-fair);
  border-radius: 7px;
}
.danji-lym { color: var(--danji-sub); }

/* ---- 동 필터 ---- */
#danji-dongs {
  position: absolute;
  top: 56px;
  left: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 62vh;
  overflow: auto;
}
#danji-dongs button {
  border: 1px solid var(--danji-rule);
  background: rgba(23, 23, 29, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--danji-ink);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
#danji-dongs button:hover {
  background: var(--danji-surface2);
}
#danji-dongs button[aria-pressed="true"] {
  background: var(--danji-accent-solid);
  color: #fff;
  border-color: var(--danji-accent-solid);
}

/* ---- 하단 패널(서피스 카드, 그림자 금지 - 표면 대비) ---- */
#danji-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 20px 18px;
  background: var(--danji-surface);
  border: 1px solid var(--danji-rule);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  /* 트랜지션 150ms 1종 */
  transition: transform 150ms ease;
}
#danji-panel[hidden] {
  display: block;   /* transform 애니메이션을 위해 display 유지 */
  transform: translateY(100%);
  pointer-events: none;
}
#danji-panel:not([hidden]) {
  transform: translateY(0);
}
.danji-x {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  background: none;
  color: var(--danji-sub);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.danji-name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--danji-ink);
  padding-right: 24px;
}
/* 히어로: 버블 pct 숫자가 주인공(26px 800, 토스 스타일) */
.danji-hero {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.danji-hero-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.danji-hero-verdict {
  font-size: 16px;
  font-weight: 700;
}
.danji-note { color: var(--danji-sub); font-size: 14px; }
.danji-stats {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--danji-ink);
}
.danji-k { color: var(--danji-sub); }
.danji-v { font-weight: 700; }
.danji-chg { font-weight: 700; }
.danji-sep { color: var(--danji-rule); }
.danji-approx {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--danji-sub);
}
/* CTA: 풀폭 라운드 12px(토스 스타일) */
.danji-go {
  display: block;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--danji-accent-solid);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}
.danji-go:hover { background: #245fc0; }

/* 포커스 링(C5 v1.1 마이크로 UX) */
#danji-dongs button:focus-visible,
.danji-x:focus-visible,
.danji-go:focus-visible {
  outline: 2px solid var(--danji-accent);
  outline-offset: 1px;
}

/* Leaflet 컨트롤 다크 톤 */
.leaflet-container { background: var(--danji-bg); }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--danji-surface);
  color: var(--danji-ink);
  border-bottom-color: var(--danji-rule);
}
.leaflet-bar a:hover { background: var(--danji-surface2); }
.leaflet-control-attribution {
  background: rgba(16, 16, 19, 0.7);
  color: var(--danji-sub);
}
.leaflet-control-attribution a { color: var(--danji-sub); }

/* 커스텀 스크롤바(동 필터) + 선택 색 — 셸과 통일 */
#danji-dongs::-webkit-scrollbar { width: 8px; }
#danji-dongs::-webkit-scrollbar-thumb {
  background: var(--danji-rule2);
  border-radius: 8px;
}
#danji-dongs::-webkit-scrollbar-thumb:hover { background: var(--danji-sub); }
::selection { background: rgba(62, 139, 255, 0.28); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #danji-panel, #danji-dongs button { transition: none; }
}