/* SHINHA Form Tools — Preview A4 */
.preview-viewport {
  flex: 1;
  overflow: auto;
  padding: 20px;
  /* Block layout: avoid flex justify-content:center clipping left scroll range */
  display: block;
  position: relative;
  -webkit-overflow-scrolling: touch;
  /* One-finger pan/scroll; custom pinch handled in zoom-preview.js */
  touch-action: pan-x pan-y;
}

.preview-viewport.is-pinch-zooming {
  touch-action: none;
}

.preview-viewport.is-zoom-overflow {
  /* When zoomed larger than viewport, content must start at left/top */
  text-align: left;
}

.preview-canvas {
  display: block;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
  /* Size set by zoom-preview.js (base * scale) — do not transform this node */
  transform: none;
}

.preview-a4__page {
  display: block;
  width: max-content;
  max-width: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  background: #fff;
  transform-origin: top left;
}

.preview-a4__page .core-preview {
  box-shadow: none;
}

/* Zoom controls bar */
.zoom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: #fff;
  border-bottom: 1px solid #dde1e8;
  flex-shrink: 0;
}

.zoom-bar__level {
  font-size: 13px;
  font-weight: 600;
  color: #1a4b8c;
  min-width: 44px;
  text-align: center;
}

.zoom-bar__hint {
  font-size: 11px;
  color: #888;
  margin-left: auto;
}

/* Design canvas — fixed A4 width, never responsive reflow */
.core-preview {
  width: 210mm;
  max-width: none;
}

@media (max-width: 767px) {
  .preview-viewport {
    flex: none;
    display: block;
    position: relative;
    min-height: 0;
    height: auto;
    overflow: auto;
    padding: 12px 12px 16px;
  }

  .preview-canvas {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .preview-a4__page,
  .preview-a4__page .core-preview {
    transform-origin: top left;
  }
}

/* Export snapshot — always full design size */
.export-clone-host[data-export-mode="true"] .core-preview,
[data-export-mode="true"].core-preview {
  width: 210mm !important;
  max-width: none !important;
  transform: none !important;
  zoom: 1 !important;
}

.export-clone-host[data-export-mode="true"] .preview-a4__page {
  transform: none !important;
  box-shadow: none;
}

/* Shared logo display — borderless, free-scale (size from LogoUpload inline px) */
[data-logo-slot],
[data-logo-slot].logo-pos-top-left,
[data-logo-slot].logo-pos-top-right {
  border: none;
  background: transparent;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

[data-logo-slot]:empty {
  display: none;
}

[data-logo-slot]:empty::before {
  content: none !important;
}

[data-logo-slot] img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
}