/* =========================================================
   RESET
========================================================= */

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

html{
    font-size:16px;
}

body{
    font-family:
        "Pretendard",
        "Noto Sans KR",
        sans-serif;

    background:#cdd3ee;
    color:#222;

    display:flex;
    justify-content:center;

    min-height:100vh;
}

button{
    font:inherit;
    cursor:pointer;
    border:none;
    background:none;
}

img{
    display:block;
    width:100%;
    user-select:none;
}


/* =========================================================
   APP
========================================================= */

#app{

    width:100%;
    max-width:430px;

    min-height:100vh;

    background:white;

    display:flex;
    flex-direction:column;

    padding:24px;

    position:relative;
}


/* =========================================================
   HEADER
========================================================= */

#header{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;
}

#logo{

    width:240px;
}

#eventTitle{

    font-size:28px;
    font-weight:700;
}

#eventSubTitle{

    font-size:14px;
    color:#666;

    text-align:center;
}


/* =========================================================
   PROGRESS
========================================================= */

#progressSection{

    display:flex;
    justify-content:center;

    margin-top:24px;
}

#progressBadge{

    padding:8px 20px;

    border-radius:999px;

    background:#cdd3ee;

    font-size:20px;
    font-weight:700;
}


/* =========================================================
   CHARACTER
========================================================= */

#characterSection{

    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:30px;
}

#characterStage{

    position:relative;

    width:100%;
    max-width:300px;

    aspect-ratio:3 / 4;
}

#characterStage img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
}

#baseCharacter{

    z-index:1;
}

#layer01{z-index:2;}
#layer02{z-index:3;}
#layer03{z-index:4;}
#layer04{z-index:5;}
#layer05{z-index:6;}
#layer06{z-index:7;}


/* =========================================================
   BUTTONS
========================================================= */

#buttonSection{

    display:flex;
    flex-direction:column;

    gap:12px;

    margin-top:20px;
}

.mainButton{

    height:52px;

    border-radius:14px;

    background:#888fc1;

    color:white;

    font-size:16px;
    font-weight:600;

    transition:.2s;
}

.mainButton:hover{

    transform:translateY(-2px);
}

.mainButton:active{

    transform:scale(.98);
}

.mainButton:disabled{

    background:#cdd3ee;

    cursor:not-allowed;
}


/* =========================================================
   DIM
========================================================= */

#dim{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:100;
}

#dim.show{

    opacity:1;
    visibility:visible;
}


/* =========================================================
   POPUP
========================================================= */

#popupContainer{

    position:fixed;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%) scale(.9);

    width:90%;
    max-width:380px;

    background:white;

    border-radius:20px;

    padding:24px;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:101;

    box-shadow:
    0 15px 40px rgba(0,0,0,.18);
}

#popupContainer.show{

    opacity:1;

    visibility:visible;

    transform:translate(-50%,-50%) scale(1);
}


/* =========================================================
   TOAST
========================================================= */

#toast{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    background:#222;

    color:white;

    padding:12px 20px;

    border-radius:999px;

    opacity:0;

    transition:.3s;

    pointer-events:none;

    z-index:999;
}

#toast.show{

    opacity:1;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:430px){

    #app{

        padding:20px;
    }

    #characterStage{

        max-width:260px;
    }

}

/* =========================================================
   DESCRIPTION
========================================================= */

.popupDescription{
    white-space: pre-line;
    line-height:1.6;
}