/* ── 검수 팝업 오버레이 ── */
.insp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  padding: 1rem;
}
.insp-overlay.open { opacity: 1; pointer-events: all; }

.insp-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 1200px;
  max-height: 96vh; overflow-y: auto;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.insp-overlay.open .insp-modal { transform: scale(1) translateY(0); }

.insp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  border-radius: 16px 16px 0 0;
}
.insp-header-left { flex: 1; min-width: 0; }
.insp-mgmt { font-family: var(--mono); font-size: 0.72rem; color: var(--text3); margin-bottom: 0.2rem; }
.insp-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.insp-close { background: none; border: none; color: var(--text3); font-size: 1.1rem; cursor: pointer; padding: 0.3rem; border-radius: 6px; transition: all 0.2s; }
.insp-close:hover { background: var(--surface2); color: var(--text); }

/* ── 단계 표시 ── */
.insp-steps {
  display: flex; align-items: center; padding: 1rem 1.5rem;
  gap: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.insp-step {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; color: var(--text3); white-space: nowrap;
}
.insp-step.active { color: var(--accent); font-weight: 600; }
.insp-step.done   { color: var(--accent2); }
.insp-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 0.65rem; font-weight: 700;
  background: var(--surface2); flex-shrink: 0;
}
.insp-step.active .insp-step-dot { border-color: var(--accent); color: var(--accent); background: rgba(79,142,247,0.1); }
.insp-step.done   .insp-step-dot { border-color: var(--accent2); color: var(--accent2); background: rgba(52,211,153,0.1); }
.insp-step-arrow { color: var(--text3); margin: 0 0.4rem; font-size: 0.7rem; }

/* ── 검수 본문 ── */
.insp-body { padding: 1.25rem 1.5rem; }
.insp-stage-title {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 1rem; font-weight: 700;
}
.insp-stage-title.stage-1 { background: rgba(79,142,247,0.12); color: var(--accent); border-left: 3px solid var(--accent); }
.insp-stage-title.stage-2 { background: rgba(245,158,11,0.12); color: var(--warn);   border-left: 3px solid var(--warn); }
.insp-stage-title.stage-3 { background: rgba(52,211,153,0.12); color: var(--accent2);border-left: 3px solid var(--accent2); }
.insp-stage-desc { font-size: 0.8rem; font-weight: 400; opacity: 0.8; }

/* ── 체크리스트 테이블 ── */
.insp-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.insp-table th {
  background: var(--surface2); font-size: 0.75rem; color: var(--text3);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.6rem 1rem; text-align: center; border-bottom: 1px solid var(--border);
}
.insp-table td {
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--border);
  vertical-align: middle; font-size: 0.85rem;
}
.insp-item-name { font-size: 0.88rem; }
.insp-memo-input { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.insp-radio-label { font-size: 0.78rem; padding: 0.28rem 0.7rem; }
.insp-table tr:last-child td { border-bottom: none; }
.insp-table tr:hover td { background: var(--surface2); }

.insp-item-name { font-size: 0.82rem; color: var(--text); }
.insp-item-name.has-issue { color: var(--danger); font-weight: 600; }
.insp-item-name.has-warning { color: var(--warn); font-weight: 600; }

/* ── 라디오 버튼 ── */
.insp-radio-group { display: flex; justify-content: center; gap: 0.3rem; }
.insp-radio { display: none; }
.insp-radio-label {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--border);
  background: var(--surface2); transition: all 0.15s;
  font-size: 0; /* 텍스트 숨김 */
}
.insp-radio-label {
  width: 28px; height: 28px;
}
/* 미선택 호버 */
.insp-radio-label:hover { border-color: var(--text3); background: var(--bg); }

/* 선택됨 */
.insp-radio.ok:checked    + .insp-radio-label { background: var(--accent2); border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(52,211,153,0.25); }
.insp-radio.miss:checked  + .insp-radio-label { background: var(--danger);  border-color: var(--danger);  box-shadow: 0 0 0 3px rgba(248,113,113,0.25); }
.insp-radio.hold:checked  + .insp-radio-label { background: var(--warn);    border-color: var(--warn);    box-shadow: 0 0 0 3px rgba(245,158,11,0.25); }

.insp-memo-input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: var(--sans); font-size: 0.75rem; padding: 0.25rem 0.5rem;
  border-radius: 5px; outline: none; width: 100%; transition: border-color 0.2s;
}
.insp-memo-input:focus { border-color: var(--accent); }

/* ── 항목 추가 버튼 ── */
.insp-add-row {
  width: 100%; padding: 0.5rem; background: var(--surface2);
  border: 1px dashed var(--border); color: var(--text3); font-family: var(--sans);
  font-size: 0.78rem; border-radius: 8px; cursor: pointer; transition: all 0.2s;
  margin-bottom: 1rem;
}
.insp-add-row:hover { border-color: var(--accent); color: var(--accent); }

/* ── 하단 액션 ── */
.insp-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--surface);
  border-radius: 0 0 16px 16px; gap: 1rem;
}
.insp-memo-wrap { flex: 1; }
.insp-memo-wrap label { font-size: 0.65rem; color: var(--text3); display: block; margin-bottom: 0.25rem; }
.insp-overall-memo {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-family: var(--sans); font-size: 0.78rem;
  padding: 0.4rem 0.65rem; border-radius: 7px; outline: none; resize: none; height: 38px;
}
.insp-overall-memo:focus { border-color: var(--accent); }
.insp-footer-btns { display: flex; gap: 0.5rem; flex-shrink: 0; }
.insp-btn {
  padding: 0.5rem 1rem; border-radius: 8px; font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s;
}
.insp-btn.save { background: var(--surface2); border: 1px solid var(--border); color: var(--text2); }
.insp-btn.save:hover { border-color: var(--accent); color: var(--accent); }
.insp-btn.next { background: var(--accent); color: white; }
.insp-btn.next:hover { opacity: 0.85; }
.insp-btn.complete { background: var(--accent2); color: #0d0f14; }
.insp-btn.complete:hover { opacity: 0.85; }

/* ── 입고대기 목록 ── */
.insp-list-wrap { padding: 0 1.5rem 1.5rem; }
.insp-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s;
}
.insp-list-item:hover { border-color: var(--accent); }
.insp-list-left { flex: 1; min-width: 0; }
.insp-list-mgmt { font-family: var(--mono); font-size: 0.72rem; color: var(--text3); }
.insp-list-name { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }
.insp-list-status {
  font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: 99px; white-space: nowrap; flex-shrink: 0;
}
.status-입고대기 { background: rgba(79,142,247,0.12); color: var(--accent); border: 1px solid rgba(79,142,247,0.3); }
.status-검수대기 { background: rgba(79,142,247,0.12); color: var(--accent); border: 1px solid rgba(79,142,247,0.3); }
.status-검수중   { background: rgba(245,158,11,0.12); color: var(--warn);   border: 1px solid rgba(245,158,11,0.3); }
.status-입고완료대기 {
  background: rgba(52,211,153,0.12); color: var(--accent2);
  border: 1px solid rgba(52,211,153,0.3);
  animation: approvalBlink 1.2s ease-in-out infinite;
}
.status-입고완료 { background: rgba(52,211,153,0.12); color: var(--accent2); border: 1px solid rgba(52,211,153,0.3); }

/* ── 통합 검수 테이블 서브헤더 ── */
.insp-table thead tr.insp-subheader th {
  background: var(--bg);
  font-size: 0.65rem;
  color: var(--text3);
  padding: 0.3rem 0.5rem;
  font-weight: 500;
  border-bottom: 2px solid var(--border);
}
/* 구성품/외관파손 열 그룹 강조는 헤더 th에 인라인 style로 직접 지정됨(inspection.js) —
   여기서 nth-child로 다시 칠하면 colspan="3" 때문에 실제 th 개수가 줄어서
   메모/사진 등 뒤쪽 헤더 칸에 엉뚱하게 색이 번지는 문제가 있어 제거함 */
.topbar-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.25rem 0.6rem; border-radius:7px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text2); font-size:0.72rem; font-weight:600;
  cursor:pointer; font-family:var(--sans); transition:all 0.15s;
}
.topbar-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ════════════════════════════════
   라이트모드 — Windows 11 Fluent
   ════════════════════════════════ */
body.light-mode .insp-modal {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
body.light-mode .insp-header {
  background: rgba(245,245,245,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px 14px 0 0;
}
body.light-mode .insp-title  { color: #1a1a1a; font-weight: 700; }
body.light-mode .insp-mgmt   { color: #8a8a8a; }
body.light-mode .insp-close  { color: #8a8a8a; border-radius: 6px; }
body.light-mode .insp-close:hover { background: rgba(0,0,0,0.06); color: #1a1a1a; }
body.light-mode .insp-steps  { background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,0.08); }
body.light-mode .insp-step   { color: #8a8a8a; }
body.light-mode .insp-step.active { color: #0078d4; }
body.light-mode .insp-step.done   { color: #107c10; }
body.light-mode .insp-step-dot { background: #f0f0f0; border-color: rgba(0,0,0,0.15); }
body.light-mode .insp-step.active .insp-step-dot { border-color: #0078d4; color: #0078d4; background: rgba(0,120,212,0.1); }
body.light-mode .insp-step.done   .insp-step-dot { border-color: #107c10; color: #107c10; background: rgba(16,124,16,0.1); }
body.light-mode .insp-body { background: #ffffff; }
body.light-mode .insp-table th {
  background: #f0f0f0; color: #4a4a4a;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-size: 0.72rem; letter-spacing: 0.04em;
}
body.light-mode .insp-table td { color: #1a1a1a; border-bottom: 1px solid rgba(0,0,0,0.06); }
body.light-mode .insp-table tr:hover td { background: rgba(0,120,212,0.04); }
body.light-mode .insp-item-name { color: #1a1a1a; }
body.light-mode .insp-memo-input {
  background: #f5f5f5; border: 1px solid rgba(0,0,0,0.12); color: #1a1a1a; border-radius: 5px;
}
body.light-mode .insp-memo-input:focus { border-color: #0078d4; box-shadow: 0 0 0 2px rgba(0,120,212,0.15); }
body.light-mode .insp-radio-label { background: #f0f0f0; border-color: rgba(0,0,0,0.15); }
body.light-mode .insp-add-row {
  background: #f5f5f5; border-color: rgba(0,0,0,0.15); color: #8a8a8a; border-radius: 8px;
}
body.light-mode .insp-add-row:hover { border-color: #0078d4; color: #0078d4; }
body.light-mode .insp-footer {
  background: rgba(245,245,245,0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);
  border-radius: 0 0 14px 14px;
}
body.light-mode .insp-overall-memo {
  background: #f5f5f5; border: 1px solid rgba(0,0,0,0.12); color: #1a1a1a; border-radius: 7px;
}
body.light-mode .insp-overall-memo:focus { border-color: #0078d4; }
body.light-mode .insp-btn.save {
  background: #f5f5f5; border: 1px solid rgba(0,0,0,0.1); color: #1a1a1a; border-radius: 8px;
}
body.light-mode .insp-btn.save:hover { border-color: #0078d4; color: #0078d4; background: rgba(0,120,212,0.05); }
body.light-mode .insp-btn.next    { background: #0078d4; border-radius: 8px; }
body.light-mode .insp-btn.next:hover { background: #006cbe; opacity: 1; }
body.light-mode .insp-btn.complete { background: #107c10; color: #fff; border-radius: 8px; }
body.light-mode .insp-btn.complete:hover { background: #0e6b0e; opacity: 1; }
body.light-mode .insp-list-item {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px;
}
body.light-mode .insp-list-item:hover { border-color: #0078d4; background: rgba(0,120,212,0.04); }
body.light-mode .insp-list-name { color: #1a1a1a; font-weight: 600; }
body.light-mode .insp-list-mgmt { color: #8a8a8a; }
body.light-mode .status-입고대기,
body.light-mode .status-검수대기 { background: rgba(0,120,212,0.08); color: #0078d4; border-color: rgba(0,120,212,0.2); }
body.light-mode .status-검수중   { background: rgba(202,80,16,0.08); color: #ca5010; border-color: rgba(202,80,16,0.2); }
body.light-mode .status-입고완료대기,
body.light-mode .status-입고완료 { background: rgba(16,124,16,0.08); color: #107c10; border-color: rgba(16,124,16,0.2); }
body.light-mode .topbar-btn {
  height: 28px; padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.7);
  color: #1a1a1a; border-radius: 6px; font-size: 12px;
}
body.light-mode .topbar-btn:hover { background: rgba(0,120,212,0.08); border-color: rgba(0,120,212,0.3); color: #0078d4; }