ADD : 탈의실 이미지 기능 추가

index.html

@@ -280,6 +280,92 @@
         </div>
     </section>
 
+    <!-- Studio Gallery -->
+    <section id="studio-gallery" class="section" style="background:#fff;">
+        <div class="container">
+            <div class="section-header">
+                <h2>스튜디오 공간 갤러리</h2>
+                <p>밍글 스튜디오의 실제 공간을 사진으로 확인해보세요. 이미지를 클릭하면 크게 볼 수 있습니다.</p>
+            </div>
+            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;">
+                <div class="studio-img-card">
+                    <img src="Studio_Image/넓은 모션 캡쳐 공간 001.jpg" alt="메인 모션캡쳐 존(전경)" class="studio-img-thumb">
+                    <div class="studio-img-caption">메인 모션캡쳐 존(전경)</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/넓은 모션 캡쳐 공간 002.jpg" alt="메인 모션캡쳐 존(측면)" class="studio-img-thumb">
+                    <div class="studio-img-caption">메인 모션캡쳐 존(측면)</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/프라이핏한 모션 캡쳐 공간.jpg" alt="프라이빗 모션캡쳐 존" class="studio-img-thumb">
+                    <div class="studio-img-caption">프라이빗 모션캡쳐 존</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/오퍼레이팅 공간 강조.jpg" alt="오퍼레이팅/컨트롤룸" class="studio-img-thumb">
+                    <div class="studio-img-caption">오퍼레이팅/컨트롤룸</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/커튼을 친 외부 전경.jpg" alt="외부 전경(커튼 오픈)" class="studio-img-thumb">
+                    <div class="studio-img-caption">외부 전경(커튼 오픈)</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/스튜디오와 연결된 파우더룸.jpg" alt="파우더룸(스튜디오 연결)" class="studio-img-thumb">
+                    <div class="studio-img-caption">파우더룸(스튜디오 연결)</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/탈의실 내부 공간.jpg" alt="탈의실(내부)" class="studio-img-thumb">
+                    <div class="studio-img-caption">탈의실(내부)</div>
+                </div>
+                <div class="studio-img-card">
+                    <img src="Studio_Image/탈의실 외부 공간.jpg" alt="탈의실(외부)" class="studio-img-thumb">
+                    <div class="studio-img-caption">탈의실(외부)</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <style>
+    .studio-img-card {
+        background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.06);padding:1rem;display:flex;flex-direction:column;align-items:center;
+    }
+    .studio-img-thumb {
+        width:100%;border-radius:10px;object-fit:cover;max-height:220px;cursor:pointer;transition:box-shadow 0.2s;
+    }
+    .studio-img-thumb:hover {
+        box-shadow:0 4px 24px rgba(0,0,0,0.18);
+    }
+    .studio-img-caption {
+        margin-top:0.7rem;font-weight:600;color:#222;font-size:1.05rem;text-align:center;
+    }
+    /* 라이트박스 스타일 */
+    .lightbox-bg {
+        position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s;
+    }
+    .lightbox-img {
+        max-width:90vw;max-height:80vh;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.25);
+    }
+    .lightbox-close {
+        position:absolute;top:3vh;right:5vw;font-size:2.5rem;color:#fff;cursor:pointer;font-weight:700;z-index:10000;
+    }
+    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+    </style>
+    <script>
+    // 라이트박스 기능
+    document.addEventListener('DOMContentLoaded', function() {
+        document.querySelectorAll('.studio-img-thumb').forEach(function(img) {
+            img.addEventListener('click', function() {
+                const src = img.getAttribute('src');
+                const alt = img.getAttribute('alt');
+                const lightboxBg = document.createElement('div');
+                lightboxBg.className = 'lightbox-bg';
+                lightboxBg.innerHTML = `<span class='lightbox-close'>&times;</span><img src='${src}' alt='${alt}' class='lightbox-img'>`;
+                document.body.appendChild(lightboxBg);
+                lightboxBg.querySelector('.lightbox-close').onclick = () => lightboxBg.remove();
+                lightboxBg.onclick = (e) => { if(e.target === lightboxBg) lightboxBg.remove(); };
+            });
+        });
+    });
+    </script>
+
     <!-- Contact -->
     <section id="contact" class="section">
         <div class="container">