/* 디자인 토큰 — `docs/DESIGN.md` (alpha-kr-stripe-1) 이식본. * * 이 파일에는 **값만** 둔다. 규칙(선택자)은 `app.css`·`auth.css` 에 있다. * 화면마다 색을 새로 짓지 않는다 — 새 색이 필요하면 여기에 토큰을 추가하고 이유를 남긴다. * * 테마는 **이 파일 한 곳에서만** 갈린다. 컴포넌트 CSS 에는 다크 분기가 없다 * (`prefers-color-scheme`·`[data-theme]` 가 app.css·auth.css 에 나오면 테스트가 깨진다). * * 3상태: * 시스템 설정 따름 (기본) — `@media (prefers-color-scheme: dark)` * 라이트 — `` * 다크 — `` * 명시 선택은 `localStorage["aml-theme"]` 에만 남는다. 서버에 저장하지 않는다. */ :root { /* 폼 컨트롤·스크롤바 같은 UA 표면도 테마를 따라오게 한다. */ color-scheme: light; /* --- 글꼴 -------------------------------------------------------------- * Pretendard 는 CDN 에서 온다. 차단되면 폴백 스택으로 그대로 읽힌다. * 개별 규칙에서 font-family 를 새로 짓지 않고 이 토큰만 쓴다. */ --font-sans: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --- 강조 --------------------------------------------------------------- */ --primary: #533afd; --primary-deep: #4434d4; --primary-press: #2e2b8c; --primary-soft: #665efd; --primary-subdued: #e8e6ff; --on-primary: #ffffff; /* --- 면 ----------------------------------------------------------------- */ --canvas: #ffffff; --canvas-soft: #f6f9fc; --canvas-sunken: #eef3f9; --canvas-cream: #f7efdf; /* 카드 **안**의 칸(quiet 패널·빈 상태·펼침 블록). * DESIGN.md Known Gaps §747: 라이트는 눌러서(카드보다 어둡게), 다크는 들어서 * (카드보다 밝게) 구분한다. 면 관계가 테마에 따라 뒤집히는 유일한 토큰이다. */ --surface-inset: #f6f9fc; /* 모달 스크림 — 뒤 화면을 덮되 완전히 가리지는 않는다(모달은 페이지 위의 층이지 * 다른 화면이 아니다). 라이트는 딥네이비 잉크 계열, 다크는 페이지 바닥보다 더 * 어두운 값을 쓴다. 글자를 얹지 않으므로 명도비 대상이 아니다. */ --scrim: rgba(13, 37, 61, 0.55); /* --- 헤어라인 4단 (DESIGN.md §Colors 면) -------------------------------- */ --hairline-soft: #eef2f7; --hairline: #e3e8ee; --hairline-table: #c0cddd; --hairline-input: #6997c6; /* 3.07 vs 흰 배경 — WCAG 1.4.11(3:1). 2026-08-20 사용자 승인 */ /* --- 글자 (순검정 금지) -------------------------------------------------- */ --ink: #0d253d; --ink-secondary: #273951; --ink-mute: #5a6b85; --ink-mute-2: #63738c; --ink-placeholder: #637896; --on-dark: #ffffff; --on-dark-mute: #9fb0c9; /* --- 분류 틴트 (배경 + 짝 잉크를 항상 함께 쓴다) ------------------------ */ --tint-indigo: #e8e6ff; --tint-indigo-ink: #3b2bb8; --tint-sky: #e0edfa; --tint-sky-ink: #1c5286; --tint-mint: #dff3e8; --tint-mint-ink: #136c42; --tint-amber: #fbeed6; --tint-amber-ink: #7d5411; --tint-rose: #fce3ec; --tint-rose-ink: #a51c4c; --tint-gray: #eef2f7; --tint-gray-ink: #4a5b73; /* --- 의미색 ------------------------------------------------------------- */ --semantic-success: #0e835a; --semantic-warning: #9b6829; --semantic-error: #d5194b; /* --- 차트 (팔레트 밖 hex 금지) ------------------------------------------ */ --chart-1: #533afd; --chart-2: #0e835a; --chart-3: #9b6829; --chart-4: #0072bc; --chart-5: #ea2261; /* --- 그라데이션 메시 정지점 (DESIGN.md gradient-mesh) -------------------- * **로그인 화면 배경 전용.** 데이터 화면에 깔면 숫자를 방해한다. */ --mesh-apricot: #f3ddd0; --mesh-lavender: #e4dcf6; --mesh-rose: #f7dfeb; /* --- 브랜드 자산 색 ----------------------------------------------------- * `app/static/brand/` 의 KAML CI 실제 값. DESIGN.md 의 brand-navy(#1c1e54) 와 다르다. * 로고 SVG 와 theme-color 만 이 값을 쓰고, UI 색으로는 쓰지 않는다. * **테마와 무관한 고정값** — 다크에서도 바뀌지 않는다. */ --brand-kaml-navy: #001e5a; --brand-kaml-magenta: #d70082; /* --- 로고 전환 (2026-08-19 사용자 승인 · 확정) --------------------------- * 라이트에서는 원본 로고, 다크에서는 반전(리버스) 로고를 쓴다. 브랜드 잉크가 * #001E5A 라서 다크 상단바(#12203a) 위에서는 명도비 1.03 으로 사라진다. * 색이 아니라 **표시 여부**를 토큰으로 갈라 다크 분기를 이 파일에 가둔다. * 되돌릴 여지를 남긴 잠정 처리가 아니다 — `brand/kaml-logo-dark.svg` 를 다크의 * 정식 자산으로 확정했다. 로고를 바꾸려면 두 SVG 를 함께 교체한다. */ --logo-standard-display: block; --logo-reversed-display: none; /* --- 타이포 위계 (DESIGN.md §Typography) -------------------------------- */ --fs-display-lg: 30px; --fs-display-md: 26px; --fs-heading-lg: 22px; --fs-heading-md: 20px; --fs-heading-sm: 18px; --fs-body-lg: 18px; --fs-body: 17px; --fs-body-sm: 15px; --fs-label: 15px; --fs-caption: 13px; /* 최소 — 13px 미만 금지 */ --fs-button: 16px; --fs-button-sm: 15px; --fs-metric-xl: 30px; --fs-metric-lg: 22px; --fs-tabular: 16px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* 제목 — 한글 가독성 때문에 원본의 300 을 채택하지 않는다 */ --fw-bold: 700; /* 지표 숫자 */ --lh-tight: 1.25; --lh-heading: 1.35; --lh-body: 1.7; --lh-compact: 1.6; --ls-display: -0.02em; --ls-heading: -0.01em; --ls-tabular: -0.01em; /* --- 간격 --------------------------------------------------------------- */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-section: 48px; /* --- 모서리 (버튼·배지·검색창은 알약) ----------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* --- 그림자 (푸른 기) ---------------------------------------------------- */ --elevation-card: 0 1px 3px rgba(0, 55, 112, 0.08); --elevation-raised: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04); --elevation-overlay: 0 16px 48px -8px rgba(0, 55, 112, 0.18); /* --- 레이아웃 ----------------------------------------------------------- */ /* 2026-08-20 레이아웃 개정으로 `--content-max`(콘텐츠 최대폭)·`--sidebar-width` 는 * 폐기했다. 콘텐츠는 화면 전체 폭을 쓰고 좌우 여백만 `clamp()` 으로 주며, 좌측 * 사이드바는 상단 메뉴로 옮겼다 — 쓰지 않는 토큰을 남기면 다음 사람이 그것이 규칙인 * 줄 안다. */ --topbar-height: 60px; --control-height: 46px; /* 고연령 사용자 기준 상향(원본 40px) */ } /* =========================================================================== * 다크 팔레트 * =========================================================================== * * 출처 표기 — DESIGN.md §Colors 의 `dark-*` 계열은 **값을 그대로 이식**했다. * 나머지는 DESIGN.md §다크모드 원칙("라이트의 파스텔 틴트는 다크에서 채도를 낮추고 * 잉크를 밝게 뒤집어 쓴다")에 따라 파생한 값이다. * * --canvas #12203a DESIGN.md dark-surface * --canvas-soft #0b1524 DESIGN.md dark-canvas * --canvas-sunken #0d1a2e DESIGN.md dark-sunken * --surface-inset #182a48 DESIGN.md dark-surface-soft ← §747 반전 지점 * --hairline-soft #24395c DESIGN.md dark-hairline-soft * --hairline #2b4570 DESIGN.md dark-hairline * --hairline-table #32507a DESIGN.md dark-hairline-table * --hairline-input #4a71ab DESIGN.md dark-hairline-input * --ink #e6edf7 DESIGN.md dark-ink * --ink-mute #9fb0c9 DESIGN.md dark-ink-mute * --primary #8c7fff DESIGN.md dark-primary * 그 외 파생 * * 헤어라인 4단은 DESIGN.md §Colors 면의 하한을 실측으로 만족한다(카드면 #12203a 대비): * --hairline-soft #24395c = 1.40 (하한 없음 · 조용한 내부 구획) * --hairline #2b4570 = 1.69 (하한 1.55 · 카드·섹션 경계) * --hairline-table #32507a = 1.98 (하한 1.85 · 표 행·KPI 칸) * --hairline-input #4a71ab = 3.28 (WCAG 1.4.11 UI 컴포넌트 3:1) * 2026-08-19 이전 DESIGN.md 값(dark-hairline #1d2f4c = 1.21 · dark-hairline-2 * #24395c = 1.40)은 같은 문서가 규정한 하한을 스스로 만족하지 못했다. 사용자 승인 * (2026-08-19)으로 DESIGN.md 쪽 값을 위 4단으로 갱신했고 #1d2f4c 은 폐기했다. * 이제 이 파일과 DESIGN.md 는 같은 값을 말한다. * * 명도비 교정 (2026-08-19 사용자 승인) — WCAG 2.1 AA 본문 4.5:1 미달분: * 라이트 --semantic-success #0f8a5f → #0e835a canvas 4.36→4.76 · canvas-soft 4.12→4.50 * 라이트 --chart-2 #0f8a5f → #0e835a (chart-2 = semantic-success 규약 유지) * 라이트 --ink-mute-2 #64748d → #63738c canvas-soft 4.49→4.56 * 라이트 --ink-placeholder #94a3b8 → #637896 canvas 2.56→4.51 * 다크 --ink-placeholder #6f819e → #7788a3 canvas 4.11→4.51 * 다크 --primary #8b7dff → #8c7fff surface-inset 4.42→4.51 * 다크 --chart-1 #8b7dff → #8c7fff (chart-1 = primary 규약 유지) * 전부 HSL 색상환(H)·채도(S)를 고정하고 명도(L)만 움직였다 — 브랜드 인상은 그대로다. * 실측은 `test_theme.py` 의 명도비 전수 검사(TEXT_ON_SURFACE)가 강제한다. * * ⚠ 아래 두 블록은 **선언 목록이 완전히 같아야 한다.** CSS 만으로는 미디어쿼리 조건과 * 속성 선택자를 한 선택자로 묶을 수 없어 불가피하게 두 번 적는다. 드리프트는 * `test_theme.py::test_the_two_dark_blocks_declare_exactly_the_same_values` 가 막는다. * ------------------------------------------------------------------------- */ /* (1) 시스템 설정 따름 — 명시적으로 라이트를 고른 경우에만 비켜난다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary: #8c7fff; --primary-deep: #c9c2ff; --primary-press: #7d70f5; --primary-soft: #a396ff; --primary-subdued: #2f2a63; --on-primary: #0b1524; --canvas: #12203a; --canvas-soft: #0b1524; --canvas-sunken: #0d1a2e; --canvas-cream: #2c261c; --surface-inset: #182a48; --scrim: rgba(3, 8, 16, 0.7); --hairline-soft: #24395c; --hairline: #2b4570; --hairline-table: #32507a; --hairline-input: #4a71ab; --ink: #e6edf7; --ink-secondary: #c6d2e4; --ink-mute: #9fb0c9; --ink-mute-2: #93a4bf; --ink-placeholder: #7788a3; --tint-indigo: #262348; --tint-indigo-ink: #b3a8ff; --tint-sky: #1d3244; --tint-sky-ink: #9dc9ee; --tint-mint: #193328; --tint-mint-ink: #8ddcae; --tint-amber: #352a18; --tint-amber-ink: #e8c07a; --tint-rose: #371a24; --tint-rose-ink: #f0a2bd; --tint-gray: #222a35; --tint-gray-ink: #a9b8cd; --semantic-success: #3fca92; --semantic-warning: #d9a44e; --semantic-error: #ff7d9c; --chart-1: #8c7fff; --chart-2: #3fca92; --chart-3: #d9a44e; --chart-4: #4fb0ee; --chart-5: #ff5f8d; --mesh-apricot: #2e241f; --mesh-lavender: #272235; --mesh-rose: #322029; --elevation-card: none; --elevation-raised: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --elevation-overlay: 0 16px 48px -8px rgba(0, 0, 0, 0.6); --logo-standard-display: none; --logo-reversed-display: block; } } /* (2) 명시 선택 — 시스템 설정을 덮는다. */ :root[data-theme="dark"] { color-scheme: dark; --primary: #8c7fff; --primary-deep: #c9c2ff; --primary-press: #7d70f5; --primary-soft: #a396ff; --primary-subdued: #2f2a63; --on-primary: #0b1524; --canvas: #12203a; --canvas-soft: #0b1524; --canvas-sunken: #0d1a2e; --canvas-cream: #2c261c; --surface-inset: #182a48; --scrim: rgba(3, 8, 16, 0.7); --hairline-soft: #24395c; --hairline: #2b4570; --hairline-table: #32507a; --hairline-input: #4a71ab; --ink: #e6edf7; --ink-secondary: #c6d2e4; --ink-mute: #9fb0c9; --ink-mute-2: #93a4bf; --ink-placeholder: #7788a3; --tint-indigo: #262348; --tint-indigo-ink: #b3a8ff; --tint-sky: #1d3244; --tint-sky-ink: #9dc9ee; --tint-mint: #193328; --tint-mint-ink: #8ddcae; --tint-amber: #352a18; --tint-amber-ink: #e8c07a; --tint-rose: #371a24; --tint-rose-ink: #f0a2bd; --tint-gray: #222a35; --tint-gray-ink: #a9b8cd; --semantic-success: #3fca92; --semantic-warning: #d9a44e; --semantic-error: #ff7d9c; --chart-1: #8c7fff; --chart-2: #3fca92; --chart-3: #d9a44e; --chart-4: #4fb0ee; --chart-5: #ff5f8d; --mesh-apricot: #2e241f; --mesh-lavender: #272235; --mesh-rose: #322029; --elevation-card: none; --elevation-raised: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --elevation-overlay: 0 16px 48px -8px rgba(0, 0, 0, 0.6); --logo-standard-display: none; --logo-reversed-display: block; }