/* 사용자 공통 스타일 파일입니다. 공통으로 적용할 스타일 코드를 작성해주세요. */
@import url(css/font.css);
@import url(css/reset.css);
@import url(css/custom-layout-mo.css);
@import url(css/custom-list-mo.css);

/* 티켓 컨테이너용 */
main {
  position: relative;
}

/* ============================================================================ */
/* 컨페티 애니메이션 (공통) */
/* ============================================================================ */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti {
  position: fixed;
  width: 6px;
  height: 10px;
  top: -10px;
  z-index: 9998;
  animation: confetti-fall 3s ease-out forwards;
}

.ticket-receive-wrapper {
  background: transparent !important;
}

/* 플로팅 메뉴 컨테이너 */
.float-menu-container {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 11;
}

/* 메인 토글 버튼 */
.float-menu-toggle {
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--gray200);
  background: #fff;
  cursor: pointer;
  z-index: 12;
  position: relative;
  transition: transform 0.3s ease;
}

.float-menu-toggle.active {
  transform: rotate(45deg);
}

.float-menu-toggle img {
  width: 20px;
  height: 20px;
}

/* 플로팅 버튼 공통 */
.float-menu-button {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.float-menu-button img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 펼쳐진 상태 - 0도 (위) */
.float-menu-container.open .float-btn-1 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-90px);
}

/* 펼쳐진 상태 - 30도 */
.float-menu-container.open .float-btn-2 {
  opacity: 1;
  pointer-events: auto;
  transform: translate(45px, -78px);
}

/* 펼쳐진 상태 - 60도 */
.float-menu-container.open .float-btn-3 {
  opacity: 1;
  pointer-events: auto;
  transform: translate(78px, -45px);
}

/* 펼쳐진 상태 - 90도 (오른쪽) */
.float-menu-container.open .float-btn-4 {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(90px);
}

/* ===== 세로 펼침 버전 (동적 위치) ===== */
.float-menu-container.vertical.open .float-menu-button:not([style*="display: none"]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(var(--float-offset, 0));
}