@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@100;400;700;900&family=Noto+Serif+KR:wght@400;700;900&display=swap');

@font-face {
    font-family: 'MapoGeumbitnaru';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
        
:root {
	--brand-blue: #1e4b8f;
	--brand-gold: #c2a87e;
	--warm-beige: #f9f8f5;
	--soft-blue: #f0f7ff;
	--brand-orange:#f26522;
}


body {
	font-family: 'Pretendard', sans-serif;
	background-color: var(--warm-beige);
	color: #333;
	overflow-x: hidden;
}

.font-serif { font-family: 'MapoGeumbitnaru', serif !important; }

/* [NAVBAR 통합 제어] */
.header-nav {
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	background: rgba(255, 255, 255, 0);
	border-bottom: 0px solid rgba(30, 75, 143, 0.1);
}
.header-nav.scrolled {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	height: 80px;
	border-bottom: 1px solid rgba(30, 75, 143, 0.1);
}
 
 .header-nav.menu-open {
	background: rgba(255, 255, 255, 0.98);
	}

/* 로고 스왑 제어 (이미지 통합) */
.logo-img { transition: opacity 0.3s, transform 0.3s; }
.logo-blue { position: absolute; top: 0; left: 0; opacity: 0; }

/* 스크롤 시 또는 모바일 메뉴 오픈 시 로고 변경 */
.scrolled .logo-white, .menu-open .logo-white { opacity: 0; visibility: hidden; }
.scrolled .logo-blue, .menu-open .logo-blue { opacity: 1; visibility: visible; }

/* PC 메뉴 링크 색상 */
.pc-menu-link { color: rgba(255, 255, 255, 0.9); transition: color 0.3s; }
.scrolled .pc-menu-link { color: #64748b; }
.scrolled .pc-menu-link:hover { color: var(--brand-blue); }

#nav-cta-btn { background-color: white; color: var(--brand-blue); transition: all 0.3s; }
.scrolled #nav-cta-btn { background-color: var(--brand-blue); color: white; }

/* [PC 전용 드롭다운] */
.pc-nav-item:hover .pc-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.pc-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: white;
	min-width: 180px;
	border-radius: 20px;
	padding: 15px 0;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

/* [모바일 메뉴 사이드바] - dvh 적용 */
#mobile-drawer {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	transform: translateX(100%);
	background-color: white;
	height: 100dvh; 
	z-index: 250;
}
#mobile-drawer.active { transform: translateX(0); }

/* 모바일 아코디언 */
.m-sub-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: #f8fafc;
	border-radius: 16px;
	overflow: hidden;
}
.m-item.open .m-sub-wrapper {
	grid-template-rows: 1fr;
	margin-top: 8px;
	margin-bottom: 8px;
}
.m-sub-content { min-height: 0; }
.m-sub-content li a {
	display: block;
	padding: 14px 24px;
	font-size: 0.95rem;
	color: #64748b;
	font-weight: 600;
}
.m-item .chevron-icon { transition: transform 0.3s ease; }
.m-item.open .chevron-icon { transform: rotate(180deg); }

/* 기능 요소 */
.main-swiper { height: 100dvh; width: 100%; }
.slide-bg {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transform: scale(1.1); transition: transform 8s ease-out;
}
.swiper-slide-active .slide-bg { transform: scale(1); }

@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: marquee 60s linear infinite; /* 40초 주기로 부드럽게 재생 */
}

.marquee-track:hover { animation-play-state: paused; }
		
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.rounded-premium { border-radius: 4rem; }

/* [추가: 퀵 메뉴 및 탑 버튼 애니메이션] */
#floating-widget {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
	transform: translateY(20px);
	opacity: 0;
	pointer-events: none;
}
#floating-widget.visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
#quick-card {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	transform: scale(0.9) translateY(10px);
	opacity: 0;
	visibility: hidden;
	display:none;
	
}
#quick-card.active {
	transform: scale(1) translateY(0);
	opacity: 1;
	visibility: visible;
	display:block;
}