@import url("./normalize.css");
@import url("./theme.css");
@import url("./base.css");




/*
margin은 object와 화면 사이 간격
padding은 object내 간격 

*/

/*버튼 속성*/
.full {
    width: 100%;
    font-size: var(--text-md);
    letter-spacing: --text-spacing-base;
    font-weight: 700;
    height: 52px;
    line-height: 50px;
    border-radius: var(--border-radius-base);
}

.login_button {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    background-color: #fff;
    margin-top: var(--spacing-md);
    -ms-flex-item-align: start;
    align-self: flex-start;
}

/*23.5.30 추가*/
.solid.disabled {
  background-color: var(--disabled-color);
  color: #fff;
  cursor: default;
}




/* 공통 로그인 영역 */


.login_container {
    display: flex;
    justify-content: center;
    margin :var(--spacing-base) auto;
    padding : var(--spacing-base) var(--spacing-base);
    width: 100%;
    max-width: var(--container-width);
}


.login_area { 
   /* margin: var(--spacing-base) auto; */
    padding: var(--spacing-lg) var(--spacing-lg);
    width: 100%;
    max-width: var( --small-container-width);
    background : white;
    border: thin solid var(--main-item-border-color);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.14);
    border-radius : 6px;
}


.login_title:before { 
    /*content: "";
    display: inline-block;
    width: 250px;
    height: 56px;*/
    /*background: url(https://kream.co.kr/_nuxt/img/login_title.9f9ccc8.png)  no-repeat;*/
   /* background-size: 250px 56px;*/
}

.login_title {
    padding-top : var(--spacing-lg);
    padding-bottom : var(--spacing-lg);
    text-align : center;
    font-size : var(--text-2xl);
    font-weight : 700;
}

.input_box {
    width: 100%;
    position: relative;
    padding: var(--spacing-sm) 0;
}

.input_title {
    font-size: var(--text-md);
    letter-spacing: -0.007rem;
    line-height: 1.8rem;
}

.input_item {
    width: 100%;
    position: relative;
    padding: var(--spacing-xs);
}


.input_txt {
    padding: var(--spacing-xs) var(--spacing-base);
    width: 100%;
    font-size: var(--text-base);
    letter-spacing: -.015rem;
    border:0;
    border-bottom: 0.1rem solid var(--main-item-border-color);
}


/*로그인 박스*/
.login_btn_box {
    padding-top: var(--spacing-md);
}

.login_btn_box .login_button+.login_button {
    margin-top: var(--spacing-sm);
}

.solid {
    background-color: var(--primary-color);
    color: #fff;
}

.login_button.btn_login_naver {
    margin-top: var(--spacing-xs);
    position: relative;
    background-color: #03C75A;
    color: white;
}



/*카카오 로그인 버튼*/
.login_button.btn_login_kakao {
    margin-top: var(--spacing-xs);
    position: relative;
    background-color: #ffeb00;
    color: #191919;
}

/* 로그인 아이콘 + 문구 컨테이너 */
.login-icon-container{
    display : flex;
    gap : var(--spacing-sm);
    align-items : center;
    justify-content: center;
    justify-items : center;
}

.login-logo-icon{
    width : 48px;
    height : 48px;
}

/* 공통영역 아이디,비밀번호 찾기*/
.look_box {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
/*    display: -webkit-box;
    display: -ms-flexbox;
  */
    display: flex;
/*    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly; */
    justify-content: space-evenly;
}

.look_link {
    margin: auto;
    padding: 0 1rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: var(--text-base);
    letter-spacing: -.007rem;
    white-space : nowrap;
}

.look_list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.look_list+.look_list:before {
    content: "";
    margin-top: .3rem;
    display: inline-block;
    width: .1rem;
    height: 1.3rem;
    background-color: #d3d3d3;
}


.login-box-divider{
    position: relative;
    padding: 20px;
    border: none;
    text-align: center;
}

.login-box-divider-line{
    position: absolute;
    border : 1px solid black;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}

.login-box-divider h5{
    position: relative;
    z-index: 1;
    background-color: white;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/*모바일 버젼*/

@media (max-width: 767px){

    /*모바일 로그인 가장 껍데기 */
    .login_area {
        padding: var(--spacing-base) var(--spacing-lg);
    }

    /**/
    .look_link {
        padding: 0 0.5rem;
        font-size: var(--text-sm);
    }

    /* 모바일 로그인창 전체적으로 크기 조금씩 줄이기 */
    .login_title {
        padding-top: var(--spacing-base);
        padding-bottom: var(--spacing-base);
        font-size: var(--text-xl);
    }

    .login_btn_box {
        padding-top: var(--spacing-base);
    }

    .login_button {
        margin-top: var(--spacing-base);
    }



    .login-box-divider{
        position: relative;
        padding: 16px;
        border: none;
        text-align: center;
    }

    .look_box{
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-base);
    }

    /* 모바일 로그인버튼 크기 조정 */
    .full{
        height: 48px;
        line-height : 48px;
    }


    .login-logo-icon {
        width: 32px;
        height: 32px;
    }


}