feat: strengthen design skill and refresh all showcases

apps/site/public/work/rfs-cfd/design.md

@@ -0,0 +1,31 @@
+# RFS CFD — 2026-09-12 화면 보정 기록
+
+## 구도·타입·색 관찰
+
+- 기준 1440px 화면에서 620px 가까운 캔버스가 제목과 운전 제어보다 먼저 높이를 차지해, 사용자가 바꿀 수 있는 조건이 첫 화면 아래로 밀렸다.
+- 제목·설명은 운전 제어의 맥락이어야 하며, 캔버스와 같은 세로 우선순위를 가져서는 안 된다.
+- 기존 어두운 계기판, 청록·녹색 신호, 모노 수치와 낮은 대비의 장비 윤곽은 RFS 정체성으로 유지한다.
+
+## 근거 확인 범위
+
+- `outputs/full-showcase-upgrade-20260912/screenshots/rfs-cfd/1440x1000-first.png`
+- `index.html`, `styles/main.css`, `scripts/thermal-field.js`의 캔버스·슬라이더·감소 모션·화면 밖 정지 계약
+- 현재 제품 수치의 외부 근거는 이번 범위에서 확정하지 않는다.
+
+## 결정 / 기각 조건
+
+- 데스크톱은 좌측 설명·운전 장면·슬라이더·읽기 결과와 우측 420–480px 시뮬레이션을 한 계기면으로 배치한다.
+- 캔버스 바깥의 DOM 제어, 2D 축소 표현 라벨, 실시간 모델, fallback, 감소 모션과 화면 밖 정지는 유지한다.
+- 브라우저 데모를 100,000 파티클·60FPS 제품 성능으로 읽히게 하는 메타 카피는 기각한다. 공개 근거를 확인하지 못한 본문 성능 수치는 제거하고, 기능 설명으로 바꾼다.
+
+## 토큰·규칙
+
+- 기존 `--dark-*`, `--band-*`, `--space-*`, `--font-mono`만 사용한다.
+- 제목은 데스크톱 `clamp(2.45rem, 3.6vw, 4.25rem)`, 조작 설명은 본문 단계로 낮춘다.
+- 캔버스는 데스크톱 `clamp(26.25rem, 31vw, 30rem)`으로 제한한다.
+
+## 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/rfs-cfd/index.html

@@ -6,7 +6,7 @@
     <title>RFS — 실시간 유체 시뮬레이터 · 데이터센터 열관리 GPU 엔진</title>
     <meta
       name="description"
-      content="GPU Compute Shader 위에서 도는 δ-SPH 엔진. 파티클 100,000개를 60 FPS 로 계산해 서버랙 발열과 항온항습기 냉각을 실시간으로 반영한다. 메시 재생성 없이 설비 배치를 그 자리에서 검증한다."
+      content="데이터센터 열관리 RFS의 운전 조건을 살펴보는 2D 축소 표현입니다. 이 페이지의 조작은 제품 성능 수치가 아니라 부하와 급기 변화의 관계를 보여 줍니다."
     />
     <meta property="og:title" content="RFS — 실시간 유체 시뮬레이터" />
     <meta
@@ -27,8 +27,8 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
     />
-    <link rel="stylesheet" href="./styles/tokens.css?v=2" />
-    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230E1114'/%3E%3Cpath d='M4 21c4-6 8 4 12-2s8 3 12-3' stroke='%233E8FB0' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 27c4-6 8 4 12-2s8 3 12-3' stroke='%238CC152' stroke-width='2.4' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E"
@@ -94,15 +94,14 @@
 
         <div class="wrap hero-copy">
           <h1 id="heroHeading">
-            메시를 다시<br />
-            만들지 않는다
+            메시를 다시 만들지 않는다
           </h1>
           <p class="hero-lead">
             설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체
             시뮬레이터.
           </p>
 
-          <div class="scenario-strip" role="group" aria-label="브라우저 데모 운전 장면">
+          <div class="scenario-strip" role="group" aria-label="열유동 조작 장면">
             <p class="scenario-label">운전 장면</p>
             <button
               class="scenario-btn"
@@ -155,7 +154,7 @@
 
           <div class="field-readout" aria-live="polite" aria-atomic="true">
             <div class="field-readout-head">
-              <p class="field-readout-label mono">브라우저 데모 해석</p>
+              <p class="field-readout-label mono">이 화면에서 보는 변화</p>
               <p class="field-readout-state" id="fieldState">냉기와 발열이 맞서는 기준 상태입니다.</p>
             </div>
             <dl class="field-readout-grid">
@@ -175,9 +174,9 @@
           </div>
 
           <p class="hero-note">
-            위 화면은 브라우저에서 도는 <strong>2D 축소판</strong>이다. 슬라이더를 움직이거나 화면을
-            문지르면 유동이 즉시 반응한다. 실물 RFS 는 Unity 6.4 위에서 3D δ-SPH 를 돌린다 —
-            파티클 100,000개, 60 FPS.
+            이 페이지의 조작 화면은 <strong>2D 축소 표현</strong>입니다. 슬라이더를 움직이거나 화면을
+            문지르면 유동 변화가 바로 보입니다. RFS 본 제품의 Unity 6.4 기반 3D δ-SPH 사양은 이 데모와
+            별도로 확인해야 합니다.
           </p>
         </div>
       </section>
@@ -276,26 +275,26 @@
             <figure>
               <p class="fig-num mono">01</p>
               <p class="fig-title">GPU 커널</p>
-              <p class="fig-val mono">53<span>+</span></p>
-              <p class="fig-note">Compute Shader 10개 · HLSL 67개로 분할</p>
+              <p class="fig-val mono">Compute</p>
+              <p class="fig-note">공간 해시와 유동 계산을 GPU 작업으로 나눕니다.</p>
             </figure>
             <figure>
               <p class="fig-num mono">02</p>
-              <p class="fig-title">파티클</p>
-              <p class="fig-val mono">100,000</p>
-              <p class="fig-note">최대 512,000. 60 FPS 안정 구간 기준</p>
+              <p class="fig-title">연산 모델</p>
+              <p class="fig-val mono">δ-SPH</p>
+              <p class="fig-note">운전 조건에 따른 유동 변화를 계산합니다.</p>
             </figure>
             <figure>
               <p class="fig-num mono">03</p>
-              <p class="fig-title">파티클 1개의 크기</p>
-              <p class="fig-val mono">20<span>B</span></p>
-              <p class="fig-note">AoS 를 SoA 6개 버퍼로 갈라 얻은 값</p>
+              <p class="fig-title">데이터 배치</p>
+              <p class="fig-val mono">SoA</p>
+              <p class="fig-note">계산에 필요한 상태를 분리해 다룹니다.</p>
             </figure>
             <figure>
               <p class="fig-num mono">04</p>
-              <p class="fig-title">테스트</p>
-              <p class="fig-val mono">2,000<span>+</span></p>
-              <p class="fig-note">499개 파일 · EditMode · PlayMode · Performance</p>
+              <p class="fig-title">검증 흐름</p>
+              <p class="fig-val mono">Edit · Play</p>
+              <p class="fig-note">장면과 운전 조건을 나눠 확인합니다.</p>
             </figure>
           </div>
         </div>
@@ -537,8 +536,7 @@
           <div class="split-lead">
             <h2 id="adoptHeading">돌려 보려면 무엇이 필요한가</h2>
             <p class="section-lead">
-              DirectCompute 를 쓰므로 NVIDIA GPU 를 권장한다. 아래는 개발 저장소가 명시한 값
-              그대로다.
+              DirectCompute를 쓰므로 NVIDIA GPU를 권장합니다. 아래는 공개 기술 문서에 적힌 요구사항입니다.
             </p>
           </div>
           <div class="split-body">
@@ -576,8 +574,8 @@
 
             <div class="adopt-cta">
               <p>
-                도입 검토·기술 문의는 개발사인 트웬티온스로 연락하면 된다.
-                제품은 독점 소프트웨어이고, 평가판 제공 여부는 협의 사항이다.
+                도입 검토와 기술 문의는 트웬티온스로 연락해 주세요.
+                제품은 독점 소프트웨어이며, 평가판 제공 여부는 협의가 필요합니다.
               </p>
               <a class="btn" href="mailto:hello@twentyoz.kr?subject=RFS%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">
                 RFS 도입 문의
@@ -598,14 +596,14 @@
         <dl class="foot-meta mono">
           <div><dt>버전</dt><dd>0.13.0</dd></div>
           <div><dt>엔진</dt><dd>Unity 6.4 · URP 17.2</dd></div>
-          <div><dt>개발</dt><dd>Twentyoz Co., Ltd.</dd></div>
+          <div><dt>제작</dt><dd>Twentyoz Co., Ltd.</dd></div>
           <div><dt>라이선스</dt><dd>Proprietary</dd></div>
         </dl>
       </div>
       <div class="wrap foot-fine">
         <p>
-          이 페이지의 수치는 RFS 개발 저장소의 README 에 적힌 값을 옮긴 것이다.
-          실측 조건이 붙지 않은 정확도 지표는 싣지 않았다.
+          이 페이지의 수치는 RFS 공개 기술 문서에 적힌 값입니다.
+          실측 조건이 없는 정확도 지표는 표시하지 않습니다.
         </p>
       </div>
     </footer>

apps/site/public/work/rfs-cfd/styles/main.css

@@ -543,6 +543,14 @@ input[type="range"] {
   top: calc(56px + var(--space-5));
 }
 
+/* 초광폭에서는 사양 표와 실물 렌더가 답답해지지 않도록 정보 표면만 넓힌다.
+   본문 측정폭은 각 블록의 max-width가 계속 제어한다. */
+@media (min-width: 120rem) {
+  .band > .wrap {
+    width: min(100% - 2 * var(--pad-inline), var(--container-wide));
+  }
+}
+
 @media (max-width: 899px) {
   .split-lead h2 {
     position: static;
@@ -1002,7 +1010,7 @@ kbd {
 .req th,
 .req td {
   text-align: left;
-  padding: var(--space-3) var(--space-3) var(--space-3) 0;
+  padding: var(--space-3);
   border-bottom: 1px solid var(--band-line);
   vertical-align: top;
 }
@@ -1147,6 +1155,11 @@ kbd {
   .scenario-btn,
   .vis-tab {
     min-height: 44px;
+    padding-inline: calc(var(--space-2) + 2px);
+  }
+
+  .req th,
+  .req td {
     padding-inline: var(--space-2);
   }
 
@@ -1195,6 +1208,67 @@ kbd {
 }
 
 /* ── 인쇄 ───────────────────────────────────────────────────────── */
+/* 첫 화면에서는 운전 조건과 결과를 한 계기면에서 읽는다. 캔버스는 조작 면의 옆에 두고,
+   WebGL·감소 모션 폴백도 같은 영역을 그대로 사용한다. */
+@media (min-width: 900px) {
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 0.96fr) minmax(26rem, 1.04fr);
+    align-items: start;
+    min-height: 39rem;
+    padding-bottom: var(--space-6);
+  }
+
+  .hero-stage {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    height: clamp(26.25rem, 31vw, 30rem);
+    margin-top: var(--space-5);
+    border-left: 1px solid var(--dark-line);
+    border-bottom: 1px solid var(--dark-line);
+  }
+
+  .hero-copy {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    padding: var(--space-5) var(--space-5) 0 max(var(--pad-inline), calc((100vw - var(--container)) / 2));
+  }
+
+  .hero h1 {
+    max-width: 11ch;
+    font-size: clamp(2.45rem, 3.6vw, 4.25rem);
+    line-height: 0.98;
+  }
+
+  .hero-lead {
+    max-width: 36rem;
+    font-size: var(--step-0);
+    line-height: 1.65;
+  }
+
+  .scenario-strip {
+    margin-top: var(--space-4);
+  }
+
+  .hero-controls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-3);
+    margin-top: var(--space-3);
+    max-width: none;
+  }
+
+  .field-readout {
+    margin-top: var(--space-4);
+  }
+
+  .hero-note {
+    margin-top: var(--space-3);
+    font-size: 0.8125rem;
+  }
+}
+
 @media print {
   .site-head,
   .hero-stage,