/**
 * Hero: body/section_01 단일 그라데이션 + 헤더 동기. 슬라이드 pseudo 배경은 파일 끝 규칙으로 비활성화.
 * index.html / preview(hero-preview-shell) 와 동일 체인으로 로드.
 */

/* 레거시: section 전체에 깔리던 히어로 배경 — 슬라이드별로 이전 */
body.cocoble_landing.home-page .section_01::before,
body.cocoble_landing.home-page .section_01::after,
body.hero-preview-shell .section_01::before,
body.hero-preview-shell .section_01::after {
	content: none !important;
	display: none !important;
}

/*
 * 페이지 상단 테마: 활성 슬라이드에 따라 body.hero-theme-* 로 전환(JS).
 * 네비(스크롤 전) + section_01 + 뷰포트 좌우 여백이 같은 표면색.
 */
body.home-page.hero-theme-default,
body.home-page.hero-theme-default .section_01 {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8);
	background-color: #4f6df0;
}

body.home-page.hero-theme-bootcamp,
body.home-page.hero-theme-bootcamp .section_01 {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8);
	background-color: #4f6df0;
}

body.home-page.hero-theme-default .header:not(.fixed) {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8) !important;
	background-color: #4f6df0 !important;
	box-shadow: none;
}

body.home-page.hero-theme-bootcamp .header:not(.fixed) {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8) !important;
	background-color: #4f6df0 !important;
	box-shadow: none;
}

body.home-page.hero-theme-default .header:not(.fixed),
body.home-page.hero-theme-bootcamp .header:not(.fixed) {
	transition: background-color 0.4s ease, box-shadow 0.3s ease;
}

/* 히어로 미리보기(헤더 없음) */
body.hero-preview-shell.hero-theme-default,
body.hero-preview-shell.hero-theme-default .section_01 {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8);
	background-color: #4f6df0;
}

body.hero-preview-shell.hero-theme-bootcamp,
body.hero-preview-shell.hero-theme-bootcamp .section_01 {
	background: linear-gradient(135deg, #4f6df0, #3f5bd8);
	background-color: #4f6df0;
}

body.cocoble_landing.home-page .section_01,
body.hero-preview-shell .section_01 {
	overflow-x: visible;
	overflow-y: hidden;
}

/*
 * 슬라이드는 .container 안이라 폭이 좁음 → 배경은 100vw로 뷰포트 전체에 깔림.
 * 가운데 카드처럼 보이지 않도록 pseudo는 슬라이드 수평 중심 기준 full-bleed.
 */
body.cocoble_landing.home-page .section_01 .main_slide.hero-fade-slider,
body.cocoble_landing.home-page .section_01 .hero-fade-track,
body.hero-preview-shell .section_01 .main_slide.hero-fade-slider,
body.hero-preview-shell .section_01 .hero-fade-track {
	overflow-x: visible;
	overflow-y: hidden;
}

.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand,
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp {
	overflow-x: visible;
	overflow-y: hidden;
}

/* ---------- 브랜드 슬라이드 (기존 메인 히어로 무드) ---------- */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	background: #3468f3;
	z-index: 0;
}

.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background: url("../../images/20231009/visual_pattern.svg") no-repeat center / cover;
}

/* .img 는 section_01 .img 의 position:absolute 유지 — 전부 relative 주면 2열·우측 일러스트가 깨짐 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand > *:not(.img) {
	position: relative;
	z-index: 2;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand > .img {
	z-index: 1;
}

/* ---------- split_bootcamp: 슬라이드 전면 테마 ---------- */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	/* body.hero-theme-bootcamp 의 --hero-theme-surface-bg 와 슬라이드 인라인 --hero-slide-bg 동기 */
	background: var(--hero-theme-surface-bg, var(--hero-slide-bg, #1a365d));
	z-index: 0;
}

.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 60% at 82% 38%, rgba(255, 107, 53, 0.14) 0%, transparent 58%),
		radial-gradient(ellipse 55% 45% at 10% 85%, rgba(96, 165, 250, 0.1) 0%, transparent 55%),
		radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.04) 0%, transparent 45%);
}

.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp > *:not(.img) {
	position: relative;
	z-index: 2;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp > .img {
	z-index: 1;
}

/* ---------- image_full: 슬라이드 자체 pseudo 없음 (이미지 레이어가 배경) ---------- */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full::before,
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full::after {
	content: none;
	display: none;
}

/* 모바일 rwd.css 의 .swiper-slide:after(하단 폴리곤)가 히어로 fade 슬라이드와 충돌 — 테마 슬라이드는 패턴/글로만 유지 */
@media screen and (max-width: 767px) {
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand::after {
		height: 100% !important;
		width: 100vw !important;
		max-width: none !important;
		clip-path: none !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: auto !important;
		background: url("../../images/20231009/visual_pattern.svg") no-repeat center / cover !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp::after {
		height: 100% !important;
		width: 100vw !important;
		max-width: none !important;
		clip-path: none !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: auto !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand::before {
		width: 100vw !important;
		max-width: none !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp::before {
		width: 100vw !important;
		max-width: none !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}

@media screen and (max-width: 500px) {
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand::after,
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp::after {
		height: 100% !important;
		width: 100vw !important;
		clip-path: none !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}

/*
 * 풀스크린 히어로: 슬라이드 pseudo 레이어 비활성화 → section/body 그라데이션만 (박스 경계 제거).
 * 크기·패딩은 hero_fade_slider.css 가 담당.
 */
.main_slide.hero-fade-slider .slide.hero-slide::before,
.main_slide.hero-fade-slider .slide.hero-slide::after {
	content: none !important;
	display: none !important;
}

/*
 * 위쪽 .theme-brand > *:not(.img) { z-index:2 } 가 hero_fade_slider 의
 * .active .title_wrap { z-index:25 } 보다 뒤에 와 덮어써, 텍스트 열·CTA가
 * 형제 .img / 하단 dot 레이어와 스택 순서가 꼬일 수 있음.
 * .active 를 포함한 선택자로 동일 요소에 대해 우선 적용.
 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand.active > .title_wrap {
	position: relative;
	z-index: 25;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand.active > .title_wrap .hero-text {
	position: relative;
	z-index: 25;
}

/* split_bootcamp 마크업에 클래스가 붙은 경우에도 동일 스택 (위 > *:not(.img){z-index:2} 보강) */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp.active > .title_wrap {
	position: relative;
	z-index: 25;
}
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-split-bootcamp.active > .title_wrap .hero-text {
	position: relative;
	z-index: 25;
}