Redesign preview as before and after comparison

[fliklab]

변경 사항

• 적용 전 브라우저 줄바꿈과 적용 후 균형 줄바꿈을 한 화면에서 비교하도록 미리보기를 개편했습니다.
• 충분한 너비에서는 좌우, 좁은 너비에서는 상하로 배치하고 SVG 화살표와 짧은 전환 모션을 적용했습니다.
• 글자 크기와 제목 폭 조절을 미리보기 가까이 이동하고, 제목 경계 손잡이로 폭을 직접 드래그하거나 키보드로 조절할 수 있게 했습니다.
• 코드 보기는 화면 너비와 관계없이 항상 반투명 오버레이로 표시하며 HTML/CSS 탭만 유지했습니다.
• 축소 모션 환경에서는 장식적 전환을 즉시 제거합니다.

검증

• npm run lint
• npm test
• git diff --check
• 1440×1000, 768×1024, 375×812 실제 브라우저 반응형 확인
• 코드 오버레이 위치, HTML/CSS 탭, 폭 키보드 조절, 모바일 가로 넘침, reduced motion 확인