/* ==========================================================================
   MODULE: components/modal (.wzs-modal-overlay + .wzs-modal + .wzs-modal-close)
   범용 모달/라이트박스. data-wzs-modal-open="{key}" 트리거 클릭 시
   data-wzs-modal="{key}" 오버레이를 띄움 (assets/js/modules/modal.js).
   닫기 버튼은 스크롤 중에도 항상 보이도록 sticky 처리.
   ========================================================================== */

.wzs-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wzs-space-4);
	background: rgba(16, 24, 40, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-modal-overlay[hidden] {
	display: none;
}

.wzs-modal-overlay.is-open {
	opacity: 1;
}

.wzs-modal {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--wzs-white);
	border-radius: var(--wzs-radius-lg);
	box-shadow: var(--wzs-shadow-lg);
	transform: translateY(16px) scale(0.98);
	transition: transform var(--wzs-duration-base) var(--wzs-ease);
}

.wzs-modal-overlay.is-open .wzs-modal {
	transform: translateY(0) scale(1);
}

.wzs-modal-close {
	position: sticky;
	top: 0;
	z-index: 5;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--wzs-space-2) var(--wzs-space-3);
	background: var(--wzs-ink);
	color: var(--wzs-white);
	font-weight: 700;
	font-size: var(--wzs-fs-sm);
	border-radius: 0 var(--wzs-radius-lg) 0 var(--wzs-radius-md);
	box-shadow: var(--wzs-shadow-sm);
	transition: background var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-modal-close:hover {
	background: var(--wzs-ink-soft);
}

.wzs-modal-close svg {
	width: 16px;
	height: 16px;
}

.wzs-modal-body {
	padding: 0 var(--wzs-space-5) var(--wzs-space-5);
}

.wzs-modal-body .wzs-report-preview {
	border: none;
	box-shadow: none;
	padding: 0;
}

@media (max-width: 640px) {
	.wzs-modal-body {
		padding: 0 var(--wzs-space-3) var(--wzs-space-4);
	}
}