@charset "UTF-8";
:root {
    --input-height: 48px;
}

input[type="text"],
input[type="email"],
input[type="password"] { height: var(--input-height); }

.main { min-width: 0; min-height: 100%; display: flex; justify-content: center; }

.auth h2 { text-align: center; font-size: 30px; letter-spacing: 1px; }
.auth .submit-group button { padding: 0 16px; width: 100%; height: 50px; border-radius: 8px; letter-spacing: 1px; font-size: 1.1rem; font-weight: 500; }

.auth .field-group { margin-top: 30px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.auth .link-group { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; }
.auth .form-label { padding-left: 4px; padding-bottom: 4px; font-weight: 600; }

.auth .form-flex { display: flex; gap: 8px; }
.auth .flex-middle { align-items: center; }
.auth .flex-1 { flex: 1; }
.auth .form-group button { height: var(--input-height); border-radius: 8px; font-size: 1rem; }

.sign .terms-group input[type="checkbox"] + label { position: relative; margin: 0; padding-left: 24px; width: 100%; height: 32px; line-height: 32px; display: block; font-size: 15px}
.sign .terms-group input[type="checkbox"] + label::before{position: absolute; left: 0; top: 50%; content:""; width: 20px; height: 20px; display: block; border: 1px solid #e7e7e9; border-radius: 5px; transform: translateY(-50%)}
.sign .terms-group input[type="checkbox"]:checked + label::before{position: absolute; left:0; top: 50%; content: '✔'; line-height: 18px; width: 20px; height: 20px; display: block; font-size: 14px; border: 1px solid #587ec7; color: #587ec7; text-align: center; transform: translateY(-50%);}
.sign .terms-group button { padding: 0 8px; height: 28px; font-size: 14px; border-radius: 4px; }

.sign button.overlap { padding: 0 16px; }

.forget .summary { margin-top: 30px; line-height: 1.5; }

/* 모바일 */
@media screen and (max-width: 1024px) {

    .main { padding: 30px 0; align-items: center; }
    .main .auth { padding: 0 16px;  width: 100%; }
}

/* PC */
@media screen and (min-width: 1025px) {

    .main { align-items: center; }
    .main .auth { padding: 30px; width: 360px; border: 1px solid rgb(241, 245, 249); border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px; }
}