/* base.css - reset / 字体 / 全局背景 / H5 容器 / 页面侧滑切换 */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
  background: #f5f5f5;        /* H5 背景：浅灰 */
  color: #1c1c1e;
  min-height: 100vh;
  overflow: hidden;            /* 防止 body 出现滚动条 */
}

/* === H5 移动端容器（PC 居中，移动端铺满） === */
.app-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100vh;                       /* 固定视口高度，避免被内容撑高 */
  margin: 0 auto;
  background: #fff;
  overflow: hidden;                    /* 关键：把滑出的页面裁掉 */
  box-shadow: 0 0 20px rgba(0,0,0,0.04);
}

/* === 页面容器（侧滑切换） === */
/* 全部 .page 绝对定位在容器里 */
.page {
  position: absolute;
  inset: 0;                            /* top/right/bottom/left = 0 */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;                        /* 跟随容器 */
  background: #fff;
  overflow-y: auto;                    /* 页面内部超出时滚动 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* 侧滑动画 */
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              opacity   0.3s ease;
  transform: translateX(100%);         /* 默认在右侧外面 */
  opacity: 0;
  z-index: 1;
  will-change: transform, opacity;
}

/* 当前显示的页面 */
.page.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}

/* 兼容旧 JS 里的 hidden-right / hidden-left 标记（语义化位置） */
.page.hidden-right { transform: translateX(100%);  opacity: 0; }
.page.hidden-left  { transform: translateX(-30%);  opacity: 0; }