/* 단가작업 (Piecework Close) — 외주 단가작업 검수·정산 준비 작업대 */
:root { --bg: var(--surface-bg, #f4f6f2); --panel: var(--surface-panel, #ffffff); --line: var(--surface-line, #d9dce1); --ink: var(--surface-ink, #25272b); --ink2: var(--surface-muted, #60656d); --acc: var(--surface-primary, #343942); --teal: var(--surface-accent-alt, #147d78); --warn: var(--surface-accent, #d06c24); --danger: #b91c1c; --r: 8px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.55 system-ui, "Malgun Gothic", sans-serif; }
body[data-surface-state="compiled"] { font-family: system-ui, "Malgun Gothic", sans-serif; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 16px 20px 4px; }
h1 { margin: 0; font-size: 20px; } h1 span { color: var(--ink2); font-weight: 400; font-size: 14px; }
h2 { font-size: 16.5px; margin: 0 0 10px; } h3 { font-size: 14.5px; margin: 10px 0 6px; }
.tag { margin: 0; color: var(--ink2); font-size: 13px; flex: 1 1 260px; }
.lang button { border: 1px solid var(--line); background: var(--panel); color: var(--ink2); padding: 4px 10px; font: inherit; cursor: pointer; border-radius: var(--r); min-height: 32px; }
.lang button[aria-current="true"] { color: var(--teal); border-color: var(--teal); font-weight: 700; }
.state { margin: 6px 20px; min-height: 22px; font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; }
.state.error { color: var(--danger); font-weight: 600; } .state.saved { color: var(--teal); font-weight: 600; }
body[data-surface-topology] .surface-shell { display: block; }
body[data-surface-state="compiled"] main.bench { max-width: 1320px; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); gap: 16px; padding: 8px 20px 32px; align-items: start; }
.board, .attendance, .record { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-width: 0; margin-bottom: 16px; }
.board { border-top: 3px solid var(--teal); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 10px; align-items: end; }
.form-actions { display: flex; align-items: flex-end; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
label.check-line { flex-direction: row; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
input, select { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 7px 10px; font: inherit; border-radius: var(--r); min-width: 0; }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
button, .ghost-link { border: 1px solid var(--acc); background: var(--acc); color: #fff; padding: 7px 13px; font: inherit; cursor: pointer; border-radius: var(--r); min-height: 38px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.ghost, .ghost-link { background: var(--panel); color: var(--acc); }
button.primary { background: var(--teal); border-color: var(--teal); font-weight: 700; }
button.danger { color: var(--danger); border-color: var(--danger); background: var(--panel); }
button.small { min-height: 30px; padding: 3px 9px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.batch-list { display: flex; flex-direction: column; gap: 10px; }
.batch-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: #fbfcfa; cursor: pointer; transition: border-color 0.12s; }
.batch-card.active { border: 2px solid var(--teal); background: #f0fdfa; }
.batch-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.batch-order { font-weight: 700; font-size: 15px; color: var(--ink); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #e2e8f0; color: #334155; }
.badge.SETTLED { background: #dcfce7; color: #166534; }
.badge.INSPECTION_COMPLETED { background: #dbeafe; color: #1e40af; }
.badge.REWORK_PENDING { background: #ffedd5; color: #9a3412; }
.tally-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; text-align: center; font-size: 12px; }
.tally-cell { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px; }
.tally-cell strong { display: block; font-size: 14px; color: var(--ink); }
.tally-cell.ok strong { color: var(--teal); }
.tally-cell.warn strong { color: var(--warn); }
.tally-cell.bad strong { color: var(--danger); }
.sub-card { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-top: 12px; background: #fafbfc; }
.sub-card.settled-box { border-color: #86efac; background: #f0fdf4; }
.amount-highlight { font-size: 18px; font-weight: 700; color: #166534; margin: 4px 0; }
.code-line { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--ink2); word-break: break-all; margin: 2px 0; }
.round-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.round-list li { border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0 10px; }
.disclaimer-box { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-top: 10px; }
.disclaimer-box p { margin: 4px 0; }
.fine { font-size: 12.5px; color: var(--ink2); overflow-wrap: anywhere; }
.file { position: relative; border: 1px solid var(--acc); color: var(--acc); padding: 7px 13px; cursor: pointer; flex-direction: row; font-size: 14px; border-radius: var(--r); min-height: 38px; align-items: center; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.surface-identity-band { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 20px; font-size: 12px; color: var(--ink2); }
.space-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 20px 4px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.space-bar-label { font-weight: 700; font-size: 13px; color: var(--ink); }
.space-select { min-width: 150px; }
.plan-chip { font-size: 13px; font-weight: 600; color: var(--ink2); margin-left: auto; }
.space-readonly { width: 100%; margin: 4px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }
.modal-overlay { border: 1px solid var(--line); border-radius: var(--r); padding: 0; max-width: 520px; width: calc(100% - 24px); background: var(--panel); color: var(--ink); }
.modal-overlay::backdrop { background: rgba(28, 35, 43, 0.45); }
.modal-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modal-title { margin: 0; font-size: 18px; }
.plan-list { margin: 0; padding-left: 18px; font-size: 14px; }
.plan-list li { margin-bottom: 6px; }
.modal-note { margin: 0; font-size: 13px; color: var(--ink2); }
.site-footer { padding: 14px 20px 24px; font-size: 13px; color: var(--ink2); border-top: 1px solid var(--line); }
.site-footer a { color: var(--teal); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .bench { grid-template-columns: 1fr; padding: 8px 12px 28px; }
  header { padding: 12px 12px 4px; } .state { margin: 6px 12px; }
  .space-bar { margin: 6px 12px 4px; }
}
@media print { header nav, button, .file, form, .space-bar, .site-footer { display: none !important; } .bench { display: block; } }