.lotto-table-container,
.table-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 10px;
  margin-bottom: 20px;
}

/* 회차 정보 헤더에 유리 느낌 */
h2, h3 {
  background: rgba(255, 255, 255, 0.1);

  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}



/* form 그룹에 유리 테두리 느낌 */
.form-group {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 10px;

  border: 1px solid rgba(255, 255, 255, 0.2);
}



/* 테이블을 감싸는 컨테이너 스타일 */
.table-wrapper {
    overflow-x: auto; /* 가로 스크롤 허용 */
}

/* 로또 번호 테이블 스타일 */
.lotto-table {
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed; /* 테이블 레이아웃 고정 */
}

.lotto-table th, .lotto-table td {
    word-wrap: break-word; /* 긴 단어 줄바꿈 */
    overflow: hidden;      /* 넘치는 내용 숨김 */
    white-space: normal;   /* 기본 줄바꿈 허용 */
    padding: 4px;          /* 셀 안의 여백 추가 */
}


/* 로또 공 모양 스타일 */
.lotto-ball {
    display: inline-block;
    width: 25px; /* 약간 작게 조정 */
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    /* 기본 파란색 계열을 어둡게 표현하는 그라데이션 */
    background: linear-gradient(135deg, #000000b3, #222222b3);
    color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    text-align: center;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),
    1px 1px 2px rgba(0, 0, 0, 0.4);}

/* 색상별 로또공 (원래 색상 유지, 그라데이션으로 변경) */
.lotto-ball-yellow { 
    background: linear-gradient(135deg, rgb(255,230,0) 0%, rgb(164,134,0) 100%); 
    color: #000000a3; 
}
.lotto-ball-blue { 
    background: linear-gradient(135deg, rgb(0,140,255) 0%, rgb(0,80,145) 100%); 
    color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}
.lotto-ball-red { 
    background: linear-gradient(135deg, rgb(255,42,0) 0%, rgb(174,3,0) 100%); 
    color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}
.lotto-ball-black { 
    background: linear-gradient(135deg, rgb(41,37,37) 0%, rgb(21,0,0) 100%); 
    color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}
.lotto-ball-green { 
    background: linear-gradient(135deg, rgb(0,255,8) 0%, rgb(0,90,5) 100%); 
    color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
}

/* 선택한 회차 바로 다음 회차 번호: 흰색 원에 파란 글씨 */
.highlight-ball {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    /* 흰색을 기본으로 약간의 그라데이션 효과 추가 */
    background: linear-gradient(135deg, #ffffff, #f2f2f2);
    color: #00000082;
    text-align: center;
    font-weight: bold;
    border: 1px solid #0000004d;
}

/* 추가적인 테이블, 폼 등의 스타일 */
.lotto-table td {
    padding: 0px;
    text-align: center;
}

.form-group {
    display: inline-block;
    margin-right: 2px;
}

/* 회차별 궁합 한 줄 출력 스타일 */
.combinations-line {
    margin-bottom: 1px;
}

.combination {
    display: inline-block;
    margin-right: 8px;
}

/* 로또공 기본 스타일 (공통 설정) */
.lotto-ball-yellow,
.lotto-ball-blue,
.lotto-ball-red,
.lotto-ball-black,
.lotto-ball-green {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),
    1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* 선택한 회차의 다음회차 번호 스타일: 흰색 원에 파란 배경 */
.next-round-ball {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.5),
    inset -2px -2px 6px rgba(0, 0, 0, 0.2),
    1px 1px 2px rgba(0, 0, 0, 0.4);
    /* 흰색 대신 약간의 그라데이션 처리 */
    background: linear-gradient(135deg, #ffffff, #f2f2f2);
    color: #ff0000;
    border: 2px solid #ff0000;
}