@charset "UTF-8";
/* ============================================
   BANNER SECTION STYLES
   ============================================ */

/* 공통 배너 섹션 */
.banner-section {
	width: 100%;
	overflow: hidden;
}

.banner-section .banner-slider {
	position: relative;
}

.banner-section .swiper-slide {
	text-align: center;
	background: #f5f5f5;
}

.banner-section .swiper-slide a {
	display: block;
}

.banner-section .swiper-slide picture {
	display: block;
	width: 100%;
}

.banner-section .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* Swiper 네비게이션 */
.banner-section .swiper-pagination {
	position: absolute;
	bottom: 15rem;
	left: 0;
	right: 0;
	z-index: 10;
}

.banner-section .swiper-pagination-bullet {
	background-color: rgba(255, 255, 255, 0.5);
	opacity: 1;
	width: 10rem;
	height: 10rem;
	box-shadow: 0 0 3rem rgba(0, 0, 0, 0.3);
}

.banner-section .swiper-pagination-bullet-active {
	background-color: #fff;
}

.banner-section .swiper-button-prev,
.banner-section .swiper-button-next {
	color: #fff;
}

.banner-section .swiper-button-prev::after,
.banner-section .swiper-button-next::after {
	font-size: 24rem;
}

/* 메인 상단 배너 (1920 x 500) - 풀 와이드 */
.banner-main-top {
	width: 100%;
}

.banner-main-top .swiper-slide {
	background: #000;
}

/* 메인 중단 배너 (1200 x 400) - 컨텐츠 영역 */
.banner-main-middle {
	margin: 0 auto;
	width: calc(100% - 40rem);
	max-width: 1400rem;
	padding: 40rem 0;
}

.banner-main-middle .banner-slider {
	border-radius: 8rem;
	overflow: hidden;
}

/* 서브 상단 배너 (1920 x 300) - 풀 와이드 */
.banner-sub-top {
	width: 100%;
}

.banner-sub-top .swiper-slide {
	background: #f0f0f0;
}

/* ============================================
   히어로 배너 — schema.md §11 v0.27
   POSITION 2종:
     MAIN_TOP  — 권장 이미지 PC 1920*950 / MO 360*550
     BRAND_TOP — 권장 이미지 PC 1920*1040 / MO 360*640
   텍스트 오버레이 = ETC_3(소제목) → ETC_2(제목/대제목) → ETC_4(내용)
   ※ 좌표는 Figma 1920×1080 풀스크린 기준 측정값. 정확한 폰트 사이즈/위치는
      Phase 6 퍼블에서 권장 이미지 사이즈 정합 후 디자인 마무리
   ============================================ */

/* Brand 페이지 히어로 — 메인과 동일 풀와이드 골격 */
.banner-brand-top {
	width: 100%;
}

.banner-brand-top .swiper-slide {
	background: #000;
}

/* 텍스트 오버레이 공통 골격 */
.banner-section .swiper-slide {
	position: relative;
}

.banner-section .banner-text {
	position: absolute;
	z-index: 5;
	color: #000;             /* 디자인 기본 — 어두운 배경 슬라이드는 별도 클래스 분기 (Phase 6) */
	pointer-events: none;    /* 링크 클릭 방해 X */
	box-sizing: border-box;
}

.banner-section .banner-text-eyebrow {
	margin: 0 0 12rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.banner-section .banner-text-title {
	margin: 0 0 40rem;
	font-weight: 700;
	line-height: 1.1;
}

.banner-section .banner-text-body {
	margin: 0;
	line-height: 1.5;
}

/* MAIN_TOP — Figma 8876:23572 (텍스트 685×436 @ x=262, y=514) */
.banner-main-top .banner-text {
	left: 262rem;
	top: 514rem;
	width: 685rem;
}

.banner-main-top .banner-text-title {
	font-size: 80rem;
}

.banner-main-top .banner-text-body {
	font-size: 18rem;
}

/* BRAND_TOP — Figma 8876:23799 (텍스트 828×258 @ x=120, y=232) */
.banner-brand-top .banner-text {
	left: 120rem;
	top: 232rem;
	width: 828rem;
}

.banner-brand-top .banner-text-eyebrow {
	font-size: 22rem;
}

.banner-brand-top .banner-text-title {
	font-size: 90rem;
}

.banner-brand-top .banner-text-body {
	font-size: 18rem;
}

/* 반응형 - 모바일 */
@media screen and (max-width: 1280px) {
	.banner-main-middle {
		padding: 30rem 0;
	}

	.banner-section .swiper-button-prev::after,
	.banner-section .swiper-button-next::after {
		font-size: 18rem;
	}
}

@media screen and (max-width: 767px) {
	.banner-main-middle {
		padding: 20rem 0;
	}

	.banner-section .swiper-button-prev,
	.banner-section .swiper-button-next {
		display: none;
	}

	/* 텍스트 오버레이 모바일 — 디자인 확정 시 픽셀 정합 (Phase 6 퍼블) */
	.banner-main-top .banner-text,
	.banner-brand-top .banner-text {
		left: 24rem;
		top: 80rem;
		right: 24rem;
		width: auto;
	}

	.banner-main-top .banner-text-title,
	.banner-brand-top .banner-text-title {
		font-size: 36rem;
	}

	.banner-brand-top .banner-text-eyebrow {
		font-size: 14rem;
	}

	.banner-main-top .banner-text-body,
	.banner-brand-top .banner-text-body {
		font-size: 14rem;
	}
}