/* ==========================================================================
   robot-sim — main.css(SO-ARM101에서 계승) 위에 얹는 추가 스타일
   트랙 색, 트랙 토글, 안전/전용 콜아웃, 실행 코드 배지
   ========================================================================== */

:root {
  --track-common: #7dd3fc;
  --track-pro:    #fbbf5a;
  --track-edu:    #4ade9a;
  --safety:       #f87171;
  --safety-soft:  rgba(248, 113, 113, 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --track-common: #06638f;
    --track-pro:    #8a5308;
    --track-edu:    #0f7a52;
    --safety:       #b32b26;
    --safety-soft:  rgba(179, 43, 38, 0.08);
  }
}
:root[data-theme="light"] {
  --track-common: #06638f;
  --track-pro:    #8a5308;
  --track-edu:    #0f7a52;
  --safety:       #b32b26;
  --safety-soft:  rgba(179, 43, 38, 0.08);
}

/* --- 트랙 필터: 공통은 항상, 선택 트랙만 표시 ---
   Pro 모드에서도 EDU의 시뮬 기반 실습(E03·E04·E05·E10)은 보여 줍니다. */
html[data-track="edu"] .nav-track[data-track="pro"],
html[data-track="edu"] .track-block[data-track="pro"] { display: none; }
html[data-track="pro"] .track-block[data-track="edu"] .lesson-card:not([data-slug="e03"]):not([data-slug="e04"]):not([data-slug="e05"]):not([data-slug="e10"]) { display: none; }
html[data-track="pro"] .track-block[data-track="edu"] .part:not(:has(.lesson-card[data-slug="e03"], .lesson-card[data-slug="e04"], .lesson-card[data-slug="e05"], .lesson-card[data-slug="e10"])) { display: none; }
html[data-track="pro"] .nav-track[data-track="edu"] li:not(:has(a[data-slug="e03"], a[data-slug="e04"], a[data-slug="e05"], a[data-slug="e10"])) { display: none; }
html[data-track="pro"] .nav-track[data-track="edu"] .nav-part { display: none; }
html[data-track="pro"] .nav-track[data-track="edu"] .nav-track-title::after { content: " (시뮬 실습)"; }

.track-switch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin: 0 0 14px; padding: 4px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.track-switch button {
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.track-switch button.on { background: var(--accent-soft); color: var(--accent); }
.track-switch button:hover { color: var(--text); }

.nav-track { margin-top: 10px; }
.nav-track-title {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  margin: 14px 0 2px; padding-left: 10px; border-left: 3px solid currentColor;
}
.track-common { color: var(--track-common); }
.track-pro    { color: var(--track-pro); }
.track-edu    { color: var(--track-edu); }

.track-pill {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; margin-right: 6px;
}

.requires { margin-top: 10px; font-size: 13px; color: var(--text-faint); }
.requires a { font-family: var(--mono); font-weight: 700; margin-left: 6px; }

/* --- 홈: 트랙 선택 카드 --- */
.track-pick { margin: 0 0 26px; }
.track-pick-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 8px; }
.track-pick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.track-card {
  font: inherit; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  display: flex; flex-direction: column; gap: 4px;
}
.track-card b { font-size: 16px; }
.track-card span { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.track-card:hover { border-color: var(--accent-dim); }
.track-card.on { border-color: var(--accent); background: var(--accent-soft); }

.track-block { margin-bottom: 48px; }
.curriculum .track-h { border-left: 4px solid currentColor; padding-left: 12px; margin-bottom: 4px; }
.track-desc { color: var(--text-dim); margin: 0 0 20px; font-size: 14px; }
.track-note { color: var(--text-faint); font-size: 13px; margin: -8px 0 24px; }

/* --- 홈: 흐름도 --- */
.hero-flow {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 22px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.flow-step { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border-soft); }
.flow-step b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; flex: none; }
.flow-step span { display: flex; flex-direction: column; font-weight: 700; font-size: 14.5px; }
.flow-step small { font-weight: 500; color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; }
.flow-step.hot b { background: var(--safety-soft); color: var(--safety); }
.flow-arrow { text-align: center; color: var(--text-faint); line-height: 1; }

/* --- 콜아웃 추가 --- */
.callout-safety { border-color: var(--safety); border-left-width: 4px; background: var(--safety-soft); }
.callout-safety .callout-title { color: var(--safety); }
.callout-safety .callout-title::before { content: "\26A0  "; }
.callout-pro-only { border-left-color: var(--track-pro); }
.callout-pro-only .callout-title { color: var(--track-pro); }
.callout-edu-only { border-left-color: var(--track-edu); }
.callout-edu-only .callout-title { color: var(--track-edu); }
.callout-mission { border-left-color: var(--task); background: var(--task-soft); }
.callout-mission .callout-title { color: var(--task); }

.check-item { display: inline-flex; gap: 8px; align-items: baseline; cursor: pointer; }
.check-item input { accent-color: var(--accent); }
.lesson-body li:has(> .check-item) { list-style: none; margin-left: -20px; }

.math { font-family: "Cambria Math", "STIX Two Math", serif; font-style: italic; white-space: nowrap; }

/* --- 코드 블록 배지/실행 버튼 --- */
.code-head { gap: 8px; }
.code-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.code-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; }
.badge-robot { color: #fca5a5; border: 1px solid #b91c1c; background: rgba(185, 28, 28, .18); }
.badge-run { color: #86efac; border: 1px solid #15803d; background: rgba(21, 128, 61, .18); }
.code-robot { border-color: #7f1d1d; }
.run-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid #15803d; background: #14532d; color: #dcfce7;
}
.run-btn:hover { background: #166534; }

@media (max-width: 720px) {
  .track-pick-row { grid-template-columns: 1fr; }
}

.side-tools { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 1280px) { .track-pick-row { grid-template-columns: 1fr; } .track-card span br { display: none; } }

/* long URLs / identifiers must not widen the page on phones */
.lesson-body p, .lesson-body li, .callout-body { overflow-wrap: anywhere; }
.lesson-head h1 { overflow-wrap: anywhere; flex-wrap: wrap; row-gap: 2px; }