feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
169
apps/site/public/work/materia-interior/assets/fonts/LICENSE.html
Normal file
169
apps/site/public/work/materia-interior/assets/fonts/LICENSE.html
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,13 @@
|
|||
# MaruBuri source record
|
||||
|
||||
Downloaded 2026-09-12 from the official NAVER Hangeul static host. The files are retained unchanged: no conversion or subsetting was performed.
|
||||
|
||||
| File | Official URL | HTTP content type | Size | SHA-256 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `MaruBuri-Regular.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2 | `font/woff2` | 433776 bytes | `4CF1341CF2F23FB3E263712DFDE1D8F25EEDCC328B696A2E5A2C8ADD55E5C17B` |
|
||||
| `MaruBuri-SemiBold.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2 | `font/woff2` | 466108 bytes | `7AEF4862FA3219B0A7DEB6746E27116A38C4069F4424EB51EDF103B29795F5C2` |
|
||||
|
||||
- Official stylesheet checked: https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css
|
||||
- Official NAVER license page saved verbatim as `LICENSE.html`: https://help.naver.com/service/11029/contents/18088?lang=ko&osType=PC
|
||||
- `LICENSE.html` SHA-256: `8538F7921744D5E040F603BC301465EFBD038F1054D0754B7508DE3286452EC3`
|
||||
- The saved official page includes the NAVER copyright notice and the SIL Open Font License 1.1 text for MaruBuri.
|
||||
17
apps/site/public/work/materia-interior/design.md
Normal file
17
apps/site/public/work/materia-interior/design.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
# 마테리아 스튜디오 — 디자인 결정 기록
|
||||
|
||||
## 관찰과 방향
|
||||
|
||||
- 관찰: 기존 hero는 텍스트와 장식 프레임의 비중이 커서 공간 사진이 건축 포트폴리오의 첫 증거가 되지 못했다.
|
||||
- 원리 적용 범위: 사진은 공간의 빛·재료를 먼저 보이고 제목과 짧은 설명은 같은 시작선에서 범위를 설명한다. 프로젝트 목록은 대표 사례 하나와 보조 사례 둘을 구분하며, 물성은 같은 항목 위계로 비교한다.
|
||||
- 결정: hero를 5:7 사진 우세로, 대표 프로젝트를 큰 카드로 조정하고 캡션을 사진의 정렬선에 맞췄다. 브론즈·따뜻한 종이 토큰과 Day/Night, 24개 상세 갤러리·라이트박스·legacy 경로를 유지한다.
|
||||
- 기각 조건: 사진 크롭이 공간의 주피사체를 잃거나 Day/Night에서 캡션·필터·상태 대비가 약해지면 크롭과 표면 조합을 다시 조정한다.
|
||||
|
||||
## 토큰과 검증
|
||||
|
||||
- 타입: 로컬 `MaruBuri` 400·600은 제목·물성명, Pretendard는 본문, 모노는 메타데이터 역할을 유지한다.
|
||||
- 색: `--surface #f5f3ef`, 브론즈 `--accent #76583d`, 나이트 토큰의 대비를 유지한다.
|
||||
- 구도: hero 5:7, 사진 7:5, 대표 프로젝트는 넓은 화면에서 2행을 차지하며 860px 이하는 한 열이다.
|
||||
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
|
||||
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
|
|
@ -6,7 +6,9 @@
|
|||
<meta http-equiv="refresh" content="0; url=./projects/hannam-duplex/index.html" />
|
||||
<title>한남 듀플렉스 펜트하우스 — 이동 중</title>
|
||||
<link rel="canonical" href="./projects/hannam-duplex/index.html" />
|
||||
<link rel="stylesheet" href="./styles/tokens.css" />
|
||||
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/tokens.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>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -16,10 +16,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"
|
||||
|
|
@ -28,7 +25,7 @@
|
|||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=1" />
|
||||
<link rel="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"
|
||||
|
|
@ -64,7 +61,7 @@
|
|||
</div>
|
||||
|
||||
<a href="#contact" class="btn">
|
||||
상담 신청
|
||||
상담 항목 보기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +76,7 @@
|
|||
<span>하이엔드 공간 인테리어</span>
|
||||
</div>
|
||||
<h1 id="heroHeading" class="hero-title">
|
||||
빛과 트래버틴이 빚어내는<br />
|
||||
빛과 돌이 빚는<br />
|
||||
침묵의 <span class="italic">공간 건축</span>
|
||||
</h1>
|
||||
<p class="hero-desc">
|
||||
|
|
@ -96,22 +93,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual" style="position: relative;">
|
||||
<div class="bezel-outer">
|
||||
<div class="hero-frame">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="트래버틴 벽체와 훈증 오크 수납장이 조화된 하이엔드 펜트하우스 거실 전경"
|
||||
width="1200"
|
||||
height="1600"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-caption-pill">
|
||||
<div class="hero-caption-name">한남 펜트하우스 레지던스</div>
|
||||
<div class="hero-caption-meta">Hannam · 284㎡ (86평) · 2026.04 준공</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<figure class="hero-frame">
|
||||
<img
|
||||
src="./assets/penthouse-hero.webp"
|
||||
alt="트래버틴 벽체와 훈증 오크 수납장이 있는 주거 공간 전경"
|
||||
width="1200"
|
||||
height="1600"
|
||||
loading="eager"
|
||||
/>
|
||||
<figcaption class="hero-caption-pill">
|
||||
<span class="hero-caption-name">한남 펜트하우스 레지던스</span>
|
||||
<span class="hero-caption-meta">공간 사진과 물성 조합을 보여 주는 프로젝트 예시</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -272,12 +267,12 @@
|
|||
<div class="process-card">
|
||||
<div class="process-step">PHASE 02</div>
|
||||
<h3>촉각적 머티리얼 페어링</h3>
|
||||
<p>실제 1:1 자재 샘플 보드를 제작하여 거주자의 라이프스타일과 촉감 선호도를 일치시킵니다.</p>
|
||||
<p>맞춤형 자재 샘플 보드로 생활 방식과 촉감 선호도를 함께 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 03</div>
|
||||
<h3>3D 광학 시뮬레이션</h3>
|
||||
<p>주광(Daylight)과 2700K 인공 조명의 조도 분포를 가상 렌더링으로 정밀 검증합니다.</p>
|
||||
<p>낮빛과 2700K 조명에서 빛이 퍼지는 모습을 공간 시뮬레이션으로 미리 살펴봅니다.</p>
|
||||
</div>
|
||||
<div class="process-card">
|
||||
<div class="process-step">PHASE 04</div>
|
||||
|
|
@ -295,12 +290,13 @@
|
|||
<div style="text-align: center; margin-bottom: var(--space-6);">
|
||||
<div class="eyebrow">프라이빗 컨설팅</div>
|
||||
<h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
|
||||
프라이빗 공간 컨설팅 신청
|
||||
프라이빗 공간 상담 항목
|
||||
</h2>
|
||||
<p style="font-size: var(--step-0); color: var(--ink-muted); margin-top: 6px;">
|
||||
월 최대 3건의 프로젝트만을 엄선하여 타협 없는 완성도를 보증합니다.
|
||||
공간 유형과 규모, 예산 범위를 정리해 보세요.
|
||||
</p>
|
||||
</div>
|
||||
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 상담으로 접수되지 않습니다.</p>
|
||||
|
||||
<form id="consultForm" onsubmit="return false;">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
|
|
@ -315,18 +311,18 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="spaceArea">예상 전용면적 (평형)</label>
|
||||
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" value="82평 (271㎡)" />
|
||||
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientName">성함</label>
|
||||
<input type="text" id="clientName" class="form-input" placeholder="성함" value="김민준" required />
|
||||
<input type="text" id="clientName" class="form-input" placeholder="성함" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientPhone">연락처</label>
|
||||
<input type="tel" id="clientPhone" class="form-input" placeholder="010-0000-0000" value="010-5920-8812" required />
|
||||
<input type="tel" id="clientPhone" class="form-input" placeholder="연락처" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,11 +337,11 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="clientNote">공간에 바라는 철학 및 특별 요청사항</label>
|
||||
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요.">거실에 웅장한 트래버틴 벽체와 자연스러운 간접 조명을 조성하고 싶습니다. 2026년 10월 착공 희망합니다.</textarea>
|
||||
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요."></textarea>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
|
||||
프라이빗 디자인 상담 신청 완료
|
||||
입력한 상담 항목 확인
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -378,9 +374,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>
|
||||
|
||||
|
|
@ -412,7 +407,7 @@
|
|||
const name = document.getElementById("clientName").value || "고객님";
|
||||
const spaceType = document.getElementById("spaceType").value;
|
||||
const area = document.getElementById("spaceArea").value;
|
||||
alert(`[마테리아 스튜디오] ${name}님의 프라이빗 공간 컨설팅 신청(${spaceType} / ${area})이 접수되었습니다.\n담당 수석 디렉터가 24시간 이내에 포트폴리오 자료와 함께 직접 연락드리겠습니다.`);
|
||||
alert(`${name}님이 입력한 상담 항목을 확인했습니다. (${spaceType} / ${area || "면적 미입력"})\n실제 상담은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
15
apps/site/public/work/materia-interior/styles/fonts.css
Normal file
15
apps/site/public/work/materia-interior/styles/fonts.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "./tokens.css";
|
||||
@import "./tokens.css?v=20260912all";
|
||||
|
||||
/* ==========================================================================
|
||||
마테리아 스튜디오 (MATERIA Spatial Design) — 메인 스타일시트 SSOT
|
||||
|
|
@ -23,6 +23,10 @@ html {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
line-height: var(--leading-normal);
|
||||
|
|
@ -31,6 +35,30 @@ body {
|
|||
transition: background-color var(--dur-normal);
|
||||
}
|
||||
|
||||
/* 프로젝트 명세는 페이지의 일부가 아니라 독립된 읽기 표면이다.
|
||||
전역 reset의 margin:0이 dialog UA 중앙 배치를 지우므로 위치를 컴포넌트가 직접 소유한다. */
|
||||
.project-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
box-sizing: border-box;
|
||||
width: min(38rem, calc(100dvw - (var(--space-4) * 2)));
|
||||
max-height: min(36rem, calc(100dvh - (var(--space-4) * 2)));
|
||||
margin: auto;
|
||||
padding: var(--space-5);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
color: var(--ink);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 2rem 5rem rgba(22, 21, 20, 0.26);
|
||||
}
|
||||
|
||||
.project-dialog::backdrop {
|
||||
background: rgba(22, 21, 20, 0.58);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -217,7 +245,7 @@ body[data-ambiance="night"] .site-header {
|
|||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-muted);
|
||||
transition: all var(--dur-quick);
|
||||
transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -228,7 +256,7 @@ body[data-ambiance="night"] .site-header {
|
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── 버튼 시스템 & 더블 베젤 ── */
|
||||
/* ── 버튼 시스템 ── */
|
||||
.btn-materia {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -256,22 +284,6 @@ body[data-ambiance="night"] .site-header {
|
|||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 더블 베젤 프레임 (Double-Bezel) */
|
||||
.bezel-outer,
|
||||
.frame.double-bezel {
|
||||
background: rgba(158, 128, 98, 0.06);
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.bezel-inner {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-subtle);
|
||||
border-radius: calc(var(--radius-md) - 4px);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
/* ── 히어로 섹션 ── */
|
||||
.hero-section {
|
||||
padding-block: var(--space-6) var(--space-7);
|
||||
|
|
@ -280,7 +292,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -302,7 +314,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.hero-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--step-3);
|
||||
font-size: clamp(2.5rem, 2rem + 2.25vw, 4.25rem);
|
||||
font-weight: 700;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.01em;
|
||||
|
|
@ -315,13 +327,18 @@ body[data-ambiance="night"] .site-header {
|
|||
.hero-desc {
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
max-width: 34rem;
|
||||
line-height: var(--leading-normal);
|
||||
margin-bottom: var(--space-5);
|
||||
text-wrap: pretty;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.hero-frame { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.06); }
|
||||
.hero-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; transition: transform var(--dur-normal); }
|
||||
.hero-caption-pill { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; }
|
||||
.hero-caption-name { color: var(--ink); font-family: var(--font-serif); font-weight: 700; }
|
||||
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -333,20 +350,6 @@ body[data-ambiance="night"] .site-header {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.hero-frame {
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.hero-frame img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
transition: transform var(--dur-normal);
|
||||
}
|
||||
|
||||
.hero-spec-tag {
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
|
|
@ -406,7 +409,7 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
.works-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
|
|
@ -433,6 +436,8 @@ body[data-ambiance="night"] .site-header {
|
|||
background: var(--surface-sunken);
|
||||
position: relative;
|
||||
}
|
||||
.work-card:first-child { grid-row: span 2; }
|
||||
.work-card:first-child .work-card-media { aspect-ratio: 4 / 3; }
|
||||
|
||||
.work-card-media img {
|
||||
width: 100%;
|
||||
|
|
@ -516,9 +521,9 @@ body[data-ambiance="night"] .site-header {
|
|||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(9rem, .7fr) minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.mat-item-name {
|
||||
|
|
@ -642,7 +647,8 @@ body[data-ambiance="night"] .site-header {
|
|||
|
||||
/* ── 반응형 미디어 쿼리 ── */
|
||||
@media (max-width: 860px) {
|
||||
.nav-links {
|
||||
.nav-links,
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
.hero-grid, .works-grid, .material-grid {
|
||||
|
|
@ -652,6 +658,7 @@ body[data-ambiance="night"] .site-header {
|
|||
.process-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.work-card:first-child { grid-row: auto; }
|
||||
.brand-han {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -681,3 +688,57 @@ body[data-ambiance="night"] .site-head { background: rgba(20, 19, 18, 0.94); }
|
|||
.head-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
|
||||
.site-foot { border-top: 1px solid var(--line); padding-block: var(--space-6); background: var(--surface); font-size: var(--step--1); color: var(--ink-muted); }
|
||||
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
|
||||
|
||||
/* 석재 표면의 조용한 리듬을 유지하면서도 포커스와 조작 여백을 분명히 한다. */
|
||||
:where(a, button, input, select, textarea):focus-visible {
|
||||
outline: 3px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn-materia,
|
||||
.head-actions .btn,
|
||||
.ambiance-btn,
|
||||
.form-select,
|
||||
.form-input,
|
||||
.form-textarea {
|
||||
min-height: var(--control-block);
|
||||
padding-inline: var(--control-pad-inline);
|
||||
}
|
||||
|
||||
.demo-notice {
|
||||
max-width: 58ch;
|
||||
margin: 0 auto var(--space-5);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--accent-light);
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step--1);
|
||||
line-height: 1.55;
|
||||
text-align: left;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.nav { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav { display: none; }
|
||||
.head-actions > .btn { display: none; }
|
||||
.hero-title { font-size: clamp(1.65rem, 7.8vw, 2.15rem); }
|
||||
.hero-ctas { align-items: stretch; }
|
||||
.hero-ctas > .btn-materia { width: 100%; }
|
||||
.contact-card { padding: var(--space-4); }
|
||||
.contact-card form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
|
||||
.hero-caption-pill { align-items: flex-start; flex-direction: column; }
|
||||
.mat-item { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 1ms !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
--line-inverse: #33312f;
|
||||
|
||||
/* 단일 강조색 — 브러시드 브론즈 */
|
||||
--accent: #9e8062;
|
||||
--accent-hover: #856a4f;
|
||||
--accent-light: rgba(158, 128, 98, 0.12);
|
||||
--accent-surface: rgba(158, 128, 98, 0.2);
|
||||
--accent: #76583d;
|
||||
--accent-hover: #5f4631;
|
||||
--accent-light: rgba(118, 88, 61, 0.12);
|
||||
--accent-surface: rgba(118, 88, 61, 0.2);
|
||||
--accent-ink: #ffffff;
|
||||
|
||||
--radius: 2px;
|
||||
|
|
@ -61,8 +61,10 @@
|
|||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: 1120px;
|
||||
--container: clamp(70rem, 62vw, 85rem);
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
--control-block: 2.75rem;
|
||||
--control-pad-inline: 0.875rem;
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue