/* 로또 전용 컨테이너 */
#lotto-container {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center;    /* 가로 중앙 정렬 */
    gap: 15px; /* 번호와 버튼 사이 간격 */
    margin: 20px auto; /* 화면 가운데 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

#lotto.initial > li {
    background-color: #FFC107;
    color: white; /* 글자색 */
    font-size: 18px; /* 글자 크기 */
    font-weight: 700; /* 글자 굵기 */
    font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 40px; /* 원 높이에 맞춤 */
    width: 40px; /* 원 너비 */
    height: 40px; /* 원 높이 */
    border-radius: 50%; /* 원형 */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    margin: 0 3px; /* 간격 */
}


/* 로또 번호 리스트 스타일 */
#lotto {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    gap: 0px; /* 간격 줄이기 */
    margin: 0; /* 추가 여백 제거 */
    padding: 0; /* 리스트의 기본 패딩 제거 */
}
/* 숫자 아이템 스타일 */
#lotto > li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* 글자 크기 */
    font-weight: 700; /* 글자 굵기 */
    font-family: 'Roboto', sans-serif; /* 폰트 스타일 */
    color: white; /* 기본 글자색 */
    text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; /* 텍스트 외곽선 */
    width: 40px; /* 원 크기 */
    height: 40px; /* 원 크기 */
    border-radius: 50%; /* 원형 유지 */
    background-color: #2196F3; /* 초기 상태의 파란색 */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    margin: 0; /* 추가 여백 제거 */
}

/* 번호별 색상 */
#lotto > li.a { background-color: #FFC107; } /* 노란색 (1-9) */
#lotto > li.b { background-color: #2196F3; } /* 파란색 (10-19) */
#lotto > li.c { background-color: #F44336; } /* 빨간색 (20-29) */
#lotto > li.d { background-color: #9E9E9E; } /* 묵색 (30-39) */
#lotto > li.e { background-color: #4CAF50; } /* 초록색 (40 이상) */

/* 버튼 스타일 */
#btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    color: white;
    background-color:  #3498db;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 10px auto 0; /* 버튼 위쪽 간격 줄이기 */
}
#btn:hover {
    background-color: #2874a6;
}
}