/* =========================================
   이음 라이브 — 세로 숏폼 피드
   (실서비스 연동 시 .lv-media 를 <video>로 교체 —
    재생/일시정지·음소거·IntersectionObserver 구조는 동일)
========================================= */
/* 공통 리셋·아이콘은 tokens.css 사용 — 라이브 다크 배경만 보정 */
html,body{background:var(--g900)}
body{color:var(--white)}
button{color:inherit}

/* ---------- 피드 (세로 스크롤 스냅) ---------- */
.lv-feed{max-width:var(--app-max);margin:0 auto;height:100vh;height:100dvh;overflow-y:auto;
  scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;background:var(--g900);position:relative}
.lv-feed::-webkit-scrollbar{display:none}

.lv-slide{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}

/* ---------- 미디어 (목업: 켄번즈 모션 이미지 / 실연동: video) ---------- */
.lv-media{position:absolute;inset:0;overflow:hidden}
.lv-media img{width:100%;height:100%;object-fit:cover;transform-origin:center;
  animation:lv-kenburns 14s ease-in-out infinite alternate;animation-play-state:paused}
.lv-slide.playing .lv-media img{animation-play-state:running}
@keyframes lv-kenburns{0%{transform:scale(1)}100%{transform:scale(1.14) translateY(-2%)}}
.lv-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(17,17,17,.35),rgba(17,17,17,0) 30%,rgba(17,17,17,0) 55%,rgba(17,17,17,.65))}

/* ---------- 상단 바 ---------- */
.lv-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 0}
.lv-title{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.lv-avatar{flex:none;width:36px;height:36px;border-radius:var(--radius-full);overflow:hidden;
  border:1.5px solid rgba(255,255,255,.85)}
.lv-avatar img{width:100%;height:100%;object-fit:cover}
.lv-title__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.lv-title__name{font-size:15px;font-weight:700;letter-spacing:-.375px;text-shadow:0 1px 2px rgba(17,17,17,.5)}
.lv-title__desc{font-size:12px;font-weight:500;letter-spacing:-.3px;color:rgba(255,255,255,.9);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(17,17,17,.5)}
.lv-close{width:44px;height:44px;display:grid;place-items:center;color:var(--white)}

/* ---------- 재생/일시정지 오버레이 ---------- */
.lv-playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:64px;height:64px;border-radius:var(--radius-full);background:rgba(17,17,17,.45);color:var(--white);
  display:grid;place-items:center;font-size:30px;opacity:0;transition:opacity .2s ease;pointer-events:none}
.lv-slide:not(.playing) .lv-playbtn{opacity:1}

/* ---------- 우측 액션 ---------- */
.lv-actions{position:absolute;right:8px;bottom:calc(180px + env(safe-area-inset-bottom));z-index:5;
  display:flex;flex-direction:column;gap:4px;align-items:center}
.lv-act{width:48px;height:48px;display:grid;place-items:center;color:var(--white);font-size:26px}
.lv-act__count{font-size:13px;font-weight:600;margin-top:-6px;text-shadow:0 1px 2px rgba(17,17,17,.5)}
.lv-act .heart-liked{color:var(--red-500)}

/* ---------- 하단 정보 + 상품 카드 ---------- */
.lv-info{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
/* 라이브 제목 · 내용 (상품 카드 상단, 영상 위 오버레이) */
.lv-caption{display:flex;flex-direction:column;gap:4px;max-width:82%;color:var(--white);text-shadow:0 1px 3px rgba(17,17,17,.55)}
.lv-caption__title{font-size:16px;font-weight:700;letter-spacing:-.4px;line-height:22px}
.lv-caption__desc{font-size:13px;font-weight:500;letter-spacing:-.3px;line-height:19px;color:rgba(255,255,255,.92);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv-product{width:100%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);
  border-radius:var(--radius-md);padding:10px;color:var(--g900)}
/* 썸네일은 공통 .thumb .thumb--48 (tokens.css) 사용 */
.lv-product__info{flex:1;min-width:0}
.lv-product__name{font-size:14px;font-weight:700;letter-spacing:-.35px;color:var(--blue-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-product__price{font-size:13px;font-weight:600;color:var(--blue-500);margin-top:2px}
.lv-product__go{flex:none;height:36px;padding:0 12px;border-radius:var(--radius-sm);background:var(--blue-500);
  color:var(--white);font-size:13px;font-weight:600;display:flex;align-items:center}

/* ---------- 진행 표시 ---------- */
.lv-progress{position:absolute;right:16px;top:calc(64px + env(safe-area-inset-top));z-index:5;
  display:flex;flex-direction:column;gap:4px}
.lv-progress span{width:3px;height:16px;border-radius:3px;background:rgba(255,255,255,.35)}
.lv-progress span.on{background:var(--white)}