#popup {
  width: 30vw;
  height: 70vh;
  /* max-width: 400px;
  max-height: 450px; */
  background-color: #fff; /* 팝업 배경 색상 */
  color: #000; /* 검은색 폰트 */
  font-size: clamp(10px, 1.2vw, 40px);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.2);
  display: flex;
  justify-content: center;
  flex-direction: column; /* 세로 배열 */
  text-align: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-720deg) scale(0); /* 초기 상태 (회전 + 축소) */
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out; /* 부드러운 전환 */
  opacity: 0; /* 초기 상태: 투명 */
}

/*팝업 메세시 데스크탑과 모바일 내용 분리*/
html.desktop .qrImg {
  display: block;
}
html.desktop .aiImg {
  display: none;
}
html:not(.desktop) .qrImg {
  display: none;
}
html:not(.desktop) .aiImg {
  display: block;
}
.qrImg,
.aiImg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 버튼 디자인 */
.btnWrapper {
  display: flex;
  gap: 10px; /* 버튼 간격 */
  margin-top: 5px;
  justify-content: center;
}
.btnWrapper button {
  background-color: #036; /* 남색 */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: clamp(8px, 1.2vw, 16px);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btnWrapper button:hover {
  background-color: #05a;  /* 마우스 오버시 밝은 남색 */
  transform: scale(1.05);
}

/* 팝업 활성화 상태 */
#popup.active {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);  /* 회전 중단 및 크기 복원 */
  opacity: 1; /* 불투명 */
}


.final-time {
  font-size: clamp(8px, 1.2vw, 35px);
  font-weight: bold;
  color: rgb(121, 0, 0);
  margin: 8px 0 12px 0;
  text-align: center;
}