/* 정임 할머니 풀이 화면 3판 (2026-10-05 사용자: "밝은 화면에 단색으로 하지 말고 재질에 효과", "고급스런 이미지로, 디자인 자체를"). 재질 셋 — 한지(바탕·카드), 남색 비단 매화 문양(제목 띠·강조·열두 달·부적 받침), 금박(단추·값·숫자) — 은 scene/tex 의 그림. 카드는 한지를 한 장 더 얹은 듯 금실 이중 테두리와 매화 모서리, 단추엔 빛이 한 번 스친다. 이전 판: work/jeongim-theme.light.bak.css(밝은 단색), work/jeongim-theme.dark.bak.css(어두운 판). */ #readingDemo.rp-theme-clean[data-teller="jeongim"]{ --j-ink:#2a241c;--j-text:#3a3227;--j-muted:#7a6f5f;--j-navy:#172238;--j-navy2:#22305a; --j-gold:#b8913f;--j-gold2:#d9b86a;--j-goldtext:#8a6a24;--j-red:#a8321f; --j-line:rgba(160,124,52,.38);--j-line2:rgba(160,124,52,.7); --j-paper:url("tex/hanji.webp");--j-silk:url("tex/silk.webp");--j-foil:url("tex/gold.webp"); --j-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23b8913f' stroke-width='1.2'%3E%3Cpath d='M3 30 V3 H30'/%3E%3Cpath d='M7 22 V7 H22'/%3E%3C/g%3E%3Cg fill='%23b8913f'%3E%3Ccircle cx='11' cy='11' r='2.6'/%3E%3Ccircle cx='16.5' cy='9.5' r='1.6'/%3E%3Ccircle cx='9.5' cy='16.5' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --j-corner2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg transform='rotate(180 23 23)'%3E%3Cg fill='none' stroke='%23b8913f' stroke-width='1.2'%3E%3Cpath d='M3 30 V3 H30'/%3E%3Cpath d='M7 22 V7 H22'/%3E%3C/g%3E%3Cg fill='%23b8913f'%3E%3Ccircle cx='11' cy='11' r='2.6'/%3E%3Ccircle cx='16.5' cy='9.5' r='1.6'/%3E%3Ccircle cx='9.5' cy='16.5' r='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --cl-ink:var(--j-ink);--cl-text:var(--j-text);--cl-muted:var(--j-muted);--cl-line:var(--j-line);--cl-paper:#f6efe1; --cl-berry:var(--j-navy);--cl-berry-2:var(--j-navy2);--cl-plum:var(--j-navy);--cl-night:var(--j-navy); --cl-gold:var(--j-gold);--cl-gold-2:var(--j-gold2);--cl-gold-ink:var(--j-goldtext); --cl-tint:rgba(255,252,244,.6);--cl-tint-2:rgba(255,252,244,.75);--cl-warm:rgba(255,252,244,.6); --cl-green:var(--j-navy);--cl-green-tint:rgba(255,252,244,.7);--cl-coral:#9a4a2a;--cl-coral-tint:rgba(255,252,244,.7); --cl-shadow:0 10px 24px rgba(80,58,20,.12);--teller-ink:var(--j-navy); color:var(--j-text); background:radial-gradient(130% 40% at 50% 0%,rgba(255,255,255,.55),transparent 70%),var(--j-paper) 0 0/360px repeat,#f6efe1; border:1px solid var(--j-line2); box-shadow:0 0 0 6px rgba(246,239,225,.9),0 0 0 7px var(--j-line),0 30px 70px rgba(10,14,28,.45); } #readingDemo[data-teller="jeongim"] *{text-shadow:none} /* One card: a second sheet of hanji with a gold double rule and plum-blossom corners */ #readingDemo[data-teller="jeongim"] .rp-question,#readingDemo[data-teller="jeongim"] .rp-chart,#readingDemo[data-teller="jeongim"] .rp-soft-box, #readingDemo[data-teller="jeongim"] .rp-summary-link,#readingDemo[data-teller="jeongim"] .rp-finds li,#readingDemo[data-teller="jeongim"] .rp-taste,#readingDemo[data-teller="jeongim"] .rp-locked-list li, #readingDemo[data-teller="jeongim"] .rp-quick-buy,#readingDemo[data-teller="jeongim"] .rp-buy,#readingDemo[data-teller="jeongim"] .rp-proof,#readingDemo[data-teller="jeongim"] .rp-includes, #readingDemo[data-teller="jeongim"] .rp-toc-toggle,#readingDemo[data-teller="jeongim"] .rp-navigation,#readingDemo[data-teller="jeongim"] .rp-ask-input,#readingDemo[data-teller="jeongim"] .rp-basis, #readingDemo[data-teller="jeongim"] .pr-preview-card,#readingDemo[data-teller="jeongim"] .pr-preview-cover,#readingDemo[data-teller="jeongim"] .pr-preview-months{ background:var(--j-corner) 6px 6px/40px no-repeat,var(--j-corner2) calc(100% - 6px) calc(100% - 6px)/40px no-repeat,linear-gradient(rgba(255,253,247,.72),rgba(255,251,240,.55)),var(--j-paper) 0 0/360px repeat; border:1px solid var(--j-line2);border-radius:6px; box-shadow:inset 0 0 0 4px rgba(255,253,247,.6),inset 0 0 0 5px var(--j-line),0 6px 18px rgba(80,58,20,.13);color:var(--j-text)} #readingDemo[data-teller="jeongim"] .rp-pillar{background:linear-gradient(rgba(255,253,247,.75),rgba(255,251,240,.6)),var(--j-paper) 0 0/360px repeat;border:1px solid var(--j-line2);border-radius:6px;box-shadow:0 6px 16px rgba(80,58,20,.12)} /* Header: a navy silk band with gold-leaf lettering */ #readingDemo[data-teller="jeongim"] .rp-header{margin:-6px -6px 4px;padding:22px 20px 20px;border-radius:6px;border:1px solid rgba(217,184,106,.6); background:linear-gradient(180deg,rgba(23,34,56,.35),rgba(23,34,56,.65)),var(--j-silk) 0 0/300px repeat;box-shadow:inset 0 0 0 4px rgba(23,34,56,.6),inset 0 0 0 5px rgba(217,184,106,.45)} #readingDemo[data-teller="jeongim"] .rp-header .rp-eyebrow{color:#e9d39a;font:700 14px/1.5 var(--sans);letter-spacing:.14em} #readingDemo[data-teller="jeongim"] .rp-header h2{font:900 30px/40px var(--cl-display);background:var(--j-foil) center/300px;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))} #readingDemo[data-teller="jeongim"] .rp-seal{border:0;color:#fbe9dc;background:var(--j-red);border-radius:5px;transform:rotate(-4deg);box-shadow:0 2px 0 rgba(0,0,0,.25)} /* Titles on paper: deep navy with a short gold-leaf rule under them */ #readingDemo[data-teller="jeongim"] .rp-sheet-head h3,#readingDemo[data-teller="jeongim"] .rp-locked-head,#readingDemo[data-teller="jeongim"] .rp-story-title{color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-sheet-head h3{font:900 25px/36px var(--cl-display)} #readingDemo[data-teller="jeongim"] .rp-sheet-head h3::after,#readingDemo[data-teller="jeongim"] .rp-locked-head::after{content:"";display:block;width:56px;height:3px;margin-top:10px;border-radius:2px;background:var(--j-foil) center/200px} #readingDemo[data-teller="jeongim"] .rp-sheet-head p,#readingDemo[data-teller="jeongim"] .rp-lead{color:var(--j-muted);font:400 16px/26px var(--sans)} #readingDemo[data-teller="jeongim"] .rp-demo-label{margin:16px 0 8px;padding:0;background:none;color:var(--j-goldtext);font:700 14px/1.4 var(--sans);letter-spacing:.12em} #readingDemo[data-teller="jeongim"] .rp-demo-label::before{display:none} #readingDemo[data-teller="jeongim"] .rp-question{margin:4px 0 22px;padding:20px 22px} #readingDemo[data-teller="jeongim"] .rp-question::before{content:none} #readingDemo[data-teller="jeongim"] .rp-question>span{color:var(--j-goldtext);font:700 14px/1.4 var(--sans);letter-spacing:.08em} #readingDemo[data-teller="jeongim"] .rp-question p{font:700 21px/1.55 var(--cl-display);color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-body-copy,#readingDemo[data-teller="jeongim"] .rp-finds li,#readingDemo[data-teller="jeongim"] .rp-taste-text{font:400 18px/31px var(--sans);text-align:left;color:var(--j-text)} #readingDemo[data-teller="jeongim"] .rp-body-copy strong{color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-story-kicker{text-align:center;color:var(--j-goldtext);font-weight:700;letter-spacing:.16em} #readingDemo[data-teller="jeongim"] .rp-story-title{font:900 22px/1.6 var(--cl-display);text-align:center} #readingDemo[data-teller="jeongim"] .rp-subhead{color:var(--j-navy)} /* What she said: navy silk with light words — the loudest thing on the page */ #readingDemo[data-teller="jeongim"] .rp-emphasis{position:relative;margin:28px 0;padding:28px 22px 24px;border:1px solid rgba(217,184,106,.7);border-radius:6px;text-align:left; background:linear-gradient(180deg,rgba(23,34,56,.3),rgba(23,34,56,.6)),var(--j-silk) 0 0/300px repeat;box-shadow:inset 0 0 0 4px rgba(23,34,56,.55),inset 0 0 0 5px rgba(217,184,106,.5),0 14px 30px rgba(10,14,28,.25)} #readingDemo[data-teller="jeongim"] .rp-emphasis::before{display:block;content:"정임 할머니가 짚은 한마디";position:static;margin:0 0 12px;color:#e9d39a;font:700 13px/1 var(--sans);letter-spacing:.16em;background:none;width:auto;height:auto} #readingDemo[data-teller="jeongim"] .rp-emphasis p{font:900 23px/1.6 var(--cl-display);color:#fbf3e2;text-align:left} #readingDemo[data-teller="jeongim"] .rp-emphasis p::before{content:"“";color:#e9c77e} #readingDemo[data-teller="jeongim"] .rp-emphasis p::after{content:"”";color:#e9c77e} /* Welcome */ #readingDemo[data-teller="jeongim"] .rp-medallion{box-shadow:0 0 0 3px #fbf6ea,0 0 0 4px var(--j-gold),0 10px 24px rgba(80,58,20,.25)} #readingDemo[data-teller="jeongim"] .rp-reveal{border:1px solid rgba(217,184,106,.7);border-radius:6px;background:linear-gradient(180deg,rgba(23,34,56,.25),rgba(23,34,56,.6)),var(--j-silk) 0 0/300px repeat;box-shadow:inset 0 0 0 4px rgba(23,34,56,.5),inset 0 0 0 5px rgba(217,184,106,.45)} #readingDemo[data-teller="jeongim"] .rp-reveal-letter strong{background:var(--j-foil) center/260px;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))} /* Charts on paper */ #readingDemo[data-teller="jeongim"] .rp-pillar strong{color:var(--j-navy);font-family:var(--cl-display)} #readingDemo[data-teller="jeongim"] .rp-pillar-label{background:var(--j-foil) center/240px;color:#2a1d06} #readingDemo[data-teller="jeongim"] .rp-pillar small,#readingDemo[data-teller="jeongim"] figcaption span,#readingDemo[data-teller="jeongim"] .rp-chart-note{color:var(--j-muted)} #readingDemo[data-teller="jeongim"] figcaption{color:var(--j-navy)} /* Table of contents */ #readingDemo[data-teller="jeongim"] .rp-toc-toggle b{color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-tabs button{border:1px solid var(--j-line);border-left:3px solid var(--j-gold);border-radius:4px;background:rgba(255,253,247,.65);color:var(--j-text);box-shadow:none} #readingDemo[data-teller="jeongim"] .rp-tabs button>span{color:var(--j-goldtext);font-family:var(--cl-display)} #readingDemo[data-teller="jeongim"] .rp-tabs button:hover{background:#fffaf0;color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-tabs button[aria-selected=true]{background:linear-gradient(180deg,rgba(23,34,56,.35),rgba(23,34,56,.65)),var(--j-silk) 0 0/260px;border-color:rgba(217,184,106,.7);border-left-color:#e9c77e;color:#fbf3e2} #readingDemo[data-teller="jeongim"] .rp-tabs button[aria-selected=true]>span{color:#e9c77e} #readingDemo[data-teller="jeongim"] .rp-pagination button{min-height:54px;border-radius:6px;border:1px solid var(--j-line2);background:rgba(255,253,247,.8);color:var(--j-navy);box-shadow:none} /* Gold-leaf buttons with one passing gleam */ #readingDemo[data-teller="jeongim"] .rp-cta,#readingDemo[data-teller="jeongim"] .rp-finds-cta,#readingDemo[data-teller="jeongim"] .rp-pagination [data-rp-next]{ position:relative;overflow:hidden;min-height:58px;border:1px solid #9c7a2e;border-radius:6px;color:#1b1406;font:800 18px/26px var(--sans); background:linear-gradient(180deg,rgba(255,240,200,.35),rgba(120,84,20,.15)),var(--j-foil) center/360px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(120,84,20,.3)} #readingDemo[data-teller="jeongim"] .rp-cta::after,#readingDemo[data-teller="jeongim"] .rp-finds-cta::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-40%;width:28%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:j-gleam 4.5s ease-in-out 1.2s infinite;pointer-events:none} @keyframes j-gleam{0%{left:-40%}22%,100%{left:130%}} /* What she found */ #readingDemo[data-teller="jeongim"] .is-open .rp-find-mark{background:var(--j-foil) center/120px;color:#1b1406} #readingDemo[data-teller="jeongim"] .rp-finds .is-sealed{background:linear-gradient(180deg,rgba(23,34,56,.45),rgba(23,34,56,.72)),var(--j-silk) 0 0/300px;border-color:rgba(217,184,106,.6);box-shadow:inset 0 0 0 4px rgba(23,34,56,.5),inset 0 0 0 5px rgba(217,184,106,.4)} #readingDemo[data-teller="jeongim"] .rp-finds .is-sealed strong{color:#fbf3e2} #readingDemo[data-teller="jeongim"] .rp-finds .is-sealed p{color:#d9cfbb} #readingDemo[data-teller="jeongim"] .is-sealed .rp-find-mark{background:var(--j-red);color:#fbe9dc;box-shadow:none;border-radius:5px;transform:rotate(-6deg)} #readingDemo[data-teller="jeongim"] .rp-find-chapter{color:var(--j-goldtext);font-size:13px} #readingDemo[data-teller="jeongim"] .is-sealed .rp-find-chapter{color:#e9c77e} #readingDemo[data-teller="jeongim"] .rp-finds .is-open strong{color:var(--j-navy)} /* 복채 chapter list */ #readingDemo[data-teller="jeongim"] .rp-locked-list li{display:block;position:relative;padding:20px 66px 20px 22px} #readingDemo[data-teller="jeongim"] .rp-locked-list li>div{display:contents} #readingDemo[data-teller="jeongim"] .rp-locked-num{display:inline-block;margin:0 0 6px;font:900 16px/1 var(--cl-display);letter-spacing:.06em;color:var(--j-goldtext)} #readingDemo[data-teller="jeongim"] .rp-locked-num::after{content:" ·"} #readingDemo[data-teller="jeongim"] .rp-locked-list li .rp-find-chapter{display:inline;margin-left:4px;font:700 13px/1 var(--sans);color:var(--j-goldtext)} #readingDemo[data-teller="jeongim"] .rp-locked-list strong{display:block;margin:6px 0;font:800 19px/1.45 var(--sans);color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-locked-list p{margin:0;font:400 16px/25px var(--sans);color:var(--j-muted)} #readingDemo[data-teller="jeongim"] .rp-locked-mark{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:5px;background:var(--j-red);color:transparent;font-size:0;transform:rotate(-6deg);box-shadow:0 2px 0 rgba(0,0,0,.2)} #readingDemo[data-teller="jeongim"] .rp-locked-mark::after{content:"封";color:#fbe9dc;font:900 19px/1 var(--cl-display)} #readingDemo[data-teller="jeongim"] .rp-locked-list.is-stamp-ready .rp-locked-mark{opacity:0;transform:rotate(-6deg) scale(1.6)} #readingDemo[data-teller="jeongim"] .rp-locked-list.is-stamped .rp-locked-mark{animation:j-stamp .28s cubic-bezier(.3,1.4,.5,1) both} #readingDemo[data-teller="jeongim"] .rp-locked-list.is-stamped li:nth-child(2) .rp-locked-mark{animation-delay:.12s} #readingDemo[data-teller="jeongim"] .rp-locked-list.is-stamped li:nth-child(3) .rp-locked-mark{animation-delay:.24s} #readingDemo[data-teller="jeongim"] .rp-locked-list.is-stamped li:nth-child(n+4) .rp-locked-mark{animation-delay:.36s} @keyframes j-stamp{0%{opacity:0;transform:rotate(-6deg) scale(1.6)}100%{opacity:1;transform:rotate(-6deg) scale(1)}} #readingDemo[data-teller="jeongim"] .rp-locked-head{font:900 23px/34px var(--cl-display)} /* Taste, price, small print */ #readingDemo[data-teller="jeongim"] .rp-taste-kicker{color:var(--j-goldtext)} #readingDemo[data-teller="jeongim"] .rp-taste strong{color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-taste-more{color:var(--j-muted)} #readingDemo[data-teller="jeongim"] .rp-quick-buy span{color:var(--j-muted)} #readingDemo[data-teller="jeongim"] .rp-quick-buy .rp-secondary{border-radius:6px;background:rgba(255,253,247,.9);border:1px solid var(--j-line2);color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-buy{padding:24px} #readingDemo[data-teller="jeongim"] .rp-offer{display:block;margin:0 0 8px;padding:0;border-radius:0;background:none;color:var(--j-red);font:700 15px/1.5 var(--sans);text-align:left} #readingDemo[data-teller="jeongim"] .rp-price{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;text-align:left} #readingDemo[data-teller="jeongim"] .rp-price>span:first-child{font:700 16px/1.4 var(--sans);color:var(--j-muted)} #readingDemo[data-teller="jeongim"] .rp-price strong{font:900 42px/50px var(--cl-display);background:linear-gradient(180deg,rgba(90,60,10,.15),rgba(90,60,10,.5)),var(--j-foil) center/260px;-webkit-background-clip:text;background-clip:text;color:transparent} #readingDemo[data-teller="jeongim"] .rp-price-was{font:500 16px/1 var(--sans);color:var(--j-muted);margin-right:8px} #readingDemo[data-teller="jeongim"] .rp-deal{margin:0 0 16px;padding:14px 0 0;border-top:1px solid var(--j-line);border-radius:0;background:none;color:var(--j-text)} #readingDemo[data-teller="jeongim"] .rp-deal li{font:500 16px/26px var(--sans)} #readingDemo[data-teller="jeongim"] .rp-deal li::before{color:var(--j-gold)} #readingDemo[data-teller="jeongim"] .rp-proof-stars{color:var(--j-gold)} #readingDemo[data-teller="jeongim"] .rp-ask-chip{background:rgba(255,253,247,.85);border:1px solid var(--j-line2);color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-bottom-actions button:not(.rp-share){color:var(--j-navy)} #readingDemo[data-teller="jeongim"] .rp-fine-print li,#readingDemo[data-teller="jeongim"] .rp-terms-links,#readingDemo[data-teller="jeongim"] .rp-bottom p,#readingDemo[data-teller="jeongim"] .rp-ask-note{color:var(--j-muted)} /* 정임 할머니의 재물 부적 (jeongim-charm.js): the talisman laid on navy silk */ #readingDemo .j-charm{margin:28px 0;padding:24px 18px;border:1px solid rgba(217,184,106,.7);border-radius:6px;text-align:center; background:radial-gradient(70% 50% at 50% 40%,rgba(217,184,106,.22),transparent 70%),linear-gradient(180deg,rgba(23,34,56,.3),rgba(23,34,56,.62)),url("tex/silk.webp") 0 0/300px;box-shadow:inset 0 0 0 4px rgba(23,34,56,.5),inset 0 0 0 5px rgba(217,184,106,.45),0 14px 30px rgba(10,14,28,.25)} #readingDemo .j-charm-kicker{margin:0 0 4px;color:#e9d39a;font:700 13px/1.4 var(--sans);letter-spacing:.16em} #readingDemo .j-charm-title{margin:0 0 16px;font:900 22px/1.4 var(--cl-display);color:#f3dc9f} #readingDemo .j-charm-art{position:relative;display:block;width:min(280px,82%);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))} #readingDemo .j-charm-art svg{display:block;width:100%;height:auto} #readingDemo .j-charm-what{margin:16px 0 0;color:#efe6d2;font:500 15px/1.6 var(--sans)} #readingDemo .j-charm-lock{margin:8px 0 0;color:#f1d99a;font:700 15px/1.5 var(--sans)} #readingDemo .j-charm-save{margin-top:14px} #readingDemo .j-charm-note{margin:10px 0 0;color:#cfc4ae;font:400 13px/1.5 var(--sans)} /* Twelve months: navy silk tiles with gold numbers on a paper ledger */ #readingDemo .j-months{margin:28px 0;padding:22px 18px;border:1px solid rgba(160,124,52,.7);border-radius:6px;background:linear-gradient(rgba(255,253,247,.72),rgba(255,251,240,.55)),url("tex/hanji.webp") 0 0/360px;box-shadow:inset 0 0 0 4px rgba(255,253,247,.6),inset 0 0 0 5px rgba(160,124,52,.38),0 6px 18px rgba(80,58,20,.13)} #readingDemo .j-months h4{margin:0 0 4px;font:900 21px/1.4 var(--cl-display);color:#172238} #readingDemo .j-months>p{margin:0 0 14px;color:#7a6f5f;font:400 15px/1.55 var(--sans)} #readingDemo .j-months ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;list-style:none} #readingDemo .j-months li{display:grid;place-items:center;gap:6px;padding:14px 0 12px;border:1px solid rgba(217,184,106,.55);border-radius:4px;background:linear-gradient(180deg,rgba(23,34,56,.25),rgba(23,34,56,.55)),url("tex/silk.webp") 0 0/220px} #readingDemo .j-months li b{font:900 19px/1 var(--cl-display);color:#f3dc9f} #readingDemo .j-months li i{font-style:normal;font-size:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:4px;background:#a8321f;color:#fbe9dc;transform:rotate(-6deg)} /* Motion (jeongim-motion.js) */ #readingDemo[data-teller="jeongim"] #rp-panel.j-turn{animation:j-turn .3s ease-out both} @keyframes j-turn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} #readingDemo[data-teller="jeongim"] .rp-reveal-letter.j-ink strong{animation:j-ink .75s ease-out .25s both} @keyframes j-ink{0%{opacity:0;filter:blur(10px);transform:scale(1.12)}60%{opacity:.9;filter:blur(2px)}100%{opacity:1;filter:none;transform:none}} #readingDemo[data-teller="jeongim"] .rp-reveal-letter.j-ink span{animation:j-turn .35s ease-out .9s both} @media (prefers-reduced-motion:reduce){#readingDemo[data-teller="jeongim"] *,#readingDemo[data-teller="jeongim"] *::after{animation:none!important}#readingDemo[data-teller="jeongim"] .rp-locked-list .rp-locked-mark{opacity:1!important}} /* The room around the reading */ .room[data-teller="jeongim"] .room-toolbar .sound{display:none} @media(max-width:720px){ .landing-one~.room .room-toolbar,body .room .room-toolbar{grid-template-columns:none;display:flex;justify-content:flex-end;width:auto} .room .room-toolbar .music-toggle{width:auto;min-height:44px;min-width:44px;padding:6px 12px;border-radius:999px;font-size:13px;background:#0e1424b3;border-color:#d8c08a66} .room .room-toolbar #soundToggle{display:none} } .room #soundToggle{display:none!important} /* First-screen loop video */ .landing-one .one-hero-video{opacity:0;transition:opacity .8s ease;pointer-events:none} .landing-one .one-hero-video.is-on{opacity:1} /* ---- PC (점신 방식): first screen in two columns, the reading with a wide table of contents ---- */ @media (min-width:1024px){ .landing-one .landing-hero{height:auto;min-height:100vh;display:grid;grid-template-columns:auto minmax(420px,600px);justify-content:center;align-items:center;column-gap:clamp(48px,6vw,110px);padding:84px 5vw 56px;overflow:visible; background:radial-gradient(60% 70% at 28% 45%,rgba(217,184,106,.16),transparent 70%),radial-gradient(80% 80% at 70% 30%,#1b2440,#0b0f1c 70%)} .landing-one .one-hero{position:relative;inset:auto;z-index:0;grid-area:1/1;align-self:center;width:auto;height:min(80vh,820px);aspect-ratio:9/16;object-fit:cover;object-position:50% 30%;border-radius:22px; border:1px solid rgba(217,184,106,.55);box-shadow:0 0 0 8px rgba(12,17,32,.9),0 0 0 9px rgba(217,184,106,.35),0 40px 90px rgba(0,0,0,.6)} .landing-one .one-hero-video{grid-area:1/1} .landing-one .one-shade{display:none} .landing-one .one-copy{grid-area:1/2;width:auto;margin:0;padding:0;text-align:left} .landing-one .one-bubble{font-size:18px;padding:16px 22px;margin-bottom:22px} .landing-one .one-bubble::after{left:-8px;top:24px;border-top:0;border-bottom:1px solid #f1d79c55;transform:rotate(45deg)} .landing-one .landing-kicker{font-size:16px;margin-bottom:12px} .landing-one h1{font-size:clamp(34px,2.7vw,46px);line-height:1.3;margin-bottom:26px;white-space:nowrap} .landing-one .landing-actions{justify-content:flex-start} .landing-one .landing-start{max-width:440px;min-height:70px;font-size:22px} .landing-one .one-badges{justify-content:flex-start;font-size:15px;margin-top:18px} .landing-one .landing-offer{margin:14px 0 0;text-align:left} .landing-one .landing-top{position:absolute;left:5vw;right:5vw;top:26px} .landing-one .brand{font-size:30px} #readingDemo[data-teller="jeongim"] .rp-layout{grid-template-columns:270px minmax(0,1fr);gap:32px} #readingDemo[data-teller="jeongim"] .rp-navigation{padding:18px 14px} #readingDemo[data-teller="jeongim"] .rp-navigation>p{color:var(--j-navy);font:900 20px/1.4 var(--cl-display)} #readingDemo[data-teller="jeongim"] .rp-tabs button{min-height:52px;padding:10px 14px;font:700 16px/1.35 var(--sans);text-align:left;white-space:normal} #readingDemo[data-teller="jeongim"] .rp-panel{max-width:760px} } /* Chapter title: the same navy silk band as the cover, gold-leaf title, ivory line (사용자 10/5: 2·3번 글자 안 보임; 10/6: on phones the old photo band was hidden, so the gold title sat on bare hanji and blurred, with 200px of empty band under it — the band is now silk everywhere and only as tall as its words) */ #readingDemo[data-teller="jeongim"] .rp-sheet-head{display:block;min-height:0;margin:0 0 22px;padding:18px 20px 20px;border-radius:6px;border:1px solid rgba(217,184,106,.6); background:linear-gradient(180deg,rgba(23,34,56,.35),rgba(23,34,56,.65)),var(--j-silk) 0 0/300px repeat;box-shadow:inset 0 0 0 4px rgba(23,34,56,.6),inset 0 0 0 5px rgba(217,184,106,.45)} #readingDemo[data-teller="jeongim"] .rp-sheet-head::before,#readingDemo[data-teller="jeongim"] .rp-sheet-head::after{content:none} #readingDemo[data-teller="jeongim"] .rp-sheet-head .rp-eyebrow{color:#e9d39a;font:700 13px/1.5 var(--sans);letter-spacing:.14em} #readingDemo[data-teller="jeongim"] .rp-sheet-head h3{margin:6px 0 0;background:url("tex/gold.webp") center/300px;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))} #readingDemo[data-teller="jeongim"] .rp-sheet-head h3::after{background:var(--j-foil) center/200px;filter:none} #readingDemo[data-teller="jeongim"] .rp-sheet-head p{color:#f4ecdb;text-shadow:none} /* 찾아낸 것 on phones: the ✓ floats at the start so the words run the full card width (one line less per card) */ #readingDemo[data-teller="jeongim"] .rp-finds .is-open{display:block} #readingDemo[data-teller="jeongim"] .rp-finds .is-open .rp-find-mark{float:left;margin:3px 10px 2px 0} #readingDemo[data-teller="jeongim"] .rp-finds .is-open p{margin:0} #readingDemo[data-teller="jeongim"] .rp-finds .is-open::after{content:"";display:block;clear:both} /* The ask button: gold leaf like every other main button, bigger letters (사용자 10/5: 5번) */ #readingDemo[data-teller="jeongim"] .rp-ask .rp-cta,#readingDemo[data-teller="jeongim"] .rp-ask button[type=submit]{ min-height:62px!important;border:1px solid #9c7a2e!important;border-radius:6px!important;color:#1b1406!important;font:800 21px/1.3 var(--sans)!important; background:linear-gradient(180deg,rgba(255,240,200,.35),rgba(120,84,20,.15)),url("tex/gold.webp") center/360px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(120,84,20,.3)!important} #readingDemo[data-teller="jeongim"] .rp-ask-input{min-height:120px;border:1px solid var(--j-line2);font:500 18px/1.6 var(--sans);color:var(--j-ink)} #readingDemo[data-teller="jeongim"] .rp-ask-chip{padding:12px 16px;font:700 16px/1.3 var(--sans);border-radius:6px} /* The room behind the reading: the same 정임 할머니 in another picture — on the hanok porch under a huge full moon and the Milky Way (사용자 10/5: "풀이 들어갔을 때 배경, 같은 할머니 다른 그림, 대문에 쓰던 거 말고"). */ .room[data-teller="jeongim"]{background:#0b1022 url("tex/room-tall.webp?v=6") 50% 0/100% auto no-repeat} .room[data-teller="jeongim"] #sceneImage,.room[data-teller="jeongim"] #sceneVideo{display:none} .room[data-teller="jeongim"] .shade{background:linear-gradient(180deg,rgba(11,16,34,.25) 0%,rgba(11,16,34,0) 22%,rgba(11,16,34,0) 40%,rgba(11,16,34,.85) 70%,#0b1022 100%)} @media (min-width:1024px){ .room[data-teller="jeongim"]{background:#0b1022 url("tex/room-wide.webp?v=6") 50% 0/cover no-repeat fixed} .room[data-teller="jeongim"] .shade{background:linear-gradient(90deg,rgba(11,16,34,.55),rgba(11,16,34,0) 35%),linear-gradient(180deg,rgba(11,16,34,0) 55%,rgba(11,16,34,.6))} } /* 2026-10-10: the "할머니 답장 한 장" box is already a card — its list stays plain (the card-in-card put the checks on the border and the corner over the last word) */ #readingDemo[data-teller="jeongim"] .rp-mini-buy .rp-includes{background:none;border:0;border-radius:0;box-shadow:none;padding:0}