/** * MindRead Design Tokens * 통합 디자인 시스템 변수 정의 * * 테마 사용법: * - 사용자 페이지: 기본 (data-theme 없음) * - 관리자 페이지: */ :root { /* ======================================== * Brand Colors (공통 브랜드 컬러) * ======================================== */ --brand-pink: #FF6B9D; --brand-pink-light: #FFB8D0; --brand-pink-dark: #E84A7B; --brand-purple: #9D8DF1; --brand-purple-light: #B8ACFF; --brand-purple-dark: #7B6AD9; --brand-indigo: #6366F1; --brand-indigo-light: #818CF8; --brand-indigo-dark: #4F46E5; --brand-yellow: #FFD93D; /* ======================================== * Semantic Colors (공통) * ======================================== */ --color-success: #10B981; --color-success-light: #34D399; --color-warning: #F59E0B; --color-warning-light: #FBBF24; --color-error: #EF4444; --color-error-light: #F87171; --color-info: #3B82F6; --color-info-light: #60A5FA; /* ======================================== * User Theme (Light/Pink) - Default * ======================================== */ /* Primary */ --color-primary: var(--brand-pink); --color-primary-light: var(--brand-pink-light); --color-primary-dark: var(--brand-pink-dark); --color-primary-rgb: 255, 107, 157; /* Secondary */ --color-secondary: var(--brand-purple); --color-secondary-light: var(--brand-purple-light); --color-secondary-dark: var(--brand-purple-dark); /* Accent */ --color-accent: var(--brand-yellow); /* Background */ --color-bg: #FFF9F5; --color-bg-alt: #FFF0F5; --color-bg-subtle: #F3EEFF; --color-bg-card: rgba(255, 255, 255, 0.95); --color-bg-overlay: rgba(0, 0, 0, 0.5); /* Text */ --color-text: #2D2D3A; --color-text-secondary: #4A4A5A; --color-text-muted: #6B6B7B; --color-text-subtle: #9B9BAB; --color-text-inverse: #FFFFFF; /* Border */ --color-border: rgba(255, 107, 157, 0.15); --color-border-subtle: rgba(0, 0, 0, 0.06); --color-border-focus: var(--brand-pink); /* Shadow */ --shadow-color: rgba(255, 107, 157, 0.1); /* ======================================== * Legacy Compatibility (기존 변수명 호환) * ======================================== */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --secondary: var(--color-secondary); --accent: var(--color-accent); --bg-cream: var(--color-bg); --bg-pink: var(--color-bg-alt); --bg-purple: var(--color-bg-subtle); --text-dark: var(--color-text); --text-light: var(--color-text-muted); /* ======================================== * Typography * ======================================== */ --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Noto Serif KR', 'Playfair Display', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 48px; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* ======================================== * Spacing * ======================================== */ --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; --space-20: 80px; /* ======================================== * Border Radius * ======================================== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ======================================== * Shadows * ======================================== */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --shadow-primary: 0 8px 24px var(--shadow-color); /* ======================================== * Transitions * ======================================== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* ======================================== * Z-Index * ======================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; /* ======================================== * Layout * ======================================== */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; } /* ======================================== * Admin Theme (Dark/Indigo) * 로 활성화 * ======================================== */ [data-theme="admin"] { /* Primary - Indigo */ --color-primary: var(--brand-indigo); --color-primary-light: var(--brand-indigo-light); --color-primary-dark: var(--brand-indigo-dark); --color-primary-rgb: 99, 102, 241; /* Secondary - Purple (공유) */ --color-secondary: var(--brand-purple); /* Accent - Pink (브랜드 연결) */ --color-accent: var(--brand-pink); /* Background - Dark */ --color-bg: #0a0a0f; --color-bg-alt: #13131a; --color-bg-subtle: #1a1a25; --color-bg-card: rgba(255, 255, 255, 0.02); --color-bg-overlay: rgba(0, 0, 0, 0.8); /* Text - Light on Dark */ --color-text: #FFFFFF; --color-text-secondary: rgba(255, 255, 255, 0.8); --color-text-muted: rgba(255, 255, 255, 0.6); --color-text-subtle: rgba(255, 255, 255, 0.4); --color-text-inverse: #0a0a0f; /* Border - Subtle */ --color-border: rgba(255, 255, 255, 0.1); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-focus: var(--brand-indigo); /* Shadow */ --shadow-color: rgba(99, 102, 241, 0.2); /* Legacy */ --primary: var(--color-primary); --primary-light: var(--color-primary-light); --bg-cream: var(--color-bg); --text-dark: var(--color-text); --text-light: var(--color-text-muted); } /* ======================================== * Common Reset & Base Styles * ======================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); word-break: keep-all; overflow-wrap: break-word; } /* ======================================== * Common Utility Classes * ======================================== */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-muted { color: var(--color-text-muted); } .text-success { color: var(--color-success); } .text-error { color: var(--color-error); } .text-center { text-align: center; } .bg-primary { background: var(--color-bg); } .bg-alt { background: var(--color-bg-alt); } .bg-card { background: var(--color-bg-card); } /* ======================================== * Common Component Styles * ======================================== */ /* Primary Button */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-8); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-text-inverse); border: none; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-bold); cursor: pointer; box-shadow: var(--shadow-primary); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--shadow-color); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Secondary Button */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--color-bg-card); color: var(--color-primary); border: 2px solid var(--color-primary-light); border-radius: var(--radius-full); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; transition: all var(--transition-normal); } .btn-secondary:hover { background: var(--color-bg-alt); border-color: var(--color-primary); } /* Card Component */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); } /* Loading Spinner */ .loading-spinner { width: 24px; height: 24px; border: 3px solid var(--color-primary-light); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Toast Notification */ .toast { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%) translateY(100px); padding: var(--space-4) var(--space-6); background: var(--color-text); color: var(--color-text-inverse); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--font-medium); box-shadow: var(--shadow-lg); opacity: 0; transition: all var(--transition-normal); z-index: var(--z-tooltip); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.success { background: var(--color-success); } .toast.error { background: var(--color-error); } .toast.warning { background: var(--color-warning); } .toast.info { background: var(--color-info); } /* ======================================== * Common Animations * ======================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-in { animation: fadeIn var(--transition-normal) ease-out; } .animate-fade-in-up { animation: fadeInUp var(--transition-slow) ease-out; } .animate-fade-in-down { animation: fadeInDown var(--transition-slow) ease-out; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-float { animation: float 3s ease-in-out infinite; } /* ======================================== * Skeleton Loading System * ======================================== */ .skeleton { background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-alt) 50%, var(--color-bg-subtle) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* Skeleton 컨테이너 - 실제 콘텐츠 숨김 */ .skeleton-container { position: relative; } .skeleton-container.loading > *:not(.skeleton-overlay) { visibility: hidden; } .skeleton-container.loading .skeleton-overlay { display: block; } .skeleton-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Skeleton 텍스트 라인 */ .skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: var(--radius-sm); } .skeleton-text.title { height: 1.5em; width: 70%; } .skeleton-text.subtitle { height: 1.2em; width: 50%; } .skeleton-text.short { width: 30%; } .skeleton-text.medium { width: 60%; } .skeleton-text.long { width: 90%; } /* Skeleton 아바타/이미지 */ .skeleton-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); } .skeleton-avatar.sm { width: 32px; height: 32px; } .skeleton-avatar.lg { width: 64px; height: 64px; } .skeleton-image { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); } .skeleton-image.square { aspect-ratio: 1; } .skeleton-image.portrait { aspect-ratio: 3/4; } /* Skeleton 카드 */ .skeleton-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } /* 스토리 카드 Skeleton */ .skeleton-story-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; } .skeleton-story-card .skeleton-image { border-radius: 0; aspect-ratio: 4/3; } .skeleton-story-card .skeleton-content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } /* 버튼 Skeleton */ .skeleton-button { height: 44px; width: 120px; border-radius: var(--radius-full); } .skeleton-button.full { width: 100%; } /* Skeleton 그리드 */ .skeleton-grid { display: grid; gap: var(--space-4); } .skeleton-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .skeleton-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 767px) { .skeleton-grid.cols-2, .skeleton-grid.cols-3 { grid-template-columns: 1fr; } } /* Skeleton 애니메이션 지연 (stagger effect) */ .skeleton-card:nth-child(1), .skeleton-story-card:nth-child(1) { animation-delay: 0s; } .skeleton-card:nth-child(2), .skeleton-story-card:nth-child(2) { animation-delay: 0.1s; } .skeleton-card:nth-child(3), .skeleton-story-card:nth-child(3) { animation-delay: 0.2s; } .skeleton-card:nth-child(4), .skeleton-story-card:nth-child(4) { animation-delay: 0.3s; } .skeleton-card:nth-child(5), .skeleton-story-card:nth-child(5) { animation-delay: 0.4s; } .skeleton-card:nth-child(6), .skeleton-story-card:nth-child(6) { animation-delay: 0.5s; } /* 콘텐츠 로드 완료 시 fade-in */ .skeleton-container:not(.loading) > *:not(.skeleton-overlay) { animation: fadeIn 0.3s ease-out; } /* ======================================== * Image Optimization Utilities * ======================================== */ /* 반응형 이미지 컨테이너 */ .img-container { position: relative; overflow: hidden; } .img-container img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease, transform 0.3s ease; } /* Lazy loading 상태 */ .img-container img[loading="lazy"] { opacity: 0; } .img-container img[loading="lazy"].loaded { opacity: 1; } /* 이미지 로딩 플레이스홀더 */ .img-placeholder { position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-alt) 50%, var(--color-bg-subtle) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .img-container img.loaded + .img-placeholder { opacity: 0; pointer-events: none; } /* 고정 비율 이미지 */ .aspect-square { aspect-ratio: 1; } .aspect-video { aspect-ratio: 16/9; } .aspect-portrait { aspect-ratio: 3/4; } .aspect-story { aspect-ratio: 3/4; } /* 이미지 오버레이 */ .img-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-bg-overlay); opacity: 0; transition: opacity var(--transition-normal); } .img-container:hover .img-overlay { opacity: 1; } /* 줌 효과 */ .img-hover-zoom:hover img { transform: scale(1.05); } /* 블러 로딩 (LQIP - Low Quality Image Placeholder) */ .img-blur-load { filter: blur(10px); transition: filter 0.5s ease; } .img-blur-load.loaded { filter: blur(0); } /* 반응형 이미지 크기 */ @media (max-width: 767px) { .img-responsive-sm { max-width: 100%; height: auto; } } @media (min-width: 768px) { .img-responsive-md { max-width: 100%; height: auto; } }