From 414a91ef640ddb0a6893a2324134da1389971439 Mon Sep 17 00:00:00 2001
From: "68893236+KINDNICK@users.noreply.github.com"
 <68893236+KINDNICK@users.noreply.github.com>
Date: Thu, 5 Mar 2026 01:21:57 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EC=98=81/=EC=9D=BC/=EC=A4=91=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EB=8F=84?=
 =?UTF-8?q?=20=EB=AC=B8=EC=9D=98=ED=8F=BC=20=EC=9E=84=EB=B2=A0=EB=93=9C=20?=
 =?UTF-8?q?+=20CTA=20=EC=B9=B4=EC=B9=B4=EC=98=A4=ED=86=A1=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- en/ja/zh index.html에 contact.css, contact.js 추가
- 온라인 문의폼 + 개인정보 모달 임베드
- FAQ 바로가기에 온라인 문의하기 버튼 추가
- CTA 섹션 오시는 길 → 카카오톡 오픈채팅 카드로 교체

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 en/index.html | 137 ++++++++++++++++++++++++++++++++++++++++++++++++--
 ja/index.html | 137 ++++++++++++++++++++++++++++++++++++++++++++++++--
 zh/index.html | 137 ++++++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 399 insertions(+), 12 deletions(-)

diff --git a/en/index.html b/en/index.html
index 1f65e38..26d389c 100644
--- a/en/index.html
+++ b/en/index.html
@@ -178,6 +178,7 @@
     <!-- CSS -->
     <link rel="stylesheet" href="/css/common.css">
     <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/contact.css">
     <link rel="stylesheet" href="/css/popup.css?v=2">
     
 
@@ -829,12 +830,139 @@
                 </div>
                 <div class="faq-shortcut-actions">
                     <a href="/en/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">View FAQ</a>
-                    <a href="/en/contact" class="btn btn-ghost btn-lg" data-i18n="index.faqShortcut.btnContact">1:1 Inquiry</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>Online Inquiry</a>
                 </div>
             </div>
         </div>
     </section>
 
+    <!-- 온라인 문의 폼 (메인 페이지 임베드) -->
+    <section class="section" id="inline-contact">
+        <div class="container">
+            <div class="section-header">
+                <h2 data-i18n="contact.form.title">Online Inquiry</h2>
+                <p data-i18n="contact.form.desc">Fill out the form below and we'll get back to you promptly</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">Name <span class="required">*</span></label>
+                            <input type="text" id="name" name="name" required placeholder="John Doe" data-i18n-placeholder="contact.form.namePlaceholder">
+                        </div>
+                        <div class="form-group">
+                            <label for="email" data-i18n="contact.form.email">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">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">Inquiry Type <span class="required">*</span></label>
+                            <select id="service" name="service" required>
+                                <option value="" data-i18n="contact.form.serviceDefault">Please select</option>
+                                <option value="studio_rental" data-i18n="contact.form.serviceRental">Studio Rental</option>
+                                <option value="motion_recording" data-i18n="contact.form.serviceMotion">Motion Recording</option>
+                                <option value="music_video" data-i18n="contact.form.serviceMV">Music Video Production</option>
+                                <option value="partnership" data-i18n="contact.form.servicePartner">Partnership</option>
+                                <option value="other" data-i18n="contact.form.serviceOther">Other</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="message" data-i18n="contact.form.message">Message <span class="required">*</span></label>
+                        <textarea id="message" name="message" required rows="5" placeholder="Please describe your project, preferred schedule, etc." data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
+                        <p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ Please do not enter sensitive personal information such as ID numbers or bank account numbers.</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">I agree to the collection and use of personal information. (Required)</span>
+                        </label>
+                        <a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">View Privacy Policy</a>
+                    </div>
+
+                    <div class="privacy-summary">
+                        <ul>
+                            <li data-i18n="contact.form.privacyPurpose">Purpose: Inquiry reception and response</li>
+                            <li data-i18n="contact.form.privacyItems">Items: Name, email, phone number, inquiry details</li>
+                            <li data-i18n="contact.form.privacyPeriod">Retention: Auto-deleted after 7 days</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">Send Inquiry</button>
+                        <button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">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">Consent for Collection and Use of Personal Information</h3>
+                <button class="modal-close" onclick="closePrivacyModal()" aria-label="Close">&times;</button>
+            </div>
+            <div class="modal-body">
+                <p>Mingle Studio ("Company") seeks your consent for the collection and use of personal information in accordance with the Personal Information Protection Act.</p>
+                <h4>1. Purpose of Collection and Use</h4>
+                <ul><li>Receiving and responding to customer inquiries</li><li>Service consultation and quotation</li><li>Notification of inquiry processing results</li></ul>
+                <h4>2. Items Collected</h4>
+                <ul><li><strong>Required:</strong> Name, email, inquiry type, message</li><li><strong>Optional:</strong> Phone number</li></ul>
+                <h4>3. Retention Period</h4>
+                <p>Collected personal information is retained for <strong>7 days from the date of inquiry</strong> and automatically deleted thereafter.</p>
+                <h4>4. Destruction Procedure</h4>
+                <ul><li>Personal information past the retention period is promptly destroyed by the automatic deletion system.</li><li>Electronic files are completely deleted so they cannot be recovered.</li></ul>
+                <h4>5. Third-Party Provision and Overseas Transfer</h4>
+                <p>The Company does not provide personal information to third parties in principle. However, for inquiry processing, information may be transferred overseas as follows:</p>
+                <ul><li><strong>Country/Recipient:</strong> USA / Discord Inc.</li><li><strong>Method:</strong> Real-time transmission via dedicated API</li><li><strong>Items:</strong> Name, email, phone (optional), inquiry type, message</li><li><strong>Purpose:</strong> Prompt inquiry handling via Discord</li><li><strong>Retention:</strong> 7 days after transmission, then auto-deleted</li></ul>
+                <h4>6. Rights of Data Subjects</h4>
+                <ul><li>Right to access personal information</li><li>Right to correction</li><li>Right to deletion</li><li>Right to suspend processing</li></ul>
+                <h4>7. Safety Measures</h4>
+                <ul><li>Data encryption (HTTPS/TLS)</li><li>Access restriction (authorized personnel only)</li><li>Automatic deletion system (7-day retention)</li></ul>
+                <h4>8. Right to Refuse Consent</h4>
+                <p>You have the right to refuse consent. However, refusal of required items will restrict use of the inquiry service.</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>
@@ -870,10 +998,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">Directions</span>
-                        <span class="info-quick-value" data-i18n="index.cta.infoAddress">236 Jubuto-ro, Bupyeong-gu, Incheon Techno Valley</span>
+                        <span class="info-quick-label" data-i18n="index.cta.infoKakao">KakaoTalk</span>
+                        <a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" rel="noopener noreferrer" class="info-quick-value" data-i18n="index.cta.infoKakaoDesc">Open Chat Consultation</a>
                     </div>
                 </div>
             </div>
@@ -957,6 +1085,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>
 
diff --git a/ja/index.html b/ja/index.html
index bd249db..315e554 100644
--- a/ja/index.html
+++ b/ja/index.html
@@ -178,6 +178,7 @@
     <!-- CSS -->
     <link rel="stylesheet" href="/css/common.css">
     <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/contact.css">
     <link rel="stylesheet" href="/css/popup.css?v=2">
     
 
@@ -829,12 +830,139 @@
                 </div>
                 <div class="faq-shortcut-actions">
                     <a href="/ja/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">よくある質問を見る</a>
-                    <a href="/ja/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>
+                <ul><li>お問い合わせの受付および回答</li><li>サービス相談および見積もり案内</li><li>お問い合わせ処理結果の通知</li></ul>
+                <h4>2. 収集する項目</h4>
+                <ul><li><strong>必須項目：</strong>氏名、メールアドレス、お問い合わせ種類、お問い合わせ内容</li><li><strong>任意項目：</strong>電話番号</li></ul>
+                <h4>3. 保有および利用期間</h4>
+                <p>収集された個人情報は<strong>お問い合わせ日から7日間</strong>保有し、その後自動的に削除されます。</p>
+                <h4>4. 削除手順および方法</h4>
+                <ul><li>保有期間が経過した個人情報は自動削除システムにより速やかに削除されます。</li><li>電子ファイル形式の情報は復元不可能な方法で完全に削除します。</li></ul>
+                <h4>5. 第三者提供および海外移転</h4>
+                <p>会社は原則として個人情報を第三者に提供しません。ただし、お問い合わせ処理のため、以下のとおり海外に移転されます。</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>
+                <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>
+            </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>
@@ -870,10 +998,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-value" data-i18n="index.cta.infoAddress">仁川市富平区主夫吐路236、仁川テクノバレー</span>
+                        <span class="info-quick-label" data-i18n="index.cta.infoKakao">KakaoTalk</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>
@@ -957,6 +1085,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>
 
diff --git a/zh/index.html b/zh/index.html
index d804bc5..841231b 100644
--- a/zh/index.html
+++ b/zh/index.html
@@ -178,6 +178,7 @@
     <!-- CSS -->
     <link rel="stylesheet" href="/css/common.css">
     <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/contact.css">
     <link rel="stylesheet" href="/css/popup.css?v=2">
     
 
@@ -829,12 +830,139 @@
                 </div>
                 <div class="faq-shortcut-actions">
                     <a href="/zh/qna" class="btn btn-primary btn-lg" data-i18n="index.faqShortcut.btnFaq">查看常见问题</a>
-                    <a href="/zh/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>Mingle Studio（以下简称"公司"）依据《个人信息保护法》，为保护客户的个人信息，特此征求以下同意。</p>
+                <h4>1. 收集及使用目的</h4>
+                <ul><li>受理客户咨询并提供回复</li><li>服务咨询及报价说明</li><li>咨询处理结果通知</li></ul>
+                <h4>2. 收集的项目</h4>
+                <ul><li><strong>必需项目：</strong>姓名、电子邮件、咨询类型、咨询内容</li><li><strong>可选项目：</strong>电话号码</li></ul>
+                <h4>3. 保存及使用期限</h4>
+                <p>收集的个人信息自<strong>咨询受理之日起保存7天</strong>，之后自动删除。</p>
+                <h4>4. 销毁程序及方法</h4>
+                <ul><li>超过保存期限的个人信息由自动删除系统立即销毁。</li><li>电子文件形式的信息将以不可恢复的方式完全删除。</li></ul>
+                <h4>5. 第三方提供及境外转移</h4>
+                <p>公司原则上不向第三方提供个人信息。但为处理咨询，信息可能按以下方式转移至境外：</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>
+                <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>
+            </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>
@@ -870,10 +998,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-value" data-i18n="index.cta.infoAddress">仁川市富平区主夫吐路236，仁川科技谷</span>
+                        <span class="info-quick-label" data-i18n="index.cta.infoKakao">KakaoTalk</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>
@@ -957,6 +1085,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>