@charset "utf-8";

@layer reset, form;

:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(102 / var(--container) * 100vw), 102rem);
	--container-narrow: 1215;
	--container: 1400;
	--container-wide: 1762;
	--container-scale: 0.92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #1a509e;
	--secondary: #e87a4a;
	--white: #fff;
	--boulder: #777;
	--gray: #555;
	--cello: #203764;
	--mine-shaft: #333;
	--black: #222;
	--border-color: #eee;
	/* components.css 공유 */
	--hover-border-color: #444;
	/* components.css 공유 */
	--font-sans: var(--font-noto);
	--font-pret: "Pretendard", "Malgun Gothic", "Dotum", "Gulim", Sans-serif;
	--font-noto: "Noto Sans KR", var(--font-pret);
	--font-open: "Open Sans", var(--font-pret);

	--font-gphans: "GapyeongHanseokbong", "Pretendard", "Malgun Gothic", "Dotum",
		"Gulim", Sans-serif;
	--font-nmjo: "Nanum Myeongjo", "Pretendard", "Malgun Gothic", "Dotum", "Gulim",
		Sans-serif;
	--section-padding-block-mobile: 60rem;

	--site-menu-button-size: 25rem;

	/* 
	 * 사이트 공통 이미지 플레이스홀더 변수
	 * 
	 * - --image-placeholder-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
	 * - --image-placeholder-url : 플레이스홀더 로고 이미지 경로
	 * - --image-placeholder-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
	 *
	 * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
	 * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
	 */
	--image-placeholder-bg: #e0e0e0;
	--image-placeholder-url: url("/assets/images/layouts/image-placeholder.png");
	--image-placeholder-size: min(30%, 100rem);
}

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

html {
	scroll-padding-top: calc(var(--header-height) + 20rem);
}
body {
	padding-top: var(--header-height);
}

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

#header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	background: linear-gradient(0deg,
			var(--border-color) 1px,
			#fff 1px,
			#fff calc(100% - 1px),
			var(--border-color) calc(100% - 1px));
	.container {
		display: grid;
		align-items: center;
		max-width: 1219rem;
		height: var(--header-height);
	}
	.logo {
		justify-self: start;
		position: relative;
		display: inline-block;
	}
	.logo-image {
		display: block;
		width: auto;
		height: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem);
	}
	.main-nav {
		.main-menu {
			display: flex;
		}
		.main-menu > li {
			position: relative;
		}
		[data-nav-level="1"] {
			display: flex;
			align-items: center;
			height: var(--header-height);
			padding: 0 clamp(10rem, calc(48 / 1920 * 100vw), 48rem);
			font: 500 18rem var(--font-sans);
			letter-spacing: -0.03em;
		}

		.sub-menu {
			visibility: hidden;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			min-width: 158px;
			width: max-content;
			background: #fff;
			border: 1px solid var(--border-color);
			opacity: 0;
		}
		li:hover .sub-menu {
			visibility: visible;
			opacity: 1;
		}
		[data-nav-level="2"] {
			display: block;
			padding: 14rem;
			font-size: 15rem;
			letter-spacing: -0.02em;
			text-align: center;
			color: var(--black);
		}
		[data-nav-level="2"]:hover {
			background: var(--cello);
			color: #fff;
		}
		.sub-menu li + li {
			border-top: 1px solid var(--border-color);
		}
	}
	.site-menu-toggle {
		position: relative;
		display: block;
		width: var(--site-menu-button-size);
		aspect-ratio: 1;
		cursor: pointer;
		.bar {
			position: absolute;
			inset: 0;
			margin: auto;
			height: 2px;
			background: currentColor;
		}
		.bar-1 {
			translate: 0 -8rem;
		}
		.bar-3 {
			translate: 0 8rem;
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.menu-bar {
			transition: 0.4s;
		}
	}
	@media (any-hover) {
		.main-nav .main-menu > li:hover {
			background: linear-gradient(0deg, #000 2px, #0000 2px);
			color: #8a8a8a;
		}
	}
	@media (min-width: 1280px) {
		.container {
			grid-template-columns: 1fr auto 1fr;
		}
		.site-menu-toggle {
			display: none;
		}
	}
	@media (max-width: 1279px) {
		.container {
			grid-template-columns: 1fr auto;
		}
		.main-nav {
			display: none;
		}
	}

	.site-menu {
		--border-color: #eaeaea;
		--padding-block: 15rem;
		--padding-inline: 16rem;
		left: auto;
		z-index: 12;
		max-width: 280rem;
		width: 100%;
		height: 100dvh;
		padding: 0;
		background: #fff;
		border: 0;
		color: #000;
		&::backdrop {
			background: #000;
		}
		.site-menu-header {
			display: grid;
			align-items: center;
			justify-content: flex-end;
			height: var(--header-height);
		}
		.site-menu-close {
			position: relative;
			margin-right: 16px;
			display: block;
			width: var(--site-menu-button-size);
			aspect-ratio: 1;
			background: 0;
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				display: block;
				width: 100%;
				height: 2px;
				background: currentColor;
				transform: translateY(-50%) rotate(45deg);
			}
			&::after {
				transform: translateY(-50%) rotate(-45deg);
			}
		}
		.main-menu {
			& > li {
				border-top: 1px solid var(--border-color);
			}
			& > li:last-child {
				border-bottom: 1px solid var(--border-color);
			}
			[data-nav-level="1"] {
				position: relative;
				display: block;
				width: 100%;
				padding: var(--padding-block) 30rem var(--padding-block) var(--padding-inline);
				text-align: left;
				font-size: 16rem;
			}
			summary[data-nav-level="1"]::before {
				content: "";
				position: absolute;
				inset: 0;
				margin: auto 16rem auto auto;
				display: block;
				width: 8rem;
				aspect-ratio: 1;
				border: solid currentColor;
				border-width: 0 1px 1px 0;
				transform: rotate(45deg) translateY(-75%);
			}
			[open] summary[data-nav-level="1"]::before {
				scale: 1 -1;
				translate: 0 -50%;
			}
			::details-content {
				overflow: clip;
				height: 0;
			}
			[open]::details-content {
				height: auto;
			}
			.sub-menu {
				background: #f8f8f8;
			}
			.sub-menu > li {
				border-top: 1px solid var(--border-color);
			}
			[data-nav-level="2"] {
				position: relative;
				display: block;
				padding: var(--padding-block) var(--padding-inline);
				font-size: 14rem;
			}
		}
		@media (prefers-reduced-motion: no-preference) {
			& {
				transition: 0.4s allow-discrete;
				translate: 100%;
			}
			&::backdrop {
				opacity: 0;
				transition: 0.4s allow-discrete;
			}
			&:popover-open {
				translate: 0;
				&::backdrop {
					opacity: 0.6;
				}
				@starting-style {
					translate: 100%;
					&::backdrop {
						opacity: 0;
					}
				}
			}
			.main-menu {
				[data-nav-level="1"],
				summary::before,
				::details-content {
					transition: 0.4s allow-discrete;
				}
				::details-content {
					overflow: clip;
					height: 0;
				}
				[open]::details-content {
					height: auto;
				}
			}
		}
	}
}

#footer {
	padding-block: 32rem 22rem;
	background: #f8f8f8;
	color: var(--boulder);
	.container {
		max-width: 1365rem;
		padding-top: 29rem;
		border-top: 1px solid #eee;
	}
	.link-list {
		display: flex;
		gap: 2.4ch;
		font-weight: 350;
		color: var(--mine-shaft);
	}
	.link-list li:nth-child(3) {
		font-weight: 500;
	}
	.site-info {
		margin-top: 23rem;
		padding-right: 50rem;
		font-size: 13rem;
	}
	.info-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.2lh 3.2ch;
		max-width: 900rem;
	}
	.info-item {
		display: inline-flex;
		gap: 0.4ch;
	}
	.info-item:last-child {
		flex: 1 100%;
	}
	dt {
		white-space: nowrap;
	}
	dt::after {
		content: " : ";
	}
	.copyright {
		margin-top: 6rem;
	}
	@media (width < 768px) {
		.info-list {
			flex-direction: column;
		}
	}
}

.quick-navigation {
	position: fixed;
	right: clamp(10rem, calc(90.5 / var(--container) * 100vw), 90.5rem);
	bottom: clamp(10rem, calc(77 / var(--container) * 100vw), 77rem);
	z-index: 9;
	display: grid;
	gap: 3rem;
}

.quick-navigation .link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42rem;
	aspect-ratio: 1;
	background: rgba(34, 34, 34, 0.26);
	border-radius: 50%;
	color: white;
	font-size: 20rem;
	position: relative;
	cursor: pointer;
}

.quick-navigation .link:nth-child(1)::before {
	content: "↑";
	position: absolute;
	font-size: 20rem;
}

.quick-navigation .link:nth-child(2)::before {
	content: "↓";
	position: absolute;
	font-size: 20rem;
}

@media (width < 768px) {
	.quick-navigation {
		right: 10rem;
		bottom: 10rem;
	}
}

.quick-navigation .link:hover {
	background: #2e4c90;
	color: white;
}

.quick-navigation .link {
	transition: background 0.3s ease, color 0.3s ease;
}