yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

209
apps/site/public/work/materia-interior/projects/hannam-duplex/index.html
View file

@ -9,10 +9,7 @@
<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="../../styles/fonts.css?v=20260912all" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
@ -21,8 +18,9 @@
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" />
<link rel="stylesheet" href="../../styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="../../styles/main.css?v=20260912all" />
<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" />
<style>
/* Detail Page Specific Styles */
.breadcrumb-bar {
@ -188,7 +186,9 @@
background: var(--surface);
color: var(--ink-muted);
cursor: pointer;
transition: all 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
min-height: var(--control-block);
white-space: nowrap;
}
.gallery-chip:hover {
border-color: var(--accent);
@ -217,6 +217,7 @@
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
padding: var(--space-2);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
@ -228,11 +229,29 @@
border-color: var(--accent);
box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.gallery-card:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-light);
}
.gallery-card-action {
position: absolute;
inset: 0;
z-index: 2;
border: 0;
border-radius: inherit;
background: transparent;
cursor: pointer;
}
.gallery-card-action:focus-visible {
outline: 3px solid var(--accent);
outline-offset: -3px;
}
.gallery-card-img-wrap {
aspect-ratio: 16 / 10;
position: relative;
overflow: hidden;
background: var(--surface-sunken);
border-radius: var(--radius-xs);
}
.gallery-card img {
width: 100%;
@ -244,7 +263,7 @@
transform: scale(1.03);
}
.gallery-card-body {
padding: var(--space-4);
padding: var(--space-3) var(--space-2) var(--space-2);
display: flex;
flex-direction: column;
gap: 6px;
@ -268,17 +287,26 @@
color: var(--ink-muted);
line-height: 1.5;
}
@media (max-width: 600px) {
.spatial-grid { grid-template-columns: minmax(0, 1fr); }
.gallery-chip { min-height: var(--control-block); padding-inline: var(--control-pad-inline); }
}
/* Lightbox Dialog */
.lightbox-dialog {
position: fixed;
inset: 0;
box-sizing: border-box;
margin: auto;
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;
width: min(1200px, calc(100dvw - (var(--space-3) * 2)));
max-height: min(92dvh, calc(100dvh - (var(--space-3) * 2)));
padding: 0;
overflow: auto;
overscroll-behavior: contain;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
}
.lightbox-dialog::backdrop {
@ -288,6 +316,8 @@
.lightbox-layout {
display: grid;
grid-template-columns: 1fr;
min-height: 0;
max-height: inherit;
}
@media (min-width: 900px) {
.lightbox-layout {
@ -309,6 +339,7 @@
border-radius: var(--radius-xs);
}
.lightbox-info {
min-height: 0;
padding: var(--space-6);
display: flex;
flex-direction: column;
@ -349,6 +380,7 @@
</style>
</head>
<body data-ambiance="day">
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
<!-- 상단 헤더 (.site-head SSOT) -->
<header class="site-head">
<div class="wrap head-inner">
@ -368,7 +400,7 @@
<button type="button" class="ambiance-btn" id="btnAmbianceNight">Night</button>
</div>
<a href="../../index.html#contact" class="btn">
상담 신청
상담 항목 보기
</a>
</div>
</div>
@ -392,6 +424,7 @@
<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>
<p class="demo-notice" role="note">안내: 아래 프로젝트 설명·이미지·수치·갤러리는 공간 연출 예시입니다. 실제 매물·시공·상담을 제공하지 않습니다.</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>
@ -426,8 +459,8 @@
<img
src="../../assets/hannam-01-living-void.webp"
alt="한남 듀플렉스 펜트하우스 5.8m 보이드 거실 전경과 트래버틴 벽체"
width="1600"
height="900"
width="1376"
height="768"
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);">
@ -475,20 +508,20 @@
<!-- 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>
<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" data-zone="living">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-01-living-void.webp" alt="5.8m 보이드 거실" loading="lazy" />
<img src="../../assets/hannam-01-living-void.webp" width="1376" height="768" alt="5.8m 보이드 거실" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone A · Living</span>
@ -498,9 +531,9 @@
</div>
<!-- Card 2 -->
<div class="gallery-card" data-zone="living" onclick="openLightbox(1)">
<div class="gallery-card" data-zone="living">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-03-dining.webp" alt="다이닝 룸" loading="lazy" />
<img src="../../assets/hannam-03-dining.webp" width="1376" height="768" alt="다이닝 룸" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone A · Dining</span>
@ -510,9 +543,9 @@
</div>
<!-- Card 3 -->
<div class="gallery-card" data-zone="living" onclick="openLightbox(2)">
<div class="gallery-card" data-zone="living">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-04-kitchen.webp" alt="셰프 키친 아일랜드" loading="lazy" />
<img src="../../assets/hannam-04-kitchen.webp" width="1376" height="768" alt="셰프 키친 아일랜드" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone A · Kitchen</span>
@ -522,9 +555,9 @@
</div>
<!-- Card 4 -->
<div class="gallery-card" data-zone="living" onclick="openLightbox(3)">
<div class="gallery-card" data-zone="living">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-10-staircase.webp" alt="부유형 캔틸레버 계단" loading="lazy" />
<img src="../../assets/hannam-10-staircase.webp" width="1376" height="768" alt="부유형 캔틸레버 계단" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone A · Staircase</span>
@ -534,9 +567,9 @@
</div>
<!-- Card 5 -->
<div class="gallery-card" data-zone="master" onclick="openLightbox(4)">
<div class="gallery-card" data-zone="master">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-05-master-bedroom.webp" alt="마스터 침실" loading="lazy" />
<img src="../../assets/hannam-05-master-bedroom.webp" width="1376" height="768" alt="마스터 침실" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone B · Master Suite</span>
@ -546,9 +579,9 @@
</div>
<!-- Card 6 -->
<div class="gallery-card" data-zone="master" onclick="openLightbox(5)">
<div class="gallery-card" data-zone="master">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-06-spa-bathroom.webp" alt="스파 욕실" loading="lazy" />
<img src="../../assets/hannam-06-spa-bathroom.webp" width="1376" height="768" alt="스파 욕실" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone B · Spa Bath</span>
@ -558,9 +591,9 @@
</div>
<!-- Card 7 -->
<div class="gallery-card" data-zone="master" onclick="openLightbox(6)">
<div class="gallery-card" data-zone="master">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-13-powder-room.webp" alt="파우더룸" loading="lazy" />
<img src="../../assets/hannam-13-powder-room.webp" width="1376" height="768" alt="파우더룸" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone B · Powder Room</span>
@ -570,9 +603,9 @@
</div>
<!-- Card 8 -->
<div class="gallery-card" data-zone="master" onclick="openLightbox(7)">
<div class="gallery-card" data-zone="master">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-14-guest-suite.webp" alt="게스트 침실" loading="lazy" />
<img src="../../assets/hannam-14-guest-suite.webp" width="1376" height="768" alt="게스트 침실" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone B · Guest Suite</span>
@ -582,9 +615,9 @@
</div>
<!-- Card 9 -->
<div class="gallery-card" data-zone="study" onclick="openLightbox(8)">
<div class="gallery-card" data-zone="study">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-07-library-audio.webp" alt="서재 및 오디오 룸" loading="lazy" />
<img src="../../assets/hannam-07-library-audio.webp" width="1376" height="768" alt="서재 및 오디오 룸" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone C · Library</span>
@ -594,21 +627,21 @@
</div>
<!-- Card 10 -->
<div class="gallery-card" data-zone="study" onclick="openLightbox(9)">
<div class="gallery-card" data-zone="study">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-11-dressing-room.webp" alt="드레스룸" loading="lazy" />
<img src="../../assets/hannam-11-dressing-room.webp" width="1376" height="768" 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>
<p class="gallery-card-desc">플루티드 브론즈 유리장과 시계·주얼리 수납 아일랜드.</p>
</div>
</div>
<!-- Card 11 -->
<div class="gallery-card" data-zone="study" onclick="openLightbox(10)">
<div class="gallery-card" data-zone="study">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-12-wine-cellar.webp" alt="와인 셀러 룸" loading="lazy" />
<img src="../../assets/hannam-12-wine-cellar.webp" width="1376" height="768" alt="와인 셀러 룸" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone C · Wine Cellar</span>
@ -618,9 +651,9 @@
</div>
<!-- Card 12 -->
<div class="gallery-card" data-zone="study" onclick="openLightbox(11)">
<div class="gallery-card" data-zone="study">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-20-tea-room.webp" alt="티 룸 알코브" loading="lazy" />
<img src="../../assets/hannam-20-tea-room.webp" width="1376" height="768" alt="티 룸 알코브" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone C · Tea Alcove</span>
@ -630,9 +663,9 @@
</div>
<!-- Card 13 -->
<div class="gallery-card" data-zone="garden" onclick="openLightbox(12)">
<div class="gallery-card" data-zone="garden">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-08-terrace.webp" alt="프라이빗 테라스" loading="lazy" />
<img src="../../assets/hannam-08-terrace.webp" width="1376" height="768" alt="프라이빗 테라스" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone D · Terrace</span>
@ -642,9 +675,9 @@
</div>
<!-- Card 14 -->
<div class="gallery-card" data-zone="garden" onclick="openLightbox(13)">
<div class="gallery-card" data-zone="garden">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-09-foyer.webp" alt="입구 현관 전경" loading="lazy" />
<img src="../../assets/hannam-09-foyer.webp" width="1376" height="768" alt="입구 현관 전경" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone D · Entrance</span>
@ -654,9 +687,9 @@
</div>
<!-- Card 15 -->
<div class="gallery-card" data-zone="garden" onclick="openLightbox(14)">
<div class="gallery-card" data-zone="garden">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-22-lightwell.webp" alt="실내 석경 중정" loading="lazy" />
<img src="../../assets/hannam-22-lightwell.webp" width="1376" height="768" alt="실내 석경 중정" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone D · Lightwell</span>
@ -666,9 +699,9 @@
</div>
<!-- Card 16 -->
<div class="gallery-card" data-zone="garden" onclick="openLightbox(15)">
<div class="gallery-card" data-zone="garden">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-21-art-niche.webp" alt="갤러리 아트 니치" loading="lazy" />
<img src="../../assets/hannam-21-art-niche.webp" width="1376" height="768" alt="갤러리 아트 니치" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone D · Art Niche</span>
@ -678,9 +711,9 @@
</div>
<!-- Card 17 -->
<div class="gallery-card" data-zone="materials" onclick="openLightbox(16)">
<div class="gallery-card" data-zone="materials">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-15-mat-travertine.webp" alt="로만 트래버틴 매크로" loading="lazy" />
<img src="../../assets/hannam-15-mat-travertine.webp" width="1376" height="768" alt="로만 트래버틴 매크로" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone E · Material</span>
@ -690,9 +723,9 @@
</div>
<!-- Card 18 -->
<div class="gallery-card" data-zone="materials" onclick="openLightbox(17)">
<div class="gallery-card" data-zone="materials">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-16-mat-bogoak.webp" alt="3000년 훈증 오크 매크로" loading="lazy" />
<img src="../../assets/hannam-16-mat-bogoak.webp" width="1376" height="768" alt="3000년 훈증 오크 매크로" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone E · Material</span>
@ -702,9 +735,9 @@
</div>
<!-- Card 19 -->
<div class="gallery-card" data-zone="materials" onclick="openLightbox(18)">
<div class="gallery-card" data-zone="materials">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-17-mat-linen.webp" alt="벨기에 리넨 매크로" loading="lazy" />
<img src="../../assets/hannam-17-mat-linen.webp" width="1376" height="768" alt="벨기에 리넨 매크로" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone E · Material</span>
@ -714,9 +747,9 @@
</div>
<!-- Card 20 -->
<div class="gallery-card" data-zone="materials" onclick="openLightbox(19)">
<div class="gallery-card" data-zone="materials">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-18-mat-bronze.webp" alt="파티나 브론즈 매크로" loading="lazy" />
<img src="../../assets/hannam-18-mat-bronze.webp" width="1376" height="768" alt="파티나 브론즈 매크로" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone E · Material</span>
@ -726,9 +759,9 @@
</div>
<!-- Card 21 -->
<div class="gallery-card" data-zone="analysis" onclick="openLightbox(20)">
<div class="gallery-card" data-zone="analysis">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-02-blueprint.webp" alt="건축 평면 설계도면" loading="lazy" />
<img src="../../assets/hannam-02-blueprint.webp" width="1376" height="768" alt="건축 평면 설계도면" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone F · Blueprint</span>
@ -738,9 +771,9 @@
</div>
<!-- Card 22 -->
<div class="gallery-card" data-zone="analysis" onclick="openLightbox(21)">
<div class="gallery-card" data-zone="analysis">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-23-light-simulation.webp" alt="3D 일조 광학 시뮬레이션" loading="lazy" />
<img src="../../assets/hannam-23-light-simulation.webp" width="1376" height="768" alt="3D 일조 광학 시뮬레이션" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone F · Analysis</span>
@ -750,9 +783,9 @@
</div>
<!-- Card 23 -->
<div class="gallery-card" data-zone="analysis" onclick="openLightbox(22)">
<div class="gallery-card" data-zone="analysis">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-19-joinery.webp" alt="5mm 섀도우 갭 조인트" loading="lazy" />
<img src="../../assets/hannam-19-joinery.webp" width="1376" height="768" alt="5mm 섀도우 갭 조인트" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone F · Detail</span>
@ -762,9 +795,9 @@
</div>
<!-- Card 24 -->
<div class="gallery-card" data-zone="analysis" onclick="openLightbox(23)">
<div class="gallery-card" data-zone="analysis">
<div class="gallery-card-img-wrap">
<img src="../../assets/hannam-24-timber-joinery.webp" alt="장인 장부 맞춤 목공" loading="lazy" />
<img src="../../assets/hannam-24-timber-joinery.webp" width="1376" height="768" alt="장인 장부 맞춤 목공" loading="lazy" />
</div>
<div class="gallery-card-body">
<span class="gallery-card-zone">Zone F · Detail</span>
@ -781,7 +814,7 @@
<div class="wrap">
<div class="blueprint-viewer">
<div class="blueprint-frame">
<img src="../../assets/hannam-02-blueprint.webp" alt="한남 듀플렉스 펜트하우스 평면도" />
<img src="../../assets/hannam-02-blueprint.webp" width="1376" height="768" alt="한남 듀플렉스 펜트하우스 평면도" />
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div class="eyebrow" style="color: var(--accent);">물성 사양</div>
@ -800,7 +833,7 @@
</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>
@ -812,7 +845,7 @@
<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="확대 이미지" />
<img id="lightboxImg" src="../../assets/hannam-01-living-void.webp" width="1376" height="768" alt="확대 이미지" />
</div>
<div class="lightbox-info">
<div>
@ -837,9 +870,8 @@
<!-- 푸터 (.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>
<p>마테리아 스튜디오 · 공간 설계 안내</p>
<p class="muted">이 페이지의 프로젝트·상담 항목은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
</div>
</footer>
@ -849,14 +881,14 @@
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');
document.body.setAttribute('data-ambiance', 'day');
btnDay.classList.add('is-active');
btnNight.classList.remove('is-active');
});
btnNight?.addEventListener('click', () => {
document.documentElement.setAttribute('data-theme', 'night');
btnNight.classList.add('active');
btnDay.classList.remove('active');
document.body.setAttribute('data-ambiance', 'night');
btnNight.classList.add('is-active');
btnDay.classList.remove('is-active');
});
// 2. 24 Gallery Items Data Store
@ -870,7 +902,7 @@
{ 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-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 · Reading Alcove', title: '조용한 독서실 (Reading Alcove)', desc: '반투명 패브릭 스크린을 통과하는 부드러운 격자 채광과 낮은 원목 테이블.' },
{ img: '../../assets/hannam-08-terrace.webp', zone: 'Zone D · Terrace', title: '루프탑 프라이빗 테라스', desc: '대형 트래버틴 페이버와 조형 소나무 분재, 한강 석양 조망.' },
@ -891,6 +923,19 @@
const filterChips = document.querySelectorAll('.gallery-chip');
const galleryCards = document.querySelectorAll('.gallery-card');
// 전체 카드를 덮는 실제 button으로 마우스·터치·키보드가 같은 라이트박스를 연다.
galleryCards.forEach((card, index) => {
card.removeAttribute('onclick');
const action = document.createElement('button');
action.type = 'button';
action.className = 'gallery-card-action';
action.setAttribute('aria-haspopup', 'dialog');
action.setAttribute('aria-controls', 'lightboxDialog');
action.setAttribute('aria-label', `${card.querySelector('.gallery-card-title').textContent.trim()} 상세 보기`);
action.addEventListener('click', () => openLightbox(index));
card.append(action);
});
filterChips.forEach(chip => {
chip.addEventListener('click', () => {
filterChips.forEach(c => c.classList.remove('active'));