/* =========================================================
   Love Reading 愛上閱讀 — Flipbook Engine CSS
   Author: Fable BOOK_FABLE
   The whole site is a watercolor picture book that flips.
   ========================================================= */

:root{
  --paper:#FAF4E6;
  --paper-shade:#E9DDC0;
  --ink:#3a2d22;
  --ink-soft:#695746;
  --accent:#D88A4C;       /* warm earthy */
  --leaf:#8DB36B;
  --sky:#9FC8E0;
  --berry:#D17084;
  --gold:#C99A3F;
  --shadow:0 24px 60px rgba(50,30,10,.30);
  --spine: rgba(60,40,20,.22);
  --serif:"Noto Serif TC","Songti TC","Source Han Serif TC","王漢宗中明體",serif;
  --hand:"Caveat","Patrick Hand","Noto Sans TC",cursive;
  --page-w:min(46vw,640px);
  --page-h:min(78vh,920px);
}

@media (max-width:900px){
  :root{
    --page-w:90vw;
    --page-h:72vh;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:#3b2c1d;}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% 35%,#5a4631 0%,#2a1f12 75%) fixed;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- TOP BAR (layout toggle + page number) ---------- */
.book-topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  color:#f6e7c8; font-family:var(--serif);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  pointer-events:none;
}
.book-topbar .brand{ font-family:var(--hand); font-size:22px; opacity:.92;}
.book-topbar .layout-toggle{
  pointer-events:auto;
  background:rgba(250,244,230,.92);
  color:var(--ink); border:none; border-radius:24px;
  padding:8px 16px; font-size:14px; font-family:var(--serif);
  box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.book-topbar .layout-toggle:hover{ background:#fff; }
.book-topbar .progress{
  pointer-events:none;
  font-family:var(--hand);
  font-size:18px; opacity:.85;
}

/* ---------- SPLASH (closed book → opens) ---------- */
.book-splash{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#5a4631 0%,#1d150b 75%);
  transition:opacity 600ms ease-out 800ms;
}
.book-splash.gone{ opacity:0; pointer-events:none; }
.book-splash .closed-book{
  width:min(60vw,420px); height:min(80vh,560px);
  perspective:2000px;
  position:relative;
}
.book-splash .cover-card{
  position:absolute; inset:0;
  background:linear-gradient(135deg,#a8642c 0%,#8c4d1f 100%);
  border:3px solid #6c3a17;
  border-radius:6px 18px 18px 6px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fbeec4;
  transform-origin:left center;
  animation:openCover 1300ms cubic-bezier(.55,.05,.30,.95) 200ms forwards;
}
.book-splash .cover-card h1{
  font-family:var(--hand); font-size:48px; margin:0 0 6px;
  letter-spacing:1px;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.book-splash .cover-card p{
  margin:0; font-size:16px; opacity:.9; letter-spacing:2px;
}
.book-splash .cover-card::after{
  content:""; position:absolute; left:4px; top:8px; bottom:8px;
  width:6px; background:rgba(255,255,255,.15); border-radius:2px;
}
@keyframes openCover{
  0%{ transform:rotateY(0deg); }
  100%{ transform:rotateY(-160deg); }
}

/* ---------- BOOK STAGE ---------- */
.book-stage{
  position:relative;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  perspective:2800px;
  perspective-origin:50% 60%;
}

/* The book wrapper holds both halves */
.book-spread{
  position:relative;
  width:calc(var(--page-w) * 2 + 6px);
  height:var(--page-h);
  transform-style:preserve-3d;
  box-shadow:var(--shadow);
  background:#241a10;
  border-radius:4px 14px 14px 4px;
  filter:drop-shadow(0 28px 28px rgba(0,0,0,.55));
}

/* Book base — the inside paper "block" visible when no page is on top */
.book-base{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px calc(100% - 6px), rgba(0,0,0,.18) calc(100% - 6px) 100%),
    var(--paper) url("/static/textures/paper.webp");
  background-size:auto, 240px 240px;
  border-radius:4px 14px 14px 4px;
}
/* Spine inset shadow */
.book-base::before{
  content:""; position:absolute; top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:36px;
  background:
    linear-gradient(90deg, transparent 0%, var(--spine) 40%, var(--spine) 60%, transparent 100%);
  pointer-events:none;
  border-radius:4px;
}

/* ---------- PAGES ---------- */
.book-page{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background:var(--paper) url("/static/textures/paper.webp");
  background-size:240px 240px;
  transform-style:preserve-3d;
  transition:transform 1000ms cubic-bezier(.55,.05,.30,.95);
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border:1px solid rgba(60,40,20,.06);
}
.book-page.right{
  left:50%;
  transform-origin:left center;
  z-index:5;
}
.book-page.left{
  left:0;
  transform-origin:right center;
  z-index:5;
}

/* A turning page has two faces (front + back). We model each page as a 2-sided card. */
.page-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  padding:28px 36px 72px;   /* OVERFLOW-FIX: bottom 56→72 so .page-footer cannot eat content */
  overflow:hidden;
  display:flex; flex-direction:column;
  background: var(--paper) url("/static/textures/paper.webp");
  background-size:240px 240px;
}
.page-face.back{ transform:rotateY(180deg); }

/* Right-side spine shadow on every front face */
.book-page.right .page-face.front{
  box-shadow:inset 22px 0 28px -22px rgba(0,0,0,.35);
}
.book-page.left .page-face.front{
  box-shadow:inset -22px 0 28px -22px rgba(0,0,0,.35);
}

/* When flipped, hide everything above and show below */
.book-page.right.flipped{ transform:rotateY(-180deg); z-index:6; }
.book-page.left.flipped{ transform:rotateY(180deg); z-index:6; }

/* Mid-flip shadow effect */
.book-page.flipping{
  z-index:30;
  box-shadow:0 0 30px rgba(0,0,0,.4);
}

/* Page corner curl (decorative) */
.book-page::after{
  content:""; position:absolute; bottom:0; width:28px; height:28px;
  background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,.08) 50%);
  pointer-events:none;
}
.book-page.right::after{ right:0; }
.book-page.left::after{ left:0;
  background:linear-gradient(225deg, transparent 50%, rgba(0,0,0,.08) 50%);
}

/* Footer page number + chapter label
   OVERFLOW-FIX: give the footer an opaque background + soft upward shadow so
   it cannot visually overlap body content. Pad left/right inset slightly
   wider so the dashed top-border lines up with the body column. */
.page-footer{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between;
  font-family:var(--hand);
  font-size:14px; color:var(--ink-soft);
  border-top:1px dashed rgba(60,40,20,.18);
  padding:8px 24px 12px;
  opacity:.95;
  background:
    linear-gradient(180deg, rgba(250,244,230,0) 0%, rgba(250,244,230,.92) 28%, var(--paper) 100%);
  box-shadow:0 -10px 14px -8px rgba(250,244,230,.95);
  pointer-events:none;
  z-index:3;
}
/* OVERFLOW-FIX: page-body must scroll INSIDE the page (above the footer)
   so long content like Ch.2-Part 2 never bleeds under the footer. */
.page-body{ min-height:0; }

/* Page corner decoration */
.page-deco{
  position:absolute; opacity:.5;
  font-size:20px;
}
.page-deco.tl{ top:10px; left:14px; }
.page-deco.tr{ top:10px; right:14px; }

/* ---------- COVER (p0) ---------- */
.cover-page{
  display:flex; align-items:center; justify-content:center;
  padding:0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20)),
    radial-gradient(circle at 30% 25%, #ffe5a8 0%, #f1bd6e 50%, #c97e36 100%);
}
.cover-page img.cover-art{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.95;
}
.cover-overlay{
  position:relative; z-index:2;
  text-align:center;
  color:#3b2410;
  padding:22px 24px;
  background:rgba(255,250,235,.85);
  border-radius:14px;
  border:2px solid #C99A3F;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  max-width:80%;
}
.cover-overlay h1{
  font-family:var(--hand);
  font-size:clamp(36px,5vw,72px);
  margin:0; color:var(--accent);
  text-shadow:0 2px 0 #fff8e2;
}
.cover-overlay .en{
  font-family:"Caveat",cursive;
  font-size:clamp(20px,2.2vw,32px);
  color:#7b5128; margin-top:-4px;
}
.cover-overlay .sub{
  font-size:clamp(14px,1.5vw,18px);
  color:var(--ink-soft);
  letter-spacing:2px; margin-top:10px;
}
.cover-overlay .pub{
  margin-top:18px; font-size:12px; color:var(--ink-soft);
  letter-spacing:3px;
}
.cover-cta{
  display:inline-block; margin-top:18px;
  background:var(--accent); color:#fff8ec;
  border:none; border-radius:30px;
  padding:12px 28px; font-family:var(--hand);
  font-size:22px; cursor:pointer;
  box-shadow:0 6px 16px rgba(160,80,20,.35);
  text-decoration:none;
}
.cover-cta:hover{ background:#c97a3a; }

/* ---------- TOC ---------- */
.toc-page h2{
  font-family:var(--hand);
  font-size:38px; margin:8px 0 4px; color:var(--accent);
}
.toc-page .toc-en{ font-family:"Caveat",cursive; font-size:18px; color:var(--ink-soft); margin-bottom:14px;}
.toc-list{ list-style:none; padding:0; margin:8px 0; }
.toc-list li{
  display:flex; align-items:baseline; gap:8px;
  padding:6px 0; font-size:17px;
  border-bottom:1px dotted rgba(60,40,20,.25);
  cursor:pointer;
}
.toc-list li .ch{ font-family:var(--hand); color:var(--accent); font-size:20px; width:42px; flex-shrink:0;}
.toc-list li .title{ flex:1; font-weight:500; }
.toc-list li .dots{ flex:1; border-bottom:2px dotted rgba(60,40,20,.25); transform:translateY(-4px); margin:0 6px;}
.toc-list li .pg{ font-family:var(--hand); color:var(--ink-soft);}
.toc-list li:hover{ color:var(--accent); }

/* ---------- Generic content layout ---------- */
.page-hero-img{
  width:100%; height:50%;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.page-title{
  font-family:var(--hand);
  font-size:34px; color:var(--accent);
  margin:0 0 4px;
}
.page-eyebrow{
  font-family:"Caveat",cursive;
  font-size:15px; color:var(--ink-soft); letter-spacing:2px;
  text-transform:uppercase;
}
.page-body{
  font-size:15.5px; line-height:1.85;
  color:var(--ink);
  flex:1;
  overflow-y:auto;
}
.page-body p{ margin:0 0 10px; text-indent:2em;}

/* Nicole intro */
.nicole-quote{
  font-family:var(--hand);
  font-size:22px; color:var(--accent);
  border-left:3px solid var(--accent);
  padding-left:12px;
  margin-top:10px;
}
.nicole-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.nicole-tags span{
  background:rgba(216,138,76,.15);
  color:var(--accent);
  border-radius:30px;
  padding:4px 10px; font-size:12px;
}

/* Course cards */
.course-list{ display:flex; flex-direction:column; gap:10px; }
.course-card{
  background:rgba(255,250,235,.6);
  border:1px solid rgba(216,138,76,.30);
  border-radius:10px;
  padding:10px 12px;
  display:flex; gap:10px; align-items:flex-start;
}
.course-card .emoji{ font-size:30px; line-height:1.0; flex-shrink:0;}
.course-card .meta{ flex:1; font-size:13.5px;}
.course-card .meta h4{ margin:0; color:var(--accent); font-family:var(--serif); font-size:16px;}
.course-card .meta .age{ font-size:11.5px; color:var(--ink-soft); margin:2px 0;}
.course-card .meta .price{ font-family:var(--hand); color:var(--accent); font-size:18px;}

/* Schedule table */
.schedule-grid{
  width:100%; border-collapse:collapse;
  font-size:13.5px;
}
.schedule-grid th{
  background:rgba(216,138,76,.20);
  color:var(--accent);
  font-family:var(--hand); font-size:18px;
  padding:8px; border:1px solid rgba(216,138,76,.25);
}
.schedule-grid td{
  padding:8px; border:1px solid rgba(60,40,20,.12);
}
.schedule-grid tr:nth-child(even) td{ background:rgba(255,250,235,.5);}

/* Photo collage */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px; flex:1; overflow-y:auto;
}
.photo-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  transform:rotate(var(--rot,-1deg));
}
.photo-grid img:nth-child(3n){ --rot:2deg; }
.photo-grid img:nth-child(2n){ --rot:-2deg; }

/* Enrollment postcard form */
.postcard{
  background:
    linear-gradient(135deg, rgba(255,250,235,.95), rgba(241,225,200,.95));
  border:2px dashed var(--accent);
  border-radius:8px;
  padding:14px 16px;
  font-size:14px;
}
.postcard label{ display:block; margin-top:6px; color:var(--ink-soft); font-size:12.5px;}
.postcard input, .postcard select, .postcard textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--accent);
  background:transparent; padding:4px 0;
  font-family:var(--serif); font-size:14px;
  outline:none; color:var(--ink);
}
.postcard textarea{ min-height:50px; border:1.5px dashed var(--accent); border-radius:4px; padding:6px; margin-top:4px;}
.postcard .row{ display:flex; gap:10px;}
.postcard .row > div{ flex:1; }
.send-btn{
  margin-top:10px;
  background:var(--accent); color:#fff8ec;
  border:none; border-radius:30px; padding:10px 22px;
  font-family:var(--hand); font-size:20px;
  cursor:pointer; box-shadow:0 4px 12px rgba(160,80,20,.30);
}
.send-btn:hover{ background:#c97a3a; }

/* Contact card / back cover */
.contact-card{
  display:flex; flex-direction:column; gap:10px;
  font-size:14px;
}
.contact-card .line{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:rgba(255,250,235,.7);
  border-radius:6px; border:1px solid rgba(216,138,76,.25);
}
.contact-card .line .ico{ font-size:24px;}
.qr-row{ display:flex; gap:18px; align-items:center; margin-top:10px;}
.qr-row img{ width:140px; height:140px; border-radius:6px; border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.18);}

/* ---------- NAV CORNER ZONES ---------- */
.nav-zone{
  position:absolute; bottom:0; width:18%; height:32%;
  cursor:pointer; z-index:40;
}
.nav-zone.next{ right:0; }
.nav-zone.prev{ left:0; }
.nav-zone:hover{
  background:linear-gradient(225deg, rgba(255,240,200,.25), transparent 70%);
}
.nav-zone.prev:hover{
  background:linear-gradient(135deg, rgba(255,240,200,.25), transparent 70%);
}

.nav-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  background:rgba(250,244,230,.85);
  color:var(--accent);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; cursor:pointer;
  border:none;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  z-index:60;
}
.nav-arrow:hover{ background:#fff; }
.nav-arrow.prev{ left:18px;}
.nav-arrow.next{ right:18px;}
.nav-arrow:disabled{ opacity:.3; cursor:default; }

/* ---------- PLAIN LAYOUT ---------- */
body.plain{ background:#fdf8ec; overflow:auto; user-select:auto;}
.plain-wrap{ max-width:880px; margin:0 auto; padding:60px 20px;}
.plain-wrap header{ text-align:center; padding:30px 0 40px;}
.plain-wrap header h1{ font-family:var(--hand); font-size:48px; color:var(--accent); margin:0;}
.plain-wrap section{
  background:var(--paper); border-radius:8px;
  padding:30px; margin-bottom:24px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.plain-wrap section h2{ font-family:var(--hand); color:var(--accent);}
.plain-wrap section img{ max-width:100%; border-radius:6px;}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .book-spread{
    width:var(--page-w);
    height:var(--page-h);
  }
  /* On mobile, hide left page entirely and show only the current single page */
  .book-page.left{ display:none; }
  .book-page.right{ left:0; width:100%; }
  .book-base::before{ display:none; }
  .nav-arrow{ width:40px; height:40px; font-size:18px;}
  .nav-arrow.prev{ left:6px;}
  .nav-arrow.next{ right:6px;}
  /* OVERFLOW-FIX: more generous bottom padding so .page-footer never overlaps
     the last paragraph (e.g. Ch.2 Part 2「主題月份…新鮮感從不缺席」). */
  .page-face{ padding:18px 18px 72px; }
  .photo-grid{ grid-template-columns:repeat(2,1fr);}
  .cover-overlay h1{ font-size:36px; }
}

/* ---------- MOBILE OVERFLOW-FIX (≤768px) ----------
   Tightens typography on small iPhone viewports so 3 paragraphs of body copy
   fit comfortably above the chapter/page-number footer. Leaves a 10vh strip
   at the bottom for the Safari toolbar + sticky footer to live in. */
@media (max-width:768px){
  :root{
    --page-w:92vw;
    --page-h:90vh;   /* 100vh → 90vh: gives back 10vh to Safari chrome + footer */
  }
  .page-body{
    font-size:15px;
    line-height:1.55;
    max-height:100%;
    overflow-y:auto;       /* keep book-page feel; only scrolls if truly long */
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .page-body p{ margin:0 0 8px; }
  .page-face{ padding:16px 18px 80px; }   /* ≥ 60px bottom padding for grep gate */
  .page-title{ font-size:28px; }
  .page-eyebrow{ font-size:13px; letter-spacing:1.6px; }
  .page-footer{
    /* sticky-feel on mobile: opaque white card so footer can never overlap text */
    background: var(--paper);
    border-top:1px solid rgba(60,40,20,.18);
    box-shadow:0 -6px 14px -6px rgba(0,0,0,.18);
    padding:8px 18px 10px;
    font-size:13px;
  }
}

/* ---------- ACCESSIBILITY ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .book-page{ transition:transform 250ms linear;}
  .book-splash .cover-card{ animation-duration:400ms;}
}

/* ============================================================
   SHIPFIX 20260612: nail the last overflow + button hit-area
   ============================================================ */
.nav-arrow{
  /* enlarge hit area + visible affordance on touch */
  min-width:60px; min-height:60px;
}
@media (max-width:900px){
  .nav-arrow{ min-width:64px; min-height:64px; }
}
/* Tighten p4 / p5 / p6 / p7 / p8 dense pages so footer never eats text */
.book-page .page-hero-img{
  max-height:28%;
  width:auto; max-width:100%;
  object-fit:contain; align-self:center;
  margin-bottom:6px;
}
.book-page .page-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.book-page .page-body .course-list{
  display:flex; flex-direction:column; gap:8px;
}
.book-page .page-body .course-list li{
  font-size:13px; line-height:1.4;
  background:rgba(255,255,255,.6);
  border-left:3px solid var(--accent);
  padding:6px 10px; border-radius:4px;
  list-style:none;
}
.book-page .page-body .schedule-table{
  font-size:12.5px;
}
.book-page .page-body .schedule-table th,
.book-page .page-body .schedule-table td{
  padding:4px 6px;
}
/* Mobile: even tighter so 6 courses fit above footer (≥60px bottom padding) */
@media (max-width:768px){
  .book-page .page-hero-img{ max-height:22%; margin-bottom:4px; }
  .book-page .page-body .course-list li{ font-size:12.5px; padding:5px 8px; }
}
/* sound-toggle button: enlarge for touch */
#sound-toggle{ width:42px !important; height:42px !important; font-size:18px !important; }

/* SHIPFIX 20260612 v2: p4 courses page — pack 6 cards into 2-col grid
   so they fit above .page-footer without scrolling. */
.book-page[data-page="4"] .page-hero-img{ display:none; }
.book-page[data-page="4"] .course-list{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:6px 8px;
}
.book-page[data-page="4"] .course-card{
  padding:6px 8px !important;
  gap:6px !important;
  border-radius:8px !important;
}
.book-page[data-page="4"] .course-card .emoji{ font-size:22px !important; }
.book-page[data-page="4"] .course-card .meta h4{ font-size:13.5px !important; }
.book-page[data-page="4"] .course-card .meta .age{ font-size:10.5px !important; }
.book-page[data-page="4"] .course-card .meta .price{ font-size:14px !important; }
.book-page[data-page="4"] .page-eyebrow{ font-size:13px; margin-bottom:2px; }
.book-page[data-page="4"] .page-title{ font-size:24px; margin:0 0 8px; }
@media (max-width:768px){
  .book-page[data-page="4"] .course-list{
    grid-template-columns:1fr;
  }
  .book-page[data-page="4"] .course-card{ padding:5px 8px !important; }
  .book-page[data-page="4"] .course-card .emoji{ font-size:20px !important; }
  .book-page[data-page="4"] .course-card .meta h4{ font-size:13px !important; }
}

/* ============================================================
   REAL_FABLE 20260612 — Mobile content-overflow definitive fix
   Brody iPhone reports p.4/p.8/p.13 content被 footer 遮
   Strategy:
     1. Every non-cover face gets explicit 92px bottom padding
        so .page-footer (~44px tall on mobile) can NEVER overlap text.
     2. Footer becomes 100 % opaque (no gradient → no semi-clear bleed).
     3. .page-body is the only scroll container; uses dvh-aware
        sizing so iOS Safari URL bar collapse/expand never clips text.
     4. p.8 .photo-grid had flex:1 + overflow-y:auto → nested scroll
        trap. Flatten to a normal grid so the parent .page-body owns
        the scroll.
     5. Cover page (p.0 front) is excluded via :not(.cover-page).
   ============================================================ */

@supports (height: 100dvh){
  @media (max-width:768px){
    :root{ --page-h: 100dvh; }
  }
}

@media (max-width:900px){
  .page-face:not(.cover-page){
    padding:16px 18px 92px;
  }
  .page-face.cover-page{
    padding:0;
    overflow:hidden;
  }
}

@media (max-width:768px){
  .page-face:not(.cover-page) .page-footer{
    background:var(--paper);
    border-top:1px solid rgba(60,40,20,.22);
    box-shadow:0 -8px 16px -10px rgba(0,0,0,.22);
    padding:9px 18px max(11px, env(safe-area-inset-bottom));
    font-size:12.5px;
    z-index:4;
    pointer-events:none;
  }
  .page-face:not(.cover-page) .page-body{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:18px;
    position:relative;
    z-index:1;
  }

  .book-page[data-page="4"] .page-hero-img{ display:none !important; }
  .book-page[data-page="4"] .page-body{ padding-bottom:28px; }
  .book-page[data-page="4"] .course-list{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }
  .book-page[data-page="4"] .course-card{ padding:6px 9px !important; gap:6px !important; }
  .book-page[data-page="4"] .course-card .emoji{ font-size:20px !important; }
  .book-page[data-page="4"] .course-card .meta h4{ font-size:13.5px !important; }
  .book-page[data-page="4"] .course-card .meta .age{ font-size:10.5px !important; }
  .book-page[data-page="4"] .course-card .meta .price{ font-size:14px !important; }

  .book-page[data-page="8"] .page-body{ padding-bottom:32px; }
  .book-page[data-page="8"] .photo-grid{
    flex:none !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:8px !important;
    margin-top:10px !important;
  }
  .book-page[data-page="8"] .photo-grid img{
    aspect-ratio:1/1; height:auto !important;
  }
  .book-page[data-page="8"] #recent-sessions-grid{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .book-page[data-page="10"] .page-hero-img{ max-height:18% !important; margin-bottom:6px; }
  .book-page[data-page="10"] .page-body{ padding-bottom:28px; }
  .book-page[data-page="10"] .schedule-grid{ font-size:12px; }
  .book-page[data-page="10"] .schedule-grid th,
  .book-page[data-page="10"] .schedule-grid td{ padding:4px 5px; }

  .book-page[data-page="11"] .page-hero-img{ display:none !important; }
  .book-page[data-page="11"] .page-body{ padding-bottom:32px; }
  .book-page[data-page="11"] .postcard{ font-size:13px; padding:12px 12px; }
  .book-page[data-page="11"] .postcard .lib-head{ padding:6px 8px; }
  .book-page[data-page="11"] .send-btn{ font-size:18px; padding:9px 18px; }

  .book-page[data-page="13"] .page-hero-img{ display:none !important; }
  .book-page[data-page="13"] .page-body{ padding-bottom:36px; }
  .book-page[data-page="13"] .qr-row{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:14px;
  }
  .book-page[data-page="13"] .qr-row img{ width:120px; height:120px; }
  .book-page[data-page="13"] .contact-card{ gap:8px; font-size:13.5px; }
  .book-page[data-page="13"] .contact-card .line{ padding:7px 10px; }
}

@media (min-width:901px){
  .page-face:not(.cover-page){ padding-bottom:84px; }
  .page-face:not(.cover-page) .page-footer{
    background:var(--paper);
    border-top:1px dashed rgba(60,40,20,.20);
    box-shadow:0 -8px 18px -10px rgba(0,0,0,.12);
    z-index:4;
  }
  .page-face:not(.cover-page) .page-body{
    overflow-y:auto;
    padding-bottom:10px;
  }
}

/* ============================================================
   PREV_FIX FABLE 20260612: Left-flip button real-touch fix
   ============================================================
   Brody iPhone p.3 點左 < 沒翻回 p.2. Diagnosis:
     1. hit area too tight on touch → finger misses
     2. only click + touchend + pointerdown bound — touchstart MUST
        fire on iOS for instant response (handled in book.js bindMulti)
     3. no visual press feedback — user can't tell tap registered
     4. p.0 cover: prev was clamped to >=0 but button still tappable
        and could fire animation/sound for no reason
   Fix (paired with book.js PREV_FIX block above):
     - content-box + padding 12px → hit area 84x84px (mobile 92x92)
     - .pressing + :active → scale(0.95) 200ms transition
     - [disabled] → pointer-events:none + opacity:.25 → real DOM block
   ============================================================ */
.nav-arrow{
  box-sizing:content-box;     /* padding ADDS to hit area, doesn't eat it */
  min-width:60px;
  min-height:60px;
  padding:12px;               /* hit area = 84x84px (well above 60px req) */
  transition:
    transform 200ms cubic-bezier(.2,.7,.3,1.4),
    background-color 200ms ease,
    opacity 200ms ease,
    box-shadow 200ms ease;
  touch-action:manipulation;  /* kill 300ms tap delay; block double-tap zoom */
}
.nav-arrow:active:not(:disabled),
.nav-arrow.pressing:not(:disabled){
  /* scale 0.95 / 200ms transition — paired with .pressing class
     toggled by bindMulti() in book.js so the press shows on touch too,
     not just :active (which iOS sometimes skips on rapid taps) */
  transform:translateY(-50%) scale(0.95);
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.30);
}
.nav-arrow[disabled],
.nav-arrow:disabled{
  /* p.0 cover: real disabled state — not just visual */
  opacity:.25;
  cursor:not-allowed;
  pointer-events:none;        /* DOM-level click block on p.0 cover */
  background:rgba(250,244,230,.45);
  box-shadow:none;
}
@media (max-width:900px){
  .nav-arrow{
    min-width:64px;
    min-height:64px;
    padding:14px;             /* mobile hit area = 92x92px */
  }
  .nav-arrow.prev{ left:8px; }
  .nav-arrow.next{ right:8px; }
}

/* ====== brody-hotfix 2026-06-13 ======
 * Q1 nav-arrow 蓋字 → 改貼底貼邊,不再 vertical-center
 * Q2 半透明 + 變小,進一步避免遮文字
 */
.nav-arrow {
  top: auto !important;
  bottom: 14px !important;
  transform: none !important;
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 6px !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 50;
}
.nav-arrow:active:not(:disabled),
.nav-arrow.pressing:not(:disabled){
  transform: scale(0.94) !important;
  background: rgba(255,255,255,0.96) !important;
}
@media (max-width: 900px){
  .nav-arrow {
    bottom: 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .nav-arrow.prev { left: 10px !important; }
  .nav-arrow.next { right: 10px !important; }
}

/* ====== brody-hotfix 2026-06-13: 時間表卡片風 ======
 * Brody 原話:「希望把它改成像真正的課表,感覺這樣子排版太死板」
 */
.schedule-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px 14px;
}
.sched-day-divider {
  margin: 6px 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-day-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(91,74,63,0.18), transparent);
}
.sched-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #5B4A3F;
  background: #FFF9EC;
  border: 1.5px solid #F0E4D2;
  border-radius: 999px;
  padding: 4px 14px;
  font-family: 'Noto Sans TC', 'Fredoka', sans-serif;
}
.sched-day-pill.day-1 { background: linear-gradient(135deg,#FFE9A0,#FFD95A); border-color:#FFD95A; }
.sched-day-pill.day-2 { background: linear-gradient(135deg,#FAD5E5,#F8A5C2); border-color:#F8A5C2; color:#7a3a55; }
.sched-day-pill.day-3 { background: linear-gradient(135deg,#D7F5C8,#7CC576); border-color:#7CC576; color:#2e5a2c; }
.sched-day-pill.day-4 { background: linear-gradient(135deg,#CDEBF7,#7EC8E3); border-color:#7EC8E3; color:#1d4c5f; }
.sched-day-pill.day-5 { background: linear-gradient(135deg,#F0DCFF,#C5B3E6); border-color:#C5B3E6; color:#523d7a; }
.sched-day-pill.day-6 { background: linear-gradient(135deg,#FFE0CC,#FFA866); border-color:#FFA866; color:#7a4318; }
.sched-day-pill.day-7 { background: linear-gradient(135deg,#FFD0D0,#FF8A8A); border-color:#FF8A8A; color:#7a2e2e; }

.sched-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  border: 2px solid #F0E4D2;
  box-shadow: 0 4px 12px rgba(91,74,63,0.08);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sched-card:active { transform: scale(0.98); }
.sched-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14%;
  bottom: 14%;
  width: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.sched-card.c-tiffany { border-color:#BFE7F2; color:#5DA8C0; background: linear-gradient(180deg,#FFFFFF,#EFFAFF); }
.sched-card.c-pink    { border-color:#FAC9DA; color:#D4789C; background: linear-gradient(180deg,#FFFFFF,#FFF1F6); }
.sched-card.c-lavender{ border-color:#DFD0F0; color:#9077C0; background: linear-gradient(180deg,#FFFFFF,#F8F2FF); }
.sched-card.c-mint    { border-color:#C8E8C0; color:#5CB063; background: linear-gradient(180deg,#FFFFFF,#F2FBF0); }
.sched-card.c-sun     { border-color:#FFE6A0; color:#C99A2F; background: linear-gradient(180deg,#FFFFFF,#FFFBEB); }
.sched-card.c-coral   { border-color:#FFC9B0; color:#D67A52; background: linear-gradient(180deg,#FFFFFF,#FFF4EF); }

.sched-emoji {
  font-size: 32px;
  line-height: 1.1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(91,74,63,0.06);
}
.sched-body {
  flex: 1;
  min-width: 0;
}
.sched-title {
  font-size: 16px;
  font-weight: 700;
  color: #5B4A3F;
  font-family: 'Noto Sans TC', 'Fredoka', sans-serif;
  margin: 0 0 1px;
}
.sched-subtitle {
  font-size: 11px;
  color: #A08C7D;
  font-style: italic;
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  margin: 0 0 6px;
}
.sched-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: #6F5A4B;
  margin: 4px 0;
}
.sched-meta-row .meta-time,
.sched-meta-row .meta-age {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sched-price {
  font-size: 14px;
  font-weight: 700;
  color: #C44A2A;
  margin-top: 4px;
  font-family: 'Fredoka', 'Noto Sans TC', sans-serif;
}

/* 隱藏舊 schedule-grid 表格(若有殘留) */
.schedule-grid { display: none !important; }

/* ============================================================
   FABLE_PARITY 20260614 — Ch.1-4 + Ch.6-7 卡片風格 parity
   Brody: 「Ch.5 太死板剛修。其他 Ch 也可能有類似問題。」
   Reference = Ch.5 .sched-card (white bg + colored left stripe +
   soft shadow + rounded). 我們把同一套視覺語言下放給其他章節。
   Ch.5 (data-page="10") 完全不動。
   ============================================================ */

/* ---------- Ch.2 (p4) 課程卡片:升級成卡片風 ---------- */
.book-page[data-page="4"] .course-card{
  background:#FFFFFF !important;
  border:2px solid #F0E4D2 !important;
  border-radius:14px !important;
  box-shadow:0 4px 12px rgba(91,74,63,0.08) !important;
  padding:10px 12px !important;
  gap:10px !important;
  position:relative;
  overflow:hidden;
}
.book-page[data-page="4"] .course-card::before{
  content:'';
  position:absolute;
  left:0; top:14%;
  bottom:14%;
  width:4px;
  border-radius:2px;
  background:currentColor;
  opacity:0.55;
}
/* 每張課卡輪流配色,呼應 Ch.5 sched-card 色票 */
.book-page[data-page="4"] .course-card:nth-child(6n+1){ color:#5DA8C0; border-color:#BFE7F2 !important; background:linear-gradient(180deg,#FFFFFF,#EFFAFF) !important; }
.book-page[data-page="4"] .course-card:nth-child(6n+2){ color:#D4789C; border-color:#FAC9DA !important; background:linear-gradient(180deg,#FFFFFF,#FFF1F6) !important; }
.book-page[data-page="4"] .course-card:nth-child(6n+3){ color:#5CB063; border-color:#C8E8C0 !important; background:linear-gradient(180deg,#FFFFFF,#F2FBF0) !important; }
.book-page[data-page="4"] .course-card:nth-child(6n+4){ color:#C99A2F; border-color:#FFE6A0 !important; background:linear-gradient(180deg,#FFFFFF,#FFFBEB) !important; }
.book-page[data-page="4"] .course-card:nth-child(6n+5){ color:#9077C0; border-color:#DFD0F0 !important; background:linear-gradient(180deg,#FFFFFF,#F8F2FF) !important; }
.book-page[data-page="4"] .course-card:nth-child(6n+6){ color:#D67A52; border-color:#FFC9B0 !important; background:linear-gradient(180deg,#FFFFFF,#FFF4EF) !important; }
.book-page[data-page="4"] .course-card .emoji{
  font-size:24px !important;
  width:40px; height:40px;
  display:grid; place-items:center;
  background:rgba(255,255,255,0.7);
  border-radius:12px;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(91,74,63,0.06);
}
.book-page[data-page="4"] .course-card .meta h4{
  color:#5B4A3F !important;
  font-family:'Noto Sans TC','Fredoka',sans-serif !important;
  font-size:14.5px !important;
  font-weight:700 !important;
}
.book-page[data-page="4"] .course-card .meta .age{
  color:#A08C7D !important;
  font-size:11.5px !important;
}
.book-page[data-page="4"] .course-card .meta .price{
  color:#C44A2A !important;
  font-family:'Fredoka','Noto Sans TC',sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
}
@media (max-width:768px){
  .book-page[data-page="4"] .course-card{ padding:9px 11px !important; gap:9px !important; }
  .book-page[data-page="4"] .course-card .emoji{ width:36px; height:36px; font-size:20px !important; }
  .book-page[data-page="4"] .course-card .meta h4{ font-size:13.5px !important; }
}

/* ---------- Ch.3 (p6, p7) 月份主題:段落 → 主題卡 ---------- */
.book-page[data-page="6"] .page-body p,
.book-page[data-page="7"] .page-body p{
  background:#FFFFFF;
  border:2px solid #F0E4D2;
  border-radius:14px;
  box-shadow:0 4px 12px rgba(91,74,63,0.08);
  padding:10px 12px 10px 16px;
  margin:0 0 10px;
  text-indent:0;
  position:relative;
  font-size:14px;
  line-height:1.7;
  color:#5B4A3F;
}
.book-page[data-page="6"] .page-body p::before,
.book-page[data-page="7"] .page-body p::before{
  content:'';
  position:absolute;
  left:0; top:14%;
  bottom:14%;
  width:4px;
  border-radius:2px;
  background:currentColor;
  opacity:0.55;
}
.book-page[data-page="6"] .page-body p strong,
.book-page[data-page="7"] .page-body p strong{
  display:block;
  margin-bottom:4px;
  font-size:15px;
  font-family:'Noto Sans TC','Fredoka',sans-serif;
  color:inherit !important;  /* 蓋掉 inline style="color:var(--accent)" */
}
/* 月份卡輪流配色 — 4 月暖黃 / 5 月綠 / 6 月藍 / 7 月珊瑚 */
.book-page[data-page="6"] .page-body p:nth-of-type(1){ color:#C99A2F; border-color:#FFE6A0; background:linear-gradient(180deg,#FFFFFF,#FFFBEB); }
.book-page[data-page="6"] .page-body p:nth-of-type(2){ color:#5CB063; border-color:#C8E8C0; background:linear-gradient(180deg,#FFFFFF,#F2FBF0); }
.book-page[data-page="7"] .page-body p:nth-of-type(1){ color:#5DA8C0; border-color:#BFE7F2; background:linear-gradient(180deg,#FFFFFF,#EFFAFF); }
.book-page[data-page="7"] .page-body p:nth-of-type(2){ color:#D67A52; border-color:#FFC9B0; background:linear-gradient(180deg,#FFFFFF,#FFF4EF); }

/* ---------- Ch.1 (p2) — 收緊 hero 圖 + 確保 quote / tags 不撞頁腳 ---------- */
@media (max-width:768px){
  .book-page[data-page="2"] .page-hero-img{ max-height:24% !important; margin-bottom:6px; }
  .book-page[data-page="2"] .nicole-quote{ font-size:18px; margin-top:8px; padding:6px 10px; }
  .book-page[data-page="2"] .nicole-tags span{ font-size:11.5px; padding:3px 9px; }
  /* Ch.1 cont. (p3) 同步 */
  .book-page[data-page="3"] .page-hero-img{ max-height:24% !important; margin-bottom:6px; }
  .book-page[data-page="3"] .nicole-tags span{ font-size:11.5px; padding:3px 9px; }
}

/* ---------- Ch.4 (p9) — 課後作品段落讀起來更像 Ch.5 ---------- */
@media (max-width:768px){
  .book-page[data-page="9"] .page-body p{
    background:#FFFFFF;
    border:1.5px solid #F0E4D2;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(91,74,63,0.06);
    padding:9px 12px;
    margin:0 0 8px;
    text-indent:0;
    font-size:14px;
    line-height:1.65;
    color:#5B4A3F;
  }
}

/* ---------- Ch.6 (p12) — 報名旅程段落 + 步驟卡 ---------- */
@media (max-width:768px){
  .book-page[data-page="12"] .page-body p{
    background:#FFFFFF;
    border:1.5px solid #F0E4D2;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(91,74,63,0.06);
    padding:9px 12px;
    margin:0 0 8px;
    text-indent:0;
    font-size:14px;
    line-height:1.65;
    color:#5B4A3F;
  }
  .book-page[data-page="12"] .page-body ul{
    background:linear-gradient(180deg,#FFFFFF,#FFF1F6);
    border:1.5px solid #FAC9DA;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(91,74,63,0.06);
    padding:10px 14px 10px 30px !important;
    margin:8px 0 0 !important;
  }
  .book-page[data-page="12"] .page-body ul li{
    color:#5B4A3F !important;
    font-size:13.5px !important;
    line-height:1.7 !important;
  }
}

/* ---------- Ch.7 (p13) — contact-card 已是卡片,稍微緊湊 ---------- */
@media (max-width:768px){
  .book-page[data-page="13"] .contact-card .line{
    background:#FFFFFF;
    border:1.5px solid #F0E4D2;
    box-shadow:0 3px 10px rgba(91,74,63,0.08);
    border-radius:14px;
  }
  .book-page[data-page="13"] .contact-card .line strong{
    color:#5B4A3F;
    font-family:'Noto Sans TC','Fredoka',sans-serif;
    font-size:13.5px;
  }
}
/* ============================================================
   END FABLE_PARITY 20260614
   ============================================================ */