/* header_transparent_force_with_menu_v3.css */
/* 줄과 점 동기화: CSS 변수 --p(0→1)로 선 scaleX, 점 left/opacity를 함께 구동 */

/* 0) 공통 토큰 */
:root{ 
  --header-bg: transparent !important; 
  --header-bg-scrolled: #fff !important;
}

/* Register custom property for smooth animation */
@property --p{
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

/* 1) 헤더/내부랩/모바일메뉴까지 전부 투명 (기본 상태) */
header.site-header,
header.site-header .header-wrapper,
header.site-header .container,
nav.mobile-nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* 2) sticky/white 강제 규칙 무력화 */
header.site-header,
.site-header{
  background: transparent !important;
  z-index: 1000; /* 헤더 z-index 설정 */
}

/* 3) 스크롤 시 헤더 스타일 - container.header-wrapper만 흰색 배경 */
header.site-header.scrolled {
  background: transparent !important; /* site-header는 투명 유지 */
  box-shadow: none !important; /* 그림자 제거 */
}

header.site-header.scrolled .header-wrapper {
  background: transparent !important; /* header-wrapper는 투명 */
}

header.site-header.scrolled .container {
  background: transparent !important; /* container는 투명 */
}

header.site-header.scrolled .container.header-wrapper {
  background: rgba(255, 255, 255, 0.7) !important; /* container.header-wrapper만 70% 투명 흰색 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* container.header-wrapper에만 그림자 */
  border-radius: 0 0 8px 8px; /* 하단 모서리 둥글게 */
}

/* 스크롤 시 메뉴 텍스트 색상 변경 */
header.site-header.scrolled nav.navigation a {
  color: #333 !important;
  fill: #333 !important;
}

/* 스크롤 시 햄버거 메뉴 색상 변경 */
header.site-header.scrolled .menu-toggle span {
  background-color: #333 !important;
}

/* 스크롤 시 모바일 메뉴 배경색 변경 */
header.site-header.scrolled nav.mobile-nav {
  background: #fff !important;
}

header.site-header.scrolled nav.mobile-nav a {
  color: #333 !important;
}

/* 로고 변경 - 기본 로고 숨기고 스크롤 시 다른 로고 표시 */
header.site-header .logo {
  position: relative;
}

header.site-header .logo img {
  transition: opacity 0.3s ease;
}

header.site-header .logo {
  position: relative;
  display: inline-block;
}

header.site-header .logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/logo2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

header.site-header.scrolled .logo img {
  opacity: 0 !important;
}

header.site-header.scrolled .logo::after {
  opacity: 1 !important;
}

/* 3) header-image-strip 제거 */
header.site-header .header-white-strip{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 4) 가상요소 제거 */
header.site-header::before,
header.site-header::after,
.pf-subnav::before,
.pf-subnav::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 5) 레이어 순서 */
header.site-header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 10060 !important; }

/* === PC 메뉴 흰색 고정 === */
header.site-header nav.navigation a {
  color: #fff !important;
  fill: #fff !important;
}

/* 모바일 메뉴 토글 햄버거 아이콘 흰색 - 크기도 함께 조정 */
header.site-header .menu-toggle {
  width: 40px !important;
  height: 40px !important;
}

header.site-header .menu-toggle span {
  background-color: #fff !important;
  left: 8px !important;
  right: 8px !important;
  height: 2.5px !important;
}

header.site-header .menu-toggle span:nth-child(1) {
  top: 12px !important;
}

header.site-header .menu-toggle span:nth-child(2) {
  top: 19px !important;
}

header.site-header .menu-toggle span:nth-child(3) {
  top: 26px !important;
}

/* === 모바일 펼침 메뉴 전용 === */
@media (max-width: 767.9px) {
  nav.mobile-nav { 
    background: transparent !important; /* 모바일 메뉴 배경 투명 */
    box-shadow: none !important; /* 그림자 제거 */
    border-radius: 0 0 8px 8px !important;
  }
  nav.mobile-nav a { color: #000 !important; }
}

/* === PC 드롭다운 메뉴 글씨 검정 === */
@media (min-width: 768px) {
  header.site-header nav.navigation ul.dropdown a {
    color: #000 !important;
    fill: #000 !important;
  }
}

/* === 헤더 하단 흰색 실선: 좌->우 1회 그려지는 애니메이션 + 선끝 흰 점 === */
header.site-header .header-wrapper{
  position: relative !important;
  --p: 0; /* 진행도(0~1) */
  animation: headerProgress 1s ease-out forwards;
  will-change: transform, --p;
}

/* 선: 전체폭을 가진 뒤 scaleX로 그리기 → 점과 완벽 동기화 */
header.site-header .header-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:0;
  border-bottom: 1px solid #fff !important; /* 기본 두께(모바일) */
  pointer-events:none;
  transform-origin: left center;
  transform: scaleX(var(--p));
}

/* 점: 진행도에 맞춰 좌표/투명도 동시 변화 (끝에서 사라짐) */
header.site-header .header-wrapper::before{
  content:"";
  position:absolute;
  bottom:-2px;
  left:0;
  width:6px; height:6px;
  background:#fff;
  border-radius:50%;
  pointer-events:none;
  /* (100% - 지름) * 진행도 */
  left: calc( (100% - 6px) * var(--p) );
  opacity: calc(1 - var(--p));
}

/* PC: 선 두께 2px, 점 위치 보정 */
@media (min-width: 768px){
  header.site-header .header-wrapper::after{
    border-bottom: 2px solid #fff !important;
  }
  header.site-header .header-wrapper::before{
    bottom:-3px;
  }
}

/* 진행도 애니메이션(0→1) */
@keyframes headerProgress{
  from{ --p: 0; }
  to  { --p: 1; }
}

/* ==== FIX: 드롭다운이 항상 맨앞 + 하단선 위치 고정 ==== */
@media (min-width: 768px){
  header.site-header{
    /* 드롭다운이 히어로 뒤로 안 가게 z-index 최상위로 고정 */
    z-index: 2147483647 !important;  /* 기존 10060 덮어씀 */
    position: fixed !important;      /* 스크롤에도 고정 유지 */
    top: 0; left: 0; right: 0;
    background: transparent !important;
    background-color: transparent !important;
  }

  /* 하단 선을 그리는 대상이 헤더 높이를 정확히 먹도록 */
  header.site-header .header-wrapper{
    position: relative !important;
    height: 100% !important;
    padding: 0 !important;           /* 패딩 때문에 선이 떠 보이는 것 방지 */
    box-sizing: border-box !important;
  }

  /* 드롭다운 레이어 보강(테마 네이밍 대응) */
  header.site-header nav.navigation{ position: relative !important; z-index: 3 !important; }
  header.site-header nav.navigation ul li{ position: relative !important; }
  header.site-header nav.navigation ul li .dropdown,
  header.site-header nav.navigation ul li .sub-menu,
  header.site-header .header-wrapper .menu > li > .dropdown-menu,
  header.site-header .header-wrapper .menu > li > .sub-menu{
    position: absolute !important;
    z-index: 4 !important;           /* 헤더선/오버레이보다 위 */
  }
}