/**
 * CSS 변수 시스템
 *
 * shadcn-ui 디자인 시스템과 확장 변수를 정의합니다.
 * 라이트/다크 모드 지원
 */

:root {
  /* ========================================
     색상 (shadcn-ui 기본)
     ======================================== */

  /* Primary */
  --primary: 0 0% 3.6%;
  --primary-foreground: 0 0% 98%;

  /* Secondary */
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 3.6%;

  /* Destructive (위험 작업) */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* Muted (비활성화, 2차 텍스트) */
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;

  /* Accent (강조) */
  --accent: 0 0% 9.0%;
  --accent-foreground: 0 0% 98%;

  /* Background & Foreground */
  --background: 0 0% 100%;
  --foreground: 0 0% 3.6%;

  /* Popover & Card */
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.6%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.6%;

  /* Border & Input & Ring */
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.6%;

  /* 모서리 반경 */
  --radius: 0.5rem;

  /* ========================================
     확장: 스페이싱 시스템
     ======================================== */

  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */

  /* ========================================
     확장: 타이포그래피
     ======================================== */

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;

  /* 폰트 크기 */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* 줄 높이 */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* 폰트 가중치 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========================================
     확장: 애니메이션
     ======================================== */

  /* 전환(Transition) 시간 */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 이징(Easing) 함수 */
  --easing-linear: linear;
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     확장: 그림자 (Box Shadow)
     ======================================== */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1),
                 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
               0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
               0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
               0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ========================================
     확장: Phase 색상 (배치 변환)
     ======================================== */

  /* Phase 1: HTML 검증 (주황) */
  --color-phase1: 38 92% 50%;
  --color-phase1-light: 38 100% 76%;
  --color-phase1-dark: 38 92% 35%;

  /* Phase 2: PDF 변환 (파랑) */
  --color-phase2: 214 95% 56%;
  --color-phase2-light: 214 100% 76%;
  --color-phase2-dark: 214 95% 36%;

  /* Phase 3: 완료 처리 (초록) */
  --color-phase3: 142 76% 36%;
  --color-phase3-light: 142 77% 65%;
  --color-phase3-dark: 142 76% 26%;

  /* ========================================
     확장: 상태 색상
     ======================================== */

  --color-success: 142 76% 36%;
  --color-warning: 38 92% 50%;
  --color-error: 0 84.2% 60.2%;
  --color-info: 214 95% 56%;
}

/* ========================================
   다크 모드 (Dark Theme)
   ======================================== */

.dark {
  /* 색상 (shadcn-ui 다크) */
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 3.6%;

  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 14.9%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --accent: 0 0% 98%;
  --accent-foreground: 0 0% 9.0%;

  --background: 0 0% 3.6%;
  --foreground: 0 0% 98%;

  --popover: 0 0% 3.6%;
  --popover-foreground: 0 0% 98%;

  --card: 0 0% 3.6%;
  --card-foreground: 0 0% 98%;

  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.3%;
}

/* ========================================
   기본 리셋 (Reset)
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  min-height: 100vh;
  width: 100%;
  transition: background-color var(--duration-base) var(--easing-ease-in-out),
              color var(--duration-base) var(--easing-ease-in-out);
}

/* 스크롤바 스타일 (선택) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.5);
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* ========================================
   포커스 (Accessibility)
   ======================================== */

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ========================================
   선택 텍스트 스타일
   ======================================== */

::selection {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}

/* ========================================
   애니메이션 기본 설정
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}