/* ══════════════════════════════════════════════════════════════════════════ DECK — tokens.css · 3층 토큰 시스템 빌드 없음 · 의존 없음 · 오프라인 · 어떤 프로젝트에도 얹힌다. 층 구조 (이 순서를 지키는 것이 이식성의 전부다) ① 원시(primitive) --p- 계열 숫자·색 그 자체. 의미 없음. 프로젝트가 바뀌면 여기만 바꾼다. ② 의미(semantic) --c- / --sp- / --fs- "무엇에 쓰는가". 화면 코드는 여기만 쓴다. ③ 부품(component) --btn- / --fld- 부품 하나에만 해당하는 값. 축(axis) 3개 — 모두 ② 층에서만 갈린다. 화면 코드는 한 줄도 안 바뀐다. theme : system(기본) | light | dark [data-theme] density : cozy(기본) | compact | touch [data-density] contrast : normal(기본) | high [data-contrast] 규칙 · 화면 코드에서 --p- 계열을 직접 쓰지 않는다(쓰는 순간 테마가 깨진다). · ⚠ CSS 주석 안에 별표+슬래시를 연달아 쓰면 주석이 거기서 끝난다 — 토큰 이름을 와일드카드로 적을 때 조심(2026-08-01 실측: 토큰 전체 무효화). · 새 색이 필요하면 ① 에 원시색을 추가하고 ② 에 역할 이름을 준다. · 프로젝트 고유 역할(예: 장치/서버)은 ②-b 프로젝트 층에 모은다. ══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── ① 원시 — 색 램프 중립색은 순회색이 아니라 강조색 쪽으로 살짝 기운 색을 쓴다(선택된 회색). ───────────────────────────────────────────────────────────────────────── */ :root{ /* 중립 (청록 쪽으로 미세하게 기운 회색) */ --p-n-0:#ffffff; --p-n-25:#f7f9fb; --p-n-50:#eef2f6; --p-n-100:#e2e8ee; --p-n-200:#cbd5df; --p-n-300:#a9b8c6; --p-n-400:#7f92a4; --p-n-500:#5d7186; --p-n-600:#44586c; --p-n-700:#2f4155; --p-n-750:#243447; --p-n-800:#1b2837; --p-n-850:#151f2c; --p-n-900:#101823; --p-n-950:#0b111a; --p-n-1000:#06090e; /* 유채색 램프 — 300(밝음) / 500(기준) / 700(어두움) / 800(고대비 전용) 800 은 밝은 바탕 고대비용이다. 700 은 흰 바탕에서 4.7~6.2:1(AA)에 그쳐 고대비 축을 켜도 상태색이 그대로였다(2026-08-01 실측). 800 은 흰 바탕 10:1 이상 — 어두운 테마의 고대비(300 사용, 12:1대)와 세기를 맞춘다. */ --p-cy-300:#7ee3f2; --p-cy-500:#33c6dd; --p-cy-700:#0f7f93; --p-cy-800:#084956; --p-am-300:#f4c778; --p-am-500:#e09a2c; --p-am-700:#9a6406; --p-am-800:#5c3b02; --p-gr-300:#7ce0b0; --p-gr-500:#2fbd83; --p-gr-700:#12764f; --p-gr-800:#09452e; --p-rd-300:#ffa79b; --p-rd-500:#ee5f4d; --p-rd-700:#b3311f; --p-rd-800:#6f1d11; --p-vi-300:#c3b0f7; --p-vi-500:#8b6bef; --p-vi-700:#523aa8; --p-vi-800:#2e2160; --p-bl-300:#9cc7ff; --p-bl-500:#3f8ae0; --p-bl-700:#1b5296; --p-bl-800:#123769; /* 원시 — 간격(4pt) · 모서리 · 그림자 · 시간 */ --p-sp-1:2px; --p-sp-2:4px; --p-sp-3:8px; --p-sp-4:12px; --p-sp-5:16px; --p-sp-6:24px; --p-sp-7:32px; --p-sp-8:48px; --p-sp-9:64px; --p-r-1:4px; --p-r-2:6px; --p-r-3:10px; --p-r-4:16px; --p-r-full:999px; --p-dur-1:120ms; --p-dur-2:220ms; --p-ease:cubic-bezier(.2,.7,.3,1); /* 원시 — 글자 */ --p-ff-sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif; --p-ff-mono:'Cascadia Mono','D2Coding',Consolas,'Noto Sans Mono',monospace; --p-fs-1:10px; --p-fs-2:11px; --p-fs-3:12px; --p-fs-4:13px; --p-fs-5:14px; --p-fs-6:16px; --p-fs-7:20px; --p-fs-8:26px; --p-fs-9:34px; --p-fw-normal:400; --p-fw-medium:550; --p-fw-bold:700; --p-fw-black:800; } /* ───────────────────────────────────────────────────────────────────────── ② 의미 — 기본값은 **다크**(관제 화면이 주 사용처). 시스템이 라이트면 아래 미디어 쿼리가, 사용자가 고르면 [data-theme]이 이긴다. ───────────────────────────────────────────────────────────────────────── */ :root{ /* UA 표면(스크롤바·폼 컨트롤·시스템 색)도 테마를 따르게 한다 (§105, MDN color-scheme). 페이지 쪽에는 를 CSS 앞에 둔다. */ color-scheme:dark light; /* 표면 · 선 · 글자 */ --c-canvas:var(--p-n-950); --c-surface:var(--p-n-900); --c-surface-2:var(--p-n-850); --c-surface-3:var(--p-n-800); --c-overlay:rgba(4,8,14,.66); --c-line:var(--p-n-800); --c-line-strong:var(--p-n-700); --c-text:var(--p-n-50); --c-text-2:var(--p-n-300); --c-text-3:var(--p-n-400); --c-text-inv:var(--p-n-950); /* 강조 · 상태 (각 역할은 색/배경/테두리 3종을 갖는다) */ --c-accent:var(--p-cy-500); --c-accent-bg:#0c2a33; --c-accent-line:var(--p-cy-700); --c-ok:var(--p-gr-500); --c-ok-bg:#0c2a1e; --c-ok-line:var(--p-gr-700); --c-warn:var(--p-am-500); --c-warn-bg:#2b2110; --c-warn-line:var(--p-am-700); --c-crit:var(--p-rd-500); --c-crit-bg:#2e1512; --c-crit-line:var(--p-rd-700); --c-info:var(--p-bl-500); --c-info-bg:#0f1f33; --c-info-line:var(--p-bl-700); --c-focus:var(--p-cy-300); --c-shadow:0 10px 30px rgba(0,0,0,.45); --c-shadow-sm:0 2px 8px rgba(0,0,0,.35); } @media (prefers-color-scheme: light){ :root{ --c-canvas:var(--p-n-50); --c-surface:var(--p-n-0); --c-surface-2:var(--p-n-25); --c-surface-3:var(--p-n-100); --c-overlay:rgba(16,24,35,.45); --c-line:var(--p-n-200); --c-line-strong:var(--p-n-300); --c-text:var(--p-n-900); --c-text-2:var(--p-n-600); --c-text-3:var(--p-n-500); --c-text-inv:var(--p-n-0); /* 밝은 바탕에서는 500 램프가 날아간다 — 같은 역할을 700으로 다시 고른다 */ --c-accent:var(--p-cy-700); --c-accent-bg:#e3f6fa; --c-accent-line:var(--p-cy-500); --c-ok:var(--p-gr-700); --c-ok-bg:#e2f7ee; --c-ok-line:var(--p-gr-500); --c-warn:var(--p-am-700); --c-warn-bg:#fdf2dd; --c-warn-line:var(--p-am-500); --c-crit:var(--p-rd-700); --c-crit-bg:#fdeae7; --c-crit-line:var(--p-rd-500); --c-info:var(--p-bl-700); --c-info-bg:#e8f1fd; --c-info-line:var(--p-bl-500); --c-focus:var(--p-cy-700); --c-shadow:0 10px 30px rgba(20,40,60,.12); --c-shadow-sm:0 2px 8px rgba(20,40,60,.10); } } /* 사용자 선택은 양방향 모두 미디어 쿼리를 이긴다 */ :root[data-theme="dark"]{ color-scheme:dark; --c-canvas:var(--p-n-950); --c-surface:var(--p-n-900); --c-surface-2:var(--p-n-850); --c-surface-3:var(--p-n-800); --c-overlay:rgba(4,8,14,.66); --c-line:var(--p-n-800); --c-line-strong:var(--p-n-700); --c-text:var(--p-n-50); --c-text-2:var(--p-n-300); --c-text-3:var(--p-n-400); --c-text-inv:var(--p-n-950); --c-accent:var(--p-cy-500); --c-accent-bg:#0c2a33; --c-accent-line:var(--p-cy-700); --c-ok:var(--p-gr-500); --c-ok-bg:#0c2a1e; --c-ok-line:var(--p-gr-700); --c-warn:var(--p-am-500); --c-warn-bg:#2b2110; --c-warn-line:var(--p-am-700); --c-crit:var(--p-rd-500); --c-crit-bg:#2e1512; --c-crit-line:var(--p-rd-700); --c-info:var(--p-bl-500); --c-info-bg:#0f1f33; --c-info-line:var(--p-bl-700); --c-focus:var(--p-cy-300); --c-shadow:0 10px 30px rgba(0,0,0,.45); --c-shadow-sm:0 2px 8px rgba(0,0,0,.35); } :root[data-theme="light"]{ color-scheme:light; --c-canvas:var(--p-n-50); --c-surface:var(--p-n-0); --c-surface-2:var(--p-n-25); --c-surface-3:var(--p-n-100); --c-overlay:rgba(16,24,35,.45); --c-line:var(--p-n-200); --c-line-strong:var(--p-n-300); --c-text:var(--p-n-900); --c-text-2:var(--p-n-600); --c-text-3:var(--p-n-500); --c-text-inv:var(--p-n-0); --c-accent:var(--p-cy-700); --c-accent-bg:#e3f6fa; --c-accent-line:var(--p-cy-500); --c-ok:var(--p-gr-700); --c-ok-bg:#e2f7ee; --c-ok-line:var(--p-gr-500); --c-warn:var(--p-am-700); --c-warn-bg:#fdf2dd; --c-warn-line:var(--p-am-500); --c-crit:var(--p-rd-700); --c-crit-bg:#fdeae7; --c-crit-line:var(--p-rd-500); --c-info:var(--p-bl-700); --c-info-bg:#e8f1fd; --c-info-line:var(--p-bl-500); --c-focus:var(--p-cy-700); --c-shadow:0 10px 30px rgba(20,40,60,.12); --c-shadow-sm:0 2px 8px rgba(20,40,60,.10); } /* ───────────────────────────────────────────────────────────────────────── 고대비 — 저조도 현장·시력 보조. 선과 글자, 상태색 대비를 끌어올린다. ⚠ 구조는 위 테마 블록을 그대로 따라간다: 기본=다크, 라이트는 미디어 쿼리, 사용자 선택은 양쪽 모두 미디어 쿼리를 이긴다. 라이트 고대비를 미디어 쿼리 밖에 두면 `:not([data-theme="dark"])`가 **system 다크에도 걸려** 어두운 바탕에 어두운 글자가 된다 — 정작 고대비가 필요한 사용자에게 최악이다. ───────────────────────────────────────────────────────────────────────── */ :root[data-contrast="high"]{ /* 기본(=다크) 밝은 300 램프로 끌어올림 */ --c-line:var(--p-n-500); --c-line-strong:var(--p-n-300); --c-text-2:var(--p-n-100); --c-text-3:var(--p-n-200); --c-accent:var(--p-cy-300); --c-ok:var(--p-gr-300); --c-warn:var(--p-am-300); --c-crit:var(--p-rd-300); --c-info:var(--p-bl-300); --c-focus:var(--p-cy-300); --c-accent-line:var(--p-cy-300); --c-ok-line:var(--p-gr-300); --c-warn-line:var(--p-am-300); --c-crit-line:var(--p-rd-300); } @media (prefers-color-scheme: light){ /* 시스템이 라이트일 때만 (다크 강제는 제외) */ :root[data-contrast="high"]:not([data-theme="dark"]){ --c-text-2:var(--p-n-800); --c-text-3:var(--p-n-700); --c-line:var(--p-n-400); --c-line-strong:var(--p-n-600); /* 800 을 쓴다 — 700 은 보통 대비가 이미 쓰는 값이라 고대비가 무동작이 된다 (2026-08-01 실측: 흰 바탕에서 4.69:1 그대로 → 800 으로 10:1대 확보) */ --c-accent:var(--p-cy-800); --c-ok:var(--p-gr-800); --c-warn:var(--p-am-800); --c-crit:var(--p-rd-800); --c-info:var(--p-bl-800); --c-focus:var(--p-cy-800); --c-accent-line:var(--p-cy-800); --c-ok-line:var(--p-gr-800); --c-warn-line:var(--p-am-800); --c-crit-line:var(--p-rd-800); } } :root[data-theme="light"][data-contrast="high"]{ /* 사용자가 라이트를 고른 경우 */ --c-text-2:var(--p-n-800); --c-text-3:var(--p-n-700); --c-line:var(--p-n-400); --c-line-strong:var(--p-n-600); --c-accent:var(--p-cy-800); --c-ok:var(--p-gr-800); --c-warn:var(--p-am-800); --c-crit:var(--p-rd-800); --c-info:var(--p-bl-800); --c-focus:var(--p-cy-800); --c-accent-line:var(--p-cy-800); --c-ok-line:var(--p-gr-800); --c-warn-line:var(--p-am-800); --c-crit-line:var(--p-rd-800); } /* ───────────────────────────────────────────────────────────────────────── ② 의미 — 간격·글자·컨트롤 크기 (밀도 축이 여기서 갈린다) cozy(기본): 사무실·태블릿 / compact: 현장 관제 벽면 / touch: 모바일 한 손 ───────────────────────────────────────────────────────────────────────── */ :root{ --sp-1:var(--p-sp-1); --sp-2:var(--p-sp-2); --sp-3:var(--p-sp-3); --sp-4:var(--p-sp-4); --sp-5:var(--p-sp-5); --sp-6:var(--p-sp-6); --sp-7:var(--p-sp-7); --sp-8:var(--p-sp-8); --r-1:var(--p-r-1); --r-2:var(--p-r-2); --r-3:var(--p-r-3); --r-4:var(--p-r-4); --ff-sans:var(--p-ff-sans); --ff-mono:var(--p-ff-mono); --fs-micro:var(--p-fs-2); --fs-sm:var(--p-fs-3); --fs-base:var(--p-fs-5); --fs-lg:var(--p-fs-6); --fs-xl:var(--p-fs-7); --fs-2xl:var(--p-fs-8); --fs-num:clamp(var(--p-fs-6),1.1vw,var(--p-fs-7)); --ctl-h:32px; /* 버튼·입력 높이 */ --ctl-px:var(--sp-4); --panel-pad:var(--sp-5); --row-gap:var(--sp-3); --lh:1.55; } :root[data-density="compact"]{ --sp-3:3px; --sp-4:6px; --sp-5:10px; --sp-6:16px; --sp-7:22px; --sp-8:32px; --fs-micro:var(--p-fs-1); --fs-sm:var(--p-fs-2); --fs-base:var(--p-fs-4); --fs-lg:var(--p-fs-5); --fs-xl:var(--p-fs-6); --fs-2xl:var(--p-fs-7); --ctl-h:26px; --ctl-px:var(--sp-3); --panel-pad:var(--sp-4); --row-gap:var(--sp-2); --lh:1.42; } :root[data-density="touch"]{ --sp-3:10px; --sp-4:14px; --sp-5:20px; --sp-6:28px; --fs-micro:var(--p-fs-3); --fs-sm:var(--p-fs-4); --fs-base:var(--p-fs-6); --ctl-h:44px; /* 손가락 최소 타깃 */ --ctl-px:var(--sp-5); --panel-pad:var(--sp-5); --lh:1.6; } /* ②-b 프로젝트 층은 이 파일에 없다 — 프로젝트 층 CSS 가 담당한다. DECK 핵심 세 파일(tokens/ui/ui.js)은 어떤 도메인도 알지 못한다: 그래야 다음 프로젝트가 세 파일을 그대로 복사하고 자기 ②-b 파일만 새로 쓴다. */