/* ============================================================ 썬데이 리그 — 카카오톡풍 스킨 토큰 (skin.css) 자체 노랑 #FFD400 (카카오 브랜드색 #FEE500 아님). 기본 = 화이트(:root). 다크 팔레트는 일 때만 적용(OS 다크 자동 감지 안 함). 다크는 변수만 자동 교체 — 화면별 다크 하드코딩 불필요. 노랑은 배경/포인트로만. 글자는 잉크(--sk-ink)로. 그림자 금지 → 1px 테두리(--sk-border)로 구분. ============================================================ */ :root { /* 바탕/면 */ --sk-bg: #FAFAFA; /* 페이지 바탕 */ --sk-card: #FFFFFF; /* 카드 면 */ --sk-surface: #F5F5F5; /* 회색 면(보조 버튼·비강조 셀) */ --sk-border: #E5E5E5; /* 테두리 */ /* 글자 3단계 */ --sk-ink: #191919; /* 본문 */ --sk-ink-2: #4A4A4A; /* 보조 텍스트 */ --sk-ink-3: #8C8C8C; /* 흐린 텍스트 */ /* 노랑 (주 액션·상단바·강조) */ --sk-yellow: #FFD400; --sk-yellow-hover: #F2C300; --sk-yellow-tint: #FFF3B8; /* 강조 배경 */ --sk-yellow-pale: #FFFBE6; /* 아주 옅은 강조·오늘·선택 */ --sk-on-yellow: #191919; /* 노랑 위 글자 — 항상 잉크 */ /* 상단바(메인 네비): 라이트=노랑+잉크, 다크=카드면+밝은 글자 */ --sk-topbar-bg: #FFD400; --sk-topbar-border: rgba(25,25,25,0.08); --sk-topbar-fg-dim: rgba(25,25,25,0.62); /* 비활성 탭 글자 */ --sk-topbar-fg: #191919; /* hover 글자 */ --sk-topbar-active-fg: #191919; /* 활성 탭 글자 */ --sk-topbar-underline: #191919; /* 활성 탭 밑줄 */ --sk-topbar-hover-bg: rgba(25,25,25,0.06); /* 의미색: 경고(빨강) — 유지, 평탄화만 */ --sk-danger: #E61E25; /* 솔리드(버튼 배경·아이콘·테두리) */ --sk-danger-fg: #C7161C; /* 바탕 위 빨강 글자(가독) */ --sk-danger-tint-bg: #FBE1E1; /* 옅은 빨강 배경 */ --sk-danger-tint-border:#F0AEAF; /* 의미색: 성공(초록) — 유지 */ --sk-success: #1E8A4A; --sk-success-fg: #157F3D; --sk-success-tint-bg: #E7F6EC; --sk-success-tint-border:#A7DDBB; /* 구분색: 금색(랭킹·시상) — 유지, 바탕 위 글자는 가독용으로 진하게 */ --sk-gold: #C79200; /* 바탕 위 금색 글자 */ --sk-gold-bg: #FFE08A; /* 금색 배지 배경(위 글자 잉크) */ /* 구분색: 정보(하늘색) — 유지 */ --sk-info: #1499D6; } /* 다크 팔레트 — 기본은 화이트(라이트). OS 다크 자동 감지 안 함. 로 명시할 때만 적용(향후 토글용). */ :root[data-theme="dark"] { --sk-bg: #141417; --sk-card: #1B1B1F; --sk-surface: #202024; --sk-border: #2E2E33; --sk-ink: #EDEDED; --sk-ink-2: #C2C2C6; --sk-ink-3: #9A9AA0; --sk-yellow: #FFD400; --sk-yellow-hover: #FFDE3D; --sk-yellow-tint: #4A3F14; --sk-yellow-pale: #2A2618; --sk-on-yellow: #191919; --sk-topbar-bg: #1B1B1F; /* 다크 상단바 = 카드면 */ --sk-topbar-border: #2E2E33; --sk-topbar-fg-dim: rgba(237,237,237,0.55); --sk-topbar-fg: #EDEDED; --sk-topbar-active-fg: #FFFFFF; --sk-topbar-underline: #FFD400; /* 다크에선 노랑 밑줄로 강조 */ --sk-topbar-hover-bg: rgba(237,237,237,0.06); --sk-danger: #E61E25; --sk-danger-fg: #F08388; --sk-danger-tint-bg: rgba(230,30,37,0.15); --sk-danger-tint-border:rgba(240,131,136,0.35); --sk-success: #2FA85F; --sk-success-fg: #6BCF8E; --sk-success-tint-bg: rgba(31,138,74,0.15); --sk-success-tint-border:rgba(107,207,142,0.35); --sk-gold: #FFD24D; --sk-gold-bg: #4A3F14; --sk-info: #5BC0EB; }