/* ============================================================================ 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 { /* ─────────── 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: 12px; /* 최소 글자 크기 12px 정책 (기존 11px → 상향) */ --fs-sm: 13px; --fs-base: 14px; /* 보통 본문 14px */ --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 */ }