@charset "utf-8";
/* ==============================================================================
   nav_v2.css  —  헤더 메뉴(한글 전용) 스타일
   생성 2026-08-13

   [이 파일의 역할]
   · layouts/navigation_v2.blade.php 가 쓰는 .nv2_link 전용 스타일입니다.
   · app.blade.php 에서 **모든 페이지에 항상 로드**됩니다.
     .nv2_link 클래스는 새 메뉴에만 있으므로, 기존 메뉴를 쓰는 페이지에는
     아무 영향이 없습니다. (선택자가 안 걸림)

   [왜 main_v2.css 에서 뺐나]
     main_v2.css 는 /index_v2 등 일부 페이지에서만 불러옵니다.
     나중에 새 메뉴를 다른 페이지로 넓힐 때 CSS 가 따라가지 않는 문제가 생기므로,
     메뉴 스타일만 이 파일로 분리해 항상 로드되게 했습니다.

   [원본 메뉴와 다른 점]
     원본은 영문↔한글이 3D 로 뒤집히는 방식(.flip-link)입니다.
     여기서는 한글만 두고, 마우스를 올리면
       ① 글자가 골드로 바뀌고  ② 아래에서 밑줄이 왼쪽→오른쪽으로 그어집니다.

   [되돌리려면]
     navigation_v2.blade.php 를 원본(navigation.blade.php) 구조로 바꾸면
     이 파일의 규칙은 자동으로 적용 대상이 없어집니다. 파일을 지울 필요도 없습니다.
   ============================================================================== */

/* 골드 색상 — main_v2.css 를 안 부르는 페이지에서도 쓸 수 있게 여기서 따로 정의합니다 */
:root{
  --nv2-gold:#dbb465;   /* 호버 */
  --nv2-gold-on:#c5a059; /* 현재 페이지 */
  --nv2-ease:cubic-bezier(.22,.61,.36,1);
}


/* ==============================================================================
   1. PC 헤더 메뉴
   ------------------------------------------------------------------------------
   글자 크기 · 높이 · 좌우 여백은 styles.css 271행(.header .gnb > li > a)을
   그대로 물려받습니다. 여기서는 색과 밑줄만 얹습니다.
   ============================================================================== */
.header .gnb > li > .nv2_link{
  position:relative;
  transition:color .3s var(--nv2-ease);
  padding: 0 32px;
}

/* 밑줄 — 평소엔 폭 0, 호버하면 왼쪽에서 오른쪽으로 그어집니다 */
.header .gnb > li > .nv2_link::after{
  content:''; position:absolute;
  left:32px; right:32px; bottom:38px;   /* 좌우 32px = 위 .nv2_link 의 padding 과 맞춤 */
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--nv2-ease);
}

.header .gnb > li:hover > .nv2_link,
.header .gnb > li:focus-within > .nv2_link{ color:var(--nv2-gold); }

.header .gnb > li:hover > .nv2_link::after,
.header .gnb > li:focus-within > .nv2_link::after{ transform:scaleX(1); }

/* 지금 보고 있는 메뉴 (styles.css 279행과 같은 규칙) */
.header .gnb > li.on > .nv2_link{ color:var(--nv2-gold-on) !important; }


/* ==============================================================================
   2. 반응형 — 사이트 기존 기준점과 동일
   ============================================================================== */
@media screen and (max-width:1439px){
  /* 헤더 높이가 112px → 100px 로 낮아지므로 밑줄 위치도 함께 올립니다 */
  .header .gnb > li > .nv2_link::after{ bottom:32px; }
}

@media screen and (max-width:1023px){
  /* 좁은 화면에서는 헤더 메뉴가 숨겨지고 햄버거 메뉴로 바뀌므로
     밑줄 효과는 필요 없습니다. 색 변화만 남깁니다. */
  .header .gnb > li > .nv2_link::after{ display:none; }
}


/* ==============================================================================
   3. 메뉴 8개 대응 — 좌우 여백 자동 조절                          [2026-08-18]
   ------------------------------------------------------------------------------
   「웹 브로슈어」가 추가되면서 메뉴가 7개 → 8개가 되었습니다.

   위 1번의 padding:0 32px 를 그대로 두면 1440px 화면에서 메뉴 줄이
   약 1460px 를 차지해 **왼쪽 로고와 겹칩니다.**
   (계산 : 로고 200 + 메뉴 1016 + 간격 64 + 로그인 140 + 여백 40)

   그래서 화면이 좁아질수록 메뉴 사이 여백을 단계적으로 줄입니다.
   넉넉한 화면에서는 32px 그대로라 지금 보시던 간격이 유지됩니다.

   [메뉴를 더 늘리거나 줄이면] 이 숫자들을 조절하시면 됩니다.
   [1023px 이하] 는 메뉴가 숨겨지고 햄버거(사이트맵)로 바뀌므로 대상이 아닙니다.
   ============================================================================== */
@media screen and (max-width:1679px){
  .header .gnb > li > .nv2_link{ padding:0 20px; }
  .header .gnb > li > .nv2_link::after{ left:20px; right:20px; }
}

@media screen and (max-width:1439px){
  /* 이 구간부터 글자도 18px → 15px 로 작아집니다 (reactive.css 277행) */
  .header .gnb > li > .nv2_link{ padding:0 15px; }
  .header .gnb > li > .nv2_link::after{ left:15px; right:15px; }
}

@media screen and (max-width:1199px){
  .header .gnb > li > .nv2_link{ padding:0 10px; }
}