/* ===== Modal base ===== */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:1000; opacity:0; pointer-events:none; }
.modal.is-open{ opacity:1; pointer-events:auto; }


.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.20); -webkit-tap-highlight-color:transparent; opacity:0; transition:opacity .18s ease; }
.modal.is-open .modal__backdrop{ opacity:1 }


.modal__panel {
    position: relative;
    width: 60vw;
    background: var(--colorfff);
    border-radius: 1.25rem;
    padding: 2.5rem;
    transform: scale(.96) translateY(6px);
    opacity: .98;
    transition: transform .18s ease, opacity .18s ease;
}
.modal.is-open .modal__panel{ transform:scale(1) translateY(0); opacity:1 }
.modal__panel p{
    color: #000;
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    line-height: 130%; /* 41.6px */
    letter-spacing: -1.28px;
    padding: 2.5rem 0;
}

.modal__title{
    color: #000;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 130%; /* 3.25rem */
    letter-spacing: -0.1rem;
    padding: 2.5rem 0;
}


.modal__btn{
    display:block;
    width:100%;
    height:10rem;
    border:0;
    border-radius:12px;
    color: #FFF;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.1125rem; 
    cursor:pointer; background:var(--colorD42A54); }
.modal__btn:active{ transform:translateY(1px) }


.modal__close-x{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; border:0; background:#eef0f4; cursor:pointer; }
.modal__close-x::before{ content:'✕'; font-weight:800 }


/* Demo page trigger */
.demo{ padding:24px }
.demo .open{ height:48px; padding:0 16px; border-radius:12px; border:0; background:#111; color:#fff; font-weight:700; }


@media (max-width:1920px) {
    .modal__btn {
        display: block;
        width: 100%;
        height: 48px;
        border: 0;
        border-radius: 8px;
        color: #FFF;
        font-size: 2.25rem;
        font-weight: 700;
        letter-spacing: -0.1125rem;
        cursor: pointer;
        background: var(--colorD42A54);
    }
    .modal {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        max-width: 440px;
        margin: 0 auto;
        overflow: hidden;
    }
    .modal__panel {
        position: relative;
        width: 40rem;
        background: var(--colorfff);
        border-radius: 1.25rem;
        padding: 2.5rem;
        transform: scale(.96) translateY(6px);
        opacity: .98;
        transition: transform .18s ease, opacity .18s ease;
    }
}
@media (max-width:320px) {
    .modal__panel {
        position: relative;
        width: 36rem;
        background: var(--colorfff);
        border-radius: 1.25rem;
        padding: 2.5rem;
        transform: scale(.96) translateY(6px);
        opacity: .98;
        transition: transform .18s ease, opacity .18s ease;
    }
}

/* 꿈돌이 모달 추가 */
/* .modal.welcome{opacity: 1; } */
.modal.welcome .modal__panel{
    width: calc(100vw - 7.5rem);
}
.modal.welcome .mo-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* max-height: 400px;  */
    padding: 1rem;
    box-sizing: border-box;
}
.modal.welcome .mo-icon img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.modal.welcome .modal__title{
    color: #EA0142;
    text-align: center;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 130%; /* 6.24rem */
    
}
.modal.welcome .modal__desc{
    font-size: 2.4rem;
    padding: 0;
    padding-bottom: 2.4rem;
}
.mo__btn-wrap{
    display: flex;
    gap: 1rem;
}
.modal.welcome .mo__btn-wrap .modal__btn{font-size: 3rem;}
.modal__btn.btn-line{
    background: #FFF;
    color: #EA0142;
    border: 2px solid #EA0142;
}
@media (max-width:1920px){
    .modal__btn.btn-line{
        border: 1px solid #EA0142;
    }
    .mo__btn-wrap{
        gap: 4px;
    }
    .modal.welcome .modal__panel{
        width: calc(100% - 40px);
    }
    .modal.welcome .mo-icon img{
        display: block;
        width: 100%;
        height: auto;
        max-height: clamp(150px, 45dvh, 220px);
        object-fit: contain;
      }
}
@media (max-width: 360px){
    .modal.welcome .modal__title{
        color: #EA0142;
        text-align: center;
        font-size: 2.7rem;
        font-weight: 800;
        line-height: 130%; /* 6.24rem */
    }
.modal.welcome .mo__btn-wrap .modal__btn{font-size: 2.7rem;}
}


/* 기존 사용자 큐알화면 */
#promo {width: 100vw; height: 100vh; background: #FFF; margin: 0 auto;}
#promo .promo__inner {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#promo .promo__head{display: flex; flex-direction: column; justify-content: center; gap: 3rem; align-items: center; margin-top: 12rem;}
#promo .promo__title{
    color: #000;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.256rem;
}
#promo .promo__subtitle {
    color: #D42A54;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.256rem;
}
#promo .qr__top{margin-top: 3rem; width: 100%; max-width: 21rem;}
#promo .qr__top img {width: 100%;}
#promo .qr__box{
    width: 27rem;
    height: 27rem;
    border-radius: 0.75rem;
    border: 10px solid #D42A54;
    padding: 1rem;
    transform: translateY(-10px);
}
#promo .qr__box img{
    width: 100%;
}
#promo .mascot{width: calc(100% - 12rem); margin-top: 10rem;}
#promo .mascot img{width: 100%;}
@media (max-width:1920px){
    #promo {max-width: 440px; margin: 0 auto;}
}