/* header */
@import url("./root.css");

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height, 72px);
	background: var(--bg-header-top);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	z-index: 1000;
	transition: all 0.4s ease;
}

.navbar.scrolled {
	background: var(--bg-header-scrolled);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border);
}

.nav-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

/* --- LOGO --- */
.logo {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 1002;
	color: var(--text-main);
}

.logo i {
	color: var(--primary);
	font-size: 1.5rem;
	transition: transform 0.3s;
}

.logo:hover i {
	transform: rotate(-10deg) scale(1.1);
}

/* --- CENTER MENU --- */
.nav-desktop {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 32px;
}

.nav-item {
	font-size: 0.95rem;
	color: var(--text-muted);
	font-weight: 500;
	position: relative;
	padding: 6px 0;
	transition: color 0.3s;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-item i {
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: var(--primary);
	transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 0 0 10px var(--primary-glow);
}

.nav-item:hover {
	color: var(--text-main);
}

.nav-item:hover::after {
	width: 100%;
}

.nav-item.active {
	color: var(--text-main);
	font-weight: 600;
}

.nav-item.active::after {
	width: 100%;
}

/* --- DESKTOP DROPDOWN (NEW) --- */
.nav-dropdown {
	position: relative;
	/* 마우스가 메뉴에서 벗어나도 드롭다운이 바로 사라지지 않게 패딩을 줍니다 */
	padding-bottom: 10px; 
	margin-bottom: -10px;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px) scale(0.95);
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 8px);
	min-width: 200px;
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 15px; /* 헤더와의 간격 조절 */
}

/* 꼬리표 (선택 사항) */
.dropdown-menu::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--bg-card);
	border-top: 1px solid var(--border);
	border-left: 1px solid var(--border);
}

.nav-dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

.nav-dropdown:hover .nav-item i {
	transform: rotate(180deg);
}

.dropdown-item {
	padding: 10px 16px;
	font-size: 0.9rem;
	color: var(--text-muted);
	border-radius: var(--radius-md, 4px);
	transition: var(--trans-fast);
	display: block;
	font-weight: 500;
}

.dropdown-item:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
	padding-left: 20px; /* 호버 시 화살표처럼 살짝 밀려나는 효과 */
}

/* --- RIGHT ACTIONS --- */
.nav-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	z-index: 1002;
}

/* Language Selector */
.lang-dropdown {
	position: relative;
}

.lang-trigger {
	font-size: 0.9rem;
	color: var(--text-muted);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	opacity: 0.8;
}

.lang-trigger:hover {
	opacity: 1;
	color: var(--text-main);
}

.lang-trigger i {
	font-size: 1rem;
	transition: transform 0.3s;
}

/* Desktop Lang Menu */
.lang-options {
	position: absolute;
	top: 140%;
	right: -10px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 4px);
	width: 140px;
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.95);
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lang-dropdown:hover .lang-options {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.lang-dropdown:hover .lang-trigger i {
	transform: rotate(180deg);
}

.lang-opt {
	padding: 10px 12px;
	font-size: 0.85rem;
	color: var(--text-muted);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lang-opt:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
}

.lang-opt.selected {
	color: var(--primary);
	background: rgba(0, 255, 204, 0.05);
}

.lang-opt.selected::after {
	content: '\EB7B';
	font-family: 'remixicon';
	font-size: 1rem;
}

/* Contact Button */
.btn-talk {
	padding: 8px 20px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--bg-body);
	background: var(--primary);
	border-radius: var(--radius-sm, 2px);
	transition: 0.3s;
	display: flex;
	align-items: center;
	gap: 6px;
}

.btn-talk:hover {
	background: #fff;
	transform: translateY(-1px);
	box-shadow: 0 0 15px var(--primary-glow);
}

/* --- HAMBURGER & MOBILE DRAWER --- */
.menu-toggle {
	display: none;
	width: 30px;
	height: 30px;
	position: relative;
	z-index: 1003;
}

.bar {
	width: 100%;
	height: 2px;
	background: var(--text-main);
	position: absolute;
	left: 0;
	transition: 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.bar:nth-child(1) { top: 8px; }
.bar:nth-child(2) { top: 15px; }
.bar:nth-child(3) { top: 22px; }

.menu-toggle.open .bar:nth-child(1) {
	top: 15px;
	transform: rotate(45deg);
	background: var(--primary);
}
.menu-toggle.open .bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
	top: 15px;
	transform: rotate(-45deg);
	background: var(--primary);
}

.mobile-drawer {
	display: none;
}


@media (max-width: 768px) {
	.nav-desktop,
	.nav-actions {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.mobile-drawer {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100vh;
		background: var(--bg-drawer);
		z-index: 1001;
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
		flex-direction: column;
		padding: 100px 30px 40px;
		overflow-y: auto;
	}

	.mobile-drawer.open {
		transform: translateX(0);
	}

	.drawer-close-btn {
		position: absolute;
		top: 25px;
		right: 24px;
		font-size: 2rem;
		color: var(--text-muted);
		transition: 0.3s;
		z-index: 1005;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 50%;
	}

	.drawer-close-btn:hover {
		color: var(--primary);
		background: rgba(255, 255, 255, 0.1);
		transform: rotate(90deg);
	}

	.m-nav-list {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-bottom: 40px;
	}

	.m-nav-link {
		font-size: 2rem;
		font-weight: 700;
		color: var(--text-main);
		opacity: 0;
		transform: translateY(20px);
		transition: 0.3s;
		padding: 10px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.m-nav-link:hover {
		color: var(--primary);
		padding-left: 10px;
	}

	.mobile-drawer.open .m-nav-link,
	.mobile-drawer.open .m-nav-dropdown-container {
		opacity: 1;
		transform: translateY(0);
	}

	/* 모바일 애니메이션 딜레이 */
	.mobile-drawer.open > .m-nav-list > * {
		opacity: 1;
		transform: translateY(0);
	}
	.mobile-drawer.open .m-nav-list > *:nth-child(1) { transition-delay: 0.1s; }
	.mobile-drawer.open .m-nav-list > *:nth-child(2) { transition-delay: 0.2s; }
	.mobile-drawer.open .m-nav-list > *:nth-child(3) { transition-delay: 0.3s; }
	.mobile-drawer.open .m-nav-list > *:nth-child(4) { transition-delay: 0.4s; }


	/* --- MOBILE DROPDOWN (NEW) --- */
	.m-nav-dropdown-container {
		opacity: 0;
		transform: translateY(20px);
		transition: 0.3s;
	}

	.m-nav-dropdown-trigger i {
		transition: transform 0.3s;
		font-size: 1.8rem;
	}

	.m-nav-dropdown-trigger.open {
		color: var(--primary);
	}

	.m-nav-dropdown-trigger.open i {
		transform: rotate(180deg);
	}

	.m-dropdown-list {
		display: none;
		flex-direction: column;
		gap: 5px;
		padding: 10px 0 10px 20px;
	}

	.m-dropdown-list.show {
		display: flex;
		animation: slideDown 0.3s ease;
	}

	.m-dropdown-item {
		font-size: 1.2rem;
		font-weight: 600;
		color: var(--text-muted);
		padding: 10px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.02);
		transition: 0.3s;
	}

	.m-dropdown-item:hover {
		color: var(--primary);
		padding-left: 10px;
	}

	@keyframes slideDown {
		from { opacity: 0; transform: translateY(-10px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* --- MOBILE FOOTER --- */
	.m-footer {
		margin-top: auto;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.m-lang-box {
		border: 1px solid var(--border);
		border-radius: var(--radius-sm, 2px);
		overflow: hidden;
		background: rgba(255, 255, 255, 0.02);
	}

	.m-lang-trigger {
		width: 100%;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--text-muted);
		font-size: 1rem;
	}

	.m-lang-trigger.active {
		color: var(--primary);
		background: rgba(255, 255, 255, 0.05);
	}

	.m-lang-trigger i {
		transition: 0.3s;
	}

	.m-lang-trigger.active i {
		transform: rotate(180deg);
	}

	.m-lang-list {
		display: none;
		padding: 0 15px 15px;
		border-top: 1px solid var(--border);
	}

	.m-lang-list.show {
		display: block;
		animation: slideDown 0.3s ease;
	}

	.m-lang-opt {
		display: block;
		padding: 12px 0;
		color: var(--text-muted);
		font-size: 0.95rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.m-lang-opt:last-child {
		border-bottom: none;
	}

	.m-lang-opt.selected {
		color: var(--primary);
		font-weight: 700;
	}

	.m-btn-contact {
		width: 100%;
		padding: 16px;
		background: var(--primary);
		color: #000;
		font-weight: 700;
		font-size: 1.1rem;
		border-radius: var(--radius-sm, 2px);
		display: flex;
		justify-content: center;
		gap: 10px;
	}
}