/* 마감 데이터 반영 위젯 — 시스템 채널 우측 하단.
   어드민 톤(연그레이 배경 · 세이지 액센트)에 맞춘다. */

#clsWidget { position: fixed; right: 24px; bottom: 24px; z-index: 900; }

#clsFab {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid #45604f; background: #4f6c5a; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(31, 41, 35, .28);
  transition: transform .12s ease, background .12s ease;
}
#clsFab:hover  { background: #5c7c68; transform: translateY(-1px); }
#clsFab:active { transform: translateY(0); }
#clsFab:focus-visible { outline: 2px solid #2f3e34; outline-offset: 3px; }

#clsPanel {
  position: absolute; right: 0; bottom: 64px; width: 460px; max-width: calc(100vw - 32px);
  /*  표 + 대화가 같이 보여야 해서 넉넉히. 화면이 작으면 화면에 맞춘다. */
  height: min(720px, calc(100vh - 110px));
  max-height: calc(100vh - 110px); display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dfe4e0; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(31, 41, 35, .18); overflow: hidden;
}
#clsPanel[hidden] { display: none; }

.cls-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #eceeec; background: #f7f8f7;
}
.cls-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #2f3e34; }
.cls-x {
  border: 0; background: none; font-size: 20px; line-height: 1;
  color: #7d8a80; cursor: pointer; padding: 0 4px;
}
.cls-x:hover { color: #2f3e34; }

.cls-body {
  padding: 14px; overflow: hidden; font-size: 13px; color: #33403a;
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
/*  표가 길면 그 안에서만 스크롤되고, 대화는 아래에 자리를 지킨다.
    ⛔ 내용이 적을 때 위쪽이 남는 자리를 다 먹으면 버튼과 대화 사이가 크게 빈다.
       그래서 위쪽은 자기 높이만 쓰고(flex 0 1 auto), 남는 자리는 대화가 가진다. */
.cls-top {
  flex: 0 0 auto; max-height: 62%; min-height: 0; overflow-y: auto;   /* 안 줄어들되 너무 길면 스스로 스크롤 */ margin: -14px -14px 0; padding: 14px;
}
.cls-body > .cls-chat {
  /* ⛔ basis 를 auto 로 두면 대화 내용 높이가 기준이 돼, 기록이 길어질수록 위 영역(무엇을 넣으시나요)이
     비례해서 줄어들며 잘린다(2026-09-09 지적). basis 0 이면 위 영역이 제 크기를 갖고 대화가 나머지를 쓴다. */
  flex: 1 1 0; display: flex; flex-direction: column;
  min-height: 190px; margin-top: 0;   /* 대화가 늘 이만큼은 보인다 */
}
.cls-body > .cls-chat .cls-log { flex: 1; max-height: none; min-height: 0; }


.cls-drop {
  border: 1.5px dashed #c3cdc6; border-radius: 10px; padding: 26px 14px;
  text-align: center; cursor: pointer; background: #fafbfa;
  display: grid; gap: 4px; transition: border-color .12s, background .12s;
}
.cls-drop:hover, .cls-drop.is-over { border-color: #4f6c5a; background: #f1f5f2; }
.cls-drop strong { font-size: 13px; color: #2f3e34; }
.cls-drop span   { font-size: 12px; color: #7d8a80; }

.cls-when { margin-top: 12px; }
.cls-when-label { display: block; font-size: 12px; color: #55635b; margin-bottom: 6px; }
/*  캘린더는 대시보드 공용 컴포넌트(.cost-cal/.cal-*)를 그대로 쓴다.
    위젯이 좁아 팝오버가 밖으로 나가지 않게 위치만 잡아 준다. */
#clsWidget .cost-cal { position: relative; }
#clsWidget .cal-trigger { width: 100%; }
/*  창이 720px 로 커져 버튼 아래로 열어도 들어간다(캘린더 316px).
    위로 띄우면 오히려 화면 위를 넘친다 — 실측으로 확인. */
#clsWidget .cal-pop { left: 0; right: auto; z-index: 30; }
.cls-hint { margin: 6px 0 0; font-size: 11px; color: #8a958d; line-height: 1.5; }
.cls-warn {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 6px;
  background: #fdf3f2; border: 1px solid #f3d7d4; color: #94413a; font-size: 12px;
}
.cls-load { margin: 24px 0; text-align: center; color: #7d8a80; }
.cls-file { margin: 0 0 2px; font-weight: 600; color: #2f3e34; }
.cls-when-txt { margin: 0 0 10px; font-size: 12px; color: #7d8a80; }

.cls-tablewrap { overflow-x: auto; }
.cls-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cls-table th, .cls-table td { padding: 6px 8px; border-bottom: 1px solid #eceeec; text-align: left; }
.cls-table thead th { color: #7d8a80; font-weight: 600; background: #fafbfa; }
.cls-table tfoot th { border-top: 2px solid #dfe4e0; border-bottom: 0; color: #2f3e34; }
.cls-num { text-align: right !important; font-variant-numeric: tabular-nums; }

.cls-warns {
  margin: 10px 0 0; padding: 8px 10px 8px 26px; border-radius: 6px;
  background: #fdf8ee; border: 1px solid #f0e2c4; color: #7a5c1e; font-size: 12px; line-height: 1.6;
}

.cls-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.cls-btn {
  padding: 8px 16px; border-radius: 7px; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; border: 1px solid transparent;
}
.cls-btn--ghost { background: #fff; border-color: #dfe4e0; color: #55635b; }
.cls-btn--ghost:hover { background: #f4f6f4; }
.cls-btn--go { background: #4f6c5a; color: #fff; }
.cls-btn--go:hover { background: #5c7c68; }

.cls-done {
  margin: 0 0 10px; padding: 10px; border-radius: 8px; text-align: center;
  background: #f1f6f2; border: 1px solid #cfe0d4; color: #35543f; font-weight: 600;
}
.cls-donelist { margin: 0; padding-left: 20px; color: #55635b; font-size: 12px; line-height: 1.7; }

@media (max-width: 520px) {
  #clsWidget { right: 14px; bottom: 14px; }
  #clsPanel  { width: calc(100vw - 28px); }
}

/* ── 대화 (바리) ── */
/*  대화는 남는 공간 아래에 붙인다 — 입력칸이 늘 창 하단에 오게.
    ⛔ 구분선은 두지 않는다 — 버튼 4개 아래를 가로지르는 줄로 보였다(사용자 지적).
       말풍선과 입력칸만으로 충분히 구분된다. */
.cls-chat { margin-top: auto; padding-top: 10px; }

.cls-log {
  display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
  max-height: 260px; overflow-y: auto; margin-bottom: 10px;
}
.cls-log:empty { display: none; }

.cls-msg {
  padding: 8px 11px; border-radius: 12px; font-size: 12px; line-height: 1.6;
  max-width: 88%; white-space: pre-wrap; word-break: break-word;
}
.cls-msg--me   { align-self: flex-end;   background: #4f6c5a; color: #fff; border-bottom-right-radius: 4px; }
.cls-msg--bari { align-self: flex-start; background: #f1f3f1; color: #33403a; border-bottom-left-radius: 4px; }

.cls-ask { display: flex; gap: 6px; }
.cls-ask input {
  flex: 1; padding: 8px 11px; border: 1px solid #dfe4e0; border-radius: 8px;
  font: inherit; font-size: 12px; color: #2f3e34; min-width: 0;
}
.cls-ask input:focus { outline: 2px solid #b8ccbe; outline-offset: -1px; border-color: #4f6c5a; }
.cls-ask input::placeholder { color: #a3ada6; }
.cls-send {
  width: 34px; border: 0; border-radius: 8px; background: #4f6c5a; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; flex: none;
}
.cls-send:hover { background: #5c7c68; }

/* 못 읽는 매장 — 눈에 띄게. 빠진 줄 모르고 넣는 사고를 막는다. */
.cls-table tr.cls-blocked td, .cls-table tr.cls-blocked th { color: #94413a; background: #fdf3f2; }
.cls-btn--go:disabled { background: #c4ccc7; cursor: not-allowed; }

/* 이미 들어가 있는 매장 — 다시 넣지 않는다(두 배 방지) */
.cls-table tr.cls-dup td, .cls-table tr.cls-dup th { color: #7a5c1e; background: #fdf8ee; }

/* 표가 옆으로 넘치지 않게 — 이름 칸이 남는 폭을 차지하고, 길면 줄바꿈한다.
   (가로 스크롤이 생기면 수량·금액이 화면 밖으로 밀려 안 보인다) */
/*  ⛔ 표 폭 함정 (2026-09-07 실측)
    table-layout:fixed + width:100% 를 줘도 표가 660px 로 벌어졌다(자리는 430px).
    첫 칸에 명시적 폭이 없고 word-break:keep-all 이 한글을 한 덩어리로 묶어
    최소 폭을 밀어 올렸기 때문. 인라인으로 width 를 강제해도 안 먹었다.
    → 세 칸 모두 퍼센트로 못 박고, 이름 칸은 어디서든 줄바꿈되게 한다. */
.cls-table { table-layout: fixed; width: 100%; }
.cls-table th:nth-child(1), .cls-table td:nth-child(1) { width: 52%; }
.cls-table th:nth-child(2), .cls-table td:nth-child(2) { width: 22%; }
.cls-table th:nth-child(3), .cls-table td:nth-child(3) { width: 26%; }
.cls-table .cls-name {
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
/*  네 칸짜리 표(공급대행)는 비율을 따로 준다. */
.cls-table.cls-t4 th:nth-child(1), .cls-table.cls-t4 td:nth-child(1) { width: 34%; }
.cls-table.cls-t4 th:nth-child(2), .cls-table.cls-t4 td:nth-child(2) { width: 24%; }
.cls-table.cls-t4 th:nth-child(3), .cls-table.cls-t4 td:nth-child(3) { width: 22%; }
.cls-table.cls-t4 th:nth-child(4), .cls-table.cls-t4 td:nth-child(4) { width: 20%; }
.cls-tablewrap { max-width: 100%; overflow-x: hidden; }

/* 말풍선 안 서식 */
.cls-msg strong { font-weight: 600; }
.cls-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px;
}
.cls-msg--me code { background: rgba(255,255,255,.18); }

/* ── 표 대신 격자 (2026-09-07)
   <table> 은 최소 내용 폭 아래로 안 줄어들어, 좁은 위젯에서 옆으로 넘쳤다
   (자리 430px vs 표 660px — table-layout:fixed·width:100%·인라인 강제 모두 무효).
   격자는 자리에 맞춰 줄어든다. */
.cls-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 76px;
  font-size: 12px; width: 100%;
}
.cls-grid4 { grid-template-columns: minmax(0, 1fr) 88px 84px 74px; }

.cls-gh, .cls-gc, .cls-gf {
  padding: 6px 6px; border-bottom: 1px solid #eceeec; min-width: 0;
  overflow-wrap: anywhere;
}
.cls-gh { color: #7d8a80; font-weight: 600; background: #fafbfa; }
.cls-gf { border-top: 2px solid #dfe4e0; border-bottom: 0; color: #2f3e34; font-weight: 600; }
.cls-gc.cls-blocked, .cls-gf.cls-blocked { color: #94413a; background: #fdf3f2; }
.cls-gc.cls-dup,     .cls-gf.cls-dup     { color: #7a5c1e; background: #fdf8ee; }
.cls-span2 { grid-column: span 2; font-weight: 400; }
.cls-grid .cls-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 지난 기록 — 창을 닫아도 이어지게 */
.cls-histmark {
  align-self: center; font-size: 10px; color: #a3ada6; letter-spacing: .04em;
  padding: 2px 10px; border-radius: 10px; background: #f4f6f4;
}
.cls-event {
  align-self: center; font-size: 11px; color: #7d8a80; text-align: center;
  padding: 4px 8px; line-height: 1.5;
}

/* ── 무엇을 넣을지 먼저 고르기 ── */
.cls-ask-kind { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #2f3e34; }
.cls-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cls-kind {
  display: grid; gap: 3px; text-align: left; padding: 12px 12px;
  border: 1px solid #dfe4e0; border-radius: 10px; background: #fff;
  font: inherit; cursor: pointer; transition: border-color .12s, background .12s;
}
.cls-kind:hover { border-color: #4f6c5a; background: #f7faf8; }
.cls-kind strong { font-size: 12.5px; color: #2f3e34; }
.cls-kind span   { font-size: 11px; color: #8a958d; line-height: 1.45; }

/* 고른 뒤 위에 남는 표시 */
.cls-picked {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 7px 10px; border-radius: 8px;
  background: #f1f5f2; border: 1px solid #dde7e0;
}
.cls-picked { justify-content: flex-start; gap: 8px; }
.cls-picked span { font-size: 12px; font-weight: 600; color: #35543f; }
.cls-back {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 0; border-radius: 6px; background: none; color: #4f6c5a; cursor: pointer;
}
.cls-back:hover { background: #e3ece6; }

/* 정산서 대조표 — grid 4열(항목 · 정산서 · 화면 · 차이). 패널 460px 안에 들어간다 */
.cls-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 76px;
  gap: 3px 6px; font-size: 12px; align-items: baseline; }
.cls-cmp .h { color: #6b7280; font-size: 11px; }
.cls-cmp .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cls-cmp .m { grid-column: 1 / -1; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid #e5e7eb; font-weight: 600; }
.cls-cmp .bad { color: #b91c1c; font-weight: 600; }
.cls-cmp .ok { color: #15803d; }