/* ============================================================
	file-upload.css
	Hyomin Design System v1.0 — File Upload Component

	컴포넌트:
	- .file-upload              — 전체 래퍼 카드
	- .file-upload__header      — 제목 + 설명 헤더 영역
	- .file-upload__title       — 제목 (18px Bold)
	- .file-upload__subtitle    — 설명 (16px Regular, gray-500)
	- .file-upload__body        — 내용 영역
	- .file-upload__input       — 숨김 file input
	- .file-upload__dropzone    — 드래그앤드롭 영역 (클릭 트리거)
	- .file-upload__dropzone--active — 드래그 오버 상태
	- .file-upload__icon        — 드롭존 아이콘
	- .file-upload__hint        — 드롭존 안내 텍스트 묶음
	- .file-upload__hint-main   — 주 안내 문구
	- .file-upload__hint-link   — "클릭해서 업로드" 강조
	- .file-upload__hint-sub    — 파일 형식 안내 (gray-400)
	- .file-upload__list        — 선택된 파일 목록 (ul)
	- .file-upload__item        — 파일 항목 (li)
	- .file-upload__item-ext    — 확장자 배지
	- .file-upload__item-name   — 파일명 (말줄임 처리)
	- .file-upload__item-size   — 파일 크기
	- .file-upload__item-remove — 개별 삭제 버튼
	- .file-upload__status      — 업로드 결과 / 오류 메시지
	- .file-upload__status--error — 오류 상태
	- .file-upload__actions     — 버튼 행 (우측 정렬)
	- .file-upload__btn         — 공통 액션 버튼
	- .file-upload__btn--clear  — 전체 삭제 (secondary)
	- .file-upload__btn--upload — 파일 업로드 (primary)
	============================================================ */


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

.file-upload {
	width: 100%;
	background-color: #ffffff;
	border: var(--border-width) solid var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
}


/* ─────────────────────────────────────────
	Header
	───────────────────────────────────────── */

.file-upload__header {
	padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */
	border-bottom: var(--border-width) solid var(--gray-200);
}

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

.file-upload__subtitle {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-500);
	line-height: 27px;
}


/* ─────────────────────────────────────────
	Body
	───────────────────────────────────────── */

.file-upload__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3); /* 12px */
	padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */
}


/* ─────────────────────────────────────────
	Hidden Input
	───────────────────────────────────────── */

.file-upload__input {
	display: none;
}


/* ─────────────────────────────────────────
	Dropzone
	───────────────────────────────────────── */

.file-upload__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-5); /* 20px */
	height: 153px;
	border: 2px dashed var(--gray-300);
	border-radius: var(--radius-lg);
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--easing-default),
		background-color var(--duration-fast) var(--easing-default);
	outline: none;
}

.file-upload__dropzone:hover,
.file-upload__dropzone:focus-visible {
	border-color: var(--green-400);
	background-color: var(--green-50);
}

/* 드래그 오버 상태 */
.file-upload__dropzone--active {
	border-color: var(--green-500);
	background-color: var(--green-50);
}

.file-upload__icon {
	font-size: 32px;
	line-height: 1;
}

.file-upload__hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.file-upload__hint-main {
	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: 27px;
}

.file-upload__hint-link {
	font-weight: var(--font-weight-medium);
	color: var(--green-500); /* Figma: #22c55e */
}

.file-upload__hint-sub {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-medium);
	color: var(--gray-400);
	line-height: 27px;
}


/* ─────────────────────────────────────────
	File List
	───────────────────────────────────────── */

.file-upload__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.file-upload__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-3);
	background-color: var(--gray-50);
	border: var(--border-width) solid var(--gray-200);
	border-radius: var(--radius-md);
}

.file-upload__item-ext {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 2px var(--spacing-1);
	font-family: var(--font-secondary);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.file-upload__item-ext--img {
	background-color: var(--green-100);
	color: var(--green-700);
}

.file-upload__item-ext--pdf {
	background-color: var(--red-100);
	color: var(--red-700);
}

.file-upload__item-ext--default {
	background-color: var(--gray-200);
	color: var(--gray-600);
}

.file-upload__item-name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.file-upload__item-size {
	flex-shrink: 0;
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-400);
}

.file-upload__item-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 16px;
	line-height: 1;
	color: var(--gray-400);
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color var(--duration-fast), background-color var(--duration-fast);
}

.file-upload__item-remove:hover {
	color: var(--color-accent-main);
	background-color: var(--red-50);
}


/* ─────────────────────────────────────────
	Status / Error Message
	───────────────────────────────────────── */

.file-upload__status {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--color-primary-dark);
	padding: var(--spacing-2) var(--spacing-3);
	background-color: var(--green-50);
	border-radius: var(--radius-md);
}

.file-upload__status--error {
	color: var(--color-error-main);
	background-color: var(--red-50);
}


/* ─────────────────────────────────────────
	Actions
	───────────────────────────────────────── */

.file-upload__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-1); /* 4px — Figma */
}

.file-upload__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 32px;
	padding: var(--spacing-1) var(--spacing-2); /* 4px 8px */
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--easing-default);
}

.file-upload__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 전체 삭제 — secondary (Figma: #0b78cb = blue-500) */
.file-upload__btn--clear {
	background-color: var(--color-secondary-main);
}

.file-upload__btn--clear:hover:not(:disabled) {
	background-color: var(--color-secondary-hover);
}

/* 파일 업로드 — primary (Figma: #22c55e = green-500) */
.file-upload__btn--upload {
	background-color: var(--color-primary-main);
}

.file-upload__btn--upload:hover:not(:disabled) {
	background-color: var(--color-primary-hover);
}


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

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

[data-theme="dark"] .file-upload__header {
	border-color: var(--gray-600);
}

[data-theme="dark"] .file-upload__title {
	color: var(--gray-100);
}

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

[data-theme="dark"] .file-upload__dropzone {
	border-color: var(--gray-600);
}

[data-theme="dark"] .file-upload__dropzone:hover,
[data-theme="dark"] .file-upload__dropzone:focus-visible,
[data-theme="dark"] .file-upload__dropzone--active {
	border-color: var(--green-500);
	background-color: var(--green-900);
}

[data-theme="dark"] .file-upload__hint-main {
	color: var(--gray-200);
}

[data-theme="dark"] .file-upload__hint-sub {
	color: var(--gray-500);
}

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

[data-theme="dark"] .file-upload__item-name {
	color: var(--gray-200);
}

[data-theme="dark"] .file-upload__item-ext--img {
	background-color: var(--green-900);
	color: var(--green-300);
}

[data-theme="dark"] .file-upload__item-ext--pdf {
	background-color: var(--red-900);
	color: var(--red-300);
}

[data-theme="dark"] .file-upload__item-ext--default {
	background-color: var(--gray-600);
	color: var(--gray-300);
}

[data-theme="dark"] .file-upload__status {
	background-color: var(--green-900);
	color: var(--green-300);
}

[data-theme="dark"] .file-upload__status--error {
	background-color: var(--red-900);
	color: var(--red-300);
}