/* =========================================================
   로그인 화면 (login.jpg 참조)
   - 고정 px 미사용 (rem / % / vh)
   ========================================================= */

*{ box-sizing:border-box; }

body.login-page{
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#fff;
    font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
    color:#222;
}

.login-brand{
    text-align:center;
    margin-bottom:2rem;
}
.login-logo{
    height:4rem;
    max-width:100%;
    object-fit:contain;
}
.login-brand h1{
    margin:1rem 0 0;
    font-size:2.25rem;
    font-weight:700;
    letter-spacing:-0.02em;
}

.login-card{
    width:90%;
    max-width:28rem;
    padding:2.5rem;
    border:0.0625rem solid #e5e7eb;
    border-radius:1rem;
    box-shadow:0 0.125rem 0.9rem rgba(0,0,0,.05);
    background:#fff;
}

.login-error{
    margin-bottom:1.5rem;
    text-align:center;
    font-size:0.87rem;
    font-weight:500;
    color:#ef4444;
}

.login-fields{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:2rem;
}
input.underline{
    width:100%;
    padding:0.75rem 0;
    border:none;
    border-bottom:0.0625rem solid #e5e7eb;
    border-radius:0;
    font-size:1rem;
    font-family:inherit;
    color:#374151;
    outline:none;
    transition:border-color .2s;
}
input.underline::placeholder{ color:#9ca3af; }
input.underline:focus{ border-bottom-color:#5FB4DB; }

.keep-login{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-bottom:2rem;
    font-size:0.87rem;
    color:#4b5563;
    cursor:pointer;
}
.keep-login input{
    width:1rem;
    height:1rem;
    accent-color:#5FB4DB;
}

.login-btn{
    width:100%;
    padding:0.9rem;
    border:none;
    border-radius:0.5rem;
    background:#87CEEB;
    color:#1c2733;
    font-size:1.1rem;
    font-family:inherit;
    font-weight:500;
    cursor:pointer;
    transition:background .2s;
}
.login-btn:hover{ background:#5FB4DB; }

.login-links{
    margin-top:2.5rem;
    text-align:center;
    font-size:0.87rem;
    color:#9ca3af;
}
.login-links a{
    color:#9ca3af;
    text-decoration:none;
}
.login-links a:hover{ color:#4b5563; }
.login-links a.join{ color:#3B9AC7; }
.login-links a.join:hover{ color:#2E86C1; }
.login-links span{ margin:0 0.5rem; color:#d1d5db; }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:48rem){
    .login-brand{ margin-bottom:1.5rem; }
    .login-brand h1{ font-size:1.7rem; }
    .login-logo{ height:3.25rem; }
    .login-card{
        width:100%;
        max-width:none;
        padding:1.75rem 1.25rem;
        border:none;
        border-radius:0;
        box-shadow:none;
    }
    body.login-page{
        justify-content:flex-start;
        padding:2.5rem 1rem;
    }
    .login-fields{ margin-bottom:1.5rem; }
    .keep-login{ margin-bottom:1.5rem; }
    .login-links{ margin-top:1.75rem; }
}

@media (max-width:22rem){
    .login-brand h1{ font-size:1.4rem; }
    .login-links span{ margin:0 0.25rem; }
}