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

body{

    font-family:Pretendard,sans-serif;

    background:

    linear-gradient(
    180deg,
    #dcecff 0%,
    #eef6ff 100%);

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.login-card{

    width:430px;

    background:white;

    border-radius:35px;

    padding:135px 40px 40px;

    box-shadow:
    0 30px 70px
    rgba(46,79,140,.18);

    position:relative;

    text-align:center;

}

.mascot{

    position:absolute;

    width:360px;

    max-width:85%;

    top:-20px;

    left:50%;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:5;

}


h1{

    font-size:42px;

    color:#1d3f86;

    margin-bottom:10px;

}

.sub-text{

    color:#7b8aa8;

    margin-bottom:35px;

}

input{

    width:100%;

    height:58px;

    margin-bottom:14px;

    border-radius:16px;

    border:2px solid #edf2fb;

    padding:0 18px;

    font-size:17px;

    transition:.25s;

}

input:focus{

    outline:none;

    border-color:#4c79ff;

    box-shadow:0 0 18px rgba(74,123,255,.18);

}

#login-error{

    color:#ff4d4f;

    min-height:20px;

    margin-bottom:12px;

    font-size:14px;

}

button{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:

    linear-gradient(
    90deg,
    #4b7dff,
    #2d63ef);

    color:white;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

button:hover{

    background:
    linear-gradient(
    90deg,
    #3b6bf7,
    #2754d8);

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 12px 30px
        rgba(59,107,247,.35);

}

.footer{

    margin-top:25px;

    color:#8b97b6;

    font-size:14px;

}