/* ============================================================
 *  주차장 비교 페이지 — /compare/{a}/vs/{b}/
 *  변수: main.css의 --c-* 토큰 사용
 * ============================================================ */

.compare{margin:24px auto 64px}

/* Hero (양쪽 주차장 카드 + VS 배지) */
.compare__hero{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:stretch;
  margin:8px 0 18px;
}
.compare__hero-side{
  background:var(--c-surface);
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius-lg);
  padding:22px 22px 18px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.compare__hero-side--a{border-top:4px solid var(--c-primary-2)}
.compare__hero-side--b{border-top:4px solid var(--c-highlight-2)}
.compare__hero-eyebrow{
  font-size:.75rem;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--c-muted);
  font-weight:var(--fw-bold);
}
.compare__hero-name{
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  margin:0;
  color:var(--c-primary);
  font-weight:var(--fw-black);
  letter-spacing:var(--ls-tight);
  line-height:1.25;
  word-break:keep-all;
}
.compare__hero-name a{color:inherit}
.compare__hero-name a:hover{color:var(--c-primary-2);text-decoration:none}
.compare__hero-addr{
  font-size:.9rem;
  color:var(--c-muted);
  margin:0;
  line-height:1.45;
  word-break:keep-all;
}
.compare__hero-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}

/* VS 배지 */
.compare__vs{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-self:center;
  font-weight:var(--fw-black);
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-2) 100%);
  width:64px;height:64px;border-radius:50%;
  box-shadow:var(--shadow-md),0 0 0 6px rgba(31,58,95,.06);
  font-size:1.15rem;
  flex-shrink:0;
  position:relative;
}
.compare__vs::after{
  content:"";
  position:absolute;inset:-3px;
  border-radius:50%;
  border:2px dashed rgba(251,191,36,.45);
  pointer-events:none;
}

/* 메타 영역 (직선 거리 등) */
.compare__meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 18px;
}
.compare__chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  color:var(--c-text);
  padding:6px 12px;border-radius:999px;
  font-size:.88rem;font-weight:var(--fw-mid);
}
.compare__chip-icon{color:var(--c-primary-2)}

/* 비교 표 */
.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--c-surface);
  border:1px solid var(--c-border-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  table-layout:fixed;
}
.compare-table thead th{
  background:var(--c-surface-2);
  color:var(--c-primary);
  text-align:left;
  font-weight:var(--fw-bold);
  padding:14px 16px;
  font-size:.95rem;
  border-bottom:1px solid var(--c-border-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compare-table thead th:first-child{width:120px;color:var(--c-muted);font-size:.82rem;text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.compare-table thead th a{color:inherit}
.compare-table thead th a:hover{color:var(--c-primary-2);text-decoration:none}
.compare-table tbody tr + tr th,
.compare-table tbody tr + tr td{border-top:1px solid var(--c-border-soft)}
.compare-table tbody tr:nth-child(even) th,
.compare-table tbody tr:nth-child(even) td{background:var(--c-bg-soft)}
.compare-table tbody tr:hover th,
.compare-table tbody tr:hover td{background:rgba(251,191,36,.06)}
.compare-table th,
.compare-table td{
  padding:13px 16px;
  vertical-align:middle;
  font-size:.95rem;
  line-height:1.45;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.compare-table tbody th{
  color:var(--c-muted);
  font-weight:var(--fw-mid);
  font-size:.85rem;
  letter-spacing:.01em;
  width:120px;
}
.compare-table tbody th .cmp-ico{margin-right:6px;display:inline-block;width:18px;text-align:center}
.compare-table tbody td{color:var(--c-text);font-weight:var(--fw-mid)}
.compare-table tbody td.is-empty{color:var(--c-muted);font-weight:var(--fw-reg)}

/* 무료/유료 인라인 배지 */
.cmp-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:var(--fw-bold);line-height:1.4}
.cmp-pill--free{background:rgba(22,163,74,.12);color:var(--c-free)}
.cmp-pill--paid{background:rgba(71,85,105,.12);color:var(--c-paid)}
.cmp-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}

/* 액션 버튼 */
.compare__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0 18px;
}
.compare__actions .btn{margin:0;text-align:center;padding:12px 18px}

/* 출처 안내 */
.compare__source{
  color:var(--c-muted);
  font-size:.85rem;
  margin:8px 0 0;
  text-align:center;
}

/* 반응형 */
@media (max-width:720px){
  .compare__hero{
    grid-template-columns:1fr;
    gap:10px;
  }
  .compare__vs{
    width:48px;height:48px;font-size:.95rem;
    margin:0 auto;
    box-shadow:var(--shadow-sm),0 0 0 4px rgba(31,58,95,.05);
  }
  .compare__vs::after{display:none}
  .compare__hero-side{padding:18px 18px 14px}
  .compare__actions{grid-template-columns:1fr}
  .compare-table{border-radius:var(--radius)}
  .compare-table thead th{padding:12px 12px;font-size:.88rem}
  .compare-table thead th:first-child{width:84px;font-size:.72rem}
  .compare-table th,
  .compare-table td{padding:11px 12px;font-size:.9rem}
  .compare-table tbody th{width:84px;font-size:.78rem}
  .compare-table tbody th .cmp-ico{margin-right:3px;width:auto}
}

/* 인쇄 */
@media print{
  .compare__actions,.compare__source{display:none}
  .compare-table,.compare__hero-side{box-shadow:none;border-color:#ccc}
}