release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)

2026-08-23 23:17:55 +09:00 · 2026-08-23 23:17:55 +09:00 · 225c1d9f42
commit 225c1d9f42
parent e26b00a825
75 changed files with 7406 additions and 224 deletions
--- a/apps/site/public/work/materia-interior/assets/hannam-01-living-void.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-01-living-void.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-02-blueprint.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-02-blueprint.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-03-dining.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-03-dining.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-04-kitchen.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-04-kitchen.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-05-master-bedroom.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-05-master-bedroom.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-06-spa-bathroom.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-06-spa-bathroom.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-07-library-audio.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-07-library-audio.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-08-terrace.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-08-terrace.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-09-foyer.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-09-foyer.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-10-staircase.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-10-staircase.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-11-dressing-room.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-11-dressing-room.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-12-wine-cellar.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-12-wine-cellar.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-13-powder-room.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-13-powder-room.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-14-guest-suite.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-14-guest-suite.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-15-mat-travertine.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-15-mat-travertine.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-16-mat-bogoak.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-16-mat-bogoak.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-17-mat-linen.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-17-mat-linen.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-18-mat-bronze.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-18-mat-bronze.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-19-joinery.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-19-joinery.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-20-tea-room.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-20-tea-room.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-21-art-niche.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-21-art-niche.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-22-lightwell.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-22-lightwell.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-23-light-simulation.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-23-light-simulation.webp
--- a/apps/site/public/work/materia-interior/assets/hannam-24-timber-joinery.webp
+++ b/apps/site/public/work/materia-interior/assets/hannam-24-timber-joinery.webp
--- a/apps/site/public/work/materia-interior/assets/materials-macro.webp
+++ b/apps/site/public/work/materia-interior/assets/materials-macro.webp
--- a/apps/site/public/work/materia-interior/assets/penthouse-hero.webp
+++ b/apps/site/public/work/materia-interior/assets/penthouse-hero.webp
--- a/apps/site/public/work/materia-interior/hannam-duplex.html
+++ b/apps/site/public/work/materia-interior/hannam-duplex.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url=./projects/hannam-duplex/index.html" />
+    <title>한남 듀플렉스 펜트하우스 이동 중...</title>
+    <script>
+      window.location.replace("./projects/hannam-duplex/index.html");
+    </script>
+  </head>
+  <body style="background: #0d0d0f; color: #f4f4f0; font-family: sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0;">
+    <p>한남 듀플렉스 펜트하우스 갤러리로 이동 중입니다... <a href="./projects/hannam-duplex/index.html" style="color: #c49d68;">직접 이동하기</a></p>
+  </body>
+</html>
--- a/apps/site/public/work/materia-interior/index.html
+++ b/apps/site/public/work/materia-interior/index.html
@ -0,0 +1,430 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>마테리아 스튜디오 (MATERIA) · 하이엔드 주거 & 상업 공간 인테리어 건축</title>
+    <meta
+      name="description"
+      content="트래버틴 대리석, 훈증 오크, 벨기에 리넨의 촉각적 물성과 자연광의 궤적을 설계하는 하이엔드 인테리어 건축 아틀리에. 한남·청담 펜트하우스 및 프라이빗 갤러리 비스포크 설계."
+    />
+    <meta property="og:title" content="마테리아 스튜디오 (MATERIA) · 하이엔드 인테리어 건축" />
+    <meta property="og:description" content="빛과 트래버틴이 빚어내는 침묵의 공간 건축. 1:1 비스포크 공간 컨설팅." />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#f5f3ef" />
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=1" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F5F3EF'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%23161514' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%239E8062'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body data-ambiance="day">
+    <a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
+
+    <!-- 상단 헤더 & 조도 스위처 -->
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="./index.html">
+          MATERIA <span class="wordmark-han">空間素材</span>
+        </a>
+
+        <nav class="nav" aria-label="메인 메뉴">
+          <a href="./projects/hannam-duplex/index.html" style="color: var(--accent); font-weight: 600;">24개 공간 갤러리</a>
+          <a href="#works">엄선 프로젝트</a>
+          <a href="#materials">물성 아카이브</a>
+          <a href="#process">설계 프로세스</a>
+          <a href="#contact">프라이빗 상담</a>
+        </nav>
+
+        <div class="head-actions">
+          <div class="ambiance-switcher" role="group" aria-label="조도 모드 전환">
+            <button type="button" class="ambiance-btn is-active" id="btnAmbianceDay">
+              Day
+            </button>
+            <button type="button" class="ambiance-btn" id="btnAmbianceNight">
+              Night
+            </button>
+          </div>
+
+          <a href="#contact" class="btn">
+            상담 신청
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main id="mainContent">
+      <!-- 히어로 섹션 -->
+      <section class="hero-section" aria-labelledby="heroHeading">
+        <div class="wrap hero-grid">
+          <div class="hero-content">
+            <div class="eyebrow">
+              <span>HIGH-END ARCHITECTURAL INTERIOR</span>
+            </div>
+            <h1 id="heroHeading" class="hero-title">
+              빛과 트래버틴이 빚어내는<br />
+              침묵의 <span class="italic">공간 건축</span>
+            </h1>
+            <p class="hero-desc">
+              우리는 장식을 덧대지 않습니다. 돌의 거친 결, 훈증 오크의 온기, 리넨을 투과하는 자연광의 궤적을 치밀하게 계산하여 시간이 흘러도 변치 않는 하이엔드 주거와 갤러리 공간을 완성합니다.
+            </p>
+            <div class="hero-ctas">
+              <a href="./projects/hannam-duplex/index.html" class="btn-materia">
+                한남 펜트하우스 24개 공간 감상
+                <span aria-hidden="true">↗</span>
+              </a>
+              <a href="#materials" class="btn-materia" style="background: var(--surface-card); color: var(--ink); border: 1px solid var(--line);">
+                소재와 물성 탐색
+              </a>
+            </div>
+          </div>
+
+          <div class="hero-visual" style="position: relative;">
+            <div class="bezel-outer">
+              <div class="hero-frame">
+                <img
+                  src="./assets/penthouse-hero.webp"
+                  alt="트래버틴 벽체와 훈증 오크 수납장이 조화된 하이엔드 펜트하우스 거실 전경"
+                  width="1200"
+                  height="1600"
+                  loading="eager"
+                />
+              </div>
+            </div>
+            <div class="hero-caption-pill">
+              <div class="hero-caption-name">한남 펜트하우스 레지던스</div>
+              <div class="hero-caption-meta">Hannam · 284㎡ (86평) · 2026.04 준공</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 엄선 프로젝트 갤러리 (Selected Works) -->
+      <section class="works-section" id="works" aria-labelledby="worksHeading">
+        <div class="wrap">
+          <div class="section-head">
+            <h2 id="worksHeading" class="section-title">엄선된 하이엔드 공간 아카이브</h2>
+            <p class="section-sub">주거 펜트하우스부터 프라이빗 갤러리까지, 공간의 고유한 결을 살린 마테리아의 대표 프로젝트입니다.</p>
+          </div>
+
+          <div class="works-grid">
+            <!-- 프로젝트 1 -->
+            <article class="work-card">
+              <div class="work-card-media">
+                <img
+                  src="./assets/penthouse-hero.webp"
+                  alt="한남 듀플렉스 펜트하우스 거실 전경"
+                  width="600"
+                  height="400"
+                  loading="lazy"
+                />
+              </div>
+              <div class="work-card-body">
+                <h3 class="work-card-title">한남 듀플렉스 펜트하우스</h3>
+                <div class="work-card-type">Residential · 284㎡ · 로만 트래버틴 & 훈증 오크</div>
+                <p class="work-card-desc">
+                  층고 5.8m의 복층 구조에 거친 트래버틴 석재 벽체와 다크 훈증 오크를 대비시켜 웅장하면서도 고요한 빛의 음영을 연출했습니다.
+                </p>
+                <div class="work-card-actions">
+                  <a
+                    href="./projects/hannam-duplex/index.html"
+                    class="btn-materia"
+                  >
+                    24개 공간 갤러리 감상 ↗
+                  </a>
+                </div>
+              </div>
+            </article>
+
+            <!-- 프로젝트 2 -->
+            <article class="work-card">
+              <div class="work-card-media">
+                <img
+                  src="./assets/materials-macro.webp"
+                  alt="청담 프라이빗 갤러리 마감재 매크로"
+                  width="600"
+                  height="400"
+                  loading="lazy"
+                />
+              </div>
+              <div class="work-card-body">
+                <h3 class="work-card-title">청담 프라이빗 갤러리</h3>
+                <div class="work-card-type">Commercial / Gallery · 195㎡ · 마이크로토핑 & 브론즈</div>
+                <p class="work-card-desc">
+                  작품이 온전히 숨 쉴 수 있도록 모든 몰딩을 숨긴 무문선·무걸레받이 디테일과 브러시드 브론즈 프레임으로 정갈함을 극대화했습니다.
+                </p>
+                <div class="work-card-actions">
+                  <button
+                    type="button"
+                    class="btn-materia"
+                    onclick="openProjectModal('청담 프라이빗 갤러리', '195㎡ (59평)', '이탈리아 마이크로토핑 바닥재, 브러시드 파티나 브론즈, 무반사 저철분 유리', '색채를 배제한 무채색 베이스 위에 섬세한 텍스처를 레이어드하여 미술품의 몰입도를 극대화한 공간입니다.');"
+                  >
+                    설계 명세 보기 →
+                  </button>
+                </div>
+              </div>
+            </article>
+
+            <!-- 프로젝트 3 -->
+            <article class="work-card">
+              <div class="work-card-media">
+                <img
+                  src="./assets/hannam-08-terrace.webp"
+                  alt="성북동 포레스트 레지던스 자연석 테라스와 수림 차경"
+                  width="600"
+                  height="400"
+                  loading="lazy"
+                />
+              </div>
+              <div class="work-card-body">
+                <h3 class="work-card-title">성북동 포레스트 레지던스</h3>
+                <div class="work-card-type">Private Residence · 340㎡ · 자연석 화강석 & 벨기에 리넨</div>
+                <p class="work-card-desc">
+                  북악산 사계절의 숲 풍경을 차경(借景)으로 끌어들이고, 실내에는 자연석 아일랜드와 수공예 패브릭을 배치한 친환경 럭셔리 주거.
+                </p>
+                <div class="work-card-actions">
+                  <button
+                    type="button"
+                    class="btn-materia"
+                    onclick="openProjectModal('성북동 포레스트 레지던스', '340㎡ (103평)', '가평 통화강석 아일랜드, 스위스 비트라 가구 빌트인, 천연 회벽 마감', '산자락의 자연광과 계절의 변화를 고스란히 담아내는 차경 설계와 천연 자재의 숨결을 결합했습니다.');"
+                  >
+                    설계 명세 보기 →
+                  </button>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <!-- 머티리얼 보드 & 촉각성 (Tactile Materiality) -->
+      <section class="material-section" id="materials" aria-labelledby="matHeading">
+        <div class="wrap">
+          <div class="section-head">
+            <h2 id="matHeading" class="section-title">자연이 빚은 물성과 촉각의 조화</h2>
+            <p class="section-sub">마테리아가 선별한 최상급 건축 마감재는 인위적인 가공을 최소화하여 시간의 깊이를 머금습니다.</p>
+          </div>
+
+          <div class="material-grid">
+            <div class="material-frame">
+              <img
+                src="./assets/materials-macro.webp"
+                alt="트래버틴 대리석, 훈증 오크, 벨기에 리넨, 브론즈 머티리얼 플랫레이"
+                width="800"
+                height="600"
+                loading="lazy"
+              />
+            </div>
+
+            <div class="material-specs">
+              <div class="mat-item">
+                <span class="mat-name">로만 트래버틴</span>
+                <span class="mat-desc">이탈리아 티볼리 채석장의 천연 석회암. 무수한 다공성 질감이 빛을 부드럽게 난반사합니다.</span>
+              </div>
+              <div class="mat-item">
+                <span class="mat-name">훈증 오크 (Bog Oak)</span>
+                <span class="mat-desc">수백 년간 수중 숙성된 천연 고재의 깊은 탄화 흑색과 치밀한 나이테 결을 그대로 보존합니다.</span>
+              </div>
+              <div class="mat-item">
+                <span class="mat-name">벨기에 천연 리넨</span>
+                <span class="mat-desc">플랑드르 지방의 무표백 아마 섬유로 짠 고밀도 원단. 부드럽게 빛을 거르고 통기성을 제공합니다.</span>
+              </div>
+              <div class="mat-item">
+                <span class="mat-name">파티나 브론즈</span>
+                <span class="mat-desc">손길이 닿을수록 자연스러운 에이징 산화 피막이 형성되는 수공예 황동 하드웨어입니다.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 4단계 마스터 프로세스 -->
+      <section class="process-section" id="process" aria-labelledby="procHeading">
+        <div class="wrap">
+          <div class="section-head">
+            <h2 id="procHeading" class="section-title">비스포크 공간 건축 4단계 프로세스</h2>
+            <p class="section-sub">기획부터 완공 인도까지, 총괄 디렉터 1인이 모든 자재와 조도를 책임지고 총괄합니다.</p>
+          </div>
+
+          <div class="process-grid">
+            <div class="process-card">
+              <div class="process-step">PHASE 01</div>
+              <h3>일조 및 공간 진단</h3>
+              <p>현장의 24시간 태양 궤적, 조망 축, 구조 하중을 분석하여 채광의 최적 배치를 기획합니다.</p>
+            </div>
+            <div class="process-card">
+              <div class="process-step">PHASE 02</div>
+              <h3>촉각적 머티리얼 페어링</h3>
+              <p>실제 1:1 자재 샘플 보드를 제작하여 거주자의 라이프스타일과 촉감 선호도를 일치시킵니다.</p>
+            </div>
+            <div class="process-card">
+              <div class="process-step">PHASE 03</div>
+              <h3>3D 광학 시뮬레이션</h3>
+              <p>주광(Daylight)과 2700K 인공 조명의 조도 분포를 가상 렌더링으로 정밀 검증합니다.</p>
+            </div>
+            <div class="process-card">
+              <div class="process-step">PHASE 04</div>
+              <h3>장인 직영 디테일 시공</h3>
+              <p>30년 경력의 석재·목공 마스터 장인팀이 밀리미터 단위의 오차 없는 시공을 완성합니다.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 프라이빗 공간 컨설팅 신청 -->
+      <section class="contact-section" id="contact" aria-labelledby="contactHeading">
+        <div class="wrap">
+          <div class="contact-card">
+            <div style="text-align: center; margin-bottom: var(--space-6);">
+              <div class="eyebrow">BESPOKE CONSULTATION</div>
+              <h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
+                프라이빗 공간 컨설팅 신청
+              </h2>
+              <p style="font-size: var(--step-0); color: var(--ink-muted); margin-top: 6px;">
+                월 최대 3건의 프로젝트만을 엄선하여 타협 없는 완성도를 보증합니다.
+              </p>
+            </div>
+
+            <form id="consultForm" onsubmit="return false;">
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                <div class="form-group">
+                  <label class="form-label" for="spaceType">공간 유형</label>
+                  <select id="spaceType" class="form-select">
+                    <option>주거 펜트하우스 / 타운하우스</option>
+                    <option>단독주택 신축 / 대수선</option>
+                    <option>프라이빗 갤러리 / 플래그십</option>
+                    <option>하이엔드 오피스 라운지</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="spaceArea">예상 전용면적 (평형)</label>
+                  <input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" value="82평 (271㎡)" />
+                </div>
+              </div>
+
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+                <div class="form-group">
+                  <label class="form-label" for="clientName">성함</label>
+                  <input type="text" id="clientName" class="form-input" placeholder="성함" value="김민준" required />
+                </div>
+                <div class="form-group">
+                  <label class="form-label" for="clientPhone">연락처</label>
+                  <input type="tel" id="clientPhone" class="form-input" placeholder="010-0000-0000" value="010-5920-8812" required />
+                </div>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label" for="clientBudget">예상 공사 예산 범위</label>
+                <select id="clientBudget" class="form-select">
+                  <option>1억 5천만 원 ~ 3억 원</option>
+                  <option selected>3억 원 ~ 5억 원</option>
+                  <option>5억 원 이상 (풀 하이엔드 비스포크)</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label class="form-label" for="clientNote">공간에 바라는 철학 및 특별 요청사항</label>
+                <textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요.">거실에 웅장한 트래버틴 벽체와 자연스러운 간접 조명을 조성하고 싶습니다. 2026년 10월 착공 희망합니다.</textarea>
+              </div>
+
+              <button type="button" class="btn-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
+                프라이빗 디자인 상담 신청 완료
+              </button>
+            </form>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- 프로젝트 상세 모달 다이얼로그 -->
+    <dialog id="projectModal" class="project-dialog" aria-labelledby="pModalTitle">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem;">
+        <h3 id="pModalTitle" style="font-family: var(--font-serif); font-size: var(--step-1); color: var(--ink);">
+          프로젝트 설계 아카이브
+        </h3>
+        <button type="button" onclick="document.getElementById('projectModal').close();" aria-label="닫기" style="font-size: 18px; font-weight: 700; color: var(--ink-muted);">✕</button>
+      </div>
+      <div style="display: grid; gap: 0.85rem; font-size: var(--step--1); line-height: 1.6;">
+        <div><strong>프로젝트명:</strong> <span id="mProjName" style="color:var(--accent); font-weight:700;"></span></div>
+        <div><strong>공간 면적:</strong> <span id="mProjArea" class="mono"></span></div>
+        <div><strong>주요 마감재:</strong> <span id="mProjMaterials"></span></div>
+        <div style="margin-top: 4px; padding: 12px; background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--line);">
+          <strong>설계 의도:</strong><br />
+          <span id="mProjNotes" style="color:var(--ink-muted);"></span>
+        </div>
+      </div>
+      <div style="margin-top: 1.5rem; text-align: right;">
+        <button type="button" class="btn-materia" style="padding: 6px 20px; font-size: 13px;" onclick="document.getElementById('projectModal').close();">닫기</button>
+      </div>
+    </dialog>
+
+    <!-- 푸터 (.site-foot SSOT) -->
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>마테리아 스튜디오 · 서울 강남구 압구정로 72길 14</p>
+        <p class="muted">월요일부터 금요일까지 (사전 예약제)</p>
+        <p class="muted">studio@materia.kr</p>
+      </div>
+    </footer>
+
+    <!-- 인터랙티브 스크립트 -->
+    <script>
+      (function () {
+        // 1. 조도 앰비언스 모드 스위처 (자연광 Day vs 야간 Night)
+        const btnDay = document.getElementById("btnAmbianceDay");
+        const btnNight = document.getElementById("btnAmbianceNight");
+
+        function setAmbiance(mode) {
+          document.body.setAttribute("data-ambiance", mode);
+          if (mode === "night") {
+            btnNight.classList.add("is-active");
+            btnDay.classList.remove("is-active");
+          } else {
+            btnDay.classList.add("is-active");
+            btnNight.classList.remove("is-active");
+          }
+        }
+
+        btnDay.addEventListener("click", () => setAmbiance("day"));
+        btnNight.addEventListener("click", () => setAmbiance("night"));
+
+        // 2. 상담 신청 폼
+        const btnConsult = document.getElementById("btnSubmitConsult");
+        if (btnConsult) {
+          btnConsult.addEventListener("click", () => {
+            const name = document.getElementById("clientName").value || "고객님";
+            const spaceType = document.getElementById("spaceType").value;
+            const area = document.getElementById("spaceArea").value;
+            alert(`[마테리아 스튜디오] ${name}님의 프라이빗 공간 컨설팅 신청(${spaceType} / ${area})이 접수되었습니다.\n담당 수석 디렉터가 24시간 이내에 포트폴리오 자료와 함께 직접 연락드리겠습니다.`);
+          });
+        }
+      })();
+
+      // 프로젝트 모달 팝업 함수
+      function openProjectModal(name, area, materials, notes) {
+        document.getElementById("mProjName").textContent = name;
+        document.getElementById("mProjArea").textContent = area;
+        document.getElementById("mProjMaterials").textContent = materials;
+        document.getElementById("mProjNotes").textContent = notes;
+        document.getElementById("projectModal").showModal();
+      }
+    </script>
+  </body>
+</html>
--- a/apps/site/public/work/materia-interior/projects/hannam-duplex/index.html
+++ b/apps/site/public/work/materia-interior/projects/hannam-duplex/index.html
@ -0,0 +1,952 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>한남 듀플렉스 펜트하우스 (86평) — MATERIA Project Archive</title>
+    <meta name="description" content="마테리아 스튜디오의 한남 듀플렉스 펜트하우스 86평 프로젝트 아카이브. 5.8m 보이드 천장고, 로만 트래버틴과 3,000년 훈증 오크, 자연광 조도 시뮬레이션 및 24개 공간 갤러리." />
+    
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
+    />
+    <link rel="stylesheet" href="../../styles/tokens.css" />
+    <link rel="stylesheet" href="../../styles/main.css" />
+    <style>
+      /* Detail Page Specific Styles */
+      .breadcrumb-bar {
+        padding-top: var(--space-4);
+        padding-bottom: var(--space-3);
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+        font-family: var(--font-mono);
+        font-size: var(--step--1);
+        color: var(--ink-muted);
+        border-bottom: 1px solid var(--line);
+      }
+      .breadcrumb-bar a {
+        color: var(--ink-muted);
+        text-decoration: none;
+        transition: color 0.15s ease;
+      }
+      .breadcrumb-bar a:hover {
+        color: var(--accent);
+      }
+      .breadcrumb-bar .sep {
+        opacity: 0.4;
+      }
+      .breadcrumb-bar .current {
+        color: var(--ink);
+        font-weight: 600;
+      }
+
+      .project-hero-section {
+        padding-block: var(--space-4) var(--space-7);
+        border-bottom: 1px solid var(--line);
+      }
+      .project-hero-head {
+        padding-top: var(--space-5);
+        margin-bottom: var(--space-6);
+      }
+      .project-hero-title {
+        font-family: var(--font-serif);
+        font-size: var(--step-3);
+        font-weight: 700;
+        line-height: var(--leading-tight);
+        letter-spacing: -0.01em;
+        color: var(--ink);
+        margin-bottom: var(--space-4);
+        word-break: keep-all;
+      }
+      .project-hero-title .hero-sub {
+        display: block;
+        font-family: var(--font-serif);
+        font-size: var(--step-1);
+        font-weight: 400;
+        color: var(--ink-muted);
+        margin-top: var(--space-2);
+        line-height: 1.5;
+      }
+      .project-meta-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+        gap: var(--space-3);
+        margin-top: var(--space-5);
+        background: var(--surface-card);
+        border: 1px solid var(--line);
+        border-radius: var(--radius-sm);
+        padding: var(--space-4) var(--space-5);
+      }
+      .meta-item {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .meta-item .label {
+        font-family: var(--font-mono);
+        font-size: var(--step--1);
+        color: var(--ink-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .meta-item .value {
+        font-size: var(--step-0);
+        font-weight: 700;
+        color: var(--ink);
+      }
+
+      .project-hero-media {
+        position: relative;
+        margin-top: var(--space-6);
+      }
+      .hero-frame {
+        border-radius: calc(var(--radius-md) - 6px);
+        overflow: hidden;
+        background: var(--surface-subtle);
+      }
+      .hero-frame img {
+        width: 100%;
+        height: auto;
+        display: block;
+        aspect-ratio: 16 / 9;
+        object-fit: cover;
+      }
+      .hero-caption-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-3);
+        margin-top: var(--space-3);
+        padding: 6px 14px;
+        background: var(--surface-card);
+        border: 1px solid var(--line);
+        border-radius: var(--radius-pill);
+        font-size: var(--step--1);
+      }
+      .hero-caption-name {
+        font-weight: 600;
+        color: var(--ink);
+      }
+      .hero-caption-meta {
+        color: var(--accent);
+      }
+
+      .narrative-section {
+        padding-block: var(--space-7);
+        border-bottom: 1px solid var(--line);
+      }
+      .narrative-grid {
+        display: grid;
+        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+        gap: var(--space-7);
+        align-items: start;
+      }
+      @media (max-width: 900px) {
+        .narrative-grid {
+          grid-template-columns: 1fr;
+          gap: var(--space-4);
+        }
+      }
+      .narrative-text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        color: var(--ink-muted);
+        line-height: var(--leading-normal);
+        font-size: var(--step-0);
+      }
+
+      /* Gallery Architecture */
+      .gallery-section {
+        padding-block: var(--space-7) var(--space-8);
+      }
+      .gallery-head {
+        margin-bottom: var(--space-6);
+      }
+      .gallery-filter-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+        margin-bottom: var(--space-5);
+      }
+      .gallery-chip {
+        font-family: var(--font-mono);
+        font-size: var(--step--1);
+        padding: 8px 16px;
+        border-radius: var(--radius-xs);
+        border: 1px solid var(--line);
+        background: var(--surface);
+        color: var(--ink-muted);
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+      .gallery-chip:hover {
+        border-color: var(--accent);
+        color: var(--ink);
+      }
+      .gallery-chip.active {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #ffffff;
+        font-weight: 600;
+      }
+
+      .spatial-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+        gap: var(--space-4);
+      }
+      @media (min-width: 1200px) {
+        .spatial-grid {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+
+      .gallery-card {
+        background: var(--surface);
+        border: 1px solid var(--line);
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        cursor: pointer;
+        position: relative;
+      }
+      .gallery-card:hover {
+        transform: translateY(-3px);
+        border-color: var(--accent);
+        box-shadow: 0 12px 28px rgba(0,0,0,0.06);
+      }
+      .gallery-card-img-wrap {
+        aspect-ratio: 16 / 10;
+        position: relative;
+        overflow: hidden;
+        background: var(--surface-sunken);
+      }
+      .gallery-card img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.4s ease;
+      }
+      .gallery-card:hover img {
+        transform: scale(1.03);
+      }
+      .gallery-card-body {
+        padding: var(--space-4);
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        flex-grow: 1;
+      }
+      .gallery-card-zone {
+        font-family: var(--font-mono);
+        font-size: 11px;
+        color: var(--accent);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .gallery-card-title {
+        font-family: var(--font-serif);
+        font-size: var(--step-0);
+        font-weight: 700;
+        color: var(--ink);
+      }
+      .gallery-card-desc {
+        font-size: var(--step--1);
+        color: var(--ink-muted);
+        line-height: 1.5;
+      }
+
+      /* Lightbox Dialog */
+      .lightbox-dialog {
+        background: rgba(14, 14, 16, 0.96);
+        color: #ffffff;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: var(--radius-sm);
+        max-width: 1200px;
+        width: 95vw;
+        max-height: 92dvh;
+        padding: 0;
+        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
+      }
+      .lightbox-dialog::backdrop {
+        background: rgba(0, 0, 0, 0.85);
+        backdrop-filter: blur(8px);
+      }
+      .lightbox-layout {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 900px) {
+        .lightbox-layout {
+          grid-template-columns: 1.8fr 1fr;
+        }
+      }
+      .lightbox-media {
+        background: #000000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-4);
+        max-height: 80vh;
+      }
+      .lightbox-media img {
+        max-width: 100%;
+        max-height: 75vh;
+        object-fit: contain;
+        border-radius: var(--radius-xs);
+      }
+      .lightbox-info {
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: var(--space-4);
+        overflow-y: auto;
+      }
+
+      /* Blueprint interactive section */
+      .blueprint-section {
+        background: var(--surface-sunken);
+        border-top: 1px solid var(--line);
+        border-bottom: 1px solid var(--line);
+        padding: var(--space-7) 0;
+      }
+      .blueprint-viewer {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: var(--space-6);
+        align-items: center;
+      }
+      @media (min-width: 960px) {
+        .blueprint-viewer {
+          grid-template-columns: 1.4fr 1fr;
+        }
+      }
+      .blueprint-frame {
+        border: 1px solid var(--line);
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+        background: #ECE7DE;
+        box-shadow: 0 16px 36px rgba(0,0,0,0.06);
+      }
+      .blueprint-frame img {
+        width: 100%;
+        display: block;
+      }
+    </style>
+  </head>
+  <body data-ambiance="day">
+    <!-- 상단 헤더 (.site-head SSOT) -->
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a href="../../index.html" class="wordmark" aria-label="MATERIA 홈">
+          MATERIA <span class="wordmark-han">空間素材</span>
+        </a>
+        <nav class="nav" aria-label="주요 메뉴">
+          <a href="./index.html" class="active" style="color: var(--accent); font-weight: 600;">24개 공간 갤러리</a>
+          <a href="../../index.html#works">엄선 프로젝트</a>
+          <a href="../../index.html#materials">물성 아카이브</a>
+          <a href="../../index.html#process">설계 프로세스</a>
+          <a href="../../index.html#contact">프라이빗 상담</a>
+        </nav>
+        <div class="head-actions">
+          <div class="ambiance-switcher" role="group" aria-label="공간 조도 앰비언스 모드">
+            <button type="button" class="ambiance-btn is-active" id="btnAmbianceDay">Day</button>
+            <button type="button" class="ambiance-btn" id="btnAmbianceNight">Night</button>
+          </div>
+          <a href="../../index.html#contact" class="btn">
+            상담 신청
+          </a>
+        </div>
+      </div>
+    </header>
+
+    <main id="main-content">
+      <!-- Project Hero Section -->
+      <section class="section project-hero" style="border-top: none; padding-top: var(--space-5);">
+        <div class="wrap">
+          <div class="breadcrumb-bar" style="margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em;">
+            <a href="../../index.html">MATERIA</a>
+            <span class="sep">/</span>
+            <a href="../../index.html#works">PROJECT ARCHIVE</a>
+            <span class="sep">/</span>
+            <span class="current" style="color: var(--ink); font-weight: 600;">HANNAM DUPLEX PENTHOUSE (86PY)</span>
+          </div>
+
+          <div class="project-hero-head">
+            <p class="hero-label">CASE STUDY · RESIDENTIAL ARCHITECTURE · 86PY</p>
+            <h1 class="hero-title" style="margin-bottom: var(--space-2);">한남 듀플렉스 펜트하우스</h1>
+            <p class="hero-lead" style="font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-5);">
+              5.8m 보이드 천장고와 로만 트래버틴, 3,000년 훈증 오크가 빚어낸 침묵의 공간.
+            </p>
+
+            <dl class="project-specs" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);">
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">위치</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">서울시 용산구 한남동</dd>
+              </div>
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">면적</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">284㎡ (86평형 복층)</dd>
+              </div>
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">천장고</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">5.8m Void Ceiling</dd>
+              </div>
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">공사기간</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">14주 (2026.04 준공)</dd>
+              </div>
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">핵심 소재</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Roman Navona Travertine</dd>
+              </div>
+              <div>
+                <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">목공 마감</dt>
+                <dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">3,000Y Smoked Bog Oak</dd>
+              </div>
+            </dl>
+          </div>
+
+          <!-- Hero Image in Frame -->
+          <figure class="hero-photo" style="border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-card);">
+            <img
+              src="../../assets/hannam-01-living-void.webp"
+              alt="한남 듀플렉스 펜트하우스 5.8m 보이드 거실 전경과 트래버틴 벽체"
+              width="1600"
+              height="900"
+              style="width: 100%; aspect-ratio: 16/9; object-fit: cover;"
+            />
+            <figcaption style="padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-raised);">
+              Zone A · 5.8m 보이드 거실 &amp; 20mm 로만 나보나 트래버틴 아트월
+            </figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!-- Architectural Narrative Section -->
+      <section class="narrative-section">
+        <div class="wrap">
+          <div class="narrative-grid">
+            <div>
+              <div class="eyebrow">DESIGN PHILOSOPHY</div>
+              <h2 class="section-title" style="font-family: var(--font-serif); font-size: var(--step-2); font-weight: 700; line-height: 1.25;">
+                비움으로 완성한<br />빛과 물성의 교감
+              </h2>
+            </div>
+            <div class="narrative-text">
+              <p>
+                한남 듀플렉스 펜트하우스는 장식적 기교를 배제하고, 자연광의 궤적과 거대한 석재의 물성이 공간의 주인이 되도록 설계된 프로젝트입니다.
+                남향으로 열린 한강 조망과 5.8미터 복층 보이드 구조를 관통하는 자연광을 수학적으로 계산하여, 시간에 따라 석재 표면의 음영이 시시각각 변화하도록 유도했습니다.
+              </p>
+              <p>
+                벽체를 감싸는 20mm 로만 나보나 트래버틴은 이탈리아 티볼리 채석장에서 원판을 엄선하여 이음매의 결을 무지향성으로 연결했으며,
+                3,000년 세월 동안 탄화된 훈증 오크(Bog Oak)와 수공예 파티나 브론즈를 접합하여 시각적 깊이와 촉각적 정숙함을 부여했습니다.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Interactive 24-Piece Spatial Gallery Architecture -->
+      <section class="gallery-section" id="spatial-gallery">
+        <div class="wrap">
+          <div class="gallery-head">
+            <div class="eyebrow">SPATIAL EXPLORATION · 24 SHOTS</div>
+            <h2 class="section-title" style="font-family: var(--font-serif); font-size: var(--step-2); font-weight: 700;">공간별 심층 아카이브 갤러리</h2>
+            <p class="section-sub" style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 4px;">
+              각 카드를 클릭하시면 고해상도 확대 뷰어와 설계 물성 상세 명세를 확인하실 수 있습니다.
+            </p>
+          </div>
+
+        <!-- Zone Filters -->
+        <div class="gallery-filter-chips" role="tablist" aria-label="공간 존별 필터">
+          <button type="button" class="gallery-chip active" data-zone="all">전체 공간 (24)</button>
+          <button type="button" class="gallery-chip" data-zone="living">Zone A: 거실 & 다이닝 (4)</button>
+          <button type="button" class="gallery-chip" data-zone="master">Zone B: 마스터 스위트 & 스파 (4)</button>
+          <button type="button" class="gallery-chip" data-zone="study">Zone C: 서재 & 와인 & 드레스룸 (4)</button>
+          <button type="button" class="gallery-chip" data-zone="garden">Zone D: 테라스 & 중정 & 현관 (4)</button>
+          <button type="button" class="gallery-chip" data-zone="materials">Zone E: 물성 매크로 접사 (4)</button>
+          <button type="button" class="gallery-chip" data-zone="analysis">Zone F: 도면 & 광학 분석 & 디테일 (4)</button>
+        </div>
+
+        <!-- 24 Gallery Cards Grid -->
+        <div class="spatial-grid" id="spatialGrid">
+          <!-- Card 1 -->
+          <div class="gallery-card" data-zone="living" onclick="openLightbox(0)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-01-living-void.webp" alt="5.8m 보이드 거실" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone A · Living</span>
+              <h3 class="gallery-card-title">5.8m 보이드 그레이트 룸</h3>
+              <p class="gallery-card-desc">로만 트래버틴 일체형 벽난로와 2개 층을 관통하는 통창 채광 설계.</p>
+            </div>
+          </div>
+
+          <!-- Card 2 -->
+          <div class="gallery-card" data-zone="living" onclick="openLightbox(1)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-03-dining.webp" alt="다이닝 룸" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone A · Dining</span>
+              <h3 class="gallery-card-title">월넛 원목 슬랩 다이닝</h3>
+              <p class="gallery-card-desc">수제 브러시드 브론즈 펜던트 조명과 한강 파노라마 야경 조망.</p>
+            </div>
+          </div>
+
+          <!-- Card 3 -->
+          <div class="gallery-card" data-zone="living" onclick="openLightbox(2)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-04-kitchen.webp" alt="셰프 키친 아일랜드" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone A · Kitchen</span>
+              <h3 class="gallery-card-title">석재 통판 셰프 키친</h3>
+              <p class="gallery-card-desc">그레이 쿼츠자이트 아일랜드와 히든 플러시 훈증 오크 수납 시스템.</p>
+            </div>
+          </div>
+
+          <!-- Card 4 -->
+          <div class="gallery-card" data-zone="living" onclick="openLightbox(3)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-10-staircase.webp" alt="부유형 캔틸레버 계단" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone A · Staircase</span>
+              <h3 class="gallery-card-title">캔틸레버 부유식 오크 계단</h3>
+              <p class="gallery-card-desc">트래버틴 벽체에서 돌출된 무지주 솔리드 오크 디딤판과 매립 핸드레일.</p>
+            </div>
+          </div>
+
+          <!-- Card 5 -->
+          <div class="gallery-card" data-zone="master" onclick="openLightbox(4)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-05-master-bedroom.webp" alt="마스터 침실" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone B · Master Suite</span>
+              <h3 class="gallery-card-title">마스터 베드룸 스위트</h3>
+              <p class="gallery-card-desc">천연 리넨 헤드보드 월과 간접 라인 조명으로 완성한 정숙한 침실.</p>
+            </div>
+          </div>
+
+          <!-- Card 6 -->
+          <div class="gallery-card" data-zone="master" onclick="openLightbox(5)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-06-spa-bathroom.webp" alt="스파 욕실" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone B · Spa Bath</span>
+              <h3 class="gallery-card-title">화산석 통원석 스파 배스</h3>
+              <p class="gallery-card-desc">자연석을 통째로 깎아낸 원석 욕조와 독립형 파티나 브론즈 수전.</p>
+            </div>
+          </div>
+
+          <!-- Card 7 -->
+          <div class="gallery-card" data-zone="master" onclick="openLightbox(6)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-13-powder-room.webp" alt="파우더룸" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone B · Powder Room</span>
+              <h3 class="gallery-card-title">석재 세면대 파우더룸</h3>
+              <p class="gallery-card-desc">조각적인 통라임스톤 세면대와 수직 슬릿 조명이 빚은 명암.</p>
+            </div>
+          </div>
+
+          <!-- Card 8 -->
+          <div class="gallery-card" data-zone="master" onclick="openLightbox(7)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-14-guest-suite.webp" alt="게스트 침실" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone B · Guest Suite</span>
+              <h3 class="gallery-card-title">게스트 침실 스위트</h3>
+              <p class="gallery-card-desc">따뜻한 라임워시 도장 벽체와 천연 원목 가구의 안락한 조화.</p>
+            </div>
+          </div>
+
+          <!-- Card 9 -->
+          <div class="gallery-card" data-zone="study" onclick="openLightbox(8)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-07-library-audio.webp" alt="서재 및 오디오 룸" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone C · Library</span>
+              <h3 class="gallery-card-title">서재 & 하이파이 오디오 룸</h3>
+              <p class="gallery-card-desc">음향 반사를 고려한 훈증 오크 책장과 아날로그 턴테이블 석재 콘솔.</p>
+            </div>
+          </div>
+
+          <!-- Card 10 -->
+          <div class="gallery-card" data-zone="study" onclick="openLightbox(9)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-11-dressing-room.webp" alt="드레스룸" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone C · Dressing Room</span>
+              <h3 class="gallery-card-title">비스포크 워크인 드레스룸</h3>
+              <p class="gallery-card-desc">플루티드 브론즈 유리장과 시계/주얼리 수납 아일랜드 쇼케이스.</p>
+            </div>
+          </div>
+
+          <!-- Card 11 -->
+          <div class="gallery-card" data-zone="study" onclick="openLightbox(10)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-12-wine-cellar.webp" alt="와인 셀러 룸" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone C · Wine Cellar</span>
+              <h3 class="gallery-card-title">항온항습 글래스 와인 셀러</h3>
+              <p class="gallery-card-desc">백라이트 트래버틴 벽체와 브론즈 프레임 유리 파티션 셀러.</p>
+            </div>
+          </div>
+
+          <!-- Card 12 -->
+          <div class="gallery-card" data-zone="study" onclick="openLightbox(11)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-20-tea-room.webp" alt="티 룸 알코브" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone C · Tea Alcove</span>
+              <h3 class="gallery-card-title">명상 다도실 (Tea Room)</h3>
+              <p class="gallery-card-desc">천연 한지 스크린을 투과하는 부드러운 격자 채광과 원목 다도상.</p>
+            </div>
+          </div>
+
+          <!-- Card 13 -->
+          <div class="gallery-card" data-zone="garden" onclick="openLightbox(12)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-08-terrace.webp" alt="프라이빗 테라스" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone D · Terrace</span>
+              <h3 class="gallery-card-title">루프탑 프라이빗 테라스</h3>
+              <p class="gallery-card-desc">대형 트래버틴 페이버와 조형 소나무 분재, 한강 석양 조망.</p>
+            </div>
+          </div>
+
+          <!-- Card 14 -->
+          <div class="gallery-card" data-zone="garden" onclick="openLightbox(13)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-09-foyer.webp" alt="입구 현관 전경" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone D · Entrance</span>
+              <h3 class="gallery-card-title">미니멀 입구 현관 (Foyer)</h3>
+              <p class="gallery-card-desc">거대한 화강석 벤치 원석과 플러시 히든 피벗 도어 시스템.</p>
+            </div>
+          </div>
+
+          <!-- Card 15 -->
+          <div class="gallery-card" data-zone="garden" onclick="openLightbox(14)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-22-lightwell.webp" alt="실내 석경 중정" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone D · Lightwell</span>
+              <h3 class="gallery-card-title">실내 석경 중정 (Zen Lightwell)</h3>
+              <p class="gallery-card-desc">천장 보이드에서 쏟아지는 수직 채광과 백자갈 디딤돌 정원.</p>
+            </div>
+          </div>
+
+          <!-- Card 16 -->
+          <div class="gallery-card" data-zone="garden" onclick="openLightbox(15)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-21-art-niche.webp" alt="갤러리 아트 니치" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone D · Art Niche</span>
+              <h3 class="gallery-card-title">뮤지엄 갤러리 아트 니치</h3>
+              <p class="gallery-card-desc">트래버틴 조각 좌대와 정밀 프레이밍 조명으로 연출된 조각품.</p>
+            </div>
+          </div>
+
+          <!-- Card 17 -->
+          <div class="gallery-card" data-zone="materials" onclick="openLightbox(16)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-15-mat-travertine.webp" alt="로만 트래버틴 매크로" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone E · Material</span>
+              <h3 class="gallery-card-title">로만 나보나 트래버틴 접사</h3>
+              <p class="gallery-card-desc">자연이 형성한 미세한 다공성 기공과 따뜻한 꿀빛 석재 층위.</p>
+            </div>
+          </div>
+
+          <!-- Card 18 -->
+          <div class="gallery-card" data-zone="materials" onclick="openLightbox(17)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-16-mat-bogoak.webp" alt="3000년 훈증 오크 매크로" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone E · Material</span>
+              <h3 class="gallery-card-title">3,000년 탄화 훈증 오크</h3>
+              <p class="gallery-card-desc">시간이 빚어낸 깊은 차콜 에스프레소 나뭇결과 실키 매트 피니시.</p>
+            </div>
+          </div>
+
+          <!-- Card 19 -->
+          <div class="gallery-card" data-zone="materials" onclick="openLightbox(18)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-17-mat-linen.webp" alt="벨기에 리넨 매크로" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone E · Material</span>
+              <h3 class="gallery-card-title">벨기에 무표백 천연 리넨</h3>
+              <p class="gallery-card-desc">불규칙한 천연 실타래 슬럽 조직이 주는 촉각적 안도감과 빛 흡수력.</p>
+            </div>
+          </div>
+
+          <!-- Card 20 -->
+          <div class="gallery-card" data-zone="materials" onclick="openLightbox(19)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-18-mat-bronze.webp" alt="파티나 브론즈 매크로" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone E · Material</span>
+              <h3 class="gallery-card-title">수공예 파티나 브러시드 브론즈</h3>
+              <p class="gallery-card-desc">손길이 닿을수록 깊어지는 유기적 산화 피막의 은은한 광채.</p>
+            </div>
+          </div>
+
+          <!-- Card 21 -->
+          <div class="gallery-card" data-zone="analysis" onclick="openLightbox(20)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-02-blueprint.webp" alt="건축 평면 설계도면" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone F · Blueprint</span>
+              <h3 class="gallery-card-title">86평 복층 건축 평면 설계도</h3>
+              <p class="gallery-card-desc">동선 효율과 채광축을 정밀하게 구획한 마스터 아키텍처 드래프트.</p>
+            </div>
+          </div>
+
+          <!-- Card 22 -->
+          <div class="gallery-card" data-zone="analysis" onclick="openLightbox(21)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-23-light-simulation.webp" alt="3D 일조 광학 시뮬레이션" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone F · Analysis</span>
+              <h3 class="gallery-card-title">3D 태양광 입사 조도 분석</h3>
+              <p class="gallery-card-desc">하지 및 춘분 정오 55° 고도각에 따른 Lux 분포 및 음영 계산도.</p>
+            </div>
+          </div>
+
+          <!-- Card 23 -->
+          <div class="gallery-card" data-zone="analysis" onclick="openLightbox(22)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-19-joinery.webp" alt="5mm 섀도우 갭 조인트" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone F · Detail</span>
+              <h3 class="gallery-card-title">5mm 음각 섀도우 갭 조인트</h3>
+              <p class="gallery-card-desc">석재와 원목 패널 사이의 0.5mm 오차 없는 스위스 규격 결합부.</p>
+            </div>
+          </div>
+
+          <!-- Card 24 -->
+          <div class="gallery-card" data-zone="analysis" onclick="openLightbox(23)">
+            <div class="gallery-card-img-wrap">
+              <img src="../../assets/hannam-24-timber-joinery.webp" alt="장인 장부 맞춤 목공" loading="lazy" />
+            </div>
+            <div class="gallery-card-body">
+              <span class="gallery-card-zone">Zone F · Detail</span>
+              <h3 class="gallery-card-title">전통 장부 맞춤 마스터 목공</h3>
+              <p class="gallery-card-desc">못 없이 체결되는 장인 직영 정밀 결구 구조의 하드웨어.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+      <!-- Interactive Blueprint & Spec Analysis Viewer -->
+      <section class="blueprint-section">
+        <div class="wrap">
+          <div class="blueprint-viewer">
+            <div class="blueprint-frame">
+              <img src="../../assets/hannam-02-blueprint.webp" alt="한남 듀플렉스 펜트하우스 평면도" />
+            </div>
+            <div style="display: flex; flex-direction: column; gap: var(--space-4);">
+              <div class="eyebrow" style="color: var(--accent);">TECHNICAL SPECIFICATION</div>
+              <h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
+                수치로 입증하는<br />하이엔드 시공 규격
+              </h2>
+              <div style="display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--step--1);">
+                <div style="padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);">
+                  <strong style="color: var(--ink);">단차 허용 공차</strong>: 0.3mm 이내 (레이저 레벨링 및 통석재 현장 가공)
+                </div>
+                <div style="padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);">
+                  <strong style="color: var(--ink);">조명 색온도 제어</strong>: 2200K (석양 캔들) ~ 5500K (자연 주광) DALI 스마트 디밍
+                </div>
+                <div style="padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);">
+                  <strong style="color: var(--ink);">공조 매립 규격</strong>: 무몰딩 트림리스 선형 디퓨저 & 히든 점검구 100% 설계
+                </div>
+              </div>
+              <a href="../../index.html#consultation" class="btn-primary" style="display: inline-block; text-align: center; text-decoration: none; margin-top: var(--space-2);">
+                이 프로젝트 스타일로 상담 신청하기 →
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <!-- Fullscreen Lightbox Modal Dialog -->
+    <dialog id="lightboxDialog" class="lightbox-dialog">
+      <div class="lightbox-layout">
+        <div class="lightbox-media">
+          <img id="lightboxImg" src="../../assets/hannam-01-living-void.webp" alt="확대 이미지" />
+        </div>
+        <div class="lightbox-info">
+          <div>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3);">
+              <span id="lightboxZone" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase;"></span>
+              <button type="button" onclick="document.getElementById('lightboxDialog').close();" aria-label="닫기" style="background: none; border: none; color: #fff; font-size: 24px; cursor: pointer;">✕</button>
+            </div>
+            <h3 id="lightboxTitle" style="font-size: var(--step-1); font-weight: 700; margin-bottom: var(--space-2); color: #fff;"></h3>
+            <p id="lightboxDesc" style="font-size: var(--step--1); color: #a1a1aa; line-height: 1.6;"></p>
+          </div>
+          <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center;">
+            <span id="lightboxIndex" style="font-family: var(--font-mono); font-size: 12px; color: #71717a;"></span>
+            <div style="display: flex; gap: 8px;">
+              <button type="button" onclick="prevLightbox()" style="padding: 6px 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 4px; cursor: pointer;">← 이전</button>
+              <button type="button" onclick="nextLightbox()" style="padding: 6px 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 4px; cursor: pointer;">다음 →</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </dialog>
+
+    <!-- 푸터 (.site-foot SSOT) -->
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>마테리아 스튜디오 · 서울 강남구 압구정로 72길 14</p>
+        <p class="muted">월요일부터 금요일까지 (사전 예약제)</p>
+        <p class="muted">studio@materia.kr</p>
+      </div>
+    </footer>
+
+    <!-- Interactive Scripts -->
+    <script>
+      // 1. Ambiance Day/Night Switcher
+      const btnDay = document.getElementById('btnAmbianceDay');
+      const btnNight = document.getElementById('btnAmbianceNight');
+      btnDay?.addEventListener('click', () => {
+        document.documentElement.removeAttribute('data-theme');
+        btnDay.classList.add('active');
+        btnNight.classList.remove('active');
+      });
+      btnNight?.addEventListener('click', () => {
+        document.documentElement.setAttribute('data-theme', 'night');
+        btnNight.classList.add('active');
+        btnDay.classList.remove('active');
+      });
+
+      // 2. 24 Gallery Items Data Store
+      const galleryData = [
+        { img: '../../assets/hannam-01-living-void.webp', zone: 'Zone A · Living', title: '5.8m 보이드 그레이트 룸', desc: '로만 나보나 트래버틴 원판 벽체와 2개 층을 관통하는 통창 채광 설계.' },
+        { img: '../../assets/hannam-03-dining.webp', zone: 'Zone A · Dining', title: '월넛 원목 슬랩 다이닝', desc: '수제 브러시드 브론즈 펜던트 조명과 한강 파노라마 야경 조망.' },
+        { img: '../../assets/hannam-04-kitchen.webp', zone: 'Zone A · Kitchen', title: '석재 통판 셰프 키친', desc: '그레이 쿼츠자이트 아일랜드와 히든 플러시 훈증 오크 수납 시스템.' },
+        { img: '../../assets/hannam-10-staircase.webp', zone: 'Zone A · Staircase', title: '캔틸레버 부유식 오크 계단', desc: '트래버틴 벽체에서 돌출된 무지주 솔리드 오크 디딤판과 매립 핸드레일.' },
+        { img: '../../assets/hannam-05-master-bedroom.webp', zone: 'Zone B · Master Suite', title: '마스터 베드룸 스위트', desc: '천연 리넨 헤드보드 월과 간접 라인 조명으로 완성한 정숙한 침실.' },
+        { img: '../../assets/hannam-06-spa-bathroom.webp', zone: 'Zone B · Spa Bath', title: '화산석 통원석 스파 배스', desc: '자연석을 통째로 깎아낸 원석 욕조와 독립형 파티나 브론즈 수전.' },
+        { img: '../../assets/hannam-13-powder-room.webp', zone: 'Zone B · Powder Room', title: '석재 세면대 파우더룸', desc: '조각적인 통라임스톤 세면대와 수직 슬릿 조명이 빚은 명암.' },
+        { img: '../../assets/hannam-14-guest-suite.webp', zone: 'Zone B · Guest Suite', title: '게스트 침실 스위트', desc: '따뜻한 라임워시 도장 벽체와 천연 원목 가구의 안락한 조화.' },
+        { img: '../../assets/hannam-07-library-audio.webp', zone: 'Zone C · Library', title: '서재 & 하이파이 오디오 룸', desc: '음향 반사를 고려한 훈증 오크 책장과 아날로그 턴테이블 석재 콘솔.' },
+        { img: '../../assets/hannam-11-dressing-room.webp', zone: 'Zone C · Dressing Room', title: '비스포크 워크인 드레스룸', desc: '플루티드 브론즈 유리장과 시계/주얼리 수납 아일랜드 쇼케이스.' },
+        { img: '../../assets/hannam-12-wine-cellar.webp', zone: 'Zone C · Wine Cellar', title: '항온항습 글래스 와인 셀러', desc: '백라이트 트래버틴 벽체와 브론즈 프레임 유리 파티션 셀러.' },
+        { img: '../../assets/hannam-20-tea-room.webp', zone: 'Zone C · Tea Alcove', title: '명상 다도실 (Tea Room)', desc: '천연 한지 스크린을 투과하는 부드러운 격자 채광과 원목 다도상.' },
+        { img: '../../assets/hannam-08-terrace.webp', zone: 'Zone D · Terrace', title: '루프탑 프라이빗 테라스', desc: '대형 트래버틴 페이버와 조형 소나무 분재, 한강 석양 조망.' },
+        { img: '../../assets/hannam-09-foyer.webp', zone: 'Zone D · Entrance', title: '미니멀 입구 현관 (Foyer)', desc: '거대한 화강석 벤치 원석과 플러시 히든 피벗 도어 시스템.' },
+        { img: '../../assets/hannam-22-lightwell.webp', zone: 'Zone D · Lightwell', title: '실내 석경 중정 (Zen Lightwell)', desc: '천장 보이드에서 쏟아지는 수직 채광과 백자갈 디딤돌 정원.' },
+        { img: '../../assets/hannam-21-art-niche.webp', zone: 'Zone D · Art Niche', title: '뮤지엄 갤러리 아트 니치', desc: '트래버틴 조각 좌대와 정밀 프레이밍 조명으로 연출된 조각품.' },
+        { img: '../../assets/hannam-15-mat-travertine.webp', zone: 'Zone E · Material', title: '로만 나보나 트래버틴 접사', desc: '자연이 형성한 미세한 다공성 기공과 따뜻한 꿀빛 석재 층위.' },
+        { img: '../../assets/hannam-16-mat-bogoak.webp', zone: 'Zone E · Material', title: '3,000년 탄화 훈증 오크', desc: '시간이 빚어낸 깊은 차콜 에스프레소 나뭇결과 실키 매트 피니시.' },
+        { img: '../../assets/hannam-17-mat-linen.webp', zone: 'Zone E · Material', title: '벨기에 무표백 천연 리넨', desc: '불규칙한 천연 실타래 슬럽 조직이 주는 촉각적 안도감과 빛 흡수력.' },
+        { img: '../../assets/hannam-18-mat-bronze.webp', zone: 'Zone E · Material', title: '수공예 파티나 브러시드 브론즈', desc: '손길이 닿을수록 깊어지는 유기적 산화 피막의 은은한 광채.' },
+        { img: '../../assets/hannam-02-blueprint.webp', zone: 'Zone F · Blueprint', title: '86평 복층 건축 평면 설계도', desc: '동선 효율과 채광축을 정밀하게 구획한 마스터 아키텍처 드래프트.' },
+        { img: '../../assets/hannam-23-light-simulation.webp', zone: 'Zone F · Analysis', title: '3D 태양광 입사 조도 분석', desc: '하지 및 춘분 정오 55° 고도각에 따른 Lux 분포 및 음영 계산도.' },
+        { img: '../../assets/hannam-19-joinery.webp', zone: 'Zone F · Detail', title: '5mm 음각 섀도우 갭 조인트', desc: '석재와 원목 패널 사이의 0.5mm 오차 없는 스위스 규격 결합부.' },
+        { img: '../../assets/hannam-24-timber-joinery.webp', zone: 'Zone F · Detail', title: '전통 장부 맞춤 마스터 목공', desc: '못 없이 체결되는 장인 직영 정밀 결구 구조의 하드웨어.' }
+      ];
+
+      // 3. Filter Chips Logic
+      const filterChips = document.querySelectorAll('.gallery-chip');
+      const galleryCards = document.querySelectorAll('.gallery-card');
+
+      filterChips.forEach(chip => {
+        chip.addEventListener('click', () => {
+          filterChips.forEach(c => c.classList.remove('active'));
+          chip.classList.add('active');
+          const zone = chip.getAttribute('data-zone');
+          galleryCards.forEach(card => {
+            if (zone === 'all' || card.getAttribute('data-zone') === zone) {
+              card.style.display = 'flex';
+            } else {
+              card.style.display = 'none';
+            }
+          });
+        });
+      });
+
+      // 4. Lightbox Modal Logic
+      let currentLightboxIdx = 0;
+      const lightboxModal = document.getElementById('lightboxDialog');
+      const lightboxImg = document.getElementById('lightboxImg');
+      const lightboxZone = document.getElementById('lightboxZone');
+      const lightboxTitle = document.getElementById('lightboxTitle');
+      const lightboxDesc = document.getElementById('lightboxDesc');
+      const lightboxIndex = document.getElementById('lightboxIndex');
+
+      function openLightbox(idx) {
+        currentLightboxIdx = idx;
+        renderLightbox();
+        lightboxModal.showModal();
+      }
+
+      function renderLightbox() {
+        const item = galleryData[currentLightboxIdx];
+        if (!item) return;
+        lightboxImg.src = item.img;
+        lightboxImg.alt = item.title;
+        lightboxZone.textContent = item.zone;
+        lightboxTitle.textContent = item.title;
+        lightboxDesc.textContent = item.desc;
+        lightboxIndex.textContent = `${currentLightboxIdx + 1} / ${galleryData.length}`;
+      }
+
+      function prevLightbox() {
+        currentLightboxIdx = (currentLightboxIdx - 1 + galleryData.length) % galleryData.length;
+        renderLightbox();
+      }
+
+      function nextLightbox() {
+        currentLightboxIdx = (currentLightboxIdx + 1) % galleryData.length;
+        renderLightbox();
+      }
+
+      lightboxModal.addEventListener('click', (e) => {
+        if (e.target === lightboxModal) lightboxModal.close();
+      });
+    </script>
+  </body>
+</html>
--- a/apps/site/public/work/materia-interior/styles/main.css
+++ b/apps/site/public/work/materia-interior/styles/main.css
@ -0,0 +1,684 @@
+@import "./tokens.css";
+
+/* ==========================================================================
+   마테리아 스튜디오 (MATERIA Spatial Design) — 메인 스타일시트 SSOT
+   프리셋: editorial + high-end-visual-design
+   ========================================================================== */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  background-color: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: background-color var(--dur-normal), color var(--dur-normal);
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100dvh;
+  line-height: var(--leading-normal);
+  overflow-x: hidden;
+  background: var(--surface);
+  transition: background-color var(--dur-normal);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--dur-fast);
+}
+
+a:hover {
+  color: var(--accent);
+}
+
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+.serif {
+  font-family: var(--font-serif);
+}
+
+.italic {
+  font-family: var(--font-serif);
+  font-style: italic;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 접근성 스킵 링크 ── */
+.skip-link {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1000;
+  padding: 0.5rem 1.25rem;
+  background: var(--surface-inverse);
+  color: var(--ink-inverse);
+  border-radius: var(--radius-xs);
+  transform: translateY(-200%);
+  transition: transform var(--dur-fast);
+  text-decoration: none;
+  font-weight: 500;
+}
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+/* ── 상단 헤더 & 조도 스위처 (GNB SSOT) ── */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(245, 243, 239, 0.94);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--line);
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  transition: background-color var(--dur-normal), border-color var(--dur-normal);
+}
+
+body[data-ambiance="night"] .site-header {
+  background: rgba(20, 19, 18, 0.94);
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  text-decoration: none;
+  color: var(--ink);
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: var(--step-1);
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.brand-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  color: var(--accent);
+  font-family: var(--font-serif);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.brand-han {
+  font-size: var(--step--1);
+  color: var(--accent);
+  margin-left: 4px;
+  font-weight: 500;
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  list-style: none;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  transition: color var(--dur-fast);
+  white-space: nowrap;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+  color: var(--accent);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+/* 조도 앰비언스 모드 스위처 (Day vs Night) */
+.ambiance-switcher,
+.ambiance-toggle {
+  display: inline-flex;
+  align-items: center;
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  padding: 2px;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.ambiance-btn {
+  padding: 4px 10px;
+  border-radius: 2px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-muted);
+  transition: all var(--dur-fast);
+  white-space: nowrap;
+}
+
+.ambiance-btn.is-active,
+.ambiance-btn.active {
+  background: var(--surface-raised);
+  color: var(--ink);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* ── 버튼 시스템 & 더블 베젤 ── */
+.btn-materia {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  background: var(--surface-inverse);
+  color: var(--ink-inverse);
+  padding: 8px 16px;
+  border-radius: var(--radius-xs);
+  font-weight: 600;
+  font-size: var(--step--1);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
+}
+
+.btn-materia:hover {
+  background: var(--accent);
+  color: var(--accent-ink);
+  transform: translateY(-1px);
+}
+
+.btn-materia:active {
+  transform: scale(0.98);
+}
+
+/* 더블 베젤 프레임 (Double-Bezel) */
+.bezel-outer,
+.frame.double-bezel {
+  background: rgba(158, 128, 98, 0.06);
+  border: 1px solid var(--line);
+  padding: 6px;
+  border-radius: var(--radius-md);
+}
+
+.bezel-inner {
+  background: var(--surface-raised);
+  border: 1px solid var(--line-subtle);
+  border-radius: calc(var(--radius-md) - 4px);
+  padding: var(--space-6);
+}
+
+/* ── 히어로 섹션 ── */
+.hero-section {
+  padding-block: var(--space-6) var(--space-7);
+  position: relative;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  gap: var(--space-6);
+  align-items: center;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: var(--radius-xs);
+  background: var(--accent-light);
+  color: var(--accent);
+  font-size: var(--step--1);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  margin-bottom: var(--space-3);
+  border: 1px solid var(--accent-surface);
+}
+
+.hero-title {
+  font-family: var(--font-serif);
+  font-size: var(--step-3);
+  font-weight: 700;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin-bottom: var(--space-3);
+  text-wrap: balance;
+  word-break: keep-all;
+}
+
+.hero-desc {
+  font-size: var(--step-0);
+  color: var(--ink-muted);
+  max-width: var(--measure);
+  line-height: var(--leading-normal);
+  margin-bottom: var(--space-5);
+  text-wrap: pretty;
+  word-break: keep-all;
+}
+
+.hero-ctas {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.hero-visual {
+  position: relative;
+}
+
+.hero-frame {
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.06);
+}
+
+.hero-frame img {
+  width: 100%;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+  transition: transform var(--dur-slow);
+}
+
+.hero-spec-tag {
+  position: absolute;
+  bottom: -14px;
+  left: 16px;
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  padding: 8px 14px;
+  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+}
+
+.spec-title {
+  font-family: var(--font-serif);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.spec-sub {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--accent);
+}
+
+/* ── 엄선 프로젝트 섹션 ── */
+.works-section {
+  padding-block: var(--space-7);
+  border-top: 1px solid var(--line);
+}
+
+.section-head {
+  text-align: center;
+  max-width: 640px;
+  margin-inline: auto;
+  margin-bottom: var(--space-6);
+}
+
+.section-title {
+  font-family: var(--font-serif);
+  font-size: var(--step-2);
+  font-weight: 700;
+  color: var(--ink);
+  margin-bottom: var(--space-2);
+  text-wrap: balance;
+  word-break: keep-all;
+}
+
+.section-sub {
+  font-size: var(--step-0);
+  color: var(--ink-muted);
+  text-wrap: pretty;
+  word-break: keep-all;
+}
+
+.works-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-5);
+}
+
+.work-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--dur-normal), box-shadow var(--dur-normal), border-color var(--dur-normal);
+}
+
+.work-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--accent);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.08);
+}
+
+.work-card-media {
+  width: 100%;
+  aspect-ratio: 16 / 11;
+  overflow: hidden;
+  background: var(--surface-subtle);
+  position: relative;
+}
+
+.work-card-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.work-card:hover .work-card-media img {
+  transform: scale(1.04);
+}
+
+/* 🚀 텍스트 영역 내부 패딩을 24px로 넉넉하게 부여하여 0px 패딩 버그 완전 해결 */
+.work-card-body {
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--space-2);
+}
+
+.work-card-title {
+  font-family: var(--font-serif);
+  font-size: var(--step-1);
+  font-weight: 700;
+  color: var(--ink);
+  letter-spacing: -0.02em;
+}
+
+.work-card-type {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.work-card-desc {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  line-height: 1.65;
+  margin-block: var(--space-1) var(--space-4);
+  flex-grow: 1;
+  text-wrap: pretty;
+  word-break: keep-all;
+}
+
+.work-card-actions {
+  margin-top: auto;
+}
+
+.work-card-actions .btn-materia {
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+  padding: 10px 16px;
+  font-size: var(--step--1);
+}
+
+/* ── 물성 아카이브 섹션 ── */
+.material-section {
+  padding-block: var(--space-7);
+  background: var(--surface-card);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.material-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: var(--space-6);
+  align-items: center;
+}
+
+.mat-list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.mat-item {
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.mat-item-name {
+  font-family: var(--font-serif);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.mat-item-desc {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+  word-break: keep-all;
+}
+
+/* ── 설계 프로세스 섹션 ── */
+.process-section {
+  padding-block: var(--space-7);
+}
+
+.process-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.process-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  padding: var(--space-4);
+}
+
+.process-num {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--accent);
+  font-weight: 700;
+  margin-bottom: var(--space-2);
+}
+
+.process-title {
+  font-family: var(--font-serif);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--ink);
+  margin-bottom: var(--space-1);
+}
+
+.process-desc {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+  word-break: keep-all;
+}
+
+/* ── 프라이빗 상담 섹션 ── */
+.contact-section {
+  padding-block: var(--space-7);
+  background: var(--surface-card);
+  border-top: 1px solid var(--line);
+}
+
+.contact-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: var(--space-5);
+  max-width: 680px;
+  margin-inline: auto;
+}
+
+.form-group {
+  margin-bottom: var(--space-4);
+}
+
+.form-label {
+  display: block;
+  font-size: var(--step--1);
+  font-weight: 600;
+  color: var(--ink);
+  margin-bottom: var(--space-2);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.form-select, .form-input, .form-textarea {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  padding: 10px 14px;
+  color: var(--ink);
+  font-size: var(--step-0);
+  transition: border-color var(--dur-fast);
+}
+
+.form-select:focus, .form-input:focus, .form-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* ── 푸터 ── */
+.site-footer {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-5);
+  background: var(--surface);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+
+.footer-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+/* ── 반응형 미디어 쿼리 ── */
+@media (max-width: 860px) {
+  .nav-links {
+    display: none;
+  }
+  .hero-grid, .works-grid, .material-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .process-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .brand-han {
+    display: none;
+  }
+  .header-actions .btn-materia {
+    display: none;
+  }
+  .site-header {
+    min-height: 56px;
+  }
+}
+
+@media (max-width: 600px) {
+  .process-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* SSOT Aliases */
+.site-head { position: sticky; top: 0; z-index: 50; background: rgba(245, 243, 239, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
+body[data-ambiance="night"] .site-head { background: rgba(20, 19, 18, 0.94); }
+.head-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
+.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-serif); font-size: var(--step-1); font-weight: 700; color: var(--ink); text-decoration: none; }
+.wordmark-han { font-size: var(--step--1); color: var(--accent); font-weight: 500; }
+.nav { display: flex; align-items: center; gap: var(--space-5); }
+.nav a { font-size: var(--step--1); font-weight: 500; color: var(--ink-muted); text-decoration: none; }
+.nav a:hover, .nav a.active { color: var(--ink); }
+.head-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
+.site-foot { border-top: 1px solid var(--line); padding-block: var(--space-6); background: var(--surface); font-size: var(--step--1); color: var(--ink-muted); }
+.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
--- a/apps/site/public/work/materia-interior/styles/tokens.css
+++ b/apps/site/public/work/materia-interior/styles/tokens.css
@ -0,0 +1,94 @@
+/* ==========================================================================
+   마테리아 스튜디오 (MATERIA Spatial Design) — 디자인 토큰 SSOT
+   프리셋: editorial + quiet-architecture
+   컨셉: 트래버틴과 빛의 건축 — 물성과 침묵이 빚어내는 하이엔드 공간
+   ========================================================================== */
+
+:root {
+  /* 타이포그래피 스케일 */
+  --step--1: 0.8125rem;                                /* 13px — 캡션·치수 */
+  --step-0: 1rem;                                      /* 16px — 본문 */
+  --step-1: 1.1875rem;                                 /* 19px — 소제목 */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); /* 30px — 섹션 제목 */
+  --step-3: clamp(2.25rem, 1.5rem + 3vw, 3.8rem);      /* 60px — 메인 표제 */
+
+  --leading-tight: 1.18;
+  --leading-normal: 1.75;
+  --measure: 54ch;
+
+  --font-serif: "MaruBuri", "Noto Serif KR", serif;
+  --font-display: "MaruBuri", "Noto Serif KR", serif;
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* 웜 트래버틴 스톤 색상 (Day 기본) */
+  --surface: #f5f3ef;
+  --surface-raised: #faf9f6;
+  --surface-card: #ece8e1;
+  --surface-sunken: #e4dfd6;
+  --surface-inverse: #161514;
+
+  --ink: #161514;
+  --ink-muted: #524f4b;
+  --ink-faint: #8c8780;
+  --ink-inverse: #f5f3ef;
+  --ink-inverse-muted: #a39e96;
+
+  --line: #ddd8cf;
+  --line-strong: #bfb8ab;
+  --line-subtle: #eae5dc;
+  --line-inverse: #33312f;
+
+  /* 단일 강조색 — 브러시드 브론즈 */
+  --accent: #9e8062;
+  --accent-hover: #856a4f;
+  --accent-light: rgba(158, 128, 98, 0.12);
+  --accent-surface: rgba(158, 128, 98, 0.2);
+  --accent-ink: #ffffff;
+
+  --radius: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+
+  /* 간격 — SSOT 표준 */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6rem;
+  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
+
+  /* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  /* 모션 */
+  --dur-quick: 180ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
+
+/* ── 나이트 무드 앰비언스 ── */
+body[data-ambiance="night"] {
+  --surface: #141312;
+  --surface-raised: #1c1b19;
+  --surface-card: #22201e;
+  --surface-sunken: #2b2926;
+  --surface-inverse: #f5f3ef;
+
+  --ink: #f5f3ef;
+  --ink-muted: #a39e96;
+  --ink-faint: #736e67;
+  --ink-inverse: #141312;
+
+  --line: #2e2b27;
+  --line-strong: #45413c;
+  --line-subtle: #242220;
+
+  --accent: #c4a482;
+  --accent-hover: #dbbe9d;
+  --accent-light: rgba(196, 164, 130, 0.15);
+  --accent-ink: #141312;
+}