@charset "utf-8";

.page-hero { position: relative; z-index: 7; display: flex; align-items: center; justify-content: center; height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem); contain: content; color: #fff; isolation: isolate;
	&::before { position: absolute; inset: 0; z-index: -1; background: var(--black) no-repeat 50% / cover; content: ""; }
	&.nav-about::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-contact::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-board::before { background-image: url("/assets/images/pages/page-hero-1.webp"); }
	&.nav-legal::before { background-image: url("/assets/images/pages/page-hero-11.webp"); }
	/* TODO: after 삭제 */
	&::after { position: absolute; inset: 0; z-index: -1; align-content: center; margin: auto; font: 200 var(--font-size-32) var(--font-sans); text-align: center; color: #fff; background: radial-gradient(circle at 20% 0, #fafcff  10%, #ff8410) 0 / cover no-repeat; content: "페이지 헤더"; }
	.page-hero-container { display: grid; }
	.heading { font: var(--font-size-50) var(--font-sans); }
	@media (prefers-reduced-motion: no-preference) {
		&::before { animation: page-hero-bg 1.8s both; }
		.heading { opacity: 0; animation: slide-up 0.6s 0.2s both; }
	}
}
@keyframes page-hero-bg {
	0% { scale: 1.05; }
	100% { scale: 1; }
}
@keyframes slide-up {
	0% { translate: 0 40rem; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}
@keyframes slide-right {
	0% { translate: -40rem; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}

.local-nav { position: relative; z-index: 7; font: var(--font-size-18-to-14) var(--font-sans);
	.container { display: flex; height: 3.88888889em; }
	.home { display: grid; place-items: center; width: auto; height: 100%; aspect-ratio: 1; background: var(--black); }
	.home-icon { display: block; width: 1.05555556em; height: auto; fill: white; }
	details { position: relative; }
	summary { position: relative; display: block; align-content: center; height: 100%; padding-inline: 1.66666667em 3.83333333em; text-align: left; color: var(--black); background: lightgray; }
	summary::after { position: absolute; inset: 0; width: 0.55555556em; aspect-ratio: 1; margin: auto 29rem auto auto; border: solid currentColor; border-width: 0 1px 1px 0; translate: 0 -25%; rotate: 45deg; content: ""; }
	[open] summary::after { translate: 0 25%; scale: -1; }
	.nav-menu { position: absolute; inset: 100% 0 auto; color: var(--black); background: #fff; border: 1px solid var(--border-color); box-shadow: 0 10rem 30rem #0000000d; }
	.details-level-1 .nav-menu-level-2 { display: none; }
	.details-level-2 .nav-menu-level-3 { display: none; }
	.nav-link { display: block; padding: 1em 1.61111111em; }
	@media (any-hover) {
		.nav-link:hover { background: #f4f4f4; }
	}
}

.layout-inner { min-height: 300px; padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
	.legal-document .page-heading, .page-heading-block { margin-bottom: calc(var(--font-size-35) * 2); text-align: center; }
	.page-heading { font-size: var(--font-size-35); }
	.page-subheading { margin-top: 0.125em; font-weight: 700; font-size: var(--font-size-16); color: #999; }
	/* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
	#main:has(.join_area) .sub_title { display: none; }
}