/*
 * 사이트 팝업 — 화면 가운데, 어두운 배경 위에 이미지 + 아래 막대(오늘 하루 보지 않기 · 닫기).
 * PC 는 여러 장을 나란히(폭이 모자라면 같이 줄어든다), 폰(767px 이하)은 한 장씩 — 닫으면 다음 장.
 * PC 는 사진 높이를 520px(낮은 화면은 화면 높이)로 맞추고 폭은 사진 비율(--bmp-ar)대로 — 여러 장이
 * 나란히 서도 막대 높이가 같다. 폭은 --bmp-w 를 넘지 않는다. 폰은 화면 폭에 맞추되 막대까지 한 화면에.
 * 테마·Elementor 버튼 스타일(hover 배경 등)을 이기도록 버튼은 .bmp-popups 아래에서 모두 다시 정한다.
 */
.bmp-popups {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px;
	background: rgba(0, 0, 0, 0.55);
}

.bmp-popups__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
}

.bmp-popup {
	--bmp-bar: 44px;
	flex: 0 1 auto;
	min-width: 0;
	width: min(var(--bmp-w, 520px), calc(min(520px, 100vh - 40px - var(--bmp-bar)) * var(--bmp-ar, 0.8)));
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.bmp-popup__link {
	display: block;
}

.bmp-popup .bmp-popup__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: calc(100vh - 40px - var(--bmp-bar));
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.bmp-popup__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--bmp-bar);
	padding: 0 14px;
	background: #222;
}

.bmp-popups .bmp-popup__btn,
.bmp-popups .bmp-popup__btn:hover,
.bmp-popups .bmp-popup__btn:focus {
	appearance: none;
	width: auto;
	height: var(--bmp-bar);
	min-height: 0;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: var(--bmp-bar);
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.bmp-popups .bmp-popup__btn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bmp-popups .bmp-popup__btn:focus {
	outline: none;
}

.bmp-popups .bmp-popup__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

@media (max-width: 767px) {
	.bmp-popups {
		padding: 16px;
	}

	.bmp-popup {
		width: min(440px, calc(100vw - 32px), calc((100vh - 32px - var(--bmp-bar)) * var(--bmp-ar, 10)));
		width: min(440px, calc(100vw - 32px), calc((100dvh - 32px - var(--bmp-bar)) * var(--bmp-ar, 10)));
	}

	.bmp-popup .bmp-popup__img {
		max-height: calc(100dvh - 32px - var(--bmp-bar));
	}

	.bmp-popup + .bmp-popup {
		display: none;
	}
}