@font-face{font-family:"Pretendard";src:url("assets/fonts/pretendard/PretendardVariable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{--font-webtoon:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;color-scheme:dark;--ink:#17161a;--paper:#fffdf8;--night:#101014;--red:#d94755;--muted:#a49a95}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:#7b3941 #101014}
body{margin:0;background:#08090b;color:#f8f1e6;font-family:var(--font-webtoon);-webkit-font-smoothing:antialiased}
.webtoon{width:min(100%,680px);margin:auto;container-type:inline-size;background:var(--night);overflow:hidden;box-shadow:0 0 100px #0006}
.masthead{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 7%;font-size:12px;letter-spacing:.12em;color:#b7aaa0;border-bottom:1px solid #ffffff0c}
.masthead span:first-child{font-family:var(--font-webtoon);font-size:16px;letter-spacing:.15em;color:#eee3d4}
.reading-progress{height:2px;position:fixed;inset:0 0 auto;z-index:20;pointer-events:none}
.reading-progress i{display:block;height:100%;background:#cd4857;transform:scaleX(0);transform-origin:left}
.act{padding-bottom:5cqw}
.act-morning{background:linear-gradient(#171618,#201b19 60%,#101014)}
.act-night{background:#0b0d13}
.act-confession{background:linear-gradient(#151318,#211a18 65%,#101014)}
.act-reveal{background:#101014;padding-bottom:0}
.panel{margin:0 0 11cqw;position:relative}
.frame{position:relative;width:100%;aspect-ratio:var(--ratio);overflow:hidden;background:#141419;isolation:isolate}
.frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus);position:absolute;inset:0}
.bubble{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:2;background:var(--paper);color:var(--ink);font-size:clamp(15px,3.8cqw,25px);font-weight:600;line-height:1.53;letter-spacing:-.035em;word-break:keep-all;text-align:center;padding:3.4cqw 3cqw;border-radius:48% 46% 44% 47% / 40% 46% 43% 48%;border:1px solid #443d38;box-shadow:0 3px 10px #0002}
.bubble.speech::after,.bubble.seon::after{content:"";position:absolute;width:3.4cqw;height:5cqw;background:var(--paper);bottom:-3.6cqw;left:49%;clip-path:polygon(0 0,100% 0,25% 100%)}
.bubble.tail-up::after{bottom:auto;top:-3.6cqw;transform:rotate(180deg)}
.bubble.seon{background:#fff7ec;border-color:#9c3943;color:#3a1c23}
.bubble.seon::after{background:#fff7ec}
.bubble.sfx{background:none;box-shadow:none;border:0;color:#fff;font-family:var(--font-webtoon);font-size:clamp(26px,9cqw,62px);font-weight:800;text-shadow:1px 2px 0 #171319,-1px -1px 0 #171319;transform:rotate(-9deg);padding:0;white-space:nowrap}
.caption{font-family:var(--font-webtoon);font-size:clamp(16px,3.8cqw,25px);line-height:1.9;text-align:center;word-break:keep-all;color:#ddd1c2;margin:0;padding:7cqw 7%}
.caption.before{padding-top:7cqw;padding-bottom:6cqw}
.caption.after{padding-top:7cqw;padding-bottom:2cqw}
.opening .before{font-family:inherit;font-size:12px;letter-spacing:.25em;color:#bca88e;text-align:left;padding-top:5cqw;padding-bottom:4cqw}
.opening .frame::after{content:"";position:absolute;inset:70% 0 0;background:linear-gradient(transparent,#201b1999);pointer-events:none}
.inset{margin-left:7%;margin-right:7%}
.interlude{padding:14cqw 7%;text-align:center;font-family:var(--font-webtoon);word-break:keep-all}
.interlude p{font-size:clamp(18px,4.7cqw,32px);line-height:1.85;margin:0;letter-spacing:-.025em}
.time-label{display:block;color:#9f9693;font:500 12px/1.5 var(--font-webtoon);letter-spacing:.18em;margin-bottom:7cqw}
.night-intro{padding-top:12cqw;padding-bottom:15cqw}
.night-intro p,.morning-return p{font-size:clamp(16px,4.1cqw,27px);color:#b6ada8}
.door{margin-bottom:6cqw}
.door .frame{width:88%;margin:auto}
.door .caption.before{padding-top:9cqw}
.morning-return{padding-top:13cqw;padding-bottom:14cqw}
.promise{padding-top:0;padding-bottom:18cqw}
.promise p{font-size:clamp(24px,6.5cqw,44px);color:#ebcbae;line-height:2.1}
.admit{padding-top:5cqw;padding-bottom:17cqw}
.admit p{font-size:clamp(19px,4.7cqw,32px);color:#e8cec1}
.before-cut{padding-top:5cqw;padding-bottom:20cqw}
.before-cut p{font-size:clamp(16px,3.8cqw,25px);color:#bcb1a9}
.voice{padding-top:21cqw;padding-bottom:22cqw;background:radial-gradient(ellipse,#27171f44,transparent 70%)}
.voice p{font-size:clamp(28px,7.3cqw,50px);color:#f7e5e5}
.tap{width:86%;margin:0 auto 4cqw}
.tap .sfx{color:#fff1e8}
.eyes{margin-left:4%;margin-right:4%;margin-bottom:0}
.seon-line{color:#f0a4a7;font-size:clamp(21px,5.5cqw,37px);font-weight:600;line-height:1.7;padding-top:10cqw!important;padding-bottom:11cqw!important}
.memory{padding-top:12cqw;padding-bottom:15cqw;background:linear-gradient(#101014,#17151b,#101014)}
.memory p{font-size:clamp(19px,4.7cqw,32px);color:#bfb5ba}
.future{padding-top:13cqw;padding-bottom:20cqw}
.future p{font-size:clamp(25px,6.4cqw,43px);line-height:1.85;color:#f3dad7}
.last-question{padding-top:0;padding-bottom:8cqw}
.last-question p{font-size:clamp(22px,5.7cqw,39px);color:#d7b4b8}
.ending{text-align:center;padding:12cqw 8% 13cqw;background:radial-gradient(ellipse at 50% 0,#35172388,transparent 65%)}
.ending-kicker{font-size:12px;letter-spacing:.28em;color:#b7777c}
.ending h1{font-family:var(--font-webtoon);font-weight:400;font-size:clamp(19px,4.5cqw,30px);letter-spacing:.04em;margin:5cqw 0 10cqw;color:#dcc8c8}
.last-line{font-family:var(--font-webtoon);font-size:clamp(38px,10cqw,68px);letter-spacing:-.06em;margin:0 0 10cqw;color:#fff2ed}
.bridge-copy{font-size:clamp(15px,3.6cqw,24px);line-height:2;color:#b9aeb1;margin:0 0 8cqw;word-break:keep-all}
.hand-line{font-family:var(--font-webtoon);font-size:clamp(21px,5.4cqw,36px);color:#e5b0b2;margin:0 0 9cqw}
.next{display:flex;justify-content:space-between;align-items:center;text-decoration:none;background:#a72e41;border:1px solid #ce5969;padding:5cqw 6cqw;font-size:clamp(16px,4cqw,25px);font-weight:700;color:#fff7f0;border-radius:3px}
.next:hover{background:#b6374b}
.next:focus-visible,.replay:focus-visible{outline:2px solid #fff;outline-offset:5px}
.replay{display:inline-block;margin-top:6cqw;padding:10px;color:#b7a7ab;text-decoration:none;font-size:14px}
.ending small{display:block;margin-top:8cqw;color:#746b72;font-size:11px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{body{background:#101014}.reading-progress,.next,.replay{display:none}.webtoon{width:680px}.panel,.interlude{break-inside:avoid}}