/* =========================================================
   ROBOGRAM AI·SW 실습 교안 — 공통 디자인 시스템 (v2)
   5단계 과정(얼굴인식/사물인식/페르소나/캡스톤/생성형AI) 공통 적용
   기존 페이지의 인라인 <style>은 그대로 두고,
   .course-page 스코프 하위 선택자로 겹쳐써서 안전하게 업그레이드합니다.
   ========================================================= */

:root{
  --bg:#f5f7fb; --ink:#172033; --muted:#64748b; --card:#fff; --line:#e5e7eb; --blue:#2563eb;
  --face1:#6d28d9;  --face2:#a855f7;
  --obj1:#0f766e;   --obj2:#22c55e;
  --persona1:#c2410c; --persona2:#f59e0b;
  --capstone1:#4338ca; --capstone2:#0ea5e9;
  --textimg1:#db2777; --textimg2:#f472b6;
  --rps1:#be123c; --rps2:#fb923c;
  --adaptive1:#6d28d9; --adaptive2:#06b6d4;
  --accent1:#2563eb; --accent2:#38bdf8;
  --shadow-sm:0 4px 14px rgba(15,23,42,.07);
  --shadow-md:0 12px 28px rgba(15,23,42,.10);
  --shadow-lg:0 22px 48px rgba(15,23,42,.18);
  --radius-sm:10px; --radius-md:18px; --radius-lg:26px; --radius-pill:999px;
}
body.course-face{--accent1:var(--face1);--accent2:var(--face2)}
body.course-object{--accent1:var(--obj1);--accent2:var(--obj2)}
body.course-persona{--accent1:var(--persona1);--accent2:var(--persona2)}
body.course-capstone{--accent1:var(--capstone1);--accent2:var(--capstone2)}
body.course-textimg{--accent1:var(--textimg1);--accent2:var(--textimg2)}
body.course-rps{--accent1:var(--rps1);--accent2:var(--rps2)}
body.course-adaptive{--accent1:var(--adaptive1);--accent2:var(--adaptive2)}

/* ---------- 상단 진행 단계 네비게이션 (5단계 로드맵) ---------- */
.stepnav{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.stepnav .inner{max-width:1120px;margin:0 auto;display:flex;gap:8px;padding:10px 18px;overflow-x:auto}
.stepnav .inner::-webkit-scrollbar{height:4px}
.stepnav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;color:#3c475c;background:#f1f5f9;border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px;font-weight:800;font-size:13px;transition:transform .15s ease,box-shadow .15s ease}
.stepnav a:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.stepnav a .n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(15,23,42,.08);font-size:10px;font-weight:900}
.stepnav a.active{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.stepnav a.active .n{background:rgba(255,255,255,.32)}
.stepnav a.bonus{border-style:dashed}
@media(max-width:700px){.stepnav a{font-size:12px;padding:6px 10px}}

/* ---------- 레슨 헤더: 코스별 그라디언트 자동 적용 ---------- */
.course-page .course-header{background:linear-gradient(135deg,var(--accent1),var(--accent2) 72%,#38bdf8)!important;position:relative;overflow:hidden}
.course-page .course-header:after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.course-page .course-header .step-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);border-radius:var(--radius-pill);padding:6px 13px;font-weight:900;font-size:13px;margin-bottom:10px}

/* ---------- 카드 / 섹션 업그레이드 ---------- */
.course-page .card{
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-md) !important;
  border:1px solid var(--line) !important;
  position:relative;
  padding-left:30px !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
.course-page .card:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,var(--accent1),var(--accent2))}
.course-page .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg) !important}
.course-page .card h2{border-left-color:var(--accent1) !important}

/* ---------- 알림 박스(notice) 업그레이드 ---------- */
.course-page .notice{border-radius:var(--radius-md) !important;border-width:1px !important;position:relative;padding-left:20px !important}
.course-page .notice.blue{background:linear-gradient(135deg,#eff6ff,#f5f9ff) !important}
.course-page .notice.green{background:linear-gradient(135deg,#f0fdf4,#f6fffa) !important}
.course-page .notice.orange{background:linear-gradient(135deg,#fff7ed,#fffaf3) !important}
.course-page .notice.red{background:linear-gradient(135deg,#fef2f2,#fff7f7) !important}

/* ---------- 코드 카드 업그레이드 ---------- */
.course-page .code-card{border-radius:var(--radius-md) !important;box-shadow:var(--shadow-sm);border-color:#1f2a44 !important}
.course-page .code-head{background:linear-gradient(135deg,#1f2937,#111827) !important}
.course-page .copy-btn{background:linear-gradient(135deg,var(--accent1),var(--accent2)) !important;transition:transform .12s ease}
.course-page .copy-btn:hover{transform:translateY(-1px) scale(1.03)}
.course-page .copy-btn.done{background:#16a34a !important}

/* ---------- 표 업그레이드 ---------- */
.course-page .table-wrap{border-radius:var(--radius-md) !important;box-shadow:var(--shadow-sm)}
.course-page table th{background:#f3f6ff !important}
.course-page table tr:hover td{background:#fafbff}

/* ---------- 체크리스트 업그레이드 ---------- */
.course-page .checklist label{border-radius:var(--radius-sm) !important;transition:background .12s ease}
.course-page .checklist label:hover{background:#eef2ff !important}

/* ---------- Python 설치 안내 카드 업그레이드 ---------- */
.course-page .python-setup{border-radius:var(--radius-lg) !important;box-shadow:var(--shadow-md) !important}

/* ---------- 뒤로가기 버튼 업그레이드 ---------- */
.course-page .back-home{background:linear-gradient(135deg,var(--accent1),var(--accent2)) !important;box-shadow:var(--shadow-lg) !important}

/* ---------- 난이도 / 소요시간 배지 ---------- */
.difficulty{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:5px 12px;font-size:12px;font-weight:900;margin-right:6px}
.difficulty.easy{background:#eafaf0;color:#15803d}
.difficulty.medium{background:#fff3e0;color:#c2410c}
.difficulty.hard{background:#fde8f3;color:#be185d}
.difficulty.bonus{background:#eef2ff;color:#4338ca}

/* ---------- 홈 화면: 5단계 로드맵 ---------- */
.roadmap{display:flex;flex-direction:column;gap:16px}
.roadmap .step-card{
  display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .16s ease,box-shadow .16s ease;position:relative;overflow:hidden;
}
.roadmap .step-card:hover{transform:translateY(-3px) translateX(2px);box-shadow:var(--shadow-lg)}
.roadmap .step-card .num{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:950;font-size:22px;box-shadow:var(--shadow-sm);
}
.roadmap .step-card h3{margin:0 0 4px;font-size:19px}
.roadmap .step-card p{margin:0;color:var(--muted);font-size:14px}
.roadmap .step-card .go{font-weight:900;color:#fff;background:#111827;border-radius:var(--radius-pill);padding:9px 16px;white-space:nowrap}
.roadmap .connector{width:3px;height:16px;background:var(--line);margin-left:30px}
@media(max-width:700px){
  .roadmap .step-card{grid-template-columns:48px 1fr;padding:16px}
  .roadmap .step-card .go{display:none}
  .roadmap .step-card .num{width:44px;height:44px;font-size:17px}
}