/* 기본 스타일 */
body {
  background-color: #f7f7f7;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333;
}

p {
  text-align: center;
  font-size: 20px;
  color: #555;
}

button {
  display: block;
  margin: 50px auto 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #3e3e3e;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

/* 번호 컨테이너 */
#numbers {
  display: flex; /* 플렉스 박스 사용 */
  justify-content: center; /* 중앙 정렬 */
  align-items: center; /* 세로 정렬 */
  gap: 15px; /* 번호 간 간격 */
}

/* 번호 스타일 */
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 50px;
  text-align: center;

  /* 애니메이션 복원 */
  transition: all 0.3s ease-in-out; /* 부드러운 전환 효과 */
  transform: scale(1.0); /* 기본 크기 축소 */
  box-shadow: 0px 2px 4px rgba(0,0,0,0.2); /* 그림자 효과 */
}

.ball:hover {
  transform: scale(1.2) rotate(360deg); /* 크기 확대 및 회전 애니메이션 */
}

/* 색상 지정 */
.ball:nth-child(1) { background-color: #ffa600; color: #fff; }
.ball:nth-child(2) { background-color: #ff6363; color: #fff; }
.ball:nth-child(3) { background-color: #f58500; color: #fff; }
.ball:nth-child(4) { background-color: #0077c2; color: #fff; }
.ball:nth-child(5) { background-color: #4ca64c; color: #fff; }
.ball:nth-child(6) { background-color: #b15bff; color: #fff; }

/* 광고 컨테이너 스타일 */
.ad-banner-1 {
  text-align: center;
  margin-top: 30px;
}
.ad-banner-2 {
  text-align: center;
  margin-top: 5px;
}
.ads-partners {
  text-align: center;
}

/* 본문 컨테이너 스타일 */
.container {
  max-width: 800px; /* 본문 너비를 줄여 사이드바와 가까워지도록 설정 */
  margin: 0 auto;
  padding: 0 20px;
}

/* 왼쪽 사이드바 광고 */
.sidebar-ad-left {
  position: fixed;
  left: 5%; /* 왼쪽에서 화면 너비의 5%만큼 떨어짐 */
  top: 100px;
  width: 160px;
  height: auto;
  text-align: center;
}

/* 오른쪽 사이드바 광고 */
.sidebar-ad-right {
  position: fixed;
  right: 5%; /* 오른쪽에서 화면 너비의 5%만큼 떨어짐 */
  top: 100px;
  width: 160px;
  height: auto;
  text-align: center;
}

/* 반응형 디자인 - 모바일에서는 사이드바 숨김 */
@media (max-width: 1024px) {
  .sidebar-ad-left,
  .sidebar-ad-right {
    display: none; /* 모바일에서 광고 숨김 */
  }

  .container {
    max-width: calc(100% - 40px); /* 모바일에서 화면 꽉 채우기 */
    padding: 0;
  }
}