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

:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(100 / var(--container) * 100vw + var(--font-offset)), 100rem);
	--container-narrow: 1200;
	--container: 1500;
	--container-wide: 1762;
	--container-scale: 0.92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #cf0202;
	--secondary: #0b2c67;
	--purple: #72358c;
	--dark-red: #750000;
	--wine: #8f0f51;
	--red: #ae0000;
	--pink-rose: #d73278;
	--orange-red: #ec682d;
	--orange: #f57334;
	--navy: #384175;
	--placeholder-bg: #444444;
	--white: #fff;
	--bg-gray-light: #f1f1f1;
	--blue: #316cd4;
	--black: #111;
	--border-color: #ddd; /* components.css 공유 */
	--hover-border-color: #444; /* components.css 공유 */
	--font-pret: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-play: "Play", var(--font-pret);
	--font-sans: var(--font-pret);
	--site-menu-button-size: 39rem;
	--section-block: 20rem;
	--content-top: 20rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
	--placeholder-image-bg: #e0e0e0;
	--placeholder-image-url: url("/assets/images/layouts/symbol-gray.svg");
	--placeholder-image-size: min(40%, 100rem);
}

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

*, *::before, *::after { letter-spacing: -0.01em; }
/* main section:not(:first-of-type, .section-news, .scroll-container), [popover] { content-visibility: auto; contain-intrinsic-size: auto 500px; } */
section {
	@media (width >= 1280px) { scroll-margin-top: var(--section-block); }
	@media (width < 1280px) { scroll-margin-top: var(--header-height); }
}

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

.site-header {
	& { inset: 0 0 auto; z-index: 10; overflow: clip visible;
		@media (width >= 1280px) { position: relative; }
		@media (width < 1280px) { position: sticky; background: linear-gradient(0deg, #ddd 1px, #fff 1px); }
	}
	.site-header-container { display: grid; align-items: center; height: var(--header-height);
		@media (width >= 1280px) { grid-template-columns: auto 1fr auto; }
		@media (width < 1280px) { grid-template-columns: 1fr auto; }
	}
	.logo { position: relative; display: inline-block; justify-self: start; }
	.logo-image { display: block; width: auto; height: 26rem; }
	.main-nav { --menu-height: 240rem;
		& {
			@media (width >= 1280px) {
				&:hover::before { position: absolute; top: calc(var(--header-height) - 1px); left: 50%; width: 100vw; height: var(--menu-height); background: #000; background: #fff; border-top: 1px solid #ddd; translate: -50%; content: ""; }
				&:not(:hover) .nav-menu-level-2 { visibility: hidden; opacity: 0; }
			}
			@media (width < 1280px) { display: none; }
		}
		.nav-menu-level-1 { display: flex; justify-content: end; padding-right: 10rem; }
		.nav-item-level-1 { position: relative; }
		.nav-item-level-1:hover {
			&::before { position: absolute; inset: auto 0 0; display: block; width: 12rem; aspect-ratio: 1; margin: auto; background: var(--primary); border-radius: 50%; translate: 0 50%; content: ""; }
			.nav-link-level-1 { font-weight: 600; color: var(--primary); }
		}
		.nav-link-level-1 { display: flex; align-items: center; height: var(--header-height); padding-inline: clamp(10rem, calc(43.2 / 1920 * 100vw + var(--font-offset)), 43.2rem); font: 500 var(--font-size-19) var(--font-sans); }
		.nav-menu-level-2 { position: absolute; inset-inline: 0; display: flex; flex-direction: column; gap: 18rem; height: var(--menu-height); padding-top: 37rem; font: var(--font-size-17) / 1.29411765 var(--font-sans); text-align: center; color: #333; }
		.nav-item-level-1:nth-child(3) .nav-menu-level-2 { max-width: 12ch; margin-inline: auto; }
		.nav-menu-level-2:hover { color: #aaa; }
		.nav-link-level-2:hover { color: #111; text-decoration: underline; text-underline-offset: 3rem; }
	}
	.site-menu-toggle { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; cursor: pointer;
		.bar { position: absolute; inset: 0; height: 3px; margin: auto; background: currentcolor; }
		.bar-1 { width: 97.43589744%; margin-right: 1px; translate: 0 -9rem; }
		.bar-2 { width: 56.41025641%; margin-right: 1px; translate: 0; }
		.bar-3 { width: 76.92307692%; margin-right: 0; translate: 0 9rem; }
	}
	.site-menu { --border-color: #eaeaea; --padding-block: 15rem; --padding-inline: 16rem; inset: 0; z-index: 12; grid-template-rows: auto 1fr; width: 100%; height: 100%; padding: 0; color: #fff; background: #151515; border: 0; scrollbar-gutter: stable;
		&:popover-open { display: grid; }
		html:has(&:popover-open) { overflow: clip; }
		.site-menu-header { display: grid; grid-template-columns: 1fr auto; align-items: center; height: var(--header-height); }
		.site-menu-toggle { color: #fff;
			.bar-1, .bar-2 { width: 100%; translate: 0; }
			.bar-1 { rotate: 45deg; }
			.bar-2 { rotate: -45deg; }
			.bar-3 { display: none; }
		}
		.nav-menu-level-1 { --padding-block: 36rem; display: grid; align-items: start; gap: 2lh clamp(8rem, calc(50 / var(--container) * 100vw + var(--font-offset)), 50rem); overflow: auto; padding-bottom: var(--padding-block);
			@media (width >= 768px) { grid-template-columns: repeat(5, 1fr); align-self: center; padding-top: var(--padding-block); }
		}
		.nav-item-level-1 {
			@media (width >= 768px) {
				&:nth-child(even) { translate: 0 25rem; }
				&:nth-child(odd) { translate: 0 -25rem; }
			}
		}
		.visual { aspect-ratio: 26 / 14; background: no-repeat 50% / cover; border-radius: clamp(8rem, calc(15 / var(--container) * 100vw + var(--font-offset)), 15rem); }
		.nav-item-level-1:not(:hover) .visual { filter: grayscale(1); }
		.visual-1 { background-image: url("/assets/images/layouts/nav-visual-1.webp"); }
		.visual-2 { background-image: url("/assets/images/layouts/nav-visual-2.webp"); }
		.visual-3 { background-image: url("/assets/images/layouts/nav-visual-3.webp"); }
		.visual-4 { background-image: url("/assets/images/layouts/nav-visual-4.webp"); }
		.visual-5 { background-image: url("/assets/images/layouts/nav-visual-5.webp"); }
		.nav-link-level-1 { margin-block: 0.92em 1.12em; font-weight: 600; font-size: var(--font-size-25); color: #fff; }
		.nav-item-level-1:hover .nav-link-level-1 { color: var(--primary); }
		.nav-menu-level-2 { display: grid; gap: 0.58235294em; font: 300 var(--font-size-17-to-14) / 1.47058824 var(--font-sans); }
		.nav-link-level-2:not(:hover) { color: #aaa; }
		.nav-link-level-2:hover { text-decoration: underline; text-underline-offset: 0.17647059em; }
	}
}

.site-footer { padding-block: 39rem 51rem; background: #f5f5f5; border-top: 1px solid #e5e5e5;
	.container { display: grid; gap: var(--content-top) 180rem;
		@media (width >= 1280px) { grid-template-columns: auto 1fr; }
	}
	.logo { display: block; width: auto; height: clamp(20rem, calc(26 / var(--container) * 100vw + var(--font-offset)), 26rem);
		@media (width >= 1280px) { translate: 0 11.5%; }
	}
	.site-nav { display: flex; align-items: center; font: 500 clamp(16rem, calc(22 / var(--container) * 100vw + var(--font-offset)), 22rem) var(--font-sans); }
	.site-nav > li + li::before { display: inline-block; width: 1px; height: 0.63636364em; margin-inline: clamp(17rem, calc(28 / var(--container) * 100vw + var(--font-offset)), 28rem) clamp(17rem, calc(29 / var(--container) * 100vw + var(--font-offset)), 29rem); background: #ccc; content: ""; }
	.site-link--tel { font: 700 1em var(--font-play); letter-spacing: -0.025em; }
	.site-info-list { display: flex; flex-wrap: wrap; gap: 1lh 5ch; margin-top: 1.35294118em; font: 300 var(--font-size-17-to-14) var(--font-sans); color: #777; }
	.nav-menu { display: flex; flex-wrap: wrap; gap: 0.5lh 1.8ch; margin-top: 1.27777778em; font: 600 var(--font-size-18-to-14) var(--font-sans); color: #333; }
	.copyright { margin-top: 0.75em; font-weight: 300; color: #aaa; }
}

.page-up { position: fixed; right: clamp(8rem, calc(20 / var(--container) * 100vw + var(--font-offset)), 20rem); bottom: clamp(8rem, calc(30 / var(--container) * 100vw + var(--font-offset)), 30rem); z-index: 9; display: block; width: clamp(44rem, calc(80 / var(--container) * 100vw + var(--font-offset)), 80rem); aspect-ratio: 1; background: #fff url("/assets/images/ui/up-arrow-black.svg") no-repeat 50% / 18.75%; border-radius: 50%; box-shadow: 10rem 15rem 30rem hsla(0, 0%, 0%, 0.15); }