/* 레이아웃 중앙 정렬 */
html, body {
  margin: 0; padding: 0;
  background: #f4f6f9;
  display: flex; justify-content: center; /* 가로 중앙 */
}

.page {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 20px; padding: 40px 15px; width: 100%;
}

.wrap {
  width: 100%; max-width: 500px; /* PC에서도 정렬 유지 */
  background: #ffffff; border-radius: 20px;
  padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 알림창 가독성 개선 (배경 흰색) */
.alert-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px); display: flex;
  align-items: center; justify-content: center;
  z-index: 9999; opacity: 0; pointer-events: none; transition: 0.3s;
}
.alert-overlay.show { opacity: 1; pointer-events: auto; }

.alert-box {
  background: #ffffff; padding: 35px; border-radius: 25px;
  text-align: center; width: 300px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.alert-box .emoji { font-size: 50px; margin-bottom: 15px; }
.alert-box p { font-size: 18px; color: #333; margin-bottom: 25px; }
.alert-box strong { color: #5b4ce6; font-size: 22px; }

/* 공통 디자인 */
h1 { text-align: center; font-size: 24px; color: #1a1a1a; margin-bottom: 25px; }
button {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  background: #5b4ce6;
  color: white;
  margin-bottom: 15px;
  
  /* 하단 그림자로 입체감 부여 */
  box-shadow: 0 6px 0px #3d34a5; 
  transition: all 0.2s ease;
  position: relative;
  top: 0;
}
button:hover {
  background: #6a5cf5;
  top: -2px; /* 살짝 위로 이동 */
  box-shadow: 0 8px 0px #3d34a5; /* 그림자 더 깊게 */
}

/* 클릭했을 때 (Active): 실제로 눌리는 느낌 */
button:active {
  top: 4px; /* 아래로 눌림 */
  box-shadow: 0 2px 0px #3d34a5; /* 그림자 거의 사라짐 */
}

.game {
  display: flex; align-items: center; background: #f8f9ff;
  border: 1px solid #e0e4ff; border-radius: 15px; margin-bottom: 10px;
}
.game-label { width: 60px; text-align: center; font-weight: bold; color: #5b4ce6; }
.numbers { flex: 1; display: flex; justify-content: center; padding: 10px; }

.ball {
  width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; margin: 3px;
  font-weight: bold; font-size: 14px;
}
.n1 { background: #fde68a; } .n2 { background: #bfdbfe; }
.n3 { background: #fecaca; } .n4 { background: #e9d5ff; } .n5 { background: #bbf7d0; }

.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; }
.stat-item { background: #f9fafb; border: 1px solid #eee; border-radius: 10px; padding: 8px; text-align: center; }
.stat-ball { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; }
.stat-count { font-size: 11px; color: #777; }

.ad { width: 160px; }
@media (max-width: 900px) { .ad { display: none; } }

.confetti { position: fixed; top: -10px; width: 8px; height: 12px; animation: fall 2s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }

footer {
  margin-top: 22px;      /* 위쪽과의 간격 */
  font-size: 11px;       /* 글자 크기 */
  color: #9ca3af;        /* 글자 색상 */
  
  /* 가운데 정렬 핵심 코드 */
  text-align: center;    /* 텍스트를 중앙으로 */
  width: 100%;           /* 부모 요소의 전체 너비를 차지하게 함 */
  display: block;        /* 블록 요소로 명시하여 너비 정렬이 먹히게 함 */
}

/* 메인 제목(h1)과 섹션 제목(h2, h3)의 크기를 동일하게 설정 */
h1, .info h3, .stats-title {
  font-size: 22px;      /* 원하는 크기로 숫자를 조절하세요 */
  text-align: center;   /* 모두 가운데 정렬 */
  margin-top: 20px;
  margin-bottom: 15px;
  font-weight: 800;     /* 굵기 통일 */
}

/* 모든 섹션 제목의 스타일을 하나로 관리 */
.main-title, .section-title {
  font-size: 22px;      /* 이미지상 가장 적당해 보이는 크기 */
  font-weight: 800;
  text-align: center;
  display: block;
  width: 100%;
}

@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* 최근 5회차 전체 영역 정렬 */
.recent-results {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 전체 구역 중앙 배치 */
}

.recent-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 리스트 내부 아이템들 중앙 배치 */
  gap: 20px;
  padding: 10px 0;
}

/* 각 회차별 행 정렬 */
.recent-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 회차 정보와 공 구역 모두 중앙 */
  background: #ffffff;
  padding-bottom: 15px;
}

.recent-info {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #444;
  text-align: center; /* 텍스트 자체 중앙 정렬 */
}

/* 당첨 번호 공 구역 중앙 정렬 */
.recent-balls {
  display: flex;
  align-items: center;
  justify-content: center; /* 공들을 가로로 중앙 정렬 */
  flex-wrap: wrap; /* 모바일에서 공이 넘칠 경우 줄바꿈 */
  gap: 5px;
}

/* '+' 기호 스타일 */
.plus-sign {
  font-weight: bold;
  font-size: 18px;
  color: #999;
  margin: 0 8px;
  display: flex;
  align-items: center;
}

/* 팝업창 내부 번호 컨테이너 */
.alert-results-container {
  margin: 15px 0 25px;
  padding: 10px;
  background: #f8f9ff;
  border-radius: 12px;
  max-height: 200px; /* 번호가 많을 경우 대비 */
  overflow-y: auto;
}

.alert-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  gap: 8px;
}

.alert-label {
  font-size: 12px;
  font-weight: bold;
  color: #5b4ce6;
  width: 30px;
}

.alert-balls {
  display: flex;
  gap: 4px;
}

/* 팝업 전용 작은 공 */
.small-ball {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #111;
}