/* ══════════════════════════════════════════════════════════════════
신광에스앤피 G2L 대시보드 — 실제 값 SSOT
기준 화면: 환경 champion-final-v6 + 고객사 customers-grid-refined.
원칙·조립 규칙은 docs/rules/DESIGN.md와 docs/rules/UI-KIT.md를 따른다.
새 화면은 이 파일을 link하고 공개 토큰·공용 클래스를 재정의하지 않는다.
══════════════════════════════════════════════════════════════════ */
:root{
/* 브랜드 색 (환경 실측 기준) */
/* ⚠ --teal6 은 **채움(면) 전용**이다. 텍스트 색으로 쓰지 마라 — 흰 배경 4.14 · teal 면 3.68 로
어느 배경에서도 4.5 를 못 넘긴다(2026-08-07 실측). teal 글자는 --teal-ink(흰 6.22 · teal 면 5.52).
아이콘 등 비텍스트(3:1)에는 써도 된다. `background:var(--teal6)` 15곳은 정상 용법이다. */
--teal:#12A594; --teal6:#0E8C7E; --teal05:#E4F5F2;
--ink:#1C2430; /* 환경 기준. 고객사 gray-900(#111827)과 사실상 동일. 순수 #000 절대 금지 */
--line:#C7D2D0; --head:#F4F7F6; --muted:#8b9793;
/* 텍스트 회색 스케일 (환경 마스터 실측 기준 · 페이지 하드코딩 금지) */
--ink-soft:#54606B; /* 6.0:1 읽는 보조·라벨·부서·부값 (환경 --ink-soft) */
/* --ink-head 신설 2026-08-07 (대표 승인) — 표 헤더 글자. --ink 와 --ink-soft 사이의 **빠진 단계**였다.
--head(#F4F7F6) 위 대비: --ink 14.49 · **--ink-head 9.50** · --ink-soft 5.97 · --muted 2.80.
본문만큼 진하면 헤더가 데이터를 이기고, --ink-soft 까지 내리면 헤더가 값처럼 물러난다.
실측 32곳에서 하드코딩으로 쓰이고 있었다 — g2l 12 · React 3 · 시안 17.
셀렉터가 .gtbl thead th · .id-h · .mgr-h 로 **표 헤더 잉크라는 하나의 역할**에 일관돼 있어
흩어진 우연이 아니다(DESIGN §10-2 "반복적으로 사용할 가치").
⚠ 짝이 되는 값 (§10-7 — 색만 정하고 나머지를 안 정하면 또 갈린다):
굵기 = --fw-th(600) · 행간 = 1.2 · 크기 = --fs-th-id / --fs-th-data / --fs-th-cat / --fs-th-sub
헤더 면 = --head. 이 조합 밖에서 --ink-head 를 쓰지 마라. */
--ink-head:#37424e;
--faint:#AEB8B4; /* ~2:1 빈칸 노이즈 전용(의도적 흐림, 밀집셀 빈칸) */
--teal-ink:#0c6d61; /* 진한 teal 잉크. 텍스트용 + teal 채움 위 흰글씨. 환경·파이프라인 정본값으로 통일(2026-07-20, 구 #0C7368 폐기) */
/* 상태 색 (미착수 / 진행중 / 완료) */
--todo:#94a3a0; --prog:#BA7517; --prog05:#FBF0DA; --done:#639922; --done05:#EAF4E1;
/* ── 표(그리드) 공통 — 환경 champion-final-v6 · pipe-siman.css 실측값 승격 (2026-07-20) ──
여기 없어서 자료실이 hover를 #F5FAF8·#EAF6F3·#F1F7F5로 각자 지어냈다(대표 "결이 다르다").
새 표 화면은 아래 var()만 쓸 것. 하드코딩하면 또 갈라진다. */
--bg:#EDF1F0; /* 앱 바깥 배경 */
--panel:#fff; /* 표·패널 표면 */
--hl:#E4E7EC; /* ★ 행 hover = 채도 0 쿨 뉴트럴. 선택(teal)과 색상축 분리 — 초록끼 금지(겹쳐 보임의 원인이 hue) */
--sel-bg:#CFEDE5; /* 행 선택 배경 (좌 5px --teal-ink 앵커바 + 상하 2px --teal 프레임과 함께) */
--zebra:#F0F4F2; /* 짝수행 줄무늬. 홀수(첫 행)는 흰색 — 회색 헤더와 구분 */
--dot:#DCE1DE; /* 빈칸 표시용 옅은 점(4px). 방치된 "—" 대신 */
--line-soft:#DDE4E2; /* 행 하단 구분선 1px. 2px 금지(시각 소음) */
--line-cat:#BCC9C6; /* 카테고리(그룹) 경계선 */
--teal-line:#9EDED3; /* teal 계열 테두리 */
--teal-sel-line:#5FB9AC; /* 선택 행 내부 세로 셀선(정본 파이프라인 값) — 선택 시 세로선 teal화. 규칙 UI-KIT.md §2 SelectionRow */
--teal-bg:var(--teal05); /* 공개 별칭. 중복 literal 제거; 신규 화면은 --teal-bg 권장 */
/* ── 표 고정 좌열 폭 (SSOT) ── 순번(ID) 열 폭. 이 한 값이 5개 파이프라인의 순번 열 폭 +
바로 옆 고정열(c-name) sticky left offset을 동시에 정한다. 파일에 width 하드코딩 금지.
⚠️ 시안들은 표 전체폭을 JS로 숫자합산한다 → 이 값을 바꾸면 각 파일 tw/ID_W 숫자 베이스
(주석 `= --col-no-w`로 표시된 곳)도 같이 맞출 것.
⚠️ 순번=`yy-mm-nn`(예 25-12-62) 8자라 54px는 잘림 — 68px 필수(규칙 g2l-pipeline #1). 구 54/56/68 → 68 통일(2026-07-23). */
--col-no-w:68px;
/* 담당 · 관할 열 폭 — 환경·안전·지원금 **세 화면 한 값**(대표 답 2026-08-18 「추천대로」 · 2026-08-19).
⚠️ 214 는 취향이 아니라 실측이다: 담당 칸에서 제일 긴 한 줄은 **휴대폰 + 사무실 두 번호**이고
`010-9053-3601` 88.9 × 2 + 번호 사이 여백 `--s-3` 12 + 칸 안쪽 여백 24 = **213.8**.
(글자 실측 2026-08-19 · `--fs-say` 12.5/600 Noto Sans KR · 문자열 출처 =
`docs/contracts/12-COLUMN-MAP-safety.md` U/V · `-environment.md` tel · `-subsidy.md` H/AA)
⚠️ 갈려 있던 옛 값: 환경 175(두 번호가 줄바꿈됐다) · 안전 214 · 지원금 330.
330 의 옛 근거는 *"기관 · 담당자 · 전화를 한 줄에"* 였는데 그 짜임이 세 줄로 바뀌며 사라졌다. */
--col-mgr-w:214px;
/* 상태 3색 세트 (bg / line / ink) — 칩·셀 배경에. 정본과 1:1 */
--done-bg:var(--done05); --done-line:#cfe3b4; --done-ink:#3B6D11;
--now-bg:#FBEFCF; --now-line:#e6c366; --now-ink:#8a5209;
--todo-bg:#F7F8F7; --todo-line:#D6DCD9; --todo-dot:#B7BFBC;
/* --na-ink 는 2026-08-07 에 #6f6e68 → #6d6c66 으로 명도만 2% 내렸다.
이유: --na-bg(#F1EFE8) 위에서 대비 4.45 로 기준 4.5 에 0.05 모자랐고, 그 조합이 실측 285곳이었다.
0.05 때문에 285건을 남기는 건 실익이 없다. 색상·채도는 그대로다(R-G=1 · G-B=6 비율 유지) —
RGB 3스텝이라 눈으로는 구분되지 않고 크기·굵기는 건드리지 않았다(대표가 확정한 밸런스 불변).
값을 더 내리지 않은 이유: -1%(#6e6d67)는 4.51 로 여유가 0.01뿐이라 반올림에 깨지고,
-3% 이상은 더 바꾸면서 얻는 것이 없다. 실측 = docs/build/28-R3-DECISIONS.md */
--na-bg:#F1EFE8; --na-line:#E1DFD7; --na-ink:#6d6c66; /* 비대상·안함 = 회색(초록 금지) */
--info-bg:#EEF3F1; --info-line:#D3DEDA; --info-ink:#5b6b66;
--plan-bg:#EDF1F6; --plan-line:#CFD9E6; --plan-ink:#4d5d75;
--amt-bg:#F3F1E9; --amt-line:#E0DBCB; --amt-ink:#6a5b3a;
--warn-bg:#F7ECE7; --warn-line:#E4CFC6; --warn-ink:#8a5a49;
--meta-bg:#F0F2F1; --meta-line:#D9DFDD; --meta-ink:#5b656a;
/* ── 담당자 메모 (앰버 박스) — 2026-07-20 대표 확정 ──
⚠️ 환경 화면엔 메모가 2종이다. 헷갈리지 말 것:
① 담당자 메모 `.mgr-memo`(담당·관할 열) = 앰버 박스 + 테두리 ← 이 토큰이 그것
② 그리드 메모 `.memo-td`/`.mtext`(단계 열) = 크림 배경 + 좌측 teal 바 ← 별개, 환경 전용
①의 색·배경·테두리는 환경 .mgr-memo와 안전 .ag-memo가 이미 동일했고,
차이는 크기·굵기뿐이었다: 환경 11px/400 vs 안전 11.5px/600.
→ **안전 기준(11.5px/600) 채택**. 근거: 대표 "안전이 더 짙고 굵어 잘 보인다" +
규칙 "일반 UI 텍스트 11.5px 미만 금지"(환경의 11px은 이 규칙에 미달).
쓰는 법: background --memo-bg · color --memo-ink · border 1px --memo-line · 11.5px/600. */
--memo-bg:#FBF6E9; --memo-ink:#7a4a08; --memo-line:#E7D6A0;
/* 폰트 스케일 = 고객사현황(가독성 마스터). 이 값이 유일 기준. px 하드코딩 대신 이 변수 사용.
★ 대표는 작은 글씨를 싫어함 · 시인성 최우선. 일반 화면 UI 텍스트 11.5px 미만 금지.
**단 대표가 확정한 화면의 기존 크기는 예외이며 `scripts/typo-freeze-check.mjs` 의
FROZEN 목록에 파일:줄 단위로 고정돼 있다. 이 목록은 늘지 않는다 — 추가는 대표 판정 사항이다.**
(대표 원문에 하한과 예외가 한 문장 안에 있었다: "11.5가 하한이지만, 각 페이지별로 이미
완성한 상태야. 컨펌했고. … 안전, 공사, iot 등은 거기에선 그게 밸런스가 맞아."
L80 은 앞 절반만 옮겨 적어서 충돌했다. 뒤 절반을 마저 적은 것이다. 판정 = docs/build/33)
값·본문은 13px 이상. 아주 밀집한 매트릭스(환경 셀 스텝퍼)만 예외로 더 작게 허용.
⚠ 예외 하나 더: 줄이 여럿인 목록의 **읽는 글**은 --fs-say(12.5)다. 아래 그 토큰 주석과
"정갈한 밸런스" 블록을 읽어라. 13 으로 올리면 목록이 커 보인다(대표 확인 2026-08-06). */
--fs-h1:16px; /* 페이지 제목 = 최소 웨이파인딩("이 페이지에 있다"). 전 페이지 16px + 필터/툴바와 같은 줄 인라인(대표 2026-07-19 확정). 데이터가 주인공이지 제목이 아님 — 크게 만들지 말 것 */
--fs-name:15px; /* 핵심 엔티티명(업체·사업장·지자체) — 또렷하되 컴팩트. 16px는 답답하고 태그와 붙어보임(대표 2026-07-22). [[ui-prefers-compact]] */
--fs-mgr:14px; /* 담당자·기관명 */
--fs-val:13.5px; /* 값·주소·연락처 */
/* 열헤더 타이포 (SSOT) — 회색 배경으로 이미 구분되므로 굵을 필요 없음. 값이 700인데 헤더까지 700이면 굵은글씨 남발(대표 2026-07-22). [[ui-prefers-compact]] */
--fw-th:600; /* 열헤더 굵기 = 600(가볍게). 페이지마다 하드코딩 말고 이 토큰 쓸 것 */
--fs-th-data:11.5px;/* 데이터열 헤더 폰트(공정명·공사 항목 등 긴 라벨) */
--fs-th-sub:11.5px; /* 2단 헤더 두번째 줄(단계 라벨: 제출일자·접수방법 등). 10.5는 시인성 나빠 반려(대표 2026-07-22) → 11.5 유지. 위계는 크기 아닌 굵기(아래)+색으로. */
--fw-th-sub:500; /* 단계 라벨 굵기 = 500(데이터헤더 600보다 가볍게). 부속 라벨이라 앞에 안 나서게 = 답답함 완화 */
--fs-th-cat:12.5px; /* 카테고리(그룹) 헤더: 대기·현장조사·서류심사 등. 데이터열(11.5)보다 한 단계 위 */
--fs-th-id:13px; /* 식별·담당 헤더: 순번·업체명·담당·관할. 헤더 중 가장 큼(주 스캔 기준열) */
/* 굵기 위계 (SSOT) — 업체명 700 > 헤더 600 > 내용 500. 600은 너무 굵고, 400은 11px에서 얇아 죽음(대표 2026-07-22) */
--fw-content:500; /* 셀 내용값(공정명·시설·방지시설 리스트 등). 업체명(700)과 위계 두되 또렷하게 */
--fs-body:13px; /* 본문 */
--fs-say:12.5px; /* 사람이 남긴 글 — 신고 내용·점검 소견·조치 결과 (대표 승인 2026-08-06).
13(본문)은 목록에서 줄이 여럿일 때 커 보이고, 12(라벨)는 "진짜 개짝아" 로
반려됐다. 그 사이 자리가 비어 있어서 새로 만들었다.
⚠ 라벨이 아니라 **읽는 글**에만 쓴다. 라벨은 --fs-label 그대로.
예외 하나: 그 글을 감싸는 **카드 머리**(.fx-day__h · .fx-case__n)도 이 값을 쓴다.
일부러 본문에 묶어 둔 것이다 — 본문이 움직이면 머리도 같이 움직여야
카드가 계속 정돈돼 보인다. 머리는 굵기 700 + 색면으로 갈린다. */
--fs-label:12px; /* 라벨·2차 텍스트 */
--fs-chip:11.5px; /* 칩·뱃지 (이보다 작게 금지) */
/* 히어로 숫자 (대표 승인 2026-07-29) — 카드가 답해야 할 질문의 '답' 딱 하나에만.
예: 정기점검 카드의 다음 점검일. 밀집 그리드용 --fs-* 에 이 자리가 없어서
그동안 문서용 --type-h1 을 빌려 쓰고 있었다(스케일 위반처럼 보이던 원인).
⚠ 카드당 1개. 두 개 이상 쓰면 둘 다 안 읽힌다 [[compact-not-cramped]] */
--fs-hero:24px;
/* ══ 🚫 동결 크기 — 새 화면에서 쓰지 마라 (D2 판정 2026-08-07 · docs/build/33) ══════
이름이 경고다. `--fs-under-min-*` 은 **11.5px 하한을 못 넘는 값**이라는 뜻이고,
`--fs-legacy-*` 은 **대응 토큰이 없어 남은 값**이라는 뜻이다. 둘 다 새로 쓰면 안 된다.
이 토큰이 있는 이유는 "이 크기를 권한다"가 아니라 정반대다 —
대표가 이미 컨펌한 화면의 크기를 **못 바꾸면서** 리터럴도 못 남기게 하려는 것이다.
🔴 목록 밖 파일이 이 토큰을 참조하면 `scripts/typo-freeze-check.mjs` 가 실패한다.
목록에 줄을 더하는 것은 팀장 권한이 아니라 **대표 판정 사항**이다. */
--fs-under-min-11:11px; /* .seg small · pipe .fnew/.fns/.ftag/.plab */
--fs-under-min-10-5:10.5px; /* pipe .fsk · .ag-tel .tlab */
--fs-under-min-9-5:9.5px; /* pipe .agtag · .mvline */
--fs-legacy-14-5:14.5px; /* pipe .ty b — 하한은 넘지만 대응 토큰이 없는 값 */
/* ══ 🔴 정갈한 밸런스 — 대표 확정 2026-08-06 (전 화면 공통) ════════════════
대표 원문: "이제 정갈해진 것 같아. 난 이런 걸 좋아해. 이 밸런스, 이 정갈한 느낌."
⚠ **같은 카드를 복사하라는 뜻이 아니다.** 구성·짜임은 화면마다 달라도 된다.
지켜야 하는 건 아래 네 줄뿐이다. 한 카드·한 목록·한 표 안에서 센다.
1) 크기는 **둘**이다 — 읽는 글 --fs-say(12.5) · 메타/칩 --fs-chip(11.5).
머리(제목·날짜·이름)도 **읽는 글과 같은 크기**를 쓴다. 머리라고 키우지 마라.
2) 크게 쓰는 것은 **훑는 표적 하나**뿐 — 그 화면에서 눈이 제일 먼저 닿아야 할 것.
--fs-val(13.5) + --fw-extrabold. 둘 이상 키우면 둘 다 안 읽힌다.
3) 위계는 크기가 아니라 **굵기(--fw-bold) + 색면(--head 또는 상태색) + 아래 hairline
(--row-line-w)** 으로 만든다. 크기로 만들려 할수록 지저분해진다.
4) 줄과 줄 사이는 **경계**다 — 선·박스·면 중 하나. 여백만 두면 반려다(DESIGN-TRAPS B12).
왜 이 값들인가(실측): 13.5(날짜) / 13(사건) / 12.5(본문) / 11.5(메타) 로 네 단계를
2px 안에 넣었더니 "단계로는 안 읽히고 들쭉날쭉하게만 보인다" 는 판정을 받았다.
둘로 줄이자 그 자리에서 통과했다. 0.5px 단계는 눈에 안 보이면서 밸런스만 깬다.
실물 = 시설·장비 우측 패널의 **점검 이력 · 고장·장애 신고**.
짜임(계층·경계·숫자 열·버튼 규격) 정본 = docs/rules/DESIGN.md §4-A. */
/* UI-KIT 값 SSOT — 기존 런타임 토큰은 위에서 불변, 아래는 문서 이관용 공개값 */
--c-teal:var(--teal); --c-teal-600:var(--teal6); --c-teal-050:var(--teal05);
--c-petrol:#0C4A46; --c-ink:var(--ink); --c-paper:#FFFFFF;
--c-paper-2:#F4F7F6; --c-paper-3:#EAF0EE;
--c-grey-50:#F7FAF9; --c-grey-100:#EFF3F2; --c-grey-200:#E1E8E7;
--c-grey-300:#C9D4D2; --c-grey-400:#A6B4B2; --c-grey-500:#7C8C8A;
--c-grey-600:#5A6A68; --c-grey-700:#3A4A48; --c-grey-800:#1E2E2C; --c-grey-900:#0F1F1D;
--c-normal:#1F9D6B; --c-warning:#E5A400; --c-critical:#E5484D; --c-info:#0C6E66;
--c-critical-ink:#CB1D22; /* 교체 대장 쓴 개수 전용. --c-critical 같은 hue · 대비 흰 5.62 · --zebra 5.06 · --hl 4.53 (DECISIONS [소모품] 2026-09-17 밤) */
--legacy-warning-text:#946A00; --ink-open-alt:#06231F; --contrast-primary-approved:3.07;
--on-color:#FFFFFF;
--font-sans:'Noto Sans KR',system-ui,'Malgun Gothic',sans-serif;
--font-mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
--type-display:32px/1.2 var(--font-sans); --type-h1:24px/1.3 var(--font-sans);
--type-h2:20px/1.35 var(--font-sans); --type-h3:17px/1.4 var(--font-sans);
--type-body-lg:16px/1.5 var(--font-sans); --type-body-common:15px/1.5 var(--font-sans);
--type-caption:13px/1.4 var(--font-sans); --type-micro:12px/1.3 var(--font-sans);
--mobile-title-min:17px; --mobile-title-max:20px; --mobile-copy-min:16px;
--mobile-copy-leading:1.55; --mobile-meta-min:14px; --mobile-meta-max:15px;
--mobile-easy-copy-min:18px; --mobile-easy-label-min:16px; --mobile-easy-leading:1.6;
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
--s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --content-inset:18px;
--r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:20px; --r-pill:9999px;
/* 창 뒤를 덮는 어둠. 새로 고른 색이 아니라 이 제품이 이미 쓰는 어둠(6,35,31)이다 —
모바일 바텀시트 덮개가 rgba(6,35,31,.4) 이고 아래 그림자 셋도 같은 계열이다.
그전에는 대시보드 모달 덮개에 색이 없어서(투명) 창이 모달이 아니라 그냥 뜬 카드로 보였다
(대표 지적 2026-08-25 "가운데로 하되, 배경은 어둡게 … 그림자 효과를 제대로"). */
--scrim:rgba(6,35,31,.4);
--e1:0 1px 2px rgba(6,35,31,.06); --e2:0 4px 12px rgba(6,35,31,.08);
--e3:0 12px 32px rgba(6,35,31,.12);
--tap:48px; --tap-primary:56px; --tap-easy:64px;
/* 버튼 기하 — 정본은 시설장비관리(`facility-siman.css:54-60` 의 `.btn`).
대표 확정 2026-08-05: "버튼 디자인은 시설장비관리 페이지 버튼들과 색상 크기 디자인 동일하게".
⚠ `--tap`(48px)은 **모바일 탭 타깃용**이다. 대시보드 버튼 높이로 쓰지 마라 — 그 때문에
제품 버튼이 시설보다 15px 높아 화면을 오갈 때 이질감이 났다(2026-08-05 실측).
🔴 2026-08-07 승격: 이 8줄이 `apps/dashboard/src/styles/brand.css` 에만 있어서
시안 버튼(radius `--r-md` 10px)과 React 버튼(radius 7px)이 갈렸다(실측).
**두 파일은 같아야 한다** — 한쪽만 고치지 마라. */
--btn-pad-y:8px; --btn-pad-x:13px; --btn-radius:9px; --btn-gap:6px; --btn-icon-fs:11px;
--btn-sm-pad-y:5px; --btn-sm-pad-x:9px; --btn-sm-radius:7px;
--field-h:48px; --field-easy-h:56px; --focus-ring:2px; --focus-offset:2px;
--card-pad:16px; --card-pad-wide:20px; --choice-gap-min:8px; --confirm-gap-min:12px;
--selection-anchor-w:5px; --selection-frame-w:2px; --selection-cell-line-w:1px;
--selection-separator-w:2px; --row-line-w:1px; --group-line-w:2px;
--table-row-h:48px; --table-row-compact-h:40px; --table-head-h:40px;
--table-empty-h:240px; --table-skeleton-rows:5;
--toast-dashboard-w:360px; --toast-mobile-gutter:36px;
--tooltip-max-w:240px; --badge-h:20px; --badge-min-w:20px; --badge-dot:8px;
--pagination-control:32px; --page-size:50; --page-more-size:20;
--motion-press:100ms; --motion-state:150ms; --motion-enter:200ms;
--motion-exit:150ms; --motion-skeleton:1200ms;
--viewport-mobile-min:360px; --viewport-mobile-base:390px; --viewport-mobile-max:430px;
--viewport-tablet-min:431px; --viewport-dashboard-min:1280px; --viewport-wide-min:1600px;
--content-mobile-max:480px; --content-dashboard-max:1280px; --content-table-wide-max:1440px; --content-table-xwide-max:2048px;
/* 화면 틀 여백 — 셸 안 화면의 루트가 쓰는 좌·우·위·아래 안여백. 한 곳에서 정한다.
위 14 는 대표가 유일하게 말한 세로값이다(2026-08-20: *"고객사 현황 타이틀 위치를 업무
타이틀과 동일하게 맞춰야지 이질감없이 보이도록."*) — 그때 맞춘 기준이 업무 5화면의 14 다.
18·20 은 대표 확정이 아니라 실측 승계였다. 좌우 24 는 13화면이 이미 쓰던 값이고
제목 시작 x 264 게이트가 그 값이다. 아래 16 은 업무 5화면·시설의 현행이다. */
--page-inset-top:calc(var(--s-4) - var(--focus-ring)); --page-inset-x:var(--s-6); --page-inset-bottom:var(--s-4);
--print-margin:15mm; --print-title:16pt; --print-section:12pt; --print-body:10pt;
--print-table:9pt; --print-caption:8pt;
--customer-anchor-bg:#F4F7F6; --customer-freeze-line:#C9D4D2;
--customer-memo-bg:#F7F0D2; --customer-band-a:#EDF2F1; --customer-band-b:#E3EAE8;
--customer-band-line:#9FB2AF; --customer-band-cell-line:#B4C2C0;
/* 고객사 화면은 legacy Tailwind blue/violet 을 teal 로 remap한 확정 화면이다.
아래 역할 토큰은 그 화면의 computed color를 그대로 보존한다. 표준 Tailwind blue 금지. */
--customer-page-bg:#F3F4F6; --customer-accent-ink:#0C7368;
--customer-control-line:#D1D5DB; --customer-grid-line:#E5E7EB;
--customer-faint-ink:#9CA3AF; --customer-muted-ink:#6B7280;
--customer-soft-ink:#4B5563; --customer-mid-ink:#374151; --customer-deep-ink:#1F2937;
--customer-focus-bg:#C2EBE4; --customer-focus-line:#6FCDBE; --customer-hover-line:#3DB6A3;
--customer-empty-note-bg:#F8FAF9; --customer-memo-line:#DBC066;
--customer-memo-ink:#4A3A08; --customer-memo-icon:#A98C2E;
--customer-search-w:288px;
/* 검색칸 **안쪽 input** 실폭 — 바깥 상자(--customer-search-w 288)는 이미 12화면이 같았는데
안쪽이 180 / 186 / 239 / 240 / 241 다섯 종류로 갈려 있었다(실측 2026-08-18 sweep).
180 = 표 5형제 정본(`pipe-siman.css` `.fsearch input`)에 리터럴로 박혀 있던 값을 토큰으로 올린 것.
🔴 2026-08-21 · 180 → 216. **180 이 안내 글자를 못 담아 두 화면에서 잘리고 있었다.**
실측(1600 · placeholder 실제 글자폭 + 좌우 여백): IOT 210.6(잘림 30.6) · 시설장비 200 ·
안전 177.8 · 지원금 165.9 · 지원금서류 159.5 · 고객사 158.3 · 공사 152.7 · 환경 140.8 ·
내 업무 120.5 · 직원 86. **최댓값 210.6 + 여유 5.4 = 216.**
바깥 상자는 288 그대로라 자리가 남는다(216 + 아이콘·간격 < 288).
⚠ 워커 E1 이 시설에서만 `width:auto;flex:1` 로 우회했다가 폭이 243 이 되어
`control-uniformity-sweep` 가 붉어졌다(적대적 리뷰 R1-2 가 잡았다). 그 우회는 걷었다 —
**한 화면만 고치면 그 화면이 갈린다.** 값은 여기 한 곳이다. */
--page-search-input-w:216px;
--audit-detail-min-w:240px;
--customer-col-no-w:88px; --customer-col-name-w:400px; --customer-col-region-w:90px;
--customer-col-registration-w:260px; --customer-col-work-w:92px;
/* 고객사 표는 셸 폭에 맞춘다(대표 2026-08-19 「좌우 스크롤이 필요가 없는 상태인데 항상 핏하게」).
예전엔 표 폭이 1660px 고정이라 1920 창에서도 셸 1615 대비 45px 이 넘쳐 늘 가로 스크롤바가 있었다.
`DESIGN.md` 하드룰 4 대로 **남는 폭은 담을 것이 늘어나는 열에만** 준다 — 여기서는 연락처(담당자·이메일이
여러 줄)와 등록정보 둘이다. 순번·업체명·지역·업무 5칸은 px 고정으로 남긴다:
· 업체명 400 = 메모 상자 폭. 줄이면 메모가 더 접힌다(대표 2026-08-06 「메모 너비를 왜 줄여놨냐」)
· 업무 92 = D-day 두 줄 상자의 잘림 수가 이 폭에 묶여 있다(`docs/pages/customers/LOG.md` R4)
· 🔴 왼쪽 셋이 px 고정이어야 **왼쪽 고정(sticky left)** 의 위치 계산이 맞는다. 업체명을 유동으로
바꿨더니 지역·연락처가 서로 겹쳐 보였다(실측 2026-08-19). 셸이 floor 보다 좁을 때만 쓰는 장치다.
🔴 share 는 **반드시 퍼센트**다. `calc((100% - …) * .58)` 은 `table-layout:fixed` 의 `` 에서
조용히 무시된다(실측: 무시하면 남는 폭을 반씩 나눈다). 퍼센트는 비율대로 나눠 갖는다.
하한은 표의 `min-width`(= floor 1556)가 지킨다 — `` 의 min-width 는 안 걸린다(실측).
⚠ 이 블록으로 오면서 `--customer-table-min-w`(1660) 와 `--customer-col-contact-w`(360) 는
쓰는 곳이 0 이 되어 지웠다(적대적 리뷰 R1 REMOVE-CANDIDATE · 전 저장소 grep 확인). */
--customer-col-fixed-w:calc(var(--customer-col-no-w) + var(--customer-col-name-w) + var(--customer-col-region-w) + (var(--customer-col-work-w) * 5));
--customer-col-contact-share:58.06%; --customer-col-registration-share:41.94%;
/* 🔴 하한은 **두 열을 합친 값 하나**로 둔다. 예전엔 열마다 min 토큰을 뒀는데 `` 에는
min-width 가 안 걸려서 이름만 하한이고 실제로는 안 지켜졌다 — floor 에서 연락처가 선언한
300 이 아니라 **296.08** 이었다(적대적 리뷰 R1 실측). 지금은 share 로 역산한다:
518 × 58.06% = 300.7(연락처) · 518 × 41.94% = 217.2(등록정보). 둘 다 의도한 하한 위다. */
--customer-col-flex-min-w:518px;
--customer-table-floor-w:calc(var(--customer-col-fixed-w) + var(--customer-col-flex-min-w));
--customer-reg-label-w:44px; --customer-primary-industry-w:106px; --customer-industry-divider-h:14px;
--customer-control-radius:8px; --customer-table-radius:12px;
--customer-leading-snug:1.375; --customer-head-tracking:.025em;
--customer-table-shadow:0 1px 2px rgba(0,0,0,.05);
--customer-name-size:16px; --customer-region-size:15px;
--env-group-billing:#FBFAFD; --env-group-after:#F8FCF9;
--env-head-size:12px; --env-value-min:12.5px; --env-value-max:13px;
--editor-copy-size:14px; --editor-subtitle-size:18px; --editor-title-size:26px;
--editor-leading-tight:1.35; --editor-leading-normal:1.6; --editor-leading-wide:1.9;
--sync-timeout:90s; --toast-short:3000ms; --toast-warning:4000ms; --tooltip-delay:300ms;
--badge-overlap:-4px; --logo-min-size:24px; --customer-design-width:1920px;
--customer-design-diagonal:27in; --editor-font-step:1px; --pdf-rotate-step:90deg;
--editor-margin-guide:25mm;
/* 목록형 표 (내 업무·직원 관리) — 대표가 실제 화면 보고 확정한 42/34px.
--table-row-h(48)/--table-row-compact-h(40) 어느 쪽도 아니라 별도 토큰이 필요했다. */
--table-row-list-h:42px;
--table-head-list-h:34px;
--chip-h:22px; /* 칩 높이 SSOT. 한 행에서 칩마다 높이가 갈리는 것을 막는다 */
--control-h:34px; /* select·검색·버튼 공통 높이 */
--r-control:9px; /* 컨트롤 radius. --r-sm(6)과 --r-md(10) 사이의 사실상 표준 */
/* 상세 드로어(내 업무·직원 관리)의 공통 폭. 직원 관리가 쓰던 520px 을 역할 토큰으로 올렸다.
시설 상시 우패널은 성격이 달라 이 토큰을 쓰지 않는다. */
--drawer-detail-w:520px;
/* 서랍이 오른쪽 끝에 붙는 상한 (대표 확정 2026-09-16). 이 폭까지는 화면 끝에 붙이고,
그보다 넓은 슈퍼와이드에서만 서랍 오른끝을 이 자리에 세워 더 멀어지지 않게 한다.
대표 원문: *"27인치 32인치는 그렇게 큰게 아니야. 근데 슈퍼와이드에서는 너무 우측으로 가면 안되겠지."*
2560 = 27인치 QHD·32인치 4K 의 CSS 폭 상한. 그 아래는 전부 끝에 붙는다. */
--drawer-dock-max:2560px;
/* React 제품 셸(apps/dashboard) 좌측 네비 — customers-grid-refined 셸의 실측값을 토큰으로 올렸다.
값이 여기 있어야 시안과 React 가 같은 수를 본다. */
--shell-sidebar-w:240px;
--shell-sidebar-bg:#0A2925;
--shell-page-ink:#111827;
--shell-nav-ink:#9FB2AF;
--shell-nav-gap:10px;
--shell-nav-block-pad:9px;
--shell-nav-font-size:13.5px;
--shell-line-height:1.5;
--shell-nav-label-size:10px;
--shell-meta-size:11px;
--shell-logo-size:32px;
--shell-avatar-size:36px;
--shell-avatar-font-size:16px;
--shell-logo-radius:8px;
}
/* base — 폰트 패밀리·글씨색 한 곳에서. 입력요소가 브라우저 기본 #000 되는 것 방지 */
body{font-family:'Noto Sans KR',system-ui,'Malgun Gothic',sans-serif;color:var(--ink)}
input,select,textarea{color:var(--ink);font-family:inherit}
/* ── 줄엔터 (대표 1순위 기준 2026-07-30) ─────────────────────
"애매하게 줄엔터를 하면 안되고, 말이 딱딱 끊어져야해 그 줄에서."
한국어는 브라우저가 CJK 로 취급해 word-break 기본값이 **음절 사이 어디서든** 줄을 넘긴다.
글을 잘 써도 렌더에서 말이 뭉개진다 — "막대 밖에 두어 잘리" / "지 않습니다."
문구를 고쳐서는 안 고쳐진다. CSS 문제다.
⚠ 두 속성이 한 쌍이다. keep-all 만 넣으면 긴 낱말 하나가 칸을 넘는다.
word-break 는 상속되므로 body 로 충분하지만 overflow-wrap 은 상속되지 않아 * 가 필요하다.
검사: quality-probe linebreak (게이트 G13) — 어절 쪼개짐 0 이어야 한다. */
body{word-break:keep-all}
*{overflow-wrap:break-word}
/* ── select 셀렉트 규칙 (대표 강한 선호) ──
native 드롭다운 화살표를 최우측 끝에 두지 않는다. 화살표 제거 후
커스텀 셰브론을 오른쪽 11px '안쪽'에 배치(고객사 .esel 패턴 이식). */
select{
-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b9793' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 11px center !important;
padding-right:30px !important;
}
/* G2L custom dropdown — 닫힌 field뿐 아니라 열린 menu 상태까지 포함하는 공용 부품. */
.ui-select{position:relative;min-width:0}
.ui-select__trigger{display:flex;width:100%;height:var(--field-h);align-items:center;justify-content:flex-start;gap:var(--s-2);padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--ink);font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);text-align:left;cursor:pointer;transition:border-color var(--motion-state) ease-out,background var(--motion-state) ease-out,transform var(--motion-press) ease-out}
.ui-select__trigger:hover{background:var(--head)}
.ui-select__trigger:active{transform:scale(.97)}
.ui-select__trigger:focus-visible{outline:var(--focus-ring) solid var(--teal);outline-offset:var(--focus-offset)}
.ui-select__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select__chevron{flex:none;color:var(--ink-soft);font-size:var(--fs-chip);transition:transform var(--motion-state) ease-out}
.ui-select.is-open .ui-select__trigger{border-color:var(--teal);background:var(--panel)}
.ui-select.is-open .ui-select__chevron{transform:rotate(180deg)}
.ui-select__menu{position:absolute;top:calc(100% + var(--s-2));left:0;z-index:20;display:none;width:max-content;min-width:100%;max-height:calc(var(--field-h) * 6);overflow-y:auto;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--e2)}
.ui-select.is-open .ui-select__menu{display:block}
.ui-select__option{display:flex;width:100%;min-height:var(--tap);align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);text-align:left;white-space:nowrap;cursor:pointer}
.ui-select__option:hover,.ui-select__option:focus-visible{outline:0;background:var(--head)}
.ui-select__option.is-selected{background:var(--teal05);color:var(--ink)}
.ui-select__check{margin-left:auto;color:var(--teal6);opacity:0}
.ui-select__option.is-selected .ui-select__check{opacity:1}
/* Button — 화면별 복제를 막는 공용 secondary / Teal primary / Ink 보조 변형. */
/* 🔴 버튼 기하의 정본은 시설장비관리 화면이다 (대표 확정 2026-08-05:
"버튼 디자인은 시설장비관리 페이지 버튼들과 색상 크기 디자인 동일하게 맞춰줘").
근거 파일: `apps/g2l-dashboard/facility-siman.css:54-60` 의 `.btn` 계열.
제품은 높이를 `--tap`(48px)으로 고정하고 있어 시설(padding 기반 약 33px)보다 훨씬 커서
화면을 오갈 때 이질감이 났다. 높이 고정을 버리고 **패딩이 크기를 정하게** 바꾼다.
값은 아래 토큰 한 곳에서만 고친다. */
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
padding:var(--btn-pad-y) var(--btn-pad-x);border:1px solid var(--line);border-radius:var(--btn-radius);
background:var(--panel);color:var(--ink-soft);font-family:inherit;font-size:var(--fs-body);
font-weight:var(--fw-bold);line-height:1.25;white-space:nowrap;cursor:pointer;
transition:border-color var(--motion-state) ease-out,background var(--motion-state) ease-out,color var(--motion-state) ease-out,transform var(--motion-press) ease-out}
/* hover 는 테두리와 글자색만 바꾼다 — 시설 정본이 배경을 건드리지 않는다.
제품은 `--head` 로 배경까지 바꾸고 있어 같은 버튼이 화면마다 다르게 보였다. */
.ui-button:hover{border-color:var(--teal-line);color:var(--teal-ink)}
.ui-button .fa-solid,.ui-button .fa-regular,.ui-button i{font-size:var(--btn-icon-fs)}
.ui-button:active{transform:scale(.97)}
.ui-button:focus-visible{outline:var(--focus-ring) solid var(--teal);outline-offset:var(--focus-offset)}
/* 🔴 2026-08-21 · 채움을 `--teal` → `--teal-ink` 로. **대표 확정(㉮ · 전 화면 통일).**
대표 원문: *"가독성이 높아지고 통일감이 있어야해. 대신 어두워지는게 최선인지만 확인해주면 돼."*
흰 글씨 기준 대비 실측 — 어두워지는 것 말고 길이 없다:
--teal #12A594 3.07 ❌ (기준 4.5) --teal6 #0E8C7E 4.14 ❌ 아깝게 미달
--teal-ink #0c6d61 6.22 ✅ teal 면 + 먹 글자 5.08 ⚠ 대표가 눈으로 반려한 조합
4.5 를 겨우 넘는 가장 밝은 teal 은 `#0e8476`(4.58) 인데 **우리에게 없는 새 색**이라 만들지 않는다
(`DESIGN.md` 10-3). `--teal-ink` 채움 + 흰 글씨는 `.seg.on`(405줄)이 이미 쓰는 조합이다.
⚠ 호버는 **색을 안 바꾼다.** 더 어두운 teal 토큰이 없어서 색을 바꾸면 대비가 도로 떨어진다
(옛 호버 `--teal6` 는 4.14 다). 대신 고리로 표시한다 — `.rc-pal i:hover` 가 쓰는 방식 그대로다.
⚠ `brand.css` 는 정본이고 `apps/dashboard/src/styles/brand.css` 는 생성물이다
(`pnpm --filter ./apps/dashboard css:brand`). 여기만 고친다. */
.ui-button--primary{border-color:var(--teal-ink);background:var(--teal-ink);color:var(--on-color)}
.ui-button--primary:hover{border-color:var(--teal-ink);background:var(--teal-ink);color:var(--on-color);box-shadow:0 0 0 var(--focus-ring) var(--teal-line)}
.ui-button--ink{border-color:var(--c-grey-800);background:var(--c-grey-800);color:var(--on-color)}
.ui-button--ink:hover{border-color:var(--c-grey-900);background:var(--c-grey-900)}
/* 작은 버튼 = G2L 정본 `.ui-button--compact` (brand.css:319). 정본 결과의 --r-md를 compact에 명시한다. */
.ui-button--compact.ui-button--compact{height:var(--pagination-control);padding:0 var(--s-3);border-radius:var(--r-md);font-size:var(--fs-label)}
/* 연한 강조 = 시설 정본의 `.btn--soft` (facility-siman.css:59). 제품에 없던 변형이라
화면들이 각자 비슷한 걸 만들어 쓰고 있었다. */
.ui-button--soft{background:var(--teal-bg);border-color:var(--teal-line);color:var(--teal-ink)}
.ui-button--soft:hover{background:var(--teal-bg);border-color:var(--teal);color:var(--teal-ink)}
@media(prefers-reduced-motion:reduce){.ui-select__trigger,.ui-select__chevron,.ui-button{transition:none}}
/* Runtime base/components — 조립 규칙은 docs/rules/UI-KIT.md §2·§20. */
/* Segment — 실제 값 SSOT. */
.segrow{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
/* ⚠ 비활성 글자는 --ink-soft 다. --muted(#8b9793)는 흰 배경에서 대비 3.02 라 안 읽힌다 —
이건 **사용자가 누르는 버튼**이지 보조 설명이 아니다(2026-08-01 실측, 주기 칩 일·주·월·년).
위계는 채움이 만든다: 선택된 것은 teal 채움 + 흰 글씨라 여전히 확실히 구분된다. */
/* 기하는 공용 버튼 토큰이 정한다 — padding 8px 13px / radius 9px / gap 6px.
dashboard 구조·토큰 + hover --teal-ink 로 확정(2026-08-18). */
.seg{padding:var(--btn-pad-y) var(--btn-pad-x);border:1px solid var(--line);
border-radius:var(--btn-radius);background:var(--panel);
font-size:var(--fs-body);font-weight:700;color:var(--ink-soft);cursor:pointer;text-align:left;
line-height:1.25;font-family:inherit;
display:inline-flex;align-items:center;flex-wrap:wrap;column-gap:var(--btn-gap);row-gap:0}
/* ⚠ `small`(설명)은 라벨 **아래** 줄이어야 한다. 위 inline-flex 는 아이콘 간격(6px)을 주려고
넣은 것인데, 그대로 두면 아이콘·라벨·설명이 한 줄로 늘어선다. flex-basis:100% 로 설명만
다음 줄로 내린다(2026-08-05 — inline-flex 로 바꾸면서 실제로 깨졌던 것을 잡음). */
.seg small{flex-basis:100%;font-size:11px;font-weight:600;color:var(--ink-soft);margin-top:1px}
.seg:hover{border-color:var(--teal);color:var(--teal-ink)}
/* ⚠ 채움은 --teal-ink 다. --teal(#12A594) 위 흰 글씨는 대비 3.07 로 안 읽힌다(2026-08-01 실측).
그리고 정본이 이미 --teal-ink 를 쓴다 — 결론 머리띠(.summary-card.es-sf8 .sech)가 그것이다.
여기만 --teal 이라 값이 갈려 있었다. 대비와 일관성을 같이 맞춘다. */
.seg.on{background:var(--teal-ink);border-color:var(--teal-ink);color:var(--on-color)}
.seg.on:hover{color:var(--on-color)}
.seg.on small{color:var(--teal-bg)}
/* CountChip — 실제 값 SSOT. */
.countchip{display:inline-flex;align-items:center;font-size:var(--fs-chip);font-weight:700;
border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums;white-space:nowrap;
border:1px solid var(--line-soft);font-style:normal}
.countchip.teal{background:var(--teal-bg);border-color:var(--teal-line);color:var(--teal-ink)}
.countchip.mute{background:var(--head);color:var(--ink-soft)}
/* CodeValueChip — 업종코드 등 코드·값 칩 공용. 새 화면은 codechip 계열을 쓰고 재선언하지 않는다.
radius·padding은 환경 champion-final-v6.html .fcode 실측값(5px, 3px 9px). */
.codechip,.codechip-mute{display:inline-flex;align-items:center;border-radius:5px;padding:3px 9px;
font-size:var(--fs-chip);font-weight:var(--fw-bold);white-space:nowrap}
.codechip{color:var(--teal-ink);background:var(--teal-bg);border:1px solid var(--teal-line)}
.codechip-mute{color:var(--ink-soft);background:var(--head);border:1px solid var(--line)}
/* StatusChip — 상태 칩 공용 부품 (대표 공용화 승인 2026-08-07 · rule-gap ② 해소)
── 왜 만들었나 (실측 근거 = docs/build/25 §5.2) ──
말로만 규격이 있고 클래스가 없어서 화면마다 손으로 그렸고 갈렸다. 8화면 전수 측정:
칩 667개 중 계약 충족 332. 공용 클래스를 쓰는 CountChip 3/3 · CodeChip 10/10 은 100% 지켜졌는데
손으로 그린 StatusChip 은 654개 중 319개(48.8%)만 충족했고 335곳에 고유 아이콘이 없었다.
champion 277/277 vs construction 5/189 — 기준 화면만 계약을 지키고 있었다.
같은 개념이 이름 다섯으로 흩어져 있었다: .st · .nachip · .chip-na · .chip-todo ·
그리고 .chip 은 pipe-siman.css · jiwon · my-work 세 파일에 각각 중복 정의돼 있었다.
⚠ 아이콘이 없어도 라벨은 있었으므로 "상태를 색만으로 전달" 위반은 아니었다.
어긋난 것은 UI-KIT §2 가 요구하는 3채널(색 + 형상 + 라벨)이다 — 접근성 실패가 아니라 계약 미충족.
── 쓰는 법 ──
진행중
상태 4종은 UI-KIT §2 의 --now-* / --done-* / --todo-* / --na-* 세트와 1:1이다.
아이콘은 UI-KIT §6 승인 폐쇄셋에서만 고른다. **라벨 없이 아이콘만 쓰지 마라.**
🔴 새 화면에서 상태 칩을 로컬에 다시 정의하지 마라. 값은 여기 있다.
높이는 --chip-h(한 행에서 칩마다 높이가 갈리는 것을 막는 SSOT)이고 크기는 --fs-chip 하한이다. */
.statuschip{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--chip-h);
padding:0 var(--s-2);border-radius:var(--r-sm);border:1px solid transparent;
font-size:var(--fs-chip);font-weight:var(--fw-bold);line-height:1.25;white-space:nowrap;font-style:normal}
/* 아이콘은 형상 채널이다. 글리프가 없어도 자리를 먹지 않게 비어 있으면 접는다. */
.statuschip .ic{flex:none;font-style:normal;position:relative;top:1px}
.statuschip .ic:empty{display:none}
/* 상태층은 화면별 .chip border 단축을 이겨야 한다(DESIGN-TRAPS F3, docs/build/34). */
.statuschip--now.statuschip--now{color:var(--now-ink);background:var(--now-bg);border-color:var(--now-line)}
.statuschip--done.statuschip--done{color:var(--done-ink);background:var(--done-bg);border-color:var(--done-line)}
.statuschip--todo.statuschip--todo{color:var(--ink-soft);background:var(--todo-bg);border-color:var(--todo-line)}
.statuschip--na.statuschip--na{color:var(--na-ink);background:var(--na-bg);border-color:var(--na-line)}
/* 표 하단 집계 수치의 위계(SSOT). 형상은 화면별 확정값을 유지하고 색만 상태로 구분한다.
기본 --ink는 행동이 필요한 미수정 항목에 남기며, 비대상만 .ty--off로 낮춘다(docs/build/36). */
.ty.amber.amber b{color:var(--now-ink)}
.ty.done.done b{color:var(--done-ink)}
.ty.mut.mut b{color:var(--ink-soft)}
.ty--off.ty--off b{color:var(--na-ink)}
.ty--go.ty--go{cursor:pointer}
.ty--go.ty--go:hover b{text-decoration:underline}