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

body {
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    min-height: 100vh;

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

.login-container {
    width: 100%;
    padding: 20px;
}

.login-card {

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

    margin: auto;

    background: white;

    border-radius: 18px;

    padding: 50px 40px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    text-align: center;
}

.logo{

    width:120px;
    margin-bottom:25px;

}

.login-card h1{

    font-size:30px;
    font-weight:700;

    color:#1e293b;

    margin-bottom:12px;

}

.description{

    color:#64748b;

    margin-bottom:35px;

    line-height:1.6;

    font-size:15px;

}

input{

    width:100%;

    padding:16px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:16px;

    transition:.2s;

    margin-bottom:20px;

}

input:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

button:hover{

    background:#1d4ed8;

}

#errorMessage{

    color:#ef4444;

    margin-top:18px;

    min-height:20px;

    font-size:14px;

}

@media (max-width:600px){

.login-card{

    padding:35px 25px;

}

.login-card h1{

    font-size:26px;

}

}