/* =============================================
 *  PE.Toolkit 디자인 시스템 (Design System)
 *  =============================================
 *  이 파일에는 프로젝트 전체에서 사용되는 색상, 폰트, 간격,
 *  그림자, 애니메이션 등의 디자인 토큰(변수)이 정의되어 있습니다.
 *  새로운 도구를 만들 때 이 변수들을 사용하면 일관된 디자인을 유지할 수 있습니다.
 */

/* === CSS 변수 정의 (전역 디자인 토큰) === */
:root {
  /* --- 브랜드 색상 --- */
  /* 주황색 계열: PE.Toolkit의 주요 브랜드 색상 */
  --color-primary: #E8913A;          /* 메인 주황색 (버튼, 강조 등) */
  --color-primary-light: #F0A85C;    /* 밝은 주황색 (호버 효과 등) */
  --color-primary-dark: #D07A2E;     /* 어두운 주황색 (클릭 효과 등) */
  --color-primary-bg: #FEF5EC;       /* 주황색 배경 (선택된 메뉴 등) */
  --color-primary-bg-hover: #FDE8D4; /* 주황색 배경 호버 */

  /* --- 상태 표시 색상 --- */
  --color-success: #22C55E;          /* 성공 (초록) */
  --color-warning: #F59E0B;          /* 경고 (노랑) */
  --color-error: #EF4444;            /* 오류 (빨강) */
  --color-info: #3B82F6;             /* 정보 (파랑) */

  /* --- 중립 색상 (배경, 테두리, 텍스트 등) --- */
  --color-bg-primary: #FFFFFF;       /* 메인 콘텐츠 배경 (흰색) */
  --color-bg-secondary: #F9FAFB;     /* 보조 배경 (약간 회색) */
  --color-bg-tertiary: #F3F4F6;      /* 세 번째 배경 (더 진한 회색) */
  --color-bg-sidebar: #FAFAF9;       /* 사이드바 배경 (따뜻한 회색) */
  --color-bg-hover: #F3F4F6;         /* 마우스 올렸을 때 배경 */
  --color-bg-active: #E5E7EB;        /* 클릭/활성 상태 배경 */
  --color-bg-overlay: rgba(0, 0, 0, 0.4); /* 오버레이(팝업 뒤) 반투명 배경 */

  --color-border: #E5E7EB;           /* 기본 테두리 색 */
  --color-border-light: #F3F4F6;     /* 연한 테두리 색 */
  --color-border-focus: #E8913A;     /* 포커스 시 테두리 색 (주황) */

  --color-text-primary: #111827;     /* 주요 텍스트 (거의 검정) */
  --color-text-secondary: #6B7280;   /* 보조 텍스트 (회색) */
  --color-text-tertiary: #9CA3AF;    /* 세 번째 텍스트 (연한 회색) */
  --color-text-inverse: #FFFFFF;     /* 반전 텍스트 (흰색, 어두운 배경 위) */

  /* --- 타이포그래피 (글꼴) --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.6875rem;        /* 11px - 아주 작은 텍스트 */
  --font-size-sm: 0.75rem;          /* 12px - 작은 텍스트 */
  --font-size-base: 0.8125rem;      /* 13px - 기본 텍스트 */
  --font-size-md: 0.875rem;         /* 14px - 중간 텍스트 */
  --font-size-lg: 1rem;             /* 16px - 큰 텍스트 */
  --font-size-xl: 1.25rem;          /* 20px - 제목 */
  --font-size-2xl: 1.5rem;          /* 24px - 큰 제목 */
  --font-size-3xl: 1.875rem;        /* 30px - 매우 큰 제목 */

  /* --- 글꼴 두께 --- */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- 간격 (여백 및 패딩) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* --- 모서리 둥글기 --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px; /* 완전한 원 */

  /* --- 그림자 효과 --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* --- 전환 애니메이션 --- */
  --transition-fast: 150ms ease;     /* 빠른 전환 (호버 등) */
  --transition-base: 200ms ease;     /* 기본 전환 */
  --transition-slow: 300ms ease;     /* 느린 전환 (페이지 전환 등) */
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 탄성 효과 */

  /* --- 사이드바 크기 --- */
  --sidebar-width: 240px;            /* 사이드바 가로 너비 */
  --sidebar-collapsed-width: 64px;   /* 접힌 사이드바 너비 (향후 사용) */

  /* --- z-index 레이어 순서 --- */
  --z-sidebar: 100;                  /* 사이드바 */
  --z-header: 200;                   /* 상단 헤더 */
  --z-dropdown: 300;                 /* 드롭다운 메뉴 */
  --z-modal: 400;                    /* 모달/팝업 */
  --z-toast: 500;                    /* 알림 토스트 */
}


/* === 전역 초기화 (리셋) === */
/* 브라우저 기본 스타일을 통일하여 일관된 디자인을 보장합니다 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding과 border를 width에 포함 */
}

html {
  font-size: 16px; /* rem 기준값 */
  -webkit-font-smoothing: antialiased;  /* 폰트 렌더링 부드럽게 (Mac) */
  -moz-osx-font-smoothing: grayscale;   /* 폰트 렌더링 부드럽게 (Firefox) */
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: 1.5;
  overflow: hidden; /* 전체 페이지 스크롤 방지 (내부 콘텐츠만 스크롤) */
}

/* 기본 링크 스타일 */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
}

/* 기본 버튼 리셋 */
button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* 기본 인풋 리셋 */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

/* 이미지 기본 스타일 */
img {
  max-width: 100%;
  display: block;
}

/* 스크롤바 커스텀 디자인 (Webkit 브라우저: Chrome, Edge 등) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-tertiary);
}


/* === 유틸리티 클래스 === */
/* 자주 사용되는 스타일을 클래스로 미리 정의해두어 재사용합니다 */

/* 화면에서 숨기기 (접근성 유지) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 완전히 숨기기 */
.hidden {
  display: none !important;
}

/* 텍스트 줄바꿈 방지 및 말줄임표(...) 표시 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 페이드 인 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 업 애니메이션 */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 다운 애니메이션 (검색 결과 등) */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 스케일 인 애니메이션 (모달 등) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 페이드 인 유틸리티 */
.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease forwards;
}

/* 슬라이드 업 유틸리티 */
.animate-slide-up {
  animation: slideUp var(--transition-slow) ease forwards;
}


/* === 공통 컴포넌트 스타일 === */
/* 도구 개발 시 사용할 수 있는 재사용 가능한 UI 컴포넌트들 */

/* --- 버튼 기본 스타일 --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
}

/* 주요 버튼 (주황색 배경) */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

/* 보조 버튼 (테두리만) */
.btn--secondary {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-text-tertiary);
}

/* 고스트 버튼 (배경 없음) */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}

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

/* 버튼 크기 변형 */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
}

/* --- 카드 컴포넌트 --- */
.card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-light);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.card__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* --- 입력 필드 컴포넌트 --- */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(232, 145, 58, 0.1);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

/* --- 입력 필드 라벨 --- */
.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

/* --- 뱃지 컴포넌트 --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.badge--primary {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

.badge--success {
  background-color: #ECFDF5;
  color: var(--color-success);
}

.badge--warning {
  background-color: #FFFBEB;
  color: var(--color-warning);
}

.badge--error {
  background-color: #FEF2F2;
  color: var(--color-error);
}

/* --- 구분선 --- */
.divider {
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-4) 0;
}

/* --- 빈 상태 표시 --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty-state__icon {
  font-size: 3rem;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.empty-state__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 400px;
  line-height: 1.6;
}


/* === 알림 토스트 === */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-base);
  animation: slideUp var(--transition-slow) ease forwards;
  min-width: 280px;
  max-width: 420px;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error { border-left: 3px solid var(--color-error); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info { border-left: 3px solid var(--color-info); }

.toast__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.toast--success .toast__icon { color: var(--color-success); }
.toast--error .toast__icon { color: var(--color-error); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info .toast__icon { color: var(--color-info); }

.toast__message {
  flex: 1;
  color: var(--color-text-primary);
}

.toast__close {
  color: var(--color-text-tertiary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.toast__close:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}