/**
 * 팝업 모달 스타일 (메인페이지 popup-subscribe.css 와 동일 패턴)
 * - .modal_popup: 오버레이 (기본 숨김, .on 클래스 시 표시)
 * - .popup: 본문 박스 (중앙 정렬, 반응형)
 * - .popup-image / .popup-content / .popup-link: 선택적 노출
 * - .control: 하단 버튼 영역 (오늘 하루 보지 않음 / 닫기)
 *
 * 반응형 패턴 (1920 시안 기준):
 * - ≥1920px : 모든 px 값 그대로 (관리자 선택값)
 * - 1919-768: calc(100vw * X / 1920) 로 모든 치수 비례 축소 (폰트, padding, 이미지 등)
 * - <768px  : 모바일 전용 고정 px 값 (가독성 확보)
 *
 * --popup-base-width: PHP에서 주입되는 unitless 기준값 (1920 시안 기준 px)
 *                     예: 500 → 1920+ 에서 500px, 1440에서 375px
 */

/* 공통 딤 오버레이: 팝업이 하나라도 열려있으면 표시 */
#popup-dim-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, 0.55);
	display: none;
}

#popup-dim-overlay.show {
	display: block;
}

.modal_popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	display: none;
	padding: 0;
	box-sizing: border-box;
	/* ≥1920 기본: base_px 절대값 */
	--popup-width: calc(var(--popup-base-width, 500) * 1px);
}

.modal_popup.on {
	display: block;
}

.modal_popup .popup {
	position: relative;
	width: 100%;
	max-width: min(90vw, var(--popup-width));
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
	animation: popupFadeIn 0.25s ease-out;
}

@keyframes popupFadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/**
 * 여백 체계 (PC 1920+ 기준):
 * - 콘텐츠 영역 상/하단 24px, 좌우 28px
 * - 콘텐츠 요소 간 gap: 16px
 * - 이미지는 전체 너비 (좌우 0, 상단 0)
 */

.modal_popup .popup-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 50vh;
	object-fit: contain;
	margin: 0;
}

/* 이미지 크기 프리셋 (icon/small/normal: 가운데 정렬 + 상단 24, full: 풀폭) */
.modal_popup .popup-image--icon   { max-width: 56px;  margin: 24px auto 0; }
.modal_popup .popup-image--small  { max-width: 160px; margin: 24px auto 0; }
.modal_popup .popup-image--normal { max-width: 280px; margin: 24px auto 0; }
.modal_popup .popup-image--full   { max-width: none;  margin: 0; }

.modal_popup .popup-title {
	margin: 0;
	padding: 24px 28px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #111;
	text-align: center;
	word-break: keep-all;
}

.modal_popup .popup-content {
	padding: 16px 28px 0;
	font-size: 14px;
	line-height: 1.55;
	color: #444;
	word-break: keep-all;
}

.modal_popup .popup-image + .popup-content,
.modal_popup .popup > .popup-content:first-child {
	padding-top: 24px;
}

.modal_popup .popup-content h1,
.modal_popup .popup-content h2,
.modal_popup .popup-content h3,
.modal_popup .popup-content h4 {
	margin-top: 0;
	margin-bottom: 12px;
	font-weight: 600;
}

.modal_popup .popup-content p {
	margin: 0 0 12px;
}

.modal_popup .popup-content p:last-child {
	margin-bottom: 0;
}

.modal_popup .popup-content ul,
.modal_popup .popup-content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.modal_popup .popup-content a {
	color: #0066cc;
	text-decoration: underline;
}

.modal_popup .popup-link {
	display: block;
	margin: 16px 28px 0;
	padding: 12px 20px;
	background: #111;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s;
}

.modal_popup .popup-image + .popup-link,
.modal_popup .popup > .popup-link:first-child {
	margin-top: 24px;
}

.modal_popup .popup-link:hover {
	background: #333;
	color: #fff;
	text-decoration: none;
}

.modal_popup .control {
	display: flex;
	width: 100%;
	margin-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.modal_popup .control button {
	flex: 1;
	min-height: 40px;
	padding: 10px;
	border: 0;
	background: #f5f5f5;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.modal_popup .control button:hover {
	background: #ebebeb;
}

.modal_popup .control button + button {
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.modal_popup .control .close {
	font-weight: 600;
}

/**
 * 1181-1919px: 1920 시안 기준 비율 축소
 * (cookie popup / 메인 솔루션 섹션과 동일 패턴)
 */
@media (max-width: 1919px) and (min-width: 1181px) {
	.modal_popup {
		--popup-width: calc(100vw * var(--popup-base-width, 500) / 1920);
	}

	.modal_popup .popup-image--icon   { max-width: calc(100vw * 56 / 1920);  margin: calc(100vw * 24 / 1920) auto 0; }
	.modal_popup .popup-image--small  { max-width: calc(100vw * 160 / 1920); margin: calc(100vw * 24 / 1920) auto 0; }
	.modal_popup .popup-image--normal { max-width: calc(100vw * 280 / 1920); margin: calc(100vw * 24 / 1920) auto 0; }

	.modal_popup .popup-title {
		padding: calc(100vw * 24 / 1920) calc(100vw * 28 / 1920) 0;
		font-size: calc(100vw * 18 / 1920);
	}

	.modal_popup .popup-content {
		padding: calc(100vw * 16 / 1920) calc(100vw * 28 / 1920) 0;
		font-size: calc(100vw * 14 / 1920);
	}

	.modal_popup .popup-image + .popup-content,
	.modal_popup .popup > .popup-content:first-child {
		padding-top: calc(100vw * 24 / 1920);
	}

	.modal_popup .popup-content h1,
	.modal_popup .popup-content h2,
	.modal_popup .popup-content h3,
	.modal_popup .popup-content h4 {
		margin-bottom: calc(100vw * 12 / 1920);
	}

	.modal_popup .popup-content p {
		margin: 0 0 calc(100vw * 12 / 1920);
	}

	.modal_popup .popup-content ul,
	.modal_popup .popup-content ol {
		margin: 0 0 calc(100vw * 12 / 1920);
		padding-left: calc(100vw * 20 / 1920);
	}

	.modal_popup .popup-link {
		margin: calc(100vw * 16 / 1920) calc(100vw * 28 / 1920) 0;
		padding: calc(100vw * 12 / 1920) calc(100vw * 20 / 1920);
		border-radius: calc(100vw * 6 / 1920);
		font-size: calc(100vw * 14 / 1920);
	}

	.modal_popup .popup-image + .popup-link,
	.modal_popup .popup > .popup-link:first-child {
		margin-top: calc(100vw * 24 / 1920);
	}

	.modal_popup .control {
		margin-top: calc(100vw * 24 / 1920);
	}

	.modal_popup .control button {
		min-height: calc(100vw * 40 / 1920);
		padding: calc(100vw * 10 / 1920);
		font-size: calc(100vw * 13 / 1920);
	}
}

/**
 * 768-1180px: 1180 기준으로 리바운드 + 재축소
 * 1180vw 진입 시 모든 치수가 100% 크기로 복귀했다가 768까지 다시 비례 축소
 * (cookie popup / 메인 솔루션 섹션과 동일 패턴)
 * min-width: 768 로 모바일 영역에 침범하지 않도록 제한
 */
@media (max-width: 1180px) and (min-width: 768px) {
	.modal_popup {
		--popup-width: calc(100vw * var(--popup-base-width, 500) / 1180);
	}

	.modal_popup .popup-image--icon   { max-width: calc(100vw * 56 / 1180);  margin: calc(100vw * 24 / 1180) auto 0; }
	.modal_popup .popup-image--small  { max-width: calc(100vw * 160 / 1180); margin: calc(100vw * 24 / 1180) auto 0; }
	.modal_popup .popup-image--normal { max-width: calc(100vw * 280 / 1180); margin: calc(100vw * 24 / 1180) auto 0; }

	.modal_popup .popup-title {
		padding: calc(100vw * 24 / 1180) calc(100vw * 28 / 1180) 0;
		font-size: calc(100vw * 18 / 1180);
	}

	.modal_popup .popup-content {
		padding: calc(100vw * 16 / 1180) calc(100vw * 28 / 1180) 0;
		font-size: calc(100vw * 14 / 1180);
	}

	.modal_popup .popup-image + .popup-content,
	.modal_popup .popup > .popup-content:first-child {
		padding-top: calc(100vw * 24 / 1180);
	}

	.modal_popup .popup-content h1,
	.modal_popup .popup-content h2,
	.modal_popup .popup-content h3,
	.modal_popup .popup-content h4 {
		margin-bottom: calc(100vw * 12 / 1180);
	}

	.modal_popup .popup-content p {
		margin: 0 0 calc(100vw * 12 / 1180);
	}

	.modal_popup .popup-content ul,
	.modal_popup .popup-content ol {
		margin: 0 0 calc(100vw * 12 / 1180);
		padding-left: calc(100vw * 20 / 1180);
	}

	.modal_popup .popup-link {
		margin: calc(100vw * 16 / 1180) calc(100vw * 28 / 1180) 0;
		padding: calc(100vw * 12 / 1180) calc(100vw * 20 / 1180);
		border-radius: calc(100vw * 6 / 1180);
		font-size: calc(100vw * 14 / 1180);
	}

	.modal_popup .popup-image + .popup-link,
	.modal_popup .popup > .popup-link:first-child {
		margin-top: calc(100vw * 24 / 1180);
	}

	.modal_popup .control {
		margin-top: calc(100vw * 24 / 1180);
	}

	.modal_popup .control button {
		min-height: calc(100vw * 40 / 1180);
		padding: calc(100vw * 10 / 1180);
		font-size: calc(100vw * 13 / 1180);
	}
}

/**
 * 모바일(<768px): 고정 px 값으로 가독성 확보
 * 4코너 위치는 무시되지 않고 인라인 width 가 그대로 적용되지만,
 * --popup-width 가 base_px 으로 복귀하므로 min(viewport-margin, base) 로 안전하게 fit
 */
@media (max-width: 767px) {
	.modal_popup {
		width: calc(100% - 32px);
	}

	.modal_popup .popup {
		max-width: 100%;
	}

	.modal_popup .popup-image--icon   { max-width: 56px;  margin: 20px auto 0; }
	.modal_popup .popup-image--small  { max-width: 160px; margin: 20px auto 0; }
	.modal_popup .popup-image--normal { max-width: 240px; margin: 20px auto 0; }

	.modal_popup .popup-title {
		padding: 20px 20px 0;
		font-size: 16px;
	}

	.modal_popup .popup-content {
		padding: 14px 20px 0;
		font-size: 13px;
	}

	.modal_popup .popup-image + .popup-content,
	.modal_popup .popup > .popup-content:first-child {
		padding-top: 20px;
	}

	.modal_popup .popup-link {
		margin: 14px 20px 0;
		padding: 10px 16px;
		font-size: 13px;
	}

	.modal_popup .popup-image + .popup-link,
	.modal_popup .popup > .popup-link:first-child {
		margin-top: 20px;
	}

	.modal_popup .control {
		margin-top: 20px;
	}

	.modal_popup .control button {
		min-height: 40px;
		padding: 9px;
		font-size: 12px;
	}
}