/* 메인 모달 팝업 — Bootstrap 3 모달(.modal)에 이미지 팝업 모양만 얹는다. 마크업은 site/default/main_popup.htm */

/* 사이트 헤더(z-index 10000)와 GNB(10002)가 Bootstrap 모달 기본값(배경막 1040·모달 1050)보다 높아 팝업을 가린다.
   배경막은 이 팝업이 열려 있는 동안(body.main-popup-open)만 올려 다른 모달에는 영향을 주지 않는다 */
.main-popup {
	z-index: 20010;
}
body.main-popup-open .modal-backdrop {
	z-index: 20000;
}

/* 폭은 이미지 크기만큼만 쓰고 화면보다 크면 화면 안으로 줄인다. 모바일(xs)은 Bootstrap 기본 여백 10px을 따른다 */
.main-popup .modal-dialog {
	display: table;
	width: auto;
	max-width: calc(100% - 20px);
	margin: 10px auto;
}
.main-popup .modal-content {
	border: 0;
	border-radius: 0;
	overflow: hidden;
}
.main-popup .modal-body {
	padding: 0;
}
/* 세로로 긴 이미지여도 하단 조작 줄(44px)이 화면 밖으로 밀려나지 않게 높이를 화면에 맞춘다. 비율은 유지된다
   (모달 위아래 여백 + 조작 줄 높이만큼을 뺀다. dvh 를 모르는 브라우저는 앞의 vh 값을 쓴다) */
.main-popup .modal-body img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 70px);
	max-height: calc(100dvh - 70px);
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* 하단 조작 줄: "오늘 하루 보지 않기"는 왼쪽, "닫기"는 오른쪽 */
.main-popup .main-popup__footer {
	display: flex;
	justify-content: space-between;
	padding: 0;
	border-top: 0;
	background: #222;
}
/* .modal-footer 의 clearfix 가상 요소가 flex 항목이 되어 버튼 간격을 나눠 가지는 것을 막는다 */
.main-popup .main-popup__footer::before,
.main-popup .main-popup__footer::after {
	display: none;
}
.main-popup__btn {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}
.main-popup__btn:hover {
	text-decoration: underline;
}
.main-popup__btn:focus-visible {
	outline: 2px solid #8FC649;
	outline-offset: -4px;
}

@media (min-width: 768px) {
	.main-popup .modal-dialog {
		margin: 30px auto;
	}
	.main-popup .modal-body img {
		max-height: calc(100vh - 110px);
		max-height: calc(100dvh - 110px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-popup.fade,
	.main-popup.fade .modal-dialog {
		transition: none;
	}
}