@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

body { background: #fff !important; font-family: 'Pretendard', sans-serif; }

#mb_login { display: flex; justify-content: center; padding: 90px 20px 100px; }

.borderbox {
    width: 25%;
    min-width: 375px;
    background: #fff;
    border: 1px solid #1E447C;
    border-radius: 20px;
    padding: 60px 0;
    position: relative;
}

/* 탭 */
.borderbox .tab_area { display: flex; justify-content: space-between; margin-bottom: 32px; list-style: none; padding: 0; margin-left: 0; }
.borderbox .tab_area li { width: 50%; }
.borderbox .tab_area li h2 { margin-bottom: 0; }
.borderbox .tab_area li .tab {
    display: block;
    color: #AAADB0;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.02em;
    padding: 12px 0 14px;
    white-space: nowrap;
    border-bottom: 1px solid #E2E2E2;
    transition: all .1s;
}
.borderbox .tab_area li .tab.on,
.borderbox .tab_area li .tab:hover { color: #1E447C; border-color: #1E447C; }

/* 폼 영역 */
.borderbox form { padding: 0 5%; }

/* 입력 필드 */
.borderbox .login .info { list-style: none; padding: 0; }
.borderbox .login .info li:not(:last-child) { margin-bottom: 20px; }
.borderbox .login .info li > div { position: relative; }
.borderbox .login .info li > div::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: 24px;
    left: 0;
}
.borderbox .login .info li:nth-child(1) > div::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.borderbox .login .info li:nth-child(2) > div::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.borderbox .login .info li > div label {
    display: block;
    color: #161718;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -1px;
}
.borderbox .login .info li > div input {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 23px 0 23px 10%;
    caret-color: #1E447C;
    border: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    line-height: 1em;
    letter-spacing: -1px;
    color: #161718;
    border-bottom: 1px solid #C8C8C8;
    outline: none;
}
.borderbox .login .info li > div input:focus { border-color: #1E447C; }
.borderbox .login .info li > div input::placeholder { color: #C5C7C9; }

/* 아이디 저장 / 비번 찾기 */
.borderbox .login .find {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    font-size: 14px;
    color: #AAADB0;
    letter-spacing: -1px;
}
.borderbox .login .find a { color: #AAADB0; }
.borderbox .login .find a:hover { color: #1E447C; }
.borderbox .login .find .chk_box { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.borderbox .login .find .chk_box input[type=checkbox] { width: 16px; height: 16px; accent-color: #1E447C; cursor: pointer; }
.borderbox .login .find .chk_box label { cursor: pointer; color: #AAADB0; }

/* 버튼 */
.borderbox .wide_btn {
    display: block;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.02em;
    border-radius: 8px;
    transition: all .1s;
    font-family: 'Pretendard', sans-serif;
}
.borderbox .login .btn_area { }
.borderbox .login .btn_area .btn_login {
    background: #214079;
    padding: 20px 0;
    color: #fff;
}
.borderbox .login .btn_area .btn_login:hover { background: #1E447C; }

/* 반응형 */
@media screen and (max-width: 1024px) {
    .borderbox { width: 50%; padding: 60px 0; margin: 50px auto; }
}
@media screen and (max-width: 768px) {
    .borderbox { width: 100%; min-width: auto; border: none; border-radius: 0; padding: 40px 0 80px; margin: 0; }
}

.sound_only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ===== 회원가입 (공통) ===== */
#mb_register { display: flex; justify-content: center; padding: 90px 20px 100px; }

/* ===== 약관동의 (.agree) ===== */
.borderbox .agree { }
.borderbox .agree .agree_section {
    margin-bottom: 14px;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    overflow: hidden;
}
.borderbox .agree .agree_section .agree_title {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #161718;
    background: #F8F9FA;
    border-bottom: 1px solid #E2E2E2;
}
.borderbox .agree .agree_section .agree_title .required { color: #1E447C; margin-right: 4px; }
.borderbox .agree .agree_section .agree_content {}
.borderbox .agree .agree_section .agree_content textarea {
    width: 100%;
    height: 90px;
    border: none;
    resize: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    background: transparent;
    outline: none;
    overflow-y: auto;
    box-sizing: border-box;
}
.borderbox .agree .agree_section .agree_content table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}
.borderbox .agree .agree_section .agree_content table th {
    background: #EEF3FA;
    color: #1E447C;
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #D8E2EF;
    font-weight: 600;
}
.borderbox .agree .agree_section .agree_content table td {
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #E2E2E2;
    color: #555;
    word-break: keep-all;
}
.borderbox .agree .agree_check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    border-top: 1px solid #E2E2E2;
    background: #FAFAFA;
}
.borderbox .agree .agree_check input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #1E447C;
    cursor: pointer;
    flex-shrink: 0;
}
.borderbox .agree .agree_all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #161718;
    border-top: 2px solid #1E447C;
    margin-top: 4px;
}
.borderbox .agree .agree_all input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: #1E447C;
    cursor: pointer;
    flex-shrink: 0;
}
.borderbox .agree .btn_area .btn_agree {
    background: #214079;
    padding: 20px 0;
    color: #fff;
}
.borderbox .agree .btn_area .btn_agree:hover { background: #1E447C; }

/* ===== 회원가입 폼 (.join) ===== */
.borderbox .join .info { list-style: none; padding: 0; margin-bottom: 24px; }
.borderbox .join .info li { margin-bottom: 4px; }
.borderbox .join .info li .field { position: relative; }
.borderbox .join .info li .field::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: contain;
    position: absolute;
    bottom: 18px;
    left: 0;
    z-index: 1;
}
.borderbox .join .info li .field-id::before,
.borderbox .join .info li .field-name::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.borderbox .join .info li .field-pw::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.borderbox .join .info li .field-email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.borderbox .join .info li .field-hp::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAADB0' stroke-width='1.5'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}
.borderbox .join .info li .field label {
    display: block;
    color: #161718;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -1px;
}
.borderbox .join .info li .field input {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 18px 0 18px 10%;
    caret-color: #1E447C;
    border: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    line-height: 1em;
    letter-spacing: -1px;
    color: #161718;
    border-bottom: 1px solid #C8C8C8;
    outline: none;
}
.borderbox .join .info li .field input:focus { border-color: #1E447C; }
.borderbox .join .info li .field input::placeholder { color: #C5C7C9; }
.borderbox .join .info li .warning {
    font-size: 12px;
    color: #E03434;
    margin: 4px 0 6px;
    display: block;
}
.borderbox .join .captcha_wrap { margin-bottom: 20px; text-align: center; }
.borderbox .join .btn_area .btn_join {
    background: #214079;
    color: #fff;
}
.borderbox .join .btn_area .btn_join:hover { background: #1E447C; }
.borderbox .join .info li .guide {
    font-size: 12px;
    color: #AAADB0;
    margin: 5px 0 6px;
    display: block;
    letter-spacing: -0.5px;
}

/* ===== 회원가입 완료 (.result) ===== */
.borderbox .result {
    padding: 0 5%;
    text-align: center;
}
.borderbox .result .result_icon {
    font-size: 60px;
    color: #214079;
    margin-bottom: 28px;
}
.borderbox .result .result_name {
    font-size: 22px;
    font-weight: 700;
    color: #161718;
    line-height: 1.6;
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}
.borderbox .result .result_name strong { color: #1E447C; }
.borderbox .result .result_email_box {
    background: #F3F7FD;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
    text-align: left;
}
.borderbox .result .result_email_row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    padding: 6px 0;
}
.borderbox .result .result_email_row span { color: #AAADB0; min-width: 60px; flex-shrink: 0; }
.borderbox .result .result_email_row strong { color: #161718; }
.borderbox .result .result_txt {
    font-size: 13px;
    color: #888;
    line-height: 1.8;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    text-align: left;
}
.borderbox .result .btn_area { margin-top: 32px; }
.borderbox .result .btn_result {
    background: #214079;
    padding: 18px 0;
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: 'Pretendard', sans-serif;
    transition: background .1s;
}
.borderbox .result .btn_result:hover { background: #1E447C; }