@charset "utf-8";
/* ==========================================================================
   首次購買活動（新會員 24 小時優惠）— 2026-08 視覺改版
   色值全部取自 Figma 設計稿（file b6KKyGItYZCeZqqwGQG7zG, node 2001:1854）。

   這份是「取代」charge24hr-newbie.css，不是覆蓋——twig 只引用本檔，
   所以不需要跟舊樣式打特異性，也不會被舊的 sprite 定位干擾。
   刻意沿用舊 twig 的 class 名（.header/.banner/.section2/.book-box/
   .swiper-* 、.bg-arrowLeft* 、.textBox、p.text…），因為 charge24hr-newbie.js
   的 Swiper 初始化靠這些選擇器，動了就會壞。
   ⚠️ 註解裡不要讓「星號」後面直接接「斜線」（列 class 時很容易寫出來）——
   那會提早關掉註解，後面到下一個大括號為止的東西會被當成選擇器，**整條規則被丟掉**。
   2026-09-07 就是這樣讓 body 的 reset 靜默消失的。
   ========================================================================== */

/* ---------- reset（本檔不引用舊 CSS，需自備） ---------- */
/* ⚠️ 2026-09-07 補：下面那條 reset 只掃 #RentaDeposit 底下，掃不到 body 本身。
   舊的 charge24hr-newbie.css 是整份 Meyer reset（含 html/body），拿掉之後
   body 會退回瀏覽器預設的 8px margin——整頁內容內縮 8px，但 .header 是
   position:fixed 滿版，兩者對不齊，右側還會露出 8px 白邊。 */
body { margin: 0; background: #FEFEFE; }   /* 同 --fl-page-bg */

#RentaDeposit *,
#RentaDeposit *::before,
#RentaDeposit *::after { margin: 0; padding: 0; box-sizing: border-box; }
#RentaDeposit img { max-width: 100%; height: auto; display: block; }
#RentaDeposit a { color: inherit; text-decoration: none; }
#RentaDeposit ul, #RentaDeposit li { list-style: none; }

#RentaDeposit {
  /* 設計稿色票 */
  --fl-header-bg: #FCE27D;   /* header 黃底 */
  --fl-brand: #FF600A;       /* logo、CTA 實心 */
  --fl-arrow: #FC8220;       /* 輪播箭頭 */
  --fl-btn-bg: #FCE27D;      /* 免費試閱 底 */
  --fl-btn-line: #EF6E3D;    /* 免費試閱 框線／字 */
  --fl-footer-bg: #FCC345;   /* 版權列黃底 */
  --fl-note-line: #C88438;   /* 注意事項虛線框 */
  --fl-note-label: #E8802A;  /* 注意事項左側標籤字 */
  --fl-em: #E8552A;          /* 內文強調（原 .colorRed） */
  --fl-text: #4B3A2F;
  --fl-text-sub: #7A6A5E;
  --fl-page-bg: #FEFEFE;     /* 頁面底。2026-09-08 從設計稿 render 取樣 8 個空白處，
                                全部是 #FEFEFE；先前寫 #FFFDF8（米白）偏黃了 */
  --fl-card-bg: #FFFFFF;
  --fl-card-line: #EFE7DA;

  --fl-max: 980px;           /* 設計稿 PC 內容寬（KV 980×630） */

  font-family: "Noto Sans TC", "微軟正黑體", "Hiragino Sans", sans-serif;
  color: var(--fl-text);
  background: var(--fl-page-bg);
  line-height: 1.6;
  padding-top: 50px;         /* 讓開 fixed header */
  /* 花飾會突出到 980 內容欄之外；視窗窄的時候用 clip 收掉，避免出現水平捲軸。
     clip 不會變成 fixed 定位的包含塊，所以上面那條 fixed header 不受影響。 */
  overflow-x: clip;
}

/* 舊 sprite 的裝飾元素在新視覺沒有對應物，一律收掉 */
#RentaDeposit .spriteImg { display: none !important; }

/* ==========================================================================
   header（三態：登入／倒數／已結束）
   高度沿用舊版 50px，位置也維持 fixed。
   ========================================================================== */
#RentaDeposit .header {
  position: fixed;
  top: 0; left: 0;
  z-index: 20;
  width: 100%;
  height: 50px;
  background: var(--fl-header-bg);
  display: flex;
  justify-content: center;
}
#RentaDeposit .header .inner {
  width: 100%;
  max-width: var(--fl-max);
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* logo：用實體橘色 SVG。
   原本想用 CSS mask 染 public.papy.com.tw 那支站用 logo，但那支的填色靠 SVG
   內部 CSS，當成 mask 時只取 alpha 通道，形狀等於全透明 → logo 整個消失。 */
#RentaDeposit .header .logo {
  display: block;
  flex: none;
  width: 102px;
  height: 20px;
  background: url("../img/fl2026/logo.svg") left center / contain no-repeat;
}

/* caseId 1：登入／註冊 */
#RentaDeposit .header .btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--fl-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
#RentaDeposit .header .btn:hover { filter: brightness(1.06); }

/* caseId 2/3/4：純文字狀態 */
#RentaDeposit .header p {
  font-size: 14px;
  font-weight: 700;
  color: var(--fl-brand);
  white-space: nowrap;
}

/* caseId 5：倒數。JS 逐格填 .hr1/.hr2/.min1… 的內容，
   所以 markup 保持不變，只改視覺與分隔符文字。 */
#RentaDeposit .header .text,
#RentaDeposit .header .time {
  font-size: 15px;
  font-weight: 700;
  color: var(--fl-brand);
  line-height: 1;
  display: flex;
  align-items: center;
}
#RentaDeposit .header .text1 { margin-right: 8px; letter-spacing: 1px; }
#RentaDeposit .header .time { gap: 2px; }
#RentaDeposit .header .timeInner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 26px;
  border-radius: 4px;
  background: #fff;
  color: var(--fl-brand);
  font-variant-numeric: tabular-nums;
}
#RentaDeposit .header .text2,
#RentaDeposit .header .text3 { margin: 0 4px; }

/* ==========================================================================
   KV
   ========================================================================== */
#RentaDeposit .banner {
  max-width: var(--fl-max);
  margin: 0 auto;
}
#RentaDeposit .banner .inner {
  position: relative;
  background: url("../img/fl2026/kv-pc.jpg?v=20260918b") center top / cover no-repeat;
  aspect-ratio: 980 / 630;
}
/* KV 上的 CTA。設計稿文案是「前往儲值」，href 本來就指向 /topup，
   所以是把文字對齊行為，不是改行為。 */
#RentaDeposit .banner .btn {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 32px;
  border: 2px solid var(--fl-brand);
  border-radius: 999px;
  background: #fff;
  color: var(--fl-brand);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  transition: background-color .2s ease, color .2s ease;
}
#RentaDeposit .banner .btn:hover {
  background: var(--fl-brand);
  color: #fff;
}
#RentaDeposit .banner .btn .anim { display: none; }

/* ==========================================================================
   熱租作品即時榜
   ========================================================================== */
#RentaDeposit .section2 {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 40px 16px 8px;
}
#RentaDeposit .section2 > .inner > .title { text-align: center; }
#RentaDeposit .section2 .new-title-img {
  display: inline-block;
  width: auto;
  max-height: 112px;      /* 設計稿標題高度 */
  margin: 0 auto 24px;
}
#RentaDeposit .section2 h2 { display: none; }  /* 標題已是圖 */

/* 每個分類一塊 */
#RentaDeposit .booksBox { margin-bottom: 61px; }   /* 設計稿排距：價格底→下一排膠囊 81px（原 36 → 56px 會讓左下那叢花壓到下一排膠囊） */

/* 分類標籤 */
#RentaDeposit .tagBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding-left: 4px;
}
#RentaDeposit .tagBox .tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid currentColor;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
/* 設計稿為每個分類指定了顏色（tagN 對應 new-member.php 的 cssClass）。
   設計稿（Figma b6KKyGItYZCeZqqwGQG7zG / 2001:1854）的元件規格區只列了 7 個標籤：
   少女、女性向、輕熟女、R18、男性向、青年、耽美BL——**沒有「全年齡」**。
   頁面畫面裡 9 排書單也一樣，凡是非 R18 的排就只畫分類標籤，全年齡被省略掉了。
   而 R18 在設計稿裡明確就是這個黃綠 #B3CC32（規格區與 4 排 R18 書列都是）。

   ⚠️ 2026-09-07 一度把黃綠改指給全年齡、R18 換成紅色 #F05354，理由是「舊版
   tag2 全年齡是黃綠 #c9d879、tag4 R18 是紅 #ef7777，而且新舊六個對得上的標籤
   色相位移都是 0」——那個推論被設計稿否定了，已改回來。舊版的黃綠確實是全年齡的，
   但這次設計把黃綠給了 R18，全年齡則整個沒畫。

   所以 tag2 目前是**暫代**：用設計稿自己的次要文字色 #7A6A5E（灰褐），
   理由是全年齡是「沒有限制」的資訊標籤，不該跟 R18 那種警示色系混淆，
   而灰褐是設計稿裡唯一一個不跟七個分類色打架的既有色。**等設計給正式色。** */
#RentaDeposit .tag1 { color: #E6939B; }   /* 少女      舊 #f7bdc2 */
#RentaDeposit .tag2 { color: #7A6A5E; }   /* 全年齡    ⚠️ 暫代，設計稿沒有這個標籤 */
#RentaDeposit .tag3 { color: #DC93C6; }   /* 少年／輕熟女 舊 #d3a7c6 */
#RentaDeposit .tag4 { color: #B3CC32; }   /* R18       設計稿指定 */
#RentaDeposit .tag5 { color: #F89A7A; }   /* 女性向    舊 #f3a387 */
#RentaDeposit .tag6 { color: #63D0BB; }   /* 耽美BL    舊 #89d6c7 */
#RentaDeposit .tag7 { color: #6B95CF; }   /* 青年／紳士／小說／實用書／寫真書 */
#RentaDeposit .tag8 { color: #8ECAE8; }   /* 男性向    舊 #b1d6e8 */

/* 書列容器。箭頭掛在 .swiperBox 上（.swiper-container 有 overflow:hidden，
   箭頭放進去會被裁掉），所以定位基準給 .swiperBox。 */
#RentaDeposit .swiperBox { position: relative; }
/* ⚠️ 設計稿的書列**沒有**白色卡片容器：2026-09-08 在 render 上橫向取樣（y=560，
   x 1390→1456），容器內外一路都是 #FEFEFE，沒有邊框、沒有圓角，書卡就是直接放在
   頁面底色上。先前這裡加了 background #FFF ＋ 1px 邊 ＋ radius 14，是多出來的。 */
#RentaDeposit .swiper-container {
  /* 左右 padding 必須等於 JS 的 spaceBetween(25)：overflow:hidden 裁的是 border box，
     padding 比 spaceBetween 大的話，下一張會從右側 padding 區露出一角。 */
  padding: 20px 25px;
  overflow: hidden;
}
#RentaDeposit .swiper-pagination { display: none; }

/* swiper.min.css 對 wrapper/slide 都設了 height:100%，和 align-items:stretch
   一起會把 slide 拉成容器高度（實測 1484，書卡只佔 305），下方全是空白。
   height 交回內容決定，並取消垂直拉伸。 */
#RentaDeposit .swiper-wrapper {
  display: flex;
  align-items: flex-start;
  height: auto !important;
}
#RentaDeposit .swiper-slide {
  height: auto !important;
  /* slidesPerView:"auto" → 寬度由這裡決定。容器內容寬 930（980 − padding 50），
     JS 的 spaceBetween 是 25：第 6 張右緣 6w+125 ≤ 930、第 7 張左緣 6w+150 ≥ 955
     → w = 134，正好 6 本填滿且下一張剛好落在裁切線外。 */
  width: 129px;
  flex: none;
}

#RentaDeposit .book-box { visibility: visible !important; }

/* 封面原圖一律 400 高、寬 262～283（比例 0.655～0.708）。若用 width:100%，
   每本高度會差到 16px，底下的按鈕與價格就對不齊。改成固定高度、寬度自適應，
   陰影也才會貼合實際書封而不是落在留白上。 */
/* 129 是算出來的：容器內容寬 898，6 張卡 + 5 個 25px 間距 = 899，第 7 張的起點
   落在容器 border box 之外，所以不會有半張卡露進右側 padding——那正是右方向鍵
   會疊在書封上的原因。改動前 134px 時第 6 張會伸到 x1120，方向鍵在 1103。 */
#RentaDeposit .book-cover {
  height: 183px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#RentaDeposit .book-cover a { display: block; height: 100%; }
#RentaDeposit .book-cover img {
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
#RentaDeposit .book-title {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fl-text);
  /* 書名長度不一，固定兩行高，下面的按鈕與價格才會對齊 */
  height: 2.9em;
  overflow: hidden;
  margin-bottom: 8px;
}
/* 免費試閱 */
#RentaDeposit .book-desc a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1.5px solid var(--fl-btn-line);
  border-radius: 6px;
  background: var(--fl-btn-bg);
  color: var(--fl-btn-line);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
#RentaDeposit .book-desc a.btn:hover {
  background: var(--fl-btn-line);
  color: #fff;
}
#RentaDeposit .book-price {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fl-text-sub);
  text-align: center;
}
/* 設計稿的價格是「48小時 X 點券」與「全集打包 X 點券」各自一行。
   twig 給的是兩個相鄰的 <span>，不設 block 會連成一段再亂斷行。 */
#RentaDeposit .book-price span { display: block; }
/* 固定兩行的高度：只有「全集打包」一行的排才不會矮 19px，整排花飾圖才能用單一錨點 */
#RentaDeposit .book-price { min-height: 36px; }

/* 文字與可點擊的東西壓在花飾之上，資訊不被裝飾蓋掉（花飾 z-index 2、箭頭 5） */
#RentaDeposit .book-desc,
#RentaDeposit .book-price,
#RentaDeposit .tagBox { position: relative; z-index: 3; }

/* ---------- 書列兩側的花飾（整排一張圖） ----------
   img/fl2026/row-flowers.webp：**直接從設計稿 render 裁下來的整排帶**（設計稿 CSS 座標
   x 80..1200 / y 908..1380，@2x），白底去色鍵，再把書卡＋文字矩形（x 190..1089 / y 986..1303）、
   分類膠囊、兩個方向鍵挖成透明。剩下的就是左右兩叢花＋細藤＋水平臂，位置關係全在圖裡，
   不需要分左右兩個元素各自定位——rakak 2026-09-09 的建議，比先前兩張分開放的做法少一半規則，
   也不會再發生「裁掉水平臂」的問題。

   為什麼能用一張圖、一個錨點：排高已固定（.book-price 保留兩行高度），所以「圖對書封頂」與
   「圖對排底」是同一件事，不會像先前左花用 top 定位時矮排會壓到下一排膠囊。

   尺寸：**1:1，不縮**。價格固定兩行之後，我們「書封頂→價格底」= 313 = 設計稿，整排帶直接照設計稿座標放：
   圖頂在設計稿書封頂之上 80 → top = 20 − 80 = −60；圖中心 = 頁面中心 = .swiperBox 中心，left:50% 置中。
   排距補到設計稿的 81（.booksBox margin-bottom 36 → 61），左下那叢花的底離下一排膠囊才有 8px。
   驗證：node tools/verify.mjs && node tools/check.mjs 要 0 違規。 */
#RentaDeposit .swiperBox::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -60px;                 /* 圖頂在設計稿書封頂之上 80；我們書封頂 = .swiperBox 頂 + 20 */
  width: 1120px;              /* 設計稿 x 80..1200，1:1 不縮 */
  height: 464px;              /* 設計稿 y 908..1372，1:1 不縮 */
  margin-left: -560px;        /* 圖中心 = 頁面中心 = .swiperBox 中心 */
  background: url(../img/fl2026/row-flowers.webp?v=20260918) center top / 1120px 464px no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* 輪播箭頭：class 名是 JS 綁定的，只換外觀。
   ⚠️ 位置（left/right: 0、垂直置中）是既有元件的既有行為，不要為了裝飾去動它。 */
#RentaDeposit .arrowBtn {
  position: absolute;
  /* 垂直對齊整排書卡（書封＋書名＋按鈕＋價格）的中心——疊圖量過，設計稿就是這樣。
     ⚠️ 一度改成對齊「書封中心」（top:115px），那是誤判：設計稿的箭頭看起來比較低，
     是因為它的書封佔位框比例 2.46（wireframe 畫法），真實書封是 1.42，整排比較矮。
     兩邊其實用的是同一條規則。 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* 尺寸與位置是把設計稿 render 對齊到實作截圖後量出來的：34×86，
     外緣落在書列容器外 23px（設計稿的方向鍵在藤蔓內側、書卡外側）。 */
  width: 34px;
  height: 86px;
  border-radius: 6px;
  background: var(--fl-arrow);
  cursor: pointer;
  display: flex !important;   /* 蓋掉 .spriteImg 的 display:none */
  align-items: center;
  justify-content: center;
}
/* 設計稿實測：左鍵 x 141..174、右鍵 1106..1139（書列容器 166..1114）→ 左 −25、右 −26 */
#RentaDeposit .arrowBtn[class*="bg-arrowLeft"] { left: -25px; }
#RentaDeposit .arrowBtn[class*="bg-arrowRight"] { right: -26px; }
#RentaDeposit .arrowBtn::before {
  content: "";
  width: 8px; height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#RentaDeposit .arrowBtn[class*="bg-arrowLeft"]::before { transform: rotate(-135deg); }
#RentaDeposit .arrowBtn[class*="bg-arrowRight"]::before { transform: rotate(45deg); }
/* Swiper 4 給到頭的按鈕加 -disabled，設計稿是轉灰 */
#RentaDeposit .swiper-button-disabled { background: #D9D9D9; }   /* 設計稿取樣值 */

/* ==========================================================================
   注意事項（三個虛線框）
   ========================================================================== */
#RentaDeposit .footer {
  max-width: var(--fl-max);
  margin: 0 auto;
  padding: 24px 16px 40px;
}
#RentaDeposit .footer .title { text-align: center; }
#RentaDeposit .footer .new-title-img {
  display: inline-block;
  width: auto;
  max-height: 96px;
  margin: 0 auto 22px;
}
#RentaDeposit .footer h2 { display: none; }

#RentaDeposit .textBox { display: flex; flex-direction: column; gap: 16px; }
#RentaDeposit .textBox p.text {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px dashed var(--fl-note-line);
  border-radius: 12px;
  padding: 16px 20px;
  background: #fff;
  font-size: 14px;
  line-height: 1.8;
}
/* 每個框左側的標籤（「優惠時間：」等，twig 裡是第一個 span） */
#RentaDeposit .textBox p.text > span:first-of-type {
  flex: none;
  min-width: 76px;
  color: var(--fl-note-label);
  font-weight: 700;
}
#RentaDeposit .textBox .note { color: var(--fl-text); }
/* 內文強調色：twig 有 inline style #a92a2a，需要 !important 才蓋得掉 */
#RentaDeposit .colorRed { color: var(--fl-em) !important; }
#RentaDeposit .textBox a {
  color: var(--fl-em);
  text-decoration: underline;
}

/* ==========================================================================
   版權列
   ========================================================================== */
#RentaDeposit > footer {
  background: var(--fl-footer-bg);
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: #6B4A22;
}

/* ==========================================================================
   Mobile（設計稿 KV 768×1042）
   ========================================================================== */
/* 1100 以下：內容欄兩側的留白不夠了（設計稿是以 1280 畫的，980 欄兩邊各留 150）。
   花飾與方向鍵收回容器內側，否則會被 overflow-x:clip 裁掉——裝飾被裁還好，
   方向鍵被裁就是 UI 壞掉。 */
@media (max-width: 1100px) {
  #RentaDeposit .arrowBtn[class*="bg-arrowLeft"] { left: 0; }
  #RentaDeposit .arrowBtn[class*="bg-arrowRight"] { right: 0; }
  #RentaDeposit .swiperBox::before { display: none; }
}

@media (max-width: 767px) {
  #RentaDeposit .banner .inner {
    background-image: url("../img/fl2026/kv-sp.jpg?v=20260918b");
    aspect-ratio: 768 / 1042;
  }
  #RentaDeposit .banner .btn {
    min-width: 170px;
    height: 42px;
    font-size: 16px;
    bottom: 5%;
  }
  #RentaDeposit .section2 { padding: 24px 12px 8px; }
  #RentaDeposit .section2 .new-title-img { max-height: 78px; margin-bottom: 16px; }
  #RentaDeposit .footer .new-title-img { max-height: 66px; }
  /* mobile：padding 仍對齊 spaceBetween(25)。寬度要用「真實手機寬」算，
     不是設計稿 mobile frame 的 768——390 螢幕的容器內容寬只有 316，
     3 本 → 3w + 2×25 ≤ 316 → w = 88（書封高 88 ÷ 0.7 ≈ 126）。 */
  #RentaDeposit .swiper-container { padding: 14px 25px; }
  #RentaDeposit .swiper-slide { width: 88px; }
  #RentaDeposit .book-cover { height: 126px; }
  #RentaDeposit .book-title { font-size: 11px; }
  #RentaDeposit .book-desc a.btn { height: 26px; font-size: 12px; }
  #RentaDeposit .book-price { font-size: 10px; }
  #RentaDeposit .book-title { font-size: 12px; }
  /* 設計稿的手機版沒有方向鍵（手機欄位裡一個橘色像素都沒有），整個隱藏 */
  #RentaDeposit .arrowBtn { display: none !important; }
  /* 手機版設計稿沒有書列花飾 */
  #RentaDeposit .swiperBox::before { display: none; }
  #RentaDeposit .textBox p.text { flex-direction: column; gap: 4px; padding: 14px 16px; }
  #RentaDeposit .header .text,
  #RentaDeposit .header .time { font-size: 13px; }
  #RentaDeposit .header .timeInner { min-width: 17px; height: 22px; }
  /* caseId 4 的字比其他狀態長（18 字），手機上縮一級才不會撞到 logo */
  #RentaDeposit .header p { font-size: 12px; }
}