/* apply.css — 입사지원
   수치는 design/입사지원.png(1920×2800) 픽셀 실측 기준.
   히어로·헤더·푸터는 common.css 를 그대로 쓴다. */

/* 히어로 끝 503 → 표 상단 584 (상 81).
   하단은 시안 실측(1815) 대신 다른 목록 페이지(press.css)와 같은 160 으로 맞춘다.
   행 수가 적을 때 표 아래가 텅 비어 보이는 문제. */
.recruit-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 81px var(--gutter-pc) 160px;
}

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

/* 열 폭 합계 1152. 제목만 auto 로 두면 폭이 줄어도 나머지 열의 px 이 유지되고
   PC(1152)에서는 1152 - 365 = 787 로 시안과 같아진다. */
.recruit-table__col--no { width: 47px; }
.recruit-table__col--title { width: auto; }
.recruit-table__col--type { width: 61px; }
.recruit-table__col--job { width: 98px; }
.recruit-table__col--date { width: 109px; }
.recruit-table__col--view { width: 50px; }

.recruit-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;
}

.recruit-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: center;
}

/* 열별 규칙은 위치 선택자로 준다.
   .recruit-table td (0,1,1) 가 클래스 단독 선택자(0,1,0)를 이기므로
   .recruit-table__title 같은 클래스로는 위 규칙을 덮지 못한다. */

/* No.·제목 열만 왼쪽 정렬 */
.recruit-table th:first-child,
.recruit-table th:nth-child(2),
.recruit-table td:first-child,
.recruit-table td:nth-child(2) {
  text-align: left;
}

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

.recruit-table td:nth-child(2) {
  font-size: 17.5px; /* 제목 잉크폭 204 (16px 는 186) */
  font-weight: 600;
  color: var(--color-text);
}

/* 목록이 비었을 때 : colspan=6 짜리 한 칸.
   이 td 는 first-child 라 위의 왼쪽 정렬·회색 규칙에 걸린다.
   tr.bbsno 로 특정도를 한 단계 올려 가운데로 되돌린다 */
.recruit-table tr.bbsno td {
  text-align: center;
  color: var(--color-text-sub);
}

/* 배지 : rect 37×22 rx4 */
.recruit-badge {
  min-width: 37px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.recruit-badge--career {
  background: var(--color-icon-bg);
  color: var(--color-primary);
}

.recruit-badge--new {
  background: #e6f5ee;
  color: #047d42;
}

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

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

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

  .recruit-table thead {
    display: none;
  }

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

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

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

  /* No.·조회는 머리글이 없으면 뜻이 통하지 않으므로 숨긴다 */
  .recruit-table td:first-child,
  .recruit-table td:nth-child(6) {
    display: none;
  }

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

  /* 빈 목록 문구도 first-child 라 위 display:none 에 걸린다. 되살린다 */
  .recruit-table tr.bbsno td {
    display: block;
    text-align: center;
  }

  /* 구분·직군·마감일은 제목 아래 한 줄로 */
  .recruit-table td:nth-child(3),
  .recruit-table td:nth-child(4),
  .recruit-table td:nth-child(5) {
    display: inline-block;
    margin: 10px 12px 0 0;
    font-size: 14px;
  }
}