html,
body {
  margin: 0; /* 모든 기본 마진 제거 */
  padding: 0; /* 모든 기본 패딩 제거 */
  width: 100%; /* 너비를 뷰포트 100%로 고정 */
  height: 100%; /* 높이를 뷰포트 100%로 고정 */
  overflow: hidden; /* 스크롤바가 생기는 것을 방지 */
}

/* body의 min-height: 100vh; 설정을 보강합니다. */
body {
  min-height: 100vh;
}

/* ----------------------------------------------------
           CSS 스타일 (Slot.styled.tsx 기반) 
           ---------------------------------------------------- */

/* 릴 전체 컨테이너 (회전하는 릴을 담는 외부 프레임) */
.slot-container {
  width: 120px;
  height: 100px; /* 심볼 하나의 높이보다 약간 크게 설정 */
  overflow: hidden; /* 이 영역 밖의 심볼은 숨깁니다 (핵심) */
  border-radius: 8px;
  background-color: #1a1a1a;
  border: 4px solid #333;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 회전하는 릴 요소 (SlotWrapper / Slot.tsx에서 transform이 적용되는 부분) */
.slot-reel {
  /* 릴의 높이는 심볼 개수에 따라 동적으로 조정되지만, 초기에는 10개 기준 */
  width: 100%;
  display: flex;
  flex-direction: column;

  /* 핵심 애니메이션: 3초 동안 움직임. ease-out을 강하게 줘서 부드럽게 감속 */
  transition: transform 3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

/* 릴 안의 개별 심볼 */
.slot-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px; /* 심볼 하나의 높이 */
  font-size: 40px;
  font-weight: 700;
  color: gold;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
}

.slot-item:nth-child(even) {
  background-color: #222;
} /* 폰트 설정 및 기본 스타일 */
body {
  font-family: "Inter", sans-serif;
}
/* ... (기존 슬롯 관련 CSS 유지) ... */

/* ... (기존 슬롯 및 버튼 관련 CSS 유지) ... */

/* 결과 메시지 등장 애니메이션 키프레임 정의 */
@keyframes result-appear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 결과 메시지에 적용할 클래스 */
.result-message-animated {
  animation: result-appear 0.4s ease-out forwards; /* 0.5초 동안 실행 후 최종 상태 유지 */
}

/* style.css */

/* 1. 모바일 빈틈 및 스크롤 제거 (필수) */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 수평 스크롤 방지 */
}

/* 2. 슬롯 릴 크기 및 스타일 정의 (JS ITEM_HEIGHT=100과 일치) */
.slot-container {
  overflow: hidden; /* 릴이 컨테이너 밖으로 나가는 것을 숨김 */
  flex: 1; /* ⭐ JavaScript에서 flex-1 클래스를 추가하는 대신 여기에 직접 적용합니다. */
}

.slot-reel {
  /* 트랜지션이 적용될 요소 */
}

.slot-item {
  /* 릴 아이템의 크기: ITEM_HEIGHT(100)와 일치 */
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 50px; /* 숫자가 잘 보이도록 폰트 크기 지정 */
  font-weight: bold;
  color: white;
}
/* style.css */

/* 1. 모바일 빈틈 및 스크롤 제거 (필수) */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* 2. 슬롯 릴 크기 및 스타일 정의 (JS ITEM_HEIGHT=100과 일치) */
.slot-container {
  overflow: hidden;
  flex: 1; /* 공간 균등 분배 */
  margin: 0;
  padding: 0;
}

.slot-reel {
  margin: 0;
  padding: 0;
}

.slot-item {
  height: 100px; /* JS ITEM_HEIGHT와 일치 */
  line-height: 100px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  color: white;

  /* 너비를 100%로 설정하고 여백을 0으로 강제합니다. */
  width: 100%;
  margin: 0;
  padding: 0;
}
.tab-button:disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
}