.header-container {
	position: relative; z-index: 200; overflow: visible;
	&::before {
		content: ''; position: absolute; left: 0; right: 0; top: 0; height: 95px;
		background: #fff; border-bottom: 1px solid #D5D5D5;
		z-index: -1;
		transition: height 0.15s ease-out;
	}
	&::after {
		content: ''; position: absolute; top: 95px; left: 0; right: 0;
		height: 1px; background: #D5D5D5; pointer-events: none;
		opacity: 0; transition: opacity 0.06s ease-out; z-index: 2;
	}
	&:hover::before {
		height: 360px;
	}
	&:hover::after {
		opacity: 1;
		transition-duration: 0.2s;
	}
	.header-wrap {
		display: flex; align-items: center; justify-content: space-between;
		height: 95px; min-height: 95px; overflow: visible;
		&.sec-width {
			width: 1700px; max-width: 100%; margin: 0 auto;
		}
	}
	.logo-area {
		display: flex; align-items: center; height: 95px; flex-shrink: 0;
		.logo {
			width: 180px;
			img {
				width: 100%; display: block;
			}
		}
	}
	/* ============================= */
	/* GNB 확장형 구조 */
	/* ============================= */
	.gnb-area {
		flex: 1; display: flex; justify-content: center; min-width: 0;
	}
	.gnb {
		position: relative; width: 100%; min-height: 95px;
	}
	.nav {
		display: flex; justify-content: center; align-items: flex-start;
	}
	.depth-1 {
		position: relative; display: flex; flex-direction: column; width: 180px; flex-shrink: 0; text-align: center;
		&:hover {
			> a {
				color: #1B74E4; font-weight: 800;
			}
			.depth-2 {
				background: #f3f3f3;
				a {
					color: #333;
					&:hover {
						color: #1B74E4;
					}
				}
			}
		}
		&:not(:last-child)::after {
			content: ''; position: absolute; right: 0; top: 95px;
			width: 1px; height: calc(360px - 95px); background: #D5D5D5; pointer-events: none;
			opacity: 0; transition: opacity 0.06s ease-out; z-index: 2;
		}
		&:first-child::before {
			content: ''; position: absolute; left: 0; top: 95px;
			width: 1px; height: calc(360px - 95px); background: #D5D5D5; pointer-events: none;
			opacity: 0; transition: opacity 0.06s ease-out; z-index: 2;
		}
		&:last-child::after {
			content: ''; position: absolute; right: 0; top: 95px;
			width: 1px; height: calc(360px - 95px); background: #D5D5D5; pointer-events: none;
			opacity: 0; transition: opacity 0.06s ease-out; z-index: 2;
		}
		> a {
			display: flex; align-items: center; justify-content: center; height: 95px;
			font-size: 1.8rem; font-weight: 700; color: #333;
			transition: color 0.2s, font-weight 0.2s;
		}
		.depth-2 {
			position: absolute; top: 96px; left: 0; right: 0;
			min-height: calc(360px - 95px - 2px);
			padding: 32px 0 32px; text-align: center;
			transition: background-color 0.2s ease, opacity 0.06s ease-out;
			z-index: 1; opacity: 0; visibility: hidden; pointer-events: none;
			li {
				margin-bottom: 12px;
				&:last-child {
					margin-bottom: 0;
				}
				a {
					font-size: 1.6rem; font-weight: 600; color: #535353; transition: color 0.2s;
					&:hover {
						color: #1B74E4;
					}
				}
			}
		}
	}
	&:hover .gnb .depth-2 {
		opacity: 1; visibility: visible; pointer-events: auto;
	}
	&:hover .gnb .depth-1::before,
	&:hover .gnb .depth-1::after {
		opacity: 1;
		transition-duration: 0.2s;
	}
	&:hover .gnb .depth-2 {
		transition-duration: 0.2s;
	}
	/* ============================= */
	/* 우측 버튼 영역 */
	/* ============================= */
	.header-btn-area {
		display: flex; align-items: center; gap: 15px; height: 95px; flex-shrink: 0;
	}
	.login-btn-group {
		display: flex; background: #1B74E4; border-radius: 50px; padding: 2px;
		a {
			padding: 10px 24px; color: #fff; font-size: 1.4rem; font-weight: 600;
			position: relative; text-decoration: none;
			&:not(:last-child)::after {
				content: ''; position: absolute; right: 0; top: 50%;
				transform: translateY(-50%); width: 1px; height: 40%; background: #fff; opacity: 0.4;
			}
		}
	}
	.hamburger-btn {
		display: flex; width: 44px; height: 44px; border-radius: 50%;
		background: #002445; border: none; align-items: center; justify-content: center;
		cursor: pointer; padding: 0;
		img {
			display: block;
		}
	}
}

// Full Navigation (닫혀 있어도 DOM 존재 시 스크롤 너비에 관여하지 않도록)
.full-nav {
	position: fixed; inset: 0;
	width: 100%; height: 100%; min-width: 0; box-sizing: border-box;
	background: #fff; z-index: 300; display: none; overflow: hidden;
	contain: layout paint;
	&.active {
		display: flex; flex-direction: column;
	}
	.nav-head {
		display: flex; align-items: center; justify-content: space-between; padding: 20px;
		border-bottom: 1px solid #D5D5D5; min-width: 0;
		&.sec-width {
			width: 1700px; max-width: 100%; margin: 0 auto;
		}
		.nav-logo img {
			height: auto; display: block;
		}
		.nav-utils {
			display: flex; align-items: center;
			.nav-close {
				display: flex; width: 44px; height: 44px; border-radius: 50%; background: #002445; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center;
				img { display: block; }
			}
		}
	}
	.nav-body-pc {
		flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 80px 40px 60px;
		display: flex; flex-direction: column; align-items: center;
		position: relative;
		.nav-copy {
			text-align: center; margin-bottom: 72px; position: relative; z-index: 1;
			.copy-kicker {
				font-size: 1.2rem; font-weight: 700; color: var(--theme); letter-spacing: 0.2em; margin: 0 0 12px; text-transform: uppercase;
			}
			.copy-line1 {
				font-size: 2.2rem; font-weight: 600; color: #555; letter-spacing: -0.02em; position: relative; margin: 0 0 6px;
				&::after {
					content: ''; position: absolute; top: -1px; width: 5px; height: 5px; background: var(--theme); border-radius: 50%;
				}
			}
			.copy-line2 {
				font-size: 3.6rem; font-weight: 700; color: #000; margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.2;
			}
		}
		.nav-sitemap {
			width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 80px;
			max-width: 1500px; margin: 0 auto; position: relative; z-index: 1;
			.nav-sec {
				transition: transform 0.3s ease;
				&:hover { transform: translateY(-6px); }
				.sec-head {
					margin-bottom: 20px;
					&::after {
						content: ''; display: block; width: 100%; height: 1px; margin-top: 12px; background: #c5c5c5;
					}
				}
				.sec-title {
					font-size: 2.2rem; font-weight: 700; color: #000; margin: 0; padding-bottom: 0; border-bottom: none; line-height: 1.3;
					display: inline-block; position: relative;
					&::after {
						content: ''; position: absolute; left: 0; top: 100%; margin-top: 12px; width: 100%; height: 1px;
						background: #000; z-index: 1;
					}
				}
				.sec-list {
					display: flex; flex-direction: column; gap: 14px;
					.sec-item .sec-link {
						display: inline-block; font-size: 1.6rem; font-weight: 400;
						position: relative; transition: color 0.2s ease;
						&::after {
							content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
							background: var(--theme); transition: width 0.25s ease;
						}
						&:hover {
							color: var(--theme);
							&::after { width: 100%; }
						}
					}
				}
			}
		}
	}
	.nav-body-mo {
		display: none;
	}
}

// 960px 이상: 풀네비 우측 진입버튼만 표시, 로고·헤더 보더 제거
@media (min-width: 961px) {
	.full-nav {
		.nav-head {
			border-bottom: none;
			justify-content: flex-end;
		}
		.nav-logo {
			display: none;
		}
	}
}

@media (max-width: 1500px) {
	.header-container {
		.gnb .depth-1 {
			width: 150px;
		}
		.gnb .depth-1 > a {
			font-size: 1.7rem;
		}
		.gnb .depth-2 a {
			font-size: 1.5rem;
		}
	}
}

@media (max-width: 1200px) {
	.header-container {
		/* 헤더 높이가 auto로 변하므로 ::before가 전체를 채워 헤더-배너 사이 틈 제거 */
		&::before {
			height: 100%;
			transition: none;
		}
		&::after {
			transition: none;
		}
		&:hover::before {
			height: 100%;
		}
		&:hover::after {
			opacity: 0;
		}
		.header-wrap {
			padding: 20px; height: auto; min-height: auto;
		}
		.logo-area {
			height: auto;
		}
		.header-btn-area {
			height: auto;
		}
		.gnb-area {
			display: none;
		}
		.gnb .depth-2,
		.gnb .depth-1::before,
		.gnb .depth-1::after {
			visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important;
		}
	}
}

@media (max-width: 960px) {
	.header-container {
		.logo-area {
			.logo {
				width: 140px;
			}
		}
		.header-wrap {
			.header-btn-area {
				.login-btn-group {
					display: none;
				}
			}
		}
	}
	.full-nav {
		.nav-head {
			justify-content: flex-end; border-bottom: none; padding: 15px 20px;
			.nav-logo { display: none; }
			.nav-utils .nav-close {
				width: 36px; height: 36px; position: relative; top: 10px; right: 4px;
			}
		}
		.nav-body-pc {
			display: none;
		}
		.nav-body-mo {
			display: flex; flex: 1; flex-direction: column; overflow-y: auto; padding: 0 20px 30px;
			align-items: stretch;
			.nav-login {
				display: block; margin: 15px 0 30px; padding-bottom: 20px; border-bottom: 1px solid #E5E5E5;
				.nav-btns {
					display: flex; gap: 0; border-radius: 4px; overflow: hidden;
					.nav-btn {
						flex: 1; display: flex; align-items: center; justify-content: center;
						padding: 12px 20px; background: var(--theme); color: #fff;
						font-size: 1.6rem; font-weight: 600; text-decoration: none; position: relative;
						&:not(:last-child)::after {
							content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #fff; opacity: 0.3;
						}
						&:hover { background: #333; }
					}
				}
			}
			.nav-sitemap {
				max-width: 100%;
				.nav-sec {
					margin-bottom: 40px;
					.sec-title {
						font-size: 2rem; padding-bottom: 20px;
					}
					.sec-list {
						display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
						gap: 15px; border-top: 1px solid #333; padding-top: 20px;
						.sec-item .sec-link {
							font-size: 1.6rem; display: flex; align-items: center; justify-content: space-between;
							color: #000; text-decoration: none;
							&::after {
								content: ''; width: 16px; height: 16px; flex-shrink: 0; margin-left: 10px;
								background-image: url('../img/common/full_nav_arrow.svg');
								background-repeat: no-repeat; background-position: center; background-size: contain;
							}
							&:hover { color: var(--theme); }
						}
					}
				}
			}
		}
	}
}

// 풀네비 열림 시 스크롤·가로 스크롤 방지 (html + body 둘 다)
html.nav-open,
body.nav-open {
	overflow: hidden;
	overflow-x: hidden;
}