/* ========================================================================= tokens.css — 디자인 토큰 (design-system.md §1~12 단일 진실) 변경 시 design-system.md 와 동기화한다. ★감사[i32A] 2026-08-26 var() 폴백 금지 — 본 :root 실존 토큰은 폴백 없이 사용(전 레이아웃 로드·무조건 정의라 폴백 도달 불능). 예외 4변수만 폴백 유지: 런타임 주입 --book-aspect·--lgr-head-h·--cfm-tail + 스코프(.shell__main) 정의 --main-pad·--main-pad-top(2026-10-05) ========================================================================= */ :root { /* ---------- 5.1 Navy (Primary, 로고 파생) ---------- */ --navy-900: #0F2440; --navy-800: #173155; --navy-700: #1F3F69; --navy-500: #3B6BA0; --navy-300: #9DB6D2; --navy-100: #E4ECF4; --navy-50: #F2F6FA; /* ---------- 5.2 Warm Amber (Accent — 단일) ---------- */ --accent-700: #B45309; --accent-500: #E07514; /* 차트 계열(감사 2026-07-11 — ai-system 하드코딩 hex 제거·팔레트 내) */ --chart-1: #1F3F69; /* navy-700 */ --chart-2: #E07514; /* accent-500 */ --chart-3: #4B6E9B; /* navy 라이트 파생 */ /* ★손익 분석 그래프 5계열(2026-09-17 CFO «손익 분석» — 매출·매입·프로젝트 비용·기간 비용·영업이익률): 새 hex 없이 기존 색 토큰에 이름만 준다 */ --chart-4: var(--ink-400); /* 중성 — 기간 비용 */ --chart-5: var(--ok-500); /* 이익 — 영업이익률 선·영업이익 */ --accent-100: #FEF1DC; /* 시맨틱 흰색 — primary·accent 배경 위에서의 텍스트·아이콘. #fff hardcoded 회피 (step43 토큰화) */ --white: #FFFFFF; /* Accent rgba 톤 — 박동(pulse)·후광 등 alpha 사용. rgba(224, 117, 20, x) hardcoded 회피 */ --accent-glow: rgba(224, 117, 20, 0.10); /* pulse 약 */ --accent-glow-strong: rgba(224, 117, 20, 0.35); /* pulse 강 (ripple 등 후속) */ /* ---------- 5.3 상태 색 ---------- */ --ok-700: #1F6F43; --ok-500: #2C9A5E; --ok-100: #DCF1E5; --warn-700: #8A6100; --warn-500: #C28A0E; --warn-100: #FBEFCC; --err-700: #9B2226; --err-500: #C43A3F; --err-100: #F8DDDE; --info-700: #1F4D8A; --info-500: #2D6FB8; --info-100: #DCE7F4; /* ---------- 5.4 Ink (중성) ---------- */ --ink-900: #14181F; --ink-800: #1F242D; --ink-700: #303843; /* 제목 보조·강한 레이블 — 본문에는 800 사용 */ --ink-600: #4A525E; --ink-500: #6B7480; --ink-400: #8A93A0; /* 비활성·약한 텍스트·아이콘 — 본문 적용 금지 (§10 안티 패턴) */ --ink-300: #B5BCC5; --ink-200: #DDE2E8; --ink-150: #E8ECF1; --ink-100: #F0F3F7; --ink-50: #F7F9FB; --bg: #FFFFFF; --bg-app: #F4F6F9; --hairline:#E1E5EB; /* 표 칼럼 구분선 — 가로선(--hairline)보다 한 단계 옅게. 행 구분이 우선이고 열 구분은 보조라 거의 '투명한' 정도로만 경계를 준다(주인님 2026-08-02). */ --hairline-v: var(--ink-100); /* ---------- 2. 폰트 ---------- */ --ff-body: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; --ff-mono: 'SF Mono', 'JetBrains Mono', 'Pretendard', ui-monospace, Menlo, Consolas, monospace; /* ---------- 3. 타입 스케일 (본문·헤딩 5단 + 보조 2단) ---------- */ --fs-body: 14px; /* 본문 기본 (PC) */ --fs-md: 16px; /* h4·iOS 줌 방지·모바일 본문 */ --fs-lg: 18px; /* h3·KPI value */ --fs-xl: 20px; /* h2·디테일 제목 */ --fs-2xl: 22px; /* h1 */ /* 밀집 표 전용 1단 — 대장·오더처럼 10열 이상을 한 화면에 담는 표의 본문. ★주인님 2026-08-02: 12px 는 읽기 부담, 14px 는 과하다는 판정. 임의 px 금지 규율을 지키려 스케일에 정식 편입. */ --fs-dense: 13px; /* 대장·CTP 오더·거래명세 제작 세부 등 밀집 표 본문 */ /* 보조 2단 — 메타·캡션·마이크로 라벨용 (본문에는 사용 X) */ --fs-sm: 12px; /* 메타·캡션·chip·timestamp */ --fs-xs: 11px; /* 마이크로 라벨·KPI sub·breadcrumb sep */ /* ---------- 4. 폰트 굵기 (4단) ---------- */ --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; /* ---------- 6. 간격 (6단) ---------- */ --sp-1: 4px; --sp-1-5: 6px; /* ★반 단계(주인님 결정 Z4-a 2026-08-22) — 6px 하드코딩 60곳의 정본. 4·8 사이 간격 전용 */ --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; /* 빈 상태(empty state) 큰 패딩 — staff CSS 4곳이 사용 (감사 2026-06-12: 미정의 → padding 무효화되던 결함 수정) */ /* ---------- 7. 컴포넌트 메트릭 ---------- */ --row-h: 36px; --ctl-h: 32px; --th-fs: var(--fs-sm); /* ★2026-10-05 주인님 «권고대로» — 표 머리 한 벌(발주 관리 project-matrix 기준 12px · 반굵기) — billing-table·lgr-table·project-matrix 가 이 두 이름을 쓴다 */ --th-fw: var(--fw-sb); --ctl-h-compact: 30px; /* ★2026-10-05 주인님 «연도 필터 글씨 크기 = 발주관리 기준 · 정산 관리 월·거래처 드롭다운 없음(검색으로)» — 칩 줄 높이(.matrix-filter 30) — 기간 선택칸 한 벌(components.css select.board-stats__year)의 높이 */ --header-h: 56px; --mobile-header-h: 48px; --mobile-bottom-h: 56px; /* 하단 바 + iOS 홈 인디케이터 세이프에어리어(notch 기기만 가산, 그 외 env=0px → 무회귀) */ --mobile-bottom-safe: calc(var(--mobile-bottom-h) + env(safe-area-inset-bottom, 0px)); --touch-target: 44px; /* ★통합 검색 시트 중앙 정박(주인님 2026-09-15 «하단에서 롤업 · 타이핑~선택까지 엄지권») — 키보드 높이를 알기 전(열림 ~ visualViewport resize) 입력칸 바닥 = 오버레이(100dvh − 하단 바) 높이의 이 비율. 실제 키보드 위(≈50~60%)보다 «살짝 위»여야 내려앉음만 있고 가려짐이 없다. 재검산(실기기): 포커스 뒤 r = visualViewport.height ÷ (innerHeight − --mobile-bottom-safe) → 이 값 = r − 3~5%. 소비처 = shell.css 모바일 블록 .is-focus 하나. */ --omni-dock-h: 50%; --shell-max-w: 1440px; /* 셸 전체 max — 큰 모니터에서 가운데 정렬 + 좌우 흰 여백 */ --detail-max-w: 1000px; /* 디테일 본문 max — 도서 사양·프로젝트 상세 공통 (가운데 정렬, 좌우 여백). step: 960→1000 (주인님 2026-06: 우측 프로세스 컬럼 360→400 확대분 충당, 좌측 article 폭(≈576px)은 그대로 유지) */ /* ★2026-09-30 주인님 «칸 폭 전수» — 표 칸 폭 토큰(값 하나 · 날짜·칩 칸은 화면마다 숫자를 적지 않고 이 이름을 쓴다). 근거 = 헤드리스 Chrome 실측(research_notes/…/_COLWIDTH_0930.md). date = «2026.09.05» tabular 14px: Pretendard 75.9 · SF Mono/JetBrains 82.8 · Menlo 84.3(--ff-mono 스택 최악) + 칸 여백 sp-2×2(16) = 100.3 → 104 (기존 접수일 104 실측과 같은 값). mmdd = «09.15» Menlo 14px 42.2 + 첫 칸 여백 16+8 = 66 · 정렬 머리 «발행일»+아이콘 72 가 지배 → 76. chip = 발주 관리 진행상황 칩 한 줄 최장 «배송 중 · 남은 부수» 96.2(11px·좌우 8) + 칸 여백 16 = 112.2 → 116. */ --col-date-w: 104px; --col-mmdd-w: 76px; --col-chip-w: 116px; /* ★2026-10-01 주인님 «권고사항의 경우 제안대로 수정» — 거래처 칸 토큰(발주 관리 3번 칸 · 납품 관리 목록 3번 칸 한 값). 96 은 1280 에서 «(주)챔프스터 / 디»처럼 한 글자가 다음 줄로 떨어졌다(_OFFICE_LAYOUT_AUDIT_1001 8번) → 112(도서 auto 칸에서 16). 09-30 «긴 이름 남김»을 이 승인이 고친다. */ --col-acct-w: 112px; /* ---------- 8. 라운드 (5단) ---------- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; /* ★일관성 재결정 2026-09-29 master_common#57 — 이미 쓰이던 2px·999px 에 가족 이름(값 무변 · 소비처 shell.css) */ --r-xs: 2px; --r-pill: 999px; /* ---------- 9. 그림자 (3단, restrained) ---------- */ --sh-1: 0 1px 0 rgba(15, 36, 64, .04); --sh-2: 0 1px 2px rgba(15, 36, 64, .08), 0 0 0 1px rgba(15, 36, 64, .04); --sh-3: 0 4px 16px rgba(15, 36, 64, .10); /* ★계정 간 통일 2026-09-29 G3-07 — 이름 먼저(값 불변): 창 그림자 «0 24px 64px .25» 6곳(member·statement·order-pick·rsc·계정 창 등)의 같은 값에 가족 이름 · .35 7곳(바 모달 계열)은 값이 달라 이번엔 그대로 */ --sh-4: 0 24px 64px rgba(15, 36, 64, .25); /* ★계정 간 통일 2026-09-29 G3-07 — 창 배경막: 정본 .po-receive::backdrop 값(rgba 15,36,64,.45) 그대로 이름 · 같은 값 3곳만 소비 — 다른 11가지 값을 하나로 합치는 건 값 변경이라 보류 */ --scrim: rgba(15, 36, 64, .45); /* ---------- 포커스 링 ---------- */ --focus-ring: 0 0 0 3px rgba(31, 63, 105, .25); /* ---------- 11. 브레이크포인트 (참조용 — 미디어쿼리에서 직접 px 값 사용) ---------- */ --bp-mobile-max: 767.98px; --bp-tablet-max: 1023.98px; --bp-desktop-min: 1024px; /* ★중앙 모달 통일 폭(주인님 2026-09-01 — «하드코딩 안 되게») — 2026-08-19 모달 5계열 실측 규격의 토큰화. 소비처: offcanvas--center · inv-modal · bkmodal · pmod(작업배치). 바꿀 땐 여기 한 곳. */ --modal-center-w: min(1400px, 96vw); /* ★동작 다이얼로그 폭 4종(주인님 2026-09-05 «제본 동작 다이얼로그 통일» — 6종 하드코딩 은퇴): 사유·수량 1~3필드=sm · 2열 grid=md · 책 카드+선택지=lg · 표=xl. vw 캡 94 하나. 소비처(전체 검수 2026-09-05 F23 — 주인님 결정으로 4창 토큰 배정): sm=.po-receive 기본(components.css) · lg=.po-receive[data-bnr-dlg](노선 확정)·.wkji-dlg(간단 사양, 구 760) · xl=.bsup-dlg(외주처 관리 표)·.pinv-dlg(매입 계산서, 구 860/96vw)·.voucher-dlg(전표 배분, 구 880) · 2xl=.rcv-dlg(입고, 구 960) · md=.pa-dlg(손익 분석 비용 기입 · 2026-09-17). 기제는 하나 — 변형 클래스에 var(--dlg-w-*). 속성 선택자([data-dlg-w])는 F23① 에서 은퇴. */ --dlg-w-sm: min(440px, 94vw); --dlg-w-md: min(560px, 94vw); --dlg-w-lg: min(720px, 94vw); --dlg-w-xl: min(860px, 94vw); --dlg-w-2xl: min(960px, 94vw); /* ★일관성 재결정 2026-09-29 master_common#33 — 3xl=.po-receive.sa-modal--wide(표 모달 · components.css) · 계약 안 유일한 리터럴 폭에 값 그대로 이름 부여(96vw 캡 유지) · 09-29 주인님 일관성 재결정으로 개정 — 감사 권고 ①(전면 스냅+1000·1240·320 신설) → 1곳만 */ --dlg-w-3xl: min(1180px, 96vw); /* ★z-index 스케일(주인님 결정 2026-09-05 전체 검수 F38 — «결정 후 tokens --z-* 신설»): 실측 관례값(33곳)을 층으로 명명. 신규 코드는 토큰을 쓴다 · 기존 리터럴은 같은 층 값이라 그대로 두어도 어긋나지 않음(치환은 화면 단위 별건). 규약 정본 = docs/contracts/conventions.md «z-index 스케일». */ --z-raised: 5; /* 콘텐츠 안 sticky 바(빵조각·검색 툴바)·hover 승격 */ --z-sticky-head: 30; /* 표 thead sticky · 인라인 드롭다운(po-proj-drop) */ --z-sticky-bar: 40; /* 본문 상단 sticky 툴바·필터 바(ctpq-toolbar·ledger-topbar·모바일 하단 바) */ --z-modal: 50; /* dialog 계열(pmod·inv-modal·files-dialog) — ::backdrop 포함 */ --z-drawer: 60; /* 드로어·토스트(pt-flash)·채팅 팝오버 */ --z-panel: 70; /* 알림 패널 백드롭 70 · 패널 71 */ --z-overlay: 200; /* 전역 오버레이 — offcanvas·omnisearch(백드롭 199) */ --z-top: 210; /* 달력 daypop 등 오버레이 위 팝오버 */ /* ★계정 간 통일 2026-09-29 G4-04 — 독립 인쇄 명세서(ctp-print.php·office/print.php) 색: 16진 직접값에 이름 먼저(값 불변 · 인쇄물 색 그대로). 소비처는 두 standalone 문서의