@charset "UTF-8";

.login-wrap {display: grid; grid-template-columns: 1fr 1fr; border-radius: 30px; background: #fff; box-shadow: 0 3px 14px 3px rgba(158, 158, 158, 0.25); padding: 80px 0; margin-bottom: 200px;}
.login-wrap > div {padding: 0 80px; display: flex; flex-direction: column;}
.login-wrap .login-title {color: var(--color-ink); font-size: 30px; font-weight: 700; display: flex; align-items: flex-end; gap: 8px;}
.login-wrap .login-title:after {content: ""; display: block; width: 10px; height: 10px; background: var(--color-primary); border-radius: 100%; margin-bottom: 8px;}
.login-wrap .login {border-right: 1px solid rgba(var(--color-ink-rgb), 0.18);}

.login-form {margin-top: 40px; display: flex; flex-direction: column; gap: 30px; flex: 1;}
.login-form-item {position: relative; display: flex; flex-direction: column; gap: 10px;}
.login-label {display: flex; gap: 6px; align-items: center; color: var(--color-ink); font-size: 20px; font-weight: 700; position: absolute; background: #fff; left: 24px; padding: 0 8px;}
.login-label i {font-size: 20px; line-height: 1; color: var(--color-ink); transition: color 0.2s ease;}
.login-input {width: 100%; height: 65px; border: 1px solid var(--color-gray); border-radius: 10px; outline: none; transition: border-color 0.2s ease; margin-top: 18px; color: var(--color-ink); font-size: 20px; font-weight: 500; padding: 24px 30px 14px;}
.login-input:focus {border-color: var(--color-primary); background: #fff; box-shadow: 2px 4px 4px 0 rgba(var(--color-primary-rgb), 0.25);}
.login-form-item:focus-within .login-label {color: var(--color-primary);}
.login-form-item:focus-within .login-label i {color: var(--color-primary);}
.login-form-item > button {position: absolute; right: 32px; top: 18px; bottom: 0; transform: none; background: none; border: none; cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center; transition: opacity 0.2s ease;}
.login-wrap .btn-pw-toggle i {font-size: 22px; line-height: 1; color: var(--color-gray); transition: color 0.15s ease;}
.login-wrap .btn-pw-toggle.is-active i {color: var(--color-primary);}
.login-bottom-info {display: flex; align-items: center; justify-content: space-between;}
.login-remember {display: flex; align-items: center; gap: 8px; color: var(--color-gray); text-align: right; font-size: 18px; font-weight: 500; line-height: 20px; cursor: pointer; user-select: none; transition: color 0.15s ease;}
.login-remember.is-checked {color: var(--color-ink);}
.login-remember .agree-btn {width: auto; height: auto; padding: 0; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; line-height: 0;}
.login-wrap .agree-btn::before,
.join-wrap .agree-btn::before {font-family: 'bootstrap-icons'; content: '\F26B'; font-size: 28px; color: var(--color-gray); flex-shrink: 0; transition: color 0.15s ease-in-out; line-height: 1; margin-left: 2px;}
.login-wrap .agree-btn.is-checked::before,
.join-wrap .agree-btn.is-checked::before {content: '\F26A'; color: var(--color-primary);}
.login-remember input[type="checkbox"] {appearance: none; -webkit-appearance: none; width: 22px; height: 22px; background: url('../images/login/icon_checkbox_off.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; flex-shrink: 0;}
.login-remember input[type="checkbox"]:checked {background: url('../images/login/icon_checkbox_on.svg');}
.login-find-wrap {display: flex; align-items: center;}
.login-find-wrap a {color: var(--color-gray); font-size: 18px; font-weight: 500;}
.login-find-wrap a + a::before {content: ""; display: inline-block; width: 1px; height: 17px; background: var(--color-gray); margin: 0 18px; vertical-align: middle;}

.btn-login-submit {width: 154px; height: 154px; background: var(--color-primary); filter: drop-shadow(1px 4px 4px rgba(var(--color-primary-rgb), 0.25)); color: #fff; border-radius: 100px; text-align: center; font-size: 26px; font-weight: 700; line-height: 31.2px; cursor: pointer; transition: opacity 0.2s ease; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.btn-login-submit img {filter: brightness(0) invert(1);}
.login-btn-wrap {display: flex; justify-content: space-between; flex-direction: row-reverse;}

.login-wrap .login .login-btn-wrap {display: block; margin-top: auto;}
.login-wrap .login .btn-login-submit,
.login-wrap .signup .login-btn-wrap .btn-login-submit {position: relative; width: 100%; height: 64px; border-radius: 10px; flex-direction: row; font-size: 22px; line-height: 1; background: var(--color-primary); border: none; color: #fff; font-weight: 700; filter: drop-shadow(1px 4px 4px rgba(var(--color-primary-rgb), 0.25));}
.login-wrap .login .btn-login-submit span,
.login-wrap .signup .login-btn-wrap .btn-login-submit span {color: #fff;}
.login-wrap .login .btn-login-submit img,
.login-wrap .signup .login-btn-wrap .btn-login-submit img {position: static; width: 16px; max-width: 0; margin-left: 0; opacity: 0 !important; filter: none; transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;}
.login-wrap .login .btn-login-submit:hover img,
.login-wrap .signup .login-btn-wrap .btn-login-submit:hover img {max-width: 16px; margin-left: 8px; opacity: 1 !important;}

.login-sub-title {margin-top: 38px; color: var(--color-ink); font-size: 22px; font-weight: 500; line-height: 38px; letter-spacing: -0.22px;}
.login-wrap .signup {display: flex; flex-direction: column;}
.login-wrap .signup-img {display: block; width: 100%; max-width: 350px; height: auto; margin: 28px auto 0;}
.login-wrap .signup .login-btn-wrap {flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto;}

@media all and (max-width: 1200px) {
  .login-bottom-info {flex-direction: column; align-items: flex-start; gap: 24px;}
}

@media all and (max-width: 1024px) {
  .login-wrap {padding: 50px 0; margin-bottom: 80px;}
  .login-wrap > div {padding: 0 30px;}
  .login-wrap .login-title {font-size: 30px;}
  .login-label {font-size: 14px;}
  .login-label i {font-size: 16px;}
  .login-input {font-size: 16px; padding: 20px 24px 16px; height: auto;}
  .login-form-item > button {right: 20px;}
  .login-remember,
  .login-find-wrap a {font-size: 14px;}
  .btn-login-submit {width: 120px; height: 120px; font-size: 20px; line-height: 24px;}
  .login-wrap .login .btn-login-submit,
  .login-wrap .signup .login-btn-wrap .btn-login-submit {width: 100%; height: 56px; font-size: 18px; line-height: 1;}
  .btn-login-submit img {bottom: 22px;}
  .login-sub-title {font-size: 16px; line-height: 21px; margin-bottom: 30px;}
  .btn-login-submit img {opacity: 0 !important;}
  .btn-login-submit:hover img {opacity: 0 !important; transform: translateX(-50%) translateY(-8px) !important;}
  .btn-login-submit:hover span {transform: translate(-50%, -50%) !important;}
}

@media all and (max-width: 768px) {
  .login-wrap {grid-template-columns: 1fr; padding: 36px 0; margin-bottom: 50px; border-radius: 16px;}
  .login-wrap > div {padding: 0 18px;}
  .login-wrap > div.login {order: 1; border-right: none; border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.18); padding-bottom: 32px;}
  .login-wrap > div.signup {order: 2; padding-top: 32px;}
  .login-wrap .login-title {font-size: 26px;}
  .login-form {gap: 20px; margin-top: 28px;}
  .login-input {font-size: 15px; padding: 18px 20px 12px;}
  .login-label {font-size: 16px;}
  .login-bottom-info {align-items: center;}
  .login-remember,
  .login-find-wrap a {font-size: 14px;}
  .login-find-wrap a + a::before {margin: 0 10px;}
  .btn-login-submit {width: 100px; height: 100px; font-size: 17px; line-height: 21px;}
  .login-wrap .login .btn-login-submit,
  .login-wrap .signup .login-btn-wrap .btn-login-submit {width: 100%; height: 52px; font-size: 17px; line-height: 1;}
  .btn-login-submit img {bottom: 16px; width: 20px;}
  .login-wrap .signup .login-title {justify-content: center;}
  .login-sub-title {font-size: 18px; line-height: 30px; margin-bottom: 20px; text-align: center;}
  .login-wrap .signup .login-btn-wrap {margin-top: 32px;}
}

.find-wrap {max-width: 760px; margin: 0 auto 200px;}

.find-tabs {display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 48px; padding: 5px; background: rgba(var(--color-ink-rgb), 0.06); border-radius: 14px;}
.find-tab {display: flex; align-items: center; justify-content: center; height: 52px; border: none; border-radius: 10px; background: transparent; color: var(--color-gray); font-size: 18px; font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;}
.find-tab.is-active {color: var(--color-ink); background: #fff; box-shadow: 0 3px 8px rgba(var(--color-ink-rgb), 0.12);}

.find-panel {padding-top: 56px;}
.find-panel-head {text-align: center;}
.find-panel-title {color: var(--color-ink); font-size: 24px; font-weight: 700;}
.find-panel-title em {color: var(--color-primary); font-style: normal;}
.find-panel-desc {margin-top: 18px; color: var(--color-gray); font-size: 17px; font-weight: 500; line-height: 28px;}

.find-fields {margin-top: 40px; padding: 20px 40px; background: rgba(var(--color-ink-rgb), 0.035); border-radius: 16px; display: flex; flex-direction: column; gap: 8px;}
.find-field {display: flex; align-items: center; gap: 28px; padding: 16px 0;}
.find-label {flex-shrink: 0; min-width: 110px; white-space: nowrap; color: var(--color-ink); font-size: 18px; font-weight: 700;}
.find-value {flex: 1; min-width: 0; color: var(--color-ink); font-size: 18px; font-weight: 500; word-break: break-all;}
.find-field:has(.find-value) {justify-content: center;}
.find-field:has(.find-value) .find-label {min-width: 0;}
.find-field:has(.find-value) .find-value {flex: 0 1 auto; text-align: center;}
.find-input {flex: 1; height: 60px; margin-top: 0; padding: 0 24px;}

.find-btn-wrap {display: flex; justify-content: center; margin-top: 48px;}
.btn-find-submit {display: flex; align-items: center; justify-content: center; min-width: 200px; height: 64px; padding: 0 28px; border: none; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; filter: drop-shadow(1px 4px 4px rgba(var(--color-primary-rgb), 0.25));}
.btn-find-submit span {color: #fff;}
.btn-find-submit img {width: 16px; max-width: 0; margin-left: 0; opacity: 0; transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;}
.btn-find-submit:hover img {max-width: 16px; margin-left: 8px; opacity: 1;}

@media all and (max-width: 1024px) {
  .find-wrap {margin-bottom: 80px;}
  .find-tabs {margin-top: 36px;}
  .find-tab {height: 46px; font-size: 16px;}
  .find-panel {padding-top: 40px;}
  .find-panel-title {font-size: 20px;}
  .find-panel-desc {font-size: 15px; line-height: 24px;}
  .find-fields {margin-top: 32px; padding: 16px 28px;}
  .find-field {gap: 20px; padding: 14px 0;}
  .find-label {min-width: 96px; font-size: 15px;}
  .find-input {height: 56px;}
}

@media all and (max-width: 768px) {
  .find-wrap {margin-bottom: 50px;}
  .find-tab {font-size: 15px;}
  .find-fields {padding: 16px 20px;}
  .find-field {flex-direction: column; align-items: stretch; gap: 10px;}
  .find-field:has(.find-value) {align-items: center;}
  .find-label {width: auto; font-size: 15px;}
  .find-input {flex: none; width: 100%; height: 54px; padding: 0 20px;}
  .btn-find-submit {width: 100%; min-width: 0; height: 56px; font-size: 18px;}
}

.join-wrap {max-width: 840px; margin: 0 auto 200px; border-radius: 30px; background: #fff; box-shadow: 0 3px 14px 3px rgba(158, 158, 158, 0.25); padding: 64px 64px;}
.join-wrap .hide {display: none !important;}

.join-head {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 32px; border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.15);}
.join-head.mt60 {margin-top: 64px;}
.join-head-tit {color: var(--color-ink); font-size: 26px; font-weight: 700;}
.join-head-sub {color: var(--color-gray); font-size: 16px; font-weight: 500;}
.join-wrap .required {color: var(--color-primary); font-weight: 700; margin-left: 2px;}
.join-wrap .tag-req {color: var(--color-primary); font-weight: 700; margin-right: 6px;}

.join-wrap .agree-btn {display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; background: none; border: none; cursor: pointer; text-align: left;}
.join-wrap .agree-btn-text {flex: 1; min-width: 0; color: var(--color-ink); font-size: 17px; font-weight: 600; word-break: keep-all;}
.join-wrap .agree-all {padding: 20px 24px; margin-bottom: 20px; background: rgba(var(--color-primary-rgb), 0.06); border-radius: 12px;}
.join-wrap .agree-all .agree-btn-text {font-size: 19px; font-weight: 700;}

.join-wrap .agree-list {display: flex; flex-direction: column; gap: 16px;}
.join-wrap .agree-item {border: 1px solid rgba(var(--color-ink-rgb), 0.14); border-radius: 14px; overflow: hidden;}
.join-wrap .agree-item-head {padding: 20px 24px;}
.join-wrap .agree-box {padding: 20px 24px; border-top: 1px solid rgba(var(--color-ink-rgb), 0.1); background: rgba(var(--color-ink-rgb), 0.02); color: var(--color-gray); font-size: 14px; line-height: 1.75; max-height: 170px; overflow-y: auto;}
.join-wrap .agree-box p + p {margin-top: 10px;}
.join-wrap .agree-box::-webkit-scrollbar {width: 6px;}
.join-wrap .agree-box::-webkit-scrollbar-thumb {background: rgba(var(--color-ink-rgb), 0.25); border-radius: 999px;}
/* 약관 본문의 표 : 퍼블리싱 .fm-table 모양. 감싸는 div 가 없어 표에 테두리 · 둥근 모서리를 준다. theme.css 가 뒤에 불러와져 .agree-item 을 붙여 우선한다. */
.join-wrap .agree-box {overflow-x: auto;}
.join-wrap .agree-item .agree-box table {width: 100%; margin: 12px 0 16px; border: 1px solid #eee; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden;}
.join-wrap .agree-item .agree-box th, .join-wrap .agree-item .agree-box td {padding: 8px 10px; border: 0; border-bottom: 1px solid #eee; color: #555; font-size: 14px; line-height: 1.55; text-align: left; word-break: keep-all;}
.join-wrap .agree-item .agree-box th {background: #F7F9FC; color: #333; font-weight: 700; white-space: nowrap;}
.join-wrap .agree-item .agree-box tr:last-child > td {border-bottom: 0;}

.join-form {display: flex; flex-direction: column; gap: 22px;}
.join-row {display: flex; align-items: flex-start; gap: 20px;}
.join-row > label {flex-shrink: 0; width: 180px; padding-top: 18px; color: var(--color-ink); font-size: 18px; font-weight: 600;}
.join-field {flex: 1; min-width: 0;}
.join-field-stack {display: flex; flex-direction: column; gap: 12px;}
.join-inline {display: flex; gap: 10px;}
.join-inline .form-control {flex: 1; min-width: 0;}

.join-wrap .form-control, .join-wrap .form-select {width: 100%; height: 60px; border: 1px solid rgba(var(--color-ink-rgb), 0.18); border-radius: 10px; background: #fff; color: var(--color-ink); font-size: 17px; font-weight: 500; padding: 0 20px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;}
.join-wrap .form-control::placeholder {color: var(--color-gray);}
.join-wrap .form-control:focus, .join-wrap .form-select:focus {border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);}
.join-wrap .form-control[readonly] {background: rgba(var(--color-ink-rgb), 0.04); color: var(--color-gray);}

.join-wrap .btn-form {flex-shrink: 0; height: 60px; padding: 0 20px; border: 1px solid var(--color-primary); border-radius: 10px; background: #fff; color: var(--color-primary); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;}
.join-wrap .btn-form:hover {background: var(--color-primary); color: #fff;}

.join-wrap .field-guide {display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; color: var(--color-gray); font-size: 15px; line-height: 1.5;}
.join-wrap .field-guide i {flex-shrink: 0; font-size: 16px; line-height: 1.5;}
.join-wrap .field-guide-ok {color: var(--color-primary);}
.join-wrap .field-guide-error {color: #d64545;}
.join-wrap .field-guide-reserve {min-height: 22.5px; margin-top: 10px;}

.join-btn-wrap {display: flex; justify-content: center; gap: 16px; margin-top: 56px;}
.btn-join-cancel,
.btn-join-submit {display: flex; align-items: center; justify-content: center; min-width: 200px; height: 64px; padding: 0 28px; border: none; border-radius: 10px; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none;}
.btn-join-cancel {background: rgba(var(--color-ink-rgb), 0.08); color: var(--color-ink);}
.btn-join-cancel:hover {background: rgba(var(--color-ink-rgb), 0.14);}
.btn-join-submit {background: var(--color-primary); color: #fff; filter: drop-shadow(1px 4px 4px rgba(var(--color-primary-rgb), 0.25));}
.btn-join-submit span {color: #fff;}
.btn-join-submit img {width: 16px; max-width: 0; margin-left: 0; opacity: 0; transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;}
.btn-join-submit:hover img {max-width: 16px; margin-left: 8px; opacity: 1;}

@media all and (max-width: 1024px) {
  .join-wrap {padding: 48px 40px; margin-bottom: 80px;}
  .join-head.mt60 {margin-top: 48px;}
  .join-head-tit {font-size: 22px;}
  .join-row {flex-direction: column; align-items: stretch; gap: 8px;}
  .join-row > label {width: 100%; padding-top: 0; font-size: 16px;}
  .join-field {width: 100%;}
  .join-inline {flex-direction: column;}
  .join-inline .form-control {flex: none; width: 100%;}
  .join-inline .btn-form {width: 100%;}
  .join-wrap .form-control, .join-wrap .form-select {height: 54px; font-size: 16px;}
  .join-wrap .btn-form {height: 54px; font-size: 15px; padding: 0 16px;}
}

@media all and (max-width: 768px) {
  .join-wrap {padding: 32px 20px; margin-bottom: 50px; border-radius: 16px;}
  .join-wrap .agree-all {padding: 16px 18px;}
  .join-wrap .agree-item-head, .join-wrap .agree-box {padding: 16px 18px;}
  .join-btn-wrap {flex-direction: column-reverse; gap: 10px; margin-top: 40px;}
  .btn-join-cancel,
  .btn-join-submit {width: 100%; min-width: 0; height: 56px; font-size: 18px;}
}