디자인 업데이트

serial2_terminal.h

@@ -55,31 +55,43 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             font-weight: normal;
         }
         
+        /* ========== 통일된 네비게이션 ========== */
         .nav {
             background: #f8f9fa;
             padding: 0;
             border-bottom: 2px solid #e0e0e0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
         }
         
         .nav a {
-            display: inline-block;
-            padding: 15px 25px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px 20px;
             text-decoration: none;
             color: #666;
             font-weight: 500;
+            font-size: 0.95em;
             border-bottom: 3px solid transparent;
             transition: all 0.3s;
+            white-space: nowrap;
+            min-width: 120px;
         }
         
         .nav a:hover {
             background: #e9ecef;
             color: #667eea;
+            transform: translateY(-2px);
         }
         
         .nav a.active {
             color: #764ba2;
             border-bottom-color: #764ba2;
             background: white;
+            font-weight: 600;
         }
         
         .content {
@@ -449,19 +461,67 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             text-transform: uppercase;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .control-panel {
-                grid-template-columns: 1fr;
+            body {
+                padding: 5px;
             }
             
-            .control-group {
-                grid-template-columns: 1fr;
+            .container {
+                border-radius: 10px;
             }
             
             .header {
+                padding: 15px;
                 flex-direction: column;
+                text-align: center;
                 gap: 10px;
             }
+            
+            .header h1 {
+                font-size: 1.4em;
+            }
+            
+            .nav {
+                padding: 5px;
+            }
+            
+            .nav a {
+                padding: 12px 15px;
+                font-size: 0.85em;
+            }
+            
+            .content {
+                padding: 15px;
+            }
+            
+            .btn {
+                padding: 10px 20px;
+                font-size: 13px;
+            }
+        }
+        
+        @media (min-width: 769px) and (max-width: 1024px) {
+            .header h1 {
+                font-size: 1.6em;
+            }
+            
+            .nav a {
+                padding: 13px 18px;
+                font-size: 0.9em;
+            }
+            
+            .content {
+                padding: 25px;
+            }
+        }
+        
+        @media (min-width: 1025px) {
+            .content {
+                padding: 30px;
+            }
         }
     </style>
 </head>