@charset "UTF-8";

/*
 * KYC 보강 CSS — pub 퍼블리싱에 없는 JS 상태 클래스용.
 * 페이지 JS(form.js/login.js 등)가 토글하는 클래스에 대한 최소 스타일만 정의한다.
 * 디자인은 pub CSS를 그대로 따르고, 여기서는 "보임/숨김/색상/로딩" 상태만 책임진다.
 */

/* 상태 메시지 영역 (#status) — form.js: setStatus()가 is-* 토글 */
.login-status {
    display: none;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.login-status.is-visible {
    display: block;
}
.login-status.is-error {
    color: #dc2626;
}
.login-status.is-success {
    color: #16a34a;
}

/* 제출/OAuth 버튼 로딩 상태 — form.js: setButtonLoading() */
button.is-loading,
.is-loading button {
    opacity: 0.6;
    pointer-events: none;
}

/* signup 폼 상태 메시지 (#status.signup-status) — signup.js: setSignupStatus() */
.signup-status {
    display: none;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.signup-status.is-visible {
    display: block;
}
.signup-status.is-error {
    color: #dc2626;
}
.signup-status.is-success {
    color: #16a34a;
}

/* signup 필드별 에러 — signup.js: setSignupFieldError()/clearSignupFieldError() */
.signup-field__error {
    color: #dc2626;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
}
.signup-field__error:empty {
    display: none;
}
.signup-field.is-invalid .login_input input {
    border-color: #dc2626;
}

/* invite 폼 필드별 에러/상태 — invite.js(pub) setFieldError/setInviteStatus */
.invit_error {
    color: #dc2626;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
}
.invit_error:empty {
    display: none;
}
.invit_ob.is-invalid .invit_input input,
.invit_ob.is-invalid .invit_textarea textarea {
    border-color: #dc2626;
}
.invit_check.is-invalid label {
    outline: 1px solid #dc2626;
}
.invite-status {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.invite-status.is-error {
    color: #dc2626;
}
.invite-status.is-success {
    color: #16a34a;
}

/* auth 플로우 상태 메시지 (#setupStatus.signup-status) — setup.js: setStatus('setupStatus', ...) */
/* .signup-status 룰셋을 재사용. 별도 클래스 정의 불필요. */

/* auth 플로우 필드 에러 — setup.js: setSetupFieldError() / clearSetupFieldError() */
.auth-flow-field__error {
    color: #dc2626;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
}
.auth-flow-field__error:empty {
    display: none;
}
.auth-flow-field.is-invalid .login_input input,
.auth-flow-field.is-invalid .invit_select .nice-select {
    border-color: #dc2626;
}

/* 비밀번호 보기 토글 (login_input.passwrod_input > .view_icon) — setup.js는 button+data-password-toggle 사용 */
.passwrod_input > .view_icon {
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
    background-image: url(../img/view_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    border: none;
    background-color: transparent;
    padding: 0;
    outline: none;
}
.passwrod_input > .view_icon.is-visible {
    background-image: url(../img/view_icon_off.png);
}

/* OTP 타이머 텍스트 — setup.js: setOtpTimer() */
[data-otp-timer] {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 10px;
    text-align: center;
    min-height: 1.4em;
}
[data-otp-timer].is-warning {
    color: #d97706;
}
[data-otp-timer].is-locked {
    color: #dc2626;
}

/* 비밀번호 규칙 리스트 — setup.js: setPasswordRuleState() → .is-valid / .is-invalid */
.auth-flow-rules {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
[data-password-rule] {
    position: relative;
    font-size: 0.875rem;
    font-weight: 300;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 8px;
    padding-left: 20px;
}
[data-password-rule]::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: #bfbfbf;
}
[data-password-rule].is-valid {
    color: #059669;
}
[data-password-rule].is-valid::before {
    content: '✓';
    left: 2px;
    color: #059669;
}
[data-password-rule].is-invalid {
    color: #dc2626;
}
[data-password-rule].is-invalid::before {
    content: '×';
    left: 2px;
    color: #dc2626;
}

/* 플랜 카드 선택 상태 — plan.js: card.classList.toggle('is-selected', ...) */
.plan_item.is-selected {
    border: 1px solid #2465ea !important;
    background-color: #eff7ff !important;
}
.plan_item.is-selected .checked {
    display: block !important;
}

/* 플랜 billing 토글 레이블 활성 상태 — plan.js: .is-active 토글, sub.css: .active 사용 → 둘 다 지원 */
.billing_toggle .toggle_label.is-active { color: #2465ea; }

/* company 페이지 선택 필드 에러 (login_select > niceSelect) */
.auth-flow-field.is-invalid .login_select .nice-select { border-color: #dc2626; }

/* 쿠키 배너 숨김 — cookie-consent JS: box.classList.add('is-hidden') */
.cookie_wrap.is-hidden { display: none !important; }

.invit_select .nice-select .list .country_search_li,
.login_select .nice-select .list .country_search_li {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 10px;
    border-bottom: 1px solid #e8e8e8;
    cursor: default;
    line-height: 1;
    min-height: auto;
    background-color: #fff;
}
.invit_select .nice-select .list .country_search_li:hover,
.login_select .nice-select .list .country_search_li:hover { background-color: #fff; }
.invit_select .nice-select .list .country_search_inp,
.login_select .nice-select .list .country_search_inp {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 300;
    color: #06121d;
    outline: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.invit_select .nice-select .list .country_search_inp:focus,
.login_select .nice-select .list .country_search_inp:focus { border-color: #2465ea; }

/* 결제 처리 중 스피너 */
.processing_spinner {
    width: 52px;
    height: 52px;
    border: 4px solid #d1e7f0;
    border-top-color: #2465ea;
    border-radius: 50%;
    margin: 0 auto 24px;
    -webkit-animation: kyc-spin 0.8s linear infinite;
    animation: kyc-spin 0.8s linear infinite;
}
@-webkit-keyframes kyc-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes kyc-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}