* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.menu {
  z-index: 1000000;
  font-family: "Playfair Display", serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  counter-reset: menucounter 1; /* 카운터 시작 값을 1로 설정 */
}

.birth-card-page .menu {
  position: relative;
}

.menu div {
  margin: 0;
}

.index-chat-page .menu-item-text {
  color: white !important; /* 확실히 흰색 적용 */
  text-shadow: none;
}
.menu a {
  /* color: rgb(243 230 248) !important; */
  /* color: #c0c0c0 !important; */
  color: #fbfbfb; /* 기본 실버 */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.467),
    0 -1px 2px rgba(0, 0, 0, 0.4);
}

.menu-item {
  position: relative;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-item::before {
  counter-increment: menucounter;
  content: counters(menucounter, ".", decimal-leading-zero);
  position: absolute;
  left: -15px;
  font-size: 10px;
}

.menu-item-text {
  pointer-events: none;
  display: block;
  line-height: 1;
  position: relative;
  font-size: 28px;
}

.menu-item > div:nth-child(1) span {
  will-change: transform;
  transform-style: preserve-3d;
  transition: 0.5s;
  transition-delay: calc(0.05s * var(--index));
  transform-origin: bottom;
  display: inline-block;
}

.menu-item > div:nth-child(2) span {
  will-change: transform;
  transform-style: preserve-3d;
  transition: 0.5s;
  transition-delay: calc(0.05s * var(--index));
  transform-origin: top;
  display: inline-block;
  transform: translate3d(0, 100%, 0) rotateX(-90deg);
}

.menu-item:hover > div:nth-child(1) span {
  transform: translate3d(0, -100%, 0) rotateX(-90deg);
}

.menu-item:hover > div:nth-child(2) span {
  transform: translate3d(0, 0%, 0) rotateX(0deg);
}

.menu span {
  font-size: 28px;
}