/* ============================================================
   biobank-common.css — 06_biobank 공통 스타일
   Scope: data-gnb-active in [dept-intro, human-resource, tumor-bank,
                              brain-bank, notice-board]
   Tokens: common.css + sub-page.css 디자인 토큰 100% (hex 0건)
   ============================================================ */

/* ===========================================
   1. Bio Chart 컨테이너 (Chart.js)
   =========================================== */

/* 차트 박스 바로 다음 소제목 — 가이드의 'h3 소제목 앞 40px' 토큰 적용.
   .bio-chart 가 자체 padding 없이 캡션에서 끝나 인접 h3 와 0px 로 붙던
   문제 해결 (예: 023 진단코드별 차트 ↔ '상세 분류표'). */
.bio-chart + .content-body__title,
.bio-chart + h3.content-body__title {
    margin-top: var(--gap-layout-h3-top);
}

/* 커스텀 범례 (timeslot-grid__legend 동일 스타일)
   charts-bio.js의 Chart.js 내장 범례 대신 사용.
   data-chart-hide-legend 속성 시 커스텀 HTML 범례 수동 추가.
   단위 텍스트(.bio-chart-legend__unit)를 notice-box 대신 함께 수용. */
.bio-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-button-group) var(--gap-layout-h3-body);
    margin-top: var(--gap-card-icon-text);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.bio-chart-legend__unit {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--color-gray-500);
    padding-right: var(--space-3);
    border-right: 1px solid var(--color-gray-300);
    margin-right: var(--gap-form-input-help);
    white-space: nowrap;
}

.bio-chart-legend__item {
    display: flex;
    align-items: center;
    gap: var(--gap-inline-icon);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-gray-700);
}

.bio-chart-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* 차트 9~16번째 계열색 — 공용 토큰(common.css)에 없는 색이라 바이오뱅크 전용으로 정의.
   chart-renderer.js tokens() 가 --color-chart-ext-9 ~ -16 을 읽어 palette() 뒤쪽 8색으로 쓴다.
   (공용 common.css 무수정 → 타 사이트 무영향) */
:root {
    --color-chart-ext-9:  #E8570F;
    --color-chart-ext-10: #00A86B;
    --color-chart-ext-11: #C2185B;
    --color-chart-ext-12: #7B5E00;
    --color-chart-ext-13: #5B6ABF;
    --color-chart-ext-14: #009BA8;
    --color-chart-ext-15: #A34A9E;
    --color-chart-ext-16: #6B7280;
}

/* chart-renderer.js palette() 순서와 1:1 대응 (1색 = 1항목)
   pal-2: point-900(#FF381D 강렬) → sky-500 (#09CAFF)
   pal-6: point-500 미정의 → primary-300 (#83A1CA)
   pal-7: primary-300 → primary-100 (#C4D1E5)
   pal-8~15: 자원종류 16종 대응(발주처 2026-07-20 "한 색깔에 한 개") */
.bio-chart-legend__dot--pal-0 { background-color: var(--color-primary-700); }
.bio-chart-legend__dot--pal-1 { background-color: var(--color-primary-500); }
.bio-chart-legend__dot--pal-2 { background-color: var(--color-sky-500); }
.bio-chart-legend__dot--pal-3 { background-color: var(--color-teal-500); }
.bio-chart-legend__dot--pal-4 { background-color: var(--color-purple-500); }
.bio-chart-legend__dot--pal-5 { background-color: var(--color-primary-900); }
.bio-chart-legend__dot--pal-6 { background-color: var(--color-primary-300); }
.bio-chart-legend__dot--pal-7 { background-color: var(--color-primary-100); }
.bio-chart-legend__dot--pal-8  { background-color: var(--color-chart-ext-9); }
.bio-chart-legend__dot--pal-9  { background-color: var(--color-chart-ext-10); }
.bio-chart-legend__dot--pal-10 { background-color: var(--color-chart-ext-11); }
.bio-chart-legend__dot--pal-11 { background-color: var(--color-chart-ext-12); }
.bio-chart-legend__dot--pal-12 { background-color: var(--color-chart-ext-13); }
.bio-chart-legend__dot--pal-13 { background-color: var(--color-chart-ext-14); }
.bio-chart-legend__dot--pal-14 { background-color: var(--color-chart-ext-15); }
.bio-chart-legend__dot--pal-15 { background-color: var(--color-chart-ext-16); }

.bio-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-layout-tab-content);
    margin-top: var(--gap-card-icon-text);
}

.bio-chart-grid--2col {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 1024px) {
    .bio-chart-grid--2col {
        grid-template-columns: 1fr;
    }
}

.bio-chart {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-4);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    min-height: 320px;
}

.bio-chart__title {
    margin: 0 0 var(--gap-card-icon-text);
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: 1.4;
}

.bio-chart__title-tag {
    display: inline-block;
    margin-right: var(--gap-inline-icon);
    padding: 2px 10px;
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-full);
    font-size: var(--fs-tag);
    font-weight: var(--fw-semibold);
    vertical-align: 3px;
}

.bio-chart__canvas-wrap {
    position: relative;
    width: 100%;
    height: 320px;
}

.bio-chart--tall .bio-chart__canvas-wrap {
    height: 600px;
}

.bio-chart--compact .bio-chart__canvas-wrap {
    height: 240px;
}

.bio-chart__caption {
    margin-top: var(--gap-layout-h3-body);
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    text-align: right;
}

/* 040 설립 목표 — 020 인체자원은행 운영 가치(mv-values__grid--3col) 패턴
   그대로 차용하되 카드가 4개라 1줄 4col 로 표시되도록 페이지 전용 override.
   카드 자체 시각(아이콘·제목·desc·primary-900 배경)은 공용 룰 유지하되
   4col 좁은 폭에 맞춰 padding·aspect-ratio 만 살짝 보정. */
.bio-mission .mv-values__grid--3col {
    grid-template-columns: repeat(4, 1fr);
}

.bio-mission .mv-values__grid--3col .mv-values__card {
    padding: var(--space-6) var(--space-4);
    aspect-ratio: auto;
    min-height: 280px;
}

@media (max-width: 1280px) {
    .bio-mission .mv-values__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .bio-mission .mv-values__grid--3col {
        grid-template-columns: 1fr;
    }
}

/* 표 하단 footnote (예: 024 자원 수집 오더 코드 표의
   "*검체상태에 따라 수집 vial 갯수 및 용량이 감소 될 수 있습니다.") */
.bio-table-note {
    margin-top: var(--gap-layout-h3-body);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
    line-height: var(--lh-small, 1.5);
}

/* board-table 의 .td-hit 셀 안 외부링크(target="_blank") — 028·047 의
   '이동 +ext icon' 패턴 한정. 기본 a 태그는 텍스트와 svg 사이 자연 공백·
   svg 큰 사이즈로 어색해 보임 → inline-flex + 작은 svg + primary 컬러로 정합. */
.board-table .td-hit a[target="_blank"] {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-form-input-help);
    color: var(--color-primary-700);
    text-decoration: none;
    font-size: var(--fs-small);
}

.board-table .td-hit a[target="_blank"]:hover,
.board-table .td-hit a[target="_blank"]:focus-visible {
    color: var(--color-primary-950);
    text-decoration: underline;
}

.board-table .td-hit a[target="_blank"] svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ===========================================
   2. KPI 그리드 (dear-stat-card 보강)
   =========================================== */
.bio-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-layout-h2-body);
    margin-top: var(--gap-card-icon-text);
}

@media (max-width: 1024px) {
    .bio-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bio-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.bio-kpi-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .bio-kpi-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   3. 절차 단계 카드 (mv-values__grid 보강)
   - 번호 뱃지 + 제목 + 설명 형태
   =========================================== */
.bio-step-list {
    counter-reset: bio-step;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-layout-h3-body);
    margin: var(--gap-card-icon-text) 0;
    padding: 0;
    list-style: none;
}

/* .content-body ul/ol { list-style·padding } 보강 — bio-step-list가
   ul·ol 어느 태그로도 동작하도록 selector specificity를 더 specific하게 */
.content-body .bio-step-list {
    padding: 0;
    list-style: none;
}

/* .content-body ul > li, ol > li { padding-left: 4px } (0,1,2)를 이기기 위해
   .content-body .bio-step-list .bio-step-list__item (0,3,0)로 보강 —
   배지 영역 84px 확보 */
.content-body .bio-step-list .bio-step-list__item {
    padding: var(--space-5) var(--space-5) var(--space-5) 76px;
}

.bio-step-list--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bio-step-list__item {
    counter-increment: bio-step;
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) 76px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bio-step-list__item:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.bio-step-list__item::before {
    content: counter(bio-step);
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-900);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--fs-body);
    font-weight: var(--fw-extrabold);
}

.bio-step-list--horizontal .bio-step-list__item,
.content-body .bio-step-list--horizontal .bio-step-list__item {
    padding: var(--space-16) var(--space-5) var(--space-6);
    text-align: center;
}

.bio-step-list--horizontal .bio-step-list__item::before,
.content-body .bio-step-list--horizontal .bio-step-list__item::before {
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
}

.bio-step-list__title {
    margin: 0 0 var(--gap-card-title-desc);
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: 1.4;
}

.bio-step-list__desc {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--color-gray-700);
}

.bio-step-list__desc + .bio-step-list__desc {
    margin-top: var(--gap-card-title-desc);
}

/* 본문 바로 아래 붙는 보조 메모(문의처·기탁자 안내 등) — 간격 없이, 소자(16px) */
.bio-step-list__desc--note {
    margin-top: 0;
    font-size: var(--fs-small);
    color: var(--color-gray-600);
}

.bio-step-list__desc + .bio-step-list__desc--note {
    margin-top: 0;
}

/* 단계별 안내 카드 본문 내 링크 (mailto·tel 등) — 파란색 강조.
   .btn 클래스를 가진 a 는 버튼 자체 스타일 유지 (흰색 텍스트 위 파란 배경). */
.bio-step-list__desc a:not(.btn) {
    color: var(--color-primary-700);
    text-decoration: none;
}

.bio-step-list__desc a:not(.btn):hover,
.bio-step-list__desc a:not(.btn):focus-visible {
    text-decoration: underline;
}

/* process-steps 단계 카드 본문 내 인라인 링크 (성과물 제출 안내·서식자료실 등) — 파란색+밑줄로 링크임을 명시 (a11y) */
.process-steps__text a:not(.btn) {
    color: var(--color-primary-700);
    text-decoration: underline;
}

/* ────────── 043 단계별 안내 (tumor-step-flow) ──────────
 * PPT 시안 정합: 원형 상단(번호+아이콘+제목) + 박스 하단(설명)
 * 페이지 전용 컴포넌트 — 043_tumor_collect_process.html 단일 사용
 * 색상 alternation: 홀수 = primary-900 (navy) / 짝수 = primary-500 (light blue) */
.tumor-step-flow {
    list-style: none;
    margin: var(--gap-layout-h2-body) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap-layout-h3-body);
    counter-reset: tumor-step;
}

.content-body .tumor-step-flow,
.content-body ol.tumor-step-flow {
    padding: 0;
    list-style: none;
}

.tumor-step-flow__item,
.content-body .tumor-step-flow .tumor-step-flow__item {
    counter-increment: tumor-step;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tumor-step-flow__circle {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 4px solid var(--color-primary-900);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
    overflow: hidden;
}

.tumor-step-flow__item:nth-child(even) .tumor-step-flow__circle {
    border-color: var(--color-primary-500);
}

.tumor-step-flow__num {
    position: absolute;
    top: 18%;
    left: 12%;
    font-family: var(--font-family);
    font-size: var(--fs-title-xl);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary-900);
    line-height: 1;
    letter-spacing: var(--ls);
}

.tumor-step-flow__item:nth-child(even) .tumor-step-flow__num {
    color: var(--color-primary-500);
}

.tumor-step-flow__icon {
    width: 68px;
    height: 68px;
    object-fit: contain;
    margin-bottom: var(--gap-card-title-desc);
}

.tumor-step-flow__title {
    margin: 0;
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: 1.3;
    word-break: var(--word-break-base);
}

.tumor-step-flow__body {
    flex: 1 0 auto;
    width: 100%;
    margin-top: var(--gap-layout-h3-body);
    padding: var(--space-4) var(--space-3);
    background-color: var(--color-primary-900);
    border-radius: var(--radius-md);
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tumor-step-flow__item:nth-child(even) .tumor-step-flow__body {
    background-color: var(--color-primary-500);
}

.tumor-step-flow__desc {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--color-white);
    line-height: 1.7;
    word-break: var(--word-break-base);
}

@media (max-width: 1180px) {
    .tumor-step-flow {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .tumor-step-flow {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-card-icon-text);
    }
}

@media (max-width: 480px) {
    .tumor-step-flow {
        grid-template-columns: 1fr;
    }
    .tumor-step-flow__circle {
        max-width: 280px;
        margin: 0 auto;
    }
    .tumor-step-flow__body {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===========================================
   4. 절차 흐름도 — 폐기 (표준 .process-steps로 마이그레이션 완료)
   =========================================== */

/* ===========================================
   5. 다운로드 리스트 (분양·뇌기증 서류)
   =========================================== */
.bio-download-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-layout-h3-body);
    margin: var(--gap-card-icon-text) 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 767px) {
    .bio-download-list {
        grid-template-columns: 1fr;
    }
}

.bio-download-list__item {
    display: flex;
    align-items: center;
    gap: var(--gap-card-icon-text);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: background-color 0.2s, border-color 0.2s;
}

.bio-download-list__item:hover {
    background-color: var(--color-primary-25);
    border-color: var(--color-primary-300);
}

.bio-download-list__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-md);
}

.bio-download-list__name {
    flex: 1;
    font-size: var(--fs-body);
    color: var(--color-gray-800);
}

.bio-download-list__action {
    flex-shrink: 0;
    color: var(--color-primary-700);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

/* ===========================================
   6. 인용·강조 박스 (소개 페이지 사후 뇌기증 등)
   =========================================== */
.bio-callout {
    margin: var(--gap-layout-h2-body) 0;
    padding: var(--space-6) 28px;
    background-color: var(--color-primary-25);
    border-left: 4px solid var(--color-primary-700);
    border-radius: var(--radius-md);
}

.bio-callout__heading {
    margin: 0 0 var(--gap-card-title-desc);
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-primary-900);
    line-height: 1.4;
}

.bio-callout__body {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--color-gray-800);
}

.bio-callout--accent {
    background-color: var(--color-primary-50);
    border-left-color: var(--color-primary-900);
}

/* ===========================================
   7. 정보 박스 (연락처·이메일 등)
   =========================================== */
.bio-info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-card-icon-text);
    margin: var(--gap-card-icon-text) 0;
}

.bio-info-card {
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.bio-info-card__label {
    display: block;
    margin-bottom: var(--gap-form-input-help);
    font-size: var(--fs-tag);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bio-info-card__value {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-gray-900);
    line-height: 1.5;
}

.bio-info-card__value + .bio-info-card__value {
    margin-top: var(--gap-form-input-help);
    font-weight: var(--fw-regular);
    color: var(--color-gray-700);
}

/* ===========================================
   8. 외부 링크 버튼 (KBN 포털 등)
   =========================================== */
.bio-external-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline-icon);
    margin: var(--gap-layout-h3-body) 0;
    padding: 14px var(--space-6);
    background-color: var(--color-primary-700);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    transition: background-color 0.2s;
}

.bio-external-link:hover {
    background-color: var(--color-primary-950);
}

.bio-external-link--outline {
    background-color: var(--color-white);
    color: var(--color-primary-700);
    border: 1px solid var(--color-primary-700);
}

.bio-external-link--outline:hover {
    background-color: var(--color-primary-25);
}

.bio-external-link svg {
    width: 18px;
    height: 18px;
}

/* ===========================================
   9. 표 보강 (table--bordered 행 정렬 통일)
   - 짧은 행 헤더와 긴 본문이 섞여도 높낮이 어긋나지 않도록
     모든 셀 vertical-align: middle 적용
   - thead·tbody th(scope=row)는 text-align: center로 통일
     (긴 한국어 문장이 들어가는 th는 class="text-left"로 개별 override)
   =========================================== */
.content-body .table--bordered td,
.content-body .table--bordered th {
    line-height: 1.6;
    vertical-align: middle;
}

.content-body .table--bordered thead th,
.content-body .table--bordered tbody th {
    text-align: center;
}

/* 셀 안에 ul·ol 다중 항목이 있으면 위쪽 정렬이 자연스러움 */
.content-body .table--bordered td:has(ul),
.content-body .table--bordered td:has(ol) {
    vertical-align: top;
}

/* ===========================================
   10. intro-section 마진 미세 보정
   - 06_biobank는 챕터간 약간 더 압축
   =========================================== */
.content-body > .intro-section + .intro-section {
    margin-top: var(--gap-layout-section-compact);
}

@media (max-width: 767px) {
    .content-body > .intro-section + .intro-section {
        margin-top: var(--gap-layout-section-compact);
    }
}

/* ===========================================
   11. 뇌은행 인사말 / 인용
   =========================================== */
.bio-greeting-lead {
    margin: var(--gap-card-icon-text) 0 var(--gap-layout-tab-content);
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-primary-25);
    border-radius: var(--radius-md);
    font-size: var(--fs-block);
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    color: var(--color-primary-900);
}

.bio-greeting-lead em {
    font-style: normal;
    color: var(--color-point-700);
    font-weight: var(--fw-bold);
}

/* ===========================================
   12. 아이콘 카드 그리드 (밝은 톤·컴팩트)
   - mv-values__card(다크·정사각형) 대비 가벼운 카드
   - 성과물 종류·항목 분류 등 4~6개 메뉴형 정보 표시용
   =========================================== */
.bio-icon-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-card-icon-text);
    margin: var(--gap-card-icon-text) 0;
}

@media (max-width: 1024px) {
    .bio-icon-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bio-icon-card-grid {
        grid-template-columns: 1fr;
    }
}

.bio-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-layout-h3-body);
    padding: 28px var(--space-5);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bio-icon-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.bio-icon-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.bio-icon-card__icon svg {
    width: 24px;
    height: 24px;
}

.bio-icon-card__title {
    margin: 0;
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: 1.4;
}

.bio-icon-card__desc {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--color-gray-600);
}

/* ===========================================
   13. 본문 흐름 spacing 통일
   - h3·p·ul·ol·bio-* 컴포넌트 사이 마진 일관성
   - .content-body 안에서만 적용해 LNB·헤더·푸터와 격리
   =========================================== */

/* h3 위쪽 — 직전 요소가 박스형 컴포넌트·리스트일 때 */
.content-body .bio-callout + .content-body__title,
.content-body .bio-info-row + .content-body__title,
.content-body .bio-icon-card-grid + .content-body__title,
.content-body .bio-flow + .content-body__title,
.content-body .bio-step-list + .content-body__title,
.content-body .table-wrap + .content-body__title,
.content-body ul + .content-body__title,
.content-body ol + .content-body__title {
    margin-top: var(--gap-layout-h3-top);
}

/* h3 아래쪽 — 제목 다음 본문 컴포넌트 */
.content-body .content-body__title + .bio-callout,
.content-body .content-body__title + .bio-info-row,
.content-body .content-body__title + .bio-icon-card-grid,
.content-body .content-body__title + .bio-flow,
.content-body .content-body__title + .bio-step-list,
.content-body .content-body__title + .table-wrap,
.content-body .content-body__title + ul,
.content-body .content-body__title + ol {
    margin-top: var(--gap-layout-h3-body);
}

/* p 다음 컴포넌트·리스트 */
.content-body .content-block__text + .bio-callout,
.content-body .content-block__text + .bio-info-row,
.content-body .content-block__text + .bio-icon-card-grid,
.content-body .content-block__text + .bio-flow,
.content-body .content-block__text + .bio-step-list,
.content-body .content-block__text + ul,
.content-body .content-block__text + ol {
    margin-top: var(--gap-layout-h3-body);
}

/* 연속 callout 사이 간격 압축 (h3-body 12px 통일) */
.content-body .bio-callout + .bio-callout {
    margin-top: var(--gap-layout-h3-body);
}

/* 사사표기 카드 간 간격 */
.content-block .card + .card {
    margin-top: var(--gap-layout-h3-body);
}

/* 통계 카드 직후 notice-box — dear-stats--3col의 margin-bottom(64px) 상쇄 후 16px 유지 */
.dear-stats--3col:has(+ .notice-box) {
    margin-bottom: 0;
}
.dear-stats + .notice-box {
    margin-top: var(--gap-card-icon-text);
}

/* ===== ul/ol 본문 리스트 — 글로벌 reset 복원 ===== */
/* bio-step-list·tumor-step-flow는 자체 list-style:none 보유 → decimal 적용 제외 */
.content-body ul,
.content-body ol:not(.numbered-list):not(.bio-step-list):not(.tumor-step-flow) {
    margin: 0;
    padding-left: var(--space-6);
    line-height: 1.7;
}

.content-body ul {
    list-style: disc;
}

.content-body ol:not(.numbered-list):not(.bio-step-list):not(.tumor-step-flow) {
    list-style: decimal;
}

.content-body ul > li,
.content-body ol:not(.numbered-list):not(.bio-step-list):not(.tumor-step-flow) > li {
    margin: var(--gap-button-group) 0;
    padding-left: var(--gap-form-input-help);
    color: var(--color-gray-700);
    line-height: 1.7;
}

/* ol 번호 강조 */
.content-body ol:not(.numbered-list):not(.bio-step-list):not(.tumor-step-flow) > li::marker {
    color: var(--color-primary-700);
    font-weight: var(--fw-bold);
}

/* nested ul (3depth) */
.content-body ul ul,
.content-body ol ul {
    margin-top: var(--gap-button-group);
    list-style: circle;
}

/* ===========================================
   14. Bio Hub 다이어그램 (운영 프로세스)
   - 좌측 입력 → 중앙 SNUH Hub → 우측 출력 3개
   - 020_human_intro 운영 프로세스 시각화 전용
   =========================================== */
.bio-hub {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(240px, 1.6fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: var(--gap-button-group);
    margin: var(--gap-layout-tab-content) 0;
    padding: var(--space-14) var(--space-8);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-150);
    border-radius: var(--radius-xl);
}

.bio-hub__node {
    width: 170px;
    height: 170px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-300);
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gap-form-input-help);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
    list-style: none;
    position: relative;
}

.bio-hub__node:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--color-primary-700);
}

.bio-hub__node-title {
    font-size: var(--fs-block);
    font-weight: var(--fw-bold);
    color: var(--color-primary-700);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
}

.bio-hub__node-desc {
    font-size: var(--fs-tag);
    color: var(--color-gray-700);
    line-height: var(--lh-heading);
    margin-top: var(--gap-form-input-help);
}

/* 중앙 노드 */
.bio-hub__node--center {
    width: 250px;
    height: 250px;
    padding: 22px;
    border-width: 5px;
    border-color: var(--color-primary-700);
    background-color: var(--color-white);
    z-index: 2;
}

.bio-hub__node--center:hover {
    transform: translateY(-6px) scale(1.02);
}

.bio-hub__node--center .bio-hub__node-eyebrow {
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
}

.bio-hub__node--center .bio-hub__node-title {
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    margin-top: 0;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
}

.bio-hub__node--center .bio-hub__node-brand {
    display: inline-block;
    margin-bottom: var(--gap-card-title-desc);
    padding: var(--space-1) var(--space-4);
    background-color: var(--color-primary-700);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    font-family: 'GmarketSans', var(--font-family);
    letter-spacing: 0.04em;
}

.bio-hub__node--center .bio-hub__node-en {
    font-size: var(--fs-small);
    color: var(--color-gray-600);
    line-height: 1.35;
    margin-top: var(--gap-button-group);
    letter-spacing: 0.01em;
}

/* 화살표 — 둥근 배지 형태 */
.bio-hub__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary-700);
    color: var(--color-white);
    z-index: 1;
}

.bio-hub__arrow svg {
    width: 18px;
    height: 18px;
    margin-left: var(--gap-optical-1);
}

/* 출력 3개 stack */
.bio-hub__outputs {
    display: flex;
    flex-direction: column;
    gap: var(--gap-layout-h3-body);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* content-body 내부 룰 우선순위 보강 (#13의 list-style: disc 대치) */
.content-body .bio-hub__outputs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-body .bio-hub__outputs > .bio-hub__node {
    margin: 0 auto;
    padding: 18px;
    color: inherit;
    line-height: inherit;
}

.content-body .bio-hub__outputs > .bio-hub__node::marker {
    content: '';
}

/* 반응형 — 1024px 이하 세로 스택 */
@media (max-width: 1024px) {
    .bio-hub {
        grid-template-columns: 1fr;
        gap: var(--gap-layout-h3-body);
        padding: var(--space-10) var(--space-4);
    }

    .bio-hub__arrow {
        margin: 0 auto;
    }

    .bio-hub__arrow svg {
        transform: rotate(90deg);
        margin-left: 0;
        margin-top: var(--gap-optical-1);
    }

    .bio-hub__outputs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--gap-layout-h3-body);
    }

    .bio-hub__outputs > .bio-hub__node {
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .bio-hub {
        padding: var(--space-8) var(--space-3);
    }

    .bio-hub__node {
        width: 150px;
        height: 150px;
    }

    .bio-hub__node--center {
        width: 200px;
        height: 200px;
    }

    .bio-hub__node--center .bio-hub__node-title {
        font-size: var(--fs-section);
    }
}

/* ===========================================
   FAQ 답변 영역
   =========================================== */

/* ===========================================
   LNB 하단 — 3개 은행 연락처 안내 박스
   menu_bio.js가 DOMContentLoaded 시 #lnb-root 끝에 자동 주입
   - LNB 카드와 통일된 외곽 카드 + 항목 구분선 패턴
   =========================================== */
/* lnb-contact — LNB 아코디언 섹션과 동일한 구조·스타일 */
.lnb-contact {
    margin-top: var(--gap-layout-h3-body);
}

.lnb-contact__heading {
    margin: 0;
    padding: var(--space-4) 14px;
    background: var(--color-primary-900);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls);
    font-family: 'SUIT', 'Malgun Gothic', '맑은 고딕', sans-serif;
    line-height: normal;
    box-sizing: border-box;
    min-height: 46px;
    display: flex;
    align-items: center;
}

.lnb-contact__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-layout-h3-body);
    padding: var(--space-4) 14px;
    min-height: 46px;
    background: var(--color-white);
    color: var(--color-text-primary);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls);
    font-family: 'SUIT', 'Malgun Gothic', '맑은 고딕', sans-serif;
    text-align: left;
    cursor: pointer;
    line-height: normal;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.lnb-contact__toggle:hover {
    border-color: var(--color-gray-400);
}

.lnb-contact__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-focus, rgba(3, 54, 140, 0.35));
}

/* 열림 상태 — .lnb-header.is-selected와 동일 */
.lnb-contact__toggle[aria-expanded="true"] {
    background: var(--color-primary-900);
    color: var(--color-white);
    border-color: transparent;
    border-radius: var(--radius-md);
}

.lnb-contact__toggle[aria-expanded="true"]:hover {
    border-color: transparent;
}

.lnb-contact__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lnb-contact__toggle[aria-expanded="true"] .lnb-contact__chevron {
    transform: rotate(180deg);
}

/* 패널 — .lnb-panel과 동일한 구조 */
.lnb-contact__body {
    margin-top: var(--gap-layout-h3-body);
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.lnb-contact__item {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.lnb-contact__item:last-child {
    border-bottom: 0;
}

.lnb-contact__title {
    margin: 0 0 var(--gap-card-title-desc);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--color-gray-900);
    line-height: var(--lh-body);
}

.lnb-contact__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-small);
    color: var(--color-gray-900);
    line-height: var(--lh-body);
}

.lnb-contact__list li {
    padding: var(--gap-form-input-help) 0;
    display: flex;
    align-items: baseline;
    gap: var(--gap-form-input-help);
}

.lnb-contact__label {
    flex-shrink: 0;
    min-width: 48px;
    font-weight: var(--fw-medium);
    color: var(--color-gray-500);
}

.lnb-contact__list a,
.lnb-contact__list li > :not(.lnb-contact__label) {
    word-break: break-all;
    color: var(--color-gray-900);
    text-decoration: none;
}

.lnb-contact__list a:hover,
.lnb-contact__list a:focus-visible {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .lnb-contact__toggle,
    .lnb-contact__chevron,
    .lnb-contact__item {
        transition: none;
    }
}

/* ===========================================
   조직도 — 012 바이오뱅크 조직도 페이지 전용 보정
   공용 .org-chart 의 overflow-x:auto + .org-chart__inner min-width:1052px 가
   LNB 가 있는 좁은 콘텐츠 영역(약 1035px)을 초과해 가로 스크롤바가 발생하던
   문제 해결. NSTRI 011 의 .org-chart--nstri-2026 와 동일 패턴.
   =========================================== */
.org-chart--biobank {
    overflow-x: visible;
}

.org-chart--biobank .org-chart__inner {
    min-width: 0;
}

/* 3col 가로 connector 정합 — 공용 .org-chart__list--3col 의 ::before 가
   left/right: 100%/6(약 16.7%) 위치인데, 박스 자체 너비/패딩으로 실제
   첫 박스 중심이 약 18.4% 위치(우측 박스 16.5%)에 있어 미세 어긋남.
   1) .org-chart__item 을 flex:1 로 균등 분배해 cell 폭 통일
   2) ::before 위치를 박스 중심 측정값에 맞춰 보정 */
.org-chart--biobank .org-chart__list--3col > .org-chart__item {
    flex: 1;
    /* display:flex column 은 공용 .org-chart__item 룰 그대로 유지 — 박스 위
       세로 stub(::before)이 박스 중심과 가로선에 일렬 정렬되어야 함.
       공용 item padding 이 0 8px 0 4px (비대칭) → 좌·우 동일하게 정정해
       stub(padding-box 중심)과 박스(콘텐츠 중심) 의 가로 위치를 일치시킨다. */
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/* stub 위 가로선까지 6px 틈 발생 — list 상단에서 item 시작까지의 layout
   오프셋을 stub 의 음수 margin 으로 채워 stub 윗부분이 가로선에 정확히
   닿게 한다. (측정 기반: 가로선 top vs stub top 차이 = 6px) */
.org-chart--biobank .org-chart__list--3col > .org-chart__item::before {
    margin-top: -6px;
    height: 30px;
}

/* 3단 은행 박스(인체자원은행·암조직은행·뇌은행) 너비 축소 — 1단 박스와
   동등한 컴팩트 크기. 공용 .org-node width:100% 강제를 풀고 콘텐츠 폭
   기준 min/max-width 로 제한. */
.org-chart--biobank .org-chart__list--3col > .org-chart__item > .org-node {
    width: auto;
    min-width: 200px;
    max-width: 240px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

/* 3박스 그룹을 가운데로 모음 — list 자체 너비를 제한해 박스 간격 좁힘.
   공용 .org-chart__list 의 padding 이 0 0 0 24px (비대칭 좌측 24) 라서
   3박스가 12px 우측으로 시프트되던 문제 해결: padding 0 으로 풀고
   grid 로 균등 분배. */
.org-chart--biobank .org-chart__list--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.org-chart--biobank .org-chart__list--3col::before {
    left: 16.7%;
    right: 16.7%;
}

/* 1단 박스(중개의학연구소·바이오뱅크) — 공용 .org-node width:100% 강제로
   컨테이너 전체 폭(약 1035px)을 채워 어색하게 커지는 문제 보정.
   다른 사이트(01_bri, 04_dear)처럼 박스를 콘텐츠 폭에 맞춰 컴팩트하게.
   inner 의 직접 자식이므로 align-self:center 로 가운데 정렬. */
.org-chart--biobank .org-node--single {
    width: auto;
    min-width: 240px;
    max-width: 320px;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
    align-self: center;
}

/* Lv2 색상 통일 — 의생명연구원·중개의학연구소를 root(연구부문)와 같은
   primary-900 톤으로. 바이오뱅크(.org-node--emphasis)는 강조용 primary-700
   톤 유지. 공용 .org-node--lv2 정의 미변경, biobank 스코프 안에서만 적용. */
.org-chart--biobank .org-node--lv2:not(.org-node--emphasis) {
    background-color: var(--color-primary-900);
    border-color: var(--color-primary-900);
}
.org-chart--biobank .org-node--lv2:not(.org-node--emphasis):hover {
    background-color: var(--color-primary-950);
    border-color: var(--color-primary-950);
}

/* 강조 노드(바이오뱅크) — 트리 중심 노드를 박스·글자 한 단계 크게.
   .org-node--single 위에 덧붙는 modifier (공용 .org-node 규칙 미수정) */
.org-chart--biobank .org-node--single.org-node--emphasis {
    min-width: 320px;
    max-width: 420px;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    padding-left: var(--space-10);
    padding-right: var(--space-10);
}

.org-chart--biobank .org-node--single.org-node--emphasis .org-node__role {
    font-size: var(--fs-title-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
}

/* Process Steps — components.css 표준 디자인 사용 (2026-05-28 pill override 제거) */

/* ===========================================
   제목-액션 행 (h2 우측 텍스트 버튼)
   - desktop: h2 좌 / 텍스트링크 우 한 행
   - mobile: h2 아래 텍스트링크 (flex-column)
   =========================================== */
.bio-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-layout-h3-body);
    margin-bottom: var(--gap-layout-h2-body);
}

.bio-title-row .content-block__title {
    margin-bottom: 0;
    flex: 1;
}

@media (max-width: 767px) {
    .bio-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ===========================================
   이미지 그리드 (메인 사진 4컷 등 — 06_biobank 페이지 전용)
   =========================================== */
.bio-image-grid {
    display: grid;
    gap: var(--gap-card-icon-text);
    margin-top: var(--gap-layout-h2-body);
}

.bio-image-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.bio-image-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.bio-image-grid__item {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.bio-image-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1199px) {
    .bio-image-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .bio-image-grid--4col,
    .bio-image-grid--2col { grid-template-columns: 1fr; }
}

/* ===========================================
   FAQ 답변 "A." prefix 중복 제거 (06_biobank 전용)
   components.css 의 .accordion__content p::before 가 모든 <p> 앞에
   "A. " 를 자동 부여하여, 답변에 여러 단락이 있으면 "A." 가 중복 노출됨.
   첫 단락에만 노출되도록 06_biobank 사이트에서 오버라이드.
   =========================================== */
.accordion__content p:not(:first-of-type)::before {
    content: '';
    margin-right: 0;
}

/* ===========================================
   Timeline 점머리표 중복 제거 (06_biobank 전용)
   history.css 의 timeline__event::before 작은 dot 이
   timeline__month-group::before 큰 dot 과 중복되어 보이는
   문제(발주처 시안 검토 의견)를 06_biobank 사이트 한정으로 제거.
   =========================================== */
.timeline__event::before,
.timeline__event + .timeline__event::before {
    display: none;
}

.timeline__event {
    padding-left: 0;
}

.timeline__event + .timeline__event {
    padding-top: var(--gap-card-title-desc);
}

/* ===========================================
   012_organization — Lv3 3노드 폭 통일 (가운데 trunk 정렬 보정)
   docx 5/26 img8 발주처 지적: 바이오뱅크 → 3은행 분기에서 trunk가 가운데와 어긋남.
   3 노드(인체자원은행/암조직은행/뇌은행) 폭을 동일하게 → 가로 분기 라인 좌우 대칭.
   =========================================== */
.org-chart__list--3col > .org-chart__item > .org-node--lv3 {
    min-width: 200px;
}


/* ===========================================
   020_human_intro / 025_human_collect_mgmt — 소개·보관관리 사진 3장 가로 띠
   docx 5/26 발주처 첨부: 실제 사진 (초저온냉동고실/액체질소냉동고실/정도관리 등)
   =========================================== */
.bio-photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-layout-h3-body);
    margin: var(--gap-layout-tab-content) 0;
}
.bio-photo-strip__figure {
    margin: 0;
}
.bio-photo-strip__figure img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}
.bio-photo-strip__figure figcaption {
    margin-top: var(--gap-card-title-desc);
    font-size: var(--fs-small);
    color: var(--color-gray-700);
    text-align: center;
}
@media (max-width: 767px) {
    .bio-photo-strip { grid-template-columns: 1fr; }
    .bio-photo-strip__figure img { height: 240px; }
}

/* ===========================================
   060_brain_intro — 뇌은행 사진 2×2 그리드
   docx 5/26 발주처 첨부: 뇌은행1~4.jpg
   =========================================== */
.bio-photo-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-layout-h3-body);
    margin: var(--gap-layout-tab-content) 0;
}
.bio-photo-grid-2x2__figure {
    margin: 0;
}
.bio-photo-grid-2x2__figure img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
}
@media (max-width: 767px) {
    .bio-photo-grid-2x2 { grid-template-columns: 1fr; }
}

/* ============================================================
   040 암조직은행 소개 — 설립목표(mv-values) 정렬 (발주처 0522_0706)
   modifier .mv-values--goal 은 040 전용 → 020 인체자원 운영가치엔 미적용
   ============================================================ */
/* 제목 2줄 높이 고정: 두줄 문구는 첫 줄에 맞춤, 한줄 문구는 두 줄 사이 가운데 */
.mv-values--goal .mv-values__card-title {
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}