/* GNB(전역 내비게이션 바) 스타일 */
.gnb {
  position: fixed; /* 화면 상단에 고정 */
  top: 0;
  left: 0;
  width: 100%;
  /* 블러 효과를 위해 배경색 투명도를 조정합니다. */
  background-color: rgba(0, 0, 0, 0.5); 
  -webkit-backdrop-filter: blur(10px); /* Safari 호환성을 위한 접두사 */
  backdrop-filter: blur(8px); /* 배경 블러 효과 */
  z-index: 1000; /* 다른 요소들 위에 오도록 설정 */
  box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
  /* 경계선 두께를 0.5px로 설정하고, 그림자 효과도 transition에 추가합니다. */
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* GNB 내부 콘텐츠 컨테이너 */
.gnb-inner {
  width: 100%;
  max-width: 1500px; /* 최대 너비를 1600px로 설정 */
  margin: 0 auto; /* 중앙 정렬 */
  padding: 20px 40px; /* 상하 여백을 20px로 늘려 GNB 높이 확보 */
  display: flex;
  justify-content: space-between; /* 양쪽 끝으로 정렬 */
  align-items: center;
  box-sizing: border-box;
}

.gnb-right {
  display: flex;
  align-items: center; /* 아이콘들을 수직 중앙에 정렬 */
  gap: 80px; /* 메뉴 아이템 사이 간격 */
}

/* GNB 호버 및 활성화 효과 */
.gnb-right a:hover .nav-icon,
.gnb-right a.active .nav-icon {
  /* 호버/활성 상태: 빨간색(#FF0000)으로 변경 (로고의 빨간 필터과 동일) */
  filter: invert(15%) sepia(99%) saturate(7454%) hue-rotate(358deg) brightness(100%) contrast(118%);
}

/* --- 반응형 레이아웃 (모바일 & 태블릿) --- */
/* 화면 너비가 1279px 이하일 때 GNB 로고 및 아이콘 크기를 조정합니다. */
@media (max-width: 1279px) {
  .gnb-inner {
    padding: 15px 24px; /* 모바일/태블릿 화면의 상하 여백을 15px로 수정합니다. */
  }
  .gnb .logo {
    height: 20px; /* 로고 높이를 20px로 줄입니다. */
  }
  .nav-icon {
    height: 20px; /* 메뉴 아이콘 높이를 20px로 줄입니다. */
  }
}

/* --- 반응형 레이아웃 (소형 모바일) --- */
/* 화면 너비가 375px 이하일 때 GNB 요소 크기를 추가로 조정합니다. */
@media (max-width: 375px) {
  .gnb-inner {
    padding: 12px 16px; /* 상하 여백을 12px로 조정하여 높이를 맞춥니다. */
  }
  .gnb .logo {
    height: 18px; /* 로고 높이를 18px로 줄입니다. */
  }
  .nav-icon {
    height: 18px; /* 메뉴 아이콘 높이를 18px로 줄입니다. */
  }
  .gnb-right {
    gap: 20px; /* 메뉴 아이템 사이 간격을 20px로 줄입니다. */
  }
}

        /* --- GNB 로고 스타일 --- */
        .gnb-left .logo {
            /* [REMOVED] filter 애니메이션 제거 */
            height: 24px;
        }

        /* [ADDED] 로고 교차 페이드를 위한 컨테이너 */
        .logo-container {
            position: relative;
            display: inline-block; /* 이미지 크기에 맞게 컨테이너 크기 조절 */
            height: 24px; /* 로고 높이와 동일하게 설정 */
        }
        .logo-container .logo {
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease; /* opacity를 부드럽게 전환 */
        }
        .logo-container .logo.logo-hover {
            opacity: 0; /* 호버 로고는 기본적으로 숨김 */
        }
        
        /* --- GNB 왼쪽 호버 효과 --- */
        /* [CHANGED] 호버 시 호버 로고가 나타나도록 변경 */
        .gnb-left a:hover .logo-hover {
            opacity: 1;
        }

        /* --- GNB 메뉴 스타일 --- */
        .gnb-right .nav-icon {
          display: inline-block; /* baseline 시프트 방지 */
          vertical-align: middle; /* 텍스트와 수직 중앙 정렬 */
          transform: translateY(2px); /* 아이콘을 살짝 아래로 이동시켜 텍스트 중앙과 맞춤 */
          height: 24px; /* 텍스트 크기에 맞춰 아이콘 높이를 조정합니다. */
          /* 아이콘을 흰색으로 보이게 하기 위한 필터 */
          filter: brightness(0) invert(1);
          transition: filter 0.3s ease, transform 0.15s ease; /* 아이콘 색상(filter) 변경 시 부드러운 효과 */
        }

        .gnb-right a {
            display: flex; /* 아이콘과 텍스트를 정렬하기 위해 flex 사용 */
            align-items: center; /* 수직 중앙 정렬 */
            justify-content: center; /* 가로 중앙 정렬을 추가합니다. */
            gap: 12px; /* 아이콘과 텍스트 사이 간격 */
            text-decoration: none; /* 밑줄 제거 */
            color: #ffffff; /* 기본 텍스트 색상 */
            font-size: 28px; /* 폰트 크기를 24px로 키웁니다. */
            font-weight: 350; /* 폰트 두께 설정 */
            padding: 2px 12px 6px 18px; /* 배경 채우기 위한 패딩 */
            border-radius: 8px; /* 둥근 모서리 */
            position: relative; /* 의사 요소 위치 지정 기준 */
            overflow: hidden; /* 의사 요소 숨김 */
            transition: color 0.3s ease; /* 텍스트 색상 변경 */
        }

        /* 좌에서 우로 채워지는 배경 효과 */
        .gnb-right a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            z-index: -1;
            transition: left 0.3s ease;
        }

        /* (Removed) previous :not(:hover) rule so JS can control exit animation */

        /* Class-based control for enter/exit animations (used by JS)
           - default: pseudo-element stays off to the left (left:-100%)
           - when link has .gnb-before-fill -> left:0 (fill left->right)
           - when link has .gnb-before-exit -> left:100% (hide left->right)
        */
        .gnb-right a.gnb-before-fill::before {
          left: 0;
        }

        .gnb-right a.gnb-before-exit::before {
          left: 100%;
        }

                /* Helper class to instantly snap pseudo-element back to off-left
                   without animating (prevents right->left reverse motion). */
                .gnb-right a.gnb-before-hidden::before {
                  left: -100% !important;
                  transition: none !important;
                }

        /* 호버 시 텍스트와 아이콘 색상 변경 */
        .gnb-right a:hover, .gnb-right a.active {
          color: #00A0E4;
        }
        .gnb-right a:hover .nav-icon, .gnb-right a.active .nav-icon {
          filter: invert(34%) sepia(62%) saturate(3000%) hue-rotate(170deg) brightness(95%) contrast(98%);
        }