@charset "utf-8";
section{
    width: 100%;
}

#login-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 150px 0;
}

#login-box div p{
    display: inline-block;
    width: 60px;
    margin-right:20px;
}

#login-box div{
    display: flex;
    align-items: center;
}

#login-box input{
    padding: 10px 20px;
}

#login-box #error{
    margin-top: 50px;
    color: var(--color-status-negative, #EB3017);
}

.login_input_box {
    color: var(--color-text-normal, #484B51);
    display: flex;
    width: 384px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.input_label {
    align-self: stretch;
}

.login_input {
    display: flex;
    padding: 20px;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--color-line-normal, #E4E5E7);
}

input:focus-visible {
    outline-width: 0;
    border: 1px solid var(--color-line-focus, #484B51);
}

.underlined-text {
    position: relative;
    display: inline-block;
    color: white; /* Adjust color as needed */
}

.underlined-text::after {
    content: "";
    position: absolute;
    width: 80%; /* Set the underline width to 80% */
    height: 2px; /* Adjust thickness of the underline */
    bottom: -20px; /* Adjust distance between text and underline */
    left: 50%;
    transform: translateX(-50%); /* Center the underline */
    background-color: white; /* Adjust underline color */
}

/*---------------  로그인버튼  ---------------*/
.btn_login {
    display: flex;
    width: 384px;
    height: 65px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--color-primary-normal, #006AB5);
    color: var(--color-text-white, #ffffff);
    text-align: center;
    border: none;
}