/**
 * 공용 팝업 대화상자 (재사용 기반).
 *
 * 마크업: template-parts/base/dialog.php, 동작: assets/js/base/dialog.js
 * 값은 PC_03_menupopup(1920×1080)·MO_03_menupopup(390) 원본에서 측정했습니다([측정]).
 *
 * PC(1024px 이상): 왼쪽 사이드바와 오른쪽 패널 사이 콘텐츠 영역 위에 뜨는 팝업, 둘레 40px 여백, 뒤는 어둡게.
 *   [측정] 1920에서 x280~1399, y40~959, 모서리 16, 머리글 56
 * 모바일(1023px 이하): 전체 화면.
 * 머리글(제목 + 닫기)은 고정하고 본문만 스크롤합니다.
 *
 * @package udongsari
 */

.uds-base-dialog {
	--dialog-gap: var(--space-10); /* [측정] 팝업 둘레 여백 40px */

	position: fixed;
	inset: calc(var(--uds-base-admin-bar-h, 0px) + var(--dialog-gap)) calc(var(--panel-w) + var(--dialog-gap)) calc(var(--footer-h) + var(--dialog-gap)) calc(var(--sidebar-w) + var(--dialog-gap));
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-lg); /* [측정] 16px */
	background-color: var(--color-surface);
	color: var(--color-text-strong);
}

.uds-base-dialog[open] {
	display: flex;
	flex-direction: column;
}

.uds-base-dialog::backdrop {
	background-color: var(--color-dim);
}

.uds-base-dialog__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: 56px; /* [측정] */
	padding: 0 18px 0 var(--space-5); /* 오른쪽은 닫기 아이콘 가운데가 끝에서 40px [측정] */
	background-color: var(--color-surface);
}

.uds-base-dialog__title {
	min-width: 0;
	margin: 0;
	color: var(--color-text-strong);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: normal;
	overflow-wrap: anywhere;
}

.uds-base-dialog__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-strong);
	cursor: pointer;
}

.uds-base-dialog__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 본문 아래 고정 영역(선택) */
.uds-base-dialog__footer {
	flex: none;
}

/* ---------- 모바일 (1023px 이하): 전체 화면 ---------- */

@media (max-width: 1023px) {
	.uds-base-dialog {
		inset: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	/* 화면 전체를 덮으므로 어두운 막은 쓰지 않습니다. */
	.uds-base-dialog::backdrop {
		background: transparent;
	}

	.uds-base-dialog__header {
		padding: env(safe-area-inset-top, 0px) max(18px, env(safe-area-inset-right, 0px)) 0 max(var(--space-5), env(safe-area-inset-left, 0px));
		min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	}

	.uds-base-dialog__title {
		font-size: var(--fs-xl); /* [측정] 20px */
	}

	.uds-base-dialog__body {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
}