/* --- Sleek Dark & Glassmorphism Design System --- */ /* * 테마 색상은 CSS 변수로 통합 관리한다. * :root = 다크 테마(기본 상수), [data-theme="light"] = 라이트 테마 오버라이드. * data-theme 속성은 js/theme.js가 요소에 설정한다. * 색상 하드코딩 금지 — 반드시 아래 시맨틱 변수를 사용할 것. */ :root { /* 배경 / 표면 */ --bg-dark: #0b0f19; --bg-card: #151c2c; --border-color: rgba(255, 255, 255, 0.08); --border-focus: #3b82f6; /* 텍스트 */ --text-primary: #f3f4f6; --text-secondary: #9ca3af; --text-muted: #6b7280; /* 강조색 (accent) */ --accent-blue: #3b82f6; --accent-blue-hover: #2563eb; --accent-blue-glow: rgba(59, 130, 246, 0.35); --accent-green: #10b981; --accent-green-glow: rgba(16, 185, 129, 0.35); --accent-red: #ef4444; --accent-red-glow: rgba(239, 68, 68, 0.35); --accent-orange: #f59e0b; --accent-blue-soft: #60a5fa; /* 밝은 블루 텍스트 (plan.html 등) */ --accent-red-soft: #f87171; /* 밝은 레드 텍스트 (plan.html 등) */ /* 시맨틱 오버레이 / 상태 (테마별로 명암 반전) */ --overlay-subtle: rgba(255, 255, 255, 0.02); /* 아주 옅은 표면 틴트 */ --overlay-hover: rgba(255, 255, 255, 0.05); /* hover / 입력 배경 */ --overlay-strong: rgba(255, 255, 255, 0.08); /* 강한 hover / focus 배경 */ --overlay-border: rgba(255, 255, 255, 0.15); /* 강조 테두리 */ --nav-active-bg: rgba(59, 130, 246, 0.15); /* 활성 메뉴 배경 */ --card-shadow: rgba(0, 0, 0, 0.2); /* 카드 hover 그림자 */ --modal-backdrop: rgba(8, 15, 30, 0.82); /* 모달 뒷배경 */ --modal-bg: #111827; /* 모달 본체 배경 */ --text-on-accent: #ffffff; /* accent 위 텍스트(버튼 등) */ --toggle-off-bg: #374151; /* 토글 OFF 배경 */ --danger-solid: #dc2626; /* 삭제 버튼 등 솔리드 위험색 */ --badge-green-bg: rgba(16, 185, 129, 0.1); --badge-green-border: rgba(16, 185, 129, 0.2); --badge-red-bg: rgba(239, 68, 68, 0.1); --badge-red-border: rgba(239, 68, 68, 0.2); --sidebar-width: 260px; --sidebar-collapsed-width: 70px; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- Light Theme (기본값) --- */ /* * 완전한 순백이 아니라 은은한 블루-그레이 톤을 사용해 * 다크 테마(남색 계열)와 통일감을 준다. */ [data-theme="light"] { --bg-dark: #eef1f6; /* 페이지 배경: 옅은 블루-그레이 */ --bg-card: #ffffff; /* 카드/사이드바: 흰색 표면 */ --border-color: rgba(15, 23, 42, 0.10); --border-focus: #3b82f6; --text-primary: #1e293b; /* 진한 슬레이트 */ --text-secondary: #64748b; --text-muted: #94a3b8; --accent-blue: #3b82f6; --accent-blue-hover: #2563eb; --accent-blue-glow: rgba(59, 130, 246, 0.25); --accent-green: #059669; --accent-green-glow: rgba(16, 185, 129, 0.25); --accent-red: #dc2626; --accent-red-glow: rgba(239, 68, 68, 0.25); --accent-orange: #d97706; --accent-blue-soft: #2563eb; --accent-red-soft: #dc2626; /* 오버레이는 어두운 색 기반으로 반전 (밝은 배경 위에서 보이도록) */ --overlay-subtle: rgba(15, 23, 42, 0.02); --overlay-hover: rgba(15, 23, 42, 0.04); --overlay-strong: rgba(15, 23, 42, 0.07); --overlay-border: rgba(15, 23, 42, 0.14); --nav-active-bg: rgba(59, 130, 246, 0.12); --card-shadow: rgba(15, 23, 42, 0.10); --modal-backdrop: rgba(15, 23, 42, 0.45); --modal-bg: #ffffff; --text-on-accent: #ffffff; --toggle-off-bg: #cbd5e1; --danger-solid: #dc2626; --badge-green-bg: rgba(5, 150, 105, 0.12); --badge-green-border: rgba(5, 150, 105, 0.28); --badge-red-bg: rgba(220, 38, 38, 0.10); --badge-red-border: rgba(220, 38, 38, 0.24); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg-dark); color: var(--text-primary); font-family: var(--font-family); display: flex; min-height: 100vh; overflow-x: hidden; } /* --- Layout --- */ .app-container { display: flex; width: 100%; } /* --- Sidebar --- */ aside.sidebar { width: var(--sidebar-width); background-color: var(--bg-card); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100vh; position: fixed; left: 0; top: 0; z-index: 100; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-brand { padding: 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); } .brand-icon { font-size: 24px; } .brand-name { font-size: 18px; font-weight: 700; background: linear-gradient(135deg, var(--accent-blue-soft), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.5px; } .nav-links { list-style: none; padding: 20px 12px; flex-grow: 1; overflow-y: auto; } .nav-links li { margin-bottom: 8px; } .nav-item-link { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; border-radius: 8px; transition: all 0.2s ease; } .nav-item-link:hover { background-color: var(--overlay-hover); color: var(--text-primary); } .nav-item-link.active { background-color: var(--nav-active-bg); color: var(--accent-blue); font-weight: 600; border-left: 3px solid var(--accent-blue); } .nav-icon { font-size: 18px; } .nav-text { font-size: 14px; } .sidebar-footer { padding: 20px; border-top: 1px solid var(--border-color); } .user-profile { display: flex; align-items: center; gap: 12px; } .user-avatar { font-size: 24px; background: var(--overlay-hover); padding: 8px; border-radius: 50%; } .user-info { display: flex; flex-direction: column; } .user-name { font-size: 14px; font-weight: 600; } .user-role { font-size: 11px; color: var(--text-muted); } /* --- Main Content Area --- */ main.main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); flex-grow: 1; padding: 40px; min-height: 100vh; transition: margin-left 0.3s ease; min-width: 0; } header.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .page-title h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; } .page-title p { color: var(--text-secondary); font-size: 14px; margin-top: 4px; } /* --- Responsive Layout (Grid) --- */ .dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 30px; } .card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--card-shadow); border-color: var(--overlay-border); } /* --- Status Badges --- */ .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; } .badge-online { background-color: var(--badge-green-bg); color: var(--accent-green); border: 1px solid var(--badge-green-border); } .badge-offline { background-color: var(--badge-red-bg); color: var(--accent-red); border: 1px solid var(--badge-red-border); } /* --- CSS Forms & UI Kit --- */ .btn { padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; border: none; transition: all 0.2s ease; } .btn-primary { background-color: var(--accent-blue); color: var(--text-on-accent); } .btn-primary:hover { background-color: var(--accent-blue-hover); box-shadow: 0 0 12px var(--accent-blue-glow); } /* --- Common Form Inputs & Selects --- */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; } .form-control { background-color: var(--overlay-hover) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 14px !important; width: 100% !important; transition: all 0.2s ease !important; } .form-control:focus { outline: none !important; border-color: var(--border-focus) !important; background-color: var(--overlay-strong) !important; } select.form-control { appearance: none !important; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px !important; padding-right: 40px !important; } select.form-control option { background-color: var(--bg-card) !important; color: var(--text-primary) !important; } /* 라이트 테마에서 select 화살표 색을 밝은 배경에 맞게 어둡게 */ [data-theme="light"] select.form-control { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* --- Responsive Media Queries --- */ @media (max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { aside.sidebar { width: var(--sidebar-collapsed-width); } .brand-name, .nav-text, .user-info { display: none; } main.main-content { margin-left: var(--sidebar-collapsed-width); padding: 20px; } .dashboard-grid { grid-template-columns: 1fr; } }