/* ============================================================
	empty-state.css
	Hyomin Design System v1.0 — Empty State Component

	사용법:
	<div class="empty-state">
	  <div class="empty-state__icon-wrap empty-state__icon-wrap--no-result">
	    <svg class="empty-state__icon">...</svg>
	  </div>
	  <div class="empty-state__text">
	    <p class="empty-state__title">검색 결과가 없어요</p>
	    <p class="empty-state__desc">다른 키워드로 검색해 보세요</p>
	  </div>
	  <button class="empty-state__btn">검색 초기화</button>
	</div>
	============================================================ */

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-4); /* 16px */
	padding: var(--spacing-8) var(--spacing-6); /* 32px 24px */
	text-align: center;
	max-width: 800px;
	width: 100%;
}

/* ─── Icon Wrap ─── */
.empty-state__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: var(--radius-lg); /* 12px */
	flex-shrink: 0;
}

.empty-state__icon-wrap--no-result       { background-color: var(--blue-50);  }
.empty-state__icon-wrap--no-data         { background-color: var(--green-50); }
.empty-state__icon-wrap--no-network      { background-color: var(--gray-100); }
.empty-state__icon-wrap--no-notification { background-color: var(--green-50); }

/* ─── Icon ─── */
.empty-state__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
}

/* ─── Text ─── */
.empty-state__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.empty-state__title {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px */
	font-weight: var(--font-weight-bold);
	color: var(--gray-700);
	line-height: 1.5;
}

.empty-state__desc {
	font-family: var(--font-secondary);
	font-size: var(--font-size-label); /* 14px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-400);
	line-height: 1.5;
}

/* ─── Button ─── */
.empty-state__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-width: 120px;
	padding: 0 var(--spacing-2); /* 0 8px */
	background-color: var(--color-primary-main);
	border: none;
	border-radius: var(--radius-md); /* 8px */
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px */
	font-weight: var(--font-weight-regular);
	color: #ffffff;
	cursor: pointer;
	transition: background-color var(--duration-base) var(--easing-default);
	white-space: nowrap;
}

.empty-state__btn:hover {
	background-color: var(--color-primary-hover);
}

.empty-state__btn:focus-visible {
	outline: 2px solid var(--color-accent-main);
	outline-offset: 2px;
}

/* ─── Responsive ─── */
/* Tablet: 480~767px */
@media (max-width: 767px) {
	.empty-state__icon-wrap {
		width: 72px;
		height: 72px;
	}

	.empty-state__icon {
		width: 48px;
		height: 48px;
	}

	.empty-state__title {
		font-size: var(--font-size-body-sm); /* 16px */
	}
}

/* Mobile: ~479px */
@media (max-width: 479px) {
	.empty-state__icon-wrap {
		width: 56px;
		height: 56px;
	}

	.empty-state__icon {
		width: 37px;
		height: 37px;
	}

	.empty-state__btn {
		width: 100%;
	}
}

/* ─── Dark mode ─── */
[data-theme="dark"] .empty-state__title {
	color: var(--gray-200);
}

[data-theme="dark"] .empty-state__desc {
	color: var(--gray-500);
}

[data-theme="dark"] .empty-state__icon-wrap--no-result {
	background-color: var(--blue-900);
}

[data-theme="dark"] .empty-state__icon-wrap--no-data,
[data-theme="dark"] .empty-state__icon-wrap--no-notification {
	background-color: var(--green-900);
}

[data-theme="dark"] .empty-state__icon-wrap--no-network {
	background-color: var(--gray-700);
}