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

:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(80 / var(--container) * 100vw), 80rem);
	--container-narrow: 1280;
	--container: 1400;
	--container-wide: 1700;
	--container-scale: .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 공유 */
	--hover-border-color: #444; /* components.css 공유 */
	--font-pret: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', sans-serif;
	--font-mont: 'Montserrat', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', sans-serif;
	--font-sans: var(--font-pret);
	--site-menu-button-size: 25rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --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);
}

/* lenis init */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

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

.container { position: relative; margin-inline: 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: auto; }
}

#header {position: relative;background: #f2f2f2;
	.container { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
	.logo { justify-self: start; position: relative; display: inline-block; }
	.logo-image { display: block; width: auto; height: clamp(24rem, calc(30 / var(--container) * 100vw), 30rem); }
	.main-nav {display: flex;align-items: center;
		.nav-menu-level-1 {display: flex;gap: 10rem;}
		.nav-item-level-1 { position: relative; }
		.nav-link-level-1 {display: flex;align-items: center;padding: 10rem 20rem;background: transparent;border-radius: 50rem;font: 700 17rem var(--font-mont);transition: all .3s;}
		.active .nav-link-level-1 { color: #3771fc;}
		.nav-link-level-1:hover{ background: transparent; color: #3771fc;}
		.nav-menu-level-2 { visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120rem; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
		li:hover .nav-menu-level-2 { visibility: visible; top: 80%; opacity: 1; }
		.nav-link-level-2 { display: block; padding: 14rem; color: #333; font-size: 14rem; text-align: center; }
		.nav-link-level-2:hover { background: var(--primary); color: #fff; }
		.nav-item-level-2 + .nav-item-level-2 { border-top: 1px solid #ddd; }

		.portfolio-btn {position: relative;margin-left: 30rem;}
		.portfolio-btn a {display: flex;align-items: center;font-size: 16rem;text-transform: uppercase;font-family: 'Montserrat';gap: 15rem;font-weight: 700;padding: 10rem 30rem;border: 1rem solid;border-radius: 50rem;background: transparent;transition: all .3s;}
		.portfolio-btn a:hover { background: #222 ; color: #fff; }
		.portfolio-btn a:hover svg path { fill: white; }

		@media (prefers-reduced-motion:no-preference) {
			.nav-menu-level-2 { transition: .3s; }
		}
		@media (width < 1280px) {
			& { display: none; }
		}
	}
	.site-menu-toggle { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; cursor: pointer; display: none;
		.bar { position: absolute; inset: 0; margin: auto; height: 2px; background: currentcolor; }
		.bar-1 { translate: 0 -8rem; }
		.bar-3 { translate: 0 8rem; }

		@media(max-width: 1280px){
			display: block;
		}

	}
	.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: 16rem; 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); }
		}
		.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); text-align: left; font-size: 16rem; }
			summary.nav-link-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.nav-link-level-1::before { scale: 1 -1; translate: 0 -50%; }
			::details-content { overflow: clip; height: 0; }
			[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) {
			& { transition: .3s allow-discrete; translate: 100%;}
			&::backdrop { opacity: 0; transition: .3s allow-discrete; }
			&:popover-open { translate: 0;
				&::backdrop { opacity: .6; }
				@starting-style { translate: 100%;
					&::backdrop { opacity: 0; }
				}
			}
			.nav-menu-level-1 {
				.nav-link-level-1, summary::before, ::details-content { transition: .3s allow-discrete; }
				::details-content { overflow: clip; height: 0; }
				[open]::details-content { height: auto; }
			}
		}
	}
}

#footer {background: #000;color: #999;

	.bot-nav { position: relative; font-family: var(--font-mont); }
	.nav-menu {display: flex;flex-wrap: wrap;min-height: 80rem;align-items: center;justify-content: center;border-bottom: 1rem solid #555;}
	.nav-menu a { color: #fff; width: 150rem; display: flex; justify-content: center; }

	.footer-info { display: flex; justify-content: space-between; padding-block: 60rem 80rem; }
	.footer-info .footer-logo { filter: invert(1); max-width: 125rem; }
	.footer-info .site-info { display: flex; gap: 100rem; align-items: flex-start; }
	.footer-info .site-info address { }
	.footer-info .site-info-list { display: flex; flex-wrap: wrap; max-width: 900rem; gap: 10rem 30rem; margin-bottom: 30rem; }
	.footer-info .site-info-list .site-info-item { display: flex; gap: 20rem; }
	.footer-info .site-info-list .site-info-item dt { font-weight: bold; }
	.footer-info .btn-download { display: flex; flex-direction: column; gap: 20rem; }
	.footer-info .btn-download .download {display: flex;align-items: center;color: #fff;padding: 15rem 20rem;min-width: 220rem;justify-content: center;gap: 20rem;background: #323232;transition: all .3s;}
	.footer-info .btn-download .download:hover { background: #5e5e5e; }

	@media(max-width: 1023px){
		.footer-info { flex-direction: column; gap: 40rem; }
	}
	@media(max-width: 767px){
		.nav-menu a { width: auto; }
		.nav-menu { gap: 20rem; }
		.footer-info .site-info { flex-direction: column; gap: 50rem; }
	}
}

#scrollTopBtn {z-index: 99; width: 80rem; height: 80rem; display: flex; flex-direction: column; background: #222; color: #fff; justify-content: center; align-items: center; font-size: 14rem; gap: 10rem; border-radius: 100rem; position: fixed; bottom: 50rem; right: 30rem; opacity: 0; transition: all .3s; }
#scrollTopBtn.show { opacity: 1; transition: all .3s; }
#scrollTopBtn:hover { background: #3970fd; transition: all .3s; }