/* ========================================
   Full Page Scroll Container
======================================== */
body.is-main {
	overflow: hidden;
}

.main-wrapper {
	height: 100vh;
	height: 100dvh; /* 동적 뷰포트 높이 */
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

/* 스크롤바 숨김 (풀페이지 스크롤용) */
.main-wrapper::-webkit-scrollbar {
	width: 0;
	display: none;
}

.main-wrapper {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.fp-section {
	height: 100vh;
	height: 100dvh; /* 동적 뷰포트 높이 - 브라우저 UI 고려 */
}

/* Brands 섹션은 콘텐츠 높이에 맞게 */
.fp-section.brands {
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ========================================
   Section: HERO
======================================== */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 600px; /* 노트북 화면 대응 */
	overflow: hidden;
	background-color: #0D0D0D;
}

.hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url('/img/main/hero_bg_01.jpg') center center / cover no-repeat;
}

.hero__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.hero__video.loaded {
	opacity: 1;
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.hero__txt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 68px;
	line-height: 1.2999999102424173;
	letter-spacing: -0.02em;
	text-align: center;
	color: #FFFFFF;
}

.hero__subtitle {
	font-family: var(--font-primary);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.2999999636695498;
	letter-spacing: -0.02em;
	text-align: center;
	color: #FFFFFF;
}

@media screen and (max-width: 1440px) {
	.hero__title {
		font-size: 60px;
	}
	.hero__subtitle {
		font-size: 19px;
	}
}

@media screen and (max-width: 1280px) {
	.hero {
		min-height: 550px;
	}
	.hero__title {
		font-size: 52px;
	}
	.hero__subtitle {
		font-size: 18px;
	}
}

@media screen and (max-width: 1024px) {
	body.is-main {
		overflow: auto;
	}
	
	.main-wrapper {
		height: auto;
		overflow: visible;
	}
	
	.fp-section {
		height: auto;
	}
	
	.hero {
		height: 100vh;
		height: 100dvh;
		min-height: 700px;
	}
	.hero__content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
		box-sizing: border-box;
	}
	.hero__txt {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		transform: none;
		gap: 30px;
	}
	.hero__title {
		font-size: 44px;
	}
	.hero__subtitle {
		font-size: 16px;
	}
}

@media screen and (max-width: 640px) {
	.hero {
		min-height: 600px;
	}
	.hero__content {
		padding-top: 70px;
	}
	.hero__title {
		font-size: 32px;
	}
	.hero__subtitle {
		font-size: 14px;
	}
	.hero__txt {
		gap: 20px;
		padding: 0 var(--container-padding);
	}
}

@media screen and (max-width: 480px) {
	.hero {
		min-height: 500px;
	}
	.hero__title {
		font-size: 28px;
	}
	.hero__subtitle {
		font-size: 13px;
	}
	.hero__content {
		padding-top: 60px;
	}
	.hero__txt {
		gap: 15px;
	}
}

/* ========================================
   Section 01: OUR BRANDS
======================================== */
.brands {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: #0D0D0D;
	overflow: hidden;
}

.brands__inner {
	position: relative;
	width: 100%;
	padding: 120px 50px 60px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.brands__title {
	flex-shrink: 0;
	text-align: center;
	margin-bottom: 30px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #FFFFFF;
}

.brands__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.brands__card {
	position: relative;
	aspect-ratio: 600 / 335;
	background: #191919;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
	cursor: pointer;
}

.brands__card:hover {
	transform: scale(1.02);
}

.brands__card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #191919;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

.brands__card-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s ease;
	overflow: hidden;
}

.brands__card-video.loaded {
	opacity: 1;
}

.brands__card-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140%;
	height: 140%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.brands__card-logo {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.brands__card:hover .brands__card-logo {
	opacity: 0.3;
}

.brands__card-video.loaded ~ .brands__card-logo {
	opacity: 0;
}

/* OUR BRANDS 그리드 로고 - Figma 261-4856 시안 카드별 크기 그대로 적용 */
.brands__card-logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.brands__card--ikegami .brands__card-logo img { width: 140px; height: 35px; }
.brands__card--shotoku .brands__card-logo img { width: 125px; height: 35px; }
.brands__card--pixotope .brands__card-logo img { width: 311px; height: 35px; }
.brands__card--7thsense .brands__card-logo img { width: 172px; height: 25px; }
.brands__card--videotron .brands__card-logo img { width: 198px; height: 25px; }
.brands__card--leader .brands__card-logo img { width: 108px; height: 25px; }
.brands__card--fabulux .brands__card-logo img { width: 134px; height: 65px; }
.brands__card--rts .brands__card-logo img { width: 105px; height: 35px; }
.brands__card--laon .brands__card-logo img { width: 153px; height: 45px; }

/* VIDEOTRON 카드 - 기본 검정 배경 + 호버 시 노란 배경 */
.brands__card--image {
	background: #191919;
}

.brands__card--image .brands__card-bg {
	background: #191919 !important;
	transition: opacity 0.3s ease;
}

.brands__card--image .brands__card-logo {
	display: flex;
}

.brands__card--image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FECF07;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.brands__card--image:hover::before {
	opacity: 1;
}

.brands__card--image:hover .brands__card-bg {
	opacity: 0;
}

/* VIDEOTRON 호버 시 로고 밝게 유지 */
.brands__card--image:hover .brands__card-logo {
	opacity: 1;
}

@media screen and (max-width: 1280px) {
	.brands__inner {
		padding: 60px 30px 40px;
	}
	
	.brands__title {
		margin-bottom: 25px;
	}
}

@media screen and (max-width: 1024px) {
	.brands {
		height: auto;
		min-height: auto;
		padding: 120px 0;
	}
	
	.brands__inner {
		padding: 0 20px;
	}
	
	.brands__title {
		font-size: 28px;
		padding-top: 0;
	}
	
	.brands__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 640px) {
	.brands {
		padding: 60px 0;
	}
	
	.brands__title {
		font-size: 24px;
		margin-bottom: 30px;
	}
	
	.brands__grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ========================================
   Section 02-09: Showcase
======================================== */
.showcase {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 600px; /* 노트북 화면 대응 */
	background-color: #0D0D0D;
	overflow: hidden;
}

.showcase__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.showcase__bg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Brand Showcase Sections */
.showcase--brand .showcase__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.8s ease;
	overflow: hidden;
}

.showcase--brand .showcase__video.loaded {
	opacity: 1;
}

/* 영상 재생 시에만 로고·View More 노출 (이미지 상태일 때는 숨김) */
.showcase--brand .showcase__content {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
.showcase--brand .showcase__video.loaded ~ .showcase__content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.showcase--brand .showcase__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 비율 */
	min-height: 100vh;
	min-width: 177.78vh; /* 16:9 비율 */
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.showcase__content {
	position: absolute;
	left: 50px;
	bottom: 80px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* 메인 동영상 영역(showcase) 로고 - Figma 시안 원본 px, 브랜드 클래스로 적용 */
.showcase__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: 100%;
	box-sizing: border-box;
}

.showcase__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* Figma: 261-3035 Ikegami, 261-3102 Shotoku, 261-3185 Pixotope, 261-3265 7thSense, 261-3333 Leader, 261-3441 Fabulux, 261-3542 RTS, 261-3717 LaON */
.showcase--ikegami .showcase__logo { width: 487px; height: 120px; }
.showcase--shotoku .showcase__logo { width: 428px; height: 120px; }
.showcase--pixotope .showcase__logo { width: 887px; height: 100px; }
.showcase--7thsense .showcase__logo { width: 622px; height: 90px; }
.showcase--leader .showcase__logo { width: 385px; height: 90px; }
.showcase--fabulux .showcase__logo { width: 308px; height: 150px; }
.showcase--rts .showcase__logo { width: 300px; height: 100px; }
.showcase--laon .showcase__logo { width: 415px; height: 120px; }

.showcase__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 240px;
	height: 65px;
	padding: 0 30px;
	background: rgba(255, 255, 255, 0.01);
	border: 1px solid #FFFFFF;
	backdrop-filter: blur(15px);
	transition: background 0.3s ease, border-color 0.3s ease;
	overflow: hidden;
}

.showcase__btn:hover {
	background: #FECF07;
	border-color: #FECF07;
}

.showcase__btn:hover .showcase__btn-text {
	color: #FFFFFF;
}

.showcase__btn:hover .showcase__btn-arrow svg path {
	stroke: #FFFFFF;
}

/* 버튼 텍스트 슬라이드 모션 */
.showcase__btn-motion {
	display: flex;
	flex-direction: column;
	height: 23px;
	overflow: hidden;
}

.showcase__btn-motion .showcase__btn-text {
	transition: transform 0.3s ease;
}

.showcase__btn:hover .showcase__btn-motion .showcase__btn-text {
	transform: translateY(-100%);
}

.showcase__btn-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	flex-shrink: 0;
}

.showcase__btn-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ========================================
   Main Footer Section (fullpage.js wrapper)
======================================== */
.main-footer-section {
	height: auto;
	min-height: auto;
	background: #000000;
}

@media screen and (max-width: 1280px) {
	.showcase {
		min-height: 550px;
	}
	
	.showcase__content {
		left: 30px;
		bottom: 50px;
		gap: 30px;
	}
	
	/* 브랜드별 비율 유지 (기준 width 200px) */
	.showcase--ikegami .showcase__logo { width: 200px; height: 49px; }
	.showcase--shotoku .showcase__logo { width: 200px; height: 56px; }
	.showcase--pixotope .showcase__logo { width: 200px; height: 23px; }
	.showcase--7thsense .showcase__logo { width: 200px; height: 29px; }
	.showcase--leader .showcase__logo { width: 200px; height: 47px; }
	.showcase--fabulux .showcase__logo { width: 200px; height: 97px; }
	.showcase--rts .showcase__logo { width: 200px; height: 67px; }
	.showcase--laon .showcase__logo { width: 200px; height: 58px; }
	
	.showcase__btn {
		width: 200px;
		height: 54px;
		padding: 0 25px;
	}
	
	.showcase__btn-text {
		font-size: 16px;
	}
}

@media screen and (max-width: 1024px) {
	.showcase {
		height: auto;
		min-height: 600px;
	}
	
	.showcase__content {
		left: 20px;
		right: 20px;
		bottom: 40px;
		gap: 30px;
	}
	
	/* 브랜드별 비율 유지 (기준 width 160px) */
	.showcase--ikegami .showcase__logo { width: 160px; height: 39px; }
	.showcase--shotoku .showcase__logo { width: 160px; height: 45px; }
	.showcase--pixotope .showcase__logo { width: 160px; height: 18px; }
	.showcase--7thsense .showcase__logo { width: 160px; height: 23px; }
	.showcase--leader .showcase__logo { width: 160px; height: 37px; }
	.showcase--fabulux .showcase__logo { width: 160px; height: 78px; }
	.showcase--rts .showcase__logo { width: 160px; height: 53px; }
	.showcase--laon .showcase__logo { width: 160px; height: 46px; }
	
	.showcase__btn {
		width: 160px;
		height: 45px;
		padding: 0 18px;
	}
	
	.showcase__btn-text {
		font-size: 14px;
	}
	
	.main-footer-section {
		height: auto;
	}
	
	/* 모바일: 잘림 최소화 - 가로 잘림 방지, 세로만 약간 잘림 */
	.showcase--brand .showcase__video iframe {
		width: 100vw;
		height: 56.25vw; /* 16:9 비율 유지 */
		min-height: 100%; /* 섹션 높이는 채움 */
		min-width: auto; /* 가로 확장 제한 제거 → 좌우 잘림 방지 */
	}
	
	/* 배경 이미지: 중앙 정렬 + 잘림 최소화 */
	.showcase__bg img {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		height: 56.25vw; /* 16:9 비율 유지 */
		min-height: 100%; /* 섹션 높이는 채움 */
	}
}

@media screen and (max-width: 640px) {
	.showcase {
		min-height: 500px;
	}
	
	.showcase__content {
		left: 15px;
		right: 15px;
		bottom: 30px;
		gap: 20px;
	}
	
	/* 브랜드별 비율 유지 (기준 width 120px) */
	.showcase--ikegami .showcase__logo { width: 120px; height: 30px; }
	.showcase--shotoku .showcase__logo { width: 120px; height: 34px; }
	.showcase--pixotope .showcase__logo { width: 120px; height: 14px; }
	.showcase--7thsense .showcase__logo { width: 120px; height: 17px; }
	.showcase--leader .showcase__logo { width: 120px; height: 28px; }
	.showcase--fabulux .showcase__logo { width: 120px; height: 58px; }
	.showcase--rts .showcase__logo { width: 120px; height: 40px; }
	.showcase--laon .showcase__logo { width: 120px; height: 35px; }
	
	.showcase__btn {
		width: 110px;
		height: 36px;
		padding: 0 12px;
	}
	
	.showcase__btn-text {
		font-size: 12px;
	}
}

/* ========================================
   Height-based Media Queries (노트북 화면 대응)
======================================== */
/* 높이가 낮은 화면 (노트북 등) - PC 너비일 때만 적용 */
@media screen and (min-width: 1025px) and (max-height: 800px) {
	.hero {
		min-height: auto;
	}
	
	.hero__txt {
		gap: 25px;
	}
	
	.hero__title {
		font-size: 48px;
	}
	
	.hero__subtitle {
		font-size: 17px;
	}
	
	.brands {
		min-height: auto;
	}
	
	.brands__inner {
		padding: 50px 40px 30px;
	}
	
	.brands__title {
		font-size: 28px;
		margin-bottom: 20px;
	}
	
	.brands__grid {
		gap: 8px;
	}
	
	.showcase {
		min-height: auto;
	}
	
	.showcase__content {
		bottom: 40px;
		gap: 25px;
	}
	
	.showcase--ikegami .showcase__logo { width: 200px; height: 49px; }
	.showcase--shotoku .showcase__logo { width: 200px; height: 56px; }
	.showcase--pixotope .showcase__logo { width: 200px; height: 23px; }
	.showcase--7thsense .showcase__logo { width: 200px; height: 29px; }
	.showcase--leader .showcase__logo { width: 200px; height: 47px; }
	.showcase--fabulux .showcase__logo { width: 200px; height: 97px; }
	.showcase--rts .showcase__logo { width: 200px; height: 67px; }
	.showcase--laon .showcase__logo { width: 200px; height: 58px; }
	
	.showcase__btn {
		width: 180px;
		height: 50px;
		padding: 0 22px;
	}
	
	.showcase__btn-text {
		font-size: 15px;
	}
}

/* 매우 낮은 높이 (768px 이하) */
@media screen and (min-width: 1025px) and (max-height: 700px) {
	.hero__txt {
		gap: 20px;
	}
	
	.hero__title {
		font-size: 42px;
	}
	
	.hero__subtitle {
		font-size: 15px;
	}
	
	.brands__inner {
		padding: 40px 30px 20px;
	}
	
	.brands__title {
		font-size: 24px;
		margin-bottom: 15px;
	}
	
	.showcase__content {
		bottom: 30px;
		gap: 20px;
	}
	
	.showcase--ikegami .showcase__logo { width: 180px; height: 44px; }
	.showcase--shotoku .showcase__logo { width: 180px; height: 50px; }
	.showcase--pixotope .showcase__logo { width: 180px; height: 20px; }
	.showcase--7thsense .showcase__logo { width: 180px; height: 26px; }
	.showcase--leader .showcase__logo { width: 180px; height: 42px; }
	.showcase--fabulux .showcase__logo { width: 180px; height: 88px; }
	.showcase--rts .showcase__logo { width: 180px; height: 60px; }
	.showcase--laon .showcase__logo { width: 180px; height: 52px; }
	
	.showcase__btn {
		width: 160px;
		height: 45px;
	}
	
	.showcase__btn-text {
		font-size: 14px;
	}
}