Update: 전체 디자인 개선 및 폰트 나눔스퀘어로 변경

- 폰트: Pretendard/Noto Sans KR → 나눔스퀘어(NanumSquare)로 전면 교체
- CSS 변수 체계화: font-weight, z-index, duration, border-radius 등 토큰 추가
- 이모지 → Font Awesome 아이콘 전면 교체 (전 페이지)
- 푸터 3단 그리드 구조 개편 (회사정보/연락처/오시는 길)
- CTA 섹션 다크 시네마틱 디자인 적용
- 컨택트 페이지 카드 hover 효과 및 위치 섹션 개선
- 가격 금액 색상 원래 오렌지로 복원
- 다크모드 글래스모피즘 일관성 강화
- 이미지 및 프로필 리소스 업데이트

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

404.html

@@ -26,10 +26,10 @@
     <link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
     <!-- CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="css/common.css">
     
     <style>
@@ -211,8 +211,8 @@
         </p>
         
         <div class="error-actions">
-            <a href="index.html" class="btn btn-primary btn-lg">🏠 홈으로 돌아가기</a>
+            <a href="index.html" class="btn btn-primary btn-lg"><i class="fa-solid fa-house" aria-hidden="true"></i> 홈으로 돌아가기</a>
-            <a href="contact.html" class="btn btn-outline btn-lg">📞 문의하기</a>
+            <a href="contact.html" class="btn btn-outline btn-lg"><i class="fa-solid fa-phone" aria-hidden="true"></i> 문의하기</a>
         </div>
         
         <div class="search-container">
@@ -223,12 +223,12 @@
         <div class="helpful-links">
             <h3>도움이 될 수 있는 페이지</h3>
             <ul>
-                <li><a href="about.html">🏢 회사 소개</a></li>
+                <li><a href="about.html"><i class="fa-solid fa-building" aria-hidden="true"></i> 회사 소개</a></li>
-                <li><a href="services.html">🎬 서비스 안내</a></li>
+                <li><a href="services.html"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> 서비스 안내</a></li>
-                <li><a href="portfolio.html">🎯 포트폴리오</a></li>
+                <li><a href="portfolio.html"><i class="fa-solid fa-bullseye" aria-hidden="true"></i> 포트폴리오</a></li>
-                <li><a href="gallery.html">📸 스튜디오 갤러리</a></li>
+                <li><a href="gallery.html"><i class="fa-solid fa-images" aria-hidden="true"></i> 스튜디오 갤러리</a></li>
-                <li><a href="qna.html">❓ 자주하는 질문</a></li>
+                <li><a href="qna.html"><i class="fa-solid fa-circle-question" aria-hidden="true"></i> 자주하는 질문</a></li>
-                <li><a href="contact.html">📧 연락처 및 위치</a></li>
+                <li><a href="contact.html"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 연락처 및 위치</a></li>
             </ul>
         </div>
     </div>

about.html

@@ -57,8 +57,10 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
     
+    <!-- Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
     <!-- CSS -->
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/about.css">
@@ -75,7 +77,10 @@
 
     <main id="main-content">
     <!-- 페이지 헤더 -->
-    <section class="page-header">
+    <section class="page-header page-header--hero">
+        <div class="page-header-bg" aria-hidden="true">
+            <img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="" loading="eager">
+        </div>
         <div class="container">
             <h1>About Us</h1>
             <p>기술과 창의력, 열정이 한데 섞여 새로운 가치가 만들어지는 공간</p>
@@ -117,11 +122,11 @@
                     <h2>비전 & 미션</h2>
                     <div class="vision-mission">
                         <div class="vm-item">
-                            <h3>🎯 비전</h3>
+                            <h3><i class="fa-solid fa-bullseye" aria-hidden="true"></i> 비전</h3>
                             <p>모든 창작자가 기술적 제약 없이 상상을 현실로 만들 수 있는 창작 생태계 구축</p>
                         </div>
                         <div class="vm-item">
-                            <h3>🚀 미션</h3>
+                            <h3><i class="fa-solid fa-rocket" aria-hidden="true"></i> 미션</h3>
                             <p>최첨단 모션캡쳐 기술을 통해 창작자들의 아이디어를 생생한 콘텐츠로 변환하고, 새로운 디지털 경험을 제공</p>
                         </div>
                     </div>
@@ -236,22 +241,22 @@
 
             <div class="values-grid stagger-children">
                 <div class="value-item reveal" data-reveal="up">
-                    <div class="value-icon">🤝</div>
+                    <div class="value-icon"><i class="fa-solid fa-handshake" aria-hidden="true"></i></div>
                     <h3>협업</h3>
                     <p>기술자와 창작자가 함께 만드는 시너지</p>
                 </div>
                 <div class="value-item reveal" data-reveal="up">
-                    <div class="value-icon">💡</div>
+                    <div class="value-icon"><i class="fa-solid fa-lightbulb" aria-hidden="true"></i></div>
                     <h3>혁신</h3>
                     <p>최신 기술로 새로운 창작의 가능성 제시</p>
                 </div>
                 <div class="value-item reveal" data-reveal="up">
-                    <div class="value-icon">🎨</div>
+                    <div class="value-icon"><i class="fa-solid fa-palette" aria-hidden="true"></i></div>
                     <h3>창의성</h3>
                     <p>상상을 현실로 만드는 창의적 솔루션</p>
                 </div>
                 <div class="value-item reveal" data-reveal="up">
-                    <div class="value-icon">⭐</div>
+                    <div class="value-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></div>
                     <h3>품질</h3>
                     <p>최고 수준의 모션캡쳐 퀄리티 추구</p>
                 </div>
@@ -265,13 +270,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

backgrounds.html

@@ -32,12 +32,10 @@
     <meta name="robots" content="noindex, nofollow">
 
     <!-- 폰트 -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
 
     <!-- CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/backgrounds.css">
 </head>
@@ -64,7 +62,7 @@
             <div class="filter-section">
                 <div class="search-box">
                     <input type="text" id="searchInput" placeholder="배경 이름으로 검색..." class="search-input">
-                    <span class="search-icon">🔍</span>
+                    <span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
                 </div>
                 <div class="filter-tags" id="filterTags">
                     <button class="filter-tag active" data-tag="all">전체</button>
@@ -101,14 +99,14 @@
 
             <!-- 데이터 없음 메시지 -->
             <div class="no-data" id="noData" style="display: none;">
-                <div class="no-data-icon">📭</div>
+                <div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
                 <h3>배경 데이터가 없습니다</h3>
                 <p>Unity에서 배경 데이터를 업로드해 주세요.</p>
             </div>
 
             <!-- 검색 결과 없음 -->
             <div class="no-results" id="noResults" style="display: none;">
-                <div class="no-results-icon">🔍</div>
+                <div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
                 <h3>검색 결과가 없습니다</h3>
                 <p>다른 검색어나 필터를 시도해 보세요.</p>
             </div>

components/footer.html

@@ -1,10 +1,33 @@
 <!-- 공통 푸터 컴포넌트 -->
 <footer class="site-footer">
     <div class="container">
-        <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+        <div class="footer-grid">
-        <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+            <div class="footer-section">
-        <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                <h3 class="footer-heading">회사 정보</h3>
-        <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                <ul class="footer-list">
-        <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                    <li><strong>밍글 스튜디오</strong></li>
+                    <li>대표: 김희진</li>
+                    <li>사업자등록번호: 208-12-73755</li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3 class="footer-heading">연락처</h3>
+                <ul class="footer-list">
+                    <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                    <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                    <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3 class="footer-heading">오시는 길</h3>
+                <ul class="footer-list">
+                    <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                    <li>인천테크노밸리 U1센터 A동 B105호</li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+        </div>
     </div>
 </footer>

components/header.html

@@ -18,7 +18,7 @@
         </ul>
         <button class="theme-toggle" id="themeToggle" aria-label="다크 모드 전환" title="다크/라이트 모드 전환">
             <div class="theme-toggle-thumb">
-                <svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <circle cx="12" cy="12" r="5"></circle>
                     <line x1="12" y1="1" x2="12" y2="3"></line>
                     <line x1="12" y1="21" x2="12" y2="23"></line>
@@ -29,7 +29,7 @@
                     <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                     <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                 </svg>
-                <svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                 </svg>
             </div>

contact.html

@@ -57,9 +57,10 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
+    <!-- Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
     <!-- CSS -->
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/contact.css">
@@ -88,28 +89,28 @@
         <div class="container">
             <div class="contact-info-grid stagger-children">
                 <div class="contact-card reveal" data-reveal="up">
-                    <div class="contact-icon">📞</div>
+                    <div class="contact-icon"><i class="fa-solid fa-phone" aria-hidden="true"></i></div>
                     <h3>전화 문의</h3>
                     <p>24시간 가능</p>
                     <a href="tel:+82-10-9288-9190" class="contact-link">010-9288-9190</a>
                 </div>
                 
                 <div class="contact-card reveal" data-reveal="up">
-                    <div class="contact-icon">💼</div>
+                    <div class="contact-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></div>
                     <h3>비즈니스 문의</h3>
                     <p>제휴 및 협력 문의</p>
                     <a href="mailto:minglestudio@minglestudio.co.kr" class="contact-link">minglestudio@minglestudio.co.kr</a>
                 </div>
 
                 <div class="contact-card reveal" data-reveal="up">
-                    <div class="contact-icon">✉️</div>
+                    <div class="contact-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></div>
                     <h3>예약 및 문의</h3>
                     <p>24시간 접수 가능</p>
                     <a href="mailto:help@minglestudio.co.kr" class="contact-link">help@minglestudio.co.kr</a>
                 </div>
                 
                 <div class="contact-card reveal" data-reveal="up">
-                    <div class="contact-icon">📍</div>
+                    <div class="contact-icon"><i class="fa-solid fa-location-dot" aria-hidden="true"></i></div>
                     <h3>스튜디오 방문</h3>
                     <p>사전 예약 필수</p>
                     <a href="#location" class="contact-link">위치 보기</a>
@@ -129,25 +130,25 @@
             <div class="location-wrapper">
                 <div class="location-info">
                     <div class="location-details">
-                        <h3>📍 주소</h3>
+                        <h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 주소</h3>
                         <p>(21330) 인천광역시 부평구 주부토로 236<br>
                         인천테크노밸리 U1센터 A동 B105호</p>
                         
-                        <h3>🚇 지하철</h3>
+                        <h3><i class="fa-solid fa-train-subway" aria-hidden="true"></i> 지하철</h3>
                         <ul>
                             <li>인천 7호선 갈산역 하차 → 도보 약 7분</li>
                         </ul>
                         
-                        <h3>🚌 버스</h3>
+                        <h3><i class="fa-solid fa-bus" aria-hidden="true"></i> 버스</h3>
                         <ul>
                             <li>갈산시장·갈산도서관 정류장 이용</li>
                             <li>4번, 526번, 555번 버스</li>
                         </ul>
                         
-                        <h3>🚗 주차</h3>
+                        <h3><i class="fa-solid fa-car" aria-hidden="true"></i> 주차</h3>
                         <p>기본 2시간 무료, 건물 내 시설 이용시 최대 4시간 무료</p>
                         
-                        <h3>🕐 운영시간</h3>
+                        <h3><i class="fa-solid fa-clock" aria-hidden="true"></i> 운영시간</h3>
                         <ul>
                             <li>24시간 영업</li>
                             <li>연중무휴</li>
@@ -197,13 +198,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

css/about.css

@@ -2,6 +2,47 @@
    About 페이지 전용 스타일
    ======================================== */
 
+/* About 히어로 헤더 */
+.page-header--hero {
+    position: relative;
+    min-height: 280px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.page-header-bg {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+
+.page-header-bg img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center 40%;
+    filter: brightness(0.3);
+}
+
+.page-header--hero .container {
+    position: relative;
+    z-index: 1;
+}
+
+.page-header--hero h1 {
+    color: #fff;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+.page-header--hero p {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .page-header-bg img {
+    filter: brightness(0.2);
+}
+
 /* 회사 정보 그리드 */
 .company-info {
     margin-bottom: var(--spacing-3xl);
@@ -88,6 +129,11 @@
     color: var(--text-primary);
 }
 
+.vm-item h3 i {
+    color: var(--primary-color);
+    margin-right: var(--spacing-xs);
+}
+
 .vm-item p {
     line-height: 1.6;
 }
@@ -176,7 +222,7 @@
 }
 
 .team-card:hover {
-    transform: translateY(-10px);
+    transform: translateY(-8px);
     box-shadow: var(--shadow-xl);
 }
 
@@ -252,8 +298,18 @@
 }
 
 .value-icon {
-    font-size: 3rem;
+    font-size: 1.4rem;
     margin-bottom: var(--spacing-md);
+    width: 52px;
+    height: 52px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
+    color: var(--primary-color);
+    border-radius: var(--border-radius-sm);
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .value-item h3 {
@@ -381,6 +437,11 @@
     box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
 }
 
+[data-theme="dark"] .value-icon {
+    background: rgba(255, 136, 0, 0.12);
+    color: var(--primary-color);
+}
+
 [data-theme="dark"] .value-item h3 {
     color: var(--dark-text-primary);
 }

css/common.css

@@ -49,6 +49,7 @@
     --color-youtube: #ff0000;
     
     /* 간격 시스템 */
+    --spacing-xxs: 0.125rem;
     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
@@ -58,6 +59,7 @@
     --spacing-3xl: 5rem;
     
     /* 폰트 크기 */
+    --font-xxs: 0.625rem;
     --font-xs: 0.75rem;
     --font-sm: 0.875rem;
     --font-base: 1rem;
@@ -107,10 +109,40 @@
     --stagger-4: 240ms;
     --stagger-5: 320ms;
 
+    /* 폰트 굵기 스케일 */
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+
+    /* Z-index 스케일 */
+    --z-dropdown: 999;
+    --z-navbar: 1000;
+    --z-modal: 1100;
+    --z-floating-sns: 9000;
+    --z-popup: 9500;
+    --z-skip: 9998;
+    --z-loading: 9999;
+    --z-notification: 10000;
+
+    /* 트랜지션 시간 스케일 */
+    --duration-fast: 150ms;
+    --duration-normal: 300ms;
+    --duration-slow: 500ms;
+    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
+
+    /* 라인 높이 스케일 */
+    --line-height-tight: 1.2;
+    --line-height-normal: 1.6;
+    --line-height-relaxed: 1.8;
+
     /* 기타 */
     --border-radius: 15px;
     --border-radius-sm: 8px;
     --border-radius-lg: 20px;
+    --border-radius-xl: 25px;
     --border-radius-full: 50px;
     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -132,7 +164,7 @@ html {
 }
 
 body {
-    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
+    font-family: 'NanumSquare', 'Noto Sans KR', sans-serif;
     line-height: 1.6;
     color: var(--text-primary);
     background-color: var(--bg-light);
@@ -389,9 +421,9 @@ body {
 
 /* 백업/기본 푸터 */
 .site-footer {
-    background: #222;
+    background: var(--text-primary);
     color: #fff;
-    padding: 2.5rem 0 1.2rem;
+    padding: var(--spacing-2xl) 0 var(--spacing-lg);
 }
 
 [data-theme="dark"] .site-footer {
@@ -399,36 +431,86 @@ body {
     border-top: 1px solid var(--glass-border);
 }
 
-.site-footer .container {
+.footer-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-xl);
+    text-align: left;
+}
+
+.footer-heading {
+    font-size: var(--font-sm);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--primary-color);
+    margin-bottom: var(--spacing-md);
+}
+
+.footer-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.footer-list li {
+    font-size: var(--font-sm);
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 2;
+}
+
+.footer-list li strong {
+    color: #fff;
+    font-weight: var(--font-weight-semibold);
+}
+
+.footer-list a {
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    transition: color var(--duration-fast) ease;
+}
+
+.footer-list a:hover {
+    color: var(--primary-color);
+}
+
+.footer-list i {
+    width: 16px;
+    text-align: center;
+    margin-right: var(--spacing-xs);
+    color: var(--primary-color);
+}
+
+.footer-bottom {
+    margin-top: var(--spacing-xl);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
 }
 
-.site-footer .footer-company {
+.footer-bottom p {
-    font-size: 1.15rem;
+    color: rgba(255, 255, 255, 0.4);
-    font-weight: 700;
+    font-size: var(--font-sm);
-    letter-spacing: 0.02em;
 }
 
-.site-footer .footer-address,
+[data-theme="dark"] .footer-bottom {
-.site-footer .footer-contact,
+    border-top-color: var(--glass-border);
-.site-footer .footer-biz {
-    margin: 0.3rem 0 0.2rem;
 }
 
-[data-theme="dark"] .site-footer .footer-address,
+[data-theme="dark"] .footer-list li {
-[data-theme="dark"] .site-footer .footer-contact,
-[data-theme="dark"] .site-footer .footer-biz {
     color: var(--dark-text-tertiary);
 }
 
-.site-footer .footer-copyright {
+[data-theme="dark"] .footer-bottom p {
-    color: #bbb;
+    color: var(--dark-text-disabled);
-    font-size: 0.98rem;
-    margin-top: 0.7rem;
 }
 
-[data-theme="dark"] .site-footer .footer-copyright {
+@media (max-width: 768px) {
-    color: var(--dark-text-disabled);
+    .footer-grid {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-lg);
+        text-align: center;
+    }
 }
 
 /* ========================================
@@ -1019,7 +1101,7 @@ body {
     color: var(--text-white);
     padding: var(--spacing-md) var(--spacing-xl);
     border-radius: var(--border-radius-sm);
-    z-index: 10001;
+    z-index: 9998;
     font-weight: 600;
     text-decoration: none;
     transition: top 0.2s;

css/contact.css

@@ -5,11 +5,17 @@
 /* 연락처 정보 그리드 */
 .contact-info-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-xl);
     margin-bottom: var(--spacing-3xl);
 }
 
+@media (max-width: 768px) {
+    .contact-info-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 .contact-card {
     text-align: center;
     padding: var(--spacing-2xl);
@@ -17,16 +23,29 @@
     border-radius: var(--border-radius);
     box-shadow: var(--shadow-md);
     transition: var(--transition);
+    border-top: 3px solid transparent;
+    position: relative;
 }
 
 .contact-card:hover {
-    transform: translateY(-8px);
+    transform: translateY(-5px);
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-xl);
+    border-top-color: var(--primary-color);
 }
 
 .contact-icon {
-    font-size: 3rem;
+    font-size: 1.5rem;
     margin-bottom: var(--spacing-lg);
+    width: 56px;
+    height: 56px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
+    color: var(--primary-color);
+    border-radius: 50%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .contact-card h3 {
@@ -202,14 +221,25 @@
     grid-template-columns: 1fr 1fr;
     gap: var(--spacing-3xl);
     align-items: start;
+    background: var(--bg-white);
+    padding: var(--spacing-2xl);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-md);
 }
 
 .location-details h3 {
-    color: var(--primary-color);
+    color: var(--text-primary);
     margin: var(--spacing-xl) 0 var(--spacing-sm);
     font-size: var(--font-lg);
 }
 
+.location-details h3 i {
+    color: var(--primary-color);
+    width: 20px;
+    text-align: center;
+    margin-right: var(--spacing-xs);
+}
+
 .location-details h3:first-child {
     margin-top: 0;
 }
@@ -242,7 +272,7 @@
 
 .map-container {
     width: 100%;
-    height: 300px;
+    height: 350px;
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow-md);
@@ -307,7 +337,7 @@
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
+    z-index: 1100;
 }
 
 .modal.active {
@@ -441,7 +471,9 @@
     }
 
     .contact-icon {
-        font-size: 2.5rem;
+        font-size: 1.3rem;
+        width: 48px;
+        height: 48px;
     }
 
     .contact-card h3 {
@@ -483,11 +515,13 @@
     background: rgba(255, 255, 255, 0.04);
     backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
+    border-top: 3px solid transparent;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .contact-card:hover {
     border-color: rgba(255, 136, 0, 0.3);
+    border-top-color: var(--primary-color);
     box-shadow: 0 8px 32px rgba(255, 136, 0, 0.1);
 }
 
@@ -500,7 +534,8 @@
 }
 
 [data-theme="dark"] .contact-icon {
-    /* 아이콘은 이모지이므로 배경 제거, 필터만 적용 */
+    background: rgba(255, 136, 0, 0.12);
+    color: var(--primary-color);
 }
 
 [data-theme="dark"] .contact-link {
@@ -567,8 +602,10 @@
 }
 
 [data-theme="dark"] .location-info {
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
-    border: none;
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
 }
 
 [data-theme="dark"] .location-details h3 {
@@ -625,4 +662,59 @@
 [data-theme="dark"] .modal-body p,
 [data-theme="dark"] .modal-body li {
     color: var(--dark-text-secondary);
+}
+
+/* ========================================
+   접근성: prefers-reduced-motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    .field-error,
+    .notification,
+    .modal {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+/* ========================================
+   접근성: focus-visible 상태
+   ======================================== */
+.form-group input:focus-visible,
+.form-group select:focus-visible,
+.form-group textarea:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 1px;
+}
+
+.modal-close:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* ========================================
+   폼 유효성 검사 스타일
+   ======================================== */
+.form-group input.error,
+.form-group select.error,
+.form-group textarea.error {
+    border-color: #ef4444 !important;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
+}
+
+.field-error {
+    animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.notification {
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
 }

css/gallery.css

@@ -63,7 +63,7 @@
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.9);
-    z-index: 1000;
+    z-index: 1100;
     cursor: pointer;
     overflow: hidden;
 }
@@ -236,7 +236,7 @@
 
 .panorama-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
     gap: 2rem;
     margin-top: 3rem;
     max-width: 1200px;
@@ -1054,4 +1054,51 @@
 /* 파노라마 뷰어 배경 */
 [data-theme="dark"] .panorama-viewer {
     background: var(--dark-surface);
+}
+
+/* ========================================
+   접근성: prefers-reduced-motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    .gallery-item,
+    .gallery-img,
+    .gallery-caption,
+    .panorama-clickable,
+    .panorama-help {
+        animation: none !important;
+        transition: none !important;
+    }
+
+    .gallery-item:hover {
+        transform: none;
+    }
+
+    .gallery-item:hover .gallery-img {
+        transform: none;
+    }
+}
+
+/* ========================================
+   접근성: focus-visible 상태
+   ======================================== */
+.lightbox-close:focus-visible,
+.lightbox-nav:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.gallery-item:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.panorama-clickable:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.panorama-btn:focus-visible,
+.panorama-modal-close:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
 }

css/main.css

@@ -236,7 +236,7 @@
     color: white;
     margin-bottom: var(--spacing-xs);
     letter-spacing: -0.02em;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 4px 4px 8px rgba(0,0,0,0.4);
+    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
     animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
 }
 
@@ -245,7 +245,7 @@
     font-size: clamp(1.8rem, 4vw, 2.8rem);
     font-weight: 700;
     letter-spacing: -0.01em;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 4px 4px 8px rgba(0,0,0,0.4);
+    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
 }
 
 .gradient-text {
@@ -262,7 +262,7 @@
     font-size: clamp(1rem, 1.5vw, 1.15rem);
     line-height: 1.7;
     font-weight: 300;
-    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
+    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
     animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
 }
 
@@ -332,7 +332,7 @@
 
 .spec-label {
     font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.5);
+    color: rgba(255, 255, 255, 0.7);
     font-weight: 400;
     letter-spacing: 0.05em;
 }
@@ -972,9 +972,10 @@
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background:
-        radial-gradient(ellipse at 20% 80%, rgba(255, 136, 0, 0.08) 0%, transparent 50%),
+        radial-gradient(circle at 15% 85%, rgba(255, 136, 0, 0.12) 0%, transparent 40%),
-        radial-gradient(ellipse at 80% 20%, rgba(255, 191, 0, 0.06) 0%, transparent 50%),
+        radial-gradient(circle at 85% 15%, rgba(255, 102, 0, 0.08) 0%, transparent 40%),
-        linear-gradient(135deg, #fffbf5 0%, #fff7ed 50%, #fff3e0 100%);
+        radial-gradient(circle at 50% 50%, rgba(255, 191, 0, 0.04) 0%, transparent 60%),
+        linear-gradient(160deg, #0f0f14 0%, #1a1520 40%, #1f1510 70%, #0f0f14 100%);
     z-index: 0;
 }
 
@@ -992,7 +993,7 @@
 
 .cta-title {
     font-size: clamp(1.8rem, 4vw, 2.8rem);
-    color: var(--text-primary);
+    color: #fff;
     margin-bottom: var(--spacing-lg);
     font-weight: 800;
     letter-spacing: -0.03em;
@@ -1001,7 +1002,7 @@
 
 .cta-description {
     font-size: clamp(1rem, 2vw, 1.2rem);
-    color: var(--text-secondary);
+    color: rgba(255, 255, 255, 0.7);
     margin-bottom: var(--spacing-2xl);
     font-weight: 400;
     line-height: 1.6;
@@ -1026,8 +1027,8 @@
 }
 
 .cta-section .btn-outline {
-    border-color: var(--primary-color);
+    border-color: rgba(255, 255, 255, 0.3);
-    color: var(--primary-color);
+    color: rgba(255, 255, 255, 0.9);
 }
 
 .cta-section .btn-outline:hover {
@@ -1050,10 +1051,10 @@
     align-items: center;
     gap: 1rem;
     padding: 1.1rem 1.5rem;
-    background: white;
+    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(0, 0, 0, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    backdrop-filter: blur(10px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -1069,10 +1070,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, rgba(255, 136, 0, 0.1) 0%, rgba(255, 191, 0, 0.08) 100%);
+    background: rgba(255, 136, 0, 0.15);
     border-radius: 10px;
-    font-size: 1.1rem;
+    font-size: 1rem;
     flex-shrink: 0;
+    color: var(--primary-color);
 }
 
 .info-quick-item div {
@@ -1093,7 +1095,7 @@
 .info-quick-value {
     font-size: 0.85rem;
     font-weight: 600;
-    color: var(--text-primary);
+    color: rgba(255, 255, 255, 0.9);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1191,7 +1193,7 @@
     width: 180px; height: 80px;
     object-fit: contain;
     object-position: center;
-    filter: grayscale(100%);
+    filter: grayscale(40%) opacity(0.7);
     transition: all 0.4s ease;
     background: transparent;
     border-radius: 20px;
@@ -1200,7 +1202,7 @@
 }
 
 .partner-logo-item:hover img {
-    filter: grayscale(0%);
+    filter: grayscale(0%) opacity(1);
     transform: scale(1.05);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 }

css/portfolio.css

@@ -275,7 +275,7 @@
 }
 
 .longform-grid {
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
 }
 
 .shorts-grid {
@@ -768,7 +768,7 @@
 
 .corporate-live {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
     gap: var(--spacing-xl);
 }
 
@@ -996,4 +996,36 @@
 /* 비디오 로딩 텍스트 */
 [data-theme="dark"] .video-loading {
     color: var(--dark-text-disabled);
+}
+
+/* ========================================
+   접근성: prefers-reduced-motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    .tab-content.active,
+    .video-card,
+    .tech-feature,
+    .youtube-channel-card,
+    .feature-item {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+/* ========================================
+   접근성: focus-visible 상태
+   ======================================== */
+.tab-btn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.video-card:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.tag:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 1px;
 }

css/qna.css

@@ -595,4 +595,34 @@
 
 [data-theme="dark"] .pricing-item {
     border-bottom-color: var(--glass-border);
+}
+
+/* ========================================
+   접근성: prefers-reduced-motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    .faq-item,
+    .faq-answer {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+/* ========================================
+   접근성: focus-visible 상태
+   ======================================== */
+.search-btn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.category-btn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.faq-question:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: -2px;
+    border-radius: var(--border-radius-sm);
 }

css/services.css

@@ -652,7 +652,7 @@
 /* 결합상품 */
 .combo-services {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
     gap: var(--spacing-xl);
 }
 
@@ -927,7 +927,7 @@
     text-align: center;
     margin-bottom: var(--spacing-lg);
     padding: var(--spacing-lg);
-    background: linear-gradient(135deg, #fff8f0, var(--color-warning-bg));
+    background: linear-gradient(135deg, #fff4e6, #ffe8cc);
     border-radius: var(--border-radius-sm);
 }
 
@@ -937,6 +937,7 @@
     font-weight: 700;
     color: var(--primary-color);
     margin-bottom: var(--spacing-xs);
+    white-space: nowrap;
 }
 
 .price-display .price-unit {
@@ -1214,7 +1215,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 10000;
+    z-index: 9500;
 }
 
 .portfolio-popup.active {
@@ -1923,9 +1924,13 @@
 }
 
 .refund-100 { color: var(--color-success); font-weight: 600; }
-.refund-70 { color: #f59e0b; font-weight: 600; }
+.refund-100::before { content: "\2713 "; }
-.refund-50 { color: #f97316; font-weight: 600; }
+.refund-70 { color: #b45309; font-weight: 600; }
+.refund-70::before { content: "\25CB "; }
+.refund-50 { color: #c2410c; font-weight: 600; }
+.refund-50::before { content: "\25B3 "; }
 .refund-0 { color: var(--color-danger); font-weight: 600; }
+.refund-0::before { content: "\2717 "; }
 
 /* 장비 그리드 */
 .equipment-grid {
@@ -2749,4 +2754,32 @@
 /* 프라이싱 헤더 보더 */
 [data-theme="dark"] .pricing-header {
     border-bottom-color: var(--glass-border);
+}
+
+/* ========================================
+   접근성: prefers-reduced-motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+    .process-step,
+    .equipment-card,
+    .chzzk-logo-img,
+    .chzzk-thumbnail,
+    .thumbnail-overlay {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+/* ========================================
+   접근성: focus-visible 상태
+   ======================================== */
+.services-table tbody tr:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: -2px;
+}
+
+.popup-close:focus-visible,
+.popup-overlay:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
 }

gallery.html

@@ -57,8 +57,7 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
     <!-- 아이콘 폰트 (이모지 대체용) -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
@@ -188,13 +187,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

index.html

@@ -35,7 +35,7 @@
     <meta name="msapplication-TileColor" content="#ff8800">
     
     <!-- DNS Prefetch (성능 최적화) -->
-    <link rel="dns-prefetch" href="//fonts.googleapis.com">
+    <link rel="dns-prefetch" href="//hangeul.pstatic.net">
     <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
     <link rel="dns-prefetch" href="//www.youtube.com">
     
@@ -172,11 +172,11 @@
     </script>
 
     <!-- 폰트 -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://hangeul.pstatic.net" crossorigin>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
+    <!-- Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
     <!-- CSS -->
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/main.css">
@@ -196,7 +196,7 @@
             <button class="popup-close-x" id="popupCloseX" aria-label="팝업 닫기">×</button>
 
             <div class="popup-header">
-                <h2 class="popup-title">🎉 밍글 스튜디오 오픈 기념 🎉</h2>
+                <h2 class="popup-title"><i class="fa-solid fa-gift" aria-hidden="true"></i> 밍글 스튜디오 오픈 기념 <i class="fa-solid fa-gift" aria-hidden="true"></i></h2>
                 <p class="popup-subtitle">특별 할인 이벤트</p>
                 <div class="popup-badge">최대 20% 할인</div>
             </div>
@@ -270,6 +270,7 @@
             <div class="video-bg">
                 <iframe
                     id="youtube-bg"
+                    title="밍글 스튜디오 모션캡쳐 플레이리스트"
                     src="https://www.youtube-nocookie.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
                     frameborder="0"
                     allow="autoplay; encrypted-media"
@@ -288,9 +289,9 @@
                     <span class="float-marker small" style="--x:-110px;--y:10px;--delay:0.8s;--dur:5s"></span>
                     <span class="float-marker small" style="--x:105px;--y:-15px;--delay:1.5s;--dur:4.2s"></span>
                     <!-- 카메라 아이콘 -->
-                    <span class="float-camera" style="--x:-120px;--y:-40px;--delay:0.4s;--dur:5s">📷</span>
+                    <span class="float-camera" style="--x:-120px;--y:-40px;--delay:0.4s;--dur:5s"><i class="fa-solid fa-camera"></i></span>
-                    <span class="float-camera" style="--x:115px;--y:30px;--delay:1s;--dur:4.5s">🎥</span>
+                    <span class="float-camera" style="--x:115px;--y:30px;--delay:1s;--dur:4.5s"><i class="fa-solid fa-video"></i></span>
-                    <span class="float-camera" style="--x:-30px;--y:80px;--delay:1.8s;--dur:5.5s">📹</span>
+                    <span class="float-camera" style="--x:-30px;--y:80px;--delay:1.8s;--dur:5.5s"><i class="fa-solid fa-clapperboard"></i></span>
                 </div>
                 <img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고" class="hero-logo">
                 <div class="logo-glow"></div>
@@ -338,7 +339,7 @@
                 <div class="showcase-image-wrapper">
                     <!-- Step 1: YouTube 영상 -->
                     <div class="showcase-media active" data-step="1">
-                        <iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" title="모션캡쳐 워크플로우 영상" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
                     </div>
                     <!-- Step 2: 이미지 페이드 루프 -->
                     <div class="showcase-media" data-step="2">
@@ -352,7 +353,7 @@
                     </div>
                     <!-- Step 3: YouTube 영상 -->
                     <div class="showcase-media" data-step="3">
-                        <iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" title="모션캡쳐 결과물 영상" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
                     </div>
                     <!-- Step 4: 이미지 페이드 루프 -->
                     <div class="showcase-media" data-step="4">
@@ -377,28 +378,28 @@
                 <!-- Step 1: 핵심 장비 -->
                 <div class="showcase-step active" data-step="1">
                     <div class="showcase-mobile-media">
-                        <iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&playsinline=1" title="모션캡쳐 워크플로우 영상" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
                     </div>
                     <div class="showcase-step-label">Equipment</div>
                     <h2 class="showcase-step-title">최첨단 모션캡쳐 시스템</h2>
                     <p class="showcase-step-desc">OptiTrack 광학식 카메라, Rokoko 글러브, ARKit 페이셜 캡쳐까지 — 전신부터 손끝, 표정까지 정밀하게 트래킹합니다.</p>
                     <div class="showcase-features">
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">🎬</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
                             <div>
                                 <strong>OptiTrack 카메라 28대</strong>
                                 <span>서브밀리미터 수준 광학식 모션 트래킹</span>
                             </div>
                         </div>
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">🧤</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-hand" aria-hidden="true"></i></span>
                             <div>
                                 <strong>Rokoko 글러브 5대</strong>
                                 <span>손가락 관절까지 정밀한 핸드 캡쳐</span>
                             </div>
                         </div>
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">📱</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-mobile-screen" aria-hidden="true"></i></span>
                             <div>
                                 <strong>ARKit 페이셜 캡쳐 (iPhone 5대)</strong>
                                 <span>iPhone 기반 고정밀 표정 캡쳐</span>
@@ -417,14 +418,14 @@
                     <p class="showcase-step-desc">8m x 7m x 2.6m 규모의 전용 캡쳐 볼륨으로 자유로운 움직임이 가능합니다.</p>
                     <div class="showcase-features">
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">📐</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-ruler-combined" aria-hidden="true"></i></span>
                             <div>
                                 <strong>8m × 7m × 2.6m</strong>
                                 <span>넓은 전용 캡쳐 볼륨</span>
                             </div>
                         </div>
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">🎮</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-gamepad" aria-hidden="true"></i></span>
                             <div>
                                 <strong>실시간 스트리밍</strong>
                                 <span>스트리밍글 서비스로 라이브 방송</span>
@@ -436,29 +437,29 @@
                 <!-- Step 3: 서비스 -->
                 <div class="showcase-step" data-step="3">
                     <div class="showcase-mobile-media">
-                        <iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
+                        <iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&playsinline=1" title="모션캡쳐 결과물 영상" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
                     </div>
                     <div class="showcase-step-label">Services</div>
                     <h2 class="showcase-step-title">주요 활용 분야</h2>
                     <p class="showcase-step-desc">다양한 크리에이티브 프로젝트를 전문 오퍼레이터가 지원합니다.</p>
                     <div class="showcase-services-grid">
                         <div class="showcase-service">
-                            <span>🎭</span>
+                            <span><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
                             <strong>버추얼 콘텐츠</strong>
                             <span class="showcase-service-sub">VTuber, 버추얼 아이돌</span>
                         </div>
                         <div class="showcase-service">
-                            <span>🎮</span>
+                            <span><i class="fa-solid fa-gamepad" aria-hidden="true"></i></span>
                             <strong>게임 개발</strong>
                             <span class="showcase-service-sub">캐릭터 애니메이션</span>
                         </div>
                         <div class="showcase-service">
-                            <span>🎬</span>
+                            <span><i class="fa-solid fa-film" aria-hidden="true"></i></span>
                             <strong>영상 제작</strong>
                             <span class="showcase-service-sub">VFX, 버추얼 프로덕션</span>
                         </div>
                         <div class="showcase-service">
-                            <span>📱</span>
+                            <span><i class="fa-solid fa-vr-cardboard" aria-hidden="true"></i></span>
                             <strong>메타버스</strong>
                             <span class="showcase-service-sub">3D 아바타 콘텐츠</span>
                         </div>
@@ -476,14 +477,14 @@
                     <p class="showcase-step-desc">메인 캡쳐 공간부터 컨트롤룸, 프라이빗 룸까지 모든 환경이 갖춰져 있습니다. 전문 기술 지원과 함께 최적의 캡쳐 경험을 제공합니다.</p>
                     <div class="showcase-features">
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">🛠️</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i></span>
                             <div>
                                 <strong>전문 기술 지원</strong>
                                 <span>숙련된 오퍼레이터의 실시간 서포트</span>
                             </div>
                         </div>
                         <div class="showcase-feature-item">
-                            <span class="showcase-feature-icon">🔒</span>
+                            <span class="showcase-feature-icon"><i class="fa-solid fa-lock" aria-hidden="true"></i></span>
                             <div>
                                 <strong>프라이빗 환경</strong>
                                 <span>독립된 공간에서 집중 작업</span>
@@ -780,21 +781,21 @@
 
             <div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
                 <div class="info-quick-item">
-                    <span class="info-quick-icon">📧</span>
+                    <span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>
                     <div>
                         <span class="info-quick-label">예약 문의</span>
                         <span class="info-quick-value">help@minglestudio.co.kr</span>
                     </div>
                 </div>
                 <div class="info-quick-item">
-                    <span class="info-quick-icon">💼</span>
+                    <span class="info-quick-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></span>
                     <div>
                         <span class="info-quick-label">비즈니스</span>
                         <span class="info-quick-value">minglestudio@minglestudio.co.kr</span>
                     </div>
                 </div>
                 <div class="info-quick-item">
-                    <span class="info-quick-icon">📍</span>
+                    <span class="info-quick-icon"><i class="fa-solid fa-location-dot" aria-hidden="true"></i></span>
                     <div>
                         <span class="info-quick-label">오시는 길</span>
                         <span class="info-quick-value">인천 부평구 주부토로 236, 인천테크노밸리</span>
@@ -810,13 +811,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

js/contact.js

@@ -77,19 +77,19 @@ async function handleFormSubmit(e) {
     }
 }
 
-// 서버 전송 시뮬레이션
+// 서버 전송 (mailto 기반 폴백)
 async function submitContactForm(data) {
-    // 실제 구현 시 서버 API 호출
+    // mailto 링크로 이메일 클라이언트 열기
-    return new Promise((resolve, reject) => {
+    const subject = encodeURIComponent(`[밍글 스튜디오 문의] ${data.name || '웹사이트 문의'}`);
-        setTimeout(() => {
+    const body = encodeURIComponent(
-            // 90% 확률로 성공
+        `이름: ${data.name || ''}\n` +
-            if (Math.random() > 0.1) {
+        `이메일: ${data.email || ''}\n` +
-                resolve({ success: true, message: '전송 완료' });
+        `전화번호: ${data.phone || ''}\n` +
-            } else {
+        `문의 유형: ${data.service || ''}\n` +
-                reject(new Error('서버 오류'));
+        `\n문의 내용:\n${data.message || ''}`
-            }
+    );
-        }, 2000);
+    window.location.href = `mailto:mingle_studio@naver.com?subject=${subject}&body=${body}`;
-    });
+    return { success: true, message: '이메일 클라이언트가 열렸습니다.' };
 }
 
 // 폼 리셋 처리
@@ -230,77 +230,65 @@ function initModal() {
     const privacyLink = document.querySelector('.privacy-link');
     const closeBtn = modal?.querySelector('.modal-close');
     
+    let lastFocusedElement = null;
+
+    function openModal() {
+        lastFocusedElement = document.activeElement;
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+        document.body.style.top = `-${window.scrollY}px`;
+        // 포커스를 모달 닫기 버튼으로 이동
+        if (closeBtn) closeBtn.focus();
+    }
+
+    function closeModal() {
+        modal.classList.remove('active');
+        const scrollY = document.body.style.top;
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.body.style.width = '';
+        document.body.style.top = '';
+        window.scrollTo(0, parseInt(scrollY || '0') * -1);
+        // 포커스 복원
+        if (lastFocusedElement) lastFocusedElement.focus();
+    }
+
     if (privacyLink && modal) {
         privacyLink.addEventListener('click', function(e) {
             e.preventDefault();
-            modal.classList.add('active');
+            openModal();
-            document.body.style.overflow = 'hidden';
         });
     }
-    
+
     if (closeBtn && modal) {
-        closeBtn.addEventListener('click', function() {
+        closeBtn.addEventListener('click', closeModal);
-            modal.classList.remove('active');
-            document.body.style.overflow = '';
-        });
     }
-    
+
     if (modal) {
         modal.addEventListener('click', function(e) {
-            if (e.target === modal) {
+            if (e.target === modal) closeModal();
-                modal.classList.remove('active');
-                document.body.style.overflow = '';
-            }
         });
     }
-    
+
     // ESC 키로 모달 닫기
     document.addEventListener('keydown', function(e) {
         if (e.key === 'Escape' && modal?.classList.contains('active')) {
-            modal.classList.remove('active');
+            closeModal();
-            document.body.style.overflow = '';
         }
     });
 }
 
 // 지도 초기화
 function initMap() {
-    // HTML에 이미 정적으로 정보가 표시되어 있으므로 
+    // HTML에 이미 정적으로 정보가 표시되어 있으므로
     // JavaScript로 덮어쓸 필요가 없음
     // 지도 기능은 외부 링크(네이버 지도, 구글 맵)를 통해 제공
-    console.log('Map links are ready');
 }
 
 
 // 폼 유효성 검사 초기화
 function initFormValidation() {
-    // CSS로 에러 스타일 정의
+    // 에러/알림 스타일은 contact.css에 정의됨
-    const style = document.createElement('style');
-    style.textContent = `
-        .form-group input.error,
-        .form-group select.error,
-        .form-group textarea.error {
-            border-color: #ef4444 !important;
-            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
-        }
-        
-        .field-error {
-            animation: fadeIn 0.3s ease;
-        }
-        
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-5px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        .notification {
-            animation: slideIn 0.3s ease;
-        }
-        
-        @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-    `;
-    document.head.appendChild(style);
 }

js/gallery.js

@@ -78,27 +78,44 @@ function initLightbox() {
     });
 }
 
+let lightboxLastFocused = null;
+
 function openLightbox(index) {
     currentImageIndex = index;
+    lightboxLastFocused = document.activeElement;
     const lightbox = document.getElementById('lightbox');
     const lightboxImg = document.getElementById('lightbox-img');
     const lightboxCaption = document.getElementById('lightbox-caption');
-    
+
     const currentImg = galleryImages[index];
-    const caption = currentImg.closest('.gallery-item').querySelector('.gallery-caption');
+    if (!currentImg) return;
-    
+    const caption = currentImg.closest('.gallery-item')?.querySelector('.gallery-caption');
+
     lightboxImg.src = currentImg.src;
     lightboxImg.alt = currentImg.alt;
     lightboxCaption.textContent = caption ? caption.textContent : currentImg.alt;
-    
+
     lightbox.classList.add('active');
+    // iOS 스크롤 방지
     document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.width = '100%';
+    document.body.style.top = `-${window.scrollY}px`;
+    // 포커스를 닫기 버튼으로
+    const closeBtn = lightbox.querySelector('.lightbox-close');
+    if (closeBtn) closeBtn.focus();
 }
 
 function closeLightbox() {
     const lightbox = document.getElementById('lightbox');
     lightbox.classList.remove('active');
+    const scrollY = document.body.style.top;
     document.body.style.overflow = '';
+    document.body.style.position = '';
+    document.body.style.width = '';
+    document.body.style.top = '';
+    window.scrollTo(0, parseInt(scrollY || '0') * -1);
+    if (lightboxLastFocused) lightboxLastFocused.focus();
 }
 
 function nextImage() {
@@ -236,36 +253,49 @@ window.addEventListener('resize', function() {
     }, 250);
 });
 
-// 터치 이벤트 지원 (모바일)
+// 터치 이벤트 지원 (모바일) - 라이트박스에만 스코프 제한
 let touchStartX = 0;
 let touchEndX = 0;
 
-document.addEventListener('touchstart', function(e) {
+function handleLightboxTouchStart(e) {
-    if (document.getElementById('lightbox').classList.contains('active')) {
+    touchStartX = e.changedTouches[0].screenX;
-        touchStartX = e.changedTouches[0].screenX;
+}
-    }
-});
 
-document.addEventListener('touchend', function(e) {
+function handleLightboxTouchEnd(e) {
-    if (document.getElementById('lightbox').classList.contains('active')) {
+    touchEndX = e.changedTouches[0].screenX;
-        touchEndX = e.changedTouches[0].screenX;
-        handleSwipe();
-    }
-});
-
-function handleSwipe() {
     const swipeThreshold = 50;
     const diff = touchStartX - touchEndX;
-    
+
     if (Math.abs(diff) > swipeThreshold) {
         if (diff > 0) {
-            nextImage(); // 왼쪽으로 스와이프 = 다음 이미지
+            nextImage();
         } else {
-            previousImage(); // 오른쪽으로 스와이프 = 이전 이미지
+            previousImage();
         }
     }
 }
 
+// openLightbox/closeLightbox에서 터치 리스너 관리를 위해 원본 함수 래핑
+const _originalOpenLightbox = openLightbox;
+openLightbox = function(index) {
+    _originalOpenLightbox(index);
+    const lightbox = document.getElementById('lightbox');
+    if (lightbox) {
+        lightbox.addEventListener('touchstart', handleLightboxTouchStart);
+        lightbox.addEventListener('touchend', handleLightboxTouchEnd);
+    }
+};
+
+const _originalCloseLightbox = closeLightbox;
+closeLightbox = function() {
+    const lightbox = document.getElementById('lightbox');
+    if (lightbox) {
+        lightbox.removeEventListener('touchstart', handleLightboxTouchStart);
+        lightbox.removeEventListener('touchend', handleLightboxTouchEnd);
+    }
+    _originalCloseLightbox();
+};
+
 // ========================================
 // 간단한 360도 파노라마 뷰어 - 좌우 스크롤 방식
 // ========================================
@@ -479,25 +509,32 @@ class Easy360Viewer {
     }
     
     bindEvents() {
+        // 바인딩된 핸들러 참조 저장 (cleanup 용)
+        this._boundHandleStart = this.handleStart.bind(this);
+        this._boundHandleMove = this.handleMove.bind(this);
+        this._boundHandleEnd = this.handleEnd.bind(this);
+        this._boundHandleWheel = this.handleWheel.bind(this);
+        this._boundHandleResize = this.handleResize.bind(this);
+
         // 마우스 이벤트
-        this.container.addEventListener('mousedown', this.handleStart.bind(this));
+        this.container.addEventListener('mousedown', this._boundHandleStart);
-        this.container.addEventListener('mousemove', this.handleMove.bind(this));
+        this.container.addEventListener('mousemove', this._boundHandleMove);
-        this.container.addEventListener('mouseup', this.handleEnd.bind(this));
+        this.container.addEventListener('mouseup', this._boundHandleEnd);
-        this.container.addEventListener('mouseleave', this.handleEnd.bind(this));
+        this.container.addEventListener('mouseleave', this._boundHandleEnd);
-        
+
         // 터치 이벤트
-        this.container.addEventListener('touchstart', this.handleStart.bind(this), { passive: false });
+        this.container.addEventListener('touchstart', this._boundHandleStart, { passive: false });
-        this.container.addEventListener('touchmove', this.handleMove.bind(this), { passive: false });
+        this.container.addEventListener('touchmove', this._boundHandleMove, { passive: false });
-        this.container.addEventListener('touchend', this.handleEnd.bind(this));
+        this.container.addEventListener('touchend', this._boundHandleEnd);
-        
+
         // 휠 이벤트 (좌우 스크롤)
-        this.container.addEventListener('wheel', this.handleWheel.bind(this), { passive: false });
+        this.container.addEventListener('wheel', this._boundHandleWheel, { passive: false });
-        
+
         // 컨텍스트 메뉴 방지
         this.container.addEventListener('contextmenu', e => e.preventDefault());
-        
+
         // 리사이즈
-        window.addEventListener('resize', this.handleResize.bind(this));
+        window.addEventListener('resize', this._boundHandleResize);
     }
     
     handleStart(e) {
@@ -697,14 +734,23 @@ class Easy360Viewer {
     
     destroy() {
         this.stopAutoRotate();
-        
+
         if (this.animationId) {
             cancelAnimationFrame(this.animationId);
         }
-        
+
-        window.removeEventListener('resize', this.handleResize.bind(this));
+        // 저장된 참조로 리스너 정확히 제거
-        
+        window.removeEventListener('resize', this._boundHandleResize);
+
         if (this.container) {
+            this.container.removeEventListener('mousedown', this._boundHandleStart);
+            this.container.removeEventListener('mousemove', this._boundHandleMove);
+            this.container.removeEventListener('mouseup', this._boundHandleEnd);
+            this.container.removeEventListener('mouseleave', this._boundHandleEnd);
+            this.container.removeEventListener('touchstart', this._boundHandleStart);
+            this.container.removeEventListener('touchmove', this._boundHandleMove);
+            this.container.removeEventListener('touchend', this._boundHandleEnd);
+            this.container.removeEventListener('wheel', this._boundHandleWheel);
             this.container.innerHTML = '';
         }
     }
@@ -907,8 +953,12 @@ function openPanoramaModal(imageSrc, title) {
     
     modalTitle.textContent = title;
     modal.classList.add('active');
+    // iOS 스크롤 방지
     document.body.style.overflow = 'hidden';
-    
+    document.body.style.position = 'fixed';
+    document.body.style.width = '100%';
+    document.body.style.top = `-${window.scrollY}px`;
+
     // 간단한 360도 좌우 스크롤 뷰어 생성
     current360Viewer = new Easy360Viewer(viewerContainer, imageSrc, title);
 }
@@ -918,22 +968,27 @@ function closePanoramaModal() {
     const autoBtn = document.getElementById('panorama-auto-btn');
     const helpBtn = document.getElementById('panorama-help-btn');
     const helpPanel = document.getElementById('panorama-help-panel');
-    
+
     // WebGL 뷰어 정리
     if (current360Viewer) {
         current360Viewer.destroy();
         current360Viewer = null;
     }
-    
+
     // UI 초기화
     autoBtn.innerHTML = '<i class="fas fa-sync-alt"></i><span>자동회전</span>';
     autoBtn.classList.remove('active');
     helpBtn.classList.remove('active');
     helpPanel.style.display = 'none';
-    
+
     modal.classList.remove('active');
+    const scrollY = document.body.style.top;
     document.body.style.overflow = '';
-    
+    document.body.style.position = '';
+    document.body.style.width = '';
+    document.body.style.top = '';
+    window.scrollTo(0, parseInt(scrollY || '0') * -1);
+
     // 컨테이너 정리
     document.getElementById('panorama-viewer-container').innerHTML = '';
 }

js/main.js

@@ -13,44 +13,6 @@ document.addEventListener('DOMContentLoaded', function() {
     initPortfolioTabs();
 });
 
-// ========================================
-// 통합 Reveal 애니메이션 시스템
-// ========================================
-function initRevealAnimations() {
-    // prefers-reduced-motion 체크
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-    if (prefersReducedMotion) {
-        // 모션 감소 모드: 즉시 표시
-        document.querySelectorAll('.reveal').forEach(el => {
-            el.classList.add('revealed');
-        });
-        return;
-    }
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const el = entry.target;
-                const delay = parseInt(el.dataset.delay || '0', 10);
-
-                setTimeout(() => {
-                    el.classList.add('revealed');
-                }, delay);
-
-                observer.unobserve(el);
-            }
-        });
-    }, {
-        threshold: 0.15,
-        rootMargin: '0px 0px -60px 0px'
-    });
-
-    document.querySelectorAll('.reveal').forEach(el => {
-        observer.observe(el);
-    });
-}
-
 // ========================================
 // 카운터 애니메이션
 // ========================================
@@ -366,21 +328,32 @@ function initPortfolioTabs() {
 // 마우스 호버 효과 (글래스 카드)
 // ========================================
 document.querySelectorAll('.feature-card, .service-item').forEach(card => {
-    card.addEventListener('mouseenter', function(e) {
+    let rafId = null;
+    const updateMousePosition = function(e) {
         const rect = this.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-
         this.style.setProperty('--mouse-x', `${x}px`);
         this.style.setProperty('--mouse-y', `${y}px`);
+    };
+
+    card.addEventListener('mouseenter', function(e) {
+        updateMousePosition.call(this, e);
     });
 
     card.addEventListener('mousemove', function(e) {
-        const rect = this.getBoundingClientRect();
+        if (rafId) return;
-        const x = e.clientX - rect.left;
+        const self = this;
-        const y = e.clientY - rect.top;
+        rafId = requestAnimationFrame(() => {
+            updateMousePosition.call(self, e);
+            rafId = null;
+        });
+    });
 
-        this.style.setProperty('--mouse-x', `${x}px`);
+    card.addEventListener('mouseleave', function() {
-        this.style.setProperty('--mouse-y', `${y}px`);
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
     });
 });

js/portfolio.js

@@ -23,9 +23,13 @@ function initPortfolioTabs() {
             const targetTab = button.getAttribute('data-tab');
             
             // 모든 탭 버튼에서 active 클래스 제거
-            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabButtons.forEach(btn => {
+                btn.classList.remove('active');
+                btn.setAttribute('aria-selected', 'false');
+            });
             // 클릭된 탭 버튼에 active 클래스 추가
             button.classList.add('active');
+            button.setAttribute('aria-selected', 'true');
             
             // 모든 탭 콘텐츠 숨기기
             tabContents.forEach(content => {
@@ -261,16 +265,24 @@ function filterByTag(tagName) {
 
 // YouTube API 초기화
 function initYouTubeAPI() {
+    // API가 이미 로드된 경우
+    if (window.YT && window.YT.Player) {
+        initYouTubePlayers();
+        return;
+    }
+
     // YouTube IFrame API 로드
-    if (!window.YT) {
+    if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
         const tag = document.createElement('script');
         tag.src = 'https://www.youtube.com/iframe_api';
         const firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }
-    
+
-    // API 준비 완료 시 실행
+    // API 준비 완료 시 실행 (기존 콜백 체인 유지)
+    const existingCallback = window.onYouTubeIframeAPIReady;
     window.onYouTubeIframeAPIReady = function() {
+        if (existingCallback) existingCallback();
         initYouTubePlayers();
     };
 }
@@ -322,8 +334,6 @@ function extractVideoId(url) {
 
 // 플레이어 준비 완료
 function onPlayerReady(event) {
-    console.log('YouTube player ready');
-    
     // 플레이어 컨테이너에 로딩 완료 클래스 추가
     const playerElement = event.target.getIframe();
     const wrapper = playerElement.closest('.video-wrapper');
@@ -416,9 +426,25 @@ function shareVideo(videoUrl, title) {
             url: videoUrl
         });
     } else {
-        // 클립보드에 복사
+        // 클립보드에 복사 (폴백 포함)
-        navigator.clipboard.writeText(videoUrl).then(() => {
+        const copyText = (text) => {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                return navigator.clipboard.writeText(text);
+            }
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            return Promise.resolve();
+        };
+        copyText(videoUrl).then(() => {
             showNotification('비디오 링크가 클립보드에 복사되었습니다.', 'success');
+        }).catch(() => {
+            showNotification('링크 복사에 실패했습니다.', 'error');
         });
     }
 }

js/qna.js

@@ -180,28 +180,53 @@ function handleSearch(query) {
     }
 }
 
-// 검색어 하이라이트
+// 검색어 하이라이트 (XSS-safe: DOM API 사용)
 function highlightSearchTerm(item, term) {
     const question = item.querySelector('.faq-question h3');
     const answer = item.querySelector('.faq-answer');
-    
+
     const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const highlightRegex = new RegExp(`(${escapedTerm})`, 'gi');
-    
+
     // 질문 하이라이트
     const originalQuestionText = question.dataset.originalText || question.textContent;
     question.dataset.originalText = originalQuestionText;
-    question.innerHTML = originalQuestionText.replace(highlightRegex, '<span class="search-highlight">$1</span>');
+    highlightTextContent(question, originalQuestionText, highlightRegex);
-    
+
     // 답변 하이라이트
     const answerElements = answer.querySelectorAll('p, li');
     answerElements.forEach(el => {
         const originalText = el.dataset.originalText || el.textContent;
         el.dataset.originalText = originalText;
-        el.innerHTML = originalText.replace(highlightRegex, '<span class="search-highlight">$1</span>');
+        highlightTextContent(el, originalText, highlightRegex);
     });
 }
 
+// XSS-safe 텍스트 하이라이트 (DOM API로 안전하게 생성)
+function highlightTextContent(element, text, regex) {
+    element.textContent = '';
+    let lastIndex = 0;
+    let match;
+    regex.lastIndex = 0;
+
+    while ((match = regex.exec(text)) !== null) {
+        // 매칭 전 텍스트 추가
+        if (match.index > lastIndex) {
+            element.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
+        }
+        // 하이라이트 span 추가
+        const span = document.createElement('span');
+        span.className = 'search-highlight';
+        span.textContent = match[1];
+        element.appendChild(span);
+        lastIndex = regex.lastIndex;
+    }
+    // 나머지 텍스트 추가
+    if (lastIndex < text.length) {
+        element.appendChild(document.createTextNode(text.slice(lastIndex)));
+    }
+}
+
 // 검색 하이라이트 제거
 function clearSearchHighlight(item) {
     const question = item.querySelector('.faq-question h3');
@@ -244,11 +269,14 @@ function updateSearchSuggestions(query) {
     );
     
     if (matchingKeywords.length > 0) {
-        suggestions.innerHTML = matchingKeywords
+        suggestions.textContent = '';
-            .slice(0, 5)
+        matchingKeywords.slice(0, 5).forEach(keyword => {
-            .map(keyword => 
+            const div = document.createElement('div');
-                `<div class="suggestion-item" onclick="selectSuggestion('${keyword}')">${keyword}</div>`
+            div.className = 'suggestion-item';
-            ).join('');
+            div.textContent = keyword;
+            div.addEventListener('click', () => selectSuggestion(keyword));
+            suggestions.appendChild(div);
+        });
         suggestions.classList.add('active');
     } else {
         hideSuggestions();
@@ -310,8 +338,12 @@ function initCategories() {
             const category = this.dataset.category;
             
             // 활성 버튼 업데이트
-            categoryBtns.forEach(b => b.classList.remove('active'));
+            categoryBtns.forEach(b => {
+                b.classList.remove('active');
+                b.setAttribute('aria-pressed', 'false');
+            });
             this.classList.add('active');
+            this.setAttribute('aria-pressed', 'true');
             
             // FAQ 필터링
             filterByCategory(category);
@@ -387,12 +419,13 @@ function initAnimations() {
 // URL 해시로 특정 FAQ 열기
 function openFAQByHash() {
     const hash = window.location.hash.substring(1);
-    if (hash) {
+    if (!hash) return;
-        const faqItem = document.querySelector(`[data-id="${hash}"]`);
+    // CSS selector injection 방지
-        if (faqItem) {
+    const safeHash = CSS.escape ? CSS.escape(hash) : hash.replace(/[^\w-]/g, '');
-            toggleFAQ(faqItem);
+    const faqItem = document.querySelector(`[data-id="${safeHash}"]`);
-            faqItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    if (faqItem) {
-        }
+        toggleFAQ(faqItem);
+        faqItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
 }
 
@@ -409,11 +442,31 @@ function shareFAQ(faqId) {
             url: url
         });
     } else {
-        // 클립보드에 복사
+        // 클립보드에 복사 (폴백 포함)
-        navigator.clipboard.writeText(url).then(() => {
+        const copyToClipboard = (text) => {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                return navigator.clipboard.writeText(text);
+            }
+            // 구형 브라우저 폴백
+            const textarea = document.createElement('textarea');
+            textarea.value = text;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            return Promise.resolve();
+        };
+
+        copyToClipboard(url).then(() => {
             if (window.commonUtils && window.commonUtils.showNotification) {
                 window.commonUtils.showNotification('링크가 클립보드에 복사되었습니다.', 'success');
             }
+        }).catch(() => {
+            if (window.commonUtils && window.commonUtils.showNotification) {
+                window.commonUtils.showNotification('링크 복사에 실패했습니다.', 'error');
+            }
         });
     }
 }

js/services.js

@@ -86,11 +86,15 @@ function openPortfolioPopup() {
     const popup = document.getElementById('portfolioPopup');
     if (popup) {
         popup.classList.add('active');
-        document.body.style.overflow = 'hidden'; // 배경 스크롤 방지
+        // iOS 스크롤 방지
-        
+        document.body.style.overflow = 'hidden';
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+        document.body.style.top = `-${window.scrollY}px`;
+
         // ESC 키로 닫기
         document.addEventListener('keydown', handleEscapeKey);
-        
+
         // 애니메이션 효과
         setTimeout(() => {
             popup.style.opacity = '1';
@@ -111,14 +115,19 @@ function closePortfolioPopup() {
                 iframe.src = src;
             }, 100);
         });
-        
+
         popup.style.opacity = '0';
-        
+
         setTimeout(() => {
             popup.classList.remove('active');
-            document.body.style.overflow = ''; // 스크롤 복원
+            const scrollY = document.body.style.top;
+            document.body.style.overflow = '';
+            document.body.style.position = '';
+            document.body.style.width = '';
+            document.body.style.top = '';
+            window.scrollTo(0, parseInt(scrollY || '0') * -1);
         }, 300);
-        
+
         // ESC 키 이벤트 제거
         document.removeEventListener('keydown', handleEscapeKey);
     }
@@ -141,9 +150,12 @@ function openStreamingPortfolioPopup() {
     if (popup) {
         popup.classList.add('active');
         document.body.style.overflow = 'hidden';
-        
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+        document.body.style.top = `-${window.scrollY}px`;
+
         document.addEventListener('keydown', handleStreamingEscapeKey);
-        
+
         setTimeout(() => {
             popup.style.opacity = '1';
         }, 10);
@@ -163,12 +175,17 @@ function closeStreamingPortfolioPopup() {
                 iframe.src = src;
             }, 100);
         });
-        
+
         popup.style.opacity = '0';
-        
+
         setTimeout(() => {
             popup.classList.remove('active');
+            const scrollY = document.body.style.top;
             document.body.style.overflow = '';
+            document.body.style.position = '';
+            document.body.style.width = '';
+            document.body.style.top = '';
+            window.scrollTo(0, parseInt(scrollY || '0') * -1);
         }, 300);
         
         document.removeEventListener('keydown', handleStreamingEscapeKey);

portfolio.html

@@ -57,8 +57,7 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
     <!-- 아이콘 폰트 (이모지 대체용) -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
@@ -166,16 +165,16 @@
     <section class="section">
         <div class="container">
             <div class="portfolio-tabs">
-                <div class="tab-buttons">
+                <div class="tab-buttons" role="tablist" aria-label="포트폴리오 카테고리">
-                    <button class="tab-btn active" data-tab="individual">개인 크리에이터</button>
+                    <button class="tab-btn active" id="tab-individual" data-tab="individual" role="tab" aria-selected="true" aria-controls="individual">개인 크리에이터</button>
-                    <button class="tab-btn" data-tab="corporate">기업 프로젝트</button>
+                    <button class="tab-btn" id="tab-corporate" data-tab="corporate" role="tab" aria-selected="false" aria-controls="corporate">기업 프로젝트</button>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- 개인 크리에이터 포트폴리오 -->
-    <div class="tab-content active" id="individual">
+    <div class="tab-content active" id="individual" role="tabpanel" aria-labelledby="tab-individual">
         <!-- Long-Form 콘텐츠 - 개인 -->
         <section class="section bg-light">
             <div class="container">
@@ -391,7 +390,7 @@
             </div>
             
             <div class="broadcast-notice">
-                <div class="notice-icon">🔴</div>
+                <div class="notice-icon"><i class="fa-solid fa-circle" aria-hidden="true" style="color: #ef4444;"></i></div>
                 <div class="notice-content">
                     <h3>실시간 모션캡쳐 방송</h3>
                     <p>밍글 스튜디오에서 진행되는 실시간 모션캡쳐 방송을 통해 고품질 버추얼 콘텐츠를 경험하세요</p>
@@ -496,7 +495,7 @@
     <!-- 개인 크리에이터 포트폴리오 끝 -->
 
     <!-- 기업 프로젝트 포트폴리오 -->
-    <div class="tab-content" id="corporate">
+    <div class="tab-content" id="corporate" role="tabpanel" aria-labelledby="tab-corporate">
         <section class="section bg-light">
             <div class="container">
                 <div class="section-header">
@@ -632,13 +631,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

props.html

@@ -32,12 +32,10 @@
     <meta name="robots" content="noindex, nofollow">
 
     <!-- 폰트 -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
 
     <!-- CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/props.css">
 </head>
@@ -64,7 +62,7 @@
             <div class="filter-section">
                 <div class="search-box">
                     <input type="text" id="searchInput" placeholder="프랍 이름으로 검색..." class="search-input">
-                    <span class="search-icon">🔍</span>
+                    <span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
                 </div>
                 <div class="view-options">
                     <button class="view-btn active" data-view="grid" title="그리드 보기">
@@ -97,14 +95,14 @@
 
             <!-- 데이터 없음 메시지 -->
             <div class="no-data" id="noData" style="display: none;">
-                <div class="no-data-icon">📭</div>
+                <div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
                 <h3>프랍 데이터가 없습니다</h3>
                 <p>Unity에서 프랍 데이터를 업로드해 주세요.</p>
             </div>
 
             <!-- 검색 결과 없음 -->
             <div class="no-results" id="noResults" style="display: none;">
-                <div class="no-results-icon">🔍</div>
+                <div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
                 <h3>검색 결과가 없습니다</h3>
                 <p>다른 검색어를 시도해 보세요.</p>
             </div>

qna.html

@@ -57,9 +57,10 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
+    <!-- Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
     <!-- CSS -->
     <link rel="stylesheet" href="css/common.css">
     <link rel="stylesheet" href="css/qna.css">
@@ -90,7 +91,7 @@
                 <div class="search-box">
                     <label for="faqSearch" class="sr-only">FAQ 검색</label>
                     <input type="text" id="faqSearch" placeholder="궁금한 내용을 검색해보세요..." autocomplete="off">
-                    <button type="button" class="search-btn" aria-label="검색">🔍</button>
+                    <button type="button" class="search-btn" aria-label="검색"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>
                 </div>
                 <div class="search-suggestions" id="searchSuggestions"></div>
             </div>
@@ -126,12 +127,12 @@
                     <div class="faq-answer">
                         <p>아래 방법으로 예약하실 수 있습니다:</p>
                         <ul>
-                            <li><strong>📧 이메일:</strong> <a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다.">help@minglestudio.co.kr</a></li>
+                            <li><strong><i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일:</strong> <a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다.">help@minglestudio.co.kr</a></li>
-                            <li><strong>📞 전화:</strong> 010-9288-9190</li>
+                            <li><strong><i class="fa-solid fa-phone" aria-hidden="true"></i> 전화:</strong> 010-9288-9190</li>
-                            <li><strong>📅 네이버 예약:</strong> <a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank">네이버 플레이스 실시간 예약</a></li>
+                            <li><strong><i class="fa-solid fa-calendar" aria-hidden="true"></i> 네이버 예약:</strong> <a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank">네이버 플레이스 실시간 예약</a></li>
                         </ul>
                         <div style="margin-top: var(--spacing-md); text-align: center;">
-                            <button id="showEmailFormFAQ" class="btn btn-primary" style="font-size: 0.9rem; padding: 0.5rem 1rem;">📧 이메일 문의하기</button>
+                            <button id="showEmailFormFAQ" class="btn btn-primary" style="font-size: 0.9rem; padding: 0.5rem 1rem;"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일 문의하기</button>
                         </div>
                         
                         <!-- 이메일 양식 -->
@@ -168,7 +169,7 @@
                             </div>
                             
                             <div style="margin-top: var(--spacing-md); text-align: center;">
-                                <a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 대관 문의]" class="btn btn-primary">📧 이메일 바로 보내기</a>
+                                <a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 대관 문의]" class="btn btn-primary"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일 바로 보내기</a>
                             </div>
                         </div>
                         <p>최소 2주 전에 연락주시면 원활하게 준비가 가능합니다.</p>
@@ -417,13 +418,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 

services.html

@@ -57,8 +57,7 @@
     <meta name="twitter:creator" content="@mingle_studio">
     
     <!-- 폰트 -->
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
     
     <!-- 아이콘 폰트 (이모지 대체용) -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
@@ -98,7 +97,7 @@
             <!-- 서비스 1: 모션캡처 서비스 -->
             <div class="service-package">
                 <div class="package-header">
-                    <span class="package-icon">🎯</span>
+                    <span class="package-icon"><i class="fa-solid fa-bullseye" aria-hidden="true"></i></span>
                     <h3>서비스 1: 모션캡처 서비스</h3>
                     <span class="package-badge">기본형</span>
                 </div>
@@ -108,9 +107,9 @@
                     <div class="pricing-cards stagger-children">
                         <div class="pricing-card basic reveal" data-reveal="up">
                             <div class="card-header">
-                                <span class="person-icon">👤</span>
+                                <span class="person-icon"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
                                 <h4>1인 이용</h4>
-                                <span class="promo-badge">🎉 20% 할인</span>
+                                <span class="promo-badge"><i class="fa-solid fa-gift" aria-hidden="true"></i> 20% 할인</span>
                             </div>
                             <div class="price-display">
                                 <span class="original-price">150,000원</span>
@@ -128,10 +127,10 @@
 
                         <div class="pricing-card team reveal" data-reveal="up">
                             <div class="card-header">
-                                <span class="person-icon">👥</span>
+                                <span class="person-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
                                 <h4>2인 이용</h4>
                                 <span class="popular-badge">인기</span>
-                                <span class="promo-badge">🎉 20% 할인</span>
+                                <span class="promo-badge"><i class="fa-solid fa-gift" aria-hidden="true"></i> 20% 할인</span>
                             </div>
                             <div class="price-display">
                                 <span class="original-price">200,000원</span>
@@ -149,9 +148,9 @@
 
                         <div class="pricing-card extended reveal" data-reveal="up">
                             <div class="card-header">
-                                <span class="person-icon">👨‍👩‍👧‍👦</span>
+                                <span class="person-icon"><i class="fa-solid fa-people-group" aria-hidden="true"></i></span>
                                 <h4>추가 인원</h4>
-                                <span class="promo-badge">🎉 20% 할인</span>
+                                <span class="promo-badge"><i class="fa-solid fa-gift" aria-hidden="true"></i> 20% 할인</span>
                             </div>
                             <div class="price-display">
                                 <span class="original-price">+100,000원</span>
@@ -170,11 +169,11 @@
                     
                     <div class="service-info">
                         <div class="info-card">
-                            <span class="info-icon">⏱️</span>
+                            <span class="info-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
                             <p><strong>최소 이용시간:</strong> 2시간</p>
                         </div>
                         <div class="info-card">
-                            <span class="info-icon">👥</span>
+                            <span class="info-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
                             <p><strong>최대 동시 이용:</strong> 4인</p>
                         </div>
                     </div>
@@ -184,12 +183,12 @@
                 <div class="tech-specs-compact">
                     <h5>제공 기술 및 서비스</h5>
                     <div class="specs-list">
-                        <div class="spec-tag"><span>📹</span> OptiTrack 28대 카메라</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-video" aria-hidden="true"></i></span> OptiTrack 28대 카메라</div>
-                        <div class="spec-tag"><span>🤖</span> 실시간 아바타 녹화</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-robot" aria-hidden="true"></i></span> 실시간 아바타 녹화</div>
-                        <div class="spec-tag"><span>👤</span> 전신/페이셜 캡처</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-user" aria-hidden="true"></i></span> 전신/페이셜 캡처</div>
-                        <div class="spec-tag"><span>📊</span> 실시간 모니터링</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-chart-bar" aria-hidden="true"></i></span> 실시간 모니터링</div>
-                        <div class="spec-tag"><span>👨‍💻</span> 전문 오퍼레이터</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-user-gear" aria-hidden="true"></i></span> 전문 오퍼레이터</div>
-                        <div class="spec-tag"><span>💾</span> 모션 데이터 제공</div>
+                        <div class="spec-tag"><span><i class="fa-solid fa-floppy-disk" aria-hidden="true"></i></span> 모션 데이터 제공</div>
                     </div>
                 </div>
 
@@ -201,7 +200,7 @@
             <!-- 결합상품 -->
             <div class="service-package">
                 <div class="package-header">
-                    <span class="package-icon">🎬</span>
+                    <span class="package-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
                     <h3>결합상품</h3>
                     <span class="package-badge">특화서비스</span>
                 </div>
@@ -221,7 +220,7 @@
                             </ul>
                             <div class="portfolio-preview">
                                 <button class="portfolio-btn" onclick="openPortfolioPopup()">
-                                    📽️ 포트폴리오 보기
+                                    <i class="fa-solid fa-film" aria-hidden="true"></i> 포트폴리오 보기
                                 </button>
                             </div>
                         </div>
@@ -251,7 +250,7 @@
             <!-- 서비스 2: 스트리밍글 서비스 -->
             <div class="service-package featured">
                 <div class="package-header">
-                    <span class="package-icon">🌟</span>
+                    <span class="package-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></span>
                     <h3>서비스 2: 스트리밍글 서비스</h3>
                     <span class="package-badge featured">대표상품</span>
                 </div>
@@ -259,7 +258,7 @@
                 <div class="streaming-package">
                     <div class="package-overview">
                         <div class="package-price">
-                            <span class="promo-badge-large">🎉 20% 할인</span>
+                            <span class="promo-badge-large"><i class="fa-solid fa-gift" aria-hidden="true"></i> 20% 할인</span>
                             <span class="original-price-large">2,000,000원</span>
                             <span class="price-amount">1,600,000원</span>
                             <span class="price-unit">/ 1~4인 사용</span>
@@ -297,7 +296,7 @@
 
                     <div class="portfolio-preview">
                         <button class="portfolio-btn" onclick="openStreamingPortfolioPopup()">
-                            🔴 라이브 방송 포트폴리오 보기
+                            <i class="fa-solid fa-circle" style="color: #ff0000" aria-hidden="true"></i> 라이브 방송 포트폴리오 보기
                         </button>
                     </div>
                 </div>
@@ -306,7 +305,7 @@
             <!-- 서비스 3: 뮤직비디오 제작 서비스 -->
             <div class="service-package mv-production">
                 <div class="package-header">
-                    <span class="package-icon">🎬</span>
+                    <span class="package-icon"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i></span>
                     <h3>서비스 3: 뮤직비디오 제작 서비스</h3>
                     <span class="package-badge">프리미엄</span>
                 </div>
@@ -325,7 +324,7 @@
                     <h4>제작 프로세스 (7단계)</h4>
                     <div class="process-steps">
                         <div class="mv-step">
-                            <div class="step-icon">1️⃣</div>
+                            <div class="step-icon">1</div>
                             <div class="step-details">
                                 <h5>기획 상담 (무료)</h5>
                                 <p>뮤직비디오 제작의 시작 단계로, 콘셉트와 분위기를 정리합니다.</p>
@@ -334,7 +333,7 @@
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">2️⃣</div>
+                            <div class="step-icon">2</div>
                             <div class="step-details">
                                 <h5>배경 제작</h5>
                                 <p>저작권 귀속 여부에 따라 옵션을 선택할 수 있습니다.</p>
@@ -356,13 +355,13 @@
                                     </div>
                                 </div>
                                 <div class="process-note">
-                                    <p>📌 Unity 빌드로 전달되어 카메라 시점 확인 가능</p>
+                                    <p><i class="fa-solid fa-thumbtack" aria-hidden="true"></i> Unity 빌드로 전달되어 카메라 시점 확인 가능</p>
                                 </div>
                             </div>
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">3️⃣</div>
+                            <div class="step-icon">3</div>
                             <div class="step-details">
                                 <h5>스토리보드 작성</h5>
                                 <div class="step-pricing">
@@ -374,7 +373,7 @@
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">4️⃣</div>
+                            <div class="step-icon">4</div>
                             <div class="step-details">
                                 <h5>아바타 세팅 및 프랍 제작</h5>
                                 <div class="step-pricing">
@@ -391,7 +390,7 @@
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">5️⃣</div>
+                            <div class="step-icon">5</div>
                             <div class="step-details">
                                 <h5>모션 캡처</h5>
                                 <div class="mv-mocap-pricing">
@@ -424,7 +423,7 @@
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">6️⃣</div>
+                            <div class="step-icon">6</div>
                             <div class="step-details">
                                 <h5>룩 개발 & 연출</h5>
                                 <div class="step-pricing">
@@ -436,7 +435,7 @@
                         </div>
 
                         <div class="mv-step">
-                            <div class="step-icon">7️⃣</div>
+                            <div class="step-icon">7</div>
                             <div class="step-details">
                                 <h5>최종 피드백 & 납품</h5>
                                 <p>완성된 영상을 고객 피드백 반영 후 수정하여 최종 납품합니다.</p>
@@ -447,7 +446,7 @@
                 </div>
 
                 <div class="service-note">
-                    <p><strong>💡 제작 프로세스:</strong> 기획 상담(무료) → 전체 견적 제시 → 견적 승인 후 제작 시작 (2단계~7단계 순차 진행)</p>
+                    <p><strong><i class="fa-solid fa-lightbulb" aria-hidden="true"></i> 제작 프로세스:</strong> 기획 상담(무료) → 전체 견적 제시 → 견적 승인 후 제작 시작 (2단계~7단계 순차 진행)</p>
                 </div>
             </div>
 
@@ -470,7 +469,7 @@
                 <!-- 캐릭터 세팅 -->
                 <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
-                        <span class="option-icon">🎨</span>
+                        <span class="option-icon"><i class="fa-solid fa-palette" aria-hidden="true"></i></span>
                         <h3>캐릭터 세팅</h3>
                     </div>
                     <div class="option-pricing">
@@ -485,7 +484,7 @@
                 <!-- 배경 세팅 -->
                 <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
-                        <span class="option-icon">🏞️</span>
+                        <span class="option-icon"><i class="fa-solid fa-mountain-sun" aria-hidden="true"></i></span>
                         <h3>배경 세팅</h3>
                     </div>
                     <div class="option-content">
@@ -512,7 +511,7 @@
                 <!-- 프랍 세팅 -->
                 <div class="option-card reveal" data-reveal="up">
                     <div class="option-header">
-                        <span class="option-icon">🎪</span>
+                        <span class="option-icon"><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
                         <h3>프랍 세팅</h3>
                     </div>
                     <div class="option-pricing">
@@ -600,10 +599,10 @@
                 
                 <div class="booking-buttons">
                     <button id="showEmailForm" class="btn btn-primary">
-                        <span>📧</span> 이메일 문의하기
+                        <span><i class="fa-solid fa-envelope" aria-hidden="true"></i></span> 이메일 문의하기
                     </button>
                     <a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-secondary">
-                        <span>📅</span> 네이버 예약 바로가기
+                        <span><i class="fa-solid fa-calendar" aria-hidden="true"></i></span> 네이버 예약 바로가기
                     </a>
                 </div>
                 <p class="booking-note">※ 네이버 플레이스를 통해 실시간 일정 확인 및 예약이 가능합니다</p>
@@ -655,7 +654,7 @@
                     
                     <div class="email-send">
                         <a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다." class="btn btn-primary">
-                            📧 이메일 바로 보내기
+                            <i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일 바로 보내기
                         </a>
                     </div>
                 </div>
@@ -687,8 +686,8 @@
                     <table class="refund-table">
                         <thead>
                             <tr>
-                                <th>취소 시점</th>
+                                <th scope="col">취소 시점</th>
-                                <th>환불 비율</th>
+                                <th scope="col">환불 비율</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -733,13 +732,36 @@
     <div id="footer-placeholder"></div>
 
     <!-- 백업 푸터 (JavaScript 로드 실패 시) -->
-    <footer class="site-footer">
+    <footer class="site-footer" id="backupFooter">
         <div class="container">
-            <div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
+            <div class="footer-grid">
-            <div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
+                <div class="footer-section">
-            <div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
+                    <h3 class="footer-heading">회사 정보</h3>
-            <div class="footer-biz">사업자등록번호: 208-12-73755</div>
+                    <ul class="footer-list">
-            <div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
+                        <li><strong>밍글 스튜디오</strong></li>
+                        <li>대표: 김희진</li>
+                        <li>사업자등록번호: 208-12-73755</li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">연락처</h3>
+                    <ul class="footer-list">
+                        <li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
+                        <li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
+                        <li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h3 class="footer-heading">오시는 길</h3>
+                    <ul class="footer-list">
+                        <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
+                        <li>인천테크노밸리 U1센터 A동 B105호</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 밍글 스튜디오. All rights reserved.</p>
+            </div>
         </div>
     </footer>
 
@@ -753,7 +775,7 @@
             </div>
             <div class="popup-body">
                 <div class="portfolio-section">
-                    <h4>🎵 뮤직비디오 대표작</h4>
+                    <h4><i class="fa-solid fa-music" aria-hidden="true"></i> 뮤직비디오 대표작</h4>
                     <div class="portfolio-grid">
                         <div class="portfolio-item">
                             <div class="video-wrapper">
@@ -775,7 +797,7 @@
                 </div>
                 
                 <div class="portfolio-section">
-                    <h4>🎬 숏폼 챌린지</h4>
+                    <h4><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> 숏폼 챌린지</h4>
                     <div class="portfolio-grid shorts-grid">
                         <div class="portfolio-item">
                             <div class="video-wrapper shorts-wrapper">
@@ -820,7 +842,7 @@
             </div>
             <div class="popup-body">
                 <div class="portfolio-section">
-                    <h4>🔴 실시간 모션캡처 방송</h4>
+                    <h4><i class="fa-solid fa-circle" style="color: #ff0000" aria-hidden="true"></i> 실시간 모션캡처 방송</h4>
                     <div class="portfolio-grid streaming-grid">
                         <div class="portfolio-item">
                             <div class="video-wrapper">
@@ -911,22 +933,22 @@
                 </div>
                 
                 <div class="streaming-features">
-                    <h4>✨ 스트리밍글 서비스 특징</h4>
+                    <h4><i class="fa-solid fa-sparkles" aria-hidden="true"></i> 스트리밍글 서비스 특징</h4>
                     <div class="features-grid">
                         <div class="feature-item">
-                            <span class="feature-icon">🎥</span>
+                            <span class="feature-icon"><i class="fa-solid fa-video" aria-hidden="true"></i></span>
                             <p>실시간 모션캡처 스트리밍</p>
                         </div>
                         <div class="feature-item">
-                            <span class="feature-icon">👥</span>
+                            <span class="feature-icon"><i class="fa-solid fa-users" aria-hidden="true"></i></span>
                             <p>최대 4인 동시 방송</p>
                         </div>
                         <div class="feature-item">
-                            <span class="feature-icon">⏰</span>
+                            <span class="feature-icon"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
                             <p>6시간 풀 패키지</p>
                         </div>
                         <div class="feature-item">
-                            <span class="feature-icon">🎭</span>
+                            <span class="feature-icon"><i class="fa-solid fa-masks-theater" aria-hidden="true"></i></span>
                             <p>캐릭터 & 배경 세팅</p>
                         </div>
                     </div>

sitemap.xml

@@ -5,11 +5,6 @@
         <changefreq>weekly</changefreq>
         <priority>1.0</priority>
     </url>
-    <url>
-        <loc>https://minglestudio.co.kr/index.html</loc>
-        <changefreq>weekly</changefreq>
-        <priority>1.0</priority>
-    </url>
     <url>
         <loc>https://minglestudio.co.kr/about.html</loc>
         <changefreq>monthly</changefreq>