/* ============================================================
   016_researcher_usage.css
   03_clab / 016_researcher_usage.html 페이지 전용
   - 연구자 구분 분기 다이어그램 (.researcher-flow SVG)
   토큰: --color-*, --fw-bold, --radius-*, --fs-small, --fs-tiny 사용
   ============================================================ */

/* ── figure 안 SVG 컨테이너 ── */
.clab-figure svg.researcher-flow {
    display: block;
    width: 100%;
    height: auto;
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

/* ── 노드 공통 텍스트 ── */
.researcher-flow__node text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    pointer-events: none;
}

/* 시작 노드 (연구자) — primary-900 배경 + 흰 텍스트 */
.researcher-flow__node--start rect {
    fill: var(--color-primary-900);
}
.researcher-flow__node--start text {
    fill: var(--color-white);
}

/* 질문 노드 — 흰색 배경 + primary-500 outline */
.researcher-flow__node--question rect {
    fill: var(--color-white);
    stroke: var(--color-primary-500);
    stroke-width: 2;
}
.researcher-flow__node--question text {
    fill: var(--color-primary-500);
}

/* 결과 노드 — primary-700 배경 + 흰 텍스트 */
.researcher-flow__node--result rect {
    fill: var(--color-primary-700);
}
.researcher-flow__node--result text {
    fill: var(--color-white);
}

/* ── 연결선·화살표 ── */
.researcher-flow__line {
    fill: none;
    stroke: var(--color-primary-500);
    stroke-width: 1.5;
}
.researcher-flow__arrow-head {
    fill: var(--color-primary-500);
}

/* ── 분기 라벨 (예 / 아니오) — pill 형태 (파란 배경 + 흰 텍스트) ── */
.researcher-flow__edge rect {
    fill: var(--color-primary-500);
    stroke: var(--color-primary-500);
    stroke-width: 1.5;
}
.researcher-flow__edge text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-tiny);
    fill: var(--color-white);
}

/* 반응형 */
@media (max-width: 767px) {
    .clab-figure svg.researcher-flow {
        max-width: 100%;
    }
}