/**
 * SpeedMIS v7 — Design System
 * Concept: Density with Clarity
 *
 * 모드 전략:
 *  - :root              → 라이트 기본값
 *  - [data-theme="dark"] → 다크 오버라이드
 *  - 모든 컴포넌트는 이 파일의 변수만 참조 (하드코딩 절대 금지)
 */

/* ─────────────────────────────────────────────
   공통 변수 (모드 무관)
───────────────────────────────────────────── */
:root {
  /* 타이포그래피 */
  --font-sans:  'Pretendard', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --lh-tight:   1.3;
  --lh-base:    1.5;

  /* 컴포넌트 규격 */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          10px;
  --radius-xl:          16px;
  --grid-row-height:    36px;
  --sidebar-width:      240px;
  --sidebar-collapsed:  56px;
  --topbar-height:      56px;
  --toolbar-height:     48px;
  --breadcrumb-height:  36px;
  --pagination-height:  40px;
  --btn-height:         32px;
  --btn-height-sm:      28px;
  --input-height:       32px;

  /* 간격 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* 트랜지션 */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ─────────────────────────────────────────────
   라이트 모드 변수 (기본)
───────────────────────────────────────────── */
:root {
  /* 네비게이션 (탑바 + 사이드바) — 차콜 네이비 (직장인 선호) */
  --color-nav-bg:          #1e2a35;           /* topbar 배경 */
  --color-nav-sidebar:     #1a2430;           /* sidebar 배경 */
  --color-nav-text:        #9ab0c4;           /* 기본 텍스트 */
  --color-nav-text-dim:    #4a6278;           /* 그룹 레이블·흐린 텍스트 */
  --color-nav-hover:       #243040;           /* hover 배경 */
  --color-nav-active-bg:   rgba(79,158,237,0.18); /* 활성 아이템 배경 */
  --color-nav-active-text: #6eb6f0;           /* 활성 아이템 텍스트 */
  --color-nav-border:      #24333f;           /* 내부 구분선 */
  --color-nav-logo:        #4f9eed;           /* 로고 강조색 */

  /* 컬러 */
  --color-bg:           #F4F5F7;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F0F1F5;
  --color-surface-3:    #E6E8F0;
  --color-border:       #DDE0E8;
  --color-border-light: #C8CCDA;
  --color-grid-line:    #ECEEF2; /* 엑셀 그리드풍 아주 연한 셀 라인 */
  --color-primary:      #4F6EF7;
  --color-primary-hover:#3A58E0;
  --color-primary-dim:  rgba(79, 110, 247, 0.12);
  --color-success:      #22A660;
  --color-success-dim:  rgba(34, 166, 96, 0.12);
  --color-warning:      #D4860A;
  --color-warning-dim:  rgba(212, 134, 10, 0.12);
  --color-danger:       #D13B35;
  --color-danger-dim:   rgba(209, 59, 53, 0.12);
  --color-text-1:       #1A1D27;
  --color-text-2:       #4A5068;
  --color-text-3:       #8C93B0;
  --color-text-inverse: #FFFFFF;   /* 컬러 배경 위 텍스트 (라이트/다크 공통) */
  --color-tab-inactive: #6B7494;   /* 패널 탭 비활성 (라이트) */
  --color-overlay:      rgba(0, 0, 0, 0.35);

  /* 그림자 (라이트 — 토스 스타일: 부드럽고 넓게) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.12);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.16);

  /* 이미지 필터 */
  --img-filter: none;
}

/* ─────────────────────────────────────────────
   다크 모드 변수
───────────────────────────────────────────── */
[data-theme="dark"] {
  /* 컬러 */
  --color-bg:           #0F1117;
  --color-surface:      #1A1D27;
  --color-surface-2:    #222536;
  --color-surface-3:    #2A2E45;
  --color-border:       #2E3250;
  --color-border-light: #3D4268;
  --color-grid-line:    #262940; /* 다크모드 엑셀 그리드풍 얇은 라인 */
  --color-primary:      #4F6EF7;
  --color-primary-hover:#6B87FF;
  --color-primary-dim:  rgba(79, 110, 247, 0.15);
  --color-success:      #34C97A;
  --color-success-dim:  rgba(52, 201, 122, 0.15);
  --color-warning:      #F5A623;
  --color-warning-dim:  rgba(245, 166, 35, 0.15);
  --color-danger:       #E5534B;
  --color-danger-dim:   rgba(229, 83, 75, 0.15);
  --color-text-1:       #E8EAF0;
  --color-text-2:       #9CA3C4;
  --color-text-3:       #5C6389;
  --color-text-inverse: #FFFFFF;   /* 컬러 배경 위 텍스트 (라이트/다크 공통) */
  --color-tab-inactive: #ADB5D6;   /* 패널 탭 비활성 (다크) — text-2 보다 살짝 밝게, 또렷이 보이게 */
  --color-overlay:      rgba(0, 0, 0, 0.60);

  /* 그림자 (다크) */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.60);
  --shadow-pop: 0 16px 48px rgba(0,0,0,0.70);

  /* 이미지 필터 */
  --img-filter: brightness(0.9);

  /* 네비게이션 (탑바 + 사이드바) — 다크 모드 */
  --color-nav-bg:          #111820;
  --color-nav-sidebar:     #0e1520;
  --color-nav-text:        #7a9ab8;
  --color-nav-text-dim:    #2e4155;
  --color-nav-hover:       #17222e;
  --color-nav-active-bg:   rgba(79,158,237,0.15);
  --color-nav-active-text: #5aaee8;
  --color-nav-border:      #182230;
  --color-nav-logo:        #4a9be0;
}

/* ─────────────────────────────────────────────
   베이스 리셋
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 모드 전환 부드러운 트랜지션 */
  transition: color 0.15s, background-color 0.15s;
}

/* 모든 요소에 컬러 트랜지션 적용 */
*, *::before, *::after {
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 트랜지션 예외: 애니메이션 요소는 덮어쓰지 않음 */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-hover);
}

img, svg {
  filter: var(--img-filter);
}

/* 스크롤바 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-light);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-3);
  background-clip: padding-box;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-light) transparent;
}

/* 선택 영역 */
::selection {
  background: var(--color-primary-dim);
  color: var(--color-text-1);
}