.ui-workflow-layout {
  position: relative;
  min-height: calc(100vh - var(--spacing-64));
  background: var(--color-bg);
}

.ui-workflow-layout__steps {
  display: flex;
  gap: var(--spacing-8);
  overflow-x: auto;
}

.ui-workflow-layout__steps.is-compact {
  flex-wrap: wrap;
  gap: var(--spacing-4);
  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);
  cursor: default;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    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--home {
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ui-workflow-layout__step.is-enabled:hover {
  background: var(--color-surface);
}

.ui-workflow-layout__steps.is-compact .ui-workflow-layout__step {
  height: 28px;
  padding: 0 var(--spacing-12, var(--spacing-8));
  white-space: nowrap;
}

.ui-workflow-layout__step.is-active {
  background: var(--color-mist-violet);
  color: var(--color-accent);
}

.ui-workflow-layout__step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-workflow-layout__step.state-complete {
  border-color: var(--color-success);
}

.ui-workflow-layout__step.state-in_progress {
  border-color: var(--color-warning);
}

.ui-workflow-layout__step.state-stale {
  border-color: var(--color-muted);
  opacity: 0.7;
}

.ui-workflow-layout__step.state-failed {
  border-color: var(--color-danger);
}

.ui-workflow-layout__body {
  min-height: calc(100vh - var(--spacing-64));
  transition: padding-left 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)));
}

/* 접힘 시에는 남은 손잡이(24px) 폭만큼 거터를 남긴다 — 손잡이가 그래프 Y축 라벨 등
   본문 글자를 덮지 않게(2026-08-04 사용자 보고: 531.4m 라벨 가려짐). */
.ui-workflow-layout:not(.is-options-open) .ui-workflow-layout__body {
  padding-left: var(--spacing-24);
}

@media (max-width: 860px) {
  .ui-workflow-layout.is-options-open .ui-workflow-layout__body {
    padding-left: 0;
  }
}

.ui-workflow-layout__main {
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - var(--spacing-64));
  overflow: auto;
  background: var(--color-canvas);
}