/* abcVideo 임베드용 래퍼.
   videoplayer-main 은 1920×1080 풀스크린 스테이지를 window 폭으로 스케일했지만,
   여기서는 플레이어 컨테이너 폭(clientWidth)에 맞춰 균등 스케일한다.
   바 본체(.bottomBar)는 1080 레이어의 하단 100px 에 위치(top:980)하며,
   레이어를 컨테이너 하단에 앵커(bottom:0)해 바가 래퍼 하단에 정확히 붙는다.
   커서 배지는 바 위(영상 쪽)로 넘쳐야 하므로 overflow:visible. */
.wrap {
  position: relative;
  width: 100%;
  height: calc(100px * var(--bar-scale));
  overflow: visible;
  font-family: var(--font-ui);
  user-select: none;
  background: linear-gradient(180deg, rgb(62, 53, 35) 0%, rgb(29, 24, 16) 100%);
}

.layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 1080px;
  /* transform: scale() 는 텍스트를 비트맵으로 축소해 흐려진다. zoom 은 축소된 크기로 '다시 렌더'
     → 글자가 네이티브 해상도로 또렷. 내부 px 좌표/커서/seek 계산은 그대로 동작.
     (지원: Chrome·Edge·Safari·Firefox 126+) */
  zoom: var(--bar-scale);
  pointer-events: none;
}

/* videoplayer VideoPlayer.module.scss .bottomBar 와 동일 좌표/스타일 */
.bottomBar {
  position: absolute;
  left: 0;
  top: 980px;
  width: 1920px;
  height: 100px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgb(62, 53, 35) 0%, rgb(29, 24, 16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 -1px 4px rgba(0, 0, 0, 0.6);
}
