@charset "utf-8";
/* @import url(reset.css); */
/* @import url(font.css); */
/* @import url(common.css); */
/* @import "modal-alert.css"; */

/* 
참고사항
1. input값 에러일때
    1) 부모 .input-group에 .error 추가 -> input에 border 생성
    2) .txt-error 에 .on 추가 -> 에러 메세지 생성

2. 비활성화
    1) 해당 요소에 .disabled 클래스 추가
*/

* {
    font: var(--font-title-sm-bold);
    color: var(--txt-default);
}

body {
    background: linear-gradient(var(--bg-defalt) 70%, var(--gray-90));
    position: relative;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
}


/* 로그인 페이지 */
.login-wrap {
    height: 100%;
    width: 100%;
    padding: 10vh 16px;
    overflow-y: auto;
}

.login-wrap h1 {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    color: var(--blue);
    font: var(--font-title-lg-bold);
    cursor: pointer;
}

.login-wrap h1 span {
    position: absolute;
    left: 50%;
    top: calc(100% + 5px);
    transform: translateX(-50%);
    font: var(--font-title-sm-bold);
}

.login-wrap form {
    max-width: 400px;
    margin: 0 auto;
    height: auto;
}

.login-wrap .txt-error {
    margin-top: 0;
    margin-bottom: 12px;
}

.btn-find {
    font: var(--font-body-bold);
    color: var(--txt-default);
}

.btn-form {
    margin-top: 40px;
}

/* 인증번호 관련 */
.code {
    display: none;
    margin-top: 45px;
    margin-bottom: 200px;
}

.txt-time {
    position: absolute;
    right: 16px;
    bottom: 16px;
    color: var(--red);
}

.icon-check {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 2rem;
    color: var(--green);
    display: none;
}

.icon-check i {
    color: var(--green); 
}

.btn-goto-change {
    margin-top: 10px;
    display: none;
}

/* 새 비밀번호 작성 페이지 */
.find-2 {
    display: none;
}

.pw-masking{
    display: inline-block;
    position: absolute;
    top: 52%;
    right: 14px;
    color : #c5c5c5;
}

.pw-masking i{
    font-size : 24px;
}

.pw-masking:not(.on) .fa-regular.fa-eye{
    color : #c5c5c5;
}

.pw-masking.on .fa-regular.fa-eye{
    color : #000000;
}

@media (max-width: 500px) {
    .login-wrap h1 {
        margin-bottom: 30px;
    }
    .txt-time {
        bottom: 12px;
    }
}