/**
 * /app/assets/css/tokens.css
 * KDCA 공통 디자인 토큰 — admin + mobile + (선택) site 가 공유하는 구조적 토큰
 * Phase L-46 (2026-05-15): 흩어진 CSS 통일 1단계
 *
 * 철학:
 *   - 색상(accent) 은 영역별로 유지 (admin 빨강, mobile 골드, site 그대로)
 *   - 폰트/간격/radius/그림자/타이포 등 "구조" 토큰만 공유
 *   - 운영 사이트(theme/knca) 디자인 불변 원칙 100% 보장
 *
 * 사용 예:
 *   <link rel="stylesheet" href="/app/assets/css/tokens.css">
 *   <link rel="stylesheet" href="/app/assets/css/theme-admin.css">  ← admin 만
 *   <link rel="stylesheet" href="/app/m/assets/css/design-tokens.css">  ← mobile (자체 import)
 */

/* ============================================================================
 * 폰트 — Pretendard + NotoSansKR 통일 (CDN)
 * ========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {

  /* === Font Family === */
  --kdca-font:        'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
                      'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --kdca-font-mono:   'D2Coding', 'Consolas', 'Menlo', monospace;

  /* === Font Size (rem-based, 기본 16px 가정) === */
  --kdca-text-xs:     0.6875rem;   /* 11px — badge, table */
  --kdca-text-sm:     0.8125rem;   /* 13px — admin 기본 */
  --kdca-text-base:   0.9375rem;   /* 15px — site 기본 */
  --kdca-text-lg:     1.0625rem;   /* 17px — heading 4 */
  --kdca-text-xl:     1.25rem;     /* 20px — page-header h2 */
  --kdca-text-2xl:    1.5rem;      /* 24px */
  --kdca-text-3xl:    1.75rem;     /* 28px — stat-card h3 */
  --kdca-text-4xl:    2.25rem;     /* 36px */

  /* === Font Weight (Pretendard 9단계 지원) === */
  --kdca-fw-light:    300;
  --kdca-fw-normal:   400;
  --kdca-fw-medium:   500;
  --kdca-fw-semibold: 600;
  --kdca-fw-bold:     700;
  --kdca-fw-extra:    800;

  /* === Line Height === */
  --kdca-leading-tight:  1.25;
  --kdca-leading-snug:   1.4;
  --kdca-leading-normal: 1.5;
  --kdca-leading-relaxed: 1.625;

  /* === Spacing Scale (4px grid) === */
  --kdca-space-0:    0;
  --kdca-space-1:    0.25rem;   /* 4px */
  --kdca-space-2:    0.5rem;    /* 8px */
  --kdca-space-3:    0.75rem;   /* 12px */
  --kdca-space-4:    1rem;      /* 16px */
  --kdca-space-5:    1.25rem;   /* 20px */
  --kdca-space-6:    1.5rem;    /* 24px */
  --kdca-space-8:    2rem;      /* 32px */
  --kdca-space-10:   2.5rem;    /* 40px */
  --kdca-space-12:   3rem;      /* 48px */

  /* === Border Radius === */
  --kdca-radius-xs:  4px;
  --kdca-radius-sm:  6px;
  --kdca-radius:     8px;
  --kdca-radius-md:  10px;
  --kdca-radius-lg:  12px;
  --kdca-radius-xl:  16px;
  --kdca-radius-2xl: 22px;
  --kdca-radius-pill: 9999px;

  /* === Border Width === */
  --kdca-border-thin: 1px;
  --kdca-border:      1.5px;
  --kdca-border-bold: 2px;

  /* === Shadow (light 모드 기준) === */
  --kdca-shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --kdca-shadow-sm:   0 2px 6px rgba(0,0,0,0.06);
  --kdca-shadow:      0 4px 12px rgba(0,0,0,0.08);
  --kdca-shadow-lg:   0 8px 24px rgba(0,0,0,0.10);
  --kdca-shadow-xl:   0 16px 48px rgba(0,0,0,0.12);
  --kdca-shadow-glow: 0 0 16px rgba(201,168,106,0.25);   /* gold glow — mobile */

  /* === Transition === */
  --kdca-transition-fast:   100ms ease;
  --kdca-transition:        180ms ease;
  --kdca-transition-slow:   320ms ease;

  /* === Z-index 계층 === */
  --kdca-z-sticky:      100;
  --kdca-z-fixed:       1000;
  --kdca-z-dropdown:    1010;
  --kdca-z-modal-bg:    1040;
  --kdca-z-modal:       1050;
  --kdca-z-popover:     1060;
  --kdca-z-tooltip:     1070;
  --kdca-z-toast:       1080;

  /* === Breakpoints (참고용, JS) === */
  --kdca-bp-sm: 576px;
  --kdca-bp-md: 768px;
  --kdca-bp-lg: 992px;
  --kdca-bp-xl: 1200px;

  /* === Semantic 상태 색상 (영역별 accent 와 별개) === */
  --kdca-state-ok:    #28a745;
  --kdca-state-warn:  #ffc107;
  --kdca-state-err:   #dc3545;
  --kdca-state-info:  #17a2b8;
  --kdca-state-muted: #6c757d;

  /* === 회색 계열 (light/dark 양쪽 호환) === */
  --kdca-gray-50:  #f8f9fa;
  --kdca-gray-100: #f1f3f5;
  --kdca-gray-200: #e9ecef;
  --kdca-gray-300: #dee2e6;
  --kdca-gray-400: #ced4da;
  --kdca-gray-500: #adb5bd;
  --kdca-gray-600: #868e96;
  --kdca-gray-700: #495057;
  --kdca-gray-800: #343a40;
  --kdca-gray-900: #212529;
  --kdca-gray-950: #0f1216;
}

/* ============================================================================
 * 기본 body 폰트 (영역에 상관없이 일관)
 * ========================================================================== */
html, body {
  font-family: var(--kdca-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
 * Tabular numbers — 표/통계 가독성
 * ========================================================================== */
.kdca-num,
.text-end > .num,
table.table td.text-end,
table.table th.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================================
 * 한국어 단어 깨짐 방지 (공통)
 * ========================================================================== */
body, p, h1, h2, h3, h4, h5, h6, td, th, label, button, a, div {
  word-break: keep-all;
}
code, pre, .text-monospace, .font-monospace {
  word-break: break-all;
  font-family: var(--kdca-font-mono);
}