/*!
 * camera.css — camera.js가 동작하기 위한 최소 골격
 *
 * 색·폰트·셀 디자인은 여기 없습니다. 그건 프로젝트 몫이고,
 * 이 파일은 "카메라가 성립하는 데 반드시 필요한 것"만 담습니다.
 * 세 줄로 요약하면: 창은 자르고, 줌은 가운데서, 팬은 왼쪽 위에서.
 */

/* 잘라내는 창. 여기 밖으로 나간 페이지는 보이지 않습니다. */
.rig-viewport {
  position: relative;
  overflow: hidden;
}

/* 배율 레이어.
   transform-origin이 50% 50%여야 축소할 때 현재 페이지가
   화면 가운데에 남습니다. 0 0으로 두면 구석으로 도망갑니다. */
.rig-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* 팬 레이어.
   보드는 뷰포트보다 훨씬 크고, 이 요소가 통째로 움직입니다.
   grid-template과 gap은 camera.js가 뷰포트 크기에 맞춰 인라인으로 넣습니다.

   scale과 translate를 한 요소에 합치지 마세요.
   translate 값이 scale에 곱해져서 좌표 계산이 어긋납니다. */
.rig-board {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  transform-origin: 0 0;
  will-change: transform;
}

/* 셀 자체에는 아무 스타일도 강요하지 않습니다.
   크기는 grid가 정하므로 width/height를 직접 주지 마세요. */
.rig-cell {
  overflow: hidden;
}