/* 首屏價格卡（手寫、整併過的新版；只管 .kbc，不依賴 cta.css 裡的 .kb-offer 疊層規則）
   三塊（Neo 2026-11-02）：①價格｜②加 1 元 多贈 30 分鐘（第二重點，一整段）｜③立即預約＋付款標誌（紅色，貼邊） */

/* 首屏背景的暗化與容器查詢（讓字級隨卡寬縮放）——原本掛在 .kb-offer，現在改掛 .kbc */
.kb-sec-header:has(.kbc){position:relative}
.kb-sec-header:has(.kbc)::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, rgba(10, 10, 14, 0.72) 0%, rgba(10, 10, 14, 0.45) 45%, rgba(10, 10, 14, 0) 78%)}
.kb-sec-header:has(.kbc) > .container{position:relative;z-index:1}
.kb-sec-header:has(.kbc) h2, .kb-sec-header:has(.kbc) p{text-shadow:0 1px 10px rgba(0, 0, 0, 0.55)}
.kb-sec-header:has(.kbc) .col-12{container-type:inline-size}

.kbc{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;align-items:center;gap:0.2em 0;width:fit-content;max-width:100%;margin:1.4rem 0 1.2rem;padding:0;overflow:hidden;cursor:pointer;font-size:min(calc(1.4rem + 0.5vw), 1.62cqw);font-style:italic;color:#fff;border:1px solid rgba(255, 255, 255, var(--glass-border, 0.9));border-radius:16px;background:linear-gradient(135deg, rgba(255, 255, 255, var(--glass-hi-a, 0.2)), rgba(255, 255, 255, var(--glass-hi-b, 0.1))), rgba(20, 20, 26, var(--glass-dark, 0.5));-webkit-backdrop-filter:blur(var(--glass-blur, 20px)) saturate(var(--glass-sat, 2));backdrop-filter:blur(var(--glass-blur, 20px)) saturate(var(--glass-sat, 2));box-shadow:0 calc(var(--shadow-blur, 25px) * 0.3) var(--shadow-blur, 25px) rgba(0, 0, 0, var(--shadow-a, 0.4)), 0 2px 6px rgba(0, 0, 0, calc(var(--shadow-a, 0.4) * 0.6));white-space:nowrap}

/* BUG-7AW7BK：插槽外層只是工作台的容器，不是元件的一層——攤平，卡片就直接躺在 .col-12 裡，跟正式站一樣 */
#cta-hero-slot{display:contents}

/* 三塊共用兩條列線（subgrid）。各塊自己帶上下內距，列高＝三塊中最高的那一塊（有方框的塊會撐高），其他塊的文字在該列內垂直置中——所以第一行對第一行、第二行對第二行。 */
.kbc__one, .kbc__two, .kbc .kb-cta-only{grid-row:1 / span 2;display:grid;grid-template-rows:subgrid;align-items:center}

/* ① 價格（兩排結構，金額最大）：[左兩排：首次體驗價／LPG NT$] [金額 2,500] [右兩排：原價 3,500/堂／(部位) 20 分鐘] */
.kbc__one{grid-template-columns:auto auto auto;column-gap:0.8em;padding:0.55em 0.9em 0.6em 1.6em}
.kbc__left, .kbc__right{display:contents}
.kbc__tag{grid-column:1;grid-row:1;font-size:1.05em;font-weight:600;letter-spacing:0.08em;line-height:1.2}
.kbc__sub{grid-column:1;grid-row:2;display:flex;align-items:baseline;justify-content:space-between;gap:0.6em}
.kbc__short{font-size:0.8em;font-weight:700;letter-spacing:0.06em;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* 課程簡稱可能 2／4／6 個字，限寬 7em 超過省略 */
.kbc__cur{font-size:0.8em;font-weight:500}
.kbc__amount{grid-column:2;grid-row:1 / span 2;font-size:2.5em;font-weight:700;line-height:1;text-shadow:0 2px 12px rgba(0, 0, 0, 0.45)}
.kbc__orig{grid-column:3;grid-row:1}
.kbc__mins{grid-column:3;grid-row:2}
.kbc__right p{margin:0;font-size:0.92em;line-height:1.3;color:rgba(255, 255, 255, 0.9)}
.kbc__orig{display:flex;align-items:center;gap:0.3em}   /* BUG-JCFYXC：原價與「/堂」放寬，不再擠在一起 */
.kbc__orig s{opacity:0.8}
.kbc__unit{margin-left:0}
.kbc__mins{letter-spacing:0.04em;word-spacing:0.1em}

/* ② 加 1 元 多贈 30 分鐘：第二重點，一整段（貼齊上下緣、與紅色按鈕無縫相接）；「共 50 分鐘」是這一段的小字 */
.kbc__two{padding:0.55em 1.3em 0.6em;background:rgba(255, 255, 255, var(--seg-alpha, 0.2));border-left:1px solid rgba(255, 255, 255, 0.35)}
.kbc__two p{margin:0;display:flex;align-items:center;gap:0.5em;line-height:1.25}
.kbc__chip{padding:0.05em 0.45em;font-size:1.2em;font-weight:800;color:#fff;background:#ff5656;border-radius:8px}
.kbc__gift{font-size:1.2em;font-weight:700;color:#fff}
.kbc__note{font-size:0.85em;color:rgba(255, 255, 255, 0.92);gap:0.6em}
.kbc__note em{max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.kbc__note em::before{content:"("}
.kbc__note em::after{content:")"}
.kbc__note span{font-weight:700}

/* ③ 按鈕：與底部卡同一顆（.btn.btn-secondary.kb-cta-only），貼齊右緣、上下撐滿；第一行文字、第二行付款標誌 */
.kbc .kb-cta-only{justify-items:center;margin:0!important;padding:0.4em 0.72em 0.435em!important;border:0!important;border-radius:0!important;background-color:#d63a3a!important;color:#fff!important;font-style:italic;font-size:1.38em;font-weight:700;line-height:1.2;white-space:nowrap}
.kbc .kb-cta-only span{font-weight:inherit}   /* 裸 span 被全站規則重設成 400，要蓋回去 */

/* 付款標誌：上排品牌圖（白色）、下排文字標籤。越多越好、依接受度排序（資料在 cta.data.js） */
.kbc__pay{display:flex;align-items:center;justify-content:center;gap:0.3em;color:#fff;font-style:normal;opacity:0.95;line-height:0}
.kbc__brands, .kbc__tags{display:contents}   /* BUG-PSBJUY：品牌圖與文字標籤盡量在同一排 */
.kbc__brands svg{height:0.8em;width:auto}
.kbc__brands .p-visa{height:0.62em}
.kbc__brands .p-mastercard{height:0.72em}   /* BUG-ZM2CX7：Mastercard ×0.9 */
.kbc__brands .p-jcb{height:0.96em}   /* JCB ×1.2 */
.kbc__brands .p-applepay{height:0.935em}   /* Apple Pay ×1.1 */
.kbc__inst{padding:0.1em 0.4em;border:1px solid #fff;border-radius:4px;font-size:0.605em;font-style:normal;font-weight:700;line-height:1.2;white-space:nowrap}
.kbc__inst small{font-size:0.667em;font-weight:700;margin:0 0.1em}

/* —— 舊的「暫用堆疊版」手機規則（2026-11-02 被下方新手機版取代，原文保留不刪）——
/* 手機版：尚未設計；先給可用的堆疊版 * /
@media (max-width: 767.98px) {
    .kbc { grid-template-columns: 1fr; grid-template-rows: none; width: 100%; font-size: calc(1.4rem + 0.5vw); white-space: normal; }
    .kbc__one, .kbc__two, .kbc .kb-cta-only { grid-row: auto; grid-template-rows: none; }
}
*/

/* 底部浮出列（新版，BUG-3Y2ZBV）：同一張三塊卡。固定在畫面底部置中；往下捲才由下往上淡入，回到頂端淡出消失；不定時跳動。
   刻意用自己的 #kb-bar，不沿用舊的 #kb-actionbar（舊規則會把裡面每個 div 的字級與內距蓋掉）。舊版標記與樣式仍保留（cta.js 的 barHTMLOld、cta.css）。 */
#kb-bar{position:fixed;left:0;right:0;z-index:1049;display:flex;justify-content:center;pointer-events:none}
body.kb-at-top #kb-bar{opacity:0;transform:translateY(100%)}
/* BUG-DGMW5F：底部浮出的這一顆黑層不透明度要比首屏高（突顯、增加明確感）。--bar-dark 預設 1（首屏 --glass-dark 是 0.5）；工作台面板有「底部列黑層」滑桿 */
/* 底部列自己的一組參數（工作台面板「底部列細節設定」逐項可調；括號為預設）：
   --bar-dark 黑層（1）／--bar-hi-a 高光起點（0.2）／--bar-hi-b 高光終點（0.1）／--bar-blur 模糊 px（20）／--bar-sat 飽和度（2）／
   --bar-border 外框線（0.9）／--bar-seg 加 1 元那段白色量（0.2）／--bar-shadow-a 陰影濃度（0.4）／--bar-shadow-blur 陰影模糊 px（25）／
   --bar-bottom 離畫面底部距離 px（24）／--bar-scale 卡片整體縮放倍率（1）／--bar-fade 淡入淡出秒數（0.35） */
#kb-bar{--glass-dark:var(--bar-dark, 1);--glass-hi-a:var(--bar-hi-a, 0.2);--glass-hi-b:var(--bar-hi-b, 0.1);--glass-blur:var(--bar-blur, 20px);--glass-sat:var(--bar-sat, 2);--glass-border:var(--bar-border, 0.9);--seg-alpha:var(--bar-seg, 0.2);--shadow-a:var(--bar-shadow-a, 0.4);--shadow-blur:var(--bar-shadow-blur, 25px);bottom:var(--bar-bottom, 24px);transition:opacity var(--bar-fade, 0.35s) ease, transform var(--bar-fade, 0.35s) ease}
#kb-bar .kbc{pointer-events:auto;margin:0;font-size:calc(min(calc(1.4rem + 0.5vw), 17.95px) * var(--bar-scale, 1))}   /* 底部沒有容器查詢，字級固定到與首屏卡同大 */

/* ================= 手機與平板版（2026-11-02，BUG-ZENFVV）=================
   原則：手機與桌機是「同一個 CTA 框架」——同一份資料、同樣三個結構（①價格 ②加 1 元 ③立即預約）、同樣的點擊與追蹤；
   只是「排法與資訊密度」不同。手機只壓縮、隱藏次要資訊，不換結構、不另寫一份。 */

/* 平板（768～1099）：整張卡等比縮小，不換結構。首屏卡的字級本來就隨容器縮放；底部浮出卡改隨視窗寬縮放 */
@media (min-width: 768px) and (max-width: 1099.98px) {
    #kb-bar .kbc{font-size:calc(min(17.95px, 1.62vw) * var(--bar-scale, 1))}
}

/* 手機（< 768）*/
@media (max-width: 767.98px) {
    .kbc__amount, .kbc__tag, .kbc__orig, .kbc__mins, .kbc__gift, .kbc__chip, .kbc__note span{white-space:nowrap}   /* 金額與數字絕不折行 */

    /* 首屏卡：三塊垂直堆疊，每塊壓緊 */
    
    
    
    
    
    .kbc--hero .kbc__two p{justify-content:center}
    .kbc--hero .kb-cta-only{grid-template-rows:auto auto}
    .kbc--hero .kbc__pay{flex-wrap:wrap}

    /* 底部浮出列：同一個三塊結構，壓成一排約 56px——只留 首次體驗價＋金額｜+1 元 多贈 30 分鐘｜立即預約！；
       原價／時間／部位、共 50 分鐘、LPG、付款標誌都收起（首屏卡與預約面板內仍完整呈現） */
    #kb-bar{bottom:var(--bar-bottom, 10px)}
    #kb-bar .kbc{max-width:calc(100% - 12px);grid-template-columns:auto 1fr auto}
    #kb-bar .kbc__right, #kb-bar .kbc__short, #kb-bar .kbc__note, #kb-bar .kbc__pay{display:none}
    #kb-bar .kbc__one{grid-template-columns:auto auto;column-gap:0.35em}
    #kb-bar .kbc__tag{letter-spacing:0;font-size:0.95em}
    #kb-bar .kbc__amount{font-size:1.9em}
    #kb-bar .kbc__two{justify-items:center}
    #kb-bar .kbc__chip{font-size:1.05em;padding:0.05em 0.35em}
    #kb-bar .kbc__gift{font-size:0.92em}
    #kb-bar .kbc__two p{gap:0.3em}
    #kb-bar .kb-cta-only{font-size:1.15em}
}

/* ===== 手機版修正（BUG-LU7GAE）：行與行要有間隔、每塊內容上下置中 ===== */
@media (max-width: 767.98px) {
    /* 首屏卡：每塊上下內距加大，塊內行距加大，內容垂直置中 */
    .kbc--hero .kbc__one{align-items:center;align-content:center}
    .kbc--hero .kbc__left, .kbc--hero .kbc__right{align-content:center}
    .kbc--hero .kbc__orig, .kbc--hero .kbc__mins, .kbc--hero .kbc__tag{line-height:1.35}
    .kbc--hero .kbc__sub{padding-top:0.2em}
    .kbc--hero .kbc__two{align-content:center}
    .kbc--hero .kb-cta-only{align-content:center;justify-content:center}
    .kbc--hero .kb-cta-only .kbc__pay{margin-top:0.1em}

    /* 底部浮出列：高度加大（約 44→58px），三塊都垂直置中，單行內容不貼邊 */
    
    #kb-bar .kbc__one, #kb-bar .kbc__two, #kb-bar .kb-cta-only{align-items:center;align-content:center;justify-content:center}
    
    #kb-bar .kbc__left{align-content:center}
    #kb-bar .kbc__tag, #kb-bar .kbc__sub{line-height:1.3}
    
    
}

/* ===== 手機版再修（BUG-GCU297）===== */
@media (max-width: 767.98px) {
    /* 首屏卡縮小：金額、內距、行距、按鈕都收一級（約 230→190px），仍保持清楚 */
    
    
    
    .kbc--hero .kbc__left, .kbc--hero .kbc__right{row-gap:0.3em}
    
    

    /* 底部浮出列：三塊都要有「第二行」，中間與右邊不再往上靠。
       中間塊第二行＝「共 50 分鐘」（項目名收起）；右邊塊第二行＝信用卡品牌圖示（分期／紅利文字標籤收起） */
    #kb-bar .kbc__note{display:flex}
    #kb-bar .kbc__note em{display:none}
    #kb-bar .kbc__note span{font-size:0.95em}
    #kb-bar .kbc__pay{display:flex}
    #kb-bar .kbc__tags{display:none}
    
    
    
    
    #kb-bar .kb-cta-only{padding:0.5em 0.6em 0.55em!important}
    #kb-bar .kbc__one{padding:0.5em 0.5em 0.55em 0.7em}
    #kb-bar .kbc__two{padding:0.5em 0.45em 0.55em}
}

/* 手機底部列右塊：只留 Visa、Mastercard 兩個圖示並放大（JCB、Apple Pay 收起），辨識度優先 */
@media (max-width: 767.98px) {
    #kb-bar .kbc__brands .p-jcb, #kb-bar .kbc__brands .p-applepay{display:none}
    #kb-bar .kbc__brands svg{height:1em}
    #kb-bar .kbc__brands .p-visa{height:0.75em}
    #kb-bar .kbc__pay{gap:0.5em}
}

/* ===== 手機：首屏卡與底部列「一模一樣」（BUG-P2XTZB）=====
   同一個壓縮版（一排、約 52px）：首次體驗價 NT$2,500｜+1元 多贈30分鐘／共50分鐘｜立即預約！／Visa Mastercard。
   省下的資訊（原價、20 分鐘／部位、增肌減脂、JCB、Apple Pay、分期、紅利折抵）改在 QBBS 預約面板補充。
   舊的手機首屏卡規則（三層堆疊版）保留在上方，不刪；若要換回，把這一整段註解掉即可。 */
@media (max-width: 767.98px) {
    .kbc--hero{grid-template-columns:auto 1fr auto;grid-template-rows:none;width:100%;max-width:100%;align-items:stretch;margin:0.8rem 0}
    .kbc--hero .kbc__one, .kbc--hero .kbc__two, .kbc--hero .kb-cta-only{grid-row:auto;grid-template-rows:none;align-items:center;align-content:center;justify-content:center}
    .kbc--hero .kbc__right, .kbc--hero .kbc__short{display:none}
    .kbc--hero .kbc__note{display:flex}
    .kbc--hero .kbc__note em{display:none}
    .kbc--hero .kbc__note span{font-size:0.95em}
    .kbc--hero .kbc__pay{display:flex;gap:0.5em}
    .kbc--hero .kbc__tags, .kbc--hero .kbc__brands .p-jcb, .kbc--hero .kbc__brands .p-applepay{display:none}
    .kbc--hero .kbc__brands svg{height:1em}
    .kbc--hero .kbc__brands .p-visa{height:0.75em}
    .kbc--hero .kbc__one{grid-template-columns:auto auto;padding:0.5em 0.5em 0.55em 0.7em;column-gap:0.4em;row-gap:0.2em;justify-self:stretch}
    .kbc--hero .kbc__tag{letter-spacing:0;font-size:0.95em;line-height:1.3}
    .kbc--hero .kbc__amount{font-size:1.9em;justify-self:auto}
    .kbc--hero .kbc__two{padding:0.5em 0.45em 0.55em;justify-items:center;border-top:0;border-left:1px solid rgba(255, 255, 255, 0.35);gap:0.3em}
    .kbc--hero .kbc__chip{font-size:1.05em;padding:0.05em 0.35em}
    .kbc--hero .kbc__gift{font-size:0.92em}
    .kbc--hero .kbc__two p{gap:0.3em}
    .kbc--hero .kb-cta-only{font-size:1.15em;gap:0.3em;margin:0!important}
}

/* BUG-W3FV6C：手機首屏卡被擠（按鈕字被切）。首屏卡寬度是容器寬（扣掉左右留白），比底部列窄，
   12px 固定字級放不下；改成字級隨容器寬縮放（3.3cqw ≈ 容器 360px 時 12px），整張卡等比縮小、不再被切。 */
@media (max-width: 767.98px) {
    .kbc--hero{font-size:min(12px, 3.3cqw)}
    .kbc--hero .kb-cta-only{padding:0.5em 0.5em 0.55em!important}
    .kbc--hero .kbc__one{padding-left:0.6em}
}

/* ===== 手機 CTA（首屏卡與底部列同一個）：右邊「立即預約」塊加寬，第二行放 Visa、Apple Pay、分期、紅利（BUG-9RRQVV）；
   左邊與中間塊縮排讓位 ===== */
@media (max-width: 767.98px) {
    .kbc--hero, #kb-bar .kbc{grid-template-columns:auto auto 1fr}   /* 右塊吃剩餘寬度 */
    /* 右塊第二行：Visa｜Apple Pay｜分期｜紅利（Mastercard、JCB 收起；分期的 3,6,12 小字與紅利的「折抵」小字收起，只留兩個字） */
    .kbc--hero .kbc__brands .p-mastercard, #kb-bar .kbc__brands .p-mastercard, .kbc--hero .kbc__brands .p-jcb, #kb-bar .kbc__brands .p-jcb{display:none}
    .kbc--hero .kbc__brands .p-applepay, #kb-bar .kbc__brands .p-applepay{display:inline}
    .kbc--hero .kbc__tags, #kb-bar .kbc__tags{display:flex;gap:0.3em}
    .kbc--hero .kbc__inst small, #kb-bar .kbc__inst small{display:none}
    
    .kbc--hero .kbc__pay, #kb-bar .kbc__pay{flex-wrap:nowrap}
    /* 左塊縮排：「首次體驗價」字距與金額縮小、內距收緊；中塊：+1 元與文字縮小、內距收緊 */
    .kbc--hero .kbc__one, #kb-bar .kbc__one{padding-left:0.5em;padding-right:0.3em;column-gap:0.25em}
    .kbc--hero .kbc__tag, #kb-bar .kbc__tag{font-size:0.85em}
    .kbc--hero .kbc__amount, #kb-bar .kbc__amount{font-size:1.7em}
    .kbc--hero .kbc__two, #kb-bar .kbc__two{padding-left:0.3em;padding-right:0.3em}
    .kbc--hero .kbc__chip, #kb-bar .kbc__chip{font-size:0.95em;padding:0.05em 0.3em}
    .kbc--hero .kbc__gift, #kb-bar .kbc__gift{font-size:0.82em;letter-spacing:-0.02em}
    .kbc--hero .kbc__two p, #kb-bar .kbc__two p{gap:0.2em}
    .kbc--hero .kbc__note span, #kb-bar .kbc__note span{font-size:0.85em}
    
}

/* 右塊微調：最右的「紅利」貼邊被切，標誌與標籤再縮一級、留右側呼吸 */
@media (max-width: 767.98px) {
    
    .kbc--hero .kbc__brands svg, #kb-bar .kbc__brands svg{height:0.85em}
    
    
    
}

/* BUG-BS4WF3：手機 Visa、Apple Pay 標誌與「分期／紅利」框差不多大（框高約 15px；Apple Pay 高 15px、Visa 寬度與框相近） */
@media (max-width: 767.98px) {
    .kbc--hero .kbc__inst, #kb-bar .kbc__inst{font-size:0.7em;padding:0.08em 0.25em}
    .kbc--hero .kbc__brands .p-applepay, #kb-bar .kbc__brands .p-applepay{height:1.33em}
    
}
@media (max-width: 767.98px) {
    
    
    .kbc--hero .kb-cta-only, #kb-bar .kb-cta-only{padding-left:0.25em!important;padding-right:0.45em!important}
}

/* Apple Pay 圖示右側多留一點間距（與「分期」框之間），手機首屏卡與底部列都一樣 */
@media (max-width: 767.98px) {
    .kbc--hero .kbc__brands .p-applepay, #kb-bar .kbc__brands .p-applepay{margin-right:0.3em}
}
@media (max-width: 767.98px) {
    .kbc--hero .kbc__brands .p-visa, #kb-bar .kbc__brands .p-visa{height:0.74em;margin-right:0.1em}
    .kbc--hero .kbc__pay, #kb-bar .kbc__pay{gap:0.12em}
}

/* 手機：底部列與首屏卡「同一個結構、同一個大小」（Neo 2026-11-02）。
   首屏卡字級＝min(12px, 3.3cqw)，容器寬≈視窗寬−32px；底部列沒有容器，用同一條式子（視窗寬−32px 的 3.3%）。
   所以兩顆逐元素尺寸一致；只有底色不同——底部列仍用自己的底色（--bar-dark，預設 1＝實心深灰）。 */
@media (max-width: 767.98px) {
    #kb-bar .kbc{font-size:calc(min(12px, 0.033 * (100vw - 32px)) * var(--bar-scale, 1))}
}
@media (max-width: 767.98px) {
    /* 底部列的三塊也不用 subgrid（與首屏卡同一套：各塊自己置中），消除 1px 高度差與 Apple Pay 被切 */
    #kb-bar .kbc{grid-template-rows:none;align-items:stretch}
    #kb-bar .kbc__one, #kb-bar .kbc__two, #kb-bar .kb-cta-only{grid-row:auto;grid-template-rows:none}
    #kb-bar .kbc__two{gap:0.3em;border-left:1px solid rgba(255, 255, 255, 0.35)}
    #kb-bar .kbc__one{row-gap:0.2em}
    #kb-bar .kbc__left{row-gap:0}
    #kb-bar .kb-cta-only{gap:0.3em}
}
@media (max-width: 767.98px) {
    .kbc--hero, #kb-bar .kbc{min-height:4.7em;box-sizing:border-box}   /* 兩顆同高，Apple Pay 不被下緣切到 */
    #kb-bar .kb-cta-only, .kbc--hero .kb-cta-only{padding-top:0.45em!important;padding-bottom:0.5em!important;overflow:visible}
    #kb-bar .kbc__brands .p-applepay, .kbc--hero .kbc__brands .p-applepay{flex:none}
}

/* BUG-QPKU2N：中間塊與右邊紅色按鈕塊之間加一條白線，與「價格塊｜中間塊」之間那條同樣粗細、同樣顏色（所有 CTA：桌機、手機、首屏、底部列）。
   按鈕有 border:0 !important，所以這裡用 !important 只開左邊框。 */
.kbc .kb-cta-only{border-left:1px solid rgba(255, 255, 255, 0.35)!important}


/* skin2：美容站新皮膚（疊在正式站真實 DOM 上；旗標關掉就不載入，回到原樣）。三層色彩：標準黑／主題色 --theme（單一值）／交易紅 --pay（固定）。無漸層。 */
html.sk2{font-size:16px}
.sk2 .kb-body{--theme:#8a8a94;--pay:#e0393e;--deep:color-mix(in oklab,var(--theme) 22%,#0a0a0d);--deep2:color-mix(in oklab,var(--theme) 14%,#0a0a0d);--line:color-mix(in oklab,var(--theme) 55%,transparent);--paper:color-mix(in oklab,var(--theme) 6%,#fff);--ink:#26262b;--lite:color-mix(in oklab,var(--theme) 60%,#fff);--A:min(1108px,calc(100% - 32px));background:var(--deep2)!important;background-image:none!important;font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif}
/* ── 頂部橫幅 ── */
.sk2 #kb-header .navbar{background:var(--deep)!important;background-image:none!important;border-bottom:1px solid var(--line);box-shadow:none}
.sk2 #kb-header .navbar>.container{max-width:none;width:var(--A);padding:0;display:flex;align-items:center;justify-content:space-between}
.sk2 .kb-logo--www{display:grid!important;grid-template-columns:max-content auto;align-items:center;margin:0!important;color:#fff;text-decoration:none}
.sk2 .kb-logo--www span{display:block}
.sk2 .kb-logo--www .en{grid-column:1;grid-row:1;white-space:nowrap}
.sk2 .kb-logo--www .sub{grid-column:1;grid-row:2;margin:2px 0 0!important;white-space:nowrap}
.sk2 .kb-logo--www .tw{grid-column:1;grid-row:3;margin-top:3px;white-space:nowrap}
.sk2 .kb-logo--www .lpg{grid-column:2;grid-row:1/4;position:static!important;float:none!important;background-size:contain;background-position:left center}
.sk2 #kb-nav .navbar-nav{align-items:center;gap:0}
.sk2 #kb-nav .nav-link{padding:8px 10px!important;border-radius:99px;color:rgba(255,255,255,.9)!important;font-weight:600;letter-spacing:.06em;font-size:16px;white-space:nowrap}
.sk2 #kb-nav .nav-link:hover,.sk2 #kb-nav .nav-item.active>.nav-link{background:color-mix(in oklab,var(--theme) 34%,transparent);color:#fff!important}
.sk2 #kb-nav .dropdown-menu{background:var(--deep);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.sk2 #kb-nav .dropdown-item{color:#fff;border-radius:9px;padding:9px 12px;font-size:15px}.sk2 #kb-nav .dropdown-item:hover{background:color-mix(in oklab,var(--theme) 30%,transparent)}
.sk2 .sk-rsv{margin-left:6px}.sk2 .sk-rsv a{background:var(--pay);color:#fff!important;font-weight:800;border-radius:99px;text-decoration:none;cursor:pointer}
.sk2 .sk-ct>a{border:1.5px solid var(--theme)}
.sk2 .sk-ct .dropdown-menu a.sk-i{display:flex;align-items:center;gap:12px}.sk2 .sk-ct .ci{flex:0 0 32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}.sk2 .sk-ct .ci svg{width:18px;height:18px}
.sk2 .sk-ct a.l .ci{background:#22b315}.sk2 .sk-ct a.f .ci{background:#4267b2}.sk2 .sk-ct small{display:block;font-size:12px;opacity:.65}
/* ── 首屏 ── */
.sk2 .kb-sec-header{display:flex!important;align-items:center;background-size:cover!important;background-position:center!important;position:relative}
.sk2 .kb-sec-header::before{content:"";position:absolute;inset:0;pointer-events:none}
.sk2 .kb-sec-header>.container{position:relative;max-width:none;width:var(--A);padding:0;padding-top:calc(4vh + 20px)}
.sk2 .kb-sec-header h2.display-1{font-size:calc(2rem + 3 * ((100vw - 1rem) / 119))!important;line-height:1.2!important;font-weight:700}
.sk2 .kb-sec-header h2.display-2{font-size:calc(1.75rem + 1.75 * ((100vw - 1rem) / 119))!important;line-height:1.25!important;font-weight:700}
.sk2 .kb-sec-header p.display-5{font-size:calc(.8 * (1.5rem + 1.25 * ((100vw - 1rem) / 119)))!important;line-height:1.5!important;font-weight:500}
/* ── 區塊標題條：深色主題底＋編號圓章 ── */
.sk2 .kb-sec-title{background:var(--deep)!important;background-image:none!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0 20px;position:relative;box-shadow:none!important}
.sk2 .kb-sec-title .container{max-width:none;width:var(--A);padding:0}.sk2 .kb-sec-title .card{background:transparent!important;border:0!important}
.sk2 .kb-sec-title .card-title{font-size:clamp(22px,2.6vw,30px)!important;line-height:1.3!important;font-weight:700;margin:0!important}
.sk2 .kb-sec-title p{font-size:clamp(14px,1.5vw,17px)!important;color:rgba(255,255,255,.82);margin:6px 0 0!important}
.sk2 .kb-sec-title[data-sk-no]::before{content:attr(data-sk-no);position:absolute;left:max(16px,calc(50% - 554px));top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:2px solid var(--theme);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--lite)}
/* ── 內容區：淺色紙面、圖文、四圖、卡片 ── */
.sk2 .kb-sec-content,.sk2 .kb-sec-gallery,.sk2 .kb-sec-card,.sk2 .kb-sec-qa,.sk2 .kb-sec-steps{background:var(--paper)!important;color:var(--ink)}
.sk2 .kb-sec-content{padding:34px 0 10px!important}.sk2 .kb-sec-gallery{padding:20px 0 30px}.sk2 .kb-sec-card{padding:34px 0 36px;margin:0!important}
.sk2 .kb-sec-content .container,.sk2 .kb-sec-gallery .container-fluid,.sk2 .kb-sec-card .container,.sk2 .kb-sec-card .container-fluid,.sk2 .kb-sec-qa .container,.sk2 .kb-sec-steps .container{max-width:none;width:var(--A);padding:0}
.sk2 .kb-sec-content .row{align-items:center;column-gap:0}.sk2 .kb-sec-content.sk-rev .row{flex-direction:row-reverse}
.sk2 .kb-sec-content img{border-radius:14px!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important;width:100%;height:auto}
.sk2 .kb-sec-content .text-wrapper h3{font-size:clamp(20px,2.2vw,26px)!important;line-height:1.35!important;padding-left:12px;border-left:4px solid var(--theme);color:var(--ink)!important;margin:0 0 12px!important}
.sk2 .kb-sec-content .text-wrapper p{font-size:16px!important;line-height:1.85!important;color:#3a3a40!important}
.sk2 .kb-sec-gallery .mbr-gallery{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0!important}
.sk2 .kb-sec-gallery .mbr-gallery>.item{max-width:none!important;width:auto!important;flex:none!important;padding:0!important;background:var(--deep);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.sk2 .kb-sec-gallery .item-wrapper{margin:0!important}.sk2 .kb-sec-gallery img{width:100%;aspect-ratio:1050/590;object-fit:cover;display:block}
.sk2 .kb-sec-gallery .mbr-item-subtitle{background:transparent!important;background-image:none!important;color:#fff!important;font-size:14px!important;line-height:1.5!important;margin:0!important;padding:10px 12px 12px;border-top:1px solid var(--line)}
.sk2 .kb-sec-card .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0!important}
.sk2 .kb-sec-card .row:has(.item-title strong:not(:empty)){grid-template-columns:repeat(2,minmax(0,1fr))}
.sk2 .kb-sec-card .row>.item{max-width:none!important;width:auto!important;flex:none!important;padding:0!important}
.sk2 .kb-sec-card .item-wrapper{background:var(--deep)!important;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:#fff;box-shadow:none!important;margin:0!important;height:100%}
.sk2 .kb-sec-card .row:has(.item-title strong:not(:empty)) .item-wrapper{display:grid;grid-template-columns:230px 1fr;height:230px}
.sk2 .kb-sec-card .item-img{padding:0!important}.sk2 .kb-sec-card .item-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;display:block}
.sk2 .kb-sec-card .item-content{padding:0!important;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.sk2 .kb-sec-card .item-content h5{flex:none;margin:0!important;padding:16px 18px 6px;font-size:18px!important;color:#fff!important}
.sk2 .kb-sec-card .item-content p{flex:1;min-height:0;overflow-y:auto;padding:0 14px 14px 18px;margin:0!important;font-size:14.5px!important;line-height:1.75!important;color:rgba(255,255,255,.88)!important;scrollbar-width:thin;scrollbar-color:var(--theme) transparent}
.sk2 .kb-sec-card .row:not(:has(.item-title strong:not(:empty))) .item-content{display:none}
/* FAQ */
.sk2 .kb-sec-qa{padding:30px 0 40px!important}.sk2 .kb-sec-qa .col-md-10{max-width:860px;margin:0 auto;flex:0 0 100%}
.sk2 .kb-sec-qa .card{background:var(--deep)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:#fff;overflow:hidden;margin-bottom:10px!important;box-shadow:none!important}
.sk2 .kb-sec-qa .card-header{background:transparent!important;border:0!important;padding:0!important}
.sk2 .kb-sec-qa .panel-title{display:flex!important;align-items:center;gap:12px;padding:14px 16px!important;color:#fff!important;font-size:17px;font-weight:600;text-decoration:none}
.sk2 .kb-sec-qa .panel-title h6{flex:1;margin:0!important;font-size:17px!important;line-height:1.45!important}
.sk2 .kb-sec-qa .panel-title .sk-n{flex:0 0 30px;height:30px;border-radius:50%;border:1.5px solid var(--theme);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--lite)}
.sk2 .kb-sec-qa .panel-title .sign{color:var(--lite)}
.sk2 .kb-sec-qa .card:has(.panel-collapse.show){border-left:4px solid var(--theme)!important}
.sk2 .kb-sec-qa .panel-body{background:var(--paper)!important;color:#2f2f35!important;padding:14px 18px 16px 58px!important}.sk2 .kb-sec-qa .panel-text{margin:0!important;font-size:15.5px!important;line-height:1.85!important;color:#2f2f35!important}
.sk2 .kb-sec-qa .card.sk-more{display:none}.sk2 .kb-sec-qa.sk-all .card.sk-more{display:block}
.sk2 .sk-morebtn{display:block;margin:6px auto 0;cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--theme);border-radius:99px;padding:9px 22px;font-size:15px;font-weight:600}
/* steps */
.sk2 .kb-sec-steps{padding:24px 0 30px}.sk2 .kb-sec-steps .item{background:var(--deep);border:1px solid var(--line);border-radius:14px;color:#fff;height:100%}.sk2 .kb-sec-steps .mbr-black{color:#fff!important}
/* 來電橫幅暫時隱藏（Neo 2026-11-02） */
.sk2 article:has(.kb-sec-banner){display:none!important}
/* ── 側邊 MENU／QR 面板 ── */
.sk2 #kb-sectnav{background:var(--deep)!important;border:1px solid var(--line);border-left:0;border-radius:0 16px 16px 0;box-shadow:4px 6px 20px rgba(0,0,0,.4);padding:8px 0;top:96px}
.sk2 #kb-sectnav ul li a{color:rgba(255,255,255,.78);font-size:14px;padding:7px 14px;background:transparent!important;border-left:3px solid transparent;border-radius:0;margin:0}
.sk2 #kb-sectnav ul li a:hover{background:color-mix(in oklab,var(--theme) 22%,transparent)!important;color:#fff}
.sk2 #kb-sectnav ul li a.is-current{background:color-mix(in oklab,var(--theme) 32%,transparent)!important;color:#fff;font-weight:700}

.sk2 #kb-qrpanel{background:var(--deep)!important;border:1px solid var(--line);border-right:0;border-radius:16px 0 0 16px;box-shadow:-4px 6px 20px rgba(0,0,0,.4);top:96px;padding:12px 12px 6px}
.sk2 #kb-qrpanel canvas,.sk2 #kb-qrpanel img{background:#fff;border-radius:8px;padding:5px}.sk2 #kb-qrpanel p,.sk2 #kb-qrpanel span{color:#fff}
/* ── 頁尾 ── */
.sk2 .kb-footer{background:var(--deep)!important;background-image:none!important;border-top:1px solid var(--line);padding:36px 0 120px}
.sk2 .kb-footer .container{max-width:none;width:var(--A);padding:0}.sk2 .kb-footer a{color:#fff;border-bottom:1px solid var(--line);text-decoration:none}
.sk2 .kb-footer h5{color:var(--lite)}
@media(max-width:991px){.sk2 #kb-sectnav,.sk2 #kb-sectnav-toggle,.sk2 #kb-qrpanel,.sk2 #kb-qrpanel-toggle{display:none!important}.sk2 .kb-sec-gallery .mbr-gallery{grid-template-columns:1fr 1fr}.sk2 .kb-sec-card .row{grid-template-columns:1fr 1fr!important}
}
@media(max-width:767px){.sk2 .kb-sec-title[data-sk-no]::before{left:16px;width:34px;height:34px;font-size:15px}.sk2 .kb-sec-title{padding-left:60px;padding-right:14px;text-align:left}.sk2 .kb-sec-title .card-box{text-align:left!important}
.sk2 .kb-sec-card .row{grid-template-columns:1fr!important}.sk2 .kb-sec-card .row:has(.item-title strong:not(:empty)) .item-wrapper{grid-template-columns:36% 1fr;height:auto}.sk2 .kb-sec-card .item-content p{max-height:150px;flex:none}

.sk2 .kb-sec-header h2.display-1{font-size:26px!important}.sk2 .kb-sec-header h2.display-2{font-size:20px!important}.sk2 .kb-sec-header p.display-5{font-size:14.5px!important}.sk2 .kb-sec-qa .panel-body{padding:12px 14px 14px!important}}
/* 修正一：頂部橫幅高度容得下三行 Logo；動畫不讓內容半透明 */
.sk2 #kb-header .navbar{align-items:center}.sk2 #kb-header .navbar-brand{margin:0;padding:0;display:flex;align-items:center}.sk2 #kb-header .navbar-brand>a{display:block}
.sk2 .kb-logo--www{position:relative!important;top:0!important}
.sk2 .wow{visibility:visible!important;animation:none!important;opacity:1!important}


/* 新價格卡（.kbc）接入：首屏＋底部列；舊底部預約卡隱藏，首屏遮罩改純色 */
.sk2 #kb-actionbar.kb-actionbar--offer{display:none!important}
.sk2 .kb-sec-header:has(.kbc)::before{background:rgba(10,10,13,.42)!important}
.sk2 .kbc{background:linear-gradient(135deg,rgba(255,255,255,var(--glass-hi-a,.2)),rgba(255,255,255,var(--glass-hi-b,.1))),color-mix(in srgb,var(--deep) calc(var(--glass-dark,.5)*100% + 20%),transparent)}
.sk2 .kb-body{padding-top:0}
.sk2 .sk-rsv a{font-size:16px}
.sk2 .kb-sec-qa .panel-title h6,.sk2 .kb-sec-qa .panel-title h6 strong,.sk2 .kb-sec-qa .panel-title a{color:#fff!important}
.sk2 .kb-sec-qa .panel-body,.sk2 .kb-sec-qa .panel-body *{color:#2f2f35!important}

.sk2 body.sk-cta #kb-actionbar{display:none!important}

/* ── 服務總覽：課程卡（圖在上、面板在下、價格底板）；部位複選列 ── */
.sk2 .kb-sec-card .kb-services{--theme:#8a8a94;--deep:color-mix(in oklab,var(--theme) 52%,#101015);--plate:color-mix(in oklab,var(--theme) 30%,#0c0c10);padding:0!important;max-width:none!important}
.sk2 .kb-sec-card:has(.kb-services) .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0!important}
.sk2 .kb-sec-card:has(.kb-services){background:var(--deep2)!important;padding:24px 0 40px}
.sk2 .kb-services .item-wrapper{display:flex;flex-direction:column;background:var(--deep)!important;border:1px solid color-mix(in oklab,var(--theme) 85%,#fff);border-radius:14px;overflow:hidden;height:100%;box-shadow:0 6px 18px rgba(0,0,0,.35)!important;margin:0!important}
.sk2 .kb-services .item-img{position:static!important}.sk2 .kb-services .item-img img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sk2 .kb-services .item-img a::after,.sk2 .kb-services .item-wrapper::after,.sk2 .kb-services .item-wrapper::before{display:none!important}
.sk2 .kb-services .sContent{position:static!important;background:transparent!important;padding:12px 14px 14px!important;border-top:1px solid color-mix(in oklab,var(--theme) 85%,#fff);color:#fff;flex:1}
.sk2 .kb-services .sk-t{margin:0;font-size:19px;line-height:1.3;font-weight:700;color:#fff}
.sk2 .kb-services .sk-s{margin:4px 0 8px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sk2 .kb-services .sk-pt{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}.sk2 .kb-services .sk-pt i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:99px;background:color-mix(in oklab,var(--theme) 30%,#000);border:1px solid color-mix(in oklab,var(--theme) 70%,#fff)}
.sk2 .kb-services .sk-pr{display:flex;align-items:center;gap:10px;background:var(--plate);border-radius:10px;padding:8px 10px}
.sk2 .kb-services .tg{font-size:11px;font-weight:700;background:var(--pay);color:#fff;padding:2px 7px;border-radius:5px;white-space:nowrap}
.sk2 .kb-services .sk-pr b{font-size:24px;line-height:1;font-weight:800;color:#fff}.sk2 .kb-services .sk-pr b small{font-size:12px;margin-right:2px}
.sk2 .kb-services .cl{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;font-size:12px;color:rgba(255,255,255,.7)}.sk2 .kb-services .cl s{opacity:.8}.sk2 .kb-services .cl em{font-style:normal}
.sk2 .sk-parts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;padding:18px 16px 4px;background:var(--deep2)}.sk2 .sk-parts .pl{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.1em;margin-right:4px}
.sk2 .sk-parts button{cursor:pointer;display:flex;gap:6px;align-items:baseline;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:transparent;color:rgba(255,255,255,.85);font-size:14px}.sk2 .sk-parts button small{font-size:11px;opacity:.65}
.sk2 .sk-parts button.on{background:color-mix(in oklab,var(--theme) 38%,transparent);border-color:var(--theme);color:#fff;font-weight:700}.sk2 .sk-parts .rs{margin-left:8px;font-size:13px;color:rgba(255,255,255,.65)}
@media(max-width:991px){.sk2 .kb-sec-card:has(.kb-services) .row{grid-template-columns:1fr 1fr!important}}
@media(max-width:767px){.sk2 .kb-sec-card:has(.kb-services) .row{grid-template-columns:1fr!important}.sk2 .sk-parts{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.sk2 .sk-parts button,.sk2 .sk-parts .pl,.sk2 .sk-parts .rs{flex:none;white-space:nowrap}}
/* BUG-EMVGQ8／PZFN3E：相簿說明文字——原站的說明是絕對定位疊在圖上（top:150px、高 30px），會被切、會多一行；改成圖下方的正常區塊 */
.sk2 .kb-sec-gallery .mbr-gallery .item-wrapper{box-shadow:none!important;border-radius:0;position:relative}
.sk2 .kb-sec-gallery .mbr-item-subtitle{position:static!important;top:auto!important;left:auto!important;right:auto!important;height:auto!important;border-radius:0!important;display:block!important;text-align:left!important;transform:none!important}
.sk2 .kb-sec-gallery .mbr-gallery>.item h6{margin:0!important}

/* 頁尾下方的「再往下滑」區，與預約面板的安心交易徽章 */
.sk2 .sk-pull{background:var(--deep);min-height:70vh;display:flex;justify-content:center;padding-top:34px;color:var(--lite)}
.sk2 .sk-trust{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:4px 10px 4px 7px;border-radius:99px;background:rgba(60,207,122,.14);border:1px solid rgba(60,207,122,.55);color:#1f9d57;font-size:12px;font-weight:700;white-space:nowrap}
.sk2 .sk-trust b{font-weight:700;letter-spacing:.04em}

/* 第四輪（BUG-DRYC2D／N4LNPB／M96GQ3／F74EAD／GLZG6G／GQ7FHV） */
.sk2 .mbr-section,.sk2 .mbr-section.pb-5{padding-bottom:0!important}
.sk2 .kb-sec-gallery .mbr-gallery{align-items:start}
.sk2 .kb-sec-gallery .mbr-gallery>.item{height:auto!important;align-self:start}
.sk2 .kb-sec-gallery .mbr-item-subtitle{flex:none!important;min-height:0!important}
.sk2 .kb-sec-header,.sk2 .kb-sec-header h2,.sk2 .kb-sec-header p,.sk2 .kb-sec-header strong{color:#fff!important}
.sk2 .kb-sec-header::before{background:rgba(10,10,13,.5)!important}
.sk2 body.sk-nobar #kb-actionbar{display:none!important}
.sk2 .sk-rsv a{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 18px}
.sk2 .sk-rsv .rb{display:flex;align-items:center;gap:6px;padding:4px 9px;background:rgba(255,255,255,.18);border-radius:99px}.sk2 .sk-rsv .rb svg{height:12px;width:auto;display:block;color:#fff}
@media(max-width:1500px){.sk2 .sk-rsv .rb{display:none}.sk2 .sk-rsv a{padding:8px 18px}}
/* QR 面板：照工作台——白底 QR 加色環、說明白字粗體置中 */
.sk2 #kb-qrpanel [data-qr]{text-align:center;margin-bottom:12px}
.sk2 #kb-qrpanel [data-qr] canvas,.sk2 #kb-qrpanel [data-qr] img{box-shadow:0 0 0 2px var(--theme)}
.sk2 #kb-qrpanel [data-qr]:nth-child(2) canvas,.sk2 #kb-qrpanel [data-qr]:nth-child(2) img{box-shadow:0 0 0 2px #4267b2}
.sk2 #kb-qrpanel [data-qr]:nth-child(3) canvas,.sk2 #kb-qrpanel [data-qr]:nth-child(3) img{box-shadow:0 0 0 2px #22b315}
.sk2 #kb-qrpanel p{color:#fff!important;font-size:12px!important;font-weight:600;text-align:center;margin:5px 0 0!important}
.sk2 #kb-qrpanel p a,.sk2 #kb-qrpanel p span{color:#fff!important}
.sk2 #kb-qrpanel-toggle{font-weight:700;letter-spacing:.05em}
.sk2 .sk-rsv .rb:empty{display:none}
.sk2 .kb-order-sheet,.sk2 .kb-order-scrim{display:none!important}


/* LINE 浮動鈕（立即通訊）：Neo 2026-11-02 BUG-VLDKNJ 已不存在——隱藏 */
.sk2 #kb-line-fab{display:none!important}
/* ── 第五輪：Logo 用 px（頁面根字級是 12px，rem 會縮水）、QR 標籤與 MENU 同一套標籤造型、價格卡付款列右邊框不被切 ── */
.sk2 .kb-logo--www .en{font-size:24.8px!important;line-height:1.2}
.sk2 .kb-logo--www .sub{font-size:14.4px!important;line-height:1.3}
.sk2 .kb-logo--www .tw{font-size:32px!important;line-height:1.15}
.sk2 .kb-logo--www .lpg{width:170px!important;height:70px!important}
@media(max-width:767px){.sk2 .kb-logo--www .en{font-size:14.4px!important;letter-spacing:4px!important}.sk2 .kb-logo--www .sub{font-size:8.3px!important;letter-spacing:1.33px!important}.sk2 .kb-logo--www .tw{font-size:18px!important;letter-spacing:1.4px!important}}
.sk2 .kbc .kbc__pay{padding-right:.5em}.sk2 .kbc .kbc__tags{padding-right:.2em}.sk2 .kbc .kb-cta-only{padding-right:.8em!important}
.sk2 #kb-sectnav-toggle,.sk2 #kb-qrpanel-toggle{writing-mode:vertical-rl;letter-spacing:.3em;font-size:12px!important;font-weight:700;color:#fff!important;background:var(--deep)!important;border:1px solid var(--line)!important;height:auto!important;width:auto!important;padding:14px 7px!important;line-height:1.2!important;text-align:center}
.sk2 #kb-sectnav-toggle{border-left:0!important;border-radius:0 10px 10px 0!important}
.sk2 #kb-qrpanel-toggle{border-right:0!important;border-radius:10px 0 0 10px!important;right:0!important}
.sk2 #kb-qrpanel-toggle br{display:none}
/* Logo 變高後頂部橫幅跟著加高；首屏扣掉的高度同步 */
.sk2 #kb-header .navbar{min-height:102px!important;padding:8px 0!important}
.sk2 .kb-sec-header{min-height:calc(100vh - 102px)!important}
.sk2 #kb-sectnav,.sk2 #kb-qrpanel{top:112px!important}
.sk2 #kb-sectnav-toggle,.sk2 #kb-qrpanel-toggle{top:122px!important}
@media(max-width:767px){.sk2 #kb-header .navbar{min-height:62px!important}.sk2 .kb-sec-header{min-height:calc(100vh - 62px)!important}}
.sk2 #kb-sectnav-toggle,.sk2 #kb-qrpanel-toggle{padding-bottom:38px!important}
.sk2 #kb-sectnav-toggle::after,.sk2 #kb-qrpanel-toggle::after{top:auto!important;bottom:10px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;writing-mode:horizontal-tb;font-size:18px;line-height:1;letter-spacing:0}
.sk2 #kb-qrpanel-toggle{position:fixed}.sk2 #kb-qrpanel-toggle::after{position:absolute}
/* 手機漢堡選單：展開後深色面板、項目大字、聯絡資訊在下拉內展開 */
@media(max-width:991px){.sk2 #kb-header .navbar-toggler{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.sk2 #kb-nav{background:var(--deep);border:1px solid var(--line);border-radius:14px;margin-top:8px;padding:10px;z-index:1100}
.sk2 #kb-nav .navbar-nav{align-items:stretch}.sk2 #kb-nav .nav-link{padding:12px 14px!important;border-radius:10px;font-size:17px}
.sk2 #kb-nav .dropdown-menu{position:static;float:none;border:0;background:transparent;box-shadow:none;padding:0 0 0 14px}
.sk2 .sk-rsv{margin:8px 0 0}.sk2 .sk-rsv a{display:flex;justify-content:center;padding:12px 18px;font-size:17px}}
@media(max-width:991px){
.sk2 #kb-header .navbar-toggler{background:var(--deep)!important;margin-left:auto}
.sk2 #kb-header .navbar-toggler-icon{filter:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")!important}
.sk2 #kb-nav{position:fixed!important;left:12px!important;right:12px!important;top:68px!important;margin:0!important;width:auto!important;box-sizing:border-box;max-height:calc(100vh - 84px);overflow:auto}
.sk2 #kb-nav .navbar-nav{margin:0!important;width:100%}.sk2 #kb-nav .nav-item{width:100%}.sk2 .sk-rsv a{width:100%;box-sizing:border-box}
.sk2 #kb-header .navbar>.container{flex-wrap:nowrap}
}

/* 手機／平板書籤列（#kb-sectnav-bar）：同側邊 MENU 的深色主題、目前項主題色 */
@media(max-width:991px){.sk2 #kb-sectnav-bar{background:var(--deep)!important;border-top:1px solid var(--line);box-shadow:none}
.sk2 #kb-sectnav-bar .btn{background:transparent!important;border:1px solid var(--line)!important;color:rgba(255,255,255,.85)!important;border-radius:99px;font-size:14px;padding:6px 14px}
.sk2 #kb-sectnav-bar .btn.is-current{background:color-mix(in oklab,var(--theme) 40%,transparent)!important;border-color:var(--theme)!important;color:#fff!important;font-weight:700}}


/* QBBS 面板（新風格）——與 CTA 同一種語言：暗色毛玻璃、斜體、三塊（方案｜資料｜付款）、一個焦點金額、全面板唯一的紅＝主按鈕。
   手機＝底部彈出面板（單欄、主按鈕固定在底）；桌機＝置中視窗（左：訂單摘要票卡，右：步驟內容）。同一份標記，只換排法。 */
.sk2{--q-d1:#14141a;--q-d2:#26262d;--q-d3:#31313a;--q-bg:color-mix(in srgb, var(--q-d1) 92%, transparent);--q-line:rgba(255, 255, 255, 0.35);--q-red:#d63a3a;--q-chip:#ff5656;--q-txt:#fff;--q-dim:rgba(255, 255, 255, 0.72)}
.q-scrim{position:fixed;inset:0;z-index:2000;background:rgba(0, 0, 0, 0.55);opacity:0;pointer-events:none;transition:opacity 0.3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.q-open .q-scrim{opacity:1;pointer-events:auto}
.q-sheet{position:fixed;z-index:2001;color:var(--q-txt);font-family:-apple-system, "system-ui", "Segoe UI", Roboto, "PingFang TC", "Noto Sans", sans-serif;background:linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)), var(--q-bg);-webkit-backdrop-filter:blur(20px) saturate(2);backdrop-filter:blur(20px) saturate(2);display:flex;flex-direction:column;transition:transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease}
.q-sheet *{box-sizing:border-box}
.q-sheet button, .q-sheet input, .q-sheet select{font:inherit;font-style:inherit;color:inherit}

/* ===== 手機：底部彈出 ===== */
@media (max-width: 767.98px) {
    .q-sheet{left:0;right:0;bottom:0;border-bottom:0;transform:translateY(105%)}
    .q-open .q-sheet{transform:none}
    
    .q-grab{width:44px;height:5px;border-radius:3px;background:rgba(255, 255, 255, 0.5);margin:8px auto 0}
}
/* ===== 桌機：置中視窗，左摘要右步驟 ===== */
@media (min-width: 768px) {
    .q-sheet{left:50%;top:50%;width:min(980px, 94vw);transform:translate(-50%, -46%) scale(0.96);opacity:0;pointer-events:none}
    .q-open .q-sheet{transform:translate(-50%, -50%);opacity:1;pointer-events:auto}
    .q-grab{display:none}
    .q-main{display:grid;grid-template-columns:340px 1fr;min-height:0;flex:1}
}

/* 頂部：課程名＋關閉＋進度（三段膠囊，現在這一段是紅色） */
.q-head{display:flex;align-items:center;gap:12px}
.q-title{flex:1;line-height:1.2}
.q-title small{display:block;font-size:12px;margin-top:2px}
.q-x{font-size:16px}
.q-prog{display:flex}
.q-prog button{flex:1;cursor:pointer}
.q-prog button.on{border-color:var(--q-red)}



/* 桌機左側：訂單摘要票卡（價格塊／加 1 元塊 的縮影，隨選擇即時更新） */
.q-aside{display:flex;flex-direction:column;gap:12px}
.q-ticket{overflow:hidden}

.q-ticket .t1 small{font-size:13px}
.q-ticket .amt{line-height:1.1;text-shadow:0 2px 12px rgba(0, 0, 0, 0.45)}
.q-ticket .amt i{font-size:15px;font-weight:600;margin-right:4px}
.q-ticket s{opacity:0.75;font-size:13px}
.q-ticket .t2{display:flex;align-items:center;gap:8px;font-size:14px}
.q-ticket .t3{display:flex;justify-content:space-between;align-items:baseline}
.q-ticket .t3 b{font-size:22px}
.q-chip{color:#fff;border-radius:8px;font-weight:800}
.q-aside .q-meta{font-size:12px;line-height:1.6;font-style:normal}

/* 步驟內容 */
.q-body{flex:1;overflow:auto;min-height:0}
.q-pane{display:none;animation:qin 0.3s ease}
.q-pane.on{display:block}
@keyframes qin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }


.q-priceline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.q-priceline .amt{font-size:38px;line-height:1}
.q-priceline small{font-size:13px;opacity:0.85}

/* +1 元加購：大開關卡（第二重點，預設開啟） */
.q-add{display:flex;align-items:center;gap:12px;cursor:pointer}
.q-add input{display:none}
.q-sw{width:46px;height:26px;border-radius:13px;background:rgba(255, 255, 255, 0.3);position:relative;flex:none;transition:background 0.2s}
.q-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s}

.q-add input:checked ~ .q-sw::after{transform:translateX(20px)}
.q-add .tx{flex:1;font-weight:700;line-height:1.3}
.q-add .tx b{font-size:17px}
.q-add .tx small{display:block;font-size:12px}

/* 資料表單 */
.q-f{display:grid}
.q-f label{font-size:13px;gap:4px}

.q-f input, .q-f select{border:1px solid var(--q-line);padding:0 12px;font-size:16px;outline:none}
.q-f input:focus, .q-f select:focus{border-color:#fff;background:rgba(255, 255, 255, 0.16)}
.q-times{display:flex;gap:6px;flex-wrap:wrap}
.q-times button{padding:8px 12px;border-radius:99px;font-size:13px;cursor:pointer}
.q-times button.on{border-color:#fff}
.q-err{font-size:12px;min-height:0}

/* 付款方式：大磚 */
.q-pm{display:grid;gap:8px}
.q-pm button{text-align:left;cursor:pointer;display:grid;gap:6px;align-content:space-between}



.q-pm .lg{display:flex;align-items:center}
.q-pm .lg svg{height:14px;width:auto}
.q-pm .lg .b-visa{height:10px}
.q-sub{margin-top:8px;padding:10px 12px;display:none}
.q-sub.on{display:block}
.q-terms{margin-top:12px;font-size:12px;display:flex;gap:8px;align-items:flex-start;font-style:normal}
.q-terms input{width:18px;height:18px;margin-top:1px}

/* 底部主按鈕列：全面板唯一的紅；金額即時更新 */
.q-foot{grid-template-columns:auto 1fr}
.q-total{line-height:1.15}
.q-total small{display:block;font-size:11px;opacity:0.8;font-weight:600}
.q-total b{font-size:24px;font-weight:800}
.q-go{border:0;background:var(--q-red);color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(214, 58, 58, 0.5)}
.q-go:active{transform:translateY(1px)}
.q-back{grid-column:1 / -1;background:none;border:0;font-size:13px;opacity:0.8;cursor:pointer;text-align:left;padding:0}
.q-ok{text-align:center;padding:40px 10px;font-style:normal}
.q-ok b{font-size:22px;display:block;margin-bottom:8px}

/* 手機隱藏左側摘要（放在後面，避免被 .q-aside 的 display:flex 蓋掉）；.q-main 在手機是單欄 */
@media (max-width: 767.98px) {
    .q-aside{display:none!important}
    .q-main{display:flex;flex-direction:column;flex:1;min-height:0}
}

@media (min-width: 768px) {
    .q-main{grid-template-rows:minmax(0, 1fr);overflow:hidden}
    .q-aside, .q-body{min-height:0;overflow:auto}
    .q-foot{grid-template-columns:340px 1fr}
    .q-foot .q-total{padding-left:18px}
    .q-foot .q-go{margin-right:18px;justify-self:end}
    .q-foot .q-back{grid-column:2;padding-left:4px}
}

.q-f label{display:block}
.q-f label > input, .q-f label > select, .q-f label > .q-times{display:flex;width:100%;margin-top:4px}
.q-f label > input{display:block}
.q-f .q-err{display:block}

/* ===== 柔化版（BUG-EYZ9HQ）：時尚、科技感，但不要那麼硬 =====
   1) 斜體只留給「關鍵數字」（金額、+1 元），其餘文字回正體
   2) 紅色只留給絕對關鍵資訊：「送出」主按鈕與「+1 元」標籤；進度、票卡總額列、加購框、必填星號都不用紅
   3) 柔化：更大的圓角、更淡的外框（不再亮白粗線）、字重 800→600、更多留白、膠囊式分段、柔和陰影
   4) 關閉鈕：細線 X，無圓框 */
.q-sheet{font-style:normal;border:1px solid rgba(255, 255, 255, 0.22);box-shadow:0 20px 60px rgba(0, 0, 0, 0.55)}
@media (min-width: 768px) { .q-sheet{border-radius:28px} }
@media (max-width: 767.98px) { .q-sheet{border-radius:28px 28px 0 0} }
.q-sheet em, .q-sheet i{font-style:normal}
.q-ticket .amt, .q-priceline .amt, .q-chip, .q-add .tx b, .q-total b, .q-go{font-style:italic}   /* 斜體只留給金額與 +1 元 */

.q-head{padding:20px 26px 10px}
.q-title{font-size:16px;font-weight:600;letter-spacing:0.02em}
.q-title small{font-weight:500;opacity:0.65}
.q-x{width:34px;height:34px;border:0;background:transparent;border-radius:50%;opacity:0.7;display:grid;place-items:center;cursor:pointer;transition:opacity 0.2s, background 0.2s}
.q-x:hover{opacity:1;background:rgba(255, 255, 255, 0.1)}

/* 步驟：膠囊式分段，可隨時點選；現在這一段是白底深字（不是紅）；完成的有勾；有問題的有小點 */
.q-prog{padding:4px 26px 14px;gap:4px}
.q-prog button{border:0;border-radius:99px;background:rgba(255, 255, 255, 0.08);font-weight:500;font-size:13px;padding:9px 4px;opacity:0.75;transition:background 0.2s, color 0.2s, opacity 0.2s;position:relative}
.q-prog button.on{background:#fff;color:var(--q-d1);opacity:1;font-weight:700}
.q-prog button.done{opacity:1}
.q-prog button.done::before{content:"✓ "}
.q-prog button.bad::after{content:"";position:absolute;top:6px;right:12px;width:7px;height:7px;border-radius:50%;background:#ffb340}

.q-aside{padding:8px 20px 20px 26px;border-right:1px solid rgba(255, 255, 255, 0.12)}
.q-body{padding:4px 26px 20px}
.q-ticket{border:1px solid rgba(255, 255, 255, 0.2);border-radius:22px;background:rgba(255, 255, 255, 0.05)}

.q-ticket .t1 small{font-weight:500;opacity:0.7}
.q-ticket .amt{font-weight:700;font-size:42px}
.q-ticket .t2{background:transparent;border-top:1px solid rgba(255, 255, 255, 0.15);padding:12px 18px;font-weight:500}
.q-ticket .t3{background:rgba(255, 255, 255, 0.1);border-top:1px solid rgba(255, 255, 255, 0.15);padding:14px 18px;font-weight:500}
.q-ticket .t3 b{font-weight:700}
.q-chip{background:var(--q-chip)}
.q-aside .q-meta{opacity:0.6}

.q-h{font-weight:600;font-size:14px;margin:20px 0 10px;opacity:0.85;letter-spacing:0.04em}
.q-card{border:1px solid rgba(255, 255, 255, 0.2);border-radius:20px;background:rgba(255, 255, 255, 0.05);padding:18px}
.q-priceline .amt{font-weight:700}
.q-add{border:1px solid rgba(255, 255, 255, 0.35);background:rgba(255, 255, 255, 0.07);border-radius:20px;padding:16px 18px}
.q-add input:checked ~ .q-sw{background:#fff}
.q-add input:checked ~ .q-sw::after{background:var(--q-d1)}
.q-add .tx b{font-weight:700}
.q-add .tx small{font-weight:500;opacity:0.7}

.q-f{gap:14px}
.q-f label{font-weight:500;opacity:0.9}
.q-f label i{color:inherit;opacity:0.6}
.q-f input, .q-f select{border-radius:14px;border-color:rgba(255, 255, 255, 0.22);height:48px;background:rgba(255, 255, 255, 0.07)}
.q-f input.shake, .q-pm.shake, .q-terms.shake{animation:qshake 0.4s;border-color:#ffb340}
@keyframes qshake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.q-err{color:#ffb340}
.q-times button{border:0;background:rgba(255, 255, 255, 0.1);font-weight:500}
.q-times button.on{background:#fff;color:var(--q-d1)}

.q-pm button{border:1px solid rgba(255, 255, 255, 0.2);border-radius:20px;background:rgba(255, 255, 255, 0.05);padding:16px}


.q-pm .sb{font-weight:400;opacity:0.65}
.q-sub{border:1px dashed rgba(255, 255, 255, 0.3);border-radius:16px}
.q-terms{opacity:0.85}


.q-foot{border-top:1px solid rgba(255, 255, 255, 0.12);background:transparent;padding:14px 26px 22px;justify-content:space-between}
.q-foot .q-total small{font-weight:500;opacity:0.65}
.q-foot .q-total b{font-weight:700}
.q-go{border-radius:16px;font-weight:700;height:52px}
@media (max-width: 767.98px) { .q-go{flex:1} }
@media (min-width: 768px) {
    .q-foot{display:flex;padding-left:26px}
    .q-foot .q-go{max-width:none;width:auto;margin:0}
}

/* ===== BUG-QS6VGW／9S4LKY／ST93ZY／NY6HYX／XW9FRD／735ANL ===== */
/* 方案三選一：被選中＝紅色（Neo 同意選中用紅） */
.q-plans{display:grid}
.q-plan{text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid rgba(255, 255, 255, 0.2);border-radius:20px;background:rgba(255, 255, 255, 0.05);cursor:pointer;transition:border-color 0.2s, background 0.2s}
.q-plan .pn{font-weight:600}
.q-plan .pa{font-size:24px;font-style:italic;font-weight:700}
.q-plan .ps{grid-column:1 / -1;font-size:12px;opacity:0.7}
.q-plan.on{border-color:var(--q-red);background:rgba(214, 58, 58, 0.18);box-shadow:0 0 0 1px var(--q-red) inset}
.q-plan.on .ps{opacity:0.9}
/* 資料：性別、即時驗證成功用綠勾、二次確認說明 */
.q-err.okm{color:#6fe3a0}
.q-note{display:block;margin-top:6px;font-size:12px;opacity:0.7;font-weight:400;line-height:1.5}
/* 付款方式：選中用紅；核心文字（方式名稱）放大兩倍；標誌彩色，白底圓角膠囊 */
.q-pm{grid-template-columns:1fr}
@media (min-width: 768px) { .q-pm{grid-template-columns:1fr 1fr} }
.q-pm button{min-height:112px}
.q-pm .nm{font-size:26px;font-weight:700;line-height:1.15}
.q-pm .sb{font-size:13px}
.q-pm button.on{border-color:var(--q-red);background:rgba(214, 58, 58, 0.18);box-shadow:0 0 0 1px var(--q-red) inset}
.q-pm .lg{height:auto;gap:6px;flex-wrap:wrap}
.lgc{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:4px 8px;height:26px}
.lgc svg{height:16px;width:auto}
.lgc .b-visa{height:11px}
.lgc .b-mastercard{height:18px}
.q-sub{font-size:14px;line-height:1.7}

/* 修正：按鈕文字與 +1 元標籤不折行 */
.q-go{white-space:nowrap;padding:0 16px;min-width:0;font-size:17px}
@media (min-width: 768px) { .q-go{padding:0 30px} }

.q-plan .pn .q-chip{white-space:nowrap;flex:none}
.q-foot .q-total b{font-size:22px;white-space:nowrap}
@media (max-width: 767.98px) { .q-foot{gap:10px} .q-foot .q-total small{white-space:nowrap} }
.q-plan .pa{white-space:nowrap}
@media (max-width: 767.98px) { .q-plan .pn{font-size:15px;gap:4px}  }

/* BUG-YW2RFF：順序＝2,501（預設）→ 2,500 → 預約訂金；方案之間間距加大，預約訂金卡有餘裕放尾款說明 */
.q-plans{gap:16px}
.q-plan{padding:20px 22px;gap:6px 14px}
.q-plan[data-pl="deposit"]{padding-bottom:22px}
.q-plan .ps{line-height:1.6}

/* BUG-ESR9EA：預約訂金卡——上方多 5px、寬度縮成 50%、靠右 */

@media (max-width: 767.98px) {  }   /* 手機太窄，放寬到 70% 才放得下金額 */
.q-plan[data-pl="deposit"] .pn{font-size:14px}
.q-plan[data-pl="deposit"] .pa{font-size:20px}

/* BUG-L3V9PW：性別與姓名同一排（姓名在左、性別在右）；只有女／男 */
.q-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.q-row .q-l-gender .q-times{margin-top:4px;height:48px;align-items:center;flex-wrap:nowrap}
.q-row .q-l-gender .q-times button{height:48px;padding:0 18px}
.q-row .q-l-name input{display:block;width:100%}

/* BUG-MNZBK3：同意條款放在底部列，紅色按鈕左側；勾選框加大 */
.q-foot{display:flex;align-items:center;gap:16px}
.q-foot .q-terms{flex:1;margin:0;font-size:12px;line-height:1.5;max-width:420px;cursor:pointer}
.q-foot .q-terms input{width:28px;height:28px;flex:none;margin:0}
.q-foot .q-err{position:absolute;left:26px;bottom:2px;font-size:11px}
.q-foot{position:relative}
@media (max-width: 767.98px) {
    .q-foot{flex-wrap:wrap;row-gap:8px}
    .q-foot .q-total{order:1}
    .q-foot .q-go{order:2;flex:1}
    .q-foot .q-terms{order:0;flex:1 1 100%;max-width:none}
    .q-foot .q-err{position:static;order:0;flex:1 1 100%;margin-top:-6px}
}

/* BUG-ZYFNBF／5Q6EF6：階梯式——2,501 滿寬、2,500 縮成 75%、預約訂金 50%，都靠右；金額數字一律不縮小（24px） */

.q-plan .pa, .q-plan[data-pl="deposit"] .pa{font-size:24px}
@media (max-width: 767.98px) {   }
/* BUG-TFDQWZ：面板高度加一點，內容區不再出現滑軌（桌機 640→700px、手機 92vh→94vh） */
@media (min-width: 768px) { .q-sheet{height:min(700px, 94vh)} }
@media (max-width: 767.98px) { .q-sheet{height:94vh;max-height:94vh} }

@media (max-width: 767.98px) {
    .q-plan[data-pl="full"]{padding-left:14px;padding-right:14px}
    
    .q-plan[data-pl="full"] .pn{white-space:normal}
    
    
    .q-body{padding-bottom:12px}
}
@media (max-width: 767.98px) { .q-pm button{gap:4px} .q-pm{gap:6px} .q-pane .q-h{margin-top:12px} }

/* BUG-TCG8QL：方案左側標 A／B／C */
.q-abc{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255, 255, 255, 0.16);font-size:13px;font-weight:700;flex:none}
.q-plan.on .q-abc{background:var(--q-red);color:#fff}

/* BUG-58MQTC：手機付款方式也是一行兩欄；方式名稱縮到 19px 才放得下（可折行） */
@media (max-width: 767.98px) {
    .q-pm{grid-template-columns:1fr 1fr}
    .q-pm .nm{font-size:19px;line-height:1.2}
    .q-pm button{min-height:108px;padding:12px}
    .q-pm .sb{font-size:11px}
    .lgc{padding:3px 6px;height:22px}
}
/* BUG-4KT82L／KDHGWR：分期、紅利的說明框在 #q-pm 格子裡，緊接在所選那一排底下（滿版兩欄），
   與所選方式組合成同一個延伸（同紅色實線框、無虛線、貼合，不是兩個分開的 div） */
.q-pm .q-sub{border-top-width:0}



/* 修正：說明框裡的按鈕不被 .q-pm button 的格子樣式影響（高 108／grid／自動撐高） */
.q-pm .q-sub{display:none}
.q-pm .q-sub.on{display:block}
.q-pm .q-sub button{display:inline-block;min-height:0;height:36px;padding:0 16px;margin:0 6px 6px 0;border-radius:99px}
.q-pm .q-sub .q-times-b{display:inline-block}
.q-pm .q-sub small{display:block;margin-top:4px;opacity:0.75}
.q-pm .q-sub a{color:#fff;font-weight:700}

/* ===== 「選中」統一樣態：紅色線框＋紅色淡底（方案、付款方式、性別、時段、分期期數、步驟、同意勾選）(BUG-LA3Q6X／KFBFDR) ===== */
.sk2{--q-sel-bg:rgba(214, 58, 58, 0.18);--q-sel-bd:#d63a3a}
.q-times button.on, .q-ins.on, .q-prog button.on{background:var(--q-sel-bg);color:#fff;border:0;box-shadow:0 0 0 1px var(--q-sel-bd) inset;font-weight:700;opacity:1}
.q-times button, .q-ins{border:0}
.q-prog button.on{box-shadow:0 0 0 1px var(--q-sel-bd) inset}
.q-pm .q-sub .q-ins{border-radius:99px;background:rgba(255, 255, 255, 0.1);font:inherit;cursor:pointer}
.q-pm .q-sub .q-ins.on{background:var(--q-sel-bg);box-shadow:0 0 0 1px var(--q-sel-bd) inset}
.q-terms input{accent-color:var(--q-sel-bd)}

/* BUG-RPFETQ／LVCN5L：票卡上的方案字母 A 用同樣的圓圈（紅色＝這是所選方案） */

.q-ticket .q-abc{background:var(--q-red);color:#fff}

/* BUG-WAEJSQ／B93ZS6：磚與說明框真正「長在一起」。
   做法：選中的磚與說明框用同一個不透明底色；磚往下壓 1px 蓋住說明框上緣的線，所以接合處沒有縫；
   說明框上緣只在「沒有磚的那一側」保留線與圓角（左欄的磚→右上角圓；右欄的磚→左上角圓），像一個 L 形延伸 */
.q-pm{--q-solid:#3b2328}
.q-pm button.on:not([data-m="CREDIT"]):not([data-m="APPLEPAY"]){position:relative;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:var(--q-solid);border-color:var(--q-sel-bd)}
.q-pm .q-sub{margin-top:-8px}
.q-pm .q-sub[data-side="l"]{border-top-left-radius:0;border-top-right-radius:18px}
.q-pm .q-sub[data-side="r"]{border-top-right-radius:0;border-top-left-radius:18px}
.q-pm button.on[data-m="CREDIT"], .q-pm button.on[data-m="APPLEPAY"]{background:var(--q-sel-bg)}

/* BUG-M8G58S：手機——不出現左右滑軌、內容不貼邊；步驟列固定在上方（內容在其下方上下滑） */
.q-sheet, .q-main, .q-body, .q-pane{max-width:100%}
.q-sheet{overflow:hidden}
.q-body{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.q-pm, .q-plans, .q-f, .q-card{min-width:0;max-width:100%}
@media (max-width: 767.98px) {
    .q-head{padding-left:22px;padding-right:22px}
    .q-prog{padding-left:22px;padding-right:22px;position:sticky;top:0;z-index:3}
    .q-body{padding-left:22px}
    .q-foot{padding-left:22px;padding-right:22px}
    .q-plan[data-pl="full"], .q-plan[data-pl="deposit"]{max-width:100%}
}

/* ===== 單頁連續捲動（BUG-KVR7KW）：方案／資料／付款三段直接上下排列，沒有「下一步」；上方分頁鈕是捲動監聽＋點了捲過去；
   有問題的欄位送出時自動捲到那裡。滑軌隱藏（仍可上下滑）。 ===== */
.q-pane[data-p="0"], .q-pane[data-p="1"], .q-pane[data-p="2"]{display:block;animation:none}
.q-pane[data-p="3"]{display:none}
.q-sheet.q-done .q-pane{display:none!important}
.q-sheet.q-done .q-pane[data-p="3"]{display:block!important}
.q-body, .q-aside{scrollbar-width:none;-ms-overflow-style:none}
.q-body::-webkit-scrollbar, .q-aside::-webkit-scrollbar{display:none;width:0;height:0}
.q-pane + .q-pane{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255, 255, 255, 0.1)}
.q-body{scroll-padding-top:8px}   /* 底部留白，讓最後一段也能捲到上方 */

/* ===== BUG-LYV7CR／452G78：方案寬度 100%／75%／50%，靠右，右側留間距（容器本身有內距） ===== */
.q-plans{padding-right:0}
.q-plan[data-pl="addon"]{width:100%}
.q-plan[data-pl="full"]{width:75%!important;margin-left:auto}
.q-plan[data-pl="deposit"]{width:50%!important;margin-left:auto}
.q-plan[data-pl="full"], .q-plan[data-pl="deposit"]{grid-template-columns:1fr}          /* 窄卡：名稱在上、金額在下，數字仍 24px */
.q-plan[data-pl="full"] .pa, .q-plan[data-pl="deposit"] .pa{font-size:24px}

.q-plan[data-pl="full"] .ps, .q-plan[data-pl="deposit"] .ps{grid-column:1}
@media (max-width: 767.98px) {
    .q-plan[data-pl="full"]{width:75%!important}
    .q-plan[data-pl="deposit"]{width:50%!important}
    .q-plan[data-pl="full"] .pn{font-size:14px}
    .q-plan[data-pl="deposit"] .pn{font-size:13px}
    .q-plan{padding:14px 14px}
    .q-body{padding-right:26px}
}

/* ===== BUG-452G78／NMKJVQ：說明框不沾黏、不延伸——各自在自己那一塊磚的正下方，寬度＝那塊磚的寬度，文字自己斷行 ===== */
.q-pm .q-sub{grid-column:auto;margin:0;z-index:auto;position:static;background:rgba(255, 255, 255, 0.06);border:1px solid rgba(255, 255, 255, 0.25);border-style:solid;border-radius:16px!important;padding:14px;font-size:13px;line-height:1.6}
.q-pm button.on:not([data-m="CREDIT"]):not([data-m="APPLEPAY"]){background:var(--q-sel-bg);margin-bottom:0;z-index:auto;border-radius:20px;border:1px solid var(--q-sel-bd);box-shadow:0 0 0 1px var(--q-sel-bd) inset}
.q-pm button[data-m="CREDIT"]{grid-column:1;grid-row:1}
.q-pm button[data-m="APPLEPAY"]{grid-column:2;grid-row:1}
.q-pm button[data-m="CREDIT_INSTALL"]{grid-column:1;grid-row:2}
.q-pm button[data-m="CREDIT_BONUS"]{grid-column:2;grid-row:2}
.q-pm #q-sub-inst{grid-column:1;grid-row:3}
.q-pm #q-sub-bonus{grid-column:2;grid-row:3}

@media (max-width: 767.98px) { .q-pm .q-sub{padding:12px;font-size:12px} .q-pm .q-sub .q-ins{padding:0 12px;height:34px} }

/* ===== BUG-ND5FNH／VZQ8FR：平板（或任何矮視窗）——上方文字高度縮小，內容區不出現滑軌 ===== */
@media (min-width: 768px) and (max-width: 1100px), (max-height: 760px) {
    .q-head{padding:12px 22px 4px}
    .q-title{font-size:14px}
    .q-title small{display:none}
    .q-prog{padding:2px 22px 8px}
    .q-prog button{padding:6px 4px;font-size:12px}
    .q-foot{padding:8px 22px 12px}
    .q-pm .nm{font-size:20px}
    .q-pm button{min-height:92px;padding:12px}
    .q-h{margin:12px 0 8px}
}
@media (min-width: 768px) and (max-width: 1100px) {
    .q-main{grid-template-columns:280px 1fr}
    .q-foot .q-terms{font-size:11px;max-width:300px}
    .q-go{min-width:0;padding:0 22px;font-size:16px}
}
@media (max-width: 767.98px) {
    .q-plan[data-pl="addon"] .pn{font-size:14px;gap:4px;flex-wrap:nowrap}
    .q-plan[data-pl="addon"] .q-chip{padding:1px 6px;font-size:13px}
    
}
.q-chip{white-space:nowrap}
.q-ticket .t2{flex-wrap:nowrap}

/* ===== BUG-66HW2E／36YYU4：三張方案卡同高、同結構（名稱／金額／說明），金額一律靠右、同字級、同基線，不忽大忽小 ===== */
.q-plan, .q-plan[data-pl="full"], .q-plan[data-pl="deposit"]{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:space-between;row-gap:4px;min-height:112px;padding:14px 16px;text-align:left}
.q-plan .pn{grid-column:1;grid-row:1;white-space:normal;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.q-plan .pa, .q-plan[data-pl="full"] .pa, .q-plan[data-pl="deposit"] .pa{grid-column:1;grid-row:2;justify-self:end;text-align:right;font-size:24px;line-height:1.1;white-space:nowrap}
.q-plan .ps, .q-plan[data-pl="full"] .ps, .q-plan[data-pl="deposit"] .ps{grid-column:1;grid-row:3;font-size:12px;line-height:1.4}
@media (max-width: 767.98px) { .q-plan[data-pl="addon"] .pn{white-space:normal} .q-plan[data-pl="addon"] .pa{font-size:24px} }

/* ===== BUG-EWLMHL：分期期數一行完成，左右縮小 ===== */
.q-sub .q-insrow{display:flex;flex-wrap:nowrap;gap:4px;margin:6px 0 4px}
.q-pm .q-sub .q-ins{flex:1 1 0;min-width:0;margin:0;padding:0 4px;height:32px;font-size:12px;text-align:center}

/* ===== BUG-DGUGH4：段與段之間的白線，中間放一個朝下的小箭頭（提示下面還有、可往下滑）；最後一段沒有 ===== */
.q-pane{position:relative}
.q-pane + .q-pane::before{content:"";position:absolute;left:50%;top:-14px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--q-d2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;border:1px solid rgba(255, 255, 255, 0.35);animation:qbob 1.8s ease-in-out infinite}
@keyframes qbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .q-pane + .q-pane::before{animation:none} }
.q-pane[data-p="3"]::before{display:none}

/* BUG-FB5Y7C：分隔線中間的箭頭是真的按鈕，按了捲到下一段（取代之前只有圖案的偽元素） */
.q-pane + .q-pane::before{display:none!important}
.q-down{position:absolute;left:50%;top:-14px;width:28px;height:28px;margin-left:-14px;border-radius:50%;padding:0;cursor:pointer;z-index:2;background:var(--q-d2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;border:1px solid rgba(255, 255, 255, 0.35);animation:qbob 1.8s ease-in-out infinite}
.q-down:hover{border-color:#fff;background-color:#34343c}
@media (prefers-reduced-motion: reduce) { .q-down{animation:none} }

/* BUG-WNU79Y：左側「你的選擇」清單 */
.q-sum{list-style:none;margin:0;padding:12px 14px;border:1px solid rgba(255, 255, 255, 0.2);border-radius:18px;background:rgba(255, 255, 255, 0.04);font-size:13px}
.q-sum li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255, 255, 255, 0.08)}
.q-sum li:last-child{border-bottom:0}
.q-sum li.hd{font-weight:600;opacity:0.85;letter-spacing:0.04em;padding-top:0}
.q-sum li span{opacity:0.65;flex:none}
.q-sum li b{font-weight:600;text-align:right;word-break:break-all}
.q-sum li.ok b::before{content:"✓ ";color:#6fe3a0}
.q-sum li.no b{opacity:0.45;font-weight:400}

/* BUG-6PG7A9：最下方多餘留白（原本為了能捲到頂留了 40vh）改成小留白 */
.q-body{padding-bottom:20px!important}

/* BUG-Z9NMMR：勾選框改圓角方框，勾選時紅底白勾 */
.q-terms input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:9px;border:1.5px solid rgba(255, 255, 255, 0.6);background:rgba(255, 255, 255, 0.08);display:grid;place-content:center;cursor:pointer;margin:0;flex:none;transition:background 0.15s, border-color 0.15s}
.q-terms input[type="checkbox"]::after{content:"";width:14px;height:8px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px, -1px);opacity:0}
.q-terms input[type="checkbox"]:checked{background:var(--q-red);border-color:var(--q-red)}
.q-terms input[type="checkbox"]:checked::after{opacity:1}

/* BUG-9MP9EJ：多贈送的東西要標原價（NT$ 6,000） */
.q-ticket .t2g{display:block}
.q-ticket .t2g .g1{display:flex;align-items:center;gap:8px}
.q-ticket .t2g .g2{margin-top:4px;font-size:12px;font-weight:400;opacity:0.7}
.q-plan .ps s{opacity:0.75}
.q-ticket, .q-sum, .q-aside .q-meta{flex:none}   /* 左欄內容多時不被壓縮，改為左欄自己捲動（修正票卡下半被壓掉） */

/* ===== BUG-86DLZJ：左欄合併成一塊，無滑軌 ===== */
.q-aside{overflow:hidden!important;padding-top:4px}
.q-ticket.q-one{border-radius:22px}
.q-one .t1{padding:12px 16px 8px}
.q-one .t1 .amt{font-size:34px}
.q-one .t2{padding:8px 16px}
.q-one .q-sum{border:0;border-radius:0;background:transparent;border-top:1px solid rgba(255, 255, 255, 0.15);padding:8px 16px;font-size:12px}
.q-one .q-sum li{padding:3px 0}
.q-one .t4{display:flex;justify-content:space-between;align-items:baseline;padding:8px 16px;border-top:1px solid rgba(255, 255, 255, 0.15);color:#6fe3a0;font-weight:600;font-size:13px}
.q-one .t4 b{font-size:18px;font-style:italic;font-weight:700}
.q-one .t3{padding:10px 16px}
.q-one .t3 b{font-size:20px}

/* ===== BUG-RDR5Z3：省下多少錢（課程原價＋贈品原價−實付）===== */
.q-plan .pv{grid-column:1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:8px}
.q-plan .pv .pa{margin-left:auto;justify-self:auto;grid-row:auto}
.q-plan .sv{font-style:normal;font-size:12px;font-weight:700;color:#6fe3a0;border:1px solid rgba(111, 227, 160, 0.5);border-radius:99px;padding:2px 9px;white-space:nowrap}
.q-plan[data-pl="full"] .sv{font-size:11px;padding:2px 7px}

/* BUG-ZGP3VS：「預約資料」這一段的背景帶一點色差，並比欄位本身更寬（左右溢出到內距），讓人知道它跟上下兩段不同層 */
.q-pane[data-p="1"]{background:rgba(255, 255, 255, 0.05);margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px;border-top-color:transparent;border-radius:0}
.q-pane[data-p="1"] + .q-pane{border-top-color:transparent}
.q-pane[data-p="1"] .q-down{top:-14px}

/* BUG-9NEJVN：桌機／平板左右兩欄「融合」——左欄是一整條側欄（略深的底色、貼齊視窗上下左緣），裡面的內容不再是一張獨立的卡 */
@media (min-width: 768px) {
    
    
    .q-one .t1, .q-one .t2, .q-one .q-sum, .q-one .t4, .q-one .t3{padding-left:0;padding-right:0}
    
    
}

/* BUG-ZTLSAG：左欄還原成上一版的「一張卡」樣式（取消側欄融合） */
@media (min-width: 768px) {
    .q-aside{background:transparent;border-right:1px solid rgba(255, 255, 255, 0.12);padding:8px 20px 20px 26px}
    .q-ticket.q-one{border:1px solid rgba(255, 255, 255, 0.2);background:rgba(255, 255, 255, 0.05);border-radius:22px}
    .q-one .t1{padding:12px 16px 8px}
    .q-one .t2{padding:8px 16px;background:transparent}
    .q-one .q-sum{padding:8px 16px}
    .q-one .t4{padding:8px 16px}
    .q-one .t3{padding:10px 16px;background:rgba(255, 255, 255, 0.1);border-top:1px solid rgba(255, 255, 255, 0.15)}
}
/* BUG-HS7DTB：資料段色差兩側都延伸到最邊（左右各吃掉內容區內距） */
@media (min-width: 768px) { .q-pane[data-p="1"]{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px} }
@media (max-width: 767.98px) { .q-pane[data-p="1"]{margin-left:-22px;margin-right:-26px;padding-left:22px;padding-right:26px} }
.q-pane[data-p="1"]{max-width:none}   /* 原本全域 .q-pane 有 max-width:100%，擋住了右側延伸 */
.q-plan[data-pl="deposit"]{margin-top:0!important}   /* BUG-7HR2UG：預約訂金卡上方多出的 5px 間隔移除，與其他兩張一樣由 .q-plans 的 gap 決定 */

/* BUG-WPZ7SL：箭頭圓鈕的底色上下分兩半，跟它所在的分界線一致——
   「資料」段有色差（var(--q-d3)）、其餘段是一般底色（var(--q-d2)）。
   第二個箭頭（資料→付款）：上半＝資料色差、下半＝一般；第一個箭頭（方案→資料）：上半＝一般、下半＝資料色差 */
.q-down[data-to="2"]{background-color:var(--q-d2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(to bottom, var(--q-d3) 50%, var(--q-d2) 50%);background-size:16px 16px, 100% 100%;background-position:center, center;background-repeat:no-repeat, no-repeat}
.q-down[data-to="1"]{background-color:var(--q-d2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(to bottom, var(--q-d2) 50%, var(--q-d3) 50%);background-size:16px 16px, 100% 100%;background-position:center, center;background-repeat:no-repeat, no-repeat}
.q-down:hover{filter:brightness(1.25)}

/* 色差的邊界要正好落在箭頭圓鈕中央：資料段上下不再有外距，改用內距撐開（外距會讓邊界離開箭頭） */
.q-pane[data-p="0"]{padding-bottom:24px}
.q-pane[data-p="1"]{margin-top:0!important;padding-top:22px;padding-bottom:26px}
.q-pane[data-p="2"]{margin-top:0!important;padding-top:22px}

/* BUG-3DYFHU：課程主圖（正方形）放在 A 方案票卡左側，依票卡高度等比縮放 */
.q-ticket .t1{display:grid}
.q-ticket .t1 .q-pic{display:block}
.q-ticket .t1 .t1c{min-width:0}
/* BUG-G66WUU：安心交易徽章（綠色盾牌打勾；圖示取自 Heroicons shield-check，MIT 授權，可免費商用） */
.q-trust{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px 6px 9px;border-radius:99px;background:rgba(60,207,122,.16);border:1px solid rgba(60,207,122,.55);color:#4be08c;font-style:normal}
.q-trust b{font-size:13px;font-weight:700;letter-spacing:.04em;color:#e9fff3}
/* BUG-VVF8CT：條款文字與勾選框上下置中 */
.q-foot .q-terms{align-items:center}
@media(max-width:767.98px){.q-trust b{font-size:12px}}

/* BUG-MQ8BQ5／APBSMC：課程主圖＝票卡左側的正方形版面，貼齊容器當左側底圖；外側圓角跟著票卡，內側直角 */
.q-ticket.q-one{overflow:hidden}
.q-ticket .t1{gap:0;padding:0!important}
.q-ticket .t1 .q-pic{border-radius:0}
.q-ticket .t1 .t1c{align-self:center}

/* BUG-YPLLCM：分鐘數獨立一行 */
.q-ticket .t1c .q-mn{display:block;margin-top:2px}

/* ===== BUG-KYCABG 交易結果頁（前往藍新／成功／確認中／失敗／ATM／取消）；交易紅不變，成功綠／警示橘／失敗用紅橙，不用漸層 ===== */
.q-res{max-width:560px;margin:0 auto;padding:6px 4px 30px;font-style:normal}
.r-hd{text-align:center;padding:10px 0 14px}.r-hd i{display:inline-flex;width:54px;height:54px;border-radius:50%;align-items:center;justify-content:center;font-size:28px;font-style:normal;color:#fff;font-weight:800}
.r-hd.ok i{background:#2fb344}.r-hd.wait i{background:#e0a800}.r-hd.bad i{background:#d9534f}.r-hd h3{margin:10px 0 4px;font-size:22px}.r-hd p{margin:0;opacity:.8;font-size:14px}
.r-card{background:var(--q-d2);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px 14px;margin:6px 0 10px}
.r-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}.r-row:last-child{border-bottom:0}.r-row span{opacity:.7}.r-row b{text-align:right;font-weight:600}
.q-res h4{margin:16px 0 6px;font-size:14px;letter-spacing:.08em;opacity:.8}
.r-st{display:flex;gap:12px;align-items:flex-start;padding:7px 0}.r-st i{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--q-sel-bd,#fff);display:flex;align-items:center;justify-content:center;font-size:13px;font-style:normal}.r-st b{display:block;font-size:14px}.r-st small{opacity:.75;font-size:12.5px;line-height:1.5}
.r-note{font-size:13px;line-height:1.7;opacity:.8;margin:6px 0}
.r-ct{display:flex;gap:8px;margin:14px 0}.r-ct a{flex:1;text-align:center;padding:10px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;font-size:13px}
.r-btn{display:block;width:100%;margin-top:12px;height:50px;border:0;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;color:#fff;background:rgba(255,255,255,.12)}.r-btn.main{background:var(--q-red)}
.r-gw{background:#f4f4f6;color:#222;border-radius:14px;padding:0 0 18px;overflow:hidden}.r-bar{background:#3b4a63;color:#fff;font-size:12px;padding:8px 14px;display:flex;justify-content:space-between}.r-bar i{font-style:normal;opacity:.8}
.r-gw h3{margin:16px 16px 4px;font-size:18px}.r-amt{margin:0 16px 8px;font-size:26px;font-weight:800}.r-gw .r-row{margin:0 16px;border-color:rgba(0,0,0,.1)}.r-gw .r-row span{opacity:.6}
.r-f{margin:10px 16px 0;padding:11px 12px;border:1px solid #cfd3da;border-radius:8px;background:#fff;color:#777;font-size:14px}.r-gw .r-btn{width:calc(100% - 32px);margin:14px 16px 0}.r-back{display:block;text-align:center;margin-top:12px;font-size:13px;color:#456;cursor:pointer;text-decoration:underline}

/* 沒有加購的課程：不顯示 A 方案；票卡的贈品段隱藏 */
.q-noadd .q-plan[data-pl=addon]{display:none}

.q-ac{display:flex;gap:8px;align-items:center;margin:8px 0 0;padding-left:4px}.q-ac small{opacity:.8;font-size:12px;margin-right:4px}
.sk2 #q-sheet #q-terms,.sk2 #q-sheet #q-terms span{font-size:12px!important;line-height:1.5!important}
.sk2 #q-sheet #q-go{font-size:16px!important;font-weight:700!important}
@media(max-width:767.98px){.sk2 #q-sheet #q-terms,.sk2 #q-sheet #q-terms span{font-size:11px!important}}
.sk2 .q-sheet,.sk2 .q-scrim{font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif}

/* 0.0.65 BUG 批次（2026-11-03） */
/* BUG-Q7XCGV／JCL6FK：首屏背景不蓋霧面，文字改靠更強的陰影撐住 */
.sk2 .kb-sec-header::before,.sk2 .kb-sec-header:has(.kbc)::before{background:none!important}
.sk2 .kb-sec-header,.sk2 .kb-sec-header h2,.sk2 .kb-sec-header p,.sk2 .kb-sec-header strong{text-shadow:0 1px 2px rgba(0,0,0,.9),0 3px 8px rgba(0,0,0,.75),0 8px 24px rgba(0,0,0,.65),0 0 48px rgba(0,0,0,.5)!important}
/* BUG-2F4M4D：QR 面板從右往左推出，QRCODE 標籤跟著面板邊緣走 */
@media(min-width:992px){
.sk2 #kb-qrpanel{display:block!important;transition:transform .4s cubic-bezier(.37,0,.63,1),box-shadow .4s;box-shadow:none!important}
.sk2 body.sk-qr-open #kb-qrpanel{box-shadow:-4px 6px 20px rgba(0,0,0,.4)!important}
.sk2 #kb-qrpanel-toggle{transition:transform .4s cubic-bezier(.37,0,.63,1)}
.sk2 body.sk-qr-open #kb-qrpanel-toggle{transform:translateX(calc(-1 * var(--qrw,135px)))}
}
/* BUG-NA2DFU：預約面板左側課程圖維持正方形 */
/* （原本這裡把圖改成置中小正方形，違背 BUG-MQ8BQ5／APBSMC 的設計——左側底圖貼齊票卡，已移除；BUG-WAPVZ9） */
/* BUG-Y3MZ4H：回到頁首按鈕改成新設計（深底、細框、圓角方塊，跟 QRCODE／MENU 標籤同一套） */
.sk2 #kb-totop{background:var(--deep,#1b1418)!important;border:1px solid var(--line,rgba(255,255,255,.22))!important;border-radius:12px!important;width:46px!important;height:46px!important;box-shadow:0 6px 18px rgba(0,0,0,.4)!important}
.sk2 #kb-totop img{position:absolute;inset:0;margin:auto!important;width:22px!important;height:22px;filter:brightness(0) invert(1)}
/* BUG-KUYTAA：服務卡取消放大特效 */
.sk2 .kb-services img,.sk2 .kb-services img:hover,.sk2 .kb-services .item-wrapper:hover{transform:none!important;transition:none!important}
/* BUG-CVDT49：聯絡資訊下拉的雙行文字上下留距 */
.sk2 .dropdown-item.sk-i span{line-height:1.35!important}.sk2 .dropdown-item.sk-i small{margin-top:3px;line-height:1.35!important}
/* BUG-CNZNYS：+1 元 標籤內距各加 1 */
.q-chip{padding:2px 9px!important}
/* BUG-VQRUC3：桌機預約面板拉高並壓縮左欄，盡量不要出現上下滑動 */
@media(min-width:768px){
.q-sheet{height:min(800px,97vh)!important}
.q-aside{padding:6px 20px 12px 26px!important;gap:8px!important}
.q-ticket .t1{padding:0!important}.q-ticket .t1 .t1c{padding:8px 12px!important}.q-ticket .amt{font-size:34px!important}
.q-ticket .t2{padding:8px 16px!important}.q-ticket .t3{padding:10px 16px!important}
.q-sum{padding:8px 12px!important;font-size:12.5px!important;line-height:1.35!important}.q-sum li{padding-top:2px!important;padding-bottom:2px!important}
}
/* BUG-9TTNS7：預約面板桌機版由下往上淡入（手機本來就是底部彈出，可下拉收起） */
@media(min-width:768px){
.q-sheet{transform:translate(-50%,-38%);opacity:0}
.q-open .q-sheet{transform:translate(-50%,-50%);opacity:1}
}

/* 0.0.66 BUG 批次 */
/* BUG-LXHUNT：logo 字距由 JS 算好放進變數，樣式表 !important 才蓋得過舊程式的行內寫入 */
.sk2 .kb-logo--www .en{letter-spacing:var(--ls-en,7px)!important;margin-right:calc(-1 * var(--ls-en,7px))!important}
.sk2 .kb-logo--www .sub{letter-spacing:var(--ls-sub,2.3px)!important;margin-right:calc(-1 * var(--ls-sub,2.3px))!important}
.sk2 .kb-logo--www .tw{letter-spacing:var(--ls-tw,2px)!important;margin-right:calc(-1 * var(--ls-tw,2px))!important}
/* BUG-U8Y9HF：沒有首屏大圖的頁（服務總覽等）標題條打薄 */
.sk2 .kb-body:not(:has(.kb-sec-header)) .kb-sec-title{padding:12px 0 10px}
.sk2 .kb-body:not(:has(.kb-sec-header)) .kb-sec-title .card-box{padding:0!important}
.sk2 .kb-body:not(:has(.kb-sec-header)) .kb-sec-title .card-title{font-size:clamp(20px,2.2vw,26px)!important;margin:0!important}
.sk2 .kb-body:not(:has(.kb-sec-header)) .kb-sec-title p{font-size:clamp(13px,1.3vw,15px)!important;margin:3px 0 0!important}
/* BUG-F57LBU：服務總覽也要有圓圈（跟聯絡資訊一樣的主題色細框） */
.sk2 #kb-nav .nav-item.dropdown>.nav-link{border:1.5px solid var(--theme)}
/* BUG-LPZK5L：首屏預約卡不要陰影（底部浮出的那張維持） */
.kbc--hero,.sk2 .kbc--hero{box-shadow:none!important}
/* BUG-DA338T：首頁膠囊＝價格卡同款三塊，第三塊是「了解課程」 */
.sk2 .sk-hcard{cursor:pointer;margin-top:18px}
.sk2 a.sk-hcard .kb-cta-only{background:var(--q-red,#d63a3a)}
/* 手機／平板書籤列：上下置中、間距收窄、貼在底部預約卡之上 */
@media(max-width:991px){
.sk2 #kb-sectnav-bar{display:flex!important;align-items:center;gap:6px;height:48px!important;padding:0 10px!important;bottom:var(--sk-nb,16px)!important;overflow-x:auto}
.sk2 #kb-sectnav-bar>div,.sk2 #kb-sectnav-bar .btn{flex:none;margin:0!important;padding:0 12px!important;height:32px;line-height:30px!important;font-size:14px!important;display:flex;align-items:center}
.sk2 #kb-sectnav-bar .btn:last-child{margin-right:0!important}
}
/* BUG-JLVGEZ：上下堆疊時，文字塊不貼著上方圖片／影片（原本 0 間距，圖片陰影壓到字） */
@media(max-width:991px){.sk2 .mbr-section .row>.col-12.col-lg:not(:first-child){margin-top:20px}}

/* BUG-SW8DMC：預約面板桌機由下往上淡入——面板是「建好就帶 q-open」，transition 沒有起點不會動，改用 animation */
@keyframes skSheetUp{from{transform:translate(-50%,-36%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
@media(min-width:768px){.q-open .q-sheet{animation:skSheetUp .55s cubic-bezier(.22,.8,.3,1) both}}

/* BUG-JT6M4E：首頁一張一張圖卡往上滑動、蓋住前一張（黏在導覽列下緣，後一張依序疊上去） */
.sk2 .kb-body:has(.sk-hcard) #kb-sections>article:has(.kb-sec-header){position:sticky;top:0}
.sk2 .kb-body:has(.sk-hcard) #kb-sections>article:has(.kb-sec-header)+article:has(.kb-sec-header){box-shadow:0 -14px 34px rgba(0,0,0,.4)}
/* BUG-867W7M：預約卡裡面的字不要陰影（首屏文字的強陰影會連卡片內的 p／strong 一起套到）；全站價格卡一次處理 */
.sk2 .kbc,.sk2 .kbc *{text-shadow:none!important}

/* BUG-L62S3R：LPG 與文字區塊同高（JS 量出 --lpg-h），寬度依原圖比例 17:7；離中文 8px */
.sk2 .kb-logo--www{column-gap:6px!important}
/* LPG 放大到與文字區塊同高會擠到右邊導覽（容器寬度已滿，實測撞到「首頁」），先維持原尺寸 170×70 */
@media(max-width:767px){.sk2 .kb-logo--www{column-gap:5px!important}}
/* BUG-GLB7AM：課程主圖用完整正方形（原圖 400×400 不裁切），右側文字自己縮排；不再靠 38% 欄寬把圖切掉 */
.q-ticket .t1{grid-template-columns:120px minmax(0,1fr)!important;align-items:center!important}
.q-ticket .t1 .q-pic{width:120px!important;height:120px!important;aspect-ratio:1/1;object-fit:cover;align-self:center!important}
.q-ticket .t1 .t1c{padding:6px 10px!important}
.q-ticket .t1 .t1c .amt{font-size:30px!important}
.q-ticket .t1 .t1c small{font-size:12px!important}
/* BUG-CLHTRV：預約面板中段上緣也要有一條跟下方一樣的灰線 */
.q-main{border-top:1px solid rgba(255,255,255,.12)}
/* BUG-E5WK5Y：首頁圖卡一次切一整張改由 skin2.js 的 pager 處理（CSS scroll-snap 遇到 sticky 會一路衝到頁尾，已移除） */

/* BUG-CU9LX3：QRCODE 標籤併入面板（JS 搬 DOM），面板收起時標籤正好貼在螢幕右緣、展開時貼在面板左緣——同一個物件一起動 */
@media(min-width:992px){
.sk2 #kb-qrpanel{transform:translateX(100%)}
.sk2 body.sk-qr-open #kb-qrpanel{transform:none}
.sk2 #kb-qrpanel>#kb-qrpanel-toggle{position:absolute!important;right:100%!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;transition:none!important}
}

/* BUG-WA5J7T：首屏強陰影的規則特異性比 .kbc * 高，卡片裡的 p 還是被套到——用更高的特異性蓋回 */
.sk2 .kb-sec-header .kbc,.sk2 .kb-sec-header .kbc *,.sk2 .kb-sec-header .kbc p,.sk2 .kb-sec-header .kbc strong{text-shadow:none!important}
/* BUG-QZYHL3：標籤下方箭頭隨開合變方向（收起 « ＝點了會展開；展開 » ＝點了會收起；左側 MENU 相反），標籤本身不要陰影 */
.sk2 #kb-qrpanel-toggle::after{content:"»"!important}.sk2 #kb-qrpanel-toggle:not(.open)::after{content:"«"!important}
.sk2 #kb-sectnav-toggle::after{content:"«"!important}.sk2 #kb-sectnav-toggle:not(.open)::after{content:"»"!important}
.sk2 #kb-qrpanel-toggle,.sk2 #kb-sectnav-toggle{box-shadow:none!important}
/* BUG-CRX46B／7HUTLY：服務總覽標題條——靜止時是完整大標，往下捲就縮成一行薄條黏在導覽列正下方；文章高度固定為大標高度（JS 量好放進 --sk-tbH），縮小時內容不會跳動也不會被壓住 */
.sk2 body.sk-list .section_wrapper>article:first-child{position:sticky;top:calc(var(--sk-nh,102px) - 64px);z-index:20;background:transparent!important;pointer-events:none;height:var(--sk-tbH,auto)}
.sk2 body.sk-list .section_wrapper>article:first-child .kb-sec-title{pointer-events:auto;transition:padding .25s ease}
.sk2 body.sk-list .kb-sec-title .card-title,.sk2 body.sk-list .kb-sec-title p{transition:font-size .25s ease,margin .25s ease}
.sk2 body.sk-list.sk-tstuck .kb-sec-title{padding:6px 0!important}
.sk2 body.sk-list.sk-tstuck .kb-sec-title .card-box{display:flex!important;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.sk2 body.sk-list.sk-tstuck .kb-sec-title .card-title{font-size:18px!important;margin:0!important}
.sk2 body.sk-list.sk-tstuck .kb-sec-title p{font-size:13px!important;margin:0!important}

/* BUG-2RSHYD：A 方案抬頭——「A」與「首次體驗價」之間不留空格，課程名稱完整放第二行（不再截成 6 個字） */
.q-ticket .t1 small{display:flex!important;flex-wrap:wrap;align-items:center;gap:0 5px}
.q-ticket .t1 small .q-cn{flex:0 0 100%;font-style:normal;margin-top:3px;white-space:normal;line-height:1.3}

/* BUG-G3RKBB：二選一放進 A 方案卡裡，緊貼 NT$ 金額區塊（卡片內第四排），不再獨立一列 */
.q-plan .q-ac{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed rgba(255,255,255,.18)}
.q-plan .q-ac [data-k]{cursor:pointer;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:99px;padding:5px 14px;font-size:13px;font-style:normal}
.q-plan .q-ac [data-k].on{border-color:var(--q-red);background:var(--q-sel-bg)}

/* BUG-UYMGZ2：平板（560～767）首屏價格卡維持三塊「自然寬度」的比例，不讓紅色按鈕塊撐掉整行；字級隨容器 */
@media(min-width:560px) and (max-width:767.98px){
.kbc--hero{grid-template-columns:auto auto auto!important;width:fit-content!important;font-size:clamp(11px,2.1vw,15px)!important}
.kbc--hero .kb-cta-only{font-size:1em!important}
}

/* BUG-SFLZ9B：手機 LPG 圖 145×50（Neo 指定數值） */
@media(max-width:767px){}

/* BUG-BYJ6NM：首頁每張圖卡剛好一個「視窗高度」：上內距＝導覽列高度（用橫幅高度推算，不用頁面左上角），大圖＝其餘空間，內容上下置中、不再額外下推 */
.sk2 .kb-body:has(.sk-hcard) #kb-sections>article:has(.kb-sec-header){padding-top:var(--sk-nh,102px)!important}
.sk2 .kb-body:has(.sk-hcard) .kb-sec-header{min-height:calc(100vh - var(--sk-nh,102px))!important}
.sk2 .kb-body:has(.sk-hcard) .kb-sec-header>.container{padding-top:0!important}

/* BUG-UKC3JJ：預約面板表單欄位底色白色，加一點內陰影 */
.q-sheet input:not([type=checkbox]):not([type=radio]),.q-sheet select,.q-sheet textarea{background:#fff!important;color:#1f1f24!important;box-shadow:inset 0 2px 5px rgba(0,0,0,.28)!important;border:1px solid rgba(0,0,0,.18)!important}
.q-sheet input::placeholder,.q-sheet textarea::placeholder{color:#8a8a93!important}
.q-sheet input:not([type=checkbox]):not([type=radio]):focus,.q-sheet select:focus,.q-sheet textarea:focus{outline:2px solid var(--q-red,#d63a3a);outline-offset:1px}
/* BUG-SFLZ9B（修正）：Neo 指定的手機 LPG 145×50 在 390 寬會壓到右側選單鈕，窄螢幕等比縮小（寬 = 視窗寬 − 280px，最大 145） */
@media(max-width:767px){.sk2 .kb-logo--www .lpg{width:max(90px,min(145px,calc(100vw - 292px)))!important;height:calc(max(90px,min(145px,calc(100vw - 292px))) * 50 / 145)!important}}

/* 服務總覽：文章上有 64px 內距，包裝層上緣補（導覽列下緣 − 64px），標題條靜止位置與黏頂位置相同，下面內容才不會被壓住 */
.sk2 body.sk-list .section_wrapper{padding-top:calc(var(--sk-nh,102px) - 64px)!important}
/* BUG-YAK4RS（全站適用）：相簿、圖片卡、各區塊的方塊都加一點點陰影 */
.sk2 .kb-sec-gallery .item-wrapper,.sk2 .mbr-gallery .item-wrapper,.sk2 .kb-sec-card .card-wrapper,.sk2 .kb-sec-qa .panel,.sk2 .kb-sec-card .item-wrapper{box-shadow:0 6px 16px rgba(0,0,0,.28)!important;border-radius:12px}
/* BUG-52A6H3：Apple Pay 圖示右側外框線被 SVG 邊界切掉——讓線條可以畫到邊界外，並留 1px 邊 */
.kbc__brands svg,.q-sheet svg.p-applepay,.q-sheet .b-applepay{overflow:visible}
.kbc__brands .p-applepay{margin-right:1px}
/* BUG-R2WNTN：預約面板底色隨課程主題色（--q-bg 原本在 html 層算好，吃不到 body 上的主題色，這裡在 body 層重算；主題色比例提高到 22%） */
.sk2 .kb-body{--q-d1:color-mix(in oklab,var(--theme) 22%,#0a0a0d);--q-d2:color-mix(in oklab,var(--theme) 30%,#0a0a0d);--q-d3:color-mix(in oklab,var(--theme) 38%,#0a0a0d);--q-bg:color-mix(in srgb,var(--q-d1) 94%,transparent)}


/* BUG-4ACNSU：首頁圖卡捲動順暢——每張圖卡獨立合成層（捲動時不重畫整張大背景），避免 sticky 疊蓋時抖動 */
.sk2 .kb-body:has(.sk-hcard) #kb-sections>article:has(.kb-sec-header){will-change:transform;backface-visibility:hidden;contain:layout paint}
.sk2 .kb-body:has(.sk-hcard) .kb-sec-header{background-attachment:scroll!important}
/* BUG-LHJWM5：舊底部橫條只在有新價格卡的頁面隱藏（body.sk-cta，上面已有）；沒有預約面板的頁面保留它，否則這些頁面就沒有任何預約入口 */
/* BUG-BZ3YAY（通案）：所有「方塊」共用同一個浮起感（淡陰影＋圓角），一處定義、全站套用 */
.sk2{--sk-elev:0 6px 16px rgba(0,0,0,.28)}
.sk2 .mbr-gallery .item-wrapper,.sk2 .kb-sec-gallery .item-wrapper,.sk2 .kb-services .item-wrapper,.sk2 .kb-sec-card .item-wrapper,.sk2 .kb-sec-qa .panel,.sk2 .kb-sec-card .card-wrapper,.sk2 .kb-sec-article img,.sk2 .kb-sec-split img,.sk2 .mbr-figure img{box-shadow:var(--sk-elev)!important;border-radius:12px}
/* BUG-WEN5B8（通案）：第三塊只有一行字（沒有付款標誌那一排）時，跨兩條列線、上下置中——全站所有只有單行按鈕的價格卡都套用 */
.kbc .kb-cta-only:not(:has(.kbc__pay))>span{grid-row:1 / span 2;align-self:center}
/* BUG-985M6H（通案）：全站「被選到／目前所在」的項目一律反白——白底、黑字（側邊 MENU、手機書籤列、導覽目前頁、部位篩選、二選一）。其他狀態規則都蓋不過這一組 */
.sk2 #kb-sectnav-bar .btn.is-current,.sk2 #kb-sectnav ul li a.is-current,.sk2 .sk-parts button.on,.sk2 .q-ac [data-k].on,.sk2 #kb-nav .nav-item.active>.nav-link{background:#fff!important;color:#14141a!important;border-color:#fff!important}
.sk2 #kb-sectnav ul li a.is-current{border-left-color:#fff!important}
.sk2 .sk-parts button.on small{color:#14141a!important;opacity:.7}
/* BUG-5QC3XK（通案）：相簿大圖開著時，浮在畫面上的導覽元件（書籤列、底部價格卡、側邊 MENU、回頂）全部收起，不遮住左右翻頁鈕；翻頁鈕在大圖視窗垂直置中 */
body.modal-open #kb-sectnav-bar,body.modal-open #kb-bar,body.modal-open #cta-bar-slot,body.modal-open #kb-totop,body.modal-open #kb-sectnav,body.modal-open #kb-sectnav-toggle{display:none!important}
.sk2 .modal .carousel-control-prev,.sk2 .modal .carousel-control-next{top:50%!important;bottom:auto!important;transform:translateY(-50%)}
/* BUG-V67PP2（通案）：首頁價格卡是連結，要把一般連結的底線、變色、過渡全部關掉——數字區段不能有任何特效 */
a.kbc,a.kbc:hover,a.kbc:focus,a.kbc:visited,a.kbc *{text-decoration:none!important;color:#fff;transition:none!important}

/* BUG-3GP2UD：首頁頁尾也撐滿一個畫面高（導覽列下緣到視窗底），內容上下置中——它是分頁的最後一頁 */
.sk2 .kb-body:has(.sk-hcard) #kb-footer{min-height:calc(100vh - var(--sk-nh,102px));display:flex;flex-direction:column;justify-content:center}

/* 導覽列高度是確定值（桌機／平板 102px、手機 64px）——其他規則用 var(--sk-nh) 推算位置，不再用 JS 量 */
.sk2{--sk-nh:102px}
@media(max-width:767px){.sk2{--sk-nh:64px}}
/* BUG-BZGYGV（通案）：側邊 MENU 標籤是面板子層，跟 QR 標籤一樣用 CSS 對準面板中線（原本用 JS 量位置） */
@media(min-width:992px){.sk2 #kb-sectnav>#kb-sectnav-toggle{top:50%!important;transform:translateY(-50%)}}