/* ============================================================================
   제니 MES (Jenny MES) 디자인 토큰  v1.0.0  (2026-10-15)
   단일 원본(Single Source of Truth). 모든 컴포넌트·화면은 이 변수만 사용한다.
   HEX 는 이 파일에만 존재한다 — 새 색이 필요하면 여기에 토큰부터 추가한다.

   컨셉: "공장의 맥박 (Factory Pulse)"
     스틸 그레이 작업장 위에 코발트 블루 신호 한 줄. 산업적이고 차분하며,
     색은 '상태'를 말할 때만 크게 쓴다. 브랜드 블루는 상태색(초록·노랑·빨강·보라·회색)과
     겹치지 않도록 코발트로 고정한다.

   구조
     0) 원시(primitive) 램프  --jm-p-*   : 직접 쓰지 말고 의미 토큰을 통해 쓴다.
     1) :root / [data-theme="light"]     = 라이트(관리 웹앱·홈페이지 기본)
     2) [data-theme="dark"]              = 다크(요소 단위 적용 가능 — 쇼케이스 패널에도 사용)
     3) @media (prefers-color-scheme: dark) + :root:not([data-theme="light"]) = OS 다크 보조 적용
     4) [data-surface="board"]           = 모니터링 보드 고대비 다크(테마와 무관하게 항상 다크, 7:1 목표)
     5) [data-surface="kiosk"]           = 현장 키오스크(장갑 터치 크기·글자 확대)
     6) 공통 스케일(타이포·간격·반경·그림자·z·모션·터치)

   배치 위치(구현 시): src/main/resources/static/css/jm-tokens.css
   CSP: style-src 'self' — 외부 CDN·인라인 style 속성 금지. 웹폰트는 선택(없어도 시스템 폰트로 동작).
   ========================================================================== */

/* ==========================================================================
   0. 원시 램프 (primitive) — 의미 토큰의 재료
   ========================================================================== */
:root {
  /* 스틸 뉴트럴 (차가운 회색) */
  --jm-p-n0:    #FFFFFF;
  --jm-p-n25:   #F8FAFC;
  --jm-p-n50:   #F2F4F7;
  --jm-p-n100:  #E5E9EF;
  --jm-p-n200:  #D2D8E1;
  --jm-p-n300:  #B3BCC8;
  --jm-p-n400:  #8F9AAA;
  --jm-p-n450:  #7C8797;
  --jm-p-n500:  #687384;
  --jm-p-n550:  #5F6A7A;
  --jm-p-n600:  #4E5868;
  --jm-p-n700:  #3A4350;
  --jm-p-n800:  #262E39;
  --jm-p-n850:  #1C232C;
  --jm-p-n900:  #141A21;
  --jm-p-n950:  #0C1015;
  --jm-p-n1000: #05070A;

  /* 코발트 (브랜드) */
  --jm-p-b50:  #EEF4FF;
  --jm-p-b100: #DBE6FF;
  --jm-p-b200: #B5CCFF;
  --jm-p-b300: #84A9FA;
  --jm-p-b400: #5687F0;
  --jm-p-b500: #2F6AE0;
  --jm-p-b600: #1F55C2;
  --jm-p-b700: #1A459E;
  --jm-p-b800: #17397E;
  --jm-p-b900: #132C5E;
  --jm-p-b950: #0C1C3D;

  /* 펄스 시안 (로고·랜딩 액센트 — 상태 의미로 쓰지 않는다) */
  --jm-p-c300: #5CD6E0;
  --jm-p-c500: #0E9AAA;
  --jm-p-c700: #0A6C78;

  /* 상태 램프: 초록(가동) · 앰버(정지) · 빨강(알람) · 보라(사유 미입력) */
  --jm-p-g50:  #E8F7EE;  --jm-p-g200: #9EDDB8;  --jm-p-g400: #34C072;  --jm-p-g450: #3DDC84;
  --jm-p-g600: #15854A;  --jm-p-g700: #0F6B3B;  --jm-p-g900: #0C2A1A;
  --jm-p-a50:  #FFF6E0;  --jm-p-a200: #FFD97A;  --jm-p-a400: #FFC233;  --jm-p-a500: #F0A800;
  --jm-p-a600: #B97C00;  --jm-p-a700: #7A5200;  --jm-p-a900: #2E2208;
  --jm-p-r50:  #FDECEB;  --jm-p-r200: #F7AAA4;  --jm-p-r400: #FF6B61;  --jm-p-r450: #FF847B;
  --jm-p-r600: #C0261C;  --jm-p-r700: #971B13;  --jm-p-r900: #33100E;
  --jm-p-v50:  #F3EDFD;  --jm-p-v200: #CDB4F7;  --jm-p-v400: #B587FF;  --jm-p-v450: #C29BFF;
  --jm-p-v600: #7140C4;  --jm-p-v700: #5A2FA0;  --jm-p-v900: #221538;
  --jm-p-o400: #9AA4B3;  --jm-p-o450: #A3ADBB;

  /* 투명 레이어 */
  --jm-p-black-a08: rgba(5,7,10,.08);
  --jm-p-black-a14: rgba(5,7,10,.14);
  --jm-p-black-a22: rgba(5,7,10,.22);
  --jm-p-black-a55: rgba(5,7,10,.55);
  --jm-p-white-a10: rgba(255,255,255,.10);
  --jm-p-white-a22: rgba(255,255,255,.22);
  --jm-p-white-a35: rgba(255,255,255,.35);
}

/* ==========================================================================
   1. 라이트 (기본)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 1.1 서피스 */
  --jm-bg:            var(--jm-p-n50);    /* 앱 배경 */
  --jm-surface:       var(--jm-p-n0);     /* 카드·패널·모달 */
  --jm-surface-2:     var(--jm-p-n25);    /* 표 머리·사이드바·보조 패널 */
  --jm-surface-sunk:  var(--jm-p-n100);   /* 트랙·스켈레톤·빈 슬롯 */
  --jm-surface-inverse: var(--jm-p-n900); /* 히어로 다크 띠·툴팁 */
  --jm-scrim:         rgba(12,16,21,.52); /* 모달 뒤 가림막 */

  /* 1.2 글자 (대비는 surface 기준) */
  --jm-text:          var(--jm-p-n900);   /* 17.51:1 */
  --jm-text-muted:    var(--jm-p-n600);   /*  7.19:1 */
  --jm-text-subtle:   var(--jm-p-n550);   /*  5.48:1 (bg 위 4.98:1) — 캡션·단위 */
  --jm-text-disabled: var(--jm-p-n400);   /*  비활성 전용(대비 예외 허용) */
  --jm-text-inverse:  var(--jm-p-n50);

  /* 1.3 선 */
  --jm-line:          var(--jm-p-n200);   /* 장식 구분선 */
  --jm-line-strong:   var(--jm-p-n300);   /* 표 머리·섹션 경계 */
  --jm-line-field:    var(--jm-p-n450);   /* 입력 테두리 3.64:1 (UI 3:1 충족) */

  /* 1.4 브랜드 */
  --jm-primary:          var(--jm-p-b600); /* 흰 글자 6.69:1 */
  --jm-primary-hover:    var(--jm-p-b700); /* 8.79:1 */
  --jm-primary-active:   var(--jm-p-b800);
  --jm-on-primary:       var(--jm-p-n0);
  --jm-primary-text:     var(--jm-p-b600); /* 링크 6.69:1 */
  --jm-primary-soft:     var(--jm-p-b50);
  --jm-primary-soft-text:var(--jm-p-b700); /* 7.96:1 */
  --jm-primary-soft-line:var(--jm-p-b200);
  --jm-accent:           var(--jm-p-c500); /* 로고 펄스·장식 전용 */

  /* 1.5 피드백(시스템 메시지) */
  --jm-success:       var(--jm-p-g700);   /* 6.59:1 */
  --jm-success-soft:  var(--jm-p-g50);
  --jm-warning:       var(--jm-p-a700);   /* 6.92:1 */
  --jm-warning-soft:  var(--jm-p-a50);
  --jm-danger:        var(--jm-p-r600);   /* 5.94:1 */
  --jm-danger-hover:  var(--jm-p-r700);
  --jm-on-danger:     var(--jm-p-n0);
  --jm-danger-soft:   var(--jm-p-r50);
  --jm-info:          var(--jm-p-b700);
  --jm-info-soft:     var(--jm-p-b50);

  /* 1.6 설비 상태색 — 색 + 아이콘 + 패턴 + 라벨 4중 부호화(색만으로 구분 금지)
         fill = 채움 배경, on = 채움 위 글자, text = 일반 배경 위 글자, soft = 연한 배경 */
  --jm-st-run:           var(--jm-p-g600);  /* 가동   흰 4.68:1 */
  --jm-st-run-on:        var(--jm-p-n0);
  --jm-st-run-text:      var(--jm-p-g700);  /* 5.95:1 / soft */
  --jm-st-run-soft:      var(--jm-p-g50);
  --jm-st-stop:          var(--jm-p-a400);  /* 정지   잉크 10.85:1 */
  --jm-st-stop-on:       var(--jm-p-n900);
  --jm-st-stop-text:     var(--jm-p-a700);  /* 6.43:1 / soft */
  --jm-st-stop-soft:     var(--jm-p-a50);
  --jm-st-stop-line:     var(--jm-p-a600);  /* 노랑 채움 경계선 3.53:1 / surface (비텍스트 3:1 보완) */
  --jm-st-alarm:         var(--jm-p-r600);  /* 알람   흰 5.94:1 */
  --jm-st-alarm-on:      var(--jm-p-n0);
  --jm-st-alarm-text:    var(--jm-p-r700);  /* 7.40:1 / soft */
  --jm-st-alarm-soft:    var(--jm-p-r50);
  --jm-st-noreason:      var(--jm-p-v600);  /* 사유미입력 흰 6.50:1 */
  --jm-st-noreason-on:   var(--jm-p-n0);
  --jm-st-noreason-text: var(--jm-p-v700);  /* 7.81:1 / soft */
  --jm-st-noreason-soft: var(--jm-p-v50);
  --jm-st-offline:       var(--jm-p-n550);  /* 오프라인 흰 5.48:1 */
  --jm-st-offline-on:    var(--jm-p-n0);
  --jm-st-offline-text:  var(--jm-p-n700);  /* 8.21:1 / soft */
  --jm-st-offline-soft:  var(--jm-p-n100);
  --jm-st-pattern-ink:   var(--jm-p-black-a14);  /* 상태 패턴(빗금·점) 잉크 */

  /* 1.7 데이터 시각화 (단일 계열 기본 = 코발트, 목표선 = 잉크) */
  --jm-viz-1:      var(--jm-p-b500);
  --jm-viz-1-soft: var(--jm-p-b100);
  --jm-viz-target: var(--jm-p-n700);
  --jm-viz-grid:   var(--jm-p-n200);
  --jm-viz-track:  var(--jm-p-n100);

  /* 1.8 포커스 (모든 배경 위 3:1 이상) */
  --jm-focus:        var(--jm-p-b500);    /* 4.93:1 / surface */
  --jm-focus-offset: var(--jm-p-n0);

  /* 1.9 그림자 (스틸 블랙 3단) */
  --jm-shadow-1: 0 1px 2px rgba(20,26,33,.06), 0 1px 1px rgba(20,26,33,.04);
  --jm-shadow-2: 0 6px 16px -4px rgba(20,26,33,.12), 0 2px 4px -2px rgba(20,26,33,.06);
  --jm-shadow-3: 0 20px 40px -16px rgba(20,26,33,.24), 0 6px 12px -6px rgba(20,26,33,.10);

  /* 1.10 스켈레톤 */
  --jm-skeleton-a: var(--jm-p-n100);
  --jm-skeleton-b: var(--jm-p-n50);
}

/* ==========================================================================
   2. 다크 — 명시 선택 (요소 단위 적용 가능)
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  --jm-bg:            var(--jm-p-n950);
  --jm-surface:       var(--jm-p-n900);
  --jm-surface-2:     var(--jm-p-n850);
  --jm-surface-sunk:  var(--jm-p-n1000);
  --jm-surface-inverse: var(--jm-p-n50);
  --jm-scrim:         rgba(0,0,0,.66);

  --jm-text:          var(--jm-p-n50);    /* 15.89:1 / surface */
  --jm-text-muted:    var(--jm-p-n300);   /*  9.12:1 */
  --jm-text-subtle:   var(--jm-p-n400);   /*  6.14:1 (surface-2 위 5.56:1) */
  --jm-text-disabled: var(--jm-p-n600);
  --jm-text-inverse:  var(--jm-p-n900);

  --jm-line:          var(--jm-p-n800);
  --jm-line-strong:   var(--jm-p-n700);
  --jm-line-field:    var(--jm-p-n500);   /* 3.65:1 */

  --jm-primary:          var(--jm-p-b400); /* 검정 글자 5.88:1 */
  --jm-primary-hover:    var(--jm-p-b300);
  --jm-primary-active:   var(--jm-p-b200);
  --jm-on-primary:       var(--jm-p-n1000);
  --jm-primary-text:     var(--jm-p-b300); /* 7.53:1 */
  --jm-primary-soft:     var(--jm-p-b950);
  --jm-primary-soft-text:var(--jm-p-b200);
  --jm-primary-soft-line:var(--jm-p-b800);
  --jm-accent:           var(--jm-p-c300);

  --jm-success:       var(--jm-p-g400);
  --jm-success-soft:  var(--jm-p-g900);
  --jm-warning:       var(--jm-p-a400);
  --jm-warning-soft:  var(--jm-p-a900);
  --jm-danger:        var(--jm-p-r400);
  --jm-danger-hover:  var(--jm-p-r450);
  --jm-on-danger:     var(--jm-p-n1000);
  --jm-danger-soft:   var(--jm-p-r900);
  --jm-info:          var(--jm-p-b300);
  --jm-info-soft:     var(--jm-p-b950);

  --jm-st-run:           var(--jm-p-g400);  /* 잉크 8.58:1 */
  --jm-st-run-on:        var(--jm-p-n1000);
  --jm-st-run-text:      var(--jm-p-g400);  /* 7.44:1 / surface */
  --jm-st-run-soft:      var(--jm-p-g900);
  --jm-st-stop:          var(--jm-p-a400);
  --jm-st-stop-on:       var(--jm-p-n1000);
  --jm-st-stop-text:     var(--jm-p-a400);  /* 10.85:1 */
  --jm-st-stop-soft:     var(--jm-p-a900);
  --jm-st-stop-line:     var(--jm-p-a400);
  --jm-st-alarm:         var(--jm-p-r400);  /* 잉크 7.23:1 */
  --jm-st-alarm-on:      var(--jm-p-n1000);
  --jm-st-alarm-text:    var(--jm-p-r400);  /* 6.28:1 */
  --jm-st-alarm-soft:    var(--jm-p-r900);
  --jm-st-noreason:      var(--jm-p-v400);  /* 잉크 7.56:1 */
  --jm-st-noreason-on:   var(--jm-p-n1000);
  --jm-st-noreason-text: var(--jm-p-v400);  /* 6.56:1 */
  --jm-st-noreason-soft: var(--jm-p-v900);
  --jm-st-offline:       var(--jm-p-o400);  /* 잉크 8.01:1 */
  --jm-st-offline-on:    var(--jm-p-n1000);
  --jm-st-offline-text:  var(--jm-p-o400);  /* 6.95:1 */
  --jm-st-offline-soft:  var(--jm-p-n850);
  --jm-st-pattern-ink:   var(--jm-p-black-a22);

  --jm-viz-1:      var(--jm-p-b400);
  --jm-viz-1-soft: var(--jm-p-b900);
  --jm-viz-target: var(--jm-p-n200);
  --jm-viz-grid:   var(--jm-p-n800);
  --jm-viz-track:  var(--jm-p-n800);

  --jm-focus:        var(--jm-p-b300);      /* 7.53:1 */
  --jm-focus-offset: var(--jm-p-n900);

  --jm-shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --jm-shadow-2: 0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
  --jm-shadow-3: 0 20px 40px -16px rgba(0,0,0,.70), 0 6px 12px -6px rgba(0,0,0,.45);

  --jm-skeleton-a: var(--jm-p-n850);
  --jm-skeleton-b: var(--jm-p-n800);
}

/* ==========================================================================
   3. 다크 — OS 선호 보조 적용 (명시 light 가 아니면)
      값은 2절과 동일하게 유지한다(수정 시 두 곳 함께).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --jm-bg: var(--jm-p-n950); --jm-surface: var(--jm-p-n900); --jm-surface-2: var(--jm-p-n850);
    --jm-surface-sunk: var(--jm-p-n1000); --jm-surface-inverse: var(--jm-p-n50); --jm-scrim: rgba(0,0,0,.66);
    --jm-text: var(--jm-p-n50); --jm-text-muted: var(--jm-p-n300); --jm-text-subtle: var(--jm-p-n400);
    --jm-text-disabled: var(--jm-p-n600); --jm-text-inverse: var(--jm-p-n900);
    --jm-line: var(--jm-p-n800); --jm-line-strong: var(--jm-p-n700); --jm-line-field: var(--jm-p-n500);
    --jm-primary: var(--jm-p-b400); --jm-primary-hover: var(--jm-p-b300); --jm-primary-active: var(--jm-p-b200);
    --jm-on-primary: var(--jm-p-n1000); --jm-primary-text: var(--jm-p-b300); --jm-primary-soft: var(--jm-p-b950);
    --jm-primary-soft-text: var(--jm-p-b200); --jm-primary-soft-line: var(--jm-p-b800); --jm-accent: var(--jm-p-c300);
    --jm-success: var(--jm-p-g400); --jm-success-soft: var(--jm-p-g900); --jm-warning: var(--jm-p-a400);
    --jm-warning-soft: var(--jm-p-a900); --jm-danger: var(--jm-p-r400); --jm-danger-hover: var(--jm-p-r450);
    --jm-on-danger: var(--jm-p-n1000); --jm-danger-soft: var(--jm-p-r900); --jm-info: var(--jm-p-b300); --jm-info-soft: var(--jm-p-b950);
    --jm-st-run: var(--jm-p-g400); --jm-st-run-on: var(--jm-p-n1000); --jm-st-run-text: var(--jm-p-g400); --jm-st-run-soft: var(--jm-p-g900);
    --jm-st-stop: var(--jm-p-a400); --jm-st-stop-on: var(--jm-p-n1000); --jm-st-stop-text: var(--jm-p-a400); --jm-st-stop-soft: var(--jm-p-a900); --jm-st-stop-line: var(--jm-p-a400);
    --jm-st-alarm: var(--jm-p-r400); --jm-st-alarm-on: var(--jm-p-n1000); --jm-st-alarm-text: var(--jm-p-r400); --jm-st-alarm-soft: var(--jm-p-r900);
    --jm-st-noreason: var(--jm-p-v400); --jm-st-noreason-on: var(--jm-p-n1000); --jm-st-noreason-text: var(--jm-p-v400); --jm-st-noreason-soft: var(--jm-p-v900);
    --jm-st-offline: var(--jm-p-o400); --jm-st-offline-on: var(--jm-p-n1000); --jm-st-offline-text: var(--jm-p-o400); --jm-st-offline-soft: var(--jm-p-n850);
    --jm-st-pattern-ink: var(--jm-p-black-a22);
    --jm-viz-1: var(--jm-p-b400); --jm-viz-1-soft: var(--jm-p-b900); --jm-viz-target: var(--jm-p-n200);
    --jm-viz-grid: var(--jm-p-n800); --jm-viz-track: var(--jm-p-n800);
    --jm-focus: var(--jm-p-b300); --jm-focus-offset: var(--jm-p-n900);
    --jm-shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --jm-shadow-2: 0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px -2px rgba(0,0,0,.40);
    --jm-shadow-3: 0 20px 40px -16px rgba(0,0,0,.70), 0 6px 12px -6px rgba(0,0,0,.45);
    --jm-skeleton-a: var(--jm-p-n850); --jm-skeleton-b: var(--jm-p-n800);
  }
}

/* ==========================================================================
   4. 모니터링 보드 — 고대비 다크 (테마와 무관, 본문 7:1 이상 목표)
      대형 모니터 3~8m 시청 거리. 상태 타일은 '밝은 채움 + 검정 글자'로 최대 대비.
   ========================================================================== */
[data-surface="board"] {
  color-scheme: dark;
  --jm-bg:            var(--jm-p-n1000);
  --jm-surface:       #0E131A;            /* 패널 */
  --jm-surface-2:     #151B24;
  --jm-surface-sunk:  var(--jm-p-n1000);
  --jm-text:          var(--jm-p-n0);     /* 20.17:1 */
  --jm-text-muted:    #C9D1DC;            /* 12.10:1 / 패널 */
  --jm-text-subtle:   var(--jm-p-n300);   /* 9.4:1 / 패널 */
  --jm-line:          var(--jm-p-n800);
  --jm-line-strong:   var(--jm-p-n600);
  --jm-primary:       var(--jm-p-b300);
  --jm-on-primary:    var(--jm-p-n1000);
  --jm-primary-text:  var(--jm-p-b300);
  --jm-focus:         var(--jm-p-b300);
  --jm-focus-offset:  var(--jm-p-n1000);

  --jm-st-run:           var(--jm-p-g450);  /* 잉크 11.30:1 */
  --jm-st-run-on:        var(--jm-p-n1000);
  --jm-st-run-text:      var(--jm-p-g450);  /* 10.45:1 / 패널 */
  --jm-st-run-soft:      var(--jm-p-g900);
  --jm-st-stop:          var(--jm-p-a400);  /* 12.50:1 */
  --jm-st-stop-on:       var(--jm-p-n1000);
  --jm-st-stop-text:     var(--jm-p-a400);
  --jm-st-stop-soft:     var(--jm-p-a900);
  --jm-st-stop-line:     var(--jm-p-a400);
  --jm-st-alarm:         var(--jm-p-r450);  /* 잉크 8.34:1 */
  --jm-st-alarm-on:      var(--jm-p-n1000);
  --jm-st-alarm-text:    var(--jm-p-r450);  /* 7.71:1 / 패널 */
  --jm-st-alarm-soft:    var(--jm-p-r900);
  --jm-st-noreason:      var(--jm-p-v450);  /* 9.05:1 */
  --jm-st-noreason-on:   var(--jm-p-n1000);
  --jm-st-noreason-text: var(--jm-p-v450);
  --jm-st-noreason-soft: var(--jm-p-v900);
  --jm-st-offline:       var(--jm-p-o450);  /* 8.89:1 */
  --jm-st-offline-on:    var(--jm-p-n1000);
  --jm-st-offline-text:  var(--jm-p-o450);
  --jm-st-offline-soft:  var(--jm-p-n850);
  --jm-st-pattern-ink:   var(--jm-p-black-a22);

  --jm-viz-1:      var(--jm-p-b300);
  --jm-viz-target: var(--jm-p-n0);
  --jm-viz-grid:   var(--jm-p-n800);
  --jm-viz-track:  var(--jm-p-n800);

  /* 보드 전용 큰 글자 스케일 */
  --jm-board-fs-title: clamp(1.5rem, 1.2rem + 1.2vw, 2.75rem);
  --jm-board-fs-kpi:   clamp(2.5rem, 1.6rem + 3.4vw, 6rem);
  --jm-board-fs-tile:  clamp(1.25rem, 1rem + 1vw, 2.25rem);
  --jm-board-fs-label: clamp(1rem, .9rem + .4vw, 1.5rem);
}

/* ==========================================================================
   5. 키오스크 — 현장 태블릿(1024×768, 장갑 착용) : 크기 토큰만 확대
   ========================================================================== */
[data-surface="kiosk"] {
  --jm-touch-min: var(--jm-touch-kiosk);
  --jm-fs-body:   1.125rem;
  --jm-kiosk-fs-btn:   clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --jm-kiosk-fs-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* ==========================================================================
   6. 공통 스케일 (테마 무관)
   ========================================================================== */
:root {
  /* 6.1 폰트 — Pretendard 우선, 미설치 시 시스템 한글 폰트. 외부 CDN 의존 없음 */
  --jm-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                  "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
                  "Segoe UI", system-ui, sans-serif;
  --jm-font-num:  "Pretendard Variable", Pretendard, "Segoe UI", system-ui, sans-serif;  /* + tabular-nums */
  --jm-font-mono: "D2Coding", "JetBrains Mono", Consolas, "SFMono-Regular", ui-monospace, monospace;

  /* 6.2 타입 스케일 (rem, 16px 기준) */
  --jm-fs-xs:   .75rem;    /* 12 — 법적 고지·축 눈금만 */
  --jm-fs-sm:   .8125rem;  /* 13 — 표(dense)·캡션 */
  --jm-fs-md:   .875rem;   /* 14 — 표·폼 라벨 */
  --jm-fs-body: 1rem;      /* 16 — 본문 */
  --jm-fs-lg:   1.125rem;  /* 18 */
  --jm-fs-xl:   1.25rem;   /* 20 — 카드 제목 */
  --jm-fs-2xl:  1.5rem;    /* 24 — 페이지 제목 */
  --jm-fs-3xl:  2rem;      /* 32 — KPI 값 */
  --jm-fs-4xl:  2.5rem;    /* 40 */
  --jm-fs-display: clamp(2rem, 1.3rem + 3vw, 3.5rem);  /* 랜딩 히어로 */
  --jm-fw-regular: 400;
  --jm-fw-medium:  500;
  --jm-fw-semibold:600;
  --jm-fw-bold:    700;
  --jm-fw-heavy:   800;
  --jm-lh-tight: 1.2;
  --jm-lh-snug:  1.35;
  --jm-lh-body:  1.6;
  --jm-ls-tight: -.02em;
  --jm-ls-caps:  .06em;

  /* 6.3 간격 (4 기반) */
  --jm-sp-0:  0;
  --jm-sp-1:  .25rem;  /*  4 */
  --jm-sp-2:  .5rem;   /*  8 */
  --jm-sp-3:  .75rem;  /* 12 */
  --jm-sp-4:  1rem;    /* 16 */
  --jm-sp-5:  1.25rem; /* 20 */
  --jm-sp-6:  1.5rem;  /* 24 */
  --jm-sp-8:  2rem;    /* 32 */
  --jm-sp-10: 2.5rem;  /* 40 */
  --jm-sp-12: 3rem;    /* 48 */
  --jm-sp-16: 4rem;    /* 64 */
  --jm-sp-20: 5rem;    /* 80 */
  --jm-sp-24: 6rem;    /* 96 */

  /* 6.4 반경 — 산업적 톤: 작고 단단하게 */
  --jm-radius-xs:   3px;    /* 체크·점·스파크 */
  --jm-radius-sm:   6px;    /* 버튼·입력·칩 */
  --jm-radius-md:   10px;   /* 카드·타일·모달 */
  --jm-radius-lg:   16px;   /* 키오스크 대형 버튼·히어로 판 */
  --jm-radius-pill: 999px;  /* 배지 */

  /* 6.5 선 두께 */
  --jm-bw:        1px;
  --jm-bw-strong: 2px;
  --jm-bw-status: 6px;      /* 설비 타일 상태 바 */
  --jm-focus-width:  3px;
  --jm-focus-gap:    2px;

  /* 6.6 터치·컨트롤 높이 */
  --jm-ctl-sm:   2rem;      /* 32 — 데스크톱 고밀도(포인터 정밀 환경 전용) */
  --jm-ctl-md:   2.5rem;    /* 40 */
  --jm-ctl-lg:   3rem;      /* 48 */
  --jm-touch-min:   2.75rem;/* 44 — 터치 최소 */
  --jm-touch-kiosk: 3.5rem; /* 56 — 장갑 터치 최소 */
  --jm-kiosk-btn:   7.5rem; /* 120 — 키오스크 주 버튼 높이 */
  --jm-touch-gap:   .5rem;  /* 인접 타깃 간격 8 */
  --jm-touch-gap-kiosk: 1rem;

  /* 6.7 레이아웃 */
  --jm-container:   75rem;  /* 1200 랜딩 */
  --jm-container-wide: 90rem;
  --jm-sidebar-w:   15rem;  /* 240 */
  --jm-topbar-h:    3.5rem; /* 56 */
  --jm-gutter:      1rem;   /* 모바일 좌우 16 */
  --jm-gutter-lg:   1.5rem;
  --jm-bp-sm: 600px;  --jm-bp-md: 1024px;  --jm-bp-lg: 1440px;  /* 참고값(미디어쿼리는 px 직접) */

  /* 6.8 z-index */
  --jm-z-base:    1;
  --jm-z-sticky:  10;
  --jm-z-sidebar: 20;
  --jm-z-topbar:  30;
  --jm-z-dropdown:40;
  --jm-z-dialog:  50;
  --jm-z-toast:   60;
  --jm-z-tooltip: 70;

  /* 6.9 모션 — prefers-reduced-motion 에서 0 으로 */
  --jm-dur-fast: 120ms;
  --jm-dur-base: 180ms;
  --jm-dur-slow: 280ms;
  --jm-dur-pulse: 1.6s;   /* 알람 맥박 */
  --jm-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --jm-ease-out:      cubic-bezier(0, 0, .2, 1);
  --jm-ease-in:       cubic-bezier(.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --jm-dur-fast: 0ms;
    --jm-dur-base: 0ms;
    --jm-dur-slow: 0ms;
    --jm-dur-pulse: 0s;
  }
}