.story{--screens:11;--pageW:min(86vw, 400px);--pageH:calc(var(--pageW) * 1.42);--paper:#e4d5b4;--ink:#1f160c;--ink-dim:#3a2c1c;--gold:#c9a44f;--deep:#050d0a;height:calc(var(--screens) * var(--story-scale,1) * 100vh);background:var(--deep);color:#f3f0e8;font-family:var(--font-noto-serif), "Noto Serif KR", serif;position:relative}@supports (height:100svh) and (height:100lvh){.story{height:calc(var(--screens) * var(--story-scale,1) * 100lvh);--pageW:min(86vw, 400px, calc((100svh - 160px) / 1.42))}}@media (min-width:1024px) and (orientation:landscape){.story{--screens:9;--pageW:clamp(300px, 29vw, 410px);--pageH:min(calc(var(--pageW) * 1.36), calc(100vh - 150px))}@supports (height:100svh){.story{--pageH:min(calc(var(--pageW) * 1.36), calc(100svh - 150px))}}}.story-stage{background:var(--deep) var(--lqip-p) center / cover no-repeat;height:100lvh;position:sticky;top:0;overflow:hidden}@supports not (height:100lvh){.story-stage,.story-scene{height:100vh}.story-title{padding-bottom:52px}}@media (orientation:landscape){.story-stage{background-image:var(--lqip-l)}}.story-hero{z-index:1;transform:perspective(900px) translate3d(calc(var(--hero-x,0) * 1px), calc(var(--hero-y,0) * 1px), 0) scale(var(--hero-s,1)) rotateX(calc(var(--hero-rx,0) * 1deg));opacity:var(--hero-o,1);will-change:transform;position:absolute;inset:0}.story-hero-in{opacity:0;transition:opacity 1.1s ease-out,transform 1.6s cubic-bezier(.22,.61,.36,1);position:absolute;inset:0;transform:scale(1.06)}.story-stage.is-in .story-hero-in{opacity:1;transform:none}.story-stage.is-in-still .story-hero-in{transition-property:opacity;transform:none}.story-hero picture,.story-hero img,.story-under picture,.story-under img{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.story-mist{background:radial-gradient(60% 34% at 28% 72%,#d6ece21c,#0000 70%),radial-gradient(48% 30% at 72% 62%,#d6ece212,#0000 70%);animation:16s ease-in-out infinite alternate storyMist;position:absolute;inset:-12%}.story-hero[data-active="0"] .story-mist{animation-play-state:paused}.story-hero[data-active="0"]{visibility:hidden}@keyframes storyMist{0%{transform:translate(-3%)}to{transform:translate(3%)}}.story-shade{background:linear-gradient(#0000 45%,#050d0a40 68%,#050d0ab8 100%),linear-gradient(#050d0a80 0%,#0000 18%);position:absolute;inset:0}.story-canvas{z-index:2;width:100%;height:100%;opacity:var(--canvas-o,1);pointer-events:none;position:absolute;inset:0}.story-water{z-index:3;height:200%;transform:translateY(calc(var(--water-y,100) * 1%));will-change:transform;pointer-events:none;background:linear-gradient(#7fb2a800 0%,#7fb2a88c 7%,#14544aeb 16%,#0d3b32 26%,#06231f 100%);position:absolute;top:0;left:0;right:0}.story-water[data-active="0"]{visibility:hidden}.story-under{z-index:4;opacity:var(--under-o,0);pointer-events:none;position:absolute;inset:0}.story-under picture{transform:scale(var(--under-s,1.5)) translateY(calc(var(--under-y,-8) * 1%));transform-origin:50% 30%;will-change:transform}.story-caustics{background:radial-gradient(28% 18% at 30% 22%,#d2f5e829,#0000 70%),radial-gradient(22% 14% at 68% 34%,#d2f5e81f,#0000 70%),radial-gradient(30% 16% at 50% 70%,#d2f5e814,#0000 70%);animation:9s ease-in-out infinite alternate storyCaustics;position:absolute;inset:-8%}.story-under[data-active="0"] .story-caustics{animation-play-state:paused}@keyframes storyCaustics{0%{transform:translate(-3%,-2%)scale(1)}to{transform:translate(3%,2%)scale(1.08)}}.story-bubbles span,.story-burst span{bottom:-24px;left:var(--x);width:var(--d);height:var(--d);will-change:transform;background:radial-gradient(circle at 35% 35%,#ffffff73,#ffffff0a 62%);border:1px solid #ffffff59;border-radius:50%;position:absolute}.story-bubbles span{animation:storyBubble var(--t) linear infinite;animation-delay:var(--delay)}.story-under[data-active="0"] .story-bubbles span{animation-play-state:paused}@keyframes storyBubble{0%{opacity:0;transform:translate(0)}8%{opacity:.9}50%{transform:translate(14px,-55vh)}to{opacity:0;transform:translate(-8px,-112vh)}}.story-burst span{opacity:0;animation:none}.story-under[data-burst="1"] .story-burst span{animation:storyBurst var(--t) ease-out both;animation-delay:var(--delay)}@keyframes storyBurst{0%{opacity:0;transform:translateY(10vh)scale(.6)}12%{opacity:.95}to{transform:translate(calc(var(--d) * 2), -118vh) scale(1.15);opacity:0}}.story-scene{z-index:5;perspective:1400px;width:100%;height:100svh;opacity:var(--scene-o,0);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.story-book{width:calc(var(--pageW) * 2);height:var(--pageH);transform-style:preserve-3d;transform:translateX(calc(var(--pageW) * var(--book-x,-.5))) translateY(calc(var(--book-y,45) * 1%)) scale(var(--book-s,.55));will-change:transform;flex:none;position:relative}.story-glow{width:calc(var(--pageW) * 2.6);height:calc(var(--pageH) * 1.9);max-width:100vw;max-height:100vh;opacity:var(--glow-o,0);pointer-events:none;background:radial-gradient(closest-side,#f3be1f38,#f3be1f0f 45%,#0000 72%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateZ(-10px)}.story-reflection{width:var(--pageW);height:var(--pageH);transform-origin:top;background:#3a2410 var(--tex-cover) center / cover no-repeat;opacity:var(--refl-o,0);position:absolute;top:104%;left:50%;transform:scaleY(-1)translateZ(-2px);-webkit-mask-image:linear-gradient(#0000 25%,#000000b3);mask-image:linear-gradient(#0000 25%,#000000b3)}.story-spine{background:linear-gradient(90deg,#2a1608,#5a3414 45%,#2e1a0a);border-radius:4px;width:22px;height:calc(100% + 6px);position:absolute;top:-3px;left:calc(50% - 11px);transform:translateZ(-8px)}.story-block{width:var(--pageW);height:var(--pageH);background:#d9b877;position:absolute;top:0;left:50%;transform:translateZ(-4px);box-shadow:2px 2px #cfab6a,4px 4px #c29c5c,6px 7px #b38d4f,8px 9px #a27d43,10px 40px 60px -14px #000c}.story-page--base,.story-leaf,.story-cover{width:var(--pageW);height:var(--pageH);position:absolute;top:0;left:50%}.story-leaf,.story-cover{transform-origin:0;transform-style:preserve-3d;will-change:transform}.story-leaf{transform:rotateY(calc(var(--leaf-r,0) * 1deg)) translateZ(var(--leaf-z,2px))}.story-cover{transform:rotateY(calc(var(--cover-r,0) * 1deg)) translateZ(var(--cover-z,16px))}.story-face{backface-visibility:hidden;position:absolute;inset:0;overflow:hidden;transform:rotateY(0)translateZ(0)}.story-face--back{transform:rotateY(180deg)translateZ(0)}.story-page--base{overflow:hidden}.story-sheen{pointer-events:none;will-change:transform;background:radial-gradient(35% 24% at 40% 38%,#e1faf033,#0000 70%);animation:7s ease-in-out infinite alternate storySheen;position:absolute;inset:-10%}.story-scene[data-active="0"] .story-sheen{animation-play-state:paused}.story-scene[data-active="0"] .story-glow{visibility:hidden}@keyframes storySheen{0%{transform:translate(-8%,-6%)}to{transform:translate(8%,8%)}}.story-page{background-color:var(--paper);background-image:linear-gradient(#14463c0d, #14463c0d), var(--tex-paper);color:var(--ink);text-align:center;padding:calc(var(--pageW) * .08) calc(var(--pageW) * .09);font-weight:600;font-size:clamp(13px, calc(var(--pageW) * .056), 19.5px);letter-spacing:-.01em;background-position:50%;background-size:cover;flex-direction:column;justify-content:center;gap:.85em;line-height:1.85;display:flex;box-shadow:inset 0 0 40px #50340e4d,inset 14px 0 26px -18px #3c280a80}.story-page:not(.story-page--blank):before{content:"";pointer-events:none;background:radial-gradient(closest-side,#fff6e08c,#fff6e000);position:absolute;inset:10% 5%}.story-page--blank{background-image:linear-gradient(#14463c14, #14463c14), var(--tex-paper-left);box-shadow:inset 0 0 40px #50340e4d,inset -14px 0 26px -18px #3c280a80}@media (min-width:1024px) and (orientation:landscape){.story-page{font-size:clamp(14px, calc(var(--pageW) * .054), 20px);padding:calc(var(--pageW) * .11) calc(var(--pageW) * .1);line-height:1.9}}.story-page{container-type:inline-size}.story-line{white-space:nowrap;font-size:min(1em, calc(100cqi / var(--line-em,1)));color:var(--ink-dim);opacity:var(--v,0);transform:translateY(calc((1 - var(--v,0)) * 10px));will-change:opacity, transform;margin:0;transition:color .4s}.story-line.is-current{color:var(--ink)}.story-line--motto{text-align:center;font-weight:700;font-size:min(1.08em, calc(100cqi / (var(--line-em,1) * 1.03)));letter-spacing:.02em}.story-face--cover{background:linear-gradient(#0a282229, #0a282229), #6e4a1e var(--tex-cover) center / cover no-repeat;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;box-shadow:inset 0 0 0 1px #00000059,inset 0 0 40px #00000059,inset 2px 0 6px #00000059}.story-cover-title{flex-direction:column;align-items:center;gap:12px;margin:0;display:flex}.story-cover-title>span:first-child{font-weight:700;font-size:clamp(22px, calc(var(--pageW) * .11), 38px);letter-spacing:.22em;text-indent:.22em;color:#3a2208;text-shadow:0 1px #ffe6aa59,0 -1px #00000059;opacity:.9;line-height:1}.story-cover-mark{font-family:var(--font-cormorant), "Cormorant Garamond", Georgia, serif;letter-spacing:.32em;text-indent:.32em;color:#3a2208bf;font-size:13px;font-weight:600}.story-cover-rule{background:linear-gradient(90deg,#0000,#3a220899,#0000);width:44px;height:1px}@media (min-width:1024px) and (orientation:landscape){.story-cover-title>span:first-child{font-size:clamp(22px, calc(var(--pageW) * .11), 40px)}}.story-face--endpaper{background:linear-gradient(#140a0273, #140a0273), #4a2e10 var(--tex-cover) center / cover no-repeat;box-shadow:inset 0 0 50px #00000080,inset -12px 0 26px -16px #0009}.story-iris{z-index:6;visibility:hidden;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.story-stage[data-light="1"] .story-iris{visibility:visible}.story-title{z-index:7;opacity:var(--title-o,1);transform:translateY(calc(var(--title-y,0) * 1px));pointer-events:none;padding:0 24px calc(100lvh - 100svh + 52px);position:absolute;bottom:0;left:0;right:0}.story-title-in{opacity:0;transition:opacity .9s ease-out .35s,transform .9s ease-out .35s;transform:translateY(14px)}.story-stage.is-in .story-title-in{opacity:1;transform:none}.story-eyebrow{font-family:var(--font-cormorant), "Cormorant Garamond", Georgia, serif;letter-spacing:.34em;text-transform:uppercase;color:#f3be1f;margin:0 0 12px;font-size:13px;font-weight:600}.story-title h1{color:#fbfaf7;text-shadow:0 2px 24px #00000073;margin:0;font-size:clamp(28px,8vw,36px);font-weight:600;line-height:1.4}.story-title h1 span{display:block}.story-hint{font-family:var(--font-noto-sans), sans-serif;letter-spacing:.02em;color:#fbfaf7b3;align-items:center;gap:8px;margin-top:26px;font-size:12px;display:inline-flex}.story-hint svg{animation:1.6s ease-in-out infinite storyHint}.story-title[data-active="0"] .story-hint svg{animation-play-state:paused}@keyframes storyHint{0%,to{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}@media (min-width:1024px){.story-title{padding:0 6vw 9vh}.story-title h1{font-size:46px;line-height:1.35}}.story-bar{z-index:8;font-family:var(--font-noto-sans), sans-serif;color:#fbfaf7;justify-content:space-between;align-items:center;padding:12px 14px 12px 18px;transition:color .4s;display:flex;position:absolute;top:0;left:0;right:0}.story-bar img{filter:invert();width:auto;height:20px;transition:filter .4s;display:block}.story-bar-actions{align-items:center;gap:4px;display:flex}.story-bar button,.story-bar a.story-close{height:36px;color:inherit;cursor:pointer;opacity:.85;background:0 0;border:0;justify-content:center;align-items:center;padding:0 10px;font-size:12.5px;font-weight:500;display:inline-flex}.story-bar a.story-close{width:36px;padding:0}@media (min-width:1024px){.story-bar{padding:18px 28px 18px 40px}.story-bar img{height:22px}}.story-end{z-index:1;background:radial-gradient(60% 40% at 50% 0%, #143c3459, transparent 70%), var(--deep);margin-top:-1px;position:relative}.story-snow-wrap{z-index:1;pointer-events:none;position:absolute;inset:0}.story-snow{opacity:.9;width:100%;height:100lvh;display:block;position:sticky;top:0}@supports not (height:100lvh){.story-snow{height:100vh}}.story-end>.relative{z-index:2}.story-return{z-index:2;justify-content:center;padding:8px 24px 0;display:flex;position:relative}.story-return-link{color:#fbfaf7;-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;gap:10px;padding:10px 6px;text-decoration:none;display:inline-flex;position:relative}.story-return-text{font-family:var(--font-noto-serif), "Noto Serif KR", serif;letter-spacing:.14em;white-space:nowrap;text-shadow:0 -1px #0000008c,0 1px #ffffff1f,0 0 14px #fff1c41f;font-size:19px;font-weight:500}@media (min-width:640px){.story-return-text{font-size:22px}}.story-return-ch{white-space:pre;display:inline-block}.story-return-line{transform-origin:50%;background:linear-gradient(90deg,#0000,#fbfaf78c 20% 80%,#0000);width:100%;height:1px;display:block}.story-return-link:hover .story-return-text,.story-return-link:focus-visible .story-return-text{text-shadow:0 -1px #0000008c,0 1px #ffffff1f,0 0 18px #fff1c473}.story-return-link:focus-visible{outline-offset:4px;outline:1px solid #c9a44fcc}.story-return-link[data-armed] .story-return-ch{opacity:0}.story-return-link[data-armed] .story-return-line{transform:scaleX(0)}.story-return-link[data-engraved] .story-return-ch{animation:storyEngrave 1.1s cubic-bezier(.22, .7, .2, 1) calc(var(--i) * .11s) both}.story-return-link[data-engraved] .story-return-line{animation:.9s cubic-bezier(.22,.7,.2,1) 1.35s both storyEngraveLine}@keyframes storyEngrave{0%{opacity:0;filter:blur(7px);text-shadow:0 0 #fff1c400;transform:translateY(3px)scale(1.12)}35%{opacity:1;filter:blur();color:#fff6dc;text-shadow:0 0 16px #ffe296f2,0 0 4px #fff4d6e6;transform:translateY(0)scale(1)}to{opacity:1;filter:blur();color:#fbfaf7;text-shadow:0 -1px #0000008c,0 1px #ffffff1f,0 0 14px #fff1c41f;transform:none}}@keyframes storyEngraveLine{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.story-town{z-index:0;width:100%;height:clamp(220px,26vw,400px);margin-top:8px;margin-bottom:-2px;display:block;position:relative}@media (scripting:none),(prefers-reduced-motion:reduce),(orientation:landscape) and (max-width:1023px) and (max-height:599px){.story{height:auto}.story-stage{background-image:none;height:auto;position:relative;overflow:visible}.story-hero{aspect-ratio:16/9;opacity:1;will-change:auto;position:relative;transform:none}@media (orientation:portrait){.story-hero{aspect-ratio:9/16}}.story-hero-in{opacity:1;transition:none;transform:none}.story-mist,.story-canvas,.story-water,.story-under,.story-iris,.story-glow,.story-reflection,.story-spine,.story-block,.story-cover,.story-page--blank,.story-sheen,.story-hint,.story-bar button{display:none}.story-title{opacity:1;padding:0 20px 34px;position:absolute;top:56.25vw;bottom:auto;transform:translateY(-100%)}@media (orientation:portrait){.story-title{top:177.778vw}}.story-title-in{opacity:1;transition:none;transform:none}.story-scene{perspective:none;opacity:1;background:linear-gradient(#0d3b32,#06231f 60%,#050d0a);height:auto;padding:40px 16px 56px;display:block;position:relative}.story-book{transform-style:flat;will-change:auto;width:min(100%,520px);height:auto;margin:0 auto;transform:none}.story-page--base,.story-leaf{transform-style:flat;will-change:auto;width:auto;height:auto;position:relative;top:auto;left:auto;transform:none}.story-face{backface-visibility:visible;position:relative;inset:auto;transform:none}.story-page{justify-content:flex-start;margin-bottom:14px;padding:26px 24px;box-shadow:0 12px 30px -14px #0009}.story-line{opacity:1;color:var(--ink);transform:none}.story-bar{position:absolute;top:0}}