.navbar {
   position: relative;
   background-color: #0b1220;
   padding: 20px 0px;
   border-bottom: 2px solid #554cfa;
   margin-top: 10px;
}

.navbar::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(0, 2, 106,.75), #000000);
   clip-path: polygon(
      0% 100%, 5% 50%, 10% 50%, 15% 60%, 20% 60%,
      25% 55%, 30% 55%, 35% 70%, 40% 70%, 45% 50%,
      50% 50%, 55% 65%, 60% 65%, 65% 45%, 70% 45%,
      75% 60%, 80% 60%, 85% 50%, 90% 50%, 95% 70%,
      100% 100%
   );
   animation: wobble 4s infinite alternate ease-in-out;
}

@keyframes wobble {
   0% {
      clip-path: polygon(
         0% 100%, 4% 48%, 9% 52%, 14% 60%, 19% 62%,
         24% 53%, 29% 57%, 34% 72%, 39% 68%, 44% 52%,
         49% 48%, 54% 66%, 59% 64%, 64% 47%, 69% 46%,
         74% 62%, 79% 59%, 84% 52%, 89% 50%, 94% 70%,
         100% 100%
      );
   }
   50% {
      clip-path: polygon(
         0% 100%, 6% 52%, 11% 48%, 16% 65%, 21% 63%,
         26% 57%, 31% 63%, 36% 75%, 41% 72%, 46% 55%,
         51% 52%, 56% 70%, 61% 68%, 66% 50%, 71% 52%,
         76% 65%, 81% 62%, 86% 55%, 91% 52%, 96% 75%,
         100% 100%
      );
   }
   100% {
      clip-path: polygon(
         0% 100%, 5% 50%, 10% 50%, 15% 60%, 20% 60%,
         25% 55%, 30% 55%, 35% 70%, 40% 70%, 45% 50%,
         50% 50%, 55% 65%, 60% 65%, 65% 45%, 70% 45%,
         75% 60%, 80% 60%, 85% 50%, 90% 50%, 95% 70%,
         100% 100%
      );
   }
}

.nav-list {
   list-style: none;
   display: flex;
   gap: 60px;
   justify-content: center;
   margin: 0;
   padding: 0;
   align-items: center;
   position: relative;
}

@media (max-width: 900px) {
   .nav-list {
      gap: 30px;
   }
}
@media (max-width: 600px) {
   .nav-list {
      gap: 10px;
   }
}

.nav-icon {
   width: 16px;
   height: 16px;
   margin-right: 6px;
   vertical-align: middle;
}

.nav-list li a {
   text-decoration: none;
   color: #fff;
   font-weight: 500;
   font-size: 16px;
   position: relative;
   transition: font-size 0.1s ease-in, color 0.2s ease-out;
}

.nav-list li a:hover {
   color: rgba(255, 255, 255, 0.7);
   font-size: 18px;
}

/* 툴팁 공통 */
.tooltip::after {
   content: attr(tooltip);
   position: absolute;
   top: 160%;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0,0,0,0.9);
   color: #fff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 18px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
}

.tooltip:hover::after {opacity: 1;}

.toast {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(78, 70, 229, 0.6);
   color: #fff;
   padding: 10px 16px;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.4);
   opacity: 0;
   transform: translateY(-20px);
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
   z-index: 9999;
   display: inline-block;
   max-width: max-content;
   white-space: nowrap;
   text-align: center;
}

.toast.error { background: rgba(229, 70, 78, 0.6);}
.toast.success { background: rgba(70, 229, 78, 0.6);}
.toast.info { background: rgba(229, 229, 78, 0.6);}

.toast.show { opacity: 1;   transform: translateY(0);}

.version-selector {
   position: relative;
   width: 100%;
   max-width: 800px;
   z-index: 2000;
}

.version-list {
   position: fixed;
   display: none;
   background: #111;
   border: 1px solid #444;
   border-radius: 6px;
   max-height: 360px;
   overflow-y: auto;
   z-index: 9999;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300px;
}

.version-list li {
   padding: 8px 12px;
   cursor: pointer;
}

.version-list li:hover {background: #333;}


#menu-btn {  display: inline-flex;  align-items: center;  gap: 4px; }

.menu-wrapper {position: relative;}

.dropdown-menu {
   display: none;
   position: absolute;
   top: 170%;
   background: #222;
   border: 1px solid #444;
   list-style: none;
   margin: 0;
   padding: 8px 0;
   min-width: 200px;
   z-index: 1000;
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dropdown-menu li {padding: 8px 16px;}

.dropdown-menu li a {
   color: #fff;
   text-decoration: none;
   display: block;
}

.dropdown-menu li a:hover {background: #333;}

/* 스마트폰 (600px 이하) */
@media (max-width: 600px) {
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 12px;
    background: #111;
    border-radius: 8px;
  }

  .nav-list li a {
    font-size: 14px;
    display: block;
    width: 100%;
    padding: 6px 8px;
  }

  .nav-list li a:hover {
    background: #222;
    font-size: 14px;
    color: #aaa;
  }

  .dropdown-menu {
    min-width: 160px;
    font-size: 14px;
  }
}