403 Forbidden — Bulk AI/SEO scraping is disallowed by robots.txt.

<!-- LMX RE-ASSEMBLED 3-FORM-FACTOR ENHANCER (SA-01 ~ SA-18) -->
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "비주얼라이저 (Visualizer)",
  "applicationCategory": "BusinessApplication, UtilitiesApplication",
  "operatingSystem": "Web, Windows, macOS, Android, iOS",
  "url": "https://visualizer.myagent.men",
  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "KRW" }
}
</script>
<style id="lmx-reassembly-tri-shell-css">
  /* SA-06: Mobile Web & App Responsive Overflow & Touch Target Guard */
  @media (max-width: 768px) {
    html, body { max-width: 100vw !important; overflow-x: hidden !important; }
    body { padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
    #lmx-u90-fab-bar { display: none !important; }
    #lmx-tri-bottom-nav { display: flex !important; }
  }
  html[data-lmx-form="mobile"] body,
  html[data-lmx-form="app"] body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
  html[data-lmx-form="mobile"] #lmx-u90-fab-bar,
  html[data-lmx-form="app"] #lmx-u90-fab-bar {
    display: none !important;
  }
  html[data-lmx-form="mobile"] #lmx-tri-bottom-nav,
  html[data-lmx-form="app"] #lmx-tri-bottom-nav {
    display: flex !important;
  }
  html[data-lmx-form="app"] #lmx-app-standalone-bar {
    display: flex !important;
  }
  @media (display-mode: standalone) {
    #lmx-u90-fab-bar { display: none !important; }
    #lmx-tri-bottom-nav { display: flex !important; }
    #lmx-app-standalone-bar { display: flex !important; }
  }
  #lmx-app-standalone-bar {
    display: none;
    position: sticky; top: 0; z-index: 99992;
    background: #0F172A; color: #F8FAFC;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    align-items: center; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
    font-size: 12.5px;
  }
  .lmx-net-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
    background: rgba(16, 185, 129, 0.2); color: #34D399;
  }
  .lmx-net-pill.offline {
    background: rgba(245, 158, 11, 0.25); color: #FBBF24;
  }
  #lmx-tri-bottom-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99991;
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px);
    border-top: 1px solid #E2E8F0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  }
  [data-theme="dark"] #lmx-tri-bottom-nav {
    background: rgba(17, 24, 39, 0.96); border-top-color: #1E293B;
  }
  .lmx-tri-tab {
    flex: 1; min-height: 48px; border: none; background: transparent;
    color: #475569; font-size: 11px; font-weight: 800;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    text-decoration: none; cursor: pointer; border-radius: 10px;
  }
  [data-theme="dark"] .lmx-tri-tab { color: #94A3B8; }
  .lmx-tri-tab.active, .lmx-tri-tab:hover { color: #4F46E5; }
  .lmx-tri-tab-ico { font-size: 17px; line-height: 1; }

  /* SA-09: Toast Notification & Drawer Styles */
  #lmx-toast-container {
    position: fixed; top: 18px; right: 18px; z-index: 100000;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  .lmx-toast-item {
    background: #0F172A; color: #fff; padding: 11px 16px; border-radius: 12px;
    font-size: 13px; font-weight: 700; box-shadow: 0 12px 28px rgba(15,23,42,0.28);
    border-left: 4px solid #4F46E5; pointer-events: auto;
    font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  }
  #lmx-reassembly-drawer-backdrop {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(5px);
    display: none; align-items: center; justify-content: center; padding: 14px;
    font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  }
  #lmx-reassembly-drawer {
    background: #ffffff; color: #0F172A; width: 100%; max-width: 780px; max-height: 88vh;
    overflow-y: auto; border-radius: 22px; padding: 22px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.35); border: 1px solid #E2E8F0;
  }
</style>

<!-- SA-07: Standalone App Top Status Header -->
<div id="lmx-app-standalone-bar" role="region" aria-label="독립 실행형 앱 상태 표시줄">
  <div style="display:flex;align-items:center;gap:8px;">
    <img src="/icon-192.png" alt="" style="width:22px;height:22px;border-radius:6px;" />
    <strong style="font-size:13px;">비주얼라이저 (Visualizer)</strong>
    <span id="lmx-app-net-badge" class="lmx-net-pill">🟢 ONLINE</span>
  </div>
  <div style="display:flex;align-items:center;gap:6px;">
    <button type="button" id="lmx-app-open-history" style="background:rgba(255,255,255,0.14);color:#fff;border:none;padding:4px 9px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;">🗂️ 이력·백업</button>
    <a href="/portable-app.html" download="visualizer-portable-app.html" style="background:#4F46E5;color:#fff;text-decoration:none;padding:4px 9px;border-radius:8px;font-size:11.5px;font-weight:700;">💾 오프라인앱</a>
  </div>
</div>

<!-- SA-06 & SA-07: 5-Tab Mobile Web & App Thumb-Zone Navigation Bar -->
<nav id="lmx-tri-bottom-nav" aria-label="모바일 및 앱 5탭 하단 내비게이션">
  <a href="/" class="lmx-tri-tab ">
    <span class="lmx-tri-tab-ico">🏠</span><span>워크스페이스</span>
  </a>
  <a href="/mobile" class="lmx-tri-tab ">
    <span class="lmx-tri-tab-ico">📱</span><span>모바일뷰</span>
  </a>
  <button type="button" class="lmx-tri-tab" id="lmx-tri-btn-history">
    <span class="lmx-tri-tab-ico">🗂️</span><span>이력·복원</span>
  </button>
  <button type="button" class="lmx-tri-tab " id="lmx-tri-btn-dual">
    <span class="lmx-tri-tab-ico">⚖️</span><span>A/B비교</span>
  </button>
  <a href="/download" class="lmx-tri-tab">
    <span class="lmx-tri-tab-ico">📲</span><span>앱설치·QR</span>
  </a>
</nav>

<div id="lmx-toast-container" aria-live="polite"></div>

<!-- SA-05, SA-08, SA-13, SA-14: Unified Command Palette, History Ledger, JSON Restore & Dual A/B Drawer -->
<div id="lmx-reassembly-drawer-backdrop" role="dialog" aria-modal="true" aria-label="통합 작업 이력·JSON 백업 복원·A/B 비교·커맨드 팔레트">
  <div id="lmx-reassembly-drawer">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #E2E8F0;padding-bottom:12px;margin-bottom:14px;">
      <div>
        <span style="display:inline-block;padding:3px 9px;border-radius:999px;background:#E0E7FF;color:#4338CA;font-size:11px;font-weight:800;">SA-01~18 COMPLETE SERVICE ENGINE</span>
        <h2 style="margin:4px 0 0;font-size:1.15rem;">비주얼라이저 (Visualizer) — 작업 이력 · 양방향 백업/복원 · 3폼팩터 스위처 (Ctrl+K)</h2>
      </div>
      <button type="button" id="lmx-close-reassembly-drawer" style="border:1px solid #CBD5E1;background:#fff;border-radius:8px;padding:6px 11px;font-weight:800;cursor:pointer;">✕ 닫기</button>
    </div>

    <!-- Form-Factor Quick Switcher -->
    <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;">
      <a href="/" style="padding:8px 13px;border-radius:10px;background:#F1F5F9;color:#0F172A;font-size:12.5px;font-weight:800;text-decoration:none;border:1px solid #CBD5E1;">🖥️ PC 웹 워크스테이션 (/)</a>
      <a href="/mobile" style="padding:8px 13px;border-radius:10px;background:#F1F5F9;color:#0F172A;font-size:12.5px;font-weight:800;text-decoration:none;border:1px solid #CBD5E1;">📱 모바일 웹 최적화 (/mobile)</a>
      <a href="/app" style="padding:8px 13px;border-radius:10px;background:#F1F5F9;color:#0F172A;font-size:12.5px;font-weight:800;text-decoration:none;border:1px solid #CBD5E1;">📲 독립 실행형 앱 (/app)</a>
      <a href="/portable-app.html" download="visualizer-portable-app.html" style="padding:8px 13px;border-radius:10px;background:#4F46E5;color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;">💾 오프라인 포터블 앱 다운로드 (.html)</a>
      <a href="/download" style="padding:8px 13px;border-radius:10px;background:#0F172A;color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;">📷 3모드 QR & 앱 설치 허브</a>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
      <!-- SA-13: Auto History Ledger -->
      <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:14px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <h3 style="margin:0;font-size:0.95rem;">🗂️ 최근 작업/계산 이력 (자동 보존)</h3>
          <button type="button" id="lmx-btn-save-snap" style="border:1px solid #4F46E5;background:#fff;color:#4F46E5;border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:800;cursor:pointer;">+ 현재 상태 기록</button>
        </div>
        <div id="lmx-history-list" style="max-height:170px;overflow-y:auto;font-size:12px;color:#334155;"></div>
      </div>

      <!-- SA-14: Bidirectional JSON Backup & File Upload Restore -->
      <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:14px;">
        <h3 style="margin:0 0 8px;font-size:0.95rem;">🔄 양방향 JSON 백업 & 파일 복원</h3>
        <p style="margin:0 0 10px;font-size:12px;color:#475569;">현재 입력값과 전체 작업 이력을 .json 파일로 백업하거나, 백업 파일을 선택해 1초 만에 복원합니다.</p>
        <div style="display:flex;flex-wrap:wrap;gap:8px;">
          <button type="button" id="lmx-btn-full-backup" style="background:#4F46E5;color:#fff;border:none;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer;">⬇️ 전체 백업 (.json)</button>
          <label style="background:#fff;color:#0F172A;border:1px solid #CBD5E1;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer;display:inline-block;">
            📂 백업 파일 복원 (.json)
            <input type="file" id="lmx-inp-restore-json" accept=".json,application/json" style="display:none;" />
          </label>
        </div>
        <div id="lmx-restore-status" style="margin-top:8px;font-size:11.5px;color:#059669;font-weight:700;"></div>
      </div>
    </div>

    <!-- SA-08: Universal Dual A/B Comparison Quick Calculator -->
    <div style="margin-top:14px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:14px;padding:14px;">
      <h3 style="margin:0 0 8px;font-size:0.95rem;">⚖️ 시나리오 A vs B 실시간 듀얼 비교 시뮬레이터 (DOM-48)</h3>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;font-size:12px;">
        <div>
          <label style="font-weight:700;display:block;margin-bottom:4px;">시나리오 A 기준값</label>
          <input type="number" id="lmx-dual-a" value="100000" style="width:100%;padding:7px;border:1px solid #CBD5E1;border-radius:8px;" />
        </div>
        <div>
          <label style="font-weight:700;display:block;margin-bottom:4px;">시나리오 B 비교값</label>
          <input type="number" id="lmx-dual-b" value="135000" style="width:100%;padding:7px;border:1px solid #CBD5E1;border-radius:8px;" />
        </div>
        <div>
          <label style="font-weight:700;display:block;margin-bottom:4px;">할인율/수수료율(%)</label>
          <input type="number" id="lmx-dual-rate" value="5" style="width:100%;padding:7px;border:1px solid #CBD5E1;border-radius:8px;" />
        </div>
      </div>
      <div id="lmx-dual-summary" style="margin-top:10px;padding:10px;background:#fff;border:1px solid #E2E8F0;border-radius:10px;font-size:12.5px;font-weight:700;"></div>
    </div>

    <div style="margin-top:12px;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#64748B;">
      <span>단축키: <strong>Ctrl+K / Cmd+K</strong> (언제든 이 워크벤치 열기)</span>
      <span><a href="/privacy" style="color:#64748B;">개인정보처리방침</a> · <a href="/terms" style="color:#64748B;">이용약관</a> · <a href="/api/health" style="color:#64748B;">API 상태</a></span>
    </div>
  </div>
</div>

<script>
(function(){
  var formMode = 'app';
  if (window.location.search.indexOf('utm_source=pwa_app') !== -1 || (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches)) {
    formMode = 'app';
  }
  document.documentElement.setAttribute('data-lmx-form', formMode);

  // SA-09: Global Toast Engine
  function showToast(msg) {
    var box = document.getElementById('lmx-toast-container');
    if (!box) return;
    var el = document.createElement('div');
    el.className = 'lmx-toast-item';
    el.textContent = msg;
    box.appendChild(el);
    if (navigator.vibrate) { try { navigator.vibrate(10); } catch(e){} }
    setTimeout(function(){ if (el.parentNode) el.parentNode.removeChild(el); }, 2800);
  }
  window.__lmxShowToast = showToast;

  // SA-09: Live Online/Offline Status Indicator
  var netBadge = document.getElementById('lmx-app-net-badge');
  function syncNetStatus() {
    var online = navigator.onLine !== false;
    if (netBadge) {
      netBadge.textContent = online ? '🟢 ONLINE' : '🟠 OFFLINE (로컬캐시)';
      netBadge.className = 'lmx-net-pill' + (online ? '' : ' offline');
    }
  }
  window.addEventListener('online', function(){ syncNetStatus(); showToast('🟢 네트워크가 연결되었습니다.'); });
  window.addEventListener('offline', function(){ syncNetStatus(); showToast('🟠 오프라인 모드: 로컬 캐시 및 내장 카트리지로 작동합니다.'); });
  syncNetStatus();

  // Drawer open/close
  var drawerBackdrop = document.getElementById('lmx-reassembly-drawer-backdrop');
  function openDrawer() {
    if (drawerBackdrop) {
      drawerBackdrop.style.display = 'flex';
      renderHistoryList();
      computeDualAb();
    }
  }
  function closeDrawer() {
    if (drawerBackdrop) drawerBackdrop.style.display = 'none';
  }
  var btnClose = document.getElementById('lmx-close-reassembly-drawer');
  if (btnClose) btnClose.addEventListener('click', closeDrawer);
  if (drawerBackdrop) drawerBackdrop.addEventListener('click', function(e){ if (e.target === drawerBackdrop) closeDrawer(); });

  var btnHist1 = document.getElementById('lmx-tri-btn-history');
  var btnHist2 = document.getElementById('lmx-app-open-history');
  var btnDual = document.getElementById('lmx-tri-btn-dual');
  if (btnHist1) btnHist1.addEventListener('click', openDrawer);
  if (btnHist2) btnHist2.addEventListener('click', openDrawer);
  if (btnDual) btnDual.addEventListener('click', openDrawer);

  // SA-05: Ctrl/Cmd+K Universal Command Palette Shortcut
  window.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
      e.preventDefault();
      if (drawerBackdrop && drawerBackdrop.style.display === 'flex') closeDrawer();
      else openDrawer();
    }
  });

  // SA-13: Local History Ledger (up to 50 snapshots)
  var HIST_KEY = 'lmx_history_' + window.location.hostname;
  function loadHistory() {
    try { return JSON.parse(localStorage.getItem(HIST_KEY) || '[]'); } catch(e) { return []; }
  }
  function saveSnapshot(label) {
    var inputs = {};
    document.querySelectorAll('input[id], select[id], textarea[id]').forEach(function(el) {
      if (el.type !== 'file' && el.id.indexOf('lmx-') !== 0) {
        inputs[el.id] = el.value;
      }
    });
    var list = loadHistory();
    list.unshift({
      id: 'snap-' + Date.now(),
      at: new Date().toLocaleString('ko-KR'),
      label: label || (document.getElementById('out-main') ? document.getElementById('out-main').textContent : '작업 스냅샷'),
      inputs: inputs
    });
    if (list.length > 50) list = list.slice(0, 50);
    try { localStorage.setItem(HIST_KEY, JSON.stringify(list)); } catch(e){}
    renderHistoryList();
  }
  function renderHistoryList() {
    var wrap = document.getElementById('lmx-history-list');
    if (!wrap) return;
    var list = loadHistory();
    if (!list.length) {
      saveSnapshot('초기 기본 시나리오');
      list = loadHistory();
    }
    wrap.innerHTML = list.map(function(item, idx) {
      return '<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-bottom:1px solid #E2E8F0;">' +
        '<div><strong>#' + (idx + 1) + '</strong> ' + String(item.label || '').slice(0, 28) + ' <span style="color:#64748B;font-size:11px;">(' + item.at + ')</span></div>' +
        '<button type="button" data-snap-idx="' + idx + '" class="lmx-restore-snap-btn" style="border:1px solid #CBD5E1;background:#fff;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;">불러오기</button>' +
      '</div>';
    }).join('');
    wrap.querySelectorAll('.lmx-restore-snap-btn').forEach(function(b) {
      b.addEventListener('click', function() {
        var idx = Number(b.getAttribute('data-snap-idx'));
        var snap = loadHistory()[idx];
        if (snap && snap.inputs) {
          Object.keys(snap.inputs).forEach(function(k) {
            var el = document.getElementById(k);
            if (el) {
              el.value = snap.inputs[k];
              el.dispatchEvent(new Event('input', { bubbles: true }));
            }
          });
          showToast('✅ 스냅샷 #' + (idx + 1) + ' 상태를 복원했습니다.');
        }
      });
    });
  }
  var btnSaveSnap = document.getElementById('lmx-btn-save-snap');
  if (btnSaveSnap) btnSaveSnap.addEventListener('click', function(){ saveSnapshot(); showToast('🗂️ 현재 작업 상태가 이력 원장에 기록되었습니다.'); });

  // SA-14: Bidirectional JSON Backup & File Upload Restore
  var btnBackup = document.getElementById('lmx-btn-full-backup');
  if (btnBackup) {
    btnBackup.addEventListener('click', function() {
      saveSnapshot('백업 직전 자동 스냅샷');
      var payload = {
        service: '비주얼라이저 (Visualizer)',
        host: window.location.hostname,
        cartridgeId: 'DOM-48',
        exportedAt: new Date().toISOString(),
        history: loadHistory()
      };
      var blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json;charset=utf-8' });
      var a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = window.location.hostname + '-full-backup.json';
      a.click();
      showToast('💾 전체 작업 이력 및 설정 백업(.json) 완료!');
    });
  }
  var inpRestore = document.getElementById('lmx-inp-restore-json');
  if (inpRestore) {
    inpRestore.addEventListener('change', function(e) {
      var file = e.target.files && e.target.files[0];
      if (!file) return;
      var reader = new FileReader();
      reader.onload = function(ev) {
        try {
          var data = JSON.parse(String(ev.target.result || '{}'));
          if (Array.isArray(data.history) && data.history.length > 0) {
            localStorage.setItem(HIST_KEY, JSON.stringify(data.history));
            renderHistoryList();
            var latest = data.history[0];
            if (latest && latest.inputs) {
              Object.keys(latest.inputs).forEach(function(k) {
                var el = document.getElementById(k);
                if (el) { el.value = latest.inputs[k]; el.dispatchEvent(new Event('input', { bubbles: true })); }
              });
            }
          } else if (data.inputs) {
            Object.keys(data.inputs).forEach(function(k) {
              var el = document.getElementById(k);
              if (el) { el.value = data.inputs[k]; el.dispatchEvent(new Event('input', { bubbles: true })); }
            });
          }
          var st = document.getElementById('lmx-restore-status');
          if (st) st.textContent = '✅ 파일(' + file.name + ')에서 상태 복원 완료!';
          showToast('✅ JSON 백업 파일 복원이 완료되었습니다.');
        } catch (err) {
          showToast('⚠️ 유효한 JSON 백업 파일이 아닙니다.');
        }
      };
      reader.readAsText(file);
    });
  }

  // SA-08: Dual A/B Comparison Calculator
  function computeDualAb() {
    var a = Number((document.getElementById('lmx-dual-a') || {}).value || 100000);
    var b = Number((document.getElementById('lmx-dual-b') || {}).value || 135000);
    var r = Number((document.getElementById('lmx-dual-rate') || {}).value || 5);
    var netA = Math.round(a * (1 - r / 100));
    var netB = Math.round(b * (1 - r / 100));
    var diff = netB - netA;
    var pct = netA !== 0 ? ((diff / netA) * 100).toFixed(1) : '0.0';
    var box = document.getElementById('lmx-dual-summary');
    if (box) {
      box.innerHTML = '시나리오 A 실산출: <span style="color:#4F46E5;">' + netA.toLocaleString() + '</span> vs 시나리오 B 실산출: <span style="color:#06B6D4;">' + netB.toLocaleString() + '</span> → 편차: <strong>' + (diff >= 0 ? '+' : '') + diff.toLocaleString() + ' (' + (diff >= 0 ? '+' : '') + pct + '%)</strong>';
    }
  }
  ['lmx-dual-a', 'lmx-dual-b', 'lmx-dual-rate'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('input', computeDualAb);
  });

  if (formMode === 'dual' && !document.getElementById('ab-matrix-wrap')) {
    setTimeout(openDrawer, 250);
  }
})();
</script>