release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)
This commit is contained in:
parent
e26b00a825
commit
225c1d9f42
75 changed files with 7406 additions and 224 deletions
|
|
@ -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 보이드 거실 & 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue