/* ===== 콘솔 공유 토큰 — 관리(admin/console.html)·일반(general/console.html) 둘 다 여기서 값을 받는다.
2026-07-16 신설. 그전엔 두 콘솔이 각자 :root 를 갖고 있었고(앞 9줄은 우연히 문자까지 같았다),
일반만 스케일이 있어서 관리 콘솔엔 raw 라운드 121곳·글자 242곳이 남아 있었다 — 같은 시스템인데 결이 달랐다.
값의 출처를 이 파일 하나로 못박는다. check-admin.mjs 가 두 콘솔 모두에서 raw 값을 exit 1 로 막는다.
새 값이 필요하면 여기에 토큰을 추가하라 — 토큰은 두 콘솔 공용이라 "이 콘솔만" 이 원천적으로 안 된다. ===== */
:root{
/* 레거시 변수명 → Harness Ops Design System 토큰 매핑
(토큰 정의는 ../Harness Ops Design System/styles.css. Harness 가 정의하는
--accent · --surface-2 · --border-strong · --danger · --info · --radius- · --text- 계열은 그대로 사용)
⚠ 주석 안에서 「별표+슬래시」 를 붙여 쓰지 마라 — 주석이 조기 종료돼 바로 다음 선언 하나를 파서가 삼킨다.
실제로 --radius-*␣/ 를 붙여 쓴 탓에 --bg 가 통째로 증발해 라이트 모드가 검게 나온 사고가 있었다(2026-08-07). */
--bg: var(--bg-app);
--surface: var(--surface-1);
--border: var(--border-default);
--text: var(--text-primary);
--dim: var(--text-secondary);
--ok: var(--success-text);
--warn: var(--warning-text);
--error: var(--danger-text);
--mono: var(--font-mono);
/* 일정(.ds) 레거시 이름 */
--bg-primary: var(--bg-canvas);
--bg-surface: var(--surface-1);
--bg-elevated: var(--surface-2);
--primary: var(--accent);
--primary-soft: var(--accent-text);
--font-brand: var(--font-sans);
--font-text: var(--font-sans);
--shadow-2: var(--shadow-sm);
--accent-dim: var(--accent-active); /* 관리 콘솔이 쓰던 이름 — 통합 시 흡수(2026-07-16) */
/* ===== 콘솔 라운드 스케일 — 이 7개가 전부다 (2026-07-16) =====
탭마다 손대중으로 9·10·11·12·15px 를 따로 쓰다 보니 같은 카드가 탭마다 달라 보였다.
그래서 값의 출처를 여기 하나로 못박는다. **CSS 에 raw border-radius 를 쓰지 마라** —
check-admin.mjs 게이트가 exit 1 로 막는다. 새 모양이 필요하면 여기에 토큰을 추가하는데,
토큰은 전 탭 공용이므로 "이 탭만 12px" 은 애초에 불가능하다. 그게 이 스케일의 목적이다. */
--r-xs: var(--radius-xs); /* 3 미세 — 진행바·마커(높이 4px 이하는 브라우저가 알아서 클램프) */
--r-sm: var(--radius-sm); /* 5 작은 컨트롤 — 칩 안쪽·작은 버튼 */
--r-md: var(--radius-md); /* 7 컨트롤 — 입력·버튼·셀렉트 */
--r-lg: var(--radius-lg); /* 10 카드·목록 항목 — 탭 불문 동일(구 9·10·11·12 통합) */
--r-xl: var(--radius-xl); /* 14 큰 면 — 모달·대시 카드(구 15) */
--r-pill: var(--radius-pill); /* 999 알약 — 칩·토글·배지 */
--r-round: var(--radius-round); /* 50% 원형 — 상태점·아바타 */
/* ===== 콘솔 글자 스케일 — 이 11개가 전부다 (2026-07-16) =====
구 24종(9·9.5·10·10.5·11.5·12.5·13.5·16·18·21·22·23·26·29px …)을 접었다. 그건 스케일이 아니라
탭마다 눈대중으로 맞춘 값이었고, 그래서 같은 라벨이 탭마다 반 픽셀씩 달랐다.
DS 스케일(11~48)을 그대로 쓰되, --t-3xs 하나만 콘솔 몫이다 — DS 최소가 11px 인데
이 콘솔은 조밀해서 10px 라벨(35곳)이 실제 어휘다. DS 를 오염시키지 않으려고 여기서만 정의한다.
**CSS·JS 어디서도 raw font-size 를 쓰지 마라** — 게이트가 exit 1 로 막는다. */
--t-3xs: 10px; /* 콘솔 전용 — 조밀 라벨·메타(구 8·9·9.5·10·10.5) */
--t-2xs: var(--text-2xs); /* 11 칩·보조 메타(구 11·11.5) */
--t-xs: var(--text-xs); /* 12 본문 보조(구 12·12.5) — 콘솔에서 제일 많이 쓴다 */
--t-sm: var(--text-sm); /* 13 본문(구 13·13.5) */
--t-base: var(--text-base); /* 14 강조 본문·항목 제목 */
--t-md: var(--text-md); /* 15 카드 제목 */
--t-lg: var(--text-lg); /* 17 섹션 제목(구 16·17·18) */
--t-xl: var(--text-xl); /* 20 탭 제목(구 20~23) */
--t-2xl: var(--text-2xl); /* 24 큰 수(구 24·26) */
--t-3xl: var(--text-3xl); /* 30 대시 계기(구 28·29) */
--t-4xl: var(--text-4xl); /* 38 최대(구 40) */
/* ===== 본문 목록 항목 — 탭이 달라도 같은 물건이면 같게 보여야 한다 (2026-07-16) =====
자동화·로그·실험·관측·정리(.auto-card) / 설정(.set-card·.brand-card) / 보고서(.rep-row) 는
전부 "본문 목록의 항목"인데 배경이 surface vs surface-2 로 갈리고 패딩이 12/14·14/16·16/14·9/12
넷이었다. 배경은 --item-bg 하나로 통일한다.
밀도만 둘로 나눈다 — 이건 드리프트가 아니라 내용 모양이 실제로 다르기 때문이다:
--pad-card = 제목+보조줄이 있는 2줄 카드 · --pad-row = 한 줄짜리 행(목록이 길다).
새 항목을 만들 때 이 둘 중 하나를 골라라. 세 번째 밀도를 만들지 마라 — 그게 24종 폰트가 생긴 경로다. */
--item-bg: var(--surface-2);
--pad-card: var(--space-3) var(--space-4); /* 12 16 — 2줄 카드 */
--pad-row: var(--space-2) var(--space-3); /* 8 12 — 1줄 행 */
/* ===== SMARTC&S 브랜드 오버라이드 (2026-08-06) =====
Harness Ops 의 구조 토큰(--jv-*·--radius·--space·--text 스케일)은 그대로 두고,
색·브랜드 토큰만 SMARTC&S 디자인 시스템 값으로 덮는다. 로그인 페이지(dev.smartcs.co.kr)와
동일한 팔레트 — 블루 #0070B8 계열 accent, IBM Plex(양 DS 공통), 다크 서피스·상태색.
값 출처: internal/design/.../colors_and_type.css (다크 테마 토큰). */
--bg-app: #0B0E12; /* SMARTC&S dark bg-app */
--bg-canvas: #0F1419; /* dark bg-sunken */
--surface-1: #151A21; /* dark bg-surface */
--surface-2: #1B222B; /* dark bg-raised */
--border-default: #262D38;
--border-strong: #33383F; /* ink-700 */
--text-primary: #E8ECF1; /* fg1 */
--text-secondary: #B7BFC9; /* fg2 */
--text-tertiary: #8B939F; /* fg3 */
--text-disabled: #5A626E;
/* ═══ 강조색 — 이 하네스의 «마크 색»이 정한다 (2026-09-17) ═══════════════════
3단 토큰: primitive(--mark-h/s, 마크 색의 색상·채도) → semantic(--accent*, 아래에서 테마별 계산)
→ component(화면 코드는 var(--accent*) 만 쓴다. 여기 바뀌어도 소비자는 손 안 댄다).
primitive 는 brand-icons.js 의 applyMarkTheme(markId) 가 부팅 때 :root 에 심는다.
주입 전·실패 시 아래 기본값(SMARTC&S 블루)으로 떨어지므로 화면이 색을 잃지 않는다.
**명도(L)를 primitive 에 넣지 않는 이유** — 마크 색은 «흰 글리프를 얹은 타일»용이라 어둡다(L 25~45%).
그 값을 그대로 강조색으로 쓰면 어두운 화면에서 안 보인다. 그래서 색상·채도만 가져오고
명도는 테마와 역할이 정한다. 아이콘과 콘솔이 «같은 색»으로 읽히면서 둘 다 제 대비를 갖는다.
옛 [data-accent] 콘솔 스킨(관리=보라 jv / 일반=에메랄드)은 같은 날 제거했다 —
하네스마다 다른 색을 주려는 장치인데 종류 2개만 갈랐고, 이제 마크가 53개를 다 가른다. */
--mark-h: 202; /* 색상(deg) — 숫자만. calc() 로 돌려 쓴다 */
--mark-s: 51%; /* 채도 */
--accent: hsl(var(--mark-h) var(--mark-s) 57%);
--accent-hover: hsl(var(--mark-h) var(--mark-s) 66%);
--accent-active: hsl(var(--mark-h) var(--mark-s) 47%);
--accent-contrast: hsl(var(--mark-h) 38% 8%); /* 강조색 면 위의 글자 */
--accent-text: hsl(var(--mark-h) var(--mark-s) 71%);
--accent-soft: hsl(var(--mark-h) var(--mark-s) 52% / .15);
--accent-soft-hover:hsl(var(--mark-h) var(--mark-s) 52% / .22);
--accent-border: hsl(var(--mark-h) var(--mark-s) 54% / .42);
--accent-ring: hsl(var(--mark-h) var(--mark-s) 54% / .34);
--success-text: #4BBD85; /* ok, 다크 텍스트용 밝힘 */
--warning: #C8861F;
--warning-text: #D9A441; /* warn */
--danger: #D23A40;
--danger-text: #E06A70; /* crit */
--danger-soft: rgba(210,58,64,0.15);
--info-text: var(--accent-text);
/* ── 계기판(HUD) — 옛 [data-accent] 콘솔 스킨이 주던 값을 여기로 가져왔다(2026-09-17).
스킨을 떼면 --jv-* 가 통째로 비고, 이 토큰은 콘솔에서 --jv 84회·--jv-hair 78회 쓰인다.
신호 색조(--jv·--jv-a·--jv-b)는 시각화용이라 밝기 테마와 무관하게 같은 값을 쓴다 —
면 색(void/panel/well)과 실선(hair)만 테마를 탄다.
rgba(var(--jv-rgb), a) 꼴로 쓰는 자리가 있어 삼원색 표기도 함께 둔다(hsl 로는 못 만든다) —
그 셋은 applyMarkTheme 이 마크 색에서 계산해 심고, 주입 전엔 아래 블루 기본값이다. */
--jv: hsl(var(--mark-h) var(--mark-s) 62%);
--jv-a: hsl(var(--mark-h) var(--mark-s) 55%);
--jv-b: hsl(calc(var(--mark-h) + 18) var(--mark-s) 69%);
--jv-ice: #7DD3FC; /* 고정 — 마크 색과 대비를 이루는 보조 신호(진행·선택) */
--jv-rgb: 94,163,212;
--jv-b-rgb: 116,186,224;
--jv-ice-rgb: 125,211,252;
--jv-void: var(--bg-app);
--jv-panel: var(--surface-1);
--jv-well: var(--surface-3);
--jv-hair: hsl(var(--mark-h) 26% 74% / .13);
--jv-hair2: hsl(var(--mark-h) 26% 74% / .26);
--jv-hair-rgb: 168,182,196;
/* ═══ 기능색 — «어느 카드가 어느 기능인가» 를 가르는 고정 포인트색 (2026-09-18) ═══
바탕·글자는 무채색 그대로 두고 아이콘 칩·카드 상단 띠·탭 선택 표시에만 쓴다.
받는 색이 아니다 — 사용자도 하네스 마크도 이 값을 바꾸지 않는다. 색상(H)만 기능마다 다르고
채도·명도는 한 벌이라 어느 기능도 혼자 튀지 않는다. 색만으로 가르지 않는다(아이콘+라벨이 늘 같이 간다).
쓰는 법: 요소에 data-fn 을 달고 화면 CSS 가 --fn / --fn-soft 로 받아 쓴다.
근거: docs/superpowers/specs/2026-09-18-fixed-design-system.md */
--fn-s: 42%; --fn-l: 68%; --fn-soft-l: 58%; --fn-soft-a: .16;
--fn-sched: hsl(212 var(--fn-s) var(--fn-l)); --fn-sched-soft: hsl(212 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 일정 */
--fn-goal: hsl(152 var(--fn-s) var(--fn-l)); --fn-goal-soft: hsl(152 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 목표 */
--fn-memo: hsl(40 var(--fn-s) var(--fn-l)); --fn-memo-soft: hsl(40 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 메모 */
--fn-brief: hsl(262 var(--fn-s) var(--fn-l)); --fn-brief-soft: hsl(262 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 브리핑·대시보드 */
--fn-project: hsl(186 var(--fn-s) var(--fn-l)); --fn-project-soft: hsl(186 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 프로젝트·영역 */
--fn-auto: hsl(24 var(--fn-s) var(--fn-l)); --fn-auto-soft: hsl(24 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 자동화 */
--fn-archive: hsl(232 var(--fn-s) var(--fn-l)); --fn-archive-soft: hsl(232 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* 아카이브·주소 */
--fn-nas: hsl(100 var(--fn-s) var(--fn-l)); --fn-nas-soft: hsl(100 var(--fn-s) var(--fn-soft-l) / var(--fn-soft-a)); /* NAS(저장소의 둘째 칸, 2026-09-24) — 초록이되 목표(152)와 갈리게 노랑 쪽 */
/* ═══ GOBBI 잉크 — 고정 디자인 «잉크 & 하드 섀도» 의 토큰 (2026-09-19, 정본은 여기 한 곳) ═══
종이색 평면 + 잉크 테두리 + 번짐 없는 오프셋 그림자. 이 값들은 «정의» 일 뿐이라 선언만으로는 어떤 화면도 안 바뀐다 —
화면이 디자인 하네스의 gobbi.css(areas/gobbi/content/)를 링크해야 면·테두리가 이 값으로 갈아 끼워진다.
규칙·근거: internal/design/harness/areas/gobbi/content/README.md */
--c-ink: hsl(40 20% 92%); /* 선·그림자·창 머리 */
--c-paper: hsl(30 6% 9%); /* 바탕 */
--c-surface: hsl(30 6% 13%); /* 카드 면 */
--c-surface-2: hsl(30 6% 17%); /* 눌린 면·호버 */
--c-on-fn: hsl(30 10% 7%); /* 기능색(--fn-*, L68%) 면 위의 글자 */
--c-sh: 4px 4px 0 var(--c-ink); --c-sh-up: 6px 6px 0 var(--c-ink); --c-sh-sm: 2px 2px 0 var(--c-ink);
--c-t: .14s ease-out;
}
/* ===== 밝은 화면 (2026-08-07) =====
Harness Ops 도 [data-theme="light"] 를 갖고 있지만, 위 SMARTC&S :root 오버라이드가 나중에 로드돼
같은 특이성으로 이겨 버린다 — 그래서 여기서 다시 정의한다. :root[data-theme] 는 특이성이 한 단 높아
위 블록을 확실히 덮는다. 속성이 없으면 지금까지처럼 어두운 화면 그대로다. */
:root[data-theme="light"]{
/* 캔버스는 한 단 어둡게, 실선은 두 단 진하게(2026-08-07) — 흰 카드가 #F4F7FA 위 10% 헤어라인으로는
경계가 안 읽힌다(그래프·일정·자동화·보고서 카드 전부 흐릿). 카드 흰색은 유지하고 주변만 내린다. */
--bg-app: #E9EEF3; /* SMARTC&S ink-75 상당 — 흰 카드가 뜨는 캔버스 */
--bg-canvas: #FFFFFF;
--surface-1: #FFFFFF;
--surface-2: #EEF2F6; /* 카드 위 목록 항목(--item-bg) — 흰 카드와 한 단 분리 */
--surface-3: #E6EBF1;
--surface-hover: rgba(16,24,40,0.05);
--surface-active: rgba(16,24,40,0.09);
--border-subtle: #E2E7ED;
--border-default: #D3DAE2; /* 구 ink-200 보다 두 단 진하게 */
--border-strong: #ABB4BF;
--text-primary: #1A1D21; /* ink-900 */
--text-secondary: #4B525B; /* ink-600 */
--text-tertiary: #6B7280; /* ink-500 */
--text-disabled: #9AA1AB; /* ink-400 */
--text-inverse: #FFFFFF;
--success-text: #176E48; /* 밝은 바탕에선 상태색도 어두워야 읽힌다 */
--warning-text: #A36811;
--danger-text: #B22F35;
--info-text: #17618F;
--overlay-scrim: rgba(20,24,30,0.42);
/* 계기판 계열(--jv-*)은 어두운 화면 전용으로 만들어진 값이라, 그대로 두면 밝은 화면에서
본문 바탕만 까맣게 남는다(.main 이 --jv-void 를 깐다). 신호 색조(--jv·--jv-a…)는
시각화용이라 건드리지 않고, 면 색과 실선만 밝은 쪽으로 바꾼다. */
--jv-void: var(--bg-app);
--jv-panel: var(--surface-1);
--jv-well: var(--surface-3);
--jv-hair: rgba(20,24,30,0.16); /* 카드 실선 — 0.10 은 흰 카드 경계가 안 보였다(2026-08-07) */
--jv-hair2: rgba(20,24,30,0.28);
--jv-hair-rgb: 20,24,30;
/* 목록 항목(자동화 카드·통계 타일·보고서 행·설정 카드)은 캔버스 위에 놓인다 — 어두운 화면의
surface-2(#EEF2F6)는 캔버스(#E9EEF3)와 RGB 5 차이라 투명해 보였다. 일정 칸·패널과 같은 흰색으로. */
--item-bg: var(--surface-1);
}
/* 밝은 화면의 강조 램프 — 색상·채도는 같은 마크 색이고 명도만 내린다(밝은 바탕에 밝은 글자는 안 읽힌다) */
:root[data-theme="light"]{
/* 명도는 54개 마크 전수로 맞춘 값이다 — 노란 계열(today_weather #978F19)이 가장 빡빡해서
기준을 잡는다. text 31%/accent 38% 로는 흰 카드 위 4.07:1·2.80:1 로 미달했다(실측). */
--accent: hsl(var(--mark-h) var(--mark-s) 32%);
--accent-hover: hsl(var(--mark-h) var(--mark-s) 27%);
--accent-active: hsl(var(--mark-h) var(--mark-s) 23%);
--accent-contrast: #FFFFFF;
--accent-text: hsl(var(--mark-h) var(--mark-s) 26%);
--accent-soft: hsl(var(--mark-h) var(--mark-s) 42% / .12);
--accent-soft-hover:hsl(var(--mark-h) var(--mark-s) 42% / .18);
--accent-border: hsl(var(--mark-h) var(--mark-s) 42% / .38);
--accent-ring: hsl(var(--mark-h) var(--mark-s) 42% / .30);
/* 기능색도 명도만 내린다 — 색상·채도는 어두운 화면과 같은 값이라 같은 기능이 같은 색으로 읽힌다 */
--fn-l: 34%; --fn-soft-l: 46%; --fn-soft-a: .13;
/* GOBBI 잉크 — 밝은 화면 */
--c-ink: hsl(30 12% 10%); --c-paper: hsl(42 38% 93%); --c-surface: hsl(42 50% 98%); --c-surface-2: hsl(42 30% 90%); --c-on-fn: hsl(42 50% 98%);
}
/* 강조색 스킴([data-scheme] 8종)은 2026-09-17 삭제. 강조색은 SMARTC&S 블루 한 벌뿐이다 —
화면마다 8색 리컬러를 견뎌야 해서 어떤 페이지도 고정색을 못 쓰던 게 제약이었다.
하네스 구분은 색 바꾸기가 아니라 마크(brand-icons.js 의 markDef — 그룹색 + 전용 글리프)가 한다. */