@charset "utf-8";

/** 공통 **/
#kboard-layout.kboard-media .kboard-grid__wrap {
  --grid-columns: 3;
  --grid-gap: 16px;
  --grid-gap-column-total: calc(var(--grid-gap) * calc(var(--grid-columns) - 1));
  --grid-item-width: calc(100% - var(--grid-gap-column-total));
}
#kboard-layout.kboard-media .kboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), calc(var(--grid-item-width) / var(--grid-columns)));
  gap: calc(var(--grid-gap) * 2) var(--grid-gap);
  border-top: none;
}
#kboard-layout.kboard-media .kboard-grid__item {
  border-bottom: 0;
}
#kboard-layout.kboard-media .kboard-grid__link {
  display: block;
  padding: 0;
}
#kboard-layout.kboard-media .kboard-grid__link:after {
  display: none;
}
#kboard-layout.kboard-media .kboard-grid__content {
  width: auto;
  padding: 0;
}
#kboard-layout.kboard-media .kboard-grid__content .kboard-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
/* 문서 */
#kboard-layout.kboard-media .kboard-grid__meta {
  margin-top: 20px;
}

/* 최신글 */
#kboard-layout.kboard-media.kboard-latest {
  --swiper-pagination-progressbar-size: 3px;
  --swiper-pagination-color: #3e3e3e;
  overflow: visible;

  .swiper-wrapper {
    padding: 0 !important;
    touch-action: pan-y;
  }
  .kboard-grid__meta {
    margin-top: 0;
    opacity: 0.5;
  }
  .kboard-grid__thumbnail {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }
  .kboard-latest__action {
    display: flex;
    align-items: center;
    padding: 50px 0;
    gap: 12px;
  }
  .swiper-pagination-progressbar {
    position: relative;
  }
  .kboard-latest__button--prev,
  .kboard-latest__button--next {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background-color: #fff;
    padding: 0;
    border: 1px solid #333;
    border-radius: 50%;
    overflow: hidden;
    transition-property: background, border;
    transition-duration: 300ms;
    cursor: pointer;
  }
  .kboard-latest__button--prev[disabled],
  .kboard-latest__button--next[disabled] {
    opacity: 0.5;
    cursor: default;
  }
  .kboard-latest__button--prev:before,
  .kboard-latest__button--next:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: no-repeat center / 16px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 12'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='6' x2='15' y2='6'/%3E%3Cpolyline points='6 11 1 6 6 1'/%3E%3C/g%3E%3C/svg%3E");
  }
  .kboard-latest__button--prev:hover,
  .kboard-latest__button--next:hover {
    border-color: var(--color-primary, #1ab1ff);
    background-color: var(--color-primary, #1ab1ff);
  }
  .kboard-latest__button--prev:hover::before,
  .kboard-latest__button--next:hover::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 12'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='6' x2='15' y2='6'/%3E%3Cpolyline points='6 11 1 6 6 1'/%3E%3C/g%3E%3C/svg%3E");
  }
  .kboard-latest__button--next::before {
    transform: scaleX(-1);
  }
  .kboard-latest__button--prev {
    margin-left: 8px;
  }
}
@media (max-width: 980px) {
  #kboard-layout.kboard-media .kboard-grid__wrap {
    --grid-columns: 2;
    --grid-gap-column-total: calc(var(--grid-gap) * calc(var(--grid-columns) - 1));
    --grid-item-width: calc(100% - var(--grid-gap-column-total));
  }
  #kboard-layout.kboard-media.kboard-latest {
    .kboard-latest__action {
      padding: 30px 0;
    }
    .kboard-latest__button--prev,
    .kboard-latest__button--next {
      width: 44px;
      height: 44px;
    }
  }
}
@media (max-width: 620px) {
  #kboard-layout.kboard-media .kboard-grid__wrap {
    --grid-columns: 1;
    --grid-gap-column-total: calc(var(--grid-gap) * calc(var(--grid-columns) - 1));
    --grid-item-width: calc(100% - var(--grid-gap-column-total));
  }
}