패널 레이아웃 최적화 - 16:9 뷰포트 내 정렬

개선사항:
1. 패널 높이: 100vh (뷰포트 전체)
2. 패딩 축소: 20px → 12px
3. 섹션 마진 축소: 20px → 8px
4. 섹션 패딩 축소: 15px → 8px
5. 요소 간격 최적화: 모든 margin/padding 축소
6. 폰트 크기 조정: 13px → 12px (본문), 더 작은 요소들
7. 마지막 요소 하단 고정: margin-top: auto

결과:
- 16:9 화면에서 아래 스크롤 없음
- 패널이 정확히 뷰포트 높이에 맞춤
- 모든 정보가 스크롤 없이 표시됨
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

out/viewer-correct.html

@@ -34,14 +34,14 @@
             width: fit-content;
             min-width: 300px;
             max-width: 650px;
+            height: 100vh;
             background: #1a1f2e;
-            padding: 20px;
+            padding: 12px;
-            overflow-y: auto;
+            overflow: hidden;
-            overflow-x: hidden;
             border-left: 1px solid #2d3748;
             display: flex;
             flex-direction: column;
-            font-size: 13px;
+            font-size: 12px;
         }
 
         .panel > * {
@@ -49,49 +49,57 @@
             width: 100%;
         }
 
+        .panel > :not(:last-child) {
+            margin-bottom: 8px;
+        }
+
+        .panel > :nth-last-child(1) {
+            margin-top: auto;
+        }
+
         .panel h2 {
             color: #10b981;
-            font-size: 14px;
+            font-size: 13px;
-            margin-bottom: 15px;
+            margin-bottom: 6px;
-            padding-bottom: 8px;
+            padding-bottom: 4px;
             border-bottom: 2px solid #10b981;
             font-weight: 700;
         }
 
         .panel h3 {
             color: #cbd5e0;
-            font-size: 11px;
+            font-size: 10px;
-            margin-bottom: 10px;
+            margin-bottom: 4px;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
+            letter-spacing: 0.3px;
         }
 
         .badge {
             display: inline-block;
             background: #10b981;
             color: #1a1f2e;
-            padding: 4px 10px;
+            padding: 3px 8px;
-            border-radius: 16px;
+            border-radius: 14px;
-            font-size: 10px;
+            font-size: 9px;
             font-weight: 700;
-            margin-bottom: 12px;
+            margin-bottom: 6px;
             width: fit-content;
         }
 
         .loading {
-            padding: 15px;
+            padding: 8px;
             background: #252d3d;
-            border-radius: 8px;
+            border-radius: 6px;
             color: #fbbf24;
-            font-size: 13px;
+            font-size: 11px;
-            margin-bottom: 15px;
+            margin-bottom: 6px;
         }
 
         .section {
-            margin-bottom: 20px;
+            margin-bottom: 8px;
-            padding: 15px;
+            padding: 8px;
             background: #252d3d;
-            border-radius: 8px;
+            border-radius: 6px;
             border-left: 3px solid #10b981;
         }
 
@@ -107,9 +115,9 @@
         .stat-row {
             display: flex;
             justify-content: space-between;
-            font-size: 13px;
+            font-size: 11px;
             color: #cbd5e0;
-            margin: 8px 0;
+            margin: 3px 0;
         }
 
         .stat-label {