report.crowny.org GUI 통일 — 크라우니월드 표준 (tiomta·crowny.org)

개요

report.crowny.org 의 디자인을 티옴타(tiomta.com) = 크라우니월드 표준 브랜드 와 통일. crowny.org 의 라이트 톤도 함께 흡수하여, 라이트 기본 + 다크 토글 듀얼 테마로 통일.

무엇을 했는지

1. 디자인 토큰 풀세트 추출 — tiomta.com 의 :root + :root[data-theme="dark"]

- Surfaces: --bg / --bg-card / --bg-soft / --bg-hover / --border / --border2 - Text: --text / --text2 / --text3 - Accent: --accent (#C9A961) / --accent-dim / --accent-soft - 4상 컬러 T/O/A/U: T=#22A06B(양), O=#C9A961(균형), A=#D93025(음), U=#7C6CDB(구분) - Shadow / Font / Radius / Motion

1. report.css 토큰 교체 — :root 8~48줄을 표준 토큰으로 교체, :root[data-theme="dark"] 추가, 기존 변수명(--bg-surface, --surface-raised, --text-secondary 등) alias 로 보존
2. index.html: data-theme="light" 기본, header.tiomta-top 추가 (브랜드 + 분석·작성/도구 링크 + 테마 토글)
3. 도구.html: 인라인 스타일을 모두 토큰 변수(var(--bg) 등)로 교체. 4상 컬러를 패널별로 시각화(T/O/A/U 점), 상단 six-bar 추가
4. 테마 토글 자바스크립트 — localStorage 에 선택 보존, 두 페이지 공통

적용 위치

crowny-report/public/
  css/report.css            ← :root + :root[data-theme="dark"] 토큰 표준화
  index.html                ← data-theme + tiomta-top 헤더 + 토글
  도구.html                  ← 4상 컬러 패널 + tiomta-top 헤더 + 토글 + six-bar

디자인 원칙

• 라이트 기본 (#FAF9F7 배경 + #1A1A1A 글씨)
• 다크 토글 (#0F0D14 배경 + #ECECF1 글씨)
• 골드 액센트 (#C9A961 / 다크는 #D9B870)
• 4상 컬러 일관 사용 — 도구 패널마다 T/O/A/U 매핑하여 카테고리 시각 구분
• 표준 폰트 -apple-system, Noto Sans KR, Pretendard
• 디자인 차별점 --font-display 만 Cormorant Garamond 유지 (h1 등)

검증

• curl / → data-theme="light", TIOMTA · Report Brain 헤더 ✓
• curl /도구.html → data-theme="light", 4상 패널 ✓
• CSS 토큰: 라이트 --bg: #FAF9F7, 다크 --bg: #0F0D14, accent/4상 컬러 정의 ✓
• 본문 하드코딩 색상 없음 (모두 var(--*) 사용)

관련 파일

• /Users/ef/crowny-tiomta/public/index.html — 표준 원본
• /Users/ef/crowny-report/public/css/report.css — 적용 결과
• /Users/ef/crowny-report/CLAUDE.md — 갱신
• 메모리: project_report_crowny_org.md 갱신, feedback_design_standard_origin.md 참조

잔여 이슈

1. 실제 브라우저 시각 확인은 사용자가 직접 (자동화된 시각 검증 도구 없음)
2. crowny.org 본체(크림/초콜릿 테마)는 별도 — tiomta 표준으로 점진 이행 검토 필요
3. 기타 도메인(asset/play/edu 등)도 같은 표준 적용 시 통일감 강화 가능