/* ============================================================
   front.css — 학습자단 전용 디자인 시스템 (v0.4, docs/06 04_UI_표준 §5-1)
   콘솔(base/components/layout-console)과 완전 분리 — 학습자단은 이 시트만 로드.

   원칙 (v0.4에서 전환):
     · PC 우선 — 데스크톱 값을 :root에 두고 max-width로 모바일 축소.
       (v0.3의 "모바일 퍼스트"는 실제 이용 맥락과 어긋나 폐기)
     · 브레이크포인트 = 640 / 1024 두 단계. 767·768·900 혼재 제거.
       ui.js 드로어 해제 임계값도 640으로 일치시킨다.
     · 그림자는 3단 스케일(--lms-shadow / -2 / -lg)만 사용. 임의 값 금지.
     · 경계선이 구조를 만들고, 색면(짙은 판)이 흐름을 끊는다.

   테넌트: --lms-primary 계열·그라디언트·면·잉크는 theme_derive()(lib/theme.php)가
   계산해 <style id="site-theme">로 주입하며, 이 시트 뒤에 와서 항상 이긴다.
   여기 선언된 값은 **미설정 사이트용 폴백**이다.
   ============================================================ */

/* ── 토큰 ───────────────────────────────────────────────── */
:root {
  /* 브랜드 — 테넌트 주입 대상 */
  --lms-primary: #2563eb;
  --lms-primary-dark: #1d4ed8;   /* hover — 테넌트는 명도 −12%로 파생 */
  --lms-primary-ink: #1d4ed8;    /* soft 배경 위 글자 — 흰 배경 대비 4.5:1 보장 */
  --lms-on-primary: #ffffff;     /* 브랜드색 위 글자 — 대비 큰 쪽 자동 선택 */
  --lms-primary-soft: #eaf1fe;
  --lms-brand-lite: #7f9bff;     /* 짙은 판 위 강조 — 짙은 배경 대비 4.5:1 보장 */

  /* 상태 — 전 사이트 공통(테넌트 변경 불가). 색 단독 사용 금지, 항상 텍스트/아이콘 병행 */
  --lms-success: #0c7a44; --lms-success-soft: #e6f4ec;
  --lms-warning: #a25c00; --lms-warning-soft: #fcf1e2;
  --lms-danger:  #c0271d; --lms-danger-soft:  #fbeae9;

  /* 짙은 판 — 유틸바·마스트헤드·CTA 밴드·푸터 공통 바탕 */
  --lms-ink: #0c111c;

  /* 그라디언트 — 테넌트 주입 대상(브랜드색 파생). 하드코딩 금지 */
  --lms-grad-head: linear-gradient(180deg, #2563eb12 0%, #2563eb05 58%, transparent 100%);
  --lms-grad-primary: linear-gradient(140deg, #3b73f0 0%, #1d4ed8 100%);
  --lms-grad-ink: linear-gradient(125deg, #0c111c 0%, #151d2e 45%, #14275e 100%);
  --lms-grad-wash: linear-gradient(135deg, #2563eb12 0%, transparent 55%);

  /* 면·경계·잉크 — 배경톤/글자색 프리셋 주입 대상 */
  --lms-bg: #f4f6f9;
  --lms-surface: #ffffff;
  --lms-border: #dfe4ec;
  --lms-border-soft: #ecf0f5;
  --lms-text: #12161c;
  --lms-text-sub: #576070;
  --lms-text-muted: #89929f;

  --lms-font: 'Pretendard', 'Pretendard Variable', -apple-system, 'Malgun Gothic', sans-serif;

  /* 타이포 — 데스크톱 기준 */
  --lms-fs-xs: 12px; --lms-fs-sm: 13px; --lms-fs-md: 15px;
  --lms-fs-lg: 17px; --lms-fs-xl: 20px; --lms-fs-2xl: 24px; --lms-fs-3xl: 30px;
  --lms-fs-display: clamp(30px, 4.4vw, 52px);

  /* 형태 — 전 사이트 공통(테넌트 변경 불가) */
  --lms-radius: 6px; --lms-radius-lg: 10px; --lms-radius-xl: 14px;

  /* 고도 3단 — 이 스케일만 사용 */
  --lms-shadow: 0 1px 2px rgba(13,20,34,.05), 0 1px 1px rgba(13,20,34,.04);
  --lms-shadow-2: 0 4px 12px -3px rgba(13,20,34,.10), 0 2px 4px -2px rgba(13,20,34,.06);
  --lms-shadow-lg: 0 18px 40px -16px rgba(13,20,34,.24), 0 4px 10px -4px rgba(13,20,34,.08);
  --lms-edge: inset 0 1px 0 rgba(255,255,255,.9);   /* 카드 상단 하이라이트 */

  /* 간격 — 4px 배수 */
  --lms-sp-1: 4px; --lms-sp-2: 8px; --lms-sp-3: 12px; --lms-sp-4: 16px;
  --lms-sp-5: 24px; --lms-sp-6: 32px; --lms-sp-7: 48px; --lms-sp-8: 64px;

  --lms-touch: 44px;
  --lms-container: 1280px;
  --lms-measure: 42em;      /* 본문 글 폭 — 한글 가독 기준 */
  --lms-header-h: 60px;
  --lms-rail: 320px;
  /* 차시 콘텐츠(iframe) 카드 뷰의 높이 상수 — 교차 출처라 안의 높이를 잴 수 없어 두는 값이다.
     콘텐츠가 postMessage로 높이를 알려 주면 둘 다 폐기한다(docs/12 R5-2 · lesson.php 수신기).

     ① --lms-content-bar = 영상 페이지의 크롬 높이 = 상단 바 69 + 영상 아래 여백 28 = 97px.
        영상 페이지 필요 높이 = 폭 × 0.5625 + 97 (375px→308 · 402px→323, 실측 일치).
        ⚠ 2026-08-08 정정: 46px은 **틀린 값**이었다. 새 창(body.solo)으로 직접 열어 재는 바람에
          좌우 20px 여백이 낀 폭으로 계산했고(폭−40), 흰 줄을 없애려 하단 28px까지 뺐다.
          iframe 안에는 solo 여백이 없다 — 그래서 영상 아래 자막·컨트롤 줄이 잘렸다.
     ② --lms-content-min = 영상이 아닌 페이지까지 덮는 최소 높이.
        1차시 14쪽 실측(375px): 영상 308 · 퀴즈/선택 432 · 405 · 373 · 진단 789 · 긴 텍스트 1999.
        고정값 하나로는 전부 못 덮는다 → 다수(퀴즈 432)를 기준으로 잡고, 그보다 긴 두 쪽은
        전체화면으로 유도한다. 영상 페이지에 남는 여백은 그 맞바꿈의 대가다(2026-08-08 확정).
     ③ 여기에 더해 모바일에서는 **화면의 70%(70dvh)**까지 키운다(2026-08-08 확정).
        플레이어를 화면 위로 스크롤해 주므로(lesson.php focusPlayer) 그만큼 실제로 쓸 수 있다.
        ⚠ 70dvh 는 변수로 빼지 않는다 — var()로 넣으면 dvh 미지원 브라우저에서 '계산 시점 무효'가
          되어 앞 선언으로 되돌아가지 못하고 높이 자체가 사라진다. 선언을 두 줄로 겹쳐 쓴다. */
  --lms-content-bar: 97px;
  --lms-content-min: 432px;
}
/* 모바일 축소 — iOS 자동 확대 방지를 위해 본문은 16px로 되돌린다 */
@media (max-width: 640px) {
  :root {
    --lms-fs-md: 16px; --lms-fs-sm: 14px;
    --lms-fs-2xl: 21px; --lms-fs-3xl: 24px;
    --lms-header-h: 54px;
  }
}

/* ── 리셋/기본 ───────────────────────────────────────────── */
* { box-sizing: border-box; }
/* hidden 속성은 컴포넌트의 display(예: .lms-alert{display:flex})를 항상 이겨야 한다
   — JS가 el.hidden으로 여닫는 요소(인증 모달 경고·오류 박스 등)가 그대로 노출되는 것 방지 */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body.lms-front {
  font-family: var(--lms-font); font-size: var(--lms-fs-md); line-height: 1.7;
  background: var(--lms-bg); color: var(--lms-text);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0 0 var(--lms-sp-3); line-height: 1.32; text-wrap: balance; }
h1 { font-size: var(--lms-fs-2xl); font-weight: 800; letter-spacing: -.4px; }
h2 { font-size: var(--lms-fs-xl); font-weight: 800; letter-spacing: -.3px; }
h3 { font-size: var(--lms-fs-lg); font-weight: 700; }
p { margin: 0 0 var(--lms-sp-4); }
ul, ol { margin: 0 0 var(--lms-sp-3); padding-left: 20px; }
a { color: var(--lms-primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--lms-border-soft); margin: var(--lms-sp-4) 0; }
button, a[href] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lms-primary); outline-offset: 2px; }

/* 스크롤 진입 — IntersectionObserver(ui.js). 외부 애니메이션 라이브러리 금지 */
.lms-reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease-out, transform .35s ease-out; }
.lms-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lms-reveal { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 상단 유틸리티 바 (짙은 띠) ──────────────────────────── */
/* 헤더 본체는 흰색으로 남겨 블랙 로고를 지킨다 */
.lms-utilbar { background: var(--lms-ink); color: rgba(255,255,255,.72); font-size: var(--lms-fs-sm); }
.lms-utilbar__inner {
  max-width: var(--lms-container); margin: 0 auto; padding: 0 var(--lms-sp-6);
  height: 38px; display: flex; align-items: center; gap: var(--lms-sp-5);
}
.lms-utilbar__notice { display: flex; align-items: center; gap: 7px; min-width: 0; margin-right: auto; }
.lms-utilbar__notice i { color: var(--lms-brand-lite); flex: none; }
.lms-utilbar__notice > span, .lms-utilbar__notice > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-utilbar a { color: rgba(255,255,255,.72); font-weight: 600; white-space: nowrap; }
.lms-utilbar a:hover { color: #fff; text-decoration: none; }
.lms-utilbar__tel { color: #fff !important; font-weight: 800; }
/* 공지 TONE(G-13) — 색 단독 금지 규칙에 따라 아이콘과 병행 */
.lms-utilbar--warning { background: #3a2a10; color: #f3d9a8; }
.lms-utilbar--warning .lms-utilbar__notice i { color: #ffc46b; }
.lms-utilbar--danger  { background: #3a1614; color: #f5c3bf; }
.lms-utilbar--danger .lms-utilbar__notice i { color: #ff8b80; }
@media (max-width: 640px) {
  .lms-utilbar__inner { padding: 0 var(--lms-sp-4); gap: var(--lms-sp-3); }
  .lms-utilbar__hide { display: none; }
}

/* 구 헤더 스트립 (G-13) — 유틸바로 대체됐으나 잔여 호출부 호환을 위해 유지 */
.lms-front-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px var(--lms-sp-4); font-size: var(--lms-fs-sm); font-weight: 600;
  background: var(--lms-primary-soft); color: var(--lms-primary-ink);
}
.lms-front-strip > span, .lms-front-strip > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-front-strip > a { color: inherit; text-decoration: underline; }
.lms-front-strip--warning { background: var(--lms-warning-soft); color: var(--lms-warning); }
.lms-front-strip--danger  { background: var(--lms-danger-soft);  color: var(--lms-danger); }

/* ── 헤더 ────────────────────────────────────────────────── */
.lms-front-header {
  position: sticky; top: 0; z-index: 300;
  background: var(--lms-surface); /* backdrop-filter 금지 — fixed 자손(드로어)의 containing block을 만들어 배치가 깨짐 */
  border-bottom: 1px solid var(--lms-border);
}
.lms-front-header__inner {
  display: flex; align-items: center; gap: var(--lms-sp-5);
  height: var(--lms-header-h); padding: 0 var(--lms-sp-6);
  max-width: var(--lms-container); margin: 0 auto;
}
/* 로고 락업 — 검정 타일 + 흰 글리프 + 검정 워드마크.
   브랜드색과 독립이라 고객사 색이 무엇이든 로고는 흔들리지 않는다 */
.lms-front-header__logo {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  font-size: var(--lms-fs-lg); font-weight: 800; color: #0b0f16; letter-spacing: -.5px; text-decoration: none;
}
.lms-front-header__logo:hover { text-decoration: none; }
.lms-front-header__logo-img, .lms-front-header__logo img { height: 30px; width: auto; display: block; }
.lms-logomark {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #232c3d 0%, #0b0f16 70%); color: #fff; font-size: 14px;
  box-shadow: 0 1px 2px rgba(13,20,34,.28), inset 0 1px 0 rgba(255,255,255,.14);
}

/* GNB — 데스크톱 밑줄 탭 / 모바일 드로어 */
.lms-front-gnb { display: flex; align-items: center; gap: var(--lms-sp-5); margin-right: auto; }
/* ⚠ :not(.lms-btn) — 드로어 하단의 로그인/회원가입은 **버튼**이다. 링크 색 규칙(0,1,1)이
   .lms-btn--primary(0,1,0)의 흰 글자를 이겨 파랑 위에 파랑으로 찍혔다(실기기 확인 2026-08-10). */
.lms-front-gnb a:not(.lms-btn) {
  display: inline-flex; align-items: center; height: var(--lms-header-h);
  color: var(--lms-text-sub); font-weight: 600; font-size: var(--lms-fs-md);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lms-front-gnb a:not(.lms-btn):hover { color: var(--lms-text); text-decoration: none; }
.lms-front-gnb a.is-active { color: var(--lms-text); border-bottom-color: var(--lms-primary); }
/* 드로어 전용 조각 — 데스크톱 한 줄 탭에서는 없는 것으로 친다 */
.lms-front-gnb__head,
.lms-front-gnb__group,
.lms-front-gnb__ico { display: none; }

.lms-front-burger {
  display: none; align-items: center; justify-content: center;
  width: var(--lms-touch); height: var(--lms-touch); margin-left: auto;
  border: 0; background: none; border-radius: var(--lms-radius);
  font-size: 20px; color: var(--lms-text); cursor: pointer;
}
.lms-front-burger:hover { background: var(--lms-border-soft); }
/* 포커스 링은 키보드 포커스에만 — 터치 후 남는 파란 테두리 방지(접근성은 :focus-visible이 지킨다) */
.lms-front-burger:focus { outline: none; }
.lms-front-burger:focus-visible { outline: 2px solid var(--lms-primary); outline-offset: 2px; }
.lms-front-gnb__auth { display: none; }
.lms-front-header .lms-flex { flex-shrink: 0; }
.lms-front-header__actions { display: flex; align-items: center; gap: var(--lms-sp-2); margin-left: auto; flex: none; }

/* 드로어 백드롭 — 바깥 클릭 닫기의 시각 근거 */
.lms-front-scrim {
  position: fixed; inset: 0; z-index: 280; background: rgba(12,17,28,.42);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.lms-front-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 640px) {
  .lms-front-header__inner { padding: 0 var(--lms-sp-4); gap: var(--lms-sp-3); }
  .lms-front-burger { display: inline-flex; }
  /* 모바일 헤더 = 로고 + 버거만. 인증 액션은 드로어 하단으로 (375px 폭 초과 방지) */
  .lms-front-header__actions > *:not(.lms-front-burger) { display: none; }
  /* ⚠ margin-top:auto 를 걷어냈다(2026-08-09). 드로어가 화면 전체 높이라 메뉴가 3개뿐이면
     로그인 버튼이 700px 아래로 밀려나고 그 사이가 통째로 빈 판이 됐다(실기기 확인).
     메뉴 바로 아래에 붙여 손이 닿는 자리에 둔다. */
  .lms-front-gnb__auth {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: var(--lms-sp-4); padding-top: var(--lms-sp-4);
    border-top: 1px solid var(--lms-border-soft);
  }
  .lms-front-gnb__auth .lms-text-sub { padding: 0 4px; }
  /* 드로어 머리 — 로고 자리가 드로어에 가려지므로 '메뉴' 제목과 닫기 버튼을 둔다 */
  .lms-front-gnb__head {
    display: flex; align-items: center; justify-content: space-between;
    margin: calc(-1 * var(--lms-sp-5)) calc(-1 * var(--lms-sp-3)) var(--lms-sp-2);
    padding: var(--lms-sp-3) var(--lms-sp-3) var(--lms-sp-3) var(--lms-sp-4);
    border-bottom: 1px solid var(--lms-border-soft);
  }
  .lms-front-gnb__title { font-weight: 800; font-size: var(--lms-fs-md); color: var(--lms-text); }
  .lms-front-gnb__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--lms-touch); height: var(--lms-touch);
    border: 0; background: none; border-radius: var(--lms-radius);
    font-size: 20px; color: var(--lms-text-sub); cursor: pointer;
  }
  /* 묶음 소제목 — 과정 메뉴와 지원 메뉴가 같은 줄무게로 나열되던 문제 */
  .lms-front-gnb__group {
    display: block; margin: var(--lms-sp-3) 0 2px; padding: 0 12px;
    font-size: var(--lms-fs-xs); font-weight: 700; letter-spacing: .04em;
    color: var(--lms-text-muted);
  }
  .lms-front-gnb__group:first-of-type { margin-top: 0; }
  .lms-front-gnb__ico { display: inline-block; width: 20px; margin-right: 8px; color: var(--lms-text-muted); text-align: center; }
  .lms-front-gnb a.is-active .lms-front-gnb__ico { color: var(--lms-primary-ink); }
  .lms-front-gnb {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 290;
    width: min(300px, 84vw); margin: 0; padding: var(--lms-sp-5) var(--lms-sp-3) var(--lms-sp-3);
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--lms-surface); border-left: 1px solid var(--lms-border);
    box-shadow: var(--lms-shadow-lg);
    /* 닫힘 = 페이드+세로 슬라이드. 가로 이동은 뷰포트 밖 배치로 가로 스크롤을 유발하므로 금지 */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
    overflow-y: auto;
  }
  .lms-front-gnb.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .lms-front-gnb a:not(.lms-btn) {
    height: auto; min-height: 48px; padding: 0 12px;
    border-radius: var(--lms-radius); font-size: var(--lms-fs-lg);
    border-bottom: 0; margin-bottom: 0;
  }
  .lms-front-gnb a.is-active { background: var(--lms-primary-soft); color: var(--lms-primary-ink); }
  .lms-front-header__actions .lms-btn { min-height: 38px; padding: 0 12px; }
  /* 드로어 열림 중 배경 스크롤 잠금 */
  body.lms-front.is-drawer-open { overflow: hidden; }
}

/* ── 본문 컨테이너 ───────────────────────────────────────── */
.lms-front-main {
  width: 100%; max-width: var(--lms-container);
  margin: 0 auto; padding: var(--lms-sp-7) var(--lms-sp-6) var(--lms-sp-8);
  min-height: 50vh;
}
@media (max-width: 640px) { .lms-front-main { padding: var(--lms-sp-5) var(--lms-sp-4) var(--lms-sp-7); } }

/* ── 마스트헤드 (카탈로그·과정 상세의 머리) ───────────────── */
/* front_header()가 이미 <main>을 열어 두므로 main 안에서 풀블리드로 빠져나간다(.lms-hero와 동일 방식).
   위쪽은 main의 padding-top을 상쇄해 헤더에 붙인다. */
.lms-masthead {
  position: relative; overflow: hidden; background: var(--lms-grad-ink); color: #fff;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--lms-sp-7)); margin-bottom: var(--lms-sp-7);
}
@media (max-width: 640px) { .lms-masthead { margin-top: calc(-1 * var(--lms-sp-5)); margin-bottom: var(--lms-sp-5); } }
.lms-masthead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 320px at 82% -40%, var(--lms-primary), transparent 68%); opacity: .4;
}
.lms-masthead::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--lms-primary); }
.lms-masthead__inner { position: relative; max-width: var(--lms-container); margin: 0 auto; padding: var(--lms-sp-7) var(--lms-sp-6); }
.lms-masthead__kicker { font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-brand-lite); letter-spacing: .06em; }
.lms-masthead__title { font-size: var(--lms-fs-3xl); font-weight: 800; letter-spacing: -1px; margin: var(--lms-sp-2) 0 var(--lms-sp-3); color: #fff; }
.lms-masthead__sub { color: rgba(255,255,255,.7); max-width: 56ch; margin: 0; font-size: var(--lms-fs-lg); }
.lms-masthead__crumb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lms-fs-sm); font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: var(--lms-sp-4); }
.lms-masthead__crumb:hover { color: #fff; text-decoration: none; }
.lms-masthead__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--lms-sp-3); }
.lms-masthead__badges .lms-badge { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.2); }
.lms-masthead__search { display: flex; gap: var(--lms-sp-2); margin-top: var(--lms-sp-6); max-width: 560px; }
.lms-masthead__search .lms-input { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; }
.lms-masthead__search .lms-input::placeholder { color: rgba(255,255,255,.5); }
.lms-masthead__search .lms-input:focus { border-color: var(--lms-brand-lite); background: rgba(255,255,255,.13); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.lms-masthead__stats {
  display: flex; flex-wrap: wrap; gap: var(--lms-sp-6); margin-top: var(--lms-sp-6);
  padding-top: var(--lms-sp-5); border-top: 1px solid rgba(255,255,255,.13);
}
.lms-masthead__stat b { display: block; font-size: var(--lms-fs-2xl); font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.lms-masthead__stat span { font-size: var(--lms-fs-sm); color: rgba(255,255,255,.6); }
.lms-masthead__stat i { color: var(--lms-brand-lite); margin-right: 5px; }
.lms-masthead--course .lms-masthead__title { font-size: var(--lms-fs-2xl); max-width: 26ch; letter-spacing: -.7px; }
.lms-masthead--course .lms-masthead__sub { font-size: var(--lms-fs-md); }
/* 과정 대표이미지를 배경으로 — 짙은 오버레이로 글자 대비를 지킨다 */
.lms-masthead--img { background-size: cover; background-position: center; }
.lms-masthead--img::before {
  background: linear-gradient(100deg, rgba(12,17,28,.95) 0%, rgba(12,17,28,.86) 48%, rgba(12,17,28,.62) 100%);
  opacity: 1;
}
@media (max-width: 640px) {
  .lms-masthead__inner { padding: var(--lms-sp-6) var(--lms-sp-4); }
  /* 지표 4칸을 한 줄에 밀어 넣으면 375px에서 라벨이 잘리고 넷째 칸만 아래로 흘러내린다
     (실기기: '모집중 차수'가 잘리고 교강사가 혼자 다음 줄) → 2×2 격자로 세운다. */
  .lms-masthead__stats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--lms-sp-4) var(--lms-sp-5);
  }
  /* 숫자 크기를 한 단계 낮춘다 — 교강사 '이름'까지 2xl로 나오면 제목보다 커 보인다 */
  .lms-masthead__stat b { font-size: var(--lms-fs-xl); }
  .lms-masthead__stat span { font-size: var(--lms-fs-xs); }
  /* 대표이미지 배경은 좁은 화면에서 글자 뒤로 그대로 올라온다(가로 그라디언트라 오른쪽이 옅다).
     세로 방향으로 고르게 덮어 대비를 지킨다. */
  .lms-masthead--img::before {
    background: linear-gradient(180deg, rgba(12,17,28,.96) 0%, rgba(12,17,28,.93) 60%, rgba(12,17,28,.96) 100%);
  }
}

/* ── 히어로 (풀블리드) — index.php 등 기존 화면 ─────────── */
.lms-hero {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--lms-grad-wash), linear-gradient(178deg, var(--lms-surface) 0%, var(--lms-bg) 100%);
  border-bottom: 1px solid var(--lms-border);
  margin-bottom: var(--lms-sp-7);
}
.lms-hero__inner { max-width: var(--lms-container); margin: 0 auto; padding: var(--lms-sp-8) var(--lms-sp-6); }
.lms-hero--img { position: relative; background-size: cover; background-position: center; }
.lms-hero--img::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.30) 100%);
}
.lms-hero--img .lms-hero__inner { position: relative; }
.lms-hero__title { font-size: var(--lms-fs-3xl); font-weight: 800; letter-spacing: -.9px; margin-bottom: var(--lms-sp-3); }
.lms-hero__sub { font-size: var(--lms-fs-lg); color: var(--lms-text-sub); max-width: 56ch; }
.lms-hero__cta { display: flex; flex-wrap: wrap; gap: var(--lms-sp-3); margin-top: var(--lms-sp-6); }
@media (max-width: 640px) {
  .lms-hero__inner { padding: var(--lms-sp-6) var(--lms-sp-4); }
  .lms-hero--img::before { background: rgba(255,255,255,.88); }
}

/* ── 인트로 (첫 접속 1회 — 단일 컬럼) ────────────────────── */
.lms-intro { min-height: 100vh; display: flex; flex-direction: column; background: var(--lms-surface); position: relative; }
.lms-intro::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--lms-grad-primary); }
.lms-intro__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-4);
  padding: var(--lms-sp-5) var(--lms-sp-6); max-width: var(--lms-container); margin: 0 auto; width: 100%;
}
.lms-intro__mark { display: flex; align-items: center; gap: 9px; font-size: var(--lms-fs-lg); font-weight: 800; letter-spacing: -.5px; color: #0b0f16; }
.lms-intro__skip { font-size: var(--lms-fs-sm); font-weight: 600; color: var(--lms-text-muted); }
.lms-intro__skip:hover { color: var(--lms-text); text-decoration: none; }
.lms-intro__body { flex: 1; width: 100%; max-width: var(--lms-measure); margin: 0 auto; padding: var(--lms-sp-8) var(--lms-sp-6) var(--lms-sp-7); }
.lms-intro__kicker { display: block; font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-primary-ink); margin-bottom: var(--lms-sp-5); }
.lms-intro__lead { font-size: var(--lms-fs-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.24; margin: 0 0 var(--lms-sp-6); color: var(--lms-text); }
.lms-intro__lead em { font-style: normal; box-shadow: inset 0 -.32em 0 var(--lms-primary-soft); }
.lms-intro p { font-size: var(--lms-fs-lg); line-height: 1.85; color: var(--lms-text-sub); margin: 0 0 var(--lms-sp-5); }
.lms-intro p strong { color: var(--lms-text); font-weight: 700; }
.lms-intro__facts {
  margin: var(--lms-sp-7) 0; padding: var(--lms-sp-2) var(--lms-sp-5);
  background: var(--lms-grad-wash), var(--lms-bg);
  border: 1px solid var(--lms-border); border-radius: var(--lms-radius-lg); box-shadow: var(--lms-edge);
}
.lms-intro__fact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lms-sp-4); padding: var(--lms-sp-3) 0; border-bottom: 1px solid var(--lms-border-soft); }
.lms-intro__fact:last-child { border-bottom: 0; }
.lms-intro__fact dt { font-size: var(--lms-fs-sm); color: var(--lms-text-muted); margin: 0; }
.lms-intro__fact dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lms-intro__sign { font-size: var(--lms-fs-sm); color: var(--lms-text-muted); margin: var(--lms-sp-6) 0 0; padding-left: var(--lms-sp-4); border-left: 2px solid var(--lms-border); }
.lms-intro__act { margin-top: var(--lms-sp-7); padding-top: var(--lms-sp-6); border-top: 1px solid var(--lms-border); }
@media (max-width: 640px) {
  .lms-intro__bar { padding: var(--lms-sp-4); }
  .lms-intro__body { padding: var(--lms-sp-6) var(--lms-sp-4); }
}

/* ── 페이지 헤드 · 섹션 ──────────────────────────────────── */
/* 제목 아래 규칙선 — 좌측 일부만 브랜드색으로 끊는다 */
.lms-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lms-sp-4);
  flex-wrap: wrap; padding-bottom: var(--lms-sp-4);
  border-bottom: 1px solid var(--lms-border); margin-bottom: var(--lms-sp-5); position: relative;
}
.lms-pagehead::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; border-radius: 2px; background: var(--lms-grad-primary); }
.lms-pagehead__title { font-size: var(--lms-fs-2xl); font-weight: 800; letter-spacing: -.5px; margin: 0; }
.lms-pagehead__desc { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); margin: 5px 0 0; }
.lms-pagehead__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lms-front-section { margin: var(--lms-sp-7) 0; }
.lms-front-section:first-child { margin-top: 0; }
.lms-front-section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lms-sp-4);
  padding-bottom: var(--lms-sp-3); border-bottom: 1px solid var(--lms-border);
  margin-bottom: var(--lms-sp-5); position: relative;
}
.lms-front-section__head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; border-radius: 2px; background: var(--lms-grad-primary); }
.lms-front-section__eyebrow { font-size: var(--lms-fs-xs); font-weight: 800; letter-spacing: 2.5px; color: var(--lms-primary-ink); margin-bottom: 6px; }
.lms-front-section__title { font-size: var(--lms-fs-xl); font-weight: 800; letter-spacing: -.4px; line-height: 1.25; margin: 0; }
.lms-front-section__desc { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); margin: 4px 0 0; }
.lms-front-section__more { flex: none; font-weight: 700; font-size: var(--lms-fs-sm); color: var(--lms-text-sub); display: inline-flex; align-items: center; gap: 6px; }
.lms-front-section__more:hover { color: var(--lms-primary-ink); text-decoration: none; }

/* ── 분야 내비 ───────────────────────────────────────────── */
.lms-catnav {
  display: flex; gap: var(--lms-sp-2); overflow-x: auto;
  padding: var(--lms-sp-4) 0; border-bottom: 1px solid var(--lms-border); margin-bottom: var(--lms-sp-5);
}
.lms-catnav a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  min-height: 40px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--lms-border); background: var(--lms-surface);
  color: var(--lms-text-sub); font-size: var(--lms-fs-sm); font-weight: 700;
  box-shadow: var(--lms-shadow); text-decoration: none;
}
.lms-catnav a:hover { border-color: var(--lms-text-muted); color: var(--lms-text); text-decoration: none; }
.lms-catnav a.is-active { background: var(--lms-ink); border-color: var(--lms-ink); color: #fff; }
.lms-catnav a i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lms-catnav__n { font-variant-numeric: tabular-nums; opacity: .6; }

/* ── 버튼 ────────────────────────────────────────────────── */
.lms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--lms-touch); padding: 0 18px;
  border: 1px solid var(--lms-border); border-radius: var(--lms-radius);
  background: var(--lms-surface); color: var(--lms-text);
  font-family: inherit; font-size: var(--lms-fs-md); font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--lms-shadow);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.lms-btn:hover { background: var(--lms-bg); border-color: var(--lms-text-muted); text-decoration: none; box-shadow: var(--lms-shadow-2); }
.lms-btn:active { transform: translateY(1px); }
.lms-btn--primary { background: var(--lms-primary); border-color: var(--lms-primary); color: var(--lms-on-primary); box-shadow: var(--lms-shadow-2); }
.lms-btn--primary:hover { background: var(--lms-primary-dark); border-color: var(--lms-primary-dark); color: var(--lms-on-primary); box-shadow: var(--lms-shadow-lg); }
.lms-btn--danger { background: var(--lms-surface); border-color: var(--lms-danger); color: var(--lms-danger); }
.lms-btn--danger:hover { background: var(--lms-danger-soft); border-color: var(--lms-danger); }
.lms-btn--ghost { border-color: transparent; background: transparent; color: var(--lms-text-sub); box-shadow: none; }
.lms-btn--ghost:hover { background: var(--lms-bg); border-color: transparent; box-shadow: none; }
.lms-btn--sm { min-height: 40px; padding: 0 13px; font-size: var(--lms-fs-sm); }
.lms-btn--lg { min-height: 52px; padding: 0 26px; font-size: var(--lms-fs-lg); }
.lms-btn--block { width: 100%; }
.lms-btn[disabled], .lms-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── 카드 ────────────────────────────────────────────────── */
.lms-card {
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow), var(--lms-edge); overflow: hidden;
}
a.lms-card { display: block; color: var(--lms-text); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.lms-card:hover { transform: translateY(-2px); box-shadow: var(--lms-shadow-lg); border-color: var(--lms-primary); text-decoration: none; }
/* 카드 헤더 — 브랜드 워시 + 좌측 40px 언더라인. 밋밋한 경계선을 끊는 표식 */
.lms-card__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: var(--lms-sp-4) var(--lms-sp-5); border-bottom: 1px solid var(--lms-border);
  font-weight: 700; font-size: var(--lms-fs-md);
  background: var(--lms-grad-head); position: relative;
}
.lms-card__head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--lms-grad-primary); }
.lms-card__head i { color: var(--lms-primary-ink); }
.lms-card__head .lms-text-sub { margin-left: auto; font-weight: 500; font-size: var(--lms-fs-sm); }
@media (max-width: 640px) {
  .lms-card__head { flex-wrap: wrap; }
  .lms-card__head .lms-text-sub { margin-left: 0; flex-basis: 100%; }
}
.lms-card__body { padding: var(--lms-sp-5); }
.lms-card__foot { padding: var(--lms-sp-4) var(--lms-sp-5); border-top: 1px solid var(--lms-border); background: var(--lms-bg); }

/* 풀블리드 카드 — 모바일에서 화면 폭을 다 쓴다 (학습 플레이어처럼 넓이가 곧 가치인 콘텐츠용)
   ⚠ 음수 마진은 부모(.lms-front-main)의 좌우 패딩과 **정확히 같은 값**이어야 한다.
     더 크면 body가 옆으로 밀려 가로 스크롤이 생긴다. */
@media (max-width: 640px) {
  .lms-card--bleed {
    margin-inline: calc(-1 * var(--lms-sp-4));
    border-radius: 0; border-left: 0; border-right: 0;
  }
  /* 화면 끝까지 뻗은 카드에 머리글은 어색하다. 학습 화면에서는 페이지 제목과 내용도 겹친다. */
  .lms-card--bleed > .lms-card__head { display: none; }
}

/* ── 과정 카드 ───────────────────────────────────────────── */
.lms-course-card {
  display: flex; flex-direction: column; gap: var(--lms-sp-3);
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); overflow: hidden;
  padding: 0 var(--lms-sp-5) var(--lms-sp-5); color: var(--lms-text); text-decoration: none;
  box-shadow: var(--lms-shadow), var(--lms-edge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.lms-course-card:hover { transform: translateY(-2px); box-shadow: var(--lms-shadow-lg), var(--lms-edge); border-color: var(--lms-primary); text-decoration: none; }
/* 헤더 존 — 분야별 색이 들어가는 자리 */
.lms-course-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-3);
  margin: 0 calc(-1 * var(--lms-sp-5)) var(--lms-sp-2); padding: var(--lms-sp-4) var(--lms-sp-5);
  border-bottom: 1px solid var(--lms-border); background: var(--lms-grad-head); position: relative;
}
.lms-course-card__top::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: var(--lms-grad-primary); }
.lms-course-card__cat { font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-text-sub); letter-spacing: .04em; }
/* 분야별 색 — 장식이 아니라 분류 표시(화면설계 S-STU-01 "헤더 존이 분야별 색").
   ⚠ 2026-08-09 전까지 이 자리는 훈련등급(A/B/C)이었다. TRAIN_GRADE는 SUBSIDY_RATE의 축,
     즉 사업주 환급 단가를 정하는 내부 행정 속성이라 학습자에게 보일 값이 아니다 → 걷어냈다.
   분야는 사이트별 SITE_MENU라 --law/--safety 처럼 이름을 고정할 수 없다. MENU_PK로 3색을
   돌리는 톤 수식어를 쓴다(front_course_card). 색 단독 전달 금지 — 분야명 텍스트가 항상 함께 나온다. */
.lms-course-card--t1 .lms-course-card__top { background: var(--lms-primary-soft); }
.lms-course-card--t2 .lms-course-card__top { background: var(--lms-success-soft); }
.lms-course-card--t3 .lms-course-card__top { background: var(--lms-warning-soft); }
.lms-course-card--t1 .lms-course-card__top::after { background: var(--lms-primary); }
.lms-course-card--t2 .lms-course-card__top::after { background: var(--lms-success); }
.lms-course-card--t3 .lms-course-card__top::after { background: var(--lms-warning); }
.lms-course-card--t1 .lms-course-card__cat { color: var(--lms-primary-ink); }
.lms-course-card--t2 .lms-course-card__cat { color: var(--lms-success); }
.lms-course-card--t3 .lms-course-card__cat { color: var(--lms-warning); }
/* 대표 이미지 — 등록된 과정만 사용(IMAGE_URL). 없으면 헤더 존이 그 역할을 한다 */
.lms-course-card__img {
  display: block; width: calc(100% + 2 * var(--lms-sp-5)); max-width: none;
  margin: 0 calc(-1 * var(--lms-sp-5)) var(--lms-sp-2);
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--lms-primary-soft);
}
.lms-course-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lms-course-card__title { font-size: var(--lms-fs-lg); font-weight: 700; line-height: 1.45; margin: 0; letter-spacing: -.2px; }
/* 교육 대상(INTRO_TARGET) — 길이가 제각각이라 2줄에서 자른다. 안 자르면 카드 높이가 들쭉날쭉해
   그리드가 어긋나 보인다. -webkit- 접두사 조합이 line-clamp의 표준 사용법이다. */
.lms-course-card__desc {
  font-size: var(--lms-fs-sm); color: var(--lms-text-sub); margin: 0; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lms-course-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--lms-text-sub); font-size: var(--lms-fs-sm); }
.lms-course-card__meta i { color: var(--lms-text-muted); margin-right: 4px; }
.lms-course-card__body { display: flex; flex-direction: column; gap: var(--lms-sp-3); }
.lms-course-card__foot {
  margin-top: auto; padding-top: var(--lms-sp-4); border-top: 1px solid var(--lms-border-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--lms-sp-2);
}

/* 모바일 = 가로형 카드 (2026-08-10)
   세로형은 375px에서 카드 ~430px 중 이미지가 211px(49%)였다. 5장이면 페이지 3711px —
   훑어보기가 안 된다. 썸네일을 좌측 96px로 줄이고 내용을 우측에 세운다(카드 ~150px).
   ⚠ 데스크톱 3열 그리드는 손대지 않는다 — 넓은 화면에서는 큰 이미지가 제 값을 한다.
   ⚠ **__body가 있는 카드(front_course_card 산출물)로 한정한다.** 내 학습(my_learning)은
     같은 lms-course-card 클래스를 다른 구조(진도바·칩 직계 자식)로 재사용하는데, 무조건
     그리드를 걸면 자식들이 96px 썸네일 칸으로 밀려 라벨이 세로로 꺾인다(2026-08-10 실측). */
@media (max-width: 640px) {
  .lms-course-card:has(> .lms-course-card__body) {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "top top" "img body" "foot foot";
    gap: var(--lms-sp-2) var(--lms-sp-4);
    padding: 0 var(--lms-sp-4) var(--lms-sp-3);
  }
  .lms-course-card:has(> .lms-course-card__body) .lms-course-card__top {
    grid-area: top;
    margin: 0 calc(-1 * var(--lms-sp-4)) 0; padding: var(--lms-sp-3) var(--lms-sp-4);
  }
  .lms-course-card:has(> .lms-course-card__body) > .lms-course-card__img {
    grid-area: img; align-self: start;
    width: 96px; margin: 0; border-radius: var(--lms-radius); aspect-ratio: 1 / 1;
  }
  /* 썸네일이 없는 자리(함께 보면 좋은 과정 — image:false)는 칸을 접어 본문이 폭을 다 쓴다 */
  .lms-course-card:has(> .lms-course-card__body):not(:has(.lms-course-card__img)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "body" "foot";
  }
  .lms-course-card__body { grid-area: body; gap: var(--lms-sp-2); }
  .lms-course-card__title { font-size: var(--lms-fs-md); }
  .lms-course-card:has(> .lms-course-card__body) .lms-course-card__foot { grid-area: foot; padding-top: var(--lms-sp-3); }
}
.lms-course-card__price { font-weight: 800; font-size: var(--lms-fs-lg); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.lms-course-card__price .lms-text-sub { font-weight: 500; font-size: var(--lms-fs-sm); }

/* ── 추천 카드 (가로형) ──────────────────────────────────── */
.lms-feature { display: grid; grid-template-columns: 1fr; gap: var(--lms-sp-4); }
@media (min-width: 1024px) { .lms-feature { grid-template-columns: repeat(2, 1fr); } }
.lms-feature__card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr);
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); overflow: hidden; color: var(--lms-text); text-decoration: none;
  box-shadow: var(--lms-shadow), var(--lms-edge);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.lms-feature__card:hover { border-color: var(--lms-primary); transform: translateY(-2px); box-shadow: var(--lms-shadow-lg); text-decoration: none; }
/* 이미지 없이 성립하는 표지 — 차시 수를 크게 앉힌 색 블록 */
.lms-feature__cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--lms-ink); color: #fff; position: relative; overflow: hidden;
}
.lms-feature__cover::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(180px 120px at 50% 0%, var(--lms-primary), transparent 72%); opacity: .55;
}
.lms-feature__cover b { position: relative; font-size: 30px; font-weight: 800; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; line-height: 1; }
.lms-feature__cover span { position: relative; font-size: var(--lms-fs-xs); color: rgba(255,255,255,.62); font-weight: 600; }
.lms-feature__body { padding: var(--lms-sp-4) var(--lms-sp-5); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lms-feature__cat { font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-text-muted); letter-spacing: .04em; }
.lms-feature__title { font-size: var(--lms-fs-lg); font-weight: 700; letter-spacing: -.3px; margin: 0; line-height: 1.4; }
.lms-feature__foot { margin-top: auto; padding-top: var(--lms-sp-3); border-top: 1px solid var(--lms-border-soft); display: flex; align-items: baseline; justify-content: space-between; gap: var(--lms-sp-2); }

/* ── 지표 패널 (짙은 판) ─────────────────────────────────── */
.lms-statbar {
  display: grid; grid-template-columns: repeat(2, 1fr); position: relative; overflow: hidden;
  background: var(--lms-grad-ink); border-radius: var(--lms-radius-lg);
  box-shadow: var(--lms-shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
}
.lms-statbar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 220px at 88% -30%, var(--lms-primary), transparent 70%); opacity: .34;
}
.lms-statbar__item { position: relative; padding: var(--lms-sp-5); border-left: 1px solid rgba(255,255,255,.09); }
.lms-statbar__item:nth-child(odd) { border-left: 0; }
.lms-statbar__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); }
.lms-statbar__label { display: flex; align-items: center; gap: 6px; font-size: var(--lms-fs-xs); font-weight: 700; color: rgba(255,255,255,.62); }
.lms-statbar__label i { color: var(--lms-brand-lite); }
.lms-statbar__value { font-size: var(--lms-fs-3xl); font-weight: 800; margin-top: 6px; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.lms-statbar__value small { font-size: var(--lms-fs-sm); font-weight: 600; color: rgba(255,255,255,.6); margin-left: 3px; letter-spacing: 0; }
@media (min-width: 1024px) {
  .lms-statbar { grid-template-columns: repeat(4, 1fr); }
  .lms-statbar__item { border-left: 1px solid rgba(255,255,255,.09); border-top: 0; }
  .lms-statbar__item:first-child { border-left: 0; }
}

/* ── 본문 + 레일 2단 ─────────────────────────────────────── */
/* ⚠ 1fr 트랙은 min-width:auto 라서 내부의 넓은 표(min-width 560)에 밀려 늘어난다.
   minmax(0,1fr)로 눌러야 표가 자기 컨테이너 안에서만 가로 스크롤한다. */
.lms-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lms-sp-5); align-items: start; }
.lms-split > * { min-width: 0; }
.lms-split__rail { display: grid; gap: var(--lms-sp-4); order: -1; }
@media (min-width: 1024px) {
  .lms-split { grid-template-columns: minmax(0, 1fr) var(--lms-rail); gap: var(--lms-sp-7); }
  .lms-split__rail { position: sticky; top: calc(var(--lms-header-h) + var(--lms-sp-4)); order: 0; }
}

/* ── 모집 차수 카드 (2026-08-10 — 표 폐기) ────────────────────
   과정당 모집중 차수는 1~2개인데 6열 표를 쓰고 있었고, 그 값(회차·기간·정원·수료기준)이
   레일 신청 카드와 그대로 겹쳐 한 화면에 두 번 렌더됐다. 여기는 '언제 시작하나 + 신청'만 남긴다. */
.lms-classlist { display: grid; gap: var(--lms-sp-3); }
.lms-classcard {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-4);
  padding: var(--lms-sp-4) var(--lms-sp-5);
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow);
}
.lms-classcard__no { font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-text-sub); letter-spacing: .04em; }
.lms-classcard__period { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.lms-classcard .lms-btn { flex: none; }
@media (max-width: 640px) {
  /* 좁은 화면에서는 버튼을 아래로 내리고 폭을 다 준다 — 옆에 붙이면 기간이 두 줄로 접힌다 */
  .lms-classcard { flex-direction: column; align-items: stretch; gap: var(--lms-sp-3); }
  .lms-classcard .lms-btn { width: 100%; }
}

/* ── 모바일 하단 고정 CTA (2026-08-10) ────────────────────────
   모바일에서 레일은 본문 맨 아래로 내려가 한참 스크롤해야 닿는다. 신청을 손 닿는 자리에 고정한다.
   ⚠ 레일 신청 카드는 모바일에서 감춘다 — 안 그러면 신청 버튼이 세 군데(레일·차수카드·바)가 된다. */
.lms-cta-bar { display: none; }
@media (max-width: 640px) {
  .lms-cta-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
    padding: var(--lms-sp-3) var(--lms-sp-4);
    padding-bottom: calc(var(--lms-sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--lms-surface); border-top: 1px solid var(--lms-border);
    box-shadow: 0 -6px 20px -12px rgba(12, 17, 28, .45);
  }
  .lms-cta-bar__price { font-size: var(--lms-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
  .lms-cta-bar .lms-btn { flex: none; }
  /* 바가 마지막 콘텐츠를 가리지 않도록 푸터 아래 여백을 준다 */
  body.lms-front:has(.lms-cta-bar) .lms-front-footer { padding-bottom: 72px; }
  /* 레일 신청 카드는 이 바가 대신한다 */
  .lms-split__rail > .lms-card { display: none; }
}

/* ── 차시 목록 (순차 학습이 강제되므로 번호가 정보) ──────── */
.lms-curric { list-style: none; margin: 0; padding: 0; }
.lms-curric__item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--lms-sp-4);
  align-items: center; padding: var(--lms-sp-4) 0; border-bottom: 1px solid var(--lms-border-soft);
}
.lms-curric__item:last-child { border-bottom: 0; }
.lms-curric__no {
  width: 34px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-text-muted);
  font-variant-numeric: tabular-nums; border-right: 1px solid var(--lms-border);
}
.lms-curric__item--done .lms-curric__no { color: var(--lms-success); }
.lms-curric__item--current .lms-curric__no { color: var(--lms-primary-ink); }
.lms-curric__item--current .lms-curric__title { font-weight: 700; }
.lms-curric__item--locked { opacity: .55; }
.lms-curric__title { font-weight: 500; line-height: 1.5; }
.lms-curric__meta { font-size: var(--lms-fs-sm); color: var(--lms-text-muted); margin-top: 1px; }
.lms-curric__side { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lms-curric__item { grid-template-columns: 30px minmax(0, 1fr); }
  .lms-curric__side { grid-column: 2; margin-top: 3px; }
}
/* 과정 상세(브라우즈) 전용 모디파이어 (2026-08-13) — 학습 화면(course_study)의
   done/current/locked 상태색 규칙과 충돌하지 않게 격리한다 */
.lms-curric--browse .lms-curric__no {
  border-right: 0; border-radius: 8px; background: var(--lms-primary-soft);
  color: var(--lms-primary-ink); font-weight: 800; font-size: var(--lms-fs-xs);
}
@media (min-width: 960px) {
  .lms-curric--cols { columns: 2; column-gap: 56px; }
  .lms-curric--cols .lms-curric__item { break-inside: avoid; }
}

/* ── CTA 밴드 ────────────────────────────────────────────── */
.lms-ctaband {
  position: relative; overflow: hidden; background: var(--lms-grad-ink); color: #fff;
  border-radius: var(--lms-radius-lg); padding: var(--lms-sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-5); flex-wrap: wrap;
  box-shadow: var(--lms-shadow-lg);
}
.lms-ctaband::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 92% 120%, var(--lms-primary), transparent 70%); opacity: .42;
}
.lms-ctaband__body { position: relative; min-width: 0; }
.lms-ctaband__title { font-size: var(--lms-fs-xl); font-weight: 800; letter-spacing: -.4px; margin: 0 0 5px; color: #fff; }
.lms-ctaband__desc { color: rgba(255,255,255,.68); margin: 0; font-size: var(--lms-fs-sm); }
.lms-ctaband__act { position: relative; display: flex; gap: var(--lms-sp-2); flex-wrap: wrap; }
.lms-ctaband .lms-btn:not(.lms-btn--primary) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.lms-ctaband .lms-btn:not(.lms-btn--primary):hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.3); }

/* ── 배지 · 칩 ───────────────────────────────────────────── */
.lms-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--lms-radius);
  font-size: var(--lms-fs-xs); font-weight: 700; line-height: 1.75;
  background: var(--lms-bg); color: var(--lms-text-sub); border: 1px solid var(--lms-border);
}
.lms-badge--primary, .lms-badge--info { background: var(--lms-primary-soft); color: var(--lms-primary-ink); border-color: transparent; }
.lms-badge--success { background: var(--lms-success-soft); color: var(--lms-success); border-color: transparent; }
.lms-badge--warning { background: var(--lms-warning-soft); color: var(--lms-warning); border-color: transparent; }
.lms-badge--danger  { background: var(--lms-danger-soft);  color: var(--lms-danger);  border-color: transparent; }
.lms-chiprow { display: flex; flex-wrap: wrap; gap: var(--lms-sp-4); }
.lms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--lms-fs-sm); color: var(--lms-text-sub); }
.lms-chip i { color: var(--lms-text-muted); }

/* ── 알림 ────────────────────────────────────────────────── */
/* ⚠ flex를 쓰지 않는다(2026-08-10 정정). flex 컨테이너에서는 텍스트 조각과 <b>·<a>가
   각각 익명 flex 아이템으로 갈라져, 모바일에서 "학습 진입 전 | 본인인증 | 이 필요합니다"가
   세로 기둥 3개로 깨졌다(실기기 확인). 아이콘을 왼쪽 거터에 절대배치하고 본문은 블록으로
   자연스럽게 흘린다 — 인라인 강조·링크·내부 <div> 전부 그대로 동작한다. */
.lms-alert {
  display: block; position: relative; padding: 13px 15px;
  border-radius: var(--lms-radius); background: var(--lms-surface);
  border: 1px solid var(--lms-border); border-left: 3px solid var(--lms-text-muted); font-size: var(--lms-fs-md);
}
/* ⚠ i와 svg를 함께 잡는다 — Font Awesome 킷이 <i>를 <svg>로 치환하므로 i만 보면 영영 안 맞는다 */
.lms-alert:has(> i:first-child), .lms-alert:has(> svg:first-child) { padding-left: 42px; }
.lms-alert > i:first-child, .lms-alert > svg:first-child {
  position: absolute; left: 15px; top: 17px; color: var(--lms-text-muted);
}
.lms-alert--info    { border-color: transparent; border-left-color: var(--lms-primary); background: var(--lms-primary-soft); }
.lms-alert--info i  { color: var(--lms-primary-ink); }
.lms-alert--success { border-color: transparent; border-left-color: var(--lms-success); background: var(--lms-success-soft); }
.lms-alert--success i { color: var(--lms-success); }
.lms-alert--warning { border-color: transparent; border-left-color: var(--lms-warning); background: var(--lms-warning-soft); }
.lms-alert--warning i { color: var(--lms-warning); }
.lms-alert--danger  { border-color: transparent; border-left-color: var(--lms-danger); background: var(--lms-danger-soft); }
.lms-alert--danger i { color: var(--lms-danger); }

/* ── 폼 ──────────────────────────────────────────────────── */
.lms-field { margin-bottom: var(--lms-sp-4); }
.lms-label { display: block; font-size: var(--lms-fs-xs); font-weight: 700; margin-bottom: 6px; color: var(--lms-text-sub); }
.lms-label--required::after { content: ' *'; color: var(--lms-danger); }
.lms-input, .lms-select, textarea.lms-input {
  width: 100%; min-height: var(--lms-touch); padding: 10px 13px;
  border: 1px solid var(--lms-border); border-radius: var(--lms-radius);
  background: var(--lms-surface); color: var(--lms-text);
  font-family: inherit; font-size: var(--lms-fs-md);
}
textarea.lms-input { min-height: 96px; line-height: 1.6; }
.lms-input:focus, .lms-select:focus { outline: none; border-color: var(--lms-primary); box-shadow: 0 0 0 3px var(--lms-primary-soft); }
.lms-input--error { border-color: var(--lms-danger); }
.lms-field__help { font-size: var(--lms-fs-xs); color: var(--lms-text-sub); margin-top: 5px; }
.lms-field__error { font-size: var(--lms-fs-xs); color: var(--lms-danger); margin-top: 5px; font-weight: 600; }
.lms-field__ok { font-size: var(--lms-fs-xs); color: var(--lms-success); margin-top: 5px; font-weight: 600; }
.lms-input-group { display: flex; gap: var(--lms-sp-2); align-items: stretch; }
.lms-input-group > .lms-input, .lms-input-group > .lms-select { flex: 1 1 auto; min-width: 0; }
.lms-input-group > .lms-btn { flex: 0 0 auto; white-space: nowrap; }
/* 두 칸 사이 구분자 — 주민등록번호 앞/뒤처럼 한 값이 두 칸으로 나뉠 때 */
.lms-input-group__sep { display: flex; align-items: center; color: var(--lms-text-muted); flex: 0 0 auto; }
.lms-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--lms-fs-md); }
.lms-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--lms-primary); }
.lms-consent { border: 1px solid var(--lms-border); border-radius: var(--lms-radius-lg); padding: var(--lms-sp-4); margin-bottom: var(--lms-sp-3); background: var(--lms-surface); }

/* ── 인증 수단 선택 (2026-08-19 — 본인확인 창·회원가입 공용) ──────────
   본인확인은 "휴대폰이냐 아이핀이냐"를 고르는 자리다. 종전에는 큰 primary 버튼 하나와
   작은 회색 버튼 하나여서 두 번째 수단이 곁다리처럼 보였고, 붙는 화면마다 폭·정렬이
   달라 들쭉날쭉했다. 두 수단을 **같은 크기의 줄**로 세워 선택지로 읽히게 한다.
   ⚠ 아이핀은 미설정이어도 자리를 지운다(disabled) — 화면 구조가 설정에 따라 달라지면
     매뉴얼·심사 시연과 어긋난다. */
.lms-authpick { display: grid; gap: 8px; }
.lms-authpick__btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 16px;
  border: 1px solid var(--lms-border); border-radius: var(--lms-radius-lg);
  background: var(--lms-surface); color: var(--lms-text);
  font-family: inherit; font-size: var(--lms-fs-md); font-weight: 700;
  text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.lms-authpick__btn:hover:not(:disabled) { border-color: var(--lms-primary); background: var(--lms-primary-soft); }
.lms-authpick__btn:active:not(:disabled) { transform: translateY(1px); }
.lms-authpick__btn--primary { background: var(--lms-primary); border-color: var(--lms-primary); color: var(--lms-on-primary); }
.lms-authpick__btn--primary:hover:not(:disabled) { background: var(--lms-primary-dark); border-color: var(--lms-primary-dark); }
.lms-authpick__btn:disabled { opacity: .55; cursor: not-allowed; }
/* 아이콘 폭을 고정해야 두 줄의 글자 시작점이 맞는다 */
.lms-authpick__ico { flex: 0 0 22px; text-align: center; font-size: 17px; }
.lms-authpick__body { flex: 1 1 auto; min-width: 0; }
.lms-authpick__note { display: block; margin-top: 2px; font-size: var(--lms-fs-sm); font-weight: 500; opacity: .8; }
.lms-authpick__tag {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--lms-bg); color: var(--lms-text-sub);
  font-size: var(--lms-fs-xs); font-weight: 600;
}
/* mOTP는 보조 수단이라 선택지 아래 한 줄로 내린다 — 위 두 줄과 무게가 같으면 안 된다 */
.lms-authpick__alt { margin-top: 2px; font-size: var(--lms-fs-sm); color: var(--lms-text-sub); text-align: center; }
.lms-authpick__alt button {
  border: 0; background: none; padding: 0; margin-right: 6px;
  font: inherit; font-weight: 700; color: var(--lms-primary-ink);
  text-decoration: underline; cursor: pointer;
}

/* 작은 셀렉트 — 정렬처럼 폼이 아니라 도구 줄에 앉는 컨트롤용. 내용 폭만 차지한다 */
.lms-select--sm { width: auto; min-height: 36px; padding: 6px 10px; font-size: var(--lms-fs-sm); }

/* ── 섹션 내비 (2026-08-10 — 과정 상세 원페이지) ──────────────
   상품페이지식 밑줄 탭. 알약(lms-tabs)이 아니라 텍스트 + primary 밑줄이다(승인된 미리보기).
   앵커 링크라 JS 없이도 동작하고, 스크롤스파이(is-active)는 순수 장식이다. */
.lms-secnav {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--lms-border);
  background: var(--lms-surface);
  position: sticky; top: var(--lms-header-h); z-index: 250;
  /* 본문 폭 밖(음수 마진)으로 살짝 넓혀 sticky 배경이 끊겨 보이지 않게 한다 */
  margin: 0 calc(-1 * var(--lms-sp-2)); padding: 0 var(--lms-sp-2);
}
.lms-secnav a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 16px;
  font-size: var(--lms-fs-md); font-weight: 600; color: var(--lms-text-sub);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lms-secnav a:hover { color: var(--lms-text); text-decoration: none; }
.lms-secnav a.is-active { color: var(--lms-primary-ink); font-weight: 800; border-bottom-color: var(--lms-primary); }
/* 앵커 이동이 sticky 내비에 가리지 않게 — 헤더 + 내비 + 여백 */
.lms-anchor-sec { scroll-margin-top: calc(var(--lms-header-h) + 48px + var(--lms-sp-3)); }
body.lms-front { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { body.lms-front { scroll-behavior: auto; } }

/* ── 수료 기준 스탯 (2026-08-10) ─────────────────────────────
   구매 전 확인해야 할 계약 조건이라 숫자가 먼저 읽혀야 한다. soft 배경은 사용자 확정. */
.lms-passgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lms-sp-3); }
@media (max-width: 640px) { .lms-passgrid { gap: 8px; } }
.lms-passcell {
  background: var(--lms-primary-soft); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow);
  padding: var(--lms-sp-4); text-align: center;
}
.lms-passcell__v {
  font-size: var(--lms-fs-2xl); font-weight: 800; letter-spacing: -.6px;
  color: var(--lms-primary-ink); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.lms-passcell__v small { font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-text); }
.lms-passcell__k { font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-text-sub); margin-top: 4px; letter-spacing: .03em; }

/* ── 과정 상세 에디토리얼 시스템 (2026-08-13 — 원고 아티팩트 톤 채택, 목업 D 승인) ──
   종이톤 배경 + 잉크 타이포 + 틸/스틸블루/앰버 3색 포인트.
   body.lms-ed(과정 상세 전용)로 스코프 — 다른 학습자 화면은 기존 톤 유지.
   확정 피드백: 영어 eyebrow 없음 · 블랙 구분선 없음 · 반영비율은 밝은 톤 5색 */
:root {
  --lms-ed-ink: #1a1d21; --lms-ed-ink2: #4a545e; --lms-ed-ink3: #8b949d; --lms-ed-ink4: #b3bcc4;
  --lms-ed-bg: #fbfaf8; --lms-ed-line: #e6e2db; --lms-ed-line2: #f0ede8;
  --lms-ed-accent: #0b6b63; --lms-ed-mark: #1f4b78; --lms-ed-warm: #8a5a1e;
  /* 반영비율 막대 — 밝은 톤 5색 */
  --lms-ed-r1: #5b8bf5; --lms-ed-r2: #66c6ea; --lms-ed-r3: #5ecfae;
  --lms-ed-r4: #f2b95c; --lms-ed-r5: #b9a5f5;
}
body.lms-ed { background: var(--lms-ed-bg); color: var(--lms-ed-ink); word-break: keep-all; }
.lms-ed .lms-front-section__title { font-size: var(--lms-fs-2xl); font-weight: 800; letter-spacing: -.022em; color: var(--lms-ed-ink); }
.lms-ed .lms-front-section__desc { color: var(--lms-ed-ink3); }
.lms-ed .lms-front-section__more { color: var(--lms-ed-ink2); }
.lms-ed .lms-card { border-color: var(--lms-ed-line); box-shadow: none; }
.lms-ed .lms-dl__row { border-bottom-color: var(--lms-ed-line2); }
.lms-ed .lms-dl__k { color: var(--lms-ed-ink3); }
.lms-ed .lms-secnav { border-bottom-color: var(--lms-ed-line); }
.lms-ed .lms-secnav a { color: var(--lms-ed-ink3); }
.lms-ed .lms-secnav a:hover { color: var(--lms-ed-ink); }
.lms-ed .lms-secnav a.is-active { color: var(--lms-ed-ink); border-bottom-color: var(--lms-ed-ink); }
.lms-ed .lms-accordion { border-bottom-color: var(--lms-ed-line); }
.lms-ed .lms-accordion__head::before { background: color-mix(in srgb, var(--lms-ed-accent) 12%, transparent); color: var(--lms-ed-accent); }
.lms-ed .lms-accordion[open] .lms-accordion__head { color: var(--lms-ed-accent); }
.lms-ed .lms-curric__item { border-bottom-color: var(--lms-ed-line2); }
/* 리드 — 패널 없이 큰 본문 */
.lms-lead { font-size: 18px; line-height: 1.75; letter-spacing: -.012em; max-width: 46em; margin: 0 0 var(--lms-sp-4); }
/* 줄 목록 — 모듈 파싱이 안 되는 과정 소개의 폴백 */
.lms-linelist { list-style: none; margin: 0 0 var(--lms-sp-2); padding: 0; max-width: var(--lms-measure); }
.lms-linelist li { position: relative; padding: 7px 0 7px 17px; font-size: var(--lms-fs-md); line-height: 1.65; color: var(--lms-ed-ink2); }
.lms-linelist li::before {
  content: ""; position: absolute; left: 3px; top: 15px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--lms-ed-accent);
}
/* 모듈 목록 — 소개문 'N부(x~y차시) 제목: 키워드' 파싱 결과 */
.lms-ed-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: var(--lms-sp-4) 0 4px; }
@media (max-width: 700px) { .lms-ed-modgrid { grid-template-columns: 1fr; } }
.lms-ed-mod { padding: 14px 0; border-bottom: 1px solid var(--lms-ed-line); }
.lms-ed-mod__no { font-size: var(--lms-fs-xs); font-weight: 800; letter-spacing: .08em; color: var(--lms-ed-mark); font-variant-numeric: tabular-nums; }
.lms-ed-mod__no small { color: var(--lms-ed-ink3); font-weight: 700; letter-spacing: .02em; margin-left: 8px; }
.lms-ed-mod__t { font-weight: 750; margin: 3px 0 4px; letter-spacing: -.014em; }
.lms-ed-mod__kw { font-size: var(--lms-fs-sm); color: var(--lms-ed-ink3); line-height: 1.6; }
/* 소제목 — 배지 + 헤어라인 (블랙 룰 대신 이 마커가 구획을 나눈다) */
.lms-ed-h3 { font-size: var(--lms-fs-md); font-weight: 750; color: var(--lms-ed-ink2); letter-spacing: -.01em; margin: var(--lms-sp-6) 0 0; display: flex; align-items: center; gap: 11px; }
.lms-ed-h3::after { content: ""; flex: 1; height: 1px; background: var(--lms-ed-line); }
.lms-ed-h3__n { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--lms-ed-mark); border-radius: 4px; padding: 2px 7px; }
/* 학습 목표 점 리스트 */
.lms-ed-obj { list-style: none; margin: var(--lms-sp-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 700px) { .lms-ed-obj { grid-template-columns: 1fr; } }
.lms-ed-obj li { position: relative; padding-left: 17px; font-size: 14.5px; color: var(--lms-ed-ink2); line-height: 1.65; }
.lms-ed-obj li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--lms-ed-accent); }
/* 교육 대상 칩 */
.lms-ed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--lms-sp-3); }
.lms-ed-chip { border: 1px solid var(--lms-ed-line); background: var(--lms-surface); border-radius: 999px; padding: 6px 13px; font-size: var(--lms-fs-sm); color: var(--lms-ed-ink2); }
/* 교강사 인라인 */
.lms-ed-tutor { display: flex; align-items: center; gap: var(--lms-sp-3); }
.lms-ed-tutor__ava { width: 40px; height: 40px; border-radius: 50%; background: var(--lms-ed-mark); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lms-ed-tutor__role { font-size: var(--lms-fs-sm); color: var(--lms-ed-ink3); }
/* 차시 차례 — 모듈 그룹 + 번호 목록 (원고 아티팩트의 '차례' 패턴) */
.lms-ed-toc { background: var(--lms-surface); border: 1px solid var(--lms-ed-line); border-radius: 12px; padding: 20px 22px; }
.lms-ed-toc__mg { margin-bottom: var(--lms-sp-4); }
.lms-ed-toc__mg:last-child { margin-bottom: 0; }
.lms-ed-toc__mt { font-size: var(--lms-fs-xs); font-weight: 800; color: var(--lms-ed-mark); margin-bottom: 6px; letter-spacing: .02em; }
.lms-ed-toc__mt small { color: var(--lms-ed-ink3); font-weight: 700; margin-left: 7px; font-variant-numeric: tabular-nums; }
.lms-ed-toc ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (max-width: 700px) { .lms-ed-toc ol { grid-template-columns: 1fr; } }
.lms-ed-toc li { font-size: var(--lms-fs-sm); color: var(--lms-ed-ink2); line-height: 1.55; }
.lms-ed-toc li b { color: var(--lms-ed-ink4); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 7px; }
/* 평가 구성 — 종류 칩 + 행 */
.lms-ed-eval { border-top: 1px solid var(--lms-ed-line); }
.lms-ed-eval__row { display: flex; align-items: baseline; gap: var(--lms-sp-3); padding: 13px 2px; border-bottom: 1px solid var(--lms-ed-line); }
.lms-ed-eval__chip { flex: none; min-width: 58px; text-align: center; border-radius: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 8px; }
.lms-ed-eval__chip--mid  { background: color-mix(in srgb, var(--lms-ed-mark) 14%, transparent); color: var(--lms-ed-mark); }
.lms-ed-eval__chip--task { background: color-mix(in srgb, var(--lms-ed-warm) 16%, transparent); color: var(--lms-ed-warm); }
.lms-ed-eval__chip--prog { background: color-mix(in srgb, var(--lms-ed-accent) 14%, transparent); color: var(--lms-ed-accent); }
.lms-ed-eval__name { font-weight: 700; flex: 1; letter-spacing: -.01em; }
.lms-ed-eval__meta { font-size: var(--lms-fs-sm); color: var(--lms-ed-ink3); font-variant-numeric: tabular-nums; }
/* 수료 기준 — 큰 숫자 블록(옅은 상단 라인) */
.lms-ed-pass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 6px 0 var(--lms-sp-5); }
@media (max-width: 640px) { .lms-ed-pass { gap: 16px; } }
.lms-ed-pass > div { border-top: 1px solid var(--lms-ed-line); padding-top: 12px; }
.lms-ed-pass .lms-ed-pass__v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.lms-ed-pass .lms-ed-pass__v small { font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-ed-ink3); margin-left: 2px; }
.lms-ed-pass .lms-ed-pass__k { font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-ed-ink3); margin-top: 4px; letter-spacing: .03em; }
/* 총점 반영 비율 — 밝은 톤 5색 */
.lms-ratio { margin-top: var(--lms-sp-4); }
.lms-ratio__title { font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-ed-ink3); margin-bottom: 8px; }
.lms-ratio__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--lms-ed-line2); }
.lms-ratio__seg { min-width: 3px; }
.lms-ratio__seg--1 { background: var(--lms-ed-r1); }
.lms-ratio__seg--2 { background: var(--lms-ed-r2); }
.lms-ratio__seg--3 { background: var(--lms-ed-r3); }
.lms-ratio__seg--4 { background: var(--lms-ed-r4); }
.lms-ratio__seg--5 { background: var(--lms-ed-r5); }
.lms-ratio__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--lms-fs-sm); color: var(--lms-ed-ink3); }
.lms-ratio__legend b { color: var(--lms-ed-ink); font-variant-numeric: tabular-nums; }
.lms-ratio__dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* ── 프로필 머리 (2026-08-10 — 마이페이지 개편, 미리보기 승인) ──
   기본 정보 5칸 세로 나열(~520px)을 이니셜 + 이름/아이디 + 소속 한 덩어리로 줄인다.
   lms-tutor와 비슷하지만 용도가 다르다(본인 계정의 얼굴 — 아바타가 더 크다). */
.lms-profile { display: flex; align-items: center; gap: var(--lms-sp-4); }
.lms-profile__ava {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lms-primary-soft); color: var(--lms-primary-ink);
  font-size: var(--lms-fs-xl); font-weight: 800;
}
.lms-profile__name { font-size: var(--lms-fs-lg); font-weight: 800; letter-spacing: -.3px; }
.lms-profile__sub { color: var(--lms-text-sub); font-size: var(--lms-fs-sm); margin-top: 2px; }

/* 아코디언 변형 — "Q" 마크는 FAQ 전용이다. 계정 설정처럼 묻고답하기가 아닌 접기에는
   마크를 지우고 쓴다(head 안에 아이콘을 직접 넣는다). */
.lms-accordion--plain .lms-accordion__head::before { content: none; }
.lms-accordion--plain .lms-accordion__head i { color: var(--lms-text-muted); }

/* R4 카드 안 카드 금지 — 카드 본문에 들어간 표는 제 테두리·그림자를 접는다(이중 테두리 방지).
   마이페이지 동의 표가 모바일에서 테두리 3겹으로 보이던 문제. 행 헤어라인은 표가 자체 유지. */
.lms-card__body .lms-table-wrap { border: 0; box-shadow: none; border-radius: 0; }

/* ── 정렬 줄 (2026-08-10) ────────────────────────────────────
   ⚠ 정렬 셀렉트 하나에 lms-filterbar(배경판 카드)를 쓰지 않는다 — 등급 필터 시절의 그릇이
     그대로 남아 375px에서 화면 한 단(~110px)을 먹었다. 건수와 정렬을 한 줄에 앉힌다. */
.lms-sortrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lms-sp-3);
  margin-bottom: var(--lms-sp-4);
}
.lms-sortrow__form { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── 필터 바 · 툴바 ──────────────────────────────────────── */
.lms-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--lms-sp-3); align-items: flex-end;
  padding: var(--lms-sp-4); margin-bottom: var(--lms-sp-5);
  background: var(--lms-grad-head), var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow), var(--lms-edge);
}
.lms-filterbar .lms-field { margin-bottom: 0; min-width: 150px; flex: 1 1 150px; }
.lms-filterbar .lms-btn { flex-shrink: 0; }
.lms-toolbar__count { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); align-self: center; }
.lms-toolbar__count b { color: var(--lms-text); font-variant-numeric: tabular-nums; }

/* ── 인증 전용 페이지 ────────────────────────────────────── */
.lms-authpage {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--lms-sp-5) var(--lms-sp-4);
  background: var(--lms-grad-wash), linear-gradient(170deg, var(--lms-surface) 0%, var(--lms-bg) 60%);
}
.lms-authpage__logo { display: flex; align-items: center; gap: 9px; margin-bottom: var(--lms-sp-5); font-size: var(--lms-fs-xl); font-weight: 800; color: #0b0f16; text-decoration: none; letter-spacing: -.5px; }
.lms-authpage__logo:hover { text-decoration: none; }
.lms-authpage__logo i { color: var(--lms-primary); }
.lms-authpage__logo img { height: 34px; width: auto; display: block; }
.lms-authpage .lms-authcard { margin: 0; width: 100%; }
.lms-authpage__back { margin-top: var(--lms-sp-4); font-size: var(--lms-fs-sm); color: var(--lms-text-sub); }
.lms-authpage__back:hover { color: var(--lms-primary-ink); text-decoration: none; }
.lms-authcard {
  max-width: 460px; margin: var(--lms-sp-6) auto;
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-xl); box-shadow: var(--lms-shadow-lg), var(--lms-edge);
  padding: var(--lms-sp-6);
}
.lms-authcard--wide { max-width: 560px; }
@media (max-width: 640px) { .lms-authcard { margin: var(--lms-sp-4) auto; padding: var(--lms-sp-5); } }
.lms-divider { display: flex; align-items: center; gap: 12px; color: var(--lms-text-muted); font-size: var(--lms-fs-xs); margin: var(--lms-sp-4) 0; }
.lms-divider::before, .lms-divider::after { content: ''; flex: 1; border-top: 1px solid var(--lms-border-soft); }

/* 폼 섹션 구분 — 긴 폼(회원가입 등)을 의미 단위로 끊는다. 제목 + 상단 헤어라인.
   ⚠ 콘솔(components.css)에 같은 이름·같은 뜻으로 있다. 시트는 독립이므로 양쪽에 둔다(UI표준 §5-1). */
.lms-formsec {
  margin: var(--lms-sp-5) 0 var(--lms-sp-3); padding-top: var(--lms-sp-4);
  border-top: 1px solid var(--lms-border-soft);
  font-size: var(--lms-fs-lg); font-weight: 700; color: var(--lms-text);
}
.lms-formsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lms-formsec__note { display: block; margin-top: 2px; font-size: var(--lms-fs-sm); font-weight: 400; color: var(--lms-text-sub); }
/* 라벨 안 보조 문구 — 굵기만 되돌린다 */
.lms-label__note { font-weight: 400; color: var(--lms-text-sub); }

/* ── 탭 · 서브내비 · 절차 · 아코디언 ─────────────────────── */
.lms-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lms-tabs__tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--lms-border); background: var(--lms-surface);
  color: var(--lms-text-sub); font-size: var(--lms-fs-sm); font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.lms-tabs__tab:hover { background: var(--lms-bg); text-decoration: none; }
.lms-tabs__tab--active { background: var(--lms-primary); border-color: var(--lms-primary); color: var(--lms-on-primary); }
.lms-tab-panel { display: none; }
.lms-tab-panel.is-active { display: block; }
/* 탭이 많아 한 줄을 넘길 때 — 줄바꿈 대신 가로 스크롤(.lms-subnav와 같은 처리).
   좁은 화면에서 탭 줄이 두 줄이 되면 본문이 밀려 내려가 첫 화면이 통째로 날아간다. */
.lms-tabs--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.lms-tabs--scroll .lms-tabs__tab { flex: none; }
/* 좁은 화면에서는 좌우 여백을 줄여 네 탭이 한 화면에 들어가게 한다 —
   스크롤이 가능해도 마지막 탭이 잘려 보이면 있는 줄 모른다(375px에서 26px 넘쳤다). */
@media (max-width: 640px) {
  .lms-tabs--scroll { gap: 6px; }
  .lms-tabs--scroll .lms-tabs__tab { padding: 0 12px; }
}

.lms-subnav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.lms-subnav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--lms-border); background: var(--lms-surface);
  color: var(--lms-text-sub); font-size: var(--lms-fs-sm); font-weight: 700; text-decoration: none;
}
.lms-subnav a:hover { background: var(--lms-bg); text-decoration: none; }
.lms-subnav a.is-active { background: var(--lms-primary); border-color: var(--lms-primary); color: var(--lms-on-primary); }

.lms-steps { counter-reset: step; display: grid; gap: 12px; }
.lms-steps li { position: relative; padding-left: 34px; line-height: 1.7; }
.lms-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 3px;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--lms-primary-soft); color: var(--lms-primary-ink);
  font-size: var(--lms-fs-xs); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.lms-accordion { border-bottom: 1px solid var(--lms-border-soft); }
.lms-accordion__head { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px 2px; font-weight: 700; list-style: none; }
.lms-accordion__head::-webkit-details-marker { display: none; }
.lms-accordion__head::before {
  content: "Q"; color: var(--lms-primary-ink); font-weight: 800; font-size: 12px;
  width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--lms-primary-soft);
  display: flex; align-items: center; justify-content: center;
}
.lms-accordion[open] .lms-accordion__head { color: var(--lms-primary-ink); }
.lms-accordion__body { padding: 0 2px 16px 32px; color: var(--lms-text-sub); font-size: var(--lms-fs-sm); line-height: 1.7; }

/* ── 표 ──────────────────────────────────────────────────── */
.lms-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--lms-surface); border: 1px solid var(--lms-border);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow);
}
.lms-table { width: 100%; border-collapse: collapse; font-size: var(--lms-fs-md); }
.lms-table th {
  text-align: left; padding: 11px 16px; font-size: var(--lms-fs-xs); font-weight: 700;
  color: var(--lms-text-sub); background: var(--lms-grad-head), var(--lms-bg);
  border-bottom: 1px solid var(--lms-border); white-space: nowrap; letter-spacing: .03em;
}
.lms-table td { padding: 13px 16px; border-bottom: 1px solid var(--lms-border-soft); vertical-align: middle; }
.lms-table tbody tr:last-child td { border-bottom: 0; }
.lms-table--zebra tbody tr:nth-child(even) { background: var(--lms-bg); }
.lms-table--hover tbody tr:hover { background: var(--lms-primary-soft); }
.lms-table__empty { text-align: center; color: var(--lms-text-sub); padding: var(--lms-sp-7) !important; }
.lms-num { font-variant-numeric: tabular-nums; text-align: right; }
/* 모바일: 셀 세로 꺾임 방지를 위한 최소 폭 → 컨테이너 가로 스크롤 */
@media (max-width: 640px) { .lms-table-wrap .lms-table { min-width: 560px; } }

/* 모바일에서 가로 스크롤 대신 **열을 덜어내는** 표 (2026-08-08).
   기본 규칙은 좁은 화면에서 표를 560px로 붙잡고 옆으로 스크롤시킨다. 열이 적은 표는 그래도
   되지만, 차시 목록은 7열이라 375px에서 절반이 잘리고 "완료(인정)"가 세 줄로 깨졌다.
   → 이 modifier를 붙인 표는 폭 제한을 풀고, .lms-col-sub 로 표시한 부차 열을 감춘다.
     감춘 내용은 제목 칸의 .lms-show-sm 요약으로 되살리므로 잃는 정보가 없다. */
/* 모바일에서 표를 **행 단위 블록으로 쌓는다** (2026-08-08).
   차시 목록은 7열이라 375px에서 절반이 잘리고 "완료(인정)"가 세 줄로 깨졌다.
   ⚠ 열을 감추는 것만으로는 안 좁아진다 — 표 안 colspan 행(진행평가·중간평가 안내)의
     min-content 가 감춘 열까지 걸쳐 폭을 붙잡는다(실측: 보이는 열 합 249px인데 표 413px).
   ⚠ table-layout:fixed 로 눌러 봤더니 제목이 과하게 접혀 **페이지가 두 배로 길어졌다**
     (12792 → 25364px). 좁은 표에 욱여넣는 방식 자체가 틀렸다.
   → 한 행을 카드처럼 쌓는다. 제목은 한 줄을 다 쓰고, 상태·버튼만 아래에 나란히 놓는다.
     감춘 열(.lms-col-sub)의 내용은 제목 칸의 .lms-show-sm 요약이 대신한다. */
@media (max-width: 640px) {
  .lms-table-wrap .lms-table--stack { min-width: 0; }
  .lms-table--stack thead { display: none; }
  .lms-table--stack .lms-col-sub { display: none; }
  .lms-table--stack tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: var(--lms-sp-3); row-gap: var(--lms-sp-2);
    align-items: center; padding: var(--lms-sp-3) var(--lms-sp-4);
    border-bottom: 1px solid var(--lms-border-soft);
  }
  .lms-table--stack tbody tr:last-child { border-bottom: 0; }
  /* 기본은 한 줄 전체 — 상태·버튼만 마지막 줄에 좌우로 나뉜다 */
  .lms-table--stack tbody td { display: block; grid-column: 1 / -1; padding: 0; border: 0; }
  .lms-table--stack tbody .lms-col-st  { grid-column: 1; justify-self: start; }
  .lms-table--stack tbody .lms-col-act { grid-column: 2; justify-self: end; }
  /* 제목 열이 DOM에서 첫 번째가 아닌 표를 위한 예외(예: 평가 구분 → 평가명 순).
     자동 배치는 order를 반영하므로 모바일에서만 제목을 첫 줄로 끌어올린다. */
  .lms-table--stack tbody .lms-col-title { order: -1; }
  .lms-table--stack .lms-btn { white-space: nowrap; }
  /* 평가 안내 행은 배경으로 구분되므로 좌측 강조선만 남긴다 */
  .lms-table--stack tbody .lms-row-eval td,
  .lms-table--stack tbody .lms-row-eval--muted td { border: 0; }
}

/* ── 모달 (모바일 = 바텀시트) ────────────────────────────── */
.lms-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; background: rgba(12,17,28,.55); padding: var(--lms-sp-4); }
.lms-modal-backdrop.is-open { display: flex; align-items: center; justify-content: center; }
.lms-modal {
  background: var(--lms-surface); border-radius: var(--lms-radius-xl);
  width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--lms-shadow-lg);
}
.lms-modal--sm { max-width: 440px; }
.lms-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--lms-border); font-weight: 700; font-size: var(--lms-fs-lg); }
.lms-modal__body { padding: 22px; }
.lms-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--lms-border); background: var(--lms-bg); border-radius: 0 0 var(--lms-radius-xl) var(--lms-radius-xl); }
@media (max-width: 640px) {
  .lms-modal-backdrop.is-open { align-items: flex-end; padding: 0; }
  .lms-modal { max-width: 100%; max-height: 92vh; border-radius: var(--lms-radius-xl) var(--lms-radius-xl) 0 0; }
  .lms-modal__foot { border-radius: 0; }
}

/* ── 토스트 ──────────────────────────────────────────────── */
.lms-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1100; padding: 12px 22px; border-radius: 999px;
  background: #111827; color: #fff; font-size: var(--lms-fs-sm); font-weight: 600;
  box-shadow: var(--lms-shadow-lg); max-width: calc(100vw - 32px);
}
.lms-toast--success { background: var(--lms-success); }
.lms-toast--warning { background: var(--lms-warning); }
.lms-toast--danger  { background: var(--lms-danger); }

/* ── 진도 ────────────────────────────────────────────────── */
.lms-progress { height: 8px; border-radius: 999px; background: var(--lms-border-soft); overflow: hidden; box-shadow: inset 0 1px 2px rgba(13,20,34,.09); }
.lms-progress__bar { height: 100%; border-radius: 999px; background: var(--lms-primary); transition: width .6s cubic-bezier(.4,0,.2,1); }
.lms-progress--done .lms-progress__bar { background: var(--lms-success); }
.lms-pct { font-size: var(--lms-fs-3xl); font-weight: 800; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; line-height: 1; }
.lms-pct small { font-size: var(--lms-fs-lg); margin-left: 1px; }

/* ── KPI 타일 ────────────────────────────────────────────── */
.lms-stat { background: var(--lms-surface); border: 1px solid var(--lms-border); border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow), var(--lms-edge); padding: var(--lms-sp-4) var(--lms-sp-5); }
.lms-stat__label { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lms-stat__label i { color: var(--lms-primary-ink); }
.lms-stat__value { font-size: var(--lms-fs-2xl); font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.lms-stat__delta { font-size: var(--lms-fs-xs); color: var(--lms-text-sub); margin-top: 4px; }
.lms-stat__delta--up { color: var(--lms-success); }
.lms-stat__delta--down { color: var(--lms-danger); }

/* 모바일에서 스탯 카드를 **한 블록으로 합친다** (2026-08-08).
   3장이 세로로 쌓이면 각 140px씩 420px — 본문에 닿기 전에 화면 하나를 다 쓴다.
   실기기에서 "진도율·차시·수료조건이 그냥 나열된 느낌"이라는 지적이 나온 지점이다.
   → 카드 경계를 없애 한 덩어리로 만들고, 각 항목을 '이름 좌 / 값 우' 한 줄로 눕힌다.
     값·보조설명은 그대로 남으므로 잃는 정보가 없다(420px → 약 150px). */
@media (max-width: 640px) {
  /* ⚠ `.lms-grid`가 파일 뒤쪽에서 gap을 다시 걸기 때문에 클래스 하나로는 못 이긴다 —
     같은 특정도(0,1,0)면 나중 선언이 이긴다. 두 클래스를 겹쳐 (0,2,0)으로 올린다. */
  .lms-grid.lms-stats-join { gap: 0; }
  .lms-stats-join .lms-stat {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline;
    column-gap: var(--lms-sp-3);
    padding: var(--lms-sp-2) var(--lms-sp-4);
    border-radius: 0; border-bottom: 0; box-shadow: none;
  }
  .lms-stats-join .lms-stat:first-child { border-radius: var(--lms-radius-lg) var(--lms-radius-lg) 0 0; }
  .lms-stats-join .lms-stat:last-child {
    border-radius: 0 0 var(--lms-radius-lg) var(--lms-radius-lg);
    border-bottom: 1px solid var(--lms-border); box-shadow: var(--lms-shadow);
  }
  .lms-stats-join .lms-stat__value { justify-self: end; margin-top: 0; font-size: var(--lms-fs-lg); }
  .lms-stats-join .lms-stat__delta,
  .lms-stats-join .lms-progress { grid-column: 1 / -1; margin-top: 6px; }
}

/* ── 웰컴 밴드 ───────────────────────────────────────────── */
/* lms-welcome(흰 웰컴 카드)은 폐기(2026-08-10) — 홈 웰컴 밴드가 카탈로그와 같은
   lms-masthead(짙은 판)로 통일됐다. member/home.php 참조. */

/* ── 퀵링크 ──────────────────────────────────────────────── */
.lms-quick, a.lms-card.lms-quick {
  display: flex; align-items: center; gap: var(--lms-sp-3);
  padding: var(--lms-sp-4) var(--lms-sp-5);
}
.lms-quick__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lms-primary-soft); color: var(--lms-primary-ink); font-size: 17px;
}
.lms-quick b { display: block; font-size: var(--lms-fs-md); }
.lms-quick .lms-text-sub, .lms-quick span { font-size: var(--lms-fs-sm); }

/* ── 교강사 ──────────────────────────────────────────────── */
.lms-tutor { display: flex; align-items: center; gap: var(--lms-sp-3); }
.lms-tutor__ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--lms-ink); color: #fff; font-weight: 800; font-size: var(--lms-fs-md); letter-spacing: -.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.lms-tutor__name { font-weight: 700; }
.lms-tutor__role { font-size: var(--lms-fs-sm); color: var(--lms-text-muted); }

/* ── 빈 상태 ─────────────────────────────────────────────── */
.lms-empty { text-align: center; padding: var(--lms-sp-8) var(--lms-sp-4); }
.lms-empty__icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto var(--lms-sp-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--lms-primary-soft); color: var(--lms-primary-ink); font-size: 24px;
}
.lms-empty__title { font-weight: 700; font-size: var(--lms-fs-lg); margin-bottom: 6px; }
.lms-empty__sub { color: var(--lms-text-sub); margin-bottom: var(--lms-sp-4); }

/* ── 임베드 (차시 콘텐츠 iframe) ─────────────────────────── */
.lms-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0f172a; border: 1px solid var(--lms-border); border-radius: var(--lms-radius-lg); overflow: hidden; }
.lms-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 모바일 — 강의가 화면의 1/5밖에 안 나오던 문제(2026-08-07).
   375px에서 main 좌우 16×2 + 카드 본문 24×2를 깎으면 295px, 16:9면 166px = 화면의 21%다.
   → 카드 본문 패딩까지 뚫어 **화면 폭을 다 쓴다.** 영상이 295→375px로 커진다.

   높이는 '영상 페이지에 딱 맞는 값' · '영상이 아닌 페이지까지 덮는 값' · '화면의 70%' 중
   **가장 큰 값**이다. 한 차시 안에 영상과 HTML(퀴즈·진단·정리)이 섞여 있는데 교차 출처라
   어느 쪽인지 알 수 없기 때문이다. 근거는 :root 의 --lms-content-bar / --lms-content-min 주석 참조.
   ⚠ 상자를 키워도 **영상은 안 커진다** — 375px 폭에서 16:9 영상은 211px가 최대고,
     남는 자리는 콘텐츠 배경이 된다. 그걸 알면서도 덮는 쪽을 택한 것이다(사용자 확정).
   콘텐츠가 높이를 알려 주기 시작하면 lesson.php 수신기가 인라인 height로 이 값을 덮는다. */
@media (max-width: 640px) {
  .lms-card--bleed .lms-embed {
    margin-inline: calc(-1 * var(--lms-sp-5));   /* = .lms-card__body 좌우 패딩 */
    /* ⚠ width:100%가 남아 있으면 음수 마진이 요소를 **넓히지 않고 옆으로 밀기만** 한다.
       auto로 풀어야 좌우로 늘어난다. */
    width: auto;
    border-radius: 0; border-left: 0; border-right: 0;
    aspect-ratio: auto;
    height: max(calc(100vw * 0.5625 + var(--lms-content-bar)), var(--lms-content-min));
    height: max(calc(100vw * 0.5625 + var(--lms-content-bar)), var(--lms-content-min), 70dvh);
    min-height: 240px;
  }
}
/* 가로로 눕힌 휴대폰처럼 **세로가 짧은** 화면 — 16:9를 그대로 두면 812×375에서 높이가
   393px가 되어 화면(375)보다 커진다. 강의를 보려고 스크롤을 해야 하는 상태가 된다. */
@media (max-height: 520px) {
  .lms-embed { aspect-ratio: auto; height: 82vh; height: 82dvh; min-height: 0; }
}

/* ── 몰입 모드 (플레이어를 화면 전체로) ──────────────────────
   ⚠ Fullscreen API를 쓰지 않는다. iOS Safari는 Element.requestFullscreen()을
     지원하지 않고(<video>에만 있다) 학습자 다수가 iOS다. Android용 native 경로를
     따로 두면 종료 처리가 갈라져 버그가 나므로, 양쪽에서 동일하게 도는 CSS 단일 경로로 간다.
   z-index 900 — 헤더 sticky(300) 위, 모달(1000)·토스트(1100) 아래.
     학습 완료 토스트가 몰입 위에 정상적으로 뜬다. */
/* ⚠ 선택자를 `.lms-embed.lms-embed--immersive`로 이중으로 쓴다. 모바일 풀블리드 규칙
   `.lms-card--bleed .lms-embed`(0,2,0)가 margin-inline: -24px를 걸고 있어서,
   단일 클래스(0,1,0)로는 이기지 못해 몰입 폭이 375가 아니라 423px가 된다(실측 확인).
   같은 특정도이되 **뒤에 선언**해 이긴다. */
.lms-embed.lms-embed--immersive {
  position: fixed; inset: 0; z-index: 900;
  width: 100vw; margin: 0;
  height: 100vh;                                  /* 폴백: dvh 미지원 */
  height: 100dvh;
  max-height: none; min-height: 0;
  aspect-ratio: auto;                             /* 16/9 해제 */
  border: 0; border-radius: 0;
  background: #0B1220;                            /* 콘텐츠 영상과 같은 톤 */
}
body.lms-front.is-immersive { overflow: hidden; }

/* ⚠ iframe에 **화면 전체**를 준다 (2026-08-08).
   콘텐츠 14페이지에는 영상만이 아니라 O/X 퀴즈 같은 HTML 페이지가 섞여 있다.
   전에는 '상단 바 + 16:9 영상' 높이로 잡고 세로 중앙에 뒀는데, 그 계산은 영상 전용이라
   **퀴즈 페이지가 잘렸다**(실기기 5/14 확인). 높이는 콘텐츠가 정하게 두고 위에서부터 채운다.
   맞바꿈: 영상 페이지는 아래에 콘텐츠 자체 배경(밝은색)이 남는다 — 콘텐츠가 배경을
   어둡게 하면 해소된다(docs/12 R4). 잘리는 쪽이 더 나쁘다고 보고 이 맞바꿈을 택했다. */
.lms-embed--immersive > .lms-embed__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* 떠 있는 컨트롤 — ⛔ **영상 위에 두지 않는다.**
   iOS는 인라인 재생 중 <video>의 네이티브 컨트롤을 브라우저 UI 계층에 그리고, 그 계층이
   페이지 콘텐츠보다 위에서 터치를 받는다. 그래서 영상 위에 얹으면 **보이는데 눌리지 않는다**
   (웹앱 실기기 확인 — Safari는 하단 툴바가 그 자리를 차지해 드러나지 않았다).
   iframe이 화면을 다 덮으므로 겹침은 불가피하다 → **영상이 없는 자리**를 고른다. */
.lms-embed__controls { display: none; }
/* 기본은 우하단 — 세로에서는 영상이 위쪽(약 257px)에만 있고, 넓은 가로(데스크톱)에서는
   영상이 폭을 다 채우는 대신 아래가 남는다. 두 경우 모두 아래가 안전하다. */
.lms-embed--immersive .lms-embed__controls {
  display: flex; align-items: center; gap: var(--lms-sp-2);
  position: absolute; z-index: 2;
  right: var(--lms-sp-3);
  bottom: calc(var(--lms-sp-4) + env(safe-area-inset-bottom, 0px));
  /* ⚠ 감싸는 알약 배경(어두운 판)은 없앴다(2026-08-08 실기기 확인).
     버튼이 둘일 때는 툴바로 읽혔지만 [닫기] 하나만 남고부터는 '검은 알약 안의 흰 버튼'이
     되어, 바깥 반지름(999px)과 버튼 반지름이 어긋나 고장 난 것처럼 보였다.
     대신 **버튼 자체를 떠 있는 컨트롤**로 만든다 — 알약 모양 + 그림자. */
}
.lms-embed__controls .lms-btn { min-height: 44px; }
.lms-embed--immersive .lms-embed__controls .lms-btn {
  border-radius: 999px;
  box-shadow: var(--lms-shadow-lg);
  /* backdrop-filter는 쓰지 않는다 — 이 프로젝트에서 이미 문제가 된 속성이다 */
}

/* 가로 — 라벨을 감춰 아이콘만 남긴다(폭 ~180px → ~56px). 뜻은 title/aria-label이 지킨다. */
@media (orientation: landscape) {
  .lms-embed--immersive .lms-embed__controls .lms-btn { min-width: 44px; padding-inline: 10px; }
  .lms-embed--immersive .lms-embed__controls .lms-btn-label { display: none; }
}
/* ⚠ **눕힌 휴대폰만 예외** — 빈 자리가 화면 크기에 따라 다르다.
   콘텐츠는 남는 높이에 16:9로 영상을 맞추므로(shell.js sizeVod)
     · 812×375 : 높이가 모자라 영상이 540×304로 좁아진다 → 좌우 136px씩 레터박스가 생기고
                 **영상이 화면 아래까지 내려온다** → 우하단이면 영상 위에 얹힌다
     · 1280×900: 폭이 다 차서 1280×720 → 좌우 여백은 없지만 **아래 109px가 남는다** → 우하단 안전
   그래서 좁은 가로에서만 오른쪽 레터박스 세로 중앙으로 옮긴다. */
@media (orientation: landscape) and (max-width: 900px) {
  .lms-embed--immersive .lms-embed__controls {
    right: var(--lms-sp-2); top: 50%; bottom: auto; transform: translateY(-50%);
    flex-direction: column;
  }
}

/* ── 학습 흐름 ───────────────────────────────────────────── */
.lms-next {
  display: flex; align-items: center; gap: var(--lms-sp-4); flex-wrap: wrap;
  padding: var(--lms-sp-5);
  background: var(--lms-grad-wash), var(--lms-surface);
  border: 1px solid var(--lms-border); border-left: 3px solid var(--lms-primary);
  border-radius: var(--lms-radius-lg); box-shadow: var(--lms-shadow-2), var(--lms-edge);
}
.lms-next__icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lms-primary); color: var(--lms-on-primary); font-size: 18px;
  box-shadow: var(--lms-shadow-2), inset 0 1px 0 rgba(255,255,255,.22);
}
.lms-next--done { border-left-color: var(--lms-success); }
.lms-next--done .lms-next__icon { background: var(--lms-success); color: #fff; }
.lms-next__body { flex: 1 1 240px; min-width: 0; }
.lms-next__label { font-size: var(--lms-fs-xs); font-weight: 800; color: var(--lms-primary-ink); letter-spacing: .06em; }
.lms-next--done .lms-next__label { color: var(--lms-success); }
.lms-next__title { font-size: var(--lms-fs-xl); font-weight: 800; letter-spacing: -.3px; margin-top: 2px; }
.lms-next__desc { font-size: var(--lms-fs-sm); color: var(--lms-text-sub); margin-top: 3px; }
.lms-next__cta { flex: none; margin-left: auto; }
@media (max-width: 640px) { .lms-next__cta { margin-left: 0; width: 100%; } .lms-next__cta .lms-btn { width: 100%; } }

.lms-flow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lms-sp-2) 0; }
.lms-flow__step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px 0 0; margin-right: 10px;
  font-size: var(--lms-fs-xs); font-weight: 700; color: var(--lms-text-muted);
  border-right: 1px solid var(--lms-border); text-decoration: none;
}
.lms-flow__step:last-child { border-right: 0; margin-right: 0; }
a.lms-flow__step:hover { color: var(--lms-primary-ink); text-decoration: none; }
.lms-flow__step--done { color: var(--lms-success); }
.lms-flow__step--current { color: var(--lms-primary-ink); }
.lms-flow__sep { align-self: center; color: var(--lms-text-muted); font-size: 10px; }

/* 수강 카드 — 분야색 좌측 스파인 */
.lms-enroll-card { border-left: 3px solid var(--lms-border); }
.lms-enroll-card--law { border-left-color: var(--lms-primary); }
.lms-enroll-card--safety { border-left-color: var(--lms-success); }
.lms-enroll-card--skill { border-left-color: var(--lms-warning); }

/* 평가 행 강조 (과정 학습 화면) */
.lms-row-eval { background: var(--lms-primary-soft) !important; }
.lms-row-eval td { border-top: 2px solid var(--lms-primary); border-bottom: 2px solid var(--lms-primary); }
.lms-row-eval--muted { background: var(--lms-bg) !important; }
.lms-row-eval--muted td { border-top: 1px dashed var(--lms-border); border-bottom: 1px dashed var(--lms-border); }

/* ── 정의 목록 (레일 요약) ───────────────────────────────── */
.lms-dl { display: grid; margin: 0; font-size: var(--lms-fs-sm); }
.lms-dl__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lms-sp-3); padding: 9px 0; border-bottom: 1px solid var(--lms-border-soft); }
.lms-dl__row:last-child { border-bottom: 0; }
.lms-dl__k { color: var(--lms-text-sub); flex: none; }
.lms-dl__v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 그리드 ──────────────────────────────────────────────── */
.lms-grid { display: grid; gap: var(--lms-sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .lms-grid--2, .lms-grid--3, .lms-grid--4, .lms-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .lms-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .lms-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lms-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .lms-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── 푸터 (짙은 다단) ────────────────────────────────────── */
.lms-front-footer { background: var(--lms-ink); color: rgba(255,255,255,.56); font-size: var(--lms-fs-sm); border-top: 3px solid var(--lms-primary); }
.lms-front-footer__inner { max-width: var(--lms-container); margin: 0 auto; padding: var(--lms-sp-7) var(--lms-sp-6) var(--lms-sp-5); display: grid; gap: 6px; }
.lms-front-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--lms-sp-6); padding-bottom: var(--lms-sp-6); border-bottom: 1px solid rgba(255,255,255,.11); }
@media (min-width: 640px)  { .lms-front-footer__cols { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1024px) { .lms-front-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.lms-front-footer__brand { display: flex; align-items: center; gap: 9px; font-size: var(--lms-fs-lg); font-weight: 800; color: #fff; letter-spacing: -.5px; margin-bottom: var(--lms-sp-3); }
.lms-front-footer__brand .lms-logomark { background: #fff; color: var(--lms-ink); box-shadow: none; }
.lms-front-footer__tel { display: block; font-size: var(--lms-fs-2xl); font-weight: 800; color: #fff; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-top: var(--lms-sp-4); }
.lms-front-footer h3 { font-size: var(--lms-fs-sm); font-weight: 700; color: #fff; margin: 0 0 var(--lms-sp-3); }
.lms-front-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lms-front-footer a { color: rgba(255,255,255,.6); }
.lms-front-footer a:hover { color: #fff; text-decoration: none; }
.lms-front-footer__links { display: flex; flex-wrap: wrap; gap: var(--lms-sp-4); padding-top: var(--lms-sp-5); margin-bottom: var(--lms-sp-3); }
.lms-front-footer__links a { color: rgba(255,255,255,.86); font-weight: 700; }
.lms-front-footer__legal { display: grid; gap: 4px; font-size: var(--lms-fs-xs); color: rgba(255,255,255,.42); line-height: 1.75; }
/* 시스템 제공 고지 — 고객사 명의 사이트(064)에서 '학습관리시스템 운영 · 주식회사프라페' 한 줄.
   구분선으로 운영 사업자(고객사) 표기와 떼어 둔다(글자 대비는 법정표기와 같게 유지) */
.lms-front-footer__system { margin-top: var(--lms-sp-1); padding-top: var(--lms-sp-1); border-top: 1px solid rgba(255,255,255,.08); }
/* 축약 푸터 — 탐색 링크를 걷어낸 만큼 여백도 줄인다(법정표기는 그대로 남는다) */
.lms-front-footer--compact .lms-front-footer__inner { padding-top: var(--lms-sp-5); padding-bottom: var(--lms-sp-4); }
/* 모바일은 **전 화면에서** 축약 푸터로 통일한다 (2026-08-08).
   4단 탐색 메뉴가 세로로 풀리면 화면 하나를 통째로 차지한다 — 실기기에서 과정 학습 화면의
   푸터가 본문보다 길었다. 같은 링크는 GNB(햄버거)에 있으므로 길을 잃지 않는다.
   ⛔ 법정표기와 약관·정책 링크는 남긴다 — 전자상거래법·인정요건 표기 의무다. */
@media (max-width: 640px) {
  .lms-front-footer__cols { display: none; }
  .lms-front-footer__inner { padding-top: var(--lms-sp-5); padding-bottom: var(--lms-sp-4); }
  .lms-front-footer__links { padding-top: 0; }
}

/* ── 유틸리티 ────────────────────────────────────────────── */
/* 모바일에서만 숨김 — 좁은 화면에서 중복·부차 요소를 덜어낼 때. 데스크톱은 그대로 둔다. */
@media (max-width: 640px) { .lms-hide-sm { display: none !important; } }
/* 모바일에서만 보임 — 좁은 화면에서 숨긴 열의 내용을 다른 자리에 요약해 줄 때 */
.lms-show-sm { display: none; }
@media (max-width: 640px) { .lms-show-sm { display: block; } }
/* 인라인용 — 문장 중간에 끼워 넣는 모바일 전용 조각(예: "3회차 · 2026-07-01 ~ …")에 쓴다.
   block 인 .lms-show-sm 을 쓰면 줄이 갈라진다. */
.lms-show-sm-i { display: none; }
@media (max-width: 640px) { .lms-show-sm-i { display: inline; } }
.lms-flex { display: flex; align-items: center; gap: 8px; }
.lms-flex--between { justify-content: space-between; }
.lms-flex--wrap { flex-wrap: wrap; }
.lms-mb-1 { margin-bottom: var(--lms-sp-1); } .lms-mb-2 { margin-bottom: var(--lms-sp-2); }
.lms-mb-3 { margin-bottom: var(--lms-sp-3); } .lms-mb-4 { margin-bottom: var(--lms-sp-4); }
.lms-mb-5 { margin-bottom: var(--lms-sp-5); } .lms-mb-6 { margin-bottom: var(--lms-sp-6); }
.lms-mt-1 { margin-top: var(--lms-sp-1); } .lms-mt-2 { margin-top: var(--lms-sp-2); }
.lms-mt-3 { margin-top: var(--lms-sp-3); } .lms-mt-4 { margin-top: var(--lms-sp-4); }
.lms-mt-5 { margin-top: var(--lms-sp-5); } .lms-mt-6 { margin-top: var(--lms-sp-6); }
.lms-text-sm { font-size: var(--lms-fs-sm); }
.lms-text-sub { color: var(--lms-text-sub); }
.lms-text-muted { color: var(--lms-text-muted); }
.lms-text-danger { color: var(--lms-danger); }
.lms-text-center { text-align: center; }
.lms-text-right { text-align: right; }
.lms-measure { max-width: var(--lms-measure); }

/* ── 문서 본문(관리자가 작성한 서식 HTML) — 약관·개인정보처리방침·이용 안내·공지 ──
   html_sanitize()가 class 속성을 전부 제거하므로(XSS 방어) 관리자 본문은 **태그만 남는다**.
   그래서 클래스가 아니라 태그 선택자로 읽을 수 있게 만든다. 이게 없으면 표가 테두리도 여백도
   없이 붙어 나온다(실제로 개인정보처리방침이 그렇게 보였다 — 2026-08-07).
   폭: 표가 들어가는 문서라 42em(--lms-measure)는 좁아 별도 상한을 둔다. */
.lms-doc { max-width: 68em; }
.lms-doc .lms-card__body > :first-child { margin-top: 0; }
.lms-doc h2, .lms-doc h3, .lms-doc h4 {
  margin: var(--lms-sp-6) 0 var(--lms-sp-2); font-weight: 700; color: var(--lms-text);
  line-height: 1.4;
}
.lms-doc h2 { font-size: var(--lms-fs-xl); }
.lms-doc h3 { font-size: var(--lms-fs-lg); }
.lms-doc h4 { font-size: var(--lms-fs-md); }
.lms-doc p { margin: 0 0 var(--lms-sp-3); line-height: 1.75; }
.lms-doc ul, .lms-doc ol { margin: 0 0 var(--lms-sp-3) var(--lms-sp-5); line-height: 1.75; }
.lms-doc ul { list-style: disc; }
.lms-doc ol { list-style: decimal; }
.lms-doc li { margin-bottom: var(--lms-sp-1); }
.lms-doc blockquote {
  margin: 0 0 var(--lms-sp-3); padding: var(--lms-sp-2) var(--lms-sp-4);
  border-left: 3px solid var(--lms-border); color: var(--lms-text-sub);
}
.lms-doc hr { border: 0; border-top: 1px solid var(--lms-border-soft); margin: var(--lms-sp-5) 0; }
/* 표 — 좁은 화면에서 가로 스크롤 (본문이 옆으로 삐져나가지 않게) */
.lms-doc table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--lms-sp-4);
  font-size: var(--lms-fs-md); display: block; overflow-x: auto;
}
.lms-doc th, .lms-doc td {
  border: 1px solid var(--lms-border); padding: var(--lms-sp-2) var(--lms-sp-3);
  text-align: left; vertical-align: top; line-height: 1.6;
}
.lms-doc th { background: var(--lms-bg); font-weight: 700; white-space: nowrap; }
.lms-doc a { color: var(--lms-primary); text-decoration: underline; }
@media (max-width: 640px) {
  .lms-doc th, .lms-doc td { padding: var(--lms-sp-2); font-size: var(--lms-fs-sm); }
}
.lms-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lms-filterbar__form { flex: 1; align-items: flex-end; }
.lms-mb-0 { margin-bottom: 0; }
/* 푸터 영업시간 등 보조 한 줄 — 전화번호 바로 아래 붙는 작은 글씨(2026-08-07) */
.lms-front-footer__hours { margin: 4px 0 0; font-size: var(--lms-fs-xs); }
.lms-curric-wrap { padding-top: var(--lms-sp-2); padding-bottom: var(--lms-sp-2); }
.lms-price-lg { font-size: var(--lms-fs-3xl); font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.2; }

/* 칩 상태 변형 — 인라인 색 지정을 대체 (색 단독 전달 금지: 항상 아이콘·텍스트 병행) */
.lms-chip--success { color: var(--lms-success); }
.lms-chip--success i { color: var(--lms-success); }
.lms-chip--warning { color: var(--lms-warning); }
.lms-chip--warning i { color: var(--lms-warning); }
.lms-chip--muted { color: var(--lms-text-muted); }
.lms-pct-sm { font-size: var(--lms-fs-lg); }
.lms-mt-0 { margin-top: 0; }

/* ── I-G 유틸 (인라인 style 대체) ────────────────────────── */
.lms-prewrap { white-space: pre-wrap; }
.lms-nowrap { white-space: nowrap; }
.lms-gap-2 { gap: var(--lms-sp-2); } .lms-gap-3 { gap: var(--lms-sp-3); } .lms-gap-4 { gap: var(--lms-sp-4); }
.lms-w-40 { width: 40%; } .lms-w-min { width: 1%; white-space: nowrap; }
.lms-icon-primary { color: var(--lms-primary-ink); }
.lms-divider-b { border-bottom: 1px solid var(--lms-border); padding-bottom: var(--lms-sp-3); }
.lms-inline-form { display: inline; }
/* 콘솔(base.css)과 같은 이름·같은 뜻으로 맞춘 유틸 — 학습자 화면에서도 쓰인다(2026-08-07).
   ⚠ 시트가 분리돼 있어 한쪽에만 넣으면 다른 쪽에서 **조용히 무효**가 된다.
     실제로 응시 화면 보기 목록(exam/take.php)이 flex--col 미정의로 가로로 늘어섰다. */
.lms-flex--col { flex-direction: column; align-items: stretch; gap: 10px; }
.lms-m-0 { margin: 0; }
.lms-w-280 { max-width: 280px; }
.lms-pre { white-space: pre-wrap; margin: 0; }
.lms-stack { display: flex; flex-direction: column; }
.lms-authcard__title { font-size: var(--lms-fs-xl); }
.lms-authcard__found { font-size: var(--lms-fs-xl); font-weight: 800; }
.lms-w-420 { max-width: 420px; }

/* ── 훈련생 유의사항 그림 카드 (front_caution_block — 2026-10-11) ─────────────
   9개 항목을 학습·평가·인증 세 묶음으로 나눠 아이콘 + 핵심 수치 배지 + 설명으로 보인다.
   항목 색(tone)은 상태색 토큰만 쓴다: 학습=primary · 평가=warning · 인증=success · 불이익=danger */
.lms-caution + .lms-caution { margin-top: var(--lms-sp-5); }
.lms-caution__group {
  display: flex; align-items: center; gap: var(--lms-sp-2);
  margin: 0 0 var(--lms-sp-3); font-size: var(--lms-fs-sm); font-weight: 700; color: var(--lms-text-sub);
}
.lms-caution__group i { color: var(--lms-text-muted); }
.lms-caution__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--lms-sp-3);
}
.lms-caution__item {
  --lms-tone: var(--lms-primary-ink); --lms-tone-soft: var(--lms-primary-soft);
  display: flex; gap: var(--lms-sp-3); align-items: flex-start;
  padding: var(--lms-sp-4); background: var(--lms-surface);
  border: 1px solid var(--lms-border-soft); border-top: 3px solid var(--lms-tone);
  border-radius: var(--lms-radius-lg);
}
.lms-caution__item--warning { --lms-tone: var(--lms-warning); --lms-tone-soft: var(--lms-warning-soft); }
.lms-caution__item--success { --lms-tone: var(--lms-success); --lms-tone-soft: var(--lms-success-soft); }
.lms-caution__item--danger  { --lms-tone: var(--lms-danger);  --lms-tone-soft: var(--lms-danger-soft); }
.lms-caution__icon {
  flex: none; width: var(--lms-touch); height: var(--lms-touch); border-radius: 50%;
  display: grid; place-items: center; font-size: var(--lms-fs-lg);
  background: var(--lms-tone-soft); color: var(--lms-tone);
}
.lms-caution__text { min-width: 0; }
.lms-caution__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lms-sp-2); margin-bottom: var(--lms-sp-1); }
.lms-caution__key {
  padding: 2px var(--lms-sp-2); border-radius: 999px;
  font-size: var(--lms-fs-xs); font-weight: 800; background: var(--lms-tone-soft); color: var(--lms-tone);
}
.lms-caution__text p { margin: 0; font-size: var(--lms-fs-sm); line-height: 1.6; color: var(--lms-text-sub); word-break: keep-all; overflow-wrap: anywhere; }