.single-comic{height:100dvh;background:#0e141bed;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 32px 25px;overflow:auto}
.comic-top{position:absolute;top:26px;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#d3c8a7}.comic-top button{background:none;border:1px solid #ead8b331;border-radius:20px;color:#b9b9b1;padding:9px 14px;font-size:10px;letter-spacing:0}
.comic-stage{width:min(1000px,100%);animation:cutEnter .4s both}.comic-frame{position:relative;width:100%;aspect-ratio:16/9;border:5px solid #fff0d2;background:#d5b88b;overflow:hidden;box-shadow:0 0 0 2px #26221c,12px 14px 0 #0004}
.comic-illustration{position:absolute;inset:0;background-image:url('./assets/prologue-comic.webp');background-size:200% 200%;background-repeat:no-repeat;animation:comicCamera 7s ease-out both}
.comic-grain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#08172435,transparent 35%);box-shadow:inset 0 0 60px #17332922}
.comic-place{position:absolute;left:24px;top:20px;background:#fff4da;color:#615541;border:2px solid #4d473b;padding:8px 15px;font-family:Chosun,serif;font-size:14px;box-shadow:3px 3px 0 #3e3c3140;animation:bubbleAppear .4s .3s both}
.comic-bubble{position:absolute;right:5%;top:15%;max-width:42%;background:#fffdf4;color:#263d3a;border:3px solid #303c36;border-radius:49% 47% 45% 48%;padding:clamp(15px,2.4vw,30px);font-size:clamp(15px,2.2vw,23px);font-weight:800;text-align:center;box-shadow:4px 5px 0 #29342a30;animation:bubbleAppear .35s .65s both}.comic-bubble:after{content:'';position:absolute;left:23%;bottom:-17px;border:9px solid transparent;border-top-color:#303c36;transform:rotate(15deg)}
.comic-impact{position:absolute;right:6%;bottom:10%;font-family:Chosun,serif;color:#fff5c4;font-size:clamp(28px,5vw,60px);font-weight:800;transform:rotate(-10deg);text-shadow:2px 2px 0 #2e372b,-2px -2px 0 #2e372b,2px -2px 0 #2e372b,-2px 2px 0 #2e372b,5px 6px 0 #29333240;animation:impactAppear .25s .9s both}.frame-2 .comic-impact{font-size:clamp(25px,4vw,45px);color:#deedf6}.frame-3 .comic-impact{font-size:clamp(45px,7vw,80px);right:5%;bottom:16%;color:#eefaff}
.comic-narration{padding:20px 6px 0}.comic-narration>p{font-family:Chosun,serif;font-size:clamp(14px,1.6vw,19px);line-height:1.8;color:#f3e8cc;margin:0 0 14px;text-align:center;animation:bubbleAppear .45s .45s both}.comic-navigation{display:flex;justify-content:flex-end;align-items:center;gap:24px}.comic-dots{display:flex;gap:7px}.comic-dots i{width:5px;height:5px;border:1px solid #c5b799;border-radius:50%}.comic-dots i.active{background:#edc778;box-shadow:0 0 8px #edc77860}.comic-navigation button{background:#efe0ba;color:#35463f;padding:12px 23px;border:1px solid #caaf7d;font-size:13px;border-radius:2px;box-shadow:3px 3px 0 #0004}.comic-navigation button:hover{background:#fff0cb}
@keyframes comicCamera{from{transform:scale(1)}to{transform:scale(1.045)}}@keyframes cutEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes bubbleAppear{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@keyframes impactAppear{from{opacity:0;scale:1.25}to{opacity:1;scale:1}}
@media(min-width:801px) and (max-height:800px){.comic-stage{max-width:calc((100dvh - 210px)*16/9)}}
@media(max-width:800px){.single-comic{padding:75px 14px 22px}.comic-frame{border-width:3px}.comic-place{top:10px;left:10px;font-size:10px;padding:5px 8px}.comic-bubble{font-size:13px;padding:12px;max-width:48%;right:3%;top:25%;border-width:2px}.comic-narration>p{font-size:14px;min-height:50px}.comic-top{left:18px;right:18px;letter-spacing:.5px}.comic-navigation{justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.comic-stage,.comic-illustration,.comic-place,.comic-bubble,.comic-impact,.comic-narration>p{animation:none}}