/* ============================================
   前台页面舞台：把设计画框（css/frame.css）固定在窗口中，
   由 js/site-frame.js 按窗口大小等比缩放并居中。
   画框里面的所有样式都在 css/frame.css，和后台编辑画布共用。
   ============================================ */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

#siteFrame {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  visibility: hidden; /* site-frame.js 计算好缩放后再显示，避免闪一下 */
}
#siteFrame.is-ready { visibility: visible; }

/* 手机版点图片放大的浮层（在画框外，铺满整个屏幕）：纸灰色底，图片居中完整显示，右上角 × 关闭 */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 24px;
  background: rgba(247, 246, 244, .97);
  animation: lightbox-in .2s ease;
}
.image-lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.image-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); object-fit: contain; }
.image-lightbox figcaption { color: #666; font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; line-height: 1.5; text-align: center; }
.image-lightbox .lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #454545;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
/* 放大浮层：左右切换箭头（细线尖角，和网站其他箭头同风格）、张数 */
.image-lightbox .lightbox-prev, .image-lightbox .lightbox-next { position: absolute; top: 50%; z-index: 1; width: 48px; height: 64px; margin-top: -32px; display: grid; place-items: center; border: 0; background: none; color: #454545; cursor: pointer; }
.image-lightbox .lightbox-prev { left: 4px; }
.image-lightbox .lightbox-next { right: 4px; }
.image-lightbox .lightbox-prev:hover, .image-lightbox .lightbox-next:hover { color: #000; }
.image-lightbox .lightbox-count { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #888; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; }
@media (min-width: 769px) { .image-lightbox { padding: 64px 72px 40px; } }