/* static/css/themes.css */

/* =============================================
   완전히 새로운 테마 시스템 - 실시간 적용 최적화
   ============================================= */

/* 기본 라이트 테마 (Default) - 파스텔 & 모던 */
:root,
[data-theme="default"] {
    /* ===== 메인 컬러 팔레트 ===== */
    --primary-color: #ff9a9a;
    --primary-hover: #ff7675;
    --primary-light: #ffb3ba;
    --primary-dark: #e17055;
    --primary-rgb: 255, 154, 154;
    
    --secondary-color: #a8e6cf;
    --secondary-hover: #81c784;
    --secondary-light: #c8e6c9;
    --secondary-dark: #66bb6a;
    --secondary-rgb: 168, 230, 207;
    
    --accent-color: #ffd93d;
    --accent-hover: #ffcc02;
    --accent-light: #fff9c4;
    --accent-dark: #f57f17;
    --accent-rgb: 255, 217, 61;
    
    /* ===== 시스템 컬러 ===== */
    --danger-color: #ff6b6b;
    --danger-hover: #ff5252;
    --danger-light: #ffcdd2;
    --danger-rgb: 255, 107, 107;
    
    --warning-color: #ffc107;
    --warning-hover: #ffb300;
    --warning-light: #fff3c4;
    --warning-rgb: 255, 193, 7;
    
    --success-color: #28a745;
    --success-hover: #218838;
    --success-light: #d4edda;
    --success-rgb: 40, 167, 69;
    
    --info-color: #17a2b8;
    --info-hover: #138496;
    --info-light: #d1ecf1;
    --info-rgb: 23, 162, 184;

    /* ===== 배경 컬러 (레이어 시스템) ===== */
    --bg-base: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --bg-quaternary: #f0f0f0;
    --bg-main: #f8f8f8;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.9);
    --bg-elevated: #ffffff;

    /* ===== 텍스트 컬러 ===== */
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-tertiary: #95a5a6;
    --text-light: #b2bec3;
    --text-inverse: #ffffff;
    --text-muted: #95a5a6;
    --text-disabled: #ddd;

    /* ===== 보더 & 분할선 ===== */
    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-dark: #ced4da;
    --border-primary: var(--primary-color);
    --divider-color: #f1f3f4;

    /* ===== 그림자 시스템 ===== */
    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.16);
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-primary: 0 4px 20px rgba(var(--primary-rgb), 0.3);

    /* ===== 컴포넌트별 배경 ===== */
    --card-bg: #ffffff;
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --header-bg: rgba(255, 255, 255, 0.95);
    --nav-bg: rgba(255, 255, 255, 0.95);
    --sidebar-bg: #ffffff;
    --panel-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --tooltip-bg: #2d3436;

    /* ===== 상호작용 색상 ===== */
    --hover-bg: #f8f9fa;
    --active-bg: #e9ecef;
    --focus-ring: rgba(var(--primary-rgb), 0.25);
    --selection-bg: rgba(var(--primary-rgb), 0.2);
    --disabled-bg: #f8f9fa;
    --pressed-bg: #e9ecef;

    /* ===== 아이콘 색상 ===== */
    --icon-primary: var(--primary-color);
    --icon-secondary: var(--text-secondary);
    --icon-tertiary: #b2bec3;
    --icon-inverse: #ffffff;
    --icon-success: var(--success-color);
    --icon-warning: var(--warning-color);
    --icon-danger: var(--danger-color);

    /* ===== 그라데이션 ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
    --gradient-background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-header: linear-gradient(90deg, var(--header-bg), rgba(255, 255, 255, 0.9));

    /* ===== 라디우스 시스템 ===== */
    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-xlarge: 20px;

    /* ===== 전환 시스템 ===== */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.35s ease;
}

/* =============================================
   오션 테마 (Ocean) - 바다의 깊이와 평온함
   ============================================= */
[data-theme="ocean"] {
    --primary-color: #4A90E2;
    --primary-hover: #357ABD;
    --primary-light: #7FB3F3;
    --primary-dark: #2E5984;
    --primary-rgb: 74, 144, 226;
    
    --secondary-color: #50C878;
    --secondary-hover: #40A368;
    --secondary-light: #7DD8A0;
    --secondary-dark: #3A8B5A;
    --secondary-rgb: 80, 200, 120;
    
    --accent-color: #00CED1;
    --accent-hover: #00B8BB;
    --accent-light: #4DDEDF;
    --accent-dark: #008B8D;
    --accent-rgb: 0, 206, 209;
    
    --danger-color: #FF6B6B;
    --warning-color: #FFA726;
    --success-color: #66BB6A;
    --info-color: #29B6F6;

    --bg-base: #f0f8ff;
    --bg-primary: #f0f8ff;
    --bg-secondary: #e6f3ff;
    --bg-tertiary: #daeeff;
    --bg-quaternary: #cde9ff;
    --bg-main: #f5fafe;
    --bg-overlay: rgba(16, 78, 139, 0.6);
    --bg-glass: rgba(240, 248, 255, 0.9);

    --text-primary: #1e3a5f;
    --text-secondary: #4a6b8a;
    --text-tertiary: #6b8bb5;
    --text-light: #7b9bb8;
    --text-inverse: #ffffff;
    --text-muted: #7b9bb8;

    --border-light: #c8e4fd;
    --border-medium: #a8d4f5;
    --border-dark: #88c3ed;
    --border-primary: var(--primary-color);

    --card-bg: rgba(255, 255, 255, 0.95);
    --modal-bg: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.95);
    --header-bg: rgba(230, 243, 255, 0.95);
    --nav-bg: rgba(240, 248, 255, 0.95);
    --panel-bg: rgba(255, 255, 255, 0.9);

    --hover-bg: #e8f4fd;
    --active-bg: #d1e9fc;
    --focus-ring: rgba(74, 144, 226, 0.25);
    --selection-bg: rgba(74, 144, 226, 0.15);
    --pressed-bg: #d1e9fc;

    --icon-tertiary: #7b9bb8;
    --shadow-light: 0 2px 12px rgba(74, 144, 226, 0.15);
    --shadow-medium: 0 4px 24px rgba(74, 144, 226, 0.20);
    --shadow-heavy: 0 8px 40px rgba(74, 144, 226, 0.25);
    --shadow-primary: 0 4px 20px rgba(74, 144, 226, 0.4);

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --gradient-background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-header: linear-gradient(90deg, rgba(230, 243, 255, 0.98), rgba(218, 238, 255, 0.98));
}

/* =============================================
   선셋 테마 (Sunset) - 따뜻한 노을의 로맨스
   ============================================= */
[data-theme="sunset"] {
    --primary-color: #FF6B6B;
    --primary-hover: #FF5252;
    --primary-light: #FF8A80;
    --primary-dark: #E53935;
    --primary-rgb: 255, 107, 107;
    
    --secondary-color: #FFE066;
    --secondary-hover: #FFD54F;
    --secondary-light: #FFF176;
    --secondary-dark: #FFB300;
    --secondary-rgb: 255, 224, 102;
    
    --accent-color: #FF8E53;
    --accent-hover: #FF7043;
    --accent-light: #FFAB91;
    --accent-dark: #F4511E;
    --accent-rgb: 255, 142, 83;
    
    --danger-color: #F44336;
    --warning-color: #FF9800;
    --success-color: #8BC34A;
    --info-color: #03A9F4;

    --bg-base: #fff8f5;
    --bg-primary: #fff8f5;
    --bg-secondary: #ffeee6;
    --bg-tertiary: #ffe4d6;
    --bg-quaternary: #ffdac7;
    --bg-main: #fffaf7;
    --bg-overlay: rgba(139, 69, 19, 0.6);
    --bg-glass: rgba(255, 248, 245, 0.9);

    --text-primary: #5d4037;
    --text-secondary: #8d6e63;
    --text-tertiary: #a1887f;
    --text-light: #a1887f;
    --text-inverse: #ffffff;
    --text-muted: #a1887f;

    --border-light: #ffd7cc;
    --border-medium: #ffccbc;
    --border-dark: #ffab91;
    --border-primary: var(--primary-color);

    --card-bg: rgba(255, 255, 255, 0.95);
    --modal-bg: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.95);
    --header-bg: rgba(255, 238, 230, 0.95);
    --nav-bg: rgba(255, 248, 245, 0.95);
    --panel-bg: rgba(255, 255, 255, 0.9);

    --hover-bg: #fff3e0;
    --active-bg: #ffe8d1;
    --focus-ring: rgba(255, 107, 107, 0.25);
    --selection-bg: rgba(255, 107, 107, 0.15);
    --pressed-bg: #ffe8d1;

    --icon-tertiary: #a1887f;
    --shadow-light: 0 2px 12px rgba(255, 107, 107, 0.15);
    --shadow-medium: 0 4px 24px rgba(255, 107, 107, 0.20);
    --shadow-heavy: 0 8px 40px rgba(255, 107, 107, 0.25);
    --shadow-primary: 0 4px 20px rgba(255, 107, 107, 0.4);

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --gradient-background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-header: linear-gradient(90deg, rgba(255, 238, 230, 0.98), rgba(255, 228, 214, 0.98));
}

/* =============================================
   포레스트 테마 (Forest) - 자연의 생명력과 평화
   ============================================= */
[data-theme="forest"] {
    --primary-color: #2E8B57;
    --primary-hover: #228B22;
    --primary-light: #90EE90;
    --primary-dark: #006400;
    --primary-rgb: 46, 139, 87;
    
    --secondary-color: #90EE90;
    --secondary-hover: #7FDD7F;
    --secondary-light: #B2FEB2;
    --secondary-dark: #32CD32;
    --secondary-rgb: 144, 238, 144;
    
    --accent-color: #8FBC8F;
    --accent-hover: #7CAB7C;
    --accent-light: #C1E1C1;
    --accent-dark: #556B55;
    --accent-rgb: 143, 188, 143;
    
    --danger-color: #CD5C5C;
    --warning-color: #DAA520;
    --success-color: #228B22;
    --info-color: #4682B4;

    --bg-base: #f8fff8;
    --bg-primary: #f8fff8;
    --bg-secondary: #f0fef0;
    --bg-tertiary: #e8fce8;
    --bg-quaternary: #e0fae0;
    --bg-main: #fafffa;
    --bg-overlay: rgba(46, 125, 50, 0.6);
    --bg-glass: rgba(248, 255, 248, 0.9);

    --text-primary: #1b5e20;
    --text-secondary: #2e7d32;
    --text-tertiary: #43a047;
    --text-light: #66bb6a;
    --text-inverse: #ffffff;
    --text-muted: #66bb6a;

    --border-light: #c8e6c9;
    --border-medium: #a5d6a7;
    --border-dark: #81c784;
    --border-primary: var(--primary-color);

    --card-bg: rgba(255, 255, 255, 0.95);
    --modal-bg: #ffffff;
    --input-bg: rgba(255, 255, 255, 0.95);
    --header-bg: rgba(240, 254, 240, 0.95);
    --nav-bg: rgba(248, 255, 248, 0.95);
    --panel-bg: rgba(255, 255, 255, 0.9);

    --hover-bg: #e8f5e8;
    --active-bg: #d4edc4;
    --focus-ring: rgba(46, 139, 87, 0.25);
    --selection-bg: rgba(46, 139, 87, 0.15);
    --pressed-bg: #d4edc4;

    --icon-tertiary: #66bb6a;
    --shadow-light: 0 2px 12px rgba(46, 139, 87, 0.15);
    --shadow-medium: 0 4px 24px rgba(46, 139, 87, 0.20);
    --shadow-heavy: 0 8px 40px rgba(46, 139, 87, 0.25);
    --shadow-primary: 0 4px 20px rgba(46, 139, 87, 0.4);

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --gradient-background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-header: linear-gradient(90deg, rgba(240, 254, 240, 0.98), rgba(232, 252, 232, 0.98));
}

/* =============================================
   다크 테마 (Dark) - 고급스러운 다크 모드
   ============================================= */
[data-theme="dark"] {
    --primary-color: #6c5ce7;
    --primary-hover: #5f3dc4;
    --primary-light: #a29bfe;
    --primary-dark: #4834d4;
    --primary-rgb: 108, 92, 231;
    
    --secondary-color: #00cec9;
    --secondary-hover: #00b894;
    --secondary-light: #55efc4;
    --secondary-dark: #00a085;
    --secondary-rgb: 0, 206, 201;
    
    --accent-color: #fdcb6e;
    --accent-hover: #f39c12;
    --accent-light: #ffeaa7;
    --accent-dark: #e17055;
    --accent-rgb: 253, 203, 110;
    
    --danger-color: #e84393;
    --warning-color: #f39c12;
    --success-color: #00b894;
    --info-color: #0984e3;

    --bg-base: #1a1a1a;
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --bg-quaternary: #363636;
    --bg-main: #121212;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-glass: rgba(26, 26, 26, 0.9);

    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-tertiary: #909090;
    --text-light: #808080;
    --text-inverse: #1a1a1a;
    --text-muted: #808080;

    --border-light: #3a3a3a;
    --border-medium: #4a4a4a;
    --border-dark: #5a5a5a;
    --border-primary: var(--primary-color);

    --card-bg: #1e1e1e;
    --modal-bg: #1e1e1e;
    --input-bg: #2a2a2a;
    --header-bg: rgba(36, 36, 36, 0.95);
    --nav-bg: rgba(26, 26, 26, 0.95);
    --panel-bg: #1e1e1e;

    --hover-bg: #2a2a2a;
    --active-bg: #333333;
    --focus-ring: rgba(108, 92, 231, 0.4);
    --selection-bg: rgba(108, 92, 231, 0.3);
    --pressed-bg: #333333;

    --icon-tertiary: #808080;
    --shadow-light: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 20px rgba(108, 92, 231, 0.6);

    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --gradient-background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    --gradient-header: linear-gradient(90deg, rgba(36, 36, 36, 0.98), rgba(45, 45, 45, 0.98));
}

/* =============================================
   즉시 적용 테마 시스템 - FOUC 방지
   ============================================= */

/* 페이지 로드 시 즉시 적용되는 기본 스타일 */
body {
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 프로필 아이콘 기본 색상 즉시 적용 */
.profile-avatar-large ion-icon,
.user-avatar ion-icon,
#profileAvatarLarge ion-icon,
#headerUserAvatar ion-icon,
.upload-preview-large ion-icon {
    color: var(--icon-tertiary) !important;
    transition: color 0.2s ease;
}

/* 카드 배경 즉시 적용 */
.card, .profile-content, .category-section, .progress-section, .calendar-section, .filter-section,
.settings-navigation-panel, .settings-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    transition: all 0.2s ease;
}

/* 헤더 배경 즉시 적용 */
.main-header {
    background: var(--gradient-header) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* 네비게이션 배경 즉시 적용 */
.bottom-nav {
    background: var(--nav-bg) !important;
    border-top: 1px solid var(--border-light) !important;
}

/* 설정 페이지 네비게이션 메뉴 */
.menu-item {
    color: var(--text-primary) !important;
    background: transparent !important;
    transition: all 0.3s ease;
}

.menu-item:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.menu-item.active {
    background: var(--gradient-primary) !important;
    color: var(--text-inverse) !important;
}

.menu-item .item-icon {
    background: var(--bg-secondary) !important;
    color: var(--icon-primary) !important;
}

.menu-item.active .item-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-inverse) !important;
}

.menu-item .item-title,
.menu-item .item-desc {
    color: inherit !important;
}

.menu-item .item-arrow {
    color: var(--text-light) !important;
}

.menu-item:hover .item-arrow {
    color: var(--icon-primary) !important;
}

.menu-item.active .item-arrow {
    color: var(--text-inverse) !important;
}

/* =============================================
   공통 테마 시스템 - 최적화된 전환
   ============================================= */

/* 빠른 테마 전환을 위한 축약된 애니메이션 */
* {
    transition: 
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* 즉시 적용이 필요한 요소들 */
.btn-primary {
    background: var(--gradient-primary) !important;
    color: var(--text-inverse) !important;
}

.btn-outline {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.btn-ghost {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 1px solid var(--border-light) !important;
}

.btn-ghost:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-medium) !important;
}

.nav-item.active {
    color: var(--primary-color) !important;
    background-color: var(--selection-bg) !important;
}

.nav-item.active::after {
    background: var(--primary-color) !important;
}

/* 로고 테마 적용 */
.logo-text {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 아이콘 색상 즉시 적용 */
.icon-primary, .title-icon, .logo-icon {
    color: var(--icon-primary) !important;
}

.section-title ion-icon {
    color: var(--primary-color) !important;
}

/* 진행률 표시 색상 */
.progress-fill, .mini-progress-fill {
    stroke: var(--primary-color) !important;
}

.progress-percent, .mini-progress-percent {
    color: var(--primary-color) !important;
}

.emoji-number {
    color: var(--primary-color) !important;
}

/* 입력 필드 테마 적용 */
.form-input, select, textarea {
    background: var(--input-bg) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.form-input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* 모달 테마 적용 */
.modal {
    background: var(--modal-bg) !important;
    border: 1px solid var(--border-light) !important;
}

.modal-overlay {
    background: var(--bg-overlay) !important;
}

/* 토글 스위치 테마 적용 */
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color) !important;
}

.toggle-slider {
    background: var(--border-medium) !important;
}

.toggle-slider::before {
    background: var(--bg-base) !important;
}

/* 호버 효과 즉시 적용 */
.hover-bg:hover,
.setting-item:hover {
    background: var(--hover-bg) !important;
}

/* 스크롤바 테마 적용 */
::-webkit-scrollbar-track {
    background: var(--bg-secondary) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium) !important;
}

/* 토스트 테마 적용 */
.toast {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
}

/* 테마 미리보기 데모 */
.demo-title {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.demo-icon {
    background: var(--gradient-primary) !important;
}

.demo-progress::after {
    background: var(--gradient-primary) !important;
}

/* 테마 옵션 활성화 상태 */
.theme-option.active {
    border-color: var(--primary-color) !important;
    background: var(--gradient-background) !important;
}

.theme-option.active::after {
    background: var(--gradient-primary) !important;
}

.selected-icon {
    color: var(--primary-color) !important;
}

/* 현재 테마 표시 */
.current-theme-name,
.theme-indicator {
    color: var(--primary-color) !important;
    background: var(--selection-bg) !important;
}

/* 그룹 타이틀 강조 */
.group-title::after {
    background: var(--primary-color) !important;
}

/* 섹션 헤더 */
.section-header::before {
    background: var(--gradient-primary) !important;
}

/* 위험 영역 스타일 */
.danger-zone {
    background: linear-gradient(135deg, rgba(220, 38, 127, 0.05), rgba(220, 38, 127, 0.02)) !important;
    border: 1px solid rgba(220, 38, 127, 0.15) !important;
}

.danger-zone::before {
    background: linear-gradient(135deg, #dc267f, #e74c3c) !important;
}

.danger-zone .group-title {
    color: #dc267f !important;
}

.danger-zone .group-title::after {
    background: #dc267f !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc267f, #e74c3c) !important;
    color: var(--text-inverse) !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #e74c3c, #dc267f) !important;
}

/* 네비게이션 패널 인디케이터 */
.nav-panel-indicator {
    background: var(--gradient-primary) !important;
}

/* 범위 슬라이더 */
.custom-option input[type="range"]::-webkit-slider-thumb {
    background: var(--gradient-primary) !important;
}

.range-value {
    color: var(--primary-color) !important;
    background: var(--selection-bg) !important;
}

/* 지원 링크 */
.support-link:hover {
    border-color: var(--primary-color) !important;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    :root {
        --border-light: #000000;
        --border-medium: #000000;
        --text-light: #000000;
    }
    
    [data-theme="dark"] {
        --border-light: #ffffff;
        --border-medium: #ffffff;
        --text-light: #ffffff;
    }
}

/* 모션 줄이기 모드 지원 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 반응형 지원 */
@media (max-width: 768px) {
    [data-theme="dark"] .card,
    [data-theme="dark"] .settings-navigation-panel,
    [data-theme="dark"] .settings-content {
        background: rgba(30, 30, 30, 0.98) !important;
    }
    
    [data-theme="ocean"] .card,
    [data-theme="sunset"] .card,
    [data-theme="forest"] .card,
    [data-theme="ocean"] .settings-navigation-panel,
    [data-theme="sunset"] .settings-navigation-panel,
    [data-theme="forest"] .settings-navigation-panel,
    [data-theme="ocean"] .settings-content,
    [data-theme="sunset"] .settings-content,
    [data-theme="forest"] .settings-content {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* 접근성 개선을 위한 포커스 스타일 */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* 테마 전환 애니메이션 */
.theme-transition {
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 테마별 특수 효과 */
[data-theme="ocean"] .card {
    box-shadow: 0 4px 20px rgba(74, 144, 226, 0.1) !important;
}

[data-theme="sunset"] .card {
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.1) !important;
}

[data-theme="forest"] .card {
    box-shadow: 0 4px 20px rgba(46, 139, 87, 0.1) !important;
}

[data-theme="dark"] .card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}