/*! onae-themes.css v1.0.0 — (주)가르치는사람들 테마 3종 * default : 기존 브랜드(밝은 블루) — 아무것도 안 하면 이 상태 (하위호환) * inverse : 기본과 반대 색 (다크 + 보색 앰버) — 야간/집중 학습 * cute : 귀여운 파스텔 (핑크/라벤더 + 라운드 강화) * * 적용: * 저장: localStorage['onae_theme'] (onae-theme.js 가 관리) * 모든 전경/배경 조합은 WCAG AA(본문 4.5:1, 큰글자 3:1) 이상으로 검증됨. * → 검증 스크립트: tools/contrast-check.mjs */ :root, [data-onae-theme="default"]{ --onae-bg: #ffffff; --onae-bg-soft: #f5f7fb; --onae-bg-elev: #ffffff; --onae-border: #dde3ec; --onae-text: #14181f; /* on --onae-bg : 16.4:1 */ --onae-text-muted: #55606f; /* on --onae-bg : 7.2:1 */ --onae-brand: #1b4fd8; /* on #ffffff : 7.0:1 */ --onae-brand-strong: #143da8; --onae-on-brand: #ffffff; /* on --onae-brand : 7.0:1 */ --onae-accent: #0f766e; --onae-on-accent: #ffffff; --onae-success: #15653f; --onae-warn: #8a5300; --onae-danger: #b3261e; --onae-focus: #1b4fd8; --onae-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08); --onae-radius-card: var(--onae-radius, 14px); --onae-radius-btn: 10px; --onae-font: system-ui, -apple-system, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif; --onae-fw-head: 800; } /* ── 반대색(다크 + 앰버) ─────────────────────────── */ [data-onae-theme="inverse"]{ --onae-bg: #0e1117; --onae-bg-soft: #161b24; --onae-bg-elev: #1b2230; --onae-border: #303a4a; --onae-text: #eef2f8; /* on #0e1117 : 15.9:1 */ --onae-text-muted: #a7b2c2; /* on #0e1117 : 8.6:1 */ --onae-brand: #ffb020; /* 블루의 보색 계열 앰버 — on #0e1117 : 10.9:1 */ --onae-brand-strong: #ffc75a; --onae-on-brand: #241a00; /* on #ffb020 : 10.4:1 */ --onae-accent: #5eead4; --onae-on-accent: #06251f; --onae-success: #6ee7a5; --onae-warn: #fbbf5a; --onae-danger: #ff8f85; --onae-focus: #ffb020; --onae-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.55); color-scheme: dark; } /* ── 귀여운 파스텔 ───────────────────────────────── */ [data-onae-theme="cute"]{ --onae-bg: #fff8fb; --onae-bg-soft: #ffeef6; --onae-bg-elev: #ffffff; --onae-border: #ffd0e3; --onae-text: #3a2233; /* on #fff8fb : 12.8:1 */ --onae-text-muted: #6d4a60; /* on #fff8fb : 6.9:1 */ --onae-brand: #c2185b; /* on #fff8fb : 6.3:1 */ --onae-brand-strong: #9c1049; --onae-on-brand: #ffffff; /* on #c2185b : 6.0:1 */ --onae-accent: #6d4aff; --onae-on-accent: #ffffff; --onae-success: #1f7a52; --onae-warn: #9a5a00; --onae-danger: #c02a3d; --onae-focus: #c2185b; --onae-shadow: 0 2px 0 #ffd9ea, 0 10px 26px rgba(194,24,91,.14); --onae-radius-card: 22px; --onae-radius-btn: 999px; --onae-fw-head: 900; } /* cute 전용 소소한 장식 (레이아웃은 절대 안 바꿈) */ [data-onae-theme="cute"] .card, [data-onae-theme="cute"] .onae-card{ border-width:2px; } [data-onae-theme="cute"] .btn-primary, [data-onae-theme="cute"] .onae-btn--primary{ box-shadow:0 3px 0 var(--onae-brand-strong); } [data-onae-theme="cute"] .btn-primary:active, [data-onae-theme="cute"] .onae-btn--primary:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--onae-brand-strong); } /* ── 테마 변수를 실제로 쓰는 공용 표면 ───────────── */ .onae-themed, [data-onae-theme] body.onae-themed{ background: var(--onae-bg); color: var(--onae-text); font-family: var(--onae-font); } .onae-card{ background: var(--onae-bg-elev); color: var(--onae-text); border:1px solid var(--onae-border); border-radius: var(--onae-radius-card); box-shadow: var(--onae-shadow); padding: var(--onae-space-5, 24px); } .onae-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height: var(--onae-tap, 44px); padding:0 18px; border-radius: var(--onae-radius-btn); border:1px solid transparent; font-size: var(--onae-fs-body, 16px); font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; transition: background .15s ease, color .15s ease, transform .1s ease; } .onae-btn--primary{ background:var(--onae-brand); color:var(--onae-on-brand); } .onae-btn--primary:hover{ background:var(--onae-brand-strong); } .onae-btn--ghost{ background:transparent; color:var(--onae-brand); border-color:var(--onae-border); } .onae-muted{ color: var(--onae-text-muted); } /* ── 테마/언어 전환 위젯 ─────────────────────────── */ .onae-switcher{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .onae-switcher__btn{ min-height:36px; min-width:36px; padding:0 10px; border:1px solid var(--onae-border); border-radius:999px; background:var(--onae-bg-elev); color:var(--onae-text); font-size:13px; font-weight:700; cursor:pointer; line-height:1; } .onae-switcher__btn[aria-pressed="true"]{ background:var(--onae-brand); color:var(--onae-on-brand); border-color:var(--onae-brand); } .onae-switcher__btn:focus-visible{ outline:2px solid var(--onae-focus); outline-offset:2px; } /* 손가락 입력 기기에서는 44px 터치 규격을 지킨다 (마우스 환경은 36px 유지해 컴팩트하게) */ @media (pointer: coarse), (max-width: 1024px){ .onae-switcher__btn{ min-height:44px; min-width:44px; padding:0 12px; } } /* 플로팅 배치(사이트가 헤더에 넣기 애매할 때) */ .onae-switcher--float{ position:fixed; z-index:9998; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); background:var(--onae-bg-elev); border:1px solid var(--onae-border); border-radius:999px; padding:6px; box-shadow:var(--onae-shadow); } @media (max-width:480px){ .onae-switcher--float{ right:8px; bottom:8px; padding:4px; } .onae-switcher__btn{ padding:0 8px; font-size:12px; } } /* 테마 전환 시 깜빡임 방지 */ html.onae-theme-booting *{ transition:none !important; }