.menu {
  margin-top: 30px;
  margin-left: -10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8px;
}

.menu a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background-color: #cbe7ff;
  color: black;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-bottom: 5px;
  text-decoration: none;
  transition: background 0.3s;
}

/* 공통 active */
.menu a.active {
  background-color: #2196f3;
  color: white;
}

.menu a:hover {
  background-color: #90caf9;
}

.server-select {
  margin-bottom: 10px;
}
.server-select select {
  width: 100%;
  padding: 5px;
}

/* ✅ 제우스 테마 기본 */
body.zeus-theme .menu a {
  background-color: #f8d34d;
  color: #333;
}

/* ✅ 제우스 테마 hover */
body.zeus-theme .menu a:hover {
  background-color: #ffbb00;
}

/* ✅ 제우스 테마 active (★ 반드시 맨 마지막에) */
body.zeus-theme .menu a.active {
  background-color: #ff9800;
  color: white;
}

/* ✅ 포세이돈 테마 */
body.poseidon-theme .menu a {
  background-color: #8cd3ff;
  color: #003344;
}

body.poseidon-theme .menu a:hover {
  background-color: #56c1ff;
}

/* ✅ hover 아래에 배치 */
body.poseidon-theme .menu a.active {
  background-color: #0288d1;
  color: white;
}

/* ✅ active 상태에 hover 방지 (강조 유지) */
body.poseidon-theme .menu a.active:hover {
  background-color: #0288d1;
  color: white;
}

/* ✅ 하데스 테마 */
body.hades-theme .menu a {
  background-color: #d9b3ff;
  color: #2e004f;
}

body.hades-theme .menu a:hover {
  background-color: #c084ff;
}

/* ✅ hover 아래에 배치 */
body.hades-theme .menu a.active {
  background-color: #8e24aa;
  color: white;
}

/* ✅ active 상태에 hover 방지 (강조 유지) */
body.hades-theme .menu a.active:hover {
  background-color: #8e24aa;
  color: white;
}