/* 落霞来信 · 基础样式（reset + 外壳 + 视图容器 + 排版）
   ------------------------------------------------------------
   只放全站通用的重置、手机外壳、视图容器与滚动条；
   组件样式见 components.css，各页面版式见 pages.css。
*/

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

html,body{
  background:var(--page-bg);
  font-family:var(--font-serif);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
body{
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;padding:24px 0;
}

/* 按钮统一继承字体与颜色，并去掉浏览器默认外观 */
button{
  font-family:inherit;font-size:inherit;color:inherit;
  background:none;border:none;cursor:pointer;
}

/* ---- 手机外壳 ---- */
.phone{
  width:390px;height:844px;background:var(--paper);
  border-radius:var(--r-phone);overflow:hidden;position:relative;
  box-shadow:var(--sh-phone);
  display:flex;flex-direction:column;
}
/* 窄屏兜底（无 JS 时也能全屏） */
@media (max-width:420px){
  body{padding:0;}
  .phone{width:100vw;height:100vh;border-radius:0;box-shadow:none;}
}
/* 真机全屏：js/main.js 启动时判定为移动设备后，给 <html> 加上 .shell-off，
   此时不再套 390×844 的桌面演示外框，直接铺满屏幕。 */
html.shell-off body{padding:0;}
html.shell-off .phone{
  width:100vw;height:100vh;height:100dvh;
  border-radius:0;box-shadow:none;
}

/* ---- 视图容器（SPA 外壳：片段挂载点） ---- */
.views{flex:1;position:relative;overflow:hidden;}
.view{position:absolute;inset:0;overflow-y:auto;display:none;flex-direction:column;}
.view.active{display:flex;animation:fadein var(--dur-slow) ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 滚动条不占宽度 — 隐藏原生滚动条（滚动本身照常可用：滚轮 / 触控板 / 触摸滑动） */
.view,.read-scroll{scrollbar-width:none;-ms-overflow-style:none;}
.view::-webkit-scrollbar,
.read-scroll::-webkit-scrollbar{width:0;height:0;}

/* 图片不可拖拽、不可选中（动态注入的图片同样生效，跨浏览器兜底见 js/main.js） */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}