/* ==========================================================================
   JIEQI 現代版 · 手機版（wap）樣式
   移動優先：單列、大點擊區、底部 Tab、適配劉海屏安全區
   ========================================================================== */

:root {
  --w-bg: #f5f3ef;
  --w-surface: #ffffff;
  --w-border: #e8e3d9;
  --w-text: #26241f;
  --w-text2: #6b6559;
  --w-text3: #9a9384;
  --w-primary: #a04a2e;
  --w-primary-soft: #f7ece7;
  --w-ok: #2f6b4f;
  --w-danger: #b03a2e;
  --w-header-h: 48px;
  --w-tabbar-h: 54px;
  --w-radius: 10px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--w-text);
  background: var(--w-bg);
  /* 在電腦瀏覽器上預覽時，收窄成手機寬度居中顯示 */
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  box-shadow: 0 0 0 1px var(--w-border);
  position: relative;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- 頂欄 ---------- */
.wap-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--w-header-h);
  display: flex;
  align-items: center;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
}

.wap-hslot {
  width: 48px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wap-back, .wap-hsearch {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--w-text);
  border-radius: 50%;
}
.wap-back:active, .wap-hsearch:active { background: var(--w-primary-soft); }
.wap-hsearch { font-size: 19px; }

.wap-htitle {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 主體 ---------- */
.wap-main {
  padding-bottom: calc(var(--w-tabbar-h) + 24px);
}
.wap-no-tabbar .wap-main { padding-bottom: 24px; }

.wap-sec {
  background: var(--w-surface);
  margin-bottom: 10px;
  border-top: 1px solid var(--w-border);
  border-bottom: 1px solid var(--w-border);
}

.wap-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.wap-sec-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  padding-left: 9px;
  position: relative;
}
.wap-sec-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--w-primary);
  border-radius: 2px;
}
.wap-sec-more { font-size: 13px; color: var(--w-text3); }

.wap-sec-body { padding: 0 14px 12px; }

/* ---------- 分類膠囊 ---------- */
.wap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
}
.wap-chip {
  padding: 8px 14px;
  background: var(--w-bg);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--w-text2);
  line-height: 1.2;
}
.wap-chip:active { background: var(--w-primary-soft); color: var(--w-primary); }
.wap-chip.active { background: var(--w-primary); color: #fff; }
.wap-chip em { font-style: normal; font-size: 12px; opacity: .6; margin-left: 3px; }

/* ---------- 橫向滾動書卡 ---------- */
.wap-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 14px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wap-scroll::-webkit-scrollbar { display: none; }

.wap-card {
  flex: 0 0 88px;
  width: 88px;
}
.wap-card-cover {
  width: 88px; height: 117px;
  border-radius: 6px;
  overflow: hidden;
  background: #ece7dc;
  position: relative;
}
.wap-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.wap-card-name {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wap-card-author { display: block; font-size: 11.5px; color: var(--w-text3); }

/* ---------- 列表 ---------- */
.wap-list { list-style: none; margin: 0; padding: 0; }

.wap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--w-border);
  min-height: 56px;
}
.wap-item:last-child { border-bottom: 0; }
.wap-item:active { background: #faf8f5; }

.wap-item-body { flex: 1; min-width: 0; }

.wap-item-cover {
  flex-shrink: 0;
  width: 44px;
  height: 59px;
  border-radius: 4px;
  overflow: hidden;
  background: #ece7dc;
}
.wap-item-cover img { width: 100%; height: 100%; object-fit: cover; }

.wap-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
}
.wap-item-title .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wap-item-meta {
  font-size: 12px;
  color: var(--w-text3);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wap-item-latest {
  display: block;
  font-size: 12.5px;
  color: var(--w-text2);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wap-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--w-bg);
  color: var(--w-text3);
  line-height: 1.5;
}
.wap-tag.ok { background: #e9f3ee; color: var(--w-ok); }
.wap-tag.hot { background: var(--w-primary-soft); color: var(--w-primary); }

/* 排行名次 */
.wap-rank-no {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--w-bg); color: var(--w-text3);
}
.wap-rank-no.n1 { background: #d94f3d; color: #fff; }
.wap-rank-no.n2 { background: #e08a2e; color: #fff; }
.wap-rank-no.n3 { background: #c9a227; color: #fff; }

/* ---------- 作品詳情 ---------- */
.wap-bookhead {
  display: flex;
  gap: 13px;
  padding: 16px 14px;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
}
.wap-bookhead-cover {
  flex-shrink: 0;
  width: 92px; height: 122px;
  border-radius: 6px;
  overflow: hidden;
  background: #ece7dc;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.wap-bookhead-cover img { width: 100%; height: 100%; object-fit: cover; }

.wap-bookhead-info { flex: 1; min-width: 0; }
.wap-bookhead-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.wap-bookhead-meta {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--w-text2);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
}
.wap-bookhead-stat {
  margin: 0;
  font-size: 12px;
  color: var(--w-text3);
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
}

.wap-actions {
  display: flex;
  gap: 9px;
  padding: 12px 14px;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
}
.wap-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-family: inherit;
  border: 1px solid var(--w-border);
  background: var(--w-surface);
  color: var(--w-text);
  cursor: pointer;
}
.wap-btn:active { opacity: .8; }
.wap-btn.primary { background: var(--w-primary); border-color: var(--w-primary); color: #fff; }
.wap-btn.ok { background: var(--w-ok); border-color: var(--w-ok); color: #fff; }
.wap-btn.ghost { background: var(--w-bg); border-color: transparent; color: var(--w-text2); }
.wap-btn.block { width: 100%; flex: none; }

.wap-intro {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--w-text2);
}
.wap-intro p { margin: 0 0 10px; }

/* ---------- 目錄 ---------- */
.wap-folder {
  border-bottom: 1px solid var(--w-border);
}
.wap-folder:last-child { border-bottom: 0; }

.wap-folder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #faf8f4;
  font-weight: 600;
  font-size: 14px;
  min-height: 46px;
}
.wap-folder-head:active { background: var(--w-primary-soft); }
.wap-folder-count { font-size: 12px; color: var(--w-text3); font-weight: 400; margin-left: auto; }
.wap-folder-arrow { font-size: 12px; color: var(--w-text3); transition: transform .18s; }
.wap-folder.collapsed .wap-folder-arrow { transform: rotate(-90deg); }
.wap-folder.collapsed .wap-chlist { display: none; }

.wap-chlist { list-style: none; margin: 0; padding: 0; }
.wap-chlist li { border-bottom: 1px solid #f2efe8; }
.wap-chlist li:last-child { border-bottom: 0; }

.wap-chitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  min-height: 50px;
  font-size: 14.5px;
}
.wap-chitem:active { background: #faf8f5; }
.wap-chitem .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wap-chitem .d { font-size: 11.5px; color: var(--w-text3); flex-shrink: 0; }

/* ---------- 閱讀器 ---------- */
.wap-reader {
  background: #f6f1e7;
  min-height: calc(100vh - var(--w-header-h));
  transition: background .2s;
}
.wap-reader-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.wap-reader-title { margin: 0 0 5px; font-size: 17px; font-weight: 600; }
.wap-reader-sub { margin: 0; font-size: 12.5px; color: var(--w-text3); }

.wap-reader-content {
  padding: 16px 18px 30px;
  font-family: Georgia, "Songti SC", "SimSun", serif;
  font-size: 18px;
  line-height: 2;
  color: #2c2a26;
  word-wrap: break-word;
}
.wap-reader-content p { margin: 0 0 1.05em; text-indent: 2em; }
.wap-reader-content .divimage { text-indent: 0; text-align: center; }

/* 夜間 */
.wap-reader.dark { background: #1e1e1c; }
.wap-reader.dark .wap-reader-content { color: #b8b5ae; }
.wap-reader.dark .wap-reader-title { color: #e8e5df; }
.wap-reader.dark .wap-reader-sub { color: #8d8a84; }
.wap-reader.dark .wap-reader-head { border-bottom-color: rgba(255,255,255,.08); }

.wap-reader-nav {
  display: flex;
  gap: 9px;
  padding: 14px;
  background: var(--w-surface);
  border-top: 1px solid var(--w-border);
}
.wap-reader-nav .wap-btn { min-height: 44px; }
.wap-reader-nav .wap-btn span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wap-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 12px 14px;
}
.wap-pages a, .wap-pages span {
  min-width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--w-border);
  border-radius: 6px;
  font-size: 13.5px;
  padding: 0 9px;
  background: var(--w-surface);
}
.wap-pages .cur { background: var(--w-primary); border-color: var(--w-primary); color: #fff; }

/* 閱讀設置條 */
.wap-settingbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.wap-settingbar .grp { display: flex; align-items: center; gap: 8px; }
.wap-settingbar .lbl { font-size: 12.5px; color: var(--w-text3); }
.wap-sbtn {
  min-width: 38px; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--w-border);
  background: var(--w-surface);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--w-text);
  cursor: pointer;
}
.wap-sbtn:active { background: var(--w-bg); }
.wap-sbtn.on { background: var(--w-primary); border-color: var(--w-primary); color: #fff; }

/* ---------- 表單 ---------- */
.wap-form { padding: 16px 14px; }
.wap-field { margin-bottom: 14px; }
.wap-label { display: block; font-size: 13px; color: var(--w-text2); margin-bottom: 6px; }
.wap-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-size: 16px;          /* 不小於 16px，避免 iOS 聚焦時自動放大 */
  font-family: inherit;
  border: 1px solid var(--w-border);
  border-radius: 8px;
  background: var(--w-surface);
  color: var(--w-text);
  outline: none;
  appearance: none;
}
.wap-input:focus { border-color: var(--w-primary); }

.wap-searchbar {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: var(--w-surface);
  border-bottom: 1px solid var(--w-border);
}
.wap-searchbar .wap-input { flex: 1; min-height: 40px; font-size: 15px; }
.wap-searchbar .wap-btn { flex: 0 0 auto; min-height: 40px; }

/* ---------- 提示 ---------- */
.wap-alert {
  margin: 12px 14px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  background: #fdeceb;
  color: var(--w-danger);
}

.wap-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--w-text3);
  font-size: 14px;
}

/* ---------- 分頁 ----------
   Paginator 統一輸出 .pager / .pg-prev / .pg-num / .pg-next / .pg-info，
   而 wap 頁面只加載本文件（不加載 style.css），所以這裡必須自己定義一套 */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px 22px;
}

.pager > a,
.pager > span {
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--w-border);
  border-radius: 8px;
  background: var(--w-surface);
  font-size: 14px;
  color: var(--w-text);
}

.pager > a:active { background: var(--w-primary-soft); }

.pager .current {
  background: var(--w-primary);
  border-color: var(--w-primary);
  color: #fff;
}

.pager .disabled { opacity: .4; }

.pager .pg-gap {
  border: 0;
  background: transparent;
  min-width: 18px;
  padding: 0;
}

.pager .pg-info {
  border: 0;
  background: transparent;
  color: var(--w-text3);
  font-size: 12.5px;
  min-height: auto;
  width: 100%;
  padding: 2px 0 0;
}

/* ---------- 底部 Tab ---------- */
.wap-tabbar {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  max-width: 640px;
  margin: 0 auto;
  height: calc(var(--w-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--w-border);
  z-index: 90;
}
.wap-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
  color: var(--w-text3);
}
.wap-tab-icon { font-size: 18px; line-height: 1; }
.wap-tab.active { color: var(--w-primary); }

.wap-footer {
  text-align: center;
  font-size: 12px;
  color: var(--w-text3);
  padding: 16px 14px 30px;
}
.wap-footer a { color: var(--w-text2); }

/* ---------- 底部語言列表 ---------- */
.wap-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
}
.wap-langs a {
  padding: 4px 10px;
  border: 1px solid var(--w-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--w-text2);
  background: var(--w-surface);
}
.wap-langs a.active { background: var(--w-primary); border-color: var(--w-primary); color: #fff; }

.wap-footer-links {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- 從右到左（阿拉伯語） ---------- */
[dir="rtl"] .wap-body { text-align: right; }

[dir="rtl"] .wap-item,
[dir="rtl"] .wap-item-title,
[dir="rtl"] .wap-item-meta,
[dir="rtl"] .wap-bookhead,
[dir="rtl"] .wap-bookhead-meta,
[dir="rtl"] .wap-bookhead-stat,
[dir="rtl"] .wap-actions,
[dir="rtl"] .wap-chitem,
[dir="rtl"] .wap-folder-head,
[dir="rtl"] .wap-reader-nav,
[dir="rtl"] .wap-settingbar,
[dir="rtl"] .wap-searchbar,
[dir="rtl"] .wap-sec-head { direction: rtl; }

[dir="rtl"] .wap-rank-no { margin-left: 0; }
[dir="rtl"] .wap-reader-nav .wap-btn { text-align: right; }

/* 返回箭頭在 RTL 下應指向右側 */
[dir="rtl"] .wap-back { transform: scaleX(-1); }

[dir="rtl"] .pager,
[dir="rtl"] .wap-pages { direction: rtl; }

[dir="rtl"] code { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- 電腦瀏覽器預覽時的提示 ---------- */
@media (min-width: 641px) {
  body::before {
    content: "手機版界面（電腦瀏覽器預覽效果，實際在手機上為全屏）";
    display: block;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: #8a8578;
    background: #ebe7de;
  }
}

@media (max-width: 360px) {
  .wap-reader-content { font-size: 17px; padding: 14px; }
  .wap-card { flex-basis: 78px; width: 78px; }
  .wap-card-cover { width: 78px; height: 104px; }
}

/* ---------- 可達性：跳到主內容 ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 8px 14px;
  background: #26241f;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}