/* ================================================================
   프로그램 페이지 하단 — 다녀온 사람들의 이야기 (후기 4건)

   모든 셀렉터에 .ccb-main 을 붙인다.
   youth-main.css 의 `.ccb-main p` `.ccb-main a` 가 (0,1,1) 이라
   클래스 하나짜리 규칙(0,1,0)은 그냥 밀린다.
   ================================================================ */

.ccb-main .ccb-rev {
  padding: 62px 48px 74px;
  background: var(--program-cream);
  border-top: 1px solid var(--line);
}

.ccb-main .ccb-rev__inner { max-width: 100%; }

.ccb-main .ccb-rev__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.ccb-main .ccb-rev__head h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 950;
  letter-spacing: -1.6px;
  word-break: keep-all;
}

.ccb-main .ccb-rev__more {
  flex: none;
  color: #0a418d;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.4px;
  border-bottom: 2px solid rgba(10, 65, 141, .28);
  padding-bottom: 2px;
  transition: border-color 140ms ease;
}

.ccb-main .ccb-rev__more:hover,
.ccb-main .ccb-rev__more:focus-visible { border-bottom-color: var(--yellow); }

.ccb-main .ccb-rev__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccb-main .ccb-rev__card { min-width: 0; }

/* 카드 전체가 링크다. a 안에 블록을 넣어야 하므로 자식은 전부 span 이다. */
.ccb-main .ccb-rev__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(122, 100, 66, .13);
  border-radius: 16px;
  background: #fffdf8;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ccb-main .ccb-rev__link:hover,
.ccb-main .ccb-rev__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(7, 52, 119, .12);
}

.ccb-main .ccb-rev__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4e9d6;
}

.ccb-main .ccb-rev__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 사진 없는 후기 — 자리를 비우지 않고 종이 질감 면으로 대체한다. */
.ccb-main .ccb-rev__media--none {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .55) 0 10px,
      rgba(246, 234, 212, .55) 10px 20px),
    #f6ead4;
}

.ccb-main .ccb-rev__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}

.ccb-main .ccb-rev__tag {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf0fa;
  color: #0a418d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccb-main .ccb-rev__stars {
  display: block;
  margin-top: 12px;
  line-height: 0;
}

.ccb-main .ccb-rev__stars img {
  width: 76px;
  height: auto;
}

.ccb-main .ccb-rev__subject {
  display: block;
  margin-top: 10px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -0.6px;
  word-break: keep-all;
}

.ccb-main .ccb-rev__excerpt {
  display: block;
  margin-top: 8px;
  color: #4b6284;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  word-break: keep-all;
}

/* 이름·날짜는 카드 높이가 달라도 항상 맨 아래에 붙는다. */
.ccb-main .ccb-rev__meta {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  color: #7b8aa0;
  font-size: 13px;
  font-weight: 700;
}

/* ================================================================
   반응형
   ================================================================ */

@media (max-width: 1040px) {
  .ccb-main .ccb-rev { padding: 48px 32px 58px; }

  .ccb-main .ccb-rev__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  /* 2단이 되면 카드 폭이 두 배라 4:3 사진이 480px 가까이 된다.
     사진만 커지고 글은 그대로라 균형이 무너진다. 납작하게 눕힌다. */
  .ccb-main .ccb-rev__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
  .ccb-main .ccb-rev { padding: 38px 22px 46px; }

  .ccb-main .ccb-rev__head { margin-bottom: 22px; }

  /* 한 칸에 두 장을 넣으면 사진도 글도 다 작아진다. 한 줄에 하나씩 쌓는다. */
  .ccb-main .ccb-rev__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* 사진을 왼쪽에 두지 않는다. 카드 위로 올려 폭을 다 쓰게 한다.
     왼쪽에 두면 글이 200px 짜리 좁은 기둥에 갇혀 여섯 줄로 늘어지고,
     카드마다 글 폭이 달라 목록이 들쭉날쭉해 보인다.
     상품상세 후기(youth-item2.css @560px)가 같은 이유로 같은 방식을 쓴다. */
  .ccb-main .ccb-rev__link { flex-direction: column; }

  /* 데스크톱은 4:3, 모바일은 16:10 으로 더 눕힌다.
     폭을 다 쓰므로 4:3 이면 사진만 너무 커진다. */
  .ccb-main .ccb-rev__media {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .ccb-main .ccb-rev__body { padding: 16px 16px 18px; }

  /* 제목이 3줄이 되면 카드마다 높이가 들쑥날쑥해진다. 2줄로 묶는다. */
  .ccb-main .ccb-rev__subject {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ccb-main .ccb-rev__excerpt {
    font-size: 13px;
    /* 좁은 칸에서 발췌가 길면 카드가 세로로 늘어난다. 두 줄로 끊는다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}