*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f0f2f7;
  --bg-card:    #ffffff;
  --bg-card2:   #f7f8fc;
  --bg-input:   #eef0f6;
  --accent:     #3b7de8;
  --accent-dim: #dce8fd;
  --green:      #1a9e6a;
  --green-dim:  #d4f0e4;
  --red:        #d94f4f;
  --red-dim:    #fde8e8;
  --orange:     #e07c2a;
  --text:       #1a1c2e;
  --text-muted: #7a849a;
  --border:     #dde0ea;
  --radius:     12px;
  --nav-h:      60px;
  --header-h:   52px;
}

html, body {
  height: 100%;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: #e8eaf0;
  color: var(--text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  letter-spacing: -0.01em;
}

.hidden { display: none !important; }

/* ═══ Screens ═══════════════════════════════════════════════════════════ */
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; min-height: 100dvh; }

/* ═══ LOGIN ═════════════════════════════════════════════════════════════ */
#screen-login {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #d6e4ff 0%, var(--bg) 70%);
}

.login-wrap {
  text-align: center;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.login-logo .logo-icon { font-size: 3.5rem; display: block; margin-bottom: 8px; }
.login-logo h1 { font-size: 2rem; font-weight: 700; letter-spacing: -1px; }
.login-logo p  { color: var(--text-muted); font-size: .95rem; }

.btn-google {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #333;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.btn-google:hover  { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.btn-google:active { transform: translateY(0); }
.login-error { color: var(--red); font-size: .85rem; min-height: 20px; }

/* ═══ APP SHELL ══════════════════════════════════════════════════════ */
#screen-app {
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  /* Mobile: full viewport */
}

.app-header {
  flex-shrink: 0;
  z-index: 10;
  height: var(--header-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.header-title {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.5px;
}

.header-actions { display: flex; gap: 4px; }

/* app-body: sidebar + main — column on mobile, row on desktop */
.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.app-main {
  flex: 1;
  order: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ═══ Views ══════════════════════════════════════════════════════════ */
.view { display: none; padding: 16px; padding-bottom: 24px; }
.view.active { display: block; }

/* 검색 탭은 패딩 없이 — filter-bar 전체 너비로 sticky */
#view-search { padding: 0; }

/* ═══ Bottom Nav ══════════════════════════════════════════════════════ */
.bottom-nav {
  height: var(--nav-h);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  flex-shrink: 0;
  order: 2; /* mobile: below app-main */
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .75rem;
  transition: color .15s;
  padding: 4px 0;
}
.nav-btn.active { color: var(--accent); }
.nav-icon { font-size: 1.35rem; line-height: 1; }
.nav-label { font-size: .7rem; font-weight: 600; }

/* ═══ Hero Card ══════════════════════════════════════════════════════ */
.hero-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.hero-row:last-child { margin-bottom: 0; }
.hero-row-sep {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.hero-label {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.hero-amount {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.hero-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

.total-block .hero-amount { font-size: 1.4rem; color: var(--accent); }
.accent-green { color: var(--green); }
.accent-accent { color: var(--accent); }

/* ═══ Pills ══════════════════════════════════════════════════════════ */
.pill {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  vertical-align: middle;
}
.pill-blue   { background: var(--accent-dim); color: var(--accent); }
.pill-green  { background: var(--green-dim);  color: var(--green); }
.pill-red    { background: var(--red-dim);    color: var(--red); }
.pill-gray   { background: var(--bg-input);   color: var(--text-muted); }
.pill-orange { background: #fdeedd; color: var(--orange); }

/* ═══ Section Card ═══════════════════════════════════════════════════ */
.section-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-header.pad-h { padding: 0 16px; margin-bottom: 8px; }

.section-title { font-size: .9rem; font-weight: 700; }
.section-note  { font-size: .75rem; color: var(--text-muted); }

/* ═══ Breakdown List ═════════════════════════════════════════════════ */
.breakdown-list { display: flex; flex-direction: column; gap: 8px; }

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.breakdown-label { color: var(--text-muted); }
.breakdown-value { font-weight: 600; }
.breakdown-excluded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: .6;
}

/* ═══ Support List ═══════════════════════════════════════════════════ */
.support-list { display: flex; flex-direction: column; gap: 8px; }

.support-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card2);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}
.support-item:hover { background: var(--bg-input); }

.support-name  { font-size: .88rem; font-weight: 600; }
.support-note  { font-size: .75rem; color: var(--text-muted); }
.support-amount { font-size: .95rem; font-weight: 700; color: var(--green); }

.empty-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
  padding: 20px 0;
}

/* ═══ Loan Summary ═══════════════════════════════════════════════════ */
.loan-summary { display: flex; flex-direction: column; gap: 8px; }

.loan-policy-banner { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.loan-badge {
  font-size: .72rem; font-weight: 600;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 20px; padding: 3px 9px;
}

.loan-item { background: var(--bg-card2); border-radius: 8px; padding: 10px 12px; }
.loan-item-sub { background: transparent; padding: 2px 12px; }
.loan-item-sep { border-top: 1px solid var(--border); padding-top: 12px; background: transparent; }
.loan-item-label { font-size: .72rem; color: var(--text-muted); margin-bottom: 2px; }
.loan-item-value { font-size: .9rem; font-weight: 700; }

.loan-badge-green { background: var(--green-dim) !important; color: var(--green) !important; }

.loan-warn {
  font-size: .78rem;
  color: var(--red);
  background: var(--red-dim);
  border-radius: 8px;
  padding: 8px 12px;
}

/* ── 정책 대출 섹션 ─────────────────────────────────────────────── */
.policy-loans-section {
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.policy-loans-title {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.policy-loan-row {
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.policy-eligible   { background: var(--green-dim); }
.policy-ineligible { background: var(--bg-card2); opacity: .7; }

.policy-loan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.policy-loan-name { font-size: .85rem; font-weight: 700; }
.policy-loan-rate { font-size: .78rem; font-weight: 600; color: var(--accent); }
.policy-loan-detail {
  font-size: .78rem;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.policy-reason { color: var(--red); font-size: .72rem; }
.policy-loan-note { font-size: .72rem; color: var(--text-muted); }

/* ═══ Filter Bar ══════════════════════════════════════════════════════ */
.filter-bar {
  background: var(--bg-card);
  padding: 8px 16px 10px;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: var(--header-h);
  z-index: 9;
}

/* 레이블 + 인풋 묶음 */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  min-height: 62px;        /* 모든 filter-section 최소 세로 높이 통일 */
}
.filter-section-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.35;       /* 레이블 줄바꿈 시 간격 */
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* 면적 행 — 인풋 + 검색 버튼 나란히 */
.filter-row-with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 방향 + 세대수 나란히 (2열) — 양쪽 컬럼 높이 동일하게 stretch */
.filter-row-2col {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}
.filter-row-2col .filter-section {
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 2열 안의 input/select는 남은 높이를 채워 양쪽 높이 일치 */
.filter-row-2col .filter-input,
.filter-row-2col .filter-select {
  flex: 1;
  height: auto;
  min-height: 42px;
}

/* 토글 가로 행 */
.filter-toggles-row {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding: 8px 2px 2px;
}

/* 기존 filter-row (지역/유형 선택 행에만 사용) */
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.filter-select {
  flex: 1;
  height: 42px;
  background: var(--bg-input);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 0 12px;
  font-size: .9rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color .15s;
}
.filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-input {
  flex: 1;
  height: 42px;
  background: var(--bg-input);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 0 10px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
  width: 100%;
  text-align: center;
  transition: border-color .15s;
}
.filter-input:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-input::placeholder { color: var(--text-muted); font-size: .82rem; text-align: center; }

.range-sep {
  color: var(--text-muted);
  font-size: .8rem;
  flex-shrink: 0;
  padding: 0 2px;
}

.filter-range { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }

/* 규제지역 배지 */
.filter-row-region { flex-wrap: wrap; gap: 6px 8px; }

.area-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.area-type-desc {
  font-weight: 400;
  opacity: .8;
}
.area-speculative { background: #fde8e8; color: #c0392b; }
.area-adjusted    { background: #fef3cd; color: #9a6700; }
.area-general     { background: var(--green-dim); color: var(--green); }

.btn-search {
  flex-shrink: 0;
  height: 36px;
  margin-top: 0;
  padding: 0 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59,125,232,.35);
  transition: transform .1s, box-shadow .1s;
  white-space: nowrap;
  letter-spacing: .02em;
}
.btn-search:hover { box-shadow: 0 4px 14px rgba(59,125,232,.45); transform: translateY(-1px); }
.btn-search:active { opacity: .85; transform: none; box-shadow: none; }

.filter-chips { flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}
.filter-chip .chip-x { font-size: .9rem; line-height: 1; }

.filter-toggle { gap: 16px; }
.toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.toggle-label input { accent-color: var(--accent); }

/* ═══ Results Section ════════════════════════════════════════════════ */
.results-section {
  background: var(--bg);
  flex: 1;
}

.results-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px 8px;
  border-bottom: 2px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.results-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.results-header-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.results-count-badge {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
}
.results-sort-note {
  font-size: .73rem;
  color: var(--text-muted);
  padding-left: 1px;
}

/* ═══ Property List ══════════════════════════════════════════════════ */
.property-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 24px;
}

.search-placeholder {
  text-align: center;
  color: var(--text-muted);
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.6;
}
.search-placeholder p:first-child { font-size: 2.5rem; }

.property-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  position: relative;
  border-left: 4px solid var(--border);
}
.property-card:active { transform: scale(.99); }

/* 구매 가능 여부별 좌측 컬러 보더 */
.property-card.afford-can    { border-left-color: var(--green); }
.property-card.afford-close  { border-left-color: var(--orange); }
.property-card.afford-cannot { border-left-color: var(--red); }

.prop-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.prop-title-wrap { min-width: 0; flex: 1; }
.prop-name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-type   { font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.prop-status { flex-shrink: 0; }

/* 가격 — 구매 불가 시 빨간색 */
.prop-price {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -.02em;
}
.prop-price-can    { color: var(--accent); }
.prop-price-close  { color: var(--orange); }
.prop-price-cannot { color: var(--red); }

/* KB시세 뱃지 */
.prop-kb-price {
  font-size: .72rem;
  color: var(--text-muted);
  margin: -4px 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.prop-meta {
  display: flex;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-weight: 500;
}
.prop-meta span { display: flex; align-items: center; gap: 3px; }

/* ── 구매 가능 여부 배너 (핵심 강조) ── */
.prop-afford-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.prop-afford-bar strong { font-size: .95rem; font-weight: 800; }
.afford-icon { font-size: .95rem; }
.prop-afford-bar.can    { background: var(--green-dim); color: var(--green); }
.prop-afford-bar.close  { background: #fff3e0;          color: var(--orange); }
.prop-afford-bar.cannot { background: var(--red-dim);   color: var(--red); }

/* 액션 버튼 (헤더 우측으로 이동) */
.prop-actions { display: flex; gap: 6px; flex-shrink: 0; }

.btn-watch {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .75rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
}
.btn-watch.watching { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.btn-watch:hover:not(.watching) { background: var(--bg-input); }

.prop-new-badge {
  position: absolute;
  top: 10px;
  left: -4px;
  background: var(--green);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 4px 4px 0;
}

/* ═══ Loading ════════════════════════════════════════════════════════ */
.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--text-muted);
  font-size: .85rem;
}

.spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* ═══ Settings ═══════════════════════════════════════════════════════ */
.settings-group {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.settings-title {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.settings-desc {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }

.setting-label { font-size: .85rem; color: var(--text-muted); flex: 1; display: flex; align-items: center; gap: 6px; }

/* 쿠키 필수 뱃지 */
.cookie-required-badge {
  font-size: .65rem;
  font-weight: 700;
  background: #fff0f0;
  color: var(--red);
  border: 1px solid #fca5a5;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .02em;
}

/* 쿠키 textarea */
.cookie-textarea {
  width: 100% !important;
  height: auto;
  text-align: left;
  resize: vertical;
  font-size: .78rem;
  font-family: 'Menlo', 'Consolas', monospace;
  line-height: 1.5;
  padding: 8px 10px;
}

/* 쿠키 단계별 가이드 박스 */
.cookie-guide {
  margin-top: 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.cookie-guide-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.cookie-method {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.cookie-method-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
  background: var(--accent-dim);
  color: var(--accent);
}
.cookie-method-badge.recommended {
  background: var(--green-dim);
  color: var(--green);
}
.cookie-method-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cookie-guide-steps {
  margin: 0 0 10px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookie-guide-steps li {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cookie-guide-steps strong { color: var(--text); }
.cookie-guide-steps kbd {
  display: inline-block;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .72rem;
  font-family: inherit;
  color: var(--text);
}
.cookie-guide-steps code {
  background: var(--bg-card2);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: .75rem;
  color: var(--accent);
}
.cookie-example {
  display: inline-block;
  margin-top: 3px;
  background: var(--bg-card2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: .72rem;
  color: var(--text-muted);
  word-break: break-all;
}
.cookie-guide-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.cookie-guide-link:hover { text-decoration: underline; }
.btn-cookie-helper {
  width: 100%;
  height: 36px;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-cookie-helper:hover { background: var(--accent-dim); }

/* Extension 상태 배지 */
.ext-status-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.ext-status-connected {
  background: var(--green-dim, #e6f9ee);
  color: var(--green);
}
.ext-status-unknown {
  background: var(--bg-card2);
  color: var(--text-muted);
}

/* Extension 버전 배지 */
.ext-version-badge {
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.ext-version-latest {
  background: var(--green-dim, #e6f9ee);
  color: var(--green);
}
.ext-version-outdated {
  background: #fff3e0;
  color: #e65100;
}
.dark .ext-version-outdated {
  background: rgba(255,180,50,.08);
  color: #ffcc80;
}

/* Extension 업데이트 배너 */
.ext-update-banner {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 10px;
  font-size: .8rem;
  color: #856404;
  line-height: 1.6;
}
.ext-update-banner a { color: #3b7de8; }
.dark .ext-update-banner {
  background: rgba(255, 193, 7, .1);
  border-color: rgba(255, 193, 7, .3);
  color: #ffd54f;
}

/* ═══ 수도권 조건 탐색 모달 ═══════════════════════════════════════════ */
#region-explore-map .leaflet-popup-content { font-size: .8rem; }

.explore-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.explore-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-card2);
  cursor: pointer;
  transition: background .1s;
}
.explore-result-row:hover { background: var(--accent-dim); }
.explore-rank {
  width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.explore-name  { flex: 1; font-size: .82rem; font-weight: 600; }
.explore-count { font-size: .75rem; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.explore-price { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; min-width: 70px; text-align: right; }

/* 자전거길 툴팁 */
.cycleway-tooltip { font-size: .75rem; background: rgba(34,197,94,.9); color: #fff; border: none; }

/* 조건탐색 버튼 */
#btn-region-explore {
  font-size: .75rem;
  white-space: nowrap;
}

/* 쿠키 자동 수집 버튼 */
.btn-auto-cookie {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  height: 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}
.btn-auto-cookie:hover:not(:disabled) { background: var(--accent-dark, #2563eb); }
.btn-auto-cookie:disabled { opacity: .45; cursor: not-allowed; }

/* 자동수집 완료 힌트 */
.cookie-auto-hint {
  font-size: .75rem;
  color: var(--green);
  font-weight: 600;
  margin: 0;
}
.cookie-auto-hint.hidden { display: none; }

.setting-input {
  width: 160px;
  height: 34px;
  background: var(--bg-input);
  border: none;
  border-radius: 8px;
  padding: 0 10px;
  font-size: .85rem;
  color: var(--text);
  text-align: right;
}

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 12px;
  transition: background .2s;
  cursor: pointer;
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track::after { left: 23px; }

.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

/* ═══ Buttons ════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:active { opacity: .85; }

.btn-secondary {
  background: var(--bg-input);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:active { opacity: .85; }

.btn-ghost {
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .88rem;
  cursor: pointer;
}

.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-sm {
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: 6px;
}

.btn-full { width: 100%; height: 46px; border-radius: 10px; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
}
.btn-icon:hover { background: var(--bg-input); color: var(--text); }

/* ═══ Modals ═════════════════════════════════════════════════════════ */
/* z-index 1000: Leaflet 최대(800)보다 높아야 지도 위에 표시됨 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  animation: fade-in .15s ease;
}

/* 상세 모달 전용: 지도를 가리지 않도록 화면 하단 65%만 오버레이 */
.modal-overlay-partial {
  position: fixed;
  top: 35%;          /* 지도 영역(상단 35%) 노출 */
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  animation: fade-in .15s ease;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  width: 100%;
  max-height: 90dvh;
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  animation: slide-up .2s ease;
}
/* partial 오버레이 내 시트는 해당 영역을 모두 채움 */
.modal-overlay-partial .modal-sheet {
  max-height: 100%;
  height: 100%;
  border-radius: 16px 16px 0 0;
}
.modal-sheet-tall { max-height: 95dvh; }

@keyframes slide-up { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 0;
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.modal-header h2 { flex: 1; font-size: .95rem; font-weight: 700; }

.modal-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-hint { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: .82rem; color: var(--text-muted); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-input);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  color: var(--text);
  width: 100%;
  font-family: inherit;
}
.form-field textarea { resize: none; }

.modal-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.modal-actions .btn-primary { flex: 1; }

/* ═══ Detail Modal ═══════════════════════════════════════════════════ */
.detail-body { padding: 16px; }

.detail-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.detail-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  color: var(--text-muted);
}

.detail-afford-box {
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.detail-afford-box.can    { background: var(--green-dim); }
.detail-afford-box.cannot { background: var(--red-dim); }
.detail-afford-box.close  { background: #fdeedd; }

.detail-afford-title { font-size: .88rem; font-weight: 700; margin-bottom: 8px; }
.detail-afford-title.can    { color: var(--green); }
.detail-afford-title.cannot { color: var(--red); }
.detail-afford-title.close  { color: var(--orange); }

.detail-afford-rows { display: flex; flex-direction: column; gap: 6px; }
.detail-afford-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
}
.detail-afford-row .dkey { color: var(--text-muted); }
.detail-afford-row .dval { font-weight: 600; }

.detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.detail-actions .btn-primary { flex: 1; }

.detail-note {
  background: var(--bg-card2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 12px;
}

/* ═══ Toast Queue ════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  z-index: 999;
  pointer-events: none;
}
.toast-item {
  background: #1a1c2e;
  color: #fff;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
}
.toast-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ Global Loading ══════════════════════════════════════════════════ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.7);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Watchlist empty ════════════════════════════════════════════════ */
#watchlist-empty {
  padding: 48px 16px;
  font-size: .9rem;
  text-align: center;
}

/* ═══ 지도 패널 ══════════════════════════════════════════════════════ */

/* 모바일: 결과 섹션은 세로 스택 */
.results-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
/* 모바일: list-pane이 전체 차지, map-pane은 절대 위치로 지도 토글 처리 */
.results-list-pane {
  display: contents; /* 모바일에서 투명 래퍼 — 자식이 직접 배치됨 */
}
.results-map-pane {
  display: contents; /* 모바일에서 투명 래퍼 */
}

.map-panel {
  height: 240px;
  transition: height .3s ease, opacity .3s ease;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.map-panel.map-hidden {
  height: 0;
  opacity: 0;
  pointer-events: none;
  border-bottom: none;
}
#search-map {
  width: 100%;
  height: 100%;
}

/* 지도 토글 버튼 */
.btn-map-toggle {
  margin-left: auto;
  background: var(--accent-dim);
  color: var(--accent);
  border: none;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-map-toggle:hover { background: var(--accent); color: #fff; }

/* ═══ Modal centering (600px+) ════════════════════════════════════════ */
@media (min-width: 600px) {
  .modal-sheet { max-width: 600px; margin: auto; border-radius: 16px; }
  .modal-overlay { align-items: center; }
  /* 데스크탑: partial 모달도 전체 화면 덮기 (지도가 모달 뒤로) */
  .modal-overlay-partial {
    top: 0;
    align-items: center;
  }
  .modal-overlay-partial .modal-sheet {
    max-width: 600px;
    max-height: 88dvh;
    height: auto;
    border-radius: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FILTER BOTTOM BAR (max 767px)
   — 필터 바를 화면 하단(nav 위)에 고정, 필터 본체는 위로 펼침
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* 필터 바: 하단 고정 */
  .filter-bar {
    position: fixed !important;
    top: auto !important;
    bottom: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 50;
    border-top: 1.5px solid var(--border);
    border-bottom: none !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.09) !important;
    padding: 8px 14px 10px !important;
    overflow: visible !important; /* 필터 본체가 위로 넘쳐야 함 */
  }

  /* 필터 본체: 하단 바 위로 펼침 (바텀시트) */
  #filter-bar-body {
    position: absolute !important;
    bottom: 100% !important;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1.5px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -6px 24px rgba(0,0,0,.13);
    border-radius: 16px 16px 0 0;
    padding: 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 88vh !important;
    overflow-y: auto !important;
    transition: max-height .35s ease, opacity .3s ease !important;
  }

  #filter-bar-body.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 결과 섹션: 하단 고정 필터 바 높이만큼 여백 */
  #view-search .results-section {
    padding-bottom: 62px;
  }

  /* 지도 패널: 모바일에서 더 넉넉한 높이 */
  .map-panel {
    height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (768px+)
   — 사이드바 내비게이션 + 2열 그리드 레이아웃
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── 배경 ── */
  body { background: #d8dce8; }

  /* ── 앱 컨테이너: 최대폭 + 라운드 카드 ── */
  #screen-app {
    max-width: 1360px;
    margin: 16px auto;
    height: calc(100dvh - 32px);
    border-radius: 20px;
    box-shadow: 0 12px 60px rgba(0,0,0,.22);
    overflow: hidden;
  }

  /* ── 상단 헤더 ── */
  .app-header {
    border-radius: 20px 20px 0 0;
    padding: 0 28px;
    height: 58px;
  }
  .header-title { font-size: 1.25rem; }

  /* ── 앱 바디: 가로 배치 ── */
  .app-body {
    flex-direction: row;
  }

  /* ── 왼쪽 사이드바 네비게이션 ── */
  .bottom-nav {
    order: 1;
    flex-direction: column;
    width: 82px;
    height: auto;
    border-top: none;
    border-right: 1px solid var(--border);
    border-bottom-left-radius: 20px;
    padding: 8px 0 16px;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
  }
  .nav-btn {
    padding: 16px 0 12px;
    flex-direction: column;
    gap: 4px;
    border-radius: 0;
    height: auto;
  }
  .nav-btn.active {
    background: var(--accent-dim);
    border-right: 3px solid var(--accent);
  }
  .nav-icon { font-size: 1.45rem; }
  .nav-label { font-size: .68rem; letter-spacing: -.02em; }

  /* ── 메인 콘텐츠 ── */
  .app-main {
    order: 2;
    flex: 1;
    overflow: hidden; /* 각 view가 자체 스크롤 */
    border-bottom-right-radius: 20px;
    display: flex;
    flex-direction: column;
  }

  /* 비-검색 뷰: overflow-y 스크롤 */
  .view.active {
    flex: 1;
    overflow-y: auto;
  }

  /* ── 홈 뷰: 2열 그리드 (반드시 .active 조건 필요 — ID 선택자가 display:none 덮어씀 방지) ── */
  #view-home.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    align-content: start;
    box-sizing: border-box;
  }
  #view-home.active > .hero-card {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  #view-home.active > .section-card {
    margin-bottom: 0;
  }
  #view-home.active > #section-loan {
    grid-column: 1 / -1;
  }
  .hero-card { padding: 24px; }
  .hero-amount { font-size: 1.4rem; }
  .total-block .hero-amount { font-size: 1.6rem; }

  /* ── 검색 뷰: 필터(좌) + 지도+결과(우) ── */
  #view-search.active {
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
  }

  .filter-bar {
    position: relative;
    top: 0;
    width: 340px;
    flex-shrink: 0;
    /* 명시적 높이 + 독립 스크롤 컨텍스트 */
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    border-bottom: none;
    border-right: 2px solid var(--border);
    box-shadow: none;
    padding: 20px 18px 28px;
    gap: 12px;
    /* align-self: stretch 제거 — 명시적 높이 사용 */
  }
  /* 데스크톱에서는 filter-bar-body overflow 제거 → 내용 전체 표시 */
  #filter-bar-body {
    overflow: visible !important;
    max-height: none !important;
  }

  /* 결과 섹션: 좌측 40% 목록 + 우측 60% 지도 */
  .results-section {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
  }

  /* 좌측: 매물 목록 (스크롤 가능) */
  .results-list-pane {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
    /* 스크롤은 내부 #search-results에서 처리 */
  }

  /* 우측: 지도 (스크롤 따라가지 않도록 sticky) */
  .results-map-pane {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100%;
  }

  /* 결과 헤더 */
  .results-header {
    padding: 10px 16px 8px;
    flex-shrink: 0;
  }

  /* 지도: 데스크톱에서 우측 패널 전체 차지 */
  #map-panel,
  #map-panel.map-hidden {
    flex: 1 !important;
    height: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-bottom: none !important;
    border-left: none !important;
  }
  #map-panel #search-map {
    width: 100%;
    height: 100%;
  }
  #btn-map-toggle { display: none; } /* 토글 버튼 숨김 */

  /* 결과 카드: 1열 스크롤 목록 */
  #search-results.property-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 20px;
  }
  #search-results .search-placeholder {
    width: 100%;
  }
  #search-loading {
    flex-shrink: 0;
    padding: 8px 16px;
  }
  #search-more-wrap {
    flex-shrink: 0;
    padding: 10px 0 16px;
  }

  /* ── 찜 목록: 2열 그리드 ── */
  #view-watchlist {
    padding: 24px;
  }
  #watchlist-items.property-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
  }
  #watchlist-empty { max-width: 1000px; margin: 0 auto; }

  /* ── 설정: 중앙 정렬 + 2열 그리드 (.active 조건 필수) ── */
  #view-settings.active {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 24px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: start;
  }
  #view-settings .settings-group { margin-bottom: 0; }
  #view-settings .settings-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 12px;
  }
  #view-settings .settings-actions .btn-full {
    width: auto;
    flex: 1;
  }

  /* ── 카드 hover 효과 (데스크톱) ── */
  .property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
  }

  /* ── 버튼 크기 ── */
  .btn-search { height: 40px; padding: 0 22px; font-size: .95rem; }
  .filter-input, .filter-select { height: 44px; }
  .filter-bar .filter-row { gap: 10px; }
}

/* ═══ Amenity Filter Section ═════════════════════════════════════════ */
.amenity-filter-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.amenity-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.amenity-filter-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.amenity-chips {
  display: flex;
  flex-wrap: wrap;       /* 여러 줄로 자동 래핑 */
  gap: 6px;
  margin-bottom: 4px;
  /* overflow 제거 → 칩이 몇 개든 전부 표시 */
  overflow: visible;
  max-height: none;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  cursor: default;
  transition: background .15s;
}

.amenity-chip .chip-minutes { opacity: .7; font-size: .73rem; }

/* 우선순위 배지 (chip 내부 버튼) */
.priority-badge {
  border: none;
  border-radius: 20px;
  padding: 2px 7px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.4;
  transition: opacity .12s;
}
.priority-badge:hover { opacity: .8; }
.priority-badge.priority-1 { background: #fde8e8; color: #c0392b; }
.priority-badge.priority-2 { background: #fef3cd; color: #9a6700; }
.priority-badge.priority-3 { background: #d4f0e4; color: var(--green); }

.amenity-chip .chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  color: inherit;
  opacity: .6;
  padding: 0;
  line-height: 1;
}
.amenity-chip .chip-remove:hover { opacity: 1; }

.amenity-empty {
  font-size: .78rem;
  color: var(--text-muted);
  padding: 2px 0 4px;
  font-style: italic;
}

/* ═══ Amenity Modal ══════════════════════════════════════════════════ */
.amenity-section-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.amenity-nl-hint {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.amenity-nl-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.amenity-nl-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.amenity-nl-input:focus { border-color: var(--accent); }

.amenity-nl-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.example-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text);
  transition: background .12s, border-color .12s;
}
.example-chip:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.amenity-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.amenity-divider::before,
.amenity-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.amenity-divider span {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.amenity-structured { display: flex; flex-direction: column; gap: 12px; }

.amenity-slider {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--accent);
  cursor: pointer;
}

.amenity-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══ Amenity result badge on property card ═════════════════════════ */
.amenity-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 600;
  opacity: .9;
  transition: transform .1s;
}
.amenity-badge[data-poi-lat]:hover { transform: scale(1.04); }
.amenity-badge.pass    { background: var(--green-dim); color: var(--green); }
.amenity-badge.fail    { background: var(--red-dim);   color: var(--red); }
.amenity-badge.pending { background: var(--bg-input);  color: var(--text-muted); }
/* OSM 데이터 부족/타임아웃: 회색 경고 배지 */
.amenity-badge.warn    { background: #fff3cd;           color: #856404; }
/* POI 이름 표시 (약식, 배지 안) */
.amenity-poi {
  font-size: .67rem;
  opacity: .8;
  font-weight: 500;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amenity-result-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Kakao 키 미설정 안내 */
.amenity-note {
  font-size: .68rem;
  color: var(--text-muted);
  width: 100%;
  margin-top: 2px;
}

/* 점수 요약 줄 (충족 바 + 텍스트) */
.amenity-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.amenity-score-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.amenity-score-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

.amenity-score-text {
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.prop-amenity-summary {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* filter-range-sm — 그리드 내부에선 width 100% 사용 */
.filter-range-sm { width: 100%; }

/* ═══ Affordable / New-only toggle wrap ════════════════════════════ */
.filter-toggles-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ═══ Multi-region chips ════════════════════════════════════════════ */
#search-regions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.region-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--accent-dim, #e8f0fe);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
}
.region-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--accent);
  font-size: .9rem;
  opacity: .7;
}
.region-chip-remove:hover { opacity: 1; }

/* ═══ Price change badge ════════════════════════════════════════════ */
.price-change-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.price-change-badge.down {
  background: var(--green-dim);
  color: var(--green);
}
.price-change-badge.up {
  background: var(--red-dim);
  color: var(--red);
}

/* ═══ Property compare button (on card) ════════════════════════════ */
.btn-compare {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .85rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.btn-compare:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-compare.comparing {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ═══ Compare FAB ════════════════════════════════════════════════ */
.compare-fab {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  right: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .15s;
}
.compare-fab:hover { transform: translateY(-2px); }
.compare-fab.hidden { display: none; }

/* ═══ Compare modal ████████████████████████████████████████████████ */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.compare-table th,
.compare-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: center;
  vertical-align: top;
}
.compare-table th {
  background: var(--bg-input);
  font-weight: 700;
  font-size: .78rem;
  color: var(--text-muted);
}
.compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-input);
  color: var(--text-muted);
}
.compare-table .best-val {
  color: var(--green);
  font-weight: 700;
}

/* ═══ Amenity POI mini-map in detail modal ════════════════════════ */
#detail-amenity-map {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
}
#detail-amenity-map .leaflet-container {
  border-radius: 12px;
}

/* ═══ Extension 상태 바 (필터 본체 내부) ═════════════════════════ */
.search-ext-status-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

/* ═══ 필터 바 헤더 / 접기 ══════════════════════════════════════════ */
.filter-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
/* 필터 토글 — 작은 pill 버튼 */
.btn-filter-pill {
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.btn-filter-pill:active { opacity: .7; }
#filter-bar-body {
  overflow: visible;   /* 모바일에서 overflow 제거 → 내용 전부 표시 */
  transition: max-height .35s ease, opacity .3s ease;
  max-height: 2000px;
  opacity: 1;
}
#filter-bar-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden !important;   /* 접혀있을 때만 hidden */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ═══ 결과 헤더 정렬 영역 ════════════════════════════════════════════ */
.results-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.sort-select {
  padding: 4px 8px;
  font-size: .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  cursor: pointer;
}
.sort-select:focus { outline: none; border-color: var(--accent); }

/* ═══ 찜목록 정렬 바 ════════════════════════════════════════════════ */
.watchlist-sort-bar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
}

/* ═══ 다크모드 ══════════════════════════════════════════════════════ */
html.dark {
  --bg:         #12141f;
  --bg-card:    #1e2033;
  --bg-card2:   #252840;
  --bg-input:   #2a2d44;
  --accent:     #5b93f0;
  --accent-dim: #1e2e4a;
  --green:      #3dbb87;
  --green-dim:  #0d2e22;
  --red:        #e06060;
  --red-dim:    #2e1212;
  --orange:     #e89a50;
  --text:       #e4e6f0;
  --text-muted: #8892a8;
  --border:     #33374f;
}
html.dark body          { background: #0d0f1a; }
html.dark .toast-item   { background: #e4e6f0; color: #12141f; }
html.dark .modal-sheet  { background: var(--bg-card); }
html.dark .property-card { box-shadow: 0 1px 4px rgba(0,0,0,.4); }
html.dark #screen-login {
  background: radial-gradient(ellipse at 50% 30%, #1e2e4a 0%, var(--bg) 70%);
}

/* ═══ KB시세 섹션 ════════════════════════════════════════════════════ */
.detail-kb-section {
  background: var(--bg-input);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.kb-header {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kb-rows { display: flex; flex-direction: column; gap: 6px; }
.kb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
}
.kb-range .kb-val { font-size: .82rem; }
.kb-label { color: var(--text-muted); font-size: .83rem; }
.kb-val   { font-weight: 700; }
.kb-diff .kb-val  { font-weight: 800; }
.kb-above .kb-val { color: var(--red); }    /* 호가 > KB시세: 고평가 */
.kb-below .kb-val { color: var(--green); }  /* 호가 < KB시세: 저평가 */

/* ═══ 가격 실시간 미리보기 (인풋 내부 오버레이) ════════════════════════ */
.price-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
/* 미리보기 텍스트가 있을 때 인풋 오른쪽 여백 확보 */
.price-input-wrap .filter-input {
  width: 100%;
  padding-right: 54px;
  text-align: center;
}
.filter-range-price {
  align-items: center;
}
.price-preview {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .62rem;
  color: var(--accent);
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}
.form-field .price-preview {
  position: static;
  transform: none;
  max-width: 100%;
  font-size: .72rem;
  display: block;
  margin-top: 4px;
  opacity: 1;
}

/* ═══ 온보딩 모달 ═══════════════════════════════════════════════════════ */
.onboarding-box {
  position: relative;
  background: var(--bg-card);
  border-radius: 20px;
  padding: 32px 24px 20px;
  max-width: 420px;
  width: calc(100% - 40px);
  animation: slide-up .25s ease;
  max-height: 90dvh;
  overflow-y: auto;
}

.ob-step { display: none; }
.ob-step.active { display: block; }

.ob-icon {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 14px;
}

.ob-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.4;
}

.ob-desc {
  font-size: .88rem;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 16px;
}

.ob-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.ob-list li {
  font-size: .86rem;
  color: var(--text);
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.4;
}

.ob-steps-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ob-steps-list li {
  font-size: .86rem;
  color: var(--text);
  line-height: 1.5;
}

.ob-ext-status {
  text-align: center;
  font-size: .85rem;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-sub);
  margin-top: 4px;
}

.ob-open-naver {
  display: block;
  width: 100%;
  margin-top: 4px;
}

.ob-note {
  font-size: .8rem;
  color: var(--text-sub);
  text-align: center;
  margin-top: 4px;
}

.ob-nav {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ob-dots {
  display: flex;
  gap: 7px;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s, transform .2s;
}

.ob-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}

.ob-btns {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
}

.ob-btns .btn-primary,
.ob-btns .btn-ghost {
  flex: 1;
  text-align: center;
}

.ob-skip {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 8px;
}

.ob-skip:hover { color: var(--text); }

/* ═══ 다크 모드 ═════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0e1117;
    --bg-card:    #1a1d2e;
    --bg-card2:   #151826;
    --bg-input:   #222538;
    --accent:     #6c8fff;
    --accent-dim: #1e2d52;
    --green:      #3dcf8a;
    --green-dim:  #0e2d20;
    --red:        #f07070;
    --red-dim:    #2d1313;
    --orange:     #ffb547;
    --text:       #e4e6f4;
    --text-muted: #6b7080;
    --border:     #2a2d42;
  }

  html, body { background: #0a0c14; }

  /* 입력 필드 */
  input, select, textarea {
    background: var(--bg-input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  /* 네이버 링크 버튼 */
  .btn-naver-link { color: var(--accent); }

  /* 비교 테이블 */
  .compare-table th { background: var(--bg-input); }
  .compare-table tr:nth-child(even) td { background: rgba(255,255,255,.03); }

  /* 로그인 화면 */
  .login-wrap { background: var(--bg-card); }

  /* 토스트 */
  .toast-item { background: #2a2d42; color: var(--text); }

  /* 모달 시트 */
  .modal-sheet { background: var(--bg-card); }

  /* 온보딩 박스 */
  .onboarding-box { background: var(--bg-card); }

  /* 스파크라인 색상 */
  .sparkline-down { color: var(--green); }
  .sparkline-up   { color: var(--red);   }

  /* 필터 바 */
  .filter-bar { background: var(--bg-card); }

  /* 구매가능 배너 다크 보정 */
  .prop-afford-bar.can    { background: rgba(61,207,138,.18); }
  .prop-afford-bar.close  { background: rgba(255,181,71,.18);  }
  .prop-afford-bar.cannot { background: rgba(240,112,112,.18); }

  /* 히어로 카드 */
  .hero-card { background: var(--bg-card); }

  /* 정책 대출 */
  .policy-loan-row { background: var(--bg-card2); }
}

/* ═══ 네이버 링크 버튼 (카드 내) ════════════════════════════════════════ */
.btn-naver-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
  flex-shrink: 0;
}
.btn-naver-link:hover { background: var(--accent); color: #fff; }

/* ═══ 가격 히스토리 스파크라인 ══════════════════════════════════════════ */
.price-sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  opacity: .75;
}
.price-sparkline.sparkline-down { color: var(--green); }
.price-sparkline.sparkline-up   { color: var(--red);   }
.price-sparkline.sparkline-flat { color: var(--text-muted); }

/* ═══ 오프라인 알림 배너 ════════════════════════════════════════════════ */
.offline-banner {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--orange);
  color: #fff;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 16px;
  z-index: 99;
  display: none;
}
body.offline .offline-banner { display: block; }

/* ═══ 비교 테이블 색상 강조 ═════════════════════════════════════════════ */
.compare-table .best-cell  { color: var(--green); font-weight: 700; }
.compare-table .worst-cell { color: var(--red);   }
.compare-table th { background: var(--bg-input); font-weight: 600; font-size: .82rem; }
.compare-table td, .compare-table th { padding: 8px 10px; }

/* ═══ 알림 권한 배너 ════════════════════════════════════════════════════ */
.notif-request-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-dim);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 0;
  font-size: .84rem;
}
.notif-request-bar button {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: .82rem;
  white-space: nowrap;
}

/* ═══ KV 서버 저장 ══════════════════════════════════════════════════════ */
.kv-save-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.kv-secret-input {
  flex: 1;
  font-size: .82rem;
  padding: 7px 10px;
}
.btn-kv-save {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-kv-save:hover { opacity: .88; }
.btn-kv-save:disabled { opacity: .5; cursor: not-allowed; }
.kv-save-hint {
  font-size: .78rem;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 6px;
}
.kv-save-hint.ok  { background: var(--green-dim); color: var(--green); }
.kv-save-hint.err { background: var(--red-dim);   color: var(--red); }

/* ═══ 트렌드 배지 (매물 카드 인라인) ═══════════════════════════════════════ */
.trend-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
}
.trend-badge.trend-up   { background: #fde8e8; color: var(--red); }
.trend-badge.trend-down { background: var(--green-dim); color: var(--green); }
.trend-badge.trend-flat { background: var(--bg-input); color: var(--text-muted); font-weight: 500; }

/* ═══ 시세분석 탭 ════════════════════════════════════════════════════════ */
#view-trend { gap: 0; }

.trend-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  gap: 8px;
}
.trend-topbar-note { font-size: .78rem; color: var(--text-muted); }

.trend-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  font-size: .88rem;
}
.spinner-sm {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.trend-no-region {
  text-align: center;
  padding: 32px 24px 16px;
  color: var(--text-muted);
  line-height: 1.7;
}
.trend-no-region > p:first-child { font-size: 2.2rem; margin-bottom: 8px; }
.trend-no-region strong { color: var(--accent); }

/* ── 동 랭킹 리스트 ── */
.trend-dong-list { padding: 0 6px 6px; }

.trend-dong-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 8px;
  transition: background .15s;
}
.trend-dong-item:hover { background: var(--bg-input); }

.trend-dong-rank {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-input);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.trend-dong-item:nth-child(1) .trend-dong-rank { background: #ffd700; color: #7a5900; }
.trend-dong-item:nth-child(2) .trend-dong-rank { background: #c0c0c0; color: #555; }
.trend-dong-item:nth-child(3) .trend-dong-rank { background: #cd7f32; color: #fff; }

.trend-dong-name {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
}
.trend-avg-prc {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.trend-dong-change {
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
.trend-dong-change.trend-up   { color: var(--red); }
.trend-dong-change.trend-down { color: var(--green); }
.trend-dong-change.trend-flat { color: var(--text-muted); font-weight: 400; }

.trend-dong-cnt {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.trend-placeholder {
  padding: 16px 8px;
  color: var(--text-muted);
  font-size: .84rem;
  text-align: center;
}
.trend-data-footer {
  padding: 8px 16px 4px;
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── 개발 호재 카드 ── */
.trend-hotspot-list { display: flex; flex-direction: column; gap: 10px; padding: 4px; }

.trend-hotspot-item {
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 4px solid transparent;
}
.trend-hs-green  { background: var(--green-dim);  border-left-color: var(--green); }
.trend-hs-orange { background: #fff4e6;            border-left-color: var(--orange); }
.trend-hs-muted  { background: var(--bg-input);    border-left-color: var(--border); }

.trend-hs-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.trend-hs-badge {
  font-size: .72rem;
  background: rgba(0,0,0,.06);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.trend-hs-area   { font-size: .9rem; font-weight: 700; flex: 1; }
.trend-hs-outlook {
  font-size: .72rem;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 8px;
}
.trend-hs-out-green  { background: var(--green); color: #fff; }
.trend-hs-out-orange { background: var(--orange); color: #fff; }
.trend-hs-out-muted  { background: var(--text-muted); color: #fff; }

.trend-hs-reason {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── 섹션 공통 헤더 ── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 8px;
}
.section-title { font-weight: 700; font-size: .92rem; }
.section-note  { font-size: .76rem; color: var(--text-muted); }

/* ── 다크 모드 시세분석 ── */
.dark .trend-badge.trend-up   { background: rgba(217,79,79,.2); }
.dark .trend-badge.trend-down { background: rgba(26,158,106,.2); }
.dark .trend-hs-green  { background: rgba(26,158,106,.12); }
.dark .trend-hs-orange { background: rgba(224,124,42,.12); }
.dark .trend-hs-muted  { background: rgba(255,255,255,.05); }

/* ═══ 직방 소스 배너 (모바일/Extension 미연결 시) ══════════════════════════ */
.zigbang-source-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 0 0 8px;
  border-radius: var(--radius);
  background: #fff8e1;
  border: 1px solid #ffe082;
  font-size: .8rem;
  color: #795548;
  flex-wrap: wrap;
}
.dark .zigbang-source-banner {
  background: rgba(255,224,130,.08);
  border-color: rgba(255,224,130,.25);
  color: #e0c882;
}
.naver-mobile-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.naver-mobile-link:hover { text-decoration: underline; }

/* ═══ 부족액 제한 요인 힌트 ═══════════════════════════════════════════ */
.afford-factor {
  font-size: .72rem;
  opacity: .82;
  font-weight: 500;
}

/* ═══ 취득세·부대비용 섹션 ═════════════════════════════════════════════ */
.detail-acq-section {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff8f0;
  border-radius: 10px;
  border: 1px solid #fce0c0;
}
.dark .detail-acq-section { background: #2a1f10; border-color: #5a3a20; }
.detail-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ═══ 금리 시나리오 시뮬레이터 ═════════════════════════════════════════ */
.detail-rate-sim {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-input);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.rate-sim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.rate-sim-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 36px;
  text-align: right;
}
.rate-sim-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.rate-sim-result {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.rate-sim-result strong { color: var(--text); }

/* ═══ 셔틀버스 정류장 설정 ══════════════════════════════════════════════ */
.shuttle-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
  min-height: 28px;
}
.shuttle-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 600;
}
.shuttle-chip .chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: .9rem;
  padding: 0;
  line-height: 1;
}
.shuttle-empty { font-size: .78rem; color: var(--text-muted); }

/* ═══ 셔틀 정류장 지도 ═══════════════════════════════════════════════ */
#shuttle-stop-map .leaflet-popup-content { font-size: .8rem; min-width: 120px; }
#shuttle-map-wrap { margin-top: 4px; }

/* 셔틀 노선 범례 */
.shuttle-legend-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 4px 0 6px;
}
.shuttle-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  color: var(--text);
  font-weight: 600;
}
.shuttle-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══ 엑셀 가져오기 진행률 + 컬럼 선택 ═══════════════════════════════ */
.shuttle-import-progress {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-input);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.import-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.import-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s ease;
}
.import-progress-text {
  font-size: .73rem;
  color: var(--text-muted);
}
.shuttle-col-picker {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
}
.dark .shuttle-col-picker { background: #2a2000; border-color: #5a4800; }

/* ═══ 셔틀 거리 배지 (매물 카드 내) ═══════════════════════════════════ */
.shuttle-badges-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}
.shuttle-dist-badge {
  font-size: .73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 출근: 파란 계열 */
.shuttle-dir-commute {
  color: #1d4ed8;
  background: #dbeafe;
}
/* 시차제: 보라 계열 */
.shuttle-dir-flex {
  color: #6d28d9;
  background: #ede9fe;
}
/* 퇴근: 녹색 계열 */
.shuttle-dir-return {
  color: #065f46;
  background: #d1fae5;
}

/* ═══ Naver 끊김 감지 배너 ══════════════════════════════════════════════ */
.naver-disconnect-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 0 8px;
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 8px;
  font-size: .82rem;
  color: #e65100;
  flex-wrap: wrap;
  grid-column: 1 / -1; /* 2열 그리드 내에서 전 너비 차지 */
}
.dark .naver-disconnect-banner {
  background: rgba(255,180,50,.08);
  border-color: rgba(255,180,50,.30);
  color: #ffcc80;
}
.naver-disconnect-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.naver-disconnect-link:hover { text-decoration: underline; }
.naver-disconnect-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  color: inherit;
  opacity: .7;
  padding: 2px 4px;
  line-height: 1;
}
.naver-disconnect-close:hover { opacity: 1; }

/* ═══ 홈 - 최근 검색 ══════════════════════════════════════════════════ */
.recent-search-body {
  padding: 4px 0;
}
.recent-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: .85rem;
}
.recent-search-regions {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}
.recent-search-count {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ═══ 홈 - 찜 매물 요약 ═════════════════════════════════════════════ */
.watchlist-summary-body {
  padding: 4px 0;
}
.watchlist-summary-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.watchlist-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
  padding: 6px 0;
}
.watchlist-summary-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.watchlist-summary-label {
  font-size: .72rem;
  color: var(--text-muted);
}
.watchlist-summary-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* 클릭 가능한 홈 카드 hover 효과 */
#section-recent-search:hover,
#section-watchlist-summary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transition: transform .15s, box-shadow .15s;
}

/* ═══════════════════════════════════════════════════════════════════════
   🚲 따릉이 코스 플래너
   ═══════════════════════════════════════════════════════════════════════ */

.bike-planner-body {
  padding: 4px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bike-step-section {
  margin-bottom: 14px;
}

.bike-step-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.bike-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* 따릉이 정류장 리스트 */
.bike-station-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 175px;
  overflow-y: auto;
}

.bike-hint {
  font-size: .78rem;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  text-align: center;
  line-height: 1.5;
}

.bike-station-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--bg-input);
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color .15s, background .15s;
}

.bike-station-item:hover {
  border-color: #93c5fd;
}

.bike-station-item.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bike-station-icon { font-size: 1.15rem; flex-shrink: 0; }

.bike-station-info { flex: 1; min-width: 0; }

.bike-station-name {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.bike-station-dist {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.bike-station-check {
  font-size: .9rem;
  color: var(--accent);
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

/* 시간 선택 버튼 */
.bike-time-btns {
  display: flex;
  gap: 8px;
}

.bike-time-btn {
  flex: 1;
  padding: 9px 6px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  color: var(--text);
  line-height: 1.3;
}

.bike-time-btn small {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.bike-time-btn:hover { border-color: #93c5fd; }

.bike-time-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.bike-time-btn.active small { color: var(--accent); opacity: .75; }

/* 도착지 정보 */
.bike-dest-info {
  font-size: .8rem;
  padding: 9px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  color: var(--text-muted);
  min-height: 36px;
}

/* 지도 영역 */
.bike-planner-map {
  height: 270px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* 코스 추천 버튼 */
.bike-plan-btn {
  width: 100%;
  padding: 12px;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* 결과 카드 */
.bike-route-stats { /* hidden → visible via JS */ }

.bike-stat-row {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
}

.bike-stat {
  flex: 1;
  text-align: center;
  padding: 11px 6px 10px;
  background: var(--bg-input);
  border-radius: 12px;
}

.bike-stat-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 3px;
  line-height: 1;
}

.bike-stat-key {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 500;
}

.bike-route-note {
  font-size: .78rem;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-input);
  margin-bottom: 8px;
  line-height: 1.45;
}

/* 범례 */
.bike-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.bike-legend-line {
  display: inline-block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.bike-legend-dash {
  background: repeating-linear-gradient(
    to right,
    #f97316 0px,
    #f97316 7px,
    transparent 7px,
    transparent 11px
  ) !important;
}