/*
 * 근태관리 명세서 모달 본문 B안 «계산 흐름» (2026-10-01 · 샘플 sample/payslip-modal/body-b.html 확정) — .pf-*
 * 계약 기본 → 근태 반영 → 이번 달 항목 = 세전 → 4대보험 → 세금 = 실지급. 파셜 = attendance_payslip/_flow(+_flow_row)
 */
.pf { --pf-ch: var(--ord-accent); --pf-ch2: var(--ord-accent-strong); --pf-ln: var(--ord-line); --pf-band: var(--ord-band); --pf-tx: var(--ord-text); --pf-mu: var(--ord-text-3); --pf-mu2: var(--ord-text-4);
      --pf-neg: var(--ord-tint-red-fg); --pf-ed: var(--ord-tint-amber-fg); color: var(--pf-tx); font-size: 13px; }
.pf-h { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ord-text-3); margin-bottom: 12px; }
.pf-h h3 { margin: 0; font-size: 18px; font-weight: 800; border-left: 4px solid var(--pf-ch); padding-left: 10px; line-height: 1.2; }
.pf-h p { margin: 5px 0 0 14px; font-size: 12px; color: var(--pf-mu); }
.pf-h p b { color: var(--pf-tx); } .pf-h p span { color: var(--pf-mu2); }
.pf-sp { flex: 1; }
.pf-pills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.pf-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pf-ln); color: var(--pf-ch); background: var(--pf-band); white-space: nowrap; }
.pf-pill.is-ed { border-color: var(--ord-tint-amber-line); color: var(--pf-ed); background: var(--ord-surface-2); }
.pf-pill.is-ok { border-color: var(--ord-tint-green-line); color: var(--ord-tint-cyan-fg); background: var(--ord-tint-green-bg); }

.pf-pg { display: grid; grid-template-columns: auto 1fr 110px auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ord-tint-amber-line); background: var(--ord-tint-amber-bg); border-radius: 10px; margin-bottom: 10px; font-size: 12px; color: var(--ord-tint-amber-fg); }
.pf-pg i { height: 6px; border-radius: 999px; background: var(--ord-tint-amber-line); position: relative; overflow: hidden; }
.pf-pg i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--ord-solid-amber); border-radius: 999px; }
.pf-pg small { font-variant-numeric: tabular-nums; }

/* 흐름 막대 */
.pf-wf { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 140px; padding-top: 6px; border-bottom: 1px solid var(--pf-ln); }
.pf-wf div { position: relative; }
/* 막대 색(10/1 다크 정비) — 진한 색을 표면에 섞어 «두 테마 모두 중간 톤». 기준·차감·가산은 옅게, 세전=차콜, 실지급=가장 진하게 강조.
   tint-*-line(다크에선 선 색이라 막대가 사라짐)·accent(다크에서 밝아져 눈부심)는 막대에 쓰지 않는다. */
.pf-wf i { position: absolute; left: 12%; right: 12%; bottom: var(--lo); height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--ord-solid-blue) 32%, var(--ord-surface)); }
.pf-wf i.is-neg { background: color-mix(in srgb, var(--ord-solid-red) 45%, var(--ord-surface)); } .pf-wf i.is-pos { background: color-mix(in srgb, var(--ord-solid-green) 55%, var(--ord-surface)); } .pf-wf i.is-tot { background: var(--ord-head-bg); } .pf-wf i.is-fin { background: color-mix(in srgb, var(--ord-head-bg) 70%, var(--ord-accent)); }
.pf-wf b { position: absolute; left: 0; right: 0; bottom: calc(var(--top) + 3px); text-align: center; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-wfl { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font-size: 11px; color: var(--pf-mu); text-align: center; margin: 4px 0 6px; }

.pf-calc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 12px; background: var(--pf-band); border: 1px solid var(--pf-ln); border-radius: 10px; font-size: 12px; }
.pf-calc b { color: var(--pf-ch); } .pf-calc span, .pf-calc small { color: var(--pf-mu); }
.pf-calc label { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; cursor: pointer; }
.pf-calc input { accent-color: var(--pf-ch); }

/* 단계 */
.pf-stp { margin-top: 14px; }
.pf-sh { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--pf-ch); padding-bottom: 5px; border-bottom: 1px solid var(--pf-ln); }
.pf-sh i { font-style: normal; width: 19px; height: 19px; border-radius: 50%; background: var(--ord-head-bg); color: var(--ord-on-solid); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; align-self: center; flex: none; }
.pf-sh small { font-weight: 500; color: var(--pf-mu2); font-size: 11px; }
.pf-lg { display: grid; grid-template-columns: minmax(0, 1fr) 110px 100px; gap: 10px; align-items: baseline; }
.pf-lh { font-size: 10.5px; color: var(--pf-mu2); padding: 3px 6px 0; }
.pf-lh span:nth-child(n+2) { text-align: right; }
.pf-ln { padding: 7px 6px; border-bottom: 1px solid var(--ord-line-soft); border-radius: 6px; }
.pf-ln.is-click { cursor: pointer; }
.pf-ln.is-click:hover { background: var(--ord-surface-2); }
.pf-ln.is-info .pf-l { color: var(--pf-mu); }
.pf-l { color: var(--ord-text-2); min-width: 0; }
.pf-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-v.is-neg { color: var(--pf-neg); }
.pf-run { text-align: right; color: var(--pf-mu2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pf-b { font-size: 11px; color: var(--pf-mu2); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; }
.pf-tg { font-style: normal; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--ord-band); color: var(--pf-mu); margin-left: 5px; vertical-align: 1px; }
.pf-tg.is-tf { background: var(--ord-tint-green-bg); color: var(--ord-tint-cyan-fg); } .pf-tg.is-auto { background: var(--pf-band); color: var(--pf-ch); } .pf-tg.is-man { background: var(--ord-surface-2); color: var(--pf-ed); }
.pf-ln.is-ed { box-shadow: inset 3px 0 0 var(--pf-ed); background: var(--ord-surface-2); }
.pf-ln.is-ed .pf-v { color: var(--pf-ed); }
.pf-lnk { border: 0; background: none; color: var(--pf-ch); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }
.pf-lnk.is-ed { color: var(--pf-ed); }
.pf-dates { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pf-dates[hidden] { display: none; }
.pf-dchip { font: inherit; font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--pf-ln); background: var(--ord-panel); color: var(--pf-ch); cursor: pointer; }
.pf-dchip:hover { background: var(--pf-band); }
.pf-empty { margin: 6px; font-size: 11.5px; color: var(--pf-mu2); }
.pf-subt { display: grid; grid-template-columns: minmax(0, 1fr) 110px 100px; gap: 10px; padding: 8px 6px; background: var(--pf-band); border-radius: 8px; font-weight: 800; margin-top: 8px; }
.pf-subt span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.pf-subt small { font-weight: 500; color: var(--pf-mu2); font-size: 11px; margin-left: 8px; }
.pf-why { border: 1px dashed var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); border-radius: 9px; padding: 8px 10px; font-size: 12px; line-height: 1.6; margin-top: 8px; }
.pf-why b { margin-right: 4px; } .pf-why .pf-lnk { font-size: 12px; font-weight: 700; }

/* 줄 편집기 */
.pf-ed { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 7px; padding: 9px; background: var(--pf-band); border: 1px solid var(--pf-ln); border-radius: 9px; cursor: default; }
.pf-ed[hidden] { display: none; }
.pf-ed label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--pf-mu); flex: 1 1 140px; min-width: 0; }
.pf-ed input, .pf-ed select { height: 30px; border: 1px solid var(--pf-ln); border-radius: 7px; padding: 0 9px; font: inherit; font-size: 12.5px; background: var(--ord-panel); color: var(--pf-tx); min-width: 0; width: 100%; box-sizing: border-box; }
.pf-ed input:focus, .pf-ed select:focus { outline: none; border-color: var(--pf-ch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ord-accent) 13%, transparent); }
.pf-in { position: relative; display: flex; align-items: center; gap: 4px; }
.pf-in b { color: var(--pf-neg); }
.pf-in input { text-align: right; padding-right: 24px; font-weight: 700; }
.pf-in i { position: absolute; right: 8px; font-style: normal; color: var(--pf-mu2); font-size: 11.5px; }
.pf-ed-note { flex: 1 1 120px; font-size: 11px; color: var(--pf-mu2); align-self: center; }
.pf-ed-act { display: flex; gap: 5px; }

/* 실지급 */
.pf-net { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px 18px; border-radius: 12px; background: var(--ord-head-bg); color: var(--ord-on-solid); }
.pf-net div { flex: 1; } .pf-net span { font-size: 13px; font-weight: 700; } .pf-net small { display: block; font-size: 11px; opacity: .8; margin-top: 2px; }
.pf-net b { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-net em { font-style: normal; font-size: 11.5px; background: rgba(255,255,255,0.13); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pf-foot { margin: 10px 0 0; font-size: 11px; color: var(--pf-mu2); }
.pf.is-lock .pf-ln { cursor: default; }

@media (max-width: 700px) {
  .pf-lg, .pf-subt { grid-template-columns: minmax(0, 1fr) 96px 0; }
  .pf-run { display: none; }
  .pf-pg { grid-template-columns: 1fr auto; } .pf-pg i { grid-column: 1 / -1; }
}