/* 기계 양식(821-2) — 왼쪽 칸 · 오른쪽 시간당 계산식 · 좁은 폭(720 아래)은 한 줄로 */
.ui-machine-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: var(--spacing-16);
  align-items: start;
}

.ui-machine-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
}

.ui-machine-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-8) var(--spacing-12);
}

.ui-machine-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.ui-machine-form__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.ui-machine-form__coefs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-8);
}

.ui-machine-form__coefs .ui-input {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}

.ui-machine-form .is-changed .ui-input,
.ui-machine-form .is-changed .ui-select {
  background: color-mix(in srgb, var(--color-warning) 28%, var(--color-canvas));
}

.ui-machine-form__warn {
  min-height: 0;
  color: var(--color-warning);
  font-size: var(--text-caption);
}

.ui-machine-form__warn:empty {
  display: none;
}

.ui-machine-form__notice:empty {
  display: none;
}

.ui-machine-form__similar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-8) var(--spacing-12);
}

.ui-machine-form__similar > summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.ui-machine-form__similar .ui-find__list {
  max-height: 240px;
  overflow: auto;
}

.ui-machine-form__preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  position: sticky;
  top: 0;
}

.ui-machine-form__preview .ui-calc-row--formula {
  grid-template-columns: 64px minmax(0, 1fr) 96px;
}

.ui-machine-form__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-4) 0;
  width: 100%;
}

@media (max-width: 720px) {
  .ui-machine-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-machine-form__preview {
    position: static;
  }
}