/* 050104.css — 지적재산권
   수치는 design/050104_지적재산권.png(1920×2499) 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* ── 카드 섹션 : 히어로 끝 503 → 첫 카드 584 (상 81) / 마지막 2140 → 푸터 2300 (하 160) ── */
.ip-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

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

/* SVG stroke rect 367×459 rx11.5 → 바깥 368×460, radius 12 */
.ip-card {
  height: 460px;
  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 으로 고정한다. */
.ip-card__thumb {
  height: 319px;
  padding: 19px 68px 20px 67px;
  background: var(--color-bg-alt);
}

/* 인증서 231×280 */
.ip-card__img {
  width: 231px;
  height: 280px;
}

.ip-card__body {
  padding: 29px 19px 0;
}

.ip-card__no {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.25px; /* 시안 "제 10-0982691 호" 잉크폭 121 */
  color: var(--color-primary);
}

/* 최대 2줄, 넘치면 말줄임 (시안 4번 카드가 말줄임 상태) */
.ip-card__title {
  margin-top: 11px;
  font-size: 20px; /* 1줄 카드 잉크폭 303/271·202/181 로 역산 */
  font-weight: 700;
  line-height: 31px; /* 시안 줄 잉크 top 간격 31 */
  letter-spacing: -0.5px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* ── 더보기 : 카드 마지막 행 2060 → 버튼 2100 ── */
.ip-more {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* 더 펼칠 게 없으면 js 가 hidden 을 건다 */
.ip-more[hidden] {
  display: none;
}

/* SVG stroke rect 117×39 rx5.5 → 바깥 118×40, radius 6 */
.ip-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);
}

/* ── 반응형 : 모바일 시안이 없으므로 PC 요소 px 은 유지하고 열 수만 줄인다 ──
   유동 폭 구간에서는 카드가 368 보다 좁아지므로 썸네일 좌우 padding 을 풀고
   이미지를 가운데 정렬로 되돌린다(PC 의 정수 좌표 고정은 1024 이상에서만 의미가 있다). */
/* 브레이크포인트 예외 추가 사유 : 컨테이너(1232) 아래로는 카드가 368 보다 좁아져
   썸네일 좌우 padding(67/68) + 이미지(231) 가 카드를 넘친다.
   시안 좌표 재현이 성립하는 하한이므로 이 지점에서 정수 고정을 풀고 가운데 정렬로 되돌린다. */
@media (max-width: 1231px) {
  .ip-card__thumb {
    padding: 19px 0 20px;
  }

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

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

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

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

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

  .ip-card__body {
    padding: 24px 20px 0;
  }

  .ip-card__title {
    font-size: 18px;
    line-height: 28px;
  }
}