/* 리딩팜 상세 전용 (readingfarm.html)
   공용 style.css 다음에 불러옵니다.

   색 토큰은 공용 style.css 값을 그대로 씁니다.
   뉴스오매틱(news.css)과 동일하게 --accent 계열을 덮어쓰지 않습니다.
   상품별 강조가 필요한 자리는 --brand 를 color-mix 로 옅게/진하게 만들어 씁니다.

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

/* 자동 재생 영상 — 이미지 자리와 같은 규격입니다.
   지금은 페이지에 영상이 없지만, 영상을 넣을 때 제작규칙상
   rf-video bk-video 를 함께 붙이므로 규칙을 남겨 둡니다. */
.rf-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;
}

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

/* 이미지 자리 — 비율만 잡아 둡니다. */
.rf-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--f-ratio, 16 / 10);
  border-radius: var(--radius);
  border: 1px solid var(--shelf);
  background: var(--brand-soft);
  overflow: hidden;
}

.rf-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 히어로 — 배경 사진만 바꾸고 나머지는 메인과 동일합니다.
   남색 막(사진 위 그라데이션)은 하이라이츠와 같이 공용 .home-hero 에서 물려받습니다.
   사진 왼쪽이 거의 흰색이라, 배포 후 흰 글자 대비가 충분한지 확인이 필요합니다. */
.home-hero--readingfarm {
  background-color: var(--brand-ink);
  /* → assets/readingfarm/img/hero-sm.jpg (800 x 800, 학습자와 책 중심 크롭)
     좁은 화면은 글자가 학습자(분홍 스웨터) 위에 얹히므로,
     공용 남색 막 아래에 남색 한 겹을 더 깔아 흰 글자 대비를 확보합니다. */
  background-image:
    linear-gradient(rgba(0, 42, 94, 0.55), rgba(0, 42, 94, 0.55)),
    url("../img/hero-sm.jpg");
  background-size: cover;
  background-position: center top;
}

/* 높이 632px 고정. 뉴스오매틱과 같은 값입니다.

   hero-lg.jpg (4326 x 1070) — 도서관에서 책을 읽는 학습자 사진(2576 x 1637)을
   머리 위부터 책을 든 손까지(세로 1070px) 잘라 낸 뒤, 왼쪽 1100px · 오른쪽 650px 을
   사진 가장자리 색으로 흐리게 늘려 붙인 바탕입니다. 넓은 화면에서도 빈 띠가 생기지 않습니다.
     표시 크기  높이 642px (원본 × 0.6)
     얼굴 위치  바탕 그림 왼쪽에서 1785px ((원본 얼굴 1876px + 1100px) × 0.6)
   바탕은 아래쪽에 붙입니다. 화면에는 머리부터 책까지 들어옵니다.

   --rf-face : 얼굴이 와야 할 가로 위치
     760~1023px  화면 오른쪽에서 270px 안쪽 (상단 메뉴가 접히는 구간)
     1024px~     아래 블록에서 헤더 메뉴 사이로 다시 정합니다. */
@media (min-width: 760px) {
  .home-hero--readingfarm {
    --rf-face: calc(100vw - 270px);
    /* → assets/readingfarm/img/hero-lg.jpg (4326 x 1070) */
    background-image: url("../img/hero-lg.jpg");
    background-size: auto 642px;
    background-repeat: no-repeat;
    background-position: calc(var(--rf-face) - 1785px) bottom;
    min-height: 632px;
  }
}

/* 1024px 이상(상단 메뉴가 보이는 폭) — 학습자 얼굴을 헤더의
   "뉴스오매틱" 메뉴와 "학교 · 학원 도입" 버튼 사이에 맞춥니다.
   실제 헤더를 1024~2560px 에서 잰 값입니다.
     ~1440px  화면 폭 × 0.895 − 79px  (헤더 좌우 여백이 폭에 따라 바뀌는 구간)
     1440px~  화면 가운데 + 491px     (헤더 폭이 고정되는 구간)
   vw 는 스크롤바를 포함하므로 Windows 스크롤바(약 15px)만큼 미리 빼 두었습니다.
   헤더 메뉴 구성이 바뀌면 이 값을 다시 재야 합니다. */
@media (min-width: 1024px) {
  .home-hero--readingfarm {
    --rf-face: min(calc(89.5vw - 92px), calc(50vw + 484px));
  }
}

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

/* ── 체험하기 (FREE TRIAL) — 버튼을 누르면 이 자리에서 체험 화면이 펼쳐집니다 ── */
.rf-try__start { display: flex; justify-content: center; }
.rf-try__start[hidden] { display: none; }
.btn--lg { min-height: 56px; padding-inline: 40px; font-size: 17px; }

.rf-try__panel {
  max-width: 1200px;
  margin-inline: auto;
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px -24px rgba(0, 41, 94, 0.45);
}
.rf-try__panel[hidden] { display: none; }

.rf-try__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--shelf);
}
.rf-try__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--brand-ink); letter-spacing: -0.02em; }
.rf-try__acts { display: flex; align-items: center; gap: 12px; }
.rf-try__new {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.rf-try__close {
  padding: 7px 14px;
  border: 1px solid var(--shelf-dark);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rf-try__close:hover { border-color: var(--brand); color: var(--brand); }

/* 넓은 화면 — iframe 을 1280 x 860 으로 띄우고 스크립트가 칸 폭에 맞춰 통째로 줄입니다 */
.rf-try__stage {
  position: relative;
  height: 70vh;
  overflow: hidden;
  background: var(--brand-soft);
}
.rf-try__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform-origin: 0 0;
  background: transparent;
}
@media (min-width: 900px) {
  .rf-try__frame { width: 1280px; height: 860px; }
}

/* 상대 사이트가 표시를 막거나 늦게 뜰 때 아래에 깔리는 안내 */
.rf-try__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.rf-try__fallback b { color: var(--brand); }

/* ── 섹션 안의 한 줄 핵심 문구 ─────────────────────────── */
.rf-pull {
  margin: 34px 0 0;
  padding: 22px 24px;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: clamp(16px, 2.1vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
}

/* ── 소개 카드 3장 (WHAT IS) ───────────────────────────── */
.rf-why {
  display: grid;
  gap: 20px;
}

@media (min-width: 760px) {
  .rf-why { grid-template-columns: repeat(3, 1fr); }
}

.rf-why-card {
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  padding: 28px 24px;
  background: var(--paper);
}

.rf-why-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.rf-why-card__text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* ── 숫자 밴드 ─────────────────────────────────────────── */
.rf-numbers {
  display: grid;
  gap: 28px 20px;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

@media (min-width: 900px) {
  .rf-numbers { grid-template-columns: repeat(4, 1fr); }
}

.rf-number__value {
  display: block;
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.rf-number__label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.85;
}

/* ── CURRICULUM-BASED READING — 이유 카드 4장 ───────────────── */
.rf-meet {
  display: grid;
  gap: 20px;
}

@media (min-width: 760px) {
  .rf-meet { grid-template-columns: repeat(2, 1fr); }
}

.rf-meet-card {
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

/* 훑어보는 사람에게 징검다리가 되도록 크게 씁니다.
   대신 색을 옅게 내려서 제목보다 앞서지 않게 합니다. */
.rf-meet-card__num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--brand) 42%, var(--paper));
  margin-bottom: 14px;
}

.rf-meet-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.rf-meet-card__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 18px;
}

.rf-meet-card__pull {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--shelf);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.01em;
}

/* ── 교과 주제 10개 (ACADEMIC & SEL CONTENTS) ─────────── */
/* 999px 이하는 사진을 왼쪽에 둔 가로 카드(760px 이상 2열),
   1000px 이상은 5장씩 두 줄입니다. */
.rf-subjects {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.rf-subject {
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.rf-subject__shot {
  aspect-ratio: 4 / 3;
  background: var(--brand-soft);
}

.rf-subject__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-subject__body { padding: 16px 18px 20px; }

.rf-subject__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
}

.rf-subject__ko {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.rf-subject__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* ── 학습 흐름 8단계 — 태블릿 목업 안에서 화면이 넘어갑니다 ── */
.rf-demo { display: grid; gap: 24px; }

/* 태블릿 목업.
   틀 이미지는 가운데가 뚫려 있고, 그 아래 학습 화면이 깔립니다.
   아래 값은 tablet-frame.webp (3918 x 2826) 를 실측한 것입니다.
     화면 구멍  x 414~3443, y 287~2543
     여백       위 10.16% · 우 12.10% · 아래 9.98% · 좌 10.57%
   목업 파일을 바꾸면 이 두 값만 다시 재서 넣으면 됩니다. */
.rf-tab {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: var(--tab-ratio, 3918 / 2826);
}

.rf-tab__screen {
  position: absolute;
  inset: var(--screen-inset, 10.16% 12.10% 9.98% 10.57%);
  z-index: 1;
  overflow: hidden;
  border-radius: var(--screen-radius, 0);
  background: var(--brand-soft);
}

.rf-tab__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* 학습 화면 — 다른 슬라이드처럼 옆으로 밀려 들어옵니다. 위치(translateX)는 스크립트가 정합니다.
   스크립트가 돌기 전(.is-ready 없음)에는 1단계 화면만 보입니다. */
.rf-demo__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rf-demo__shot.is-instant { transition: none; }
.rf-demo:not(.is-ready) .rf-demo__shot:not(.is-current) { visibility: hidden; }

/* 태블릿 + 양옆 화살표 (다른 슬라이드의 화살표와 같은 모양) */
.rf-demo__stage { position: relative; }
.rf-demo__side {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  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);
  cursor: pointer;
}
.rf-demo__side:hover { border-color: var(--brand); color: var(--brand); }
.rf-demo__side--prev { left: 0; }
.rf-demo__side--next { right: 0; }
.rf-demo.is-ready .rf-demo__side { display: inline-flex; }

@media (min-width: 760px) {
  /* 넓은 화면 — 화살표가 태블릿 바깥 양옆에 놓이도록 좌우 자리를 비웁니다 */
  .rf-demo__stage { padding-inline: 68px; }
  .rf-demo__side { width: 52px; height: 52px; margin-top: -26px; }
}

/* 1단계(필수 어휘) — 두 장을 겹쳐 두고, 스크립트가 is-anim 을 붙이면 절반쯤 지나 문장 화면으로 바뀝니다 */
.rf-demo__pair img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rf-demo__pair-b { opacity: 0; }
.rf-demo__pair.is-anim .rf-demo__pair-b { animation: rf-pair 4.5s ease both; }
@keyframes rf-pair {
  0%, 44% { opacity: 0; }
  52%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-demo__pair.is-anim .rf-demo__pair-b { animation: none; }
}

/* 남은 시간 막대 — 화면 아래쪽에 얇게 깔립니다 */
.rf-demo__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--brand);
  z-index: 3;
}

.rf-demo__timer.is-running { transition: width linear; }

@media (prefers-reduced-motion: reduce) {
  .rf-demo__shot { transition: none; }
  .rf-demo__timer { display: none; }
}

/* 목업 아래 — 설명과 조작 버튼 */
.rf-demo__under {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.rf-demo__caption {
  margin: 0;
  max-width: 660px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

/* 설명이 1줄 ↔ 2줄로 바뀌어도 아래 내용이 들썩이지 않도록 — 모든 설명을 한 칸에 겹쳐 두고 현재 것만 보입니다 */
.rf-demo__capbox { display: grid; width: 100%; max-width: 660px; }
.rf-demo__capbox > .rf-demo__caption { grid-area: 1 / 1; max-width: none; }
.rf-demo__caption--ghost { visibility: hidden; }



/* 8단계 목록 — 목업 아래 가로로 깔립니다 */
.rf-demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.rf-demo-step {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  border: 1px solid var(--shelf);
  border-radius: var(--radius-sm);
  padding: 14px 8px 16px;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rf-demo-step[aria-current="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.rf-demo-step__no {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--shelf);
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rf-demo-step.is-done .rf-demo-step__no,
.rf-demo-step[aria-current="true"] .rf-demo-step__no {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

.rf-demo-step__name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.02em;
}

.rf-demo-step.is-done .rf-demo-step__name { color: var(--ink-soft); }
.rf-demo-step[aria-current="true"] .rf-demo-step__name { color: var(--brand-ink); }

.rf-demo-step__tag {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
}

/* ── 워크북 6단계 + 넘겨보는 이북 ──────────────────────── */
.rf-wb {
  display: grid;
  gap: 32px;
}

/* 페이지를 넘기는 뷰어.
   현재 장은 제자리, 지나간 장은 왼쪽 밖, 다음 장은 오른쪽 밖에 있습니다.
   상자가 overflow: hidden 이라 밖으로 나간 장은 보이지 않습니다. */
/* 지면은 세로 A4 비율이라 폭을 그대로 두면 기둥이 너무 길어집니다.
   폭을 묶어 높이를 줄이고 가운데로 모읍니다. */
.rf-book {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}

.rf-book__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: var(--brand-soft);
  border: 1px solid var(--shelf);
  border-radius: var(--radius);
  overflow: hidden;
}

.rf-book__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  will-change: transform;
}

.rf-book__page.is-past { transform: translateX(-100%); }

.rf-book__page.is-current {
  transform: translateX(0);
  z-index: 2;
}

/* 동작 줄이기를 켠 사용자에게는 미끄러지는 움직임 없이 바로 바뀝니다.
   자리는 그대로 두어야 지나간 장이 화면에 남지 않습니다. */
@media (prefers-reduced-motion: reduce) {
  .rf-book__page { transition: none; }
}

.rf-book__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.rf-book__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--shelf);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand);
  cursor: pointer;
}

.rf-book__btn:disabled { color: var(--muted); cursor: default; opacity: 0.5; }

.rf-book__count {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
}

/* 6단계 목록 — 누르면 해당 장으로 넘어갑니다 */
.rf-wb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rf-wb-step {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  text-align: left;
  border: 1px solid var(--shelf);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  background: var(--paper);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rf-wb-step[aria-current="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.rf-wb-step__no {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rf-wb-step[aria-current="true"] .rf-wb-step__no {
  background: var(--brand);
  color: var(--paper);
}

.rf-wb-step__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.rf-wb-step__text {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* 넓은 화면 — 기본 규칙보다 뒤에 두어야 값이 덮이지 않습니다.
   오른쪽 6단계 목록을 왼쪽 이북 높이에 맞춥니다.
   남는 높이는 칸 사이 간격이 아니라 칸 자체가 가져갑니다.
   간격을 8px 로 좁혀야 칸이 커진 만큼 덩어리로 읽힙니다. */
@media (min-width: 1000px) {
  .rf-wb { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .rf-wb__side { height: 100%; }
  .rf-wb-steps { height: 100%; gap: 8px; grid-auto-rows: 1fr; }
  .rf-wb-step { align-items: center; padding: 16px 20px; }
}

/* ── 훑어보는 사람을 위한 형광펜 ───────────────────────── */
/* 리드 문단은 회색 덩어리라 훑는 눈에 걸리지 않습니다.
   글자 아래에 옅은 띠를 깔아 핵심 한 대목만 잡히게 합니다.
   섹션마다 한 곳만 씁니다. 두 곳이 되면 강조가 사라집니다. */
.rf-mark {
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -9px 0 var(--brand-soft);
}

/* ── 이런 분께 — 고민과 대응을 짝지어 보여 줍니다 ────────── */
.rf-fit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rf-fit__head {
  display: none;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}

@media (min-width: 860px) {
  .rf-fit__head { display: grid; grid-template-columns: 1fr 32px 1.15fr; }
  .rf-fit__head span:nth-child(2) { visibility: hidden; }
}

.rf-fit__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 860px) {
  .rf-fit__item { grid-template-columns: 1fr 32px 1.15fr; gap: 10px; align-items: stretch; }
}

.rf-fit__ask,
.rf-fit__answer {
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.65;
}

.rf-fit__ask {
  border: 1px solid var(--shelf);
  background: var(--paper);
  color: var(--muted);
}

.rf-fit__answer {
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.rf-fit__answer b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

/* 화살표 — 좁은 화면에서는 아래를 가리킵니다 */
.rf-fit__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.rf-fit__arrow svg { transform: rotate(90deg); }

@media (min-width: 860px) {
  .rf-fit__arrow svg { transform: none; }
}

/* ── 수상 · 인증 — 연도 타임라인 ────────────────────────── */
.rf-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--shelf);
}

.rf-tl__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--shelf);
}

@media (min-width: 700px) {
  .rf-tl__item { grid-template-columns: 148px 1fr; gap: 0 24px; align-items: baseline; }
}

.rf-tl__year {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.rf-tl__text {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ── 기기 ──────────────────────────────────────────────── */
/* 크기 · 굵기 · 간격은 뉴스오매틱(.nm-dl) · 북커클래스(.bk-dl)와 같은 값입니다. */
.rf-dl {
  display: grid;
  gap: 32px;
  align-items: center;
}

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

/* 좁은 화면(한 줄) — 기기 이미지를 설명 문단 다음, 체크 목록 위에 둡니다.
   왼쪽 글 묶음을 풀어(display: contents) 이미지와 같은 줄 순서 안에 넣습니다. */
@media (max-width: 899px) {
  .rf-dl { gap: 0; }
  .rf-dl > div:first-child { display: contents; }
  .rf-dl > div:first-child > .eyebrow { order: 1; justify-self: start; }
  .rf-dl__title { order: 2; }
  .rf-dl__text { order: 3; }
  .rf-dl__figure { order: 4; margin-top: 24px; }
  .rf-dl__checks { order: 5; }
  .rf-dl__web { order: 6; }
}

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

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

.rf-dl__checks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

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

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

/* 웹 학습 강조 — 학습 사이트 버튼 + 브라우저 안내 */
.rf-dl__web {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 26px;
}

.rf-dl__note { font-size: 14px; color: var(--muted); }

/* 기기 이미지는 투명 배경 그대로 — 테두리 · 배경 없이 */
.rf-dl__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── CTA ───────────────────────────────────────────────── */
/* 남색 배경 위라 제목 · 본문을 흰색으로 둡니다.
   공용 h2 색(--brand)이 그대로 내려오지 않도록 제목에도 직접 지정합니다. */
.rf-cta { text-align: center; color: #fff; }

/* 공용 .btn-group 은 flex 라 text-align 으로는 가운데로 오지 않습니다 */
.rf-cta .btn-group { justify-content: center; }

.rf-cta__title {
  color: #fff;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  line-height: 1.35;
}

.rf-cta__text {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.9);
}

/* ══ 추가 블록 ═══════════════════════════════════════════
   기본 규칙 뒤에 미디어 규칙을 둡니다. 순서를 바꾸면 값이 덮입니다. */

/* ── 교과 주제 10장 ─────────────────────────────────── */
@media (max-width: 999px) {
  .rf-subjects .rf-subject {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .rf-subjects .rf-subject__shot { aspect-ratio: auto; min-height: 104px; }
  .rf-subjects .rf-subject__body { padding: 14px 16px; }
}

@media (min-width: 760px) {
  .rf-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 1000px) {
  .rf-subjects { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

/* ── 통독 · 정독 · 학습 심화 ───────────────────────────── */
.rf-depth {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.rf-depth__item {
  --tone: color-mix(in srgb, var(--brand) var(--tone-w, 50%), var(--paper));
  border: 1px solid var(--shelf);
  border-top: 4px solid var(--tone);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 20px 22px;
}

.rf-depth__item:nth-child(1) { --tone-w: 35%; }
.rf-depth__item:nth-child(2) { --tone-w: 65%; }
.rf-depth__item:nth-child(3) { --tone-w: 100%; }

.rf-depth__no {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand);
}

.rf-depth__name {
  margin: 6px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
}

.rf-depth__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

@media (min-width: 760px) {
  .rf-depth { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 학습 흐름 단계 목록 — 레벨 진단 2단계 + 도서별 학습 6단계 ── */
.rf-demo-groups {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 4px;
}

.rf-demo-group__label {
  margin: 0 0 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

.rf-demo-group__label span {
  margin-left: 6px;
  font-weight: 700;
  color: var(--brand);
}

@media (min-width: 700px) {
  .rf-demo-steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .rf-demo-steps { gap: 6px; }
  .rf-demo-steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── 교육 전문 출판사 카드 4장 (CURRICULUM-BASED READING) ── */
/* 출판사 로고 → 한 줄 소개 → 대표 시리즈 → 기기 화면 합성 이미지 순서입니다.
   위쪽 띠 색은 성장 순서에 따라 진해집니다 (SEL 카드는 옅은 색). */
.rf-pubs { margin-top: 8px; }


.rf-pubs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* 휴대폰 — 시리즈 설명이 길어 한 줄에 한 장 */
  gap: 12px;
}

.rf-pc {
  --tone: color-mix(in srgb, var(--brand) var(--tone-w, 50%), var(--paper));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  border: 1px solid var(--shelf);
  border-top: 4px solid var(--tone);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 6%, transparent);
}

.rf-pc--1 { --tone-w: 30%; }
.rf-pc--2 { --tone-w: 60%; }
.rf-pc--3 { --tone-w: 100%; }
.rf-pc--4 { --tone-w: 18%; }

.rf-pc__step {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 로고 — 모양(가로형 · 원형 · 세로형)이 달라서 로고마다 높이(--lh)를 따로 주어 크기가 비슷해 보이게 맞추고,
   모두 같은 높이의 칸(--lbox) 가운데에 놓아 아래 소개 문구 줄이 카드끼리 나란히 맞도록 합니다. */
.rf-pc__logo {
  --lbox: 96px;
  --lk: 1.15;  /* 휴대폰 — 카드가 한 줄에 한 장이라 로고를 넓게 */
  width: auto;
  max-width: 92%;
  height: calc(var(--lh, 40px) * var(--lk));
  margin: calc(14px + (var(--lbox) - var(--lh, 40px)) * var(--lk) / 2) 0 calc((var(--lbox) - var(--lh, 40px)) * var(--lk) / 2);
  object-fit: contain;
}

.rf-pc__claim {
  max-width: 26em;
  margin: 14px 0 0;
  word-break: keep-all;
  text-wrap: balance;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* 대표 시리즈 — 시리즈 이름(굵게) + 한 줄 설명. 카드 안에서 왼쪽 정렬로 읽기 쉽게 둡니다 */
.rf-pc__desc {
  list-style: none;
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 30em;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--shelf);
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  word-break: keep-all;
}
/* 테마별 리더스 — 시리즈 이름 + 주제를 작은 칩으로 */
.rf-pc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rf-pc__tags > span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.rf-pc__tags i { font-style: normal; font-weight: 500; color: var(--ink-soft); margin-left: 4px; }


.rf-pc__desc b {
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

@media (min-width: 760px) {
  .rf-pubs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rf-pc { padding: 22px 20px 20px; }
  .rf-pc__logo { --lk: 1; }  /* 태블릿 — 2열 */
  .rf-pc__claim { font-size: 16px; }
  .rf-pc__desc { font-size: 15px; }
  .rf-pc__desc b { font-size: 16px; }
}

/* 넓은 화면도 2 x 2 — 리딩팜의 중심인 콘텐츠 출판사를 크게 보여 줍니다 */
@media (min-width: 1000px) {
  .rf-pubs__list { gap: 24px; max-width: 1040px; margin-inline: auto; }
  .rf-pc { padding: 30px 40px 32px; }
  .rf-pc__step { font-size: 14px; }
  .rf-pc__logo { --lk: 1.25; }
  .rf-pc__claim { font-size: 17px; }
  .rf-pc__desc b { font-size: 17px; }
}

/* ── IS THIS FOR YOU — 좁은 화면 (859px 이하) ──────────────── */
/* 고민과 답이 세로로 쌓이면 어디까지가 한 쌍인지 흐려지므로,
   한 쌍을 카드 하나로 묶고 번호를 붙입니다. 쌍 사이 간격은 넓힙니다.
   넓은 화면(가로 대조)은 그대로입니다. */
@media (max-width: 859px) {
  .rf-fit { gap: 16px; counter-reset: rf-fit; }

  .rf-fit__item {
    counter-increment: rf-fit;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 5%, transparent);
  }

  .rf-fit__ask,
  .rf-fit__answer {
    border: 0;
    border-radius: 0;
  }

  .rf-fit__ask {
    position: relative;
    display: block;
    padding: 16px 20px 14px 58px;
  }

  /* 쌍 번호 */
  .rf-fit__ask::before {
    content: counter(rf-fit, decimal-leading-zero);
    position: absolute;
    left: 20px;
    top: 17px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--brand);
  }

  /* 화살표는 감추고, 두 칸 사이를 옅은 점선으로 잇습니다 */
  .rf-fit__arrow { display: none; }

  .rf-fit__answer {
    display: block;
    padding: 14px 20px 16px 58px;
    border-top: 1px dashed color-mix(in srgb, var(--brand) 30%, transparent);
  }
}

/* ── IS THIS FOR YOU — 넓은 화면 (860px 이상) ─────────────── */
/* 글자에 비해 카드가 가로로 너무 길어 보이지 않도록 폭을 묶고 가운데로 모읍니다.
   카드 안 글자도 가운데 정렬합니다. */
@media (min-width: 860px) {
  .rf-fit,
  .rf-fit__head {
    max-width: 860px;
    margin-inline: auto;
  }

  .rf-fit__head { text-align: center; }

  .rf-fit__ask,
  .rf-fit__answer {
    justify-content: center;
    text-align: center;
  }
}

/* ── 10 LEVELS · 레벨별 슬라이드 (LEVEL GUIDE) ──────────────── */
/* 하이라이츠 30 LEVELS 와 같은 구성입니다.
   위 Lv 버튼 10개 → 한 장에 한 레벨(체험 도서 펼친 페이지 캡처 + 레벨 특징 카드).
   가로 스크롤 + 스냅이라 손가락으로 밀어도 넘어갑니다.
   자동 넘김은 readingfarm.html 아래 스크립트가 맡고, 스크립트가 막히면
   .is-ready 가 붙지 않아 양옆 버튼만 숨은 채 손으로 넘기는 슬라이드로 남습니다.
   레벨색(--band)은 밝은 파랑 #2B6CD1 → 브랜드 남색 #00295E (흰 글자 대비 4.5 이상). */
.rf-lvs { margin-bottom: 36px; }

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

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

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

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

.rf-lvs__stage { position: relative; }

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

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

.rf-lvs__slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 22px 16px 24px;
  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);
}

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

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

.rf-lvs__name {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 800;
  color: var(--band);
  letter-spacing: -0.03em;
}

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

/* 한 장에 펼친 페이지 캡처 1장 — 하이라이츠와 같이 가운데 960px 까지 */
/* 슬라이드 높이는 가장 높은 판형에 맞춰지므로, 가로로 긴 판형(레벨 1)은 위아래 가운데에 놓습니다. */
.rf-lvs__slide { display: flex; flex-direction: column; }
.rf-lvs__shot { flex: 1; display: flex; align-items: center; width: 100%; margin-inline: auto; }

/* 펼친 페이지 캡처 — 책마다 판형이 달라서 그림 비율(--ar, 가로÷세로)대로 상자를 만듭니다.
   높이는 모든 레벨이 같고(최대 620px), 판형이 좁은 책은 가운데에 좁게 놓여 여백이 생기지 않습니다. */
.rf-lvs__shot .rf-slot {
  --ar: 2;
  aspect-ratio: var(--ar);
  width: min(100%, calc(min(620px, 60vw) * var(--ar)));
  margin-inline: auto;
  border-radius: 12px;
  box-shadow: 0 16px 28px -20px rgba(0, 41, 94, 0.6);
}

/* 이전 · 다음 — 슬라이드 양옆 가운데 */
.rf-lvs__side {
  position: absolute;
  top: 50%;
  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);
  cursor: pointer;
}

.rf-lvs__side:hover { border-color: var(--brand); color: var(--brand); }
.rf-lvs__side--prev { left: 6px; }
.rf-lvs__side--next { right: 6px; }
.rf-lvs.is-ready .rf-lvs__side { display: inline-flex; }

/* 이미지 자리 — 파일이 없으면 점선 상자에 파일명 · 권장 크기가 보입니다 */
.rf-slot {
  position: relative;
  display: block;
  width: 100%;
  border: 2px dashed #b9c9e2;
  border-radius: var(--radius);
  background: var(--brand-soft);
  overflow: hidden;
}

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

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

.rf-slot:has(> img:not([hidden])) { border: 1px solid var(--shelf); }

@media (min-width: 700px) {
  .rf-lvs__tabs { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .rf-lvs__slide { padding: 28px 30px 30px; }
  .rf-lvs__side { width: 52px; height: 52px; margin-top: -26px; }
  .rf-lvs__side--prev { left: 12px; }
  .rf-lvs__side--next { right: 12px; }
}

@media (min-width: 1000px) {
  .rf-lvs__slide { padding: 32px 76px 34px; }
  .rf-lvs__side--prev { left: 14px; }
  .rf-lvs__side--next { right: 14px; }
}


/* ── 레벨 특징 카드 (슬라이드 아래) ─────────────────────────── */
/* 레벨 1개당 카드 1장. 위 도서 슬라이드와 같은 폭 · 같은 속도로 따라 넘어갑니다.
   (손으로는 위 도서 슬라이드를 밀고, 카드는 스크립트가 따라 움직입니다.)
   스크립트가 막히면 첫 카드만 보입니다. */
.rf-lvcs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  margin: 14px 0 36px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.rf-lvc {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  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;
}

.rf-lvc__lv { font-size: 13px; font-weight: 700; color: var(--muted); }

.rf-lvc__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--band);
  letter-spacing: -0.02em;
}

.rf-lvc__feat {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

.rf-lvc__meta {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--shelf);
}

.rf-lvc__meta div { display: flex; justify-content: space-between; gap: 8px; }
.rf-lvc__meta dt { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rf-lvc__meta dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* 넓은 화면 — 레벨 이름 · 특징 · 정보 세 칸을 한 줄로 */
@media (min-width: 760px) {
  .rf-lvc {
    grid-template-columns: 170px minmax(0, 1fr) 240px;
    grid-template-rows: auto auto;
    column-gap: 28px;
    align-items: center;
    padding: 22px 28px;
  }
  .rf-lvc__lv { grid-column: 1; grid-row: 1; align-self: end; }
  .rf-lvc__name { grid-column: 1; grid-row: 2; align-self: start; }
  .rf-lvc__feat { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 17px; }
  .rf-lvc__meta { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--shelf); }
}

/* ── AWARDS & GLOBAL 현장 사진 4장 — 2 × 2, 모두 4:3 ───────── */
.rf-aw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 960px;
  margin: 0 auto 32px;
}

.rf-aw__fig { position: relative; margin: 0; }

.rf-aw__fig .rf-slot { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.rf-aw__fig .rf-slot > img { object-fit: cover; }
.rf-lvs__shot .rf-slot > img { object-fit: cover; }

.rf-aw__fig figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 14px 10px 8px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(transparent, rgba(0, 20, 50, 0.6));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

@media (min-width: 760px) {
  .rf-aw { gap: 12px; }
  .rf-aw__fig figcaption { font-size: 14px; padding: 22px 16px 12px; }
}

/* 교과 분야 카드 이미지 — 칸을 도서 표지 비율(3:4)에 맞춰 표지가 칸을 꽉 채웁니다.
   표지 원본 200 × 267 기준. */
.rf-subjects .rf-subject__shot {
  aspect-ratio: 3 / 4;
  min-height: 0;
  padding: 0;
  background: var(--brand-soft);
}

.rf-subjects .rf-subject__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 좁은 화면(가로 카드) — 왼쪽 표지 칸도 3:4 */
@media (max-width: 999px) {
  .rf-subjects .rf-subject { grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
  .rf-subjects .rf-subject__shot { aspect-ratio: 3 / 4; align-self: start; }
}

/* 교과 분야 카드 — 모바일(759px 이하)
   카드 틀 없이 도서 표지만 한 줄에 하나씩 보이고,
   표지 위에 검은색 50% 막을 깔아 분야명과 설명을 겹쳐 올립니다. */
@media (max-width: 759px) {
  /* 한 화면에 표지 1장 — 좌우 화살표 · 자동 넘김은 readingfarm.html 의 스크립트가 맡습니다 */
  .rf-subjects {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius);
  }

  .rf-subjects::-webkit-scrollbar { display: none; }

  .rf-subjects .rf-subject { scroll-snap-align: start; scroll-snap-stop: always; }

  .rf-subjects .rf-subject {
    position: relative;
    display: block;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: none;
  }

  .rf-subjects .rf-subject__shot { aspect-ratio: 3 / 4; align-self: auto; }

  .rf-subjects .rf-subject__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 20px;
    background: rgba(0, 0, 0, 0.5);
  }

  .rf-subjects .rf-subject__name { color: #fff; font-size: 18px; }
  .rf-subjects .rf-subject__ko { color: rgba(255, 255, 255, 0.85); font-size: 14px; }
  .rf-subjects .rf-subject__text { margin-top: 8px; color: #fff; font-size: 14px; line-height: 1.6; }
}

/* 교과 분야 슬라이드 — 좌우 화살표 (모바일에서만, 스크립트가 준비되면 보임) */
.rf-subj { position: relative; }

.rf-subject--clone { display: none; }

.rf-subj__side {
  position: absolute;
  top: 50%;
  z-index: 3;
  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);
  cursor: pointer;
}

.rf-subj__side--prev { left: 10px; }
.rf-subj__side--next { right: 10px; }

@media (max-width: 759px) {
  .rf-subject--clone { display: block; }
  .rf-subj.is-ready .rf-subj__side { display: inline-flex; }
}

/* ── 출판사 카드 펼쳐보기 (휴대폰) ───────────────────────── */
/* 한 줄에 한 장일 때는 로고 · 한 줄 소개만 보이고, 대표 시리즈는 버튼으로 펼칩니다.
   스크립트가 꺼져 있으면(html.no-js) 접지 않고 모두 보여 줍니다. */
.rf-pc__more { display: none; }
@media (max-width: 699px) {
  .rf-pc__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 9px 18px;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: 999px;
    background: var(--paper);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .rf-pc__more svg { transition: transform 0.2s ease; }
  .rf-pc.is-open .rf-pc__more svg { transform: rotate(180deg); }
  html.no-js .rf-pc__more { display: none; }
  html:not(.no-js) .rf-pc:not(.is-open) .rf-pc__desc { display: none; }
}

/* ── 섹션 머리말 (휴대폰) — 영문 구분 라벨과 큰 제목 사이를 조금 더 띄웁니다 ── */
@media (max-width: 759px) {
  .section-head > .eyebrow { margin-bottom: 10px; }
}