/* 손님용 재회 리포트. 같은 화면 구조 위에 시안 세 가지(밤하늘·편지·새벽)를 색과 표지 구성만 바꿔 입힌다. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700;900&display=swap'); #result-section .rs-report { --rs-serif: 'Noto Serif KR', Batang, Georgia, serif; --rs-sans: 'Pretendard', 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif; --rs-radius: 18px; max-width: 780px; margin: 0 auto; padding: 0 0 40px; box-sizing: border-box; font-family: var(--rs-sans); font-size: 16.5px; line-height: 1.85; letter-spacing: -0.01em; --rs-c: var(--rs-ink); background: var(--rs-bg); border-radius: 24px; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; } #result-section .rs-report *, #result-section .rs-report *::before, #result-section .rs-report *::after { box-sizing: border-box; } #result-section .rs-report p { margin: 0 0 12px; } #result-section .rs-report h1, #result-section .rs-report h2, #result-section .rs-report h3 { font-family: var(--rs-serif); --rs-c: var(--rs-ink); letter-spacing: -0.02em; margin: 0; } /* 사이트 공통 설정이 밝은 화면에서 제목·본문 색을 !important로 덮으므로, 리포트 안의 글자색은 각 요소가 정한 --rs-c를 쓰도록 한 번에 고정한다(색을 정하지 않은 요소는 부모 색을 이어받는다). */ #result-section .rs-report, #result-section .rs-report * { color: var(--rs-c) !important; } #result-section .rs-report h1, #result-section .rs-report h2, #result-section .rs-report h3 { text-align: left !important; } #result-section [data-reunion-theme="dawn"] .rs-closing p, #result-section .rs-closing p { text-align: center !important; } /* ── 시안 색 ── */ #result-section .rs-report[data-reunion-theme="night"] { --rs-bg: #121026; --rs-surface: #1c1937; --rs-surface-2: #262148; --rs-ink: #efe9fb; --rs-muted: #b8afd6; --rs-accent: #e8c27a; --rs-accent-ink: #1a1530; --rs-line: rgba(232, 194, 122, 0.20); --rs-good: #86d9ae; --rs-care: #f3a291; --rs-calm: #a3abd2; --rs-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } #result-section .rs-report[data-reunion-theme="letter"] { --rs-bg: #f3e9da; --rs-surface: #fffaf1; --rs-surface-2: #f8eedf; --rs-ink: #2d221b; --rs-muted: #6f5d4f; --rs-accent: #9b2f2f; --rs-accent-ink: #fffaf1; --rs-line: rgba(116, 80, 54, 0.20); --rs-good: #3f7d5a; --rs-care: #b4472f; --rs-calm: #8a7a6a; --rs-shadow: 0 14px 30px rgba(90, 60, 30, 0.12); } #result-section .rs-report[data-reunion-theme="dawn"] { --rs-bg: #fbf8fc; --rs-surface: #ffffff; --rs-surface-2: #f5eef7; --rs-ink: #241f33; --rs-muted: #6b6380; --rs-accent: #c2537d; --rs-accent-ink: #ffffff; --rs-line: rgba(36, 31, 51, 0.10); --rs-good: #2f9e75; --rs-care: #d4644f; --rs-calm: #8b86a3; --rs-shadow: 0 12px 30px rgba(60, 40, 90, 0.08); } /* ── 표지 ── */ #result-section .rs-cover { position: relative; min-height: 440px; display: flex; align-items: flex-end; background-image: var(--rs-cover); background-size: cover; background-position: center 28%; } #result-section .rs-cover::before { content: ""; position: absolute; inset: 0; } #result-section .rs-cover-inner { position: relative; padding: 36px 34px 32px; width: 100%; } #result-section .rs-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; --rs-c: var(--rs-accent); margin-bottom: 10px; } #result-section .rs-cover h1 { font-size: 34px; font-weight: 900; line-height: 1.3; } #result-section .rs-pair { margin-top: 10px !important; font-family: var(--rs-serif); font-size: 16px; opacity: 0.92; } #result-section .rs-question { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 16px !important; padding: 10px 14px; border-radius: 12px; font-size: 15px; } #result-section .rs-question span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.75; } #result-section [data-reunion-theme="night"] .rs-cover::before { background: linear-gradient(180deg, rgba(18, 16, 38, 0.05) 0%, rgba(18, 16, 38, 0.45) 50%, #121026 100%); } #result-section [data-reunion-theme="night"] .rs-cover h1, #result-section [data-reunion-theme="night"] .rs-pair { --rs-c: #fff7ea; } #result-section [data-reunion-theme="night"] .rs-question { background: rgba(255, 255, 255, 0.10); --rs-c: #fff7ea; backdrop-filter: blur(4px); } #result-section [data-reunion-theme="letter"] .rs-cover { background-position: center 35%; } #result-section [data-reunion-theme="letter"] .rs-cover::before { background: linear-gradient(180deg, rgba(40, 22, 12, 0.0) 0%, rgba(40, 22, 12, 0.55) 52%, rgba(40, 22, 12, 0.92) 100%); } #result-section [data-reunion-theme="letter"] .rs-cover h1, #result-section [data-reunion-theme="letter"] .rs-pair { --rs-c: #fff6e9; } #result-section [data-reunion-theme="letter"] .rs-kicker { --rs-c: #f0c98c; } #result-section [data-reunion-theme="letter"] .rs-question { background: rgba(255, 246, 233, 0.14); --rs-c: #fff6e9; } #result-section [data-reunion-theme="dawn"] .rs-cover { min-height: 0; display: block; background: none; } #result-section [data-reunion-theme="dawn"] .rs-cover::before { position: relative; display: block; height: 300px; background: linear-gradient(180deg, rgba(251, 248, 252, 0) 45%, #fbf8fc 100%), var(--rs-cover) center 30% / cover; } #result-section [data-reunion-theme="dawn"] .rs-cover-inner { padding-top: 6px; } #result-section [data-reunion-theme="dawn"] .rs-question { background: var(--rs-surface-2); --rs-c: var(--rs-ink); } /* ── 한눈에 보는 결론 ── */ #result-section .rs-verdict { margin: 6px 22px 0; padding: 26px 26px 22px; border-radius: var(--rs-radius); background: var(--rs-surface); border: 1px solid var(--rs-line); box-shadow: var(--rs-shadow); } #result-section .rs-verdict-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; --rs-c: var(--rs-accent); } #result-section .rs-verdict-top { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 22px; align-items: center; margin: 6px 0 18px; } #result-section .rs-gauge { position: relative; width: 128px; height: 128px; } #result-section .rs-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } #result-section .rs-gauge circle { fill: none; stroke-width: 10; } #result-section .rs-gauge-track { stroke: var(--rs-surface-2); } #result-section .rs-gauge-fill { stroke: var(--rs-accent); stroke-linecap: round; } #result-section .rs-gauge.is-stop .rs-gauge-fill { stroke: var(--rs-calm); } #result-section .rs-gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } #result-section .rs-gauge-text strong { font-family: var(--rs-serif); font-size: 38px; font-weight: 900; } #result-section .rs-gauge-text span { font-size: 13px; --rs-c: var(--rs-muted); margin-top: 4px; } #result-section .rs-chance { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px !important; } #result-section .rs-chance span { font-size: 13px; font-weight: 700; --rs-c: var(--rs-muted); } #result-section .rs-chance strong { font-size: 22px; --rs-c: var(--rs-accent); } #result-section .rs-verdict h2 { font-size: 25px; font-weight: 900; line-height: 1.45; } #result-section .rs-verdict-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } #result-section .rs-verdict-cell { padding: 16px 18px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-verdict-cell > span { display: block; font-size: 12.5px; font-weight: 800; --rs-c: var(--rs-muted); margin-bottom: 4px; } #result-section .rs-verdict-cell > strong { font-family: var(--rs-serif); font-size: 22px; font-weight: 900; } #result-section .rs-verdict-cell > em { display: inline-block; margin-left: 8px; font-style: normal; font-size: 13px; --rs-c: var(--rs-muted); } #result-section .rs-verdict-cell p { margin: 8px 0 0 !important; font-size: 15px; line-height: 1.75; } #result-section .rs-action { font-weight: 700; font-size: 16px !important; margin-top: 2px !important; } #result-section .rs-revisit { margin: 14px 0 0 !important; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--rs-line); font-size: 15px; line-height: 1.75; } #result-section .rs-revisit b { margin-right: 8px; --rs-c: var(--rs-accent); } /* ── 목차 ── */ #result-section .rs-toc { display: flex; gap: 8px; overflow-x: auto; padding: 22px 22px 4px; scrollbar-width: none; } #result-section .rs-toc::-webkit-scrollbar { display: none; } #result-section .rs-toc a { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: baseline; padding: 8px 14px; border-radius: 999px; background: var(--rs-surface); border: 1px solid var(--rs-line); --rs-c: var(--rs-ink); font-size: 14px; font-weight: 600; text-decoration: none; } #result-section .rs-toc a span { font-size: 11px; --rs-c: var(--rs-accent); font-weight: 800; } /* ── 장 ── */ #result-section .rs-chapter { margin: 18px 22px 0; padding: 30px 28px 24px; border-radius: var(--rs-radius); background: var(--rs-surface); border: 1px solid var(--rs-line); scroll-margin-top: 90px; } #result-section .rs-chapter-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } #result-section .rs-num { font-family: var(--rs-serif); font-size: 15px; font-weight: 900; --rs-c: var(--rs-accent); } #result-section .rs-chapter h2 { font-size: 23px; font-weight: 900; line-height: 1.45; } #result-section .rs-sub { font-size: 16px; font-weight: 700; margin: 18px 0 10px !important; } #result-section .rs-lead { font-size: 17.5px; font-weight: 600; line-height: 1.8; } #result-section .rs-portrait { font-family: var(--rs-serif); font-size: 19px; font-weight: 700; --rs-c: var(--rs-accent); margin-bottom: 10px !important; } #result-section .rs-callouts { display: grid; gap: 12px; margin-top: 16px; } #result-section .rs-callout { padding: 16px 18px; border-radius: 14px; background: var(--rs-surface-2); border-left: 3px solid var(--rs-accent); } #result-section .rs-callout h3 { font-family: var(--rs-sans); font-size: 14px; font-weight: 800; --rs-c: var(--rs-accent); margin-bottom: 6px; } #result-section .rs-callout p { margin: 0 !important; font-size: 15.5px; } #result-section .rs-basis { margin: 14px 0 0 !important; font-size: 12.5px; line-height: 1.7; --rs-c: var(--rs-muted); } #result-section .rs-note { font-size: 13.5px; --rs-c: var(--rs-muted); } #result-section .rs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; } #result-section .rs-pane { padding: 18px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-pane h3 { font-family: var(--rs-sans); font-size: 14px; font-weight: 800; margin-bottom: 8px; } #result-section .rs-pane p { margin: 0 !important; font-size: 15.5px; } #result-section .rs-pane.is-pull h3, #result-section .rs-pane.is-do h3 { --rs-c: var(--rs-good); } #result-section .rs-pane.is-clash h3, #result-section .rs-pane.is-avoid h3 { --rs-c: var(--rs-care); } #result-section .rs-pane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } #result-section .rs-pane li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.7; } #result-section .rs-pane li::before { position: absolute; left: 0; top: 0; font-weight: 900; } #result-section .rs-pane li.is-do::before { content: "✓"; --rs-c: var(--rs-good); } #result-section .rs-pane li.is-avoid::before { content: "✕"; --rs-c: var(--rs-care); } #result-section .rs-loop { display: flex; align-items: stretch; gap: 8px; margin: 4px 0 14px; } #result-section .rs-loop-step { flex: 1 1 0; min-width: 0; padding: 14px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-loop-step span { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--rs-care); --rs-c: #fff; font-size: 12px; font-weight: 800; margin-bottom: 8px; } #result-section .rs-loop-step p { margin: 0 !important; font-size: 14.5px; line-height: 1.65; } #result-section .rs-loop-arrow { flex: 0 0 14px; align-self: center; height: 14px; border-top: 2px solid var(--rs-care); border-right: 2px solid var(--rs-care); transform: rotate(45deg); opacity: 0.7; } #result-section .rs-metrics { display: grid; gap: 14px; margin: 16px 0 10px; } #result-section .rs-metric-head { display: flex; align-items: baseline; gap: 10px; } #result-section .rs-metric-head span { flex: 1 1 auto; font-weight: 700; font-size: 15.5px; } #result-section .rs-metric-head strong { font-family: var(--rs-serif); font-size: 20px; font-weight: 900; } #result-section .rs-metric-head small { font-size: 12px; margin-left: 1px; } #result-section .rs-metric-head em { font-style: normal; font-size: 12.5px; --rs-c: var(--rs-muted); min-width: 52px; text-align: right; } #result-section .rs-bar { height: 8px; border-radius: 999px; background: var(--rs-surface-2); overflow: hidden; margin: 6px 0; } #result-section .rs-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rs-accent); } #result-section .rs-metric.is-low .rs-bar i { background: var(--rs-calm); } #result-section .rs-metric p { margin: 0 !important; font-size: 13.5px; --rs-c: var(--rs-muted); } #result-section .rs-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } #result-section .rs-month { padding: 16px; border-radius: 14px; background: var(--rs-surface-2); border-top: 4px solid var(--rs-calm); } #result-section .rs-month.is-good { border-top-color: var(--rs-good); } #result-section .rs-month.is-care { border-top-color: var(--rs-care); } #result-section .rs-month header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; } #result-section .rs-month header strong { font-family: var(--rs-serif); font-size: 22px; font-weight: 900; } #result-section .rs-month header span { font-size: 12.5px; font-weight: 800; --rs-c: var(--rs-calm); } #result-section .rs-month.is-good header span { --rs-c: var(--rs-good); } #result-section .rs-month.is-care header span { --rs-c: var(--rs-care); } #result-section .rs-month h3 { font-family: var(--rs-sans); font-size: 15px; font-weight: 800; line-height: 1.5; margin-bottom: 6px; } #result-section .rs-month p { margin: 0 !important; font-size: 14px; line-height: 1.7; } #result-section .rs-month p.rs-basis { margin-top: 8px !important; font-size: 11.5px; } #result-section .rs-promises { margin: 6px 0 14px; padding: 0; list-style: none; counter-reset: rs-promise; display: grid; gap: 10px; } #result-section .rs-promises li { counter-increment: rs-promise; position: relative; padding: 16px 18px 16px 54px; border-radius: 14px; background: var(--rs-surface-2); font-size: 15.5px; line-height: 1.75; } #result-section .rs-promises li::before { content: counter(rs-promise); position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rs-accent); --rs-c: var(--rs-accent-ink); font-weight: 900; font-size: 13px; } #result-section .rs-safety { margin-top: 14px !important; font-size: 14px; --rs-c: var(--rs-muted); } #result-section .rs-closing { margin: 18px 22px 0; padding: 34px 30px; border-radius: var(--rs-radius); background: var(--rs-surface-2); text-align: center; } #result-section .rs-closing-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; --rs-c: var(--rs-accent); } #result-section .rs-closing p:last-child { font-family: var(--rs-serif); font-size: 18px; line-height: 1.95; margin: 0 !important; } #result-section .rs-basis-table .rs-table-wrap { overflow-x: auto; margin: 10px 0 6px; } #result-section .rs-basis-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } #result-section .rs-basis-table th, #result-section .rs-basis-table td { padding: 8px 6px; border-bottom: 1px solid var(--rs-line); text-align: center; white-space: nowrap; } #result-section .rs-basis-table thead th { --rs-c: var(--rs-muted); font-weight: 700; } #result-section .rs-plain { margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.8; } #result-section .rs-report .actions { padding: 24px 22px 0; } /* ── 화면 크기 ── */ @media (max-width: 640px) { #result-section .rs-report { font-size: 16px; border-radius: 18px; } #result-section .rs-cover { min-height: 380px; } #result-section .rs-cover-inner { padding: 26px 20px 22px; } #result-section .rs-cover h1 { font-size: 27px; } #result-section [data-reunion-theme="dawn"] .rs-cover::before { height: 220px; } #result-section .rs-verdict, #result-section .rs-chapter, #result-section .rs-closing { margin-left: 12px; margin-right: 12px; padding: 22px 18px 18px; } #result-section .rs-verdict-top { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } #result-section .rs-gauge { width: 96px; height: 96px; } #result-section .rs-gauge-text strong { font-size: 28px; } #result-section .rs-verdict h2 { font-size: 20px; } #result-section .rs-verdict-grid, #result-section .rs-two { grid-template-columns: minmax(0, 1fr); } #result-section .rs-toc { padding: 18px 12px 2px; } #result-section .rs-chapter h2 { font-size: 20px; } #result-section .rs-loop { flex-direction: column; } #result-section .rs-loop-arrow { transform: rotate(135deg); margin: 0 auto; } #result-section .rs-month-grid { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 641px) and (max-width: 900px) { #result-section .rs-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── 인쇄·PDF: 시안과 상관없이 흰 종이에 진한 글자 ── */ @media print { #result-section .rs-report { --rs-bg: #ffffff; --rs-surface: #ffffff; --rs-surface-2: #f6f3ef; --rs-ink: #1f1a17; --rs-muted: #5b524b; --rs-line: #ddd2c6; background: #fff; border-radius: 0; } #result-section .rs-cover { min-height: 300px; } #result-section .rs-chapter, #result-section .rs-verdict, #result-section .rs-month, #result-section .rs-callout { break-inside: avoid; box-shadow: none; } #result-section .rs-toc, #result-section .rs-report .actions { display: none; } } /* 표지 글은 그림 아래쪽 어두운 자리에 왼쪽 정렬로 둔다(사이트 공통 설정의 가운데 정렬을 막는다). */ #result-section .rs-cover-inner, #result-section .rs-cover-inner * { text-align: left !important; } #result-section [data-reunion-theme="night"] .rs-cover, #result-section [data-reunion-theme="letter"] .rs-cover { min-height: 560px; background-position: center 12%; } @media (max-width: 640px) { #result-section [data-reunion-theme="night"] .rs-cover, #result-section [data-reunion-theme="letter"] .rs-cover { min-height: 460px; } } #result-section .rs-callout.is-if { margin-top: 14px; } #result-section .rs-elements { display: grid; gap: 8px; margin: 4px 0 14px; padding: 16px 18px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-el-legend { display: flex; gap: 16px; justify-content: flex-end; font-size: 12.5px; font-weight: 700; } #result-section .rs-el-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } #result-section .rs-el-legend .is-me::before { background: var(--rs-accent); } #result-section .rs-el-legend .is-partner::before { background: var(--rs-calm); } #result-section .rs-el-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; } #result-section .rs-el-name { font-size: 14px; font-weight: 700; } #result-section .rs-el-name small { margin-left: 4px; font-size: 12px; --rs-c: var(--rs-muted); } #result-section .rs-el-row > span[role="cell"] { display: grid; gap: 4px; } #result-section .rs-el-bar { display: flex; align-items: center; gap: 8px; } #result-section .rs-el-bar i { display: block; height: 8px; min-width: 2px; border-radius: 999px; background: var(--rs-accent); } #result-section .rs-el-bar.is-partner i { background: var(--rs-calm); } #result-section .rs-el-bar b { font-size: 12px; --rs-c: var(--rs-muted); } #result-section .rs-cover { border: 0 !important; margin: 0 !important; box-shadow: none !important; } #result-section .rs-num { flex: 0 0 auto; white-space: nowrap; } #result-section [data-reunion-theme="dawn"] .rs-cover::before { background: linear-gradient(180deg, rgba(251, 248, 252, 0) 40%, #fbf8fc 93%, #fbf8fc 100%), var(--rs-cover) center 30% / cover; margin-bottom: -2px; } #result-section [data-reunion-theme="dawn"] .rs-cover { position: relative; display: block; min-height: 0; padding-top: 296px; background: none !important; } #result-section [data-reunion-theme="dawn"] .rs-cover::before { position: absolute; inset: 0 0 auto 0; height: 300px; margin: 0; } @media (max-width: 640px) { #result-section [data-reunion-theme="dawn"] .rs-cover { padding-top: 216px; } #result-section [data-reunion-theme="dawn"] .rs-cover::before { height: 220px; } } #result-section .rs-cover, #result-section .rs-cover::before { background-repeat: no-repeat !important; } /* 새벽 표지: 그림 위에 색을 덧칠하면 아래 가장자리에 겹침 자국(가는 줄)이 남아, 그림 자체를 아래로 갈수록 투명하게 지운다. */ #result-section [data-reunion-theme="dawn"] .rs-cover::before { background: var(--rs-cover) center 30% / cover no-repeat !important; -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 94%); mask-image: linear-gradient(180deg, #000 42%, transparent 94%); } /* 촛불 밤 표지: 얼굴이 제목에 가리지 않게 그림을 위로 올린다. */ #result-section [data-reunion-theme="night"] .rs-cover { background-position: center 30%; } /* 휴대폰: 사장님 의견(글자가 커서 한 화면에 들어오는 글이 적고 읽기 답답함)에 맞춰 글자와 여백을 한 단계 줄인다. */ @media (max-width: 640px) { #result-section .rs-report { font-size: 14.5px; line-height: 1.75; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #result-section .rs-kicker { font-size: 11.5px; margin-bottom: 8px; } #result-section .rs-cover h1 { font-size: 23px; line-height: 1.35; } #result-section .rs-pair { font-size: 14px; } #result-section .rs-question { font-size: 13.5px; padding: 8px 12px; } #result-section .rs-question span { font-size: 11px; } #result-section .rs-verdict-kicker { font-size: 12px; } #result-section .rs-gauge-text strong { font-size: 25px; } #result-section .rs-gauge-text span { font-size: 11.5px; } #result-section .rs-chance span { font-size: 12px; } #result-section .rs-chance strong { font-size: 18px; } #result-section .rs-verdict h2 { font-size: 17.5px; line-height: 1.45; } #result-section .rs-verdict-cell > span { font-size: 11.5px; } #result-section .rs-verdict-cell > strong { font-size: 18px; } #result-section .rs-verdict-cell > em { font-size: 12px; } #result-section .rs-verdict-cell p { font-size: 13.5px; line-height: 1.7; } #result-section .rs-action { font-size: 14.5px !important; } #result-section .rs-revisit { font-size: 13.5px; line-height: 1.7; padding: 10px 12px; } #result-section .rs-toc a { font-size: 12.5px; padding: 6px 11px; } #result-section .rs-num { font-size: 13px; } #result-section .rs-chapter h2 { font-size: 18px; line-height: 1.45; } #result-section .rs-sub { font-size: 14.5px; margin: 16px 0 8px !important; } #result-section .rs-lead { font-size: 15px; line-height: 1.75; } #result-section .rs-portrait { font-size: 16px; } #result-section .rs-callout h3, #result-section .rs-pane h3 { font-size: 12.5px; } #result-section .rs-callout p, #result-section .rs-pane p, #result-section .rs-pane li { font-size: 14px; line-height: 1.7; } #result-section .rs-basis { font-size: 11.5px; } #result-section .rs-note { font-size: 12.5px; } #result-section .rs-loop-step p { font-size: 13px; } #result-section .rs-metric-head span { font-size: 14px; } #result-section .rs-metric-head strong { font-size: 17px; } #result-section .rs-metric p { font-size: 12.5px; } #result-section .rs-month header strong { font-size: 18px; } #result-section .rs-month h3 { font-size: 14px; } #result-section .rs-month p { font-size: 13px; line-height: 1.65; } #result-section .rs-month p.rs-basis { font-size: 11px; } #result-section .rs-promises li { font-size: 14px; line-height: 1.7; padding: 13px 14px 13px 46px; } #result-section .rs-promises li::before { left: 13px; top: 13px; width: 23px; height: 23px; font-size: 12px; } #result-section .rs-safety { font-size: 12.5px; } #result-section .rs-closing p:last-child { font-size: 15.5px; line-height: 1.85; } #result-section .rs-basis-table table { font-size: 12.5px; } #result-section .rs-plain { font-size: 13px; } #result-section .rs-el-name { font-size: 13px; } #result-section .rs-el-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } } @media (max-width: 640px) { #result-section .rs-cover-inner { padding: 6px 16px 18px; } #result-section .rs-verdict, #result-section .rs-chapter, #result-section .rs-closing { margin-left: 6px; margin-right: 6px; padding: 18px 14px 14px; } #result-section .rs-chapter { margin-top: 14px; } #result-section .rs-verdict-cell, #result-section .rs-callout, #result-section .rs-month { padding: 13px 14px; } #result-section .rs-pane { padding: 14px; } #result-section .rs-elements { padding: 13px 14px; } } /* ── 질문에 대한 답 ── */ #result-section .rs-answer { border: 1.5px solid var(--rs-accent); box-shadow: var(--rs-shadow); } #result-section .rs-answer-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; --rs-c: var(--rs-accent); margin-bottom: 6px !important; } #result-section .rs-answer h2 { font-size: 23px; font-weight: 900; line-height: 1.45; margin-bottom: 8px !important; } #result-section .rs-answer-q { margin: 0 0 10px !important; font-family: var(--rs-serif); font-size: 15px; --rs-c: var(--rs-muted); } #result-section .rs-situation { margin: 0 0 14px !important; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--rs-line); font-size: 14.5px; line-height: 1.7; --rs-c: var(--rs-muted); } #result-section .rs-answer .rs-lead { padding: 14px 16px; border-radius: 12px; background: var(--rs-surface-2); border-left: 3px solid var(--rs-accent); } #result-section .rs-answer-points { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } #result-section .rs-answer-points li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.75; } #result-section .rs-answer-points li::before { content: "✓"; position: absolute; left: 2px; top: 0; font-weight: 900; --rs-c: var(--rs-accent); } @media (max-width: 640px) { #result-section .rs-answer-kicker { font-size: 12px; } #result-section .rs-answer h2 { font-size: 18px; } #result-section .rs-answer-q { font-size: 13.5px; } #result-section .rs-situation { font-size: 13px; padding: 9px 12px; } #result-section .rs-answer .rs-lead { padding: 11px 13px; } #result-section .rs-answer-points li { font-size: 14px; line-height: 1.7; padding-left: 20px; } } /* ── 인공지능이 풀어 쓴 깊은 장(그 사람 마음·재회 전략·달별 상세·다시 만난 뒤·편지) ── */ #result-section .rs-chapter-head { align-items: flex-start; gap: 14px; margin-bottom: 16px; } #result-section .rs-chapter-head > div { min-width: 0; } #result-section .rs-chapter-head, #result-section .rs-chapter-head * { text-align: left !important; } #result-section .rs-together > p:not([class]) { margin-top: 14px !important; font-size: 16px; line-height: 1.85; } #result-section .rs-chapter-kicker { margin: 0 0 2px !important; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; --rs-c: var(--rs-muted); } #result-section .rs-num { font-size: 30px; line-height: 1; padding-top: 3px; opacity: 0.9; } #result-section .rs-prose { margin: 14px 0 4px; } #result-section .rs-prose p { margin: 0 0 14px !important; font-size: 16px; line-height: 1.9; } #result-section .rs-quote { position: relative; margin: 4px 0 14px !important; padding: 18px 20px 18px 52px; border-radius: 14px; background: var(--rs-surface-2); font-family: var(--rs-serif); font-size: 19px; font-weight: 700; line-height: 1.65; } #result-section .rs-quote::before { content: "\201C"; position: absolute; left: 16px; top: 6px; font-family: var(--rs-serif); font-size: 48px; line-height: 1; font-weight: 900; --rs-c: var(--rs-accent); } #result-section .rs-meter { display: inline-flex; align-items: flex-end; gap: 3px; flex: 0 0 auto; } #result-section .rs-meter i { display: block; width: 7px; border-radius: 2px; background: var(--rs-line); } #result-section .rs-meter i:nth-child(1) { height: 10px; } #result-section .rs-meter i:nth-child(2) { height: 16px; } #result-section .rs-meter i:nth-child(3) { height: 22px; } #result-section .rs-meter.is-low i:nth-child(1), #result-section .rs-meter.is-mid i:nth-child(-n+2), #result-section .rs-meter.is-high i { background: var(--rs-accent); } #result-section .rs-meter.is-low i:nth-child(1) { background: var(--rs-calm); } #result-section .rs-signal { margin: 18px 0 14px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--rs-line); background: linear-gradient(135deg, var(--rs-surface-2), var(--rs-surface)); } #result-section .rs-signal-head { display: flex; align-items: center; gap: 14px; } #result-section .rs-signal-head .rs-meter i { width: 9px; } #result-section .rs-signal-head .rs-meter i:nth-child(1) { height: 14px; } #result-section .rs-signal-head .rs-meter i:nth-child(2) { height: 22px; } #result-section .rs-signal-head .rs-meter i:nth-child(3) { height: 30px; } #result-section .rs-signal-head > div > span { display: block; font-size: 12.5px; font-weight: 800; --rs-c: var(--rs-muted); } #result-section .rs-signal-head strong { font-family: var(--rs-serif); font-size: 23px; font-weight: 900; --rs-c: var(--rs-accent); } #result-section .rs-signal.is-low .rs-signal-head strong { --rs-c: var(--rs-calm); } #result-section .rs-signal-head em { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--rs-surface); border: 1px solid var(--rs-line); font-style: normal; font-size: 13px; font-weight: 700; vertical-align: 3px; } #result-section .rs-signal p { margin: 10px 0 0 !important; font-size: 15px; line-height: 1.75; } #result-section .rs-callout.is-open, #result-section .rs-callout.is-meet { margin-top: 14px; border-left-color: var(--rs-good); } #result-section .rs-callout.is-open h3, #result-section .rs-callout.is-meet h3 { --rs-c: var(--rs-good); } #result-section .rs-mind .rs-two { margin-top: 4px; } #result-section .rs-month-grid.is-rich { grid-template-columns: repeat(2, minmax(0, 1fr)); } #result-section .rs-month-signal { display: flex; align-items: center; gap: 7px; margin: 10px 0 0 !important; font-size: 12.5px !important; --rs-c: var(--rs-muted); } #result-section .rs-month-signal b { --rs-c: var(--rs-accent); } #result-section .rs-month-do { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--rs-line); } #result-section .rs-month-do > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px; } #result-section .rs-month-do dt { font-size: 12px; font-weight: 800; padding-top: 2px; } #result-section .rs-month-do .is-do dt { --rs-c: var(--rs-good); } #result-section .rs-month-do .is-avoid dt { --rs-c: var(--rs-care); } #result-section .rs-month-do dd { margin: 0; font-size: 13.5px; line-height: 1.65; } #result-section .rs-steps { list-style: none; margin: 16px 0 8px; padding: 0; } #result-section .rs-step { position: relative; padding: 0 0 18px 32px; } #result-section .rs-step::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--rs-surface); border: 3px solid var(--rs-accent); } #result-section .rs-step::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: 2px; width: 2px; background: var(--rs-line); } #result-section .rs-step:last-child { padding-bottom: 4px; } #result-section .rs-step:last-child::after { display: none; } #result-section .rs-steps.is-calm .rs-step::before { border-color: var(--rs-calm); } #result-section .rs-step-when { display: inline-block; margin-bottom: 6px; padding: 1px 10px; border-radius: 999px; background: var(--rs-surface-2); font-size: 12.5px; font-weight: 800; --rs-c: var(--rs-accent); } #result-section .rs-steps.is-calm .rs-step-when { --rs-c: var(--rs-muted); background: var(--rs-surface); } #result-section .rs-step p { margin: 0 0 6px !important; font-size: 15.5px; line-height: 1.75; } #result-section .rs-step p.rs-step-avoid { font-size: 14px; --rs-c: var(--rs-muted); } #result-section .rs-step-avoid b { margin-right: 8px; font-size: 12.5px; --rs-c: var(--rs-care); } #result-section .rs-bubbles { display: grid; gap: 10px; margin: 6px 0 4px; } #result-section .rs-bubble { justify-self: end; max-width: 86%; margin: 0 !important; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--rs-accent); --rs-c: var(--rs-accent-ink); font-size: 15px; line-height: 1.65; } #result-section .rs-letgo { margin-top: 18px; padding: 4px 18px 8px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-letgo .rs-step::before { background: var(--rs-surface-2); } #result-section .rs-outlook { margin: 4px 0 16px; } #result-section .rs-pane.is-last h3, #result-section .rs-pane.is-future h3 { --rs-c: var(--rs-accent); } #result-section .rs-warnings { margin: 16px 0 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rs-line); border-left: 3px solid var(--rs-care); } #result-section .rs-warnings h3 { font-family: var(--rs-sans); font-size: 14px; font-weight: 800; --rs-c: var(--rs-care); margin-bottom: 8px; } #result-section .rs-warnings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } #result-section .rs-warnings li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.7; } #result-section .rs-warnings li::before { content: "!"; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rs-care); --rs-c: #fff; font-size: 12px; font-weight: 900; } #result-section .rs-report .rs-closing.is-letter { padding: 36px 36px 30px; background-color: var(--rs-surface); border: 1px solid var(--rs-line); box-shadow: var(--rs-shadow); } #result-section .rs-report .rs-closing.is-letter p { text-align: left !important; } #result-section .rs-report .rs-closing.is-letter .rs-closing-kicker { margin-bottom: 14px !important; } #result-section .rs-letter-to { font-family: var(--rs-serif); font-size: 17px; font-weight: 700; margin: 0 0 10px !important; } #result-section .rs-letter-body { font-family: var(--rs-serif); font-size: 17px; line-height: 2; margin: 0 0 16px !important; } #result-section .rs-report .rs-closing.is-letter p.rs-letter-sign { text-align: right !important; font-family: var(--rs-serif); font-size: 16px; font-weight: 700; line-height: 1.6; --rs-c: var(--rs-accent); } @media (max-width: 900px) { #result-section .rs-month-grid.is-rich { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { #result-section .rs-num { font-size: 24px; } #result-section .rs-chapter-kicker { font-size: 11px; } #result-section .rs-prose p { font-size: 14.5px; line-height: 1.8; margin-bottom: 12px !important; } #result-section .rs-quote { font-size: 16px; padding: 14px 14px 14px 40px; } #result-section .rs-quote::before { left: 11px; top: 5px; font-size: 38px; } #result-section .rs-signal { padding: 14px; } #result-section .rs-signal-head strong { font-size: 19px; } #result-section .rs-signal-head > div > span { font-size: 11.5px; } #result-section .rs-together > p:not([class]) { font-size: 14.5px; line-height: 1.75; } #result-section .rs-signal-head em { font-size: 12px; margin-left: 6px; } #result-section .rs-signal p { font-size: 13.5px; line-height: 1.7; } #result-section .rs-month-do dd { font-size: 13px; } #result-section .rs-step { padding-left: 28px; } #result-section .rs-step p { font-size: 14px; line-height: 1.7; } #result-section .rs-step p.rs-step-avoid { font-size: 13px; } #result-section .rs-bubble { font-size: 14px; max-width: 92%; } #result-section .rs-letgo { padding: 2px 14px 6px; } #result-section .rs-warnings { padding: 13px 14px; } #result-section .rs-warnings li { font-size: 14px; } #result-section .rs-report .rs-closing.is-letter { padding: 24px 18px 20px; } #result-section .rs-letter-to, #result-section .rs-letter-body { font-size: 15px; } #result-section .rs-letter-body { line-height: 1.9; } } @media print { #result-section .rs-signal, #result-section .rs-step, #result-section .rs-bubble, #result-section .rs-warnings, #result-section .rs-quote, #result-section .rs-closing { break-inside: avoid; } } /* ── 휴대폰: 멀어지는 흐름은 한 줄 카드와 아래 화살표로, 사주 근거 표는 사람마다 두 칸 카드로 ── */ @media (max-width: 640px) { #result-section .rs-loop { gap: 0; } #result-section .rs-loop-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 13px; } #result-section .rs-loop-step span { margin: 0; } #result-section .rs-loop-arrow { flex: 0 0 auto; align-self: center; width: 10px; height: 10px; margin: 5px auto 9px; transform: rotate(135deg); } #result-section .rs-basis-table .rs-table-wrap { overflow: visible; } #result-section .rs-basis-table table { min-width: 0; } #result-section .rs-basis-table thead { display: none; } #result-section .rs-basis-table table, #result-section .rs-basis-table tbody { display: block; } #result-section .rs-basis-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--rs-line); } #result-section .rs-basis-table tr:last-child { border-bottom: 0; } #result-section .rs-basis-table th, #result-section .rs-basis-table td { display: block; border: 0; white-space: normal; } #result-section .rs-basis-table th { grid-column: 1 / -1; padding: 0 0 2px; text-align: left !important; font-size: 14px; } #result-section .rs-basis-table td { padding: 7px 10px; border-radius: 10px; background: var(--rs-surface-2); text-align: left !important; font-size: 13px; } #result-section .rs-basis-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; --rs-c: var(--rs-muted); } } /* ── 결론 밑 '재회 점수 자세히 보기' ── */ #result-section .rs-more { margin-top: 14px; border-top: 1px dashed var(--rs-line); padding-top: 4px; } #result-section .rs-more > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 800; --rs-c: var(--rs-accent); } #result-section .rs-more > summary::-webkit-details-marker { display: none; } #result-section .rs-more > summary::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--rs-accent); border-bottom: 2px solid var(--rs-accent); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; } #result-section .rs-more[open] > summary::after { transform: rotate(225deg) translateY(-2px); } #result-section .rs-more > summary span { font-size: 12px; font-weight: 700; --rs-c: var(--rs-muted); } #result-section .rs-more-lead { margin: 8px 0 4px !important; font-size: 15px; line-height: 1.75; } /* ── 새 인연이 들어올 흐름: 높고 낮음이 좋고 나쁨이 아니라 차분한 색 하나로 ── */ #result-section .rs-signal.is-love .rs-meter i { background: var(--rs-line); } #result-section .rs-signal.is-love .rs-meter.is-low i:nth-child(1), #result-section .rs-signal.is-love .rs-meter.is-mid i:nth-child(-n+2), #result-section .rs-signal.is-love .rs-meter.is-high i { background: var(--rs-calm); } #result-section .rs-signal.is-love .rs-signal-head strong { --rs-c: var(--rs-calm); } /* ── 나: 바꿀 한 가지 ── */ #result-section .rs-change { margin-top: 18px; padding-top: 4px; border-top: 1px dashed var(--rs-line); } #result-section .rs-change .rs-tip { margin-top: 4px; } #result-section .rs-change-why { margin: 14px 0 6px !important; font-size: 16px; line-height: 1.85; } #result-section .rs-how { list-style: none; counter-reset: rs-how; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; } #result-section .rs-how li { counter-increment: rs-how; position: relative; padding: 12px 16px 12px 48px; border-radius: 12px; background: var(--rs-surface-2); font-size: 15px; line-height: 1.7; } #result-section .rs-how li::before { content: counter(rs-how); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--rs-good); --rs-c: #fff; font-size: 12px; font-weight: 900; } /* ── 한 장 요약 ── */ #result-section .rs-summary { margin: 18px 22px 0; padding: 28px 26px 24px; border-radius: var(--rs-radius); background: var(--rs-surface); border: 1.5px solid var(--rs-accent); box-shadow: var(--rs-shadow); } #result-section .rs-summary-kicker { margin: 0 0 4px !important; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; --rs-c: var(--rs-accent); } #result-section .rs-summary h2 { font-size: 22px; font-weight: 900; line-height: 1.4; margin-bottom: 16px !important; } #result-section .rs-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } #result-section .rs-summary-cell { padding: 14px 16px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-summary-cell.is-wide { grid-column: 1 / -1; } #result-section .rs-summary-cell > span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; --rs-c: var(--rs-muted); } #result-section .rs-summary-cell > strong { font-family: var(--rs-serif); font-size: 20px; font-weight: 900; --rs-c: var(--rs-accent); } #result-section .rs-summary-cell > em { display: inline-block; margin-left: 8px; font-style: normal; font-size: 13px; --rs-c: var(--rs-muted); } #result-section .rs-summary-cell > p { margin: 0 !important; font-size: 15px; font-weight: 600; line-height: 1.7; } #result-section .rs-summary-cell ol, #result-section .rs-summary-cell ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } #result-section .rs-summary-cell li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.65; } #result-section .rs-summary-cell.is-do li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; --rs-c: var(--rs-good); } #result-section .rs-summary-cell.is-avoid li::before { content: "✕"; position: absolute; left: 0; top: 0; font-weight: 900; --rs-c: var(--rs-care); } #result-section .rs-summary-cell.is-revisit > p { font-weight: 500; font-size: 14px; } @media (max-width: 640px) { #result-section .rs-summary { margin-left: 6px; margin-right: 6px; padding: 20px 14px 16px; } #result-section .rs-summary h2 { font-size: 18px; } #result-section .rs-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } #result-section .rs-summary-cell { padding: 12px 13px; } #result-section .rs-summary-cell > strong { font-size: 17px; } #result-section .rs-summary-cell > p { font-size: 14px; } #result-section .rs-summary-cell li { font-size: 13.5px; } #result-section .rs-change-why { font-size: 14.5px; line-height: 1.75; } #result-section .rs-how li { font-size: 14px; padding: 11px 13px 11px 42px; } #result-section .rs-how li::before { left: 12px; top: 11px; } #result-section .rs-more > summary { font-size: 13.5px; } #result-section .rs-more-lead { font-size: 13.5px; } } @media print { #result-section .rs-summary-cell, #result-section .rs-how li { break-inside: avoid; } } /* ── 차단·무응답일 때 ── */ #result-section .rs-blocked { border: 1.5px solid var(--rs-calm); } #result-section .rs-blocked-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 4px 0 14px !important; padding: 12px 16px; border-radius: 12px; background: var(--rs-surface-2); } #result-section .rs-blocked-when span { font-size: 12.5px; font-weight: 800; --rs-c: var(--rs-muted); } #result-section .rs-blocked-when strong { font-family: var(--rs-serif); font-size: 20px; font-weight: 900; --rs-c: var(--rs-accent); } /* ── 행동 해석 ── */ #result-section .rs-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #result-section .rs-sign { padding: 16px 18px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-sign h3 { font-family: var(--rs-serif); font-size: 16.5px; font-weight: 900; margin-bottom: 8px; --rs-c: var(--rs-accent); } #result-section .rs-sign p { margin: 0 !important; font-size: 15px; line-height: 1.75; } #result-section .rs-sign p.rs-sign-todo { margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed var(--rs-line); font-size: 14px; } #result-section .rs-sign-todo b { margin-right: 8px; font-size: 12.5px; --rs-c: var(--rs-good); } #result-section .rs-replies { display: grid; gap: 14px; margin-top: 6px; } #result-section .rs-reply { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--rs-line); background: var(--rs-surface); } #result-section .rs-reply-in { justify-self: start; max-width: 86%; margin: 0 !important; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--rs-surface-2); font-size: 14.5px; line-height: 1.6; } #result-section .rs-reply-in span { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; --rs-c: var(--rs-muted); } #result-section .rs-reply .rs-bubble { justify-self: end; } #result-section .rs-reply-tip { margin: 2px 0 0 !important; text-align: right !important; font-size: 13px; --rs-c: var(--rs-muted); } /* ── 소식이 오기 쉬운 날 ── */ #result-section .rs-days { margin: 16px 0 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--rs-accent); background: var(--rs-surface); } #result-section .rs-days h3 { font-family: var(--rs-sans); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 10px; --rs-c: var(--rs-accent); } #result-section .rs-day-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #result-section .rs-day { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--rs-surface-2); } #result-section .rs-day strong { font-family: var(--rs-serif); font-size: 20px; font-weight: 900; } #result-section .rs-day span { font-size: 12.5px; font-weight: 700; --rs-c: var(--rs-muted); } #result-section .rs-day em { font-style: normal; font-size: 13px; line-height: 1.55; } #result-section .rs-days .rs-note { margin: 10px 0 0 !important; } @media (max-width: 640px) { #result-section .rs-signs { grid-template-columns: minmax(0, 1fr); gap: 10px; } #result-section .rs-sign { padding: 13px 14px; } #result-section .rs-sign h3 { font-size: 15px; } #result-section .rs-sign p { font-size: 14px; line-height: 1.7; } #result-section .rs-sign p.rs-sign-todo { font-size: 13px; } #result-section .rs-reply { padding: 12px 12px; } #result-section .rs-reply-in { font-size: 13.5px; max-width: 92%; } #result-section .rs-day-list { grid-template-columns: minmax(0, 1fr); gap: 8px; } #result-section .rs-day { grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; } #result-section .rs-day strong { font-size: 17px; } #result-section .rs-day em { grid-column: 1 / -1; font-size: 12.5px; } #result-section .rs-days { padding: 13px 14px; } #result-section .rs-blocked-when strong { font-size: 17px; } } @media print { #result-section .rs-sign, #result-section .rs-reply, #result-section .rs-day, #result-section .rs-days { break-inside: avoid; } } /* ── 그 사람 설명서 ── */ #result-section .rs-profile { margin-top: 20px; padding-top: 4px; border-top: 1px dashed var(--rs-line); } #result-section .rs-profile .rs-sub { margin-top: 18px !important; } #result-section .rs-profile-lead { margin: 0 0 14px !important; font-family: var(--rs-serif); font-size: 17.5px; font-weight: 700; line-height: 1.7; --rs-c: var(--rs-accent); } #result-section .rs-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #result-section .rs-trait { padding: 16px 18px; border-radius: 14px; background: var(--rs-surface-2); } #result-section .rs-trait h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--rs-sans); font-size: 14.5px; font-weight: 800; --rs-c: var(--rs-ink); } #result-section .rs-trait h4 span { flex: 0 0 auto; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--rs-accent); --rs-c: var(--rs-accent-ink); font-size: 11.5px; font-weight: 900; } #result-section .rs-trait p { margin: 0 !important; font-size: 15px; line-height: 1.75; } #result-section .rs-callout.is-love { margin-top: 14px; } #result-section .rs-tip { margin-top: 14px; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--rs-accent); background: var(--rs-surface); } #result-section .rs-tip h3 { font-family: var(--rs-sans); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; --rs-c: var(--rs-accent); margin-bottom: 6px; } #result-section .rs-tip p { margin: 0 !important; font-size: 16px; font-weight: 700; line-height: 1.7; } @media (max-width: 640px) { #result-section .rs-traits { grid-template-columns: minmax(0, 1fr); gap: 10px; } #result-section .rs-trait { padding: 13px 14px; } #result-section .rs-trait h4 { font-size: 13.5px; } #result-section .rs-trait p { font-size: 14px; line-height: 1.7; } #result-section .rs-profile-lead { font-size: 15.5px; } #result-section .rs-tip { padding: 13px 14px; } #result-section .rs-tip p { font-size: 14.5px; } } @media print { #result-section .rs-trait, #result-section .rs-tip { break-inside: avoid; } } /* 새 리포트는 자기 바탕과 표지를 가지므로, 사이트 공통 결과 상자(흰 반투명 바탕·그림자)는 비운다. */ #result-section:has(> .rs-report) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; backdrop-filter: none !important; } #result-section > .rs-report { box-shadow: 0 24px 60px rgba(31, 23, 41, 0.14); }