/* ============================================================
   인앱 인라인 재생 — 추가 스타일
   ⚠️ 이 파일은 "추가"만 합니다. 기존 스타일시트를 수정하지 마세요.
      기존 CSS 뒤에 이 파일을 링크하면 됩니다.

   모든 클래스에 rip- 프리픽스(Rtp Inline Player)를 붙여
   기존 클래스와 절대 충돌하지 않습니다.
   ============================================================ */

/* 핸드오프 원본의 자체 팔레트 대신 **기존 프로젝트 토큰에 매핑**한다.
   (원본 주석의 지시: "프로젝트 토큰이 이미 있으면 이 블록은 지우고 기존 변수를 쓰세요")
   → 색이 어긋나 기존 디자인이 바뀌는 일이 없다. 폴백값은 rtp-tokens.css 미로딩 대비. */
:root{
  /* 존재하는 토큰만 참조한다 — 없는 이름을 쓰면 폴백만 살아 "매핑한 척"이 된다.
     rtp-tokens.css / tokens.css 에 대응이 없는 3개(soft/off/grn)만 리터럴이다. */
  --rip-ink:var(--rtp-ink,#191f28);
  --rip-ink2:var(--rtp-ink-2,#4e5968);
  --rip-ink3:var(--rtp-ink-3,#8b95a1);
  --rip-ink4:var(--rtp-ink-4,#b0b8c1);
  --rip-line:var(--rtp-line,#e5e8eb);
  --rip-soft:var(--rtp-line-soft,#eef0f2);
  --rip-off:#f7f8fa;                       /* --rtp-bg(#f1f3f5) 와 다름 → 원본 유지 */
  --rip-org:var(--rtp-orange,#ff6b35);
  --rip-org-soft:var(--rtp-orange-soft,#ffeee6);
  --rip-org-ink:var(--bb-primary-dark,#c2410c);
  --rip-red:var(--rtp-error,#ef2b2b);
  --rip-grn:#12b886;                       /* 대응 토큰 없음 → 원본 유지 */
  --rip-num:var(--rtp-font-num,'Barlow','Pretendard Variable','Pretendard',system-ui,sans-serif); /* #31 — CDN(_rtp_base) defines only 'Pretendard Variable' */
}

/* ── 1. 확장 컨테이너 ─────────────────────────────
   카드(기존 .card / .gm) 안 맨 아래에 이 div 하나만 추가합니다.
   height 를 JS가 애니메이션합니다. */
.rip-exp{overflow:hidden;height:0;transition:height .3s cubic-bezier(.32,.72,.3,1)}

/* 열려 있는 카드 강조 — 기존 카드 클래스에 이것만 함께 붙입니다 */
.rip-card-open{border:1.5px solid var(--rip-org)}

/* ── 2. 플레이어 ─────────────────────────────── */
.rip-player{position:relative;background:#000;aspect-ratio:16/9}
.rip-player video,.rip-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ⚠️ 커스텀 컨트롤 바(.rip-ctrl/.rip-bar/.rip-row/.rip-big) 규칙은 제거했다.
   유튜브 기본 컨트롤(controls=1)을 쓴다 — iframe 안의 탭이 부모로 버블링되지 않아
   우리가 그린 컨트롤은 구조적으로 동작할 수 없었다(실기기 확인).
   contracts/inline_play.py YT_USE_NATIVE_CONTROLS 참조. */

.rip-live{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:4px;background:var(--rip-red);color:#fff;font-size:9px;font-weight:800;border-radius:4px;padding:3px 6px;z-index:3}
.rip-live i{width:4px;height:4px;border-radius:50%;background:#fff;display:block;animation:rip-blink 1.6s infinite}
@keyframes rip-blink{50%{opacity:.35}}
.rip-view{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-size:9.5px;font-weight:700;border-radius:4px;padding:3px 7px;z-index:3}

/* GAMES 전용 — 영상 위 스코어 오버레이 */
.rip-score{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 10px;background:linear-gradient(rgba(0,0,0,.6),transparent);color:#fff;font-size:11px;font-weight:700;z-index:3}
.rip-score b{font-family:var(--rip-num);font-size:15px;font-weight:800;letter-spacing:-.4px}

/* ── 3. 메타 + 액션 3버튼 ───────────────────────── */
.rip-meta{padding:12px 13px}
.rip-meta .rip-t{font-size:14px;font-weight:800;line-height:1.35;margin:0;letter-spacing:-.2px}
.rip-meta .rip-m{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--rip-ink3);font-weight:600;margin:6px 0 0}

.rip-acts{display:flex;gap:6px;padding:0 13px 13px}
.rip-acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--rip-off);border:none;border-radius:9px;padding:11px 2px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--rip-ink2);cursor:pointer}
.rip-acts button.is-on{background:var(--rip-org-soft);color:var(--rip-org-ink)}
.rip-acts svg{flex:none}

.rip-collapse{display:block;width:100%;text-align:center;padding:12px;border:none;border-top:1px solid var(--rip-soft);background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--rip-org);cursor:pointer}

/* ── 4. 썸네일 재생 버튼 ─────────────────────────
   기존 썸네일(.th 등) 안에 이 span 하나만 추가합니다.
   유튜브 빨간 버튼이 아니라 "여기서 재생"을 뜻하는 흰 원입니다. */
.rip-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.3);transition:transform .16s}
.rip-thumb-wrap:active .rip-play{transform:translate(-50%,-50%) scale(.9)}

/* GAMES 카드 헤더의 ▸ 버튼 */
.rip-vidbtn{width:28px;height:23px;border-radius:6px;background:var(--rip-org-soft);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s}
.rip-vidbtn.is-on{background:var(--rip-org)}
.rip-vidbtn.is-off{background:var(--rip-soft);opacity:.45;cursor:default}

/* ── 5. 공유 시트 (우리가 만드는 유일한 공유 UI) ──── */
.rip-ovl{position:fixed;inset:0;z-index:9000;display:none}
.rip-ovl.is-show{display:block}
.rip-ovl-dim{position:absolute;inset:0;background:rgba(10,14,20,.5);opacity:0;transition:opacity .24s}
.rip-ovl.is-show .rip-ovl-dim{opacity:1}
.rip-sheet{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;background:#fff;border-radius:22px 22px 0 0;padding:8px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.rip-ovl.is-show .rip-sheet{transform:translateY(0)}
.rip-grab{width:38px;height:4px;border-radius:2px;background:var(--rip-line);margin:0 auto 14px}
.rip-sheet-t{font-size:17px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px}
.rip-sheet-d{font-size:12px;font-weight:600;color:var(--rip-ink3);margin:0 0 15px;line-height:1.5}

.rip-tgl-row{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;background:var(--rip-off);border:none;border-radius:12px;padding:13px 14px;margin-bottom:11px;font-family:inherit;text-align:left;cursor:pointer}
.rip-tgl-row .rip-tx{font-size:13px;font-weight:700;color:var(--rip-ink)}
.rip-tgl-row .rip-tx u{text-decoration:none;display:block;font-size:11px;font-weight:600;color:var(--rip-ink3);margin-top:2px;font-family:var(--rip-num)}
.rip-tgl{margin-left:auto;width:44px;height:27px;border-radius:14px;background:var(--rip-line);position:relative;flex:none;transition:background .18s}
.rip-tgl i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .18s}
.rip-tgl.is-on{background:var(--rip-grn)}
.rip-tgl.is-on i{left:20px}

.rip-linkbox{display:flex;align-items:center;gap:8px;border:1px solid var(--rip-line);border-radius:11px;padding:11px 12px;margin-bottom:13px}
.rip-linkbox span{flex:1;font-size:11px;font-family:var(--rip-num);font-weight:600;color:var(--rip-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rip-linkbox b{flex:none;font-size:11.5px;font-weight:800;color:#1b64da;cursor:pointer}

.rip-cta{display:block;width:100%;background:var(--rip-org);color:#fff;border:none;border-radius:12px;padding:14px;text-align:center;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer}
.rip-ghost{display:block;width:100%;border:none;background:none;padding:12px;text-align:center;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--rip-ink3);margin-top:4px;cursor:pointer}

/* ── 6. 토스트 ───────────────────────────────── */
.rip-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,10px);background:#12161c;color:#fff;font-size:12px;font-weight:700;padding:10px 16px;border-radius:22px;z-index:9100;opacity:0;transition:.24s;pointer-events:none;white-space:nowrap}
.rip-toast.is-show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .rip-exp,.rip-sheet,.rip-ovl-dim,.rip-play{transition:none}
  .rip-live i{animation:none}
}

/* ── 7. 우리 데이터에서만 생기는 상태 (핸드오프에 없던 것) ─────────────
   핸드오프는 HLS 자체 호스팅을 전제로 쓰여서 아래 두 경우가 없다.
   우리는 100% 유튜브라 둘 다 실측으로 흔하게 발생한다. */

/* (a) 임베드 불가 — 실측 12.7%. 8번에 1번이라 엣지케이스가 아니다.
       검은 화면을 보여주는 대신 유튜브로 보내는 카드를 그린다. */
/* 폴백은 눌러도 아무 일이 없다(bindMedia 가 조기 return 해 클릭 핸들러를 안 붙인다).
   .rip-player{cursor:pointer} 를 그대로 물려받으면 "눌리는 것처럼" 보여 헛클릭을 부른다. */
.rip-player[data-rip-noembed]{cursor:default}
.rip-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:16/9;background:var(--rip-off);padding:16px;text-align:center}
.rip-fallback__t{font-size:13px;font-weight:800;color:var(--rip-ink);margin:0}
.rip-fallback__d{font-size:11.5px;font-weight:600;color:var(--rip-ink3);margin:0;line-height:1.5}
.rip-fallback__cta{display:inline-flex;align-items:center;gap:6px;margin-top:4px;background:var(--rip-ink);color:#fff;border:none;border-radius:9px;padding:9px 14px;font-family:inherit;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}

/* (b) 하루 통짜 중계인데 시작 지점을 모를 때 — 실측상 오프셋 백필 전에는 흔하다.
       "지금 보이는 게 네 경기가 아닐 수 있다"를 숨기지 않고 알린다. */
.rip-fullday{display:flex;align-items:center;gap:6px;padding:9px 13px;background:var(--rip-org-soft);color:var(--rip-org-ink);font-size:11.5px;font-weight:700;line-height:1.4}
.rip-fullday svg{flex:none}

/* (c) 알림 백엔드 미배포 — 버튼은 보이되 눌러도 상태가 안 바뀐다는 걸 보여준다.
       (알림 기능 자체는 별도 세션에서 개발 중 — contracts/inline_play.py NOTIFY_*) */
.rip-acts button.is-off{opacity:.45;cursor:default}
.rip-acts button:disabled{opacity:.45;cursor:default}

/* (d) GAMES ▸ 버튼 — 기존 .rtp-gamecard__vod 자리를 그대로 쓴다.
       영상 없는 경기는 애초에 렌더되지 않으므로 .is-off 는 알림용과 달리 드물다. */
.rip-vidbtn.is-open{background:var(--rip-org)}
.rip-vidbtn.is-open svg path{fill:#fff}

/* 로딩 — VideoSource fetch 중 */
.rip-loading{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#000;color:#fff;font-size:12px;font-weight:700}

/* ── 9. 인앱 영상 차단 (inapp_notify_funnel R21~R23) ─────────────────────
   .rip-player{aspect-ratio:16/9} 안을 그대로 채운다. 전개(legend) 는 텍스트 2줄만
   ─ .rip-player 가 min-height 로 성장을 허용해야 카드 연 직후 눌러도 안 잘린다
   (.rip-exp 가 320ms 뒤에야 height:auto 가 되는 것과 같은 이유, W7). */
.rip-player[data-rip-vblocked]{aspect-ratio:unset;min-height:0}
.rip-vblock{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:200px;padding:20px 16px;text-align:center;color:#fff;
  background-color:var(--rip-ink);background-size:cover;background-position:center;
}
/* 썸네일이 있으면 블러 + 딤 — 실루엣만 보이게. 썸네일이 없으면(C17) 위 background-color
   그대로(어두운 단색)가 폴백이라 별도 처리가 필요 없다. */
.rip-vblock[style*="background-image"]{background-blend-mode:multiply}
.rip-vblock__src{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.3px;color:var(--rip-ink4);text-transform:none}
.rip-vblock__t{margin:0;font-size:14px;font-weight:800;line-height:1.35}
.rip-vblock__d{margin:0;font-size:11.5px;font-weight:600;line-height:1.5;color:var(--rip-ink4)}
.rip-vblock__cta{display:flex;gap:8px;margin-top:6px;width:100%;max-width:280px}
.rip-vblock__escape,.rip-vblock__yt{
  flex:1;border:none;border-radius:9px;padding:10px 6px;font-family:inherit;font-size:11.5px;
  font-weight:800;cursor:pointer;
}
.rip-vblock__escape{background:var(--rip-org);color:#fff}
.rip-vblock__yt{background:var(--bb-neutral-700,#46474C);color:#fff}
.rip-vblock__legend{margin-top:10px;font-size:11px;font-weight:600;line-height:1.7;color:var(--rip-ink4)}
.rip-vblock__legend p{margin:0}

/* ── 8. 홈 LIVE 배너 전용 ────────────────────────────────────────
   핸드오프 02(home-inline-live)는 **접힌 썸네일 줄이 플레이어로 바뀐다**.
   우리는 슬롯을 <a> 밖에 둘 수밖에 없어서(<a> 안에 iframe·버튼 금지) 그냥 두면
   썸네일 줄과 플레이어가 위아래로 같이 남아 핸드오프와 다르게 보인다.
   → 열린 동안 줄을 감춘다. 되접기는 확장 영역의 "접기 ▴" 가 담당한다.
   ⚠️ GAMES 카드는 반대다 — 핸드오프 05 가 카드 머리(날짜·스코어·스탯)를 그대로
      두고 그 아래에 영상을 붙이므로 거긴 감추지 않는다. */
.bb-live-banner__item.rip-card-open { display: none; }

/* 줄이 사라진 자리를 플레이어가 이어받으므로 카드 외형을 옮겨 받는다 */
.bb-live-banner__list > .rip-exp:not(:empty) {
  background: var(--rtp-white, #fff);
  border: 1.5px solid var(--rip-org);
  border-radius: var(--rtp-radius-lg, 12px);
  overflow: hidden;
}