/* =========================================================================
   디자인 토큰
   출처: design-ref 의 DESIGN.md (색 oklch 값·타입 스케일·radius·shadow 원문 그대로).
   [추론] 표시가 붙은 항목은 원문에 없는 값을 우리가 정한 것.
   ========================================================================= */
:root {
  /* palette — 원문 값 그대로 */
  --c-white: oklch(1 0 0);
  --c-red-50: oklch(0.978 0.011 17.3);
  --c-red-100: oklch(0.960 0.020 28.9);
  --c-red-800: oklch(0.650 0.220 27.9);    /* UI primary — 유일한 강조색 */
  --c-red-900: oklch(0.598 0.232 29.6);
  --c-cyan-500: oklch(0.721 0.149 251.6);
  --c-cyan-800: oklch(0.641 0.196 254.6);
  --c-cyan-900: oklch(0.550 0.195 257.0);
  --c-green-800: oklch(0.640 0.124 172.3);
  --c-yellow-900: oklch(0.827 0.171 80.5);
  --c-orange-600: oklch(0.724 0.177 39.8);
  --c-navy-10: oklch(0.975 0.005 258.2);
  --c-navy-500: oklch(0.486 0.049 247.7);
  --c-violet-600: oklch(0.581 0.229 283.2);
  --c-violet-800: oklch(0.472 0.212 280.8);
  --c-n-10: oklch(0.985 0 0);
  --c-n-50: oklch(0.970 0 0);
  --c-n-100: oklch(0.925 0 0);
  --c-n-200: oklch(0.894 0 0);
  --c-n-300: oklch(0.792 0 0);
  --c-n-400: oklch(0.683 0 0);
  --c-n-500: oklch(0.637 0 0);
  --c-n-600: oklch(0.545 0 0);
  --c-n-700: oklch(0.475 0 0);
  --c-n-800: oklch(0.398 0 0);
  --c-n-900: oklch(0.252 0 0);
  --c-red-800-a24: oklch(0.650 0.220 27.9 / 24%);  /* 허용된 유채색 알파 */

  /* semantic (역할 이름은 우리 것, 값은 팔레트 참조) */
  --bg-page: var(--c-white);
  --bg-secondary: var(--c-n-50);
  --surface: var(--c-white);
  --ink: var(--c-n-900);
  --ink-2: var(--c-n-700);
  --ink-3: var(--c-n-600);
  --line: var(--c-n-100);
  --line-strong: var(--c-n-200);
  --accent: var(--c-red-800);
  --accent-soft: var(--c-red-50);

  /* 평당가 데이터 스케일 [추론] — 원문에 데이터 스케일 없음. 팔레트 유채색을 차가운→뜨거운 순으로 배열.
     불투명도 조정 금지 규칙 때문에 전부 원색 그대로 사용 (테두리 + 점으로 표현해 흰 글자 대비 문제 회피). */
  --scale-1: var(--c-navy-500);     /* ~500 */
  --scale-2: var(--c-cyan-500);     /* 500~ */
  --scale-3: var(--c-cyan-900);     /* 800~ */
  --scale-4: var(--c-green-800);    /* 1.2천~ */
  --scale-5: var(--c-yellow-900);   /* 1.8천~ */
  --scale-6: var(--c-orange-600);   /* 2.7천~ */
  --scale-7: var(--c-red-900);      /* 4천~ */
  --scale-8: var(--c-violet-600);   /* 6천~ */
  --scale-9: var(--c-violet-800);   /* 9천~ */

  /* typography — Pretendard (원문 지정 서체). 로드는 cdnjs [추론: 호스팅 선택] */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  /* spacing — 2px 기반 사다리 (원문도 수치는 추정치로 표기) */
  --sp-02: 2px; --sp-04: 4px; --sp-08: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px;

  /* radius — 닫힌 집합 */
  --r-02: 2px; --r-03: 3px; --r-04: 4px; --r-08: 8px; --r-10: 10px; --r-12: 12px; --r-16: 16px; --r-20: 20px; --r-half: 50%;
  --r-pill: 999px; /* [추론] pill 모양용 — 원문은 50%(half)로 원/필을 처리; 가변 폭 요소에서 50%는 타원이 되어 px 로 대체 */

  /* elevation — 역할명 그림자 */
  --sh-flat: 0 1px 2px oklch(0 0 0 / 6%);
  --sh-header: 0 4px 6px oklch(0 0 0 / 4%);
  --sh-dock: 0 -4px 8px oklch(0 0 0 / 6%);
  --sh-raised: 0 2px 16px oklch(0 0 0 / 8%);
  --sh-float: 0 2px 8px oklch(0 0 0 / 24%);
  --sh-sheet: 0 4px 20px oklch(0 0 0 / 32%);

  --topbar-h: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px; line-height: 17px;
  color: var(--ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-n-900); outline-offset: 2px; }

/* ---------- top bar (header container + Shadow/Header) ---------- */
.topbar {
  position: relative; z-index: 1100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-20);
  padding: 0 var(--sp-20);
  background: var(--surface);
  box-shadow: var(--sh-header);
}
.brand { display: flex; align-items: center; gap: var(--sp-10); min-width: 0; }
.brand-mark {   /* 우리 제품 아이콘 (막대그래프) — 브랜드 로고 아님 */
  flex: none; width: 32px; height: 32px; border-radius: var(--r-08);
  background: var(--accent); position: relative;
}
.brand-mark::after {
  content: ""; position: absolute; left: 9px; bottom: 8px; width: 14px; height: 14px;
  background:
    linear-gradient(var(--c-white), var(--c-white)) 0 100% / 4px 8px no-repeat,
    linear-gradient(var(--c-white), var(--c-white)) 5px 100% / 4px 14px no-repeat,
    linear-gradient(var(--c-white), var(--c-white)) 10px 100% / 4px 10px no-repeat;
}
.brand-text { min-width: 0; }
.brand h1 { margin: 0; font-size: 18px; line-height: 20px; font-weight: 700; white-space: nowrap; }  /* title-l */
.meta { margin: var(--sp-02) 0 0; font-size: 12px; line-height: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* caption-l */
.meta b { color: var(--ink-2); font-weight: 600; }
.meta .sample { color: var(--accent); font-weight: 700; }

.controls { display: flex; align-items: center; gap: var(--sp-12); margin-left: auto; min-width: 0; }

/* ---------- search bar ---------- */
.search { position: relative; width: 300px; }
.search input {
  width: 100%; height: 40px; padding: 0 var(--sp-12) 0 36px;
  border: 1px solid var(--bg-secondary); border-radius: var(--r-08); background: var(--bg-secondary);
  font: inherit; font-size: 15px; line-height: 18px; color: var(--ink); outline: none;  /* body-l */
}
.search input::placeholder { color: var(--c-n-500); }
.search input:hover { border-color: var(--line-strong); }
.search input:focus { border-color: var(--c-n-900); background: var(--surface); }  /* Border/PrimaryActivated [추론: 값 미공개 → neutral-900] */
.search-ico { position: absolute; left: var(--sp-10); top: var(--sp-10); width: 20px; height: 20px; fill: none; stroke: var(--c-n-600); stroke-width: 2; stroke-linecap: round; }
.search-list {
  position: absolute; top: 44px; left: 0; right: 0; margin: 0; padding: var(--sp-04);
  list-style: none; background: var(--surface); border-radius: var(--r-12);
  box-shadow: var(--sh-raised); max-height: 340px; overflow: auto; z-index: 1200;
}
.search-list li { padding: var(--sp-10) var(--sp-12); border-radius: var(--r-08); cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-08); font-size: 14px; line-height: 17px; }
.search-list li small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.search-list li.is-active, .search-list li:hover { background: var(--bg-secondary); }
.search-list li mark { background: none; color: var(--accent); font-weight: 700; }  /* 입력과 일치하는 텍스트 Highlight */
.search-list .empty { color: var(--ink-3); cursor: default; }
.search-list .empty:hover { background: none; }

/* ---------- filter chips (UI Typo — Semibold 600) ---------- */
.chips { display: flex; gap: var(--sp-08); }
.chip {
  height: 36px; padding: 0 var(--sp-14); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--c-n-800);
  font-size: 14px; line-height: 17px; font-weight: 600; white-space: nowrap;   /* ui-14 */
}
.chip:hover { background: var(--bg-secondary); }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- map stage ---------- */
.stage { position: relative; height: calc(100% - var(--topbar-h)); }
#map { position: absolute; inset: 0; background: var(--c-n-10); }
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-bar { border: none !important; box-shadow: var(--sh-float) !important; border-radius: var(--r-08) !important; overflow: hidden; }
.leaflet-bar a { color: var(--ink) !important; border-bottom-color: var(--line) !important; }
/* 배경 지도 [추론]: 원문에 지도 타일 지침 없음. 무채색으로 눌러 단일 강조색·데이터 스케일이 돋보이게 함 */
.basemap { filter: grayscale(1) contrast(.95); }

/* ---------- legend (card · Shadow/Raised) ---------- */
.legend {
  position: absolute; z-index: 800; left: var(--sp-12); bottom: var(--sp-24);
  background: var(--surface); border-radius: var(--r-12); box-shadow: var(--sh-raised);
  padding: var(--sp-10) var(--sp-12); font-size: 12px; line-height: 14px; color: var(--ink-2);
}
.legend-title { font-weight: 700; color: var(--ink); margin-bottom: var(--sp-08); font-size: 13px; line-height: 16px; }
.legend-title span { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.legend-scale { display: flex; gap: var(--sp-02); }
.legend-scale div { display: flex; flex-direction: column; align-items: center; gap: var(--sp-04); min-width: 34px; }
.legend-scale i { display: block; width: 100%; height: 8px; border-radius: var(--r-02); }
.legend-scale span { font-size: 10px; line-height: 12px; color: var(--ink-3); white-space: nowrap; }
.level-txt { margin-top: var(--sp-08); padding-top: var(--sp-08); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; max-width: 320px; }

/* ---------- price markers ----------
   원문 컴포넌트: 지도 위 가격 마커, 상태 Default · Is Viewed · Selected 3종이 동시에 구분 가능해야 함.
   치수·색은 원문 비공개 → 형태·치수 [추론]. 선택=강조색 채움, 열람=neutral-50 배경 (알파 감쇠 금지 규칙 준수). */
.bub-wrap { background: none; border: none; }
.bub {
  position: absolute; left: 0; top: 0;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.b-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: var(--r-half); background: var(--c); }

/* 구/동 집계 마커: 필 형태 */
.bub-agg {
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));   /* --dx/--dy: 겹침 회피용 비킴 */
  display: flex; align-items: center; gap: var(--sp-08);
  background: var(--surface); border: 2px solid var(--c); border-radius: var(--r-pill);
  padding: var(--sp-04) var(--sp-12) var(--sp-04) var(--sp-10);
  box-shadow: var(--sh-raised);
}
.bub-agg .b-price { font-size: 15px; line-height: 18px; font-weight: 700; color: var(--ink); }
.bub-agg .b-txt { display: flex; flex-direction: column; padding-left: var(--sp-08); border-left: 1px solid var(--line); }
.bub-agg .b-name { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--c-n-800); }
.bub-agg .b-cnt { font-size: 11px; line-height: 13px; color: var(--ink-3); }
.bub-agg.is-sido .b-price { font-size: 16px; line-height: 19px; }
.bub-agg:hover { box-shadow: var(--sh-float); transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 2px + var(--dy, 0px))); }

/* 단지 마커: 말풍선 (아래 꼬리가 실제 위치를 가리킴) */
.bub-cx {
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 7px + var(--dy, 0px)));
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--c); border-radius: var(--r-08);
  padding: var(--sp-04) var(--sp-08); text-align: center;
  box-shadow: var(--sh-raised);
}
.bub-cx::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--c);
}
.bub-cx .b-name { display: block; font-size: 11px; line-height: 13px; font-weight: 600; color: var(--c-n-700); max-width: 104px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.bub-cx .b-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-04); }
.bub-cx .b-dot { width: 8px; height: 8px; }
.bub-cx .b-price { font-size: 15px; line-height: 18px; font-weight: 700; }
.bub-cx .b-area { font-size: 10px; line-height: 12px; color: var(--ink-3); }
.bub-cx:hover { box-shadow: var(--sh-float); transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 9px + var(--dy, 0px))); }

/* 열람(Is Viewed) — 이미 상세를 열어 본 마커 */
.bub.is-viewed { background: var(--c-n-50); }
.bub.is-viewed .b-price, .bub.is-viewed .b-name { color: var(--c-n-600); }

/* 선택(Selected) — 강조색 채움 */
.bub.is-active { background: var(--accent); border-color: var(--accent); box-shadow: var(--sh-float); }
.bub.is-active .b-price, .bub.is-active .b-name, .bub.is-active .b-area, .bub.is-active .b-cnt { color: var(--c-white); }
.bub.is-active .b-dot { box-shadow: 0 0 0 2px var(--c-white); }
.bub.is-active .b-txt { border-left-color: var(--c-red-100); }
.bub-cx.is-active::after { border-top-color: var(--accent); }
.leaflet-marker-icon:hover { z-index: 100000 !important; }

/* 축소 모드(넓은 줌의 시도·시군구): 건수 숨김, 작은 필 */
.z-compact .bub-agg { padding: var(--sp-02) var(--sp-10) var(--sp-02) var(--sp-08); gap: var(--sp-04); }
.z-compact .bub-agg .b-price { font-size: 13px; line-height: 16px; }
.z-compact .bub-agg .b-name { font-size: 12px; line-height: 14px; }
.z-compact .bub-agg .b-cnt { display: none; }
.z-compact .bub-agg .b-txt { padding-left: var(--sp-04); }
.z-compact .b-dot { width: 8px; height: 8px; }

/* 단지 데이터 지연 로드 표시 (Shadow/Float) */
.loading {
  position: absolute; z-index: 900; top: var(--sp-12); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-08);
  background: var(--surface); border-radius: var(--r-pill); box-shadow: var(--sh-float);
  padding: var(--sp-08) var(--sp-14); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink);
}
.loading[hidden] { display: none; }
.loading i { width: 14px; height: 14px; border-radius: var(--r-half); border: 2px solid var(--c-n-100); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tbl .b-dot { width: 8px; height: 8px; vertical-align: 1px; }

/* ---------- hover card (Shadow/Raised — dialog 성격) ---------- */
.hovercard {
  position: absolute; z-index: 1000; width: 320px;
  background: var(--surface); border-radius: var(--r-12); box-shadow: var(--sh-raised);
  border: 1px solid var(--line);
  padding: var(--sp-14) var(--sp-16) var(--sp-12); pointer-events: none;
}
.hovercard[hidden] { display: none; }
.hc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-10); }
.hc-title { font-size: 16px; line-height: 19px; font-weight: 700; }                 /* title-m */
.hc-sub { font-size: 12px; line-height: 14px; color: var(--ink-3); margin-top: var(--sp-02); }
.hc-price { font-size: 20px; line-height: 24px; font-weight: 700; color: var(--ink); white-space: nowrap; } /* display-s */
.hc-chart { position: relative; height: 140px; margin: var(--sp-10) 0 var(--sp-08); }
.hc-stats { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-04) var(--sp-10); margin: 0; font-size: 13px; line-height: 16px; padding-top: var(--sp-08); border-top: 1px solid var(--line); }
.hc-stats dt { color: var(--ink-3); }
.hc-stats dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; }
.hc-stats dd b { font-weight: 700; }
.hovercard .hc-more { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-04);
  width: 100%; height: 44px; border-radius: var(--r-08);
  font-size: 15px; line-height: 18px; font-weight: 600;   /* ui-15 */
}
.btn-primary { background: var(--accent); border: none; color: var(--c-white); }
.btn-primary:hover { background: var(--c-red-900); }
.btn-secondary { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--bg-secondary); }
.btn .arr { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- side panel / bottom sheet (Shadow/Sheet) ---------- */
.panel {
  position: absolute; z-index: 1050; top: 0; right: 0; bottom: 0; width: 400px;
  background: var(--surface); box-shadow: var(--sh-sheet);
  display: flex; flex-direction: column;
  transform: translateX(110%); transition: transform .22s ease;
}
.panel.is-open { transform: none; }
.panel-grip { display: none; }
.panel-head { display: flex; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-20) var(--sp-20) var(--sp-16); }
.p-kicker { font-size: 12px; line-height: 14px; color: var(--accent); font-weight: 600; }
.p-title { margin: var(--sp-04) 0; font-size: 24px; line-height: 28px; font-weight: 700; }   /* display-m */
.p-sub { font-size: 13px; line-height: 16px; color: var(--ink-3); }
.p-close {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-half); border: none;
  background: var(--bg-secondary); color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.p-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.p-close:hover { background: var(--c-n-100); }
.panel-body { flex: 1; overflow-y: auto; padding: 0 var(--sp-20) var(--sp-32); }
.p-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-08); }
.tile { background: var(--bg-secondary); border-radius: var(--r-12); padding: var(--sp-12); min-width: 0; }
.tile .t-lab { font-size: 12px; line-height: 14px; color: var(--ink-3); }
.tile .t-val { font-size: 18px; line-height: 20px; font-weight: 700; margin-top: var(--sp-04); }   /* title-l */
.tile .t-sub { font-size: 11px; line-height: 13px; color: var(--ink-3); margin-top: var(--sp-04); }
.p-chart { position: relative; height: 190px; margin: var(--sp-16) 0 var(--sp-08); }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; margin: var(--sp-24) 0 var(--sp-08); }
.sec-h h3 { margin: 0; font-size: 16px; line-height: 19px; font-weight: 700; }
.sec-h span { font-size: 12px; color: var(--ink-3); }
.btn-zoom { margin-top: var(--sp-16); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 17px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; line-height: 14px; padding: var(--sp-08) var(--sp-04); background: var(--bg-secondary); }
.tbl th:first-child { border-radius: var(--r-08) 0 0 var(--r-08); }
.tbl th:last-child { border-radius: 0 var(--r-08) var(--r-08) 0; }
.tbl td { padding: var(--sp-10) var(--sp-04); border-bottom: 1px solid var(--line); }
.tbl .r { text-align: right; }
.tbl td.price { font-weight: 700; }
.tbl .muted { color: var(--ink-3); }
.tbl tr.is-outlier td { color: var(--c-n-500); }
.tbl tr.is-outlier td.price { font-weight: 400; }   /* 취소선은 '원가' 전용 규칙 → 사용 안 함 */
.tag { display: inline-block; font-size: 10px; line-height: 12px; font-weight: 600; color: var(--c-n-700); background: var(--c-n-100); border-radius: var(--r-04); padding: var(--sp-02) var(--sp-04); margin-left: var(--sp-04); vertical-align: 1px; }
.tbl tr.link { cursor: pointer; }
.tbl tr.link:hover td { background: var(--c-n-10); }
.note { font-size: 12px; color: var(--ink-3); margin-top: var(--sp-08); line-height: 16px; }
.noscript { padding: var(--sp-20); }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  :root { --topbar-h: 116px; }
  .topbar { flex-direction: column; align-items: stretch; gap: var(--sp-08); padding: var(--sp-10) var(--sp-20); }
  .brand h1 { font-size: 16px; line-height: 19px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-mark::after { left: 7px; bottom: 7px; }
  .controls { margin-left: 0; gap: var(--sp-08); }
  .search { flex: 1; width: auto; min-width: 0; }
  .search input { height: 40px; font-size: 16px; }
  .chips { overflow-x: auto; scrollbar-width: none; flex: none; max-width: 52%; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 32px; padding: 0 var(--sp-10); font-size: 13px; line-height: 16px; }   /* ui-13 */
  .legend { bottom: var(--sp-20); left: var(--sp-10); padding: var(--sp-08) var(--sp-10); }
  .level-txt { font-size: 11px; line-height: 13px; max-width: 220px; }

  .hovercard {
    pointer-events: auto; left: var(--sp-10) !important; right: var(--sp-10); top: auto !important; bottom: var(--sp-12);
    width: auto; z-index: 1060; box-shadow: var(--sh-float);
  }
  .hovercard .hc-more { display: flex; margin-top: var(--sp-12); }

  .panel {
    top: auto; left: 0; width: 100%; height: 72%;
    border-radius: var(--r-20) var(--r-20) 0 0;
    transform: translateY(110%);
  }
  .panel.is-open { transform: none; }
  .panel-grip { display: block; width: 40px; height: 4px; border-radius: var(--r-02); background: var(--c-n-200); margin: var(--sp-08) auto 0; }
  .panel-head { padding: var(--sp-08) var(--sp-20) var(--sp-12); }
  .p-title { font-size: 20px; line-height: 24px; }
  .panel-body { padding: 0 var(--sp-20) calc(var(--sp-24) + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .controls { flex-direction: column; align-items: stretch; }
  :root { --topbar-h: 156px; }
  .chips { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .bub { transition: none; }
}

/* 차트 범례 */
.chart-key { display: flex; flex-wrap: wrap; gap: var(--sp-04) var(--sp-12); }
.chart-key span { display: inline-flex; align-items: center; gap: var(--sp-04); }
.chart-key i { display: inline-block; }
.k-pt { width: 8px; height: 8px; border-radius: var(--r-half); background: var(--c-cyan-800); }
.k-line { width: 14px; height: 2px; background: var(--accent); }
.k-out { width: 7px; height: 7px; border: 1.5px solid var(--c-n-400); transform: rotate(45deg); }

/* 아주 넓은 줌(z≤6, 휴대폰 첫 화면): 가격+이름만 [border 4 + padding 12 + gap 4 + 글자] */
.z-tiny .bub-agg { padding: 1px 6px; gap: 4px; border-width: 2px; }
.z-tiny .bub-agg .b-dot { display: none; }
.z-tiny .bub-agg .b-price { font-size: 11px; line-height: 14px; }
.z-tiny .bub-agg .b-name { font-size: 11px; line-height: 14px; }
.z-tiny .bub-agg .b-txt { padding-left: 0; border-left: 0; }