@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600&display=swap";:root{font-family:DM Sans,Noto Sans KR,sans-serif;color:#273c31;background:#f5f2e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.19;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' opacity='.18' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #be663d;outline-offset:6px}header{height:100px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9dacf}.brand{font-weight:700;font-size:25px;letter-spacing:-1px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px}.brand-icon{font-family:Georgia;font-size:43px;line-height:1}.brand-dot{font-size:11px;align-self:flex-start;margin-top:8px}.edition{font-size:10px;letter-spacing:2px;margin-left:-60px}.about-link{background:none;border:0;font-size:12px}.about-link span{margin-left:16px;font-size:18px}.intro{text-align:center;padding-top:42px;position:relative;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2.8px;font-weight:600}.eyebrow>span{display:inline-block;background:#ac684c;width:6px;height:6px;border-radius:50%;margin-right:8px;vertical-align:1px}h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(42px,4.5vw,69px);line-height:1.05;letter-spacing:-2.8px;font-weight:400;margin:19px 0 17px}h1 em{font-weight:400;color:#b86643}.intro p{font-size:12px;color:#7c8276;line-height:1.9;margin:0}.book-stage{position:relative;height:470px;margin-top:-9px}#scene{position:absolute;inset:0;cursor:grab;touch-action:pan-y}#scene:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}.stage-note{position:absolute;top:130px;left:calc(50% + 285px);font-family:Georgia,serif;font-style:italic;font-size:19px;line-height:1.45;transform:rotate(-8deg);color:#687865;pointer-events:none}.stage-note span{font-size:14px}.stage-note svg{display:block;width:70px;height:60px;transform:rotate(22deg);margin:9px 0 0 -25px}.stage-note path{fill:none;stroke:#8d9983;stroke-width:1.2;stroke-linecap:round}.open-button{position:absolute;bottom:37px;left:50%;transform:translate(-50%);border:0;border-radius:30px;padding:17px 25px;background:#294b3b;color:#faf8ef;font-size:12px;box-shadow:0 5px 12px #294b3b12;transition:background .2s,translate .2s}.open-button:hover{background:#b86643;translate:0 -3px}.open-button span{margin-left:30px}.interaction-hint{position:absolute;bottom:0;width:100%;text-align:center;font-size:8px;letter-spacing:2px;color:#92978b;pointer-events:none}.interaction-hint span{margin:0 12px}footer{margin:15px 4.5% 0;border-top:1px solid #d9dacf;min-height:100px;display:flex;align-items:center;justify-content:space-between}.dedication{display:flex;gap:17px;align-items:center}.tiny-paw{font-size:35px;transform:rotate(-25deg)}.dedication p{font-size:10px;line-height:1.8;color:#6d776a}.dedication p span{color:#91968c}.footer-center{font-size:8px;letter-spacing:2px;color:#929789;margin-left:-70px}#sound{border:0;background:none;font-size:9px;letter-spacing:1.2px}.sound-bars{font-size:20px;margin-right:7px;letter-spacing:2px}.reader-controls{position:absolute;bottom:36px;left:50%;transform:translate(-50%);align-items:center;gap:20px}.reader-controls:not([hidden]){display:flex}.reader-controls button{border:1px solid #b8c0b1;border-radius:50%;width:39px;height:39px;background:#f5f2e9}.reader-controls button:disabled{opacity:.3;cursor:default}#page-number{font-size:10px;letter-spacing:2px;white-space:nowrap}#close-book{font-size:10px;position:absolute;left:calc(100% + 25px);width:70px;border:0;border-radius:0;background:none}body.reading .stage-note{display:none}dialog{width:min(480px,90vw);background:#f5f2e9;color:#273c31;border:1px solid #d4d8cb;padding:52px 38px;border-radius:6px;box-shadow:0 20px 90px #112b3420}dialog::backdrop{background:#1c302766;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}dialog h2{font-family:Georgia,Noto Sans KR,serif;font-size:27px;margin:26px 0}dialog p{font-size:13px;line-height:2;color:#697361}#dismiss{position:absolute;right:18px;top:13px;background:none;border:0;font-size:28px}.dialog-note{font-size:11px;margin:28px 0;color:#9a7960}.dialog-read{background:#294b3b;color:#fff;border:0;padding:14px 18px;border-radius:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-height:850px){.intro{padding-top:55px}.book-stage{height:520px}footer{margin-top:25px}}@media(max-width:700px){header{height:78px;margin:0 6%}.brand{font-size:22px}.edition{display:none}.about-link{font-size:10px}.intro{padding-top:40px}h1{font-size:45px;letter-spacing:-2px}.intro p{font-size:11px}.eyebrow{font-size:8px;letter-spacing:2px}.book-stage{height:430px;margin-top:0}.stage-note{display:none}footer{margin:0 6%;min-height:90px}.footer-center{display:none}.dedication{gap:8px}.dedication p{font-size:9px}.tiny-paw{font-size:28px}#sound{font-size:8px}.open-button{bottom:43px}.interaction-hint{bottom:7px}#close-book{left:calc(100% + 10px);width:58px}.reader-controls{gap:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(min-width:701px)and (max-height:800px){header{height:76px}.intro{padding-top:20px}h1{font-size:50px;margin:12px 0}.intro p{font-size:11px}.book-stage{height:350px}footer{min-height:76px;margin-top:10px}.stage-note{top:90px}.open-button{bottom:29px}.interaction-hint{bottom:-5px}}body.reading .intro{padding-top:20px}body.reading h1{font-size:35px;letter-spacing:-1px;margin:12px 0}body.reading h1 br,body.reading .intro p{display:none}body.reading .book-stage{height:500px}body.reading .interaction-hint{font-size:10px;letter-spacing:1px}@media(max-width:700px){body.reading h1{font-size:27px}body.reading h1 br{display:block}body.reading .book-stage{height:460px}}
