/* 신점 시안 2 · 서천꽃밭 · 바리의 신점 (10/18 3판) — v1 바탕 위에 웹툰 칸(여백) · 몰아치는 전면 칸 · 표와 막대. 떠다니는 조각 층은 쓰지 않는다.
   (v1 설명)
   검정 바탕 + 진홍(바리의 화관 · 색동) + 청동 금빛. 큰 줄은 붓글씨(SJBrush = 신라문화체에서 이 화면 글자만 뽑은 것, 만드는 법은 보고서 참고),
   대사 자막은 송명체, 본문은 명조. 모서리는 각지게(원형만 예외). 카드 나열 · 흰 말풍선 없음. */
@font-face{font-family:'SJBrush';src:url('../../fonts/sjbrush2.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'OBrushSJ';src:url('../../fonts/obrush.woff2') format('woff2');font-weight:400;font-display:swap}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
:root{
  --bg:#060405; --ink:#f3ece0; --ink-2:#cdc2b1; --ink-3:#8f8678; --line:rgba(236,210,154,.22);
  --red:#a3162a; --red-2:#c8273c; --gold:#d9b56a; --gold-2:#efd9a6; --ivory:#f6ecdc;
  --brush:'SJBrush','OBrushSJ','Song Myung','Noto Serif KR',serif; --sub:'Song Myung','Noto Serif KR',serif; --serif:'Noto Serif KR','Nanum Myeongjo',serif;
  --sans:'Pretendard Variable',Pretendard,'Noto Sans KR',system-ui,sans-serif;
  color-scheme:dark;
  --ts:0 0 1px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.75),0 0 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;border-radius:0}
html,body{height:100%}
body{margin:0;background:#000;color:var(--ink);font-family:var(--sans);display:flex;justify-content:center;overflow:hidden;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font-family:inherit;border-radius:0}
[hidden]{display:none!important}
.stage{position:relative;width:100%;max-width:480px;height:100%;overflow:hidden;overflow:clip;background:var(--bg)}
@media (min-width:700px){.stage{height:min(100%,940px);margin:auto 0;box-shadow:0 30px 80px rgba(0,0,0,.6)}}
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;opacity:0;pointer-events:none;transition:opacity .6s ease;background:var(--bg)}
.scr::-webkit-scrollbar{display:none}
.scr.on{opacity:1;pointer-events:auto;z-index:2}

/* 공통: 전면 그림 · 반복 영상 · 그늘 */
.ph{position:absolute;inset:0;background:#0b0708 center/cover no-repeat}
video.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;background:transparent}
video.lv.on{opacity:1}
.sh{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%)}
@keyframes breathe{0%,100%{transform:scale(1.04)}50%{transform:scale(1.12)}}
.brush{text-wrap:balance;font-family:var(--brush);font-weight:400;color:var(--ivory);margin:0;letter-spacing:.01em;text-shadow:var(--ts)}
.sub{font-family:var(--sub);font-size:20px;line-height:1.6;color:#fff;margin:14px 0 0;text-shadow:var(--ts)}
.hint{font:500 12px/1.4 var(--sans);letter-spacing:.14em;color:rgba(243,236,224,.62);margin:14px 0 0;animation:hintB 2.6s ease-in-out infinite}
@keyframes hintB{0%,100%{opacity:.45}50%{opacity:1}}
.go{display:block;width:100%;margin:20px 0 0;padding:16px 14px;border:1px solid rgba(239,217,166,.55);background:linear-gradient(180deg,#b01d31,#86101f);color:#fbf1e2;font:700 17px/1.2 var(--serif);letter-spacing:.04em;cursor:pointer;box-shadow:0 12px 34px rgba(163,22,42,.38),inset 0 1px 0 rgba(255,230,200,.25)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.38;box-shadow:none}
.cap{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);text-align:center;z-index:5}

/* 앞쪽 떠다니는 조각: --p(0~1)에 따라 아래에서 위로, 뒤에서 앞으로 */
.fgl{position:absolute;inset:0;pointer-events:none;overflow:hidden;perspective:640px;perspective-origin:50% 45%;z-index:4;translate:calc(var(--tx,0)*20px) calc(var(--ty,0)*14px)}
.pz{position:absolute;left:calc(var(--x)*1%);top:0;width:var(--sz);height:var(--sz);color:var(--c);will-change:transform,opacity;
  transform:translate3d(0,calc((var(--y0) - var(--p)*var(--sp))*1svh),calc(var(--p)*var(--z)*1px - 160px)) rotate(calc(var(--r)*1deg + var(--p)*var(--rs)*1deg));
  opacity:min(1,calc(var(--p)*5),calc((1 - var(--p))*5))}
.pz svg{display:block;width:100%;height:100%;fill:currentColor;animation:bob 5s ease-in-out var(--dl) infinite alternate}
.pz.pt svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.pz.dr svg{filter:drop-shadow(0 0 6px rgba(200,230,255,.9));opacity:.85}
.pz.jj svg{opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
@keyframes bob{from{transform:translate(0,0) rotate(0)}to{transform:translate(8px,-14px) rotate(24deg)}}
@keyframes drift{from{--p:0}to{--p:1}}

/* 1. 첫 화면 */
.hero{position:relative;height:100%;overflow:hidden}
.hero .ph,.hero video.lv{inset:-4%;width:108%;height:108%;animation:breathe 16s ease-in-out infinite;translate:calc(var(--tx,0)*-12px) calc(var(--ty,0)*-10px);background-position:center 22%;object-position:center 22%}
.hero .sh{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%)}
.hero .pz,.fgl.idle .pz{animation:drift 11s linear var(--dl) infinite}
.fgl.idle{z-index:4}
.q .fgl.idle{z-index:4}
.hero .ht{position:absolute;left:0;right:0;bottom:0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;z-index:5}
.hero .k{font:600 12px/1 var(--sans);letter-spacing:.3em;color:var(--gold);margin:0 0 12px}
.hero h1{font-size:62px;line-height:1.02}
.hero h1 span{display:block;font-size:34px;margin-top:6px;color:var(--gold-2)}
.hero .sub{margin-top:14px}
.hero .fine{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:12px 0 0}

/* 2. 방울 의식 */
.full{position:relative;height:100%;overflow:hidden}
#sBell .ph{animation:breathe 14s ease-in-out infinite;background-position:center 40%}
#sBell .cap{top:calc(env(safe-area-inset-top,0px) + 56px);bottom:auto}
.bell{position:absolute;left:50%;top:75%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;border:0;padding:0;cursor:pointer;z-index:6;background:radial-gradient(circle,rgba(255,226,160,.32),rgba(255,226,160,0) 66%)}
.bell i{position:absolute;inset:22%;border-radius:50%;border:1.5px solid rgba(255,226,160,.85);animation:ping 2.4s ease-out infinite}
.bell i:nth-child(2){animation-delay:.8s}.bell i:nth-child(3){animation-delay:1.6s}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.7);opacity:0}}
#sBell.rung .full{animation:shake .5s ease}
#sBell.rung .ph{filter:brightness(1.5)}
#sBell.rung .bell{opacity:0;transition:opacity .4s}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-7px,2px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,3px)}60%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}

/* 3. 썰 */
#sStory{scroll-snap-type:y mandatory}
#beats{height:100%}
.beat{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;cursor:pointer}
.beat .ph,.beat video.lv{inset:-6% 0;height:112%;transform:translateY(calc((var(--p) - .5)*-9%)) scale(1.06);translate:calc(var(--tx,0)*-10px) calc(var(--ty,0)*-8px)}
.beat .bt{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 54px);text-align:center;z-index:5}
.beat .brush{font-size:40px;line-height:1.22;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.3,.7,.2,1) .2s}
.beat.in .brush{clip-path:inset(0 0 0 0)}
.beat .subs .sub{font-size:19px;margin:8px 0 0;opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform .8s ease}
.beat.in .subs .sub{opacity:1;transform:none}
.beat .go{opacity:0;transition:opacity .8s ease 3.4s}.beat.in .go{opacity:1}
.beat .hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);text-align:center;z-index:5;margin:0}

/* 4. 입력 · 9. 결제 뒤 질문 */
.ticks{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);left:60px;right:60px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;z-index:8}
#aTicks{grid-template-columns:repeat(3,1fr)}
.ticks i{height:3px;background:rgba(243,236,224,.2);transition:background .4s}
.ticks i.on{background:var(--gold)}
.bkb{position:absolute;top:calc(env(safe-area-inset-top,0px) + 4px);left:6px;width:44px;height:44px;border:0;background:none;color:var(--ink);z-index:9;padding:10px;cursor:pointer}
.bkb svg{width:24px;height:24px}
.q{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease;overflow:hidden}
.q.on{opacity:1;pointer-events:auto}
.q .ph,.q video.lv{inset:-3%;width:106%;height:106%;animation:breathe 18s ease-in-out infinite}
.q .sh{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%)}
.qa{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:5;text-align:center}
.q.on .qa>*{animation:upIn .8s cubic-bezier(.2,.8,.2,1) both}
.q.on .qa>*:nth-child(2){animation-delay:.25s}.q.on .qa>*:nth-child(3){animation-delay:.4s}.q.on .qa>*:nth-child(4){animation-delay:.55s}.q.on .qa>*:nth-child(5){animation-delay:.7s}
@keyframes upIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qa .sub{font-size:22px;line-height:1.55;margin:0 0 20px}
.seg{display:flex;gap:6px;margin:0 0 10px}
.seg button,.opts button,.hrs button{flex:1;padding:13px 6px;border:1px solid rgba(239,217,166,.34);background:rgba(10,6,6,.6);color:var(--ink);font:500 16px/1.2 var(--sans);cursor:pointer;transition:background .25s,border-color .25s}
.seg button.on,.opts button.on,.hrs button.on{background:rgba(163,22,42,.88);border-color:var(--gold-2);color:#fff}
.seg.big button{padding:24px 6px;font:400 24px/1 var(--sub)}
.g3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px}
.g3 select{appearance:none;-webkit-appearance:none;width:100%;padding:15px 8px;border:1px solid rgba(239,217,166,.34);background:rgba(10,6,6,.66);color:var(--ink);font:500 17px/1 var(--sans);text-align:center;text-align-last:center}
.hrs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.hrs button{padding:8px 2px}
.hrs b{display:block;font:400 17px/1.2 var(--sub)}
.hrs small{display:block;font-size:10.5px;color:var(--ink-2);margin-top:2px}
.hrs button.on small{color:#fbe7d2}
.skipx{display:block;margin:10px auto 0;padding:10px 12px;border:0;background:none;color:var(--ink-2);font:500 14px/1.2 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.skipx.on{color:var(--gold-2)}
.qa .note{min-height:0;margin:4px 0 0;font:400 14px/1.6 var(--sub);color:var(--gold-2)}
.qa .go{margin-top:12px}
#nm{width:100%;padding:16px 10px;border:0;border-bottom:1px solid var(--gold);background:rgba(10,6,6,.5);color:#fff;font:400 26px/1.2 var(--sub);text-align:center;outline:none}
#nm::placeholder{color:rgba(243,236,224,.38)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.opts button{padding:18px 6px;font:400 20px/1 var(--sub)}
#jobO button:last-child{grid-column:1/-1}
#worry{width:100%;padding:14px;border:1px solid rgba(239,217,166,.34);background:rgba(10,6,6,.66);color:var(--ink);font:400 17px/1.5 var(--sans);resize:none;outline:none}

/* 5. 이름 부르기 */
#sCall .ph,#sCall video.lv{animation:breathe 12s ease-in-out infinite;background-position:center 22%;object-position:center 22%}
#sCall .cap{bottom:calc(env(safe-area-inset-bottom,0px) + 40px)}
#callT{font-size:64px;line-height:1.08;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1) .5s}
#sCall.in #callT{clip-path:inset(0 0 0 0)}
#callS{opacity:0;transition:opacity 1s ease 2.2s}#sCall.in #callS{opacity:1}
#sCall .hint{opacity:0;transition:opacity 1s ease 3.4s}#sCall.in .hint{opacity:1}

/* 6. 꽃 피우기 */
#sBloom{overflow:hidden}
.bloom{position:relative;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 42%,#1d0b0d 0,#0a0506 42%,#030202 78%);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:pointer}
.fwrap{position:absolute;left:50%;top:41%;width:min(340px,86vw);aspect-ratio:1;transform:translate(-50%,-50%)}
.fwrap::before{content:'';position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,224,170,.34),rgba(255,224,170,0) 62%);opacity:var(--bp,0);transition:opacity .3s}
#sBloom.done .fwrap::before{opacity:1;animation:glowB 4s ease-in-out infinite}
@keyframes glowB{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#flw,#flw svg,.bud{position:absolute;inset:0;width:100%;height:100%}
.bud{transition:opacity .5s ease}
#flw .pt{transform:scale(0) rotate(-24deg);opacity:0;transform-origin:150px 150px;transition:transform 1.2s cubic-bezier(.2,.9,.25,1.12),opacity .7s ease}
#flw .pt.open{transform:none;opacity:1}
.ray{position:absolute;left:50%;top:0;height:42%;width:150px;transform:translateX(-50%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.ray::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,246,220,0),rgba(255,240,205,.3) 45%,rgba(255,236,190,.55));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(8px)}
.ray i{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,0),#fff8e6);box-shadow:0 0 12px #fff2d0,0 0 30px rgba(255,236,190,.8)}
#sBloom.hold .ray{opacity:1}
.drops{position:absolute;left:50%;top:0;width:60px;height:42%;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .4s}
#sBloom.hold .drops{opacity:1}
.drops::before,.drops::after{content:'';position:absolute;left:46%;top:0;width:5px;height:9px;border-radius:50%;background:#fff6e2;box-shadow:0 0 8px #fff;animation:fall 1s linear infinite}
.drops::after{left:58%;animation-delay:.5s}
@keyframes fall{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(34svh);opacity:0}}
#sBloom .cap.top{bottom:calc(env(safe-area-inset-bottom,0px) + 70px)}
#sBloom.hold .cap.top .hint{opacity:.3;animation:none}
.cap.res{bottom:calc(env(safe-area-inset-bottom,0px) + 26px);animation:upIn 1s ease both}
.cap.res .cnt{font:700 15px/1.6 var(--serif);color:var(--ink-2);margin:0 0 10px}
.cap.res .brush{font-size:34px;line-height:1.25}
.fl-lab{font:700 14px var(--sans);fill:var(--ivory)}
.fl-lab.dry{fill:#8c877f}

/* 7. 공수 */
.gong .ph{animation:gzoom 16s ease-out both;background-position:center 30%}
@keyframes gzoom{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.crack{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.crack path{fill:none;stroke:var(--gc,#fff);stroke-width:1.4;opacity:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--gc)) drop-shadow(0 0 10px var(--gc));transition:stroke-dashoffset 2.4s cubic-bezier(.4,.1,.2,1) .4s}
#sGong.in .crack path{stroke-dashoffset:0}
.sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,240,210,.32) 50%,transparent 62%) 0 0/300% 100% no-repeat;-webkit-mask-image:radial-gradient(circle at 50% 36%,#000 0 26%,transparent 52%);mask-image:radial-gradient(circle at 50% 36%,#000 0 26%,transparent 52%);opacity:0}
#sGong.in .sweep{animation:sweep 2.6s ease .6s both}
@keyframes sweep{0%{opacity:1;background-position:100% 0}100%{opacity:0;background-position:0 0}}
#sGong .sh{z-index:3}
#sGong .cap .k{font:600 12px/1 var(--sans);letter-spacing:.28em;color:var(--gold);margin:0 0 14px;opacity:0;transition:opacity .8s ease 1.2s}
#sGong.in .cap .k{opacity:1}
.gl{font-size:30px;line-height:1.32;text-wrap:balance;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1) 1.6s,color 1.4s ease 3.6s}
.gl.b{margin-top:10px;transition-delay:2.8s,4.4s}
#sGong.in .gl{clip-path:inset(0 0 0 0);color:var(--gc)}
#gongS{font-size:16px;opacity:0;transition:opacity 1s ease 4.6s}
#sGong.in #gongS{opacity:1}
#toPv{opacity:0;transition:opacity 1s ease 5.4s}#sGong.in #toPv{opacity:1}

/* 8. 무료 미리 보기 — 장면 = 붙박이 뒤 그림 + 붙박이 앞 조각 + 흐르는 가운데 글 */
.sc{position:relative;min-height:100svh}
.sc>.lay,.sc>.fgl{position:sticky;top:0;height:100svh;margin-bottom:-100svh}
.sc>.lay{z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16svh);mask-image:linear-gradient(180deg,transparent 0,#000 16svh)}
.sc:first-child>.lay{-webkit-mask-image:none;mask-image:none}
.sc .lay .ph,.sc .lay video.lv{inset:-9% 0;height:118%;transform:translateY(calc((var(--p) - .5)*-12svh)) scale(1.08);translate:calc(var(--tx,0)*-10px) calc(var(--ty,0)*-8px)}
.sc .lay .sh{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%)}
.sc>.fgl{z-index:3}
.ct{position:relative;z-index:2;min-height:100svh;padding:22svh 16px 20svh;text-align:center;display:flex;flex-direction:column;justify-content:center}
.band{padding:4svh 0}
.rv{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1s ease}
.rv.in{opacity:1;transform:none;filter:none}
.kk{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;font:600 12.5px/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.kk::before,.kk::after{content:'';width:22px;height:1px;background:var(--red-2)}
.ct h3.brush{font-size:44px;line-height:1.18}
.ink{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1),opacity .4s}
.ink.in{clip-path:inset(-10px -10px -10px -10px)}
.ct .sub{margin:16px 0 0}
.ln{font:600 17.5px/1.75 var(--serif);color:#fff;margin:16px 0 0;text-shadow:var(--ts)}
.fogp{margin:14px 0 0;font:400 16px/1.9 var(--serif)}
.fogp .obpv-fog{color:var(--ink-2)}
.lki{width:13px;height:13px;flex:0 0 13px;color:var(--gold)}
/* 명식 거울 */
.mirror{position:relative;width:min(340px,88vw);aspect-ratio:1;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 50% 44%,rgba(52,36,16,.82),rgba(10,7,4,.94) 70%);box-shadow:0 0 0 3px #6b4c22,0 0 0 9px #241a0d,0 0 0 11px #a07a3c,0 0 0 13px #3a2a12,0 0 70px rgba(201,160,82,.4),inset 0 0 50px rgba(201,160,82,.3)}
.mirror .rim{position:absolute;inset:12px;border-radius:50%;border:1px dashed rgba(239,217,166,.4);animation:spin 80s linear infinite}
.mirror .rim::after{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(239,217,166,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
.pls{position:absolute;left:13%;right:13%;top:17%;bottom:15%;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.pl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.pl small{font:600 11px/1 var(--sans);color:var(--gold);letter-spacing:.1em;margin-bottom:4px}
.pl b{position:relative;font:900 34px/1 var(--serif);color:var(--ivory)}
.pl b i{position:absolute;right:-12px;bottom:0;font:700 11px/1 var(--sans);font-style:normal;color:var(--ink-2)}
.pl em{font:500 11px/1 var(--sans);font-style:normal;color:#c9a46a;margin:3px 0 8px}
.pl.me b{color:#f4c96c;text-shadow:0 0 18px rgba(244,201,108,.6)}
.pl.me small{color:#f4c96c}
.pl.un b,.pl.un em{opacity:.4}
/* 꿰뚫어 보기 */
.pc{margin:26px 0 0;text-align:center}
.pq{font:500 20px/1.6 var(--sub);color:#fff;margin:0;text-shadow:var(--ts)}
.pq i{display:block;font:600 11.5px/1 var(--sans);font-style:normal;letter-spacing:.24em;color:var(--red-2);margin-bottom:10px}
.pc .ev{display:inline-block;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--line);font:500 12.5px/1.5 var(--sans);color:var(--gold)}
/* 내 꽃 */
.flbox{width:min(330px,86vw);margin:0 auto 6px}
.flbox svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 30px rgba(0,0,0,.6))}
.flbox .pt{transform:scale(.15);opacity:0;transform-origin:150px 150px;transition:transform 1.3s cubic-bezier(.2,.9,.25,1.1) calc(var(--i)*.18s + .2s),opacity .8s ease calc(var(--i)*.18s + .2s)}
.flbox.in .pt{transform:none;opacity:1}
.flbox.ghost{width:220px;margin:22px auto 0;opacity:.8;filter:drop-shadow(0 0 30px rgba(239,217,166,.35))}
.two{display:grid;grid-template-columns:1fr 1fr;margin:22px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.two p{margin:0;padding:14px 10px;text-align:left;font:400 14.5px/1.6 var(--serif);color:var(--ink)}
.two p+p{border-left:1px solid var(--line)}
.two small{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.12em;color:var(--gold);margin-bottom:8px}
.two b{display:block;font:900 22px/1.1 var(--serif);margin-bottom:6px}
/* 막힌 운 · 목록 */
.more{margin:26px auto 0;width:100%;max-width:340px;text-align:left}
.more .mh{margin:0;padding:0 0 10px;font:400 17px/1 var(--sub);color:var(--gold-2);border-bottom:1px solid var(--line)}
.more p:not(.mh){display:flex;align-items:center;gap:10px;margin:0;padding:13px 0;border-bottom:1px solid rgba(236,210,154,.13);font:500 16px/1.4 var(--serif);color:var(--ink)}
/* 꽃 피는 달 */
.months{display:flex;justify-content:center;gap:34px;margin:22px 0 6px}
.months p{margin:0;text-align:center}
.months small{display:block;font:600 13px/1 var(--sans);letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.months b.brush{font-size:92px;line-height:1;color:#ffe9c4;text-shadow:0 0 40px rgba(255,200,140,.45),0 4px 24px rgba(0,0,0,.8)}
.rows{width:100%;max-width:340px;margin:18px auto 0;text-align:left}
.rows p{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:13px 0;border-bottom:1px solid rgba(236,210,154,.18);font:500 16px/1.3 var(--serif)}
.rows small{font:600 12.5px/1 var(--sans);color:var(--gold);letter-spacing:.1em}
.sw{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 0}
.sw i{width:58px;height:58px;border-radius:50%;box-shadow:0 0 0 2px rgba(239,217,166,.7),0 0 0 7px rgba(6,4,5,.6),0 0 40px rgba(255,236,190,.35)}
.sw .brush{font-size:58px}
/* 차례 */
.toc{list-style:none;margin:26px 0 0;padding:0;text-align:left}
.toc li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(236,210,154,.2)}
.toc li:last-child{border-bottom:1px solid rgba(236,210,154,.2)}
.toc i{flex:0 0 26px;font:400 32px/1 var(--brush);font-style:normal;color:var(--gold)}
.toc b{display:block;font:400 21px/1.2 var(--sub);color:var(--ivory)}
.toc p{margin:6px 0 0;font:400 15px/1.65 var(--serif);color:var(--ink)}
.toc p.f{margin-top:2px}
/* 다른 점 */
.s-why .ct h3.brush{font-size:46px}
.cnt{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:20px 0 0;font:900 21px/1.2 var(--serif)}
.vol{display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px 0 0;font:400 19px/1 var(--sub);color:var(--ink)}
.vol span{display:block}
.vol b{font:400 50px/1 var(--brush);color:var(--gold-2);margin-right:6px}
details.ev{width:100%;max-width:340px;margin:22px auto 0;text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.ev summary{list-style:none;padding:13px 10px;font:600 14px/1 var(--sans);color:var(--gold);cursor:pointer}
details.ev summary::-webkit-details-marker{display:none}
details.ev ul{margin:0;padding:0 10px 12px 26px;font:400 13.5px/1.8 var(--sans);color:var(--ink-2)}
.trust{width:100%;max-width:340px;margin:20px auto 0;text-align:left}
.trust p{margin:0;padding:13px 0;border-top:1px solid var(--line);font:400 15px/1.7 var(--serif);color:var(--ink);text-shadow:0 2px 10px rgba(0,0,0,.9)}
.trust small{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
.smp{text-align:left;border-left:2px solid var(--red-2);padding:4px 0 4px 16px}
.smp .sk{margin:0 0 8px;font:400 44px/1 var(--brush);color:var(--gold)}
.smp .smb{font-size:32px!important;line-height:1.3!important}
.smp .s1{margin:16px 0 0;font:500 17px/1.85 var(--serif);color:var(--ink)}
/* 가격 · 결제 */
.lock{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.lock::before{content:'';position:absolute;inset:0;background:var(--lk) center 22%/cover no-repeat;animation:breathe 18s ease-in-out infinite}
.lock::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 70%,rgba(0,0,0,.3) 100%)}
.lk-in{position:relative;z-index:2;width:100%;padding:38svh 16px calc(env(safe-area-inset-bottom,0px) + 90px);text-align:center}
.lk-in .k{font:600 12.5px/1 var(--sans);letter-spacing:.24em;color:var(--gold);margin:0}
.lk-in .pr{margin:14px 0 0;font:400 60px/1 var(--brush);color:var(--ivory);text-shadow:0 4px 30px rgba(0,0,0,.9)}
.lk-in .vol{margin:12px 0 0;font:400 17px/1.4 var(--sub);color:var(--ink-2);display:block}
.lk-in .agree{margin:16px 0 0;font:400 12px/1.7 var(--sans);color:var(--ink-3);text-align:left}
.lk-in .agree a{color:var(--ink-2);text-decoration:underline}
.obpv-bar{border-top:1px solid rgba(239,217,166,.35)!important;background:rgba(6,4,5,.94)!important}
.obpv-bar button{background:var(--red)!important;color:#fbf1e2!important;font-family:var(--serif)!important}
.obp-bn{color:var(--gold-2)!important}

/* 10. 본편 일곱 장(책) */
.bk{background:var(--bg);padding-bottom:30px}
.bk-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:46px;padding:0 12px;background:rgba(6,4,5,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bk-bar button{padding:7px 12px;border:1px solid var(--line);background:none;color:var(--ink);font:500 13px/1 var(--sans);cursor:pointer}
.bk-bar b{font:400 18px/1 var(--sub);color:var(--gold-2)}
.bk-bar span{margin-left:auto;font:500 13px/1 var(--sans);color:var(--ink-2)}
.bk .pk-st{margin:12px 16px 0;background:rgba(24,14,12,.94);border-color:var(--gold);color:var(--ink)}
.bk .pk-st small{color:var(--ink-3)}
.bk-cv{padding:44px 16px 20px;text-align:center}
.bk-cv .k{margin:0;font:600 12.5px/1 var(--sans);letter-spacing:.24em;color:var(--gold)}
.bk-cv h2{margin:16px 0 0;font:400 40px/1.25 var(--brush);color:var(--ivory)}
.bk-cv .s{margin:12px 0 0;font:400 16px/1.5 var(--sub);color:var(--ink-2)}
.bk-toc{list-style:none;margin:26px 0 0;padding:0;text-align:left}
.bk-toc a{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.bk-toc li:last-child a{border-bottom:1px solid var(--line)}
.bk-toc i{flex:0 0 24px;font:400 28px/1 var(--brush);font-style:normal;color:var(--gold)}
.bk-toc span{font:400 19px/1.25 var(--sub)}
.bk-toc small{display:block;margin-top:4px;font:400 13px/1.5 var(--sans);color:var(--ink-3)}
.bk-cv .ai{margin:16px 0 0;font:400 12px/1.6 var(--sans);color:var(--ink-3)}
.bk-ch{position:relative;margin:0 0 20px}
.bk-op{position:relative;height:86svh;overflow:hidden}
.bk-op .ph,.bk-op video.lv{inset:-7% 0;height:114%;transform:translateY(calc((var(--p) - .5)*-10%)) scale(1.06)}
.bk-op .sh{background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22) 100%)}
.bk-k{position:absolute;left:16px;right:16px;bottom:64px;margin:0;z-index:2;font:400 28px/1.2 var(--sub);color:var(--ivory);text-shadow:0 2px 16px rgba(0,0,0,.9)}
.bk-k span{display:block;font:400 64px/1 var(--brush);color:var(--gold-2);margin-bottom:6px}
.bk-big{position:relative;z-index:2;margin:22px 0 0;padding:0 16px;font:400 36px/1.3 var(--brush);color:var(--ivory)}
.bk-gs{padding:0 16px;margin:26px 0 0}
.bk-gs p{margin:0 0 18px;font:400 25px/1.4 var(--brush);color:var(--ivory)}
.bk-gs p.g0{color:var(--gc)}
.bk-gs i{display:block;margin-bottom:8px;font:600 11.5px/1 var(--sans);font-style:normal;letter-spacing:.22em;color:var(--red-2)}
.bk-c{padding:0 16px;margin:36px 0 0}
.bk-h{margin:0 0 16px;font:400 27px/1.3 var(--brush);color:var(--gold-2)}
.bk-h::after{content:'';display:block;width:34px;height:3px;margin-top:10px;background:var(--red-2)}
.bk-c p,.bk-yr p{margin:0 0 16px;font:400 17px/1.95 var(--serif);color:#ebe3d5}
.bk-c p b,.bk-yr p b{font-weight:700;color:var(--gold-2);background:linear-gradient(transparent 64%,rgba(163,22,42,.5) 0)}
.bk-ev{margin:26px 16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bk-ev summary{list-style:none;display:flex;justify-content:space-between;padding:15px 0;font:600 14px/1 var(--sans);color:var(--gold);cursor:pointer}
.bk-ev summary::-webkit-details-marker{display:none}
.bk-ev summary::after{content:'열기';font-weight:500;color:var(--ink-3)}
.bk-ev[open] summary::after{content:'닫기'}
.bk-ev ul{margin:0;padding:0 0 14px 18px;font:400 13.5px/1.8 var(--sans);color:var(--ink-2)}
.bk-nx{display:block;margin:28px 16px 0;padding:18px 16px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 21px/1.2 var(--sub)}
.bk-nx small{display:block;margin-bottom:8px;font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.bk-yr{list-style:none;margin:30px 0 0;padding:0 16px}
.bk-yr li{padding:20px 0;border-top:1px solid var(--line)}
.bk-yr li:last-child{border-bottom:1px solid var(--line)}
.yh{display:flex;align-items:baseline;gap:12px}
.yh b{font:400 32px/1 var(--brush);color:var(--ivory)}
.yh span{flex:1;font:400 18px/1.3 var(--sub);color:var(--ink-2)}
.yh em{font:400 32px/1 var(--brush);font-style:normal;color:var(--gold)}
.yh em small{font:500 12px/1 var(--sans);color:var(--ink-3);margin-left:2px}
.bk-yr .bar{display:block;height:3px;margin:12px 0 14px;background:rgba(255,255,255,.1)}
.bk-yr .bar s{display:block;height:100%;background:linear-gradient(90deg,#7d1d24,#d9b56a)}
.bk-yr li.best .yh b,.bk-yr li.best .yh em{color:#ffe1a6}
.bk-yr li.low .yh em{color:#9a958c}
.bk-rx{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:30px 16px 0;background:var(--line);border:1px solid var(--line)}
.bk-rx p{margin:0;padding:14px 12px;background:#0c0809}
.bk-rx small{display:block;margin-bottom:8px;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--gold)}
.bk-rx b{font:400 19px/1.35 var(--sub);color:var(--ivory)}
.bk-lt{margin:38px 16px 0;padding:28px 20px 24px;background:#e8dec7 linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.05));color:#2a1d16;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.bk-lt .bk-h{color:#7d1d24}.bk-lt .bk-h::after{background:#7d1d24}
.bk-lt p{margin:0 0 14px;font:400 18px/2 var(--sub);color:#2a1d16}
.bk-lt .sg{margin:18px 0 0;text-align:right;font:400 24px/1 var(--brush);color:#7d1d24}
.bk-fl{margin:36px 16px 0;text-align:center}
.bk-fl svg{width:min(330px,86vw);height:auto;overflow:visible;filter:drop-shadow(0 0 40px rgba(239,217,166,.25))}
.bk-fl figcaption{margin:10px 0 0;font:400 18px/1.5 var(--sub);color:var(--ink-2)}
.bk-note{margin:34px 16px 0;font:400 12px/1.7 var(--sans);color:var(--ink-3)}
.bk-end{margin:30px 16px 40px}
.bk-end .k{margin:0 0 6px;font:600 12.5px/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.bk-end a{display:block;padding:18px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.bk-end a:last-child{border-bottom:1px solid var(--line)}
.bk-end b{display:block;font:400 20px/1.3 var(--sub)}
.bk-end small{display:block;margin-top:4px;font:400 13px/1.5 var(--sans);color:var(--ink-3)}
.bk .rv{filter:none}
.bk-big.rv{clip-path:inset(0 100% 0 0);opacity:1;transform:none;transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1)}
.bk-big.rv.in{clip-path:inset(-10px)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translate(-50%,20px);z-index:99;max-width:86%;padding:12px 16px;background:rgba(16,10,10,.95);border:1px solid var(--line);color:var(--ink);font:500 14px/1.5 var(--sans);opacity:0;pointer-events:none;transition:all .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.pz,.hero .pz{display:none}.ph,video.lv{animation:none!important}}

/* 2판: 그림을 어둡게 덮는 대신 글자 그림자로 읽히게 */
.kk,.pc .ev,.two p,.two small,.more p,.more .mh,.months small,.rows p,.rows small,.toc b,.toc p,.toc i,.cnt,.vol,.trust p,.trust small,details.ev summary,details.ev ul,.smp .s1,.smp .sk,.fogp,.lk-in .k,.lk-in .vol,.lk-in .agree,.hint,.qa .note,.hero .k,.hero .fine,.bk-k,#gongS,.cap .k{text-shadow:var(--ts)}
.lk-in .agree{color:var(--ink-2)}
.sc .lay .ph,.sc .lay video.lv{transform:translateY(calc((var(--p) - .5)*-20svh)) scale(calc(1.05 + var(--p)*.1))}
.beat .ph,.beat video.lv{transform:translateY(calc((var(--p) - .5)*-14%)) scale(calc(1.04 + var(--p)*.06))}
/* 은주가 아끼는 손바닥 · 생명수 영상: 글 없이 화면 가득 한 번 끝까지(약 5초 스크롤 분량) 보여 준 뒤 글이 올라온다 */
.s-hold>.ct{padding-top:118svh}
.s-hold>.lay .ph,.s-hold>.lay video.lv{transform:translateY(calc((var(--p) - .5)*-8svh)) scale(calc(1.02 + var(--p)*.06))}

/* ════════ 3판 ════════ */
.fgl{display:none!important}
.wt-scr{background:#050304}
.hero .hm{position:absolute;inset:0;overflow:hidden}
.hero .hm .ph,.hero .hm video.lv{inset:-4%;width:108%;height:108%;animation:breathe 16s ease-in-out infinite}
.hero .skipx{margin-top:12px;color:var(--gold-2)}
/* 몰아치는 전면 칸 */
.wh{position:relative;height:100svh;overflow:hidden}
.wh .lay{position:absolute;inset:0;overflow:hidden}
.wh .ph,.wh video.lv{inset:-6% 0;height:112%;transform:translateY(calc((var(--p) - .5)*-8%)) scale(calc(1.03 + var(--p)*.12))}
.wh::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 74%,rgba(0,0,0,.25) 100%)}
.wh .cap{z-index:3;bottom:calc(env(safe-area-inset-bottom,0px) + 9svh)}
.wh .brush{font-size:46px;line-height:1.16}
.wh .sub{font-size:19px;margin:10px 0 0}
.wh .go{margin-top:22px}
/* 여백 있는 조용한 칸 */
.wq{padding:18svh 16px 2svh}
.wq figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#0b0708}
.wq figure .ph,.wq figure video.lv{inset:-7% 0;height:114%;transform:translateY(calc((var(--p) - .5)*-10%)) scale(calc(1.02 + var(--p)*.08))}
.wq figure.cut1{clip-path:polygon(0 0,100% 4%,100% 100%,0 96%)}
.wq figure.cut2{clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}
.wqt{padding:30px 2px 0;text-align:center}
.wqt .brush{font-size:38px;line-height:1.22}
.wqt .ln{margin:12px 0 0;font:500 17px/1.75 var(--serif);color:var(--ink);text-shadow:none}
.wqt .para{margin:18px 0 0;text-align:left;font:400 17px/1.95 var(--serif);color:#ebe3d5}
/* 글 칸 */
.wt{padding:16svh 16px 4svh;text-align:center}
.wt h3.brush{font-size:40px;line-height:1.2;margin:0 0 18px}
.wt .ln{font:500 17px/1.75 var(--serif);color:var(--ink);text-shadow:none;margin:14px 0 0}
.endsp{height:8svh;margin:0}
.pil{display:flex;justify-content:center;gap:10px;margin:18px 0 0}
.pil span{display:flex;flex-direction:column;align-items:center;font:900 30px/1 var(--serif);color:var(--ivory);text-shadow:var(--ts)}
.pil span i{font:600 12px/1 var(--sans);font-style:normal;margin-top:6px;color:var(--gold-2)}
/* 원국 표 */
table.ms,table.bk-ms{width:100%;border-collapse:collapse;margin:8px 0 6px;table-layout:fixed}
.ms th,.ms td,.bk-ms th,.bk-ms td{border:1px solid rgba(236,210,154,.22);padding:10px 2px;text-align:center;vertical-align:middle}
.ms th,.bk-ms th{font:600 12px/1 var(--sans);color:var(--gold);letter-spacing:.06em}
.ms tr:first-child th{border-top:0}
.ms td b,.bk-ms td b{display:block;font:900 32px/1 var(--serif);color:var(--ivory)}
.ms td i,.bk-ms td i{display:block;font:700 12px/1 var(--sans);font-style:normal;color:var(--ink-2);margin-top:5px}
.ms td em,.bk-ms td em{display:block;font:500 11.5px/1 var(--sans);font-style:normal;color:#c9a46a;margin-top:6px}
.ms td.me b,.bk-ms td.me b{color:#f4c96c}
.ms td.un,.bk-ms td.un{opacity:.45}
.ms td.us,.bk-ms td.us{font:500 12.5px/1 var(--sans);color:var(--ink-2)}
/* 꿰뚫어 보기 */
.pc .ev{border-top:0;padding-top:0;color:var(--gold)}
/* 오행 막대 */
.bars{max-width:360px;margin:6px auto 0;text-align:left}
.bars p{display:grid;grid-template-columns:64px 1fr 22px 34px;align-items:center;gap:10px;margin:0;padding:9px 0;border-bottom:1px solid rgba(236,210,154,.12)}
.bars span{font:700 15px/1 var(--serif);color:var(--ink)}
.bars i{display:block;height:8px;background:rgba(255,255,255,.07)}
.bars i s{display:block;height:100%}
.bars b{font:700 16px/1 var(--sans);color:var(--ivory);text-align:right}
.bars em{font:600 12px/1 var(--sans);font-style:normal;color:var(--gold)}
.bars p.lo em{color:#9a958c}
/* 신강약 */
.meter{max-width:340px;margin:20px auto 0}
.meter i{position:relative;display:block;height:10px;background:rgba(255,255,255,.08)}
.meter i s{display:block;height:100%;background:linear-gradient(90deg,#7d1d24,#d9b56a)}
.meter i b{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--ivory)}
.meter p{display:flex;justify-content:space-between;margin:8px 0 0;font:500 12px/1 var(--sans);color:var(--ink-3)}
/* 대운 줄 */
ol.du{list-style:none;margin:0 auto;padding:0;max-width:360px;text-align:left}
.du li{position:relative;display:grid;grid-template-columns:52px 1fr 52px 56px;align-items:center;gap:8px;padding:12px 8px;border-bottom:1px solid rgba(236,210,154,.14)}
.du li b{font:400 24px/1 var(--brush);color:var(--ivory)}.du li b small{font:500 11px var(--sans);margin-left:2px;color:var(--ink-3)}
.du li span{font:700 16px/1 var(--serif);color:var(--ink)}
.du li em{font:500 12.5px/1 var(--sans);font-style:normal;color:var(--gold)}
.du li i{font:500 12px/1 var(--sans);font-style:normal;color:var(--ink-2);text-align:right}
.du li.past{opacity:.45}
.du li.cur{background:rgba(163,22,42,.28);outline:1px solid rgba(239,217,166,.5)}
.du li u{position:absolute;right:8px;top:-9px;padding:2px 6px;background:var(--red);color:#fff;font:700 11px/1.2 var(--sans);text-decoration:none}
/* 세운 두 해 */
.yy{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.yy p{margin:0;padding:16px 8px;text-align:center}.yy p+p{border-left:1px solid var(--line)}
.yy small{display:block;font:600 12px/1 var(--sans);color:var(--gold);letter-spacing:.1em}
.yy b{display:block;margin:10px 0 8px;font:900 24px/1.2 var(--serif);color:var(--ivory)}
.yy em{font:500 13px/1.4 var(--sans);font-style:normal;color:var(--ink-2)}
/* 석 달 */
ol.mo{list-style:none;margin:0 auto;padding:0;max-width:360px;text-align:left}
.mo li{padding:16px 0;border-bottom:1px solid rgba(236,210,154,.14)}
.mo li>div{display:flex;align-items:baseline;gap:10px}
.mo li b{font:400 30px/1 var(--brush);color:var(--ivory)}
.mo li span{flex:1;font:500 13px/1.4 var(--sans);color:var(--ink-2)}
.mo li em{font:400 28px/1 var(--brush);font-style:normal;color:var(--gold)}.mo li em small{font:500 11px var(--sans);color:var(--ink-3)}
.mo .bar,.bk-mo .bar{display:block;height:3px;margin:10px 0;background:rgba(255,255,255,.08)}
.mo .bar s,.bk-mo .bar s{display:block;height:100%;background:linear-gradient(90deg,#7d1d24,#d9b56a)}
.mo li p{margin:0;font:400 15.5px/1.7 var(--serif);color:var(--ink)}
.mo li.fg{padding:12px 0}.mo li.fg b{font-size:22px;opacity:.6}
.cite{display:inline-block;margin:16px 0 0;padding:8px 10px;border-left:2px solid var(--red-2);font:600 13.5px/1.6 var(--sans);color:var(--gold-2);text-align:left}
.rows.dim{margin-top:20px}
/* 가격 */
.lock .lk-m{position:absolute;inset:0;overflow:hidden}
.lock .lk-m .ph,.lock .lk-m video.lv{animation:breathe 18s ease-in-out infinite;background-position:center 22%}
.lock::before{display:none}
.lock::after{z-index:1}
/* 묻고 답하기 */
.q .qm{position:absolute;inset:0;overflow:hidden}
.q .qm .ph,.q .qm video.lv{inset:-3%;width:106%;height:106%;animation:breathe 18s ease-in-out infinite}
.q::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 60%,rgba(0,0,0,.35) 100%);z-index:1}
.q .qa{z-index:5}
.sayR,.q .rnext{display:none}
.q.rx .sayQ,.q.rx .ctl{display:none}
.q.rx .sayR{display:block;animation:upIn .9s cubic-bezier(.2,.8,.2,1) both}
.q.rx .rnext{display:block;animation:upIn .9s cubic-bezier(.2,.8,.2,1) .8s both}
.sayR{font-size:22px!important}
.ctl>*+*{margin-top:8px}
#cOpt{grid-template-columns:1fr 1fr 1fr}
#cOpt button{padding:16px 4px;font-size:18px}
.gong .gm{position:absolute;inset:0;overflow:hidden}
.gong .gm .ph,.gong .gm video.lv{animation:gzoom 16s ease-out both;background-position:center 30%}
/* 본편 */
.bk-ci{margin:-6px 0 14px;font:600 13px/1.6 var(--sans);color:var(--gold)}
.bk-pn{margin:44px 16px;position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(0 0,100% 3%,100% 100%,0 97%)}
.bk-pn .ph{inset:-7% 0;height:114%;transform:translateY(calc((var(--p) - .5)*-10%)) scale(calc(1.02 + var(--p)*.08))}
.bk-pn figcaption{position:absolute;left:16px;right:16px;bottom:24px;font:900 22px/1.35 var(--serif);color:#fff;text-shadow:var(--ts)}
.bk-ms{margin:24px 16px 0;width:calc(100% - 32px)}
ol.bk-mo{list-style:none;margin:26px 0 0;padding:0 16px}
.bk-mo li{padding:18px 0;border-top:1px solid var(--line)}
.bk-mo li:last-child{border-bottom:1px solid var(--line)}
.bk-mo .yh b{font-size:28px}.bk-mo .yh span{font-size:14px;font-family:var(--sans)}
.bk-mo p{margin:0;font:400 16.5px/1.9 var(--serif);color:#ebe3d5}
.bk-c{margin:52px 0 0}
.bk-op{height:92svh}
.rv.in .ink{clip-path:inset(-10px -10px -10px -10px)}
.bk-pn video.lv{inset:-7% 0;height:114%;transform:translateY(calc((var(--p) - .5)*-10%)) scale(calc(1.02 + var(--p)*.08))}

/* 10/18 22:45 은주: 타닥타닥 붙이지 말고 여백 + 긴 그라데이션으로 이어지게 */
.wh{height:118svh;margin:6svh 0}
.wh .lay{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 100%)}
.wh::after{background:none}
.wh .cap{bottom:calc(env(safe-area-inset-bottom,0px) + 16svh)}
.wq{padding:16svh 16px 10svh}
.wq figure,.wq figure.cut1,.wq figure.cut2{clip-path:none;background:transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
.bk-op{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
.bk-pn{margin:12svh 16px;clip-path:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
.bk-pn figcaption{bottom:22%}
/* 배경 음악 단추(원형) */
.sjsnd{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:60;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(10,7,8,.42);color:#efe6d6;display:grid;place-items:center;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sjsnd svg{width:20px;height:20px}.sjsnd .x{display:none}.sjsnd.off .w{display:none}.sjsnd.off .x{display:inline}