/* ═══════════════════════════════════════════════════════════════
   해몽 리포트 표시 개편 — 드롭인 (index.html 은 2줄만 추가)
   근거(인연사주 대장에서 총감독이 지적한 전건):
     INYEON_유료리포트_봉인개봉_증서표지_20260826
     INYEON_페이스카드설명_리포트가독성_20260826
     INYEON_고객피드백_에이미_2차_4건_20260827

   ① "읽기 싫은 논문 같은 글자 덩어리" → 섹션 번호·리드 드롭캡·진행바·목차칩
   ② "나만의 선물 같지 않다"           → 증서 표지(이름·꿈 그림·일간 도장·발행번호)
   ③ "잠금이 열리는 듯한 UI"           → 봉인 개봉식
   ④ 폰트가 제각각                     → display / body / ui 3역할로 통일
   ⑤ "웹툰을 넣거나 재미를 주거나"      → ★ 꿈 상징 수묵 일러스트 (인연사주 미해결분)

   원칙: 기존 마크업을 갈아엎지 않는다. h2/h3 는 그대로 두고 class 만 붙인다.
        (개발팀 test/browser.js 의 DOM 가정이 깨지지 않아야 한다)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --f-display:'Playfair Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-body:Georgia,'Times New Roman',serif;
  --f-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ── ③ 봉인 개봉식 ───────────────────────────────────────── */
.unseal{position:fixed;inset:0;z-index:90;background:#191410;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#f3ece0;padding:32px;cursor:pointer}
.unseal .lbl{font-family:var(--f-ui);font-size:12px;letter-spacing:.32em;
  text-transform:uppercase;color:#a0917c;margin-bottom:14px}
.unseal .who{font-family:var(--f-display);font-size:clamp(28px,7vw,44px);margin-bottom:8px}
.unseal .note{font-size:15px;color:#b3a794;margin-bottom:44px}
.unseal .stamp{width:132px;height:132px;border-radius:9px;background:var(--seal);
  color:#f7f1e6;display:flex;align-items:center;justify-content:center;
  font-size:74px;font-family:var(--f-body);animation:breathe 2.6s ease-in-out infinite;
  box-shadow:0 0 0 5px #191410,0 0 0 9px var(--seal),0 0 70px rgba(176,58,46,.45)}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.055);opacity:1}}
.unseal .go{margin-top:46px;font-family:var(--f-ui);font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:#f3ece0;border:1px solid #5b4f40;
  padding:15px 34px;border-radius:3px;background:transparent;cursor:pointer}
.unseal.broken .stamp{animation:crack .9s ease forwards}
@keyframes crack{
  40%{transform:scale(1.14);box-shadow:0 0 0 5px #191410,0 0 0 9px var(--seal),0 0 130px rgba(224,178,90,.9)}
  100%{transform:scale(2.6);opacity:0}
}
.unseal.broken{animation:fadeout .95s ease forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}

/* ── ① 읽기 진행바 ───────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:3px;z-index:80;width:0;
  background:linear-gradient(90deg,var(--seal),#c9a227);transition:width .12s linear}

/* ── ② 증서 표지 ─────────────────────────────────────────── */
.cert{border:1px solid var(--gold);outline:1px solid var(--gold);outline-offset:5px;
  background:#fffdf8;padding:30px 24px 26px;margin:6px 0 32px;text-align:center;position:relative}
.cert .kicker{font-family:var(--f-ui);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.cert .nm{font-family:var(--f-display);font-size:clamp(26px,6vw,36px);line-height:1.2;margin-bottom:6px}
.cert .meta{font-family:var(--f-ui);font-size:12.5px;color:var(--soft);margin-bottom:22px}
.cert .art{width:100%;max-width:380px;margin:0 auto 12px;display:block;
  border:1px solid var(--line)}
.cert .artcap{font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin:0 0 22px}
.cert .stampsm{width:60px;height:60px;border-radius:50%;background:var(--seal);color:#f7f1e6;
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 10px}
.cert .dmline{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.cert .no{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.24em;color:var(--soft)}

/* ── ① 섹션 번호 · 리드 · 문단 ───────────────────────────── */
#r-body .sec h2.secno,#r-body .locked h3.secno{
  font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--gold);
  display:flex;align-items:baseline;gap:12px;line-height:1.28;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
#r-body .secno .n{font-family:var(--f-ui);font-size:13px;font-weight:600;
  letter-spacing:.18em;color:var(--seal);flex:none}
#r-body .sec{margin-bottom:30px}
#r-body p{margin-bottom:13px;line-height:1.85}
#r-body p.lead{font-size:18.5px}
#r-body p.lead::first-letter{font-family:var(--f-display);font-size:2.9em;float:left;
  line-height:.84;padding:5px 10px 0 0;color:var(--gold)}
#r-body .blur.lead::first-letter{float:none;font-size:1em;padding:0;color:inherit}

/* ── 목차 칩 ─────────────────────────────────────────────── */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.toc a{font-family:var(--f-ui);font-size:12px;letter-spacing:.05em;text-decoration:none;
  color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#fffdf8}
.toc a:hover{border-color:var(--seal);color:var(--seal)}

/* ── ⑤ 본문 중 일러스트 ──────────────────────────────────── */
figure.dreamart{margin:22px 0 24px;text-align:center}
figure.dreamart img{width:100%;max-width:460px;border:1px solid var(--line)}
figure.dreamart figcaption{font-family:var(--f-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);margin-top:9px}

/* ── 마감 ────────────────────────────────────────────────── */
.closing{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  text-align:center;font-style:italic;color:var(--soft)}
.closing .sealend{display:inline-flex;width:38px;height:38px;background:var(--seal);
  color:#f7f1e6;align-items:center;justify-content:center;border-radius:3px;
  font-style:normal;vertical-align:middle;margin-left:10px;font-size:22px}

@media (prefers-reduced-motion:reduce){
  .unseal .stamp{animation:none}
}

@media print{
  .unseal,.progress,.toc,.pricebar{display:none!important}
  .cert{break-inside:avoid}
}