/* 뉴스오매틱 상세 전용 (news.html)
   공용 style.css 다음에 불러옵니다.

   bookr.css 에서 필요한 블록만 옮겨 nm- 프리픽스로 바꾼 파일입니다.
   bookr.css / style.css / main.js 는 수정하지 않았습니다.

   main.js 가 클래스명을 하드코딩한 두 곳은 HTML 쪽에서 우회합니다.
     - 동작 줄이기 시 영상 정지 → HTML 에 class="nm-video bk-video" 함께 붙임
     - 숫자 카운트업        → HTML 에 class="bk-count" 그대로 사용 (CSS 없음)
   ------------------------------------------------------------------ */

/* 자동 재생 영상 — 이미지 자리와 같은 규격으로 놓입니다.
   파일이 없으면 아무것도 그려지지 않으니 자리만 비어 보입니다. */
.nm-video {
  position: relative;
  width: 100%;
  aspect-ratio: var(--v-ratio, 4 / 3);
  border-radius: var(--radius);
  border: 1px solid var(--shelf);
  background: var(--brand-soft);
  overflow: hidden;
}

.nm-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 기기에서 '동작 줄이기' 를 켠 사용자에게는 움직임을 멈춥니다.
   (실제 정지는 스크립트가 처리하고, 여기서는 표시만 정리합니다) */
@media (prefers-reduced-motion: reduce) {
  .nm-video video {
    /* 첫 화면 이미지가 보이도록 둡니다 */
  }}

/* 상품 상세의 히어로 — 배경 사진과 높이만 바꾸고 나머지는 메인과 동일합니다.
   (막 · 글 영역 620px 는 .home-hero 에서 물려받습니다)
   태블릿이 오른쪽에 있어 오른쪽 기준으로 자릅니다. */
.home-hero--news {
  background-color: #0d2c52;
  background-image: url("../img/hero-sm.jpg");
  /* 좁은 화면에서는 가로로 긴 사진의 70% 넘게 잘려 나갑니다.
     오른쪽 끝(right)에 맞추면 손과 태블릿 테두리만 남으므로
     태블릿 화면이 들어오도록 78% 지점을 기준으로 잡습니다. */
  background-position: 78% center;
}

/* 높이 632px 고정.
   style.css 의 .home-hero 는 760px 이상 520px, 1200px 이상 600px 인데
   news.css 가 뒤에 실리므로 이 한 줄이 두 값을 모두 덮습니다.
   좁은 화면(760px 미만)은 글 길이에 맞춰 늘어나도록 그대로 둡니다. */
@media (min-width: 760px) {
  .home-hero--news {
    background-image: url("../img/hero-lg.jpg");
    background-position: right center;
    min-height: 632px;
  }
}

/* 1200px 이상에서 공용 .home-hero 가 위아래 여백을 88px 로 키웁니다.
   그러면 내용 높이에 176px 이 더해져 632px 을 넘어섭니다.
   여백을 좁은 화면과 같게 되돌려 min-height 632px 이 실제 높이가 되도록 합니다. */
@media (min-width: 1200px) {
  .home-hero--news {
    padding-block: 56px 64px;
  }
}

/* 단계 카드 (왜 · 학습 흐름) */

/* 스토리 — 이미지 + 항목 */
.nm-story {
  display: grid;
  gap: 32px;
}

.nm-story__points {
  display: grid;
  gap: 22px;
  align-content: center;
}

.nm-story__point-title {
  font-size: 20px;
  color: var(--brand);
}

.nm-story__point-text {
  margin-top: 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.nm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.nm-tag {
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 15px;
  font-weight: 700;
}

/* 레벨 카드 상단 이미지 */

@media (min-width: 900px) {
  .nm-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }}

/* 숫자 */
.nm-numbers {
  display: grid;
  gap: 0;
}

.nm-number {
  display: grid;
  gap: 4px;
  padding-block: 22px;
  border-top: 1px solid var(--shelf);
}

.nm-number__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.nm-number__label {
  color: var(--muted);
  font-size: 17px;
}

@media (min-width: 700px) {
  .nm-numbers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
  }}

/* 콘텐츠 4종 — 좌우 교차 */
.nm-contents {
  display: grid;
  gap: 20px;
}

.nm-content {
  display: grid;
  gap: 24px;
  padding: 28px 26px;
  border: 1px solid var(--shelf);
  border-radius: var(--radius-lg);
  background: #fff;
}

.nm-content__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nm-content__title {
  margin-top: 12px;
  font-size: clamp(22px, 4.4vw, 27px);
  color: var(--brand);
}

.nm-content__text {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.nm-content__points {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--shelf);
}

.nm-content__point {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.nm-content__point::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--cta);
}

@media (min-width: 900px) {
  .nm-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 44px;
    padding: 40px;
  }

  .nm-content--reverse .nm-content__body {
    order: 2;
  }

  .nm-content--reverse .nm-content__figure {
    order: 1;
  }}

/* 레벨 */

.nm-note {
  margin-top: 24px;
  padding: 28px 26px;
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.nm-note__title {
  font-size: 20px;
  color: var(--brand);
}

.nm-note__text {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
}

/* 수상 · 인증 */
.nm-awards {
  display: grid;
  gap: 14px;
}

.nm-award {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  background: #fff;
}

.nm-award__name {
  font-size: 18px;
  color: var(--brand);
}

.nm-award__detail {
  color: var(--muted);
  font-size: 15px;
}

@media (min-width: 700px) {
  .nm-awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }}

@media (min-width: 1024px) {
  .nm-awards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }}

/* --- 앱 다운로드 --------------------------------------------------------
   왼쪽에 제목 · 설명 · 스토어 배지, 오른쪽에 기기 이미지.
   배지 이미지가 없으면 글자만 있는 외곽선 버튼으로 나옵니다.            */

.nm-dl {
  display: grid;
  gap: 32px;
  align-items: center;
}

.nm-dl__title {
  font-family: var(--font-display);
  font-size: clamp(27px, 5vw, 39px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--brand);
  margin: 14px 0 0;
}

.nm-dl__text {
  margin-top: 12px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.75;
}

.nm-dl__figure img {
  width: 100%;
  aspect-ratio: var(--v-ratio, 16 / 9);
  object-fit: contain;
  display: block;
}

@media (min-width: 900px) {
  .nm-dl {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
  }}

/* --- 마지막 구매 · 체험 -------------------------------------------------- */

.nm-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.nm-cta__title {
  font-family: var(--font-display);
  font-size: clamp(29px, 5.4vw, 43px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.3;
  color: var(--brand);
}

.nm-cta__text {
  max-width: 48ch;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.8;
}

.nm-cta .btn-group {
  margin-top: 26px;
}

  /* ── LINEUP · 3 × 3 그리드 ── */

  

  

  .nm-lu-video { max-width: 760px; margin: 0 auto 36px; }
  .nm-lu-video .nm-video { width: 100%; }

  /* 숫자 밴드 */
  .section--band .container > .nm-numbers {
    background: var(--brand); border-radius: var(--radius-lg); overflow: hidden;
    column-gap: 0; }
  .section--band .nm-number {
    justify-items: center; text-align: center; padding: 44px 16px;
    border-top: 0; border-right: 1px solid rgba(255, 255, 255, 0.22); }
  .section--band .nm-number:last-child { border-right: 0; }
  .section--band .nm-number__value { color: #fff; font-variant-numeric: tabular-nums; }
  .section--band .nm-number__label { color: rgba(255, 255, 255, 0.82); }
  @media (max-width: 760px) {
    .section--band .nm-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
    .section--band .nm-number:nth-child(2n) { border-right: 0; }
    .section--band .nm-number:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }}

  /* AWARDS — 한 판 · 칸선 구분 · 정사각 로고 자리 */
  .nm-awards { gap: 0; border: 1px solid var(--shelf); border-radius: var(--radius);
    overflow: hidden; background: #fff; }
  .nm-award { justify-items: center; text-align: center; gap: 12px; padding: 30px 20px;
    border: 0; border-right: 1px solid var(--shelf); border-bottom: 1px solid var(--shelf);
    border-radius: 0; }
  .nm-award:nth-child(3n) { border-right: 0; }
  .nm-award:nth-last-child(-n + 3) { border-bottom: 0; }
  .nm-award__slot { display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 240px; aspect-ratio: 3 / 1; }
  .nm-award__slot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; }

  .nm-award__slot { border: 1px solid var(--shelf); border-radius: 8px; }
  .nm-award__slot:has(img) { border: 0; }
  .nm-award__name { font-size: 15px; }
  .nm-award__detail { font-size: 13px; }
  /* 원본 브레이크포인트(700 / 1024)에 맞춰 칸선만 정리합니다 */
  @media (max-width: 699px) {
    .nm-award { border-right: 0; }
    .nm-award:last-child { border-bottom: 0; }
    .nm-award:nth-last-child(-n + 3) { border-bottom: 1px solid var(--shelf); }}

  @media (min-width: 700px) and (max-width: 1023px) {
    .nm-award:nth-child(3n) { border-right: 1px solid var(--shelf); }
    .nm-award:nth-child(2n) { border-right: 0; }
    .nm-award:nth-last-child(-n + 3) { border-bottom: 1px solid var(--shelf); }
    .nm-award:nth-last-child(-n + 2) { border-bottom: 0; }}

  /* REVIEWS */
  .nm-rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; grid-auto-rows: 1fr; }
  .nm-rv { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px;
    background: #fff; border: 1px solid var(--shelf); border-radius: var(--radius); }
  .nm-rv-top { display: flex; align-items: center; gap: 8px; }
  .nm-rv-stars { display: inline-flex; gap: 2px; color: #f5a623; }
  .nm-rv-score { font-size: 15px; font-weight: 800; color: var(--ink); }

  .nm-rv-body { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.75;
    word-break: keep-all; }
  .nm-rv-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin-top: auto; padding-top: 13px; border-top: 1px solid var(--shelf); }
  .nm-rv-nick { font-size: 15px; font-weight: 700; color: var(--ink); }
  .nm-rv-meta { font-size: 14px; color: var(--muted); }
  .nm-rv-sum { display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap; margin: 0 auto 34px; padding: 15px 28px; border-radius: 999px;
    background: var(--brand-soft); width: fit-content; }
  .nm-rv-sum__star { display: inline-flex; color: #f5a623; transform: scale(1.5); margin-right: 4px; }
  .nm-rv-sum__score { font-size: 28px; font-weight: 800; color: var(--brand); line-height: 1; }
  .nm-rv-sum__text { font-size: 16px; color: var(--brand-ink); }
  .nm-rv-more { display: grid; justify-items: center; gap: 10px; margin-top: 30px; }
  .nm-rv-more .btn { gap: 9px; }
  .nm-rv-more__note { margin: 0; font-size: 14px; color: var(--muted); }
  @media (max-width: 1000px) { .nm-rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

  @media (max-width: 700px) { .nm-rv-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }}

  /* CTA — 사진 배경 + 남색 오버레이 (히어로와 동일 처리) */
  .section--cta .nm-cta__title { color: #fff; }
  .section--cta .nm-cta__text { color: rgba(255, 255, 255, 0.86); }
  .nm-cta__biz { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 10px 18px; width: 100%; max-width: 760px;
    margin-top: 44px; padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.78); font-size: 16px; }
  .nm-cta__bizlink { display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 18px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px;
    color: #fff; font-weight: 800; text-decoration: none; }
  .nm-cta__bizlink:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
  .nm-cta__bizlink svg { transition: transform 0.18s; }
  .nm-cta__bizlink:hover svg { transform: translateX(3px); }

  /* 아직 파일이 없는 이미지 자리 — 파일을 넣으면 그대로 표시됩니다 */

  
/* DOWNLOAD — 넓은 화면에서는 다른 섹션 head↔본문 간격(44px)과 동일하게 */

/* ==========================================================================
   뉴스오매틱 전용 추가 컴포넌트
   학원용 랜딩의 섹션 구조를 bookr 컴포넌트 규격에 맞춰 옮긴 것들입니다.
   ========================================================================== */

/* --- 이미지 · 영상 자리 ---------------------------------------------------
   파일을 아직 안 넣은 자리에 점선 도형과 파일명 · 권장 크기를 보여 줍니다.
   파일을 넣으면 그림이 위에 덮여 라벨이 가려집니다.                       */

.nm-frame {
  position: relative;
  aspect-ratio: var(--f-ratio, 16 / 10);
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  background: var(--brand-soft);
  overflow: hidden;
}

.nm-frame::before {
  content: attr(data-file) "\A" attr(data-size);
  white-space: pre;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: #7d95b5;
  word-break: break-all;
}

.nm-frame > img,
.nm-frame > video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nm-video video { position: relative; z-index: 1; }

/* --- 논픽션 리딩 효과 6장 ------------------------------------------------ */

.nm-why { display: grid; gap: 16px; }

.nm-why-card {
  display: grid; gap: 9px; align-content: start;
  padding: 28px 26px;
  border: 1px solid var(--shelf); border-radius: var(--radius-lg);
  background: #fff;
}

.nm-why-card__title { font-size: 21px; color: var(--brand); }

.nm-why-card__text { color: var(--muted); font-size: 16px; line-height: 1.75; }

@media (min-width: 700px) { .nm-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (min-width: 1024px) { .nm-why { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }}

/* --- 콘텐츠 구성: 기능 목록 -------------------------------------------- */

.nm-cf { display: grid; gap: 14px; align-content: start; margin-top: 36px; }

.nm-cf-item {
  padding: 22px 24px;
  border: 1px solid var(--shelf); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: #fff;
}

.nm-cf-item__title { font-size: 18px; color: var(--brand); }

.nm-cf-item__text { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.7; }

@media (min-width: 900px) {
  .nm-cf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }}

/* --- 원어민 표현 비교표 -------------------------------------------------- */

.nm-atv {
  max-width: 850px; margin: 28px auto 0;
  border: 1px solid var(--shelf);
  border-radius: var(--radius); overflow: hidden; background: #fff;
}

.nm-atv__head,
.nm-atv__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: center; gap: 10px; padding: 14px 20px;
}

.nm-atv__head { background: var(--brand-soft); }

.nm-atv__col { font-size: 14px; font-weight: 700; }
.nm-atv__col--muted { color: var(--muted); }
.nm-atv__col--on { color: var(--brand); }

.nm-atv__row { border-top: 1px solid var(--shelf); font-size: 16px; }
.nm-atv__basic { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--shelf-dark); }
.nm-atv__arrow { text-align: center; color: var(--brand); font-weight: 800; }
.nm-atv__native { color: var(--ink); font-weight: 800; }

.nm-atv__note {
  padding: 26px 28px; border-top: 1px solid var(--shelf);
  background: #fcfcfd; color: var(--brand-ink);
  text-align: center; font-size: 18px; font-weight: 700; line-height: 1.75;
}

@media (max-width: 620px) {
  .nm-atv__head { display: none; }
  .nm-atv__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 18px; }
  .nm-atv__arrow { text-align: left; }
}

/* 같은 기사, 레벨별 차이 */
.nm-lvc { margin-top: 32px; padding: 30px 26px; border-radius: var(--radius-lg); background: var(--brand-soft); }

.nm-lvc__title { text-align: center; font-size: clamp(20px, 3.6vw, 25px); color: var(--brand); }
.nm-lvc__title em { font-style: normal; color: var(--cta); }

.nm-lvc__row { display: grid; gap: 16px; margin-top: 24px; }

.nm-lvc__card {
  display: grid; gap: 12px; align-content: start;
  padding: 24px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--shelf);
}

.nm-lvc__head { display: flex; align-items: center; gap: 10px; }

.nm-lvc__badge {
  padding: 5px 13px; border-radius: 999px; background: var(--brand); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
}

.nm-lvc__range { font-size: 14px; font-weight: 700; color: var(--muted); }

.nm-lvc__label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--cta); }

.nm-lvc__sample {
  font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--ink-soft);
  padding: 16px 18px; border-radius: var(--radius-sm); background: #fbfbfd; border: 1px solid var(--shelf);
}

.nm-lvc__same {
  display: grid; gap: 10px; align-content: start;
  padding: 24px 22px; border-radius: var(--radius);
  background: var(--brand); color: #fff;
}

.nm-lvc__same-title { font-size: 18px; color: #fff; }

.nm-lvc__same-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.nm-lvc__same-list li { display: flex; gap: 9px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.nm-lvc__same-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: #ffd93d;
}

@media (min-width: 900px) { .nm-lvc__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }}

/* 5단계 레벨 카드 */
/* 5단계 레벨 — 가로 한 줄씩 쌓습니다.
   5열로 나누면 카드 하나가 225px 남짓이라 긴 제목과 설명이 좁게 눌립니다.
   왼쪽에 레벨 · 지수, 오른쪽에 제목 · 설명을 두면 위아래로 읽어 내려가며
   지수가 올라가는 흐름이 그대로 보입니다. */

.nm-lv-cards { display: grid; gap: 12px; margin-top: 32px; }

.nm-lv-card {
  display: grid; gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--shelf);
  border-left: 5px solid var(--band, var(--brand));
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff;
}

.nm-lv-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.nm-lv-card__badge {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: var(--band, var(--brand)); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
}

/* 지수 두 줄 — 앞에 이름표(Lexile · AR)를 붙여 무슨 숫자인지 바로 보이게 합니다 */
.nm-lv-card__idx {
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--band, var(--brand));
  white-space: nowrap;
}

.nm-lv-card__idx b::after { content: " :"; }

.nm-lv-card__idx b {
  flex: none;
  min-width: 42px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted);
}

.nm-lv-card__idx--ar { color: var(--ink-soft); }

.nm-lv-card__body { display: grid; align-content: start; }

/* 카드에서 가장 먼저 읽히는 문장이라 크고 굵게 갑니다 */
.nm-lv-card__title {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.45;
  color: var(--brand);
}

/* 키워드 — 헤드라인을 한 번 더 짚어 주는 짧은 목록 */
.nm-lv-card__keys {
  display: grid; gap: 6px;
  margin-top: 14px;
}

.nm-lv-card__key {
  display: flex; gap: 9px;
  font-size: 16px; font-weight: 700; color: var(--ink-soft); line-height: 1.5;
}

.nm-lv-card__key::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-top: 9px;
  border-radius: 50%; background: var(--band, var(--brand));
}

.nm-lv-card__text {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--shelf);
  color: var(--muted); font-size: 16px; line-height: 1.75;
}

@media (min-width: 760px) {
  .nm-lv-card {
    grid-template-columns: 186px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding: 24px 30px;
  }
  .nm-lv-card__top {
    flex-direction: column; align-items: flex-start; gap: 7px;
    padding-top: 2px;
  }}

/* 영상 아래 설명 문구 (LEVEL 섹션에서 사용) */
.nm-flow__note { margin-top: 14px; text-align: center; font-size: 15px; color: var(--muted); }

/* --- 수상 배지 자리 라벨 -------------------------------------------------
   .nm-award__slot 은 bookr 에서 물려받은 3:1 칸입니다.
   파일이 없을 때 무엇을 넣어야 하는지 보이도록 라벨을 깔아 둡니다.        */

.nm-award__slot { position: relative; }

.nm-award__slot img { position: relative; z-index: 1; }

/* --- 카드 안의 태그 여백 조정 --------------------------------------------
   .nm-tags 는 bookr 에서 섹션 끝에 쓰던 것이라 위 여백이 32px 입니다.
   카드 내부에서는 좁게 씁니다.                                            */

.nm-lvc__card .nm-tags { margin-top: 12px; }

/* --- 마무리 강조 문구 (.nm-note 가운데 정렬 · 확대) ----------------------
   교육과정 연계 섹션 마무리, HOW TO LEARN 섹션 마무리에 씁니다.          */

/* --- DOWNLOAD 섹션 체크 목록 ---------------------------------------------
   흰 배경 위에 놓이므로 체크 원은 브랜드 연한색을 씁니다.                */

.nm-dl__checks { display: grid; gap: 10px; margin-top: 22px; }

.nm-dl__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--brand-ink);
}

.nm-dl__check::before {
  content: "\2713";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

/* --- HOW TO LEARN · 세로 타임라인 -----------------------------------------
   bookr 의 LEARNING FLOW 레이아웃을 nm- 프리픽스로 옮긴 것입니다.
   왼쪽 원형 라벨(STEP 1~3 · RESULT) + 오른쪽 카드(썸네일 + 제목 + 설명).
   원 색상은 노드마다 인라인 --dot 으로 지정합니다.                        */

.nm-fl {
  position: relative; list-style: none; margin: 0 auto;
  padding: 0 0 0 96px; max-width: 900px;
  display: grid; gap: 20px;
}

.nm-fl::before {
  content: ""; position: absolute;
  left: 37px; top: 37px; bottom: 37px;
  width: 2px; background: var(--shelf-dark);
}

.nm-fl-node { position: relative; display: block; }

.nm-fl-dot {
  position: absolute; left: -96px; top: 50%; transform: translateY(-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--dot); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; font-weight: 800; line-height: 1.25; letter-spacing: 0.02em;
  box-shadow: 0 0 0 6px #fff;
}

.nm-fl-card {
  display: flex; gap: 20px; align-items: center; padding: 22px 26px;
  background: #fff; border: 1px solid var(--shelf); border-radius: var(--radius);
}

.nm-fl-thumb {
  position: relative; flex: none; width: 132px; aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  background: var(--brand-soft); border: 1px solid var(--shelf);
}

.nm-fl-thumb img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}

.nm-fl-title { margin: 0 0 6px; font-size: 21px; color: var(--brand); }

.nm-fl-text { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

@media (max-width: 700px) {
  .nm-fl { padding-left: 66px; }
  .nm-fl::before { left: 26px; top: 26px; bottom: 26px; }
  .nm-fl-dot { left: -66px; top: 26px; transform: none; width: 52px; height: 52px; font-size: 11px; }
  .nm-fl-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .nm-fl-thumb { width: 100%; }}

/* --- COLLECTIONS · 카테고리 · 시리즈 ------------------------------------
   원 서비스의 CATEGORIES / SERIES 영역을 그대로 옮긴 구성입니다.
   썸네일은 실제 화면 캡처를 넣습니다.                                    */

.nm-coll__label {
  margin-top: 44px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--brand);
}

.nm-coll__desc {
  margin-top: 8px; margin-bottom: 22px;
  color: var(--muted); font-size: 16px; line-height: 1.7;
}

/* --- 카테고리 12개 · 시리즈 9개 --------------------------------------------
   flex + justify-content:center 로 감싸 마지막 줄이 가운데 정렬되게 합니다.
   시리즈 9개는 나누어떨어지지 않는 구간이 있어 이 방식이 필요합니다.

   카테고리 12 → 3열(3·3·3·3) / 4열(4·4·4) / 6열(6·6)   — 모두 딱 떨어짐
   시리즈    9 → 3열(3·3·3)   / 5열(5·4)   / 9열(한 줄)
   ------------------------------------------------------------------------ */

.nm-cats,
.nm-serieses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 14px;
}

.nm-cat,
.nm-series {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
  flex: 0 0 calc((100% - 14px * 2) / 3);
}

/* 아이콘 자리 — 흰 배경 + 연한 회색 테두리
   카테고리 SVG 는 640 × 400(8:5) 가로형이라 칸도 8:5 로 맞춥니다.
   시리즈 SVG 는 정사각형이라 1:1 을 유지합니다. */
.nm-cat__shot,
.nm-series__shot {
  position: relative;
  width: 100%;
  border: 1px solid var(--shelf);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.nm-cat__shot { aspect-ratio: 8 / 5; }

.nm-series__shot { aspect-ratio: 1 / 1; }

/* 카테고리 — SVG 마다 안쪽 비율이 조금씩 달라 contain 이면 위아래가 빕니다.
   cover 로 칸을 꽉 채웁니다 (가장자리가 약간 잘립니다). */
.nm-cat__shot img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 시리즈 — 정사각 아이콘이라 잘리면 안 됩니다 */
.nm-series__shot img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

.nm-cat__name {
  margin-top: 9px;
  font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.35;
}

.nm-cat__ko { font-size: 12px; color: var(--muted); }

.nm-series__name {
  margin-top: 7px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.4;
}

@media (min-width: 620px) {
  .nm-cat { flex-basis: calc((100% - 14px * 3) / 4); }
  .nm-series { flex-basis: calc((100% - 14px * 4) / 5); }}

@media (min-width: 1000px) {
  .nm-cats,
  .nm-serieses { gap: 30px 16px; }
  .nm-cat { flex-basis: calc((100% - 16px * 5) / 6); }
  .nm-series { flex-basis: calc((100% - 16px * 8) / 9); }}