.category-page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 1000px;
  padding: 16px;
  background: #e6ecf9;

  .category-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    background: #f0f4fd;
    border-radius: 8px;

    h3 {
      font-size: 22px;
      line-height: 22px;
      letter-spacing: -0.88px;
    }

    padding: 17px 20px;
    height: 56px;
  }

  .category-page-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 98px;
    padding: 16px 20px;
    color: #383d48;
    border-radius: 8px;
    background: #f5f6f8;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -0.56px;
  }

  .category-content {
    width: 100%;
    height: 782px;
    display: flex;
    gap: 16px;

    & > * {
      flex-basis: 0;
      flex-grow: 1;

      min-width: 0;
    }

    .category-search-container {
      z-index: 0;
      position: relative;

      display: flex;
      flex-direction: column;

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

      .category-search-header {
        display: flex;

        justify-content: space-between;
        align-items: center;

        width: 100%;
        height: 64px;

        padding: 12px 20px;
        border-radius: 24px 24px 0 0;
        background: #f5f6f8;

        .category-search-box {
          display: flex;

          gap: 8px;
        }

        .delete-btn {
          background-color: #ffffff;
        }
      }

      .category-search-list-container {
        z-index: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        height: 718px;
        padding: 17px 20px;
        border-top: 1px solid #d9dfec;

        .no-data {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 440px;
          height: 630px;
          font-size: 14px;
          line-height: 14px;
          letter-spacing: -0.56px;
        }

        .category-table {
          z-index: 0;
          position: relative;

          height: 100%;

          .accordion {
            width: 100%;
            height: 100%;

            border: none;
            background-color: transparent;

            overflow: auto;

            padding-bottom: 50px;
          }

          .accordion-item {
            display: flex;
            align-items: center;
            border: none;
          }

          .first-item:hover {
            background-color: #f2f7ff;
          }

          .first {
            border-top: 1px solid #aeb7c6;
          }

          .first-accordion-item {
            border-bottom: 1px solid #d9dfec;
            border-radius: 0;
          }

          .accordion-header {
            display: flex;
            align-items: center;
            width: 100%;
            height: 48px;
          }

          .accordion-item-container:hover {
            background-color: #f2f7ff;
          }

          .accordion-button {
            display: flex;
            align-items: center;
            flex-grow: 1;
            padding: 0;
            border-radius: 0;
            color: #000;
            background-color: transparent;
            box-shadow: none !important;
            position: relative;
            pointer-events: all;
            font-size: 14px;
            line-height: 14px;
            letter-spacing: -0.56px;
          }

          .accordion-button::after {
            content: none;
          }

          .accordion-header img {
            transition: transform 0.2s ease-in-out;
          }

          .accordion-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
          }

          .accordion-icon {
            margin-right: 8px;
          }

          .accordion-item-container {
            width: 100%;
            height: 48px;
          }

          .accordion-body {
            z-index: 0;
            position: relative;
            padding: 0;
          }

          .accordion-body span {
            display: flex !important;
            align-items: center;
            display: block;

            /* width: 440px; */
            width: 100%;
            height: 48px;
            padding-left: 232px;
            font-size: 14px;
            line-height: 14px;
            letter-spacing: -0.56px;
            color: #5b6371;
            cursor: pointer;
          }

          .accordion-body span:hover {
            background-color: #f2f7ff;
          }

          .accordion-button.collapsed {
            padding: 0;
          }

          .accordion-switch {
            width: 48.63px;
            margin-right: 8px;
          }

          /* depth styles */
          .accordion-header {
            &.accordion-header--depth-1 {
              padding-left: 8px;
            }
            &.accordion-header--depth-2 {
              padding-left: 36px;
            }
            &.accordion-header--depth-3 {
              padding-left: 64px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-4 {
              padding-left: 88px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-5 {
              padding-left: 112px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-6 {
              padding-left: 136px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-7 {
              padding-left: 160px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-8 {
              padding-left: 184px;

              .accordion-button {
                color: #5b6371;
              }
            }
            &.accordion-header--depth-9 {
              padding-left: 208px;

              .accordion-button {
                color: #5b6371;
              }
            }
          }
        }
      }
    }

    .category-product-name {
      display: flex;
      flex-direction: column;

      height: 782px;

      .product-container {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        height: 64px;
        padding: 12px 20px;
        background: #f5f6f8;
        border: 1px solid #c2cadb;

        border-bottom: 1px solid #d9dfec;
        border-radius: 24px 24px 0 0;

        .delete-btn {
          background-color: #ffffff;
        }

        .product-container__search-box {
          display: flex;
          gap: 8px;
        }
      }

      .product-list-container {
        width: 100%;
        height: 718px;
        padding: 16px 20px;
        background: #fff;
        border-radius: 0 0 24px 24px;
        border: 1px solid #c2cadb;
        border-top: none;

        .no-data-product {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 630px;
          margin-bottom: 16px;
          font-size: 14px;
          line-height: 14px;
          letter-spacing: -0.56px;
        }

        .category-search-list {
          width: 100%;
          height: 100%;
        }

        /* table */
        .product-list-scroll-container {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          width: 100%;
          height: 100%;

          .product-list-table {
            flex-grow: 1;
          }
        }
      }
    }
  }
}

.category-move {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  color: #0068ff !important;
  border: 1px dashed #0068ff;
  /* padding: 20px; */
  padding-left: 64px !important;
  margin: 10px 0;

  button {
    color: inherit !important;
  }
}

.category-move::after {
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: -13px;
  left: 0;
  content: '';
  background-image: url('../image/accordion/move-new.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  /* background: url('../image/accordion/move.png') no-repeat center center; */
}

.category-move-done-text {
  z-index: 19;

  position: absolute;

  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 448px;
  height: 48px;
  border-radius: 8px;
  color: #0068ff !important;
  background-color: rgba(0, 104, 255, 0.1);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.56px;
}

.category-dont-move {
  position: absolute;
  top: 61px;

  width: 448px;
  height: 48px;
  color: #0068ff !important;
  background-color: #ffeeee;
  border: 1px dashed #ff4c4c;
  /* padding: 20px; */
  padding-left: 64px !important;
  margin: 10px 0;
  z-index: 10;

  button {
    color: inherit !important;
  }
}

.category-dont-move:hover {
  background-color: #ffeeee !important;
}

/* 카테고리 생성 팝업 */
.depth-container {
  width: 632px;
  height: 48px;
  padding: 17px 20px;
  background-color: #f0f4fd;
}

.category-container {
  padding: 16px 20px;
  border: 1px solid #c2cadb;
  border-radius: 8px;
  height: 145px;

  .asterisk-1 {
    margin-left: 4.86px;
    color: #ff4c4c;
  }

  .registration-btn {
    display: block;
    width: 79px !important;
    height: 40px;
  }
}

.product-depth-container {
  display: grid;
  grid-template-columns: repeat(4, max-content); /* 한 줄에 최대 4개 */
  row-gap: 8px;
  justify-content: start;

  width: 100%;
  /* min-height: 48px; */
  margin-bottom: 16px;
  padding: 17px 20px;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.56px;
  color: #717b8a;
  background-color: #f0f4fd;

  & > * {
    display: flex;
    align-items: center;
  }

  .product-depth-active {
    color: #282e3e;
  }
}