/* ============================================
   Design System - CSS Variables
   ============================================
   이 파일은 사이트 전체의 디자인 토큰을 정의합니다.
   모든 색상, 폰트 크기, 간격 등은 이 변수를 참조해야 합니다.
   ============================================ */

:root {
  /* ========== 폰트 패밀리 ========== */
  --font-family: 'Pretendard', -apple-system, sans-serif;  /* 기본: 나눔스퀘어네오 가변형 */
  /* 선택 가능한 폰트:
     - 'NanumSquareNeoVariable', sans-serif (나눔스퀘어네오 가변형, 고딕체, 기본)
     - 'Pretendard', -apple-system, sans-serif (Pretendard 가변형, 고딕체)
     - 'Noto Serif KR', serif (Noto Serif KR 가변형, 명조체, weight 200-900)
  */

  /* ========== 폰트 크기 ========== */
  --font-display: 72px;
  --font-h1: 40px;
  --font-h2: 32px;
  --font-h3: 24px;
  --font-h4: 20px;
  --font-body: 18px;
  --font-small: 16px;

  /* ========== 폰트 굵기 ========== */
  --weight-display: 700;
  --weight-h1: 600;
  --weight-h2: 500;
  --weight-h3: 500;
  --weight-h4: 500;
  --weight-body: 400;
  --weight-small: 400;

  /* ========== 줄 간격 (Line-height) ========== */
  --line-display: 1.2;
  --line-h1: 1.4;
  --line-h2: 1.5;
  --line-h3: 1.5;
  --line-h4: 1.5;
  --line-body: 1.6;
  --line-small: 1.6;

  /* ========== 자간 (Letter-spacing) ========== */
  --spacing-display: -0.02em;
  --spacing-h1: -0.02em;
  --spacing-h2: -0.01em;
  --spacing-h3: -0.01em;
  --spacing-h4: -0.01em;
  --spacing-body: -0.025em;
  --spacing-small: -0.025em;

  /* ========== 링크 밑줄 간격 ========== */
  /* 2025-10-07: 링크 텍스트와 밑줄 사이 간격 */
  --link-underline-offset: 4px;

  /* ========== 텍스트 색상 ========== */
  --text-primary: #1d1d1f;        /* 기본 글자색 */
  --text-dark: #294579;           /* 진한 글자색 */
  --text-gray: #666;              /* 회색 글자 */
  --text-light: #8a949e;          /* 연한 회색 (placeholder 등) */
  --text-badge-blue: #075985;     /* 배지 파란색 (KCI 등재, 논문 번호 등) */
  --text-secondary: #64748b;      /* 보조 글자색 */

  /* ========== 강조 색상 ========== */
  --accent-primary: #8668ff;      /* 보라색 */
  --accent-secondary: #ed6300;    /* 주황색 */
  --accent-tertiary: #294579;     /* 청록색 */
  --accent-blue: #008dd5;         /* 파란색 */
  --accent-navy: #1e3e83;         /* 네이비 */

  /* ========== 배경 색상 ========== */
  --bg-white: #fff;
  --bg-gray-light: #fafafa;
  --bg-gray: #f5f5f5;

  /* 2025-10-22: 파스텔톤 그라디언트 배경 */
  --bg-pastel-blue-start: #f0f9ff;
  --bg-pastel-blue-end: #e0f2fe;
  --bg-hero-gradient: linear-gradient(135deg, var(--bg-pastel-blue-start) 0%, var(--bg-pastel-blue-end) 100%);

  /* ========== 테두리 색상 ========== */
  --border-light: #e2e2e2;
  --border-medium: #ccc;
  --border-dark: #333;

  /* ========== Border Radius ========== */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* ========== Box Shadow ========== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);           /* 작은 그림자 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);           /* 중간 그림자 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);          /* 큰 그림자 */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);         /* 카드용 */

  /* ========== 간격 (8px 그리드 시스템) ========== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;

  /* ========== 레이아웃 ========== */
  --container-max-width: 1400px;
  --header-height: 204px;         /* info_head(32px) + head(100px) + nav(72px) */
  --header-info-height: 32px;
  --header-main-height: 100px;
  --header-nav-height: 56px;

  /* ========== 반응형 브레이크포인트 (참고용) ========== */
  /* 600px 이하: 모바일 */
  /* 860px 이하: 태블릿 */
  /* 1025px 이상: 데스크탑 */
}

/* ========== 반응형 폰트 크기 ========== */
@media all and (max-width: 860px) {
  :root {
    --font-display: 50px;
    --font-h1: 28px;
    --font-h2: 20px;
    --font-h3: 19px;
    --font-h4: 18px;
    --font-body: 18px;
    --font-small: 16px;
  }
}

@media all and (max-width: 600px) {
  :root {
    --font-display: 35px;
    --font-h1: 22px;
    --font-h2: 18px;
    --font-h3: 17px;
    --font-h4: 16px;
    --font-body: 16px;
    --font-small: 15px;
  }
}