폰에서 화면이 깨지던 문제 수정.
- 전역 반응형 표 '카드뷰'가 모든 table에 적용돼, data-label 없는 목록 표
(수집함·발굴·발행 등)가 거대한 행으로 변해 페이지가 32만px로 늘어남.
→ 카드뷰를 .rcards opt-in 으로 스코프. 그 클래스 가진 레거시 표
(multi_channel_videos·videos)만 카드뷰, 나머지는 모바일에서 가로 스크롤.
- 대시보드: 모바일(≤680px) 미디어쿼리 추가 — 마스트헤드 세로 정렬, 긴
브레드크럼 숨김, 떡상 리더보드 액션 버튼을 아랫줄 우측 정렬, 숫자 축소.
- base.html: CSS/JS 링크에 v= 캐시버스팅 — 배포 후 브라우저가 옛 CSS를
캐시해 스타일이 깨지는 것 방지(CSS 변경 시 버전 올리기).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
대시보드의 editorial 정체성을 공용 디자인 토큰으로 끌어올려 전 페이지에 전파.
- variables.css: 종이 캔버스 + 잉크 텍스트 + 버밀리언(#ff4d23) 단색 액센트,
Bricolage Grotesque(헤딩, 라틴) + Hanken Grotesk(본문) + JetBrains Mono,
샤프한 모서리(radius 축소). 라이트 기본 + 다크. 기존 변수 별칭 유지로
각 페이지가 자동 적응.
- style.css: 헤딩 디스플레이 페이스, primary 버튼 단색 버밀리언, 배지 각짐 등
편집풍 마무리 터치.
한글은 디스플레이/모노 폰트에 없으므로 시스템 폰트로 자연 폴백.
수집함·칸반 라이트/다크 Playwright 검증.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Merge thumbnail+title+channel into one "영상" column like 수집함 so the table
fits without horizontal scroll. Promote .coll-table/.row-sel to global style.css
for reuse across list pages.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Category management collapsed into a slim single-row strip
- "사용법" button opens a reusable help modal (.modal-overlay/.modal-card +
.help-item) explaining categories, filters, list view, and row actions
- Merge thumbnail+title+channel into one "영상" column and tighten cells so the
whole table fits the viewport — no horizontal scroll on page or table card
- #mainContent min-width:0 to avoid flex overflow
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace raw checkboxes + stacked-label dropdowns with pill toggle chips
(.chip, accent when checked via :has) and a single aligned toolbar row;
result count as a badge. Adds reusable .toolbar/.chip/.field components.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Phase A+dashboard of the UI redesign:
- variables.css: light-default tokens + [data-theme=dark] overrides; old var
names aliased to theme tokens so existing markup adapts to both themes
- style.css: refined components (card/btn/nav/badge/bar/table/forms), tokenized
the dark-assuming rgba colors
- theme toggle: pre-paint init in base.html <head> + toggleTheme() in common.js,
persisted to localStorage; toggle button in sidebar
- sidebar.html: labeled nav with sections (분석/파이프라인/제작), active state,
account; Korean labels
- dashboard.html: tokenized inline colors; verified light & dark with real data
Spec: docs/superpowers/specs/2026-06-12-ui-redesign-design.md
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- publish.html: status column uses shared .badge (badge-muted/warning/
success) instead of its own .st-badge inline-color span
- collection.html / discover.html: drop .filter-sel rules now that the
shared `select` styling covers them (row-sel kept for compact inline)
- style.css: .gap-2 uses var(--space-2) for token consistency
No behavior change; follow-up cleanup from the design-uplift review.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
