/* ============================================================
   《中国审判》电子期刊 · 阅读器样式
   书页设计基准：480 × 660（大16开比例），页内字号使用 cqw
   （容器查询单位）随页宽缩放，保证拉伸与手机单页下版式不乱。
   ============================================================ */

#reader-view {
  height: 100vh;    /* 老内核回退（微信 X5 等不支持 dvh） */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #120C09;
}

/* 阅读时锁定页面滚动 */
body.is-reading { overflow: hidden; }

/* ============================ 顶栏 ============================ */

.reader-bar {
  position: relative;
  z-index: 20;
  height: 56px; /* 固定高度：标题/文章名换行不改变书台高度 */
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #8E191E 0%, #6B1116 100%);
  border-bottom: 1px solid rgba(201, 160, 80, .5);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .4);
  color: #F4E7CB;
}

.rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(201, 160, 80, .4);
  border-radius: 4px;
  color: #EAD8AC;
  font-size: 12.5px;
  letter-spacing: 1px;
  font-family: var(--serif);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.rbtn:hover {
  background: rgba(201, 160, 80, .18);
  border-color: rgba(201, 160, 80, .75);
  color: #F9EDD3;
}
.rbtn svg { width: 16px; height: 16px; flex: none; }

.reader-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  padding: 0 10px;
}
.reader-title strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #F9EDD3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-title span {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 栏目/文章名过长时截断，保证单行 */
}

.reader-actions { display: flex; gap: 8px; }

/* ============================ 书台 ============================ */

.reader-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(140% 110% at 50% 0%, rgba(201, 160, 80, .07), transparent 55%),
    radial-gradient(130% 100% at 50% 30%, #2E211A 0%, #1A120D 58%, #110B08 100%);
  overflow: hidden;
}

/* 书本体：宽度撑满书台，高度由 JS 按可用空间锁定为书页高度
   （消除库硬页翻转动画的顶部定位偏差）；transform 由 JS 用于
   封面/封底独立跨页的视觉居中补偿 */
#flip-book {
  width: 100%;
  flex: none;
  transition: transform .35s ease;
}

/* 触屏设备：容器补偿过渡与页翻转动画叠加会在弱 GPU 上引起合成抖动，
   改为瞬时补偿（桌面保留平滑过渡） */
@media (pointer: coarse) {
  #flip-book { transition: none; }
}

/* ============================ 底栏 ============================ */

.reader-nav {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #191209, #130D07);
  border-top: 1px solid rgba(201, 160, 80, .3);
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(201, 160, 80, .35);
  border-radius: 4px;
  color: #D9C69B;
  font-size: 13px;
  letter-spacing: 2px;
  font-family: var(--serif);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-btn:hover:not(:disabled) {
  background: rgba(201, 160, 80, .14);
  border-color: rgba(201, 160, 80, .7);
  color: #F9EDD3;
}
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn svg { width: 15px; height: 15px; }

.nav-slider {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

#page-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(201, 160, 80, .26);
  outline: none;
  cursor: pointer;
}
#page-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #F2E3BC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  cursor: pointer;
}
#page-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #F2E3BC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  cursor: pointer;
}

.nav-count {
  min-width: 74px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: #C9B48C;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================ 目录抽屉 ============================ */

.toc-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #261A13 0%, #170F0A 100%);
  border-left: 1px solid rgba(201, 160, 80, .45);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .55);
  transform: translateX(105%);
  transition: transform .3s ease, visibility .3s ease;
  visibility: hidden;
}
.toc-panel.open { transform: translateX(0); visibility: visible; }

.toc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(201, 160, 80, .28);
  background: rgba(140, 20, 25, .35);
}
.toc-panel-head h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--gold-bright);
}
.toc-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: #C9B48C;
  border-radius: 4px;
}
.toc-close:hover { color: #F9EDD3; background: rgba(201, 160, 80, .15); }
.toc-close svg { width: 18px; height: 18px; }

.toc-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px calc(26px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}

.panel-sec-name {
  margin: 18px 0 4px;
  font-size: 12.5px;
  letter-spacing: 4px;
  color: var(--gold);
}
.panel-sec-name::before { content: "〔"; opacity: .7; }
.panel-sec-name::after { content: "〕"; opacity: .7; }

.panel-toc-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 6px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #D8CBB2;
  font-size: 14px;
  font-family: var(--serif);
  text-align: left;
  cursor: pointer;
  line-height: 1.5;
}
.panel-toc-item:hover { background: rgba(201, 160, 80, .12); color: #F9EDD3; }
.panel-toc-item .p-title-t { flex: none; max-width: 78%; }
.panel-toc-item .p-dots { flex: 1; border-bottom: 1px dotted rgba(201, 160, 80, .45); transform: translateY(-3px); }
.panel-toc-item .p-pno { color: var(--gold); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ============================ 轻提示 ============================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 60;
  transform: translateX(-50%) translateY(10px);
  max-width: 86vw;
  padding: 10px 24px;
  background: rgba(32, 21, 14, .96);
  border: 1px solid rgba(201, 160, 80, .55);
  border-radius: 4px;
  color: #EAD8AC;
  font-size: 13.5px;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   书页通用
   ============================================================ */

.page {
  width: 480px;
  height: 660px;
  /* 纸面色 + 极浅纵向纤维质感（合并进背景，避免额外覆盖层在
     安卓 WebView 翻页动画时引起过度重绘/闪动） */
  background-color: var(--paper);
  background-image: linear-gradient(90deg, rgba(120, 96, 60, .05) 0%, transparent 3%, transparent 97%, rgba(120, 96, 60, .05) 100%);
  color: var(--ink);
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  font-family: var(--serif);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45); /* 每页投影，替代整书容器投影 */
  /* 翻页时库会逐帧重写内联 transform，常驻提升图层可避免
     图层反复重建造成的闪烁（安卓微信 WebView 尤为明显） */
  will-change: transform;
}

/* 说明：PageFlip 会以内联样式把页面元素重置为 display:block，
   因此所有 flex 布局都放在内层 .pg-inner 上，页面元素本身只承载背景与装饰。 */
.pg-inner {
  width: 100%;
  height: 100%;
}

/* ============================ 封面 ============================ */

.page-cover {
  color: #F6ECD8;
  background:
    radial-gradient(150% 80% at 50% -12%, rgba(255, 216, 150, .17), transparent 62%),
    linear-gradient(172deg, #A8262C 0%, #861519 46%, #64101A 100%);
}
.page-cover .pg-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6cqw 7cqw 5cqw;
}
.page-cover::before {
  content: "";
  position: absolute;
  inset: 3.2cqw;
  border: 1px solid rgba(201, 160, 80, .62);
  pointer-events: none;
}
.page-cover::after {
  content: "";
  position: absolute;
  inset: 4.2cqw;
  border: 1px solid rgba(201, 160, 80, .3);
  pointer-events: none;
  background: none;
}

.cover-top { font-size: 2.2cqw; line-height: 1.75; letter-spacing: .55cqw; color: rgba(244, 231, 203, .85); }

.cover-name {
  margin-top: 2.6cqw;
  font-size: 13.5cqw;
  font-weight: 700;
  letter-spacing: 2.4cqw;
  margin-right: -2.4cqw;
  line-height: 1.18;
  color: #F7EBD0;
  text-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .42);
}
.cover-en {
  margin-top: .4cqw;
  font-size: 2.5cqw;
  font-weight: 600;
  letter-spacing: 1.1cqw;
  margin-right: -1.1cqw;
  color: var(--gold-bright);
}
.cover-badge {
  margin-top: 3.4cqw;
  width: 19cqw;
  color: var(--gold-bright);
  opacity: .96;
}
.cover-badge svg { width: 100%; height: auto; display: block; }
.cover-theme {
  margin-top: 3.6cqw;
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: .9cqw;
  line-height: 1.5;
  color: #FBF3DE;
  text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .38);
}
.cover-sub {
  margin-top: 1cqw;
  font-size: 2.5cqw;
  letter-spacing: .5cqw;
  color: var(--gold-bright);
}

.cover-hl {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid rgba(201, 160, 80, .45);
  padding-top: 3cqw;
  text-align: left;
}
.cover-hl-title {
  text-align: center;
  font-size: 2.7cqw;
  letter-spacing: 1.6cqw;
  margin-right: -1.6cqw;
  color: var(--gold-bright);
  margin-bottom: 1.6cqw;
}
.cover-hl-item {
  font-size: 2.45cqw;
  line-height: 1.95;
  letter-spacing: .12cqw;
  color: rgba(250, 243, 227, .97);
  text-shadow: 0 .15cqw .45cqw rgba(0, 0, 0, .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cover-hl-item b { color: var(--gold-bright); font-weight: 600; margin-right: .8cqw; }

.cover-bottom {
  margin-top: 3.4cqw;
  text-align: center;
}
.cover-issue {
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: .5cqw;
  color: var(--gold-bright);
}
.cover-issue span { margin-left: 1.4cqw; font-size: .68em; font-weight: 600; }
.cover-date {
  margin-top: 1cqw;
  font-size: 2.1cqw;
  letter-spacing: .4cqw;
  color: rgba(244, 231, 203, .75);
}

/* ============================ 版权页 ============================ */

.page-copyright { color: #4A4238; }
.page-copyright .pg-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10cqw 12cqw;
}
.cr-badge { width: 13cqw; color: var(--gold-dim); margin-bottom: 3cqw; }
.cr-badge svg { width: 100%; height: auto; display: block; }
.cr-name { font-size: 5.2cqw; font-weight: 700; letter-spacing: 1cqw; color: var(--red-deep); }
.cr-en { margin-top: .8cqw; font-size: 2.3cqw; letter-spacing: .8cqw; color: var(--gold-dim); }
.cr-issue { margin-top: 2cqw; font-size: 2.6cqw; letter-spacing: .3cqw; color: #4A4238; }

.cr-rule {
  width: 30cqw;
  height: 1px;
  margin: 4cqw 0;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 80, .8), transparent);
  position: relative;
}
.cr-rule::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: 1.6cqw;
  color: var(--gold-dim);
  background: var(--paper);
  padding: 0 1cqw;
}

.cr-list { width: 100%; font-size: 2.35cqw; line-height: 2.15; letter-spacing: .12cqw; }
.cr-list li { list-style: none; display: flex; justify-content: space-between; gap: 2cqw; text-align: left; }
.cr-list li b { flex: none; font-weight: 600; color: #6A6055; }
.cr-list li span { text-align: right; color: #3E3830; }

.cr-note {
  margin-top: 4.5cqw;
  font-size: 2.1cqw;
  line-height: 1.9;
  color: #857A67;
  text-align: justify;
}

/* ============================ 目录页 ============================ */

.page-toc .pg-inner {
  display: flex;
  flex-direction: column;
  padding: 7cqw 8.5cqw 6cqw;
}

.toc-head { text-align: center; flex: none; }
.toc-head h2 {
  font-size: 5.4cqw;
  font-weight: 700;
  letter-spacing: 1.8cqw;
  margin-right: -1.8cqw;
  color: var(--red-deep);
}
.toc-head-rule {
  margin: 2cqw auto 0;
  width: 34cqw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  position: relative;
}
.toc-head-rule::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.7cqw;
  color: var(--gold-dim);
  background: var(--paper);
  padding: 0 1cqw;
}
.toc-head-sub { margin-top: 1.6cqw; font-size: 2.2cqw; letter-spacing: .5cqw; color: #857A67; }

.toc-body { margin-top: 2.6cqw; flex: 1; min-height: 0; overflow: hidden; }

.toc-sec { margin-bottom: 1.2cqw; }
.toc-sec-name {
  font-size: 2.55cqw;
  font-weight: 700;
  letter-spacing: .4cqw;
  color: var(--red);
  margin-bottom: .8cqw;
}
.toc-sec-name::before { content: "〔"; color: var(--gold-dim); }
.toc-sec-name::after { content: "〕"; color: var(--gold-dim); }

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  padding: .4cqw 0;
  font-size: 2.85cqw;
  line-height: 1.55;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  color: var(--ink);
}
.toc-item:hover .toc-title { color: var(--red); }
.toc-title { flex: none; max-width: 76%; color: #33302B; }
.toc-dots {
  flex: 1;
  min-width: 4cqw;
  border-bottom: 1px dotted #B7A98F;
  transform: translateY(-.55cqw);
}
.toc-page { flex: none; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================ 正文页 ============================ */

.page-article .pg-inner {
  display: flex;
  flex-direction: column;
  padding: 5cqw 8cqw 4.4cqw;
}

.p-head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 2.05cqw;
  letter-spacing: .3cqw;
  color: #8C7B66;
  padding-bottom: 1.4cqw;
  border-bottom: 4px double rgba(154, 31, 36, .45);
}
.p-head .p-head-j { color: #A08A6A; }

.p-body { flex: 1; min-height: 0; margin-top: 3.2cqw; }

.p-kicker {
  display: inline-block;
  background: var(--red);
  color: #F7EBD0;
  font-size: 2.2cqw;
  letter-spacing: .55cqw;
  padding: .65cqw 1.8cqw .65cqw 2.35cqw;
  margin-bottom: 2.2cqw;
}
.p-title {
  font-size: 5.1cqw;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .18cqw;
  color: #262019;
  text-align: center;
}
.p-author {
  margin-top: 1.7cqw;
  text-align: center;
  font-size: 2.45cqw;
  letter-spacing: .25cqw;
  color: #6A6055;
}
.p-author-note { margin-top: .6cqw; text-align: center; font-size: 2cqw; color: #8C7B66; }
.p-title-rule {
  width: 22cqw;
  height: 1px;
  margin: 2.4cqw auto 3cqw;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  position: relative;
}
.p-title-rule::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  font-size: 1.5cqw;
  color: var(--gold-dim);
  background: var(--paper);
  padding: 0 .8cqw;
}

.p-para {
  font-size: 3.02cqw;
  line-height: 2.02;
  letter-spacing: .1cqw;
  text-align: justify;
  text-indent: 2em;
  color: #2E2922;
}
.p-para + .p-para { margin-top: .2cqw; }
.p-para-lead { text-indent: 0; }

.dropcap {
  float: left;
  font-size: 10.2cqw;
  line-height: 1.06;
  padding: .7cqw 1.5cqw 0 0;
  color: var(--red);
  font-weight: 700;
}
.p-cont {
  font-size: 2.2cqw;
  color: #8C7B66;
  letter-spacing: .2cqw;
  margin-bottom: 1.6cqw;
}
.p-cont::before,
.p-cont::after { content: "——"; color: #C9BB9F; margin: 0 .6cqw; }

.p-foot {
  flex: none;
  margin-top: 2.4cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding-top: 1.6cqw;
  border-top: 1px solid rgba(154, 31, 36, .22);
}
.p-foot::before,
.p-foot::after {
  content: "";
  width: 6cqw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 31, 36, .5));
}
.p-foot::after { background: linear-gradient(90deg, rgba(154, 31, 36, .5), transparent); }
.p-no { font-size: 2.5cqw; color: var(--red-deep); font-weight: 600; letter-spacing: .1cqw; font-variant-numeric: tabular-nums; }

/* ============================ 封底 ============================ */

.page-back {
  color: #F6ECD8;
  background:
    radial-gradient(140% 80% at 50% 115%, rgba(255, 216, 150, .13), transparent 60%),
    linear-gradient(188deg, #64101A 0%, #861519 52%, #A8262C 100%);
}
.page-back .pg-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8cqw 10cqw;
}
.page-back::before {
  content: "";
  position: absolute;
  inset: 3.2cqw;
  border: 1px solid rgba(201, 160, 80, .55);
  pointer-events: none;
}
.page-back::after {
  content: "";
  position: absolute;
  inset: 4.2cqw;
  border: 1px solid rgba(201, 160, 80, .28);
  pointer-events: none;
  background: none;
}
.bk-badge { width: 17cqw; color: var(--gold-bright); opacity: .95; }
.bk-badge svg { width: 100%; height: auto; display: block; }
.bk-name { margin-top: 3cqw; font-size: 7cqw; font-weight: 700; letter-spacing: 1.6cqw; margin-right: -1.6cqw; color: #F7EBD0; }
.bk-en { margin-top: .8cqw; font-size: 2.3cqw; letter-spacing: .9cqw; color: var(--gold-bright); }
.bk-slogan {
  margin-top: 4cqw;
  font-size: 2.6cqw;
  letter-spacing: .5cqw;
  line-height: 2;
  color: rgba(248, 240, 222, .9);
}
.bk-contact {
  margin-top: 3.6cqw;
  font-size: 2.15cqw;
  line-height: 1.9;
  letter-spacing: .2cqw;
  color: rgba(244, 231, 203, .78);
}
.bk-barcode {
  margin-top: 5cqw;
  background: #F5F1E8;
  padding: 1.8cqw 2.6cqw 1.2cqw;
}
.bk-barcode .code {
  width: 30cqw;
  height: 6.5cqw;
  background: repeating-linear-gradient(90deg,
    #1A1512 0, #1A1512 .55cqw, transparent .55cqw, transparent 1cqw,
    #1A1512 1cqw, #1A1512 1.4cqw, transparent 1.4cqw, transparent 2.1cqw,
    #1A1512 2.1cqw, #1A1512 2.25cqw, transparent 2.25cqw, transparent 2.8cqw);
}
.bk-barcode .code-no {
  margin-top: .8cqw;
  text-align: center;
  font-size: 1.8cqw;
  letter-spacing: .35cqw;
  color: #1A1512;
  font-family: "Courier New", monospace;
}

/* ============================================================
   阅读器响应式（手机）
   ============================================================ */

@media (max-width: 640px) {
  .reader-bar { height: 50px; padding: 6px 10px; gap: 6px; }
  .rbtn { width: 38px; height: 36px; padding: 0; }
  .rbtn-text { display: none; }
  .reader-title strong { font-size: 13.5px; letter-spacing: .5px; }
  .reader-title span { font-size: 10.5px; letter-spacing: 1.5px; }
  /* 手机竖屏使用修长页面比例（见 reader.js PAGE_RATIO_MOBILE）：
     收窄书台留边让书页更宽更高，正文行距同步放大以铺满更高的页面 */
  .reader-stage { padding: 4px; }
  .page-article .p-para { line-height: 2.25; }
  .reader-nav { gap: 8px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); min-height: 52px; }
  .nav-btn { padding: 0 11px; height: 40px; }
  .nav-btn-text { display: none; }
  .nav-count { min-width: 62px; font-size: 11.5px; }
  .toc-panel { width: min(340px, 88vw); }
  .toast { bottom: 72px; }
}

/* 横屏矮屏（手机横放看书） */
@media (max-height: 520px) {
  .reader-bar { height: 44px; padding: 4px 10px; }
  .reader-title { display: none; }
  .reader-nav { min-height: 44px; }
  .nav-btn { height: 32px; padding: 0 12px; }
}