/*
 * 이미지 슬라이드: 에디터 본문(content_css) · 글 보기 · 에디터의 선택 창 미리보기에서 함께 쓴다
 * 저장되는 HTML (Rhymix 기준, 허용 목록에 넣을 class 는 ed-slider 하나):
 *   <div class="ed-slider" data-style="basic|card|thumbs" data-ratio="auto|16:9|4:3|1:1" data-auto="0|넘기는 초"
 *        data-loop="Y|N" data-count="Y|N" data-dots="Y|N">
 *     <figure><img src alt data-file-srl><figcaption>설명</figcaption></figure> ...
 *   </div>
 * XE 1.x 는 data-* 와 figure 를 지우므로 설정 없이 이미지만 옆으로 넘겨 보는 모양이 된다.
 * 화살표 · 번호 · 점 · 썸네일 줄은 js/slider.js 가 만든다. 스크립트가 없어도 옆으로 밀어 넘겨 볼 수 있다.
 */
.ed-slider{
	position:relative;
	display:flex;
	align-items:stretch;
	gap:0;
	margin:1em 0;
	padding:0;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	overscroll-behavior-x:contain;
	border-radius:14px;
	background:#0f172a;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
}

.ed-slider::-webkit-scrollbar{
	display:none;
}

.ed-slider > figure{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 100%;
	min-width:0;
	margin:0;
	padding:0;
	overflow:hidden;
	scroll-snap-align:center;
	scroll-snap-stop:always;
}

.ed-slider > figure > img,
.ed-slider > img{
	display:block;
	width:100% !important;
	height:auto !important;
	max-width:100% !important;
	max-height:75vh;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	object-fit:contain;
	user-select:none;
	-webkit-user-drag:none;
}

/* XE 1.x: figure 가 지워져 이미지만 남아도 한 장씩 넘겨 본다 */
.ed-slider > img{
	flex:0 0 100%;
	scroll-snap-align:center;
}

/* 비율: 정한 비율로 맞추고 넘치는 부분은 자른다 */
.ed-slider[data-ratio="16:9"] > figure{
	aspect-ratio:16 / 9;
}

.ed-slider[data-ratio="4:3"] > figure{
	aspect-ratio:4 / 3;
}

.ed-slider[data-ratio="1:1"] > figure{
	aspect-ratio:1 / 1;
}

.ed-slider[data-ratio="16:9"] > figure > img,
.ed-slider[data-ratio="4:3"] > figure > img,
.ed-slider[data-ratio="1:1"] > figure > img{
	height:100% !important;
	max-height:none;
	object-fit:cover;
}

/* 설명 */
.ed-slider > figure > figcaption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:32px 18px 14px;
	background:linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .72));
	color:#fff;
	font-size:14px;
	line-height:1.5;
	text-align:left;
	text-shadow:0 1px 2px rgba(0, 0, 0, .3);
	pointer-events:none;
}

.ed-slider[data-dots="Y"] > figure > figcaption{
	padding-bottom:30px;
}

/* 카드: 양옆 이미지가 살짝 보인다 */
.ed-slider[data-style="card"]{
	gap:12px;
	padding:4px 9%;
	scroll-padding:0 9%;
	border-radius:0;
	background:transparent;
}

/* 안쪽 여백(양옆 9%)을 뺀 폭을 꽉 채워야 가운데에 놓이고 양옆 여백으로 이웃 카드가 보인다 */
.ed-slider[data-style="card"] > figure{
	flex-basis:100%;
	border-radius:14px;
	background:#0f172a;
	box-shadow:0 6px 18px rgba(15, 23, 42, .14);
	transition:transform .35s ease, opacity .35s ease;
}

.ed-slider-shell .ed-slider[data-style="card"] > figure:not(.is-active){
	opacity:.5;
	transform:scale(.94);
}

/* ---------- js/slider.js 가 붙이는 부분 ---------- */
.ed-slider-shell{
	position:relative;
	margin:1em 0;
}

.ed-slider-shell > .ed-slider{
	margin:0;
}

.ed-slider-shell > .ed-slider:focus{
	outline:none;
}

.ed-slider-shell > .ed-slider:focus-visible{
	outline:2px solid #3b82f6;
	outline-offset:3px;
}

.ed-slider-arrow{
	position:absolute;
	top:50%;
	z-index:3;
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	margin:-20px 0 0;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(255, 255, 255, .9);
	color:#0f172a;
	box-shadow:0 2px 10px rgba(15, 23, 42, .22);
	cursor:pointer;
	opacity:0;
	transition:opacity .2s ease, transform .2s ease;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}

.ed-slider-arrow svg{
	width:18px;
	height:18px;
}

.ed-slider-arrow:hover{
	transform:scale(1.07);
}

.ed-slider-shell:hover .ed-slider-arrow,
.ed-slider-shell:focus-within .ed-slider-arrow{
	opacity:1;
}

.ed-slider-arrow:disabled{
	opacity:0 !important;
	pointer-events:none;
}

.ed-slider-prev{
	left:12px;
}

.ed-slider-next{
	right:12px;
}

.ed-slider-shell.is-card .ed-slider-prev{
	left:calc(9% - 20px);
}

.ed-slider-shell.is-card .ed-slider-next{
	right:calc(9% - 20px);
}

@media (hover:none){
	.ed-slider-arrow{
		width:34px;
		height:34px;
		margin-top:-17px;
		opacity:.9;
	}
}

.ed-slider-counter{
	position:absolute;
	top:12px;
	right:12px;
	z-index:3;
	padding:3px 10px;
	border-radius:999px;
	background:rgba(15, 23, 42, .6);
	color:#fff;
	font-size:12px;
	font-weight:600;
	line-height:1.5;
	font-variant-numeric:tabular-nums;
	letter-spacing:.02em;
	pointer-events:none;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
}

.ed-slider-shell.is-card .ed-slider-counter{
	right:calc(9% + 12px);
}

.ed-slider-nav-dots{
	position:absolute;
	left:0;
	right:0;
	bottom:12px;
	z-index:3;
	display:flex;
	justify-content:center;
	gap:6px;
	pointer-events:none;
}

.ed-slider-nav-dots button{
	width:7px;
	height:7px;
	margin:0;
	padding:0;
	border:0;
	border-radius:999px;
	background:rgba(255, 255, 255, .55);
	cursor:pointer;
	pointer-events:auto;
	transition:width .25s ease, background-color .25s ease;
}

.ed-slider-nav-dots button.is-active{
	width:20px;
	background:#fff;
}

/* 카드 · 썸네일 스타일은 점을 이미지 아래에 둔다 */
.ed-slider-shell.is-card .ed-slider-nav-dots,
.ed-slider-shell.is-thumbs .ed-slider-nav-dots{
	position:static;
	margin-top:10px;
}

.ed-slider-shell.is-card .ed-slider-nav-dots button,
.ed-slider-shell.is-thumbs .ed-slider-nav-dots button{
	background:rgba(100, 116, 139, .35);
}

.ed-slider-shell.is-card .ed-slider-nav-dots button.is-active,
.ed-slider-shell.is-thumbs .ed-slider-nav-dots button.is-active{
	background:#3b82f6;
}

.ed-slider-shell.is-card .ed-slider > figure > figcaption,
.ed-slider-shell.is-thumbs .ed-slider > figure > figcaption{
	padding-bottom:14px;
}

.ed-slider-thumbstrip{
	display:flex;
	gap:8px;
	margin-top:10px;
	padding:2px;
	overflow-x:auto;
	scrollbar-width:none;
}

.ed-slider-thumbstrip::-webkit-scrollbar{
	display:none;
}

.ed-slider-thumbstrip button{
	flex:0 0 auto;
	width:68px;
	height:50px;
	margin:0;
	padding:0;
	border:0;
	border-radius:8px;
	background:#e2e8f0;
	overflow:hidden;
	opacity:.5;
	cursor:pointer;
	transition:opacity .2s ease, box-shadow .2s ease;
}

.ed-slider-thumbstrip button img{
	display:block;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	margin:0 !important;
	object-fit:cover;
}

.ed-slider-thumbstrip button:hover{
	opacity:.8;
}

.ed-slider-thumbstrip button.is-active{
	opacity:1;
	box-shadow:0 0 0 2px #3b82f6;
}

/* 자동 전환 남은 시간 */
.ed-slider-progress{
	position:absolute;
	left:0;
	right:0;
	top:0;
	z-index:3;
	height:3px;
	overflow:hidden;
	border-radius:14px 14px 0 0;
	pointer-events:none;
}

.ed-slider-progress > i{
	display:block;
	width:0;
	height:100%;
	background:rgba(255, 255, 255, .85);
}

.ed-slider-shell.is-card .ed-slider-progress{
	left:9%;
	right:9%;
}

@keyframes ed-slider-progress{
	from{ width:0; }
	to{ width:100%; }
}

/* ---------- 에디터 안: 한 덩어리로 보여 주고 두 번 눌러 고친다 ---------- */
.mce-content-body .ed-slider{
	gap:8px;
	padding:36px 10px 10px;
	border:1px dashed rgba(100, 116, 139, .5);
	border-radius:12px;
	background:rgba(59, 130, 246, .05);
	scroll-snap-type:none;
	cursor:default;
}

.mce-content-body .ed-slider::before{
	content:attr(data-mce-ed-label);
	position:absolute;
	top:10px;
	left:12px;
	color:#475569;
	font-size:12px;
	font-weight:700;
	white-space:nowrap;
}

.mce-content-body .ed-slider > figure{
	flex:0 0 150px;
	aspect-ratio:4 / 3;
	border-radius:8px;
	background:#0f172a;
	box-shadow:none;
	opacity:1;
	transform:none;
	scroll-snap-align:none;
}

.mce-content-body .ed-slider > figure > img{
	height:100% !important;
	max-height:none;
	object-fit:cover;
}

/* 에디터 안 미리보기 띠: 설명은 첫 줄만 */
.mce-content-body .ed-slider > figure > figcaption{
	display:-webkit-box;
	padding:14px 8px 6px;
	font-size:11px;
	overflow:hidden;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
}

.mce-content-body .ed-slider[data-mce-selected]{
	outline:2px solid #3b82f6 !important;
	outline-offset:2px;
}