/* 회사관리 > 알림발송 (.nd-*) — 2026-09-14 A+ 개편 (A-4 정돈형): 본문(세그먼트·KPI·표) · 발송 모달(밴드 4장·옵션 2묶음) · 수신현황(링·세그먼트·명단)
   규칙 10: 폼 컨트롤은 배경·글자색 함께. 세그먼트=.ord-seg(타이틀)/.ord-choice(폼 radio) · 스위치=.ord-switch 공용. */
.nd-page { }
/* 타이틀 행 = 계약서관리와 같은 골격(.cv2l-title / .cv2l-title-sp / .cv2l-btn-primary 재사용) — 세그먼트는 h1 과 같은 줄 */
.nd-title-row { margin-bottom: 14px; }
.nd-select { padding: 6px 9px; border: 1px solid var(--ord-line-2); border-radius: 8px; background: var(--ord-panel); color: var(--ord-text); font-size: 12px; }
.nd-btn { padding: 7px 14px; border: 1px solid var(--ord-line-2); border-radius: 8px; background: var(--ord-panel); color: var(--ord-text-2); font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.nd-btn:hover { background: var(--ord-surface-2); }
.nd-btn-primary { background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); border-radius: 999px; padding: 7px 16px; }
.nd-btn-primary:hover { background: color-mix(in srgb, var(--ord-head-bg) 85%, black); }
.nd-btn-danger { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-line); }
.nd-btn-warn { color: var(--ord-tint-amber-fg); border-color: var(--ord-tint-amber-line); background: var(--ord-tint-amber-bg); }
.nd-btn-sm { padding: 4px 10px; font-size: 11px; }
/* KPI */
.nd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.nd-kpi { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 10px; padding: 10px 12px; }
.nd-kpi-l { font-size: 11px; color: var(--ord-text-4); font-weight: 700; }
.nd-kpi-v { font-size: 20px; font-weight: 900; color: var(--ord-text); letter-spacing: -.02em; }
.nd-kpi-v small { font-size: 11px; color: var(--ord-text-4); font-weight: 600; margin-left: 3px; }
.nd-kpi-v.ok { color: var(--ord-tint-green-fg); } .nd-kpi-v.warn { color: var(--ord-tint-amber-fg); } .nd-kpi-v.conf { color: var(--ord-tint-indigo-fg); }
.nd-kpi-d { font-size: 10.5px; color: var(--ord-text-3); margin-top: 2px; }
/* 표 */
.nd-table-wrap { overflow-x: auto; border: 1px solid var(--ord-line); border-radius: 10px; background: var(--ord-panel); }
.nd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nd-table th { background: var(--ord-band); color: var(--ord-accent); font-weight: 800; font-size: 11.5px; padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--ord-line); }
.nd-table td { padding: 8px 10px; border-bottom: 1px solid var(--ord-line-soft); vertical-align: middle; }
.nd-table tbody tr { cursor: pointer; }
.nd-table tbody tr:hover td { background: var(--ord-surface-2); }
.nd-title { font-weight: 700; color: var(--ord-text); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.nd-sub { color: var(--ord-text-4); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.nd-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.nd-pill-ok { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); } .nd-pill-sch { background: var(--ord-tint-violet-bg); color: var(--ord-tint-violet-fg); } .nd-pill-off { background: var(--ord-band); color: var(--ord-text-3); }
.nd-pill-conf { background: var(--ord-solid-violet); color: var(--ord-on-solid); } .nd-pill-urg { background: var(--ord-badge); color: var(--ord-on-solid); } .nd-pill-warn { background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); } .nd-pill-resp { background: var(--ord-tint-indigo-bg); color: var(--ord-tint-indigo-fg); }
.nd-prog { display: flex; align-items: center; gap: 8px; }
.nd-bar { height: 6px; background: var(--ord-line); border-radius: 3px; overflow: hidden; min-width: 70px; flex: 1; }
.nd-bar > i { display: block; height: 100%; background: var(--ord-solid-green); border-radius: 3px; }
.nd-bar.warn > i { background: var(--ord-solid-amber); } .nd-bar.resp > i { background: var(--ord-solid-violet); }
.nd-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 800; color: var(--ord-tint-green-fg); white-space: nowrap; }
.nd-mono.warn { color: var(--ord-tint-amber-fg); } .nd-mono.resp { color: var(--ord-tint-indigo-fg); } .nd-mono span { color: var(--ord-line-2); font-weight: 600; }
.nd-hint { font-size: 11px; color: var(--ord-text-4); }
.nd-due-warn { color: var(--ord-tint-amber-fg); font-weight: 700; } .nd-due-over { color: var(--ord-tint-red-fg); font-weight: 700; }
.nd-empty { text-align: center; padding: 48px 20px; color: var(--ord-text-4); font-size: 13.5px; border: 1px dashed var(--ord-line); border-radius: 12px; background: var(--ord-panel); }
.nd-pager { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.nd-pager button { min-width: 30px; padding: 5px 9px; border: 1px solid var(--ord-line-2); background: var(--ord-panel); color: var(--ord-text-2); border-radius: 6px; font-size: 12px; cursor: pointer; }
.nd-pager button.is-on { border-color: var(--ord-head-bg); background: var(--ord-head-bg); color: var(--ord-on-solid); }
/* 발송 모달 — 밴드 카드 */
.nd-form { padding: 16px; background: var(--ord-surface-2); }
.nd-card { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.nd-card-band { background: var(--ord-band); border-bottom: 1px solid var(--ord-line); padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--ord-accent); display: flex; align-items: center; gap: 8px; }
.nd-card-band .nd-hint { margin-left: auto; font-weight: 500; }
.nd-card-body { padding: 12px; }
.nd-label { display: block; font-size: 12px; font-weight: 700; color: var(--ord-text-2); margin: 10px 0 5px; }
.nd-label:first-child { margin-top: 0; }
.nd-input { width: 100%; padding: 8px 10px; border: 1px solid var(--ord-line-2); border-radius: 8px; background: var(--ord-panel); color: var(--ord-text); font-size: 13px; box-sizing: border-box; }
.nd-input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
textarea.nd-input { min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.55; }
.nd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nd-dept-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.nd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--ord-line); border-radius: 14px; background: var(--ord-panel); color: var(--ord-text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.nd-chip:hover { background: var(--ord-surface-2); }
.nd-chip.is-on { background: var(--ord-head-bg); border-color: var(--ord-head-bg); color: var(--ord-on-solid); }
.nd-chip .nd-rm { color: var(--ord-text-4); font-weight: 800; margin-left: 2px; }
.nd-chip-in { width: 140px; padding: 4px 9px; font-size: 11.5px; border: 1px dashed var(--ord-line-2); border-radius: 14px; background: var(--ord-panel); color: var(--ord-text); }
.nd-member-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--ord-line); border-radius: 8px; background: var(--ord-panel); }
.nd-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ord-line-soft); cursor: pointer; font-size: 13px; }
.nd-member-row:hover { background: var(--ord-surface-2); }
.nd-member-row input { width: 16px; height: 16px; accent-color: var(--ord-accent); flex-shrink: 0; margin: 0; }
.nd-member-name { font-weight: 600; color: var(--ord-text); }
.nd-tag { font-size: 10.5px; color: var(--ord-text-3); background: var(--ord-band); padding: 1px 7px; border-radius: 8px; }
.nd-tag-dept { color: var(--ord-tint-cyan-fg); background: var(--ord-tint-cyan-bg); }
/* 옵션 2묶음 — 행(라벨+한 줄 힌트 | 컨트롤 고정폭) */
.nd-og { padding: 4px 0; }
.nd-og + .nd-og { border-top: 1px dashed var(--ord-line); margin-top: 4px; }
.nd-og-h { font-size: 10.5px; font-weight: 800; color: var(--ord-text-4); letter-spacing: .04em; padding: 6px 2px 2px; }
.nd-orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 38px; padding: 2px 2px; }
.nd-orow.sub { padding-left: 18px; position: relative; }
.nd-orow.sub::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 2px solid var(--ord-line); }
.nd-orow[hidden] { display: none; }
.nd-ol { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nd-ol b { font-size: 12.5px; color: var(--ord-text); white-space: nowrap; }
.nd-ol span { font-size: 11px; color: var(--ord-text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-oc { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.nd-oc.left { justify-content: flex-start; flex-wrap: wrap; }
.nd-oc .ord-choice.is-sm > label { padding: 4px 11px; font-size: 11.5px; }
.nd-oc .ord-switch-slider { background-color: var(--ord-line-2); }
.nd-oc .ord-switch input:checked + .ord-switch-slider { background-color: var(--ord-accent); }
.nd-due { display: flex; align-items: center; gap: 6px; }
.nd-due .nd-input { width: auto; padding: 6px 8px; }
/* 수신현황 */
.nd-rc { padding: 16px; background: var(--ord-surface-2); }
.nd-sum { display: flex; gap: 14px; align-items: center; }
.nd-ring { width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nd-ring > span { width: 64px; height: 64px; border-radius: 50%; background: var(--ord-panel); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: var(--ord-tint-green-fg); }
.nd-ring > span small { font-size: 9.5px; color: var(--ord-text-4); font-weight: 700; }
.nd-sum-t { font-size: 14px; font-weight: 800; color: var(--ord-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nd-sum-b { font-size: 12px; color: var(--ord-text-2); margin-top: 4px; white-space: pre-wrap; }
.nd-sum-m { font-size: 11px; color: var(--ord-text-4); margin-top: 6px; }
.nd-rc .nd-kpis { grid-template-columns: repeat(4, 1fr); }
.nd-segs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.nd-segs .nd-hint { margin-left: auto; }
.nd-mrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) 130px 150px; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--ord-line-soft); font-size: 12px; }
.nd-mrow[hidden] { display: none; }
.nd-mrow.is-pending { background: var(--ord-tint-amber-bg); }
.nd-mrow input { accent-color: var(--ord-accent); margin: 0; }
.nd-mrow .nd-name { font-weight: 700; color: var(--ord-text); }
.nd-mrow .nd-tm { font-size: 11px; color: var(--ord-text-4); text-align: right; }
.nd-memo { grid-column: 2 / 5; font-size: 11.5px; color: var(--ord-text-2); background: var(--ord-surface-2); border: 1px solid var(--ord-line); border-radius: 8px; padding: 5px 8px; margin-top: 2px; }
.nd-memo b { color: var(--ord-tint-indigo-fg); }
.nd-ans { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--ord-tint-indigo-bg); color: var(--ord-tint-indigo-fg); }
.nd-list-box { background: var(--ord-panel); border: 1px solid var(--ord-line); border-radius: 10px; padding: 4px 8px; max-height: 46vh; overflow-y: auto; }
@media (max-width: 768px) {
  .nd-kpis { grid-template-columns: repeat(2, 1fr); }
  .nd-orow { grid-template-columns: 1fr; gap: 6px; }
  .nd-oc { justify-content: flex-start; }
  .nd-mrow { grid-template-columns: 20px minmax(0, 1fr); }
  .nd-mrow .nd-tm, .nd-mrow .nd-ansc { grid-column: 2; text-align: left; }
  .nd-memo { grid-column: 2; }
}
/* ── 시스템관리 > 알림발송 (2026-09-14, .nd-sys-*) — 대상 3축 밴드 · 업체 선택 · 예상 인원 · 업체별 집계 ── */
.nd-tgt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; }
.nd-tgt[hidden] { display: none; }
.nd-pick { border: 1px solid var(--ord-line); border-radius: 8px; background: var(--ord-panel); max-height: 220px; overflow-y: auto; }
.nd-pick label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--ord-line-soft); font-size: 12.5px; cursor: pointer; }
.nd-pick label:last-child { border-bottom: 0; }
.nd-pick label:hover { background: var(--ord-surface-2); }
.nd-pick input { width: 15px; height: 15px; accent-color: var(--ord-accent); margin: 0; flex-shrink: 0; }
.nd-pick .nd-hint { margin-left: auto; white-space: nowrap; }
.nd-prev { background: var(--ord-accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.nd-prev b { font-size: 16px; color: var(--ord-accent-strong); }
.nd-prev .warn { color: var(--ord-tint-amber-fg); font-weight: 700; }
.nd-found { border: 1px solid var(--ord-line); border-radius: 8px; background: var(--ord-panel); max-height: 160px; overflow-y: auto; margin-top: 6px; }
.nd-found[hidden] { display: none; }
.nd-found button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--ord-line-soft); background: var(--ord-panel); color: var(--ord-text); font-size: 12.5px; text-align: left; cursor: pointer; }
.nd-found button:hover { background: var(--ord-surface-2); }
.nd-found button .nd-hint { margin-left: auto; }
.nd-brk { width: 100%; border-collapse: collapse; font-size: 12px; }
.nd-brk th { font-size: 10.5px; color: var(--ord-text-4); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ord-line); font-weight: 700; }
.nd-brk td { padding: 7px 8px; border-bottom: 1px solid var(--ord-line-soft); }
.nd-brk .nd-bar { width: 120px; display: inline-block; vertical-align: middle; }
/* 선택지 칩 안 메모 토글 (2026-09-14) — 없음(회색) → 선택(파랑) → 필수(주황) */
.nd-chip-memo { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: var(--ord-on-solid); border-radius: 10px; font-size: 10px; padding: 0 6px; line-height: 16px; cursor: pointer; margin-left: 2px; }
.nd-chip-memo.is-optional { background: var(--ord-solid-cyan); border-color: var(--ord-solid-cyan); }
.nd-chip-memo.is-required { background: var(--ord-solid-amber); border-color: var(--ord-solid-amber); color: var(--ord-ink); }