/* Highlights Library 상세 전용 (highlights.html)
   공용 style.css 다음에 불러옵니다.

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

   main.js 가 클래스명을 하드코딩한 곳은 HTML 쪽에서 우회합니다.
     - 숫자 카운트업 → HTML 에 class="bk-count" 그대로 사용 (CSS 없음)
   ------------------------------------------------------------------ */

/* --- 히어로 ------------------------------------------------------------
   배경 사진만 바꾸고 나머지는 메인과 동일합니다.
   (남색 막 · 글 영역 620px 는 .home-hero 에서 물려받습니다)
   학습자와 이북 화면이 사진 오른쪽 절반에 있어 오른쪽 기준으로 자릅니다. */
.home-hero--highlights {
  background-color: #0066b3;
  background-image: url("../img/hero-sm.jpg");
  /* 좁은 화면에서는 학습자 쪽에 맞춥니다. 이북 화면(흰 바탕)이 글 뒤에 오면 대비가 떨어집니다. */
  background-position: 63% center;
}

/* 높이 632px 고정 — news.css 와 같은 처리입니다. */
@media (min-width: 760px) {
  .home-hero--highlights {
    background-image: url("../img/hero-lg.jpg");
    background-position: right center;
    min-height: 632px;
  }
}

/* 1200px 이상에서 공용 .home-hero 가 위아래 여백을 88px 로 키우면 632px 을 넘습니다.
   여백을 좁은 화면과 같게 되돌립니다. */
@media (min-width: 1200px) {
  .home-hero--highlights {
    padding-block: 56px 64px;
    /* 사진을 오른쪽으로 240px 밀어 학습자 얼굴이 제목과 겹치지 않게 합니다.
       왼쪽에 생기는 빈자리는 사진 왼쪽 끝과 같은 하늘색(background-color)이라
       이음매가 보이지 않습니다. */
    background-position: right -240px center;
  }
}

/* --- 이미지 · 영상 자리 ------------------------------------------------
   파일을 아직 안 넣은 자리에는 점선 상자와 파일명 · 권장 크기가 보입니다.
   (경로는 assets/highlights/img/ 기준, 영상은 assets/highlights/ 기준)
   파일을 넣으면 그림이 위에 덮여 라벨이 가려집니다.
   파일이 없으면 HTML 의 onerror 가 깨진 그림 표시를 숨깁니다.
   EXPLORE 자리는 .webp 와 .mp4 둘 다 받습니다 — 있는 쪽이 보입니다.      */

.hl-slot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--slot-ratio, 4 / 3);
  border: 2px dashed #b9c9e2;
  border-radius: var(--radius);
  background: var(--brand-soft);
  overflow: hidden;
}

.hl-slot::before {
  content: attr(data-file) "\A" attr(data-size);
  white-space: pre-line;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 13px; font-weight: 700; line-height: 1.6;
  color: #6b85aa;
  word-break: break-all;
}

.hl-slot > img,
.hl-slot > video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #fff;
}

/* 파일이 들어가면 점선 대신 얇은 실선 테두리 */
.hl-slot:has(> img:not([hidden])),
.hl-slot:has(> video:not([hidden])) { border: 1px solid var(--shelf); }


/* --- WHAT IS · 카드 3장 ------------------------------------------------ */

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

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

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

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

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

/* --- 숫자 밴드 --------------------------------------------------------- */

.hl-numbers { display: grid; gap: 0; }

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

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

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

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

.section--band .container > .hl-numbers {
  background: var(--brand); border-radius: var(--radius-lg); overflow: hidden;
  column-gap: 0; }
.section--band .hl-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 .hl-number:last-child { border-right: 0; }
.section--band .hl-number__value { color: #fff; font-variant-numeric: tabular-nums; }
.section--band .hl-number__label { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 760px) {
  .section--band .hl-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .section--band .hl-number:nth-child(2n) { border-right: 0; }
  .section--band .hl-number:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }}

/* --- 30 LEVELS ---------------------------------------------------------
   위: 30칸 눈금 — 낮은 레벨 빨강(#D6142A, 공식 BI) → 높은 레벨 파랑(#0048A8).
       30색은 OKLab 에서 고르게 나눠 HTML 에 칸마다 --band 로 넣었습니다.
       흰 글자 대비가 가장 낮은 칸도 5.2:1 입니다.
   아래: 6개 구간 카드 — 흰 바탕에 윗선만 구간색. 글자는 브랜드 파랑이라
   연한 구간색 위에 흰 글자를 얹는 대비 문제가 생기지 않습니다.          */

.hl-scale {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.hl-scale li {
  height: 14px;
  background: var(--band);
  font-size: 0;            /* 좁은 화면에서는 숫자를 숨기고 색 띠만 */
}

@media (min-width: 900px) {
  .hl-scale li {
    display: flex; align-items: center; justify-content: center;
    height: 34px;
    font-size: 13px; font-weight: 700; color: #fff;
    font-variant-numeric: tabular-nums;
  }
}

.hl-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.hl-band {
  display: grid; gap: 6px; align-content: start;
  padding: 20px 18px 18px;
  border: 1px solid var(--shelf);
  border-top: 5px solid var(--band);
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
}

.hl-band__lv { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }

/* 이름 칸은 항상 2줄 높이입니다. 1줄 이름은 그 안에서 위아래 가운데,
   Pre-Intermediate 처럼 2줄이 되는 이름은 칸을 꽉 채웁니다.
   그래서 아래 Lexile · 도서 줄이 모든 카드에서 같은 높이에 놓입니다. */
.hl-band__name {
  display: flex; align-items: center;
  min-height: calc(2 * 1.3em);
  font-size: clamp(18px, 2.4vw, 21px); color: var(--brand); line-height: 1.3;
}

.hl-band__meta { display: grid; gap: 4px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--shelf); }
.hl-band__meta div { display: flex; justify-content: space-between; gap: 8px; }
.hl-band__meta dt { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.hl-band__meta dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 360px 미만(갤럭시 폴드 접은 화면 등)에서는 2열이면 지수가 칸을 넘칩니다 */
@media (max-width: 359px) { .hl-bands { grid-template-columns: minmax(0, 1fr); }}
@media (min-width: 700px) { .hl-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }}
@media (min-width: 1100px) { .hl-bands { grid-template-columns: repeat(6, minmax(0, 1fr)); }}



.hl-note { margin-top: 28px; text-align: center; font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; line-height: 1.6; color: var(--brand-ink); }

/* --- 30 LEVELS · 구간별 도서 슬라이드 ---------------------------------
   한 장에 한 구간(5개 레벨), 그 구간 도서의 양면 펼침 캡처 1장이 들어갑니다.
   가로 스크롤 + 스냅으로 넘기므로 손가락으로 밀어도 넘어갑니다.
   자동 넘김은 highlights.html 맨 아래 스크립트가 맡습니다.
   스크립트가 막히면 .is-ready 가 붙지 않아 양옆 버튼만 숨고
   손으로 밀어 보는 슬라이드로 남습니다.                                 */

.hl-lvs { margin-bottom: 40px; }

.hl-lvs__tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 16px;
}

.hl-lvs__tab {
  min-height: 42px; padding: 6px 10px;
  border: 1px solid var(--shelf-dark); border-radius: 999px;
  background: #fff;
  font-size: 15px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hl-lvs__tab:hover { border-color: var(--band); color: var(--band); }

.hl-lvs__tab[aria-current="true"] { background: var(--band); border-color: var(--band); color: #fff; }

@media (min-width: 700px) { .hl-lvs__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }}

.hl-lvs__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}

.hl-lvs__track::-webkit-scrollbar { display: none; }

.hl-lvs__slide {
  scroll-snap-align: start; scroll-snap-stop: always;
  padding: 24px 18px 26px;
  border: 1px solid var(--shelf);
  border-top: 6px solid var(--band);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--band) 5%, #fff);
}

.hl-lvs__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 14px; margin-bottom: 20px; text-align: center;
}

.hl-lvs__lv { font-size: 15px; font-weight: 700; color: var(--muted); }

.hl-lvs__name { font-size: clamp(22px, 3.2vw, 28px); color: var(--band); }

.hl-lvs__lex { font-size: 15px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 한 장에 가로 캡처 1장 — e북 양면 펼침 화면을 그대로 넣습니다.
   캡처 비율이 조금 달라도 잘리지 않도록 contain 으로 맞추고 남는 곳은 흰색입니다. */
.hl-lvs__shot { max-width: 960px; margin-inline: auto; }

.hl-lvs__shot .hl-slot { border-radius: 12px; box-shadow: 0 16px 28px -20px rgba(0, 41, 94, 0.6); }

.hl-lvs__shot .hl-slot > img { object-fit: contain; }

@media (min-width: 700px) {
  .hl-lvs__slide { padding: 30px 32px 32px; }}

@media (min-width: 1100px) {
  .hl-lvs__slide { padding: 34px 56px 36px; }}

/* 이전 · 다음 — 슬라이드 양옆, 캡처 이미지 높이의 가운데에 놓입니다.
   넓은 화면에서는 이미지 바깥 여백에, 좁은 화면에서는 이미지 가장자리에 겹칩니다.
   --hl-head 는 구간 이름 줄 높이의 절반이라, 그만큼 내려 이미지 중앙에 맞춥니다. */
.hl-lvs__stage { position: relative; --hl-head: 38px; }

.hl-lvs__side {
  position: absolute; top: calc(50% + var(--hl-head)); z-index: 2;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-top: -22px;
  border: 1px solid var(--shelf-dark); border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--ink-soft);
  box-shadow: 0 6px 16px -8px rgba(0, 41, 94, 0.45);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hl-lvs__side:hover { border-color: var(--brand); color: var(--brand); }
.hl-lvs__side--prev { left: 8px; }
.hl-lvs__side--next { right: 8px; }
.hl-lvs__side--prev:hover { transform: translateX(-2px); }
.hl-lvs__side--next:hover { transform: translateX(2px); }
.hl-lvs.is-ready .hl-lvs__side { display: inline-flex; }

@media (min-width: 700px) {
  .hl-lvs__stage { --hl-head: 26px; }
  .hl-lvs__side { width: 52px; height: 52px; margin-top: -26px; }
  .hl-lvs__side--prev { left: 14px; }
  .hl-lvs__side--next { right: 14px; }}

@media (min-width: 1100px) {
  .hl-lvs__side--prev { left: 28px; }
  .hl-lvs__side--next { right: 28px; }}

/* 슬라이드에 지금 보이는 구간은 아래 구간 카드에도 표시합니다 */
.hl-band { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.hl-band.is-on { box-shadow: 0 0 0 2px var(--band); transform: translateY(-3px); }

/* --- COLLECTIONS ------------------------------------------------------- */

.hl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 auto 32px; max-width: 860px; }
.hl-chip { padding: 11px 22px; border-radius: 999px; background: var(--brand-soft);
  color: var(--brand); font-size: 16px; font-weight: 700; }
@media (max-width: 700px) {
  .hl-chips { gap: 8px; margin-bottom: 24px; }
  .hl-chip { font-size: 14px; padding: 8px 14px; }}

/* 표지 12권 — 3 · 4 · 6열. 모두 12 를 나누어떨어져 빈 칸이 없습니다.
   캡처 원본이 192 × 256 이라 PC 6열(표지 약 178px)에서 늘어나지 않습니다. */
.hl-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.hl-book .hl-slot { border-radius: 10px; box-shadow: 0 10px 18px -14px rgba(0, 41, 94, 0.55); }

@media (min-width: 620px) { .hl-books { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (min-width: 1000px) { .hl-books { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }}

.hl-coll__label {
  margin-top: 52px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--brand);
  text-align: center;
}

.hl-coll__desc {
  margin-top: 10px; margin-bottom: 24px;
  color: var(--brand-ink); font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; line-height: 1.6;
  text-align: center;
}

.hl-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.hl-areas li {
  display: grid; gap: 1px; justify-items: center; text-align: center;
  padding: 14px 10px;
  border: 1px solid var(--shelf); border-radius: var(--radius-sm);
  background: #fff;
  font-size: 13px; color: var(--muted);
}

.hl-areas b { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.35; }

@media (min-width: 620px) { .hl-areas { grid-template-columns: repeat(5, minmax(0, 1fr)); }}

/* --- EXPLORE, WATCH & READ · 좌우 교차 --------------------------------- */

.hl-contents { display: grid; gap: 20px; }

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

.hl-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;
}

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

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

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

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

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



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

/* --- READERS+ · 카드 3장 ---------------------------------------------- */

/* 세 단계를 이어 찍은 영상 한 편 — 자동재생 · 반복 · 무음 */
.hl-rp-video { max-width: 1080px; margin: 0 auto 36px; }

.hl-rp { display: grid; gap: 16px; }

.hl-rp-card {
  display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center;
  padding: 34px 26px 30px;
  border: 1px solid var(--shelf); border-radius: var(--radius-lg);
  background: #fff;
}

.hl-rp-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 6px;
  border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
}

.hl-rp-card__en { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--cta); text-transform: uppercase; }

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

.hl-rp-card__text { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 30ch; }

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

/* --- MY READING · 이미지 + 항목 ---------------------------------------- */

.hl-story { display: grid; gap: 32px; }

.hl-frame {
  border: 1px solid var(--shelf); border-radius: var(--radius);
  background: #f6f9fe; overflow: hidden;
}

.hl-frame img { width: 100%; height: auto; }

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

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

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

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

/* --- DOWNLOAD ---------------------------------------------------------- */

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

.hl-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;
}

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

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

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

.hl-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;
}

/* 스토어 로고 — Highlights 공식 사이트 이미지를 그대로 불러옵니다.
   두 로고의 가로 길이가 달라 높이만 맞추고 가로는 원본 비율을 따릅니다. */
.hl-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hl-store { display: block; transition: opacity 0.15s ease; }
.hl-store:hover { opacity: 0.72; }
.hl-store img { display: block; width: auto; height: 48px; }



@media (min-width: 900px) {
  .hl-dl { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px; }}

/* 기기 이미지는 흰 배경 그대로 — 자리 상자의 테두리 · 그림자 · 둥근 모서리를 없앱니다 */
.hl-dl__figure .hl-slot:has(> img:not([hidden])) { border: 0; border-radius: 0; background: transparent; }
.hl-dl__figure .hl-slot > img { object-fit: contain; }

/* 휴대폰 · 태블릿 세로(900px 미만) — 기기 이미지를 글 뒤 배경으로 깝니다.
   글자를 가리지 않도록 옅게(18%) 두고, 오른쪽 아래로 크게 흘려 놓습니다.
   파일이 없으면 자리 상자째 숨깁니다. */
@media (max-width: 899px) {
  .hl-dl { position: relative; isolation: isolate; gap: 0; }
  .hl-dl__figure {
    position: absolute; z-index: -1;
    right: -18%; bottom: -8%; width: 115%;
    opacity: 0.18; pointer-events: none;
  }
  .hl-dl__figure .hl-slot:not(:has(> img:not([hidden]))) { display: none; }}

@media (min-width: 600px) and (max-width: 899px) {
  .hl-dl__figure { right: -12%; bottom: -14%; width: 90%; opacity: 0.2; }}

/* --- CTA --------------------------------------------------------------- */

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

.hl-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: #fff;
}

.hl-cta__text { max-width: 46ch; color: rgba(255, 255, 255, 0.86); font-size: 19px; line-height: 1.8; }

.hl-cta .btn-group { margin-top: 26px; justify-content: center; }

.hl-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; }
.hl-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; }
.hl-cta__bizlink:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hl-cta__bizlink svg { transition: transform 0.18s; }
.hl-cta__bizlink:hover svg { transform: translateX(3px); }

/* CTA 배경 — 공용 style.css 의 .section--cta 는 assets/common/img/hero-lg.jpg 를 찾는데
   그 파일이 없어 북커클래스 · 뉴스오매틱도 사진 없이 남색만 보입니다.
   같은 모양을 유지하면서 없는 파일 요청(404)만 막습니다. */
.section--cta { background-image: none; }

/* 휴대폰(700px 미만) — 구간 카드를 슬라이드 안, 캡처 이미지 바로 아래에 넣어
   이미지와 카드가 한 장처럼 같이 옆으로 넘어갑니다.
   슬라이드 위쪽 구간 이름 줄과 아래 구간 카드 6장은 겹치므로 숨깁니다.
   (700px 이상에서는 슬라이드 안 카드가 숨고 기존 배치 그대로입니다) */
.hl-lvs__card { display: none; }

@media (max-width: 699px) {
  .hl-lvs__head { display: none; }
  .hl-lvs__card {
    display: grid; gap: 6px;
    margin-top: 16px; padding: 18px 18px 16px;
    border: 1px solid var(--shelf); border-top: 5px solid var(--band);
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fff;
  }
  .hl-lvs__card .hl-band__name { min-height: 0; color: var(--band); font-weight: 800; letter-spacing: -0.035em; }
  .hl-lvs__slide { padding-top: 18px; }
  .hl-bands { display: none; }
  /* 화살표를 캡처 이미지 세로 가운데에 맞춥니다.
     이미지 위쪽 = 슬라이드 윗선 6px + 위 여백 18px,
     이미지 높이 = (슬라이드 폭 − 좌우 여백 36px − 테두리 2px) × 10/16 */
  .hl-lvs__stage { container-type: inline-size; }
  .hl-lvs__side { top: calc(24px + (100cqw - 38px) * 0.3125); }}