디자인 업데이트

settings.h

@@ -26,31 +26,50 @@ const char settings_html[] PROGMEM = R"rawliteral(
         }
         .header {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            color: #666;
             padding: 20px;
             text-align: center;
         }
         .header h1 { font-size: 1.8em; margin-bottom: 5px; }
         .header p { opacity: 0.9; font-size: 0.9em; }
+        /* ========== 통일된 네비게이션 ========== */
         .nav {
-            background: #2c3e50;
-            padding: 10px;
+            background: #f8f9fa;
+            padding: 0;
+            border-bottom: 2px solid #e0e0e0;
             display: flex;
-            gap: 10px;
             flex-wrap: wrap;
             justify-content: center;
+            align-items: center;
         }
+        
         .nav a {
-            color: white;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px 20px;
             text-decoration: none;
-            padding: 10px 15px;
-            border-radius: 5px;
+            color: #666;
+            font-weight: 500;
+            font-size: 0.95em;
+            border-bottom: 3px solid transparent;
             transition: all 0.3s;
-            font-size: 0.9em;
             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;
         }
-        .nav a:hover { background: #34495e; }
-        .nav a.active { background: #3498db; }
         .content { padding: 30px; }
         
         .settings-section {
@@ -168,7 +187,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .btn-save {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-            color: white;
+            color: #666;
             box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
         }
         
@@ -179,7 +198,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .btn-cancel {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            color: #666;
             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
         }
         
@@ -219,17 +238,17 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .alert-success {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-info {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-warning {
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-icon {
@@ -264,12 +283,67 @@ const char settings_html[] PROGMEM = R"rawliteral(
             line-height: 1.6;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .content { padding: 20px; }
-            .settings-section { padding: 20px; }
-            .section-title { font-size: 1.1em; }
-            button { min-width: 100%; }
-            .button-group { flex-direction: column; }
+            body {
+                padding: 5px;
+            }
+            
+            .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>
@@ -286,6 +360,8 @@ const char settings_html[] PROGMEM = R"rawliteral(
             <a href="/graph">📈 Graph</a>
             <a href="/graph-view">📊 Graph View</a>
             <a href="/settings" class="active">⚙️ Settings</a>
+            <a href="/serial">📟 Serial1</a>
+            <a href="/serial2">📟 Serial2</a>
         </div>
         
         <div class="content">