/* ============================================================
	card.css
	Hyomin Design System v1.0 — Card Component

	컴포넌트:
	- .card           — 카드 래퍼
	- .card__image    — 이미지 영역
	- .card__content  — 텍스트 영역 래퍼
	- .card__title    — 제목
	- .card__desc     — 설명
	- .card__footer   — 하단 텍스트

	Modifier:
	- .card--sm  — 200px width / image 110px
	- .card--lg  — 450px width / image 250px
	(default = md: 320px / image 180px)
	============================================================ */


/* ─────────────────────────────────────────
	Card — 래퍼 (md = default)
	───────────────────────────────────────── */

.card {
	display: flex;
	flex-direction: column;
	width: 320px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg); /* 12px */
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	background-color: #ffffff;
}

.card--sm {
	width: 200px;
}

.card--lg {
	width: 450px;
}


/* ─────────────────────────────────────────
	Image — 이미지 플레이스홀더
	───────────────────────────────────────── */

.card__image {
	width: 100%;
	height: 180px;
	background-color: var(--gray-100);
	flex-shrink: 0;
}

.card--sm .card__image {
	height: 110px;
}

.card--lg .card__image {
	height: 250px;
}


/* ─────────────────────────────────────────
	Content — 텍스트 영역
	───────────────────────────────────────── */

.card__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2); /* 8px */
	padding: var(--spacing-4); /* 16px */
	background-color: #ffffff;
}


/* ─────────────────────────────────────────
	Title / Desc / Footer — 텍스트
	───────────────────────────────────────── */

.card__title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 27px;
}

.card__desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 24px;
}

.card__footer {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 24px;
}

/* sm 사이즈: title 16px, desc/footer 14px */
.card--sm .card__title {
	font-size: var(--font-size-body-sm); /* 16px */
	line-height: 24px;
}

.card--sm .card__desc,
.card--sm .card__footer {
	font-size: var(--font-size-label); /* 14px */
	line-height: 20px;
}


/* ─────────────────────────────────────────
	Dark Mode
	───────────────────────────────────────── */

[data-theme="dark"] .card {
	background-color: var(--gray-800);
	border-color: var(--gray-700);
}

[data-theme="dark"] .card__image {
	background-color: var(--gray-700);
}

[data-theme="dark"] .card__content {
	background-color: var(--gray-800);
}

[data-theme="dark"] .card__title,
[data-theme="dark"] .card__desc,
[data-theme="dark"] .card__footer {
	color: var(--gray-100);
}