/* =========================================================
   PetCity Signup CSS
   Version : 2.0
   Updated : 2026-07-15
========================================================= */

/* =========================
   Reset
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}

/* =========================
   Layout
========================= */

.signup-section{

    width:100%;
    background:#f5f7fb;
    padding:54px 20px 80px;
    display:flex;
    justify-content:center;

}

.signup-container{

    width:min(1180px, 100%);
    margin:0;
    background:#fff;
    display:flex;
    align-items:stretch;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

/* =========================
   Left
========================= */

.signup-left{

    width:45%;
    background:#eef6ff;
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;

}

.signup-image{

    width:320px;
    display:block;
    margin:0 auto 40px;

}

.signup-left h2{

    font-size:36px;
    line-height:1.4;
    margin-bottom:20px;

}

.signup-left p{

    color:#666;
    margin-bottom:30px;

}

.signup-left ul{

    list-style:none;

}

.signup-left li{

    margin:15px 0;
    font-size:17px;

}

/* =========================
   Right
========================= */

.signup-right{

    width:55%;
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;

}

.signup-right h1{

    font-size:38px;
    margin-bottom:10px;

}

.signup-right>p{

    color:#777;
    margin-bottom:35px;

}

.signup-right form{

    width:100%;

}

/* =========================
   Form
========================= */

.form-control{

    margin-bottom:22px;

}

.label{

    display:block;
    margin-bottom:8px;

}

.label-text{

    font-size:15px;
    font-weight:600;
    color:#333;

}

.label-text-alt{

    display:block;
    margin-top:6px;
    font-size:13px;

}

/* =========================
   Input
========================= */

.input{

    width:100%;
    height:52px;
    padding:0 16px;

    border:1px solid #dcdfe6;
    border-radius:10px;

    outline:none;

    font-size:15px;

    transition:.25s;

}

.input:focus{

    border-color:#2f6fed;
    box-shadow:0 0 0 4px rgba(47,111,237,.12);

}

/* =========================
   Input + Button
========================= */

.id-check-wrap{

    display:flex;
    align-items:center;
    gap:10px;

}

.id-check-wrap input{

    flex:1;

}

/* =========================
   Check Button
========================= */

.check-btn{

    width:100px;
    min-width:100px;
    height:52px;

    border:none;
    border-radius:10px;

    background:#2f6fed;
    color:#fff;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.check-btn:hover{

    background:#2458bf;

}

/* =========================
   Message
========================= */

.check-message{

    margin-top:8px;

    font-size:13px;
    font-weight:600;

    min-height:18px;

}

.text-success{

    color:#16a34a;

}

.text-error{

    color:#dc2626;

}

/* =========================
   Agreement
========================= */

.agreement-box{

    margin:30px 0;

    padding:18px;

    border:1px solid #dcdfe6;

    border-radius:10px;

    background:#fafcff;

}

.agreement-label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

}

.agreement-label input{

    width:18px;

    height:18px;

}

.agreement-desc{

    margin-top:10px;

    margin-left:28px;

    color:#666;

    font-size:13px;

    line-height:1.6;

}

/* =========================
   SNS Button
========================= */

.sns-btn{

    display:block;

    width:100%;

    text-align:center;

    padding:18px;

    margin-bottom:15px;

    border-radius:10px;

    font-size:17px;

    font-weight:bold;

    transition:.25s;

}

.sns-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.google{

    border:1px solid #ddd;

    background:#fff;

    color:#222;

}

.kakao{

    background:#FEE500;

    color:#111;

}

.naver{

    background:#03C75A;

    color:#fff;

}

/* =========================
   Normal Button
========================= */

.normal-btn,
button.normal-btn{

    display:block;
    width:100%;

    height:54px;
    line-height:54px;
    text-align:center;
    padding:0;

    border:none;

    border-radius:10px;

    background:#2f6fed;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.normal-btn:hover{

    background:#2458bf;

}

/* =========================
   Divider
========================= */

.divider{

    position:relative;

    text-align:center;

    margin:40px 0;

}

.divider::before{

    content:"";

    position:absolute;

    top:50%;

    left:0;

    width:100%;

    height:1px;

    background:#ddd;

}

.divider span{

    position:relative;

    background:#fff;

    padding:0 16px;

    color:#666;

}

/* =========================
   Login Link
========================= */

.login-link{

    margin-top:30px;

    text-align:center;

    color:#666;

}

.login-link a{

    color:#2f6fed;

    font-weight:700;

}

.login-link a:hover{

    text-decoration:underline;

}

/* =========================
   Alert
========================= */

.alert{

    width:100%;

    padding:15px;

    margin-bottom:25px;

    border-radius:10px;

    border:1px solid #ffcaca;

    background:#ffecec;

    color:#d8000c;

}

/* =========================
   Responsive
========================= */

@media (max-width:1200px){

    .signup-container{

        width:95%;

    }

}

@media (max-width:900px){

    .signup-container{

        flex-direction:column;

    }

    .signup-left,
    .signup-right{

        width:100%;

    }

    .signup-left{

        padding:40px;

    }

    .signup-right{

        padding:40px;

    }

    .signup-image{

        width:220px;

    }

}

@media (max-width:600px){

    .signup-section{

        padding:25px 10px;

    }

    .signup-left,
    .signup-right{

        padding:25px;

    }

    .signup-right h1{

        font-size:30px;

    }

    .signup-left h2{

        font-size:28px;

    }

    .id-check-wrap{

        flex-direction:column;

        align-items:stretch;

    }

    .check-btn{

        width:100%;

        min-width:100%;

        height:48px;

    }

    .agreement-label{

        align-items:flex-start;

    }

}

/* 07-16 상각: 가입 단계별 버튼 색상 구분 */
/* 07-16 상각: 가입 카드와 일반 회원가입 버튼의 중앙 정렬 보정 */
.signup-right > *{ width:100%; }
.signup-right .login-link{ width:auto; }

#checkLoginIdBtn{ background:#2f6fed; color:#fff; }
#checkLoginIdBtn:hover{ background:#2458bf; }

#checkNicknameBtn{ background:#f59e0b; color:#fff; }
#checkNicknameBtn:hover{ background:#d97706; }

#checkEmailBtn{ background:#0f9f8f; color:#fff; }
#checkEmailBtn:hover{ background:#0b7f73; }

#sendEmailCodeBtn{ background:#7c3aed; color:#fff; }
#sendEmailCodeBtn:hover{ background:#6430c5; }
#sendEmailCodeBtn.is-verifying{ background:#e95c84; }
#sendEmailCodeBtn.is-verifying:hover{ background:#cf3f69; }
#sendEmailCodeBtn.is-complete{ background:#16a34a; opacity:1; }

.check-btn:disabled{
    background:#e2e8f0;
    color:#64748b;
    -webkit-text-fill-color:#64748b;
    cursor:not-allowed;
    opacity:1;
}

#checkEmailBtn:disabled,
#sendEmailCodeBtn:disabled{
    background:#e2e8f0;
    color:#64748b;
    -webkit-text-fill-color:#64748b;
}

/* 비밀번호 입력창과 보기 버튼 */

.password-input-wrap {
    position: relative;
    width: 100%;
}

.password-input-wrap .input {
    width: 100%;
    padding-right: 72px;
    box-sizing: border-box;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);

    border: none;
    background: transparent;
    color: #2563eb;

    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle-btn:hover {
    text-decoration: underline;
}