From 9eec541ee0a80a2d079a4df3b9e8a5ec0fe4ae9a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 11 Jul 2026 20:59:00 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=8B=A4=ED=81=AC=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EB=B9=88=20=EC=83=81=ED=83=9C=20=EB=AA=85?=
 =?UTF-8?q?=EB=8F=84=20=EB=8C=80=EB=B9=84=20=EB=B0=8F=20=EC=9D=B8=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `main.kt` 내의 하드코딩된 인라인 스타일(`style="width: 100%"`, `style="color: #666"`)을 `.item-link` 및 `.empty-state` CSS 클래스로 분리
- 다크 모드(`@media (prefers-color-scheme: dark)`)에서 `.empty-state`의 텍스트 색상을 `#8b949e`로 지정하여 배경(`#0d1117`)과의 명도 대비(WCAG AA 기준) 문제 해결
- 넓이가 지정된 `.item-link`에 `box-sizing: border-box`를 추가하여 안전한 레이아웃 보장 및 CSP 호환성 개선
- 변경된 접근성 관련 학습 내용을 `.Jules/palette.md`에 추가 기록
---
 .Jules/index.html                    | 74 +++++++++++++++++++++++++++
 .Jules/palette.md                    |  3 ++
 .github/index.html                   | 74 +++++++++++++++++++++++++++
 .github/workflows/index.html         | 74 +++++++++++++++++++++++++++
 .jules/index.html                    | 76 ++++++++++++++++++++++++++++
 gradle/wrapper/index.html            | 75 +++++++++++++++++++++++++++
 src/main/index.html                  | 74 +++++++++++++++++++++++++++
 src/main/kotlin/html4tree/index.html | 75 +++++++++++++++++++++++++++
 src/main/kotlin/html4tree/main.kt    | 19 +++++--
 src/main/kotlin/index.html           | 74 +++++++++++++++++++++++++++
 src/test/index.html                  | 74 +++++++++++++++++++++++++++
 src/test/kotlin/html4tree/index.html | 75 +++++++++++++++++++++++++++
 src/test/kotlin/index.html           | 74 +++++++++++++++++++++++++++
 13 files changed, 838 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/index.html
 create mode 100644 .github/index.html
 create mode 100644 .github/workflows/index.html
 create mode 100644 .jules/index.html
 create mode 100644 gradle/wrapper/index.html
 create mode 100644 src/main/index.html
 create mode 100644 src/main/kotlin/html4tree/index.html
 create mode 100644 src/main/kotlin/index.html
 create mode 100644 src/test/index.html
 create mode 100644 src/test/kotlin/html4tree/index.html
 create mode 100644 src/test/kotlin/index.html
diff --git a/.Jules/index.html b/.Jules/index.html
new file mode 100644
index 0000000..edb756d
--- /dev/null
+++ b/.Jules/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>.Jules</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>.Jules</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./palette.md" aria-label="palette.md 파일"><span aria-hidden="true">&rtrif;</span> palette.md</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/.Jules/palette.md b/.Jules/palette.md
index 98c341f..e7f0830 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -4,3 +4,6 @@
 ## 2024-07-10 - 다크 모드 지원 및 지역화 일관성 확보
 **Learning:** `html4tree` CLI로 생성되는 정적 HTML에서 사용자는 네이티브 다크 모드를 기대하며(접근성, 가독성 문제), `<nav>` 레이블("Directory listing")이 다른 UI와 다르게 영문으로 되어 있어 스크린 리더 환경 등에서 지역화(Localization) 일관성을 해칩니다.
 **Action:** `prefers-color-scheme: dark` 미디어 쿼리를 CSS에 추가하여 네이티브 다크 모드를 지원하고, `<nav aria-label="Directory listing">`을 `<nav aria-label="디렉토리 목록">`으로 수정하여 UI를 한국어로 통일했습니다.
+## 2024-11-09 - [다크 모드 빈 상태(Empty State) 명도 대비 및 인라인 스타일 개선]
+**Learning:** 다크 모드 지원 시 하드코딩된 인라인 스타일(`color: #666`)은 다크 배경(`background-color: #0d1117`)에서 텍스트 명도 대비(WCAG AA 기준)를 심각하게 떨어뜨립니다. 또한, `style="width: 100%"`와 같은 인라인 스타일은 패딩 및 테두리를 포함하지 않아 스크롤바 생성 등의 원치 않는 레이아웃 이슈를 유발할 수 있으며 CSP 호환성에도 불리합니다.
+**Action:** 요소의 인라인 스타일을 제거하고 명시적인 CSS 클래스(`.empty-state`, `.item-link`)로 분리합니다. `.empty-state`의 경우 다크 모드(`@media (prefers-color-scheme: dark)`)에서 명도 대비를 충족하는 색상(`#8b949e`)을 제공하고, 넓이가 지정된 요소에는 `box-sizing: border-box`를 추가하여 안전한 레이아웃을 구성합니다.
diff --git a/.github/index.html b/.github/index.html
new file mode 100644
index 0000000..996da4a
--- /dev/null
+++ b/.github/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>.github</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>.github</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./workflows/" aria-label="workflows 디렉토리"><span aria-hidden="true">&#128193;</span> workflows</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/.github/workflows/index.html b/.github/workflows/index.html
new file mode 100644
index 0000000..1d13f71
--- /dev/null
+++ b/.github/workflows/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>workflows</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>workflows</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./ci.yml" aria-label="ci.yml 파일"><span aria-hidden="true">&rtrif;</span> ci.yml</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/.jules/index.html b/.jules/index.html
new file mode 100644
index 0000000..9b88896
--- /dev/null
+++ b/.jules/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>.jules</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>.jules</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./bolt.md" aria-label="bolt.md 파일"><span aria-hidden="true">&rtrif;</span> bolt.md</a></li>
+          <li><a class="item-link" href="./palette.md" aria-label="palette.md 파일"><span aria-hidden="true">&rtrif;</span> palette.md</a></li>
+          <li><a class="item-link" href="./sentinel.md" aria-label="sentinel.md 파일"><span aria-hidden="true">&rtrif;</span> sentinel.md</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/gradle/wrapper/index.html b/gradle/wrapper/index.html
new file mode 100644
index 0000000..fc3641f
--- /dev/null
+++ b/gradle/wrapper/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>wrapper</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>wrapper</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./gradle-wrapper.jar" aria-label="gradle-wrapper.jar 파일"><span aria-hidden="true">&rtrif;</span> gradle-wrapper.jar</a></li>
+          <li><a class="item-link" href="./gradle-wrapper.properties" aria-label="gradle-wrapper.properties 파일"><span aria-hidden="true">&rtrif;</span> gradle-wrapper.properties</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/main/index.html b/src/main/index.html
new file mode 100644
index 0000000..dde9003
--- /dev/null
+++ b/src/main/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>main</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>main</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./kotlin/" aria-label="kotlin 디렉토리"><span aria-hidden="true">&#128193;</span> kotlin</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/main/kotlin/html4tree/index.html b/src/main/kotlin/html4tree/index.html
new file mode 100644
index 0000000..8f6d32b
--- /dev/null
+++ b/src/main/kotlin/html4tree/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>html4tree</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>html4tree</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./main.kt" aria-label="main.kt 파일"><span aria-hidden="true">&rtrif;</span> main.kt</a></li>
+          <li><a class="item-link" href="./util.kt" aria-label="util.kt 파일"><span aria-hidden="true">&rtrif;</span> util.kt</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 936c2b7..4ae87c7 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -197,6 +197,16 @@ fun process_dir(curr_dir: File){
                   transition: none;
                 }
               }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
               @media (prefers-color-scheme: dark) {
                 body {
                   background-color: #0d1117;
@@ -209,6 +219,9 @@ fun process_dir(curr_dir: File){
                   background-color: #161b22;
                   outline-color: #58a6ff;
                 }
+                .empty-state {
+                  color: #8b949e;
+                }
               }
               </style>
               """
@@ -228,7 +241,7 @@ fun process_dir(curr_dir: File){
          <h1>${curr_dir.getName().escapeHtml()}</h1>
          <nav aria-label="디렉토리 목록">
          <ul>
-            <li><a style="display:block; width:100%" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -245,14 +258,14 @@ fun process_dir(curr_dir: File){
                   val encodedHref = if (isLinkedDirectory) { "./${fileName.urlEncodePath()}/" } else { "./${fileName.urlEncodePath()}" }
                   val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
                   val icon = if (isLinkedDirectory) { "&#128193;" } else { "&rtrif;" }
-                  l.append("""          <li><a style="display:block; width:100%" href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
+                  l.append("""          <li><a class="item-link" href="${encodedHref}" aria-label="${ariaLabel}"><span aria-hidden="true">${icon}</span> ${fileName.escapeHtml()}</a></li>""")
                   l.append('\n')
                }
            }
         }
 
         if(l.isEmpty()){
-            l.append("""          <li><div style="padding: 0.5rem; color: #666; font-style: italic;">이 디렉토리는 비어 있습니다.</div></li>""")
+            l.append("""          <li><div class="empty-state">이 디렉토리는 비어 있습니다.</div></li>""")
             l.append('\n')
         }
 
diff --git a/src/main/kotlin/index.html b/src/main/kotlin/index.html
new file mode 100644
index 0000000..aba8c42
--- /dev/null
+++ b/src/main/kotlin/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>kotlin</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>kotlin</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./html4tree/" aria-label="html4tree 디렉토리"><span aria-hidden="true">&#128193;</span> html4tree</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/test/index.html b/src/test/index.html
new file mode 100644
index 0000000..ee3372a
--- /dev/null
+++ b/src/test/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>test</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>test</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./kotlin/" aria-label="kotlin 디렉토리"><span aria-hidden="true">&#128193;</span> kotlin</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/test/kotlin/html4tree/index.html b/src/test/kotlin/html4tree/index.html
new file mode 100644
index 0000000..bb0fa7a
--- /dev/null
+++ b/src/test/kotlin/html4tree/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>html4tree</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>html4tree</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./MainTest.kt" aria-label="MainTest.kt 파일"><span aria-hidden="true">&rtrif;</span> MainTest.kt</a></li>
+          <li><a class="item-link" href="./UtilTest.kt" aria-label="UtilTest.kt 파일"><span aria-hidden="true">&rtrif;</span> UtilTest.kt</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
diff --git a/src/test/kotlin/index.html b/src/test/kotlin/index.html
new file mode 100644
index 0000000..aba8c42
--- /dev/null
+++ b/src/test/kotlin/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="ko">
+     <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- 보안 향상: 인라인 스크립트 실행 방지 -->
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
+        <title>kotlin</title>
+
+              <style>
+              ul {
+                list-style-type: none;
+                padding-left: 0;
+              }
+              a {
+                padding: 0.5rem;
+                text-decoration: none;
+                color: #0366d6;
+                border-radius: 4px;
+                transition: background-color 0.2s ease, outline-color 0.2s ease;
+              }
+              a:hover, a:focus-visible {
+                background-color: #f6f8fa;
+                text-decoration: underline;
+                outline: 2px solid #0366d6;
+                outline-offset: -2px;
+              }
+              @media (prefers-reduced-motion: reduce) {
+                a {
+                  transition: none;
+                }
+              }
+              .item-link {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+              }
+              .empty-state {
+                padding: 0.5rem;
+                color: #666;
+                font-style: italic;
+              }
+              @media (prefers-color-scheme: dark) {
+                body {
+                  background-color: #0d1117;
+                  color: #c9d1d9;
+                }
+                a {
+                  color: #58a6ff;
+                }
+                a:hover, a:focus-visible {
+                  background-color: #161b22;
+                  outline-color: #58a6ff;
+                }
+                .empty-state {
+                  color: #8b949e;
+                }
+              }
+              </style>
+
+     </head>
+     <body>
+       <main>
+         <h1>kotlin</h1>
+         <nav aria-label="디렉토리 목록">
+         <ul>
+            <li><a class="item-link" href="./.." aria-label="상위 디렉토리로 이동"><span aria-hidden="true">&#x21B0;</span> ..</a></li>
+          <li><a class="item-link" href="./html4tree/" aria-label="html4tree 디렉토리"><span aria-hidden="true">&#128193;</span> html4tree</a></li>
+
+         </ul>
+         </nav>
+       </main>
+    </body>
+</html>
