/* ============================================
   TUTOR CSS 변수
   - 여백 최소화, 글자 크기 축소
   - 한 화면에 최대한 많은 정보 표시
   ============================================ */

:root {
    /* ==========================================
       색상
       ========================================== */
    --color-primary: #3b82f6;        /* 파란색 */
    --color-primary-dark: #2563eb;
    --color-secondary: #6b7280;      /* 회색 */
    --color-success: #10b981;        /* 녹색 */
    --color-warning: #f59e0b;        /* 노란색 */
    --color-error: #ef4444;          /* 빨간색 */
    
    /* ==========================================
       배경
       ========================================== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-dark: #1f2937;
    
    /* ==========================================
       텍스트
       ========================================== */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    
    /* ==========================================
       보더
       ========================================== */
    --border-color: #e5e7eb;
    --border-radius: 4px;            /* 둥글기 축소 */
    --border-radius-sm: 2px;
    --border-radius-lg: 6px;
    
    /* ==========================================
       그림자 (최소화)
       ========================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.1);
    
    /* ==========================================
       폰트 크기 (축소됨)
       ========================================== */
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 10px;            /* 아주 작은 텍스트 */
    --font-size-sm: 11px;            /* 작은 텍스트 */
    --font-size-base: 12px;          /* 기본 텍스트 */
    --font-size-lg: 13px;            /* 조금 큰 텍스트 */
    --font-size-xl: 14px;            /* 큰 텍스트 */
    --font-size-2xl: 16px;           /* 제목용 */
    --font-size-3xl: 18px;           /* 대제목용 */
    
    /* ==========================================
       간격 (최소화됨)
       ========================================== */
    --spacing-xs: 2px;               /* 아주 작은 간격 */
    --spacing-sm: 4px;               /* 작은 간격 */
    --spacing-md: 6px;               /* 중간 간격 */
    --spacing-lg: 8px;               /* 큰 간격 */
    --spacing-xl: 12px;              /* 아주 큰 간격 */
    --spacing-2xl: 16px;             /* 섹션 간격 */
    
    /* ==========================================
       입력 필드
       ========================================== */
    --input-height: 28px;            /* 입력 필드 높이 */
    --input-padding: 4px 8px;        /* 입력 필드 패딩 */
    --button-height: 30px;           /* 버튼 높이 */
    --button-padding: 4px 12px;      /* 버튼 패딩 */
    
    /* ==========================================
       테이블
       ========================================== */
    --table-cell-padding: 4px 6px;   /* 테이블 셀 패딩 */
    --table-header-bg: #f3f4f6;      /* 테이블 헤더 배경 */
    
    /* ==========================================
       카드/컨테이너
       ========================================== */
    --card-padding: 8px;             /* 카드 패딩 */
    --container-padding: 8px;        /* 컨테이너 패딩 */
    
    /* ==========================================
       레이아웃
       ========================================== */
    --header-height: 36px;           /* 헤더 높이 */
    --left-panel-ratio: 6;           /* 왼쪽 패널 비율 (60%) */
    --right-panel-ratio: 4;          /* 오른쪽 패널 비율 (40%) */
}