release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)
Some checks failed
ci / build (push) Failing after 37s
release / release (push) Successful in 1m30s

This commit is contained in:
Yun Chan 2026-08-23 23:17:55 +09:00
parent e26b00a825
commit 225c1d9f42
75 changed files with 7406 additions and 224 deletions

View file

@ -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>