/* ============================================================
   SONA LIVE AI — 연관상품서치 워크스페이스 (Related Product Search V1)
   ------------------------------------------------------------
   모든 셀렉터는 #screen-related 하위 또는 rw- 접두사로 스코프되어
   상품분석·검색어분석·매출종합분석에 영향을 주지 않는다.
   색·반경·그림자·타이포는 전부 app.css 토큰을 그대로 쓴다.
   많은 상품을 빠르게 훑는 화면이므로 밀도를 우선한다.
   ============================================================ */
#screen-related{ display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-bottom:150px }
#screen-related[hidden]{ display:none }
#screen-related .num{ font-variant-numeric:tabular-nums }

.rw-lead{ margin:0; font-size:12px; color:var(--ink-3) }

/* ---- 상단: 좌 카테고리 칩 / 우 샘플 안내 ---- */
.rw-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.rw-chips{ display:flex; gap:6px; flex-wrap:wrap }
.rw-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); font-size:12px; font-weight:500; color:var(--ink-2);
}
.rw-chip:hover{ border-color:var(--pink-line); color:var(--pink-text) }
.rw-chip.on{ background:var(--pink-soft); border-color:var(--pink-line); color:var(--pink-text); font-weight:600 }
.rw-chip .n{ font-size:11px; color:var(--ink-3) }
.rw-chip.on .n{ color:var(--pink-text) }

/* 샘플 안내 — 실데이터로 오인되지 않도록 중립 회색 (경고 스타일 아님) */
.rw-sample{ margin:0 0 0 auto; display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-3) }
.rw-sample[hidden]{ display:none }
.rw-na{
  padding:2px 7px; border-radius:6px; border:1px solid var(--border);
  background:var(--card-soft); color:var(--ink-3); font-size:10.5px; font-weight:700;
}

/* ---- 작업 행: [추출 상품] ↔ [SONA 후보들] ---- */
.rw-rows{ display:flex; flex-direction:column; gap:10px }
.rw-row{
  display:grid; grid-template-columns:348px 22px minmax(0,1fr); align-items:stretch; gap:10px;
  padding:11px 13px; background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow);
}
.rw-link{ display:grid; place-items:center; color:var(--ink-3); font-size:14px }

/* 행 삭제(×) — '이 행 전체를 치운다'는 뜻이 보이도록 행 오른쪽 테두리에 반쯤 걸친
   작은 원형 버튼. translateX(50%) 로 버튼 중심이 경계선 위에 온다.
   바깥으로 나가는 폭(12px)은 .shell 좌우 패딩(≥16px) 안이라 화면 끝에서 잘리지 않고,
   안쪽 폭(12px)은 행 패딩(13px) 안이라 후보 카드·체크박스·스크롤 영역과 겹치지 않는다.
   기본은 흰 배경 + 연한 보더 + 진회색 ×, hover 에서만 브랜드 핑크 포인트. */
.rw-row{ position:relative }
.rw-del{
  position:absolute; top:12px; right:0; z-index:2; transform:translateX(50%);
  width:24px; height:24px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:50%; background:var(--card);
  box-shadow:0 1px 3px rgba(20,20,20,.08);
  color:var(--ink-2); font-size:14px; line-height:1; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.rw-del:hover{ border-color:var(--pink-line); color:var(--pink-text); background:var(--pink-soft) }
.rw-del:focus-visible{ outline:2px solid var(--pink-line); outline-offset:1px }

/* 후보 카드 본문은 상세 드로어를 여는 영역(확정 카드 포함) — pointer 커서.
   체크박스만 기본 커서를 유지해 '선택'과 '상세보기'를 손끝에서 구분한다. */
.rw-cand input[data-rw-pick]{ cursor:default }

/* 좌: 경쟁사 추출 상품 */
/* 썸네일이 카드 왼쪽 모서리에 붙지 않도록 안쪽 여백을 준다 (좌측 정렬은 유지) */
.rw-src{ display:flex; align-items:center; gap:14px; min-width:0;
  padding:0 14px 0 9px; border-right:1px dashed var(--border) }
/* 좌우 이미지는 눈으로 비교하는 화면이므로 후보 카드 이미지와 비슷한 크기로 맞춘다 */
.rw-simg{
  position:relative; flex:none; align-self:center;   /* stretch 로 늘어나지 않게 고정 + 세로 중앙 */
  width:104px; height:130px; border-radius:11px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--s1)) 20%, var(--card)), color-mix(in srgb, var(--tc, var(--s1)) 7%, var(--card)));
}
.rw-simg > svg{ width:34px; height:34px; color:color-mix(in srgb, var(--tc, var(--s1)) var(--thumb-ink-mix), var(--ink)) }
.rw-simg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.rw-sm{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; align-self:center }
.rw-tags{ display:flex; align-items:center; gap:5px; flex-wrap:wrap }
.rw-pf{
  font:700 9.5px/1 "Sora",sans-serif; letter-spacing:.02em; color:#fff;
  background:color-mix(in srgb, var(--ink) 78%, transparent); padding:3px 6px; border-radius:6px;
}
.rw-ct{
  font-size:10px; font-weight:700; color:var(--pink-text);
  background:var(--pink-soft); border:1px solid var(--pink-line); padding:2px 6px; border-radius:6px;
}
.rw-seller{ font-size:10.5px; color:var(--ink-3) }
.rw-brand{ font-size:10.5px; font-weight:700; color:var(--pink-text) }
.rw-name{
  font-size:12px; font-weight:500; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rw-price{ font-size:12.5px; font-weight:700; margin-top:1px }

/* 우: SONA 유사상품 후보 — 가로 스크롤 스트립 */
.rw-cands{ min-width:0; display:flex; flex-direction:column; gap:7px }
.rw-strip{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px }
/* 후보 없음 — 후보 영역 안에서 가로·세로 중앙 (auto margin 으로 flex 양축 중앙) */
.rw-nocand{ margin:auto; align-self:center; font-size:12px; color:var(--ink-3) }

/* 후보 로딩 상태 (related-products 응답 대기) — 후보 영역 안에서 가로·세로 중앙.
   후보 카드 스트립과 같은 높이를 차지해 로드 완료 시 행 높이가 튀지 않는다.
   (min-height = .rw-strip 실측: 카드 320.7px + padding-bottom 2px) */
.rw-loading{
  flex:1; min-height:323px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:0 12px; text-align:center;
}
.rw-loading p{ margin:0; word-break:keep-all }
.rw-ld-t{ font-size:13px; font-weight:700; line-height:1.4; color:var(--ink) }
.rw-ld-s{ font-size:11.5px; font-weight:400; line-height:1.4; color:var(--ink-3) }
.rw-ld-dots{ display:flex; gap:7px; margin-top:10px }
.rw-ld-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--pink);
  animation:rwSearchPulse 1.5s ease-in-out infinite;
}
.rw-ld-dots i:nth-child(2){ animation-delay:.2s }
.rw-ld-dots i:nth-child(3){ animation-delay:.4s }
@keyframes rwSearchPulse{
  0%, 70%, 100%{ opacity:.28; transform:scale(.8) }
  35%{ opacity:1; transform:scale(1) }
}

.rw-cand{
  position:relative; flex:none; width:140px; display:flex; flex-direction:column; gap:4px;
  padding:8px; border:1px solid var(--border-soft); border-radius:12px; background:var(--card);
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.rw-cand:hover{ border-color:var(--pink-line) }
/* 선택 — 기존 핑크 액센트 */
.rw-cand.on{
  border-color:var(--primary); background:color-mix(in srgb, var(--primary) 4%, var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
/* 확정 완료 — 약한 회색 처리. 상품은 알아볼 수 있을 만큼만 낮춘다.
   (핑크 체크 = 지금 복사할 상품 / 회색 + ✓ 확정 = 이미 복사한 상품) */
.rw-cand.done{ background:var(--card-soft); border-color:var(--border) }
.rw-cand.done:hover{ border-color:var(--border) }
.rw-cand.done .rw-cimg{ opacity:.58 }
.rw-cand.done .rw-cm{ opacity:.72 }
.rw-done{
  position:absolute; top:7px; right:7px; z-index:1;
  padding:3px 7px; border-radius:7px;
  background:color-mix(in srgb, var(--ink) 64%, transparent); color:#fff;
  font:700 9.5px/1.35 "Noto Sans KR",sans-serif; letter-spacing:.01em; white-space:nowrap;
}
.rw-cand input{
  position:absolute; top:7px; right:7px; z-index:1; width:16px; height:16px;
  accent-color:var(--primary); cursor:pointer; margin:0;
}
/* 동일브랜드 배지 — 썸네일 왼쪽 아래, 이미지 안쪽에 겹친다.
   블루(--s5) 계열로 핑크 선택선·카테고리칩·회색 확정 배지와 역할을 구분한다. */
.rw-same{
  position:absolute; left:6px; bottom:6px; z-index:1;
  padding:3px 7px; border-radius:6px;
  background:var(--s5); color:#fff;
  font:700 9.5px/1.35 "Noto Sans KR",sans-serif; letter-spacing:.01em; white-space:nowrap;
}
.rw-cimg{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:9px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tc, var(--s1)) 20%, var(--card)), color-mix(in srgb, var(--tc, var(--s1)) 7%, var(--card)));
}
.rw-cimg > svg{ width:28px; height:28px; color:color-mix(in srgb, var(--tc, var(--s1)) var(--thumb-ink-mix), var(--ink)) }
.rw-cimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.rw-cm{ min-width:0; display:flex; flex-direction:column; gap:2px }
.rw-cm .rw-name{ font-size:11.5px }
.rw-cm .rw-price{ font-size:12px }
/* 상품번호는 보조 정보 */
.rw-pid{ font-size:10px; color:var(--ink-3) }

.rw-more{
  align-self:flex-start; padding:5px 11px; border-radius:9px; border:1px solid var(--border);
  background:var(--card); font-size:11.5px; font-weight:600; color:var(--ink-2);
  transition:border-color .15s, color .15s;
}
.rw-more:hover{ border-color:var(--pink-line); color:var(--pink-text) }

/* ---- 하단 고정 액션바 — 연관상품서치 화면에서만 노출 ---- */
.rw-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:58; display:none;
  flex-direction:column; gap:9px; padding:10px clamp(16px, 2.2vw, 40px) 11px;
  background:color-mix(in srgb, var(--card) 96%, transparent);
  border-top:1px solid var(--border); backdrop-filter:saturate(1.4) blur(8px);
  box-shadow:0 -8px 24px -18px rgba(20,20,20,.35);
}
body.view-related .rw-bar{ display:flex }
.rw-barrow{ display:flex; align-items:center; gap:14px }

/* 선택된 상품번호 미리보기 — 복사 결과와 완전히 동일한 목록을 보여준다 */
.rw-preview{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  max-height:62px; overflow-y:auto;
  padding:7px 9px; border:1px solid var(--border-soft); border-radius:11px;
  background:var(--card-soft);
}
.rw-pv-lbl{ font-size:11px; font-weight:700; color:var(--ink-3); margin-right:2px }
.rw-pv-id{
  font:700 11.5px/1 "Sora",sans-serif; letter-spacing:.01em;
  padding:5px 9px; border-radius:7px;
  background:var(--pink-soft); border:1px solid var(--pink-line); color:var(--pink-text);
}
.rw-pv-empty{ font-size:11.5px; color:var(--ink-3) }
.rw-sel{ font-size:13px; font-weight:700; white-space:nowrap }
.rw-acts{ margin-left:auto; display:flex; gap:8px }
.rw-btn{
  padding:9px 16px; border-radius:11px; border:1px solid var(--border); background:var(--card);
  font-size:12.5px; font-weight:600; color:var(--ink-2); transition:border-color .15s, color .15s;
}
.rw-btn:hover:not(:disabled){ border-color:var(--pink-line); color:var(--pink-text) }
.rw-btn.primary{ background:var(--pink); border-color:var(--pink); color:#fff; font-weight:700 }
.rw-btn.primary:hover:not(:disabled){ background:color-mix(in srgb, var(--pink) 88%, #000); color:#fff }
.rw-btn:disabled{ background:var(--card-soft); border-color:var(--border); color:var(--ink-3) }

/* ---- 좁은 화면: 행을 세로로 쌓는다 (이미지 크기는 유지) ---- */
@media (max-width:900px){
  .rw-row{ grid-template-columns:1fr; gap:8px }
  .rw-link{ display:none }
  .rw-src{ border-right:0; border-bottom:1px dashed var(--border); padding:0 2px 9px }
}
@media (max-width:500px){
  #screen-related{ padding-bottom:190px }
  .rw-simg{ width:88px; height:110px }
  .rw-sample{ margin-left:0 }
  .rw-cand{ width:124px }
  .rw-loading{ min-height:303px }   /* 모바일 카드(124px) 스트립 실측 높이 */
  .rw-bar{ gap:8px; padding:10px 12px }
  .rw-barrow{ flex-wrap:wrap; gap:8px }
  .rw-acts{ width:100%; margin-left:0 }
  .rw-acts .rw-btn{ flex:1 }
}

/* ---- 빈 상태 (작업할 상품이 없을 때) ---- */
.rs-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:9px; padding:64px 24px; min-height:min(52vh,560px); justify-content:center;
  background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
}
.rs-ico{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--pink-soft); color:var(--pink-text); font-size:22px; font-weight:700; margin-bottom:3px;
}
.rs-empty h2{ margin:0; font:700 16px/1.4 "Noto Sans KR","Noto Sans JP",sans-serif }
.rs-note{ margin:2px 0 0; font-size:12.5px; line-height:1.85; color:var(--ink-2) }
.rs-soon{ margin:6px 0 0; font-size:11.5px; color:var(--ink-3) }
@media (max-width:500px){ .rs-empty{ padding:44px 18px; min-height:auto } }