/* ============================================================
   과학쌤과연수(edu) 테마 층 — 바이브코딩 실습실 전용
   vendor/theme.css · vendor/base.css · style.css 다음에 불러와서
   색 토큰·글꼴·하드코딩 색만 edu 팔레트(네이비 · 틸 · 슬레이트)로 덮어쓴다.
   style.css 자체는 고치지 않는다 (원본 school/vibe-coding 과 맞춰 두기 쉽게).
   ============================================================ */

/* ---------- 색 토큰 · 밝게 (theme.css의 밝은 테마 이름이 cream) ---------- */
:root, :root[data-theme="cream"], [data-theme="cream"] {
  --bg-1:#FFFFFF; --bg-2:#F4F6F9;
  --paper:#FFFFFF; --paper-2:#F4F6F9;
  --ink:#0F1B2D; --ink-soft:#3C4A5E;
  --line:#DDE3EA; --line-soft:#EDF1F5;
  --primary:#132F4C; --primary-soft:#E8EFF6; --on-primary:#FFFFFF;
  --sky:#0E7490; --sage:#2E7D5B; --sage-soft:#E3F1EA; --rose:#B04A4A; --butter:#B26A00;
  --shadow:0 1px 2px rgba(15,27,45,.06), 0 8px 24px -12px rgba(15,27,45,.18);
  --bg-radial-1:transparent; --bg-radial-2:transparent; --grain:transparent;
  --edu-accent:#0E7490;
  --edu-font:'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  color-scheme:light;
}

/* ---------- 색 토큰 · 어둡게 ---------- */
:root[data-theme="dark"], [data-theme="dark"] {
  --bg-1:#07101A; --bg-2:#07101A;
  --paper:#0B1420; --paper-2:#121F31;
  --ink:#E8EEF5; --ink-soft:#B7C3D2;
  --line:#243549; --line-soft:#1B2A3D;
  --primary:#9CC3E6; --primary-soft:#16304B; --on-primary:#0B1420;
  --sky:#4FB3C9; --sage:#5DBB8A; --sage-soft:#16372A; --rose:#E08A8A; --butter:#E0A23A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --bg-radial-1:transparent; --bg-radial-2:transparent; --grain:transparent;
  --edu-accent:#4FB3C9;
  color-scheme:dark;
}

/* ---------- 종이 결 · 방사형 배경 제거 → 평평한 슬레이트 바탕 ---------- */
html, body { background:var(--bg-2); background-image:none; color:var(--ink) }
body::before { display:none }

/* ---------- 글꼴: Pretendard 하나로 (손글씨·명조·Space Grotesk 대체) ---------- */
body, .app, h1, h2, h3, h4, .btn, .seg, .seg button, .link,
input, select, textarea, kbd,
.eyebrow, .topbar h1, .hero h2, .panel-head h2, .lesson-head h2,
.group-head .num, .opt .logo, .stage-title .sn, .step-guide .stitle .sno,
.step-guide ol.acts .n, .hl::after, .copybox.prompt pre,
body.mode-agent .vc-top h1::after,
.cert-sheet, .cert-title, .cert-sub, .cert-fields .nm, .cert-text, .cert-date, .cert-sign .who {
  font-family:var(--edu-font);
}
h1, h2, h3, .topbar h1, .hero h2, .panel-head h2, .lesson-head h2 { font-weight:700; letter-spacing:-.02em }
.eyebrow { font-weight:700; letter-spacing:.14em; color:var(--edu-accent) }
.eyebrow.small { letter-spacing:.12em }

/* ---------- 버튼: 기본 = 네이비 채움 (그라데이션 제거) ---------- */
.btn { border-radius:var(--radius-md,12px); transition:background .15s, border-color .15s, color .15s, box-shadow .15s }
.btn:hover { transform:none }
.btn.primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary) }
.btn.primary:hover { background:var(--primary); filter:brightness(1.12); transform:none }
.btn:focus-visible, .seg button:focus-visible, a:focus-visible, .opt:focus-visible, .adv-card:focus-visible {
  outline:2px solid var(--edu-accent); outline-offset:2px;
}

/* ---------- 채움 색 위의 글자는 on-primary (다크에서 흰 글자가 하늘색 위에 뜨지 않게) ---------- */
.stepper button.cur, .step-guide .stitle .sno, .view-seg button.on,
.opt.on .check, .adv-card.on .check { color:var(--on-primary) }

/* ---------- 하드코딩 색 덮어쓰기 ---------- */
/* 프로젝트 카드 아이콘 타일 */
.proj-emoji { background:#132F4C; color:#fff; font-size:0 }
.proj-emoji svg { width:30px; height:30px }
[data-theme="dark"] .proj-emoji { background:#1E4A73 }
/* 수료증 엠블럼 (원본 #5B6FD6→#8FA3F0) */
.cert-emblem .ico { background:linear-gradient(135deg,#132F4C,#1E4A73) }
/* 번호 표시(원본 주황 #ff6b3d) → 틸 */
.step-guide ol.acts .n { background:#0E7490 }
.hl { outline-color:#0E7490 !important }
.hl::after { background:#0E7490 }
.cursor.click::after { border-color:#0E7490 }

/* ---------- 상단 바: 대문으로 돌아가기 + 선형 아이콘 ---------- */
.edu-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; transition:color .15s }
.edu-back:hover { color:var(--edu-accent) }
.edu-back .ei { width:16px; height:16px }
.ei { width:15px; height:15px; flex:none; vertical-align:-2px }
.topbar h1 { display:flex; align-items:center; gap:12px }
.h1-ico { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#132F4C; color:#fff; flex:none }
.h1-ico .ei { width:22px; height:22px }
[data-theme="dark"] .h1-ico { background:#1E4A73 }
.mode-seg button { display:inline-flex; align-items:center; gap:6px }
#btnRecommend .ei { width:16px; height:16px }

/* ---------- 모의 화면 · Cloudflare Pages (edu 판에만 있는 배포 선택지) ----------
   원본 style.css 를 건드리지 않으려고 여기에 둔다. 몸통은 테마 토큰이라 밝게/어둡게 모두 읽히고,
   Cloudflare 주황(#F38020)은 로고와 선택된 메뉴 막대에만 쓴다. */
.opt .logo svg { display:block }
.cf { background:var(--paper); color:var(--ink); min-height:340px; font-size:11.5px; line-height:1.5 }
.cf-top { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--paper) }
.cf-top b { font-size:12.5px; letter-spacing:-.01em }
.cf-logo { width:20px; height:20px; color:#F38020; flex:none }
.cf-acct { margin-left:8px; color:var(--ink-soft); font-size:10.5px }
.cf-main { display:grid; grid-template-columns:132px 1fr; min-height:340px }
.cf-main.three { grid-template-columns:120px 1fr 140px }
.cf-nav { background:var(--paper-2); border-right:1px solid var(--line); padding:8px 6px }
.cf-nav-i { padding:5px 8px; border-radius:6px; color:var(--ink-soft); margin:1px 0; border-left:3px solid transparent }
.cf-nav-i.on { background:var(--primary-soft); color:var(--ink); font-weight:700; border-left-color:#F38020 }
.cf-nav-group { padding:8px 8px 2px; color:var(--ink-soft); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase }
.cf-nav-sub { padding:2px 8px 2px 14px; color:var(--ink-soft); font-size:10px }
.cf-side { border-left:1px solid var(--line); background:var(--paper-2); padding:10px; display:flex; flex-direction:column; gap:10px }
.cf-side .cf-card { padding:8px 10px }
.cf-cont { padding:14px 16px; display:flex; flex-direction:column; gap:10px; overflow:auto; position:relative }
.cf-h { font-size:14px; font-weight:700; color:var(--ink) }
.cf-row { display:flex; gap:8px; align-items:center }
.cf-between { justify-content:space-between; flex-wrap:wrap }
.cf-muted { color:var(--ink-soft); font-size:10.5px }
.cf-link { color:var(--sky); font-size:10.5px }
.cf-mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px }
.cf-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--paper); display:flex; flex-direction:column; gap:6px }
.cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.cf-grid .cf-card { align-items:flex-start }
.cf-grid3 { grid-template-columns:1fr 1fr 1fr }
.cf-grid3 .cf-card.acc { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset }
.cf-optIcon { display:inline-flex; margin-bottom:2px }
.cf-ic { width:18px; height:18px; color:var(--ink-soft); flex:none }
.cf-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:6px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-weight:600; white-space:nowrap }
.cf-btn.pri { background:var(--primary); border-color:var(--primary); color:var(--on-primary) }
.cf-btn.off { opacity:.5 }
.cf-btn.sm { padding:3px 9px; font-size:10.5px }
.cf-chip { display:inline-block; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:1px 7px; font-size:9.5px; color:var(--ink-soft) }
.cf-input { display:block; border:1px solid var(--line); border-radius:6px; padding:6px 9px; background:var(--paper-2); color:var(--ink) }
.cf-field { display:flex; flex-direction:column; gap:3px }
.cf-field label { color:var(--ink-soft); font-size:10.5px }
.cf-tabs { display:flex; gap:14px; border-bottom:1px solid var(--line) }
.cf-tabs span { padding:4px 2px 6px; color:var(--ink-soft) }
.cf-tabs span.on { color:var(--ink); font-weight:700; box-shadow:inset 0 -2px 0 var(--primary) }
.cf-drop { border:2px dashed var(--line); border-radius:10px; padding:22px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--paper-2) }
.cf-drop .cf-ic { width:24px; height:24px }
.cf-drop.lg { padding:38px 16px }
.cf-file { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:6px }
.cf-file .cf-muted { margin-left:auto }
.cf-ok { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:8px; background:var(--sage-soft); color:var(--ink) }
.cf-ok .cf-ic { width:22px; height:22px; color:var(--sage) }
.cf-ok-t { color:var(--sage); font-weight:700 }
.cf-url { color:var(--sky); font-weight:700; font-size:12.5px }
.cf-suffix { color:var(--ink-soft); font-size:10.5px; white-space:nowrap }
.cf-avail { display:flex; align-items:center; gap:5px; color:var(--sage); font-size:10.5px }
.cf-avail .cf-ic { width:14px; height:14px; color:var(--sage) }
.cf-adv { color:var(--sky); font-size:10.5px; cursor:default }
.cf-table { padding:0; gap:0 }
.cf-th, .cf-tr { display:grid; grid-template-columns:1.1fr 1.3fr 1fr 24px; gap:8px; align-items:center; padding:6px 10px }
.cf-th { color:var(--ink-soft); font-size:10.5px; border-bottom:1px solid var(--line) }
.cf-tr { border-bottom:1px solid var(--line-soft) }
.cf-th.two, .cf-tr.two { grid-template-columns:1fr auto; padding:6px 0 }
.cf-th.three, .cf-tr.three { grid-template-columns:1fr auto auto; padding:6px 10px }
.cf-th.three span:first-child, .cf-tr.three span:first-child { display:flex; align-items:center; gap:6px }
.cf-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sage); margin-right:6px }
.cf-empty { color:var(--ink-soft); font-size:11px; text-align:center; padding:18px 0 }
.cf-menu { position:absolute; right:10px; top:26px; z-index:4; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:4px 0; min-width:190px }
.cf-menu div { padding:6px 12px }
.cf-auth { display:grid; place-items:center; padding:20px }
.cf-authbox { width:min(100%,260px); gap:8px; padding:16px }
.cf-authbox .cf-logo { width:28px; height:28px }
.cf-dialog { max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:10px; padding:18px 4px }
.cf-dialog-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:6px }
@media (max-width:560px) { .cf-main, .cf-main.three { grid-template-columns:1fr } .cf-nav, .cf-side { display:none } .cf-grid, .cf-grid3 { grid-template-columns:1fr } }

@media (prefers-reduced-motion: reduce) {
  .hl { animation:none }
  * { transition:none !important }
}