/* ============================================================================ metaOS 그룹웨어 — variables.css ---------------------------------------------------------------------------- 디자인 토큰 정의. 모든 CSS 파일은 이 파일을 먼저 import 해야 합니다. color identity: INE 공식 CI 마크 추출 - primary #2C3997 (로고 "ne" 네이비) - accent #04A59F (로고 "i" 청록) 적용 위치: /opt/metaOS/static/css/variables.css Django 설정: base.html 의 에서 가장 먼저 link ============================================================================ */ :root { color-scheme: light; /* 네이티브 위젯(달력·셀렉트 팝업·스크롤바) 라이트 */ /* ─────────── 1. Brand Colors — INE Primary (네이비) ─────────── */ --ine-primary: #2C3997; /* 메인 — 사이드바, 헤더, CTA 버튼 */ --ine-primary-900: #161D4D; /* 가장 진함 — 인쇄용 검정 대체 */ --ine-primary-700: #1F2A7A; /* hover */ --ine-primary-500: #3D4DB8; /* link */ --ine-primary-300: #7B86D0; --ine-primary-200: #A7B0E5; /* 선택 배경 */ --ine-primary-100: #D4D9F0; --ine-primary-50: #E8EAF6; /* 테이블 짝수행, hover 배경 */ /* ─────────── 2. Brand Colors — INE Accent (청록) ─────────── */ --ine-accent: #04A59F; /* 알림 뱃지, 기술팀 카테고리 */ --ine-accent-700: #057B77; /* hover */ --ine-accent-400: #26C6BF; --ine-accent-200: #B2DFDB; --ine-accent-50: #E0F2F1; /* ─────────── 3. Approval Status — 결재 상태 7종 ─────────── */ --status-draft-fg: #424242; --status-draft-bg: #F5F5F5; --status-draft-border: #9E9E9E; --status-pending-fg: #92400E; --status-pending-bg: #FFF8E1; --status-pending-border: #F59E0B; --status-progress-fg: #1E3A8A; --status-progress-bg: #DBEAFE; --status-progress-border: #3B82F6; --status-approved-fg: #065F46; --status-approved-bg: #D1FAE5; --status-approved-border: #10B981; --status-rejected-fg: #991B1B; --status-rejected-bg: #FEE2E2; --status-rejected-border: #EF4444; --status-completed-fg: #312E81; --status-completed-bg: #E0E7FF; --status-completed-border:#6366F1; --status-recalled-fg: #581C87; --status-recalled-bg: #F3E8FF; --status-recalled-border: #A855F7; --status-cancelled-fg: #1E293B; --status-cancelled-bg: #F1F5F9; --status-cancelled-border:#64748B; /* ─────────── 4. Document Category — 카테고리 4종 ─────────── */ --doc-sal: var(--ine-primary); /* 영업 (SAL-*) → 네이비 */ --doc-sal-bg: var(--ine-primary-50); --doc-tec: var(--ine-accent); /* 기술 (TEC-*) → 청록 */ --doc-tec-bg: var(--ine-accent-50); --doc-adm: #6366F1; /* 행정 (ADM-*) → 인디고 */ --doc-adm-bg: #E0E7FF; --doc-hr: #A855F7; /* 인사 (LEAVE 등) → 퍼플 */ --doc-hr-bg: #F3E8FF; /* ─────────── 5. Neutral — 회색 계열 ─────────── */ --gray-900: #111827; /* 본문 텍스트 */ --gray-800: #1F2937; --gray-700: #374151; --gray-600: #4B5563; /* 보조 텍스트 */ --gray-500: #6B7280; --gray-400: #9CA3AF; /* 비활성 */ --gray-300: #D1D5DB; /* 테두리 */ --gray-200: #E5E7EB; /* 구분선 */ --gray-100: #F3F4F6; /* 배경 */ --gray-50: #F9FAFB; /* 페이지 배경 */ --white: #FFFFFF; /* ─────────── 6. Semantic — 의미 색상 ─────────── */ --bg-body: var(--gray-50); --bg-card: var(--white); --bg-sidebar: var(--ine-primary); --bg-sidebar-hover: var(--ine-primary-700); --text-base: var(--gray-900); --text-muted: var(--gray-600); --text-disabled: var(--gray-400); --text-on-primary:var(--white); --text-link: var(--ine-primary-500); --border-default: var(--gray-300); --border-strong: var(--gray-500); --border-focus: var(--ine-primary); /* ─────────── 7. Spacing — 8px 그리드 ─────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─────────── 8. Radius ─────────── */ --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; /* ─────────── 9. Shadow ─────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.08); /* ─────────── 10. Typography ─────────── */ --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif; --font-mono: 'D2Coding', 'Source Code Pro', 'Courier New', monospace; --fs-xs: 13px; /* v1.3: 캡션·타임스탬프 12→13 */ --fs-sm: 14px; /* v1.3: 표 셀·밀집 보조 13→14 (표셀 14 유지 기준) */ --fs-base: 16px; /* v1.3: 본문·폼 기본 14→16 ★ */ --fs-md: 16px; /* 현 고유(동봉 없음) — 유지 */ --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* 현 고유(동봉 없음) — 유지 */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; /* ─────────── 11. Layout ─────────── */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --header-height: 60px; --content-max-width: 1600px; /* ─────────── 12. Z-index ─────────── */ --z-content: 1; --z-sticky: 10; --z-sidebar: 40; --z-header: 50; --z-dropdown: 100; --z-modal: 1000; --z-toast: 2000; /* ─────────── 13. Transition ─────────── */ --transition-fast: 0.15s ease; --transition: 0.2s ease; --transition-slow: 0.3s ease; /* ─────────── 14. Breakpoints (참조용, 미디어쿼리에 직접 사용 불가) ─────────── */ /* sm: 480px / md: 768px / lg: 980px / xl: 1280px */ /* ========================================================================== v1.3 가산 (DSN-APPLY v1.3 / W1 머지) — 가산 전용. 기존 토큰 삭제·개명 없음. · W3(색 의미화 치환) 보류 상태이므로 아래 --color-* 시맨틱은 당장 컴포넌트가 참조하지 않는 '휴면 토큰'. 라이트 화면 무변화. · 충돌 회피: --radius-md/-lg, --lh-tight, --shadow-* 는 기존 값 유지(미갱신). ========================================================================== */ /* (1) Primitive 보강 — 회색 양 끝(시맨틱·다크가 참조). 기존 --gray-50~900 값은 유지 */ --gray-0: #FFFFFF; --gray-950: #0B0F1A; /* (2) 결재 상태 8종 (primitive) — --color-status-* 가 참조. 기존 --status-*-fg/bg/border 보존 */ --st-draft: #9E9E9E; --st-pending: #F59E0B; --st-progress: #3B82F6; --st-approved: #10B981; --st-rejected: #EF4444; --st-completed: #6366F1; --st-recalled: #A855F7; --st-cancelled: #64748B; /* (3) 전통색 (범주형 전용) + 각 -ink(그 색 위 글자색, WCAG 4.5:1) */ --trad-chwiram: #68C7C1; --trad-chwiram-ink: #134542; --trad-haenghwang: #F1A862; --trad-haenghwang-ink: #5C3B14; --trad-cheonghyeon: #566A8E; --trad-cheonghyeon-ink: #FFFFFF; --trad-jangdan: #E16350; --trad-jangdan-ink: #3A1610; --trad-byeokcheong: #4F90CC; --trad-byeokcheong-ink: #102234; --trad-byeokja: #8C9ED9; --trad-byeokja-ink: #2A3350; --trad-chuhyang: #C19287; --trad-chuhyang-ink: #41302C; --trad-chunyurok: #DCEAA2; --trad-chunyurok-ink: #474E32; --trad-seolbaek: #E2E7E4; --trad-seolbaek-ink: #2C2C2A; /* (4) Layer 2 — Semantic (휴면: W3 보류로 컴포넌트 미참조) */ --color-surface: var(--gray-0); --color-surface-sunken: var(--gray-50); --color-surface-raised: var(--gray-0); --color-surface-inverse: var(--ine-primary); --color-surface-tint: var(--trad-seolbaek); --color-text: var(--gray-900); /* 2026-08-14 식별성 — 보조/캡션 색을 각각 한 단계 진하게. 기존 muted=gray-500 은 흰 배경 대비 4.83:1(AA 최저선), subtle=gray-400 은 2.54:1(AA 미달)이라 좌측 메뉴·메일 목록처럼 muted 를 본문급으로 쓰는 곳에서 흐릿함이 두드러졌다. → muted 7.56:1 / subtle 4.83:1 로 상향. 다크 테마는 별도 값이라 영향 없음. */ --color-text-muted: var(--gray-600); --color-text-subtle: var(--gray-500); --color-text-on-action: var(--gray-0); --color-text-on-inverse: var(--gray-0); --color-action: var(--ine-primary); --color-action-hover: var(--ine-primary-700); --color-action-subtle: var(--ine-primary-50); --color-action-solid: var(--ine-primary); /* 배경 전용(버튼·배지, 흰 글자 동반) */ --color-action-solid-hover: var(--ine-primary-700); --color-link: var(--ine-primary-500); --color-accent: var(--ine-accent); --color-accent-hover: var(--ine-accent-700); --color-accent-subtle: var(--ine-accent-50); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-divider: var(--gray-100); --color-focus-ring: var(--ine-primary-300); --color-info: var(--st-progress); --color-success: var(--st-approved); --color-warning: var(--st-pending); --color-danger: var(--st-rejected); --color-status-draft: var(--st-draft); --color-status-pending: var(--st-pending); --color-status-progress: var(--st-progress); --color-status-approved: var(--st-approved); --color-status-rejected: var(--st-rejected); --color-status-completed: var(--st-completed); --color-status-recalled: var(--st-recalled); --color-status-cancelled: var(--st-cancelled); /* (5) 범주형 — 칩 배경 --color-cat-N, 글자 --color-cat-N-on (W4 유틸이 참조) */ --color-cat-1: var(--trad-chwiram); --color-cat-1-on: var(--trad-chwiram-ink); --color-cat-2: var(--trad-haenghwang); --color-cat-2-on: var(--trad-haenghwang-ink); --color-cat-3: var(--trad-cheonghyeon); --color-cat-3-on: var(--trad-cheonghyeon-ink); --color-cat-4: var(--trad-jangdan); --color-cat-4-on: var(--trad-jangdan-ink); --color-cat-5: var(--trad-byeokcheong); --color-cat-5-on: var(--trad-byeokcheong-ink); --color-cat-6: var(--trad-byeokja); --color-cat-6-on: var(--trad-byeokja-ink); --color-cat-7: var(--trad-chuhyang); --color-cat-7-on: var(--trad-chuhyang-ink); --color-cat-8: var(--trad-chunyurok); --color-cat-8-on: var(--trad-chunyurok-ink); /* (6) 스케일 보강 — 충돌 없는 신규만. --radius-full은 W4 유틸용(기존 --radius-pill 유지) */ --lh-base: 1.7; /* 본문 행간 (휴면; 기존 --lh-normal/loose 보존) */ --radius-full: 999px; --fw-semibold: 600; /* W4 유틸용 별칭(기존 --fw-semi 보존) */ /* (7) Motion — reduced-motion 이 --dur-* 를 재정의 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; } /* ============================================================================ DARK THEME — Semantic 만 재정의 (컴포넌트 CSS 무수정). 적용: ※ W3 보류 상태라 컴포넌트는 아직 --color-* 미참조 → 다크는 휴면(켜도 부분 적용). v1.3 토큰을 미리 심어두어 후속 W3 이행 시 무수정 전환 가능. ※ --shadow-1/2/3 는 본 프로젝트 미사용(기존 --shadow-* 유지)이라 다크에서도 재정의 생략. ============================================================================ */ [data-theme="dark"] { color-scheme: dark; /* 네이티브 위젯(달력·셀렉트 팝업·스크롤바) 다크 */ --color-surface: var(--gray-900); --color-surface-sunken: var(--gray-950); --color-surface-raised: var(--gray-800); --color-surface-inverse: var(--ine-primary-900); --color-surface-tint: var(--gray-800); --color-text: #ECEDEF; --color-text-muted: var(--gray-400); --color-text-subtle: #8B93A7; /* 다크 가독성 — gray-500 보다 밝게(타임스탬프·빈상태) */ --color-text-on-action: var(--gray-0); --color-text-on-inverse: #ECEDEF; --color-action: var(--ine-primary-300); /* 글자·링크·보더용 — 다크에서 밝게(가독성) */ --color-action-hover: var(--ine-primary-200); --color-action-subtle: rgba(61, 77, 184, 0.18); --color-action-solid: var(--ine-primary-500); /* 배경 전용 — 흰 글자 대비 유지(밝히지 않음) */ --color-action-solid-hover: var(--ine-primary-700); --color-link: var(--ine-primary-300); --color-accent: var(--ine-accent-400); --color-accent-hover: var(--ine-accent-200); --color-accent-subtle: rgba(38, 198, 191, 0.16); --color-border: var(--gray-700); --color-border-strong: var(--gray-600); --color-divider: var(--gray-800); --color-focus-ring: var(--ine-primary-300); /* v1.3 레거시 의미토큰 다크 오버라이드 — 구 의미층(bg/text/border 계열)을 참조하는 컴포넌트도 다크 전환되도록 재정의. white/text-on-primary 는 어두운 배경 위 글자라 유지. */ --bg-body: var(--gray-950); --bg-card: var(--gray-900); --bg-sidebar: var(--ine-primary-900); --bg-sidebar-hover: var(--ine-primary-700); --text-base: #ECEDEF; --text-muted: var(--gray-400); --text-disabled: var(--gray-500); --text-link: var(--ine-primary-300); --border-default: var(--gray-700); --border-strong: var(--gray-600); --border-focus: var(--ine-primary-300); } /* ============================================================================ 접근성: 모션 최소화 환경 존중 ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }