/* ===================================
   Construction Page — Under Construction
   =================================== */

.construction-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.construction-container {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon / Image */
.construction-icon {
  width: 80px;
  height: auto;
  margin-bottom: var(--space-6);
  opacity: 0.8;
  transform-origin: center center; /* 이미지 중앙을 축으로 설정 */
  /* animation: constructionSpinOut 3s infinite; */ /* 3초 동안 진행 */
}

.construction-icon img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes constructionSpinOut {
  0% { 
    transform: translate(0, 0) rotate(0deg); 
  }
  20% {
    transform: translate(0, 0) rotate(0deg); /* 0~20% 구간 잠시 대기 */
    /* 위로 출발 시 가속이 붙다가 정점에 다가갈수록 감속 (ease-in-out 형태) */
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); 
  }
  70% {
    transform: translate(70vw, -40vh) rotate(5040deg); /* 진행 시간의 70% 위치에서 최고점 도달 */
    /* 정점에서 떨어질 때 서서히 출발하여 점점 강하게 가속 (ease-in 형태) */
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1); 
  }
  100% { 
    transform: translate(120vw, 100vh) rotate(7200deg); /* 브라우저 우측 하단으로 뚝 떨어지며 이탈 */
  }
}

/* Title */
.construction-title {

}

/* Message */
.construction-message {
}

.construction-detail {
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-7);
}

/* Action Buttons */
.construction-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.construction-actions .btn {

}

/* Responsive */
@media (max-width: 640px) {
  .construction-title {
    font-size: var(--type-section-heading-size);
  }

  .construction-icon {
    width: 60px;
  }

  .construction-actions {
    flex-direction: column;
  }

  .construction-actions .btn {
    width: 100%;
  }
}