/* 크리에이터 홈의 방송 칸(D-085 · D-117, donate-live.js): 영상만. 채팅은 오른쪽 칸의 탭. 플레이어 위에는 아무것도 얹지 않는다(유튜브 최소 기능 규정).
   app.css 다음에 불러온다(같은 .app 세기 — 뒤에 와서 .panel 규칙을 덮는다). 2026-11-02 app.css 300줄 상한 때문에 떼어 냄 */
.app .livebox { padding: 12px; }
.app .player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.app .player.vertical { aspect-ratio: 9 / 16; width: min(100%, calc(72vh * 9 / 16)); margin: 0 auto; }
.app .player iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }
.app .livefoot { margin: 10px 4px 0; text-align: right; }
.app .livefoot a { color: var(--ui-sub); font-weight: 600; text-decoration: none; }
.app .livefoot a:hover { color: var(--ui-ink); }
.app #liveOnly { margin-top: 12px; }

/* 폰: 시청 모드를 켜면 영상이 위에 붙어 따라온다(후원 칸을 내려도 보이게) */
@media (max-width: 959px) {
  .app .livebox { position: sticky; top: 0; z-index: 30; padding: 0 0 8px; border-top: 0; border-bottom: 1px solid var(--ui-line); }
  .app .livebox .player { border-radius: 0; }
  .app .livefoot { margin: 8px 16px 0; }
  /* 세로 방송은 화면 높이의 45%까지(전에는 72% — 위에 붙어 따라오면 후원 칸이 화면의 4분의 1만 남았다, 2026-11-02).
     입력할 때만 줄이면 그 순간 칸이 위로 밀려 다시 튀므로 폰에서는 늘 이 높이 */
  .app .player.vertical { width: min(100%, calc(45vh * 9 / 16)); }
  /* 후원 칸(금액 · 이름 · 메시지 · 카드 · 로그인)에 입력하는 동안은 위에 붙이지 않는다(donate-live.js 가 body.typing).
     붙은 채로 키보드가 열리면 영상이 남은 화면을 덮었다. 붙기만 풀어 칸 자리는 그대로(흐름 높이가 바뀌지 않아 튀지 않는다) */
  .app.typing .livebox { position: static; }
  /* 카드 칸 자동 넘김(card-form.js — 칸이 차면 다음 칸으로 focus): 브라우저가 다음 칸을 화면 끝에 붙여 맞추지 않게 위로는 줄 이름표,
     아래로는 다음 줄만큼 띄운다. 그러면 한 번 맞춘 뒤 다음 칸들은 이미 보여 넘어갈 때마다 다시 스크롤하지 않는다(대시보드 15d961d 와 같은 방식) */
  .app #panel-donate .cf-in { scroll-margin: 48px 0 96px; }
}

/* 960 부터: 영상 칸은 선 없는 맨 칸(후원 띠 위) */
@media (min-width: 960px) {
  .app .livebox { padding: 0; }
}