/* ---- 매출전표 엑셀 올리기 (sale_excel.js · _map · _check · _fix) ----
   ⭐ **화면이다 — 창이 아니다**(매출 화면 §5). 걸음 둘과 확인창 다섯이 창 하나에
      들어가지 않는다. 목록을 밀어내고 서고 [← 매출 목록]으로 돌아온다.
   ⭐ **파일 고르기와 열 맞추기만 창(`blk`)이다** — 한 번 떴다 닫히는 자리다. */

/* ---- 머리 — 걸음 둘과 고른 파일 이름 ---- */
.xls-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 10px;
}
.xls-steps { display: flex; gap: 6px; }
.xls-step {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}
.xls-step.on { background: var(--brand); color: #fff; }
/* 고른 이름은 **화면 머리에 끝까지 남는다** — 무엇을 올리는 중인지 잊지 않게. */
.xls-file-name { color: var(--muted); font-size: 12px; }

/* ---- 걸음 1 — 템플릿 카드 ---- */
.xls-forms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.xls-card {
  position: relative;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}
.xls-card:hover { border-color: var(--brand); }
.xls-card.add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-style: dashed;
}
.xls-ch { display: flex; align-items: center; gap: 6px; }
.xls-def { color: var(--brand); font-size: 11px; }
.xls-cs { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
/* 마우스를 올렸을 때만 손질 단추가 뜬다 — 카드 자체가 「고르기」다. */
.xls-cacts {
  display: none;
  gap: 4px;
  margin-top: 8px;
}
.xls-card:hover .xls-cacts { display: flex; }

/* ---- 파일 고르기 창 ---- */
.xls-drop {
  position: relative;
  margin: 12px;
  padding: 28px 16px;
  border: 2px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}
.xls-drop.over, .xls-drop.on { border-color: var(--brand); color: var(--fg); }
.xls-inp { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- 열 맞추기 창 ---- */
.xls-map { max-width: 720px; }
.xls-mbody { max-height: 62vh; overflow: auto; padding: 0 12px; }
.xls-mtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; }
.xls-note { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.xls-def-set { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.xls-tier {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.xls-tier i { color: var(--muted); font-size: 12px; font-style: normal; }
.xls-fields { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.xls-frow { display: flex; align-items: center; gap: 8px; }
.xls-fname { width: 120px; flex: none; font-size: 13px; }
.xls-frow .slp-in { flex: 1; }

/* ---- 확인창 다섯 ---- */
.xls-p {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.xls-ph { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 600; }
.xls-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xls-sum i { color: var(--muted); font-style: normal; font-size: 12px; }
.xls-hold { color: var(--warn); }
.xls-bad { color: var(--danger); }
.xls-date { display: flex; align-items: center; gap: 6px; }
.xls-note2 { color: var(--muted); }
.xls-acts { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.xls-hint { color: var(--muted); font-style: normal; font-size: 12px; }

/* 파일 거부 배너 — 맨 위에 서고 [생성]이 잠긴다. */
.xls-reject {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  color: var(--danger);
}
.xls-reject i { display: block; margin-top: 3px; color: var(--muted); font-style: normal; font-size: 12px; }

/* 자동채움창 — ⛔ **아무 색도 넣지 않는다.** 막는 자리가 아니라 알리는 자리다. */
.xls-fill { padding: 2px 0; font-size: 13px; }

/* 전표설명창 — 장은 **이름뿐인 쪽지**다. */
.xls-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.xls-note-c {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}

/* 자동 묶음 처리 — **우리가 추정해 합친 것만** 선다. */
.xls-bd { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.xls-bm { flex: 1; }
.xls-bm i { display: block; color: var(--muted); font-style: normal; font-size: 12px; }
.xls-bn { color: var(--muted); font-size: 12px; }
.xls-bn.off { color: var(--warn); }

/* ---- 문제 줄 고치기 바 ---- */
.xls-fix {
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}
.xls-fh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.xls-fb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
  padding: 8px 0;
}
.xls-fc { display: flex; align-items: center; gap: 4px; }
.xls-fc .slp-in { flex: 1; min-width: 0; }
.xls-fu { display: flex; justify-content: flex-end; }

/* ---- 확인 표 ---- */
.xls-t { width: 100%; }
.xls-chk { width: 26px; }
.xls-r-bad td { background: var(--soft); }
/* **엑셀 원본은 안 덮어쓴다** — 어디서 온 값인지 표가 남는다. */
.xls-mk {
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-style: normal;
}
.xls-mk.soft { background: var(--line); color: var(--muted); }

/* 걸음 둘이 사는 몸통 · 파일 고르기 창 · 성공창 · 드롭존의 말 · 문제 줄 네모 —
   자리만 잡는 이름들이라 여기 함께 둔다(칠이 없는 클래스를 남기지 않는다). */
.xls-body { display: block; }
.xls-file { max-width: 460px; }
.xls-make { border-color: var(--brand); }
.xls-said { font-size: 13px; }
.xls-cb { cursor: pointer; }