@charset "utf-8";
/* ==================================================================================
    [users.css]
        - stylesheets of users page in users folder
================================================================================== */

/* ----------------------------------------------------------------------------------
    style : common
---------------------------------------------------------------------------------- */
/* userForm */
.userForm {

}
.userForm h3 {
    margin: 0 0 30px;
    text-align: center;
    font-weight: 700;
    color: #484848;
}

/* ----------------------------------------------------------------------------------
    style : join
---------------------------------------------------------------------------------- */
.join-area {

}
.join-box {
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
}

.password-progress {
    margin-top: 10px;
    margin-bottom: 0;
}

/* form */
.join-area form {
}
.join-area form .control-group {
    margin: 0 0 20px;
}
.join-area form label {
    margin: 0 0 3px;
    color: #484848;
}


/*copyright form*/

.article.copyrightform .section {
    margin: 0 0 40px;
}
.article.copyrightform .section h2.section-title {
    font-size: 20px;
}
.article.copyrightform .section .btn-area {
    margin: 20px 0 0;
}

.copyright-upload  > div {
    width: 500px;
    margin: 20px 0 0;
    padding: 40px 40px 20px;
    background-color: #fafafa;
    border-radius: 2px;
    border: 1px solid #dfdfdf;
}

/* Select2 width setting */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--multiple {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    width: 100% !important;
}

/* Specific targeting for affiliation field */
#affiliation + .select2-container {
    width: 100% !important;
}

#affiliation + .select2-container .select2-selection {
    width: 100% !important;
}

/* For btn-group container */
.btn-group-justified .select2-container {
    width: 100% !important;
}

.label-group .select2-container {
    width: 100% !important;
}

@media only screen
and (max-width: 768px) {
    .copyright-upload  > div {
        width: 100%;
    }
}

/* ----------------------------------------------------------------------------------
    이메일 인증 UI 스타일
---------------------------------------------------------------------------------- */
.password-hint { font-size: 13px; font-weight: normal; }
.email-input-wrap, .token-input-wrap { display: flex; gap: 8px; align-items: stretch; }
.email-input-wrap input, .token-input-wrap input { flex: 1; min-width: 0; }
.btn-send-token, .btn-verify-token { white-space: nowrap; padding: 6px 14px; font-size: 13.5px; font-weight: 600; }
.btn-send-token:hover { background-color: #e2e8f0; }
.token-input-group { display: none; margin-top: 15px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.email-auth-msg, .token-auth-msg { margin-top: 6px; margin-bottom: 0; font-size: 13px; font-weight: 600; }
.email-auth-msg.success, .token-auth-msg.success { color: #16a34a; }
.email-auth-msg.error, .token-auth-msg.error { color: #dc2626; }
.email-auth-msg.info, .token-auth-msg.info { color: #2563eb; }
.input-verified { background-color: #f1f5f9 !important; color: #475569 !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   반응형 웹 스타일 (~ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .email-input-wrap, .token-input-wrap {
        flex-direction: column;
        gap: 6px;
    }
    .btn-send-token, .btn-verify-token {
        width: 100%;
        padding: 8px 12px;
    }
}