/* 050103.css — 인증
   수치는 design/050103_인증.png(1920×2505) 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다.
   카드 구조는 050104(지적재산권)와 같고 카드 높이(462)와 본문 3줄만 다르다. */

/* 히어로 끝 503 → 첫 카드 584 (상 81) / 버튼 끝 2146 → 푸터 2306 (하 160) */
.cert-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

/* 콘텐츠 1152 = 카드 368 × 3 + gap 24 × 2. 행 간격 48 (행 피치 510)
   고정 px 대신 1fr 로 두어야 1232 미만에서 가로 스크롤이 생기지 않는다 */
.cert-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 48px;
}

/* SVG stroke rect 367×461 rx11.5 → 바깥 368×462, radius 12 */
.cert-card {
  height: 462px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg);
}

/* 이미지 영역 : 카드 top 부터 320 (테두리 1 제외 319), 배경 #FAFBFC.
   가운데 정렬을 flex 로 하면 67.5 / 19.5px 가 나와 Chrome 이 픽셀 스냅하면서
   이미지가 1px 밀린다. 시안 좌표(x452 y604)에 맞춰 정수 padding 으로 고정한다. */
.cert-card__thumb {
  height: 319px;
  padding: 19px 68px 20px 67px;
  background: var(--color-bg-alt);
}

.cert-card__img {
  width: 231px;
  height: 280px;
}

/* 본문 : 텍스트 영역 top 904, 기관명 잉크 933 */
.cert-card__body {
  padding: 29px 19px 0;
}

.cert-card__org {
  font-size: 16px;
  letter-spacing: -0.4px; /* "지식재산처" 잉크폭 66 / "중소벤처기업" 80 */
  line-height: 1;
  color: var(--color-primary);
}

.cert-card__title {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.cert-card__date {
  margin-top: 22px;
  font-size: 16px;
  letter-spacing: -0.45px; /* "2025-08-29" 잉크폭 86 */
  line-height: 1;
  color: var(--color-text-sub);
}

/* 더보기 전까지 감춰둘 카드 (js/page/050103.js) */
.cert-card--hidden {
  display: none;
}

/* ── 더보기 : 마지막 행 2066 → 버튼 2106 ── */
.cert-more {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.cert-more[hidden] {
  display: none;
}

/* SVG stroke rect 117×39 rx5.5 → 바깥 118×40, radius 6 */
.cert-more__btn {
  width: 118px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  font-size: 14px;
  line-height: 1;
  color: var(--color-text);
}

/* ── 반응형 : 모바일 시안이 없으므로 CLAUDE.md §4 규칙을 따른다 ──
   컨테이너(1232) 아래로는 카드가 368 보다 좁아져 썸네일 padding(67/68) + 이미지(231)가
   카드를 넘치므로, 이 지점에서 정수 고정을 풀고 가운데 정렬로 되돌린다. */
@media (max-width: 1231px) {
  .cert-card__thumb {
    padding: 19px 0 20px;
  }

  .cert-card__img {
    margin: 0 auto;
  }
}

@media (max-width: 1023px) {
  .cert-section__inner {
    padding: 64px var(--gutter-mo) 96px;
  }

  .cert-list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  /* 기관명이 길면 두 줄이 되므로 카드 높이를 풀어준다 */
  .cert-card {
    height: auto;
  }

  .cert-card__body {
    padding-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .cert-section__inner {
    padding: 48px var(--gutter-mo) 64px;
  }

  .cert-list {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .cert-card__body {
    padding: 24px 20px;
  }

  .cert-card__title {
    font-size: 18px;
    line-height: 26px;
  }
}