/* 소싱 상품 관리 허브 (2026-07-13).
   ★색·간격은 tokens.css 의 var(--*) 만 쓴다 — 임의 색상값 직접 사용 금지(프로젝트 규칙). */

/* ★와이드 (사장님 요청 2026-07-19): 1240px 로 묶어둘 이유가 없다 — 카드가 한 줄에 더 들어가게 넓힌다.
   화면이 아주 크면 카드가 과하게 늘어나므로 그리드 minmax 로 자연히 개수가 늘게 둔다. */
.sc-wrap { max-width: 1680px; margin: 0 auto; padding: 24px 20px 64px; }

/* ── 헤더 ── */
.sc-head { margin-bottom: 20px; }
.sc-back {
  background: none; border: 0; color: var(--color-text-secondary);
  font-size: var(--text-sm); padding: 4px 0; margin-bottom: 10px; cursor: pointer;
}
.sc-back:hover { color: var(--color-primary); }
.sc-head h1 { font-size: 24px; margin: 0 0 4px; color: var(--color-text-primary); }
.sc-head p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.sc-cn-lg { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 4px !important; }
.sc-url { font-size: 12px; color: var(--color-primary); word-break: break-all; }

/* ── 툴바 ── */
/* ★2줄 · 그룹 · 라벨 (사장님 지시 2026-07-20: "한 줄이라 정보량이 많아 시인성이 떨어진다").
   역할이 다른 것을 한 줄에 늘어놓으면 **전부 똑같이 안 중요해 보인다.**
   윗줄 = 찾기·거르기 / 아랫줄 = 보기·도구·선택. 정본 = 작업 보관함 `.picker-controls`. */
.sc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* ★아랫줄(선택·보기·도구)은 **패널로 감싼다**(사장님 2026-07-21: "이쪽 라인 좀 다듬어").
   옛날엔 border-top 선 하나뿐이라 버튼들이 허공에 떠 보였다 → 연한 카드 배경으로 "툴바"임을 못박고,
   버튼·세그먼트 높이를 통일해 라인이 가지런하게 앉게 한다. */
.sc-toolbar2 {
  margin-bottom: 16px; padding: 8px 10px; row-gap: 6px;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 10px;
}
/* 툴바 안 모든 버튼·세그먼트·라벨을 같은 높이(32px)로 → 들쭉날쭉한 라인 제거. */
.sc-toolbar2 .sc-btn,
.sc-toolbar2 .sc-seg,
.sc-toolbar2 .sc-seg button {
  min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
}
.sc-toolbar2 .sc-grp-l { align-self: center; }
.sc-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-grp-l {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; word-break: keep-all;
  color: var(--color-text-muted); margin-right: 2px;
}
.sc-div { width: 1px; align-self: stretch; min-height: 22px; background: var(--color-border); margin: 0 4px; }
/* ★여기부터 오른쪽 끝으로 민다(사장님 지시 2026-07-20: "보기~대기열을 오른쪽 끝으로"). */
.sc-push { margin-left: auto; }

/* 선택 그룹 = **왼쪽 첫 번째**(사장님 지시 2026-07-20). 고른 게 있으면 켜진다. */
.sc-grp-sel {
  padding: 5px 9px; border-radius: 8px;
  border: 1px solid transparent; transition: border-color .15s, background .15s;
}
/* "선택 N" 라벨은 이제 [전체선택][해제] **뒤·중간**에 온다 — 양옆으로 살짝 띄운다. */
.sc-sel-l { margin: 0 3px; }
.sc-grp-sel.on { border-color: var(--color-primary); background: var(--color-primary-light); }
.sc-grp-sel.on .sc-grp-l { color: var(--color-primary-dark); }
.sc-selN {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 99px; text-align: center;
  background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700;
}
.sc-selN.off { background: var(--color-bg-input); color: var(--color-text-muted); }
.sc-search {
  /* ★flex:1 로 다 먹던 것을 줄인다 — 전체선택·선택삭제 버튼 자리를 만들어야 한다(사장님 지적). */
  flex: 0 1 240px; min-width: 150px; background: var(--color-bg-input);
  border: 1px solid var(--color-border); border-radius: 7px;
  padding: 8px 12px; font-size: var(--text-sm); color: var(--color-text-primary);
}
/* ★칩 = 상태별 **고유색**(사장님 지시 2026-07-20: "색깔이 너무 다 똑같아").
   색은 지어내지 않는다 — **카드 배지 `.sb-*` 가 쓰는 색 그대로**다.
   같은 뜻이 같은 색이어야 사장님이 화면마다 다시 배우지 않는다. */
.sc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 6px 10px 6px 12px; border-radius: 99px;
  border: 1px solid var(--color-border); background: var(--color-bg-card);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
}
/* 숫자를 알약 안 배지로 뺀다 — "검토중 7" 이 한 덩어리 텍스트로 뭉쳐 보이지 않게 */
.sc-chip b {
  min-width: 17px; padding: 1px 5px; border-radius: 99px; text-align: center;
  background: var(--color-bg-input); color: var(--color-text-muted);
  font-size: 11px; font-weight: 700;
}
.sc-chip.on { background: var(--color-text-primary); color: var(--color-text-inverse); border-color: var(--color-text-primary); font-weight: 600; }
.sc-chip.on b { background: rgba(255,255,255,.22); color: #fff; }
/* 상태색 = 왼쪽 점으로 표시(꺼져 있어도 무슨 상태인지 보인다) */
.sc-chip-hold::before,
.sc-chip-queued::before,
.sc-chip-done::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto;
}
.sc-chip-hold::before   { background: #F59E0B; }   /* .sb-hold   앰버 */
.sc-chip-queued::before { background: var(--color-primary); }  /* .sb-queued 파랑 */
.sc-chip-done::before   { background: #047857; }   /* .sb-done   초록 */
.sc-chip-hold.on   { background: var(--color-accent-light); color: #B45309; border-color: #F59E0B; }
.sc-chip-queued.on { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary); }
.sc-chip-done.on   { background: #DCFCE7; color: #047857; border-color: #047857; }
.sc-chip-hold.on b, .sc-chip-queued.on b, .sc-chip-done.on b { background: rgba(0,0,0,.10); color: inherit; }

/* ★휴지통 = **필터가 아니다.** 같은 알약이면 상태 필터로 오해한다(사장님 지적 2026-07-20).
   → 모양을 바꾼다: 사각 + 오른쪽 끝으로 분리 + 지움을 뜻하는 톤. */
.sc-trashbtn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12px; padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-muted);
}
.sc-trashbtn:hover { border-color: var(--color-banned-text); color: var(--color-banned-text); }
/* ★개수 배지 — 0 이면 조용히(회색), 1개 이상이면 **빨간 배지로 눈에 띄게**.
   사장님: "0개라 비활성처럼 보인다." → 비어 있을 때만 조용하고, 뭔가 있으면 알린다. */
.sc-trashbtn b {
  min-width: 17px; padding: 1px 5px; border-radius: 99px; text-align: center;
  font-size: 11px; font-weight: 700; background: var(--color-bg-input); color: var(--color-text-muted);
}
.sc-trashbtn.has b { background: var(--color-banned-text); color: #fff; }
.sc-trashbtn.on {
  border-style: solid; border-color: var(--color-banned-text);
  background: var(--color-banned-bg); color: var(--color-banned-text); font-weight: 600;
}
.sc-seg { display: flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; }
.sc-seg button { padding: 6px 12px; font-size: 12px; background: var(--color-bg-card); color: var(--color-text-secondary); border: 0; cursor: pointer; }
.sc-seg button.on { background: var(--color-primary); color: #fff; font-weight: 600; }
.sc-btn {
  background: var(--color-primary); color: #fff; font-weight: 600; font-size: var(--text-sm);
  border: 0; border-radius: 7px; padding: 8px 14px; cursor: pointer;
}
.sc-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.sc-btn:disabled { opacity: .5; cursor: default; }
.sc-btn.ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.sc-btn.ghost:hover { background: var(--color-bg-input); }
/* ★배경을 안 바꿔서 **파란 배경 + 빨간 글씨**가 나오고 있었다 = 거의 안 읽힌다
   (`.sc-btn` 이 background:primary 를 깔고 `.danger` 는 색만 바꿨다. 사장님 스크린샷 2026-07-20). */
.sc-btn.danger {
  background: transparent; color: var(--color-danger);
  border: 1px solid var(--color-border-danger);
}
.sc-btn.danger:hover:not(:disabled) { background: var(--color-banned-bg); }
/* ★재수집 = **파랑**(글자·아이콘·테두리만). 삭제(빨강)와 색으로 가른다(사장님 지시 2026-07-20).
   상단 툴바와 카드의 재수집이 같은 색이어야 "같은 동작"으로 읽힌다. */
.sc-btn.blue {
  background: transparent; color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.sc-btn.blue:hover:not(:disabled) { background: var(--color-primary-light); }
.sc-btn.sm { padding: 5px 10px; font-size: 12px; }

.sc-warn {
  background: var(--color-banned-bg); color: var(--color-banned-text);
  border: 1px solid var(--color-banned-border); border-radius: 8px;
  padding: 10px 14px; font-size: var(--text-sm); margin-bottom: 16px;
}

/* ── 빈 상태 ── */
.sc-empty { text-align: center; padding: 64px 20px; color: var(--color-text-secondary); }
.sc-empty h3 { margin: 0 0 6px; font-size: 17px; color: var(--color-text-primary); }
.sc-empty p { margin: 0; font-size: var(--text-sm); }

/* ── 카드 ── */
/* ★min 216→232 (사장님 2026-07-21): SKU 두 자리 + MOQ + 🔗 + 재수집이 **한 줄에** 들어갈 여유.
   한 행 카드 수는 거의 안 변한다(1680/232≈7 = 216 때와 동일). */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.sc-card {
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
  background: var(--color-bg-card); cursor: pointer; text-align: left; padding: 0;
  transition: border-color .15s, transform .15s;
}
.sc-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }

/* ── 선택(다중 삭제용) ── (사장님 요청 2026-07-19)
   ★카드 전체 = 상세 열기(판단하러 들어가는 주 동작)는 그대로 두고,
     선택은 **우상단 넓은 히트영역**으로 뺀다. 소싱은 100개 중 90개를 버리므로 선택도 잦다
     → 체크박스만 작게 두면 "정확히 눌러야 해서 피곤하다"(사장님이 이미 지적한 그 문제). */
.sc-card { position: relative; }
.sc-pick {
  position: absolute; top: 0; right: 0; width: 52px; height: 52px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 8px; cursor: pointer; z-index: 2; background: none; border: 0;
}
.sc-pick i {
  width: 24px; height: 24px; border-radius: 7px; display: block;
  border: 2px solid var(--color-border); background: var(--color-bg-card);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.sc-pick:hover i { border-color: var(--color-primary); }
.sc-card.picked { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary) inset; }
.sc-card.picked .sc-pick i {
  background: var(--color-primary); border-color: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}
/* ★옛 `.sc-selbar`(선택했을 때만 튀어나오던 별도 바) = **폐기** (사장님 지시 2026-07-20).
   툴바에 빈자리가 있는데도 바가 끼어들어 화면이 밀려 내려갔다.
   지금은 선택 버튼이 **툴바에 상시** 있고 평소엔 비활성이다. */
/* ★썸네일 = 132px 박스에 **가둔다**. (2026-07-19 실사고 fix)
   옛 코드는 `img { height: 100% }` 였는데, `.sc-thumb` 가 `display:grid` + `place-items:center`(=stretch 아님)라
   **퍼센트 높이가 해소되지 않아 `auto` 로 떨어졌다** → 이미지가 제 비율대로 246px 로 그려져 132px 박스를 114px 넘쳤다.
   게다가 `.sc-thumb` 는 positioned(relative)라 static 인 `.sc-body` 보다 **위에 칠해진다**
   → 제목·가격·배지가 이미지에 통째로 덮였다(사장님 실화면 catch).
   ★넘침(overflow) 0 으로 측정돼도 덮임(stacking)은 안 잡힌다 — 그래서 이건 눈으로 확인해야 한다. */
/* ★썸네일 = **상품 이미지 전체가 보여야 한다** (사장님 지시 2026-07-20).
   소싱은 100개를 훑어 90개를 버리는 일 = **이미지를 보고 판단한다.** 잘리면 판단 자체가 안 된다.
   옛 코드는 `132px 가로 박스 + object-fit: cover` 라 1:1 상품 이미지의 위아래를 잘라먹었다.
   → 박스를 **정사각(1:1)** 으로 + `contain`. 1688 이미지는 대부분 1:1 이라 꽉 차고,
     세로/가로로 긴 이미지는 여백이 생기더라도 **잘리지 않는다**(여백 < 못 보는 것). */
.sc-thumb { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--color-bg-input); display: grid; place-items: center; }
.sc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* 본문은 언제나 이미지 위 — 쌓임 사고 재발 방지(위 overflow 와 이중 방어) */
.sc-body { position: relative; z-index: 1; }
.sc-noimg { font-size: 12px; color: var(--color-text-muted); }
.sc-site {
  position: absolute; top: 7px; left: 7px; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; background: rgba(15, 23, 42, .74); color: #fff;
}
/* ★클릭 뜻이 영역마다 다르다(작업 보관함과 동일 규칙, 사장님 지시 2026-07-20):
   썸네일 = 선택(체크) / 본문 = 이 상품 열기. 그래서 **호버로 어느 영역인지 보여준다.** */
.sc-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--color-primary); opacity: 0; transition: opacity .12s;
}
.sc-card:not(.sc-card-trash) .sc-thumb:hover::after { opacity: .12; }
.sc-card:not(.sc-card-trash) .sc-body:hover { background: var(--color-bg-input); }
.sc-body { padding: 10px 12px 12px; transition: background .12s; }
.sc-name {
  font-size: var(--text-sm); font-weight: 600; line-height: 1.4; margin: 0 0 6px;
  color: var(--color-text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  /* ★3줄 고정(사장님 지시 2026-07-20) — 제목이 짧아도 3줄 높이를 차지해 카드 높이가 흔들리지 않는다.
     대부분의 1688 제목은 3줄 안에 다 들어간다. */
  min-height: calc(1.4em * 3);
}
.sc-cn { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }
/* ★위계 (사장님 지시 2026-07-20: "다 비슷비슷하고 숫자·텍스트뿐이라 시인성이 안 좋다").
   소싱 카드에서 **눈이 가야 할 순서** = ①원가 ②마진 ③옵션·MOQ.
   옛 화면은 셋 다 같은 크기·같은 회색이라 **어디를 봐야 할지 알려주지 않았다.** */
.sc-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.sc-price b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-primary); letter-spacing: -.01em; }
.sc-price span { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sc-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-badges:empty { display: none; }

/* 보조 정보(SKU·MOQ) = **배경 없이** 글자 + 숫자. 마진 배지와 나란히 알약이면 위계가 사라진다.
   ★재수집 버튼을 이 줄 오른쪽 끝에 얹어 카드 높이를 한 줄 줄인다(사장님 지시 2026-07-20). */
/* ★한 줄 강제(사장님 2026-07-21: 재수집 버튼이 아래로 내려가 2줄이 됐다 = 최혐).
   flex-wrap:nowrap + 요소 압축으로 [SKU·MOQ .... 🔗 재수집] 을 한 줄에 다 앉힌다. */
.sc-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: nowrap;
  font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
/* SKU·MOQ = 한 덩어리. ★절대 안 줄이고 안 자른다(flex:0 0 auto) — SKU 두 자리(24)일 때
   overflow:hidden 이 "MOQ 1" 의 숫자를 삼켰다(사장님 2026-07-21). 폭이 부족하면 카드를 넓힌다. */
.sc-meta-kv {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto;
}
.sc-meta-kv > span { white-space: nowrap; }
.sc-meta b { font-weight: 700; color: var(--color-text-secondary); }
.sc-meta .warn, .sc-meta .warn b { color: var(--color-banned-text); font-weight: 700; }
/* 🔗·재수집 = 안 줄고 안 쪼개진다. 재수집은 오른쪽 끝. */
.sc-meta .sc-act { white-space: nowrap; flex: 0 0 auto; }
.sc-meta .open { margin-left: auto; }   /* 🔗 부터 오른쪽으로 밀어 SKU·MOQ 와 사이를 벌린다 */
.sc-meta .reco { margin-left: 0; }

/* 카드 수집일 — 가장 낮은 위계(회색 작게). "언제 갱신됐나"는 참고 정보다. */
.sc-collected {
  margin-top: 6px; font-size: 10px; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; word-break: keep-all;
}
.sc-collected b { color: var(--color-text-secondary); font-weight: 700; }

/* ── 수집 이력 ── (2026-07-20 사장님 승인, 모달로 표시 — 인라인은 지저분) */
/* ★"마지막 수집" 블록 = URL 과 **같은 줄**, 오른쪽 끝 (사장님 지시 2026-07-20).
   별도 줄을 없애 세로 공간을 아낀다. */
.sc-urlrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-urlrow .sc-url { margin: 0; }
.sc-collected-lg {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  word-break: keep-all; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sc-collected-lg b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.sc-h-count { font-size: 12px; color: var(--color-primary); font-weight: 700; }
.sc-h-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.sc-h-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline;
  padding-top: 8px; border-top: 1px solid var(--color-border);
}
.sc-h-row:first-child { border-top: 0; }
.sc-h-when { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-h-what { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-h-first { font-size: 11px; font-weight: 700; color: var(--color-primary); }
.sc-h-none { font-size: 11px; color: var(--color-text-muted); }
.sc-h-chg {
  font-size: 11px; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--color-bg-input); color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.sc-h-chg.bad { background: var(--color-banned-bg); color: var(--color-banned-text); font-weight: 700; }
.sc-h-chg em { font-style: normal; opacity: .85; }

/* "값이 없다"도 정보다 — 점선으로 **비어 있음**을 보여준다(회색 덩어리에 묻히지 않게) */
.sb-empty {
  background: transparent; color: var(--color-text-muted);
  border: 1px dashed var(--color-border); font-weight: 600;
}

/* ── 카드 행동 버튼 (재수집 / 되살리기 / 완전삭제) ──
   ★한글은 아무 글자에서나 줄바꿈된다 → `word-break: keep-all` 로 어절을 지킨다(전역 피드백). */
.sc-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; word-break: keep-all; }
.sc-act {
  font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-bg-card);
  color: var(--color-text-secondary); transition: border-color .12s, color .12s, background .12s;
}
.sc-act:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.sc-act:disabled { opacity: .45; cursor: not-allowed; }
.sc-act.primary { border-color: var(--color-primary); color: var(--color-primary); }
.sc-act.primary:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
/* ★바로가기(🔗) = 재수집 옆 아이콘 버튼. 재수집보다 **약하게** 보여야 한다 —
   자주 쓰는 건 재수집이고, 이건 "그냥 열어볼 때" 쓰는 보조 동작이다(사장님 지시 2026-07-20). */
.sc-act.open { padding: 5px 7px; font-size: 12px; line-height: 1; }
.sc-act.danger { border-color: var(--color-banned-text); color: var(--color-banned-text); }
.sc-act.danger:hover:not(:disabled) { background: var(--color-banned-text); color: #fff; }
/* ★재수집 = **파랑**(글자·아이콘·테두리만, 배경은 그대로). 삭제(빨강)와 헷갈리지 않게 색으로 가른다
   (사장님 지시 2026-07-20). hover 도 배경을 채우지 않고 옅은 파랑 틴트만. */
.sc-act.reco { border-color: var(--color-primary); color: var(--color-primary); }
.sc-act.reco:hover:not(:disabled) { background: var(--color-primary-light); }
/* ★메타 줄의 버튼 = 한 줄에 다 들어가게 압축(사장님 2026-07-21). 아이콘·글자만 남기고 여백 최소. */
.sc-meta .sc-act { padding: 3px 7px; font-size: 11px; }
.sc-meta .sc-act.open { padding: 3px 6px; }

/* ── 휴지통 ── (2026-07-20 사장님 지시)
   ★자동 영구삭제 없음 = 사장님이 직접 누를 때만 사라진다. 이 프로젝트는 데이터유실 전과가 있다. */
.sc-chip-trash { margin-left: 6px; }
.sc-trashbar {
  padding: 9px 12px; margin-bottom: 12px; border-radius: 8px; word-break: keep-all;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.sc-card-trash:hover { transform: none; }
.sc-card-trash .sc-thumb img { opacity: .62; }   /* 지워진 것임을 한눈에 */
.sc-delwhen { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* ★조건부 요소가 **레이아웃을 흔들면 안 된다** (사장님 지시 2026-07-20).
   경고가 있을 때만 렌더하면 카드마다 버튼 높이가 들쭉날쭉해진다 —
   사장님: *"생겨날 걸 미리 알고 있는데, 생겨나도 디자인 변화가 없게 애초에 설계하라."*
   → ①경고는 **항상 자리를 차지**하고(없으면 `is-empty` = 안 보일 뿐 높이는 유지)
     ②버튼은 `margin-top:auto` 로 **항상 카드 바닥**에 붙는다(카드 높이가 달라도 줄이 맞는다). */
.sc-card-trash .sc-body { display: flex; flex-direction: column; height: 100%; }
.sc-card-trash .sc-acts { margin-top: auto; }
.sc-conflict {
  font-size: 11px; line-height: 1.45; word-break: keep-all; margin-bottom: 6px;
  padding: 5px 7px; border-radius: 6px; min-height: 2.9em;   /* 2줄 = 있든 없든 같은 높이 */
  background: var(--color-banned-bg); color: var(--color-banned-text);
}
.sc-conflict.is-empty { visibility: hidden; }

/* ── 인라인 진행바 (공유 컴포넌트 progress-inline.js, 2026-07-21) ────────────────
   워크샵 "최종 생성" 진행바 스타일을 공유한다(사장님 요청). 재수집·배치 등이 같이 쓴다.
   ★색은 tokens.css var(--*) 만. 채움바 그라데이션만 워크샵과 동일하게 맞춘다. */
.pbar {
  margin-bottom: 12px; padding: 11px 14px; border-radius: 10px; word-break: keep-all;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
}
.pbar.done { border-color: var(--color-success, #10b981); }
.pbar.bad  { border-color: var(--color-banned-text, #dc2626); }
.pbar-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.pbar-title { font-weight: 700; color: var(--color-text-primary); }
.pbar-count { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pbar-count b { color: var(--color-primary); font-size: 15px; }
.pbar.done .pbar-count b { color: var(--color-success, #10b981); }
/* ⏱ 경과 = 오른쪽으로 민다. 그 뒤 버튼과 사이를 벌린다. */
.pbar-elapsed { margin-left: auto; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pbar-elapsed b { color: var(--color-text-primary); font-weight: 700; }
.pbar-right { display: flex; align-items: center; gap: 6px; }
.pbar-track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--color-bg-section);
}
.pbar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), #6366f1);
  transition: width .4s ease;
}
.pbar.done .pbar-fill { background: linear-gradient(90deg, var(--color-success, #10b981), #34d399); }
.pbar.bad  .pbar-fill { background: linear-gradient(90deg, var(--color-banned-text, #dc2626), #f87171); }
.pbar-sub {
  margin-top: 7px; font-size: 12px; color: var(--color-text-muted); word-break: keep-all;
}
.pbar-sub b { color: var(--color-primary); font-weight: 700; }
.pbar-sub .bad { color: var(--color-banned-text, #dc2626); font-weight: 700; }
/* total 을 모를 때 = 흐르는 애니메이션(무엇이 도는 중이라는 신호). */
.pbar.indet .pbar-fill {
  width: 40% !important;
  animation: pbar-slide 1.3s ease-in-out infinite;
}
@keyframes pbar-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pbar.indet .pbar-fill { animation: none; }
}

.sb { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.sb-good { background: #DCFCE7; color: #047857; }
.sb-mid { background: var(--color-accent-light); color: #B45309; }
.sb-bad { background: var(--color-banned-bg); color: var(--color-banned-text); }
.sb-neutral { background: var(--color-bg-input); color: var(--color-text-secondary); }
.sb-queued, .sb-review { background: var(--color-primary-light); color: var(--color-primary-dark); }
.sb-hold { background: var(--color-accent-light); color: #B45309; }
.sb-done { background: #DCFCE7; color: #047857; }

/* ── 리스트 ── */
.sc-list { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-bg-card); }
.sc-row {
  display: grid; grid-template-columns: 44px 1fr 80px 72px 76px 96px 78px;
  gap: 10px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--color-border); cursor: pointer; font-size: 12px;
}
.sc-row:last-child { border-bottom: 0; }
.sc-row:hover { background: var(--color-bg-section); }
.sc-row-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; display: block; }
.sc-row-name b { display: block; font-size: var(--text-sm); color: var(--color-text-primary); }
.sc-row-name span { font-size: 11px; color: var(--color-text-muted); }
.sc-row-price, .sc-row-opt, .sc-row-moq { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

/* ── 상세 ── */
.sc-detail {
  /* ★우측 마진 패널이 잘렸다(2026-07-13 사장님 도그푸드).
     원인 = grid 아이템의 기본 min-width:auto → 내용이 칸보다 넓어도 안 줄어들고 넘친다.
     고침 = 우측을 고정폭으로 잡고 양쪽에 min-width:0. */
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  border: 1px solid var(--color-border); border-radius: 10px;
  overflow: hidden; background: var(--color-bg-card);
}
@media (max-width: 1100px) { .sc-detail { grid-template-columns: 1fr; } }
.sc-detail-l { padding: 18px; border-right: 1px solid var(--color-border); min-width: 0; }
@media (max-width: 900px) { .sc-detail-l { border-right: 0; border-bottom: 1px solid var(--color-border); } }
.sc-detail-r { padding: 18px; background: var(--color-bg-input); min-width: 0; }

.sc-imgset { margin-bottom: 18px; }
.sc-imgset:last-child { margin-bottom: 0; }
.sc-imgset h4 {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-secondary); font-weight: 700; margin: 0 0 7px;
}
.sc-imgset h4 span { color: var(--color-text-muted); font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 5px; }
/* ★사장님: "이미지를 좀 더 큼지막하게" (2026-07-13 도그푸드).
   가로 스크롤(flex) → 줄바꿈 grid 로. 한눈에 다 보이고 크기도 2배 이상. */
.sc-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sc-strip img {
  /* ★여기도 `cover` 였다 = 정사각이 아닌 이미지가 잘렸다. 판단용 이미지는 잘리면 안 된다(위 .sc-thumb 와 같은 이유). */
  width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; background: var(--color-bg-input); border-radius: 8px;
  border: 1px solid var(--color-border); display: block; cursor: zoom-in;
  transition: transform .12s, border-color .12s;
}
.sc-strip img:hover { transform: scale(1.04); border-color: var(--color-primary); }
/* 상세페이지 이미지 = 세로로 긴 게 많다 → 잘라내면 뭘 빼는지 알 수 없다. 전체를 보여준다. */
.sc-strip.tall { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.sc-strip.tall img { aspect-ratio: 3/4; object-fit: contain; background: var(--color-bg-input); }
.sc-none { font-size: 12px; color: var(--color-text-muted); }

.sc-tbl { border: 1px solid var(--color-border); border-radius: 8px; overflow-x: auto; }
.sc-tbl table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-tbl th {
  text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-secondary); font-weight: 700; padding: 8px;
  border-bottom: 1px solid var(--color-border);
}
.sc-tbl th.r, .sc-tbl td.r { text-align: right; }
.sc-tbl td { padding: 8px; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.sc-tbl tbody tr { cursor: pointer; }
.sc-tbl tbody tr:hover { background: var(--color-bg-section); }
.sc-tbl tbody tr.on { background: var(--color-primary-light); }
.sc-tbl td.num { font-variant-numeric: tabular-nums; }
.sc-tbl td em { color: var(--color-text-muted); font-style: normal; }

/* ── 옵션 매트릭스 (O-27, 2026-07-20 사장님 요청) ────────────────────────────
   사장님: *"24줄 나열 답없음. 시인성·UI·UX 다 좋게 재설계."*
   색상 12 × 사이즈 2 를 축으로 세우면 12행 × 2열 = 같은 색의 가격차가 한 줄에서 보인다.
   ★가로 스크롤은 **표 안에서만** 일어나게 한다(overflow-x:auto) — 페이지 본문이 좌우로
     밀리면 사장님이 마진 패널을 놓친다. */
.sc-mx-wrap { border: 1px solid var(--color-border); border-radius: 8px; overflow-x: auto; }
.sc-mx { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-mx thead th {
  text-align: center; font-size: 10px; letter-spacing: .04em; font-weight: 700;
  color: var(--color-text-secondary); padding: 7px 8px;
  border-bottom: 1px solid var(--color-border); background: var(--color-bg-section);
  position: sticky; top: 0;
}
.sc-mx thead th span { display: block; font-weight: 400; font-size: 9px; color: var(--color-text-muted); }
.sc-mx-corner { text-align: left !important; }

/* 행 머리 = 색상. 썸네일을 같이 보여줘야 사장님이 "무슨 색인지" 글자로 상상하지 않는다.
   ★`th` 자체를 flex 로 만들면 **표 셀이 아니게 되어 행 정렬이 깨진다** → 안쪽 래퍼를 flex 로. */
.sc-mx-rowh {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border);
  min-width: 132px; vertical-align: middle;
}
.sc-mx-rowh-in { display: flex; align-items: center; gap: 7px; }
.sc-mx-rowh img {
  width: 30px; height: 30px; object-fit: cover; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid var(--color-border); background: var(--color-bg-section);
}
.sc-mx-rowh span { display: flex; flex-direction: column; min-width: 0; }
.sc-mx-rowh b { font-size: 11.5px; color: var(--color-text-primary); font-weight: 600; }
.sc-mx-rowh i {
  font-style: normal; font-size: 9.5px; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}

/* 셀 하나 = 옵션 하나. 클릭하면 마진 재계산(계약 = data-oid + data-price). */
.sc-mx-cell {
  position: relative; text-align: center; cursor: pointer; padding: 7px 8px;
  border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums; min-width: 92px;
}
.sc-mx-cell:hover { background: var(--color-bg-section); }
.sc-mx-cell.on { background: var(--color-primary-light); box-shadow: inset 0 0 0 2px var(--color-primary); }
.sc-mx-cell b { display: block; font-size: 13px; color: var(--color-text-primary); }
.sc-mx-cell span { display: block; font-size: 10px; color: var(--color-text-secondary); }
/* ★무게 없음 = 배대지비를 못 낸다 = 마진 차단. 눈에 띄어야 사장님이 채워 넣으신다. */
.sc-mx-cell i { display: block; font-style: normal; font-size: 9.5px; color: var(--color-text-muted); }
.sc-mx-cell i:not(:empty) { margin-top: 1px; }
.sc-mx-empty {
  text-align: center; color: var(--color-text-muted); padding: 7px 8px;
  border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
              var(--color-bg-section) 4px, var(--color-bg-section) 8px);
}
/* ✕ = 그 옵션 삭제. 평소엔 흐리게, 셀에 올리면 또렷하게(오조작 방지). */
.sc-mx-x {
  position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; line-height: 1;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  color: var(--color-text-muted); font-size: 11px; opacity: 0; transition: opacity .12s;
}
.sc-mx-cell:hover .sc-mx-x, .sc-tbl tr:hover .sc-mx-x { opacity: 1; }
.sc-mx-x:hover { background: var(--color-danger, #d33); color: #fff; }
.sc-mx-x:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); }
.sc-tbl .sc-mx-x { position: static; opacity: .45; }
.sc-mx-hint { font-size: 10.5px; color: var(--color-text-muted); padding: 6px 8px; margin: 0; }

/* 옵션 휴지통 — 이미지·상품 휴지통과 같은 모양(사장님 원칙 = 같은 기능은 어디서든 통일). */
.sc-opt-trash { margin-top: 10px; border: 1px dashed var(--color-border); border-radius: 8px; padding: 8px 10px; }
.sc-opt-trash h5 { margin: 0 0 6px; font-size: 11px; color: var(--color-text-secondary); }
.sc-opt-trash h5 span { font-weight: 400; color: var(--color-text-muted); }
.sc-opt-trash ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-opt-trash li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.sc-opt-trash li b { color: var(--color-text-secondary); font-weight: 600; }
.sc-opt-trash li i { font-style: normal; color: var(--color-text-muted); margin-left: 6px; }
/* ★지운 옵션도 이미지 휴지통처럼 **선택해서 한 번에** 되살린다 (사장님 지적 2026-07-23 = 일관성).
   선택 표시(✓)는 이미지 휴지통과 같은 `.sc-im-pick` 을 재사용한다. */
.sc-opt-trash h5 { display: flex; align-items: center; gap: 8px; }
.sc-opt-trash h5 .sc-allsel { margin-left: auto; }
.sc-optdel { cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: 0 -6px;
             border: 1px solid transparent; transition: background .12s, border-color .12s; }
.sc-optdel:hover { background: var(--color-bg-hover, rgba(127,127,127,.08)); }
.sc-optdel .sc-im-pick { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 15px;
  border: 1px solid var(--color-border); color: transparent; font-size: 10px; line-height: 1; }
.sc-optdel.picked { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.45); }
.sc-optdel.picked .sc-im-pick { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.sc-opt-trash-why { margin-top: 8px; font-size: 10.5px; line-height: 1.5;
  color: var(--color-text-muted); border-top: 1px dashed var(--color-border); padding-top: 6px; }

/* ── 마진 패널 ── */
.sc-m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sc-m-head h3 { font-size: var(--text-sm); margin: 0; color: var(--color-text-primary); }
.sc-m-head h3 span { color: var(--color-text-secondary); font-weight: 400; }
.sc-fx {
  font-size: 11px; color: var(--color-text-secondary); background: var(--color-bg-card);
  border: 1px solid var(--color-border); border-radius: 99px; padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.sc-fx b { color: var(--color-success); }

/* ★마진 패널 입력칸이 오른쪽으로 잘렸다(2026-07-13 사장님 도그푸드 2회 catch).
   원인 = ①grid 아이템의 기본 min-width:auto ②<input> 은 지정 안 하면 **브라우저 기본폭(약 180px)**을 쓴다.
   2열이라 180×2 + gap 이 패널 폭을 넘어버린다.
   고침 = 칸을 minmax(0,1fr) 로, 입력은 width:100% + min-width:0 (칸에 맞춰 줄어들게). */
.sc-m-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.sc-m-inputs label {
  font-size: 11px; color: var(--color-text-secondary);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.sc-m-inputs input, .sc-m-inputs select {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 6px 9px; font-size: var(--text-sm);
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}

/* ── 판매가 = 주인공 (사장님 지시 2026-07-20) ────────────────────────────────
   "우리는 판매가를 보기 위함이잖아. 그럼 판매가를 좀 두드러지게 표시가 되게 해줘야지."
   옛 화면은 판매가가 다른 입력칸과 똑같이 생겨서 결과인지 입력인지 구분이 안 됐다. */
.sc-m-hero {
  border: 2px solid var(--color-primary); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--color-bg-card);
}
.sc-m-hero-h { font-size: 11px; font-weight: 700; color: var(--color-primary-dark); margin-bottom: 4px; }
.sc-m-hero-v {
  font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15;
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.sc-m-hero-m { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.sc-m-hero-m b { color: var(--color-text-primary); }
.sc-m-hero.empty { border-style: dashed; border-color: var(--color-border); }
.sc-m-hero.empty .sc-m-hero-h { color: var(--color-text-muted); font-weight: 400; }
/* ★차단 = 빨강. 숫자를 안 주는 게 정상 동작이라는 걸 사장님이 알아보셔야 한다. */
.sc-m-hero.blocked { border-color: var(--color-banned-text); }
.sc-m-hero.blocked .sc-m-hero-h { color: var(--color-banned-text); }
.sc-m-hero-why { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }

/* ── 돈이 흐르는 순서 vs 한 번 맞춰두는 설정 (사장님 지시 2026-07-20) ──────────
   섞여 있으면 "지금 뭘 넣어야 하나"가 안 보인다. */
.sc-m-flow, .sc-m-set {
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 12px; margin-bottom: 12px;
}
.sc-m-flow { border-color: var(--color-primary); }
.sc-m-set  { background: var(--color-bg-subtle, rgba(127,127,127,.06)); }
.sc-m-grp-h {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  margin-bottom: 10px; word-break: keep-all;
}
.sc-m-flow .sc-m-grp-h { color: var(--color-primary-dark); }
.sc-m-set .sc-m-inputs { margin-bottom: 0; }

/* 1·2·3·4 단계 — 돈이 지나가는 순서를 번호로 못박는다. */
.sc-m-step {
  display: grid; grid-template-columns: 20px 1fr; align-items: center;
  column-gap: 8px; row-gap: 3px;
  font-size: 11px; color: var(--color-text-secondary);
  margin-bottom: 8px; min-width: 0;
}
.sc-m-step:last-child { margin-bottom: 0; }
.sc-m-step > i {
  grid-row: 1 / span 2; align-self: start; margin-top: 2px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--color-primary); color: #fff;
  font-size: 11px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.sc-m-step > input {
  grid-column: 2; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 6px 9px; font-size: var(--text-sm);
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.sc-m-step > .sc-auto-badge { grid-column: 2; }

.sc-m-hint { font-size: 12px; color: var(--color-text-muted); padding: 18px; text-align: center; }
.sc-m-rows { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 2px 12px; margin-bottom: 12px; }
.sc-m-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm);
}
.sc-m-row:last-child { border-bottom: 0; }
.sc-m-row span { color: var(--color-text-secondary); }
.sc-m-row b { font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.sc-m-row.minus b { color: var(--color-danger); }
.sc-m-row.tbd { opacity: .55; }
.sc-m-row.tbd b { font-weight: 400; font-style: italic; color: var(--color-text-muted); }

.sc-m-out {
  background: var(--color-text-primary); color: var(--color-text-inverse);
  border-radius: 8px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-end;
}
.sc-m-out span { font-size: 10px; opacity: .72; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; display: block; }
.sc-m-out b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-m-out .r { text-align: right; }
.sc-m-out b.g { color: #4ADE80; } .sc-m-out b.m { color: #FBBF24; } .sc-m-out b.b { color: #F87171; }

.sc-m-incomplete {
  margin-top: 10px; font-size: 11px; padding: 8px 10px; border-radius: 6px;
  background: var(--color-banned-bg); color: var(--color-banned-text);
}

/* ★대행수수료(= 부가세 과세표준). 구매대행의 매출은 판매가가 아니라 이것이다.
   세금이 어디에 붙는지 사장님이 눈으로 확인할 수 있어야 한다. */
.sc-m-agency {
  margin-top: 8px; font-size: 12px; padding: 8px 10px; border-radius: 6px;
  background: var(--color-surface-2, #f4f4f5); display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; flex-wrap: wrap; word-break: keep-all;
}
.sc-m-agency b { font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-m-agency span { font-size: 10px; opacity: .7; width: 100%; }

/* ★단위 경고 = "이 마진 숫자를 믿지 마라". 빠진 원가(sc-m-incomplete)보다 위험하다 —
   빠진 원가는 마진을 좋아 보이게 할 뿐이지만, 단위가 다르면 **원가 자체가 딴 값**이다.
   그래서 더 강하게(빨간 테두리 + 굵게) 표시한다. 저대비 회색 금지(전역 §11-D). */
.sc-m-unitwarn {
  margin-top: 10px; font-size: 12px; line-height: 1.6; padding: 10px 12px; border-radius: 6px;
  background: #7F1D1D; color: #FEE2E2; border: 2px solid #EF4444; font-weight: 600;
}
.sc-m-unitwarn b { color: #FFF; }

/* 파서가 못 뽑은 것 — 조용히 비워두면 사장님이 왜 빈지 모른다. */
.sc-notes {
  margin-top: 10px; font-size: 12px; padding: 9px 12px; border-radius: 6px;
  background: var(--color-banned-bg); color: var(--color-banned-text);
}
.sc-notes b { display: block; margin-bottom: 4px; }
.sc-notes ul { margin: 0; padding-left: 18px; line-height: 1.6; }

/* 품절로 제외한 옵션 — **접기가 기본값**이다 (사장님 요청 2026-08-02:
   "어떤 걸 제외했는지도 알려주면 좋겠는데, 많을 수도 있으니 접기를 기본값으로").
   ★목록이 수십 개일 수 있어 펼친 채 두면 상세 화면을 통째로 밀어낸다. */
.sc-soldout { margin-top: 6px; }
.sc-soldout > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 0; user-select: none;
}
.sc-soldout > summary::-webkit-details-marker { display: none; }
.sc-soldout > summary::before { content: "▸"; font-size: 10px; line-height: 1; }
.sc-soldout[open] > summary::before { content: "▾"; }
.sc-soldout > summary b { display: inline; margin: 0; }
.sc-soldout ul { margin: 6px 0 0; max-height: 220px; overflow-y: auto; }
/* 상한에 걸려 잘렸다는 사실 — 조용히 자른 목록은 "전부"로 읽힌다. */
.sc-so-more { opacity: .75; font-weight: 400; }
.sc-so-none { margin: 6px 0 0; opacity: .8; }

/* 계단가 — 1688 도매는 많이 사면 싸진다. 대표가 하나만 보면 판단을 놓친다. */
.sc-ladder { margin-top: 10px; font-size: 12px; }
.sc-ladder b { display: block; margin-bottom: 4px; color: var(--color-text-secondary); }
.sc-ladder table { border-collapse: collapse; }
.sc-ladder td { padding: 3px 12px 3px 0; }
.sc-ladder td.r { text-align: right; }
.sc-ladder td.num { font-variant-numeric: tabular-nums; }
.sc-tbd {
  margin-top: 12px; font-size: 11px; line-height: 1.6; padding: 9px 11px; border-radius: 6px;
  background: var(--color-accent-light); color: var(--color-text-primary);
}
/* ★버튼이 4개가 되면서 flex:1 로는 폭이 모자라 글자가 어절 중간에서 깨졌다
   (사장님 지적 2026-07-20: "레이아웃을 변경하던가 해야지 이게뭐야").
   → 2×2 그리드. 위 = 이 상품을 어디로 보낼까(주 액션), 아래 = 상태 바꾸기(부 액션). */
.sc-m-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
/* 한글은 CSS 기본값이 아무 글자에서나 줄바꿈한다 → 어절 단위로만 끊기게 강제 */
.sc-m-actions .sc-btn { width: 100%; word-break: keep-all; }

/* ── 판매가 제시 (사장님은 판매가를 입력하지 않는다 = 목표 마진 역산) ── */
.sc-m-suggest {
  border: 1px solid var(--color-primary); background: var(--color-primary-light); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.sc-m-suggest-h { font-size: 13px; margin-bottom: 8px; }
.sc-m-suggest-h span { color: var(--color-text-muted); font-size: 12px; }
.sc-m-suggest-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-price-pick {
  flex: 1; min-width: 120px; position: relative; cursor: pointer; text-align: left;
  border: 1px solid var(--color-border); border-radius: 8px; background: #fff;
  padding: 8px 10px; transition: all .12s;
}
.sc-price-pick:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.sc-price-pick b { display: block; font-size: 16px; }
.sc-price-pick span { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.sc-price-pick.best { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-bg-input) inset; }
.sc-price-pick.best em {
  position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 10px;
  background: var(--color-primary); color: #fff; border-radius: 999px; padding: 1px 7px;
}
/* 목표 마진에 못 미치는 후보 = 숨기지 않고 그렇다고 표시한다 */
.sc-price-pick.under b { color: var(--color-banned-text); }
.sc-m-suggest-note { font-size: 11px; color: var(--color-text-muted); margin-top: 6px; }
.sc-m-sale .sc-m-opt-tag { font-size: 10px; color: var(--color-text-muted); font-weight: 400; }

/* 배대지가 단가표에서 자동으로 나왔음을 금액과 함께 보여준다 */
.sc-auto-badge { display: block; font-size: 11px; margin-top: 3px; min-height: 14px; }
/* ★자동 계산된 배대지 금액 = 사장님이 단가표를 올린 **결과**다. 작은 회색 글씨면 못 보신다
   (2026-07-20: 서버는 계산하고 있었는데 사장님 눈엔 "아무것도 안 한 것" 이었다).
   금액이 나온 상태만 박스로 띄워 눈에 걸리게 한다. */
.sc-auto-badge.on {
  color: var(--color-primary-dark); font-weight: 700;
  background: var(--color-primary-bg, rgba(37, 99, 235, .08));
  border: 1px solid var(--color-primary); border-radius: 6px;
  padding: 4px 8px; margin-top: 4px;
}
.sc-auto-badge.manual { color: var(--color-banned-text); }
/* ★"옵션 중 최대"·"두 출처 불일치" 로 잡힌 무게 = 실측이 아니라 **보수적 추정**이다.
   회색으로 흘려보내면 사장님이 실측값으로 오해하고 그 배송비로 발주 판단을 하신다(I-2c). */
.sc-auto-badge.warn {
  color: var(--color-warning); font-weight: 600;
}

/* 아침 검수 분류 — "완료" 옆에 **무엇을 봐야 하는지**를 붙인다(O-54 A팀).
   ★human_review 는 눈에 걸려야 한다 — 그걸 놓치면 장애가 그대로 출고된다. */
.sc-bucket {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 6px; font-size: 10px; font-weight: 700; vertical-align: middle;
}
.sc-bucket.ok  { background: rgba(34, 197, 94, .14); color: #15803D; }
.sc-bucket.qc  { background: rgba(245, 158, 11, .16); color: #B45309; }
.sc-bucket.hr  { background: rgba(239, 68, 68, .14); color: #B91C1C; }
.sc-bucket.bad { background: rgba(239, 68, 68, .22); color: #991B1B; }

/* ── 대기열 ── */
.sc-q { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-bg-card); }
.sc-q-row {
  display: grid; grid-template-columns: 30px 1fr 90px 1fr 64px; gap: 10px;
  align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--color-border); font-size: 12px;
}
.sc-q-row:last-child { border-bottom: 0; }
.sc-q-row.hd {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-secondary); font-weight: 700; background: var(--color-bg-input);
}
.sc-q-row .n { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sc-q-name { display: flex; align-items: center; gap: 8px; }
.sc-q-name img, .sc-q-name i { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; background: var(--color-bg-input); flex: 0 0 auto; display: block; }
.sc-q-name b { font-size: var(--text-sm); color: var(--color-text-primary); }
.sc-q-name em { font-style: normal; color: var(--color-text-muted); font-size: 11px; }
.sc-dest { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.sc-dest.free { background: var(--color-accent-light); color: var(--color-banned-text); }
.sc-stat { font-size: 11px; font-weight: 700; }
.sc-stat.wait { color: var(--color-text-muted); }
.sc-stat.run { color: var(--color-primary); }
.sc-stat.done { color: var(--color-success); }
.sc-stat.fail { color: var(--color-danger); }

/* ── 토큰 모달 (바깥 클릭 = 닫기, 전역 §11-A) ── */
.sc-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; }
.sc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.sc-modal-panel {
  position: relative; z-index: 1; background: var(--color-bg-card);
  border-radius: 12px; padding: 22px; width: min(520px, 92vw);
  /* ★경계 계약의 정본 = `app.css` **맨 끝** 공통 블록이다. 그런데 `sourcing.css` 는
     `app.css` **뒤에** 로드되므로(index.html 11 → 13) 여기 값이 이긴다 →
     **같은 값을 써야 한다.** 바꿀 땐 두 곳을 같이 고쳐라(§11-B-1). */
  border: 1px solid var(--color-border-floating);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .14),
              0 0 0 4px rgba(15, 23, 42, .05),
              0 24px 80px rgba(15, 23, 42, .24);
  max-height: 82vh; overflow: auto;
}
.sc-modal-panel h3 { margin: 0 0 6px; font-size: 17px; color: var(--color-text-primary); }
.sc-modal-panel > p { margin: 0 0 14px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.sc-modal-foot { margin-top: 16px; display: flex; justify-content: flex-end; }
.sc-token-new {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: var(--color-accent-light); font-size: 12px;
}
.sc-token-new code {
  display: block; margin: 8px 0; padding: 8px; border-radius: 6px;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  word-break: break-all; font-size: 11px; color: var(--color-text-primary);
}
.sc-token-list { margin: 14px 0; border-top: 1px solid var(--color-border); padding-top: 12px; }
.sc-token-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.sc-token-row code { color: var(--color-text-accent); }
.sc-token-when { margin-left: auto; color: var(--color-text-muted); font-size: 11px; }

/* 확장 연결 안내 — 사장님이 "이게 뭔지 모르겠다"고 하셨다(2026-07-13 도그푸드).
   확장을 아직 설치도 안 한 상태를 전제로, 설치 단계부터 적는다. */
.sc-modal-lead { font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
.sc-steps { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.sc-steps code {
  background: var(--color-accent-light); padding: 1px 5px; border-radius: 4px;
  font-size: 12px; word-break: break-all;
}
.sc-modal-note {
  font-size: 12px; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px;
  background: var(--color-banned-bg); color: var(--color-banned-text);
}

/* 옵션 = 한국어 먼저, 원문은 아래 작게 (사장님이 읽는 건 한국어다) */
.sc-opt-cn { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ★한글은 CSS 기본값(word-break:normal)에서 **아무 글자에서나** 줄바꿈된다(중국어와 같은 취급).
   그래서 아무 조치를 안 하면 버튼이 "현지화 대기열 / 에 넣기" 처럼 **조사가 갈라진다**(2026-07-13 사장님 catch).
   keep-all = 어절 단위 유지. 한 줄에 안 들어가면 어절 사이에서만 끊긴다.
   ★한 곳만 고치면 다른 버튼에서 또 난다 → 이 화면의 텍스트 전체에 건다. */
.sc-wrap, .sc-wrap button, .sc-wrap h1, .sc-wrap h3, .sc-wrap h4, .sc-wrap p,
.sc-wrap td, .sc-wrap th, .sc-modal, .sc-modal button {
  word-break: keep-all;
  overflow-wrap: break-word;   /* 단, 끊을 데가 없는 긴 URL 은 넘치지 않게 */
}
/* 버튼이 2행이 되어도 높이가 무너지지 않게 */
.sc-m-actions .sc-btn { line-height: 1.35; min-height: 40px; }

/* ── 이미지 제외 / 확대 ──
   ★사장님 결정 2026-07-13:
     - **제외가 확대보다 훨씬 잦다** → 썸네일 아무 데나 클릭 = 제외/포함(넓은 영역)
     - **드래그로 쓸기** = 여러 장 한 번에 (상세 30~40장 상품에서 40번 클릭은 고문)
     - **Shift+클릭** = 범위 (상세는 보통 뒤쪽이 통째로 쓸모없다 → 두 번으로 끝)
     - **Ctrl+Z** = 되돌리기
     - 확대(⤢)는 **마우스 올릴 때만** 뜬다 — 항상 보이면 "돋보기 도배"라 정신없다(사장님). */
.sc-strip { user-select: none; }         /* 드래그로 쓸 때 글자가 선택되면 지저분하다 */

.sc-im {
  position: relative; display: block; cursor: pointer;
  border-radius: 8px; transition: transform .1s;
}
.sc-im:hover { transform: translateY(-1px); }
.sc-im img { width: 100%; pointer-events: none; }   /* 이미지가 드래그 이벤트를 삼키지 않게 */
.sc-im:hover img { border-color: var(--color-primary); }

/* 제외됨 = 흐리게 + 빨간 테두리 + "제외" 도장. 한눈에 구분돼야 한다. */
.sc-im.off img { opacity: .2; border-color: var(--color-border-danger); }
.sc-im-x {
  display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .05em;
  background: var(--color-danger); padding: 3px 9px; border-radius: 5px;
  pointer-events: none; white-space: nowrap;
}
.sc-im.off .sc-im-x { display: block; }

/* ★선택(picked) — 클릭/드래그/Shift 로 고른 것(2026-07-20 사장님: 제외/포함 토글 → 선택 모델).
   파란 테두리 + 좌상단 ✓. 제외된(off) 것을 선택하면 흐린 채로 테두리·체크가 겹쳐 "복원 대상"으로 보인다. */
.sc-im.picked { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.sc-im-pick {
  display: none; position: absolute; top: 5px; left: 5px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
}
.sc-im.picked .sc-im-pick { display: flex; }

/* 선택 툴바 — 하나라도 고르면 나타난다. 삭제=제외(off) / 복원=포함. */
.sc-imtools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px;
  padding: 7px 10px; border-radius: 8px; background: var(--color-bg-card);
  border: 1px solid var(--color-primary); font-size: var(--text-sm); word-break: keep-all;
}
.sc-imtools-n { font-weight: 700; color: var(--color-primary); }
.sc-imtool {
  padding: 4px 11px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--color-primary); background: var(--color-bg-input); color: var(--color-text-primary);
}
.sc-imtool.danger { border-color: var(--color-border-danger); color: var(--color-banned-text); background: transparent; }
.sc-imtool.ghost { border-color: transparent; color: var(--color-text-muted); background: transparent; }

/* 이미지 휴지통 — ★눈에 확 띄게(2026-07-20 사장님: 회색이라 몰랐다). 빨강 배경 + 굵은 테두리. */
.sc-imgtrash { border: 2px solid var(--color-border-danger); border-radius: 10px; padding: 14px; margin-top: 18px;
               background: rgba(220,38,38,.06); }
.sc-imgtrash > h4 { color: var(--color-banned-text); font-size: 14px; }
.sc-imgtrash > h4 span { color: var(--color-text-secondary); }
.sc-im-del img { opacity: .55; }
.sc-im-del.picked img { opacity: 1; }

/* ⤢ 확대 — 평소엔 숨김. 마우스를 올려야 우상단에 뜬다. */
.sc-im-zoom {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: rgba(15,23,42,.72); color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.sc-im:hover .sc-im-zoom { opacity: 1; }
.sc-im-zoom:hover { background: var(--color-primary); }

/* 조작법 안내 — 처음 보면 드래그·Shift 를 모른다. */
.sc-im-help {
  font-size: 11px; color: var(--color-text-muted); margin: 4px 0 8px; line-height: 1.6;
}
.sc-im-help b { color: var(--color-text-secondary); }

.sc-allsel {
  float: right; font-size: 11px; font-weight: 600; color: var(--color-primary);
  background: none; border: 0; cursor: pointer; padding: 0; letter-spacing: 0; text-transform: none;
}

/* ── 확대 보기(라이트박스) ──
   ★사장님 catch: 돋보기 커서가 뜨는데 누르면 '제외'가 됐다 = 커서가 거짓말.
     이제 이미지 클릭 = 확대 / 체크박스 = 제외. */
#sc-lb { position: fixed; inset: 0; z-index: 9000; display: none; background: rgba(0,0,0,.88); }
#sc-lb.on { display: grid; place-items: center; }
#sc-lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.sc-lb-bar {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; color: #fff; font-size: 13px;
  background: linear-gradient(rgba(0,0,0,.65), transparent);
}
.sc-lb-bar b { font-variant-numeric: tabular-nums; }
.sc-lb-btn {
  background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; text-decoration: none; font-weight: 600;
}
.sc-lb-btn:hover { background: rgba(255,255,255,.32); }
.sc-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.16); color: #fff; border: 0; cursor: pointer;
  width: 46px; height: 72px; font-size: 26px; border-radius: 8px;
}
.sc-lb-nav:hover { background: rgba(255,255,255,.32); }
.sc-lb-prev { left: 14px; }
.sc-lb-next { right: 14px; }


/* ── 배대지 단가표 모달 ─────────────────────────────────────────────────────
   ★배송비는 무게 AND 단가표가 둘 다 있어야 나온다. 표가 없으면 계산이 차단된다 —
     그 사실을 화면이 숨기지 않는다(0 으로 채우면 마진이 거짓으로 좋아 보인다). */
.sc-rate-cur { margin: 10px 0; }
.sc-rate-meta {
  font-size: 12px; color: var(--color-text-secondary);
  padding: 6px 0; border-bottom: 1px solid var(--color-border);
}
/* ★display:block 을 table 에 직접 주면 width:100% 가 죽는다(표가 절반만 찬다 — 실측).
   스크롤은 감싸는 div 가 맡고, table 은 table 로 둔다. */
.sc-rate-scroll { max-height: 220px; overflow-y: auto; margin: 8px 0; }
.sc-rate-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-rate-tbl th, .sc-rate-tbl td {
  padding: 5px 8px; border-bottom: 1px solid var(--color-border); text-align: left;
}
.sc-rate-tbl th { color: var(--color-text-secondary); font-weight: 600; font-size: 12px; }
.sc-rate-tbl td.r, .sc-rate-tbl th.r { text-align: right; }
.sc-rate-pack {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; margin-top: 8px;
}
.sc-rate-pack input { width: 90px; }
/* 포장 무게를 사장님이 떠올릴 필요 없게 = 눌러서 고르는 기본값 (2026-07-20 사장님 지적) */
.sc-rate-pack-pick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sc-chip {
  padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 999px;
  background: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .12s;
}
.sc-chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.sc-rate-file { display: block; margin: 12px 0 6px; }
.sc-ok {
  background: var(--color-success-bg, #ecfdf5); color: var(--color-success-text, #065f46);
  border: 1px solid var(--color-success-border, #a7f3d0);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 8px 0;
  word-break: keep-all;
}

/* ── 배치 실행 패널 (2026-07-20 사장님: "업무 중에도 배치를 쓸 수 있어야지") ── */
/* ★색은 tokens.css 의 var(--*) 만 쓴다(이 파일 상단 규칙). 임의 색상값 금지. */
.sc-q-run { margin: 12px 0; }
.sc-run-idle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-run-real { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.sc-run-real b { color: var(--color-banned-text); }      /* 유료 = 경고색 */
.sc-run-last {
  width: 100%; font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: var(--color-bg-input); color: var(--color-text-muted);
}
.sc-run-last.failed { background: var(--color-banned-bg); color: var(--color-banned-text); }
.sc-run-last.done { background: var(--color-primary-light); color: var(--color-primary-dark); }
.sc-run-live {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--color-primary); background: var(--color-primary-light);
  border-radius: 10px; padding: 10px 12px;
}
.sc-run-bar {
  flex: 1 1 100%; height: 6px; border-radius: 999px;
  background: var(--color-bg-card); overflow: hidden;
}
.sc-run-bar i { display: block; height: 100%; background: var(--color-primary); transition: width .3s; }
.sc-run-msg { flex: 1; font-size: 12px; }
.sc-run-msg span { display: block; color: var(--color-text-secondary); margin-top: 2px; }
/* 배치 예약 — 색은 tokens.css var(--*) 만 */
.sc-sched { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.sc-sched-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.sc-sched-on, .sc-sched-real { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sc-sched-real b { color: var(--color-banned-text); }
.sc-sched-next { margin-left: auto; color: var(--color-text-secondary); }
.sc-sched-note { font-size: 11px; color: var(--color-text-muted); margin-top: 6px; }

/* ★예약 설정을 못 읽었을 때 — 패널이 사라지면 "예약이 꺼졌다" 로 읽힌다(2026-07-20). */
.sc-sched-fail {
  font-size: 12px; color: var(--color-banned-text);
  background: var(--color-banned-bg); border: 1px solid var(--color-banned-border);
  border-radius: 8px; padding: 10px 12px; word-break: keep-all;
}

/* ── 행 썸네일 호버 대형 프리뷰 (윈들리 ② — 사장님 채택 2026-07-22) ──
   매트릭스 행 헤더의 작은 SKU 사진에 마우스 오버 = 320px 프리뷰(24행에서 어느 옵션인지 즉시 확인).
   pointer-events:none = 프리뷰가 마우스를 삼켜 mouseout 이 튀는 것 방지. */
.sc-thumb-pop {
  position: fixed;
  z-index: 210;
  pointer-events: none;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #E5E7EB);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  padding: 4px;
}
.sc-thumb-pop img {
  width: 320px;
  height: 320px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background: #fff;
}