/* 아이디 찾기 */
.findid {margin-top: 75px;}
.form-wrap {width: 530px; margin: 0 auto;}
.input-wrap .input-item {display: flex; align-items: center; height: 45px; border: 1px solid #ddd; padding: 8px 0; box-sizing: border-box; font-size: 15px; margin-bottom: 16px;}
.input-wrap .input-item:last-child {margin-bottom: 0;}
.input-wrap .input-item > label {width: 116px; height: 100%; line-height: 27px; border-right: 1px solid #ddd; padding: 0 5px 0 20px; box-sizing: border-box;}
.input-wrap .input-item.label-long > label {width: 148px;}
.input-wrap .input-item .input-radio {margin-left: 26px; display: flex; width: calc(100% - 116px); gap: 5%;}
.input-wrap .input-item .input-radio .radio-item {display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500;}
.input-wrap .input-item .input-radio input:checked + label {color: #42ade2;}
.input-wrap .input-item .input-text {width: calc(100% - 116px); position: relative;}
.input-wrap .input-item.label-long .input-text {width: calc(100% - 150px);}
.input-wrap .input-item .input-text.has-btn {display: grid; grid-template-columns: 3fr auto; gap: 3px; padding-right: 6px; box-sizing: border-box;}
.input-wrap .input-item .input-text input {border: none; width: 100%; height: 100%; background-color: transparent; padding: 0 15px 0 26px; box-sizing: border-box; font-size: 14px;}
.input-wrap .input-item .input-text input::placeholder {color: #999; font-weight: 300;}
.input-wrap .input-item .input-text.has-btn .btn-normal {height: 30px;}
.input-wrap .input-item .input-file input {text-align: right;}
.input-wrap .email {display: flex; gap: 7px;}
.input-wrap .email .input-item .input-text {display: flex; align-items: center; gap: 2px;}
.input-wrap .email .input-item .input-text input:first-child {padding: 0 5px 0 26px;}
.input-wrap .email .input-item .input-text input:nth-child(3) {padding: 0 5px}
.input-wrap .email select {width: 140px; height: 45px; line-height: 15px; color: #333;}
.input-file .file-name {appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #999;}
.input-file input[type=file] {position: absolute; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.input-file label {line-height: 27px;}
.form-wrap .btn-wrap {margin-top: 35px;}
.input-item-top {color: #999; margin-bottom: 10px; font-size: 14px;}

/* 회원가입 */
.join01 {margin-top: 75px;}
.join02 {margin-top: 35px;}
.join03 {margin-top: 55px;}
.join-step {position: relative;}

.card-radio {display: flex; justify-content: center; gap: 20px;}
.card-radio .card-item .card-content-wrap {position: relative; width: 245px; height: 195px; background-color: #ebebeb; border-radius: 15px; padding: 25px 0; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; transform: .3s all ease;}
.card-radio .card-item .card-content-wrap .ico-check {position: absolute; top: 10px; right: 15px; display: none; transition: .3s all ease;}
.card-radio .card-item .card-content-wrap .card-content .card-content-img {width: 80px; height: 80px; border-radius: 100%; margin: 0 auto 10px; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.card-radio .card-item .card-content-wrap .card-content h4 {font-size: 13px; font-weight: 400; margin-bottom: 8px;}
.card-radio .card-item .card-content-wrap .card-content h3 {font-size: 18px;}
.card-radio .card-item input[type=radio]:checked + .card-content-wrap {background-color: #42ade2; color: #fff; transition: .3s all ease;}
.card-radio .card-item input[type=radio]:checked + .card-content-wrap .ico-check {display: block; transform: .3s all ease;}
.link-login {font-size: 14px; margin: 55px auto 0; text-align: center;}
.link-login a {color: #42ade2; margin-left: 10px;}

.step01 {text-align: center;}
.step01 .msg {display: inline-block; position: relative; color: #fff; font-size: 12px; margin: 25px auto 0; height: 30px; padding: 0 8px; line-height: 30px; background-color: #5b5959; border-radius: 4px;}
.step01 .msg::after {position: absolute; display: block; content: ''; top: -17px; right: 5%; background-color: transparent; border-left: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #5b5959}
.step02 {width: 530px; margin: 50px auto 0;}
.step02 .terms-wrap .terms-box {margin-bottom: 34px;}
.step02 .terms-wrap .terms-box:last-child {margin-bottom: 0;}
.step02 .terms-wrap .terms-box h3 {text-align: left; font-size: 16px; margin-bottom: 10px;}
.step02 .terms-wrap .terms-box .terms-con {border: 1px solid #ddd; background-color: #f9f9f9; height: 210px; overflow-y: auto; padding: 10px; box-sizing: border-box; margin-bottom: 18px;}
.step02 .terms-wrap .terms-check label {font-size: 13px;}
.step02 .btn-wrap {margin-top: 50px;}

/* 계정 잠금 해제 모달 */
.login-unlock-dim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.login-unlock-dialog {
    width: 530px;
    max-width: 100%;
    background: #fff;
    padding: 32px 28px 28px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.login-unlock-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #222;
}
.login-unlock-msg {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 22px;
    text-align: left;
}
.login-unlock-field label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}
.login-unlock-field input {
    width: 100%;
    height: 45px;
    border: 1px solid #ddd;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 14px;
}
.login-unlock-btns {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}
.login-unlock-btns-row {
    flex-wrap: wrap;
}
.login-unlock-btn {
    min-width: 120px;
    height: 40px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}
.login-unlock-btn.primary {
    background: #42ade2;
    color: #fff;
}
.login-unlock-btn.secondary {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}
.login-unlock-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.login-otp-hp {
    height: 45px;
    border: 1px solid #ddd;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 14px;
    display: flex;
    align-items: center;
    background: #f7f7f7;
    color: #333;
}
.login-otp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.login-otp-time {
    color: #e14c4c;
    font-size: 14px;
    font-weight: 600;
}

.step03 {width: 530px; margin: 18px auto 0;}
.step03 .join-desc {font-weight: 300; line-height: 145%; font-size: 15px; margin-bottom: 30px; text-align: center;}
.step03 .title {font-size: 14px; color: #42ade2; margin-bottom: 20px;}
.step03 .btn-wrap {margin-top: 25px;}
.step03 .btn-wrap button:nth-child(2) {padding: 0 45px;}

/* 로그인 */
.content-wrap > .left > div, .side-user-wrap .side-user > div {width: 100%; height: 685px; border-radius: 8px; border: 1px solid #ddd; padding: 50px 20px 40px 20px; box-sizing: border-box;}
.content-wrap > .left > div .login-input input::placeholder {background-position: 0px 50%; padding-left: 25px;}
.content-wrap > .left > div .login-input input[type=text]::placeholder {background-image: url(../images/main/ico_id.png); background-repeat: no-repeat; background-size: 15px;}
.content-wrap > .left > div .login-check {margin-bottom: 20px;}
.content-wrap > .left > div .number-wrap {margin-bottom: 30px;}
.content-wrap > .left > div .btn-wrap, .content-wrap .left > div .btn-wrap  {display: block; margin-bottom: 24px;}
.content-wrap > .left > div .btn-wrap button, .content-wrap .left > div .btn-wrap button {width: 100%; height: 35px; box-sizing: border-box; margin-bottom: 8px;}
.content-wrap > .left > div .btn-wrap button:last-child, .content-wrap .left > div .btn-wrap button:last-child {letter-spacing: -0.5px;}
.content-wrap > .left > div .btn-wrap button img, .content-wrap .left > div .btn-wrap button img {height: 18px;}
.content-wrap > .left > div .btn-normal, .content-wrap .left > div .btn-normal {background-color: #42ADE2; border-radius: 8px; color: #fff; cursor: pointer; font-size: 16px; font-weight: 600; border: 2px solid #42ADE2; display: inline-flex; justify-content: center; align-items: center; gap: 10px;}
.content-wrap > .left > div .btn-white, .content-wrap .left > div .btn-white {background-color: #fff; color: #42ADE2; border: 2px solid #42ADE2;}
.content-wrap > .left > div .link-wrap, .content-wrap .left > div .link-wrap {margin-bottom: 50px;}
.content-wrap > .left > div .number, .content-wrap .left > div .number {display: inline-flex; gap: 10px; font-size: 27px; font-weight: 900; margin-bottom: 28px; color: #4cade2;}
.content-wrap > .left > div .number img, .content-wrap .left > div .number img {height: 30px;}
.content-wrap > .left > div .time, .content-wrap .left > div .time {background-color: #efefef; border-radius: 9px; padding: 25px 30px; font-size: 16px; line-height: 160%;}