@charset "utf-8";

@layer components {
	.ui-skip-link { position: absolute; top: 0; left: 0; z-index: 20; display: inline-block; margin: 0; font-size: 16rem; text-align: center; color: #fff; text-decoration: underline; background: #222; border-radius: 2rem;
		&:not(:focus-visible) { width: 0; height: 0; overflow: hidden; padding: 0; border: 0; clip-path: inset(100%); }
		&:focus-visible { padding: 0.5lh 1lh; border: 2px solid currentColor; }
	}

	.ui-site-header { position: sticky; inset: 0 0 auto; z-index: 10; background: var(--color-white); border-bottom: var(--border-width-2) solid #0000;
		[data-scrolled="true"] & { border-bottom-color: var(--color-primary); }
		@media (prefers-reduced-motion: no-preference) { transition: var(--duration); }
		* { letter-spacing: -0.04em; }
		.container { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--spacing-08); height: var(--header-height); }
		.home-link { justify-self: start; }
		.main-nav { margin-right: clamp(var(--spacing-08), 3.69791667vw, var(--spacing-17)); font: var(--font-body-1); font-weight: var(--font-weight-500); font-family: var(--font-family-gmarket); color: var(--color-neutral-900);
			@media (width < 1280px) { display: none; }
			.nav-menu-list { display: flex; gap: 4.9ch; }
			.nav-menu-link { display: inline-block; translate: 0 5%; }
		}
		.phone-link { display: inline-flex; align-items: center; gap: 0.7em; font: var(--font-body-1-bold); font-family: var(--font-family-gmarket); color: var(--color-cheesecake); background: var(--color-primary); border-radius: var(--radius-full);
			@media (width >= 768px) { padding: 0.5em 2.1em; }
			@media (width < 768px) { justify-content: center; width: 1.8em; aspect-ratio: 1; }
			.phone-link-icon { width: 0.9em; height: auto; }
			.phone-link-text { translate: 0 7%;
				@media (width < 768px) { display: none; }
			}
		}
		.toggle-nav-button { position: relative; display: block; width: var(--toggle-nav-button-size); aspect-ratio: 1; cursor: pointer;
			@media (width >= 1280px) { display: none; }
			.bar { position: absolute; inset: 0; height: 2px; margin: auto; background: currentcolor; }
			.bar-1 { translate: 0 -8rem; }
			.bar-3 { translate: 0 8rem; }
		}
		.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;
			@media (width >= 1280px) { display: none; }
			&::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-list {
				.nav-menu-item { border-top: 1px solid var(--border-color); }
				.nav-menu-item:last-child { border-bottom: 1px solid var(--border-color); }
				.nav-menu-link { position: relative; display: block; width: 100%; padding: var(--padding-block) 30rem var(--padding-block) var(--padding-inline); font-size: 16rem; text-align: left; }
			}
			@media (prefers-reduced-motion: no-preference) { translate: 100%; transition: var(--duration) allow-discrete;
				&::backdrop { opacity: 0; transition: var(--duration) 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: var(--duration) allow-discrete; }
					::details-content { height: 0; overflow: clip; }
					[open]::details-content { height: auto; }
				}
			}
		}
	}

	.ui-logo { display: block; width: auto;
		@media (width >= 1280px) { height: 31rem; }
		@media (width < 1280px) { height: var(--spacing-10); }
	}

	.ui-link-home { display: flex; align-items: start; justify-self: start; gap: var(--spacing-06);
		._indicator {
			@media (width >= 1280px) { margin-top: 3.2%; padding: var(--spacing-06); font: 700 18rem / 1 var(--font-family-hanamdaume); color: var(--white); background: var(--gradient); border-radius: var(--radius-2); }
			@media (width < 1280px) { display: none; }
		}
		.visually-hidden { color: var(--white); background: var(--black); }
	}

	.ui-hr { --border-color: #dfdfdf; height: 8rem; background: repeating-linear-gradient(135deg, var(--border-color), var(--border-color) 1rem, #0000 1rem, #0000 6rem) repeat -2rem / 8rem; border: 0;
		@media (width >= 1280px) { margin-block: 120rem; }
		@media (width < 1280px) { margin-block: var(--spacing-17); }
	}

	.ui-scrollable { overflow: auto;
		/* 부모 영역 스크롤 전파 금지 */
		/* overscroll-behavior: contain; */
	}

	.ui-eyebrow { display: block; font: var(--font-weight-700) var(--font-size) / var(--line-height-hangeul) var(--font-family-hanamdaume); color: var(--color-tertiary); text-transform: uppercase; user-select: none;
		@media (width >= 1280px) { --font-size: 22rem; }
		@media (width < 1280px) { --font-size: 20rem; }
	}

	.ui-heading { font: var(--font-weight-700) var(--font-size) / var(--line-height-hangeul) var(--font-family-gmarket);
		text-wrap: balance;
		* { letter-spacing: var(--letter-spacing-negative-60); }
		strong { font-weight: inherit; }
		@media (width >= 1280px) { --font-size: 70rem;
			&.ui-heading--large { --font-size: 100rem; }
			.ui-eyebrow + & { margin-top: 0.24285714em; }
		}
		@media (width < 1280px) { --font-size: var(--spacing-15);
			.ui-eyebrow + & { margin-top: var(--spacing-05); }
		}
	}

	.ui-sub-line { font: var(--font-weight-500) var(--font-size) / var(--line-height-hangeul) var(--font-family-pretendard); text-wrap: balance; color: var(--color-neutral-700);
		@media (width >= 1280px) { --font-size: 30rem; margin-top: 0.7em; }
		@media (width < 1280px) { --font-size: var(--spacing-10); margin-top: var(--spacing-05); }
	}

	.ui-tablist { display: flex; justify-content: center; gap: var(--grid-gutter); font: var(--font-weight-500) var(--font-size) / var(--line-height-hangeul) var(--font-family-sans-serif); color: var(--color-white);
		@media (width >= 1280px) { --font-size: 22rem; gap: 20rem; }
		@media (width < 1280px) { --font-size: 20rem; margin-top: var(--spacing-heading-content); }
		._tab { background: var(--color-neutral-500);
			&.is-current { font-weight: var(--font-weight-700); background: var(--color-primary); outline-color: black;
				&::selection { color: var(--color-primary); background: var(--color-white, #fff); }
			}
			@media (width >= 768px) { padding: 18.3rem 39.5rem; border-radius: var(--radius-full); }
			@media (width < 768px) { padding: 0.25lh 1ch; border-radius: var(--radius-5); }
		}
	}

	.ui-radio { display: inline-flex; align-items: center; gap: 6rem;
		._radio { width: 22rem; height: auto; aspect-ratio: 1; }
	}

	.ui-checkbox { width: 22rem; height: auto; aspect-ratio: 1; background: #ccc; border-radius: 50%; appearance: none;
		&:checked { background: var(--color-primary) url("/images/one-page/ui/checked-white.svg") no-repeat 50% / 77.27272727%; }
	}

	.ui-site-footer { color: #fff; background: var(--color-primary);
		* { letter-spacing: var(--letter-spacing-negative-10); }
		.top-wrapper { padding-block: 60rem 54rem; }
		.logo { display: block; width: 58rem; height: auto; margin-inline: auto; }
		.list { display: flex; flex-wrap: wrap; align-items: center; justify-content: start; gap: var(--spacing-08) 51rem; margin-top: 35rem;
			@media (width >= 768px) { justify-content: center; }
			@media (width < 768px) { flex-direction: column; }
			.item { display: inline-flex; }
			.key::after { margin-inline: 0.4ch; content: ":"; }
			.value--bold { font-weight: var(--font-weight-700); }
		}
		.bottom-wrapper { padding-block: 25rem; font: var(--font-weight-300) 14rem / var(--line-height-hangeul) var(--font-family-sans-serif); text-align: center; border-top: var(--border-width-1) solid rgb(from currentColor r g b / 0.2);
			.copyright { color: rgb(from currentColor r g b / 0.8); }
		}
	}
}