/* 평생사주 무료 결과지의 컷 연출(overview-cuts.js). 컷은 네모로 넣지 않고 사선과 페이드로 자르고, 폭과 위치를 컷마다 바꾼다. */
/* 효과음 글씨: Gaegu 700 에서 효과음 글자만 담은 부분 글꼴(public/fonts/gaegu). SIL OFL 1.1 */
@font-face { font-family: 'Gaegu SFX'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/gaegu/gaegu-700-sfx.woff2) format('woff2'); }
.ov-cut { margin: 0; padding: calc(var(--ov-over-top, 0) * 100% + 6px) 0 calc(var(--ov-over-bottom, 0) * 100% + 6px); container-type: inline-size; }
.ov-cut-stage { position: relative; width: 100%; }
/* 그림 상자: 왼쪽 위치와 폭은 컷마다 인라인으로 준다(전폭, 오른쪽 몰기, 왼쪽 몰기). */
.ov-cut-art { position: absolute; top: 0; bottom: 0; }
.ov-cut-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 위아래 가장자리만 종이로 번지는 기본 마스크와 사선 */
.ov-cut--slant-br .ov-cut-art, .ov-cut--slant-bl .ov-cut-art { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
.ov-cut--slant-br .ov-cut-art { clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%); }
.ov-cut--slant-bl .ov-cut-art { clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%); }
/* 안쪽 가장자리가 종이로 번지는 컷: 그림이 오른쪽에 붙으면 왼쪽이, 왼쪽에 붙으면 오른쪽이 번진다. 풍선은 그 빈 종이 쪽에 걸린다. */
.ov-cut--fade-l .ov-cut-art, .ov-cut--fade-r .ov-cut-art { -webkit-mask-composite: source-in; mask-composite: intersect; }
.ov-cut--fade-l .ov-cut-art { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%); }
.ov-cut--fade-r .ov-cut-art { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%); }
/* 가로 띠: 낮고 넓은 컷. 위아래를 크게 기울이고 가장자리를 번지게 한다. */
.ov-cut--strip .ov-cut-art { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%); }
/* 말풍선: 흰 타원 + 가는 윤곽선, 가운데 정렬 짧은 줄. 글자는 17px(폭 380px 기준)이고 폭에 맞춰 줄어든다. */
.ov-bub { position: absolute; z-index: 3; aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; padding: 0 9%; text-align: center; font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.38; color: #1f1a17; word-break: keep-all; }
@supports (font-size: 1cqw) { .ov-bub { font-size: 4.47cqw; } }
.ov-bub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; shape-rendering: geometricPrecision; }
.ov-bub-tx { position: relative; z-index: 1; display: block; white-space: nowrap; }
/* 독백은 생각 구름 풍선(.ov-bub--cloud)으로 그린다. 구름은 안쪽이 좁아 글을 조금 작게 둔다. */
.ov-bub--cloud { padding: 0 14%; font-size: 17px; }
@supports (font-size: 1cqw) { .ov-bub--cloud { font-size: 4.2cqw; } }
/* 효과음: 손글씨 붉은 글자에 종이색 테두리를 둘러 그림 위에서도 읽힌다. 컷 폭에 비례한다(폭 380px 기준 약 26px). */
.ov-sfx { position: absolute; z-index: 2; transform: translate(-50%, -50%) rotate(var(--ov-sfx-rot, 0deg)); font-family: 'Gaegu SFX', 'Gaegu', 'Pretendard Variable', sans-serif; font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .02em; color: #b3392c; -webkit-text-stroke: 4px #fffdf9; paint-order: stroke fill; white-space: nowrap; pointer-events: none; }
@supports (font-size: 1cqw) { .ov-sfx { font-size: 6.8cqw; } }
/* 오프닝 연속 컷(.ov-strip): 컷 3장을 사선으로 딱 붙인다. --s 는 사선의 높이, --g 는 컷 사이 홈(종이색)이다. 폭에 비례한다. */
.ov-strip { container-type: inline-size; --s: 9cqw; --g: 2.8cqw; margin: 0; }
.ov-strip .ov-cut { --tl: 0px; --tr: 0px; --bl: 100%; --br: 100%; padding: 0; }
.ov-strip .ov-cut:first-child { padding-top: calc(var(--ov-over-top, 0) * 100% + 6px); }
.ov-strip .ov-cut + .ov-cut { margin-top: calc(-1 * var(--s)); }
.ov-strip .ov-cut-art { -webkit-mask-image: none; mask-image: none; clip-path: polygon(0 var(--tl), 100% var(--tr), 100% var(--br), 0 var(--bl)); }
/* 위쪽 선: 앞 컷 아래 선이 ╱(up)이면 왼쪽이 낮고 오른쪽이 높다. ╲(down)이면 반대다. */
.ov-strip .ov-t-up { --tl: calc(var(--s) + var(--g)); --tr: var(--g); }
.ov-strip .ov-t-down { --tl: var(--g); --tr: calc(var(--s) + var(--g)); }
/* 아래쪽 선 */
.ov-strip .ov-b-up { --bl: 100%; --br: calc(100% - var(--s)); }
.ov-strip .ov-b-down { --bl: calc(100% - var(--s)); --br: 100%; }
/* 배경 없는 컷아웃: 마스크와 사선 없이 그림이 종이 위에 바로 올라간다. 풍선은 그림 옆 종이에 걸린다. */
.ov-cut--cutout .ov-cut-art img { object-fit: contain; }
/* 풀이 미리보기: 쪽 20장을 4x5 격자 한 장으로. 이미지가 작아 확대해도 글자는 읽히지 않는다. */
.ov-preview-img { display: block; width: 100%; max-width: 420px; height: auto; margin: 20px auto 8px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }