/* tokens.css — 디자인 토큰(색·간격·타이포·모서리·그림자) 한 곳에서 관리.
   관리 화면(index/login)·지점 입력앱(entry) 3화면이 이 파일 하나를 공유한다(2026-07-21 추사, 전면 리프레시).
   Pretendard는 로컬 파일로 서빙(fonts/*.woff2, SIL OFL 무료 라이선스, fonts/LICENSE.txt) — 외부 CDN 요청 없음, 오프라인에서도 깨지지 않는다.
   원칙: 강조색 파랑 하나 + 중립 회색 스케일. 화면마다 "크기"만 다르게 쓴다(관리=조밀, 입력앱=크게) — benchmark_UI.md §4. */

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 폰트 — 로컬 Pretendard 우선, 실패해도 시스템 한글 폰트로 자연스럽게 대체 */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;

  /* 중립 회색 스케일 (토스류 — 흰/회/검 위에 강조색 하나)
     2026-07-22 추사(정본 재현): 배경·경계선을 디자인 정본(참고_디자인정본/발주관리앱.dc.html)
     실측값(bg #fafafa, border #e9ebef)에 맞춰 미세 조정 — 육안상 거의 동일하나 스펙 일치가 원칙. */
  --gray-50:  #fafafa;
  --gray-100: #f0f2f5;
  --gray-200: #e9ebef;
  --gray-300: #d1d6db;
  --gray-400: #b0b8c1;
  --gray-500: #8b95a1;
  --gray-600: #6b7684;
  --gray-700: #4e5968;
  --gray-800: #333d4b;
  --gray-900: #191f28;

  /* 강조색 — B묶음 §5-2(2026-07-22 주공 확정, A안 주황 / 색상_비교시안.html 실측 근거).
     구 블루(#1c62d6, 정본 코드 기본값)를 대체. 두 톤 관리가 핵심(추사 실측):
       --orange-600(EA580C) = 테두리·아이콘·체크·화살표 등 "비텍스트 그래픽" 전용(3:1 이상 충분)
       --orange-700(C2410C) = 채움 배경+흰 글씨(버튼·선택 타일·활성 배지) 전용, 흰 글씨 대비 5.18:1
       --orange-800(9A3412) = 흰 배경 위 "읽는 글자"로 강조색을 직접 쓰는 모든 곳(링크·라벨·pill 텍스트 등)
         + 위 항목들의 hover 짙은 톤. EA580C 원색을 일반 텍스트로 쓰면 3.56:1로 4.5 기준 미달
         (색상_비교시안.html 대비 실측 표) — 그래서 "읽는 글자"엔 반드시 짙은 톤을 쓴다.
       --orange-50/100 = 선택 카드 틴트 배경 / 그 위 hover 짙은 틴트(구 --blue-50/100 대체).
     정보(info, 파랑)는 강조색과 별개 의미색이라 그대로 둔다(경고·위험·완료·네이비와 같은 급). */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;

  /* 의미 매핑 */
  --color-bg: var(--gray-50);
  --color-surface: #ffffff;
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-500);
  --color-accent: var(--orange-600);
  --color-accent-fill: var(--orange-700);
  --color-accent-hover: var(--orange-800);
  --color-accent-bg: var(--orange-50);
  --color-accent-tint-hover: var(--orange-100);
  --color-accent-tint-text: var(--orange-800);
  /* 위험(danger) — 정본 confBox()·재확인 텍스트 실측값(#c0392b / #fdecea / #eab0a7)로 정합.
     버튼·배지용(진한 톤)과 입력란 강조용(연한 톤)을 분리 — 정본도 같은 이유로 두 톤을 쓴다. */
  --color-danger: #c0392b;
  --color-danger-bg: #fdecea;
  --color-danger-border: #eab0a7;
  /* 경고(warn) — 정본이 문맥별로 쓰는 두 톤을 모두 옮김: 배지=진한 앰버, 배너/입력란=연한 앰버 */
  --color-warn: #8a6d00;
  --color-warn-bg: #fdf3d6;
  --color-warn-field-bg: #fdf6e0;
  --color-warn-field-border: #e6d29a;
  --color-warn-banner-bg: #fdf6e0;
  --color-warn-banner-border: #ecd9a0;
  --color-warn-banner-text: #7a6200;
  /* 성공(success) — 정본 "제출/승인" 배지·정산서 일치 안내 실측값(#0a7d3f / #e6f4ea / #bde3c9) */
  --color-success: #0a7d3f;
  --color-success-bg: #e6f4ea;
  --color-success-border: #bde3c9;
  /* 정보(info) — 정본 야간보고 안내 배너(#1c62d6 텍스트 / #e7f0ff 배경류) */
  --color-info: #1c62d6;
  --color-info-bg: #e7f0ff;
  --color-info-border: #a5d8ff;

  /* 간격 — 4px 그리드 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 모서리 · 그림자 — 테두리 대신 옅은 그림자로 뜨는 카드(경계선은 최소로) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 10px rgba(16, 24, 40, 0.08);
  /* 정본 카드 그림자 실측값(box-shadow:0 1px 2px rgba(16,24,40,.03)) — 테두리가 윤곽을 잡고
     그림자는 거들 뿐인 "플랫에 가까운" 톤. 기존보다 옅다(의도적). */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.03);

  /* 트랜지션 — "누르는 효과" 전역 통일(2026-07-21 추사 3차, 설정 전면 재설계). 120~200ms만 쓴다. */
  --dur-fast: 120ms;
  --dur-base: 170ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* 2026-07-22 영실(B묶음 §6) — 아코디언·행 확장/화면급 전환 전용 토큰(additive, 기존 --dur-fast/
     --dur-base는 다른 화면에서 이미 쓰이고 있어 그대로 둔다). 스펙: 아코디언 180~220ms, 화면급 200~250ms. */
  --dur-expand: 200ms;
  --dur-screen: 220ms;
  --ease-out: cubic-bezier(.16, .84, .32, 1);
  --ease-in: cubic-bezier(.6, 0, .84, .2);

  /* 지점 고유색 — 절제된 8색 팔레트(Mantine류 muted 톤). 지점 id % 8로 프론트에서만 결정적 배정,
     DB 컬럼 추가 없음. 설정 화면에서 "지점별 구분이 한눈에" 되도록 점·좌측 띠에만 쓴다(면 채우기 금지). */
  --store-0: #4C6EF5; --store-1: #12B886; --store-2: #F59F00; --store-3: #E64980;
  --store-4: #7048E8; --store-5: #1098AD; --store-6: #F76707; --store-7: #495057;
}

/* 2026-07-22 영실(B묶음 §6) — 3화면 공유 지점에 두는 게 맞는 전역 접근성 규칙. 특정 화면 전용
   애니메이션(입력앱 확인시트·완료 체크 등)은 각 화면 CSS에서 별도로도 값을 0에 가깝게 두지만,
   여기 두면 앞으로 이 토큰을 쓰는 어떤 화면이 추가돼도 자동으로 켜진다(관리·로그인 화면도 이득 — 손해 없음). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}