* {
  box-sizing: border-box;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  min-height: 100vh; /* auto에서 100vh로 재변경 */
  margin: 0;
  overflow-x: hidden;
}

h1 { 
  color: #2d3436; 
  margin-bottom: 0px; /* 15px에서 0px로 변경 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size: clamp(1.0rem, 2.5vw, 1.4rem); /* 글자 크기 줄임 */
  text-align: left; /* center에서 left로 변경 */
}

/* 헤더 링크 컨테이너 */
.header-links {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 999;
}

/* 정보 아이콘 스타일 */
.info-icon {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 밝은 그라데이션 배경으로 변경 */
  color: #495057; /* 텍스트 색상 변경 */
  border-radius: 8px;
  padding: 8px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid #dee2e6; /* 테두리 추가 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 그림자 조정 */
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.guide-link {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1976d2;
  border: 1px solid #90caf9;
}

.guide-link:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.info-icon:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); /* 호버 배경색 변경 */
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* 호버 그림자 조정 */
}

.game-box {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  width: calc(100% - 20px); /* body의 padding(10px * 2)을 고려하여 조정 */
  max-width: 500px;
  padding: 10px clamp(12px, 3vw, 20px) clamp(12px, 3vw, 20px) clamp(12px, 3vw, 20px); /* 상단 패딩을 10px로 조정 */
  text-align: left; /* center에서 left로 변경 */
  margin: 20px auto 0 auto; /* 상단 마진 추가 및 가운데 정렬 */
  min-height: auto; /* 명시적으로 min-height 제거 */
  height: auto; /* 높이 100%로 설정 */
  position: relative; /* 자식 요소의 절대 위치 지정을 위한 기준점 */
}

.game-step {
  width: 100%;
  padding-top: 0; /* 추가: 상단 패딩 제거 */
}

/* 게임 영역 특별 스타일 */
#gameArea {
  padding-top: 0 !important; /* 강제로 상단 패딩 제거 */
  margin-top: 0 !important; /* 강제로 상단 마진 제거 */
  display: none; /* 초기 상태: 숨김 */
  height: 100%; /* 부모 요소의 높이를 채우도록 설정 */
  flex-direction: column; /* 추가 */
  justify-content: space-between; /* 추가: 콘텐츠를 상하로 균등하게 분배 */
  align-items: center; /* 추가 */
}

/* 게임이 활성화될 때만 표시 */
#gameArea.active {
  display: flex !important; /* 게임 활성화 시에만 flex로 표시 */
  padding-top: 0 !important; /* 상단 패딩 강제 제거 */
  margin-top: 0 !important; /* 상단 마진 강제 제거 */
  min-height: 100% !important; /* 최소 높이 100%로 설정 */
  /* height: auto !important; */ /* 높이 자동 설정 제거 */
  transform: translateY(0) !important; /* 변환 제거 */
  /* vertical-align: top !important; */ /* 상단 정렬 제거 */
}

/* 게임 영역 내 모든 자식 요소의 상단 여백 제거 */
#gameArea > * {
  margin-top: 0 !important; /* 강제로 상단 마진 제거 */
  padding-top: 0 !important; /* 강제로 상단 패딩 제거 */
}

/* 게임 영역 내 첫 번째 요소 (야구공 디스플레이) 스타일 */
#gameArea > .baseball-display:first-child {
  margin-top: 0 !important; /* 강제로 상단 마진 제거 */
  padding-top: 0 !important; /* 강제로 상단 패딩 제거 */
  margin-bottom: 0 !important; /* 강제로 하단 마진 제거 */
  padding-bottom: 0 !important; /* 강제로 하단 패딩 제거 */
}

/* 게임 설정 섹션 */
.game-settings-section {
  margin-bottom: 20px;
}

.game-settings-section h2 {
  text-align: left; /* center에서 left로 변경 */
  margin-bottom: 15px;
  color: #2d3436;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem); /* 글자 크기 줄임 */
}

.settings-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.setting-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 15px;
  border: 2px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.setting-card h3 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  text-align: center;
}

/* 난이도 선택 */
.difficulty-options {
  display: flex;
  flex-direction: row; /* column에서 row로 변경 */
  flex-wrap: wrap; /* 추가: 여러 줄로 표시 */
  gap: 8px;
  justify-content: center; /* 중앙 정렬 추가 */
}

.difficulty-option {
  cursor: pointer;
  display: block;
  flex-basis: clamp(120px, 20vw, 150px); /* 기본 너비 조정 */
  flex-shrink: 0; /* 공간이 부족해도 줄어들지 않도록 */
  max-width: clamp(150px, 25vw, 180px); /* 최대 너비 제한 (선택 사항) */
}

.difficulty-option input[type="radio"] {
  display: none;
}

.option-card {
  background: white;
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 5px 12px; /* 세로 패딩 감소 */
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: row; /* column에서 row로 변경 */
  align-items: center; /* 내용 세로 중앙 정렬 */
  justify-content: space-between; /* 텍스트를 양쪽으로 분산 정렬 */
  flex-wrap: nowrap; /* 내부 요소 줄바꿈 방지 */
  /* min-height: 40px; */ /* 최소 높이 제거 */
  padding: 5px 6px; /* 패딩 조정 (세로를 더 줄임) */
  text-align: center; /* 텍스트 중앙 정렬 */
}

.option-card:hover {
  border-color: #74b9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(116, 185, 255, 0.2);
}

.difficulty-option input[type="radio"]:checked + .option-card {
  border-color: #28a745;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.option-title {
  font-size: clamp(0.6rem, 1.8vw, 0.8rem); /* 폰트 크기 더 줄임 */
  font-weight: bold;
  color: #2d3436;
  display: inline-flex; /* 한 줄에 배치 */
  align-items: center;
  line-height: 1; /* 라인 높이 최소화 */
}

.option-subtitle {
  font-size: clamp(0.5rem, 1.5vw, 0.7rem); /* 폰트 크기 더 줄임 */
  color: #6c757d;
  margin: 0 4px; /* 간격 조정 */
  display: inline-flex; /* 한 줄에 배치 */
  align-items: center;
  line-height: 1; /* 라인 높이 최소화 */
}

.option-multiplier {
  font-size: clamp(0.6rem, 1.8vw, 0.8rem); /* 폰트 크기 더 줄임 */
  font-weight: 600;
  color: #1e7e34;
  background-color: #d4edda;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-flex; /* 한 줄에 배치 */
  align-items: center;
  line-height: 1; /* 라인 높이 최소화 */
}

/* 배팅 금액 설정 */
.betting-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bet-display-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.auto-setting-info {
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: normal;
  margin-left: 4px;
}

.bet-display-group span {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: bold;
  padding: 8px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
}

.bet-unit {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: bold;
  color: #495057;
}

.entry-fee-info {
  margin-top: 4px;
}

.entry-fee-info small {
  color: #6c757d;
  font-size: 0.8rem;
  font-style: italic;
}

.betting-info {
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  color: #6c757d;
  text-align: center;
}

/* 보유 포인트 표시 */
.points-display {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  color: white;
  box-shadow: 0 2px 8px rgba(116, 185, 255, 0.3);
  margin-top: 12px;
}

.points-label {
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.9;
}

.points-amount {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

select, input, button {
  margin: 4px;
  padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 200px;
}

select:focus, input:focus {
  outline: none;
  border-color: #74b9ff;
  box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
}

button {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
  min-width: 120px;
  padding: clamp(10px, 2.5vw, 14px) clamp(20px, 4vw, 28px);
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
}

button:disabled {
  background: #b2bec3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 야구공 디스플레이 */
.baseball-display {
  margin-bottom: 0px; /* 제거: 불필요한 하단 여백 제거 */
}

/* 게임 상호작용 영역 */
.game-interaction-area {
  display: flex;
  flex-wrap: wrap; /* 반응형을 위해 추가 */
  gap: 20px; /* 섹션 간 간격 */
  margin-bottom: 25px;
}

.input-section,
.history-section {
  flex: 1; /* 가용한 공간을 균등하게 차지 */
  min-width: 280px; /* 최소 너비 설정 */
}

.input-section p {
  margin-bottom: 10px;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #343a40;
  font-weight: 600;
}

.guess-input-group {
  display: flex;
  gap: 8px; /* 입력창과 버튼 사이 간격 */
}

.guess-input-group input[type="text"] {
  flex-grow: 1; /* 입력창이 최대한 공간을 차지 */
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 1rem;
}

.guess-input-group button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.guess-input-group button:hover {
  background-color: #0056b3;
}

.history-section h3 {
  margin: 0 0 10px 0;
  color: #343a40;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  text-align: center;
}

.history-console {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  min-height: 200px; /* 최소 높이 설정 */
  max-height: 300px; /* 최대 높이 증가 */
  overflow-y: visible; /* 스크롤 제거 */
  font-size: 0.9rem;
  color: #343a40;
  line-height: 1.4; /* 줄 간격 줄여서 공간 절약 */
}

.history-console p {
  margin-bottom: 5px;
}

.history-console p:last-child {
  margin-bottom: 0;
}

/* 야구공 디스플레이 */
.baseball-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 15px);
  margin-bottom: 5px; /* 15px에서 5px로 조정 */
  flex-wrap: wrap;
}

.baseball {
  width: clamp(50px, 8vw, 70px);
  height: clamp(50px, 8vw, 70px);
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 4vw, 28px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: bounce 2s infinite;
  position: relative;
  transition: all 0.5s ease;
  cursor: pointer;
}

.baseball::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transition: opacity 0.5s ease;
}

/* 정답 오픈 상태 */
.baseball.revealed {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  animation: revealPulse 1s ease-in-out;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.baseball.revealed::before {
  opacity: 0;
}

.baseball.revealed .baseball-number {
  color: white;
  font-weight: bold;
  font-size: clamp(20px, 4.5vw, 32px);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: numberGlow 1s ease-in-out;
}

/* 정답 오픈 애니메이션 */
@keyframes revealPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.6);
  }
  100% {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
  }
}

@keyframes numberGlow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 정답 오픈 시 전체 컨테이너 효과 */
.baseball-container.revealed {
  animation: containerCelebration 2s ease-in-out;
}

@keyframes containerCelebration {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.baseball-hint {
  color: #6c757d;
  font-style: italic;
  margin: 0;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* 입력 영역 */
/* .input-area { display: none; } */ /* 이제 사용하지 않으므로 숨기거나 제거 */
/* .result { display: none; } */ /* 이제 history-console 내부에 있으므로 필요 없음 */

/* 결과 표시 영역 */
/* #result { display: none; } */ /* 이제 history-console 내부에 있으므로 필요 없음 */

/* 게임 정보 */
.game-info {
  margin-top: 20px;
  margin-bottom: 20px; /* 추가: 현재 상황 점수 분석 섹션과의 하단 간격 */
  display: flex;
  justify-content: center; /* space-around에서 center로 변경 */
  flex-wrap: wrap;
  gap: 10px; /* 8px에서 10px로 간격 조정 */
}

.game-info .info-item {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #495057;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 15px; /* 패딩 조정 */
  border-radius: 8px; /* 모서리 둥글기 조정 */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); /* 그라데이션 배경 */
  border: 1px solid #dee2e6; /* 테두리 추가 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 그림자 추가 */
  display: flex; /* 추가: flex 컨테이너로 설정 */
  flex-direction: row; /* column에서 row로 변경 */
  justify-content: space-between; /* 추가: 라벨과 값을 양쪽으로 분리 */
  align-items: center; /* 추가: 내부 아이템 가로 중앙 정렬 */
  min-width: 120px; /* 최소 너비 설정 */
  /* max-width: 30%; */ /* 최대 너비 설정 제거 */
  flex: 1 1 auto; /* flex-basis 자동 설정 및 유연하게 늘어나고 줄어들도록 */
  text-align: center;
  cursor: default; /* 마우스 커서 변경 */
  transition: all 0.2s ease; /* 호버 애니메이션 추가 */
}

.game-info .info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.info-label {
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap; /* 줄바꿈 방지 */
  margin-right: 5px; /* 라벨과 값 사이 간격 */
}

.info-value-group {
  display: flex; /* flex 컨테이너로 설정 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 5px; /* 숫자와 단위 사이 간격 */
  font-weight: bold;
  color: #343a40;
  white-space: nowrap; /* 줄바꿈 방지 */
}

.score-board {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  color: white;
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
  min-width: 150px;
}

.score-title {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.9;
}

.score-amount {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 점수 정책 섹션 */
.score-policy-section {
  margin-bottom: 0px; /* 불필요한 하단 마진 제거 */
  background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
  border-radius: 12px;
  border: 2px solid #c3e6cb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.policy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  transition: background 0.3s ease;
}

.policy-header:hover {
  background: linear-gradient(135deg, #c3e6cb 0%, #b8dacc 100%);
}

.policy-header h3 {
  margin: 0;
  color: #155724;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

.toggle-icon {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #155724;
  transition: transform 0.3s ease;
}

.policy-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.policy-header.collapsed {
  background: linear-gradient(135deg, #c3e6cb 0%, #b8dacc 100%);
}

.policy-content {
  padding: 15px;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
  max-height: 500px;
}

.policy-content.collapsed {
  max-height: 0;
  padding: 0 15px;
}

.policy-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.policy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border: 2px solid #e9ecef;
}

.policy-item .difficulty {
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 600;
}

.policy-item .multiplier {
  font-weight: bold;
  color: #28a745;
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  background: rgba(40, 167, 69, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

.bonus-info {
  margin-bottom: 15px;
}

.bonus-item {
  background: #fff3cd;
  color: #856404;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 6px;
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  border-left: 3px solid #ffc107;
  font-weight: 500;
}

.expected-score {
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
  border-radius: 8px;
  color: #0c5460;
  border: 2px solid #17a2b8;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  font-weight: 600;
}

/* 게임 시작 섹션 */
.start-section {
  text-align: center;
  margin-top: 20px; /* 상단 간격 설정 */
}

.start-button {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 30px;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  transition: all 0.3s ease;
  min-width: 150px;
}

.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
}

.start-button:active {
  transform: translateY(-1px);
}

/* 푸터 스타일 */
.main-footer {
  width: 100%;
  max-width: 560px;
  margin: 40px auto 0 auto;
  padding: 16px 8px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  color: #6c757d;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.footer-links a {
  color: #1976d2;
  text-decoration: none;
  margin: 0 6px;
  font-weight: 400;
  font-size: 14px;
  transition: color 0.2s, text-decoration 0.2s;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.footer-links a:hover, .footer-links a:focus {
  color: #0056b3;
  text-decoration: underline;
}
.footer-links .separator {
  color: #adb5bd;
  margin: 0 2px;
  font-size: 14px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.main-footer p {
  font-size: 13px;
  color: #8e9297;
  margin: 4px 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .main-footer {
    padding: 12px 2vw;
    font-size: 13px;
    max-width: 100vw;
  }
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .footer-links a {
    font-size: 13px;
  }
  .main-footer p {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .main-footer {
    padding: 12px 2vw;
    font-size: 14px;
  }
  .footer-links {
    gap: 6px;
  }
  .footer-links a {
    margin: 0 4px;
    font-size: 14px;
  }
  .main-footer p {
    font-size: 13px;
  }
}

/* 게임 중 점수 정보 */
.game-score-info {
  margin-top: 20px;
  margin-bottom: 20px; /* 게임 종료 버튼과의 간격 추가 */
  background: #f0f3f6;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #dee2e6;
  width: 100%; /* 추가: 부모 너비에 맞춤 */
  align-self: stretch; /* 추가: 가로 공간을 채우도록 */
}

.score-breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ced4da;
}

.score-breakdown-header h4 {
  margin: 0;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #343a40;
}

.score-breakdown-header .toggle-icon {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #343a40;
  transition: transform 0.3s ease;
}

/* 접힌 상태 아이콘 회전 */
.score-breakdown-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.score-details-content {
  max-height: 500px; /* 충분히 큰 값으로 설정 */
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.score-details-content.collapsed {
  max-height: 0; /* 접혔을 때 높이를 0으로 */
}

.score-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2열로 변경 */
  gap: 10px;
  margin-top: 10px; /* 헤더와의 간격 */
}

.score-details .score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 0.95rem;
}

.score-details .score-item span:first-child {
  font-weight: 500;
  color: #555;
}

.score-details .score-item span:last-child {
  font-weight: 600;
  color: #333;
}

.score-details .score-item.highlight {
  background-color: #d4edda;
  border-color: #28a745;
}

.score-details .score-item.highlight span:last-child {
  color: #155724;
}

/* 항상 표시되는 예상 획득 점수 */
.score-item.highlight.always-visible {
  margin-top: 15px; /* 토글 섹션과 분리 */
  background-color: #d4edda;
  border-color: #28a745;
  font-weight: bold;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem); /* 크기 조정 */
  padding: 10px 15px; /* 패딩 조정 */
}

/* 게임 컨트롤 버튼 (게임 종료) */
.game-controls {
  margin-top: 20px; /* 위에 공간 추가 */
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  body {
    padding: 8px;
  }
  
  .game-box {
    max-width: 100%;
    padding: 20px;
  }
  
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .policy-info {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .score-details {
    grid-template-columns: 1fr;
  }
  
  .game-info {
    /* flex-direction: column; */ /* 제거 */
    /* align-items: center; */ /* 제거 */
    justify-content: center; /* 추가 */
    flex-wrap: wrap; /* 추가 */
    gap: 10px; /* 8px에서 10px로 변경 */
  }
  
  /* .game-info .info-item { */ /* 중간 화면에서 특정 항목에만 적용되도록 제거 */
  /*   flex-direction: row; */
  /*   justify-content: space-between; */
  /*   width: 100%; */
  /*   max-width: none; */
  /* } */

  .game-info .info-item:nth-child(1) {
    width: 100%; /* 첫 번째 항목 전체 너비 */
  }

  .game-info .info-item:nth-child(2),
  .game-info .info-item:nth-child(3) {
    width: calc(50% - 5px); /* 두 번째, 세 번째 항목 절반 너비 (간격 고려) */
  }

  /* .info-item { */ /* 기존 .info-item 스타일 제거 */
  /*   width: 100%; */
  /*   text-align: center; */
  /* } */
}

@media (max-width: 480px) {
  .policy-info {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .baseball-container {
    gap: 6px;
  }
  
  .input-area input {
    font-size: 16px;
    letter-spacing: 1px;
  }
  
  .bonus-item {
    font-size: 11px;
    padding: 6px 8px;
  }
  
  .start-button {
    padding: 10px 25px;
    font-size: 1rem;
  }

  /* 게임 방법 팝업 내용 조정 */
  #howToPlayPopup .win-popup-content p, #howToPlayPopup .win-popup-content ul li {
    font-size: 0.8rem; /* 0.85rem에서 조정 */
    margin-bottom: 6px; /* 8px에서 조정 */
  }
  #howToPlayPopup .win-popup-content ul {
    margin-bottom: 6px; /* 8px에서 조정 */
    padding-left: 20px; /* 리스트 패딩 조정 */
  }
  #howToPlayPopup .win-popup-content h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* 모바일 h1 크기 조정 */
  }
  #howToPlayPopup .win-popup-content p {
    font-size: clamp(0.9rem, 2.2vw, 1.2rem); /* 모바일 p 크기 조정 */
  }
}

@media (max-width: 360px) {
  .policy-info {
    grid-template-columns: 1fr;
  }
  
  .baseball {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  
  .baseball-container {
    gap: 4px;
  }
  
  .settings-layout {
    gap: 8px;
  }
  
  .setting-card {
    padding: 10px;
  }
}

/* 문의하기 페이지 전용 스타일 */
.contact-page .game-box p {
  font-size: clamp(0.8rem, 2vw, 0.9rem); /* 글자 크기 줄임 */
  line-height: 1.4;
  margin-bottom: 12px;
}

.contact-page .game-box h2 {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem); /* 글자 크기 줄임 */
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
}

.contact-page .game-box h1 {
  font-size: clamp(1.0rem, 2.5vw, 1.3rem); /* 글자 크기 줄임 */
  text-align: left;
  margin-bottom: 15px;
}

/* 게임 승리 팝업 스타일 */
.win-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.win-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

.win-popup-content {
  background: linear-gradient(135deg, #e0f2f7 0%, #c1e7f0 100%);
  border-radius: 15px;
  padding: 20px; /* 40px에서 조정 */
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  max-width: 450px; /* 90%에서 고정값으로 조정 */
  max-height: 80vh; /* 최대 높이 설정 */
  overflow-y: auto; /* 내용이 넘칠 경우 스크롤 */
  color: #004d60;
}

.win-popup-overlay.show .win-popup-content {
  transform: scale(1);
}

.win-popup-content h1 {
  font-size: clamp(1.8rem, 4.5vw, 3rem); /* 2rem에서 조정 */
  color: #e62040; /* 홈런 색상 */
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.win-popup-content p {
  font-size: clamp(1rem, 2.5vw, 1.4rem); /* 1.1rem에서 조정 */
  margin-bottom: 10px; /* 15px에서 조정 */
  font-weight: 500;
}

.win-popup-content p span {
  font-weight: bold;
  color: #007bff;
}

.win-popup-content .start-button {
  padding: 10px 25px; /* 12px 30px에서 조정 */
  font-size: clamp(0.9rem, 2.2vw, 1.1rem); /* 1rem에서 조정 */
  border-radius: 20px; /* 25px에서 조정 */
  background-color: #28a745;
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
  max-width: 200px; /* 추가: 버튼 최대 너비 제한 */
  margin-top: 20px; /* 버튼 위 간격 추가 */
}

.win-popup-content .start-button:hover {
  background-color: #218838;
  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
}

/* 게임 히스토리 섹션 스타일 */
.game-history-section {
  margin: 15px 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.game-history-section h3 {
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  color: #007bff;
  margin-bottom: 10px;
  font-weight: 600;
}

.game-history-list {
  max-height: 200px;
  overflow-y: auto;
  text-align: left;
}

.game-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border-left: 3px solid #007bff;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
}

.game-history-item:last-child {
  margin-bottom: 0;
}

.game-history-item .history-guess {
  font-weight: 600;
  color: #333;
}

.game-history-item .history-result {
  color: #28a745;
  font-weight: 500;
}

.game-history-item .history-inning {
  color: #6c757d;
  font-size: 0.85em;
}

/* 폭죽 애니메이션 */
.firework {
  position: absolute;
  width: 0.5px; /* 폭죽 크기 */
  height: 0.5px;
  background: white; /* 초기 색상 */
  border-radius: 50%;
  opacity: 0;
  animation: firework 2s ease-out infinite;
}

/* 각 폭죽마다 다른 위치와 지연 시간 설정 */
.firework:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; transform: scale(0); }
.firework:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.5s; transform: scale(0); }
.firework:nth-child(3) { top: 60%; left: 50%; animation-delay: 1s; transform: scale(0); }
  
@keyframes firework {
  0% { transform: scale(0.1); opacity: 1; }
  50% { transform: scale(1); opacity: 1; background: #ffeb3b; /* 터지는 색상 */ }
  100% { transform: scale(1.5); opacity: 0; background: transparent; }
}