260717_0

ui_template/ui_template_workflow_layout.css

@@ -1,92 +1,9 @@
 .ui-workflow-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: calc(100vh - var(--wf-header-height));
+  position: relative;
+  min-height: calc(100vh - var(--spacing-64));
   background: var(--color-bg);
 }
 
-.ui-workflow-layout__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-16);
-  min-height: var(--wf-header-height);
-  padding: var(--spacing-8) var(--spacing-24);
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-}
-
-.ui-workflow-layout__menu-button {
-  position: absolute;
-  top: 60px;
-  left: var(--spacing-24);
-  z-index: var(--z-dropdown);
-  width: auto;
-  min-width: 40px;
-  height: 40px;
-  padding: 0 var(--spacing-12);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-buttons);
-  background: var(--color-canvas);
-  color: var(--color-text);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-
-.ui-workflow-layout__header-hide {
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-buttons);
-  background: var(--color-canvas);
-  color: var(--color-text);
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-
-/* 헤더 슬라이드업 숨김 */
-.ui-workflow-layout__header {
-  transition: margin-top var(--transition-base);
-}
-
-.ui-workflow-layout.is-header-hidden .ui-workflow-layout__header {
-  margin-top: calc(-1 * var(--wf-header-height));
-  pointer-events: none;
-}
-
-/* 헤더 복원 화살표: 숨김 상태에서만 표시 */
-.ui-workflow-layout__header-reveal {
-  display: none;
-  align-self: center;
-  width: 48px;
-  height: 24px;
-  margin: var(--spacing-4) auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-pills);
-  background: var(--color-surface-raised);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-}
-
-.ui-workflow-layout.is-header-hidden .ui-workflow-layout__header-reveal {
-  display: block;
-}
-
-.ui-workflow-layout__title-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-24);
-  flex: 1;
-  min-width: 0;
-}
-
-.ui-workflow-layout__title {
-  font-size: var(--text-subheading);
-  white-space: nowrap;
-}
-
 .ui-workflow-layout__steps {
   display: flex;
   gap: var(--spacing-8);
@@ -99,14 +16,19 @@
   overflow: visible;
 }
 
+.ui-workflow-layout__steps.is-vertical {
+  flex-direction: column;
+  overflow: visible;
+}
+
 .ui-workflow-layout__step {
   flex: 0 0 auto;
   padding: var(--spacing-4) var(--spacing-16);
+  border: 1px solid transparent;
   border-radius: var(--radius-pills);
   background: var(--color-paper);
   color: var(--color-text-secondary);
   font-size: var(--text-caption);
-  border: 1px solid transparent;
   cursor: default;
   transition:
     background-color var(--transition-base),
@@ -114,17 +36,39 @@
     cursor var(--transition-base);
 }
 
+.ui-workflow-layout__steps.is-vertical .ui-workflow-layout__step {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  width: 100%;
+  min-height: var(--spacing-40);
+  border-radius: var(--radius-buttons);
+  text-align: left;
+  white-space: normal;
+}
+
+.ui-workflow-layout__step-icon {
+  flex: 0 0 var(--spacing-24);
+  font-size: var(--text-body);
+  line-height: 1;
+  text-align: center;
+}
+
+.ui-workflow-layout__step-label {
+  min-width: 0;
+}
+
 .ui-workflow-layout__step.is-enabled {
   cursor: pointer;
 }
 
 .ui-workflow-layout__step.is-enabled:hover {
-  background: var(--color-paper-hover, var(--color-paper));
+  background: var(--color-surface);
 }
 
 .ui-workflow-layout__steps.is-compact .ui-workflow-layout__step {
   height: 28px;
-  padding: 0 var(--spacing-12);
+  padding: 0 var(--spacing-12, var(--spacing-8));
   white-space: nowrap;
 }
 
@@ -156,58 +100,25 @@
 }
 
 .ui-workflow-layout__body {
-  position: relative;
-  display: block;
-  flex: 1;
-  min-height: 0;
+  min-height: calc(100vh - var(--spacing-64));
+  transition: padding-left var(--transition-base);
 }
 
-.ui-workflow-layout__dropdown-panel {
-  position: absolute;
-  top: 108px;
-  left: var(--spacing-24);
-  width: 320px;
-  max-height: calc(100vh - var(--wf-header-height) - 80px);
-  z-index: var(--z-dropdown);
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-cards);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-  padding: var(--spacing-16);
-  opacity: 0;
-  transform: translateY(-10px);
-  pointer-events: none;
-  transition:
-    opacity var(--transition-base),
-    transform var(--transition-base);
+/* 좌측 옵션 사이드바 열림 시 상세화면을 오른쪽으로 밀어냄 */
+.ui-workflow-layout.is-options-open .ui-workflow-layout__body {
+  padding-left: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
 }
 
-.ui-workflow-layout.is-menu-open .ui-workflow-layout__dropdown-panel {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: all;
+@media (max-width: 860px) {
+  .ui-workflow-layout.is-options-open .ui-workflow-layout__body {
+    padding-left: 0;
+  }
 }
 
 .ui-workflow-layout__main {
   width: 100%;
-  height: 100%;
   min-width: 0;
-  min-height: 0;
+  min-height: calc(100vh - var(--spacing-64));
   overflow: auto;
   background: var(--color-canvas);
 }
-
-@media (max-width: 860px) {
-  .ui-workflow-layout__title-wrap {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: var(--spacing-8);
-  }
-
-  .ui-workflow-layout__dropdown-panel {
-    left: var(--spacing-8);
-    right: var(--spacing-8);
-    width: auto;
-  }
-}