/* ==========================================================
   pages/compare.css — 학교 비교 (/compare)
   .cmp-pick(두 학교 고르기) · .cmp-verdict(한 줄 결론) · .cmp-rows(항목별 대결 막대)
   A 학교 = 브랜드 오렌지, B 학교 = 네이비. 앞선 쪽 숫자만 굵게(.is-win).
   학생 수·급식비는 좋고 나쁨이 아니므로 강조하지 않는다.
   ========================================================== */

.cmp-wrap { max-width: 880px; }

/* ---------- 두 학교 고르기 ---------- */
.cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.cmp-vs {
  align-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .02em;
}
.cmp-slot { min-width: 0; }
.cmp-card {
  --c: var(--brand); --c-soft: var(--brand-soft);
  height: 100%; display: flex; flex-direction: column; padding: 14px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); border-top: 4px solid var(--c);
}
.cmp-slot.b .cmp-card { --c: var(--navy-2); --c-soft: var(--navy-soft); }
.cmp-card .tag { align-self: flex-start; background: var(--c-soft); color: var(--c); }
.cmp-name { margin-top: 8px; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.035em; word-break: keep-all; }
.cmp-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-card .meta-dot { margin-top: 2px; font-size: 12px; }
.cmp-score { margin-top: auto; padding-top: 12px; }
.cmp-score .pts { font-size: 30px; }
.cmp-change { align-self: flex-start; margin-top: 8px; min-height: 30px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

.cmp-empty {
  width: 100%; height: 100%; min-height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 14px;
  border-radius: 20px; border: 2px dashed var(--line-hover); background: var(--surface-2); color: var(--ink-3);
  font-size: 14px; font-weight: 700; text-align: center; transition: border-color .15s, background .15s;
}
.cmp-empty:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-deep); }
.cmp-empty .plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-1); }
.cmp-empty small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-4); }

@media (min-width: 768px) {
  .cmp-pick { gap: 16px; }
  .cmp-vs { width: 48px; height: 48px; font-size: 14px; }
  .cmp-card { padding: 20px; }
  .cmp-name { font-size: 20px; }
  .cmp-score .pts { font-size: 40px; }
}

/* ---------- 한 줄 결론 ---------- */
.cmp-verdict { margin-top: 16px; padding: 18px 20px; border-radius: 20px; background: var(--surface-2); text-align: center; }
.cmp-verdict p { font-size: 17px; font-weight: 800; letter-spacing: -.03em; line-height: 1.5; }
.cmp-verdict p + p { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.cmp-verdict em { font-style: normal; color: var(--brand-deep); }
.cmp-verdict .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- 항목별 대결 ---------- */
.cmp-rows { margin-top: 16px; padding: 6px 18px; }
.cmp-legend { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 10px; font-size: 12.5px; font-weight: 800; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cmp-legend span > i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.cmp-legend .a > i { background: var(--brand); }
.cmp-legend .b > i { background: var(--navy-2); }
.cmp-legend b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-group { padding: 12px 0 4px; font-size: 12px; font-weight: 800; color: var(--ink-4); border-top: 1px solid var(--line); }
.cmp-row { padding: 10px 0 12px; border-top: 1px solid var(--line-2); }
.cmp-group + .cmp-row { border-top: 0; }
.cmp-label { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.cmp-label small { font-weight: 600; color: var(--ink-4); }
.cmp-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.cmp-a, .cmp-b { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-b { flex-direction: row-reverse; }
.cmp-vals b { flex: none; min-width: 44px; font-size: 16px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cmp-a b { text-align: left; }
.cmp-b b { text-align: right; }
.cmp-vals b.is-win { font-weight: 900; color: var(--navy); }
.cmp-a b.is-win { color: var(--brand-deep); }
.cmp-vals .txt { flex: 1; font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-b .txt { text-align: right; }
.cbar { position: relative; flex: 1; height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.cbar > i { position: absolute; top: 0; bottom: 0; border-radius: inherit; }
.cmp-a .cbar > i { right: 0; background: linear-gradient(270deg, var(--brand-2), var(--brand)); }
.cmp-b .cbar > i { left: 0; background: var(--navy-2); }

.cmp-note { margin-top: 12px; }
.cmp-foot { margin-top: 24px; }
.cmp-prompt { margin-top: 16px; }