@charset "utf-8";
@layer reset, form;
:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(70 / var(--container) * 100vw), 70rem);
	--container-narrow: 1280;
	--container: 1500;
	--container-wide: 1780;
	--container-scale: 0.94;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #07579a;
	--secondary: #3b8ed3;
	--tertiary: #5282aa;
	--placeholder-bg: #444;
	--white: #fff;
	--red: #ea212f;
	--yellow: #fffaa5;
	--black: #222;
	--border-color: #ddd;
	/* components.css 공유 */
	--hover-border-color: #444;
	/* components.css 공유 */
	--font-pret: "Pretendard Variable", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-hanam: "HANAMDAUM", var(--font-pret);
	--font-mont: "Montserrat", var(--font-pret);
	--font-sans: var(--font-pret);
	--site-menu-button-size: 22rem;
	--section-block: 60rem;
	--content-top: 32rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --image-placeholder-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시);
     * - --image-placeholder-url : 플레이스홀더 로고 이미지 경로;
     * - --image-placeholder-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함);
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
	--image-placeholder-bg: #e0e0e0;
	--image-placeholder-url: url("/assets/images/layouts/image-placeholder.svg");
	--image-placeholder-size: min(60%, 300rem);
}

/* #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:nth-of-type(n + 3):not(.section-brand), [popover] { content-visibility: auto; contain-intrinsic-size: 500px; }

.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 {
	& { --border-color: #e8e8e8; position: fixed; inset: 20rem 0 auto; z-index: 10; color: #fff;
		body.is-scrolled & { color: #fff;
			.container { padding-inline: clamp(16rem, calc(23 / var(--container) * 100vw), 23rem); background: hsla(0, 0%, 0%, 0.3); backdrop-filter: blur(7px);
				&:has(.container:hover) { background: #fff; backdrop-filter: none; transition: none; }
			}
			@media (width >= 1080px) {
				.logo-link { translate: 8rem; }
			}
		}
		&:has(.container:hover) { color: var(--black);
			&:hover, &:focus-within {
				.container { background: #fff; }
			}
		}
		@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
	}
	.container { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); border-radius: 5rem;
		@media (prefers-reduced-motion: no-preference) { transition: 0.3s; }
		@media (width >= 1280px) { grid-template-columns: 1fr auto 1fr; }
		@media (width < 1280px) { grid-template-columns: 1fr auto; }
	}
	.logo-link { position: relative; display: inline-block; justify-self: start;
		@media (width >= 768px) { translate: 2rem; }
	}
	.logo-image { display: block; width: auto; height: clamp(43rem, calc(51 / var(--container) * 100vw), 51rem);
		.symbol-bg { fill: #5281a8; }
		:where(.symbol-txt, .text-en, .text-ko, .hours) { fill: #fff; }
		@media (prefers-reduced-motion: no-preference) {
			:where(.text-en, .text-ko, .hours) { transition: 0.3s; }
		}
		@media (any-hover) {
			#header:has(.container:hover) & {
				.text-en { fill: #808284; }
				.text-ko { fill: #404041; }
				.hours { fill: #f15a28; }
			}
		}
	}
	.main-nav {
		.nav-menu-level-1 { display: flex; }
		.nav-item-level-1 { position: relative; }
		/* .nav-link-level-1 { display: block; align-content: center; height: 3.5em; padding-inline: clamp(24rem, calc(48.5 / 1920 * 100vw), 48.5rem); font: 700 var(--font-size-20) var(--font-sans); } */
		.nav-link-level-1 { display: block; align-content: center; height: 3.5em; padding-inline: clamp(24rem, calc(48.5 / 1920 * 50vw), 48.5rem); font: 700 var(--font-size-20) var(--font-sans); }
		.nav-menu-summary { padding: 57rem 63rem; border-right: 1px solid var(--border-color); }
		.nav-menu-title { margin-bottom: 0.44em; font: 700 var(--font-size-25) var(--font-sans); }
		.nav-description { font: 14rem / 1.58571429 var(--font-sans); text-wrap: balance; }
		.nav-menu-level-2 { position: absolute; top: calc(100% + 10rem); left: 50%; display: grid; gap: 10rem; min-width: 164rem; padding: 26rem 2ch 21rem; white-space: nowrap; text-align: center; color: #fff; background: #002f56; border-radius: 10rem; translate: -50%; visibility: hidden; opacity: 0;
			.nav-item-level-1:hover &, .nav-item-level-1:focus-within & { visibility: visible; opacity: 1; }
			@media (prefers-reduced-motion: no-preference) { transform: translateY(-10rem); transition: 0.3s;
				.nav-item-level-1:hover &, .nav-item-level-1:focus-within & { transform: translateY(0); }
			}
			&::before { position: absolute; inset: -20px 0 0; z-index: -1; content: ""; }
		}
		@media (width < 1280px) { display: none; }
	}
	.utilities { display: flex; align-items: center; justify-self: end; gap: clamp(20rem, calc(59 / var(--container) * 100vw), 59rem); }
	.social-nav {
		.social-menu { display: flex; align-items: center; gap: clamp(20rem, calc(35 / var(--container) * 100vw), 35rem); }
		.social-link { position: relative; display: block;
			&:hover .social-label, &:focus-within .social-label { translate: -50%; visibility: visible; opacity: 1; }
		}
		.social-link::before { position: absolute; inset: -17rem; content: ""; }
		.social-icon { display: block; width: 22rem; height: auto; aspect-ratio: 1; }
		.social-icon--kakao { width: 23rem; aspect-ratio: 23 / 22; }
		.social-label { position: absolute; top: calc(100% + 15rem); left: 50%; padding: 1rem 5rem 2rem; font: 700 10rem var(--font-sans); white-space: nowrap; color: var(--black); background: #ffe600; border-radius: 5em; translate: -50% -50%; visibility: hidden; opacity: 0; }
		@media (prefers-reduced-motion: no-preference) {
			.social-label { transition: 0.3s; }
		}
		@media (width < 768px) { display: none; }
	}
	.site-menu-toggle { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; cursor: pointer;
		&::before { position: absolute; inset: -17rem; content: ""; }
		.bar { position: absolute; inset: 0; height: 2px; margin: auto; background: currentcolor; }
		.bar-1 { translate: 0 -6rem; }
		.bar-3 { translate: 0 6rem; }
	}
	.site-menu { --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; }
		.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 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-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 { contain: content; color: #fff; background: #1a252f;
	* { letter-spacing: 0; }
	.footer-logo { display: block; width: clamp(140rem, calc(185 / var(--container) * 100vw), 185rem); height: auto; }
	.legal-link-list { display: flex; flex-wrap: wrap; gap: 0.5lh 2ch; gap: 10rem; font-size: 15rem; text-align: center; color: rgb(from currentColor r g b / 0.4); }
	.legal-link { display: inline-block; min-width: 8.66666667em; padding: 6.5rem 13rem; background: #131d26; border-radius: 5rem; }
	.site-info-list { display: flex; flex-wrap: wrap; gap: 0.44lh 5.3ch; max-width: 90ch; margin-top: 39rem; font-size: 15rem; }
	.site-info-item { display: inline-flex; gap: 2.2ch; }
	.site-info-item dt { color: rgb(from currentColor r g b / 0.3); }
	.site-info-item dd { color: rgb(from currentColor r g b / 0.6); }
	.copyright { margin-top: clamp(30rem, calc(60 / var(--container) * 100vw), 60rem); font-size: 14rem; color: rgb(from currentColor r g b / 0.3); text-transform: uppercase; }
	.nav-block { --color-border: #000; position: relative; display: grid; grid-template-rows: 1fr auto; }
	.nav-menu { --nav-gap: 14.4rem; display: grid; gap: var(--nav-gap); color: rgb(from currentColor r g b / 0.6); }
	.back-to-top { position: relative; display: flex; align-items: center; justify-content: space-between; height: 84rem; padding: 5rem 52rem 0 50rem; font: 700 15rem var(--font-sans); color: rgb(from currentColor r g b / 0.2); text-transform: uppercase; border-top: 1px solid var(--color-border); }
	.back-to-top::after { display: block; width: 10rem; aspect-ratio: 10 / 9; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); content: ""; }
	@media (width >= 1280px) {
		.container { display: grid; grid-template: "margin-top margin-top nav" clamp(var(--section-block), calc(78 / var(--container) * 100vw), 78rem) "logo link nav" "logo info nav" "margin-bottom margin-bottom nav" clamp(var(--section-block), calc(67 / var(--container) * 100vw), 67rem) / auto 1fr 254rem; }
		.footer-logo { grid-area: logo; margin: 3rem clamp(20rem, calc(171 / var(--container) * 100vw), 171rem) auto 0; }
		.legal-link-list { grid-area: link; }
		.site-info { grid-area: info; }
		.nav-block { grid-area: nav; border-inline: 1px solid var(--color-border); }
		.nav-menu { padding-inline: clamp(16rem, calc(50 / var(--container) * 100vw), 50rem) clamp(16rem, calc(40 / var(--container) * 100vw), 40rem); }
		.footer-nav { align-content: center; padding-top: 16rem; }
	}
	@media (width < 1280px) {
		.container { display: grid; grid-template:
				"margin-top margin-top" clamp(var(--section-block), calc(78 / var(--container) * 100vw), 78rem) "logo link" "logo info" "margin-bottom margin-bottom" clamp(var(--section-block), calc(67 / var(--container) * 100vw), 67rem)
				"nav nav" / auto 1fr; }
		.container { display: grid; grid-template:
				"margin-top margin-top" clamp(var(--section-block), calc(78 / var(--container) * 100vw), 78rem) "logo logo" "link link" "info info" "margin-bottom margin-bottom" clamp(var(--section-block), calc(67 / var(--container) * 100vw), 67rem)
				"nav nav" / auto 1fr; }
		.footer-logo { grid-area: logo; margin-bottom: 40rem; }
		.legal-link-list { grid-area: link; }
		.site-info { grid-area: info; }
		.nav-block { grid-area: nav; }
		.footer-nav { position: relative; padding-block: 1lh; }
		.nav-menu { grid-template-columns: repeat(auto-fit, minmax(min(15ch, calc(50% - (var(--nav-gap) / 2))), 1fr)); }
		.footer-nav::before, .back-to-top::before { position: absolute; inset: 0 -100vw; border-top: 1px solid var(--color-border); content: ""; pointer-events: none; }
	}
	@media (width < 768px) {
		.site-info-list { flex-direction: column; }
	}
}

.fixedBar { position: fixed; right: 20rem; bottom: 30rem; width: 70rem; }
.fixedBar a { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; background: #07579a; border: 1px solid #fff; border-radius: 50%; }
.fixedBar img { display: block; height: 30rem; }
@media (width < 1280px) {
	.fixedBar { right: 2%; width: 60rem; }
}
@media (width < 768px) {
	.fixedBar { bottom: 20rem; width: 50rem; }
	.fixedBar img { height: 25rem; }
}