/* ============================================================
   site.css —— 页面外框样式
   负责：顶部蓝色标题栏、整体高度分配、90% 宽度的阅读区、页脚分割线、打印。
   说明：工具栏与 PDF 页面区的样式在 viewer.css 里，不要改这里。
   ============================================================ */

/* ---------- 1. 全局基础 ---------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  /* 与原网页一致：优先微软雅黑 */
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}
* { box-sizing: border-box; }

/* 整页竖向排布：标题栏固定高度，阅读区吃掉剩余高度 */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- 2. 顶部蓝色标题栏（对应原页面 .head / .pname） ---------- */
.head {
  flex: none;
  background: #0a96d3;
  padding: .5em 0;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  z-index: 20;
}
/* 标题文字：字号随屏幕宽度缩放，桌面上就是原网页的 3em（48px） */
.pname {
  margin: 0;
  font-size: clamp(1.55rem, 4.4vw, 3rem);
  line-height: 1;
  color: #fff;
  font-weight: 400;
  letter-spacing: .02em;
}
/* 原网页里有一行浅色副标题，默认隐藏，需要时把 hidden 去掉 */
.pdoc {
  margin: 0;
  font-size: 2.5em;
  line-height: 1.5em;
  color: #eee;
}
.pdoc[hidden] { display: none; }

/* ---------- 3. 阅读区外壳（对应原页面 .labbox：宽 90%，上下 2em） ---------- */
.stage-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2em 0 .7em;
}

/* 真正的阅读器：宽度 90%，深灰底色，工具栏和页面都装在它里面 */
.stage {
  width: 90%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #404040;
}

/* 阅读区下方的分割线（原网页的 HR） */
.rule {
  flex: none;
  width: 80%;
  height: 2px;
  border: 0;
  margin: .7em auto 0;
  background: #987cb9;
  opacity: .85;
}

/* ---------- 4. 窄屏（手机）微调：只调外边距，工具栏自己的响应式在 viewer.css ---------- */
@media (max-width: 700px) {
  .stage-wrap { padding: 1em 0 .5em; }
}

/* ---------- 5. 打印：只输出白页，不带标题栏和工具栏 ---------- */
@media print {
  .head, .rule, #toolbarContainer, #loadingBar, #findbar, #secondaryToolbar { display: none !important; }
  body { overflow: visible; background: #fff; display: block; }
  .stage-wrap { padding: 0; flex: none; display: block; }
  .stage { width: 100%; background: #fff; display: block; height: auto; }
  #viewerContainer { overflow: visible; position: static; background: #fff; }
  #viewer { padding: 0; }
  .page { margin: 0 auto; box-shadow: none; page-break-after: always; break-after: page; }
  .page:last-child { page-break-after: auto; break-after: auto; }
  .page .wm { display: none !important; }
}

/* ---------- 6. 全屏查看时：阅读器铺满整个屏幕 ---------- */
.stage:fullscreen { width: 100%; height: 100%; background: #404040; }
.stage:-webkit-full-screen { width: 100%; height: 100%; }