.overlay_event {
    position: fixed;
    inset: 0;                    /* top:0; right:0; bottom:0; left:0; */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6); /* 반투명 검은색 (0.0 ~ 1.0 조절) */
    z-index: 10001;               /* 필요한 만큼 크게 */
    opacity: 0;
    pointer-events: none;        /* 숨겨진 상태에서 클릭 무시 */
    transition: opacity 240ms ease;
  }
  /* 보이게 할 때 */
  .overlay_event_active {
    opacity: 1;
    pointer-events: auto;
  }
  /* 가운데 콘텐츠 박스 */
  .overlay__content {
    background: #f5f5f5;
    border-radius: 25px;
    width: 557px;
    min-width: 557px;
    min-height: 774px;             /* 필요시 조절 */
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    transform: translateY(8px);
    transition: transform 240ms ease;
  }
  .overlay_event_active .overlay__content {
    transform: translateY(0);
  }
  .confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  
  .confetti {
    position: absolute;
    opacity: 1; /* 항상 보이도록 설정 */
    animation: particle-pop 2s ease-in forwards,
    float 2s ease-in-out infinite alternate; /* 3초 동안 부드럽게 위아래, 무한 반복 */
  }
  
  /* 각 파티클의 초기 위치와 애니메이션 지연 시간, duration 설정 */
  .confetti:nth-child(1) {
    animation-delay: 0s;
    animation-duration: 1s;
  }
  .confetti:nth-child(2) {
    animation-delay: 0.8s;
    animation-duration: 1.5s;
  }
  .confetti:nth-child(3) {
    animation-delay: 1.5s;
    animation-duration: 0.8s;
  }
  .confetti:nth-child(4) {
    animation-delay: 0.3s;
    animation-duration: 2s;
  }
  /* 더 많은 파티클에 대해 위와 같이 설정 */
  @keyframes particle-pop {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg); /* 초기 위치 */
    }
    100% {
      transform: translateY(-15px) rotate(5deg); /* 위로 15px 이동, 약간 회전 */
    }
  }
  .envelope-container{
      position:relative;
      top: 323px;
      left: 125px;
      width:310px;
      height:306px;
  }
  .envelope-back {
      position: absolute;
      width:340px;
      height:336px;
      top:-15px;
      left:-15px;
  }
  .letter {
      position: absolute;
      width: 272px;
      height:180px;
      transform-origin: right bottom;
      transform: rotate(5deg);
      animation: letter-pop 3s ease-in-out  ;
      top: 45px;
      left: 10px;
  }
  .letter-content {
      position: absolute;
      width: 272px;
      height:180px;
      transform-origin: right bottom;
      transform: rotate(5deg);
      animation: letter-content-pop 3s ease-in-out  ;
      top: 45px;
      left: 10px;
      color:#fff;
      font-weight: bold;
      font-size: 45px;
      line-height: 1.2;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 13px;
      text-align: center;
      
  }
  .envelope-front {
    position: absolute;
    z-index: 3;
  }
  
  .front-top {
      position: absolute;
      z-index: 4;
      width: 294px;
      height: 110px;
      top: 195px;
      left: 8px;
  }
  
  .front-left {
      
      top:116px;
      left: 0px;
      position: absolute;
      z-index: 3;
      width: 130px;
      height:182px;
  }
  .roulette-button{
      background-color: #3970FC;
      width: 185px;
      height: 51px;
      border-radius: 7px;
      text-align: center;
      vertical-align: middle;
      color:#fff;
      font-family: 'GmarketSans';
      font-size: 28px;
      line-height: 1.9;
      cursor: pointer;
  }
  .roulette-button-position{
    position:absolute;
    top:678px;
    left:186px;
  }
  .front-right {
      top:116px;
      left: 177px;
      position: absolute;
      z-index: 3;
      width: 130px;
      height:182px;
  }
  .title-container{
      width: 557px;
      position: absolute;
      top:40px;
      display:flex;
      justify-self: center;
  }
  /* 편지 애니메이션을 위한 @keyframes 정의 *//* 편지 요소에 적용할 애니메이션 */
  @keyframes letter-pop {
      0% {
          transform: translateX(8px)translateY(55px)rotate(0);
      }
  
      100% {
          transform: translateX(0)translateY(0)rotate(5deg);
      }
  }
  @keyframes letter-content-pop {
      0% {
          transform: translateX(8px)translateY(55px)rotate(0deg);
      }
      100% {
          transform: translateX(0)translateY(0)rotate(5deg);
      }
  }
  .roulette-spin{
      position:absolute;
      top: 222px;
      left: 79px;
  }