/* ============================================================
   tumor-collect-mgmt.css
   06_biobank / 044_tumor_collect_mgmt 페이지 전용
   - 좌우 이미지 쌍 (라벨링·탱크·순도 등)
   - 단일 이미지 카드 (품질관리 연구성과 PDF 표지)
   Tokens: common.css + components.css 디자인 토큰만 사용
   ============================================================ */

/* 좌우 이미지 쌍 (그리드 2컬럼) */
.tumor-image-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--gap-layout-h2-body);
}

.tumor-image-pair__item {
    display: flex;
    flex-direction: column;
    gap: var(--gap-card-title-desc);
}

.tumor-image-pair__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}

.tumor-image-pair__caption {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--color-gray-700);
    text-align: center;
}

/* 연구성과 카드 (단일 이미지 + 인용문) */
.tumor-paper-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--gap-layout-h2-body);
    padding: var(--space-6);
    background-color: var(--color-gray-100);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.tumor-paper-card__cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
}

.tumor-paper-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-card-title-desc);
}

.tumor-paper-card__title {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--color-gray-900);
}

.tumor-paper-card__journal {
    font-size: var(--fs-small);
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* 반응형: 모바일에서 1컬럼 */
@media (max-width: 767px) {
    .tumor-image-pair {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .tumor-paper-card {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .tumor-paper-card__cover {
        max-width: 200px;
        margin: 0 auto;
    }
}