/* ============================================================
   051_isotope_usage.css
   03_clab / 051_isotope_usage.html 페이지 전용 SVG 도식 스타일
   - RI 구매절차 흐름도 (.ri-purchase-flow)
   - 방사성폐기물 폐기절차 흐름도 (.ri-waste-flow)
   토큰: --color-*, --fw-bold, --radius-*, --fs-* 사용 / hex·px 하드코딩 없음
   ============================================================ */

/* ── 흐름도 SVG 공통 컨테이너 ──────────────────────────────── */
.content-block__image svg.ri-purchase-flow,
.content-block__image svg.ri-waste-flow {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--color-white);
}

/* figure 내부 여백 — content-block__image--full(padding:0) 오버라이드 */
.clab-flow-figure {
    padding: var(--space-6);
    background-color: var(--color-white);
}

/* ============================================================
   1. RI 구매절차 흐름도
   ============================================================ */

/* 노드 박스 — 텍스트는 SUIT 굵게 */
.ri-purchase-flow__node text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
}

.ri-purchase-flow__node--primary rect {
    fill: var(--color-primary-500);
}
.ri-purchase-flow__node--primary text {
    fill: var(--color-white);
}

.ri-purchase-flow__node--soft rect {
    fill: var(--color-primary-100);
}
.ri-purchase-flow__node--soft text {
    fill: var(--color-primary-900);
}

.ri-purchase-flow__node--softer rect {
    fill: var(--color-primary-50);
}
.ri-purchase-flow__node--softer text {
    fill: var(--color-primary-900);
}

.ri-purchase-flow__node--dark rect {
    fill: var(--color-primary-900);
}
.ri-purchase-flow__node--dark text {
    fill: var(--color-white);
}

.ri-purchase-flow__node--outline rect {
    fill: var(--color-white);
    stroke: var(--color-primary-500);
    stroke-width: 2;
    stroke-dasharray: 4 3;
}
.ri-purchase-flow__node--outline text {
    fill: var(--color-primary-900);
}

/* 연결선 */
.ri-purchase-flow__line {
    fill: none;
    stroke: var(--color-primary-500);
    stroke-width: 1.5;
}
.ri-purchase-flow__arrow-head {
    fill: var(--color-primary-500);
}

/* 메인 굵은 화살표 (실험자 → RI 관련실험) */
.ri-purchase-flow__line--main {
    fill: none;
    stroke: var(--color-primary-700);
    stroke-width: 6;
    stroke-linecap: round;
}
.ri-purchase-flow__arrow-head--main {
    fill: var(--color-primary-700);
}

/* 단계 번호 배지 */
.ri-purchase-flow__step circle {
    fill: var(--color-primary-900);
}
.ri-purchase-flow__step text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    fill: var(--color-white);
}

/* 단계 설명 텍스트 */
.ri-purchase-flow__step-label {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    fill: var(--color-gray-800);
}
.ri-purchase-flow__step-label--muted {
    fill: var(--color-gray-600);
}

/* ============================================================
   2. 방사성폐기물 폐기절차 흐름도
   ============================================================ */

.ri-waste-flow__node text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
}

.ri-waste-flow__node--soft rect { fill: var(--color-primary-100); }
.ri-waste-flow__node--soft text { fill: var(--color-primary-900); }
/* 흰 배경 + 파란 아웃라인 (방사성 동위원소 관련실험) */
.ri-waste-flow__node--outline rect {
    fill: var(--color-white);
    stroke: var(--color-primary-500);
    stroke-width: 1.5;
}
.ri-waste-flow__node--outline text { fill: var(--color-primary-900); }
.ri-waste-flow__node--primary rect { fill: var(--color-primary-500); }
.ri-waste-flow__node--primary text { fill: var(--color-white); }
.ri-waste-flow__node--dark rect { fill: var(--color-primary-900); }
.ri-waste-flow__node--dark text { fill: var(--color-white); }

.ri-waste-flow__group {
    fill: var(--color-primary-25);
    stroke: var(--color-primary-100);
    stroke-width: 1.5;
}

.ri-waste-flow__category rect { fill: var(--color-primary-500); }
.ri-waste-flow__category text {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    fill: var(--color-white);
}

/* 자체폐기: 흰 배경 + primary-500 아웃라인 */
.ri-waste-flow__item--self rect { fill: var(--color-white); stroke: var(--color-primary-500); stroke-width: 1; }
.ri-waste-flow__item--self text { fill: var(--color-primary-900); }
/* 위탁폐기: primary-900 남색 배경 */
.ri-waste-flow__item--commission rect { fill: var(--color-primary-900); stroke: none; }
.ri-waste-flow__item--commission text { fill: var(--color-white); }
.ri-waste-flow__item text { font-family: var(--font-family); font-weight: var(--fw-bold); font-size: var(--fs-small); }

.ri-waste-flow__line { fill: none; stroke: var(--color-primary-500); stroke-width: 1.5; }
.ri-waste-flow__arrow-head { fill: var(--color-primary-500); }
.ri-waste-flow__branch { fill: none; stroke: var(--color-primary-300); stroke-width: 1; }

.ri-waste-flow__step-label {
    font-family: var(--font-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    fill: var(--color-gray-800);
}

.ri-waste-flow__legend text { font-family: var(--font-family); font-size: var(--fs-tiny); fill: var(--color-gray-700); }
.ri-waste-flow__legend-swatch--self { fill: var(--color-white); stroke: var(--color-primary-500); stroke-width: 1; }
.ri-waste-flow__legend-swatch--commission { fill: var(--color-primary-900); stroke: none; }

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 767px) {
    /* 좁은 화면: 흐름도를 통째로 축소(글자 가독성 저하)하는 대신
       최소 폭을 유지하고 가로 스크롤로 읽도록 처리 (표 .table-wrap과 동일 패턴) */
    .clab-flow-figure {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content-block__image svg.ri-purchase-flow {
        min-width: 600px;
    }
    .content-block__image svg.ri-waste-flow {
        min-width: 640px;
    }
}