v3.2.0: 카카오톡 연동 + 탐정앱 업그레이드 + 모바일 대응 강화

- 카카오톡 채널 챗봇 (오픈빌더 비동기 콜백 방식, 5초 제한 우회)
- 카카오 "나에게 보내기" OAuth 알림 (kakao-notify.ts)
- 채널 설정 UI + userMap으로 다중 사용자 계정 매핑
- 탐정앱: 탭(메모/체크리스트/타임라인), 우선순위, 검색, 보고서/고소장/접수안내 생성
- 모바일 브레이크포인트 640px → 1024px (갤럭시 폴드 대응)
- 프롬프트 파일 제한 상향 (USER.md 3000, SOUL.md/AGENTS.md 4000)
- 교통앱 마지막 선택 지역 localStorage 저장/복원
- docs/kakao-setup.md 작성

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web-ui/app.js

@@ -3741,6 +3741,15 @@ function setChannelStatus(idPrefix, state, message) {
 }
 
 function readChannelPayload(channel) {
+  if (channel === 'kakao') {
+    let userMap = {};
+    try { userMap = JSON.parse(document.getElementById('settings-kk-usermap')?.value || '{}'); } catch {}
+    return {
+      appKey: (document.getElementById('settings-kk-appkey')?.value || '').trim(),
+      channelEnabled: !!document.getElementById('settings-kk-channel-enabled')?.checked,
+      userMap,
+    };
+  }
   if (channel === 'telegram') {
     const userIdStr = (document.getElementById('settings-tg-userid')?.value || '').trim();
     const allowedUserIds = userIdStr ? userIdStr.split(/[,\s]+/).map(Number).filter(n => !isNaN(n) && n > 0) : [];
@@ -3787,23 +3796,26 @@ function onChannelTypeChange() {
   const ch = getSelectedChannelType();
   const formMap = {
     telegram: 'channel-form-telegram',
+    kakao: 'channel-form-kakao',
     discord: 'channel-form-discord',
     whatsapp: 'channel-form-whatsapp',
     email: 'channel-form-email',
   };
   const guideMap = {
     telegram: 'channel-guide-telegram',
+    kakao: 'channel-guide-kakao',
     discord: 'channel-guide-discord',
     whatsapp: 'channel-guide-whatsapp',
     email: 'channel-guide-email',
   };
   const statusMap = {
     telegram: 'tg-status-bar',
+    kakao: 'kk-status-bar',
     discord: 'dc-status-bar',
     whatsapp: 'wa-status-bar',
     email: 'em-status-bar',
   };
-  ['telegram', 'discord', 'whatsapp', 'email'].forEach((k) => {
+  ['telegram', 'kakao', 'discord', 'whatsapp', 'email'].forEach((k) => {
     const form = document.getElementById(formMap[k]);
     const guide = document.getElementById(guideMap[k]);
     const status = document.getElementById(statusMap[k]);
@@ -3812,12 +3824,13 @@ function onChannelTypeChange() {
     if (status) status.style.display = (k === ch) ? 'flex' : 'none';
   });
   // Email: hide test/send-test buttons (email has per-account test)
+  // Kakao: hide "테스트" (연결 확인 없음), 테스트 전송만 노출
   const testBtn = document.getElementById('channel-test-btn');
   const sendTestBtn = document.getElementById('channel-send-test-btn');
-  if (testBtn) testBtn.style.display = (ch === 'email') ? 'none' : '';
+  if (testBtn) testBtn.style.display = (ch === 'email' || ch === 'kakao') ? 'none' : '';
   if (sendTestBtn) sendTestBtn.style.display = (ch === 'email') ? 'none' : '';
-  // Load email accounts when switching to email tab
   if (ch === 'email') loadEmailAccounts();
+  if (ch === 'kakao') loadKakaoStatus();
 }
 
 async function saveSelectedChannelSettings() {
@@ -3883,6 +3896,38 @@ async function loadChannelsStatus() {
   } catch {}
 }
 
+async function loadKakaoStatus() {
+  try {
+    const data = await api('/api/kakao/status');
+    const n = data?.notify || {};
+    const c = data?.channel || {};
+    if (n.hasAppKey && n.hasRefreshToken) setChannelStatus('kk', 'ok', '알림 연동됨' + (c.enabled ? ' + 챗봇 활성' : ''));
+    else if (n.hasAppKey) setChannelStatus('kk', 'warn', 'API 키 있음 — OAuth 로그인 필요');
+    else setChannelStatus('kk', 'off', '미설정');
+    if (n.hasAppKey) document.getElementById('settings-kk-appkey').placeholder = '•••••••• (저장됨)';
+    document.getElementById('settings-kk-channel-enabled').checked = !!c.enabled;
+  } catch {}
+}
+
+async function kakaoOAuthStart() {
+  const appKey = (document.getElementById('settings-kk-appkey')?.value || '').trim();
+  if (appKey) {
+    // 먼저 appKey 저장
+    await saveChannelSettings('kakao');
+  }
+  const status = document.getElementById('kk-oauth-status');
+  if (status) status.textContent = '새 창에서 로그인 중...';
+  const w = window.open('/api/kakao/auth/start', '_blank', 'width=600,height=700');
+  if (!w) { alert('팝업이 차단됐습니다. 팝업을 허용해 주세요.'); return; }
+  const timer = setInterval(async () => {
+    if (w.closed) {
+      clearInterval(timer);
+      await loadKakaoStatus();
+      if (status) status.textContent = '';
+    }
+  }, 1000);
+}
+
 async function saveChannelSettings(channel) {
   const payload = readChannelPayload(channel);
   try {
@@ -8805,7 +8850,7 @@ const RIGHT_COLLAPSE_KEY = 'rightPanelCollapsed';
 function applyRightPanelCollapsed(collapsed) {
   document.body.classList.toggle('right-collapsed', !!collapsed);
   // Only override on desktop — narrow viewports use the mobile single-column layout.
-  const isDesktop = window.matchMedia('(min-width: 980px)').matches;
+  const isDesktop = window.matchMedia('(min-width: 1025px)').matches;
   if (!isDesktop) { document.body.style.gridTemplateColumns = ''; return; }
   if (collapsed) {
     document.body.style.gridTemplateColumns = '280px 1fr 36px';

web-ui/arduino-emulator.html

@@ -309,6 +309,34 @@
   .cm-s-default .cm-def     { color:var(--yellow) !important; }
   /* 속도 슬라이더 */
   #speed-range { width:70px; height:4px; accent-color:var(--accent); vertical-align:middle; cursor:pointer; }
+
+  /* ── mob-tab (inline since styles.css not loaded) ── */
+  .mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:6px 4px;border-top:2px solid transparent;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
+  .mob-tab.active{color:var(--accent);border-top-color:var(--accent);}
+
+  /* ── Mobile ── */
+  @media(max-width:1024px){
+    .header{flex-wrap:wrap;padding:7px 10px;gap:5px;}
+    .header h1{font-size:13px;}
+    .toolbar{gap:4px;}
+    .board-panel{
+      position:fixed;top:0;left:0;bottom:0;z-index:500;
+      width:84vw;max-width:300px;
+      transform:translateX(-100%);transition:transform .25s ease;
+      box-shadow:4px 0 24px rgba(0,0,0,.5);
+      resize:none;
+    }
+    .board-panel.mob-open{transform:translateX(0);}
+    #mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:499;}
+    #mob-backdrop.show{display:block;}
+    #mob-tabbar{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:490;background:var(--panel);border-top:1px solid var(--bdr);height:52px;}
+    .main{padding-bottom:52px;}
+    input,select{font-size:16px !important;}
+  }
+  @media(min-width:1025px){
+    #mob-backdrop{display:none !important;}
+    #mob-tabbar{display:none !important;}
+  }
 </style>
 <link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css">
 <script src="/vendor/codemirror/lib/codemirror.js"></script>
@@ -316,6 +344,12 @@
 </head>
 <body>
 
+<div id="mob-backdrop" onclick="mobCloseBoard()"></div>
+<div id="mob-tabbar" style="display:none">
+  <button class="mob-tab" id="mobtab-board" onclick="mobToggleBoard()"><span style="font-size:18px">🔌</span>보드</button>
+  <button class="mob-tab active" id="mobtab-serial" onclick="mobCloseBoard()"><span style="font-size:18px">📟</span>시리얼</button>
+</div>
+
 <div class="header">
   <h1>🔌 Arduino Emulator</h1>
   <span class="file" id="filename">sketch.ino</span>
@@ -7551,6 +7585,25 @@ document.addEventListener('keydown', e => {
     compileAndRun();
   }
 });
+
+// ── Mobile ───────────────────────────────────────────────────────────────────
+function mobCloseBoard(){
+  document.querySelector('.board-panel').classList.remove('mob-open');
+  document.getElementById('mob-backdrop').classList.remove('show');
+  document.getElementById('mobtab-board').classList.remove('active');
+  document.getElementById('mobtab-serial').classList.add('active');
+}
+function mobToggleBoard(){
+  if(window.innerWidth>640)return;
+  const open=document.querySelector('.board-panel').classList.contains('mob-open');
+  if(open){mobCloseBoard();}
+  else{
+    document.querySelector('.board-panel').classList.add('mob-open');
+    document.getElementById('mob-backdrop').classList.add('show');
+    document.getElementById('mobtab-board').classList.add('active');
+    document.getElementById('mobtab-serial').classList.remove('active');
+  }
+}
 </script>
 </body>
 </html>

web-ui/code.html

@@ -173,10 +173,57 @@
   /* Override the main-app inline display:none / flex on the shared sidebar markup */
   #sidebar-code { display: flex !important; }
   #code-view { flex: 1; min-width: 0; }
+
+  /* ── Mobile ── */
+  @media(max-width:1024px){
+    .code-page-header{flex-wrap:wrap;padding:6px 10px;gap:5px;}
+    .code-page-header h1{font-size:13px;}
+    .code-page-header > div:last-child{display:none;}
+    /* 좌측 파일 패널 → 왼쪽 오버레이 */
+    .code-sidebar-wrap{
+      position:fixed;top:0;left:0;bottom:0;z-index:500;
+      width:82vw;max-width:300px;
+      transform:translateX(-100%);transition:transform .25s ease;
+      box-shadow:4px 0 24px rgba(0,0,0,.4);
+    }
+    .code-sidebar-wrap.mob-open{transform:translateX(0);}
+    /* 우측 AI 패널 → 오른쪽 오버레이 */
+    #code-ai-panel{
+      position:fixed !important;top:0;right:0;bottom:0;z-index:500;
+      width:92vw;max-width:400px;
+      transform:translateX(100%);transition:transform .25s ease;
+      box-shadow:-4px 0 28px rgba(0,0,0,.5);
+      grid-area:unset !important;
+    }
+    #code-ai-panel.mob-open{transform:translateX(0);}
+    /* 에디터뷰 grid를 에디터 단독으로 */
+    #code-view.active{
+      grid-template-columns:1fr !important;
+      grid-template-rows:1fr auto !important;
+      grid-template-areas:"editor" "term" !important;
+    }
+    .code-vresize{display:none;}
+    #mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:499;}
+    #mob-backdrop.show{display:block;}
+    #mob-tabbar{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:490;background:var(--panel);border-top:1px solid var(--line);height:52px;}
+    .code-layout{padding-bottom:52px;}
+    input,select,textarea{font-size:16px !important;}
+  }
+  @media(min-width:1025px){
+    #mob-backdrop{display:none !important;}
+    #mob-tabbar{display:none !important;}
+  }
 </style>
 </head>
 <body>
 
+<div id="mob-backdrop" onclick="mobCloseAll()"></div>
+<div id="mob-tabbar" style="display:none">
+  <button class="mob-tab" id="mobtab-files" onclick="mobToggle('files')"><span style="font-size:18px">📁</span>파일</button>
+  <button class="mob-tab active" id="mobtab-editor" onclick="mobCloseAll()"><span style="font-size:18px">💻</span>에디터</button>
+  <button class="mob-tab" id="mobtab-ai" onclick="mobToggle('ai')"><span style="font-size:18px">🤖</span>AI</button>
+</div>
+
 <div class="code-page-header">
   <span style="font-size:16px">💻</span>
   <h1>코드 에디터</h1>
@@ -591,6 +638,34 @@
 </div>
 
 <script src="code.js?v=20260604s"></script>
+<script>
+function mobCloseAll(){
+  document.querySelector('.code-sidebar-wrap').classList.remove('mob-open');
+  document.getElementById('code-ai-panel').classList.remove('mob-open');
+  document.getElementById('mob-backdrop').classList.remove('show');
+  ['files','ai'].forEach(t=>document.getElementById('mobtab-'+t)?.classList.remove('active'));
+  document.getElementById('mobtab-editor').classList.add('active');
+}
+function mobToggle(which){
+  if(window.innerWidth>640)return;
+  const filesOpen=document.querySelector('.code-sidebar-wrap').classList.contains('mob-open');
+  const aiOpen=document.getElementById('code-ai-panel').classList.contains('mob-open');
+  if(which==='files'&&filesOpen){mobCloseAll();return;}
+  if(which==='ai'&&aiOpen){mobCloseAll();return;}
+  mobCloseAll();
+  if(which==='files'){
+    document.querySelector('.code-sidebar-wrap').classList.add('mob-open');
+    document.getElementById('mob-backdrop').classList.add('show');
+    document.getElementById('mobtab-files').classList.add('active');
+    document.getElementById('mobtab-editor').classList.remove('active');
+  } else {
+    document.getElementById('code-ai-panel').classList.add('mob-open');
+    document.getElementById('mob-backdrop').classList.add('show');
+    document.getElementById('mobtab-ai').classList.add('active');
+    document.getElementById('mobtab-editor').classList.remove('active');
+  }
+}
+</script>
 <div id="csb-ctx"></div>
 </body>
 </html>

web-ui/dental-agent.html

@@ -632,7 +632,7 @@ button.danger:hover { background: #fecaca; }
 .theme-dot.active { border-color: var(--text); }
 
 /* ── Mobile ── */
-@media(max-width:640px){
+@media(max-width:1024px){
   .header{flex-wrap:wrap;padding:6px 10px;gap:6px;}
   .header h1{font-size:13px;}
   .theme-picker{display:none;}
@@ -669,7 +669,7 @@ button.danger:hover { background: #fecaca; }
   /* iOS zoom */
   input,textarea,select{font-size:16px !important;}
 }
-@media(min-width:641px){
+@media(min-width:1025px){
   #mob-backdrop{display:none !important;}
   #mob-tabbar{display:none !important;}
 }

web-ui/esp32-flasher.html

@@ -81,10 +81,45 @@
   @keyframes spin { to{transform:rotate(360deg)} }
 
   .chip-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; background:#1a3a1a; color:var(--green); border:1px solid #2d5a2d; }
+
+  /* ── mob-tab (inline since styles.css not loaded) ── */
+  .mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:6px 4px;border-top:2px solid transparent;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
+  .mob-tab.active{color:var(--accent);border-top-color:var(--accent);}
+
+  /* ── Mobile ── */
+  @media(max-width:1024px){
+    .header{flex-wrap:wrap;padding:7px 10px;gap:6px;}
+    .header h1{font-size:13px;}
+    .toolbar{gap:4px;}
+    .toolbar .btn{padding:5px 8px;font-size:11px;}
+    .left-panel{
+      position:fixed;top:0;left:0;bottom:0;z-index:500;
+      width:84vw;max-width:310px;
+      transform:translateX(-100%);transition:transform .25s ease;
+      box-shadow:4px 0 24px rgba(0,0,0,.6);
+    }
+    .left-panel.mob-open{transform:translateX(0);}
+    #mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:499;}
+    #mob-backdrop.show{display:block;}
+    #mob-tabbar{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:490;background:var(--panel);border-top:1px solid #2d2d4a;height:52px;}
+    .main{padding-bottom:52px;}
+    .serial-panel{border:none;}
+    input,select{font-size:16px !important;}
+  }
+  @media(min-width:1025px){
+    #mob-backdrop{display:none !important;}
+    #mob-tabbar{display:none !important;}
+  }
 </style>
 </head>
 <body>
 
+<div id="mob-backdrop" onclick="mobClosePanel()"></div>
+<div id="mob-tabbar" style="display:none">
+  <button class="mob-tab" id="mobtab-ctrl" onclick="mobTogglePanel()"><span style="font-size:18px">⚡</span>플래시</button>
+  <button class="mob-tab active" id="mobtab-term" onclick="mobClosePanel()"><span style="font-size:18px">📟</span>터미널</button>
+</div>
+
 <div class="header">
   <h1>⚡ ESP32 Flasher</h1>
   <span class="file" id="filename">sketch.ino</span>
@@ -466,6 +501,25 @@ async function boot() {
 }
 
 boot();
+
+// ── Mobile ──────────────────────────────────────────────────────────────────
+function mobClosePanel(){
+  document.querySelector('.left-panel').classList.remove('mob-open');
+  document.getElementById('mob-backdrop').classList.remove('show');
+  document.getElementById('mobtab-ctrl').classList.remove('active');
+  document.getElementById('mobtab-term').classList.add('active');
+}
+function mobTogglePanel(){
+  if(window.innerWidth>640)return;
+  const open=document.querySelector('.left-panel').classList.contains('mob-open');
+  if(open){mobClosePanel();}
+  else{
+    document.querySelector('.left-panel').classList.add('mob-open');
+    document.getElementById('mob-backdrop').classList.add('show');
+    document.getElementById('mobtab-ctrl').classList.add('active');
+    document.getElementById('mobtab-term').classList.remove('active');
+  }
+}
 </script>
 </body>
 </html>

web-ui/index.html

@@ -62,7 +62,9 @@
     <button class="mode-btn" onclick="window.open('/mind-app.html','_blank')" title="마음 상담실">🧠 상담</button>
     <button class="mode-btn" onclick="window.open('/lawyer-app.html','_blank')" title="법률 어시스턴트">⚖️ 법률</button>
     <button class="mode-btn" onclick="window.open('/investor-app.html','_blank')" title="투자 어시스턴트">📈 투자</button>
+    <button class="mode-btn" onclick="window.open('/detective-app.html','_blank')" title="탐정 어시스턴트">🔍 탐정</button>
     <button class="mode-btn" onclick="window.open('/weather-app.html','_blank')" title="날씨 어시스턴트">🌤️ 날씨</button>
+    <button class="mode-btn" onclick="window.open('/traffic-app.html','_blank')" title="교통 CCTV">🚦 교통</button>
     <button class="mode-btn" onclick="window.open('/dental-agent.html?t='+Date.now(),'_blank')" title="치과 사전 이미지 에이전트">🦷 치과</button>
   </div>
 
@@ -1345,6 +1347,7 @@
           <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px">채널</label>
           <select id="settings-channel-select" class="settings-input" onchange="onChannelTypeChange()" style="margin-bottom:10px">
             <option value="telegram">Telegram</option>
+            <option value="kakao">카카오톡</option>
             <option value="discord">Discord</option>
             <option value="whatsapp">WhatsApp</option>
             <option value="email">Email</option>
@@ -1354,6 +1357,10 @@
             <div id="tg-status-dot" style="width:8px;height:8px;border-radius:50%;background:#ccc;flex-shrink:0"></div>
             <span id="tg-status-text" style="color:var(--muted)">미설정</span>
           </div>
+          <div id="kk-status-bar" style="display:none;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;border-radius:8px;background:#f8f9fa;font-size:12px">
+            <div id="kk-status-dot" style="width:8px;height:8px;border-radius:50%;background:#ccc;flex-shrink:0"></div>
+            <span id="kk-status-text" style="color:var(--muted)">미설정</span>
+          </div>
           <div id="dc-status-bar" style="display:none;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;border-radius:8px;background:#f8f9fa;font-size:12px">
             <div id="dc-status-dot" style="width:8px;height:8px;border-radius:50%;background:#ccc;flex-shrink:0"></div>
             <span id="dc-status-text" style="color:var(--muted)">미설정</span>
@@ -1378,6 +1385,23 @@
             </label>
           </div>
 
+          <div id="channel-form-kakao" style="display:none">
+            <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px">REST API 키</label>
+            <input id="settings-kk-appkey" type="password" placeholder="카카오 REST API 키..." style="width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;font-family:'IBM Plex Mono',monospace;box-sizing:border-box" />
+            <div style="margin-top:10px;padding:10px;border:1px dashed var(--line);border-radius:8px;background:rgba(255,193,7,.05)">
+              <div style="font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px">OAuth 로그인 (나에게 보내기 알림용)</div>
+              <div style="font-size:11px;color:var(--muted);margin-bottom:8px">API 키 저장 후 아래 버튼으로 카카오 로그인하면 토큰이 자동 저장됩니다.</div>
+              <button onclick="kakaoOAuthStart()" style="background:#FEE500;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:700;color:#3C1E1E;cursor:pointer">🟡 카카오 로그인</button>
+              <span id="kk-oauth-status" style="font-size:11px;color:var(--muted);margin-left:8px"></span>
+            </div>
+            <label style="display:block;font-size:12px;color:var(--muted);margin:10px 0 6px">사용자 매핑 (선택, JSON)</label>
+            <input id="settings-kk-usermap" type="text" placeholder='{"카카오userId":"homeclaw_username"}' style="width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:11px;font-family:'IBM Plex Mono',monospace;box-sizing:border-box" />
+            <label style="display:flex;align-items:center;gap:8px;font-size:13px;margin:10px 0 0;cursor:pointer">
+              <input type="checkbox" id="settings-kk-channel-enabled" />
+              챗봇 채널 활성화 (오픈빌더 연동)
+            </label>
+          </div>
+
           <div id="channel-form-discord" style="display:none">
             <label style="display:block;font-size:12px;color:var(--muted);margin-bottom:6px">Bot Token</label>
             <input id="settings-dc-token" type="password" placeholder="Discord bot token" style="width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:12px;font-family:'IBM Plex Mono',monospace;box-sizing:border-box" />
@@ -1485,6 +1509,19 @@
             4. Add allowed IDs, then click <b>Test</b> and <b>Save</b>.<br>
             5. Use <b>Send Test</b> to verify delivery.
           </div>
+          <div id="channel-guide-kakao" style="display:none;font-size:12px;color:var(--muted);line-height:1.8">
+            <b>카카오톡 Setup</b><br>
+            <b>1.</b> <a href="https://developers.kakao.com" target="_blank" style="color:var(--brand)">developers.kakao.com</a> 에서 앱 생성<br>
+            <b>2.</b> 앱 설정 → 플랫폼 → Web 추가 (서버 도메인)<br>
+            <b>3.</b> 카카오 로그인 활성화 → 동의항목: <code style="background:#f4f4f4;padding:1px 4px;border-radius:3px">talk_message</code><br>
+            <b>4.</b> 허용된 리다이렉트 URI에 <code style="background:#f4f4f4;padding:1px 4px;border-radius:3px">{서버주소}/api/kakao/auth/callback</code> 추가<br>
+            <b>5.</b> REST API 키 입력 → 저장 → 🟡 카카오 로그인<br><br>
+            <b>챗봇 (오픈빌더)</b><br>
+            <b>6.</b> <a href="https://i.kakao.com" target="_blank" style="color:var(--brand)">i.kakao.com</a> 에서 챗봇 생성<br>
+            <b>7.</b> 스킬 서버 URL: <code style="background:#f4f4f4;padding:1px 4px;border-radius:3px">{서버주소}/api/kakao/webhook</code><br>
+            <b>8.</b> 스킬 편집 → 콜백 사용 체크 → 시나리오 폴백 블록에 스킬 연결<br>
+            <b>9.</b> 챗봇 채널 활성화 체크 → 저장
+          </div>
           <div id="channel-guide-discord" style="display:none;font-size:12px;color:var(--muted);line-height:1.8">
             <b>Discord Setup</b><br>
             1. Create an app + bot in Discord Developer Portal.<br>

web-ui/language-app.html

@@ -165,7 +165,7 @@ body { background: var(--bg); color: var(--text); font-family: 'Nanum Gothic', s
 ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
 
 /* ── Mobile ── */
-@media(max-width:640px){
+@media(max-width:1024px){
   /* Header: wrap to 2 rows */
   .lg-header { flex-wrap:wrap; padding:6px 10px; gap:5px; }
   .lg-header h1 { font-size:13px; }
@@ -212,7 +212,7 @@ body { background: var(--bg); color: var(--text); font-family: 'Nanum Gothic', s
   input, textarea, select { font-size:16px !important; }
   .quiz-fill { font-size:16px !important; }
 }
-@media(min-width:641px){
+@media(min-width:1025px){
   #mob-tabbar { display:none !important; }
   #mob-backdrop { display:none !important; }
   .mob-filter-btn { display:none !important; }

web-ui/mind-app.html

@@ -156,7 +156,7 @@ body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;dis
 .mn-resize:hover,.mn-resize.dragging{background:#8b5cf6;}
 
 /* ── Mobile ── */
-@media(max-width:640px){
+@media(max-width:1024px){
   .mn-hdr{flex-wrap:wrap;padding:5px 8px;gap:5px;}
   .mn-hdr h1{font-size:12px;}
   .mode-toggle{order:10;flex:0 0 100%;}
@@ -198,7 +198,7 @@ body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;dis
   /* font-size ≥16px to prevent iOS auto-zoom */
   .mn-textarea,input,textarea{font-size:16px !important;}
 }
-@media(min-width:641px){
+@media(min-width:1025px){
   #mob-tabbar{display:none !important;}
   #mob-backdrop{display:none !important;}
 }
@@ -375,7 +375,7 @@ function getToken(){try{return sessionStorage.getItem(TOKEN_KEY)||localStorage.g
 function authH(extra){const t=getToken();const h={...(extra||{})};if(t)h['Authorization']='Bearer '+t;return h;}
 async function checkAuth(){
   if(!getToken()){location.href='/login.html?redirect='+encodeURIComponent(location.pathname);return false;}
-  try{const r=await fetch('/api/auth/status',{headers:authH()});if(!r.ok){location.href='/login.html?redirect='+encodeURIComponent(location.pathname);return false;}return true;}
+  try{const r=await fetch('/api/auth/status',{headers:authH()});if(!r.ok){location.href='/login.html?redirect='+encodeURIComponent(location.pathname);return false;}const d=await r.json();if(!d.authenticated){location.href='/login.html?redirect='+encodeURIComponent(location.pathname);return false;}return true;}
   catch{location.href='/login.html?redirect='+encodeURIComponent(location.pathname);return false;}
 }
 
@@ -472,8 +472,37 @@ async function loadModels(){
 function saveModel(){selectedModel=document.getElementById('model-sel').value;try{localStorage.setItem(MODEL_KEY,selectedModel);}catch{}}
 
 // ── Session ───────────────────────────────────────────────────────────────────
-const SID_KEY='mn_app_session';
-function getSessionId(){try{let s=sessionStorage.getItem(SID_KEY);if(!s){s='mn_'+Math.random().toString(36).slice(2,12);sessionStorage.setItem(SID_KEY,s);}return s;}catch{return 'mn_main';}}
+const APP_KEY='mn';
+let _sessionId=null;
+function getSessionId(){return _sessionId||'mn_main';}
+async function initSessionId(){
+  try{const r=await fetch('/api/user/app-sessions',{headers:authH()});if(r.ok){const d=await r.json();if(d[APP_KEY]){_sessionId=d[APP_KEY];return;}}}catch{}
+  _sessionId='mn_'+Math.random().toString(36).slice(2,12);
+  try{await fetch('/api/user/app-sessions',{method:'PUT',headers:authH({'Content-Type':'application/json'}),body:JSON.stringify({appKey:APP_KEY,sessionId:_sessionId})});}catch{}
+}
+
+async function loadHistory(){
+  const sid=getSessionId();
+  if(!sid||sid.endsWith('_main'))return;
+  try{
+    const r=await fetch('/api/chat/sessions/'+encodeURIComponent(sid),{headers:authH()});
+    if(!r.ok)return;
+    const d=await r.json();
+    const msgs=(d.history||[]).filter(m=>m.role==='user'||m.role==='assistant');
+    if(!msgs.length)return;
+    const recent=msgs.slice(-30);
+    const el=document.getElementById('chat-msgs');
+    const sep=document.createElement('div');sep.style.cssText='text-align:center;color:var(--muted,#888);font-size:11px;padding:6px 0;';sep.textContent='─ 이전 대화 ─';el.appendChild(sep);
+    for(const m of recent){
+      if(m.role==='user')addMsg('user',escHtml(m.content||''));
+      else addMsg('assistant',renderMd(m.content||''));
+    }
+    const sep2=document.createElement('div');sep2.style.cssText='text-align:center;color:var(--muted,#888);font-size:11px;padding:6px 0;';sep2.textContent='─ 이어서 ─';el.appendChild(sep2);
+    el.scrollTop=el.scrollHeight;
+  }catch{}
+}
+
+
 
 // ── Tools: show / hide ────────────────────────────────────────────────────────
 let activeTool=null;
@@ -1067,10 +1096,11 @@ async function callChat(message){
   }finally{btn.disabled=false;btn.textContent='전송';}
 }
 
-function clearChat(){
+async function clearChat(){
   if(!confirm('대화를 지울까요?'))return;
   document.getElementById('chat-msgs').innerHTML='';
-  try{sessionStorage.removeItem(SID_KEY);}catch{}
+  _sessionId='mn_'+Math.random().toString(36).slice(2,12);
+  try{await fetch('/api/user/app-sessions',{method:'PUT',headers:authH({'Content-Type':'application/json'}),body:JSON.stringify({appKey:APP_KEY,sessionId:_sessionId})});}catch{}
   addMsg('system','새 대화가 시작되었습니다. 편하게 이야기해주세요.');
 }
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMessage();}}
@@ -1079,6 +1109,8 @@ function autoResize(el){el.style.height='auto';el.style.height=Math.min(el.scrol
 // ── Init ──────────────────────────────────────────────────────────────────────
 (async()=>{
   const ok=await checkAuth();if(!ok)return;
+  await initSessionId();
+  await loadHistory();
   setMode(currentMode);
   await Promise.all([loadSkills(),loadModels()]);
   addMsg('system','🧠 마음 상담실에 오신 걸 환영합니다. 왼쪽 도구를 활용하거나 편하게 이야기해주세요.');

web-ui/pptx-wizard.html

@@ -259,12 +259,15 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
 .sed-img-thumb:hover{border-color:var(--brand);}
 .sed-nav-info{font-size:12px;color:var(--muted);text-align:center;flex:1;}
 
+/* ── mob-tab (inline, styles.css not loaded) ── */
+.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:6px 4px;border-top:2px solid transparent;transition:color .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
+.mob-tab.active{color:var(--brand);border-top-color:var(--brand);}
+
 /* ── Mobile ── */
-@media(max-width:640px){
+@media(max-width:1024px){
   /* Header: compact */
   .header{flex-wrap:wrap;padding:7px 12px;gap:6px;}
   .header h1{font-size:13px;}
-  /* hide theme buttons — they're inside sidebar on mobile */
   .header > div:has(.theme-btn){display:none;}
   /* step dots: hide text labels, keep numbers */
   .sdot{padding:5px 8px;font-size:0;}
@@ -272,7 +275,7 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
   .step-hint{display:none;}
   .steps{gap:0;margin-left:auto;}
 
-  /* Sidebar: overlay drawer */
+  /* Sidebar: left overlay */
   .sidebar{
     position:fixed;top:0;left:0;bottom:0;z-index:500;
     width:82vw;max-width:310px;
@@ -281,16 +284,14 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
     order:0;
   }
   .sidebar.mob-open{transform:translateX(0);}
-  /* theme buttons inside sidebar on mobile */
   .sidebar-mob-theme{display:flex !important;}
 
   #mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:499;}
   #mob-backdrop.show{display:block;}
+  #mob-tabbar{display:flex !important;position:fixed;bottom:0;left:0;right:0;z-index:490;background:var(--bg);border-top:1px solid var(--line);height:52px;}
 
-  /* settings toggle button */
-  .mob-cfg-btn{display:inline-flex !important;}
-
-  /* Step scroll area: bottom padding for bbar */
+  /* bottom padding for tabbar */
+  .body{padding-bottom:52px;}
   .sv .scroll{padding-bottom:16px;}
 
   /* Search row: wrap */
@@ -313,9 +314,9 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
   /* iOS zoom prevention */
   input,textarea,select{font-size:16px !important;}
 }
-@media(min-width:641px){
+@media(min-width:1025px){
   #mob-backdrop{display:none !important;}
-  .mob-cfg-btn{display:none !important;}
+  #mob-tabbar{display:none !important;}
   .sidebar-mob-theme{display:none !important;}
 }
 </style>
@@ -325,7 +326,6 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
 <div class="header">
   <span style="font-size:18px">📊</span>
   <h1>슬라이드 제작 마법사</h1>
-  <button class="mob-cfg-btn theme-btn" style="display:none;padding:5px 10px" onclick="mobToggleSidebar()">⚙ 설정</button>
   <div style="display:flex;gap:4px;margin-left:14px">
     <button class="theme-btn active" id="tbtn-dark" onclick="setTheme('dark')">🌙 다크</button>
     <button class="theme-btn" id="tbtn-light" onclick="setTheme('light')">☀️ 라이트</button>
@@ -340,7 +340,11 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
   </div>
 </div>
 
-<div id="mob-backdrop" onclick="mobCloseSidebar()"></div>
+<div id="mob-backdrop" onclick="mobCloseAll()"></div>
+<div id="mob-tabbar" style="display:none">
+  <button class="mob-tab" id="mobtab-settings" onclick="mobToggle('settings')"><span style="font-size:18px">⚙</span>설정</button>
+  <button class="mob-tab active" id="mobtab-work" onclick="mobCloseAll()"><span style="font-size:18px">📊</span>작업</button>
+</div>
 
 <div class="body">
 
@@ -498,7 +502,7 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
         <button class="theme-btn" id="tbtn-dark2" onclick="setTheme('dark')" style="padding:2px 8px;font-size:11px">🌙</button>
         <button class="theme-btn" id="tbtn-light2" onclick="setTheme('light')" style="padding:2px 8px;font-size:11px">☀️</button>
         <button class="theme-btn" id="tbtn-warm2" onclick="setTheme('warm')" style="padding:2px 8px;font-size:11px">🌿</button>
-        <button onclick="mobCloseSidebar()" style="background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1">✕</button>
+        <button onclick="mobCloseAll()" style="background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1">✕</button>
       </div>
     </div>
     <div class="scroll">
@@ -815,16 +819,22 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
 'use strict';
 
 // ── Theme ────────────────────────────────────────────────────────────────────
-// ── Mobile sidebar ────────────────────────────────────────────────────────────
-function mobCloseSidebar(){
+// ── Mobile ────────────────────────────────────────────────────────────────────
+function mobCloseAll(){
   document.querySelector('.sidebar').classList.remove('mob-open');
   document.getElementById('mob-backdrop').classList.remove('show');
+  document.getElementById('mobtab-settings').classList.remove('active');
+  document.getElementById('mobtab-work').classList.add('active');
 }
-function mobToggleSidebar(){
-  const sb=document.querySelector('.sidebar');
-  const open=sb.classList.contains('mob-open');
-  if(open){mobCloseSidebar();}
-  else{sb.classList.add('mob-open');document.getElementById('mob-backdrop').classList.add('show');}
+function mobToggle(which){
+  if(window.innerWidth>640)return;
+  const open=document.querySelector('.sidebar').classList.contains('mob-open');
+  if(which==='settings'&&open){mobCloseAll();return;}
+  mobCloseAll();
+  document.querySelector('.sidebar').classList.add('mob-open');
+  document.getElementById('mob-backdrop').classList.add('show');
+  document.getElementById('mobtab-settings').classList.add('active');
+  document.getElementById('mobtab-work').classList.remove('active');
 }
 
 function setTheme(name) {

web-ui/styles.css

@@ -1868,7 +1868,7 @@
     aside { display: none; }
   }
 
-  @media (max-width: 900px) {
+  @media (max-width: 1024px) {
     body {
       padding: 0;
       gap: 0;

web-ui/traffic-app.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>🚦 교통 CCTV</title>
+<link rel="icon" type="image/png" sizes="64x64" href="cherry_logo.png">
+<link rel="stylesheet" href="styles.css">
+<script>try{var _t=localStorage.getItem('cherryclaw_theme')||'dark';document.documentElement.setAttribute('data-theme',_t);}catch(e){}</script>
+<style>
+:root{--brand:#f59e0b;}
+html,body{height:100%;margin:0;padding:0;}
+body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;height:100dvh;}
+
+.hdr{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;}
+.hdr h1{font-size:13px;font-weight:700;margin:0;}
+.hdr-sp{flex:1;}
+.hdr-btn{background:none;border:1.5px solid var(--line);border-radius:6px;padding:3px 9px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
+.hdr-btn:hover{border-color:var(--brand);color:var(--brand);}
+
+/* ── 사이드바 ── */
+.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0;}
+.sb-top{padding:8px;border-bottom:1px solid var(--line);flex-shrink:0;}
+.search-box{width:100%;background:var(--panel-2);border:1.5px solid var(--line);border-radius:7px;padding:5px 10px;font-size:12px;color:var(--text);font-family:inherit;outline:none;box-sizing:border-box;transition:.15s;}
+.search-box:focus{border-color:var(--brand);}
+.region-bar{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--line);flex-shrink:0;}
+.r-btn{padding:3px 8px;border:1.5px solid var(--line);border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;background:none;color:var(--muted);font-family:inherit;transition:.12s;white-space:nowrap;}
+.r-btn:hover{border-color:var(--brand);color:var(--brand);}
+.r-btn.active{border-color:var(--brand);background:rgba(245,158,11,.12);color:var(--brand);}
+.list-wrap{flex:1;overflow-y:auto;}
+.list-wrap::-webkit-scrollbar{width:3px;}
+.list-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
+.cctv-item{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line);transition:.12s;}
+.cctv-item:hover{background:rgba(245,158,11,.06);}
+.cctv-item.active{background:rgba(245,158,11,.12);border-left:2px solid var(--brand);}
+.ci-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.ci-road{font-size:10px;color:var(--muted);}
+.list-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px;}
+
+/* ── 메인 뷰어 ── */
+.main{flex:1;display:flex;flex-direction:column;min-width:0;}
+.viewer-hdr{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;display:flex;align-items:center;gap:8px;}
+.viewer-title{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.status-dot{width:8px;height:8px;border-radius:50%;background:#888;flex-shrink:0;}
+.status-dot.live{background:#22c55e;box-shadow:0 0 6px #22c55e;}
+.btn-sm{padding:3px 10px;background:none;border:1.5px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
+.btn-sm:hover{border-color:var(--brand);color:var(--brand);}
+
+.video-wrap{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;min-height:0;}
+.video-wrap video{width:100%;height:100%;object-fit:contain;}
+.placeholder{color:#555;font-size:13px;text-align:center;padding:40px;line-height:1.8;}
+.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);color:#fff;font-size:13px;display:none;}
+.loading-overlay.show{display:flex;}
+
+/* ── 그리드 뷰 ── */
+.grid-wrap{flex:1;overflow-y:auto;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;}
+.grid-wrap::-webkit-scrollbar{width:3px;}
+.grid-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
+.grid-item{background:#111;border-radius:8px;overflow:hidden;cursor:pointer;border:1.5px solid var(--line);transition:.15s;aspect-ratio:4/3;position:relative;}
+.grid-item:hover{border-color:var(--brand);}
+.grid-item video{width:100%;height:100%;object-fit:cover;}
+.grid-label{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:rgba(0,0,0,.7);font-size:10px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.view-toggle{display:flex;gap:4px;}
+.vt-btn{padding:3px 10px;background:none;border:1.5px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
+.vt-btn.active{border-color:var(--brand);color:var(--brand);background:rgba(245,158,11,.1);}
+
+.count-badge{font-size:11px;color:var(--muted);padding:0 4px;}
+
+/* ── 탭 ── */
+.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;}
+.tab-btn{padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;background:none;border:none;color:var(--muted);font-family:inherit;border-bottom:2px solid transparent;transition:.15s;margin-bottom:-1px;}
+.tab-btn:hover{color:var(--text);}
+.tab-btn.active{color:var(--brand);border-bottom-color:var(--brand);}
+.tab-pane{display:none;flex:1;min-height:0;}
+.tab-pane.active{display:flex;flex-direction:column;}
+
+/* ── UTIC iframe ── */
+.utic-frame{flex:1;border:none;width:100%;height:100%;}
+</style>
+</head>
+<body>
+<header class="hdr">
+  <a href="/" style="text-decoration:none;font-size:13px;color:var(--muted)">← 홈</a>
+  <h1>🚦 교통 CCTV</h1>
+  <span class="count-badge" id="count-badge"></span>
+  <span class="hdr-sp"></span>
+  <button class="hdr-btn" onclick="toggleTheme()">🌙</button>
+</header>
+
+<div style="display:flex;flex-direction:column;flex:1;min-height:0;">
+  <!-- 탭 바 -->
+  <div class="tab-bar">
+    <button class="tab-btn active" id="tab-utic" onclick="switchTab('utic')">🗺️ UTIC 교통지도</button>
+    <button class="tab-btn" id="tab-its" onclick="switchTab('its')">📡 ITS 고속도로 CCTV</button>
+  </div>
+
+  <!-- UTIC 탭 -->
+  <div class="tab-pane active" id="pane-utic">
+    <iframe class="utic-frame" src="https://www.utic.go.kr/map/map.do?menu=cctv"
+      id="utic-frame" allowfullscreen></iframe>
+  </div>
+
+  <!-- ITS CCTV 탭 -->
+  <div class="tab-pane" id="pane-its" style="flex-direction:row;">
+    <!-- 사이드바: CCTV 목록 -->
+    <aside class="sidebar">
+      <div class="sb-top">
+        <input class="search-box" id="search" type="text" placeholder="🔍 도로·지역 검색..." oninput="filterList()">
+      </div>
+      <div class="region-bar" id="region-bar">
+        <button class="r-btn active" data-minX="124.0" data-maxX="132.0" data-minY="33.0" data-maxY="39.0" onclick="loadRegion(this)">전국</button>
+        <button class="r-btn" data-minX="126.7" data-maxX="127.2" data-minY="37.4" data-maxY="37.7" onclick="loadRegion(this)">서울</button>
+        <button class="r-btn" data-minX="126.6" data-maxX="127.5" data-minY="37.1" data-maxY="37.8" onclick="loadRegion(this)">경기</button>
+        <button class="r-btn" data-minX="128.8" data-maxX="129.3" data-minY="35.0" data-maxY="35.4" onclick="loadRegion(this)">부산</button>
+        <button class="r-btn" data-minX="128.5" data-maxX="129.0" data-minY="35.7" data-maxY="36.1" onclick="loadRegion(this)">대구</button>
+        <button class="r-btn" data-minX="126.6" data-maxX="127.0" data-minY="35.0" data-maxY="35.3" onclick="loadRegion(this)">광주</button>
+        <button class="r-btn" data-minX="127.3" data-maxX="127.6" data-minY="36.2" data-maxY="36.5" onclick="loadRegion(this)">대전</button>
+        <button class="r-btn" data-minX="128.5" data-maxX="129.3" data-minY="35.4" data-maxY="35.9" onclick="loadRegion(this)">울산</button>
+        <button class="r-btn" data-minX="126.3" data-maxX="126.9" data-minY="33.2" data-maxY="33.6" onclick="loadRegion(this)">제주</button>
+      </div>
+      <div class="list-wrap" id="list-wrap">
+        <div class="list-empty">지역을 선택하면 CCTV 목록이 로드됩니다.</div>
+      </div>
+    </aside>
+
+    <!-- 메인 뷰어 -->
+    <main class="main" id="main-area">
+      <div class="viewer-hdr" id="viewer-hdr">
+        <span class="status-dot" id="status-dot"></span>
+        <span class="viewer-title" id="viewer-title">카메라를 선택하세요</span>
+        <button class="btn-sm" id="btn-reload" onclick="reloadCurrent()" style="display:none">↺ 새로고침</button>
+        <div class="view-toggle" style="margin-left:auto;">
+          <button class="vt-btn active" id="btn-single" onclick="setView('single')">단일</button>
+          <button class="vt-btn" id="btn-grid" onclick="setView('grid')">그리드</button>
+        </div>
+      </div>
+      <div class="video-wrap" id="video-wrap">
+        <div class="placeholder" id="placeholder">← 목록에서 CCTV를 선택하면<br>실시간 영상이 재생됩니다.<br><br>📡 ITS 국가교통정보 · HLS 스트리밍</div>
+        <video id="player" style="display:none" controls muted autoplay playsinline></video>
+        <div class="loading-overlay" id="loading-overlay">⏳ 스트림 연결 중...</div>
+      </div>
+      <div class="grid-wrap" id="grid-wrap" style="display:none"></div>
+    </main>
+  </div>
+</div>
+
+<!-- hls.js CDN -->
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
+<script>
+const TOKEN_KEY='smallclaw_token';
+function getToken(){try{return sessionStorage.getItem(TOKEN_KEY)||localStorage.getItem(TOKEN_KEY)||'';}catch{return '';}}
+function authH(extra){const t=getToken();const h={...(extra||{})};if(t)h['Authorization']='Bearer '+t;return h;}
+function toggleTheme(){const d=document.documentElement;const n=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',n);try{localStorage.setItem('cherryclaw_theme',n);}catch{}}
+
+let allItems=[];
+let currentUrl=null;
+let currentHls=null;
+let currentView='single';
+let gridHlsList=[];
+let lastRegionBtn=null;
+
+function switchTab(t){
+  document.getElementById('tab-utic').classList.toggle('active',t==='utic');
+  document.getElementById('tab-its').classList.toggle('active',t==='its');
+  document.getElementById('pane-utic').classList.toggle('active',t==='utic');
+  document.getElementById('pane-its').classList.toggle('active',t==='its');
+}
+
+function setView(v){
+  currentView=v;
+  document.getElementById('btn-single').classList.toggle('active',v==='single');
+  document.getElementById('btn-grid').classList.toggle('active',v==='grid');
+  document.getElementById('video-wrap').style.display=v==='single'?'flex':'none';
+  document.getElementById('grid-wrap').style.display=v==='grid'?'grid':'none';
+  if(v==='grid') renderGrid();
+}
+
+// ── 지역 로드 ──
+async function loadRegion(btn){
+  document.querySelectorAll('#region-bar .r-btn').forEach(b=>b.classList.remove('active'));
+  btn.classList.add('active');
+  lastRegionBtn=btn;
+  const minX=btn.getAttribute('data-minX'),maxX=btn.getAttribute('data-maxX');
+  const minY=btn.getAttribute('data-minY'),maxY=btn.getAttribute('data-maxY');
+  try{localStorage.setItem('traffic_region',JSON.stringify({minX,maxX,minY,maxY,label:btn.textContent.trim()}));}catch{}
+
+  const listWrap=document.getElementById('list-wrap');
+  listWrap.innerHTML='<div class="list-empty">⏳ 로딩 중...</div>';
+  destroyAllGrid();
+
+  try{
+    const r=await fetch(`/api/traffic/cctv?minX=${minX}&maxX=${maxX}&minY=${minY}&maxY=${maxY}&cctvType=1`,{headers:authH()});
+    const d=await r.json();
+    allItems=d.items||[];
+    document.getElementById('count-badge').textContent=allItems.length+'개';
+    renderList(allItems);
+    if(currentView==='grid')renderGrid();
+  }catch(e){
+    listWrap.innerHTML=`<div class="list-empty">오류: ${e.message}</div>`;
+  }
+}
+
+// ── 목록 렌더링 ──
+function renderList(items){
+  const wrap=document.getElementById('list-wrap');
+  if(!items.length){wrap.innerHTML='<div class="list-empty">해당 지역에 CCTV 없음</div>';return;}
+  wrap.innerHTML=items.map(it=>{
+    const origIdx=allItems.indexOf(it);
+    return `<div class="cctv-item" id="item-${origIdx}" onclick="playCctv(${origIdx})">
+      <div class="ci-name">${escHtml(it.cctvname||'')}</div>
+      <div class="ci-road">📍 ${it.cctvformat||'HLS'} · ${it.coordy?.toFixed(4)}, ${it.coordx?.toFixed(4)}</div>
+    </div>`;
+  }).join('');
+}
+
+function filterList(){
+  const q=document.getElementById('search').value.toLowerCase();
+  const filtered=q?allItems.filter(it=>(it.cctvname||'').toLowerCase().includes(q)):allItems;
+  renderList(filtered);
+}
+
+function escHtml(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+
+// ── 단일 재생 ──
+function playCctv(idx){
+  document.querySelectorAll('.cctv-item').forEach(el=>el.classList.remove('active'));
+  const el=document.getElementById('item-'+idx);
+  if(el)el.classList.add('active');
+
+  const it=allItems[idx];
+  if(!it)return;
+  document.getElementById('viewer-title').textContent=it.cctvname||'CCTV';
+  document.getElementById('btn-reload').style.display='';
+  currentUrl=it.cctvurl;
+  playHls(currentUrl, document.getElementById('player'), document.getElementById('status-dot'));
+}
+
+function reloadCurrent(){if(currentUrl)playHls(currentUrl, document.getElementById('player'), document.getElementById('status-dot'));}
+
+function proxyUrl(url){return '/api/traffic/hls-proxy?url='+encodeURIComponent(url);}
+
+function playHls(url, videoEl, dotEl){
+  url=proxyUrl(url);
+  document.getElementById('placeholder').style.display='none';
+  videoEl.style.display='block';
+  document.getElementById('loading-overlay').classList.add('show');
+  if(dotEl)dotEl.className='status-dot';
+
+  if(currentHls){currentHls.destroy();currentHls=null;}
+
+  if(Hls.isSupported()){
+    const hls=new Hls({enableWorker:false});
+    currentHls=hls;
+    hls.loadSource(url);
+    hls.attachMedia(videoEl);
+    hls.on(Hls.Events.MANIFEST_PARSED,()=>{
+      videoEl.play().catch(()=>{});
+      document.getElementById('loading-overlay').classList.remove('show');
+      if(dotEl)dotEl.className='status-dot live';
+    });
+    hls.on(Hls.Events.ERROR,(_,data)=>{
+      if(data.fatal){
+        document.getElementById('loading-overlay').classList.remove('show');
+        if(dotEl)dotEl.className='status-dot';
+      }
+    });
+  } else if(videoEl.canPlayType('application/vnd.apple.mpegurl')){
+    videoEl.src=url;
+    videoEl.play().catch(()=>{});
+    document.getElementById('loading-overlay').classList.remove('show');
+    if(dotEl)dotEl.className='status-dot live';
+  }
+}
+
+// ── 그리드 뷰 (최대 9개) ──
+function destroyAllGrid(){
+  gridHlsList.forEach(h=>h.destroy());
+  gridHlsList=[];
+}
+
+function renderGrid(){
+  destroyAllGrid();
+  const wrap=document.getElementById('grid-wrap');
+  const items=allItems.slice(0,9);
+  if(!items.length){wrap.innerHTML='<div style="color:var(--muted);font-size:12px;grid-column:1/-1;text-align:center;padding:20px">CCTV 없음</div>';return;}
+  wrap.innerHTML=items.map((it,i)=>`
+    <div class="grid-item" onclick="switchToSingle(${i})">
+      <video id="gvid-${i}" muted autoplay playsinline></video>
+      <div class="grid-label">${escHtml(it.cctvname||'')}</div>
+    </div>`).join('');
+
+  items.forEach((it,i)=>{
+    const v=document.getElementById('gvid-'+i);
+    if(!v||!it.cctvurl)return;
+    const purl=proxyUrl(it.cctvurl);
+    if(Hls.isSupported()){
+      const hls=new Hls({enableWorker:false,maxBufferLength:10});
+      gridHlsList.push(hls);
+      hls.loadSource(purl);
+      hls.attachMedia(v);
+      hls.on(Hls.Events.MANIFEST_PARSED,()=>v.play().catch(()=>{}));
+    } else if(v.canPlayType('application/vnd.apple.mpegurl')){
+      v.src=purl;
+      v.play().catch(()=>{});
+    }
+  });
+}
+
+function switchToSingle(idx){
+  setView('single');
+  playCctv(idx);
+}
+
+// ── Init ──
+(async()=>{
+  // 저장된 지역 복원, 없으면 전국
+  let restored=false;
+  try{
+    const saved=JSON.parse(localStorage.getItem('traffic_region')||'null');
+    if(saved){
+      const btn=document.querySelector(
+        `.r-btn[data-minX="${saved.minX}"][data-maxX="${saved.maxX}"][data-minY="${saved.minY}"][data-maxY="${saved.maxY}"]`
+      );
+      if(btn){loadRegion(btn);restored=true;}
+    }
+  }catch{}
+  if(!restored){
+    const btn=document.querySelector('.r-btn[data-minX="124.0"]');
+    if(btn)loadRegion(btn);
+  }
+})();
+</script>
+</body>
+</html>