feat: strengthen design skill and refresh all showcases

apps/site/public/work/baekje-celadon/assets/fonts/SOURCES.md

@@ -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.

apps/site/public/work/baekje-celadon/design.md

@@ -0,0 +1,17 @@
+# 비색의 침묵
+
+암실의 청자 사진을 주연으로 유지하고 회색 카드나 격자는 추가하지 않는다. 제1·2실의 방 번호, 제목, 재질 설명, 매크로 캡션을 공통 레일로 정리했다. 첫 사진은 기존 4:5 비율을 보존하고 관람 구성 CTA와 가상 관람 안내를 인접하게 둔다.
+
+| 판단 축 | 적용 | 한계 |
+| --- | --- | --- |
+| 구도 | Hofmann의 레일과 비대칭을 참고해 방 정보와 캡션을 같은 열에 맞췄다. | 전시 사진의 감상 효과를 보편적으로 예측하지 않는다. |
+| 타입 | Ruder를 참고해 방 번호와 제목·설명의 크기 차이를 명확히 했다. | 서체만으로 체류나 이해가 바뀐다고 단정하지 않는다. |
+| 색 | Albers를 참고해 어두운 바탕, 비색 강조, 밝은 CTA의 역할을 나눴다. | 실제 명도 대비는 브라우저 검증에서 확인한다. |
+
+토큰은 `--surface`, `--ink`, `--accent`, `--container`, `--space-*`를 유지한다. 로컬 MaruBuri 400/600은 `styles/fonts.css`, Pretendard는 기존 CDN을 유지한다. 가상 전시·관람 안내와 기존 앵커는 보존했다.
+
+## 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/baekje-celadon/index.html

@@ -3,15 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>비색의 침묵 · 고려청자 특별전</title>
+    <title>비색의 침묵 · 고려청자 전시 구성</title>
     <meta
       name="description"
-      content="천 년의 비취색, 흙과 불이 빚은 침묵의 곡선. 고려청자 유약의 빙렬과 상감을 세 개의 방에서 감상하는 특별전. 2026년 가을, 서울."
+      content="고려청자의 빙렬과 상감을 세 개의 방으로 읽는 가상 전시 구성입니다. 일정·장소·예약 정보는 예시입니다."
     />
-    <meta property="og:title" content="비색의 침묵 · 고려청자 특별전" />
+    <meta property="og:title" content="비색의 침묵 · 고려청자 전시 구성" />
     <meta
       property="og:description"
-      content="유약의 빙렬과 상감 문양을 세 개의 방에서 감상하는 특별전."
+      content="유약의 빙렬과 상감 문양을 세 개의 방으로 읽는 가상 전시 구성."
     />
     <meta property="og:type" content="website" />
     <meta name="theme-color" content="#121514" />
@@ -19,13 +19,13 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+      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"
     />
-    <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='%23121514'/%3E%3Cpath d='M11 6h10c-1 3-1 5 0 7 2 3 3 5 3 8 0 4-3 7-8 7s-8-3-8-7c0-3 1-5 3-8 1-2 1-4 0-7z' fill='none' stroke='%236FA08F' stroke-width='1.5'/%3E%3C/svg%3E"
@@ -47,10 +47,6 @@
     </header>
 
     <main id="main">
-      <!--
-        첫 방 — 암실. 전시 포스터가 아니라 첫 유물 하나.
-        명암이 곧 구조다: 사진이 어두울수록 유약이 가까워진다.
-      -->
       <section class="hero" aria-labelledby="hero-h">
         <div class="wrap hero-grid">
           <figure class="hero-figure reveal">
@@ -63,13 +59,13 @@
               fetchpriority="high"
             />
             <figcaption>
-              <span>청자 상감운학문 주자 · 12세기</span>
-              <span>호암미술관 소장</span>
+              <span>청자 주자 · 전시 연출 이미지</span>
+              <span>가상 전시 소품</span>
             </figcaption>
           </figure>
           <div class="hero-text">
             <p class="hero-kicker reveal" style="--delay: 100ms">
-              특별전 · 2026 가을
+              가상 전시 구성 · 고려청자
             </p>
             <h1 id="hero-h" class="reveal" style="--delay: 160ms">
               천 년의 비색은<br />말이 없다
@@ -80,17 +76,13 @@
               않고 세 개의 암실에 놓아 두었습니다.
             </p>
             <div class="hero-actions reveal" style="--delay: 300ms">
-              <a class="btn" href="#visit">도슨트 예약</a>
-              <p class="hero-note">9월 5일 – 11월 22일 · 국립중앙박물관 기획전시실</p>
+              <a class="btn" href="#visit">관람 구성 보기</a>
+              <p class="hero-note">일정·장소·예약 정보는 전시 구성 예시이며 실제 관람을 접수하지 않습니다.</p>
             </div>
           </div>
         </div>
       </section>
 
-      <!--
-        첫 번째 방 — 빙렬. 유약이 식으며 스스로 그은 그림.
-        풀블리드 판: 페이지에서 가장 큰 면적을 질감에 내어준다.
-      -->
       <section id="room-1" class="section plate" aria-labelledby="room1-h">
         <div class="wrap plate-head">
           <p class="room-no reveal">제1실</p>
@@ -110,15 +102,11 @@
             loading="lazy"
           />
           <figcaption class="wrap">
-            빙렬 확대 · 12세기 청자 표면 · 측광
+            <span>빙렬 확대 · 12세기 청자 표면 · 측광</span>
           </figcaption>
         </figure>
       </section>
 
-      <!--
-        두 번째 방 — 상감. 새기고 채우는 글자 없는 문장.
-        사진은 절반만. 나머지 절반은 문양의 문법을 텍스트로.
-      -->
       <section id="room-2" class="section" aria-labelledby="room2-h">
         <div class="wrap two">
           <div class="two-text">
@@ -151,35 +139,32 @@
         </div>
       </section>
 
-      <!--
-        관람 — 예약과 안내. 마지막 방은 서류다.
-      -->
       <section id="visit" class="section band" aria-labelledby="visit-h">
         <div class="wrap visit-grid">
           <div>
             <p class="room-no reveal">안내</p>
-            <h2 id="visit-h" class="reveal" style="--delay: 60ms">세 개의 방, 예약제</h2>
+            <h2 id="visit-h" class="reveal" style="--delay: 60ms">세 개의 방으로 보는 전시 구성</h2>
             <p class="reveal" style="--delay: 120ms">
-              암실 조명 때문에 회당 인원을 30명으로 제한합니다. 도슨트는 하루 세 번,
-              유약과 가마 이야기만 합니다.
+              조명과 동선이 관람 경험을 어떻게 바꾸는지 보여 주기 위한 예시입니다.
+              아래 일정과 해설 방식은 실제 전시 운영 정보가 아닙니다.
             </p>
           </div>
           <dl class="visit-dl reveal" style="--delay: 160ms">
             <div>
-              <dt>기간</dt>
+              <dt>전시 기간 예시</dt>
               <dd>2026년 9월 5일 – 11월 22일 · 월요일 휴관</dd>
             </div>
             <div>
-              <dt>시간</dt>
+              <dt>관람 시간 예시</dt>
               <dd>10:00–18:00 · 금·토 21:00까지</dd>
             </div>
             <div>
-              <dt>도슨트</dt>
+              <dt>해설 구성 예시</dt>
               <dd>11:00 / 14:00 / 16:00 · 회당 40분</dd>
             </div>
             <div>
               <dt>예약</dt>
-              <dd><a class="link" href="#visit">국립중앙박물관 예약 시스템</a></dd>
+              <dd>실제 예약 시스템과 연결되지 않습니다.</dd>
             </div>
           </dl>
         </div>
@@ -188,23 +173,10 @@
 
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>비색의 침묵 · 고려청자 특별전</p>
-        <p class="muted">국립중앙박물관 기획전시실 · 서울 용산</p>
+        <p>비색의 침묵 · 고려청자 전시 구성</p>
+        <p class="muted">가상 전시 프로젝트 · 장소와 소장 정보는 예시입니다.</p>
       </div>
     </footer>
 
-    <script>
-      const io = new IntersectionObserver(
-        (entries) => {
-          for (const e of entries) {
-            if (!e.isIntersecting) continue;
-            e.target.classList.add("is-in");
-            io.unobserve(e.target);
-          }
-        },
-        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
-      );
-      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
-    </script>
   </body>
 </html>

apps/site/public/work/baekje-celadon/styles/fonts.css

@@ -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;
+}

apps/site/public/work/baekje-celadon/styles/main.css

@@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");
 
 /* ==========================================================================
    비색의 침묵 — editorial-archival. 암실의 세 개의 방.
@@ -132,6 +132,7 @@ a {
 }
 .nav {
   display: flex;
+  flex-wrap: wrap;
   gap: clamp(var(--space-3), 2vw, var(--space-5));
   font-size: var(--step--1);
 }
@@ -151,13 +152,25 @@ a {
 /* ── 첫 방(히어로) ────────────────────────────────────────────────────── */
 
 .hero {
-  padding-block: var(--space-7);
+  display: grid;
+  align-items: center;
+  min-block-size: min(46rem, calc(100svh - 4rem));
+  padding-block: var(--space-6);
+  border-bottom: 1px solid var(--line);
 }
 .hero-grid {
   display: grid;
-  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
-  gap: var(--space-6) var(--space-7);
-  align-items: end;
+  grid-template-columns: minmax(15rem, 34rem) minmax(0, 1fr);
+  gap: clamp(var(--space-5), 6vw, var(--space-8));
+  align-items: center;
+}
+.hero-grid > *,
+.two > *,
+.visit-grid > * {
+  min-width: 0;
+}
+.hero-figure {
+  width: min(100%, 34rem);
 }
 .hero-figure img {
   display: block;
@@ -179,6 +192,10 @@ a {
   letter-spacing: 0.12em;
   margin-bottom: var(--space-4);
 }
+.hero-text {
+  max-width: 39rem;
+  padding-block: var(--space-4);
+}
 .hero-text .lead {
   margin-top: var(--space-4);
 }
@@ -194,7 +211,10 @@ a {
   color: var(--ink-faint);
 }
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding-inline: var(--space-4);
   background: var(--ink);
   color: var(--surface);
   font-weight: 500;
@@ -221,6 +241,9 @@ a {
 .section {
   padding-block: var(--space-8);
 }
+.section[id] {
+  scroll-margin-top: 6rem;
+}
 .band {
   background: var(--surface-raised);
   border-block: 1px solid var(--line);
@@ -229,16 +252,27 @@ a {
 /* ── 제1실 — 풀블리드 판 ──────────────────────────────────────────────── */
 
 .plate-head {
-  max-width: 40em;
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
+  column-gap: var(--space-5);
+  max-width: var(--container);
+}
+.plate-head .room-no {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  margin: 0;
 }
 .plate-head h2 {
+  grid-column: 2;
   margin-top: var(--space-1);
 }
 .plate-head .lead {
+  grid-column: 2;
   margin-top: var(--space-4);
 }
 .plate-figure {
-  margin-top: var(--space-6);
+  width: min(100% - 2 * var(--pad-inline), var(--container-wide));
+  margin: var(--space-6) auto 0;
 }
 .plate-figure img {
   display: block;
@@ -246,10 +280,16 @@ a {
   height: auto;
 }
 .plate-figure figcaption {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
+  column-gap: var(--space-5);
   font-size: var(--step--1);
   color: var(--ink-faint);
   margin-top: var(--space-2);
 }
+.plate-figure figcaption span {
+  grid-column: 2;
+}
 
 /* ── 제2실 — 2단 ──────────────────────────────────────────────────────── */
 
@@ -317,22 +357,22 @@ a {
 /* ── 등장 모션 ────────────────────────────────────────────────────────── */
 
 .reveal {
-  opacity: 0;
-  translate: 0 14px;
-  transition: opacity var(--dur-normal) var(--ease-soft),
-    translate var(--dur-normal) var(--ease-soft);
-  transition-delay: var(--delay, 0ms);
-}
-.reveal.is-in {
   opacity: 1;
   translate: 0 0;
 }
-@media (prefers-reduced-motion: reduce) {
-  .reveal {
-    opacity: 1;
-    translate: 0 0;
-    transition: none;
-  }
+.two-text {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 5fr);
+  column-gap: var(--space-5);
+}
+.two-text .room-no {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+  margin: 0;
+}
+.two-text h2,
+.two-text p {
+  grid-column: 2;
 }
 
 /* ── 반응형 ───────────────────────────────────────────────────────────── */
@@ -347,6 +387,13 @@ a {
   .hero-grid {
     align-items: start;
   }
+  .hero {
+    min-block-size: auto;
+  }
+  .hero-text {
+    order: -1;
+    padding-top: 0;
+  }
   .hero-figure {
     max-width: 26rem;
   }
@@ -354,6 +401,24 @@ a {
   .section {
     padding-block: var(--space-6);
   }
+  .plate-head,
+  .two-text,
+  .plate-figure figcaption {
+    grid-template-columns: 1fr;
+    row-gap: var(--space-3);
+  }
+  .plate-head .room-no,
+  .plate-head h2,
+  .plate-head .lead,
+  .two-text .room-no,
+  .two-text h2,
+  .two-text p {
+    grid-column: 1;
+    grid-row: auto;
+  }
+  .plate-figure figcaption span {
+    grid-column: 1;
+  }
 }
 @media (max-width: 560px) {
   .head-inner {
@@ -363,6 +428,6 @@ a {
   }
   .nav {
     width: 100%;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
 }

apps/site/public/work/baekje-celadon/styles/tokens.css

@@ -28,10 +28,10 @@
   --surface-raised: #191d1c;
   --ink: #eceae2;        /* 백색이 아니라 골동지의 밝기 */
   --ink-muted: #a7a69b;
-  --ink-faint: #7b7d76;
+  --ink-faint: #878982;
   --line: #2b302e;
   --accent: #8fbcaa;     /* 비색 — 텍스트용으로 밝힘. 배경 채움 금지 */
-  --accent-dim: #5e8274;
+  --accent-dim: #80ac99;
   --ink-bright: #ffffff; /* CTA hover */
 
   --space-1: 0.25rem;
@@ -45,8 +45,11 @@
 
   --radius: 2px;
 
-  --container: 1120px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  /* 읽는 폭과 유물 판은 분리한다. 2560px에서도 문장이 늘어지지 않고,
+     빙렬 이미지만 전시 벽처럼 넓어진다. */
+  --container: 1200px;
+  --container-wide: 1600px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);
 
   --dur-quick: 160ms;
   --dur-normal: 480ms;