/* ========================================================================== tokens.css — 디자인 토큰 원본: 02-DesignStandards/enterprise-console/core/tokens.css 표준을 들여오되 **다크모드 절은 뺐다** — 이 프로젝트는 쓰지 않는다(2026-08-28 결정). 필요해지면 표준에서 그 절만 다시 들여오면 된다. 프로젝트 고유값은 맨 아래 「늘푸른 층」에만 쓴다. 여기서 하드코딩하지 말 것. 밀도 — default 지금 운영 중인 화면 그대로 (기본값) compact 좁은 화면에서 많은 행을 볼 때 comfortable 더 여유 있게 ========================================================================== */ /* ========================================================================== enterprise-console — tokens.css 업무시스템(ERP · MES · CRM) 디자인 토큰 · 단일 진실 원천(Single Source of Truth) 이 파일은 프레임워크에 종속되지 않는다. - 순수 HTML 납품(S 프로필) → 이 파일 + base.css 두 장이면 끝 - React/shadcn(M·L·D 프로필) → tailwind.preset.js 가 이 변수들을 참조 ┌──────────────────────────────────────────────────────────────────────┐ │ 프로젝트 설정 — 새 프로젝트에서 정하는 것은 이 3가지뿐이다 │ ├──────────────────────────────────────────────────────────────────────┤ │ ① 브랜드색 이 파일 아래 --primary 한 줄 │ │ ② 밀도 │ │ (다크모드 절은 이 프로젝트에서 뺐다 — 쓰지 않기로 했다) │ │ │ │ │ │ │ │ 셋 다 안 적어도 동작한다 (default / 3단 / 시스템테마). │ │ 화면 성격별로 다르게 하고 싶으면 그 구역에만 덮어쓴다 — │ │ CSS 변수는 상속되므로 어느 요소에 붙여도 하위가 따라온다. │ │ │ │ ← 프로젝트 기본 │ │
← 이 화면만 넉넉하게 │ └──────────────────────────────────────────────────────────────────────┘ ========================================================================== */ :root { /* --------------------------------------------------------------- 1. 브랜드 — ★ 프로젝트마다 여기만 교체한다 --------------------------------------------------------------- */ --primary: #2563eb; /* blue-600 */ --primary-hover: #1d4ed8; --primary-active: #1e40af; --primary-fg: #ffffff; /* 활성 배경 틴트를 하드코딩하지 않는다. 이카운트가 rgba(primary, .13) 방식을 쓰는 이유와 같다 — 브랜드색을 바꾸면 내비 활성바·선택행·칩이 전부 따라온다. */ --primary-tint: color-mix(in srgb, var(--primary) 10%, transparent); --primary-tint-strong: color-mix(in srgb, var(--primary) 18%, transparent); --primary-text: color-mix(in srgb, var(--primary) 85%, #000000); --focus-ring: color-mix(in srgb, var(--primary) 40%, transparent); /* --------------------------------------------------------------- 2. 중성색 — Tailwind slate 스케일 이카운트는 Bootstrap gray(#dee2e6 계열)를 쓰지만 slate 쪽이 더 차갑고 shadcn 기본과 일치해 채택. --------------------------------------------------------------- */ --bg: #f8fafc; /* 앱 배경 */ --surface: #ffffff; /* 패널·카드·표 본문 */ --surface-2: #f1f5f9; /* 표 헤더·비활성 영역 */ --surface-3: #e2e8f0; /* 읽기전용 필드 */ --border: #e2e8f0; --border-strong: #cbd5e1; --fg: #0f172a; /* 본문. 순검정(#000)은 종일 보면 눈이 아프다 */ --fg-muted: #64748b; /* 보조 텍스트·라벨 */ --fg-subtle: #94a3b8; /* placeholder·비활성 */ --fg-on-primary: #ffffff; /* --------------------------------------------------------------- 3. 의미색 — 상태 알약(pill)·배지·알림 공용 --------------------------------------------------------------- */ --ok-bg: #dcfce7; --ok-fg: #15803d; --ok-bd: #bbf7d0; --warn-bg: #fef3c7; --warn-fg: #b45309; --warn-bd: #fde68a; --danger-bg: #fee2e2; --danger-fg: #b91c1c; --danger-bd: #fecaca; --info-bg: #dbeafe; --info-fg: #1d4ed8; --info-bd: #bfdbfe; --neutral-bg: #f1f5f9; --neutral-fg: #475569; --neutral-bd: #cbd5e1; /* 금액 전용 — 회계 화면에서 음수를 구분한다 */ --amount-negative: #dc2626; /* --------------------------------------------------------------- 4. 타이포 한글 업무화면에 Malgun Gothic 은 자간과 숫자가 약하다. Pretendard 를 1순위로 두고 시스템 폰트로 폴백한다. 숫자는 반드시 tabular(고정폭) — 금액 열이 흔들리면 안 된다. --------------------------------------------------------------- */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Pretendard Variable", monospace; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; /* --------------------------------------------------------------- 5. 형태 --------------------------------------------------------------- */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; --border-w: 1px; /* 그림자는 남발하지 않는다. 평평한 패널 + 1px 보더가 기본. 떠 있는 것(모달·드롭다운·팝오버)에만 쓴다. */ --shadow-pop: 0 4px 12px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .06); --shadow-modal: 0 16px 48px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .10); /* --------------------------------------------------------------- 6. 모션 — 업무화면에서 애니메이션은 방해다. 짧게. --------------------------------------------------------------- */ --dur-fast: 100ms; --dur: 150ms; --ease: cubic-bezier(.4, 0, .2, 1); /* --------------------------------------------------------------- 7. 레이아웃 골격 (밀도와 무관한 고정 치수) --------------------------------------------------------------- */ --nav-module-h: 44px; /* 1단: 모듈 바 */ --nav-tab-h: 36px; /* 2단: 기능군 탭 */ --sidebar-w: 232px; /* 3단: 트리 사이드바 */ --sidebar-w-collapsed: 52px; --rail-w: 44px; /* 우측 유틸리티 레일 (선택) */ /* --------------------------------------------------------------- 8. z-index — 충돌 방지용 고정 스케일 --------------------------------------------------------------- */ --z-sticky: 10; --z-rail: 20; --z-dropdown: 40; --z-actionbar: 50; --z-modal: 60; --z-toast: 80; } /* ========================================================================== 밀도(Density) — ★ 프로젝트 설정 ② 로 프로젝트마다 한 번 정한다. 안 적으면 default. | 값 | 행높이 | 본문 | 이런 고객에게 | |-------------|--------|------|-----------------------------------------------| | compact | 28px | 12px | 기존 ERP(이카운트 등)에서 이관 · 숙련 실무자 | | | | | · 한 화면에 최대한 많이 봐야 하는 조회/전표 | | default | 34px | 13px | 대부분의 신규 구축. 고민되면 이것 | | comfortable | 40px | 14px | ERP를 처음 쓰는 고객 · 임원 대시보드 | | | | | · 현장 터치 단말(장갑 낀 손) · 고령 사용자 | 화면마다 다르게 하고 싶으면 그 구역에만 덮어쓴다 (CSS 변수는 상속된다): ← 프로젝트 기본
← 대시보드만 넉넉하게 밀도를 바꿔도 색·라디우스·폰트는 그대로다. 치수만 움직인다. ========================================================================== */ :root, [data-density="default"] { --fs-xs: 11px; --fs-sm: 12px; --fs-body: 13px; --fs-lg: 15px; --fs-title: 16px; --lh-body: 1.5; --row-h: 34px; /* 표 본문 행 */ --head-h: 38px; /* 표 헤더 행 */ --ctl-h: 32px; /* 버튼·입력 높이 */ --cell-px: 10px; /* 셀 좌우 패딩 */ --pad: 12px; /* 패널 내부 패딩 */ --gap: 8px; /* 요소 간 기본 간격 */ --gap-sm: 6px; --gap-lg: 16px; } [data-density="compact"] { --fs-xs: 10px; --fs-sm: 11px; --fs-body: 12px; --fs-lg: 13px; --fs-title: 14px; --lh-body: 1.45; --row-h: 28px; --head-h: 32px; --ctl-h: 28px; --cell-px: 8px; --pad: 10px; --gap: 6px; --gap-sm: 4px; --gap-lg: 12px; } [data-density="comfortable"] { --fs-xs: 12px; --fs-sm: 13px; --fs-body: 14px; --fs-lg: 16px; --fs-title: 18px; --lh-body: 1.55; --row-h: 40px; --head-h: 44px; --ctl-h: 36px; --cell-px: 12px; --pad: 16px; --gap: 10px; --gap-sm: 8px; --gap-lg: 20px; } /* ========================================================================== 호환 메모 color-mix() 는 2023년 이후 브라우저에서 동작한다(Chrome 111+, Safari 16.2+, FF 113+). IE·구형 웹뷰를 요구하는 납품 건에서는 --primary-tint 계열을 실제 색으로 미리 계산해 덮어쓰면 된다. 예) --primary-tint: #e7effd; ========================================================================== */ /* ========================================================================== 늘푸른 층 ========================================================================== */ :root{ --primary: #17604A; --primary-hover: #124D3B; --primary-active: #0E3D2F; /* 중성색 — 늘푸른 원래 팔레트(따뜻한 회녹색). 브랜드가 초록이라 중성색도 초록을 머금어야 붙는다. 표준의 차가운 slate 를 쓰지 않는 이유다. */ --bg:#F3F4F1; --surface:#FFFFFF; --surface-2:#F7F8F5; --surface-3:#E9EBE7; --border:#EDEEEA; --border-strong:#DFE1DD; --fg:#16181A; --fg-muted:#4E535A; --fg-subtle:#8A8F96; /* 도메인 의미색 — 면세/과세는 틀리면 세무 사고다. 1급 토큰으로 둔다. 밴드 배경(-band)은 흰 글자를 받으므로 항상 어둡다. */ --tax-free:#17604A; --tax-free-bg:#E9F3EF; --tax-free-bd:#BBD3C6; --tax-free-band:#17604A; --tax-due: #9A3B26; --tax-due-bg: #FBEEEA; --tax-due-bd: #E6C6BC; --tax-due-band: #9A3B26; --converted:#C2410C; --converted-bg:#FDF3EC; --converted-bd:#F0D2BC; /* 보관구분(냉장/냉동) — 면세/과세와 완전히 다른 축이다. 2026-09-08 코드리뷰: 미리보기 화면(work/shipnotice.html)이 `.tg.ex`/`.tg.tx`(면세 초록/과세 적갈)를 그대로 빌려 썼다가, 같은 색이 화면마다 다른 뜻이 되는 사고가 났다 — 더 나쁘게는 카톡으로 나가는 실제 표(app/tableimg.py CHILL/FROZEN)와도 배색이 반대였다. ⚠ **방향의 근거는 고객 캡처다** — 사양(docs/2026-08-31-신규의뢰-구현계획.md 「보낼 표의 모양」)이 원본 크기로 열어 적은 것이 `<냉장>` 파란 머리 · `<냉동>` 초록 머리다. 09-08 수정은 화면과 PNG 를 **서로** 맞추기만 하고 맞춘 방향을 원본과 대조하지 않아 두 번째로 뒤집혔다(최종 리뷰 09-08). **냉장 파랑 · 냉동 초록** 이 정본이다. ⚠ Pillow 는 CSS 변수를 못 읽어 tableimg.py 쪽은 이 값과 같은 헥스를 그대로 박아 둔다 — 여기를 바꾸면 반드시 그쪽 CHILL/FROZEN 도 같이 바꿔라(그 파일에도 이 자리를 가리키는 주석을 남겼다). `test_냉장은_파랑_냉동은_초록이고_화면과_PNG_가_같은_방향이다` 가 두 파일을 한 곳에서 대조한다. */ --chill:#1E5FA8; --chill-bg:#E9F0FA; --chill-bd:#C3D6EF; --frozen:#0F7B5A; --frozen-bg:#E7F3EE; --frozen-bd:#BFDCCE; } /* ⚠ 밀도 값을 :root 에 두면 안 된다. :root 와 [data-density="compact"] 는 특이도가 같아 파일 뒤쪽의 :root 가 이겨 버린다 — 밀도를 바꿔도 글자 크기가 안 따라오는 버그가 실제로 났다(2026-08-28). 속성이 없을 때만 걸리게 한다. default 은 지금 운영 중인 화면의 실측값이다. 고객이 승인한 치수이므로 기본값을 여기 맞춘다 — 표준 default(13px/34px)보다 여유 있다. */ :root:not([data-density]), [data-density="default"]{ --fs-xs:11.5px; --fs-sm:12.5px; --fs-body:13.5px; --fs-lg:14.5px; --fs-title:17px; --lh-body:1.5; --row-h:38px; --head-h:34px; --ctl-h:36px; --cell-px:12px; --pad:15px; --gap:10px; --gap-sm:7px; --gap-lg:16px; } /* ========================================================================== 호환 별칭 — app.css 가 쓰던 이름을 표준 토큰에 잇는다. 덕분에 템플릿과 클래스 이름을 하나도 고치지 않았다. ========================================================================== */ :root{ --surf:var(--surface); --side:var(--surface-2); --ink:var(--fg); --ink2:var(--fg-muted); --mute:var(--fg-subtle); --rule:var(--border-strong); --rule2:var(--border); --hl:var(--primary-tint); --ex:var(--tax-free); --ex-soft:var(--tax-free-bg); --tx:var(--tax-due); --tx-soft:var(--tax-due-bg); --mark:var(--converted); --mark-soft:var(--converted-bg); --warn:var(--warn-fg); --warn-soft:var(--warn-bg); --sans:var(--font-sans); }