/* ==========================================================
   components/card.css — 카드 컨테이너
   .card(그림자) · .card-flat(테두리만) · .card-pad · .card-head · .card-title · .card-foot
   · .link-card(누르면 이동) · .kpi(숫자 한 칸) · .banner(가로 배너 링크)
   ========================================================== */

.card { background: #fff; border: 1px solid rgba(232, 235, 241, .9); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.card-flat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-pad { padding: 18px; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.card-title > .ico { color: var(--brand); }
.card-title > .ico.gold { color: var(--gold); }
.card-sub { margin-top: 2px; font-size: 13px; color: var(--ink-3); }

/* 카드 하단 기준 · 링크 줄 */
.card-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2);
}

/* ---------- 누르면 이동하는 카드 ---------- */
.link-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.link-card:hover { border-color: #D5DAE3; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.link-card-go { position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; color: var(--ink-4); }

/* ---------- 숫자 한 칸 ---------- */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.kpi-k { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.kpi-k .ico { width: 14px; height: 14px; color: var(--ink-4); }
.kpi-v { font-size: 22px; font-weight: 900; letter-spacing: -.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi-v small { margin-left: 2px; font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: -.01em; }
.kpi-s { font-size: 12.5px; color: var(--ink-3); }

/* ---------- 가로 배너 링크 ---------- */
.banner {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); transition: box-shadow .2s, border-color .2s;
}
.banner:hover { border-color: #D5DAE3; box-shadow: var(--shadow-2); }
.banner-ico { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); }
.banner-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.banner-txt b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
.banner-txt span { font-size: 13.5px; color: var(--ink-3); }
.banner-go { color: var(--ink-4); }

@media (min-width: 768px) {
  .card-pad { padding: 24px; }
  .card-title { font-size: 18px; }
  .link-card { padding: 18px; }
}