/* ==========================================================================
   proc-flow.css — 공정 흐름도(설비 배관) 공통 컴포넌트 스타일
   사용: mon_operation · mon_energy · ai_simulation · mst_equipment
   구조/색상만 담당. 배관 <path> 자체는 common/js/proc-flow.js 가 SVG 로 그린다.
   (proc-flow.js 를 삭제하면 설비 이미지 정적 나열로 자연스럽게 되돌아감)
   ========================================================================== */

:root {
  --stream-feed: #9aa7b5;  --stream-gas:  #1fa463;  --stream-gas-hi: #8fe9bd;  --stream-cool: #1e5f9e;  --stream-cond: #38b6e8;  --stream-sulf: var(--energy-fuel);}

.op-flow-scroll { overflow-x: auto; }

.pflow { position: relative; display: flex; align-items: stretch; gap: 0; padding-bottom: 34px; }
.pflow--2row { flex-direction: column; gap: var(--s8); }
.pflow--2row .pflow__row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); align-items: stretch; }
.pflow--2row .pflow__row .pflow__stage { min-width: 0; }
/* 스트림 배관 오버레이 — 전체 pflow 덮고 JS(drawFlow)가 픽셀 좌표로 경로 draw (1:1 viewBox) */
.pflow__pipes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
/* 편집 모드: 좌표 점을 설비 이미지(z-index:2)·정보 카드(z-index:10) 위로 올려 드래그 가능하게.
   "좌표 저장" 후 pf-editing 이 제거되면 오버레이가 다시 이미지 뒤로 내려감(운영 배치). */
.pflow.pf-editing .pflow__pipes { z-index: 20; }

.lg-feed { background: var(--stream-feed); }
.lg-gas  { background: var(--stream-gas); }
.lg-cond { background: var(--stream-cond); }
.lg-sulf { background: var(--stream-sulf); }

.pflow__stage { flex: 1 1 0; min-width: 118px; display: flex; flex-direction: column; gap: 8px; transition: opacity var(--d-base); }
.pflow__fig { position: relative; z-index: 2; height: 210px; display: flex; align-items: flex-end; justify-content: center; padding: 2px; }
.pflow__fig img { max-height: 100%; max-width: 100%; object-fit: contain; }
/* 집진/사이클론만 설비 높이 축소 + 상단 정렬 (fig 높이는 210px 유지 → pflow__box 수평 정렬 보존) */
.pflow__fig--cyclone img { height: 130px; align-self: flex-start; }
.pflow__stage .proc-head { min-height: 32px; display: flex; align-items: center; justify-content: center; }
.pflow__head { height: 50px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; }
.pflow__head .proc-head { padding: 0; line-height: 1.25; }
.pflow__gutter { height: 56px; flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; }
.pflow__drain { position: relative; z-index: 10; }
.pflow__box { position: relative; z-index: 10; margin-inline: 5px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; }
.pflow__box > span { display: flex; flex-direction: column; line-height: 1.15; }
.pflow__box i { font-style: normal; font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; }
.pflow__box b { font-size: var(--fs-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.pflow__box b small { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; margin-left: 3px; }

@media (prefers-reduced-motion: reduce) { .pf-marker { display: none; } }

.pflow.is-anomaly .pflow__stage:not(.is-warn):not(.is-danger) { opacity: .35; }

/* Anomaly Mode: Dim the entire pipeline and moving markers overlay regardless of warning status */
.pflow.is-anomaly .pflow__pipes {
  opacity: 0.25;
  transition: opacity var(--d-base);
}