From 81509c8ba4a5be58f7ef2556065bba436e5fe53d Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Tue, 20 Jan 2026 01:15:02 +0900
Subject: [PATCH] Fix chat widget click blocking and enhance Telegram CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add pointer-events: none to chat-widget-container to prevent blocking page links
- Add pointer-events: auto to chat-toggle-btn and open state for clickability
- Resize chat widget to 420x580px
- Update chat header text to "무엇이든 물어보세요"
- Enhance Telegram section with prominent badge and blue styling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 3f34053..0878521 100644
--- a/index.html
+++ b/index.html
@@ -188,11 +188,12 @@
       flex-direction: column;
       align-items: flex-end;
       gap: 1rem;
+      pointer-events: none;
     }
 
     .chat-frame-wrapper {
-      width: 380px;
-      height: 600px;
+      width: 420px;
+      height: 580px;
       background: white;
       border: 2px solid #1e1e1e;
       border-radius: 4px;
@@ -203,10 +204,12 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      pointer-events: none;
     }
-    
+
     .chat-frame-wrapper.open {
       transform: scale(1);
+      pointer-events: auto;
     }
 
     .chat-header {
@@ -243,6 +246,7 @@
       transition: all 0.2s ease;
       font-size: 1.5rem;
       position: relative;
+      pointer-events: auto;
     }
 
     .chat-toggle-btn:hover {
@@ -330,9 +334,12 @@
       </div>
 
       <!-- Telegram Bot Highlight -->
-      <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto" style="transform: rotate(0deg);">
+      <div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/5" style="transform: rotate(0deg); border-color: #1971c2;">
+        <div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #1971c2; color: #1971c2;">
+          📢 모든 신청 및 관리는 텔레그램으로!
+        </div>
         <div class="flex flex-col md:flex-row items-center gap-6">
-          <div class="w-16 h-16 bg-sketch-blue/10 border-2 border-sketch-line rounded-full flex items-center justify-center flex-shrink-0">
+          <div class="w-16 h-16 bg-sketch-blue/20 border-2 border-sketch-blue rounded-full flex items-center justify-center flex-shrink-0">
             <!-- Telegram 아이콘 (손그림 스타일) -->
             <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/>
@@ -341,8 +348,8 @@
           <div class="text-center md:text-left flex-1">
             <h3 class="text-xl font-bold mb-2">텔레그램 하나로 모든 것을 관리하세요!</h3>
             <p class="text-sketch-line/70">
-              서비스 신청, 상태 조회, 도메인 등록, 결제까지 —<br class="hidden md:block">
-              복잡한 대시보드 없이 <span class="highlight-box font-bold">대화만으로</span> 모든 것이 가능합니다.
+              <span class="highlight-box font-bold">별도의 대시보드 없이</span> 서비스 신청, 상태 조회,<br class="hidden md:block">
+              도메인 등록, 결제까지 대화만으로 모든 것이 가능합니다.
             </p>
           </div>
           <a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-6 py-3 text-lg flex items-center gap-2 flex-shrink-0">
@@ -976,7 +983,7 @@
     <div id="chatFrame" class="chat-frame-wrapper">
       <div class="chat-header">
         <div class="flex items-center gap-2">
-          <span>💬 실시간 상담</span>
+          <span>🔨 무엇이든 물어보세요</span>
         </div>
         <button onclick="toggleChat()" class="hover:text-cream transition">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>