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

/* 좌측 사이드바 + 본문 2단 레이아웃 */
.nx-layout { display: flex; min-height: 100vh; margin: 0; }

.nx-side {
    flex: 0 0 220px; display: flex; flex-direction: column;
    padding: 20px 16px; border-right: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}
.nx-brand {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 12px; color: hsl(var(--muted-foreground)); text-decoration: none; line-height: 1.3;
}
.nx-brand strong { font-size: 16px; color: hsl(var(--foreground)); }

.nx-side-user {
    margin: 20px 0 16px; padding: 12px; border-radius: 8px;
    background: hsl(var(--muted)); font-size: 13px;
}
.nx-side-name { font-weight: 600; font-size: 14px; }
.nx-side-position { color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.nx-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
            background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }

.nx-side-nav { display: flex; flex-direction: column; gap: 2px; }
.nx-side-nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; border-radius: 6px; font-size: 14px;
    color: hsl(var(--muted-foreground)); text-decoration: none;
}
.nx-side-nav a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.nx-side-nav a.is-active {
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 500;
}
.nx-count {
    min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
    font-size: 11px; font-weight: 600;
    background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%));
}
.nx-side-nav a.is-active .nx-count { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.nx-side-sep { height: 1px; margin: 8px 4px; background: hsl(var(--border)); }

.nx-side-logout { margin-top: auto; padding-top: 16px; }
.nx-side-logout button {
    width: 100%; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
    border: 1px solid hsl(var(--border)); background: transparent; color: hsl(var(--muted-foreground));
}
.nx-side-logout button:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* 좁은 화면 — 사이드바를 상단 블록으로 접는다 (내용이 잘리지 않게) */
@media (max-width: 768px) {
    .nx-layout { flex-direction: column; }
    .nx-side { flex: none; border-right: none; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 10px; }
    /* 메뉴를 칩 형태로 — 세로 나열이 화면 30% 를 먹던 것 (UI 감사 2026-09-02) */
    .nx-side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .nx-side-nav a { padding: 6px 10px; font-size: 13px; border: 1px solid hsl(var(--border)); border-radius: 999px; }
    .nx-side-nav a.is-active::before { display: none; }
    .nx-side-sep { display: none; }
    .nx-side-logout { margin-top: 12px; padding-top: 0; }
    .nx-side-logout button { width: auto; padding: 6px 14px; }
    /* 표는 가로 스크롤 — 컬럼이 글자 단위로 쪼개지지 않게 최소 폭 보장 */
    .nx-table-wrap .nx-table { min-width: 640px; }
    .nx-table-wrap .nx-table td, .nx-table-wrap .nx-table th { white-space: nowrap; }
    .nx-table-wrap .nx-table-form { min-width: 760px; }
    .nx-form-sheet { font-size: 11px; }
    .nx-header { flex-wrap: wrap; gap: 10px; }
    .nx-header h1 { font-size: 20px; }
    .nx-header-actions { flex-wrap: wrap; }
}

/* 표 래퍼 — 좁은 화면에서 표 자체가 스크롤되게 (페이지가 가로로 늘어나지 않게) */
.nx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.nx-main { flex: 1; min-width: 0; max-width: 1080px; 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; word-break: keep-all; text-wrap: pretty; }
.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-alert-info { background: hsl(var(--primary) / 0.06); border-color: hsl(var(--primary) / 0.35); }
/* 실물 이관 문서의 결재칸 — 시스템 결재 기록이 없음을 «이관» 으로 표기 (스펙 36절) */
.nx-imported { font-size: 11px; letter-spacing: 0.1em; border: 1px dashed hsl(var(--border)); padding: 1px 6px; border-radius: 3px; }

.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; word-break: keep-all; }
/* 목록 표 열 폭 — 건명(nx-col-name)만 남은 폭을 다 쓰고, 문서번호·유형·기안자·금액·상태·날짜·버튼은 한 줄로 (2026-09-04 화면 확인) */
.nx-table .nx-col-name { width: 100%; }
.nx-table .nx-col-no, .nx-table .nx-col-type, .nx-table .nx-col-author, .nx-table .nx-col-amount,
.nx-table .nx-col-status, .nx-table .nx-col-date, .nx-table .nx-col-action { white-space: nowrap; }
/* 행이 없을 때도 머리글이 읽히게 — 열별 최소 폭 */
.nx-table .nx-col-no { min-width: 150px; }
.nx-table .nx-col-type { min-width: 72px; }
.nx-table .nx-col-author { min-width: 64px; }
.nx-table .nx-col-amount { min-width: 88px; }
.nx-table .nx-col-status { min-width: 96px; }
.nx-table .nx-col-date { min-width: 96px; }
.nx-table .nx-col-action { text-align: center; }
.nx-table .nx-col-action .nx-btn { padding: 4px 10px; font-size: 13px; }
.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-pdf-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nx-pdf-control .nx-pdf-disabled,
.nx-pdf-control .nx-pdf-disabled:hover {
    background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
    border-color: hsl(var(--border)); cursor: not-allowed; opacity: 1;
}
.nx-pdf-note { color: hsl(var(--muted-foreground)); font-size: 12px; max-width: 300px; }

.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; }
/* 부가세 3상태 라디오 — 한 줄로 (스펙 7절) */
#vat-mode { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
#vat-mode label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: inherit; }
#vat-mode > label:first-child { font-size: 13px; color: hsl(var(--muted-foreground)); }
#vat-mode small { color: hsl(var(--muted-foreground)); }
#vat-row td { color: hsl(var(--muted-foreground)); }
.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-pending { color: hsl(var(--muted-foreground)); }

.nx-total-row { font-weight: 600; }

.nx-audit { margin-top: 24px; font-size: 13px; }
.nx-audit summary { cursor: pointer; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }

/* 출장복명서 — 라벨/값 2열 표 */

.nx-field textarea {
    padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px;
    font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical;
}
.nx-field input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* 월별 현황 */
.nx-month-nav { display: flex; align-items: center; gap: 8px; }
.nx-month-label { font-size: 15px; font-weight: 600; min-width: 110px; text-align: center; }
.nx-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.nx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.nx-card { padding: 14px 16px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); }
.nx-card-label { font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.nx-card-label small { font-weight: 400; }
.nx-card-value { font-size: 24px; font-weight: 700; }
.nx-card-value span { font-size: 13px; font-weight: 400; color: hsl(var(--muted-foreground)); margin-left: 3px; }
.nx-card-amount { grid-column: span 2; }
.nx-table-narrow { max-width: 320px; }
.nx-table-narrow th { background: hsl(var(--muted)); text-align: left; }

/* 미로그인 소개 화면 */
.nx-intro { max-width: 640px; margin: 0 auto; padding: 48px 24px; }
.nx-intro h1 { font-size: 26px; margin: 0 0 4px; }

/* 직원별 문서 — 선택된 행 강조 */
.nx-row-selected { background: hsl(var(--muted)); }
.nx-row-selected td { font-weight: 500; }
.nx-inline-form input[type="month"] {
    padding: 7px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 14px;
}

/* 1차 승인자 선택 */
.nx-approver-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.nx-approver {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 14px; border: 1px solid hsl(var(--border)); border-radius: 8px;
    background: hsl(var(--card)); font-size: 14px;
}
.nx-approver:hover { background: hsl(var(--muted)); }
.nx-approver:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--muted)); }
.nx-approver-name { font-weight: 600; }
.nx-approver-meta { font-size: 12px; color: hsl(var(--muted-foreground)); }

/* 문서함 전체/내 기안분 토글 */
.nx-toggle { display: inline-flex; border: 1px solid hsl(var(--border)); border-radius: 6px; overflow: hidden; }
.nx-toggle a {
    padding: 8px 14px; font-size: 14px; text-decoration: none;
    color: hsl(var(--muted-foreground)); background: hsl(var(--card));
}
.nx-toggle a:hover { background: hsl(var(--muted)); }
.nx-toggle a.is-active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 500; }

/* 첨부 */
.nx-count-plain { font-size: 13px; color: hsl(var(--muted-foreground)); font-weight: 400; }
.nx-attach-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.nx-attach {
    position: relative; width: 150px; border: 1px solid hsl(var(--border));
    border-radius: 8px; overflow: hidden; background: hsl(var(--card));
}
.nx-attach-link { display: block; height: 110px; background: hsl(var(--muted)); }
.nx-attach-link img { width: 100%; height: 110px; object-fit: cover; display: block; }
.nx-attach-icon {
    display: flex; align-items: center; justify-content: center; height: 110px;
    font-size: 15px; font-weight: 700; color: hsl(var(--muted-foreground));
}
.nx-attach-meta { padding: 8px 10px; }
.nx-attach-name { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-attach-sub { font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.nx-attach-del {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; line-height: 1;
    border: none; border-radius: 50%; cursor: pointer;
    background: hsl(var(--destructive)); color: #fff; font-size: 14px;
}
.nx-attach-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nx-file-input, .nx-attach-form input[type="file"] { font-size: 13px; }

/* ── 공문서 격자표 — 화면 미리보기용 (인쇄와 같은 골격, 색만 화면 변수) ── */
.nx-form-sheet { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; background: hsl(var(--card)); }
.nx-form-sheet th, .nx-form-sheet td { border: 1px solid hsl(var(--border)); padding: 7px 10px; vertical-align: middle; }
.nx-form-sheet th { background: hsl(var(--muted)); text-align: center; font-weight: 600; white-space: nowrap; }
.nx-sheet-title {
    text-align: center; font-size: 22px; font-weight: 700;
    letter-spacing: 0.3em; text-indent: 0.3em; padding: 14px 8px;
}
.nx-sheet-title-sub small {
    display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.05em; text-indent: 0;
    color: hsl(var(--muted-foreground)); margin-top: 3px;
}
.nx-appr-head { text-align: center; font-size: 12px; background: hsl(var(--muted)); padding: 4px; line-height: 1.3; }
.nx-appr-head small { display: block; font-size: 10px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.nx-appr-cell { text-align: center; height: 48px; font-size: 12px; }
.nx-appr-cell i { display: block; font-style: normal; font-size: 10px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.nx-amount-cell { font-size: 16px; font-weight: 700; }
.nx-amount-cell small { font-size: 12px; font-weight: 400; color: hsl(var(--muted-foreground)); margin-left: 8px; }
.nx-section { text-align: center; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em; background: hsl(var(--muted)); }
.nx-item-row td { height: 26px; }
.nx-blank td { color: hsl(var(--muted-foreground)); opacity: 0.5; }
.nx-total-row td { font-weight: 700; background: hsl(var(--muted)); }
.nx-closing { text-align: center; padding: 16px 8px 12px; line-height: 1.9; }
.nx-closing p { margin: 0; }
.nx-closing-date { margin: 8px 0 !important; }
.nx-applicant { font-weight: 600; }
.nx-bir-sec { font-weight: 700; background: hsl(var(--muted)); padding: 6px 10px; }
.nx-longtext { vertical-align: top; line-height: 1.8; height: 60px; }
.nx-note-inline { font-size: 12px; color: hsl(var(--muted-foreground)); font-weight: 400; }

/* ── B.I.R. 섹션 사진 — 화면 미리보기 (인쇄와 같은 골격) ── */
.nx-sec-body { display: flex; gap: 20px; align-items: flex-start; }
.nx-sec-text { flex: 1 1 auto; min-width: 0; }
.nx-photos { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; max-width: 55%; }
.nx-photo { margin: 0; width: 150px; }
.nx-photo img { width: 150px; max-height: 160px; object-fit: contain; display: block;
    border: 1px solid hsl(var(--border)); border-radius: 4px; }
.nx-photo figcaption { font-size: 11px; text-align: center; color: hsl(var(--muted-foreground));
    margin-top: 4px; line-height: 1.4; overflow-wrap: break-word; }
.nx-attach-section { color: hsl(var(--primary)); }
.nx-photo-field { margin-bottom: 14px; }
.nx-photo-field > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.nx-caption-slots { margin-top: 6px; display: grid; gap: 4px; }
.nx-caption-slot { display: flex; gap: 8px; align-items: center; }
.nx-caption-filename { font-size: 12px; color: hsl(var(--muted-foreground));
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-caption-slot input { flex: 1; padding: 6px 10px; border: 1px solid hsl(var(--border));
    border-radius: 6px; font-size: 13px; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.nx-attach-form select, .nx-attach-form input[type="text"] {
    padding: 6px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px;
    font-size: 13px; background: hsl(var(--background)); color: hsl(var(--foreground)); }

/* 섹션 사진 미리보기 썸네일 (기안 폼 — objectURL 로컬 렌더) */
.nx-caption-thumb { width: 72px; height: 54px; object-fit: cover; flex-shrink: 0;
    border: 1px solid hsl(var(--border)); border-radius: 4px; background: hsl(var(--muted)); }

/* 보류 (스펙 24) — 상태 기계 밖의 플래그라 별도 뱃지·배너 */
.nx-status-hold { background: hsl(38 92% 90%); color: hsl(28 74% 30%); }
.nx-hold-banner { background: hsl(38 92% 95%); border: 1px solid hsl(38 80% 78%);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }

/* 발표자료 표지 파일 목록 */
.nx-file-list { margin: 0; padding-left: 18px; }
.nx-file-list li { line-height: 1.9; }

/* 시험의뢰 결과 대기 (스펙 27) */
.nx-status-await { background: hsl(199 89% 92%); color: hsl(201 90% 27%); }
.nx-result-register { margin-top: 18px; }

/* 승인자 선택창 (스펙 17절 — 상신 시 modal) */
.nx-approver-dialog { border: 1px solid hsl(var(--border)); border-radius: 12px;
    padding: 22px 26px; max-width: 420px; width: 90vw; background: hsl(var(--card));
    color: hsl(var(--foreground)); box-shadow: 0 20px 50px rgb(0 0 0 / 0.2);
    /* 전역 리셋이 dialog UA 기본(margin:auto 중앙 정렬)을 지우므로 명시한다 */
    position: fixed; inset: 0; margin: auto; height: fit-content; }
.nx-approver-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.nx-approver-dialog .nx-subhead { margin-top: 0; }
.nx-approver-error { font-size: 13px; margin: 8px 0 0; }
.nx-dialog-actions { display: flex; gap: 8px; margin-top: 16px; }

/* 문서함 초록 배지 — «내 기안이 승인됨» (결재함 빨간 배지와 대칭, 스펙 13.2) */
.nx-count-done { background: hsl(142 71% 35%); }
.nx-side-nav a.is-active .nx-count-done { background: hsl(var(--card)); color: hsl(142 71% 30%); }

/* ── 공문 — 서신 레이아웃 (화면 미리보기) ── */
.nx-letter { font-size: 14px; line-height: 1.8; padding: 20px 28px; background: hsl(var(--card));
    border: 1px solid hsl(var(--border)); border-radius: 8px; }
.nx-letter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.nx-letter-meta { margin: 0; flex: 1; }
.nx-letter-meta div { display: flex; gap: 12px; margin: 0 0 6px; }
.nx-letter-meta dt { width: 84px; flex: 0 0 84px; color: hsl(var(--muted-foreground)); }
.nx-letter-meta dt::after { content: ' :'; }
.nx-letter-meta dd { margin: 0; }
.nx-receipt-box { border-collapse: collapse; font-size: 11px; width: 260px; color: hsl(var(--muted-foreground)); }
.nx-receipt-box th, .nx-receipt-box td { border: 1px solid hsl(var(--border)); padding: 4px 6px; text-align: center; height: 24px; font-weight: 400; }
.nx-letter-subject { border-bottom: 2px solid hsl(var(--foreground)); padding: 8px 0; margin-top: 8px; font-weight: 600; }
.nx-letter-subject span { color: hsl(var(--muted-foreground)); font-weight: 400; margin-right: 12px; }
.nx-letter-subject span::after { content: ' :'; }
.nx-letter-body { padding: 24px 16px; min-height: 200px; white-space: normal; }
.nx-letter-attach { padding: 0 16px 16px; color: hsl(var(--muted-foreground)); }
.nx-letter-sender { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; margin: 28px 0 8px; }
.nx-letter-sender small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: hsl(var(--muted-foreground)); }

/* 문서함 검색 (스펙 29절) */
.nx-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.nx-search-input { flex: 1 1 320px; min-width: 240px; padding: 8px 12px; border: 1px solid hsl(var(--border));
    border-radius: 8px; font-size: 14px; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.nx-search select { padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 8px; font-size: 13px;
    background: hsl(var(--background)); color: hsl(var(--foreground)); }
.nx-search-result { font-size: 13px; color: hsl(var(--muted-foreground)); }
.nx-search[data-document-box-filter] > .nx-date-range { flex-basis: 100%; }
.nx-list-filters { flex: 1 1 100%; width: 100%; min-width: 0; border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 0 14px; }
.nx-list-filters > summary { min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-list-filters > summary span { display: inline-block; margin-left: 8px; font-size: 13px; color: hsl(var(--primary)); }
.nx-list-filters[open] > summary { margin-bottom: 8px; }
.nx-list-filters .nx-search-filters { padding-bottom: 14px; }

/* 회수 (스펙 31) — 기안자 손에 돌아간 초안 */
.nx-status-draft { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); }

/* 서명·도장 (스펙 35) */
.nx-sig { display: block; max-height: 44px; max-width: 110px; margin: 0 auto 2px; object-fit: contain; }
.nx-appr-cell small { display: block; font-size: 10px; color: hsl(var(--muted-foreground)); }
.nx-sig-letter { display: inline-block; vertical-align: middle; max-height: 56px; max-width: 64px; margin-left: 6px; }
.nx-sig-panel { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.nx-sig-current, .nx-sig-form { flex: 1 1 320px; max-width: 480px; }
.nx-sig-preview { display: block; max-height: 120px; max-width: 260px; object-fit: contain; padding: 12px;
    border: 1px dashed hsl(var(--border)); border-radius: 8px; background: #fff; }
.nx-reauth input[type="password"] { width: 150px; }

/* AI 초안 채우기 패널 (스펙 38절) */
.nx-ai-draft { border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 12px 16px 14px; margin-bottom: 20px; background: hsl(var(--primary) / 0.04); }
.nx-ai-draft [hidden] { display: none !important; }
.nx-ai-draft .nx-subhead { margin-top: 0; }
.nx-ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nx-ai-row .nx-ai-document { flex: 1 1 240px; min-width: 0; max-width: 100%; padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font: inherit; }
.nx-ai-row .js-ai-instruction { flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 14px; }
.nx-ai-status { margin-top: 10px; font-size: 13px; padding: 8px 10px; border-radius: 6px; background: hsl(var(--muted)); }
.nx-ai-status.is-error { border: 1px solid hsl(var(--destructive)); background: hsl(var(--destructive) / 0.08); }
.nx-ai-status.is-warn { background: hsl(48 100% 92%); }
.nx-ai-status ul { margin: 4px 0 0 18px; }
.nx-ai-warn { margin: 6px 0 0; font-weight: 600; }
/* AI 가 채운 칸 — 사용자가 고치면 해제된다 */
.nx-ai-filled, .nx-table-form input.nx-ai-filled { background: hsl(48 100% 88%); }
label.nx-ai-filled { background: hsl(48 100% 88%); border-radius: 4px; padding: 0 4px; }

/* AX팀 역할 보기 (스펙 39절) */
.nx-view-as { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nx-view-as-label { font-size: 11px; color: hsl(var(--muted-foreground)); width: 100%; }
.nx-view-as button { font: inherit; font-size: 12px; padding: 3px 8px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); cursor: pointer; }
.nx-view-as button.is-on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.nx-view-as-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 16px; border-radius: 6px;
    background: hsl(48 100% 90%); border: 1px solid hsl(45 90% 55%); font-size: 14px; }
.nx-view-as-banner .nx-inline-form button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; }

/* 과제(프로젝트) 연결 + 기간 필터 (스펙 40절) */
.nx-table .nx-col-project { min-width: 90px; max-width: 180px; }
/* 문서함 검색 — 1줄 검색어+버튼, 2줄 필터 (전체 폭). 버튼 하나만 다음 줄로 떨어지지 않게 */
.nx-search-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-search-range { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.nx-search-range-label { margin-right: 2px; }
.nx-search-range input[type="date"] { padding: 7px 8px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 13px; background: hsl(var(--card)); }
.nx-monthly-filter { margin-bottom: 8px; }
.nx-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.nx-table-project { max-width: 480px; }
.nx-project-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.nx-project-label { font-size: 12px; letter-spacing: .08em; color: hsl(var(--muted-foreground)); }
.nx-project-form select { padding: 6px 8px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 13px; background: hsl(var(--card)); }
.nx-field-project select { padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; font-size: 14px; background: hsl(var(--card)); }
.nx-project-create { margin-bottom: 20px; }

/* 결재 안정화: 화면용 정보 위계, 작성 보호 및 좁은 화면 접근성 */
.nx-navigation-panel { display: flex; flex: 1; flex-direction: column; }
.nx-menu-toggle { display: none; }
.nx-skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%); background: hsl(var(--card)); padding: 12px; border: 2px solid hsl(var(--primary)); }
.nx-skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 3px; }
.nx-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.nx-template-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); text-decoration: none; }
.nx-template-card:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .04); }
.nx-template-card strong { font-size: 18px; }
.nx-template-card span { font-size: 14px; color: hsl(var(--muted-foreground)); line-height: 1.65; }
.nx-route-line { margin: 18px 0; padding: 14px 16px; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--primary) / .04); font-size: 14px; line-height: 1.7; }
.nx-actions { flex-wrap: wrap; }
.nx-btn { min-height: 40px; }
.nx-field { min-width: 0; }
.nx-field input, .nx-field textarea { min-width: 0; }
.nx-detail-header { align-items: flex-start; flex-wrap: wrap; }
.nx-detail-header h1 { font-size: 25px; line-height: 1.4; overflow-wrap: anywhere; }
.nx-detail-header .nx-status { margin-top: 5px; }
.nx-detail-header .nx-doc-no { margin: 0 0 6px; }
.nx-detail-links { margin: 0 0 18px; flex-wrap: wrap; }
.nx-document-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 20px; margin: 0 0 18px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; }
.nx-document-summary dt { color: hsl(var(--muted-foreground)); font-size: 12px; margin-bottom: 5px; }
.nx-document-summary dd { margin: 0; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.nx-document-summary small { font-size: 12px; font-weight: 400; }
.nx-summary-wide { grid-column: 1 / -1; }
.nx-decision { flex: 0 1 auto; }
.nx-decision[open] { flex-basis: 100%; }
.nx-decision > summary { width: fit-content; list-style: none; }
.nx-decision > summary::-webkit-details-marker { display: none; }
.nx-decision-form { max-width: 650px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 0 4px; }
.nx-decision-form label { width: 100%; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.nx-decision-form :is(textarea, input, select) { font: inherit; max-width: 100%; padding: 9px 10px; border: 1px solid hsl(var(--border)); border-radius: 6px; background: hsl(var(--card)); }
.nx-decision-form textarea { resize: vertical; width: 100%; line-height: 1.6; }
.nx-reauth input[type="password"] { width: min(100%, 320px); }
.nx-paper-details { margin: 20px 0; }
.nx-paper-details > summary { font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 10px; }
.nx-paper-details > summary .nx-note-inline { margin-left: 8px; }
.nx-paper-scroll { overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.nx-paper-scroll > .nx-form-sheet, .nx-paper-scroll > .nx-letter { min-width: 740px; }
.nx-paper-scroll .nx-form-sheet { font-size: 13px; }
.nx-secondary-menu { margin-top: 22px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
.nx-secondary-menu > summary { cursor: pointer; font-size: 14px; margin-bottom: 14px; }
.nx-archive-status { margin-top: 18px; padding: 12px 16px; font-size: 13px; border-radius: 8px; background: hsl(var(--muted)); line-height: 1.8; }
.nx-edit-attachments { margin: 0 0 18px; padding: 14px; border: 1px solid hsl(var(--border)); border-radius: 8px; }
.nx-edit-attachments summary { cursor: pointer; margin-bottom: 10px; }
.nx-edit-attachment { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; font-size: 13px; border-top: 1px solid hsl(var(--border)); }
.nx-edit-attachment a { overflow-wrap: anywhere; }
.nx-edit-attachment label { margin-left: auto; }
.nx-pagination { display: flex; justify-content: center; gap: 14px; align-items: center; margin: 24px 0; font-size: 13px; }
.nx-revision-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.nx-revision-picker label { font-size: 14px; }
.nx-revision-picker select { padding: 8px; border: 1px solid hsl(var(--border)); border-radius: 6px; }
.nx-comparison-table td { white-space: normal !important; min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
.nx-ai-draft > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.nx-ai-draft[open] > summary { margin-bottom: 12px; }
.nx-ai-comparison { display: grid; gap: 6px; margin: 12px 0; }
.nx-ai-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 6px; }
.nx-ai-choice input { margin-top: 4px; }
.nx-ai-choice span { overflow-wrap: anywhere; }
.nx-ai-choice strong, .nx-ai-choice span > span { display: block; }
.nx-ai-status > .nx-btn { margin: 4px 8px 0 0; }
.nx-status-working { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.nx-document-table .nx-col-name a { display: block; min-width: 160px; font-weight: 600; line-height: 1.5; }
.nx-attach-del { width: 32px; height: 32px; }
@media (max-width: 768px) {
    .nx-side { padding: 12px 16px; }
    .nx-mobile-bar { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 12px; }
    .nx-brand-logo { width: 100px; margin-bottom: 2px; }
    .nx-brand-sub { font-size: 10px; }
    .nx-menu-ready .nx-menu-toggle { display: inline-flex; }
    .nx-menu-ready .nx-navigation-panel { display: none; }
    .nx-menu-ready .nx-side.is-open .nx-navigation-panel { display: flex; }
    .nx-side-user { margin: 12px 0; }
    .nx-side-nav { display: grid; grid-template-columns: 1fr 1fr; }
    .nx-side-nav a { min-height: 40px; border-radius: 6px; }
    .nx-side-logout { align-self: flex-end; }
    .nx-main { padding: 18px 16px; }
    .nx-header h1 { font-size: 22px; }
    .nx-header-actions { margin-left: 0; }
    .nx-header-actions .nx-btn, .nx-actions .nx-btn { min-height: 44px; }
    .nx-field-row { flex-direction: column; gap: 0; }
    .nx-field input, .nx-field textarea, .nx-table-form input { font-size: 16px; }
    .nx-form input[type="file"] { max-width: 100%; }
    .nx-actions { gap: 8px; }
    .nx-actions .js-submit-approval { flex-basis: 100%; }
    .nx-document-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
    .nx-paper-details > summary .nx-note-inline { display: block; margin: 6px 0; }
    .nx-paper-scroll .nx-form-sheet th, .nx-paper-scroll .nx-form-sheet td { word-break: keep-all; }
    .nx-search-input { min-width: 0; flex: 1 1 180px; }
    .nx-search-filters select { flex: 1 1 100px; min-width: 0; max-width: 100%; }
    .nx-search-range { flex-wrap: wrap; }
    .nx-search-range input { max-width: 140px; }
    .nx-table-wrap:has(.nx-table-form)::before { content: '품목 표를 좌우로 밀어 모든 항목을 입력하세요.'; display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
    .nx-table-wrap .nx-document-table { display: block; min-width: 0; }
    .nx-document-table thead { display: none; }
    .nx-document-table tbody { display: grid; gap: 12px; }
    .nx-document-table tr { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 15px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); }
    .nx-document-table td { border: 0; padding: 0; width: auto !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; font-size: 13px; }
    .nx-document-table td[data-label]::before { content: attr(data-label) ' '; color: hsl(var(--muted-foreground)); font-size: 11px; margin-right: 3px; }
    .nx-document-table .nx-col-name { order: -2; flex-basis: 100%; }
    .nx-document-table .nx-col-name a { font-size: 16px; min-width: 0; }
    .nx-document-table .nx-col-no { order: -1; flex-basis: 100%; color: hsl(var(--muted-foreground)); }
    .nx-document-table .nx-col-status { flex-basis: 100%; line-height: 1.9; }
    .nx-document-table .nx-col-action { flex-basis: 100%; margin-top: 4px; }
    .nx-document-table .nx-col-project { display: none; }
    .nx-project-form { flex-wrap: wrap; }
    .nx-ai-row .js-ai-instruction { min-width: 0; flex-basis: 100%; }
    .nx-ai-row .js-ai-file { max-width: 100%; }
    .nx-template-grid { grid-template-columns: 1fr; }
    .nx-edit-attachment label { margin-left: 0; }
    .nx-pagination { gap: 8px; }
}
.nx-alert code, .nx-note code { overflow-wrap: anywhere; }
.nx-mobile-shortcuts, .nx-mobile-reviewbar { display: none; }
.nx-review-panel { display: block; padding: 22px 24px; border-radius: 12px; }
.nx-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.nx-review-heading h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.nx-review-heading p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.5; }
.nx-review-tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 4px; border-radius: 9px; background: hsl(var(--muted)); }
.nx-review-panel [hidden] { display: none !important; }
.nx-review-tabs button { min-width: 76px; min-height: 40px; padding: 6px 16px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: hsl(var(--muted-foreground)); font: inherit; font-size: 14px; cursor: pointer; }
.nx-review-tabs button[aria-selected="true"] { color: hsl(var(--primary)); background: hsl(var(--card)); border-color: hsl(var(--border)); font-weight: 700; box-shadow: 0 1px 3px #0001; }
.nx-review-tabs [data-review-tab="reject"][aria-selected="true"] { color: hsl(var(--destructive)); }
.nx-review-tabs button:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.nx-review-panel.has-tabs .nx-decision > summary { display: none; }
.nx-review-panel .nx-decision-form { max-width: none; padding: 0; gap: 8px; }
.nx-review-panel:not(.has-tabs) .nx-decision-form { padding: 12px 0; }
.nx-review-panel:not(.has-tabs) .nx-decision { margin-top: 12px; }
.nx-review-panel .nx-decision-form label { font-size: 13px; font-weight: 600; gap: 8px; }
.nx-review-approve-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; }
.nx-review-panel .nx-review-approve-row input { width: 100%; min-width: 0; min-height: 44px; font-size: 15px; padding: 10px 12px; border-radius: 8px; }
.nx-review-panel :is(input, textarea):focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .1); }
.nx-review-panel .nx-decision-form textarea { padding: 10px 12px; font-weight: 400; border-radius: 8px; }
.nx-review-panel .nx-decision-form .nx-btn { min-height: 44px; min-width: 110px; padding: 10px 20px; border-radius: 8px; font-size: 14px; }
.nx-review-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.nx-review-form-footer span { color: hsl(var(--muted-foreground)); font-size: 12px; line-height: 1.5; }
@media (max-width: 768px) {
    .nx-review-panel { padding: 18px 16px; }
    .nx-review-heading { display: block; margin-bottom: 16px; }
    .nx-review-tabs { margin-top: 14px; width: 100%; }
    .nx-review-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px; }
    .nx-review-panel .nx-review-approve-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .nx-review-panel .nx-review-approve-row input { font-size: 16px; min-height: 48px; }
    .nx-review-panel .nx-decision-form .nx-btn { width: auto; min-width: 90px; min-height: 48px; padding: 10px 14px; }
    .nx-review-form-footer { align-items: flex-end; }
    .nx-mobile-shortcuts { display: flex; gap: 8px; margin-top: 10px; }
    .nx-mobile-shortcuts a { flex: 1; min-height: 44px; display: flex; gap: 6px; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
    .nx-mobile-shortcuts a[aria-current="page"] { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 700; }
    .nx-review-ready .nx-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .nx-review-ready .nx-mobile-reviewbar { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: 0 -4px 18px #0001; }
    .nx-mobile-reviewbar .nx-btn { min-height: 48px; }
    .nx-review-ready .nx-mobile-reviewbar.is-at-panel { display: none; }
    .nx-decision { scroll-margin-top: 12px; }
    .nx-decision-form :is(input, textarea, select) { font-size: 16px; min-height: 44px; }
    .nx-decision-form .nx-btn { min-height: 48px; width: 100%; }
    .nx-search :is(input:not([type=hidden]), select), .nx-search .nx-btn { font-size: 16px; min-height: 44px; }
    .nx-document-table .nx-col-name a { min-height: 44px; display: flex; align-items: center; }
    .nx-document-table .nx-col-amount { font-size: 16px; font-weight: 700; }
    .nx-pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}