/* ============================================================
	drawer.css
	Hyomin Design System v1.0 — Drawer Component

	사용법:
	<div class="drawer" id="my-drawer" hidden>
		<div class="drawer__backdrop"></div>
		<div class="drawer__panel">
			<div class="drawer__header">
				<h2 class="drawer__title">Title</h2>
				<button class="drawer__close" aria-label="닫기"></button>
			</div>
			<div class="drawer__body">내용</div>
			<div class="drawer__footer">
				<button class="button button--secondary button--sm">취소</button>
				<button class="button button--primary button--sm">저장하기</button>
			</div>
		</div>
	</div>

	<button data-drawer-open="my-drawer">드로어 열기</button>

	Footer는 선택 사항 — 없으면 .drawer__footer 제거
	============================================================ */

.drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}

.drawer[hidden] {
	display: none;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--easing-default);
}

.drawer.is-open .drawer__backdrop {
	opacity: 1;
}

/* ─── Panel ─── */

.drawer__panel {
	position: relative;
	z-index: 1;
	width: 480px;
	max-width: 100%;
	background-color: #ffffff;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.drawer .drawer__panel {
	transform: translateX(100%);
	transition: transform var(--duration-slow) var(--easing-default);
}

.drawer.is-open .drawer__panel {
	transform: translateX(0);
}

/* ─── Header ─── */

.drawer__header {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	height: 64px;
	padding: 0 var(--spacing-6);
	border-bottom: var(--border-width) solid var(--border-color);
	flex-shrink: 0;
}

.drawer__title {
	flex: 1;
	font-family: var(--font-primary);
	font-size: var(--font-size-title03);
	font-weight: var(--font-weight-bold);
	color: var(--gray-900);
	line-height: 1;
}

.drawer__close {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	font-size: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L17 17' stroke='%23111827' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M17 7L7 17' stroke='%23111827' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform var(--duration-base) var(--easing-default);
}

.drawer__close:hover {
	transform: rotate(270deg);
}

.drawer__close:focus-visible {
	outline: 3px solid var(--color-accent-main);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ─── Body ─── */

.drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--spacing-6);
	min-height: 0;
}

/* ─── Footer ─── */

.drawer__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: var(--spacing-4) var(--spacing-6);
	border-top: var(--border-width) solid var(--border-color);
	flex-shrink: 0;
}

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

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

[data-theme="dark"] .drawer__header {
	border-bottom-color: var(--gray-700);
}

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

[data-theme="dark"] .drawer__close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L17 17' stroke='%23f3f4f6' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M17 7L7 17' stroke='%23f3f4f6' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .drawer__footer {
	border-top-color: var(--gray-700);
}