/* V2 개인화 추천 섹션 (Phase 2)
 * - 상품 카드(.v2live-card)는 기존 shop-final.css 디자인 그대로 재사용.
 * - 여기선 레일/스켈레톤/추천이유 배지/관심없음 버튼 chrome 만 정의.
 * - 실패/빈 결과 시 섹션은 JS 가 display:none 처리(페이지 전체 정상). */

.v2reco-section{display:none}                 /* JS 가 데이터 확보 후에만 표시 */
.v2reco-section.is-ready{display:block}

/* 레일: home 의 .v2-home-rail 과 동일한 풀블리드/반응형(44vw→30vw→그리드).
   full-bleed 음수마진은 .v2-home{overflow-x:hidden} 로 클리핑되어 페이지 가로스크롤 누수 없음. */
/* 한 줄 가로 레일 — 모든 폭에서 wrap 없음.
   --rc = 한 화면에 보이는 카드 수(소수 허용 → 다음 카드가 살짝 보여 «넘길 수 있음»을 인지시킨다). */
.v2reco-rail{--rc:2.1;--rgap:10px;
  display:flex;flex-wrap:nowrap;gap:var(--rgap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain;   /* 레일 끝에서 페이지가 밀리지 않게 */
  /* 2026-08-19 full-bleed(음수마진) 제거.
     홈은 .v2-home{overflow-x:hidden} 가 클리핑해 줬지만 장바구니에는 그 상위 클리핑이 없어
     레일이 438px 로 삐져나가 «body 가로 오버플로»가 났다(실측 viewport 430 / scrollWidth 435).
     5개 placement 를 같은 규격으로 맞추는 목표에도 컨테이너 정렬이 더 적합하다. */
  padding:2px 0 6px;margin:0}
.v2reco-rail::-webkit-scrollbar{display:none}
.v2reco-item{position:relative;scroll-snap-align:start;flex:0 0 auto;
  /* flex 단축속성 안의 calc(var()) 는 구형 크로미움에서 커스텀 프로퍼티 변경 시 재계산되지 않는다
     (실측: --rc 를 4로 바꿔도 카드가 5개 기준 141px 유지). width 로 두면 정상 재계산된다. */
  width:calc((100% - (var(--rc) - 1) * var(--rgap)) / var(--rc))}
.v2reco-item .v2live-card{width:100%;max-width:none;margin:0}

/* 좌우 화살표 (JS 가 레일을 감싸고 버튼을 넣는다 — PHP/마크업 무수정) */
.v2reco-railwrap{position:relative}
.v2reco-arrow{display:none}
@media (min-width:1024px){
  .v2reco-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--hm-line,#e8e8ea);border-radius:50%;background:rgba(255,255,255,.96);
    box-shadow:0 4px 16px rgba(20,20,40,.14);cursor:pointer;color:#16161a;
    font-size:22px;font-weight:700;line-height:1;padding:0 0 2px;
    transition:transform .15s ease,box-shadow .15s ease}
  .v2reco-arrow[hidden]{display:none}
  .v2reco-arrow.prev{left:-6px}
  .v2reco-arrow.next{right:-6px}
  .v2reco-arrow:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 6px 20px rgba(20,20,40,.2)}
  .v2reco-arrow:active{transform:translateY(-50%) scale(.94)}
  .v2reco-arrow:focus-visible{outline:2px solid var(--hm-ac,#4b48d6);outline-offset:2px}
}

/* 추천 이유 — 이미지 위 대형 배지를 폐기하고 카드 «아래» 보조 한 줄로 내렸다(2026-08-19).
   상품명/가격보다 약하게, 말줄임 없이 짧은 문구만 노출한다. */
.v2reco-why{display:block;margin:5px 2px 0;font-size:11.5px;line-height:1.35;color:#8b8b94;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2reco-why.is-personal{color:#8f6d39}
/* 구 배지가 어디선가 남아도 화면을 해치지 않도록 무력화 */
.v2reco-reason{display:none!important}

/* 추천 카드에서는 위시(하트) 버튼을 숨긴다 — 2026-08-19.
   추천 카드 우상단에는 «관심없음(×)» 이 있어 하트와 좌표가 완전히 겹쳤다(실측 top 941/939, right 1107/1105).
   위시 기능 자체는 그대로이며(상품상세·SHOP·최근본 카드에는 계속 노출) 추천 레일에서만 감춘다. */
.v2reco-item .v2live-card-wish{display:none!important}

/* 관심없음 버튼(우상단) */
.v2reco-hide{position:absolute;right:7px;top:7px;z-index:3;width:26px;height:26px;
  border:none;border-radius:50%;background:rgba(255,255,255,.92);color:#555;font-size:15px;
  line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.v2reco-hide:hover{background:#fff;color:#111}

/* 스켈레톤 */
.v2reco-skel{--rc:2.1;--rgap:10px;display:flex;flex-wrap:nowrap;gap:var(--rgap);overflow:hidden;padding:2px 0 6px}
.v2reco-skel .sk{flex:0 0 auto;width:calc((100% - (var(--rc) - 1) * var(--rgap)) / var(--rc))}
.v2reco-skel .sk-img{width:100%;aspect-ratio:1/1;border-radius:14px;background:#eee;
  background-image:linear-gradient(90deg,#eee 0,#f5f5f5 40%,#eee 80%);background-size:200% 100%;
  animation:v2recoShimmer 1.2s ease-in-out infinite}
.v2reco-skel .sk-line{height:12px;margin-top:8px;border-radius:6px;background:#eee}
.v2reco-skel .sk-line.short{width:60%}
@keyframes v2recoShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.v2reco-skel .sk-img{animation:none}}

/* ── 반응형: 한 줄 유지. 예전엔 ≥1080px 에서 grid 6열이라 12개가 «2줄»로 쏟아졌다(2026-08-19 폐기). ── */
/* 태블릿 768~1023: 3.3개(다음 카드 일부 노출 → 스와이프 가능 인지) */
@media (min-width:768px){
  .v2reco-rail,.v2reco-skel{--rc:3.2;--rgap:12px}
}
/* PC 1024~1279: 4개 (풀블리드 음수마진 해제) */
@media (min-width:1024px){
  .v2reco-rail{--rc:4;--rgap:14px}
  .v2reco-skel{--rc:4;--rgap:14px}
}
@media (min-width:1280px){ .v2reco-rail,.v2reco-skel{--rc:5} }
@media (min-width:1600px){ .v2reco-rail,.v2reco-skel{--rc:6} }
@media (prefers-reduced-motion:reduce){ .v2reco-rail{scroll-behavior:auto} }

/* ===== 개인화 사용자 제어 (Phase 3) ===== */
.v2pp-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(10px);z-index:13000;
  background:rgba(17,17,17,.94);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;
  opacity:0;transition:all .25s ease;pointer-events:none;max-width:88vw;text-align:center}
.v2pp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 최근 본 상품: 카드 위 개별 삭제 버튼 */
.v2pp-recent-item{position:relative;flex:0 0 auto;width:44vw;max-width:190px;scroll-snap-align:start}
.v2pp-recent-item .v2live-card{width:100%;max-width:none;margin:0}
.v2pp-del{position:absolute;right:7px;top:7px;z-index:3;width:26px;height:26px;border:none;border-radius:50%;
  background:rgba(255,255,255,.92);color:#555;font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.v2pp-del:hover{background:#fff;color:#111}

/* 섹션 헤더 우측 액션(전체삭제 등) */
.v2pp-act{border:1px solid #dcdce2;background:#fff;color:#555;border-radius:9px;
  padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.v2pp-act:hover{border-color:#b9b9c2;color:#111}

/* 개인화 설정 카드 */
.v2pp-card{background:#fff;border:1px solid #e8e8ee;border-radius:14px;padding:14px 16px;margin-top:12px}
.v2pp-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid #f0f0f4}
.v2pp-row:first-of-type{border-top:none}
.v2pp-row .tt{flex:1;min-width:0}
.v2pp-row .tt b{font-size:14px;font-weight:800;color:#111}
.v2pp-row .tt p{margin:4px 0 0;font-size:12px;color:#71757e;line-height:1.5}
.v2pp-sw{position:relative;width:50px;height:28px;flex:0 0 auto;border:none;background:#d5d5dd;border-radius:999px;cursor:pointer;transition:.18s;padding:0}
.v2pp-sw::after{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:.18s}
.v2pp-sw.on{background:#111}
.v2pp-sw.on::after{transform:translateX(22px)}

@media (min-width:768px){ .v2pp-recent-item{width:30vw;max-width:210px} }
@media (min-width:1080px){ .v2pp-recent-item{width:auto;max-width:none} }