/** * [디자인시스템_20260429] 만나관리 V7 — 디자인 토큰 * 파일: /opt/manna-v7-beta/app/css/design_tokens.css * * 목적: 색상·간격·폰트·반경 등 시각 속성을 CSS 변수로 중앙 정의. * 기존 값과 동일한 색상으로 정의 (시각 회귀 0). * 향후 테마 변경 시 이 파일만 수정하면 전체 적용. * * 사용법: * color: var(--color-primary); * padding: var(--space-2) var(--space-4); * font-size: var(--font-size-md); * border-radius: var(--radius-md); */ :root { /* ── 브랜드 색상 ── */ --color-primary: #1a237e; /* 만나 메인 브랜드 색 (사이드바·로그인) */ --color-primary-dark: #283593; /* hover 상태 */ --color-primary-light: rgba(255, 255, 255, 0.12); /* 사이드바 활성 배경 */ /* ── 상태 색상 ── */ --color-success: #0f7b3a; /* 정상·완료 */ --color-success-bg: #e8f5e9; /* 성공 배경 */ --color-warning: #b81d24; /* 경고·오류 (만나 브랜드 적색) */ --color-warning-bg: #ffeaea; /* 경고 배경 */ --color-info: #1565c0; /* 정보 */ --color-info-bg: #e3f2fd; /* 정보 배경 */ --color-neutral: #546e7a; /* 중립 */ --color-neutral-bg: #eceff1; /* 중립 배경 */ /* ── 텍스트 ── */ --color-text-primary: #333333; --color-text-secondary: #666666; --color-text-muted: #999999; --color-text-inverse: #ffffff; /* ── 경계·구분선 ── */ --color-border: #e0e0e0; --color-border-focus: #1a237e; /* ── 배경 ── */ --color-bg: #f7fafc; /* 앱 기본 배경 */ --color-bg-white: #ffffff; --color-bg-card: #ffffff; --color-bg-table-header: #f5f5f5; --color-bg-table-row-hover: #f0f4ff; /* ── 그림자 ── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18); /* ── 간격 ── */ --space-0: 0px; --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; /* ── 폰트 크기 ── */ --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px; /* 기본 */ --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-3xl: 32px; /* ── 폰트 굵기 ── */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ── 줄 높이 ── */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-loose: 1.75; /* ── 테두리 반경 ── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ── 전환 ── */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* ── z-index 레이어 ── */ --z-sidebar: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ── 레이아웃 ── */ --sidebar-width: 240px; --content-max-width: 1400px; --header-height: 56px; --table-row-height: 40px; /* ── 상태 배지 색상 (주문 상태) ── */ --status-draft-bg: #e8eaf6; --status-draft-text: #3949ab; --status-shipping-bg: #fff8e1; --status-shipping-text: #f57f17; --status-confirmed-bg: #e8f5e9; --status-confirmed-text: #2e7d32; --status-closed-bg: #eceff1; --status-closed-text: #546e7a; } /* ══════════════════════════════════════════════════════════════ * [다크모드_20260429] 만나관리 V7 — 다크 모드 토큰 * 파일: /opt/manna-v7-beta/app/css/design_tokens.css 에 추가됨 * * 적용 우선순위: * 1. 시스템 prefers-color-scheme: dark 자동 감지 * 2. 수동 토글 (localStorage: manna_theme) * ══════════════════════════════════════════════════════════════ */ /* 시스템 다크 모드 자동 감지 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #1a1a1a; --color-bg-white: #242424; --color-bg-card: #2a2a2a; --color-bg-table-header: #303030; --color-bg-table-row-hover: #2e3d4f; --color-text-primary: #e0e0e0; --color-text-secondary: #b0b0b0; --color-text-muted: #888888; --color-text-inverse: #1a1a1a; --color-border: #3a3a3a; --color-border-focus: #5c85d6; --color-primary: #4a8fff; --color-primary-dark: #3a7aee; --color-primary-light: rgba(74, 143, 255, 0.12); --color-success: #4ade80; --color-success-bg: #1a2e1e; --color-warning: #f87171; --color-warning-bg: #2d1515; --color-info: #60a5fa; --color-info-bg: #1a2233; --color-neutral: #9ca3af; --color-neutral-bg: #2a2a2a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --status-draft-bg: #252b4a; --status-draft-text: #93a4f5; --status-shipping-bg: #352c0e; --status-shipping-text: #fbbf24; --status-confirmed-bg: #1a2e1e; --status-confirmed-text: #4ade80; --status-closed-bg: #252525; --status-closed-text: #9ca3af; } } /* 수동 다크 모드 토글: */ :root[data-theme="dark"] { --color-bg: #1a1a1a; --color-bg-white: #242424; --color-bg-card: #2a2a2a; --color-bg-table-header: #303030; --color-bg-table-row-hover: #2e3d4f; --color-text-primary: #e0e0e0; --color-text-secondary: #b0b0b0; --color-text-muted: #888888; --color-text-inverse: #1a1a1a; --color-border: #3a3a3a; --color-border-focus: #5c85d6; --color-primary: #4a8fff; --color-primary-dark: #3a7aee; --color-primary-light: rgba(74, 143, 255, 0.12); --color-success: #4ade80; --color-success-bg: #1a2e1e; --color-warning: #f87171; --color-warning-bg: #2d1515; --color-info: #60a5fa; --color-info-bg: #1a2233; --color-neutral: #9ca3af; --color-neutral-bg: #2a2a2a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --status-draft-bg: #252b4a; --status-draft-text: #93a4f5; --status-shipping-bg: #352c0e; --status-shipping-text: #fbbf24; --status-confirmed-bg: #1a2e1e; --status-confirmed-text: #4ade80; --status-closed-bg: #252525; --status-closed-text: #9ca3af; } /* 수동 라이트 모드 강제: */ :root[data-theme="light"] { --color-bg: #f7fafc; --color-bg-white: #ffffff; --color-bg-card: #ffffff; --color-bg-table-header: #f5f5f5; --color-bg-table-row-hover: #f0f4ff; --color-text-primary: #333333; --color-text-secondary: #666666; --color-text-muted: #999999; --color-text-inverse: #ffffff; --color-border: #e0e0e0; --color-border-focus: #1a237e; --color-primary: #1a237e; --color-primary-dark: #283593; --color-primary-light: rgba(255, 255, 255, 0.12); --color-success: #0f7b3a; --color-success-bg: #e8f5e9; --color-warning: #b81d24; --color-warning-bg: #ffeaea; --color-info: #1565c0; --color-info-bg: #e3f2fd; --color-neutral: #546e7a; --color-neutral-bg: #eceff1; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18); } /* 다크 모드에서 기본 배경·글자색 body에 적용 */ body { background-color: var(--color-bg); color: var(--color-text-primary); transition: background-color var(--transition-normal), color var(--transition-normal); }