/* ============================================================
	stepper.css
	Hyomin Design System v1.0 — Stepper Component

	컴포넌트:
	- .stepper          — 래퍼 (flex row, gap 8px)
	- .step             — 개별 단계 카드
	- .step__label      — "STEP1" 상단 레이블 (14px Regular)
	- .step__text       — "정보 입력" 하단 텍스트 (16px Medium)

	상태 수정자:
	- .step--done       — 완료 (녹색)
	- .step--current    — 현재 진행 중 (흰 배경 + 진한 녹색 테두리)
	- .step--future     — 미진행 (회색)
	- .step--warning    — 경고 (노란색)
	- .step--error      — 오류 (빨간색)

	사용법:
	<div class="stepper">
		<div class="step step--done">
			<span class="step__label">STEP1</span>
			<span class="step__text">정보 입력</span>
		</div>
		<div class="step step--current">
			<span class="step__label">STEP2</span>
			<span class="step__text">검토</span>
		</div>
		<div class="step step--future">
			<span class="step__label">STEP3</span>
			<span class="step__text">완료</span>
		</div>
	</div>
	============================================================ */


/* ─────────────────────────────────────────
	Stepper — 래퍼
	───────────────────────────────────────── */

.stepper {
	display: flex;
	align-items: center;
	gap: var(--spacing-2); /* 8px */
	width: 100%;
}


/* ─────────────────────────────────────────
	Step — 개별 카드
	───────────────────────────────────────── */

.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-1); /* 4px */
	flex: 1;
	min-width: 100px;
	padding: var(--spacing-3) var(--spacing-4); /* 12px 16px */
	border-radius: var(--radius-lg); /* 12px */
	border: var(--border-width) solid transparent;
	text-align: center;
	overflow: hidden;
}


/* ─────────────────────────────────────────
	Step — 텍스트 요소
	───────────────────────────────────────── */

.step__label {
	display: block;
	width: 100%;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 24px;
}

.step__text {
	display: block;
	width: 100%;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 24px;
}


/* ─────────────────────────────────────────
	Done — 완료 (Figma: green-50 bg / green-200 border)
	───────────────────────────────────────── */

.step--done {
	background-color: var(--green-50);
	border-color: var(--green-200);
}

.step--done .step__label { color: var(--green-600); }
.step--done .step__text  { color: var(--green-800); }


/* ─────────────────────────────────────────
	Current — 현재 진행 (Figma: white bg / green-600 border)
	───────────────────────────────────────── */

.step--current {
	background-color: #ffffff;
	border-color: var(--green-600);
}

.step--current .step__label { color: var(--green-600); }
.step--current .step__text  { color: var(--gray-900); }


/* ─────────────────────────────────────────
	Future — 미진행 (Figma: gray-50 bg / gray-200 border)
	───────────────────────────────────────── */

.step--future {
	background-color: var(--gray-50);
	border-color: var(--gray-200);
}

.step--future .step__label { color: var(--gray-400); }
.step--future .step__text  { color: var(--gray-400); }


/* ─────────────────────────────────────────
	Warning — 경고 (Figma: yellow-50 bg / yellow-200 border)
	───────────────────────────────────────── */

.step--warning {
	background-color: var(--yellow-50);
	border-color: var(--yellow-200);
}

.step--warning .step__label { color: var(--yellow-300); }
.step--warning .step__text  { color: var(--yellow-600); }


/* ─────────────────────────────────────────
	Error — 오류 (Figma 상단 row 참고: red-50 bg / red-200 border)
	───────────────────────────────────────── */

.step--error {
	background-color: var(--red-50);
	border-color: var(--red-200);
}

.step--error .step__label { color: var(--red-400); }
.step--error .step__text  { color: var(--red-700); }


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

[data-theme="dark"] .step--done {
	background-color: var(--green-900);
	border-color: var(--green-700);
}

[data-theme="dark"] .step--done .step__label { color: var(--green-400); }
[data-theme="dark"] .step--done .step__text  { color: var(--green-300); }

[data-theme="dark"] .step--current {
	background-color: var(--gray-800);
	border-color: var(--green-500);
}

[data-theme="dark"] .step--current .step__label { color: var(--green-400); }
[data-theme="dark"] .step--current .step__text  { color: var(--gray-100); }

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

[data-theme="dark"] .step--future .step__label { color: var(--gray-500); }
[data-theme="dark"] .step--future .step__text  { color: var(--gray-500); }

[data-theme="dark"] .step--warning {
	background-color: var(--yellow-900);
	border-color: var(--yellow-700);
}

[data-theme="dark"] .step--warning .step__label { color: var(--yellow-300); }
[data-theme="dark"] .step--warning .step__text  { color: var(--yellow-200); }

[data-theme="dark"] .step--error {
	background-color: var(--red-900);
	border-color: var(--red-700);
}

[data-theme="dark"] .step--error .step__label { color: var(--red-400); }
[data-theme="dark"] .step--error .step__text  { color: var(--red-300); }