/* 비디오가 있는 컨테이너는 relative만 보장 */
.column {
  position: relative;
  /* overflow: visible;  렌즈가 밖으로 나갈 수 있게 */
}

.video-box{
  position: relative;
  display: inline-block; /* has-text-centered와 궁합 좋음 */
}

/* magnifiable video */
.magnifiable-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  /*cursor: none;  /* hover 시 커서 숨기려면 JS로 토글해도 됨 */
}

/* 원형 돋보기 캔버스 */
.video-magnifier {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  display: none;

  z-index: 10;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  background: transparent;
}

/* 우상단 고정 확대창 */
.magnifier-fixed{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 220px;
  height: 220px;
  border-radius: 50%;       /* 사각 확대창(원하면 50%로 원형) */
  pointer-events: none;
  display: block;

  z-index: 10;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.2);
}