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

/* 제품 매칭 확인: .product-matching-filter 선택자의 조회조건 영역에 적용됩니다. */
.product-matching-filter {
  /* 표시 방식을 flex로 설정합니다. */
  display: flex;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap로 설정합니다. */
  flex-wrap: wrap;
  /* 요소 사이 간격을 10px 12px로 줍니다. */
  gap: 10px 12px;
  /* 세로 정렬을 center로 맞춥니다. */
  align-items: center;
}

/* 제품 매칭 확인: .product-matching-table-wrap 선택자의 표에 적용됩니다. */
.product-matching-table-wrap,
/* 제품 매칭 확인: .matching-table-wrap 선택자의 표에 적용됩니다. */
.matching-table-wrap {
  /* 넘치는 내용 처리 방식을 auto로 설정합니다. */
  overflow: auto;
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100%;
}

/* 제품 매칭 확인: .matching-edit-dialog 선택자의 팝업창에 적용됩니다. */
.matching-edit-dialog {
  /* 기본 너비를 min(760px, calc(100vw - 48px))로 지정합니다. */
  width: min(760px, calc(100vw - 48px));
}