/* 뷰어 CSS 크기(2026-10-11: 퍼즐 XOT 관리자 시범 → FlipSight 퍼즐 전체 → Eval → 분석 오버레이 전체).
   ocviewer.inline-names.js autoScaleCss 가 #ocgibo 를 transform 으로 확대·축소하지 않고 칸 크기(--cell, 정수 px)를 바꾼다.
   크기 값은 원래 스타일(ocviewer.css·ocviewer.html <style>·리뷰/코치/레슨/재질 css·뷰어 인라인 값)에 칸 비율 변수로 들어 있다:
   px 자리가 calc(var(--ocv-u, 1px) * N), 이름·레이팅·시계 글자와 시계 줄 국기·판정 배지는 var(--ocv-tu, 1px).
   변수는 CSS 방식일 때 #ocgibo 안에서만 정의한다(아래). 그 밖(body 로 옮겨지는 팝업·결과 카드)과 예전 방식·다른 페이지는 기본값 1px 라
   예전과 계산 결과가 같다 — 예전 transform 이 #ocgibo 안만 확대하던 것과 같은 범위다. 크기를 바꿀 땐 원래 규칙만 고치면 된다.
   --ocv-u = 칸/44(예전 44px 칸 기준 1px), --ocv-tu = 작아질 땐 같이·커질 땐 80%(예전 oc-textfit).
   이 파일에는 예전과 모양이 다른 CSS 방식 전용 규칙만 둔다(좌표 가운데 정렬·별점 위치·배경 그림 칸 선).
   zoom 은 쓰지 않는다: 맥 아이패드 앱(WebKit)에서 상자만 커지고 글자는 작게 남았다(게임방 보드 2026-10-11 같은 함정). */
html.ocv-css-on #ocgibo {
  --ocv-u: calc(var(--cell) / 44);
  --ocv-tu: max(min(1px, var(--ocv-u)), calc(var(--ocv-u) * 0.8));
  --ocv-frame: calc(var(--ocv-u) * 14);
}
/* 좌표: 예전 고정 보정값(-22px 등) 대신 각 칸 정가운데·테두리 두께 가운데(#char_a~h left = 칸 × 1~8, #char_1~8 top = 칸 × 0~7) */
html.ocv-css-on #x-coordinate { top: calc(var(--ocv-frame) * -1); left: 0; width: var(--board); height: var(--ocv-frame); }
html.ocv-css-on .x_char { top: 0; width: var(--cell); margin-left: calc(var(--cell) * -1); height: var(--ocv-frame); line-height: var(--ocv-frame); font-size: calc(var(--ocv-u) * 11) !important; }
html.ocv-css-on #y-coordinate { top: 0; left: calc(var(--ocv-frame) * -1); width: var(--ocv-frame); height: var(--board); }
html.ocv-css-on .y_char { left: 0; width: var(--ocv-frame); height: var(--cell); line-height: var(--cell); font-size: calc(var(--ocv-u) * 11) !important; }
/* 별점 4개: 가운데를 칸 교차점에(점 전체 7u 의 절반) */
html.ocv-css-on #dot_lu { top: calc(var(--cell) * 2 - var(--ocv-u) * 3.5); left: calc(var(--cell) * 2 - var(--ocv-u) * 3.5); }
html.ocv-css-on #dot_ru { top: calc(var(--cell) * 2 - var(--ocv-u) * 3.5); left: calc(var(--cell) * 6 - var(--ocv-u) * 3.5); }
html.ocv-css-on #dot_ld { top: calc(var(--cell) * 6 - var(--ocv-u) * 3.5); left: calc(var(--cell) * 2 - var(--ocv-u) * 3.5); }
html.ocv-css-on #dot_rd { top: calc(var(--cell) * 6 - var(--ocv-u) * 3.5); left: calc(var(--cell) * 6 - var(--ocv-u) * 3.5); }
/* 칸 선은 #board::before 배경 그림이 그린다(ocviewer.inline-names.js drawCssGrid): DOM 칸 테두리·보드 안쪽 그림자는 끈다(마지막 줄·칸의 0px id 규칙과도 겹치지 않는다) */
html.ocv-css-on .oc_cell { border-right-width: 0; border-bottom-width: 0; }
html.ocv-css-on #board { box-shadow: none; }
/* 예전 칸 선 캔버스(캐시된 옛 스크립트가 아직 만들 수 있음): 크기를 묶어 둔다. 없으면 캔버스가 배킹 크기로 커진다. */
html.ocv-css-on #board canvas.ocv-css-grid { position: absolute; left: 0; top: 0; width: var(--board); height: var(--board); z-index: 0; pointer-events: none; }
html.ocv-css-on #board::before { content: ""; position: absolute; left: 0; top: 0; width: var(--board); height: var(--board); background-image: var(--ocv-grid-img, none); background-size: 100% 100%; background-repeat: no-repeat; z-index: 0; pointer-events: none; }