/* ============================================================
   ES 재고관리 — 상품 마스터 › 빠른 작업 모달 3종        v78
   원본: 개발 인계 소스 src/quick-actions.css
   · 클래스명은 원본 그대로 유지하되 전부 .qm-scrim 하위로 스코프
     (.input/.select/.field/.card/.step/.badge/.drop/.result/.btn 등이
      앱 기존 CSS와 이름이 겹치므로 스코프하지 않으면 서로 깨진다)
   · z-index 는 원본 95 → 앱 마스크 대역 420 (토스트 440 아래)
   · 토큰은 앱 테마와 무관하게 모달 안에서만 재정의 (badj/entry 와 동일 패턴)
   ============================================================ */

.qm-scrim {
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb;
  --text:#1c2430; --text-mid:#3a4030; --sub:#6b7160; --muted:#98a08a; --faint:#c6c8b4; --slate:#4f5644;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434; --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --ok:#4d7c2f; --ok-fg:#3f6626; --ok-bg:#e9f0e0; --ok-line:#cbdcb6;
  --warn:#b8860b; --warn-fg:#8f6708; --warn-bg:#faf1dc; --warn-line:#e6d3a3;
  --danger:#a8442a; --danger-fg:#8c3721; --danger-bg:#f7e7e1; --danger-line:#e3c2b6;
  --info:#5b6b4a; --info-bg:#eef0e6; --neutral-bg:#eceade;
  --r-sm:0; --r:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:99px;
  --font:'ES Emoji', 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --fs-card:13.5px; --fs-body:12.5px; --fs-sm:11.5px; --fs-xs:10.5px;
  --shadow-pop:0 14px 34px rgba(16,24,40,.16);
  font-family: var(--font); color: var(--text);
}

/* ---------- 모달 셸 ---------- */
.qm-scrim {
  position: fixed; inset: 0; z-index: 420;
  background: rgba(16,24,40,.44);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.qm-scrim * { box-sizing: border-box; }
.qm-scrim .qm {
  width: 100%; background: var(--panel); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(16,24,40,.32); overflow: hidden;
}
.qm-scrim .qm--sm  { max-width: 620px; }
.qm-scrim .qm--md  { max-width: 720px; }
.qm-scrim .qm--lg  { max-width: 760px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }

.qm-scrim .qm__head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line-soft); }
.qm-scrim .qm__head--tabs { border-bottom: 0; padding-bottom: 0; }
.qm-scrim .qm__ico { width: 38px; height: 38px; flex: none; border-radius: 11px;
           font-size: 17px; display: flex; align-items: center; justify-content: center; }
.qm-scrim .qm__ico--blue   { background: var(--accent-bg); color: var(--accent-fg); }
.qm-scrim .qm__ico--green  { background: var(--ok-bg); color: var(--ok-fg); }
.qm-scrim .qm__ico--purple { background: var(--info-bg); color: var(--info); }
.qm-scrim .qm__title { font-size: 15px; font-weight: 700; letter-spacing:-.3px; }
.qm-scrim .qm__sub   { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; line-height: 1.55; }
.qm-scrim .qm__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: var(--r);
         background: none; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; padding: 0; }
.qm-scrim .qm__x:hover { background: #f4f3e8; }
.qm-scrim .qm__body { padding: 16px 22px 18px; }
.qm-scrim .qm__body--scroll { flex: 1; min-height: 0; overflow-y: auto; }
.qm-scrim .qm__foot { flex: none; display: flex; align-items: center; gap: 9px;
            padding: 13px 22px 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.qm-scrim .qm__foot--plain { border-top: 1px solid var(--line-soft); background: var(--panel-sub); }
.qm-scrim .qm__actions { margin-left: auto; display: flex; gap: 7px; }

/* 링크형 버튼 */
.qm-scrim .qm__link { border: 0; background: none; padding: 0; font: inherit;
            font-size: var(--fs-sm); font-weight: 700; color: var(--accent-fg);
            cursor: pointer; text-decoration: underline; }

/* ---------- 버튼 · 배지 (원본 workspace.css 에서 필요한 부분만 이식) ---------- */
.qm-scrim .btn { display: inline-flex; align-items: center; gap: 6px;
       border: 1px solid var(--line); background: var(--panel);
       padding: 7px 12px; border-radius: var(--r);
       font: inherit; font-family: var(--font); font-size: 12.5px; color: var(--text);
       cursor: pointer; white-space: nowrap; }
.qm-scrim .btn:hover { border-color: #c9c5a1; background: #f6f5ec; }
.qm-scrim .btn:disabled { opacity: .6; cursor: default; }
.qm-scrim .btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; padding: 7px 15px; }
.qm-scrim .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.qm-scrim .btn--primary:disabled { background: var(--accent); border-color: var(--accent); }
.qm-scrim .btn--sm { padding: 5px 11px; font-size: var(--fs-sm); font-weight: 700; }
.qm-scrim .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700;
         border-radius: 5px; padding: 2px 7px; white-space: nowrap; }

/* ---------- 폼 ---------- */
.qm-scrim .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qm-scrim .field { display: block; min-width: 0; }
.qm-scrim .field + .field, .qm-scrim .form-grid + .field, .qm-scrim .field + .form-grid { margin-top: 14px; }
.qm-scrim .field__label { display: flex; align-items: center; gap: 5px;
                font-size: var(--fs-sm); font-weight: 700; color: var(--slate); margin-bottom: 5px; }
.qm-scrim .field__req { color: var(--danger); }
.qm-scrim .field__opt { font-weight: 600; color: var(--muted); }
.qm-scrim .field__hint { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.qm-scrim .input, .qm-scrim .select {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--line);
  border-radius: 9px; outline: none; font: inherit; font-family: var(--font); font-size: 12.5px;
  background: var(--panel); color: var(--text);
}
.qm-scrim .input:focus, .qm-scrim .select:focus { border-color: var(--accent); }
.qm-scrim .input--mono { font-variant-numeric: tabular-nums; }
.qm-scrim .quick-chips { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.qm-scrim .chip-btn { padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
            background: var(--panel); font: inherit; font-family: var(--font); font-size: 11.5px; font-weight: 600;
            color: var(--sub); cursor: pointer; }
.qm-scrim .chip-btn:hover { border-color: var(--accent); color: var(--accent-fg); }

/* ---------- 열 구성 칩 ---------- */
.qm-scrim .col-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.qm-scrim .col-chip { display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
            background: var(--panel); font-size: var(--fs-sm); font-weight: 700;
            color: var(--sub); white-space: nowrap; }
.qm-scrim .col-chip--req { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent-fg); }

/* ---------- 번호 단계 안내 ---------- */
.qm-scrim .steps { display: flex; flex-direction: column; gap: 8px; }
.qm-scrim .step { display: flex; gap: 10px; align-items: flex-start;
        padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 11px;
        background: var(--panel-sub); min-width: 0; }
.qm-scrim .step__n { width: 22px; height: 22px; flex: none; border-radius: var(--r-pill);
           background: var(--accent-bg); color: var(--accent-fg);
           font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.qm-scrim .step__title { display: block; font-size: var(--fs-body); font-weight: 700; }
.qm-scrim .step__desc { display: block; font-size: var(--fs-sm); color: var(--sub); margin-top: 3px; line-height: 1.6; text-wrap: pretty; }

/* ---------- 드롭존 ---------- */
.qm-scrim .drop { display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center;
        padding: 22px 16px; border: 1.5px dashed var(--accent-line);
        border-radius: var(--r-lg); background: var(--accent-bg-2); }
.qm-scrim .drop--tall { padding: 26px 16px; }
.qm-scrim .drop__ico { font-size: 24px; }
.qm-scrim .drop__title { font-size: 12.5px; font-weight: 700; }
.qm-scrim .drop__desc { font-size: var(--fs-sm); color: var(--sub); line-height: 1.6; text-wrap: pretty; }
.qm-scrim .drop.is-over { border-color: var(--accent); background: #f0efe0; }

/* ---------- 결과 배너 ---------- */
.qm-scrim .result { display: flex; align-items: center; gap: 9px; margin-top: 12px;
          padding: 11px 13px; border: 1px solid var(--ok-line); border-radius: 11px;
          background: #f0f4e8; flex-wrap: wrap; }
.qm-scrim .result--warn { border-color: var(--warn-line); background: #fffaf2; }
.qm-scrim .result__text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ok-fg); line-height: 1.55; text-wrap: pretty; }
.qm-scrim .result--warn .result__text { color: var(--warn-fg); }

/* ---------- 힌트 박스 ---------- */
.qm-scrim .hint-box { display: flex; gap: 10px; align-items: flex-start;
            padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 11px;
            background: var(--panel-sub); margin-bottom: 13px; min-width: 0; }
.qm-scrim .hint-box__text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--slate); line-height: 1.6; text-wrap: pretty; }

/* ---------- 모달 내부 탭 ---------- */
.qm-scrim .qm-tabs { flex: none; display: flex; gap: 2px; padding: 12px 22px 0;
           border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.qm-scrim .qm-tabs__item { display: inline-flex; align-items: center; gap: 6px;
                 padding: 9px 13px; border: 0; background: none; font: inherit; font-family: var(--font);
                 font-size: var(--fs-body); font-weight: 700; color: var(--sub);
                 cursor: pointer; white-space: nowrap; box-shadow: inset 0 -2px 0 0 transparent; }
.qm-scrim .qm-tabs__item.is-active { color: var(--text); box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ---------- 매칭 결과 목록 ---------- */
.qm-scrim .match-list { border: 1px solid var(--line-soft); border-radius: 11px; overflow: hidden; }
.qm-scrim .match { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
         border-bottom: 1px solid var(--line-faint); background: var(--panel); min-width: 0; }
.qm-scrim .match:last-child { border-bottom: 0; }
.qm-scrim .match.is-fail { background: #fffafa; }
.qm-scrim .match__thumb { width: 34px; height: 34px; flex: none; border-radius: var(--r); background: var(--neutral-bg);
                font-size: 10.5px; color: var(--muted); display: flex; align-items: center; justify-content: center;
                overflow: hidden; object-fit: cover; }
.qm-scrim img.match__thumb { display: block; }
.qm-scrim .match__body { flex: 1 1 160px; min-width: 0; }
.qm-scrim .match__file { display: block; font-size: 12.5px; font-weight: 700;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-scrim .match__name { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- URL 표 ---------- */
.qm-scrim .url-table { border: 1px solid var(--line-soft); border-radius: 11px; overflow: hidden; margin-bottom: 12px; }
.qm-scrim .url-table__head { display: flex; gap: 10px; padding: 8px 12px;
                   border-bottom: 1px solid var(--line-soft); background: var(--panel-alt);
                   font-size: 11.5px; font-weight: 700; color: var(--slate); }
.qm-scrim .url-table__row { display: flex; gap: 10px; padding: 8px 12px;
                  border-bottom: 1px solid var(--line-faint); font-size: var(--fs-sm); min-width: 0; }
.qm-scrim .url-table__row:last-child { border-bottom: 0; }
.qm-scrim .url-table__code { flex: 0 0 110px; color: var(--accent-fg); font-weight: 700; }
.qm-scrim .url-table__url { flex: 1; min-width: 0; color: var(--sub);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 클라우드 연동 카드 ---------- */
.qm-scrim .api-card { display: flex; gap: 11px; align-items: flex-start;
            padding: 13px 14px; border: 1px solid var(--ok-line); border-radius: var(--r-lg);
            background: var(--panel); min-width: 0; }
.qm-scrim .api-card--off { border-color: var(--line); background: var(--panel-sub); }
.qm-scrim .api-card__ico { width: 34px; height: 34px; flex: none; border-radius: var(--r-md);
                 font-size: 15px; display: flex; align-items: center; justify-content: center; }
.qm-scrim .api-card__body { flex: 1; min-width: 0; }
.qm-scrim .api-card__desc { display: block; font-size: var(--fs-sm); color: var(--sub);
                  margin-top: 4px; line-height: 1.6; text-wrap: pretty; }
.qm-scrim .api-card__note { display: block; font-size: var(--fs-xs); color: var(--warn-fg);
                  margin-top: 5px; line-height: 1.5; text-wrap: pretty; }
.qm-scrim .api-card__row { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.qm-scrim .api-card__row .input { flex: 1 1 200px; padding: 7px 10px; font-size: 12.5px; }

/* ---------- 앱 기존 레이어와의 순서 조정 ----------
   scrim(420) 위로 올려야 보이는 것들: 토스트 · SKU 가이드 모달 · 이미지 라이트박스 */
body.qa-open #toast   { z-index: 440; }
#modalWrap.qa-over    { z-index: 430; }
body.qa-open #lightbox{ z-index: 450; }

/* 직접 지정 인라인 입력 */
.qm-scrim .match__fix { display: flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.qm-scrim .match__fix .input { width: 130px; padding: 5px 8px; font-size: 12.5px; }

@media (max-width: 640px) {
  .qm-scrim { padding: 0 !important; }
  .qm-scrim .qm { border-radius: 0; min-height: 100vh; }
  .qm-scrim .qm--lg { max-height: 100vh; height: 100%; }
  .qm-scrim .form-grid { grid-template-columns: minmax(0, 1fr); }
  .qm-scrim .qm__head, .qm-scrim .qm__body, .qm-scrim .qm__foot { padding-left: 16px; padding-right: 16px; }
  .qm-scrim .qm-tabs { padding-left: 16px; padding-right: 16px; }
}