/* Main CSS - 동적 경로는 functions.php에서 처리 */


.container[data-page="knowledge"] {
    margin: 0 !important;
  }
    .container[data-page="knowledge"] .button-category-list {
      width: 100%;
    }
  
    .list-type-icons {
      display: flex;
      flex-direction: row;
      column-gap: 0.38rem;
      margin-right: 1rem;
    }
      .list-type-icons span[data-type="button"] {
        width: 2.375rem;
        height: 2.375rem;
        cursor: pointer;
      }
      .list-type-icons .btn-thumb {
        /* 아이콘 경로는 functions.php의 virex_dynamic_css()에서 동적으로 설정 */
        background-size: contain;
      }
        .list-type-icons .btn-thumb:hover,
        .list-type-icons .btn-thumb.active {
          /* 아이콘 경로는 functions.php의 virex_dynamic_css()에서 동적으로 설정 */
          background-size: contain;
        }
      .list-type-icons .btn-list {
        /* 아이콘 경로는 functions.php의 virex_dynamic_css()에서 동적으로 설정 */
        background-size: contain;
      }
        .list-type-icons .btn-list:hover,
        .list-type-icons .btn-list.active {
          /* 아이콘 경로는 functions.php의 virex_dynamic_css()에서 동적으로 설정 */
          background-size: contain;
        }
  
    /** Search-area */
    .container[data-page="knowledge"] .search-area {
      margin-right: 0 !important;
    }
  
    /** Grid list and items: thumb-view */
    .container[data-page="knowledge"] .grid-container.thumb-view .grid-item {
      background-color: var(--gray000);
      border-bottom: 0;
    }
      .container[data-page="knowledge"] .grid-container.thumb-view .grid-item .grid-item-thumbnail {
        width: 100%;
        height: auto;
      }
      .container[data-page="knowledge"] .grid-container.thumb-view .grid-item .grid-item-content {
        padding: 2rem 2rem 2.5rem 2rem;
      }
      .container[data-page="knowledge"] .grid-container.thumb-view .grid-item .grid-item-content .grid-item-title {
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.04125rem;
      }
      .container[data-page="knowledge"] .grid-container.thumb-view .grid-item .grid-item-content .grid-item-description {
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: -0.03rem;
      }
      .container[data-page="knowledge"] .grid-container.thumb-view .grid-item .grid-item-content .grid-item-category {
        color: var(--secondary);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.03rem;
      }
  
    /** Grid list and items: list-view */
    .container[data-page="knowledge"] .grid-container.list-view {
      margin-top: 1.44rem !important;
      border-top: 1px solid var(--gray100);
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      gap: 0;
    }
      .container[data-page="knowledge"] .grid-container.list-view .grid-item {
        background-color: var(--white);
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--gray100);
        display: flex;
        flex-direction: row-reverse;
      }
        .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-thumbnail {
          width: 17.375rem; /* Fixed width for thumbnail */
          display: flex;
          justify-content: center;
          flex-direction: column;
        }
          .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-thumbnail img {
            width: 17.375rem;
            height: auto;
            object-fit: cover;
          }
        .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-content {
          flex: 1; /* Takes up remaining space */
          padding: 2rem 2rem 2.5rem 2rem;
        }
          .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-content .grid-item-title {
            font-size: 1.375rem;
            font-weight: 700;
            letter-spacing: -0.04125rem;
          }
          .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-content .grid-item-description {
            font-size: 1rem;
            font-weight: 400;
            letter-spacing: -0.03rem;
          }
          .container[data-page="knowledge"] .grid-container.list-view .grid-item .grid-item-content .grid-item-category {
            color: var(--secondary);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: -0.03rem;
          }