/* * 디자인 토큰 — user / admin / gds007 세 영역이 공유하는 단일 출처. * * 3계층 구조: primitive(원시값) → semantic(용도) → component(컴포넌트별). * 페이지 CSS는 semantic/component 층만 참조한다. primitive를 직접 쓰지 말 것 — * 테마 전환이 깨진다. * * 방향: 계측기(instrument). 규칙 한 줄은 "색은 상태에만 쓴다". * 표면·경계·타이포는 무채색으로 두고, 채도는 정상/주의/경고 판정에만 할당한다. */ /* ============================================================ * 1. Primitive — 원시 램프. 테마와 무관한 고정값. * ============================================================ */ :root { /* 무채색 램프. 순수 회색이 아니라 아주 옅은 청색을 섞어 계측 장비의 냉랭한 인상을 유지한다(H≈210). */ --p-n-950: #0C1116; --p-n-900: #141B23; --p-n-850: #1B242E; --p-n-800: #243040; --p-n-700: #35455A; --p-n-500: #5A6672; --p-n-400: #8A98A8; --p-n-300: #B4C0CC; --p-n-200: #DCE2E8; --p-n-100: #ECEFF2; --p-n-50: #F5F7F9; --p-n-0: #FFFFFF; --p-ink-950: #131A21; /* 계측 강조(바늘·선택·링크). 상태 4색과 겹치지 않게 시안 계열 하나만 쓴다. */ --p-signal-400: #38BDF8; --p-signal-700: #0A6FAA; /* 상태 4단계. 쓰임이 셋이고 요구 대비가 서로 달라 값도 셋으로 나눈다. * * mark — 도형용 채움. 도트·스와치·막대·눈금처럼 글자가 얹히지 '않는' 것. * 바탕 표면 대비 3:1(WCAG 1.4.11 비문자 요소). 테마별로 값이 다르다. * solid — 글자를 얹는 채운 배경. 상태 배지·불평형 막대·danger 버튼. * 그 위 글자(--ink-on-solid) 대비 4.5:1. 테마와 무관하게 같은 값. * ink — 텍스트·아이콘·테두리. 표면 대비 4.5:1. 테마별로 다르다. * * mark 와 solid 를 한 토큰으로 쓰던 때가 있었고, 그래서 라이트가 깨졌다: * 흰 바탕에서 도형으로 읽히려면 어두워야 하는데(3:1), 검은 글자를 얹으려면 * 밝아야 한다(4.5:1). 두 조건이 겹치는 구간이 사실상 없다. 밝은 쪽으로 통일돼 * 있었던 탓에 라이트에서 도트·막대가 1.45~2.40:1 로 흐릿하게 떴다. */ --p-good-mark: #34D399; --p-good-dark: #6EE7B7; --p-good-light: #047857; --p-normal-mark: #38BDF8; --p-normal-dark: #7DD3FC; --p-normal-light:#0369A1; --p-warn-mark: #FBBF24; --p-warn-dark: #FCD34D; --p-warn-light: #9A4A08; --p-alert-mark: #F87171; --p-alert-dark: #FCA5A5; --p-alert-light: #B91C1C; /* 라이트 표면(#FFFFFF / #F5F7F9 / #ECEFF2)용 도형 채움. 위 -mark 는 어두운 표면에 맞춘 밝은 값이라 흰 바탕에 얹으면 3:1 을 못 넘긴다. 세 바닥 모두에서 3:1 이상이면서, 같은 상태의 -light(=ink)보다는 밝게 둬서 도형과 글자가 구분되게 했다. */ --p-good-mark-lt: #059669; --p-normal-mark-lt: #0284C7; --p-warn-mark-lt: #C2660A; --p-alert-mark-lt: #E23B3B; /* ---- 테마 무관 스칼라 ---- */ /* 간격 — 4px 배수. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* 반경 — 계측기다운 각을 살리려고 작게 잡는다. pill 은 상태 배지 전용이다. 카드에 쓰지 말 것. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* 타입 스케일 * * 예전 스케일은 11/12/13/15/18/24/32 였는데, 페이지가 실제로 가장 많이 쓰는 14·16·20px * 이 빠져 있었다. 스케일이 현실을 못 덮으니 아무도 안 쓰고(채택률 8%) 다들 리터럴을 * 박았다. 빠진 단계를 채워서 스케일이 실제로 쓸 수 있는 물건이 되게 한다. * 이 밖의 값(10/17/21/22/26/28/30)은 가까운 단계로 스냅한다. */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 서체 * 본문은 Noto Sans KR(가변). CJK 계열이라 숫자가 기본으로 고정폭이다 — 40px 기준 * '1111111111' 과 '0000000000' 이 둘 다 222px 로 측정된다. 값이 15~30초마다 * 갱신되는 이 화면들에서 자릿수가 바뀌어도 숫자가 출렁이지 않는다는 뜻이고, * tnum 지원 여부에 기대지 않아도 된다. * Mono 는 계측기 판독값의 성격을 주는 자리(수치·각인 라벨)에만 쓴다. * Mono 스택에 Noto Sans KR 을 끼워 둔 이유: IBM Plex Mono 에는 한글이 없어서 * '강수없음' 같은 값이 글자마다 브라우저 기본 한글꼴(윈도우면 맑은 고딕)로 * 대체돼 본문과 다른 서체가 섞여 보였다. 본문꼴로 받아 두면 적어도 한 벌로 읽힌다. */ --font-sans: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Noto Sans KR", monospace; /* 모션 */ --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --page-width: 1660px; /* 브레이크포인트 — 정본. * CSS 변수는 @media 안에서 못 쓰므로 값으로 직접 적되, 이 세 개만 쓴다. * 예전에는 360~1280 사이 임의값 17종이 흩어져 있어서 화면폭에 따라 어떤 레이아웃이 * 나올지 예측할 수 없었다. * --bp-md: 768px 모바일 경계 (.is-mobile 토글과 같은 값) * --bp-lg: 1080px 좁은 데스크톱 — 사이드바 유지, 그리드 열 축소 * --bp-xl: 1440px 와이드 — 최대 열 수 */ } /* ============================================================ * 2. Semantic — 용도 별칭. 테마별로 값이 바뀌는 유일한 층. * ============================================================ */ /* 다크가 기본. 테마 클래스가 아직 안 붙은 첫 페인트에서도 깜빡이지 않게 :root 에 함께 선언한다. */ :root, .theme-dark { --surface-base: var(--p-n-950); --surface-raised: var(--p-n-900); --surface-sunken: #0A0E13; --surface-inset: var(--p-n-850); --surface-hover: #1E2833; --graticule: var(--p-n-800); --graticule-strong: var(--p-n-700); --graticule-faint: #1A222C; --ink: #E4E9EF; --ink-dim: var(--p-n-400); --ink-faint: #7A8794; --ink-inverse: var(--p-n-950); /* 채운 배경(--state-*-solid) 위에 얹는 글자색. solid 는 테마가 바뀌어도 값이 같으니 이 글자색도 같이 고정해야 한다 — --ink 를 쓰면 다크에서 밝은 글자가 밝은 배경 위에 올라가 읽히지 않는다. .theme-light 에 다시 선언하지 않는 게 의도다(이 블록의 :root 쪽이 두 테마 모두에 걸린다). */ --ink-on-solid: var(--p-ink-950); --signal: var(--p-signal-400); --signal-hover: #7DD3FC; --signal-soft: rgba(56, 189, 248, 0.14); --state-good-mark: var(--p-good-mark); --state-good-ink: var(--p-good-dark); --state-good-soft: rgba(52, 211, 153, 0.14); --state-normal-mark: var(--p-normal-mark); --state-normal-ink: var(--p-normal-dark); --state-normal-soft: rgba(56, 189, 248, 0.14); --state-warn-mark: var(--p-warn-mark); --state-warn-ink: var(--p-warn-dark); --state-warn-soft: rgba(251, 191, 36, 0.14); --state-alert-mark: var(--p-alert-mark); --state-alert-ink: var(--p-alert-dark); --state-alert-soft: rgba(248, 113, 113, 0.14); /* 글자를 얹는 채운 배경. 두 테마 공통이라 .theme-light 에 다시 선언하지 않는다 — 대비는 바탕 표면이 아니라 --ink-on-solid 와의 관계로 결정되기 때문이다. */ --state-good-solid: var(--p-good-mark); --state-normal-solid: var(--p-normal-mark); --state-warn-solid: var(--p-warn-mark); --state-alert-solid: var(--p-alert-mark); /* 계측기 패널은 그림자를 거의 쓰지 않는다. 면 분할은 선(graticule)이 맡는다. 그림자가 허용되는 곳은 배경 위로 진짜 떠야 하는 모달·드롭다운뿐이다. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); /* 모달 뒤를 덮는 막. 예전에는 rgba(2,8,23,0.62) 이 한 군데에만 박혀 있었다. */ --overlay-scrim: rgba(6, 10, 14, 0.72); /* ---- 차트 ---------------------------------------------------------- * 계열 정체성(categorical)과 크기(sequential)는 역할이 달라 팔레트를 나눈다. * 상태색(--state-*)은 좋음/나쁨을 뜻할 때만 쓰고 "3번째 계열" 자리로 돌려쓰지 * 않는다 — 예전에는 3상 R/S/T 를 상태색으로 그려서 주황이 '주의'인지 'T상'인지 * 구분되지 않았다. * * 아래 값은 눈으로 고르지 않고 dataviz 검증기로 통과시킨 조합이다(명도대·채도 * 하한·색각 이상 분리도·정상 시야 분리도·배경 대비). 다크는 라이트를 뒤집은 게 * 아니라 이 배경에 맞춰 따로 뽑았다. */ --chart-cat-1: #3E8CC4; --chart-cat-2: #D2761F; --chart-cat-3: #8578C4; --chart-cat-4: #D45C8C; /* 크기용 한 색상 램프(어두움 → 밝음). 가장 낮은 단계도 배경과 2:1 이상 벌어진다. */ --chart-seq-1: #2E5273; --chart-seq-2: #3A6A93; --chart-seq-3: #4785B4; --chart-seq-4: #5AA0CE; --chart-seq-5: #79B8DE; /* 격자·축은 배경에서 한 단계만 물러난 실선. 점선은 임계선에만 쓴다. */ --chart-grid: var(--graticule-faint); --chart-axis: var(--graticule); /* 면적 차트의 채움 불투명도. 차트는 인라인 SVG 라 의 stop-opacity 로 들어간다 — 색은 계열색(--chart-cat-*)을 그대로 쓰고 진하기만 여기서 정한다. 예전에는 페이지 CSS 가 계열색과 무관한 그라디언트를 직접 만들어서, 팔레트를 바꿔도 면적만 옛 색으로 남았다. */ --chart-area-opacity-top: 0.22; --chart-area-opacity-bottom: 0.02; color-scheme: dark; } .theme-light { --surface-base: var(--p-n-50); --surface-raised: var(--p-n-0); --surface-sunken: var(--p-n-100); --surface-inset: var(--p-n-100); --surface-hover: #E9EDF1; --graticule: var(--p-n-200); --graticule-strong: var(--p-n-300); --graticule-faint: #E8ECF0; --ink: var(--p-ink-950); --ink-dim: var(--p-n-500); --ink-faint: #66727E; --ink-inverse: var(--p-n-0); --signal: var(--p-signal-700); --signal-hover: #085A8B; --signal-soft: rgba(10, 111, 170, 0.10); --state-good-mark: var(--p-good-mark-lt); --state-good-ink: var(--p-good-light); --state-good-soft: rgba(4, 120, 87, 0.10); --state-normal-mark: var(--p-normal-mark-lt); --state-normal-ink: var(--p-normal-light); --state-normal-soft: rgba(3, 105, 161, 0.10); --state-warn-mark: var(--p-warn-mark-lt); --state-warn-ink: var(--p-warn-light); --state-warn-soft: rgba(180, 83, 9, 0.10); --state-alert-mark: var(--p-alert-mark-lt); --state-alert-ink: var(--p-alert-light); --state-alert-soft: rgba(185, 28, 28, 0.10); --shadow-sm: 0 1px 2px rgba(19, 26, 33, 0.06); --shadow-md: 0 4px 12px rgba(19, 26, 33, 0.08); --overlay-scrim: rgba(19, 26, 33, 0.44); /* 차트 — 흰 배경에 맞춰 따로 검증한 단계들 */ --chart-cat-1: #1F77B4; --chart-cat-2: #D95F02; --chart-cat-3: #7570B3; --chart-cat-4: #C2185B; /* 크기용 램프(밝음 → 어두움) */ --chart-seq-1: #8FB8D8; --chart-seq-2: #6E9EC6; --chart-seq-3: #4D82B0; --chart-seq-4: #31699A; --chart-seq-5: #17507F; --chart-grid: var(--graticule-faint); --chart-axis: var(--graticule); /* 흰 배경에서는 같은 불투명도가 더 진해 보인다 — 한 단계 낮춘다. */ --chart-area-opacity-top: 0.16; --chart-area-opacity-bottom: 0.02; color-scheme: light; } /* ============================================================ * 3. Component — 컴포넌트별 별칭. semantic 만 참조한다. * ============================================================ */ :root { --card-bg: var(--surface-raised); --card-border: var(--graticule); /* 카드는 8px. 토큰 주석이 "계측기다운 각을 살리려고 작게" 라고 적어 두고도 12px 였고, 페이지는 그보다 큰 14~16px 로 렌더하고 있었다. --r-lg 는 셸(사이드바) 전용으로 남긴다. */ --card-radius: var(--r-md); --card-pad: var(--sp-6); --btn-bg: var(--surface-inset); --btn-border: var(--graticule-strong); --btn-ink: var(--ink); --btn-bg-hover: var(--surface-hover); --btn-primary-bg: var(--signal); --btn-primary-ink: var(--ink-inverse); --btn-radius: var(--r-sm); --input-bg: var(--surface-base); --input-border: var(--graticule-strong); --input-ink: var(--ink); --input-placeholder: var(--ink-faint); --input-radius: var(--r-sm); --table-header-bg: var(--surface-inset); --table-stripe: var(--graticule-faint); --table-border: var(--graticule); --badge-radius: var(--r-pill); --nav-bg: var(--surface-raised); --nav-border: var(--graticule); --nav-ink: var(--ink-dim); --nav-ink-active: var(--ink); --nav-active-bg: var(--signal-soft); --nav-active-marker: var(--signal); --focus-ring: 2px solid var(--signal); --focus-offset: 2px; /* 겹침 순서 — 예전에는 z-index: 60 같은 매직넘버가 페이지마다 따로 있었다. */ --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; }