[ui] 마크다운 콘텐츠 가독성 및 스타일 시스템 개선 #173
Description
현재 문제
마크다운 콘텐츠의 가독성이 낮고, 일관된 스타일 시스템이 부족합니다:
- 코드 블록의 배경색과 여백이 불충분함
- 링크 색상이 일관되지 않음 (visited 링크가 보라색으로 변경됨)
- 요소 간 간격(spacing)이 일관되지 않음
- 다크 모드 지원이 부족함
해결 목표
CSS 변수 시스템 구축:
- spacing, code, link 색상을 CSS 변수로 관리
- 다크 모드 자동 전환 지원
코드 블록 개선:
- GitHub 스타일 배경색 및 테두리 적용
- 인라인 코드와 코드 블록 명확히 구분
- 가독성을 위한 여백 및 패딩 증가
링크 스타일 통일:
- 모든 링크에 일관된 파란색 적용
- visited 링크도 동일한 색상 유지
Vertical spacing 시스템:
- 제목과 콘텐츠 간격 최적화 (proximity principle)
- 문단 간격 증가 (8px → 16px)
- line-height 증가 (1.6 → 1.7)
기대 결과
- 문서 가독성이 크게 향상됩니다
- GitHub 스타일과 유사한 일관된 디자인이 적용됩니다
- 다크 모드에서도 자연스럽게 동작합니다
- 유지보수 가능한 CSS 변수 시스템이 구축됩니다