@charset "utf-8";
/******************************************************************
    핵심기술 (tech.php) — 페이지 전용 스타일
    모든 선택자는 #sub-tech 로 스코프한다.
******************************************************************/

/* 기술 플랫폼 — 사진과 설명 사이의 문장 위계 */
#sub-tech .inob-editorial-copy .inob-lead { margin-bottom: 22px; }
#sub-tech .inob-editorial-copy h3 { margin-bottom: 18px; }

/* 발효·생물전환 공정 — 네이비 섹션 안 features.is-divided 여백 보정 */
#sub-tech .inob-sec.is-navy .inob-features { margin-top: 8px; }

/* 공정 축 — 카드 대신 연구 흐름을 한 줄의 기록 인덱스로 표현 */
#sub-tech .inob-tech-axis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    margin: 42px 0 0;
    border-top: 1px solid var(--inob-line);
    list-style: none;
}
#sub-tech .inob-tech-axis li {
    position: relative;
    padding: 20px 18px 0;
    border-left: 1px solid var(--inob-line);
}
#sub-tech .inob-tech-axis li:first-child { border-left: 0; }
#sub-tech .inob-tech-axis li::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--inob-cyan);
}
#sub-tech .inob-tech-axis strong,
#sub-tech .inob-tech-axis span { display: block; }
#sub-tech .inob-tech-axis strong {
    color: var(--inob-navy);
    font-size: 17px;
    font-weight: 800;
}
#sub-tech .inob-tech-axis span {
    margin-top: 5px;
    color: var(--inob-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* 4개 아이콘 카드를 두 개의 연구 범주로 통합 */
#sub-tech .inob-tech-groups {
    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-tech .inob-tech-group {
    padding: 34px clamp(24px, 4vw, 48px);
    border-left: 1px solid var(--inob-line);
}
#sub-tech .inob-tech-group:first-child { border-left: 0; }
#sub-tech .inob-tech-group-label {
    margin-bottom: 8px;
    color: var(--inob-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#sub-tech .inob-tech-group h4 {
    margin-bottom: 22px;
    color: var(--inob-navy);
    font-size: 24px;
    font-weight: 800;
}
#sub-tech .inob-tech-group dl { margin: 0; }
#sub-tech .inob-tech-group dl > div {
    padding: 18px 0;
    border-top: 1px solid var(--inob-line);
}
#sub-tech .inob-tech-group dt {
    color: var(--inob-ink);
    font-size: 16px;
    font-weight: 750;
}
#sub-tech .inob-tech-group dd {
    margin: 8px 0 0;
    color: var(--inob-body);
    font-size: 14.5px;
    line-height: 1.7;
}

/* 강조 카드(B-PDRN 배너)의 리스트를 체크 리스트 톤으로 */
#sub-tech .inob-card.is-featured ul { margin-top: 10px; }
#sub-tech .inob-card.is-featured li {
    position: relative;
    padding-left: 13px;
    margin-bottom: 6px;
    color: var(--inob-body);
    font-size: 15.5px;
    line-height: 1.7;
}
#sub-tech .inob-card.is-featured li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--inob-brand);
}

@media (max-width: 1024px) {
    #sub-tech .inob-tech-axis { margin-top: 30px; }
}

@media (max-width: 768px) {
    #sub-tech .inob-tech-axis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sub-tech .inob-tech-axis li {
        padding: 18px 12px 16px;
        border-bottom: 1px solid var(--inob-line);
    }
    #sub-tech .inob-tech-axis li:nth-child(odd) { border-left: 0; }
    #sub-tech .inob-tech-axis li::before { left: 12px; }
    #sub-tech .inob-tech-groups { grid-template-columns: 1fr; }
    #sub-tech .inob-tech-group {
        padding: 28px 0;
        border-left: 0;
        border-top: 1px solid var(--inob-line);
    }
    #sub-tech .inob-tech-group:first-child { border-top: 0; }
}