/**
 * Hero 페이드 슬라이더 — 태블릿/모바일 전용 레이아웃.
 * 타이포는 hero_typography_system.css 의 :root 변수(브레이크포인트별 재정의).
 * 데스크톱(1025px+) 레이아웃은 변경하지 않음. 전환 duration/JS 로직 미변경.
 *
 * 브레이크포인트:
 * - desktop: 1025px 이상 (이 파일 미적용)
 * - tablet: 768px ~ 1024px
 * - mobile: 767px 이하
 * - small mobile: 480px 이하
 */

/* ---------- Tablet: 768px ~ 1024px ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section_01 .main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	.section_01 .main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) > .title_wrap {
		max-width: 48%;
	}
}

/* ---------- Mobile: max-width 767px ---------- */
@media screen and (max-width: 767px) {
	/* 레거시 .section_01 모바일 규칙(이미지 absolute·scale)보다 우선 — 페이드 히어만 */
	body.cocoble_landing.home-page .section_01,
	body.hero-preview-shell .section_01 {
		height: auto !important;
		min-height: 100vh;
		min-height: 100dvh;
		max-height: none !important;
	}

	body.cocoble_landing.home-page .section_01 > .container,
	body.hero-preview-shell .section_01 > .container {
		height: auto !important;
		min-height: inherit;
		justify-content: flex-start;
		padding-left: 0;
		padding-right: 0;
	}

	.main_slide.hero-fade-slider {
		position: absolute !important;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		min-height: 100dvh;
	}

	.hero-fade-track {
		min-height: 100%;
		height: 100%;
	}

	/* 세로 스택: 카피 → 제목 → 설명 → CTA → 이미지 (DOM 순서 유지) */
	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: calc(var(--hero-header-offset, 88px) + 8px) 18px 104px !important;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		text-align: center;
	}

	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) > .title_wrap {
		width: 100% !important;
		max-width: 92% !important;
		margin: 0 auto !important;
		margin-bottom: 0 !important;
		padding: 0 !important;
		text-align: center !important;
		flex-shrink: 0;
		order: 1;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img,
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 > .img,
	/* slide-item-3+ (브랜드 레이아웃) */
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand:not(.slide-item-1):not(.slide-item-2):not(.hero-slide-image-full) > .img {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		top: auto !important;
		transform: none !important;
		width: 78% !important;
		max-width: min(340px, 82vw) !important;
		margin: 28px auto 8px !important;
		opacity: 1 !important;
		height: auto !important;
		flex-shrink: 0;
		order: 2;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img img,
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 > .img img,
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand:not(.slide-item-1):not(.slide-item-2):not(.hero-slide-image-full) > .img img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
		object-position: center bottom !important;
		transform: none !important;
	}

	/* 페이드 시 .img 에 붙는 translateY(-50%) 제거 — 인라인 플로우와 맞춤 */
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--exit > .img {
		transform: none !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from > .img {
		transform: translate3d(0, 8px, 0) !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--enter-from.hero-slide--enter-active > .img {
		transform: translate3d(0, 0, 0) !important;
	}

	/* 슬라이드 2: kicker / hero-text 패딩 */
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 .title_wrap .hero-text {
		padding-top: 0 !important;
		text-align: center !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 .hero-kicker {
		display: inline-block;
		max-width: 100%;
		padding: 0 4px;
		box-sizing: border-box;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 .title_wrap .hero-text .hero-title.title.visual_bounce {
		padding-top: 0 !important;
		max-width: 22rem;
		margin-left: auto;
		margin-right: auto;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 .title_wrap.hero-slide1-restore .hero-desc,
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 .hero-desc {
		max-width: 22rem !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* CTA — 모바일에서 과도한 전폭 방지 */
	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) .visual_btn {
		margin-top: 18px !important;
		display: inline-flex;
		justify-content: center;
		width: 100%;
		max-width: 92%;
		margin-left: auto;
		margin-right: auto;
	}

	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) .visual_btn a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}

	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) .visual_btn a img {
		width: 14px !important;
		height: auto;
		margin-left: 6px !important;
	}

	.main-slide-pagination.hero-fade-dots {
		bottom: 14px !important;
		padding: 0 40px;
		box-sizing: border-box;
		gap: 11px !important;
	}

	/* image_full 레이아웃은 별도 — CTA만 살짝 여백 */
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide-image-full .hero-image-full-cta {
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: auto !important;
		max-width: 90%;
		bottom: 10% !important;
	}

}

/* 모바일: 긴 카피 세로 스크롤 — 슬라이드 박스가 터치를 받아야 함 */
@media screen and (max-width: 768px) {
	.main_slide.hero-fade-slider .slide.hero-slide.active {
		pointer-events: auto;
	}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.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: none !important;
	}
}

/* ---------- Small mobile: max-width 480px ---------- */
@media screen and (max-width: 480px) {
	.main_slide.hero-fade-slider .slide.hero-slide:not(.hero-slide-image-full) {
		padding: calc(var(--hero-header-offset, 88px) + 4px) 14px 108px !important;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 .title_wrap .hero-text .hero-title.title.visual_bounce {
		max-width: 100%;
	}

	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-1 > .img,
	.main_slide.hero-fade-slider .slide.hero-slide.slide-item-2 > .img,
	.main_slide.hero-fade-slider .slide.hero-slide.hero-slide--theme-brand:not(.slide-item-1):not(.slide-item-2):not(.hero-slide-image-full) > .img {
		width: 82% !important;
		max-width: min(300px, 85vw) !important;
		margin-top: 22px !important;
	}

	.main-slide-pagination.hero-fade-dots {
		bottom: 10px !important;
		padding: 0 32px;
		gap: 10px !important;
	}
}