/* ==========================================================
   pages/compare.css — 두 지역 비교 (/compare)
   .cmp-pick(두 지역 고르기) · .cmp-kpis · .cmp-hot · .cmp-table
   ========================================================== */

.cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px; margin-bottom: 14px; }
.cmp-sel { height: 50px; }
.cmp-sel select { font-size: 16px; font-weight: 800; }
.cmp-swap { background: var(--surface-2); }
.cmp-tools { margin-bottom: 18px; }

.cmp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.cmp-kpis .kpi { background: #fff; border: 1px solid var(--line); }
.cmp-kpis .kpi-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-kpis .kpi-a .kpi-k .ico { color: var(--brand); }
.cmp-kpis .kpi-b .kpi-k .ico { color: #C2412D; }

.grid-2 { display: grid; gap: 12px; }
.cmp-hot { margin-bottom: 16px; }
.cmp-hot:empty { display: none; }

.cmp-card { padding: 14px 10px; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 6px 12px; }
.cmp-table { display: grid; }
.cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px 88px; align-items: center; gap: 8px;
  min-height: 60px; padding: 6px 8px; border-radius: 12px;
}
a.cmp-row:hover { background: var(--surface-2); }
.cmp-th { min-height: 34px; font-size: 12px; font-weight: 800; color: var(--ink-4); }
.cmp-th span:not(:first-child) { text-align: center; }
.cmp-book { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.cmp-bt { display: grid; min-width: 0; line-height: 1.35; }
.cmp-bt b { font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-bt small { font-size: 12px; color: var(--ink-3); }
.cmp-r { text-align: center; font-variant-numeric: tabular-nums; }
.cmp-r b { font-size: 16px; font-weight: 900; }
.cmp-r small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cmp-out { font-size: 11.5px; font-weight: 700; color: var(--ink-4); }
.cmp-d { display: flex; justify-content: flex-end; }

@media (max-width: 520px) {
  .cmp-row { grid-template-columns: minmax(0, 1fr) 44px 44px 72px; gap: 6px; padding: 6px 4px; }
  .cmp-book { grid-template-columns: minmax(0, 1fr); }
  .cmp-book .cover { display: none; }
  .cmp-kpis .kpi { padding: 12px; }
  .cmp-kpis .kpi-v { font-size: 19px; }
}
@media (min-width: 768px) {
  .cmp-pick { max-width: 620px; padding: 14px; }
  .cmp-card { padding: 18px 14px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 90px 90px 120px; gap: 12px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
}