feat: strengthen design skill and refresh all showcases

apps/site/public/work/muwol-coffee/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/muwol-coffee/design.md

@@ -0,0 +1,17 @@
+# 무월
+
+취향 좌표라는 주제는 유지하되 제목을 `취향을 고르는 향미의 좌표`로 고친다. 히어로 본문은 약 32rem 폭의 두 문단으로 나누고, 원두명·중량·예시 가격은 같은 행의 기준선에서 읽히게 한다. 향미 플롯은 축 설명과 점 라벨을 더 또렷하게 둔다.
+
+| 판단 축 | 적용 | 한계 |
+| --- | --- | --- |
+| 구도 | Hofmann의 정보 레일을 참고해 히어로 원장과 표의 수치 열을 정리했다. | 시선 이동을 보편적 결과로 주장하지 않는다. |
+| 타입 | Ruder를 참고해 원두명·중량·가격·축 라벨을 역할별로 조판했다. | 서체와 크기만으로 읽기 성과를 단정하지 않는다. |
+| 색 | Albers를 참고해 종이색, 앰버 강조, 반전 구독면의 경계를 유지했다. | 대비와 인지 결과는 실제 브라우저에서 재확인한다. |
+
+토큰은 `--surface`, `--accent`, `--font-mono`, `--space-*`, `--step-*`를 유지한다. 로컬 MaruBuri 400/600은 `styles/fonts.css`, Pretendard와 JetBrains Mono는 기존 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/muwol-coffee/index.html

@@ -3,25 +3,25 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>무월 · 싱글오리진 원두 정기구독</title>
+    <title>무월 · 원두 선택 기록 구성</title>
     <meta
       name="description"
-      content="원두마다 산미·단맛·바디를 같은 척도로 측정해 적고, 생두 매입가를 공개합니다. 격주 화요일 로스팅, 서울 서촌."
+      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="#F4F4F0" />
+    <meta name="theme-color" content="#f5efe6" />
 
     <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"
+      href="./styles/fonts.css?v=20260912all"
     />
     <link
       rel="stylesheet"
@@ -31,7 +31,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
     />
-    <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='%23F4F4F0'/%3E%3Cpath d='M16 7a7 7 0 0 1 7 7h-7z' fill='%237A3E1D'/%3E%3Cpath d='M16 9a7 7 0 0 0-7 7h7z' fill='%23181B18'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23181B18' stroke-width='1.5'/%3E%3C/svg%3E"
@@ -54,25 +54,21 @@
     </header>
 
     <main id="main">
-      <!--
-        히어로 — R1(coffeecollective.dk): 가격을 첫 화면에서 숨기지 않는다.
-        문구만으로 시작하는 대신 이번 주 로스 사진 한 장과 원두 둘(값 포함)을 같이 둔다.
-      -->
       <section class="hero" aria-labelledby="hero-h">
         <div class="wrap hero-grid">
           <div class="hero-text">
-            <p class="hero-label reveal">싱글오리진 로스터리 · 서울 서촌</p>
-            <h1 id="hero-h" class="reveal" style="--delay: 60ms">
-              취향은 형용사가 아니라<br />측정된 좌표입니다
-            </h1>
+            <p class="hero-label reveal">가상 로스터리 · 원두 선택 기록 예시</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 60ms">취향을 고르는 향미의 좌표</h1>
             <p class="lead reveal" style="--delay: 120ms">
-              과일 향이 난다는 말로는 추출 온도를 정할 수 없습니다. 무월은 원두마다
-              산미와 단맛, 바디를 같은 척도로 측정해 적고, 생두를 얼마에 들였는지까지
-              공개합니다. 마셔보기 전에 판단할 수 있어야 원두 고르는 즐거움이 시작됩니다.
+              과일 향이라는 말만으로는 추출 방법을 고르기 어렵습니다. 이 페이지는
+              향미 좌표와 매입 기록을 함께 읽는 방식을 보여 줍니다.
+            </p>
+            <p class="lead hero-disclaimer reveal" style="--delay: 140ms">
+              로트, 가격, 출고 정보는 실제 판매나 구독을 뜻하지 않는 예시입니다.
             </p>
             <div class="hero-actions reveal" style="--delay: 180ms">
-              <a class="btn" href="#plan">격주 구독 시작하기</a>
-              <p class="hero-note">격주 화요일 로스팅 출고 · 언제든 해지</p>
+              <a class="btn" href="#plan">구독 구성 보기</a>
+              <p class="hero-note">가상 로트·가격·출고 안내 예시 · 실제 주문과 구독을 받지 않습니다.</p>
             </div>
           </div>
 
@@ -85,29 +81,24 @@
               loading="eager"
               fetchpriority="high"
             />
-            <figcaption>이번 주 첫 로스 · 8월 19일</figcaption>
+            <figcaption>로스팅 연출 이미지 · 가상 로트 기록</figcaption>
           </figure>
 
-          <!-- 이번 주 원두 — 카드가 아니라 원장의 첫 두 줄 -->
           <dl class="hero-beans reveal" style="--delay: 240ms">
             <div class="bean-row">
               <dt>에티오피아 구지 우라가</dt>
               <dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
-              <dd class="bean-price"><span>100g</span> 8,500원</dd>
+              <dd class="bean-price"><span>100g</span> 예시 8,500원</dd>
             </div>
             <div class="bean-row">
               <dt>콜롬비아 엘 파라이소</dt>
               <dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
-              <dd class="bean-price"><span>100g</span> 11,000원</dd>
+              <dd class="bean-price"><span>100g</span> 예시 11,000원</dd>
             </div>
           </dl>
         </div>
       </section>
 
-      <!--
-        척도 — 향미 좌표계. 히어로의 계기판 노릇을 내려놓고
-        본문의 척도로 옮긴다. 눈금과 점만 남긴다.
-      -->
       <section id="scale" class="section" aria-labelledby="scale-h">
         <div class="wrap scale-grid">
           <div class="scale-text">
@@ -128,12 +119,12 @@
             </ul>
           </div>
           <figure class="scale-plot reveal">
+            <p class="plot-note">가로축: 산미에서 바디까지 · 세로축: 기록값 0–10</p>
             <svg
               viewBox="0 0 520 340"
               role="img"
               aria-label="산미-바디 2차원 좌표. 우라가는 산미 높음, 엘 파라이소는 단맛 높음, 엘 소코로는 바디 높음."
             >
-              <!-- 눈금 격자 -->
               <g class="grid">
                 <line x1="56" y1="40" x2="56" y2="280" />
                 <line x1="56" y1="280" x2="500" y2="280" />
@@ -144,14 +135,12 @@
                 <line x1="56" y1="100" x2="500" y2="100" stroke-dasharray="2 6" />
                 <line x1="56" y1="220" x2="500" y2="220" stroke-dasharray="2 6" />
               </g>
-              <!-- 축 이름 -->
               <g class="axis-labels">
                 <text x="56" y="302">산미 →</text>
                 <text x="500" y="302" text-anchor="end">바디 →</text>
                 <text x="46" y="46" text-anchor="end">10.0</text>
                 <text x="46" y="286" text-anchor="end">0</text>
               </g>
-              <!-- 로트 점 -->
               <g class="points">
                 <circle cx="140" cy="62" r="5" />
                 <text x="140" y="46" text-anchor="middle">우라가 8.8</text>
@@ -161,22 +150,18 @@
                 <text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
               </g>
             </svg>
-            <figcaption>8월 3주차 로트 실측 · 좌표는 주마다 다시 놓입니다</figcaption>
+            <figcaption>가상 로트의 향미 좌표 예시 · 실제 커핑 결과가 아닙니다</figcaption>
           </figure>
         </div>
       </section>
 
-      <!--
-        원장 — 이 페이지의 신뢰 장치 (R1: 거래 내역 공개가 이 업종의 스펙).
-        밴드를 살짝 눌러 표가 페이지의 중심임을 알린다.
-      -->
       <section id="ledger" class="section band" aria-labelledby="ledger-h">
         <div class="wrap">
           <div class="ledger-head">
-            <h2 id="ledger-h">생두 매입 원장</h2>
+            <h2 id="ledger-h">생두 매입 기록 예시</h2>
             <p class="muted">
-              농장에 돌아가는 돈이 얼마인지 보여주는 일이 스페셜티의 조건이라
-              생각합니다. 1kg당 매입가와 가공 방식까지 로트 단위로 남깁니다.
+              생산자, 가공, 매입가, 커핑을 한 줄에 함께 읽는 기록 형식입니다. 아래
+              농장명·가공 정보·가격·점수는 실제 거래나 품질 평가가 아닌 예시입니다.
             </p>
           </div>
           <div class="table-wrap reveal">
@@ -219,14 +204,11 @@
             </table>
           </div>
           <p class="ledger-note muted">
-            운임·통관·관세는 포함하지 않은 현지 출하가이며, 환율은 매입일 기준입니다.
+            표의 매입가와 점수는 원두 기록 화면의 정보 구조를 설명하기 위한 예시 값입니다.
           </p>
         </div>
       </section>
 
-      <!--
-        레시피 — 사진과 사양. 사양은 목록의 주인공이 아니라 사진의 각주다.
-      -->
       <section id="recipe" class="section" aria-labelledby="recipe-h">
         <div class="wrap recipe-grid">
           <figure class="recipe-photo reveal">
@@ -237,13 +219,13 @@
               height="1200"
               loading="lazy"
             />
-            <figcaption>서촌 매장 · 오후 첫 잔</figcaption>
+            <figcaption>드립 연출 이미지 · 추출 카드 예시</figcaption>
           </figure>
           <div class="recipe-text">
             <h2 id="recipe-h">원두 18g, 물 288g</h2>
             <p>
-              구독 패키지에는 원두 밀도에 맞춘 분쇄도와 주수 간격을 적은 카드 한 장이
-              들어갑니다. 드립의 변주는 그 다음 문제입니다.
+              이 구성에서는 원두마다 분쇄도와 주수 간격을 한 장의 카드로 정리합니다.
+              아래 값은 추출 방식을 읽는 예시이며 제품 동봉이나 판매를 뜻하지 않습니다.
             </p>
             <dl class="spec">
               <div>
@@ -271,31 +253,26 @@
         </div>
       </section>
 
-      <!--
-        구독 — 회색조에서 가장 어두운 블록. 이 페이지의 유일한 강한 면.
-        (1단계 회색조 위계 계획의 실행: CTA가 1위 덩어리)
-      -->
       <section id="plan" class="section plan" aria-labelledby="plan-h">
         <div class="wrap plan-grid">
           <div class="plan-text">
-            <h2 id="plan-h">격주, 서로 다른 좌표의<br />원두 두 종</h2>
+            <h2 id="plan-h">격주 구성 예시,<br />서로 다른 원두 두 종</h2>
             <p>
-              2주마다 화요일 아침, 산미형 한 종과 밸런스형 한 종(각 100g)을 볶어
-              보냅니다. 원두는 시음 후 남는 양이 없어 다음 주에 같은 로트를 못 드릴 수
-              있습니다.
+              산미형 한 종과 밸런스형 한 종을 함께 제안하는 구독 구성을 예시로
+              보여 줍니다. 원두 종류, 발송 주기, 사은품, 가격은 실제 판매 조건이 아닙니다.
             </p>
             <ul class="plan-list">
-              <li>원두별 추출 카드 동봉 — 분쇄도·온도·주수</li>
-              <li>아로마 밸브 틴케이스 첫 회 증정</li>
-              <li>출장·휴가 주는 앱에서 건너뛰기</li>
+              <li>원두별 추출 카드 구성 — 분쇄도·온도·주수</li>
+              <li>틴케이스 동봉 방식 예시</li>
+              <li>건너뛰기와 해지 정보를 함께 보여 주는 구성</li>
             </ul>
           </div>
           <div class="plan-box">
             <p class="plan-price">
-              <span>28,000원</span><span class="plan-unit">회당 · 배송비 포함</span>
+              <span>예시 28,000원</span><span class="plan-unit">회당 · 배송비 포함</span>
             </p>
-            <a class="btn btn-inverse" href="#plan">격주 구독 시작하기</a>
-            <p class="plan-note">200g(100g×2) · 첫 회는 다음 화요일에 출고됩니다</p>
+            <a class="btn btn-inverse" href="#plan">구독 구성 다시 보기</a>
+            <p class="plan-note">200g(100g×2) 구성 예시 · 실제 출고하지 않습니다</p>
           </div>
         </div>
       </section>
@@ -303,14 +280,12 @@
 
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>무월 로스터리 · 서울 종로구 옥인길 18</p>
-        <p class="muted">화요일 로스팅 · 목요일부터 토요일까지 문을 엽니다</p>
-        <p class="muted">roastery@muwol.kr</p>
+        <p>무월 · 가상 로스터리 기록 구성</p>
+        <p class="muted">실제 매장, 원두 판매, 구독, 연락처를 제공하지 않습니다.</p>
       </div>
     </footer>
 
     <script>
-      /* 목요일의 화원과 같은 문법 — 한 번 보이면 유지, 스크롤 이벤트 없음 */
       const io = new IntersectionObserver(
         (entries) => {
           for (const e of entries) {

apps/site/public/work/muwol-coffee/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/muwol-coffee/styles/main.css

@@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");
 
 /* ==========================================================================
    무월 — quiet-commerce. 종이 원장의 문법.
@@ -136,10 +136,14 @@ a {
 
 .nav {
   display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
   gap: clamp(var(--space-3), 2vw, var(--space-5));
   font-size: var(--step--1);
 }
 .nav a {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   text-decoration: none;
   color: var(--ink-muted);
   padding-block: 2px;
@@ -164,6 +168,12 @@ a {
   gap: var(--space-7) var(--space-6);
   align-items: start;
 }
+.hero-grid > *,
+.scale-grid > *,
+.recipe-grid > *,
+.plan-grid > * {
+  min-width: 0;
+}
 
 .hero-label {
   font-size: var(--step--1);
@@ -179,6 +189,9 @@ a {
 .hero-text .lead {
   margin-top: var(--space-4);
 }
+.hero-text .hero-disclaimer {
+  margin-top: var(--space-3);
+}
 
 .hero-actions {
   margin-top: var(--space-5);
@@ -194,7 +207,9 @@ a {
 }
 
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
   background: var(--accent);
   color: var(--accent-ink);
   font-weight: 500;
@@ -235,7 +250,7 @@ a {
 }
 .bean-row {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) max-content;
   align-items: baseline;
   column-gap: var(--space-4);
   padding-block: var(--space-3);
@@ -263,10 +278,12 @@ a {
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--space-2);
 }
 .bean-price span {
   color: var(--ink-faint);
-  margin-right: var(--space-2);
   font-size: var(--step--1);
 }
 
@@ -275,6 +292,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);
@@ -333,7 +353,7 @@ a {
 }
 .axis-labels text {
   font-family: var(--font-body);
-  font-size: 13px;
+  font-size: 15px;
   fill: var(--ink-faint);
 }
 .points circle {
@@ -347,9 +367,14 @@ a {
 }
 .points text {
   font-family: var(--font-body);
-  font-size: 13px;
+  font-size: 15px;
   fill: var(--ink-muted);
 }
+.plot-note {
+  margin-bottom: var(--space-3);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
 
 /* ── 원장(밴드) ───────────────────────────────────────────────────────── */
 
@@ -555,7 +580,7 @@ tbody th {
   }
   .nav {
     width: 100%;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
   .bean-row {
     grid-template-columns: 1fr;
@@ -565,7 +590,280 @@ tbody th {
     grid-column: 1;
     grid-row: auto;
   }
+  .bean-price {
+    flex-wrap: wrap;
+    white-space: normal;
+  }
   .plan-box {
     padding: var(--space-4);
   }
 }
+thead .num {
+  text-align: right;
+}
+
+/* ── 2026-08-30: 로스터의 좌표와 원장이 한 화면의 기준선이 되게 한다 ──
+   화면용 조판만 기존 인쇄/기본 규칙과 별도 cascade context로 둔다. */
+@media screen {
+:root {
+  --surface: #f5efe6;
+  --surface-raised: #ece3d6;
+  --surface-inverse: #202019;
+  --ink: #29251f;
+  --ink-muted: #60594f;
+  --ink-faint: #695d50;
+  --line: #d2c6b5;
+  --line-inverse: #575449;
+  --accent: #8a4524;
+  --accent-hover: #6d3219;
+  --accent-ink: #fff9ef;
+  --container: 76rem;
+  --pad-inline: clamp(1.25rem, 0.7rem + 3vw, 5.5rem);
+  --space-8: clamp(5rem, 3.5rem + 7vw, 10rem);
+}
+
+body {
+  background:
+    linear-gradient(90deg, transparent 0, transparent calc(50% - 0.5px), rgb(80 56 31 / 5%) calc(50% - 0.5px), rgb(80 56 31 / 5%) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
+    var(--surface);
+}
+
+.site-head {
+  background: rgb(245 239 230 / 94%);
+}
+
+.head-inner {
+  min-height: 4.5rem;
+  align-items: center;
+}
+
+.wordmark {
+  font-size: clamp(1.35rem, 1rem + 0.8vw, 1.7rem);
+  letter-spacing: -0.04em;
+}
+
+.nav a {
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.hero {
+  padding-block: clamp(3.5rem, 4vw, 6rem) var(--space-8);
+}
+
+.hero-grid {
+  grid-template-columns: minmax(0, 0.94fr) minmax(18rem, 0.82fr);
+  gap: clamp(2.5rem, 6vw, 7.5rem);
+  align-items: center;
+}
+
+.hero-text {
+  max-width: 39rem;
+}
+
+.hero-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.hero h1 {
+  max-width: 11ch;
+  font-size: clamp(2.8rem, 2rem + 3.4vw, 4.8rem);
+  letter-spacing: -0.045em;
+}
+
+.hero-text .lead {
+  max-width: 32rem;
+  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1rem);
+}
+
+.hero-actions {
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.btn {
+  min-height: 3rem;
+  padding-inline: var(--space-4);
+  box-shadow: 5px 5px 0 rgb(138 69 36 / 14%);
+  max-inline-size: 100%;
+  justify-content: center;
+  text-align: center;
+  white-space: normal;
+}
+
+.hero-photo {
+  position: relative;
+  max-width: 31rem;
+  justify-self: end;
+}
+
+.hero-photo::before {
+  content: "이번 로스의 질감";
+  position: absolute;
+  z-index: 1;
+  top: -1.1rem;
+  left: -1.1rem;
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-inverse);
+  color: var(--ink-inverse);
+  font-size: var(--step--1);
+}
+
+.hero-photo img,
+.recipe-photo img {
+  aspect-ratio: 4 / 5;
+  object-fit: cover;
+  box-shadow: 1.25rem 1.25rem 0 var(--surface-raised);
+}
+
+.hero-beans {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 var(--space-6);
+  margin-top: var(--space-3);
+}
+
+.bean-row {
+  min-width: 0;
+  padding-block: var(--space-4);
+}
+
+.bean-row dt {
+  font-size: var(--step-1);
+}
+
+.section {
+  position: relative;
+}
+
+.scale-grid,
+.recipe-grid,
+.plan-grid {
+  gap: clamp(2.5rem, 7vw, 8rem);
+}
+
+.scale-text,
+.recipe-text {
+  max-width: 36rem;
+}
+
+.scale-plot {
+  padding: clamp(1rem, 3vw, 2.5rem);
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+}
+
+.band {
+  background: #e7dccd;
+  border-block: 1px solid var(--line);
+}
+
+.ledger-head {
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1fr);
+  max-width: none;
+  gap: var(--space-6);
+  align-items: end;
+}
+
+.ledger-head p {
+  margin: 0;
+}
+
+.table-wrap {
+  background: rgb(255 250 242 / 72%);
+  border: 1px solid var(--line);
+}
+
+.plan {
+  background:
+    radial-gradient(circle at 84% 18%, rgb(160 81 40 / 28%), transparent 28rem),
+    var(--surface-inverse);
+}
+
+.plan-box {
+  max-width: 28rem;
+  min-inline-size: 0;
+  justify-self: end;
+  background: rgb(255 249 239 / 4%);
+}
+.plan-box .btn {
+  inline-size: 100%;
+}
+
+.site-foot {
+  background: #e9dfd2;
+}
+
+@media (min-width: 120rem) {
+  .hero-grid {
+    grid-template-columns: minmax(34rem, 0.95fr) minmax(26rem, 0.75fr);
+    max-width: 84rem;
+  }
+
+  .hero-photo {
+    max-width: 34rem;
+  }
+
+  .scale-grid,
+  .recipe-grid,
+  .plan-grid {
+    max-width: 72rem;
+  }
+}
+
+@media (max-width: 900px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-photo {
+    justify-self: start;
+    max-width: 100%;
+    padding: 0 1.25rem 1.25rem 0;
+  }
+
+  .hero-beans,
+  .ledger-head {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .ledger-head p {
+    margin-top: var(--space-3);
+  }
+
+  .plan-box {
+    justify-self: stretch;
+    max-width: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .hero {
+    padding-top: var(--space-5);
+  }
+
+  .hero h1 {
+    font-size: clamp(2.55rem, 10vw, 3.4rem);
+  }
+
+  .hero-photo::before {
+    top: -0.75rem;
+    left: 0;
+  }
+
+  .hero-photo img,
+  .recipe-photo img {
+    box-shadow: 0.75rem 0.75rem 0 var(--surface-raised);
+  }
+}
+}

apps/site/public/work/muwol-coffee/styles/tokens.css

@@ -15,7 +15,7 @@
   --step-0: 1rem;                                      /* 16px — 본문 */
   --step-1: 1.25rem;                                   /* 20px — 소제목 */
   --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);  /* 28px — 섹션 표제 */
-  --step-3: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);      /* 64px — 디스플레이 */
+  --step-3: clamp(1.5rem, 0.6rem + 3.4vw, 3.25rem);    /* 52px — 320px에서도 두 줄 */
 
   --leading-tight: 1.28;
   --leading-normal: 1.75;
@@ -32,7 +32,7 @@
   --surface-inverse: #181b18;
   --ink: #181b18;
   --ink-muted: #585c56;
-  --ink-faint: #8c908a;
+  --ink-faint: #696e68;
   --ink-inverse: #f4f4f0;
   --ink-inverse-muted: #a8aca4;