/* ══════════════════════════════════════════════════════════════════════════
   챌린지 상세 — ①안 '결과 먼저' 배치 공용 스타일 + 활자·폭 한 벌 (2026-09-07 오너 확정)
   설계: docs/superpowers/specs/2026-09-07-challenge-detail-conversion-design.md
   싣는 법: 인라인 <style> 블록 **뒤**에 <link rel="stylesheet" href="challenge-detail.css?v=4">

   ── 활자 규칙(2026-09-07 오너 "그 값으로 5종에 적용") ─────────────────────────────
   클래스101·인프런 강의 상세 실측(375px)에 맞춘 값이다 — 두 사이트 공통: 제목은 본문보다 조금만 크다
   (20~22px), 굵기는 700 이 최대, 본문 16px 행간 1.5~1.75, 글자 시작선은 한 곳, 정렬은 전부 왼쪽.
     페이지 제목 22/28px · 섹션 제목 20/24px · 카드 제목 16px · 본문 16px(1.65) · 보조 14px(1.5) · 캡션 12.5px
     굵기 400·600·700 셋만(참가비 금액·하단 바 금액도 700 — 크기로만 키운다) · 자간은 제목 -0.01em, 나머지 0
     폭: 모바일 좌우 16px 한 줄, 데스크톱 본문 720px 한 줄(히어로·후기·카드·FAQ·마무리 전부)
   ⚠️ 이 페이지엔 활자 규칙이 다섯 곳(tokens.css · 인라인 공통 블록 · 이 파일 · 스크립트 3개가 심는 스타일 ·
      카드 인라인)에서 나온다. **여기서 `body[data-challenge]` 특이도로 전부 덮는다** — 다른 곳에 값을 다시
      쓰면 다시 뒤죽박죽이 된다(2026-09-07 오너 "행간·자간이 하나도 정렬이 안 돼 있다").
   ⚠️ 상세 5종의 인라인 공통 CSS 블록은 손대지 않는다(다섯 파일 동일 유지). 색은 tokens.css 변수만.
   ⚠️ tokens.css 의 h2.section-title 800 은 사이트 공통이라 그대로 두고, 상세 안에서만 700 으로 덮는다.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-challenge] {
  /* 2026-09-07 오너 "다닥다닥 붙어 있다" → B안(여백·위계 + 판·아이콘). 제목 22/20 → 24/22, 섹션 간격 48 → 80.
     ⚠️ 섹션 간격은 목록·상자 간격(10~14px)과 뚜렷이 달라야 '어디서 섹션이 바뀌는지'가 읽힌다 — 48 로 되돌리지 말 것. */
  --cd-h1: 24px; --cd-h2: 22px; --cd-h3: 16px;
  --cd-body: 16px; --cd-sub: 14px; --cd-cap: 12.5px;
  --cd-lh-head: 1.3; --cd-lh-body: 1.65; --cd-lh-sub: 1.5;
  --cd-ls-head: -0.01em;
  --cd-gap: 80px;                 /* 섹션 사이 */
}
@media (min-width: 860px) {
  body[data-challenge] { --cd-h1: 30px; --cd-h2: 26px; --cd-gap: 104px; }
}

/* ── 0. 폭 한 줄 — 인라인 .container(800) 를 760 으로 좁혀 내용 폭 720. 카드·목록은 그 폭을 그대로 쓴다 ── */
body[data-challenge] .container { max-width: 760px; }
body[data-challenge] .hero-wrap { max-width: 760px; }

/* ── 1. 히어로: 사진 + 약속 한 줄 + 사실 알약 3개 + 신청 버튼 ── */
/* 위 57px = 모바일 고정 nav 높이(nav.css `body[data-nav-offset]` 와 같은 값 · 2026-09-07 실측 57) — 사진이 바로 밑에 붙는다.
   ⚠️ 66 으로 두면 9px 흰 띠가 생긴다. 데스크톱(≥860)은 아래 미디어쿼리(nav 67 + 여백). */
.hero.hero--photo { padding: 57px 0 56px; }
.hero-wrap { margin: 0 auto; }
.hero-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg3); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.hero-photo .hero-badge { position: absolute; left: 16px; top: 16px; margin: 0; background: rgba(255,255,255,.94); }
body[data-challenge] .hero-badge { font-size: var(--cd-cap); font-weight: 700; letter-spacing: 0; }
.hero--photo .hero-inner { padding-top: 22px; }
body[data-challenge] .hero--photo .hero-title {
  font-size: var(--cd-h1); font-weight: 700; line-height: var(--cd-lh-head); letter-spacing: var(--cd-ls-head); margin-bottom: 10px;
}
body[data-challenge] .hero--photo .hero-desc { font-size: var(--cd-body); line-height: var(--cd-lh-body); margin-bottom: 16px; max-width: none; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fact-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--border); font-size: var(--cd-sub); font-weight: 600; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums; }
.fact-pill[hidden] { display: none; }
.fact-pill strong { color: var(--accent-ink); font-weight: 700; }
.fact-pill s { color: var(--text-muted); font-weight: 400; text-decoration-thickness: 1.5px; }
.fact-pill s[hidden] { display: none; }
.fact-pill .won { font-size: var(--cd-cap); }
/* recruit.js 가 #recruitChip 안에 붙이는 D-day 조각 — 임박(3일 이하)만 채운 알약 */
.fact-pill .dday-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--action-tint); color: var(--accent-ink); font-size: var(--cd-cap); font-weight: 700; }
.fact-pill .dday-urgent { background: var(--action); color: var(--action-ink); }
.hero--photo .hero-actions { flex-direction: column; }
.hero--photo .hero-actions .btn { width: 100%; }
.hero-note { margin-top: 10px; font-size: var(--cd-sub); line-height: var(--cd-lh-sub); color: var(--text-muted); }
@media (min-width: 860px) {
  .hero.hero--photo { padding-top: 96px; }
  .hero-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 0 20px; }
  .hero-photo { border-radius: var(--radius); }
  .hero--photo .hero-inner { padding: 0; margin: 0; max-width: none; }
  .hero--photo .hero-actions { flex-direction: row; }
  .hero--photo .hero-actions .btn { width: auto; min-width: 200px; }
}

/* ── 2. 섹션 공통 — 제목·라벨·부제를 한 벌로. 인라인 section 규칙(padding-top 0)과 tokens 의 h2.section-title 을 덮는다 ── */
.cd-sec { padding: 0 0 var(--cd-gap); }
body[data-challenge] .section-label { font-size: var(--cd-cap); font-weight: 700; letter-spacing: .12em; line-height: 1.4; margin-bottom: 10px; }
/* 섹션 시작 표시 — 라벨 앞 짧은 네이비 선(허브 .section-label 과 같은 문법) */
body[data-challenge] .section-label::before { content: ''; display: inline-block; width: 22px; height: 2px; background: var(--action); margin-right: 8px; vertical-align: middle; }
body[data-challenge] h2.section-title, body[data-challenge] .section-title {
  font-size: var(--cd-h2); font-weight: 700; line-height: var(--cd-lh-head); letter-spacing: var(--cd-ls-head); margin-bottom: 18px;
}
.cd-lead { font-size: var(--cd-body); color: var(--text-muted); line-height: var(--cd-lh-body); margin: -6px 0 20px; word-break: keep-all; }
.cd-more { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--cd-sub); font-weight: 700; color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px; }

/* ── 3. 비포/애프터 — 1쌍만 펼치고 나머지는 버튼. 카드 안 활자는 인라인 값 대신 여기(ba-name·ba-quote 는 마크업 클래스) ── */
.ba-list { display: flex; flex-direction: column; gap: 16px; }
.ba-rest { display: flex; flex-direction: column; gap: 16px; }
.ba-rest[hidden] { display: none; }
.ba-name { font-size: var(--cd-h3); font-weight: 700; line-height: var(--cd-lh-head); color: var(--text); }
.ba-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--action); display: flex; align-items: center; justify-content: center;
  font-size: var(--cd-sub); color: #fff; font-weight: 700; flex-shrink: 0; }
.ba-quote { font-size: var(--cd-body); color: var(--text-muted); line-height: var(--cd-lh-body); margin: 0; word-break: keep-all; }
body[data-challenge] .ba-tx { font-size: var(--cd-cap); font-weight: 700; }
.ba-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 14px 0 0;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(27,58,107,.55); background: var(--surface);
  color: var(--accent-ink); font: inherit; font-size: var(--cd-body); font-weight: 700; cursor: pointer; }
.ba-more-btn::after { content: '▾'; font-size: 13px; }
.ba-more-btn[aria-expanded="true"]::after { content: '▴'; }
.ba-more-btn:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }

/* ── 3-1. 전환 밴드(2026-09-18) — '증거' 섹션(3번) 뒤 사진 한 장. 모바일 전체 폭, 데스크톱은 본문 폭(720) ──
   이미지 images/cd-band-<id>.webp(16:9 · Seedream 4.5). 설계: docs/superpowers/specs/2026-09-16-challenge-detail-imagery-design.md
   ⚠️ 전체 폭 밴드 금지의 승인된 예외(홈 ④ 숫자와 같은 문법 — 금지가 막은 건 순백과 옅은 판이 만드는 가로선이다).
   사진 위아래 가장자리는 이미지 파일에 어둡게 구워 넣었다(흰 창·흰 벽이 순백에 녹지 않게) — CSS 로 덧칠하지 말 것. */
.cd-band { margin: 0 0 var(--cd-gap); }
.cd-band img { display: block; width: 100%; height: auto; }
@media (min-width: 860px) {
  .cd-band { max-width: 760px; margin-left: auto; margin-right: auto; padding: 0 20px; }
  .cd-band img { border-radius: var(--radius); }
}

/* ── 4. 체크 목록(추천 대상 · 결과물) ── */
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fit-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--cd-body); line-height: var(--cd-lh-body); color: var(--text); word-break: keep-all; }
.fit-list li b { font-weight: 700; }
.fit-list li::before { content: ''; flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background-color: var(--action-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231B3A6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }
@media (min-width: 640px) { .fit-list { grid-template-columns: 1fr 1fr; } }
body[data-challenge] .cd-sec h3 { font-size: var(--cd-h3); font-weight: 700; line-height: var(--cd-lh-head); color: var(--text); margin: 22px 0 10px; }

/* ── 5. 2주 진행 방식 — 사실 4칸 + 주차 접이(인라인 .curriculum-* 활자를 덮는다) + 담당 코치 한 줄 ── */
.how-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.how-fact { padding: 14px 14px 12px; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border-soft); }
/* 사실 칸 아이콘 — 마크업 data-icon 으로 고른다(자체 선 아이콘 · 이모지 금지) */
.how-fact::before { content: ''; display: block; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 9px; background: var(--action-tint) center/18px no-repeat; }
.how-fact[data-icon="clock"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.how-fact[data-icon="list"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12'/%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='4' cy='18' r='1'/%3E%3C/svg%3E"); }
.how-fact[data-icon="chat"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H8l-5 3 1.5-4.5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.how-fact[data-icon="person"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.how-fact[data-icon="play"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7 4 20 12 7 20 7 4'/%3E%3C/svg%3E"); }
.how-fact b { display: block; font-size: var(--cd-h3); font-weight: 700; color: var(--text); line-height: var(--cd-lh-head); }
.how-fact span { display: block; margin-top: 3px; font-size: var(--cd-sub); color: var(--text-muted); line-height: var(--cd-lh-sub); word-break: keep-all; }
@media (min-width: 640px) { .how-facts { grid-template-columns: repeat(4, 1fr); } }
body[data-challenge] .curriculum-list { gap: 12px; }
body[data-challenge] .week-header { padding: 14px 16px; gap: 12px; }
body[data-challenge] .week-num { width: 34px; height: 34px; font-size: var(--cd-sub); font-weight: 700; }
body[data-challenge] .week-title { font-size: var(--cd-h3); font-weight: 700; line-height: var(--cd-lh-head); }
body[data-challenge] .week-sub { font-size: var(--cd-sub); line-height: var(--cd-lh-sub); margin-top: 3px; }
body[data-challenge] .week-body { padding: 0 16px 16px; }
body[data-challenge] .lesson-item { font-size: var(--cd-body); line-height: var(--cd-lh-body); }
body[data-challenge] .lesson-item strong { font-weight: 700; margin-bottom: 2px; }
.coach-line { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--action-tint); border: 1px solid rgba(27,58,107,.28); }
.coach-line img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; object-fit: cover; object-position: center 18%; background: var(--bg2); }
.coach-line .who { min-width: 0; }
.coach-line .nm { display: block; font-size: var(--cd-h3); font-weight: 700; color: var(--text); line-height: var(--cd-lh-head); word-break: keep-all; }
.coach-line .nm i { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--action);
  color: var(--action-ink); font-size: var(--cd-cap); font-weight: 700; vertical-align: 1px; }
.coach-line .po { display: block; margin-top: 3px; font-size: var(--cd-sub); color: var(--text-muted); line-height: var(--cd-lh-sub); }
.coach-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: var(--cd-sub); font-weight: 700; color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px; }

/* ── 5-1. 진행 3단계 사진 줄(2026-09-18 선 아이콘 → 사진) — 마크업 .cd-steps > .cd-step > img + b ──
   사진 6장(images/cd-step-*.webp · 1:1)을 5종이 나눠 쓴다: 보신각·스피닝 watch/record/review ·
   영합각 watch/film/review · 승자각·댄특완 watch/write/submit. 흰색은 밴드 톤에 맞춰 파일에서 보정했다. */
.cd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; }
.cd-step { text-align: center; font-size: var(--cd-cap); color: var(--text-muted); line-height: 1.4; word-break: keep-all; }
/* 옅은 테두리 — 흰 책상 사진이 순백 배경에 녹는다(구 아이콘 원과 같은 --border-soft) */
.cd-step img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border-soft); margin: 0 0 8px; }
.cd-step b { display: block; font-size: var(--cd-sub); color: var(--text); font-weight: 700; margin-bottom: 2px; }

/* ── 판(B안): 추천·후기·FAQ 를 옅은 면에 담아 흰 섹션과 번갈아 놓는다.
   ⚠️ 전체 폭 띠가 아니다 — 섹션 좌우 여백(16/20px)을 남기고 둥근 판만 칠한다(design-principles '--bg2 는 카드 안 옅은 판 전용'). */
.cd-sec.is-panel { padding-left: 16px; padding-right: 16px; }
.cd-sec.is-panel .container { background: var(--bg2); border-radius: 20px; padding: 26px 16px 28px; }
body[data-challenge] .ch-rv.is-panel .ch-rv-in { background: var(--bg2); border-radius: 20px; padding: 26px 16px 28px; }
.is-panel .faq { background: var(--surface); border-radius: 14px; border: 1px solid var(--border-soft); padding: 0 14px; }
.is-panel .faq details:last-child { border-bottom: 0; }
@media (min-width: 601px) { .cd-sec.is-panel { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 860px) {
  .cd-sec.is-panel { padding-left: 0; padding-right: 0; }
  .cd-sec.is-panel .container, body[data-challenge] .ch-rv.is-panel .ch-rv-in { padding: 32px 28px; }
}

/* ── 후기 섹션(challenge-reviews.js 가 심는 스타일을 덮는다) — 같은 폭·왼쪽 정렬·같은 활자 ── */
body[data-challenge] .ch-rv { padding: 0 20px var(--cd-gap); }
@media (max-width: 600px) { body[data-challenge] .ch-rv { padding: 0 16px var(--cd-gap); } }
body[data-challenge] .ch-rv-in { max-width: 720px; }
body[data-challenge] .ch-rv-head { text-align: left; margin-bottom: 0; }
body[data-challenge] .ch-rv-grid { gap: 14px; }
body[data-challenge] .ch-rv-card { padding: 16px; gap: 10px; }
body[data-challenge] .ch-rv-badge { font-size: var(--cd-cap); font-weight: 700; }
body[data-challenge] .ch-rv-q { font-size: var(--cd-body); line-height: var(--cd-lh-body); }
body[data-challenge] .ch-rv-who { font-size: var(--cd-sub); font-weight: 600; line-height: var(--cd-lh-sub); }
body[data-challenge] .ch-rv-more { margin: 16px 0 0; max-width: none; font-size: var(--cd-body); font-weight: 700; min-height: 48px; }

/* ── 6. 참가비 카드 ── */
.price-card { padding: 20px 18px; border-radius: var(--radius); border: 1.5px solid var(--action); background: var(--surface); box-shadow: var(--shadow); }
.price-cap { font-size: var(--cd-sub); font-weight: 600; color: var(--text-muted); line-height: var(--cd-lh-sub); }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.price-line s { font-size: var(--cd-body); color: var(--text-muted); text-decoration-thickness: 1.5px; }
.price-line s[hidden] { display: none; }
.price-line strong { font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: var(--cd-ls-head); line-height: 1.1; }
.price-line strong .won { font-size: var(--cd-body); font-weight: 700; margin-left: 1px; }
.price-inc { list-style: none; display: grid; gap: 10px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--border-strong);
  font-size: var(--cd-body); line-height: var(--cd-lh-sub); color: var(--text); }
.price-inc li { display: flex; gap: 8px; word-break: keep-all; }
.price-inc li::before { content: '·'; font-weight: 700; color: var(--accent-ink); }
.price-card .btn { width: 100%; margin-top: 18px; }
.price-refund { margin-top: 12px; font-size: var(--cd-cap); color: var(--text-muted); line-height: var(--cd-lh-sub); word-break: keep-all; }
.price-refund a { color: var(--accent-ink); font-weight: 700; }

/* ── 7. FAQ — 네이티브 details(키보드·낭독기 기본 지원) ── */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0;
  font-size: var(--cd-body); font-weight: 700; line-height: var(--cd-lh-head); color: var(--text); cursor: pointer; word-break: keep-all; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; font-size: 22px; font-weight: 400; color: var(--text-muted); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq summary:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 6px; }
.faq p { padding: 0 0 16px; font-size: var(--cd-body); line-height: var(--cd-lh-body); color: var(--text-muted); word-break: keep-all; }
.faq p a { color: var(--accent-ink); font-weight: 700; }

/* ── 8. 마무리 상자(가운데 정렬 유일 예외) + 하단 바 활자 ── */
body[data-challenge] .cta-title { font-size: var(--cd-h1); font-weight: 700; line-height: var(--cd-lh-head); letter-spacing: var(--cd-ls-head); margin-bottom: 10px; }
body[data-challenge] .cta-desc { font-size: var(--cd-body); line-height: var(--cd-lh-body); margin-bottom: 22px; }
body[data-challenge] .btn-white, body[data-challenge] .btn-primary { font-weight: 700; }
body[data-challenge] .ch-sticky .p { font-weight: 700; }
body[data-challenge] .ch-sticky .p .was, body[data-challenge] .ch-sticky .p .won { font-weight: 600; }
body[data-challenge] .ch-sticky .s { font-size: var(--cd-cap); }
body[data-challenge] .ch-sticky .go { font-weight: 700; }

/* ── 8-1. 마무리 상자 사진(2026-09-18) — 밤하늘 기내 창(images/cd-outro.webp · 1:1) + 남색 덮개 ──
   ⚠️ 인라인 .cta-box::before 는 오른쪽 위 220px 원형 장식이다. width·height·border-radius 를 리셋하지 않으면
      덮개가 왼쪽 위 원 하나로 줄어든다(2026-09-17 실측 — 목업이 이 상태로 한 번 승인됐다).
   덮개 알파는 글씨 줄마다 실측해 정했다(폰 320·375·430 · 데스크톱 1280, 흰 글씨 최저 5:1대). 사진·문구를 바꾸면
   다시 잰다 — 방법·표는 설계 문서 '사진 위 글씨 대비' 절. 덮개색은 홈 사진 덮개(index.css)와 같은 값.
   사진 뒤 그라디언트 = 로드 전·실패 폴백(인라인 .cta-box 와 같은 색) — 흰 글씨가 흰 바탕에 뜨지 않게. */
body[data-challenge] .cta-box {
  background-image: url("images/cd-outro.webp"), linear-gradient(150deg, var(--accent) 0%, var(--accent-dark) 100%);
  background-size: cover; background-position: 50% 50%;
}
body[data-challenge] .cta-box::before {
  inset: 0; width: auto; height: auto; border-radius: 0;
  /* 폰: 제목·설명 뒤는 짙은 별하늘이라 옅게, 아래 작은 글씨 뒤는 밝은 구름층이라 진하게 */
  background: linear-gradient(180deg, rgba(18,28,46,.24) 0%, rgba(18,28,46,.26) 45%, rgba(18,28,46,.72) 62%, rgba(18,28,46,.74) 100%);
}
@media (min-width: 860px) {
  /* 데스크톱: 1:1 사진이 넓게 확대돼 제목 뒤에 밝은 창틀이 온다 — 폰 값을 쓰면 제목 대비가 무너진다 */
  body[data-challenge] .cta-box::before {
    background: linear-gradient(180deg, rgba(18,28,46,.60) 0%, rgba(18,28,46,.60) 34%, rgba(18,28,46,.44) 48%, rgba(18,28,46,.68) 68%, rgba(18,28,46,.70) 100%);
  }
}