/* ============================================================================
   共用元件樣式（單一來源）— 主頁 + 加盟機關獨立頁 共用
   ----------------------------------------------------------------------------
   一律用 var(--primary) 表達主題色；主頁預設 e+ teal，獨立頁靠 data-theme 換色。
   遷移方式：把各頁 <style> 內對應的元件區塊刪掉、改吃這裡即可（原頁面已 <link> 本檔）。
   依賴：tokens.css（--fs-* / --sp-* / --radius-* / --primary…）
   ============================================================================ */

/* ---------- 內頁標題帶 inner-banner ---------- */
/* url() 相對於本 CSS 檔（styles/），故往上一層取 ../assets/ */
.inner-banner{height:215px;position:relative;margin-top:-16px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;background-color:var(--bg-tint);background-image:url('../assets/inner-banner.png');background-repeat:no-repeat;background-position:center 14px;background-size:cover;padding-top:32px;padding-bottom:48px}
@media (min-width:1680px){ .inner-banner{height:250px} }
@media (max-width:640px){ .inner-banner{background-image:url('../assets/inner-banner-mobile.png');background-position:-340px bottom} }
.inner-banner>div{flex:1 1 auto;display:flex;flex-direction:column;width:100%}
.inner-banner>div>h1{margin-top:auto}
.inner-banner>div>.ul{margin-bottom:auto}
.inner-banner .bc-home{color:var(--primary)}

/* ---------- 課程類型 tab（探索）---------- */
.ex-tab{display:inline-flex;align-items:center;gap:12px;width:295px;padding:12px 16px 13px 12px;border-radius:15px;background:#fff;border:1px solid #d2dff3;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.ex-tab:hover{border-color:#b9c9e8}
/* 探索課程類型 tab 選取態＝固定萊姆綠邊＋薄荷底（對齊 Figma，非主題色）*/
.ex-tab.is-on{border:2px solid #74b509;background:linear-gradient(180deg,#f2fbf9 0%,#fff 100%);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ex-tab .ex-tab-ic{position:relative;display:inline-grid;place-items:center;width:64px;height:64px;border-radius:9999px;flex-shrink:0;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.10)}
.ex-tab .ex-tab-ic::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 83%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 60%)}
.ex-tab .ex-tab-lb{font-weight:700;font-size:20px;line-height:1.5;color:#24364d;white-space:nowrap}
@media (max-width:980px){ .ex-tab{width:calc((100% - 48px)/3)} }
@media (max-width:600px){ .ex-tab{flex-direction:column;gap:8px;padding:12px 6px}
  .ex-tab .ex-tab-ic{width:52px;height:52px}
  .ex-tab .ex-tab-lb{font-size:17px;text-align:center} }

/* ---------- 篩選欄位 ---------- */
.exf-row{display:flex;align-items:center;gap:16px}
.exf-lbl{width:150px;flex-shrink:0;text-align:right;white-space:nowrap;font-size:18px;line-height:1.5;color:#475569}
.exf-field{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 18px;border-radius:9999px;background:#f5f6fa;border:1px solid #e6eaf0;font-size:17px;color:#94a3b8}
.exf-chipbox{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:48px;padding:7px 14px;border-radius:24px;background:#f5f6fa;border:1px solid #e6eaf0}
.exf-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:2px 14px 0 10px;border-radius:9999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;line-height:1}
.exf-chip .ico{font-size:16px;line-height:1;display:block}
@media (max-width:520px){ .kw-row{flex-wrap:wrap} .kw-row>button{width:100%;flex:0 0 100%} }

/* ---------- 分段切換 segmented ---------- */
.seg-group{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:9999px;background:#fff;border:1px solid #e6eaf0}
.seg{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:9999px;font-size:18px;font-weight:600;color:#64748b;white-space:nowrap;cursor:pointer;transition:.15s}
.seg:hover{color:var(--primary)}
.seg.is-on{background:var(--primary);color:#fff;font-weight:700}
.seg-group[aria-label="排序"] .seg.is-on{background:linear-gradient(304deg,#5f5fb8 4%,#7d4cad 88%)}

/* ---------- Material 分頁 paginator ---------- */
.ex-paginator,.pf-paginator{font-size:18px;color:#5b6b80}
.ex-ps,.pf-ps{position:relative;display:inline-flex;align-items:center;border-bottom:1px solid #c5ccd6}
.ex-ps select,.pf-ps select{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:none;font-size:18px;color:#24364d;padding:2px 22px 4px 4px;cursor:pointer;line-height:1.2}
.ex-ps .ico,.pf-ps .ico{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;color:#5b6b80;font-size:20px}
.ex-pg-range b{color:#24364d;font-weight:700}
.ex-pg-arrow,.pf-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:9999px;color:#24364d;background:transparent;transition:.15s}
.ex-pg-arrow:enabled:hover,.pf-arrow:enabled:hover{background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)}
.ex-pg-arrow:disabled,.pf-arrow:disabled{color:#c0c7d0;cursor:not-allowed}
.ex-pg-arrow .ico,.pf-arrow .ico{font-size:24px}

/* ---------- 分類 tab（feat / 主打）---------- */
.pf-cat{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:10px;border:1px solid #dce3ea;background:#fff;font-weight:700;font-size:19px;color:#475569;white-space:nowrap;cursor:pointer;transition:.15s}
.pf-cat.is-on{border-color:transparent;color:#fff;background:var(--primary)}
.pf-cat:hover:not(.is-on){border-color:var(--primary)}

/* ---------- 輪播左右 arrow ---------- */
.car-arrow{width:52px;height:52px;border-radius:9999px;padding:2.2px;display:grid;place-items:center;cursor:pointer;border:0;
  background:linear-gradient(135deg,#FFFA8C 0%,#923ED5 15%,#3BC5D8 100%);
  box-shadow:0 13px 26px rgba(0,0,0,0.08),0 5.4px 23.8px rgba(0,0,0,0.05),0 7.6px 8.7px rgba(0,0,0,0.04);
  transition:filter .15s ease,transform .15s ease}
.car-arrow>.car-inner{display:grid;place-items:center;width:100%;height:100%;border-radius:9999px;background:#fff}
.car-arrow:hover{filter:brightness(1.03)}
.car-arrow:active{scale:.95}   /* 用獨立 scale 屬性，避免覆蓋定位用的 translateY(-50%)；實際數值由頁面內 ARROW-PRESS-V2 覆寫為 .97（King 2026-10-01） */
.car-arrow.is-dis{background:#e3e6ec;box-shadow:0 4px 10px rgba(15,23,42,.05);cursor:not-allowed}
.car-arrow.is-dis>.car-inner{background:#f1f3f6}
.car-arrow.is-dis svg path{stroke:#b6bcc8}
.car-arrow.is-dis:hover{filter:none}
.car-arrow.is-dis:active{scale:none}

/* ---------- footer 凹弧頂蓋 ---------- */
.footer-arc{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(28px,3.13vw,60px);display:block;pointer-events:none;z-index:0}

/* ---------- 課程卡 ---------- */
.course-card{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:20px;
  box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;overflow:hidden}
.course-card:hover{transform:translateY(-4px);border-color:rgba(0,0,0,.06);box-shadow:var(--shadow-card-hover)}

/* 課程類型 tag 色（固定，不隨主題切換）：套用時用 style="background:var(--badge-…)" 或這些 class */
.tag-digital{background:var(--badge-digital);color:#fff}
.tag-assemble{background:var(--badge-assemble);color:#fff}
.tag-ebook{background:var(--badge-ebook);color:#000}