@charset "utf-8";

/* 헤더 */
#header {
	left: 0;
	z-index: 10;
	width: 100%;
	height: auto;
	background-color: var(--surface-white);
}

.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	border-bottom: 1px solid var(--border-color-100);

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 2;

		@media (width >=calc(48rem - 1px)) {
			flex-wrap: nowrap;
			justify-content: space-between;
			height: 5rem;
		}
	}
}

.header__logo {
	order: 1;
	position: relative;
	z-index: 10;
	margin-left: -0.5rem;
	padding: .5rem;

	a {
		display: block;
		width: 4.625rem;

		@media (width >=calc(48rem - 1px)) {
			width: 7rem;
		}
	}
}

.header-nav {
	order: 3;
	width: 100%;

	@media (width >=calc(48rem - 1px)) {
		order: 2;
		width: auto;
	}

	[class*='__scroll'] {
		margin-right: calc(var(--device-space) * -1);
		margin-left: calc(var(--device-space) * -1);
		margin-bottom: -1px;

		@media (width >=calc(48rem - 1px)) {
			margin-right: 0;
			margin-left: 0;
		}
	}

	[class*='__items'] {
		display: flex;
		justify-content: space-between;
		position: relative;
		width: 100%;

		@media (width >=calc(48rem - 1px)) {
			column-gap: clamp(1.5rem, -6.357rem + 14.976vw, 4.875rem);
		}

		[class*='__item'] {

			@media (width >=calc(48rem - 1px)) {
				&[class*='__item'] {
					padding-left: 0;
				}

				&[class*='__item']:last-child {
					padding-right: 0;
				}
			}

			[class*='__link'] {
				display: flex;
				align-items: center;
				position: relative;
				height: 3rem;
				font-size: 0.9375rem;
				font-weight: 600;

				&::after {
					position: absolute;
					bottom: -1px;
					left: 0;
					width: 0;
					height: 2px;
					background-color: var(--color-primary);
					-webkit-transition: all 0.4s ease;
					transition: all 0.4s ease;
					content: '';
					border-radius: 4px;
				}

				@media (width >=calc(64rem - 1px)) {
					&::after {
						height: 4px;
					}
				}

				[class*='--is-active'] &::after,
				&:hover::after {
					width: 100%;
				}

				@media (width >=calc(48rem - 1px)) {
					& {
						height: 5rem;
						font-size: clamp(1.125rem, 0.413rem + 1.449vw, 1.5rem);
					}

					.heaer-fixed--active & {
						color: #000000;
					}
				}
			}
		}
	}
}

.header-util {
	display: flex;
	align-items: center;
	order: 2;
	z-index: 10;
	margin-right: -0.5rem;

	@media (width >=calc(48rem - 1px)) {
		order: 3;
		margin: 0;
	}

	[class*='__items'] {
		display: flex;

		[class*='__item'] {
			display: flex;
			align-items: center;
			position: relative;

			&~& {
				position: relative;
				margin-left: 0.5rem;
				padding-left: 0.5rem;

				@media (width >=calc(64rem - 1px)) {
					margin-left: 1rem;
					padding-left: 1rem;
				}
			}

			&~&::before {
				position: absolute;
				top: 50%;
				left: 0;
				width: 1px;
				height: 0.625rem;
				background-color: #e0e0e0;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				content: '';
			}

			@media (width >=calc(48rem - 1px)) {
				&~&::before {
					height: .75rem;
				}
			}

			>button[type='button'],
			>a {
				font-size: .875rem;
				color: #666;

				@media (width >=calc(48rem - 1px)) {
					font-size: .875rem;
					font-weight: 700;
				}

				@media (width >=calc(64rem - 1px)) {
					font-size: 1rem;
				}

			}

			[class*='__submenu'] {
				display: none;
				position: absolute;
				top: 100%;
				left: 50%;
				z-index: 1;
				width: 6.875rem;
				padding-top: 0.375rem;
				-webkit-transform: translateX(calc(-50% + 0.25rem));
				transform: translateX(calc(-50% + 0.25rem));

				@media (width >=calc(64rem - 1px)) {
					-webkit-transform: translateX(calc(-50% + 0.5rem));
					transform: translateX(calc(-50% + 0.5rem));
				}

				&::before {
					position: absolute;
					top: 0;
					left: 50%;
					margin-left: -0.5rem;
					padding: 0.5rem 0 0 1rem;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23fff' d='M16 9 8 1 0 9h16Z'/%3E%3Cpath stroke='%235C00FF' stroke-width='2' d='m0 9 6.586-6.586a2 2 0 0 1 2.828 0L16 9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
					content: '';
				}

				ul {
					overflow: hidden;
					flex-direction: column;
					gap: 0.5rem;
					padding: .5rem .5rem;
					border: 2px solid var(--color-primary);
					background-color: var(--surface-white);
					border-radius: var(--rounded-minimum);

					a {
						display: block;
						padding: .25rem 0;
						font-size: .875rem;
						text-align: center;

						@media (width >=calc(64rem - 1px)) {
							font-size: 1rem;
						}
					}
				}
			}

			@media (width >=calc(48rem - 1px)) {
				&:hover>div {
					display: block;
				}
			}
		}
	}
}

/* 모바일 메뉴 버튼 */
.mobile-menu {
	position: relative;
	margin: 0.3125rem 0;
	padding: 1rem .5rem;
	border: 0;
	background: transparent;
	outline: none;

	span,
	&::after,
	&::before {
		display: block;
		width: 1.25rem;
		height: .125rem;
		background-color: #000;
		border-radius: .125rem;
		-webkit-transition: transform .3s, opacity .3s;
		transition: transform .3s, opacity .3s;
		content: '';
	}

	span {
		margin-bottom: .25rem;
	}

	&::before {
		margin-bottom: .25rem;
	}

	&::after {
		margin-top: .25rem;
	}

	& span,
	&::before,
	&::after {
		background-color: var(--color-black);
	}

	&[class*='--is-active'] span {
		opacity: 0;
	}

	&[class*='--is-active']::before {
		position: relative;
		top: .375rem;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	&[class*='--is-active']::after {
		position: relative;
		top: -0.375rem;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	@media (width >=calc(48rem - 1px)) {
		display: none;

		span,
		&::after,
		&::before {
			background-color: var(--color-white);
		}

		:is(.heaer-fixed--active) & {

			span,
			&::after,
			&::before {
				background-color: var(--color-black);
			}
		}
	}
}

/* 모바일 전체 메뉴 */
.mobile-gnb {
	--top: 3.5rem;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	opacity: 0;

	&::before,
	&::after {
		content: '';
	}

	&::before {
		display: block;
		width: 100%;
		height: var(--top);
		background-color: var(--surface-white);
	}

	[class*='__container'] {
		overflow: hidden;
		overflow-y: auto;
		position: absolute;
		top: var(--top);
		right: 0;
		left: 0;
		z-index: 2;
		height: 0;
		-webkit-overflow-scrolling: touch;
		-webkit-transition: 300ms ease;
		transition: 300ms ease;

		[class*='__inwrap'] {
			padding: 2rem 1rem 4rem;
			background-color: var(--surface-white);

			[class*='__item'] {
				&~& {
					margin-top: 1rem;
				}

				>a {
					font-size: 1.25rem;
					color: #121619;
					font-weight: 600;
				}

				[class*='__depth'] {
					margin-top: 0.5rem;

					li {
						&~& {
							margin-top: 0.5rem;
						}

						>a {
							font-size: .875rem;
							color: #8d8d8d;
						}
					}
				}
			}

		}

		.mobile-menu--opened & {
			visibility: visible;
			height: 100%;
		}
	}

	&::after {
		position: absolute;
		top: var(--top);
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--color-black);
		opacity: 0;
	}

	:is(.layer-top-banner--show) & {
		top: 3.125rem;
	}

	:is(.heaer-fixed--active.layer-top-banner--show) & {
		top: 0;
	}

	@media (width >=calc(48rem - 1px)) {
		display: none;
	}

	.mobile-menu--opened & {
		visibility: visible;
		bottom: 0;
		z-index: 5;
		height: auto;
		opacity: 1;
		-webkit-transition: visibility 300ms ease;
		transition: visibility 300ms ease;

		&::before {
			position: relative;
			z-index: 3;
			height: calc(var(--top) + 1px);
			border-bottom: 1px solid var(--border-color-100);
		}

		&::after {
			opacity: .6;
			transition: .3s ease;
		}
	}
}