/* 오른쪽 사이드 퀵 패널 (2026-09-28 삼성 8번) — 접두어 sop-rc-
   참고: CJ온스타일 우측 날개. 위에서부터 로고 버튼 / 최근 본 상품 / TOP.
   ⚠ 폭이 좁으면 통째로 숨긴다 — 폰에는 날개를 놓을 자리가 없고, 하단 고정메뉴와도 겹친다. */

.sop-rc{display:none}

/* ⚠ 1400 아래에서는 내보내지 않는다 — 본문이 1200 이라 그보다 좁으면 날개가 오른쪽 금액칸을 덮는다(실측 1360 에서 33px 겹침).
   겹치지 않으려면 화면폭 ≥ 1200 + 2×(날개폭 + 오른쪽여백) = 1380 이어야 한다. */
@media (min-width:1400px){
  .sop-rc{
    position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:9100;
    display:flex;flex-direction:column;gap:8px;width:80px;max-height:78vh;
    font-family:'Samsung One Korean','Malgun Gothic',sans-serif;
    --rc-line:#e3eaf7;--rc-blue:#0876ff;--rc-ink:#1a2233;--rc-mute:#8b94a8}
  .sop-rc *{box-sizing:border-box}

  /* ① 로고 → 다품목(동시구독) */
  .sop-rc-logo{display:block;padding:10px 8px 8px;border:1px solid var(--rc-line);border-radius:14px;
    background:#fff;text-align:center;text-decoration:none !important;
    box-shadow:0 6px 18px rgba(20,40,120,.10);transition:.15s}
  .sop-rc-logo img{display:block;width:100%;max-width:58px;height:auto;margin:0 auto}
  .sop-rc-logo b{display:block;margin-top:7px;font-size:11.5px;font-weight:800;letter-spacing:-.4px;color:var(--rc-blue)}
  .sop-rc-logo:hover{border-color:#b9cdf0;box-shadow:0 10px 24px rgba(20,40,120,.16);transform:translateY(-1px)}

  /* ② 최근 본 상품 */
  .sop-rc-box{display:flex;flex-direction:column;min-height:0;padding:9px 7px 8px;
    border:1px solid var(--rc-line);border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(20,40,120,.10)}
  .sop-rc-hd{font-size:11px;font-weight:700;letter-spacing:-.4px;color:var(--rc-mute);text-align:center;line-height:1.3}
  .sop-rc-list{margin:7px 0 0;padding:0;list-style:none;overflow-y:auto;min-height:0;
    scrollbar-width:thin;scrollbar-color:#cfd8ea transparent}
  .sop-rc-list::-webkit-scrollbar{width:4px}
  .sop-rc-list::-webkit-scrollbar-thumb{background:#cfd8ea;border-radius:4px}
  .sop-rc-list li+li{margin-top:6px}
  .sop-rc-list a{display:block;border:1px solid var(--rc-line);border-radius:9px;overflow:hidden;background:#fff;transition:.15s}
  .sop-rc-list a:hover{border-color:var(--rc-blue)}
  .sop-rc-list img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
  .sop-rc-none{margin:9px 0 2px;font-size:11px;color:var(--rc-mute);text-align:center}
  .sop-rc-clear{margin-top:7px;padding:4px 0;border:0;border-top:1px solid var(--rc-line);background:none;
    font:inherit;font-size:11px;color:var(--rc-mute);cursor:pointer}
  .sop-rc-clear:hover{color:var(--rc-ink)}

  /* ③ 맨 위로 */
  .sop-rc-top{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 0;
    border:1px solid var(--rc-line);border-radius:14px;background:#fff;
    font:inherit;font-size:11px;font-weight:800;letter-spacing:.2px;color:var(--rc-ink);
    cursor:pointer;box-shadow:0 6px 18px rgba(20,40,120,.10);transition:.15s}
  .sop-rc-top i{font-style:normal;font-size:13px;line-height:1}
  .sop-rc-top:hover{border-color:var(--rc-blue);color:var(--rc-blue)}

  /* 이 날개에 TOP 이 들어갔으니 기존 플로팅 TOP 은 겹치지 않게 숨긴다 (css/sop-totop.css) */
  .sop-totop{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .sop-rc-logo,.sop-rc-list a,.sop-rc-top{transition:none}
  .sop-rc-logo:hover{transform:none}
}