/**
 * Hero 페이드 슬라이더 공통 타이포그래피 (기준: 슬라이드 1 레퍼런스)
 * 계층: hero-kicker → hero-title → hero-desc → .visual_btn a.hero-button
 * 슬라이드 번호별 font-size 분기 없음 — 동일 클래스·변수만 사용.
 */
:root {
	/* Desktop (1025px 이상 기준값) — 슬라이드 1에서 추출한 clamp */
	--hero-fs-kicker: clamp(44px, 5vw, 64px);
	--hero-fs-title: clamp(38px, 7.85vw, 102px);
	--hero-fs-desc: clamp(16px, 1.41vw, 20px);
	--hero-fs-button: 22px;

	--hero-lh-kicker: 1.1;
	--hero-lh-title: 1.08;
	--hero-lh-desc: 1.5;
	--hero-lh-button: 1.25;

	--hero-ls-kicker: -0.02em;
	--hero-ls-title: -0.03em;
	--hero-ls-desc: -0.01em;

	--hero-fw-kicker: 700;
	--hero-fw-title: 700;
	--hero-fw-desc: 400;
	--hero-fw-button: 700;

	--hero-gap-kicker-bottom: 10px;
	--hero-gap-title-top: 6px;
	--hero-gap-desc-top: 12px;
	--hero-gap-btn-top: clamp(36px, 4vw, 52px); /* 슬라이드 1 기존 CTA 상단 여백 */

	--hero-desc-max-width: 560px;

	--hero-btn-padding-y: 14px;
	--hero-btn-padding-x: 48px;
	--hero-btn-radius: 40px;
	--hero-btn-min-height: 52px;
}

/* Tablet: 768px ~ 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	:root {
		--hero-fs-kicker: clamp(34px, 4.2vw, 52px);
		--hero-fs-title: clamp(48px, 6.5vw, 78px);
		--hero-fs-desc: clamp(15px, 1.5vw, 19px);
		--hero-fs-button: 20px;
		--hero-btn-padding-x: 40px;
	}
}

/* Mobile: max-width 767px */
@media screen and (max-width: 767px) {
	:root {
		--hero-fs-kicker: clamp(22px, 5.5vw, 34px);
		--hero-fs-title: clamp(28px, 9vw, 56px);
		--hero-fs-desc: clamp(16px, 4vw, 18px);
		--hero-fs-button: clamp(17px, 4.2vw, 20px);
		--hero-gap-kicker-bottom: 10px;
		--hero-gap-title-top: 4px;
		--hero-gap-desc-top: 12px;
		--hero-gap-btn-top: 18px;
		--hero-btn-padding-y: 12px;
		--hero-btn-padding-x: 22px;
		--hero-btn-radius: 999px;
		--hero-desc-max-width: 22rem;
	}
}

/* Small mobile: max-width 480px */
@media screen and (max-width: 480px) {
	:root {
		--hero-fs-kicker: clamp(20px, 5.5vw, 28px);
		--hero-fs-title: clamp(28px, 9.5vw, 48px);
		--hero-fs-desc: clamp(15px, 3.8vw, 17px);
		--hero-fs-button: 16px;
		--hero-btn-padding-y: 10px;
		--hero-btn-padding-x: 18px;
	}
}

/* ----- 공통: 모든 슬라이드 동일 계층 ----- */
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .hero-kicker,
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap h2.title.lg.hero-kicker {
	font-family: "GmarketSans", "Noto Sans KR", sans-serif;
	font-size: var(--hero-fs-kicker) !important;
	font-weight: var(--hero-fw-kicker);
	line-height: var(--hero-lh-kicker);
	letter-spacing: var(--hero-ls-kicker);
	margin-bottom: var(--hero-gap-kicker-bottom);
	color: #fff;
	display: block;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap h2.title.hero-kicker {
	padding-bottom: 0;
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .hero-title,
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap h2.title.hero-title {
	font-family: "GmarketSans", "Noto Sans KR", sans-serif;
	font-size: var(--hero-fs-title) !important;
	font-weight: var(--hero-fw-title);
	line-height: var(--hero-lh-title);
	letter-spacing: var(--hero-ls-title);
	color: #fff;
	margin-top: 0;
	margin-bottom: 0;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* kicker·기타 블록 다음에 오는 큰 제목만 상단 간격 */
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap * + .hero-title {
	margin-top: var(--hero-gap-title-top);
}

/* 큰 제목 다음 줄(슬라이드 3+ 등) 작은 제목 라인 */
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .hero-title + .hero-kicker {
	margin-top: var(--hero-gap-title-top);
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap h2.title.visual_bounce.hero-title {
	letter-spacing: var(--hero-ls-title);
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .hero-desc,
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap p.main-slide-description.hero-desc {
	font-family: "Noto Sans KR", "GmarketSans", sans-serif;
	font-size: var(--hero-fs-desc) !important;
	font-weight: var(--hero-fw-desc);
	line-height: var(--hero-lh-desc);
	letter-spacing: var(--hero-ls-desc);
	color: #f1f5f9 !important;
	margin-top: var(--hero-gap-desc-top) !important;
	margin-bottom: 0 !important;
	max-width: var(--hero-desc-max-width);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .visual_btn {
	margin-top: var(--hero-gap-btn-top);
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .visual_btn a.hero-button,
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .visual_btn a {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Noto Sans KR", sans-serif;
	font-size: var(--hero-fs-button) !important;
	font-weight: var(--hero-fw-button);
	line-height: var(--hero-lh-button);
	padding: var(--hero-btn-padding-y) var(--hero-btn-padding-x);
	min-height: var(--hero-btn-min-height);
	border-radius: var(--hero-btn-radius);
	box-sizing: border-box;
	background: #fff;
	color: #2f67fb;
}

.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .visual_btn a.hero-button img,
.main_slide.hero-fade-slider .slide.hero-slide .title_wrap .visual_btn a img {
	margin-left: 8px;
	width: auto;
	height: 1em;
}

/* title_wrap 밖 CTA(image_full · 커스텀 레이아웃) — 동일 버튼 토큰 */
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full .hero-image-full-cta a.hero-button,
.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full .hero-image-full-cta a,
.main_slide.hero-fade-slider .slide.hero-slide .hero-layout-cta a.hero-button,
.main_slide.hero-fade-slider .slide.hero-slide .hero-layout-cta a {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Noto Sans KR", sans-serif;
	font-size: var(--hero-fs-button) !important;
	font-weight: var(--hero-fw-button);
	line-height: var(--hero-lh-button);
	padding: var(--hero-btn-padding-y) var(--hero-btn-padding-x);
	min-height: var(--hero-btn-min-height);
	border-radius: var(--hero-btn-radius);
	box-sizing: border-box;
	background: #fff;
	color: #2f67fb;
}