/* 강의 소개 · 지난 강의 페이지 전용. 공용 규격은 /lp/ai_bootcamp_01/vibe.css 를 그대로 쓰고
   여기에는 이 페이지들에만 필요한 것만 둔다. */

/* ── 글 후기 카드 (캡처 없이 본문만) ── */
/* 후기 한 장 — 구분선으로만 가른다(상자를 겹치면 941개가 답답해진다). */
.rvtext{ padding:26px 0; border-top:1px solid var(--line); }
.rvtext:first-of-type{ border-top:0; }

/* 머리글은 두 줄이다. 윗줄 = 누가 썼나 + 별점, 아랫줄 = 어느 과정 · 언제.
   한 줄에 넷을 다 넣으면 좁은 화면에서 날짜 중간이 갈라진다(실측). */
.rvhead{ display:flex; flex-direction:column; gap:3px; margin-bottom:11px; }
.rvtop{ display:flex; align-items:baseline; gap:10px; }
.rvtop b{ font-size:15px; font-weight:700; color:var(--navy); }
.rvtop .rvstar{ margin-left:auto; flex:0 0 auto; font-size:13px; color:var(--accent); letter-spacing:.08em; }
.rvhead .rvmeta{ font-size:13px; line-height:20px; color:var(--ink-soft); }

/* 같은 글이 과정마다 따로 실려 목록이 중복으로 채워졌다. 한 번만 싣고,
   여러 과정을 들었다는 사실은 이 표시로 남긴다. */
.rvalso{ align-self:flex-start; margin-top:5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--white);
  font-size:12px; line-height:18px; font-weight:600; color:var(--ink-soft); }

/* 후기 원문에는 줄바꿈이 들어 있다 — pre-wrap 이 없으면 문단 안의 줄바꿈이 공백으로 뭉개져
   한 덩어리로 흘러버린다(941개 중 472개가 해당). 접기·[상세보기] 는 review-readable.js. */
/* 후기 원문에는 줄바꿈이 들어 있다 — pre-wrap 이 없으면 문단 안의 줄바꿈이 공백으로 뭉개져
   한 덩어리로 흘러버린다(941개 중 472개가 해당). 접기·[상세보기] 는 review-readable.js. */
.rvbody p{ margin:0 0 10px; font-size:15px; line-height:27px; color:var(--ink);
  white-space:pre-wrap; word-break:keep-all; overflow-wrap:break-word; }
.rvbody p:last-child{ margin-bottom:0; }

/* ── 지난 강의: 결제 자리를 대신하는 안내 ── */
.rewards.past{ display:block; }
.rewards.past .past-note{ margin:0 0 16px; font-size:15px; line-height:25px; color:var(--ink-soft);
  word-break:keep-all; }

/* 소개 페이지에는 오른쪽 결제 칸이 없다 — 격자를 한 단으로 되돌린다 */
.page-grid.solo{ grid-template-columns:minmax(0,1fr); }

/* ── 강의 소개 페이지의 과정 카드 ── */
/* section 기본값이 위아래 160px 이라, 새 섹션은 자기 여백을 직접 정해야 한다 */
section.clist{ padding:0; margin:0 0 56px; }
.clist .eyebrow{ display:block; margin-bottom:18px; }
.clist .rnote{ margin-top:18px; font-size:13px; color:var(--ink-soft); }
/* 칸 최소값을 못 박지 않으면 긴 제목에 밀려 칸이 넘친다 */
.cgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; }
.ccard{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:26px 24px 22px;
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  text-decoration:none; transition:border-color .15s, transform .15s; }
.ccard:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.ccard b{ font-size:19px; font-weight:800; line-height:1.4; letter-spacing:-.4px; color:var(--navy);
  word-break:keep-all; }
.ccard .cs{ font-size:15px; line-height:24px; color:var(--ink-soft); word-break:keep-all; }
.ccard .cn{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.ccard .cgo{ margin-top:14px; font-size:14px; font-weight:700; color:var(--accent); }
.ccard.past{ background:none; }
.ccard.past b{ color:var(--ink); }

/* ── 상세 이미지: 폭에 꽉 차게 ── */
.story-body img{ display:block; width:100%; height:auto; }

@media (max-width:640px){
  .rvhead .rvstar{ margin-left:0; width:100%; }
  section.clist{ margin-bottom:44px; }
  .ccard{ padding:22px 20px 20px; }
  .ccard b{ font-size:18px; }
}

/* ── 강의 소개 히어로: 제목 아래 숫자 한 줄 ── */
/* 제목과 한 덩어리로 읽혀야 하니 h1 안에 두고, 크기만 낮춰 제목을 가리지 않게 한다 */
.hero h1 .t3{ display:block; margin-top:9px; font-size:15px; font-weight:700;
  letter-spacing:0; color:var(--accent); }

/* 지난 강의 이름은 길다(「직원 없이 월 5억 사업의 설계도 - [ 경제적 자유 예약하기 ]」) —
   공용 vibe.css 의 「좁은 화면에서도 이름은 한 줄」을 여기서만 풀어 줄을 바꾼다. 풀지 않으면 오른쪽이 잘린다 */
@media (max-width:860px){
  .hero h1 .t1{ white-space:normal; }
}

/* 과정 카드 제목 앞뒤의 대괄호 표시([신규런칭] 등) */
/* keep-all 은 .ccard b 에서 물려받는다 — 여기서 nowrap 을 주면 좁은 카드에서 넘친다 */
.ccard b i{ font-style:normal; font-size:13px; font-weight:700; letter-spacing:0;
  color:var(--accent); }

/* ── 후기 요약 — 목록 위에 먼저 온다 ──
   831개를 다 읽을 사람은 없다. 읽었다면 무엇을 알게 됐을지를 먼저 보여준다.
   문구는 사람이 고른 것이다(자동 요약 아님) — 생성 스크립트의 SUMMARY 에 있다. */
.rvsum{ margin:0 0 30px; padding:22px 24px; background:var(--white);
  border:1px solid var(--line); border-radius:16px; }
.rvsum .lab{ margin:0 0 14px; font-size:13px; font-weight:700; color:var(--accent); }
.rvsum ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.rvsum li{ position:relative; padding-left:19px; font-size:15.5px; line-height:26px; color:var(--navy); }
.rvsum li::before{ content:"“"; position:absolute; left:0; top:2px;
  font-size:20px; line-height:26px; color:var(--line-2); }
@media (max-width:720px){
  .rvsum{ padding:18px 16px; margin-bottom:22px; }
  .rvsum li{ font-size:14.5px; line-height:24px; }
}