From 2dd7d2dceb028fb5dfad8ee0800495b899184fc0 Mon Sep 17 00:00:00 2001
From: Horoli <sunha321@gmail.com>
Date: Sun, 24 May 2026 06:56:45 +0900
Subject: [PATCH] ui: refine Arena logo layout and update todo documentation

---
 index.html     | 18 ++++++++++++++----
 src/styles.css |  9 +++++++++
 todo.md        |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 7eddb30..2d5273d 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Arena Picker</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚔️</text></svg>">
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚔️</text></svg>"
+    />
     <style>
       html.app-booting,
       html.app-booting body {
@@ -81,9 +84,12 @@
         </div>
       </section>
 
-      <section class="intro-stage" aria-label="Arena 시작 화면">
+      <section class="intro-stage" aria-label="Arena Picker 시작 화면">
         <div class="intro-content">
-          <h1 class="arena-logo">Arena</h1>
+          <h1 class="arena-logo" aria-label="Arena Picker">
+            <span>ARENA</span>
+            <span class="small-text">PICKER</span>
+          </h1>
           <button
             id="start-button"
             class="start-button"
@@ -290,7 +296,11 @@ Player 10</textarea
               <div class="about-field-row">
                 <dt>github</dt>
                 <dd data-about-field="github">
-                  <a href="https://github.com/Horoli" target="_blank" rel="noreferrer">
+                  <a
+                    href="https://github.com/Horoli"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     https://github.com/Horoli
                   </a>
                 </dd>
diff --git a/src/styles.css b/src/styles.css
index adb7e73..070f61e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -273,6 +273,15 @@ textarea:focus-visible {
   text-transform: uppercase;
 }
 
+.arena-logo .small-text {
+  font-size: 0.7em; /* 원래 크기의 85%로 축소 (원하는 만큼 숫자를 조절해 보세요) */
+  margin-top: 0.05em; /* 글자가 줄어들면서 생긴 간격을 미세하게 조정하고 싶다면 사용 */
+}
+
+.arena-logo span {
+  display: block;
+}
+
 .arena-meta {
   position: fixed;
   right: clamp(10px, 2vw, 18px);
diff --git a/todo.md b/todo.md
index 16cbe97..c491662 100644
--- a/todo.md
+++ b/todo.md
@@ -48,8 +48,8 @@
 
 9. 전투 진입 UI, 좌측 HUD badge, 좌측 하단 킬로그 개선 (완료)
 - **조치 사항**:
-    - 최초 접속 화면에 투명 전투 프리뷰, `Arena` 로고, `Start` 버튼을 배치.
-    - `Start` 클릭 시 우측 옵션 drawer가 열리고 홈 drawer 상태에서는 `Arena` 로고 위치를 유지한 채 `Start` 버튼을 숨기며, 전투 시작 시 실제 경기 화면으로 전환.
+    - 최초 접속 화면에 투명 전투 프리뷰, `ARENA` / `PICKER` 2단 로고, `Start` 버튼을 배치.
+    - `Start` 클릭 시 우측 옵션 drawer가 열리고 홈 drawer 상태에서는 `ARENA` / `PICKER` 로고 위치를 유지한 채 `Start` 버튼을 숨기며, 전투 시작 시 실제 경기 화면으로 전환.
     - 팀 badge를 상단 좌/우 분할에서 경기장 밖 좌측 HUD 레일로 이동.
     - badge를 팀명, 팀 색상 구분선, 생존 인원 형식으로 표기.
     - 좌측 HUD 레일 폭과 경기장 시작 위치를 분리 계산해 badge가 미니맵과 경기장 캔버스를 가리지 않도록 조정.