/* ============================================================= 리팩터 1단계 — 스코프드 리스킨 (디자인 핸드오프 스펙 기반) · 토큰 1벌 + 스코프 오버라이드. JS 렌더/텍스트 불변, CSS만. · 일 때만 적용. 클래스 제거 = 픽셀 동일 원본. · 정확한 클래스 셀렉터 + !important 로 Tailwind/기존 규칙을 이긴다. · 의미색(성공/주의/에러)은 블루로 바꾸지 않는다. 장식색만 블루 통일. ============================================================= */ /* ---------- 색 토큰 (라이트 기본 / 다크는 data-theme 명시 시) ---------- */ :root{ --rf-bg:#f1f4f9; --rf-surface:#fff; --rf-surface-2:#fbfcfe; --rf-ink:#101828; --rf-muted:#667085; --rf-faint:#98a2b3; --rf-line:#e6eaf0; --rf-line-soft:#eef1f6; --rf-blue:#2563eb; --rf-blue-deep:#1d4ed8; --rf-blue-soft:#eff4ff; --rf-blue-line:#d7e3fd; --rf-good:#16a34a; --rf-good-soft:#e9f7ee; --rf-warn:#c07c10; --rf-warn-soft:#fdf4e7; --rf-bad:#e5484d; --rf-bad-soft:#fdeeee; --rf-ease:cubic-bezier(.22,1,.36,1); --rf-dur-1:110ms; --rf-dur-2:160ms; --rf-dur-3:200ms; } :root[data-theme="dark"]{ --rf-bg:#0c111b; --rf-surface:#141b28; --rf-surface-2:#111826; --rf-ink:#eaf0fb; --rf-muted:#94a3bd; --rf-faint:#657191; --rf-line:#26314a; --rf-line-soft:#1c2537; --rf-blue:#5b8bff; --rf-blue-deep:#7ea6ff; --rf-blue-soft:#17233f; --rf-blue-line:#2c4272; --rf-good:#5fcf87; --rf-good-soft:#14271b; --rf-warn:#e2b264; --rf-warn-soft:#2a2313; --rf-bad:#ff8286; --rf-bad-soft:#2a1b1e; } /* 접근성: 모션 최소화 선호 시 애니메이션 차단 */ @media (prefers-reduced-motion:reduce){ html.ui-refac *{animation:none!important;transition-duration:.01ms!important} } /* ============================================================= 영역 A — 업무지원 › 근태/연차 (#ws-panel-attendance) 장식 인디고/틸/에메랄드/오렌지/퍼플 → 블루 통일. 앰버=주의, 레드=에러 유지. ============================================================= */ /* ── 인디고(primary) → 블루 ── */ html.ui-refac #ws-panel-attendance .bg-indigo-600{ background-color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .hover\:bg-indigo-700:hover{ background-color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .bg-indigo-400{ background-color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .bg-indigo-50, html.ui-refac #ws-panel-attendance .bg-indigo-50\/40, html.ui-refac #ws-panel-attendance .bg-indigo-100, html.ui-refac #ws-panel-attendance .bg-indigo-100\/60{ background-color:var(--rf-blue-soft)!important } html.ui-refac #ws-panel-attendance .hover\:bg-indigo-50\/40:hover{ background-color:var(--rf-blue-soft)!important } html.ui-refac #ws-panel-attendance .text-indigo-700, html.ui-refac #ws-panel-attendance .text-indigo-600{ color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .text-indigo-500, html.ui-refac #ws-panel-attendance .text-indigo-400{ color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .border-indigo-100, html.ui-refac #ws-panel-attendance .border-indigo-50{ border-color:var(--rf-blue-line)!important } /* ── 틸(특별연차) → 블루 ── */ html.ui-refac #ws-panel-attendance .bg-teal-600{ background-color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .hover\:bg-teal-700:hover{ background-color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .bg-teal-400{ background-color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .bg-teal-50{ background-color:var(--rf-blue-soft)!important } html.ui-refac #ws-panel-attendance .text-teal-700, html.ui-refac #ws-panel-attendance .text-teal-600{ color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .text-teal-500{ color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .border-teal-100, html.ui-refac #ws-panel-attendance .border-teal-200{ border-color:var(--rf-blue-line)!important } /* ── 에메랄드(추가부여·여유) → 블루 (여유 배지는 info 톤) ── */ html.ui-refac #ws-panel-attendance .bg-emerald-500{ background-color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .hover\:bg-emerald-600:hover{ background-color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .bg-emerald-50, html.ui-refac #ws-panel-attendance .bg-emerald-100{ background-color:var(--rf-blue-soft)!important } html.ui-refac #ws-panel-attendance .hover\:bg-emerald-200:hover{ background-color:var(--rf-blue-soft)!important } html.ui-refac #ws-panel-attendance .text-emerald-800, html.ui-refac #ws-panel-attendance .text-emerald-700, html.ui-refac #ws-panel-attendance .text-emerald-600{ color:var(--rf-blue-deep)!important } html.ui-refac #ws-panel-attendance .text-emerald-500{ color:var(--rf-blue)!important } html.ui-refac #ws-panel-attendance .border-emerald-100, html.ui-refac #ws-panel-attendance .border-emerald-200{ border-color:var(--rf-blue-line)!important } /* ── 오렌지(반차 칩, 흰 글자) → 블루-소프트 + 진한 블루 글자 ── */ html.ui-refac #ws-panel-attendance .bg-orange-400{ background-color:var(--rf-blue-soft)!important; color:var(--rf-blue-deep)!important } /* ── 퍼플(병가 칩, 흰 글자) → 진한 블루 솔리드 ── */ html.ui-refac #ws-panel-attendance .bg-purple-400{ background-color:var(--rf-blue-deep)!important } /* ── 앰버(진행/주의/이관) → warn 의미색 유지(다크 대응) ── */ html.ui-refac #ws-panel-attendance .bg-amber-500{ background-color:var(--rf-warn)!important } html.ui-refac #ws-panel-attendance .hover\:bg-amber-600:hover{ background-color:var(--rf-warn)!important } html.ui-refac #ws-panel-attendance .bg-amber-50, html.ui-refac #ws-panel-attendance .bg-amber-100{ background-color:var(--rf-warn-soft)!important } html.ui-refac #ws-panel-attendance .text-amber-800, html.ui-refac #ws-panel-attendance .text-amber-700, html.ui-refac #ws-panel-attendance .text-amber-600, html.ui-refac #ws-panel-attendance .text-amber-500{ color:var(--rf-warn)!important } /* 앰버 보더(border-amber-100/200)는 warn 의미색이라 그대로 둔다(블루로 바꾸지 않음) */ /* ── 레드(소진임박/마감/삭제) → bad 의미색 유지 ── */ html.ui-refac #ws-panel-attendance .bg-red-400{ background-color:var(--rf-bad)!important } html.ui-refac #ws-panel-attendance .bg-red-100{ background-color:var(--rf-bad-soft)!important } html.ui-refac #ws-panel-attendance .hover\:bg-red-500:hover{ background-color:var(--rf-bad)!important } html.ui-refac #ws-panel-attendance .text-red-600, html.ui-refac #ws-panel-attendance .text-red-400, html.ui-refac #ws-panel-attendance .text-red-300{ color:var(--rf-bad)!important } html.ui-refac #ws-panel-attendance .hover\:text-red-500:hover, html.ui-refac #ws-panel-attendance .hover\:text-red-600:hover{ color:var(--rf-bad)!important } /* ── 노랑 게이지(사용률 50~79%) → warn 유지 ── */ html.ui-refac #ws-panel-attendance .bg-yellow-400{ background-color:var(--rf-warn)!important } /* ── 버튼 눌림 모션(스펙) ── */ html.ui-refac #ws-panel-attendance button:active{ transform:scale(.98) }