@charset "utf-8";
/* =====================================================
   HEADER · GNB — Claude Design v2 (oklch olive/sage)
   ===================================================== */

/* ==================== 데스크탑 (1200~) ==================== */
@media screen and (min-width:1200px), print {

	header {
		z-index:999; position:fixed; left:0; top:0;
		width:100%; min-width:1200px;
		transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
	}
	header .headerWrap {
		width:min(1240px, 92vw);
		margin:0 auto;
		position:relative;
	}
	header .headerWrap h1 {
		position:absolute; z-index:99999; left:0; top:0;
	}
	header .headerWrap h1 a {
		height:96px;
		display:flex; align-items:center; gap:12px;
	}
	header .headerWrap h1 a img {
		width:auto; height:50px;
		transition:opacity .3s ease;
	}
	header .headerWrap h1 a img.off { display:block; }
	header .headerWrap h1 a img.on  { display:none; position:absolute; left:0; }

	/* 스크롤/호버 시 배경 배지 */
	header .navBg {
		position:absolute; left:0; top:0;
		width:100%; height:0;
		background:transparent;
		transition:height .35s ease, background .35s ease, box-shadow .35s ease;
	}

	nav.pc {
		height:96px;
		position:relative;
		margin:0 auto;
		display:block;
		transition:height .35s ease;
	}
	nav.pc .gnb {
		width:100%; height:100%;
		display:flex; justify-content:center; align-items:center;
	}
	nav.pc .gnb .dep1 {
		display:flex; gap:min(6vw, 72px);
		height:100%; align-items:stretch;
		list-style:none; padding:0; margin:0;
	}
	nav.pc .gnb .dep1 > li {
		height:100%;
		display:flex; flex-direction:column; align-items:center;
		padding:0;
	}
	nav.pc .gnb .dep1 > li > a {
		display:flex; align-items:center;
		height:96px;
		font-family:var(--f_base1);
		font-weight:600;
		font-size:var(--fs18);
		letter-spacing:-0.02em;
		color:var(--c_base1);
		position:relative;
		transition:color .3s ease;
	}
	nav.pc .gnb .dep1 > li > a::after {
		content:""; position:absolute; left:50%; bottom:26px;
		width:0; height:2px;
		background:var(--c_base2);
		transition:width .3s ease, left .3s ease;
	}
	nav.pc .gnb .dep1 > li.on > a,
	nav.pc .gnb .dep1 > li:hover > a { color:var(--c_base2); }
	nav.pc .gnb .dep1 > li.on > a::after,
	nav.pc .gnb .dep1 > li:hover > a::after { width:24px; left:calc(50% - 12px); }

	nav.pc .gnb .dep2 {
		list-style:none; margin:0;
		position:absolute; top:96px;
		display:flex; flex-direction:column; gap:6px;
		opacity:0; visibility:hidden;
		transform:translateY(-6px);
		transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
	}
	nav.pc .gnb .dep2 > li a {
		display:inline-block;
		padding:8px 4px;
		font-size:var(--fs16);
		font-weight:500;
		color:var(--tx-body);
		white-space:nowrap;
		transition:color .2s ease;
	}
	nav.pc .gnb .dep2 > li a:hover,
	nav.pc .gnb .dep2 > li.on a { color:var(--c_base2); font-weight:600; }

	/* 헤더 활성 상태 (hover / touch) */
	header.on {
		background:oklch(0.99 0.008 110 / 0.92);
		backdrop-filter:saturate(160%) blur(14px);
		-webkit-backdrop-filter:saturate(160%) blur(14px);
		box-shadow:0 10px 30px oklch(0.30 0.05 148 / 0.06);
	}
	header.on nav.pc { height:380px; }
	header.on nav.pc .gnb .dep2 {
		opacity:1; visibility:visible; transform:translateY(0);
	}

	/* 메인 페이지 전용 — 크림 배경 위 투명 헤더 */
	body.is-main header:not(.on) {
		background:transparent;
		box-shadow:none;
	}

	/* 서브 페이지 — 서브비주얼 위 어두운 배경에 흰 텍스트 */
	body:not(.is-main) header:not(.on) .headerWrap h1 a img.off { display:none; }
	body:not(.is-main) header:not(.on) .headerWrap h1 a img.on  { display:block; }
	/* body:not(.is-main) header:not(.on) nav.pc .gnb .dep1 > li > a { color:oklch(0.98 0.008 120); } */
	body:not(.is-main) header:not(.on) nav.pc .gnb .dep1 > li > a::after { background:oklch(0.98 0.008 120); }

	/* 스크롤 후 고정 배지 */
	header.scrolled {
		background:oklch(0.99 0.008 110 / 0.92);
		backdrop-filter:saturate(160%) blur(14px);
		-webkit-backdrop-filter:saturate(160%) blur(14px);
		box-shadow:0 10px 30px oklch(0.30 0.05 148 / 0.06);
	}
	header.scrolled .headerWrap h1 a img.off { display:block; }
	header.scrolled .headerWrap h1 a img.on  { display:none; }
	header.scrolled nav.pc .gnb .dep1 > li > a { color:var(--c_base1); }

	header .gnbView { display:none; }
}

/* ==================== 태블릿 이하 (~1199) ==================== */
@media screen and (max-width:1199px) {

	header {
		position:fixed; left:0; top:0; width:100%; z-index:999;
		height:70px;
	}
	header.scrolled {position:fixed;background:oklch(0.99 0.008 110 / 0.94);}
	header .headerWrap { position:relative; height:70px; }
	header .headerWrap h1 { display:inline-block; }
	header .headerWrap h1 a {
		height:70px;
		display:flex; align-items:center;
		padding-left:20px;
	}
	header .headerWrap h1 a img { height:34px; width:auto; }
	header .headerWrap h1 a img.off { display:block; }
	header .headerWrap h1 a img.on  { display:none; position:absolute; left:20px; }

	body:not(.is-main) header:not(.scrolled) .headerWrap h1 a img.off { display:none; }
	body:not(.is-main) header:not(.scrolled) .headerWrap h1 a img.on  { display:block; }

	header .headerWrap .gnbView {
		position:absolute; right:0; top:0;
		width:70px; height:70px;
		background:url(/images/common/menu.svg) center / 22px no-repeat;
		filter:invert(28%) sepia(15%) saturate(600%) hue-rotate(90deg);
	}

	header .gnbCover {
		display:none;
		background:oklch(0.20 0.03 148 / 0.55);
		width:100%; height:100vh;
		left:0; top:0; position:fixed;
		z-index:9998;
	}

	nav.pc { display:none; }

	nav.mobile {
		transform:translateX(100%);
		z-index:9999;
		position:fixed; right:0; top:0;
		width:min(420px, 88%);
		height:100%;
		background:var(--bg3);
		box-shadow:-20px 0 60px oklch(0.20 0.05 148 / 0.15);
		transition:transform .35s ease;
		overflow:hidden;
	}
	nav.mobile.active { transform:translateX(0); }
	nav.mobile .closeWrap {
		display:flex; align-items:center; justify-content:space-between;
		padding:0 24px;
		height:70px;
		border-bottom:1px solid var(--tx-hair);
	}
	nav.mobile .closeWrap > a:first-child {
		font-family:var(--f_ui);
		font-size:var(--fs14);
		font-weight:700;
		letter-spacing:0.16em;
		color:var(--c_base2);
	}
	nav.mobile .closeWrap .gnbClose {
		position:relative;
		width:36px; height:36px;
		border-radius:50%;
		background:var(--bg1);
		display:flex; align-items:center; justify-content:center;
	}
	nav.mobile .closeWrap .gnbClose::before,
	nav.mobile .closeWrap .gnbClose::after {
		content:""; position:absolute;
		width:16px; height:2px;
		background:var(--c_base1);
	}
	nav.mobile .closeWrap .gnbClose::before { transform:rotate(45deg); }
	nav.mobile .closeWrap .gnbClose::after  { transform:rotate(-45deg); }

	nav.mobile .gnb {
		position:relative;
		width:100%;
		height:calc(100% - 70px);
		overflow-y:auto;
		padding:12px 0 40px;
	}
	nav.mobile .gnb .dep1 {
		list-style:none; padding:0; margin:0;
	}
	nav.mobile .gnb .dep1 > li {
		border-bottom:1px solid oklch(0.94 0.02 148);
	}
	nav.mobile .gnb .dep1 > li > a {
		display:flex; align-items:center; justify-content:space-between;
		padding:20px 24px;
		font-family:var(--f_display);
		font-size:var(--fs19);
		font-weight:700;
		color:var(--c_base1);
	}
	nav.mobile .gnb .dep1 > li > a::after {
		content:"";
		width:10px; height:10px;
		border-right:2px solid var(--tx-mute);
		border-bottom:2px solid var(--tx-mute);
		transform:rotate(45deg);
		transition:transform .25s ease;
	}
	nav.mobile .gnb .dep1 > li.on > a { color:var(--c_base2); }
	nav.mobile .gnb .dep1 > li.on > a::after {
		transform:rotate(-135deg);
		border-color:var(--c_base2);
	}

	nav.mobile .gnb .dep2 {
		display:none;
		list-style:none; padding:8px 0 20px; margin:0;
		background:var(--bg1);
	}
	nav.mobile .gnb .dep2 > li a {
		display:block;
		padding:12px 40px;
		font-size:var(--fs15);
		color:var(--tx-body);
	}
	nav.mobile .gnb .dep2 > li.on a {
		color:var(--c_base2);
		font-weight:700;
	}
}

/* ==================== 모바일 (~767) ==================== */
@media screen and (max-width:767px) {
	header .headerWrap h1 a { padding-left:16px; }
	header .headerWrap h1 a img { height:30px; }
	nav.mobile .gnb .dep1 > li > a { padding:18px 20px; font-size:var(--fs18); }
	nav.mobile .gnb .dep2 > li a { padding:11px 34px; }
}