/* ============================================================
   tumor-resource.css
   06_biobank / 042_tumor_resource 페이지 전용
   - dear-facility-card 기반 장기 카드 (thumbnail → 아이콘 PNG)
   Tokens: common.css + components.css 디자인 토큰만 사용
   ============================================================ */

/* 장기 카드 그리드 — 1열 (dear-facility-card 가로형에 최적)
   .content-body ul { padding-left:24px; list-style:disc } (0,1,1) 간섭 억제 */
.content-body .tumor-organ-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .content-body ul > li { padding-left; margin } (0,1,2) 간섭 억제 —
   dear-facility-card 의 padding:12px 복원 */
.content-body .tumor-organ-grid > .dear-facility-card {
    padding: var(--space-3);
    margin: 0;
    list-style: none;
}

/* dear-facility-card 썸네일에 아이콘 PNG 표시
   기본 object-fit:cover 는 아이콘을 왜곡하므로 contain 으로만 변경 */
.tumor-organ-fc .dear-facility-card__thumb img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* 장기 카드 그리드 하단 버튼 여백 */
.tumor-organ-grid + .btn-group {
    margin-top: var(--gap-layout-h2-body);
}

/* 반응형 */
@media (max-width: 767px) {
    .content-body .tumor-organ-grid {
        gap: var(--space-4);
    }
}

/* ============================================================
   장기별 보유 현황 "카드형" 복원 (발주처 요청 2026-07-06)
   SoT: git ab1cdd723 (_prev_tumor-resource.css / 구조개선 522709958 직전)
   - tumor-organ-group(기준일+뉴스레터 헤더) > tumor-organ-grid > tumor-organ-card
   - biobank-common.css .content-body ul(0,1,1)/ul>li(0,1,2) 및 위 현재폼
     .content-body .tumor-organ-grid(0,2,0/1fr) 를 이기려면 .content-body 스코프 유지
   - 위 dear-facility-card 폼 규칙은 HTML에서 미사용이 되어 무해(과잉삭제 안 함)
   ============================================================ */

/* 카드 그리드 — 3열. 현재폼 1열 규칙(위, 0,2,0)을 소스 순서로 덮어씀.
   self-contained: 위 dear-facility-card 폼 규칙이 향후 삭제돼도 그리드 유지 */
.content-body .tumor-organ-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .content-body ul > li { padding-left; margin } (0,1,2) 억제 — 카드 padding 복원 */
.content-body .tumor-organ-grid > .tumor-organ-card {
    padding: var(--space-6);
    margin: 0;
    list-style: none;
}

.tumor-organ-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: var(--transition);
    height: 100%;   /* grid cell 높이까지 stretch — row-span 카드 = 단순 카드 합 일치 */
}

/* sub-list 카드(Urinary/Female)는 2행 차지 */
.tumor-organ-card--span {
    grid-row: span 2;
}

/* 단순 카드 min-height — row-span 2 카드와 세로 길이 일치 */
.tumor-organ-card:not(.tumor-organ-card--span) {
    min-height: 206px;
}

.tumor-organ-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 12px rgba(3, 54, 140, 0.08);
}

.tumor-organ-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--gap-card-icon-text);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.tumor-organ-card__img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.tumor-organ-card__title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(1.3em * 2 + 22px);   /* 2줄 제목 47 + count 22 통일. 1줄 제목은 가운데 정렬 */
}

.tumor-organ-card__name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-gray-900);
    margin: 0 0 var(--gap-form-input-help);
}

.tumor-organ-card__count {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray-600);
}

.tumor-organ-card__count-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-700);
    margin-right: var(--gap-form-input-help);
}

.tumor-organ-card__vials {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tumor-organ-card__vial {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--color-gray-700);
    text-align: center;
}

.tumor-organ-card__vial--tumor {
    background-color: var(--color-primary-50);
    color: var(--color-primary-900);
}

.tumor-organ-card__vial--normal {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

.tumor-organ-card__vial-label {
    font-weight: 700;
    margin-right: var(--gap-form-input-help);
}

/* sub-organ 리스트 (Urinary/Male, Female)
   .content-body ul(0,1,1) / ul ul(0,1,2, list-style:circle+margin) 억제 위해 스코프 유지 */
.content-body .tumor-organ-card__sub {
    margin: 0 0 var(--gap-card-icon-text);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* .content-body ul > li (0,1,2) 억제 — sub-item 은 grid 레이아웃 유지 */
.content-body .tumor-organ-card__sub > .tumor-organ-card__sub-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.tumor-organ-card__sub-name {
    font-weight: 700;
    color: var(--color-gray-900);
}

.tumor-organ-card__sub-detail {
    color: var(--color-gray-700);
    font-size: 13px;
}

/* 카드 그룹 — 기준일 + 뉴스레터 바로가기 헤더 + 카드 그리드 */
.tumor-organ-group {
    margin-bottom: var(--gap-layout-section-compact);
}

.tumor-organ-group:last-child {
    margin-bottom: 0;
}

.tumor-organ-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--gap-layout-h2-body);
    background-color: var(--color-primary-25);
    border-left: 4px solid var(--color-primary-500);
    border-radius: var(--radius-sm);
}

.tumor-organ-group__title-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-input-help);
}

.tumor-organ-group__date {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-900);
}

.content-body .tumor-organ-group__sub {
    font-size: var(--fs-tag);
    color: var(--color-gray-700);
}

@media (max-width: 767px) {
    .tumor-organ-group__head {
        padding: var(--space-3) var(--space-4);
    }
    .tumor-organ-group__date {
        font-size: 16px;
    }
}

/* 카드형 반응형 — .content-body 스코프로 desktop 3열 규칙(0,2,0) 을 덮어씀 */
@media (max-width: 1199px) {
    .content-body .tumor-organ-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .content-body .tumor-organ-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .content-body .tumor-organ-grid > .tumor-organ-card {
        padding: var(--space-4);
    }
    .tumor-organ-card__img {
        width: 48px;
        height: 48px;
    }
    .tumor-organ-card__name {
        font-size: 16px;
    }
    .tumor-organ-card__vials {
        flex-direction: column;
        gap: var(--space-2);
    }
}