.login-container {
    width: 343px;
    /* min-height: 100vh; */
    position: relative;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0px 0;
    left: 25px;
}

.login-content {
    width: 343px;         
    min-height: 450px;        
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 25px;
}

.login-title-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 30px → 15px */
}

.login-title {
    color: #191919;
    font-size: 32px;       /* 64px → 32px */
    font-weight: 700;
    line-height: 50px;     /* 100px → 50px */
    word-break: keep-all;
}

.login-form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 40px → 20px */
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 32px → 16px */
    width: 100%;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 20px → 10px */
    width: 100%;
}

.login-label {
    color: #191919;
    font-size: 16px;      /* 32px → 16px */
    font-weight: 400;
    line-height: 10px;    /* 20px → 10px */
}

.login-input-wrap {
    width: 100%;
    height: 40px;         /* 80px → 40px */
    display: flex;
    align-items: center;

}



.login-input:focus {
    border-color: #225EFF;
    color: #191919;
}

.login-btn-group {
    width: 100%;
    padding-bottom: 5px;   /* 10px → 5px */
    display: flex;
    flex-direction: column;
    gap: 15px;             /* 30px → 15px */
}

.login-btn {
    width: 100%;
    height: 50px;          /* 100px → 50px */
    padding: 6px 10px;     /* 12px 20px → 6px 10px */
    background: #225EFF;
    border-radius: 5px;    /* 10px → 5px */
    color: #fff;
    font-size: 16px;       /* 32px → 16px */
    font-weight: 400;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover {
    background: #1948cc;
}

/* 에러 스타일 */
.login-input-wrap.error {
    border-radius: 8px;
    border: 1px solid #E22323 !important;
    background: #FFF;
}
input:invalid {
    border-style: solid;
}

.login-error {
    margin-top: 6px;
    color: #F00A0A;
    font-family: Pretendard, sans-serif;
    font-size: 12px; /* 24px → 12px (반) */
    font-style: normal;
    font-weight: 400;
    line-height: 9px; /* 18px → 9px */
    letter-spacing: -0.3px; /* -0.6px → -0.3px */
    transition: opacity 0.2s;
}

.login-input-wrap {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    /* border-radius/border 제거 */
}

.login-input {
    width: 100%;
    height: 100%;
    padding: 10px 8px;
    border: 1px solid #D4D4D5;
    border-radius: 4px;
    background: #fff;
    color: #7D7D81;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    line-height: 10px;
    transition: border-color 0.2s;
}
.login-footer {
    width: 343px;
    position: fixed;
    /* left: 0; */
    bottom: 90px;
    
    z-index: 100;
    padding-bottom: 12px;
    align-self: stretch;
    height: 96px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


/* 에러: input에 바로 적용! */
.login-input.error {
    border-color: #E22323 !important;
    border-radius: 8px;
}
@media (max-width: 393px) {
    .login-container {
        width: 92vw;              /* 343px → 92vw */
        min-height: 100vh;
        padding:  0;          /* 90px → 12vh */
        left: 4vw;
    }

    .login-content {
        width: 92vw;              /* 343px → 92vw */
        min-height: 53vh;         /* 450px → 53vh */
        gap: 6vw;                 /* 25px → 6vw */
    }

    .login-title-group {
        gap: 4vw;                 /* 15px → 4vw */
    }

    .login-title {
        font-size: 8vw;           /* 32px → 8vw */
        line-height: 13vw;        /* 50px → 13vw */
    }

    .login-form-group {
        gap: 5vw;                 /* 20px → 5vw */
    }

    .login-form {
        gap: 6vw;                 /* 25px → 6vw */
    }

    .login-input-group {
        gap: 2.5vw;               /* 10px → 2.5vw */
    }

    .login-label {
        font-size: 4vw;           /* 16px → 4vw */
        line-height: 2.8vw;       /* 10px → 2.8vw */
    }

    .login-input-wrap {
        height: 10vw;             /* 40px → 10vw */
    }

    .login-btn-group {
        padding-bottom: 1.5vw;    /* 5px → 1.5vw */
        gap: 4vw;                 /* 15px → 4vw */
    }

    .login-btn {
        height: 13vw;             /* 50px → 13vw */
        padding: 1.8vw 3vw;       /* 6px 10px → 1.8vw 3vw */
        border-radius: 1.3vw;     /* 5px → 1.3vw */
        font-size: 4vw;           /* 16px → 4vw */
    }

    .login-error {
        margin-top: 1.6vw;        /* 6px → 1.6vw */
        font-size: 3vw;           /* 12px → 3vw */
        line-height: 2.3vw;       /* 9px → 2.3vw */
        letter-spacing: -0.12vw;  /* -0.3px → -0.12vw */
    }

    .login-input {
        padding: 2.5vw 2vw;       /* 10px 8px → 2.5vw 2vw */
        border-radius: 1.1vw;     /* 4px → 1.1vw */
        font-size: 3.5vw;         /* 14px → 3.5vw */
        line-height: 2.5vw;       /* 10px → 2.5vw */
        box-sizing: border-box;
    }
    .login-footer {
        width: 92vw;              /* 343px → 92vw */
        position: fixed;
        /* left: 0; */
        bottom: 5vh;
        
        z-index: 100;
        padding-bottom: 12px;
        align-self: stretch;
        height: 5.6vh;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}