/* 재무 허브 정본 복제본 · 원본 finance-hub/public/design/process.css
   수정 금지: tools/sync-hub-design.mjs 로만 갱신한다. 급여 고유 규칙은 public/design/salary-*.css */
/* ══════════════════════════════════════════════════════════════════
   업무 · 데이터 지도 — 사이클 칸 · 데이터 흐름 열 · 신선도 표 (에이전트 허브 H1)

   쓰는 곳: public/views/process*.js
   ★ 종류(원천 · 파생 · 사람 처리 · 화면)는 **열 위치와 대문자 라벨**이 말한다. 색 면 · 좌측 컬러바를
     쓰지 않는다(불변 규칙 7). 상태는 칩 글자색만 쓴다.
   ★ 선택하면 앞뒤로 이어진 것만 남고 나머지는 흐려진다 — 강조는 굵기 · 괘선 진하기로.
   ══════════════════════════════════════════════════════════════════ */

/* ── 업무 흐름: 행 = 사이클, 열 = 종류 ───────────────────────────── */
.pm-grid{
  display:grid; grid-template-columns:minmax(calc(var(--sp-8) * 2), 0.8fr) repeat(5, minmax(calc(var(--sp-8) * 3), 1fr));
  border-top:1px solid var(--line); min-width:calc(var(--sp-8) * 20);
}
.pm-wrap{ overflow-x:auto; }
.pm-head{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
  padding:var(--sp-2) var(--sp-2); border-bottom:1px solid var(--line);
}
.pm-lane{
  padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--line); word-break:keep-all;
}
.pm-lane__name{ font-weight:700; color:var(--ink); }
.pm-lane__sub{ font-size:var(--fs-caption); color:var(--muted); margin-top:2px; }
.pm-lane__hub{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:0.08em; color:var(--brand); margin-top:var(--sp-1); }
.pm-cell{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-2); border-bottom:1px solid var(--line); border-left:1px solid var(--line-2);
}
.pm-mod{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-1);
  padding:var(--sp-2) var(--sp-3); word-break:keep-all; transition:opacity var(--dur-1) var(--ease);
}
.pm-mod:hover{ border-color:var(--line-3); }
.pm-mod.is-sel{ border-color:var(--ink); }
.pm-mod.is-dim{ opacity:0.32; }
.pm-mod__name{ font-weight:600; color:var(--ink); line-height:1.35; }
.pm-mod__pend{ font-size:var(--fs-caption); margin-top:var(--sp-1); font-variant-numeric:tabular-nums; }
.pm-mod__pend.lv-ok{ color:var(--muted); }
.pm-mod__pend.lv-info{ color:var(--faint); }
.pm-mod__pend.lv-warn{ color:var(--warning); font-weight:600; }
.pm-mod__pend.lv-bad{ color:var(--danger); font-weight:700; }

/* 선택 정보 줄 */
.pm-detail{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) 0; margin-bottom:var(--sp-3); border-bottom:1px solid var(--line); min-height:calc(var(--sp-8) * 1);
}
.pm-detail__title{ font-weight:700; color:var(--ink); }
.pm-detail__chain{ font-size:var(--fs-caption); color:var(--muted); word-break:keep-all; }

/* ── 데이터 흐름: 열 4개 + SVG 곡선 ───────────────────────────────── */
.df-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.df-bar .input{ max-width:calc(var(--sp-8) * 6); }
.df-canvas{ position:relative; overflow-x:auto; border-top:1px solid var(--line); }
/* 열 5개(출처 · 업로드 자료 · 자동 집계 · 사용 화면 · 에이전트). 배포된 에이전트가 없으면 에이전트 열을 빼고 4열(.df-cols--4, U6) */
.df-cols{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(5, minmax(calc(var(--sp-8) * 3.6), 1fr));
  column-gap:calc(var(--sp-8) * 1.2); padding:var(--sp-3) var(--sp-2); min-width:calc(var(--sp-8) * 24);
}
/* ── 열 종류 색 (2026-10-07 운영자 지시) ─────────────────────────────
   색은 «종류» 만 말한다(출처 · 업로드 · 집계 · 화면 · 에이전트). 상태(정상 · 지연)를 색 면으로 칠하지 않는다 —
   상태는 오른쪽 작은 글자가 말한다(불변 규칙 7). 진한 단색 대신 옅은 틴트 + 같은 계열 괘선으로,
   라이트 모드에서 글자 대비를 지킨다. 보라는 쓰지 않는다(§3). 아이콘 틴트 토큰을 그대로 쓴다. */
.df-col.k-system, .df-node.k-system{ --k:var(--c-slate); }
.df-col.k-upload, .df-node.k-upload{ --k:var(--c-azure); }
.df-col.k-derived, .df-node.k-derived{ --k:var(--c-amber); }
.df-col.k-screen, .df-node.k-screen{ --k:var(--c-green); }
.df-col.k-agent, .df-node.k-agent{ --k:var(--c-cyan); }
.df-col__head{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
  padding-bottom:var(--sp-2); margin-bottom:var(--sp-2); border-bottom:1px solid color-mix(in srgb, var(--k) 60%, var(--line));
}
.df-col__head::before{ content:''; width:var(--sp-2); height:var(--sp-2); border-radius:2px; background:var(--k); flex:none; }
.df-col__list{ display:flex; flex-direction:column; gap:var(--sp-1); }
.df-cols--4{ grid-template-columns:repeat(4, minmax(calc(var(--sp-8) * 3.6), 1fr)); min-width:calc(var(--sp-8) * 19); }
.df-node{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); width:100%;
  text-align:left; cursor:pointer; font:inherit; font-weight:600; color:var(--ink);
  background:color-mix(in srgb, var(--k) 13%, var(--surface));
  border:1px solid color-mix(in srgb, var(--k) 50%, var(--line)); border-radius:var(--r-1);
  padding:var(--sp-1) var(--sp-2); transition:opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* 한 줄 — 이름이 넘치면 말줄임, 전체 이름은 title · 아래 상세에 */
.df-node__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.df-node:hover{ border-color:var(--k); }
.df-node.is-sel{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.df-node.is-dim{ opacity:0.38; }
.df-node__sub{ font-size:var(--fs-caption); font-weight:500; color:var(--muted); white-space:nowrap; flex:none; }
.df-node__sub.lv-late{ color:var(--danger); font-weight:700; }
.df-node__sub.lv-due{ color:var(--warning); font-weight:600; }
.df-svg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.df-svg path{ fill:none; stroke:color-mix(in srgb, var(--ink) 28%, transparent); stroke-width:1; }
.df-svg path.is-hi{ stroke:var(--ink); stroke-width:2; }
.df-svg path.is-dim{ stroke:color-mix(in srgb, var(--ink) 8%, transparent); }
.df-info{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.df-info__title{ font-size:var(--fs-h3); font-weight:700; color:var(--ink); margin-bottom:var(--sp-2); }
.df-tables{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ── 미연결 ─────────────────────────────────────────────────────── */
.gp-why{ color:var(--body); word-break:keep-all; }
.gp-pattern{ font-size:var(--fs-caption); color:var(--muted); margin:var(--sp-1) 0 var(--sp-3); word-break:keep-all; }
.gp-count{ font-size:var(--fs-h2); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.gp-count.is-hit{ color:var(--danger); }
.gp-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-2); }

/* ── 데이터셋 표 — 열 너비 고정 (2026-10-07 U1) ─────────────────────
   자동 배치에서는 접히는 열(저장 테이블 · 사용 화면)의 남는 폭이 첫 열로 몰렸다. 업무 우선순위대로 고정하고,
   자료명 · 사용 화면만 남는 폭을 나눠 갖는다. */
.ds-table .table{ table-layout:fixed; width:100%; }
/* 고정 열 합이 947px — 좁은 화면에서 남는 두 열(자료명 · 사용 화면)이 86px 로 접혀 글자가 겹쳤다. 최소폭을 두고 .tablewrap 이 민다 */
@media (max-width:860px){ .ds-table .table{ min-width:calc(var(--sp-8) * 20); } }
.ds-table th:nth-child(1){ width:calc(var(--sp-8) * 3.2); }
.ds-table th:nth-child(3){ width:calc(var(--sp-8) * 2.2); }
.ds-table th:nth-child(4){ width:calc(var(--sp-8) * 3.2); }
.ds-table th:nth-child(5){ width:calc(var(--sp-8) * 2.4); }
.ds-table th:nth-child(6){ width:calc(var(--sp-8) * 3.8); }
.ds-table td{ word-break:keep-all; overflow-wrap:anywhere; vertical-align:top; }
.ds-why{ margin-top:var(--sp-1); font-size:var(--fs-caption); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-tables summary{ cursor:pointer; color:var(--body); font-size:var(--fs-caption); white-space:nowrap; }
.ds-tables[open] summary{ margin-bottom:var(--sp-1); }

/* 터치 — 흐름도 마디를 손가락 크기로 */
@media (hover:none){ .df-node{ min-height:34px; } }