/**
 * 마이페이지 테마 — jmp-chat과 동일 팔레트 (user meta jmp_chat_theme 공유)
 * .jmp-mypage-wrapper[data-theme="..."] 로 프로필·JSeeds 동일 테마 적용
 */

/**
 * 버그픽스: .jmp-mypage-container도 테마 변수 직접 오버라이드
 * - common.css에서 .jmp-mypage-container가 기본 변수값을 직접 가지고 있었으나 제거
 * - 아래 규칙으로 테마 변수가 컨테이너 내부까지 확실히 적용됨
 */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="forest"]   .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="holy"]     .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="dawn"]     .jmp-mypage-container {
    background: var(--bg-root);
    color:      var(--text-1);
}

/* ── 핵심 수정: 카드/콘텐츠 wrapper에도 직접 변수 재선언 ──
 * 이유: 일부 브라우저/테마에서 CSS 변수 상속이 끊길 수 있어
 *       고특이도 셀렉터로 직접 선언하여 FOUC 없이 안정 적용.
 */
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="forest"]   .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="forest"]   .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="holy"]     .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="holy"]     .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="dawn"]     .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="dawn"]     .joyn-points-wrapper {
    background: var(--bg-root) !important;
    color:      var(--text-1)  !important;
}

/* joyn-card: 모든 테마에서 명시적 배경/테두리/글자색 */
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-card,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-card,
.jmp-mypage-wrapper[data-theme="forest"]   .joyn-card,
.jmp-mypage-wrapper[data-theme="forest"]   .jmp-card,
.jmp-mypage-wrapper[data-theme="holy"]     .joyn-card,
.jmp-mypage-wrapper[data-theme="holy"]     .jmp-card,
.jmp-mypage-wrapper[data-theme="dawn"]     .joyn-card,
.jmp-mypage-wrapper[data-theme="dawn"]     .jmp-card {
    background:   var(--bg-card)   !important;
    border-color: var(--border-1)  !important;
    color:        var(--text-1)    !important;
}

/* 기본: 인디고 블루 · HC Joyn */
.jmp-mypage-wrapper[data-theme="default"] {
    --bg-root:   #F2F2F2;
    --bg-1:      #ffffff;
    --bg-2:      #F8F8FF;
    --bg-3:      #F0F0FF;
    --bg-card:   #ffffff;
    --bg-input:  #F5F5F5;
    --text-1:    #222222;
    --text-2:    #555555;
    --text-3:    #737373;
    --border-1:  #E0E0E0;
    --border-2:  #F3F3F3;
    --brand:     #4541FF;
    --brand-light: #7B6FFF;
    --brand-dark: #3730E3;
    --brand-glow:  rgba(69, 65, 255, 0.12);
    --brand-contrast: #ffffff;
    --error:    #EF4444;
    --error-bg: rgba(239,68,68,.1);
    --success:  #10B981;
    --success-bg: rgba(16,185,129,.1);
}

/* 다크: 딥 네이비 */
.jmp-mypage-wrapper[data-theme="midnight"] {
    --bg-root:   #0d1117;
    --bg-1:      #161b22;
    --bg-2:      #1c2128;
    --bg-3:      #21262d;
    --bg-card:   #1c2128;
    --bg-input:  #21262d;
    --text-1:    #e6edf3;
    --text-2:    #8b949e;
    --text-3:    #484f58;
    --border-1:  #30363d;
    --border-2:   #21262d;
    --brand:     #58a6ff;
    --brand-light: #79b8ff;
    --brand-dark: #1f6feb;
    --brand-glow:  rgba(88, 166, 255, 0.15);
    --brand-contrast: #ffffff;
    --error:    #f85149;
    --error-bg: rgba(248,81,73,.15);
    --success:  #3fb950;
    --success-bg: rgba(63,185,80,.15);
}

/* 숲 · 자연: 다크 그린 */
.jmp-mypage-wrapper[data-theme="forest"] {
    --bg-root:   #0a1a0f;
    --bg-1:      #0f2318;
    --bg-2:      #142d1e;
    --bg-3:      #1a3326;
    --bg-card:   #142d1e;
    --bg-input:  #1a3326;
    --text-1:    #d1fae5;
    --text-2:    #6ee7b7;
    --text-3:    #34785a;
    --border-1:  #1e4d35;
    --border-2:   #1a3326;
    --brand:     #4ade80;
    --brand-light: #6ee7b7;
    --brand-dark: #16a34a;
    --brand-glow:  rgba(74, 222, 128, 0.15);
    --brand-contrast: #ffffff;
    --error:    #f87171;
    --error-bg: rgba(248,113,113,.15);
    --success:  #4ade80;
    --success-bg: rgba(74,222,128,.15);
}

/* 거룩한 금빛: 황금 성전 */
.jmp-mypage-wrapper[data-theme="holy"] {
    --bg-root:   #0f0a00;
    --bg-1:      #1a1200;
    --bg-2:      #221800;
    --bg-3:      #261c00;
    --bg-card:   #221800;
    --bg-input:  #261c00;
    --text-1:    #fef3c7;
    --text-2:    #fcd34d;
    --text-3:    #92662a;
    --border-1:  #3b2c00;
    --border-2:   #261c00;
    --brand:     #f59e0b;
    --brand-light: #fbbf24;
    --brand-dark: #d97706;
    --brand-glow:  rgba(245, 158, 11, 0.15);
    --brand-contrast: #ffffff;
    --error:    #ef4444;
    --error-bg: rgba(239,68,68,.15);
    --success:  #84cc16;
    --success-bg: rgba(132,204,22,.15);
}

/* 새벽 여명: 딥 퍼플 */
.jmp-mypage-wrapper[data-theme="dawn"] {
    --bg-root:   #0d0a1f;
    --bg-1:      #130d2e;
    --bg-2:      #1a1240;
    --bg-3:      #1e1442;
    --bg-card:   #1a1240;
    --bg-input:  #1e1442;
    --text-1:    #ede9fe;
    --text-2:    #c4b5fd;
    --text-3:    #6b5aab;
    --border-1:  #2e1f6b;
    --border-2:   #1e1442;
    --brand:     #a78bfa;
    --brand-light: #c4b5fd;
    --brand-dark: #7c3aed;
    --brand-glow:  rgba(167, 139, 250, 0.15);
    --brand-contrast: #ffffff;
    --error:    #f472b6;
    --error-bg: rgba(244,114,182,.15);
    --success:  #34d399;
    --success-bg: rgba(52,211,153,.15);
}

/* 테마별 루트 배경 적용 */
.jmp-mypage-wrapper[data-theme="midnight"],
.jmp-mypage-wrapper[data-theme="forest"],
.jmp-mypage-wrapper[data-theme="holy"],
.jmp-mypage-wrapper[data-theme="dawn"] {
    background: var(--bg-root);
    color: var(--text-1);
}
.jmp-mypage-wrapper[data-theme="default"] {
    background: var(--bg-root);
}

/* 테마 시 컨테이너·콘텐츠 폰트(텍스트) 색상 강제 적용 */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-container,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content {
    background: transparent;
    color: var(--text-1);
}
/* 본문·제목·테이블·라벨 등 테마 텍스트 색상 (기존 #333, #666 등 덮어씀) */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content h1,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content h2,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content h3,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content h4,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content p,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content span,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content td,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content label,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content li,
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content h1,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content h2,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content h3,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content h4,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content p,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content span,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content td,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content label,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content li,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content h1,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content h2,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content h3,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content h4,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content p,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content span,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content td,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content label,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content li,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-points-wrapper,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content h1,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content h2,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content h3,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content h4,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content p,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content span,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content td,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content label,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content li,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-profile-wrapper,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-points-wrapper {
    color: var(--text-1) !important;
}
/* 보조/약한 텍스트 (설명, 캡션, placeholder 텍스트) */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content .joyn-text-muted,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content .joyn-text-secondary,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content th,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content .joyn-text-muted,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content .joyn-text-secondary,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content th,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content .joyn-text-muted,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content .joyn-text-secondary,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content th,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content .joyn-text-muted,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content .joyn-text-secondary,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content th {
    color: var(--text-2) !important;
}
/* 입력 필드 (테마 배경/테두리/글자색) */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content input:not([type="submit"]):not([type="button"]):not([type="image"]),
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content textarea,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content select,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content input:not([type="submit"]):not([type="button"]):not([type="image"]),
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content textarea,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content select,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content input:not([type="submit"]):not([type="button"]):not([type="image"]),
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content textarea,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content select,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content input:not([type="submit"]):not([type="button"]):not([type="image"]),
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content textarea,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content select {
    color: var(--text-1) !important;
    background: var(--bg-input) !important;
    border-color: var(--border-1) !important;
}
/* 카드·리스트 배경 (테마) */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content .joyn-card,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content .jmp-card,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content .joyn-card,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content .jmp-card,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content .joyn-card,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content .jmp-card,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content .joyn-card,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content .jmp-card {
    background: var(--bg-card) !important;
    border-color: var(--border-1) !important;
    color: var(--text-1) !important;
}
/* 링크 색상 (테마 액센트) */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content a:not(.jmp-btn):not(.jmp-btn-primary):not(.jmp-btn-outline),
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content a:not(.jmp-btn):not(.jmp-btn-primary):not(.jmp-btn-outline),
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content a:not(.jmp-btn):not(.jmp-btn-primary):not(.jmp-btn-outline),
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content a:not(.jmp-btn):not(.jmp-btn-primary):not(.jmp-btn-outline) {
    color: var(--brand) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-content a:not(.jmp-btn):hover,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-content a:not(.jmp-btn):hover,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-content a:not(.jmp-btn):hover,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-content a:not(.jmp-btn):hover {
    color: var(--brand-light) !important;
}

/* ─── 프로필·JSeeds 콘텐츠 전반 테마 적용 (흰 배경/검정 글자 덮어씀) ─── */

/* JSeeds 안내 배너 (휴대폰 인증 필수) — 테마 배경/글자색 */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-notice-points-after-verify,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-notice-points-after-verify,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-notice-points-after-verify,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-notice-points-after-verify {
    background: var(--bg-2) !important;
    color: var(--text-1) !important;
    border-left-color: var(--brand) !important;
}

/* 모달 (프로필 수정 등) — 테마 배경/테두리/글자색 */
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-content,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-content,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-content,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-content {
    background: var(--bg-1) !important;
    border: 1px solid var(--border-1);
    color: var(--text-1);
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-header,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-header,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-header,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-header {
    border-bottom-color: var(--border-1);
    color: var(--text-1);
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-header h3,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-header h3,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-header h3,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-header h3 {
    color: var(--text-1) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-close,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-close,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-close,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-close {
    color: var(--text-2) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-close:hover,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-close:hover,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-close:hover,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-close:hover {
    color: var(--text-1) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-modal-body,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-modal-body,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-modal-body,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-modal-body {
    color: var(--text-1);
}
.jmp-mypage-wrapper[data-theme="midnight"] .form-group label,
.jmp-mypage-wrapper[data-theme="forest"] .form-group label,
.jmp-mypage-wrapper[data-theme="holy"] .form-group label,
.jmp-mypage-wrapper[data-theme="dawn"] .form-group label {
    color: var(--text-1) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .form-control,
.jmp-mypage-wrapper[data-theme="forest"] .form-control,
.jmp-mypage-wrapper[data-theme="holy"] .form-control,
.jmp-mypage-wrapper[data-theme="dawn"] .form-control {
    background: var(--bg-input) !important;
    border-color: var(--border-1);
    color: var(--text-1);
}
.jmp-mypage-wrapper[data-theme="midnight"] .form-group small,
.jmp-mypage-wrapper[data-theme="forest"] .form-group small,
.jmp-mypage-wrapper[data-theme="holy"] .form-group small,
.jmp-mypage-wrapper[data-theme="dawn"] .form-group small {
    color: var(--text-2) !important;
}

/* 교회 검색 결과 드롭다운 */
.jmp-mypage-wrapper[data-theme="midnight"] .church-search-results,
.jmp-mypage-wrapper[data-theme="forest"] .church-search-results,
.jmp-mypage-wrapper[data-theme="holy"] .church-search-results,
.jmp-mypage-wrapper[data-theme="dawn"] .church-search-results {
    background: var(--bg-1) !important;
    border-color: var(--border-1);
    color: var(--text-1);
}

/* 휴대폰 인증됨 뱃지 — 테마에서도 가독성 유지 */
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-phone-verified-badge,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-phone-verified-badge,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-phone-verified-badge,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-phone-verified-badge {
    color: var(--text-1) !important;
    background: var(--brand-glow) !important;
    border: 1px solid var(--border-1);
}

/* JSeeds 잔액 카드 외 기타 카드형 블록 (배경이 하얗게 남는 경우) */
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-points-wrapper .joyn-card:not(.balance-card),
.jmp-mypage-wrapper[data-theme="forest"] .joyn-points-wrapper .joyn-card:not(.balance-card),
.jmp-mypage-wrapper[data-theme="holy"] .joyn-points-wrapper .joyn-card:not(.balance-card),
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-points-wrapper .joyn-card:not(.balance-card) {
    background: var(--bg-card) !important;
    border-color: var(--border-1) !important;
    color: var(--text-1) !important;
}

/* 섹션 제목·기본 정보 라벨/값 (프로필·JSeeds 공통) */
.jmp-mypage-wrapper[data-theme="midnight"] .section-title,
.jmp-mypage-wrapper[data-theme="midnight"] .section-title i,
.jmp-mypage-wrapper[data-theme="midnight"] .info-label,
.jmp-mypage-wrapper[data-theme="midnight"] .info-value,
.jmp-mypage-wrapper[data-theme="forest"] .section-title,
.jmp-mypage-wrapper[data-theme="forest"] .section-title i,
.jmp-mypage-wrapper[data-theme="forest"] .info-label,
.jmp-mypage-wrapper[data-theme="forest"] .info-value,
.jmp-mypage-wrapper[data-theme="holy"] .section-title,
.jmp-mypage-wrapper[data-theme="holy"] .section-title i,
.jmp-mypage-wrapper[data-theme="holy"] .info-label,
.jmp-mypage-wrapper[data-theme="holy"] .info-value,
.jmp-mypage-wrapper[data-theme="dawn"] .section-title,
.jmp-mypage-wrapper[data-theme="dawn"] .section-title i,
.jmp-mypage-wrapper[data-theme="dawn"] .info-label,
.jmp-mypage-wrapper[data-theme="dawn"] .info-value {
    color: var(--text-1) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .info-label,
.jmp-mypage-wrapper[data-theme="forest"] .info-label,
.jmp-mypage-wrapper[data-theme="holy"] .info-label,
.jmp-mypage-wrapper[data-theme="dawn"] .info-label {
    color: var(--text-2) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] .joyn-profile-wrapper .badge,
.jmp-mypage-wrapper[data-theme="forest"] .joyn-profile-wrapper .badge,
.jmp-mypage-wrapper[data-theme="holy"] .joyn-profile-wrapper .badge,
.jmp-mypage-wrapper[data-theme="dawn"] .joyn-profile-wrapper .badge {
    background: var(--bg-2) !important;
    color: var(--text-1) !important;
    border-color: var(--border-1) !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] #jmp-mypage-hero,
.jmp-mypage-wrapper[data-theme="forest"] #jmp-mypage-hero,
.jmp-mypage-wrapper[data-theme="holy"] #jmp-mypage-hero,
.jmp-mypage-wrapper[data-theme="dawn"] #jmp-mypage-hero {
    background: var(--bg-1);
    color: var(--text-1);
    border-color: var(--border-1);
}


/* ═══════════════════════════════════════════════════════════════
   테마 트리거 버튼 — 모든 hero 배경에서 100% 가시성 보장
   ─ 핵심: 순백 고체 배경 + 테마별 짙은 아이콘색
     → 어떤 brand 그라디언트(파/초/금/보라) 위에서도 선명
   ─ ID + all:unset + !important 3중 Astra 격리
   ═══════════════════════════════════════════════════════════════ */

#jmp-mypage-theme-trigger,
.jmp-mypage-theme-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    flex-shrink:     0 !important;
    position:        relative !important;
    z-index:         10 !important;
    height:          36px !important;
    padding:         0 14px !important;
    border-radius:   99px !important;
    /* 순백 고체 배경 — 어떤 배경색에서도 최대 대비 */
    background:  #ffffff !important;
    border:      2px solid rgba(255,255,255,1) !important;
    box-shadow:
        0 3px 10px rgba(0,0,0,.25),
        0 1px  4px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    /* 텍스트: default 인디고 */
    color:          #3730e3 !important;
    font-family:    'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif !important;
    font-size:      13px !important;
    font-weight:    700 !important;
    letter-spacing: -.3px !important;
    line-height:    1 !important;
    white-space:    nowrap !important;
    text-shadow:    none !important;
    cursor:                     pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select:                 none !important;
    -webkit-user-select:         none !important;
    outline:                     none !important;
    transition: transform .14s ease, box-shadow .16s ease, background .16s ease !important;
}
#jmp-mypage-theme-trigger i,
.jmp-mypage-theme-trigger i {
    all: unset !important;
    display:     inline-block !important;
    font-size:   16px !important;
    line-height: 1 !important;
    color:       inherit !important;
    font-style:  normal !important;
    font-weight: normal !important;
    font-family: 'remixicon' !important;
    speak:       never !important;
    -webkit-font-smoothing: antialiased !important;
}
#jmp-mypage-theme-trigger .jmp-theme-btn-label,
.jmp-mypage-theme-trigger .jmp-theme-btn-label {
    all: unset !important;
    display: inline !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
#jmp-mypage-theme-trigger:hover,
.jmp-mypage-theme-trigger:hover {
    background: #f0f4ff !important;
    box-shadow:
        0 5px 18px rgba(0,0,0,.3),
        0 2px  6px rgba(0,0,0,.15),
        0 0 0 3px rgba(255,255,255,.55) !important;
    transform: translateY(-1px) scale(1.04) !important;
    color: #3730e3 !important;
}
#jmp-mypage-theme-trigger:active,
.jmp-mypage-theme-trigger:active {
    transform: scale(.95) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.2) !important;
    background: #e8eeff !important;
}
#jmp-mypage-theme-trigger:focus-visible,
.jmp-mypage-theme-trigger:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(55,48,227,.5) !important;
}
/* 테마별 아이콘색 — 각 brand-dark 컬러로 가독성 최대화 */
.jmp-mypage-wrapper[data-theme="midnight"] #jmp-mypage-theme-trigger,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-theme-trigger {
    color: #1f6feb !important;
}
.jmp-mypage-wrapper[data-theme="midnight"] #jmp-mypage-theme-trigger:hover,
.jmp-mypage-wrapper[data-theme="midnight"] .jmp-mypage-theme-trigger:hover {
    background: #e8f4ff !important; color: #1f6feb !important;
}
.jmp-mypage-wrapper[data-theme="forest"] #jmp-mypage-theme-trigger,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-theme-trigger {
    color: #16a34a !important;
}
.jmp-mypage-wrapper[data-theme="forest"] #jmp-mypage-theme-trigger:hover,
.jmp-mypage-wrapper[data-theme="forest"] .jmp-mypage-theme-trigger:hover {
    background: #e8fff0 !important; color: #16a34a !important;
}
.jmp-mypage-wrapper[data-theme="holy"] #jmp-mypage-theme-trigger,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-theme-trigger {
    color: #b45309 !important;
}
.jmp-mypage-wrapper[data-theme="holy"] #jmp-mypage-theme-trigger:hover,
.jmp-mypage-wrapper[data-theme="holy"] .jmp-mypage-theme-trigger:hover {
    background: #fffbeb !important; color: #b45309 !important;
}
.jmp-mypage-wrapper[data-theme="dawn"] #jmp-mypage-theme-trigger,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-theme-trigger {
    color: #7c3aed !important;
}
.jmp-mypage-wrapper[data-theme="dawn"] #jmp-mypage-theme-trigger:hover,
.jmp-mypage-wrapper[data-theme="dawn"] .jmp-mypage-theme-trigger:hover {
    background: #f5f0ff !important; color: #7c3aed !important;
}
/* 모바일: 레이블 숨기고 원형으로 */
@media (max-width: 480px) {
    #jmp-mypage-theme-trigger .jmp-theme-btn-label,
    .jmp-mypage-theme-trigger .jmp-theme-btn-label { display: none !important; }
    #jmp-mypage-theme-trigger,
    .jmp-mypage-theme-trigger {
        width: 36px !important; height: 36px !important; padding: 0 !important;
    }
    /* scale 호버가 좁은 화면에서 1px 단위 가로 오버플로·흔들림 유발 → 비활성 */
    #jmp-mypage-theme-trigger:hover,
    .jmp-mypage-theme-trigger:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   테마 드로어 — Astra 완전 격리 + 다크 글래스 패널
   ═══════════════════════════════════════════════════════════════ */

/* 드로어 전체 */
#jmp-mypage-theme-drawer,
.jmp-mypage-theme-drawer {
    all: initial !important;
    box-sizing: border-box !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;

    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    width:      300px !important;
    max-width:  88vw !important;
    height:     100% !important;
    height:     100dvh !important;

    /* 깊은 다크 패널 */
    background: linear-gradient(180deg, #1c2033 0%, #10131e 100%) !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        -12px 0 40px rgba(0,0,0,.5),
        -1px 0 0 rgba(255,255,255,.04) !important;

    z-index:         100020 !important;
    display:         flex !important;
    flex-direction:  column !important;
    overflow:        hidden !important;
    will-change:     transform !important;

    transform:  translateX(110%) !important;
    transition: transform .32s cubic-bezier(.32,.72,0,1) !important;
}
#jmp-mypage-theme-drawer.open,
.jmp-mypage-theme-drawer.open {
    transform: translateX(0) !important;
}

/* 드로어 헤더 */
#jmp-mypage-theme-drawer-header,
.jmp-mypage-theme-drawer-header {
    all:       initial !important;
    box-sizing: border-box !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;

    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         22px 20px 18px !important;
    flex-shrink:     0 !important;
    position:        relative !important;

    /* 구분선 대신 그라디언트 */
    border-bottom:   1px solid rgba(255,255,255,.06) !important;
}
/* 헤더 하단 미광 */
.jmp-mypage-theme-drawer-header::after {
    content:    '' !important;
    position:   absolute !important;
    bottom:     0 !important;
    left:       0 !important;
    right:      0 !important;
    height:     1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,.14) 60%, transparent 100%) !important;
    pointer-events: none !important;
}

/* 드로어 제목 */
.jmp-mypage-theme-drawer-title {
    all:        initial !important;
    box-sizing: border-box !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;

    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
    font-size:      15px !important;
    font-weight:    800 !important;
    color:          #f1f5f9 !important;
    letter-spacing: -.3px !important;
    line-height:    1.2 !important;
}
.jmp-mypage-theme-drawer-title::before {
    content:     '🎨' !important;
    font-size:   18px !important;
    line-height: 1 !important;
}

/* 닫기 버튼 */
#jmp-mypage-theme-drawer-close,
.jmp-mypage-theme-drawer-close {
    all:        unset !important;
    box-sizing: border-box !important;

    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           32px !important;
    height:          32px !important;
    border-radius:   8px !important;
    border:          1px solid rgba(255,255,255,.10) !important;
    background:      rgba(255,255,255,.05) !important;

    color:        #94a3b8 !important;
    font-size:    18px !important;
    line-height:  1 !important;
    font-family:  inherit !important;

    cursor:       pointer !important;
    flex-shrink:  0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transition:   background .15s, color .15s, border-color .15s !important;
}
#jmp-mypage-theme-drawer-close:hover,
.jmp-mypage-theme-drawer-close:hover {
    background:   rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.22) !important;
    color:        #f1f5f9 !important;
}

/* 테마 목록 영역 */
.jmp-mypage-theme-list {
    all:       initial !important;
    box-sizing: border-box !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;

    display:        flex !important;
    flex-direction: column !important;
    gap:            8px !important;
    padding:        16px 14px !important;
    overflow-y:     auto !important;
    flex:           1 !important;

    /* 스크롤바 */
    scrollbar-width:    thin !important;
    scrollbar-color:    rgba(255,255,255,.15) transparent !important;
}
.jmp-mypage-theme-list::-webkit-scrollbar       { width: 4px !important; }
.jmp-mypage-theme-list::-webkit-scrollbar-track  { background: transparent !important; }
.jmp-mypage-theme-list::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.15) !important; border-radius: 2px !important; }

/* 개별 테마 옵션 버튼 */
.jmp-mypage-theme-option {
    all:        unset !important;
    box-sizing: border-box !important;

    display:    flex !important;
    align-items:center !important;
    gap:        12px !important;
    width:      100% !important;
    padding:    12px 14px !important;
    min-height: 60px !important;

    background:    rgba(255,255,255,.04) !important;
    border:        1px solid rgba(255,255,255,.07) !important;
    border-radius: 12px !important;
    position:      relative !important;
    overflow:      hidden !important;

    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color:       #b8c5d6 !important;
    text-align:  left !important;
    cursor:      pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition:  background .18s, border-color .18s, transform .1s, box-shadow .18s !important;
}
/* 내부 광택 라인 */
.jmp-mypage-theme-option::before {
    content:    '' !important;
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    right:      0 !important;
    height:     1px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
    pointer-events: none !important;
}

.jmp-mypage-theme-option:hover {
    background:    rgba(255,255,255,.09) !important;
    border-color:  rgba(255,255,255,.18) !important;
    color:         #e8f0ff !important;
    transform:     translateX(3px) !important;
    box-shadow:    -3px 0 0 rgba(99,102,241,.6) !important;
}
.jmp-mypage-theme-option:active {
    transform: scale(.97) translateX(2px) !important;
}

/* 선택된 옵션 */
.jmp-mypage-theme-option.jmp-mypage-theme-option-selected {
    background:    rgba(99,102,241,.16) !important;
    border-color:  rgba(99,102,241,.5) !important;
    color:         #dde5ff !important;
    font-weight:   600 !important;
    box-shadow:    -3px 0 0 #6366f1, 0 0 0 1px rgba(99,102,241,.18) inset !important;
}
/* 체크마크 */
.jmp-mypage-theme-option.jmp-mypage-theme-option-selected::after {
    content:    '✓' !important;
    position:   absolute !important;
    right:      14px !important;
    top:        50% !important;
    transform:  translateY(-50%) !important;
    font-size:  14px !important;
    font-weight:700 !important;
    color:      #818cf8 !important;
    line-height:1 !important;
}

/* 이모지 스와치 배경 셀 */
.jmp-mypage-theme-swatch {
    all:           initial !important;
    box-sizing:    border-box !important;
    display:       inline-flex !important;
    align-items:   center !important;
    justify-content:center !important;
    flex-shrink:   0 !important;
    width:         42px !important;
    height:        42px !important;
    border-radius: 11px !important;
    font-size:     22px !important;
    line-height:   1 !important;
    background:    rgba(255,255,255,.06) !important;
    border:        1px solid rgba(255,255,255,.08) !important;
}
.jmp-mypage-theme-option.jmp-mypage-theme-option-selected .jmp-mypage-theme-swatch {
    background:  rgba(99,102,241,.2) !important;
    border-color:rgba(99,102,241,.4) !important;
}

/* 텍스트 컨테이너 */
.jmp-mypage-theme-option span:not(.jmp-mypage-theme-swatch) {
    display:     block !important;
    line-height: 1.3 !important;
}
.jmp-mypage-theme-name {
    all:        initial !important;
    box-sizing: border-box !important;
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
    display:    block !important;
    font-size:  13px !important;
    font-weight:700 !important;
    color:      inherit !important;
    line-height:1.3 !important;
    letter-spacing: -.2px !important;
}
.jmp-mypage-theme-desc {
    all:        initial !important;
    box-sizing: border-box !important;
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important;
    display:    block !important;
    font-size:  11px !important;
    font-weight:500 !important;
    color:      #4e637a !important;
    margin-top: 3px !important;
    line-height:1.3 !important;
    letter-spacing: 0 !important;
}
.jmp-mypage-theme-option:hover .jmp-mypage-theme-desc,
.jmp-mypage-theme-option.jmp-mypage-theme-option-selected .jmp-mypage-theme-desc {
    color: #7b93ad !important;
}

/* ─ 오버레이 ─ */
#jmp-mypage-theme-overlay,
.jmp-mypage-theme-overlay {
    all:        initial !important;
    box-sizing: border-box !important;

    position:       fixed !important;
    inset:          0 !important;
    background:     rgba(0, 0, 0, 0.6) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index:        100019 !important;
    opacity:        0 !important;
    pointer-events: none !important;
    transition:     opacity .28s ease !important;
    will-change:    opacity !important;
}
#jmp-mypage-theme-overlay.open,
.jmp-mypage-theme-overlay.open {
    opacity:       1 !important;
    pointer-events:all !important;
}

/* ─ 모바일: Bottom Sheet ─ */
@media (max-width: 480px) {
    #jmp-mypage-theme-drawer,
    .jmp-mypage-theme-drawer {
        top:          auto !important;
        left:         0 !important;
        right:        0 !important;
        bottom:       0 !important;
        width:        100% !important;
        max-width:    100% !important;
        height:       auto !important;
        max-height:   78dvh !important;
        border-left:  none !important;
        border-top:   1px solid rgba(255,255,255,.08) !important;
        border-radius:20px 20px 0 0 !important;
        transform:    translateY(110%) !important;
        box-shadow:   0 -10px 40px rgba(0,0,0,.55) !important;
    }
    #jmp-mypage-theme-drawer.open,
    .jmp-mypage-theme-drawer.open {
        transform: translateY(0) !important;
    }
    .jmp-mypage-theme-drawer-header {
        padding: 14px 20px 16px !important;
    }
    /* 드래그 핸들 */
    .jmp-mypage-theme-drawer-header::before {
        content:      '' !important;
        position:     absolute !important;
        top:          8px !important;
        left:         50% !important;
        transform:    translateX(-50%) !important;
        width:        36px !important;
        height:       4px !important;
        border-radius:2px !important;
        background:   rgba(255,255,255,.22) !important;
    }
}