/* ==========================================================
   022_research_promotion.css
   원내연구진흥사업 페이지 전용 — KV 표(좌측 라벨) 보강 스타일
   - 라벨-값 표(세부과제 없는 사업 6개)의 좌측 헤더 셀을 thead와 같은
     톤으로 강조하기 위한 페이지 한정 보강
   - 색상은 모두 common.css의 기존 디자인 토큰만 사용 (신규 색 도입 0)
   ========================================================== */

/* 표 상단 구분선 — board-table은 본래 border:none이라 표 최상단 라인이 없음.
   022 페이지에서는 표 영역을 명확히 구획하기 위해 4컬럼·KV 표 모두 상단에 구분선 추가.
   border-collapse:collapse + 동일 색상이라 KV 첫 행 상단 라인과 충돌 없이 1줄로 합쳐짐 */
.board-table {
    border-top: 1px solid var(--color-gray-300);
}

/* KV 표 컬럼 너비 — colgroup col 요소에 적용.
   table-layout:fixed에서 col 너비는 cell 너비보다 우선순위 높음 (CSS 스펙 보장) */
.board-table__col-label {
    width: 20%;
}

/* 라벨 셀 (좌측 헤더) — board-table thead와 같은 회색 톤 */
.board-table tbody th[scope="row"] {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
    font-weight: var(--fw-semibold);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-300);
    vertical-align: middle;
}

/* 022 페이지 모든 board-table 본문 셀 좌정렬 — 긴 지원자격 텍스트 가독성 */
.board-table tbody td {
    text-align: left;
}

/* 4컬럼 표 헤더 셀도 좌정렬 — 본문 좌정렬과 시각 정렬 일관성 (헤더-본문 컬럼 시작점 일치) */
.board-table thead th {
    text-align: left;
}

/* 인덱스 카드 그리드와 첫 사업 섹션 사이 간격 — 표준 compact 토큰(80px) */
.card-grid + .content-block {
    margin-top: var(--gap-layout-section-compact);
}

/* 카드/직종 모달에서 사업 섹션으로 점프 시(scrollIntoView block:start) sticky 헤더(.header 80px)에
   섹션 제목(content-block__title)이 가리지 않도록 스크롤 정지 위치를 헤더 높이 + 여백만큼 아래로 보정 */
.content-block[id^="promo-"] {
    scroll-margin-top: calc(80px + var(--space-6));
}

/* ==========================================================
   직종별 지원 가능 과제 모달 — 페이지 전용 최소 보강
   - 트리거: 공용 .icon-link-card
   - 칩:    공용 .initials-filter
   - 결과:  공용 .accordion accordion--separated
   - 페이지 한정 보강은 (1) 모달 바디 내부 간격 (2) 결과 헤더 텍스트
     (3) 빈 상태 placeholder (4) 가능 세부과제 리스트 정렬 뿐
   ========================================================== */

/* 트리거를 button으로 사용 — icon-link-card 기본은 inline-block이므로 풀너비로 확장
   + button 기본 text-align:center 오버라이드 → 좌정렬 */
.promo-filter-trigger {
    width: 100%;
    text-align: left;
}

/* 트리거(icon-link-card) ↔ 인덱스 그리드 사이 간격 */
.promo-filter-trigger + .card-grid {
    margin-top: var(--gap-layout-h2-body);
}

/* 모달 바디 블록 사이 기본 간격 */
.promo-filter-modal .modal__body > * + *,
.promo-filter-modal__result > * + * {
    margin-top: var(--space-4);
}

/* 라벨 h2 → 서브텍스트: 짝지어진 요소라 좁게 */
.promo-filter-modal__label + .promo-filter-modal__body-subtitle {
    margin-top: var(--space-2);
}

/* 모달 바디 안내 부제 */
.promo-filter-modal__body-subtitle {
    font-size: var(--fs-body);
    color: var(--color-gray-700);
    margin: 0;
}

/* 본인 직종 선택 라벨 — h2 의미 요소 */
.promo-filter-modal__label {
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    margin: 0;
}

/* initials-filter 모달 안 사용 시 — 바닥 마진 제거(모달 바디 자체 간격 사용) */
.promo-filter-modal .initials-filter {
    margin-bottom: 0;
}

/* 결과 헤더 (직종명 + 건수) — h2 의미, 블랙 단일 */
.promo-filter-modal__result-head {
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    margin: 0;
}

/* 빈 상태 placeholder */
.promo-filter-modal__empty {
    padding: var(--space-6);
    font-size: var(--fs-small);
    color: var(--color-gray-500);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
    text-align: center;
    margin: 0;
}

/* 결과 사업 카드 리스트 — 항상 펼친 상태, 헤더 클릭 시 페이지 점프
   (공용 accordion 부적합: accordion 트리거는 펼침/접힘 본질, 우리는 페이지 점프 본질)
   수치는 .accordion--separated / .accordion__trigger 기준에 맞춤 */
.promo-result-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.promo-result-item {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.promo-result-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-card-icon-text);
    padding: var(--space-5) var(--space-6);
    text-decoration: none;
    color: var(--color-gray-900);
    transition: var(--transition-fast);
}

.promo-result-item__link:hover {
    background-color: var(--color-primary-50);
}

.promo-result-item__link:focus-visible {
    outline: 3px solid var(--color-primary-500);
    outline-offset: -2px;
}

.promo-result-item__title {
    flex: 1;
    font-size: var(--fs-block);
    font-weight: var(--fw-semibold);
    color: var(--color-gray-900);
}

.promo-result-item__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.promo-result-item__arrow svg {
    width: 18px;
    height: 18px;
}

.promo-result-item__link:hover .promo-result-item__arrow {
    color: var(--color-primary-700);
}

/* 가능 세부과제 콘텐츠 영역 (항상 펼친 상태) — accordion__content padding(24px) 기준 */
.promo-result-item__body {
    padding: var(--space-6);
    border-top: 1px solid var(--color-gray-100);
}

/* 뱃지 행 — 좌측 가로 한 줄 (flex-wrap 허용) */
.promo-filter-modal__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
}

.promo-filter-modal__sub-item {
    /* li = 뱃지 하나만 포함 */
    list-style: none;
}

/* 이름+가능 뱃지 — 긴 텍스트 줄바꿈 허용 */
.promo-result-item__title .badge,
.promo-filter-modal__sub-item .badge {
    white-space: normal;
    text-align: center;
}

/* 제목 옆 카테고리 괄호 텍스트 */
.promo-result-item__category {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--color-gray-500);
}

/* 주석 목록 — 뱃지 행 아래 별도 블록 */
.promo-filter-modal__note-list {
    list-style: none;
    padding: 0;
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.promo-filter-modal__sub-note {
    font-size: var(--fs-small);
    color: var(--color-gray-500);
}

/* 세부과제 없는 사업 — 사업 단위 주석 */
.promo-filter-modal__promo-note {
    font-size: var(--fs-small);
    color: var(--color-gray-500);
    margin: 0;
}

@media (max-width: 767px) {
  /* 결과 리스트 아이템: 모바일에서 내부 패딩 축소 */
  .promo-result-item__link {
    padding: var(--space-4);
  }
  .promo-result-item__body {
    padding: var(--space-4);
  }
}