/* ============================================================
	progress-bar.css
	Hyomin Design System v1.0 — Progress Bar Component

	컴포넌트:
	- .progress-bar            — 래퍼 (flex column, gap 4px)
	- .progress-bar__label     — 라벨 행 (label + percent 좌우 배치)
	- .progress-bar__label-text — 왼쪽 라벨 텍스트
	- .progress-bar__percent   — 오른쪽 퍼센트 텍스트
	- .progress-bar__track     — 회색 배경 트랙
	- .progress-bar__fill      — 컬러 채움 바 (width는 inline style로 제어)

	수정자:
	- .progress-bar--sm        — 트랙 높이 4px
	- .progress-bar--md        — 트랙 높이 8px (기본값)
	- .progress-bar--lg        — 트랙 높이 12px
	- .progress-bar--primary   — 초록 그라디언트 (기본값)
	- .progress-bar--secondary — 파란 그라디언트
	- .progress-bar--error     — 빨간 그라디언트

	사용법:
	<div class="progress-bar progress-bar--primary progress-bar--md">
		<div class="progress-bar__label">
			<span class="progress-bar__label-text">Label</span>
			<span class="progress-bar__percent">60%</span>
		</div>
		<div class="progress-bar__track"
			role="progressbar"
			aria-valuenow="60"
			aria-valuemin="0"
			aria-valuemax="100"
			aria-label="진행률">
			<div class="progress-bar__fill" style="width: 60%"></div>
		</div>
	</div>
	============================================================ */


/* ─────────────────────────────────────────
	Wrapper
	───────────────────────────────────────── */

.progress-bar {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1); /* 4px — Figma: gap 4px */
	width: 100%;
}


/* ─────────────────────────────────────────
	Label Row
	───────────────────────────────────────── */

.progress-bar__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-secondary);
	font-size: 12px; /* Figma: 12px — 프로젝트 토큰 없음 */
	font-weight: var(--font-weight-regular);
	color: var(--gray-500);
	line-height: normal;
}

.progress-bar__label-text {
	flex: 1 0 0;
}

.progress-bar__percent {
	flex: 1 0 0;
	text-align: right;
}


/* ─────────────────────────────────────────
	Track
	───────────────────────────────────────── */

.progress-bar__track {
	position: relative;
	width: 100%;
	height: 8px; /* md 기본값 */
	background-color: var(--gray-200);
	border-radius: var(--radius-full);
	overflow: hidden;
}


/* ─────────────────────────────────────────
	Fill
	───────────────────────────────────────── */

.progress-bar__fill {
	height: 100%;
	border-radius: var(--radius-full);
	/* Primary가 기본값 */
	background: linear-gradient(to right, var(--green-400), var(--green-500));
	transition: width var(--duration-base) var(--easing-default);
}


/* ─────────────────────────────────────────
	Size Modifiers
	───────────────────────────────────────── */

.progress-bar--sm .progress-bar__track { height: 4px; }
.progress-bar--md .progress-bar__track { height: 8px; }
.progress-bar--lg .progress-bar__track { height: 12px; }


/* ─────────────────────────────────────────
	Color Modifiers
	───────────────────────────────────────── */

/* Primary — 초록 그라디언트 (Figma: green-400 → green-500) */
.progress-bar--primary .progress-bar__fill {
	background: linear-gradient(to right, var(--green-400), var(--green-500));
}

/* Secondary — 파란 그라디언트 (Figma: #77abff → #3b82f6) */
.progress-bar--secondary .progress-bar__fill {
	background: linear-gradient(to right, #77abff, #3b82f6);
}

/* Error — 빨간 그라디언트 (Figma: #ff8282 → red-500) */
.progress-bar--error .progress-bar__fill {
	background: linear-gradient(to right, #ff8282, var(--red-500));
}


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

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

[data-theme="dark"] .progress-bar__label {
	color: var(--gray-400);
}