/* 로로 만화방 — 오빠, 달이 따라와! 원본 1~4페이지의 세로 웹툰 컷 연출
   네이버웹툰의 '흰 여백 + 변화하는 컷 크기 + 그림 속 말풍선' 읽기 문법을 참고하되,
   독자적인 그림과 브랜드 스타일로 구성한다. */
.reading-page.webtoon-cut-version,
.reading-page.webtoon-cut-version .reader-bg,
.reading-page.webtoon-cut-version .reader-canvas{background:#fff}
.reading-page.webtoon-cut-version .reader-canvas{
  width:min(720px,100%);
  box-shadow:none;
  overflow:visible
}
.reading-page.webtoon-cut-version .reader-heading{display:none}
.reading-page.webtoon-cut-version .reader-topbar{border-bottom:1px solid #e6e8e5}
.wc-strip{width:100%;max-width:720px;margin:0 auto}
.wc-series{overflow:hidden;background:#fff;position:relative}
.wc-series *{box-sizing:border-box}
.wc-series figure{margin:0}
.wc-frame,.wc-cover{position:relative;margin:0;width:100%;overflow:hidden;background:#e9ece9;isolation:isolate;opacity:0;transform:translate3d(0,15px,0);transition:opacity .7s ease,transform .7s ease}
.wc-frame.wc-visible,.wc-cover.wc-visible{opacity:1;transform:none}
.wc-image{display:block;width:100%;height:100%;object-fit:cover}
.wc-cover{height:740px}
.wc-cover .wc-image,
.wc-frame .wc-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wc-cover .wc-image{object-position:center 46%}
.wc-cover-shadow{position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(13,27,44,.97),rgba(14,28,48,.76) 20%,transparent 59%),linear-gradient(90deg,rgba(12,29,42,.10),transparent)}
.wc-cover-copy{position:absolute;z-index:3;bottom:0;left:0;right:0;padding:48px 53px 54px;color:white}
.wc-cover-copy small{font-size:12px;font-weight:850;letter-spacing:2px;color:#e8e4db}
.wc-cover-copy small span{display:inline-block;font-size:11px;padding-left:10px;color:#e7cf98}
.wc-cover-copy h2{font-size:clamp(47px,7.2vw,76px);line-height:1.22;letter-spacing:-4px;font-weight:950;margin:20px 0 19px;color:#fff}
.wc-cover-copy h2 em{color:#fff2ca;font-style:normal}
.wc-cover-copy p{font-size:15px;color:#cbd5d2;margin:0;letter-spacing:.4px;font-weight:650}
.wc-cover-glow{z-index:2;position:absolute;top:3%;right:15%;width:35%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,241,177,.3) 0%,rgba(255,240,190,.13) 26%,transparent 64%);mix-blend-mode:screen;animation:wcMoon 7.5s ease-in-out infinite alternate}
.wc-interlude{height:135px;display:flex;align-items:center;justify-content:center}
.wc-interlude span{height:32px;width:1px;background:#bdc5c3;opacity:.65}
.wc-narration{min-height:160px;background:#fff;padding:56px 26px 44px;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .65s,transform .65s}
.wc-narration.wc-visible{opacity:1;transform:none}
.wc-narration p{font-size:clamp(23px,3.55vw,34px);font-weight:800;letter-spacing:-1.25px;line-height:1.54;margin:0;color:#202a30}
.wc-narrate-1{padding-top:35px;padding-bottom:56px}
.wc-frame .wc-image{transition:filter .35s}
.wc-establish{height:375px;margin-bottom:22px}
.wc-establish .wc-image{object-position:center top}
.wc-moon-glow{position:absolute;z-index:2;pointer-events:none;width:29%;aspect-ratio:1;left:78%;top:-11%;background:radial-gradient(circle,rgba(255,249,192,.48) 0%,rgba(255,247,201,.15) 31%,transparent 72%);border-radius:50%;mix-blend-mode:screen;animation:wcMoon 7.5s ease-in-out infinite alternate}
.wc-mom{height:510px;margin-bottom:48px}
.wc-mom .wc-image{object-position:center 82%}
.wc-roa-response{height:355px;margin-bottom:35px}
.wc-roa-response .wc-image{object-position:center 91%;transform:scale(1.20);transform-origin:45% 81%}
.wc-pause{height:130px;display:flex;align-items:center;justify-content:center}
.wc-pause span{height:1px;width:37px;background:#dadeda}
.wc-pause-long{height:240px}
.wc-narrate-2{padding:55px 20px 45px}
.wc-bag-full{height:710px;margin-bottom:22px}
.wc-bag-full .wc-image{object-position:center}
.wc-boy{height:480px;margin-bottom:36px}
.wc-boy .wc-image{transform:scale(1.20);transform-origin:15% 38%;object-position:center 40%}
.wc-dad{height:490px;margin-bottom:35px}
.wc-dad .wc-image{transform:scale(1.25);transform-origin:90% 33%;object-position:center 40%}
.wc-narrate-3{padding-top:45px;padding-bottom:60px}
.wc-sky{height:340px;margin-bottom:28px}
.wc-sky .wc-image{object-position:center top}
.wc-glow-main{left:19%;top:-8%;width:37%}
.wc-roa-discovery{height:530px;margin-bottom:24px}
.wc-roa-discovery .wc-image{transform:scale(1.16);transform-origin:18% 69%;object-position:center 61%}
.wc-roun-reply{height:525px}
.wc-roun-reply .wc-image{transform:scale(1.20);transform-origin:84% 41%;object-position:center 47%}
.wc-end-spacer{height:95px;background:white}

/* Dialogues are layered *inside the comic image*, not cards below it. */
.wc-bubble{--stroke:#25313b;position:absolute;z-index:3;max-width:61%;min-width:125px;padding:16px 22px 18px;border:2.5px solid var(--stroke);border-radius:33px 34px 27px 30px;background:rgba(255,255,255,.98);color:#16212c;filter:drop-shadow(0 3px 4px rgba(23,35,39,.06));pointer-events:none;opacity:0;transform:translateY(9px) scale(.98);transition:opacity .55s ease .24s,transform .55s ease .24s}
.wc-frame.wc-visible .wc-bubble{opacity:1;transform:none}
.wc-bubble:after{content:"";position:absolute;bottom:-14px;left:21%;width:22px;height:22px;transform:rotate(42deg) skew(-7deg,-7deg);background:white;border-right:2.5px solid var(--stroke);border-bottom:2.5px solid var(--stroke)}
.wc-speaker{display:inline-block;padding:4px 10px;border-radius:50px;background:#e5f0e9;color:#415e4e;font-size:12px;font-weight:850;line-height:1.15}
.wc-rose .wc-speaker{background:#f8dfe8;color:#854b66}
.wc-gold .wc-speaker{background:#f8e9b5;color:#79612c}
.wc-blue .wc-speaker{background:#dce8f5;color:#3e668c}
.wc-bubble p{font-size:clamp(18px,2.5vw,26px);line-height:1.38;letter-spacing:-.6px;font-weight:950;word-break:keep-all;margin:10px 0 0}
.wc-bubble-mom{top:12%;right:6%;max-width:47%;width:295px}
.wc-bubble-mom:after{left:36%}
.wc-bubble-respond{top:8%;right:10%;width:180px;text-align:center}
.wc-bubble-respond:after{left:25%}
.wc-bubble-boy{top:9%;right:4.5%;width:275px}
.wc-bubble-boy:after{left:20%}
.wc-bubble-dad{bottom:10%;left:6%;width:340px}
.wc-bubble-dad:after{left:71%}
.wc-bubble-discover{bottom:8%;right:4%;width:220px}
.wc-bubble-discover:after{left:22%}
.wc-bubble-roun{bottom:7%;left:5%;width:335px}
.wc-bubble-roun:after{left:80%}
.wc-image-error:before{content:'이미지를 불러오지 못했어요';display:flex;align-items:center;justify-content:center;position:absolute;inset:0;background:#f3f3f3;color:#555;z-index:4;font-size:15px}

@keyframes wcMoon{from{opacity:.58;transform:translateY(3px) scale(.95)}to{opacity:1;transform:translateY(-5px) scale(1.04)}}
@media(max-width:760px){
 .wc-series{width:100%}
 .wc-cover{height:650px}
 .wc-cover-copy{padding:35px 34px 38px}
 .wc-cover-copy h2{font-size:57px}
 .wc-interlude{height:90px}
 .wc-narration{min-height:140px}
 .wc-establish{height:310px}
 .wc-mom{height:480px}
 .wc-roa-response{height:320px}
 .wc-pause{height:100px}
 .wc-pause-long{height:155px}
 .wc-bag-full{height:640px}
 .wc-boy{height:410px}
 .wc-dad{height:440px}
 .wc-sky{height:280px}
 .wc-roa-discovery{height:460px}
 .wc-roun-reply{height:460px}
}
@media(max-width:500px){
 .wc-cover{height:560px}
 .wc-cover .wc-image{object-position:center 50%}
 .wc-cover-copy{padding:26px 26px 34px}
 .wc-cover-copy small{font-size:10px;letter-spacing:1.2px}
 .wc-cover-copy h2{font-size:45px;letter-spacing:-2.4px;margin:14px 0}
 .wc-cover-copy p{font-size:12px}
 .wc-cover-glow{right:4%;top:0}
 .wc-interlude{height:87px}
 .wc-narration{min-height:127px;padding:30px 14px}
 .wc-narration p{font-size:24px;line-height:1.55;letter-spacing:-.65px}
 .wc-establish{height:230px;margin-bottom:13px}
 .wc-establish .wc-image{object-position:center top}
 .wc-mom{height:395px;margin-bottom:27px}
 .wc-mom .wc-image{object-position:45% 90%}
 .wc-roa-response{height:280px;margin-bottom:21px}
 .wc-roa-response .wc-image{transform:scale(1.26);transform-origin:46% 81%}
 .wc-pause{height:68px}
 .wc-pause-long{height:110px}
 .wc-bag-full{height:455px;margin-bottom:15px}
 .wc-boy{height:305px;margin-bottom:22px}
 .wc-boy .wc-image{transform:scale(1.30);transform-origin:14% 45%}
 .wc-dad{height:350px;margin-bottom:20px}
 .wc-dad .wc-image{transform:scale(1.30);transform-origin:87% 40%}
 .wc-sky{height:245px;margin-bottom:15px}
 .wc-roa-discovery{height:365px;margin-bottom:16px}
 .wc-roa-discovery .wc-image{transform:scale(1.18);transform-origin:13% 72%}
 .wc-roun-reply{height:390px}
 .wc-roun-reply .wc-image{transform:scale(1.20);transform-origin:84% 50%}
 .wc-end-spacer{height:51px}
 .wc-bubble{padding:11px 14px 13px;border-width:2px;border-radius:27px;min-width:95px;max-width:63%;filter:drop-shadow(0 2px 2px rgba(23,35,39,.08))}
 .wc-bubble:after{width:15px;height:15px;bottom:-10px;border-width:2px}
 .wc-speaker{font-size:10px;padding:3px 7px}
 .wc-bubble p{font-size:17px;line-height:1.34;margin-top:6px;letter-spacing:-.4px}
 .wc-bubble-mom{width:176px;right:4%;top:8%}
 .wc-bubble-respond{right:4%;top:6%;width:113px}
 .wc-bubble-boy{right:4%;top:6%;width:177px}
 .wc-bubble-dad{left:3%;bottom:6%;width:210px}
 .wc-bubble-discover{width:125px;right:4%;bottom:8%}
 .wc-bubble-roun{left:4%;bottom:6%;width:202px}
}
@media(max-width:360px){
 .wc-cover{height:515px}
 .wc-cover-copy h2{font-size:40px}
 .wc-bubble p{font-size:15px}
 .wc-speaker{font-size:9px}
 .wc-bubble-mom{width:160px}
 .wc-bubble-boy{width:165px}
 .wc-bubble-dad{width:196px}
 .wc-bubble-roun{width:186px}
 .wc-roa-discovery{height:337px}
 .wc-roun-reply{height:350px}
}
@media(prefers-reduced-motion:reduce){
 .wc-frame,.wc-cover,.wc-narration,.wc-bubble{opacity:1!important;transform:none!important;transition:none!important}
 .wc-moon-glow,.wc-cover-glow{animation:none!important}
}

/* Print-ready artwork stays fully colored and visible immediately. Only moonlight animates. */
.wc-frame,.wc-cover,.wc-narration{opacity:1;transform:none;transition:none}
.wc-frame .wc-bubble{opacity:1;transform:none;transition:none}
/* Cut-specific camera treatments: frame changes convey story instead of repeated full-page pictures. */
.wc-establish .wc-image{transform:scale(1.45);transform-origin:53% 0%}
.wc-roa-response .wc-image{transform:scale(1.65);transform-origin:48% 70%;object-position:center 68%}
.wc-sky .wc-image{transform:scale(1.53);transform-origin:26% 3%}
@media(max-width:500px){
 .wc-establish .wc-image{transform:scale(1.50);transform-origin:54% 0%}
 .wc-roa-response .wc-image{transform:scale(1.58);transform-origin:47% 71%;object-position:center 68%}
 .wc-sky .wc-image{transform:scale(1.62);transform-origin:27% 0%}
}