/* ============================================================
   GILPOS SaaS — Design Tokens (tokens.css)
   모든 색상·간격·글자·그림자 값은 이 파일에서만 정의한다.
   컴포넌트/화면 CSS는 반드시 var(--token)으로만 참조한다.
   ============================================================ */

:root {
  /* ---------- Color: Brand ---------- */
  /* ★★ 하늘빛 「파랑」 #378ADD (사장님 확정 2026-09-07 「파란색이 훨씬 시원해 보인다」).
     2026-08-24~09-07 은 물빛 #0E9EB4 였고, 그 전엔 짙은 파랑 #2E6FF2 였다.
     밝은 흰 바탕에 시원한 파랑 하나. 누런 기가 도는 바탕은 여전히 쓰지 않는다.
     ★ 색을 또 바꿀 때는 이 파일만으로 안 끝난다 — sale.css·screens.css·layout.css·components.css 의
       대체값과 하드코딩, app/index.html 의 theme-color, manifest.json, master.html 까지 같이 간다 */
  --color-primary:        #378ADD;
  --color-primary-hover:  #2E7AC8;
  --color-primary-active: #266AB0;
  --color-primary-soft:   #E6F1FB;  /* 연한 파랑 배경 (선택 상태, 뱃지) */
  --color-primary-border: #B5D4F4;

  /* ---------- Color: Neutral ---------- */
  --color-bg:             #FFFFFF;  /* 기본 배경 */
  /* ★ 본문 바닥색 (2026-08-24) — 카드가 바닥에서 떠 보이게 한 톤 내렸다.
     bg-soft 와 따로 둔다. bg-soft 는 표 머리·잠긴 칸에도 쓰여서 같이 어두워지면 안 된다 */
  --color-canvas:         #E5EEF8;
  --color-bg-soft:        #F3F7FC;  /* 페이지/섹션 배경 — 아주 옅은 파랑 */
  --color-bg-hover:       #EAF2FA;  /* 행 hover */
  --color-border:         #E0E9F2;
  --color-border-strong:  #C4D6E6;

  --color-text:           #132832;  /* 본문 */
  --color-text-secondary: #4A6470;  /* 보조 설명 */
  --color-text-tertiary:  #8AA2AC;  /* placeholder, 비활성 라벨 */
  --color-text-disabled:  #B0B8C1;
  --color-text-invert:    #FFFFFF;

  /* ---------- Color: Semantic ---------- */
  --color-success:        #14934A;
  --color-success-soft:   #E8F7EE;
  --color-warning:        #D97706;
  --color-warning-soft:   #FDF3E4;
  --color-danger:         #E5484D;
  --color-danger-hover:   #CC3A3F;
  --color-danger-soft:    #FDEBEC;
  --color-info:           #378ADD;
  --color-info-soft:      #E6F1FB;

  /* ---------- Typography ---------- */
  --font-family:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                  'Malgun Gothic', 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;

  --font-size-xs:   12px;   /* 캡션, 뱃지 */
  --font-size-sm:   13px;   /* 테이블 보조, 작은 라벨 */
  --font-size-md:   14px;   /* 기본 본문 */
  --font-size-lg:   16px;   /* 강조 본문, 입력값 */
  --font-size-xl:   18px;   /* 섹션 제목 */
  --font-size-2xl:  22px;   /* 페이지 제목 */
  --font-size-3xl:  28px;   /* 대시보드 주요 금액 */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.3;
  --line-height-normal: 1.55;

  /* ---------- 금액 표시 (시그니처) ----------
     금액은 항상 .money 클래스 사용: tabular-nums로 자릿수 정렬 */
  --money-font-weight: 700;
  --money-letter-spacing: -0.02em;

  /* ---------- Spacing (4px 기반) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Radius ---------- */
  /* 모서리를 조금 더 둥글게 — 딱딱해 보이지 않게 (2026-08-24) */
  --radius-sm:   9px;    /* 뱃지, 작은 버튼 */
  --radius-md:   13px;   /* 버튼, 입력 */
  --radius-lg:   20px;   /* 카드 */
  --radius-xl:   20px;   /* 모달 */
  --radius-full: 999px;  /* 필 뱃지 */

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 48, 88, 0.06);
  --shadow-md: 0 3px 12px rgba(16, 48, 88, 0.09);
  --shadow-lg: 0 8px 24px rgba(16, 48, 88, 0.14);   /* 모달, 드롭다운 */

  /* ---------- Layout ---------- */
  --sidebar-width: 240px;
  --header-height: 56px;
  --content-max-width: none;      /* 화면을 꽉 채운다 (1200px 이던 것 — 오른쪽이 많이 비었다) */
  /* ★ 좁혀 놓는 화면 하나가 쓰는 폭 (2026-09-05 반입 수정3).
       화면을 다 채우면 표 여섯 칸이 손가락 두 뼘씩 벌어져 한 줄로 안 읽힌다.
       내부용 카우타이어 POS 가 본문을 `.tp-wrap` 한 겹으로 가운데 모으는 것과 같은 뜻이다.
       ⚠ --content-max-width 를 건드리면 다섯 화면이 다 좁아진다. 그래서 따로 둔다.
       지금 쓰는 곳은 **입고·반품·반입·반출 화면(#scr-io)** 하나다 (사장님 「다 좁혀」 2026-09-05).
       다른 화면도 좁힐 때 이 값을 함께 쓴다 */
  --io-narrow-width: 1170px;

  /* ---------- Motion ---------- */
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;

  /* ---------- Z-index ---------- */
  --z-dropdown: 100;
  --z-toast: 300;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg-soft);
  -webkit-font-smoothing: antialiased;
}

/* 금액 표시 — 항상 이 클래스로 */
.money {
  font-variant-numeric: tabular-nums;
  font-weight: var(--money-font-weight);
  letter-spacing: var(--money-letter-spacing);
}
/* 남으면 초록·밑지면 빨강 — 사장님이 정한 규칙이다 */
.money--plus  { color: var(--color-success); }
.money--minus { color: var(--color-danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}