/**
 * 확인창 (재사용 기반).
 *
 * 값은 PC_05_ORDER_ConfirmCase(작성 중인 주문서를 닫을 때) 원본에서 측정했습니다([측정]).
 *   상자 320px, 1px 회색 테두리 + 그림자, 제목 18px, 설명 16px, 버튼 120×40 두 개.
 *
 * @package udongsari
 */

.uds-base-confirm {
	width: min(320px, calc(100% - 2 * var(--space-5)));
	max-width: none;
	margin: auto;
	padding: var(--space-6) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: 10px; /* [측정] 약 10px(단계 토큰에 없는 값, 명세 토큰 주석의 확인창 항목) */
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
	text-align: center;
}

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

.uds-base-confirm__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	word-break: keep-all;
}

.uds-base-confirm__message {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	word-break: keep-all;
}

.uds-base-confirm__message:empty {
	display: none;
}

.uds-base-confirm__actions {
	display: flex;
	gap: 6px; /* [측정] */
	justify-content: center;
	margin-top: var(--space-6);
}

.uds-base-confirm__button {
	flex: 0 1 120px;
	min-height: 40px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-primary);
	border-radius: 0;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	cursor: pointer;
}

.uds-base-confirm__button--cancel {
	border-color: var(--color-text-subtle);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* PC(1024px 이상): 화면 전체가 아니라 가운데 콘텐츠 영역(사이드바·오른쪽 패널·푸터 사이)의 한가운데에 둡니다
 * [측정 PC_05_ORDER_Confirm: 상자 가운데 x840·y500 = 1920 화면에서 사이드바 240~패널 1440, 위 0~푸터 1000의 가운데].
 * 사이트별 레이아웃 변수(--sidebar-w·--panel-w·--footer-h)가 없으면 화면 가운데입니다. */
@media (min-width: 1024px) {
	.uds-base-confirm {
		inset: var(--uds-base-admin-bar-h, 0px) var(--panel-w, 0px) var(--footer-h, 0px) var(--sidebar-w, 0px);
		height: fit-content;
	}
}