/* ============================================================================ oc-tokens.css — OneCast 디자인 토큰 (제품 배포본) 원본: design/tokens.css v1.0.0 (2026-08-30 · ui-designer) 사본: src/main/resources/static/css/oc-tokens.css (2026-08-30 · web-publisher) --------------------------------------------------------------------------- ※ 값 무수정 원본 복사본이다. 토큰 값을 바꿀 때는 반드시 design/tokens.css → Docs/05_디자인시스템.md 토큰 표 → 이 파일 순으로 함께 갱신한다. ※ 이 파일 다음에 oc-components.css 를 로드한다(변수 선언이 먼저여야 한다). ========================================================================== */ /* ============================================================================ OneCast Design Tokens v1.0.0 (2026-08-30) 단일 원본(Single Source of Truth). 모든 컴포넌트는 이 변수만 사용한다. - :root, [data-theme="light"] = 라이트 글로스(앱 기본) - [data-theme="dark"] = 다크 글로스(랜딩 기본). 어떤 요소에든 붙일 수 있다(부분 테마 — 다크 페이지 안의 라이트 카드 등). - 값을 바꿀 때는 Docs/05_디자인시스템.md 토큰 표와 함께 갱신한다. - 외부 폰트/CDN 금지(CSP default-src 'self'). Pretendard 는 설치돼 있으면 사용, 없으면 시스템 폴백. ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* ---------- 1. 서피스 · 텍스트 · 경계 ---------- */ --oc-bg: #F3F5FA; --oc-bg-canvas: radial-gradient(1100px 560px at 12% -8%, #DCE6FF 0%, rgba(220,230,255,0) 60%), radial-gradient(900px 520px at 92% -4%, #EBE3FF 0%, rgba(235,227,255,0) 58%), #F3F5FA; --oc-surface: #FFFFFF; --oc-surface-2: #F7F9FD; --oc-surface-3: #EDF1F8; --oc-surface-inverse: #0F172A; --oc-text: #0F172A; /* 본문 17.85:1 on surface */ --oc-text-2: #3F4A5C; /* 보조 8.95:1 */ --oc-text-3: #5B6779; /* 캡션 5.74:1 */ --oc-text-inverse: #EDF1FA; --oc-text-on-accent: #FFFFFF; --oc-border: #D5DCE8; --oc-border-strong: #B9C3D4; --oc-divider: #E6EBF3; /* ---------- 2. 브랜드 ---------- */ --oc-primary: #2456E6; /* 링크·강조 텍스트 5.92:1 on white */ --oc-primary-hover: #1B45C4; --oc-primary-active: #163A9F; --oc-primary-soft: #E6EDFF; --oc-primary-soft-text: #1E40AF; --oc-accent-from: #2456E6; /* 흰 글자 5.92:1 */ --oc-accent-to: #6C2BD9; /* 흰 글자 7.03:1 */ --oc-accent-gradient: linear-gradient(135deg, #2456E6 0%, #6C2BD9 100%); --oc-accent-gradient-h: linear-gradient(90deg, #2456E6 0%, #6C2BD9 100%); --oc-accent-glow: rgba(36,86,230,.32); --oc-accent-text-gradient: linear-gradient(90deg, #2456E6 0%, #6C2BD9 100%); /* 큰 제목 그라데이션 글자(라이트 5.92:1 이상) */ --oc-violet-text: #5B21B6; /* ---------- 3. 상태(시맨틱) ---------- */ --oc-success-bg: #DCFCE7; --oc-success-text: #15803D; --oc-success-solid: #16A34A; --oc-success-border: #A7E8BC; --oc-info-bg: #DBEAFE; --oc-info-text: #1E40AF; --oc-info-solid: #2456E6; --oc-info-border: #B7CFFB; --oc-warning-bg: #FEF3C7; --oc-warning-text: #92400E; --oc-warning-solid: #B45309; --oc-warning-border: #F5D889; --oc-danger-bg: #FEE2E2; --oc-danger-text: #B91C1C; --oc-danger-solid: #DC2626; --oc-danger-border: #F7B4B4; --oc-attention-bg: #FFEDD5; --oc-attention-text:#9A3412; --oc-attention-solid:#C2410C; --oc-attention-border:#F8C9A0; --oc-neutral-bg: #EEF2F7; --oc-neutral-text: #475467; --oc-neutral-solid: #667085; --oc-neutral-border: #D5DCE8; /* ---------- 4. 글래스 · 광택(하이그로시) ---------- */ --oc-glass-bg: rgba(255,255,255,.62); --oc-glass-border: rgba(255,255,255,.78); --oc-glass-ring: rgba(15,23,42,.06); --oc-glass-blur: 18px; --oc-glass-shadow: 0 12px 40px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.85); --oc-gloss-top: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 42%); --oc-gloss-inset: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(15,23,42,.06); --oc-sheen: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 48%, rgba(255,255,255,0) 52%); --oc-surface-gradient: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%); /* ---------- 5. 그림자 ---------- */ --oc-shadow-xs: 0 1px 2px rgba(15,23,42,.06); --oc-shadow-sm: 0 2px 6px -1px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05); --oc-shadow-md: 0 8px 24px -8px rgba(15,23,42,.16), 0 2px 6px -2px rgba(15,23,42,.08); --oc-shadow-lg: 0 20px 48px -16px rgba(15,23,42,.22), 0 6px 16px -8px rgba(15,23,42,.10); --oc-shadow-xl: 0 32px 80px -24px rgba(15,23,42,.28); --oc-shadow-accent: 0 10px 24px -10px rgba(36,86,230,.55); /* ---------- 6. 포커스 ---------- */ --oc-focus-ring: #2456E6; --oc-focus-halo: rgba(36,86,230,.22); /* ---------- 7. 타이포그래피 ---------- */ --oc-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif; --oc-font-mono: "JetBrains Mono", "SF Mono", Consolas, "D2Coding", "Courier New", monospace; --oc-fs-display: 48px; --oc-lh-display: 56px; /* 랜딩 히어로 (모바일 34/42) */ --oc-fs-h1: 32px; --oc-lh-h1: 40px; /* 모바일 28/36 */ --oc-fs-h2: 24px; --oc-lh-h2: 32px; --oc-fs-h3: 20px; --oc-lh-h3: 28px; --oc-fs-h4: 17px; --oc-lh-h4: 24px; --oc-fs-body: 16px; --oc-lh-body: 24px; --oc-fs-sm: 14px; --oc-lh-sm: 20px; --oc-fs-caption: 13px; --oc-lh-caption: 18px; --oc-fs-micro: 12px; --oc-lh-micro: 16px; --oc-fw-regular: 400; --oc-fw-medium: 500; --oc-fw-semibold: 600; --oc-fw-bold: 700; --oc-fw-heavy: 800; --oc-tracking-tight: -0.02em; --oc-tracking-normal: 0; --oc-tracking-wide: 0.04em; /* ---------- 8. 간격 (4px 베이스) ---------- */ --oc-sp-1: 4px; --oc-sp-2: 8px; --oc-sp-3: 12px; --oc-sp-4: 16px; --oc-sp-5: 20px; --oc-sp-6: 24px; --oc-sp-8: 32px; --oc-sp-10: 40px; --oc-sp-12: 48px; --oc-sp-16: 64px; --oc-sp-20: 80px; /* ---------- 9. 라운드 ---------- */ --oc-r-xs: 6px; --oc-r-sm: 8px; --oc-r-md: 12px; --oc-r-lg: 16px; --oc-r-xl: 20px; --oc-r-2xl: 28px; --oc-r-pill: 999px; /* ---------- 10. 모션 ---------- */ --oc-dur-1: 120ms; --oc-dur-2: 200ms; --oc-dur-3: 320ms; --oc-dur-4: 480ms; --oc-ease: cubic-bezier(.2, 0, 0, 1); --oc-ease-out: cubic-bezier(0, 0, .2, 1); --oc-ease-in: cubic-bezier(.4, 0, 1, 1); --oc-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ---------- 11. 레이아웃 ---------- */ --oc-container: 1200px; /* 랜딩 12컬럼 컨테이너 */ --oc-container-app: 1200px; /* 앱 본문 최대폭 */ --oc-container-admin: 1440px; --oc-gutter: 24px; /* 모바일 16px */ --oc-sidebar-w: 256px; --oc-sidebar-admin-w: 240px; --oc-header-h: 64px; --oc-tabbar-h: 64px; --oc-touch: 44px; /* 최소 터치 타깃 */ --oc-control-h: 48px; /* 입력·버튼 기본 높이 */ --oc-control-h-sm: 40px; /* 소형(데스크톱 보조). 터치 영역은 44px 확보 */ /* ---------- 12. z-index ---------- */ --oc-z-sticky: 100; --oc-z-dropdown: 200; --oc-z-modal: 300; --oc-z-toast: 400; } /* ============================================================================ 다크 글로스 ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --oc-bg: #0A0F1E; --oc-bg-canvas: radial-gradient(1100px 560px at 12% -8%, rgba(36,86,230,.30) 0%, rgba(36,86,230,0) 60%), radial-gradient(900px 520px at 92% -4%, rgba(108,43,217,.26) 0%, rgba(108,43,217,0) 58%), #0A0F1E; --oc-surface: #141D34; --oc-surface-2: #1A2540; --oc-surface-3: #22304F; --oc-surface-inverse: #F3F5FA; --oc-text: #EDF1FA; /* 14.79:1 on surface */ --oc-text-2: #B3BDD3; /* 8.87:1 */ --oc-text-3: #8E9AB5; /* 5.93:1 */ --oc-text-inverse: #0F172A; --oc-text-on-accent: #FFFFFF; --oc-border: rgba(255,255,255,.10); --oc-border-strong: rgba(255,255,255,.18); --oc-divider: rgba(255,255,255,.07); --oc-primary: #8AB0FF; /* 7.76:1 on surface */ --oc-primary-hover: #A6C3FF; --oc-primary-active: #C3D6FF; --oc-primary-soft: rgba(138,176,255,.14); --oc-primary-soft-text: #B7CEFF; --oc-accent-from: #2456E6; --oc-accent-to: #6C2BD9; --oc-accent-gradient: linear-gradient(135deg, #2456E6 0%, #6C2BD9 100%); --oc-accent-gradient-h: linear-gradient(90deg, #2456E6 0%, #6C2BD9 100%); --oc-accent-glow: rgba(36,86,230,.45); --oc-accent-text-gradient: linear-gradient(90deg, #8AB0FF 0%, #C4B0FF 100%); /* 다크 배경 위 글자용(7.76:1 / 8.77:1) */ --oc-violet-text: #C4B0FF; --oc-success-bg: #163726; --oc-success-text: #8AE6AC; --oc-success-solid: #34C77B; --oc-success-border: rgba(52,199,123,.35); --oc-info-bg: #172A55; --oc-info-text: #9DBFFF; --oc-info-solid: #6E9BFF; --oc-info-border: rgba(110,155,255,.35); --oc-warning-bg: #3A2A0F; --oc-warning-text: #F5C451; --oc-warning-solid: #F0B429; --oc-warning-border: rgba(240,180,41,.35); --oc-danger-bg: #3D1A1F; --oc-danger-text: #FDA4A4; --oc-danger-solid: #F26D6D; --oc-danger-border: rgba(242,109,109,.35); --oc-attention-bg: #3B2213; --oc-attention-text:#FDB47A; --oc-attention-solid:#F58A3C; --oc-attention-border:rgba(245,138,60,.35); --oc-neutral-bg: #232E47; --oc-neutral-text: #B9C3D9; --oc-neutral-solid: #8E9AB5; --oc-neutral-border: rgba(255,255,255,.12); --oc-glass-bg: rgba(20,29,52,.58); --oc-glass-border: rgba(255,255,255,.12); --oc-glass-ring: rgba(0,0,0,.35); --oc-glass-blur: 18px; --oc-glass-shadow: 0 16px 48px -16px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08); --oc-gloss-top: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%); --oc-gloss-inset: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35); --oc-sheen: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 48%, rgba(255,255,255,0) 52%); --oc-surface-gradient: linear-gradient(180deg, #1A2540 0%, #141D34 100%); --oc-shadow-xs: 0 1px 2px rgba(0,0,0,.35); --oc-shadow-sm: 0 2px 6px -1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3); --oc-shadow-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.35); --oc-shadow-lg: 0 20px 48px -16px rgba(0,0,0,.65), 0 6px 16px -8px rgba(0,0,0,.4); --oc-shadow-xl: 0 32px 80px -24px rgba(0,0,0,.75); --oc-shadow-accent: 0 10px 26px -10px rgba(36,86,230,.75); --oc-focus-ring: #8AB0FF; --oc-focus-halo: rgba(138,176,255,.28); } /* 모션 감소: 모든 트랜지션·애니메이션 지속시간을 0 으로 */ @media (prefers-reduced-motion: reduce) { :root { --oc-dur-1: 0ms; --oc-dur-2: 0ms; --oc-dur-3: 0ms; --oc-dur-4: 0ms; } }