@charset "utf-8";

/* ==========================================================================
   Kolive Platform - Member Auth Skin Pure Vanilla CSS (kolive_auth.css)
   ========================================================================== */

/* [Single Source of Truth: :root is unified in design_system.css] */

/* 회원가입/로그인 카드 컨테이너 */
.auth-container {
    max-width: 32.5rem;
    margin: 3.13rem auto 5.63rem;
    padding: 0 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.auth-card {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-border);
    border-radius: 1.5rem;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}

.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.auth-header-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.63rem;
    font-weight: 900;
    color: var(--auth-primary);
    text-decoration: none;
}

.auth-header-title {
    font-size: 1.38rem;
    font-weight: 800;
    color: var(--auth-text-main);
    margin: 0.63rem 0 0.25rem;
}

.auth-header-sub {
    font-size: 0.88rem;
    color: var(--auth-text-sub);
    margin: 0;
}

/* 폼 필드 공통 */
.auth-field {
    margin-bottom: 1.13rem;
}

.auth-label {
    display: block;
    font-size: 0.81rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.38rem;
}

.auth-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    font-size: 0.88rem;
    color: var(--auth-text-main);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.auth-input:focus {
    border-color: var(--auth-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.auth-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.auth-checkbox-label {
    font-size: 0.81rem;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.auth-checkbox {
    width: 1.13rem;
    height: 1.13rem;
    accent-color: var(--auth-primary);
}

.auth-btn-primary {
    width: 100%;
    height: 3.13rem;
    background: var(--auth-primary);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.auth-btn-primary:hover {
    background: var(--auth-primary-hover);
}

.auth-btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

.auth-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.auth-btn-secondary:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.auth-btn-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(2,132,199,0.25);
}
.auth-btn-primary-link:hover {
    background: #0369a1;
}

.auth-links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    font-size: 0.81rem;
}

.auth-link-bold {
    color: var(--auth-primary);
    font-weight: 800;
    text-decoration: none;
}

.auth-link-sub {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
}

/* 약관 그룹 및 박스 */
.auth-terms-group {
    margin-bottom: 1.5rem;
}

.auth-section-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
    margin-bottom: 0.5rem;
}

.auth-terms-box {
    background: #f8fafc;
    border: 1px solid var(--auth-border);
    border-radius: 0.88rem;
    padding: 1rem;
    height: 8.75rem;
    overflow-y: auto;
    font-size: 0.81rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 0.63rem;
}

.auth-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
}

.auth-action-group {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.88rem;
}

.auth-btn-cancel {
    flex: 1;
    height: 3rem;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-btn-next {
    flex: 2;
    height: 3rem;
}

/* 소셜 로그인 버튼 그룹 */
.auth-social-group {
    display: flex;
    flex-direction: column;
    gap: 0.63rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.auth-social-title {
    font-size: 0.81rem;
    color: #64748b;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-align: center;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.auth-social-btn:hover {
    opacity: 0.92;
}

.auth-btn-naver { background: #03cf5d; color: #ffffff; }
.auth-btn-kakao { background: #fee500; color: #191919; }

/* 그누보드 순정 소셜 로그인 (#sns_login) 모던 카드 정렬 */
#sns_login.login-sns {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
#sns_login.login-sns h3 {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}
#sns_login .sns-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.63rem;
}
#sns_login .sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.63rem;
    width: 100% !important;
    height: 3rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}
#sns_login .sns-icon:hover {
    opacity: 0.92;
}
#sns_login .sns-naver { background: #03cf5d !important; color: #ffffff !important; }
#sns_login .sns-kakao { background: #fee500 !important; color: #191919 !important; }
#sns_login .sns-google { background: #ffffff !important; color: #374151 !important; border: 1px solid #cbd5e1 !important; }
#sns_login .sns-facebook { background: #1877f2 !important; color: #ffffff !important; }
#sns_login .sns-twitter { background: #1da1f2 !important; color: #ffffff !important; }
#sns_login .sns-payco { background: #fa1414 !important; color: #ffffff !important; }

/* 회원가입 완료 / 비밀번호 재설정 결과 카드 */
.auth-result-box {
    text-align: center;
    padding: 1.5rem 0;
}
.auth-result-icon {
    font-size: 3rem;
    color: #2563eb;
    margin-bottom: 1rem;
}
.auth-result-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.75rem;
}
.auth-result-desc {
    font-size: 0.94rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.auth-result-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    text-align: left;
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.7;
}

/* ==========================================================================
   모바일 풀스크린 반응형 최적화 (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .auth-container {
        margin: 0 auto;
        padding: 0.5rem;
        max-width: 100%;
        min-height: calc(100vh - 12rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-card {
        border-radius: 1rem;
        padding: 1.75rem 1.25rem;
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }
    .auth-header {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
    }
    .auth-header-title {
        font-size: 1.25rem;
    }
    .auth-input {
        height: 2.88rem;
        font-size: 0.94rem;
    }
    .auth-btn-primary {
        height: 3rem;
        font-size: 1rem;
    }
    .auth-btn-cancel, .auth-btn-next {
        height: 2.88rem;
    }
}

/* Autogenerated Class Rules to Replace Inline Styles */
.kol-view-container { padding-top: var(--space-6, 1.5rem); padding-bottom: var(--space-12, 3rem); }
.news-top-visual img { width: 100%; border-radius: 0.75rem; margin-bottom: 0.5rem; display: block; }
.news-img-caption { font-size: 0.81rem; color: #475569; margin-top: 0.63rem; margin-bottom: 1rem; padding: 0.5rem 0.75rem; background: #f8fafc; border-left: 0.25rem solid #3b82f6; border-radius: 0.38rem; display: block; clear: both; }
.kol-view-article { max-width: 62.5rem; margin: 0 auto; background: white; padding: var(--space-8, 2rem); border-radius: var(--radius-xl, 1rem); border: 1px solid var(--border-light, #e2e8f0); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); }
.kol-view-header { margin-bottom: var(--space-6, 1.5rem); }
.kol-view-cate { color: var(--primary, #2563eb); font-weight: 700; margin-bottom: var(--space-2, 0.5rem); }
.kol-view-title { font-size: var(--text-3xl, 1.875rem); font-weight: 700; line-height: 1.3; color: var(--text-primary, #0f172a); }
.kol-view-info-box { border-top: 1px solid var(--border-light, #e2e8f0); border-bottom: 1px solid var(--border-light, #e2e8f0); padding: 0.94rem 1.25rem; margin-bottom: 1.88rem; display: flex; justify-content: space-between; align-items: center; background: #fafafa; border-radius: 0.75rem; }
.kol-view-pf-img { width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; background: #e2e8f0; display: flex; align-items: center; justify-content: center; }
.kol-view-author-name { color: #0f172a; font-size: 0.94rem; font-weight: 800; }
.kol-view-badge-official { background: #e0e7ff; color: #4338ca; font-size: 0.69rem; font-weight: 800; padding: 0.13rem 0.5rem; border-radius: 0.38rem; }
.kol-view-meta-row { font-size: 0.75rem; color: #64748b; margin-top: 0.13rem; display: flex; gap: 0.75rem; }
.kol-view-user-btn-group { display: flex; gap: 0.5rem; align-items: center; }
.kol-view-btn-alert { background: #f1f5f9; color: #475569; border-radius: 0.5rem; padding: 0.38rem 0.75rem; font-weight: 700; border: none; cursor: pointer; }
.kol-view-btn-list { background: #1e293b; color: white; border-radius: 0.5rem; padding: 0.38rem 0.88rem; font-weight: 700; text-decoration: none; }
.kol-view-btn-write { border-radius: 0.5rem; padding: 0.38rem 0.88rem; font-weight: 700; }
.kol-view-share-box { margin-bottom: 1.25rem; display: flex; justify-content: flex-end; gap: 0.63rem; }
.kol-view-btn-scrap { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.38rem 0.75rem; font-size: 0.81rem; font-weight: 700; text-decoration: none; color: #334155; }

.auth-icon-wrap {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.auth-desc-wrap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 1.25rem 0;
    text-align: left;
}

.auth-desc-text {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.auth-desc-text:last-child {
    margin-bottom: 0;
}

/* ── 회원가입 1단계 약관 동의 (표준 테마 스타일) ───────────── */
.auth-page-wrapper {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    box-sizing: border-box;
}

.register-step1-card {
    max-width: 44rem;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    box-sizing: border-box;
}

.fregister-agree-all-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.63rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.fregister-term-sec {
    margin-bottom: 1.5rem;
}

.term-header h2 {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.term-required {
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 700;
}

.term-textarea {
    width: 100%;
    height: 7.5rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.81rem;
    line-height: 1.6;
    color: #334155;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
}

.term-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.term-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
}

.term-table th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    padding: 0.63rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.term-table td {
    padding: 0.63rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    line-height: 1.5;
}

.fregister-agree-row {
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

.custom-chk-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: #334155;
}

.custom-chk-input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #2563eb;
    cursor: pointer;
}

.auth-bottom-nav {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.84rem;
    color: #64748b;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.auth-bottom-nav a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.auth-bottom-nav a:hover {
    text-decoration: underline;
}

/* 비밀 초대 가입 전용 스타일 (인라인 style 100% 분리) */
.kol-secret-btn-wrap { margin-top: 0.75rem; }
.kol-secret-policy-btn { background: #2563eb; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.38rem; font-size: 0.84rem; cursor: pointer; }
.kol-secret-auth-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.63rem; padding: 1.5rem; margin-bottom: 1.5rem; text-align: center; }
.kol-tier-guide-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin-bottom: 0.5rem; }
.kol-secret-desc { font-size: 0.84rem; color: #64748b; margin-bottom: 1rem; }
.kol-secret-input-group { display: flex; justify-content: center; gap: 0.5rem; max-width: 24rem; margin: 0 auto; }
.kol-secret-input { flex: 1; padding: 0.63rem 0.88rem; border: 1px solid #cbd5e1; border-radius: 0.38rem; font-size: 0.88rem; }
.kol-secret-btn { background: #2563eb; color: #fff; border: none; padding: 0.63rem 1.15rem; border-radius: 0.38rem; font-weight: 700; cursor: pointer; }
.kol-error-text { color: #dc2626; font-size: 0.81rem; margin-top: 0.75rem; }
.kol-invite-banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.63rem; padding: 0.88rem 1.15rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.63rem; }
.kol-invite-banner-icon { color: #2563eb; font-size: 1.1rem; }
.kol-invite-banner-content { font-size: 0.84rem; color: #1e293b; }
.kol-invite-code-tag { color: #2563eb; font-weight: 700; }
.kol-invite-desc { margin: 0.25rem 0 0; font-size: 0.78rem; color: #64748b; }
.kol-tier-pill { display: inline-block; background: #2563eb; color: #fff; padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 700; margin-left: 0.25rem; }
.kol-invite-banner-meta { margin-top: 0.25rem; color: #475569; font-size: 0.8rem; }