/* 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: #8B8D90;
  --ink-4: #B7BCC2;
  --green: #03C75A;
  --green-hover: #03B554;
  --green-subtle: #E7F7EE;
  --green-text: #06A847;
  --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; }

/* underline tabs — Naver-style */
.tabs { display: flex; gap: 2px; height: 100%; }
.tab {
  border: none; background: transparent; height: 100%;
  padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-3);
  position: relative; transition: color .12s ease;
}
.tab:hover { color: var(--ink-2); }
.tab.is-active { color: var(--ink-1); font-weight: 700; }
.tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px;
  background: var(--green); border-radius: 2px;
}

.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); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 416px 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; overflow-y: auto; flex: 1; min-height: 0; }
.card {
  padding: 13px 18px; cursor: pointer;
  border-left: 2.5px solid transparent;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .1s ease;
}
.card:hover { background: var(--surface-subtle); }
.card.is-active { background: var(--green-subtle); border-left-color: var(--green); }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.card-price { font-size: 16px; font-weight: 800; color: var(--ink-1); font-feature-settings: "tnum" on; white-space: nowrap; }
.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); }

.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; }

/* ---------- 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: 1px solid var(--border-strong); color: var(--ink-1);
  font-size: 12px; font-weight: 700; 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); border-color: var(--green); color: #fff; z-index: 1000 !important; }
.price-pin.muted { color: var(--ink-3); }

.empty-state { padding: 56px 24px; text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }

/* ---------- 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); }
.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; }

/* ---------- 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: #C2700A; }
.badge.danger { background: #FDE7EA; color: var(--live); }
.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: 8px; padding: 8px 12px; font-size: 13px; }
.rrow + .rrow { border-top: 1px solid var(--border-subtle); }
.rrow > span:first-child { color: var(--ink-2); width: 96px; }
.rrow b { color: var(--ink-1); font-feature-settings: "tnum" on; }
.ax2 { margin-left: auto; color: var(--ink-3); font-size: 12px; }

/* ---------- 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); 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: #545A64;
  --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 { background: var(--green-subtle); color: var(--green-text); border-color: var(--green); }
.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; }
.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); 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; }
.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.012em; font-weight: 750; }

/* 타이포 위계: 크기보다 명도/굵기 (PATTERNS #8) */
.card-name { font-weight: 650; 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; }

/* ---------- 카카오맵 다크모드 (커스텀 다크타일 미지원 → 타일 invert+hue, 핀은 역필터 복원) ---------- */
[data-theme="dark"] #map { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.82); }
[data-theme="dark"] #map .price-pin { filter: invert(1) hue-rotate(180deg); }