/* ============================================================
   Joyn LMS — 통합 디자인 시스템 (joyn-ui.css)
   하나의 시각 언어로 수강생·강사·관리자 대시보드 + 칼리지 페이지를 묶는다.
   현대적 · 모바일 퍼스트 · 낮은 시각 노이즈 · 접근성.
   ------------------------------------------------------------
   적용 시: 이 파일을 두 플러그인(joyn-lms, joyn-lms-college)에서
   공통 enqueue(handle "joyn-ui")하고, 각 화면을 아래 컴포넌트로 리팩터.
   ============================================================ */

/* Pretendard(본문) + Noto Serif KR(말씀 악센트) — 프로토타입용 CDN.
   플러그인 이식 시엔 wp_enqueue_style 로 정식 로드(셀프호스팅 권장). */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600&display=swap');

/* ---------- 디자인 토큰 ---------- */
:root {
  /* 브랜드 */
  --ju-brand:        #4541FF;
  --ju-brand-600:    #3530D8;
  --ju-brand-700:    #372fb0;
  --ju-brand-soft:   #EEEEFF;
  --ju-brand-tint:   #f6f6fe;
  --ju-accent:       #7c5cff;
  /* 상태 */
  --ju-success: #16a34a; --ju-success-soft:#e7f6ec;
  --ju-warning: #d97706; --ju-warning-soft:#fdf0e0;
  --ju-danger:  #dc2626; --ju-danger-soft: #fdeceb;
  --ju-info:    #2563eb; --ju-info-soft:   #e8f0fe;
  /* 표면/텍스트/선 */
  --ju-bg:       #f5f6fb;
  --ju-surface:  #ffffff;
  --ju-surface-2:#f1f2f8;
  --ju-text:     #191c26;
  --ju-text-2:   #5a6072;
  --ju-text-3:   #9aa0b4;
  --ju-border:   #e7e8f0;
  --ju-border-2: #eef0f5;
  /* 반경 */
  --ju-r-sm: 8px; --ju-r: 12px; --ju-r-lg: 16px; --ju-r-xl: 22px; --ju-r-pill: 999px;
  /* 그림자 */
  --ju-sh-1: 0 1px 2px rgba(20,22,40,.04), 0 1px 3px rgba(20,22,40,.06);
  --ju-sh-2: 0 6px 18px rgba(28,30,60,.06);
  --ju-sh-3: 0 14px 40px rgba(28,30,60,.12);
  /* 레이아웃 */
  --ju-sidebar: 252px;
  --ju-topbar:  64px;
  --ju-maxw:    1280px;
  --ju-font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}

/* Mobile readability floor — keep auxiliary copy legible across all migrated pages. */
@media (max-width: 640px) {
  .ju-scope small, .ju-scope time, .ju-scope figcaption,
  .ju-scope .ju-top__sub, .ju-scope .ju-pagebar__sub,
  .ju-scope .ju-choice__s, .ju-scope .ju-li__s, .ju-scope .ju-li__time,
  .ju-scope .ju-course__meta, .ju-scope .ju-userchip__nm,
  .ju-scope .ju-userchip__rl, .ju-scope .ju-bar__pct,
  .ju-scope .ju-badge, .ju-scope .ju-tabbar a,
  .ju-scope .ju-form-hint, .ju-scope .joyn-form-hint,
  body .joyn-bottom-nav .joyn-nav-item,
  .ju-scope.jlc-cs .ju-kpi__lbl, .ju-scope.jlc-mn .ju-kpi__lbl,
  .ju-scope.jlc-cs .jlc-cs__wp, .ju-scope.jlc-mn .jlc-mn__view {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ju-dark: 1; } }
:root[data-theme="dark"], :root[data-theme="dark"] * { color-scheme: dark; }
:root[data-theme="dark"] {
  --ju-bg:#0f1220; --ju-surface:#161a2b; --ju-surface-2:#1e2336;
  --ju-text:#eceef7; --ju-text-2:#a6adc6; --ju-text-3:#727a97;
  --ju-border:#282e44; --ju-border-2:#232841; --ju-brand-soft:#232449; --ju-brand-tint:#191c33;
  --ju-sh-1:0 1px 3px rgba(0,0,0,.4); --ju-sh-2:0 8px 22px rgba(0,0,0,.4); --ju-sh-3:0 16px 44px rgba(0,0,0,.55);
  --ju-success-soft:#123324; --ju-warning-soft:#3a2a12; --ju-danger-soft:#3a1c1c; --ju-info-soft:#152546;
}

/* ---------- 리셋(스코프: .ju-app 하위) ---------- */
.ju-scope, .ju-scope * { box-sizing: border-box; }
.ju-scope {
  font-family: var(--ju-font);
  color: var(--ju-text);
  background: var(--ju-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 14px;
}
.ju-scope h1,.ju-scope h2,.ju-scope h3,.ju-scope h4,.ju-scope p { margin: 0; }
/* 링크 리셋: :where()로 명시도 0 → 컴포넌트(.ju-btn 등) 색상이 항상 우선.
   (일반 <a>만 부모 색 상속; 버튼/탭/내비 등 색상 지정 컴포넌트는 자기 색 유지) */
.ju-scope a,
.ju-scope a:link,
.ju-scope a:visited,
.ju-scope a:hover,
.ju-scope a:focus,
.ju-scope a:active,
.ju-scope a * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.ju-scope :where(a) { color: inherit; }
.ju-scope img { max-width: 100%; display: block; }

/* ============================================================
   앱 셸 — 사이드바 + 톱바 + 메인
   ============================================================ */
.ju-app { display: grid; grid-template-columns: var(--ju-sidebar) 1fr; min-height: 100vh; }
/* 스크림은 항상 fixed(그리드 흐름에서 제외) — 모바일에서만 열림 */
.ju-scrim { position: fixed; inset: 0; background: rgba(10,12,24,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 55; }

/* 사이드바 */
.ju-side {
  background: var(--ju-surface); border-right: 1px solid var(--ju-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.ju-side__brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; font-weight: 800; font-size: 18px; }
.ju-side__logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg,var(--ju-brand),var(--ju-accent)); display: grid; place-items: center; color: #fff; flex: none; }
.ju-side__nav { padding: 8px 12px; overflow-y: auto; flex: 1; }
.ju-side__group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ju-text-3); padding: 16px 12px 6px; }
.ju-navitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ju-r); color: var(--ju-text-2); font-weight: 600; font-size: 14px; margin-bottom: 2px; transition: background .12s, color .12s; }
.ju-navitem:hover { background: var(--ju-surface-2); color: var(--ju-text); }
.ju-navitem.is-on { background: var(--ju-brand-soft); color: var(--ju-brand-600); }
.ju-navitem svg { width: 20px; height: 20px; flex: none; }
.ju-navitem__badge { margin-left: auto; background: var(--ju-danger); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 6px; }
.ju-side__foot { padding: 14px; border-top: 1px solid var(--ju-border-2); }
.ju-userchip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--ju-r); }
.ju-userchip:hover { background: var(--ju-surface-2); }
.ju-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--ju-brand),var(--ju-accent)); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.ju-userchip__nm { font-weight: 700; font-size: 13.5px; }
.ju-userchip__rl { font-size: 12px; color: var(--ju-text-3); }

/* 메인 열 */
.ju-main { min-width: 0; display: flex; flex-direction: column; }

/* 톱바 */
.ju-top { height: var(--ju-topbar); background: color-mix(in srgb, var(--ju-surface) 85%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ju-border); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20; }
.ju-top__title { font-size: 18px; font-weight: 800; }
.ju-top__sub { font-size: 13px; color: var(--ju-text-3); margin-top: 1px; }
.ju-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--ju-surface-2); border: 1px solid var(--ju-border); border-radius: var(--ju-r-pill); padding: 8px 14px; color: var(--ju-text-3); min-width: 220px; }
.ju-search input { border: 0; background: transparent; outline: none; font: inherit; color: var(--ju-text); width: 100%; }
.ju-iconbtn { width: 40px; height: 40px; border-radius: var(--ju-r); border: 1px solid var(--ju-border); background: var(--ju-surface); display: grid; place-items: center; color: var(--ju-text-2); cursor: pointer; position: relative; }
.ju-iconbtn:hover { background: var(--ju-surface-2); }
.ju-iconbtn__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ju-danger); border: 2px solid var(--ju-surface); }
.ju-burger { display: none; }

/* 콘텐츠 */
.ju-content { padding: 24px; max-width: var(--ju-maxw); width: 100%; margin: 0 auto; }
.ju-content--wide { max-width: none; }

/* ============================================================
   컴포넌트
   ============================================================ */

/* 섹션 헤더 */
.ju-sec-h { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; }
.ju-sec-h:first-child { margin-top: 4px; }
.ju-sec-h h2 { font-size: 17px; font-weight: 800; }
.ju-sec-h .ju-sec-h__more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ju-brand-600); }

/* 그리드 */
.ju-grid { display: grid; gap: 16px; }
.ju-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ju-grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ju-grid--2 { grid-template-columns: 1fr 1fr; }
.ju-grid--3-1 { grid-template-columns: 2fr 1fr; }

/* 카드 */
.ju-card { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); box-shadow: var(--ju-sh-1); }
.ju-card__pad { padding: 20px; }
.ju-card__h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--ju-border-2); font-weight: 800; }
.ju-card__h .ju-sec-h__more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ju-brand-600); }

/* KPI 타일 */
.ju-kpi { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); padding: 18px 20px; box-shadow: var(--ju-sh-1); display: flex; flex-direction: column; gap: 6px; }
.ju-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.ju-kpi__ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ju-brand-soft); color: var(--ju-brand-600); }
.ju-kpi__ico svg { width: 22px; height: 22px; }
.ju-kpi__ico--g { background: var(--ju-success-soft); color: var(--ju-success); }
.ju-kpi__ico--w { background: var(--ju-warning-soft); color: var(--ju-warning); }
.ju-kpi__ico--i { background: var(--ju-info-soft); color: var(--ju-info); }
.ju-kpi__num { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.ju-kpi__lbl { font-size: 13px; color: var(--ju-text-2); }
.ju-kpi__delta { font-size: 12px; font-weight: 700; }
.ju-kpi__delta--up { color: var(--ju-success); }
.ju-kpi__delta--down { color: var(--ju-danger); }

/* 학습 이어보기 배너 */
.ju-hero { border-radius: var(--ju-r-xl); padding: 28px 30px; color: #fff; background: radial-gradient(700px 300px at 90% -30%, rgba(255,255,255,.28), transparent), linear-gradient(135deg, var(--ju-brand), var(--ju-accent)); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ju-hero__body { flex: 1; min-width: 220px; }
.ju-hero__eyebrow { font-size: 12.5px; font-weight: 700; opacity: .85; letter-spacing: .04em; }
.ju-hero__title { font-size: 24px; font-weight: 800; margin: 6px 0 4px; letter-spacing: -.4px; }
.ju-hero__meta { font-size: 13.5px; opacity: .9; }
.ju-hero__prog { height: 8px; border-radius: 99px; background: rgba(255,255,255,.28); margin-top: 16px; overflow: hidden; max-width: 460px; }
.ju-hero__prog span { display: block; height: 100%; border-radius: 99px; background: #fff; }

/* 코스 카드 */
.ju-course { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); overflow: hidden; box-shadow: var(--ju-sh-1); transition: transform .15s, box-shadow .15s; }
.ju-course:hover { transform: translateY(-3px); box-shadow: var(--ju-sh-2); }
.ju-course__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg,var(--ju-brand-soft),var(--ju-surface-2)); position: relative; display: grid; place-items: center; color: var(--ju-brand-600); }
.ju-course__thumb svg { width: 44px; height: 44px; opacity: .5; }
.ju-course__cat { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--ju-brand-600); font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--ju-r-pill); }
.ju-course__body { padding: 16px; }
.ju-course__nm { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.ju-course__meta { font-size: 12.5px; color: var(--ju-text-3); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ju-course__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* 진행바 */
.ju-bar { height: 8px; border-radius: 99px; background: var(--ju-surface-2); overflow: hidden; flex: 1; }
.ju-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--ju-brand),var(--ju-accent)); }
.ju-bar__pct { font-size: 12px; font-weight: 800; color: var(--ju-brand-600); white-space: nowrap; }

/* 진행 링 */
.ju-ring { --v: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ju-brand) calc(var(--v) * 1%), var(--ju-surface-2) 0); position: relative; flex: none; }
.ju-ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--ju-surface); }
.ju-ring b { position: relative; font-size: 13px; font-weight: 800; }

/* 버튼 */
.ju-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: var(--ju-r); font-weight: 700; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .1s, background .12s, box-shadow .12s; white-space: nowrap; }
.ju-btn svg { width: 18px; height: 18px; }
.ju-btn--primary { background: var(--ju-brand); color: #fff; box-shadow: 0 6px 16px rgba(81,69,230,.28); }
.ju-btn--primary:hover { background: var(--ju-brand-600); transform: translateY(-1px); }
.ju-btn--soft { background: var(--ju-brand-soft); color: var(--ju-brand-600); }
.ju-btn--soft:hover { background: #e5e7fd; }
.ju-btn--outline { background: var(--ju-surface); color: var(--ju-text); border-color: var(--ju-border); }
.ju-btn--outline:hover { background: var(--ju-surface-2); }
.ju-btn--danger { background: var(--ju-surface); color: var(--ju-danger); border-color: var(--ju-danger-soft); }
.ju-btn--ghost-w { background: #fff; color: var(--ju-brand-600); }
.ju-btn--sm { padding: 7px 13px; font-size: 13px; border-radius: var(--ju-r-sm); }
.ju-btn--block { width: 100%; }

/* 뱃지/핀 */
.ju-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--ju-r-pill); background: var(--ju-surface-2); color: var(--ju-text-2); }
.ju-badge--g { background: var(--ju-success-soft); color: var(--ju-success); }
.ju-badge--w { background: var(--ju-warning-soft); color: var(--ju-warning); }
.ju-badge--d { background: var(--ju-danger-soft); color: var(--ju-danger); }
.ju-badge--b { background: var(--ju-brand-soft); color: var(--ju-brand-600); }

/* 테이블 */
.ju-tbl-wrap { overflow-x: auto; }
.ju-tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
.ju-tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ju-text-3); padding: 12px 16px; border-bottom: 1px solid var(--ju-border-2); text-transform: uppercase; letter-spacing: .03em; }
.ju-tbl td { padding: 13px 16px; border-bottom: 1px solid var(--ju-border-2); font-size: 14px; }
.ju-tbl tr:last-child td { border-bottom: 0; }
.ju-tbl tbody tr:hover td, .ju-tbl tbody tr:hover td { background: var(--ju-brand-tint); }
.ju-tbl__u { display: flex; align-items: center; gap: 10px; }
.ju-tbl__u small { color: var(--ju-text-3); font-size: 12px; }

/* 리스트(대기열/활동) */
.ju-list { display: flex; flex-direction: column; }
.ju-li { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ju-border-2); }
.ju-li:last-child { border-bottom: 0; }
.ju-li__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ju-brand-soft); color: var(--ju-brand-600); flex: none; }
.ju-li__ico svg { width: 19px; height: 19px; }
.ju-li__b { flex: 1; min-width: 0; }
.ju-li__t { font-weight: 700; font-size: 14px; }
.ju-li__s { font-size: 12.5px; color: var(--ju-text-3); }
.ju-li__time { font-size: 12px; color: var(--ju-text-3); white-space: nowrap; }

/* 빈 상태 */
.ju-empty { text-align: center; color: var(--ju-text-3); padding: 40px 20px; font-size: 14px; }

/* 하단 탭바(모바일) */
.ju-tabbar { display: none; }

/* ============================================================
   v2 — 이식 보강 컴포넌트
   (테마 임베드 셸 · 폼 · 모달 · 알림 · 탭 · 게이트 · 정의행 · 아이콘)
   ============================================================ */

/* ---------- 아이콘 호환: <svg> 와 Remix Icon <i class="ri-*"> 모두 ---------- */
.ju-scope i[class^="ri-"], .ju-scope i[class*=" ri-"] { font-style: normal; line-height: 1; display: inline-block; }
.ju-navitem i[class*="ri-"] { font-size: 20px; }
.ju-kpi__ico i[class*="ri-"], .ju-li__ico i[class*="ri-"] { font-size: 21px; }
.ju-btn i[class*="ri-"] { font-size: 17px; }
.ju-choice__ic i[class*="ri-"] { font-size: 24px; }

/* ---------- 테마 임베드 셸 (get_header/footer 사이 풀블리드) ---------- */
.ju-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow-x: hidden; background: var(--ju-bg); min-height: 72vh; }
.ju-wrap { max-width: var(--ju-maxw); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.ju-wrap--narrow { max-width: 900px; }

.ju-pagebar { background: var(--ju-surface); border-bottom: 1px solid var(--ju-border); }
.ju-pagebar__in { max-width: var(--ju-maxw); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 14px; box-sizing: border-box; }
.ju-pagebar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.ju-pagebar__title { font-weight: 800; font-size: 18px; }
.ju-pagebar__sub { font-size: 13px; color: var(--ju-text-3); margin-top: 1px; }
.ju-pagebar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 가로 탭 */
.ju-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ju-tabs::-webkit-scrollbar { display: none; }
.ju-tabs--bar { background: var(--ju-surface); border-bottom: 1px solid var(--ju-border); }
.ju-tabs--bar .ju-tabs__in { max-width: var(--ju-maxw); margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; }
.ju-tab { padding: 14px 16px; font-weight: 700; font-size: 14.5px; color: var(--ju-text-2); border-bottom: 2.5px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ju-tab:hover { color: var(--ju-text); }
.ju-tab.is-on { color: var(--ju-brand-600); border-bottom-color: var(--ju-brand); }
.ju-tab__badge { background: var(--ju-danger); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: inline-grid; place-items: center; padding: 0 5px; }
.ju-page-body { padding: 26px 24px 72px; }

/* 세그먼트(pill 토글) */
.ju-seg { display: inline-flex; background: var(--ju-surface-2); border-radius: var(--ju-r-pill); padding: 4px; gap: 2px; }
.ju-seg a, .ju-seg button { padding: 7px 16px; border-radius: var(--ju-r-pill); font-weight: 700; font-size: 13px; color: var(--ju-text-2); border: 0; background: transparent; cursor: pointer; }
.ju-seg a.is-on, .ju-seg button.is-on { background: var(--ju-surface); color: var(--ju-brand-600); box-shadow: var(--ju-sh-1); }

/* ---------- 알림 / 피드백 ---------- */
.ju-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-radius: var(--ju-r); font-size: 14px; font-weight: 600; border: 1px solid; margin-bottom: 18px; }
.ju-notice svg, .ju-notice i { flex: none; margin-top: 1px; }
.ju-notice--success { background: var(--ju-success-soft); border-color: color-mix(in srgb, var(--ju-success) 35%, transparent); color: var(--ju-success); }
.ju-notice--error, .ju-notice--danger { background: var(--ju-danger-soft); border-color: color-mix(in srgb, var(--ju-danger) 35%, transparent); color: var(--ju-danger); }
.ju-notice--warning { background: var(--ju-warning-soft); border-color: color-mix(in srgb, var(--ju-warning) 35%, transparent); color: var(--ju-warning); }
.ju-notice--info { background: var(--ju-info-soft); border-color: color-mix(in srgb, var(--ju-info) 35%, transparent); color: var(--ju-info); }
.ju-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ju-border); border-top-color: var(--ju-brand); animation: ju-spin .7s linear infinite; }
@keyframes ju-spin { to { transform: rotate(360deg); } }

/* ---------- 폼 시스템 ---------- */
.ju-form { display: grid; gap: 16px; }
.ju-form--card { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); padding: 20px; box-shadow: var(--ju-sh-1); }
.ju-field { display: grid; gap: 6px; }
.ju-label { font-size: 13px; font-weight: 700; color: var(--ju-text-2); }
.ju-req { color: var(--ju-danger); margin-left: 2px; }
.ju-input, .ju-select, .ju-textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 10px 13px; border: 1px solid var(--ju-border); border-radius: var(--ju-r);
  background: var(--ju-surface); color: var(--ju-text); transition: border-color .12s, box-shadow .12s;
}
.ju-input:focus, .ju-select:focus, .ju-textarea:focus { outline: none; border-color: var(--ju-brand); box-shadow: 0 0 0 3px var(--ju-brand-soft); }
.ju-textarea { min-height: 92px; resize: vertical; }
.ju-input[type="color"] { height: 44px; padding: 4px; cursor: pointer; }
.ju-hint { font-size: 12.5px; color: var(--ju-text-3); }
.ju-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ju-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ju-inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.ju-fieldset { border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); padding: 16px 18px 18px; background: var(--ju-surface); margin: 0; }
.ju-fieldset > legend { font-weight: 800; font-size: 14px; padding: 0 6px; color: var(--ju-text); }
.ju-check, .ju-radio { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ju-text); cursor: pointer; }
.ju-check input, .ju-radio input { width: 18px; height: 18px; accent-color: var(--ju-brand); }

/* ---------- 선택 카드 / 역할 게이트 ---------- */
.ju-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ju-choice { position: relative; display: block; text-align: left; border: 1.5px solid var(--ju-border); border-radius: var(--ju-r-lg); padding: 18px; background: var(--ju-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ju-choice:hover { border-color: color-mix(in srgb, var(--ju-brand) 45%, var(--ju-border)); transform: translateY(-2px); box-shadow: var(--ju-sh-2); }
.ju-choice.is-on { border-color: var(--ju-brand); box-shadow: 0 0 0 2px var(--ju-brand-soft) inset; }
.ju-choice input { position: absolute; top: 16px; right: 16px; accent-color: var(--ju-brand); }
.ju-choice__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--ju-brand-soft); color: var(--ju-brand-600); margin-bottom: 12px; }
.ju-choice__ic svg { width: 24px; height: 24px; }
.ju-choice__t { font-weight: 800; font-size: 15.5px; margin-bottom: 4px; }
.ju-choice__s { font-size: 13px; color: var(--ju-text-3); line-height: 1.5; }
.ju-choice__sw { display: block; height: 54px; border-radius: 10px; margin-bottom: 10px; }
.ju-gate { min-height: 70vh; display: grid; place-items: center; padding: 40px 20px; }
.ju-gate__box { width: 100%; max-width: 640px; text-align: center; }
.ju-gate__title { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.ju-gate__sub { color: var(--ju-text-3); margin-bottom: 24px; }

/* ---------- 정의행(라벨:값) / 요약 배너 ---------- */
.ju-dl { display: grid; gap: 1px; background: var(--ju-border-2); border: 1px solid var(--ju-border-2); border-radius: var(--ju-r); overflow: hidden; }
.ju-drow { display: flex; gap: 12px; padding: 12px 16px; background: var(--ju-surface); }
.ju-drow dt, .ju-drow__k { font-size: 13px; color: var(--ju-text-3); font-weight: 600; min-width: 120px; }
.ju-drow dd, .ju-drow__v { font-size: 14px; font-weight: 700; margin: 0; }
.ju-summary { background: var(--ju-brand-tint); border: 1px solid var(--ju-brand-soft); border-radius: var(--ju-r); padding: 14px 18px; font-size: 14px; }
.ju-summary b { color: var(--ju-brand-600); }

/* ---------- 모달 ---------- */
.ju-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; }
.ju-modal.is-open { display: flex; }
.ju-modal__backdrop { position: absolute; inset: 0; background: rgba(12,14,26,.55); backdrop-filter: blur(2px); }
.ju-modal__panel { position: relative; width: 100%; max-width: 520px; background: var(--ju-surface); border-radius: var(--ju-r-lg); box-shadow: var(--ju-sh-3); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.ju-modal__head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--ju-border-2); }
.ju-modal__title { font-weight: 800; font-size: 17px; }
.ju-modal__close { margin-left: auto; width: 34px; height: 34px; border-radius: var(--ju-r-sm); border: 0; background: var(--ju-surface-2); color: var(--ju-text-2); cursor: pointer; font-size: 18px; }
.ju-modal__body { padding: 20px; overflow-y: auto; }
.ju-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--ju-border-2); }

/* ---------- 버튼 보강 / 유틸 ---------- */
.ju-btn--text { background: transparent; color: var(--ju-brand-600); padding: 8px 10px; }
.ju-btn--text:hover { background: var(--ju-brand-soft); }
.ju-btn--icon { padding: 10px; width: 40px; height: 40px; }
.ju-btn--lg { padding: 14px 26px; font-size: 15px; }
.ju-divider { height: 1px; background: var(--ju-border-2); border: 0; margin: 24px 0; }
.ju-subhead { font-size: 15px; font-weight: 800; margin: 24px 0 12px; }
.ju-x-danger { background: var(--ju-surface); color: var(--ju-danger); border: 1px solid var(--ju-danger-soft); padding: 7px 12px; border-radius: var(--ju-r-sm); font-weight: 700; font-size: 13px; cursor: pointer; }

/* ============================================================
   v3 — others-design01 흡수 (커머스/멤버십 제외)
   성경구절 세리프 · 썸네일 진도 링 · 리치 히어로 · 참여 필 · 접근성
   ============================================================ */

/* ---------- 세리프 악센트(말씀/인용) ---------- */
.ju-serif { font-family: "Noto Serif KR", Georgia, "Nanum Myeongjo", serif; }
.ju-verse { font-family: "Noto Serif KR", Georgia, serif; font-size: 14px; line-height: 1.55; color: var(--ju-brand-600); font-weight: 500; }
:root[data-theme="dark"] .ju-verse { color: var(--ju-accent); }

/* 큰 제목 자간 살짝 조이기(모던) */
.ju-hero__title, .ju-kpi__num, .ju-top__title, .ju-pagebar__title, .ju-gate__title { letter-spacing: -.02em; }

/* ---------- 코스 썸네일 진도 링 ---------- */
.ju-course__thumb { position: relative; }
.ju-course__ring { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; }
.ju-course__ring circle.track { stroke: rgba(255,255,255,.32); }
.ju-course__ring circle.val { stroke: #fff; }
.ju-course__ring text { fill: #fff; font-weight: 800; }

/* ---------- 리치 다크 이어보기 히어로(썸네일+플레이) ---------- */
.ju-hero--rich { background: linear-gradient(120deg, #1a1830 0%, #211d4a 55%, #2e2470 100%); position: relative; overflow: hidden; }
.ju-hero--rich::before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ju-brand) 55%, transparent), transparent 68%); }
.ju-hero--rich > * { position: relative; z-index: 1; }
.ju-hero__thumb { width: 190px; height: 130px; border-radius: 16px; flex: none; background: linear-gradient(135deg, var(--ju-brand), var(--ju-accent)); display: grid; place-items: center; position: relative; overflow: hidden; color: rgba(255,255,255,.9); }
.ju-hero__thumb svg { width: 44px; height: 44px; }
.ju-hero__play { position: absolute; inset: 0; display: grid; place-items: center; }
.ju-hero__play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--ju-brand-600); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.ju-hero__tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--ju-r-pill); color: #d6d3ff; margin-bottom: 12px; }

/* ---------- 참여 강조 필(스트릭 등, 비커머스) ---------- */
.ju-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: var(--ju-r-pill); background: var(--ju-surface-2); color: var(--ju-text-2); }
.ju-pill--streak { background: #fff4ec; border: 1px solid #ffe0cc; color: #d8691e; }
:root[data-theme="dark"] .ju-pill--streak { background: #3a2a12; border-color: #5a3f1a; color: #f0a35a; }

/* ---------- 접근성 ---------- */
.ju-scope :focus-visible { outline: 2px solid var(--ju-brand); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ju-scope *, .ju-scope *::before, .ju-scope *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   v4 — 콘텐츠 화면 패턴 (플레이어 · 카탈로그 · 강의상세 · 관리자 차트)
   ============================================================ */

/* 2단 레이아웃(본문 + 사이드 레일) */
.ju-split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.ju-split--left { grid-template-columns: 280px 1fr; }
.ju-split__rail { position: sticky; top: 88px; }

/* 비디오 플레이어 프레임 */
.ju-player { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg,#1a1830,#2e2470); border-radius: var(--ju-r-lg); display: grid; place-items: center; overflow: hidden; color: #fff; }
.ju-player__play { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--ju-brand-600); box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; }
.ju-player__play svg { width: 30px; height: 30px; margin-left: 3px; }
.ju-player__cap { position: absolute; left: 16px; bottom: 14px; font-size: 13px; color: rgba(255,255,255,.85); }

/* 커리큘럼/레슨 리스트 */
.ju-lesson { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--ju-r); border: 1px solid transparent; }
.ju-lesson + .ju-lesson { margin-top: 2px; }
.ju-lesson__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--ju-surface-2); color: var(--ju-text-3); }
.ju-lesson__ic svg { width: 16px; height: 16px; }
.ju-lesson__b { flex: 1; min-width: 0; }
.ju-lesson__t { font-weight: 600; font-size: 14px; }
.ju-lesson__m { font-size: 12px; color: var(--ju-text-3); margin-top: 1px; }
.ju-lesson__dur { font-size: 12px; color: var(--ju-text-3); flex: none; }
.ju-lesson.is-done .ju-lesson__ic { background: var(--ju-success-soft); color: var(--ju-success); }
.ju-lesson.is-current { background: var(--ju-brand-soft); border-color: color-mix(in srgb, var(--ju-brand) 30%, transparent); }
.ju-lesson.is-current .ju-lesson__ic { background: var(--ju-brand); color: #fff; }
.ju-lesson.is-lock { opacity: .55; }

/* 아코디언(커리큘럼 섹션) */
.ju-acc { border: 1px solid var(--ju-border); border-radius: var(--ju-r); overflow: hidden; background: var(--ju-surface); }
.ju-acc + .ju-acc { margin-top: 10px; }
.ju-acc__head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-weight: 700; cursor: pointer; }
.ju-acc__head .ju-acc__meta { margin-left: auto; font-size: 12.5px; color: var(--ju-text-3); font-weight: 600; }
.ju-acc__body { padding: 4px 10px 12px; border-top: 1px solid var(--ju-border-2); }

/* 체크리스트(이 강의에서 배우는 것) */
.ju-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 0; }
.ju-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ju-text-2); }
.ju-checklist svg { width: 20px; height: 20px; color: var(--ju-success); flex: none; margin-top: 1px; }

/* 별점 */
.ju-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px; color: var(--ju-warning); }
.ju-rating svg { width: 16px; height: 16px; }
.ju-rating small { color: var(--ju-text-3); font-weight: 600; }

/* 수강 구매 카드(비멤버십: 단건 수강료) */
.ju-buy__price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ju-buy__meta { display: grid; gap: 10px; margin: 16px 0; }
.ju-buy__meta div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ju-text-2); }
.ju-buy__meta svg { width: 18px; height: 18px; color: var(--ju-text-3); flex: none; }

/* TOP 랭크 리스트 */
.ju-rank { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--ju-border-2); }
.ju-rank:last-child { border-bottom: 0; }
.ju-rank__n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--ju-surface-2); color: var(--ju-text-2); flex: none; }
.ju-rank--top .ju-rank__n { background: var(--ju-brand); color: #fff; }
.ju-rank__b { flex: 1; min-width: 0; }
.ju-rank__t { font-weight: 700; font-size: 14px; }
.ju-rank__s { font-size: 12px; color: var(--ju-text-3); }
.ju-rank__v { font-weight: 800; font-size: 14px; }

/* 심플 바 차트 */
.ju-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 8px; }
.ju-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.ju-chart__bar { width: 100%; max-width: 40px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--ju-brand), var(--ju-accent)); transition: height .3s; }
.ju-chart__bar--soft { background: var(--ju-brand-soft); }
.ju-chart__x { font-size: 12px; color: var(--ju-text-3); }

/* 도넛(conic-gradient) */
.ju-donut { width: 156px; height: 156px; border-radius: 50%; position: relative; flex: none; }
.ju-donut::after { content: ""; position: absolute; inset: 28px; background: var(--ju-surface); border-radius: 50%; }
.ju-donut__c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ju-donut__c b { font-size: 22px; font-weight: 800; }
.ju-legend { display: grid; gap: 10px; }
.ju-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; list-style: none; }
.ju-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ju-legend .v { margin-left: auto; font-weight: 700; color: var(--ju-text-2); }

/* 필터 옵션 */
.ju-filter__opt { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 14px; cursor: pointer; }
.ju-filter__opt .cnt { margin-left: auto; color: var(--ju-text-3); font-size: 12.5px; }
.ju-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ju-chip-f { padding: 7px 14px; border-radius: var(--ju-r-pill); border: 1px solid var(--ju-border); background: var(--ju-surface); font-size: 13px; font-weight: 700; color: var(--ju-text-2); cursor: pointer; }
.ju-chip-f.is-on { background: var(--ju-brand); color: #fff; border-color: var(--ju-brand); }

/* 강사 소개 카드 */
.ju-tutor { display: flex; gap: 16px; align-items: center; }
.ju-tutor__av { width: 66px; height: 66px; border-radius: 50%; flex: none; background: linear-gradient(135deg,var(--ju-brand),var(--ju-accent)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 24px; }

@media (max-width: 960px) {
  .ju-split, .ju-split--left { grid-template-columns: 1fr; }
  .ju-split__rail { position: static; }
  .ju-checklist { grid-template-columns: 1fr; }
}

/* ============================================================
   v5 — 레슨 재생 실기능 (Bunny/Gumlet 임베드 · 다국어자막 · hc-joyn-board · 자동완료)
   원칙: 영상·자막·게시판은 외부(Bunny/HCJBD)가 자체 렌더 → 임베드 슬롯으로 수용, 주변만 통일
   ============================================================ */

/* 비디오 옵션 툴바(크게보기·전체화면 + 자막 표시) */
.ju-vtoolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ju-vtool { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--ju-r); border: 1px solid var(--ju-border); background: var(--ju-surface); font-size: 13px; font-weight: 700; color: var(--ju-text-2); cursor: pointer; }
.ju-vtool:hover { background: var(--ju-surface-2); }
.ju-vtool svg { width: 17px; height: 17px; }
.ju-cc { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ju-text-3); font-weight: 600; }
.ju-cc b { background: var(--ju-brand-soft); color: var(--ju-brand-600); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 800; }

/* 비디오 스테이지(16:9) — 내부에 Bunny/Gumlet 플레이어(iframe/HLS)가 채워짐 */
.ju-stage { position: relative; aspect-ratio: 16/9; border-radius: var(--ju-r-lg); overflow: hidden; background: #0d0f1a; }
.ju-stage > iframe, .ju-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 서드파티 임베드 슬롯(플레이어/게시판 등 외부 플러그인 출력 자리 — 프로토타입 표시용) */
.ju-embed-slot { border: 1.5px dashed #c8ccda; border-radius: var(--ju-r-lg); background: var(--ju-surface-2); padding: 24px; text-align: center; color: var(--ju-text-3); font-size: 13px; }
.ju-embed-slot b { display: block; color: var(--ju-text-2); font-weight: 700; margin-bottom: 4px; font-size: 14px; }
:root[data-theme="dark"] .ju-embed-slot { border-color: #38405c; }

/* 완료 처리 바(자동완료 + 수동 완료) */
.ju-complete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ju-brand-tint); border: 1px solid var(--ju-brand-soft); border-radius: var(--ju-r-lg); padding: 15px 18px; }
.ju-complete__b { flex: 1; min-width: 180px; }
.ju-complete__t { font-weight: 700; font-size: 14px; }
.ju-complete__s { font-size: 12.5px; color: var(--ju-text-3); margin-top: 2px; }

/* 퀴즈 블록(연결 퀴즈) */
.ju-quizcard { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ju-quizcard__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--ju-warning-soft); color: var(--ju-warning); display: grid; place-items: center; flex: none; }
.ju-quizcard__ic svg { width: 24px; height: 24px; }
.ju-quizcard__best { font-weight: 800; color: var(--ju-brand-600); }

/* 레슨 이전/다음 네비 */
.ju-lnav { display: flex; gap: 12px; justify-content: space-between; margin-top: 20px; }
.ju-lnav a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--ju-border); border-radius: var(--ju-r); background: var(--ju-surface); }
.ju-lnav a:hover { border-color: color-mix(in srgb, var(--ju-brand) 40%, var(--ju-border)); }
.ju-lnav a.is-next { flex-direction: row-reverse; text-align: right; }
.ju-lnav a.is-off { opacity: .45; pointer-events: none; }
.ju-lnav .lab { font-size: 12px; color: var(--ju-text-3); }
.ju-lnav .nm { font-weight: 700; font-size: 13.5px; }

/* 커리큘럼 섹션 헤더(사이드바) */
.ju-curr-sec { font-size: 12px; font-weight: 800; color: var(--ju-text-3); text-transform: uppercase; letter-spacing: .04em; padding: 14px 12px 6px; }

@media (max-width: 640px) { .ju-lnav { flex-direction: column; } }

/* ============================================================
   v6 — 강의 상세(단일 강의) 실기능
   이중언어 섹션박스 · 수강차수 배너 · CTA상태 · 메타리스트 · 후기 · 공유
   ============================================================ */

/* 이중언어 섹션 박스(한글 제목 + EN 부제) */
.ju-secbox { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); box-shadow: var(--ju-sh-1); margin-bottom: 16px; overflow: hidden; }
.ju-secbox__head { display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 0; }
.ju-secbox__title { font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.ju-secbox__title svg { width: 19px; height: 19px; color: var(--ju-brand-600); }
.ju-secbox__en { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--ju-text-3); }
.ju-secbox__body { padding: 12px 20px 20px; font-size: 14.5px; line-height: 1.7; color: var(--ju-text-2); }

/* 수강 차수(cohort) 배너 */
.ju-cohort { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--ju-brand-tint); border: 1px solid var(--ju-brand-soft); border-radius: var(--ju-r); padding: 14px 16px; }
.ju-cohort__badge { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: var(--ju-r-pill); background: var(--ju-brand); color: #fff; flex: none; }
.ju-cohort__badge--closed { background: var(--ju-text-3); }
.ju-cohort__title { font-weight: 800; font-size: 15px; }
.ju-cohort__meta { font-size: 12.5px; color: var(--ju-text-2); display: inline-flex; align-items: center; gap: 6px; }
.ju-cohort__meta svg { width: 15px; height: 15px; color: var(--ju-brand-600); }

/* CTA 상태(사이드바) */
.ju-cta-price { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ju-cta-price small { font-size: 15px; color: var(--ju-text-3); text-decoration: line-through; margin-right: 8px; font-weight: 700; }
.ju-cta-enrolled { font-weight: 800; color: var(--ju-success); font-size: 16px; }
.ju-enroll-btn--off { background: var(--ju-surface-2); color: var(--ju-text-3); cursor: not-allowed; box-shadow: none; }

/* 사이드바 메타 리스트 */
.ju-metalist { list-style: none; padding: 0; margin: 0; }
.ju-metalist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13.5px; color: var(--ju-text-2); border-bottom: 1px solid var(--ju-border-2); }
.ju-metalist li:last-child { border-bottom: 0; }
.ju-metalist svg { width: 18px; height: 18px; color: var(--ju-text-3); flex: none; }
.ju-metalist b { margin-left: auto; color: var(--ju-text); font-weight: 700; }

/* 별점 행 + 후기 */
.ju-stars { display: inline-flex; gap: 2px; color: var(--ju-warning); }
.ju-stars svg { width: 16px; height: 16px; }
.ju-stars .off { color: var(--ju-border); }
.ju-review { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ju-border-2); }
.ju-review:last-child { border-bottom: 0; }
.ju-review__b { flex: 1; min-width: 0; }
.ju-review__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ju-review__nm { font-weight: 700; font-size: 14px; }
.ju-review__date { font-size: 12px; color: var(--ju-text-3); margin-left: auto; }
.ju-review__t { font-size: 14px; color: var(--ju-text-2); line-height: 1.6; }
.ju-review-form__stars { display: inline-flex; gap: 4px; color: var(--ju-border); cursor: pointer; }
.ju-review-form__stars svg { width: 26px; height: 26px; }

/* 공유 버튼 행 */
.ju-share { display: flex; gap: 10px; flex-wrap: wrap; }
.ju-share__btn { width: 44px; height: 44px; border-radius: var(--ju-r); border: 1px solid var(--ju-border); background: var(--ju-surface); display: grid; place-items: center; color: var(--ju-text-2); cursor: pointer; }
.ju-share__btn:hover { background: var(--ju-surface-2); }

/* 강사 통계 3분할 */
.ju-tutor-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.ju-tutor-stats > div { text-align: center; background: var(--ju-surface-2); border-radius: var(--ju-r); padding: 12px; }
.ju-tutor-stats b { display: block; font-size: 20px; font-weight: 800; color: var(--ju-brand-600); }
.ju-tutor-stats span { font-size: 12px; color: var(--ju-text-3); }

/* ============================================================
   v7 — 세부 화면 (마법사 스텝퍼 · 수료증 · 주문 요약)
   ============================================================ */

/* 마법사 스텝퍼 */
.ju-stepper { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ju-step { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-radius: var(--ju-r); border: 1px solid var(--ju-border); background: var(--ju-surface); flex: 1; min-width: 150px; }
.ju-step__n { width: 27px; height: 27px; border-radius: 50%; background: var(--ju-surface-2); color: var(--ju-text-3); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.ju-step__n svg { width: 15px; height: 15px; }
.ju-step.is-on { border-color: var(--ju-brand); background: var(--ju-brand-soft); }
.ju-step.is-on .ju-step__n { background: var(--ju-brand); color: #fff; }
.ju-step.is-done .ju-step__n { background: var(--ju-success); color: #fff; }
.ju-step__l { font-weight: 700; font-size: 13.5px; }
.ju-step__s { font-size: 11px; color: var(--ju-text-3); }
.ju-autosave { font-size: 12px; color: var(--ju-text-3); display: inline-flex; align-items: center; gap: 6px; }

/* 주문 요약 라인 */
.ju-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 14px; color: var(--ju-text-2); }
.ju-sum--total { border-top: 1px solid var(--ju-border); margin-top: 6px; padding-top: 14px; font-size: 15px; }
.ju-sum--total b { font-size: 22px; font-weight: 800; color: var(--ju-brand-600); }
.ju-sum .minus { color: var(--ju-danger); }

/* 수료증 프레임 */
.ju-cert { border: 2px solid var(--ju-brand-soft); border-radius: var(--ju-r-lg); background: linear-gradient(160deg, var(--ju-surface), var(--ju-brand-tint)); padding: 40px 34px; text-align: center; position: relative; box-shadow: var(--ju-sh-2); overflow: hidden; }
.ju-cert::before, .ju-cert::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--ju-brand-soft), transparent 70%); opacity: .5; }
.ju-cert::before { top: -70px; left: -60px; }
.ju-cert::after { bottom: -70px; right: -60px; }
.ju-cert > * { position: relative; z-index: 1; }
.ju-cert__seal { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--ju-brand), var(--ju-accent)); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 8px 20px rgba(81,69,230,.3); }
.ju-cert__seal svg { width: 32px; height: 32px; }
.ju-cert__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--ju-brand-600); }
.ju-cert__name { font-size: 30px; font-weight: 800; margin: 12px 0 4px; letter-spacing: -.02em; }
.ju-cert__course { font-size: 16px; color: var(--ju-text-2); margin-bottom: 22px; }
.ju-cert__meta { display: inline-flex; gap: 26px; flex-wrap: wrap; justify-content: center; padding: 16px 22px; background: color-mix(in srgb, var(--ju-surface) 70%, transparent); border: 1px solid var(--ju-border); border-radius: var(--ju-r); }
.ju-cert__meta div { text-align: center; }
.ju-cert__meta dt { font-size: 11px; color: var(--ju-text-3); }
.ju-cert__meta dd { font-weight: 700; font-size: 14px; margin: 2px 0 0; }

/* ============================================================
   v8 — 강사 코스/레슨 에디터 (단일화면 스플릿 · 드래그정렬 · 인라인편집)
   ============================================================ */

.ju-editor { display: grid; grid-template-columns: 360px 1fr; border: 1px solid var(--ju-border); border-radius: var(--ju-r-lg); overflow: hidden; background: var(--ju-surface); min-height: 620px; box-shadow: var(--ju-sh-1); }

/* 좌측 커리큘럼 트리 */
.ju-tree { border-right: 1px solid var(--ju-border); background: var(--ju-surface-2); display: flex; flex-direction: column; min-width: 0; }
.ju-tree__head { padding: 13px 16px; border-bottom: 1px solid var(--ju-border); display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; background: var(--ju-surface); }
.ju-tree__head .ju-btn { margin-left: auto; }
.ju-tree__body { padding: 10px; overflow-y: auto; flex: 1; }
.ju-tree__sec { background: var(--ju-surface); border: 1px solid var(--ju-border); border-radius: var(--ju-r); margin-bottom: 10px; }
.ju-tree__sechead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--ju-border-2); }
.ju-tree__sechead input { border: 0; background: transparent; font: inherit; font-weight: 700; flex: 1; min-width: 0; color: inherit; padding: 2px 4px; border-radius: 5px; }
.ju-tree__sechead input:focus { outline: none; background: var(--ju-surface-2); }
.ju-tree__count { font-size: 11px; color: var(--ju-text-3); font-weight: 700; white-space: nowrap; }
.ju-tree__items { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ju-tree__item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; border: 1px solid transparent; }
.ju-tree__item:hover { background: var(--ju-surface-2); }
.ju-tree__item.is-active { background: var(--ju-brand-soft); border-color: color-mix(in srgb,var(--ju-brand) 30%,transparent); color: var(--ju-brand-700); font-weight: 700; }
.ju-tree__item.dragging, .ju-tree__sec.dragging { opacity: .5; }
.ju-tree__item.drop-hint { border-top: 2px solid var(--ju-brand); }
.ju-handle { color: var(--ju-text-3); cursor: grab; display: grid; place-items: center; flex: none; }
.ju-handle:active { cursor: grabbing; }
.ju-handle svg { width: 15px; height: 15px; }
.ju-titem-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--ju-surface-2); color: var(--ju-text-2); }
.ju-titem-ic svg { width: 15px; height: 15px; }
.ju-titem-ic--lesson { background: var(--ju-brand-soft); color: var(--ju-brand-600); }
.ju-titem-ic--quiz { background: var(--ju-warning-soft); color: var(--ju-warning); }
.ju-titem-ic--live { background: var(--ju-danger-soft); color: var(--ju-danger); }
.ju-titem-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ju-sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ju-sdot--pub { background: var(--ju-success); }
.ju-sdot--draft { background: var(--ju-text-3); }
.ju-tree__add { display: flex; gap: 6px; padding: 2px 8px 10px; }
.ju-tree__add button { flex: 1; border: 1px dashed var(--ju-border); background: transparent; color: var(--ju-text-2); font-weight: 700; font-size: 12.5px; padding: 7px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ju-tree__add button:hover { border-color: var(--ju-brand); color: var(--ju-brand-600); background: var(--ju-brand-tint); }
.ju-tree__add button svg { width: 14px; height: 14px; }
.ju-tree__addsec { margin: 4px 0 2px; border: 1.5px dashed var(--ju-border); background: transparent; color: var(--ju-text-2); font-weight: 800; width: 100%; padding: 11px; border-radius: var(--ju-r); cursor: pointer; }
.ju-tree__addsec:hover { border-color: var(--ju-brand); color: var(--ju-brand-600); }

/* 우측 레슨 편집 패널 */
.ju-lp { display: flex; flex-direction: column; min-width: 0; }
.ju-lp__head { padding: 14px 20px; border-bottom: 1px solid var(--ju-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ju-lp__title { font-size: 18px; font-weight: 800; border: 0; background: transparent; flex: 1; min-width: 160px; color: inherit; padding: 4px 6px; border-radius: 7px; }
.ju-lp__title:focus { outline: none; background: var(--ju-surface-2); }
.ju-lp__tabs { padding: 0 12px; }
.ju-lp__body { padding: 22px; overflow-y: auto; }
.ju-lp__row { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 14px; }

/* 게시/초안 토글 */
.ju-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ju-toggle input { display: none; }
.ju-toggle__sw { width: 40px; height: 23px; border-radius: 20px; background: var(--ju-surface-2); border: 1px solid var(--ju-border); position: relative; transition: background .15s; flex: none; }
.ju-toggle__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.ju-toggle input:checked + .ju-toggle__sw { background: var(--ju-success); border-color: var(--ju-success); }
.ju-toggle input:checked + .ju-toggle__sw::after { transform: translateX(17px); }

/* 업로드 드롭존 */
.ju-drop { border: 2px dashed var(--ju-border); border-radius: var(--ju-r); padding: 26px; text-align: center; color: var(--ju-text-3); background: var(--ju-surface-2); cursor: pointer; }
.ju-drop:hover { border-color: var(--ju-brand); color: var(--ju-brand-600); background: var(--ju-brand-tint); }
.ju-drop b { display: block; color: var(--ju-text-2); font-weight: 700; margin: 6px 0 2px; }
.ju-drop svg { width: 30px; height: 30px; }

/* 탭 패널 전환 */
.ju-tabpanel { display: none; }
.ju-tabpanel.is-on { display: block; }
/* 레슨 편집 상태·리스트 보조 */
.ju-lp__back { display: none; }
.ju-filerow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ju-border-2); }
.ju-filerow:last-child { border-bottom: 0; }
.ju-qrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ju-border); border-radius: var(--ju-r); margin-bottom: 8px; background: var(--ju-surface); }
.ju-qtype { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--ju-r-pill); background: var(--ju-brand-soft); color: var(--ju-brand-600); flex: none; }

@media (max-width: 900px) {
  .ju-editor { grid-template-columns: 1fr; }
  .ju-tree { border-right: 0; border-bottom: 1px solid var(--ju-border); }
  .ju-editor .ju-lp { display: none; }
  .ju-editor.is-editing .ju-tree { display: none; }
  .ju-editor.is-editing .ju-lp { display: flex; }
  .ju-lp__back { display: inline-flex; }
}

/* ============================================================
   반응형 — 모바일 퍼스트 대응
   ============================================================ */
@media (max-width: 1024px) {
  .ju-grid--3-1, .ju-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ju-app { grid-template-columns: 1fr; }
  .ju-side { position: fixed; left: 0; top: 0; z-index: 60; width: 84vw; max-width: 320px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--ju-sh-3); }
  .ju-app.is-open .ju-side { transform: translateX(0); }
  .ju-app.is-open .ju-scrim { opacity: 1; pointer-events: auto; }
  .ju-burger { display: grid; }
  .ju-search { min-width: 0; width: 42px; padding: 8px; }
  .ju-search input { display: none; }
  .ju-content { padding: 16px; padding-bottom: 84px; }
  .ju-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--ju-surface); border-top: 1px solid var(--ju-border); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .ju-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--ju-text-3); padding: 4px 10px; }
  .ju-tabbar a.is-on { color: var(--ju-brand-600); }
  .ju-tabbar svg { width: 22px; height: 22px; }
  .ju-hero { padding: 22px; }
  .ju-hero__title { font-size: 20px; }
  .ju-hero--rich { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ju-hero__thumb { width: 100%; height: 150px; }
  /* 임베드 셸 모바일 */
  .ju-pagebar__in, .ju-tabs--bar .ju-tabs__in, .ju-wrap { padding-left: 16px; padding-right: 16px; }
  .ju-page-body { padding: 18px 16px 84px; }
  .ju-pagebar__sub { display: none; }
  .ju-tab { padding: 12px 12px; font-size: 14px; }
  .ju-drow { flex-direction: column; gap: 2px; }
  .ju-drow dt, .ju-drow__k { min-width: 0; }
  /* 모바일에서 테이블을 카드로 스택 */
  .ju-tbl--stack, .ju-tbl--stack thead, .ju-tbl--stack tbody, .ju-tbl--stack tr, .ju-tbl--stack td { display: block; width: 100%; min-width: 0; }
  .ju-tbl--stack thead { display: none; }
  .ju-tbl--stack tr { border: 1px solid var(--ju-border); border-radius: var(--ju-r); margin-bottom: 10px; padding: 6px 4px; }
  .ju-tbl--stack td { border: 0; padding: 8px 14px; display: flex; justify-content: space-between; gap: 12px; }
  .ju-tbl--stack td::before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--ju-text-3); }
}

/* ============================================================
   모바일 가독성 — 중요한 텍스트 최소 14px (전 파일 공통 규칙)
   ============================================================ */
@media (max-width: 640px) {
.ju-scope { font-size: 14px; }
  .ju-btn, .ju-btn--sm, .ju-tab, .ju-navitem, .ju-label,
  .ju-li__t, .ju-course__nm, .ju-kpi__lbl, .ju-card__h,
  .ju-lesson__t, .ju-tree__item, .ju-tree__sechead, .ju-choice__t,
  .ju-secbox__body, .ju-secbox__title, .ju-drow dd, .ju-drow__v,
  .ju-metalist li, .ju-review__t, .ju-review__nm, .ju-check, .ju-radio,
  .ju-tbl td, .ju-rank__t, .ju-cohort__title, .ju-filter__opt,
  .ju-buy__meta div, .ju-sum, .ju-notice, .ju-toggle, .ju-vtool,
  .ju-hero__meta, .ju-hero__eyebrow, .ju-verse, .ju-pill,
  .ju-sec-h h2, .ju-subhead, .ju-lp__title { font-size: 14px; }
  /* 폼 입력만 iOS 포커스 자동확대 방지를 위해 16px 유지 */
  .ju-input, .ju-select, .ju-textarea { font-size: 16px; }
  .ju-scope small, .ju-scope time, .ju-scope figcaption,
  .ju-top__sub, .ju-pagebar__sub, .ju-choice__s, .ju-li__s,
  .ju-li__time, .ju-course__meta, .ju-userchip__rl,
  .ju-bar__pct, .ju-badge, .ju-tabbar a, .ju-form-hint,
  .joyn-form-hint, .joyn-bottom-nav .joyn-nav-item {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}
/* ============================================================
   WordPress integration — joyn-lms-college legacy markup adapter
   기존 기능 셀렉터를 유지하면서 common-design-system 컴포넌트와 동일하게 렌더.
   ============================================================ */
.ju-scope.jlc-cs,.ju-scope.jlc-mn{background:var(--ju-bg)!important;color:var(--ju-text);font-family:var(--ju-font)}
.ju-scope.jlc-cs .ju-pagebar,.ju-scope.jlc-mn .ju-pagebar{background:var(--ju-surface)!important;color:var(--ju-text)!important;border-bottom:1px solid var(--ju-border)!important;box-shadow:var(--ju-sh-1)!important}
.ju-scope.jlc-cs .jlc-cs__barin,.ju-scope.jlc-mn .jlc-mn__barin{height:64px}
.ju-scope.jlc-cs .jlc-cs__dot,.ju-scope.jlc-mn .jlc-mn__dot{background:var(--ju-brand)!important}
.ju-scope.jlc-cs .jlc-cs__ttl small,.ju-scope.jlc-mn .jlc-mn__ttl small{color:var(--ju-text-3)!important}
.ju-scope.jlc-cs .jlc-cs__wp,.ju-scope.jlc-mn .jlc-mn__view{color:var(--ju-brand-600)!important;border-color:var(--ju-border)!important;background:var(--ju-surface)!important}
.ju-scope.jlc-cs .jlc-cs__nav{background:var(--ju-surface)!important;border-bottom:1px solid var(--ju-border)!important}
.ju-scope.jlc-cs .ju-tabs,.ju-scope.jlc-mn .ju-tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap!important}
.ju-scope.jlc-cs .ju-tab,.ju-scope.jlc-mn .ju-tab{color:var(--ju-text-2)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;white-space:nowrap}
.ju-scope.jlc-cs .ju-tab.is-on,.ju-scope.jlc-mn .ju-tab.is-on{color:var(--ju-brand-600)!important;border-bottom-color:var(--ju-brand)!important}
.ju-scope.jlc-cs .ju-kpi,.ju-scope.jlc-mn .ju-kpi{background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;text-align:left!important;padding:18px!important}
.ju-scope.jlc-cs .ju-kpi__num,.ju-scope.jlc-mn .ju-kpi__num{color:var(--ju-text)!important;font-size:28px!important}
.ju-scope.jlc-cs .ju-kpi__lbl,.ju-scope.jlc-mn .ju-kpi__lbl{color:var(--ju-text-3)!important;font-size:13px!important}
.ju-scope.jlc-cs .ju-card{border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;background:var(--ju-surface)!important;box-shadow:var(--ju-sh-1)!important;color:var(--ju-text)!important}
.ju-scope.jlc-cs .ju-tbl,.ju-scope.jlc-mn .ju-tbl{background:var(--ju-surface)!important;border-color:var(--ju-border)!important;border-radius:var(--ju-r)!important}
.ju-scope.jlc-cs .ju-tbl th,.ju-scope.jlc-mn .ju-tbl th{background:var(--ju-surface-2)!important;color:var(--ju-text-3)!important}
.ju-scope.jlc-cs .ju-tbl td,.ju-scope.jlc-mn .ju-tbl td{border-color:var(--ju-border-2)!important;color:var(--ju-text)!important}
.ju-scope.jlc-cs .ju-btn,.ju-scope.jlc-mn .ju-btn{background:var(--ju-brand)!important;color:#fff!important;border:1px solid var(--ju-brand)!important;border-radius:var(--ju-r-sm)!important;padding:9px 14px!important;display:inline-flex!important;align-items:center;justify-content:center;min-height:38px}
.ju-scope.jlc-cs .jlc-cs__btn--o,.ju-scope.jlc-cs .jlc-cs__lk:not(.jlc-cs__lk--p),.ju-scope.jlc-mn .jlc-mn__btn--o{background:var(--ju-surface)!important;color:var(--ju-brand-600)!important;border-color:var(--ju-border)!important}
.ju-scope.jlc-cs .jlc-cs__btn--d{background:var(--ju-danger-soft)!important;color:var(--ju-danger)!important;border-color:color-mix(in srgb,var(--ju-danger) 25%,transparent)!important}
.ju-scope.jlc-cs input,.ju-scope.jlc-cs select,.ju-scope.jlc-cs textarea,.ju-scope.jlc-mn input,.ju-scope.jlc-mn select,.ju-scope.jlc-mn textarea{border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-sm)!important;background:var(--ju-surface)!important;color:var(--ju-text)!important}
.ju-scope.jlc-cs .jlc-cs__h2,.ju-scope.jlc-mn h2{color:var(--ju-text)!important;border-left:0!important;padding-left:0!important;letter-spacing:-.02em}
.ju-scope.jlc-cp{font-family:var(--ju-font);color:var(--ju-text)}
.ju-scope.jlc-cp .jlc-hero{border-radius:0 0 var(--ju-r-xl) var(--ju-r-xl)}
.ju-scope.jlc-cp .jlc-feat,.ju-scope.jlc-cp .jlc-prog,.ju-scope.jlc-cp .jlc-tuit,.ju-scope.jlc-cp .jlc-term-card,.ju-scope.jlc-cp .jlc-off,.ju-scope.jlc-cp .jlc-pc{border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;border-color:var(--ju-border)!important}
@media(max-width:860px){
 .ju-scope.jlc-cs .jlc-cs__body,.ju-scope.jlc-mn .jlc-mn__body{padding:18px 16px 76px!important}
 .ju-scope.jlc-cs .jlc-cs__navin,.ju-scope.jlc-mn .jlc-mn__tabs{padding-left:16px!important;padding-right:16px!important}
 .ju-scope.jlc-cs .ju-grid--kpi,.ju-scope.jlc-mn .ju-grid--kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ju-scope.jlc-cs .ju-tbl--stack,.ju-scope.jlc-mn .ju-tbl--stack{min-width:0!important}
}

/* Production frontend adapters — catalog, detail, checkout, wizard, lesson and college. */
.joyn-archive-fix.ju-scope,.joyn-course-detail-fix.ju-scope,.joyn-checkout.ju-scope,.joyn-course-wizard.ju-scope,.jlc-cp.ju-scope{font-family:var(--ju-font)!important;color:var(--ju-text)!important}
.joyn-archive-fix.ju-scope{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;background:var(--ju-bg)!important}
.joyn-archive-fix.ju-scope .joyn-featured-section,.joyn-archive-fix.ju-scope .joyn-browse-section,.joyn-archive-fix.ju-scope .joyn-why-section{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}
.joyn-archive-fix.ju-scope .joyn-course-card,.joyn-archive-fix.ju-scope [class*="course-card"]{border-color:var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;background:var(--ju-surface)!important}
.joyn-course-detail-fix.ju-scope{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;background:var(--ju-bg)!important}
.joyn-course-detail-fix.ju-scope .joyn-detail-top-bar{height:64px!important;background:color-mix(in srgb,var(--ju-surface) 90%,transparent)!important;border-bottom:1px solid var(--ju-border)!important;backdrop-filter:saturate(1.4) blur(8px)!important}
.joyn-course-detail-fix.ju-scope .joyn-detail-desk-columns{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
.joyn-course-detail-fix.ju-scope .joyn-detail-tabs,.joyn-course-detail-fix.ju-scope .joyn-detail-sidebar-sheet,.joyn-course-detail-fix.ju-scope [class*="card"]{border-color:var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important}
.joyn-checkout.ju-scope{width:min(100% - 32px,720px)!important;margin:24px auto 64px!important;padding:24px!important;background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-xl)!important;box-shadow:var(--ju-sh-2)!important}
.joyn-checkout.ju-scope input,.joyn-checkout.ju-scope select,.joyn-checkout.ju-scope textarea{border-color:var(--ju-border)!important;border-radius:var(--ju-r-sm)!important;font-family:var(--ju-font)!important}
.joyn-checkout.ju-scope button,.joyn-checkout.ju-scope .joyn-btn{border-radius:var(--ju-r-sm)!important;font-family:var(--ju-font)!important}
.joyn-course-wizard.ju-scope{width:min(100% - 32px,900px)!important;margin:0 auto!important;color:var(--ju-text)!important}
.joyn-course-wizard.ju-scope .joyn-wizard-header,.joyn-course-wizard.ju-scope .joyn-wizard-panel{background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important}
.joyn-course-wizard.ju-scope input,.joyn-course-wizard.ju-scope select,.joyn-course-wizard.ju-scope textarea{border-color:var(--ju-border)!important;border-radius:var(--ju-r-sm)!important;font-family:var(--ju-font)!important}
.joyn-lesson-viewer-fix.ju-scope{font-family:var(--ju-font)!important}
.jlc-cp.ju-scope{background:var(--ju-bg)!important}
.jlc-cp.ju-scope .jlc-feat,.jlc-cp.ju-scope .jlc-prog,.jlc-cp.ju-scope .jlc-tuit,.jlc-cp.ju-scope .jlc-term-card,.jlc-cp.ju-scope .jlc-off,.jlc-cp.ju-scope .jlc-pc{border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;background:var(--ju-surface)!important}
@media(max-width:860px){
 .joyn-archive-fix.ju-scope .joyn-featured-section,.joyn-archive-fix.ju-scope .joyn-browse-section,.joyn-archive-fix.ju-scope .joyn-why-section{padding-left:16px!important;padding-right:16px!important}
 .joyn-checkout.ju-scope{width:100%!important;margin:0!important;padding:18px 16px 84px!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .joyn-course-wizard.ju-scope{width:100%!important}
}
@media(max-width:520px){
 .ju-scope.jlc-cs .jlc-cs__ttl small,.ju-scope.jlc-mn .jlc-mn__ttl small{display:none}
 .ju-scope.jlc-cs .jlc-cs__wp,.ju-scope.jlc-mn .jlc-mn__view{font-size:12px!important;padding:7px 9px!important}
.ju-scope.jlc-cs .ju-kpi,.ju-scope.jlc-mn .ju-kpi{padding:14px!important}
}
/* ============================================================
   WordPress integration — joyn-lms account dashboard
   기능용 joyn-* 셀렉터를 보존하며 student/instructor prototype과 동일한 셸 적용.
   ============================================================ */
.joyn-account.ju-scope{--jla-side:252px;--ju-bg:#f5f6fb;--ju-surface:#fff;--ju-surface-2:#f1f2f8;--ju-text:#191c26;--ju-text-2:#5a6072;--ju-text-3:#8a90a2;--ju-border:#e7e8f0;--ju-border-2:#eef0f5;background:var(--ju-bg)!important;color:var(--ju-text)!important;font-family:var(--ju-font)!important;min-height:100vh;color-scheme:light}
.joyn-account.ju-scope .ju-account-shell{display:grid!important;grid-template-columns:var(--jla-side) minmax(0,1fr)!important;column-gap:28px!important;align-items:start;max-width:1280px!important;margin:0 auto!important;padding:24px 24px 64px!important}
.joyn-account.ju-scope .ju-account-side{grid-column:1!important;grid-row:1/span 99!important;position:sticky!important;top:24px!important;margin:0!important;padding:14px 10px!important;background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;display:flex!important;flex-direction:column!important;gap:2px!important;overflow:visible!important}
.joyn-account.ju-scope .ju-account-side:before{content:"Joyn LMS";font-size:17px;font-weight:800;color:var(--ju-text);padding:8px 12px 14px;border-bottom:1px solid var(--ju-border-2);margin-bottom:8px}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-scroll,.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icons{display:contents!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;width:100%!important;min-height:44px!important;padding:10px 12px!important;border:0!important;border-radius:var(--ju-r-sm)!important;color:var(--ju-text-2)!important;background:transparent!important;font-size:14px!important;text-decoration:none!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem:hover{background:var(--ju-surface-2)!important;color:var(--ju-text)!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-item--active,.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icon--active{background:var(--ju-brand-soft)!important;color:var(--ju-brand-600)!important;font-weight:700!important}
.joyn-account.ju-scope .ju-account-header{grid-column:2;display:flex;align-items:center;gap:18px;min-height:76px;padding:14px 18px;margin-bottom:18px;background:var(--ju-surface);border:1px solid var(--ju-border);border-radius:var(--ju-r-lg);box-shadow:var(--ju-sh-1)}
.joyn-account.ju-scope .ju-account-header__title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ju-text)}
.joyn-account.ju-scope .ju-account-header__sub{font-size:12px;color:var(--ju-text-3);margin-top:3px}
.joyn-account.ju-scope .ju-account-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.joyn-account.ju-scope .ju-account-burger,.joyn-account.ju-scope .ju-account-scrim{display:none}
.joyn-account.ju-scope .joyn-account__modebar{display:none!important}
.joyn-account.ju-scope .joyn-account__id-box{grid-column:2!important;background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;padding:22px!important;margin:0 0 18px!important}
.joyn-account.ju-scope .joyn-account__id-box-title{font-size:18px!important;color:var(--ju-text)!important}
.joyn-account.ju-scope .joyn-account__id-row{border-color:var(--ju-border-2)!important}
.joyn-account.ju-scope .joyn-account__id-label{color:var(--ju-text-3)!important}
.joyn-account.ju-scope .joyn-account__id-value{color:var(--ju-text)!important}
.joyn-account.ju-scope .joyn-account__id-summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.joyn-account.ju-scope .joyn-account__id-summary-item{background:var(--ju-surface-2)!important;border:1px solid var(--ju-border-2)!important;border-radius:var(--ju-r)!important;padding:14px 10px!important;text-align:left!important}
.joyn-account.ju-scope .joyn-account__id-summary-value{font-size:24px!important;color:var(--ju-brand-600)!important}
.joyn-account.ju-scope .ju-account-content{grid-column:2!important;min-width:0}
.joyn-account.ju-scope.joyn-account--tab-dashboard .joyn-account__id-box,.joyn-account.ju-scope.joyn-account--tab-instructor-courses .joyn-account__id-box,.joyn-account.ju-scope.joyn-account--tab-instructor-students .joyn-account__id-box,.joyn-account.ju-scope.joyn-account--tab-instructor-earnings .joyn-account__id-box{display:none!important}
.joyn-account.ju-scope .joyn-instructor-summary{margin-bottom:24px;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.joyn-account.ju-scope .joyn-instructor-courses-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.joyn-account.ju-scope .joyn-instructor-courses-title{font-size:22px!important;font-weight:800!important;color:var(--ju-text)!important;margin:0}
.joyn-account.ju-scope .joyn-instructor-courses-header__actions{margin-left:auto;display:flex;gap:8px}
.joyn-account.ju-scope .joyn-instructor-courses-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.joyn-account.ju-scope .joyn-instructor-course-card{background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;overflow:hidden}
.joyn-account.ju-scope .joyn-instructor-course-card__thumb{width:100%!important;height:150px!important;object-fit:cover!important;border-radius:0!important}
.joyn-account.ju-scope .joyn-instructor-course-card__body{padding:16px!important}
.joyn-account.ju-scope .joyn-instructor-course-card__actions{display:flex!important;gap:7px!important;margin-top:14px}
.joyn-account.ju-scope .joyn-account-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.joyn-account.ju-scope .joyn-account-stat{background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;padding:18px!important;text-align:left!important}
.joyn-account.ju-scope .joyn-account-stat__number{font-size:27px!important;color:var(--ju-text)!important}
.joyn-account.ju-scope .joyn-account-stat__label{color:var(--ju-text-3)!important}
.joyn-account.ju-scope .joyn-course-edit-form,.joyn-account.ju-scope .joyn-students-by-course,.joyn-account.ju-scope .joyn-pending-students-table,.joyn-account.ju-scope .joyn-course-accordion__item{background:var(--ju-surface)!important;border-color:var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important}
.joyn-account.ju-scope .ju-btn{min-height:40px!important;border-radius:var(--ju-r-sm)!important;padding:9px 14px!important;font-size:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.joyn-account.ju-scope .ju-btn--primary,
.joyn-account.ju-scope .ju-btn--primary:link,
.joyn-account.ju-scope .ju-btn--primary:visited,
.joyn-account.ju-scope .ju-btn--primary:hover,
.joyn-account.ju-scope .ju-btn--primary:focus,
.joyn-account.ju-scope .ju-btn--primary:active,
.joyn-account.ju-scope .joyn-btn--primary,
.joyn-account.ju-scope .joyn-btn--primary:link,
.joyn-account.ju-scope .joyn-btn--primary:visited,
.joyn-account.ju-scope .joyn-btn--primary:hover,
.joyn-account.ju-scope .joyn-btn--primary:focus,
.joyn-account.ju-scope .joyn-btn--primary:active,
.joyn-account.ju-scope .joyn-btn--add-course,
.joyn-account.ju-scope .joyn-btn--add-course:hover,
.joyn-account.ju-scope .joyn-btn--add-course:focus,
.joyn-account.ju-scope .joyn-btn--add-course:active{background:var(--ju-brand)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:var(--ju-brand)!important}
.joyn-account.ju-scope :is(.ju-btn--primary,.joyn-btn--primary,.joyn-btn--add-course) :is(span,strong,b,i,svg){color:#fff!important;-webkit-text-fill-color:#fff!important;fill:currentColor!important;stroke:currentColor!important}
.joyn-account.ju-scope .joyn-btn--secondary{background:var(--ju-surface)!important;color:var(--ju-brand-600)!important;border:1px solid var(--ju-border)!important}
.joyn-account.ju-scope .joyn-btn--danger{background:var(--ju-danger-soft)!important;color:var(--ju-danger)!important;border:1px solid color-mix(in srgb,var(--ju-danger) 25%,transparent)!important}
.joyn-account.ju-scope .ju-hero .ju-btn--ghost-w{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.5)!important}
@media(max-width:900px){
 .joyn-account.ju-scope{--jla-side:1fr}
 .joyn-account.ju-scope .ju-account-shell{display:block!important;padding:0 16px 90px!important}
 .joyn-account.ju-scope .ju-account-header{position:sticky;top:0;z-index:55;margin:0 -16px 12px;border-radius:0;padding:12px 16px;min-height:64px}
 .joyn-account.ju-scope .ju-account-burger{display:grid!important;width:42px;height:42px;place-items:center;flex:none;border:1px solid var(--ju-border);border-radius:var(--ju-r-sm);background:var(--ju-surface);color:var(--ju-text);font-size:22px;cursor:pointer}
 .joyn-account.ju-scope .ju-account-header__sub{display:none}
 .joyn-account.ju-scope .ju-account-header__actions .ju-btn--soft{display:none!important}
 .joyn-account.ju-scope .ju-account-side{position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:100001!important;width:84vw!important;max-width:320px!important;height:100dvh!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:2px!important;margin:0!important;padding:18px 12px calc(18px + env(safe-area-inset-bottom))!important;border:0!important;border-right:1px solid var(--ju-border)!important;border-radius:0!important;overflow-y:auto!important;box-shadow:var(--ju-sh-3)!important;transform:translateX(-102%)!important;transition:transform .24s ease!important}
 .joyn-account.ju-scope .ju-account-side:before{display:block!important;padding:8px 12px 18px!important}
 .joyn-account.ju-scope .ju-account-side .joyn-account__topnav-scroll,.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icons{display:contents!important}
 .joyn-account.ju-scope .ju-account-side .ju-navitem{flex:none!important;width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:11px 13px!important}
 .joyn-account.ju-scope .ju-account-scrim{display:block;position:fixed;inset:0;z-index:100000;background:rgba(15,18,32,.48);opacity:0;pointer-events:none;transition:opacity .24s ease;backdrop-filter:blur(2px)}
 .joyn-account.ju-scope.is-menu-open .ju-account-side{transform:translateX(0)!important}
 .joyn-account.ju-scope.is-menu-open .ju-account-scrim{opacity:1;pointer-events:auto}
 body.ju-account-menu-open{overflow:hidden!important}
 .joyn-account.ju-scope .joyn-account__id-box{padding:18px!important}
 .joyn-account.ju-scope .joyn-account__id-box-inner{grid-template-columns:1fr!important}
 .joyn-account.ju-scope .joyn-instructor-courses-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Account navigation rebuilt: shared student/instructor rows on every viewport. */
.joyn-account.ju-scope .ju-account-side,
.joyn-account.ju-scope .ju-account-side *{box-sizing:border-box!important}
.joyn-account.ju-scope .ju-account-side br{display:none!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-scroll,
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icons{display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-width:0!important;gap:4px!important;margin:0!important;padding:0!important;border:0!important;overflow:visible!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icons{margin-top:10px!important;padding-top:10px!important;border-top:1px solid var(--ju-border-2)!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem{position:relative!important;inset:auto!important;transform:none!important;display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;grid-template-rows:44px!important;place-items:center start!important;column-gap:14px!important;flex:0 0 44px!important;width:100%!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--ju-text-2)!important;font-family:var(--ju-font)!important;font-size:15px!important;font-weight:600!important;line-height:20px!important;letter-spacing:-.015em!important;text-decoration:none!important;white-space:nowrap!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem>i{grid-column:1!important;grid-row:1!important;display:grid!important;place-items:center!important;width:24px!important;height:24px!important;margin:0!important;font-size:22px!important;line-height:1!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem>.joyn-account__topnav-label{grid-column:2!important;grid-row:1!important;display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;color:inherit!important;font:inherit!important;line-height:20px!important;text-align:left!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icon:after{content:none!important;display:none!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem:hover{background:var(--ju-surface-2)!important;color:var(--ju-text)!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-item--active,
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icon--active{background:var(--ju-brand-soft)!important;color:var(--ju-brand-600)!important;font-weight:700!important}

/* Course and lesson editor navigation — same sidebar/drawer language as account menu. */
.joyn-account.ju-scope .joyn-course-edit__heading-row{display:flex!important;align-items:center!important;gap:12px!important}
.joyn-account.ju-scope .joyn-course-edit__burger,
.joyn-account.ju-scope .joyn-course-edit__scrim{display:none!important}
.joyn-account.ju-scope .joyn-course-edit__layout{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important;align-items:start!important}
.joyn-account.ju-scope .joyn-course-edit__layout>p,
.joyn-account.ju-scope .joyn-course-edit__layout>br{display:none!important}
.joyn-account.ju-scope .joyn-course-edit__layout>.joyn-course-edit__scrim{grid-column:1!important;grid-row:1!important}
.joyn-account.ju-scope .joyn-course-edit__layout>.joyn-course-edit__topnav{grid-column:1!important;grid-row:1!important}
.joyn-account.ju-scope .joyn-course-edit__layout>.joyn-course-edit__main{grid-column:2!important;grid-row:1!important}
.joyn-account.ju-scope .joyn-course-edit__topnav{position:sticky!important;top:24px!important;z-index:20!important;display:flex!important;flex-direction:column!important;width:220px!important;margin:0!important;padding:12px!important;background:var(--ju-surface)!important;border:1px solid var(--ju-border)!important;border-radius:var(--ju-r-lg)!important;box-shadow:var(--ju-sh-1)!important;backdrop-filter:none!important}
.joyn-account.ju-scope .joyn-course-edit__menu-title{display:block!important;margin:0 0 8px!important;padding:9px 12px 14px!important;border-bottom:1px solid var(--ju-border-2)!important;color:var(--ju-text)!important;font-size:16px!important;font-weight:800!important;line-height:22px!important;letter-spacing:-.02em!important}
.joyn-account.ju-scope .joyn-course-edit__topnav-scroll{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;width:100%!important;overflow:visible!important}
.joyn-account.ju-scope .joyn-course-edit__topnav br,
.joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item>br{display:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
.joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;grid-template-rows:44px!important;grid-auto-rows:0!important;place-items:center start!important;column-gap:14px!important;width:100%!important;height:44px!important;min-height:44px!important;overflow:hidden!important;padding:0 12px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--ju-text-2)!important;font-size:14px!important;font-weight:600!important;line-height:20px!important;text-align:left!important}
.joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item>i{grid-column:1!important;grid-row:1!important;width:24px!important;height:24px!important;font-size:21px!important}
.joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item>span{grid-column:2!important;grid-row:1!important}
.joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item--active{background:var(--ju-brand-soft)!important;color:var(--ju-brand-600)!important;font-weight:700!important}
.joyn-account.ju-scope .joyn-course-edit__main{min-width:0!important;width:100%!important}
.joyn-account.ju-scope .joyn-course-edit button>br,
.joyn-account.ju-scope .joyn-course-edit .jce-btn>br{display:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
.joyn-account.ju-scope .joyn-course-edit .jce-btn,
.joyn-account.ju-scope #jce-root.jce-root button.jce-btn{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:44px!important;min-height:44px!important;padding:0 18px!important;font-family:var(--ju-font)!important;font-size:15px!important;line-height:20px!important;white-space:nowrap!important;vertical-align:middle!important}
.joyn-account.ju-scope .joyn-course-edit .jce-btn--sm,
.joyn-account.ju-scope #jce-root.jce-root button.jce-btn--sm{height:40px!important;min-height:40px!important;padding:0 14px!important;font-size:14px!important;line-height:20px!important}
@media(max-width:900px){
 .joyn-account.ju-scope .joyn-course-edit__layout{display:block!important}
 .joyn-account.ju-scope .joyn-course-edit__burger{display:grid!important;flex:0 0 42px!important;width:42px!important;height:42px!important;place-items:center!important;padding:0!important;border:1px solid var(--ju-border)!important;border-radius:12px!important;background:var(--ju-surface)!important;color:var(--ju-text)!important;font-size:22px!important;cursor:pointer!important}
 .joyn-account.ju-scope .joyn-course-edit__topnav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:100003!important;width:84vw!important;max-width:320px!important;height:100dvh!important;margin:0!important;padding:18px 14px calc(18px + env(safe-area-inset-bottom))!important;border:0!important;border-right:1px solid var(--ju-border)!important;border-radius:0!important;overflow-y:auto!important;box-shadow:var(--ju-sh-3)!important;transform:translateX(-102%)!important;transition:transform .24s ease!important}
 .joyn-account.ju-scope .joyn-course-edit__menu-title{padding:8px 12px 16px!important;font-size:18px!important;line-height:24px!important}
 .joyn-account.ju-scope .joyn-course-edit .joyn-course-edit__nav-item{grid-template-rows:48px!important;height:48px!important;min-height:48px!important;padding:0 12px!important;font-size:15px!important}
 .joyn-account.ju-scope .joyn-course-edit__scrim{position:fixed!important;inset:0!important;z-index:100002!important;display:block!important;padding:0!important;border:0!important;background:rgba(15,18,32,.48)!important;opacity:0!important;pointer-events:none!important;transition:opacity .24s ease!important;backdrop-filter:blur(2px)!important}
 .joyn-account.ju-scope .joyn-course-edit.is-course-menu-open .joyn-course-edit__topnav{transform:translateX(0)!important}
 .joyn-account.ju-scope .joyn-course-edit.is-course-menu-open .joyn-course-edit__scrim{opacity:1!important;pointer-events:auto!important}
 body.joyn-course-menu-open{overflow:hidden!important}
}
@media(max-width:900px){
 .joyn-account.ju-scope .ju-account-side{padding:18px 14px calc(18px + env(safe-area-inset-bottom))!important}
 .joyn-account.ju-scope .ju-account-side:before{margin:0 0 10px!important;padding:8px 12px 16px!important}
 .joyn-account.ju-scope .ju-account-side .ju-navitem{grid-template-rows:48px!important;flex-basis:48px!important;height:48px!important;min-height:48px!important;padding:0 12px!important}
}
@media(max-width:600px){
.joyn-account.ju-scope .joyn-ju-dash .ju-grid--kpi,.joyn-account.ju-scope .joyn-instructor-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .joyn-account.ju-scope .ju-account-header__title{font-size:17px}
 .joyn-account.ju-scope .ju-account-header__actions .ju-btn{font-size:0!important;width:42px!important;padding:0!important}
 .joyn-account.ju-scope .ju-account-header__actions .ju-btn i{font-size:20px}
 .joyn-account.ju-scope .joyn-account__id-summary-grid,.joyn-account.ju-scope .joyn-account-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .joyn-account.ju-scope .joyn-instructor-courses-grid{grid-template-columns:1fr!important}
 .joyn-account.ju-scope .joyn-instructor-courses-header{align-items:flex-start;flex-direction:column}
 .joyn-account.ju-scope .joyn-instructor-courses-header__actions{margin-left:0;width:100%}
 .joyn-account.ju-scope .joyn-instructor-courses-header__actions .ju-btn{flex:1}
}

/* Production account shell mirrors student/instructor dashboard prototypes. */
.joyn-account.ju-scope{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.joyn-account.ju-scope .ju-account-shell{display:grid!important;grid-template-columns:252px minmax(0,1fr)!important;grid-template-rows:64px auto!important;column-gap:0!important;max-width:none!important;min-height:100vh!important;margin:0!important;padding:0!important;background:var(--ju-bg)!important}
.joyn-account.ju-scope .ju-account-shell>p,
.joyn-account.ju-scope .ju-account-shell>br{display:none!important}
.joyn-account.ju-scope .ju-account-side{grid-column:1!important;grid-row:1/span 99!important;position:sticky!important;top:0!important;width:252px!important;height:100vh!important;margin:0!important;padding:0!important;border:0!important;border-right:1px solid var(--ju-border)!important;border-radius:0!important;box-shadow:none!important;background:var(--ju-surface)!important;overflow:hidden!important;gap:0!important}
.joyn-account.ju-scope .ju-account-side:before{content:none!important;display:none!important}
.joyn-account.ju-scope .ju-account-side>.ju-side__brand{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;padding:20px 20px 16px!important;border:0!important;color:var(--ju-text)!important;font-size:18px!important;font-weight:800!important}
.joyn-account.ju-scope .ju-account-side>.ju-side__brand strong{color:var(--ju-brand-600)!important}
.joyn-account.ju-scope .ju-account-side>.ju-side__brand .ju-side__logo{display:grid!important;width:32px!important;height:32px!important;place-items:center!important;border-radius:9px!important;background:linear-gradient(135deg,var(--ju-brand),var(--ju-accent))!important;color:#fff!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-scroll{flex:1 1 auto!important;padding:8px 12px!important;overflow-y:auto!important;gap:2px!important}
.joyn-account.ju-scope .ju-account-side .joyn-account__topnav-icons{flex:0 0 auto!important;margin:0!important;padding:8px 12px!important;border-top:1px solid var(--ju-border-2)!important;gap:2px!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem{grid-template-columns:20px minmax(0,1fr)!important;grid-template-rows:42px!important;column-gap:12px!important;height:42px!important;min-height:42px!important;padding:0 12px!important;border-radius:12px!important;font-size:14px!important}
.joyn-account.ju-scope .ju-account-side .ju-navitem>i{width:20px!important;height:20px!important;font-size:20px!important}
.joyn-account.ju-scope .ju-account-side>.ju-side__foot{display:block!important;flex:0 0 auto!important;padding:14px!important;border-top:1px solid var(--ju-border-2)!important}
.joyn-account.ju-scope .ju-account-side .ju-userchip{display:flex!important;align-items:center!important;gap:10px!important;padding:8px!important;border-radius:12px!important}
.joyn-account.ju-scope .ju-account-side .ju-avatar{width:36px!important;height:36px!important;border-radius:50%!important;object-fit:cover!important}
.joyn-account.ju-scope .ju-account-side .ju-userchip__nm{font-size:13.5px!important;font-weight:700!important;color:var(--ju-text)!important}
.joyn-account.ju-scope .ju-account-side .ju-userchip__rl{font-size:12px!important;color:var(--ju-text-3)!important}
.joyn-account.ju-scope .ju-account-header{grid-column:2!important;grid-row:1!important;position:sticky!important;top:0!important;z-index:55!important;height:64px!important;min-height:64px!important;margin:0!important;padding:0 24px!important;border:0!important;border-bottom:1px solid var(--ju-border)!important;border-radius:0!important;box-shadow:none!important;background:color-mix(in srgb,var(--ju-surface) 85%,transparent)!important;backdrop-filter:saturate(1.4) blur(8px)!important}
.joyn-account.ju-scope .ju-account-content,
.joyn-account.ju-scope .joyn-account__id-box{grid-column:2!important;width:calc(100% - 48px)!important;max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
.joyn-account.ju-scope .ju-account-content{padding:24px 0 64px!important}
@media(max-width:860px){
 .joyn-account.ju-scope .ju-account-shell{display:block!important;min-height:100vh!important;padding:64px 16px 84px!important}
 .joyn-account.ju-scope .ju-account-header{position:fixed!important;left:0!important;right:0!important;top:0!important;height:64px!important;margin:0!important;padding:0 16px!important}
 .joyn-account.ju-scope .ju-account-side{position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:100001!important;width:84vw!important;max-width:320px!important;height:100dvh!important;border-right:1px solid var(--ju-border)!important;box-shadow:var(--ju-sh-3)!important;transform:translateX(-102%)!important;transition:transform .25s ease!important;overflow-y:auto!important}
 .joyn-account.ju-scope .ju-account-side .ju-navitem{grid-template-rows:48px!important;height:48px!important;min-height:48px!important;font-size:15px!important}
 .joyn-account.ju-scope .ju-account-content,
 .joyn-account.ju-scope .joyn-account__id-box{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
 .joyn-account.ju-scope .ju-account-content{padding:0 0 16px!important}
 body.joyn-lms-instructor-active .joyn-bottom-nav,
 body.joyn-lms-member-active .joyn-bottom-nav{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:1000!important;min-height:66px!important;padding:8px 6px calc(8px + env(safe-area-inset-bottom))!important;background:var(--ju-surface)!important;border-top:1px solid var(--ju-border)!important;box-shadow:0 -4px 16px rgba(20,24,40,.06)!important}
 body.joyn-lms-instructor-active .joyn-bottom-nav .joyn-nav-item,
 body.joyn-lms-member-active .joyn-bottom-nav .joyn-nav-item{display:flex!important;flex:1!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:4px 6px!important;color:var(--ju-text-3)!important;font-family:var(--ju-font)!important;font-size:11px!important;font-weight:700!important}
 body.joyn-lms-instructor-active .joyn-bottom-nav .joyn-nav-item.active,
 body.joyn-lms-member-active .joyn-bottom-nav .joyn-nav-item.active{color:var(--ju-brand-600)!important}
 body.joyn-lms-instructor-active .joyn-bottom-nav i,
 body.joyn-lms-member-active .joyn-bottom-nav i{font-size:22px!important;line-height:1!important}
}
@media(max-width:640px){
 .joyn-account.ju-scope .ju-userchip__nm,
 .joyn-account.ju-scope .ju-userchip__rl,
 body.joyn-lms-instructor-active .joyn-bottom-nav .joyn-nav-item,
 body.joyn-lms-member-active .joyn-bottom-nav .joyn-nav-item{font-size:14px!important;line-height:1.5!important}
}