/* v-197 — 급여 작성 Claude 작업 진행 막대(창 대신 그 칸 안) · 급여 준비하기 · 검토 · 근태 판독 */
.p197{--p197-v:#7A5AF8;--p197-v2:#2E90FA;--p197-ink:#101828;--p197-ink3:#475467;--p197-ink4:#4D5869;--p197-bg:#F8F7FF;--p197-bg2:#F2EFFF;--p197-line:#E2DCFD;--p197-trk:#E9E5FD;--p197-strong:#5925DC;--p197-chip:#FFFFFF;
  position:relative;margin-top:10px;padding:12px 14px 11px;border-radius:14px;border:1px solid var(--p197-line);background:linear-gradient(180deg,var(--p197-bg),var(--p197-bg2));
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px -18px rgba(89,37,220,.55);color:var(--p197-ink);font-size:13px;line-height:1.45;overflow:hidden}
.p197-h{display:flex;align-items:center;gap:10px;min-width:0}
.p197-orb{position:relative;width:22px;height:22px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.p197:not(.ok):not(.bad) .p197-orb{background:conic-gradient(from 0deg,var(--p197-v),var(--p197-v2),#22CCEE,var(--p197-v));animation:p197spin 1.1s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
.p197-lb{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--p197-ink);overflow-wrap:anywhere}
.p197-pc{flex:none;font-size:15px;font-weight:800;color:var(--p197-strong);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.p197-tr{position:relative;height:8px;margin-top:9px;border-radius:99px;background:var(--p197-trk);overflow:hidden}
.p197-fill{position:absolute;left:0;top:0;bottom:0;width:4%;border-radius:99px;background:linear-gradient(90deg,var(--p197-v),var(--p197-v2));transition:width .5s cubic-bezier(.3,.8,.4,1);overflow:hidden}
.p197-fill::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.30) 0 8px,rgba(255,255,255,0) 8px 16px);background-size:32px 100%;animation:p197flow .9s linear infinite}
.p197-ft{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:7px;font-size:12px;color:var(--p197-ink3)}
.p197-tm{font-variant-numeric:tabular-nums}
.p197-left{font-weight:700;color:var(--p197-strong);font-variant-numeric:tabular-nums}
.p197-left:empty{display:none}
.p197-sub{margin-left:auto;padding:2px 9px;border-radius:99px;background:var(--p197-chip);border:1px solid var(--p197-line);color:var(--p197-strong);font-weight:600;font-size:11.5px;white-space:nowrap}
.p197-sub[hidden]{display:none}
.p197-note{margin:6px 0 0;font-size:11.5px;line-height:1.55;color:var(--p197-ink4)}
.p197.slow .p197-left{color:#B54708}
.p197.ok{--p197-line:#ABEFC6;--p197-bg:#F6FEF9;--p197-bg2:#ECFDF3;--p197-strong:#067647;--p197-trk:#D1FADF}
.p197.ok .p197-orb{background:#17B26A}
.p197.ok .p197-fill{background:#17B26A}
.p197.ok .p197-fill::after{display:none}
.p197.bad{--p197-line:#FECDCA;--p197-bg:#FFFBFA;--p197-bg2:#FEF3F2;--p197-strong:#B42318;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.p197.bad .p197-h{flex:1 1 260px}
.p197.bad .p197-orb{background:#D92D20}
.p197.bad .p197-lb{color:#B42318;font-weight:700}
.p197-act{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
@keyframes p197spin{to{transform:rotate(360deg)}}
@keyframes p197flow{to{background-position:-32px 0}}
@media (prefers-reduced-motion:reduce){.p197:not(.ok):not(.bad) .p197-orb,.p197-fill::after{animation:none}.p197-fill{transition:none}}
@media (max-width:760px){.p197{padding:11px 12px 10px}.p197-sub{margin-left:0}.p197-lb{font-size:13px}}
:root[data-theme="dark"] .p197{--p197-ink:#EEF2F8;--p197-ink3:#C3CAD7;--p197-ink4:#A3ADBE;--p197-bg:#1B1736;--p197-bg2:#17142E;--p197-line:#3E3475;--p197-trk:#2C2654;--p197-strong:#C3B5FD;--p197-chip:#221D42;box-shadow:none}
:root[data-theme="dark"] .p197.ok{--p197-bg:#0E2A1E;--p197-bg2:#0B2419;--p197-line:#1F5C40;--p197-trk:#174230;--p197-strong:#75E0A7}
:root[data-theme="dark"] .p197.bad{--p197-bg:#2D1514;--p197-bg2:#271211;--p197-line:#6E2A26;--p197-strong:#FDA29B}
:root[data-theme="dark"] .p197.bad .p197-lb{color:#FDA29B}
:root[data-theme="dark"] .p197.slow .p197-left{color:#FDB022}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .p197{--p197-ink:#EEF2F8;--p197-ink3:#C3CAD7;--p197-ink4:#A3ADBE;--p197-bg:#1B1736;--p197-bg2:#17142E;--p197-line:#3E3475;--p197-trk:#2C2654;--p197-strong:#C3B5FD;--p197-chip:#221D42;box-shadow:none}
  :root:not([data-theme="light"]) .p197.ok{--p197-bg:#0E2A1E;--p197-bg2:#0B2419;--p197-line:#1F5C40;--p197-trk:#174230;--p197-strong:#75E0A7}
  :root:not([data-theme="light"]) .p197.bad{--p197-bg:#2D1514;--p197-bg2:#271211;--p197-line:#6E2A26;--p197-strong:#FDA29B}
  :root:not([data-theme="light"]) .p197.bad .p197-lb{color:#FDA29B}
  :root:not([data-theme="light"]) .p197.slow .p197-left{color:#FDB022}
}