/* ============================================================
   exam-timeline.css — 考照指南頁的「報名 → 教材 → 應試 → 登錄」時間軸
   預設（無 JS、減少動態）＝完整靜態清單；JS 加上 .et-ready 才進入待播放狀態，進入畫面加 .et-play 播一次。只動 transform／opacity。
   窄螢幕（<720px）直式、寬螢幕橫式四欄；最後接該頁原有的留資料按鈕。
   ============================================================ */
.et { margin: 0 0 22px; padding: 16px 16px 14px; background: #fff; border: 1px solid #dce3ee; border-radius: 14px; box-shadow: 0 2px 12px rgba(10,30,70,.06); }
.et .et-intro { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #4a566b; }
.et .et-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; }
.et .et-step { position: relative; margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: #1a2333; }
.et .et-step:last-child { margin-bottom: 0; }
.et .et-dot { position: absolute; left: -24px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: #0B3D91; box-shadow: 0 0 0 3px #fff; }
.et .et-step:last-child .et-dot { background: #d9a441; }
/* 兩點之間的連線（每一步畫到下一步的圓點為止） */
.et .et-step:not(:last-child)::after { content: ""; position: absolute; left: -18px; top: 14px; bottom: -14px; width: 3px; border-radius: 2px; background: #3FA9F5; transform-origin: 50% 0; }
.et .et-lb { display: inline; margin-right: 8px; font-size: 15px; font-weight: 900; color: #0B3D91; }
.et .et-tx { display: inline; font-size: 15px; }
.et .et-cta { margin: 12px 0 0; padding-left: 26px; }
.et .et-cta .btn { margin-top: 0; }

@media (min-width: 720px) {
  .et { padding: 20px 22px 18px; }
  .et .et-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; padding: 30px 0 0; }
  .et .et-step:not(:last-child)::after { left: 15px; right: -18px; top: -24px; bottom: auto; width: auto; height: 3px; transform-origin: 0 50%; }
  .et .et-step { margin: 0; }
  .et .et-dot { left: 0; top: -30px; }
  .et .et-lb { display: block; margin: 0 0 2px; font-size: 16px; }
  .et .et-cta { padding-left: 0; }
}

/* 寬螢幕（≥960px）側欄「不想自己摸索？」已有同一句話，時間軸上方的引言不重複顯示 */
@media (min-width: 960px) { .guide-layout .et .et-intro { display: none; } .guide-layout .et .et-list { padding-top: 22px; } }

/* ── 待播放（僅 JS 確認可播放時） ── */
.et.et-ready .et-step::after { transform: scaleY(0); }
.et.et-ready .et-dot { transform: scale(0); }
.et.et-ready .et-lb, .et.et-ready .et-tx { opacity: 0; transform: translateY(6px); }
.et.et-ready .et-cta { opacity: 0; transform: translateY(6px); }
@media (min-width: 720px) { .et.et-ready .et-step::after { transform: scaleX(0); } }

/* ── 播放：每一步依序亮起、再畫向下一步的連線，最後出現按鈕（約 2 秒） ── */
.et.et-play .et-step::after { transform: none; transition: transform .3s ease-out .15s; }
.et.et-play .et-step:nth-child(2)::after { transition-delay: .5s; }
.et.et-play .et-step:nth-child(3)::after { transition-delay: .85s; }
.et.et-play .et-dot { transform: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.et.et-play .et-lb, .et.et-play .et-tx { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
.et.et-play .et-step:nth-child(2) .et-dot, .et.et-play .et-step:nth-child(2) .et-lb, .et.et-play .et-step:nth-child(2) .et-tx { transition-delay: .35s; }
.et.et-play .et-step:nth-child(3) .et-dot, .et.et-play .et-step:nth-child(3) .et-lb, .et.et-play .et-step:nth-child(3) .et-tx { transition-delay: .7s; }
.et.et-play .et-step:nth-child(4) .et-dot, .et.et-play .et-step:nth-child(4) .et-lb, .et.et-play .et-step:nth-child(4) .et-tx { transition-delay: 1.05s; }
.et.et-play .et-cta { opacity: 1; transform: none; transition: opacity .45s ease 1.5s, transform .45s ease 1.5s; }

@media (prefers-reduced-motion: reduce) {
  .et.et-ready .et-step::after, .et.et-ready .et-dot, .et.et-ready .et-lb, .et.et-ready .et-tx, .et.et-ready .et-cta { opacity: 1; transform: none; transition: none; }
}