/* =====================================================================
   AI Scrum Team 學習 RoadMap — 靜態站樣式
   顏色 / 間距 / 圓角一律用 RootNG 主題 token（--cub-sys-* / --cub-ref-*）；
   元件外觀來自 rootng.css，本檔只負責頁面 layout 與教學內容排版。
   ===================================================================== */

:root {
  /* 等寬字型堆疊：RootNG 主題無 mono font token，屬合理例外 */
  --sg-mono: 'SFMono-Regular', 'JetBrains Mono', 'Roboto Mono', ui-monospace, Menlo,
    Consolas, monospace;
  /* no-token: 版面骨架尺寸，主題無對應 token */
  --sg-header-h: 56px;
  --sg-menu-w: 320px;
  --sg-column-w: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cub-sys-bg-neutral-light);
  color: var(--cub-sys-text-neutral-primary);
}

/* ===== 外框：header + （選單 | 內容） ===== */
.sg-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* header 外觀全部沿用 RootNG 原生的 .cub-header / .cub-header-logo
   （淺色底、深色字、官方字型與間距），這裡只補外框 layout 需要的部分 */
.sg-header {
  flex: none;
  height: var(--sg-header-h);
}
.sg-header-logo,
.sg-header-logo:hover {
  text-decoration: none;
}

.sg-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* ===== 左側選單 ===== */
.sg-sidebar {
  flex: none;
  width: var(--sg-menu-w);
  border-right: 1px solid var(--cub-sys-border-neutral-lighter);
  background: var(--cub-sys-bg-neutral-lighter);
  overflow-y: auto; /* 內容超過視窗高度時才捲動 */
  overflow-x: hidden;
}
.sg-shell.is-menu-hidden .sg-sidebar {
  display: none;
}

.sg-menu {
  width: 100%;
  height: auto;
}

/* 選單文字不截斷：領域 / 知識點名稱較長，直接換行 */
.sg-menu .cub-collapsible-menu-item {
  overflow: visible;
}
.sg-menu .cub-collapsible-menu-item-content {
  align-items: flex-start;
  overflow: visible;
}
.sg-menu .cub-collapsible-menu-item-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.45;
}
.sg-menu .cub-collapsible-menu-item.is-active {
  background-color: var(--cub-sys-bg-neutral-selected);
}
.sg-menu .cub-collapsible-menu-item.is-active .cub-collapsible-menu-item-content {
  color: var(--cub-sys-text-neutral-selected);
}
.sg-menu-state {
  flex: none;
  margin-left: var(--cub-ref-size-4); /* 6px */
  color: var(--cub-sys-text-brand-main);
}
.sg-menu .cub-collapsible-menu-item-toggle {
  transition: transform 0.2s ease-in-out;
}
.sg-menu .is-expanded .cub-collapsible-menu-item-toggle {
  transform: rotate(180deg);
}

/* ===== 內容欄 ===== */
.sg-content-container {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.sg-content {
  width: 100%;
  max-width: var(--sg-column-w);
  margin: 0 auto;
  padding: var(--cub-ref-size-10) var(--cub-ref-size-12) var(--cub-ref-size-17); /* 24px 32px 64px */
}

.sg-breadcrumb ul {
  list-style: none;
}

.sg-page-title {
  font: var(--cub-sys-font-h2);
  color: var(--cub-sys-text-neutral-title);
  margin: var(--cub-ref-size-6) 0 var(--cub-ref-size-10); /* 12px 0 24px */
}

/* =====================================================================
   課綱總覽
   ===================================================================== */
.sg-lead {
  font: var(--cub-sys-font-body-l);
  line-height: 1.75;
  color: var(--cub-sys-text-neutral-primary);
  margin: 0 0 var(--cub-ref-size-9); /* 20px */
}

.sg-domain-card {
  display: block;
  margin-bottom: var(--cub-ref-size-8); /* 16px */
}

.sg-phase-head {
  display: flex;
  align-items: center;
  gap: var(--cub-ref-size-7); /* 14px */
  width: 100%;
}
.sg-phase-numeral {
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  font-weight: 700;
  color: var(--cub-sys-text-neutral-contrast);
  background: var(--cub-sys-bg-brand-main);
  border-radius: var(--cub-sys-radius-m);
  padding: var(--cub-ref-size-3) var(--cub-ref-size-5); /* 4px 8px */
  min-width: 34px; /* no-token: 序號標籤結構寬度 */
  text-align: center;
}
.sg-phase-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.sg-phase-name {
  font: var(--cub-sys-font-label-l);
  font-weight: 700;
  color: var(--cub-sys-text-neutral-title);
}
.sg-phase-sub {
  font: var(--cub-sys-font-body-s);
  color: var(--cub-sys-text-neutral-secondary);
  margin-top: var(--cub-ref-size-2); /* 2px */
}
.sg-phase-count {
  margin-left: auto;
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  color: var(--cub-sys-text-neutral-secondary);
}

.sg-phase-lessons {
  list-style: none;
  margin: 0;
  padding: var(--cub-ref-size-3) 0; /* 4px */
}
.sg-phase-lessons li {
  display: flex;
  align-items: center;
  gap: var(--cub-ref-size-6); /* 12px */
  padding: var(--cub-ref-size-6) var(--cub-ref-size-3); /* 12px 4px */
  border-bottom: 1px dashed var(--cub-sys-border-neutral-lighter);
}
.sg-phase-lessons li:last-child {
  border-bottom: none;
}

.sg-lesson-link {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--cub-ref-size-5); /* 8px */
  text-decoration: none;
}
.sg-state-icon {
  flex: 0 0 auto;
  width: 22px; /* no-token: 狀態圖示欄結構寬度 */
  text-align: center;
  font-family: var(--sg-mono);
  color: var(--cub-sys-text-brand-main);
}
.sg-lesson-text {
  display: flex;
  flex-direction: column;
}
.sg-lesson-name {
  font: var(--cub-sys-font-body-m);
  font-weight: 600;
  color: var(--cub-sys-text-neutral-title);
}
.sg-lesson-sub {
  font: var(--cub-sys-font-body-s);
  color: var(--cub-sys-text-neutral-secondary);
  margin-top: var(--cub-ref-size-2); /* 2px */
}
.sg-lesson-link:hover .sg-lesson-name {
  color: var(--cub-sys-text-brand-main);
}

/* =====================================================================
   知識點頁
   ===================================================================== */
.sg-lesson-head {
  margin-bottom: var(--cub-ref-size-11); /* 28px */
}
.sg-lesson-head .cub-tag {
  margin-right: var(--cub-ref-size-4); /* 6px */
}
.sg-lesson-head .sg-lesson-sub {
  font: var(--cub-sys-font-body-l);
  line-height: 1.6;
  color: var(--cub-sys-text-neutral-secondary);
  margin: var(--cub-ref-size-7) 0 0; /* 14px */
}

.sg-objectives {
  display: block;
  margin-bottom: var(--cub-ref-size-13); /* 36px */
  border-left: var(--cub-ref-size-3) solid var(--cub-sys-bg-brand-main); /* 4px */
  border-radius: var(--cub-sys-radius-l);
  overflow: hidden;
}
.sg-obj-kicker {
  display: block;
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cub-sys-text-brand-main);
  margin-bottom: var(--cub-ref-size-5); /* 8px */
}
.sg-objectives ul {
  margin: 0;
  padding-left: var(--cub-ref-size-9); /* 20px */
}
.sg-objectives li {
  font: var(--cub-sys-font-body-m);
  line-height: 1.7;
  color: var(--cub-sys-text-neutral-primary);
  margin-bottom: var(--cub-ref-size-3); /* 4px */
}

.sg-takeaways {
  display: block;
  margin-top: var(--cub-ref-size-15); /* 48px */
  /* 淺灰強調區塊 + 品牌色左標，與「學習目標」同一套視覺語言。
     不用白字深底：整頁其他區塊都是淺色，只有這塊反白會很突兀。 */
  background: var(--cub-sys-bg-neutral-light);
  border-left: var(--cub-ref-size-3) solid var(--cub-sys-bg-brand-main); /* 4px */
  overflow: hidden;
}
.sg-takeaways-title {
  font: var(--cub-sys-font-h5);
  color: var(--cub-sys-text-neutral-title);
  margin: 0 0 var(--cub-ref-size-6); /* 12px */
}
.sg-takeaways ul {
  margin: 0;
  padding-left: var(--cub-ref-size-9); /* 20px */
}
.sg-takeaways li {
  font: var(--cub-sys-font-body-m);
  line-height: 1.75;
  color: var(--cub-sys-text-neutral-primary);
  margin-bottom: var(--cub-ref-size-4); /* 6px */
}

.sg-pager {
  margin-top: var(--cub-ref-size-16); /* 56px */
  padding-top: var(--cub-ref-size-11); /* 28px */
  border-top: 1px solid var(--cub-sys-border-neutral-lighter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cub-ref-size-8); /* 16px */
}
.sg-pager-card {
  display: block;
}
.sg-pager-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cub-ref-size-3); /* 4px */
  width: 100%;
  text-decoration: none;
}
.sg-pager-link.next {
  align-items: flex-end;
  text-align: right;
}
.sg-pager-dir {
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  color: var(--cub-sys-text-brand-main);
}
.sg-pager-name {
  font: var(--cub-sys-font-body-m);
  font-weight: 600;
  color: var(--cub-sys-text-neutral-title);
}

/* =====================================================================
   內容區塊（ContentBlock）
   ===================================================================== */
.sg-block-heading {
  font: var(--cub-sys-font-h4);
  color: var(--cub-sys-text-neutral-title);
  margin: var(--cub-ref-size-13) 0 var(--cub-ref-size-6); /* 36px / 12px */
  padding-bottom: var(--cub-ref-size-5); /* 8px */
  border-bottom: 1px solid var(--cub-sys-border-neutral-lighter);
}

.sg-block-para {
  font: var(--cub-sys-font-body-m);
  line-height: 1.85;
  color: var(--cub-sys-text-neutral-primary);
  margin: 0 0 var(--cub-ref-size-8); /* 16px */
}

.sg-block-list {
  margin: 0 0 var(--cub-ref-size-8);
  padding-left: var(--cub-ref-size-10); /* 24px */
}
.sg-block-list li {
  font: var(--cub-sys-font-body-m);
  line-height: 1.8;
  color: var(--cub-sys-text-neutral-primary);
  margin-bottom: var(--cub-ref-size-4); /* 6px */
}

.sg-block-steps {
  list-style: none;
  margin: 0 0 var(--cub-ref-size-9); /* 20px */
  padding: 0;
}
.sg-block-steps li {
  display: flex;
  gap: var(--cub-ref-size-7); /* 14px */
  align-items: flex-start;
  padding: var(--cub-ref-size-6) 0; /* 12px */
  border-bottom: 1px dashed var(--cub-sys-border-neutral-lighter);
}
.sg-block-steps li:last-child {
  border-bottom: none;
}
.sg-step-num {
  flex: 0 0 auto;
  /* no-token: 序號圓標的結構尺寸 */
  width: 26px;
  height: 26px;
  border-radius: var(--cub-sys-radius-circle);
  background: var(--cub-sys-bg-brand-main);
  color: var(--cub-sys-text-neutral-contrast);
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sg-step-text {
  font: var(--cub-sys-font-body-m);
  line-height: 1.7;
  color: var(--cub-sys-text-neutral-primary);
  padding-top: var(--cub-ref-size-2); /* 2px */
}

.sg-block-code {
  position: relative;
  margin: 0 0 var(--cub-ref-size-9); /* 20px */
  background: var(--cub-sys-bg-neutral-dark);
  border: 1px solid var(--cub-sys-border-neutral-lighter);
  border-radius: var(--cub-sys-radius-l);
  overflow: hidden;
}
.sg-code-lang {
  position: absolute;
  top: 0;
  right: 0;
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cub-sys-text-neutral-secondary);
  background: var(--cub-sys-bg-neutral-base);
  border-left: 1px solid var(--cub-sys-border-neutral-lighter);
  border-bottom: 1px solid var(--cub-sys-border-neutral-lighter);
  border-radius: 0 var(--cub-sys-radius-l) 0 var(--cub-sys-radius-l);
  padding: var(--cub-ref-size-3) var(--cub-ref-size-5); /* 4px 8px */
}
.sg-block-code pre {
  margin: 0;
  padding: var(--cub-ref-size-8) var(--cub-ref-size-9); /* 16px 20px */
  overflow-x: auto;
}
.sg-block-code code {
  font: var(--cub-sys-font-body-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  line-height: 1.7;
  color: var(--cub-sys-text-neutral-contrast);
  background: none;
  padding: 0;
  white-space: pre;
}

.sg-block-callout {
  display: flex;
  margin: 0 0 var(--cub-ref-size-9);
}
.sg-callout-title {
  display: block;
  margin-bottom: var(--cub-ref-size-3); /* 4px */
}

.sg-block-table {
  display: block;
  margin: 0 0 var(--cub-ref-size-10); /* 24px */
  overflow-x: auto;
}
.sg-block-kv {
  width: 100%;
  margin: 0 0 var(--cub-ref-size-10);
}

/* 教學文字內的行內 `code` */
.sg-code-inline {
  font-family: var(--sg-mono);
  font-size: 0.88em;
  background: var(--cub-sys-bg-brand-lighter);
  color: var(--cub-sys-text-brand-main);
  padding: 0 var(--cub-ref-size-4); /* 6px */
  border-radius: var(--cub-sys-radius-m);
  word-break: break-word;
}

/* =====================================================================
   隨堂測驗
   ===================================================================== */
.sg-quiz {
  display: block;
  margin-top: var(--cub-ref-size-15); /* 48px */
  border-top: 3px solid var(--cub-sys-bg-brand-main); /* no-token: 3px 裝飾線 */
  border-radius: var(--cub-sys-radius-l);
  overflow: hidden;
}
.sg-quiz-head {
  margin-bottom: var(--cub-ref-size-5); /* 8px */
}
.sg-quiz-kicker {
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  letter-spacing: 0.12em;
  color: var(--cub-sys-text-brand-main);
}
.sg-quiz-title {
  font: var(--cub-sys-font-h4);
  color: var(--cub-sys-text-neutral-title);
  margin: var(--cub-ref-size-4) 0 var(--cub-ref-size-3); /* 6px 0 4px */
}
.sg-quiz-sub {
  font: var(--cub-sys-font-body-s);
  color: var(--cub-sys-text-neutral-secondary);
  margin: 0;
}
.sg-quiz-item {
  margin-top: var(--cub-ref-size-11); /* 28px */
  padding-top: var(--cub-ref-size-10); /* 24px */
  border-top: 1px dashed var(--cub-sys-border-neutral-lighter);
}
.sg-quiz-q {
  display: flex;
  gap: var(--cub-ref-size-5); /* 8px */
  align-items: flex-start;
  margin-bottom: var(--cub-ref-size-7); /* 14px */
}
.sg-q-num {
  flex: 0 0 auto;
  font: var(--cub-sys-font-label-s);
  font-family: var(--sg-mono); /* font 簡寫會重設 family，需寫在其後 */
  font-weight: 700;
  color: var(--cub-sys-text-neutral-contrast);
  background: var(--cub-sys-bg-neutral-dark);
  border-radius: var(--cub-sys-radius-m);
  padding: var(--cub-ref-size-2) var(--cub-ref-size-5); /* 2px 8px */
}
.sg-q-text {
  font: var(--cub-sys-font-body-l);
  font-weight: 600;
  line-height: 1.6;
  color: var(--cub-sys-text-neutral-title);
}
.sg-quiz-opt {
  display: block;
  margin: var(--cub-ref-size-2) 0; /* 2px */
  padding: var(--cub-ref-size-4) var(--cub-ref-size-5); /* 6px 8px */
  border-radius: var(--cub-sys-radius-m);
  transition: background 0.15s ease;
}
.sg-quiz-opt.sg-opt-correct {
  background: var(--cub-sys-bg-success-lighter);
}
.sg-quiz-opt.sg-opt-wrong {
  background: var(--cub-sys-bg-error-lighter);
}
.sg-quiz-feedback {
  display: flex;
  margin-top: var(--cub-ref-size-7); /* 14px */
}
.sg-correct-hint {
  margin: 0 var(--cub-ref-size-3); /* 4px */
}
.sg-explain {
  display: block;
  margin-top: var(--cub-ref-size-3); /* 4px */
  line-height: 1.7;
}
.sg-quiz-actions {
  margin-top: var(--cub-ref-size-11); /* 28px */
  padding-top: var(--cub-ref-size-10); /* 24px */
  border-top: 1px solid var(--cub-sys-border-neutral-light);
  display: flex;
  align-items: center;
  gap: var(--cub-ref-size-6); /* 12px */
  flex-wrap: wrap;
}
.sg-quiz-hint {
  font: var(--cub-sys-font-body-s);
  color: var(--cub-sys-text-neutral-secondary);
}
.sg-score-msg {
  font: var(--cub-sys-font-body-m);
  color: var(--cub-sys-text-neutral-primary);
}

/* ===== 視窗較窄時：選單改為可收合的覆蓋層 ===== */
@media (max-width: 1024px) {
  .sg-sidebar {
    position: absolute;
    top: var(--sg-header-h);
    bottom: 0;
    left: 0;
    z-index: 10;
  }
  .sg-shell:not(.is-menu-open) .sg-sidebar {
    display: none;
  }
  .sg-content {
    padding: var(--cub-ref-size-9) var(--cub-ref-size-8) var(--cub-ref-size-15);
  }
}

@media (max-width: 640px) {
  .sg-pager {
    grid-template-columns: 1fr;
  }
}

/* ===== 圖表與截圖 ===== */
.sg-figure {
  margin: 0 0 var(--cub-ref-size-10); /* 24px */
  padding: var(--cub-ref-size-8); /* 16px */
  background: var(--cub-sys-bg-neutral-base);
  border: 1px solid var(--cub-sys-border-neutral-lighter);
  border-radius: var(--cub-sys-radius-l);
  overflow-x: auto;
}
.sg-figure svg,
.sg-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.sg-figure figcaption {
  margin-top: var(--cub-ref-size-6); /* 12px */
  font: var(--cub-sys-font-body-s);
  color: var(--cub-sys-text-neutral-secondary);
  text-align: center;
}