:root{--paper:#f4efe6;--sheet:#fbf8f2;--ink:#1b1915;--muted:#6f675b;--rule:#d8cfbf;--accent:#c8452c;--gold:#c9a96a;--gutter:max(16px,calc((100vw - 1080px)/2));--serif:"Iowan Old Style","Apple Garamond",Georgia,"AppleMyungjo","Nanum Myeongjo",serif;--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);margin:0}html{overflow-x:clip}body{font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}a{color:inherit}button{font:inherit;color:inherit}img{display:block}.defs{width:0;height:0;position:absolute}.top{z-index:20;padding:14px var(--gutter)10px;background:color-mix(in srgb,var(--paper)88%,transparent);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);justify-content:space-between;align-items:baseline;display:flex;position:sticky;top:0}.mark{font-family:var(--serif);letter-spacing:.18em;font-size:14px;font-weight:700}.no{letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.kicker{letter-spacing:.08em;color:var(--accent);margin:0 0 16px;font-size:13px;font-weight:600}.lede{color:#3a352d;word-break:keep-all;max-width:30em;margin:20px 0 0;font-size:17px;line-height:1.7}.en{font-family:var(--serif);color:var(--muted);margin:12px 0 0;font-style:italic}.cover{width:var(--cw,300px);aspect-ratio:3/4;background:#d9d2c4;position:relative;overflow:hidden;container-type:inline-size}.cover .cv-photo,.cover .cv-cut{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.cv-photo{z-index:0}.cv-mast{z-index:1;text-align:center;font-family:var(--sans);letter-spacing:-.04em;color:var(--accent);font-size:22cqw;font-weight:900;line-height:1;position:absolute;top:8cqw;left:0;right:0}.cv-cut{z-index:2;pointer-events:none}.cv-issue{z-index:3;text-align:center;letter-spacing:.2em;color:#fff;text-shadow:0 1px 6px #00000073;font-size:3.2cqw;position:absolute;top:3cqw;left:0;right:0}.cv-line{z-index:3;color:#fff;font-family:var(--serif);text-shadow:0 1px 8px #00000073;word-break:keep-all;font-weight:700;line-height:1.2;position:absolute}.cv-line.a{font-size:7cqw;bottom:8cqw;left:6cqw}.cv-line.b{text-align:right;font-size:4.6cqw;font-family:var(--sans);font-weight:600;bottom:8cqw;right:6cqw}.hero{min-height:calc(100svh - 48px);padding:40px var(--gutter)64px;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;display:grid;position:relative}h1{font-family:var(--serif);letter-spacing:-.01em;word-break:keep-all;margin:0;font-size:clamp(38px,6.4vw,72px);font-weight:700;line-height:1.1}.hero-stage{--rx:0deg;--ry:0deg;--gx:50%;perspective:1400px;flex-direction:column;align-items:center;display:flex}.book{--cw:min(66vw,340px);--o:0;width:var(--cw);aspect-ratio:3/4;cursor:pointer;transform-style:preserve-3d;transform:rotateX(var(--rx))rotateY(var(--ry))translateX(calc(var(--cw)*.3*var(--o)))scale(calc(1 - .4*var(--o)));background:0 0;border:0;padding:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);position:relative}.book.open{--o:1}.book .inside{background:var(--sheet);text-align:left;flex-direction:column;display:flex;position:absolute;inset:0;box-shadow:0 22px 50px #281e0f38}.inside img{object-fit:cover;width:100%;height:56%}.qa{padding:16px 18px}.qa .q{margin:0 0 8px;font-size:15px;font-weight:700}.qa .a{font-family:var(--serif);word-break:keep-all;margin:0;font-size:17px;line-height:1.5}.qa .by{color:var(--muted);margin:10px 0 0;font-size:12px}.front{transform-origin:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0}.book.open .front{transform:rotateY(-168deg)}.front .cover{--cw:100%;backface-visibility:hidden;width:100%;box-shadow:0 26px 60px #281e0f47,0 2px 6px #281e0f2e}.gloss{pointer-events:none;backface-visibility:hidden;background:linear-gradient(115deg,transparent 25%,#ffffff52 var(--gx),transparent 75%);mix-blend-mode:soft-light;position:absolute;inset:0}.back-face{background:var(--sheet);backface-visibility:hidden;text-align:left;padding:14% 12%;position:absolute;inset:0;transform:rotateY(180deg);box-shadow:0 22px 50px #281e0f38}.back-face b{font-family:var(--serif);margin-bottom:14px;font-size:22px;display:block}.back-face span{border-bottom:1px dashed var(--rule);word-break:keep-all;gap:10px;padding:7px 0;font-size:13px;display:flex}.back-face i{color:var(--accent);font-variant-numeric:tabular-nums;min-width:1.6em;font-style:normal}.hint{color:var(--muted);margin:18px 0 0;font-size:13px}.scroll-hint{text-align:center;letter-spacing:.06em;color:var(--muted);margin:0;font-size:12px;animation:2.4s ease-in-out infinite nudge;position:absolute;bottom:18px;left:0;right:0}@keyframes nudge{50%{transform:translateY(5px)}}.scene{height:280vh;position:relative}.stage{height:100svh;padding:72px var(--gutter)32px;grid-template-columns:minmax(260px,400px) 1fr;align-items:center;gap:48px;display:grid;position:sticky;top:0;overflow:hidden}.scene-head h2,.numbering h2,.end h2{font-family:var(--serif);word-break:keep-all;margin:6px 0 12px;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15}.scene-head p:last-child,.numbering .scene-head p:last-child{color:#3a352d;word-break:keep-all;margin:0;font-size:16px;line-height:1.7}.scene-n{letter-spacing:.14em;color:var(--accent);margin:0;font-size:12px;font-weight:600}.s2{--a:clamp(0,(var(--p,0) - .1)/.62,1)}.s2-art{perspective:1200px;place-items:center;height:100%;display:grid;position:relative}.phone{aspect-ratio:9/19;width:min(56vw,250px);transform:translateY(calc(var(--a)*46vh));opacity:calc(1 - var(--a)*1.25);background:#0f0e0c;border:10px solid #1b1915;border-radius:38px;position:absolute;box-shadow:0 30px 60px #00000040}.phone .notch{background:#1b1915;border-radius:12px;width:34%;height:18px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.sheet{transform:translateY(calc(var(--a)*-2vh))rotateX(calc(var(--a)*6deg))scale(calc(.6 + .42*var(--a)));box-shadow:0 calc(var(--a)*34px)calc(var(--a)*70px)rgba(40,30,15,calc(var(--a)*.35));position:relative}.sheet .cover{--cw:min(60vw,330px);border-radius:calc((1 - var(--a))*10px)}.sheet:after{content:"";pointer-events:none;opacity:calc(var(--a)*.9);background:linear-gradient(105deg,#ffffff2e,#0000 35%,#0000000f 100%);position:absolute;inset:0}.s3{--a:clamp(0,(var(--p,0) - .08)/.64,1);--o:calc(1 - var(--a));color:#f1ebe0;background:#1d1b18}.s3 .scene-head p:last-child{color:#cfc6b6}.s3-art{flex-direction:column;justify-content:center;align-items:center;gap:22px;height:100%;display:flex;position:relative}.plates{aspect-ratio:3/4;isolation:isolate;background:#fff;width:min(64vw,320px);position:relative;box-shadow:0 24px 60px #00000080}.plate{object-fit:cover;mix-blend-mode:multiply;width:100%;height:100%;position:absolute;inset:0}.plate.c{filter:url(#ink-c);transform:translate(calc(var(--o)*-28px),calc(var(--o)*-16px))}.plate.m{filter:url(#ink-m);transform:translate(calc(var(--o)*24px),calc(var(--o)*-8px))}.plate.y{filter:url(#ink-y);transform:translate(calc(var(--o)*-8px),calc(var(--o)*22px))}.reg{z-index:2;mix-blend-mode:multiply;border:1.5px solid;border-radius:50%;width:22px;height:22px;position:absolute;top:12px;right:12px}.reg:before,.reg:after{content:"";background:currentColor;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reg:before{width:32px;height:1.5px}.reg:after{width:1.5px;height:32px}.reg.r1{color:#00a3e0;transform:translate(calc(var(--o)*-28px),calc(var(--o)*-16px))}.reg.r2{color:#e0007a;transform:translate(calc(var(--o)*24px),calc(var(--o)*-8px))}.reg.r3{color:#e3c400;transform:translate(calc(var(--o)*-8px),calc(var(--o)*22px))}.inks{gap:10px;display:flex}.ink{color:#1d1b18;border-radius:50%;place-items:center;width:34px;height:34px;font-size:13px;font-weight:700;display:grid}.ink.c{background:#00a3e0}.ink.m{color:#fff;background:#e0007a}.ink.y{background:#e3c400}.s4{--a:clamp(0,(var(--p,0) - .06)/.56,1);--b:clamp(0,(var(--p,0) - .68)/.12,1)}.s4-art{place-items:center;height:100%;display:grid}.spread{--cw:min(40vw,250px);width:calc(var(--cw)*2);aspect-ratio:3/2;perspective:1800px;transform-style:preserve-3d;transform:translateX(calc(var(--a)*var(--cw)*-.5));position:relative}.half{width:var(--cw);height:100%;position:absolute;top:0}.half.right{left:var(--cw);background:var(--sheet);box-shadow:0 20px 50px #281e0f33}.half.right:before{content:"INTERVIEW";letter-spacing:.2em;color:var(--accent);font-size:10px;position:absolute;top:9%;left:10%}.half.right:after{content:"";opacity:.8;background:repeating-linear-gradient(#d8cfbf 0 2px,#0000 2px 12px);position:absolute;inset:20% 10% 12%}.half.left{transform-origin:100%;transform-style:preserve-3d;transform:rotateY(calc(var(--a)*180deg));left:0}.leaf-front,.leaf-back{backface-visibility:hidden;position:absolute;inset:0}.leaf-front{background:var(--sheet);flex-direction:column;gap:10px;padding:12% 10%;display:flex;box-shadow:0 20px 50px #281e0f33}.mini-head{letter-spacing:.2em;color:var(--accent);font-size:10px}.mini-q{font-family:var(--serif);word-break:keep-all;font-size:15px;font-weight:700}.mini-lines{opacity:.8;background:repeating-linear-gradient(#d8cfbf 0 2px,#0000 2px 12px);flex:1}.leaf-back{background:url(/img/hero.jpg) 50%/cover;transform:rotateY(180deg);box-shadow:0 26px 60px #281e0f47}.leaf-back:before{content:"월간 짱구";text-align:center;font-weight:900;font-size:calc(var(--cw)*.2);letter-spacing:-.04em;color:var(--accent);position:absolute;top:6%;left:0;right:0}.staple{left:calc(var(--cw) + 6px);width:4px;height:13%;transform:translateZ(2px)scaleY(var(--b));opacity:var(--b);box-shadow:0 0 0 calc((1 - var(--b))*18px)rgba(200,69,44,calc((1 - var(--b))*.25));background:linear-gradient(90deg,#6f6c66,#f2efe8 45%,#8d8a84);border-radius:2px;outline:1px solid #28241e8c;position:absolute}.staple.t{top:24%}.staple.b{top:62%}.numbering{padding:18vh var(--gutter)14vh;grid-template-columns:minmax(260px,400px) 1fr;align-items:center;gap:24px 48px;display:grid}.numbering .scene-head{grid-row:span 2}.n-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.n-label{color:var(--muted);margin-right:4px;font-size:14px}.n-btn{border:1px solid var(--ink);cursor:pointer;background:0 0;border-radius:999px;padding:8px 14px;font-weight:600}.n-btn.on{background:var(--ink);color:var(--paper)}.n-stack{grid-column:2;height:330px;position:relative}.n-copy{aspect-ratio:3/3.6;background:var(--sheet);border:1px solid var(--rule);width:min(70vw,280px);z-index:var(--i);transform:translateX(calc(-50% + (var(--i) - (var(--n) - 1)/2)*34px))translateY(calc(var(--i)*8px))rotate(calc((var(--i) - (var(--n) - 1)/2)*3deg));animation:.45s cubic-bezier(.2,.7,.2,1) both drop;animation-delay:calc(var(--i)*60ms);padding:22px;position:absolute;top:10px;left:50%;box-shadow:0 14px 34px #281e0f29}@keyframes drop{0%{opacity:0;transform:translate(-50%)translateY(-24px)}}.n-title{letter-spacing:.24em;color:var(--muted);margin:0 0 14px;font-size:11px}.n-row{border-bottom:1px dashed var(--rule);justify-content:space-between;margin:0 0 10px;padding-bottom:8px;font-size:14px;display:flex}.n-row span{color:var(--muted)}.n-row b{font-variant-numeric:tabular-nums}.n-stamp{border:3px solid var(--accent);width:84px;height:84px;color:var(--accent);font-variant-numeric:tabular-nums;opacity:0;border-radius:50%;place-items:center;font-size:20px;font-weight:800;display:grid;position:absolute;bottom:16px;right:16px;transform:rotate(-12deg)scale(2.2)}.n-stamp.on{animation:.38s cubic-bezier(.3,1.6,.5,1) forwards stamp}@keyframes stamp{0%{opacity:0;transform:rotate(-12deg)scale(2.2)}70%{opacity:1;transform:rotate(-12deg)scale(.9)}to{opacity:.92;transform:rotate(-12deg)scale(1)}}.n-foot{flex-wrap:wrap;grid-column:2;justify-content:space-between;align-items:center;gap:12px;display:flex}.n-say{font-family:var(--serif);margin:0;font-size:18px}.n-go{background:var(--accent);color:#fff;cursor:pointer;border:0;border-radius:999px;padding:12px 22px;font-weight:700}.s6{--a:clamp(0,(var(--p,0) - .5)/.34,1);background:#ebe2d1;height:320vh}.s6 .stage{grid-template-rows:none}.s6-art{flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100%;display:flex;position:relative}.pulled{aspect-ratio:3/4;height:min(30vh,230px);opacity:calc(1 - var(--a));position:relative}.pulled img{object-fit:cover;width:100%;height:100%;animation:.35s cubic-bezier(.2,.7,.2,1) pull;box-shadow:0 18px 40px #281e0f40}.pulled span{color:#fff;text-shadow:0 1px 6px #00000080;font-size:13px;font-weight:700;position:absolute;bottom:8px;left:8px}.pulled:not(.on):before{content:"책등을 눌러 보세요";color:var(--muted);text-align:center;border:1px dashed #b8ab94;place-items:center;font-size:12px;display:grid;position:absolute;inset:0}@keyframes pull{0%{opacity:0;transform:translateY(30px)}}.spines{--w:clamp(18px,5.6vw,38px);border-bottom:8px solid #b99b72;align-items:flex-end;gap:4px;padding-bottom:10px;display:flex}.spine{width:var(--w);cursor:pointer;height:min(36vh,300px);transform:translateX(calc((5.5 - var(--i))*(var(--w) + 4px)*var(--a)));opacity:calc(1 - var(--a)*1.2);background-position:50%;background-size:cover;border:0;padding:0;transition:translate .25s cubic-bezier(.2,.7,.2,1);position:relative;translate:0;box-shadow:inset -3px 0 #00000047,inset 2px 0 #ffffff40}.spine:before{content:"";background:linear-gradient(#0000 45%,#0000008c);position:absolute;inset:0}.spine span{color:#fff;writing-mode:vertical-rl;margin:0 auto;font-size:11px;font-weight:700;position:absolute;bottom:8px;left:0;right:0}.spine.on{translate:0 -22px}.yearbook{aspect-ratio:3/4;width:min(54vw,260px);color:var(--gold);pointer-events:none;opacity:var(--a);transform:translate(-50%,-50%)scale(calc(.7 + .3*var(--a)))rotate(calc((1 - var(--a))*-6deg));background:repeating-linear-gradient(45deg,#26231f 0 3px,#2b2824 3px 6px);border-left:16px solid #191714;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;top:50%;left:50%;box-shadow:0 30px 70px #1e140a66}.yb-year{font-family:var(--serif);font-size:clamp(40px,8vw,64px);font-weight:700}.yb-name{letter-spacing:.3em;font-size:15px;font-weight:700}.yb-sub{letter-spacing:.2em;opacity:.8;font-size:10px}.s6-hint{text-align:center;color:var(--muted);opacity:calc(1 - var(--a)*2);margin:0;font-size:12px;position:absolute;bottom:18px;left:0;right:0}.end{padding:18vh var(--gutter)10vh}.colophon{border-top:1px solid var(--rule);grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 0;padding-top:18px;display:grid}.colophon dt{color:var(--muted);font-size:12px}.colophon dd{word-break:keep-all;margin:4px 0 0;font-size:15px}.credit{color:var(--muted);letter-spacing:.06em;margin:28px 0 0;font-size:12px}.foot{padding:16px var(--gutter)36px;border-top:1px solid var(--rule);color:var(--muted);word-break:keep-all;font-size:11px;line-height:1.7}.foot p{margin:0}@media (max-width:760px){.hero{grid-template-columns:1fr;gap:28px;min-height:auto;padding-top:28px;padding-bottom:72px}.stage{grid-template-rows:auto 1fr;grid-template-columns:1fr;gap:8px;padding-top:64px}.scene-head h2{margin-bottom:6px;font-size:26px}.scene-head p:last-child{font-size:14px;line-height:1.6}.numbering{grid-template-columns:1fr}.numbering .scene-head{grid-row:auto}.n-stack,.n-foot{grid-column:1}.n-stack{height:320px}.colophon{grid-template-columns:1fr;gap:10px}}@media (prefers-reduced-motion:reduce){.scene{height:auto}.stage{height:auto;min-height:100svh;position:relative}.book,.front,.spine{transition:none}.scroll-hint{animation:none}}.nb{white-space:nowrap}