@charset "utf-8";
/******************************************************************
    미생물 소재 라이브러리 (strain.php) — 페이지 전용 스타일
    모든 선택자는 #sub-strain 으로 스코프한다.
******************************************************************/

/* 발굴 맥락의 기존 사진은 실제 증빙이 아닌 연구 환경 보조 이미지로 제한 */
#sub-strain .inob-strain-origin-media img { object-position: center 46%; }

/* 4계열 소재 — 다수의 칩 카드를 평면 목록으로 통합 */
#sub-strain .inob-strain-families {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--inob-navy);
    border-bottom: 1px solid var(--inob-line);
}
#sub-strain .inob-strain-family {
    display: grid;
    grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr);
    gap: 20px;
    padding: 30px clamp(20px, 3vw, 38px);
    border-top: 1px solid var(--inob-line);
    border-left: 1px solid var(--inob-line);
}
#sub-strain .inob-strain-family:nth-child(-n+2) { border-top: 0; }
#sub-strain .inob-strain-family:nth-child(odd) { border-left: 0; }
#sub-strain .inob-strain-family h4 {
    color: var(--inob-navy);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.45;
}
#sub-strain .inob-strain-family ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    padding: 0;
    margin: 0;
    list-style: none;
}
#sub-strain .inob-strain-family li {
    position: relative;
    padding-left: 11px;
    color: var(--inob-body);
    font-size: 14px;
    line-height: 1.65;
}
#sub-strain .inob-strain-family li::before {
    content: "";
    position: absolute;
    top: .75em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--inob-cyan);
}

/* 생성 장면은 기존 section-strain과 섹션 간격을 두고 자산화 단계에만 사용 */
#sub-strain .inob-strain-bank {
    margin-top: clamp(46px, 7vw, 84px);
    padding-top: clamp(38px, 5vw, 62px);
    border-top: 1px solid var(--inob-line);
}
#sub-strain .inob-strain-bank .inob-editorial-media { grid-column: 1; grid-row: 1; }
#sub-strain .inob-strain-bank .inob-editorial-copy { grid-column: 2; grid-row: 1; }

/* GRAS 안내 박스 상단 여백 보정 (gw-box02 는 기본 margin-top 이 없다) */
#sub-strain .inob-mt-note { margin-top: 28px; }

/* 균주 테이블 — 균주번호 열은 모노스페이스 톤 */
#sub-strain .gw-table01 td:nth-child(3) { font-variant-numeric: tabular-nums; }

/* 학명 줄바꿈 방지는 가로형 표(1024px 초과)에서만 — 1024px 이하는 카드 붕괴라 nowrap 이 넘침을 만든다 */
@media (min-width: 1025px) {
    #sub-strain .gw-table01 td:nth-child(2) { white-space: nowrap; }
    #sub-strain .gw-table01 td:nth-child(3) { white-space: nowrap; }
}

/* ================================================================
   코어 균주 기능성 검증 카드 — 적용 제품 예시 각주
   ================================================================ */
#sub-strain .inob-card-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--inob-line);
    color: var(--inob-muted);
    font-size: 13.5px;
    font-weight: 600;
}

@media (max-width: 1024px) {
    #sub-strain .inob-strain-bank .inob-editorial-media,
    #sub-strain .inob-strain-bank .inob-editorial-copy {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    #sub-strain .inob-strain-families { grid-template-columns: 1fr; }
    #sub-strain .inob-strain-family {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
        border-left: 0;
    }
    #sub-strain .inob-strain-family:nth-child(2) { border-top: 1px solid var(--inob-line); }
    #sub-strain .inob-strain-bank { margin-top: 38px; padding-top: 30px; }
}