/* ── GUARDiA Manager Design System ── */ /* 네이버 클라우드 콘솔 디자인 패턴 참조 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* GUARDiA 브랜드 */ --brand-primary: #1a3a6b; --brand-accent: #4f6ef7; --brand-light: #e8ecff; --brand-hover: #3a5be0; /* NCloud 콘솔 참조 레이아웃 */ --gnb-h: 56px; --sidebar-w: 220px; --gnb-bg: #1a1d2e; --sidebar-bg: #f5f7fa; --sidebar-hover: #eaeef5; --sidebar-active:#dde4f5; --content-bg: #f0f2f5; --card-bg: #ffffff; --border: #e2e8f0; /* 상태 색상 */ --s-running: #00c853; --s-stopped: #9e9e9e; --s-error: #f44336; --s-pending: #ff9800; --s-creating:#2196f3; /* 텍스트 */ --tx-primary: #1e293b; --tx-secondary:#475569; --tx-muted: #94a3b8; /* 그림자 */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.1); --shadow-lg: 0 8px 32px rgba(0,0,0,.15); font-family: 'Pretendard', -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: var(--tx-primary); line-height: 1.5; } body { background: var(--content-bg); min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* ── 스크롤바 ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* ── 유틸리티 ── */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-center { display: flex; align-items: center; justify-content: center; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ── 애니메이션 ── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes spin { to { transform: rotate(360deg); } } .animate-in { animation: fadeIn .2s ease; }