/* Guide screenshots are display-only. They should not open larger versions. */
.guide-page .guide-shot > a[href^="/screens/"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* Future source builds render the image directly instead of wrapping it in a link. */
.guide-page .guide-shot > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
}

/* The currently deployed bundle still contains the old "tap to enlarge" suffix.
   Replace those captions visually with the same caption text minus that suffix. */
.guide-page .guide-shot > figcaption {
  font-size: 0 !important;
}
.guide-page .guide-shot > figcaption::before {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}
.guide-page .guide-shot:has(img[src$="/hub.jpg"]) > figcaption::before { content: "실제 앱의 학습 허브입니다."; }
.guide-page .guide-shot:has(img[src$="/practice.jpg"]) > figcaption::before { content: "챕터별 개념확인 문제 화면입니다."; }
.guide-page .guide-shot:has(img[src$="/reagent.jpg"]) > figcaption::before { content: "시약 드릴 화면입니다."; }
.guide-page .guide-shot:has(img[src$="/exam-reagent.jpg"]) > figcaption::before { content: "기출 반응 시약 퀴즈입니다."; }
.guide-page .guide-shot:has(img[src$="/mock.jpg"]) > figcaption::before { content: "실전 모의고사 화면입니다."; }
.guide-page .guide-shot:has(img[src$="/pastpaper.jpg"]) > figcaption::before { content: "연도별 기출 해설 화면입니다."; }
.guide-page .guide-shot:has(img[src$="/review.jpg"]) > figcaption::before { content: "오답·북마크 복습 화면입니다."; }
.guide-page .guide-shot:has(img[src$="/kakao-review.jpeg"]) > figcaption::before { content: "실제 이용자분이 보내주신 카카오톡입니다."; }