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

/* BOM 정보 확인: .bom-toolbar 선택자의 화면 요소에 적용됩니다. */
.bom-toolbar {
  /* 표시 방식을 flex !important로 설정해서 조회조건과 버튼을 같은 줄 흐름에 놓습니다. */
  display: flex !important;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap !important로 설정합니다. */
  flex-wrap: wrap !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 10px 12px !important로 줍니다. */
  gap: 10px 12px !important;
  /* 안쪽 여백을 12px 16px !important로 줍니다. */
  padding: 12px 16px !important;
  /* 이 값보다 작아지지 않도록 최소 높이를 0 !important로 지정합니다. */
  min-height: 0 !important;
  /* 너비 계산 방식을 border-box !important로 지정합니다. */
  box-sizing: border-box !important;
}

/* BOM 정보 확인: 실제 조회조건 바를 고정된 순서의 grid로 배치합니다. */
.bom-page .bom-toolbar.bom-info-toolbar.search-panel {
  /* 공통 BOM 툴바의 예전 grid 규칙을 이 페이지에서만 덮어씁니다. */
  display: grid !important;
  /* 고객사, 규격, 품목코드, 버튼 2개, 소요량 계산 순서로 칸을 고정합니다. */
  grid-template-columns:
    minmax(180px, 210px)
    minmax(205px, 235px)
    minmax(180px, 205px)
    86px
    86px
    minmax(390px, 460px) !important;
  /* 모든 컨트롤을 한 줄의 가운데로 맞춥니다. */
  align-items: center !important;
  /* 자동 배치가 새 행을 만들지 않도록 같은 행 기준으로 배치합니다. */
  grid-auto-flow: column !important;
  /* 기본 행 높이를 컨트롤 높이에 맞춥니다. */
  grid-auto-rows: minmax(46px, auto) !important;
  /* 세로 남는 공간이 생겨도 컨트롤이 가운데 한 줄에 머물게 합니다. */
  align-content: center !important;
  /* 왼쪽부터 순서대로 배치합니다. */
  justify-content: start !important;
  /* 칸 사이 간격을 지정합니다. */
  gap: 10px 8px !important;
}

/* BOM 정보 확인: 전체 화면 영역을 화면 안에 맞춰 표 카드가 남은 공간만 차지하게 합니다. */
.bom-info-page {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 조회조건과 표 영역을 세로로 배치합니다. */
  grid-template-rows: auto minmax(0, 1fr) !important;
  /* 요소 사이 간격을 14px !important로 줍니다. */
  gap: 14px !important;
  /* 화면 안에서 표 끝이 보이도록 전체 높이를 계산합니다. */
  height: calc(100vh - var(--topbar-height, 70px) - 34px) !important;
  /* 화면 높이보다 억지로 커지지 않게 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
}

/* BOM 정보 확인: 표 카드가 남은 세로 공간 안에서만 늘어나게 합니다. */
.bom-info-page .bom-info-table-card {
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 카드 안쪽 요소를 세로로 배치합니다. */
  flex-direction: column !important;
  /* 그리드의 남은 공간을 채우도록 높이를 100%로 지정합니다. */
  height: 100% !important;
  /* 스크롤 영역이 줄어들 수 있도록 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
  /* 카드 밖으로 표가 밀려나지 않도록 숨김 처리합니다. */
  overflow: hidden !important;
}

/* BOM 정보 확인: 표 감싸는 영역도 카드 안 남은 높이를 채우게 합니다. */
.bom-info-page .bom-table-wrap {
  /* 남은 공간을 차지하도록 flex 값을 지정합니다. */
  flex: 1 1 auto !important;
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 표 스크롤 영역을 세로로 배치합니다. */
  flex-direction: column !important;
  /* 스크롤 영역이 줄어들 수 있도록 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
  /* 공통 CSS와 충돌하지 않도록 최대 너비를 유지합니다. */
  max-width: 100% !important;
  /* 바깥쪽 넘침은 숨기고 안쪽에서만 스크롤합니다. */
  overflow: hidden !important;
}

/* BOM 정보 확인: 표 스크롤 영역은 카드 안에서만 스크롤되게 합니다. */
.bom-info-page .bom-table-wrap .table-scroll {
  /* 남은 공간을 차지하도록 flex 값을 지정합니다. */
  flex: 1 1 auto !important;
  /* 로딩 오버레이의 배치 기준을 잡습니다. */
  position: relative !important;
  /* 공통 CSS의 520px 높이 제한을 해제합니다. */
  max-height: none !important;
  /* 화면 밖으로 밀리지 않도록 최소 높이를 0으로 지정합니다. */
  min-height: 0 !important;
  /* 카드가 정한 남은 높이에 맞춥니다. */
  height: auto !important;
  /* 넘치는 내용은 스크롤로 처리합니다. */
  overflow: auto !important;
}

/* BOM 정보 확인: 표 제목행은 스크롤해도 위에 붙어 있게 합니다. */
.bom-info-page .bom-table-wrap thead th {
  /* 배치 기준을 sticky로 설정합니다. */
  position: sticky !important;
  /* 위쪽 위치를 0으로 지정합니다. */
  top: 0 !important;
  /* 표 내용보다 위에 보이도록 겹침 순서를 지정합니다. */
  z-index: 3 !important;
}

/* BOM 정보 확인: 조회 중에는 필터와 버튼이 잠시 멈춘 상태임을 보여줍니다. */
.bom-info-page .bom-info-toolbar :disabled {
  /* 투명도를 살짝 낮춰 비활성 상태를 표시합니다. */
  opacity: .72 !important;
  /* 마우스 커서를 대기 상태로 표시합니다. */
  cursor: wait !important;
}

/* BOM 정보 확인: 표 영역 위에 로딩 안내를 띄웁니다. */
.bom-loading-overlay {
  /* 표 스크롤 영역 전체를 덮도록 배치합니다. */
  position: absolute !important;
  /* 네 방향을 모두 0으로 맞춥니다. */
  inset: 0 !important;
  /* 표보다 위에 보이도록 겹침 순서를 지정합니다. */
  z-index: 20 !important;
  /* 내용을 가운데 정렬합니다. */
  display: flex !important;
  /* 세로 방향으로 안내 문구를 배치합니다. */
  flex-direction: column !important;
  /* 가로 정렬을 center로 맞춥니다. */
  align-items: center !important;
  /* 세로 정렬을 center로 맞춥니다. */
  justify-content: center !important;
  /* 요소 사이 간격을 10px로 줍니다. */
  gap: 10px !important;
  /* 안쪽 여백을 24px로 줍니다. */
  padding: 24px !important;
  /* 반투명 배경으로 표 위에 떠 있는 느낌을 줍니다. */
  background: rgba(248, 251, 255, .9) !important;
  /* 글자색을 기본 진한색으로 지정합니다. */
  color: var(--text) !important;
  /* 가운데 정렬로 안내 문구를 읽기 쉽게 만듭니다. */
  text-align: center !important;
}

/* BOM 정보 확인: 로딩 제목 문구입니다. */
.bom-loading-overlay strong {
  /* 글자 크기를 16px로 지정합니다. */
  font-size: 16px !important;
  /* 글자를 굵게 표시합니다. */
  font-weight: 900 !important;
}

/* BOM 정보 확인: 로딩 보조 문구입니다. */
.bom-loading-overlay p {
  /* 바깥 여백을 제거합니다. */
  margin: 0 !important;
  /* 글자 크기를 13px로 지정합니다. */
  font-size: 13px !important;
  /* 글자색을 보조색으로 지정합니다. */
  color: var(--muted) !important;
  /* 글자를 굵게 표시합니다. */
  font-weight: 800 !important;
}

/* BOM 정보 확인: 회전하는 로딩 표시입니다. */
.bom-loading-spinner {
  /* 표시 방식을 block으로 설정합니다. */
  display: block !important;
  /* 너비를 34px로 지정합니다. */
  width: 34px !important;
  /* 높이를 34px로 지정합니다. */
  height: 34px !important;
  /* 원형으로 보이게 합니다. */
  border-radius: 50% !important;
  /* 기본 테두리 색상을 지정합니다. */
  border: 4px solid #d8e7ff !important;
  /* 회전이 보이도록 위쪽 테두리 색상을 진하게 지정합니다. */
  border-top-color: var(--blue-700) !important;
  /* 회전 애니메이션을 적용합니다. */
  animation: bom-loading-spin .8s linear infinite !important;
}

/* BOM 정보 확인: 로딩 스피너 회전 애니메이션입니다. */
@keyframes bom-loading-spin {
  /* 시작 각도입니다. */
  from {
    transform: rotate(0deg);
  }
  /* 끝 각도입니다. */
  to {
    transform: rotate(360deg);
  }
}

/* BOM 정보 확인: 고객사 선택 컨트롤 위치입니다. */
.bom-info-toolbar .bom-customer-field {
  /* 첫 번째 칸에 배치합니다. */
  grid-column: 1 !important;
  /* 첫 번째 줄에 고정합니다. */
  grid-row: 1 !important;
}

/* BOM 정보 확인: 규격 선택 컨트롤 위치입니다. */
.bom-info-toolbar .bom-product-field {
  /* 두 번째 칸에 배치합니다. */
  grid-column: 2 !important;
  /* 첫 번째 줄에 고정합니다. */
  grid-row: 1 !important;
}

/* BOM 정보 확인: 품목코드 표시 컨트롤 위치입니다. */
.bom-info-toolbar .bom-code-field {
  /* 세 번째 칸에 배치합니다. */
  grid-column: 3 !important;
  /* 첫 번째 줄에 고정합니다. */
  grid-row: 1 !important;
}

/* BOM 정보 확인: 조회 버튼 위치입니다. */
.bom-info-toolbar #bomSearchButton {
  /* 네 번째 칸에 배치합니다. */
  grid-column: 4 !important;
  /* 첫 번째 줄에 고정합니다. */
  grid-row: 1 !important;
}

/* BOM 정보 확인: 초기화 버튼 위치입니다. */
.bom-info-toolbar #bomResetButton {
  /* 다섯 번째 칸에 배치합니다. */
  grid-column: 5 !important;
  /* 첫 번째 줄에 고정합니다. */
  grid-row: 1 !important;
}

/* BOM 정보 확인: .bom-filter-stack 선택자의 조회조건 묶음에 적용됩니다. */
.bom-filter-stack {
  /* 조회조건 묶음이 계산 박스보다 먼저 나오도록 순서를 1로 지정합니다. */
  order: 1 !important;
  /* 표시 방식을 flex !important로 설정해서 묶음 안에서 순서가 흐트러지지 않게 합니다. */
  display: flex !important;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap !important로 설정합니다. */
  flex-wrap: wrap !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 10px 12px !important로 줍니다. */
  gap: 10px 12px !important;
  /* 가능한 공간을 차지하되 계산 박스가 옆에 올 수 있게 합니다. */
  flex: 1 1 auto !important;
  /* 너무 좁아졌을 때 줄바꿈이 자연스럽게 되도록 최소 너비를 0으로 지정합니다. */
  min-width: 0 !important;
}

/* BOM 정보 확인: .bom-filter-row 선택자의 조회조건 줄에 적용됩니다. */
.bom-filter-row {
  /* 표시 방식을 flex !important로 설정해서 컨트롤이 작성된 순서대로 배치되게 합니다. */
  display: flex !important;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap !important로 설정합니다. */
  flex-wrap: wrap !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 10px 12px !important로 줍니다. */
  gap: 10px 12px !important;
  /* 부모 안에서 필요한 만큼 넓이를 차지합니다. */
  flex: 1 1 auto !important;
  /* 너무 좁아졌을 때 줄바꿈이 자연스럽게 되도록 최소 너비를 0으로 지정합니다. */
  min-width: 0 !important;
}

/* BOM 정보 확인: .bom-toolbar-main 선택자의 화면 요소에 적용됩니다. */
.bom-toolbar-main {
  /* 표시 방식을 flex로 설정합니다. */
  display: flex;
  /* 내용이 넘칠 때 줄바꿈 방식을 wrap로 설정합니다. */
  flex-wrap: wrap;
  /* 요소 사이 간격을 10px 12px로 줍니다. */
  gap: 10px 12px;
  /* 세로 정렬을 center로 맞춥니다. */
  align-items: center;
}

/* BOM 정보 확인: .bom-toolbar label 선택자의 라벨 줄에 적용됩니다. */
.bom-toolbar label {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 가로 열 배치를 max-content auto !important로 정합니다. */
  grid-template-columns: max-content auto !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 10px !important로 줍니다. */
  gap: 10px !important;
  /* 기본 너비를 auto !important로 지정합니다. */
  width: auto !important;
  /* 이 값보다 작아지지 않도록 최소 높이를 38px !important로 지정합니다. */
  min-height: 38px !important;
  /* 줄바꿈 없이 한 컨트롤 묶음으로 보이게 합니다. */
  white-space: nowrap !important;
}

/* BOM 정보 확인: 조회조건 바 안의 직접 라벨 크기를 칸 너비에 맞춥니다. */
.bom-info-toolbar > label {
  /* grid 칸 전체를 사용하게 합니다. */
  width: 100% !important;
  /* 이 값보다 커지지 않도록 최대 너비를 100%로 지정합니다. */
  max-width: 100% !important;
}

/* BOM 정보 확인: .bom-toolbar input 선택자의 입력칸에 적용됩니다. */
.bom-toolbar input,
/* BOM 정보 확인: .bom-toolbar select 선택자의 선택박스에 적용됩니다. */
.bom-toolbar select {
  /* 기본 높이를 38px !important로 지정합니다. */
  height: 38px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 0 !important로 지정합니다. */
  min-width: 0 !important;
}

/* BOM 정보 확인: .bom-toolbar select 선택자의 선택박스에 적용됩니다. */
.bom-toolbar select {
  /* 기본 너비를 150px !important로 지정합니다. */
  width: 150px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 170px !important로 지정합니다. */
  max-width: 170px !important;
}

/* BOM 정보 확인: .bom-toolbar input 선택자의 일반 입력칸에 적용됩니다. */
.bom-toolbar input:not(#bomPlanQty) {
  /* 기본 너비를 150px !important로 지정합니다. */
  width: 150px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 170px !important로 지정합니다. */
  max-width: 170px !important;
}

/* BOM 정보 확인: .bom-filter-actions 선택자의 조회 버튼 묶음에 적용됩니다. */
.bom-filter-actions {
  /* 고객사, 규격, 품명, 품목코드 다음에 버튼이 오도록 순서를 5로 지정합니다. */
  order: 5 !important;
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 8px !important로 줍니다. */
  gap: 8px !important;
}

/* BOM 정보 확인: .bom-toolbar button 선택자의 버튼에 적용됩니다. */
.bom-toolbar button {
  /* 기본 너비를 86px !important로 지정합니다. */
  width: 86px !important;
  /* 이 값보다 작아지지 않도록 최소 너비를 86px !important로 지정합니다. */
  min-width: 86px !important;
  /* 기본 높이를 38px !important로 지정합니다. */
  height: 38px !important;
  /* 버튼 안쪽 좌우 여백을 12px !important로 지정합니다. */
  padding-inline: 12px !important;
}

/* BOM 정보 확인: 조회조건 바의 직접 버튼 크기입니다. */
.bom-info-toolbar > button {
  /* grid 칸 전체를 사용하게 합니다. */
  width: 100% !important;
  /* 버튼 너비를 칸 너비로 고정합니다. */
  max-width: 100% !important;
  /* grid 안에서 가운데 세로 정렬합니다. */
  align-self: center !important;
}

/* BOM 정보 확인: .bom-calc-box 선택자의 화면 요소에 적용됩니다. */
.bom-calc-box {
  /* 여섯 번째 칸에 계산 박스를 배치합니다. */
  grid-column: 6 !important;
  /* 첫 번째 줄에 고정해서 다른 조회조건이 아래로 밀리지 않게 합니다. */
  grid-row: 1 !important;
  /* 남는 공간 계산 때문에 앞쪽으로 밀리지 않도록 왼쪽 여백을 0으로 지정합니다. */
  margin-left: 0 !important;
  /* 표시 방식을 flex !important로 설정합니다. */
  display: flex !important;
  /* 계산 영역 안의 확인 버튼이 오른쪽에 붙도록 줄바꿈을 막습니다. */
  flex-wrap: nowrap !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 8px !important로 줍니다. */
  gap: 8px !important;
  /* 안쪽 여백을 8px 12px !important로 줍니다. */
  padding: 8px 12px !important;
  /* 이 값보다 작아지지 않도록 최소 높이를 46px !important로 지정합니다. */
  min-height: 46px !important;
  /* 테두리 색상을 연한 파란색으로 지정합니다. */
  border: 1px solid var(--line) !important;
  /* 모서리 둥글기를 6px !important로 지정합니다. */
  border-radius: 6px !important;
  /* 배경색을 밝은 파란빛으로 지정합니다. */
  background: #f8fbff !important;
  /* 너비 계산 방식을 border-box !important로 지정합니다. */
  box-sizing: border-box !important;
  /* grid 칸 전체를 사용하게 합니다. */
  width: 100% !important;
}

/* BOM 정보 확인: .bom-calc-box strong 선택자의 계산 영역 제목에 적용됩니다. */
.bom-calc-box strong {
  /* 줄바꿈 없이 제목이 유지되게 합니다. */
  white-space: nowrap !important;
}

/* BOM 정보 확인: .bom-calc-box label 선택자의 제품 수량 줄에 적용됩니다. */
.bom-calc-box label {
  /* 표시 방식을 grid !important로 설정합니다. */
  display: grid !important;
  /* 제품 수량 글자와 짧은 입력칸을 한 줄에 배치합니다. */
  grid-template-columns: max-content 72px !important;
  /* 세로 정렬을 center !important로 맞춥니다. */
  align-items: center !important;
  /* 요소 사이 간격을 6px !important로 줍니다. */
  gap: 6px !important;
  /* 필요한 만큼만 너비를 차지합니다. */
  flex: 0 0 auto !important;
}

/* BOM 정보 확인: .bom-calc-box input 선택자의 제품 수량 입력칸에 적용됩니다. */
.bom-calc-box input {
  /* 기본 너비를 72px !important로 지정합니다. */
  width: 72px !important;
  /* 이 값보다 커지지 않도록 최대 너비를 72px !important로 지정합니다. */
  max-width: 72px !important;
}

/* BOM 정보 확인: 아주 좁은 화면에서만 컨트롤이 다음 줄로 내려가게 합니다. */
@media (max-width: 1180px) {
  /* BOM 정보 확인: 좁은 화면에서 두 줄 grid로 전환합니다. */
  .bom-page .bom-toolbar.bom-info-toolbar.search-panel {
    /* 조회조건 세 개와 버튼 두 개를 첫 줄에 두고 계산 박스는 다음 줄로 보냅니다. */
    grid-template-columns:
      minmax(180px, 1fr)
      minmax(205px, 1fr)
      minmax(180px, 1fr)
      86px
      86px !important;
  }

  /* BOM 정보 확인: 좁은 화면에서 소요량 계산 박스를 다음 줄 오른쪽에 배치합니다. */
  .bom-calc-box {
    /* 두 번째 줄에서 오른쪽 네 칸을 사용합니다. */
    grid-column: 2 / 6 !important;
    /* 좁은 화면에서만 두 번째 줄로 보냅니다. */
    grid-row: 2 !important;
  }
}

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