/* =========================================================== 파덕라이트 공통 스타일 - Liquid Glass × iMessage =========================================================== */ /* ════════════════════════════════════════════════════════════════════ 파덕라이트 웹 대시보드 — 디자인 시스템 (변경 금지 약속, 2026-05-08) ──────────────────────────────────────────────────────────────────── 이 규칙들은 사용자(Arix)가 명시적으로 정한 약속이다. 함부로 깨지 말 것. - 새 화면/컴포넌트 추가 시에도 동일하게 적용 - 기존 코드 리팩터링 시에도 유지 - 이걸 어기면 사용자가 빨간 박스보다 더 화낸다 ▸ 폰트 크기 — 5단계 토큰만 사용. inline px 금지. --fs-xs (10px) : 라벨, 메타, 캡션, 보조 텍스트 (구 9~10px) --fs-sm (12px) : 본문 작은, 표 셀 sub, 메모 (구 11~12px) --fs-md (14px) : 본문 기본, 카드 본문, 강조 텍스트 (구 13~14px) --fs-lg (16px) : 섹션 헤더(h4), 카드 헤딩 (구 15~17px) --fs-xl (20px) : KPI 큰 숫자, 메인 제목, h3 (구 18~22px) ※ 32px(시계), 48px(메인 헤더) 같은 특수 용도는 그대로 둠. ※ font-size: 13px 같은 inline 값 추가하지 말 것 → var(--fs-md)로. ▸ 색상 — 반드시 CSS var() 사용. 하드코딩 hex 절대 금지. --chart-1~5 : 차트 시리즈 5색 (slate / sage / ochre / lavender / rose) 테마별로 muted 톤다운된 값. semantic 의미 통일: chart-1=cool blue / chart-2=success green / chart-3=warning orange chart-4=purple / chart-5=danger red --chart-1-soft~5-soft : 위 색의 옅은 배경 tint (rgba 0.15~0.22) --ink, --ink-sub : 본문 글자, 보조 글자 --bg-card-solid : 카드 솔리드 배경 (도넛 segment border 등에도 사용) --bg-input : 입력/회색 배경 --border : 테두리 --c-primary : 강조색 (정렬된 ▲▼ 등) ※ #34c759, #ff3b30 같은 iOS 시그니처 색은 절대 다시 박지 말 것. 반드시 의미에 맞는 var(--chart-N) 또는 --ink-sub로. ▸ 이모지 — ONLINE/OFFLINE MD 영역에서 모두 제거 완료. 새로 추가하지 말 것. 토스트/뱃지의 ✓✗ 같은 기능 표시는 예외 허용. ▸ 도넛 차트 (Chart.js) - cutout: '78%' (얇은 링, 모던) - borderWidth: 2 + borderColor: cvar('--bg-card-solid') (segment 분리) - hoverOffset: 4 - donutInlineLabels plugin (5% 이상 segment 안에 % 표시) - donutLegendLabels generateLabels (라벨·금액·% 포함) - 범례 글자 색은 LegendItem.fontColor에 직접 박을 것. legend.labels.color 옵션만으론 generateLabels가 LegendItem 만들 때 fontColor 미지정이면 적용 안 됨 (테마 전환 시 검정 고정 버그) - 차트 생성 직후 setTimeout(() => recolorCharts(), 50) → iframe 테마 동기화 race 안전망 ▸ 정렬 가능한 표 (sortable) - common.js 의 enableTableSort()가 모든 에 자동 부착 - 동적 innerHTML로 테이블 그릴 때마다 명시 호출 필수: if (window.enableTableSort) window.enableTableSort(); - sortable indicator: opacity .65 / weight 600 / size --fs-sm - 정렬 활성 ▲▼: var(--c-primary), --fs-sm ▸ 모바일 반응형 - breakpoint: @media (max-width: 600px) - 7+ 컬럼 표는 모바일에서 카드 레이아웃으로 분기 (예: TOP 5 SKU - .ov-desktop-only / .ov-mobile-only) - !important로 specificity 충돌 방지 ▸ 테마 전파 - 부모 frame이 iframe에 postMessage({type:'theme-applied',value:...}) - 각 iframe은 message listener에서 documentElement.dataset.theme 갱신 + recolorCharts() 호출 - cvar() 결과가 빈 문자열이면 fallback 색 적용 ('|| #888' 패턴) ▸ 동적 코드 패치 규칙 - 큰 파일 수정 시 _bak/_/ 에 백업 후 진행 - find-replace 패턴은 정확히 1회만 매치되도록 충분한 컨텍스트 포함 - py_compile / node --check 로 변경 후 syntax 검증 ▸ navigate (index.html) - try-catch에서 에러 시 view를 빨간 박스로 덮지 말 것 (silent + console.warn) - 빠른 탭 전환 시 race로 첫 호출이 throw, 두 번째 호출이 자연스레 덮음 ════════════════════════════════════════════════════════════════════ */ :root { /* 폰트 스케일 — inline px 대신 반드시 이 토큰만 사용할 것 */ --fs-xs: 10px; /* 라벨, 메타, 캡션 */ --fs-sm: 12px; /* 본문 작은, 표 셀 sub */ --fs-md: 14px; /* 본문 기본, 강조 */ --fs-lg: 16px; /* 섹션 헤더, 카드 헤딩 */ --fs-xl: 20px; /* KPI 큰 숫자, 메인 제목 */ } :root { /* 베이스 톤 - iMessage 라이트 */ --bg-app: #F2F2F7; --bg-card: rgba(255,255,255,0.72); --bg-card-solid: #FFFFFF; --bg-sidebar: rgba(242,242,247,0.78); --bg-main: #FFFFFF; --bg-input: #F2F2F7; --bg-hover: rgba(0,0,0,0.04); --bg-active: rgba(0,122,255,0.10); /* 잉크 */ --ink: #000000; --ink-sub: #8E8E93; --ink-tertiary: #C7C7CC; /* 포인트 - Apple Blue */ --accent: #007AFF; --apple-blue: #007AFF; /* 호환 별칭 */ --accent-hover: #0056B3; --green: #34C759; --red: #FF3B30; --orange: #FF9500; --yellow: #FF9500; --purple: #AF52DE; /* 시맨틱 컬러 (테마 통일) */ --c-primary: #007AFF; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(0,122,255,0.10); --c-danger: #FF3B30; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(255,59,48,0.12); --c-success: #34C759; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(52,199,89,0.15); --c-warn: #FF9500; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(255,149,0,0.15); --c-info: #AF52DE; --c-info-ink: #FFFFFF; --c-info-bg-soft: rgba(175,82,222,0.15); /* 상승/하락 alias (--c-success/--c-danger와 동일값) */ --c-up: #34C759; --c-dn: #FF3B30; /* 범례 전용 dot 색 */ --c-sky: #5AC8FA; /* Apple sky blue */ --c-indigo: #5856D6; /* Apple indigo */ --c-fuchsia: #e879f9; /* fuchsia-400 */ /* 차트 팔레트 (5색) */ /* 2026-05-08: muted/calm 팔레트로 톤다운 */ --chart-1: #6B8AA8; /* slate blue */ --chart-2: #8AA585; /* sage */ --chart-3: #C4946D; /* muted ochre */ --chart-4: #9788A6; /* muted lavender */ --chart-5: #B07878; /* dusty rose */ --chart-1-soft: rgba(0,122,255,0.15); --chart-2-soft: rgba(52,199,89,0.15); --chart-3-soft: rgba(255,149,0,0.15); --chart-4-soft: rgba(175,82,222,0.15); --chart-5-soft: rgba(255,59,48,0.15); /* 테두리 - hairline */ --border: rgba(60,60,67,0.16); --border-strong: rgba(60,60,67,0.29); /* 리퀴드 글래스 */ --glass-bg: rgba(255,255,255,0.60); --glass-border: rgba(255,255,255,0.50); --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.7); --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.04); --glass-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); /* 레이아웃 */ --rail-width: 280px; --header-h: 56px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; /* 모션 */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); } [data-theme='dark'] { --bg-app: #000; --bg-card: rgba(28,28,30,0.72); --bg-card-solid: #1C1C1E; --bg-sidebar: rgba(28,28,30,0.78); --bg-main: #000; --bg-input: #1C1C1E; --bg-hover: rgba(255,255,255,0.06); --bg-active: rgba(10,132,255,0.18); --ink: #FFF; --ink-sub: #8E8E93; --ink-tertiary: #48484A; --accent: #0A84FF; --border: rgba(84,84,88,0.35); --border-strong: rgba(84,84,88,0.65); --glass-bg: rgba(28,28,30,0.55); --glass-border: rgba(255,255,255,0.10); --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.08); --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.3); --glass-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.6); /* 시맨틱 */ --c-primary: #0A84FF; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(10,132,255,0.18); --c-danger: #FF453A; --c-danger-bg-soft: rgba(255,69,58,0.18); --c-success: #32D158; --c-success-bg-soft: rgba(50,209,88,0.18); --c-warn: #FF9F0A; --c-warn-bg-soft: rgba(255,159,10,0.18); --c-info: #BF5AF2; --c-info-bg-soft: rgba(191,90,242,0.18); /* 2026-05-08: 다크 배경용 mid-luminance muted */ --chart-1: #7E9DBB; --chart-2: #94B08C; --chart-3: #CCA078; --chart-4: #A795B5; --chart-5: #BC8585; --chart-1-soft: rgba(10,132,255,0.25); --chart-2-soft: rgba(50,209,88,0.22); --chart-3-soft: rgba(255,159,10,0.22); --chart-4-soft: rgba(191,90,242,0.22); --chart-5-soft: rgba(255,69,58,0.22); --c-up: #32D158; --c-dn: #FF453A; --c-indigo: #7B78FF; } /* ☀️ Day — 웜톤 베이지/아이보리. 쌩 화이트 피하고 리퀴드 글래스 살림 */ [data-theme='day'] { --bg-app: #F2ECE0; /* 웜 아이보리 (더 낮은 톤, 글래스 뒤로 비치는 바탕) */ --bg-card: rgba(252,249,243,0.58); /* 글래스 카드 — 반투명 */ --bg-card-solid: #FBF7EE; /* 카드 solid — 살짝 웜한 아이보리, 쌩 화이트 아님 */ --bg-sidebar: rgba(237,229,215,0.72); /* 사이드바 — 반투명 베이지 */ --bg-main: #F6F1E6; /* 메인 — 아이보리 (순백 금지) */ --bg-input: #E8DFCE; /* 입력 — 라이트 베이지 그레이 */ --bg-hover: rgba(120,90,50,0.06); --bg-active: rgba(181,135,75,0.16); --ink: #2E2619; /* 딥 브라운 블랙 */ --ink-sub: #857762; --ink-tertiary: #BFB29E; --accent: #B5874B; /* 카푸치노 브라운 */ --apple-blue: #B5874B; --accent-hover: #9A7039; --border: rgba(120,90,50,0.16); --border-strong: rgba(120,90,50,0.30); --glass-bg: rgba(255,250,242,0.48); /* 글래스 — 더 투명해서 뒤 배경 비침 */ --glass-border: rgba(255,253,248,0.55); --glass-inner-light: inset 0 1px 0 rgba(255,253,248,0.75); --glass-inner-dark: inset 0 -1px 0 rgba(120,90,50,0.05); --glass-shadow: 0 1px 3px rgba(120,90,50,0.06), 0 8px 24px rgba(120,90,50,0.10); /* 시맨틱 — 웜톤 팔레트 */ --c-primary: #B5874B; /* 카푸치노 브라운 */ --c-primary-ink: #FBF7EE; --c-primary-bg-soft: rgba(181,135,75,0.16); --c-danger: #C9584A; /* 테라코타 */ --c-danger-ink: #FBF7EE; --c-danger-bg-soft: rgba(201,88,74,0.15); --c-success: #8FA564; /* 세이지/올리브 */ --c-success-ink: #FBF7EE; --c-success-bg-soft: rgba(143,165,100,0.18); --c-warn: #D49450; /* 캐러멜 */ --c-warn-ink: #FBF7EE; --c-warn-bg-soft: rgba(212,148,80,0.18); --c-info: #9C7FA0; /* 라벤더 베이지 */ --c-info-ink: #FBF7EE; --c-info-bg-soft: rgba(156,127,160,0.18); /* 차트 팔레트 (웜 5색) */ /* 2026-05-08: Day 톤 살짝 더 차분히 */ --chart-1: #A57E48; --chart-2: #8FA564; --chart-3: #BC8859; --chart-4: #9C7FA0; --chart-5: #B07060; --chart-1-soft: rgba(181,135,75,0.20); --chart-2-soft: rgba(143,165,100,0.22); --chart-3-soft: rgba(212,148,80,0.22); --chart-4-soft: rgba(156,127,160,0.22); --chart-5-soft: rgba(201,88,74,0.22); --c-up: #8FA564; --c-dn: #C9584A; } /* 🌙 Midnight — 쿨톤 차콜/네이비 */ [data-theme='midnight'] { --bg-app: #0E1522; --bg-card: rgba(32,44,72,0.72); --bg-card-solid: #202C48; /* 카드 solid — bg-main보다 확실히 밝게 */ --bg-sidebar: rgba(14,21,34,0.82); --bg-main: #131B2B; --bg-input: #243150; /* bg-main 대비 확실히 밝게 (달력 셀 구분) */ --bg-hover: rgba(170,195,230,0.08); --bg-active: rgba(107,147,214,0.22); --ink: #E8ECF3; --ink-sub: #98A2B6; --ink-tertiary: #5A6480; --accent: #7BA3E8; /* 약간 더 밝게 */ --apple-blue: #7BA3E8; --accent-hover: #6B93D6; --border: rgba(160,180,215,0.32); /* 구분선 확실히 진하게 */ --border-strong: rgba(160,180,215,0.52); --glass-bg: rgba(28,38,62,0.62); --glass-border: rgba(160,180,215,0.16); --glass-inner-light: inset 0 1px 0 rgba(200,215,240,0.08); --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.35); --glass-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.55); /* 시맨틱 — 쿨톤 팔레트 */ --c-primary: #7BA3E8; /* 페일 네이비 블루 */ --c-primary-ink: #0E1522; --c-primary-bg-soft: rgba(123,163,232,0.22); --c-danger: #FF7A6B; /* 쿨 코랄 */ --c-danger-ink: #0E1522; --c-danger-bg-soft: rgba(255,122,107,0.22); --c-success: #7AC191; /* 민트 세이지 */ --c-success-ink: #0E1522; --c-success-bg-soft: rgba(122,193,145,0.22); --c-warn: #E8B478; /* 쿨 앰버 */ --c-warn-ink: #0E1522; --c-warn-bg-soft: rgba(232,180,120,0.22); --c-info: #A1A9D9; /* 더스티 퍼플블루 */ --c-info-ink: #0E1522; --c-info-bg-soft: rgba(161,169,217,0.22); /* 차트 팔레트 (쿨 5색) */ /* 2026-05-08: 차콜/네이비 위 차분한 톤 */ --chart-1: #7E9DBB; --chart-2: #88B49C; --chart-3: #D2AC85; --chart-4: #A1A9D9; --chart-5: #C88378; --chart-1-soft: rgba(123,163,232,0.25); --chart-2-soft: rgba(122,193,145,0.25); --chart-3-soft: rgba(232,180,120,0.25); --chart-4-soft: rgba(161,169,217,0.25); --chart-5-soft: rgba(255,122,107,0.25); --c-up: #7AC191; --c-dn: #FF7A6B; --c-indigo: #8F8DFF; } [data-theme='rainy-day'] { --bg-app: #C8D0D8; /* 흐린 회청색 — 안개 낀 창밖 (베이스) */ --bg-card: rgba(232,235,240,0.65); --bg-card-solid: #E8EBF0; --bg-sidebar: rgba(214,221,228,0.78); --bg-main: #D5DCE3; --bg-input: #BAC4CE; --bg-hover: rgba(95,110,124,0.08); --bg-active: rgba(74,133,121,0.16); --ink: #2A3640; /* 짙은 슬레이트 (메인) */ --ink-sub: #5F6E7C; /* 블루그레이 (서브) */ --ink-tertiary: #95A0AC; --accent: #4A8579; /* 모스 청록 — 비 머금은 잎 (포인트) */ --apple-blue: #4A8579; --accent-hover: #3D7065; --border: rgba(95,110,124,0.22); --border-strong: rgba(95,110,124,0.38); --glass-bg: rgba(232,235,240,0.55); --glass-border: rgba(255,255,255,0.45); --glass-inner-light: inset 0 1px 0 rgba(255,255,255,0.55); --glass-inner-dark: inset 0 -1px 0 rgba(95,110,124,0.06); --glass-shadow: 0 1px 3px rgba(60,75,90,0.08), 0 8px 24px rgba(60,75,90,0.12); /* 시맨틱 — 쿨 그레이/청록 팔레트 */ --c-primary: #4A8579; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(74,133,121,0.16); --c-danger: #B85950; /* 차분한 테라코타 */ --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(184,89,80,0.15); --c-success: #8FA56C; /* 모스 그린 */ --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(143,165,108,0.18); --c-warn: #C9954E; /* 호박 — 우산 노랑 */ --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(201,149,78,0.18); --c-info: #7585A8; /* 스틸 블루 */ --c-info-ink: #FFFFFF; --c-info-bg-soft: rgba(117,133,168,0.18); /* 차트 팔레트 (쿨 그레이 5색) */ /* 2026-05-08: 비 오는 낮, 채도 한 단계 down */ --chart-1: #4A8579; --chart-2: #8FA56C; --chart-3: #B88E55; --chart-4: #7585A8; --chart-5: #A05E58; --chart-1-soft: rgba(74,133,121,0.22); --chart-2-soft: rgba(143,165,108,0.22); --chart-3-soft: rgba(201,149,78,0.22); --chart-4-soft: rgba(117,133,168,0.22); --chart-5-soft: rgba(184,89,80,0.22); --c-up: #8FA56C; --c-dn: #B85950; } [data-theme='rainy-dawn'] { --bg-app: #28223A; /* 보랏빛 짙은 회색 — 비 새벽 하늘 (베이스) */ --bg-card: rgba(58,51,80,0.72); --bg-card-solid: #3A3350; --bg-sidebar: rgba(30,25,48,0.82); --bg-main: #2F2942; --bg-input: #443A5C; --bg-hover: rgba(200,192,216,0.08); --bg-active: rgba(149,119,171,0.22); --ink: #C8C0D8; /* 옅은 라일락 (메인) */ --ink-sub: #9089A0; --ink-tertiary: #6B5F80; /* 라벤더 그레이 (서브) */ --accent: #9577AB; /* 탁한 보라 — 빗물에 번지는 가로등 보랏빛 (포인트) */ --apple-blue: #9577AB; --accent-hover: #8268A0; --border: rgba(180,165,210,0.30); --border-strong: rgba(180,165,210,0.50); --glass-bg: rgba(50,42,72,0.62); --glass-border: rgba(180,165,210,0.16); --glass-inner-light: inset 0 1px 0 rgba(220,210,240,0.08); --glass-inner-dark: inset 0 -1px 0 rgba(0,0,0,0.35); --glass-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.55); /* 시맨틱 — 다크 보라 팔레트 */ --c-primary: #9577AB; --c-primary-ink: #28223A; --c-primary-bg-soft: rgba(149,119,171,0.22); --c-danger: #C8746B; /* 차분 코랄 */ --c-danger-ink: #28223A; --c-danger-bg-soft: rgba(200,116,107,0.22); --c-success: #85B894; /* 부드러운 그린 */ --c-success-ink: #28223A; --c-success-bg-soft: rgba(133,184,148,0.22); --c-warn: #D4A55E; /* 호박 — 가로등 노랑 */ --c-warn-ink: #28223A; --c-warn-bg-soft: rgba(212,165,94,0.22); --c-info: #7C95B5; /* 청자 */ --c-info-ink: #28223A; --c-info-bg-soft: rgba(124,149,181,0.22); /* 차트 팔레트 (다크 5색) */ /* 2026-05-08: 비 오는 새벽, muted */ --chart-1: #8978A0; --chart-2: #85B894; --chart-3: #C49A5E; --chart-4: #7C95B5; --chart-5: #B0807A; --chart-1-soft: rgba(149,119,171,0.25); --chart-2-soft: rgba(133,184,148,0.25); --chart-3-soft: rgba(212,165,94,0.25); --chart-4-soft: rgba(124,149,181,0.25); --chart-5-soft: rgba(200,116,107,0.25); --c-up: #85B894; --c-dn: #C8746B; --c-indigo: #8F8DFF; } /* ════ 신규 테마 4개 (2026-05-08) ════ Cosmos (다크 시안) · Marshmallow (라이트 핑크) · Rose (라이트 로즈) · Lilac (라이트 라벤더) 기존 6개 (light/dark/day/midnight/rainy-day/rainy-dawn) 패턴 그대로 따름. chart-2는 모든 테마에서 success(sage green) 의미 유지 — 매출 그린 등 semantic 통일. */ /* cosmos = 우주: 슴슴한 다크 슬레이트 블루 (보라 X, 톤다운 무광) */ [data-theme='cosmos'] { --bg-app: #0e1520; --bg-card: rgba(27,36,47,0.72); --bg-card-solid: #1b242f; --bg-sidebar: rgba(13,17,24,0.82); --bg-main: #131a26; --bg-input: #1b242f; --bg-hover: rgba(140,152,166,0.06); --bg-active: rgba(140,152,166,0.14); --ink: #d8dde2; --ink-sub: #8e96a0; --ink-tertiary: #586270; --accent: #8c98a6; --apple-blue: #8c98a6; --accent-hover: #6e7a88; --green: #88B49C; --red: #C8746B; --yellow: #C4B070; --orange: #C49770; --purple: #a4adba; --c-primary: #8c98a6; --c-primary-ink: #0e1520; --c-primary-bg-soft: rgba(140,152,166,0.16); --c-danger: #C8746B; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(200,116,107,0.18); --c-success: #88B49C; --c-success-ink: #0e1520; --c-success-bg-soft: rgba(136,180,156,0.18); --c-warn: #C4B070; --c-warn-ink: #0e1520; --c-warn-bg-soft: rgba(196,176,112,0.18); --c-info: #959fac; --c-info-ink: #0e1520; --c-info-bg-soft: rgba(149,159,172,0.18); --chart-1: #8c98a6; --chart-2: #88B49C; --chart-3: #C4B070; --chart-4: #a4adba; --chart-5: #C8746B; --chart-1-soft: rgba(140,152,166,0.20); --chart-2-soft: rgba(136,180,156,0.20); --chart-3-soft: rgba(196,176,112,0.20); --chart-4-soft: rgba(164,173,186,0.20); --chart-5-soft: rgba(200,116,107,0.20); --c-up: #88B49C; --c-dn: #C8746B; --c-indigo: #79828f; } /* slate = 차콜 모노톤: 다크 차콜 + 라이트그레이 액센트 */ [data-theme='slate'] { --bg-app: #1A1A1C; --bg-card: rgba(45,45,48,0.72); --bg-card-solid: #2D2D30; --bg-sidebar: rgba(15,15,17,0.82); --bg-main: #1F1F22; --bg-input: #2D2D30; --bg-hover: rgba(176,176,181,0.06); --bg-active: rgba(176,176,181,0.14); --ink: #E0E0E2; --ink-sub: #8B8B8E; --ink-tertiary: #54545A; --accent: #B0B0B5; --apple-blue: #B0B0B5; --accent-hover: #909094; --green: #88B49C; --red: #C8746B; --yellow: #D4B870; --orange: #C49770; --purple: #B19CD9; --c-primary: #B0B0B5; --c-primary-ink: #1A1A1C; --c-primary-bg-soft: rgba(176,176,181,0.16); --c-danger: #C8746B; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(200,116,107,0.18); --c-success: #88B49C; --c-success-ink: #1A1A1C; --c-success-bg-soft: rgba(136,180,156,0.18); --c-warn: #D4B870; --c-warn-ink: #1A1A1C; --c-warn-bg-soft: rgba(212,184,112,0.18); --c-info: #8FA5B5; --c-info-ink: #1A1A1C; --c-info-bg-soft: rgba(143,165,181,0.18); --chart-1: #B0B0B5; --chart-2: #88B49C; --chart-3: #D4B870; --chart-4: #B19CD9; --chart-5: #C8746B; --chart-1-soft: rgba(176,176,181,0.20); --chart-2-soft: rgba(136,180,156,0.20); --chart-3-soft: rgba(212,184,112,0.20); --chart-4-soft: rgba(177,156,217,0.20); --chart-5-soft: rgba(200,116,107,0.20); --c-up: #88B49C; --c-dn: #C8746B; --c-indigo: #8FA5B5; } /* glacier = 맑은 물·아쿠아 글래스: 클리어 화이트 + 애플 블루 */ [data-theme='glacier'] { --bg-app: #E5EDF4; --bg-card: rgba(250,253,255,0.74); --bg-card-solid: #FAFDFF; --bg-sidebar: rgba(213,225,238,0.74); --bg-main: #F1F6FA; --bg-input: #D8E4F0; --bg-hover: rgba(0,128,204,0.05); --bg-active: rgba(0,128,204,0.13); --ink: #0F1E2E; --ink-sub: #506578; --ink-tertiary: #95A5B8; --accent: #0080CC; --apple-blue: #0080CC; --accent-hover: #005FA5; --green: #34C759; --red: #FF3B30; --yellow: #FFCC00; --orange: #FF9500; --purple: #AF52DE; --c-primary: #0080CC; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(0,128,204,0.13); --c-danger: #FF3B30; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(255,59,48,0.12); --c-success: #34C759; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(52,199,89,0.12); --c-warn: #FF9500; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(255,149,0,0.12); --c-info: #5AC8FA; --c-info-ink: #0F1E2E; --c-info-bg-soft: rgba(90,200,250,0.18); --chart-1: #0080CC; --chart-2: #34C759; --chart-3: #FF9500; --chart-4: #AF52DE; --chart-5: #5AC8FA; --chart-1-soft: rgba(0,128,204,0.20); --chart-2-soft: rgba(52,199,89,0.20); --chart-3-soft: rgba(255,149,0,0.20); --chart-4-soft: rgba(175,82,222,0.20); --chart-5-soft: rgba(90,200,250,0.20); --c-up: #34C759; --c-dn: #FF3B30; --c-indigo: #5856D6; } /* linen = 린넨 페이퍼: 크림 + 아이보리 + 시스템 그레이 액센트 */ [data-theme='linen'] { --bg-app: #F5F0E5; --bg-card: rgba(250,247,240,0.74); --bg-card-solid: #FAF7F0; --bg-sidebar: rgba(241,235,222,0.74); --bg-main: #F8F4EC; --bg-input: #EDE7D8; --bg-hover: rgba(110,110,115,0.05); --bg-active: rgba(110,110,115,0.13); --ink: #2D2A28; --ink-sub: #7A7570; --ink-tertiary: #AFA89E; --accent: #6E6E73; --apple-blue: #6E6E73; --accent-hover: #4F4F54; --green: #34C759; --red: #FF3B30; --yellow: #FF9500; --orange: #FF9500; --purple: #AF52DE; --c-primary: #6E6E73; --c-primary-ink: #FAF7F0; --c-primary-bg-soft: rgba(110,110,115,0.13); --c-danger: #FF3B30; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(255,59,48,0.12); --c-success: #34C759; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(52,199,89,0.12); --c-warn: #FF9500; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(255,149,0,0.12); --c-info: #5AC8FA; --c-info-ink: #2D2A28; --c-info-bg-soft: rgba(90,200,250,0.18); --chart-1: #6E6E73; --chart-2: #34C759; --chart-3: #FF9500; --chart-4: #AF52DE; --chart-5: #5AC8FA; --chart-1-soft: rgba(110,110,115,0.20); --chart-2-soft: rgba(52,199,89,0.20); --chart-3-soft: rgba(255,149,0,0.20); --chart-4-soft: rgba(175,82,222,0.20); --chart-5-soft: rgba(90,200,250,0.20); --c-up: #34C759; --c-dn: #FF3B30; --c-indigo: #5856D6; } /* coral = 코랄/복숭아: 살구 베이스 + 그레이베이지 액센트 */ [data-theme='coral'] { --bg-app: #F8E0D8; --bg-card: rgba(252,226,217,0.74); --bg-card-solid: #FCE2D9; --bg-sidebar: rgba(244,213,200,0.74); --bg-main: #FAEAE2; --bg-input: #F4D5C8; --bg-hover: rgba(142,131,120,0.05); --bg-active: rgba(142,131,120,0.13); --ink: #2D2628; --ink-sub: #7A6E66; --ink-tertiary: #B8A89A; --accent: #8E8378; --apple-blue: #8E8378; --accent-hover: #6E6457; --green: #88B49C; --red: #C25B6B; --yellow: #E5A06A; --orange: #E5A06A; --purple: #B19CD9; --c-primary: #8E8378; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(142,131,120,0.16); --c-danger: #C25B6B; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(194,91,107,0.15); --c-success: #88B49C; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(136,180,156,0.15); --c-warn: #E5A06A; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(229,160,106,0.15); --c-info: #B19CD9; --c-info-ink: #2D2628; --c-info-bg-soft: rgba(177,156,217,0.18); --chart-1: #8E8378; --chart-2: #88B49C; --chart-3: #E5A06A; --chart-4: #B19CD9; --chart-5: #C25B6B; --chart-1-soft: rgba(142,131,120,0.20); --chart-2-soft: rgba(136,180,156,0.20); --chart-3-soft: rgba(229,160,106,0.20); --chart-4-soft: rgba(177,156,217,0.20); --chart-5-soft: rgba(194,91,107,0.20); --c-up: #88B49C; --c-dn: #C25B6B; --c-indigo: #8FA5C2; } [data-theme='marshmallow'] { --bg-app: #FFFAF0; --bg-card: rgba(255,255,255,0.72); --bg-card-solid: #FFFFFF; --bg-sidebar: rgba(255,228,232,0.65); --bg-main: #FFFEFC; --bg-input: #FFE4E8; --bg-hover: rgba(255,141,161,0.06); --bg-active: rgba(255,141,161,0.15); --ink: #4A2530; --ink-sub: #8A6A75; --ink-tertiary: #C4A5AE; --accent: #FF8DA1; --apple-blue: #FF8DA1; --accent-hover: #E5697F; --green: #6E8C7A; --red: #C25B6B; --yellow: #E5A06A; --orange: #E5A06A; --purple: #A084DC; --c-primary: #FF8DA1; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(255,141,161,0.15); --c-danger: #C25B6B; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(194,91,107,0.15); --c-success: #6E8C7A; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(110,140,122,0.15); --c-warn: #E5A06A; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(229,160,106,0.15); --c-info: #A084DC; --c-info-ink: #FFFFFF; --c-info-bg-soft: rgba(160,132,220,0.15); --chart-1: #FF8DA1; --chart-2: #88B49C; --chart-3: #FFB088; --chart-4: #B19CD9; --chart-5: #C25B6B; --chart-1-soft: rgba(255,141,161,0.20); --chart-2-soft: rgba(136,180,156,0.20); --chart-3-soft: rgba(255,176,136,0.20); --chart-4-soft: rgba(177,156,217,0.20); --chart-5-soft: rgba(194,91,107,0.20); --c-up: #6E8C7A; --c-dn: #C25B6B; } [data-theme='rose'] { --bg-app: #F2ECEB; --bg-card: rgba(255,255,255,0.72); --bg-card-solid: #FFFFFF; --bg-sidebar: rgba(225,213,213,0.65); --bg-main: #F8F4F3; --bg-input: #E1D5D5; --bg-hover: rgba(166,124,124,0.06); --bg-active: rgba(166,124,124,0.15); --ink: #3A2A2A; --ink-sub: #7A6262; --ink-tertiary: #B5A0A0; --accent: #A67C7C; --apple-blue: #A67C7C; --accent-hover: #8A5F5F; --green: #6E8C7A; --red: #B05858; --yellow: #C4946D; --orange: #C4946D; --purple: #8A7A98; --c-primary: #A67C7C; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(166,124,124,0.15); --c-danger: #B05858; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(176,88,88,0.15); --c-success: #6E8C7A; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(110,140,122,0.15); --c-warn: #C4946D; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(196,148,109,0.15); --c-info: #8A7A98; --c-info-ink: #FFFFFF; --c-info-bg-soft: rgba(138,122,152,0.15); --chart-1: #A67C7C; --chart-2: #88A595; --chart-3: #C4946D; --chart-4: #9C8AA0; --chart-5: #B05858; --chart-1-soft: rgba(166,124,124,0.20); --chart-2-soft: rgba(136,165,149,0.20); --chart-3-soft: rgba(196,148,109,0.20); --chart-4-soft: rgba(156,138,160,0.20); --chart-5-soft: rgba(176,88,88,0.20); --c-up: #6E8C7A; --c-dn: #B05858; } [data-theme='lilac'] { --bg-app: #FAFAFF; --bg-card: rgba(255,255,255,0.72); --bg-card-solid: #FFFFFF; --bg-sidebar: rgba(232,228,247,0.65); --bg-main: #FCFBFF; --bg-input: #E8E4F7; --bg-hover: rgba(160,132,220,0.06); --bg-active: rgba(160,132,220,0.15); --ink: #2D1F4A; --ink-sub: #6B5A85; --ink-tertiary: #B5A8C5; --accent: #A084DC; --apple-blue: #A084DC; --accent-hover: #8466C4; --green: #6E8C7A; --red: #B05858; --yellow: #D9A175; --orange: #C4946D; --purple: #A084DC; --c-primary: #A084DC; --c-primary-ink: #FFFFFF; --c-primary-bg-soft: rgba(160,132,220,0.15); --c-danger: #B05858; --c-danger-ink: #FFFFFF; --c-danger-bg-soft: rgba(176,88,88,0.15); --c-success: #6E8C7A; --c-success-ink: #FFFFFF; --c-success-bg-soft: rgba(110,140,122,0.15); --c-warn: #C4946D; --c-warn-ink: #FFFFFF; --c-warn-bg-soft: rgba(196,148,109,0.15); --c-info: #8A7A98; --c-info-ink: #FFFFFF; --c-info-bg-soft: rgba(138,122,152,0.15); --chart-1: #A084DC; --chart-2: #88B49C; --chart-3: #D9A175; --chart-4: #B19CD9; --chart-5: #C25B6B; --chart-1-soft: rgba(160,132,220,0.20); --chart-2-soft: rgba(136,180,156,0.20); --chart-3-soft: rgba(217,161,117,0.20); --chart-4-soft: rgba(177,156,217,0.20); --chart-5-soft: rgba(194,91,107,0.20); --c-up: #6E8C7A; --c-dn: #B05858; } /* 신규 테마 스크롤바 */ [data-theme='cosmos'] ::-webkit-scrollbar-thumb { background: rgba(140,152,166,0.20); } [data-theme='cosmos'] ::-webkit-scrollbar-thumb:hover { background: rgba(140,152,166,0.36); } [data-theme='marshmallow'] ::-webkit-scrollbar-thumb { background: rgba(255,141,161,0.25); } [data-theme='marshmallow'] ::-webkit-scrollbar-thumb:hover { background: rgba(255,141,161,0.40); } [data-theme='rose'] ::-webkit-scrollbar-thumb { background: rgba(166,124,124,0.25); } [data-theme='rose'] ::-webkit-scrollbar-thumb:hover { background: rgba(166,124,124,0.40); } [data-theme='lilac'] ::-webkit-scrollbar-thumb { background: rgba(160,132,220,0.25); } [data-theme='lilac'] ::-webkit-scrollbar-thumb:hover { background: rgba(160,132,220,0.40); } [data-theme='slate'] ::-webkit-scrollbar-thumb { background: rgba(176,176,181,0.20); } [data-theme='slate'] ::-webkit-scrollbar-thumb:hover { background: rgba(176,176,181,0.36); } [data-theme='glacier'] ::-webkit-scrollbar-thumb { background: rgba(0,128,204,0.20); } [data-theme='glacier'] ::-webkit-scrollbar-thumb:hover { background: rgba(0,128,204,0.36); } [data-theme='linen'] ::-webkit-scrollbar-thumb { background: rgba(110,110,115,0.20); } [data-theme='linen'] ::-webkit-scrollbar-thumb:hover { background: rgba(110,110,115,0.36); } [data-theme='coral'] ::-webkit-scrollbar-thumb { background: rgba(142,131,120,0.22); } [data-theme='coral'] ::-webkit-scrollbar-thumb:hover { background: rgba(142,131,120,0.40); } /* 스크롤바 — 테마별 */ [data-theme='day'] ::-webkit-scrollbar-thumb { background: rgba(90,70,40,0.18); } [data-theme='day'] ::-webkit-scrollbar-thumb:hover { background: rgba(90,70,40,0.30); } [data-theme='midnight'] ::-webkit-scrollbar-thumb { background: rgba(170,195,230,0.18); } [data-theme='midnight'] ::-webkit-scrollbar-thumb:hover { background: rgba(170,195,230,0.30); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', sans-serif; background: var(--bg-app); color: var(--ink); height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; font-size: var(--fs-md); letter-spacing: -0.01em; } /* 스크롤바 - 애플 스타일 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); } [data-theme='dark'] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); } /* ========================================================== 리퀴드 글래스 카드 (가장 중요한 재료) ========================================================== */ .glass { background: var(--glass-bg); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 0.5px solid var(--glass-border); box-shadow: var(--glass-inner-light), var(--glass-inner-dark), var(--glass-shadow); border-radius: var(--radius-lg); } .glass-pill { background: var(--glass-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 0.5px solid var(--glass-border); box-shadow: var(--glass-inner-light), 0 1px 2px rgba(0,0,0,0.04); border-radius: 999px; } /* 버튼 공통 */ .btn { height: 32px; padding: 0 14px; border-radius: 8px; border: 0.5px solid var(--border); background: var(--bg-card-solid); color: var(--ink); font-size: var(--fs-md); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s var(--ease-smooth); } .btn:hover { background: var(--bg-hover); } .btn:active { transform: scale(0.97); } .btn.primary { background: var(--accent); color: #fff; border-color: transparent; } .btn.primary:hover { background: var(--accent-hover); } .btn.danger { color: var(--red); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--bg-hover); } /* 배지 */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--bg-input); color: var(--ink-sub); } .badge.on { background: rgba(52,199,89,0.15); color: var(--green); } .badge.off { background: rgba(255,59,48,0.15); color: var(--red); } .badge.warn { background: rgba(255,149,0,0.15); color: var(--orange); } /* 상태 도트 */ .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,0.15); } .dot.off { background: var(--red); box-shadow: 0 0 0 3px rgba(255,59,48,0.15); } /* 토스트 */ .toast-wrap { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: 8px; } .toast { background: rgba(28,28,30,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: var(--fs-md); font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.25); pointer-events: auto; opacity: 0; transform: translateY(-12px); transition: all 0.35s var(--ease-spring); max-width: 460px; text-align: center; } .toast.show { opacity: 1; transform: translateY(0); } .toast.ok { background: rgba(52,199,89,0.92); } .toast.err { background: rgba(255,59,48,0.92); } /* 카드 */ .card { background: var(--bg-card-solid); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .section-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .section-sub { font-size: var(--fs-md); color: var(--ink-sub); margin-bottom: 20px; } /* 로딩 스피너 */ .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* 빈 상태 */ .empty { padding: 60px 20px; text-align: center; color: var(--ink-sub); } .empty .emoji { font-size: 48px; opacity: 0.5; margin-bottom: 16px; } .empty .title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 4px; color: var(--ink); } .empty .desc { font-size: var(--fs-md); } /* 반응형 */ @media (max-width: 900px) { :root { --rail-width: 240px; } } /* ════════════════════════════════════════════════════ LIQUID GLASS — Apple 톤 (은은하게) 굴절(blur+saturate) + 색수차(다중 inset) + 프레넬(림 라이트) ════════════════════════════════════════════════════ */ /* SVG 굴절 필터 (displacement) — body 끝에 주입되는 */ @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { /* 공통 리퀴드 글래스 — 모든 클래스에 적용 */ .liquid-glass, .cal-card, .kpi-card, .upload-card, .detail, .chart-box, .menu-btn, .bot-card, .set-card, .mem-left, .mem-toolbar, .sched-item, .cron-job, .header-clock, .theme-toggle, .device-toggle, .theme-toggle-m, .confirm-box { position: relative; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); background: var(--glass-bg); /* 프레넬 림: 가장자리 밝기 강조 + 색수차 inset */ box-shadow: inset 0 0 0 0.5px var(--glass-border), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.04), inset 1px 0 0 rgba(0,122,255,0.03), inset -1px 0 0 rgba(255,59,48,0.025), 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06); border: none !important; /* 기존 1px 테두리 무력화 */ } /* 다크 모드에서는 림을 검정 베이스로 — 너무 밝지 않게 */ [data-theme='dark'] .liquid-glass, [data-theme='dark'] .cal-card, [data-theme='dark'] .kpi-card, [data-theme='dark'] .upload-card, [data-theme='dark'] .detail, [data-theme='dark'] .chart-box, [data-theme='dark'] .menu-btn, [data-theme='dark'] .bot-card, [data-theme='dark'] .set-card, [data-theme='dark'] .mem-left, [data-theme='dark'] .mem-toolbar, [data-theme='dark'] .sched-item, [data-theme='dark'] .cron-job, [data-theme='dark'] .header-clock, [data-theme='dark'] .theme-toggle, [data-theme='dark'] .device-toggle, [data-theme='dark'] .theme-toggle-m, [data-theme='dark'] .confirm-box { background: rgba(28,28,30,0.58); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.09), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.4), inset 1px 0 0 rgba(10,132,255,0.05), inset -1px 0 0 rgba(255,69,58,0.035), 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.55); } /* cosmos 모드 — 다크 슬레이트 블루 베이스 + 톤다운 회청색 림 */ [data-theme='cosmos'] .liquid-glass, [data-theme='cosmos'] .cal-card, [data-theme='cosmos'] .kpi-card, [data-theme='cosmos'] .upload-card, [data-theme='cosmos'] .detail, [data-theme='cosmos'] .chart-box, [data-theme='cosmos'] .menu-btn, [data-theme='cosmos'] .bot-card, [data-theme='cosmos'] .set-card, [data-theme='cosmos'] .mem-left, [data-theme='cosmos'] .mem-toolbar, [data-theme='cosmos'] .sched-item, [data-theme='cosmos'] .cron-job, [data-theme='cosmos'] .header-clock, [data-theme='cosmos'] .theme-toggle, [data-theme='cosmos'] .device-toggle, [data-theme='cosmos'] .theme-toggle-m, [data-theme='cosmos'] .confirm-box { background: rgba(24,35,53,0.62); box-shadow: inset 0 0 0 0.5px rgba(164,173,186,0.08), inset 0 1px 0 rgba(216,221,226,0.06), inset 0 -1px 0 rgba(14,21,32,0.5), inset 1px 0 0 rgba(140,152,166,0.06), inset -1px 0 0 rgba(164,173,186,0.04), 0 1px 3px rgba(14,21,32,0.55), 0 8px 24px rgba(14,21,32,0.6); } /* slate 모드 — 차콜 베이스 + 라이트그레이 림 */ [data-theme='slate'] .liquid-glass, [data-theme='slate'] .cal-card, [data-theme='slate'] .kpi-card, [data-theme='slate'] .upload-card, [data-theme='slate'] .detail, [data-theme='slate'] .chart-box, [data-theme='slate'] .menu-btn, [data-theme='slate'] .bot-card, [data-theme='slate'] .set-card, [data-theme='slate'] .mem-left, [data-theme='slate'] .mem-toolbar, [data-theme='slate'] .sched-item, [data-theme='slate'] .cron-job, [data-theme='slate'] .header-clock, [data-theme='slate'] .theme-toggle, [data-theme='slate'] .device-toggle, [data-theme='slate'] .theme-toggle-m, [data-theme='slate'] .confirm-box { background: rgba(45,45,48,0.62); box-shadow: inset 0 0 0 0.5px rgba(176,176,181,0.09), inset 0 1px 0 rgba(224,224,226,0.06), inset 0 -1px 0 rgba(15,15,17,0.5), inset 1px 0 0 rgba(176,176,181,0.05), inset -1px 0 0 rgba(139,139,142,0.04), 0 1px 3px rgba(15,15,17,0.55), 0 8px 24px rgba(15,15,17,0.6); } /* 사이드바는 블러 더 강하게 */ #sidebar { backdrop-filter: blur(40px) saturate(1.8) !important; -webkit-backdrop-filter: blur(40px) saturate(1.8) !important; background: var(--bg-sidebar) !important; } /* 메인 헤더 — 이미 glass이지만 보강 */ .main-header { backdrop-filter: blur(30px) saturate(1.6) !important; -webkit-backdrop-filter: blur(30px) saturate(1.6) !important; } /* active 카드는 accent 림 강화 */ .menu-btn.active, .bot-card.active, .mem-item.active { box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,122,255,0.15), 0 1px 2px rgba(0,122,255,0.10), 0 8px 24px rgba(0,122,255,0.12) !important; } /* 배경 무드 — bg-mood 레이어: 살짝 그라디언트 움직임으로 굴절감 보강 */ #bg-mood { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 10% 0%, rgba(0,122,255,0.06), transparent 60%), radial-gradient(1000px 500px at 90% 100%, rgba(255,59,48,0.035), transparent 60%); pointer-events: none; z-index: 0; } [data-theme='dark'] #bg-mood { background: radial-gradient(1200px 600px at 10% 0%, rgba(10,132,255,0.10), transparent 60%), radial-gradient(1000px 500px at 90% 100%, rgba(255,69,58,0.06), transparent 60%); } } /* @supports end */ /* =========================================================== 공통 모달 (paduk.confirm / paduk.prompt) 시스템 다이얼로그 → 테마 적응 모달 =========================================================== */ .paduk-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;transition:opacity .15s ease-out;padding:20px} .paduk-modal-backdrop.active{opacity:1} .paduk-modal{background:var(--bg-card-solid);border:.5px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25),0 0 0 .5px rgba(255,255,255,.05);max-width:420px;width:100%;padding:22px 22px 16px;transform:scale(.94);transition:transform .18s cubic-bezier(.2,.9,.4,1.1)} .paduk-modal-backdrop.active .paduk-modal{transform:scale(1)} .paduk-modal-title{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.35} .paduk-modal-title.danger{color:var(--c-danger,#ff3b30)} .paduk-modal-msg{font-size:var(--fs-md);color:var(--ink-sub);line-height:1.55;margin:0 0 16px;white-space:pre-wrap;word-break:break-word} .paduk-modal-input{width:100%;padding:9px 12px;background:var(--bg-input);color:var(--ink);border:1px solid var(--border);border-radius:10px;font-size:var(--fs-md);font-weight:500;outline:none;margin-bottom:14px;font-family:inherit;transition:border-color .12s,box-shadow .12s;box-sizing:border-box} .paduk-modal-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-bg-soft)} .paduk-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px} .paduk-modal-btn{padding:7px 16px;border-radius:10px;font-size:var(--fs-md);font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .12s;font-family:inherit;min-width:64px} .paduk-modal-btn.cancel{background:transparent;color:var(--ink-sub);border-color:var(--border)} .paduk-modal-btn.cancel:hover{background:var(--bg-input);color:var(--ink)} .paduk-modal-btn.ok{background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary)} .paduk-modal-btn.ok:hover{opacity:.9} .paduk-modal-btn.ok.danger{background:var(--c-danger,#ff3b30);color:var(--c-danger-ink,#fff);border-color:var(--c-danger,#ff3b30)} .paduk-modal-btn.ok.danger:hover{filter:brightness(1.08)} @media(max-width:600px){ .paduk-modal{padding:18px 18px 14px;border-radius:14px} .paduk-modal-title{font-size:var(--fs-md)} .paduk-modal-msg{font-size:var(--fs-sm)} } /* =========================================================== 테이블 전역 정렬 통일 + sortable 헤더 (2026-05-07 추가) - 모든 테이블 셀: 수직 가운데 - 헤더-데이터 정렬 일치 (JS가 inline style로 강제) - th.sortable: 클릭 정렬 (▲▼) - !important로 페이지별 CSS보다 강하게 =========================================================== */ table { border-collapse: collapse; } table th, table td { vertical-align: middle; } table th { font-weight: 700; } table th.num, table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* =========================================================== 전역 표 정렬 통일 (2026-05-07 추가) - 모든 페이지의 모든
: 헤더와 데이터 모두 가운데 정렬 - 페이지별 CSS 우선순위 무시 (!important) - 숫자 컬럼(.num)도 가운데 정렬 (tabular-nums는 유지) =========================================================== */ table thead th, table tbody td, table tfoot td, .dt thead th, .dt tbody td, .ov-top-tbl thead th, .ov-top-tbl tbody td, .data-table thead th, .data-table tbody td { text-align: center !important; vertical-align: middle !important; } /* .num 셀: 가운데 정렬 강제 + 숫자만 정렬용 폰트 변형 유지 */ table td.num, table th.num, .dt td.num, .dt th.num, .ov-top-tbl td.num, .ov-top-tbl th.num { text-align: center !important; font-variant-numeric: tabular-nums !important; } /* 정렬 가능 헤더 — 페이지별 CSS보다 강하게 (block1+2 병합) */ table th.sortable, .dt thead th.sortable, .ov-top-tbl thead th.sortable { cursor: pointer !important; user-select: none !important; position: relative !important; padding-right: 24px !important; padding-left: 14px !important; transition: background-color .12s !important; } table th.sortable::after { content: '⇅' !important; position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: var(--fs-sm) !important; font-weight: 700 !important; opacity: .45 !important; pointer-events: none !important; color: var(--ink-sub, #8e8e93) !important; letter-spacing: 0 !important; } table th.sortable:hover { background-color: var(--bg-input, rgba(0,0,0,.05)) !important; } table th.sortable:hover::after { opacity: .85 !important; } table th.sort-asc::after { content: '▲' !important; opacity: 1 !important; color: var(--c-primary, #007aff) !important; font-size: var(--fs-xs) !important; } table th.sort-desc::after { content: '▼' !important; opacity: 1 !important; color: var(--c-primary, #007aff) !important; font-size: var(--fs-xs) !important; } /* ── 헤더 정렬 동기화 클래스 (common.js sortable이 class로 주입) specificity (0,1,2) > global center rule (0,0,3) → !important 없이도 우선 ── */ table th.th-align-left { text-align: left !important; } table th.th-align-right { text-align: right !important; } table th.th-align-center { text-align: center !important; }