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

fix(showcase): 미정의 CSS 변수·한글 조판·접근성 결함 수리 및 무결성 게이트 두 겹 신설

Browse source 
stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지
못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다.
검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다.

게이트 신설
- tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로,
  한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사.
  verify.mjs 체인에 편입해 실패 시 배포를 막는다.
  폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다.
- tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로·
  컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러.
  반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다.
- html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다.

수리한 결함
- 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive,
  cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다.
  새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면
  radius 어휘가 4종이 되어 하드 게이트 3에 걸린다.
- 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이
  IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다.
  같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다.
- 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를
  한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다.
- 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh.
  이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다.
- 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry,
  lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label
  2건(overtone-sound, pulsegate).

측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과,
overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면
통과도 실패도 의미가 없다.
This commit is contained in:
Yun Chan 2026-08-24 12:50:57 +09:00
parent 225c1d9f42
commit 123d9fc5a8
28 changed files with 658 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

21
apps/site/public/work/cask-archive/docent/index.html
View file

@ -73,7 +73,6 @@
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--ink-muted);
text-transform: uppercase;
}
.docent-meta-item .value {
font-size: var(--step-0);
@ -176,19 +175,19 @@
<dl class="docent-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;">Session Type</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Session Type</dt>
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">1:1 Private Tasting</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;">Location</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Location</dt>
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Cask Room (한남 27길)</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;">Capacity</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Capacity</dt>
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">최대 2인 (동반 1인 가능)</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;">Glassware</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Glassware</dt>
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Glencairn &amp; Copita</dd>
</div>
</dl>
@ -220,7 +219,7 @@
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div class="eyebrow">SENSORY ANALYSIS</div>
<div class="eyebrow">관능 분석</div>
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
후각과 미각의 지도를 그리는<br />
<span class="accent-text">4축 아로마 분석법</span>
@ -245,7 +244,7 @@
<!-- Course Comparison Deep Cards -->
<section class="wrap" style="padding-bottom: var(--space-8);" id="courses">
<div class="eyebrow" style="text-align: center;">CURATED FLIGHT SELECTION</div>
<div class="eyebrow" style="text-align: center;">큐레이션 플라이트</div>
<h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
도슨트 테이스팅 정규 코스
</h2>
@ -255,7 +254,7 @@
<div class="course-deep-card">
<div>
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span class="eyebrow" style="color: var(--ink-muted);">COURSE A</span>
<span class="eyebrow" style="color: var(--ink-muted);">코스 A</span>
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">65,000원</span>
</div>
<h3 style="font-size: var(--step-1); font-weight: 700; margin-top: 8px;">
@ -302,7 +301,7 @@
<div class="course-deep-card highlight">
<div>
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span class="eyebrow" style="color: var(--accent);">COURSE B</span>
<span class="eyebrow" style="color: var(--accent);">코스 B</span>
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">120,000원</span>
</div>
<h3 style="font-size: var(--step-1); font-weight: 700; margin-top: 8px;">
@ -372,7 +371,7 @@
<section class="wrap" style="padding-bottom: var(--space-8);">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); align-items: center;">
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div class="eyebrow">GASTRONOMY PAIRING</div>
<div class="eyebrow">미식 페어링</div>
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
향과 질감의 증폭을 위한<br />
<span class="accent-text">아티잔 푸드 페어링</span>
@ -395,7 +394,7 @@
<!-- Live Reservation Form Section -->
<section class="wrap" style="padding-bottom: var(--space-8);" id="reservation-section">
<div class="card" style="max-width: 720px; margin: 0 auto;">
<div class="eyebrow" style="color: var(--accent); margin-bottom: 4px;">RESERVATION REQUEST</div>
<div class="eyebrow" style="color: var(--accent); margin-bottom: 4px;">예약 신청</div>
<h2 style="font-size: var(--step-2); font-weight: 800; margin-bottom: var(--space-4);">
도슨트 테이스팅 세션 실시간 예약
</h2>

44
apps/site/public/work/cask-archive/styles/main.css
View file

@ -39,7 +39,7 @@ img {
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
}
a:hover {
@ -100,9 +100,9 @@ button {
padding: 0.5rem 1rem;
background: var(--accent);
color: var(--accent-ink);
border-radius: var(--radius-xs);
border-radius: var(--radius);
transform: translateY(-200%);
transition: transform var(--dur-fast);
transition: transform var(--dur-quick);
text-decoration: none;
font-weight: 700;
}
@ -162,7 +162,7 @@ button {
color: var(--ink-muted);
font-size: var(--step--1);
font-weight: 500;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
white-space: nowrap;
}
@ -187,8 +187,8 @@ button {
font-weight: 700;
font-size: var(--step--1);
padding: 6px 14px;
border-radius: var(--radius-xs);
transition: opacity var(--dur-fast), transform var(--dur-fast);
border-radius: var(--radius);
transition: opacity var(--dur-quick), transform var(--dur-quick);
}
.head-actions .btn:hover {
@ -205,12 +205,12 @@ button {
background: var(--accent);
color: #0b0b0d;
padding: 10px 20px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-weight: 700;
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: transform var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
transition: transform var(--dur-quick), background var(--dur-quick), opacity var(--dur-quick);
border: 1px solid var(--accent);
}
@ -229,12 +229,12 @@ button {
color: var(--ink);
border: 1px solid var(--line);
padding: 10px 18px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--dur-fast), color var(--dur-fast);
transition: border-color var(--dur-quick), color var(--dur-quick);
}
.btn-outline:hover {
@ -247,7 +247,7 @@ button {
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
background: rgba(217, 155, 56, 0.12);
color: var(--accent);
font-size: 11px;
@ -256,7 +256,6 @@ button {
letter-spacing: 0.08em;
margin-bottom: var(--space-3);
border: 1px solid rgba(217, 155, 56, 0.25);
text-transform: uppercase;
}
/* ── 히어로 섹션 ── */
@ -332,7 +331,7 @@ button {
padding: 6px 12px;
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
display: flex;
justify-content: space-between;
align-items: baseline;
@ -434,13 +433,13 @@ button {
.filter-btn {
padding: 6px 14px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
background: var(--surface-raised);
border: 1px solid var(--line);
color: var(--ink-muted);
font-size: 12px;
font-weight: 600;
transition: all var(--dur-fast);
transition: all var(--dur-quick);
}
.filter-btn:hover {
@ -459,11 +458,11 @@ button {
border: 1px solid var(--line);
color: var(--ink);
padding: 8px 14px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-size: 13px;
min-width: 240px;
outline: none;
transition: border-color var(--dur-fast);
transition: border-color var(--dur-quick);
}
.search-input:focus {
@ -529,7 +528,7 @@ button {
}
.ledger-table tbody tr {
transition: background var(--dur-fast);
transition: background var(--dur-quick);
}
.ledger-table tbody tr:hover {
@ -583,7 +582,7 @@ button {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-5);
transition: border-color var(--dur-fast);
transition: border-color var(--dur-quick);
}
.course-card:hover {
@ -632,7 +631,6 @@ button {
font-family: var(--font-mono);
font-weight: 600;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
@ -643,11 +641,11 @@ button {
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
color: var(--ink);
font-size: 13px;
outline: none;
transition: border-color var(--dur-fast);
transition: border-color var(--dur-quick);
}
.form-select:focus,
@ -686,7 +684,7 @@ button {
padding: 10px 14px;
background: rgba(217, 155, 56, 0.1);
border: 1px solid rgba(217, 155, 56, 0.25);
border-radius: var(--radius-xs);
border-radius: var(--radius);
min-width: 80px;
flex-shrink: 0;
}

4
apps/site/public/work/cheongon-care/index.html
View file

@ -76,7 +76,7 @@
<div class="wrap hero-grid">
<div class="hero-content">
<div class="eyebrow">
<span>HOSPITAL-GRADE HYGIENE PROTOCOL</span>
<span>임상 수준 위생 프로토콜</span>
</div>
<h1 id="heroHeading" class="hero-title">
보이지 않는 미세 오염까지,<br />
@ -355,7 +355,7 @@
<section class="admin-view wrap" aria-label="청온 케어 관리자 콘솔">
<div class="admin-header">
<div>
<div class="eyebrow" style="margin-bottom: 4px;">OPERATIONAL CONTROL CENTER</div>
<div class="eyebrow" style="margin-bottom: 4px;">배차 관제 콘솔</div>
<h2 style="font-size: var(--step-2); font-weight: 800;">실시간 배차 및 현장 관제 현황</h2>
</div>
<button type="button" class="btn-primary" id="btnOpenQcModal">

15
apps/site/public/work/cheongon-care/protocol/index.html
View file

@ -73,7 +73,6 @@
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--ink-muted);
text-transform: uppercase;
}
.protocol-meta-item .value {
font-size: var(--step-0);
@ -166,19 +165,19 @@
<dl class="protocol-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;">Steam Temp</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Steam Temp</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">160℃ High-Temp</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;">Filtration</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Filtration</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">0.3㎛ HEPA H14 (99.995%)</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;">Detergent</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Detergent</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">ECOCERT 100% 식물성</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;">QC Points</dt>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">QC Points</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">32개 정밀 항목</dd>
</div>
</dl>
@ -210,7 +209,7 @@
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div class="eyebrow">SCIENTIFIC DATA VERIFICATION</div>
<div class="eyebrow">ATP 데이터 검증</div>
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
나인원한남 86평형<br />
<span style="color: var(--accent);">ATP 생체 오염도 99.1% 저감 리포트</span>
@ -238,7 +237,7 @@
<!-- 6-Stage Deep Steps -->
<section class="wrap" style="padding-bottom: var(--space-8);">
<div class="eyebrow" style="text-align: center;">STEP-BY-STEP ENGINEERING</div>
<div class="eyebrow" style="text-align: center;">단계별 시공 절차</div>
<h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
청온 케어 임상 6단계 시공 체계
</h2>
@ -320,7 +319,7 @@
<!-- Quick CTA -->
<section class="wrap" style="padding-bottom: var(--space-8); text-align: center;">
<div class="card" style="max-width: 640px; margin: 0 auto; background: var(--surface-card);">
<div class="eyebrow" style="color: var(--accent);">TRANSPARENT PRICING</div>
<div class="eyebrow" style="color: var(--accent);">정찰제 가격표</div>
<h2 style="font-size: var(--step-2); font-weight: 800; margin-top: 4px;">
우리 집 공간의 정찰제 견적을 확인하세요
</h2>

41
apps/site/public/work/cheongon-care/styles/main.css
View file

@ -39,7 +39,7 @@ img {
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
}
a:hover {
@ -89,7 +89,7 @@ button {
color: var(--ink-inverse);
border-radius: var(--radius-sm);
transform: translateY(-200%);
transition: transform var(--dur-fast);
transition: transform var(--dur-quick);
text-decoration: none;
font-weight: 500;
}
@ -136,7 +136,7 @@ button {
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
}
.wordmark-han {
@ -158,7 +158,7 @@ button {
color: var(--ink-muted);
font-size: var(--step--1);
font-weight: 500;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
white-space: nowrap;
}
@ -193,7 +193,7 @@ button {
display: inline-flex;
align-items: center;
gap: 5px;
transition: all var(--dur-fast);
transition: all var(--dur-quick);
white-space: nowrap;
}
@ -219,8 +219,8 @@ button {
font-weight: 700;
font-size: var(--step--1);
padding: 6px 14px;
border-radius: var(--radius-xs);
transition: opacity var(--dur-fast);
border-radius: var(--radius);
transition: opacity var(--dur-quick);
}
.head-actions .btn:hover {
@ -241,7 +241,7 @@ button {
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: transform var(--dur-fast), background var(--dur-fast);
transition: transform var(--dur-quick), background var(--dur-quick);
border: none;
}
@ -265,7 +265,7 @@ button {
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--dur-fast), color var(--dur-fast);
transition: border-color var(--dur-quick), color var(--dur-quick);
}
.btn-outline:hover {
@ -278,15 +278,14 @@ button {
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
background: var(--accent-light);
color: var(--accent);
font-size: 11px;
font-family: var(--font-mono);
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.06em;
letter-spacing: 0.02em;
margin-bottom: var(--space-3);
text-transform: uppercase;
}
/* ── 히어로 섹션 ── */
@ -464,7 +463,7 @@ button {
font-weight: 600;
font-size: var(--step--1);
text-align: center;
transition: all var(--dur-fast);
transition: all var(--dur-quick);
white-space: normal;
word-break: keep-all;
}
@ -514,7 +513,7 @@ button {
font-size: var(--step--1);
color: var(--ink-muted);
cursor: pointer;
transition: all var(--dur-fast);
transition: all var(--dur-quick);
}
.addon-label:has(input:checked) {
@ -583,7 +582,7 @@ button {
font-weight: 700;
font-size: var(--step-0);
border-radius: var(--radius-sm);
transition: background var(--dur-fast);
transition: background var(--dur-quick);
}
.calc-submit:hover {
@ -694,7 +693,7 @@ button {
position: absolute;
bottom: 12px;
padding: 4px 10px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-size: 11px;
font-family: var(--font-mono);
font-weight: 700;
@ -793,7 +792,7 @@ button {
.filter-tab {
padding: 3px 8px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
background: var(--surface);
@ -834,7 +833,7 @@ button {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-size: 11px;
font-weight: 700;
}
@ -846,12 +845,12 @@ button {
.action-btn {
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-size: 12px;
font-weight: 600;
background: var(--surface);
cursor: pointer;
transition: all var(--dur-fast);
transition: all var(--dur-quick);
}
.action-btn:hover {

6
apps/site/public/work/font-foundry/index.html
View file

@ -129,15 +129,15 @@
<div class="bench">
<form class="bench-controls" aria-label="조판 설정">
<div class="control">
<label for="ctl-size">글자 크기 <output id="out-size" for="ctl-size">17</output></label>
<div class="control-head"><label for="ctl-size">글자 크기</label><output id="out-size" for="ctl-size">17</output></div>
<input type="range" id="ctl-size" min="13" max="26" step="1" value="17" />
</div>
<div class="control">
<label for="ctl-tracking">자간 <output id="out-tracking" for="ctl-tracking">0</output></label>
<div class="control-head"><label for="ctl-tracking">자간</label><output id="out-tracking" for="ctl-tracking">0</output></div>
<input type="range" id="ctl-tracking" min="-5" max="10" step="1" value="0" />
</div>
<div class="control">
<label for="ctl-leading">행간 <output id="out-leading" for="ctl-leading">1.8</output></label>
<div class="control-head"><label for="ctl-leading">행간</label><output id="out-leading" for="ctl-leading">1.8</output></div>
<input type="range" id="ctl-leading" min="1.4" max="2.4" step="0.1" value="1.8" />
</div>
<button type="button" class="btn-reset" id="ctl-reset">권장값으로</button>

5
apps/site/public/work/font-foundry/styles/main.css
View file

@ -235,9 +235,12 @@ a {
display: grid;
gap: var(--space-4);
}
.control label {
.control-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.control label {
font-size: var(--step--1);
color: var(--ink-muted);
}

6
apps/site/public/work/lumina-optics/index.html
View file

@ -20,7 +20,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<link
@ -80,11 +80,11 @@
</div>
<div class="hud reveal" style="--delay: 160ms">
<div class="hud-row">
<label for="ior">Index of refraction <output id="ior-out" for="ior">1.52</output></label>
<div class="hud-row-head"><label for="ior">Index of refraction</label><output id="ior-out" for="ior">1.52</output></div>
<input type="range" id="ior" min="1.45" max="2.20" step="0.01" value="1.52" />
</div>
<div class="hud-row">
<label for="disp">Dispersion (Abbe ↓) <output id="disp-out" for="disp">0.18</output></label>
<div class="hud-row-head"><label for="disp">Dispersion (Abbe ↓)</label><output id="disp-out" for="disp">0.18</output></div>
<input type="range" id="disp" min="0" max="0.6" step="0.01" value="0.18" />
</div>
<p class="hud-note" id="hud-note">Drag the prism to rotate · beam is collimated at 632.8 nm reference</p>

7
apps/site/public/work/lumina-optics/styles/main.css
View file

@ -26,6 +26,8 @@ html {
}
body {
word-break: keep-all;
overflow-wrap: break-word;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
@ -193,9 +195,12 @@ a {
display: grid;
gap: var(--space-3);
}
.hud-row label {
.hud-row-head {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.hud-row label {
gap: var(--space-3);
font-size: var(--step--1);
color: var(--ink-muted);

2
apps/site/public/work/lumina-optics/styles/tokens.css
View file

@ -23,7 +23,7 @@
--leading-tight: 1.24;
--leading-normal: 1.72;
--font-body: "IBM Plex Sans", -apple-system, sans-serif;
--font-body: "IBM Plex Sans", "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* 색 — 시험실 무채색. 살짝 청록 기운의 액센트는 '레이저 라인' 하나뿐. */

33
apps/site/public/work/materia-interior/hannam-duplex.html
View file

@ -1,14 +1,39 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="0; url=./projects/hannam-duplex/index.html" />
<title>한남 듀플렉스 펜트하우스 이동 중...</title>
<title>한남 듀플렉스 펜트하우스 — 이동 중</title>
<link rel="canonical" href="./projects/hannam-duplex/index.html" />
<link rel="stylesheet" href="./styles/tokens.css" />
<style>
body {
margin: 0;
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--space-5);
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);
line-height: var(--leading-normal);
text-align: center;
word-break: keep-all;
overflow-wrap: break-word;
}
a {
color: var(--accent);
}
</style>
<script>
window.location.replace("./projects/hannam-duplex/index.html");
</script>
</head>
<body style="background: #0d0d0f; color: #f4f4f0; font-family: sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0;">
<p>한남 듀플렉스 펜트하우스 갤러리로 이동 중입니다... <a href="./projects/hannam-duplex/index.html" style="color: #c49d68;">직접 이동하기</a></p>
<body>
<p>
한남 듀플렉스 펜트하우스 갤러리로 이동 중입니다.
<a href="./projects/hannam-duplex/index.html">바로 이동</a>
</p>
</body>
</html>

4
apps/site/public/work/materia-interior/index.html
View file

@ -76,7 +76,7 @@
<div class="wrap hero-grid">
<div class="hero-content">
<div class="eyebrow">
<span>HIGH-END ARCHITECTURAL INTERIOR</span>
<span>하이엔드 공간 인테리어</span>
</div>
<h1 id="heroHeading" class="hero-title">
빛과 트래버틴이 빚어내는<br />
@ -293,7 +293,7 @@
<div class="wrap">
<div class="contact-card">
<div style="text-align: center; margin-bottom: var(--space-6);">
<div class="eyebrow">BESPOKE CONSULTATION</div>
<div class="eyebrow">프라이빗 컨설팅</div>
<h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
프라이빗 공간 컨설팅 신청
</h2>

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

@ -98,7 +98,6 @@
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.meta-item .value {
@ -256,8 +255,7 @@
font-size: 11px;
color: var(--accent);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
letter-spacing: 0.02em;
}
.gallery-card-title {
font-family: var(--font-serif);
@ -397,27 +395,27 @@
<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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; 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>
@ -444,7 +442,7 @@
<div class="wrap">
<div class="narrative-grid">
<div>
<div class="eyebrow">DESIGN PHILOSOPHY</div>
<div class="eyebrow">설계 관점</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>
@ -467,7 +465,7 @@
<section class="gallery-section" id="spatial-gallery">
<div class="wrap">
<div class="gallery-head">
<div class="eyebrow">SPATIAL EXPLORATION · 24 SHOTS</div>
<div class="eyebrow">공간 아카이브 · 24컷</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;">
각 카드를 클릭하시면 고해상도 확대 뷰어와 설계 물성 상세 명세를 확인하실 수 있습니다.
@ -786,7 +784,7 @@
<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>
<div class="eyebrow" style="color: var(--accent);">물성 사양</div>
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
수치로 입증하는<br />하이엔드 시공 규격
</h2>
@ -819,7 +817,7 @@
<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>
<span id="lightboxZone" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700;"></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>

37
apps/site/public/work/materia-interior/styles/main.css
View file

@ -40,7 +40,7 @@ img {
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
}
a:hover {
@ -97,9 +97,9 @@ button {
padding: 0.5rem 1.25rem;
background: var(--surface-inverse);
color: var(--ink-inverse);
border-radius: var(--radius-xs);
border-radius: var(--radius);
transform: translateY(-200%);
transition: transform var(--dur-fast);
transition: transform var(--dur-quick);
text-decoration: none;
font-weight: 500;
}
@ -153,7 +153,7 @@ body[data-ambiance="night"] .site-header {
align-items: center;
justify-content: center;
padding: 2px 6px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
background: var(--surface-card);
border: 1px solid var(--line);
color: var(--accent);
@ -182,7 +182,7 @@ body[data-ambiance="night"] .site-header {
font-size: var(--step--1);
font-weight: 600;
letter-spacing: -0.01em;
transition: color var(--dur-fast);
transition: color var(--dur-quick);
white-space: nowrap;
}
@ -205,7 +205,7 @@ body[data-ambiance="night"] .site-header {
align-items: center;
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
padding: 2px;
gap: 2px;
flex-shrink: 0;
@ -217,7 +217,7 @@ body[data-ambiance="night"] .site-header {
font-size: 12px;
font-weight: 600;
color: var(--ink-muted);
transition: all var(--dur-fast);
transition: all var(--dur-quick);
white-space: nowrap;
}
@ -237,13 +237,13 @@ body[data-ambiance="night"] .site-header {
background: var(--surface-inverse);
color: var(--ink-inverse);
padding: 8px 16px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
transition: transform var(--dur-quick), background var(--dur-quick), color var(--dur-quick);
}
.btn-materia:hover {
@ -290,11 +290,11 @@ body[data-ambiance="night"] .site-header {
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-xs);
border-radius: var(--radius);
background: var(--accent-light);
color: var(--accent);
font-size: var(--step--1);
font-family: var(--font-mono);
font-family: var(--font-body);
font-weight: 600;
margin-bottom: var(--space-3);
border: 1px solid var(--accent-surface);
@ -344,7 +344,7 @@ body[data-ambiance="night"] .site-header {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
transition: transform var(--dur-slow);
transition: transform var(--dur-normal);
}
.hero-spec-tag {
@ -353,7 +353,7 @@ body[data-ambiance="night"] .site-header {
left: 16px;
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
padding: 8px 14px;
box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.06);
display: flex;
@ -430,7 +430,7 @@ body[data-ambiance="night"] .site-header {
width: 100%;
aspect-ratio: 16 / 11;
overflow: hidden;
background: var(--surface-subtle);
background: var(--surface-sunken);
position: relative;
}
@ -514,7 +514,7 @@ body[data-ambiance="night"] .site-header {
.mat-item {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
padding: var(--space-4);
display: flex;
flex-direction: column;
@ -550,7 +550,7 @@ body[data-ambiance="night"] .site-header {
.process-card {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
padding: var(--space-4);
}
@ -604,7 +604,6 @@ body[data-ambiance="night"] .site-header {
font-weight: 600;
color: var(--ink);
margin-bottom: var(--space-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
@ -612,11 +611,11 @@ body[data-ambiance="night"] .site-header {
width: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-xs);
border-radius: var(--radius);
padding: 10px 14px;
color: var(--ink);
font-size: var(--step-0);
transition: border-color var(--dur-fast);
transition: border-color var(--dur-quick);
}
.form-select:focus, .form-input:focus, .form-textarea:focus {

12
apps/site/public/work/muwol-coffee/index.html
View file

@ -93,17 +93,13 @@
<!-- 이번 주 원두 — 카드가 아니라 원장의 첫 두 줄 -->
<dl class="hero-beans reveal" style="--delay: 240ms">
<div class="bean-row">
<div>
<dt>에티오피아 구지 우라가</dt>
<dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
</div>
<dt>에티오피아 구지 우라가</dt>
<dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
<dd class="bean-price"><span>100g</span> 8,500원</dd>
</div>
<div class="bean-row">
<div>
<dt>콜롬비아 엘 파라이소</dt>
<dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
</div>
<dt>콜롬비아 엘 파라이소</dt>
<dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
<dd class="bean-price"><span>100g</span> 11,000원</dd>
</div>
</dl>

23
apps/site/public/work/muwol-coffee/styles/main.css
View file

@ -234,13 +234,21 @@ a {
border-top: 1px solid var(--line);
}
.bean-row {
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: var(--space-4);
column-gap: var(--space-4);
padding-block: var(--space-3);
border-bottom: 1px solid var(--line);
}
.bean-row dt,
.bean-row .bean-origin {
grid-column: 1;
}
.bean-row .bean-price {
grid-column: 2;
grid-row: 1;
}
.bean-row dt {
font-family: var(--font-display);
font-weight: 500;
@ -550,9 +558,12 @@ tbody th {
justify-content: space-between;
}
.bean-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
grid-template-columns: 1fr;
row-gap: var(--space-1);
}
.bean-row .bean-price {
grid-column: 1;
grid-row: auto;
}
.plan-box {
padding: var(--space-4);

2
apps/site/public/work/overtone-sound/index.html
View file

@ -133,7 +133,7 @@
</section>
<!-- 협업 마퀴 — 페이지에 하나뿐인 흐름 -->
<div class="marquee" aria-label="협업 단체">
<div class="marquee" role="group" aria-label="협업 단체">
<div class="marquee-track">
<span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span><span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span>
</div>

4
apps/site/public/work/pulsegate/index.html
View file

@ -20,7 +20,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<link
@ -117,7 +117,7 @@
points="0,243 35,242 70,244 105,242 140,243 175,244 210,242 245,243 280,244 315,242 350,243 385,244 420,243 455,242 490,244 525,243 560,243"
/>
</svg>
<div class="instrument-rows" aria-label="POP readings, p99 over 24 hours">
<div class="instrument-rows" role="group" aria-label="POP readings, p99 over 24 hours">
<div><span>ICN-01 · Seoul</span><span class="num">14.2 ms</span></div>
<div><span>NRT-02 · Tokyo</span><span class="num">28.6 ms</span></div>
<div><span>SIN-01 · Singapore</span><span class="num">34.0 ms</span></div>

2
apps/site/public/work/pulsegate/styles/main.css
View file

@ -27,6 +27,8 @@ html {
}
body {
word-break: keep-all;
overflow-wrap: break-word;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);

2
apps/site/public/work/pulsegate/styles/tokens.css
View file

@ -21,7 +21,7 @@
--leading-tight: 1.22;
--leading-normal: 1.7;
--font-body: "IBM Plex Sans", -apple-system, sans-serif;
--font-body: "IBM Plex Sans", "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* 색 — 야간 당직실. 위계는 명도차로만. 코발트는 '잉크'다: 글자와 가는 선. */

2
apps/site/public/work/synapse-bci/index.html
View file

@ -20,7 +20,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<link

2
apps/site/public/work/synapse-bci/styles/main.css
View file

@ -26,6 +26,8 @@ html {
}
body {
word-break: keep-all;
overflow-wrap: break-word;
background: var(--surface);
color: var(--ink);
font-family: var(--font-body);

2
apps/site/public/work/synapse-bci/styles/tokens.css
View file

@ -20,7 +20,7 @@
--leading-tight: 1.24;
--leading-normal: 1.72;
--font-body: "IBM Plex Sans", -apple-system, sans-serif;
--font-body: "IBM Plex Sans", "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
--surface: #08090b;