/* ===========================
   LOTTO PICK - style.css
   =========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Segoe UI','맑은 고딕',sans-serif;
    min-height:100vh;
    background:linear-gradient(135deg,#6a11cb,#2575fc);
    color:#fff;
    padding:20px;
}

.wrap{
    max-width:500px;
    margin:auto;
}

.card{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:24px;
    padding:24px;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

h1{
    text-align:center;
    font-size:32px;
    margin-bottom:8px;
}

.sub{
    text-align:center;
    opacity:.8;
    margin-bottom:25px;
}

button{
    width:100%;
    padding:16px;
    border:none;
    border-radius:50px;
    background:linear-gradient(90deg,#ffd54f,#ff9800);
    color:#222;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}

button:active{
    transform:scale(.98);
}

.set{
    margin-top:18px;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    animation:fadeUp .4s ease;
}

.title{
    font-size:20px;
    font-weight:bold;
    margin-bottom:12px;
}

.balls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.ball{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-weight:bold;
    font-size:18px;
    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.45),
        0 5px 10px rgba(0,0,0,.35);
    animation:pop .35s ease;
}

.plus{
    font-size:28px;
    font-weight:bold;
    margin:0 2px;
}

@keyframes pop{
    from{
        transform:scale(.2);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes fadeUp{
    from{
        transform:translateY(15px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

@media (max-width:480px){

    h1{
        font-size:26px;
    }

    .ball{
        width:42px;
        height:42px;
        font-size:17px;
    }

    button{
        font-size:17px;
    }
}