feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions

View file

@ -3,158 +3,196 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>궤도 우주공학 · 엔진 사양서 구성</title>
<title>ORBIT-75 메탄 엔진 사양 — 궤도 우주공학</title>
<meta
name="description"
content="재생냉각 엔진의 단면도와 지상 연소 기록을 읽는 가상 사양서 구성입니다. 수치와 시험 기록은 예시입니다."
content="가상 우주기업 궤도 우주공학의 75 kN급 다단연소 메탄 엔진 ORBIT-75 사양서. 단면도, 측정 조건을 같은 줄에 적은 사양표, 지상 연소 시험 다섯 회의 기록을 정리했습니다."
/>
<meta property="og:title" content="궤도 우주공학 · 엔진 사양서 구성" />
<meta property="og:description" content="재생냉각 엔진의 단면도와 연소 기록을 읽는 가상 사양서 구성." />
<meta property="og:title" content="ORBIT-75 메탄 엔진 사양 — 궤도 우주공학" />
<meta property="og:description" content="75 kN급 재생냉각 메탄 엔진 ORBIT-75의 단면도, 사양, 지상 연소 시험 기록." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://designpaca.chanpaca.net/work/orbit-aerospace/assets/static-fire.webp" />
<meta property="og:image:alt" content="SF-31 지상 연소 연출 이미지: 붉게 빛나는 노즐과 배기 기둥" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#081018" />
<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/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
href="https://fonts.googleapis.com/css2?family=Orbit&family=Noto+Sans+KR:wght@400;500&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
<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"
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='M4 12h10c4 0 6 2 6 4s-2 4-6 4H4' fill='none' stroke='%23e6edf3' stroke-width='1.6'/%3E%3Cpath d='M20 16c3-1 6-1 8 0' stroke='%2345bcf7' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">궤도 우주공학 <span class="wordmark-en">ORBIT</span></a>
<nav class="nav" aria-label="섹션">
<a href="#engine">엔진</a>
<a href="#spec">사양</a>
<a href="#fires">시험 기록</a>
<a href="#contact">구성 안내</a>
</nav>
</div>
</header>
<nav class="index" aria-label="차례">
<a class="wordmark" href="#main">궤도 우주공학</a>
<ol class="index-list">
<li><a href="#engine" data-part="engine" aria-current="true"><span class="index-no">01</span>단면도</a></li>
<li><a href="#spec" data-part="spec"><span class="index-no">02</span>사양</a></li>
<li><a href="#fires" data-part="fires"><span class="index-no">03</span>시험 기록</a></li>
<li><a href="#cooling" data-part="cooling"><span class="index-no">04</span>재생냉각</a></li>
<li><a href="#plate" data-part="plate"><span class="index-no">05</span>연소 장면</a></li>
<li><a href="#contact" data-part="contact"><span class="index-no">06</span>자료 요청</a></li>
</ol>
</nav>
<main id="main">
<section id="engine" class="hero" aria-labelledby="hero-h">
<div class="wrap hero-grid">
<div class="hero-text">
<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>
<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="가상 엔진 단면도 예시: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
>
<defs>
<g id="half">
<path
class="bp-wall"
d="M 230 70
L 168 70
L 168 210
C 168 250 194 262 194 286
C 194 310 118 350 112 470
L 108 500"
/>
<path
class="bp-wall inner"
d="M 230 92
L 184 92
L 184 214
C 184 246 206 258 206 284
C 206 306 136 348 130 468
L 127 494"
/>
<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"
/>
<path
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>
<path class="bp-lead" d="M 168 160 H 96" />
<text x="90" y="164" text-anchor="end">연소실</text>
<path class="bp-lead" d="M 200 275 H 78" />
<text x="72" y="279" text-anchor="end">스로트</text>
<path class="bp-lead" d="M 128 400 H 60" />
<text x="54" y="404" text-anchor="end">노즐</text>
<path class="bp-lead" d="M 186 180 H 120" />
<text x="114" y="196" text-anchor="end"></text>
<text x="242" y="150">재생냉각</text>
<text x="242" y="166">유로 (CH₄)</text>
</g>
<g class="bp-dim">
<path d="M 356 92 H 372 M 364 92 V 214" />
<text x="380" y="157"></text>
</g>
<g class="bp-dim">
<path d="M 60 500 H 96 M 78 500 V 520" />
<text x="60" y="542">Ø 460 — 노즐 출구</text>
</g>
</svg>
<figcaption>ORBIT-75 단면 · 재생냉각 벽면은 그림 2겹으로 단순화</figcaption>
</figure>
<div class="wrap hero-head">
<h1 id="hero-h">ORBIT-75 메탄&nbsp;엔진</h1>
<dl class="facts">
<div>
<dt>추력</dt>
<dd><span class="fact-value">75.4 kN</span><span class="fact-cond">해수면, 정상 상태 30초 평균</span></dd>
</div>
<div>
<dt>비추력</dt>
<dd><span class="fact-value">325.8 s</span><span class="fact-cond">진공, 고도 모사 노즐</span></dd>
</div>
<div>
<dt>연소실 압력</dt>
<dd><span class="fact-value">12.5 MPa</span><span class="fact-cond">피에조 계측, 샘플링 1 kHz</span></dd>
</div>
<div>
<dt>최근 지상 연소</dt>
<dd><span class="fact-value">62 s</span><span class="fact-cond">SF-31, 2026-07-18 완료</span></dd>
</div>
</dl>
</div>
<figure class="stage glass">
<svg
class="bp bp-wide"
viewBox="0 0 1600 400"
role="img"
aria-label="ORBIT-75 종단면도: 왼쪽 인젝터에서 오른쪽 노즐 출구까지 눕힌 단면. 연소실, 스로트, 확장 노즐과 벽 안의 재생냉각 유로"
>
<defs>
<g id="half-w">
<path
class="bp-wall"
d="M 200 100 L 620 100 C 700 100 740 152 780 152 C 900 152 1100 60 1460 30"
/>
<path
class="bp-wall inner"
d="M 200 114 L 616 114 C 696 114 736 164 780 164 C 896 164 1096 72 1452 42"
/>
<path
class="bp-cool"
pathLength="1"
d="M 206 104 L 618 104 C 698 104 738 156 780 156 C 898 156 1098 64 1456 34"
/>
<path
class="bp-cool"
pathLength="1"
d="M 206 109 L 617 109 C 697 109 737 160 780 160 C 897 160 1097 68 1454 38"
/>
<rect class="bp-block" x="124" y="112" width="76" height="88" />
<path class="bp-wall thin" d="M 200 100 V 200" />
</g>
</defs>
<use href="#half-w" />
<use href="#half-w" transform="translate(0 400) scale(1 -1)" />
<path class="bp-axis" d="M 60 200 H 1470" />
<g class="bp-flow">
<path pathLength="1" d="M 300 200 H 720" />
<path d="M 720 200 l -12 -6 M 720 200 l -12 6" />
</g>
<g class="bp-label">
<path class="bp-lead" d="M 162 86 V 108" />
<text x="162" y="76" text-anchor="middle">인젝터</text>
<path class="bp-lead" d="M 410 86 V 98" />
<text x="410" y="76" text-anchor="middle">연소실</text>
<path class="bp-lead" d="M 780 136 V 150" />
<text x="780" y="126" text-anchor="middle">스로트</text>
<path class="bp-lead" d="M 1180 326 V 348" />
<text x="1180" y="370" text-anchor="middle">노즐</text>
<path class="bp-lead" d="M 440 300 V 348" />
<text x="440" y="370" text-anchor="middle">재생냉각 유로 (CH₄)</text>
</g>
<g class="bp-dim">
<path d="M 1484 30 H 1516 M 1484 370 H 1516 M 1500 30 V 370" />
<text x="1512" y="196">Ø 460</text>
<text x="1512" y="216">노즐 출구</text>
</g>
</svg>
<svg
class="bp bp-tall"
viewBox="0 0 460 560"
role="img"
aria-label="ORBIT-75 단면도: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
>
<defs>
<g id="half-t">
<path
class="bp-wall"
d="M 230 70 L 168 70 L 168 210 C 168 250 194 262 194 286 C 194 310 118 350 112 470 L 108 500"
/>
<path
class="bp-wall inner"
d="M 230 92 L 184 92 L 184 214 C 184 246 206 258 206 284 C 206 306 136 348 130 468 L 127 494"
/>
<path
class="bp-cool"
pathLength="1"
d="M 176 100 L 176 212 C 176 248 198 262 198 286 C 198 308 126 350 121 468 L 118 492"
/>
<path
class="bp-cool"
pathLength="1"
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-t" />
<use href="#half-t" transform="translate(460 0) scale(-1 1)" />
<path class="bp-axis" d="M 230 30 V 540" />
<g class="bp-flow">
<path pathLength="1" 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>
<path class="bp-lead" d="M 168 160 H 96" />
<text x="90" y="164" text-anchor="end">연소실</text>
<path class="bp-lead" d="M 200 275 H 78" />
<text x="72" y="279" text-anchor="end">스로트</text>
<path class="bp-lead" d="M 128 400 H 60" />
<text x="54" y="404" text-anchor="end">노즐</text>
<path class="bp-lead" d="M 300 150 H 286" />
<text x="306" y="155">재생냉각</text>
<text x="306" y="173">유로 (CH₄)</text>
</g>
<g class="bp-dim">
<path d="M 60 500 H 96 M 78 500 V 520" />
<text x="60" y="542">Ø 460 노즐 출구</text>
</g>
</svg>
<figcaption class="stage-cap">
<span class="cap-no">도면 01</span>
<span>ORBIT-75 종단면. 재생냉각 벽은 2겹으로 단순화했고, 시안 선이 메탄 유로입니다</span>
</figcaption>
</figure>
</section>
<section id="spec" class="section band" aria-labelledby="spec-h">
<section id="spec" class="section" aria-labelledby="spec-h">
<div class="wrap">
<h2 id="spec-h" class="reveal">사양 예시</h2>
<div class="table-wrap reveal" style="--delay: 80ms">
<h2 id="spec-h">값 여섯 개, 측정 조건을 같은 줄에 적었습니다</h2>
<div class="table-wrap">
<table>
<caption class="sr-only">ORBIT-75 엔진 사양 예시 — 항목, 값, 조건</caption>
<caption class="sr-only">ORBIT-75 엔진 사양: 항목, 값, 측정 조건</caption>
<thead>
<tr>
<th scope="col">항목</th>
@ -163,42 +201,41 @@
</tr>
</thead>
<tbody>
<tr>
<tr id="spec-thrust">
<th scope="row">추력 (해수면)</th>
<td class="num">75.4 kN</td>
<td>지상 시험 스탠드 · 정상 상태 30초 평균</td>
<td>지상 시험 스탠드, 정상 상태 30초 평균</td>
</tr>
<tr>
<tr id="spec-isp">
<th scope="row">비추력 Isp (진공)</th>
<td class="num">325.8 s</td>
<td>고도 모사 노즐 · 추진제 혼합비 3.4</td>
<td>고도 모사 노즐, 추진제 혼합비 3.4</td>
</tr>
<tr>
<tr id="spec-pc">
<th scope="row">연소실 압력</th>
<td class="num">12.5 MPa</td>
<td>피에조 계측 · 샘플링 1kHz</td>
<td>피에조 계측, 샘플링 1 kHz</td>
</tr>
<tr>
<tr id="spec-cycle">
<th scope="row">사이클</th>
<td class="num">다단연소</td>
<td>연료리치 프리버너 1기</td>
</tr>
<tr>
<tr id="spec-cooling">
<th scope="row">냉각</th>
<td class="num">재생냉각</td>
<td>구리합금 채널 180개 · CH₄ 유량 92%</td>
<td>구리합금 채널 180개, CH₄ 유량 92%</td>
</tr>
<tr>
<th scope="row">시동 신호→연소</th>
<tr id="spec-start">
<th scope="row">시동 신호에서 연소까지</th>
<td class="num">2.8 s</td>
<td>TEA-TEB 점화 · 12회 평균</td>
<td>TEA-TEB 점화, 12회 평균</td>
</tr>
</tbody>
</table>
</div>
<p class="measure-note reveal" style="--delay: 140ms">
표의 값과 조건은 사양서가 수치의 범위와 측정 상황을 함께 보여 주는
방식을 설명하기 위한 예시입니다.
<p class="measure-note">
추력 값은 측정 조건이 같아야 비교할 수 있습니다. 해수면과 진공 여부, 평균 구간을 값과 같은 줄에 적었습니다.
</p>
</div>
</section>
@ -206,15 +243,14 @@
<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>
도면만으로는 판단할 수 없는 항목을 결과와 함께 남기는 기록 형식입니다.
보류·완료 표기는 실제 시험 이력이 아니라 기록 구조의 예시입니다.
중단 원인을 다음 시험 조건에 반영하기 때문입니다. SF-28의 냉각유로 압력 강하를 보고 SF-29의 유량을 조정했습니다.
</p>
</div>
<div class="table-wrap reveal">
<div class="table-wrap">
<table>
<caption class="sr-only">지상 연소 시험 기록 — 번호, 날짜, 지속, 결과</caption>
<caption class="sr-only">지상 연소 시험 기록: 번호, 날짜, 지속 시간, 결과</caption>
<thead>
<tr>
<th scope="col">시험</th>
@ -224,88 +260,143 @@
</tr>
</thead>
<tbody>
<tr><th scope="row">SF-31</th><td>2026-07-18</td><td class="num">62 s</td><td>완료 · 노즐 온도 상한 내</td></tr>
<tr><th scope="row">SF-30</th><td>2026-06-27</td><td class="num">31 s</td><td>보류 · 프리버너 시동 지연</td></tr>
<tr><th scope="row">SF-29</th><td>2026-06-02</td><td class="num">60 s</td><td>완료 · 추력 편차 0.4%</td></tr>
<tr><th scope="row">SF-28</th><td>2026-05-11</td><td class="num">12 s</td><td>보류 · 냉각유로 압력 강하</td></tr>
<tr><th scope="row">SF-27</th><td>2026-04-20</td><td class="num">58 s</td><td>완료</td></tr>
<tr id="sf-31"><th scope="row">SF-31</th><td class="date">2026-07-18</td><td class="num">62 s</td><td>완료, 노즐 온도 상한 내</td></tr>
<tr id="sf-30"><th scope="row">SF-30</th><td class="date">2026-06-27</td><td class="num">31 s</td><td>보류, 프리버너 시동 지연</td></tr>
<tr id="sf-29"><th scope="row">SF-29</th><td class="date">2026-06-02</td><td class="num">60 s</td><td>완료, 추력 편차 0.4%</td></tr>
<tr id="sf-28"><th scope="row">SF-28</th><td class="date">2026-05-11</td><td class="num">12 s</td><td>보류, 냉각유로 압력 강하</td></tr>
<tr id="sf-27"><th scope="row">SF-27</th><td class="date">2026-04-20</td><td class="num">58 s</td><td>완료</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="section plate" aria-label="가상 지상 연소 기록 연출 이미지">
<figure class="plate-fig reveal">
<img
src="./assets/static-fire.webp"
alt="가상 지상 연소 기록을 위한 연출 이미지 — 붉게 빛나는 노즐과 배기 기둥"
width="1440"
height="810"
loading="lazy"
/>
<figcaption class="wrap">지상 연소 연출 이미지 · 가상 시험 기록</figcaption>
</figure>
</section>
<section class="section cooling" aria-labelledby="cool-h">
<section id="cooling" class="section cooling" aria-labelledby="cool-h">
<div class="wrap two">
<figure class="two-photo reveal">
<div class="two-text">
<h2 id="cool-h">연료가 구리 유로 180개를 지나며 벽을 식힙니다</h2>
<p>
재생냉각 방식에서는 벽의 열을 흡수한 메탄이 그대로 연소실로 들어갑니다. 냉각에 쓴 연료를 버리지 않기 때문에 냉각과 추력에 같은 유량을 나눠 씁니다.
</p>
<p class="muted">
유로 폭이 조금만 달라져도 벽 온도와 압력 강하가 함께 바뀌므로 단면도에 유로를 따로 표기했습니다.
</p>
</div>
<figure class="panel glass two-photo">
<img
src="./assets/channel-macro.webp"
alt="재생냉각 유로를 설명하는 가상 구리합금 단면 연출 이미지"
alt="재생냉각 유로가 드러난 구리합금 연소실 벽 단면 연출 이미지"
width="900"
height="1200"
loading="lazy"
/>
<figcaption>연소실 유로 접사 · 밀링 후 청소 전</figcaption>
<figcaption class="panel-cap">
<span class="cap-no">사진 01</span>
<span>연소실 유로 접사, 밀링 후 청소 전. 연출 이미지</span>
</figcaption>
</figure>
<div class="two-text">
<h2 id="cool-h">재생냉각 원리를<br />읽는 예시</h2>
<p>
재생냉각은 추진제가 벽을 지나는 동안 열을 가져가도록 설계하는 방식을
말합니다. 여기의 온도·유로 수·치수는 그 관계를 설명하는 예시이며 실제
엔진의 운용 한계나 설계값이 아닙니다.
</p>
<p class="muted">
작은 유로 치수도 열과 압력의 관계에 영향을 준다는 점을 도면에서 읽게
하는 것이 이 예시의 목적입니다.
</p>
</div>
</div>
</section>
<section id="contact" class="section band contact" aria-labelledby="contact-h">
<section id="plate" class="section plate" aria-labelledby="plate-h">
<div class="wrap">
<h2 id="plate-h">SF-31, 62초 지상 연소</h2>
<figure class="panel glass plate-fig">
<img
src="./assets/static-fire.webp"
alt="지상 연소 연출 이미지: 붉게 빛나는 노즐과 배기 기둥"
width="1440"
height="810"
loading="lazy"
/>
<figcaption class="panel-cap">
<span class="cap-no">사진 02</span>
<span>2026-07-18 지상 시험 스탠드. 연출 이미지</span>
</figcaption>
</figure>
</div>
</section>
<section id="contact" class="section 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="#spec">사양 형식 다시 보기</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">SPECIFICATION FORMAT STUDY</p>
<div class="wrap foot-grid">
<section class="foot-col" aria-labelledby="foot-spec">
<h2 id="foot-spec" class="foot-h">사양 항목</h2>
<ul>
<li><a href="#spec-thrust">추력 75.4 kN</a></li>
<li><a href="#spec-isp">비추력 325.8 s</a></li>
<li><a href="#spec-pc">연소실 압력 12.5 MPa</a></li>
<li><a href="#spec-cycle">사이클 다단연소</a></li>
<li><a href="#spec-cooling">냉각 유로 180개</a></li>
<li><a href="#spec-start">시동 2.8 s</a></li>
</ul>
</section>
<section class="foot-col" aria-labelledby="foot-fires">
<h2 id="foot-fires" class="foot-h">지상 연소 시험</h2>
<ul>
<li><a href="#sf-31">SF-31 완료 62 s</a></li>
<li><a href="#sf-30">SF-30 보류 31 s</a></li>
<li><a href="#sf-29">SF-29 완료 60 s</a></li>
<li><a href="#sf-28">SF-28 보류 12 s</a></li>
<li><a href="#sf-27">SF-27 완료 58 s</a></li>
</ul>
</section>
<section class="foot-col" aria-labelledby="foot-media">
<h2 id="foot-media" class="foot-h">도면과 사진</h2>
<ul>
<li><a href="#engine">도면 01 종단면</a></li>
<li><a href="#cooling">사진 01 유로 접사</a></li>
<li><a href="#plate">사진 02 지상 연소</a></li>
</ul>
</section>
<section class="foot-col" aria-labelledby="foot-brand">
<h2 id="foot-brand" class="foot-h">궤도 우주공학</h2>
<ul>
<li>가상 브랜드 쇼케이스</li>
<li>수치와 기록은 모두 예시</li>
<li>값 옆에 측정 조건을 적는 표기</li>
<li><a href="#contact">자료 요청 안내</a></li>
</ul>
</section>
</div>
</footer>
<script>
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io.unobserve(e.target);
// 측면 색인의 현재 위치 표시. 등장 모션이 아니라 내비 상태다(layout §2-c "현재 위치 표시").
(function () {
var links = document.querySelectorAll(".index-list a[data-part]");
if (!links.length || !("IntersectionObserver" in window)) return;
var byId = {};
links.forEach(function (a) { byId[a.getAttribute("data-part")] = a; });
var setCurrent = function (id) {
links.forEach(function (a) {
if (a.getAttribute("data-part") === id) a.setAttribute("aria-current", "true");
else a.removeAttribute("aria-current");
});
};
var visible = {};
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { visible[e.target.id] = e.isIntersecting; });
var order = Object.keys(byId);
for (var i = 0; i < order.length; i += 1) {
if (visible[order[i]]) { setCurrent(order[i]); return; }
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
}, { rootMargin: "-35% 0px -55% 0px", threshold: 0 });
Object.keys(byId).forEach(function (id) {
var el = document.getElementById(id);
if (el) io.observe(el);
});
})();
</script>
</body>
</html>