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

:root {
	interpolate-size: allow-keywords;
	--header-height: clamp(60rem, calc(88 / var(--container) * 100vw), 88rem);
	--container-narrow: 1140;
	--container: 1400;
	--container-wide: 1780;
	--container-scale: 0.93;
	/* --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw); */
	--container-edge-offset: calc((100vw - min(var(--container-scale) * 100vw, var(--container) * 1px)) / -2);
	--primary: #f5ba47;
	--secondary: #e87a4a;
	--placeholder-bg: #444;
	--white: #fff;
	--blue: #4482ff;
	--green: #83e66c;
	--gray: #555;
	--black: #2d2a27;
	--black: #2e2a27;
	--border-color: #666;
	--hover-border-color: #444;
	--font-pre: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-kbo: "KBO-Dia-Gothic", "Pretendard Variable", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-nps: 'Nanum Pen Script', "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-sans: var(--font-pre);
	--site-menu-button-size: 25rem;
	--section-block: 50rem;
	--content-top: 34rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --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(40%, 120rem);
}

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

section {
	/* main > &:not(:nth-child(-n + 2)) { content-visibility: auto; } */
}

.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 { position: relative; inset: 0 0 auto; z-index: 10; background: #fff;
	.container { display: flex; align-items: center; justify-content: space-between; height: var(--header-height);
		@media (width >= 1280px) { grid-template-columns: 1fr auto 1fr; }
		@media (width < 1280px) { grid-template-columns: 1fr auto; }
	}
	.logo { position: relative; display: inline-block; justify-self: start; }
	.logo-image { display: block; width: auto; height: clamp(32rem, calc(41 / var(--container) * 100vw), 41rem); }
	.main-nav {
		/*--font-size-18: clamp(15rem, calc(18 / 1920 * 100vw), 18rem);*/ font-size: clamp(15rem, calc(18 / 1920 * 100vw), 15rem);
		.nav-menu-level-1 { display: flex; }
		.nav-item-level-1 { position: relative; }
		.nav-link-level-1 { display: flex; align-items: center; height: var(--header-height); padding-inline: /*clamp(10rem, calc(29 / 1920 * 100vw), 29rem)*/ clamp(7.5rem, calc(21.75 / 1920 * 100vw), 21.75rem); font: 700 var(--font-size-15) var(--font-sans); }
		.nav-menu-level-2 { position: absolute; top: 75%; left: 50%; width: max-content; min-width: 120rem; background: #fff; border: 1px solid #ddd; transform: translateX(-50%); visibility: hidden; opacity: 0; }
		li:hover .nav-menu-level-2 { top: 80%; visibility: visible; opacity: 1; }
		.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-menu-level-2 { transition: 0.3s; }
		}
		@media (width < 1280px) { display: none; }
	}
	.utilities { --font-size-15: clamp(12rem, calc(15 / 1920 * 100vw), 15rem); display: inline-flex; align-items: center; gap: 5rem; }
	.mini-icons { display: flex; gap: 24px; margin-right: 16px; }
	.mini-icon { width: 24px; height: 24px; }
	.mini-icon img { width: 100%; height: 100%; }
	@media (min-width: 767px) {
		.mini-icons { display: none; }
	}
	.branch-details { position: relative;
		.toggle { display: flex; gap: 1.93333333em; padding: 1.06666667em 1.36666667em; font: var(--font-size-15) var(--font-sans); color: #fff; background: var(--black); border-radius: 5em; }
		.label { color: rgb(from currentColor r g b / 0.7); }
		.arrow { display: block; width: 0.8em; height: auto; opacity: 0.5; }
		.list { position: absolute; top: 100%; background: gold; }
		@media (width < 768px) { display: none; }
	}
	.header-call { display: inline-flex; align-items: center; padding: 0.93333333em 1.36666667em; font: var(--font-size-15) var(--font-sans); background: var(--black); border-radius: 5em;
		.icon { display: block; width: 1.53333333em; aspect-ratio: 23 / 22; background: url("/assets/images/layouts/header-call.svg") no-repeat 50% / contain; }
		.label { margin-left: 0.4em; font-weight: 600; color: #fff; }
		.number { margin-left: 0.4em; font-weight: 900; color: var(--primary); }
		@media (width < 768px) { display: none; }
	}
	.site-menu-toggle { position: relative; display: block; width: var(--site-menu-button-size); aspect-ratio: 1; margin-left: 10rem; 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; }
	}
	.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); }
		}
		img.site-menu-banner { width: 100%; height: auto; }
		.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; }
			@media (max-width: 1280px) {
				.nav-link-level-1 { font-size: 18rem; }
			}
			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; }
			}
		}
	}

	.quick-pills--header { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; background: white; }

	.quick-pill { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; font-weight: 600; font-size: 15rem; line-height: 1; white-space: nowrap; color: #111; text-decoration: none; background: #efc35c; border-radius: 999px; }

	.quick-pill:active { transform: translateY(1px); }

	@media (min-width: 767px) {
		.quick-pills--header { display: none; }
	}

	@media (min-width: 1280px) and (max-width: 1650px) {
		.main-nav {
			.nav-link-level-1 { padding-inline: 10px; }
		}
	}

	@media (max-width: 767px) {
		.quick-pills--header { grid-template-columns: repeat(4, 1fr); gap: 5px; }
		.quick-pill { padding: 12rem 5rem; font-size: 14rem; }
		#footer { margin-bottom: 100rem !important; }
	}

	@media (max-width: 766px) {
		body { padding-top: 64px; }
	}
}

.floating-menu { position: fixed; right: 0; bottom: 30rem; z-index: 9; contain: content; border-radius: 20rem 0 0 20rem; box-shadow: 0 5rem 30rem hsla(0, 0%, 0%, 0.1);
	body:has(#main-content.home) &:not(.is-visible) { translate: 90rem; visibility: hidden; opacity: 0; }
	.item + .item { border-top: 1px solid #e9e9e9; }
	.link { display: block; padding: 16rem 6rem 13rem; text-align: center; background: #fff; }
	.icon { display: block; margin-inline: auto; background: no-repeat 50% / contain; }
	.icon-1 { width: 27rem; height: 36rem; background-image: url("/assets/images/ui/nav-icon-7.svg"); }
	.icon-2 { width: 34rem; height: 34rem; background-image: url("/assets/images/ui/nav-icon-1.svg"); }
	.icon-3 { width: 30rem; height: 30rem; background-image: url("/assets/images/ui/nav-icon-2.svg"); }
	.icon-4 { width: 31rem; height: 33rem; background-image: url("/assets/images/ui/nav-icon-3.svg"); }
	.icon-5 { width: 29rem; height: 32rem; background-image: url("/assets/images/ui/nav-icon-4.svg"); }
	.icon-6 { width: 32rem; height: 37rem; background-image: url("/assets/images/ui/nav-icon-5.svg"); }
	.icon-7 { width: 35rem; height: 25rem; background-image: url("/assets/images/ui/nav-icon-6.svg"); }
	.label { display: block; margin-top: 8rem; font: 600 var(--font-size-14) var(--font-sans); }
	.tel-number { display: block; font: 900 12rem var(--font-sans); }
	.back-to-top { display: flex; align-items: center; justify-content: center; gap: 10rem; padding: 15rem 10rem 22rem; font: 700 13rem var(--font-sans); color: #fff; text-transform: uppercase; background: var(--black); }
	.back-to-top::after { display: block; width: 7rem; aspect-ratio: 1; border: solid currentColor; border-width: 2px 2px 0 0; translate: 0 75%; rotate: -45deg; content: ""; }
	@media (prefers-reduced-motion: no-preference) { transition: 0.5s; }
	@media (width < 768px) { display: none; }
}

/* ===== Floating menu mobile ===== */
.floating-menu-mobile { position: fixed; right: 16px; bottom: calc(16px + 90px + env(safe-area-inset-bottom)); z-index: 10000; display: flex; gap: 10px; }
.floating-menu-mobile__item { display: grid; place-items: center; width: 58px; height: 58px; background: #fff; border-radius: 50%; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.floating-menu-mobile__item img { display: block; width: 28px; height: auto; }
.floating-menu-mobile__item.is-whatsapp { background: #25d366; }

/* ===== Sticky bottom bar ===== */
.sticky-bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9999; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: white; border-top: solid 1px #ededed; }
.sticky-bottom__btn { display: block; max-width: 520px; margin: 0 auto; padding: 14px 16px; font-weight: 600; font-size: 18rem; text-align: center; color: #111; text-decoration: none; background: #f2b233; border-radius: 14px; }
@media (min-width: 767px) {
	.floating-menu-mobile { display: none; }
	.sticky-bottom { display: none; }
}

#footer { margin-bottom: 30rem;
	.container { display: grid; }
	.company-block { display: grid; contain: content; padding: clamp(24rem, calc(52 / var(--container) * 100vw), 52rem) 24rem clamp(24rem, calc(34 / var(--container) * 100vw), 34rem) clamp(24rem, calc(51 / var(--container) * 100vw), 51rem); background: var(--black); isolation: isolate; }
	.company-block::before { position: absolute; top: 23.6%; left: 45%; width: 91.52173913%; aspect-ratio: 421 / 373; background: url("/assets/images/layouts/footer-bg.svg") no-repeat 50% / contain; opacity: 0.3; content: ""; }
	.logo { display: block; width: clamp(180rem, calc(181 / var(--container) * 100vw), 280rem); height: auto; }
	.catchphrase { align-self: end; margin-top: 1.5em; font: 500 var(--font-size-16) / 1.5625 var(--font-sans); letter-spacing: -0.025em; color: var(--primary); }
	.site-info-block { padding: clamp(24rem, calc(57 / var(--container) * 100vw), 57rem) clamp(24rem, calc(40 / var(--container) * 100vw), 40rem) clamp(24rem, calc(35 / var(--container) * 100vw), 35rem) clamp(24rem, calc(49 / var(--container) * 100vw), 49rem); font-size: var(--font-size-15); color: #fff; background: #110f0e; }
	.nav-menu { display: flex; flex-wrap: wrap; row-gap: 0.25lh;
		@media (width < 768px) { column-gap: 2ch; }
	}
	.nav-item + .nav-item::before { display: inline-block; width: 1px; height: 18rem; margin-inline: 19rem; vertical-align: text-bottom; background: currentColor; opacity: 0.1; content: "";
		@media (width < 768px) { display: none; }
	}
	.nav-link { color: rgb(from currentColor r g b / 0.5); }
	.site-info-list { display: flex; flex-wrap: wrap; gap: 0.35lh 5.6ch; margin-top: 46rem; }
	.site-info-item { display: inline-flex; gap: 2ch; }
	.site-info-item dt { color: rgb(from currentColor r g b / 0.6); }
	.site-info-item dd { color: rgb(from currentColor r g b / 0.9); }
	.copyright { margin-top: 46rem; font-size: 14rem; color: rgb(from currentColor r g b / 0.6); text-transform: uppercase; }
	@media (max-width: 768px) {
		.copyright { margin-top: 30rem; }
		.site-info-list { margin-top: 30rem; }
		.contact-block { grid-template-columns: auto 1fr; justify-content: space-between; }
		.social-list { justify-content: end; margin-top: 0 !important; }
	}
	.contact-block { position: relative; display: grid; grid-template-rows: auto auto 1fr; padding: clamp(24rem, calc(61 / var(--container) * 100vw), 61rem) clamp(24rem, calc(51 / var(--container) * 100vw), 51rem) clamp(24rem, calc(41 / var(--container) * 100vw), 41rem); background: #110f0e; }
	.contact-block::before { position: absolute; inset: 30rem -1px; border-left: 1px solid hsla(0, 0%, 100%, 0.1); content: ""; pointer-events: none; }
	.contact-title { font: 700 var(--font-size-15) var(--font-sans); color: var(--primary); }
	.contact-call { margin-top: 0.54285714em; font: 800 var(--font-size-35) var(--font-sans); color: #fff; letter-spacing: -.01em; display: inline-block; }
	.social-list { display: flex; align-self: end; gap: 5rem; margin-top: 40rem; }
	.social-link { display: block; width: 40rem; aspect-ratio: 1; background: #2e2a27 no-repeat 50% / 50%; border-radius: 50%; }
	.social-youtube { background-image: url("/assets/images/layouts/social-youtube.svg"); background-size: 52.5%; }
	.social-instagram { background-image: url("/assets/images/layouts/social-instagram.svg"); }
	.social-naver { background-image: url("/assets/images/layouts/social-naver.svg"); }
	@media (width >= 768px) {
		.company-block { margin-right: 10rem; }
	}
	@media (width >= 1280px) {
		/* .container { grid-template-columns: 470rem 1fr 344rem; } */
		.container { grid-template-columns: 470rem 1fr 372rem; }
	}
	@media (768px <= width < 1280px) {
		.container { grid-template-columns: 1fr 1fr; }
		.site-info-block { order: 3; grid-column: 1 / -1; }
	}
	@media (width < 1280px) {
		.company-block { margin-bottom: 10rem; }
	}
	@media (width < 768px) {
		.site-info-list { flex-direction: column; }
	}
}
@media (max-width: 767px) {
	body { letter-spacing: -1px; }
	.sticky-bottom { padding: 0; background: #f2b233; border-top: solid 0px #ededed; }
	#footer { margin-bottom: 72rem !important; }
}