/* 050201.css — 투자정보 / 전자공고
   수치는 design/050201_투자정보.png(1920×2322) 픽셀 실측 기준.
   히어로·헤더·푸터, 검색창(.search-box), 페이지네이션은 common.css 를 그대로 쓴다. */

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

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

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

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

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

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

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

.notice-table td:nth-child(2) {
  font-size: 17.5px;
  font-weight: 500;
  color: var(--color-text);
}

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

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

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

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

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

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

  .notice-table thead {
    display: none;
  }

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

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

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

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

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