🎨 Palette: 긴 디렉토리 이름의 모바일 레이아웃 깨짐 방지

.jules/palette.md

@@ -52,3 +52,7 @@
 ## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선
 **Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다.
 **Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다.
+
+## 2026-08-06 - 긴 텍스트로 인한 레이아웃 깨짐 방지
+**Learning:** 매우 긴 파일이나 디렉토리 이름(공백 없는 문자열)은 모바일 환경 등 제한된 너비에서 텍스트 줄바꿈이 일어나지 않아 레이아웃을 깨뜨리고 가로 스크롤을 유발할 수 있습니다.
+**Action:** 긴 텍스트가 렌더링될 수 있는 제목 요소(예: `h1`)에 항상 `overflow-wrap: anywhere;` 속성을 적용하여 텍스트가 정상적으로 줄바꿈되도록 해야 합니다.

src/main/kotlin/html4tree/main.kt

@@ -24,6 +24,9 @@ main {
   max-width: 800px;
   margin: 0 auto;
 }
+h1 {
+  overflow-wrap: anywhere;
+}
 ul {
   list-style-type: none;
   padding-left: 0;