body {
  margin: 0;
  background-color: #F8F0DB;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper {
  width: 393px;
  height: 852px;
  background-color: #F8F0DB;
  position: relative;
  overflow: hidden;
  font-family: 'Pretendard', sans-serif;
}

/* 상단 텍스트 */
.main_text {
  position: absolute;
  font-family: 'Pretendard JP', 'Pretendard', sans-serif;
  top: 140px; /* 피그마 기준 중앙 위쪽 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.main_text p {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

/* 퍼즐 이미지 영역 (배경 레이어로 처리) */
.puzzle-container {
  position: absolute;
  width: 496.68px;
  height: 282.23px;
  top: 266px;
  left: -52px;
}

.puzzle {
  position: absolute;
  opacity: 0.9;
}

/* --- bounce 애니메이션 정의 --- */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(5px);
  }
  75% {
    transform: translateY(-6px);
  }
}

@keyframes bounce-big {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-18px); /* 기존보다 더 높이 */
  }
  50% {
    transform: translateY(9px);
  }
  75% {
    transform: translateY(-12px);
  }
}

/* 개별 퍼즐 배치 */
.puzzle1 {
  width: 53%;
  height: auto;
  top: 8.74px;
  left: -5px;
  animation: bounce-big 3.8s ease-in-out infinite;
  animation-delay: 0.4s;
}

.puzzle2 {
  width: 80px;
  top: 227px;
  left: 202.29px;
  animation: bounce 2.2s ease-in-out infinite;
  animation-delay: 0.9s;
}

.puzzle3 {
  width: 167.55px;
  top: 0.2px;
  left: 320.81px;
  animation: bounce-big 4.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

.puzzle4 {
  width: 39.24px;
  top: 0px;
  left: 272.58px;
  animation: bounce 1.8s ease-in-out infinite;
  animation-delay: 2.4s;

}

/* 버튼 컨테이너 */
.button_container {
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* 퍼즐보다 위로 */
}

.btn {
  width: 361px;
  height: 56px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background-color: #D6DC82;
  color: #000;
  transition: 0.2s ease;
}

.btn:hover {
  background-color: #C9D16F;
  transform: translateY(-2px);
}