feat: strengthen design skill and refresh all showcases

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>