/* 월하노인 — 결과 화면 + 결제 화면 (pay.js)
   색: 검은 한지 바탕 · 한지색 글씨 · 금빛 하나(강조·버튼) · 경고만 붉은 먹 */
/* '다 골랐어요'는 하나라도 고르기 전엔 숨김 — 화면 등장 효과(rowin)가 투명도를 1로 덮어써서 처음부터 보이던 것을 막음 */
.qwrap.enter > .multi-go { animation: none; }
/* 문답 속 그 사람 생일 칸: 날짜 틀을 가운데로 */
.qin .mask { text-align: center; }
.qin .hint { margin: -4px 0 0; }
:root { --gold: rgb(226 190 122); --gold-hi: rgb(244 214 150); --warn: rgb(232 132 104); }

/* ── 결과 ── 노인의 말 → 명부 한 장(흐린 얼굴·나이·키) → 고른 대로의 사람 */
.qwrap.resulting { justify-content: safe center; padding-bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 64px)); }
.qwrap.resulting::after { flex-basis: 3cqh; }
/* 10/27: 위에서 아래로 한 덩이씩 — 놀람 → 제목 → 명부 한 장 → 자질 → 인기. 덩이마다 위에서 살짝 내려앉음 */
@keyframes rsdrop { from { opacity: .01; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.qwrap.resulting.enter > * { animation: rsdrop .5s ease-out both; }
.qwrap.resulting.enter > .rs-h    { animation-delay: .35s; }   /* 10/27 2차: 더 빨리(주익님) */
.qwrap.resulting.enter > .rs-page { animation-delay: .7s; }
.qwrap.resulting.enter > .rs-t    { animation-delay: 1.1s; }
.qwrap.resulting.enter > .rs-t2   { animation-delay: 1.45s; }
.qwrap.resulting.enter > .rs-t3   { animation-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) { .qwrap.resulting.enter > * { animation: none; } }
.rs-h { margin: 0 0 2.6cqh; font-size: clamp(21px, 6cqw, 25px); }
/* 노인의 놀람(10/27): 카드 위 두 줄. 금빛은 아래 자질 줄에만, 제목은 한 줄로 작게, 늘어난 만큼 명부 한 장을 줄임 */
.rs-wow { margin: 0 0 1.4cqh; font-size: clamp(21px, 6cqw, 25px); }
.rs-wow + .rs-h { font-size: clamp(16px, 4.6cqw, 19px); color: rgb(236 216 186 / .8); }
/* 여백(%)은 바깥 화면 너비를 따라가서, 한 장을 줄이면 사진만 작아짐 → 한 장 너비에 비례하게 */
/* 결과 카드(10/27 2차): 글씨가 작다(주익님) → 카드를 넓히고(종이 비율 고정을 풀고) 사진을 줄여 글줄 자리를 만듦. 이름표 12 · 값 17 · 설명 12.5px */
.rs-wow ~ .rs-page { --w: min(62cqw, 34cqh); width: var(--w); aspect-ratio: auto; padding: calc(var(--w) * .16) calc(var(--w) * .12) calc(var(--w) * .14); }
.rs-wow ~ .rs-page .rs-ph { width: 62%; margin: 0 auto; }
.rs-wow ~ .rs-page .rs-meta { margin: calc(3cqi + 8px) 0 0; gap: 2cqi; }   /* 8px = 액자 겹테두리만큼 띄움 */
.rs-wow ~ .rs-page .rs-meta span { font-size: 12px; letter-spacing: .12em; }
.rs-wow ~ .rs-page .rs-meta b { font-size: 17px; margin-top: 1px; white-space: nowrap; }
.rs-wow ~ .rs-page .rs-meta em { font-size: 12.5px; line-height: 1.3; margin-top: 2px; word-break: keep-all; }
.rs-page { position: relative; flex: none; width: min(60cqw, 34cqh); aspect-ratio: 688 / 1024; padding: 13% 12% 0;
           background: url(img/book/page1.webp?v=2) center / 100% 100% no-repeat; container-type: inline-size;
           box-shadow: 0 18px 40px rgb(0 0 0 / .6), 0 0 26px 2px rgb(236 196 112 / .45); border-radius: 3px; }
.rs-ph { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: rgb(241 231 208);
         box-shadow: 0 0 0 1.5px rgb(40 30 20 / .8), 0 0 0 4px rgb(241 231 208), 0 0 0 5.5px rgb(40 30 20 / .7); }
.rs-ph img { width: 100%; height: 100%; object-fit: cover; filter: blur(5px); transform: scale(1.32); transform-origin: 50% 30%; }   /* 실사 증명사진: 색은 그대로, 윤곽만 보이게 흐림 */
/* 얼굴 위 안개: 가운데가 조금 덜 흐려 윤곽만 보이게 */
.rs-mist { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 42%, rgb(241 231 208 / .05), rgb(241 231 208 / .55) 80%); }
.rs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; margin-top: 7cqi; text-align: center; color: rgb(38 28 18); }
.rs-meta span { display: block; font-size: 6.2cqi; color: rgb(38 28 18 / .6); letter-spacing: .2em; }
.rs-meta b { display: block; font-weight: 400; font-size: 10.5cqi; margin-top: 1.5cqi; }
.rs-meta em { display: block; font-style: normal; font-size: 6.4cqi; color: rgb(140 70 40); margin-top: 1cqi; }
.rs-t, .rs-t2, .rs-t3 { margin: 2.4cqh 0 0; text-align: center; font-size: clamp(17px, 4.9cqw, 20px); line-height: 1.6; word-break: keep-all; color: var(--hanji); }
.rs-t2, .rs-t3 { margin-top: 2.6cqh; color: rgb(236 216 186 / .85); }   /* 10/27: 카드 아래 문장 사이를 더 띄움(1.2 → 2.6) */
.rs-t b, .rs-t2 b, .rs-t3 b { font-weight: 400; color: var(--gold-hi); }
.rs-plus { display: block; margin-top: 1cqh; font-size: .86em; color: rgb(236 216 186 / .8); }
@media (max-height: 700px) {   /* 10/27: 640 → 700 — 노인의 놀람 두 줄이 붙은 뒤 390×664에서도 한 화면에 들게 */
  .qwrap.resulting { padding-top: 14px; padding-bottom: 58px; }
  .rs-page { width: min(46cqw, 31cqh); }
  .rs-h { font-size: 19px; }
  .rs-wow { font-size: 19px; margin-bottom: 1cqh; } .rs-wow + .rs-h { font-size: 15px; } .rs-wow ~ .rs-page { --w: min(58cqw, 31cqh); }
  .rs-t, .rs-t2, .rs-t3 { font-size: 15.5px; line-height: 1.5; }
  /* 작은 폰에서도 셋째·넷째 자질 줄을 숨기지 않음 — 넘치면 화면이 스크롤됨(10/26 주익님) */
  .rs-h { margin-bottom: 2cqh; }
  .rs-t { margin-top: 2cqh; } .rs-t2, .rs-t3 { margin-top: 1.9cqh; } .rs-plus { margin-top: .8cqh; }
}
@media (max-height: 600px) {   /* 10/27: 375×548에서 카드 글씨를 키운 뒤에도 한 화면에 들게 */
  .rs-wow ~ .rs-page { padding-top: calc(var(--w) * .12); padding-bottom: calc(var(--w) * .1); }
  .rs-wow ~ .rs-page .rs-ph { width: 50%; }
  .rs-wow ~ .rs-page .rs-meta { margin-top: calc(2cqi + 7px); }
}

/* 붉은 실 카드(마음에 둔 사람이 있는 갈래, 10/27) — 명부 한 장에 두 사람 이름(세로쓰기) + 붉은 실 + 흐린 매듭과 자물쇠 */
.rs-wow ~ .rs-page.th-card, .th-card { --w: min(80cqw, 340px); width: var(--w); aspect-ratio: auto; padding: calc(var(--w) * .1) calc(var(--w) * .1) calc(var(--w) * .08); }
.th-row { display: flex; align-items: center; gap: 10px; }
.th-n { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(38 28 18); }
.th-n b { writing-mode: vertical-rl; font-weight: 400; font-size: 27px; line-height: 1; letter-spacing: .14em; }
.th-n small { font-size: 12px; letter-spacing: .12em; color: rgb(38 28 18 / .55); }
.th-svg { flex: 1; min-width: 0; height: auto; overflow: visible; }
/* 월하당 매듭과 같은 굵기·박자: 0.65초, cubic-bezier(.45,.05,.55,.95) */
.th-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes thdraw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }   /* 시작 전엔 안 보이게: 둥근 선 끝이 길이 0에서도 점으로 찍힘 */
@keyframes thname { from { opacity: 0; } to { opacity: 1; } }
.qwrap.resulting.enter .th-a { animation: thname .8s cubic-bezier(.25, .1, .25, 1) 1s both; }
.qwrap.resulting.enter .th-line { animation: thdraw .65s cubic-bezier(.45, .05, .55, .95) 1.3s both; }
.qwrap.resulting.enter .th-b { animation: thname .8s cubic-bezier(.25, .1, .25, 1) 1.85s both; }
@media (prefers-reduced-motion: reduce) { .qwrap.resulting.enter .th-a, .qwrap.resulting.enter .th-line, .qwrap.resulting.enter .th-b { animation: none; } }
@media (max-height: 700px) { .rs-wow ~ .rs-page.th-card { --w: min(76cqw, 320px); } .th-n b { font-size: 24px; } }
.pw-face.pw-thread { width: auto; margin: 40px auto 34px; }
.pw-thread .th-card { margin: 0 auto; }

/* ── 결제 ── 아래로 길게 읽는 한 장. 마감 띠 높이만큼 아래 여백 */
.qwrap.paying { display: block; padding: 0 0 calc(110px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.qwrap.paying::after { display: none; }
.pw { width: min(100%, 440px); margin: 0 auto; padding: 0 7cqw; color: var(--hanji); }
.rv { opacity: 0; translate: 0 14px; transition: opacity .45s ease-out, translate .45s ease-out; }   /* 10/27 2차: 0.7 → 0.45초 */
.rv.in { opacity: 1; translate: 0 0; }
/* 노인(상반신, 크게) — 아래로 검은 한지에 스며듦 */
.pw-sage { margin: 0 -7cqw; height: min(78cqw, 340px); overflow: hidden;
           -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.pw-sage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.pw-letter { margin-top: -6cqw; position: relative; text-align: center; }   /* 10/27: 편지 가운데 정렬 */
.lt-call { margin: 0 0 18px; font-size: clamp(21px, 6cqw, 25px); }
.lt-p { margin: 0 0 24px; font-size: clamp(17px, 4.8cqw, 19.5px); line-height: 1.75; word-break: keep-all; color: rgb(236 216 186 / .9); }
/* 강조(재능관처럼 확실하게): b = 금빛, b.k = 금빛 + 크게, b.w = 경고빛 */
.lt-p b { font-weight: 400; color: var(--gold-hi); text-shadow: 0 0 14px rgb(244 214 150 / .28); }
.lt-p b.k { font-size: 1.16em; }
.lt-p b.w { font-size: 1.1em; color: rgb(246 164 136); text-shadow: 0 0 14px rgb(232 132 104 / .3); }
.lt-turn { margin-top: 34px; color: var(--hanji); }
.lt-big { font-size: clamp(22px, 6.3cqw, 26px); line-height: 1.55; color: var(--hanji); }
.lt-warn { padding: 16px 6px; border-block: 1px solid rgb(232 132 104 / .45); background: rgb(232 132 104 / .07); }
.lt-warn b { color: rgb(246 164 136); text-shadow: none; }
.lt-end { margin-top: 30px; font-size: clamp(19px, 5.4cqw, 22px); color: var(--hanji); }
.lt-end b { display: inline-block; margin-top: 6px; font-size: 1.18em; }
/* 편지 중간 노인 — 맨 위 노인과 같은 틀(.pw-sage), 위아래 여백만 */
.pw-sage-mid { margin-top: 34px; margin-bottom: -4cqw; }
.lt-p.lt-gap { margin-top: 13cqw; }   /* 짝사랑 갈래: 중간 노인 그림 바로 아래 줄을 그림에서 띄움(10/28 주익님) */
/* (예전) 편지 중간 노인 얼굴 — 화면 폭 가득, 가장자리는 검은 한지에 스며듦 */
.lt-pic { margin: 30px -7cqw 22px; aspect-ratio: 3 / 2; overflow: hidden;   /* 가장자리 흐림은 그림 안에 넣음(알파) */
          }
.lt-pic img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.06; transition: scale 1.6s ease-out; }
.lt-pic.in img { scale: 1; }

/* 원국판 — 목차와 같은 한지 판(toc.webp), 먹 글씨. 한자는 굵지 않은 명조. 타고난 기운(일간)만 주색 동그라미 */
.wg { margin: 4px auto 34px; width: min(100%, 340px); color: rgb(38 28 18);
      border: 22px solid transparent; border-image: url(img/pay/toc.webp) 70 fill / 22px stretch; padding: 2px 0 4px; }
.wg figcaption { margin: 0 0 12px; font-size: 15px; letter-spacing: .16em; color: rgb(38 28 18 / .62); }
.wg-g { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid rgb(38 28 18 / .28); }
.wg-c { display: grid; justify-items: center; align-content: start; padding: 11px 0 12px; }
.wg-c + .wg-c { border-left: 1px solid rgb(38 28 18 / .13); }
.wg-l { margin-bottom: 9px; font-size: 11.5px; letter-spacing: .02em; color: rgb(38 28 18 / .55); white-space: nowrap; }
.wg-h { position: relative; font-family: 'Noto Serif KR', 'Song Myung', serif; font-weight: 400; font-size: clamp(30px, 8.6cqw, 36px); line-height: 1.36; color: rgb(38 28 18 / .86); }
.wg-c small { margin-top: 7px; font-size: 12.5px; letter-spacing: .14em; color: rgb(38 28 18 / .5); }
.wg-c.me { background: rgb(168 44 30 / .05); }
.wg-c.me .wg-h:first-of-type { color: rgb(160 40 26); }
.wg-c.me .wg-h:first-of-type::before { content: ''; position: absolute; left: 50%; top: 50%; width: 1.36em; height: 1.36em; translate: -50% -50%;
      border: 1.5px solid rgb(160 40 26 / .72); border-radius: 50%; }
.wg-c.un .wg-h { color: rgb(38 28 18 / .25); }

/* 두 사람 사주표(마음에 둔 사람 있는 갈래) — 위 자네·아래 그 사람, 날 기둥 아래 글자(배우자 자리)에 주색 동그라미 */
.wg2 .wg2-lab, .wg2 .wg2-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; }
.wg2 .wg2-lab { grid-template-columns: 34px repeat(4, 1fr); margin-bottom: 4px; font-size: 11px; color: rgb(38 28 18 / .55); white-space: nowrap; }
.wg2-who { justify-self: center; writing-mode: vertical-rl; font-size: 14px; letter-spacing: .12em; color: rgb(38 28 18 / .75); }
.wg2 .wg-g { border-block: 1px solid rgb(38 28 18 / .2); }
.wg2 .wg-c { padding: 6px 0; }
.wg2 .wg-h { font-size: clamp(25px, 7.2cqw, 31px); line-height: 1.28; }
.wg2 { position: relative; }
.wg2 .wg-c.me .wg-h:first-of-type { color: rgb(38 28 18 / .86); }
.wg2 .wg-c.me .wg-h:first-of-type::before { content: none; }
.wg2 .wg-c.me .wg-h:last-of-type { color: rgb(178 52 40); }   /* 두 배우자 자리 글자만 실과 같은 붉은빛 */
.wg2-gap { height: 16px; }
/* 붉은 실(월하당과 같은 색·굵기·박자) — 사주표가 화면에 들어오면 위 글자에서 아래 글자로 그어짐 */
.wg2-th { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wg2-th path { fill: none; stroke: #c4473a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
               stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.45, .05, .55, .95) .35s, opacity 0s linear .35s; }
.wg2.in .wg2-th path { stroke-dashoffset: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wg2-th path { transition: none; stroke-dashoffset: 0; opacity: 1; } }
/* 결제 첫 한마디 */
.pw-speech { margin: 44px 0 34px; text-align: center; }
.pw-speech p { margin: 0 0 16px; font-size: clamp(18px, 5.1cqw, 21px); line-height: 1.75; color: var(--hanji); word-break: keep-all; }
.pw-speech b { font-weight: 400; color: var(--gold-hi); text-shadow: 0 0 14px rgb(244 214 150 / .28); }
.lt-cliff { margin-top: 30px; }
.lt-first { margin-top: 0; }

/* 봉인된 흐린 얼굴 */
.pw-face { position: relative; margin: 40px auto 34px; width: 62%; text-align: center; }
.pw-face-ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px;
              box-shadow: 0 0 0 1px rgb(222 190 128 / .5), 0 0 0 6px rgb(20 20 22), 0 0 0 7px rgb(222 190 128 / .25), 0 18px 40px rgb(0 0 0 / .6); }
.pw-face-ph img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px); transform: scale(1.32); transform-origin: 50% 30%; }
/* 흐린 얼굴 위 잠금: a 달은 모서리에 걸침 · b 자물쇠는 아래 가운데에 매달림 · c 매듭은 위 가운데에서 늘어짐 */
.pw-face-seal { position: absolute; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .55)); }
.sl-a .pw-face-seal { right: -12%; bottom: 16%; width: 40%; }
.sl-b .pw-face-seal { left: 50%; bottom: 22%; width: 48%; translate: -50% 0; }
.sl-b1 .pw-face-seal { left: 50%; bottom: 20%; width: 46%; translate: -50% 0; }
.sl-b2 .pw-face-seal { left: 50%; bottom: 18%; width: 34%; translate: -50% 0; }
.sl-b3 .pw-face-seal { left: 50%; top: -9%; width: 40%; translate: -50% 0; }
.sl-m1 .pw-face-seal, .sl-m2 .pw-face-seal, .sl-m3 .pw-face-seal { left: 50%; bottom: 16%; width: 30%; translate: -50% 0; }
.sl-c .pw-face-seal { left: 50%; top: -7%; width: 30%; translate: -50% 0; }
.pw-face p { margin: 16px 0 0; font-size: clamp(16px, 4.6cqw, 18.5px); line-height: 1.6; }
.pw-face p b { font-weight: 400; color: var(--gold-hi); }

/* 목차: 한지 두루마리 판(가장자리 장식이 늘어나지 않게 9칸 자르기) */
.toc { color: rgb(38 28 18); border: 22px solid transparent; border-image: url(img/pay/toc.webp) 70 fill / 22px stretch;
       padding: 8px 4px 6px; filter: drop-shadow(0 14px 30px rgb(0 0 0 / .55)); }
.toc h3 { margin: 4px 0 14px; text-align: center; font-weight: 400; font-size: clamp(19px, 5.4cqw, 22px); }
.toc h3 small { display: block; margin-top: 2px; font-size: .62em; letter-spacing: .08em; color: rgb(38 28 18 / .55); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.tc-i { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-top: 1px solid rgb(60 40 20 / .14); }
.tc-i .seal { flex: none; width: 32px; height: 32px; margin-top: 0; object-fit: contain; }
.tc-i b { display: block; word-break: keep-all; font-weight: 400; font-size: clamp(16px, 4.5cqw, 18px); line-height: 1.4; }
.tc-i span { display: block; word-break: keep-all; margin-top: 3px; font-size: clamp(13.5px, 3.8cqw, 15px); line-height: 1.5; color: rgb(38 28 18 / .7); }
.bl { font-style: normal; filter: blur(4.5px); user-select: none; color: rgb(38 28 18); }
.ltd { margin-top: 10px; padding: 8px 10px 4px; border: 1px dashed rgb(150 60 40 / .55); background: rgb(200 80 50 / .06); border-radius: 3px; }
.ltd-h { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.ltd-h > span:first-child { padding: 2px 8px; background: rgb(160 50 36); color: rgb(250 236 210); border-radius: 2px; letter-spacing: .06em; }
.ltd-c { color: rgb(150 50 36); } .ltd-c b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ltd .tc-i:first-child { border-top: 0; }
.ltd-n { margin: 4px 0 2px; font-size: 12px; color: rgb(38 28 18 / .55); }

/* 가격: 옻칠 현판 */
.price { margin: 30px 0 0; padding: 22px 16px 18px; text-align: center; border: 26px solid transparent;
         border-image: url(img/pay/plaque.webp) 60 fill / 26px stretch; }
.pr-old { font-size: 14px; color: rgb(236 216 186 / .55); } .pr-old s { text-decoration-thickness: 1px; }
.pr-now { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 4px; }
.pr-pct { font-size: clamp(22px, 6.4cqw, 26px); color: var(--warn); }
.pr-won { font-size: clamp(32px, 9.2cqw, 38px); color: var(--gold-hi); letter-spacing: .02em; }
.pr-d { margin: 10px 0 0; font-size: clamp(14px, 3.9cqw, 15.5px); line-height: 1.6; color: rgb(236 216 186 / .82); word-break: keep-all; }
.pr-d b { font-weight: 400; color: var(--gold-hi); }
.pw-cta { display: block; width: 100%; margin: 18px 0 0; min-height: 60px; border: 0; cursor: pointer;
          background: url(img/btn/bn3.webp) center / 100% 100% no-repeat; color: rgb(38 30 22);
          font-family: var(--display); font-size: clamp(18px, 5.1cqw, 20.5px); letter-spacing: .06em;
          animation: cta-glow 2.6s ease-in-out infinite; }
.pw-cta:active { scale: .98; }
.pw-cta-sub { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: rgb(236 216 186 / .6); }

/* 후기 */
.rvw { margin-top: 44px; }
.rvw h4 { margin: 0; text-align: center; font-weight: 400; font-size: clamp(19px, 5.4cqw, 22px); }
.rvw h4 + .rv-c { margin-top: 18px; }
.rvw-mark { margin: 6px 0 16px; text-align: center; font-size: 11.5px; color: rgb(236 216 186 / .4); }
/* 후기 한 장 = 목차와 같은 한지 두루마리 판(toc.webp), 글씨는 먹색 (10/26 주익님) */
.rv-c { margin: 0 0 14px; color: rgb(38 28 18); border: 18px solid transparent; border-image: url(img/pay/toc.webp) 70 fill / 18px stretch;
        padding: 4px 4px 2px; filter: drop-shadow(0 10px 22px rgb(0 0 0 / .5)); }
.rv-top { display: flex; gap: 10px; align-items: center; }
.rv-av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-style: normal;
         background: rgb(38 28 18 / .1); box-shadow: inset 0 0 0 1px rgb(38 28 18 / .25); color: rgb(110 70 30); font-size: 15px; }
.rv-top b { display: block; font-weight: 400; font-size: 14.5px; } .rv-top small { color: rgb(38 28 18 / .55); }
.rv-st { font-size: 12.5px; color: rgb(176 120 40); letter-spacing: .05em; } .rv-st i { font-style: normal; color: rgb(38 28 18 / .2); }
.rv-c h5 { margin: 10px 0 4px; font-weight: 400; font-size: 16px; color: rgb(38 28 18); }
.rv-c p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgb(38 28 18 / .82); word-break: keep-all;
          font-family: var(--display); }   /* 10/28: 후기 본문도 다른 글씨와 같은 송명체 */
.rv-c p b { font-weight: 700; color: rgb(38 28 18); }
/* 후기 머리 위 구분선(금빛 구름 매듭) */
.rv-div { display: block; width: min(78%, 320px); height: auto; margin: 0 auto 14px; opacity: .9; }

/* 마지막 한마디 */
.pw-last { margin: 46px 0 0; text-align: center; }
.pw-last p { margin: 0 0 18px; font-size: clamp(17px, 4.8cqw, 19.5px); line-height: 1.7; color: rgb(236 216 186 / .88); }
.pw-last b { font-weight: 400; color: rgb(246 164 136); }
.pw-good b { color: var(--gold-hi); text-shadow: 0 0 14px rgb(244 214 150 / .28); }   /* 호강 = 좋은 말이라 금빛 */
.pw-last-q { font-size: clamp(19px, 5.4cqw, 22px) !important; color: var(--hanji) !important; }
.pw-legal { margin: 34px 0 10px; text-align: center; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
            font-size: 11px; line-height: 1.8; color: rgb(236 216 186 / .38); }
.pw-legal a { color: inherit; text-decoration: underline; text-decoration-color: rgb(236 216 186 / .28); text-underline-offset: 2px; }
.pw-legal i { font-style: normal; margin: 0 .45em; opacity: .55; }
.pw-legal small { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.7; }

/* 왼쪽 아래 '방금 명부를 펼친 사람' — 화면에서 여기만 밝은 한지색 상자라 저절로 눈에 들어옴(금성여자 방식) */
.lvfeed { position: absolute; left: 12px; bottom: 110px; z-index: 21; pointer-events: none; }
.lvi { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 3px;
       background: linear-gradient(180deg, #F4E9CF, #E4D4B0); border: 1px solid rgb(120 92 40 / .4); box-shadow: 0 8px 26px rgb(0 0 0 / .6);
       opacity: 0; transform: translateX(-12px); transition: opacity .9s ease, transform .9s ease; }
.lvi.in { opacity: 1; transform: none; }
.lvi.out { opacity: 0; transition: opacity 1s ease; }
.lvi img { width: 24px; height: 36px; object-fit: cover; border-radius: 1px; box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
.lv-n { font-family: var(--display); font-size: 15px; line-height: 1.3; color: #2A1D08; }
.lv-g { font-family: var(--display); font-size: 13px; line-height: 1.3; color: rgb(42 29 8 / .62); margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .lvi { transform: none; transition: opacity .3s; } }

/* 마감 띠: 옻칠 띠(자개 구름 테) */
.dbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; translate: 0 110%; transition: translate .6s cubic-bezier(.2, .85, .28, 1);
        /* 마감 띠 = 검은 옻칠 판 + 위아래 가는 금선만(10/26 주익님 1안, bar3.webp) */
        background: none; border: 10px solid transparent; border-image: url(img/pay/bar3.webp?v=2) 20 fill / 10px stretch;   /* 10/27 경량화: 그림을 절반(672×288)으로 → 자르는 값도 40→20 */
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px;
        box-shadow: 0 -10px 24px rgb(0 0 0 / .55); }
.dbar.on { translate: 0 0; }
.db-l { flex: 1; min-width: 0; }
.db-t1 { font-family: var(--display); font-size: 13.5px; color: rgb(236 216 186 / .72); letter-spacing: .04em; }
.db-t2 { font-family: var(--display); font-size: 24px; line-height: 1.15; color: var(--gold-hi); letter-spacing: .1em; font-variant-numeric: tabular-nums;
          text-shadow: 0 0 12px rgb(244 214 150 / .35); }
.dbar.hot .db-t2 { color: var(--warn); }
.db-g { height: 2px; margin-top: 6px; background: rgb(226 190 122 / .18); overflow: hidden; }
.db-g i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, rgb(176 132 64), var(--gold-hi)); box-shadow: 0 0 6px rgb(244 214 150 / .5); transition: width 1s linear; }
.dbar.hot .db-g i { background: linear-gradient(90deg, rgb(176 90 60), var(--warn)); }
.db-cta { flex: none; min-width: 136px; min-height: 50px; padding: 0 14px; border: 0; cursor: pointer;
          background: url(img/btn/bn3.webp) center / 100% 100% no-repeat; color: rgb(38 30 22);
          font-family: var(--display); font-size: 17.5px; letter-spacing: .04em; }
.pw-toast { position: absolute; left: 50%; bottom: 120px; z-index: 30; translate: -50% 0; padding: 10px 16px; border-radius: 4px;
            background: rgb(20 20 22 / .95); border: 1px solid rgb(236 216 186 / .2); color: var(--hanji); font-size: 14px;
            opacity: 0; pointer-events: none; white-space: nowrap; }
.pw-toast.on { animation: toast 2.4s ease both; }
@keyframes toast { 0% { opacity: 0; translate: -50% 8px; } 12%, 80% { opacity: 1; translate: -50% 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: 0 0; transition: none; } .pw-cta { animation: none; } }

/* 결제 화면 인연 카드(결과 카드와 같은 모양) — 얼굴은 더 흐리게, 자물쇠는 사진 위, 하는 일 칸은 가림 */
.pw-card { width: auto; }
.pw-page { width: min(70cqw, 310px); margin: 0 auto; text-align: center; }
.pw-page .rs-ph { width: 84%; margin: 0 auto; }   /* 2×2 정보 자리를 만들려고 사진을 조금 줄임 */
.pw-page .rs-ph img:first-child { filter: blur(9px); }
.pw-page .rs-ph { overflow: hidden; }
.pw-page .pw-face-seal { left: 50% !important; top: auto !important; bottom: 10% !important; width: 30% !important; translate: -50% 0; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .55)); transform: none; }
.rs-meta.three { grid-template-columns: repeat(3, 1fr); gap: 2cqi; }
.rs-meta.four { grid-template-columns: 1fr 1fr; gap: 3cqi 2cqi; margin-top: 5cqi; }
.rs-meta.four span { font-size: 6.6cqi; letter-spacing: .1em; }
.rs-meta.four b { font-size: 8.6cqi; margin-top: .8cqi; white-space: nowrap; }
.rs-meta.four .bl { display: inline; margin: 0; font-size: inherit; font-style: normal; filter: blur(3px); color: rgb(38 28 18 / .9); }
.rs-meta.three span { font-size: 5.4cqi; letter-spacing: .08em; }
.rs-meta.three b { font-size: 6.6cqi; white-space: nowrap; }
.rs-meta.three .bl { font-style: normal; filter: blur(3.2px); }
.lt-big.lt-twist { font-size: clamp(19px, 5.2cqw, 21px); line-height: 1.95; }   /* 반전 줄: 다른 큰 줄보다 한 단계 작게(10/28 주익님) */
.lt-twist b.k { font-size: 1.08em; }
.lt-big .lt-sub { font-size: .72em; color: rgb(236 216 186 / .85); }   /* 달 줄 아래 '바로 다음 달이지.' */

/* ── 10/28 시안: 결과 화면 속도·글자(?rsv=1|2|3, 기본 2) ── k = 나타나는 차례 시간 배수, d = 한 덩이가 나타나는 시간, f = 글자 배율 */
html[data-rsv="1"] { --rsk: 1.6; --rsd: .8s; --rsf: 1.06; }
html[data-rsv="2"] { --rsk: 2.2; --rsd: 1s;  --rsf: 1.12; }
html[data-rsv="3"] { --rsk: 2.8; --rsd: 1.2s; --rsf: 1.18; }
html[data-rsv] .qwrap.resulting.enter > * { animation-duration: var(--rsd); }
html[data-rsv] .qwrap.resulting.enter > .rs-h    { animation-delay: calc(.35s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter > .rs-page { animation-delay: calc(.7s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter > .rs-t    { animation-delay: calc(1.1s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter > .rs-t2   { animation-delay: calc(1.45s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter > .rs-t3   { animation-delay: calc(1.75s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter .th-a    { animation-delay: calc(1s * var(--rsk)); }
html[data-rsv] .qwrap.resulting.enter .th-line { animation-delay: calc(1.3s * var(--rsk)); animation-duration: calc(.65s * var(--rsk) * .7); }
html[data-rsv] .qwrap.resulting.enter .th-b    { animation-delay: calc(1.85s * var(--rsk)); }
html[data-rsv] .rs-wow { font-size: min(calc(clamp(21px, 6cqw, 25px) * var(--rsf)), 6.3cqw); }   /* 둘째 줄이 한 줄에 들어가는 만큼까지만 */
html[data-rsv] .rs-wow + .rs-h, html[data-rsv] .rs-h { font-size: calc(clamp(16px, 4.6cqw, 19px) * var(--rsf)); }
html[data-rsv] .rs-t, html[data-rsv] .rs-t2, html[data-rsv] .rs-t3 { font-size: calc(clamp(17px, 4.9cqw, 20px) * var(--rsf)); }
html[data-rsv] .rs-wow ~ .rs-page:not(.th-card) { --w: min(64cqw, 32cqh); }
html[data-rsv] .rs-wow ~ .rs-page .rs-meta span { font-size: calc(12.5px * var(--rsf)); }
html[data-rsv] .rs-wow ~ .rs-page .rs-meta b { font-size: calc(17px * min(var(--rsf), 1.1)); }
html[data-rsv] .rs-wow ~ .rs-page .rs-meta em { font-size: calc(12.5px * var(--rsf)); }
html[data-rsv] .th-n b { font-size: calc(27px * var(--rsf)); } html[data-rsv] .th-n small { font-size: calc(12px * var(--rsf)); }
@media (max-height: 700px) {
  html[data-rsv] .rs-wow { font-size: calc(19px * var(--rsf)); } html[data-rsv] .rs-wow + .rs-h { font-size: calc(15px * var(--rsf)); }
  html[data-rsv] .rs-t, html[data-rsv] .rs-t2, html[data-rsv] .rs-t3 { font-size: calc(15.5px * var(--rsf)); }
  html[data-rsv] .rs-wow ~ .rs-page:not(.th-card) { --w: min(62cqw, 33cqh); }
}
/* ── 10/28 시안: 결제 화면이 스크롤 따라 나타나는 속도(?pv=1|2|3, 기본 2) ── */
html[data-pv="1"] .rv { transition-duration: .8s;  translate: 0 18px; }
html[data-pv="2"] .rv { transition-duration: 1.1s; translate: 0 24px; }
html[data-pv="3"] .rv { transition-duration: 1.5s; translate: 0 32px; transition-timing-function: cubic-bezier(.2, .6, .2, 1); }
html[data-pv] .rv.in { translate: 0 0; }

/* 후기 프로필 사진(10/28 주익님 제공, 01~04 순서) */
.rv-av { overflow: hidden; } .rv-av img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(1.3px); transform: scale(1.08); }   /* 10/28: 얼굴 알아보지 못하게 흐림 */