@charset "utf-8";

/* ─────────────────────────
   0) BASE
────────────────────────── */
#lnb .lnb_1da,
#lnb a.lnb_2da { color: var(--color-text); }

/* ─────────────────────────
   1) 구조/레이아웃
────────────────────────── */
#lnb {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  opacity: 1;
  height: var(--header-height);

  transform: translateY(0);
  will-change: transform;

  transition:
    transform var(--nav-t) var(--nav-ease),
    opacity var(--nav-t) ease,
    background-color var(--nav-t) ease,
    box-shadow var(--nav-t) ease,
    backdrop-filter var(--nav-t) ease;

  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}


#lnb h2 { position:absolute; font-size:0; line-height:0; overflow:hidden; }

#lnb_1dul {
  display:flex; padding:0; list-style:none; justify-content:space-between;width: 100%;padding: 0 70px;
}

/* 기존 flex: 1 1 0; min-width:160px; 제거 */
.lnb_1dli{
  position:relative; z-index:10; text-align:center;
  height:var(--header-height);
  flex:0 1 auto;       /* grow 0 / shrink 1 → 줄어들 수 있음 */
  min-width:0;         /* ellipsis가 먹게 필수 */
}


.lnb_1da { 
  display:flex; flex-direction:column; justify-content:center;
  height:var(--header-height); font-weight:bold; line-height:2.4em; font-size:16px;
  text-decoration:none;  overflow:visible;
  padding-inline: clamp(12px, 2vw, 24px);
  transition: background-color var(--nav-t) ease, color var(--nav-t) ease;
  word-break: keep-all;
  white-space:nowrap;
}

#logo .logo{
  display:grid; place-items:center;
  min-height: calc(var(--header-height) * 0.6);
}
#logo .logo img{
  grid-area: 1 / 1;
  transition: opacity var(--nav-fade) ease;
  opacity: 0;
}

/* ─────────────────────────
   2) #lnb 상태 (배경 전환)
────────────────────────── */
#lnb{
  background: transparent; box-shadow:none;

}
#lnb.nav-solid{
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  backdrop-filter: saturate(180%) blur(8px);
}

/* ─────────────────────────
   3) 로고 스위치
────────────────────────── */
#lnb.nav-solid  #logo .logo-dark  { opacity: 1; }
#lnb.nav-solid  #logo .logo-light { opacity: 0; }
#lnb:not(.nav-solid) #logo .logo-dark  { opacity: 0; }
#lnb:not(.nav-solid) #logo .logo-light { opacity: 1; }

/* ─────────────────────────
   4) 텍스트 색 규칙(상태별)
   - 투명일 때 1차만 흰색
   - 2차는 항상 가독성(어두운색)
────────────────────────── */
#lnb:not(.nav-solid) > * .lnb_1da { color:#fff !important; }
#lnb .lnb_2dul a.lnb_2da { color: var(--color-text) !important; }
#lnb.nav-solid .lnb_1da,
#lnb.nav-solid a.lnb_2da { color: var(--color-text) !important; }

/* ─────────────────────────
   5) 인터랙션 (hover)
────────────────────────── */
.lnb_1dli:hover { background-color: var(--color-bg); }
.lnb_1dli:hover .lnb_1da { color: var(--color-main) !important; }

a.lnb_1da::before,
a.lnb_1da::after{
  content:""; position:absolute; left:50%; width:0; height:2px;
  background-color: var(--color-bg); transform:translateX(-50%);
  transition: width .3s ease;
}

a.lnb_2da{
  position:relative; display:inline-block; padding:5px 10px;
  font-size:15px; font-weight:bold; background:transparent; overflow:hidden;
}
a.lnb_2da::after{
  content:""; position:absolute; bottom:0; left:50%; width:0; height:2px;
  background-color: var(--color-main); transform:translateX(-50%);
  transition: width var(--nav-t) ease;
}
a.lnb_2da:hover::after{ width:90%; }
a.lnb_2da:hover{ color:var(--color-main) !important; }

.lnb_2dli.first a { padding-top:12px; }
.lnb_2dli.last  a { padding-bottom:12px; }

/* 투명/흰 배경 상태 모두에서 hover가 최우선이 되도록 특이성 강화 */
#lnb:not(.nav-solid) .lnb_1dli:hover .lnb_1da { color: var(--color-main) !important; }
#lnb.nav-solid        .lnb_1dli:hover .lnb_1da { color: var(--color-main) !important; }

/* 키보드 접근성도 동일하게 */
#lnb .lnb_1da:focus-visible { color: var(--color-main) !important; }

/* ─────────────────────────
   6) 서브메뉴 박스
────────────────────────── */
.lnb_2dul{
  display:none; position:absolute; width:100%; top:var(--header-height); overflow:hidden;
}
#lnb .all{
  background: var(--color-bg);
  width:100%; position:absolute; top:var(--header-height); left:0;
  box-shadow:0 2px 6px rgba(0,0,0,.1); border-bottom:none;
}
#lnb .all.active{ border-bottom:2px solid #dbdbdb; }
#lnb .all div{ width:var(--layout-width); margin:0 auto; }



/* ─────────────────────────
   7) 햄버거 버튼
────────────────────────── */
.menu-toggle{
  display:none; position:absolute; top:calc(var(--header-height)/2); right:25px;
  transform:translateY(-50%); background:none; border:none; font-size:1.8rem; z-index:1001;
}
#lnb .menu-toggle{
  color: var(--color-text);
  transition: color .25s ease, opacity .25s ease;
}
#lnb:not(.nav-solid) .menu-toggle{
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25);
}
#lnb .menu-toggle:hover,
#lnb .menu-toggle:focus{ color:var(--color-main); outline:none; }
#lnb .menu-toggle svg{ width:1.6em; height:1.6em; fill:currentColor; }



@media (max-width: 1400px) {

.auth-buttons { gap: 5px !important; font-size: 12px;}
#lnb_1dul {
  padding: 0 20px;}

}





/* ─────────────────────────
   8) 모바일
────────────────────────── */
@media (max-width: 1024px){
  #lnb { padding:0 20px; }
  .menu-toggle{ display:block; }

  #lnb_1dul{
    display:none; flex-direction:column; background:#fff; width:100%;
    position:absolute; top:48px; left:0; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:1000;
  }
  .lnb-right { display: none !important; }
  #lnb.open #lnb_1dul{ display:block; }

  .lnb_2dul{ position:static; width:100%; box-shadow:none; }
  .lnb_2dli{ padding:12px 16px; }
  .lnb_1dli{ width:100% !important; }

  /* 열린 메뉴는 흰 배경이므로 텍스트는 어두운색으로 고정 */
  #lnb.open #lnb_1dul .lnb_1da,
  #lnb.open #lnb_1dul a.lnb_2da{ color: var(--color-text) !important; }
  
}


/* 우측 정렬 */
.lnb-right { display:flex; align-items:center; gap:10px; }

.auth-buttons { display:flex; align-items:center; gap:10px; }
/* 헤더 전용 버튼 */
.nav-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px;
  font-size:14px;font-weight:700; line-height:1;
  border-radius:999px; border:1px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* 스크롤 후(솔리드) */
#lnb.nav-solid .nav-btn--primary {
  background: var(--color-main); color:#fff; border-color: var(--color-main);
}
#lnb.nav-solid .nav-btn--primary:hover { filter:brightness(.92); }
#lnb.nav-solid .nav-btn--outline {
  background:transparent; color:var(--color-text); border-color:rgba(0,0,0,.15);
}
#lnb.nav-solid .nav-btn--outline:hover {
  border-color: var(--color-main); color: var(--color-main);
}

/* 투명 헤더(메인 위에 겹칠 때) */
#lnb:not(.nav-solid) .nav-btn--primary {
  background:#fff; color:var(--color-main); border-color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
#lnb:not(.nav-solid) .nav-btn--primary:hover { filter:brightness(.96); }
#lnb:not(.nav-solid) .nav-btn--outline {
  background:transparent; color:#fff; border-color:rgba(255,255,255,.7);
}
#lnb:not(.nav-solid) .nav-btn--outline:hover { color:#fff; border-color:#fff; }

@media (max-width:1024px){
  .lnb-right { gap:8px; margin-right:48px; }
  #lnb.open .nav-btn--primary {
    background:var(--color-main); color:#fff; border-color:var(--color-main);
  }
  #lnb.open .nav-btn--outline {
    background:transparent; color:var(--color-text); border-color:rgba(0,0,0,.15);
  }
}