/* ===================================
   Board Custom - 게시판 커스텀 스타일
   components.css 공통 스타일을 건드리지 않고
   게시판 페이지 전용 오버라이드를 정의
   =================================== */

/* 게시판 상단 검은 구분선 제거 + 간격 조정 */
.board-list,
.board-view {
  border-top: none;
}

.board-list__filter {
  padding-top: var(--space-2);
}

/* 파일 열(td-file) 첨부 다운로드 아이콘 크기 제약.
   components.css는 제목 열 아이콘만 크기 지정(.td-title a .icon-attach)하여,
   td-file 의 width/height 없는 SVG(viewBox 24x24)가 셀 폭만큼(약 300px) 커지는 버그.
   제목 열 아이콘과 동일하게 16px로 고정. */
.board-table tbody .td-file a .icon-attach {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 첨부(td-file) 열 폭 고정: components.css 에 .td-file width 규칙이 없어
   table-layout:fixed 하에서 무지정 .td-title 과 잔여 폭을 반씩 나눠 첨부 열이
   과도하게 넓어지던 문제 수정. 폭을 고정하면 무지정 .td-title 이 나머지 폭을 모두
   차지하므로 제목 열은 넓어지고 첨부 열은 좁아진다. (첨부 컬럼 있는 모든 게시판 공통) */
.board-table .td-file {
  width: 72px;
}


/* 검색 필터 태블릿 반응형 (≤1023px) — board-custom.css 로드 페이지 전체 커버 */
@media (max-width: 1023px) {
  .board-list__filter {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .board-list__filter .board-search__form {
    width: 100%;
    margin-left: 0;
  }

  .board-list__filter .board-search__row,
  .board-list__filter form.board-search__form > .board-search__row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .board-list__filter .board-search__row .board-search__select-group,
  .board-list__filter .board-search__row > .form-group.board-search__select-group,
  .board-list__filter .board-search__row .board-search__input-group,
  .board-list__filter .board-search__row > .form-group.board-search__input-group,
  .board-list__filter .board-search__row .board-search__btn,
  .board-list__filter .board-search__row > .btn {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* components.css의 first-child 규칙(특이성 0,5,0)이 위 규칙(최대 0,4,1)보다 강해
     column 모드에서 flex-basis: 180px가 height로 적용됨 → 동일 특이성 + later cascade로 override */
  .board-search__row .form-group:first-child:not(:only-child):not(.board-search__input-group) {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

/* 검색 폼 모바일 반응형 */
@media (max-width: 767px) {
  /* 검색 폼: 전체 너비로 확장 */
  .board-search__form {
    width: 100%;
    margin-left: 0;
  }

  .board-search__row {
    flex-direction: column;
    align-items: stretch;
  }

  /* sub-page.css의 .board-list__filter .board-search__row { align-items: center }
     특이성(0,2,0)에 동일 특이성 + later cascade로 override → stretch 확정 */
  .board-list__filter .board-search__row,
  .board-list__filter form.board-search__form > .board-search__row {
    flex-direction: column;
    align-items: stretch;
  }

  .board-search__select-group,
  .board-search__input-group,
  .board-search__btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* sub-page.css의 flex: 0 0 130px / width: 130px 이 column 모드에서
     height로 적용되는 문제 수정. > .form-group 선택자(0,3,1)까지 모두 override. */
  .board-list__filter .board-search__row .board-search__select-group,
  .board-list__filter .board-search__row > .form-group.board-search__select-group,
  .board-list__filter .board-search__row .board-search__input-group,
  .board-list__filter .board-search__row > .form-group.board-search__input-group {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* components.css의 .board-search__row .form-group:first-child:not(:only-child):not(.board-search__input-group)
     { flex: 0 1 180px } 이 column 모드에서 180px height로 적용되는 문제.
     same specificity(0,5,0) + later cascade로 override. */
  .board-search__row .form-group:first-child:not(:only-child):not(.board-search__input-group) {
    flex: 0 0 auto;
    min-width: 0;
  }

  .board-list__count {
    margin-right: 0;
  }

  /* 제목 말줄임: 모바일에서도 한 줄 ellipsis 유지 */
  .board-table tbody .td-title a {
    display: flex;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .board-table tbody .td-title .title-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* 과제공고 리스트 전용 컬럼 폭.
   마감기한이 "26.07.24 23:59"(측정값 118px, 패딩 포함) 한 줄로 들어가야 하므로 날짜 컬럼을 128px 로 넓히고,
   그만큼을 여유가 있던 No(68→56)·구분(150→96)에서 회수한다. 공고기관은 이미 폭이 부족해(전체 4,936건 중
   3,239건이 8자 초과) 더 줄이지 않고 150px 유지. board-table--project 스코프라 타 게시판 영향 없음. */
.board-table--project .td-num {
  width: 56px;
}

.board-table--project .td-project-cat {
  width: 96px;
}

.board-table--project .td-date {
  width: 128px;
}

/* 과제공고 리스트 전용: 공고기관 등 td-writer 장문 텍스트 말줄임 처리.
   components.css 의 .board-table .td-writer 는 white-space:nowrap 만 지정하고
   overflow 를 비워둬서, table-layout:fixed 하에 긴 기관명이 셀 밖으로 흘러
   공고명(td-title) 텍스트와 겹쳐 그려진다. 같은 파일의 .td-category 와 동일하게
   hidden + ellipsis 로 잘라낸다. board-table--project 스코프라 타 게시판 영향 없음. */
.board-table--project .td-writer {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 목록 테이블 상단 좌측 안내 문구(데이터 출처·주의사항 등).
   .table-wrap 바로 앞에 배치하며 좌측 정렬 기본값을 유지한다. */
.board-list__note {
  margin: 0 0 var(--space-2);
  text-align: left;
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  line-height: 1.6;
}