/* SMEN — Image Gallery (썸네일/화살표 네비게이션) */
.smen-pinned{
	position:relative;
	width:100%;
}
.smen-pinned__sticky{
	position:relative;
	width:100%;
	display:flex;
	flex-direction:column;
}

/* 비율 옵션 — 풀스크린은 sticky 100vh, 나머지는 메인 이미지 영역에 비율 적용 */
.smen-pinned.is-ratio-full .smen-pinned__sticky{height:100vh;}
.smen-pinned.is-ratio-full .smen-pinned__main{flex:1 1 auto;min-height:0;}

.smen-pinned.is-ratio-16-9 .smen-pinned__main{width:100%;aspect-ratio:16/9;}
.smen-pinned.is-ratio-4-3  .smen-pinned__main{width:100%;aspect-ratio:4/3;}
.smen-pinned.is-ratio-3-2  .smen-pinned__main{width:100%;aspect-ratio:3/2;}

/* 메인 이미지 영역 */
.smen-pinned__main{
	position:relative;
	flex:1 1 auto;
	width:100%;
	height:100%;
	background:#0e0e0e;
	overflow:hidden;
}
.smen-pinned__image{
	position:absolute;
	inset:0;
	opacity:0;
	pointer-events:none;
	transition:opacity .9s ease;
}
.smen-pinned__image.is-active{
	opacity:1;
	pointer-events:auto;
	z-index:2;
}
.smen-pinned__image-img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* 전환 효과 */
.smen-pinned.is-trans-slide-up .smen-pinned__image{
	transform:translateY(40px);
	transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.smen-pinned.is-trans-slide-up .smen-pinned__image.is-active{transform:translateY(0);}

.smen-pinned.is-trans-zoom .smen-pinned__image{
	transform:scale(1.06);
	transition:opacity .9s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.smen-pinned.is-trans-zoom .smen-pinned__image.is-active{transform:scale(1);}

/* 썸네일 — 기본은 이미지 외부에 위치 */
.smen-pinned__thumbs{
	display:flex;
	flex:0 0 auto;
}

/* 하단: 이미지 바로 아래, 간격/배경 없음, 중앙 정렬 */
.smen-pinned.is-thumbs-bottom .smen-pinned__thumbs{
	flex-direction:row;
	justify-content:center;
	gap:0;
	padding:0;
	background:none;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
	border-radius:0;
	width:100%;
	overflow-x:auto;
	scrollbar-width:none;
}
.smen-pinned.is-thumbs-bottom .smen-pinned__thumbs::-webkit-scrollbar{display:none;}

/* 좌/우: 기존 오버레이 형태 유지 */
.smen-pinned.is-thumbs-right,
.smen-pinned.is-thumbs-left{position:relative;}
.smen-pinned.is-thumbs-right .smen-pinned__sticky,
.smen-pinned.is-thumbs-left  .smen-pinned__sticky{flex-direction:row;}
.smen-pinned.is-thumbs-right .smen-pinned__thumbs,
.smen-pinned.is-thumbs-left  .smen-pinned__thumbs{
	position:absolute;
	z-index:5;
	gap:10px;
	padding:14px;
	background:rgba(0,0,0,.25);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-radius:14px;
	flex-direction:column;
	max-height:80vh;
	overflow-y:auto;
}
.smen-pinned.is-thumbs-right .smen-pinned__thumbs{right:32px;top:50%;transform:translateY(-50%);}
.smen-pinned.is-thumbs-left  .smen-pinned__thumbs{left:32px;top:50%;transform:translateY(-50%);}

.smen-pinned__thumb{
	flex:0 0 auto;
	width:var(--smp-thumb,72px);
	height:var(--smp-thumb,72px);
	padding:0;
	border:none;
	background:none;
	border-radius:0;
	overflow:hidden;
	cursor:pointer;
	opacity:.55;
	transition:opacity .25s;
	position:relative;
}
.smen-pinned__thumb:hover{opacity:.85;}
.smen-pinned__thumb.is-active{opacity:1;}
.smen-pinned__thumb.is-active::after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:0;
	height:2px;
	background:#fff;
}
/* 하단 배치 시 활성 표시는 이미지 위쪽 라인 */
.smen-pinned.is-thumbs-bottom .smen-pinned__thumb.is-active::after{
	top:0;bottom:auto;
}
.smen-pinned__thumb-img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/* 좌우 화살표 — 이미지 바깥 영역, 라인 < > 표시만 */
.smen-pinned__arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:var(--smp-arrow-size, 120px);
	height:var(--smp-arrow-size, 120px);
	display:flex;align-items:center;justify-content:center;
	background:none;
	border:none;
	border-radius:0;
	cursor:pointer;
	color:var(--smp-arrow-color, #fff);
	padding:0;
	box-shadow:none;
	transition:opacity .2s, color .2s;
	z-index:5;
}
.smen-pinned__arrow svg{
	display:block;
	width:55%;
	height:55%;
}
.smen-pinned__arrow:hover{opacity:.7;}
.smen-pinned__arrow--prev{left:0;}
.smen-pinned__arrow--next{right:0;}

/* 클릭 가능 표시 (라이트박스 활성화 시) */
.smen-pinned.has-lightbox .smen-pinned__main{cursor:pointer;}

/* ─────────────────────────────────────────────
 * Lightbox (라이트박스 갤러리)
 * ───────────────────────────────────────────── */
.smen-lightbox{
	position:fixed;
	inset:0;
	background:rgba(10,10,10,.5);
	z-index:99999;
	display:none;
	align-items:center;
	justify-content:center;
	opacity:0;
	transition:opacity .25s ease;
}
.smen-lightbox.is-open{display:flex;opacity:1;}
.smen-lightbox__stage{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.smen-lightbox__img{
	display:block;
	max-width:88vw;
	max-height:88vh;
	width:auto;
	height:auto;
	object-fit:contain;
	box-shadow:0 30px 80px rgba(0,0,0,.6);
	transition:opacity .3s ease;
}
.smen-lightbox__img.is-loading{opacity:0;}

.smen-lightbox__close,
.smen-lightbox__nav{
	position:absolute;
	background:none;
	border:none;
	color:#fff;
	cursor:pointer;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:opacity .2s;
}
.smen-lightbox__close:hover,
.smen-lightbox__nav:hover{opacity:.65;}

.smen-lightbox__close{
	top:24px;right:28px;
	width:44px;height:44px;
}
.smen-lightbox__close svg{width:24px;height:24px;}

.smen-lightbox__nav{
	top:50%;
	transform:translateY(-50%);
	width:90px;height:90px;
}
.smen-lightbox__nav svg{width:50%;height:50%;}
.smen-lightbox__nav--prev{left:24px;}
.smen-lightbox__nav--next{right:24px;}

.smen-lightbox__counter{
	position:absolute;
	bottom:24px;
	left:50%;
	transform:translateX(-50%);
	color:#fff;
	font-size:13px;
	letter-spacing:.1em;
	opacity:.7;
	font-family:'Cinzel','Noto Sans KR',sans-serif;
}

/* 모바일 */
@media(max-width:768px){
	.smen-lightbox__nav{width:60px;height:60px;}
	.smen-lightbox__nav--prev{left:6px;}
	.smen-lightbox__nav--next{right:6px;}
	.smen-lightbox__close{top:14px;right:14px;width:38px;height:38px;}
	.smen-lightbox__img{max-width:94vw;max-height:80vh;}
}

/* 모바일 */
@media(max-width:768px){
	.smen-pinned__thumbs{padding:10px;gap:6px;}
	.smen-pinned.is-thumbs-bottom .smen-pinned__thumbs{bottom:18px;}
	.smen-pinned.is-thumbs-right .smen-pinned__thumbs,
	.smen-pinned.is-thumbs-left .smen-pinned__thumbs{
		left:50%;right:auto;top:auto;bottom:18px;
		transform:translateX(-50%);
		flex-direction:row;
		max-height:none;
		max-width:90vw;
		overflow-x:auto;
	}
	.smen-pinned__thumb{width:calc(var(--smp-thumb,72px) * .8);height:calc(var(--smp-thumb,72px) * .8);}
	.smen-pinned__arrow{width:calc(var(--smp-arrow-size, 120px) * .55);height:calc(var(--smp-arrow-size, 120px) * .55);}
}