feat: strengthen design skill and refresh all showcases

apps/site/public/work/orbit-aerospace/design.md

@@ -0,0 +1,27 @@
+# Orbit Aerospace design.md
+
+## 브리프
+
+- 무엇을: 가상 엔진 사양·도면·시험 기록의 읽기 순서를 보여 주는 페이지.
+- 누구에게: 값과 그 측정 조건을 같은 행에서 비교하려는 방문자.
+- 제약: 수치·조건·가상 사양서 표기를 바꾸지 않고, 도면은 설명용 표면으로 제한한다.
+
+## 결정표
+
+| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+|---|---|---|---|
+| 구도 | 기준 화면의 모눈이 도면 밖 본문까지 이어져 본문과 도면의 역할이 섞였다. | 모눈을 `.blueprint` 표면에만 두고 본문은 단색 잉크 바탕에 둔다. `--surface`, `--surface-raised`, `--line`. | 본문 줄과 표의 값이 모눈과 경쟁하면 모눈을 더 약화한다. |
+| 타입 | 도면 라벨·치수는 설명이고 사양·시험표는 비교 대상이다. | 도면 라벨을 본문색으로, 치수는 `--font-mono`와 보조색으로 분리한다. | 320px/200%에서 라벨 또는 조건 열이 겹치면 도면·표의 폭을 별도 조정한다. |
+| 색 | 구리는 냉각 경로·리더선의 관계를 보이는 강조 역할이다. | `--accent`, `--accent-stroke`을 유로·리더선에만 사용한다. | 구리선이 값·조건을 가리거나 가상성 표기보다 더 강하면 선 굵기와 대비를 되돌린다. |
+
+## 근거와 경계
+
+[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/orbit-aerospace/index.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>궤도 우주공학 · 75kN 메탄 엔진 사양서</title>
+    <title>궤도 우주공학 · 엔진 사양서 구성</title>
     <meta
       name="description"
-      content="75kN급 메탄-액체산소 재생냉각 엔진의 단면도와 지상 연소 시험 기록. 사양은 전부 지상 시험 실측값이다."
+      content="재생냉각 엔진의 단면도와 지상 연소 기록을 읽는 가상 사양서 구성입니다. 수치와 시험 기록은 예시입니다."
     />
-    <meta property="og:title" content="궤도 우주공학 · 75kN 메탄 엔진" />
-    <meta property="og:description" content="재생냉각 엔진의 단면도와 연소 시험 기록." />
+    <meta property="og:title" content="궤도 우주공학 · 엔진 사양서 구성" />
+    <meta property="og:description" content="재생냉각 엔진의 단면도와 연소 기록을 읽는 가상 사양서 구성." />
     <meta property="og:type" content="website" />
     <meta name="theme-color" content="#081018" />
 
@@ -24,7 +24,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='%23081018'/%3E%3Cpath d='M16 4l6 7v17h-12V11z' fill='none' stroke='%23C57A45' stroke-width='1.6'/%3E%3Cpath d='M13 11h6M12 18h8' stroke='%23C57A45'/%3E%3C/svg%3E"
@@ -41,40 +41,49 @@
           <a href="#engine">엔진</a>
           <a href="#spec">사양</a>
           <a href="#fires">시험 기록</a>
-          <a href="#contact">문의</a>
+          <a href="#contact">구성 안내</a>
         </nav>
       </div>
     </header>
 
     <main id="main">
-      <!--
-        히어로 — 문구 대신 도면. 엔진 단면도가 첫 화면의 주인공이다.
-        이 도면은 장식이 아니라 사양서의 1페이지다: 라벨은 실제 부품 이름.
-      -->
-      <section class="hero" aria-labelledby="hero-h">
+      <section id="engine" class="hero" aria-labelledby="hero-h">
         <div class="wrap hero-grid">
           <div class="hero-text">
-            <p class="hero-kicker reveal">75kN 메탄-액체산소 · 재생냉각 · 2024–</p>
+            <p class="hero-kicker reveal">가상 엔진 사양서 · 재생냉각 기록 형식</p>
             <h1 id="hero-h" class="reveal" style="--delay: 60ms">
               도면은 말하지 않는다.<br />측정만 한다
             </h1>
             <p class="lead reveal" style="--delay: 120ms">
-              이 페이지의 모든 수치는 지상 연소 시험에서 잰 값입니다. 홍보 문구에
-              쓸 수 없는 숫자는 사양서에도 넣지 않습니다. 추력, 비추력, 연소실
-              압력 — 어디서, 몇 초 동안 재었는지가 숫자와 함께 갑니다.
+              이 페이지의 수치와 시험 기록은 엔진 사양서를 읽는 방식을 보여 주는
+              예시입니다. 실제 지상 시험 데이터, 발사체 제안, 또는 운용 성능을
+              뜻하지 않습니다.
             </p>
-            <a class="btn reveal" style="--delay: 180ms" href="#spec">사양 전문 보기</a>
+            <a class="btn reveal" style="--delay: 180ms" href="#spec">사양 형식 보기</a>
+            <dl class="run-register reveal" style="--delay: 220ms">
+              <div>
+                <dt>시험 구간 예시</dt>
+                <dd>지상 연소 기록</dd>
+              </div>
+              <div>
+                <dt>표본</dt>
+                <dd>기록 형식 예시</dd>
+              </div>
+              <div>
+                <dt>표기 기준</dt>
+                <dd>값과 조건을 함께 제시</dd>
+              </div>
+            </dl>
           </div>
 
           <figure class="blueprint reveal" style="--delay: 100ms">
             <svg
               viewBox="0 0 460 560"
               role="img"
-              aria-label="엔진 단면도: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
+              aria-label="가상 엔진 단면도 예시: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
             >
               <defs>
                 <g id="half">
-                  <!-- 외벽: 연소실 → 스로트 → 노즐 -->
                   <path
                     class="bp-wall"
                     d="M 230 70
@@ -84,7 +93,6 @@
                        C 194 310 118 350 112 470
                        L 108 500"
                   />
-                  <!-- 내벽 -->
                   <path
                     class="bp-wall inner"
                     d="M 230 92
@@ -94,7 +102,6 @@
                        C 206 306 136 348 130 468
                        L 127 494"
                   />
-                  <!-- 재생냉각 유로 (내벽을 따라가는 가는 선 2줄) -->
                   <path
                     class="bp-cool"
                     d="M 176 100 L 176 212 C 176 248 198 262 198 286 C 198 308 126 350 121 468 L 118 492"
@@ -103,21 +110,17 @@
                     class="bp-cool"
                     d="M 170 100 L 170 210 C 170 244 192 260 192 288 C 192 312 120 352 114 470 L 111 496"
                   />
-                  <!-- 인젝터 매니폴드 -->
                   <rect class="bp-block" x="168" y="46" width="50" height="18" />
                   <path class="bp-wall thin" d="M 168 64 L 218 64" />
                 </g>
               </defs>
               <use href="#half" />
               <use href="#half" transform="translate(460 0) scale(-1 1)" />
-              <!-- 중심선 -->
               <path class="bp-axis" d="M 230 30 V 540" />
-              <!-- 유동 화살표 -->
               <g class="bp-flow">
                 <path d="M 230 120 V 220" />
                 <path d="M 230 220 l -5 10 M 230 220 l 5 10" />
               </g>
-              <!-- 라벨 -->
               <g class="bp-label">
                 <path class="bp-lead" d="M 218 55 H 150" />
                 <text x="144" y="59" text-anchor="end">인젝터</text>
@@ -146,15 +149,12 @@
         </div>
       </section>
 
-      <!--
-        사양 — 표가 주인공. 전 항목 측정 조건이 붙는다(게이트 11의 해법).
-      -->
       <section id="spec" class="section band" aria-labelledby="spec-h">
         <div class="wrap">
-          <h2 id="spec-h" class="reveal">사양</h2>
+          <h2 id="spec-h" class="reveal">사양 예시</h2>
           <div class="table-wrap reveal" style="--delay: 80ms">
             <table>
-              <caption class="sr-only">ORBIT-75 엔진 사양 — 항목, 값, 측정 조건</caption>
+              <caption class="sr-only">ORBIT-75 엔진 사양 예시 — 항목, 값, 조건</caption>
               <thead>
                 <tr>
                   <th scope="col">항목</th>
@@ -197,22 +197,19 @@
             </table>
           </div>
           <p class="measure-note reveal" style="--delay: 140ms">
-            모든 값은 나주 지상 시험장, 2026년 상반기 12회 시험의 평균입니다.
-            단일 최고값을 사양으로 적지 않습니다.
+            표의 값과 조건은 사양서가 수치의 범위와 측정 상황을 함께 보여 주는
+            방식을 설명하기 위한 예시입니다.
           </p>
         </div>
       </section>
 
-      <!--
-        시험 기록 — 아카이브. 성공만 남기지 않는다: 3번의 보류가 있다.
-      -->
       <section id="fires" class="section" aria-labelledby="fires-h">
         <div class="wrap fires-grid">
           <div class="fires-text">
-            <h2 id="fires-h">지상 연소 시험 기록</h2>
+            <h2 id="fires-h">지상 연소 기록 형식</h2>
             <p>
-              엔진은 도면으로 끝나지 않습니다. 우리는 보류된 시험도 지운 적이
-              없습니다 — 기록에서 실패가 사라지면 사양서는 광고가 됩니다.
+              도면만으로는 판단할 수 없는 항목을 결과와 함께 남기는 기록 형식입니다.
+              보류·완료 표기는 실제 시험 이력이 아니라 기록 구조의 예시입니다.
             </p>
           </div>
           <div class="table-wrap reveal">
@@ -238,31 +235,25 @@
         </div>
       </section>
 
-      <!--
-        시험 사진 — 풀블리드 판. 마하 다이아몬드가 보일 때만 쓴다.
-      -->
-      <section class="section plate" aria-label="지상 연소 시험 사진">
+      <section class="section plate" aria-label="가상 지상 연소 기록 연출 이미지">
         <figure class="plate-fig reveal">
           <img
             src="./assets/static-fire.webp"
-            alt="야간 지상 연소 시험 — 구리 노즐이 열로 붉게 빛나고 배기 기둥에 마하 다이아몬드가 서 있다"
+            alt="가상 지상 연소 기록을 위한 연출 이미지 — 붉게 빛나는 노즐과 배기 기둥"
             width="1440"
             height="810"
             loading="lazy"
           />
-          <figcaption class="wrap">SF-29 · 60초 연소 · 나주 시험장 3번 스탠드</figcaption>
+          <figcaption class="wrap">지상 연소 연출 이미지 · 가상 시험 기록</figcaption>
         </figure>
       </section>
 
-      <!--
-        재생냉각 — 구리 유로 접사 + 설명.
-      -->
       <section class="section cooling" aria-labelledby="cool-h">
         <div class="wrap two">
           <figure class="two-photo reveal">
             <img
               src="./assets/channel-macro.webp"
-              alt="구리합금 블록의 단면에 밀링된 가느다란 재생냉각 유로들"
+              alt="재생냉각 유로를 설명하는 가상 구리합금 단면 연출 이미지"
               width="900"
               height="1200"
               loading="lazy"
@@ -270,38 +261,36 @@
             <figcaption>연소실 유로 접사 · 밀링 후 청소 전</figcaption>
           </figure>
           <div class="two-text">
-            <h2 id="cool-h">추진제가 벽을<br />먼저 식힙니다</h2>
+            <h2 id="cool-h">재생냉각 원리를<br />읽는 예시</h2>
             <p>
-              연소실 벽은 3,200°C의 가스를 견디는 게 아닙니다 — 견디게 두지
-              않습니다. 메탄 연료가 점화 전에 벽 속 180개 유로를 지나가며 실온에서
-              320°C까지 데워지고, 그 사이 벽은 900°C 아래로 머뭅니다. 냉각에 쓴
-              추진제는 그대로 연소실로 들어가니 버리는 열이 없습니다.
+              재생냉각은 추진제가 벽을 지나는 동안 열을 가져가도록 설계하는 방식을
+              말합니다. 여기의 온도·유로 수·치수는 그 관계를 설명하는 예시이며 실제
+              엔진의 운용 한계나 설계값이 아닙니다.
             </p>
             <p class="muted">
-              유로 하나의 폭은 0.9mm입니다. 이 숫자가 이 엔진의 수명을 결정합니다 —
-              도면에서 가장 작은 치수가 가장 중요한 치수입니다.
+              작은 유로 치수도 열과 압력의 관계에 영향을 준다는 점을 도면에서 읽게
+              하는 것이 이 예시의 목적입니다.
             </p>
           </div>
         </div>
       </section>
 
-      <!-- 문의 -->
       <section id="contact" class="section band contact" aria-labelledby="contact-h">
         <div class="wrap contact-grid">
-          <h2 id="contact-h">문의</h2>
+          <h2 id="contact-h">구성 안내</h2>
           <p>
-            발사체 통합·위성 투입 협의, 그리고 엔진 시험 데이터 전문은 아래로
-            보내주세요. 기술 자료 요청에는 소속과 용도를 적어주세요.
+            이 페이지는 엔진 사양·도면·시험 기록을 한 흐름으로 보여 주는 가상
+            프로젝트입니다. 발사체 통합, 시험 데이터, 기술 자료 요청을 받지 않습니다.
           </p>
-          <a class="btn" href="mailto:engine@orbit.kr">engine@orbit.kr</a>
+          <a class="btn" href="#spec">사양 형식 다시 보기</a>
         </div>
       </section>
     </main>
 
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>궤도 우주공학 · 나주 시험장 / 서울 사무실</p>
-        <p class="mono foot-meta">ORBIT AEROSPACE · EST. 2020</p>
+        <p>궤도 우주공학 · 가상 엔진 사양서</p>
+        <p class="mono foot-meta">SPECIFICATION FORMAT STUDY</p>
       </div>
     </footer>
 

apps/site/public/work/orbit-aerospace/styles/main.css

@@ -1,4 +1,4 @@
-@import url("./tokens.css");
+@import url("./tokens.css?v=20260912all");
 
 /* ==========================================================================
    궤도 우주공학 — technical-schematic. 사양서 1페이지.
@@ -150,11 +150,6 @@ a {
 
 .hero {
   padding-block: var(--space-8) var(--space-7);
-  /* 제도용 모눈 — 히어로에만, 4% 밝기 */
-  background-image:
-    linear-gradient(var(--line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--line) 1px, transparent 1px);
-  background-size: 48px 48px;
   border-bottom: 1px solid var(--line);
 }
 .hero-grid {
@@ -176,9 +171,36 @@ a {
 .hero .btn {
   margin-top: var(--space-5);
 }
+.run-register {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-top: var(--space-5);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line-strong);
+}
+.run-register > div {
+  min-width: 0;
+}
+.run-register dt,
+.run-register dd {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+}
+.run-register dt {
+  color: var(--accent);
+}
+.run-register dd {
+  margin-top: 0.2rem;
+  color: var(--ink-muted);
+  overflow-wrap: break-word;
+}
 
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
   border: 1px solid var(--accent);
   color: var(--accent);
   text-decoration: none;
@@ -195,7 +217,11 @@ a {
 
 /* 단면도 */
 .blueprint {
-  background: color-mix(in srgb, var(--surface) 72%, transparent);
+  background-color: var(--surface-raised);
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--line) 78%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--line) 78%, transparent) 1px, transparent 1px);
+  background-size: 2.5rem 2.5rem;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: var(--space-4) var(--space-3) var(--space-3);
@@ -227,7 +253,7 @@ a {
 .bp-cool {
   fill: none;
   stroke: var(--accent-stroke);
-  stroke-width: 0.9;
+  stroke-width: 1.25;
 }
 .bp-block {
   fill: none;
@@ -247,11 +273,11 @@ a {
 .bp-label text {
   font-family: var(--font-body);
   font-size: 13px;
-  fill: var(--ink-muted);
+  fill: var(--ink);
 }
 .bp-lead {
-  stroke: var(--ink-faint);
-  stroke-width: 0.8;
+  stroke: var(--accent);
+  stroke-width: 1;
 }
 .bp-dim path {
   fill: none;
@@ -261,7 +287,7 @@ a {
 .bp-dim text {
   font-family: var(--font-mono);
   font-size: 11px;
-  fill: var(--ink-faint);
+  fill: var(--ink-muted);
 }
 
 /* ── 섹션 공통 ────────────────────────────────────────────────────────── */
@@ -442,6 +468,12 @@ tbody td:not(.num) {
     padding-block: var(--space-6);
   }
 }
+@media (max-width: 640px) {
+  .run-register {
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+}
 @media (max-width: 560px) {
   .head-inner {
     flex-direction: column;

apps/site/public/work/orbit-aerospace/styles/tokens.css

@@ -29,7 +29,7 @@
   --surface-raised: #0d1520;
   --ink: #e7ecf1;
   --ink-muted: #97a3af;
-  --ink-faint: #6c7885;
+  --ink-faint: #7d8b99;
   --line: #1f2937;
   --line-strong: #33415280;
   --accent: #d08a5a;        /* 구리 — 열색. 텍스트용 밝기 */
@@ -46,8 +46,8 @@
 
   --radius: 2px;
 
-  --container: 1120px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --container: 1240px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
 
   --dur-quick: 160ms;
   --dur-normal: 420ms;