/* 輕量型錄翻頁樣式（配合 src/flipbook.js） */
.flipbook { --fb-bg: #515558; }          /* 原站燈箱底色 rgb(81,85,88) */
.fb-stage {
  background: var(--fb-bg);
  padding: 28px 12px;
  display: flex;
  justify-content: center;
}
/* ⚠️ 要對書本身加樣式時注意兩個坑：①StPageFlip 把 stf__parent 加在我們傳進去的
   元素上（不是子層），後代選擇器選不到；②它每一幀重設該元素樣式，寫在上面的
   transform 會被蓋掉 → 這類效果要做在外包的 .fb-shift 上。 */
.fb-shift { width: 100%; max-width: 1100px; transition: transform .5s ease; }
.fb-book { margin: 0 auto; }
/* 封面是單獨一頁：位移半頁寬讓它置中（畫布另一半已改填舞台底色，不會露出白紙） */
.fb-shift.fb-at-cover { transform: translateX(-25%); }

/* 圖片載完之前翻頁不會有反應 → 明講「載入中」，不要讓人以為按鈕壞了 */
.fb-loading { color: #fff; font-size: 14px; letter-spacing: .05em; padding: 120px 0; text-align: center; }
.fb-shift[hidden] { display: none; }

.fb-bar {
  background: var(--fb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 0 22px;
}
.fb-btn {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.fb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .3); }
.fb-btn:disabled { opacity: .3; cursor: default; }
.fb-num { color: #fff; font-size: 14px; letter-spacing: .04em; min-width: 62px; text-align: center; }

.flipbook:fullscreen { background: var(--fb-bg); display: flex; flex-direction: column; justify-content: center; }
.flipbook:fullscreen .fb-stage { flex: 1; align-items: center; }
/* iPhone 的 Safari 不給一般元素進全螢幕 → 用固定定位撐滿視窗，呈現與原生一致 */
.flipbook.is-faux-full { position: fixed; inset: 0; z-index: 9999; background: var(--fb-bg);
  display: flex; flex-direction: column; justify-content: center; }
.flipbook.is-faux-full .fb-stage { flex: 1; align-items: center; padding: 10px 6px; }

@media (max-width: 767px) {
  .fb-stage { padding: 16px 8px; }
  .fb-bar { gap: 10px; padding-bottom: 16px; }
}