/* ==========================================================
   components/card.css — 카드 컨테이너
   .card(그림자) · .card-flat(테두리만) · .card-pad · .card-head · .card-title · .card-foot
   · .link-card(누르면 이동하는 작은 카드) · .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-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); }

/* ---------- 가로 배너 링크 ---------- */
.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; }
}