@charset "utf-8";
@layer reset, form;

:root {
	interpolate-size: allow-keywords;
	--header-height: 48rem;
	--container-narrow: 1210;
	--container: 1325;
	--container-wide: 1762;
	--container-scale: 0.92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #a2e200;
	--secondary: #8ecd7d;
	--placeholder-bg: #444;
	--white: #fff;
	--yellow: #ffda51;
	--black: #061324;
	--border-color: #ddd; /* components.css 공유 */
	--hover-border-color: #444; /* components.css 공유 */
	--font-lexd: "Lexend", "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-pret: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-sans: var(--font-pret);
	--site-menu-button-size: 25rem;
	--section-block: 60rem;
	--content-top: 40rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
	--placeholder-image-bg: #e0e0e0;
	--placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
	--placeholder-image-size: min(60%, 200rem);
}

/* #region view transition, scroll behavior */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		/* navigation: auto; */
	}
	html {
		scroll-behavior: smooth;
	}
}
/* #endregion view transition, scroll behavior */

section {
	content-visibility: auto;
}

.container {
	position: relative;
	width: calc(var(--container-scale) * 100%);
	max-width: calc(var(--container) * 1rem);
	margin-inline: auto;
	&.container--narrow {
		max-width: calc(var(--container-narrow) * 1rem);
	}
	&.container--wide {
		max-width: calc(var(--container-wide) * 1rem);
	}
	&.container--fluid {
		width: auto;
		max-width: none;
	}
}

#header {
	position: sticky;
	inset: 0 0 auto;
	z-index: 10;
	contain: content;
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	.container {
		display: flex;
		align-items: center;
		justify-content: end;
		height: var(--header-height);
	}
	.logo {
		position: relative;
		display: inline-block;
		justify-self: start;
	}
	.logo-image {
		display: block;
		width: auto;
		height: clamp(24rem, calc(30 / var(--container) * 100vw), 30rem);
	}
	.main-nav {
		translate: clamp(8rem, calc(16 / var(--container) * 100vw), 16rem);
		.nav-menu-level-1 {
			display: flex;
		}
		.nav-item-level-1 {
			position: relative;
		}
		.nav-link-level-1 {
			display: block;
			padding: 12rem clamp(8rem, calc(16 / var(--container) * 100vw), 16rem);
			font: var(--font-size-15) var(--font-sans);
		}
		.nav-link-level-1.is-current {
			font-weight: 700;
		}
		.nav-link-level-1:not(.is-current) {
			opacity: 0.7;
		}
		@media (any-hover) {
			.nav-link-level-1:hover {
				opacity: 1;
			}
		}
	}
	.site-menu-toggle {
		position: relative;
		display: none;
		width: var(--site-menu-button-size);
		aspect-ratio: 1;
		cursor: pointer;
		@media (width >= 768px) {
			display: none;
		}
		.bar {
			position: absolute;
			inset: 0;
			height: 2px;
			margin: auto;
			background: currentcolor;
		}
		.bar-1 {
			translate: 0 -8rem;
		}
		.bar-3 {
			translate: 0 8rem;
		}
	}
	.site-menu {
		--border-color: #eaeaea;
		--padding-block: 15rem;
		--padding-inline: 16rem;
		left: auto;
		z-index: 12;
		display: none;
		width: 100%;
		max-width: 280rem;
		height: 100dvh;
		padding: 0;
		color: #000;
		background: #fff;
		border: 0;
		&::backdrop {
			background: #000;
		}
		.site-menu-header {
			display: grid;
			align-items: center;
			justify-content: flex-end;
			height: var(--header-height);
		}
		.site-menu-close {
			position: relative;
			display: block;
			width: var(--site-menu-button-size);
			aspect-ratio: 1;
			margin-right: 16rem;
			background: 0;
			&::before,
			&::after {
				position: absolute;
				top: 50%;
				left: 0;
				display: block;
				width: 100%;
				height: 2px;
				background: currentcolor;
				transform: translateY(-50%) rotate(45deg);
				content: "";
			}
			&::after {
				transform: translateY(-50%) rotate(-45deg);
			}
		}
		.nav-menu-level-1 {
			& > li {
				border-top: 1px solid var(--border-color);
			}
			& > li:last-child {
				border-bottom: 1px solid var(--border-color);
			}
			.nav-link-level-1 {
				position: relative;
				display: block;
				width: 100%;
				padding: var(--padding-block) 30rem var(--padding-block) var(--padding-inline);
				font-size: 16rem;
				text-align: left;
			}
			summary.nav-link-level-1::before {
				position: absolute;
				inset: 0;
				display: block;
				width: 8rem;
				aspect-ratio: 1;
				margin: auto 16rem auto auto;
				border: solid;
				border-width: 0 1px 1px 0;
				transform: rotate(45deg) translateY(-75%);
				content: "";
			}
			[open] summary.nav-link-level-1::before {
				translate: 0 -50%;
				scale: 1 -1;
			}
			::details-content {
				height: 0;
				overflow: clip;
			}
			[open]::details-content {
				height: auto;
			}
			.nav-menu-level-2 {
				background: #f8f8f8;
			}
			.nav-menu-level-2 > li {
				border-top: 1px solid var(--border-color);
			}
			.nav-link-level-2 {
				position: relative;
				display: block;
				padding: var(--padding-block) var(--padding-inline);
				font-size: 14rem;
			}
		}
		@media (prefers-reduced-motion: no-preference) {
			& {
				translate: 100%;
				transition: 0.3s allow-discrete;
			}
			&::backdrop {
				opacity: 0;
				transition: 0.3s allow-discrete;
			}
			&:popover-open {
				translate: 0;
				&::backdrop {
					opacity: 0.6;
				}
				@starting-style {
					translate: 100%;
					&::backdrop {
						opacity: 0;
					}
				}
			}
			.nav-menu-level-1 {
				.nav-link-level-1,
				summary::before,
				::details-content {
					transition: 0.3s allow-discrete;
				}
				::details-content {
					height: 0;
					overflow: clip;
				}
				[open]::details-content {
					height: auto;
				}
			}
		}
	}
}

#footer {
	padding-block: 30rem 38rem;
	color: #999;
	background: #111;
	.nav-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5lh 2ch;
	}
	.site-info-list {
		display: flex;
		flex-wrap: wrap;
		gap: 1lh 5ch;
		margin-top: 30rem;
	}
	.site-info-item {
		display: inline-flex;
		gap: 1ch;
	}
	.copyright {
		margin-top: 26rem;
	}
}