/* 0302.css — 고객 / 성공 구축 사례 (게시판형)
   수치는 design/0302_성공구축사례.svg 를 브라우저 렌더한 1920×1937 기준 픽셀 실측.
   히어로·헤더·푸터, 검색창(.search-box), 페이지네이션(.pagination)은 common.css 를 그대로 쓴다.

   세로 좌표(아트보드)
     헤더            0 ~   64
     히어로         64 ~  503   (배지 184 / 일러스트 160~456)
     검색창        584 ~  635
     표            676 ~ 1493   (상단선 676 / 헤더 48 / 행 77 × 10)
     페이지네이션  1542 ~ 1578
     푸터          1738 ~                                              */

/* 히어로 끝 503 → 검색창 584 (상 81) / 페이지네이션 끝 1578 → 푸터 1738 (하 160) */
.case-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

.case-search {
  display: flex;
  justify-content: flex-end;
}

/* 표 caption 은 화면에서 감추고 스크린리더에만 남긴다 */
.case-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 표 676~1493 = 헤더 48 + 행 77 × 10. 검색창 끝 636 → 표 상단 676 (40).
   상단선(#57606A)은 시안에서 헤더 행 위에 겹쳐 그려지므로
   border-top 대신 레이아웃에 영향 없는 inset 그림자로 그린다. */
.case-table {
  width: 100%;
  margin-top: 40px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: inset 0 1px 0 var(--color-text-sub);
}

/* 열 폭 합계 1152. 제목만 auto 로 두면 폭이 줄어도 나머지 열의 px 이 유지된다.
   No. 열 끝 472 = 제목 잉크 시작 / 작성일 열은 우측 정렬 기준 중앙 1487.5 */
.case-table__col--no { width: 88px; }
.case-table__col--title { width: auto; }
.case-table__col--date { width: 97px; }

.case-table th {
  height: 48px;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-sub);
  text-align: center;
}

.case-table td {
  height: 77px;
  border-bottom: 1px solid var(--color-card-line);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.3px; /* No.·작성일 잉크폭 실측(24 / 78)에 맞춘 값 */
  color: var(--color-text-sub);
  text-align: center;
}

/* 열별 규칙은 위치 선택자로 준다.
   .case-table td (0,1,1) 가 클래스 단독 선택자(0,1,0)를 이기기 때문. */
.case-table th:first-child,
.case-table th:nth-child(2),
.case-table td:first-child,
.case-table td:nth-child(2) {
  text-align: left;
}

.case-table td:first-child {
  color: var(--color-muted);
}

.case-table td:nth-child(2) {
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.1px; /* 제목 잉크폭 실측(566 / 592 / 450)에 맞춘 값 */
  color: var(--color-text);
}

.case-table td:nth-child(2) a:hover {
  text-decoration: underline;
}

/* New 배지 : rect 40×22 rx11, 제목 잉크 끝 1038 → 배지 1048 */
.case-new {
  width: 40px;
  height: 22px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 11px;
  background: var(--color-icon-bg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-primary);
}

/* 표 끝 1494 → 페이지네이션 1542 (48) */
.pagination {
  margin-top: 48px;
}

/* ── 반응형 : 모바일 시안이 없으므로 CLAUDE.md §4 규칙을 따른다 ── */
@media (max-width: 1023px) {
  .case-section__inner {
    padding: 64px var(--gutter-mo) 96px;
  }

  /* 제목이 여러 줄로 흐르면 낱글자로 끊긴다. 어절 단위로만 넘긴다 */
  .case-table td:nth-child(2) {
    line-height: 26px;
    word-break: keep-all;
  }
}

/* 3열 표는 375 폭에 들어가지 않으므로 행을 블록으로 쌓는다 */
@media (max-width: 767px) {
  .case-section__inner {
    padding: 48px var(--gutter-mo) 64px;
  }

  /* 표 자체도 block 으로 바꿔야 colgroup 의 열 폭이 풀린다 */
  .case-table,
  .case-table tbody,
  .case-table tr,
  .case-table td {
    display: block;
  }

  .case-table {
    box-shadow: none;
    border-top: 1px solid var(--color-text-sub);
  }

  .case-table thead {
    display: none;
  }

  .case-table tr {
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--color-card-line);
  }

  .case-table td {
    height: auto;
    border-bottom: 0;
    text-align: left;
  }

  /* No. 는 머리글이 없으면 뜻이 통하지 않으므로 숨긴다 */
  .case-table td:first-child {
    display: none;
  }

  .case-table td:nth-child(2) {
    font-size: 16px;
    line-height: 24px;
  }

  .case-table td:nth-child(3) {
    margin-top: 10px;
    font-size: 14px;
  }
}