/* =========================================================
   Love Reading — FULL FRONT-END FABLE UX overlay
   Author: FULLFE_FABLE 2026-06-14
   只加新東西,不覆寫翻頁主邏輯 / 音效 / Ch.5 schedule 卡片
   ========================================================= */

/* ---------- 0. iPhone safe-area + 最小可達 ---------- */
.book-stage{
  padding-top:env(safe-area-inset-top, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.book-topbar{
  padding-top:max(14px, env(safe-area-inset-top));
  padding-left:max(22px, env(safe-area-inset-left));
  padding-right:max(22px, env(safe-area-inset-right));
}
/* 字 ≥ 16px (僅 page-body / cards),按鈕 ≥ 48px 高 */
.page-body p, .page-body li{ font-size:max(14px, 1em); line-height:1.7; }
@media (max-width:480px){
  .page-body p, .page-body li{ font-size:16px; }
}
.fble-btn, .fble-cta, .fble-line-btn, .fble-stepper-btn{
  min-height:48px; min-width:48px;
}
:focus-visible{ outline:3px solid #F4A536; outline-offset:3px; border-radius:8px; }

/* ---------- 1. Fade-in on scroll / page enter ---------- */
.fble-rise{
  opacity:0; transform:translateY(14px);
  transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.fble-rise.fble-on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .fble-rise{ opacity:1; transform:none; transition:none; }
}

/* ---------- 2. Cover — hero CTA cluster + parallax mascot ---------- */
.fble-hero-cta{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:14%;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:0 14px;
  width:min(86%, 380px);
  z-index:8;
  pointer-events:auto;
}
.fble-hero-cta .fble-cta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,250,235,.94);
  color:#3a2d22;
  font-family:'Noto Sans TC','Fredoka',sans-serif;
  font-weight:700;
  font-size:13px;
  border:2px solid #F4A536;
  border-radius:14px;
  padding:10px 8px;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(45,30,12,.18);
  transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.fble-hero-cta .fble-cta .ico{ font-size:18px; line-height:1; }
.fble-hero-cta .fble-cta:hover{
  transform:translateY(-2px);
  background:#FFF6E0;
  box-shadow:0 8px 18px rgba(45,30,12,.28);
}
.fble-hero-cta .fble-cta:active{ transform:translateY(0); }
.fble-hero-cta .fble-cta.primary{
  background:linear-gradient(135deg,#F4A536,#D88A4C);
  color:#fff; border-color:#C77226;
}
.fble-hero-cta .fble-cta.primary:hover{ background:linear-gradient(135deg,#F8B658,#E29250); }

@media (max-width:480px){
  .fble-hero-cta{ bottom:9%; width:92%; }
  .fble-hero-cta .fble-cta{ font-size:12.5px; padding:11px 6px; }
}

/* parallax mascot 跟著滾動微移 */
.fble-cover-parallax{
  position:absolute; left:8px; top:14%;
  width:64px; height:64px;
  z-index:7;
  filter:drop-shadow(0 6px 12px rgba(60,30,10,.35));
  transition:transform 80ms linear;
  animation:fbleFloat 4.2s ease-in-out infinite;
}
@keyframes fbleFloat{
  0%, 100%{ transform:translateY(0) rotate(-6deg); }
  50%{ transform:translateY(-8px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce){
  .fble-cover-parallax{ animation:none; }
}

/* ---------- 3. Marquee — 本月主題跑馬燈 ---------- */
.fble-marquee{
  background:linear-gradient(90deg,#FFF1D1,#FFE3B0);
  color:#5B4A3F;
  border-top:2px solid #F4A536;
  border-bottom:2px solid #F4A536;
  font-family:'Noto Sans TC',sans-serif;
  font-weight:700;
  font-size:14px;
  overflow:hidden;
  position:relative;
  padding:8px 0;
  margin:10px 0 0;
  border-radius:0;
}
.fble-marquee .track{
  display:inline-block; white-space:nowrap;
  padding-left:100%;
  animation:fbleMarquee 22s linear infinite;
}
.fble-marquee .track span{ margin:0 28px; }
.fble-marquee .badge{
  background:#F4A536; color:#fff; padding:2px 8px; border-radius:10px;
  font-size:11px; margin-right:6px; letter-spacing:1px;
}
@keyframes fbleMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .fble-marquee .track{ animation:none; padding-left:14px; }
}

/* ---------- 4. Testimonials carousel ---------- */
.fble-testimonials{
  margin:14px 0 6px;
  padding:10px 12px 12px;
  background:linear-gradient(180deg,rgba(255,247,225,.7),rgba(255,235,200,.55));
  border:1.5px dashed #D88A4C;
  border-radius:14px;
}
.fble-testimonials .h{
  font-family:var(--hand,'Caveat');
  color:#D88A4C; font-weight:700; font-size:18px; margin:0 0 6px;
  display:flex; align-items:center; gap:6px;
}
.fble-testimonials .track{
  display:flex; overflow-x:auto; gap:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.fble-testimonials .track::-webkit-scrollbar{ height:4px; }
.fble-testimonials .track::-webkit-scrollbar-thumb{ background:#D88A4C; border-radius:2px; }
.fble-testimonials .card{
  flex:0 0 78%;
  scroll-snap-align:start;
  background:#FFF;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px; line-height:1.55;
  color:#3a2d22;
  box-shadow:0 3px 10px rgba(60,40,20,.10);
  position:relative;
}
.fble-testimonials .card::before{
  content:'❝'; position:absolute; left:8px; top:2px;
  color:#F4A536; font-size:26px; line-height:1; opacity:.6;
}
.fble-testimonials .card .who{
  margin-top:6px; font-size:11.5px; color:#7B5B3A; font-weight:600;
}
.fble-testimonials .card.placeholder{
  background:repeating-linear-gradient(45deg,#FFF7E2,#FFF7E2 8px,#FFEFCB 8px,#FFEFCB 16px);
  color:#9b7a4f; font-style:italic;
}

/* ---------- 5. Nicole — timeline + 理念卡片 + 影片 placeholder ---------- */
.fble-nicole-hero{
  display:flex; gap:12px; align-items:center;
  background:linear-gradient(180deg,#FFF8E7,#FCEED0);
  border-radius:14px; padding:10px;
  margin:6px 0 10px;
  border:1px solid #EFD9A5;
}
.fble-nicole-hero img{
  width:84px; height:84px; border-radius:50%;
  object-fit:cover; border:3px solid #F4A536;
  box-shadow:0 4px 10px rgba(45,30,12,.16);
  background:#FFF1D1;
}
.fble-nicole-hero .meta{ flex:1; }
.fble-nicole-hero .meta .name{
  font-family:var(--hand,'Caveat'); font-size:22px; color:#D88A4C; font-weight:700;
}
.fble-nicole-hero .meta .role{ color:#5B4A3F; font-size:13px; }
.fble-nicole-hero .meta .stats{
  display:flex; gap:8px; margin-top:4px; flex-wrap:wrap;
}
.fble-nicole-hero .meta .stat{
  background:#fff; border:1px solid #EFD9A5; border-radius:8px;
  padding:2px 8px; font-size:11px; color:#7B5B3A; font-weight:700;
}

.fble-timeline{
  margin:10px 0; padding-left:14px; border-left:3px solid #F4A536;
  list-style:none;
}
.fble-timeline li{
  position:relative; padding:6px 0 6px 14px; font-size:13.5px; color:#3a2d22;
}
.fble-timeline li::before{
  content:''; position:absolute; left:-8px; top:12px;
  width:10px; height:10px; border-radius:50%;
  background:#D88A4C; border:2px solid #FFF;
}
.fble-timeline li .y{ font-family:var(--hand,'Caveat'); color:#D88A4C; font-weight:700; margin-right:6px; }

.fble-philosophy{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin:10px 0;
}
.fble-philosophy .card{
  background:#FFF; border-radius:12px; padding:10px;
  border:1.5px solid #EFD9A5;
  box-shadow:0 2px 6px rgba(60,40,20,.06);
}
.fble-philosophy .card .ico{ font-size:22px; }
.fble-philosophy .card h4{
  margin:4px 0 4px; font-size:14px; color:#D88A4C;
}
.fble-philosophy .card p{ margin:0; font-size:12.5px; line-height:1.5; color:#5B4A3F; }

.fble-video-placeholder{
  margin:10px 0; padding:18px 12px; text-align:center;
  background:linear-gradient(180deg,#2D2D2D,#444);
  color:#fff; border-radius:12px; font-size:13px;
  position:relative; overflow:hidden;
}
.fble-video-placeholder .play{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:#F4A536; color:#fff; font-size:20px; margin-bottom:6px;
}
.fble-video-placeholder small{ display:block; opacity:.8; margin-top:4px; font-size:11px; }

/* ---------- 6. Course cards upgrade (overlay on existing) ---------- */
/* book.html 給的 .course-card 加詳細資訊 hook */
.course-card.fble-rich{
  position:relative;
  border-radius:14px;
  padding:12px 12px 12px 56px;
  background:linear-gradient(135deg,#FFF,#FFF6E0);
  border:1.5px solid #EFD9A5;
  box-shadow:0 4px 10px rgba(60,40,20,.08);
  margin-bottom:8px;
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.course-card.fble-rich:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(60,40,20,.14);
}
.course-card.fble-rich .emoji{
  position:absolute; left:10px; top:10px;
  width:36px; height:36px; border-radius:10px;
  background:#FFF1D1; display:flex; align-items:center; justify-content:center;
  font-size:22px; border:2px solid #F4A536;
}
.course-card.fble-rich .meta h4{
  margin:0 0 2px; font-size:14.5px; color:#3a2d22; font-weight:700;
}
.course-card.fble-rich .meta .age{ font-size:11.5px; color:#7B5B3A; margin-bottom:2px; }
.course-card.fble-rich .meta .price{ font-size:12.5px; color:#D88A4C; font-weight:700; }
.course-card.fble-rich .fble-mini-3{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  margin-top:8px;
}
.course-card.fble-rich .fble-mini-3 .mini{
  background:#FFFDF6; border:1px solid #F2DDB0; border-radius:8px;
  padding:5px 6px; font-size:10.5px; color:#5B4A3F; text-align:center; line-height:1.35;
}
.course-card.fble-rich .fble-mini-3 .mini b{ display:block; color:#D88A4C; font-size:11px; }
.course-card.fble-rich .fble-enroll-mini{
  display:inline-block; margin-top:8px;
  background:linear-gradient(135deg,#F4A536,#D88A4C);
  color:#fff; padding:6px 12px; border-radius:18px;
  font-size:12px; text-decoration:none; font-weight:700;
  box-shadow:0 3px 8px rgba(216,138,76,.35);
}
.course-card.fble-rich .fble-enroll-mini:hover{ filter:brightness(1.05); }

/* ---------- 7. Schedule — 本月特別活動 badge (cards 不動) ---------- */
.fble-sched-info{
  margin:6px 0 8px; padding:8px 12px;
  background:linear-gradient(135deg,#FFE7CC,#FFD9A8);
  border-left:4px solid #D88A4C;
  border-radius:10px;
  font-size:13px; color:#5B4A3F;
  display:flex; gap:8px; align-items:center;
}
.fble-sched-info .badge{
  background:#D88A4C; color:#fff; font-size:10.5px;
  padding:2px 8px; border-radius:10px; letter-spacing:1px;
}
/* 假日課加 🌟 */
.sched-card .fble-weekend-star{
  position:absolute; top:-6px; right:-6px;
  background:#FFD460; color:#5B4A3F; border-radius:50%;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:12px; box-shadow:0 2px 5px rgba(0,0,0,.18); border:2px solid #fff;
  z-index:3;
}
.sched-card{ position:relative; }
.sched-card.fble-clickable{ cursor:pointer; }
.sched-card.fble-clickable:hover{
  transform:translateY(-1px); box-shadow:0 6px 14px rgba(60,40,20,.18);
}

/* ---------- 8. Gallery 6-grid + lightbox ---------- */
.fble-gallery-6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  margin:8px 0;
}
@media (max-width:380px){ .fble-gallery-6{ grid-template-columns:repeat(2,1fr); } }
.fble-gallery-6 .item{
  position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden;
  border:2px solid #F2DDB0; cursor:pointer;
  background:#F8ECCC;
  transition:transform 200ms ease;
}
.fble-gallery-6 .item:hover{ transform:scale(1.03); }
.fble-gallery-6 .item img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.fble-gallery-6 .item .cap{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg,rgba(45,45,45,.78),transparent);
  color:#fff; font-size:10.5px; padding:8px 6px 4px;
}

.fble-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.fble-lightbox.fble-show{ display:flex; }
.fble-lightbox .box{
  max-width:92vw; max-height:88vh;
  background:#FFF; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
.fble-lightbox .box img{
  max-width:92vw; max-height:70vh; object-fit:contain; background:#000;
}
.fble-lightbox .box .desc{
  padding:10px 14px; font-size:14px; color:#3a2d22;
}
.fble-lightbox .close{
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:14px;
  width:48px; height:48px; border-radius:50%;
  background:#FFF; border:none; cursor:pointer; font-size:22px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}

/* ---------- 9. Enroll stepper ---------- */
.fble-stepper{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin:6px 0 12px;
}
.fble-stepper .step{
  text-align:center; font-size:11px; color:#9b7a4f; padding:6px 4px;
  border-radius:10px; background:#F8ECCC; border:1.5px solid transparent;
  position:relative;
}
.fble-stepper .step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#FFF;
  border:1.5px solid #D88A4C; color:#D88A4C; font-weight:700;
  font-size:12px; margin-right:4px;
}
.fble-stepper .step.active{ background:linear-gradient(135deg,#F4A536,#D88A4C); color:#fff; border-color:#C77226; }
.fble-stepper .step.active .n{ background:#fff; color:#D88A4C; }
.fble-stepper .step.done{ background:#9DCB5A; color:#fff; }
.fble-stepper .step.done .n{ background:#fff; color:#5C8224; }

.fble-required-mark{ color:#D04848; font-weight:700; margin-left:2px; }
.fble-optional-mark{ font-size:11px; color:#9b7a4f; margin-left:6px; }

.fble-enroll-confirm{
  background:#FFF; border:2px solid #9DCB5A; border-radius:14px;
  padding:16px; text-align:center;
}
.fble-enroll-confirm .big{
  font-family:var(--hand,'Caveat'); font-size:30px; color:#5C8224; margin-bottom:6px;
}
.fble-enroll-confirm .row{
  text-align:left; background:#F4FBE9; border-radius:10px; padding:10px 12px;
  margin-top:10px; font-size:13px; color:#3a2d22; line-height:1.7;
}
.fble-enroll-confirm .row b{ color:#5C8224; }
.fble-mail-notice{
  margin-top:8px; padding:8px 10px;
  background:#E8F4FF; border-left:3px solid #6CACE4;
  font-size:12px; color:#3A5B7A; border-radius:8px; text-align:left;
}

/* ---------- 10. Contact — LINE big button + map + form ---------- */
.fble-line-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#06C755; color:#fff;
  border:none; border-radius:18px;
  padding:14px 20px;
  font-size:18px; font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(6,199,85,.36);
  width:100%; margin:8px 0 10px;
  transition:transform 160ms ease, box-shadow 160ms ease;
  font-family:'Noto Sans TC',sans-serif;
}
.fble-line-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(6,199,85,.48); }
.fble-line-btn:active{ transform:translateY(0); }
.fble-line-btn .ico{ font-size:22px; }

.fble-contact-quick{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 10px;
}
.fble-contact-quick a{
  display:flex; align-items:center; gap:6px;
  background:#FFF; color:#3a2d22; text-decoration:none;
  border:1.5px solid #EFD9A5; border-radius:12px;
  padding:10px 12px; font-size:13px; min-height:48px;
}
.fble-contact-quick a:hover{ background:#FFF8E7; }
.fble-contact-quick a .ico{ font-size:20px; }

.fble-map{
  margin:10px 0;
  border-radius:12px; overflow:hidden;
  border:2px solid #EFD9A5;
  box-shadow:0 4px 10px rgba(60,40,20,.10);
}
.fble-map iframe{
  width:100%; height:200px; border:0; display:block; background:#EEE;
}
.fble-map .addr{
  background:#FFF8E7; padding:6px 10px; font-size:12px; color:#5B4A3F;
  display:flex; gap:6px; align-items:center;
}

.fble-msg-form{
  margin:10px 0; padding:12px;
  background:linear-gradient(180deg,#FFF8E7,#FCEED0);
  border:1.5px dashed #D88A4C; border-radius:14px;
}
.fble-msg-form label{
  display:block; font-size:12px; color:#5B4A3F; font-weight:700; margin:4px 0 2px;
}
.fble-msg-form input, .fble-msg-form textarea{
  width:100%; box-sizing:border-box;
  background:#FFF; border:1px solid #EFD9A5; border-radius:8px;
  padding:8px 10px; font-size:14px; font-family:'Noto Sans TC',sans-serif;
  color:#3a2d22;
}
.fble-msg-form textarea{ resize:vertical; min-height:60px; }
.fble-msg-form .send{
  margin-top:8px; width:100%;
  background:linear-gradient(135deg,#F4A536,#D88A4C);
  color:#fff; border:none; border-radius:10px;
  padding:12px; font-size:15px; font-weight:700;
  cursor:pointer; min-height:48px;
}

/* ---------- 11. Section badges (本月特別活動) ---------- */
.fble-pill{
  display:inline-block; background:#FFE3B0; color:#7B5B3A;
  border-radius:10px; padding:2px 8px; font-size:11px;
  font-weight:700; letter-spacing:1px; margin-right:4px;
}
.fble-pill.hot{ background:#FFD4D4; color:#A82828; }
.fble-pill.new{ background:#D9F5E0; color:#2C7A3F; }

/* ---------- 12. Section dividers ---------- */
.fble-section-h{
  font-family:var(--hand,'Caveat');
  color:#D88A4C;
  font-size:20px;
  font-weight:700;
  margin:14px 0 6px;
  padding-bottom:4px;
  border-bottom:2px dashed #EFD9A5;
  display:flex; align-items:center; gap:6px;
}
.fble-section-h .ico{ font-size:18px; }

/* ---------- 13. Course-list grid override (book mode) ---------- */
.page-body .course-list{
  display:grid; grid-template-columns:1fr; gap:8px;
  margin:6px 0;
}
@media (min-width:480px){
  .page-body .course-list{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
 * BRODY-HOTFIX 2026-06-14 02:42: 手機 cover hero CTA / contact-quick 切字
 * Brody 截圖反映「右側 LINE@ID 切到、認識 Nicole/上課花絮 卡片擠出畫面」
 * 修法:強制限制在 viewport 內 + max-width + box-sizing + 容器 padding
 * ============================================================ */
.fble-hero-cta, .fble-contact-quick {
  box-sizing: border-box;
  max-width: 92vw !important;
  left: 4vw !important;
  right: 4vw !important;
  transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.fble-hero-cta .fble-cta,
.fble-contact-quick a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* LINE 連結 @ID 不能撐出去 */
.fble-contact-quick a span.line-id,
.fble-contact-quick a .line-id-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* 整個 cover-page 強制 width:100vw 不溢出 */
.cover-page, .book-page.right > .page-face {
  max-width: 100vw;
  overflow-x: hidden;
}
/* iPhone 15 viewport 額外保險 */
@media (max-width: 480px){
  .fble-hero-cta{
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    bottom: 8% !important;
  }
  .fble-hero-cta .fble-cta{
    font-size: 12px !important;
    padding: 9px 4px !important;
  }
  .fble-contact-quick{
    grid-template-columns: 1fr !important;  /* 手機改 1 column 不擠 */
  }
  .fble-contact-quick a{
    font-size: 12.5px;
    padding: 10px 10px;
  }
  /* canada badge 縮小避免擠走 hero CTA */
  .canada-badge{
    width: 64px !important;
    height: 64px !important;
    right: 8px !important;
  }
}
/* body / html 防 horizontal scroll */
html, body { overflow-x: hidden !important; max-width: 100vw; }