.title {
  position: relative;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(2.8rem, 7vw, 9rem);
  /* 반응형 크기 */
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  z-index: 2;
  margin-bottom: 2vh;
  margin-top: 12vh;

  animation: springDrop 1s ease-out forwards, 
  neonColors 3s infinite alternate;
  
}    

/* 네온 효과 애니메이션 */
@keyframes neonColors {
  0% {
    color: #ff9999;
    /* 밝은 빨강 (파스텔톤) */

  }

  33% {
    color: #99ff99;
    /* 밝은 초록 */

  }

  66% {
    color: #9999ff;
    /* 밝은 파랑 */

  }

  100% {
    color: #ff99ff;
    /* 밝은 보라 */

  }
}

/* 🎯 ease-out 기반 스프링 효과 */
@keyframes springDrop {
  0% {
    transform: translate(-50%, -150px); /* 시작 위치 (위쪽) */
    opacity: 0;
  }
  60% {
    transform: translate(-50%, 0px); /* 처음에 빠르게 내려옴 */
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -15px); /* 반동으로 살짝 올라감 */
  }
  90% {
    transform: translate(-50%, 5px); /* 다시 내려왔다가 */
  }
  100% {
    transform: translate(-50%, 0px); /* 최종 위치에서 멈춤 */
  }
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.title2 {
  position: relative; /* z-index를 적용하기 위해 추가 */
  width: 80%; /* 가로폭 70% */
  left: 50%;
      transform: translateX(-50%);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.5rem); /* 최소 1rem, 최대 1.5rem */
  font-weight: 400;
  line-height: 1.2;
  color: #c3c3c3; /* 텍스트 색상 */
  padding: 20px; /* 여백 */
  z-index: 2;
  margin-top: 2vh;
}

.title3 {
  position: relative; 
  width: 70%; 
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(0.8rem, 1.8vw, 1.2rem); /* 최소 0.8rem, 최대 1.2rem */
  font-weight: 500;
  line-height: 1.2;
  color: #ffffff; 
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2); 
  backdrop-filter: blur(5px); 
  border-radius: 8px; 
  z-index: 3;
  margin-top: 0.5vh;

  overflow: hidden;
  white-space: nowrap;
  animation: typing 5s steps(30, end) forwards;
}

/* 타이핑 애니메이션 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%; /* 글자 크기에 맞게 자동 조정 */
  }
}

/* 커서 애니메이션 */
.title3::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: rgba(255, 255, 255, 0.8); /* 커서 색상 */
  margin-left: 5px;
  animation: blink 0.7s steps(2, start) infinite;
}

/* 커서 깜빡이기 */
@keyframes blink {
  50% {
    background-color: transparent;
  }
}

/* 타이핑 후 커서 제거 */
.title3.typed::after {
  display: none;
}

/* 화면 폭이 600px 미만일 때 */
@media (max-width: 600px) {
  .title3 {
    white-space: normal;  /* 자동 줄바꿈 */
    animation: none;    /* 타이핑 애니메이션 비활성화 */
    width: 80%;        /* 넓이 자동 조정 */
  }

  .title3::after {
    display: none;  /* 작은 화면에서 커서 숨기기 */
  }
}

/*****************************************************************************************/
.label-image {
  position: fixed;
  top: 100px;  /* 화면 상단에서 100px 아래 */
  right: 0px;   /* 화면 우측에서 0px 왼쪽 */
  width: 250px;  /* 이미지 크기 */
  height: auto;  /* 가로 비율 유지 */
  z-index: 1000; /* 다른 요소 위에 표시 */
  opacity: 0.5;  /* 기본 투명도 */  
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: right top; /* 오른쪽 기준으로 확대 */
}

/* 마우스를 올리면 밝아지고 확대 */
.label-image:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.312);
  backdrop-filter: blur(10px); /* Glass effect */
  transform: scale(2.1); /* 2.1배 확대 */
}

/* 화면 가로폭이 1024px 미만일 때 */
@media (max-width: 1024px) {
  .label-image {
    top: auto;     /* 상단 위치 해제 */
    bottom: 10px;  /* 화면 하단에서 20px 위 */
    right: 0px;   /* 화면 우측에서 20px 왼쪽 */
    transform-origin: right bottom; /* 오른쪽 기준으로 확대 */    
  }
  .label-image:hover {
    opacity: 1;
    transform: scale(2.1); /* 10% 확대 */
    background-color: rgba(255, 255, 255, 0.312);
  backdrop-filter: blur(10px); /* Glass effect */
  }
}

@media screen and (min-width: 1920px) {
  .label-image {   
    position: fixed;
  top: 50px;  /* 화면 하단에서 20px 위 */
  right: 0px;   /* 화면 우측에서 20px 왼쪽 */
  width: 400px;  /* 이미지 크기 */
  height: auto;  /* 가로 비율 유지 */
  z-index: 1000; /* 다른 요소 위에 표시 */
  opacity: 0.8;  /* 투명도 조절 */
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

@media (max-width: 600px) {
  .label-image {   
    display: none;
  }
}

#myVideo {
  filter: brightness(40%); /* 밝기를 50%로 낮춤 */
}

.best-badge {
  display: inline-block;
  background-color: #ff0004; /* 강렬한 레드 계열 */
  color: #fff;
  font-weight: bold;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.best-badge2 {
  display: inline-block;
  background-color: #026c1d; /* 강렬한 레드 계열 */
  color: #fff;
  font-weight: bold;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.best-badge3 {
  display: inline-block;
  background-color: #fd9800; /* 강렬한 레드 계열 */
  color: #fff;
  font-weight: bold;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}