.top_menu {
  display: flex;
  gap: 45px;
  list-style: none; /* ul 태그 기본 점 제거 */
  margin: 0;
  padding: 0;
}
.top_menu > li {
  position: relative;
}
.top_menu > li > a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 10px; /* hover 효과를 위한 여백 */
  display: block;
  transition: 0.25s;
}

/* 1뎁스 메뉴 활성화(active) 및 hover 효과 */
.top_menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #a8ff00;
  transition: 0.25s;
}
.top_menu > li:hover > a::after,
.top_menu > li.active > a::after {
  width: 100%;
}

/* --- 2뎁스 서브 메뉴 (Dropdown) --- */
.sub_menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* 살짝 아래에서 올라오는 효과 */
  background: rgba(10, 10, 10, 0.85); /* 다크 테마 배경 반투명 */
  backdrop-filter: blur(8px);
  border-top: 3px solid #a8ff00;
  padding: 15px 0;
  margin: 0;
  list-style: none;
  min-width: 200px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 0 0 8px 8px;
}
.top_menu > li:hover .sub_menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.sub_menu > li > a {
  display: block;
  color: #bbb;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 15px;
  transition: 0.2s;
}
.sub_menu > li:hover > a,
.sub_menu > li.active > a {
  color: #a8ff00;
  background: rgba(255, 255, 255, 0.05);
}

/* --- 모바일 햄버거 버튼 스타일 (PC에서는 숨김) --- */
.mobile_btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1000; /* 메뉴보다 위에 오도록 설정 */
}
.mobile_btn span {
  width: 30px;
  height: 2px;
  background: #fff;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 햄버거 버튼 클릭 시 X 모양으로 변하는 애니메이션 */
.mobile_btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background: #a8ff00;
}
.mobile_btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile_btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background: #a8ff00;
}

/* --- 모바일 레이아웃 (768px 이하) --- */
@media (max-width: 768px) {
  .mobile_btn {
    display: flex;
  }

  /* 기존 모바일 메뉴 숨김 처리 대신 풀스크린 오버레이로 변경 */
  .top_menu {
    position: fixed;
    top: 0;
    right: -100%; /* 기본적으로 화면 오른쪽에 숨김 */
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95); /* 다크 테마 반투명 배경 */
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transition: 0.4s ease-in-out;
    z-index: 999;
  }
  .top_menu.open {
    right: 0; /* 메뉴 열림 */
  }

  .top_menu > li {
    width: 100%;
    text-align: center;
  }
  .top_menu > li > a {
    font-size: 22px;
    padding: 10px 0;
  }

  /* 모바일 서브메뉴 (기본 숨김, 아코디언 방식) */
  .sub_menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border-top: none;
    display: none; /* JS로 열고 닫음 */
    padding: 5px 0 15px 0;
  }
  .sub_menu.open {
    display: block;
  }
  .sub_menu > li > a {
    font-size: 15px;
    padding: 8px 0;
    color: #888;
  }
  .sub_menu > li.active > a,
  .sub_menu > li:hover > a {
    color: #a8ff00;
    background: transparent;
  }
}