/* 팝업 오버레이·대화상자·하단 버튼 (TRD §5.1). 캔버스 스타일은 shared/canvas.css. */

.oucc-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--oucc-z, 99999);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--oucc-overlay, rgba(0, 0, 0, 0.55));
	opacity: 0;
	transition: opacity 0.2s ease;
}

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

.oucc-overlay.is-open {
	opacity: 1;
}

.oucc-dialog {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	outline: none;
	transform: translateY(8px);
	transition: transform 0.2s ease;
}

.oucc-overlay.is-open .oucc-dialog {
	transform: none;
}

/* ----- 팝업 위치 (brand-popup과 같은 모델) -----
   PC: 9방향. 가장자리 쪽 오프셋은 화면 가장자리(기본 여백 16px)에서 안쪽으로의 거리,
   가운데 축 오프셋은 그 방향으로의 이동. `translate` 속성을 써서 열기 애니메이션(transform)과 겹치지 않게 한다. */
.oucc-pos-topleft,
.oucc-pos-topcenter,
.oucc-pos-topright {
	align-items: flex-start;
}

.oucc-pos-bottomleft,
.oucc-pos-bottomcenter,
.oucc-pos-bottomright {
	align-items: flex-end;
}

.oucc-pos-topleft,
.oucc-pos-centerleft,
.oucc-pos-bottomleft {
	justify-content: flex-start;
}

.oucc-pos-topright,
.oucc-pos-centerright,
.oucc-pos-bottomright {
	justify-content: flex-end;
}

.oucc-overlay .oucc-dialog {
	translate: var(--oucc-dx, 0px) var(--oucc-dy, 0px);
}

/* 가로: 왼쪽·가운데 = +X, 오른쪽 = −X (안쪽으로) / 세로: 위·가운데 = +Y, 아래 = −Y */
.oucc-overlay {
	--oucc-dx: var(--oucc-ox, 0px);
	--oucc-dy: var(--oucc-oy, 0px);
}

.oucc-pos-topright,
.oucc-pos-centerright,
.oucc-pos-bottomright {
	--oucc-dx: calc(var(--oucc-ox, 0px) * -1);
}

.oucc-pos-bottomleft,
.oucc-pos-bottomcenter,
.oucc-pos-bottomright {
	--oucc-dy: calc(var(--oucc-oy, 0px) * -1);
}

/* 모바일: 가로는 항상 가운데, 세로만 상·중·하. PC 오프셋은 적용하지 않는다. */
@media (max-width: 767px) {
	.oucc-overlay.oucc-overlay {
		justify-content: center;
		--oucc-dx: 0px;
		--oucc-dy: 0px;
	}

	.oucc-overlay.oucc-mpos-top {
		align-items: flex-start;
	}

	.oucc-overlay.oucc-mpos-center {
		align-items: center;
	}

	.oucc-overlay.oucc-mpos-bottom {
		align-items: flex-end;
	}
}

.oucc-actions {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin-top: 8px;
}

.oucc-actions button {
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: rgba(17, 17, 17, 0.78);
	color: #fff;
	font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}

.oucc-actions button:hover {
	background: rgba(17, 17, 17, 0.92);
}

.oucc-actions button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.oucc-actions .oucc-close {
	margin-left: auto;
}

.oucc-inline {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.oucc-inline .oucc-fallback {
	width: 100%;
	border-collapse: collapse;
}

@media (prefers-reduced-motion: reduce) {
	.oucc-overlay,
	.oucc-dialog {
		transition: none;
	}
}