@charset "utf-8";
.input-wrap {align-items: flex-start;}
input,
.input-relative,
.input-password-box {width: 100%;}
.custom-radio em {font-style: normal;}
.input-wrap label, .input-wrap label span {font-weight: 400; color: #2A2A2A;}
.input-wrap label .required {color: #FFB900;}
.datepicker::-webkit-calendar-picker-indicator {background: url('../img/join-calendar.svg') no-repeat center;}
.custom-chk label span {width: 25px; height: 25px; border-radius: 6px;}
.custom-chk label em {word-break: keep-all; font-size: 14px; font-weight: 500; color: #676767;}
.custom-chk label em b {font-weight: 500; color: #383838;}

.member-section {padding-block: 120px;}
.member-title {text-align: center;}
.member-title h2 {font-family: 'YeogiOttaeJalnanGothic'; font-size: 36px; font-weight: 800; color: #0B1F45;}
.member-title strong {display: block; margin-top: 22px; font-size: 24px; font-weight: 600; color: #111111;}
.member-title p {word-break: keep-all; margin-top: 10px; font-size: 16px; color: #555555;}

.login-section .login-wrap {max-width: 849px; width: 100%; margin-inline: auto;}
.login-section .login-form {margin-top: 80px;}
.login-section .login-form .login-form-wrap {max-width: 580px; width: 100%; margin-inline: auto;}
.login-section .login-form .input-list {row-gap: 18px;}
.login-section .login-form input {width: 100%; height: 50px;}
.login-section .login-form .login-submit-btn {font-size: 16px; width: 100%; max-width: 260px; margin-inline: auto; margin-top: 80px;}
.login-section .login-find-link {margin-top: 18px; text-align: center;}
.login-section .login-find-link a {font-size: 16px; font-weight: 400; color: #111111; text-decoration: underline;}
.login-section .login-submit-btn {}
.login-section .social-login-wrap {position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 54px; padding-top: 28px;}
.login-section .social-login-wrap::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #E2E2E2;}
.login-section .social-login-wrap span {white-space: nowrap; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 38px; background-color: #fff; font-size: 18px; font-weight: 500; color: #111111;}
.login-section .kakao-login-btn {transition: box-shadow 0.3s; width: 70px; height: 70px; margin-top: 40px; border: 1px solid #E2E2E2; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.login-section .join-link {margin-top: 60px; text-align: center; font-size: 18px; font-weight: 500; color: #000;}
.login-section .join-link a {margin-left: 10px; color: #0059DB; font-weight: 500; text-decoration: underline;}

@media (hover: hover) {
    .login-section .kakao-login-btn:hover {box-shadow: 0 0 0 5px #ADADAD4D;}
}
@media screen and (max-width: 768px) {
    .login-section {padding: 80px 0 90px;}
    .member-title h2 {font-size: 30px;}
    .login-section .login-form {margin-top: 50px;}
    .login-section .login-submit-btn {width: 100%; margin-top: 50px;}
}

.join-section {padding: 90px 0 120px;}
.join-section .join-wrap {max-width: 703px; margin: 0 auto;}
.join-section .member-title {text-align: center;}
.join-section .member-title h2 {font-size: 36px; font-weight: 800; color: #0B1F45;}
.join-section .member-title strong {display: block; margin-top: 24px; font-size: 24px; font-weight: 600; color: #111111;}
.join-section .member-title p {margin-top: 10px; font-size: 16px; color: #555555; word-break: keep-all;}
.join-section .join-form {margin-top: 52px;}
.join-section .join-form-section {padding-top: 30px; border-top: 1px solid #EEEEEE;}
.join-section .join-form-section:first-child {padding-top: 0; border-top: 0;}
.join-section .join-form-section + .join-form-section {margin-top: 30px;}
.join-section .join-form-section h3 {font-size: 18px; font-weight: 500; color: #000; margin-bottom: 20px;}
.join-section .join-form-section h4 {margin-bottom: 12px; font-size: 15px; font-weight: 600; color: #000000;}
.join-section .join-form input {height: 50px;}
.join-section .join-form .custom-select select {height: 50px;}
.join-section .join-type-radio,
.join-section .join-gender-radio {display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;}
.join-section .join-type-radio .custom-radio,
.join-section .join-gender-radio .custom-radio {width: 100%;}
.join-section .join-type-radio .custom-radio label,
.join-section .join-gender-radio .custom-radio label {height: 50px; max-height: none;}
.join-section .join-type-radio .custom-radio em {display: flex; align-items: center; column-gap: 10px;}
.join-section .join-type-radio .custom-radio input[type="radio"]:checked + label,
.join-section .join-gender-radio .custom-radio input[type="radio"]:checked + label {background-color: #fff; border-color: #F6A623; color: #111111;}
.join-section .join-email-row {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%;}
.join-section .join-email-row .email-at {font-size: 16px; color: #777777;}
.join-section .join-phone-row {display: grid; grid-template-columns: 150px 1fr; width: 100%;}
.join-section .phone-code-select select {font-size: 14px;}
.join-section .join-privacy-wrap {margin: 40px 0 22px; background-color: #fff;}
.join-section .join-submit-btn {font-size: 16px; max-width: 260px; margin: 0 auto; border-radius: 999px; background: linear-gradient(180deg, #FFB900 0%, #F2994A 100%); color: #fff;}
.join-section .login-link {margin-top: 20px; text-align: center; font-size: 14px; color: #878787;}
.join-section .login-link a {margin-left: 10px; color: #2B2B2B; font-size: 15px; font-weight: 500; text-decoration: underline;}
.join-section .custom-select.disabled {opacity: 0.5; pointer-events: none;}
.join-section input:disabled,
.join-section select:disabled {background-color: #F5F5F5; color: #999999; cursor: not-allowed;}

@media screen and (max-width: 1024px) {
    .member-section {padding-block: 100px;}
    .member-title h2,
    .join-section .member-title h2 {font-size: clamp(30px, 4vw, 36px);}
    .member-title strong,
    .join-section .member-title strong {font-size: clamp(20px, 3vw, 24px);}
    .login-section .login-form {margin-top: 60px;}
    .login-section .login-form .login-submit-btn {margin-top: 60px;}
    .join-section {padding: 80px 0 100px;}
}

@media screen and (max-width: 768px) {
    .member-section {padding-block: 80px 90px;}
    .member-title h2,
    .join-section .member-title h2 {font-size: clamp(28px, 7vw, 30px);}
    .member-title strong,
    .join-section .member-title strong {margin-top: 18px; font-size: clamp(18px, 5vw, 22px);}
    .member-title p,
    .join-section .member-title p {font-size: 15px;}

    .login-section .login-wrap,
    .join-section .join-wrap {max-width: 100%;}
    .login-section .login-form {margin-top: 50px;}
    .login-section .login-form .login-submit-btn {width: 100%; max-width: none; margin-top: 50px; padding: 12px 24px;}
    .login-section .social-login-wrap {margin-top: 45px;}
    .login-section .social-login-wrap span {padding: 0 24px; font-size: 16px;}
    .login-section .kakao-login-btn {width: 62px; height: 62px; margin-top: 34px;}
    .login-section .kakao-login-btn svg {max-width: 60%;}
    .login-section .join-link {margin-top: 45px; font-size: 16px;}

    .join-section {padding: 70px 0 90px;}
    .join-section .join-form {margin-top: 42px;}
    .join-section .join-form-section {padding-top: 26px;}
    .join-section .join-form-section + .join-form-section {margin-top: 26px;}
    .join-section .join-submit-btn {width: 100%; max-width: none; padding: 12px 24px;}
}

@media screen and (max-width: 480px) {
    .member-section {padding-block: 60px 75px;}
    .member-title h2,
    .join-section .member-title h2 {font-size: 26px;}
    .member-title strong,
    .join-section .member-title strong {font-size: 18px;}
    .member-title p,
    .join-section .member-title p {font-size: 14px; line-height: 1.5;}

    .input-wrap {row-gap: 8px;}
    .input-wrap label,
    .input-wrap label span {font-size: 14px;}
    .login-section .login-form input,
    .join-section .join-form input,
    .join-section .join-form .custom-select select {height: 48px; padding: 10px 12px;}
    .input-relative .input-ico {width: 30px; height: 24px; right: 4px;}
    .input-relative .input-ico svg {width: 20px;}
    .input-password-box .input-toggle-btn {padding: 4px;}

    .login-section .login-form {margin-top: 40px;}
    .login-section .login-form .input-list {row-gap: 14px;}
    .login-section .login-form .login-submit-btn {margin-top: 40px;}
    .login-section .login-find-link a {font-size: 14px;}
    .login-section .social-login-wrap {margin-top: 38px; padding-top: 24px;}
    .login-section .social-login-wrap span {font-size: 14px;}
    .login-section .join-link {font-size: 14px;}
    .login-section .join-link a {display: inline-block; margin-left: 6px;}

    .join-section {padding: 55px 0 75px;}
    .join-section .join-form {margin-top: 36px;}
    .join-section .join-form-section h3 {font-size: 17px;}
    .join-section .join-type-radio,
    .join-section .join-gender-radio {grid-template-columns: 1fr; gap: 10px;}
    .join-section .join-type-radio .custom-radio label,
    .join-section .join-gender-radio .custom-radio label {height: 48px; padding: 10px 12px;}
    .join-section .join-privacy-wrap {margin: 32px 0 20px;}
    .custom-chk label span {width: 22px; height: 22px;}
    .custom-chk label em {font-size: 13px; line-height: 1.5;}
    .join-section .join-email-row,
    .join-section .join-phone-row {display: flex; flex-wrap: wrap;}
    .join-section .join-email-row .custom-select,
    .join-section .join-email-row input,
    .join-section .join-phone-row .custom-select
    .join-section .join-phone-row input {width: 100%;}
}

@media screen and (max-width: 375px) {
    .join-section .join-privacy-wrap {padding: 0; border-radius: 0; border: 0;}
}