Fix chat widget click blocking and enhance Telegram CTA

- 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>
This commit is contained in:
kappa
2026-01-20 01:15:02 +09:00
parent fb185602c4
commit 81509c8ba4

View File

@@ -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>