/* 평생사주 무료 결과지 프롤로그 웹툰. 컷은 카드와 같은 전체 폭으로 사선으로 자르며, 풍선 글자와 꼬리는 화면에서 얹는다. */
.pg-prologue { display: grid; gap: 28px; margin: 4px 0 8px; padding: 0; }
.pg-space { display: block; }
.pg-cut { position: relative; margin: 0; width: 100%; container-type: inline-size; }
.pg-art { position: absolute; inset: 0; overflow: hidden; background: #efe6d6; }
.pg-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-bubble {
  position: absolute; box-sizing: border-box; z-index: 1; visibility: hidden;
  color: #2f2822; text-align: center; word-break: keep-all;
  font: 700 clamp(12.5px, 4.3cqw, 17px)/1.45 Pretendard, 'Pretendard Variable', system-ui, sans-serif;
  letter-spacing: -.02em;
}
.pg-bubble.pg-edited { font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.pg-bubble.pg-edited .pg-text { gap: 0; }
.pg-bubble.pg-ready { visibility: visible; }
/* 그림 바깥 풍선: 컷 위 종이에 놓고 아래 가장자리만 컷에 살짝 걸친다(꼬리가 그림 속으로 들어간다). */
.pg-bubble.pg-out { position: relative; z-index: 2; margin: 22px 0 -14px; padding: 6.4% 11.5% 6.8%; font-size: 16px; line-height: 1.42; }
/* 이어진 컷의 바깥 풍선: 컷 사이를 벌리지 않고, 풍선 아래 가장자리만 이 컷에 걸친 채 앞 컷 위로 겹쳐 띄운다. 폭 기준은 컷 폭이다. */
.pg-bubble.pg-out.pg-out-float { position: absolute; z-index: 3; bottom: auto; margin: 0; padding: 6.4cqw 11.5cqw 6.8cqw; }
.pg-bubble > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-text { position: relative; display: flex; flex-direction: column; gap: .15em; }
.pg-text p { margin: 0; text-wrap: balance; word-break: keep-all; }
.pg-mark { position: absolute; z-index: 1; display: grid; place-items: center; width: auto; padding: 2.4cqw 3.6cqw; white-space: nowrap; margin: 0; border: 1.5px solid #a3392b; border-radius: 999px; background: rgba(255, 253, 249, .92); color: #a3392b; font: 800 clamp(11.5px, 4cqw, 16px)/1 Pretendard, 'Pretendard Variable', system-ui, sans-serif; letter-spacing: -.02em; transform: translate(-100%, -50%) rotate(-8deg); box-shadow: 0 2px 10px rgba(163, 57, 43, .35); }
.pg-part2 { gap: 22px; }
.pg-narration { white-space: pre-line; display: block; width: fit-content; max-width: 100%; margin: 28px auto 24px; text-align: center; padding: .5em 1em; background: #fffdf9; border: 1.5px solid #4a4038; color: #2f2822; font: 700 clamp(12px, 3.9vw, 16px)/1.5 Pretendard, 'Pretendard Variable', system-ui, sans-serif; letter-spacing: -.02em; word-break: keep-all; box-shadow: 0 2px 8px rgba(74,64,56,.08); }

/* 설명 컷(파트4)의 목록 카드: 따뜻한 한지 색 카드 */
.pg-listcard { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8% 7%; text-align: center; color: #2f2822; word-break: keep-all; background: rgba(255, 250, 240, .55); }
.pg-listcard-title { margin: 0 0 4px; color: #a3392b; font: 800 clamp(15px, 5cqw, 20px)/1.5 'Noto Serif KR', Georgia, serif; }
.pg-listcard-rows { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.pg-listcard-rows li { display: grid; grid-template-columns: 3.2em 1fr; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid #4a4038; border-radius: 8px; background: #fffdf9; text-align: left; font: 600 clamp(12px, 3.8cqw, 15px)/1.5 Pretendard, 'Pretendard Variable', system-ui, sans-serif; }
.pg-listcard-rows b { color: #a3392b; font-weight: 800; }
.pg-narration + .pg-narration { margin-top: 10px; }

/* 그림 안 위쪽 가운데의 글 상자(나레이션 상자와 같은 모양, 그림 위에 얹힘) */
.pg-caption { position: absolute; z-index: 2; left: 50%; top: 9%; transform: translateX(-50%); margin: 0; max-width: 92%; white-space: nowrap; text-align: center; padding: .45em 1em; background: rgba(255, 253, 249, .94); border: 1.5px solid #4a4038; border-radius: 0; color: #2f2822; font: 700 clamp(12px, 3.9vw, 16px)/1.5 Pretendard, 'Pretendard Variable', system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }

/* 도입 웹툰 b: 컷 사이에 놓인 주월 소개 박스는 위아래 공간을 넓게 둔다 */
.pg-part8 .pg-narration:has(+ .pg-cut) { margin-top: 46px; margin-bottom: 42px; }

/* 효과음: 편집기(webtoon-editor)의 효과음 기본값과 같다. 주아 글꼴, 어두운 테두리(#202124, 글자 크기의 5%), 글자는 흰색(배경이 어두운 밤 장면이라). 색을 바꾸려면 데이터의 color. 조용한 손동작 소리만 작게. */
.pg-sfx { position: absolute; z-index: 2; white-space: nowrap; pointer-events: none; color: #ffffff; line-height: 1; -webkit-text-stroke: .1em #202124; paint-order: stroke fill; }
.pg-caption.is-bottom { top: auto; bottom: 12%; }   /* captionPos: 'bottom' 이면 그림 아래쪽 안에 둔다(다음 컷이 겹쳐 오는 컷이면 data 쪽에서 captionPos 를 쓰지 않는다) */   /* captionPos: 'bottom' 이면 그림 아래쪽 안에 둔다 */