/* =========================================================
   USEMO Lotto Common Ball UI
   ========================================================= */

.lotto-balls{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.lotto-balls.is-center{justify-content:center}

.lotto-ball{
    display:inline-flex;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    border:0 !important;
    color:#fff !important;
    font-size:15px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.02em;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}

.lotto-ball.range-1{background:#f2b720 !important}
.lotto-ball.range-2{background:#3b82c4 !important}
.lotto-ball.range-3{background:#e94b64 !important}
.lotto-ball.range-4{background:#7d8491 !important}
.lotto-ball.range-5{background:#4fa166 !important}

.lotto-plus{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    color:#9aa1ad;
    font-size:34px;
    line-height:1;
    font-weight:300;
}

.lotto-latest-card{text-align:center}
.lotto-latest-card .lotto-balls{justify-content:center}
.lotto-latest-meta{margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.7}

.lotto-wrap{display:grid;gap:18px}
.lotto-panel{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);display:grid;gap:16px}
.lotto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lotto-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lotto-field{display:grid;gap:7px}
.lotto-field span{font-size:12px;font-weight:900}
.lotto-field input,.lotto-field select,.lotto-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;padding:10px}
.lotto-field textarea{min-height:90px;resize:vertical}
.lotto-toolbar{display:flex;gap:8px;flex-wrap:wrap}
.lotto-toolbar button,.lotto-toolbar a{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.lotto-toolbar .primary{background:var(--primary);border-color:var(--primary);color:#fff}
.lotto-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lotto-metric{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);display:grid;gap:5px}
.lotto-metric span{font-size:11px;color:var(--muted)}
.lotto-metric strong{font-size:18px}
.lotto-table{width:100%;border-collapse:collapse}
.lotto-table th,.lotto-table td{padding:10px;border-bottom:1px solid var(--line);font-size:12px;text-align:center}
.lotto-table th{color:var(--muted)}
.lotto-num-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}
.lotto-num-btn{min-height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:800;cursor:pointer}
.lotto-num-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.lotto-game{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);display:grid;gap:9px}
.lotto-games{display:grid;gap:10px}
.lotto-note{font-size:12px;color:var(--muted);line-height:1.75}
.lotto-status{padding:12px 14px;background:var(--primary-soft);border-radius:11px;font-size:12px;line-height:1.7}
.lotto-gift-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface-soft);display:grid;gap:18px;text-align:center}

@media(max-width:760px){
    .lotto-grid,.lotto-grid.cols3{grid-template-columns:1fr}
    .lotto-metrics{grid-template-columns:1fr}
    .lotto-num-grid{grid-template-columns:repeat(7,1fr)}
}
@media(max-width:520px){
    .lotto-panel{padding:17px}
    .lotto-num-grid{grid-template-columns:repeat(5,1fr)}
    .lotto-ball{width:40px;height:40px;flex-basis:40px;font-size:14px}
    .lotto-plus{font-size:29px}
}


/* =========================================================
   Lotto Pattern Analysis
   ========================================================= */

.lotto-bar-list{
    display:grid;
    gap:14px;
}

.lotto-bar-row{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 70px;
    gap:14px;
    align-items:center;
}

.lotto-bar-row > strong{
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.lotto-bar-row > span{
    font-size:13px;
    color:var(--muted);
    text-align:right;
    white-space:nowrap;
}

.lotto-bar{
    position:relative;
    width:100%;
    height:12px;
    overflow:hidden;
    border-radius:999px;
    background:#edf1f7;
}

.lotto-bar > i{
    display:block;
    height:100%;
    min-width:2px;
    border-radius:inherit;
    background:var(--primary);
}

.lotto-pattern-section{
    gap:20px;
}

.lotto-pattern-section h2{
    margin:0;
}

.lotto-pattern-section .lotto-bar-list{
    padding-top:4px;
}

/* 구간별 출현은 5개 항목이므로 데스크톱에서 한 줄 배치 */
.lotto-zone-metrics{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

@media(max-width:900px){
    .lotto-zone-metrics{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .lotto-bar-row{
        grid-template-columns:58px minmax(0,1fr) 52px;
        gap:9px;
    }

    .lotto-zone-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}