/* ── 모바일 뷰어 모드 (M4) — body.viewer-mode 일 때만 적용 ── */
/* 평소 에디터 레이아웃에는 영향을 주지 않는다 (모든 규칙이 body.viewer-mode 하위). */

/* 편집 전용 UI 숨김 */
body.viewer-mode header .spacer,
body.viewer-mode aside.left,
body.viewer-mode aside.right,
body.viewer-mode #moveCard,
body.viewer-mode main > .card,
body.viewer-mode .grid2,
body.viewer-mode .actions,
body.viewer-mode .globals {
  display: none !important;
}

/* 무대가 화면 폭을 꽉 채우도록 패딩 제거 */
body.viewer-mode main {
  padding: 0;
  gap: 0;
}
body.viewer-mode #stageCol {
  min-width: 0;
}
body.viewer-mode #stageCard {
  padding: 0;
  border: 0;
  border-radius: 0;
}
body.viewer-mode #stageWrap {
  width: 100% !important; /* JS(initStageSize)가 박아둔 인라인 width%를 덮어씀 */
  border: 0;
  border-radius: 0;
}

/* 하단 고정 바 + 광고 슬롯 자리 (JS가 body 하위에 생성) */
body.viewer-mode #viewerDock {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
body.viewer-mode #viewerBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--border);
}
body.viewer-mode #viewerBar button {
  height: 40px;
}
body.viewer-mode #viewerCredit {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--muted-fg);
}