/* H — 제공된 설계 도면 참조. 전역 토큰과 하단 섹션은 styles.css를 재사용한다. */
.h-page {
  --h-grid-step: 24px;
  --h-panel-width: 360px;
  --h-drawing-top: 104px;
  --h-copy-width: 34%;
  --h-rail-space: 88px;
  --h-hero-min: 840px;
}
.h-stage { position: relative; display: block; min-height: clamp(var(--h-hero-min), 94svh, 1120px); padding-top: var(--header-height); background-color: var(--bg); background-image: linear-gradient(var(--process-grid) 1px, transparent 1px),linear-gradient(90deg,var(--process-grid) 1px,transparent 1px); background-size: var(--h-grid-step) var(--h-grid-step); border-bottom: 1px solid var(--line); }
.h-drawing { position: absolute; inset: var(--h-drawing-top) calc(var(--gut) + var(--h-rail-space)) var(--space-12) 37%; display: flex; flex-direction: column; min-width: 0; }
.h-drawing-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; font-size: 11px; color: var(--ink-2); }
.h-drawing-head > .mono { color: var(--teal); font-size: 10px; letter-spacing: .05em; }
.h-drawing-head a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding-inline: var(--space-1); background: var(--bg); }
.h-drawing-head a:hover { color: var(--teal); }
.h-drawing-head svg { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.4; }
.h-viewport { flex: 1; min-height: 0; position: relative; }
.h-viewport > svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.h-sheet { align-self: flex-end; display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 0; max-width: 100%; border: 1px solid var(--ink-3); color: var(--ink); background: var(--surface); font-family: var(--sans); font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.h-sheet > span { padding: var(--space-2) var(--space-3); margin: 0; color: inherit; }
.h-sheet > span:first-child { font-weight: 600; }
.h-sheet > span + span { border-left: 1px solid var(--ink-3); font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.h-cycle { display: flex; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-3); color: var(--ink-2); font-size: 11px; }
.h-cycle li { position: relative; padding-bottom: var(--space-1); }
.h-cycle li + li::before { content: '/'; position: absolute; left: calc(var(--space-3) * -1); color: var(--ink-3); }
.h-cycle .is-active { color: var(--teal); font-weight: 700; border-bottom: 1px solid var(--teal); }
.h-copy { position: absolute; left: var(--gut); bottom: var(--space-12); width: var(--h-copy-width); max-width: 540px; z-index: 2; }
.h-copy .kicker { margin-bottom: var(--space-6); font-size: 10px; letter-spacing: .06em; }
.h-stage h1 { font-size: clamp(32px,3.7vw,64px); font-weight: 700; line-height: 1.15; letter-spacing: -.05em; }
.h-copy .ln > span, .h-copy .scene-fade { animation: none; }
.h-copy .lede { min-height: 5.25em; font-size: 16px; line-height: 1.75; }
.h-copy .process-cap { max-width: 34em; }
.h-panel { position: absolute; top: var(--h-drawing-top); left: var(--gut); width: min(var(--h-panel-width),32%); padding: var(--space-6); border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); z-index: 2; }
.h-panel-head { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 1.5; }
.h-panel-head b { font-weight: 600; }
.h-panel-head .mono { margin-left: auto; font-size: 9px; color: var(--ink-3); }
.h-panel-dot { width: 6px; height: 6px; flex: none; border-radius: var(--radius-circle); background: var(--teal-2); }
.h-panel-sub { margin-top: var(--space-1); min-height: 1.6em; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.h-panel dl { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.h-panel dl > div { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-2); align-items: baseline; font-size: 13px; line-height: 1.55; }
.h-panel dt { color: var(--ink-2); }
.h-panel dd { font-weight: 600; text-align: right; color: var(--teal); }
.h-rail { position: absolute; right: var(--gut); bottom: var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); z-index: 3; }
.h-page .proof { padding-top: var(--space-2); }
/* 도면: 채움과 선을 분리하고 확대해도 선 두께를 유지한다. */
.h-machine { color: var(--ink-2); }
.h-machine :is(path,line,rect,circle,polyline,polygon,ellipse) { vector-effect: non-scaling-stroke; }
.h-part { stroke: currentColor; stroke-width: 1.15; fill: none; }
.h-part .fine { stroke-width: .7; }
.h-part .section { fill: url(#h-hatch); stroke-width: .8; }
.h-part .paper { fill: var(--bg); }
.h-part .fluid { fill: var(--process-fill); stroke: none; }
.h-dimensions { fill: none; stroke: var(--ink-3); stroke-width: .65; }
.h-dimensions .center-line { stroke-dasharray: 12 4 2 4; }
.h-dimensions text { fill: var(--ink-2); stroke: none; font: 11px var(--sans); }
.h-callouts { fill: none; stroke: var(--ink-3); stroke-width: .75; }
.h-callouts circle { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1; }
.h-callouts text { fill: var(--ink); stroke: none; font: 600 13px var(--sans); }
.h-callouts .callout-sub { fill: var(--ink-2); font: 11px var(--sans); }
.h-callouts .callout-number { font: 500 12px var(--mono); }
.h-annotations { stroke: none; fill: var(--ink-2); font: 12px var(--sans); }
.h-annotations .technical { font: 10px var(--mono); }
.h-stream { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; }
.h-guides { stroke: var(--teal); stroke-width: .7; stroke-dasharray: 3 5; fill: none; }
.h-drawing .part-focus { color: var(--teal); }
.h-drawing .callout-focus circle { fill: var(--teal); stroke: var(--teal); }
.h-drawing .callout-focus .callout-number { fill: var(--surface); }
.h-drawing .callout-focus .callout-label { fill: var(--teal); }
.h-detail-ring { fill: none; stroke: var(--teal); stroke-width: .8; stroke-dasharray: 5 5; }
@media (min-width:861px) and (max-width:1180px) {
  .h-page { --h-copy-width:34%; --h-rail-space:72px; }
  .h-drawing { left: 39%; }
  .h-panel { padding: var(--space-4); }
  .h-panel dl > div { grid-template-columns: 64px 1fr; font-size: 12px; }
  .h-panel-head { font-size: 12px; }
  .h-panel-head .mono { display: none; }
  .h-stage h1 { font-size: clamp(30px,3.7vw,44px); }
  .h-copy .kicker { font-size: 9px; letter-spacing: 0; }
  .h-drawing-head { font-size: 10px; }
  .h-drawing-head > .mono { font-size: 9px; }
}
@media (max-width:860px) {
  .h-stage { display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--header-height) + var(--space-4)); }
  .h-drawing { position: relative; inset: auto; margin-inline: var(--gut); }
  .h-drawing-head { gap: var(--space-2); }
  .h-drawing-head > .mono { font-size: 9px; }
  .h-drawing-head a { font-size: 10px; white-space: nowrap; }
  .h-viewport { flex: none; aspect-ratio: 1000 / 760; }
  .h-sheet { margin-top: var(--space-2); font-size: 10px; }
  .h-sheet > span { padding: var(--space-1) var(--space-2); }
  .h-sheet > span + span { font-size: 9px; }
  .h-cycle { justify-content: flex-start; margin-top: var(--space-4); }
  .h-copy { position: relative; inset: auto; width: auto; max-width: none; margin: var(--space-8) var(--gut) 0; }
  .h-copy .kicker { margin-bottom: var(--space-4); font-size: 9px; }
  .h-stage h1 { font-size: clamp(30px,8.5vw,54px); }
  .h-copy .lede { min-height: 7em; margin-top: var(--space-4); max-width: 36em; }
  .h-panel { position: relative; inset: auto; width: auto; margin: var(--space-6) var(--gut) 0; padding: var(--space-4); }
  .h-panel dl > div { font-size: 13px; }
  .h-rail { position: relative; inset: auto; flex-direction: row; justify-content: space-between; padding: var(--space-6) var(--gut) var(--space-8); }
}
@media (prefers-reduced-motion:reduce) {
  .h-stage *, .h-stage *::before, .h-stage *::after { animation: none !important; transition: none !important; }
}

/* 원본 인트로: 중앙 심볼 조립 → 워드마크 등장 → 상단 로고에 안착. */
html.logo-pending { overflow: hidden; }
html.logo-pending .top .brand img { visibility: hidden; }
html.logo-pending:not(.intro-moving) body::before { content: ''; position: fixed; inset: 0; z-index: 70; background: var(--surface); }
.logo-intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--surface); transition: background-color .9s var(--ease); }
.logo-intro[hidden] { display: none; }
.logo-intro.is-move { background-color: transparent; }
.logo-intro > svg { width: min(520px,78vw); height: auto; overflow: visible; transform-origin: 0 0; }
.logo-intro .intro-symbol { transform-box: view-box; transform: translateX(60px) scale(1.25); transform-origin: 47px 38px; transition: transform 1s cubic-bezier(.77,0,.18,1); }
.logo-intro .intro-symbol path { transform-box: fill-box; transform-origin: center; opacity: 0; }
.logo-intro.is-run .intro-symbol path:nth-child(1) { animation: intro-blue 1s .1s var(--ease) forwards; }
.logo-intro.is-run .intro-symbol path:nth-child(2) { animation: intro-pop .7s .95s cubic-bezier(.34,1.56,.64,1) forwards; }
.logo-intro.is-run .intro-symbol path:nth-child(3) { animation: intro-wipe .8s .5s var(--ease) forwards; }
.logo-intro.is-run .intro-symbol path:nth-child(4) { animation: intro-green 1s .6s var(--ease) forwards; }
.logo-intro.is-run .intro-symbol path:nth-child(5) { animation: intro-wipe .8s .38s var(--ease) forwards; }
.logo-intro .intro-word { clip-path: inset(0 100% 0 0); transform: translateX(-14px); transition: clip-path .95s cubic-bezier(.77,0,.18,1) .5s, transform .95s cubic-bezier(.77,0,.18,1) .5s; }
.logo-intro.is-open .intro-symbol { transform: none; }
.logo-intro.is-open .intro-word { clip-path: inset(0 -2% 0 0); transform: none; }
@keyframes intro-blue { from { opacity: 0; transform: translate(-40%,12%) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes intro-green { from { opacity: 0; transform: translate(30%,-24%) rotate(12deg); } to { opacity: 1; transform: none; } }
@keyframes intro-wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes intro-pop { from { opacity: 0; transform: scale(.1); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion:reduce) {
  .logo-intro { display: none; }
}