/* ============================================================
   第１款 首頁 — Figma 423:1652（未登入 Footer展開）／437:3069（已登入 Footer收合）
   畫布 1920 × 5295，內容欄 1640（x 140–1780）
   ============================================================ */

@font-face { font-family: "Material Icons"; src: url("figma/fonts/MaterialIcons-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: "Material Icons Outlined"; src: url("figma/fonts/MaterialIconsOutlined-Regular.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: block; }

:root {
  color-scheme: light;

  /* 文字 */
  --ink: #24364d;
  --ink-strong: #1b1b23;
  --navy: #1b4571;
  --muted: #70829a;
  --link: #308399;

  /* 主色 */
  --indigo: #605ca7;
  --indigo-deep: #4f4c9c;
  --violet: #8b5cf6;

  /* 色帶 */
  --band-top: #dad6f4;
  --band-bottom: #c4dcf5;
  --cat-top: #fafafc;
  --cat-bottom: #e1e6f3;
  --news-card: #f4f7fe;

  /* 頁尾 */
  --footer-bg: #f1f3f7;
  --panel: #e7ebf0;

  /* 統計帶 */
  --stat-left: #9a66cb;
  --stat-right: #6f98d3;

  --hairline: #e6ebf3;
  --card-shadow: 0 6px 18px rgb(27 54 90 / 0.08), 0 1px 3px rgb(27 54 90 / 0.06);
  --lift-shadow: 0 14px 32px rgb(27 54 90 / 0.14), 0 3px 8px rgb(27 54 90 / 0.08);

  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, sans-serif;

  /* 內容欄：設計稿 1640 / 1920 */
  --col: 1640px;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: #fff; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

.mi, .mi-o { font-style: normal; line-height: 1; user-select: none; }
.mi { font-family: "Material Icons"; }
.mi-o { font-family: "Material Icons Outlined"; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input):focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 6px;
}

/* 內容欄 */
.col {
  width: min(var(--col), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ============================================================
   Header — 高 66，內容列 1640 × 50（y=8）
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 66px;
  background: #fff;
  border-bottom: 1px solid rgb(27 54 90 / 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: 24px;
}
.site-brand .brand-symbol { width: 44px; height: 40px; }
.site-brand .brand-wordmark { width: 240px; height: 26px; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
.primary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 105px;
  height: 44px;
  padding-inline: 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .18s, color .18s;
}
.primary-nav a:hover { background: #eef2fb; color: var(--navy); }

.header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* 搜尋列 360 × 43，右端內嵌「進階搜尋」120 × 43 */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 360px;
  height: 43px;
  padding-left: 16px;
  border: 1px solid #e3e6e9;
  border-radius: 999px;
  background: #fff;
}
.header-search > .mi-o { font-size: 20px; color: #919aa6; }
.header-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 8px;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--ink);
}
.header-search input::placeholder { color: #9aa5b5; }
.header-search input:focus { outline: none; }
.header-search .advanced {
  flex: 0 0 auto;
  width: 120px;
  height: 43px;
  margin-right: -1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8d44d4 0%, #6d6ad8 55%, #52a0d6 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  transition: filter .18s;
}
.header-search .advanced:hover { filter: brightness(1.08); }

.tools-divider {
  width: 1px;
  height: 24px;
  margin-left: 30px;
  background: rgb(0 0 0 / 0.08);
}
.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 13px;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color .18s;
}
.icon-button:hover { background: #eef2fb; }
.icon-button .mi-o { font-size: 24px; }

.login-button {
  width: 126px;
  height: 40px;
  margin-left: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0871a1 0%, #0d80bd 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  transition: filter .18s;
}
.login-button:hover { filter: brightness(1.1); }

/* 已登入：頭像 + 下拉 */
.profile-wrap { position: relative; margin-left: 16px; }
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  transition: background-color .18s;
}
.profile-trigger:hover { background: #eef2fb; }
.profile-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0871a1, #6d6ad8);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}
.profile-trigger .mi { font-size: 20px; color: var(--ink); }

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lift-shadow);
  display: none;
}
.profile-menu.open { display: block; }
.profile-summary {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
}
.profile-summary strong { display: block; font-size: 15px; color: var(--ink); }
.profile-summary span { font-size: 13px; color: var(--muted); }
.profile-menu-group { padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.profile-menu-group:last-child { border-bottom: 0; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  transition: background-color .16s;
}
.profile-menu-item:hover { background: #f1f4fb; }
.profile-menu-item img { width: 20px; height: 20px; }
.profile-menu-item.logout { color: #b91c1c; }

/* ============================================================
   Hero — 1920 × 500
   ============================================================ */
.blue-hero {
  position: relative;
  aspect-ratio: 1920 / 500;
  max-height: 500px;
  overflow: hidden;
  background: linear-gradient(180deg, #b9e9fb 0%, #d9f2fb 60%, #fff 100%);
}
.blue-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ============================================================
   區塊標題 — icon 86×86 + 標題 + 底線 28×3
   ============================================================ */
.section-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
}
.section-title-row .title-icon { width: 86px; height: 86px; flex: 0 0 86px; }
.section-title-row h2 {
  font-size: 32px;
  line-height: 41px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .5px;
}
.title-block { display: flex; flex-direction: column; gap: 16px; }
.title-block::after {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
}
.title-spacer { margin-left: auto; }

/* 更多按鈕 130 × 48 */
.more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 130px;
  height: 48px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgb(96 92 167 / 0.32);
  transition: background-color .18s, transform .18s;
}
.more-button:hover { background: #514d95; transform: translateY(-1px); }
.more-button .mi { font-size: 18px; }

/* 圓形箭頭 48 × 48 */
.arrow-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #c9cdec;
  border-radius: 999px;
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 4px 10px rgb(27 54 90 / 0.10);
  transition: background-color .18s, color .18s, transform .18s;
}
.arrow-round .mi { font-size: 22px; }
.arrow-round:hover { background: var(--indigo); color: #fff; transform: scale(1.06); }
.arrow-round[disabled] { border-color: #dfe4ee; color: #b7c0cf; box-shadow: none; cursor: default; }
.arrow-round[disabled]:hover { background: #fff; color: #b7c0cf; transform: none; }

/* 分頁點 */
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 6px;
}
.dots span {
  width: 12px;
  height: 5px;
  border-radius: 999px;
  background: #c3cad8;
  transition: width .2s, background-color .2s;
}
.dots span.active { width: 30px; background: var(--indigo); }

/* ============================================================
   我的學習紀錄（已登入）— 卡片 506/506/451 × 120
   ============================================================ */
.my-record { padding: 30px 0 0; }
.my-record .title-block::after { background: var(--indigo); }
.record-row {
  display: flex;
  gap: 28px;
  padding-inline: 60px;
}
.record-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  height: 120px;
  padding: 10px 24px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.record-card .record-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.record-card .record-icon img { width: 46px; height: 46px; object-fit: contain; }
.record-card .record-copy { min-width: 0; }
.record-card .record-copy span {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.record-card .record-copy strong {
  display: block;
  margin-top: 2px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: #1d4ed8;
}

/* ============================================================
   推薦課程 — y 608–1355
   ============================================================ */
.recommend { padding-top: 42px; }
.recommend .section-title-row { gap: 12px; }

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 36px;
  height: 48px;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px 0 8px;
  border: 1px solid #e3e9f1;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(27 54 90 / 0.06);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.filter-tab:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgb(27 54 90 / 0.10); }
.filter-tab .tab-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
}
.filter-tab[data-tab="popular"] .tab-icon { background: linear-gradient(140deg, #38a3e8, #1d7fd0); }
.filter-tab[data-tab="latest"] .tab-icon { background: linear-gradient(140deg, #34c48d, #14a06a); }
.filter-tab[data-tab="ai"] .tab-icon {
  border-radius: 10px;
  background: linear-gradient(140deg, #a855f7, #6366f1);
}
.filter-tab[data-tab="ai"] { border-color: #b8a4f6; }
.filter-tab[aria-pressed="true"] {
  border-color: var(--violet);
  border-width: 1.5px;
  color: #6d28d9;
  font-weight: 700;
  box-shadow: 0 4px 14px rgb(139 92 246 / 0.22);
}

/* 卡片列 391 × 549，gap 28 */
.course-viewport { position: relative; margin-top: 32px; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.side-arrow {
  position: absolute;
  top: 300px;
  z-index: 5;
}
.side-arrow.prev { left: -101px; }
.side-arrow.next { right: -32px; }

.course-card {
  display: flex;
  flex-direction: column;
  min-height: 549px;
  padding: 16px;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
.course-cover {
  position: relative;
  height: 222px;
  border-radius: 12px;
  overflow: hidden;
  background: #12263f;
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-type {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  background: #12263f;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.course-type.orange { background: #f97316; }
.course-type.amber { background: #fbbf24; color: #452c03; }

.course-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 12px;
}
.course-body h3 {
  min-height: 56px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-tags { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.course-tags p {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.course-tags p > strong { overflow: hidden; text-overflow: ellipsis; }
.course-tags strong { color: var(--ink); font-weight: 700; }
.agency-badge {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 6px;
  background: #ede4f9;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agency-badge.blue { background: #dfe9fb; color: #1d4ed8; }

.course-meta {
  margin-top: 16px;
  display: grid;
  gap: 4px;
}
.course-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
}
.course-meta .mi-o { font-size: 16px; color: #97a4b6; }
.course-meta strong { color: var(--ink); font-weight: 700; }

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
}
.course-footer .learners {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.course-footer .learners .mi-o { font-size: 18px; color: #97a4b6; font-weight: 400; }
.course-footer .detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--ink);
  transition: color .18s;
}
.course-footer .detail-link:hover { color: var(--indigo); }
.course-footer .detail-link .mi { font-size: 16px; }

.swipe-pair {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

/* ============================================================
   最新消息 — 色帶 1420–1902（底緣下弧）
   ============================================================ */
.news {
  margin-top: 65px;
  padding: 45px 0 105px;
  background: linear-gradient(180deg, var(--band-top) 0%, var(--band-bottom) 100%);
  border-radius: 0 0 50% 50% / 0 0 72px 72px;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.news-card {
  display: flex;
  flex-direction: column;
  min-height: 188px;
  padding: 20px;
  border: 1px solid #e0e6f4;
  border-radius: 8px;
  background: var(--news-card);
  transition: transform .18s, box-shadow .18s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(27 54 90 / 0.14); }
.news-card h3 {
  font-size: 17px;
  line-height: 27px;
  font-weight: 700;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.news-meta span { display: inline-flex; align-items: center; gap: 6px; }
.news-meta .mi-o { font-size: 16px; }
.news-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d7ddee;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: var(--ink);
}
.read-more {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--indigo-deep);
  color: #fff;
  font-size: 14px;
  transition: background-color .18s;
}
.read-more:hover { background: #403d86; }

/* ============================================================
   熱門課程專區 — 卡片 392 × 219
   ============================================================ */
.hot-zone { padding: 61px 0 88px; }
.zone-viewport { position: relative; margin-top: 32px; }
.zone-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.zone-card {
  display: block;
  height: 219px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.zone-card:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
.zone-card img { width: 100%; height: 170px; object-fit: cover; }
.zone-card h3 {
  display: grid;
  place-items: center;
  height: 49px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.hot-zone .side-arrow { top: 86px; }
.hot-zone .dots { margin-top: 26px; }

/* ============================================================
   主打課程專區 + 課程類別 — 色帶
   ============================================================ */
.featured-band { background: linear-gradient(180deg, var(--band-top) 0%, var(--band-bottom) 100%); }
.featured { padding: 52px 0 68px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin-top: 28px;
}
.feature-card {
  height: 311px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
.feature-card img {
  width: 100%;
  height: 232px;
  border-radius: 10px;
  object-fit: cover;
}
.feature-card h3 {
  display: grid;
  place-items: center;
  height: 51px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.category-band {
  background: linear-gradient(180deg, var(--cat-top) 0%, var(--cat-bottom) 100%);
}
.categories { padding: 60px 0 88px; }
.circle-viewport { position: relative; margin-top: 20px; }
.circle-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}
.circle-card {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 14.6% 5.3%;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.circle-card:hover { transform: translateY(-4px); box-shadow: var(--lift-shadow); }
.circle-card .graphic {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.circle-card .graphic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.circle-card.featured-circle {
  border-color: transparent;
  background: linear-gradient(150deg, #7c5cf5 0%, #a855f7 45%, #e879b9 100%);
  box-shadow: 0 18px 38px rgb(147 72 226 / 0.38);
}
.circle-card.featured-circle h3 { color: #fff; }

.circle-card.dim { background: #fcfcff; box-shadow: 0 4px 12px rgb(27 54 90 / 0.06); }
.circle-card.dim h3 { color: #9aa5b5; }

.categories .side-arrow.prev { left: -22px; }
.categories .side-arrow.next { right: -22px; }
.categories .side-arrow { top: calc(50% - 24px); }
.categories .dots { margin-top: 44px; }

/* ============================================================
   相關網站
   ============================================================ */
.partners { padding: 48px 0 73px; }
.partners h2 {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.partners .partner-copy {
  margin-top: 10px;
  font-size: 16px;
  line-height: 30px;
  color: var(--muted);
  text-align: center;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.partner-card {
  display: grid;
  place-items: center;
  height: 116px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.04);
  border-radius: 0;
  background: #fff;
  transition: transform .18s, box-shadow .18s;
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.partner-card img { width: 100%; height: 100%; object-fit: contain; }
.partners .dots {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  column-gap: 14.27%;
  margin-top: 48px;
}
.partners .dots span,
.partners .dots span.active {
  width: auto;
  height: 6px;
}

/* ============================================================
   統計帶 1920 × 217 + 底部漸層線
   ============================================================ */
.stats {
  position: relative;
  height: 217px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.22) 1px, transparent 0) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--stat-left) 0%, #807dd4 50%, var(--stat-right) 100%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(var(--col), 100% - var(--gutter) * 2);
  text-align: center;
}
.stat-item strong {
  display: block;
  font-size: clamp(24px, 2.2vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
  white-space: nowrap;
}
.stat-item strong i {
  font-style: normal;
  font-size: clamp(12px, .95vw, 18px);
  font-weight: 500;
  margin-left: 2px;
}
.stat-item span {
  display: block;
  margin-top: 10px;
  font-size: clamp(13px, .9vw, 17px);
  color: #fff;
  white-space: nowrap;
}
.stats-accent {
  height: 6px;
  width: min(var(--col), 100% - var(--gutter) * 2);
  margin-inline: auto;
  background: linear-gradient(90deg, #2593a4 0%, #4477c9 50%, #714dbf 100%);
}

/* ============================================================
   頁尾
   ============================================================ */
.site-footer { background: var(--footer-bg); }
.footer-main { padding: 40px 0 48px; }

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--ink);
}
.footer-links a { transition: color .18s; }
.footer-links a:hover { color: var(--navy); text-decoration: underline; }
.footer-links .sep { width: 1px; height: 16px; background: #c4ccd8; }

.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo .brand-symbol { width: 52px; height: 46px; }
.footer-logo .brand-wordmark { width: 268px; height: 30px; }
.footer-badge { width: 118px; height: auto; }

.accordion { margin-top: 26px; }
.accordion-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.accordion-trigger .mi { font-size: 22px; transition: transform .22s; }
.accordion-trigger[aria-expanded="false"] .mi { transform: rotate(180deg); }
.accordion-panel {
  margin-top: 10px;
  padding: 18px 24px;
  border-radius: 8px;
  background: var(--panel);
  font-size: 16px;
  line-height: 32px;
  color: var(--ink);
}
.accordion-trigger[aria-expanded="false"] + .accordion-panel { display: none; }
.accordion-panel .label { color: var(--ink); }
.accordion-panel .divider { margin: 0 8px; color: #9aa8b8; }
.accordion-panel strong { font-weight: 700; }
.accordion-panel a { color: var(--link); font-weight: 700; text-decoration: underline; }

.support-line { display: flex; flex-wrap: wrap; column-gap: 84px; }
.support-cols {
  display: grid;
  grid-template-columns: 484px minmax(0, 1fr);
  column-gap: 0;
}
.accordion-panel ol { margin: 0; padding-left: 22px; }
.accordion-panel ol > li::marker { color: var(--ink); }
.accordion-panel ul { margin: 0; padding-left: 14px; list-style: none; }
.accordion-panel ul li::before { content: "・"; margin-right: 2px; }
.support-cols .span-2 { grid-column: 1 / -1; }

.footer-bottom {
  height: 80px;
  background: #fff;
}
.footer-bottom .col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 4px;
  height: 100%;
  font-size: 15px;
  color: var(--ink);
}
.footer-bottom .owner { font-weight: 700; color: var(--navy); }
.footer-bottom .maintainer { margin-left: 48px; }

/* ============================================================
   浮動工具 — 64 × 199
   ============================================================ */
.floating-tools {
  position: fixed;
  right: 20px;
  top: 493px;
  z-index: 50;
  width: 64px;
  padding: 4px 0;
  border-radius: 14px;
  background: #fcfcfc;
  box-shadow: 0 8px 24px rgb(27 54 90 / 0.18);
}
.floating-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
  padding: 8px 0;
  color: #3b3b3b;
  font-size: 12px;
  transition: transform .18s;
}
.floating-action:hover { transform: translateY(-2px); }
.floating-action .action-circle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 10px rgb(27 54 90 / 0.20);
}
.floating-action .action-circle .mi-o { font-size: 26px; }
.floating-action.assistant .action-circle { background: linear-gradient(150deg, #f7ad3c, #f29512); }
.floating-action.catalog .action-circle { background: linear-gradient(150deg, #58bdb8, #37a39f); }
.floating-divider { height: 1px; margin: 0 8px; background: rgb(0 0 0 / 0.12); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 90;
  transform: translate(-50%, 20px);
  max-width: min(560px, calc(100vw - 40px));
  padding: 12px 20px;
  border-radius: 999px;
  background: rgb(27 54 90 / 0.94);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 登入狀態切換 */
body:not(.logged-in) [data-when="logged-in"] { display: none !important; }
body.logged-in [data-when="logged-out"] { display: none !important; }

/* ============================================================
   響應式
   ============================================================ */
/* 設計稿 1920 時浮動列位於內容欄右外側；視窗更窄時移到右下角避免壓到卡片 */
@media (max-width: 1800px) {
  .floating-tools { top: auto; bottom: 28px; right: 16px; }
}

@media (max-width: 1500px) {
  .recommend .side-arrow.prev, .recommend .side-arrow.next, .hot-zone .side-arrow.next { display: none; }
  .record-row { padding-inline: 0; }
}

@media (max-width: 1280px) {
  .primary-nav a { min-width: 0; padding-inline: 10px; font-size: 15px; }
  .header-search { width: 300px; }
  .header-search .advanced { width: 104px; font-size: 14px; }
  .course-grid, .zone-row, .feature-grid, .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-grid > :nth-child(4), .zone-row > :nth-child(4), .partner-grid > :nth-child(4) { display: none; }
  .circle-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .circle-row > :nth-child(n + 4) { display: none; }
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .site-header { height: auto; padding: 10px 0; }
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .primary-nav { order: 3; width: 100%; overflow-x: auto; margin-right: 0; }
  .header-tools { margin-left: auto; }
  .blue-hero { height: 340px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid > :nth-child(3) { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .stats { height: auto; padding: 32px 0; }
  .support-cols { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .support-line { column-gap: 32px; }
  .record-row { flex-wrap: wrap; }
  .record-card { flex: 1 1 260px; }
  .floating-tools { top: auto; bottom: 24px; }
}

@media (max-width: 768px) {
  .section-title-row { flex-wrap: wrap; min-height: 0; padding-block: 8px; }
  .section-title-row .title-icon { width: 64px; height: 64px; flex-basis: 64px; }
  .section-title-row h2 { font-size: 26px; line-height: 34px; }
  .filter-tabs { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .title-spacer { margin-left: auto; }
  .course-grid, .zone-row, .feature-grid, .partner-grid, .circle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course-grid > :nth-child(n + 3) { display: none; }
  .zone-row > :nth-child(n + 3) { display: none; }
  .partner-grid > :nth-child(n + 3) { display: none; }
  .circle-row > :nth-child(n + 3) { display: none; }
  .course-card { min-height: 0; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-grid > :nth-child(3) { grid-column: auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item strong { font-size: 30px; }
  .blue-hero { height: 260px; }
  .news { border-radius: 0 0 50% 50% / 0 0 36px 36px; padding-bottom: 64px; }
  .footer-brand-row { flex-wrap: wrap; }
  .footer-logo .brand-wordmark { width: 200px; height: 22px; }
  .footer-bottom { height: auto; padding: 18px 0; }
  .footer-bottom .col { flex-direction: column; text-align: center; gap: 6px; }
  .footer-bottom .maintainer { position: static; }
}

@media (max-width: 520px) {
  .course-grid, .zone-row, .feature-grid, .partner-grid, .circle-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .course-grid > :nth-child(n + 2),
  .zone-row > :nth-child(n + 2),
  .partner-grid > :nth-child(n + 2),
  .circle-row > :nth-child(n + 2) { display: none; }
  .feature-grid > :nth-child(n + 5) { display: none; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}