/* ========================================================================== Tsutome — design tokens (single source of truth) 방향: **藍染 Aizome** (dashboard/design/directions/A-aizome.DESIGN.md) 마크·모션·금지 목록은 저장소 루트의 BRAND.md 에 있다. 값이 어긋나면 이 파일이 이긴다. 인디고 염색의 두 가지 물성에서 나왔다: 1) 담글수록 짙어진다 → 팔레트가 primary/secondary 가 아니라 **담금 횟수**다 (--c-dip-1 가장 옅음 … --c-dip-8 가장 짙음). "어느 색을 쓸까"가 "얼마나 짙어야 하나"로 바뀐다. 같은 염료라 무엇을 섞어도 탁해지지 않는다. 2) 입을수록 바랜다 → 오래 입은 작업복은 무릎이 옅어진다. 옷이 노동의 기록을 들고 있다. 이 제품이 하는 일과 같다. 왜 이 방향인가: 브랜드가 이미 藍이고 이름이 勤め(근무)인데 화면은 그냥 파란 SaaS 였다. frontend-design 스킬이 금지한 세 가지 AI 기본값(크림+세리프+테라코타, 검정+산성 액센트, 브로드시트 헤어라인) 중 어디에도 걸리지 않으면서, 브랜드가 실제로 가리키는 물건에서 화면을 끌어온다. 규칙 - 페이지는 이 파일만 import 한다. 페이지별 :root 재정의 금지. - 원시 색(--c-*)은 팔레트, 화면은 의미 토큰(--bg/--ink/--st-*)만 쓴다. - 하위호환 별칭(--brand/--in/--amber…)을 유지한다 — 이름을 바꾸면 전 화면이 깨진다. - **대비가 먼저다.** 아래 값은 전부 WCAG AA(4.5) 이상으로 계산해서 골랐다. 바래는 연출이 접근성을 깎으면 그 연출을 버린다. ========================================================================== */ :root { /* ---- 팔레트: 藍 담금 단계 (직접 쓰지 말 것) ---- dip-5 이상은 흰 글자(shiroba)로 AA 를 넘고, dip-4 이하는 --ink 로 넘어가야 한다. 타일이 바랠 때 글자색도 같이 넘기는 그 전환점이 이 방향에서 가장 조심할 한 줄이다. */ --c-dip-1: #dce5f0; --c-dip-2: #b8c9de; --c-dip-3: #8fa8c6; --c-dip-4: #6484ab; --c-dip-5: #3f6390; --c-dip-6: #264974; /* primary */ --c-dip-7: #1a3556; --c-dip-8: #0f2038; /* ---- 팔레트: 천 ---- 生成り kinari = 표백하지 않은 무명. 바탕이 종이가 아니라 천이다. 순백은 하루 종일 켜 두는 태블릿에서 눈이 아프다. 白場 shiroba = 방염으로 염료가 닿지 않은 자리 — 이 체계의 유일한 '빛'. */ --c-kinari: #f2f0ea; --c-kinari-dim: #e6e3da; --c-kinari-3: #dcd8cc; --c-shiroba: #fbfaf7; --c-sumi-900: #141c26; /* 墨 먹 */ --c-sumi-700: #3c4655; --c-sumi-500: #5f6a7a; --c-sumi-300: #98a3b4; /* ---- 팔레트: 상태 — 전부 **천 염료**에서 왔다 ---- 茜 akane(꼭두서니) · 紅花 benibana(홍화) · 緑 midori. 형광을 안 쓰는 이유는 미학이 아니라 8시간 응시다. benibana 는 원래 #b06a1f 였는데 kinari 위에서 3.74:1 로 AA 미달이라 내렸다. */ --c-midori: #2f6b4f; --c-midori-bg: #e2efe7; --c-benibana: #98591a; --c-benibana-bg: #f6ebda; --c-akane: #8c2f39; --c-akane-bg: #f3e2e3; --c-fuji: #5b46a8; --c-fuji-bg: #eae6f7; /* 藤 등나무 — 휴가 */ /* ======================= 의미 토큰 (화면에서 쓰는 것) ================= */ /* 표면 — 카드 테두리를 줄이고 **염색 농도 차이**로 면을 나눈다 */ --bg: var(--c-kinari); --surface: var(--c-shiroba); --surface-2: var(--c-kinari); --surface-3: var(--c-kinari-dim); --line: var(--c-kinari-3); --line-strong: var(--c-dip-2); /* 텍스트 */ --ink: var(--c-sumi-900); --ink-2: var(--c-sumi-700); --sub: var(--c-sumi-500); --ink-on-brand: var(--c-shiroba); /* 담금 눈금 — "이 기간에 얼마나 채웠나"를 색의 깊이로 말한다(BRAND.md §2). 0=거의 안 담근 천 … 4=꽉 찬 담금. 라이트에서는 **짙어지고**, 다크에서는 **옅어진다** — 어두운 바탕 위에서 짙은 藍 은 배경과 구별이 안 된다. 방향이 뒤집혀도 뜻은 같다: 갈수록 바탕에서 더 멀어진다. */ --dip-track: var(--line); --dip-0: var(--c-dip-2); --dip-1: var(--c-dip-3); --dip-2: var(--c-dip-4); --dip-3: var(--c-dip-5); --dip-4: var(--c-dip-6); /* 브랜드색이 바탕과 3:1 을 못 넘길 때만 brand.js 가 여기에 윤곽선을 넣는다. 형광색 고객의 노랑을 국방색으로 바꾸는 대신, 색은 지키고 형태를 테두리로 남긴다. */ --brand-outline: transparent; /* 브랜드 (테넌트별 오버라이드 지점 — org.branding.color 가 여기를 덮는다) */ --brand: var(--c-dip-7); --brand-hover: var(--c-dip-8); --brand-ink: var(--c-shiroba); --brandbg: var(--c-dip-1); --brand-line: var(--c-dip-3); /* 근태 상태 — st = status */ --st-in: var(--c-midori); --st-in-bg: var(--c-midori-bg); --st-out: var(--c-sumi-700); --st-out-bg: var(--c-kinari-dim); --st-late: var(--c-benibana); --st-late-bg: var(--c-benibana-bg); --st-absent: var(--c-akane); --st-absent-bg: var(--c-akane-bg); --st-leave: var(--c-fuji); --st-leave-bg: var(--c-fuji-bg); /* ⚠️ 방향 문서에서 온 옛 토큰. 그때는 "근무가 쌓이면 바랜다"였는데, 그 말은 담금(채운 양)과 바램(함께한 시간)을 한 데이터에 겹쳐 쓴 것이라 방향이 서로 반대였다. 2026-07-28 에 갈랐다 — 누적 근무만 데이터로 쓰고(--dip-*), 바램은 **마크가 이미 갖고 있는 성질**로 되돌렸다(BRAND.md §2). 토큰이 없다. 아래 --tile-* 는 아직 쓰는 곳이 없다. 키오스크 타일에 손댈 때 지울 것. */ --tile-fresh: var(--c-dip-8); --tile-worn: var(--c-dip-5); --tile-fresh-ink: var(--c-shiroba); --tile-worn-ink: var(--c-shiroba); /* 포커스 — 어떤 테마에서도 배경 대비가 남아야 한다 */ --focus-ring: 0 0 0 3px var(--c-dip-3); /* ---- 간격 (4px 배수) ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- 모서리 ---- */ /* 천을 재단한 모서리. 라운드 0(브로드시트=금지된 AI 기본값 3번)도 아니고 캡슐도 아니다. 전광판(키오스크)은 더 각지게 따로 잡는다. */ --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ---- 그림자 ---- */ /* 깊이는 그림자가 아니라 **염색 농도**가 만든다 — 떠 있는 게 아니라 짙은 것이다. 그래서 그림자를 얕게 잡는다. 색도 검정이 아니라 藍 계열이다. */ --sh-1: 0 1px 2px rgba(15, 32, 56, .05); --sh-2: 0 2px 8px rgba(15, 32, 56, .07); --sh-3: 0 8px 26px rgba(15, 32, 56, .14); /* ---- 타이포 ---- */ --font: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Noto Sans JP", "Noto Sans Arabic", Arial, sans-serif; --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fs-xs: 11px; --lh-xs: 1.4; --fs-sm: 12.5px; --lh-sm: 1.45; --fs-md: 14px; --lh-md: 1.5; --fs-lg: 17px; --lh-lg: 1.45; --fs-xl: 21px; --lh-xl: 1.3; --fs-2xl: 28px; --lh-2xl: 1.2; --fs-3xl: 36px; --lh-3xl: 1.15; --fw-normal: 400; --fw-med: 550; --fw-bold: 650; --fw-heavy: 750; /* ---- 터치 타겟 ---- 키오스크는 공용 단말을 팔 뻗은 거리에서 누른다 → 일반 UI보다 크게 잡는다 */ --tap-min: 48px; /* 밀집한 자리(표 행 액션, 헤더 아이콘)용. 폭·글자만 줄이고 **높이는 44px 밑으로 내리지 않는다** — 예전엔 .btn.sm 이 높이까지 줄여 테마 토글이 31px 로 나왔다. 시스템이 스스로 정한 최소치를 변형에서 깨면 최소치가 아니다. */ --tap-compact: 44px; --tap-kiosk: 72px; --fs-kiosk-name: 20px; /* ---- 모션 ---- */ --dur-fast: 120ms; --dur-med: 200ms; --ease: cubic-bezier(.2, 0, .2, 1); /* 染み dye — 이 시스템의 시그니처 모션. 면이 **아래에서 위로 물든다**. 염료는 천을 위에서 덮지 않고 밑에서 빨려 올라간다. 그래서 origin 은 항상 bottom 이고 되돌릴 때도 위에서 걷히는 게 아니라 아래로 빠진다. 쓰는 곳은 **기다림이 시작되는 순간** 하나뿐이다 — 눌렀는데 결과가 아직 없는 구간. 장식으로 쓰면 안 된다. 스피너를 대신하는 물건이지 스피너에 더하는 물건이 아니다. */ --dur-dye: 220ms; --ease-dye: cubic-bezier(.25, .8, .35, 1); --dye: var(--c-dip-6); /* 물드는 색. 방향마다 덮어쓴다(키오스크는 호박색) */ /* ---- 레이아웃 ---- */ --w-content: 1080px; /* 관리자 콘솔은 표(감사로그·근무표)를 담아야 해서 폼 화면보다 넓다. 다만 목록이 한 줄에 너무 길어지면 읽기 어려우므로 대시보드(1080)보다는 좁게 잡는다. */ --w-admin: 960px; --w-narrow: 520px; } /* ===== 다크 테마 — 의미 토큰만 재지정한다 ===== */ [data-theme="dark"] { /* 검정 바탕이 아니라 **가장 짙게 담근 藍**이다. 검정으로 가면 금지된 AI 기본값 2번(near-black + 단일 액센트)이 되고, 무엇보다 이 브랜드의 색이 아니다. 밝은 쪽 글자는 흰색이 아니라 옅은 무명 계열로 둔다 — 대비는 충분하고 눈이 덜 아프다. */ --bg: #0c1725; --surface: #122032; --surface-2: #182a41; --surface-3: #20344e; --line: #25384f; --line-strong: #38506e; --ink: #e8eaee; --ink-2: #c3cbd6; --sub: #98a3b4; /* 染み 도 뒤집는다. 라이트 기본값(dip-6)을 그대로 두면 어두운 면 위에서 14% 워시가 **아무것도 안 보인다** — 실제로 스타일가이드에서 물든 타일과 안 물든 타일이 구별되지 않았다. 밝은 藍 을 얹고 알파를 조금 올린다. */ --dye: var(--c-dip-3); --dye-alpha: .2; /* 담금 눈금도 같이 뒤집는다 — 짙은 藍 은 어두운 바탕에서 사라진다 */ --dip-0: var(--c-dip-6); --dip-1: var(--c-dip-5); --dip-2: var(--c-dip-4); --dip-3: var(--c-dip-3); --dip-4: var(--c-dip-2); /* 다크에서는 담금이 뒤집힌다 — 짙은 바탕 위에서는 **옅은 藍**이 브랜드다 */ --brand: var(--c-dip-3); --brand-hover: var(--c-dip-2); --brand-ink: #0c1725; --brandbg: #182a41; --brand-line: #38506e; --st-in: #5fbf8e; --st-in-bg: #10281d; --st-out: #9aa7b8; --st-out-bg: #1b2939; --st-late: #d9a441; --st-late-bg: #2c2416; --st-absent: #e8807f; --st-absent-bg: #2c1a1c; --st-leave: #a795e6; --st-leave-bg: #221d33; --tile-fresh: var(--c-dip-3); --tile-worn: #2c4467; --tile-fresh-ink: #0c1725; --tile-worn-ink: #e8eaee; --focus-ring: 0 0 0 3px rgba(143, 168, 198, .5); --sh-1: 0 1px 2px rgba(0, 0, 0, .45); --sh-2: 0 3px 12px rgba(0, 0, 0, .55); --sh-3: 0 10px 30px rgba(0, 0, 0, .65); } /* 시스템 설정 존중 — 단, [data-theme]가 명시되면 그쪽이 이긴다 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* 검정 바탕이 아니라 **가장 짙게 담근 藍**이다. 검정으로 가면 금지된 AI 기본값 2번(near-black + 단일 액센트)이 되고, 무엇보다 이 브랜드의 색이 아니다. 밝은 쪽 글자는 흰색이 아니라 옅은 무명 계열로 둔다 — 대비는 충분하고 눈이 덜 아프다. */ --bg: #0c1725; --surface: #122032; --surface-2: #182a41; --surface-3: #20344e; --line: #25384f; --line-strong: #38506e; --ink: #e8eaee; --ink-2: #c3cbd6; --sub: #98a3b4; /* 다크에서는 담금이 뒤집힌다 — 짙은 바탕 위에서는 **옅은 藍**이 브랜드다 */ --brand: var(--c-dip-3); --brand-hover: var(--c-dip-2); --brand-ink: #0c1725; --brandbg: #182a41; --brand-line: #38506e; /* ⚠️ 위 [data-theme="dark"] 블록과 **같은 값을 두 번** 쓰고 있다. 한쪽만 고치면 OS 다크(여기)와 수동 토글(위)이 갈라진다 — 실제로 染み 를 위에만 넣었다가 OS 다크에서 물든 타일이 안 보였다. 고칠 땐 반드시 둘 다. */ --dye: var(--c-dip-3); --dye-alpha: .2; --dip-0: var(--c-dip-6); --dip-1: var(--c-dip-5); --dip-2: var(--c-dip-4); --dip-3: var(--c-dip-3); --dip-4: var(--c-dip-2); --st-in: #5fbf8e; --st-in-bg: #10281d; --st-out: #9aa7b8; --st-out-bg: #1b2939; --st-late: #d9a441; --st-late-bg: #2c2416; --st-absent: #e8807f; --st-absent-bg: #2c1a1c; --st-leave: #a795e6; --st-leave-bg: #221d33; --tile-fresh: var(--c-dip-3); --tile-worn: #2c4467; --tile-fresh-ink: #0c1725; --tile-worn-ink: #e8eaee; --focus-ring: 0 0 0 3px rgba(143, 168, 198, .5); --sh-1: 0 1px 2px rgba(0, 0, 0, .45); --sh-2: 0 3px 12px rgba(0, 0, 0, .55); --sh-3: 0 10px 30px rgba(0, 0, 0, .65); } } /* ===== 하위호환 별칭 ===== 기존 ui.css를 쓰는 admin.html·me.html이 깨지지 않게 옛 이름을 남긴다. 신규 코드에서는 쓰지 말 것. M0 완료 후 페이지를 전부 옮기면 제거 대상. */ :root { --in: var(--st-in); --inbg: var(--st-in-bg); --out: var(--st-out); --outbg: var(--st-out-bg); --amber: var(--st-late); --amberbg: var(--st-late-bg); --red: var(--st-absent); --redbg: var(--st-absent-bg); --leave: var(--st-leave); --leavebg: var(--st-leave-bg); /* admin.html 이 var(--danger,#c0392b) 로 쓰고 있었다 — 폴백 덕에 죽진 않았지만 다크 테마에서도 하드코딩 적색이 나온다. 토큰으로 편입해 테마를 따르게 한다. */ --danger: var(--st-absent); } /* ===== 요소 기본값 ===== */ /* 스타일 없는 는 브라우저 기본 파랑(#0000EE)으로 나온다 — 다크 테마에서 대비가 무너지고 브랜드와도 무관하다. 실제로 대시보드의 Kiosk 링크가 그 상태였다. */ a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); } a:hover { color: var(--brand-hover); } /* 터치 타겟 바닥선. ui.css(컴포넌트 레이어)를 실제로 링크하는 페이지는 9개 중 2개뿐이었다 — 나머지는 .btn 같은 이름만 같고 스타일은 각자 다시 짰고, 그래서 같은 버튼이 22~43px 로 제각각이었다(index 의 Refresh 는 브라우저 기본값 그대로 22px 였다). 컴포넌트 레이어를 전 페이지에 끼워 넣는 건 레이아웃 회귀 위험이 크므로, **모든 페이지가 이미 링크하는 이 파일**에 높이 바닥선만 둔다. 개별 페이지가 더 크게 잡는 건 자유고, 더 작게는 못 내려간다.