/* ===== 모서리 둥글게 =====
   슬라이드가 position:absolute + transform 으로 움직이기 때문에
   부모 한 곳에만 radius 를 주면 이미지가 사각형 그대로 튀어나옵니다.
   잘라내는 요소 전부 + 이미지 자체에 동일한 값을 적용합니다.
   값은 아래 --slider-radius 한 곳만 수정하면 됩니다. */
.effectSlider_Container {
	--slider-radius: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	border-radius: var(--slider-radius);
	overflow: hidden;
}

.slider-viewport {
	overflow: hidden;
	margin: 0 auto;
	border-radius: var(--slider-radius);
}

.effectSlider_Container #contentBox,
.effectSlider_Container .contentBox,
.effectSlider_Container .slide {
	border-radius: var(--slider-radius);
	overflow: hidden;
}

/* 슬라이드 영역을 이미지가 꽉 채우도록
   (a 태그가 인라인이면 높이가 잡히지 않아 원본 비율이 낮은 이미지에
    위아래 여백이 생깁니다) */
.effectSlider_Container .slide {
	display: block;
	box-sizing: border-box;
}

.effectSlider_Container .slide > a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;      /* a 하단 여백(baseline 공간) 제거 */
	font-size: 0;
	border-radius: var(--slider-radius);
	overflow: hidden;
}

/* 이미지 자체에도 radius 적용 (Safari 등에서 transform 요소가 부모 radius 를 뚫는 문제 대응) */
.effectSlider_Container .slide img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;   /* 비율 유지하며 꽉 채움 (여백 대신 좌우가 살짝 잘림) */
	object-position: center;
	border-radius: var(--slider-radius);
}

.effectSlider_Container .slide-controlbar {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 25px;
	background: rgba(0,0,0,0.7);
	border-radius: 100px;
	color: #fff;
	font-size: clamp(13px, 2vw, 15px);
	line-height: 1;
	white-space: nowrap;
}

.effectSlider_Container .slide-counter {
	letter-spacing: 0.5px;
}

.effectSlider_Container .slide-controlbar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	font-size: clamp(13px, 2vw, 15px);
	line-height: 1;
}

.effectSlider_Container .slide-controlbar a span { display: none; }

.effectSlider_Container .slide-controlbar .ctrl-prev::before { content: "\2190"; }
.effectSlider_Container .slide-controlbar .ctrl-next::before { content: "\2192"; }

.effectSlider_Container .slide-controlbar .ctrl-pause {
	position: relative;
}
.effectSlider_Container .slide-controlbar .ctrl-pause::before,
.effectSlider_Container .slide-controlbar .ctrl-pause::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 6px;
	width: 3px;
	height: 10px;
	background: #fff;
	border-radius: 1px;
	transform: translateY(-50%);
}
.effectSlider_Container .slide-controlbar .ctrl-pause::after {
	left: 11px;
}

.effectSlider_Container .slide-controlbar .ctrl-pause.paused::before {
	left: 7px;
	width: 0;
	height: 0;
	background: transparent;
	border-radius: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}
.effectSlider_Container .slide-controlbar .ctrl-pause.paused::after {
	content: none;
}

/* ===== full 모드 (thumbnail_type="full") 전용 =====
   고정 박스(thumbnail_width x height)는 crop 과 동일하게 유지하고,
   이미지를 자르는 대신(cover) 박스에 100% 맞춰 늘립니다(fill).
   위의 전역 .slide img 규칙(object-fit:cover)보다 특이도가 높아 이깁니다. */
.effectSlider_Container.mode-full .slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: fill !important;
}
/* 외부(레이아웃) CSS 간섭 대비: 컨트롤바 버튼·슬라이드 링크 패딩 고정
   (레이아웃의 .contDiv1 a { padding:30px } 류 후손 셀렉터 오염 차단) */
.effectSlider_Container .slide-controlbar a,
.effectSlider_Container .slide > a {
	padding: 0 !important;
	margin: 0 !important;
}
/* 외부(레이아웃) CSS 간섭 대비: 슬라이드 골격 치수를 모드 무관하게 고정 */
.effectSlider_Container .contentBox,
.effectSlider_Container #contentBox {
	height: 100% !important;
}
.effectSlider_Container .slide,
.effectSlider_Container .slide > a {
	width: 100% !important;
	height: 100% !important;
}


/* ===== 제목 오버레이 (show_title="Y") 2026-08-24 =====
   구조 : .slide > a > .slide-caption(위치/폭 담당) > .cap-inner(배경/애니메이션 담당)
   a 는 font-size:0 이라 캡션에서 글자 크기를 다시 지정.
   등장 애니메이션은 list.html JS 가 전환 시 .is-in 클래스를 붙였다 떼는 방식
   (fade 이펙트는 display 토글이 아니라 css 애니메이션만으로는 재생되지 않음). */
.effectSlider_Container .slide-caption {
	position: absolute;
	z-index: 5;
	left: 24px;
	right: 24px;
	bottom: 24px;
	display: block;
	font-size: clamp(15px, 1.7vw, 22px);
	line-height: 1.35;
	text-align: left;
	pointer-events: none;
}
.effectSlider_Container.has-navi .slide-caption { bottom: 72px; }   /* 컨트롤바(하단 10px, 약 38px) 위로 */
.effectSlider_Container .slide-caption.cap-pos-center { text-align: center; }

.effectSlider_Container .slide-caption .cap-inner {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	opacity: 0;
}

/* 배경 스타일 1 : 반투명 라벨 */
.effectSlider_Container .slide-caption.cap-label .cap-inner {
	padding: 10px 18px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* 배경 스타일 2 : 하단 전체 그라데이션 띠 (캡션 박스가 하단 가장자리까지 내려가고 띠가 배경) */
.effectSlider_Container .slide-caption.cap-band {
	left: 0;
	right: 0;
	bottom: 0;
	padding: 90px 28px 26px;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 100%);
}
.effectSlider_Container.has-navi .slide-caption.cap-band { padding-bottom: 70px; }
.effectSlider_Container .slide-caption.cap-band .cap-inner {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 등장 애니메이션 */
.effectSlider_Container .slide-caption.is-in .cap-inner { opacity: 1; }
.effectSlider_Container .slide-caption.cap-fx-slideup.is-in .cap-inner { animation: esCapSlideUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.effectSlider_Container .slide-caption.cap-fx-fade.is-in .cap-inner    { animation: esCapFade 0.8s ease both; }
.effectSlider_Container .slide-caption.cap-fx-zoom.is-in .cap-inner    { animation: esCapZoom 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.effectSlider_Container .slide-caption.cap-fx-none .cap-inner          { opacity: 1; }

@keyframes esCapSlideUp {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes esCapFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes esCapZoom {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.effectSlider_Container .slide-caption .cap-inner { animation: none !important; opacity: 1; }
}

/* 모바일 : 여백 축소 */
@media (max-width: 768px) {
	.effectSlider_Container .slide-caption { left: 14px; right: 14px; bottom: 16px; font-size: clamp(13px, 3.6vw, 17px); }
	.effectSlider_Container.has-navi .slide-caption { bottom: 60px; }
	.effectSlider_Container .slide-caption.cap-label .cap-inner { padding: 7px 12px; border-radius: 8px; }
	.effectSlider_Container .slide-caption.cap-band { padding: 60px 16px 18px; }
	.effectSlider_Container.has-navi .slide-caption.cap-band { padding-bottom: 58px; }
}