/* ============================================================
   nstri-common.css — 10_nstri 특화연구소 부서 공통 스타일
   Tokens: common.css + components.css 디자인 토큰만 사용 (hex 0건)
   ============================================================ */

/* ===========================================
   1. 행사 갤러리 카드 정렬
   - card-list: 카드 사이 세로 간격 확보 (공용에 .card-list 컨테이너 정의 없음)
   - card--horizontal: 본문 길이와 무관하게 카드 높이 균일 + meta 하단 고정
   - card__title은 위에서 시작, card__meta는 아래 고정
   =========================================== */

/* 카드 리스트: 자식 카드 사이 간격 */
.card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5); /* var(--space-5) */
}

/* 가로형 카드: 본문 길이가 달라도 카드 외형 높이 균일 (이미지 비율 안정화)
   + 이미지와 본문 사이 간격 확보 (공용에 gap 정의 없음) */
.card-list .card--horizontal {
    min-height: 180px;
    gap: var(--gap-card-icon-text); /* var(--space-4) */
}

.card-list .card--horizontal .card__body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.card-list .card--horizontal .card__meta {
    margin-top: auto;
}

/* card__text가 1~3줄 모두 들어갈 수 있도록 + 너무 길면 3줄로 클램프 (시각 일관) */
.card-list .card--horizontal .card__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 모바일: 가로형이 세로로 전환되므로 min-height 해제 */
@media (max-width: 767px) {
    .card-list .card--horizontal {
        min-height: 0;
    }
}


/* ===========================================
   1-2. 게시판 검색 폼 모바일 빈공간 제거
   - 공용에서 .board-search__row .form-group:first-child가
     flex: 0 1 180px (basis 180px)로 정의되어 있어,
     모바일 column 전환 시 basis가 높이로 작용 → 큰 빈공간 발생
   - 모바일에서 flex-basis를 풀어 자연 높이로 복귀
   =========================================== */
@media (max-width: 767px) {
    .board-search__row .form-group,
    .board-search__row .form-group:first-child:not(:only-child) {
        flex: 0 0 auto;
        min-width: 0;
    }
}

/* P9-4: .board-search__row .board-search__select-group / __input-group 폭 강제 룰 제거.
   sub-page.css의 .board-list__filter 컨텍스트 룰과 components.css의 .form-group 룰이
   더 specific하게 적용되어 본 룰이 어느 사이트에서도 발현되지 않는 dead 상태였음. */


/* ===========================================
   2. 부서 소개 페이지 (020~024)
   - 페이지 부제 (h1 아래 슬로건 한 줄)
   - 주요 업무 블록 리스트 (구분선으로 분할)
   페이지 전용. 공용 컴포넌트는 그대로 사용.
   =========================================== */

/* 부서 슬로건 — content-body 첫 머리 (역할 섹션 위)
   다른 사이트의 page-header와 일관성 유지를 위해
   헤더가 아닌 본문 첫 줄로 배치한다. */
.nstri-tagline {
    margin: 0 0 var(--gap-layout-h3-top);
    padding-left: var(--space-5);
    border-left: 4px solid var(--color-primary-500);
    font-size: var(--fs-title-md);
    font-weight: var(--fw-bold);
    color: var(--color-primary-900);
    line-height: 1.4;
    letter-spacing: var(--ls-tight);
}

@media (max-width: 767px) {
    .nstri-tagline {
        margin-bottom: var(--gap-form-divider);
        padding-left: var(--space-4);
        font-size: var(--fs-block);
    }
}

/* 주요 업무 블록 리스트 컨테이너 */
.nstri-duty-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nstri-duty {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
}

.nstri-duty:first-child {
    padding-top: 0;
    border-top: 0;
}

.nstri-duty:last-child {
    padding-bottom: 0;
}

/* 기능명 (h3) */
.nstri-duty__name {
    margin: 0 0 var(--gap-layout-h3-body);
    font-size: var(--fs-title-md);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
}

/* 세부 항목 불릿 리스트 */
.nstri-duty__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nstri-duty__items > li {
    position: relative;
    margin-top: var(--gap-card-title-desc);
    padding-left: var(--space-5);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-gray-700);
}

.nstri-duty__items > li:first-child {
    margin-top: 0;
}

.nstri-duty__items > li::before {
    content: '';
    position: absolute;
    top: 0.7em;
    left: var(--space-2);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-primary-500);
}

/* 반응형 */
@media (max-width: 767px) {
    .nstri-duty {
        padding: var(--space-6) 0;
    }
    .nstri-duty__name {
        font-size: var(--fs-block);
    }
    .nstri-duty__items > li {
        font-size: var(--fs-small);
    }
}


/* ===========================================
   3. 조직도 추가 modifier (011_organization)
   - 발주처 시안 정합('26.05.14.): 상위 외부 기관(보건복지부+KHIDI) +
     본체 옆 자문위원회 가로 연결 + 6개 부서 평탄화
   - 기존 공용 organization.css의 .org-chart / .org-node 위에 페이지 전용 변형만 추가
   =========================================== */

/* 점선 박스(보건복지부+KHIDI, 자문위원회 등 외부·자문 그룹) */
.org-node--dashed {
    border-style: dashed;
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

/* 상위 외부 기관(보건복지부+KHIDI) 박스 — root 위 단독 위치
   width를 콘텐츠 폭에 맞추어 시안과 같은 컴팩트한 정사각형에 가깝게 표시.
   background-color는 지정하지 않아 .org-node--dashed:hover(primary-25)가 정상 적용됨. */
.org-node--external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    border: 2px dashed var(--color-gray-500);
    border-radius: var(--radius-md);
    width: auto;
    min-width: 0;
    text-align: center;
    color: var(--color-gray-900);
}

/* 외부기관 박스를 부모 안에서 가운데 정렬 — block container 안에 inline-flex 단일 박스 */
.org-chart__inner > .org-node--external {
    align-self: center;
}

/* hover 시 다른 점선/라벨 박스와 동일한 톤(primary-25)으로 변화 → 시각 일관 */
.org-node--external:hover {
    background-color: var(--color-primary-25);
}

.org-node--external small {
    display: inline-block;
    margin-top: var(--gap-form-input-help);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
}

/* 보건복지부 + KHIDI 로고 2장 상하 배치 */
.org-node__logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-layout-h3-body);
}

.org-node__logo {
    display: block;
    height: auto;
    object-fit: contain;
}

/* 보건복지부 로고 (가로형 좌우) */
.org-node__logo--mohw {
    width: 160px;
    max-width: 100%;
}

/* KHIDI 로고 (세로형 상하) */
.org-node__logo--khidi {
    width: 130px;
    max-width: 100%;
}

/* 점선 세로 연결선 — 공용 .org-chart__connector를 점선으로 변형 */
.org-chart__connector--dashed {
    border-left-style: dashed;
}

/* 사업관리 자문위원회 — 외부기관↔본체 세로 점선의 중간에서 오른쪽으로 가로 분기.
   committee-branch 컨테이너 안에서 절대 위치로 띄움 (시안 정합). */
.org-node--committee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-5);
    width: auto;
    min-width: 0;
    border: 1px solid var(--color-primary-100, var(--color-gray-300));
    border-radius: var(--radius-md);
    background-color: var(--color-primary-25);
    color: var(--color-primary-700);
    font-weight: var(--fw-medium, 500);
    white-space: normal;
    word-break: break-word;
}

.org-node--committee:hover {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-200, var(--color-gray-400));
}

/* committee-branch: 외부기관과 본체 사이를 통과하는 세로 점선 + 중간에서
   오른쪽으로 분기되는 가로 점선 + 자문위원회 박스를 단일 컨테이너로 처리.
   - ::before: 컨테이너 전체 높이를 가로지르는 세로 점선
   - ::after:  중심에서 오른쪽으로 뻗는 가로 점선
   - .org-node--committee: 가로 점선 오른쪽 끝에 배치 (absolute) */
.org-chart__committee-branch {
    position: relative;
    width: 100%;
    height: 80px;
}

.org-chart__committee-branch::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 1.5px dashed var(--color-gray-400);
}

.org-chart__committee-branch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 0;
    border-top: 1.5px dashed var(--color-gray-400);
}

.org-chart__committee-branch .org-node--committee {
    position: absolute;
    top: 50%;
    left: calc(50% + 72px);
    transform: translateY(-50%);
    margin: 0;
}

/* 011_organization 페이지 한정 — 공용 organization.css의
   min-width: 1052px + overflow-x: auto 제약을 풀어 LNB가 있는 좁은
   콘텐츠 영역에서도 가로 스크롤이 생기지 않게 한다. */
.org-chart--nstri-2026 {
    overflow-x: visible;
}
.org-chart--nstri-2026 .org-chart__inner {
    min-width: 0;
}

/* 6col 부서 리스트 — 공용 5col 변형을 6col로 확장 */
.org-chart__list--6col {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 6col ::before 가로선 — 첫·마지막 박스 중심에 정확히 닿도록 조정.
   grid gap(5개) 폭을 빼고 6개 셀로 나눈 뒤 그 절반(= 한 셀 중심까지의 거리)을 양 끝에 부여.
   gap 미반영 시 1/12 단순 계산은 셀 중심보다 안쪽으로 어긋남(1035px 폭에서 약 6.6px). */
.org-chart__list--6col::before {
    left: calc((100% - 5 * var(--space-4)) / 12);
    right: calc((100% - 5 * var(--space-4)) / 12);
}

/* 6col 박스 높이 통일 — 텍스트가 1줄(전략기획실)이든 2줄(첨단바이오\n센터)이든
   동일 높이로 보이도록 grid 자식이 셀 전체를 채우게 + 박스 자체에 min-height */
.org-chart__list--6col > .org-chart__item {
    display: flex;
}
.org-chart__list--6col > .org-chart__item > .org-node--lv2 {
    width: 100%;
    min-height: 78px;
}
/* 영문 등 긴 텍스트가 루트 노드·6col 셀을 밀어내지 않도록 줄바꿈 허용 */
.org-chart--nstri-2026 .org-node--root .org-node__role {
    white-space: normal;
    word-break: break-word;
}
.org-chart__list--6col > .org-chart__item > .org-node--lv2 .org-node__role {
    white-space: normal;
    word-break: break-word;
}

/* 반응형: 좁은 화면에서 3 → 2col로 단계적 축소 */
@media (max-width: 1024px) {
    .org-chart__list--6col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .org-chart__list--6col {
        grid-template-columns: repeat(2, 1fr);
    }
    .org-chart__root-row {
        flex-direction: column;
        gap: var(--space-3);
    }
    .org-chart__h-connector {
        flex: 0 0 var(--space-6, 24px);
        width: 0;
        height: auto;
        align-self: center;
        border-top: 0;
        border-left: 1.5px dashed var(--color-gray-400);
    }
    .org-node--external {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }
}


/* ===========================================
   4. 다중 행 표 modifier (.table--multiline) — opt-in
   - 공용 .table tbody td 전역 규칙은 table-layout:fixed +
     white-space:nowrap + text-overflow:ellipsis 라, 칸을 넘는
     긴 본문이 "…"로 잘린다(목록형 표 기준 설계).
   - 센터별 담당업무 표(011_organization)처럼 셀에 장문이 들어가는
     표는 이 클래스를 부여해 잘림 없이 줄바꿈되도록 한다.
   - .table.table--multiline 으로 specificity를 전역(.table tbody td)
     보다 높여 확실히 우선 적용. 이 클래스가 없는 표에는 무영향.
   =========================================== */
.table.table--multiline tbody td,
.table.table--multiline tbody th {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    overflow-wrap: break-word;
    vertical-align: top;
    line-height: var(--lh-body);
}