/* PC_MAIN DEDICATED FILE */
/* =========================================================
   20_header.css (PC 전용, 스코프 잠금)
   - Header / Nav / Mega only
   ========================================================= */

/* -------------------------
   HEADER (wrapper)
-------------------------- */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);

  display: block;
  background: transparent;
  transition:
    opacity .38s ease,
    filter .38s ease;
  z-index: var(--z-header);

  /* ✅ 헤더 hover 배경색 = 풀다운 배경색 (완전 통일) */
  --header-mega-bg: #fff; 

  /* JS 주입 값들의 기본값 (초기 깜빡임 방지) */
  --pc-cols: repeat(5, max-content);
  --pc-left: 0px;
  --pc-width: max-content;

  /* 1DEPTH / 2DEPTH 공통 gap (mega에서도 동일 적용) */
  --pc-gap: clamp(28px, calc(var(--pcvw, 1vw) * 2.4), 52px);
}

/* -------------------------
   HEADER BAR (1줄)
-------------------------- */
.header .header-bar{
  height: var(--header-h);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 var(--side-pad);
  position: relative;
}

/* -------------------------
   LOGO
-------------------------- */
.header .logo{
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  min-width: 190px;
}

.header .logo img{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  height: 50px;
  transition: none;
}

.header .logo-dark{ opacity: 0; }
.header .logo-white{ opacity: 1; }
.header.scrolled .logo-dark,
.header.mega-open .logo-dark{ opacity: 1; }
.header.scrolled .logo-white,
.header.mega-open .logo-white{ opacity: 0; }

/* -------------------------
   NAV (1DEPTH)
-------------------------- */
.header .pc-nav{
  display: flex;
  align-items: center;
}

/* NOTE:
   --pc-cols는 JS가 .header에 주입해서 1DEPTH/2DEPTH가 동일 값을 공유 */
.header .pc-nav-grid{
  /* gap 변수는 header에 있음 (mega와 공유) */
}

.header .pc-menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: var(--pc-cols);
  column-gap: var(--pc-gap);

  justify-content: center;
  align-items: center;
}

.header .pc-menu > li{
  position: relative;
  display: flex;
  justify-content: center;
}

.header .pc-menu a{
  position: relative;            /* ✅ underline 기준점 */
  font-size: 17px;
  font-weight: 500;
  color: #F5F7FA;
  white-space: nowrap;
  opacity: 0.95;
  text-decoration: none;         /* ✅ 기본 밑줄 제거 */

  transition: none;
}

/* ✅ 가운데→양쪽으로 퍼지는 밑줄 (두께 고정, 진행/완료 동일) */
.header .pc-menu a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;                 /* 밑줄 위치(원하면 -8~-12px 조절) */
  width: calc(100% + 22px);
  height: 2px;                   /* ✅ 밑줄 두께(조금 더 굵게) */
  background: currentColor;      /* 글자색과 동일 */
  transform: translateX(-50%);
  /* ✅ 가운데에서 양옆으로 펼치는 마스킹(두께 변형 없음) */
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .28s ease;
  opacity: .95;
}

@media (hover:hover) and (pointer:fine){
  .header .pc-menu > li:hover > a::after{
    clip-path: inset(0 0 0 0);
  }
}

.header.scrolled .pc-menu a,
.header.mega-open .pc-menu a{
  color: #2E3B42;
  opacity: 1;
}
.header.scrolled .pc-menu a:hover,
.header.mega-open .pc-menu a:hover{
  color: #837765;
}

/* -------------------------
   CALL BUTTON
-------------------------- */
.header .call-btn{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  min-width: 176px;
  text-align: right;
  white-space: nowrap;

  font-size: 25px;
  font-weight: 700;
  color: #F5F7FA;
  text-decoration: none;

  transition: none;
}

.header .call-btn-label,
.header .call-btn-phone{
  line-height: 1;
}

.header .call-btn-phone{
  font-weight: 800;
  letter-spacing: 0.02em;
}

.header.scrolled .call-btn,
.header.mega-open .call-btn{
  color: #2E3B42;
}
.header.scrolled .call-btn:hover,
.header.mega-open .call-btn:hover{
  color: #837765;
}

/* -------------------------
   MEGA (2DEPTH)
-------------------------- */
.header .pc-mega{
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;

  z-index: var(--z-mega);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

transform: none;

transition: none;
  will-change: auto;
}

.header .pc-mega::before{
  content: "";
  position: absolute;
  top:-1px; left:0; right:0; bottom:0;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--header-mega-bg);

  top: -1px; /* ✅ seam 제거용 1px 겹침 */

  z-index: 0;
}

.header .pc-mega-row{
  position: relative;
  z-index: 1;

  padding: 0px 0 20px;

  /* 1DEPTH 아래로 정확히 맞추기: JS가 값 주입 */
  width: var(--pc-width, max-content);
  margin-left: var(--pc-left, 0px);
  margin-right: auto;

  display: grid;
  grid-template-columns: var(--pc-cols);
  column-gap: var(--pc-gap);

  justify-content: flex-start;
}

.header .pc-mega-col{
  list-style: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1px;
  text-align: center;
}

.header .pc-mega-col a{
  display: block;
  position: relative;
  isolation: isolate;

  /* ✅ 호버 배경 범위 확장(박스 작음 개선) */
  padding: 6px 22px;   /* ✅ 줄간격 복구 + 범위는 살짝 확장 */

  font-size: 16px;
  line-height: 1.25;
  color: #2E3B42;
  opacity: .92;
  white-space: nowrap;
  text-decoration: none;

  /* ✅ 호버 배경 라운드 제거 */
  border-radius: 0;
  overflow: hidden;

  transition: none;
}

.header .pc-mega-col a::after{
  content:"";
  position:absolute;
  inset:0;
  background: #837765;

  /* ✅ 가운데 -> 양옆 채움 */
  transform: scaleX(0);
  transform-origin: center;

  transition: none;
  z-index:-1;
}

.header .pc-mega-col a:hover{
  /* ✅ 호버 시 글씨색 화이트 */
  color: #fff;
}

.header .pc-mega-col a:hover::after{
  transform: scaleX(1);
}


/* -------------------------
   SCROLLED / MEGA-OPEN (화이트 헤더/화이트 풀다운)
   - scrolled: JS 토글(메인: section2부터 / 서브: scrollY)
   - mega-open: 메가메뉴 오픈 상태(JS 토글)
-------------------------- */
.header.scrolled,
.header.mega-open{
  background: #fff;
  border-bottom: 1px solid rgba(46,59,66,0.12);
  --header-mega-bg: #fff;
}

/* -------------------------
   HOVER / OPEN RULE
-------------------------- */
@media (hover:hover) and (pointer:fine){
  /* ✅ 헤더 hover 배경 = 풀다운 배경 (blur는 사용하지 않음) */
  .header:hover{
    background: #fff;
    border-bottom: 1px solid rgba(46,59,66,0.12);
    --header-mega-bg: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ✅ hover 상태에서도 로고를 화이트 테마에 맞게 즉시 전환
     (페이지 이동 직후 커서가 이미 헤더 위에 있는 경우 mouseenter가 안 떠도 로고가 안 사라지게) */
  .header:hover .logo-dark{ opacity: 1; }
  .header:hover .logo-white{ opacity: 0; }


  /* hover 시(scrolled처럼) 텍스트/링 색 반전 */
  .header:hover .pc-menu a{ color:#2E3B42; opacity:1; }
  .header:hover .pc-menu a:hover{ color:#837765; }
  .header:hover .call-btn{ color:#2E3B42; }
  .header:hover .call-btn:hover{ color:#837765; }

  .header .header-bar:hover + .pc-mega,
  .header .pc-mega:hover{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
   
    /* ✅ 제자리로 */
    transform: translateY(0);

   /* ✅ 열릴 때 visibility 지연만 제거 */

  }
}

/* -------------------------
   SUB PAGE
   - 서브도 메인과 동일한 규칙 사용(scrolled/mega-open)
   - 별도 오버라이드 없음
-------------------------- */