/* 재회비책 무료 결과. 평생사주 결과지 카드(.rt-card, result-talk.css) 위에 두 사람 판정과 27문항에만 쓰는 부품을 얹는다. */
.rf-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rf-diff .rf-charts { margin-top: 14px; }
.rf-chart { padding: 12px 8px; border: 1px solid #e0d4bb; border-radius: 14px; background: #fffdf8; text-align: center; }
.rf-chart > b { display: block; margin-bottom: 6px; color: #8a6941; font: 800 13px/1.3 var(--sans); }
.rf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 6px; justify-items: center; }
.rf-cols small { color: #9a8c7c; font: 600 10.5px/1.4 var(--sans); }
.rf-cols span { color: #2f241a; font: 700 clamp(17px, 5vw, 20px)/1.25 'Noto Serif KR', 'Noto Serif CJK KR', serif; white-space: nowrap; }
.rf-cols .is-day { color: #a3392b; }
.rf-cols span.is-unknown { color: #c3b6a3; font-family: var(--sans); }
.rf-chart-note { margin: 8px 0 0; color: #9a8c7c; font: 500 11px/1.4 var(--sans); }
.rf-yak-lock { color: #7a6548 !important; font: 600 13px/1.6 var(--sans) !important; }
.rf-yak-lock .ov-lock { vertical-align: -2px; }
.rf-price { display: block; margin-top: 2px; font: 600 12px/1.2 var(--sans); opacity: .9; }
.rf-price:empty { display: none; }
.rt-story .rf-buy { flex-direction: column; }
.rf-gate { margin: 22px 0 0; border-color: #d8b9a2; background: #fff8f1; }
.rf-ch.is-hidden-ch .rf-q { color: #6b5f52; }

/* PART 표지(PART 1 두 사람을 읽다, PART 2 다시 닿을 때) 여백: 윗 요소(웹툰/질문 카드)와 충분히 분리 */
body #chart-screen .rt-story .rt-scene:is([data-scene-id="ch1"], [data-scene-id="ch2"]) {
  margin-top: 56px !important;
  margin-bottom: 24px !important;
}
body #chart-screen .rt-story .rt-scene:is([data-scene-id="ch1"], [data-scene-id="ch2"]) .rt-chapter {
  margin: 0 !important;
}
body #chart-screen .rt-story .rt-scene:is([data-scene-id="prologue"], [data-scene-id="interlude"]) {
  margin-bottom: 32px !important;
}

.rf-gauge { position: relative; height: 10px; margin: 6px 4px 0; border-radius: 99px; background: linear-gradient(90deg, #7d8794 0 33.3%, #b8923f 33.3% 66.6%, #c8553d 66.6% 100%); }
.rf-gauge i { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 4px solid #2f241a; border-radius: 50%; background: #fff; }
.rf-gauge-labels { display: flex; justify-content: space-between; margin: 6px 0 10px; color: #7a6548; font: 600 12px/1.4 var(--sans); }
.rf-by { display: grid; gap: 8px; }
.rf-by div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f7f2ea; }
.rf-by b { color: #a3392b; font: 800 12.5px/1.4 var(--sans); }
.rf-by span { color: #3a2c20; font: 700 15px/1.6 var(--sans); word-break: keep-all; }
.rf-tags { display: grid; gap: 6px; margin-bottom: 8px; }
.rf-tags span { padding: 8px 12px; border-radius: 10px; background: #f3ece0; color: #6b4f33; font: 700 13.5px/1.5 var(--sans); text-align: center; word-break: keep-all; }

.rf-ch { gap: 8px; }
.rf-ch .rt-card-title { margin-bottom: 4px; }
.rf-q { margin: 16px 0 0; color: #2f241a; font: 800 16.5px/1.5 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.rf-q ~ .rf-q { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rf-line, #e3d6c0); }   /* 소파트(1.1, 1.2…)마다 선 하나씩, 첫 번째 앞에는 긋지 않는다 */
.rf-no { display: inline-block; margin-right: 8px; color: #a39686; font: 800 14px/1 var(--sans); font-variant-numeric: tabular-nums; vertical-align: 1px; }
.rf-no.is-free { color: #a3392b; }
.rf-sub { margin: 0 0 4px; color: #7a6548; font: 500 13.5px/1.5 var(--sans); word-break: keep-all; }
.rf-ans { margin: 0; color: #2f241a; font: 500 15px/1.75 var(--sans); letter-spacing: -.015em; word-break: keep-all; }
.rf-ans.is-free { color: #2f241a; }
.rf-ans-tail { user-select: none; }
.rf-more-lines {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: 2px 0;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, .08) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, .08) 100%);
}
.rf-more-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rf-more-bar {
  display: block;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #dfd4c1, #ebe2d2);
}
.rf-more-end {
  display: block;
  height: 10px;
}
html body.rf-dark #chart-screen .rf-more-bar {
  background: linear-gradient(90deg, #3a3029, #2e2620);
}
.rf-blur { margin-top: 10px; overflow: hidden; color: #8a7d6d; filter: blur(4.5px); word-break: break-all; user-select: none; pointer-events: none; }
.rf-blur p { margin: 0; font: 500 15px/1.75 var(--sans); }
.rf-basis { margin: 14px 0 0; padding: 8px 12px; border-left: 3px solid #d9c7a7; color: #7a6c5c; font: 500 12.5px/1.6 var(--sans); word-break: keep-all; }
.rf-ch .rf-buy { margin-top: 12px; }
body #chart-screen .rt-story .rf-buy { width: 100%; border: 0; color: #fff !important; font: 800 14px/1.3 var(--sans); cursor: pointer; }
.rf-buy:disabled { opacity: .6; cursor: default; }
.rt-lock.is-final .rf-buy { margin-top: 8px; }

.rf-steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.rf-steps li { color: #4a4038; font: 500 14px/1.65 var(--sans); word-break: keep-all; }
.rf-notice { margin: 22px 0 0; color: #8a7d6d; font: 500 13px/1.6 var(--sans); text-align: center; word-break: keep-all; }
.rf-writing { margin: 10px 0 0; color: #a39686; font: 600 13px/1.5 var(--sans); text-align: center; }
.rt-tagline-text + .rt-tagline-text { margin-top: 10px; }
.rf-closing { border-color: #d8b9a2; background: linear-gradient(160deg, #fffaf3, #f8ecdd); text-align: center; }
.rf-closing .rt-card-lead { font-style: normal; word-break: keep-all; }
.rf-answer { border-color: #d8b9a2; background: linear-gradient(160deg, #fffaf3, #f8ecdd); }
.rf-question { margin: 0; padding: 12px 14px; border: 0; border-radius: 10px; background: #f8f1e4; }
.rf-question small { display: block; margin-bottom: 4px; color: #8a6941; font: 800 12px/1.4 var(--sans); }
.rf-question p { margin: 0; color: #2f241a; font: 600 15px/1.7 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; word-break: keep-all; }
.rf-buy-note { margin: 14px 0 10px; color: #7a6548; font: 600 13px/1.5 var(--sans); text-align: center; word-break: keep-all; }

/* 어두운 톤: 재회비책 무료 결과에서만(body.rf-dark, app.js renderReunionFree 가 켜고 결과 화면을 떠나면 끈다).
   결과 화면 색은 modern-frame.css 가 body #chart-screen … !important 로 정하므로 html body.rf-dark 로 한 단계 더 구체적으로 덮는다. 웹툰 그림과 하단 결제 단추는 그대로 둔다. */
html:has(body.rf-dark #chart-screen.active), html body.rf-dark:has(#chart-screen.active) { background-color: #14110f !important; color-scheme: dark; }
html body.rf-dark #chart-screen { --rf-bg: #14110f; --rf-card: #1e1915; --rf-inner: #29221d; --rf-line: #3a302a; --rf-ink: #efe5d6; --rf-text: #d6cabb; --rf-sub: #a3968a; --rf-rose: #e48a97; --rf-action: #b8365a; color: var(--rf-text); }
html body.rf-dark #chart-screen :is(#chart-title) { color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen :is(#chart-kicker, .chart-kicker) { color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen :is(.rt-card, .rt-lock, .rf-answer, .rf-closing, .rf-gate) { background: var(--rf-card) !important; background-image: none !important; border-color: var(--rf-line) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }
html body.rf-dark #chart-screen .rt-chapter { background: linear-gradient(135deg, #2c1f1c, #4a2c28) !important; border-color: #4a3530 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }
html body.rf-dark #chart-screen :is(.rt-card-verdict, .rf-by div, .rf-question, .rf-chart, .rf-tags span) { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen :is(.rt-card-title, .rt-tagline-title, .rf-q, .rf-ans.is-free, .rf-question p, .rt-card-verdict, .rf-by span, .rf-cols span) { color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen :is(.rt-card-lead, .rf-ans, .rt-tagline-text, .rf-steps li, .rt-lock-list li, .rt-chapter b) { color: var(--rf-text) !important; }
html body.rf-dark #chart-screen :is(.rf-sub, .rf-basis, .rt-card-next, .rf-buy-note, .rf-notice, .rt-note, .rt-lock-label, .rf-gauge-labels, .rf-cols small, .rf-chart-note, .rf-yak-lock, .rf-question small, .rt-chapter span, .rf-writing) { color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen :is(.rt-card-tag, .rt-tagline-kicker, .rt-chapter-no, .rf-no.is-free, .rf-by b, .rf-cols .is-day, .rf-chart > b) { color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen .rf-no { color: #7d7166 !important; }
html body.rf-dark #chart-screen :is(.rt-card-next, .rf-basis) { border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-blur { color: #6b5f55; }
html body.rf-dark #chart-screen .rf-cols span.is-unknown { color: #5f544b !important; }
html body.rf-dark #chart-screen .rt-lock-list li::before { background: var(--rf-rose); }
html body.rf-dark #chart-screen .rf-gauge i { border-color: var(--rf-ink); background: var(--rf-card); }
html body.rf-dark #chart-screen .ov-lock { background: linear-gradient(90deg, #3a302a, #4a3e36, #3a302a) !important; }
html body.rf-dark #chart-screen .rf-buy { background: var(--rf-action) !important; }
html body.rf-dark #chart-screen .rf-tags span { color: var(--rf-text) !important; }
/* 로고는 밝은 바탕용(진한 갈색 글씨·붉은 달)이라 어두운 바탕에서 핏빛으로 보인다. 어두운 톤에서는 미색 단색으로 바꾼다. */
html body.rf-dark :is(.site-logo, .screen-logo) img { filter: brightness(0) invert(.9) sepia(.25) saturate(.8); opacity: .9; }

/* 결제로 알게 되는 세 가지(앞쪽)와 마지막 결정 카드 */
.rf-closing-head { margin: 16px 0 8px; font: 700 13px/1.4 var(--sans); color: #7a3b2e; text-align: center; }
.rf-closing-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; text-align: left; }
.rf-closing-list li { position: relative; padding-left: 20px; font: 500 14px/1.55 var(--sans); color: #3a2c24; word-break: keep-all; }
.rf-closing-list li::before { content: '✓'; position: absolute; left: 0; color: #7a3b2e; font-weight: 700; }
.rf-price-big { margin: 4px 0 10px; text-align: center; font: 700 20px/1.3 var(--sans); color: #3a2c24; }
/* 판정 카드 핵심 세 칸: 칸 이름마다 색을 달리하고 숫자를 크게 둔다 */
.rf-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rf-key-cell { display: grid; align-content: start; gap: 2px; padding: 10px 8px 9px; border-radius: 12px; text-align: center; background: var(--rf-tint); }
.rf-key-cell b { color: var(--rf-hue); font: 800 12px/1.35 var(--sans); word-break: keep-all; }
.rf-key-cell strong { color: var(--rf-hue); font: 800 30px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.rf-key-cell strong small { margin-left: 2px; font: 700 14px/1 var(--sans); }
.rf-key-foot { color: #7a6548; font: 500 11px/1.4 var(--sans); word-break: keep-all; }
.rf-key-foot .ov-lock { width: 22px; height: 11px; margin: 0; vertical-align: -1px; }
.rf-key-cell.is-score { --rf-hue: #a3392b; --rf-tint: #f8e4de; }
.rf-key-cell.is-open { --rf-hue: #2f7a52; --rf-tint: #e2f0e6; }
.rf-key-cell.is-shake { --rf-hue: #b5651d; --rf-tint: #f8ead6; }
.rf-verdict .rt-card-title { color: #a3392b; }
html body.rf-dark #chart-screen .rf-key-cell.is-score { --rf-hue: #e48a97; --rf-tint: #3a2427; }
html body.rf-dark #chart-screen .rf-key-cell.is-open { --rf-hue: #7fcf9e; --rf-tint: #1f3027; }
html body.rf-dark #chart-screen .rf-key-cell.is-shake { --rf-hue: #e6a867; --rf-tint: #382b1c; }
html body.rf-dark #chart-screen .rf-key-foot { color: var(--rf-sub, #a3968a); }

/* 본문 결제 단추: 가격 줄이 없는 대신 더 크게 */
body #chart-screen .rt-story .rf-buy.is-plain { min-height: 68px; padding: 18px 20px; font-size: 17.5px; border-radius: 18px; }

/* 이용 후기 카드: 본문은 다섯 줄까지만 보이고 누르면 펼친다 */
/* 이용 후기: 결제 팝업(modern-global.css .pay-proof-list)과 같은 가로 스크롤. 한 번에 한 장 반이 보여 옆에 더 있다는 걸 알리고, 스냅으로 멈춘다. */
.rf-review-list { display: flex; gap: 10px; margin: 6px -14px 0; padding: 2px 14px 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rf-review-list::-webkit-scrollbar { display: none; }
.rf-review { flex: 0 0 78%; scroll-snap-align: start; box-sizing: border-box; padding: 14px 16px; border: 1px solid #ece8e1; border-radius: 14px; background: #faf8f5; cursor: pointer; }
.rf-review small { display: block; margin-bottom: 6px; color: #a3392b; font: 700 12.5px/1.3 var(--sans); }
.rf-review p { margin: 0; color: #3e342d; font: 500 14px/1.65 var(--sans); white-space: pre-line; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rf-review.is-open p { display: block; -webkit-line-clamp: unset; }
html body.rf-dark #chart-screen .rf-review { background: transparent; }
html body.rf-dark #chart-screen .rf-review p { color: var(--rf-text) !important; }
/* 재회 웹툰 컷은 카드(좌우 20px)와 달리 화면 폭 끝까지 펼친다(앱 폭 448px 상한). 바깥 컨테이너의 안쪽 여백만큼 양옆으로 나온다. */
body #chart-screen .rt-story .pg-prologue.rf-toon { margin-left: calc(50% - min(50vw, var(--app-max-width, 448px) / 2)); margin-right: calc(50% - min(50vw, var(--app-max-width, var(--app-max-width, 448px)) / 2)); }
/* PART 표지(ch1, ch2): 핵심 디자인의 위아래 줄만 있는 모양은 좌우가 트여 보인다. 다른 카드(.rt-card)와 같은 닫힌 박스로 쓴다. */
body #chart-screen.is-core-design .rt-story .rt-scene:is([data-scene-id="ch1"], [data-scene-id="ch2"]) .rt-chapter {
  gap: 8px; padding: 26px 18px 24px;
  border: 1px solid #e4d9c8 !important; border-radius: 16px;
  background: linear-gradient(160deg, #fffdf9, #f7f1e6) !important;
  box-shadow: 0 4px 18px rgba(78, 62, 43, .06) !important;
}
/* 장 카드 가독성: 제목, 요약문, 질문, 부제, 답이 서로 붙고 굵기가 비슷해서 구분이 안 됐다. 간격을 벌리고 요약문은 한 단계 연하게. */
body #chart-screen .rf-ch { gap: 0; }
body #chart-screen .rf-ch .rt-card-tag { margin-bottom: 8px; }
body #chart-screen .rf-ch .rt-card-title { margin: 0 0 16px; }
body #chart-screen .rf-ch .rt-card-lead.rt-card-strong { margin: 0 0 6px; padding: 14px 0 2px; border-top: 1px solid #eadfca; color: #5b4d3f; font-weight: 500; font-size: 14.5px; line-height: 1.85; }
body #chart-screen .rf-ch .rf-q { margin: 26px 0 0; }
body #chart-screen .rf-ch .rf-q ~ .rf-q { margin-top: 26px; padding-top: 26px; }
body #chart-screen .rf-ch .rf-sub { margin: 8px 0 12px; color: #7a5c3c; font-size: 13px; }
body #chart-screen .rf-ch .rf-ans { line-height: 1.85; }
body #chart-screen .rf-ch .rf-blur { margin-top: 14px; }
/* 맨 아래 상세 목차 */
.rf-toc { gap: 0; }
.rf-toc .rf-toc-ch { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eadfca; }
.rf-toc .rf-toc-ch:first-of-type { margin-top: 14px; }
.rf-toc .rf-toc-title { margin: 0 0 8px; color: #2f241a; font: 800 15.5px/1.5 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.rf-toc .rf-toc-title b { margin-right: 8px; color: #8a6941; font-size: 12.5px; letter-spacing: .06em; }
.rf-toc .rf-toc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rf-toc .rf-toc-list li { color: #5b4d3f; font: 500 14px/1.55 var(--sans); letter-spacing: -.015em; word-break: keep-all; }
.rf-toc .rf-toc-list .rf-no { margin-right: 8px; font-size: 13px; }
/* 맨 끝 편지와 로고: 종이 배경은 result-talk.css 가 장면 id 목록(toc, diff 등)에만 칠하므로, 이 두 장면도 같은 종이색과 폭(양옆 20px 상쇄)으로 맞춘다. */
body #chart-screen#chart-screen .rt-story .rt-scene[data-scene-id="closing-letter"] { margin: 0 -20px; padding: 28px 20px 10px; background: #faf8f5; }
body #chart-screen#chart-screen .rt-story .rt-scene[data-scene-id="end-logo"] { margin: 0 -20px; padding: 52px 20px 16px; background: #faf8f5; }
.rf-end-logo { display: block; width: 84px; height: auto; margin: 0 auto; }
/* 시기를 짚는 항목: 목차와 CTA 목록에서 포인트색(홍연 다홍) + 굵게 */
body #chart-screen .rf-toc .rf-toc-list li.rf-time, body #chart-screen .rt-lock-list li.rf-time, body #chart-screen .rf-closing-list li.rf-time { color: #a3392b !important; font-weight: 800 !important; }   /* modern-frame.css 가 카드 안 li 글자색을 important 로 잡아서 같이 important */
body #chart-screen .rf-toc .rf-toc-list li.rf-time .rf-no { color: #a3392b !important; }
body #chart-screen .rf-closing-list li.rf-time::before { color: #a3392b !important; }
/* 마무리 편지 카드: 다른 카드(.rt-card)와 같은 닫힌 박스 */
body #chart-screen .rf-letter { margin: 0; padding: 30px 24px 24px; border: 1px solid #e4d9c8; border-radius: 16px; background: linear-gradient(160deg, #fffdf9, #f7f1e6); box-shadow: 0 4px 18px rgba(78, 62, 43, .06); box-sizing: border-box; }
/* 본문 안 CTA 단추: 하단 고정 단추보다 낮고 연하게(고정 단추가 주 결제 진입점이다). */
body #chart-screen#chart-screen .rt-story .rf-buy, body #chart-screen#chart-screen .rt-story .rf-buy.is-plain { min-height: 50px; padding: 12px 18px; border-radius: 14px; background: #a84234 !important; font-size: 15.5px; box-shadow: none; }
body #chart-screen#chart-screen .rt-story .rf-buy small { font-size: 12px; }

/* 하단 고정 결제 바(청월당식): 화면 아래에 붙은 어두운 바. 판정 카드의 달빛 샴페인 골드(#f4d58d)와 홍연 다홍(#a3392b)으로 톤을 맞춘다. */
body #ov-floats:has(.ov-float-cta.is-reunion) { bottom: 0 !important; width: 100vw !important; max-width: none !important; padding: 0 !important; }   /* 컨테이너는 left:50% + translateX(-50%)라 가운데 기준으로 폭만 화면 전체로 */
body #ov-floats#ov-floats .ov-float-cta.is-reunion {
  flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 4px 10px !important;
  min-height: 0 !important; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 !important; background: rgba(26, 22, 20, .86) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none !important;
}
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-sub, body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-price { display: contents !important; }
/* 윗줄: 할인 꼬리표 + 얼리버드 종료까지 시계 / 아랫줄: 정가(위)·판매가(아래) + 단추. ::after 가 줄바꿈 역할. */
body #ov-floats#ov-floats .ov-float-cta.is-reunion::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-cut { order: 1; padding: 2px 6px; border-radius: 6px; background: #f4d58d !important; color: #241b14 !important; -webkit-text-fill-color: #241b14 !important; font: 800 10.5px/1.3 var(--sans); font-style: normal; }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-ev { order: 2; display: flex; align-items: center; gap: 5px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-ev[hidden] { display: none; }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-ev-label { color: #e6ded3 !important; -webkit-text-fill-color: #e6ded3 !important; font: 500 12px/1.2 var(--sans); }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-clock { color: #f4d58d !important; -webkit-text-fill-color: #f4d58d !important; font: 800 13px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-price del { order: 4; flex: 0 0 auto; margin-right: -6px; color: #a99f94 !important; -webkit-text-fill-color: #a99f94 !important; font: 500 11px/1.2 var(--sans); }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .pay-pill-price b { order: 5; flex: 0 0 auto; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 800 15px/1.2 var(--sans); }
body #ov-floats#ov-floats .ov-float-cta.is-reunion .ov-float-text { order: 6; flex: 1 1 0; min-width: 0; display: block; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #b53b2c, #8f281d) !important; box-shadow: 0 4px 12px rgba(163, 57, 43, .28); color: #fff !important; -webkit-text-fill-color: #fff !important; font: 800 15px/1.3 var(--sans); text-align: center; letter-spacing: -.01em; }
.rf-end-brand { display: grid; justify-items: center; gap: 10px; }
body #chart-screen .rf-end-tag { margin: 0; color: #8a6941; font: 700 14px/1.4 var(--sans); letter-spacing: -.02em; text-align: center; word-break: keep-all; }
/* 개수 대신 말이 들어가는 칸("아직 닫힘")은 숫자 칸과 높이가 맞게 글자를 줄이고 한 줄로 둔다. */
.rf-key-cell.is-word strong { font-size: 19px; line-height: 1.7; white-space: nowrap; }

/* ── 판정 카드(어두운 밤 톤, 위 웹툰과 이어지게) ── */
body #chart-screen .rt-card.rf-vd.rf-vd { gap: 0; margin: 22px 0; padding: 0; overflow: hidden; border: 1px solid #2c2740 !important; border-radius: 18px; background: #181627 !important; background-image: none !important; box-shadow: 0 8px 28px rgba(18, 14, 40, .28); }   /* modern-frame.css 가 카드 배경을 important 로 잡아서 */
.rf-vd-hero { position: relative; aspect-ratio: 941 / 900; background: #0f0e1b; }
.rf-vd-hero.is-plain { aspect-ratio: auto; padding: 28px 22px 8px; }
.rf-vd-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rf-vd-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(24, 22, 39, 0), #181627); pointer-events: none; }
.rf-vd-hero.is-plain::after { display: none; }
.rf-vd-head { display: grid; gap: 6px; padding: 26px 16px 6px; text-align: center; }
.rf-vd-hero.is-plain .rf-vd-head { position: static; padding: 0; background: none; }
body #chart-screen .rf-vd-head small { color: #e7c98f !important; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; }
body #chart-screen .rf-vd-head h3 { margin: 0; color: #fff !important; font: 800 23px/1.4 'Noto Serif KR', var(--serif, serif); letter-spacing: -.025em; word-break: keep-all; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.rf-vd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 16px 24px; }
.rf-vd-score { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 6px; }
body #chart-screen .rf-vd-score strong { color: #f4d58d; font: 800 64px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
body #chart-screen .rf-vd-score span { color: #f4d58d; font: 700 22px/1 var(--sans); }
body #chart-screen .rf-vd-score small { flex: 0 0 100%; margin-top: 8px; color: #b3adc7 !important; font: 500 12.5px/1.4 var(--sans); text-align: center; }
.rf-vd .rf-gauge { margin: 0 2px; }
body #chart-screen .rf-vd .rf-gauge i { border-color: #181627; box-shadow: 0 0 0 2px #f4d58d; }
body #chart-screen .rf-vd .rf-gauge-labels { margin: -6px 0 0; color: #9d97b4; }
.rf-vd-danger { display: grid; justify-items: center; gap: 4px; margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(200, 85, 61, .16); border: 1px solid rgba(228, 138, 151, .36); text-align: center; }
body #chart-screen .rf-vd-danger-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; background: #a3392b; color: #fff !important; font: 800 12px/1.35 var(--sans); letter-spacing: -.01em; }
body #chart-screen .rf-vd-danger-text { color: #ffd9d2 !important; font: 700 13px/1.5 var(--sans); word-break: keep-all; }
body #chart-screen .rf-vd-risk { margin: 2px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(244, 213, 141, .1); border: 1px solid rgba(244, 213, 141, .24); color: #f4d58d !important; font: 700 13.5px/1.55 var(--sans); text-align: center; word-break: keep-all; }
.rf-vd-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #332e4a; border-bottom: 1px solid #332e4a; }
.rf-vd-metric { display: grid; justify-items: center; align-content: start; grid-template-rows: auto 36px auto; gap: 4px; padding: 16px 6px; min-width: 0; text-align: center; }
.rf-vd-metric .rf-vd-foot { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 6px; white-space: normal; word-break: keep-all; }
.rf-vd-metric + .rf-vd-metric { border-left: 1px solid #332e4a; }
body #chart-screen .rf-vd-metric b { color: #b3adc7 !important; font: 700 12.5px/1.3 var(--sans); }
body #chart-screen .rf-vd-metric strong { color: #fff !important; font: 800 28px/1.2 var(--sans); }
body #chart-screen .rf-vd-metric strong.is-word { font-size: 20px; line-height: 1.5; color: #e7c98f !important; }
body #chart-screen .rf-vd-metric strong.is-masked-month { display: inline-flex; align-items: baseline; gap: 2px; font-size: 26px; line-height: 1.25; color: #f4d58d !important; }
.rf-blur-num { display: inline-block; padding: 0 3px; border-radius: 6px; background: rgba(244, 213, 141, .18); filter: blur(5.5px); user-select: none; }
body #chart-screen .rf-vd-foot { color: #8f89a8 !important; font: 500 12px/1.5 var(--sans); }
body #chart-screen .rf-vd-line { margin: 0; color: #e9e6f3 !important; font: 600 16px/1.75 var(--sans); text-align: center; word-break: keep-all; }
.rf-vd-reason { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid #332e4a; text-align: center; }
body #chart-screen .rf-vd-reason small { color: #e7c98f !important; font: 700 12.5px/1.3 var(--sans); letter-spacing: .02em; }
body #chart-screen .rf-vd-reason b { color: #fff !important; font: 800 18px/1.5 var(--sans); word-break: keep-all; }
.rf-vd-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; text-align: center; }
body #chart-screen .rt-card.rf-vd .rf-vd-facts li { color: #f1eefb !important; font: 700 17px/1.6 var(--sans) !important; letter-spacing: -.02em; word-break: keep-all; }
body #chart-screen .rf-vd-next { margin: 4px 0 0; color: #8f89a8 !important; font: 500 12.5px/1.6 var(--sans); text-align: center; }
body #chart-screen .rf-vd .ov-lock { background: #4b4668 !important; border-radius: 6px; filter: blur(3px); opacity: 1; }

/* 카드 좌우 여백 줄이기: 화면 가장자리에서 12px(기존 20px) + 카드 안쪽 14px(기존 18px). 글이 앉는 폭이 양쪽 합쳐 약 24px 넓어진다. */
body #chart-screen#chart-screen .rt-story :is(.rt-card.rf-ch, .rt-card.rf-diff, .rt-card.rf-answer, .rt-card.rf-closing, .rt-card.rf-toc, .rt-card.rf-reviews, .rt-card.rf-pillars, .rt-lock, .rf-letter, .rf-vd) { margin-left: -8px !important; margin-right: -8px !important; }
body #chart-screen#chart-screen .rt-story :is(.rt-card.rf-ch, .rt-card.rf-diff, .rt-card.rf-answer, .rt-card.rf-closing, .rt-card.rf-toc, .rt-card.rf-reviews, .rt-lock) { padding-left: 14px !important; padding-right: 14px !important; }
body #chart-screen#chart-screen .rt-story .rf-letter { padding-left: 18px !important; padding-right: 18px !important; }

/* 장 사이 한 줄(쉬어 가는 자리)과 문항 목록의 근거 한 줄 */
.rf-hook { margin: 0; padding: 26px 18px; color: #3a2c20; font: 800 clamp(19px, 5.6vw, 23px)/1.5 var(--sans); text-align: center; word-break: keep-all; }
.rf-proof { display: block; margin-top: 2px; color: #8a7a68 !important; font: 500 12px/1.5 var(--sans) !important; }
html body.rf-dark #chart-screen .rf-hook { color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen .rf-proof { color: var(--rf-sub) !important; }

/* 재회 화면 전체 언더톤 통일(월화담 홍연 紅緣): modern-frame.css 의 쿨 로즈(#b8365a) 오버라이드를 전통 홍연 다홍(#a3392b)으로 일원화 */
body #chart-screen#chart-screen:has(.rf-vd) :is(.chart-kicker, #chart-kicker, .rt-tagline-kicker, .rt-card-tag, .rt-chapter-no, .rt-card-next) { color: #a3392b !important; }
body #chart-screen#chart-screen:has(.rf-vd) .rt-card-next { border-color: #e6cfc6 !important; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-closing { border: 1.5px solid #e2c5ba !important; background: linear-gradient(180deg, #fffdfb, #fbf2ec) !important; }

/* 구매 단추: 위 작은 줄은 받는 것, 큰 글씨는 항상 "재회비책 구매하기" */
.rf-hint { display: block; margin-bottom: 3px; font: 600 12.5px/1.3 var(--sans); opacity: .92; }
body #chart-screen#chart-screen .rt-story .rf-buy.is-plain { flex-direction: column; }
.rf-why-list { display: grid; gap: 12px; margin-top: 14px; }
.rf-why-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding: 16px 14px; border-radius: 14px; background: #f7f2ea; border: 1px solid #ebe2d4; }
.rf-why-row > strong { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72px; padding: 6px 0; border-radius: 12px; background: #fffdf9; color: #a3392b; font: 800 34px/1.05 var(--sans); }
.rf-why-row > strong small { margin-top: 3px; color: #8a7a68; font: 700 12px/1 var(--sans); }
.rf-why-row > strong.is-text { font-size: 22px; }
.rf-why-text b { display: block; margin-bottom: 6px; color: #2f241a; font: 800 16.5px/1.45 var(--sans); word-break: keep-all; }
.rf-why-text p { margin: 0; color: #5b4c3b; font: 500 13.5px/1.65 var(--sans); word-break: keep-all; }
.rf-why-text p.rf-why-gain { margin-top: 8px; color: #a3392b; font: 800 14.5px/1.55 var(--sans); }
html body.rf-dark #chart-screen .rf-why-row { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-why-row > strong { background: var(--rf-card) !important; color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen .rf-why-text p { color: var(--rf-text) !important; }
html body.rf-dark #chart-screen .rf-why-text b { color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen .rf-why-text p.rf-why-gain { color: var(--rf-rose) !important; }
body #chart-screen#chart-screen .rt-story :is(.rt-card.rf-why) { margin-left: -8px !important; margin-right: -8px !important; padding-left: 14px !important; padding-right: 14px !important; }

/* 장 증명 패널(선언, 증명, 효익): 큰 값 하나로 이 장을 어떻게 셌는지 보여 준다 */
.rf-proofbox { margin: 14px 0 6px; padding: 14px 12px 12px; border-radius: 14px; background: #f7f2ea; border: 1px solid #ebe2d4; text-align: center; }
.rf-pstats { display: flex; justify-content: center; gap: 12px; }
.rf-pstat { flex: 1 1 0; min-width: 0; padding: 4px 6px; }
.rf-pstats .rf-pstat + .rf-pstat { border-left: 1px solid #e0d5c3; }
.rf-pstat strong { display: block; color: #a3392b; font: 800 clamp(30px, 9vw, 38px)/1.1 var(--sans); }
.rf-pstat strong small { margin-left: 2px; font: 700 14px/1 var(--sans); }
.rf-pstat strong.is-text { font: 800 clamp(18px, 5.4vw, 22px)/1.3 var(--sans); word-break: keep-all; }
.rf-pstat span { display: block; margin-top: 4px; color: #6b5a46; font: 600 12.5px/1.4 var(--sans); word-break: keep-all; }
.rf-ppair { display: grid; gap: 7px; text-align: left; }
.rf-ppair-row { margin: 0; padding: 9px 12px; border-radius: 10px; background: #fffdf9; border: 1px solid #e6dccb; display: flex; flex-direction: column; gap: 2px; word-break: keep-all; }
.rf-ppair-row b { color: #a3392b; font: 800 12.5px/1.35 var(--sans); }
.rf-ppair-row span { color: #2f241a; font: 700 14px/1.45 var(--sans); }
html body.rf-dark #chart-screen .rf-ppair-row { background: var(--rf-card) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-ppair-row b { color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen .rf-ppair-row span { color: var(--rf-ink) !important; }
.rf-pbar > span { display: block; margin-bottom: 8px; color: #6b5a46; font: 700 13px/1.4 var(--sans); }
.rf-pbar-track { height: 12px; border-radius: 99px; background: #e8dfd0; overflow: hidden; }
.rf-pbar-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c98a4b, #a3392b); }
.rf-pbar-ends { display: flex; justify-content: space-between; margin-top: 4px; color: #8a7a68; font: 600 11.5px/1.4 var(--sans); }
.rf-pstrip-head { display: block; margin-bottom: 8px; color: #6b5a46; font: 700 13px/1.4 var(--sans); }
.rf-pstrip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.rf-pstrip i { display: block; height: 30px; border-radius: 6px; background: #ebe2d4; color: #8c7c68; font: 700 11px/30px var(--sans); font-style: normal; }
html body.rf-dark #chart-screen .rf-pstrip-head { color: var(--rf-text) !important; }
html body.rf-dark #chart-screen .rf-pstrip i { background: var(--rf-line) !important; color: var(--rf-sub) !important; }
.rf-pnote { margin: 10px 0 0; color: #8a7a68; font: 500 12px/1.5 var(--sans); word-break: keep-all; }
.rf-gain { margin: 12px 0 8px; color: #a3392b; font: 800 clamp(17px, 5vw, 19px)/1.5 var(--sans); text-align: left; word-break: keep-all; }
html body.rf-dark #chart-screen .rf-proofbox { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-pstat strong { color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen :is(.rf-pstat span, .rf-pbar > span) { color: var(--rf-text) !important; }
html body.rf-dark #chart-screen :is(.rf-pnote, .rf-pbar-ends small) { color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen .rf-gain { color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen .rf-pbar-track { background: var(--rf-line) !important; }
.rf-gain.is-situation { color: #6b4f33; font-weight: 700; font-size: clamp(15px, 4.4vw, 16.5px); }
html body.rf-dark #chart-screen .rf-gain.is-situation { color: var(--rf-text) !important; }

/* 글꼴 위계: 짧은 헤드라인(첫 화면 제목, 장 사이 다리 문장, 점수)만 마루부리, 카드 안 본문·효익·질문은 Pretendard로 통일해 가독성을 높인다.
   modern-global.css 가 모든 글자에 Pretendard !important 를 걸어서 아이디 선택자로 이긴다. 마루부리는 modern-frame.css 가 선언해 두었고, 못 불러오면 Noto Serif KR 로 내려간다. */
body #chart-screen#chart-screen :is(.rt-tagline-title, .rf-hook .rf-hook-big, .rf-vd-score strong) { font-family: 'MaruBuri', 'Noto Serif KR', serif !important; font-weight: 700; letter-spacing: 0; }

/* 본문 구매 안내: 평서문처럼 묻히지 않도록 은은한 연지·홍연 한지 박스 버튼 형태로 시인성과 터치감을 살린다 */
body #chart-screen#chart-screen .rt-story .rf-cta-text { display: block; width: 100%; margin: 16px 0 4px; padding: 14px 16px; border: 1.5px solid #dfc0b5 !important; border-radius: 14px; background: linear-gradient(180deg, #fffaf7, #faede6) !important; box-shadow: 0 4px 14px rgba(163, 57, 43, .09); text-align: center; word-break: keep-all; cursor: pointer; text-decoration: none; }
body #chart-screen#chart-screen .rt-story .rf-cta-text .rf-cta-lead { display: block; margin-bottom: 4px; color: #5b4c3b !important; font: 700 13.5px/1.45 var(--sans); }
body #chart-screen#chart-screen .rt-story .rf-cta-text .rf-cta-act { display: block; color: #a3392b !important; font: 800 clamp(16.5px, 4.8vw, 18.5px)/1.35 var(--sans); }
html body.rf-dark #chart-screen#chart-screen .rt-story .rf-cta-text { background: linear-gradient(180deg, #321e25, #26171c) !important; border-color: #6b3a45 !important; }
html body.rf-dark #chart-screen#chart-screen .rt-story .rf-cta-text .rf-cta-lead { color: var(--rf-text) !important; }
html body.rf-dark #chart-screen#chart-screen .rt-story .rf-cta-text .rf-cta-act { color: var(--rf-rose) !important; }

/* 무료 공개 배지 & 장 하단 압축 질문 체크리스트: 옆의 1.1 번호(#a3392b)와 같은 홍연 다홍 톤으로 일치 */
.rf-badge-free { display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 99px; background: #f9e8e3; color: #a3392b; font: 800 11px/1.35 var(--sans); font-style: normal; vertical-align: 2px; }
.rf-ch-rest { margin-top: 22px; padding: 14px 14px 12px; border-radius: 12px; background: #f7f2ea; border: 1px solid #e6dccb; }
.rf-ch-rest-head { display: block; margin-bottom: 8px; color: #7a6548; font: 800 12.5px/1.4 var(--sans); }
.rf-ch-rest-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rf-ch-rest-list li { display: flex; align-items: baseline; gap: 6px; color: #4a3d31; font: 600 13.5px/1.5 var(--sans); word-break: keep-all; }
.rf-ch-rest-list li .rf-no { margin-right: 0; flex: 0 0 auto; font-size: 12.5px; }
.rf-ch-rest-list li.rf-time, .rf-ch-rest-list li.rf-time .rf-no { color: #a3392b !important; font-weight: 800 !important; }
html body.rf-dark #chart-screen .rf-ch-rest { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-ch-rest-head { color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen .rf-ch-rest-list li { color: var(--rf-text) !important; }

/* 맨 아래 사업자 정보(랜딩 푸터 재사용): 기본은 랜딩 밖에서 숨겨져 있어 이 안에서만 연다. 아래 고정 단추에 가리지 않게 여백을 둔다. */
body #chart-screen .rt-story .site-footer.rf-site-footer { display: block; margin: 8px 0 0; padding: 18px 14px 18px; border-top: 1px solid rgba(58, 51, 42, .09); }
html body.rf-dark #chart-screen .site-footer.rf-site-footer { border-top-color: var(--rf-line); }
html body.rf-dark #chart-screen .site-footer.rf-site-footer :is(p, a, strong, span) { color: var(--rf-sub) !important; }
/* 로고 바로 아래에 푸터가 붙도록: 두 장면 사이 여백을 없애고 로고 장면과 같은 바탕으로 잇는다 */
body #chart-screen#chart-screen .rt-story .rt-scene[data-scene-id="site-footer"] { margin: 0 -20px !important; padding: 0 20px; background: #faf8f5; }
body #chart-screen .rt-story .site-footer.rf-site-footer { margin-top: 0; border-top: 0; padding-top: 4px; }
.rt-tagline .rf-hero-gain { margin: 14px 0 12px; text-align: center; }
body #chart-screen .rt-tagline :is(.rt-tagline-title, .rt-tagline-text), body #chart-screen .rf-closing .rt-card-title { white-space: pre-line; word-break: keep-all; }
.rf-closing-quote { margin: 6px 0 4px; color: #7a4b38; font: 700 clamp(15px, 4.4vw, 17px)/1.5 var(--sans); word-break: keep-all; }
html body.rf-dark #chart-screen .rf-closing-quote { color: var(--rf-text) !important; }
/* 첫 후킹이 약했던 이유 하나: 제목이 18px 이하였다. 한눈에 읽히는 크기로 키운다. */
body #chart-screen#chart-screen .rt-tagline .rt-tagline-title { font-size: clamp(23px, 6.8vw, 29px) !important; line-height: 1.38 !important; letter-spacing: -.02em !important; margin: 10px 0 8px; }
.rt-tagline .rf-hero-lead { margin: 12px 0 0; color: #6b4f33; font: 700 clamp(15px, 4.4vw, 17px)/1.5 var(--sans); }
html body.rf-dark #chart-screen .rf-hero-lead { color: var(--rf-text) !important; }
.rf-hook .rf-hook-big { margin: 0; font: inherit; color: inherit; }
.rf-hook .rf-hook-gain { display: block; margin-top: 10px; color: #a3392b; font: 700 14.5px/1.55 var(--sans); }
html body.rf-dark #chart-screen .rf-hook .rf-hook-gain { color: var(--rf-rose) !important; }

/* 후기 모음 이미지: 좌우 말풍선과 가운데 카피, 바로 뒤에 "왜 월화담의 재회비책" 카드가 이어진다 */
.rf-hugi { margin: 0 -8px; }
.rf-hugi-img { display: block; width: 100%; height: auto; }
.rf-why-text p.rf-why-gain { margin-top: 2px; }
.rf-why-more { margin-top: 8px; }
.rf-why-more summary { display: inline-block; padding: 4px 0; color: #8a7a68; font: 700 12.5px/1.4 var(--sans); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.rf-why-more summary::-webkit-details-marker { display: none; }
.rf-why-more[open] summary { margin-bottom: 4px; }
.rf-why-more p { margin: 0; }
html body.rf-dark #chart-screen .rf-why-more summary { color: var(--rf-sub) !important; }

/* 왜 월화담 카드: 비교 차트. 칸마다 둥근 모서리로 띄워 다른 상자와 같은 모양으로 맞추고, 재회비책 칸은 홍연 다홍 테두리와 머리띠로 눈에 띄게 한다 */
.rf-cmp { display: grid; grid-template-columns: 54px 1fr 1.12fr; gap: 6px; align-items: stretch; margin-top: 4px; font-family: var(--sans); }
.rf-cmp > div { display: flex; align-items: center; padding: 13px 9px; font: 600 13.5px/1.45 var(--sans); word-break: keep-all; border-radius: 12px; }
.rf-cmp-h { justify-content: center; text-align: center; font-weight: 800 !important; }
.rf-cmp-h.is-other { background: #ece6da; color: #8a7a68; }
.rf-cmp-h.is-ours { background: #a3392b; color: #fff; font-size: 14.5px !important; box-shadow: 0 4px 12px rgba(163, 57, 43, .22); }
.rf-cmp-label { color: #8a7a68; font: 700 11.5px/1.35 var(--sans) !important; padding-left: 2px !important; padding-right: 2px !important; }
.rf-cmp-c.is-other { background: #f4f1ec; color: #9a8c7c; padding-left: 28px !important; position: relative; }
.rf-cmp-c.is-other::before { content: '✕'; position: absolute; left: 9px; color: #b9ae9f; font-weight: 800; }
.rf-cmp-c.is-ours { background: #fdf6f3; border: 1.5px solid #e6c8be; color: #2f241a; font-weight: 800 !important; padding-left: 30px !important; position: relative; }
.rf-cmp-c.is-ours::before { content: '✓'; position: absolute; left: 9px; width: 16px; height: 16px; border-radius: 50%; background: #a3392b; color: #fff; font: 800 10.5px/16px var(--sans); text-align: center; }
.rf-cmp-c.is-ours.is-last { background: #faece6; }
html body.rf-dark #chart-screen .rf-cmp-h.is-other { background: var(--rf-inner) !important; color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen .rf-cmp-c.is-other { background: var(--rf-inner) !important; color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen .rf-cmp-c.is-ours { background: #3a2227 !important; border-color: #6b3a45 !important; color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen .rf-cmp-c.is-ours.is-last { background: #4a2730 !important; }
html body.rf-dark #chart-screen .rf-cmp-label { color: var(--rf-sub) !important; }
html body.rf-dark #chart-screen .rf-review { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }

/* 평생사주·신년운세 결과가 같이 쓰는 장면 id(answer, reviews, diff, toc)는 result-talk.css 가 가로로 꽉 찬 미색 띠를 깐다.
   재회 화면은 다른 카드처럼 페이지 바탕 위에 둥근 카드만 놓이게 그 띠와 위아래 여백을 지운다. */
body #chart-screen#chart-screen .rt-story .rt-scene:is([data-scene-id="answer"], [data-scene-id="reviews"], [data-scene-id="diff"], [data-scene-id="toc"]):has(> :is(.rf-answer, .rf-reviews, .rf-diff, .rf-toc)) { margin: 0 !important; padding: 0 !important; background: transparent !important; }

/* 남기신 질문의 답: 이 화면에서 가장 중요한 카드라 홍연 다홍 테두리, 은은한 연지 번짐, 큰 따옴표 질문으로 눈에 띄게 한다 */
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer { border: 2px solid #a3392b !important; background: linear-gradient(180deg, #fdf3ee, #ffffff 36%) !important; box-shadow: 0 12px 30px rgba(163, 57, 43, .15) !important; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rt-card-title { font-size: 21px; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-question { position: relative; padding: 18px 18px 16px 20px; border: 1.5px solid #e8cfc6; border-radius: 14px; background: #fff !important; box-shadow: 0 4px 14px rgba(163, 57, 43, .07); }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-question::before { content: '“'; position: absolute; top: -4px; left: 12px; color: #e4bfb3; font: 800 46px/1 serif; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-question small { margin-top: 10px; color: #a3392b !important; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-question p { font-size: 17.5px; line-height: 1.6; font-weight: 800; color: #2f241a !important; }
body #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-ans { font-size: 16px; }
html body.rf-dark #chart-screen#chart-screen .rt-story .rt-card.rf-answer { background: linear-gradient(180deg, #2c1a21, var(--rf-card) 34%) !important; border-color: var(--rf-rose) !important; }
html body.rf-dark #chart-screen#chart-screen .rt-story .rt-card.rf-answer .rf-question { background: var(--rf-inner) !important; border-color: #6b3a45; }

/* 두 사람의 명식표(판정의 계산 근거 + 일주 대조 해설): 한지 바탕, 이중 테두리, 時日月年 / 天干 / 地支 옛 원국표 */
.rf-pillars { padding: 16px 14px !important; gap: 6px; }
body #chart-screen#chart-screen .rt-story .rf-pillars .rt-card-title { margin-bottom: 6px; font-size: clamp(15.5px, 4.3vw, 18px) !important; line-height: 1.35 !important; letter-spacing: -.03em !important; white-space: nowrap; }
.rf-pl-caption { margin: 6px 2px 0; padding: 0; border: 0; background: none; color: #6b5a46; font: 500 13px/1.6 var(--sans); word-break: keep-all; }
html body.rf-dark #chart-screen .rf-pl-caption { background: none !important; border: 0 !important; color: var(--rf-sub) !important; }
.rf-pl-paper { position: relative; padding: 18px 14px 16px; background: radial-gradient(120% 80% at 50% 0%, #fbf5e6, #f4ead3); border: 1px solid #8a6b3f; border-radius: 4px; box-shadow: inset 0 0 0 4px #f6eddb, inset 0 0 0 5px #b79a63; }
.rf-pl-sheet { display: grid; gap: 8px; }
.rf-pl-title { justify-self: center; display: grid; gap: 3px; justify-items: center; padding: 0 16px 6px; border-bottom: 1px solid #b79a63; }
.rf-pl-birth { color: #7a6544; font: 600 12.5px/1.3 'Noto Serif KR', 'Noto Serif CJK KR', serif !important; letter-spacing: .04em; }
.rf-pl-name { color: #3a2c1a; font: 800 15px/1.4 'Noto Serif KR', 'Noto Serif CJK KR', serif !important; letter-spacing: .08em; }
.rf-pl-grid { display: grid; grid-template-columns: 26px repeat(4, minmax(0, 1fr)); border-top: 1.5px solid #5e4524; border-left: 1px solid #b79a63; }
.rf-pl-grid > span { display: flex; align-items: center; justify-content: center; border-right: 1px solid #b79a63; border-bottom: 1px solid #b79a63; font-family: 'Noto Serif KR', 'Noto Serif CJK KR', serif !important; }
.rf-pl-corner { background: #efe3c8; }
.rf-pl-head { padding: 5px 0; background: #efe3c8; color: #6a5230; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.rf-pl-head.is-day { color: #b3261e; }
.rf-pl-side { background: #efe3c8; color: #6a5230; font-size: 12px; font-weight: 700; }
.rf-pl-cell { position: relative; flex-direction: column; gap: 3px; padding: 9px 0 8px; color: #2a2118; line-height: 1; }
.rf-pl-cell b { font-size: clamp(25px, 8vw, 31px); font-weight: 800; line-height: 1; }
.rf-pl-cell small { color: #8a7655; font: 600 11px/1 var(--sans); }
.rf-pl-small { flex-direction: column; gap: 1px; padding: 5px 1px; font-size: 11.5px; font-weight: 700; line-height: 1.3; text-align: center; word-break: keep-all; }
.rf-pl-small.is-god { color: #6a5230; }
.rf-pl-small.is-sal { align-items: center; min-height: 40px; color: #7a4a1f; font-size: 10.5px; font-weight: 600; }
.rf-pl-small.is-sal em { font-style: normal; }
.rf-pl-side.is-small { font-size: 11px; }
.rf-pl-cell.is-wood { color: #345f47; }
.rf-pl-cell.is-fire { color: #a8372a; }
.rf-pl-cell.is-earth { color: #85601f; }
.rf-pl-cell.is-metal { color: #565c64; }
.rf-pl-cell.is-water { color: #25395a; }
.rf-pl-cell.is-unknown, .rf-pl-cell.is-none { color: #bfae8c; font-weight: 500; }
.rf-pl-cell.is-seal::after { content: ''; position: absolute; inset: 3px 6px; border: 2px solid #c0392b; border-radius: 50%; opacity: .85; pointer-events: none; }
.rf-pl-rule { display: block; height: 1px; margin: 14px 18px; background: linear-gradient(90deg, transparent, #b79a63, transparent); }
.rf-pl-note { margin: 0; text-align: center; color: #8a7655; font: 500 11px/1.4 var(--sans); }
html body.rf-dark #chart-screen .rf-pl-paper { background: #2a2219; border-color: #6b5836; box-shadow: inset 0 0 0 4px #2a2219, inset 0 0 0 5px #5d4c2d; }
html body.rf-dark #chart-screen .rf-pl-name { color: #e8dcc2 !important; }
html body.rf-dark #chart-screen .rf-pl-title { border-color: #5d4c2d; }
html body.rf-dark #chart-screen .rf-pl-birth { color: #cdbb94 !important; }
html body.rf-dark #chart-screen :is(.rf-pl-corner, .rf-pl-head, .rf-pl-side) { background: #33291c !important; color: #cdbb94 !important; }
html body.rf-dark #chart-screen .rf-pl-grid, html body.rf-dark #chart-screen .rf-pl-grid > span { border-color: #5d4c2d !important; }
html body.rf-dark #chart-screen .rf-pl-cell { color: #efe5d0 !important; }
html body.rf-dark #chart-screen :is(.rf-pl-small.is-god, .rf-pl-cell small, .rf-pl-small.is-sal) { color: #cdbb94 !important; }

/* 예시 달력 */
.rf-cal.is-inline { margin: 22px 0 4px; padding: 16px 12px 14px; border: 1px solid #e6dccb; border-radius: 14px; background: #fffdf9; }
.rf-cal.is-inline .rt-card-tag { display: block; margin-bottom: 4px; }
.rf-cal.is-inline .rt-card-title { margin: 0 0 6px; font-size: 17px; }
.rf-cal.is-inline .rt-card-lead { margin: 0; font-size: 13.5px; }
html body.rf-dark #chart-screen .rf-cal.is-inline { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
.rf-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 6px; font: 700 12.5px/1.4 var(--sans); }
.rf-cal-legend span::before { content: '✓'; display: inline-block; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px; text-align: center; font: 800 11px/16px var(--sans); color: #fff; vertical-align: -2px; }
.rf-cal-legend .is-contact::before { background: #4f8a5b; }
.rf-cal-legend .is-meet::before { background: #a3392b; }
.rf-cal-legend .is-avoid::before { content: '✕'; background: #8a8378; }
.rf-cal-legend .is-incoming::before { content: '↙'; background: #3f6ea8; }
.rf-cal-month { margin-top: 14px; }
.rf-cal-title { display: block; margin-bottom: 6px; color: #3a2c20; font: 800 15px/1.4 var(--sans); }
.rf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rf-cal-wd { text-align: center; color: #8a6941; font: 700 11px/1.8 var(--sans); font-style: normal; }
.rf-cal-cell { position: relative; min-height: 38px; padding: 3px 2px; border-radius: 6px; background: #f7f2ea; text-align: center; }
.rf-cal-cell.is-blank { background: transparent; }
.rf-cal-cell em { display: block; color: #4a3b2c; font: 600 12px/1.4 var(--sans); font-style: normal; }
.rf-cal-cell u { display: inline-block; width: 15px; height: 15px; margin: 1px 1px 0; border-radius: 4px; color: #fff; text-decoration: none; font: 800 10px/15px var(--sans); }
.rf-cal-cell.is-contact u:nth-of-type(1) { background: #4f8a5b; }
.rf-cal-cell.is-meet u:nth-of-type(2), .rf-cal-cell.is-meet:not(.is-contact) u { background: #a3392b; }
.rf-cal-cell.is-avoid u { background: #8a8378; }
.rf-cal-cell u.is-incoming { background: #3f6ea8 !important; }
/* 가장 많이 묻는 두 가지 · 연락 질문 아래: 연락이 올 수 있는 날(날짜는 가린다) */
.rf-incoming { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; padding: 11px 14px; border: 1px dashed #d8c9ad; border-radius: 12px; background: #fbf6ea; }
.rf-incoming b { color: #3a2c20; font: 800 14px/1.4 var(--sans); word-break: keep-all; }
.rf-incoming-date { flex: none; color: #a3392b; font: 800 14px/1.4 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.rf-incoming-date .ov-lock { margin-right: 5px; vertical-align: -2px; }
html body.rf-dark #chart-screen .rf-incoming { background: var(--rf-inner) !important; border-color: var(--rf-line) !important; }
html body.rf-dark #chart-screen .rf-incoming b { color: var(--rf-text, #f1e9dc) !important; }
.rf-cal-note { margin: 14px 0 0; color: #7a6548; font: 600 12.5px/1.6 var(--sans); text-align: center; word-break: keep-all; }
html body.rf-dark #chart-screen .rf-cal-cell { background: var(--rf-inner) !important; }
html body.rf-dark #chart-screen :is(.rf-cal-title, .rf-cal-cell em) { color: var(--rf-ink) !important; }
html body.rf-dark #chart-screen :is(.rf-cal-note, .rf-cal-wd) { color: var(--rf-sub) !important; }