🎨 Palette: 시스템 폰트 및 레이아웃 개선으로 디렉토리 목록 가독성 향상

[seonghobae]

💡 What

생성된 index.html 파일에 다음의 기본 레이아웃 및 타이포그래피 CSS 스타일을 추가했습니다.

• body 태그에 system-ui 폰트, 적절한 line-height(1.5), 색상 및 패딩 추가.
• <main> 컨테이너에 max-width: 800px; margin: 0 auto;를 적용하여 라인 길이를 제한.

🎯 Why

디폴트 상태의 브라우저 폰트(보통 Times New Roman)와 전체 창 너비를 채우는 렌더링 방식은 넓은 스크린 환경에서 텍스트 줄글이 너무 길어지게 만들어, 사용자가 디렉토리 목록을 탐색(스캐닝)할 때 눈의 피로도를 높이고 가독성을 저해합니다. 기본적인 레이아웃 제약과 모던 폰트를 적용하면 이 문제를 손쉽게 해결할 수 있습니다.

📸 Before/After

Before:

• 전체 너비를 차지하며 엣지에 텍스트가 붙어있음.
• 브라우저 기본 세리프(Serif) 폰트로 렌더링.

After:

• 중앙 정렬된 최대 너비(800px) 컨테이너에서 깔끔하게 보여짐.
• OS 기본 산세리프(Sans-serif) 폰트가 적용되어 가독성이 상승함.

♿ Accessibility

• 글줄 길이가 너무 길어지지 않게 함으로써(Line length constraints), 인지/학습 장애가 있는 사용자나 저시력자가 리스트를 더 쉽게 훑어볼 수 있도록 돕습니다 (WCAG 관점에서의 리딩 개선).
• 더 나은 대비와 현대적인 타이포그래피로 전반적인 가시성을 향상했습니다.

✅ Verification

• ./gradlew test jacocoTestReport를 통해 변경된 CSS가 정상 출력되는지 검증하는 단위 테스트 추가 (MainTest.kt) 및 커버리지 100% 유지.
• .jules/palette.md에 관련된 UX 학습(레이아웃 제약을 통한 가독성 향상) 항목 추가.

---

PR created automatically by Jules for task 10280174232133268498 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.