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

:root {
	--header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
	--container-narrow: 1280;
	--container: 1400;
	--container-wide: 1762;
	--container-scale: 0.92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #1a509e;
	--secondary: #e87a4a;
	--placeholder-bg: #444444;
	--white: #fff;
	--black: #222;
	--border-color: #ddd; /* components.css 공유 */
	--border-color-hover: #444; /* components.css 공유 */
	--font-pret: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-sans: var(--font-pret);
	--toggle-nav-button-size: 24rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --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);
}
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}

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

.site-header { position: absolute; inset: 0 0 auto; z-index: 10;
	.container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height);}
	/* .container { display: flex; align-items: center; justify-content: space-between; 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 {
		.nav-menu-level-1 { display: flex; }
		.nav-item-level-1 { position: relative; }
		.nav-link-level-1 { display: flex; align-items: center; padding: .4lh clamp(10rem, calc(50.5 / 1920 * 100vw), 50.5rem); font: 18rem var(--font-sans);
			summary&::after{ content: ''; flex-shrink: 0; margin-left: 1ch; width: .45em; aspect-ratio: 1; border: solid currentColor; border-width: 0 1rem 1rem 0; rotate: 45deg; translate: 0 -25%; }
			[open] summary&::after{ rotate: -135deg; translate: 0 25%; }
		}
		.nav-menu-level-2 { position: absolute; top: calc(100% + .2lh); left: 50%; width: max-content; min-width: 120rem; background: #fff; border: 1px solid #ddd; transform: translateX(-50%); }
		.nav-link-level-2 { display: block; padding: 14rem; font-size: 14rem; text-align: center; color: #333; }
		.nav-link-level-2:hover { color: #fff; background: var(--primary); }
		.nav-item-level-2 + .nav-item-level-2 { border-top: 1px solid #ddd; }
		@media (prefers-reduced-motion: no-preference) {
			.nav-details-level-1::details-content, .nav-menu-level-2 { transition: 0.3s allow-discrete; }
			.nav-details-level-1 {
				&::details-content { opacity: 0; }
				&[open]::details-content { opacity: 1; }
			}
			.nav-details-level-1:not([open]) .nav-menu-level-2 { top: 100%; }
		}
		@media (width < 1280px) {
			display: none;
		}
	}
	.toggle-nav-button { position: relative; display: block; width: var(--toggle-nav-button-size); aspect-ratio: 1; cursor: pointer;
		.bar { position: absolute; inset: 0; height: 2px; margin: auto; background: currentcolor; }
		.bar-1 { translate: 0 -8rem; }
		.bar-3 { translate: 0 8rem; }
		@media (width > 1280px) {
			display: none;
		}
	}
	.toggle-nav { --border-color: #eaeaea; --padding-block: 15rem; --padding-inline: 16rem; left: auto; z-index: 12; width: 100%; max-width: 280rem; height: 100dvh; padding: 0; color: #000; background: #fff; border: 0;
		&::backdrop { background: #000; }
		.toggle-nav-header { display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); }
		.toggle-nav-close { position: relative; display: block; width: var(--toggle-nav-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 {
			.nav-item-level-1 { border-top: 1px solid var(--border-color); }
			.nav-item-level-1: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 currentcolor; 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-item-level-2 { 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; }
			}
		}
	}
    .header-actions {display: inline-flex;align-items: center;gap: clamp(44rem, calc(24 / var(--container) * 100vw), 44rem);justify-content: flex-end;}
	.site-language {display: inline-flex;align-items: center;gap: clamp(10rem, calc(16 / var(--container) * 100vw), 10rem);
	}
	.site-language-link {position: relative;display: inline-flex;align-items: center;justify-content: center;min-width: 28rem;padding-bottom: 2rem;font-size: 15rem;font-weight: 500;letter-spacing: -0.02em;color: rgba(255, 255, 255, 0.62);text-transform: uppercase;transition:color 0.24s ease,opacity 0.24s ease;
	}
	.site-language-link::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 1px;background: currentcolor;opacity: 0;transform: scaleX(0.4);transform-origin: center;transition:opacity 0.24s ease,transform 0.24s ease;
	}
	.site-language-link:hover,
	.site-language-link.is-active,
	.site-language-link[aria-current="page"] {color: #fff;
	}
	.site-language-link.is-active::after,
	.site-language-link[aria-current="page"]::after,
	.site-language-link:hover::after {opacity: 1;transform: scaleX(1);
	}
	.site-language-divider {display: block;width: 1px;height: 18rem;background: rgba(255, 255, 255, 0.45);
	}
	@media (width < 1280px) {
		.header-actions {gap: 18rem;}
		.site-language-link {font-size: 15rem;}
	}
	@media (width < 767px) {
		.header-actions {gap: 14rem;}
		.site-language {gap: 10rem;}
		.site-language-link {min-width: 24rem;font-size: 14rem;padding-bottom: 3rem;}
		.site-language-divider {height: 16rem;}
	}
	.util_member a:last-child::before {background-color: #aaa;}
	.ani_on #header{top:0;}

	.util_member, .util_member a {color: #fff;font-weight: 100;font-size: 15rem;display: inline-block;}
	.util_member a {padding-left: 10rem;margin-left: 10rem;position: relative;}
	.util_member a:last-child::before {content: '';display: inline-block;width: 3rem;height: 3rem;border-radius: 50%;background-color: #fff;position: absolute;left: -3rem;top: 12rem;}

}

.site-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; }
}