/* lotto-ticket 컨테이너에 대한 반응형 조정 */
.lotto-ticket {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap; /* 원본 유지 */
  overflow-x: auto;
  gap: 10px; /* 원본 유지 */
  padding-bottom: 10px;
  /* padding: 10px; */ /* 원본 유지 (추가하지 않음) */
  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
}

/* 각 로또 컬럼 (하얀 박스) 스타일 조정 */
.lotto-column {
  border: 1px solid #ddd;
  padding: 15px;
  width: 200px; /* 원본 유지 - min-width가 더 크면 min-width가 적용됨 */
  background: #fff;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex: 1 1 auto; */ /* 원본 유지 (추가하지 않음) */
  /* width: min-content; */ /* 원본 유지 (추가하지 않음) */
  min-width: 180px; /* 하얀 박스의 최소 너비 설정 (숫자 삐져나가지 않도록) */
  /* max-width: 350px; */ /* 원본 유지 (추가하지 않음) */
  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
  /* border-radius: 10px; */ /* 둥근 모서리 제거 */
}

.lotto-column h2 {
  margin: 0 0 10px 0;
  text-align: center;
  background: var(--lotto-red);
  color: #fff;
  font-size: 18px;
  padding: 8px 0;
  width: 100%;
}

/* 숫자 그리드 (number-grid) 스타일 조정 */
.number-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7열 그리드 유지 */
  gap: 5px; /* 숫자 셀 사이의 간격 */
  margin-top: 15px;
  width: 100%;
}

/* 숫자 셀 (number-cell) 스타일 조정 */
.number-cell {
  border: 1px solid #bbb;
  text-align: center;
  font-size: 15px;
  padding: 6px 0;
  background: #f9f9f9;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
  /* width: 35px; */ /* 원본 유지 (추가하지 않음) */
  /* height: 35px; */ /* 원본 유지 (추가하지 않음) */
  /* line-height: 35px; */ /* 원본 유지 (추가하지 않음) */
  /* border-radius: 5px; */ /* 둥근 모서리 제거 */
  /* display: flex; */ /* 원본 유지 (추가하지 않음) */
  /* justify-content: center; */ /* 원본 유지 (추가하지 않음) */
  /* align-items: center; */ /* 원본 유지 (추가하지 않음) */
  box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
  user-select: none; /* 텍스트 선택 방지 */
}

.number-cell:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

/* 선택된 숫자 셀 스타일 */
.number-selected {
  background: var(--selected-color); /* 기존 변수 사용 */
  color: #fff;
  font-weight: bold;
  border-color: var(--selected-color);
}

.number-manual-selected {
  background: var(--highlight-color); /* 기존 변수 사용 */
  color: #fff;
  font-weight: bold;
  border-color: var(--highlight-color);
}

/* 모바일 화면에 대한 추가적인 조정 (미디어 쿼리) */
@media screen and (max-width: 600px) {
  .lotto-ticket {
    flex-wrap: wrap;
    justify-content: center;
  }

  .lotto-column {
    /* width: 45%; */ /* 이 속성이 과도한 축소를 유발하므로 제거 */
    min-width: 225px; /* 600px 이하 화면에서 최소 너비 (숫자 삐져나가지 않도록) */
    margin: 5px;
  }
}