/* ─────────────────────────────────────────────────────────────
   作品集翻頁閱讀器（/works/2021/book/）。只有那一頁載入這一份。

   版面：書放在畫面正中央、周圍留白，控制列排在書的**上面一列與下面**，
   一律在書的框外——控制列蓋到頁面的話，蓋到的就是正文。
   顏色全部沿用全站的變數（site.css 的 :root）：紫、暖金點綴、米白紙感。

   ⚠️ 跟 StPageFlip 的分工：它只管「把書頁畫出來、翻起來」，
      畫面上看得到的顏色、陰影、留白都在這裡。它在頁面元素上寫的是
      element.style.cssText（行內樣式），所以凡是要壓過它的都得用 !important，
      下面用到的兩處都有註明原因。
   ───────────────────────────────────────────────────────────── */

/* ───────── StPageFlip 自己那幾條結構樣式 ─────────
   照抄自套件的 src/Style/stPageFlip.css（MIT，見 assets/vendor/page-flip/LICENSE），
   只有一處改動：原檔把 wrapper 的選擇器打成 `.sft__wrapper`（上游的錯字，
   永遠選不到東西），這裡改成正確的 `.stf__wrapper`。

   ⚠️ 這幾條**不是裝飾**，少了書會整個壞掉：
      `.stf__item` 少了 display:none，98 頁會全部一起顯示；
      `.stf__block` 少了絕對定位與 perspective，翻頁的 3D 會變成平面；
      三個 shadow 少了絕對定位，會變成有高度的區塊把版面撐開。
   放在這裡而不是另外一個 <link>：那樣要多一次連線，而且這一頁是唯一的使用者。 */
.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  touch-action: pan-y;
}
.stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__block {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow { position: absolute; left: 0; top: 0; }

.page-book .flip {
  --flip-gap: 1.1rem;
  /* 書以外的東西（控制列、提示、上下留白）大約佔掉的高度。
     書的寬度由它反推，才不會一打開就要往下捲才看得到書的下緣。 */
  --flip-chrome: 15rem;
  /* 一頁的長寬比（切出來那些圖是 1125×1600）。雙頁攤開時寬度要乘二。 */
  --flip-ratio: 0.7031;
  margin: 0 auto 1rem;
  padding: 0 var(--gutter);
  max-width: calc(var(--wrap) + 6rem);
}

/* ───────── 書 ───────── */

.flip__stage {
  display: flex;
  justify-content: center;
  /* 放大之前不需要捲軸：書本來就放得下，讓它跟著頁面一起捲。 */
  overflow: visible;
}

/* ⚠️ width: 100% 不能拿掉：.flip__stage 是 flex，這一層若沒有寬度就會被收縮成 0，
   裡面用百分比寬的 .flip__sizer 也跟著變 0，整本書會「存在但看不見」。 */
.flip__pan { width: 100%; }

.flip__sizer {
  width: 100%;
  max-width: 30rem;          /* <60em：單頁。見 flipbook.js 裡 minWidth 的註解 */
  margin: 0 auto;
}

@media (min-width: 60em) {
  .flip__sizer {
    /* 雙頁攤開。寬度由「視窗高度扣掉控制列」反推，書因此一定看得到全頁；
       下限 620px 是為了穩穩落在 StPageFlip「雙頁／單頁」門檻（600px）的另一側，
       視窗很矮時寧可讓書稍微超出、由頁面捲，也不要在中間搖擺。 */
    max-width: max(620px, calc((100svh - var(--flip-chrome)) * var(--flip-ratio) * 2));
  }
}

/* StPageFlip 會在這個元素寫上行內的 min-width / min-height（它用來擋太小的書）。
   窄手機上那個 min-width 會比容器還寬，整塊書因此溢出——用 !important 歸零，
   真正的尺寸由上面的 .flip__sizer 決定。 */
.flip__book {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto;
}

/* 書頁本身。StPageFlip 用 cssText 控制位置與大小，這裡只管長相。 */
.flip__page {
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(59 18 53 / .18);
}
.flip__page--hard { box-shadow: 0 2px 6px rgb(59 18 53 / .28); }

.flip__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 封面比內頁寬 1%，用 contain 就不會被切到 */
  background: var(--cream);
  /* 圖片還沒接上 src 時不要顯示破圖的框 */
  color: transparent;
}

/* 書的「桌面」：一層淡淡的紙感底，讓書浮在上面 */
.flip__inner {
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(122 46 110 / .07), transparent 60%),
    var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: var(--flip-gap) var(--flip-gap) .9rem;
}

/* ───────── 控制列 ───────── */

.flip__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--flip-gap);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--flip-gap);
  padding-top: .8rem;
  border-top: 1px solid var(--gold-line);
}

.flip__nav {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.flip__pos {
  margin: 0;
  min-width: 8.5em;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--plum-ink);
}

.flip__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

/* 按鈕：全站沒有現成的小按鈕樣式，這裡就地定義一組，顏色用全站變數。
   觸控目標一律 ≥44×44（見 site.css〈觸控目標 ≥44×44〉那一節的原則）。 */
.flip__btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: .35rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-soft);
  color: var(--plum-deep);
  font: inherit;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.flip__btn:hover:not(:disabled) { background: var(--paper); border-color: var(--gold); }
.flip__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.flip__btn:disabled { opacity: .4; cursor: default; }
/* 按下去的狀態（目錄展開中、放大中、全螢幕中）。
   ⚠️ 一定要連 :hover 那一版一起寫：上面 `.flip__btn:hover:not(:disabled)` 的
      權重比單純的屬性選擇器高，只寫沒有 :hover 的版本時，滑鼠停在按鈕上會變成
      「白字 ＋ 米色底」，字整個看不見（實際截圖抓到的）。 */
.flip__btn[aria-pressed="true"],
.flip__btn[aria-pressed="true"]:hover,
.flip__btn[aria-expanded="true"],
.flip__btn[aria-expanded="true"]:hover {
  background: var(--plum-deep);
  border-color: var(--plum-deep);
  color: #fff;
}

.flip__btn--turn { padding-inline: .6rem; }
/* 做成按鈕樣子的連結：全站的連結樣式（金線、底線）在這裡都不要 */
a.flip__textlink { text-decoration: none; background-image: none; }
.flip__arrow { font-size: 1.25rem; line-height: 1; }

.flip__jump {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.flip__jump-label {
  font-size: .9rem;
  color: var(--ink-soft);
}
.flip__jump-input {
  width: 4.5rem;
  min-height: 44px;
  padding: .3rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  text-align: center;
}
.flip__jump-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.flip__jump-input[aria-invalid="true"] { border-color: var(--focus); background: #fff6f8; }

.flip__hint {
  margin: .7rem 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ───────── 目錄 ───────── */

.flip__toc {
  margin-top: .9rem;
  padding: .9rem 1rem 1.1rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  max-height: 24rem;
  overflow: auto;
}
.flip__toc-list { list-style: none; margin: 0; padding: 0; }
.flip__toc-item + .flip__toc-item { border-top: 1px solid var(--line); }
.flip__toc-item--work .flip__toc-title { padding-left: 1em; }

.flip__toc-btn {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  min-height: 44px;
  padding: .45rem .3rem;
  border: 0;
  background: none;
  color: var(--plum-deep);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.flip__toc-btn:hover { background: var(--paper); }
.flip__toc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.flip__toc-title { flex: 0 1 auto; }
.flip__toc-sub { flex: 0 1 auto; font-size: .85rem; color: var(--ink-soft); }
.flip__toc-page {
  flex: 1 0 auto;
  text-align: right;
  font-size: .9rem;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.flip__toc-item--group .flip__toc-title {
  font-family: var(--serif);
  color: var(--plum-ink);
  letter-spacing: .08em;
}

/* ───────── 放大 ───────── */

.flip.is-zoomed .flip__stage {
  display: block;
  overflow: auto;
  max-height: calc(100svh - 8rem);
  cursor: grab;
  overscroll-behavior: contain;
}
.flip.is-zoomed .flip__stage.is-dragging { cursor: grabbing; }
/* 放大時 .flip__pan 的大小由 JS 釘成「放大後的實際尺寸」（捲動範圍靠它撐出來），
   .flip__sizer 從 0 0 開始放大，所以不能再有置中的自動邊距。 */
.flip.is-zoomed .flip__sizer { margin-left: 0; margin-right: 0; }
/* 放大之後翻頁交給按鈕與方向鍵：不攔指標事件，手指與滑鼠才拖得動書。 */
.flip.is-zoomed .flip__book { pointer-events: none; }

/* ───────── 全螢幕 ───────── */

.flip.is-full {
  background: var(--cream);
  padding: 1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flip.is-full .flip__inner { border: 0; background: none; }
.flip.is-full .flip__sizer { max-width: max(620px, calc((100svh - 11rem) * var(--flip-ratio) * 2)); }
@media (max-width: 59.99em) {
  .flip.is-full .flip__sizer { max-width: min(30rem, calc((100svh - 11rem) * var(--flip-ratio))); }
}

/* ───────── 這一頁其他部分 ───────── */

.page-book .prose--intro { margin-bottom: 1.4rem; }

.book-textlink {
  max-width: var(--read);
  margin: 0 0 .4rem;
  padding: .8rem 1rem;
  background: var(--paper-soft);
  border-left: 3px solid var(--gold);
  font-size: 1.05rem;
}
.book-textlink__note {
  display: block;
  margin-top: .2rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.book-note {
  max-width: var(--read);
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}

/* 沒有 JS（或翻頁器載不起來）時那份一頁一張圖的清單 */
.book-fallback { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.book-fallback__item { margin: 0 0 1rem; }
.book-fallback__item img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
}
.book-fallback__note { max-width: var(--read); color: var(--ink-soft); }

/* ───────── 不想看動畫的人 ─────────
   翻頁動畫由 flipbook.js 關掉（flippingTime 設成 1、改用 turnTo*），
   這裡把剩下的過場一起停掉。site.css 已經有一條全站的 transition 歸零，
   這一條是保險：新加的 class 不會漏掉。 */
@media (prefers-reduced-motion: reduce) {
  .flip__btn, .flip__toc-btn { transition: none; }
}

/* ───────── 列印 ─────────
   翻頁器印不出來（它是一疊互相疊住的絕對定位元素），所以列印時整塊收起來，
   只留文字介紹與「讀文字版」那條連結。 */
@media print {
  .flip { display: none; }
}