/**
 * Hero 커스텀 텍스트 블록 — 메인(index)과 관리자 미리보기 공통.
 * 저장 좌표: refWidth×refHeight(기본 1280×720) px → 슬라이드 영역 기준 % 로 환산.
 * 타이포그래피: 슬라이드 1 기준 디자인 좌표(제목 72 / 부제 40 / 본문 18)를
 *   calc(100cqw * design / 1280) 로 통일 — DB fontSize 등은 사용하지 않음.
 *
 * 고정 헤더(common.css .header position:fixed) 때문에 본문의 section_01 이 헤더 아래가 아니라
 * 뷰포트 상단부터 칠해지며, 슬라이드 좌표 top:0 이 로고/네비와 겹침.
 * --hero-header-offset 만큼 패딩을 주어 "슬라이드 = 실제 히어로 콘텐츠 영역"과 미리보기를 맞춤.
 * index.html 에서 .header offsetHeight 로 변수를 덮어씀(권장).
 */
:root {
	--hero-header-offset: 88px;
	--hero-typo-ref: 1280;
	--hero-typo-title: 72;
	--hero-typo-subtitle: 40;
	--hero-typo-desc: 18;
}

body.cocoble_landing.home-page .section_01 {
	padding-top: var(--hero-header-offset);
	box-sizing: border-box;
}

/* 컨테이너 쿼리: cqw = 슬라이드(히어로 한 장) 너비 — 비커스텀/커스텀 동일 스케일 */
.main_slide.hero-fade-slider .slide.hero-slide {
	container-type: size;
	container-name: heroslide;
}

.main_slide.hero-fade-slider .slide.hero-slide.hero-layout-custom {
	display: block;
}

.hero-layout-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero-layout-box {
	position: absolute;
	box-sizing: border-box;
	pointer-events: auto;
	overflow: auto;
	color: #fff;
	word-break: keep-all;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* 슬라이드 1 기준 단일 타이포 — hero_typography_system 의 .hero-kicker / .hero-title 가 있으면 제외 */
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .title.visual_bounce:not(.hero-kicker):not(.hero-title),
.hero-layout-custom .hero-layout-box.hero-layout-box-title .title.visual_bounce {
	font-size: calc(100cqw * var(--hero-typo-title) / var(--hero-typo-ref)) !important;
	font-family: "GmarketSans", "Noto Sans", sans-serif !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.05em !important;
	display: block;
}

/* 레이아웃 박스가 아닌 기본 title_wrap 경로 — 기존 section_01 과 동일 여백 */
.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-layout-custom) .title_wrap .title.visual_bounce:not(.hero-kicker):not(.hero-title) {
	padding-top: 50px !important;
}

.hero-layout-custom .hero-layout-box.hero-layout-box-title .title.visual_bounce {
	padding-top: 0 !important;
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .title.lg:not(.hero-kicker):not(.hero-title),
.hero-layout-custom .hero-layout-box.hero-layout-box-subtitle .title.lg {
	font-size: calc(100cqw * var(--hero-typo-subtitle) / var(--hero-typo-ref)) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
	position: relative;
	display: block;
}

/* 본문: hero_typography_system 이 .hero-desc 로 통일 — 미적용 레거시만 cqw */
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .main-slide-description:not(.hero-desc) {
	margin: 0 !important;
	margin-top: 12px !important;
	max-width: 560px !important;
	font-size: calc(100cqw * var(--hero-typo-desc) / var(--hero-typo-ref)) !important;
	line-height: 1.5 !important;
	color: #f1f5f9 !important;
}

.hero-layout-custom .hero-layout-box.hero-layout-box-desc .main-slide-description {
	margin: 0 !important;
	max-width: none !important;
	font-size: calc(100cqw * var(--hero-typo-desc) / var(--hero-typo-ref)) !important;
	line-height: 1.5 !important;
	color: #f1f5f9 !important;
}

.hero-layout-custom .hero-layout-box.hero-layout-box-subtitle .title.lg {
	display: block;
}

.hero-layout-custom .hero-layout-cta {
	position: absolute;
	z-index: 3;
	left: calc(100% * 40 / 1280);
	bottom: 8%;
	margin-top: 0;
}

.hero-layout-box .main-slide-description {
	word-break: keep-all;
	overflow-wrap: break-word;
}