/* index.html 히어로 페이드 슬라이더 — components/slide_renderer.html 과 동일 파일 로드 */
:root {
	--hero-fg-fade-duration: 0.45s;
}

.main-slide-description {
	margin-top: 12px;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.5;
	color: #f1f5f9;
}
/* Hero fade slider — 배경은 section 에만 두고, 루트·슬라이드는 투명 (풀배경 히어로) */
.main_slide.hero-fade-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent !important;
	overflow: visible;
	--hero-fg-fade: var(--hero-fg-fade-duration, 0.45s) ease-in-out;
}
.hero-fade-track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 1px;
	margin: 0;
	padding: 0;
	background: transparent !important;
	overflow: visible;
	/* 슬라이드 레이어는 대부분 pointer-events:none → 빈 영역 포인터는 트랙이 받음(드래그/스와이프). 링크·CTA는 자식이 가로챔 */
	pointer-events: auto;
	touch-action: pan-y;
}

/* 드래그/스와이프 — grab → 드래그 중 grabbing(.hero-slider--dragging, :active 보조) */
.hero-slider .hero-fade-track {
	cursor: grab;
}

.hero-slider.hero-slider--dragging .hero-fade-track,
.hero-slider:active .hero-fade-track {
	cursor: grabbing;
}
.main_slide.hero-fade-slider .slide.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border-radius: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
	transform: none;
	transition: none;
	will-change: auto;
}
.main_slide.hero-fade-slider .slide.hero-slide.active {
	visibility: visible;
	pointer-events: auto;
	z-index: 20;
}

/* 클릭 가능 영역만 포인터 복구 (히어로 UI가 형제로 올라갈 때 링크를 가리지 않도록) */
.main_slide.hero-fade-slider .slide.hero-slide.active,
.main_slide.hero-fade-slider .slide.hero-slide.active .title_wrap,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-text,
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_btn,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-image-full-cta,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-layout-cta,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-layout-layer .hero-layout-box,
.main_slide.hero-fade-slider .slide.hero-slide.active a,
.main_slide.hero-fade-slider .slide.hero-slide.active button {
	pointer-events: auto;
}

/* 비활성/퇴장/장식 레이어는 클릭 차단 금지 */
.main_slide.hero-fade-slider .slide.hero-slide:not(.active),
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit,
.main_slide.hero-fade-slider .slide.hero-slide:not(.active) *,
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit *,
.main_slide.hero-fade-slider .slide.hero-slide::before,
.main_slide.hero-fade-slider .slide.hero-slide::after,
.main_slide.hero-fade-slider .slide.hero-slide > .img,
.main_slide.hero-fade-slider .slide.hero-slide > .img * {
	pointer-events: none !important;
}

/* 텍스트·CTA를 슬라이드 내 장식·이미지 레이어보다 위로 (초기 로드부터 클릭 안정화) */
.main_slide.hero-fade-slider .slide.hero-slide.active .title_wrap,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-text {
	position: relative;
	z-index: 40;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_btn,
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_btn a.hero-button,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-image-full-cta,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-layout-cta,
.main_slide.hero-fade-slider .slide.hero-slide.active .hero-layout-layer .hero-layout-box {
	position: relative;
	z-index: 50;
}

/* 우측 일러스트 박스는 히트 영역이 텍스트열과 겹칠 수 있음 — 이미지는 장식용으로 통과 */
.main_slide.hero-fade-slider .slide.hero-slide.active > .img {
	pointer-events: none;
}
/* 퇴장: 슬라이드 배경(::before/::after)은 즉시 제거 → 섹션/바디에 깔린 목표 색만 보임, 전면만 페이드아웃 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit {
	visibility: visible;
	pointer-events: none;
	z-index: 5;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit::before,
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit::after {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: none !important;
}
/* 우측 .img 는 section_01 의 translateY(-50%) 수직 중앙 — 전면 페이드 transform 과 합성하지 않으면 위치가 깨짐 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit > *:not(.img) {
	opacity: 0;
	transition: opacity var(--hero-fg-fade), transform var(--hero-fg-fade);
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit > .img {
	opacity: 0;
	transition: opacity var(--hero-fg-fade), transform var(--hero-fg-fade);
	transform: translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit > *:not(.img),
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit > .img {
		transition: none;
	}
}
/* 입장: 배경은 즉시 표시, 전면만 0→1 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > *:not(.img) {
	opacity: 0;
	transform: translate3d(0, 6px, 0);
	transition: none;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > .img {
	opacity: 0;
	transform: translateY(-50%) translate3d(0, 6px, 0);
	transition: none;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > *:not(.img) {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity var(--hero-fg-fade), transform var(--hero-fg-fade);
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > .img {
	opacity: 1;
	transform: translateY(-50%) translate3d(0, 0, 0);
	transition: opacity var(--hero-fg-fade), transform var(--hero-fg-fade);
}
@media (prefers-reduced-motion: reduce) {
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > *:not(.img),
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > .img,
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > *:not(.img),
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > .img {
		transform: none;
		transition: none;
	}
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > .img,
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > .img {
		transform: translateY(-50%);
	}
}
.main_slide.hero-fade-slider .slide.hero-slide:not(.active) .visual_bounce span {
	animation: none !important;
	opacity: 0;
	transform: translateY(-50%);
}
.main_slide.hero-fade-slider .slide.hero-slide:not(.active) .visual_bounce span::before {
	animation: none !important;
	transform: translateX(-50%);
}
/* 앞에 텍스트 노드가 있어도 첫/둘째 글자 span에 지연 적용 (레거시: 쉽고 재미있게 <span>코</span><span>딩</span>) */
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(1) {
	animation-delay: 0s !important;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(2) {
	animation-delay: 0.2s !important;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(3) {
	animation-delay: 0.3s !important;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(1)::before {
	animation-delay: 0.4s !important;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(2)::before {
	animation-delay: 0.5s !important;
}
.main_slide.hero-fade-slider .slide.hero-slide.active .visual_bounce span:nth-of-type(3)::before {
	animation-delay: 0.6s !important;
}
/* 하단 dot만으로 슬라이드 전환 (좌우 화살표 없음) */
.main-slide-pagination.hero-fade-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	z-index: 60;
	/* 컨테이너 전체가 pointer 대상이면 투명 영역이 긴 카피 슬라이드(2번 등) CTA와 겹쳐 클릭을 가로챔 — 점 버튼만 받도록 분리 */
	pointer-events: none;
	padding: 0 16px;
	box-sizing: border-box;
}
.main_slide.hero-fade-slider .hero-fade-dot {
	pointer-events: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	margin: 0;
	background: rgba(255, 255, 255, 0.55);
	opacity: 0.45;
	cursor: pointer;
	box-sizing: border-box;
	transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.main_slide.hero-fade-slider .hero-fade-dot:hover {
	opacity: 0.75;
	background: rgba(255, 255, 255, 0.7);
}
.main_slide.hero-fade-slider .hero-fade-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.main_slide.hero-fade-slider .hero-fade-dot.is-active,
.main_slide.hero-fade-slider .hero-fade-dot.active {
	width: 12px;
	height: 12px;
	background: #ffffff;
	opacity: 1;
	transform: none;
}
.d-none {
	display: none !important;
}

/* 하단 dot 등(absolute)이 컨테이너·섹션에 잘리지 않도록 — 홈·히어로 프리뷰만 */
body.cocoble_landing.home-page .section_01 > .container,
body.hero-preview-shell .section_01 > .container {
	overflow: visible;
}

/* overflow-y:hidden 이면 일부 브라우저에서 가로로 나간 dot이 잘림 → 히어로 섹션만 visible */
body.cocoble_landing.home-page .section_01,
body.hero-preview-shell .section_01 {
	overflow: visible !important;
}

/*
 * 히어로 .img 안에 show_pc + show_m 두 장이 있음.
 * 어떤 규칙이든 `.img img { display:block }` 처럼 태그만 고르면 .show_m{display:none} 을 덮어써 PC에서 세로로 두 장이 겹쳐 보임.
 */
.main_slide.hero-fade-slider .slide.hero-slide > .img img.show_m {
	display: none !important;
}
@media screen and (max-width: 767px) {
	.main_slide.hero-fade-slider .slide.hero-slide > .img img.show_pc {
		display: none !important;
	}
	.main_slide.hero-fade-slider .slide.hero-slide > .img img.show_m {
		display: block !important;
	}
}

/* rwd.css 모바일용 .swiper-slide:after(하단 밝은 폴리곤) — 페이드 히어로와 겹침 방지 */
@media screen and (max-width: 767px) {
	.main_slide.hero-fade-slider .swiper-slide:after,
	.main_slide.hero-fade-slider .slide.hero-slide:after {
		content: none !important;
		display: none !important;
		clip-path: none !important;
		height: 0 !important;
		width: 0 !important;
	}
}

/* image_full: 전면 이미지 한 장 (텍스트 레이아웃·우측 일러스트 .img 미사용) */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full {
	display: block;
	padding: 0;
}
.hero-image-full-layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: #1e293b;
}
.hero-image-full-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.hero-image-full-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 16px;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full .hero-image-full-cta {
	position: absolute;
	z-index: 3;
	left: max(16px, calc(100% * 40 / 1280));
	bottom: 8%;
	margin-top: 0;
}

/* 전환 중 바디/섹션/헤더 배경은 목표 테마로 즉시 맞춤(0.4s 보간으로 색이 섞여 보이는 것 방지) */
body.hero-fg-transitioning.home-page .section_01,
body.hero-fg-transitioning.hero-preview-shell .section_01,
body.hero-fg-transitioning.home-page .header:not(.fixed),
body.hero-fg-transitioning.hero-preview-shell .header:not(.fixed) {
	transition: background-color 0s linear, box-shadow 0s linear !important;
}