html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f4f7f6;
    color: #1a1e23;
    overflow-x: hidden;
    font-size: 15px;
}

.card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.btn-primary {
    background-color: #2D927D;
    color: white;
    border-radius: 14px;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: #247564;
    transform: translateY(-1px);
}

/* 현대적이고 플랫한 로또 번호 공 스타일 */
.ball {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.95rem;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s;
}

.ball:hover {
    transform: scale(1.1);
}

.ball-1-10 {
    background: #ffb800;
}

.ball-11-20 {
    background: #20a5e6;
}

.ball-21-30 {
    background: #f14d4d;
}

.ball-31-40 {
    background: #9575cd;
}

.ball-41-45 {
    background: #62c321;
}

.text-accent {
    color: #2D927D;
}

.bg-accent-soft {
    background-color: rgba(45, 146, 125, 0.08);
}

/* 테이블 텍스트 가독성 */
th {
    font-size: 0.85rem !important;
    color: #8e9aaf !important;
}

td {
    font-size: 1rem !important;
}

/* 가로 스크롤 방지 및 모바일 스와이프 지원 시스템 */
.recommendation-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
    /* 스크롤바 여백 */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* 크롬, 사파리 등 스크롤바 숨기기 */
.recommendation-grid::-webkit-scrollbar {
    display: none;
}

.recommendation-grid>div {
    flex: 0 0 85%;
    /* 모바일에서 다음 카드가 살짝 보이도록 설정 */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* 강제로 한 번에 한 칸씩만 스와이프되도록 제동 */
}

@media (min-width: 1024px) {
    .recommendation-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        overflow-x: visible;
    }

    .recommendation-grid>div {
        flex: auto;
    }
}


.nav-link {
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
}

.nav-link.active {
    color: #008a70 !important;
    border-bottom-color: #008a70;
}