@charset "utf-8";
/******************************************************************
    #sub-rnd-service 전용 스타일

    inob-sub.css 에 없는, rnd_service.php 전용 컴포넌트만 담는다.
    - .gw-tab-content            : 서비스 유형 탭 패널 상단 여백(테마 원본은 여백 없음)
    - .inob-stats.is-3           : 지표 그리드 3열 변형(공통 CSS는 4열 기본값만 제공)
    - .inob-mb-24 / .inob-mt-32  : 여백 유틸리티
******************************************************************/

/* ================================================================
   서비스 유형 탭 패널
   ================================================================ */
#sub-rnd-service .inob-rnd-service-panel {
    padding: 18px 24px 28px;
    border: 1px solid var(--inob-line);
    border-radius: var(--inob-r-lg);
    background: #fff;
    box-shadow: var(--inob-sh);
}
#sub-rnd-service-tabs {
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--inob-line);
    background: var(--inob-bg-2);
}
#sub-rnd-service-tabs > li > button {
    min-height: 56px;
    border: 1px solid transparent;
    background: #fff;
    color: var(--inob-body);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
#sub-rnd-service-tabs > li > button:hover {
    border-color: var(--inob-brand);
    background: var(--inob-cyan-lt);
    color: var(--inob-brand-dk);
}
#sub-rnd-service-tabs > li > button.active {
    border-color: var(--inob-brand);
    background: var(--inob-brand);
    color: #fff;
}
#sub-rnd-service .gw-tab-content { padding: 30px 8px 2px; }
#sub-rnd-service .gw-tab-content .inob-features { gap: 16px; }
#sub-rnd-service .gw-tab-content .inob-feature {
    padding: 22px;
    border: 1px solid var(--inob-line);
    border-radius: var(--inob-r);
    background: #f8faf9;
}

/* ================================================================
   지표 그리드 — 3열 변형 (국가과제 컨소시엄 참여 섹션)
   ================================================================ */
#sub-rnd-service .inob-stats.is-3 { --inob-stats-col: 3; }

/* ================================================================
   여백 유틸리티
   ================================================================ */
#sub-rnd-service .inob-mb-24 { margin-bottom: 24px; }
#sub-rnd-service .inob-mt-32 { margin-top: 32px; }

/* ================================================================
   협업 프로세스 — 동적 탭 밖의 단일 번호 목록
   ================================================================ */
#sub-rnd-service .inob-collaboration-flow {
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--inob-line);
    list-style: none;
    counter-reset: collaboration-step;
}
#sub-rnd-service .inob-collaboration-flow li {
    position: relative;
    padding: 16px 0 16px 48px;
    border-bottom: 1px solid var(--inob-line);
    color: var(--inob-ink);
    line-height: 1.65;
    counter-increment: collaboration-step;
}
#sub-rnd-service .inob-collaboration-flow li::before {
    content: "0" counter(collaboration-step);
    position: absolute;
    top: 18px;
    left: 0;
    color: var(--inob-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}

#sub-rnd-service .inob-editorial-media {
    transform: translateY(22px);
}
#sub-rnd-service .inob-rnd-media-context {
    margin: 16px 0 0;
    color: var(--inob-muted);
    font-size: 12.5px;
    line-height: 1.65;
}

/* ================================================================
   반응형
   ================================================================ */
@media (max-width: 576px) {
    #sub-rnd-service .inob-stats.is-3 { --inob-stats-col: 1; }
    #sub-rnd-service .inob-editorial-media { transform: none; }
    #sub-rnd-service .inob-collaboration-flow { margin-top: 22px; }
    #sub-rnd-service .inob-rnd-service-panel { padding: 12px; }
    #sub-rnd-service-tabs { gap: 6px; padding: 6px; }
    #sub-rnd-service-tabs > li > button {
        min-height: 52px;
        padding: 9px 10px;
        font-size: 14px;
    }
    #sub-rnd-service .gw-tab-content { padding: 18px 0 0; }
    #sub-rnd-service .gw-tab-content .inob-feature { padding: 18px; }
}