/* 제품별 공정 관리 페이지 전용 CSS입니다. 이 파일을 수정하면 제품별 공정 관리 화면에만 적용됩니다. */
/* 선택자 주석은 어느 화면 요소인지, 속성 주석은 어떤 값을 바꾸는지 설명합니다. */

/* 제품별 공정 관리: .product-process-page .product-list-wrap 선택자의 화면 요소에 적용됩니다. */
.product-process-page .product-list-wrap,
/* 제품별 공정 관리: .product-process-table-wrap 선택자의 표에 적용됩니다. */
.product-process-table-wrap {
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
  /* 넘치는 내용 처리 방식을 auto로 설정합니다. */
  overflow: auto;
}

/* 제품별 공정 관리: .process-editor-grid 선택자의 배치 영역에 적용됩니다. */
.process-editor-grid {
  /* 표시 방식을 grid로 설정합니다. */
  display: grid;
  /* 가로 열 배치를 minmax(0, 1fr) 320px로 정합니다. */
  grid-template-columns: minmax(0, 1fr) 320px;
  /* 요소 사이 간격을 14px로 줍니다. */
  gap: 14px;
}

/* 제품별 공정 관리: .process-editor-side 선택자의 화면 요소에 적용됩니다. */
.process-editor-side {
  /* 이 값보다 작아지지 않도록 최소 너비를 0로 지정합니다. */
  min-width: 0;
}