@charset "utf-8";
/* =====================================================
   LNB · 서브비주얼 — Claude Design v2 (크림/세이지)
   ===================================================== */

/* 서브비주얼: 크림 배경 + 곡선 컷아웃 (다크 배경 제거) */
.sub-visual {
	position:relative; width:100%;
	height:auto;
	background:linear-gradient(180deg,
		oklch(0.94 0.035 120) 0%,
		oklch(0.97 0.015 115) 100%);
	background-image:none;
	overflow:hidden;
}
.sub-visual::before {
	content:""; position:absolute;
	top:-40%; right:-8%;
	width:520px; height:520px; border-radius:50%;
	background:oklch(0.88 0.06 140 / 0.55);
	filter:blur(20px);
	pointer-events:none;
}
.sub-visual::after {
	content:""; position:absolute;
	bottom:-30%; left:-6%;
	width:360px; height:360px; border-radius:50%;
	background:oklch(0.92 0.045 100 / 0.5);
	filter:blur(24px);
	pointer-events:none;
}
.sub-visual .cover { display:none; }

/* 카테고리별 액센트 블롭 컬러 */
.sub-visual.program::before  { background:oklch(0.90 0.07 140 / 0.55); }
.sub-visual.customer::before { background:oklch(0.93 0.06 100 / 0.55); }

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

	.sub-visual { height:auto; padding-top:96px; }
	.sub-visual-wrap {
		position:relative; z-index:1;
		width:min(1240px, 92vw); margin:0 auto;
		padding:60px 0 100px;
	}
	.sub-visual-txt {display:flex; flex-direction:column; gap:14px; text-align:center;}
	.sub-visual-txt h2 {
		font-family:var(--f_display);
		font-weight:700;
		font-size:clamp(4rem, 5.4vw, 6.4rem);
		line-height:1.18;
		letter-spacing:-0.03em;
		color:oklch(0.30 0.05 148);
	}
	.sub-visual-txt::before {
		content:attr(data-eyebrow);
		font-family:var(--f_ui);
		font-size:var(--fs12);
		font-weight:700;
		letter-spacing:0.24em;
		text-transform:uppercase;
		color:oklch(0.55 0.09 148);
	}

	/* LNB 바 — 부드러운 pill 탭 */
	.lnb {
		position:relative; left:0;
		width:100%;
		background:oklch(0.99 0.008 110 / 0.8);
		backdrop-filter:saturate(160%) blur(12px);
		-webkit-backdrop-filter:saturate(160%) blur(12px);
		border-top:1px solid oklch(0.90 0.02 148);
		border-bottom:1px solid oklch(0.90 0.02 148);
	}
	.lnb.fixOn {
		position:fixed; top:0; z-index:900;
		box-shadow:0 10px 30px oklch(0.30 0.05 148 / 0.06);
	}
	.lnb-wrap {
		width:min(1240px, 92vw); margin:0 auto;
		height:72px;
		display:flex; align-items:center; justify-content:space-between;
	}
	.lnb-menu ul {
		list-style:none; padding:0; margin:0;
		display:flex; gap:8px;
	}
	.lnb-menu ul li a {
		display:inline-flex; align-items:center;
		padding:10px 20px;
		border-radius:999px;
		font-size:var(--fs14);
		font-weight:600;
		color:var(--tx-body);
		transition:background .2s ease, color .2s ease;
	}
	.lnb-menu ul li a:hover { color:var(--c_base2); background:var(--bg1); }
	.lnb-menu ul li.on a {
		background:oklch(0.90 0.06 140);
		color:oklch(0.30 0.06 148);
	}

	.lnb-nav {
		display:flex; gap:10px; align-items:center;
		font-family:var(--f_ui);
		font-size:var(--fs12);
		letter-spacing:0.1em;
		color:var(--tx-mute);
	}
	.lnb-nav p { margin:0; }
	.lnb-nav p.dot {
		width:3px; height:3px; border-radius:50%;
		background:var(--tx-hair);
	}

	.lnbH { display:none; }
}

/* ==================== 태블릿 이하 (~1199) ==================== */
@media screen and (max-width:1199px) {
	.sub-visual { padding-top:70px; }
	.sub-visual-wrap {
		position:relative; z-index:1;
		padding:60px 30px 80px;
	}
	.sub-visual-txt { display:flex; flex-direction:column; gap:10px; }
	.sub-visual-txt h2 {
		font-family:var(--f_display);
		font-weight:700;
		font-size:var(--fs45);
		line-height:1.2;
		letter-spacing:-0.02em;
		color:oklch(0.30 0.05 148);
	}
	.sub-visual-txt::before {
		content:attr(data-eyebrow);
		font-family:var(--f_ui);
		font-size:var(--fs12);
		font-weight:700;
		letter-spacing:0.22em;
		text-transform:uppercase;
		color:oklch(0.55 0.09 148);
	}

	.lnb {
		position:relative;
		background:oklch(0.99 0.008 110 / 0.9);
		border-top:1px solid oklch(0.90 0.02 148);
		border-bottom:1px solid oklch(0.90 0.02 148);
	}
	.lnb-wrap {
		width:100%; margin:0;
		padding:0 20px;
		height:60px;
		display:flex; align-items:center; justify-content:space-between;
		overflow-x:auto;
	}
	.lnb-menu ul {
		list-style:none; padding:0; margin:0;
		display:flex; gap:6px;
	}
	.lnb-menu ul li a {
		display:inline-flex; align-items:center;
		padding:8px 16px;
		border-radius:999px;
		font-size:var(--fs13);
		font-weight:600;
		color:var(--tx-body);
		white-space:nowrap;
	}
	.lnb-menu ul li.on a {
		background:oklch(0.90 0.06 140);
		color:oklch(0.30 0.06 148);
	}
	.lnb-nav { display:none; }
}

/* ==================== 모바일 (~767) ==================== */
@media screen and (max-width:767px) {
	.sub-visual::before { width:340px; height:340px; }
	.sub-visual::after  { width:220px; height:220px; }
	.sub-visual-wrap { padding:40px 20px 56px; }
	.lnb-wrap { padding:0 16px; height:56px; }
	.lnb-menu ul li a { padding:7px 14px; font-size:var(--fs12); }
}