/**
 * Unified Card Component — 4page-ui-unification Phase 0
 * 설계 섹션 6-C 반영
 * 스코프: .page-tc / .page-bd / .page-hs (prep은 별도 그리드 사용)
 */

/* [2026-04-16] 카드 컨테이너 폭 통일 (D3 + G1)
 * HS/BD/TC 공통: .filter-bar와 동일한 max-width 900 중앙정렬.
 * 기존 TC JS가 렌더하는 .tc-card-h 등 non-.card 카드도 컨테이너가 제약 → 폭 통일.
 */
.page-tc .cards,
.page-bd .cards,
.page-hs .cards {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-tc .card,
.page-bd .card,
.page-hs .card {
  display: block;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  /* [2026-04-16] max-width 700→제거. 컨테이너 .cards (900)가 폭을 제어 → filter-bar와 카드가 동일 폭 (TC와 통일) */
  margin: 0 0 var(--space-3);
  box-sizing: border-box;
}

.page-tc .card:hover,
.page-bd .card:hover,
.page-hs .card:hover {
  border-color: var(--page-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.page-tc .card-head,
.page-bd .card-head,
.page-hs .card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* 좌측 이니셜 박스 */
.page-tc .card-av,
.page-bd .card-av,
.page-hs .card-av {
  width: 60px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--page-accent-soft);
  color: var(--page-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
}

/* IGE 직영 프로그램 — 앰버(또는 accent) 배경 */
.page-tc .card-av.is-ige-direct,
.page-bd .card-av.is-ige-direct,
.page-hs .card-av.is-ige-direct {
  background: var(--page-accent);
  color: var(--white);
}

.page-tc .card-av-initial,
.page-bd .card-av-initial,
.page-hs .card-av-initial {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.page-tc .card-av-score,
.page-bd .card-av-score,
.page-hs .card-av-score {
  font-size: 11px;
  color: var(--page-accent);
  opacity: 0.8;
  margin-top: 2px;
}

.page-tc .card-av.is-ige-direct .card-av-score,
.page-bd .card-av.is-ige-direct .card-av-score,
.page-hs .card-av.is-ige-direct .card-av-score {
  color: var(--white);
}

/* 중앙 본문 */
.page-tc .card-body,
.page-bd .card-body,
.page-hs .card-body {
  flex: 1;
  min-width: 0;
}

.page-tc .card-title,
.page-bd .card-title,
.page-hs .card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-700);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

.page-tc .card-badges,
.page-bd .card-badges,
.page-hs .card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.page-tc .badge,
.page-bd .badge,
.page-hs .badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.page-tc .badge--region,
.page-bd .badge--region,
.page-hs .badge--region {
  background: var(--ink-100);
  color: var(--ink-700);
}

.page-tc .badge--type,
.page-bd .badge--type,
.page-hs .badge--type {
  background: var(--page-accent-soft);
  color: var(--page-accent);
}

.page-tc .badge--feature,
.page-bd .badge--feature,
.page-hs .badge--feature {
  background: var(--ink-100);
  color: var(--ink-500);
}

.page-tc .card-meta,
.page-bd .card-meta,
.page-hs .card-meta {
  font-size: 12px;
  color: var(--ink-500);
  margin: 0;
}

/* 우측 가격 + 화살표 */
.page-tc .card-cta,
.page-bd .card-cta,
.page-hs .card-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.page-tc .card-cost,
.page-bd .card-cost,
.page-hs .card-cost {
  text-align: right;
}

.page-tc .card-cost-range,
.page-bd .card-cost-range,
.page-hs .card-cost-range {
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-700);
}

.page-tc .card-cost-unit,
.page-bd .card-cost-unit,
.page-hs .card-cost-unit {
  font-size: 11px;
  color: var(--ink-500);
}

.page-tc .card-arrow,
.page-bd .card-arrow,
.page-hs .card-arrow {
  width: 16px;
  height: 16px;
  color: var(--ink-400);
  transition: all 0.15s ease;
}

.page-tc .card:hover .card-arrow,
.page-bd .card:hover .card-arrow,
.page-hs .card:hover .card-arrow {
  color: var(--page-accent);
  transform: translateX(2px);
}

/* 홈스테이 전용 3단 cost-strip */
.page-hs .cost-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ink-300);
}

.page-hs .cost-cell {
  text-align: center;
}

.page-hs .cost-cell--plus {
  color: var(--ink-400);
  font-weight: 300;
  font-size: 18px;
}

.page-hs .cost-lbl {
  display: block;
  font-size: 11px;
  color: var(--ink-500);
  margin-bottom: 2px;
}

.page-hs .cost-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-700);
}

.page-hs .cost-cell--total .cost-val {
  color: var(--page-accent);
}

/* 추천 rail용 카드 변형 (bd/hs 추천 섹션) */
.page-bd .card--rail,
.page-hs .card--rail {
  max-width: 200px;
  display: inline-block;
  margin: 0 var(--space-2) 0 0;
  vertical-align: top;
}

.page-bd .card--rail .card-head,
.page-hs .card--rail .card-head {
  flex-direction: column;
  align-items: flex-start;
}

.page-bd .card--rail .cost-strip,
.page-hs .card--rail .cost-strip {
  display: none;
}

/* 모바일 */
@media (max-width: 640px) {
  .page-tc .card-head,
  .page-bd .card-head,
  .page-hs .card-head {
    flex-wrap: wrap;
  }
  .page-tc .card-cta,
  .page-bd .card-cta,
  .page-hs .card-cta {
    width: 100%;
    justify-content: space-between;
    margin-top: var(--space-3);
  }
  .page-tc .card-title,
  .page-bd .card-title,
  .page-hs .card-title {
    font-size: 15px;
  }
  .page-hs .cost-strip {
    font-size: 12px;
  }
}