/** * Shadow System * * Phase 1.5: Shadow 변수화 * 작성일: 2025-10-24 * 업데이트: 2025-12-08 (RGB 변수 전환) * * 현대적인 shadow 시스템 (Tailwind/Material inspired) * 모든 rgba 값은 RGB 변수를 사용하여 테마 지원 */ :root { /* ======================================== Shadow용 RGB 값 (colors.css 참조) ======================================== */ --shadow-color-black-rgb: var(--color-black-rgb, 0, 0, 0); --shadow-color-primary-rgb: var(--color-primary-500-rgb, 0, 123, 255); --shadow-color-primary-dark-rgb: var(--color-primary-600-rgb, 0, 86, 179); --shadow-color-danger-rgb: var(--color-danger-500-rgb, 220, 53, 69); --shadow-color-success-rgb: var(--color-success-500-rgb, 40, 167, 69); --shadow-color-warning-rgb: var(--color-warning-500-rgb, 255, 193, 7); --shadow-color-purple-rgb: var(--color-purple-500-rgb, 102, 126, 234); --shadow-color-blue-rgb: 59, 130, 246; /* Tailwind blue-500 */ --shadow-color-focus-rgb: var(--color-primary-500-rgb, 0, 123, 255); /* ======================================== Elevation Shadows (엘리베이션) ======================================== */ --shadow-xs: 0 1px 2px rgb(var(--shadow-color-black-rgb), 0.05); --shadow-sm: 0 2px 4px rgb(var(--shadow-color-black-rgb), 0.1); --shadow-sm-hover: 0 3px 6px rgb(var(--shadow-color-black-rgb), 0.15); --shadow-md: 0 4px 6px rgb(var(--shadow-color-black-rgb), 0.1); --shadow-lg: 0 10px 15px rgb(var(--shadow-color-black-rgb), 0.1); --shadow-xl: 0 20px 25px rgb(var(--shadow-color-black-rgb), 0.15); --shadow-2xl: 0 25px 50px rgb(var(--shadow-color-black-rgb), 0.25); /* ======================================== Inner Shadow (내부 그림자) ======================================== */ --shadow-inner: inset 0 2px 4px rgb(var(--shadow-color-black-rgb), 0.06); --shadow-inset-hairline: inset 0 1px 0 rgb(var(--shadow-color-black-rgb), 0.08); /* sticky 열 소프트 캐스트 — admin-list/treegrid/event-overall 공유 관용구 (D1 2026-07-25 승격) */ --shadow-sticky-cast-right: 8px 0 14px -20px rgb(var(--shadow-color-black-rgb), 0.18); --shadow-sticky-cast-left: -8px 0 14px -20px rgb(var(--shadow-color-black-rgb), 0.18); --shadow-sticky-cast-right-strong: 10px 0 18px -24px rgb(var(--shadow-color-black-rgb), 0.36); --shadow-sticky-cast-left-strong: -10px 0 18px -24px rgb(var(--shadow-color-black-rgb), 0.36); /* ======================================== Focus Shadows (포커스 - 접근성) ======================================== */ --shadow-focus: 0 0 0 3px rgb(var(--shadow-color-primary-rgb), 0.1); --shadow-focus-primary: 0 0 0 3px rgb(var(--shadow-color-primary-dark-rgb), 0.15); /* ======================================== Colored Shadows (컬러 그림자) ======================================== */ /* Primary */ --shadow-primary-sm: 0 2px 8px rgb(var(--shadow-color-primary-rgb), 0.1); --shadow-primary-sm-hover: 0 2px 8px rgb(var(--shadow-color-primary-rgb), 0.2); --shadow-primary: 0 4px 12px rgb(var(--shadow-color-primary-dark-rgb), 0.2); /* Danger */ --shadow-danger-sm: 0 2px 4px rgb(var(--shadow-color-danger-rgb), 0.3); --shadow-danger: 0 4px 12px rgb(var(--shadow-color-danger-rgb), 0.2); /* Success */ --shadow-success: 0 4px 12px rgb(var(--shadow-color-success-rgb), 0.2); /* Blue (Tailwind blue-500) - for date-picker, buttons */ --shadow-blue-sm: 0 2px 4px rgb(var(--shadow-color-blue-rgb), 0.3); --shadow-blue-sm-hover: 0 3px 6px rgb(var(--shadow-color-blue-rgb), 0.25); --shadow-blue-md: 0 2px 6px rgb(var(--shadow-color-blue-rgb), 0.4); --shadow-blue-lg: 0 2px 6px rgb(var(--shadow-color-blue-rgb), 0.5); /* --shadow-purple-sm/lg 미사용 제거 [TASK-040] */ /* Success glow - for file success states */ --shadow-color-success-glow-rgb: 76, 175, 80; --shadow-success-glow: 0 0 5px rgb(var(--shadow-color-success-glow-rgb), 0.3); /* ======================================== Button Shadows (버튼용) ======================================== */ --shadow-button: 0 2px 0 rgb(var(--shadow-color-primary-dark-rgb), 0.2); --shadow-button-hover: 0 4px 12px rgb(var(--shadow-color-black-rgb), 0.2); --shadow-button-hover-lg: 0 6px 16px rgb(var(--shadow-color-black-rgb), 0.3); --shadow-button-glow: 0 6px 20px rgb(var(--shadow-color-purple-rgb), 0.4); /* ======================================== Special Shadows (특수 효과) ======================================== */ --shadow-glow: 0 0 10px rgb(var(--shadow-color-focus-rgb), 0.8); /* ======================================== Card/Modal Shadows (카드/모달) ======================================== */ --shadow-card: 0 2px 8px rgb(var(--shadow-color-black-rgb), 0.08); --shadow-board-list-shell: 0 1px 2px rgb(var(--shadow-color-black-rgb), 0.04), 0 10px 24px rgb(var(--shadow-color-black-rgb), 0.03); --shadow-modal: 0 10px 40px rgb(var(--shadow-color-black-rgb), 0.15); /* 관리자 모달 전용 그림자 - colors.css에서 정위치 이동 (D1 2026-07-25) */ --ds-admin-modal-shadow: 0 22px 60px rgb(var(--color-black-rgb), 0.16), 0 2px 8px rgb(var(--color-black-rgb), 0.08); --shadow-modal-xl: 0 20px 60px rgb(var(--shadow-color-black-rgb), 0.5); --shadow-dropdown: 0 4px 16px rgb(var(--shadow-color-black-rgb), 0.12); /* ======================================== Phase 2 (cycle 27) — Modern Elevation (multi-layer) Apple Vision Pro / Linear / Vercel inspired depth ======================================== */ --shadow-elevated: 0 1px 2px rgb(var(--shadow-color-black-rgb), 0.06), 0 4px 8px rgb(var(--shadow-color-black-rgb), 0.06), 0 12px 24px rgb(var(--shadow-color-black-rgb), 0.08); --shadow-elevated-hover: 0 2px 4px rgb(var(--shadow-color-black-rgb), 0.08), 0 8px 16px rgb(var(--shadow-color-black-rgb), 0.08), 0 24px 48px rgb(var(--shadow-color-black-rgb), 0.10); --shadow-modal-glass: 0 4px 8px rgb(var(--shadow-color-black-rgb), 0.10), 0 16px 32px rgb(var(--shadow-color-black-rgb), 0.12), 0 32px 64px rgb(var(--shadow-color-black-rgb), 0.14); /* === Specular highlight (상단 1px 광택) === */ --highlight-top-inset: inset 0 1px 0 rgba(255, 255, 255, 0.15); --highlight-top-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.25); /* === Glassmorphism === */ --glass-bg-light: rgba(255, 255, 255, 0.72); --glass-bg-dark: rgba(20, 22, 28, 0.65); --glass-blur: blur(20px) saturate(1.6); --glass-border-light: 1px solid rgba(255, 255, 255, 0.18); --glass-border-dark: 1px solid rgba(255, 255, 255, 0.08); /* === Hover transitions === */ --hover-lift-1: translateY(-1px); --hover-lift-2: translateY(-2px); --hover-duration: 0.2s; --hover-easing: var(--ease-in-out); } /* === Phase 2 다크 모드 — shadow 강도 조정 === */ [data-theme="dark"] { --shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.25), 0 12px 24px rgba(0, 0, 0, 0.20); --shadow-elevated-hover: 0 2px 4px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.30), 0 24px 48px rgba(0, 0, 0, 0.25); --shadow-modal-glass: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 32px rgba(0, 0, 0, 0.35), 0 32px 64px rgba(0, 0, 0, 0.30); } /* ======================================== Phase 3 (cycle 28) — Atmospheric layer + Hover glow tokens ======================================== */ :root { /* === Atmospheric layer (라이트) — deeper → lighter === */ --color-layer-0: #ffffff; /* deepest (body) */ --color-layer-1: oklch(0.985 0.003 248); /* panel */ --color-layer-2: oklch(0.99 0.005 257); /* card / search-container 통일 */ --color-layer-3: #ffffff; /* element (input/btn) */ /* === Hover accent halo === */ --hover-glow-accent: 0 0 16px color-mix(in oklch, var(--color-accent-indicator, var(--color-primary-500)) 18%, transparent); --hover-glow-accent-strong: 0 0 24px color-mix(in oklch, var(--color-accent-indicator, var(--color-primary-500)) 28%, transparent); /* === Hover stripe (사이드바/메뉴 항목) === */ --hover-stripe-color: var(--color-primary-500); --hover-bg-warm: color-mix(in oklch, var(--color-warning-500) 4%, transparent); --hover-bg-primary-soft: color-mix(in oklch, var(--color-primary-500) 5%, transparent); } /* === 다크 모드 atmospheric layer === */ [data-theme="dark"] { --color-layer-0: #1a1d24; --color-layer-1: #1d2028; --color-layer-2: #20232b; --color-layer-3: #232631; /* hover-warm-bg 다크 톤 조정 */ --hover-bg-warm: color-mix(in oklch, var(--color-warning-500) 6%, transparent); }