/* 전자결재 화면 — base.css 의 CSS 변수를 사용한다 (색상 하드코딩 금지) */

.nx-nav {
    display: flex; align-items: center; gap: 24px;
    padding: 12px 24px; border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}
.nx-brand { font-weight: 700; font-size: 15px; color: hsl(var(--foreground)); text-decoration: none; }
.nx-nav-links { display: flex; gap: 16px; }
.nx-nav-links a { font-size: 14px; color: hsl(var(--muted-foreground)); text-decoration: none; }
.nx-nav-links a:hover { color: hsl(var(--foreground)); }
.nx-user { margin-left: auto; font-size: 13px; color: hsl(var(--muted-foreground)); }
.nx-badge {
    margin-left: 6px; padding: 2px 8px; border-radius: 999px;
    background: hsl(var(--muted)); font-size: 12px;
}

.nx-main { max-width: 1080px; margin: 0 auto; padding: 24px; }
.nx-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nx-header h1 { font-size: 20px; margin: 0; }
.nx-header-actions { margin-left: auto; display: flex; gap: 8px; }
.nx-subhead { font-size: 15px; margin: 24px 0 8px; }
.nx-note { font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
.nx-doc-no { font-size: 13px; color: hsl(var(--muted-foreground)); }

.nx-messages { margin-bottom: 16px; }
.nx-message {
    padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 6px;
    background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.nx-errors {
    padding: 12px 16px; margin-bottom: 16px; border-radius: 6px;
    border: 1px solid hsl(var(--destructive)); background: hsl(var(--destructive) / 0.08);
    font-size: 14px;
}
.nx-errors ul { margin: 6px 0 0 18px; }
.nx-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; border: 1px solid hsl(var(--border)); }
.nx-alert-warn { background: hsl(var(--muted)); }
.nx-alert-danger { border-color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.08); }
.nx-alert-note { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 4px; }

.nx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nx-table th, .nx-table td { border: 1px solid hsl(var(--border)); padding: 8px 10px; text-align: left; }
.nx-table thead th { background: hsl(var(--muted)); font-weight: 600; font-size: 13px; }
.nx-right { text-align: right; }
.nx-center { text-align: center; }
.nx-empty { text-align: center; color: hsl(var(--muted-foreground)); padding: 24px; }
.nx-row-deleted { opacity: 0.55; text-decoration: line-through; }
.nx-rev { margin-left: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }

.nx-status { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: hsl(var(--muted)); white-space: nowrap; }
.nx-status-approved { background: hsl(142 70% 92%); }
.nx-status-rejected, .nx-status-deleted { background: hsl(var(--destructive) / 0.15); }
.nx-status-submitted, .nx-status-director_approved, .nx-status-delete_requested { background: hsl(48 96% 89%); }
.nx-action-approve { color: hsl(142 60% 30%); }
.nx-action-reject { color: hsl(var(--destructive)); }

.nx-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 14px; border-radius: 6px; border: 1px solid hsl(var(--border));
    background: hsl(var(--card)); color: hsl(var(--foreground));
    font-size: 14px; cursor: pointer; text-decoration: none;
}
.nx-btn:hover { background: hsl(var(--muted)); }
.nx-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.nx-btn-primary:hover { opacity: 0.9; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.nx-btn-danger { border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); }
.nx-btn-ghost { background: transparent; }

.nx-action-panel {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 14px 16px; margin-bottom: 20px;
    border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card));
}
.nx-inline-form { display: flex; gap: 6px; align-items: center; }
.nx-inline-form input[type="text"] {
    padding: 7px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 14px; min-width: 200px;
}

.nx-form { max-width: 100%; }
.nx-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.nx-field-row { display: flex; gap: 16px; }
.nx-field-row .nx-field { flex: 1; }
.nx-field label { font-size: 13px; color: hsl(var(--muted-foreground)); }
.nx-field input {
    padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 14px;
}
.nx-field-check { justify-content: flex-end; }
.nx-req { color: hsl(var(--destructive)); }
.nx-actions { display: flex; gap: 8px; margin-top: 20px; }
.nx-table-form input { width: 100%; padding: 6px 8px; border: 1px solid hsl(var(--border)); border-radius: 4px; font-size: 14px; }

/* 종이 양식 재현 — docs/reference/expense-form-layout.md 기준 */
.nx-paper { padding: 28px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); }
.nx-paper-title { text-align: center; font-size: 24px; letter-spacing: 0.5em; margin: 0 0 20px; }
.nx-approval-box { width: 100%; border-collapse: collapse; text-align: center; font-size: 12px; margin-bottom: 16px; }
.nx-approval-box td { border: 1px solid hsl(var(--border)); padding: 5px 8px; }
.nx-box-label { background: hsl(var(--muted)); font-weight: 500; }
.nx-sign { height: 46px; vertical-align: middle; }
.nx-sign-at { font-size: 10px; color: hsl(var(--muted-foreground)); }
.nx-pending { color: hsl(var(--muted-foreground)); }
.nx-paper-fields { font-size: 14px; line-height: 1.9; margin-bottom: 12px; }
.nx-paper-fields p { margin: 0; }
.nx-label { display: inline-block; min-width: 68px; font-weight: 600; }
.nx-label-inline { margin-left: 20px; min-width: auto; }
.nx-vat { margin-left: 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.nx-item-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nx-item-table th, .nx-item-table td { border: 1px solid hsl(var(--border)); padding: 7px 9px; }
.nx-item-table thead th { background: hsl(var(--muted)); font-size: 12px; }
.nx-total-row { font-weight: 600; }
.nx-attach { margin-top: 12px; font-size: 14px; }
.nx-audit { margin-top: 24px; font-size: 13px; }
.nx-audit summary { cursor: pointer; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }