/* ClovirONE 디자인 토큰 — 제품 전체가 여기 하나만 본다. * * 값의 출처는 ClovirONE 디자인 시스템(`ClovirONE Design System/clovirone/tokens.css`)이다. * 그동안 로그인 화면만 그 브랜드 색을 쓰고, 로그인 이후 화면은 별개의 팔레트(#4F46E5 계열)를 * 써서 같은 제품으로 보이지 않았다. 브랜드를 이 파일로 끌어올려 모든 화면이 공유한다. * * 화면별 CSS는 색을 직접 적지 않는다. 여기 없는 색이 필요하면 토큰을 먼저 만든다. * 폰트는 브랜드가 Pretendard지만 단일 TTF가 6.7MB라 첫 화면을 늦춘다. 외부 CDN도 금지이므로 * 시스템 스택을 유지한다. 로그인 화면도 원래 같은 스택을 쓰고 있어 이 부분은 이미 일치한다. */ :root { /* -------- 브랜드 인디고 -------- */ --color-primary: #536CD6; /* 기본 동작. 버튼, 링크, 선택 상태 */ --color-primary-strong: #435CBE; /* hover와 active. 히어로 그라디언트의 깊은 끝 */ --color-primary-soft: #758AE1; /* 포커스 링과 장식 경계. 흰 배경 대비 3.2라 글자색으로 쓰지 않는다 */ --color-ink: #141B34; /* 브랜드 최심색. 사이드바와 히어로의 바탕 */ /* primary 배경 위에 얹는 글자색. --color-card로 대신할 수 없다 — 다크에서 카드가 잉크색이 되어 * 사이드바 위 글자가 사라진다. 다크에서는 primary가 밝아져 흰 글자가 3.24까지 떨어지므로 * 잉크를 얹는다(5.24). */ --color-on-primary: #FFFFFF; /* -------- 중립 — 브랜드는 푸른 기가 도는 쿨 캐스트다 -------- */ --color-bg: #F8FAFF; --color-card: #FFFFFF; --color-border: #DEE4F5; /* 카드와 입력창 테두리 */ --color-line: #E9E9E9; /* 표의 행 구분선 */ --color-text: #333333; --color-muted: #636363; /* 제목·큰 숫자. 디자인 시스템은 본문(#333)과 다른 짙은 잉크빛을 쓴다(.page-title, .res .big). * 브랜드 잉크(#141B34)와 같은 계열이라 상단바·히어로와 이어진다. 배경 위 15.16. */ --color-heading: #1B2235; /* -------- 상태 — 브랜드 팔레트에 없어 제품이 정한다. 흰 배경 대비 AA 통과 -------- */ --color-success: #15803D; --color-warning: #B45309; --color-error: #B91C1C; /* 상태색을 꽉 채운 면 위에 얹는 글자색(토스트 등). 다크에서는 상태색이 밝아져 흰 글자가 * 1.67까지 떨어진다. 잉크를 얹으면 6.14 이상으로 읽힌다. */ --color-on-status: #FFFFFF; /* 어두운 면 위에 얹는 흰색. 로그인 히어로의 글자와 유리질이 여기 걸린다. * --color-card로 대신할 수 없다 — 다크 테마에서 카드가 잉크색이 되어 히어로가 통째로 깨진다. * 히어로는 테마와 무관하게 어두우므로 이 값도 테마를 따라가지 않는다. */ --color-text-inverse: #FFFFFF; /* -------- 장식 액센트 — 히어로와 데코에만. 글자색으로 쓰지 않는다 -------- */ --color-accent-purple: #8E75E1; --color-accent-sky: #7EBCD4; --color-accent-violet: #8E7ED4; /* -------- 상단바 — 브랜드의 top chrome -------- * 디자인 시스템(ui_kit/Dashboard.html)이 로그인 이후 화면에 정한 가장 특징적인 요소다. * 50px 그라디언트 바가 화면 맨 위를 가로지른다. * * 원본 --g-top-bar는 41% 지점이 하늘색(#7EBCD4)이라 흰 글자 대비가 2.09다. 사실상 안 보인다. * 데모는 1920px에서 그 지점이 빈 공간이라 드러나지 않았지만, 화면이 좁아지면 오른쪽 글자 * 묶음이 60~98% 구간에 걸려 그 위로 온다. 오른쪽 끝(#8E7ED4)도 3.45라 12px 글자엔 미달이다. * 그래서 HSL 색상(hue)과 채도는 한 도도 바꾸지 않고 명도만 낮췄다. 브랜드의 색 여정 * (인디고 → 하늘 → 보라)은 그대로이고, 흰 글자가 어디에 놓여도 4.5를 넘는다. */ /* 디자인 시스템은 50px이다. 그 값은 1920×1080 캔버스를 그대로 그린 데모의 수치이고, * 데모는 화면 크기에 맞춰 전체를 축소해서 보여준다. 우리 상단바는 축소 없이 1:1이라 * 같은 50px가 실제 모니터에서 훨씬 작게 읽힌다 — 사용자 지적: "너무 작게 보임". * 비율은 그대로 두고 크기만 한 단계 올린다(50→56, 글자도 같은 비율로). * 의도된 편차이고 이유가 여기 있다. */ --topbar-height: 56px; --g-topbar: linear-gradient(90deg, #435CBE 0%, /* 흰 글자 5.98 — 원본 그대로 */ #347F9C 41%, /* 흰 글자 4.50 — 원본 #7EBCD4는 2.09 */ #7A67CC 98%); /* 흰 글자 4.50 — 원본 #8E7ED4는 3.45 */ --topbar-fg: var(--color-text-inverse); /* 상단바는 두 테마 모두 같은 그라디언트다(위 --g-topbar는 다크 블록에서 재정의되지 않는다). * 그러니 그 위에 얹는 것도 테마를 따라가면 안 된다. * 실제로 --color-card를 선택된 알약에 썼다가 다크에서 흰 알약이 잉크 알약으로 뒤집혔고, * "선택된 쪽이 밝게 튄다"는 설계가 "선택된 쪽이 더 눌려 보인다"로 역전돼 비선택 칸과 * 구분이 6.15 → 2.60까지 무너졌다. 히어로에 대해 tokens.css가 이미 경고한 함정을 * 상단바가 그대로 반복한 것이다. */ --topbar-pill-bg: var(--color-text-inverse); /* 테마 불변 흰색 */ --topbar-pill-fg: #536CD6; /* 흰 알약 위 4.68. --color-primary는 다크에서 밝아져 3.16 */ /* -------- 사이드바 — 디자인 시스템은 흰 사이드바다 -------- * 우리는 그동안 어두운 잉크 사이드바를 썼다. 디자인 시스템의 내부 화면은 흰 사이드바 + * 우측 그림자이고, 어두운 면은 상단바가 맡는다. 그쪽으로 맞춘다. * 라이트에서 흰 면이므로 이제 본문용 색이 그대로 통한다. 다크에서는 아래에서 뒤집는다. */ --sidebar-width: 260px; /* 브랜드 기준. 채팅과 관리자가 같은 너비를 쓴다 */ --sidebar-bg: var(--color-card); --sidebar-shadow: 3px 0 10px rgba(20, 27, 52, 0.08); /* 아래 대비는 전부 이 흰 면(--sidebar-bg) 기준이다. 잉크 사이드바 시절의 숫자가 면이 * 뒤집힌 뒤에도 그대로 남아 두 개가 거짓이 돼 있었다. 둘 다 잰 면이 달랐던 것이다: * 21.0 — 순수 흑백(#000 on #FFF)에서만 나오는 이론 최대치다. #333333은 흰 면에서 * 12.63이 최대이고, 잉크 시절(흰 글자 on #141B34)도 16.99였다. 어느 시점의 * 값도 아니었다. * 5.09 — 아래 --badge-neutral-fg를 **배지 틴트 위에서** 잰 값이다(그 주석은 옳다). * 같은 토큰이라도 놓인 면이 다르면 대비가 다르다. 흰 면 위에서는 6.01이다. * 그래서 이 숫자들은 이제 사람이 관리하지 않는다 — * tests/regression/test_css_says_what_it_does.py가 색에서 직접 계산해 대조한다. */ --sidebar-text: var(--color-text); /* 흰 면 위 12.63 */ --sidebar-muted: var(--color-muted); /* 흰 면 위 6.01 */ --sidebar-hover: rgba(228, 236, 255, 0.5); --sidebar-active-bg: #EAF0FF; /* 디자인 시스템은 활성 글자에 #758AE1을 쓰는데 이 배경 위에서 2.84다. 사이드바에서 가장 * 중요한 글자(지금 어디에 있는지)가 가장 안 읽혔다. 같은 브랜드 계열의 짙은 쪽으로 내린다. */ --sidebar-active-fg: var(--color-primary-strong); /* #EAF0FF 위 5.24 */ --sidebar-danger: #B91C1C; /* -------- 상태 배지 — 채팅과 관리자가 같은 톤 어휘를 쓴다 -------- * 배경은 시맨틱 색의 옅은 틴트다. 그 위에 같은 색을 글자로 얹으면 대비가 4.5에 못 미친다 * (측정: info 3.91, success 4.14, warning 4.15). 배지는 작은 글자라 더 불리하다. * 그래서 글자만 한 단계 짙은 색을 쓴다. 배경 틴트는 그대로 두어 톤은 유지된다. */ --badge-neutral-bg: color-mix(in srgb, var(--color-muted) 12%, transparent); --badge-neutral-fg: var(--color-muted); /* 5.09 */ --badge-neutral-border: var(--color-border); --badge-success-bg: color-mix(in srgb, var(--color-success) 14%, transparent); --badge-success-fg: #116430; /* 6.00 */ --badge-warning-bg: color-mix(in srgb, var(--color-warning) 14%, transparent); --badge-warning-fg: #8F4208; /* 5.88 */ --badge-error-bg: color-mix(in srgb, var(--color-error) 14%, transparent); --badge-error-fg: #991616; /* 6.65 */ --badge-info-bg: color-mix(in srgb, var(--color-primary) 14%, transparent); --badge-info-fg: var(--color-primary-strong); /* 4.99 */ /* -------- 모서리 — 브랜드는 10px가 기본이다 -------- */ --radius-sm: 6px; --radius-md: 10px; --radius-pill: 100px; /* -------- 그림자 — 브랜드는 푸른 기가 도는 그림자를 쓴다 -------- */ --shadow-card: 0 5px 10px rgba(59, 77, 191, 0.16); --shadow-subtle: 0 1px 3px rgba(20, 27, 52, 0.08); --shadow-dropdown: 0 4px 12px rgba(20, 27, 52, 0.10); /* 모달은 화면 위에 떠야 하지만 히어로 타일만큼 무거우면 업무 화면에서 부담스럽다. * 히어로(0 30px 60px)는 로그인의 장식 타일 전용이다. */ --shadow-modal: 0 10px 40px rgba(20, 27, 52, 0.30); --shadow-hero: 0 30px 60px rgba(0, 0, 0, 0.35); /* Pretendard 를 앞에 둔다(2026-08-04 웹폰트 허용). 뒤의 시스템 스택은 폴백으로 남긴다 — CDN 이 안 닿아도 화면이 예전과 같아 보이지 더 나빠지지 않는다. */ --font-stack: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, "Helvetica Neue", Arial, sans-serif; /* 브랜드의 목소리. 로그인 히어로의 모토처럼 브랜드가 말하는 자리에만 쓴다. */ --font-serif: Georgia, "Nanum Myeongjo", "Batang", "Noto Serif KR", serif; } [data-theme="dark"] { /* 어두운 화면에서는 같은 인디고가 탁해 보인다. 브랜드의 밝은 쪽(500)을 올려 쓴다. */ --color-primary: #758AE1; --color-primary-strong: #8E9BE8; --color-primary-soft: #536CD6; --color-ink: #070B1A; /* 밝아진 primary 위에는 흰 글자가 3.24로 미달이다. 잉크를 얹으면 5.24로 읽힌다. */ --color-on-primary: #141B34; --color-bg: #0B1020; --color-card: #141B34; /* 브랜드 잉크를 카드로 올린다 */ --color-border: #2A3564; --color-line: #232C52; --color-text: #E6E9F5; --color-muted: #9AA3C4; /* 라이트용 짙은 잉크(#1B2235)를 다크에 그대로 두면 제목이 배경에 묻힌다(1.20). 본문색으로 되돌린다. */ --color-heading: var(--color-text); /* 15.63 */ --color-success: #4ADE80; --color-warning: #FBBF24; --color-error: #F87171; --color-on-status: #141B34; /* 밝은 상태색 위에 흰 글자는 1.67. 잉크는 6.14 이상 */ /* 사이드바는 다크에서 카드와 같은 잉크 면이 된다. 라이트용 활성 틴트(#EAF0FF)를 그대로 두면 * 어두운 화면에 흰 덩어리가 박힌다. 어두운 면 위의 옅은 primary 틴트로 뒤집는다. */ --sidebar-bg: var(--color-card); --sidebar-shadow: 3px 0 10px rgba(0, 0, 0, 0.4); --sidebar-hover: rgba(117, 138, 225, 0.10); --sidebar-active-bg: color-mix(in srgb, var(--color-primary) 18%, transparent); /* 5.27은 아래 --badge-info-fg를 그 배지 틴트(primary 14%) 위에서 잰 값이 옮겨 적힌 * 것이었다. 여기 틴트는 18%라 면이 더 밝고, 실제 대비는 4.97이다(AA 4.5는 넘는다). * 라이트 사이드바에서 5.09가 배지에서 복사돼 온 것과 같은 실수다 — * 대비는 색이 아니라 **색과 면의 쌍**에 붙는다. */ --sidebar-active-fg: var(--color-primary-strong); /* #8E9BE8 — 18% 틴트 면 위 4.97 */ --sidebar-danger: #FCA5A5; /* 배지 글자는 라이트에서 짙은 색을 쓰지만, 어두운 틴트 위에 그대로 두면 읽히지 않는다 * (측정: success #116430을 다크 배경에 얹으면 1.75). 다크에서는 밝은 쪽으로 되돌린다. */ --badge-success-fg: var(--color-success); /* 7.31 */ --badge-warning-fg: var(--color-warning); /* 7.63 */ --badge-error-fg: var(--color-error); /* 5.05 */ --badge-info-fg: var(--color-primary-strong); /* #8E9BE8 — 5.27. primary 자신은 4.27로 미달 */ --shadow-card: 0 5px 10px rgba(0, 0, 0, 0.45); --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5); /* 모달은 테두리 없이 그림자만으로 가림막에서 떨어진다. 라이트용 잉크 그림자 * rgba(20,27,52,.30)를 다크에 그대로 두면 그림자색이 가림막보다 밝아서 그림자가 아니라 * 옅은 빛무리가 된다(모달 대 가림막 대비 1.14). 검정으로 내려야 경계가 산다. */ --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.65); }