feat: strengthen design skill and refresh all showcases

apps/site/public/work/overtone-sound/design.md

@@ -0,0 +1,27 @@
+# Overtone Sound Lab design.md
+
+## 브리프
+
+- 무엇을: 공간 음향 작업 기록의 가상 아카이브.
+- 누구에게: 작업명·연도·공간/기술 메타를 읽으면서 음향의 분위기를 느끼려는 방문자.
+- 제약: 앰버, 큰 타입, 아카이브의 의도적 엇갈림, 캔버스 outside-pause와 reduced-motion을 유지한다.
+
+## 결정표
+
+| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+|---|---|---|---|
+| 구도 | 기준 화면에서 파형이 제목·설명 뒤로 지나가 텍스트가 불안정했다. | 왼쪽 텍스트 표면과 오른쪽 파형 표면을 독립 그리드로 둔다. `--container`, `--space-7`, `--line`. | 파형 표면이 모바일에서 제목보다 먼저 오거나 별도 표면의 의미를 잃으면 순서를 되돌린다. |
+| 타입 | 제목은 감각적 표면, 아카이브는 비교 가능한 기록이다. | 제목 `--step-3`, 작업 제목 `--step-2`, 연도·메타 `--step--1`을 유지하고 각 작업에서 같은 열에 정렬한다. | 200%에서 작업 제목·연도·메타의 관계가 깨지면 스태거를 제거한다. |
+| 색 | 앰버는 파형과 연도만 잇는 신호다. | `--accent`, `--accent-dim`, `--surface-raised`를 파형/연도/파형 표면에만 쓴다. | 앰버가 본문과 경쟁하거나 가상 표기를 약화하면 면적을 줄인다. |
+
+## 근거와 경계
+
+[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 초점·여백 관찰은 제목과 파형을 서로 다른 표면으로 나누는 데만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 실제 한글·숫자 proof는 기록 열의 정렬에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 맥락색 관찰은 앰버와 갈색 바탕의 대비에만 적용했다. 이는 청취 경험의 성능 법칙이 아니다.
+
+[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 가상 아카이브와 작업·장소·수치 예시 표기를 기존 가까운 설명에 유지한다.
+
+## 2026-09-12 현재 검증 기록
+
+- `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이다.
+- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.

apps/site/public/work/overtone-sound/index.html

@@ -6,22 +6,22 @@
     <title>오버톤 사운드랩 · 공간 음향 연구소</title>
     <meta
       name="description"
-      content="침묵과 폭발의 주파수. 공간 음향과 생성 사운드스케이프를 만드는 연구소의 작업 아카이브."
+      content="공간 음향 작업을 기록하는 방식을 보여 주는 가상 아카이브입니다. 작업·장소·수치는 예시입니다."
     />
     <meta property="og:title" content="오버톤 사운드랩" />
     <meta
       property="og:description"
-      content="공간 음향과 생성 사운드스케이프 — 작업 아카이브."
+      content="공간 음향 작업을 읽는 가상 아카이브 구성."
     />
     <meta property="og:type" content="website" />
-    <meta name="theme-color" content="#0E0D0B" />
+    <meta name="theme-color" content="#12100e" />
 
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
-    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%230E0D0B'/%3E%3Cpath d='M4 16h4l2-7 3 14 3-10 2 5h10' fill='none' stroke='%23E8A33D' stroke-width='1.8'/%3E%3C/svg%3E"
@@ -43,69 +43,66 @@
     </header>
 
     <main id="main">
-      <!--
-        히어로 — anti-grid: 글자가 파형 위로 삐져나온다.
-        캔버스는 절차적 유사-FFT(정현파 합). 재생 버튼 없이 스스로 흐르되
-        화면 밖에서는 그리지 않는다.
-      -->
       <section class="hero" aria-labelledby="hero-h">
-        <canvas id="wave" class="wave" aria-hidden="true"></canvas>
         <div class="wrap hero-inner">
-          <p class="hero-kicker reveal">
-            <span>공간 음향 · DSP · 서울</span>
-            <span class="mono">48kHz / 2ch</span>
-          </p>
-          <h1 id="hero-h" class="reveal" style="--delay: 80ms">
-            침묵과 폭발의<br /><em>주파수</em>
-          </h1>
-          <p class="hero-statement reveal" style="--delay: 160ms">
-            오버톤은 소리를 만들지 않고, 소리가 공간에서 어떻게 행동하는지를
-            연구합니다. 방금 지나간 곡선은 이 연구소를 지나가는 소리의 자취입니다.
-          </p>
+          <div class="hero-copy">
+            <p class="hero-kicker reveal">
+              <span>가상 공간 음향 아카이브</span>
+              <span class="mono">작업 기록 형식 예시</span>
+            </p>
+            <h1 id="hero-h" class="reveal" style="--delay: 80ms">
+              침묵과 폭발의<br /><em>주파수</em>
+            </h1>
+            <p class="hero-statement reveal" style="--delay: 160ms">
+              오버톤은 소리가 공간에서 어떻게 달라지는지를 기록하는 방식을 보여 줍니다.
+              곡선과 아래 작업·장소·수치는 화면 구성을 위한 예시이며 실제 작업이나
+              협업 이력을 뜻하지 않습니다.
+            </p>
+          </div>
+          <div class="wave-surface">
+            <canvas id="wave" class="wave" aria-hidden="true"></canvas>
+          </div>
         </div>
       </section>
 
-      <!--
-        작업 아카이브 — 스태거 2열. 카드가 아니라 '벽에 걸린 목록'.
-        같은 간격을 주지 않는다: 짝수 작품은 오른쪽으로, 홀수는 왼쪽으로 쏠린다.
-      -->
       <section id="works" class="section works" aria-labelledby="works-h">
         <div class="wrap">
           <h2 id="works-h" class="works-h reveal">작업</h2>
+          <p class="muted reveal" style="--delay: 30ms">
+            아래 제목, 연도, 공간, 기술 조건은 음향 작업 아카이브의 표현 방식을 설명하는 예시입니다.
+          </p>
           <ol class="archive">
             <li class="work reveal">
               <p class="work-year mono">2026</p>
-              <h3>공명하는 방 — DDP 설치</h3>
+              <h3>공명하는 방 — 전시장 설치 예시</h3>
               <p>
-                종이 콘 스피커 48개가 천장에서 내려와 방 안의 소리를 0.8초 늦게
-                되돌려주는 설치. 관람객의 발소리가 악기가 된다.
+                종이 콘 스피커가 공간의 반사를 되돌려주는 설치 구성 예시입니다.
+                소리의 지연과 관람객 동선을 함께 기록하는 방식을 보여 줍니다.
               </p>
               <p class="work-meta mono">48ch · 공간지연 · 상설</p>
             </li>
             <li class="work work-b reveal" style="--delay: 60ms">
               <p class="work-year mono">2025</p>
-              <h3>무의 스펙트럼</h3>
+              <h3>무의 스펙트럼 — 공연 구성 예시</h3>
               <p>
-                아무 소리도 없는 방의 바닥 소음(−62dB)을 증폭해 들려주는
-                퍼포먼스. 침묵에는 평균 진폭이 있다.
+                조용한 공간의 바닥 소음을 다루는 공연 구성 예시입니다. 표기된 수치는
+                실제 측정값이나 공연 기록이 아닙니다.
               </p>
               <p class="work-meta mono">live · −62dB floor</p>
             </li>
             <li class="work reveal" style="--delay: 40ms">
               <p class="work-year mono">2024</p>
-              <h3> 파도의 인버전 — 제주</h3>
+              <h3>파도의 인버전 — 해안 설치 예시</h3>
               <p>
-                바람과 파도의 실측 데이터를 반대 위상으로 합성해 바다가 '삼키는'
-                소리를 만드는 해안 설치.
+                바람과 파도라는 소재를 반대 위상으로 해석하는 해안 설치 구성 예시입니다.
               </p>
               <p class="work-meta mono">field data · 6h loop</p>
             </li>
             <li class="work work-b reveal" style="--delay: 100ms">
               <p class="work-year mono">2023</p>
-              <h3>유리 진동자</h3>
+              <h3>유리 진동자 — 연주 설비 예시</h3>
               <p>
-                잔 12개에 각기 다른 공진 주파수를 실어 연주하는 설비. 연주자는
-                물의 높이를 조율한다.
+                유리잔의 높이와 공진을 조율하는 연주 설비 구성 예시입니다.
               </p>
               <p class="work-meta mono">glass · 220–940Hz</p>
             </li>
@@ -113,10 +110,6 @@
         </div>
       </section>
 
-      <!--
-        선언 — anti-grid의 정점: 문장 하나가 페이지 폭을 다 쓴다.
-        압축 스케일의 반대편. 이 페이지에서 가장 큰 텍스트 블록.
-      -->
       <section id="manifesto" class="section manifesto" aria-labelledby="manifesto-h">
         <div class="wrap">
           <h2 id="manifesto-h" class="sr-only">선언</h2>
@@ -125,23 +118,19 @@
             방이 좋아지는 것뿐이다.
           </p>
           <p class="manifesto-note reveal" style="--delay: 100ms">
-            우리는 음파를 시각화로 번역하지 않습니다. 시각화는 소리의 크기만
-            흉내 낼 뿐, 소리의 '방의 크기'를 옮기지 못합니다. 대신 우리는 방을
-            조율합니다 — 재생 목록이 아니라 잔향시간을 설계합니다.
+            이 구성은 음파의 크기보다 공간의 반사와 잔향을 먼저 읽게 합니다.
+            시각화가 소리의 모든 경험을 대신할 수 없다는 점을, 작업 기록의 순서로
+            보여 줍니다.
           </p>
         </div>
       </section>
 
-      <!-- 협업 마퀴 — 페이지에 하나뿐인 흐름 -->
-      <div class="marquee" role="group" 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>
+          <span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span><span>공공 전시장</span><span>도심 복합문화공간</span><span>콘서트홀</span><span>소극장</span><span>해안 야외 공연장</span>
         </div>
       </div>
 
-      <!--
-        사진 — 설치 현장 한 컷. 다크룸의 앰버 빔.
-      -->
       <section class="section photo" aria-label="설치 현장">
         <figure class="wrap photo-fig reveal">
           <img
@@ -151,36 +140,30 @@
             height="810"
             loading="lazy"
           />
-          <figcaption class="mono">공명하는 방 · 설치 뷰 · 2026</figcaption>
+          <figcaption class="mono">공명하는 방 · 설치 연출 이미지</figcaption>
         </figure>
       </section>
 
-      <!-- 연락 -->
       <section id="contact" class="section contact" aria-labelledby="contact-h">
         <div class="wrap contact-grid">
-          <h2 id="contact-h">연락</h2>
+          <h2 id="contact-h">구성 안내</h2>
           <p>
-            설치·공연·연구 협업 문의는 소리의 조건(공간 크기, 재생 시간, 청중 수)과
-            함께 보내주세요.
+            이 페이지는 공간 음향 작업을 설명하는 구성 예시입니다. 실제 설치·공연·연구
+            협업이나 연락을 접수하지 않습니다.
           </p>
-          <a class="contact-mail" href="mailto:lab@overtone.kr">lab@overtone.kr</a>
+          <a class="contact-mail" href="#main">작업 구성 다시 보기</a>
         </div>
       </section>
     </main>
 
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>오버톤 사운드랩 · 서울 마포</p>
-        <p class="mono foot-meta">© 2019–2026 · OVERTONE SOUND LAB</p>
+        <p>오버톤 사운드랩 · 가상 공간 음향 아카이브</p>
+        <p class="mono foot-meta">실제 협업 단체·장소·연락처를 제공하지 않습니다.</p>
       </div>
     </footer>
 
     <script>
-      /*
-        절차적 유사-FFT — 정현파 5개를 더하고 위상을 흐르게 한다.
-        오디오 파일도 디코딩도 없다(연구조사 R3의 교훈: 전체 파일 디코드는
-        수 초 메인스레드를 막는다). 화면 밖·reduced-motion 에서는 정지 프레임.
-      */
       const canvas = document.getElementById("wave");
       const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
       const ctx = canvas.getContext("2d");
@@ -197,7 +180,6 @@
 
       function draw(t) {
         ctx.clearRect(0, 0, w, h);
-        // 세 겹의 파형 — 시간차를 두고 겹친다
         for (let layer = 0; layer < 3; layer++) {
           ctx.beginPath();
           const amp = (h * 0.16) * (1 - layer * 0.28);
@@ -205,7 +187,7 @@
           const speed = 0.00042 * (1 + layer * 0.7);
           for (let x = 0; x <= w; x += 3) {
             const p = x / w;
-            const env = Math.exp(-Math.pow((p - 0.5) * 2.4, 2)); // 중앙 강조
+            const env = Math.exp(-Math.pow((p - 0.5) * 2.4, 2));
             const y =
               yMid +
               Math.sin(p * 21 + t * speed + layer * 2.1) * amp * env * Math.sin(p * Math.PI) +

apps/site/public/work/overtone-sound/styles/main.css

@@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");
 
 /* ==========================================================================
    오버톤 사운드랩 — anti-grid. 격자는 일부러 비틀었다.
@@ -137,28 +137,34 @@ a {
 /* ── 히어로 — 파형 위로 삐져나온 글자 ────────────────────────────────── */
 
 .hero {
-  position: relative;
-  min-height: 88svh;
+  min-height: min(44rem, 78svh);
   display: grid;
-  align-content: center;
-  overflow: clip;
+  align-items: center;
+  border-bottom: 1px solid var(--line);
 }
 .wave {
-  position: absolute;
   inset: 0;
+  display: block;
   width: 100%;
   height: 100%;
-  opacity: 0.9;
 }
 .hero-inner {
-  position: relative;
-  z-index: 2;
-  /* anti-grid: 텍스트 블록을 왼쪽 15% 축에 두고 오른쪽은 파형에 내준다 */
-  width: min(100% - 2 * var(--pad-inline), var(--container));
-  margin-left: max(var(--pad-inline), calc((100% - var(--container)) / 2));
-  margin-right: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: center;
   padding-block: var(--space-7);
 }
+.hero-copy {
+  min-width: 0;
+}
+.wave-surface {
+  min-width: 0;
+  height: clamp(18rem, 32vw, 25rem);
+  overflow: hidden;
+  border-left: 1px solid var(--line);
+  background: var(--surface-raised);
+}
 .hero-kicker {
   display: flex;
   justify-content: space-between;
@@ -180,8 +186,6 @@ a {
   margin-top: var(--space-4);
   max-width: 26em;
   color: var(--ink-muted);
-  /* 오른쪽으로 밀어낸다 — 정렬을 스스로 어긋나게 */
-  margin-left: clamp(0rem, 8vw, 7.5rem);
 }
 
 /* ── 섹션 공통 ────────────────────────────────────────────────────────── */
@@ -210,6 +214,9 @@ a {
   border-top: 1px solid var(--line);
   padding-top: var(--space-3);
   max-width: 26rem;
+  display: grid;
+  grid-template-columns: 4.25rem minmax(0, 1fr);
+  column-gap: var(--space-3);
 }
 /* 스태거: 짝수 작품은 아래로 밀고 오른쪽으로 당긴다 */
 .work-b {
@@ -218,16 +225,21 @@ a {
 }
 .work-year {
   color: var(--accent);
+  grid-column: 1;
+  grid-row: 1 / span 3;
 }
 .work h3 {
+  grid-column: 2;
   font-size: var(--step-2);
   margin-top: var(--space-2);
 }
 .work p:not(.mono) {
+  grid-column: 2;
   margin-top: var(--space-3);
   color: var(--ink-muted);
 }
 .work-meta {
+  grid-column: 2;
   margin-top: var(--space-3);
 }
 
@@ -280,6 +292,26 @@ a {
   }
 }
 
+/* 1920px 이하에서는 흐르는 복제열을 정적인 협업 목록으로 바꾼다.
+   트랙 자체를 화면 밖에 놓지 않아 작은 화면의 실제 오버플로도 사라진다. */
+@media (max-width: 1920px) {
+  .marquee-track {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    width: 100%;
+    gap: var(--space-3);
+    animation: none;
+  }
+  .marquee-track span {
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+  .marquee-track span:nth-child(n + 6) {
+    display: none;
+  }
+}
+
 /* ── 사진 ─────────────────────────────────────────────────────────────── */
 
 .photo-fig img {
@@ -307,7 +339,10 @@ a {
   max-width: 28em;
 }
 .contact-mail {
-  font-size: var(--step-2);
+  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   color: var(--accent);
   text-decoration: none;
   border-bottom: 1px solid var(--accent-dim);
@@ -356,6 +391,14 @@ a {
 /* ── 반응형 — 좁은 화면에서는 비틀림을 줄인다(읽힘이 위) ─────────────── */
 
 @media (max-width: 900px) {
+  .hero-inner {
+    grid-template-columns: 1fr;
+  }
+  .wave-surface {
+    height: 18rem;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
   .archive {
     grid-template-columns: 1fr;
   }
@@ -363,7 +406,6 @@ a {
     margin-top: 0;
     justify-self: stretch;
   }
-  .hero-statement,
   .manifesto-note {
     margin-left: 0;
   }
@@ -380,6 +422,9 @@ a {
   }
 }
 @media (max-width: 560px) {
+  .marquee-track {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .head-inner {
     flex-direction: column;
     align-items: flex-start;
@@ -390,3 +435,316 @@ a {
     justify-content: space-between;
   }
 }
+
+/* ── 2026-08-30: 빈 어두운 면 대신 조건이 읽히는 설치 아카이브 ───────
+   화면용 조판만 기존 인쇄/기본 규칙과 별도 cascade context로 둔다. */
+@media screen {
+body {
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px) center / min(18vw, 16rem) 100%,
+    var(--surface);
+}
+
+.site-head {
+  background: rgb(18 16 14 / 94%);
+}
+
+.head-inner {
+  min-height: 4.5rem;
+  align-items: center;
+}
+
+.wordmark {
+  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.55rem);
+  letter-spacing: -0.035em;
+}
+
+.nav a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.75rem;
+}
+
+.hero {
+  min-height: 0;
+  background:
+    radial-gradient(circle at 82% 44%, rgb(239 173 75 / 13%), transparent 27rem),
+    linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 55%);
+}
+
+.wave {
+  opacity: 0.72;
+  mix-blend-mode: screen;
+}
+
+.hero-inner {
+  display: grid;
+  align-items: center;
+  min-height: 0;
+  max-width: 78rem;
+  margin-inline: auto;
+  padding-block: var(--space-7);
+}
+
+.hero-kicker {
+  max-width: 32rem;
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-muted);
+  letter-spacing: 0.04em;
+}
+
+.hero h1 {
+  max-width: 13ch;
+  margin-top: var(--space-5);
+  font-size: clamp(3.6rem, 2rem + 5vw, 6.9rem);
+  font-weight: 600;
+  letter-spacing: -0.065em;
+  line-height: 0.98;
+}
+
+.hero-statement {
+  width: min(100%, 36rem);
+  margin-top: var(--space-5);
+  margin-left: clamp(0rem, 10vw, 10rem);
+  padding-left: var(--space-4);
+  border-left: 2px solid var(--accent);
+  color: var(--ink-muted);
+  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
+}
+
+.section {
+  padding-block: clamp(5rem, 7vw, 9rem);
+}
+
+.works .wrap {
+  max-width: 78rem;
+}
+
+.works-h {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: var(--space-4);
+  color: var(--accent);
+  letter-spacing: 0.12em;
+}
+
+.works-h::after {
+  content: "연도 · 장소 · 신호";
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  letter-spacing: 0;
+}
+
+.archive {
+  display: block;
+  margin-top: var(--space-5);
+  border-top: 1px solid var(--line);
+}
+
+.work,
+.work-b {
+  display: grid;
+  grid-template-columns: minmax(5.5rem, 0.28fr) minmax(0, 0.72fr) minmax(12rem, 0.42fr);
+  column-gap: var(--space-5);
+  max-width: none;
+  margin: 0;
+  padding: clamp(1.6rem, 3vw, 3rem) 0;
+  border-top: 0;
+  border-bottom: 1px solid var(--line);
+  align-items: start;
+}
+
+.work-year {
+  grid-row: 1 / span 3;
+  color: var(--accent);
+  font-size: clamp(1rem, 1vw, 1.25rem);
+}
+
+.work h3 {
+  grid-column: 2;
+  font-size: clamp(1.6rem, 1.7vw, 2.35rem);
+}
+
+.work p:not(.mono) {
+  grid-column: 2;
+  max-width: 34rem;
+  margin-top: var(--space-2);
+}
+
+.work-meta {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+  align-self: center;
+  margin: 0;
+  padding: var(--space-3);
+  border-left: 1px solid var(--line);
+  color: var(--ink-muted);
+}
+
+.manifesto {
+  overflow: hidden;
+  background:
+    linear-gradient(90deg, transparent 0 64%, rgb(239 173 75 / 15%) 64% calc(64% + 1px), transparent calc(64% + 1px)),
+    var(--surface-raised);
+}
+
+.manifesto .wrap {
+  max-width: 78rem;
+}
+
+.manifesto-line {
+  max-width: 18ch;
+  font-size: clamp(3rem, 2rem + 4.8vw, 6.5rem);
+  line-height: 1.08;
+}
+
+.manifesto-note {
+  max-width: 33rem;
+  margin-left: min(38vw, 26rem);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--accent-dim);
+}
+
+.marquee {
+  padding-block: var(--space-4);
+  background: #171411;
+}
+
+.marquee-track {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-inline: auto;
+  gap: var(--space-3);
+  animation: none;
+}
+
+.marquee-track span {
+  min-width: 0;
+  color: var(--ink-muted);
+  white-space: normal;
+}
+
+.marquee-track span:nth-child(n + 6) {
+  display: none;
+}
+
+.photo {
+  padding-top: var(--space-7);
+}
+
+.photo-fig {
+  max-width: 78rem;
+}
+
+.photo-fig img {
+  aspect-ratio: 16 / 7;
+  object-fit: cover;
+  border: 1px solid var(--line);
+}
+
+.photo-fig figcaption {
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--space-2);
+}
+
+.contact {
+  background: #171411;
+  border-block: 1px solid var(--line);
+}
+
+.contact-grid {
+  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 0.64fr) auto;
+  max-width: 78rem;
+}
+
+@media (max-width: 900px) {
+  .hero-statement,
+  .manifesto-note {
+    margin-left: 0;
+  }
+
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .work,
+  .work-b {
+    grid-template-columns: 5rem minmax(0, 1fr);
+    row-gap: var(--space-2);
+  }
+
+  .work-meta {
+    grid-column: 2;
+    grid-row: auto;
+    width: fit-content;
+    border-left: 0;
+    padding: 0;
+  }
+
+  .marquee-track {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .marquee-track span:nth-child(5) {
+    display: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .hero {
+    min-height: 0;
+  }
+
+  .hero h1 {
+    font-size: clamp(3.25rem, 14vw, 4.4rem);
+  }
+
+  .hero-kicker {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .works-h::after {
+    display: none;
+  }
+
+  .work,
+  .work-b {
+    grid-template-columns: 1fr;
+  }
+
+  .work-year,
+  .work h3,
+  .work p:not(.mono),
+  .work-meta {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .work-year {
+    margin-bottom: var(--space-1);
+  }
+
+  .marquee-track {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .marquee-track span:nth-child(4) {
+    display: none;
+  }
+
+  .photo-fig img {
+    aspect-ratio: 4 / 3;
+  }
+
+  .contact-mail {
+    font-size: clamp(1.25rem, 8vw, 1.6rem);
+  }
+}
+}

apps/site/public/work/overtone-sound/styles/tokens.css

@@ -23,16 +23,16 @@
   --leading-normal: 1.75;
 
   --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
 
-  --surface: #0e0d0b;
-  --surface-raised: #161411;
-  --ink: #ece7dd;
-  --ink-muted: #a09a8e;
-  --ink-faint: #6f695f;
-  --line: #27241f;
-  --accent: #e8a33d;        /* 앰버 — 선과 텍스트로만 */
-  --accent-dim: rgba(232, 163, 61, 0.35);
+  --surface: #12100e;
+  --surface-raised: #1d1915;
+  --ink: #f1ebe1;
+  --ink-muted: #b5aa9a;
+  --ink-faint: #91887c;
+  --line: #39322b;
+  --accent: #efad4b;        /* 앰버 — 선과 텍스트로만 */
+  --accent-dim: rgba(239, 173, 75, 0.38);
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -45,8 +45,8 @@
 
   --radius: 0;              /* 스튜디오 바닥에는 모서리가 없다 */
 
-  --container: 1152px;      /* R1 실측값 */
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --container: 78rem;
+  --pad-inline: clamp(1.25rem, 0.75rem + 3vw, 5.5rem);
 
   --dur-quick: 160ms;
   --dur-normal: 460ms;