Upgrade RFS and Saebyeok showcases

apps/site/public/work/rfs-cfd/index.html

@@ -27,7 +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/main.css" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=2" />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
     <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"
@@ -101,6 +102,40 @@
             시뮬레이터.
           </p>
 
+          <div class="scenario-strip" role="group" aria-label="브라우저 데모 운전 장면">
+            <p class="scenario-label">운전 장면</p>
+            <button
+              class="scenario-btn"
+              type="button"
+              data-field-preset="baseline"
+              data-load="70"
+              data-supply="65"
+              aria-pressed="true"
+            >
+              기준 운전
+            </button>
+            <button
+              class="scenario-btn"
+              type="button"
+              data-field-preset="overload"
+              data-load="95"
+              data-supply="50"
+              aria-pressed="false"
+            >
+              랙 과부하
+            </button>
+            <button
+              class="scenario-btn"
+              type="button"
+              data-field-preset="supply-loss"
+              data-load="65"
+              data-supply="25"
+              aria-pressed="false"
+            >
+              급기 저하
+            </button>
+          </div>
+
           <div class="hero-controls">
             <div class="ctl">
               <div class="ctl-head">
@@ -118,6 +153,27 @@
             </div>
           </div>
 
+          <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-state" id="fieldState">냉기와 발열이 맞서는 기준 상태입니다.</p>
+            </div>
+            <dl class="field-readout-grid">
+              <div>
+                <dt>장면</dt>
+                <dd id="fieldScene">기준 운전</dd>
+              </div>
+              <div>
+                <dt>먼저 볼 곳</dt>
+                <dd id="fieldWatch">랙 배면</dd>
+              </div>
+              <div>
+                <dt>다음 조작</dt>
+                <dd id="fieldAction">부하와 급기를 따로 움직여 비교</dd>
+              </div>
+            </dl>
+          </div>
+
           <p class="hero-note">
             위 화면은 브라우저에서 도는 <strong>2D 축소판</strong>이다. 슬라이더를 움직이거나 화면을
             문지르면 유동이 즉시 반응한다. 실물 RFS 는 Unity 6.4 위에서 3D δ-SPH 를 돌린다 —
@@ -329,28 +385,42 @@
             </ol>
 
             <div class="vis-shots">
-              <figure>
-                <img
-                  src="./assets/sph-topview.webp"
-                  width="689"
-                  height="680"
-                  loading="lazy"
-                  decoding="async"
-                  alt="RFS 상면 뷰 — 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
-                />
-                <figcaption>상면 · 랙 상부의 열기둥</figcaption>
-              </figure>
-              <figure>
-                <img
-                  src="./assets/sph-sideview.webp"
-                  width="691"
-                  height="437"
-                  loading="lazy"
-                  decoding="async"
-                  alt="RFS 측면 뷰 — 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
-                />
-                <figcaption>측면 · 랙을 통과한 공기</figcaption>
-              </figure>
+              <div class="vis-toolbar">
+                <div class="vis-tabs" role="group" aria-label="RFS 실물 파티클 뷰 선택">
+                  <button class="vis-tab" type="button" data-vis-target="top" aria-pressed="true">상면</button>
+                  <button class="vis-tab" type="button" data-vis-target="side" aria-pressed="false">측면</button>
+                </div>
+                <p class="vis-source mono">RFS 실물 렌더</p>
+              </div>
+              <div class="vis-frame">
+                <figure data-vis-panel="top">
+                  <img
+                    src="./assets/sph-topview.webp"
+                    width="689"
+                    height="680"
+                    loading="lazy"
+                    decoding="async"
+                    alt="RFS 상면 뷰 — 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
+                  />
+                  <figcaption>상면 · 랙 상부의 열기둥</figcaption>
+                </figure>
+                <figure data-vis-panel="side" hidden>
+                  <img
+                    src="./assets/sph-sideview.webp"
+                    width="691"
+                    height="437"
+                    loading="lazy"
+                    decoding="async"
+                    alt="RFS 측면 뷰 — 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
+                  />
+                  <figcaption>측면 · 랙을 통과한 공기</figcaption>
+                </figure>
+              </div>
+              <div class="temp-key" role="list" aria-label="파티클 온도 색상 범례">
+                <span role="listitem"><i class="temp-cold" aria-hidden="true"></i>저온</span>
+                <span role="listitem"><i class="temp-mid" aria-hidden="true"></i>중간</span>
+                <span role="listitem"><i class="temp-hot" aria-hidden="true"></i>고온</span>
+              </div>
               <p class="shots-note">
                 두 장 모두 RFS 실물의 파티클 뷰다. 저온이 청록, 고온이 초록이다 —
                 이 페이지 첫 화면의 색도 같은 규칙을 쓴다.