Update index.html

index.html

@@ -34,12 +34,15 @@
             display: flex;
             flex-direction: column;
             width: 100%;
+            height: calc(100vh - 40px); /* 전체 높이에서 컨테이너 패딩 제외 */
+            box-sizing: border-box;
         }
         .header {
             text-align: center;
             padding: 20px 0;
             border-bottom: 1px solid var(--border-color);
             margin-bottom: 20px;
+            flex-shrink: 0; /* 헤더는 크기 고정 */
         }
         .logo {
             display: flex;
@@ -65,14 +68,16 @@
             display: flex;
             flex-direction: column;
             border: 1px solid var(--border-color);
+            overflow: hidden; /* 내부 스크롤을 위해 오버플로우 숨김 */
+            min-height: 0; /* flexbox에서 스크롤이 작동하도록 함 */
         }
         .chat-messages {
             flex-grow: 1;
             overflow-y: auto;
-            margin-bottom: 20px;
             padding: 10px;
             scrollbar-width: thin;
             scrollbar-color: var(--primary-color) var(--card-bg);
+            min-height: 0; /* flexbox에서 스크롤이 작동하도록 함 */
         }
         .chat-messages::-webkit-scrollbar {
             width: 6px;
@@ -116,6 +121,7 @@
             margin-top: 20px;
             display: flex;
             justify-content: center;
+            flex-shrink: 0; /* 컨트롤은 크기 고정 */
         }
         button {
             background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));