🎨 Palette: 디렉토리 링크에 부드러운 호버 트랜지션 추가 및 인라인 스타일 개선

[seonghobae]

💡 작업 내용 (What):
생성된 index.html 내비게이션 트리의 사용자 경험(UX)과 접근성을 향상시키기 위해, 링크들에 CSS 전환(transition) 효과를 추가하고 인라인 스타일을 클래스 기반 스타일로 리팩터링했습니다.

🎯 작업 이유 (Why):
디렉토리 및 파일 링크에 마우스를 올리거나 키보드로 포커스할 때 부드러운 시각적 피드백을 제공하기 위함입니다. 또한, 전정기관 장애가 있는 사용자의 편의를 고려하여 prefers-reduced-motion 미디어 쿼리를 추가해 전환 효과를 안전하게 비활성화하도록 했습니다. 추가적으로, 인라인 스타일 사용을 금지하는 CSP(Content Security Policy) 제약 사항을 준수하기 위해 인라인 스타일들을 <style> 블록으로 분리했습니다.

📸 전/후 (Before/After):

• 기존: 링크에 호버/포커스할 때 애니메이션 없이 바로 색상이 바뀌었으며, display:block; width:100% 등의 스타일이 HTML 요소 내부에 인라인으로 적용되었습니다. 빈 디렉토리 메시지도 인라인 스타일로 지정되었습니다.
• 개선 후: 링크에 호버/포커스할 때 0.2초 동안 부드러운 상태 전환 효과가 나타납니다. 모든 스타일 요소는 <style> 블록 내부로 이동했으며, 빈 디렉토리 메시지 역시 .empty-state 클래스를 사용해 일관성 있게 구성했습니다.

♿ 접근성 (Accessibility):
사용자 시스템 환경설정에서 '동작 줄이기(Reduce motion)'가 켜져 있을 경우 CSS 트랜지션 효과를 비활성화하는 규칙을 추가하여 접근성을 높였습니다.

---

PR created automatically by Jules for task 10124410944835721873 started by @seonghobae

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.