.parts-information {
  width: 100%;
  height: 1000px;
  max-height: 1444px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 16px;
  box-sizing: border-box;
  background-color: #e6ecf9;

  .parts-information-container {
    width: 100%;
    margin-bottom: 16px;
    padding: 20px;
    border-radius: 24px;
    outline: 1px solid #c2cadb;
    background-color: #fff;

    .thick-line {
      height: 12px;
      border-top: 1px solid #d9dfec;
      background-color: #f5f6f8;
      margin: 0 -20px;
      box-sizing: border-box;
    }

    .parts-information-title {
      font-weight: 600;
      font-size: 16px;
      line-height: 16px;
      letter-spacing: -0.64px;
      margin-bottom: 16px;
    }

    .item-container {
      width: 100%;
      height: 72px;
      border-bottom: 1px solid #d9dfec;
    }

    .file-upload-container {
      width: 100%;

      &.file-upload-container--border {
        border-bottom: 1px solid #d9dfec;
      }

      .file-upload {
        flex-grow: 1;

        .file-upload-wrapper {
          flex-grow: 1;
          .upload-area {
            flex-grow: 1;
          }
        }
      }
    }

    .add-img {
      width: 80px;
      height: 80px;
      border: 1px solid #d9dfec;
      background-color: #f5f6f8;
    }

    .qr-code-container {
      width: 100%;
      height: 52px;
    }

    .item-container-border-none {
      width: 100%;
      height: 72px;
    }

    .parts-information-content {
      width: 100%;

      .input-grow {
        width: 100%;
      }
    }
  }

  .parts-information-content-file {
    width: 100%;
    padding: 0 20px;
    outline: 1px solid #c2cadb;
    border-radius: 8px;
  }

  /* 테이블 */
  .parts-information-table-container {
    width: 100%;

    .parts-information-table {
      table-layout: fixed;
      width: 100%;
      height: 271px;
      margin-bottom: 16px;

      border-top: 1px solid #c2cadb;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: -0.56px;

      thead tr th {
        text-align: center;
        height: 44px;
        border-top: 1px solid #aeb7c6;
        border-bottom: 1px solid #d9dfec;
        background-color: #f5f6f8;
        font-weight: 500;
        color: #000;
      }

      thead tr th:first-child {
        width: 64px;
      }

      thead tr th:nth-child(2) {
        width: 719px;
      }

      thead tr th {
        width: 240px;
      }

      td {
        color: #383d48;
        border-bottom: 1px solid #d9dfec;
        text-align: center;

        div {
          height: 44px;
          line-height: 16px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
      }

      td:nth-child(2) {
        text-align: left;
      }
    }
  }
}

.parts-information-content-container {
  border: 1px solid #c2cadb;
  border-radius: 8px;
  padding: 0 20px;
  height: 437px;
}

.border-none {
  border-bottom: none !important;
}

.parts-information::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

.parts-information::-webkit-scrollbar-track {
  background-color: transparent;
}

.parts-information::-webkit-scrollbar-thumb {
  background-color: #c2cadb;
  border-radius: 4px;
}

.parts-information::-webkit-scrollbar-button {
  display: none;
}

/* 2 신규 부품 */
.parts-information-container-2 {
  width: 100%;
  min-height: 840px;

  border-radius: 24px;
  outline: 1px solid #c2cadb;
  background-color: #fff;

  .parts-information-container-header-div {
    padding: 20px 20px 16px 20px;
  }

  .parts-information-container-header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .parts-information-content-container-2 {
    width: calc(100% - 40px);
    outline: 1px solid #c2cadb;
    border-radius: 8px;
    margin: 0 20px;
  }

  .item-container {
    width: 100%;
    height: 72px;
    border-bottom: 1px solid #d9dfec;
  }

  /* 테이블 */
  .parts-information-table-area {
    width: calc(100% - 40px);
    margin: 0 20px;
  }
  .parts-information-table-container {
    width: 100%;

    .parts-information-table {
      table-layout: fixed;
      width: 100%;
      height: 89px;
      margin-bottom: 16px;

      border-top: 1px solid #c2cadb;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: -0.56px;

      thead tr th {
        text-align: center;
        height: 44px;
        border-top: 1px solid #aeb7c6;
        border-bottom: 1px solid #d9dfec;
        background-color: #f5f6f8;
        font-weight: 500;
        color: #000;
      }

      thead tr th:first-child {
        width: 64px;
      }

      thead tr th:nth-child(2) {
        width: 743px;
      }

      thead tr th {
        width: 240px;
      }

      td {
        color: #383d48;
        height: 44px;
        border-bottom: 1px solid #d9dfec;
        text-align: center;
        div {
          line-height: 16px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }
      }

      td:nth-child(2) {
        text-align: left;
      }
    }
  }

  .thick-line {
    width: calc(100% + 40px);
    height: 12px;

    margin: 20px -20px;

    border-top: 1px solid #d9dfec;
    background-color: #f5f6f8;
  }

  .thick-line-4,
  .thick-line-5 {
    width: calc(100% + 40px);
    height: 12px;

    margin: 0 -20px;

    border-top: 1px solid #d9dfec;
    background-color: #f5f6f8;
  }
}

.item-container {
  .cateogry-input-grid-container {
    flex-grow: 1;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 8px;

    .selected {
      width: 100%;
    }
  }
}

.parts-information-container,
.parts-information-container-2 {
  .category-item-1,
  .category-item-4,
  .category-item-2 {
    display: flex;
    align-items: center;
    gap: 16px;

    .input-container {
      flex-grow: 1;
      flex-basis: 0px;
      min-width: 1px;

      input {
        width: 100%;
      }
    }
    .custom-select {
      flex-grow: 1;
      flex-basis: 0px;
      min-width: 1px;

      .selected {
        width: 100%;
      }
    }
    .file-upload {
      flex-grow: 1;

      .upload-area {
        flex-grow: 1;
      }
    }
  }
  .category-item-1 {
    width: 100%;
  }
  .category-item-2 {
    width: calc(50% - 49px / 2);
  }
  .category-item-4 {
    width: calc(25% - 49px / 4);
  }
}

.file-upload-container {
  width: 100%;

  &.file-upload-container--border {
    border-bottom: 1px solid #d9dfec;
  }

  .file-upload {
    flex-grow: 1;

    .file-upload-wrapper {
      flex-grow: 1;
      .upload-area {
        flex-grow: 1;
      }
    }
  }
}

.add-img {
  width: 80px;
  height: 80px;
  border: 1px solid #d9dfec;
  background-color: #f5f6f8;
}

.qr-code-container {
  width: 100%;
  height: 52px;
}