/* ============================================================
에브리티(everytee.co.kr) — 브랜드 컬러 토큰 v1.0
메인 컬러 #6D5BE1 → #6200EA 전환
------------------------------------------------------------
배치: /front/zones/css/everytee-brand-tokens.css
로드: bootstrap.css / style.css 보다 "먼저"
------------------------------------------------------------
왜 램프 전체를 바꾸는가
------------------------------------------------------------
style.css 에는 #6D5BE1 외에도 색상환 248° 계열 보라가 7종 더
하드코딩되어 있다 (총 30줄 / 44회).
#9585FF #7B6BE4 #5C43FC #6D5BE1 #614DDD #5942BF
#3C2DA4 #271892
#6D5BE1 하나만 #6200EA(265°)로 바꾸면 나머지 7종이 248°에
남아 같은 화면 안에서 색상환이 17° 어긋난다. 특히 아래 두
그라디언트는 중간에서 색이 꺾여 보인다.
.bg-aitalk linear-gradient(#6D5BE1 → #3C2DA4)
.loader linear-gradient(#6D5BE1 → #5942BF)
그래서 8종 전부를 265° 램프로 재매핑한다.
명도는 #6200EA(L 45.9%)를 메인 자리에 고정하고, 나머지는
기존 램프의 상대 간격을 유지하도록 비례 축소·확대했다.
============================================================ */
:root {
/* --- 브랜드 램프 (H 265° / 숫자가 클수록 어둡다) ------------
토큰 신규 기존 용도
---------------------------------------------------------- */
--et-brand-50: #F3ECFD; /* — 신규: 배경 틴트 · hover row */
--et-brand-100: #E5D4FC; /* — 신규: 뱃지 배경 · 선택 상태 */
--et-brand-200: #CBA9F9; /* — 신규: 비활성 테두리 */
--et-brand-300: #9C5CF5; /* ← #9585FF 어두운 카드 위 강조 텍스트 */
--et-brand-400: #6E06FF; /* ← #7B6BE4 보조 텍스트 */
--et-brand-550: #6400EE; /* ← #5C43FC AI 버튼 테두리 그라디언트 */
--et-brand-600: #6200EA; /* ← #6D5BE1 ★ 메인 — 버튼·헤더·링크·강조 */
--et-brand-700: #5C00DD; /* ← #614DDD 버튼 hover */
--et-brand-750: #5000BE; /* ← #5942BF 로더 그라디언트 끝 */
--et-brand-800: #41009B; /* ← #3C2DA4 인트로 배경 · 필터탭 · 모달 제목 */
--et-brand-900: #35007E; /* ← #271892 AI 버튼 활성 · msg-link */
/* --- 램프 밖 액센트 (248° 계열 아님 — 그대로 유지) --------- */
--et-accent-magenta: #9E2DA4; /* .site-bottom .btn-ai 테두리 그라디언트 */
/* --- 투명도 파생 (#6200EA = rgb(98,0,234)) ----------------- */
--et-brand-a08: rgba(98, 0, 234, .08);
--et-brand-a12: rgba(98, 0, 234, .12);
--et-brand-a24: rgba(98, 0, 234, .24);
--et-focus-ring: 0 0 0 3px rgba(98, 0, 234, .28);
}
/* ============================================================
대비 실측치 (WCAG 2.1)
------------------------------------------------------------
토큰 기존 → 신규 흰 배경 검정 배경
------------------------------------------------------------
brand-300 #9585FF→#9C5CF5 2.97 → 3.99 ↑ 7.08 → 5.26 ↓
brand-400 #7B6BE4→#6E06FF 4.15 → 6.70 ↑ 5.07 → 3.13 ↓
brand-550 #5C43FC→#6400EE 5.73 → 7.56 ↑ 3.66 → 2.78 ↓
brand-600 #6D5BE1→#6200EA 4.96 → 7.76 ↑ 4.23 → 2.71 ↓
brand-700 #614DDD→#5C00DD 5.81 → 8.40 ↑ 3.61 → 2.50 ↓
brand-750 #5942BF→#5000BE 7.10 →10.07 ↑ 2.96 → 2.08 ↓
brand-800 #3C2DA4→#41009B 9.98 →12.37 ↑ 2.10 → 1.70 ↓
brand-900 #271892→#35007E 12.87 →14.46 ↑ 1.63 → 1.45 ↓
해석
· 흰 배경 위 텍스트·버튼은 전 단계 개선된다.
· 어두운 배경 위 보라 요소는 전 단계 악화된다.
현재 style.css 에 다크 서피스 위 보라 텍스트는
.card-golfcourse .text-theme (brand-300) 한 곳뿐이다.
⚠ 아래 §미해결 1 참고.
============================================================ */
/* ============================================================
§미해결 1 — .card-golfcourse .text-theme (style.css:259)
------------------------------------------------------------
현재: color: #9585FF !important; → 흰 배경 대비 2.97:1 (AA 미달)
신규: #9C5CF5 → 3.99:1 (여전히 AA 미달)
이 규칙은 원래부터 접근성 기준에 미달이었다. 기계적 치환으로는
해결되지 않는다. 카드 배경이 무엇인지에 따라 둘 중 하나를 고를 것.
· 카드 배경이 흰색/밝은 색이면 → var(--et-brand-600) (7.76:1)
· 카드 배경이 어두운 색이면 → var(--et-brand-300) 유지 후
실제 배경색 기준으로 재측정
로그인 뒤 페이지라 확인하지 못했다. 배경색을 알려주면 확정해 준다.
============================================================ */