Upgrade RFS and Saebyeok showcases

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

@@ -1,5 +1,3 @@
-@import "./tokens.css";
-
 /* ==========================================================================
    RFS — 메인 스타일시트
 
@@ -361,8 +359,48 @@ h3 {
   color: var(--band-ink-muted);
 }
 
-.hero-controls {
+.scenario-strip {
   margin-top: var(--space-5);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  max-width: 760px;
+}
+
+.scenario-label {
+  margin-right: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.scenario-btn,
+.vis-tab {
+  min-height: 40px;
+  padding-inline: var(--space-3);
+  border: 1px solid var(--band-line-strong);
+  background: transparent;
+  color: var(--band-ink-muted);
+  cursor: pointer;
+  font-size: var(--step--1);
+}
+
+.scenario-btn:hover,
+.vis-tab:hover {
+  color: var(--band-ink);
+  border-color: var(--band-accent);
+}
+
+.scenario-btn[aria-pressed="true"],
+.vis-tab[aria-pressed="true"] {
+  color: var(--band-accent-ink);
+  background: var(--band-accent);
+  border-color: var(--band-accent);
+}
+
+.hero-controls {
+  margin-top: var(--space-4);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: var(--space-4);
@@ -389,6 +427,58 @@ input[type="range"] {
   background: transparent;
 }
 
+.field-readout {
+  margin-top: var(--space-5);
+  max-width: 880px;
+  border-block: 1px solid var(--band-line-strong);
+}
+
+.field-readout-head {
+  display: grid;
+  gap: var(--space-2);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--band-line);
+}
+
+.field-readout-label,
+.field-readout-grid dt {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.field-readout-state {
+  color: var(--band-ink);
+}
+
+.field-readout-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.field-readout-grid > div {
+  min-width: 0;
+  padding-block: var(--space-3);
+}
+
+.field-readout-grid > div + div {
+  padding-left: var(--space-3);
+  border-left: 1px solid var(--band-line);
+}
+
+.field-readout-grid dd {
+  margin-top: var(--space-1);
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+  line-height: var(--leading-normal);
+}
+
+@media (min-width: 720px) {
+  .field-readout-head {
+    grid-template-columns: 9rem minmax(0, 1fr);
+    align-items: baseline;
+  }
+}
+
 .hero-note {
   margin-top: var(--space-5);
   padding-top: var(--space-3);
@@ -692,17 +782,54 @@ input[type="range"] {
 
 .vis-shots {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.vis-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  border-bottom: 1px solid var(--band-line-strong);
+  padding-bottom: var(--space-2);
+}
+
+.vis-tabs {
+  display: flex;
+}
+
+.vis-tab + .vis-tab {
+  border-left: 0;
+}
+
+.vis-source {
+  color: var(--band-ink-faint);
+  font-size: var(--step--1);
+  text-align: right;
+}
+
+.vis-frame {
+  min-width: 0;
 }
 
 .vis-shots figure {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
   border: 1px solid var(--band-line);
   background: var(--band-surface-2);
+  min-height: clamp(360px, 42vw, 540px);
+}
+
+.vis-shots figure[hidden] {
+  display: none;
 }
 
 .vis-shots img {
   width: 100%;
-  height: auto;
+  height: 100%;
+  min-height: 0;
+  object-fit: contain;
 }
 
 .vis-shots figcaption {
@@ -713,6 +840,35 @@ input[type="range"] {
   font-family: var(--font-mono);
 }
 
+.temp-key {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  color: var(--band-ink-muted);
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+}
+
+.temp-key span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.temp-key i {
+  width: 1.5rem;
+  height: 2px;
+  background: var(--temp-cold);
+}
+
+.temp-key .temp-mid {
+  background: var(--temp-mid);
+}
+
+.temp-key .temp-hot {
+  background: var(--temp-hot);
+}
+
 .shots-note {
   font-size: var(--step--1);
   color: var(--band-ink-faint);
@@ -979,6 +1135,35 @@ kbd {
     font-size: 0.6875rem;
   }
 
+  .scenario-strip {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .scenario-label {
+    grid-column: 1 / -1;
+  }
+
+  .scenario-btn,
+  .vis-tab {
+    min-height: 44px;
+    padding-inline: var(--space-2);
+  }
+
+  .field-readout-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-readout-grid > div + div {
+    padding-left: 0;
+    border-left: 0;
+    border-top: 1px solid var(--band-line);
+  }
+
+  .vis-shots figure {
+    min-height: 320px;
+  }
+
   .figures {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -1014,6 +1199,8 @@ kbd {
   .site-head,
   .hero-stage,
   .hero-controls,
+  .scenario-strip,
+  .field-readout,
   .skip-link {
     display: none;
   }