:root{
--header-height:96px;
--color-primary:#3A4081;
--color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08);
--color-primary-soft-strong:rgba(58,64,129,.12);
--color-primary-soft-border:rgba(58,64,129,.16);
--color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18);
}

html{scrollbar-gutter:inherit;}
body{overflow-x:hidden;}

.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}


/*main visual*/
.main-page { background: #000; color: #fff; overflow-x: hidden; }
.hero-scroll-container { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.parallax-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.p-layer { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; object-fit: cover; will-change: transform; }
.layer-1 { z-index: 1; } .layer-2 { z-index: 2; } .layer-3 { z-index: 3; } .layer-4 { z-index: 4; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%); z-index: 5; }
/* 메인 컨텐츠 위치 살짝 상단으로 */
.main-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding-top: 5vh; }
/* 하단 텍스트를 화면 중앙 근처로 끌어올림 */
.next-content { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 11; text-align: center; width: 100%; }
.next-content h2 { font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tagline { font-size: 14px; letter-spacing: 4px; color: #00aeef; margin-bottom: 20px; font-weight: 600; }
.title-wrapper { overflow: hidden; margin-bottom: 30px; }
.reveal-text { display: inline-block; font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 800; line-height: 1.1; }
.desc { font-size: 18px; line-height: 1.6; color: #ccc; max-width: 600px; margin-bottom: 40px; }
.btn-cta { padding: 15px 40px; border: 1px solid #fff; color: #fff; text-decoration: none; transition: all 0.3s; letter-spacing: 2px; font-weight: 500; }
.btn-cta:hover { background: #fff; color: #000; }
.next-content { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 11; text-align: center; }