/* =====================================================================
 * 최근 본 상품 — 떠 있는 버튼 + 목록 패널. PC(renew)·모바일(m2) 공용 (2026-10-21)
 *  위치(bottom/right)는 recent.js 가 퀵메뉴(.quickmenu) / 맨위로 버튼(.topBtn) 위에 맞춰 넣는다.
 *  색: 포인트 #0fb598 · 본문 #222 · 보조 #6b6b6b · 선 #e5e7eb
 * ===================================================================== */

/* ---- 떠 있는 버튼 (PC: 퀵메뉴와 같은 5.5rem 네모 / 모바일: 52px 원) ---- */
.rc_btn{position:fixed;z-index:99;width:5.5rem;height:5.5rem;box-sizing:border-box;padding:0;border:0;border-radius:1rem;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.14);cursor:pointer;overflow:visible;display:block;transition:transform .15s ease}
.rc_btn:hover{transform:translateY(-2px)}
/* 퀵메뉴(.qm-hide)와 같은 방식으로 숨고 나타난다 — layout_common.css 의 .quickmenu.qm-scrollgate.qm-hide 와 같은 값 */
.rc_btn{transition:opacity .35s ease,transform .35s ease,visibility .35s ease}
.rc_btn.rc_hide{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}
/* 글자 없이 마지막 본 상품 사진으로 가득 채운다 (2026-10-21) */
.rc_btn img,.rc_btn .rc_noimg{width:100%;height:100%;border-radius:1rem;object-fit:cover;display:block;background:#eef1f5}
/* PC: 사진 아래쪽 반투명 띠에 "최근 본 상품" — 광고 썸네일로 오해하지 않게 (2026-10-22). 모바일 원형에는 넣지 않는다 */
.rc_btn .rc_lbl{position:absolute;left:0;right:0;bottom:0;height:24px;line-height:24px;border-radius:0 0 1rem 1rem;background:rgba(0,0,0,.62);color:#fff;
  font-size:12px;font-weight:500;letter-spacing:-.02em;text-align:center;white-space:nowrap;pointer-events:none}
.rc_btn .rc_cnt{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:#0fb598;color:#fff;
  font-size:12px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
/* 모바일: "맨 위로" 원형(42px, 테두리 #ddd, 같은 그림자)과 똑같은 크기 — 실제 크기는 recent.js 가 그 버튼을 재서 넣는다. 사진이 원을 가득 채우고 숫자는 없다 */
.rc_btn.rc_m{width:42px;height:42px;border-radius:50%;border:1px solid #ddd;box-shadow:1.1px 1.6px 7.5px 0 rgba(0,0,0,.2);overflow:visible;z-index:99999}   /* 시계 뱃지가 원 밖으로 살짝 나가므로 overflow 는 사진(img)쪽 둥근 모서리로 자른다 */
.rc_btn.rc_m img,.rc_btn.rc_m .rc_noimg{width:100%;height:100%;border-radius:50%}
.rc_btn.rc_m .rc_cnt,.rc_btn.rc_m .rc_lbl{display:none}
/* 모바일: 오른쪽 아래 초록 시계 뱃지 — 글씨 없이도 "최근 본"임을 알리는 표시 (2026-10-22) */
.rc_btn.rc_m .rc_clk{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:#0fb598;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.rc_btn.rc_m .rc_clk svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 모바일: 상품 상세에 들어와 목록에 담길 때마다 버튼 왼쪽에 뜨는 말풍선 (3초 뒤 사라짐) */
.rc_tip{position:fixed;z-index:99999;display:flex;align-items:center;pointer-events:none;opacity:0;transform:translateX(6px);transition:opacity .3s ease,transform .3s ease}
.rc_tip.on{opacity:1;transform:none}
.rc_tip span{position:relative;background:rgba(34,34,34,.92);color:#fff;font-size:13px;line-height:30px;padding:0 12px;border-radius:15px;white-space:nowrap;letter-spacing:-.02em}
.rc_tip span:after{content:"";position:absolute;right:-5px;top:50%;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid rgba(34,34,34,.92)}

/* ---- 패널 (PC: 오른쪽 아래 박스) ---- */
.rc_panel{position:fixed;z-index:100;width:520px;max-width:calc(100vw - 32px);box-sizing:border-box;background:#fff;border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);padding:22px 24px 20px;font-size:14px;color:#222;line-height:1.5;display:flex;flex-direction:column}
.rc_panel[hidden]{display:none}
.rc_hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rc_hd span{font-size:20px;font-weight:700;letter-spacing:-.02em}
.rc_hd b{color:#0fb598;margin-left:4px}
.rc_x{width:32px;height:32px;border:0;background:none;padding:0;cursor:pointer;color:#333;display:flex;align-items:center;justify-content:center}
.rc_x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rc_sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.rc_note{font-size:12px;color:#6b6b6b}
.rc_grow{flex:1}
.rc_wish,.rc_wish:link,.rc_wish:visited{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border:1px solid #d5dae0;border-radius:6px;background:#fff;color:#222 !important;font-size:13px;text-decoration:none !important;line-height:1}
.rc_wish svg{width:14px;height:14px;fill:none;stroke:#d94a44;stroke-width:2;stroke-linejoin:round}
.rc_clear{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border:1px solid #d5dae0;border-radius:6px;background:#fff;color:#222;font-size:13px;font-family:inherit;cursor:pointer;line-height:1}
.rc_clear svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rc_list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}   /* 패널 높이 안에서만 스크롤 */
.rc_item{position:relative;background:#f6f7f8;border-radius:12px;padding:12px 40px 12px 12px}
.rc_link,.rc_link:link,.rc_link:visited{display:flex;gap:14px;align-items:flex-start;color:#222 !important;text-decoration:none !important}
.rc_thumb{position:relative;flex:0 0 88px;width:88px;height:66px;border-radius:8px;overflow:hidden;background:#eef1f5}
.rc_thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진 오른쪽 아래 찜 하트 — 목록 카드의 하트와 같은 자리 (2026-10-22). 색·채움은 wish.css 의 .wish_btn 규칙을 따른다 */
.rc_thumb .rc_heart{position:absolute;right:4px;bottom:4px;z-index:1;width:26px;height:26px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;color:#333;cursor:pointer;font-size:0;line-height:1}
.rc_thumb .rc_heart svg{width:15px;height:15px}
.rc_thumb .rc_heart.on{color:#d94a44}
.rc_body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rc_name{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rc_meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rc_date{font-size:12px;color:#6b6b6b}
.rc_price{font-size:15px;font-weight:700;color:#111}
.rc_del{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;color:#888;display:flex;align-items:center;justify-content:center}
.rc_del svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rc_del:hover{color:#d94a44}

/* ---- 모바일: 아래에서 올라오는 시트 ---- */
.rc_dim{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:999990}
.rc_dim[hidden]{display:none}
.rc_panel.rc_m{left:0;right:0;bottom:0;width:100%;max-width:none;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:999991;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:0 -4px 20px rgba(0,0,0,.12)}
.rc_panel.rc_m[hidden]{display:none}
.rc_panel.rc_m .rc_hd span{font-size:18px}
.rc_panel.rc_m .rc_list{flex:1;max-height:none;min-height:0}
.rc_panel.rc_m .rc_thumb{flex-basis:76px;width:76px;height:76px}
.rc_panel.rc_m .rc_thumb .rc_heart{width:30px;height:30px}
.rc_panel.rc_m .rc_thumb .rc_heart svg{width:17px;height:17px}
.rc_panel.rc_m .rc_name{font-size:14px}