feat: strengthen design skill and refresh all showcases

apps/site/public/work/rfs-cfd/styles/main.css

@@ -543,6 +543,14 @@ input[type="range"] {
   top: calc(56px + var(--space-5));
 }
 
+/* 초광폭에서는 사양 표와 실물 렌더가 답답해지지 않도록 정보 표면만 넓힌다.
+   본문 측정폭은 각 블록의 max-width가 계속 제어한다. */
+@media (min-width: 120rem) {
+  .band > .wrap {
+    width: min(100% - 2 * var(--pad-inline), var(--container-wide));
+  }
+}
+
 @media (max-width: 899px) {
   .split-lead h2 {
     position: static;
@@ -1002,7 +1010,7 @@ kbd {
 .req th,
 .req td {
   text-align: left;
-  padding: var(--space-3) var(--space-3) var(--space-3) 0;
+  padding: var(--space-3);
   border-bottom: 1px solid var(--band-line);
   vertical-align: top;
 }
@@ -1147,6 +1155,11 @@ kbd {
   .scenario-btn,
   .vis-tab {
     min-height: 44px;
+    padding-inline: calc(var(--space-2) + 2px);
+  }
+
+  .req th,
+  .req td {
     padding-inline: var(--space-2);
   }
 
@@ -1195,6 +1208,67 @@ kbd {
 }
 
 /* ── 인쇄 ───────────────────────────────────────────────────────── */
+/* 첫 화면에서는 운전 조건과 결과를 한 계기면에서 읽는다. 캔버스는 조작 면의 옆에 두고,
+   WebGL·감소 모션 폴백도 같은 영역을 그대로 사용한다. */
+@media (min-width: 900px) {
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 0.96fr) minmax(26rem, 1.04fr);
+    align-items: start;
+    min-height: 39rem;
+    padding-bottom: var(--space-6);
+  }
+
+  .hero-stage {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    height: clamp(26.25rem, 31vw, 30rem);
+    margin-top: var(--space-5);
+    border-left: 1px solid var(--dark-line);
+    border-bottom: 1px solid var(--dark-line);
+  }
+
+  .hero-copy {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    padding: var(--space-5) var(--space-5) 0 max(var(--pad-inline), calc((100vw - var(--container)) / 2));
+  }
+
+  .hero h1 {
+    max-width: 11ch;
+    font-size: clamp(2.45rem, 3.6vw, 4.25rem);
+    line-height: 0.98;
+  }
+
+  .hero-lead {
+    max-width: 36rem;
+    font-size: var(--step-0);
+    line-height: 1.65;
+  }
+
+  .scenario-strip {
+    margin-top: var(--space-4);
+  }
+
+  .hero-controls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-3);
+    margin-top: var(--space-3);
+    max-width: none;
+  }
+
+  .field-readout {
+    margin-top: var(--space-4);
+  }
+
+  .hero-note {
+    margin-top: var(--space-3);
+    font-size: 0.8125rem;
+  }
+}
+
 @media print {
   .site-head,
   .hero-stage,