/* ============================================================
	skeleton.css
	Hyomin Design System v1.0 — Skeleton Component

	컴포넌트:
	- .skeleton             — 기본 스켈레톤 블록 (shimmer 애니메이션 포함)
	- .skeleton--title      — 타이틀 높이 (27px)
	- .skeleton--text       — 본문 텍스트 높이 (24px)
	- .skeleton--avatar     — 원형 아바타 (60×60px)
	- .skeleton--image      — 이미지 영역 (100%×180px)
	- .skeleton--w-full     — 너비 100%
	- .skeleton--w-80      — 너비 80%
	- .skeleton--w-60      — 너비 60%
	- .skeleton--w-40      — 너비 40%

	패턴 래퍼:
	- .skeleton-card        — 카드 패턴 (이미지 + 텍스트)
	- .skeleton-card__body  — 카드 텍스트 영역
	- .skeleton-profile     — 프로필 패턴 (아바타 + 텍스트)
	- .skeleton-profile__body — 프로필 텍스트 영역
	- .skeleton-paragraph   — 단락 패턴 (타이틀 + 텍스트)

	사용법:
	<div class="skeleton skeleton--text skeleton--w-60"></div>

	<div class="skeleton-card">
		<div class="skeleton skeleton--image"></div>
		<div class="skeleton-card__body">
			<span class="skeleton skeleton--title skeleton--w-80"></span>
			<span class="skeleton skeleton--text skeleton--w-60"></span>
			<span class="skeleton skeleton--text skeleton--w-40"></span>
		</div>
	</div>
	============================================================ */

/* ─────────────────────────────────────────
	Shimmer Keyframe
	───────────────────────────────────────── */

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ─────────────────────────────────────────
	Base
	───────────────────────────────────────── */

.skeleton {
	display: block;
	border-radius: var(--radius-md);
	background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────
	Height Modifiers
	───────────────────────────────────────── */

/* Figma: Title line 27px */
.skeleton--title {
	height: 27px;
}

/* Figma: Body text line 24px */
.skeleton--text {
	height: 24px;
}

/* ─────────────────────────────────────────
	Shape Modifiers
	───────────────────────────────────────── */

/* Figma: Avatar 60×60px 원형 */
.skeleton--avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

/* Figma: Image 영역 100%×180px */
.skeleton--image {
	width: 100%;
	height: 180px;
	border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────
	Width Modifiers
	───────────────────────────────────────── */

.skeleton--w-full {
	width: 100%;
} /* 100%        */
.skeleton--w-80 {
	width: 80%;
}
.skeleton--w-60 {
	width: 60%;
}
.skeleton--w-40 {
	width: 40%;
}

/* ─────────────────────────────────────────
	Card Pattern
	───────────────────────────────────────── */

.skeleton-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	width: 320px;
}

.skeleton-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	padding: var(--spacing-4);
	background-color: #ffffff;
}

/* ─────────────────────────────────────────
	Profile Pattern
	───────────────────────────────────────── */

.skeleton-profile {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-4);
}

.skeleton-profile__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	flex: 1;
	min-width: 0;
}

/* ─────────────────────────────────────────
	Paragraph Pattern
	───────────────────────────────────────── */

.skeleton-paragraph {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
}

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

[data-theme="dark"] .skeleton {
	background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
	background-size: 200% 100%;
}

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