@charset "utf-8";

:root{ --header-height: clamp(60rem, calc( 100 / var(--inr) * 100vw ), 100rem); }

/* body.drawerExpanded{ overflow: hidden; } */

/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }

header{ --shadow: 10rem 10rem 30rem rgba(255, 212, 212, 0.15); position: fixed; inset: 0 0 auto; z-index: 10; color: #fff;
	.isScrolled &{ background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); }
	&::before{ content: ''; position: fixed; inset: 0; background: #00000080; opacity: 0; pointer-events: none; }
	&::after{ content: ''; position: absolute; inset: 0 0 auto; height: 0; background: #fff; }
	.inr{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height); z-index: 5; }
	.logo{
		.link{ position: relative; display: block; width: fit-content; }
		.link::before{ content: ''; position: absolute; inset: 0; background: url('/images/common/logo-white.png') no-repeat 50% / contain; opacity: 1; }
		.img{ display: block; width: auto; height: clamp(30rem, calc( 49 / var(--inr) * 100vw ), 49rem); opacity: 0; }
	}
	.gnb{ display: flex;
		& > li{ position: relative; }
		.lv1{ position: relative; display: flex; align-items: center; height: var(--header-height); padding: 0 43rem; font: 600 18rem var(--font-pre); }
		.lv1::before{ content: ''; position: absolute; bottom: 0; right: 0; left: auto; width: 0; border-bottom: 2px solid var(--primary); }
		.box{ position: absolute; top: 100%; left: 0; padding: 20rem 0 30rem; color: var(--black); text-align: center; white-space: nowrap; visibility: hidden; }
		.box ul{ display: flex; }
		.box li{ width: 148rem; }
		& li:hover .lv1::before{ left: 0; right: auto; width: 100%; }
		& li:not(.no-box):hover{
			.box{ visibility: visible; }
			header:has(&){ color: var(--black); }
			header:has(&) .logo .link::before{ opacity: 0; }
			header:has(&) .logo .img{ opacity: 1; }
			header:has(&)::before{ opacity: 1; }
			header:has(&)::after{ height: 180rem; }
		}
	}
	.drawer-btn{ justify-self: end; position: relative; width: 36rem; aspect-ratio: 1;
		&[aria-expanded="true"]{ color: var(--black); }
		.bar{ position: absolute; inset: 0; margin: auto; height: 2px; background: currentColor; }
		.b1{ translate: 0 -5rem; }
		.b2{ translate: 0 5rem; }
		&[aria-expanded="true"]{
			.b1{ translate: 0; rotate: 45deg; }
			.b2{ translate: 0; rotate: -45deg; }
		}
	}
	.drawer{ position: fixed; top: 0; right: 0; display: grid; max-width: 280rem; width: 100%; height: 100vh; background: #fff; color: var(--black);
		&:not(.isExpanded){ translate: 100%; opacity: 0; visibility: hidden; }
		nav{ overflow: auto; margin-top: var(--header-height); padding: 20rem 30rem; }
		.drawer-gnb{ display: grid; gap: 40rem; }
		.lv1{ font: 700 26rem var(--font-pre); }
		.box{ margin-top: 20rem; font: 300 17rem var(--font-pre); color: #666; }
		.box > ul{ display: flex; flex-wrap: wrap; gap: 17rem; }
	}
	@media(prefers-reduced-motion:no-preference){
		&, &::before, &::after, .logo .link::before, .logo .img, .gnb .box li, .gnb .lv1::before, .drawer{ transition: .3s; }
		.drawer-btn .bar{ transition: rotate .3s, translate .3s; }
	}
	@media(any-hover){
		.gnb .box li{ translate: 0 -.5lh; opacity: 0; }
		.gnb li:hover .box li{ translate: 0 0; opacity: 1; }
		.gnb li:hover .box li:nth-child(1){ transition-delay: .2s; }
		.gnb li:hover .box li:nth-child(2){ transition-delay: .3s; }
		.gnb li:hover .box li:nth-child(3){ transition-delay: .4s; }
		
	}
	@media(max-width:1279px){
		.gnb{ display: none; }
	}
}

footer{ padding: 53rem 0 73rem; border-top: 1px solid #ddd; color: #666;
	.inr{ display: grid; gap: 40rem clamp(40rem, calc(164 / 1920 * 100vw), 164rem); }
	.logo{ width: auto; height: 46rem; }
	address{ display: flex; flex-direction: column; flex-wrap: wrap; gap: 12rem 60rem; max-width: 800rem; }
	address b{ margin-right: .8ch; font-weight: 600; }
	.copyright{ margin-top: 27rem; font-size: 15rem; color: #888; }
	.scrollTop{ justify-self: end; display: grid; place-items: center; width: 60rem; aspect-ratio: 1; background: #aaa; }
	.scrollTop:focus{ background: #3d358b; }
	.arrow{ display: block; width: auto; height: 14rem; fill: #fff; }
	@media(min-width:768px){
		.inr{ grid-template-columns: auto 1fr auto; }
		.logo{ translate: 0 -8.7%; }
		address{ flex-direction: row; }
		.scrollTop{ translate: 0 6.6%; }
	}
	@media(max-width:767px){
		.logo{ align-self: center; }
		.info{ grid-column: 1/3; }
		.scrollTop{ grid-area: 1/2/2/3; }
	}
}