Add: 플로팅 CTA 버튼 + 메인페이지 문의폼 임베드 + CTA 카카오톡 카드

- 플로팅 문의 버튼: 전 페이지 하단 좌측 고정 (카카오톡/전화/문의 3옵션)
- 메인페이지 CTA 섹션: 오시는 길 → 카카오톡 오픈채팅 카드로 교체
- 메인페이지 하단: 온라인 문의폼 직접 임베드 (contact 페이지 이동 불필요)
- FAQ 바로가기: 온라인 문의하기 버튼 추가 (#inline-contact 앵커)
- i18n 4개 언어 번역 키 추가 (floating CTA, CTA 카카오톡, 문의폼)

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

css/common.css

@@ -1248,6 +1248,161 @@ body {
     }
 }
 
+/* ========================================
+   플로팅 CTA (문의하기) 버튼
+   ======================================== */
+.floating-cta {
+    position: fixed;
+    bottom: 30px;
+    left: 30px;
+    z-index: 9001;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.cta-main-btn {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: none;
+    background: var(--gradient-main);
+    color: white;
+    font-size: 1.4rem;
+    cursor: pointer;
+    box-shadow: 0 4px 18px rgba(255, 136, 0, 0.4);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.cta-main-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 24px rgba(255, 136, 0, 0.5);
+}
+
+.cta-main-btn .cta-icon-close {
+    display: none;
+}
+
+.floating-cta.active .cta-main-btn .cta-icon-open {
+    display: none;
+}
+
+.floating-cta.active .cta-main-btn .cta-icon-close {
+    display: block;
+}
+
+.floating-cta.active .cta-main-btn {
+    background: var(--text-secondary);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+/* 옵션 메뉴 */
+.cta-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.25s ease;
+    pointer-events: none;
+}
+
+.floating-cta.active .cta-options {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.cta-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 28px;
+    text-decoration: none;
+    font-size: 0.88rem;
+    font-weight: 600;
+    white-space: nowrap;
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.2s ease;
+    color: white;
+}
+
+.cta-option:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+.cta-option i,
+.cta-option svg {
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+.cta-option svg {
+    width: 18px;
+    height: 18px;
+    fill: white;
+}
+
+/* 카카오톡 */
+.cta-kakao {
+    background: #FEE500;
+    color: #3C1E1E;
+}
+
+.cta-kakao svg {
+    fill: #3C1E1E;
+}
+
+.cta-kakao:hover {
+    background: #f5dc00;
+}
+
+/* 전화 */
+.cta-phone {
+    background: #10b981;
+}
+
+.cta-phone:hover {
+    background: #059669;
+}
+
+/* 문의 페이지 */
+.cta-contact {
+    background: var(--primary-color);
+}
+
+.cta-contact:hover {
+    background: var(--primary-hover);
+}
+
+/* 모바일 반응형 */
+@media (max-width: 768px) {
+    .floating-cta {
+        bottom: 20px;
+        left: 20px;
+    }
+
+    .cta-main-btn {
+        width: 50px;
+        height: 50px;
+        font-size: 1.2rem;
+    }
+
+    .cta-option {
+        padding: 8px 14px;
+        font-size: 0.82rem;
+    }
+}
+
 /* ========================================
    접근성
    ======================================== */
@@ -1507,6 +1662,15 @@ body {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
 }
 
+/* 다크 모드 플로팅 CTA */
+[data-theme="dark"] .cta-main-btn {
+    box-shadow: 0 4px 18px rgba(255, 136, 0, 0.3);
+}
+
+[data-theme="dark"] .cta-option {
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
+}
+
 [data-theme="dark"] .bg-light {
     background: var(--dark-bg);
 }

i18n/en.json

@@ -34,7 +34,11 @@
     "skipToContent": "Skip to content",
     "videoLoading": "Loading video...",
     "videoError": "Unable to load video",
-    "imageError": "Unable to load image"
+    "imageError": "Unable to load image",
+    "floatingCTA": "Contact Us",
+    "floatingKakao": "KakaoTalk Chat",
+    "floatingPhone": "Call Us",
+    "floatingContact": "Contact Page"
   },
   "index": {
     "meta": {
@@ -131,7 +135,8 @@
       "title": "New to Motion Capture?",
       "desc": "No worries if it's your first time. We've organized frequently asked questions from booking to filming.",
       "btnFaq": "View FAQ",
-      "btnContact": "1:1 Inquiry"
+      "btnContact": "1:1 Inquiry",
+      "btnOnline": "Online Inquiry Page"
     },
     "cta": {
       "label": "Get Started",
@@ -142,8 +147,8 @@
       "infoReservation": "Reservations",
       "infoBusiness": "Business",
       "infoDiscord": "Discord",
-      "infoDirections": "Directions",
+      "infoKakao": "KakaoTalk",
-      "infoAddress": "236 Jubuto-ro, Bupyeong-gu, Incheon Techno Valley"
+      "infoKakaoDesc": "Open Chat Consultation"
     },
     "popup": {
       "title": "Pricing Update Notice",

i18n/ja.json

@@ -34,7 +34,11 @@
     "skipToContent": "本文へスキップ",
     "videoLoading": "動画を読み込み中...",
     "videoError": "動画を読み込めません",
-    "imageError": "画像を読み込めません"
+    "imageError": "画像を読み込めません",
+    "floatingCTA": "お問い合わせ",
+    "floatingKakao": "KakaoTalkチャット",
+    "floatingPhone": "電話でお問い合わせ",
+    "floatingContact": "お問い合わせページ"
   },
   "index": {
     "meta": {
@@ -131,7 +135,8 @@
       "title": "初めてで不安ですか？",
       "desc": "モーションキャプチャーが初めてでも大丈夫です。予約から撮影までよくある質問をまとめました。",
       "btnFaq": "よくある質問を見る",
-      "btnContact": "1:1お問い合わせ"
+      "btnContact": "1:1お問い合わせ",
+      "btnOnline": "オンラインお問い合わせページ"
     },
     "cta": {
       "label": "Get Started",
@@ -142,8 +147,8 @@
       "infoReservation": "ご予約",
       "infoBusiness": "ビジネス",
       "infoDiscord": "Discord",
-      "infoDirections": "アクセス",
+      "infoKakao": "KakaoTalk",
-      "infoAddress": "仁川市富平区主夫吐路236、仁川テクノバレー"
+      "infoKakaoDesc": "オープンチャットで相談"
     },
     "popup": {
       "title": "料金プラン変更のお知らせ",

i18n/ko.json

@@ -34,7 +34,11 @@
     "skipToContent": "본문 바로가기",
     "videoLoading": "비디오 로딩 중...",
     "videoError": "비디오를 로드할 수 없습니다",
-    "imageError": "이미지를 불러올 수 없습니다"
+    "imageError": "이미지를 불러올 수 없습니다",
+    "floatingCTA": "문의하기",
+    "floatingKakao": "카카오톡 상담",
+    "floatingPhone": "전화 문의",
+    "floatingContact": "문의 페이지"
   },
   "index": {
     "meta": {
@@ -131,7 +135,8 @@
       "title": "처음이라 막막하신가요?",
       "desc": "모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.",
       "btnFaq": "자주 묻는 질문 보기",
-      "btnContact": "1:1 문의하기"
+      "btnContact": "1:1 문의하기",
+      "btnOnline": "온라인 문의하기"
     },
     "cta": {
       "label": "Get Started",
@@ -142,8 +147,8 @@
       "infoReservation": "예약 문의",
       "infoBusiness": "비즈니스",
       "infoDiscord": "Discord",
-      "infoDirections": "오시는 길",
+      "infoKakao": "카카오톡",
-      "infoAddress": "인천 부평구 주부토로 236, 인천테크노밸리"
+      "infoKakaoDesc": "오픈채팅 상담하기"
     },
     "popup": {
       "title": "요금제 변경 안내",

i18n/zh.json

@@ -34,7 +34,11 @@
     "skipToContent": "跳转到正文",
     "videoLoading": "视频加载中...",
     "videoError": "无法加载视频",
-    "imageError": "无法加载图片"
+    "imageError": "无法加载图片",
+    "floatingCTA": "咨询",
+    "floatingKakao": "KakaoTalk咨询",
+    "floatingPhone": "电话咨询",
+    "floatingContact": "咨询页面"
   },
   "index": {
     "meta": {
@@ -131,7 +135,8 @@
       "title": "第一次不知道怎么做？",
       "desc": "即使是第一次接触动作捕捉也没关系。我们整理了从预约到拍摄的常见问题。",
       "btnFaq": "查看常见问题",
-      "btnContact": "1:1 咨询"
+      "btnContact": "1:1 咨询",
+      "btnOnline": "在线咨询页面"
     },
     "cta": {
       "label": "Get Started",
@@ -142,8 +147,8 @@
       "infoReservation": "预约咨询",
       "infoBusiness": "商务合作",
       "infoDiscord": "Discord",
-      "infoDirections": "交通指南",
+      "infoKakao": "KakaoTalk",
-      "infoAddress": "仁川市富平区主夫吐路236，仁川科技谷"
+      "infoKakaoDesc": "开放聊天咨询"
     },
     "popup": {
       "title": "价格调整通知",

index.html

@@ -179,6 +179,7 @@
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="css/popup.css?v=2">
+    <link rel="stylesheet" href="css/contact.css">
     
 
     
@@ -828,12 +829,146 @@
                 </div>
                 <div class="faq-shortcut-actions">
                     <a href="/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">자주 묻는 질문 보기</a>
-                    <a href="/contact" class="btn btn-ghost btn-lg" data-i18n="index.faqShortcut.btnContact">1:1 문의하기</a>
+                    <a href="#inline-contact" class="btn btn-outline btn-lg" data-i18n="index.faqShortcut.btnOnline"><i class="fa-solid fa-paper-plane" style="margin-right:6px"></i>온라인 문의하기</a>
                 </div>
             </div>
         </div>
     </section>
 
+    <!-- 온라인 문의 폼 (메인 페이지 임베드) -->
+    <section class="section" id="inline-contact">
+        <div class="container">
+            <div class="section-header">
+                <h2 data-i18n="contact.form.title">온라인 문의</h2>
+                <p data-i18n="contact.form.desc">아래 양식을 작성하시면 빠르게 답변 드리겠습니다</p>
+            </div>
+
+            <div class="contact-form-wrapper">
+                <form id="contactForm" class="contact-form" novalidate>
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="name" data-i18n="contact.form.name">이름 <span class="required">*</span></label>
+                            <input type="text" id="name" name="name" required placeholder="홍길동" data-i18n-placeholder="contact.form.namePlaceholder">
+                        </div>
+                        <div class="form-group">
+                            <label for="email" data-i18n="contact.form.email">이메일 <span class="required">*</span></label>
+                            <input type="email" id="email" name="email" required placeholder="example@email.com">
+                        </div>
+                    </div>
+
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="phone" data-i18n="contact.form.phone">전화번호</label>
+                            <input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
+                        </div>
+                        <div class="form-group">
+                            <label for="service" data-i18n="contact.form.service">문의 유형 <span class="required">*</span></label>
+                            <select id="service" name="service" required>
+                                <option value="" data-i18n="contact.form.serviceDefault">선택해주세요</option>
+                                <option value="studio_rental" data-i18n="contact.form.serviceRental">스튜디오 대관</option>
+                                <option value="motion_recording" data-i18n="contact.form.serviceMotion">모션 녹화</option>
+                                <option value="music_video" data-i18n="contact.form.serviceMV">뮤직비디오 제작</option>
+                                <option value="partnership" data-i18n="contact.form.servicePartner">제휴/협력</option>
+                                <option value="other" data-i18n="contact.form.serviceOther">기타</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="message" data-i18n="contact.form.message">문의 내용 <span class="required">*</span></label>
+                        <textarea id="message" name="message" required rows="5" placeholder="프로젝트 내용, 희망 일정 등을 자유롭게 작성해주세요" data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
+                        <p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ 주민등록번호, 계좌번호 등 민감한 개인정보를 입력하지 마세요.</p>
+                    </div>
+
+                    <div class="checkbox-group">
+                        <label class="checkbox-label">
+                            <input type="checkbox" id="privacyConsent" name="privacyConsent" required>
+                            <span class="checkmark"></span>
+                            <span data-i18n="contact.form.privacyAgree">개인정보 수집 및 이용에 동의합니다. (필수)</span>
+                        </label>
+                        <a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">개인정보 처리방침 보기</a>
+                    </div>
+
+                    <div class="privacy-summary">
+                        <ul>
+                            <li data-i18n="contact.form.privacyPurpose">수집 목적: 문의 접수 및 답변</li>
+                            <li data-i18n="contact.form.privacyItems">수집 항목: 이름, 이메일, 전화번호, 문의 내용</li>
+                            <li data-i18n="contact.form.privacyPeriod">보유 기간: 7일 후 자동 파기</li>
+                        </ul>
+                    </div>
+
+                    <div class="form-submit">
+                        <button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">문의 보내기</button>
+                        <button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">초기화</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- 개인정보처리방침 모달 -->
+    <div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="privacyModalTitle">개인정보 수집 및 이용 동의서</h3>
+                <button class="modal-close" onclick="closePrivacyModal()" aria-label="닫기">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p>밍글 스튜디오(이하 "회사")는 「개인정보 보호법」에 따라 고객의 개인정보를 보호하고 이와 관련한 고충을 신속하게 처리하기 위하여 다음과 같이 개인정보 수집 및 이용에 대한 동의를 구합니다.</p>
+                <h4>1. 개인정보의 수집 및 이용 목적</h4>
+                <p>회사는 다음의 목적을 위하여 개인정보를 처리합니다.</p>
+                <ul><li>고객 문의 접수 및 답변 제공</li><li>서비스 상담 및 견적 안내</li><li>문의 처리 결과 통보</li></ul>
+                <h4>2. 수집하는 개인정보의 항목</h4>
+                <ul><li><strong>필수 항목:</strong> 이름, 이메일 주소, 문의 유형, 문의 내용</li><li><strong>선택 항목:</strong> 전화번호</li></ul>
+                <p style="color: #ef4444; font-size: 0.85rem;">※ 문의 내용에 주민등록번호, 계좌번호 등 민감한 개인정보가 포함되지 않도록 유의해 주시기 바랍니다.</p>
+                <h4>3. 개인정보의 보유 및 이용 기간</h4>
+                <p>수집된 개인정보는 <strong>문의 접수일로부터 7일간</strong> 보유하며, 보유 기간 경과 후 자동으로 파기됩니다.</p>
+                <h4>4. 개인정보의 파기 절차 및 방법</h4>
+                <ul><li><strong>파기 절차:</strong> 보유 기간이 경과한 개인정보는 자동 삭제 시스템에 의해 지체 없이 파기됩니다.</li><li><strong>파기 방법:</strong> 전자적 파일 형태의 정보는 복구 및 재생할 수 없도록 완전 삭제합니다.</li></ul>
+                <h4>5. 개인정보의 제3자 제공 및 국외 이전</h4>
+                <p>회사는 원칙적으로 이용자의 개인정보를 제3자에게 제공하지 않습니다. 다만, 문의 처리를 위해 다음과 같이 개인정보가 국외로 이전됩니다. (「개인정보 보호법」 제28조의8)</p>
+                <ul><li><strong>이전되는 국가 및 수신자:</strong> 미국 / Discord Inc.</li><li><strong>이전 일시 및 방법:</strong> 문의 접수 시 전용 API(인터넷 망)를 통해 실시간 전송</li><li><strong>이전 항목:</strong> 이름, 이메일, 전화번호(선택), 문의 유형, 문의 내용</li><li><strong>이전 목적:</strong> 업무용 협업 툴(Discord)을 이용한 신속한 문의 확인 및 응대</li><li><strong>보유 및 이용 기간:</strong> 전송 후 7일간 보관 후 자동 파기</li></ul>
+                <h4>6. 정보주체의 권리·의무</h4>
+                <p>이용자는 개인정보 주체로서 다음과 같은 권리를 행사할 수 있습니다.</p>
+                <ul><li>개인정보 열람 요구</li><li>오류 등이 있을 경우 정정 요구</li><li>삭제 요구</li><li>처리정지 요구</li></ul>
+                <h4>7. 개인정보의 안전성 확보 조치</h4>
+                <ul><li>전송 데이터 암호화 (HTTPS/TLS)</li><li>접근 권한 제한 (지정된 관리자만 열람 가능)</li><li>자동 삭제 시스템 운영 (7일 후 파기)</li></ul>
+                <h4>8. 동의 거부 권리 및 불이익</h4>
+                <p>이용자는 개인정보 수집 및 이용에 대한 동의를 거부할 권리가 있습니다. 다만, 필수 항목에 대한 동의를 거부하실 경우 문의 접수 서비스 이용이 제한됩니다.</p>
+                <h4>9. 개인정보 보호책임자</h4>
+                <ul><li><strong>성명:</strong> 김희진</li><li><strong>직위:</strong> 대표</li><li><strong>이메일:</strong> minglestudio@minglestudio.co.kr</li><li><strong>전화:</strong> 010-9288-9190</li></ul>
+                <h4>10. 개인정보처리방침의 변경</h4>
+                <p>이 개인정보처리방침은 2026년 3월 4일부터 적용됩니다.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+    function openPrivacyModal() {
+        var m = document.getElementById('privacyModal');
+        if (!m) return;
+        m.classList.add('active');
+        m.style.display = 'flex';
+        document.body.style.overflow = 'hidden';
+    }
+    function closePrivacyModal() {
+        var m = document.getElementById('privacyModal');
+        if (!m) return;
+        m.classList.remove('active');
+        m.style.display = '';
+        document.body.style.overflow = '';
+    }
+    document.addEventListener('DOMContentLoaded', function() {
+        var cb = document.getElementById('privacyConsent');
+        var btn = document.getElementById('submitBtn');
+        if (cb && btn) {
+            cb.addEventListener('change', function() {
+                btn.disabled = !cb.checked;
+                btn.classList.toggle('btn-submit-disabled', !cb.checked);
+            });
+        }
+    });
+    </script>
+
     <!-- CTA 섹션 -->
     <section class="cta-section">
         <div class="cta-bg"></div>
@@ -871,10 +1006,10 @@
                     </div>
                 </div>
                 <div class="info-quick-item">
-                    <span class="info-quick-icon"><i class="fa-solid fa-location-dot" aria-hidden="true"></i></span>
+                    <span class="info-quick-icon"><i class="fa-solid fa-comment" aria-hidden="true"></i></span>
                     <div>
-                        <span class="info-quick-label" data-i18n="index.cta.infoDirections">오시는 길</span>
+                        <span class="info-quick-label" data-i18n="index.cta.infoKakao">카카오톡</span>
-                        <span class="info-quick-value" data-i18n="index.cta.infoAddress">인천 부평구 주부토로 236, 인천테크노밸리</span>
+                        <a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="info-quick-value" data-i18n="index.cta.infoKakaoDesc">오픈채팅 상담하기</a>
                     </div>
                 </div>
             </div>
@@ -959,6 +1094,7 @@
     <!-- JavaScript -->
     <script src="js/i18n.js"></script>
     <script src="js/common.js"></script>
+    <script src="js/contact.js"></script>
     <script src="js/main.js"></script>
     <script src="js/popup.js"></script>
 

js/common.js

@@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', async function() {
     initLazyLoading();
     initRevealAnimations();
     createFloatingSNS();
+    createFloatingCTA();
     hidePageLoading();
     // 컴포넌트 로드 후 스크롤 위치 보정
     if (window.scrollY > 0 && !window.location.hash) {
@@ -385,6 +386,55 @@ function createFloatingSNS() {
     document.body.appendChild(snsContainer);
 }
 
+// ========================================
+// 플로팅 CTA (문의하기) 버튼
+// ========================================
+function createFloatingCTA() {
+    if (document.querySelector('.floating-cta')) return;
+    // contact 페이지에서는 표시하지 않음
+    if (window.location.pathname.includes('contact')) return;
+
+    var _t = function(key, fallback) {
+        return (window.i18n && window.i18n.t) ? window.i18n.t(key, fallback) : fallback;
+    };
+
+    var cta = document.createElement('div');
+    cta.className = 'floating-cta';
+    cta.innerHTML =
+        '<div class="cta-options">' +
+            '<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="cta-option cta-kakao" title="' + _t('common.floatingKakao', '카카오톡 상담') + '">' +
+                '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C6.477 3 2 6.463 2 10.691c0 2.724 1.8 5.113 4.508 6.457-.2.744-.723 2.694-.828 3.112-.13.517.19.51.399.371.164-.109 2.61-1.774 3.67-2.496.727.104 1.478.159 2.251.159 5.523 0 10-3.463 10-7.603C22 6.463 17.523 3 12 3z"/></svg>' +
+                '<span>' + _t('common.floatingKakao', '카카오톡 상담') + '</span>' +
+            '</a>' +
+            '<a href="tel:+82-10-9288-9190" class="cta-option cta-phone" title="' + _t('common.floatingPhone', '전화 문의') + '">' +
+                '<i class="fa-solid fa-phone"></i>' +
+                '<span>' + _t('common.floatingPhone', '전화 문의') + '</span>' +
+            '</a>' +
+            '<a href="/contact" class="cta-option cta-contact" title="' + _t('common.floatingContact', '문의 페이지') + '">' +
+                '<i class="fa-solid fa-envelope"></i>' +
+                '<span>' + _t('common.floatingContact', '문의 페이지') + '</span>' +
+            '</a>' +
+        '</div>' +
+        '<button class="cta-main-btn" aria-label="' + _t('common.floatingCTA', '문의하기') + '">' +
+            '<i class="fa-solid fa-headset cta-icon-open"></i>' +
+            '<i class="fa-solid fa-xmark cta-icon-close"></i>' +
+        '</button>';
+
+    document.body.appendChild(cta);
+
+    var mainBtn = cta.querySelector('.cta-main-btn');
+    mainBtn.addEventListener('click', function() {
+        cta.classList.toggle('active');
+    });
+
+    // 외부 클릭 시 닫기
+    document.addEventListener('click', function(e) {
+        if (!cta.contains(e.target)) {
+            cta.classList.remove('active');
+        }
+    });
+}
+
 // ========================================
 // 다크모드 토글
 // ========================================