.devm-pop-root{position:fixed; inset:0; z-index:99000; pointer-events:none}
.devm-pop-dim{position:absolute; inset:0; background:rgba(8,12,22,.55); pointer-events:auto}

.devm-pop{
	position:absolute; left:var(--pop-l,40px); top:var(--pop-t,90px);
	width:var(--pop-w,460px); max-width:calc(100vw - 24px);
	display:flex; flex-direction:column;
	background:#fff; box-shadow:0 22px 60px rgba(8,12,22,.32);
	pointer-events:auto;
}

.devm-pop.is-center{left:50%; top:50%; transform:translate(-50%,-50%)}

/* 제목 막대입니다. 팝업 이름을 표시하며 이 자리를 끌어 옮기실 수 있습니다. */
.devm-pop__head{
	display:flex; align-items:center; gap:.5rem;
	padding:.55rem .85rem; background:#0F172A; color:#E2E8F0;
	font-size:.82rem; font-weight:600; letter-spacing:-.01em;
}
.devm-pop__name{
	flex:1; min-width:0;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.devm-pop__body{position:relative; overflow:hidden}
.devm-pop[style*="--pop-h"] .devm-pop__body{height:var(--pop-h)}

/* @dev 끌기 도중 브라우저가 그림·연결의 기본 끌기를 시작하면 pointercancel 이 떨어져
   밀어 넘기기가 중단된다. 끌기 시작 뒤에 표시를 붙이면 이미 늦으므로 처음부터 막는다 */
/* 팝업을 끄시거나 미실 때 내용이 선택되지 않도록 합니다. */
.devm-pop__head,
.devm-pop__bar,
.devm-pop-sl__track,
.devm-pop-sl__track a,
.devm-pop-sl__track img{
	-webkit-user-drag:none; -webkit-user-select:none; user-select:none;
}

/* 옮길 수 있는 자리에만 옮기는 모양의 마우스 표시를 둡니다. */
.devm-pop-root[data-drag="1"] .devm-pop__head,
.devm-pop-root[data-drag="1"] .devm-pop__bar{cursor:move}
.devm-pop-root[data-drag="1"] .devm-pop__bar label,
.devm-pop-root[data-drag="1"] .devm-pop__bar input,
.devm-pop-root[data-drag="1"] .devm-pop__bar button{cursor:pointer}

.devm-pop__html{padding:1.4rem 1.5rem; color:var(--c-fg,#1E293B); font-size:.95rem; line-height:1.75; word-break:keep-all}
.devm-pop__html img{max-width:100%; height:auto}

.devm-pop__html > *:first-child{margin-top:0}
.devm-pop__html > *:last-child{margin-bottom:0}
.devm-pop__html h2{margin:.6em 0 .4em; font-size:1.5em; font-weight:700; line-height:1.35}
.devm-pop__html h3{margin:.6em 0 .4em; font-size:1.25em; font-weight:700; line-height:1.4}
.devm-pop__html h4{margin:.6em 0 .4em; font-size:1.08em; font-weight:700; line-height:1.45}
.devm-pop__html p{margin:0 0 .6em}
.devm-pop__html ul{margin:0 0 .6em; padding-left:1.3em; list-style:disc}
.devm-pop__html ol{margin:0 0 .6em; padding-left:1.4em; list-style:decimal}
.devm-pop__html a{color:var(--c-accent,#2563EB); text-decoration:underline}

.devm-pop-sl{position:relative; overflow:hidden; height:100%}
.devm-pop-sl__track{display:flex; height:100%; transition:transform .35s ease}

/* 여러 장일 때는 끌거나 밀어서 넘기실 수 있습니다. */
.devm-pop-sl.is-many .devm-pop-sl__track{cursor:grab; touch-action:pan-y}
.devm-pop-sl.is-many .devm-pop-sl__track.is-dragging{cursor:grabbing; transition:none}
.devm-pop-sl__it{flex:0 0 100%; display:flex; align-items:center; justify-content:center}
.devm-pop-sl__it img{display:block; width:100%; height:auto}
.devm-pop[style*="--pop-h"] .devm-pop-sl__it img{height:100%; object-fit:cover}

.devm-pop-sl__nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:48px; height:48px; display:flex; align-items:center; justify-content:center;
	background:rgba(8,12,22,.42); color:#fff; border:0; font-size:1.65rem; cursor:pointer;
	transition:background-color .25s ease;
}
.devm-pop-sl__nav:hover{background:rgba(8,12,22,.72)}
.devm-pop-sl__nav.is-prev{left:0}
.devm-pop-sl__nav.is-next{right:0}
.devm-pop-sl__no{
	position:absolute; right:10px; bottom:10px; padding:.2rem .55rem;
	background:rgba(8,12,22,.55); color:#fff; font-size:.75rem; letter-spacing:.02em;
}

.devm-pop__bar{
	display:flex; align-items:center; justify-content:space-between; gap:.75rem;
	padding:.6rem .75rem; background:#0F172A; color:#E2E8F0; font-size:.82rem;
}
.devm-pop__today{display:flex; align-items:center; gap:.4rem; cursor:pointer}
.devm-pop__today input{width:15px; height:15px; accent-color:#2563EB}
.devm-pop__x{
	display:inline-flex; align-items:center; gap:.3rem;
	padding:.3rem .5rem; background:none; border:0; color:inherit; font:inherit; cursor:pointer;
}
.devm-pop__x:hover{color:#fff}

@media (max-width:767px){
	.devm-pop-root{display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto}
	/* @dev PC 에서 옮긴 자리는 요소에 직접 붙는다. 좁은 화면에서는 그 값이 그대로 남아
	   화면 밖으로 밀려나므로 !important 로 되돌린다 */
	.devm-pop{position:relative; left:auto !important; top:auto !important; width:100%; max-width:420px; margin:auto}
	.devm-pop.is-center{transform:none}
	.devm-pop[style*="--pop-h"] .devm-pop__body{height:auto}
	.devm-pop[style*="--pop-h"] .devm-pop-sl__it img{height:auto; object-fit:initial}
	.devm-pop-root[data-drag="1"] .devm-pop__head,
	.devm-pop-root[data-drag="1"] .devm-pop__bar{cursor:default}
	.devm-pop-sl__nav{width:44px; height:44px; font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
	.devm-pop-sl__track{transition:none}
}