@charset "UTF-8";

/* ============================================================
   條款說明頁（/term/{id}）
   版面與首頁、登入頁、探索文章等改版頁面一致：淡底、白色卡片、
   10px 圓角，主色一律引用 style.css 的 --site-* 變數不寫死色碼。
   內文區塊（.tm-content）為最大寬度 1200px 的置中方框。
   ============================================================ */

.term-page {
  /* main 為 flex 容器，撐滿剩餘高度讓底色延伸至頁尾 */
  flex: 1;
  --tm-ink: #1b2430;
  --tm-muted: #6b7d8a;
  --tm-line: #e3e9f3;
  --tm-surface: #ffffff;
  --tm-bg: #f6f8fb;
  --tm-paper: #fafafa;
  background: var(--tm-bg);
  padding: 26px 0 60px;
}

.tm-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------
   麵包屑
   --------------------------------------------- */
.tm-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--tm-muted);
  font-size: 18px;
}

.tm-crumb a {
  color: var(--tm-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.tm-crumb a:hover {
  color: var(--site-primary);
}

.tm-crumb i {
  font-size: 15px;
  color: var(--tm-line);
}

.tm-crumb-now {
  color: var(--tm-ink);
  font-weight: 700;
}

/* ---------------------------------------------
   頁面標題（主色漸層，選填橫幅圖片為底）
   --------------------------------------------- */
.tm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--site-primary-dark), var(--site-primary) 55%, var(--site-primary-light));
  color: #fff;
}

.tm-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}

.tm-hero-inner {
  position: relative;
  padding: 34px 32px;
}

.tm-hero-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tm-hero-title {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.tm-hero-desc {
  margin: 12px 0 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 19px;
  line-height: 1.8;
}

.tm-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 17px;
}

.tm-hero-meta i {
  font-size: 16px;
}

/* ---------------------------------------------
   其他條款（膠囊連結）
   --------------------------------------------- */
.tm-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.tm-tabs-title {
  color: var(--tm-muted);
  font-size: 18px;
  font-weight: 700;
}

.tm-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--tm-line);
  border-radius: 999px;
  background: var(--tm-surface);
  color: var(--tm-ink);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.tm-tab i {
  font-size: 16px;
  color: var(--tm-muted);
}

.tm-tab:hover {
  border-color: var(--site-primary-line);
  background: var(--site-primary-soft);
  color: var(--site-primary);
}

.tm-tab:hover i {
  color: var(--site-primary);
}

.tm-tab.is-active {
  border-color: var(--site-primary);
  background: var(--site-primary);
  color: #fff;
}

.tm-tab.is-active i {
  color: #fff;
}

/* ---------------------------------------------
   條款內文（最大寬度 1200px、左右置中的方框）
   --------------------------------------------- */
.tm-content {
  max-width: 1200px;
  margin: 22px auto 0;
  padding: 34px 32px;
  border: 1px solid var(--tm-line);
  border-radius: 10px;
  background: var(--tm-paper);
  color: var(--tm-ink);
  font-size: 20px;
  line-height: 1.9;
}

/* CKEditor 內容的段落間距（.ckeditor-block-view 只還原 tag 預設值） */
.tm-content p {
  margin: 0 0 1em;
}

.tm-content > :last-child {
  margin-bottom: 0;
}

.tm-content img {
  max-width: 100%;
  height: auto;
}

.tm-content table {
  max-width: 100%;
}

.tm-content a {
  color: var(--site-primary);
  text-decoration: underline;
}

.tm-content a:hover {
  color: var(--site-primary-dark);
}

.tm-content-empty {
  margin: 0;
  color: var(--tm-muted);
  text-align: center;
}

/* ---------------------------------------------
   頁尾提示卡
   --------------------------------------------- */
.tm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 22px 26px;
  border: 1px solid var(--tm-line);
  border-radius: 10px;
  background: var(--tm-surface);
}

.tm-foot-title {
  margin: 0 0 4px;
  color: var(--tm-ink);
  font-size: 21px;
  font-weight: 800;
}

.tm-foot-text {
  margin: 0;
  color: var(--tm-muted);
  font-size: 18px;
  line-height: 1.7;
}

.tm-foot-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.tm-btn i {
  font-size: 17px;
}

.tm-btn-main {
  background: var(--site-primary);
  border-color: var(--site-primary);
  color: #fff;
}

.tm-btn-main:hover {
  background: var(--site-primary-dark);
  border-color: var(--site-primary-dark);
  color: #fff;
}

.tm-btn-line {
  background: var(--tm-surface);
  border-color: var(--tm-line);
  color: var(--tm-ink);
}

.tm-btn-line:hover {
  border-color: var(--site-primary);
  color: var(--site-primary);
}

/* ---------------------------------------------
   RWD
   --------------------------------------------- */
@media (max-width: 992px) {
  .tm-hero-inner {
    padding: 28px 24px;
  }

  .tm-content {
    padding: 28px 24px;
  }
}

@media (max-width: 576px) {
  .term-page {
    padding: 18px 0 40px;
  }

  .tm-shell {
    padding: 0 14px;
  }

  .tm-hero-inner {
    padding: 24px 18px;
  }

  .tm-content {
    padding: 22px 18px;
    font-size: 19px;
  }

  .tm-foot {
    padding: 20px 18px;
  }

  .tm-foot-btns .tm-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------------------------------------------
   列印
   --------------------------------------------- */
@media print {
  .tm-crumb,
  .tm-tabs,
  .tm-foot {
    display: none !important;
  }

  .term-page {
    background: #fff;
    padding: 0;
  }

  .tm-content {
    border: none;
    background: #fff;
    padding: 0;
  }
}