/* ===== 2026-08 內容元件的相容樣式 =====
   內頁文章在 2026-08 重寫時用了新版主題的元件標記
   （.facts / .spec / .rows / .note / .cta 等）。
   這個檔案讓那批內容在經典主題下也能正常呈現——
   沒有它，最明顯的災難是 .rows 的箭頭 SVG 沒有尺寸限制，
   會撐成整頁大的黑色三角形。
   配色沿用經典主題的變數，讓元件融入原本的外觀。 */

/* 導言 */
.pg-lede-in{
  font-size: 1.15em;
  color: var(--text-secondary, #666);
  line-height: 1.8;
}

/* 規格數字格 */
.spec{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--border-light, #eee);
  border: 1px solid var(--border-light, #eee);
  border-radius: var(--radius-medium, 12px);
  overflow: hidden;
  margin: 1em 0;
}
.spec__item{ background: #fff; padding: 18px 12px; text-align: center; }
.spec__item b{ display: block; font-size: 28px; font-weight: 700; line-height: 1.1; }
.spec__item b small{ font-size: 14px; font-weight: 500; margin-left: 2px; }
.spec__item span{ display: block; font-size: .9em; color: var(--text-secondary, #666); margin-top: 6px; }

/* 條件表：左標籤右說明 */
dl.facts{ margin: 1em 0; }
.facts > div{
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light, #eee);
}
.facts dt{ flex: none; min-width: 84px; font-size: .9em; color: var(--text-secondary, #666); padding-top: 2px; }
.facts dd{ margin: 0; line-height: 1.7; }
@media (max-width: 480px){
  .facts > div{ flex-direction: column; gap: 4px; }
  .facts dt{ min-width: 0; }
}

/* 連結列（含關鍵的 SVG 尺寸限制） */
ul.rows{ margin: 1em 0; padding: 0; list-style: none; }
.rows li{ margin: 0; }
.rows a{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border-light, #eee);
  text-decoration: none; color: inherit;
}
.rows a:hover b{ color: var(--primary-dark, #d32f2f); }
.rows .grow{ flex: 1; min-width: 0; }
.rows b{ display: block; font-weight: 600; }
.rows span span{ display: block; font-size: .9em; color: var(--text-secondary, #666); margin-top: 3px; }
.rows .tag{ flex: none; font-weight: 600; }
.rows svg.chev{
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: var(--text-light, #999);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* 註記 */
.note{
  font-size: .92em;
  color: var(--text-secondary, #666);
  padding: 12px 16px;
  background: var(--bg-section, #f8f9fa);
  border-radius: var(--radius-small, 8px);
}

/* LINE 行動按鈕 */
.cta{ margin-top: 2em; }
.cta__btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 28px;
  border-radius: 999px;
  background: #06C755; color: #fff;
  font-weight: 600; text-decoration: none;
}
.cta__btn:hover, .cta__btn:visited, .cta__btn:active{ color: #fff; background: #06C755; }

/* FAQ 手風琴 */
details{ border-bottom: 1px solid var(--border-light, #eee); }
details summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 2px; font-weight: 600; line-height: 1.6;
}
details summary::-webkit-details-marker{ display: none; }
details summary::after{
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--text-light, #999);
  border-bottom: 2px solid var(--text-light, #999);
  transform: rotate(45deg); transition: transform .2s;
}
details[open] summary::after{ transform: rotate(-135deg); }
details p:last-of-type{ padding-bottom: 16px; }

/* 對照表捲動 */
.tbl-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 合作夥伴 logo 牆 */
.logo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 32px;
  align-items: center; justify-items: center;
  padding: 8px 0;
}
.logo-grid img{ max-width: 100%; max-height: 64px; width: auto; height: auto; }