/* ============================================
   Dermaking 메인 팝업
   - 나란히(multi) / 슬라이드(slide) 두 가지 표시 방식
   - 색상은 사이트 공통 톤(#B08D57 / #2A2419 / #F3EDE4)에 맞춤
   ============================================ */

.dm-popup-root[hidden] { display: none !important; }

.dm-popup-root {
	position: relative;
	z-index: 9500;
}

/* 슬라이드 방식에서만 뒤를 어둡게 깐다 */
.dm-popup-dim {
	position: fixed;
	inset: 0;
	background: rgba(42, 36, 25, 0.55);
	backdrop-filter: blur(3px);
	z-index: 9500;
}

/* ── 팝업 상자 ── */
.dm-popup {
	width: var(--dm-width, 400px);
	max-width: calc(100vw - 32px);
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(42, 36, 25, 0.28);
	animation: dm-popup-in 0.28s ease-out both;
}

@keyframes dm-popup-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dm-popup-body { display: block; line-height: 0; }
.dm-popup-body img { width: 100%; height: auto; display: block; }
.dm-popup-body a { display: block; }

/* ── 하단 버튼 줄 ── */
.dm-popup-foot {
	display: flex;
	align-items: stretch;
	background: #2A2419;
}

.dm-popup-foot button {
	flex: 1 1 auto;
	padding: 13px 10px;
	border: 0;
	background: transparent;
	color: #F3EDE4;
	font-size: 14px;
	font-family: inherit;
	letter-spacing: -0.02em;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.dm-popup-foot button:hover,
.dm-popup-foot button:focus {
	background: rgba(176, 141, 87, 0.28);
	color: #fff;
	outline: none;
}

.dm-popup-foot .dm-popup-close {
	flex: 0 0 96px;
	border-left: 1px solid rgba(243, 237, 228, 0.22);
	font-weight: 600;
	color: #B08D57;
}

/* ============================================
   1) 나란히 여러 개 — 관리자가 지정한 위치에 각각 고정
   ============================================ */
.dm-popup-root:not(.dm-popup-slide-mode) .dm-popup {
	position: fixed;
	top: var(--dm-top, 120px);
	left: var(--dm-left, 60px);
	z-index: 9500;
}

/* ============================================
   2) 하나씩 슬라이드 — 화면 가운데 한 장씩
   ============================================ */
.dm-popup-slide-mode .dm-popup-stage {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9501;
	pointer-events: none;
}

.dm-popup-slide-mode .dm-popup {
	display: none;
	pointer-events: auto;
}

.dm-popup-slide-mode .dm-popup.is-current { display: block; }

.dm-popup-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #2A2419;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: background 0.2s;
}

.dm-popup-nav:hover { background: #B08D57; color: #fff; }
.dm-popup-prev { left: calc(50% - var(--dm-stage-half, 260px)); }
.dm-popup-next { right: calc(50% - var(--dm-stage-half, 260px)); }

/* 한 장뿐이면 화살표와 점을 숨긴다 */
.dm-popup-slide-mode.dm-single .dm-popup-nav,
.dm-popup-slide-mode.dm-single .dm-popup-dots { display: none; }

.dm-popup-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 28px;
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

.dm-popup-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.dm-popup-dots button.is-current { background: #B08D57; }

/* ============================================
   모바일 — 위치 값은 무시하고 가운데 정렬
   ============================================ */
@media (max-width: 768px) {
	.dm-popup-root:not(.dm-popup-slide-mode) .dm-popup-stage {
		position: fixed;
		inset: 0;
		z-index: 9501;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
		padding: 24px 16px;
		overflow-y: auto;
		pointer-events: none;
	}

	/* 여러 개일 때 모바일에서는 세로로 쌓아 스크롤 */
	.dm-popup-root:not(.dm-popup-slide-mode) .dm-popup {
		position: relative;
		top: auto;
		left: auto;
		flex: 0 0 auto;
		pointer-events: auto;
	}

	.dm-popup {
		width: min(90vw, 400px);
		max-width: 90vw;
		border-radius: 12px;
	}

	.dm-popup-nav { width: 38px; height: 38px; font-size: 15px; }
	.dm-popup-prev { left: 10px; }
	.dm-popup-next { right: 10px; }
	.dm-popup-dots { bottom: 16px; }

	.dm-popup-foot button { padding: 14px 8px; font-size: 13px; }
	.dm-popup-foot .dm-popup-close { flex-basis: 80px; }
}