/* =================================
   APT Mine — Design System v3
   ================================= */

:root {
  --bg: #f1f5f9;
  --ink: #0f172a;
  --ink-light: #334155;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #60a5fa;
  --accent-soft: rgba(37,99,235,0.06);
  --accent-glow: rgba(37,99,235,0.10);
  --paper: #ffffff;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --line: #e2e8f0;
  --up: #ef4444;
  --down: #3b82f6;
  --gold: #f59e0b;
  --silver: #94a3b8;
  --bronze: #d97706;
  --font-body: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04),0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.03),0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 6px rgba(0,0,0,0.03),0 10px 24px rgba(0,0,0,0.07);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}

/* ── Header ── */
.site-header{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);position:relative;overflow:hidden}
.site-header::before{content:'';position:absolute;top:-60%;left:20%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(37,99,235,0.07) 0%,transparent 70%);pointer-events:none}
.header-inner{max-width:1200px;margin:0 auto;padding:24px 24px 0;display:flex;align-items:baseline;gap:12px;position:relative}
.logo{font-size:24px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-0.5px}
.logo-h1{margin:0;font-size:inherit;font-weight:inherit;display:inline}
.page-title{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 12px;padding:0 24px;max-width:1200px;margin-left:auto;margin-right:auto}
.page-desc{font-size:13px;color:var(--muted);text-align:center;margin:0 24px 16px;line-height:1.6;max-width:1200px;margin-left:auto;margin-right:auto}
.tagline{font-size:13px;color:rgba(255,255,255,0.4);font-weight:500}

/* ── Navigation ── */
.nav-bar{max-width:1200px;margin:0 auto;padding:12px 24px 10px;display:flex;gap:4px;position:relative}
.nav-link{padding:8px 18px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,0.45);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s ease;letter-spacing:-0.2px}
.nav-link:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.08);transform:translateY(-1px)}
.nav-link.active{color:#fff;background:rgba(255,255,255,0.12)}

/* ── Sub Navigation (2nd level) ── */
.nav-sub{max-width:1200px;margin:0 auto;padding:0 24px 0;display:flex;gap:2px;border-top:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.08)}
.nav-sub-link{padding:9px 16px 8px;border-bottom:2px solid transparent;background:transparent;color:rgba(255,255,255,0.4);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s ease;position:relative}
.nav-sub-link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent-light);border-radius:1px;transition:width .2s ease}
.nav-sub-link:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.04)}
.nav-sub-link:hover::after{width:60%}
.nav-sub-link.active{color:#fff;border-bottom-color:transparent}
.nav-sub-link.active::after{width:100%;background:var(--accent-light)}

/* ── Footer Separator ── */
.footer-sep{color:var(--line);font-size:11px;user-select:none}

/* ── Period Toggle ── */
.period-btn{flex:1;padding:10px 16px;border:1px solid var(--border);background:var(--paper);color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease}
.period-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.period-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}
.period-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.period-btn:not(.active):hover{background:var(--accent-soft);color:var(--accent)}
.district-tabs{border-top:none}
.district-tabs .tab-btn .badge-count{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.district-tabs .tab-btn.active .badge-count{background:rgba(255,255,255,0.25);color:var(--accent)}
/* ── Tabs ── */
.tabs{display:flex;gap:0;padding:0 24px;max-width:1200px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line);background:var(--paper)}
.tabs::-webkit-scrollbar{display:none}
.region-label{flex-shrink:0;padding:12px 16px 12px 0;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.tab-btn{flex-shrink:0;padding:12px 16px;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap;position:relative}
.tab-btn::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--accent);border-radius:1px;transition:width .2s ease}
.tab-btn:hover{color:var(--accent)}
.tab-btn:hover::after{width:60%}
.tab-btn.active{color:var(--accent);font-weight:700;border-bottom-color:transparent}
.tab-btn.active::after{width:100%}

/* ── Dropdowns ── */
.district-select-wrap{max-width:1200px;margin:0 auto;padding:16px 24px 0}
.district-select,.dong-select,.danji-select{padding:9px 36px 9px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.district-select:focus,.dong-select:focus,.danji-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ── Filter / Search ── */
.filter-wrap{max-width:1200px;margin:0 auto;padding:8px 24px 12px;display:flex;gap:8px;flex-wrap:wrap}
.search-wrap{max-width:1200px;margin:0 auto;padding:0 24px 20px;display:flex;gap:8px;align-items:center}
.search-input{padding:11px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;flex:1;min-width:0;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-input::placeholder{color:var(--muted)}
.search-btn{flex-shrink:0;padding:11px 24px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px rgba(37,99,235,0.3)}
.search-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.25)}

/* ── Loading ── */
.status{text-align:center;font-size:14px;color:var(--muted);margin:40px 0;display:flex;align-items:center;justify-content:center;gap:10px}
.spinner{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.meta{text-align:center;font-size:12px;color:var(--muted);margin-bottom:16px}

/* ── Layout ── */
main{max-width:1200px;margin:0 auto;padding:20px 24px}
.wrap{max-width:1200px;margin:0 auto;padding:20px 24px 40px}

/* ── Section Cards ── */
.section{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:16px;box-shadow:var(--shadow-md);transition:box-shadow .2s ease,transform .2s ease;overflow:hidden;position:relative}
.section:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.section::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:0;transition:opacity .2s ease}
.section:hover::before{opacity:1}
.section-title{font-size:18px;font-weight:800;margin:0 0 4px;color:var(--ink);letter-spacing:-0.3px}
.section-sub{font-size:12px;color:var(--muted);margin:0 0 20px;font-weight:500}

/* ── Rank Cards ── */
.rank-card{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);transition:all .15s ease}
.rank-card:last-child{border-bottom:none}
.rank-card:hover{background:var(--accent-soft);margin:0 -12px;padding:16px 12px;border-radius:var(--radius-sm)}
.rank-num{font-size:20px;font-weight:800;line-height:1.2;color:var(--muted)}
.rank-num.n1{color:var(--gold)}
.rank-num.n2{color:var(--silver)}
.rank-num.n3{color:var(--bronze)}
.rank-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rank-info{min-width:0}
.rank-apt{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
a.rank-apt:hover{text-decoration:underline}
.rank-detail{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.6}
.rank-change{text-align:right;white-space:nowrap;flex-shrink:0}
.rank-pct{font-size:17px;font-weight:800}
.rank-pct .pct-value{font-weight:800}
.rank-diff{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.rank-diff .pct-value{font-weight:700}

/* ── Charts ── */
.scatter-chart{margin-top:12px;width:100%;height:150px;overflow:hidden}
.scatter-chart canvas{width:100%;height:100%;display:block}

/* ── Tags ── */
.tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}
.tag-warn{background:#fef3c7;color:#d97706}
.tag-muted{background:#f1f5f9;color:var(--muted)}
.tag-change-up{background:#fef2f2;color:var(--up)}
.tag-change-down{background:#eff6ff;color:var(--down)}

/* ── Buttons ── */
.detail-btn{background:var(--paper);border:1px solid var(--line);color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:600;border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.detail-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.no-data{font-size:13px;color:var(--muted);padding:12px 0}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-content{background:var(--paper);border-radius:var(--radius-lg);padding:28px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,0.2);animation:modalIn .25s ease-out}
.modal-close{position:absolute;top:16px;right:16px;background:var(--bg);border:none;font-size:14px;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{background:var(--line);color:var(--ink)}
.modal-title{font-size:18px;font-weight:800;margin:0 0 4px}
.modal-sub{font-size:13px;color:var(--muted);margin:0 0 20px}
.modal-chart{height:220px;margin-bottom:20px}
.modal-table{width:100%;border-collapse:collapse;font-size:13px}
.modal-table th{text-align:left;color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;background:var(--bg);position:sticky;top:0;z-index:1}
.modal-table td{padding:8px 10px;border-bottom:1px solid var(--line)}
.modal-table td:last-child{text-align:right;font-weight:600}
.modal-table tbody tr:nth-child(even){background:rgba(0,0,0,0.02)}
.modal-table tbody tr:hover{background:var(--accent-soft)}

/* ── Focus ── */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Footer ── */
.site-footer{text-align:center;padding:32px 24px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);margin-top:20px}
.site-footer a{color:var(--muted);text-decoration:none;position:relative}
.site-footer a::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--accent);transition:width .2s ease}
.site-footer a:hover{color:var(--accent)}
.site-footer a:hover::after{width:100%}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.footer-links a{font-weight:600}
.footer-info{margin-top:4px}

/* ── Search Results ── */
.result-count{font-size:13px;color:var(--muted);margin-bottom:12px;font-weight:500}
.apt-group{padding:16px 0;border-bottom:1px solid var(--line)}
.apt-group:last-child{border-bottom:none}
.apt-group-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.apt-group-name{font-size:16px;font-weight:700}
.apt-group-loc{font-size:12px;color:var(--muted)}
.apt-sub-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 8px 8px;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s}
.apt-sub-item:hover{background:var(--accent-soft)}
.apt-sub-info{font-size:13px;color:var(--ink);min-width:0}
.apt-sub-area{font-weight:700}
.apt-sub-detail{font-size:11px;color:var(--muted);margin-top:2px}
.apt-sub-change{text-align:right;white-space:nowrap;flex-shrink:0}
.apt-sub-pct{font-size:15px;font-weight:800}
.apt-sub-diff{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Regional: Dong Stats ── */
.dong-stats-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}
.dong-stat-row{display:grid;grid-template-columns:70px 1fr 100px;align-items:center;gap:8px;font-size:12px;min-width:0}
.dong-stat-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;min-width:0}
.dong-stat-bar-wrap{height:20px;background:var(--bg);border-radius:6px;overflow:hidden;min-width:0}
.dong-stat-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:6px;min-width:2px;transition:width .4s ease}
.dong-stat-val{text-align:right;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dong-stat-row-wide{grid-template-columns:50px 70px 1fr 100px}
.dong-stat-district{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── Regional: Jeonse ── */
.jeonse-ratio-big{font-size:36px;font-weight:800;color:var(--accent);text-align:center;margin:12px 0 4px}
.jeonse-sample{display:flex;flex-direction:column;gap:6px}
.jeonse-sample-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--bg);border-radius:8px;min-width:0}
.jeonse-sample-name{font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.jeonse-sample-area{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.jeonse-sample-ratio{font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap;flex-shrink:0;min-width:48px;text-align:right}
.jeonse-sample-price{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0;text-align:right}

/* ── Regional: Recovery Map ── */
.recovery-row{display:grid;grid-template-columns:70px 1fr 120px;align-items:center;gap:8px;font-size:12px;padding:4px 0;min-width:0}
.recovery-bar-wrap{height:22px;background:var(--bg);border-radius:6px;overflow:hidden;position:relative}
.recovery-bar{height:100%;border-radius:6px;min-width:2px;transition:width .4s ease}
.recovery-bar.recovered{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.recovery-bar.rising{background:linear-gradient(90deg,#16a34a,#4ade80)}
.recovery-bar.flat{background:#94a3b8}
.recovery-bar.falling{background:linear-gradient(90deg,#dc2626,#f87171)}
.recovery-peak-line{position:absolute;right:0;top:0;bottom:0;width:0;border-right:2px dashed var(--accent);opacity:.2}
.recovery-val{text-align:right;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.newhigh-badge{flex-shrink:0;display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:#fef2f2;color:var(--up);border:1px solid rgba(239,68,68,0.2)}
.recovery-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;margin-left:4px}
.recovery-badge.recovered{background:#dbeafe;color:#1e40af}
.recovery-badge.rising{background:#dcfce7;color:#166534}
.recovery-badge.flat{background:#f1f5f9;color:#64748b}
.recovery-badge.falling{background:#fef2f2;color:#dc2626}

/* ── Undervalued: Compare ── */
.compare-panel{grid-column:2/-1;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px}
.compare-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.compare-title{font-size:12px;color:var(--muted);margin:0;font-weight:600}
.compare-close{border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:11px;border-radius:var(--radius-sm);padding:3px 10px;cursor:pointer;font-family:var(--font-body)}
.compare-chart{width:100%;height:220px;display:block}
.compare-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 10px;margin-top:8px;font-size:12px;color:var(--muted)}
.legend-item{display:flex;gap:6px;align-items:center}
.legend-color{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── Responsive ── */
@media(max-width:720px){
  .header-inner{padding:20px 16px 0}
  .logo{font-size:20px}
  .tagline{font-size:12px}
  .nav-bar{padding:8px 16px 8px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-bar::-webkit-scrollbar{display:none}
  .nav-link{padding:7px 14px;font-size:13px}
  .nav-sub{padding:0 16px;gap:1px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-sub::-webkit-scrollbar{display:none}
  .nav-sub-link{padding:8px 12px 7px;font-size:11px}
  .mode-tabs{padding:12px 16px 0;max-width:100%}
  .tabs{padding:0 16px}
  .tab-btn{padding:10px 12px;font-size:12px}
  .region-label{font-size:10px}
  .district-select-wrap{padding:12px 16px 0}
  .filter-wrap{padding:8px 16px 12px}
  .search-wrap{padding:0 16px 16px}
  .search-input{padding:10px 14px;font-size:13px}
  .search-btn{padding:10px 18px;font-size:13px}
  main{padding:16px}
  .wrap{padding:16px 16px 32px}
  .section{padding:18px 16px;border-radius:12px}
  .section-title{font-size:16px}
  .rank-card{grid-template-columns:24px 1fr}
  .rank-num{font-size:18px}
  .rank-apt{font-size:13px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;overflow-wrap:anywhere}
  .rank-pct{font-size:15px}
  .modal-content{padding:20px 16px;border-radius:var(--radius)}
  .dong-stat-row{grid-template-columns:60px 1fr 90px}
  .dong-stat-row-wide{grid-template-columns:40px 55px 1fr 80px}
  .dong-stat-district{font-size:9px}
  .recovery-row{grid-template-columns:55px 1fr 105px}
  .recovery-val{font-size:10px}
  .view-toggle-wrap{padding:0 16px 10px}
  .map-container{height:400px;border-radius:12px}
  .heatmap-info-stats{grid-template-columns:repeat(2,1fr)}
  .heatmap-info-val{font-size:14px}
  .vol-bar-row{gap:8px}
  .sort-btns{flex-wrap:wrap}
  .val-gap{font-size:18px}
  .val-name{font-size:14px}
  .val-badge{font-size:11px;padding:3px 10px}
  .val-compare-table{font-size:11px}
  .val-compare-table th,.val-compare-table td{padding:5px 6px}
}

/* ── Heatmap Grid (replaces Kakao Maps) ── */
.heatmap-legend{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:16px;font-size:11px;color:var(--muted)}
.heatmap-legend-label{font-weight:600}
.heatmap-gradient{display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(90deg,#2563eb,#0891b2,#d97706,#dc2626)}
.heatmap-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.heatmap-cell{padding:14px 12px;border-radius:12px;color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;line-height:1.3;text-align:center;min-width:90px;position:relative}
.heatmap-cell:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.25);z-index:2}
.heatmap-cell-active{outline:3px solid var(--accent);outline-offset:2px;transform:translateY(-3px)}
.heatmap-cell-name{font-size:11px;font-weight:600;opacity:.9;margin-bottom:2px}
.heatmap-cell-price{font-size:18px;font-weight:800;letter-spacing:-0.5px}
.heatmap-cell-vol{font-size:10px;opacity:.7;margin-top:1px}
.heatmap-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:4px}
.heatmap-badge.recovered{background:rgba(255,255,255,0.25);color:#fff}
.heatmap-badge.rising{background:rgba(255,255,255,0.25);color:#fff}
.heatmap-badge.flat{background:rgba(255,255,255,0.2);color:rgba(255,255,255,0.8)}
.heatmap-badge.falling{background:rgba(255,255,255,0.25);color:#fff}
.heatmap-info{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-top:12px}
.heatmap-info-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.heatmap-info-name{font-size:16px;font-weight:800}
.heatmap-info-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.heatmap-info-stat{display:flex;flex-direction:column;gap:2px}
.heatmap-info-label{font-size:11px;color:var(--muted);font-weight:600}
.heatmap-info-val{font-size:16px;font-weight:800}

/* ── Volume Bar Chart ── */
.vol-bar-list{display:flex;flex-direction:column;gap:8px}
.vol-bar-row{display:flex;align-items:center;gap:12px}
.vol-bar-wrap{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:6px}
.vol-bar-track{flex:1;min-width:0;height:100%;background:var(--line);border-radius:6px;overflow:hidden}
.vol-bar{height:100%;border-radius:6px;min-width:4px;transition:width .3s}
.vol-bar-count{font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;flex-shrink:0}
.vol-bar-label{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:90px;max-width:140px;overflow:hidden}
.vol-bar-name{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.vol-bar-price{font-size:11px;color:var(--muted);white-space:nowrap;line-height:1.2}

/* ── Sort Buttons ── */
.sort-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sort-btns{display:flex;gap:4px}
.sort-btn{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.sort-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Compare Chart ── */
.compare-checks{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px}
.compare-check-label{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--ink-light);cursor:pointer;padding:4px 0;white-space:nowrap}
.compare-check{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.compare-hint{font-size:12px;color:var(--muted);text-align:center;padding:20px 0;margin:0}
.compare-chart-area{margin-top:8px}

/* ── Dashboard ── */
.dashboard{max-width:1200px;margin:0 auto;padding:0 24px}
.market-summary{font-size:15px;font-weight:600;color:var(--ink);line-height:1.7;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow-sm)}
.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.dash-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.dash-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:0;transition:opacity .2s ease}
.dash-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dash-card:hover::before{opacity:1}
.dash-card-wide{grid-column:span 2}
.dash-card-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:0.3px;line-height:1.5}
.dash-card-value{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.5px}
.dash-card-unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px}
.dash-card-change{font-size:12px;font-weight:700;margin-top:4px}
.dash-card-change.up{color:var(--up)}
.dash-card-change.down{color:var(--down)}
.recovery-dist-bar{display:flex;height:24px;border-radius:6px;margin:8px 0}
.rec-bar-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;min-width:24px;padding:0 4px;box-sizing:border-box;transition:width .3s;white-space:nowrap}
.rec-bar-seg:first-child{border-radius:6px 0 0 6px}
.rec-bar-seg:last-child{border-radius:0 6px 6px 0}
.rec-bar-seg:only-child{border-radius:6px}
.rec-bar-seg.recovered{background:#2563eb}
.rec-bar-seg.rising{background:#16a34a}
.rec-bar-seg.flat{background:#94a3b8}
.rec-bar-seg.falling{background:#ef4444}
.recovery-dist-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.rec-dot.recovered{background:#2563eb}
.rec-dot.rising{background:#16a34a}
.rec-dot.flat{background:#94a3b8}
.rec-dot.falling{background:#ef4444}
.popular-districts{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.popular-title{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 12px}
.popular-list{display:flex;flex-wrap:wrap;gap:8px}
.popular-item{display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;transition:all .15s;flex:1;min-width:140px}
.popular-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.popular-name{font-size:14px;font-weight:700;color:var(--ink)}
.popular-meta{font-size:11px;color:var(--muted)}

/* ── Autocomplete ── */
.search-wrap{position:relative}
.autocomplete-dropdown{position:absolute;top:100%;left:24px;right:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:100;max-height:320px;overflow-y:auto;margin-top:2px}
.ac-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);transition:background .1s;gap:8px}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--accent-soft)}
.ac-name{font-weight:600;font-size:13px;color:var(--ink)}
.ac-loc{font-size:11px;color:var(--muted);white-space:nowrap}

/* ── Apt Detail List ── */
.apt-detail-list{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.apt-detail-header{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.apt-detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);gap:8px;min-width:0}
.apt-detail-row:last-child{border-bottom:none}
.apt-detail-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.apt-detail-val{flex-shrink:0;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:4px}

/* ── Mobile: 480px ── */
@media(max-width:480px){
  .header-inner{padding:16px 12px 0}
  .logo{font-size:18px}
  .tagline{display:none}
  .nav-bar{padding:6px 12px 6px;gap:1px}
  .nav-link{padding:6px 12px;font-size:12px}
  .nav-sub{padding:0 12px;gap:0}
  .nav-sub-link{padding:7px 10px 6px;font-size:10px}
  .mode-tabs{padding:10px 12px 0;max-width:100%}
  .mode-tab{font-size:14px;padding:10px 0}
  .tabs{padding:0 12px}
  .tab-btn{padding:8px 10px;font-size:11px;min-height:44px}
  .region-label{font-size:9px;padding:8px 8px 8px 0}
  .district-select-wrap{padding:10px 12px 0}
  .district-select,.dong-select,.danji-select{min-height:44px;font-size:14px}
  main{padding:12px}
  .wrap{padding:12px 12px 24px}
  .section{padding:14px 12px;border-radius:10px;margin-bottom:12px}
  .section-title{font-size:15px}
  .section-sub{font-size:11px}
  .search-wrap{padding:0 12px 12px}
  .search-input{padding:12px 14px;font-size:14px;min-height:44px}
  .search-btn{padding:12px 16px;font-size:14px;min-height:44px}
  .vol-bar-row{gap:6px}
  .vol-bar-wrap{height:20px}
  .vol-bar-track{height:100%}
  .vol-bar-label{min-width:50px;max-width:80px}
  .vol-bar-name{font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .vol-bar-price{font-size:9px;overflow:hidden;text-overflow:ellipsis}
  .vol-bar-count{font-size:9px}
  .dash-card-label{font-size:11px}
  .footer-links{gap:10px}
  .footer-links a{font-size:11px}
  .heatmap-grid{gap:6px}
  .heatmap-cell{padding:10px 8px;min-width:75px;border-radius:10px}
  .heatmap-cell-price{font-size:15px}
  .heatmap-cell-name{font-size:10px}
  .heatmap-info-stats{grid-template-columns:repeat(2,1fr)}
  .dashboard-cards{grid-template-columns:1fr}
  .dash-card-wide{grid-column:span 1}
  .dash-card-value{font-size:22px}
  .market-summary{font-size:13px;padding:12px 14px}
  .popular-list{flex-direction:column}
  .popular-item{min-width:0}
  .sort-bar{flex-direction:column;align-items:flex-start}
  .compare-checks{gap:4px 8px}
  .compare-check-label{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
  .dong-stat-row{grid-template-columns:50px 1fr 80px;font-size:11px}
  .dong-stat-row-wide{grid-template-columns:30px 40px 1fr 70px}
  .dong-stat-val{font-size:10px}
  .recovery-row{grid-template-columns:42px 1fr 90px;font-size:11px}
  .recovery-val{font-size:9px}
  .recovery-badge{font-size:9px;padding:1px 5px}
  .jeonse-sample-row{flex-wrap:wrap;gap:4px;padding:8px}
  .jeonse-sample-name{flex-basis:100%;font-size:12px}
  .jeonse-sample-area{font-size:10px}
  .jeonse-sample-price{font-size:10px}
  .jeonse-sample-ratio{font-size:13px;min-width:40px}
  .heatmap-info-val{font-size:13px}
  .sort-btns{flex-wrap:wrap}
  .sort-btn{font-size:10px;padding:4px 10px}
  .view-toggle-wrap{padding:0 12px 8px}
  .map-container{height:350px;border-radius:10px}
  .autocomplete-dropdown{left:12px;right:12px}
  .rank-card{grid-template-columns:22px 1fr;gap:8px}
  .rank-top{flex-direction:column;gap:4px}
  .rank-apt{font-size:13px}
  .rank-pct{font-size:14px}
  .rank-detail{font-size:11px}
  .rank-diff{font-size:10px}
  .rank-change{text-align:left}
  .section-sub{word-break:keep-all;overflow-wrap:anywhere}
  .site-footer{padding:20px 12px;font-size:11px}
  .compare-float-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .compare-float-bar .go-btn{width:100%;margin-top:4px;margin-left:0}
  .explain-block{font-size:11px;padding:8px 10px;word-break:keep-all;overflow-wrap:anywhere}
  .heatmap-cell{min-width:65px;padding:8px 6px}
  .heatmap-cell-price{font-size:14px}
  .apt-detail-name{font-size:12px}
  .apt-detail-val{font-size:11px}
  .compare-legend{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));font-size:11px}
  .val-card{padding:14px 12px;border-radius:10px}
  .val-gap{font-size:16px}
  .val-name{font-size:13px}
  .val-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .val-compare-table{min-width:340px}
}

/* ── Hero Search ── */
.hero-search{position:relative;background:linear-gradient(160deg,#0f172a 0%,#1a2744 40%,#0f172a 100%);padding:48px 24px 36px;text-align:center;overflow:visible}
.hero-glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(37,99,235,0.12) 0%,rgba(37,99,235,0.04) 40%,transparent 70%);pointer-events:none}
.hero-sub{font-size:12px;font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:1.5px;margin:0 0 10px;position:relative}
.hero-heading{font-size:26px;font-weight:800;color:#fff;margin:0 0 24px;letter-spacing:-0.5px;position:relative;line-height:1.3}
.hero-search-wrap{display:flex;gap:0;max-width:480px;margin:0 auto 24px;position:relative;z-index:10;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:999px;padding:4px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.hero-search-wrap:focus-within{border-color:rgba(37,99,235,0.5);box-shadow:0 0 0 4px rgba(37,99,235,0.15),0 8px 32px rgba(0,0,0,0.2)}
.hero-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:rgba(255,255,255,0.35);pointer-events:none;z-index:1}
.hero-search-input{flex:1;padding:12px 16px 12px 42px;border:none;border-radius:999px;background:transparent;color:#fff;font-family:var(--font-body);font-size:15px;font-weight:500;min-width:0}
.hero-search-input::placeholder{color:rgba(255,255,255,0.3)}
.hero-search-input:focus{outline:none}
.hero-search-btn{flex-shrink:0;padding:10px 24px;border:none;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(37,99,235,0.4)}
.hero-search-btn:hover{background:var(--accent-hover);box-shadow:0 4px 16px rgba(37,99,235,0.5);transform:translateY(-1px)}
.scenario-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:480px;margin:0 auto;position:relative}
.scenario-card{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;text-decoration:none;transition:all .2s;text-align:left}
.scenario-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(37,99,235,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.scenario-icon{font-size:20px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border-radius:10px}
.scenario-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.scenario-card strong{font-size:13px;font-weight:700;color:#fff;line-height:1.3}
.scenario-card span{font-size:10px;color:rgba(255,255,255,0.4);line-height:1.3}
.hero-search .autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:100;max-height:320px;overflow-y:auto;margin-top:6px}
@media(max-width:480px){
  .hero-search{padding:32px 16px 24px}
  .hero-heading{font-size:20px;margin-bottom:18px}
  .hero-sub{font-size:10px;letter-spacing:1px}
  .hero-search-wrap{max-width:100%}
  .hero-search-input{font-size:14px;padding:11px 14px 11px 38px}
  .hero-search-icon{left:14px;width:16px;height:16px}
  .hero-search-btn{font-size:13px;padding:9px 18px}
  .scenario-cards{grid-template-columns:1fr;max-width:100%;gap:8px}
  .scenario-card{padding:12px 14px}
  .scenario-icon{width:32px;height:32px;font-size:17px}
}

/* ── View Toggle (리스트/지도) ── */
.view-toggle-wrap{max-width:1200px;margin:0 auto;padding:0 24px 12px;display:flex;gap:4px}
.view-toggle{padding:7px 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.view-toggle:hover{border-color:var(--accent);color:var(--accent)}
.view-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Map Container ── */
.map-container{width:100%;height:500px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md)}

/* ── Map Info Window ── */
.map-info-window{padding:12px 14px;min-width:180px;max-width:260px;font-family:var(--font-body);line-height:1.5}
.map-info-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.map-info-loc{font-size:11px;color:var(--muted);margin-bottom:6px}
.map-info-price{font-size:13px;font-weight:600;color:var(--ink)}
.map-info-pct{font-size:12px;font-weight:700;margin-top:2px}
.map-info-pct.up{color:var(--up)}
.map-info-pct.down{color:var(--down)}
.map-info-link{display:inline-block;margin-top:6px;font-size:11px;font-weight:600;color:var(--accent);text-decoration:none}
.map-info-link:hover{text-decoration:underline}
.map-info-close{position:absolute;top:4px;right:6px;background:none;border:none;font-size:14px;color:var(--muted);cursor:pointer;padding:2px}
.map-info-close:hover{color:var(--ink)}

/* ── Insight Card (지역 분석 링크) ── */
.insight-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border:1px solid var(--line);border-radius:12px;margin:10px 0}
.insight-card-title{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;flex-shrink:0}
.insight-card-links{display:flex;gap:6px;flex-wrap:wrap}
.insight-card-link{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft,rgba(37,99,235,0.08));border-radius:8px;text-decoration:none;transition:all .15s;white-space:nowrap}
.insight-card-link:hover{background:rgba(37,99,235,0.15);transform:translateY(-1px)}
@media(max-width:480px){
  .insight-card{flex-direction:column;align-items:flex-start;gap:8px}
  .insight-card-links{gap:4px}
  .insight-card-link{font-size:11px;padding:5px 10px}
}

/* ── Tooltips (term-tip) ── */
.term-tip{border-bottom:1px dashed var(--muted-light);cursor:help;position:relative;white-space:nowrap}
.term-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;font-size:12px;font-weight:500;line-height:1.5;padding:8px 12px;border-radius:8px;max-width:260px;width:max-content;white-space:normal;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}
.term-tip::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1e293b;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}
.term-tip.tip-active::after,.term-tip.tip-active::before{opacity:1}
@media(hover:hover){.term-tip:hover::after,.term-tip:hover::before{opacity:1}}
@media(max-width:480px){.term-tip::after{left:0;transform:none}}

/* ── CTA Group ── */
.cta-group{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap;justify-content:flex-end}
.cta-group .detail-btn{font-size:11px;padding:5px 10px}

/* ── Compare Floating Bar ── */
.compare-float-bar{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:2px solid var(--accent);padding:12px 24px;display:flex;align-items:center;gap:12px;z-index:100;box-shadow:0 -4px 16px rgba(0,0,0,0.1)}
.compare-float-bar .cfb-label{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.compare-float-bar .chip{background:var(--accent-soft);color:var(--accent);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.compare-float-bar .chip .remove{cursor:pointer;opacity:0.6;font-size:10px}
.compare-float-bar .chip .remove:hover{opacity:1}
.compare-float-bar .go-btn{margin-left:auto;background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:background .15s}
.compare-float-bar .go-btn:hover{background:var(--accent-hover)}
.compare-float-bar .cfb-hint{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.compare-float-bar .cfb-clear{background:none;border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:12px;color:var(--muted);cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:all .15s}
.compare-float-bar .cfb-clear:hover{border-color:var(--accent);color:var(--accent)}

/* ── Watchlist Badge ── */
.wl-badge{background:var(--accent);color:#fff;font-size:9px;font-weight:800;border-radius:50%;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;margin-left:2px;padding:0 4px;line-height:1;vertical-align:middle}

/* ── Explain Block (undervalued) ── */
.explain-block{margin-top:8px;padding:10px 12px;background:var(--accent-soft);border-radius:8px;line-height:1.7;font-size:12px;color:var(--ink-light)}
.explain-block .source{color:var(--muted);font-size:11px}

/* ── Mode Toggle (매매/전세) ── */
.mode-tabs{display:flex;justify-content:center;gap:6px;padding:14px 24px 0;max-width:480px;margin:0 auto}
.mode-tab{flex:1;padding:12px 0;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--muted);cursor:pointer;text-align:center;transition:all .18s;letter-spacing:.04em}
.mode-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.mode-tab:hover:not(.active){color:var(--ink);border-color:var(--accent);background:var(--accent-soft)}

/* ── Analysis Grid (저평가 + 바닥찾기) ── */
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1200px;margin:0 auto;padding:0 24px 16px}
#grid>.analysis-grid{padding:0;max-width:none;margin:0 0 16px}
.analysis-section{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-md);transition:box-shadow .2s}
.analysis-section:hover{box-shadow:var(--shadow-lg)}
.analysis-title{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:800;color:var(--ink);text-decoration:none;margin-bottom:14px;letter-spacing:-0.3px}
.analysis-title:hover{color:var(--accent)}
.analysis-arrow{color:var(--muted);font-size:18px;transition:transform .15s}
.analysis-title:hover .analysis-arrow{transform:translateX(3px);color:var(--accent)}
.analysis-body{min-height:60px}
.analysis-card{padding:12px 0;border-bottom:1px solid var(--line)}
.analysis-card:last-child{border-bottom:none}
.analysis-card-head{display:flex;align-items:center;gap:8px}
.analysis-card-rank{font-size:13px;font-weight:800;color:var(--muted)}
.analysis-card-rank.n1{color:var(--gold)}
.analysis-card-rank.n2{color:var(--silver)}
.analysis-card-rank.n3{color:var(--bronze)}
.analysis-card-name{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.analysis-card-name:hover{text-decoration:underline;color:var(--accent)}
.analysis-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px;flex-shrink:0}
.badge-loc{background:#dbeafe;color:#1e40af}
.badge-rising{background:#dcfce7;color:#166534}
.badge-flat{background:#f1f5f9;color:#64748b}
.badge-falling{background:#fef2f2;color:#dc2626}
.analysis-card-detail{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.analysis-card-metrics{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-light);margin-top:3px;font-weight:600}
.metric-sep{color:var(--line)}

@media(max-width:720px){
  .analysis-grid{grid-template-columns:1fr;padding:0 16px 12px}
  .analysis-section{padding:16px}
  .analysis-title{font-size:15px}
}
@media(max-width:480px){
  .analysis-grid{padding:0 12px 10px;gap:10px}
  .analysis-section{padding:14px 12px;border-radius:10px}
  .analysis-title{font-size:14px}
  .analysis-card-name{font-size:13px}
  .analysis-card-detail{font-size:11px}
  .analysis-card-metrics{font-size:10px}
}

/* ── Next Action Section ── */
.next-action{border-style:dashed;border-color:var(--accent-light);background:var(--accent-soft)}
.next-action .section-title{color:var(--accent)}
.next-action .popular-item{background:var(--paper)}

/* ── Valuation Page ── */
.val-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:12px;box-shadow:var(--shadow-md);transition:box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.val-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:0;transition:opacity .2s ease}
.val-guide-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.val-guide-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.val-guide-grid{display:flex;gap:12px;margin-bottom:10px}
.val-guide-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.val-guide-desc{font-size:11px;color:var(--muted);line-height:1.5}
.val-guide-footer{font-size:10px;color:var(--muted);text-align:center;border-top:1px solid var(--line);padding-top:8px}
.val-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.val-card:hover::before{opacity:1}
.val-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.val-badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.val-badge-undervalued{background:#dbeafe;color:#1e40af}
.val-badge-market{background:#f1f5f9;color:#64748b}
.val-badge-leading{background:#fef2f2;color:#dc2626}
.val-gap{font-size:22px;font-weight:800;letter-spacing:-0.5px}
.val-gap.negative{color:var(--down)}
.val-gap.positive{color:var(--up)}
.val-name{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:2px}
.val-info{font-size:12px;color:var(--muted);margin-bottom:12px}
.val-gauge-wrap{margin:12px 0 16px}
.val-gauge-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:4px}
.val-gauge-track{position:relative;height:8px;background:linear-gradient(90deg,#3b82f6 0%,#94a3b8 50%,#ef4444 100%);border-radius:4px}
.val-gauge-marker{position:absolute;top:-4px;width:16px;height:16px;background:var(--ink);border:2px solid var(--paper);border-radius:50%;transform:translateX(-50%);box-shadow:var(--shadow-sm)}
.val-compare-wrap{margin-top:16px}
.val-compare-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.val-compare-table{width:100%;border-collapse:collapse;font-size:12px}
.val-compare-table th{text-align:left;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:2px solid var(--accent);font-size:11px;background:var(--bg);position:sticky;top:0;z-index:1}
.val-compare-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.val-compare-table .val-me{background:var(--accent-soft);font-weight:700}
.val-compare-table tbody tr:nth-child(even){background:rgba(0,0,0,0.02)}
.val-compare-table tbody tr:hover{background:var(--accent-soft)}
.val-chart-wrap{margin-top:12px;height:200px}
.val-chart-wrap canvas{width:100%;height:100%;display:block}
.val-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--muted)}
.val-legend-item{display:flex;align-items:center;gap:4px}
.val-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.val-cta{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.val-area-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.val-area-btn{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.val-area-btn:hover{border-color:var(--accent);color:var(--accent)}
.val-area-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.val-empty{text-align:center;padding:48px 16px;color:var(--muted);font-size:14px}
.val-hint{text-align:center;font-size:13px;color:var(--muted);padding:24px 16px}
/* ── value score section ── */
.vs-section{margin-top:16px;padding:14px 16px;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius)}
.vs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.vs-title{font-size:13px;font-weight:700;color:var(--ink)}
.vs-total{display:flex;align-items:baseline;gap:1px}
.vs-total-num{font-size:22px;font-weight:800;color:var(--accent)}
.vs-total-label{font-size:11px;color:var(--muted)}
.vs-subway-info{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;color:var(--ink)}
.vs-subway-icon{font-size:14px}
.vs-subway-name{font-weight:600}
.vs-subway-line{color:var(--muted);font-size:11px}
.vs-subway-dist{margin-left:auto;color:var(--muted);font-size:11px}
.vs-commute{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:11px;color:var(--muted);padding:6px 8px;background:var(--bg);border-radius:var(--radius-sm)}
.vs-commute-icon{font-size:13px}
.vs-commute-label{font-weight:600;color:var(--ink);font-size:11px}
.vs-commute-times{margin-left:auto;font-variant-numeric:tabular-nums}
.vs-bars-col{width:100%}
.vs-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vs-bar-label{font-size:11px;color:var(--muted);width:72px;flex-shrink:0;text-align:right}
.vs-bar-track{flex:1;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.vs-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.vs-bar-high{background:#2563eb}
.vs-bar-mid{background:#f59e0b}
.vs-bar-low{background:#94a3b8}
.vs-bar-val{font-size:12px;font-weight:700;color:var(--ink);width:24px;text-align:right}

/* ── 단지 상세 페이지 ── */
.apt-header{margin:20px 0 12px}
.apt-title{font-size:22px;font-weight:800;color:var(--ink);margin:0}
.apt-sub{font-size:13px;color:var(--muted);margin-top:4px}
.apt-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.share-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.share-btn:disabled{opacity:.4;cursor:default}
.apt-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.apt-price-cell{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;text-align:center}
.apt-price-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.apt-price-value{font-size:18px;font-weight:800;color:var(--ink)}
.apt-price-sub{font-size:11px;color:var(--muted);margin-top:2px}
.apt-txn-table{width:100%;border-collapse:collapse;font-size:13px}
.apt-txn-table th{text-align:left;font-weight:600;color:var(--muted);padding:8px 6px;border-bottom:2px solid var(--accent);font-size:12px;background:var(--bg);position:sticky;top:0;z-index:1}
.apt-txn-table td{padding:8px 6px;border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.apt-txn-table tbody tr:nth-child(even){background:rgba(0,0,0,0.02)}
.apt-txn-table tr:hover{background:var(--accent-soft)}
.apt-detail-link{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--accent);text-decoration:none;padding:2px 8px;border:1px solid var(--accent);border-radius:6px;white-space:nowrap;transition:all .15s}
.apt-detail-link:hover{background:var(--accent);color:#fff}
.share-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;color:#fff;padding:10px 24px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;opacity:0;transition:all .3s ease;z-index:9999;pointer-events:none}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){
  .apt-price-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .apt-price-value{font-size:15px}
  .apt-actions{gap:6px}
  .share-btn{padding:5px 10px;font-size:11px}
}

/* =================================
   Animations & Transitions
   ================================= */

/* ── Entry Animation ── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes modalIn{
  from{opacity:0;transform:scale(0.95)}
  to{opacity:1;transform:scale(1)}
}

.section,.dash-card,.val-card,.analysis-section,.market-summary,.popular-districts,.insight-card{
  animation:fadeInUp .4s ease-out both
}
.section:nth-child(1),.dash-card:nth-child(1),.val-card:nth-child(1){animation-delay:0s}
.section:nth-child(2),.dash-card:nth-child(2),.val-card:nth-child(2){animation-delay:.03s}
.section:nth-child(3),.dash-card:nth-child(3),.val-card:nth-child(3){animation-delay:.06s}
.section:nth-child(4),.dash-card:nth-child(4),.val-card:nth-child(4){animation-delay:.09s}
.section:nth-child(5),.dash-card:nth-child(5),.val-card:nth-child(5){animation-delay:.12s}
.section:nth-child(6),.dash-card:nth-child(6),.val-card:nth-child(6){animation-delay:.15s}
.section:nth-child(7),.dash-card:nth-child(7),.val-card:nth-child(7){animation-delay:.18s}
.section:nth-child(8),.dash-card:nth-child(8),.val-card:nth-child(8){animation-delay:.21s}
.section:nth-child(9),.dash-card:nth-child(9),.val-card:nth-child(9){animation-delay:.24s}
.section:nth-child(10),.dash-card:nth-child(10),.val-card:nth-child(10){animation-delay:.27s}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* =================================
   Dark Mode
   ================================= */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f172a;
    --ink:#e2e8f0;
    --ink-light:#cbd5e1;
    --paper:#1e293b;
    --line:#334155;
    --muted:#94a3b8;
    --muted-light:#64748b;
    --accent-soft:rgba(37,99,235,0.15);
    --accent-glow:rgba(37,99,235,0.20);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.2),0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:0 2px 4px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:0 4px 6px rgba(0,0,0,0.2),0 10px 24px rgba(0,0,0,0.4);
  }

  /* Badges & Tags */
  .tag-warn{background:#422006;color:#fbbf24}
  .tag-muted{background:#334155;color:#94a3b8}
  .tag-change-up{background:#450a0a;color:#fca5a5}
  .tag-change-down{background:#172554;color:#93c5fd}
  .newhigh-badge{background:#450a0a;color:#fca5a5;border-color:rgba(239,68,68,0.3)}
  .recovery-badge.recovered{background:#1e3a5f;color:#93c5fd}
  .recovery-badge.rising{background:#14532d;color:#86efac}
  .recovery-badge.flat{background:#334155;color:#94a3b8}
  .recovery-badge.falling{background:#450a0a;color:#fca5a5}
  .badge-loc{background:#1e3a5f;color:#93c5fd}
  .badge-rising{background:#14532d;color:#86efac}
  .badge-flat{background:#334155;color:#94a3b8}
  .badge-falling{background:#450a0a;color:#fca5a5}

  /* Valuation badges */
  .val-badge-undervalued{background:#1e3a5f;color:#93c5fd}
  .val-badge-market{background:#334155;color:#94a3b8}
  .val-badge-leading{background:#450a0a;color:#fca5a5}

  /* Inputs & Selects */
  .district-select,.dong-select,.danji-select{background-color:var(--paper);color:var(--ink);border-color:var(--line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}
  .search-input{background:var(--paper);color:var(--ink);border-color:var(--line)}
  .search-input::placeholder{color:var(--muted)}

  /* Modal */
  .modal-overlay{background:rgba(0,0,0,0.7)}
  .modal-content{box-shadow:0 25px 50px -12px rgba(0,0,0,0.5)}
  .modal-close{background:var(--line);color:var(--muted)}
  .modal-close:hover{background:#475569;color:var(--ink)}

  /* Tables zebra override */
  .modal-table tbody tr:nth-child(even),
  .val-compare-table tbody tr:nth-child(even),
  .apt-txn-table tbody tr:nth-child(even){background:rgba(255,255,255,0.03)}
  .modal-table th,.val-compare-table th,.apt-txn-table th{background:var(--bg)}

  /* Cards & Panels */
  .jeonse-sample-row{background:var(--bg)}
  .dong-stat-bar-wrap{background:var(--line)}
  .heatmap-info{background:var(--bg);border-color:var(--line)}
  .vol-bar-track{background:var(--line)}
  .compare-panel{background:var(--bg);border-color:var(--line)}
  .autocomplete-dropdown{background:var(--paper);border-color:var(--line)}
  .ac-item{border-color:var(--line)}
  .popular-item{background:var(--bg);border-color:var(--line)}
  .next-action .popular-item{background:var(--paper)}
  .insight-card{background:var(--bg);border-color:var(--line)}
  .val-guide-card{background:var(--bg);border-color:var(--line)}

  /* Buttons */
  .detail-btn{background:var(--paper);border-color:var(--line);color:var(--muted)}
  .sort-btn{background:var(--paper);border-color:var(--line);color:var(--muted)}
  .compare-close{background:var(--paper);border-color:var(--line);color:var(--muted)}
  .compare-float-bar{background:var(--paper);border-top-color:var(--accent)}
  .compare-float-bar .cfb-clear{border-color:var(--line);color:var(--muted)}

  /* Tooltips */
  .term-tip::after{background:#334155;color:#e2e8f0}
  .term-tip::before{border-top-color:#334155}

  /* Share toast */
  .share-toast{background:#334155;color:#e2e8f0}

  /* Explain block */
  .explain-block{background:rgba(37,99,235,0.12);color:var(--ink-light)}

  /* VS section */
  .vs-section{background:rgba(37,99,235,0.1);border-color:var(--line)}
  .vs-commute{background:var(--bg)}

  /* Apt price cells */
  .apt-price-cell{background:var(--paper);border-color:var(--line)}

  /* Share btn */
  .share-btn{background:var(--paper);border-color:var(--line);color:var(--ink)}

  /* Map info window */
  .map-info-window{background:var(--paper);color:var(--ink)}

  /* Recovery bar wrap */
  .recovery-bar-wrap{background:var(--line)}

  /* Next action */
  .next-action{border-color:rgba(96,165,250,0.3);background:rgba(37,99,235,0.08)}
}