/**
 * ENDEXAPI - 통합 스타일시트
 * 
 * ====================================
 * 목차 (Table of Contents)
 * ====================================
 * 
 * [기본 스타일]
 * 1. VARIABLES - CSS 변수 (기본)
 * 2. RESET - 기본 리셋 & 격리
 * 3. LAYOUT - 레이아웃
 * 4. NAVIGATION - 네비게이션
 * 5. BUTTONS - 버튼
 * 6. CARDS - 카드
 * 7. GALLERY - 갤러리 카드
 * 8. FORMS - 폼 요소
 * 9. TABLES - 테이블
 * 10. MODALS - 모달
 * 11. BADGES - 뱃지 & 상태
 * 12. ALERTS - 알림
 * 13. GUIDE - 가이드
 * 14. LOADING - 로딩 상태
 * 15. TABS - 탭
 * 16. CODE - 코드 블록
 * 17. STATS - 통계 카드
 * 18. PAGINATION - 페이지네이션
 * 19. SEARCH FILTER - 검색 필터
 * 20. BULK ACTIONS - 일괄 작업
 * 21. UTILITIES - 유틸리티
 * 22. WIDGETS - 위젯 영역
 * 23. RESPONSIVE - 반응형
 * 
 * [테마 & 다크모드]
 * 24. THEME SWITCHER - 테마 스위처 UI
 * 25. DARK MODE TOGGLE - 다크모드 토글
 * 26. COLOR THEMES - 컬러 테마 (5가지)
 * 27. DARK MODE - 다크모드 스타일
 * 28. DARK MODE EXTRAS - 다크모드 추가 스타일
 * 
 * [기타]
 * 29. MY-PROFILE - 마이페이지 (인스타그램 스타일)
 */

/* ================================================
   1. VARIABLES - CSS 변수 (기본)
   ================================================ */
   :root {
    --ex-white: #fff;
    --ex-black: #000;
    --ex-white-alpha-30: rgba(255, 255, 255, 0.3);
    --ex-primary: #3B82F6;
    --ex-primary-hover: #2563EB;
    --ex-primary-rgb: 59, 130, 246;
    --ex-primary-alpha-02: rgba(59, 130, 246, 0.02);
    --ex-primary-alpha-03: rgba(59, 130, 246, 0.03);
    --ex-primary-alpha-04: rgba(59, 130, 246, 0.04);
    --ex-primary-alpha-07: rgba(59, 130, 246, 0.07);
    --ex-primary-alpha-08: rgba(59, 130, 246, 0.08);
    --ex-primary-alpha-10: rgba(59, 130, 246, 0.1);
    --ex-primary-alpha-12: rgba(59, 130, 246, 0.12);
    --ex-primary-alpha-14: rgba(59, 130, 246, 0.14);
    --ex-primary-alpha-15: rgba(59, 130, 246, 0.15);
    --ex-primary-alpha-20: rgba(59, 130, 246, 0.2);
    --ex-primary-alpha-25: rgba(59, 130, 246, 0.25);
    --ex-primary-alpha-30: rgba(59, 130, 246, 0.3);
    --ex-primary-alpha-40: rgba(59, 130, 246, 0.4);
    --ex-success: #00b894;
    --ex-success-hover: #00a383;
    --ex-success-rgb: 0, 184, 148;
    --ex-success-alpha-07: rgba(0, 184, 148, 0.07);
    --ex-success-alpha-14: rgba(0, 184, 148, 0.14);
    --ex-success-alpha-25: rgba(0, 184, 148, 0.25);
    --ex-success-alpha-80: rgba(0, 184, 148, 0.8);
    --ex-warning: #fdcb6e;
    --ex-danger: #e17055;
    --ex-danger-rgb: 225, 112, 85;
    --ex-danger-alpha-07: rgba(225, 112, 85, 0.07);
    --ex-danger-alpha-10: rgba(225, 112, 85, 0.1);
    --ex-danger-alpha-14: rgba(225, 112, 85, 0.14);
    --ex-danger-alpha-15: rgba(225, 112, 85, 0.15);
    --ex-danger-alpha-20: rgba(225, 112, 85, 0.2);
    --ex-danger-alpha-25: rgba(225, 112, 85, 0.25);
    --ex-danger-alpha-30: rgba(225, 112, 85, 0.3);
    --ex-danger-alpha-40: rgba(225, 112, 85, 0.4);
    --ex-danger-alpha-80: rgba(225, 112, 85, 0.8);
    --ex-info: #2271b1;
    --ex-info-hover: #1a5a94;
    --ex-info-rgb: 34, 113, 177;
    --ex-info-alpha-07: rgba(34, 113, 177, 0.07);
    --ex-info-alpha-14: rgba(34, 113, 177, 0.14);
    --ex-info-alpha-25: rgba(34, 113, 177, 0.25);
    --ex-info-alpha-80: rgba(34, 113, 177, 0.8);
    --ex-gray: #636e72;
    --ex-gray-light: #f8f9fb;
    --ex-border: #d2d3d6; /* #ddd8e8; */
    --ex-shadow: 0 2px 8px rgba(108,92,231,0.12);
    --ex-shadow-inset-light: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    --ex-shadow-inset-medium: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    --ex-shadow-modal: 0 10px 40px rgba(0,0,0,0.3);
    --ex-overlay-dark: rgba(0, 0, 0, 0.5);
    --ex-overlay-modal: rgba(0, 0, 0, 0.6);
    --ex-status-pending-bg: #fef7e0;
    --ex-status-pending-color: #f57c00;
    --ex-status-approved-bg: #e8f5e8;
    --ex-status-approved-color: #137333;
    --ex-status-rejected-bg: #fce8e6;
    --ex-status-rejected-color: #d93025;
    --ex-status-requested-bg: #e8f0fe;
    --ex-status-requested-color: #1a73e8;
    --ex-alert-error-bg: #fce8e6;
    --ex-alert-error-color: #d93025;
    --ex-alert-error-border: #f9ab9e;
    --ex-alert-warning-bg: #fef7e0;
    --ex-alert-warning-color: #f57c00;
    --ex-alert-warning-border: #fdd663;
    --ex-alert-info-bg: #e8f0fe;
    --ex-alert-info-color: #1a73e8;
    --ex-alert-info-border: #aecbfa;
    --ex-code-bg: #1e1e1e;
    --ex-code-color: #d4d4d4;
    --ex-progress-bg: #e0e0e0;
    --ex-radius: 8px;
    --ex-radius-sm: 4px;
    --ex-method-get: #00d4aa;
    --ex-method-post: #ff6b6b;
    --ex-method-put: #4ecdc4;
    --ex-method-delete: #ff8a80;
}

/* 테마 변수 오버라이드 */
.endexapi-wrap {
    /* Primary Color: 블루 (기본값, PHP endexapi_get_theme_init과 동기화) */
    --ex-primary: #3B82F6;
    --ex-primary-hover: #2563EB;
    
    /* 
     * color-mix()를 사용한 자동 alpha 변수 생성
     * 테마 변경 시 --ex-primary만 바꾸면 모든 alpha가 자동 적용됨
     * 지원: Chrome 111+, Firefox 113+, Safari 16.2+ (2023년 이후 모든 주요 브라우저)
     */
    --ex-primary-alpha-02: color-mix(in srgb, var(--ex-primary) 2%, transparent);
    --ex-primary-alpha-03: color-mix(in srgb, var(--ex-primary) 3%, transparent);
    --ex-primary-alpha-04: color-mix(in srgb, var(--ex-primary) 4%, transparent);
    --ex-primary-alpha-07: color-mix(in srgb, var(--ex-primary) 7%, transparent);
    --ex-primary-alpha-08: color-mix(in srgb, var(--ex-primary) 8%, transparent);
    --ex-primary-alpha-10: color-mix(in srgb, var(--ex-primary) 10%, transparent);
    --ex-primary-alpha-12: color-mix(in srgb, var(--ex-primary) 12%, transparent);
    --ex-primary-alpha-14: color-mix(in srgb, var(--ex-primary) 14%, transparent);
    --ex-primary-alpha-15: color-mix(in srgb, var(--ex-primary) 15%, transparent);
    --ex-primary-alpha-20: color-mix(in srgb, var(--ex-primary) 20%, transparent);
    --ex-primary-alpha-25: color-mix(in srgb, var(--ex-primary) 25%, transparent);
    --ex-primary-alpha-30: color-mix(in srgb, var(--ex-primary) 30%, transparent);
    --ex-primary-alpha-40: color-mix(in srgb, var(--ex-primary) 40%, transparent);
    
    /* 더 부드러운 그림자 */
    --ex-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ex-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* 더 밝은 회색 배경 */
    --ex-gray-light: #F8F9FA;
    --ex-border: #E9ECEF;
    
    /* 둥근 모서리 조금 더 크게 */
    --ex-radius: 12px;
    --ex-radius-sm: 6px;
    
    /* 텍스트 색상 */
    --ex-text-title: #1F2937;
    --ex-text-body: #374151;
    --ex-text-muted: #6B7280;
    --ex-text-hint: #9CA3AF;
    
    /* 폼 요소 */
    --ex-input-bg: #ffffff;
    --ex-input-bg-hover: #FAFAFA;
    --ex-input-bg-disabled: #F3F4F6;
    --ex-input-bg-readonly: #F9FAFB;
    --ex-input-border: #E5E7EB;
    --ex-input-border-hover: #D1D5DB;
    --ex-input-text: #1F2937;
    --ex-input-text-disabled: #9CA3AF;
    --ex-input-text-readonly: #6B7280;
    --ex-input-placeholder: #9CA3AF;
    --ex-input-icon: #6B7280;
    --ex-input-icon-hover: #4B5563;
    --ex-input-icon-disabled: #D1D5DB;
    --ex-label-text: #374151;

    /* Chat (Cursor-style) */
    --ex-chat-user-bg: #F8F9FA;
    --ex-chat-user-label: #4B5563;
    --ex-chat-assistant-bg: #FFFFFF;
    --ex-chat-assistant-label: #2563EB;
    --ex-chat-assistant-border: 1px solid #E5E7EB;
}


/* ================================================
   2. RESET - 기본 리셋 & 격리
   ================================================ */
.endexapi-wrap {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    line-height: normal;
}

.endexapi-wrap input:hover,
.endexapi-wrap select:hover,
.endexapi-wrap textarea:hover,
.endexapi-wrap input:focus,
.endexapi-wrap select:focus,
.endexapi-wrap textarea:focus  {
    background-color: revert;
    color: revert;
    border-style: solid;
}

.endexapi-wrap *:hover,
.endexapi-wrap *:focus {
    outline: none;
}

.endexapi-wrap a {
    text-decoration: none !important;
}

.endexapi-wrap button {
    padding: 0;
    box-shadow: revert;
}

.endexapi-wrap table, .endexapi-wrap td, .endexapi-wrap th {
    border: none !important;
}

/* ================================================
   3. LAYOUT - 레이아웃
   ================================================ */
.endexapi-wrap {
    background: #F5F7FA;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.endexapi-wrap .ex-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.endexapi-wrap .ex-wrap {
    max-width: 100%;
    padding: 0;
    display: flex;
    flex: 1;
}

body:not(.wp-admin) .endexapi-wrap .ex-wrap {
    margin: 0 auto;
}


.endexapi-wrap .ex-sidebar {
    width: 260px;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    border-right: 1px solid var(--ex-border);
    background: var(--ex-white);
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 100;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

/* 사이드바 프로필 요약 */
.endexapi-wrap .ex-sidebar-profile {
    margin-top: auto;
    border-top: 1px solid var(--ex-border);
    padding: 16px 20px;
}

.endexapi-wrap .ex-sidebar-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.endexapi-wrap .ex-sidebar-credit:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.endexapi-wrap .ex-sidebar-credit-label {
    font-size: 12px;
    opacity: 0.9;
}

.endexapi-wrap .ex-sidebar-credit-value {
    font-size: 18px;
    font-weight: 700;
}

.endexapi-wrap .ex-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.endexapi-wrap .ex-sidebar-user:hover {
    background: var(--ex-bg-hover);
}

.endexapi-wrap .ex-sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.endexapi-wrap .ex-sidebar-userinfo {
    flex: 1;
    min-width: 0;
}

.endexapi-wrap .ex-sidebar-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.endexapi-wrap .ex-sidebar-useremail {
    font-size: 12px;
    color: var(--ex-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 사이드바 닫힘 상태에서 프로필 요약 숨김 */
.endexapi-wrap .ex-sidebar.collapsed .ex-sidebar-profile,
.endexapi-wrap.sidebar-collapsed .ex-sidebar-profile {
    display: none;
}

/* 모바일 프로필 요약 */
.endexapi-wrap .ex-mobile-profile {
    margin-top: auto;
    border-top: 1px solid var(--ex-border);
    padding: 16px 20px;
}

.endexapi-wrap .ex-mobile-credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.endexapi-wrap .ex-mobile-credit:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.endexapi-wrap .ex-mobile-credit:active {
    transform: translateY(0);
}

.endexapi-wrap .ex-mobile-credit-label {
    font-size: 12px;
    opacity: 0.9;
}

.endexapi-wrap .ex-mobile-credit-value {
    font-size: 18px;
    font-weight: 700;
}

.endexapi-wrap .ex-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.endexapi-wrap .ex-mobile-user:hover {
    background: var(--ex-bg-hover);
}

.endexapi-wrap .ex-mobile-user:active {
    background: var(--ex-bg-secondary);
}

.endexapi-wrap .ex-mobile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.endexapi-wrap .ex-mobile-userinfo {
    flex: 1;
    min-width: 0;
}

.endexapi-wrap .ex-mobile-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--ex-text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.endexapi-wrap .ex-mobile-useremail {
    font-size: 12px;
    color: var(--ex-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.endexapi-wrap .ex-content {
    flex: 1;
    min-width: 0;
    padding: 24px 32px;
    background: var(--ex-input-bg-hover);
    overflow-y: auto;
}

/* 페이지 헤더 */
.endexapi-wrap .ex-page-header {
    margin-bottom: 24px;
}

.endexapi-wrap .ex-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ex-text-title);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.endexapi-wrap .ex-page-subtitle {
    font-size: 13px;
    color: var(--ex-text-muted);
    margin: 0;
}

/* 헤더바/푸터바가 있을 때 레이아웃 조정 */
.endexapi-wrap.has-header .ex-layout {
    padding-top: 0;
}

.endexapi-wrap.has-footer .ex-layout {
    padding-bottom: 0;
}

.endexapi-wrap.has-header .ex-content {
    padding-top: 24px;
}

.endexapi-wrap.has-footer .ex-content {
    padding-bottom: 24px;
}


/* ================================================
   4. NAVIGATION - 네비게이션
   ================================================ */
.endexapi-wrap .ex-mode-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-bottom: none;
    margin-top: 8px;
}

.endexapi-wrap .ex-toggle-switch {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.endexapi-wrap .ex-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.endexapi-wrap .ex-toggle-label {
    position: relative;
    display: block;
    width: 100%;
    height: 44px;
    background: var(--ex-gray-light);
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: var(--ex-shadow-inset-light);
}

.endexapi-wrap .ex-toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--ex-primary);
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px var(--ex-primary-alpha-40);
    z-index: 2;
}

.endexapi-wrap .ex-toggle-input:checked + .ex-toggle-label .ex-toggle-slider {
    transform: translateX(100%);
}

.endexapi-wrap .ex-toggle-label-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    pointer-events: none;
    width: 50%;
    text-align: center;
}

.endexapi-wrap .ex-toggle-label-left {
    left: 0;
    color: var(--ex-white);
}

.endexapi-wrap .ex-toggle-label-right {
    left: 50%;
    color: var(--ex-gray);
}

.endexapi-wrap .ex-toggle-input:checked + .ex-toggle-label .ex-toggle-label-left {
    color: var(--ex-gray);
}

.endexapi-wrap .ex-toggle-input:checked + .ex-toggle-label .ex-toggle-label-right {
    color: var(--ex-white);
}

.endexapi-wrap .ex-toggle-label:hover {
    box-shadow: var(--ex-shadow-inset-medium);
}

.endexapi-wrap .ex-toggle-label:hover .ex-toggle-slider {
    background: var(--ex-primary-hover);
}

.endexapi-wrap .ex-toggle-switch.disabled .ex-toggle-label {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.endexapi-wrap .ex-toggle-switch.disabled .ex-toggle-input:disabled {
    cursor: not-allowed;
}

.endexapi-wrap .ex-toggle-switch.disabled .ex-toggle-label:hover {
    box-shadow: var(--ex-shadow-inset-light);
}

.endexapi-wrap .ex-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.endexapi-wrap .ex-menu-item {
    margin: 0;
    position: relative;
}

.endexapi-wrap .ex-menu-link {
    display: block;
    padding: 14px 24px;
    color: var(--ex-gray);
    text-decoration: none;
    border-left: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.endexapi-wrap .ex-menu-link:hover {
    background: var(--ex-primary-alpha-07);
    color: var(--ex-primary);
}

.endexapi-wrap .ex-menu-link.active {
    background: var(--ex-primary-alpha-10);
    border-left: none;
    color: var(--ex-primary);
    font-weight: 600;
}

.endexapi-wrap .ex-menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.endexapi-wrap .ex-menu-icon svg {
    width: 18px;
    height: 18px;
    stroke: #374151;
    stroke-width: 1.8;
    fill: none;
}

/* AI 메뉴 스타일 */
.endexapi-wrap .ex-ai-menu {
    border-bottom: 1px solid var(--ex-border);
    padding-bottom: 8px;
    margin-bottom: 0;
}

.endexapi-wrap .ex-mobile-header {
    display: none;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ex-white);
}

.endexapi-wrap .ex-mobile-mode {
    display: flex;
    align-items: center;
    flex: 1;
}

.endexapi-wrap .ex-mobile-mode .ex-toggle-switch {
    width: 100%;
    max-width: 200px;
}

.endexapi-wrap .ex-hamburger,
.endexapi-wrap .ex-hamburger:hover,
.endexapi-wrap .ex-hamburger:focus {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ex-primary);
    background: var(--ex-white);
    color: var(--ex-primary);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.endexapi-wrap .ex-hamburger svg {
    width: 20px;
    height: 20px;
    stroke: var(--ex-primary);
    stroke-width: 2;
    fill: none;
}

.endexapi-wrap .ex-mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ex-overlay-dark);
    z-index: 1000;
}

.endexapi-wrap .ex-mobile-menu-overlay.active {
    display: block;
}

.endexapi-wrap .ex-mobile-menu {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: var(--ex-white);
    z-index: 1001;
    transition: left 0.3s;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.endexapi-wrap .ex-mobile-menu-overlay.active .ex-mobile-menu {
    left: 0;
}

.endexapi-wrap .ex-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--ex-border);
}

.endexapi-wrap .ex-mobile-menu-header .ex-mobile-mode {
    flex: 1;
    margin-right: 12px;
}

.endexapi-wrap .ex-mobile-menu-header .ex-toggle-switch {
    width: 100%;
    max-width: 200px;
}

.endexapi-wrap .ex-mobile-menu-close,
.endexapi-wrap .ex-mobile-menu-close:hover,
.endexapi-wrap .ex-mobile-menu-close:focus {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.endexapi-wrap .ex-mobile-menu-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--ex-primary);
    stroke-width: 2;
    fill: none;
}

.endexapi-wrap .ex-sidebar,
.endexapi-wrap .ex-sidebar * {
    transition: none !important;
}

.endexapi-wrap .ex-menu-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--ex-primary);
    border-radius: 0 4px 4px 0;
}



/* 메뉴 구분선 */
.endexapi-wrap .ex-menu-divider {
    height: 1px;
    background: var(--ex-border);
    margin: 12px 24px;
}

/* 메뉴 그룹 제목 */
.endexapi-wrap .ex-menu-group-title {
    padding: 20px 24px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ex-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 사이드바 토글 버튼 - 고정 위치 */
.endexapi-wrap .ex-sidebar-toggle {
    position: fixed;
    left: 260px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 56px;
    background: var(--ex-white);
    border: 1px solid var(--ex-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    padding: 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}

.endexapi-wrap .ex-sidebar-toggle svg {
    width: 14px;
    height: 14px;
    color: var(--ex-gray);
}

.endexapi-wrap .ex-sidebar-toggle:hover {
    background: var(--ex-primary-alpha-07);
}

.endexapi-wrap .ex-sidebar-toggle:hover svg {
    color: var(--ex-primary);
}

/* 사이드바 접힌 상태 */
.endexapi-wrap .ex-sidebar.collapsed {
    width: 72px;
    overflow: visible;
    height: 100vh;
}

.endexapi-wrap .ex-sidebar.collapsed + .ex-content .ex-sidebar-toggle,
.endexapi-wrap.sidebar-collapsed .ex-sidebar-toggle {
    left: 72px;
}

.endexapi-wrap.sidebar-collapsed .ex-sidebar-toggle svg {
    transform: rotate(180deg);
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu-group-title,
.endexapi-wrap .ex-sidebar.collapsed .ex-mode-switcher,
.endexapi-wrap .ex-sidebar.collapsed .ex-theme-switcher {
    display: none;
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu {
    overflow: hidden;
    margin-top: 10px;
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu-link {
    padding: 14px 0;
    justify-content: center;
    font-size: 0;
    line-height: 0;
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu-link::after {
    content: none;
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu-icon {
    margin: 0;
    font-size: 20px;
    line-height: 1;
}

.endexapi-wrap .ex-sidebar.collapsed .ex-menu-link.active::before {
    height: 32px;
}

/* 헤더바가 있을 때 사이드바 위치 조정 */
.endexapi-wrap.has-header .ex-sidebar {
    top: 64px;
    height: calc(100vh - 86px);
    /* max-height: calc(100vh - 64px); */
}

.endexapi-wrap.has-header.has-footer .ex-sidebar {
    top: 64px;
    /* height: 100vh; */
    /* max-height: 100vh; */
}

/* 푸터만 있을 때 사이드바 높이 조정 */
.endexapi-wrap.has-footer:not(.has-header) .ex-sidebar {
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
}

/* 헤더바가 있을 때 사이드바 토글 버튼 위치 조정 */
.endexapi-wrap.has-header .ex-sidebar-toggle {
    top: calc(50% + 32px);
}

.endexapi-wrap.has-header.has-footer .ex-sidebar-toggle {
    top: calc(50% + 32px);
}




/* 헤더바 */
.endexapi-wrap .ex-header {
    height: 64px;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--ex-border);
    background: var(--ex-white);
    position: sticky;
    top: 0;
    z-index: 102;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.endexapi-wrap .ex-header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.endexapi-wrap .ex-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ex-text-title);
    margin: 0;
}

.endexapi-wrap .ex-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.endexapi-wrap .ex-header-link {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-text);
    text-decoration: none;
    border-radius: var(--ex-radius-sm);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.endexapi-wrap .ex-header-link:hover {
    background: var(--ex-primary-alpha-07);
    color: var(--ex-primary);
}

.endexapi-wrap .ex-header-link.active {
    background: var(--ex-primary-alpha-10);
    color: var(--ex-primary);
}

/* 헤더바 언어 드롭다운 */
.endexapi-wrap .ex-header-lang-dropdown {
    position: relative;
    margin-right: 8px;
}

.endexapi-wrap .ex-header-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--ex-text);
}

.endexapi-wrap .ex-header-lang-btn:hover {
    background: var(--ex-primary-alpha-07);
    border-color: var(--ex-primary);
}

.endexapi-wrap .ex-lang-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.endexapi-wrap .ex-lang-icon svg {
    width: 16px;
    height: 16px;
    stroke: #374151;
    stroke-width: 1.8;
    fill: none;
}

.endexapi-wrap .ex-flag-icon {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
}

.endexapi-wrap .ex-lang-current {
    font-weight: 500;
}

.endexapi-wrap .ex-lang-menu {
    min-width: 140px;
}

.endexapi-wrap .ex-lang-menu .ex-header-dropdown-item {
    padding: 10px 14px;
}

.endexapi-wrap .ex-lang-menu .ex-header-dropdown-item.active {
    background: var(--ex-primary-alpha-07);
    color: var(--ex-primary);
    font-weight: 600;
}

/* 언어 메뉴 아이템 로딩 상태 */
.endexapi-wrap .ex-lang-menu .ex-header-dropdown-item.loading {
    pointer-events: none;
    opacity: 0.8;
}

.endexapi-wrap .ex-lang-menu .ex-header-dropdown-item.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: auto;
    border: 2px solid var(--ex-primary-alpha-30);
    border-top-color: var(--ex-primary);
    border-radius: 50%;
    animation: ex-btn-spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* 헤더바 프로필 드롭다운 */
.endexapi-wrap .ex-header-account-settings-dropdown {
    position: relative;
}

.endexapi-wrap .ex-header-account-settings-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--ex-text);
}

.endexapi-wrap .ex-header-account-settings-btn:hover {
    background: var(--ex-primary-alpha-07);
    border-color: var(--ex-primary);
}

.endexapi-wrap .ex-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.endexapi-wrap .ex-header-username {
    font-weight: 500;
    color: var(--ex-text);
}

.endexapi-wrap .ex-header-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--ex-text-muted);
    transition: transform 0.2s;
}

.endexapi-wrap .ex-header-dropdown-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.endexapi-wrap .ex-header-account-settings-dropdown.active .ex-header-dropdown-icon {
    transform: rotate(180deg);
}

.endexapi-wrap .ex-header-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--ex-white);
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow-lg);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.endexapi-wrap .ex-header-dropdown-menu.active {
    display: block;
}

.endexapi-wrap .ex-header-dropdown-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.endexapi-wrap .ex-header-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.endexapi-wrap .ex-header-dropdown-userinfo {
    flex: 1;
    min-width: 0;
}

.endexapi-wrap .ex-header-dropdown-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--ex-text-title);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.endexapi-wrap .ex-header-dropdown-email {
    font-size: 12px;
    color: var(--ex-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.endexapi-wrap .ex-header-dropdown-divider {
    height: 1px;
    background: var(--ex-border);
    margin: 8px 0;
}

.endexapi-wrap .ex-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--ex-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
}

.endexapi-wrap .ex-header-dropdown-item:hover {
    background: var(--ex-primary-alpha-07);
    color: var(--ex-primary);
}

.endexapi-wrap .ex-header-dropdown-item:active {
    background: var(--ex-primary-alpha-10);
}

.endexapi-wrap .ex-header-dropdown-item .ex-header-dropdown-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.endexapi-wrap .ex-header-dropdown-item:hover .ex-header-dropdown-icon {
    opacity: 1;
}

/* 헤더바 모바일 반응형 */
@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-header {
        padding: 0 16px;
    }
    
    .endexapi-wrap .ex-header-title {
        font-size: 16px;
    }
    
    .endexapi-wrap .ex-header-username {
        display: none;
    }
    
    .endexapi-wrap .ex-header-account-settings-btn {
        padding: 6px;
        gap: 6px;
    }
    
    .endexapi-wrap .ex-header-dropdown-menu {
        right: 0;
        left: auto;
        min-width: 200px;
    }
    
    .endexapi-wrap .ex-header-actions {
        gap: 8px;
    }
    
    .endexapi-wrap .ex-header-actions .ex-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* 푸터바 */
.endexapi-wrap .ex-footer {
    width: 100%;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--ex-border);
    background: var(--ex-white);
    padding: 24px 32px;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.endexapi-wrap .ex-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

.endexapi-wrap .ex-footer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.endexapi-wrap .ex-footer-company {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.endexapi-wrap .ex-footer-address {
    font-size: 13px;
    color: var(--ex-text-muted);
    line-height: 1.6;
}

.endexapi-wrap .ex-footer-info {
    font-size: 12px;
    color: var(--ex-text-muted);
    line-height: 1.8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.endexapi-wrap .ex-footer-separator {
    color: var(--ex-text-muted);
    opacity: 0.5;
}

.endexapi-wrap .ex-footer-contact {
    font-size: 13px;
    color: var(--ex-text-muted);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.endexapi-wrap .ex-footer-email {
    color: var(--ex-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.endexapi-wrap .ex-footer-email:hover {
    color: var(--ex-primary-hover, var(--ex-primary));
    text-decoration: underline;
}

.endexapi-wrap .ex-footer-time {
    color: var(--ex-text-muted);
}

.endexapi-wrap .ex-footer-copyright {
    font-size: 13px;
    color: var(--ex-text-muted);
    margin-top: 4px;
}

.endexapi-wrap .ex-footer-links {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
}

.endexapi-wrap .ex-footer-link {
    font-size: 13px;
    color: var(--ex-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.endexapi-wrap .ex-footer-link:hover {
    color: var(--ex-primary);
}

/* 푸터 반응형 */
@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-footer {
        padding: 20px 16px;
    }
    
    .endexapi-wrap .ex-footer-inner {
        flex-direction: column;
        gap: 20px;
    }
    
    .endexapi-wrap .ex-footer-main {
        width: 100%;
    }
    
    .endexapi-wrap .ex-footer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .endexapi-wrap .ex-footer-separator {
        display: none;
    }
    
    .endexapi-wrap .ex-footer-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .endexapi-wrap .ex-footer-links {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media screen and (max-width: 1024px) {
    .endexapi-wrap .ex-footer-info {
        font-size: 11px;
    }
    
    .endexapi-wrap .ex-footer-address,
    .endexapi-wrap .ex-footer-contact,
    .endexapi-wrap .ex-footer-copyright {
        font-size: 12px;
    }
}

/* 상단 헤더바 (Topbar) */
.endexapi-wrap .ex-topbar {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 64px;
    background: var(--ex-white);
    border-bottom: 1px solid var(--ex-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 99;
}

.endexapi-wrap .ex-topbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ex-text-title);
}

.endexapi-wrap .ex-topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.endexapi-wrap .ex-user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.endexapi-wrap .ex-user-menu:hover {
    background: var(--ex-input-bg-hover);
}

.endexapi-wrap .ex-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ex-primary-alpha-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--ex-primary);
}

.endexapi-wrap .ex-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-text-body);
}

/* 탑바가 있을 때 콘텐츠 영역 조정 */
.endexapi-wrap.has-topbar .ex-content {
    padding-top: 88px;
}

/* 모바일 테마 스위처 */
.endexapi-wrap .ex-mobile-theme-switcher {
    margin-top: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--ex-border);
    border-radius: 0;
}

.endexapi-wrap .ex-mobile-theme-switcher .ex-menu-group-title {
    padding: 0 0 12px 0;
}

/* ================================================
   5. BUTTONS - 버튼
   ================================================ */
.endexapi-wrap .ex-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: var(--ex-radius-sm);
    font-size: 13px;
    font-weight: 500;
    /* line-height: 1.4; */
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    background: var(--ex-primary);
    color: white;
    transition: all 0.2s ease;
    outline: none;
    position: relative;
    margin: 0;
    box-sizing: border-box;
}

.endexapi-wrap .ex-btn:hover:not(:disabled):not(.loading) {
    background: var(--ex-primary-hover);
}

.endexapi-wrap .ex-btn-sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
}

.endexapi-wrap .ex-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.endexapi-wrap .ex-btn-secondary {
    background: var(--ex-primary-alpha-08);
    color: var(--ex-primary);
    border: 1px solid var(--ex-primary-alpha-20);
}

.endexapi-wrap .ex-btn-secondary:hover:not(:disabled):not(.loading) {
    background: var(--ex-primary-alpha-15);
    color: var(--ex-primary);
    border-color: var(--ex-primary-alpha-30);
}

.endexapi-wrap .ex-btn-danger {
    background: var(--ex-danger-alpha-07);
    color: var(--ex-danger);
    border: 1px solid var(--ex-danger-alpha-14);
}

.endexapi-wrap .ex-btn-danger:hover:not(:disabled):not(.loading) {
    background: var(--ex-danger-alpha-15);
    color: var(--ex-danger);
    border-color: var(--ex-danger-alpha-30);
}

.endexapi-wrap .ex-btn-success {
    background: var(--ex-success);
    color: var(--ex-white);
}

.endexapi-wrap .ex-btn-success:hover:not(:disabled):not(.loading) {
    background: var(--ex-success-hover);
}

.endexapi-wrap .ex-btn-info {
    background: var(--ex-info);
    color: var(--ex-white);
}

.endexapi-wrap .ex-btn-info:hover:not(:disabled):not(.loading) {
    background: var(--ex-info-hover);
}

.endexapi-wrap .ex-btn.loading {
    opacity: 1;
    cursor: wait;
    pointer-events: none;
}

.endexapi-wrap .ex-btn.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid var(--ex-primary-alpha-30);
    border-top-color: var(--ex-primary);
    border-radius: 50%;
    animation: ex-btn-spin 0.6s linear infinite;
}

/* Primary 버튼 로딩 - 흰색 스피너 */
.endexapi-wrap .ex-btn-primary.loading::after {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Primary 버튼 로딩 - 흰색 스피너 */
.endexapi-wrap .ex-btn-danger.loading::after {
    border: 2px solid var(--ex-danger-alpha-30);
    border-top-color: var(--ex-danger);
}

/* 프리뷰 공유 버튼, 저장 버튼: 로딩 시 아이콘 숨기고 스피너만 표시 */
.endexapi-wrap #ex-btn-publish-gallery.loading svg,
.endexapi-wrap #ex-btn-unpublish-gallery.loading svg,
.endexapi-wrap #ex-btn-save-code.loading svg {
    display: none !important;
}

.endexapi-wrap #ex-btn-publish-gallery.loading::after,
.endexapi-wrap #ex-btn-unpublish-gallery.loading::after,
.endexapi-wrap #ex-btn-save-code.loading::after {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 0 !important;
    border: 2px solid var(--ex-primary-alpha-30) !important;
    border-top-color: var(--ex-primary) !important;
    border-radius: 50% !important;
    animation: ex-btn-spin-centered 0.6s linear infinite !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

.endexapi-wrap #ex-btn-save-code.ex-btn-primary.loading::after {
    border: 2px solid white !important;
    border-top-color: var(--ex-primary-alpha-40) !important;
}

/* 채팅 창 내 공개 버튼: 로딩 시 스피너를 우측에 표시 */
.endexapi-wrap .ex-search-btn.loading[onclick*="aiPublishToGallery"]::after,
.endexapi-wrap .ex-search-btn.loading[onclick*="publishToGallery"]::after {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 8px !important;
    border: 2px solid var(--ex-primary-alpha-30) !important;
    border-top-color: var(--ex-primary) !important;
    border-radius: 50% !important;
    animation: ex-btn-spin 0.6s linear infinite !important;
}

.endexapi-wrap #ai-send-btn.loading::after {
    border: 2px solid white !important;
    border-top-color: var(--ex-primary-alpha-40) !important;
}

@keyframes ex-btn-spin {
    to { transform: rotate(360deg); }
}

@keyframes ex-btn-spin-centered {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.endexapi-wrap .ex-btn-primary.loading {
    background: var(--ex-primary);
}

.endexapi-wrap .ex-btn-primary.loading:hover {
    background: var(--ex-primary-hover);
}

.endexapi-wrap .ex-btn-secondary.loading {
    background: var(--ex-primary-alpha-15);
    border-color: var(--ex-primary-alpha-30);
}

.endexapi-wrap .ex-btn-secondary.loading::after {
    border: 2px solid var(--ex-primary-alpha-30);
    border-top-color: var(--ex-primary);
}

.endexapi-wrap .ex-btn-danger.loading {
    background: var(--ex-danger-alpha-15);
    border-color: var(--ex-danger-alpha-30);
}

/* 중지 버튼은 클릭 가능해야 함 */
.endexapi-wrap #ai-send-btn.loading,
.endexapi-wrap #ex-theme-combined-btn.loading {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.endexapi-wrap .ex-btn-success.loading {
    background: var(--ex-success-alpha-80);
}

.endexapi-wrap .ex-btn-info.loading {
    background: var(--ex-info-alpha-80);
}

/* Warning 버튼 로딩 스타일 */
.endexapi-wrap .ex-btn-warning {
    background: color-mix(in srgb, var(--ex-warning) 15%, transparent);
    color: var(--ex-warning);
    border: 1px solid color-mix(in srgb, var(--ex-warning) 30%, transparent);
}

.endexapi-wrap .ex-btn-warning:hover:not(:disabled):not(.loading) {
    background: color-mix(in srgb, var(--ex-warning) 25%, transparent);
    color: var(--ex-warning);
    border-color: color-mix(in srgb, var(--ex-warning) 40%, transparent);
}

.endexapi-wrap .ex-btn-warning.loading {
    background: color-mix(in srgb, var(--ex-warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--ex-warning) 30%, transparent);
}

.endexapi-wrap .ex-btn-warning.loading::after {
    border: 2px solid color-mix(in srgb, var(--ex-warning) 30%, transparent);
    border-top-color: var(--ex-warning);
}

.endexapi-wrap .ex-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* ================================================
   6. CARDS - 카드
   ================================================ */
.endexapi-wrap .ex-card {
    background: var(--ex-white);
    border: none;
    border-radius: var(--ex-radius);
    box-shadow: var(--ex-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.endexapi-wrap .ex-card-header {
    background: var(--ex-white);
    padding: 20px 24px;
    border-bottom: 1px solid var(--ex-input-border);
    border-radius: var(--ex-radius) var(--ex-radius) 0 0;
}

.endexapi-wrap .ex-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.endexapi-wrap .ex-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ex-text-title);
}

.endexapi-wrap .ex-card-body {
    background: var(--ex-white);
    padding: 24px;
}

.endexapi-wrap .ex-card:not(:has(.ex-card-header)) .ex-card-body:first-child {
    border-radius: var(--ex-radius) var(--ex-radius) 0 0;
}

.endexapi-wrap .ex-card .ex-card-body:last-child {
    border-radius: 0 0 var(--ex-radius) var(--ex-radius);
}

/* AI 웹사이트 생성 히어로 카드: 바깥 카드만 둥근 모서리 유지 */
.endexapi-wrap #ex-ai-hero {
    overflow: hidden;
}

.endexapi-wrap #ex-ai-hero .ex-card {
    border: none;
    /* border-radius: 0;
    box-shadow: none; */
}

.endexapi-wrap .ex-card-body p:first-child {
    margin: 0;
}


/* ================================================
   7. GALLERY - 갤러리 카드
   ================================================ */
/* 갤러리 카드 */
.endexapi-wrap .ex-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--ex-primary-alpha-15);
}


/* ================================================
   8. FORMS - 폼 요소
   ================================================ */
.endexapi-wrap .ex-form-group {
    margin-bottom: 16px;
}

.endexapi-wrap label:not(.ex-toggle-label) {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 20px;
}

.endexapi-wrap label .required {
    color: var(--ex-primary);
    margin-left: 2px;
}

/* 기본 스타일 (input, select, textarea 완벽 통일) */
.endexapi-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input),
.endexapi-wrap select,
.endexapi-wrap textarea,
.endexapi-wrap .ex-input,
.endexapi-wrap .ex-select,
.endexapi-wrap .ex-textarea {
    width: 100%;
    max-width: 100%;
    height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--ex-input-border) !important;
    border-radius: 8px !important;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    background-color: var(--ex-input-bg) !important;
    background-image: none;
    color: var(--ex-input-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    margin: 0;
}

/* select 전용 스타일 (화살표 아이콘) */
.endexapi-wrap select,
.endexapi-wrap .ex-select {
    padding-right: 40px;
    background-color: var(--ex-input-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
}

/* textarea 전용 스타일 */
.endexapi-wrap textarea,
.endexapi-wrap .ex-textarea {
    min-height: 100px;
    height: auto;
    resize: vertical;
    line-height: 1.6;
    padding: 12px 14px;
}

/* Hover 상태 - 통일 */
.endexapi-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input):hover:not(:disabled):not(:focus),
.endexapi-wrap select:hover:not(:disabled):not(:focus),
.endexapi-wrap textarea:hover:not(:disabled):not(:focus),
.endexapi-wrap .ex-input:hover:not(:disabled):not(:focus),
.endexapi-wrap .ex-select:hover:not(:disabled):not(:focus),
.endexapi-wrap .ex-textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--ex-input-border-hover) !important;
}

/* select hover - 배경 이미지 유지 */
.endexapi-wrap select:hover:not(:disabled):not(:focus),
.endexapi-wrap .ex-select:hover:not(:disabled):not(:focus) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Focus 상태 - 통일 */
.endexapi-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input):focus,
.endexapi-wrap select:focus,
.endexapi-wrap textarea:focus,
.endexapi-wrap .ex-input:focus,
.endexapi-wrap .ex-select:focus,
.endexapi-wrap .ex-textarea:focus {
    border-color: var(--ex-primary) !important;
    box-shadow: 0 0 0 3px var(--ex-primary-alpha-15) !important;
    outline: none !important;
    background-color: var(--ex-input-bg) !important;
}

/* select focus - 배경 이미지 (primary 색상) */
.endexapi-wrap select:focus,
.endexapi-wrap .ex-select:focus {
    background-color: var(--ex-input-bg) !important;
}

/* 테마별 select focus 화살표 색상 */
.endexapi-wrap[data-theme="coral"] select:focus,
.endexapi-wrap[data-theme="coral"] .ex-select:focus,
.endexapi-wrap:not([data-theme]) select:focus,
.endexapi-wrap:not([data-theme]) .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23E8505B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-theme="blue"] select:focus,
.endexapi-wrap[data-theme="blue"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233B82F6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-theme="green"] select:focus,
.endexapi-wrap[data-theme="green"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2310B981' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-theme="purple"] select:focus,
.endexapi-wrap[data-theme="purple"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B5CF6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-theme="orange"] select:focus,
.endexapi-wrap[data-theme="orange"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23F59E0B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Placeholder 스타일 */
.endexapi-wrap input::placeholder,
.endexapi-wrap textarea::placeholder,
.endexapi-wrap .ex-input::placeholder,
.endexapi-wrap .ex-textarea::placeholder {
    color: var(--ex-input-placeholder);
    opacity: 1;
}

/* Disabled 상태 - 통일 */
.endexapi-wrap input:disabled,
.endexapi-wrap select:disabled,
.endexapi-wrap textarea:disabled,
.endexapi-wrap .ex-input:disabled,
.endexapi-wrap .ex-select:disabled,
.endexapi-wrap .ex-textarea:disabled {
    background-color: var(--ex-input-bg-disabled) !important;
    color: var(--ex-input-text-disabled) !important;
    cursor: not-allowed;
    border-color: var(--ex-input-border) !important;
    opacity: 0.7;
}

/* select disabled - 배경 이미지 흐리게 */
.endexapi-wrap select:disabled,
.endexapi-wrap .ex-select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* select option 스타일 */
.endexapi-wrap select option {
    padding: 10px 14px;
    background-color: var(--ex-input-bg);
    color: var(--ex-input-text);
}

.endexapi-wrap select option:hover,
.endexapi-wrap select option:focus {
    background-color: var(--ex-primary-alpha-10);
}

.endexapi-wrap select option:checked {
    background-color: var(--ex-primary-alpha-15);
    color: var(--ex-primary);
}

/* 라벨 스타일 */
.endexapi-wrap .ex-label,
.endexapi-wrap .ex-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-label-text);
    margin-bottom: 6px;
}

.endexapi-wrap .ex-form-group .required {
    color: var(--ex-primary);
    margin-left: 2px;
}

/* 필드 에러 스타일 */
.endexapi-wrap .ex-form-group.has-error input,
.endexapi-wrap .ex-form-group.has-error select,
.endexapi-wrap .ex-form-group.has-error textarea {
    border-color: var(--ex-danger);
    background-color: var(--ex-danger-alpha-07);
}

.endexapi-wrap .ex-form-group.has-error input:focus,
.endexapi-wrap .ex-form-group.has-error select:focus,
.endexapi-wrap .ex-form-group.has-error textarea:focus {
    border-color: var(--ex-danger);
    box-shadow: 0 0 0 3px var(--ex-danger-alpha-15);
}

.endexapi-wrap .ex-form-group.has-error label {
    color: var(--ex-danger);
}

.endexapi-wrap .ex-field-error {
    color: var(--ex-danger);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* 폼 검증 결과 메시지 - GPU 레이어 분리 (input focus 시 안티앨리어싱 변화 방지) */
.endexapi-wrap .ex-form-group [id$="-check-result"],
.endexapi-wrap .ex-form-group .ex-check-result,
.endexapi-wrap .ex-form-group .ex-field-message {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.endexapi-wrap .ex-form-row {
    display: flex;
    gap: 16px;
}

.endexapi-wrap .ex-form-row .ex-form-group {
    flex: 1;
}

/* 검색/필터 영역의 select */
.endexapi-wrap .ex-search-filter-section select,
.endexapi-wrap .ex-filter-select {
    width: auto;
    min-width: 120px;
}


/* ================================================
   9. TABLES - 테이블
   ================================================ */
.endexapi-wrap .ex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: none;
}

.endexapi-wrap[data-page="buyer-api-list"] .ex-table { 
    min-width: 1200px;
}

.endexapi-wrap .ex-table th,
.endexapi-wrap .ex-table td {
    padding: 12px 16px;
    text-align: left;
    border: unset;
    border-bottom: 1px solid var(--ex-border);
}

.endexapi-wrap .ex-table th {
    background: var(--ex-gray-light);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.endexapi-wrap .ex-table tr:hover {
    background: var(--ex-primary-alpha-02);
}

.endexapi-wrap .ex-table-wrap {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 테이블 반응형 */
@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-table-wrap {
        max-height: none;
    }
    
    .endexapi-wrap .ex-table {
        font-size: 13px;
    }
    
    .endexapi-wrap .ex-table th,
    .endexapi-wrap .ex-table td {
        padding: 10px 12px;
    }
}

@media screen and (max-width: 480px) {
    .endexapi-wrap .ex-table th,
    .endexapi-wrap .ex-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* AI 최근 채팅 테이블 - 모바일에서도 PC와 동일하게 유지 */
.endexapi-wrap .ai-recent-chat-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.endexapi-wrap .ai-recent-chat-table table {
    min-width: 100%;
    table-layout: auto;
}

.endexapi-wrap .ai-recent-chat-table td {
    white-space: nowrap;
}

.endexapi-wrap .ai-recent-chat-table td:nth-child(2) {
    white-space: normal;
    max-width: none;
}

.endexapi-wrap .ex-table .ex-btn,
.endexapi-wrap .ex-table .ex-btn-sm {
    background: var(--ex-primary-alpha-08);
    color: var(--ex-primary);
    border: 1px solid var(--ex-primary-alpha-20);
    font-weight: 500;
}

.endexapi-wrap .ex-table .ex-btn:hover,
.endexapi-wrap .ex-table .ex-btn-sm:hover {
    background: var(--ex-primary-alpha-15);
    border-color: var(--ex-primary-alpha-30);
    color: var(--ex-primary);
}

.endexapi-wrap .ex-table .ex-btn-secondary {
    background: var(--ex-primary-alpha-07);
    color: var(--ex-primary);
    border: 1px solid var(--ex-primary-alpha-14);
}

.endexapi-wrap .ex-table .ex-btn-secondary:hover {
    background: var(--ex-primary-alpha-14);
    border-color: var(--ex-primary-alpha-25);
}

.endexapi-wrap .ex-table .ex-btn-success {
    background: var(--ex-success-alpha-07);
    color: var(--ex-success);
    border: 1px solid var(--ex-success-alpha-14);
}

.endexapi-wrap .ex-table .ex-btn-success:hover {
    background: var(--ex-success-alpha-14);
    border-color: var(--ex-success-alpha-25);
}

.endexapi-wrap .ex-table .ex-btn-danger {
    background: var(--ex-danger-alpha-07);
    color: var(--ex-danger);
    border: 1px solid var(--ex-danger-alpha-14);
}

.endexapi-wrap .ex-table .ex-btn-danger:hover {
    background: var(--ex-danger-alpha-14);
    border-color: var(--ex-danger-alpha-25);
}

.endexapi-wrap .ex-table .ex-btn-info {
    background: var(--ex-info-alpha-07);
    color: var(--ex-info);
    border: 1px solid var(--ex-info-alpha-14);
}

.endexapi-wrap .ex-table .ex-btn-info:hover {
    background: var(--ex-info-alpha-14);
    border-color: var(--ex-info-alpha-25);
}


/* ================================================
   10. MODALS - 모달
   ================================================ */
.endexapi-wrap .ex-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.endexapi-wrap .ex-modal.active {
    display: block;
}

.endexapi-wrap .ex-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ex-overlay-modal);
}

.endexapi-wrap .ex-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ex-white);
    border-radius: var(--ex-radius);
    width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--ex-shadow-modal);
    display: flex;
    flex-direction: column;
}

/* form 태그가 modal-content 안에 있을 때 flex 레이아웃 유지 */
.endexapi-wrap .ex-modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.endexapi-wrap .ex-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ex-border);
    border-radius: var(--ex-radius) var(--ex-radius) 0 0;
    flex-shrink: 0;
}

.endexapi-wrap .ex-modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.endexapi-wrap .ex-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ex-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.endexapi-wrap .ex-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.endexapi-wrap .ex-modal-body textarea {
    height: auto;
}

.endexapi-wrap .ex-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--ex-border);
    text-align: right;
    border-radius: 0 0 var(--ex-radius) var(--ex-radius);
    flex-shrink: 0;
}

.endexapi-wrap .ex-modal-footer .ex-btn {
    margin-left: 8px;
}

.endexapi-wrap .ex-modal .ex-form-group {
    margin-bottom: 16px;
}

.endexapi-wrap .ex-modal-switch,
.endexapi-wrap-account-auth-modals .ex-modal-switch {
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--ex-text-muted);
    border-top: 1px solid var(--ex-border);
}

.endexapi-wrap .ex-modal-switch a,
.endexapi-wrap-account-auth-modals .ex-modal-switch a {
    color: var(--ex-primary);
    text-decoration: none;
    font-weight: 600;
}

.endexapi-wrap .ex-modal-switch a:hover,
.endexapi-wrap-account-auth-modals .ex-modal-switch a:hover {
    text-decoration: underline;
}

/* ================================================
   11. BADGES - 뱃지 & 상태
   ================================================ */
.endexapi-wrap .ex-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.endexapi-wrap .ex-method-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: #2271b1;
    color: white !important;
}

.endexapi-wrap .status-pending,
.endexapi-wrap .status-processing {
    background: var(--ex-status-pending-bg);
    color: var(--ex-status-pending-color);
}

.endexapi-wrap .status-approved,
.endexapi-wrap .status-completed {
    background: var(--ex-status-approved-bg);
    color: var(--ex-status-approved-color);
}

.endexapi-wrap .status-rejected {
    background: var(--ex-status-rejected-bg);
    color: var(--ex-status-rejected-color);
}

.endexapi-wrap .status-requested {
    background: var(--ex-status-requested-bg);
    color: var(--ex-status-requested-color);
}

/* Approval Status Badges */
.endexapi-wrap .approval-pending {
    background: var(--ex-status-pending-bg);
    color: var(--ex-status-pending-color);
}

.endexapi-wrap .approval-approved {
    background: var(--ex-status-approved-bg);
    color: var(--ex-status-approved-color);
}

.endexapi-wrap .approval-rejected {
    background: var(--ex-status-rejected-bg);
    color: var(--ex-status-rejected-color);
}

/* Endpoint Status Badges */
.endexapi-wrap .ep-status-active {
    background: var(--ex-status-approved-bg);
    color: var(--ex-status-approved-color);
}

.endexapi-wrap .ep-status-inactive {
    background: var(--ex-status-rejected-bg);
    color: var(--ex-status-rejected-color);
}


/* ================================================
   12. ALERTS - 알림
   ================================================ */
.endexapi-wrap .ex-alert {
    padding: 12px 16px;
    border-radius: var(--ex-radius-sm);
    margin-top: 16px;
    margin-bottom: 16px;
}

.endexapi-wrap .ex-alert-error {
    background: var(--ex-alert-error-bg);
    color: var(--ex-alert-error-color);
    border: 1px solid var(--ex-alert-error-border);
}

.endexapi-wrap .ex-alert-warning {
    background: var(--ex-alert-warning-bg);
    color: var(--ex-alert-warning-color);
    border: 1px solid var(--ex-alert-warning-border);
}

.endexapi-wrap .ex-alert-info {
    background: var(--ex-alert-info-bg);
    color: var(--ex-alert-info-color);
    border: 1px solid var(--ex-alert-info-border);
}


/* ================================================
   13. GUIDE - 가이드
   ================================================ */
/* 가이드 하이라이트 박스 */
.endexapi-wrap .ex-guide-highlight-box {
    background: color-mix(in srgb, var(--ex-warning) 15%, transparent);
}

.endexapi-wrap .ex-guide-hint {
    color: var(--ex-text-body);
}


/* ================================================
   14. LOADING - 로딩 상태
   ================================================ */
.endexapi-wrap .ex-loading {
    text-align: center;
    padding: 40px;
    margin-top: 70px;
    margin-bottom: 70px;
}

.endexapi-wrap .ex-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ex-gray-light);
    border-top-color: var(--ex-primary);
    border-radius: 50%;
    animation: ex-spin 0.8s linear infinite;
    margin: 0 auto 12px;
    margin-top: 30px;
    flex-shrink: 0;
}

@keyframes ex-spin {
    to { transform: rotate(360deg); }
}

.endexapi-wrap .ex-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}
.endexapi-wrap .ex-typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ex-primary);
    opacity: 0.4;
    animation: ex-typing-pulse 1.4s ease-in-out infinite;
}
.endexapi-wrap .ex-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.endexapi-wrap .ex-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ex-typing-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}


/* ================================================
   15. TABS - 탭
   ================================================ */
.endexapi-wrap .ex-tabs {
    display: flex;
    margin-bottom: 20px;
}

.endexapi-wrap .ex-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    margin: 5px;
    border: none;
    background: var(--ex-primary-alpha-03);
    cursor: pointer;
    font-size: 13px;
    color: var(--ex-gray);
    border-bottom: 2px solid transparent;
    text-align: center;
    transition: all 0.2s ease;
}

.endexapi-wrap .ex-tab:hover {
    background: var(--ex-primary-alpha-03);
}

.endexapi-wrap .ex-tab.active {
    color: var(--ex-primary);
    font-weight: 600;
}

.endexapi-wrap .ex-tab-content {
    display: none;
}

.endexapi-wrap .ex-tab-content.active {
    display: block;
}


/* ================================================
   16. CODE - 코드 블록
   ================================================ */
.endexapi-wrap .ex-code-block {
    background: var(--ex-code-bg);
    color: var(--ex-code-color);
    padding: 16px;
    border-radius: var(--ex-radius-sm);
    overflow-x: auto;
    overflow-y: hidden;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
}

.endexapi-wrap .ex-code-block code {
    background: none;
    padding: 0;
    color: inherit;
}

.endexapi-wrap code {
    background: var(--ex-gray-light);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* AI 코드 블록 - 드라큘라 테마 */
.endexapi-wrap .ai-code-block-wrapper {
    margin: 12px 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.endexapi-wrap .ai-code-block-wrapper .ai-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #282a36;
    padding: 8px 12px;
    border-bottom: 1px solid #44475a;
    cursor: pointer;
    user-select: none;
}

.endexapi-wrap .ai-code-block-wrapper .ai-code-header:hover {
    background: #323443;
}

.endexapi-wrap .ai-code-block-wrapper .ai-code-header .ai-code-toggle-icon {
    color: #6272a4;
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
}

.endexapi-wrap .ai-code-block-wrapper .ai-code-header span:not(.ai-code-toggle-icon) {
    color: #6272a4;
    font-size: 12px;
    font-weight: 500;
}

.endexapi-wrap .ai-code-block-wrapper .ai-code-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.endexapi-wrap .ai-code-block-wrapper.ai-code-expanded .ai-code-content-wrapper {
    max-height: 1000px;
}

.endexapi-wrap .ai-code-block-wrapper pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    background: #282a36 !important;
    color: #f8f8f2 !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
}

.endexapi-wrap .ai-code-content {
    color: #f8f8f2 !important;
    background: transparent !important;
}

.endexapi-wrap .ai-msg-assistant {
    cursor: pointer;
    transition: all 0.2s ease;
}

.endexapi-wrap .ai-msg-assistant.ai-msg-selected {
    box-shadow: 0 0 0 3px var(--ex-primary-alpha-10);
}

.endexapi-wrap .ai-msg-content code {
    background: #44475a !important;
    color: #f8f8f2 !important;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
}


/* ================================================
   17. STATS - 통계 카드
   ================================================ */
.endexapi-wrap .ex-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.endexapi-wrap .ex-stat-card {
    background: var(--ex-white);
    border-radius: var(--ex-radius);
    padding: 24px;
    box-shadow: var(--ex-shadow);
    border: none;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.endexapi-wrap .ex-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ex-primary);
}

.endexapi-wrap .ex-stat-card.success::before {
    background: var(--ex-success);
}

.endexapi-wrap .ex-stat-card.warning::before {
    background: var(--ex-warning);
}

.endexapi-wrap .ex-stat-card.info::before {
    background: var(--ex-info);
}

.endexapi-wrap .ex-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    background: var(--ex-primary-alpha-10);
}

.endexapi-wrap .ex-stat-card h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ex-gray);
    font-weight: normal;
}

.endexapi-wrap .ex-stat-label {
    font-size: 13px;
    color: var(--ex-text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.endexapi-wrap .ex-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ex-text-title);
    line-height: 1.2;
    margin: 0;
}

.endexapi-wrap .ex-stat-sub {
    font-size: 12px;
    color: var(--ex-gray);
    margin: 8px 0 0;
}

.endexapi-wrap .ex-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

.endexapi-wrap .ex-stat-trend.up {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
}

.endexapi-wrap .ex-stat-trend.down {
    color: var(--ex-danger);
    background: var(--ex-danger-alpha-10);
}

/* 크레딧 관리 - 현재 크레딧 카드 */
.endexapi-wrap .ex-stat-card[style*="gradient"] {
    text-align: left;
}

.endexapi-wrap .ex-stat-card[style*="gradient"] h4 {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
}

.endexapi-wrap .ex-stat-card[style*="gradient"] .ex-stat-value {
    color: white;
    margin-bottom: 8px;
}

.endexapi-wrap .ex-stat-card[style*="gradient"] .ex-stat-sub {
    color: rgba(255, 255, 255, 0.8);
}

.endexapi-wrap .ex-usage {
    font-size: 13px;
}

.endexapi-wrap .ex-usage-text {
    margin-bottom: 4px;
}

.endexapi-wrap .ex-progress {
    background: var(--ex-progress-bg);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.endexapi-wrap .ex-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}


/* ================================================
   17-1. PAYMENT PRODUCTS - 결제 상품 그리드
   ================================================ */
.endexapi-wrap .ex-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.endexapi-wrap .ex-product-card {
    background: var(--ex-white);
    border: 2px solid var(--ex-border);
    border-radius: var(--ex-radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.endexapi-wrap .ex-product-card:hover {
    border-color: var(--ex-primary);
    box-shadow: 0 4px 12px var(--ex-primary-alpha-15);
    transform: translateY(-2px);
}

.endexapi-wrap .ex-product-card.selected {
    border-color: var(--ex-primary);
    background: var(--ex-primary-alpha-05);
    box-shadow: 0 4px 12px var(--ex-primary-alpha-20);
}

.endexapi-wrap .ex-product-card.selected::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--ex-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
}

.endexapi-wrap .ex-product-card h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ex-text-title);
}

.endexapi-wrap .ex-product-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--ex-primary);
    margin: 12px 0 8px;
}

.endexapi-wrap .ex-product-bonus {
    font-size: 13px;
    color: var(--ex-success);
    font-weight: 600;
    margin-top: 8px;
}

.endexapi-wrap .ex-billing-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    margin-bottom: 12px;
    background: var(--ex-white);
    transition: all 0.2s ease;
}

.endexapi-wrap .ex-billing-card:hover {
    border-color: var(--ex-primary);
    box-shadow: 0 2px 8px var(--ex-primary-alpha-10);
}

.endexapi-wrap .ex-billing-card > div:first-child {
    flex: 1;
    min-width: 0;
}

.endexapi-wrap .ex-billing-card > div:last-child {
    flex-shrink: 0;
    margin-left: 12px;
    display: flex;
    gap: 8px;
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .endexapi-wrap .ex-product-card {
        padding: 16px;
    }
    
    .endexapi-wrap .ex-product-price {
        font-size: 20px;
    }
    
    .endexapi-wrap .ex-billing-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .endexapi-wrap .ex-billing-card > div:last-child {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 480px) {
    .endexapi-wrap .ex-product-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================
   18. PAGINATION - 페이지네이션
   ================================================ */
.endexapi-wrap .ex-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-top: 20px;
    border-top: 1px solid var(--ex-border);
    flex-wrap: wrap;
    gap: 12px;
}

.endexapi-wrap .ex-pagination-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ex-gray);
}

.endexapi-wrap .ex-pagination select {
    width: 100px;
}

.endexapi-wrap .ex-pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.endexapi-wrap .ex-pagination-btn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ex-primary-alpha-20);
    border-radius: var(--ex-radius-sm);
    background: var(--ex-primary-alpha-08);
    color: var(--ex-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 28px;
    text-align: center;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.endexapi-wrap .ex-pagination-btn:hover:not(:disabled) {
    background: var(--ex-primary-alpha-15);
}

/* 이동 버튼 (처음, 이전, 다음, 끝) - secondary 스타일 동일 */
.endexapi-wrap .ex-pagination-btn.ex-pagination-nav {
    background: var(--ex-primary-alpha-08);
}

.endexapi-wrap .ex-pagination-btn.ex-pagination-nav:hover:not(:disabled) {
    background: var(--ex-primary-alpha-15);
}

.endexapi-wrap .ex-pagination-btn.active {
    background: var(--ex-primary);
    color: white
}

.endexapi-wrap .ex-pagination-btn.active:hover:not(:disabled) {
    background: var(--ex-primary-hover);
    color: white;
}

.endexapi-wrap .ex-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.endexapi-wrap .ex-pagination-ellipsis {
    padding: 6px 4px;
    color: var(--ex-gray);
}

.endexapi-wrap .ex-pagination-goto {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.endexapi-wrap .ex-pagination-goto .ex-pagination-btn {
    min-width: 44px;
    white-space: nowrap;
}

.endexapi-wrap .ex-pagination-input {
    width: 60px;
    height: 28px !important;
    padding: 0 8px;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
}

.endexapi-wrap .ex-pagination-input:focus {
    outline: none;
    border-color: var(--ex-primary);
}


/* ================================================
   19. SEARCH FILTER - 검색 필터
   ================================================ */
.endexapi-wrap .ex-search-filter-section {
    display: flex;
    /* align-items: center; */
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--ex-gray-light);
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-border);
}

.endexapi-wrap .ex-search-filter-section .ex-search-input-group {
    flex: 1;
    min-width: 0;
    position: relative;
}

.endexapi-wrap .ex-search-filter-section .ex-search-input {
    padding: 10px 14px 10px 38px !important;
}

.endexapi-wrap .ex-search-filter-section .ex-search-input:focus {
    border-color: var(--ex-primary);
    box-shadow: 0 0 0 3px var(--ex-primary-alpha-10);
    outline: none;
}

.endexapi-wrap .ex-search-filter-section .ex-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ex-gray);
    font-size: 13px;
    pointer-events: none;
}

.endexapi-wrap .ex-search-filter-section .ex-filter-select {
    flex-shrink: 0;
    height: 42px;
    padding: 10px 32px 10px 12px;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-sm);
    font-size: 13px;
    line-height: 1.4;
    background: var(--ex-white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23636e72' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") right 8px center no-repeat;
    background-size: 16px 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 130px;
    max-width: 130px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.endexapi-wrap .ex-search-filter-section .ex-filter-select:focus {
    border-color: var(--ex-primary);
    box-shadow: 0 0 0 3px var(--ex-primary-alpha-10);
    outline: none;
}

.endexapi-wrap .ex-search-filter-section .ex-search-btn {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* 태블릿 이하 */
@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-search-filter-section {
        /* flex-wrap: wrap; */
        gap: 8px;
    }
    
    .endexapi-wrap .ex-search-filter-section .ex-search-input-group {
        flex: 1 1 100%;
        order: 1;
    }
    
    .endexapi-wrap .ex-search-filter-section .ex-filter-select {
        flex: 1 1 auto;
        min-width: 130px;
        max-width: 130px;
        order: 2;
    }
    
    .endexapi-wrap .ex-search-filter-section .ex-search-btn {
        flex: 0 0 auto;
        order: 3;
    }
}

/* 모바일 */
@media screen and (max-width: 620px) {
    .endexapi-wrap .ex-search-filter-section {
        flex-direction: column;
        padding: 12px;
    }
    
    .endexapi-wrap .ex-search-filter-section .ex-search-input-group,
    .endexapi-wrap .ex-search-filter-section .ex-filter-select,
    .endexapi-wrap .ex-search-filter-section .ex-search-btn {
        width: 100%;
        flex: none;
        max-width: none;
    }
}


/* ================================================
   20. BULK ACTIONS - 일괄 작업
   ================================================ */
.endexapi-wrap .ex-select-all,
.endexapi-wrap .ex-row-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ex-primary);
}

.endexapi-wrap .ex-table th:has(.ex-select-all),
.endexapi-wrap .ex-table td:has(.ex-row-checkbox) {
    width: 40px;
    text-align: center;
}

.endexapi-wrap .ex-checkbox-cell {
    width: 40px;
    text-align: center;
}

.endexapi-wrap .ex-bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--ex-primary-alpha-08);
    border: 1px solid var(--ex-primary-alpha-20);
    border-radius: var(--ex-radius);
    margin-bottom: 16px;
    gap: 16px;
}

.endexapi-wrap .ex-bulk-action-bar.active {
    display: flex;
}

.endexapi-wrap .ex-bulk-info {
    font-size: 13px;
}

.endexapi-wrap .ex-bulk-count {
    color: var(--ex-primary);
    font-size: 16px;
}

.endexapi-wrap .ex-bulk-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.endexapi-wrap .ex-bulk-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--ex-primary);
    border-radius: var(--ex-radius-sm);
    background: var(--ex-white);
    color: var(--ex-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.endexapi-wrap .ex-bulk-btn:hover:not(:disabled) {
    background: var(--ex-primary);
    color: white;
}

.endexapi-wrap .ex-bulk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.endexapi-wrap .ex-bulk-btn-danger {
    border-color: var(--ex-danger) !important;
    color: var(--ex-danger) !important;
}

.endexapi-wrap .ex-bulk-btn-danger:hover:not(:disabled) {
    background: var(--ex-danger) !important;
    color: white !important;
}

.endexapi-wrap .ex-bulk-btn-success {
    border-color: var(--ex-success) !important;
    color: var(--ex-success) !important;
}

.endexapi-wrap .ex-bulk-btn-success:hover:not(:disabled) {
    background: var(--ex-success) !important;
    color: var(--ex-white) !important;
}

.endexapi-wrap .ex-bulk-btn.loading {
    background: var(--ex-primary);
    color: var(--ex-white);
    border-color: var(--ex-primary);
}

.endexapi-wrap .ex-bulk-btn-danger.loading {
    background: var(--ex-danger);
    color: var(--ex-white);
    border-color: var(--ex-danger);
}


/* ================================================
   21. UTILITIES - 유틸리티
   ================================================ */
.endexapi-wrap .ex-text-center {
    text-align: center;
}

.endexapi-wrap .ex-text-right {
    text-align: right;
}

.endexapi-wrap .ex-mt-1 {
    margin-top: 8px;
}

.endexapi-wrap .ex-mt-2 {
    margin-top: 16px;
}

.endexapi-wrap .ex-mb-1 {
    margin-bottom: 8px;
}

.endexapi-wrap .ex-mb-2 {
    margin-bottom: 16px;
}


/* ================================================
   22. WIDGETS - 위젯 영역
   ================================================ */
.endexapi-wrap .ex-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.endexapi-wrap .ex-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--ex-text-muted);
}

.endexapi-wrap .ex-empty-state p {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ex-text-muted);
}


/* ================================================
   23. RESPONSIVE - 반응형
   ================================================ */
@media screen and (max-width: 1250px) {
    .endexapi-wrap .ex-layout {
        flex-direction: column;
    }
    
    .endexapi-wrap .ex-sidebar {
        display: none;
    }
    
    .endexapi-wrap .ex-sidebar-toggle {
        display: none;
    }
    
    .endexapi-wrap .ex-mobile-header {
        display: flex;
    }
    
    .endexapi-wrap .ex-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    /* AI 입력 영역 모바일 최적화 */
    .endexapi-wrap #ex-ai-hero .ex-card-body .ex-form-group {
        margin-bottom: 16px;
    }
    
    .endexapi-wrap #ex-ai-hero .ex-card-body .ex-form-row {
        flex-direction: column;
        gap: 4px;
    }
    
    .endexapi-wrap #ex-ai-hero .ex-card-body .ex-form-row .ex-form-group {
        margin-bottom: 0;
    }
    
    .endexapi-wrap #ex-ai-hero #ai-send-btn {
        width: 100%;
    }
    
    .endexapi-wrap #ex-ai-hero #ai-image-btn,
    .endexapi-wrap #ex-ai-hero #ai-settings-btn {
        width: 100%;
    }
    
    .endexapi-wrap .ex-tabs {
        flex-direction: column;
        gap: 0;
        margin-top: 8px;
        margin-bottom: 24px;
        border-radius: var(--ex-radius);
        overflow: hidden;
    }
    
    .endexapi-wrap .ex-tab {
        padding: 14px 16px;
        text-align: left;
        justify-content: flex-start;
        border-left: 3px solid transparent;
    }
    
    .endexapi-wrap .ex-modal-content {
        width: 95%;
        max-height: 85vh;
    }
    
    .endexapi-wrap .ex-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .endexapi-wrap .ex-table-wrap {
        max-height: none;
    }
    
    /* AI 최근 채팅 테이블은 모바일에서도 테이블 형태 유지 */
    .endexapi-wrap .ai-recent-chat-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .endexapi-wrap .ai-recent-chat-table table {
        display: table !important;
        width: 100%;
        min-width: 100%;
        table-layout: auto;
    }
    
    .endexapi-wrap .ai-recent-chat-table tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    .endexapi-wrap .ai-recent-chat-table td {
        display: table-cell !important;
        padding: 12px 16px !important;
        border: unset !important;
        border-bottom: 1px solid var(--ex-border) !important;
        text-align: inherit !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }
    
    .endexapi-wrap .ai-recent-chat-table td:nth-child(2) {
        white-space: normal;
        max-width: none;
    }
    
    .endexapi-wrap .ai-recent-chat-table td:last-child {
        border-bottom: 1px solid var(--ex-border) !important;
    }
    
    .endexapi-wrap .ai-recent-chat-table td::before {
        display: none !important;
    }
    

    .endexapi-wrap .ex-table thead {
        display: none;
    }
    
    .endexapi-wrap .ex-table tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid var(--ex-border);
        border-radius: var(--ex-radius-sm);
        padding: 12px;
        background: var(--ex-white);
    }
    
    .endexapi-wrap .ex-table td {
        display: block;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--ex-gray-light);
        text-align: left;
    }
    
    .endexapi-wrap .ex-table td:last-child {
        border-bottom: none;
    }
    
    .endexapi-wrap .ex-table td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
        color: var(--ex-gray);
        font-size: 12px;
    }
    
    .endexapi-wrap .ex-table td:has(.ex-row-checkbox),
    .endexapi-wrap .ex-table .ex-checkbox-cell {
        width: auto;
        text-align: left;
        display: block;
    }
    
    .endexapi-wrap .ex-table td:has(.ex-row-checkbox) .ex-row-checkbox,
    .endexapi-wrap .ex-table .ex-checkbox-cell .ex-row-checkbox {
        display: block;
    }
    
    .endexapi-wrap .ex-pagination {
        flex-direction: column;
        align-items: stretch;
    }
    
    .endexapi-wrap .ex-pagination-info {
        justify-content: space-between;
    }
    
    .endexapi-wrap .ex-pagination-controls {
        justify-content: center;
    }
    
    .endexapi-wrap .ex-bulk-action-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .endexapi-wrap .ex-bulk-buttons {
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .endexapi-wrap .ex-pagination {
        flex-direction: column;
        align-items: stretch;
    }
    
    .endexapi-wrap .ex-pagination-info {
        justify-content: space-between;
    }
    
    .endexapi-wrap .ex-pagination-controls {
        justify-content: center;
    }
    
    .endexapi-wrap .ex-bulk-action-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .endexapi-wrap .ex-bulk-buttons {
        justify-content: center;
    }
}

@media screen and (max-width: 620px) {
    .endexapi-wrap .ex-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .endexapi-wrap .ex-stat-card {
        padding: 16px;
    }
    
    .endexapi-wrap .ex-stat-value {
        font-size: 24px;
    }
}

/* ================================================
   24. THEME SWITCHER - 테마 스위처 UI
   ================================================ */
.endexapi-wrap .ex-theme-switcher {
    margin-top: auto;
    padding: 16px 24px 24px;
}

body:not(.wp-admin) .endexapi-wrap .ex-theme-switcher {
    border-top: 1px solid var(--ex-border);
}

.endexapi-wrap .ex-theme-switcher .ex-menu-group-title {
    padding: 0 0 12px 0;
}

.endexapi-wrap .ex-theme-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.endexapi-wrap .ex-theme-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    background: var(--btn-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.endexapi-wrap .ex-theme-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.endexapi-wrap .ex-theme-btn.active {
    border-color: var(--ex-text-body);
    box-shadow: 0 0 0 2px var(--ex-input-bg), 0 0 0 4px var(--ex-text-body);
}

.endexapi-wrap .ex-theme-btn.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ================================================
   25. DARK MODE TOGGLE - 다크모드 토글
   ================================================ */
.endexapi-wrap .ex-dark-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ex-input-border);
}

.endexapi-wrap .ex-dark-mode-label {
    font-size: 12px;
    color: var(--ex-input-icon);
    font-weight: 500;
}

.endexapi-wrap .ex-dark-toggle-switch {
    position: relative;
    width: 56px;
    height: 28px;
    background: var(--ex-input-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.endexapi-wrap .ex-dark-toggle-switch:hover {
    background: var(--ex-input-border-hover);
}

.endexapi-wrap .ex-dark-toggle-switch.active {
    background: var(--ex-primary);
}

.endexapi-wrap .ex-dark-toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.endexapi-wrap .ex-dark-toggle-switch.active::before {
    transform: translateX(28px);
}

.endexapi-wrap .ex-dark-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

.endexapi-wrap .ex-dark-toggle-icon svg {
    width: 14px;
    height: 14px;
    stroke: #f59e0b;
    stroke-width: 2;
    fill: none;
}

.endexapi-wrap .ex-dark-toggle-icon.moon svg {
    stroke: #6366f1;
}

.endexapi-wrap .ex-dark-toggle-icon.sun {
    right: 7px;
    opacity: 1;
}

.endexapi-wrap .ex-dark-toggle-icon.moon {
    left: 7px;
    opacity: 0;
}

.endexapi-wrap .ex-dark-toggle-switch.active .ex-dark-toggle-icon.sun {
    opacity: 0;
}

.endexapi-wrap .ex-dark-toggle-switch.active .ex-dark-toggle-icon.moon {
    opacity: 1;
}

/* 기존 다크 버튼 (컬러 버튼 옆) - 숨김 처리하고 새 토글 사용 */
.endexapi-wrap .ex-dark-btn {
    display: none;
}

/* ================================================
   26. COLOR THEMES - 컬러 테마 (5가지)
   ================================================ */
/* 
 * color-mix()를 사용하므로 --ex-primary와 --ex-primary-hover만 정의하면
 * 모든 alpha 변수가 자동으로 적용됩니다!
 */

/* 코랄 (기본) */
.endexapi-wrap[data-theme="coral"] {
    --ex-primary: #E8505B;
    --ex-primary-hover: #D14048;
}

/* 블루 */
.endexapi-wrap[data-theme="blue"] {
    --ex-primary: #3B82F6;
    --ex-primary-hover: #2563EB;
}

/* 그린 */
.endexapi-wrap[data-theme="green"] {
    --ex-primary: #00C96F;
    --ex-primary-hover: #00AD60;
}

/* 퍼플 */
.endexapi-wrap[data-theme="purple"] {
    --ex-primary: #8B5CF6;
    --ex-primary-hover: #7C3AED;
}

/* 오렌지 */
.endexapi-wrap[data-theme="orange"] {
    --ex-primary: #F59E0B;
    --ex-primary-hover: #D97706;
}

/* ================================================
   27. DARK MODE - 다크모드 스타일
   ================================================ */
.endexapi-wrap[data-dark="true"] {
    /* 배경색 */
    --ex-bg-primary: #1C1C20;
    --ex-bg-secondary: #27272A;
    --ex-bg-tertiary: #333336;
    --ex-bg-hover: #38383D;
    
    /* 텍스트 색상 */
    --ex-text-primary: #ffffff;
    --ex-text-secondary: #a1a1a1;
    --ex-text-tertiary: #737373;
    --ex-text-title: #ffffff;
    --ex-text-body: #e5e5e5;
    --ex-text-muted: #a1a1a1;
    --ex-text-hint: #737373;
    
    /* 테두리 색상 */
    --ex-border-color: #3C3C41;
    --ex-border-light: #48484D;
    --ex-border: #3C3C41;
    
    /* 기존 변수 오버라이드 */
    --ex-white: #27272A;
    --ex-gray-white: #e5e5e5;
    --ex-gray-light: #333336;
    --ex-gray: #48484D;
    
    /* 그림자 조정 */
    --ex-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --ex-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    
    /* Chat (Cursor-style dark) */
    --ex-chat-user-bg: #2A2A2E;
    --ex-chat-user-label: #A1A1AA;
    --ex-chat-assistant-bg: #1E1E22;
    --ex-chat-assistant-label: #60A5FA;
    --ex-chat-assistant-border: 1px solid #3C3C41;

    background: var(--ex-bg-primary);
    color: var(--ex-text-secondary);
}

/* 사이드바 */
.endexapi-wrap[data-dark="true"] .ex-sidebar {
    background: var(--ex-bg-secondary);
    border-right-color: var(--ex-border-color);
}

/* 콘텐츠 영역 */
.endexapi-wrap[data-dark="true"] .ex-content {
    background: var(--ex-bg-primary);
}

/* 카드 */
.endexapi-wrap[data-dark="true"] .ex-card {
    /* background: var(--ex-bg-secondary); */
    border-color: var(--ex-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.endexapi-wrap[data-dark="true"] .ex-card-header {
    background: var(--ex-bg-secondary);
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-card-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-card-body {
    color: var(--ex-text-secondary);
}

/* 페이지 타이틀 */
.endexapi-wrap[data-dark="true"] .ex-page-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-page-subtitle {
    color: var(--ex-text-tertiary);
}

/* 통계 카드 */
.endexapi-wrap[data-dark="true"] .ex-stat-card {
    background: var(--ex-bg-secondary);
    border-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-stat-value {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-stat-label {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-stat-sub {
    color: var(--ex-text-tertiary);
}

/* 크레딧 관리 - 현재 크레딧 카드 (다크 모드) */
.endexapi-wrap[data-dark="true"] .ex-stat-card[style*="gradient"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.endexapi-wrap[data-dark="true"] .ex-stat-card[style*="gradient"] h4 {
    color: rgba(255, 255, 255, 0.9);
}

.endexapi-wrap[data-dark="true"] .ex-stat-card[style*="gradient"] .ex-stat-value {
    color: white;
}

.endexapi-wrap[data-dark="true"] .ex-stat-card[style*="gradient"] .ex-stat-sub {
    color: rgba(255, 255, 255, 0.8);
}

/* 메뉴 */
.endexapi-wrap[data-dark="true"] .ex-menu-group-title {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-menu-link {
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-menu-link:hover {
    background: var(--ex-bg-hover);
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-menu-link.active {
    color: var(--ex-primary);
    background: var(--ex-primary-alpha-10);
}

/* 다크모드 메뉴 아이콘 SVG 색상 */
.endexapi-wrap[data-dark="true"] .ex-menu-icon svg {
    stroke: #e5e7eb;
}

.endexapi-wrap[data-dark="true"] .ex-menu-link:hover .ex-menu-icon svg,
.endexapi-wrap[data-dark="true"] .ex-menu-link.active .ex-menu-icon svg {
    stroke: #f9fafb;
}

/* 다크모드 언어 아이콘 */
.endexapi-wrap[data-dark="true"] .ex-lang-icon svg {
    stroke: #e5e7eb;
}

.endexapi-wrap[data-dark="true"] .ex-flag-icon {
    color: #a1a1a1;
}

/* 다크모드 드롭다운 아이콘 */
.endexapi-wrap[data-dark="true"] .ex-header-dropdown-icon svg {
    stroke: #a1a1a1;
}

/* 다크모드 햄버거/닫기 버튼 */
.endexapi-wrap[data-dark="true"] .ex-hamburger svg,
.endexapi-wrap[data-dark="true"] .ex-mobile-menu-close svg {
    stroke: var(--ex-primary);
}

/* 다크모드 폼 변수 오버라이드 */
.endexapi-wrap[data-dark="true"] {
    --ex-input-bg: #333336;
    --ex-input-bg-hover: #38383D;
    --ex-input-bg-disabled: #27272A;
    --ex-input-bg-readonly: #2C2C31;
    --ex-input-border: #48484D;
    --ex-input-border-hover: #58585D;
    --ex-input-text: #ffffff;
    --ex-input-text-disabled: #5E5E63;
    --ex-input-text-readonly: #a1a1a1;
    --ex-input-placeholder: #737373;
    --ex-input-icon: #a1a1a1;
    --ex-input-icon-hover: #d1d1d1;
    --ex-input-icon-disabled: #4C4C51;
    --ex-label-text: #a1a1a1;
}

/* 폼 요소 - 다크모드 기본 스타일 */
.endexapi-wrap[data-dark="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input),
.endexapi-wrap[data-dark="true"] select,
.endexapi-wrap[data-dark="true"] textarea,
.endexapi-wrap[data-dark="true"] .ex-input,
.endexapi-wrap[data-dark="true"] .ex-select,
.endexapi-wrap[data-dark="true"] .ex-textarea {
    background-color: var(--ex-input-bg) !important;
    border-color: var(--ex-input-border) !important;
    color: var(--ex-input-text) !important;
}

/* select 화살표 아이콘 - 다크모드 */
.endexapi-wrap[data-dark="true"] select,
.endexapi-wrap[data-dark="true"] .ex-select {
    background-color: var(--ex-input-bg) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
}

/* Hover 상태 - 다크모드 */
.endexapi-wrap[data-dark="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input):hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] select:hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] textarea:hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] .ex-input:hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] .ex-select:hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] .ex-textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--ex-input-border-hover) !important;
    background-color: var(--ex-input-bg-hover) !important;
}

/* select hover - 다크모드 배경 이미지 */
.endexapi-wrap[data-dark="true"] select:hover:not(:disabled):not(:focus),
.endexapi-wrap[data-dark="true"] .ex-select:hover:not(:disabled):not(:focus) {
    background-color: var(--ex-input-bg-hover) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d1d1d1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Focus 상태 - 다크모드 */
.endexapi-wrap[data-dark="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.ex-toggle-input):focus,
.endexapi-wrap[data-dark="true"] select:focus,
.endexapi-wrap[data-dark="true"] textarea:focus,
.endexapi-wrap[data-dark="true"] .ex-input:focus,
.endexapi-wrap[data-dark="true"] .ex-select:focus,
.endexapi-wrap[data-dark="true"] .ex-textarea:focus {
    border-color: var(--ex-primary) !important;
    box-shadow: 0 0 0 3px var(--ex-primary-alpha-20) !important;
    background-color: var(--ex-input-bg) !important;
}

/* 다크모드 테마별 select focus 화살표 색상 */
.endexapi-wrap[data-dark="true"][data-theme="coral"] select:focus,
.endexapi-wrap[data-dark="true"][data-theme="coral"] .ex-select:focus,
.endexapi-wrap[data-dark="true"]:not([data-theme]) select:focus,
.endexapi-wrap[data-dark="true"]:not([data-theme]) .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23E8505B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-dark="true"][data-theme="blue"] select:focus,
.endexapi-wrap[data-dark="true"][data-theme="blue"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233B82F6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-dark="true"][data-theme="green"] select:focus,
.endexapi-wrap[data-dark="true"][data-theme="green"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2310B981' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-dark="true"][data-theme="purple"] select:focus,
.endexapi-wrap[data-dark="true"][data-theme="purple"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238B5CF6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.endexapi-wrap[data-dark="true"][data-theme="orange"] select:focus,
.endexapi-wrap[data-dark="true"][data-theme="orange"] .ex-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23F59E0B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Placeholder - 다크모드 */
.endexapi-wrap[data-dark="true"] input::placeholder,
.endexapi-wrap[data-dark="true"] textarea::placeholder,
.endexapi-wrap[data-dark="true"] .ex-input::placeholder,
.endexapi-wrap[data-dark="true"] .ex-textarea::placeholder {
    color: var(--ex-input-placeholder) !important;
    opacity: 1;
}

/* Disabled 상태 - 다크모드 */
.endexapi-wrap[data-dark="true"] input:disabled,
.endexapi-wrap[data-dark="true"] select:disabled,
.endexapi-wrap[data-dark="true"] textarea:disabled,
.endexapi-wrap[data-dark="true"] .ex-input:disabled,
.endexapi-wrap[data-dark="true"] .ex-select:disabled,
.endexapi-wrap[data-dark="true"] .ex-textarea:disabled {
    background-color: var(--ex-input-bg-disabled) !important;
    color: var(--ex-input-text-disabled) !important;
    border-color: #3C3C41 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* select disabled - 다크모드 배경 이미지 흐리게 */
.endexapi-wrap[data-dark="true"] select:disabled,
.endexapi-wrap[data-dark="true"] .ex-select:disabled {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234C4C51' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Readonly - 다크모드
.endexapi-wrap[data-dark="true"] input:read-only:not([type="checkbox"]):not([type="radio"]),
.endexapi-wrap[data-dark="true"] textarea:read-only {
    background-color: var(--ex-input-bg-readonly) !important;
    color: var(--ex-input-text-readonly) !important;
}
 */
/* select option - 다크모드 */
.endexapi-wrap[data-dark="true"] select option {
    background-color: #333336;
    color: #ffffff;
    padding: 10px 14px;
}

.endexapi-wrap[data-dark="true"] select option:hover,
.endexapi-wrap[data-dark="true"] select option:focus {
    background-color: #48484D;
}

.endexapi-wrap[data-dark="true"] select option:checked {
    background-color: var(--ex-primary-alpha-20);
    color: var(--ex-primary);
}

/* 테이블 */
.endexapi-wrap[data-dark="true"] .ex-table {
    background: var(--ex-bg-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-table th {
    background: var(--ex-bg-tertiary);
    color: var(--ex-text-secondary);
    border-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-table td {
    background: var(--ex-bg-secondary);
    border-color: var(--ex-border-color);
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-table tr:hover td {
    background: var(--ex-bg-hover);
}

.endexapi-wrap[data-dark="true"] .ex-table-wrap {
    border-color: var(--ex-border-color);
}

/* 모달 */
.endexapi-wrap[data-dark="true"] .ex-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.endexapi-wrap[data-dark="true"] .ex-modal-content {
    background: var(--ex-bg-secondary);
    border: 1px solid var(--ex-border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.endexapi-wrap[data-dark="true"] .ex-modal-header {
    background: var(--ex-bg-secondary);
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-modal-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-modal-body {
    background: var(--ex-bg-secondary);
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-modal-footer {
    background: var(--ex-bg-secondary);
    border-top-color: var(--ex-border-color);
}

/* 뱃지 */
.endexapi-wrap[data-dark="true"] .ex-badge {
    background: var(--ex-bg-tertiary);
    color: var(--ex-text-secondary);
}

/* 알림 */
.endexapi-wrap[data-dark="true"] .ex-alert {
    background: var(--ex-bg-tertiary);
    border-color: var(--ex-border-color);
    color: var(--ex-text-secondary);
}

/* 코드 블록 */
.endexapi-wrap[data-dark="true"] .ex-code,
.endexapi-wrap[data-dark="true"] code {
    background: var(--ex-bg-tertiary);
    color: #e06c75;
}

/* 로딩 */
.endexapi-wrap[data-dark="true"] .ex-loading p {
    color: var(--ex-text-secondary);
}

/* 빈 상태 */
.endexapi-wrap[data-dark="true"] .ex-empty-state p,
.endexapi-wrap[data-dark="true"] .ex-empty-text {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-empty-title {
    color: var(--ex-text-primary);
}

/* 탭 */
.endexapi-wrap[data-dark="true"] .ex-tabs {
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-tab {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-tab:hover {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-tab.active {
    color: var(--ex-primary);
}

/* 테마 스위처 영역 */
.endexapi-wrap[data-dark="true"] .ex-theme-switcher {
    border-top-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-theme-btn.active {
    border-color: #e5e7eb;
    box-shadow: 0 0 0 2px var(--ex-bg-secondary), 0 0 0 4px #e5e7eb;
}

.endexapi-wrap[data-dark="true"] .ex-dark-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #d97706;
}

.endexapi-wrap[data-dark="true"] .ex-dark-btn .ex-dark-icon {
    font-size: 0;
}

.endexapi-wrap[data-dark="true"] .ex-dark-btn .ex-dark-icon::before {
    content: '☀️';
    font-size: 13px;
}

.endexapi-wrap[data-dark="true"] .ex-dark-btn.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-color: #e5e7eb;
    box-shadow: 0 0 0 2px var(--ex-bg-secondary), 0 0 0 4px #e5e7eb;
}

/* 복사 버튼 */
.endexapi-wrap[data-dark="true"] .ex-copyable code {
    background: var(--ex-bg-tertiary);
    color: var(--ex-text-secondary);
}

/* 프로그레스 바 */
.endexapi-wrap[data-dark="true"] .ex-progress {
    background: var(--ex-bg-tertiary);
}

/* 모바일 메뉴 */
.endexapi-wrap[data-dark="true"] .ex-mobile-header {
    background: var(--ex-bg-secondary);
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-mobile-menu {
    background: var(--ex-bg-secondary);
}

/* 일반 텍스트 */
/* .endexapi-wrap[data-dark="true"] p,
.endexapi-wrap[data-dark="true"] span,
.endexapi-wrap[data-dark="true"] div {
   color: inherit;
} */

/* 링크 */
.endexapi-wrap[data-dark="true"] a:not(.ex-btn):not(.ex-menu-link) {
    color: var(--ex-primary);
}

.endexapi-wrap[data-dark="true"] a:not(.ex-btn):not(.ex-menu-link):hover {
    color: var(--ex-primary-hover);
}

/* 다크모드 토글 스위치 */
.endexapi-wrap[data-dark="true"] .ex-dark-mode-toggle {
    border-top-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-dark-mode-label {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-dark-toggle-switch {
    background: var(--ex-primary);
}

.endexapi-wrap[data-dark="true"] .ex-dark-toggle-switch:hover {
    background: var(--ex-primary-hover);
}

/* ================================================
   28. DARK MODE EXTRAS - 다크모드 추가 스타일
   ================================================ */

/* 헤더/타이틀 관련 */
.endexapi-wrap[data-dark="true"] h1,
.endexapi-wrap[data-dark="true"] h2,
.endexapi-wrap[data-dark="true"] h3,
.endexapi-wrap[data-dark="true"] h4,
.endexapi-wrap[data-dark="true"] h5,
.endexapi-wrap[data-dark="true"] h6 {
    color: var(--ex-text-primary);
}

/* 위젯 */
.endexapi-wrap[data-dark="true"] .ex-widget {
    background: var(--ex-bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.endexapi-wrap[data-dark="true"] .ex-widget-header {
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-widget-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-widget-body {
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-widget-item:hover {
    background: var(--ex-bg-hover);
}

.endexapi-wrap[data-dark="true"] .ex-widget-item-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-widget-item-meta {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-widget-item-image {
    background: var(--ex-bg-tertiary);
}

/* 탑바 */
.endexapi-wrap[data-dark="true"] .ex-topbar {
    background: var(--ex-bg-secondary);
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-topbar-title {
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-user-menu:hover {
    background: var(--ex-bg-hover);
}

.endexapi-wrap[data-dark="true"] .ex-user-name {
    color: var(--ex-text-primary);
}

/* 토글 스위치 (모드 스위처) */
.endexapi-wrap[data-dark="true"] .ex-toggle-label {
    background: var(--ex-bg-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-toggle-label-left,
.endexapi-wrap[data-dark="true"] .ex-toggle-label-right {
    color: var(--ex-text-tertiary);
}

.endexapi-wrap[data-dark="true"] .ex-toggle-input:not(:checked) ~ .ex-toggle-label .ex-toggle-label-left,
.endexapi-wrap[data-dark="true"] .ex-toggle-input:checked ~ .ex-toggle-label .ex-toggle-label-right {
    color: var(--ex-text-primary);
}

/* 폼 그룹 */
.endexapi-wrap[data-dark="true"] .ex-label,
.endexapi-wrap[data-dark="true"] .ex-form-group label {
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-form-group .required {
    color: var(--ex-primary);
}

.endexapi-wrap[data-dark="true"] .required {
    color: var(--ex-primary);
}

/* 툴팁 */
.endexapi-wrap[data-dark="true"] [title]:hover::after {
    color: var(--ex-text-primary);
}

/* 체크박스/라디오 커스텀 */
.endexapi-wrap[data-dark="true"] input[type="checkbox"],
.endexapi-wrap[data-dark="true"] input[type="radio"] {
    accent-color: var(--ex-primary);
}

/* 스크롤바 스타일 (웹킷) */
.endexapi-wrap[data-dark="true"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.endexapi-wrap[data-dark="true"] ::-webkit-scrollbar-track {
    background: var(--ex-bg-tertiary);
}

.endexapi-wrap[data-dark="true"] ::-webkit-scrollbar-thumb {
    background: #58585D;
    border-radius: 4px;
}

.endexapi-wrap[data-dark="true"] ::-webkit-scrollbar-thumb:hover {
    background: #68686D;
}

/* 플레이스홀더 색상 */
.endexapi-wrap[data-dark="true"] ::placeholder {
    color: var(--ex-text-tertiary);
    opacity: 1;
}

/* 선택 영역 */
.endexapi-wrap[data-dark="true"] ::selection {
    background: var(--ex-primary-alpha-40);
    color: var(--ex-text-primary);
}

/* 구분선 */
.endexapi-wrap[data-dark="true"] hr {
    border-color: var(--ex-border-color);
}

/* API 메서드 뱃지 - 다크모드에서도 잘 보이게 */
.endexapi-wrap[data-dark="true"] .ex-method-badge {
    font-weight: 600;
}

/* 상태 뱃지 - 다크모드 대비 개선 */
.endexapi-wrap[data-dark="true"] .ex-badge.status-pending,
.endexapi-wrap[data-dark="true"] .ex-badge.status-processing {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

.endexapi-wrap[data-dark="true"] .ex-badge.status-approved,
.endexapi-wrap[data-dark="true"] .ex-badge.status-completed {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.endexapi-wrap[data-dark="true"] .ex-badge.status-rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.endexapi-wrap[data-dark="true"] .ex-badge.status-requested {
    background: rgba(26, 115, 232, 0.2);
    color: #60A5FA;
}

/* 메뉴 구분선 */
.endexapi-wrap[data-dark="true"] .ex-menu-divider {
    background: var(--ex-border-color);
}

/* 카피 버튼 */
.endexapi-wrap .ex-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: #6b7280;
    stroke-width: 2;
    fill: none;
}

.endexapi-wrap .ex-copy-btn:hover svg {
    stroke: #374151;
}

/* 큰 자물쇠 아이콘 */
.endexapi-wrap .ex-lock-icon-large {
    margin-bottom: 20px;
}

.endexapi-wrap .ex-lock-icon-large svg {
    width: 48px;
    height: 48px;
    stroke: #9ca3af;
    stroke-width: 1.5;
    fill: none;
}

.endexapi-wrap[data-dark="true"] .ex-copy-btn {
    background: var(--ex-bg-tertiary);
    color: var(--ex-text-secondary);
}

.endexapi-wrap[data-dark="true"] .ex-copy-btn svg {
    stroke: #a1a1a1;
}

.endexapi-wrap[data-dark="true"] .ex-copy-btn:hover {
    background: var(--ex-bg-hover);
    color: var(--ex-text-primary);
}

.endexapi-wrap[data-dark="true"] .ex-copy-btn:hover svg {
    stroke: #e5e7eb;
}

.endexapi-wrap[data-dark="true"] .ex-lock-icon-large svg {
    stroke: #6b7280;
}

/* 로딩 오버레이 */
.endexapi-wrap[data-dark="true"] .ex-loading-overlay {
    background: rgba(28, 28, 32, 0.8);
}

/* 에러/성공/경고 알림 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34D399;
}

.endexapi-wrap[data-dark="true"] .ex-alert-error,
.endexapi-wrap[data-dark="true"] .ex-alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #F87171;
}

.endexapi-wrap[data-dark="true"] .ex-alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FBBF24;
}

.endexapi-wrap[data-dark="true"] .ex-alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60A5FA;
}

/* 테이블 헤더 정렬 아이콘 */
.endexapi-wrap[data-dark="true"] .ex-table th .sort-icon {
    color: var(--ex-text-tertiary);
}

/* 빈 상태 아이콘 */
.endexapi-wrap[data-dark="true"] .ex-empty-icon {
    opacity: 0.7;
}

/* 통계 아이콘 배경 */
.endexapi-wrap[data-dark="true"] .ex-stat-icon {
    background: var(--ex-primary-alpha-20);
}

/* 모바일 메뉴 오버레이 */
.endexapi-wrap[data-dark="true"] .ex-mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* 모바일 메뉴 헤더 */
.endexapi-wrap[data-dark="true"] .ex-mobile-menu-header {
    border-bottom-color: var(--ex-border-color);
}

/* 텍스트 강조 */
.endexapi-wrap[data-dark="true"] strong,
.endexapi-wrap[data-dark="true"] b {
    color: var(--ex-text-primary);
}

/* 인라인 코드 */
.endexapi-wrap[data-dark="true"] code:not([class]) {
    background: var(--ex-bg-tertiary);
    color: #F472B6;
    padding: 2px 6px;
    border-radius: 4px;
}

/* pre 코드 블록 */
.endexapi-wrap[data-dark="true"] pre {
    background: var(--ex-bg-tertiary);
    border-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] pre code {
    color: var(--ex-text-secondary);
}

/* 필터/검색 영역 */
.endexapi-wrap[data-dark="true"] .ex-filters,
.endexapi-wrap[data-dark="true"] .ex-search-bar {
    background: var(--ex-bg-secondary);
    border-color: var(--ex-border-color);
}

/* 날짜 선택기 */
.endexapi-wrap[data-dark="true"] input[type="date"],
.endexapi-wrap[data-dark="true"] input[type="datetime-local"],
.endexapi-wrap[data-dark="true"] input[type="time"] {
    color-scheme: dark;
}

/* 검색 필터 섹션 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-search-filter-section {
    background: var(--ex-bg-tertiary);
    border-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-search-filter-section .ex-search-icon {
    color: var(--ex-input-icon);
}

.endexapi-wrap[data-dark="true"] .ex-search-filter-section .ex-search-input:focus ~ .ex-search-icon {
    color: var(--ex-primary);
}

/* 트랜지션 - 다크모드 전환 시 부드럽게 */
.endexapi-wrap {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.endexapi-wrap .ex-content,
.endexapi-wrap .ex-card,
.endexapi-wrap .ex-modal-content,
.endexapi-wrap .ex-input,
.endexapi-wrap .ex-select,
.endexapi-wrap .ex-textarea,
.endexapi-wrap .ex-table,
.endexapi-wrap .ex-btn {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* 갤러리 카드 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-gallery-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* 가이드 하이라이트 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-guide-highlight-box {
    background: color-mix(in srgb, var(--ex-warning) 10%, transparent);
}

.endexapi-wrap[data-dark="true"] .ex-guide-hint {
    color: var(--ex-text-secondary);
}

/* 모바일 테마 스위처 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-mobile-theme-switcher {
    border-top-color: var(--ex-border-color);
}

/* ================================================
   29. MY-PROFILE - 마이페이지 (인스타그램 스타일)
   ================================================ */
.endexapi-wrap .ex-my-profile {
    max-width: 935px;
    margin: 0 auto;
    padding: 20px 0;
}

/* 마이페이지 헤더 */
.endexapi-wrap .ex-my-profile-header {
    display: flex;
    gap: 40px;
    padding: 20px 0 40px;
    border-bottom: 1px solid var(--ex-border);
    margin-bottom: 24px;
}

.endexapi-wrap .ex-my-profile-avatar-wrap {
    flex-shrink: 0;
}

.endexapi-wrap .ex-my-profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--ex-primary) 0%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.endexapi-wrap .ex-my-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.endexapi-wrap .ex-my-profile-avatar .ex-avatar-edit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 16px;
}

.endexapi-wrap .ex-my-profile-avatar:hover .ex-avatar-edit {
    opacity: 1;
}

.endexapi-wrap .ex-my-profile-info {
    flex: 1;
    min-width: 0;
}

.endexapi-wrap .ex-my-profile-name-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.endexapi-wrap .ex-my-profile-name {
    font-size: 28px;
    font-weight: 400;
    margin: 0;
    color: var(--ex-text);
}

.endexapi-wrap .ex-my-profile-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.endexapi-wrap .ex-my-profile-stat {
    font-size: 16px;
    color: var(--ex-text);
}

.endexapi-wrap .ex-my-profile-stat strong {
    font-weight: 600;
}

.endexapi-wrap .ex-my-profile-bio {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ex-text);
    margin-bottom: 8px;
    white-space: pre-wrap;
}

.endexapi-wrap .ex-my-profile-website {
    font-size: 13px;
    margin-bottom: 4px;
}

.endexapi-wrap .ex-my-profile-website a {
    color: var(--ex-primary);
    font-weight: 600;
}

.endexapi-wrap .ex-my-profile-location {
    font-size: 13px;
    color: var(--ex-text-muted);
}

/* 마이페이지 탭 */
.endexapi-wrap .ex-my-profile-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.endexapi-wrap .ex-my-profile-tabs .ex-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 마이페이지 콘텐츠 */
.endexapi-wrap .ex-my-profile-content {
    min-height: 300px;
}

/* 마이페이지 갤러리 그리드 (인스타그램 스타일) */
.endexapi-wrap .ex-my-profile-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 16px;
}

.endexapi-wrap .ex-my-profile-gallery-item {
    position: relative;
    cursor: pointer;
}

.endexapi-wrap .ex-my-profile-gallery-thumb {
    position: relative;
    padding-bottom: 100%;
    background: var(--ex-gray-light);
    overflow: hidden;
}

.endexapi-wrap .ex-my-profile-gallery-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.endexapi-wrap .ex-my-profile-gallery-skeleton .skeleton-animate {
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, #fafafa 25%, #e0e0e0 50%, #fafafa 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.endexapi-wrap .ex-my-profile-gallery-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
    height: 200%;
}

.endexapi-wrap .ex-my-profile-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.endexapi-wrap .ex-my-profile-gallery-item:hover .ex-my-profile-gallery-overlay {
    opacity: 1;
}

.endexapi-wrap .ex-my-profile-gallery-author {
    padding: 8px;
    font-size: 12px;
    color: var(--ex-text-muted);
    background: var(--ex-card-bg);
}

/* 마이페이지 반응형 */
@media (max-width: 768px) {
    .endexapi-wrap .ex-my-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 20px 16px;
    }
    
    .endexapi-wrap .ex-my-profile-avatar {
        width: 100px;
        height: 100px;
    }
    
    .endexapi-wrap .ex-my-profile-name-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .endexapi-wrap .ex-my-profile-name {
        font-size: 22px;
    }
    
    .endexapi-wrap .ex-my-profile-stats {
        justify-content: center;
        gap: 24px;
    }
    
    .endexapi-wrap .ex-my-profile-stat {
        font-size: 13px;
        text-align: center;
    }
    
    .endexapi-wrap .ex-my-profile-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    
    .endexapi-wrap .ex-my-profile-tabs .ex-tab {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .endexapi-wrap .ex-my-profile-gallery-grid {
        gap: 2px;
    }
}

/* 마이페이지 - 다크모드 */
.endexapi-wrap[data-dark="true"] .ex-my-profile-header {
    border-bottom-color: var(--ex-border-color);
}

.endexapi-wrap[data-dark="true"] .ex-my-profile-gallery-skeleton .skeleton-animate {
    background: linear-gradient(110deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

.endexapi-wrap[data-dark="true"] .ex-my-profile-gallery-author {
    background: var(--ex-bg-secondary);
}

/* 워크스페이스 소개 셀 - 2줄 말줄임 */
.endexapi-wrap .ex-overview-cell {
    font-size: 12px;
    color: var(--ex-text-muted);
    line-height: 1.5;
    max-width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
}

.endexapi-wrap[data-dark="true"] .ex-overview-cell {
    color: var(--ex-text-muted);
}

/* 프론트페이지 숨김 처리 */
body:not(.wp-admin) .endexapi-wrap .ex-sidebar .ex-theme-switcher {
    display: none !important;
}

body:not(.wp-admin) .endexapi-wrap .ex-mobile-menu .ex-theme-switcher {
    display: none !important;
}

body:not(.wp-admin) .endexapi-wrap .ex-footer-links {
    display: none !important;
}