/* ========================================================= KAI Platform · Skin Color Palettes (kai-skin.css v1.0) --------------------------------------------------------- · 스킨(브랜드 강조) 컬러 팔레트 정의 파일 — 5종 · 활성 스킨은 로 선택됩니다. └ 이 값은 assets/kai-config.js 의 KAI_SKIN 한 줄로 결정됩니다. (직접 HTML 을 고칠 필요 없음 — config 파일만 바꾸세요.) · 각 팔레트는 kai.css 의 accent 변수만 재정의합니다. 구조/여백/그레이 톤 등은 kai.css 그대로 유지되어 CSS 통일성 보존. · 재정의 대상 변수: 브랜드 : --kai-cyan --kai-teal --kai-grad 라이트/다크: --primary --primary-strong --primary-soft --primary-ink --primary-glow --sidebar-active · 새 스킨 추가: 아래 블록을 복사해 data-skin 이름만 바꾸고 config 파일의 목록에 추가하면 됩니다. ========================================================= */ /* ========================================================= 1) TEAL · KAI 시그니처 (기본값) ========================================================= */ html[data-skin="teal"] { --kai-cyan: #0E9BB5; --kai-teal: #0C8F84; --kai-grad: linear-gradient(135deg, #0E9BB5 0%, #0C8F84 100%); } html[data-skin="teal"] body.theme-light { --primary: #0E7D95; --primary-strong: #0B6579; --primary-soft: #E3F5F9; --primary-ink: #FFFFFF; --primary-glow: rgba(14,155,181,.35); --sidebar-active: rgba(14,155,181,.22); } html[data-skin="teal"] body.theme-dark { --primary: #2CC5E0; --primary-strong: #55D4EA; --primary-soft: rgba(44,197,224,.14); --primary-ink: #06272E; --primary-glow: rgba(44,197,224,.35); --sidebar-active: rgba(44,197,224,.16); } /* ========================================================= 2) BLUE · 로열 블루 ========================================================= */ html[data-skin="blue"] { --kai-cyan: #2B7BE4; --kai-teal: #3D5AE0; --kai-grad: linear-gradient(135deg, #2B7BE4 0%, #3D5AE0 100%); } html[data-skin="blue"] body.theme-light { --primary: #1E63C8; --primary-strong: #164FA3; --primary-soft: #E6EEFC; --primary-ink: #FFFFFF; --primary-glow: rgba(43,123,228,.35); --sidebar-active: rgba(43,123,228,.22); } html[data-skin="blue"] body.theme-dark { --primary: #5AA0F5; --primary-strong: #7DB6F8; --primary-soft: rgba(90,160,245,.14); --primary-ink: #06162E; --primary-glow: rgba(90,160,245,.35); --sidebar-active: rgba(90,160,245,.16); } /* ========================================================= 3) VIOLET · 바이올렛 ========================================================= */ html[data-skin="violet"] { --kai-cyan: #7C4DE0; --kai-teal: #9B4DD8; --kai-grad: linear-gradient(135deg, #7C4DE0 0%, #9B4DD8 100%); } html[data-skin="violet"] body.theme-light { --primary: #6A3FD0; --primary-strong: #5330A8; --primary-soft: #EFEAFB; --primary-ink: #FFFFFF; --primary-glow: rgba(124,77,224,.35); --sidebar-active: rgba(124,77,224,.22); } html[data-skin="violet"] body.theme-dark { --primary: #A88BF2; --primary-strong: #BFA6F7; --primary-soft: rgba(168,139,242,.16); --primary-ink: #1A0F2E; --primary-glow: rgba(168,139,242,.35); --sidebar-active: rgba(168,139,242,.16); } /* ========================================================= 4) CRIMSON · 크림슨 로즈 ========================================================= */ html[data-skin="crimson"] { --kai-cyan: #E23B4E; --kai-teal: #D8455F; --kai-grad: linear-gradient(135deg, #E23B4E 0%, #D8455F 100%); } html[data-skin="crimson"] body.theme-light { --primary: #C92F44; --primary-strong: #A32235; --primary-soft: #FCE7EA; --primary-ink: #FFFFFF; --primary-glow: rgba(226,59,78,.35); --sidebar-active: rgba(226,59,78,.22); } html[data-skin="crimson"] body.theme-dark { --primary: #F0687C; --primary-strong: #F58A9A; --primary-soft: rgba(240,104,124,.14); --primary-ink: #2E0A10; --primary-glow: rgba(240,104,124,.35); --sidebar-active: rgba(240,104,124,.16); } /* ========================================================= 5) EMERALD · 에메랄드 ========================================================= */ html[data-skin="emerald"] { --kai-cyan: #12A85E; --kai-teal: #0E9E86; --kai-grad: linear-gradient(135deg, #12A85E 0%, #0E9E86 100%); } html[data-skin="emerald"] body.theme-light { --primary: #12925A; --primary-strong: #0C7346; --primary-soft: #E2F6EC; --primary-ink: #FFFFFF; --primary-glow: rgba(18,168,94,.35); --sidebar-active: rgba(18,168,94,.22); } html[data-skin="emerald"] body.theme-dark { --primary: #34D08A; --primary-strong: #59DCA1; --primary-soft: rgba(52,208,138,.14); --primary-ink: #052015; --primary-glow: rgba(52,208,138,.35); --sidebar-active: rgba(52,208,138,.16); }