@charset "utf-8";

/* GNB-MEGA — 독립코드 (의존 파일 : lib/gnb-mega.lib.php, js/gnb-mega.js) */

/*══════════════════════════════════════════════════════
토큰 값 정의
════════════════════════════════════════════════════════*/
.gnb-mega-header{
	--gnb-brand-width:clamp(9rem,17.5vw,13rem);
	--gnb-bar-height:clamp(3.5rem,5vw,4rem);
	--gnb-1dep-bg:color-mix(in srgb,var(--bs-primary,#005bab) 86%,transparent);
	--gnb-2dep-bg:color-mix(in srgb,#2673B7 86%,transparent);
	--gnb-bg-blur:1.5rem;
	--gnb-ease:cubic-bezier(.22,1,.36,1);
	--gnb-link-1dep:#fff;
	--gnb-link-1dep-size:clamp(1rem,1.5vw,1.063rem);
	--gnb-link-1dep-weight:600;
	--gnb-link-1dep-weight-hover:700;
	--gnb-link-2dep:#fff;
	--gnb-link-2dep-size:clamp(.9375rem,1.4vw,1rem);
	--gnb-link-2dep-weight:500;
	--gnb-link-2dep-weight-hover:600;
	--gnb-link-2dep-bg-hover:#fff;
	--gnb-border:rgba(255,255,255,.1);
	--gnb-border-pc:rgba(255,255,255,.1);
}
@media (min-width:1200px){
.gnb-mega-header{
	--gnb-link-2dep-weight:400;
	--gnb-link-2dep-weight-hover:500;
}
}


/*══════════════════════════════════════════════════════
공통 — 헤더 셸 / 바 / 토글 / 패널 골격 / PC
════════════════════════════════════════════════════════*/
.gnb-mega-header{z-index:3000;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 1dep — 헤더 바만 (높이 고정, 2dep로 확장하지 않음) */
.gnb-mega-header::before{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:var(--gnb-1dep-bg);content:"";pointer-events:none}
@media (min-width:1200px){
.gnb-mega-header::before{-webkit-backdrop-filter:blur(var(--gnb-bg-blur));backdrop-filter:blur(var(--gnb-bg-blur))}
}
/* 2dep — PC만. 헤더 아래 풀폭 오버레이 (1dep와 맞닿음·비중첩). 상단 1px는 inset 보더 */
.gnb-mega-header::after{display:none;content:""}
@media (min-width:1200px){
.gnb-mega-header::after{display:block;visibility:hidden;position:absolute;top:100%;left:0;z-index:0;width:100%;height:0;background:var(--gnb-2dep-bg);-webkit-backdrop-filter:blur(var(--gnb-bg-blur));backdrop-filter:blur(var(--gnb-bg-blur));box-shadow:inset 0 1px 0 var(--gnb-border-pc);pointer-events:none;transition:height .35s var(--gnb-ease),visibility 0s linear .35s}
.gnb-mega-header.is-gnb-open::after{visibility:visible;height:var(--gnb-panel-height,0);pointer-events:auto;transition-delay:0s}
}

.gnb-mega-bar{position:relative;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--gnb-bar-height);margin:0;padding:0}
.gnb-mega-brand{position:relative;z-index:30;display:block;flex:0 0 auto;width:var(--gnb-brand-width);line-height:0}
h1.gnb-mega-brand{margin:0;font-size:inherit;font-weight:inherit}
.gnb-mega-brand img{display:block;max-width:100%;height:auto;max-height:2rem}
.gnb-mega-brand-visual{display:none}
@media (min-width:1200px){
.gnb-mega-bar{position:relative;z-index:26;display:grid;grid-template-columns:var(--gnb-brand-width) minmax(0,1fr);align-items:center;padding:0}
.gnb-mega-brand{position:relative;z-index:2;flex:none;width:var(--gnb-brand-width);align-self:center}
.gnb-mega-brand img{max-height:2.25rem}
.gnb-mega-brand-visual{display:block;position:absolute;top:calc(100% + 1.5rem);left:0;width:var(--gnb-brand-width);height:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;border-radius:var(--bs-border-radius);background:var(--bs-primary,#005bab);transition:height .35s var(--gnb-ease),opacity .2s ease,visibility 0s linear .35s}
.gnb-mega-header.is-gnb-open .gnb-mega-brand-visual{visibility:visible;height:calc(var(--gnb-panel-height,0px) - 3rem);opacity:1;transition-delay:0s}
.gnb-mega-brand-visual::after{position:absolute;top:0;left:0;width:125%;height:100%;content:"";background:url("../img/gnb_img.webp") center/cover no-repeat;transform:translateX(0);transition:transform 6s linear}
.gnb-mega-header.is-gnb-open .gnb-mega-brand-visual::after{transform:translateX(-20%)}
}

.gnb-mega-toggle{position:relative;z-index:30;width:2.5rem;height:2.5rem;margin:0;padding:0;border:0;background:transparent}
.gnb-mega-toggle-icon,.gnb-mega-toggle-icon::before,.gnb-mega-toggle-icon::after{position:absolute;left:50%;width:1.5rem;height:2px;background:#fff;content:"";transition:transform .2s ease,opacity .2s ease}
.gnb-mega-toggle-icon{top:50%;transform:translate(-50%,-50%)}
.gnb-mega-toggle-icon::before{top:-.45rem;transform:translateX(-50%)}
.gnb-mega-toggle-icon::after{top:.45rem;transform:translateX(-50%)}
.gnb-mega-header.is-gnb-open .gnb-mega-toggle-icon{background:transparent}
.gnb-mega-header.is-gnb-open .gnb-mega-toggle-icon::before{top:0;transform:translateX(-50%) rotate(45deg)}
.gnb-mega-header.is-gnb-open .gnb-mega-toggle-icon::after{top:0;transform:translateX(-50%) rotate(-45deg)}
@media (min-width:1200px){
.gnb-mega-toggle{display:none}
}

html.is-gnb-lock{overflow:hidden}

/* 패널 골격 — 모드별 padding/overflow는 아래 tab·accordion 블록에서 덮어씀 */
.gnb-mega-panel{display:none;position:fixed;top:var(--gnb-bar-height);right:0;bottom:0;left:0;z-index:20;background:var(--gnb-1dep-bg);-webkit-backdrop-filter:blur(var(--gnb-bg-blur));backdrop-filter:blur(var(--gnb-bg-blur))}
.gnb-mega-header.is-gnb-open .gnb-mega-panel{display:block}
@media (min-width:1200px){
.gnb-mega-panel{display:block;position:static;top:auto;right:auto;bottom:auto;left:auto;min-width:0;padding:0;overflow:visible;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* PC 1depth — 모드 공통 */
.gnb-mega-nav{margin:0;padding:0;list-style:none}
@media (min-width:1200px){
.gnb-mega-nav{display:grid;grid-template-columns:repeat(var(--gnb-column-count),minmax(0,1fr));align-items:stretch;position:relative;z-index:1;width:auto;height:auto;margin:0;padding:0;overflow:visible;list-style:none}
.gnb-mega-nav::before{visibility:hidden;position:absolute;top:100%;left:0;z-index:0;width:100%;height:0;content:"";pointer-events:none;transition:height .35s var(--gnb-ease),visibility 0s linear .35s}
.gnb-mega-header.is-gnb-open .gnb-mega-nav::before{visibility:visible;height:var(--gnb-panel-height,0);pointer-events:auto;transition-delay:0s}
.gnb-mega-nav-item{position:relative;width:auto;min-width:0;border-bottom:0}
.gnb-mega-nav-item:not(:first-child)::after{display:block;position:absolute;top:100%;left:0;z-index:1;width:1px;height:0;background:var(--gnb-border-pc);content:"";pointer-events:none;transition:height .35s var(--gnb-ease)}
.gnb-mega-header.is-gnb-open .gnb-mega-nav-item:not(:first-child)::after{height:var(--gnb-panel-height,0)}
.gnb-mega-nav-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;min-height:var(--gnb-bar-height);padding:0;font-size:var(--gnb-link-1dep-size);font-weight:var(--gnb-link-1dep-weight);color:var(--gnb-link-1dep);text-align:center;text-decoration:none;white-space:nowrap;background:transparent;transition:background-color .2s ease,color .2s ease,font-weight .2s ease}
.gnb-mega-nav-item.is-open>.gnb-mega-nav-link,.gnb-mega-nav-item:hover>.gnb-mega-nav-link,.gnb-mega-nav-link:focus,.gnb-mega-nav-item.is-submenu-hover>.gnb-mega-nav-link{font-weight:var(--gnb-link-1dep-weight-hover);color:var(--gnb-link-1dep);background:transparent}
.gnb-mega-nav-link>span{display:inline-block;overflow:hidden;line-height:1;color:transparent;white-space:nowrap;text-shadow:0 0 0 var(--gnb-link-1dep),0 1.5em 0 var(--gnb-link-1dep);transition:text-shadow .3s ease}
.gnb-mega-nav-item:hover>.gnb-mega-nav-link>span,.gnb-mega-nav-link:focus>span,.gnb-mega-nav-item.is-submenu-hover>.gnb-mega-nav-link>span{text-shadow:0 -1.5em 0 var(--gnb-link-1dep),0 0 0 var(--gnb-link-1dep)}
.gnb-mega-nav-item:hover>.gnb-mega-nav-link::after,.gnb-mega-nav-link:focus::after,.gnb-mega-nav-item.is-submenu-hover>.gnb-mega-nav-link::after{position:absolute;bottom:-.275rem;left:50%;z-index:2;box-sizing:border-box;width:.5rem;height:.5rem;border-radius:50%;background:var(--gnb-link-1dep);content:"";transform:translateX(-50%)}
}

/* PC 2depth — 모드 공통 */
@media (min-width:1200px){
.gnb-mega-list{box-sizing:border-box;display:block;visibility:hidden;position:absolute;top:100%;left:0;right:auto;bottom:auto;z-index:1;width:100%;min-width:0;list-style:none;margin:0;padding:1.25rem 0 2rem;overflow:visible;border-left:0;clip-path:inset(0 0 100% 0);text-align:center;pointer-events:none;transition:clip-path .35s var(--gnb-ease),visibility 0s linear .35s}
.gnb-mega-header.is-gnb-open .gnb-mega-list{visibility:visible;clip-path:inset(0);pointer-events:auto;transition-delay:0s}
.gnb-mega-nav-item.is-open>.gnb-mega-list{display:block}
.gnb-mega-list a{display:block;margin:.2rem .75rem;padding:.42rem .25rem;font-size:var(--gnb-link-2dep-size);font-weight:var(--gnb-link-2dep-weight);color:var(--gnb-link-2dep);text-align:center;text-decoration:none}
.gnb-mega-list a:hover,.gnb-mega-list a:focus,.gnb-mega-list a.active{font-weight:var(--gnb-link-2dep-weight-hover);color:var(--bs-primary);border-radius:var(--bs-border-radius,.25rem);background-color:var(--gnb-link-2dep-bg-hover)}
.gnb-mega-acc{display:none}
}


/*══════════════════════════════════════════════════════
[tab] 모바일 — 왼쪽 1depth 탭 + 오른쪽 2depth
════════════════════════════════════════════════════════*/
/* 헤더: .gnb-mega--tab  ※ max-width만 — PC(1200+)는 공통 규칙만 사용 */
@media (max-width:1199.98px){
.gnb-mega--tab .gnb-mega-panel{padding:0;overflow:hidden}
.gnb-mega--tab .gnb-mega-nav{--gnb-tab-width:43%;position:relative;height:100%;overflow-x:hidden;overflow-y:auto}
.gnb-mega--tab .gnb-mega-nav-item{width:var(--gnb-tab-width);border-bottom:1px solid var(--gnb-border)}
.gnb-mega--tab .gnb-mega-nav-link{display:block;padding:1rem 1rem;font-size:var(--gnb-link-1dep-size);font-weight:var(--gnb-link-1dep-weight);color:var(--gnb-link-1dep);text-decoration:none}
.gnb-mega--tab .gnb-mega-nav-item.is-open>.gnb-mega-nav-link{font-weight:var(--gnb-link-1dep-weight-hover);color:var(--gnb-link-1dep);background:rgba(255,255,255,.12)}
.gnb-mega--tab .gnb-mega-nav-link:hover,.gnb-mega--tab .gnb-mega-nav-link:focus{font-weight:var(--gnb-link-1dep-weight-hover);color:var(--gnb-link-1dep)}
.gnb-mega--tab .gnb-mega-acc{display:none}
.gnb-mega--tab .gnb-mega-list{display:none;position:absolute;top:0;left:var(--gnb-tab-width,42%);right:0;bottom:0;z-index:1;box-sizing:border-box;margin:0;padding:.2rem 0;overflow:auto;list-style:none;border-left:1px solid var(--gnb-border);background:rgba(255,255,255,.12);box-shadow:-.15rem 0 2rem rgba(0,0,0,.2)}
.gnb-mega--tab .gnb-mega-nav-item.is-open>.gnb-mega-list{display:block}
.gnb-mega--tab .gnb-mega-list a{display:block;margin:0;margin:.2rem .75rem;padding:.7rem 1rem;font-size:var(--gnb-link-2dep-size);font-weight:var(--gnb-link-2dep-weight);color:var(--gnb-link-2dep);text-decoration:none}
.gnb-mega--tab .gnb-mega-list a:hover,.gnb-mega--tab .gnb-mega-list a:focus,.gnb-mega--tab .gnb-mega-list a.active{font-weight:var(--gnb-link-2dep-weight-hover);color:var(--bs-primary,#005bab);border-radius:var(--bs-border-radius,.25rem);background-color:var(--gnb-link-2dep-bg-hover)}
}


/*══════════════════════════════════════════════════════
[accordion] 모바일 — 세로 리스트 + +/− 아코디언
════════════════════════════════════════════════════════*/
/* 헤더: .gnb-mega--accordion  ※ max-width만 — PC(1200+)는 공통 규칙만 사용 */
@media (max-width:1199.98px){
.gnb-mega--accordion .gnb-mega-panel{padding:1.25rem 0 3rem;overflow:auto}
.gnb-mega--accordion .gnb-mega-nav{position:static;height:auto;overflow:visible}
.gnb-mega--accordion .gnb-mega-nav-item{position:relative;width:auto;border-bottom:1px solid var(--gnb-border)}
.gnb-mega--accordion .gnb-mega-nav-link{display:block;padding:1rem 3rem 1rem 0;font-size:var(--gnb-link-1dep-size);font-weight:var(--gnb-link-1dep-weight);color:var(--gnb-link-1dep);text-decoration:none;background:transparent}
.gnb-mega--accordion .gnb-mega-nav-item.is-open>.gnb-mega-nav-link{font-weight:var(--gnb-link-1dep-weight-hover);color:var(--gnb-link-1dep);background:transparent}
.gnb-mega--accordion .gnb-mega-nav-link:hover,.gnb-mega--accordion .gnb-mega-nav-link:focus{font-weight:var(--gnb-link-1dep-weight-hover);color:var(--gnb-link-1dep)}
.gnb-mega--accordion .gnb-mega-acc{display:block;position:absolute;top:.5rem;right:0;width:2.5rem;height:2.5rem;margin:0;padding:0;border:0;border-radius:var(--bs-border-radius,.375rem);background:transparent}
.gnb-mega--accordion .gnb-mega-acc::before,.gnb-mega--accordion .gnb-mega-acc::after{position:absolute;top:50%;left:50%;width:.875rem;height:.1rem;background:var(--gnb-link-1dep);content:"";transform:translate(-50%,-50%);transition:transform .2s ease}
.gnb-mega--accordion .gnb-mega-acc::after{transform:translate(-50%,-50%) rotate(90deg)}
.gnb-mega--accordion .gnb-mega-nav-item.is-open .gnb-mega-acc::after{transform:translate(-50%,-50%) rotate(0)}
.gnb-mega--accordion .gnb-mega-list{display:none;position:static;margin:0 1rem 1rem;padding:0 0 0 .25rem;overflow:visible;list-style:none;border-left:1px solid var(--gnb-border)}
.gnb-mega--accordion .gnb-mega-nav-item.is-open>.gnb-mega-list{display:block}
.gnb-mega--accordion .gnb-mega-list a{display:block;margin:.2rem .75rem;padding:.55rem 1rem;font-size:var(--gnb-link-2dep-size);font-weight:var(--gnb-link-2dep-weight);color:var(--gnb-link-2dep);text-decoration:none}
.gnb-mega--accordion .gnb-mega-list a:hover,.gnb-mega--accordion .gnb-mega-list a:focus,.gnb-mega--accordion .gnb-mega-list a.active{font-weight:var(--gnb-link-2dep-weight-hover);color:var(--bs-primary,#005bab);border-radius:var(--bs-border-radius,.25rem);background-color:var(--gnb-link-2dep-bg-hover)}
}