d111610555
- 공용 프리미티브(ui.tsx): PageHeader·Segmented·Button·SearchForm·Legend· ScrollBox·ScrollTable·Modal + Card(fill/compact) 옵션 - 차트 공용 설정(lib/chart.ts): 축·그리드·툴팁 스타일 단일화 - 뷰포트 채우기 레이아웃 + content 영역 스크롤(Layout), 버튼 커서 복구 - 표: 헤더 밴드·행 좌우 패딩·고정/채움/auto 높이·sticky 헤더, 배지 줄바꿈 방지 - 작업 큐: 풀폭 표 + 행별 상세/JSON 모달(복사) - 상품·가격: 가로 배치, Y축 0 기준, 시점 클릭→몰별 비교, 커스텀 툴팁· 그라데이션 area, 몰별 컴팩트 표(소스 뱃지) - 크롤 상태: 도넛 중앙 총계·라운드 세그먼트, 막대 그라데이션, 툴팁 통일 - 테스트 검색: 결과 통일(모달·표·소스 뱃지), 진행상태 좌측 이동, 초기화 전 재검색 차단, 퍼널 가독성(감소량), 배송(로켓배송) 표기, 한 화면 컴팩트 - 사이드바: API 상태 상단 뱃지, 테스트 메뉴 배경색으로 구분 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
76 lines
2.2 KiB
CSS
76 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* 색 토큰 — 숫자 스케일(팀 관례) + dataviz 차트 크롬. 시리즈 색은 엔터티 고정:
|
|
네이버 #008a43(CVD 검증 통과 톤다운) · 쿠팡 #f0455b · 최종 #4f46e5. */
|
|
@theme {
|
|
--color-page: #f7f7f5;
|
|
--color-surface: #fcfcfb;
|
|
--color-surface-2: #f4f4f1;
|
|
--color-line-200: #e6e5df;
|
|
--color-line-100: #efeee9;
|
|
--color-grid: #e1e0d9;
|
|
|
|
--color-ink-900: #171a20;
|
|
--color-ink-700: #3d434f;
|
|
/* ink-500/400: 소형(11~13px) 캡션·라벨에 쓰이므로 WCAG AA 4.5:1 이상 필수
|
|
(기존 ink-400 #9aa1ac 은 2.54:1 로 미달 — 위계는 크기·굵기가 담당) */
|
|
--color-ink-500: #5d6470;
|
|
--color-ink-400: #6d7480;
|
|
|
|
--color-primary-700: #4338ca;
|
|
--color-primary-600: #4f46e5;
|
|
--color-primary-400: #8b7bff;
|
|
--color-primary-100: #e5e4fb;
|
|
--color-primary-50: #eef0ff;
|
|
|
|
/* 상태(큐·알림) — status 팔레트, 시리즈로 재사용 금지 */
|
|
--color-ok-600: #0f9d58;
|
|
--color-ok-50: #e7f6ee;
|
|
--color-warn-700: #a36a00;
|
|
--color-warn-600: #c77800;
|
|
--color-warn-50: #fdf3e3;
|
|
--color-run-600: #2563eb;
|
|
--color-run-50: #e8f0ff;
|
|
--color-dead-600: #d03b3b;
|
|
--color-dead-50: #fdeaea;
|
|
|
|
/* 중립 계열(차트 보조 — 유휴/종료 등 '무해한 상태') */
|
|
--color-neutral-400: #898781;
|
|
--color-neutral-300: #c3c2b7;
|
|
|
|
/* 차트 시리즈(엔터티 고정) */
|
|
--color-naver: #008a43;
|
|
--color-coupang: #f0455b;
|
|
--color-final: #4f46e5;
|
|
--color-cost-ai: #2a78d6;
|
|
--color-cost-proxy: #eda100;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
"Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
|
|
}
|
|
|
|
/* 앱을 뷰포트에 고정 — 페이지(body) 스크롤 없음. 스크롤은 content(main) 영역에서만. */
|
|
html, body, #root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-page text-ink-900 font-sans text-[14px] antialiased;
|
|
}
|
|
|
|
/* Tailwind v4 는 버튼 기본 커서를 default 로 바꿈 — 활성 버튼은 pointer 로 복구. */
|
|
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 테이블 숫자 열 정렬 */
|
|
.tnum {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* recharts 기본 폰트 */
|
|
.recharts-wrapper,
|
|
.recharts-tooltip-wrapper {
|
|
font-size: 12px;
|
|
}
|