/* ==========================================================
   components/card.css — 카드 컨테이너
   .card(그림자) · .card-flat(테두리만) · .card-pad · .card-title · .card-head
   ========================================================== */

.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: 20px; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.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-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: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}

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