/* 0401.css — 뉴스룸 / 보도자료
   수치는 design/0401_보도자료.png(1920×2190) 픽셀 실측 기준.
   히어로·헤더·푸터, 검색창(.search-box)은 common.css 를 그대로 쓴다.
   이 표는 머리글 행과 페이지네이션이 없다. */

/* 히어로 끝 503 → 검색창 584 (상 81) / 표 끝 1831 → 푸터 1991 (하 160) */
.press-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

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

/* 표 676~1831 = 행 77 × 15. 검색창 끝 636 → 표 상단 676 (40).
   상단선(#57606A)은 시안에서 첫 행 위에 겹쳐 그려지므로
   border-top 대신 레이아웃에 영향 없는 inset 그림자로 그린다. */
.press-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 이 유지된다 */
.press-table__col--no { width: 55px; }
.press-table__col--src { width: 128px; }
.press-table__col--title { width: auto; }
.press-table__col--date { width: 97px; }

/* 16px. 시안 잉크폭은 2~4px 좁지만(날짜 82 vs 86) 잉크 높이는 16px 에서 일치한다.
   자간 -0.4 나 15.5px 로 폭을 맞추면 총폭만 맞고 글리프 위치가 어긋나 전체 불일치가
   오히려 올라간다(1.83% → 1.95% / 1.92%). 렌더러 차이로 보고 여기서 멈춘다. */
.press-table td {
  height: 77px;
  border-bottom: 1px solid var(--color-card-line);
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-sub);
  text-align: left;
}

/* 열별 규칙은 위치 선택자로 준다.
   .press-table td (0,1,1) 가 클래스 단독 선택자(0,1,0)를 이기기 때문. */
.press-table td:first-child {
  color: var(--color-muted);
}

.press-table td:nth-child(3) {
  font-size: 17.5px;
  font-weight: 500;
  /* 제목 자간은 기본값이 가장 잘 맞는다 (잉크폭 285 vs 시안 283) */
  color: var(--color-text);
}

/* 작성일만 가운데 정렬 (중심 1487.5) */
.press-table td:nth-child(4) {
  text-align: center;
}

/* New 배지 : rect 40×22 rx11, 제목 잉크 끝 1020 → 배지 1030 */
.press-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);
}

.pagination {
  margin-top: 48px;
}

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

  /* PC 에서는 제목과 작성일 사이가 400px 넘게 벌어지지만
     폭이 줄면 붙으므로 여백을 준다 */
  .press-table td:nth-child(3) {
    padding-right: 16px;
  }
}

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

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

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

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

  .press-table td {
    height: auto;
    border-bottom: 0;
  }

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

  .press-table td:nth-child(2) {
    font-size: 14px;
    color: var(--color-primary);
  }

  .press-table td:nth-child(3) {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
  }

  .press-table td:nth-child(4) {
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
  }
}