/* MAJU 팝업 — 가운데 모달 */

html.mpp-lock{overflow:hidden}

.mpp{
	position:fixed;inset:0;z-index:100100;
	display:flex;align-items:center;justify-content:center;
	padding:16px;box-sizing:border-box;
	opacity:0;transition:opacity .2s ease;
	font-family:inherit;
}
.mpp.is-open{opacity:1}
.mpp *,.mpp *::before,.mpp *::after{box-sizing:border-box}

.mpp-dim{position:absolute;inset:0;background:rgba(0,0,0,var(--mpp-dim,.5))}

.mpp-dialog{
	position:relative;display:flex;flex-direction:column;
	width:min(var(--mpp-w,500px),100%);
	max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
	background:#fff;border-radius:10px;overflow:hidden;
	box-shadow:0 22px 60px rgba(0,0,0,.32);outline:none;
	transform:translateY(10px);transition:transform .22s ease;
}
.mpp.is-open .mpp-dialog{transform:none}

.mpp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 닫기(×) */
.mpp-x{
	position:absolute;top:10px;right:10px;z-index:4;
	width:34px;height:34px;padding:0;border:0;border-radius:50%;
	background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.mpp-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mpp-x:hover{background:rgba(0,0,0,.75)}

/* 본문 · 슬라이드 */
.mpp-viewport{position:relative;overflow:hidden;flex:1 1 auto;min-height:0;transition:height .3s ease}
.mpp-track{display:flex;align-items:flex-start;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
.mpp-slide{flex:0 0 100%;min-width:0;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow:auto;background:#fff}
.mpp-slide picture,.mpp-slide img{display:block;width:100%;height:auto;margin:0}
.mpp-slide .mpp-link{display:block}
.mpp-html{padding:54px 26px 26px;font-size:15px;line-height:1.75;color:#333;word-break:keep-all} /* 위쪽은 × 자리 */
.mpp.is-multi .mpp-html{padding-left:62px;padding-right:62px}                                        /* 좌우는 화살표 자리 */
@media (max-width:480px){.mpp.is-multi .mpp-html{padding-left:52px;padding-right:52px}}
.mpp-html > :first-child{margin-top:0}
.mpp-html > :last-child{margin-bottom:0}
.mpp-html img{max-width:100%;height:auto}

/* 페이드 전환 */
.mpp.is-fade .mpp-track{display:grid;transform:none!important}
.mpp.is-fade .mpp-slide{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.mpp.is-fade .mpp-slide.is-active{opacity:1;visibility:visible}

/* 이전 · 다음 */
.mpp-arrow{
	position:absolute;top:50%;z-index:3;transform:translateY(-50%);
	width:40px;height:40px;padding:0;border:0;border-radius:50%;
	background:rgba(0,0,0,.42);color:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.mpp-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mpp-arrow:hover{background:rgba(0,0,0,.65)}
.mpp-prev{left:10px}
.mpp-next{right:10px}

/* 위치 표시 · 멈춤 */
.mpp-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #EEF1F3;background:#fff}
.mpp-dots{display:flex;align-items:center;gap:0}
.mpp-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mpp-dot::before{content:"";display:block;width:8px;height:8px;border-radius:4px;background:#C9D2D9;transition:width .2s ease,background .2s ease}
.mpp-dot[aria-current="true"]::before{width:20px;background:#00B4EC}
.mpp-count{font-size:13px;color:#5A6772;font-variant-numeric:tabular-nums}
.mpp-pause{
	margin-left:auto;display:flex;align-items:center;gap:5px;
	min-height:30px;padding:0 10px;border:1px solid #D7DEE3;border-radius:999px;
	background:#fff;color:#39444C;font-size:13px;cursor:pointer;
}
.mpp-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mpp-pause:hover{border-color:#00B4EC;color:#0077A3}

/* 하단 바 */
.mpp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#2B343B;color:#fff;font-size:14px}
.mpp-today{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;color:#fff}
.mpp-today input{width:17px;height:17px;margin:0;accent-color:#00B4EC;cursor:pointer}
.mpp-close{border:0;background:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer;padding:6px 4px}
.mpp-close:hover{text-decoration:underline}

/* 키보드 포커스 */
.mpp button:focus-visible,.mpp a:focus-visible,.mpp input:focus-visible{outline:3px solid #00B4EC;outline-offset:2px}
.mpp-dialog:focus-visible{outline:none}

@media (max-width:480px){
	.mpp{padding:12px}
	.mpp-arrow{width:34px;height:34px}
	.mpp-foot{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
	.mpp,.mpp-dialog,.mpp-track,.mpp-viewport,.mpp-slide,.mpp-dot::before{transition:none!important}
}