상태창디자인 변경

index.h

@@ -252,76 +252,128 @@ const char index_html[] PROGMEM = R"rawliteral(
         
         .status-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 12px;
+            gap: 15px;
             margin-bottom: 20px;
         }
         .status-card {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: white;
-            color: white;
+            color: #333;
-            padding: 18px 12px;
+            padding: 20px 15px;
-            border-radius: 10px;
+            border-radius: 12px;
             text-align: center;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
             transition: all 0.3s;
+            border: 2px solid #f0f0f0;
+            position: relative;
+            overflow: hidden;
+        }
+        .status-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
         .status-card:hover {
-            transform: translateY(-3px);
+            transform: translateY(-5px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
+            border-color: #667eea;
         }
         .status-card h3 {
-            font-size: 0.8em;
+            font-size: 0.75em;
-            opacity: 0.95;
+            color: #888;
-            margin-bottom: 10px;
+            margin-bottom: 12px;
-            letter-spacing: 0.5px;
+            letter-spacing: 1px;
-            font-weight: 600;
+            font-weight: 700;
+            text-transform: uppercase;
         }
         .status-card .value {
-            font-size: 1.6em;
+            font-size: 1.8em;
             font-weight: 700;
             font-family: 'Courier New', monospace;
             line-height: 1.2;
+            color: #333;
         }
+        
+        /* ON 상태: 녹색 테두리 */
         .status-card.status-on {
+            border-color: #11998e;
+        }
+        .status-card.status-on::before {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
         }
+        .status-card.status-on .value {
+            color: #11998e;
+        }
+        
+        /* OFF 상태: 회색 테두리 */
         .status-card.status-off {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #ddd;
             opacity: 0.7;
         }
+        .status-card.status-off::before {
+            background: linear-gradient(135deg, #999 0%, #bbb 100%);
+        }
+        .status-card.status-off .value {
+            color: #999;
+        }
         
         /* 버스 부하율 색상 */
         .status-card.bus-load-low {
+            border-color: #11998e;
+        }
+        .status-card.bus-load-low::before {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
         }
+        .status-card.bus-load-low .value {
+            color: #11998e;
+        }
+        
         .status-card.bus-load-medium {
+            border-color: #f5576c;
+        }
+        .status-card.bus-load-medium::before {
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
         }
+        .status-card.bus-load-medium .value {
+            color: #f5576c;
+        }
+        
         .status-card.bus-load-high {
+            border-color: #eb3349;
+        }
+        .status-card.bus-load-high::before {
             background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
         }
+        .status-card.bus-load-high .value {
+            color: #eb3349;
+        }
         
         /* 반응형: 모바일 */
         @media (max-width: 768px) {
             .status-grid {
                 grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
+                gap: 12px;
             }
             .status-card {
-                padding: 15px 10px;
+                padding: 16px 12px;
             }
             .status-card h3 {
-                font-size: 0.75em;
+                font-size: 0.7em;
+                margin-bottom: 10px;
             }
             .status-card .value {
-                font-size: 1.4em;
+                font-size: 1.5em;
             }
         }
         
         /* 반응형: 대형 화면 */
         @media (min-width: 1200px) {
             .status-grid {
-                grid-template-columns: repeat(5, 1fr);
+                grid-template-columns: repeat(6, 1fr);
             }
         }
         
@@ -513,27 +565,12 @@ const char index_html[] PROGMEM = R"rawliteral(
             cursor: pointer;
             transition: all 0.3s;
             white-space: nowrap;
-        }
-        .download-btn {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;  /* ⭐ #666 → white */
+            color: white;
         }
-        .download-btn:hover {
+        .download-btn:hover, .comment-btn:hover, .delete-btn:hover {
-            background: linear-gradient(135deg, #5568d3 0%, #66409e 100%);
+            transform: translateY(-2px);
-        }
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-        .comment-btn {
-            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            color: white;  /* ⭐ #666 → white */
-        }
-        .comment-btn:hover {
-            background: linear-gradient(135deg, #e77fe8 0%, #e44459 100%);
-        }
-        .delete-btn {
-            background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
-            color: white;  /* ⭐ #666 → white */
-        }
-        .delete-btn:hover {
-            background: linear-gradient(135deg, #d32f3f 0%, #e53935 100%);
         }
         .delete-btn:disabled, .comment-btn:disabled {
             background: #cccccc;