/* Aurora Monolith — Utility Stylesheet * Tailwind와 병행 사용하거나 Vanilla CSS 환경에서 단독 사용. * 같은 디렉토리의 fonts/manrope.css + fonts/material-symbols.css를 에서 먼저 로드해야 함. * (head-snippet.html 참고) */ :root { /* Surface */ --color-background: #f9f9f8; --color-surface: #f9f9f8; --color-surface-bright: #f9f9f8; --color-surface-dim: #d7dbda; --color-surface-variant: #e0e3e2; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f3f4f3; --color-surface-container: #edeeed; --color-surface-container-high: #e6e9e8; --color-surface-container-highest: #e0e3e2; /* Text */ --color-on-background: #2f3333; --color-on-surface: #2f3333; --color-on-surface-variant: #5c605f; /* Primary */ --color-primary: #6043d7; --color-primary-dim: #5434ca; --color-primary-container: #c4b8ff; --color-on-primary: #fcf7ff; --color-on-primary-container: #3d0eb4; /* Secondary */ --color-secondary: #006a6a; --color-secondary-dim: #005d5d; --color-secondary-container: #98fffe; --color-on-secondary: #e0fffe; --color-on-secondary-container: #006363; /* Tertiary */ --color-tertiary: #245db2; --color-tertiary-container: #96b9ff; /* Error */ --color-error: #ac3149; --color-error-container: #f76a80; --color-on-error: #fff7f7; --color-on-error-container: #68001f; /* Outline / Inverse */ --color-outline: #787b7b; --color-outline-variant: #afb3b2; --color-inverse-surface: #0c0f0e; --color-inverse-on-surface: #9c9d9c; --color-inverse-primary: #937dff; /* Effects */ --shadow-ambient: 0 0 40px rgba(47, 51, 51, 0.04); --gradient-aurora: linear-gradient(135deg, #6043d7 0%, #006a6a 100%); } /* 0-radius 전역 강제 */ .zero-radius, .zero-radius * { border-radius: 0 !important; } html, body { font-family: 'Manrope', sans-serif; background: var(--color-background); color: var(--color-on-surface); -webkit-font-smoothing: antialiased; } /* Aurora signature gradient */ .aurora-gradient { background: var(--gradient-aurora); color: var(--color-on-primary); } /* Aurora glow — 내부 발광 효과 */ .aurora-glow { position: relative; } .aurora-glow::before { content: ''; position: absolute; inset: -10px; background: var(--color-primary-container); filter: blur(20px); opacity: 0.15; z-index: -1; pointer-events: none; } /* Ambient shadow — 모달/드롭다운에만 제한적으로 사용 */ .shadow-ambient { box-shadow: var(--shadow-ambient); } /* Ghost border — 같은 톤 위에서 경계가 필요할 때만 */ .ghost-border { box-shadow: inset 0 0 0 1px rgba(175, 179, 178, 0.15); } /* Glassmorphism — 플로팅 네비/오버레이 */ .glass-surface { background: rgba(249, 249, 248, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Active nav bar — 좌측 4px primary 수직 바 */ .nav-active { background: var(--color-surface-container-lowest); color: var(--color-primary); border-left: 4px solid var(--color-primary); transform: translateX(4px); transition: transform 200ms ease; } /* Label 전용 유틸 */ .label-meta { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-outline); } /* Display heading */ .display-hero { font-weight: 900; letter-spacing: -0.02em; line-height: 1; } /* Material Symbols 기본 variation */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* 스크롤바 — 절제된 monolith 톤 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-surface-container-low); } ::-webkit-scrollbar-thumb { background: var(--color-outline-variant); } /* Input — 4면 박스 금지, underline 스타일 */ .input-underline { border: none; border-bottom: 1px solid var(--color-outline); background: transparent; padding: 8px 0; color: var(--color-on-surface); outline: none; transition: border-color 200ms ease; } .input-underline:focus { border-bottom: 2px solid transparent; border-image: var(--gradient-aurora) 1; } /* 상태 도트 — 원형 아님, 2px 정사각 */ .status-dot { display: inline-block; width: 8px; height: 8px; } .status-dot.is-active { background: var(--color-secondary); } .status-dot.is-dormant { background: var(--color-outline-variant); } .status-dot.is-error { background: var(--color-error); } /* Dark mode overrides */ .dark { background: var(--color-inverse-surface); color: #ffffff; } .dark .aurora-glow::before { opacity: 0.25; }