/* ============================================================
   發展計畫頁面專用樣式（page-plan.css）
   補齊靜態稿用到、但共用 main.css 尚無對應規則的 class。
   既有 dev-phase-row / dev-arrow / dev-block / milestone-grid /
   milestone-item / milestone-year 等版型仍由 main.css 提供，
   本檔不重複定義。
   ============================================================ */

/* 營運規劃最外層包裹：dev-phase-row 與 dev-arrow 之間的節奏由各自
   padding 提供，此處僅作為區塊容器 */
.devplan-layout {
  display: block;
}

/* 期別標題（短/中/長期）：維持與次標題的基本間距 */
.dev-phase-label {
  margin-bottom: 8px;
}

/* 營運規劃分類標題（技術營運 / 商業營運） */
.dev-phase-cat {
  margin-top: 4px;
}

/* 里程碑分類標題 */
.milestone-cat {
  margin-top: 4px;
}

/* 發展藍圖：多張圖片依後台排序垂直堆疊、置中，寬度由 img-fluid 自適應
   間距比照 main.css 的 .milestone-grid（mobile-first：行動 60px / 桌機 32px） */
.roadmap-list {
  display: grid;
  gap: 60px;
  margin-top: 30px;
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 768px) {
  .roadmap-list {
    gap: 32px;
    margin-top: 0;
  }
}