/* 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} 로 클리핑되어 페이지 가로스크롤 누수 없음. */
.v2reco-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:2px 0 6px;margin:0 calc(var(--hm-pad, 16px) * -1);
  padding-left:var(--hm-pad, 16px);padding-right:var(--hm-pad, 16px)}
.v2reco-rail::-webkit-scrollbar{display:none}
.v2reco-item{position:relative;flex:0 0 auto;width:44vw;max-width:190px;scroll-snap-align:start}
.v2reco-item .v2live-card{width:100%;max-width:none;margin:0}

/* 추천 이유 배지(이미지 좌하단 오버레이) */
.v2reco-reason{position:absolute;left:8px;top:8px;z-index:2;max-width:calc(100% - 44px);
  background:rgba(17,17,17,.82);color:#fff;font-size:11px;font-weight:800;line-height:1.3;
  padding:5px 8px;border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none}
.v2reco-reason.is-personal{background:rgba(143,109,57,.92)}   /* 개인화=골드 톤 */

/* 관심없음 버튼(우상단) */
.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{display:flex;gap:10px;overflow:hidden;padding:2px 0 6px}
.v2reco-skel .sk{flex:0 0 auto;width:44vw;max-width:190px}
.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}}

/* 태블릿 */
@media (min-width:768px){
  .v2reco-item,.v2reco-skel .sk{width:30vw;max-width:210px}
}
/* PC: 그리드로 자연 확장(풀블리드 음수마진 해제) */
@media (min-width:1080px){
  .v2reco-rail{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin:0;padding:2px 0 6px}
  .v2reco-item{width:auto;max-width:none}
  .v2reco-skel{display:grid;grid-template-columns:repeat(6,1fr)}
  .v2reco-skel .sk{width:auto;max-width:none}
}

/* ===== 개인화 사용자 제어 (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} }