/*
 * 갤러리(카드형) 이용안내 (#992)
 *
 * 구매대행/배송대행/TT송금 가이드의 절차를 게시글 카드 그리드로 렌더한다.
 * 갤러리 게시판(.board-gallery-box, common.css)과 형태는 닮았지만
 *  - 3열(갤러리는 4열)
 *  - 제목 앞 순번 뱃지
 *  - 카드 안 본문 요약(RichTextView)
 * 이 달라 별도 블록으로 둔다. 레거시 CSS 뒤에 로드한다.
 */

.guide-card-box ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -40px;
}
.guide-card-box ul li {
  width: calc(33.3333% - 20px);
  margin: 0 10px 40px;
}
.guide-card-box ul li a {
  display: block;
}

.guide-card-box .card-image {
  position: relative;
  border-radius: 10px;
  background-color: var(--color-gray-200);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 대표이미지가 없어도 카드 높이가 유지되도록 비율을 CSS 로 만든다. */
.guide-card-box .card-image:after {
  display: block;
  content: "";
  padding-bottom: 60%;
}
.guide-card-box .card-image .card-image-info {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2.5px -5px;
}
.guide-card-box .card-image .card-image-info p {
  margin: 0 2.5px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.guide-card-box .card-content {
  margin: 14px 0 0;
}
.guide-card-box .card-content h4 {
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*
 * 카드 설명(t_post.description) — 평문. 관리자가 textarea 에 넣은 줄바꿈을 유지하고
 * 4줄 높이로 잘라낸다(전체는 상세에서 본다).
 */
.guide-card-box .card-content p.card-desc {
  margin: 8px 0 0;
  max-height: 6.4em;
  overflow: hidden;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-600);
}

/*
 * 설명 미입력 시 폴백인 본문 요약. RichTextView(.w-e-text-container > .w-e-text)를
 * 그대로 쓰되 에디터 뷰의 흰 배경/여백을 지우고 같은 높이로 잘라낸다.
 */
.guide-card-box .card-content .card-desc.w-e-text-container {
  background: transparent;
  margin: 8px 0 0;
}
.guide-card-box .card-content .card-desc .w-e-text {
  padding: 0;
  max-height: 6.4em;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-gray-600);
}