@import "../common/header.css";
@import "../common/footer.css";
@import "../common/section_title.css";
@import "../common/label_hidden.css";
@import "../common/banner.css";


.wrapper_container{
    padding-block:8rem;
}
.sign_in_container {
    position:relative;
    padding:2.5rem 1.7rem;
    border:1px solid rgb(228, 229, 237);
    border-radius: 0.8rem;
    background-color:#fff;
    form {
        display: flex;
        flex-direction: column;
        gap:0.8rem;
        .input_container {
            input {
                width: 100%;
                height: 4.2rem;
                padding-inline: 1.2rem;
                font-size:1.4rem;
                border: 1px solid rgb(228, 229, 237);
                border-radius: 0.8rem;
                cursor: text;
                &::placeholder {
                    color:rgb(228, 229, 237);
                }
            }
            .error_notice {
                display: block;
                width: 100%;
                margin-top: 0.5rem;
                color: #ff402b;
                font-size: 1.4rem;
            }
        }
    }
}
.sign_in_submit_button {
    width:100%;
    height:4.2rem;
    margin-top:0.5rem;
    font-family: var(--font-500);
    font-size:1.6rem;
    background-color:rgba(255,212,0,1);
    border:none;
    border-radius: 0.8rem;
}
.sign_in_state_container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    input{
        display: none;
        &:checked{
            & + label{
                span{
                    background-color:#1d1d1d;
                }
            }
        }
        & + label{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap:0.8rem;
            font-size:1.4rem;
            span{
                display: flex;
                align-items: center;
                justify-content: center;
                width:1.6rem;
                height:1.6rem;
                border-radius: 0.25rem;
                border:1px solid #eee;
            }
        }
    }
    a{
        font-size:1.4rem;
    }
}
.sns_sign_in_container{
    margin-block: 2rem;
    padding:1.6rem;
    border:1px solid rgb(228, 229, 237);
    border-radius: 0.8rem;
    h3{
        font-family: var(--font-700);
        font-size:1.4rem;
    }
    .sns_link_container{
        margin-top:0.8rem;
        display:flex;
        align-items: center;
        justify-content: space-between;
        a{
            display: flex;
            align-items: center;
            justify-content: center;
            width:4.8rem;
            height:4.8rem;
            border-radius: 50%;
            &.naver_sign_in_icon{
                background-color:rgb(30, 200, 0);
            }
            &.kakao_sign_in_icon{
                background-color:rgb(249, 224, 0);
            }
            &.facebook_sign_in_icon{
                background-color:rgb(24, 119, 242);
            }
            &.google_sign_in_icon{
                border:1px solid rgb(228, 229, 237);
            }
            &.apple_sign_in_icon{
                background-color:rgb(0,0,0);
            }
            img{
                display: block;
                width:2.4rem;
            }
        }
    }
}
.sign_up_button{
    display: flex;
    align-items: center;
    justify-content: center;
    height:4.2rem;
    padding:0 2rem;
    font-size:1.6rem;
    border:1px solid rgb(228, 229, 237);
    border-radius: 0.8rem;
}