Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_New.css

/* M01 로직 개선 시험 — 식으로 새 로직 만들기 (좁은 화면에서도 한 칸으로 쌓임) */
.m01lab-new {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
}

.m01lab-new__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}

.m01lab-new__text {
  width: 100%;
  min-height: 140px;
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-monospace, Consolas, monospace;
  font-size: var(--text-body);
  resize: vertical;
}

.m01lab-new__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

.m01lab-new__vars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.m01lab-new__var {
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.m01lab-new__var-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
}

.m01lab-new__var-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.m01lab-new__wide {
  flex: 1 1 220px;
}

.m01lab-new__picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
}

.m01lab-new__src {
  display: flex;
  gap: var(--spacing-8);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  overflow-x: auto;
}

.m01lab-new__no {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

.m01lab-new__src mark {
  background: var(--color-danger);
  color: var(--color-bg);
  border-radius: 2px;
}

.m01lab-new__bad {
  color: var(--color-danger);
}

.m01lab-new__soft {
  color: var(--color-text-secondary);
}

.m01lab-new__calc {
  min-width: 0;
}