* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --dark: #1a1a2e;
  --yellow: #f5c842;
  --yellow-dim: rgba(245,200,66,0.15);
  --yellow-bg: rgba(245,200,66,0.04);
  --bg: #f8f8fa;
  --surface: #ffffff;
  --card: #f3f4f6;
  --border: #e5e7eb;
  --text: #1a1a2e;
  --sub: #6b7280;
  --muted: #6b7280;
  --red: #e24b4a;
  --green: #639922;
  --radius: 10px;
}
html,body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; letter-spacing:-0.02em; line-height:1.6; }
.wrap { max-width:430px; margin:0 auto; background:var(--surface); min-height:100vh; }

/* 헤더 */
.header { background:var(--dark); padding:16px; }
.header-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.logo { width:36px; height:36px; background:var(--yellow); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:var(--dark); flex-shrink:0; }
.header-name { font-size:17px; font-weight:500; color:#fff; }
.header-sub { font-size:12px; color:rgba(255,255,255,0.6); margin-top:2px; }
.tags { display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.tag-line { display:flex; align-items:center; gap:0; font-size:12px; line-height:1.4; flex-wrap:wrap; }
.tag-icon { flex-shrink:0; width:18px; text-align:center; font-size:11px; }
.tag-school-line { color:rgba(163,212,104,0.9); }
.tag-sep { color:rgba(255,255,255,0.2); margin:0 4px; }
.station-tag { display:inline-flex; align-items:center; gap:3px; }
.line-badge { display:inline-block; padding:1px 5px; border-radius:8px; font-size:9px; font-weight:600; color:#fff; margin-right:2px; }
.station-name { color:rgba(255,255,255,0.85); }
.station-time { color:rgba(255,255,255,0.5); font-size:11px; }

/* 탭 */
.tabs { display:flex; border-bottom:1px solid var(--border); }
.tab.active { color:var(--text); font-weight:500; border-bottom-color:var(--yellow); }

/* 평형 */
.pyeong-row { padding:12px 16px; display:flex; gap:8px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; position:relative; }
.pyeong-row::-webkit-scrollbar { display:none; }
.pyeong-wrap { position:relative; }
.pyeong-wrap::after { content:''; position:absolute; right:0; top:0; bottom:0; width:32px; background:linear-gradient(to right, transparent, var(--surface)); pointer-events:none; z-index:1; }
.pyeong-btn.active { background:var(--yellow); border-color:var(--yellow); color:var(--dark); font-weight:500; }

/* 지표 — 핵심 시세 (리치고 참고) */
.price-cards { padding:12px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.price-card { border-radius:12px; padding:16px; transition:all .15s; cursor:default; }
.price-card.primary { background:#f0f7ff; border:1.5px solid #4a90d9; }
.price-card.secondary { background:var(--card); border:1.5px solid var(--border); }
.price-card-label { font-size:11px; color:var(--sub); margin-bottom:6px; font-weight:500; }
.price-card-value { font-size:22px; font-weight:700; color:var(--dark); line-height:1.2; }
.price-card-sub { font-size:11px; color:var(--muted); margin-top:4px; }
.price-card-change { font-size:11px; margin-top:4px; font-weight:500; }
.price-card-change.down { color:var(--red); }
.price-card-change.up { color:var(--green); }
.price-card-change.neutral { color:var(--sub); }

/* 지표 — 보조 (전세가율, ㎡당 등) */
.metrics { padding:0 16px 12px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.metric { background:var(--card); border-radius:var(--radius); padding:12px; transition:all .15s; cursor:default; }
.metric:hover { box-shadow:0 2px 8px rgba(0,0,0,0.08); transform:translateY(-1px); }
.metric:active { background:#e9eaed; }
.metric-label { font-size:10px; color:var(--sub); margin-bottom:4px; }
.metric-value { font-size:15px; font-weight:500; }
.metric-change { font-size:10px; margin-top:2px; }
.metric-change.down { color:var(--red); }
.metric-change.up { color:var(--green); }
.metric-change.neutral { color:var(--sub); }

/* 그래프 */
.chart-section { padding:0 16px 12px; }
.chart-title { font-size:12px; color:var(--sub); margin-bottom:8px; }
.chart-wrap { position:relative; height:180px; }

/* 실거래 목록 */
.section-title { font-size:14px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.section-title::before { content:''; display:inline-block; width:3px; height:14px; background:var(--yellow); border-radius:2px; }
.section { padding:16px; }
.trade-list { display:flex; flex-direction:column; gap:8px; }
.trade-item { display:flex; justify-content:space-between; padding:12px 14px; background:var(--surface); border-radius:var(--radius); border-left:3px solid var(--yellow); box-shadow:0 1px 4px rgba(0,0,0,0.06); transition:all .15s; }
.trade-item:hover { box-shadow:0 3px 10px rgba(0,0,0,0.1); transform:translateY(-1px); }
.trade-item:active { background:#f0f0f2; transform:scale(0.98); }
.trade-price { font-size:16px; font-weight:700; color:var(--dark); }
.trade-detail { font-size:11px; color:var(--sub); margin-top:3px; }
.trade-date { font-size:11px; color:var(--muted); align-self:center; white-space:nowrap; }

/* 구분선 */
.divider { height:8px; background:var(--card); }

/* 휙 매물 */
.listing-badge { font-size:11px; padding:3px 10px; background:var(--yellow-dim); border-radius:20px; color:#ba7517; font-weight:500; }
.listing-item { display:flex; justify-content:space-between; padding:14px; border:1.5px solid var(--yellow); border-radius:var(--radius); background:var(--yellow-bg); cursor:pointer; box-shadow:0 1px 4px rgba(245,200,66,0.15); transition:all .15s; }
.listing-item:hover { box-shadow:0 3px 10px rgba(245,200,66,0.25); transform:translateY(-1px); }
.listing-item:active { transform:scale(0.98); background:rgba(245,200,66,0.12); }
.listing-link { font-size:11px; color:#ba7517; align-self:center; font-weight:500; }
.listing-empty { text-align:center; padding:20px 16px; border:1.5px dashed var(--yellow); border-radius:var(--radius); background:var(--yellow-bg); }
.listing-empty-text { font-size:13px; color:var(--sub); margin-bottom:8px; }
.listing-empty-cta { font-size:12px; font-weight:600; color:#ba7517; cursor:pointer; }

/* 주변 단지 */
.nearby-item { display:flex; justify-content:space-between; align-items:center; padding:14px; background:var(--surface); border-radius:var(--radius); cursor:pointer; transition:all .15s; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.nearby-item:active { transform:scale(0.98); background:#f0f0f2; }
.nearby-item:hover { box-shadow:0 3px 10px rgba(0,0,0,0.1); transform:translateY(-1px); }
.nearby-name { font-size:13px; font-weight:600; }
.nearby-sub { font-size:11px; color:var(--sub); margin-top:2px; }
.nearby-price { font-size:14px; font-weight:700; text-align:right; }
.nearby-diff { font-size:11px; text-align:right; margin-top:2px; padding:1px 6px; border-radius:4px; display:inline-block; }
.nearby-diff.cheaper { background:rgba(99,153,34,0.1); color:var(--green); }
.nearby-diff.pricier { background:rgba(226,75,74,0.1); color:var(--red); }

/* CTA */
.cta-section { padding:16px; border-top:1px solid var(--border); }
.btn-primary { width:100%; padding:14px; background:var(--yellow); border:none; border-radius:var(--radius); font-size:14px; font-weight:500; color:var(--dark); cursor:pointer; margin-bottom:8px; font-family:inherit; transition:transform .1s; }
.btn-primary:active { transform:scale(0.97); }
.btn-secondary { width:100%; padding:12px; background:transparent; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; color:var(--sub); cursor:pointer; font-family:inherit; transition:transform .1s; }
.btn-secondary:active { transform:scale(0.97); }
.tab { flex:1; padding:12px; text-align:center; font-size:13px; color:var(--sub); cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; -webkit-tap-highlight-color:transparent; }
.pyeong-btn { padding:6px 14px; border-radius:20px; font-size:12px; cursor:pointer; white-space:nowrap; border:1px solid var(--border); background:var(--card); color:var(--sub); transition:all .15s; -webkit-tap-highlight-color:transparent; }
.pyeong-btn:active:not(.active) { background:#e0e1e4; }

/* SEO */
.seo-section { padding:16px; border-top:1px solid var(--border); background:var(--card); }
.seo-text { font-size:11px; color:var(--muted); line-height:1.7; }
.seo-more { color:var(--sub); cursor:pointer; }
.seo-source { margin-top:8px; font-size:10px; color:var(--muted); }

/* breadcrumb */
.breadcrumb { padding:10px 16px; font-size:11px; color:var(--muted); }
.breadcrumb a { color:var(--sub); text-decoration:none; }
.breadcrumb span { margin:0 4px; }

/* FAQ */
.faq-section { padding:16px; }
.faq-item { border-bottom:1px solid var(--border); padding:12px 0; }
.faq-item:last-child { border-bottom:none; }
.faq-q { font-size:13px; font-weight:500; margin-bottom:4px; }
.faq-a { font-size:12px; color:var(--sub); line-height:1.6; }

/* 로딩 */
.loading { display:none; flex-direction:column; align-items:center; justify-content:center; height:80vh; gap:12px; }
.loading-spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--yellow); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:13px; color:var(--sub); }

/* 에러 */
.error { text-align:center; padding:60px 20px; }
.error-icon { font-size:48px; margin-bottom:12px; }
.error-msg { font-size:14px; color:var(--sub); }