refactor(E04): 보기 고르기 · 구간 줄 · 결과 값 목록 · 범례 판 · 진행 막대 · 띠 알림을 부품으로 (PLAN 553-4)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

E04_Stab3D/E04_Stab3D_UI_Style.css

@@ -29,17 +29,6 @@
   flex-wrap: wrap;
 }
 
-.e04-toggle {
-  display: inline-flex;
-  gap: var(--spacing-4);
-}
-
-.e04-toggle .ui-btn.is-on {
-  border-color: var(--color-primary);
-  background: var(--color-primary);
-  color: var(--color-primary-text);
-}
-
 .e04-stage {
   position: relative;
   flex: 1 1 auto;
@@ -99,23 +88,10 @@
   right: var(--spacing-8);
 }
 
+/* 판 · 범례 · 목록 줄 · 값 목록 · 띠 알림은 부품 — 여기는 자리만 */
 .e04-view3d__tools {
-  position: absolute;
   top: var(--spacing-8);
   left: var(--spacing-8);
-  display: flex;
-  gap: var(--spacing-12);
-  padding: var(--spacing-4) var(--spacing-8);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font-size: 12px;
-}
-
-.e04-view3d__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-4);
 }
 
 .e04-legend-slot {
@@ -125,30 +101,16 @@
   pointer-events: none;
 }
 
-.e04-legend {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: var(--spacing-8);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  font-size: 12px;
+.e04-legend-slot .e04-legend {
+  position: static;
 }
 
-.e04-legend__row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-
-.e04-legend__swatch,
 .e04-section__chip {
   display: inline-block;
   width: 14px;
   height: 10px;
   flex: none;
+  margin-right: var(--spacing-4);
   border-radius: 2px;
   border: 1px solid var(--color-border);
 }
@@ -156,10 +118,7 @@
 /* 좌측 */
 .e04-hint,
 .e04-note {
-  margin: 0 0 var(--spacing-8);
-  color: var(--color-text-muted);
-  font-size: 12px;
-  line-height: 1.5;
+  margin-bottom: var(--spacing-8);
 }
 
 .e04-sections {
@@ -170,35 +129,6 @@
   overflow: auto;
 }
 
-.e04-section {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4) var(--spacing-8);
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text);
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.e04-section:hover {
-  background: var(--color-surface-raised);
-}
-
-.e04-section.is-active {
-  border-color: var(--color-primary);
-}
-
-.e04-section__value {
-  color: var(--color-text-muted);
-  font-size: 12px;
-}
-
 .e04-range .ui-field,
 .e04-advanced .ui-field {
   min-width: 0;
@@ -229,58 +159,15 @@
   display: none;
 }
 
-.e04-progress {
-  width: 100%;
-}
-
-.e04-progress__text {
-  margin: 0;
-  color: var(--color-text);
-  font-size: 12px;
-}
-
 /* 우측 */
 .e04-result {
   padding: var(--spacing-12);
 }
 
-.e04-result__list {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--spacing-8) var(--spacing-12);
-  margin: 0;
-  font-size: 13px;
-}
-
-.e04-result__list dt {
-  color: var(--color-text-muted);
-}
-
-.e04-result__list dd {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin: 0;
-  color: var(--color-text);
-  font-weight: 600;
-  justify-content: flex-end;
-}
-
-.e04-result__list dd.is-ok {
-  color: var(--color-success);
-}
-
-.e04-result__list dd.is-ng {
-  color: var(--color-danger);
-}
-
 .e04-warn {
-  margin: var(--spacing-12) 0 0;
-  color: var(--color-danger);
-  font-size: 12px;
+  margin-top: var(--spacing-12);
 }
 
 .e04-empty {
   margin: var(--spacing-16);
-  color: var(--color-text-muted);
 }