.ui-workflow-layout {
  position: relative;
  min-height: calc(100dvh - var(--app-header-h));
  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(100dvh - var(--app-header-h));
  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(100dvh - var(--app-header-h));
  overflow: auto;
  background: var(--color-canvas);
}

/* ☰ 들여쓰기(7-2) — 본문 첫 줄이 ☰ 자리를 비키려면 본문 왼쪽 끝에서 더 비울 폭.
   좌측 패널이 열려 본문을 민 때는 0 · 접힘(손잡이 24) · 좁은 폭에서 본문 위에 겹친 때는 남은 만큼.
   쪽마다 첫 줄(도구 줄 · 탭 · 제목)이 `padding-left: max(제 여백, var(--wf-burger-pad))` 한 줄로 씀 */
html.is-bm-route .ui-workflow-layout {
  --wf-burger-pad: max(0px, calc(var(--app-burger-inset) - var(--spacing-24)));
}

html.is-bm-route .ui-workflow-layout.is-options-open {
  --wf-burger-pad: 0px;
}

@media (max-width: 860px) {
  html.is-bm-route .ui-workflow-layout.is-options-open {
    --wf-burger-pad: var(--app-burger-inset);
  }
}