/* ============================================================
   活動落地頁樣式（activity-lp.php 專用）

   全部收在 .lp 作用域內：本檔含 *、a、ul、img 等通用選擇器，
   不收作用域會蓋掉站台共用頁首 _Header.php 與頁尾 _Footer.php 的樣式。

   頁首／頁尾改用站台共用元件，原設計稿的 .nav / .burger / .menu-* /
   footer / .ft-* / .logo 等規則已移除。
   ============================================================ */

/* 落地頁自身的底色與字體（不動站台 body） */
.lp{
  font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 6%, #eaf6ff 0%, transparent 40%),
    radial-gradient(circle at 90% 4%, #fdeefb 0%, transparent 38%),
    radial-gradient(circle at 50% 100%, #f3ecfb 0%, transparent 42%),
    #eef1fb;
  overflow-x:hidden;
}

/* ============================================================
   戀戀未來｜活動落地頁（電腦版＋手機版合一）

   由兩份獨立設計稿合併：futurelove_desktop.html、futurelove_redesign_responsive.html。
   兩稿內容幾乎相同（129 段文字中有 124 段一致），差別只在版型，因此不採「兩套 markup
   依寬度切換」，而是共用同一份 markup、由 CSS 切換版型，避免內容重複與雙 H1。

   同一份 markup 服務兩種版型的做法：
     選單    共用一份選單面板；桌機為下拉、手機為全螢幕
     亮點    共用一組 slide；桌機為四欄 grid、手機為橫向滑動輪播
     條件/流程 共用 combo-grid；桌機兩欄並排、手機上下堆疊
     主視覺  桌機用已含標題的橫幅圖，手機用照片＋HTML 文字標題

   撰寫方式為桌機優先，手機樣式集中在最後的 @media (max-width:900px)。
   ============================================================ */
/* ---------- 設計變數（兩稿原本就完全相同）---------- */
:root{
  --blue:#BFE3FB;
  --blue-deep:#6EC0EF;
  --purple:#C7B7EE;
  --purple-deep:#8B6FD9;
  --pink:#F8BEDD;
  --pink-deep:#EE7FB8;
  --purple-text:#5B3A8E;
  --ink:#4A4458;
  --gray:#8B8698;
  --card:#FFFFFF;
  --shadow-soft:0 10px 26px rgba(139,111,217,.14);
  --shadow-btn:0 10px 22px rgba(238,127,184,.38);
  --grad-primary:linear-gradient(135deg,var(--purple-deep) 0%,var(--pink-deep) 100%);
  --grad-bar:linear-gradient(90deg,var(--blue-deep),var(--purple-deep));
}
@font-face{
  font-family:'ChenYuluoyan';
  src:url('https://cdn.jsdelivr.net/gh/Chenyu-otf/chenyuluoyan_thin@main/ChenYuluoyan-2.0-Thin.ttf') format('truetype');
  font-display:swap;
}
/* ---------- 基礎 ---------- */
.lp, .lp *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
.lp a{text-decoration:none; color:inherit;}
.lp ul{list-style:none; margin:0; padding:0;}
.lp img{max-width:100%; display:block;}
.lp button{font-family:inherit; cursor:pointer;}
.lp .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;}
.lp .wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
@keyframes pulse2{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.4);}}
.lp .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.lp .reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
.lp, .lp *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
.lp .reveal{opacity:1 !important; transform:none !important;}
}
/* ---------- logo ---------- */
.lp .logo-mark{width:36px; height:36px; flex-shrink:0;}
.lp .logo-text b{display:block; font-family:'Klee One',sans-serif; font-weight:600; font-size:19px; color:var(--purple-text); letter-spacing:.02em;}
.lp .logo-text span{display:block; font-size:9.5px; letter-spacing:.24em; color:var(--gray); font-weight:700;}
/* ---------- 導覽列 ---------- */
.lp .nav-inner{display:flex; align-items:center; justify-content:space-between; height:84px;}
.lp .nav-links{display:flex; align-items:center; gap:34px;}
.lp .nav-links a{position:relative; font-size:15px; font-weight:500; color:var(--ink); padding:8px 0;}
.lp .nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--grad-primary); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.lp .nav-links a:hover{color:var(--purple-deep);}
.lp .nav-links a:hover::after{transform:scaleX(1);}
.lp .nav-actions{display:flex; align-items:center; gap:12px;}
.lp .btn-solid-sm{padding:12px 26px; border-radius:999px; border:none; background:var(--grad-primary); color:#fff; font-size:14px; font-weight:700; box-shadow:var(--shadow-btn); transition:transform .2s ease, box-shadow .2s ease;}
.lp .btn-solid-sm:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(238,127,184,.45);}
/* 漢堡鈕：桌機隱藏，手機顯示 */
/* 選單面板：桌機為下拉小卡，手機在下方 @media 改為全螢幕 */
.lp .menu-panel{
  display:none; position:absolute; right:40px; top:74px; width:280px;
  background:#fff; border-radius:20px; box-shadow:0 16px 40px rgba(139,111,217,.22);
  padding:18px 22px; flex-direction:column; gap:4px; z-index:210;
}
.lp .menu-panel.open{display:flex;}
.lp .menu-head{display:none; align-items:center; justify-content:space-between; margin-bottom:28px;}
.lp .menu-close{border:none; background:none; font-size:22px; color:var(--purple-deep); line-height:1; padding:4px;}
.lp .menu-list{display:flex; flex-direction:column;}
.lp .menu-item{display:flex; align-items:center; justify-content:space-between; padding:12px 4px; font-size:15px; font-weight:600; color:var(--purple-text); border-bottom:1px solid #F0E9FA;}
.lp .menu-item:last-child{border-bottom:none;}
.lp .menu-plus{color:var(--gray); font-weight:400;}
.lp .menu-actions{display:flex; gap:10px; margin-top:16px;}
.lp .menu-actions button{flex:1;}
.lp .menu-socials{display:none; gap:10px; margin-top:auto; padding-top:28px;}
/* ---------- 主視覺 ---------- */
/* 與站台頁首密合：設計稿原本留 64px，那是配合稿件中半透明浮動導覽列的留白；
   這裡的頁首是實心的 _Header.php，留白反而像沒對齊的縫隙，故收掉讓 banner 直接接上。
   overflow:hidden 是為了裁掉下方 hero-blob 往上溢出、會透到頁首後方的部分。 */
.lp .hero{position:relative; padding:0; overflow:hidden; display:flex; flex-direction:column;}
/* 標題位置：手機沿用設計稿放在 banner 之上，電腦則放在 banner 之下。
   兩種尺寸共用同一份 markup，靠 order 調換，不重複輸出標題。 */
.lp .hero-art{order:1;}
/* 上下都留白：標題與 eyebrow 是一組，要和上方 banner、下方資訊卡都拉開距離。
   下方略多於上方，讓標題在視覺上歸屬於自己的區塊而非黏在資訊卡上。 */
.lp .hero-copy-wrap{order:2; margin-top:28px; margin-bottom:32px;}
.lp .hero-body{order:3;}
.lp .hero-blob{position:absolute; border-radius:50%; filter:blur(46px); opacity:.55; z-index:0;}
.lp .hero-blob--1{width:300px; height:300px; background:var(--blue); top:-70px; left:-120px;}
.lp .hero-blob--2{width:240px; height:240px; background:var(--pink); top:140px; right:-100px;}
/* 標題文字：桌機時橫幅圖已含標題，故僅供螢幕閱讀器；手機才顯示為視覺標題 */
/* 標題區。
   原本桌機把標題設為視覺隱藏，前提是「banner 上已有活動名稱」——但實際後台的 banner
   是主題共用圖（如「桌遊主題」被 100 多場共用，圖上寫的是主題不是場次名），
   自訂 banner 僅 410/3519 場，所以標題必須自己顯示。 */
.lp .hero-copy{position:relative; z-index:2; text-align:center;}
.lp .eyebrow-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; padding:8px 18px; border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--purple-deep);
  box-shadow:var(--shadow-soft); margin-bottom:14px;
}
.lp .hero-copy h1{
  margin:0; font-size:32px; font-weight:900; line-height:1.35;
  background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* 主視覺容器
   給最小高度並鋪上品牌漸層底色：後台沒設 banner、或圖片載不出來時（載入失敗的
   img 高度是 0），版面才不會整塊塌掉、把下方的資訊卡往上擠。

   用 min-height 而非 aspect-ratio，是因為各活動的 banner 尺寸不一定相同；
   固定比例會把比例不合的圖裁掉，min-height 則讓圖維持原始比例完整顯示。 */
.lp .hero-art{
  position:relative; z-index:1; width:100%; overflow:hidden;
  min-height:300px;
  background:linear-gradient(120deg,#EAF4FD 0%,#F3ECFB 45%,#FDEEF6 100%);
}
.lp .hero-art img{width:100%; height:auto; display:block;}
.lp .hero-art .art-sp{display:none;}   /* 手機版主視覺，桌機不顯示 */
/* 資訊卡往上疊在 banner 下緣。
   設計稿原本是 -46px，但那是配合稿件用的 1100×351 banner（下緣為照片）；
   實際後台的 banner 是 1920×650、最下方有一條含文案與 logo 的色帶，
   疊太多會把那行字蓋住，故改為 -16px，保留浮起層次又不擋內容。 */
.lp .hero-info{position:relative; z-index:2; max-width:920px; margin:0 auto; background:var(--card); border-radius:22px; padding:26px 12px; box-shadow:0 16px 36px rgba(139,111,217,.2); display:flex; align-items:stretch;}
.lp .info-item{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 10px; min-width:0;}
.lp .info-ic{width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid currentColor;}
.lp .info-ic svg{width:22px; height:22px; display:block;}
.lp .info-item:nth-child(1) .info-ic{color:#EE7FB8;}
.lp .info-item:nth-child(3) .info-ic{color:#6EC0EF;}
.lp .info-item:nth-child(5) .info-ic{color:#8B6FD9;}
.lp .info-main{font-size:15.5px; color:var(--ink); font-weight:800; line-height:1.35;}
.lp .info-sub{font-size:12.5px; color:var(--gray); font-weight:600;}
/* 額滿／即將額滿提示，取代原本的「得彈性調整」，用紅字讓它跳出來 */
.lp .info-sub--warn{color:#D6336C; font-weight:800;}
.lp .info-divider{width:1px; background:#EDE4F8; margin:2px 0; flex-shrink:0;}
/* 下方不再留 100px：接下來的 .section 本身就有 130px 的上方間距，
   兩者相加會變成 230px，比其他區塊之間的間隔大一倍。 */
.lp .hero-cta{display:flex; flex-direction:column; align-items:center; gap:16px; margin:40px 0 0; position:relative; z-index:1;}
/* ---------- 按鈕 ---------- */
.lp .cta-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:24px 76px; border:none; border-radius:999px; background:var(--grad-primary); color:#fff; font-size:20px; font-weight:700; box-shadow:var(--shadow-btn); transition:transform .2s ease, box-shadow .2s ease;}
.lp .cta-btn:hover{transform:translateY(-3px); box-shadow:0 18px 36px rgba(238,127,184,.42);}
/* 已額滿：按鈕改用 <span> 輸出（沒有 href 就不會被點），這裡把外觀也一併關掉，
   去掉漸層與陰影、游標改成 not-allowed，避免看起來還能按。 */
.lp .cta-btn.is-disabled,
.lp .btn-solid-sm.is-disabled{background:#D8D2E0; color:#fff; box-shadow:none; cursor:not-allowed;}
.lp .cta-btn.is-disabled:hover,
.lp .btn-solid-sm.is-disabled:hover{transform:none; box-shadow:none;}
.lp .promo-note{text-align:center; font-size:13.5px; color:var(--purple-text); font-weight:700; background:#FDF0F8; padding:11px 22px; border-radius:14px;}
/* ---------- 區塊標題 ---------- */
.lp .section{margin:130px 0;}
.lp .eyebrow{text-align:center; text-transform:uppercase; letter-spacing:.2em; font-size:12.5px; font-weight:700; color:var(--blue-deep); margin-bottom:8px;}
/* color 只作用在標題兩側的 ♥：中間的字被 .heading em 以漸層覆蓋。
   原本沿用 --ink（#4A4458）偏黑、太搶眼，改用配色表的灰，讓 ♥ 退為裝飾。 */
.lp .heading{text-align:center; font-weight:900; font-size:34px; margin:0 0 52px; color:var(--gray);}
.lp .heading em{font-style:normal; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}
/* ---------- 活動亮點 ----------
   同一組 slide 兩種呈現：桌機四欄 grid，手機在下方 @media 改為橫向滑動輪播。 */
.lp .hl-wrap{position:relative;}
.lp .hl-track{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
/* aspect-ratio 已固定高度，再補底色：圖片載不出來時是柔和色塊而非空白破格 */
.lp .hl-slide{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease; background:linear-gradient(135deg,#EAF4FD,#F3ECFB);}
.lp .hl-slide:hover{transform:translateY(-8px); box-shadow:0 20px 42px rgba(139,111,217,.26);}
.lp .hl-slide img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.lp .hl-slide:hover img{transform:scale(1.07);}
.lp .hl-caption{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(0deg,rgba(30,15,45,.62),transparent); color:#fff; font-weight:800; font-size:15px; line-height:1.4;}
.lp .hl-slide--text{display:flex; align-items:center; justify-content:center;}
.lp .hl-text-inner{text-align:center;}
.lp .hl-text-inner b{display:block; font-size:22px; color:#fff; font-weight:800; margin-bottom:4px;}
.lp .hl-text-inner span{font-size:14px; color:rgba(255,255,255,.92); font-weight:700;}
/* 輪播控制項：桌機是 grid，不需要 */
.lp .hl-arrow,.lp .hl-dots{display:none;}
/* ---------- 活動介紹 ---------- */
/* 用單一淡紫而非漸層：本區塊高度由後台內文決定、常常很長，
   漸層會讓色調只出現在最底部、上半部仍是白的。單色才能整塊均勻。
   色調取品牌主色系，與報名條件的粉／藍區隔。 */
.lp .about-card-wrap{background:#F8F4FD; border-radius:28px; padding:52px; box-shadow:var(--shadow-soft);}
.lp .about-grid{display:flex; flex-direction:column; gap:36px;}
.lp .about-img{width:100%; max-width:640px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 14px 30px rgba(139,111,217,.18); aspect-ratio:16/9; background:linear-gradient(135deg,#EAF4FD,#F3ECFB);}
.lp .about-img img{width:100%; height:100%; object-fit:cover;}
.lp .about-text-wrap{max-width:760px; margin:0 auto; width:100%;}
.lp .about-lead{font-size:16px; color:var(--gray); line-height:2; margin:0 0 26px; text-align:center;}
.lp .about-block+.about-block{margin-top:22px;}
.lp .about-block b{display:block; font-size:16.5px; color:var(--purple-deep); margin-bottom:8px; font-weight:800;}
.lp .about-block p{margin:0; font-size:14.5px; color:var(--ink); line-height:1.9;}
/* ---------- 報名條件 ---------- */
.lp .conditions-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:24px;}
.lp .cond-card{border-radius:20px; padding:30px; box-shadow:var(--shadow-soft); background:#fff;}
.lp .cond-card.girl{background:linear-gradient(160deg,#FFF,#FEF1F8);}
.lp .cond-card.boy{background:linear-gradient(160deg,#FFF,#EFF7FE);}
.lp .cond-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.lp .cond-head .av{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px;}
.lp .cond-card.girl .av{background:var(--pink);}
.lp .cond-card.boy .av{background:var(--blue);}
.lp .cond-head b{font-size:17px; color:var(--ink);}
.lp .cond-meta{font-size:13.5px; color:var(--gray); margin-bottom:14px;}
.lp .cond-list{display:flex; flex-direction:column; gap:10px;}
.lp .cond-list li{font-size:14.5px; color:var(--ink); display:flex; gap:8px; align-items:flex-start; line-height:1.6;}
.lp .cond-list li b{color:var(--purple-deep); flex-shrink:0;}
/* 條件與流程並排（手機改為上下堆疊）*/
.lp .combo-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
/* ---------- 報名費用（票券樣式）---------- */
.lp .pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.lp .price-card2{position:relative; display:flex; align-items:stretch; background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-soft);}
.lp .price2-left{flex-shrink:0; width:160px; padding:24px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;}
.lp .price-card2.girl .price2-left{background:#FEF1F8;}
.lp .price-card2.boy .price2-left{background:#EFF7FE;}
.lp .price2-label{font-size:14.5px; font-weight:800; color:var(--ink); white-space:nowrap;}
.lp .price2-old{font-size:13.5px; color:var(--gray); text-decoration:line-through; white-space:nowrap;}
.lp .price2-now{font-size:29px; font-weight:900; color:var(--pink-deep); white-space:nowrap;}
.lp .price-card2.boy .price2-now{color:var(--blue-deep);}
.lp .price2-now i{font-size:14px; font-style:normal; color:var(--ink); font-weight:700; margin-left:2px;}
.lp .price2-notch{position:relative; width:0; flex-shrink:0; border-left:2px dashed #E7DEF5;}
.lp .price2-notch::before,.lp .price2-notch::after{content:''; position:absolute; left:-9px; width:18px; height:18px; border-radius:50%; background:#F4EEFB;}
.lp .price2-notch::before{top:-9px;}
.lp .price2-notch::after{bottom:-9px;}
.lp .price2-mid{flex:1; padding:20px 26px; display:flex; align-items:center; min-width:0;}
.lp .price2-mid p{margin:0; font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.6;}
.lp .price2-stub{flex-shrink:0; width:46px; background:var(--grad-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; letter-spacing:4px; writing-mode:vertical-rl; text-orientation:upright;}
/* ---------- 活動流程 ---------- */
.lp .flow-list{display:flex; flex-direction:column;}
.lp .flow-item{display:flex; align-items:baseline; gap:18px; padding:16px 2px; border-bottom:1px dashed #E3D6F7;}
.lp .flow-item:last-child{border-bottom:none;}
.lp .flow-time{font-size:15.5px; color:var(--purple-deep); font-weight:800; letter-spacing:.03em; flex-shrink:0; width:56px;}
.lp .flow-desc{font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.5;}

/* 活動地點：接在流程末端。主視覺的資訊卡只放場地名稱，完整地址在這裡呈現。 */
.lp .flow-place{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:20px; padding:16px 18px;
  background:#F7F4FD; border-radius:16px;
}
.lp .flow-place-ic{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--blue-deep); color:var(--blue-deep);
}
.lp .flow-place-ic svg{width:17px; height:17px; display:block;}
.lp .flow-place-body{min-width:0;}
.lp .flow-place-name{font-size:15px; font-weight:800; color:var(--ink); line-height:1.45;}
.lp .flow-place-addr{margin-top:4px; font-size:13.5px; color:var(--gray); font-weight:600; line-height:1.7;}
.lp .flow-place-map{
  display:inline-block; margin-top:10px;
  font-size:13px; font-weight:800; color:var(--purple-deep);
}
.lp .flow-place-map:hover{text-decoration:underline;}
/* ---------- 貼心提醒 ---------- */
.lp .tabbar{display:flex; justify-content:center; gap:12px; margin-bottom:36px; flex-wrap:wrap;}
.lp .tab-btn{padding:12px 30px; border-radius:999px; border:1.5px solid #E3D6F7; background:#F7F2FD; color:var(--purple-text); font-size:14.5px; font-weight:700; transition:background .2s ease;}
.lp .tab-btn.active{background:var(--grad-primary); color:#fff; border-color:transparent; box-shadow:var(--shadow-btn);}
.lp .tab-btn:hover:not(.active){background:#EFE6FA;}
.lp .tab-panel{display:none;}
.lp .tab-panel.active{display:block;}
.lp .rc{border-radius:22px; padding:40px 46px; border-left:6px solid transparent;}
.lp .rc.notice{background:#FFF3F1; border-left-color:#F19595;}
.lp .rc.refund{background:#EFF6FE; border-left-color:var(--blue-deep);}
.lp .rc.perk{background:#F7F1FE; border-left-color:var(--purple-deep);}
.lp .rc-cols{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.lp .rc-sub{font-size:15.5px; font-weight:800; color:var(--ink); margin:0 0 14px;}
.lp .rc-sub.mt{margin-top:22px;}
.lp .rc ul{margin:0 0 6px; padding-left:20px; display:flex; flex-direction:column; gap:9px;}
.lp .rc li{font-size:14px; color:var(--ink); line-height:1.7;}
.lp .rc-note{font-size:12.5px; color:var(--gray); font-style:italic; line-height:1.8; margin:10px 0 0;}
.lp .rc-flow{font-size:14px; background:rgba(255,255,255,.65); border-radius:12px; padding:13px 16px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.lp .rc-line-btn{display:inline-block; margin-top:22px; padding:14px 34px; border-radius:999px; background:#06C755; color:#fff; font-weight:800; font-size:14px; transition:filter .2s ease;}
.lp .rc-line-btn:hover{filter:brightness(1.06);}
/* ---------- 最終行動呼籲 ---------- */
.lp .final-cta-wrap{position:relative; text-align:center; padding:140px 60px; border-radius:36px; overflow:hidden; background:linear-gradient(160deg,#EAF4FD 0%,#F3ECFB 45%,#FDEEF6 100%); box-shadow:var(--shadow-soft);}
.lp .final-blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; z-index:0;}
.lp .final-blob--1{width:300px; height:300px; background:var(--blue); top:-90px; left:-70px;}
.lp .final-blob--2{width:260px; height:260px; background:var(--pink); bottom:-80px; right:-50px;}
.lp .countdown-card{position:relative; z-index:1; display:inline-block; background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.8); border-radius:28px; padding:34px 56px; margin-bottom:40px; box-shadow:0 14px 34px rgba(139,111,217,.2);}
.lp .countdown-card .lbl{color:var(--purple-text); font-size:16px; font-weight:800; margin-bottom:20px;}
.lp .cd-row{display:flex; justify-content:center; gap:20px;}
.lp .cd-box{background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:16px 14px; width:96px;}
.lp .cd-box b{display:block; font-size:34px; color:var(--purple-deep); font-weight:800;}
.lp .cd-box span{font-size:12.5px; color:var(--gray);}
.lp .script-line{position:relative; z-index:1; font-family:'ChenYuluoyan','Zhi Mang Xing',cursive; font-size:44px; line-height:1.7; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 40px;}
/* ---------- 頁尾 ---------- */
.lp .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:60px; margin-bottom:60px;}
.lp .footer-brand p{font-size:13.5px; color:var(--gray); line-height:1.85; margin:18px 0 24px; max-width:280px;}
.lp .ft-socials{display:flex; gap:10px;}
.lp .footer-col-title{font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:20px;}
.lp .footer-links li{margin-bottom:14px;}
.lp .footer-links a{font-size:14px; color:var(--gray); transition:color .2s ease;}
.lp .footer-links a:hover{color:var(--purple-deep);}
.lp .ft-row{display:flex; flex-direction:column; gap:4px; margin-bottom:18px;}
.lp .ft-label{font-size:11.5px; color:var(--gray); font-weight:700;}
.lp .ft-value{font-size:14px; color:var(--purple-text); font-weight:800; letter-spacing:.01em;}
.lp .ft-divider{height:1px; background:#E4DAF3; margin:0 0 26px;}
.lp .ft-copy{font-size:11.5px; color:var(--gray); line-height:1.8; text-align:center;}
/* ---------- 底部浮動報名條 ---------- */
/* 報名條：固定在視窗底部，捲過主視覺後滑出。電腦與手機皆顯示。 */
.lp .sticky-bar{position:fixed; left:0; right:0; bottom:0; z-index:150; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 -8px 26px rgba(120,90,160,.16); transform:translateY(120%); transition:transform .35s ease;}
.lp .sticky-bar.show{transform:translateY(0);}
.lp .sticky-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.lp .sticky-info .a{font-size:12.5px; color:#E0637F; font-weight:800; display:flex; align-items:center; gap:6px; margin-bottom:2px;}
.lp .sticky-info .b{font-size:14.5px; color:var(--ink); font-weight:700;}

/* 報名條裡的即時倒數：數字用等寬字，秒數跳動時整行才不會左右晃動 */
.lp .cd-inline{display:flex; align-items:baseline; gap:2px;}
.lp .cd-inline b{
  min-width:1.6em; text-align:center;
  font-size:17px; font-weight:800; color:var(--purple-deep);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.lp .cd-inline i{margin-right:6px; font-style:normal; font-size:12px; color:var(--gray); font-weight:700;}
.lp .cd-inline i:last-child{margin-right:0;}
.lp .dot-pulse{width:7px; height:7px; border-radius:50%; background:#E0637F; animation:pulse2 1.3s ease-in-out infinite;}
/* ============================================================
   中型螢幕（平板）
   ============================================================ */
@media (max-width:1100px){
.lp .combo-grid{grid-template-columns:1fr; gap:56px;}
.lp .rc-cols{grid-template-columns:1fr; gap:8px;}
.lp .about-card-wrap{padding:32px;}
.lp .hl-track{grid-template-columns:repeat(2,1fr);}
}
/* ============================================================
   手機版（≤900px）
   到這裡開始改用手機稿的版型：全螢幕選單、文字標題、橫向輪播。
   ============================================================ */
@media (max-width:900px){
.lp .wrap{padding:0 20px;}
.lp .section{margin:56px 0;}
.lp .heading{font-size:22px; margin-bottom:26px;}
.lp .eyebrow{font-size:10.5px; letter-spacing:.16em; margin-bottom:5px;}
/* 導覽列：links 與 actions 收進漢堡選單 */
.lp .nav-inner{height:64px;}
.lp .nav-links,.lp .nav-actions{display:none;}
.lp .logo-mark{width:30px; height:30px;}
.lp .logo-text b{font-size:16px;}
/* 選單改為全螢幕 */
.lp .menu-panel{
    position:fixed; inset:0; right:0; top:0; width:auto;
    border-radius:0; padding:24px 22px;
    background:linear-gradient(165deg,#fdfbff 0%, #f2eafb 55%, #fdeef6 100%);
    box-shadow:none; overflow-y:auto; gap:0;
  }
.lp .menu-head{display:flex;}
.lp .menu-item{font-size:17px; padding:16px 4px;}
.lp .menu-actions{margin-top:24px;}
.lp .menu-socials{display:flex;}
/* 主視覺：標題改為可見文字，圖片換成照片 */
.lp .hero{padding:18px 20px 0;}
.lp .hero-blob--1{width:180px; height:180px; top:-40px; left:-70px;}
.lp .hero-blob--2{width:150px; height:150px; top:60px; right:-60px;}
  /* 標題位置：手機沿用設計稿放在 banner 之上（與電腦相反，靠 order 調換）。
     文案靠左，符合手機閱讀動線。 */
.lp .hero-copy-wrap{order:0; margin-top:0; margin-bottom:0;}
.lp .hero-art{order:1;}
.lp .hero-body{order:2;}
.lp .hero-copy{text-align:left; margin-bottom:16px;}
.lp .eyebrow-pill{margin-bottom:12px; animation:fadeUp .6s ease both;}
.lp .hero-copy h1{font-size:21px; line-height:1.45;}
  /* 手機主視覺改用列表圖（4:3），維持設計稿的圓角卡片外觀。
     列表圖本身就是 4:3，套同比例的方框不會裁到內容。 */
.lp .hero-art{min-height:0; border-radius:20px; box-shadow:var(--shadow-soft); aspect-ratio:4/3;}
.lp .hero-art .art-pc{display:none;}
.lp .hero-art .art-sp{display:block; width:100%; height:100%; object-fit:cover;}
  /* 資訊卡上疊在主視覺下緣（設計稿的做法）。4:3 的主視覺有足夠高度，可維持較多上疊。 */
.lp .hero-info{margin:-40px 12px 0; padding:16px 4px; border-radius:18px;}
.lp .info-ic{width:34px; height:34px;}
.lp .info-ic svg{width:17px; height:17px;}
.lp .info-main{font-size:13px;}
.lp .info-sub{font-size:11px;}
.lp .hero-cta{margin:28px 0 0; gap:10px;}
.lp .cta-btn{width:100%; padding:18px 20px; font-size:17px;}
.lp .promo-note{font-size:12.5px; padding:10px 14px; width:100%;}
/* 活動亮點：grid 改為橫向滑動輪播 */
.lp .hl-track{
    display:flex; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;
    -ms-overflow-style:none; scrollbar-width:none;
  }
.lp .hl-track::-webkit-scrollbar{display:none;}
.lp .hl-slide{flex:0 0 84%; scroll-snap-align:center; aspect-ratio:4/3.4;}
.lp .hl-slide:hover{transform:none; box-shadow:var(--shadow-soft);}
.lp .hl-slide:hover img{transform:none;}
.lp .hl-caption{font-size:14px;}
.lp .hl-text-inner b{font-size:19px;}
.lp .hl-text-inner span{font-size:13.5px;}
.lp .hl-arrow{
    display:flex; position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%; border:none;
    background:rgba(255,255,255,.9); color:var(--purple-deep);
    font-size:19px; font-weight:800; align-items:center; justify-content:center;
    box-shadow:var(--shadow-soft); z-index:5; line-height:1; padding:0 0 2px;
  }
.lp .hl-arrow:active{transform:translateY(-50%) scale(.9);}
.lp .hl-arrow--prev{left:2px;}
.lp .hl-arrow--next{right:2px;}
.lp .hl-dots{display:flex; justify-content:center; gap:6px; margin-top:12px;}
.lp .hl-dots i{width:6px; height:6px; border-radius:50%; background:#E1D8F4; display:block;}
.lp .hl-dots i.active{background:var(--purple-deep); width:16px; border-radius:4px; transition:.25s;}
/* 活動介紹 */
.lp .about-card-wrap{padding:18px; border-radius:18px;}
.lp .about-grid{gap:18px;}
.lp .about-lead{font-size:13px; line-height:1.9; margin-bottom:16px;}
.lp .about-block b{font-size:13.5px;}
.lp .about-block p{font-size:12.5px; line-height:1.85;}
.lp .about-block+.about-block{margin-top:16px;}
/* 條件／費用／流程 */
.lp .combo-grid{gap:48px;}
.lp .cond-card{padding:20px; border-radius:18px;}
.lp .cond-head b{font-size:15px;}
.lp .cond-list li{font-size:13.5px;}
.lp .pricing-grid{grid-template-columns:1fr; gap:14px;}
.lp .price2-left{width:132px; padding:18px 10px;}
.lp .price2-now{font-size:25px;}
.lp .price2-mid{padding:16px 18px;}
.lp .price2-mid p{font-size:13px;}
.lp .flow-time,.lp .flow-desc{font-size:14px;}
.lp .flow-place{margin-top:16px; padding:14px 14px; gap:10px;}
.lp .flow-place-ic{width:30px; height:30px;}
.lp .flow-place-ic svg{width:15px; height:15px;}
.lp .flow-place-name{font-size:14px;}
.lp .flow-place-addr{font-size:12.5px;}
.lp .flow-item{padding:13px 2px;}
/* 貼心提醒 */
.lp .tabbar{gap:8px; margin-bottom:22px;}
.lp .tab-btn{padding:10px 18px; font-size:13px;}
.lp .rc{padding:22px 20px; border-radius:18px;}
.lp .rc-sub{font-size:14px;}
.lp .rc li{font-size:13px;}
/* 最終 CTA */
.lp .final-cta-wrap{padding:44px 20px; border-radius:24px;}
.lp .countdown-card{padding:20px 18px; margin-bottom:24px; border-radius:20px; display:block;}
.lp .countdown-card .lbl{font-size:14px; margin-bottom:14px;}
.lp .cd-row{gap:8px;}
.lp .cd-box{width:auto; flex:1; padding:12px 6px; border-radius:12px;}
.lp .cd-box b{font-size:24px;}
.lp .cd-box span{font-size:11px;}
.lp .script-line{font-size:28px; margin-bottom:26px;}
/* 頁尾 */
/* 下方留白避開浮動報名條 */
.lp .footer-grid{grid-template-columns:1fr; gap:32px; margin-bottom:32px;}
.lp .footer-brand p{max-width:none;}
/* 浮動報名條 */
  /* 手機版同樣固定在底部。空間有限，故縮小倒數字級並收緊間距，
     讓「倒數 ＋ 報名鈕」在 390px 寬的螢幕上仍排得下。 */
.lp .sticky-inner{padding:10px 16px; gap:10px;}
.lp .sticky-info .a{font-size:11px; margin-bottom:1px;}
.lp .cd-inline b{min-width:1.5em; font-size:15px;}
.lp .cd-inline i{margin-right:4px; font-size:11px;}
.lp .sticky-bar .btn-solid-sm{padding:11px 18px; font-size:13px; white-space:nowrap;}
}
@media (max-width:420px){
.lp .hero-copy h1{font-size:19px;}
.lp .info-main{font-size:12px;}
.lp .cta-btn{font-size:16px;}
}

/* ============================================================
   後台編輯器內容（.rich-text）

   love_admin_active 的 ACcontent／ACnote／ACback／ACgoodnews／ACprocess
   都是後台編輯器存的 HTML，內含 font-size、font-family、color 等行內樣式，
   直接輸出會與本頁版型衝突。這裡把明顯會破版的部分收斂，但不強制覆蓋顏色，
   以免後台特意標紅的重點字失去作用。
   ============================================================ */
.lp .rich-text{ font-size:14.5px; line-height:1.9; color:var(--ink); }
.lp .rich-text *{ max-width:100%; }
.lp .rich-text p{ margin:0 0 12px; }
.lp .rich-text p:last-child{ margin-bottom:0; }
.lp .rich-text img{ height:auto; border-radius:12px; margin:8px 0; }

/* 活動介紹內文的圖片：對齊上方那張主圖的尺寸與外觀。
   後台編輯器會在 img 上寫死 width／height 屬性（例如 width="356"），
   圖片因此比主圖小一截；HTML 屬性的優先權低於任何 CSS 規則，故這裡直接覆蓋。
   高度不鎖比例，避免把宣傳圖上的文字裁掉，因此是等寬而非等高。 */
.lp .about-text-wrap img{
  width:100%;
  max-width:640px;
  height:auto;
  margin:18px auto;
  border-radius:22px;
  box-shadow:0 14px 30px rgba(139,111,217,.18);
}

@media (max-width:900px){
  .lp .about-text-wrap img{ margin:12px auto; border-radius:16px; }
}
.lp .rich-text table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.lp .rich-text ul,
.lp .rich-text ol{ padding-left:20px; margin:0 0 12px; }
.lp .rich-text ul{ list-style:disc; }
.lp .rich-text ol{ list-style:decimal; }
.lp .rich-text li{ margin-bottom:6px; }
/* 編輯器常見的固定字級，改為跟隨本頁字級 */
.lp .rich-text [style*="font-size"]{ font-size:inherit !important; }
.lp .rich-text [style*="font-family"]{ font-family:inherit !important; }

@media (max-width:900px){
  .lp .rich-text{ font-size:13px; }
}

/* ============================================================
   與站台浮動按鈕的避讓

   本頁底部有浮動報名條（.sticky-bar，z-index 150），會蓋住站台共用的
   浮動按鈕（.floating-actions，z-index 20，bottom 30px）最下面那顆
   「LINE 速配」。不調整 z-index——那只會讓按鈕壓在報名條上、更亂——
   而是在報名條出現時把整組按鈕往上推。

   .floating-actions 位在 .lp 之外（由 _FloatingActions.php 輸出），
   本檔其餘規則都收在 .lp 作用域內，這裡是刻意的例外，
   故以 body.activity_lp 限定只作用於本頁。
   --lp-bar-h 由頁面腳本量測後寫入，避免寫死高度。
   ============================================================ */
body.activity_lp .floating-actions{ transition:bottom .35s ease; }
body.activity_lp.lp-bar-shown .floating-actions{ bottom:calc(30px + var(--lp-bar-h, 68px) + 12px); }

/* 手機版的報名條同樣固定在底部，浮動按鈕一樣要往上讓位 */
@media (max-width:900px){
  body.activity_lp.lp-bar-shown .floating-actions{ bottom:calc(10px + var(--lp-bar-h, 60px) + 10px); }
}