Update index.html

index.html

@@ -6,244 +6,294 @@
 <title>MarketGo — 가상 쇼핑몰</title>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
 <style>
-  :root {
-    --bg: #f5f4f0;
-    --surface: #ffffff;
-    --text: #111;
-    --sub: #888;
-    --accent: #e63946;
-    --border: rgba(0,0,0,.08);
-  }
+  :root{--bg:#f5f4f0;--surface:#fff;--text:#111;--sub:#888;--accent:#e63946;--border:rgba(0,0,0,.08);}
   *{margin:0;padding:0;box-sizing:border-box;}
   body{font-family:'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);}
-
-  /* GNB */
   nav{background:#111;color:#fff;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100;}
-  .nav-logo{font-size:20px;font-weight:900;letter-spacing:-1px;}
-  .nav-logo span{color:var(--accent);}
+  .nav-logo{font-size:20px;font-weight:900;letter-spacing:-1px;}.nav-logo span{color:var(--accent);}
   .nav-links{display:flex;gap:24px;font-size:13px;font-weight:500;}
-  .nav-links a{color:rgba(255,255,255,.7);text-decoration:none;transition:.15s;}
-  .nav-links a:hover{color:#fff;}
-  .nav-right{display:flex;gap:12px;align-items:center;}
-  .nav-right button{border:none;background:none;color:rgba(255,255,255,.7);font-size:20px;cursor:pointer;}
-
-  /* 히어로 배너 */
-  .hero{background:linear-gradient(135deg,#111 60%,#1a1a2e);color:#fff;padding:60px 40px;display:flex;align-items:center;gap:40px;overflow:hidden;position:relative;}
-  .hero::after{content:'';position:absolute;right:-80px;top:-80px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(230,57,70,.2),transparent 70%);}
+  .nav-links a{color:rgba(255,255,255,.7);text-decoration:none;}.nav-links a:hover{color:#fff;}
+  .nav-right{display:flex;gap:12px;}.nav-right button{border:none;background:none;color:rgba(255,255,255,.7);font-size:20px;cursor:pointer;}
+  .hero{background:linear-gradient(135deg,#111 60%,#1a1a2e);color:#fff;padding:60px 40px;display:flex;align-items:center;gap:40px;}
   .hero-text h1{font-size:42px;font-weight:900;line-height:1.15;letter-spacing:-1.5px;}
   .hero-text h1 em{color:var(--accent);font-style:normal;}
   .hero-text p{margin-top:12px;font-size:14px;color:rgba(255,255,255,.55);line-height:1.8;}
-  .hero-btn{margin-top:24px;display:inline-block;padding:13px 28px;background:var(--accent);color:#fff;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;transition:.15s;}
-  .hero-btn:hover{background:#c1121f;}
+  .hero-btn{margin-top:24px;display:inline-block;padding:13px 28px;background:var(--accent);color:#fff;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;}
   .hero-badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px 28px;min-width:220px;text-align:center;}
   .hero-badge .num{font-size:48px;font-weight:900;color:var(--accent);}
   .hero-badge .lbl{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;}
-
-  /* 카테고리 탭 */
-  .cats{background:#fff;border-bottom:1px solid var(--border);padding:0 40px;display:flex;gap:0;overflow-x:auto;}
-  .cats a{padding:14px 20px;font-size:13px;font-weight:500;color:var(--sub);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:.15s;}
+  .cats{background:#fff;border-bottom:1px solid var(--border);padding:0 40px;display:flex;overflow-x:auto;}
+  .cats a{padding:14px 20px;font-size:13px;font-weight:500;color:var(--sub);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;}
   .cats a.active,.cats a:hover{color:var(--accent);border-bottom-color:var(--accent);}
-
-  /* 섹션 */
   .section{padding:36px 40px;}
   .sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
-  .sec-hd h2{font-size:18px;font-weight:800;}
-  .sec-hd a{font-size:12px;color:var(--sub);text-decoration:none;}
-
-  /* 상품 그리드 */
+  .sec-hd h2{font-size:18px;font-weight:800;}.sec-hd a{font-size:12px;color:var(--sub);text-decoration:none;}
   .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
   .card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:.2s;cursor:pointer;}
   .card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);}
-  .card-img{width:100%;aspect-ratio:1;object-fit:cover;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:48px;}
+  .card-img{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:48px;background:#f0f0f0;}
   .card-body{padding:12px;}
   .card-badge{display:inline-block;padding:2px 7px;background:rgba(230,57,70,.1);color:var(--accent);border-radius:4px;font-size:10px;font-weight:700;margin-bottom:6px;}
   .card-name{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:4px;}
   .card-sub{font-size:11px;color:var(--sub);margin-bottom:8px;}
-  .card-price{font-size:16px;font-weight:900;color:#111;}
-  .card-price s{font-size:12px;color:var(--sub);font-weight:400;margin-right:4px;}
-  .card-price em{font-size:12px;color:var(--accent);font-style:normal;margin-left:4px;}
-
-  /* 배너 */
+  .card-price{font-size:16px;font-weight:900;}.card-price s{font-size:12px;color:var(--sub);font-weight:400;margin-right:4px;}.card-price em{font-size:12px;color:var(--accent);font-style:normal;margin-left:4px;}
   .banner-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 40px 36px;}
   .banner{border-radius:14px;padding:28px;color:#fff;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;}
-  .banner-a{background:linear-gradient(135deg,#0f3460,#16213e);}
-  .banner-b{background:linear-gradient(135deg,#1b4332,#2d6a4f);}
-  .banner h3{font-size:16px;font-weight:800;}
-  .banner p{font-size:11px;opacity:.7;margin-top:4px;}
+  .banner-a{background:linear-gradient(135deg,#0f3460,#16213e);}.banner-b{background:linear-gradient(135deg,#1b4332,#2d6a4f);}
+  .banner h3{font-size:16px;font-weight:800;}.banner p{font-size:11px;opacity:.7;margin-top:4px;}
   .banner-ic{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:56px;opacity:.3;}
-
-  /* 푸터 */
   footer{background:#111;color:rgba(255,255,255,.4);text-align:center;padding:24px;font-size:12px;}
 
-  /* 삽입 안내 오버레이 */
-  .insert-notice{position:fixed;top:68px;right:20px;background:#fff;border:2px solid var(--accent);border-radius:12px;padding:14px 18px;font-size:11px;line-height:1.7;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:999;max-width:280px;}
-  .insert-notice strong{display:block;font-size:13px;font-weight:800;color:var(--accent);margin-bottom:6px;}
-  .insert-notice code{display:block;background:#f5f4f0;border-radius:6px;padding:8px 10px;font-size:10px;color:#333;margin-top:8px;word-break:break-all;}
-  .insert-notice .close-btn{position:absolute;top:8px;right:10px;border:none;background:none;font-size:16px;cursor:pointer;color:#aaa;}
+  /* SiteAgent 패널 */
+  #sa-fab{position:fixed;bottom:32px;right:32px;z-index:99999;width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,#5856D6,#007AFF);box-shadow:0 8px 32px rgba(88,86,214,.5);border:none;cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;transition:.2s;}
+  #sa-fab:hover{transform:scale(1.1);}
+  #sa-panel{position:fixed;bottom:110px;right:24px;z-index:99999;width:340px;max-height:78vh;background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.2);display:none;flex-direction:column;overflow:hidden;}
+  #sa-panel.open{display:flex;}
+  .sa-hdr{padding:14px 16px;background:linear-gradient(135deg,#5856D6,#007AFF);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
+  .sa-hdr span{font-size:14px;font-weight:800;}
+  .sa-close{border:none;background:none;color:rgba(255,255,255,.8);font-size:22px;cursor:pointer;line-height:1;padding:0;}
+  .sa-tabs{display:flex;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0;background:#fff;}
+  .sa-tab{flex:1;padding:10px 0;font-size:10px;font-weight:600;color:#8e8e93;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;}
+  .sa-tab.active{color:#5856D6;border-bottom-color:#5856D6;}
+  .sa-body{padding:14px;overflow-y:auto;flex:1;}
+  .sa-sel{width:100%;padding:7px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:11px;margin-bottom:8px;font-family:inherit;background:#fff;}
+  .sa-inp{width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:11px;font-family:inherit;margin-bottom:8px;}
+  .sa-ta{width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:11px;font-family:inherit;resize:none;margin-bottom:8px;}
+  .sa-btn{width:100%;padding:11px;border:none;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;color:#fff;margin-bottom:8px;}
+  .sa-result{border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px;font-size:11px;line-height:1.7;white-space:pre-wrap;color:#111;background:#fafafa;margin-bottom:8px;}
+  .sa-copy{padding:6px 14px;border:1px solid rgba(88,86,214,.3);border-radius:8px;font-size:10px;font-weight:700;color:#5856D6;background:rgba(88,86,214,.05);cursor:pointer;}
+  .sa-spin{text-align:center;padding:20px;}
+  .sa-dot{display:inline-flex;gap:4px;}
+  .sa-dot i{width:7px;height:7px;border-radius:50%;background:#5856D6;display:inline-block;animation:sd .8s ease-in-out infinite;}
+  .sa-dot i:nth-child(2){animation-delay:.15s;}.sa-dot i:nth-child(3){animation-delay:.3s;}
+  @keyframes sd{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
+  .sa-store{background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:10px;margin-bottom:8px;}
+  .sa-store-lbl{font-size:9px;font-weight:700;color:#92400e;margin-bottom:6px;}
+  .sa-shop-item{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05);}
+  .sa-shop-img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#eee;}
+  .sa-shop-info{flex:1;min-width:0;}
+  .sa-shop-name{font-size:11px;font-weight:600;line-height:1.3;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .sa-shop-price{font-size:12px;font-weight:800;color:#e63946;}
+  .sa-shop-mall{font-size:10px;color:#888;}
+  .sa-shop-link{flex-shrink:0;padding:5px 8px;background:#5856D6;color:#fff;border-radius:6px;font-size:9px;font-weight:700;text-decoration:none;align-self:flex-start;margin-top:4px;}
+  .sa-notice{position:fixed;top:68px;right:16px;background:#fff;border:2px solid #e63946;border-radius:12px;padding:14px 36px 14px 16px;font-size:11px;line-height:1.7;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:99998;max-width:280px;}
+  .sa-notice strong{display:block;font-size:13px;font-weight:800;color:#e63946;margin-bottom:6px;}
+  .sa-notice code{display:block;background:#f5f4f0;border-radius:6px;padding:8px;font-size:10px;color:#333;margin-top:8px;word-break:break-all;}
+  .sa-nclose{position:absolute;top:8px;right:10px;border:none;background:none;font-size:16px;cursor:pointer;color:#aaa;}
 </style>
 </head>
 <body>
 
-<!-- GNB -->
 <nav>
   <div class="nav-logo">Market<span>Go</span></div>
-  <div class="nav-links">
-    <a href="#">홈</a><a href="#">베스트</a><a href="#">신상품</a><a href="#">특가</a><a href="#">브랜드</a>
-  </div>
-  <div class="nav-right">
-    <button>🔍</button>
-    <button>🛒</button>
-    <button>👤</button>
-  </div>
+  <div class="nav-links"><a href="#">홈</a><a href="#">베스트</a><a href="#">신상품</a><a href="#">특가</a></div>
+  <div class="nav-right"><button>🔍</button><button>🛒</button><button>👤</button></div>
 </nav>
 
-<!-- 삽입 안내 -->
-<div class="insert-notice" id="notice">
-  <button class="close-btn" onclick="this.parentElement.remove()">×</button>
+<div class="sa-notice" id="sa-notice">
+  <button class="sa-nclose" onclick="document.getElementById('sa-notice').remove()">×</button>
   <strong>🔌 SiteAgent 한 줄 삽입 데모</strong>
-  이 가상 쇼핑몰은 아래 스크립트 <b>단 한 줄</b>로 SiteAgent가 작동합니다.<br>
+  이 쇼핑몰은 스크립트 <b>단 한 줄</b>로<br>SiteAgent AI가 작동합니다.<br>
   우측 하단 🤖 버튼을 클릭하세요.
-  <code>&lt;script src="https://ginigen-ai-siteagent.hf.space/secure-pageagent.extend.js"&gt;&lt;/script&gt;</code>
+  <code>&lt;script src="https://ginigen-ai-siteagent.hf.space/sa-widget.js"&gt;&lt;/script&gt;</code>
 </div>
 
-<!-- 히어로 -->
 <div class="hero">
   <div class="hero-text">
     <h1>오늘의 <em>특가</em><br>놓치지 마세요</h1>
     <p>매일 오전 10시, 초특가 상품을 한정 수량 공개합니다.<br>AI가 최저가를 실시간으로 분석해 드립니다.</p>
     <a href="#" class="hero-btn">특가 보러가기 →</a>
   </div>
-  <div class="hero-badge">
-    <div class="num">73%</div>
-    <div class="lbl">오늘의 최대 할인율</div>
-  </div>
+  <div class="hero-badge"><div class="num">73%</div><div class="lbl">오늘의 최대 할인율</div></div>
 </div>
 
-<!-- 카테고리 -->
 <div class="cats">
-  <a href="#" class="active">전체</a>
-  <a href="#">가전·디지털</a>
-  <a href="#">패션·의류</a>
-  <a href="#">식품·건강</a>
-  <a href="#">뷰티·생활</a>
-  <a href="#">스포츠·레저</a>
-  <a href="#">유아·완구</a>
-  <a href="#">도서·문구</a>
+  <a href="#" class="active">전체</a><a href="#">가전·디지털</a><a href="#">패션·의류</a><a href="#">식품·건강</a><a href="#">뷰티·생활</a><a href="#">스포츠·레저</a>
 </div>
 
-<!-- 추천 상품 -->
 <div class="section">
-  <div class="sec-hd">
-    <h2>🔥 오늘의 인기상품</h2>
-    <a href="#">더보기 →</a>
-  </div>
+  <div class="sec-hd"><h2>🔥 오늘의 인기상품</h2><a href="#">더보기 →</a></div>
   <div class="products">
-    <div class="card">
-      <div class="card-img">💻</div>
-      <div class="card-body">
-        <div class="card-badge">특가</div>
-        <div class="card-name">삼성 갤럭시북4 Pro 노트북</div>
-        <div class="card-sub">16인치 · 32GB · 1TB</div>
-        <div class="card-price"><s>2,890,000원</s>1,990,000원<em>31%↓</em></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-img">📱</div>
-      <div class="card-body">
-        <div class="card-badge">인기</div>
-        <div class="card-name">아이폰 16 Pro 256GB</div>
-        <div class="card-sub">자연티타늄 · 자급제</div>
-        <div class="card-price"><s>1,750,000원</s>1,490,000원<em>15%↓</em></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-img">🎧</div>
-      <div class="card-body">
-        <div class="card-badge">특가</div>
-        <div class="card-name">소니 WH-1000XM6</div>
-        <div class="card-sub">노이즈캔슬링 · 무선</div>
-        <div class="card-price"><s>459,000원</s>289,000원<em>37%↓</em></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-img">⌚</div>
-      <div class="card-body">
-        <div class="card-badge">신상</div>
-        <div class="card-name">갤럭시 워치7 울트라</div>
-        <div class="card-sub">47mm · 티타늄</div>
-        <div class="card-price"><s>799,000원</s>629,000원<em>21%↓</em></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-img">🖥️</div>
-      <div class="card-body">
-        <div class="card-badge">특가</div>
-        <div class="card-name">LG 울트라파인 OLED 27인치</div>
-        <div class="card-sub">4K · 120Hz · USB-C</div>
-        <div class="card-price"><s>1,290,000원</s>890,000원<em>31%↓</em></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-img">🎮</div>
-      <div class="card-body">
-        <div class="card-badge">한정</div>
-        <div class="card-name">PS5 슬림 디스크 에디션</div>
-        <div class="card-sub">+듀얼센스 컨트롤러</div>
-        <div class="card-price"><s>729,000원</s>589,000원<em>19%↓</em></div>
-      </div>
-    </div>
+    <div class="card"><div class="card-img">💻</div><div class="card-body"><div class="card-badge">특가</div><div class="card-name">삼성 갤럭시북4 Pro</div><div class="card-sub">16인치 · 32GB</div><div class="card-price"><s>2,890,000원</s>1,990,000원<em>31%↓</em></div></div></div>
+    <div class="card"><div class="card-img">📱</div><div class="card-body"><div class="card-badge">인기</div><div class="card-name">아이폰 16 Pro 256GB</div><div class="card-sub">자연티타늄 · 자급제</div><div class="card-price"><s>1,750,000원</s>1,490,000원<em>15%↓</em></div></div></div>
+    <div class="card"><div class="card-img">🎧</div><div class="card-body"><div class="card-badge">특가</div><div class="card-name">소니 WH-1000XM6</div><div class="card-sub">노이즈캔슬링 · 무선</div><div class="card-price"><s>459,000원</s>289,000원<em>37%↓</em></div></div></div>
+    <div class="card"><div class="card-img">⌚</div><div class="card-body"><div class="card-badge">신상</div><div class="card-name">갤럭시 워치7 울트라</div><div class="card-sub">47mm · 티타늄</div><div class="card-price"><s>799,000원</s>629,000원<em>21%↓</em></div></div></div>
+    <div class="card"><div class="card-img">🖥️</div><div class="card-body"><div class="card-badge">특가</div><div class="card-name">LG 울트라파인 OLED 27인치</div><div class="card-sub">4K · 120Hz</div><div class="card-price"><s>1,290,000원</s>890,000원<em>31%↓</em></div></div></div>
+    <div class="card"><div class="card-img">🎮</div><div class="card-body"><div class="card-badge">한정</div><div class="card-name">PS5 슬림 디스크 에디션</div><div class="card-sub">+듀얼센스 컨트롤러</div><div class="card-price"><s>729,000원</s>589,000원<em>19%↓</em></div></div></div>
   </div>
 </div>
 
-<!-- 배너 -->
 <div class="banner-row">
-  <div class="banner banner-a">
-    <div class="banner-ic">🚀</div>
-    <h3>로켓배송 오늘 주문 → 내일 도착</h3>
-    <p>오후 3시 이전 주문 시 익일 배송 보장</p>
+  <div class="banner banner-a"><div class="banner-ic">🚀</div><h3>로켓배송 오늘 주문 → 내일 도착</h3><p>오후 3시 이전 주문 시 익일 배송 보장</p></div>
+  <div class="banner banner-b"><div class="banner-ic">🌿</div><h3>친환경 패키징 전환 완료</h3><p>100% 재활용 가능한 포장재 사용</p></div>
+</div>
+
+<footer>© 2026 MarketGo (가상 데모 사이트) · SiteAgent 한 줄 삽입 데모용</footer>
+
+<!-- SiteAgent FAB -->
+<button id="sa-fab" onclick="saToggle()">🤖</button>
+
+<!-- SiteAgent 패널 -->
+<div id="sa-panel">
+  <div class="sa-hdr">
+    <span>🤖 SiteAgent AI</span>
+    <button class="sa-close" onclick="saToggle()">×</button>
   </div>
-  <div class="banner banner-b">
-    <div class="banner-ic">🌿</div>
-    <h3>친환경 패키징 전환 완료</h3>
-    <p>100% 재활용 가능한 포장재 사용</p>
+  <div class="sa-tabs">
+    <button class="sa-tab active" onclick="saTab(0,this)">✍️ 글쓰기</button>
+    <button class="sa-tab" onclick="saTab(1,this)">⭐ 리뷰 답변</button>
+    <button class="sa-tab" onclick="saTab(2,this)">🛒 쇼핑</button>
   </div>
-</div>
 
+  <!-- 글쓰기 -->
+  <div class="sa-body" id="sa-t0">
+    <select class="sa-sel" id="wr-style">
+      <option value="블로그">📝 블로그</option>
+      <option value="SNS">📱 SNS</option>
+      <option value="보도자료">📰 보도자료</option>
+      <option value="광고카피">📢 광고카피</option>
+      <option value="유튜브대본">🎬 유튜브대본</option>
+    </select>
+    <select class="sa-sel" id="wr-tone">
+      <option value="전문적">🎩 전문적</option>
+      <option value="친근한">😊 친근한</option>
+      <option value="유머러스">😄 유머러스</option>
+    </select>
+    <input class="sa-inp" id="wr-topic" placeholder="✏️ 주제 (예: AI가 바꿀 미래 교육)">
+    <button class="sa-btn" style="background:linear-gradient(135deg,#5856D6,#0d9488);" onclick="doWrite()">✍️ 글 생성하기</button>
+    <div id="wr-spin" class="sa-spin" style="display:none"><div class="sa-dot"><i></i><i></i><i></i></div><div style="font-size:10px;color:#5856D6;margin-top:6px;">작성 중...</div></div>
+    <div id="wr-result" class="sa-result" style="display:none"></div>
+    <button id="wr-copy" class="sa-copy" style="display:none" onclick="saCopy('wr-result','wr-copy')">📋 복사</button>
+  </div>
 
-<footer>
-  © 2026 MarketGo (가상 데모 사이트) · SiteAgent 한 줄 삽입 데모용
-</footer>
-
-<!-- ★ SiteAgent 삽입 (단 한 줄) ★ -->
-
-<div id="sa-launcher" style="position:fixed;bottom:32px;right:32px;z-index:2147483647;">
-  <button id="sa-open-btn"
-    style="width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
-    background:linear-gradient(145deg,#5856D6,#007AFF);
-    box-shadow:0 8px 32px rgba(88,86,214,.5);
-    display:flex;align-items:center;justify-content:center;
-    font-size:28px;">
-    🤖
-  </button>
-  <div style="position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
-    font-size:9px;color:#5856D6;font-weight:700;white-space:nowrap;font-family:sans-serif;">
-    AI 열기
+  <!-- 리뷰 답변 -->
+  <div class="sa-body" id="sa-t1" style="display:none">
+    <div class="sa-store">
+      <div class="sa-store-lbl">🏪 가게 정보 (자동 저장)</div>
+      <input class="sa-inp" id="rv-name" placeholder="가게명" style="margin-bottom:4px">
+      <input class="sa-inp" id="rv-type" placeholder="업종 (예: 한식, 치킨)" style="margin-bottom:4px">
+      <input class="sa-inp" id="rv-menu" placeholder="대표 메뉴" style="margin-bottom:4px">
+      <input class="sa-inp" id="rv-str" placeholder="강점" style="margin-bottom:0">
+    </div>
+    <textarea class="sa-ta" id="rv-text" rows="4" placeholder="고객 리뷰를 붙여넣으세요..."></textarea>
+    <button class="sa-btn" style="background:linear-gradient(135deg,#f59e0b,#ef4444);" onclick="doReview()">⭐ 답변 생성하기</button>
+    <div id="rv-spin" class="sa-spin" style="display:none"><div class="sa-dot"><i></i><i></i><i></i></div><div style="font-size:10px;color:#f59e0b;margin-top:6px;">분석 중...</div></div>
+    <div id="rv-result" class="sa-result" style="display:none"></div>
+    <button id="rv-copy" class="sa-copy" style="display:none" onclick="saCopy('rv-result','rv-copy')">📋 복사</button>
+  </div>
+
+  <!-- 쇼핑 -->
+  <div class="sa-body" id="sa-t2" style="display:none">
+    <input class="sa-inp" id="sh-q" placeholder="🛒 검색어 (예: 아이패드 프로)">
+    <button class="sa-btn" style="background:linear-gradient(135deg,#f59e0b,#f97316);" onclick="doShop()">🔍 검색하기</button>
+    <div id="sh-spin" class="sa-spin" style="display:none"><div class="sa-dot"><i></i><i></i><i></i></div><div style="font-size:10px;color:#f59e0b;margin-top:6px;">검색 중...</div></div>
+    <div id="sh-result"></div>
   </div>
 </div>
+
 <script>
-var _saLoaded = false;
-document.getElementById('sa-open-btn').addEventListener('click', function(){
-  if(_saLoaded){
-    if(window.__sa_panel_open) window.__sa_panel_open();
-    return;
+var SA = 'https://ginigen-ai-siteagent.hf.space';
+
+function saToggle(){
+  var p = document.getElementById('sa-panel');
+  var open = p.classList.toggle('open');
+  if(open){
+    try{
+      var s = JSON.parse(localStorage.getItem('__sa_rv_store')||'{}');
+      if(s.store_name) document.getElementById('rv-name').value = s.store_name;
+      if(s.store_type) document.getElementById('rv-type').value = s.store_type;
+      if(s.menu)       document.getElementById('rv-menu').value = s.menu;
+      if(s.strengths)  document.getElementById('rv-str').value  = s.strengths;
+    }catch(e){}
+  }
+}
+
+function saTab(n, el){
+  for(var i=0;i<3;i++){
+    document.getElementById('sa-t'+i).style.display = i===n?'block':'none';
   }
-  _saLoaded = true;
-  // 버튼 클릭 시점에 스크립트 동적 로드
-  // 스크립트 끝에 openP()가 있어서 로드 완료 시 자동으로 패널이 열림
-  var s = document.createElement('script');
-  s.src = 'https://ginigen-ai-siteagent.hf.space/secure-pageagent.extend.js?t=' + Date.now();
-  document.body.appendChild(s);
-});
+  document.querySelectorAll('.sa-tab').forEach(function(t,i){
+    t.classList.toggle('active', i===n);
+  });
+}
+
+function saCopy(rid, bid){
+  var txt = document.getElementById(rid).textContent;
+  navigator.clipboard.writeText(txt).then(function(){
+    var b = document.getElementById(bid);
+    b.textContent = '✅ 복사됨';
+    setTimeout(function(){ b.textContent = '📋 복사'; }, 1500);
+  });
+}
+
+function doWrite(){
+  var topic = document.getElementById('wr-topic').value.trim();
+  if(!topic){ alert('주제를 입력하세요'); return; }
+  var style = document.getElementById('wr-style').value;
+  var tone  = document.getElementById('wr-tone').value;
+  document.getElementById('wr-spin').style.display='block';
+  document.getElementById('wr-result').style.display='none';
+  document.getElementById('wr-copy').style.display='none';
+  fetch(SA+'/api/writer',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({style:style,tone:tone,topic:topic,context:''}),mode:'cors'
+  }).then(function(r){return r.json();}).then(function(d){
+    document.getElementById('wr-spin').style.display='none';
+    if(!d.ok){alert(d.error||'오류');return;}
+    document.getElementById('wr-result').textContent=d.content;
+    document.getElementById('wr-result').style.display='block';
+    document.getElementById('wr-copy').style.display='inline-block';
+  }).catch(function(e){document.getElementById('wr-spin').style.display='none';alert('오류: '+e.message);});
+}
+
+function doReview(){
+  var txt = document.getElementById('rv-text').value.trim();
+  if(!txt){alert('리뷰 내용을 입력하세요');return;}
+  var sd={store_name:document.getElementById('rv-name').value.trim(),
+    store_type:document.getElementById('rv-type').value.trim(),
+    menu:document.getElementById('rv-menu').value.trim(),
+    strengths:document.getElementById('rv-str').value.trim()};
+  try{localStorage.setItem('__sa_rv_store',JSON.stringify(sd));}catch(e){}
+  document.getElementById('rv-spin').style.display='block';
+  document.getElementById('rv-result').style.display='none';
+  document.getElementById('rv-copy').style.display='none';
+  fetch(SA+'/api/review',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({review_text:txt,store_name:sd.store_name,store_type:sd.store_type,
+      menu:sd.menu,strengths:sd.strengths,reply_style:'공손하고 따뜻하게'}),mode:'cors'
+  }).then(function(r){return r.json();}).then(function(d){
+    document.getElementById('rv-spin').style.display='none';
+    if(!d.ok){alert(d.error||'오류');return;}
+    document.getElementById('rv-result').textContent=d.reply;
+    document.getElementById('rv-result').style.display='block';
+    document.getElementById('rv-copy').style.display='inline-block';
+  }).catch(function(e){document.getElementById('rv-spin').style.display='none';alert('오류: '+e.message);});
+}
+
+function doShop(){
+  var q = document.getElementById('sh-q').value.trim();
+  if(!q){alert('검색어를 입력하세요');return;}
+  document.getElementById('sh-spin').style.display='block';
+  document.getElementById('sh-result').innerHTML='';
+  fetch(SA+'/api/shopping',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({query:q,sort:'sim'}),mode:'cors'
+  }).then(function(r){return r.json();}).then(function(d){
+    document.getElementById('sh-spin').style.display='none';
+    if(!d.ok){document.getElementById('sh-result').innerHTML='<p style="color:#e11d48;font-size:11px;">'+d.error+'</p>';return;}
+    var html='';
+    (d.items||[]).slice(0,6).forEach(function(it){
+      html+='<div class="sa-shop-item">'
+        +'<img class="sa-shop-img" src="'+it.image+'" onerror="this.style.background=\'#eee\';this.src=\'\'">'
+        +'<div class="sa-shop-info">'
+        +'<div class="sa-shop-name">'+it.title+'</div>'
+        +'<div class="sa-shop-price">'+it.price.toLocaleString()+'원</div>'
+        +'<div class="sa-shop-mall">'+it.mall+'</div>'
+        +'</div>'
+        +'<a class="sa-shop-link" href="'+it.link+'" target="_blank">구매</a>'
+        +'</div>';
+    });
+    document.getElementById('sh-result').innerHTML=html||'<p style="font-size:11px;color:#888;padding:10px 0;">결과 없음</p>';
+  }).catch(function(e){document.getElementById('sh-spin').style.display='none';alert('오류: '+e.message);});
+}
 </script>
+
 </body>
 </html>