/* ══════════════════════════════════════════
   plans.html 專屬樣式
   所有字級皆引用 style.css 的 --fs-* token
   ══════════════════════════════════════════ */

* {  margin: 0; padding: 0; box-sizing: border-box;  }
.navbar {  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10,31,60,0.97); backdrop-filter: blur(12px); padding: 0 40px;  }
.page-hero {  background: linear-gradient(160deg, #0A1F3C 0%, #162247 100%); padding: 120px 40px 60px; text-align: center; color: white;  }
.section {  padding: 72px 40px;  }
.plans-grid {  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;  }
.plan-card.featured h3 {  color: white;  }
.compare-table {  background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm);  }
.compare-table table {  width: 100%; border-collapse: collapse; font-size: var(--fs-xs);  }
.compare-table th {  background: var(--navy); color: white; padding: 14px 20px; text-align: center; font-size: var(--fs-xs); font-weight: 700;  }
.compare-table th:first-child {  text-align: left;  }
.compare-table td {  padding: 12px 20px; border-bottom: 1px solid var(--border); text-align: center; font-size: var(--fs-2xs);  }
.compare-table td:first-child {  text-align: left; font-weight: 600;  }
.compare-table tr:last-child td {  border-bottom: none;  }
.compare-table tr:hover td {  background: #FAFBFC;  }
.compare-table td.highlight {  background: var(--primary-light); color: var(--primary); font-weight: 700;  }
.cta-section {  background: linear-gradient(160deg, var(--primary), #0049CC); padding: 72px 40px; text-align: center; color: white;  }
.cta-section h2 {  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); font-weight: 900; margin-bottom: 12px;  }
.cta-section p {  font-size: var(--fs-sm); opacity: 0.8; margin-bottom: 32px;  }
.cta-phone {  font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); font-weight: 900; color: white; text-decoration: none; display: block; margin-bottom: 32px;  }
.cta-phone:hover {  color: var(--accent);  }
footer {  background: var(--navy); color: white; padding: 56px 40px 0;  }
@media (max-width: 1024px) {
.plans-grid {  grid-template-columns: repeat(2, minmax(0, 1fr));  }
}
@media (max-width: 768px) {
.section {  padding: 56px 20px;  }
.page-hero {  padding: 110px 20px 50px;  }
.plans-grid {  grid-template-columns: minmax(0, 1fr);  }
.navbar {  padding: 0 20px;  }
}
/* ──────────────────────────────────────────────────────────────
   手機版溢出修正
   表格改為容器內橫向捲動，避免撐破頁面寬度
   ────────────────────────────────────────────────────────────── */
.compare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table table {
  min-width: 560px;
}

/* 通用：任何元素都不允許造成水平捲動 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  .section-inner,
  .page-hero-inner,
  .footer-inner {
    max-width: 100%;
  }
  /* 表格容器橫向捲動 */
  .compare-table,
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* 長文字強制換行 */
  .footer-grid li,
  .footer-grid a,
  .contact-card,
  .hotline-box,
  .summary-stat,
  .stat-box {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}