header {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "logo nav controls";
		width: 100%; height: 80px;
		align-items: center; border-bottom: 1px solid #FFFFFF4F; position: absolute; top: 0; z-index: 10000; padding: 0 max(20px, 8.5vw);

		&:has(.menu-container.on) {
			background-color: white;
			border-bottom-color: #DEE2E6;

			.menu-nav {
				display: none;
			}

			.logo {

				background-image: url(/resources/images/header/header-logo-dark.png);
			}

			.all-menu {
				background: transparent url(/resources/images/header/ic_menu_black.svg);
			}
		}

		&:hover {
			background-color: white;
			border-bottom-color: #DEE2E6;

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 300px;
				background-color: white;
				position: absolute;
				top: 80px;
				left: 0;
			}

			.logo {
				background-image: url(/resources/images/header/header-logo-dark.png);
			}

			.all-menu {
				background: transparent url(/resources/images/header/ic_menu_black.svg);
			}


			.menu-nav {
				.sub-menu-list {
					display: flex;
				}

				.menu-link {
					color: black!important;
					position: relative;

					&:hover {
						font-weight: bold;
						color: #EE770C!important;

						&:after {
							content: '';
							display: block;
							width: 94px;
							height: 4px;
							background-color: #EE770C;
							position: absolute;
							bottom: 0;
							left: 50%;
							right: 50%;
							transform: translateX(-50%);
						}

					}
				}
			}
		}

		.logo {
			grid-area: logo;
			justify-self: start;
			width: 168px; height: 50px;
			background-image: url(/resources/images/header/header-logo.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}

		.menu-nav {
			grid-area: nav;
			.menu-list {
				display: flex;
				height: 100%;
				gap: clamp(60px, 9vw, 172px);

				.menu-item {
					display: flex; align-items: center; position: relative;

					.menu-link {
						color: white; font-size: 21px; font-weight: 600; height: 100%; display: inline-flex; align-items: center;

						&.on {
							font-weight: bold;
							color: #EE770C!important;

							&:after {
								content: '';
								display: block;
								width: 94px;
								height: 4px;
								background-color: #EE770C;
								position: absolute;
								bottom: 0;
								left: 50%;
								right: 50%;
								transform: translateX(-50%);
							}

						}
					}
				}
			}

			.sub-menu-list {
				position: absolute;
				top: 80px;
				z-index: 1;
				display: none;
				flex-direction: column;
				gap: 20px;
				margin-top: 28px;
				left: 50%;
				right: 50%;
				width: 200px;
				transform: translateX(-50%);

				a {
					font-size: 18px;
					font-weight: 500;
					color: #495057;

					&:hover {
						color: #EE770C;
					}
				}


				li {
					text-align: center;
				}

			}
		}




		.all-menu {
			grid-area: controls;
			justify-self: end;
			width: 36px; height: 36px; background: transparent url(/resources/images/header/ic_menu.svg);
		}

		.menu-container {
			/*display: none;*/
			/*width: 100%;*/
			/*height: 1000px;*/
			/*background-color: #FFFFFF;*/
			/*position: absolute;*/
			/*left: 0;*/
			/*top: 80px;*/
			/*z-index: 100;*/
			/*padding: 70px 160px 60px 160px;*/
			display: none;
			width: 100%;
			background-color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 80px;
			z-index: 100;
			padding: 70px 160px 60px 160px;
			height: auto; /* 고정 height 제거 */
			background-size: 60%; /* 배경 이미지 비율 축소 */
			&.on {
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: start;
				background: #FFFFFF url(/resources/images/main/all-menu_logo.png) no-repeat bottom left;
				background-size: 30%; /* 이미지가 너무 크면 줄이기 */
				background-position: left bottom;
				min-height: 100vh; /* 최소 높이 설정해서 배경 이미지 보장 */
				/*display: flex;*/
				/*flex-direction: column;*/
				/*align-items: start;*/
				/*justify-content: space-between;*/
				/*background: #FFFFFF url(/resources/images/main/all-menu_logo.png) no-repeat bottom left;*/
			}

			.menu-area {
				display: flex;
				flex-direction: column;
				gap: 50px;

				.menu-box {
					display: flex;

					.menu-title {
						font-size: 28px;
						font-weight: bold;
						color: #212529;
						letter-spacing: -0.56px;
						width: 95px;
						margin-right: 70px;
					}

					.menu-list {
						display: flex;
						.menu-item {
							display: flex;
							flex-direction: column;
							gap: 16px;

							&:hover {
								.menu-link {
									color: #ED6E2B;
								}
							}

							.menu-link {
								display: inline-flex;
								width: 300px;
								height: 34px;
								font-size: 20px;
								color: #212529;
								font-weight: bold;
								letter-spacing: -0.4px;
								align-items: center;

								&::before {
									content: '';
									display: inline-block;
									width: 4px;
									height: 4px;
									background-color: #ED6E2B;
									margin-right: 8px;
								}
							}

							.sub-menu-list {
								display: flex;
								flex-direction: column;
								gap: 9px;
								padding-left: 12px;

								.sub-menu-link {
									font-size: 16px;
									font-weight: 500;
									letter-spacing: -0.64px;
									color: #717578;

									&:hover {
										color: #ED6E2B;
									}
								}
							}
						}
					}
				}
			}

			.info-area {
				padding-top: 200px;
				display: flex;
				width: 100%;
				justify-content: end;

				.info-box {
					display: flex;
					flex-direction: column;
					gap: 20px;
					align-items: flex-end;



					.company-name {
						font-size: 20px;
						font-weight: bold;
						color: #212529;
					}

					.location-box {
						display: flex;
						flex-direction: column;
						gap: 8px;
						align-items: flex-end;


						.name {
							font-size: 18px;
							font-weight: bold;
							color: #212529;
						}

						.address {
							font-size: 15px;
							font-weight: 500;
							color: #717578;
							letter-spacing: -0.3px;
						}
					}
				}
			}
		}
	}



	@media (max-width: 1520px) {
		header {
			padding: 0 max(20px, 4vw);
		}
		.menu-nav {
			display: none; /* 메뉴 숨김 */
		}

		.all-menu {
			display: block;
		}

		.menu-container {
			padding: 40px 20px;
			height: auto;
		}

		.menu-container.on {
			display: flex;
			flex-direction: column;
		}

		.menu-area {
			gap: 30px;
		}

		.menu-box {
			flex-direction: column;
		}

		.menu-title {
			margin-bottom: 10px;
			font-size: 22px;
		}

		.menu-link {
			font-size: 18px;
			width: auto;
		}

		.sub-menu-list {
			padding-left: 16px;
		}

		.info-box {
			align-items: start;
		}

		header:hover {
			background-color: transparent !important;
			border-bottom-color: transparent !important;
		}

		header:hover::after {
			display: none !important;
		}

		header:hover .logo {
			background-image: url(/resources/images/header/header-logo.png) !important;
		}

		header:hover .all-menu {
			background: transparent url(/resources/images/header/ic_menu.svg) !important;
		}

		header:has(.menu-container.on) .logo {
			background-image: url(/resources/images/header/header-logo-dark.png) !important;
		}

		header:has(.menu-container.on) .all-menu {
			background: transparent url(/resources/images/header/ic_menu_black.svg) !important;
		}
		header:hover .menu-nav .sub-menu-list {
			display: none !important;
		}

		header:hover .menu-nav .menu-link {
			color: inherit !important;
			font-weight: normal !important;
		}

		header:hover .menu-nav .menu-link:hover::after {
			display: none !important;
		}

	}

	/* 중간 화면 (태블릿 정도)에서 메뉴가 깨지는 걸 방지 */
	@media (min-width: 600px) and (max-width: 1024px) {


		.menu-nav {
			display: block;
		}
		.menu-nav {
			display: none; /* 메뉴 숨김 */
		}

		.menu-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap; /* 필요시 줄바꿈 허용 */
			gap: 60px; /* 줄일 수도 있음 */
			justify-content: center;
			align-items: center;
		}

		.menu-item {
			display: flex;
			align-items: center;
			position: relative;
		}

		.menu-link {
			font-size: 18px;
			color: #212529;
			white-space: nowrap;
		}
	}
	/* 기본(PC) 스타일은 그대로 두고, 1200px 이하에서 반응형 적용 */
	/* 반응형 메뉴 스타일 */
	@media (max-width: 1200px) {
		.menu-container.on {
			padding: 40px 20px;
			background-size: 60%;
			background-position: bottom left;
			height: auto;

			.menu-area {
				display: flex;
				flex-wrap: wrap; /* 핵심: 줄 바꿈 허용 */
				justify-content: space-between;
				flex-direction: row !important; /* 우선순위 강제 */

				gap: 40px;
				width: 100%;
			}

			.menu-box {
				flex: 0 1 calc(50% - 20px); /* 2열 배치 */
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;
				box-sizing: border-box;
			}

			.menu-title {
				font-size: 20px;
				margin-bottom: 6px;
			}

			.menu-list {
				display: flex;
				flex-direction: column;
				gap: 10px;
				width: 100%;
			}

			.menu-link {
				font-size: 16px;
				white-space: normal;
				word-break: keep-all;
			}

			.sub-menu-list {
				padding-left: 14px;
				gap: 6px;
			}

			.sub-menu-link {
				font-size: 14px;
				word-break: keep-all;
			}
		}
	}

	/* 모바일 최적화 */
	@media (max-width: 768px) {
		header{
			padding: 0 20px;

		}
		.menu-container {
			padding: 24px 16px;
			background-size: 80%;
		}

		.menu-title {
			font-size: 18px;
		}

		.menu-link {
			font-size: 15px;
			padding: 4px 0;
		}

		.sub-menu-link {
			font-size: 13.5px;
		}
	}

	/* 소형 모바일 (414px 이하) */
	@media (max-width: 414px) {
		header {
			padding: 0 12px;
		}

		header .logo {
			width: 120px;
			height: 36px;
			margin-right: 0;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.all-menu {
			width: 24px;
			height: 24px;
			background-size: contain;
		}
	}
	/* 메뉴가 열린 상태(공통) */
	header.open {
		background-color: #fff;
		border-bottom-color: #DEE2E6;
	}
	header.open .logo {
		background-image: url(/resources/images/header/header-logo-dark.png);
	}
	header.open .all-menu {
		background: transparent url(/resources/images/header/ic_menu_black.svg);
	}

	/* 데스크톱(>1520px)에서만 hover mega 메뉴 동작 유지 */
	@media (min-width: 1521px) {
		header:hover {
			background-color: #fff;
			border-bottom-color: #DEE2E6;
		}
		header:hover::after {
			content: '';
			display: block;
			width: 100%;
			height: 300px;
			background-color: #fff;
			position: absolute;
			top: 80px; left: 0;
		}
		header:hover .menu-nav .sub-menu-list { display: flex; }
		header:hover .menu-nav .menu-link {
			color: black !important;
			position: relative;
		}
	}

	/* 모바일/태블릿(≤1520px): hover로는 아무 변화도 없게 */
	@media (max-width: 1520px) {
		header:hover {
			background-color: transparent !important;
			border-bottom-color: transparent !important;
		}
		header:hover::after { content: none !important; }
		header:hover .menu-nav .sub-menu-list { display: none !important; }
		header:hover .menu-nav .menu-link {
			color: inherit !important;
			font-weight: inherit !important;
		}

		/* 메뉴가 열린 상태에서만 흰색이 보이도록 강제 */
		header.open {
			background-color: #fff !important;
			border-bottom-color: #DEE2E6 !important;
		}
	}

	/* 선택: 바디 스크롤 잠그기 */
	.no-scroll { overflow: hidden; }