/* house — Naver-derived tokens (verbatim from open-design/naver DESIGN.md). Fresh / 산뜻한. */
:root {
  --page: #FFFFFF;
  --surface-subtle: #F5F6F8;
  --surface-section: #F0F2F5;
  --ink-1: #191E29;
  --ink-2: #454D59;
  --ink-3: #6B7178;   /* 본문 보조텍스트 AA(4.5:1) — 기존 #8B8D90은 3.3 미달 */
  --ink-4: #7A8290;   /* 비활성/캡션 — 기존 #9AA0A6은 2.6:1 미달, AA 근접으로 darken */
  --green: #03C75A;
  --green-hover: #03B554;
  --green-subtle: #E7F7EE;
  --green-text: #06A847;
  --green-btn: #178A47;   /* 흰 텍스트 버튼 배경 전용 — #03C75A는 흰글자 대비 2.25 미달. 닷/보더/포인트엔 green 유지 */
  --link: #0068C3;
  --live: #E41E3F;
  --warning: #FF9D2C;
  --border: #EAEDF0;
  --border-subtle: #F0F2F5;
  --border-strong: #D1D6DB;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --r-card: 8px;
  --r-btn: 6px;
  --r-pill: 9999px;
  --r-thumb: 4px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--ink-1);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- topbar ---------- */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--page);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--green); cursor: pointer; }
.region {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface-section); border: none;
  padding: 6px 9px 6px 11px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.region svg { color: var(--ink-3); }
.region-sel { border: 1px solid var(--border); background: var(--surface-section); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-1); cursor: pointer; }

/* segmented control tabs — 컨테이너 안 선택지로 인지 (토스 결). 비활성 ink-2(AA 충족) */
.tabs { display: flex; gap: 2px; background: var(--surface-section); border-radius: var(--r-pill); padding: 3px; align-self: center; }
.tab {
  border: none; background: transparent; height: 32px;
  padding: 0 15px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-pill); position: relative; cursor: pointer;
  transition: background var(--dur-1) var(--ease-snap), color var(--dur-1) var(--ease-snap);
}
.tab:hover { color: var(--ink-1); }
.tab.is-active { background: var(--page); color: var(--ink-1); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
[data-theme="dark"] .tab.is-active { background: #323845; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-subtle); }
.hdr-ic { display: none; }   /* 데스크탑: 공지·로그인 텍스트만(아이콘 숨김). 모바일에선 아이콘만 표시 */

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 372px 1fr; height: calc(100vh - 56px); }
.panel { position: relative; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--page); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 8px; }
.count { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.count b { color: var(--green-text); font-feature-settings: "tnum" on; }
.sort { border: 1px solid var(--border); background: var(--page); border-radius: var(--r-btn); padding: 5px 9px; font-size: 12px; color: var(--ink-2); }

/* ---------- list ---------- */
.list { list-style: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow-y: auto; flex: 1; min-height: 0; }
.card {
  padding: 13px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-1) var(--ease-snap);
}
.card:hover { background: var(--surface-subtle); }
.card.is-active { background: var(--green-subtle); }   /* 강조=배경 음영 (사이드 띠 슬롭 회피) */
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; flex: 1 1 auto; min-width: 0; }
.cn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }   /* 긴 단지명 … 처리 — 가격과 겹치지 않게 */
.card-price { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink-1); font-feature-settings: "tnum" on; white-space: nowrap; flex: none; }   /* 가격=카드 주인공: 이름(14/700)보다 확실히 우위 */
.card-price.empty { color: var(--ink-4); font-weight: 600; font-size: 13px; }
.card-sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 3px 8px; }
.card-sub .sep { color: var(--ink-4); }
.card-meta { margin-top: 8px; display: flex; gap: 5px; }
.chip {
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-section); color: var(--ink-2); font-feature-settings: "tnum" on;
}
.chip.on { background: var(--green-subtle); color: var(--green-text); }

/* ---------- detail ---------- */
.detail {
  position: absolute; inset: 0; background: var(--page); z-index: 10;
  display: flex; flex-direction: column; min-height: 0;
  animation: slide .16s ease;
}
.detail[hidden] { display: none; }
@keyframes slide { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.back { border: 1px solid var(--border); background: var(--page); width: 30px; height: 30px; border-radius: var(--r-btn); color: var(--ink-2); font-size: 15px; display: grid; place-items: center; }
.detail-title { font-size: 16px; font-weight: 700; }
.detail-body { padding: 16px 18px 28px; overflow-y: auto; }
.d-price { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-feature-settings: "tnum" on; }
.d-price small { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 5px; }
.d-sub { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.d-specs { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); word-break: keep-all; }

.section-label { margin: 20px 0 9px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.kv { display: grid; grid-template-columns: 80px 1fr; gap: 7px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink-1); font-weight: 500; font-feature-settings: "tnum" on; }
.offer-row { display: flex; gap: 7px; }
.offer { flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-card); background: var(--surface-subtle); }
.offer .n { font-size: 19px; font-weight: 800; font-feature-settings: "tnum" on; }
.offer .l { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.offer.on { background: var(--green-subtle); }
.offer.on .n { color: var(--green-text); }

.verify { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px 15px; }
.verify-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.verify-row .ic { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; flex: none; }
.verify-row.pending { color: var(--ink-3); }
.verify-row .ic.pend { background: var(--ink-4); }
.verify-note { margin-top: 7px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
/* 월세 탭 전세가율 컴팩트 배지 — 전세사기 위험도 게이지 대신(월세엔 과잉경고 회피, 전세가율만 참고) */
.jr-compact { margin: 8px 0; padding: 8px 11px; border-radius: 9px; background: var(--surface-section); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.jr-compact b { font-weight: 700; }
.jr-compact.jr-danger { background: #fdecec; color: #b23b3b; }
.jr-compact.jr-warn { background: #fff4e0; color: #9a6a00; }
[data-theme="dark"] .jr-compact.jr-danger { background: #3a1d1d; color: #f0a0a0; }
[data-theme="dark"] .jr-compact.jr-warn { background: #3a2a10; color: #fbbf24; }
.jr-compact .jr-note { flex-basis: 100%; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }

/* ---------- map ---------- */
.mapwrap { position: relative; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; }
#map > div:first-child { height: 100% !important; }
.map-note { position: absolute; left: 12px; bottom: 12px; z-index: 500; background: rgba(25,30,41,.78); color: #fff; font-size: 11.5px; padding: 5px 10px; border-radius: var(--r-pill); }

.price-pin {
  background: var(--page); border: 1.5px solid var(--green); color: var(--green-text);
  font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-card); white-space: nowrap; font-feature-settings: "tnum" on;
  transform: translate(-50%, -50%);
}
.price-pin.on { background: var(--green-btn); border-color: var(--green); color: #fff; z-index: 1000 !important; }
.price-pin.muted { color: var(--ink-3); border-color: var(--border-strong); }

.empty-state { padding: 40px 24px; text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }
.es-reset { margin-top: 14px; padding: 9px 18px; border: 1px solid var(--green); border-radius: 9px; background: var(--page); color: var(--green-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.es-reset:active { transform: scale(.96); }

/* ---------- filters ---------- */
.filters { display: flex; gap: 6px; align-items: center; padding: 10px 14px 4px; flex-wrap: wrap; }
.filt { border: 1px solid var(--border); background: var(--page); border-radius: var(--r-btn); padding: 6px 10px; font-size: 12.5px; color: var(--ink-2); min-height: 36px; }
@media (max-width: 768px) { .filt { min-height: 42px; } }   /* 모바일 터치타겟 — 필터 셀렉트 첫 탭에 안정적으로 열리게 */
.filt:disabled { color: var(--ink-4); background: var(--surface-subtle); }
.filt-reset { border: none; background: transparent; color: var(--green-text); font-size: 12.5px; font-weight: 600; padding: 6px 4px; }
.filt-more-btn { flex: none; border: 1px solid var(--border); background: var(--green-subtle); color: var(--green-text); border-radius: var(--r-btn); padding: 6px 11px; font-size: 12.5px; font-weight: 600; min-height: 36px; white-space: nowrap; }
@media (min-width: 769px) { .filt-more-btn { display: none; } }   /* 데스크탑은 필터바가 이미 wrap이라 불필요 */
@media (max-width: 768px) {
  .filt-more-btn { min-height: 42px; position: sticky; left: 0; z-index: 3; box-shadow: 7px 0 8px -3px var(--page); }
  .filters.open { flex-wrap: wrap; overflow-x: visible; padding-right: 14px; }
  .filters.open .filt-more-btn { position: static; box-shadow: none; }
}

/* ---------- badges on cards ---------- */
.badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }
.badge.safe { background: var(--green-subtle); color: var(--green-text); }
.badge.warn { background: #FFF4E5; color: #9A5200; }
.badge.danger { background: #FDE7EA; color: #C01530; }
.badge.real { background: #EAF1FB; color: var(--link); }

/* ---------- section sublabel ---------- */
.section-label { display: flex; align-items: baseline; gap: 7px; }
.sl-sub { font-size: 11px; font-weight: 500; color: var(--ink-4); }

/* ---------- trend chart ---------- */
svg.trend { width: 100%; height: auto; display: block; background: var(--surface-subtle); border-radius: var(--r-card); padding: 4px; }
svg.trend .ax { font-size: 9px; fill: var(--ink-3); font-weight: 600; }
.legend { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.legend .ax2 { margin-left: auto; color: var(--ink-4); font-size: 10.5px; }
.chart-empty, .art-empty { padding: 18px; text-align: center; color: var(--ink-4); font-size: 12.5px; background: var(--surface-subtle); border-radius: var(--r-card); }

/* ---------- recent real deals ---------- */
.recent { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.rrow { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; flex-wrap: nowrap; white-space: nowrap; }
.rrow + .rrow { border-top: 1px solid var(--border-subtle); }
.rrow > span:first-child { color: var(--ink-2); flex: none; }
.rrow b { color: var(--ink-1); flex: none; font-feature-settings: "tnum" on; }
.ax2 { margin-left: auto; color: var(--ink-3); font-size: 12px; flex: none; }

/* ---------- verify states ---------- */
.verify-row.ok { color: var(--ink-1); }
.verify-row.bad { color: var(--live); }
.verify-row.warn { color: #C2700A; }
.ic.ok { background: var(--green); }
.ic.bad { background: var(--live); }
.ic.warn { background: var(--warning); }

/* ---------- articles ---------- */
.arts { display: flex; flex-direction: column; gap: 8px; }
.art { border: 1px solid var(--border); border-radius: var(--r-card); padding: 11px 13px; }
.art-top { display: flex; align-items: baseline; gap: 8px; }
.art-trade { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-thumb); color: #fff; }
.art-trade.deal { background: #2E6FF2; } .art-trade.lease { background: var(--green); } .art-trade.rent { background: #8B5CF6; }
.art-price { font-size: 15px; font-weight: 800; font-feature-settings: "tnum" on; }
.art-sub { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
.art-feat { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-meta { margin-top: 7px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.atag { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-thumb); background: var(--surface-section); color: var(--ink-2); }
.art-realtor { margin-left: auto; font-size: 11px; color: var(--ink-4); }

/* ---------- pyeong types ---------- */
.pyeongs { display: flex; flex-wrap: wrap; gap: 6px; }
.pyeong-chip { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--r-card); font-size: 13px; font-weight: 700; color: var(--ink-1); font-feature-settings: "tnum" on; }
.pyeong-chip small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); }

/* ---------- article card (opens popup) ---------- */
.art { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.art:hover { border-color: var(--green); background: var(--surface-subtle); }
.art-ext { margin-left: auto; color: var(--ink-4); font-size: 13px; font-weight: 700; }

/* ---------- article windows (stacking, draggable) ---------- */
.art-modal { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }
.art-modal[hidden] { display: none !important; }
.am-card { position: absolute; pointer-events: auto; background: var(--page); border: 1px solid var(--border); border-radius: 12px; width: 360px; max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.28); overflow: hidden; animation: slide .14s ease; }
.am-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: move; background: var(--surface-subtle); user-select: none; }
.am-htitle { font-size: 13px; font-weight: 700; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.am-head button { border: none; background: transparent; width: 26px; height: 26px; border-radius: 6px; font-size: 17px; color: var(--ink-3); cursor: pointer; flex: none; }
.am-head button:hover { background: var(--border); color: var(--ink-1); }
.am-body { padding: 16px 18px 20px; overflow-y: auto; }
.am-price { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-feature-settings: "tnum" on; color: var(--ink-1); }
.am-complex { margin-top: 3px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.am-kv { display: grid; grid-template-columns: 64px 1fr; gap: 9px 12px; margin-top: 16px; font-size: 14px; }
.am-kv dt { color: var(--ink-3); }
.am-kv dd { margin: 0; color: var(--ink-1); font-weight: 500; font-feature-settings: "tnum" on; }
.am-feat { margin-top: 14px; padding: 12px 14px; background: var(--surface-subtle); border-radius: var(--r-card); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.am-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.am-naver { display: block; margin-top: 16px; text-align: center; padding: 12px; background: var(--green-btn); color: #fff; border-radius: var(--r-card); font-weight: 700; font-size: 14px; text-decoration: none; }
.am-naver:hover { background: var(--green-hover); }
.naver-link { display: inline-block; margin-top: 8px; color: var(--green-text); font-weight: 700; font-size: 12.5px; text-decoration: none; }
.naver-link:hover { text-decoration: underline; }
.nv-btn { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green-text); text-decoration: none; border: 1px solid var(--border); padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.nv-btn:hover { border-color: var(--green); }

/* ---------- cost calculator ---------- */
.cost { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.cost-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; font-size: 13.5px; }
.cost-row + .cost-row { border-top: 1px solid var(--border-subtle); }
.cost-row span { color: var(--ink-2); }
.cost-row b { color: var(--ink-1); font-feature-settings: "tnum" on; }
.cost-row.total { background: var(--surface-subtle); }
.cost-row.total b { color: var(--green-text); font-size: 15px; }

/* ---------- theme toggle ---------- */
.theme-toggle { border: none; background: var(--surface-section); width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { color: var(--ink-1); }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }

/* ---------- dark mode ---------- */
[data-theme="dark"] {
  --page: #15171C;
  --surface-subtle: #1C1F26;
  --surface-section: #232730;
  --ink-1: #ECEEF2;
  --ink-2: #AEB4BF;
  --ink-3: #79808B;
  --ink-4: #6D7582;   /* 다크 캡션 — 기존 #545A64는 2.6:1 미달, AA 근접 */
  --green: #1AD173;
  --green-hover: #16BE68;
  --green-subtle: #16301F;
  --green-text: #34D17E;
  --link: #5AA9F0;
  --border: #2A2F39;
  --border-subtle: #21262E;
  --border-strong: #3A414C;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.45);
}
[data-theme="dark"] .badge.warn { background: #3a2e12; color: #E8B14D; }
[data-theme="dark"] .badge.danger { background: #3a1820; color: #F0788A; }
[data-theme="dark"] .badge.real { background: #16243a; color: #6BA8E8; }
[data-theme="dark"] svg.trend { background: var(--surface-section); }

/* ---------- search ---------- */
.searchbar { display: flex; align-items: center; gap: 7px; margin: 12px 14px 0; padding: 8px 12px; background: var(--surface-section); border-radius: var(--r-btn); color: var(--ink-3); }
.searchbar svg { flex: none; }
.searchbar input { border: none; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--ink-1); width: 100%; }
.searchbar input::placeholder { color: var(--ink-3); }

/* ---------- favorites ---------- */
.fav-filt { cursor: pointer; }
.fav-filt.on, #f-showall.on { background: var(--green-subtle); color: var(--green-text); border-color: var(--green); }   /* 토글 버튼(관심·전체단지) 활성=채움. --green-subtle은 다크 오버라이드(#16301F) 있어 양쪽 안전 */
.card-name { display: inline-flex; align-items: center; min-width: 0; }
.fav-star { border: none; background: none; padding: 0; margin-right: 5px; color: var(--ink-4); cursor: pointer; line-height: 0; flex: none; position: relative; }
.fav-star::before { content: ''; position: absolute; inset: -13px; }   /* 15px 아이콘에 보이지 않는 ~41px 탭존(레이아웃 안 밀고 터치만 확대) */
.fav-star:hover { color: var(--green); }
.fav-star.on { color: var(--green); }

/* ---------- compare button ---------- */
.cmp-btn { margin-top: 13px; width: 100%; padding: 11px; border: 1px solid var(--border); background: var(--page); border-radius: var(--r-card); font-size: 13.5px; font-weight: 700; color: var(--ink-1); cursor: pointer; }
.cmp-btn:hover { border-color: var(--green); }
.cmp-btn.on { background: var(--green-subtle); color: var(--green-text); border-color: var(--green); }

/* ---------- compare bar ---------- */
.compare-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: 12px; background: var(--ink-1); color: var(--page); padding: 10px 14px; border-radius: var(--r-pill); box-shadow: 0 8px 28px rgba(0,0,0,.28); max-width: 92vw; }
.cb-count { font-size: 13px; white-space: nowrap; font-weight: 600; }
.cb-count b { color: var(--green); }
.cb-chips { display: flex; gap: 6px; overflow-x: auto; }
.cb-chip { display: inline-flex; align-items: center; gap: 3px; background: rgba(125,125,125,.28); padding: 4px 6px 4px 10px; border-radius: var(--r-pill); font-size: 12px; white-space: nowrap; }
.cb-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: .85; }
.cb-go { border: none; background: var(--green-btn); color: #fff; font-weight: 700; padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px; white-space: nowrap; }
.cb-clear { border: none; background: none; color: rgba(160,160,160,.9); cursor: pointer; font-size: 12px; white-space: nowrap; }

/* ---------- compare modal ---------- */
.compare-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; }
.compare-modal[hidden], .compare-bar[hidden] { display: none !important; }
.cmp-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cmp-card { position: relative; background: var(--page); border-radius: 16px; max-width: min(92vw, 760px); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0,0,0,.3); overflow: hidden; }
@media (min-width: 1024px) { .cmp-card { width: min(80vw, 760px); } }   /* 데스크탑: 내용맞춤(512px)이면 차트·3단지 표가 좁음 → 고정폭으로 숨통 */
.cmp-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); font-size: 16px; color: var(--ink-1); }
.cmp-head button { border: none; background: var(--surface-section); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.cmp-scroll { overflow: auto; }
.cmp-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.cmp-table thead th { position: sticky; top: 0; background: var(--surface-subtle); font-weight: 700; color: var(--ink-1); }
.cmp-table td { color: var(--ink-1); font-feature-settings: "tnum" on; }
.cmp-table td.rl, .cmp-table thead th:first-child { text-align: left; color: var(--ink-3); font-weight: 600; position: sticky; left: 0; background: var(--page); }
.cmp-table thead th:first-child { background: var(--surface-subtle); }

/* ============================================================
   DESIGN POLISH PASS (네이버 결 유지 + PATTERNS.md 적용)
   - 가변폰트 미세굵기 / 큰 숫자 음수트래킹+tnum / 명도 위계 / 부드러운 마이크로 트랜지션
   ============================================================ */
body { font-weight: 450; letter-spacing: -0.003em; }

/* 큰 숫자(가격)는 타이트 트래킹 + 타뉴메랄 — 데이터앱 히어로 */
.card-price, .d-price, .am-price, .offer .n, .cmp-table td { font-feature-settings: "tnum" on, "ss01" on; }
.d-price, .am-price { letter-spacing: -0.025em; font-weight: 800; }
.card-price { letter-spacing: -0.015em; font-weight: 800; }

/* 타이포 위계: 크기보다 명도/굵기 (PATTERNS #8) */
.card-name { font-weight: 700; letter-spacing: -0.015em; }
.section-label { letter-spacing: 0.01em; text-transform: none; }

/* 카드 — 미세 호버 리프트 + 또렷한 선택 */
.card { transition: background .13s ease, border-color .13s ease, box-shadow .13s ease; }
.card.is-active { box-shadow: inset 0 0 0 1px rgba(3,199,90,.15); }

/* 탭 — 활성 인디케이터 약간 더 또렷하게 (컬러 1존: 그린은 여기/선택/CTA에 집중) */
.tab.is-active::after { height: 3px; border-radius: 3px 3px 0 0; }

/* 칩/뱃지 — 더 차분하게 (무채색 우선, 그린은 강조만) */
.chip { font-weight: 600; letter-spacing: -0.01em; }
.badge { letter-spacing: -0.01em; }

/* 매물 카드 — 거래유형 배지/가격 정렬 다듬기 */
.art-trade { letter-spacing: 0.01em; }
.art-price { letter-spacing: -0.012em; }

/* ---------- 윈도우 크롬 다듬기 (부동산 브라우저) ---------- */
.am-card { border-radius: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 18px 50px -12px rgba(0,0,0,.32); }
.am-head { padding: 0 10px 0 12px; height: 42px; background: linear-gradient(var(--surface-subtle), var(--page)); }
.am-head .art-trade { transform: scale(.92); }
.am-htitle { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.am-head button { font-size: 0; position: relative; width: 24px; height: 24px; border-radius: 50%; }
.am-head button::before { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center/11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 11px no-repeat;
  transform: rotate(45deg); }
.am-body { padding: 18px 18px 20px; }
.am-price { font-size: 25px; }

/* ---------- 다크 모드 미세 보정 ---------- */
[data-theme="dark"] body { font-weight: 430; }
[data-theme="dark"] .am-head { background: linear-gradient(#20242c, #1a1d24); }
[data-theme="dark"] .card.is-active { box-shadow: inset 0 0 0 1px rgba(26,209,115,.22); }

/* ---------- 부드러운 인터랙션 (motion craft: hover ~120ms) ---------- */
.tab, .chip, .filt, .sort, .region-sel, .theme-toggle, .nv-btn, .cmp-btn, .fav-star, .am-head button, .back, .cb-go {
  transition: background .13s ease, color .13s ease, border-color .13s ease, transform .12s ease, box-shadow .13s ease;
}
.cmp-btn:active, .cb-go:active, .am-naver:active { transform: translateY(1px); }

/* ============================================================
   MOTION CRAFT — Corporate 퍼스널리티 (clean dashboard, 오버슈트 0)
   signature easing cubic-bezier(.2,0,0,1) / duration 140·240·360 / enter>exit
   craft 표(LottieFiles motion-design)를 CSS 이벤트 모션에 적용
   ============================================================ */
:root {
  --ease-snap: cubic-bezier(.2, 0, 0, 1);     /* 80% 기본 (MD3 snappy) */
  --ease-out: cubic-bezier(.05, .7, .1, 1);    /* 진입 강조 (MD3 emphasized) */
  --ease-in: cubic-bezier(.3, 0, 1, 1);        /* 퇴장 (MD3 accelerate) */
  --dur-1: 140ms;  /* quick — 프레스/마이크로 */
  --dur-2: 240ms;  /* standard — 카드/패널/창 */
  --dur-3: 360ms;  /* slow — 모달/맥락전환 */
}

/* 윈도우 창 — 진입: slide-up+scale+fade(primary) / 퇴장: enter의 ~60% (firm, no bounce) */
@keyframes win-in  { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes win-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.975); } }
.am-card { animation: win-in var(--dur-2) var(--ease-out); }
.am-card.am-closing { animation: win-out var(--dur-1) var(--ease-in) forwards; pointer-events: none; }

/* 단지 상세 패널 — 우측 슬라이드, signature easing */
.detail { animation: panel-in var(--dur-2) var(--ease-snap); }
@keyframes panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* 비교 모달 — scale+fade(heavy/300-400ms), 백드롭 페이드(ambient) */
.cmp-card { animation: modal-in var(--dur-3) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.cmp-back, .am-back { animation: fade-in var(--dur-2) ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 비교 바 — 하단에서 올라옴 */
.compare-bar:not([hidden]) { animation: bar-in var(--dur-2) var(--ease-out); }
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 프레스 피드백 (Corporate: firm, 바운스 없음) + 스내피 호버 */
.card:active { transform: scale(.995); }
.tab:active, .filt:active, .chip:active, .fav-star:active, .back:active { transform: scale(.96); }
.card, .tab, .chip, .filt, .sort, .region-sel, .nv-btn, .cmp-btn, .am-naver, .back, .fav-star, .theme-toggle, .pyeong-chip {
  transition-timing-function: var(--ease-snap);
}

/* 가격 핀 마커 — 호버시 살짝 떠오름 (지도 위 깊이감, secondary) */
.price-pin { transition: transform .14s var(--ease-snap), box-shadow .14s var(--ease-snap); }
.price-pin:hover { box-shadow: 0 4px 14px rgba(0,0,0,.16); z-index: 600; }

/* ---------- 전세 안전도 ---------- */
.risk { border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 15px; }
.risk-top { display: flex; align-items: center; justify-content: space-between; }
.risk-grade { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.risk-ratio { font-size: 13px; font-weight: 700; color: var(--ink-2); font-feature-settings: "tnum" on; }
.risk-desc { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.risk-factors { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 7px; }
.risk-factors li { position: relative; padding-left: 21px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.risk-factors li::before { position: absolute; left: 0; top: -1px; font-weight: 800; font-size: 13px; }
.risk-factors li.ok::before { content: "\2713"; color: var(--green-text); }
.risk-factors li.no::before { content: "\0021"; color: var(--warning); }
.risk-tips { margin-top: 13px; padding: 11px 13px; background: var(--surface-subtle); border-radius: var(--r-btn); font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.risk-tips b { color: var(--ink-1); margin-right: 2px; }
.risk-disc { margin-top: 9px; font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.risk-safe   { border-color: #9FE3BE; background: #F0FBF5; }
.risk-good   { border-color: #C2E2CC; background: #F4FAF6; }
.risk-warn   { border-color: #F6D48A; background: #FFF9EC; }
.risk-risk   { border-color: #F2B894; background: #FFF3EB; }
.risk-danger { border-color: #F0A6A6; background: #FDEFEF; }
.risk-safe   .risk-grade { color: #06A847; }
.risk-good   .risk-grade { color: #2A9D5C; }
.risk-warn   .risk-grade { color: #C9871A; }
.risk-risk   .risk-grade { color: #D9682A; }
.risk-danger .risk-grade { color: #D63B3B; }
[data-theme="dark"] .risk-safe   { border-color: #235741; background: #13241c; }
[data-theme="dark"] .risk-good   { border-color: #2c4d3a; background: #15211a; }
[data-theme="dark"] .risk-warn   { border-color: #6b561f; background: #221d10; }
[data-theme="dark"] .risk-risk   { border-color: #6e4327; background: #221710; }
[data-theme="dark"] .risk-danger { border-color: #6e3535; background: #221111; }
[data-theme="dark"] .risk-safe   .risk-grade { color: #34D27E; }
[data-theme="dark"] .risk-good   .risk-grade { color: #5FC98C; }
[data-theme="dark"] .risk-warn   .risk-grade { color: #F2C462; }
[data-theme="dark"] .risk-risk   .risk-grade { color: #F0966A; }
[data-theme="dark"] .risk-danger .risk-grade { color: #F07070; }

/* ---------- 다크모드(카카오맵): map 전체 invert(1)+hue(180), 핀에 동일 역필터 = 완전 가역(invert×2=원본 → 핀색 정확) ---------- */
[data-theme="dark"] #map { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] #map .plat-pin { filter: invert(1) hue-rotate(180deg); }
[data-theme="dark"] #map .cluster-pin { filter: invert(1) hue-rotate(180deg); }

/* 전세 안전도 v2 — 점수/신뢰도/바 */
.risk-score { font-size: 13px; color: var(--ink-2); font-weight: 600; font-feature-settings: "tnum" on; white-space: nowrap; }
.risk-score b { font-size: 19px; font-weight: 800; color: var(--ink-1); }
.risk-score small { color: var(--ink-3); font-weight: 600; }
.risk-conf { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-section); padding: 2px 7px; border-radius: var(--r-pill); vertical-align: middle; }
.risk-bar { margin-top: 11px; height: 6px; border-radius: 3px; background: rgba(125,125,125,.18); overflow: hidden; }
.risk-bar-fill { height: 100%; border-radius: 3px; transition: width .45s var(--ease-out); }
.risk-safe   .risk-bar-fill { background: #06A847; }
.risk-good   .risk-bar-fill { background: #4FB877; }
.risk-warn   .risk-bar-fill { background: #E6A21C; }
.risk-risk   .risk-bar-fill { background: #E07B2E; }
.risk-danger .risk-bar-fill { background: #D63B3B; }

/* ---------- view toggle (mobile only) ---------- */
.view-toggle { display: none; border: 1px solid var(--border); background: var(--page); color: var(--ink-1); font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; }

/* ============================================================
   RESPONSIVE — mobile ≤768px: 단일 컬럼 + 목록/지도 토글
   ============================================================ */
.sheet-handle { display: none; }   /* 데스크탑 숨김, 모바일 시트에서만 */

@media (max-width: 768px) {
  .topbar { height: 52px; gap: 8px; padding: 0 11px; }
  .brand-mark { font-size: 17px; }
  .brand-en { display: none; }   /* 모바일: 로고+다집이면 충분, Dazip 숨겨 탭 4개 공간 확보(전세/월세/매매/청약 다 보이게) */
  .region-sel { font-size: 12px; padding: 5px 8px; max-width: 96px; }
  .tab { padding: 0 7px; font-size: 12.5px; }
  .status { gap: 4px; }
  .info-btn, .auth-btn { padding: 5px 7px !important; font-size: 11.5px !important; }
  .status #freshness, .status .dot { display: none; }
  .view-toggle { display: inline-flex; align-items: center; }

  /* 네이버부동산식 바텀시트: 지도 항상 표시(사이즈 확보=목록 채워짐) + 목록은 드래그 시트 */
  .layout { display: block; height: calc(100vh - 52px); }
  .mapwrap { position: fixed; inset: 52px 0 0 0; z-index: 10; display: block; }
  .view-toggle { display: none; }   /* 시트 드래그가 대체 */

  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    height: calc(var(--vh, 1vh) * 86); z-index: 45; border-right: none;
    background: var(--page); border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 28px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    transform: translateY(var(--sheet-y, 50vh));
    transition: transform .28s cubic-bezier(.2,0,0,1);
    touch-action: none;
  }
  body.sheet-full .panel { --sheet-y: 0; }
  body.sheet-half .panel { --sheet-y: calc(var(--vh, 1vh) * 48); }
  body.sheet-peek .panel { --sheet-y: calc(var(--vh, 1vh) * 86 - 150px); }   /* 검색+필터만 노출 */
  .panel.dragging { transition: none; }
  .sheet-handle { display: flex; align-items: center; justify-content: center; height: 22px; padding: 8px 0 4px; background: none; border: none; cursor: grab; flex: none; }
  .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--ink-3); opacity: .55; }
  /* last card clears the iPhone home indicator (safe-area), not flush to viewport bottom */
  .list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }

  .filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 26px;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }   /* 우측 페이드 = 가로스크롤 어포던스(연식 필터 잘림 인지) */
  /* 터치 타깃 >=44px (시각 크기 유지, 히트영역만 확대) */
  .back, .theme-toggle, .info-btn { min-width: 44px; min-height: 44px; }
  .sheet-handle { height: 30px; padding: 13px 0 8px; }   /* 그립 탭/드래그 시작 영역 확대 */
  .filters::-webkit-scrollbar { display: none; }
  .filt, .sort, .fav-filt { flex: none; }

  /* iOS Safari auto-zooms on focus when a text input/textarea font < 16px — force 16px on mobile.
     (native <select> pickers don't zoom, so region-sel/filt/sort are intentionally excluded to keep the compact filter row.) */
  .searchbar input, .auth-input, .fb-text, .ss-input { font-size: 16px; }
  .sheet-handle { z-index: 20; }   /* 상세(detail z-index:10) 위 — 상세 열려도 시트 드래그 가능 */

  /* 부동산 브라우저 창: 거의 풀폭, cascade offset 리셋 */
  .am-card { width: calc(100vw - 24px) !important; max-width: 400px; left: 12px !important; top: 60px !important; }
  .cmp-card { max-width: 94vw; }
  .compare-bar { left: 10px; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: none; max-width: none; }
  .compare-bar:not([hidden]) { animation: none; }
  .cb-chips { flex: 1; }
}

@media (max-width: 420px) {
  .tab { padding: 0 9px; font-size: 13.5px; }
  .d-price { font-size: 21px; }
  .risk-score b { font-size: 17px; }
}

/* mobile overflow fix — 헤더가 좁은 폭에 들어가게 */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .topbar { gap: 7px; }
  .brand { flex: none; }
  .brand-mark { font-size: 16px; }
  .region-sel { max-width: 82px; font-size: 11.5px; padding: 5px 7px; }
  .tabs { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 9px; font-size: 13.5px; flex: none; }
  .status { gap: 5px; flex: none; margin-left: 0; }
  .view-toggle { padding: 6px 10px; }
  .panel { overflow-x: hidden; }
  .card { max-width: 100%; }
}

/* ---------- 플랫폼 통합 핀 (직방/다방) ---------- */
.plat-pin { display: inline-flex; align-items: center; gap: 3px; transform: translate(-50%, -100%);
  font-size: 11px; font-weight: 700; padding: 3px 7px 3px 4px; border-radius: var(--r-pill);
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2); color: #fff; cursor: pointer;
  font-feature-settings: "tnum" on; border: 1.5px solid #fff; }
.plat-pin .pp-tag { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.28); font-size: 9px; font-weight: 800; }
.plat-pin.zb { background: #1673ff; }   /* 직방 블루 */
.plat-pin.db { background: #ff7a3d; }   /* 다방 오렌지 */
.plat-pin:hover { filter: brightness(1.08); z-index: 700; }
[data-theme="dark"] #map .plat-pin:hover { filter: invert(1) hue-rotate(180deg) brightness(1.08); }
/* removed: tile-only dark filter, pins keep original color */
/* removed: tile-only dark filter, pins keep original color */

.plat-filt.on { background: var(--ink-1); color: var(--page); border-color: var(--ink-1); }

/* 플랫폼 배지 (창 헤더 / 매물 상세) */
.plat-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); color: #fff; }
.plat-badge.zb { background: #1673ff; }
.plat-badge.db { background: #ff7a3d; }
.am-naver.zb { background: #1673ff; }
.am-naver.db { background: #ff7a3d; }

.art-loading { padding: 24px 0; text-align: center; color: var(--ink-3); font-size: 13px; }

/* 추가 플랫폼 핀 (삼삼엠투 단기임대 / 고방 고시원·쉐어) */
.plat-pin.sm { background: #7c5cff; }   /* 삼삼엠투 퍼플 */
.plat-pin.gb { background: #00b5a5; }    /* 고방 틸 */
.plat-badge.sm { background: #7c5cff; }
.plat-badge.gb { background: #00b5a5; }
.am-naver.sm { background: #7c5cff; }
.am-naver.gb { background: #00b5a5; }

/* ---------- 플랫폼 통합 범례 (지도 위) ---------- */
.map-legend { position: absolute; top: 12px; left: 12px; z-index: 600; background: var(--page); border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 3px; max-width: 150px; }
.map-legend .lg-title { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 1px 4px 4px; }
.map-legend .lg-hint { font-weight: 500; color: var(--ink-4, #aab2bd); font-size: 10px; margin-left: 3px; }
.lg-item { display: flex; align-items: center; gap: 7px; border: none; background: none; padding: 4px 5px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-1); cursor: pointer; transition: background .12s ease, opacity .12s ease; text-align: left; }
.lg-item:hover { background: var(--surface-subtle); }
.lg-item.off { opacity: .38; }
.lg-item.off .lg-dot { background: var(--ink-4) !important; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lg-item small { margin-left: auto; color: var(--ink-3); font-weight: 600; font-feature-settings: "tnum" on; }
[data-theme="dark"] .map-legend { background: var(--surface-section); }
.lg-toggle { display: none; }   /* 데스크탑: 항상 펼침이라 토글 숨김 */
@media (max-width: 768px) {
  /* 작게 + 반투명으로 처음부터 보임 — 저게 뭔지 알면서 지도도 비침. 탭하면 접힘 */
  .map-legend { top: 8px; left: 8px; padding: 5px 7px; max-width: 116px; opacity: .9; gap: 1px; }
  .map-legend:active, .map-legend:hover { opacity: 1; }
  .map-legend .lg-title { font-size: 9.5px; padding: 0 3px 2px; }
  .lg-item { font-size: 11px; padding: 3px 5px; gap: 6px; }
  .lg-item .lg-dot { width: 7px; height: 7px; }
  .lg-toggle { display: flex; align-items: center; gap: 3px; border: none; background: none; padding: 2px; cursor: pointer; }
  .lg-cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .lg-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-3); margin-left: 3px; }
  .map-legend:not(.lg-collapsed) .lg-caret { transform: rotate(180deg); }
  .map-legend.lg-collapsed { padding: 6px 7px; }
  .map-legend.lg-collapsed .lg-body { display: none; }
}

/* 차트 희소데이터 폴백 */
.chart-sparse { padding: 14px 14px; background: var(--surface-subtle); border-radius: var(--r-card); font-size: 12.5px; color: var(--ink-3); display: flex; flex-direction: column; gap: 6px; }
.chart-sparse .cs-row { display: flex; align-items: center; gap: 7px; color: var(--ink-1); font-size: 13.5px; }
.chart-sparse .cs-row i { width: 9px; height: 9px; border-radius: 2px; }
.chart-sparse b { font-feature-settings: "tnum" on; }
.cap-note { color: var(--ink-3); font-weight: 500; font-size: 11px; }

.offer[data-tab] { cursor: pointer; transition: background .12s ease; }
.offer[data-tab]:hover { background: var(--green-subtle); }

/* ---------- 로그인 / 마이페이지 ---------- */
.auth-btn { border: 1px solid var(--border-strong); background: var(--page); color: var(--ink-1); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; }
.auth-btn:hover { border-color: var(--green); color: var(--green-text); }
.auth-modal { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; }
.auth-modal[hidden] { display: none !important; }
.auth-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.auth-card { position: relative; background: var(--page); border-radius: 16px; width: min(92vw, 340px); box-shadow: 0 16px 48px rgba(0,0,0,.3); overflow: hidden; animation: slide .16s ease; }
.auth-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: 16px; }
.auth-head button { border: none; background: var(--surface-section); width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--ink-2); cursor: pointer; }
.auth-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.auth-input { border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink-1); background: var(--page); }
.auth-input:focus { outline: none; border-color: var(--green); }
.auth-submit { background: var(--green-btn); color: #fff; border: none; border-radius: var(--r-card); padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer; }
.auth-submit:hover { background: var(--green-hover); }
.auth-err { color: var(--live); font-size: 12.5px; }
.auth-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; text-align: center; }
.mp-sec { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.mp-sec b { color: var(--green-text); }
.mp-favs { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.mp-fav { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); background: var(--page); border-radius: var(--r-card); padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-1); cursor: pointer; text-align: left; }
.mp-fav:hover { border-color: var(--green); background: var(--surface-subtle); }
.mp-fav small { color: var(--ink-3); font-weight: 500; }
.mp-empty { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; padding: 8px 0; }
.mp-logout { margin-top: 6px; border: 1px solid var(--border); background: var(--page); color: var(--ink-2); border-radius: var(--r-card); padding: 10px; font-size: 13px; cursor: pointer; }
.inline-link { color: var(--link); text-decoration: none; }
@media (max-width: 768px) { .auth-btn { padding: 6px 9px; } }

/* 통합 플랫폼 서브라벨 (지역토글 대체) */
.brand-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
@media (max-width: 768px) { .brand-sub { display: none; } }

/* ---------- 네이버 핀 (네 초록, 직방/다방과 통일) ---------- */
.plat-pin.nv { background: #03C75A; }
.plat-badge.nv { background: #03C75A; }
.am-naver.nv { background: #03C75A; }
.plat-pin.nv.muted { background: #aeb4ba; }
/* removed: tile-only dark filter, pins keep original color */

/* ---------- 브라우저 탭형 매물 창 ---------- */
/* 매물 상세 — 데스크탑 우측 사이드패널 / 모바일 바텀시트 (떠다니는 브라우저창 폐지, 피커와 결 통일) */
.win-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.34); pointer-events: auto; animation: winfade .16s ease; }
@keyframes winfade { from { opacity: 0 } to { opacity: 1 } }
.win { position: fixed; right: 0; top: 0; bottom: 0; width: 404px; max-width: 92vw;
  background: var(--page); box-shadow: -8px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; animation: winslidex .22s cubic-bezier(.22,.61,.36,1); }
@keyframes winslidex { from { transform: translateX(100%) } to { transform: translateX(0) } }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative;
  padding: 8px 6px 8px 8px; background: var(--page); border-bottom: 1px solid var(--border-subtle); min-height: 46px; }
.win-back { border: none; background: none; color: var(--ink-2); font-size: 14px; font-weight: 650; cursor: pointer; padding: 7px 10px; border-radius: 9px; }
.win-back:hover { background: var(--surface-subtle); }
.win-back-sp { width: 2px; }
.win-grip { display: none; }
.win-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; padding: 4px 4px 0; scrollbar-width: none; }
.win-tabs::-webkit-scrollbar { display: none; }
.wt-tab { display: inline-flex; align-items: center; gap: 5px; border: none; background: var(--surface-section); color: var(--ink-3);
  padding: 6px 8px 6px 9px; border-radius: 8px 8px 0 0; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 150px; }
.wt-tab.on { background: var(--page); color: var(--ink-1); box-shadow: 0 -1px 0 var(--green) inset; }
.wt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wt-dot.nv { background: #03C75A; } .wt-dot.zb { background: #1673ff; } .wt-dot.db { background: #ff7a3d; } .wt-dot.gb { background: #00b5a5; } .wt-dot.pp { background: #ffb300; } .wt-dot.dg { background: #E64980; }
.wt-label { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.wt-x { font-size: 14px; line-height: 1; opacity: .6; padding: 0 1px; }
.wt-x:hover { opacity: 1; }
.win-close { border: none; background: transparent; font-size: 21px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 4px 12px; flex: none; }
.win-body { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.am-toprow { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }

/* 당근부동산 핀 (당근오렌지) */
.plat-pin.dg { background: #E64980; }
.plat-badge.dg { background: #E64980; }
.am-naver.dg { background: #E64980; }

/* ---------- 마이페이지 오른쪽 드로어 ---------- */
.auth-modal.drawer-mode { display: block; }
.mp-drawer { position: absolute; top: 0; right: 0; width: min(420px, 92vw); height: 100%;
  background: var(--page); box-shadow: -8px 0 32px rgba(0,0,0,.18); display: flex; flex-direction: column;
  animation: drawerIn .2s var(--ease-out); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.mp-dhead { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.mp-user { font-size: 18px; font-weight: 800; color: var(--ink-1); letter-spacing: -0.01em; }
.mp-usub { font-size: 12.5px; color: var(--green-text); font-weight: 600; margin-top: 2px; }
.mp-close { border: none; background: var(--surface-section); width: 32px; height: 32px; border-radius: 50%; font-size: 19px; color: var(--ink-2); cursor: pointer; }
.mp-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mpc { border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.mpc:hover { border-color: var(--green); box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.mpc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mpc-top b { font-size: 15.5px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.mpc-x { border: none; background: none; color: var(--green); font-size: 17px; cursor: pointer; flex: none; line-height: 1; }
.mpc-x:hover { color: var(--live); }
.mpc-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.mpc-price { font-size: 14px; font-weight: 700; color: var(--ink-1); margin-top: 9px; font-feature-settings: "tnum" on; letter-spacing: -0.01em; }
.mpc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.mpc-cnt { font-size: 11.5px; color: var(--ink-3); font-feature-settings: "tnum" on; }
.mpc-risk { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill); }

.auth-switch { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.auth-switch a { color: var(--green-text); font-weight: 700; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }

/* 관심 버튼 (매물 창) */
.am-fav { margin-left: auto; border: 1px solid var(--border-strong); background: var(--page); color: var(--ink-2); font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); cursor: pointer; }
.am-fav.on { background: var(--green-subtle); color: var(--green-text); border-color: var(--green); }
/* 마이페이지 관심매물 카드 */
.mp-sec { font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 2px 2px 4px; }
.mp-sec b { color: var(--green-text); }
.mpa { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; text-decoration: none; color: inherit; transition: border-color .12s ease; }
.mpa:hover { border-color: var(--green); }
.mpa-top { display: flex; align-items: center; gap: 6px; }
.mpa-x { margin-left: auto; border: none; background: none; color: var(--green); font-size: 15px; cursor: pointer; }
.mpa-x:hover { color: var(--live); }
.mpa-price { font-size: 15px; font-weight: 800; color: var(--ink-1); margin-top: 7px; font-feature-settings: "tnum" on; }
.mpa-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------- 매물 중복 그룹 ---------- */
.pp-multi { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin-left: 4px; padding: 0 3px; background: rgba(255,255,255,.92); color: #111; border-radius: 8px; font-size: 9.5px; font-weight: 800; }
.am-platforms { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.am-platforms-h { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.am-plat-link { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink-1); font-size: 12.5px; font-weight: 600; }
.am-plat-link:hover { border-color: var(--ink-3); }
.am-naverhint { display: block; margin-top: 9px; padding: 8px 10px; background: var(--green-subtle); color: var(--green-text); border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; }

/* ---------- 클러스터 핀 (줌아웃 시 묶음) ---------- */
.cluster-pin { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 6px; border-radius: 50%;
  background: rgba(3,199,90,.92); color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); border: 2px solid #fff; cursor: pointer; font-feature-settings: "tnum" on; }
.cluster-pin small { font-size: 8px; font-weight: 600; opacity: .85; margin-top: 1px; }
.cluster-pin.mid { min-width: 46px; height: 46px; font-size: 14px; }
.cluster-pin.big { min-width: 56px; height: 56px; font-size: 16px; background: rgba(0,150,70,.95); }
/* cluster-pin: dark 역필터는 위(466~468)에서 적용 */

/* ---------- 모션 폴리시 (Corporate: 200-400ms, --ease-snap) ---------- */
/* 핀 호버 리프트 — 지도에 생기 */
#map .price-pin, #map .plat-pin { transition: transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-1) var(--ease-snap); }
#map .price-pin:hover { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 900 !important; }
#map .plat-pin:hover { transform: translate(-50%, -100%) scale(1.09); box-shadow: 0 5px 16px rgba(0,0,0,.28); z-index: 900 !important; }
.price-pin.on { transform: translate(-50%, -50%) scale(1.12); animation: pin-pop var(--dur-2) var(--ease-out); }
@keyframes pin-pop { 0% { transform: translate(-50%, -50%) scale(1); } 55% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1.12); } }
/* 클러스터 호버 */
.cluster-pin { transition: transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-1) var(--ease-snap); }
.cluster-pin:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,.32); }
/* 버튼/탭/필터 프레스 피드백 (마이크로 140ms) */
.tab, .filt, .filt-reset, .auth-btn, .view-toggle, .theme-toggle, .lg-item, .sort, .am-fav, .mp-close { transition: background var(--dur-1) var(--ease-snap), color var(--dur-1) var(--ease-snap), transform var(--dur-1) var(--ease-snap), border-color var(--dur-1) var(--ease-snap); }
.tab:active, .filt:active, .auth-btn:active, .view-toggle:active, .lg-item:active, .am-fav:active { transform: scale(.96); }
.card:active { transform: scale(.995); }
/* 리스트 카드 진입 — 첫 페인트만 가볍게 (뷰포트 갱신마다 X) */
.list.fresh .card { animation: card-in var(--dur-2) var(--ease-out) both; }
.list.fresh .card:nth-child(1){animation-delay:0ms}.list.fresh .card:nth-child(2){animation-delay:18ms}.list.fresh .card:nth-child(3){animation-delay:36ms}.list.fresh .card:nth-child(4){animation-delay:54ms}.list.fresh .card:nth-child(5){animation-delay:72ms}.list.fresh .card:nth-child(6){animation-delay:90ms}.list.fresh .card:nth-child(7){animation-delay:108ms}.list.fresh .card:nth-child(8){animation-delay:126ms}
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 관심 별 토글 펄스 */
@keyframes fav-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.28); } }
.am-fav.on { animation: fav-pulse var(--dur-2) var(--ease-out); }
/* 접근성: 모션 줄이기 존중 */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.cost-note { font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }

#freshness.stale { color: var(--live); font-weight: 700; }

.verify-row.sub { padding: 2px 0 5px 25px; font-size: 12px; color: var(--ink-3); }
.verify-row .ic-gap { width: 17px; flex: none; }
.vr-hint { font-size: 11px; color: var(--ink-4); }

/* 선택 단지 핀 강조 (plat-pin nv 기준) */
.plat-pin.nv.on { background: var(--green-btn); color: #fff; z-index: 1000 !important; transform: translate(-50%,-100%) scale(1.12); }

/* ===================== 시작화면 · 공지 · 피드백 ===================== */
.info-btn { background: none; border: 1px solid var(--border); color: var(--ink-3); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.info-btn:hover { border-color: var(--green); color: var(--green); }

.start-screen { position: fixed; inset: 0; z-index: 200; background: var(--page); display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 16px; }
/* same trap as info-modal: class display:flex outranks UA [hidden]; without this enterApp() can't hide the start overlay */
.start-screen[hidden] { display: none !important; }
.ss-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.ss-brand { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.ss-mark { font-size: 30px; font-weight: 800; color: var(--green); letter-spacing: -0.02em; }
.ss-sub { font-size: 13px; color: var(--ink-3); word-break: keep-all; }
.ss-notices { display: flex; flex-direction: column; gap: 8px; background: var(--surface-subtle); border-radius: 12px; padding: 12px 14px; }
.ss-notice { display: flex; flex-direction: column; gap: 2px; }
.ss-notice + .ss-notice { border-top: 1px solid var(--border); padding-top: 8px; }
.ss-nt { font-size: 13.5px; font-weight: 700; color: var(--ink-1); display: flex; align-items: baseline; gap: 7px; }
.ss-nd { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.ss-nb { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; word-break: keep-all; }
.ss-form { display: flex; flex-direction: column; gap: 8px; }
.ss-input { height: 46px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font-size: 15px; background: var(--page); color: var(--ink-1); }
.ss-input:focus { outline: none; border-color: var(--green); }
.ss-err { color: #dc2626; font-size: 12.5px; }
.ss-login { height: 46px; border: none; border-radius: 10px; background: var(--green-btn); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.ss-login:hover { filter: brightness(0.96); }
.ss-alt { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ss-link { background: none; border: none; color: var(--ink-3); font-size: 13.5px; cursor: pointer; padding: 4px; }
.ss-link:hover { color: var(--green); text-decoration: underline; }
.ss-dot { color: var(--border); }
.ss-disc { font-size: 11px; line-height: 1.6; color: var(--ink-3); background: var(--surface-section); border-radius: 10px; padding: 11px 13px; word-break: keep-all; }
.ss-fb { margin-top: 2px; align-self: center; }

.info-modal { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; }
/* class selector (display:flex) outranks UA [hidden] — without this the modal never closes and locks the app */
.info-modal[hidden] { display: none !important; }
.info-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.info-card { position: relative; width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: var(--page); border-radius: 16px; margin: 16px; display: flex; flex-direction: column; }
.info-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--page); }
.info-head b { font-size: 16px; }
.info-head button { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.info-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.info-body .ss-sec { font-size: 13px; font-weight: 700; color: var(--ink-1); margin-top: 10px; }
.info-body .ss-sec:first-child { margin-top: 0; }
.fb-text { width: 100%; min-height: 96px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit; resize: vertical; background: var(--page); color: var(--ink-1); box-sizing: border-box; }
.fb-text:focus { outline: none; border-color: var(--green); }
.fb-msg { font-size: 12.5px; color: var(--green); }

@media (max-width: 768px) { .info-btn { padding: 5px 8px; font-size: 12px; } .ss-card { max-width: none; } }

/* 0건 플랫폼은 흐리게만 — 토글(끄기/켜기)은 데이터 유무와 무관하게 항상 가능 */
.lg-item.empty { opacity: .4; cursor: pointer; }

/* 청약(분양) */
.plat-pin.sub { background: #7c5cff; color: #fff; }   /* 보라 — 매물 플랫폼색과 구분 */
.plat-pin.sub .pp-tag { background: rgba(255,255,255,.25); }
.sub-card .card-sub2 { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.sub-fresh { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.sd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sd-tag { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: var(--surface-section); color: var(--ink-3); }
.sd-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.sd-row span { color: var(--ink-3); flex: none; }
.sd-row b { text-align: right; word-break: keep-all; }
.sd-link { display: block; text-align: center; margin: 16px 0 10px; text-decoration: none; }
.sd-disc { font-size: 11px; line-height: 1.6; color: var(--ink-3); background: var(--surface-section); border-radius: 8px; padding: 10px 12px; word-break: keep-all; }

/* 청약 접수상태 배지 */
.sub-st { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; flex: none; }
.sub-st-open { background: #e6f7ee; color: #0a8a43; }
.sub-st-soon { background: #fff4e0; color: #b56a00; }
.sub-st-closed { background: var(--surface-section); color: var(--ink-3); }
.sub-st-unknown { background: #f0eef7; color: #5b4b8a; }   /* 일정 확인 필요 — 마감 아님, 중립 보라 */
.sub-st-cancelled { background: #fdecec; color: #b23b3b; }
[data-theme="dark"] .sub-st-open { background: #143524; color: #4ade80; }
[data-theme="dark"] .sub-st-soon { background: #3a2a10; color: #fbbf24; }
[data-theme="dark"] .sub-st-unknown { background: #221d33; color: #b3a4e0; }
[data-theme="dark"] .sub-st-cancelled { background: #3a1d1d; color: #f0a0a0; }
.sd-nogeo { color: var(--ink-3); font-weight: 500; }
.plat-pin.sub-closed { opacity: .6; }

/* 청약 탭: 매물 전용 필터/정렬 숨김 (청약은 단지명 검색 + 상태정렬만) */
body.tab-subscription .filters,
body.tab-subscription .panel-head .sort { display: none; }
.cluster-pin.sub-cluster { background: #7c5cff; }
.cluster-pin.sub-cluster small { opacity: .85; }

/* 청약 마감숨기기 토글 + 빈상태 부연 */
.sub-toggle { font-size: 12px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--page); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sub-toggle.on { background: var(--green-btn); border-color: var(--green); color: #fff; }
.es-sub { font-size: 12px; color: var(--ink-3); line-height: 1.6; }

/* 매물 비교 */
.am-cmp { margin-left: 6px; font-size: 12px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); color: var(--ink-2); cursor: pointer; }
.am-cmp.on { background: var(--green-btn); border-color: var(--green); color: #fff; }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13.5px; vertical-align: top; min-width: 120px; }
.cmp-table .cmp-label { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.cmp-rm { background: none; border: none; color: var(--ink-3); font-size: 16px; cursor: pointer; }
.cmp-link { color: var(--green); text-decoration: none; font-weight: 600; }
.cmp-scroll { overflow-x: auto; }

/* 청약 공급내역 표 */
.sd-sec { font-size: 13px; font-weight: 700; color: var(--ink-1); margin: 14px 0 6px; }
.sd-supply { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-supply th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.sd-supply td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.sd-supply td:last-child { font-weight: 700; }

/* 다집 로고 마크 */
.brand-mark { display: inline-flex; align-items: center; gap: 7px; }
.brand-logo { width: 30px; height: 30px; vertical-align: middle; flex: none; }
.ss-mark { display: inline-flex; align-items: center; gap: 9px; }
.ss-logo { width: 38px; height: 38px; border-radius: 9px; }
@media (max-width: 768px) { .brand-logo { width: 27px; height: 27px; } }

/* Dazip 영문 보조 + 로고 정렬 */
.brand-en { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 4px; letter-spacing: 0.02em; }
.ss-mark .brand-en { font-size: 14px; align-self: flex-end; margin-bottom: 4px; }
/* 청약 탭: 가격/평형/연식/관심 숨김. 종류는 매물용(#f-ptype) 대신 청약 전용
   체계(#f-ptype-sub)로 스왑 — 청약엔 원룸/투룸/고시원 개념이 없음. */
body.tab-subscription .filters { display: flex; }
body.tab-subscription #f-price, body.tab-subscription #f-age, body.tab-subscription #f-fav, body.tab-subscription #f-reset,
body.tab-subscription #f-rooms, body.tab-subscription #f-hh, body.tab-subscription #f-jr, body.tab-subscription #f-park { display: none; }   /* 분양엔 방수·세대수·전세가율·주차 무의미. 평형(f-area)은 공급 주택형으로 매칭돼 유지 */
/* 종류 필터 스왑: 매물 탭은 #f-ptype, 청약 탭은 #f-ptype-sub */
#f-ptype-sub { display: none; }
body.tab-subscription #f-ptype { display: none; }
body.tab-subscription #f-ptype-sub { display: inline-block; }

/* 청약 공급주체 배지 (LH/SH/민간) */
.sub-prov { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; flex: none; margin-left: auto; }
.prov-lh { background: #e8f0ff; color: #1d4ed8; }
.prov-sh { background: #e7f7f0; color: #047857; }
.prov-pv { background: var(--surface-section); color: var(--ink-3); }
.prov-pub { background: #ede9fe; color: #6d28d9; }   /* 공공(LH/SH 외 국민주택 등) */
.prov-unk { background: var(--surface-section); color: var(--ink-3); font-weight: 600; }
[data-theme="dark"] .prov-lh { background: #16233f; color: #7aa2f7; }
[data-theme="dark"] .prov-sh { background: #123026; color: #4ade80; }
[data-theme="dark"] .prov-pub { background: #241a3d; color: #b998f5; }
.sub-card .card-top { display: flex; align-items: center; gap: 6px; }
/* 공급주체 필터: 청약 탭에서만 */
#f-provider { display: none; }
body.tab-subscription #f-provider { display: inline-block; }
/* 청약홈 공고 보기 링크 — 중앙정렬 (ss-login 높이만 받고 텍스트 안 맞던 것 수정) */
.sd-link { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 10px; background: var(--green-btn); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; margin: 16px 0 10px; }

/* 홈(시작)화면 꾸미기 — 가치칩 + 부드러운 그린 배경 */
.start-screen { background:
  radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--green) 14%, transparent), transparent 60%),
  var(--page); }
.ss-card .ss-sub { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.ss-logo { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 4px 14px color-mix(in srgb, var(--green) 28%, transparent); }
.ss-feats { display: flex; flex-direction: column; gap: 2px; background: var(--surface-subtle); border-radius: 14px; padding: 6px 14px; }
.ss-feat { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; padding: 11px 0; color: var(--ink-1); font-size: 14px; line-height: 1.45; }
.ss-feat + .ss-feat { border-top: 1px solid var(--border); }
.ss-feat svg { color: var(--green); margin-top: 1px; }
.ss-feat b { font-weight: 700; }
.ss-feat span { color: var(--ink-3); font-size: 12.5px; }

/* 지도 현재위치 버튼 + 내 위치 점 + 토스트 */
.map-loc { position: fixed; right: 20px; bottom: 24px; z-index: 60; width: 44px; height: 44px; border-radius: 11px;
  background: var(--surface, #fff); border: 1px solid var(--border); color: var(--ink-1); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.map-loc:hover { color: var(--green); }
.map-loc.loading { opacity: .5; pointer-events: none; }
.map-loc.loading svg { animation: locspin 0.9s linear infinite; }
@keyframes locspin { to { transform: rotate(360deg); } }
.my-loc-dot { width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26,115,232,.4), 0 1px 4px rgba(0,0,0,.3); }
.my-loc-dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: rgba(26,115,232,.18); animation: locpulse 2s ease-out infinite; }
@keyframes locpulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.map-toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(8px); z-index: 14;
  background: rgba(20,20,22,.92); color: #fff; font-size: 13px; padding: 9px 14px; border-radius: 9px; max-width: 80%;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.map-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 모바일: 현재위치 버튼을 우측하단(바텀시트 위)으로 — 표준 지도앱 위치 */
/* (현재위치 위치는 아래 시트연동 규칙으로 일원화) */

/* 시작화면(pre-app)일 때 지도 오버레이(레전드/노트/위치버튼)가 위로 비치는 것 차단 */
body.pre-app .map-legend, body.pre-app .map-note, body.pre-app .map-loc { display: none !important; }

/* 로고=홈 버튼 어포던스 */
.brand-mark { cursor: pointer; }
.brand-mark:hover { opacity: 0.85; }

/* 브랜드 폰트: Gmarket Sans (상업용 무료, 다집 워드마크 전용. 본문은 Pretendard) */
@font-face { font-family: 'Gmarket Sans'; font-weight: 700; font-display: swap; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); }
@font-face { font-family: 'Gmarket Sans'; font-weight: 500; font-display: swap; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); }
.brand-mark, .ss-mark { font-family: 'Gmarket Sans', 'Pretendard', sans-serif; }
.brand-mark { font-weight: 700; letter-spacing: -0.01em; }
.ss-mark { font-weight: 700; }
.brand-en { font-family: 'Gmarket Sans', sans-serif; font-weight: 500; }

/* 광고 — 인라인 카드 + 전면(인터스티셜). 무료 사용자만 노출 */
.ad-card { list-style: none; position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 8px 0; background: var(--surface-subtle); min-height: 90px; }
.ad-label { position: absolute; top: 6px; right: 8px; font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--page); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.ad-modal { position: fixed; inset: 0; z-index: 3600; display: flex; align-items: center; justify-content: center; }
.ad-modal[hidden] { display: none !important; }
.ad-back { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.ad-inter { position: relative; width: 100%; max-width: 360px; background: var(--page); border-radius: 16px; padding: 14px; margin: 16px; }
.ad-inter-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ad-inter-top button { background: none; border: none; font-size: 22px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.ad-inter-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.ad-inter-note b { color: var(--green); }

/* 워드마크 로고 (아이콘 없음) — '다집' 두 글자 자체가 로고. 다=잉크, 집=그린 + 점 액센트 */
.wm { font-family: 'Gmarket Sans', 'Pretendard', sans-serif; font-weight: 700; color: var(--ink-1); letter-spacing: -0.02em; }
.wm-accent { color: var(--green); position: relative; }
.brand-mark .wm { font-size: 21px; }
.ss-mark .wm { font-size: 30px; }
[data-theme="dark"] .wm { color: #f3f4f6; }

/* ===== 모션 풍부화 (Corporate 결 — ease-snap 240ms 기반) ===== */
/* 카드 호버 리프트 (데스크탑 — 깊이감) */
.card { transition: background var(--dur-1) var(--ease-snap), border-color var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-snap), transform var(--dur-1) var(--ease-snap); }
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.10); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
}
/* 프레스 피드백 — 누르면 살짝 들어감 */
.filt:active, .chip:active, .ss-login:active, .nv-btn:active, .cmp-btn:active, .offer[data-tab]:active, .lg-item:active, .map-loc:active, .tab:active,
.region-sel:active, .sort:active, .filt-reset:active, .sub-toggle:active, .info-btn:active, .auth-btn:active, .theme-toggle:active { transform: scale(.95); }
@media (max-width: 768px) { .section-label { margin: 12px 0 6px; } }   /* 모바일: 섹션 상단여백 20→12, 한 화면에 더 많이 */
.filt, .chip, .ss-login, .nv-btn, .cmp-btn, .map-loc, .tab { transition: transform var(--dur-1) var(--ease-snap), background var(--dur-1) var(--ease-snap), color var(--dur-1) var(--ease-snap); }
/* 위험도 바 — 채워질 때 은은한 sheen(ambient layer) */
.risk-bar-fill { position: relative; overflow: hidden; }
.risk-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 2.4s var(--ease-snap) .5s 2; }
@keyframes sheen { to { transform: translateX(100%); } }
/* 위험도 점수 카운트업 시 깜빡임 방지용 */
.risk-score b { font-variant-numeric: tabular-nums; }
/* 탭 활성 인디케이터 부드럽게 (구조는 워크플로 후 다듬되, 전환은 미리) */
.tab { position: relative; }

/* 접근성 — 모션 줄이기 선호 사용자는 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 카드 거래량 — 칩 4개 나열 → 절제된 인라인 메트릭 (의미색은 전세가율 배지 하나만) */
.card-meta { align-items: center; gap: 6px; flex-wrap: wrap; }
.metrics { display: inline-flex; gap: 9px; font-size: 12px; color: var(--ink-3); }
.metrics > span { position: relative; }
.metrics > span + span::before { content: '·'; position: absolute; left: -6px; color: var(--ink-4); }
.metrics b { color: var(--ink-2); font-weight: 650; font-feature-settings: "tnum" on; }
.metrics .m-on { color: var(--green-text); }
.metrics .m-on b { color: var(--green-text); font-weight: 750; }

/* 모바일 헤더 — 단일 56px 행: 브랜드 + 탭(가로스크롤 세그먼트) + 상태. flex-wrap 금지(세로나열 원천차단).
   이전 90px 2행(탭 풀폭)이 세로로 무너져 보이던 것 → 네이버/카카오식 1행 + 탭 가로스크롤로 교체. */
@media (max-width: 768px) {
  /* 노치/다이내믹아일랜드: viewport-fit=cover라 헤더가 노치 밑으로 들어가던 것 → safe-area-inset-top 만큼 헤더를 키워 컨텐츠 56px 확보 */
  .topbar { height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; box-sizing: border-box; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .brand { flex: 0 0 auto; min-width: 0; }
  .brand-mark { white-space: nowrap; flex-shrink: 0; }
  .tabs { order: 0; flex: 1 1 auto; width: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 1 0; padding: 0 4px; height: 40px; font-size: 13px; display: flex; align-items: center; justify-content: center; }   /* 탭이 brand~status 사이를 꽉 채움 → 오른쪽 빈칸 제거 */
  .status { flex: 0 0 auto; margin-left: auto; gap: 1px; }
  /* 모바일: 공지·로그인을 아이콘만(텍스트 숨김) → 탭 4개(전세/월세/매매/청약) 전부 들어갈 공간 확보 */
  /* 모바일도 텍스트 라벨 표시 — 아이콘만이면 공지 버튼이 뭔지 모호하고, status가 좁아져 탭 오른쪽 빈칸 생겼음. 텍스트가 빈칸 채우고 명확 */
  .info-btn, .auth-btn { padding: 5px 6px !important; min-height: 40px; display: inline-flex; align-items: center; font-size: 12px !important; }
  .status { gap: 2px; }   /* 공지/로그인/다크 타이트하게 — 공지 옆 어색한 여백 제거 */
  .layout { height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); }
  .mapwrap { inset: calc(56px + env(safe-area-inset-top, 0px)) 0 0 0; }
}
@media (max-width: 360px) { .brand-en { display: none; } }   /* 초협폭: 'Dazip' 숨겨 탭 폭 확보 */
/* 초협폭(SE 320px 등): 공지/로그인 텍스트가 status를 137px로 키워 탭 2개만 보이던 것 → 아이콘만으로 축소해 4탭 확보 */
@media (max-width: 374px) {
  .info-btn .hdr-lbl, .auth-btn .hdr-lbl { display: none; }
  .info-btn .hdr-ic, .auth-btn .hdr-ic { display: inline-block; vertical-align: middle; }
  .info-btn, .auth-btn { padding: 5px 6px !important; }
  .theme-toggle { width: 34px !important; min-width: 34px !important; }
  .tab { padding: 0 3px; font-size: 12.5px; }
  .topbar { gap: 5px; padding-left: 8px; padding-right: 8px; }
}

/* (핀 pointer-events 차단은 핀 클릭을 막아 되돌림 — 핀 clickable:true로 탭 열림 보장) */

/* 워드마크 귀여운 집 아이콘 — 점 자리(집 우상단)에 작게 올림(superscript 액센트) */
.wm-house { color: var(--green); margin-left: 1px; vertical-align: 0.38em; }
.ss-mark .wm-house { margin-left: 2px; vertical-align: 0.5em; }

/* 동일좌표 매물 피커 */
.pin-picker { position: fixed; inset: 0; z-index: 3400; display: flex; align-items: flex-end; justify-content: center; }
.pin-picker[hidden] { display: none !important; }
.pp-back { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.pp-card { position: relative; width: 100%; max-width: 420px; max-height: 70vh; overflow-y: auto; background: var(--page); border-radius: 16px 16px 0 0; margin: 0; box-shadow: 0 -8px 28px rgba(0,0,0,.22); animation: pp-rise var(--dur-2) var(--ease-out); }
/* 피커는 flex 중앙정렬이라 bar-in(비교바 전용 translate(-50%))을 쓰면 왼쪽으로 밀렸다 중앙으로 튐 → 세로 전용 애니 */
@keyframes pp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (min-width: 769px) { .pin-picker { align-items: center; } .pp-card { border-radius: 16px; } }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.pp-head button { background: none; border: none; font-size: 22px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.pp-list { padding: 6px 0; }
.pick-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--surface-subtle); }
.pick-row:active { background: var(--surface-section); }
.pick-badge { flex: none; min-width: 46px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 7px; border-radius: 7px; letter-spacing: -.2px; }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pick-t { font-size: 15px; font-weight: 750; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-desc { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-arr { flex: none; font-size: 20px; color: var(--ink-4, #b8c0cc); line-height: 1; }
/* 가격 라벨 폭 제한(인접 단독핀 겹침 완화). 라벨은 pp-lb 스팬 — 이전 :last-child 방식은
   라벨이 텍스트 노드라 ellipsis가 안 걸려 "64억 9,000~200억"이 말풍선을 뚫고 나갔음 */
.plat-pin { max-width: 95px; }   /* "64.8~200억"류 초고가 범위 완전표시. ellipsis는 1px만 넘쳐도 "…"공간 위해 여러글자 자르므로 여유 필요 */
.plat-pin .pp-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 범례 모바일 축소 (좌상단 핀 가림 완화) */
@media (max-width: 768px) { .map-legend { max-width: 97px; padding: 4px 6px; opacity: .82; } .map-legend .lg-title { font-size: 9px; padding: 0 2px 2px; } .lg-item { font-size: 10px; padding: 2px 3px; gap: 5px; } .lg-item .lg-dot { width: 6px; height: 6px; } .lg-item small { font-size: 9px; } }

/* 현재위치 버튼: 모바일은 화면 우측하단 고정(바텀시트 위에 떠서). 시트 full일 땐 숨김 */
@media (max-width: 768px) {
  /* 현재위치: 바텀시트 위에 떠서 시트 스냅 따라 이동(콘텐츠/메뉴 안 가림). z 시트(45) 위 */
  .map-loc { top: auto; right: 14px; z-index: 46; box-shadow: 0 3px 12px rgba(0,0,0,.22); transition: bottom .28s cubic-bezier(.2,0,0,1); }
  body.sheet-half .map-loc { bottom: calc(var(--vh, 1vh) * 48 + 12px); }
  body.sheet-peek .map-loc { bottom: calc(var(--vh, 1vh) * 14 + 162px); }
  body.sheet-full .map-loc { display: none; }
}

/* 클러스터 가격대 색상 4단계(네이버식 시세 히트맵) — 브랜드 그린 명도 단계, 네온 금지 */
.cluster-pin.price { border-radius: 13px; min-width: 46px; height: auto; min-height: 38px; padding: 5px 10px; white-space: nowrap; }
.cluster-pin.price b { font-size: 13px; font-weight: 800; display: block; line-height: 1.1; white-space: nowrap; }
.cluster-pin.price small { font-size: 9.5px; opacity: .9; white-space: nowrap; }
.cluster-pin.price.t1 { background: #2bb673; }
.cluster-pin.price.t2 { background: #14a05a; }
.cluster-pin.price.t3 { background: #0a7d44; }
.cluster-pin.price.t4 { background: #045f31; }
/* 매물 없는 단지(전체단지 토글 ON) = 회색 점 */
.empty-dot { width: 9px; height: 9px; border-radius: 50%; background: #aeb4ba; border: 1.5px solid #fff; opacity: .6; box-shadow: 0 1px 2px rgba(0,0,0,.2); cursor: pointer; }
/* 매물 없는 단지 리스트 카드 = 흐리게 */
.card--empty { opacity: .55; }

/* 확인일 오래됨(21일+) = 경고색(미끼/방치 의심 신호) */
.am-kv .stale { color: #c2410c; font-weight: 600; }
[data-theme="dark"] .am-kv .stale { color: #fb923c; }

/* 접근성 — 포커스 링(WCAG 2.4.7, 키보드 사용자). 마우스 클릭엔 안 떠 시각회귀 없음 */
:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; border-radius: 5px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* 개별매물 전세사기 위험 점검 — 보더색 전체 변경(사이드 띠 금지 규칙 준수) */
.lrisk { margin-top: 14px; padding: 12px 13px; border-radius: 12px; font-size: 12.5px; }
.lrisk-mid { background: #fff7ed; border: 1px solid #fdba74; }
.lrisk-high { background: #fef2f2; border: 1px solid #fca5a5; }
[data-theme="dark"] .lrisk-mid { background: #3a2c1a; border-color: #b45309; }
[data-theme="dark"] .lrisk-high { background: #3a1f1f; border-color: #b91c1c; }
.lrisk b { display: block; font-size: 13px; margin-bottom: 6px; }
.lrisk-mid b { color: #c2410c; } .lrisk-high b { color: #b91c1c; }
[data-theme="dark"] .lrisk-mid b { color: #fdba74; } [data-theme="dark"] .lrisk-high b { color: #fca5a5; }
.lrisk ul { margin: 0 0 7px; padding-left: 16px; line-height: 1.5; color: var(--ink-2); }
.lrisk li { margin-bottom: 3px; }
.lrisk small { color: var(--ink-3); font-size: 11px; line-height: 1.45; display: block; }

/* 당근 집주인 직거래 / 다방 네이버 확인 배지 (신뢰 신호) */
.badge-direct { font-size: 11px; font-weight: 700; color: #fff; background: #FF7E36; padding: 3px 8px; border-radius: 6px; }
.badge-verified { font-size: 11px; font-weight: 700; color: #fff; background: var(--green-btn); padding: 3px 8px; border-radius: 6px; }

/* 매물 상세 모바일 — 바텀시트(아래에서 슬라이드업, 상단 둥근 + 드래그 그립) */
@media (max-width: 768px) {
  .win { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 88vh;
    border-radius: 20px 20px 0 0; box-shadow: 0 -8px 32px rgba(0,0,0,.2); animation: winslideup .24s cubic-bezier(.22,.61,.36,1); }
  @keyframes winslideup { from { transform: translateY(100%) } to { transform: translateY(0) } }
  .win-grip { display: block; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--border); }
  .win-bar { padding-top: 16px; }
}
@keyframes winpop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* 매물 로딩 중 표시 — 쿼리 2초 지연 체감 완화(DB 무료한도로 공간인덱스 불가, 데이터 정리 전까지) */
#map.loading::after { content: '매물 불러오는 중…'; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(25,30,41,.82); color: #fff; padding: 7px 15px; border-radius: 18px; font-size: 12.5px; font-weight: 600;
  z-index: 30; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.25); animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 맵 드래그/줌 중 핀 content 숨김 — 500개 오버레이 매프레임 repaint가 팬 잼 주범. 빈 wrapper만 이동해 매끄럽게, 멈추면 idle이 다시 그림 */
#map.panning .cluster-pin, #map.panning .plat-pin, #map.panning .empty-dot { display: none !important; }

/* 계약 전 최종 체크 — 경매 회수 계산기 모달 */
.sc-open { display: block; width: 100%; margin: 10px 0 2px; padding: 12px; border: 1.5px solid var(--green); border-radius: 10px; background: var(--green-subtle); color: var(--green-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.sc-open:active { transform: scale(.98); }
.sc-sub { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.sc-intro { font-size: 12px; line-height: 1.6; color: var(--ink-2); background: var(--green-subtle); border-radius: 10px; padding: 9px 12px; margin: 6px 0 2px; word-break: keep-all; }
.sc-intro b { color: var(--green-text); font-weight: 700; }
.sc-grid { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 10px; }
.sc-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sc-grid input[type=number] { height: 42px; border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; font-size: 16px; background: var(--page); color: var(--ink-1); font-feature-settings: "tnum" on; }
.sc-grid input[type=number]:focus { outline: none; border-color: var(--green); }
.sc-grid input[type=range] { width: 100%; accent-color: var(--green); }
.sc-out { margin: 4px 0 12px; }
.sc-out .sc-safe, .sc-out .sc-danger { padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.sc-out .sc-safe { background: var(--green-subtle); color: var(--green-text); }
.sc-out .sc-danger { background: #FDE7EA; color: #C01530; }
.sc-out small { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.sc-out .sc-pend { font-size: 12.5px; color: var(--ink-3); }
.sc-links { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.sc-links a { font-size: 13px; color: var(--link); font-weight: 600; text-decoration: none; }
.sc-links a:hover { text-decoration: underline; }
.sc-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.sc-list { margin: 2px 0 12px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
[data-theme="dark"] .sc-out .sc-danger { background: #3a1820; color: #F0788A; }
.fav-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin-left: 4px; padding: 0 3px; border-radius: 8px; background: #E8590C; color: #fff; font-size: 9.5px; font-weight: 800; }

/* 단지 비교 — 실거래 겹쳐보기 (다단지 멀티시리즈) */
.cmp-chart-wrap { padding: 10px 14px 4px; border-bottom: 1px solid var(--border); }
.cmp-sec { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; display: flex; align-items: baseline; gap: 7px; }
.cmp-chart svg { width: 100%; height: auto; display: block; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 6px 0 8px; }
.cl-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.cl-item i { width: 10px; height: 3px; border-radius: 2px; }
.share-btn { border: 1px solid var(--border); background: var(--page); border-radius: 8px; padding: 6px 9px; color: var(--ink-2); cursor: pointer; line-height: 0; flex: none; margin-left: auto; }
.share-btn:active { transform: scale(.94); }
.detail-head .nv-btn { margin-left: 6px; }

/* 스크롤 체이닝 방어 — 모달/시트 내부 스크롤이 끝에서 배경(지도/페이지)까지 밀고 나가지 않게 */
.info-body, .cmp-scroll, .detail-body, .win-body, .list, .pp-list { overscroll-behavior: contain; }

/* 전세사기 위험도 — 원형 게이지 (토스 신용점수식 컴팩트 링) */
.risk-hero { display: flex; align-items: center; gap: 15px; margin-top: 4px; }
.risk-gauge { position: relative; flex: none; width: 74px; height: 74px; }
.rg-track { fill: none; stroke: rgba(125,125,125,.16); stroke-width: 7; }
.rg-fill { fill: none; stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 40px 40px; transition: stroke-dashoffset .85s var(--ease-out); }
.rg-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.rg-num b { font-size: 23px; font-weight: 800; font-feature-settings: "tnum" on; color: var(--ink-1); }
.rg-num small { font-size: 9.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; }
.risk-meta { min-width: 0; flex: 1; }
.risk-meta .risk-grade { display: inline-block; margin-bottom: 3px; }
.risk-meta .risk-desc { margin-top: 2px; }
.risk-safe   .rg-fill { stroke: #06A847; }
.risk-good   .rg-fill { stroke: #4FB877; }
.risk-warn   .rg-fill { stroke: #E6A21C; }
.risk-risk   .rg-fill { stroke: #E07B2E; }
.risk-danger .rg-fill { stroke: #D63B3B; }
@media (prefers-reduced-motion: reduce) { .rg-fill { transition: none; } }

/* 검색 지우기 버튼 — 커스텀 X (native webkit X는 숨겨 중복 방지) */
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -3px -2px 0; border: none; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0; border-radius: 50%; }
.search-clear[hidden] { display: none; }   /* explicit display가 [hidden]의 display:none을 덮는 함정 방어 — 빈 검색시 X 안 보이게 */
.search-clear:active { background: rgba(125,125,125,.16); }

/* 활성 필터 표시 — 값 선택된 select는 녹색 테두리+글자로 강조(빈 필터와 구분, 지금 뭐 걸렸는지 스캔). 배경틴트는 다크모드서 튀어 제외 */
#filters select.filt.on { border-color: var(--green); color: var(--green-text); font-weight: 600; }

/* 즐겨찾기 켤 때 팝 — 저장됐다는 마이크로 피드백(살짝 오버슈트). 끌 땐 무반응(조용히) */
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.34); } 100% { transform: scale(1); } }
.fav-star.pop svg { animation: fav-pop .26s var(--ease-out); }

/* 터치타겟 확대 — 26~30px 닫기X·35px 공유를 보이지 않는 ::after 탭존으로 ~44px 근접(시각 크기는 유지) */
.info-head button, .cmp-head button, .auth-head button, .share-btn { position: relative; }
.info-head button::after, .cmp-head button::after, .auth-head button::after { content: ''; position: absolute; inset: -9px; }
.share-btn::after { content: ''; position: absolute; inset: -7px -6px; }
@media (max-width: 768px) { .sort { min-height: 40px; } }   /* 정렬 select 세로 28→40 터치 */

/* '/' 검색 단축키 힌트 — 데스크탑만, 입력 중엔 숨김 */
.search-kbd { display: none; }
@media (min-width: 1024px) {
  .search-kbd { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-family: inherit; color: var(--ink-4); background: var(--page); }
  .searchbar:focus-within .search-kbd { display: none; }
}

/* 검색 자동완성 드롭다운 + 최근 본 단지 */
.searchbar { position: relative; }
.search-sug { position: absolute; top: calc(100% + 6px); left: -1px; right: -1px; background: var(--page); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index: 900; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.sug-sec { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 9px 13px 3px; }
.sug-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 9px 13px; border: none; background: none; cursor: pointer; text-align: left; }
.sug-row:hover, .sug-row.act { background: var(--surface-subtle); }
.sug-row b { font-size: 13.5px; color: var(--ink-1); font-weight: 600; }
.sug-row small { font-size: 11.5px; color: var(--ink-3); }
[data-theme="dark"] .search-sug { box-shadow: 0 12px 32px rgba(0,0,0,.5); }

/* 카드 호버 → 지도 핀 하이라이트 (데스크탑) */
@media (hover: hover) {
  .plat-pin.hl { transform: scale(1.14); box-shadow: 0 5px 16px rgba(0,0,0,.35); }
}

/* 관심단지 푸시 알림 배너 (관심 필터 모드, 미설정시) */
.push-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 28px); margin: 10px 14px 2px; padding: 12px 14px; border: 1.5px solid var(--green); border-radius: 12px; background: var(--green-subtle); cursor: pointer; text-align: left; }
.push-banner b { font-size: 13.5px; color: var(--green-text); font-weight: 700; }
.push-banner small { font-size: 11.5px; color: var(--ink-3); }
.push-banner:active { transform: scale(.985); }

/* 역세권 표시 + 로드뷰 링크 */
.card-sub .stn, .d-sub .stn { color: var(--green-text); font-weight: 600; }
.rv-link { color: var(--link); font-weight: 600; text-decoration: none; font-size: 12px; }
.rv-link:hover { text-decoration: underline; }

/* 주변 비슷한 단지 — 상세 하단 대안 카드 (전세탭: 더 안전한 대안 우선) */
.alt-row { display: flex; flex-direction: column; gap: 7px; }
.alt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); cursor: pointer; text-align: left; transition: background var(--dur-1) var(--ease-snap), border-color var(--dur-1) var(--ease-snap); }
.alt-card:hover { background: var(--surface-subtle); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.alt-card:active { transform: scale(.985); }
.alt-top { display: flex; align-items: center; gap: 7px; }
.alt-top b { font-size: 13.5px; font-weight: 700; color: var(--ink-1); }
.alt-safe { font-size: 10.5px; font-weight: 800; color: var(--green-text); background: var(--green-subtle); padding: 2px 7px; border-radius: 20px; }
.alt-sub { font-size: 12px; color: var(--ink-3); }

/* 상세 매물 필터 칩 + 실거래 대비 배지 */
.art-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 9px; }
.achip { border: 1px solid var(--border); background: var(--page); border-radius: 20px; padding: 4px 11px; font-size: 12px; color: var(--ink-2); cursor: pointer; min-height: 30px; }
.achip.on { background: var(--green-subtle); color: var(--green-text); border-color: var(--green); font-weight: 700; }
.achip:active { transform: scale(.95); }
.achip-cnt { font-size: 11.5px; color: var(--ink-3); margin-left: 3px; }
.art-vs { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex: none; }
.art-vs.hot { background: #FDEEE0; color: #B25B00; }
.art-vs.cool { background: #E3F0FB; color: #1263B8; }
.art-vs.flat { background: var(--surface-section); color: var(--ink-3); }
[data-theme="dark"] .art-vs.hot { background: #3a2a16; color: #F0A860; }
[data-theme="dark"] .art-vs.cool { background: #16293c; color: #6FB2E8; }
.rrow .rl-l { color: #0068C3; }   /* 최근 실거래 라벨 — 전세 파랑/매매 초록(차트 계열색과 동일) */
.rrow .rl-d { color: var(--green-text); }

/* 전월세 환산 표시 — 보증금 착시 제거(1억/50 vs 5천/80 직접 비교) */
.art-vs.conv { background: #EDE9FB; color: #5B45C9; }
[data-theme="dark"] .art-vs.conv { background: #2a2440; color: #A797E8; }
.d-conv { display: inline-block; margin-left: 9px; padding: 3px 9px; border-radius: 20px; background: #EDE9FB; color: #5B45C9; font-size: 12px; font-weight: 700; vertical-align: middle; }
[data-theme="dark"] .d-conv { background: #2a2440; color: #A797E8; }

/* 전세 안전 리포트 — 문서 결(번호 섹션 + 키-값 행), 인쇄/PDF 대응 */
.sc-row { display: flex; gap: 8px; margin: 10px 0 2px; }
.sc-row .sc-open { flex: 1; margin: 0; }
.rp-open { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--page); color: var(--ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rp-open small { font-size: 10px; font-weight: 500; color: var(--ink-4); }
.rp-open:active { transform: scale(.97); }
.rp-actions { display: flex; align-items: center; gap: 10px; }
.rp-btn { border: 1px solid var(--border); background: var(--page); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rp-title { font-size: 19px; font-weight: 800; color: var(--ink-1); }
.rp-meta { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 12px; }
.rp-hero { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 12px; background: var(--surface-section); margin-bottom: 4px; }
.rp-score b { font-size: 30px; font-weight: 800; font-feature-settings: "tnum" on; }
.rp-score small { font-size: 10.5px; color: var(--ink-3); display: block; }
.rp-hero.risk-safe .rp-score b, .rp-hero.risk-good .rp-score b { color: #06A847; }
.rp-hero.risk-warn .rp-score b { color: #B25B00; }
.rp-hero.risk-risk .rp-score b, .rp-hero.risk-danger .rp-score b { color: #C01530; }
.rp-grade b { font-size: 15px; display: block; }
.rp-grade span { font-size: 12px; color: var(--ink-3); }
.rp-conf { display: block; font-size: 11px; color: #B25B00; font-weight: 600; }
.rp-sec { font-size: 12px; font-weight: 800; color: var(--ink-2); letter-spacing: .01em; margin: 15px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.rp-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; }
.rp-ic { flex: none; width: 15px; text-align: center; font-weight: 800; color: var(--ink-4); }
.rp-row.ok .rp-ic { color: #06A847; }
.rp-row.warn .rp-ic { color: #B25B00; }
.rp-row.bad .rp-ic { color: #C01530; }
.rp-k { color: var(--ink-3); flex: none; min-width: 118px; }
.rp-v { color: var(--ink-1); font-weight: 600; }
.rp-row.bad .rp-v { color: #C01530; }
.rp-check { font-size: 12px; line-height: 1.7; color: var(--ink-2); }
@media print {
  body > *:not(#infoModal) { display: none !important; }
  #infoModal { position: static !important; }
  #infoModal .info-back { display: none; }
  .report-sheet { max-width: 100% !important; max-height: none !important; box-shadow: none !important; margin: 0 !important; }
  .rp-body { overflow: visible !important; }
  .rp-actions .rp-btn, #infoClose { display: none; }
}
.rp-open.wide { flex: 1; }
.card:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 10px; }   /* 키보드 포커스 가시화 */