/*
 * 근태관리 명세서 모달 A+ (2026-10-01 · 샘플 sample/payslip-modal/a2.html 확정) — .psm-*
 * 가운데 명세서(_attendance_payslip_breakdown) + 오른쪽 편집 서랍 + 직원 화면 미리보기(PC/모바일 틀, 본문 = payslips/previews/_page).
 */
.psm { --psm-ch: var(--ord-accent); --psm-line: var(--ord-line); --psm-band: var(--ord-band); --psm-mu: var(--ord-text-3); --psm-mu2: var(--ord-text-4);
       display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 100%; background: var(--ord-surface-2); font-size: 13px; }
.psm-main { min-width: 0; padding: 14px 16px 18px; }
.psm-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.psm-sp { flex: 1; }
.psm-hint { font-size: 11.5px; color: var(--psm-mu2); line-height: 1.6; margin: 0; }
.psm-hint b { color: var(--ord-text-2); }

.psm-steps { display: flex; align-items: center; font-size: 11.5px; flex-wrap: wrap; row-gap: 4px; }
.psm-steps span { display: inline-flex; align-items: center; gap: 5px; color: var(--psm-mu2); white-space: nowrap; }
.psm-steps i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 800; background: var(--ord-band); color: var(--ord-text-4); }
.psm-steps span.is-done { color: var(--ord-tint-cyan-fg); } .psm-steps span.is-done i { background: var(--ord-tint-green-bg); color: var(--ord-tint-cyan-fg); }
.psm-steps span.is-now { color: var(--psm-ch); font-weight: 700; } .psm-steps span.is-now i { background: var(--ord-head-bg); color: var(--ord-on-solid); }
.psm-steps em { width: 20px; height: 2px; background: var(--ord-line); margin: 0 5px; }
.psm-steps em.is-done { background: var(--ord-tint-green-line); }

.psm-paper { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 6px; box-shadow: 0 1px 3px rgba(15,23,42,.08); padding: 18px 20px; }
.psm-lock { background: var(--ord-tint-green-bg); border: 1px solid var(--ord-tint-green-line); color: var(--ord-tint-cyan-fg); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.psm-lock span { color: var(--ord-tint-cyan-fg); font-size: 11.5px; }

/* 직원 화면 미리보기 틀 */
.psm-emp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.psm-frame { margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 32px rgba(15,23,42,.2); background: var(--ord-surface-2); }
.psm-frame.is-pc { border: 1px solid var(--ord-line-2); }
.psm-frame.is-mo { width: 380px; border: 11px solid var(--ord-text-4); border-radius: 36px; }
.psm-chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--ord-line); border-bottom: 1px solid var(--ord-line-2); font-size: 11px; color: var(--psm-mu); }
.psm-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--ord-solid-red); }
.psm-chrome i:nth-child(2) { background: var(--ord-solid-amber); } .psm-chrome i:nth-child(3) { background: var(--ord-solid-green); }
.psm-chrome span { flex: 1; margin-left: 8px; height: 20px; border-radius: 6px; background: var(--ord-panel); display: flex; align-items: center; padding: 0 10px; }
.psm-frame.is-mo .psm-chrome { height: 22px; background: var(--ord-tooltip-bg); border: 0; justify-content: center; }
.psm-frame.is-mo .psm-chrome i, .psm-frame.is-mo .psm-chrome span { display: none; }
.psm-scr { height: 62vh; overflow: auto; }
.psm-frame.is-pc .psm-scr { overflow-x: hidden; }
.psm-frame.is-pc .psm-zoom { width: 1040px; } /* 배율 = payslip_modal#fitZoom */

/* 서랍 */
.psm-dr { border-left: 1px solid var(--psm-line); background: var(--ord-panel); display: flex; flex-direction: column; min-height: 0; }
.psm-tabs { display: flex; border-bottom: 1px solid var(--psm-line); flex: none; }
.psm-tabs button { flex: 1; border: 0; background: var(--ord-panel); padding: 10px 4px; font: inherit; font-size: 12px; color: var(--psm-mu); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.psm-tabs button.is-on { color: var(--psm-ch); font-weight: 700; border-bottom-color: var(--psm-ch); }
.psm-n { font-size: 10px; background: var(--ord-band); border-radius: 999px; padding: 0 6px; }
.psm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ord-solid-orange); }
.psm-pane { flex: 1; overflow: auto; padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; }
.psm-pane[hidden] { display: none; }
.psm-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ord-text-2); }
.psm-fld textarea { width: 100%; height: auto; padding: 7px 9px; font-family: inherit; }
.psm-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.psm-inline .awt-in { width: 140px; }
.psm-rows { display: flex; flex-direction: column; gap: 7px; }
.psm-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.psm-wide { width: 100%; justify-content: center; height: 34px; }
.psm-memo-ro { background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; min-height: 40px; }
.psm-radio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.psm-radio.is-dis { color: var(--psm-mu2); }
.psm-note { font-size: 11.5px; color: var(--ord-tint-amber-fg); line-height: 1.5; }

/* 사전확인 칸 */
.psm-pv { display: flex; flex-direction: column; gap: 10px; }
.psm-state { border-radius: 10px; padding: 9px 11px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.psm-state b { font-size: 13px; }
.psm-state.is-wait { background: var(--ord-tint-amber-bg); border: 1px solid var(--ord-tint-amber-line); color: var(--ord-tint-amber-fg); }
.psm-state.is-reply { background: var(--ord-tint-indigo-bg); border: 1px solid var(--ord-tint-blue-line); color: var(--ord-tint-indigo-fg); }
.psm-state.is-ok { background: var(--ord-tint-green-bg); border: 1px solid var(--ord-tint-green-line); color: var(--ord-tint-cyan-fg); }
.psm-memo { margin: 0; font-size: 12px; color: var(--ord-text-2); }
.psm-rq-list { border: 1px solid var(--ord-line-soft); border-radius: 10px; }
.psm-rq { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 8px 10px; font-size: 12px; border-top: 1px dashed var(--ord-line-soft); cursor: pointer; }
.psm-rq:first-child { border-top: 0; }
.psm-rq small { display: block; color: var(--psm-mu); font-size: 11px; }
.psm-pill { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); white-space: nowrap; }
.psm-pill.is-ok { background: var(--ord-tint-green-bg); color: var(--ord-tint-cyan-fg); }
.psm-impact { background: var(--ord-panel); border: 1px solid var(--ord-line-soft); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--psm-mu); display: flex; flex-direction: column; gap: 4px; }
.psm-impact div { display: flex; align-items: center; gap: 6px; }
.psm-impact span { flex: 1; }
.psm-impact b { color: var(--psm-ch); font-variant-numeric: tabular-nums; }
.psm-impact em { font-style: normal; font-weight: 800; } .psm-impact em.is-up { color: var(--ord-tint-cyan-fg); } .psm-impact em.is-down { color: var(--ord-tint-red-fg); }

@media (max-width: 900px) {
  .psm { grid-template-columns: 1fr; }
  .psm-dr { border-left: 0; border-top: 1px solid var(--psm-line); }
}