/* LabHub SPA 스타일시트.
 *
 * 값은 전부 /design.css 의 토큰이다. 여기에는 색·크기·간격의 실제 값을 적지
 * 않는다 — 브랜드나 다크 모드를 바꿀 때 design.css 한 곳만 고치면 되게.
 *
 * 시각 원칙
 *   - 카드보다 구분선. 같은 표면 위에서 --border 로 나누고, 카드는 목록의 항목처럼
 *     "고를 수 있는 것" 에만 쓴다. 그림자는 떠 있는 것(메뉴·모달·토스트)에만.
 *   - 위계는 세 단: 제목(--text · 굵게) / 본문(--text) / 보조(--dim, --dimmer).
 *   - 강조색은 인디고 하나. 상태색은 채점 결과·경고에만.
 *   - 실습 화면은 작업 공간이다. 장식보다 가독성 — 미션·힌트·채점 결과가 먼저 읽혀야 한다.
 *   - 전환은 짧게(--t), prefers-reduced-motion 이면 design.css 가 전부 끈다.
 *
 * 마크업은 app.js 가 만든다(보안 해시로 잠겨 있다). 클래스 이름은 그대로 두고
 * 스타일만 바꾼다.
 */
@import url("/design.css");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
img, svg { vertical-align: middle; }
code, pre, kbd, .mono { font-family: var(--font-mono); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ───────────────────────── 상단 바 ───────────────────────── */

/* 상단 바의 모양(높이·여백·로고 크기·배경)은 /nav.css 의 .siteHead·.siteHeadIn·
   .siteHead .brand 가 정한다. 여기서는 메인 앱의 서랍·모달보다 아래에 깔리도록
   쌓임 순서만 정한다. 예전에는 여기서 따로 정해 다른 페이지와 28px 어긋났다. */
#topbar { z-index: 60; }
/* 주 네비게이션의 모양은 /nav.css 에 있다(`.siteNav`). 메인 앱·블로그·코스
   페이지·도구·언어 학습·뉴스가 같은 파일을 쓴다 — 화면마다 다르게 보이지
   않게. 여기에는 이 앱에만 있는 것(서랍과의 관계)만 남긴다. */
.spacer { flex: 1; }

.iconBtn {
  width: 36px; height: 36px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface); color: var(--dim); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.iconBtn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }

#userbox { display: flex; align-items: center; gap: var(--sp-2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border-2); }
.avatarFallback {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.uname { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.planTag {
  font-size: 10.5px; font-weight: var(--fw-black); letter-spacing: var(--ls-caps); padding: 2px 7px;
  border-radius: var(--r-full); text-transform: uppercase; line-height: 1.5;
}
.planTag.pro { background: var(--pro); color: var(--pro-fg); }
.planTag.free { background: var(--surface-2); color: var(--dim); }

/* 프로필 메뉴 */
.userWrap { position: relative; }
.userBtn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 3px 8px 3px 3px; border-radius: var(--r-full);
  border: 1px solid transparent; background: none; color: inherit;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.userBtn:hover { background: var(--surface-2); border-color: var(--border); }
.userBtn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-2); }
.userBtn .caret { display: grid; place-items: center; color: var(--dimmer);
  transform: rotate(90deg); transition: transform var(--t) var(--ease); }
.userBtn[aria-expanded="true"] .caret { transform: rotate(-90deg); }

.userMenu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-2);
  animation: popIn var(--t) var(--ease-pop);
}
.userMenu.on { display: block; }

/* ── 알림함 ──
   종 모양 옆의 점은 "안 읽은 것이 있다" 만 말한다. 개수를 적으면 그 숫자를
   맞추려고 목록을 늘 받아야 하는데, 알림을 안 쓰는 사람에게도 요청이 하나 는다. */
.bellDot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-elev); }
#bellBtn { position: relative; }
.bellList { max-height: 60vh; overflow-y: auto; }
.bellItem { display: block; padding: 9px 10px; border-radius: 8px; color: var(--text);
  text-decoration: none; }
.bellItem:hover { background: var(--surface-2); }
.bellItem small { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.bellItem.unread { background: var(--accent-bg); }
.bellItem.unread:hover { background: var(--accent-bg); filter: brightness(.97); }
.userMenuHead { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.userMenuHead b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.userMenuHead small { display: block; color: var(--dimmer); font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userMenu a {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--text);
}
.userMenu a:hover, .userMenu a:focus-visible { background: var(--surface-2); }
.userMenu a.danger { color: var(--dimmer); }
.userMenu a.danger:hover { color: var(--err); background: var(--err-bg); }

/* ───────────────────────── 홈 (로그인 뒤) ───────────────────────── */

.homeHero {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4);
  align-items: stretch; margin: 0 0 var(--sp-6);
}
.homeGreet {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.homeGreet h1 { font-size: var(--fs-2xl); line-height: var(--lh-snug); margin: 4px 0 8px; }
.homeGreet p { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--dim); }
.homeGlance {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2);
  color: inherit; transition: border-color var(--t) var(--ease);
}
.homeGlance:hover { border-color: var(--border-2); }
.homeGlance b { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); }
.homeGlance .dim { font-size: var(--fs-xs); }

.homeDoors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-2); }
.homeDoor {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: 5px;
  color: inherit; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.homeDoor:hover { border-color: var(--accent); transform: translateY(-1px); }
.homeDoorIco {
  width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-text); margin-bottom: 4px;
}
.homeDoor b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.homeDoor .dim { font-size: var(--fs-xs); line-height: var(--lh-snug); }

.homeFeed { display: grid; gap: 0; margin-bottom: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.homePost {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
  color: inherit; border-top: 1px solid var(--border);
  transition: background var(--t) var(--ease);
}
.homePost:first-child { border-top: 0; }
.homePost:hover { background: var(--surface-2); }
.homePost b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.homePost .dim { font-size: var(--fs-xs); }

@media (max-width: 900px) {
  .homeHero { grid-template-columns: 1fr; }
  .homeDoors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .homeDoors { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .userBtn .uname, .userBtn .planTag { display: none; } }

/* ───────────────────────── 레이아웃 ───────────────────────── */

#app { flex: 1; }
/* width: 100% 가 왜 필요한가.
 *
 * body 는 `display: flex; flex-direction: column` 이다(위쪽 규칙). flex 자식에
 * 가로 방향 `margin: auto` 가 있으면 CSS 명세상 stretch 가 꺼지고, 자식 크기가
 * fit-content 로 정해진다. 그러면 본문 안에 넓은 것(코드 블록·표)이 하나만
 * 있어도 .wrap 이 그만큼 벌어지는데, 형제인 상단 바(.siteHead)와 구역 줄은
 * body 너비 그대로 남는다. 두 줄이 어긋나 보이는 것이 그래서다.
 *
 *   휴대폰 375px 에서 실측(2026-09-09): 상단 바 375, 본문 637.
 *   사용자가 사진으로 알려 주었다 — 회색 상단 바가 화면 중간에서 끊긴다.
 *
 * width: 100% 를 주면 stretch 가 꺼져 있어도 부모 너비를 따른다. max-width 가
 * 더 강하므로 넓은 화면의 모양은 한 픽셀도 달라지지 않는다. 넓은 것은 자기
 * 안에서 스크롤해야지(코드 블록의 overflow-x: auto) 문서를 밀어서는 안 된다. */
.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: var(--sp-7) var(--gutter) var(--sp-10); }
.wrap.narrow { max-width: var(--content-narrow); }
.wrap.wide { max-width: var(--content-wide); }

#foot {
  border-top: 1px solid var(--border); padding: var(--sp-5) var(--gutter);
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center;
  font-size: var(--fs-sm); color: var(--dimmer); background: var(--bg-elev);
}
#foot > span:first-child { color: var(--dim); font-weight: var(--fw-medium); }
.dim { color: var(--dimmer); }

h1 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2); font-weight: var(--fw-black); }
h2 { font-size: 21px; letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  margin: var(--sp-7) 0 var(--sp-3); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: var(--sp-5) 0 var(--sp-2); font-weight: var(--fw-bold); }
.sub { color: var(--dim); margin: 0 0 var(--sp-5); font-size: var(--fs-base); max-width: 68ch; }

/* ───────────────────────── 버튼 ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 16px; border-radius: var(--r); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-md);
  line-height: 1.3; white-space: nowrap;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-xs);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.pro { background: var(--pro); border-color: var(--pro); color: var(--pro-fg); }
.btn.pro:hover { filter: brightness(1.05); color: var(--pro-fg); border-color: var(--pro); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
.btn.danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn.sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.xs { padding: 3px 8px; font-size: var(--fs-2xs); border-radius: var(--r-sm); }
.btn.lg { padding: 12px 22px; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* 포커스 표시는 한 군데서 정한다(WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 2px;
  border-radius: var(--r);
}
#app:focus-visible { outline: none; }

/* ───────────────────────── 카드·격자·배지 ───────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
a.card { color: inherit; transition: border-color var(--t) var(--ease); }
a.card:hover { border-color: var(--accent); }
.grid { display: grid; gap: var(--sp-4); }
.g2 { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.6;
  background: var(--surface-2); color: var(--dim); border: 1px solid transparent;
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err  { background: var(--err-bg);  color: var(--err); }
.badge.pro  { background: var(--pro);     color: var(--pro-fg); }
.badge.free { background: var(--ok-bg); color: var(--ok); margin-left: 6px; }
.badge.danger { background: var(--err-bg); color: var(--err); }

/* ───────────────────────── 코스 카드 ───────────────────────── */

.courseCard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.courseCard:hover { border-color: hsl(var(--cat, var(--color-brand-500))); transform: translateY(-2px);
  box-shadow: var(--shadow); }
.courseArt {
  height: 126px; position: relative; overflow: hidden;
  background: var(--artBg); border-bottom: 1px solid var(--border);
}
.artSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.artWord { font-family: inherit; font-weight: var(--fw-black); opacity: .96; }
/* 코스 표지 그림(app/course_covers.py). SVG 표지 위에 놓이고, 없으면 SVG 가 그대로 보인다.
   제목·레벨·PRO 는 z-index 1 이라 그림 위에, 아래 그라디언트(::after)도 그림 위에 깔린다. */
.artImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.courseCover {
  display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--border); margin: 0 0 var(--sp-4);
}
.courseArt::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 74px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 16, .86));
}
.artTitle {
  position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; margin: 0;
  color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  letter-spacing: -.2px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.courseArt .lvl {
  position: absolute; top: 11px; right: 11px; z-index: 1;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-sm);
}
.courseArt .proTag {
  position: absolute; top: 11px; left: 11px; z-index: 1;
  background: var(--pro); color: var(--pro-fg);
  font-size: 10.5px; font-weight: var(--fw-black); padding: 2px 8px; border-radius: var(--r-sm);
}
.courseBody { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.courseBody h3 { margin: 0; font-size: var(--fs-base); line-height: var(--lh-snug); }
.courseBody > p:first-child { margin-top: 1px; }
.courseBody p { margin: 0; color: var(--dim); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.courseMeta { display: flex; gap: var(--sp-3); flex-wrap: wrap; color: var(--dimmer);
  font-size: var(--fs-xs); margin-top: 2px; }
.lockOverlay {
  position: absolute; inset: 0; background: rgba(6, 8, 14, .74); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: grid; place-items: center; text-align: center; padding: 18px; gap: 8px;
  align-content: center; color: #fff; border-radius: var(--r-lg);
}

/* 진행 바 */
.bar { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--accent);
  transition: width .5s var(--ease);
}
.barRow { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--dim); }
.barRow .bar { flex: 1; }

/* ───────────────────────── 러닝패스 ───────────────────────── */

.pathHead {
  border-radius: var(--r-xl); padding: var(--sp-7); margin-bottom: var(--sp-7); color: #fff;
  background: linear-gradient(120deg, hsl(var(--cat, var(--color-brand-500))), hsl(var(--cat, var(--color-brand-700))));
}
.pathHead h1 { color: #fff; font-size: var(--fs-4xl); }
.pathHead p { margin: 6px 0 0; opacity: .92; max-width: 720px; }
.pathHead .picon {
  width: 60px; height: 60px; border-radius: var(--r-xl); margin-bottom: var(--sp-4);
  overflow: hidden; position: relative; display: block;
  border: 1px solid rgba(255, 255, 255, .28);
}
.pathArt {
  height: 112px; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  position: relative; overflow: hidden;
  background: var(--artBg); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.pathCard { padding-top: var(--sp-5); }

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px;
  background: var(--border);
}
.tlItem { position: relative; margin-bottom: var(--sp-6); }
.tlItem::before {
  content: ""; position: absolute; left: -30px; top: 22px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg); border: 2.5px solid var(--border-2);
}
.tlItem.done::before { background: var(--ok-fill); border-color: var(--ok-fill); }
.tlItem.doing::before { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.tlStep { font-size: var(--fs-2xs); font-weight: var(--fw-black); letter-spacing: var(--ls-caps); color: var(--dimmer);
  text-transform: uppercase; margin-bottom: var(--sp-2); }

/* ───────────────────────── 코스 상세 ───────────────────────── */

.pathDetail { overflow-wrap: anywhere; }
.pathCrumb { margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--dim); }
.pathCrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.pathIntro { max-width: 76ch; margin-bottom: var(--sp-7); }
.pathIntro h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-3xl); line-height: var(--lh-snug); }
.pathIntro p { color: var(--dim); margin: 0; }
.pathWorkspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: var(--sp-8); }
.pathNext { padding: var(--sp-5); background: var(--surface-2); border-radius: var(--r-lg); }
.pathNext h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--dim); }
.pathNext h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: 0; }
.pathNext p { font-size: var(--fs-sm); color: var(--dim); margin: var(--sp-3) 0; }
.pathNext .btn { min-height: 44px; white-space: normal; margin-top: var(--sp-4); }
.pathProgressLabel { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-xs); }
.pathProgress { display: block; width: 100%; height: var(--sp-2); margin-top: var(--sp-2); accent-color: var(--accent); }
.pathCurriculum h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.pathCourseList { list-style: none; margin: 0; padding: 0; }
.pathCourse { border-top: 1px solid var(--border); }
.pathCourseLink { display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-5) 0; color: var(--text); text-decoration: none; }
.pathCourseLink:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--sp-1); }
a.pathCourseLink:hover h3 { color: var(--accent-text); text-decoration: underline; text-underline-offset: var(--sp-1); }
.pathCourseNumber { color: var(--dimmer); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.pathCourseBody { min-width: 0; }
.pathCourseBody h3 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); }
.pathCourseBody p { margin: var(--sp-2) 0; color: var(--dim); font-size: var(--fs-sm); }
.pathCourseMeta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--dimmer); }
.pathCourseStatus { font-size: var(--fs-xs); color: var(--dim); align-self: start; }
.pathCourse.next .pathCourseStatus { color: var(--accent-text); font-weight: var(--fw-semibold); }
.pathCourse.done .pathCourseNumber { color: var(--ok); }
@media (max-width: 940px) {
  .pathWorkspace { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}
@media (max-width: 600px) {
  .pathCourseLink { grid-template-columns: var(--sp-7) minmax(0, 1fr); gap: var(--sp-2); }
  .pathCourseStatus { grid-column: 2; }
}

.courseTop { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-6); align-items: start; }
@media (max-width: 940px) { .courseTop { grid-template-columns: 1fr; } }

/* 코스의 읽기 순서는 제목 → 시작 행동 → 목차다. 모바일에서도 DOM 순서를 유지한다. */
.courseDetail { overflow-wrap: anywhere; }
.courseDetail .courseTop { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "intro actions" "content actions"; }
.courseIntro { grid-area: intro; }
.courseContent { grid-area: content; min-width: 0; }
.courseContent > h2 { margin-top: 0; }
.courseFinder { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.courseFindQuery { display: flex; flex-direction: column; gap: var(--sp-2); }
.courseFindQuery > span { font-weight: var(--fw-semibold); }
.courseFindQuery input { width: 100%; min-width: 0; min-height: 44px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; }
.courseFindOptions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); }
.courseFindOptions label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 44px; }
.courseFindOptions select { min-height: 44px; max-width: 100%; padding: var(--sp-2); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); font: inherit; }
.courseFindOptions input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.courseFindOptions .btn { min-height: 44px; }
.courseFinder :is(input, select, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.courseFinder :is(input, select):focus { box-shadow: none; }
.courseFindCount { margin: var(--sp-2) 0 0; color: var(--dim); font-variant-numeric: tabular-nums; }
.courseFindEmpty { padding: var(--sp-4) 0; color: var(--dim); font-size: var(--fs-sm); word-break: keep-all; overflow-wrap: anywhere; }
.courseDetail :is(.module, .lessonRow, .courseFindEmpty)[hidden] { display: none; }
.courseActions { grid-area: actions; min-width: 0; }
.courseActions .btn { min-height: 44px; }
.courseDetail .courseIntro { background: transparent; color: var(--text); padding: 0; border-radius: 0; }
.courseDetail .courseIntro h1 { color: var(--text); font-size: var(--fs-3xl); margin-top: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.courseDetail .courseIntro p { color: var(--dim); opacity: 1; word-break: keep-all; overflow-wrap: anywhere; }
.courseDetail .courseIntro .heroChip { box-shadow: none; background: var(--surface-2); border-radius: var(--r); }
.courseDetail .courseIntro .chip { background: var(--surface-2); color: var(--dim); }
.courseNext { margin: var(--sp-4) 0; }
.courseNext > span { display: block; color: var(--dim); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.courseNext b { display: block; overflow-wrap: anywhere; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.courseCertificate { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--dim); margin: var(--sp-4) 0 var(--sp-2); }
.courseCertificate > span:last-child { font-variant-numeric: tabular-nums; }
.courseIncludes { margin-top: var(--sp-5); border-top: 1px solid var(--border); }
.courseIncludes summary, .courseReferences summary { padding-block: var(--sp-3); min-height: 44px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.courseIncludes summary:focus-visible, .courseReferences summary:focus-visible, summary.moduleHead:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.courseReferences { margin-top: var(--sp-5); border-top: 1px solid var(--border); }
.courseReferences p { font-size: var(--fs-sm); }
.courseDetail .inc { background: transparent; border-radius: 0; padding: var(--sp-2) 0; }
.courseActionStatus { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--dim); overflow-wrap: anywhere; }
.courseActionStatus[hidden] { display: none; }
.courseActionDetail { display: block; margin-top: var(--sp-2); color: var(--text); }
.courseProgress { display: block; width: 100%; height: var(--sp-2); border: 0; border-radius: var(--r-full); overflow: hidden; appearance: none; background: var(--surface-2); color: var(--ok); }
.courseProgress::-webkit-progress-bar { background: var(--surface-2); }
.courseProgress::-webkit-progress-value { background: var(--ok); }
.courseProgress::-moz-progress-bar { background: var(--ok); }
.courseDetail .lessonRow.next { background: var(--accent-bg); }
.courseDetail .lessonRow.next .go { color: var(--accent-text); }
.courseDetail .lessonRow .courseLessonMeta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.courseDetail .lessonRow b, .courseDetail .moduleHead h3 { overflow-wrap: anywhere; }
@media (max-width: 940px) {
  .courseDetail .courseTop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "actions" "content"; }
}
@media (max-width: 480px) {
  .courseDetail .courseIntro h1 { font-size: var(--fs-2xl); }
  .courseDetail .moduleHead { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4); }
  .courseDetail .moduleHead h3 { flex-basis: calc(100% - var(--sp-6)); }
  .courseDetail .moduleHead .cnt { padding-inline-start: var(--sp-5); }
  .courseDetail .lessonRow { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }
  .courseDetail .lessonRow .go { flex-basis: 100%; padding-inline-start: calc(var(--sp-7) + var(--sp-2)); }
}

.hero {
  border-radius: var(--r-xl); padding: var(--sp-7); color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, hsl(var(--cat, var(--color-brand-500))), hsl(var(--cat, var(--color-brand-700))));
}
.hero h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: 10px; }
.hero p { opacity: .94; margin: 0; max-width: 620px; }
.hero .chips { display: flex; gap: 8px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.hero .chip {
  background: rgba(255, 255, 255, .94); color: #12172a; border-radius: var(--r-sm);
  padding: 4px 11px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.hero .bigicon { position: absolute; right: 18px; bottom: -26px; width: 190px; height: 190px;
  opacity: .16; line-height: 1; pointer-events: none; }
.hero .heroChip {
  color: hsl(var(--cat, var(--color-brand-500)));
  width: 52px; height: 52px; border-radius: var(--r-xl); background: var(--artChip);
  display: grid; place-items: center; padding: 12px; margin-bottom: var(--sp-4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.includes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inc {
  background: var(--surface-2); border-radius: var(--r); padding: 11px 13px;
  font-size: var(--fs-sm); display: flex; gap: 8px; align-items: center;
}
.inc b { font-weight: var(--fw-bold); }

/* 모듈 아코디언 — 카드를 쌓지 않고 한 상자 안에서 줄로 나눈다 */
.module {
  border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: var(--sp-3);
  overflow: hidden; background: var(--surface);
}
.moduleHead {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer;
  background: var(--surface); user-select: none; transition: background var(--t) var(--ease);
}
.moduleHead:hover { background: var(--surface-2); }
.module.open .moduleHead, .module[open] .moduleHead { background: var(--bg-elev); border-bottom: 1px solid var(--border); }
summary.moduleHead { list-style: none; }
summary.moduleHead::-webkit-details-marker { display: none; }
.moduleHead .caret { color: var(--dimmer); transition: transform var(--t) var(--ease); font-size: 12px; }
.module.open .moduleHead .caret, .module[open] .moduleHead .caret { transform: rotate(90deg); }
.moduleHead h3 { margin: 0; font-size: var(--fs-base); flex: 1; }
.moduleHead .cnt { color: var(--dimmer); font-size: var(--fs-xs); white-space: nowrap; }
.moduleBody { display: none; padding: 4px 0; }
.module.open .moduleBody, .module[open] .moduleBody { display: block; }
.modSummary { padding: 12px 18px 6px; color: var(--dim); font-size: var(--fs-sm); }

.lessonRow {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-top: 1px solid var(--border); transition: background var(--t-fast) var(--ease);
}
.lessonRow:hover { background: var(--surface-2); }
.lessonRow .ico {
  width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--surface-2); color: var(--dim); font-size: 14px; flex-shrink: 0;
}
.lessonRow.done .ico { background: var(--ok-bg); color: var(--ok); }
.lessonRow .tt { flex: 1; min-width: 0; }
.lessonRow .tt b { font-weight: var(--fw-semibold); font-size: var(--fs-md); display: block; }
.lessonRow .tt span { color: var(--dimmer); font-size: var(--fs-xs); }
.lessonRow .go { color: var(--dimmer); font-size: var(--fs-xs); white-space: nowrap; }

/* ───────────────────────── 대시보드 ───────────────────────── */

.dashHead { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.dashHead .who { flex: 1; min-width: 220px; }
.dashHead h1 { margin: 0; }
.statRow { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px 16px; min-width: 104px;
}
.stat b { display: block; font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.stat span { color: var(--dimmer); font-size: var(--fs-xs); }

.dashboardFocus {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: var(--sp-4); margin: 0 0 var(--sp-6);
}
.todayTask, .focusMeta {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--sp-5);
}
.todayTask { background: linear-gradient(135deg, var(--surface), var(--accent-bg)); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.todayTask h2 { margin: 5px 0 6px; font-size: var(--fs-xl); }
.todayTask p { margin: 0 0 var(--sp-4); color: var(--dim); line-height: 1.55; }
.focusEyebrow {
  display: block; color: var(--accent-text); font-size: var(--fs-2xs); font-weight: var(--fw-black);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.focusMeta { display: grid; gap: var(--sp-4); }
.focusMeta > div { display: grid; gap: 5px; }
.focusMeta > div + div { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.focusMeta b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.focusMeta small { color: var(--dim); font-size: var(--fs-xs); }
.focusMeta a { color: var(--accent-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
@media (max-width: 760px) { .dashboardFocus { grid-template-columns: 1fr; } }

.enrolRow {
  display: flex; align-items: center; gap: var(--sp-4); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  margin-bottom: 10px; flex-wrap: wrap;
}
.enrolRow .eIcon { font-size: 26px; }
.enrolRow .eMain { flex: 1; min-width: 200px; }
.enrolRow .eMain b { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

/* ───────────────────────── 실습 화면 ─────────────────────────
   작업 공간이다. 왼쪽은 미션·힌트·채점, 오른쪽은 터미널. 장식 대신 대비와
   위계로 읽힌다: 미션(--stepTask)은 강조색 선, 힌트는 경고색 판, 채점은 상태색. */

.labWrap { display: grid; grid-template-columns: 430px 1fr; gap: 0; height: calc(100vh - var(--topbar-h)); }
@media (max-width: 1000px) { .labWrap { grid-template-columns: 1fr; height: auto; } }

.labLeft {
  border-right: 1px solid var(--border); overflow-y: auto; padding: var(--sp-5);
  background: var(--bg-elev);
}
.labRight {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden; background: var(--term-bg);
}
/* 준비/오류가 과제를 덮지 않는다. 터미널 자리 안에서만 상태와 다음 행동을 보인다. */
.labEnvPanel { background: var(--surface); color: var(--text); border-radius: var(--r-lg); margin: var(--sp-4); padding: var(--sp-6); overflow-wrap: anywhere; }
.labEnvBody { max-width: 60ch; margin-inline: auto; }
.labEnvBody h2 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: 0 0 var(--sp-2); text-wrap: balance; }
.labEnvBody p { line-height: var(--lh-base); }
.labEnvBody .row { flex-wrap: wrap; }
.labEnvBody .btn { min-height: calc(var(--sp-8) + var(--sp-1)); white-space: normal; }
.labEnvBody .loadFoot { font-variant-numeric: tabular-nums; }
.labRight:has(.labEnvPanel) { overflow-y: auto; background: var(--surface-2); }
#term:has(> .labEnvPanel) { flex: 0 0 auto; min-height: 0; height: auto; }
#labInstructions summary { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
@media (max-width: 640px) {
  .labEnvPanel { margin: var(--sp-2); padding: var(--sp-4); }
}
.termBar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-elev); flex-wrap: wrap;
}
.termBar .t { font-size: var(--fs-sm); color: var(--dim); font-weight: var(--fw-medium); }
#term { flex: 1 1 0; padding: 8px 10px; min-height: 0; position: relative; }

.webPane {
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  border-top: 1px solid var(--border);
}
.webPane[hidden] { display: none; }
.webBar { flex-wrap: nowrap; gap: 6px; }
.webPort, .webPath {
  height: 28px; font-size: var(--fs-xs); padding: 0 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.webPort { flex: 0 0 auto; }
.webPath { flex: 1; min-width: 60px; font-family: var(--font-mono); }
#webFrame { flex: 1 1 0; width: 100%; border: 0; background: #fff; min-height: 0; }
#previewBtn.on { background: var(--surface-2); border-color: var(--border-2); }

/* 떠 있는 피드백·도움말 단추 */
.widgetDock {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
}
@media (max-width: 820px) {
  #app { padding-bottom: 68px; }
  #foot { padding-bottom: 64px; }
  .widgetDock { right: 12px; bottom: 12px; }
}

/* 단계 레일 — 한 번에 한 단계 */
.stepRail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.stepDot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--dim);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.stepDot:hover { border-color: var(--accent); color: var(--text); }
.stepDot.on { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.stepDot.ok { border-color: var(--ok-fill); color: var(--ok); background: var(--ok-bg); }
.stepDot.ok.on { background: var(--ok-fill); color: #fff; border-color: var(--ok-fill); }

.stepPager { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stepPager .dim { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.stepPager .btn { min-width: 34px; font-size: 16px; line-height: 1; }
.stepPager .btn[disabled] { opacity: .35; cursor: default; }

@media (max-width: 560px) {
  .stepRail { gap: 5px; }
  .stepDot { width: 28px; height: 28px; font-size: var(--fs-xs); }
}

/* 정답 보기 — 최후의 수단이라는 것이 보이게 */
.solBtn { border-style: dashed; }
.solBox {
  margin-top: 10px; border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border));
  border-radius: var(--r); overflow: hidden; background: var(--surface);
}
.solHead {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.solHead .dim { font-size: var(--fs-2xs); flex: 1; color: var(--warn); opacity: .85; font-weight: var(--fw-regular); }
.solBox pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--term-bg); color: var(--term-fg); font-size: var(--fs-sm); line-height: 1.65;
}

@media (max-width: 1000px) {
  .labRight { overflow: visible; }
  #term { flex: 0 0 auto; height: 58vh; min-height: 320px; }
  .webPane { flex: 0 0 auto; height: 52vh; min-height: 300px; }
  #webFrame { min-height: 260px; }
}
@media (max-width: 820px) {
  #term { height: 52vh; min-height: 280px; }
  .webPane { height: 46vh; min-height: 240px; }
}

.clock {
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--dim);
}
.clock.warn { background: var(--warn-bg); color: var(--warn); }
.clock.err  { background: var(--err-bg);  color: var(--err); animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* 단계 카드 — 채점 결과는 왼쪽 굵은 선과 배지 색으로 말한다 */
.step {
  border: 1px solid var(--border); border-left: 3px solid var(--border-2);
  border-radius: var(--r); padding: 12px 14px;
  margin-bottom: 9px; background: var(--surface);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.step.pass { border-color: color-mix(in srgb, var(--ok-fill) 45%, var(--border)); border-left-color: var(--ok-fill); background: var(--ok-bg); }
.step.fail { border-left-color: var(--err-fill); border-color: color-mix(in srgb, var(--err-fill) 45%, var(--border)); }
.step.checking, .step.not-ready { border-left-color: var(--warn-fill); }
.step.system-error { border-left-color: var(--err-fill); background: var(--err-bg); }
.stepTop { display: flex; align-items: center; gap: 10px; }
.stepNo {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-bold); flex-shrink: 0;
}
.step.pass .stepNo { background: var(--ok-fill); color: #fff; }
.stepHeading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stepTitle { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.stepSuccess { color: var(--dim); font-size: var(--fs-xs); line-height: 1.45; }
.stepStatus {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  color: var(--dim); font-size: var(--fs-2xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.step.pass .stepStatus { color: var(--ok); }
.step.fail .stepStatus, .step.system-error .stepStatus { color: var(--err); }
.step.checking .stepStatus, .step.not-ready .stepStatus { color: var(--warn); }
.stepDetail { color: var(--dim); font-size: var(--fs-xs); margin-top: 8px; line-height: 1.5; }
.stepSystem {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding: 9px 11px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--dim);
  font-size: var(--fs-xs); line-height: 1.5;
}
.stepSystem .ic { flex-shrink: 0; margin-top: 2px; }
.stepNext { margin-top: 0; }

/* 단계 아래의 이동 줄.
   위쪽 화살표 두 개만으로는 다음으로 넘어갈 자리를 못 찾는다는 신고가 있었다
   (2026-09-07). 통과했을 때만 나타나던 '다음 단계' 를 항상 보이는 줄로 바꾸고,
   아직 못 푼 단계에서도 '건너뛰고 다음' 으로 넘어갈 수 있게 했다. */
.stepFoot {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.stepFoot .stepFootAt { flex: 1; text-align: center; font-size: var(--fs-2xs); }
.stepFoot > .btn:first-child { margin-right: 0; }

.labCompletion {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4);
  align-items: center; margin: var(--sp-4) 0; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ok-fill) 50%, var(--border)); border-radius: var(--r-lg); background: var(--ok-bg);
}
.labCompletion[hidden] { display: none; }
.completionMark {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ok-fill); color: #fff;
}
.completionMain h3 { margin: 3px 0 8px; font-size: var(--fs-base); }
.completionMain ul {
  display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; margin: 0;
  color: var(--dim); font-size: var(--fs-xs);
}
.completionMain li { display: inline-flex; align-items: center; gap: 4px; }
.completionLink { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.completionLink .dim { font-size: var(--fs-xs); line-height: 1.45; }
.completionNext { white-space: normal; text-align: center; justify-content: center; }
@media (max-width: 620px) {
  .labCompletion { grid-template-columns: auto 1fr; }
  .completionNext { grid-column: 1 / -1; }
}

.hintbox {
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r);
  background: var(--warn-bg); color: var(--warn); font-size: var(--fs-sm); line-height: 1.6;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.hintbox b { display: block; margin-bottom: 3px; }

@media (max-width: 560px) {
  .stepTop { align-items: flex-start; flex-wrap: wrap; }
  .stepHeading { flex-basis: calc(100% - 36px); }
  .stepStatus { margin-left: 35px; }
  .stepTop > [data-check] { margin-left: auto; }
}

/* 스텝의 미션 — 무엇을 해야 하는지는 항상 보인다 */
.stepTask {
  margin: 10px 0 0; padding: 11px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg); border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--fs-sm); line-height: 1.7; color: var(--text);
}
.stepTask p { margin: 0 0 6px; }
.stepTask p:last-child { margin-bottom: 0; }
.stepTask code {
  font-size: var(--fs-xs); padding: 1px 5px; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.stepTask pre { margin: 8px 0 0; overflow-x: auto; background: var(--term-bg); color: var(--term-fg);
  padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.6; }
.stepTask pre code { background: none; border: 0; padding: 0; color: inherit; }

/* 파일 형식 예시 */
.fsWrap { margin-top: 11px; }
.fsItem {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); padding: 10px 12px; margin-top: 9px;
}
.fsItem:first-child { margin-top: 0; }
.fsHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsWhat { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--dim); }
.fsPath {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 2px 7px; word-break: break-all;
}
.fsCopy { margin-left: auto; flex-shrink: 0; }
.fsNote { margin: 7px 0 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--dim); }
.fsItem pre {
  margin: 8px 0 0; background: var(--term-bg); color: var(--term-fg);
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--border);
  overflow-x: auto; font-size: var(--fs-xs); line-height: 1.55;
}
.fsItem pre code { white-space: pre; background: none; border: 0; padding: 0; color: inherit; }
.fsSection { margin-top: var(--sp-4); }
.fsSection h3 { font-size: var(--fs-base); margin: 0 0 10px; }
.fsStep { margin-bottom: var(--sp-4); }
.fsStepTitle {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 7px;
}
.fsStepNo {
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); flex-shrink: 0;
}

/* ───────────────────────── 마크다운 본문 ───────────────────────── */

.md { font-size: var(--fs-base); line-height: var(--lh-loose); }
.md h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 10px; }
.md h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 8px; }
.md p { margin: 0 0 12px; }
.md ul, .md ol { padding-left: 22px; margin: 0 0 12px; }
.md li { margin-bottom: 5px; }
.md code {
  background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-xs); font-size: .88em;
  border: 1px solid var(--border);
}
.md pre {
  background: var(--term-bg); color: var(--term-fg); padding: 14px 16px; border-radius: var(--r);
  overflow-x: auto; font-size: var(--fs-sm); line-height: 1.6; border: 1px solid var(--border);
}
.md pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.md table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: var(--fs-sm); }
.md th, .md td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; }
.md th { background: var(--surface-2); font-weight: var(--fw-bold); }
.md blockquote {
  margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent);
  color: var(--dim);
}
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.md a:hover { text-decoration-color: currentColor; }

/* ───────────────────────── 로딩·토스트 ───────────────────────── */

.loading {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px;
}
.loadCard {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: var(--sp-6);
  width: min(440px, 100%); text-align: left;
  animation: popIn var(--t-slow) var(--ease-pop);
}
@keyframes popIn { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.loadTop { display: flex; gap: 15px; align-items: center; margin-bottom: 14px; }
.loadTop b { font-size: var(--fs-base); display: block; }
.loader {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loadMsg { color: var(--dim); font-size: var(--fs-sm); min-height: 20px; }
.loadFoot { color: var(--dimmer); font-size: var(--fs-xs); margin-top: 14px; }

.loadBar { height: 3px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.loadBar > i {
  display: block; height: 100%; width: 38%; border-radius: var(--r-full);
  background: var(--accent);
  animation: slide 1.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.quote {
  margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  transition: opacity var(--t-slow);
}
.quote blockquote { margin: 0 0 7px; font-size: var(--fs-md); line-height: 1.7; color: var(--text); }
.quote figcaption { font-size: var(--fs-xs); color: var(--dimmer); }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 320;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  padding: 12px 16px; box-shadow: var(--shadow-lg); max-width: 340px;
  animation: slideIn var(--t-slow) var(--ease-pop);
  display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md);
}
@keyframes slideIn { from { transform: translateY(14px); opacity: 0; } }
.toast .tIco { flex-shrink: 0; margin-top: 1px; }
.toast.t-ok   .tIco { color: var(--ok); }
.toast.t-warn .tIco { color: var(--warn); }
.toast.t-err  .tIco { color: var(--err); }
.toast.t-ok   { border-left: 3px solid var(--ok-fill); }
.toast.t-warn { border-left: 3px solid var(--warn-fill); }
.toast.t-err  { border-left: 3px solid var(--err-fill); }

/* ───────────────────────── 퀴즈 ───────────────────────── */

.q { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5);
  margin-bottom: var(--sp-4); background: var(--surface); }
.q .qn { font-size: var(--fs-2xs); font-weight: var(--fw-black); color: var(--accent-text); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.q h3 { margin: 6px 0 14px; font-size: var(--fs-base); line-height: 1.5; }
.q code, .explain code {
  background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-xs);
  font-size: .9em; border: 1px solid var(--border);
}
.q strong, .explain strong { font-weight: var(--fw-bold); }
.choice {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px;
  cursor: pointer; font-size: var(--fs-md); line-height: 1.55; background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--accent); background: var(--surface-2); }
.choice.sel { border-color: var(--accent); background: var(--accent-bg); }
.choice.sel .k { background: var(--accent); color: var(--on-accent); }
.choice.right { border-color: var(--ok-fill); background: var(--ok-bg); }
.choice.right .k { background: var(--ok-fill); color: #fff; }
.choice.wrong { border-color: var(--err-fill); background: var(--err-bg); }
.choice.wrong .k { background: var(--err-fill); color: #fff; }
.choice .k {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
  display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); flex-shrink: 0;
  margin-top: 1px; color: var(--dim);
}
.explain {
  margin-top: 11px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--dim);
}
.scoreBig { font-size: 46px; font-weight: var(--fw-black); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.readingCompletion { margin-top: var(--sp-5); }
.readingCompletion p { font-size: var(--fs-sm); line-height: var(--lh-base); word-break: keep-all; overflow-wrap: anywhere; }
.readingCompletion .row { flex-wrap: wrap; }
.readingCompletion .btn { min-height: calc(var(--sp-8) + var(--sp-1)); }
.quizPage .choice { width: 100%; font-family: inherit; text-align: left; color: var(--text); min-height: calc(var(--sp-8) + var(--sp-1)); }
.quizPage .choice:disabled { cursor: default; opacity: 1; }
.quizPage .choice > span:not(.k) { min-width: 0; overflow-wrap: anywhere; }
.quizPage .choiceOutcome { margin-left: auto; font-size: var(--fs-xs); flex: none; }
.quizPage [hidden] { display: none !important; }
.quizPage h2:focus, .quizPage h3:focus { outline: 2px solid var(--accent); outline-offset: var(--sp-1); }
.quizPage h2, .quizPage h3 { scroll-margin-top: calc(var(--topbar-h) + var(--sp-5)); }
.quizResult { margin-top: var(--sp-5); }
.quizResult .scoreBig { font-size: var(--fs-3xl); }
.quizResult h2, .quizPractice h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.quizActions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.quizPractice { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.quizPractice p, #quizStatus { word-break: keep-all; overflow-wrap: anywhere; }
.practiceFeedback { margin-top: var(--sp-3); }
.practiceFeedback p { color: var(--dim); }
@media (max-width: 640px) { .quizPage .choice { flex-wrap: wrap; } .quizPage .choice > span:nth-child(2) { flex: 1; } }

/* ───────────────────────── 표·폼·저작 ───────────────────────── */

.modBlock { border-left: 2px solid var(--border); padding: 8px 0 8px 13px; margin-bottom: 12px; }
.lessonList { margin-top: 7px; }
.modBlock .lessonRow { gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.modBlock .lessonRow:first-child { border-top: 0; }

.fld { display: block; margin-bottom: 11px; font-size: var(--fs-xs); color: var(--dim); }
.fld input, .fld select, .fld textarea { display: block; width: 100%; margin-top: 4px; font-size: var(--fs-sm); color: var(--text); }
.fld textarea { resize: vertical; line-height: 1.6; }
.fld input[readonly] { opacity: .65; }

.qEdit { border: 1px solid var(--border); border-radius: var(--r); padding: 11px 13px; margin-bottom: 11px; background: var(--surface-2); }
.qChoice { gap: 8px; margin-bottom: 6px; align-items: center; }
.qChoice input[type=radio] { flex-shrink: 0; width: auto; margin: 0; }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.tbl th { color: var(--dimmer); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: var(--ls-caps); background: var(--bg-elev); }
.tbl tr:hover td { background: var(--surface-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tblWrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; }
.tabs button {
  padding: 10px 14px; border: 0; background: none; color: var(--dim); font-weight: var(--fw-semibold);
  font-size: var(--fs-md); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--accent-text); border-bottom-color: var(--accent); }

.nodeCard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 17px; }
.nodeCard .nm { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.nodeCard .nm b { font-size: var(--fs-md); }
.meter { margin-bottom: 9px; }
.meter .lab { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--dim); margin-bottom: 4px; }

input[type=text], input[type=date], input[type=number], input[type=email], input[type=password],
input[type=search], input[type=url], select, textarea {
  background: var(--surface); border: 1px solid var(--border-input); color: var(--text);
  border-radius: var(--r); padding: 9px 12px; font: inherit; font-size: var(--fs-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--dimmer); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus); }
label.fld { display: block; margin-bottom: 12px; }
label.fld span { display: block; font-size: var(--fs-xs); color: var(--dim); margin-bottom: 5px; font-weight: var(--fw-semibold); }
label.fld input, label.fld select { width: 100%; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ───────────────────────── AI 조교 ───────────────────────── */

.aiPanel { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-top: var(--sp-4); overflow: hidden; }
.aiHead { display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  background: var(--bg-elev); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.aiLog { max-height: 320px; overflow-y: auto; padding: 14px 15px; font-size: var(--fs-sm); line-height: 1.7; }
.aiMsg { margin-bottom: 13px; }
.aiMsg.me { color: var(--dim); }
.aiMsg.me b, .aiMsg.ai b { display: block; font-size: var(--fs-2xs); color: var(--dimmer);
  margin-bottom: 3px; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.aiForm { display: flex; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--border); }
.aiForm input { flex: 1; }

/* ───────────────────────── 랜딩 ───────────────────────── */

.empty { text-align: center; padding: var(--sp-9) 20px; color: var(--dimmer); }
.empty .big { font-size: 42px; margin-bottom: 12px; }

.landing { text-align: center; padding: var(--sp-9) 20px var(--sp-7); position: relative; }
.landing::before {
  /* 히어로 뒤의 옅은 빛. 그라데이션은 로고와 여기에만. */
  content: ""; position: absolute; inset: -40px 0 auto 0; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.landingEyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; margin: 0 auto var(--sp-4); padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.landing h1 { font-size: var(--fs-display); letter-spacing: -.035em; line-height: 1.15; margin-bottom: 0;
  text-wrap: balance; }
.landing h1 em {
  font-style: normal;
  background: linear-gradient(95deg, var(--accent-text), hsl(var(--color-brand-500)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing p.lead { font-size: var(--fs-lg); color: var(--dim); max-width: 600px; margin: var(--sp-4) auto var(--sp-6);
  line-height: 1.6; text-wrap: pretty; }
.landingCtas { gap: 10px; }

/* 랜딩 특징 카드 */
.featIco {
  width: 40px; height: 40px; border-radius: var(--r-lg); margin-bottom: 12px;
  display: grid; place-items: center;
  color: var(--accent-text); background: var(--accent-bg);
}

/* ───────────────────────── 3문항 온보딩 ───────────────────────── */

.startWrap { max-width: 760px; padding-top: clamp(28px, 7vw, 76px); }
.onboardingCard {
  max-width: 680px; min-height: 420px; margin: 0 auto; padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); display: flex; flex-direction: column;
}
.onboardingTop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px; color: var(--dim); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.skipButton { min-height: 44px; padding: 8px 2px 8px 14px; border: 0; background: transparent; color: var(--dim); }
.skipButton:hover { color: var(--accent-text); }
.progressLabel { color: var(--dimmer); font-size: var(--fs-xs); margin-bottom: 7px; }
#onboardingProgress {
  width: 100%; height: 6px; margin: 0 0 30px; overflow: hidden;
  appearance: none; border: 0; border-radius: var(--r-full); background: var(--surface-3);
}
#onboardingProgress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-full); }
#onboardingProgress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-full); }
#onboardingProgress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-full); }
.onboardingCard h1 { max-width: 560px; margin-bottom: 24px; line-height: 1.3; font-size: var(--fs-2xl); }
.choiceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choiceButton {
  min-height: 58px; padding: 13px 16px; border: 1px solid var(--border-2);
  border-radius: var(--r); background: var(--surface); color: var(--text);
  font-weight: var(--fw-semibold); text-align: left;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.choiceButton:hover, .choiceButton[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent-fg);
}
.onboardingNote { margin: auto 0 0; padding-top: 24px; color: var(--dimmer); font-size: var(--fs-xs); }
.srLive, .srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.recommendationLoading { align-items: center; justify-content: center; text-align: center; }
.recommendationLoading .loader { margin-bottom: 24px; }
.recommendationCard { text-align: center; align-items: center; }
.resultMark {
  width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 14px;
  border-radius: 50%; background: var(--ok-bg); color: var(--ok);
}
.resultEyebrow { margin: 0 0 7px; color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.recommendationReason { max-width: 520px; margin: 0 auto 24px; color: var(--dim); line-height: 1.7; }
.recommendationMeta {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 24px;
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.recommendationMeta div { padding: 14px; background: var(--bg-elev); }
.recommendationMeta div + div { border-left: 1px solid var(--border); }
.recommendationMeta dt { color: var(--dimmer); font-size: var(--fs-xs); }
.recommendationMeta dd { margin: 4px 0 0; color: var(--text); font-weight: var(--fw-bold); }
.recommendationCta { max-width: 360px; min-height: 50px; }
.secondaryLink { margin-top: 17px; color: var(--dim); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.resultLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.googleConnectLink {
  display: inline-block; margin-top: 11px; color: var(--accent-text); font-size: var(--fs-xs);
  text-decoration: underline; text-underline-offset: 3px;
}
.nextGoal {
  width: 100%; margin: 0 0 22px; padding: 14px 16px; border-radius: var(--r);
  background: var(--accent-bg); text-align: left; display: flex; gap: 6px; flex-direction: column;
}
.nextGoal b { color: var(--accent-fg); font-size: var(--fs-xs); }
.nextGoal span { color: var(--text); font-size: var(--fs-sm); line-height: 1.55; }
.activationNameForm {
  width: 100%; max-width: 520px; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--bg-elev); text-align: left;
}
.activationNameForm > label { display: block; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.activationNameRow { display: flex; gap: 8px; align-items: stretch; }
.activationNameRow input { flex: 1; min-width: 0; min-height: 48px; }
.activationNameRow .recommendationCta { flex: 0 0 auto; }
.activationNameForm p { margin: 7px 0 0; font-size: var(--fs-xs); }
.fieldError { color: var(--err); }

/* ───────────────────────── 요금제 ───────────────────────── */

.priceCard {
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-6);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-4);
}
.priceCard.hl { border-color: var(--pro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pro) 22%, transparent); }
.priceCard .amt { font-size: var(--fs-4xl); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); }
.priceCard ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.priceCard li { padding: 6px 0; font-size: var(--fs-md); display: flex; gap: 8px; }
.priceGrid { grid-template-columns: 1fr 1fr; margin-top: var(--sp-6); }
.grid2 { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .priceGrid, .grid2 { grid-template-columns: 1fr; } }
.wasPrice { color: var(--dimmer); font-size: .5em; font-weight: var(--fw-semibold); margin-right: .28em; text-decoration-thickness: 2px; }
.promoNote { font-size: var(--fs-sm); line-height: 1.55; color: var(--dim); margin: -4px 0 12px; }

@media (max-width: 720px) {
  .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-9); }
  h1 { font-size: var(--fs-2xl); }
  .landing { padding-top: var(--sp-7); }
  .landing h1 { font-size: 32px; }
  .landingCtas { align-items: stretch; flex-direction: column; }
  .landingCtas .btn, .choiceButton, .recommendationCta { min-height: 44px; width: 100%; }
  .onboardingCard { min-height: 0; padding: 22px 18px 26px; }
  .choiceGrid { grid-template-columns: 1fr; }
  .recommendationMeta { grid-template-columns: 1fr; }
  .recommendationMeta div + div { border-left: 0; border-top: 1px solid var(--border); }
  .activationNameRow { flex-direction: column; }
  .activationNameRow .recommendationCta { max-width: none; }
  .resultLinks { flex-direction: column; gap: 0; }
}

/* ───────────────────── 레슨 사이드바 (진도) ───────────────────── */

.lessonLayout { display: grid; grid-template-columns: 296px 1fr; min-height: calc(100vh - var(--topbar-h)); }
.lessonLayout.sideHidden { grid-template-columns: 1fr; }
@media (max-width: 900px) { .lessonLayout { grid-template-columns: 1fr; } }

/* 넓은 화면: 본문 옆에 붙어 함께 스크롤. ⚠️ 아래 미디어 쿼리보다 앞에 있어야 한다. */
.lessonSide {
  border-right: 1px solid var(--border); background: var(--bg-elev);
  overflow-y: auto; max-height: calc(100vh - var(--topbar-h));
  position: sticky; top: var(--topbar-h); padding: var(--sp-4) 0 var(--sp-7);
}
@media (max-width: 900px) {
  .lessonSide {
    position: fixed; inset: var(--topbar-h) auto 0 0; z-index: 58;
    width: min(300px, 86vw); max-height: none; overflow-y: auto;
    border-right: 1px solid var(--border); border-bottom: 0;
    box-shadow: var(--shadow-lg);
    transform: translateX(-102%); transition: transform var(--t-slow) var(--ease);
  }
  .lessonLayout:not(.sideHidden) .lessonSide { transform: none; }
  .lessonLayout:not(.sideHidden)::after {
    content: ""; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 57; background: var(--overlay);
  }
  .lessonLayout .wrap > .dim:first-child,
  .lessonLayout .labLeft > .dim:first-child { padding-left: 42px; min-height: 34px; }
}
@media (min-width: 901px) { .lessonLayout.sideHidden .lessonSide { display: none; } }

.sideTop { padding: 0 18px 14px; border-bottom: 1px solid var(--border); }
.backLink { color: var(--accent-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  display: inline-block; margin-bottom: 10px; }
.backLink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 고정 목차 버튼과 뒤로가기 링크의 클릭 영역을 분리한다. */
.sideTop .backLink { margin-left: 32px; min-height: 28px; display: inline-flex; align-items: center; }
.sideTop h3 { margin: 0 0 12px; font-size: var(--fs-base); line-height: 1.45; }
.sideProgTxt { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--dim); margin-top: 7px; }
.sideModCount { padding: 13px 18px 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--dimmer);
  text-transform: uppercase; letter-spacing: var(--ls-caps); }

.sideMod { border-bottom: 1px solid var(--border); }
.sideModHead {
  width: 100%; border: 0; background: none; text-align: left; color: inherit;
  display: flex; align-items: center; gap: 11px; padding: 11px 18px;
  cursor: pointer; user-select: none; transition: background var(--t-fast) var(--ease);
}
.sideModHead:hover { background: var(--surface-2); }
.sideModHead:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sideModHead .mt { flex: 1; min-width: 0; }
.sideModHead .mt b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; }
.sideModHead .mt span { font-size: var(--fs-2xs); color: var(--dimmer); }
.sideModHead .caret { color: var(--dimmer); font-size: 11px; transition: transform var(--t) var(--ease); }
.sideMod.open .sideModHead .caret { transform: rotate(90deg); }
.sideModBody { display: none; padding-bottom: 6px; }
.sideMod.open .sideModBody { display: block; }

.ring {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0);
}
.ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg-elev); }
.ring span { position: relative; z-index: 1; font-size: 9.5px; font-weight: var(--fw-black); color: var(--dim); }
.ring.done { background: var(--ok-fill); }
.ring.done::after { inset: 2px; background: var(--ok-fill); }
.ring.done span { color: #fff; font-size: 15px; }

.sideLesson {
  display: flex; align-items: center; gap: 9px; padding: 8px 18px 8px 22px;
  font-size: var(--fs-sm); color: var(--dim); border-left: 3px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sideLesson:hover { background: var(--surface-2); color: var(--text); }
.sideLesson.on { background: var(--accent-bg); border-left-color: var(--accent); color: var(--accent-fg); font-weight: var(--fw-semibold); }
.sideLesson .ic { font-size: 12.5px; width: 15px; text-align: center; flex-shrink: 0; }
.sideLesson .t { flex: 1; min-width: 0; line-height: 1.45; }
.sideLesson .ck {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-2); display: grid; place-items: center;
  font-size: 9px; color: transparent;
}
.sideLesson.done .ck { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.sideLesson.done .t { color: var(--dimmer); }

.sideToggle {
  position: fixed; left: 8px; top: calc(var(--topbar-h) + 10px); z-index: 59;
  width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--dim); display: none; place-items: center;
  box-shadow: var(--shadow-sm);
}
.lessonLayout.sideHidden ~ .sideToggle, .sideToggle.show { display: grid; }

/* ───────────────── 명령 팔레트 (⌘K) ───────────────── */

.paletteWrap {
  position: fixed; inset: 0; z-index: 300;
  background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding: 12vh 16px 16px;
}
.palette {
  width: min(620px, 100%); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: popIn var(--t) var(--ease-pop);
}
.paletteIn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.paletteIn input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--text); padding: 0; box-shadow: none; }
.paletteIn input:focus { box-shadow: none; }
.paletteIn input::placeholder { color: var(--dimmer); }
.kbd {
  font-size: var(--fs-2xs); color: var(--dimmer); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 1px 5px; font-family: inherit; line-height: 1.5;
  background: var(--surface-2);
}
.paletteList { max-height: min(52vh, 460px); overflow-y: auto; padding: 6px; }
.paletteSec {
  padding: 9px 12px 5px; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: var(--dimmer); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.pRow { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r); cursor: pointer; scroll-margin: 8px; }
.pRow.on { background: var(--accent-bg); }
.pRow .pIco {
  width: 30px; height: 30px; border-radius: var(--r); flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
  background: hsl(var(--cat, var(--color-brand-500)) / .13);
}
.pRow .pT { flex: 1; min-width: 0; }
.pRow .pT b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pRow .pT span { font-size: var(--fs-xs); color: var(--dimmer); }
.pRow .pTag { font-size: var(--fs-2xs); color: var(--dimmer); white-space: nowrap; }
.pRow.on .pTag { color: var(--accent-fg); }
.paletteFoot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border);
  font-size: var(--fs-2xs); color: var(--dimmer); background: var(--bg-elev); }
.paletteEmpty { padding: 34px 16px; text-align: center; color: var(--dimmer); font-size: var(--fs-md); }

/* 상단바의 검색 버튼 */
.searchBtn {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  color: var(--dimmer); font-size: var(--fs-sm); min-width: 200px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.searchBtn:hover { border-color: var(--border-2); color: var(--dim); background: var(--surface-2); }
.searchBtn .kbd { margin-left: auto; }
@media (max-width: 720px) {
  .searchBtn { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .searchBtn span, .searchBtn .kbd { display: none; }
}

/* ───────────────── 추천 카드 ───────────────── */
.recCard {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.recCard:hover { border-color: hsl(var(--cat, var(--color-brand-500))); background: hsl(var(--cat, var(--color-brand-500)) / .05); }
.recIco { width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0; overflow: hidden; position: relative; background: var(--artBg); }
.recIco .artSvg { border-radius: var(--r); }
.recT { flex: 1; min-width: 0; }
.recT b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.4; }
.recWhy { font-size: var(--fs-xs); color: hsl(var(--cat, var(--color-brand-700))); font-weight: var(--fw-semibold); }

/* ───────────────── 공지 ───────────────── */
.notice {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r); margin-bottom: 14px;
  border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-md);
}
.notice b { font-weight: var(--fw-bold); }
.notice span { color: var(--dim); font-size: var(--fs-sm); }
.notice.warn   { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.notice.warn span { color: var(--warn); opacity: .85; }
.notice.urgent { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 40%, transparent); color: var(--err); }
.notice.urgent span { color: var(--err); opacity: .85; }

.rateBar { display: flex; align-items: center; gap: 8px; min-width: 108px; }
.rateBar .bar { flex: 1; height: 5px; }
.rateBar i.lo > i { background: var(--err-fill); }
.rateBar b { font-size: var(--fs-xs); width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ───────────────── 언어 ───────────────── */
.langSel {
  height: 36px; padding: 0 26px 0 10px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface); color: var(--dim);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-family: inherit; cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  box-shadow: none;
}
.langSel:hover { border-color: var(--border-2); color: var(--text); background-color: var(--surface-2); }
.langSel:focus { box-shadow: none; }

.langNote {
  display: flex; align-items: center; gap: 12px; max-width: var(--content);
  margin: 14px auto -6px; padding: 10px 14px; border-radius: var(--r);
  background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent-fg); font-size: var(--fs-sm);
}
.langNote span { flex: 1; }
.langNote button { background: none; border: 0; color: var(--dimmer); font-size: 14px; padding: 2px 6px; line-height: 1; }
.langNote button:hover { color: var(--text); }
/* 좁은 화면의 상단 바에서는 언어·테마 단추를 뺀다 — 둘 다 ☰ 서랍에 있고, 남겨 두면
   메뉴 줄이 70px 로 쪼그라들어 링크가 하나도 안 보인다(2026-09-07 실측). */
@media (max-width: 720px) { #topbar .langSel, #topbar #themeBtn { display: none; } }

/* ───────────────────── 아이콘 ───────────────────── */
.ic { flex-shrink: 0; vertical-align: -.14em; }
.courseMeta span, .inc, .badge, .btn { display: inline-flex; align-items: center; gap: 6px; }
.courseMeta span { gap: 5px; }
.courseMeta .ic { opacity: .7; }
.inc .ic { color: hsl(var(--cat, var(--color-brand-500))); opacity: .95; }

.rowIco {
  width: 34px; height: 34px; border-radius: var(--r); flex-shrink: 0;
  display: grid; place-items: center; color: var(--dim);
  background: var(--surface-2); border: 1px solid var(--border);
}
.empty .big { color: var(--dimmer); display: block; margin: 0 auto 10px; }
.empty .big .ic { opacity: .55; }
.lockOverlay .ic { color: #fff; opacity: .92; }
.rateIco { color: var(--accent-text); margin-bottom: 8px; }
.okT { color: var(--ok); }
.errT { color: var(--err); }

.stars span { cursor: pointer; color: var(--dimmer); line-height: 0; padding: 2px; }
.stars span.on, .stars span:hover { color: hsl(var(--color-yellow-500)); }

/* ───────────────── 설정 스위치 ───────────────── */
.switchRow {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-top: 1px solid var(--border); cursor: pointer;
}
.switchRow:first-of-type { border-top: 0; }
.switchRow > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switchRow b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.switchRow .dim { font-size: var(--fs-xs); }
.switchRow input[type="checkbox"] {
  appearance: none; width: 42px; height: 24px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--surface-3); border: 1px solid var(--border-2);
  position: relative; cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switchRow input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: left var(--t) var(--ease);
}
.switchRow input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.switchRow input[type="checkbox"]:checked::after { left: 21px; background: #fff; }
.switchRow input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ───────────────── 통계 ───────────────── */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.spark i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; display: block;
  background: color-mix(in srgb, var(--accent) 55%, transparent); }
.spark i:hover { background: var(--accent); }

.funnel { display: flex; gap: 8px; align-items: stretch; }
.fSeg { border-radius: var(--r); padding: 14px 16px; min-width: 96px;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); }
.fSeg b { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.fSeg span { font-size: var(--fs-xs); color: var(--dim); }
.fSeg i { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-top: 4px; }
.f-a { background: var(--surface-2); }
.f-a i { color: var(--dimmer); }
.f-b { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.f-b i { color: var(--accent-text); }
.f-c { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.f-c i { color: var(--accent-text); }
@media (max-width: 640px) { .funnel { flex-direction: column; } }

/* ───────────────────── 모바일 서랍 메뉴 ───────────────────── */
.navBtn { display: none; }
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.on { visibility: visible; }
.drawerBack { position: absolute; inset: 0; background: var(--overlay); opacity: 0; transition: opacity var(--t-slow); }
.drawer.on .drawerBack { opacity: 1; }
.drawerPanel {
  position: absolute; inset: 0 auto 0 0; width: min(300px, 84vw);
  background: var(--bg-elev); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform var(--t-slow) var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer.on .drawerPanel { transform: none; }
.drawerHead { display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 20px; height: var(--topbar-h); border-bottom: 1px solid var(--border); }
.drawerLinks { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.drawerLinks a { display: block; padding: 12px 14px; border-radius: var(--r); color: var(--dim);
  font-size: var(--fs-base); font-weight: var(--fw-medium); }
.drawerLinks a:hover { background: var(--surface-2); color: var(--text); }
.drawerLinks a.on { background: var(--accent-bg); color: var(--accent-fg); font-weight: var(--fw-bold); }
.drawerFoot { border-top: 1px solid var(--border); padding: 12px; }
.drawerRow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 14px; border-radius: var(--r);
  background: none; border: 0; color: var(--dim); font-size: var(--fs-md);
  font-family: inherit; text-align: left;
}
.drawerRow > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.drawerRow:hover { background: var(--surface-2); color: var(--text); }
.drawerRow .langSel { height: 32px; font-size: var(--fs-xs); }
body.noScroll { overflow: hidden; }
@media (max-width: 860px) {
  /* ☰ 은 오른쪽 끝이다. 다른 페이지의 CSS 여닫이(nav.css 의 .navBurger)와
     같은 자리라, 화면을 옮겨도 손가락이 같은 곳을 찾는다. */
  .navBtn { display: grid; place-items: center; order: 99; }
  /* 목록은 감춘다. 예전에는 가로로 밀어서 봤는데, **밀 수 있다는 사실이
     보이지 않아** 뒤쪽 항목은 없는 것과 같았다. 서랍이 목록을 그대로
     복제하므로 갈 곳이 사라지지는 않는다. 클래스가 아니라 id 로 거는 이유는
     이 규칙이 이 앱에만 해당하기 때문이다 — 서랍이 없는 화면(블로그·코스·
     도구·언어 학습·뉴스)은 nav.css 의 여닫이가 같은 일을 한다. */
  #mainnav { display: none; }
}

/* ───────────────────── 과정 (Program) ───────────────────── */
.progCard { padding-top: var(--sp-5); }
.progHero { background: linear-gradient(120deg, hsl(var(--color-brand-500)), hsl(var(--color-brand-700))); }
.progHero .heroChip { color: hsl(var(--color-brand-600)); }
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.outcomes li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); line-height: 1.6; }
.outcomes li .ic { color: var(--accent-text); margin-top: 2px; }
.stageWhy { margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.7; color: var(--dim);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-left: 12px; }

/* 그리드 오버플로 방지 */
.lessonLayout > *, .labWrap > *, .courseTop > * { min-width: 0; }
.md pre, .md table, .tblWrap { overflow-x: auto; max-width: 100%; }
/* overflow 는 display:table 에 걸리지 않는다 — 위 줄이 표에는 여태 무효였다.
   블록으로 돌려야 넓은 표가 문서를 밀지 않고 자기 안에서 밀린다. */
.md table { display: block; }
.md pre code { white-space: pre; }
.md img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.md p, .md li, .md td, .md th { overflow-wrap: anywhere; }
pre { overflow-x: auto; max-width: 100%; }

/* ───────────────────── 샌드박스 ───────────────────── */
.sbCard { padding-top: var(--sp-5); }
.sbInside { display: flex; flex-wrap: wrap; gap: 6px; }
.sbInside span { font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--dim); }
.sbTips { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.sbTips li { font-size: var(--fs-sm); line-height: 1.65; color: var(--dim); }
.sbTips li p { margin: 0; }
.sbTips code { font-size: var(--fs-xs); }
.sbWrap { height: calc(100vh - var(--topbar-h)); }
@media (max-width: 1000px) { .sbWrap { height: auto; } }

.sbEx { display: flex; flex-direction: column; gap: 6px; }
.sbExG { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; background: var(--surface); }
.sbExG > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); list-style: none; user-select: none; }
.sbExG > summary::-webkit-details-marker { display: none; }
.sbExG > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--dimmer); transition: transform var(--t) var(--ease); }
.sbExG[open] > summary::before { transform: rotate(90deg); }
.sbCmd {
  display: block; width: 100%; text-align: left; margin: 0 0 5px;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  overflow-wrap: anywhere; white-space: pre-wrap;
  transition: border-color var(--t-fast) var(--ease);
}
.sbCmd:hover { border-color: var(--accent); }
.sbCmd.sent { border-color: var(--ok-fill); background: var(--ok-bg); }

.termLock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 320px; padding: 32px 24px; text-align: center;
  background: var(--term-bg); border-radius: 0 0 var(--r-lg) var(--r-lg); color: var(--term-fg);
}
.termLock b { font-size: var(--fs-base); }
.termLock p { margin: 0; font-size: var(--fs-sm); max-width: 34ch; line-height: 1.6; color: var(--term-dim); }
.sbCard.locked .pathArt { opacity: .55; }

.termStatus {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  background: var(--term-bg); color: var(--term-fg);
}
.termStatus b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.termStatus span { font-size: var(--fs-sm); color: var(--term-dim); max-width: 36ch; line-height: 1.6; }
.termStatus .bad { color: #f2777a; }
.termStatus .spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(123, 134, 247, .25); border-top-color: #7b86f7;
  animation: termSpin .8s linear infinite;
}
@keyframes termSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .termStatus .spin, .loader { animation-duration: 2.4s; } }

.docLinks { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-6); }
.docLinks a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.docLinks a:hover { border-color: var(--accent); background: var(--surface-2); }
.docLinks a span { flex: 1; min-width: 0; }
.docLinks a em { font-style: normal; font-size: var(--fs-2xs); color: var(--dimmer); white-space: nowrap; font-family: var(--font-mono); }
@media (max-width: 560px) { .docLinks a em { display: none; } }

/* ───────────────────────── 포럼 ───────────────────────── */
.fBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: var(--sp-4) 0; }
.fTabs { display: flex; gap: 4px; }
.fTab { padding: 6px 13px; border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--dim); border: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.fTab:hover { color: var(--text); background: var(--surface-2); }
.fTab.on { background: var(--accent-bg); color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: var(--fw-semibold); }
.fSearch { flex: 1; min-width: 160px; }
.fSearch input { width: 100%; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border-input);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm); }
.fList { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.fItem { display: block; padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text);
  transition: background var(--t-fast) var(--ease); }
.fItem:first-child { border-top: 0; }
.fItem:hover { background: var(--surface-2); }
.fMeta { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.fCat { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--dim); }
.fCat.c-qna { color: var(--accent-text); background: var(--accent-bg); }
.fCat.c-notice { color: var(--warn); background: var(--warn-bg); }
.fSolved { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ok); }
.fLesson { font-size: var(--fs-2xs); color: var(--dimmer); }
.fTitle { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.45; margin-bottom: 6px; overflow-wrap: anywhere; }
.fSub { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--dimmer); flex-wrap: wrap; }
.fCount { color: var(--accent-text); font-weight: var(--fw-semibold); }
.fPage { display: flex; gap: 5px; justify-content: center; margin-top: var(--sp-5); }
.fPage a { min-width: 32px; text-align: center; padding: 6px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); }
.fPage a.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fForm { display: flex; flex-direction: column; gap: 14px; }
.fForm label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.fForm input, .fForm select, .fForm textarea { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border-input);
  background: var(--surface); color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-regular); font-family: inherit; }
.fForm textarea { resize: vertical; line-height: 1.6; font-family: var(--font-mono); font-size: var(--fs-sm); }
.fBody { padding: 4px 0 8px; }
.fReplies { display: flex; flex-direction: column; gap: 12px; }
.fReply { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.fReply.answer { border-color: var(--ok-fill); box-shadow: 0 0 0 1px var(--ok-fill) inset; }
.fRHead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-bottom: 8px; flex-wrap: wrap; }

/* ───────────────────────── 커뮤니티 ───────────────────────── */
.communityHero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-7); margin: 0 0 var(--sp-6); border-radius: var(--r-xl);
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(125deg, hsl(var(--color-brand-700)) 0%, hsl(var(--color-brand-900)) 100%);
}
.communityHero h1 { max-width: 760px; margin: 6px 0 10px; color: #fff; font-size: clamp(26px, 3.5vw, 40px); }
.communityHero p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.7; }
.communityHero .eyebrow { color: hsl(var(--color-brand-200)); font-weight: var(--fw-bold); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; }
.communityHero .badge { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); white-space: nowrap; }
.communityBar { position: sticky; top: var(--topbar-h); z-index: 4; padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.communityGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.communityCard { display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: 180px; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.communityCard.hasThumb { grid-template-columns: 160px minmax(0, 1fr); }
.communityCard:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.communityThumb { display: block; min-height: 100%; background: var(--surface-2); }
.communityThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.communityCardBody { min-width: 0; padding: 16px 18px; }
.communityCard h2 { margin: 6px 0 8px; font-size: var(--fs-lg); line-height: 1.4; }
.communityCard h2 a { color: var(--text); }
.communityCard p { margin: 0 0 10px; color: var(--dim); font-size: var(--fs-sm); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.communityMeta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--dimmer); font-size: var(--fs-xs); }
.communityMeta a { color: var(--accent-text); font-weight: var(--fw-semibold); }
.communityTags { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.communityTags span { padding: 2px 9px; border-radius: var(--r-full); background: var(--surface-2); color: var(--dim); font-size: var(--fs-2xs); }
.communityStats { display: flex; gap: 13px; color: var(--dimmer); font-size: var(--fs-xs); }
.communityDetail > h1 { margin: 14px 0 8px; font-size: clamp(28px, 4.5vw, 42px); line-height: 1.2; }
.communityByline { color: var(--dimmer); margin-bottom: var(--sp-6); font-size: var(--fs-sm); }
.communityMedia { display: grid; gap: 10px; margin: 20px 0 28px; }
.communityMedia figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); }
.communityMedia img { display: block; width: 100%; max-height: 720px; object-fit: contain; }
.communityText { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-loose); }
.communityBody { margin: var(--sp-6) 0; font-size: var(--fs-base); }
.communityActions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.communityDiscussion { margin-top: var(--sp-7); }
.communityComment { padding: 14px 16px; margin: 9px 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.communityComment.reply { margin-left: 34px; border-left: 3px solid var(--accent); }
.communityComment .communityText { margin: 8px 0; font-size: var(--fs-sm); }
@media (max-width: 850px) {
  .communityGrid { grid-template-columns: 1fr; }
  .communityHero { align-items: flex-start; flex-direction: column; padding: var(--sp-6); }
}
@media (max-width: 540px) {
  .communityCard, .communityCard.hasThumb { grid-template-columns: 1fr; }
  .communityThumb { height: 180px; }
  .communityBar { position: static; }
  .communityComment.reply { margin-left: 16px; }
}

.lessonAsk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-6); padding: 12px 15px;
  border: 1px dashed var(--border-2); border-radius: var(--r-lg);
  font-size: var(--fs-sm); color: var(--dim);
}
.lessonAsk a { color: var(--accent-text); font-weight: var(--fw-semibold); }
.lessonAsk a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lessonAsk .btn { text-decoration: none; }

/* ── 운영자: VM ── */
.vmQuota { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; font-size: var(--fs-sm); }
.vmQ b { font-weight: var(--fw-semibold); margin-right: 4px; }
.vmNew { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 16px; background: var(--surface); }
.vmNew > summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.vmGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.vmList { display: flex; flex-direction: column; gap: 10px; }
.vmCard { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px 15px; background: var(--surface); }
.vmTop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vmDot { width: 9px; height: 9px; border-radius: 50%; background: var(--dimmer); }
.vmDot.ok { background: var(--ok-fill); }
.vmDot.warn { background: var(--warn-fill); }
.vmDot.off { background: var(--border-2); }
.vmMeta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); margin-top: 7px; }
.vmEv { margin-top: 9px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: var(--fs-2xs); line-height: 1.6; overflow-x: auto; max-height: 260px; }

/* ── 운영자: 대시보드 바로가기 ── */
.dashGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.dashCard { color: var(--text); padding: 14px 16px; }
.dashCard b { display: block; margin-bottom: 5px; }
.dashCard p { margin: 0 0 7px; font-size: var(--fs-sm); line-height: 1.6; }
.dashCard .mono { font-size: var(--fs-2xs); font-family: var(--font-mono); }

/* ── 운영자: 감사 로그 ── */
.auditList { display: flex; flex-direction: column; gap: 2px; }
.auditRow { display: grid; grid-template-columns: 132px 92px 128px 1fr 1.2fr; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-sm); font-size: var(--fs-xs); align-items: baseline; }
.auditRow:nth-child(odd) { background: var(--surface-2); }
.auditTs { font-family: var(--font-mono); color: var(--dimmer); font-size: var(--fs-2xs); }
.auditAct { font-weight: var(--fw-semibold); }
.auditWho, .auditTgt, .auditMeta { overflow-wrap: anywhere; }
@media (max-width: 720px) { .auditRow { grid-template-columns: 1fr; gap: 2px; } .auditMeta { font-size: var(--fs-2xs); } }

/* ── 접근성 ── */
.skipLink {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  transform: translateY(-160%);
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r);
  font-weight: var(--fw-black); font-size: var(--fs-md);
  transition: transform var(--t) var(--ease);
}
.skipLink:focus { transform: none; }

.termZoom { display: flex; align-items: center; gap: 4px; }
.termZoomVal { font-size: var(--fs-xs); color: var(--dim); min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }

/* 미션·힌트는 선택되지 않는다(베끼지 말고 읽고 치라는 뜻). 코드 블록은 예외. */
#steps .stepTask, #steps .hintbox { -webkit-user-select: none; user-select: none; }
#steps .stepTask pre, #steps .stepTask pre * { -webkit-user-select: text; user-select: text; }

.articleLink {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--r);
  background: var(--accent-bg); color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
}
.articleLink > span { display: grid; gap: 2px; flex: 1; }
.articleLink b { font-size: var(--fs-md); }
.articleLink small { color: var(--dim); font-size: var(--fs-xs); }
.articleLink .go { color: var(--accent-text); font-weight: var(--fw-black); flex: none; }
.articleLink:hover { border-color: var(--accent); }

.trustedBody { max-width: 72ch; }
.trustedBody h2 { margin-top: 1.9em; padding-top: 1.1em; border-top: 1px solid var(--border); }
.trustedBody h2:first-child { margin-top: .3em; padding-top: 0; border-top: 0; }
.trustedBody p, .trustedBody li { line-height: var(--lh-loose); }

.writeHelp { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; background: var(--surface-2); margin: 4px 0 2px; }
.writeHelpOut { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.7; white-space: pre-wrap; max-height: 240px; overflow-y: auto; }
.writeHelpOut.dim { color: var(--dim); }

/* ───────────────────────── 수료증 ───────────────────────── */
.certPage { padding-top: var(--sp-6); }
.certSheet {
  position: relative; aspect-ratio: 297 / 210; max-width: 860px; margin: 0 auto; padding: 6.2% 8%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.certSheet::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--pro); opacity: .5; border-radius: 3px; pointer-events: none; }
.certSheet::after { content: ''; position: absolute; inset: 19px; border: 1px solid var(--border); border-radius: 2px; pointer-events: none; }
.certGuilloche {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background:
    repeating-radial-gradient(circle at 12% 88%, var(--pro) 0 1px, transparent 1px 22px),
    repeating-radial-gradient(circle at 88% 12%, var(--pro) 0 1px, transparent 1px 22px);
}
.certHead { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
.certBrand { font-weight: var(--fw-black); font-size: var(--fs-xl); letter-spacing: var(--ls-tight); color: var(--pro); }
.certKicker { font-size: 10.5px; letter-spacing: 3.4px; color: var(--dimmer); }
.certSeal { width: 54px; height: 54px; margin: 14px 0 10px; display: grid; place-items: center; border-radius: 50%;
  color: var(--pro); border: 1.5px solid var(--pro); opacity: .9; }
.certLead { margin: 0; font-size: var(--fs-sm); color: var(--dimmer); }
.certName { margin: 8px 0 2px; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.15; letter-spacing: var(--ls-tight); }
.certCourse { margin: 10px 0 4px; font-size: clamp(15px, 2.1vw, 20px); font-weight: var(--fw-bold); color: var(--pro); }
.certMeta { margin: 0; font-size: var(--fs-xs); color: var(--dimmer); }
.certFacts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 16px 0 0; padding: 0;
  font-size: var(--fs-xs); color: var(--dimmer); }
.certFacts li { position: relative; }
.certFacts li + li::before { content: '·'; position: absolute; left: -11px; opacity: .6; }
.certFoot { margin-top: auto; padding-top: 16px; width: 100%; display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--border); text-align: left; }
.certFootCol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.certFootLabel { font-size: 9.5px; letter-spacing: 1.6px; color: var(--dimmer); }
.certCode { font-size: var(--fs-xs); }
.certVerify { text-align: right; margin-left: auto; }
.certVerifyUrl { font-size: var(--fs-2xs); color: var(--dimmer); overflow-wrap: anywhere; }
.certActions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 20px 0 8px; }
.certNote { text-align: center; font-size: var(--fs-xs); margin: 0 0 30px; }
@media (max-width: 620px) {
  .certSheet { aspect-ratio: auto; padding: 30px 20px 24px; }
  .certFoot { flex-direction: column; gap: 12px; }
  .certVerify { text-align: left; margin-left: 0; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  header, nav, footer, .certActions, .certNote, .toast, .siteHeader, .siteFooter, #toast, .widgetDock { display: none !important; }
  .wrap, .certPage { padding: 0 !important; margin: 0 !important; max-width: none; }
  .certSheet { max-width: none; width: 100%; box-shadow: none; border: 1px solid #d8dbe6; break-inside: avoid; }
  .certSheet, .certGuilloche, .certSeal, .certBrand, .certCourse { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── 내 학습 여정 ── */
.jChips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; }
.jChip { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 4px 11px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--dim); border: 1px solid var(--border); }
.jChip.on { background: var(--accent-bg); color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.jChips .btn { margin-left: auto; }
.jMore { width: 100%; margin-top: 4px; }
.enrolRow.isDone { opacity: .62; }
.enrolRow.isDone:hover { opacity: 1; }
.enrolRow.isDone .eIcon { color: var(--accent-text); }
.jPager { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 14px 0 2px; flex-wrap: wrap; }
.jPage { min-width: 34px; height: 34px; padding: 0 9px; border-radius: var(--r);
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.jPage:hover:not(:disabled) { background: var(--surface-2); }
.jPage.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.jPage:disabled { opacity: .34; cursor: default; }
.jCount { text-align: center; font-size: var(--fs-xs); margin: 0 0 4px; }
@media (max-width: 520px) { .jPage[data-jpage]:not([aria-label]):not(.on) { display: none; } }

/* ── 피드백함 ── */
.tabDot { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px;
  background: var(--err-fill); color: #fff; font-size: var(--fs-2xs); line-height: 18px; font-weight: var(--fw-bold); vertical-align: middle; }
.fbCard.fbTouched { opacity: .5; transition: opacity var(--t); }
.fbCard.fbTouched:hover { opacity: 1; }

/* ── 이 환경에서 완주할 수 없는 단계 표시 ── */
.blockedTag { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); vertical-align: middle;
  background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); }

/* ── 단계 통과 축하 ── */
.celebrate { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.celebrate span { position: absolute; top: 42%; animation: celebrate-pop .9s cubic-bezier(.2, .8, .3, 1) forwards; will-change: transform, opacity; }
@keyframes celebrate-pop {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  25%  { transform: translateY(-38px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-104px) scale(.9); opacity: 0; }
}
.celebrate.still span { animation: celebrate-fade .8s ease-out forwards; }
@keyframes celebrate-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .celebrate span { animation: celebrate-fade .8s ease-out forwards; }
  .homeDoor:hover, .courseCard:hover, .communityCard:hover, .btn:active { transform: none; }
}
/* 노트 오류는 입력 내용 바로 아래에 남긴다. 팝업이 과제를 가리지 않는다. */
.noteBox { margin-top: var(--sp-4); }
.noteBox h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.noteBox textarea { width: 100%; resize: vertical; }
.noteBox textarea[readonly] { color: var(--dim); background: var(--surface-2); }
.noteFoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.noteFoot p { flex: 1 1 200px; margin: 0; font-size: var(--fs-sm); color: var(--dim); line-height: var(--lh-base); word-break: keep-all; overflow-wrap: anywhere; }
.noteFoot button { min-height: calc(var(--sp-8) + var(--sp-1)); }
.noteFoot button[hidden] { display: none; }
.noteError .noteFoot p { color: var(--err); }
@media (max-width: 640px) { .noteFoot p { flex-basis: 100%; } }

/* 학습 완료 표지 — 코스와 러닝패스 카드의 표지 왼쪽 위.
 *
 * 카드에는 레슨 수와 실습 수만 있었다. 그래서 목록으로 돌아온 사람은 자기가
 * 어디까지 했는지 카드에서 알 수 없었고, 코스를 열어 봐야 알았다. Pro 표지와
 * 같은 자리를 쓰되 색으로 갈린다 — 둘이 함께 붙는 코스는 없다(다 들은 코스는
 * 이미 열려 있다). */
.doneBadge {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ok); color: #fff;
  font-size: 10.5px; font-weight: var(--fw-black); padding: 3px 8px; border-radius: var(--r-sm);
}
.doneBadge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; }
.pathArt { position: relative; }

/* 공차/보고서의 많은 생성물은 필요한 파일만 펼친다. native details로 키보드도 지원한다. */
.fsGroup { margin-top: var(--sp-3); border-block: 1px solid var(--border); }
.fsGroup > summary { cursor: pointer; padding: var(--sp-3) var(--sp-1); color: var(--dim); font-weight: var(--fw-semibold); }
.fsCount { margin-left: var(--sp-2); font-variant-numeric: tabular-nums; }
.fsGroup > .fsWrap { margin-top: 0; padding-bottom: var(--sp-3); }
.fsCompact { background: var(--surface); }
.fsCompact > summary { cursor: pointer; min-height: var(--sp-8); overflow-wrap: anywhere; }
.fsCompact > summary .fsPath { background: none; border: 0; padding: 0; }
.fsCompactBody { padding-top: var(--sp-2); }
.fsGroup > summary:focus-visible, .fsCompact > summary:focus-visible { outline: thin solid var(--accent); outline-offset: var(--sp-1); box-shadow: var(--focus); }

/* 과정 안의 자격 칸 — 시험 형식과 출제 비중을 코스 카드 위에 먼저 보여 준다.
   자격 과정에서는 "무엇을 배우나" 보다 "무엇이 나오나" 가 먼저이기 때문이고,
   비중은 공식 자격 페이지의 값을 그대로 옮긴 것이라 링크도 함께 둔다. */
.certRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; margin: 0 0 14px; }
.certCard { border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; background: var(--surface); min-width: 0; }
.certHead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.certHead b { font-size: var(--fs-md); letter-spacing: .02em; }
.certHead span { font-size: var(--fs-2xs); color: var(--dimmer); text-align: right; }
.certName { font-size: var(--fs-xs); color: var(--dim); margin-top: 2px; line-height: 1.5; }
.certDomains { list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px; }
.certDomains li { font-size: var(--fs-2xs); padding: 2px 8px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--dim); white-space: nowrap; }
.certLink { display: inline-block; margin-top: 10px; font-size: var(--fs-xs);
  color: var(--accent-text); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: var(--sp-1); }
.certLink:hover { text-decoration-thickness: 2px; }

/* 레슨 본문의 그림 */
/*
   `viewBox` 만 있고 width·height 가 없는 SVG 를 <img> 로 실으면 고유 크기가
   0 이다. 그러면 상자가 0×0 이 되고, loading="lazy" 는 화면에 들어와야 받기
   시작하는데 0×0 은 영영 들어오지 않는다 — 받지 못해 크기를 모르고, 크기를
   몰라 받지 않는 고리에 갇힌다. 실제로 그림 44장이 전부 이렇게 안 보였다.

   너비를 먼저 정해 주면 고리가 끊긴다. 상자가 생기고, lazy 가 걸리고,
   받고 나면 viewBox 의 비율대로 높이가 따라온다.

   max-width 로 폭을 묶는 이유는 도식이 본문 글줄보다 넓어지면 오히려 읽기
   어려워지기 때문이다. 좁은 화면에서는 width:100% 가 이긴다. */
/*
   담는 상자의 클래스로 걸지 않는다. 서버 렌더 페이지는 `.md`, 앱 화면은 또
   다른 이름을 쓰고, 앞으로 화면이 하나 더 생기면 그쪽만 조용히 빠진다.
   주소로 걸면 이 그림들이 어디에 놓이든 규칙이 따라간다. */
img[src^="/course-media/"] {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 20px auto;
}

/* 레슨 중간의 읽는 도식. 움직임은 사용자가 시작하며 정적 설명은 항상 남긴다. */
.lessonStoryboard {
  --story-blue: #2f6bff; --story-orange: #f28c28;
  margin: 32px 0; padding: 24px; max-width: 100%; min-width: 0;
  border-block: 2px solid var(--border); background: var(--surface);
  color: var(--text); word-break: keep-all; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7;
}
.lessonStoryboard figcaption > strong { display: block; font-size: 21px; line-height: 1.45; color: var(--text); }
.lessonStoryboard figcaption p { margin: 8px 0 20px; max-width: 72ch; color: var(--dim); }
.lessonStoryboard .storyDiagram {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; padding: 0; margin: 20px 0; list-style: none;
}
.lessonStoryboard.story-compare .storyDiagram { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.lessonStoryboard .storyNode {
  position: relative; min-width: 0; margin: 0; padding: 16px 14px;
  border-top: 4px solid var(--story-blue); background: var(--surface-2); border-radius: 0;
}
.lessonStoryboard .storyNode:last-child { border-top-color: var(--story-orange); }
.lessonStoryboard.story-flow .storyNode:not(:last-child)::after {
  content: '→'; position: absolute; right: -24px; top: 24px; color: var(--dim); font-size: 22px;
}
.lessonStoryboard.story-compare .storyNode + .storyNode { border-left: 2px solid var(--border); }
.lessonStoryboard .storyNode strong { display: block; font-size: 16px; line-height: 1.45; }
.lessonStoryboard .storyNodeBody { display: block; margin-top: 9px; }
.lessonStoryboard .storyStep {
  display: block; width: 28px; height: 28px; margin-bottom: 12px; border-radius: 50%;
  background: #13233a; color: #fbfcfe; text-align: center; font-weight: 700; line-height: 28px;
}
.lessonStoryboard .storyPlay { width: 18px; height: 18px; vertical-align: middle; accent-color: #2f6bff; }
.lessonStoryboard .storyPlayLabel { display: inline-block; padding: 10px 5px; cursor: pointer; font-size: 14px; }
.lessonStoryboard .storyPlayLabel span { color: var(--dim); }
.lessonStoryboard .storyPlay:focus-visible + label,
.lessonStoryboard summary:focus-visible { outline: 2px solid var(--story-blue); outline-offset: 4px; }
.lessonStoryboard .storyPlay:checked ~ .storyDiagram .storyNode { animation: story-step 1.4s ease-in-out 1; }
.lessonStoryboard .storyPlay:checked ~ .storyDiagram .storyStep1 { animation-delay: 1.4s; }
.lessonStoryboard .storyPlay:checked ~ .storyDiagram .storyStep2 { animation-delay: 2.8s; }
@keyframes story-step { 50% { box-shadow: inset 0 0 0 3px var(--story-blue); transform: translateY(-3px); } }
.lessonStoryboard .storyCaution { margin: 20px 0; padding-left: 14px; border-left: 3px solid var(--story-orange); }
.lessonStoryboard .storyCaution > strong, .lessonStoryboard .storyCheck > p > strong { display: block; }
.lessonStoryboard .storyCheck { border-top: 1px solid var(--border); padding-top: 16px; }
.lessonStoryboard .storyCheck > p { margin: 0 0 12px; }
.lessonStoryboard details { margin: 0; padding: 0; border: 0; background: transparent; }
.lessonStoryboard summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.lessonStoryboard details p { margin: 8px 0 12px; }
.lessonStoryboard .storySource { display: inline-block; margin-top: 14px; font-size: 13px; text-underline-offset: 3px; }
/* 직접 만져 보는 화면으로 가는 문. 근거 문서와 나란히 서되 색이 달라야
   한 눈에 갈린다 — 하나는 읽으러 가고 하나는 해 보러 간다. */
.lessonStoryboard .storyExplore { display: inline-block; margin: 14px 0 0 14px; font-size: 13px;
  font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .lessonStoryboard { padding: 20px 12px; margin: 24px 0; }
  .lessonStoryboard figcaption > strong { font-size: 19px; }
  .lessonStoryboard .storyDiagram, .lessonStoryboard.story-compare .storyDiagram { grid-template-columns: 1fr; }
  .lessonStoryboard.story-flow .storyNode:not(:last-child)::after { content: '↓'; right: auto; left: 20px; top: auto; bottom: -29px; }
  .lessonStoryboard.story-compare .storyNode + .storyNode { border-left: 0; margin-top: 12px; }
  .lessonStoryboard .storyPlayLabel span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .lessonStoryboard .storyPlay:checked ~ .storyDiagram .storyNode { animation: none; transform: none; }
  .lessonStoryboard .storyPlay, .lessonStoryboard .storyPlayLabel { display: none; }
}
@media print {
  .lessonStoryboard .storyPlay, .lessonStoryboard .storyPlayLabel { display: none; }
  .lessonStoryboard .storyNode { animation: none !important; }
}

/* 블로그 절 끝의 "직접 움직여 보기". 본문 흐름을 끊지 않되 그림이 아니라
   다른 화면으로 가는 문이라는 것이 한눈에 보여야 한다(app/blog_explore.py). */
.blogExplore { margin: 22px 0; padding: 14px 16px; border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 6px; }
.blogExplore p { margin: 0; }
.blogExplore p + p { margin-top: 6px; font-size: 14px; color: var(--dim); }
.blogExplore a { font-weight: 600; text-underline-offset: 3px; }

/* ───────────── 배우기 · 과정 상세 · 코스 상세 · 대시보드 (2026-09-24 개편) ─────────────
   참고한 것은 KodeKloud 의 배치(여정 카드·세로 단계선·오른쪽 열 타일·모듈 진행 원)뿐이고,
   색·글꼴·간격은 전부 design.css 의 토큰이다. 카드 밀도·간격·제목 크기는 --learn-* 토큰 하나씩으로
   모았다 — 로컬 지그(?jig=1)로 값을 고른 뒤 design.css 에 굳혔다.
   움직임은 --t 계열만 쓴다. 움직임을 줄인 사람에게는 design.css 가 1ms 로 바꾸고, 아래 끝에서
   떠오르는 효과(transform)도 끈다. */

.learnPage, .progDetail, .courseDetail, .dashPage { --learn-radius: var(--r-xl); }

/* 머리 · 찾기 */
.learnHead { margin-bottom: var(--sp-6); }
.learnHead h1 { margin: 0 0 var(--sp-2); }
.learnHead .sub { margin: 0 0 var(--sp-5); }
.learnFind { display: flex; gap: var(--sp-2); max-width: 720px; }
.learnSearch { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4);
  min-height: 48px; border: 1px solid var(--border-input); border-radius: var(--r-lg); background: var(--surface); color: var(--dim); }
.learnSearch input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit;
  font-size: var(--fs-base); padding: 12px 0; outline: none; box-shadow: none; }
.learnSearch:focus-within { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.learnFind .btn { min-height: 48px; padding-inline: var(--sp-5); border-radius: var(--r-lg); }

/* 절 머리 */
.learnSecHead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-3); }
.learnSecHead h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.learnPanel > .learnSecHead:first-child, .learnPanel > .learnChips + .learnGroup .learnSecHead { margin-top: var(--sp-5); }
.learnSecSub { margin: calc(-1 * var(--sp-1)) 0 var(--sp-4); color: var(--dim); font-size: var(--fs-sm); }
.learnSecN { color: var(--dim); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.learnSecLink { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-text); }
.learnSecLink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 탭 — 밑줄형. 선택된 탭만 Tab 순서에 있고 나머지는 화살표로 간다. */
.learnTabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none;
  margin-top: var(--sp-6); }
.learnTabs::-webkit-scrollbar { display: none; }
.learnTab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--sp-3) var(--sp-4); min-height: 46px; display: inline-flex; align-items: center; gap: var(--sp-2); flex: none;
  color: var(--dim); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap;
  border-radius: var(--r) var(--r) 0 0; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.learnTab:hover { color: var(--text); }
.learnTab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.learnTab:focus-visible { outline-offset: -3px; }
.learnTab .ic { opacity: .85; }
.learnTabN { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--dim); background: var(--surface-2);
  border-radius: var(--r-full); padding: 1px 8px; font-variant-numeric: tabular-nums; line-height: 1.6; }
.learnTab[aria-selected="true"] .learnTabN { background: var(--accent-bg); color: var(--accent-fg); }
.learnHint { color: var(--dim); font-size: var(--fs-sm); margin: var(--sp-3) 0 var(--sp-2); }

/* 칩(주제 거르기) — 누른 것은 글자색과 바탕을 뒤집는다(두 테마 모두 대비가 가장 높다). */
.learnChips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); }
.learnChip { appearance: none; font: inherit; font-size: var(--fs-sm); padding: 6px 12px; min-height: 36px; border-radius: var(--r-full);
  border: 1px solid var(--border-2); background: var(--surface); color: var(--dim); cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.learnChip:hover { color: var(--text); border-color: var(--border-input); }
.learnChip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.learnChipN { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* 격자 · 마크 · 칩 */
.learnGrid { display: grid; gap: var(--learn-gap, 16px); grid-template-columns: repeat(auto-fill, minmax(min(var(--learn-min, 300px), 100%), 1fr)); }
.learnMark { flex: none; width: var(--learn-mark, 40px); height: var(--learn-mark, 40px); border-radius: var(--r-lg); background: var(--artBg);
  padding: calc(var(--learn-mark, 40px) * .22); display: grid; place-items: center; }
.lvChip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.7; white-space: nowrap; }
.lvChip.muted { color: var(--dim); }
.labKind { display: inline-flex; font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 1px 7px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--dim); line-height: 1.7; white-space: nowrap; }
.labKind.vm { background: var(--accent-bg); color: var(--accent-fg); }

/* 카드(자격 과정 등) */
.lCard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--learn-pad, 20px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--learn-radius); color: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.lCard:hover { border-color: var(--border-input); box-shadow: var(--shadow); transform: translateY(-2px); }
.lCardHead { display: flex; align-items: center; gap: var(--sp-3); }
.lCardEyebrow { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.lCardEyebrow span:empty { display: none; }
.lCardTitle { margin: 0; font-size: var(--learn-title, 17px); line-height: var(--lh-snug); font-weight: var(--fw-bold); }
.certChain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-sm); color: var(--dim); }
.certChain li:not(:last-child)::after { content: "→"; margin: 0 8px; color: var(--dimmer); }

/* 직무 표 — 넓은 화면에서는 열이 맞는 표, 좁은 화면에서는 한 장짜리 목록 카드 */
.progList { border: 1px solid var(--border); border-radius: var(--learn-radius); background: var(--surface); overflow: hidden; }
.progList ul { list-style: none; margin: 0; padding: 0; }
.progListHead, .progRow { display: grid; grid-template-columns: minmax(0, 2.4fr) 88px minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4);
  align-items: center; padding: var(--sp-3) var(--sp-5); }
.progList.withProgress :is(.progListHead, .progRow) { grid-template-columns: minmax(0, 2.2fr) 80px minmax(0, 1fr) minmax(0, 1fr) minmax(110px, .9fr); }
.progListHead { background: var(--bg-elev); color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border); padding-block: var(--sp-2); }
.progList li + li .progRow { border-top: 1px solid var(--border); }
.progRow { color: var(--text); font-size: var(--fs-sm); transition: background var(--t-fast) var(--ease); }
.progRow:hover { background: var(--surface-2); }
.progRow:hover .progRowTitle { color: var(--accent-text); }
.progRow:focus-visible { outline-offset: -3px; }
.progRowMain { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.progRowMain > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.progRowTitle { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.progRowRoles { color: var(--dim); font-size: var(--fs-xs); }
.progRowCell { color: var(--dim); font-variant-numeric: tabular-nums; }
.progRowDone .barRow { gap: 6px; }
@media (max-width: 760px) {
  .progListHead { display: none; }
  .progRow, .progList.withProgress .progRow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-4); }
  .progRowCell { display: flex; flex-wrap: wrap; gap: 4px; padding-left: calc(var(--learn-mark, 40px) + var(--sp-3)); }
}
.learnMore { margin-top: var(--sp-5); }
.learnMore > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 44px;
  font-weight: var(--fw-semibold); list-style: none; padding: var(--sp-2) 0; }
.learnMore > summary::-webkit-details-marker { display: none; }
.learnMore > summary::before { content: "▸"; color: var(--dimmer); transition: transform var(--t) var(--ease); }
.learnMore[open] > summary::before { transform: rotate(90deg); }
.learnMore > summary .dim { font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.learnMore[open] > .progList { margin-top: var(--sp-2); }

/* 주제 타일 · 전체 코스 표 링크 */
.topicTiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.topicTile { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) var(--sp-5); min-height: 76px; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.topicTile:hover { border-color: var(--border-input); background: var(--surface-2); }
.topicTile b { font-size: var(--fs-md); }
.topicTile .dim { font-size: var(--fs-xs); }
.learnAllLink { margin: var(--sp-6) 0 0; }
.learnAllLink a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); color: var(--accent-text); min-height: 44px; }
.learnAllLink a:hover span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }

/* 주제별 — 경로 한 줄: 머리(마크·이름·메타) 아래에 코스를 순서대로 */
.learnGroup { margin-top: var(--sp-2); }
.pathRows { display: grid; gap: var(--learn-gap, 16px); }
.pathRow { background: var(--surface); border: 1px solid var(--border); border-radius: var(--learn-radius); padding: var(--learn-pad, 20px);
  display: grid; gap: var(--sp-4); min-width: 0; }
.pathRowHead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; }
.pathRowTitle h3 { margin: 0; font-size: var(--learn-title, 17px); line-height: var(--lh-snug); }
.pathRowTitle h3 a { color: var(--text); }
.pathRowTitle h3 a:hover { color: var(--accent-text); }
.pathRowTitle p { margin: 2px 0 0; color: var(--dim); font-size: var(--fs-sm); }
.pathRowHead .courseMeta { justify-content: flex-end; margin: 0; color: var(--dim); }
@media (max-width: 760px) {
  .pathRowHead { grid-template-columns: auto minmax(0, 1fr); }
  .pathRowHead .courseMeta { grid-column: 1 / -1; justify-content: flex-start; }
}
.pathSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.pathStep a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px var(--sp-2); align-items: start; height: 100%;
  padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease); }
.pathStep a:hover { border-color: var(--border-input); }
.pathStep a:hover .pathStepTitle { color: var(--accent-text); }
.pathStepNo { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--surface); color: var(--dim); border: 1px solid var(--border-2);
  font-variant-numeric: tabular-nums; }
.pathStep.done .pathStepNo { background: var(--ok-fill); color: #fff; border-color: var(--ok-fill); }
.pathStepTitle { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.pathStepMeta { display: flex; flex-wrap: wrap; gap: 4px; }
.pathStep .lvChip { background: var(--surface); }
.pathMore > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-text); font-weight: var(--fw-semibold);
  min-height: 36px; display: inline-flex; align-items: center; }
.pathMore[open] > summary { margin-bottom: var(--sp-2); }

/* 전체 코스 — 거르기 · 결과 줄 · 표 */
.learnFilters { margin: var(--sp-4) 0 var(--sp-3); }
.learnSelects { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.learnSelects select, .learnSort select { min-height: 40px; max-width: 100%; padding: 6px 10px; border-radius: var(--r);
  border: 1px solid var(--border-input); background-color: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.learnCheck { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.learnCheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.learnResultBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0;
  border-top: 1px solid var(--border); margin-bottom: var(--sp-4); }
.learnCount { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.learnCount:focus { outline: none; }
.learnBarGap { flex: 1; }
.learnSort { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--dim); }
.learnView { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--r); overflow: hidden; }
.learnViewBtn { appearance: none; border: 0; background: var(--surface); color: var(--dim); font: inherit; font-size: var(--fs-sm);
  padding: 6px 12px; min-height: 38px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.learnViewBtn + .learnViewBtn { border-left: 1px solid var(--border-input); }
.learnViewBtn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.learnViewBtn:focus-visible { outline-offset: -3px; }
.learnMoreRow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 0; }
.learnEmpty { text-align: center; padding: var(--sp-8) var(--sp-4); border: 1px dashed var(--border-2); border-radius: var(--learn-radius); }
.learnEmpty > .ic { color: var(--dimmer); }
.learnEmpty p { margin: var(--sp-2) 0; }
.learnConds { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-3) 0; }
.learnCond { appearance: none; font: inherit; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; min-height: 36px; border-radius: var(--r-full); border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); cursor: pointer; }
.learnCond:hover { border-color: var(--err); }
.learnEmptyAlt { margin-top: var(--sp-4) !important; font-size: var(--fs-sm); }
.learnTableWrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--learn-radius); background: var(--surface); }
.learnTable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 760px; }
.learnTable :is(th, td) { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.learnTable thead th { background: var(--bg-elev); color: var(--dim); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.learnTable tbody tr:last-child > * { border-bottom: 0; }
.learnTable tbody tr:hover { background: var(--surface-2); }
.learnTable tbody th { font-weight: var(--fw-semibold); max-width: 360px; }
.learnTable tbody th a { color: var(--text); }
.learnTable tbody th a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.learnTable .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.learnSortBtn { appearance: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; min-height: 32px; }
.learnSortBtn:hover, th[aria-sort] .learnSortBtn { color: var(--text); }
.tblBar { display: inline-block; width: 56px; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden;
  vertical-align: middle; margin-right: 6px; }
.tblBar i { display: block; height: 100%; background: var(--accent); }

/* 코스 카드 — 제목을 표지 밖으로, 표지는 낮게. 표지 SVG 는 2:1 로 그렸으니 위를 맞춰 칩이 잘리지 않게 한다. */
.courseCard { border-radius: var(--learn-radius); }
.courseArt { height: 104px; }
.courseArt .artSvg { inset: 0 0 auto 0; height: auto; aspect-ratio: 2 / 1; }
.courseBody { padding: var(--sp-4) var(--learn-pad, 20px) var(--learn-pad, 20px); gap: var(--sp-2); }
.courseBody h3 { font-size: var(--learn-title, 17px); font-weight: var(--fw-bold); }
.courseBody p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.courseBody .courseMeta { color: var(--dim); align-items: center; }

/* 이어서 하기 */
.resume { margin: 0 0 var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--learn-radius); }
.resumeEyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--accent-text); }
.resumeBody { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.resumeMain { flex: 1 1 260px; min-width: 0; }
.resumeWhere { margin: 0; font-size: var(--fs-sm); color: var(--dim); }
.resumeWhere b { color: var(--text); }
.resumeNext { margin: 2px 0 var(--sp-2); font-size: var(--fs-lg); }
.resumeNext > span { color: var(--dim); font-size: var(--fs-sm); margin-right: 6px; }
.resumeBar { max-width: 420px; }
.resume .btn { min-height: 44px; }

/* 여정 카드(대시보드) — 왼쪽 과정, 오른쪽 세로 단계선, 맨 아래 전체 막대 */
.dashH { margin: var(--sp-7) 0 var(--sp-3); }
.journey { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: var(--sp-6); padding: var(--sp-6) var(--sp-6) calc(var(--sp-6) + 4px); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--learn-radius); }
.journeyMain { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.journeyMain .learnMark { --learn-mark: 56px; margin-bottom: var(--sp-2); }
.journeyMain h3 { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-snug); }
.journeyMain p { margin: 0; }
.journeyMain .btn { margin-top: var(--sp-3); }
.journeyEyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--accent-text); }
.journeyAside { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.journeySteps { list-style: none; margin: 0; padding: 0 0 0 var(--sp-6); border-left: 2px solid var(--border); display: grid; gap: var(--sp-4); }
.journeyStep { position: relative; }
.journeyStep::before { content: ""; position: absolute; left: calc(-1 * var(--sp-6) - 8px); top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border-2); }
.journeyStep.done::before { background: var(--ok-fill); border-color: var(--ok-fill); }
.journeyStep.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.journeyStepTitle { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--dim); }
.journeyStep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.journeyStep li a { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); padding: 4px; border-radius: var(--r); }
.journeyStep li a:hover b { color: var(--accent-text); }
.journeyStep li a .learnMark { --learn-mark: 32px; }
.journeyStep li a > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.journeyStep li b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.journeyStep li .dim { font-size: var(--fs-xs); }
.journeyDone { margin-left: auto; color: var(--ok); }
.journeyNext { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--accent-bg); color: var(--accent-fg); font-size: var(--fs-sm); }
.journeyNext b { color: var(--accent-fg); }
.journeyNext:hover { text-decoration: underline; text-underline-offset: 3px; }
.journeyOthers { margin: 0; font-size: var(--fs-sm); color: var(--dim); }
.journeyOthers a { color: var(--text); }
.journeyBar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--surface-3); }
.journeyBar i { display: block; height: 100%; background: var(--accent); }
.journeyEmpty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--sp-6); }
.jPanel { margin-top: var(--sp-4); }
.learnMineEmpty { padding: var(--sp-6) 0; }
@media (max-width: 760px) {
  .journey, .journeyEmpty { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 4px); }
}

/* 과정 상세 — 수강 상자는 넓은 화면에서 오른쪽에 붙고, 좁은 화면에서는 히어로 바로 아래로 온다 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--dim); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs > span:last-child { color: var(--text); }
.progDetail .progTop { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "hero aside" "main aside"; }
.progDetail .progHero { grid-area: hero; border-radius: var(--learn-radius); }
.progAside { grid-area: aside; min-width: 0; position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.progAside .btn { min-height: 44px; }
.progMain { grid-area: main; min-width: 0; }
.asideTitle { margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-md); }
@media (max-width: 940px) {
  .progDetail .progTop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "aside" "main"; }
  .progAside { position: static; }
}
.stageFlow { list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--learn-radius); }
.stageFlow li { display: flex; align-items: center; }
.stageFlow li:not(:last-child)::after { content: ""; width: 20px; height: 2px; margin: 0 4px; background: var(--border-2); }
.stageDot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border: 2px solid var(--border-2); color: var(--dim); background: var(--surface); font-variant-numeric: tabular-nums; }
.stageFlow li.done .stageDot { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.stageFlow li.now .stageDot { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 4px var(--accent-bg); }
.stageEnd { gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--dim); }
.ptl { list-style: none; margin: var(--sp-7) 0 0; padding: 0; }
.ptlItem { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--sp-6); position: relative; padding-bottom: var(--sp-7); }
.ptlItem:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 28px; bottom: 4px; width: 2px; background: var(--border); }
.ptlHead { position: relative; padding-left: 36px; min-width: 0; }
.ptlDot { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--border-2); display: grid; place-items: center; color: #fff; }
.ptlItem.done .ptlDot { background: var(--ok-fill); border-color: var(--ok-fill); }
.ptlItem.now .ptlDot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.ptlStep { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--dim); }
.ptlHead h3 { margin: 4px 0 6px; font-size: var(--fs-lg); line-height: var(--lh-snug); }
.ptlHead .stageWhy { font-size: var(--fs-sm); color: var(--dim); margin: 0; padding: 0; border: 0; line-height: 1.65; }
.ptlBody { min-width: 0; display: grid; gap: var(--sp-3); }
.ptlBody .learnGrid { --learn-min: 250px; }
@media (max-width: 760px) {
  .ptlItem { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .ptlBody { padding-left: 36px; }
}

/* 코스 상세 — 머리 카드(글 + 오른쪽 작은 표지), 오른쪽 열(주 버튼 → 구성 타일), 소개(설명·모듈 흐름), 목차 */
.courseDetail .courseTop { grid-template-areas: "intro actions" "about actions" "content actions"; }
.courseDetail .courseIntro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--sp-5); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--learn-radius); padding: var(--sp-6); }
.courseDetail .courseIntro .chips { align-items: center; margin-bottom: var(--sp-3); }
.courseDetail .courseIntro .heroChip { width: 40px; height: 40px; padding: 9px; margin: 0; background: var(--artBg); border-radius: var(--r-lg); }
.courseDetail .courseIntro h1 { margin-bottom: var(--sp-2); }
.courseDetail .courseIntro .courseBlurb { font-size: var(--fs-lg); color: var(--text); margin: 0 0 var(--sp-3); }
.courseFacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 !important;
  color: var(--dim); font-size: var(--fs-sm); }
.courseFacts > span { display: inline-flex; gap: 6px; align-items: center; }
.techChips { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.techChips li { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); }
.courseDetail .courseCover { margin: 0; max-width: none; aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.courseAbout { grid-area: about; min-width: 0; }
.courseAbout > p { color: var(--dim); margin: 0 0 var(--sp-5); max-width: 72ch; word-break: keep-all; overflow-wrap: anywhere; }
.courseAbout h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.modFlow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) 0; }
.modFlow li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  max-width: 220px; position: relative; margin-right: 22px; }
.modFlow li:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: var(--dimmer); }
.modFlowNo { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
  color: var(--dim); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.modFlow b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.modFlowMeta { font-size: var(--fs-2xs); color: var(--dim); }
.courseContentHead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.courseContentHead h2 { margin: 0; }
.courseExpandAll { min-height: 36px; }
.moduleHead .modNo { flex: none; width: 26px; height: 26px; border-radius: var(--r); background: var(--surface-2); color: var(--dim);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.modMix { display: flex; gap: 2px; width: 56px; height: 6px; flex: none; }
.modMix i, .modLegend i { border-radius: var(--r-full); }
.mixR { background: var(--dimmer); }
.mixL { background: var(--accent); }
.mixQ { background: var(--ok-fill); }
.moduleHead .ring { width: 34px; height: 34px; }
.moduleHead .ring::after { background: var(--surface); }
.module[open] .moduleHead .ring::after { background: var(--bg-elev); }
.modLegend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: var(--sp-3) 18px 0; font-size: var(--fs-xs); color: var(--dim); }
.modLegend span { display: inline-flex; align-items: center; gap: 5px; }
.modLegend i { display: inline-block; width: 8px; height: 8px; }
@media (max-width: 480px) { .modMix { display: none; } }
.courseIncludes { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.courseIncludes h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.courseDetail .courseIncludes .includes { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.courseDetail .courseIncludes .inc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; background: var(--surface-2);
  border-radius: var(--r-lg); padding: var(--sp-3); font-size: var(--fs-sm); }
.courseDetail .courseIncludes .inc > span { color: var(--dim); font-size: var(--fs-xs); }
.courseEnv, .courseWhere { margin-top: var(--sp-6); }
.courseEnv h3, .courseWhere h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.courseWhere ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.courseWhere a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text); min-height: 32px; }
.courseWhere a:hover b { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 940px) {
  .courseDetail .courseTop { grid-template-areas: "intro" "actions" "about" "content"; }
}
@media (max-width: 700px) {
  .courseDetail .courseIntro { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .courseDetail .courseCover { max-height: 180px; }
}

/* 움직임을 줄인 사람에게는 떠오르는 효과도 끈다(--t 는 design.css 가 이미 1ms 로 줄인다). */
@media (prefers-reduced-motion: reduce) {
  .lCard:hover, .courseCard:hover { transform: none; }
}
.learnResultBar [hidden], .learnPage [hidden] { display: none; }
@media (max-width: 560px) {
  .learnTab { padding: var(--sp-3) 10px; gap: 6px; }
  .learnTab .ic { display: none; }
  .resume .learnMark { display: none; }
  .resume .btn { width: 100%; justify-content: center; }
  .dashPage .statRow { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .courseDetail .courseCover { max-height: 140px; }
}
.pathRowTitle .doneBadge { position: static; margin-left: var(--sp-2); vertical-align: middle; }
.courseHint { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--dim); }
.courseHint b { color: var(--text); font-weight: var(--fw-semibold); }
.envList { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.envList div { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); font-size: var(--fs-sm); }
.envList dt { color: var(--dim); min-width: 96px; }
.envList dd { margin: 0; }

/* 과정 상세의 시작점(합친 과정의 「처음」·「실무」)과 경로 상세의 안내(흡수된 옛 과정) — 2026-09-24 재구성 */
.stageFlow li.skipped, .ptlItem.skipped .ptlHead, .ptlItem.skipped .ptlBody { opacity: .45; }
.startPoints { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); display: grid; gap: var(--sp-2); }
.startPoints legend { padding: 0 var(--sp-2); font-weight: var(--fw-bold); }
.startPoint { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2); border-radius: var(--r); cursor: pointer; }
.startPoint:hover { background: var(--surface-2); }
.startPoint input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.startPoint > span { display: flex; flex-direction: column; gap: 2px; }
.startPoint .dim { font-size: var(--fs-sm); }
.startNote { margin: 0; font-size: var(--fs-sm); min-height: 1em; }
.pathGuides { margin-top: var(--sp-8); }
.pathGuides > h2 { margin-bottom: var(--sp-2); }
.pathGuide { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3); }
.pathGuide > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); align-items: baseline; min-height: 32px; }
.pathGuide h3 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); }
.guideStages { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-3); }
.guideStages p { margin: 4px 0 0; font-size: var(--fs-sm); }
.guideCourses a { color: var(--accent-text); }

/* 2026-10-09 처음 온 사람의 입구(코스 상세·레슨·과정 줄). 토큰만 쓴다.
   좁은 화면에서는 오른쪽 열(시작 버튼)이 표지 그림 아래로 밀려 첫 화면에 없었다. 머리 카드 안에 같은 버튼을
   하나 더 두고, 오른쪽 열이 옆에 보이는 넓은 화면에서는 숨긴다(display:none 이라 보조기술에도 한 번만 읽힌다). */
.courseHeroCta { display: none; }
@media (max-width: 940px) {
  .courseHeroCta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
  .courseHeroCta .btn { min-height: 48px; white-space: normal; }
  .courseHeroCta .dim { font-size: var(--fs-sm); }
}
.ctaMeta { font-weight: var(--fw-regular); }
.courseStartNote { margin: var(--sp-2) 0 var(--sp-3); color: var(--dim); font-size: var(--fs-sm); text-align: center; word-break: keep-all; }
.courseActions #startBtn { white-space: normal; flex-wrap: wrap; }
/* 오른쪽 열 소제목을 h2 로 올렸다(제목 순서). 모양은 예전 h3 그대로. */
.courseIncludes h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
/* 과정 줄의 「마치면 …」. 두 줄까지만 — 넘치면 과정 화면에서 전부 본다. */
.progRowGain { margin-top: 2px; color: var(--dim); font-size: var(--fs-xs); line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
/* 레슨 아래 「다음」 버튼: 제목 밑에 종류·시간을 한 줄 더. 제목이 길어도 폰 폭을 넘지 않게 줄을 바꾼다. */
.lessonNavNext { flex-direction: column; align-items: flex-end; gap: 2px; max-width: 100%; white-space: normal; text-align: right; }
.lessonNavMeta { font-size: var(--fs-xs); font-weight: var(--fw-regular); }
/* 이론 본문 글자 크게(읽기 편의). 본문만 키운다. */
.readingMeta .readSizeBtn { margin-left: auto; min-height: 32px; }
.readingPage.readLarge .md { font-size: var(--fs-lg); line-height: 1.9; }
.readingPage.readLarge .md h2 { font-size: var(--fs-2xl); }
.readingPage.readLarge .md h3 { font-size: var(--fs-xl); }