:root{
    --bg:#f3f4f6;
    --surface:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --accent:#ff3b73;
    --accent-grad:linear-gradient(90deg,#ff9a6a 0%, #ff3b73 100%);
    --radius:18px;
    --shadow:0 8px 20px rgba(0,0,0,.08);
    }


    /* 로딩 본문 */
    .loading{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:30px 20px 16px; gap:18px; 
    height: 100%;}
    
    
    .illust-wrap{ position:relative; width: 100%; height:400px; display:grid; place-items:center; margin:24px 0 8px; }
    .illust{ position:absolute; inset:0; margin:auto; width:70%; height:70%; background-size:contain; background-position:center; background-repeat:no-repeat; opacity:0; transform:translateY(6px) scale(.98); filter:drop-shadow(0 20px 24px rgba(0,0,0,.08)); }
    .illust.is-active{ opacity:1; animation:jelly-in .55s cubic-bezier(.2, .9, .2, 1) both; }
    
    
    /* 이미지 연결 (경로만 바꿔 끼우면 됨) */
    .illust--fries{ background-image:url('../img/icon-fries.png'); }
    .illust--burger{ background-image:url('../img/icon-burger.png'); }
    .illust--hotdog{ background-image:url('../img/icon-hotdog.png'); }
    
    
    @keyframes jelly-in{
    0% {transform:translateY(10px) scale(.85)}
    38% {transform:translateY(-6px) scale(1.06)}
    58% {transform:translateY(2px) scale(.98)}
    78% {transform:translateY(-2px) scale(1.02)}
    100% {transform:translateY(0) scale(1)}
    }
    
    
    /* 점프하는 로딩 점 3개 (1초씩 순차 또잉) */
    .dots{ display:flex; gap:20px; margin:10px 0 6px; align-items:flex-end; }
    .dot{ width:40px; height:40px; border-radius:50%; background:var(--accent); box-shadow:0 2px 6px rgba(255,59,115,.25); animation:bounce-seq 3s infinite ease-in-out; animation-delay:calc(var(--i) * 1s); }
    @keyframes bounce-seq{
    0%,33%,100%{ transform:translateY(0) }
    6%{ transform:translateY(-20px) }
    12%{ transform:translateY(0) }
    }
    
    
    .step{ text-align:center; margin-top:240px; }
    .step .num , .step .num span{ 
        color: #D42A54;
        font-size: 3rem;
        font-weight: 900;
        letter-spacing: -0.12rem;
    }
    .step .num.fade{ animation:fade-slide .4s ease both }
    .step .text{
        color: #000;
        font-size: 4rem;
        font-weight: 700;
        letter-spacing: -0.16rem;
        margin-top: 20px;
    }
    .text.fade{ animation:fade-slide .4s ease both }
    @keyframes fade-slide{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
    
    
    /* 말풍선 알림 */
    .toast-msg{
        width: 51.25rem;
        height: 9rem;
        flex-shrink: 0;
        background: url(../img/img-kakao-comment.svg) no-repeat center center;
        background-size: contain;
        display: flex;
        /* align-items: center; */
        justify-content: center;
        align-items: flex-start;
        padding-top: 2dvb;
    }
    .toast-msg p{
        display: flex;
        align-items: center;
        gap: 10px;
        color: #000;
        font-size: 3rem;
        font-weight: 600;
        letter-spacing: -0.15rem;
    }
    .toast-msg p::before{
        content: "";
        display: flex;
        width: 3.75rem;
        height: 3.75rem;
        justify-content: center;
        align-items: center;
        background: url(../img/sns_Default_kakao.svg);
    }
    
    
    /* 하단 닫기 버튼 */
    .actions{ position:sticky; bottom:0; padding:12px 20px 24px; background:linear-gradient(180deg, rgba(243,244,246,0) 0%, var(--bg) 35%, var(--bg) 100%); }
    .btn-close{ width:100%; height:60px; border-radius:999px; border:0; color:#fff; font-size:18px; font-weight:900; cursor:pointer; box-shadow:var(--shadow); background:var(--accent-grad); }
    
    
    /* 접근성: 모션 최소화 환경 */
    @media (prefers-reduced-motion: reduce){
    .illust{ transition:none; animation:none }
    .dot{ animation:none }
    }


    /*  */
    .position-bo{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        position: absolute;
        bottom: 0;
        width: 100%;
    }