From 9432ea6a40ed262939b15e70f71d9fb2ca544a54 Mon Sep 17 00:00:00 2001
From: byun <nulav@naver.com>
Date: Fri, 27 Mar 2026 21:21:38 +0000
Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=EB=A6=AC=EC=96=BC,=20seting=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 serial2_terminal.h | 158 ++++++++--
 serial_terminal.h  | 168 +++++++++--
 settings.h         | 716 +++++++++++++++++++++++++--------------------
 3 files changed, 659 insertions(+), 383 deletions(-)

diff --git a/serial2_terminal.h b/serial2_terminal.h
index 8a42b3e..9879903 100644
--- a/serial2_terminal.h
+++ b/serial2_terminal.h
@@ -255,6 +255,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
         .modbus-error { color:var(--red); }
         /* Send / Stats */
         .send-panel { margin-top:10px; }
+        .tog-on{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(67,206,162,.10)!important;}
+        .tog-off{border-color:var(--muted)!important;color:var(--muted)!important;}
         .send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); }
         .send-controls { display:flex; gap:8px; align-items:center; }
         .send-controls input { flex:1; }
@@ -379,11 +381,23 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             <div class="send-panel">
                 <h3>📤 Send Data</h3>
                 <div class="send-controls">
-                    <input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" />
-                    <button class="btn btn-primary" onclick="sendData()">Send</button>
+                    <input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01  또는  FFA001)" />
+                    <button class="btn btn-primary" onclick="sendData()">Send HEX</button>
+                </div>
+                <div class="send-controls" style="margin-top:7px;">
+                    <input type="text" id="sendTextInput" placeholder="ASCII 텍스트 전송 (CRLF 자동 추가)" />
+                    <button class="btn btn-secondary btn-small" onclick="sendText()">Send Text</button>
+                </div>
+            </div>
+            <div style="background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:var(--r);padding:11px 13px;margin-bottom:10px;">
+                <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;">
+                    <button class="btn btn-warning" onclick="sendLoopbackTest()">📤 Loopback Test</button>
+                    <button class="btn tog-off" id="btn-weblog" onclick="toggleWebLog()">🖥️ WebLog: OFF</button>
+                </div>
+                <div style="font-size:.76em;color:var(--muted);line-height:1.7;">
+                    <strong style="color:var(--text)">Loopback:</strong> GPIO6(TX)↔GPIO7(RX) 단락 후 버튼 클릭 → TX/RX 동시 수신 = UART 정상
                 </div>
             </div>
-            
             <div class="stats">
                 <h3>📊 Statistics</h3>
                 <div class="stat-grid">
@@ -410,6 +424,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
     
     <script>
         let ws;
+        let pingTimer = null;
+        let webLogEnabled = false;
         let autoScroll = true;
         let rxCount = 0;
         let txCount = 0;
@@ -514,22 +530,24 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             
             ws.onopen = function() {
                 console.log('WebSocket Connected');
-                addToTerminal('System', '🟢 Connected to Serial2 Terminal');
-                
-                // 시간 동기화
-                setTimeout(function() {
-                    syncTimeFromPhone();
-                }, 500);
+                addToTerminal('System', '🟢 Serial2 연결됨 | GPIO6=TX / GPIO7=RX');
+                setTimeout(syncTimeFromPhone, 500);
+                if (pingTimer) clearInterval(pingTimer);
+                pingTimer = setInterval(function(){
+                    if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
+                }, 20000);
             };
             
             ws.onmessage = function(event) {
                 try {
                     const data = JSON.parse(event.data);
-                    
-                    if (data.type === 'serial2') {
-                        handleSerialData(data);
+                    if (data.type === 's2') {
+                        // ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
+                        handlePacket(data.tx, data.d, data.ts);
                     } else if (data.type === 'serial2Status' || data.type === 'update') {
                         updateStatus(data);
+                    } else if (data.type === 'pong') {
+                        // keepalive
                     }
                 } catch (e) {
                     console.error('Parse error:', e);
@@ -537,8 +555,8 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             };
             
             ws.onclose = function() {
-                console.log('WebSocket Disconnected');
-                addToTerminal('System', '🔴 Disconnected from server. Reconnecting...');
+                if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
+                addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
                 setTimeout(initWebSocket, 3000);
             };
             
@@ -547,7 +565,56 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             };
         }
         
+        // ★ 핵심 처리 함수: 펌웨어 s1/s2 패킷 → 터미널 표시
+        // isTx: bool, hexData: hex string (예 "48656C"), tsMs: ms timestamp
+        function handlePacket(isTx, hexData, tsMs) {
+            if (!hexData || hexData.length === 0) return;
+            const dir = isTx ? 'TX' : 'RX';
+            const byteLen = Math.floor(hexData.length / 2);
+            if (dir === 'RX') {
+                rxCount += byteLen;
+                document.getElementById('rxCount').textContent = rxCount;
+            } else {
+                txCount += byteLen;
+                document.getElementById('txCount').textContent = txCount;
+            }
+            frameCount++;
+            document.getElementById('frameCount').textContent = frameCount;
+            if (!teratermMode && modbusParseEnabled && dir === 'RX') {
+                const mf = parseModbus(hexData);
+                if (mf) {
+                    modbusCount++;
+                    document.getElementById('modbusCount').textContent = modbusCount;
+                    displayModbusFrame(dir, mf, tsMs);
+                    return;
+                }
+            }
+            displaySerialData(dir, hexData, tsMs);
+        }
+        // 하위 호환용 (기존 'serial' 타입 포맷)
         function handleSerialData(data) {
+            if (data.direction === 'RX') {
+                rxCount += data.data.length / 2;
+                document.getElementById('rxCount').textContent = rxCount;
+            } else if (data.direction === 'TX') {
+                txCount += data.data.length / 2;
+                document.getElementById('txCount').textContent = txCount;
+            }
+            frameCount++;
+            document.getElementById('frameCount').textContent = frameCount;
+            if (!teratermMode && modbusParseEnabled && data.direction === 'RX') {
+                const mf = parseModbus(data.data);
+                if (mf) {
+                    modbusCount++;
+                    document.getElementById('modbusCount').textContent = modbusCount;
+                    displayModbusFrame(data.direction, mf, data.timestamp);
+                    return;
+                }
+            }
+            displaySerialData(data.direction, data.data, data.timestamp);
+        }
+        // ── 구버전 handleSerialData 원본 (아래는 새 것으로 대체됨) ──
+        function _handleSerialData_orig(data) {
             if (data.direction === 'RX') {
                 rxCount += data.data.length;
                 document.getElementById('rxCount').textContent = rxCount;
@@ -974,28 +1041,55 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
         
         function sendData() {
             const input = document.getElementById('sendInput');
-            const hexData = input.value.replace(/[^0-9A-Fa-f]/g, '');
-            
-            if (hexData.length === 0) {
-                alert('Please enter valid HEX data');
-                return;
-            }
-            
-            if (hexData.length % 2 !== 0) {
-                alert('HEX data must have even number of characters');
-                return;
-            }
-            
+            const hexData = input.value.replace(/[^0-9A-Fa-f \-]/g,'').replace(/[\s\-]+/g,'');
+            if (!hexData) { alert('HEX 데이터 입력\n예) 48 65 6C  또는  48656C'); return; }
+            if (hexData.length % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
             if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({
-                    cmd: 'sendSerial2',
-                    data: hexData
-                }));
-                
+                ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hexData }));
+                input.value = '';
+            } else { alert('WebSocket 연결 끊김'); }
+        }
+        function sendText() {
+            const input = document.getElementById('sendTextInput');
+            const text = input.value;
+            if (!text) return;
+            let hex = '';
+            for (let i = 0; i < text.length; i++) hex += text.charCodeAt(i).toString(16).padStart(2,'0');
+            hex += '0d0a';
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hex }));
                 input.value = '';
-                addToTerminal('System', `Sent ${hexData.length / 2} bytes`);
             }
         }
+        function sendLoopbackTest() {
+            if (!ws || ws.readyState !== WebSocket.OPEN) return;
+            const s = '>>>SER2_LOOPBACK_TEST<<<\r\n';
+            let hex = '';
+            for (let i = 0; i < s.length; i++) hex += s.charCodeAt(i).toString(16).padStart(2,'0');
+            ws.send(JSON.stringify({ cmd: 'sendSerial2', data: hex }));
+            addToTerminal('System', '📤 Loopback TX → GPIO6↔GPIO7 단락 시 RX 수신 확인');
+        }
+        function toggleWebLog() {
+            if (!ws || ws.readyState !== WebSocket.OPEN) return;
+            webLogEnabled = !webLogEnabled;
+            ws.send(JSON.stringify({ cmd: webLogEnabled ? 'enableWebLog' : 'disableWebLog' }));
+            updateToggle('btn-weblog', webLogEnabled, '🖥️ WebLog');
+        }
+        function updateToggle(id, state, label) {
+            const btn = document.getElementById(id);
+            if (!btn) return;
+            btn.textContent = label + ': ' + (state ? 'ON' : 'OFF');
+            btn.className = 'btn ' + (state ? 'tog-on' : 'tog-off');
+        }
+        function showWebLog(msg) {
+            const t = document.getElementById('terminal');
+            const d = document.createElement('div');
+            d.className = 'line';
+            const ts = new Date().toLocaleTimeString('ko-KR',{hour12:false});
+            d.innerHTML = '<span class="timestamp">['+ts+']</span><span style="color:#ffa657">[DBG] </span>'+msg;
+            t.appendChild(d);
+            if (autoScroll) t.scrollTop = t.scrollHeight;
+        }
         
         function clearTerminal() {
             document.getElementById('terminal').innerHTML = '';
diff --git a/serial_terminal.h b/serial_terminal.h
index ccf7726..c1bccdf 100644
--- a/serial_terminal.h
+++ b/serial_terminal.h
@@ -255,6 +255,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
         .modbus-error { color:var(--red); }
         /* Send / Stats */
         .send-panel { margin-top:10px; }
+        .tog-on{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(67,206,162,.10)!important;}
+        .tog-off{border-color:var(--muted)!important;color:var(--muted)!important;}
         .send-panel h3, .stats h3 { color:var(--accent); border-color:var(--border); }
         .send-controls { display:flex; gap:8px; align-items:center; }
         .send-controls input { flex:1; }
@@ -379,11 +381,24 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             <div class="send-panel">
                 <h3>📤 Send Data</h3>
                 <div class="send-controls">
-                    <input type="text" id="sendInput" placeholder="Enter HEX data (e.g., 01 03 00 00 00 0A)" />
-                    <button class="btn btn-primary" onclick="sendData()">Send</button>
+                    <input type="text" id="sendInput" placeholder="HEX 입력 (예: FF A0 01  또는  FFA001)" />
+                    <button class="btn btn-primary" onclick="sendData()">Send HEX</button>
+                </div>
+                <div class="send-controls" style="margin-top:7px;">
+                    <input type="text" id="sendTextInput" placeholder="ASCII 텍스트 전송 (CRLF 자동 추가)" />
+                    <button class="btn btn-secondary btn-small" onclick="sendText()">Send Text</button>
+                </div>
+            </div>
+            <div style="background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:var(--r);padding:11px 13px;margin-bottom:10px;">
+                <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;">
+                    <button class="btn btn-warning" onclick="sendLoopbackTest()">📤 Loopback Test</button>
+                    <button class="btn tog-off" id="btn-weblog" onclick="toggleWebLog()">🖥️ WebLog: OFF</button>
+                    <button class="btn tog-off" id="btn-usbmirror" onclick="toggleUsbMirror()">🔌 USB Mirror: OFF</button>
+                </div>
+                <div style="font-size:.76em;color:var(--muted);line-height:1.7;">
+                    <strong style="color:var(--text)">Loopback:</strong> GPIO17(TX)↔GPIO18(RX) 단락 후 버튼 클릭 → TX/RX 동시 수신 = UART 정상
                 </div>
             </div>
-            
             <div class="stats">
                 <h3>📊 Statistics</h3>
                 <div class="stat-grid">
@@ -410,6 +425,9 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
     
     <script>
         let ws;
+        let pingTimer = null;
+        let webLogEnabled = false;
+        let usbMirrorEnabled = false;
         let autoScroll = true;
         let rxCount = 0;
         let txCount = 0;
@@ -514,22 +532,26 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             
             ws.onopen = function() {
                 console.log('WebSocket Connected');
-                addToTerminal('System', '🟢 Connected to Serial1 Terminal');
-                
-                // 시간 동기화
-                setTimeout(function() {
-                    syncTimeFromPhone();
-                }, 500);
+                addToTerminal('System', '🟢 Serial1 연결됨 | GPIO17=TX / GPIO18=RX');
+                setTimeout(syncTimeFromPhone, 500);
+                if (pingTimer) clearInterval(pingTimer);
+                pingTimer = setInterval(function(){
+                    if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({cmd:'ping'}));
+                }, 20000);
             };
             
             ws.onmessage = function(event) {
                 try {
                     const data = JSON.parse(event.data);
-                    
-                    if (data.type === 'serial') {
-                        handleSerialData(data);
+                    if (data.type === 's1') {
+                        // ★ 펌웨어 직접 전송 시리얼 패킷 {tx:bool, d:hex, ts:ms}
+                        handlePacket(data.tx, data.d, data.ts);
                     } else if (data.type === 'serialStatus' || data.type === 'update') {
                         updateStatus(data);
+                    } else if (data.type === 'pong') {
+                        // keepalive                    } else if (data.type === 'usbMirrorState') {
+                        usbMirrorEnabled = data.enabled;
+                        updateToggle('btn-usbmirror', usbMirrorEnabled, '🔌 USB Mirror');
                     }
                 } catch (e) {
                     console.error('Parse error:', e);
@@ -537,8 +559,8 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             };
             
             ws.onclose = function() {
-                console.log('WebSocket Disconnected');
-                addToTerminal('System', '🔴 Disconnected from server. Reconnecting...');
+                if (pingTimer) { clearInterval(pingTimer); pingTimer = null; }
+                addToTerminal('System', '🔴 연결 끊김. 재연결 중...');
                 setTimeout(initWebSocket, 3000);
             };
             
@@ -547,7 +569,56 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             };
         }
         
+        // ★ 핵심 처리 함수: 펌웨어 s1/s2 패킷 → 터미널 표시
+        // isTx: bool, hexData: hex string (예 "48656C"), tsMs: ms timestamp
+        function handlePacket(isTx, hexData, tsMs) {
+            if (!hexData || hexData.length === 0) return;
+            const dir = isTx ? 'TX' : 'RX';
+            const byteLen = Math.floor(hexData.length / 2);
+            if (dir === 'RX') {
+                rxCount += byteLen;
+                document.getElementById('rxCount').textContent = rxCount;
+            } else {
+                txCount += byteLen;
+                document.getElementById('txCount').textContent = txCount;
+            }
+            frameCount++;
+            document.getElementById('frameCount').textContent = frameCount;
+            if (!teratermMode && modbusParseEnabled && dir === 'RX') {
+                const mf = parseModbus(hexData);
+                if (mf) {
+                    modbusCount++;
+                    document.getElementById('modbusCount').textContent = modbusCount;
+                    displayModbusFrame(dir, mf, tsMs);
+                    return;
+                }
+            }
+            displaySerialData(dir, hexData, tsMs);
+        }
+        // 하위 호환용 (기존 'serial' 타입 포맷)
         function handleSerialData(data) {
+            if (data.direction === 'RX') {
+                rxCount += data.data.length / 2;
+                document.getElementById('rxCount').textContent = rxCount;
+            } else if (data.direction === 'TX') {
+                txCount += data.data.length / 2;
+                document.getElementById('txCount').textContent = txCount;
+            }
+            frameCount++;
+            document.getElementById('frameCount').textContent = frameCount;
+            if (!teratermMode && modbusParseEnabled && data.direction === 'RX') {
+                const mf = parseModbus(data.data);
+                if (mf) {
+                    modbusCount++;
+                    document.getElementById('modbusCount').textContent = modbusCount;
+                    displayModbusFrame(data.direction, mf, data.timestamp);
+                    return;
+                }
+            }
+            displaySerialData(data.direction, data.data, data.timestamp);
+        }
+        // ── 구버전 handleSerialData 원본 (아래는 새 것으로 대체됨) ──
+        function _handleSerialData_orig(data) {
             if (data.direction === 'RX') {
                 rxCount += data.data.length;
                 document.getElementById('rxCount').textContent = rxCount;
@@ -974,28 +1045,61 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
         
         function sendData() {
             const input = document.getElementById('sendInput');
-            const hexData = input.value.replace(/[^0-9A-Fa-f]/g, '');
-            
-            if (hexData.length === 0) {
-                alert('Please enter valid HEX data');
-                return;
-            }
-            
-            if (hexData.length % 2 !== 0) {
-                alert('HEX data must have even number of characters');
-                return;
-            }
-            
+            const hexData = input.value.replace(/[^0-9A-Fa-f \-]/g,'').replace(/[\s\-]+/g,'');
+            if (!hexData) { alert('HEX 데이터 입력\n예) 48 65 6C  또는  48656C'); return; }
+            if (hexData.length % 2 !== 0) { alert('HEX는 짝수 자리 (1바이트=2자리)\n예) FF→1바이트, FF01→2바이트'); return; }
             if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({
-                    cmd: 'sendSerial',
-                    data: hexData
-                }));
-                
+                ws.send(JSON.stringify({ cmd: 'sendSerial', data: hexData }));
+                input.value = '';
+            } else { alert('WebSocket 연결 끊김'); }
+        }
+        function sendText() {
+            const input = document.getElementById('sendTextInput');
+            const text = input.value;
+            if (!text) return;
+            let hex = '';
+            for (let i = 0; i < text.length; i++) hex += text.charCodeAt(i).toString(16).padStart(2,'0');
+            hex += '0d0a';
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ cmd: 'sendSerial', data: hex }));
                 input.value = '';
-                addToTerminal('System', `Sent ${hexData.length / 2} bytes`);
             }
         }
+        function sendLoopbackTest() {
+            if (!ws || ws.readyState !== WebSocket.OPEN) return;
+            const s = '>>>SER1_LOOPBACK_TEST<<<\r\n';
+            let hex = '';
+            for (let i = 0; i < s.length; i++) hex += s.charCodeAt(i).toString(16).padStart(2,'0');
+            ws.send(JSON.stringify({ cmd: 'sendSerial', data: hex }));
+            addToTerminal('System', '📤 Loopback TX → GPIO17↔GPIO18 단락 시 RX 수신 확인');
+        }
+        function toggleWebLog() {
+            if (!ws || ws.readyState !== WebSocket.OPEN) return;
+            webLogEnabled = !webLogEnabled;
+            ws.send(JSON.stringify({ cmd: webLogEnabled ? 'enableWebLog' : 'disableWebLog' }));
+            updateToggle('btn-weblog', webLogEnabled, '🖥️ WebLog');
+        }
+        function toggleUsbMirror() {
+            if (!ws || ws.readyState !== WebSocket.OPEN) return;
+            usbMirrorEnabled = !usbMirrorEnabled;
+            ws.send(JSON.stringify({ cmd: usbMirrorEnabled ? 'enableUsbMirror' : 'disableUsbMirror' }));
+            updateToggle('btn-usbmirror', usbMirrorEnabled, '🔌 USB Mirror');
+        }
+        function updateToggle(id, state, label) {
+            const btn = document.getElementById(id);
+            if (!btn) return;
+            btn.textContent = label + ': ' + (state ? 'ON' : 'OFF');
+            btn.className = 'btn ' + (state ? 'tog-on' : 'tog-off');
+        }
+        function showWebLog(msg) {
+            const t = document.getElementById('terminal');
+            const d = document.createElement('div');
+            d.className = 'line';
+            const ts = new Date().toLocaleTimeString('ko-KR',{hour12:false});
+            d.innerHTML = '<span class="timestamp">['+ts+']</span><span style="color:#ffa657">[DBG] </span>'+msg;
+            t.appendChild(d);
+            if (autoScroll) t.scrollTop = t.scrollHeight;
+        }
         
         function clearTerminal() {
             document.getElementById('terminal').innerHTML = '';
diff --git a/settings.h b/settings.h
index f13a685..6b0bfd2 100644
--- a/settings.h
+++ b/settings.h
@@ -31,31 +31,16 @@ const char settings_html[] PROGMEM = R"rawliteral(
             background: var(--bg); color: var(--text);
             overflow-x: hidden; font-size: 14px;
         }
-
-        /* Header */
         .header {
             background: linear-gradient(135deg,#1a2744 0%,#1e1a3a 100%);
             padding: 11px 16px; border-bottom: 1px solid var(--border);
             display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
         }
-        .header h1 {
-            font-size: 1.0em; font-weight: 700; color: var(--accent);
-            display: flex; align-items: center; gap: 8px;
-        }
-        .header p { font-size: 0.78em; color: var(--muted); margin:0; }
-        .badge {
-            background: rgba(67,206,162,.15); color: var(--accent);
-            padding: 2px 8px; border-radius: 12px; font-size: 0.65em;
-            font-weight: 600; border: 1px solid rgba(67,206,162,.3);
-            white-space: nowrap;
-        }
-        .header-spacer { flex:1; }
-
-        /* Nav */
+        .header h1 { font-size:1.0em; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:8px; }
+        .header p  { font-size:0.78em; color:var(--muted); margin:0; }
         .nav {
             background: var(--panel); border-bottom: 1px solid var(--border);
-            display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
-            scrollbar-width: none;
+            display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
         }
         .nav::-webkit-scrollbar { display:none; }
         .nav a {
@@ -65,97 +50,66 @@ const char settings_html[] PROGMEM = R"rawliteral(
             border-bottom: 2px solid transparent; white-space: nowrap;
             transition: color .2s, border-color .2s;
         }
-        .nav a:hover { color: var(--text); }
-        .nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
-
-        /* Content */
+        .nav a:hover { color:var(--text); }
+        .nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
         .content { padding: 12px; }
-
-        /* Headings */
         h2 {
-            color: var(--accent); margin: 14px 0 10px;
-            font-size: 0.82em; font-weight: 700; text-transform: uppercase;
-            letter-spacing: .5px; padding-bottom: 6px;
-            border-bottom: 1px solid var(--border);
+            color:var(--accent); margin:14px 0 10px;
+            font-size:0.82em; font-weight:700; text-transform:uppercase;
+            letter-spacing:.5px; padding-bottom:6px; border-bottom:1px solid var(--border);
         }
-        h3 {
-            color: var(--text); font-size: 0.85em; font-weight: 600;
-            margin-bottom: 10px; padding-bottom: 6px;
-            border-bottom: 1px solid var(--border);
-        }
-
-        /* Buttons */
+        h3 { color:var(--text); font-size:0.85em; font-weight:600; margin-bottom:10px; }
         .btn, button {
-            padding: 6px 13px; border: 1px solid var(--border);
-            border-radius: var(--r); background: var(--bg); color: var(--muted);
-            font-size: 0.8em; font-weight: 600; cursor: pointer;
-            font-family: inherit; transition: all .15s; white-space: nowrap;
-            -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+            padding:6px 13px; border:1px solid var(--border);
+            border-radius:var(--r); background:var(--bg); color:var(--muted);
+            font-size:0.8em; font-weight:600; cursor:pointer;
+            font-family:inherit; transition:all .15s; white-space:nowrap;
+            -webkit-tap-highlight-color:transparent; touch-action:manipulation;
         }
-        .btn:hover, button:hover { border-color: var(--accent); color: var(--accent); }
-        .btn:active, button:active { transform: scale(.97); }
-        .btn-primary  { border-color:var(--blue);   color:var(--blue);   }
-        .btn-success  { border-color:var(--accent);  color:var(--accent); }
-        .btn-danger   { border-color:var(--red);     color:var(--red);    }
-        .btn-warning  { border-color:var(--yellow);  color:var(--yellow); }
-        .btn-secondary{ border-color:var(--muted);   color:var(--muted);  }
-        .btn-primary:hover  { background:rgba(88,166,255,.10);  }
-        .btn-success:hover  { background:rgba(67,206,162,.10);  }
-        .btn-danger:hover   { background:rgba(248,81,73,.10);   }
-        .btn-warning:hover  { background:rgba(227,179,65,.10);  }
-        .btn-secondary:hover{ background:rgba(139,148,158,.10); }
+        .btn:hover, button:hover { border-color:var(--accent); color:var(--accent); }
+        .btn:active, button:active { transform:scale(.97); }
+        .btn-primary   { border-color:var(--blue);  color:var(--blue);  }
+        .btn-success   { border-color:var(--accent); color:var(--accent); }
+        .btn-danger    { border-color:var(--red);   color:var(--red);   }
+        .btn-warning   { border-color:var(--yellow);color:var(--yellow);}
+        .btn-secondary { border-color:var(--muted); color:var(--muted); }
+        .btn-primary:hover   { background:rgba(88,166,255,.10); }
+        .btn-success:hover   { background:rgba(67,206,162,.10); }
+        .btn-danger:hover    { background:rgba(248,81,73,.10);  }
+        .btn-warning:hover   { background:rgba(227,179,65,.10); }
+        .btn-secondary:hover { background:rgba(139,148,158,.10);}
         .btn-small { padding:4px 9px; font-size:.75em; }
-        .button-group, .btn-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
-
-        /* Forms */
+        .button-group { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
         label {
             display:block; font-weight:600; color:var(--muted);
             margin-bottom:4px; font-size:.78em;
             text-transform:uppercase; letter-spacing:.3px;
         }
-        input[type="text"], input[type="password"], input[type="number"],
-        select, textarea {
+        input[type="text"], input[type="password"], input[type="number"], select, textarea {
             width:100%; padding:7px 10px;
             border:1px solid var(--border); border-radius:var(--r);
             font-size:.85em; font-family:inherit;
-            background:var(--bg); color:var(--text);
-            transition:border-color .2s;
+            background:var(--bg); color:var(--text); transition:border-color .2s;
         }
         input:focus, select:focus, textarea:focus {
             outline:none; border-color:var(--accent);
             box-shadow:0 0 0 2px rgba(67,206,162,.10);
         }
-        input[type="checkbox"], input[type="radio"] {
-            width:15px; height:15px; cursor:pointer; accent-color:var(--accent);
-        }
+        input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); }
         select option { background:var(--panel); color:var(--text); }
-
-        /* Panels */
-        .section, .settings-section, .send-panel, .stats,
-        .control-panel, .auto-trigger-section {
+        .settings-section {
             background:var(--panel); border:1px solid var(--border);
             border-radius:var(--r); padding:13px; margin-bottom:10px;
         }
         .form-group { margin-bottom:12px; }
         .form-group:last-child { margin-bottom:0; }
         .help-text { font-size:.76em; color:var(--muted); margin-top:4px; line-height:1.4; }
-        .form-row {
-            display:grid;
-            grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
-            gap:10px; margin-bottom:10px;
-        }
-        .form-row label { text-transform:none; font-size:.78em; }
-        .checkbox-group, .checkbox-row {
+        .checkbox-group {
             display:flex; align-items:center; gap:8px;
             margin-bottom:8px; padding:7px 10px;
             background:var(--card); border-radius:6px; border:1px solid var(--border);
         }
-        .checkbox-group label, .checkbox-row label {
-            text-transform:none; cursor:pointer; margin-bottom:0;
-            color:var(--text); font-size:.85em; letter-spacing:0;
-        }
-
-        /* Alerts */
+        .checkbox-group label { text-transform:none; cursor:pointer; margin-bottom:0; color:var(--text); font-size:.85em; letter-spacing:0; }
         .alert {
             padding:9px 13px; border-radius:var(--r);
             margin-bottom:10px; display:none;
@@ -169,9 +123,6 @@ const char settings_html[] PROGMEM = R"rawliteral(
         .alert-warning { border-color:rgba(227,179,65,.4);  color:var(--yellow); background:rgba(227,179,65,.07); }
         .alert-icon { font-size:1.15em; }
         .alert-text { flex:1; }
-        @keyframes slideDown { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }
-
-        /* Connection status */
         .connection-status {
             position:fixed; top:10px; right:10px;
             padding:4px 11px; border-radius:20px;
@@ -180,303 +131,430 @@ const char settings_html[] PROGMEM = R"rawliteral(
         }
         .connection-status.connected    { border-color:rgba(67,206,162,.5); color:var(--accent); background:rgba(67,206,162,.08); }
         .connection-status.disconnected { border-color:rgba(248,81,73,.5);  color:var(--red);    background:rgba(248,81,73,.08);  }
+        @media (max-width:480px) { .content{padding:8px;} }
 
-        @media (max-width:480px) { .content{padding:8px;} h2{font-size:.78em;} }
-
-        /* settings.h specific */
+        /* ── Settings-specific ── */
         .section-title {
             color:var(--accent); font-size:.85em; font-weight:700;
             margin-bottom:14px; padding-bottom:7px; border-bottom:1px solid var(--border);
-            display:flex; align-items:center; gap:7px;
-            text-transform:uppercase; letter-spacing:.4px;
+            display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.4px;
         }
-        .sta-settings {
+        .sub-title {
+            color:var(--text); font-size:.82em; font-weight:700;
+            margin:14px 0 10px; padding:7px 10px;
+            background:var(--card); border-radius:6px;
+            border-left:3px solid var(--blue);
+            display:flex; align-items:center; gap:6px; flex-wrap:wrap;
+        }
+        .sub-title.ap { border-left-color:var(--accent); }
+        .sta-block {
             background:var(--card); padding:13px; border-radius:var(--r);
             margin-top:10px; border:1px solid var(--border); border-left:3px solid var(--blue);
+            transition:opacity .2s;
         }
-        .sta-settings.disabled { opacity:.4; pointer-events:none; }
+        .sta-block.disabled { opacity:.4; pointer-events:none; }
         .btn-save   { border-color:var(--accent); color:var(--accent); flex:1; min-width:130px; padding:9px 18px; }
-        .btn-save:hover   { background:rgba(67,206,162,.10); }
-        .btn-cancel { border-color:var(--muted);  color:var(--muted);  flex:1; min-width:130px; padding:9px 18px; }
-        .btn-cancel:hover { background:rgba(139,148,158,.10); }
+        .btn-save:hover { background:rgba(67,206,162,.10); }
+        .btn-back   { border-color:var(--muted); color:var(--muted); flex:1; min-width:130px; padding:9px 18px; }
+        .btn-back:hover { background:rgba(139,148,158,.10); }
         .info-box {
             background:rgba(88,166,255,.06); border:1px solid rgba(88,166,255,.2);
-            border-left:3px solid var(--blue); padding:11px 13px; border-radius:var(--r); margin-top:10px;
+            border-left:3px solid var(--blue); padding:11px 13px; border-radius:var(--r); margin-top:12px;
         }
         .info-box-title { font-weight:700; color:var(--blue); margin-bottom:5px; display:flex; align-items:center; gap:5px; font-size:.83em; }
-        .info-box-text  { color:var(--muted); font-size:.80em; line-height:1.6; }
+        .info-box-text  { color:var(--muted); font-size:.80em; line-height:1.7; }
+
+        /* WiFi status badges */
+        .wbadge {
+            display:inline-flex; align-items:center; gap:5px;
+            padding:3px 9px; border-radius:10px; font-size:.72em; font-weight:600;
+        }
+        .wbadge.on  { background:rgba(67,206,162,.12); color:var(--accent); border:1px solid rgba(67,206,162,.3); }
+        .wbadge.off { background:rgba(248,81,73,.10);  color:var(--red);    border:1px solid rgba(248,81,73,.25); }
+        .wbadge.ap  { background:rgba(88,166,255,.10); color:var(--blue);   border:1px solid rgba(88,166,255,.25); }
+        .wdot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
+
+        /* IP row */
+        .ip-row {
+            display:flex; align-items:center; gap:8px; flex-wrap:wrap;
+            margin-top:8px; padding:7px 10px;
+            background:var(--bg); border-radius:6px; border:1px solid var(--border);
+        }
+        .ip-lbl { font-size:.72em; color:var(--muted); font-weight:700; text-transform:uppercase; min-width:55px; }
+        .ip-val { font-family:monospace; font-size:.88em; color:var(--text); font-weight:600; }
+
+        /* Scan */
+        .ssid-row { display:flex; gap:6px; align-items:flex-start; }
+        .ssid-row input { flex:1; }
+        .scan-wrap { position:relative; margin-top:4px; }
+        .scan-list {
+            display:none; border:1px solid var(--border);
+            border-radius:var(--r); background:var(--card);
+            max-height:220px; overflow-y:auto; z-index:100; position:relative;
+        }
+        .scan-list.show { display:block; }
+        .scan-item {
+            display:flex; align-items:center; justify-content:space-between;
+            padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border);
+            transition:background .12s; gap:8px;
+        }
+        .scan-item:last-child { border-bottom:none; }
+        .scan-item:hover { background:rgba(67,206,162,.08); }
+        .scan-ssid { font-size:.85em; color:var(--text); font-weight:500; }
+        .scan-meta { font-size:.74em; color:var(--muted); white-space:nowrap; }
+        .scan-msg  { padding:12px; text-align:center; color:var(--muted); font-size:.82em; }
+
+        /* STA status boxes */
+        .sta-ok {
+            display:none; margin-top:9px; padding:9px 12px;
+            background:rgba(67,206,162,.08); border-radius:6px;
+            border:1px solid rgba(67,206,162,.2);
+        }
+        .sta-fail {
+            display:none; margin-top:9px; padding:9px 12px;
+            background:rgba(248,81,73,.06); border-radius:6px;
+            border:1px solid rgba(248,81,73,.2);
+            color:var(--red); font-size:.83em; font-weight:600;
+        }
     </style>
 </head>
 <body>
+    <div id="ws-status" class="connection-status disconnected">○ WS</div>
+
     <div class="header">
-            <h1>⚙️ Settings</h1>
-            <p>Configure WiFi and System Settings</p>
-        </div>
-        
+        <h1>⚙️ Settings</h1>
+        <p>WiFi 및 시스템 설정</p>
+    </div>
+
     <div class="nav">
-            <a href="/">📊 Monitor</a>
-            <a href="/transmit">📤 Transmit</a>
-            <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>
-        
+        <a href="/">📊 Monitor</a>
+        <a href="/transmit">📤 Transmit</a>
+        <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">
-            <div id="alert-success" class="alert alert-success">
-                <span class="alert-icon">✓</span>
-                <span class="alert-text">Settings saved successfully!</span>
+        <div id="alert-success" class="alert alert-success">
+            <span class="alert-icon">✓</span>
+            <span class="alert-text">설정이 저장되었습니다! 재부팅 후 적용됩니다.</span>
+        </div>
+        <div id="alert-loading" class="alert alert-info">
+            <span class="alert-icon">⏳</span>
+            <span class="alert-text">설정을 불러오는 중...</span>
+        </div>
+        <div id="alert-error" class="alert alert-warning">
+            <span class="alert-icon">⚠️</span>
+            <span class="alert-text"></span>
+        </div>
+
+        <div class="settings-section">
+            <div class="section-title">
+                <span>📶</span>
+                <span>WiFi Configuration</span>
             </div>
-            
-            <div id="alert-loading" class="alert alert-info">
-                <span class="alert-icon">⏳</span>
-                <span class="alert-text">Loading settings...</span>
+
+            <!-- AP Mode -->
+            <div class="sub-title ap">
+                <span>📡</span>
+                <span>AP Mode (Access Point)</span>
+                <span id="ap-badge" class="wbadge ap" style="margin-left:auto;">
+                    <span class="wdot"></span> AP 활성
+                </span>
             </div>
-            
-            <div class="settings-section">
-                <div class="section-title">
-                    <span>📶</span>
-                    <span>WiFi Configuration</span>
-                </div>
-                
-                <h3 style="color: #333; font-size: 1.1em; margin-bottom: 15px;">AP Mode (Access Point)</h3>
-                
+
+            <div class="ip-row">
+                <span class="ip-lbl">AP IP</span>
+                <span class="ip-val" id="ap-ip-val">192.168.4.1</span>
+                <span class="ip-lbl" style="margin-left:12px;">클라이언트</span>
+                <span class="ip-val" id="ap-clients-val">—</span>
+            </div>
+
+            <div class="form-group" style="margin-top:12px;">
+                <label for="wifi-ssid">AP SSID (네트워크 이름)</label>
+                <input type="text" id="wifi-ssid" placeholder="Byun_CAN_Logger" maxlength="31">
+                <div class="help-text">ESP32가 생성할 WiFi 네트워크 이름 (최대 31자)</div>
+            </div>
+            <div class="form-group">
+                <label for="wifi-password">AP Password</label>
+                <input type="password" id="wifi-password" placeholder="최소 8자 이상 (빈칸=개방)" minlength="8" maxlength="63">
+                <div class="help-text">WiFi 접속 비밀번호 (8~63자, 빈칸=개방 네트워크)</div>
+            </div>
+
+            <hr style="margin:18px 0; border:none; border-top:1px solid var(--border);">
+
+            <!-- APSTA Mode -->
+            <div class="sub-title">
+                <span>🌐</span>
+                <span>APSTA Mode (AP + Station)</span>
+                <span id="sta-live-badge" class="wbadge off" style="margin-left:auto; display:none;">
+                    <span class="wdot"></span>
+                    <span id="sta-badge-text">미연결</span>
+                </span>
+            </div>
+
+            <div class="checkbox-group">
+                <input type="checkbox" id="sta-enable" onchange="toggleSTA()">
+                <label for="sta-enable">Station 모드 활성화 — AP를 유지하며 외부 WiFi에 동시 연결</label>
+            </div>
+
+            <div id="sta-block" class="sta-block disabled">
                 <div class="form-group">
-                    <label for="wifi-ssid">AP SSID (네트워크 이름)</label>
-                    <input type="text" id="wifi-ssid" placeholder="Byun_CAN_Logger" maxlength="31">
-                    <div class="help-text">ESP32가 생성할 WiFi 네트워크 이름입니다 (최대 31자)</div>
+                    <label for="sta-ssid">연결할 WiFi SSID</label>
+                    <div class="ssid-row">
+                        <input type="text" id="sta-ssid" placeholder="공유기 SSID 또는 스캔으로 선택" maxlength="31">
+                        <button class="btn btn-primary btn-small" id="scan-btn" onclick="scanWifi()">🔍 스캔</button>
+                    </div>
+                    <div class="scan-wrap">
+                        <div id="scan-list" class="scan-list"></div>
+                    </div>
+                    <div class="help-text">스캔 버튼으로 주변 네트워크를 검색하거나 직접 입력</div>
                 </div>
-                
+
                 <div class="form-group">
-                    <label for="wifi-password">AP Password (비밀번호)</label>
-                    <input type="password" id="wifi-password" placeholder="최소 8자 이상" minlength="8" maxlength="63">
-                    <div class="help-text">WiFi 접속 시 필요한 비밀번호입니다 (8-63자)</div>
+                    <label for="sta-password">연결할 WiFi Password</label>
+                    <input type="password" id="sta-password" placeholder="공유기 비밀번호 (개방=빈칸)" maxlength="63">
+                    <div class="help-text">외부 WiFi 비밀번호</div>
                 </div>
-                
-                <hr style="margin: 25px 0; border: none; border-top: 1px solid #ddd;">
-                
-                <h3 style="color: #333; font-size: 1.1em; margin-bottom: 15px;">APSTA Mode (AP + Station)</h3>
-                
-                <div class="checkbox-group">
-                    <input type="checkbox" id="sta-enable" onchange="toggleSTASettings()">
-                    <label for="sta-enable">Station 모드 활성화 (외부 WiFi에 연결)</label>
+
+                <!-- STA 연결 상태 -->
+                <div id="sta-ok" class="sta-ok">
+                    <div style="color:var(--accent); font-weight:700; font-size:.83em; margin-bottom:5px;">✓ Station 연결됨</div>
+                    <div class="ip-row" style="margin-top:0; background:transparent; border:none; padding:0; gap:6px;">
+                        <span class="ip-lbl">STA IP</span>
+                        <span class="ip-val" id="sta-ip">—</span>
+                    </div>
                 </div>
-                <div class="help-text" style="margin-left: 30px; margin-bottom: 15px;">
-                    AP와 Station을 동시에 사용하여 인터넷 접속 가능
-                </div>
-                
-                <div id="sta-settings" class="sta-settings disabled">
-                    <div class="form-group">
-                        <label for="sta-ssid">연결할 WiFi SSID</label>
-                        <input type="text" id="sta-ssid" placeholder="공유기 이름 입력" maxlength="31">
-                        <div class="help-text">연결할 외부 WiFi 네트워크 이름</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="sta-password">연결할 WiFi Password</label>
-                        <input type="password" id="sta-password" placeholder="공유기 비밀번호 입력" maxlength="63">
-                        <div class="help-text">외부 WiFi 비밀번호</div>
-                    </div>
-                    
-                    <div id="sta-status" style="display:none;margin-top:9px;padding:8px 12px;background:rgba(67,206,162,.10);border-radius:6px;color:var(--accent);font-weight:600;border:1px solid rgba(67,206,162,.2);">
-                        ✓ WiFi 연결됨: <span id="sta-ip"></span>
-                    </div>
+                <div id="sta-fail" class="sta-fail">
+                    ✗ Station 미연결 — 저장 후 재부팅 시 자동 연결, 이후 30초마다 재시도
                 </div>
             </div>
-            
-            <div class="button-group">
-                <button class="btn-save" onclick="saveSettings()">💾 Save Settings</button>
-                <button class="btn-cancel" onclick="location.href='/'">← Back to Monitor</button>
-            </div>
-            
-            <div class="info-box" style="margin-top: 30px;">
-                <div class="info-box-title">
-                    <span>⚠️</span>
-                    <span>중요 안내</span>
-                </div>
-                <div class="info-box-text">
-                    • WiFi 설정을 변경한 경우, ESP32를 재부팅해야 새 SSID/비밀번호가 적용됩니다.<br>
-                    • <strong>APSTA 모드:</strong> Station 모드를 활성화하면 ESP32가 AP와 Station을 동시에 사용합니다.<br>
-                    • Station 모드로 외부 WiFi에 연결하면 인터넷 접속이 가능해집니다.<br>
-                    • Station 연결 실패 시에도 AP 모드는 정상 동작합니다.<br>
-                    • 설정 저장 후 ESP32의 리셋 버튼을 눌러 재부팅하세요.
-                </div>
+        </div>
+
+        <div class="button-group">
+            <button class="btn btn-save" onclick="saveSettings()">💾 설정 저장</button>
+            <button class="btn btn-back" onclick="location.href='/'">← 모니터로</button>
+        </div>
+
+        <div class="info-box">
+            <div class="info-box-title"><span>ℹ️</span><span>중요 안내</span></div>
+            <div class="info-box-text">
+                • WiFi 설정 변경 후 ESP32 재부팅이 필요합니다 (저장 → 리셋 버튼).<br>
+                • <strong>APSTA 모드:</strong> AP(192.168.4.1)와 외부 WiFi를 동시에 사용합니다.<br>
+                • Station 연결 실패 시에도 AP 모드는 정상 동작하며, 30초마다 자동 재연결을 시도합니다.<br>
+                • AP와 Station은 같은 채널을 공유하므로 연결 후 AP 채널이 변경될 수 있습니다.
             </div>
         </div>
     </div>
-    
+
     <script>
         let ws;
-        
-        function initWebSocket() {
+        let scanOpen = false;
+
+        /* ── WebSocket ─────────────────────────────── */
+        function initWS() {
+            const el = document.getElementById('ws-status');
             ws = new WebSocket('ws://' + window.location.hostname + ':81/');
-            
+
             ws.onopen = function() {
-                console.log('WebSocket connected');
+                el.className = 'connection-status connected';
+                el.textContent = '● WS';
                 loadSettings();
             };
-            
             ws.onclose = function() {
-                console.log('WebSocket disconnected');
-                showAlert('alert-loading', '연결 끊김. 재연결 시도 중...', 'alert-warning');
-                setTimeout(initWebSocket, 3000);
+                el.className = 'connection-status disconnected';
+                el.textContent = '○ WS';
+                showAlert('alert-loading', '연결 끊김. 재연결 중...', 'alert-warning');
+                setTimeout(initWS, 3000);
             };
-            
-            ws.onerror = function(error) {
-                console.error('WebSocket error:', error);
-            };
-            
+            ws.onerror = function(e) { console.error('WS error', e); };
             ws.onmessage = function(event) {
                 try {
-                    const data = JSON.parse(event.data);
-                    
-                    if (data.type === 'settings') {
-                        document.getElementById('wifi-ssid').value = data.ssid || 'Byun_CAN_Logger';
-                        document.getElementById('wifi-password').value = data.password || '';
-                        
-                        // STA 모드 설정 로드
-                        document.getElementById('sta-enable').checked = data.staEnable || false;
-                        document.getElementById('sta-ssid').value = data.staSSID || '';
-                        document.getElementById('sta-password').value = data.staPassword || '';
-                        
-                        // STA 설정 표시/숨김
-                        toggleSTASettings();
-                        
-                        // STA 연결 상태 표시
-                        if (data.staConnected && data.staIP && data.staIP !== '0.0.0.0') {
-                            document.getElementById('sta-ip').textContent = data.staIP;
-                            document.getElementById('sta-status').style.display = 'block';
-                        } else {
-                            document.getElementById('sta-status').style.display = 'none';
-                        }
-                        
+                    const d = JSON.parse(event.data);
+                    if (d.type === 'settings') {
+                        applySettings(d);
                         hideAlert('alert-loading');
-                        console.log('Settings loaded:', data);
-                    } else if (data.type === 'settingsSaved') {
-                        if (data.success) {
-                            showAlert('alert-success', '설정이 저장되었습니다! 재부팅 후 적용됩니다.', 'alert-success');
-                        }
+                    } else if (d.type === 'settingsSaved') {
+                        if (d.success) showAlert('alert-success', '✓ 설정 저장 완료! 재부팅 후 적용됩니다.', 'alert-success');
+                    } else if (d.type === 'update') {
+                        updateWifiStatus(d.staConnected, d.staIP, d.apIP, d.apClients);
                     }
-                } catch (e) {
-                    console.error('Parse error:', e);
-                }
+                } catch(e) { console.error('Parse error', e); }
             };
         }
-        
+
+        /* ── Settings apply ────────────────────────── */
+        function applySettings(d) {
+            document.getElementById('wifi-ssid').value     = d.ssid        || 'Byun_CAN_Logger';
+            document.getElementById('wifi-password').value = d.password    || '';
+            document.getElementById('sta-enable').checked  = d.staEnable   || false;
+            document.getElementById('sta-ssid').value      = d.staSSID     || '';
+            document.getElementById('sta-password').value  = d.staPassword || '';
+            toggleSTA();
+            updateWifiStatus(d.staConnected, d.staIP, d.apIP, d.apClients);
+        }
+
+        /* ── WiFi status UI ────────────────────────── */
+        function updateWifiStatus(staConn, staIP, apIP, apClients) {
+            if (apIP && apIP !== '0.0.0.0') {
+                document.getElementById('ap-ip-val').textContent = apIP;
+            }
+            if (apClients !== undefined) {
+                document.getElementById('ap-clients-val').textContent = apClients + '명';
+            }
+
+            const staEnable = document.getElementById('sta-enable').checked;
+            const badge  = document.getElementById('sta-live-badge');
+            const btext  = document.getElementById('sta-badge-text');
+            const okBox  = document.getElementById('sta-ok');
+            const failBox= document.getElementById('sta-fail');
+            const staIpEl= document.getElementById('sta-ip');
+
+            if (staEnable) {
+                badge.style.display = 'inline-flex';
+                if (staConn && staIP && staIP !== '0.0.0.0') {
+                    badge.className = 'wbadge on';
+                    btext.textContent = staIP;
+                    okBox.style.display   = 'block';
+                    failBox.style.display = 'none';
+                    staIpEl.textContent   = staIP;
+                } else {
+                    badge.className = 'wbadge off';
+                    btext.textContent = '미연결';
+                    okBox.style.display   = 'none';
+                    failBox.style.display = 'block';
+                }
+            } else {
+                badge.style.display   = 'none';
+                okBox.style.display   = 'none';
+                failBox.style.display = 'none';
+            }
+        }
+
+        /* ── Load / Save ───────────────────────────── */
         function loadSettings() {
             if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({cmd: 'getSettings'}));
-                showAlert('alert-loading', '설정을 불러오는 중...', 'alert-info');
+                ws.send(JSON.stringify({cmd:'getSettings'}));
+                showAlert('alert-loading', '⏳ 설정을 불러오는 중...', 'alert-info');
             }
         }
-        
+
         function saveSettings() {
-            const ssid = document.getElementById('wifi-ssid').value.trim();
-            const password = document.getElementById('wifi-password').value;
-            
-            // STA 모드 설정
-            const staEnable = document.getElementById('sta-enable').checked;
-            const staSSID = document.getElementById('sta-ssid').value.trim();
-            const staPassword = document.getElementById('sta-password').value;
-            
-            // 입력 검증
-            if (ssid.length === 0) {
-                alert('WiFi SSID를 입력하세요.');
-                return;
-            }
-            
-            if (ssid.length > 31) {
-                alert('WiFi SSID는 최대 31자까지 입력 가능합니다.');
-                return;
-            }
-            
-            if (password.length > 0 && password.length < 8) {
-                alert('WiFi 비밀번호는 최소 8자 이상이어야 합니다.');
-                return;
-            }
-            
-            if (password.length > 63) {
-                alert('WiFi 비밀번호는 최대 63자까지 입력 가능합니다.');
-                return;
-            }
-            
-            // STA 모드 검증
+            const ssid       = document.getElementById('wifi-ssid').value.trim();
+            const password   = document.getElementById('wifi-password').value;
+            const staEnable  = document.getElementById('sta-enable').checked;
+            const staSSID    = document.getElementById('sta-ssid').value.trim();
+            const staPass    = document.getElementById('sta-password').value;
+
+            if (!ssid)                { showErr('AP SSID를 입력하세요.'); return; }
+            if (ssid.length > 31)     { showErr('AP SSID는 최대 31자입니다.'); return; }
+            if (password.length > 0 && password.length < 8) { showErr('AP 비밀번호는 최소 8자입니다.'); return; }
+            if (password.length > 63) { showErr('AP 비밀번호는 최대 63자입니다.'); return; }
             if (staEnable) {
-                if (staSSID.length === 0) {
-                    alert('Station 모드를 활성화하려면 WiFi SSID를 입력하세요.');
-                    return;
-                }
-                if (staSSID.length > 31) {
-                    alert('Station WiFi SSID는 최대 31자까지 입력 가능합니다.');
-                    return;
-                }
-                if (staPassword.length > 0 && staPassword.length < 8) {
-                    alert('Station WiFi 비밀번호는 최소 8자 이상이어야 합니다.');
-                    return;
-                }
+                if (!staSSID)              { showErr('Station SSID를 입력하세요.'); return; }
+                if (staSSID.length > 31)   { showErr('Station SSID는 최대 31자입니다.'); return; }
+                if (staPass.length > 0 && staPass.length < 8) { showErr('Station 비밀번호는 최소 8자입니다.'); return; }
             }
-            
-            const settings = {
-                cmd: 'saveSettings',
-                ssid: ssid,
-                password: password,
-                staEnable: staEnable,
-                staSSID: staSSID,
-                staPassword: staPassword
-            };
-            
+
             if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify(settings));
-                console.log('Settings saved:', settings);
+                ws.send(JSON.stringify({
+                    cmd:'saveSettings', ssid, password,
+                    staEnable, staSSID, staPassword:staPass
+                }));
             } else {
-                alert('WebSocket 연결이 끊겼습니다. 페이지를 새로고침하세요.');
+                showErr('WebSocket 연결 끊김. 페이지를 새로고침하세요.');
             }
         }
-        
-        function showAlert(alertId, message, className) {
-            const alert = document.getElementById(alertId);
-            if (alert) {
-                const textElement = alert.querySelector('.alert-text');
-                if (textElement && message) {
-                    textElement.textContent = message;
-                }
-                
-                // 기존 클래스 제거
-                alert.className = 'alert ' + className;
-                alert.classList.add('show');
-                
-                // 3초 후 자동 숨김 (success 알림만)
-                if (className === 'alert-success') {
-                    setTimeout(() => {
-                        hideAlert(alertId);
-                    }, 5000);
-                }
-            }
+
+        /* ── WiFi Scan ─────────────────────────────── */
+        function scanWifi() {
+            const btn  = document.getElementById('scan-btn');
+            const list = document.getElementById('scan-list');
+            btn.textContent = '⏳ 스캔 중...';
+            btn.disabled = true;
+            list.innerHTML = '<div class="scan-msg">📡 주변 WiFi 검색 중 (3~5초)...</div>';
+            list.classList.add('show');
+            scanOpen = true;
+
+            fetch('/wifi-scan')
+                .then(r => r.json())
+                .then(data => {
+                    btn.textContent = '🔍 스캔';
+                    btn.disabled = false;
+                    const nets = (data.networks || []).sort((a,b) => b.rssi - a.rssi);
+                    if (nets.length === 0) {
+                        list.innerHTML = '<div class="scan-msg">검색된 네트워크 없음</div>';
+                        return;
+                    }
+                    list.innerHTML = nets.map(n => {
+                        const bars = n.rssi >= -60 ? '▂▄▆█' :
+                                     n.rssi >= -75 ? '▂▄▆·' :
+                                     n.rssi >= -85 ? '▂▄··' : '▂···';
+                        const lock = n.enc ? '🔒' : '🔓';
+                        const ch   = n.channel ? ' ch' + n.channel : '';
+                        const ssid = n.ssid || '(숨김 네트워크)';
+                        return '<div class="scan-item" onclick="selectSSID(\'' +
+                            ssid.replace(/\\/g,'\\\\').replace(/'/g,"\\'") + '\')">' +
+                            '<span class="scan-ssid">' + ssid + '</span>' +
+                            '<span class="scan-meta">' + lock + ' ' + bars + ' ' + n.rssi + 'dBm' + ch + '</span>' +
+                            '</div>';
+                    }).join('');
+                })
+                .catch(err => {
+                    btn.textContent = '🔍 스캔';
+                    btn.disabled = false;
+                    list.innerHTML = '<div class="scan-msg">스캔 실패 — 다시 시도하세요</div>';
+                    console.error('Scan error:', err);
+                });
         }
-        
-        function hideAlert(alertId) {
-            const alert = document.getElementById(alertId);
-            if (alert) {
-                alert.classList.remove('show');
-            }
+
+        function selectSSID(ssid) {
+            document.getElementById('sta-ssid').value = ssid;
+            document.getElementById('scan-list').classList.remove('show');
+            document.getElementById('sta-password').focus();
+            scanOpen = false;
         }
-        
-        function toggleSTASettings() {
-            const staEnable = document.getElementById('sta-enable').checked;
-            const staSettings = document.getElementById('sta-settings');
-            
-            if (staEnable) {
-                staSettings.classList.remove('disabled');
-            } else {
-                staSettings.classList.add('disabled');
+
+        document.addEventListener('click', function(e) {
+            if (scanOpen &&
+                !e.target.closest('.scan-wrap') &&
+                !e.target.closest('#scan-btn')) {
+                document.getElementById('scan-list').classList.remove('show');
+                scanOpen = false;
             }
-        }
-        
-        // 페이지 로드 시 WebSocket 연결
-        window.addEventListener('load', function() {
-            initWebSocket();
         });
+
+        /* ── STA toggle ────────────────────────────── */
+        function toggleSTA() {
+            const en  = document.getElementById('sta-enable').checked;
+            const blk = document.getElementById('sta-block');
+            const bdg = document.getElementById('sta-live-badge');
+            blk.classList.toggle('disabled', !en);
+            bdg.style.display = en ? 'inline-flex' : 'none';
+            if (!en) {
+                document.getElementById('sta-ok').style.display   = 'none';
+                document.getElementById('sta-fail').style.display = 'none';
+            }
+        }
+
+        /* ── Alert helpers ─────────────────────────── */
+        function showAlert(id, msg, cls) {
+            const el = document.getElementById(id);
+            if (!el) return;
+            const t = el.querySelector('.alert-text');
+            if (t && msg) t.textContent = msg;
+            el.className = 'alert ' + cls + ' show';
+            if (cls === 'alert-success') setTimeout(() => hideAlert(id), 5000);
+        }
+        function hideAlert(id) {
+            const el = document.getElementById(id);
+            if (el) el.classList.remove('show');
+        }
+        function showErr(msg) { showAlert('alert-error', msg, 'alert-warning'); }
+
+        window.addEventListener('load', initWS);
     </script>
 </body>
 </html>