/*
* 共享：整页等比缩放的 token 与基础 reset
* 引入方式（在 的最前面）：
*
*
* 配套：../_shared/page-scale.js（设计宽度通过 .design-canvas 的 width 自动读取，
* 也可在 显式指定）。
*
* 缩放容器外的元素（site-header / nav / back-to-top / 浮层 / Toast）
* 如果想跟着视口同比例放大缩小，必须用 calc(<设计 px> * var(--page-scale))。
*/
:root {
--page-scale: 1;
}
html {
overflow-y: scroll;
}
body {
margin: 0;
overflow-x: hidden;
}
/* 通用缩放容器骨架。页面里直接套用即可：
*
* …
*
* ← 浮层一定写在 .page-frame 外
*/
.page-frame {
position: relative;
width: 100%;
overflow: hidden;
}
.design-canvas {
transform-origin: top left;
transform: scale(var(--page-scale));
}
@media (max-width: 767px) {
html.is-mobile-slice-reader .page-frame {
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.38) #000;
}
html.is-mobile-slice-reader .design-canvas {
max-width: none;
}
}