@charset "utf-8";

/**
 * 회원 스킨 - basic (Clean Portal)
 *
 * Clean Portal 디자인 + 그라데이션 악센트 (버튼·헤드라인)
 * --vue-* 공유 변수 참조, --gb-* 글로벌 변수 참조
 * 스킨 전용 접두사: mb-*
 *
 * @version 20260429-001
 */

/* ============================================
   CSS 변수 (--vue-* 공유 변수 참조)
   ============================================ */

:root {
    /* 스킨 전용 별칭 — bootstrap-custom.css :root --vue-* 참조 */
    --mb-gradient-start: var(--vue-gradient-start, #2563eb);
    --mb-gradient-mid: var(--vue-gradient-mid, #7c3aed);
    --mb-gradient-end: var(--vue-gradient-end, #a855f7);
    --mb-glow-primary: var(--vue-glow-primary, 0 0 20px rgba(37, 99, 235, 0.3));
}

/* ============================================
   @keyframes
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================
   1. 배경 씬 (구조 래퍼, 배경색 없음)
   ============================================ */

.mb-gradient-scene,
.mb-gradient-scene--wide {
    /* 배경 없음 — 버튼·헤드라인에만 그라데이션 사용 */
}

/* ============================================
   2. 글래스 카드
   ============================================ */

.mb-glass-card {
    animation: fadeInUp 0.5s ease-out;
}

/* ============================================
   3. 글래스 섹션 (register_form 내부)
   ============================================ */

.mb-glass-section {
    background: var(--gb-surface-card);
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    padding: var(--gb-space-6);
    margin-bottom: var(--gb-space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: fadeInUp 0.5s ease-out both;
}

/* mb-section과 결합 시: 카드 스타일 우선 */
.mb-section.mb-glass-section {
    border: 1px solid var(--gb-border-default);
    padding-bottom: var(--gb-space-6);
}

.mb-section.mb-glass-section:last-child {
    border: 1px solid var(--gb-border-default);
    padding-bottom: var(--gb-space-6);
}

.mb-glass-section:nth-child(1) { animation-delay: 0.05s; }
.mb-glass-section:nth-child(2) { animation-delay: 0.1s; }
.mb-glass-section:nth-child(3) { animation-delay: 0.15s; }
.mb-glass-section:nth-child(4) { animation-delay: 0.2s; }
.mb-glass-section:nth-child(5) { animation-delay: 0.25s; }
.mb-glass-section:nth-child(6) { animation-delay: 0.3s; }

/* ============================================
   4. 인증 페이지 래퍼 (로그인, 비밀번호 찾기 등)
   ============================================ */

.mb-auth-wrap {
    max-width: 480px;
    margin: var(--gb-space-8) auto 0;
    padding: 2rem;
    border-bottom: 1px solid var(--gb-gray-100);
    animation: fadeInUp 0.5s ease-out;
}

.mb-auth-wrap.mb-auth-wide {
    max-width: 600px;
}

.mb-auth-wrap.mb-auth-split {
    max-width: 960px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* glass-card와 결합 시 중복 방지 */
.mb-glass-card.mb-auth-wrap {
    border-bottom: none;
}

/* ============================================
   5. 폼 래퍼 (회원가입/정보수정)
   ============================================ */

.mb-form-wrap {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease-out;
}

/* glass-card와 결합 시 중복 방지 */
.mb-glass-card.mb-form-wrap {
    /* 추가 스타일 불필요 */
}

/* ============================================
   6. 인증 헤더
   ============================================ */

.mb-auth-header {
    text-align: center;
    padding-bottom: var(--gb-space-6);
    margin-bottom: var(--gb-space-6);
    border-bottom: 1px solid var(--gb-gray-100);
}

.mb-auth-header h1 {
    font-size: var(--gb-font-2xl);
    font-weight: var(--gb-font-bold);
    color: var(--gb-gray-900);
    margin: 0;
}

.mb-auth-header h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: var(--gb-space-3) auto 0;
    background: linear-gradient(135deg, var(--mb-gradient-start), var(--mb-gradient-end));
    border-radius: 2px;
}

.mb-auth-split .mb-auth-header {
    padding: 1.75rem 2.5rem;
    margin-bottom: 0;
}

.mb-auth-split .mb-auth-header h1 {
    font-size: 1.75rem;
}

.mb-auth-split .mb-auth-header h1::after {
    width: 80px;
    height: 4px;
}

.mb-auth-body {
    /* 컨텐츠 영역 */
}

/* ============================================
   7. 섹션 (card 대체)
   ============================================ */

.mb-section {
    margin-bottom: var(--gb-space-6);
    padding-bottom: var(--gb-space-6);
    border-bottom: 1px solid var(--gb-gray-100);
}

.mb-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mb-section-label {
    display: block;
    font-size: var(--gb-font-lg);
    font-weight: var(--gb-font-bold);
    color: var(--gb-gray-900);
    margin-bottom: var(--gb-space-5);
    padding-bottom: var(--gb-space-3);
    border-bottom: 1px solid var(--gb-gray-100);
    position: relative;
    padding-left: var(--gb-space-4);
}

.mb-section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--mb-gradient-start), var(--mb-gradient-end));
    border-radius: 2px;
}

.mb-section-title {
    font-size: var(--gb-font-lg);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-800);
    margin-bottom: var(--gb-space-4);
}

/* ============================================
   8. 액션 영역
   ============================================ */

.mb-actions {
    display: flex;
    gap: var(--gb-space-2);
    align-items: center;
    padding: var(--gb-space-4) var(--gb-space-5);
    background: var(--gb-gray-50);
    border-radius: var(--gb-radius-lg);
    margin-top: var(--gb-space-5);
}

.mb-actions.mb-actions-center {
    justify-content: center;
}

.mb-actions.mb-actions-between {
    justify-content: space-between;
}

.mb-actions.mb-actions-end {
    justify-content: flex-end;
}

/* ============================================
   9. 인포 박스 (안내 메시지)
   ============================================ */

.mb-info-box {
    padding: var(--gb-space-3) var(--gb-space-4);
    background: var(--gb-primary-light);
    border-left: 3px solid var(--gb-primary);
    border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-700);
    margin-bottom: var(--gb-space-4);
    line-height: var(--gb-leading-relaxed);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}

.mb-info-box i {
    color: var(--gb-primary);
    margin-right: var(--gb-space-2);
}

.mb-info-box.mb-info-warning {
    background: #fffbeb;
    border-left: 3px solid var(--gb-warning);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.08);
}

.mb-info-box.mb-info-warning i {
    color: var(--gb-warning);
}

.mb-info-box.mb-info-success {
    background: #f0fdf4;
    border-left: 3px solid var(--gb-success);
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08);
}

.mb-info-box.mb-info-success i {
    color: var(--gb-success);
}

/* ============================================
   10. 폼 컨트롤 (글래스 스코프)
   ============================================ */

/* 폼 포커스 glow (그라데이션 악센트) */
.mb-auth-wrap .form-control:focus,
.mb-form-wrap .form-control:focus {
    border-color: var(--mb-gradient-start);
    box-shadow: var(--mb-glow-primary);
}

.mb-auth-wrap .form-select:focus,
.mb-form-wrap .form-select:focus {
    border-color: var(--mb-gradient-start);
    box-shadow: var(--mb-glow-primary);
}

/* ============================================
   11. 그라데이션 버튼
   ============================================ */

.btn-gradient {
    background: linear-gradient(135deg, var(--mb-gradient-start), var(--mb-gradient-mid), var(--mb-gradient-end));
    background-size: 200% 200%;
    background-position: 0 0;
    border: none;
    color: #fff;
    font-weight: var(--gb-font-semibold);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background-position: 100% 0;
    box-shadow: var(--mb-glow-primary);
    transform: translateY(-1px) scale(1.02);
    color: #fff;
}

.btn-gradient:active {
    transform: translateY(0) scale(0.98);
    color: #fff;
}

.btn-gradient:focus-visible {
    outline: 2px solid var(--mb-gradient-start);
    outline-offset: 2px;
    box-shadow: var(--mb-glow-primary);
    color: #fff;
}

/* ============================================
   12. 목록 아이템 (포인트, 스크랩 등)
   ============================================ */

.mb-list-item {
    padding: var(--gb-space-3) var(--gb-space-4);
    border-bottom: 1px solid var(--gb-gray-100);
    transition: all 0.2s ease;
}

.mb-list-item:last-child {
    border-bottom: none;
}

.mb-list-item:hover {
    background: var(--gb-gray-50);
    transform: translateY(-1px);
}

.mb-list-empty {
    text-align: center;
    color: var(--gb-gray-400);
    padding: var(--gb-space-8, 3rem) var(--gb-space-4);
    font-size: var(--gb-font-sm);
    border: 1px dashed var(--gb-gray-300);
    border-radius: var(--gb-radius-lg);
    background-color: var(--gb-gray-50);
}

.mb-list-empty::before {
    content: "\f15c";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    display: block;
    font-size: 2rem;
    color: var(--gb-gray-300);
    margin-bottom: var(--gb-space-3);
}

/* 소계 바 */
.mb-list-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-3) var(--gb-space-4);
    background: var(--gb-gray-50);
    border-top: 1px solid var(--gb-gray-200);
    border-radius: 0 0 var(--gb-radius-lg) var(--gb-radius-lg);
    font-weight: var(--gb-font-semibold);
    font-size: var(--gb-font-sm);
}

/* ============================================
   12a. 포인트 대시보드 (pt-*)
   ============================================ */

.pt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gb-space-3);
    margin-bottom: var(--gb-space-5);
}

.pt-stat-card {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    padding: var(--gb-space-4) var(--gb-space-5);
    background: var(--gb-surface-card);
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    transition: all var(--gb-transition-normal);
}

.pt-stat-card:hover {
    box-shadow: var(--gb-shadow);
    transform: translateY(-2px);
}

.pt-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--gb-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.pt-stat-icon-balance { background: var(--gb-primary-light); color: var(--gb-primary); }
.pt-stat-icon-plus    { background: var(--gb-success-light); color: var(--gb-success); }
.pt-stat-icon-minus   { background: var(--gb-danger-light); color: var(--gb-danger); }

.pt-stat-body { min-width: 0; }

.pt-stat-count {
    font-size: var(--gb-font-xl);
    font-weight: var(--gb-font-bold);
    line-height: 1;
    color: var(--gb-text-primary);
}

.pt-stat-label {
    font-size: var(--gb-font-xs);
    color: var(--gb-text-tertiary);
    margin-top: 0.125rem;
}

[data-theme="dark"] .pt-stat-icon-plus  { background: rgba(22, 163, 74, 0.15); }
[data-theme="dark"] .pt-stat-icon-minus { background: rgba(220, 38, 38, 0.15); }

.pt-list-wrap {
    background: var(--gb-surface-card);
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
}

.pt-list-item {
    padding: var(--gb-space-3) var(--gb-space-4);
    border-bottom: 1px solid var(--gb-border-subtle);
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.pt-list-item:last-child { border-bottom: none; }

.pt-list-item:hover {
    background: var(--gb-surface-raised);
    border-left-color: var(--gb-primary);
}

.pt-list-content {
    font-size: var(--gb-font-sm);
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-primary);
    margin-bottom: 0.125rem;
}

.pt-list-meta {
    font-size: var(--gb-font-xs);
    color: var(--gb-text-tertiary);
}

.pt-list-expire { color: var(--gb-text-tertiary); }

.pt-list-badge {
    font-size: var(--gb-font-sm) !important;
    min-width: 5rem;
    text-align: right;
    flex-shrink: 0;
}

.pt-list-item .text-decoration-line-through { opacity: 0.6; }

.pt-list-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-3) var(--gb-space-4);
    background: var(--gb-surface-sunken);
    border: 1px solid var(--gb-border-default);
    border-radius: var(--gb-radius-lg);
    font-weight: var(--gb-font-semibold);
    font-size: var(--gb-font-sm);
    margin-top: var(--gb-space-3);
    color: var(--gb-text-primary);
}

/* ── Scrap 전용 스타일 ── */

/* 스크랩 - 제목 링크 */
#scrap .mb-list-item h2 a {
    font-weight: var(--gb-font-medium);
    transition: color var(--gb-transition);
}

#scrap .mb-list-item h2 a:hover {
    color: var(--gb-primary) !important;
}

#scrap .mb-list-item {
    border-left: 3px solid transparent;
}

#scrap .mb-list-item:hover {
    border-left-color: var(--gb-primary);
}

/* 스크랩 삭제 버튼 */
#scrap .btn-outline-danger {
    opacity: 0.6;
    transition: all var(--gb-transition);
}

#scrap .mb-list-item:hover .btn-outline-danger {
    opacity: 1;
}

#scrap .btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.15);
}

/* 창닫기 버튼 */
#scrap .btn-secondary {
    transition: all var(--gb-transition);
}

#scrap .btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 포커스 상태 */
#scrap .btn:focus-visible,
#scrap .mb-list-item h2 a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ============================================
   13. 프로필 정보 항목
   ============================================ */

.mb-profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gb-space-3) 0;
    border-bottom: 1px solid var(--gb-gray-100);
    font-size: var(--gb-font-sm);
    transition: all 0.2s ease;
}

.mb-profile-item:last-child {
    border-bottom: none;
}

.mb-profile-item:hover {
    background: var(--gb-gray-50);
    border-radius: var(--gb-radius);
    padding-left: var(--gb-space-2);
    padding-right: var(--gb-space-2);
}

.mb-profile-item .mb-profile-label {
    color: var(--gb-gray-500);
}

.mb-profile-item .mb-profile-label i {
    width: 1.25em;
    text-align: center;
    margin-right: var(--gb-space-2);
}

.mb-profile-item .mb-profile-value {
    font-weight: var(--gb-font-medium);
    color: var(--gb-gray-800);
}

/* 프로필 아바타 글로우 링 */
.mb-profile-avatar img {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    border-radius: 50%;
}

/* ============================================
   14. 프로필 이미지
   ============================================ */

.profile_big_img img,
.profile_img img {
    border-radius: 50%;
    object-fit: cover;
}

.profile_big_img img {
    width: 52px;
    height: 52px;
}

/* ============================================
   15. 쪽지
   ============================================ */

/* 읽지 않은 쪽지 표시 */
.no_read {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--gb-primary);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

/* 쪽지 목록 아이템 hover */
.mb-memo-item {
    transition: background-color 0.15s ease;
}

.mb-memo-item:hover {
    background-color: var(--gb-gray-50);
}

/* ============================================
   16. 캡차
   ============================================ */

.captcha {
    display: block;
    margin: 0.5rem 0;
}

.captcha img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gb-radius);
}

/* ============================================
   17. 주소 입력 필드
   ============================================ */

.frm_address {
    margin-top: 0.5rem;
}

#mb_addr3,
#mb_addr_jibeon {
    display: block;
    margin-top: 0.5rem;
}

/* ============================================
   18. 아이콘/이미지 업로드
   ============================================ */

#reg_mb_icon,
#reg_mb_img {
    float: right;
}

.reg_mb_img_file img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gb-radius);
}

/* ============================================
   19. 본인인증
   ============================================ */

.cert_desc {
    color: var(--gb-primary);
}

.cert_req {
    margin-left: 0.5rem;
}

#msg_certify {
    margin: var(--gb-space-2) 0;
    padding: var(--gb-space-3);
    background: var(--gb-primary-light);
    border: 1px solid #dbeafe;
    border-radius: var(--gb-radius);
    text-align: center;
}

/* ============================================
   20. 동의 항목 (회원가입 폼)
   ============================================ */

.consent-line {
    display: flex;
    align-items: center;
}

.consent-date {
    margin-left: 1.25rem;
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-500);
}

.consent-group .sub-consents {
    padding: 0 1.25rem;
}

.js-open-consent {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: var(--gb-font-xs);
    color: var(--gb-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.js-open-consent:hover {
    color: var(--gb-primary-hover);
}

/* ============================================
   21. 툴팁 (그누보드 커스텀)
   ============================================ */

.tooltip_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gb-gray-400);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
    /* .btn-sm의 height: 32px 강제 해제 → 라벨 내 Y축 정렬 근본 수정 */
    height: auto;
    min-height: auto;
    padding: 0;
    line-height: 1;
}

.tooltip_icon:hover {
    color: var(--gb-primary);
}

/* ============================================
   22. 약관 동의 (register)
   ============================================ */

.mb-terms-content {
    border-radius: var(--gb-radius);
    padding: var(--gb-space-4);
    margin-bottom: var(--gb-space-3);
}

.mb-terms-content .form-control {
    max-height: 300px;
    font-size: 0.875rem;
    line-height: 1.7;
    border: none;
}

.mb-terms-content textarea {
    border: none;
    background: transparent;
    resize: none;
}

.mb-terms-agree {
    padding: var(--gb-space-3) 0;
}

.mb-terms-all {
    padding: var(--gb-space-4);
    border: 2px solid var(--gb-primary);
    border-radius: var(--gb-radius-lg);
}

/* ============================================
   23. 회원가입 결과 페이지
   ============================================ */

.mb-result-icon {
    color: var(--gb-primary);
    margin-bottom: var(--gb-space-4);
}

.mb-result-bounce {
    animation: scaleBounce 0.6s ease-out;
}

.mb-gradient-text {
    background: linear-gradient(135deg, var(--mb-gradient-start), var(--mb-gradient-mid), var(--mb-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mb-result-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mb-result-checklist li {
    padding: var(--gb-space-2) 0;
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-600);
}

.mb-result-checklist li i {
    color: var(--gb-success);
    margin-right: var(--gb-space-2);
}

/* ============================================
   24. 2단 그리드 폼 정렬
   ============================================ */

/* 2단 row 내 각 col을 flex-column으로 만들어 input 위치 통일 */
@media (min-width: 768px) {
    .mb-glass-section .row > [class*="col"],
    .mb-form-wrap .row > [class*="col"] {
        display: flex;
        flex-direction: column;
    }

    /* label은 고정 높이로 통일 (tooltip 버튼 포함 시에도 동일) */
    .mb-glass-section .row > [class*="col"] > .form-label,
    .mb-form-wrap .row > [class*="col"] > .form-label {
        min-height: 1.5rem;
        flex-shrink: 0;
    }
}

/* ============================================
   25. 마이크로인터랙션
   ============================================ */

/* 링크 전환 */
.mb-auth-body a,
.mb-form-wrap a,
.mb-section a:not(.btn) {
    transition: color 0.15s ease;
}

/* 버튼 전환 */
.mb-auth-body .btn,
.mb-form-wrap .btn,
.mb-actions .btn {
    transition: all 0.15s ease;
}

/* ============================================
   26. prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .mb-glass-card,
    .mb-glass-section,
    .mb-auth-wrap,
    .mb-form-wrap,
    .mb-result-bounce {
        animation: none;
    }

    .no_read {
        animation: none;
    }

    .mb-list-item,
    .mb-profile-item,
    .mb-memo-item,
    .btn-gradient,
    .mb-auth-body a,
    .mb-form-wrap a,
    .mb-section a:not(.btn),
    .mb-auth-body .btn,
    .mb-form-wrap .btn,
    .mb-actions .btn,
    .js-open-consent,
    .tooltip_icon {
        transition: none;
    }

    .pt-stat-card,
    .pt-list-item { transition: none; }
}

/* (backdrop-filter fallback 제거 — glass 효과 미사용) */

/* ============================================
   28. 반응형 조정
   ============================================ */

@media (max-width: 575.98px) {
    .mb-glass-section {
        padding: var(--gb-space-4);
        border-radius: var(--gb-radius);
    }

    .mb-auth-wrap {
        margin-top: var(--gb-space-4);
        padding: 1.25rem;
    }

    .profile_big_img img {
        width: 40px;
        height: 40px;
    }

    .mb-actions {
        flex-direction: column;
        gap: var(--gb-space-2);
    }

    .mb-actions .btn {
        width: 100%;
    }

    .mb-profile-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gb-space-1);
    }

    .pt-stats { grid-template-columns: 1fr; }
    .pt-stat-card { padding: var(--gb-space-3) var(--gb-space-4); }
}

/* ============================================
   29. SSO 우선 로그인 레이아웃
   ============================================ */

.mb-login-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .mb-login-split {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.mb-login-col-sso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--gb-gray-100);
}

@media (min-width: 768px) {
    .mb-login-col-sso {
        border-bottom: none;
        border-right: 1px solid var(--gb-gray-100);
        padding: 2.5rem;
    }
}

.mb-login-col-sso-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
}

.mb-login-col-sso-icon img {
    width: 100%;
    height: 100%;
}

.mb-login-col-sso-title {
    font-size: 1.5rem;
    font-weight: var(--gb-font-bold);
    color: var(--gb-text-primary);
    margin-bottom: var(--gb-space-3);
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.mb-login-col-sso-desc {
    font-size: var(--gb-font-base);
    color: var(--gb-text-tertiary);
    margin-bottom: 1.75rem;
    line-height: 1.7;
}

.mb-sso-signup-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gb-space-2);
    margin-top: var(--gb-space-4);
    font-size: var(--gb-font-sm);
    color: var(--gb-text-tertiary);
}

.mb-sso-signup-link a {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-primary);
    text-decoration: none;
}

.mb-sso-signup-link a:hover {
    text-decoration: underline;
}

.btn-sso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mb-gradient-start), var(--mb-gradient-mid), var(--mb-gradient-end));
    background-size: 200% 200%;
    background-position: 0 0;
    border: none;
    color: #fff;
    /* WCAG 1.4.3 대비 보강: 그라데이션 라이트 퍼플 구간(#a855f7)에서 흰 텍스트 대비 보강 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-weight: var(--gb-font-semibold);
    font-size: 1.05rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--gb-radius-lg);
    transition: all 0.3s ease;
    width: 100%;
    text-decoration: none;
}

.btn-sso:hover {
    background-position: 100% 0;
    box-shadow: var(--mb-glow-primary);
    transform: translateY(-1px) scale(1.01);
    color: #fff;
}

.btn-sso:active {
    transform: translateY(0) scale(0.98);
    color: #fff;
}

.btn-sso:focus-visible {
    outline: 2px solid var(--mb-gradient-start);
    outline-offset: 2px;
    box-shadow: var(--mb-glow-primary);
    color: #fff;
}

.mb-social-divider {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    margin: var(--gb-space-4) 0;
    color: var(--gb-text-quaternary, var(--gb-gray-400));
    font-size: var(--gb-font-xs);
}

.mb-social-divider::before,
.mb-social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gb-gray-100);
}

.mb-local-hint {
    text-align: center;
    font-size: var(--gb-font-sm);
    color: var(--gb-text-tertiary);
    margin-bottom: var(--gb-space-3);
}

.mb-login-col-local {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
    .mb-login-col-local {
        padding: 2.5rem;
    }
}

.mb-local-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gb-space-2);
    width: 100%;
    padding: 0.75rem 0;
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-medium);
    color: var(--gb-text-secondary);
    background: none;
    border: 1px solid var(--gb-gray-200);
    border-radius: var(--gb-radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.mb-local-toggle:hover {
    color: var(--gb-primary);
    border-color: var(--gb-primary);
    background: var(--gb-primary-light);
}

.mb-local-toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: var(--gb-font-xs);
}

.mb-local-toggle[aria-expanded="true"] .mb-local-toggle-icon {
    transform: rotate(180deg);
}

.mb-local-section {
    padding-top: var(--gb-space-4);
}

.mb-login-divider {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    padding: 0 var(--gb-space-5);
    color: var(--gb-text-quaternary, var(--gb-gray-400));
    font-size: var(--gb-font-sm);
}

.mb-login-divider::before,
.mb-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gb-gray-100);
}

@media (min-width: 768px) {
    .mb-login-divider {
        display: none;
    }
}

.mb-sso-signup-callout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gb-space-3);
    padding: var(--gb-space-5);
    background: var(--gb-primary-light);
    border: 1px solid var(--gb-border-default);
    border-left: 3px solid var(--mb-gradient-start);
    border-radius: var(--gb-radius-lg);
    margin-bottom: var(--gb-space-5);
}

.mb-sso-signup-callout-header {
    font-size: var(--gb-font-base);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-text-primary);
    margin: 0;
}

.mb-sso-signup-callout-desc {
    font-size: var(--gb-font-sm);
    color: var(--gb-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.mb-local-divider-label {
    display: flex;
    align-items: center;
    gap: var(--gb-space-3);
    margin: var(--gb-space-5) 0;
    padding: var(--gb-space-2) 0;
    font-size: var(--gb-font-sm);
    font-weight: 600;
    color: var(--gb-text-secondary);
    white-space: nowrap;
}

.mb-local-divider-label::before,
.mb-local-divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gb-border-secondary, var(--gb-gray-200));
}

@media (max-width: 575.98px) {
    .mb-auth-wrap.mb-auth-split {
        max-width: 100%;
        padding: 0;
    }

    .mb-auth-split .mb-auth-header {
        padding: 1.25rem;
    }

    .mb-auth-split .mb-auth-header h1 {
        font-size: 1.35rem;
    }

    .mb-login-col-sso,
    .mb-login-col-local {
        padding: 1.25rem;
    }

    .mb-login-col-sso-icon {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: 1rem;
    }

    .mb-login-col-sso-title {
        font-size: 1.25rem;
    }

    .btn-sso {
        font-size: var(--gb-font-base);
        padding: 0.75rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-sso,
    .mb-local-toggle,
    .mb-local-toggle-icon {
        transition: none;
    }
}