/* ============================================================= APMS 테마 — 스코프 버전 (웜 중립 + 데이터 색) ------------------------------------------------------------- ⚠️ 전역(:root) 오버라이드 아님. .apms-warm-scope 하위에서만 적용된다. 이 파일은 전역 로드돼도 .apms-warm-scope 클래스가 붙은 서브트리에만 영향을 준다 → 다른 화면/archive/인쇄 무영향. 팔레트: stone 웜 중립 + 데이터 색. 사용처: → APMATH 앱 전체 (헤더·운영 화면·모달) 원본 초안 : docs/design/drafts/apms-warm-theme.draft.css 매핑표 : docs/design/drafts/apms-warm-mapping.md 방향 (사용자 선택: 웜 중립 + 데이터 색) - 중립색 = zinc(차가움) → stone(따뜻함). 종이 느낌. - 색감은 '버튼(크롬)'이 아니라 '데이터'에 — 출결/숙제/점수 상태칩, 과목 태그, 평균 같은 곳에 시맨틱/액센트 색. - primary action = near-black(웜), 파란색 아님. - 블루(--primary/--accent) = 링크·포커스·선택·오늘 기능 액센트에만. - 삭제 = 흰/투명 + 빨간 글씨. solid red 배경 금지. ============================================================= */ /* ---------- 1. 라이트 토큰 (스코프) — 웜 중립(stone) + 데이터 색 ---------- */ .apms-warm-scope { /* 주요 액션(near-black, 웜) — 저장/확정 버튼 전용 */ --action-primary: #1c1917; --action-primary-hover: #292524; --on-primary: #ffffff; /* 기능 액센트 보조 틴트 */ --accent-soft: #eef4ff; --error-soft: #fef2f2; --success-soft: #ecfdf3; --warning-soft: #fdf3e3; /* 기능 블루 — 톤다운만 (링크·선택·포커스·오늘 전용) */ --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: rgba(37, 99, 235, 0.08); --primary-rgb: 37, 99, 235; --accent: #2563eb; --subj-math-bg: rgba(37, 99, 235, 0.08); --subj-math-text: #2563eb; /* 표면 / 웜 중립 (stone — 푸른기 제거, 종이 느낌) */ --bg: #faf9f7; --surface: #ffffff; --surface-2: #f5f3f0; --surface-soft: #f5f3f0; --border: #e8e5e0; --border-soft: #f1efeb; --text: #1c1917; --text-soft: #44403c; --secondary: #78716c; /* 시맨틱 — 데이터 영역 색감 (warning 은 웜 앰버로 더 또렷하게) */ --success: #15a34a; --success-rgb: 21, 163, 74; --warning: #d97706; --warning-rgb: 217, 119, 6; --error: #dc2626; --error-rgb: 220, 38, 38; --danger: #dc2626; /* 둥글기 / 그림자 — 카드는 보더로 구분 → 평탄화 */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --shadow: none; --shadow-sm: none; --shadow-md: none; --shadow-modal: 0 8px 28px rgba(0, 0, 0, 0.12); } /* ---------- 2. 다크 토큰 (스코프) — 웜 중립(stone dark) ---------- scope 가 에 부여될 때 dark 는 같은 요소(body.dark.apms-warm-scope)이고, 하위 요소에 부여될 때는 body.dark 가 조상이므로 두 셀렉터 모두 커버한다. */ body.dark.apms-warm-scope, body.dark .apms-warm-scope { --action-primary: #fafaf9; --action-primary-hover: #e7e5e4; --on-primary: #1c1917; --accent-soft: rgba(59, 130, 246, 0.16); --error-soft: rgba(239, 68, 68, 0.15); --success-soft: rgba(34, 197, 94, 0.15); --warning-soft: rgba(245, 158, 11, 0.15); --primary: #3b82f6; --primary-dark: #2563eb; --primary-soft: rgba(59, 130, 246, 0.16); --primary-rgb: 59, 130, 246; --accent: #3b82f6; --subj-math-bg: rgba(59, 130, 246, 0.16); --subj-math-text: #60a5fa; --bg: #0c0a09; --surface: #1c1917; --surface-2: #292524; --surface-soft: #292524; --border: #34302c; --border-soft: #232020; --text: #fafaf9; --text-soft: #d6d3d1; --secondary: #a8a29e; --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --danger: #ef4444; } /* ---------- 3. 컴포넌트 remap (스코프 한정) ---------- */ /* 3-1. 주요 버튼 = near-black */ .apms-warm-scope .btn-primary, .apms-warm-scope button.btn-primary, .apms-warm-scope .ap-primary-btn, .apms-warm-scope .apms-button--primary { background: var(--action-primary) !important; color: var(--on-primary) !important; border: none !important; box-shadow: none !important; } .apms-warm-scope .btn-primary:hover, .apms-warm-scope button.btn-primary:hover, .apms-warm-scope .ap-primary-btn:hover, .apms-warm-scope .apms-button--primary:hover { background: var(--action-primary-hover) !important; } /* 3-2. 삭제 = 흰/투명 + 빨간 글씨, solid red 배경 금지 (인라인 rgba(255,71,87,.1) 등은 여기서 못 잡음 → 화면별 수동 정리) */ .apms-warm-scope .btn-danger, .apms-warm-scope button.btn-danger { background: transparent !important; color: var(--error) !important; border: 1px solid var(--error) !important; box-shadow: none !important; } .apms-warm-scope .btn-danger:hover, .apms-warm-scope button.btn-danger:hover { background: var(--error-soft) !important; } /* 3-3. 포커스 링은 별도 규칙 두지 않음 — 기존 apms-theme-override.css:362 규칙이 --primary-rgb(위에서 톤다운)를 써서 자동으로 차분한 블루 링이 됨. */ /* 3-4. 다색 툴 버튼(진도/숙제/QR/원내평가/클리닉) 무채색화. 원본은 red/green/blue/orange/purple 틴트 pill (purple 은 #7c3aed 하드코딩). 운영툴 원칙 "버튼마다 색으로 의미 주지 않기" → 기본 zinc 톤으로 통일. */ .apms-warm-scope .cls-v4-tool.red, .apms-warm-scope .cls-v4-tool.green, .apms-warm-scope .cls-v4-tool.blue, .apms-warm-scope .cls-v4-tool.orange, .apms-warm-scope .cls-v4-tool.purple, .apms-warm-scope .cls-v4-tool.primary, .apms-warm-scope .cls-v4-tool.highlight { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-soft) !important; box-shadow: none !important; } .apms-warm-scope .cls-v4-tool:hover { background: var(--surface-2) !important; }