@font-face{font-family:localserif;src:local('Noto Serif KR'),local('Batang'),local('AppleMyungjo')}
:root{--paper:#f1e5cb;--ink:#302e24;--muted:#77715f;--red:#a7442f;--green:#294e43;--line:#473d2924;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#287d83;color:var(--ink)}body{font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff0bc;outline-offset:4px}button:disabled{opacity:.45}a{color:inherit}.layout{position:relative;width:100%;height:100svh;height:100dvh;isolation:isolate}.header{position:absolute;inset:0 0 auto;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) 24px 24px;gap:12px;background:linear-gradient(#142a2b90,#142a2b35 65%,transparent);pointer-events:none;color:#fff2d4}.header>*{pointer-events:auto}.wordmark{justify-self:start;display:flex;align-items:center;gap:9px;text-decoration:none;min-height:44px;padding:0 15px;background:#173d345e;border:1px solid #fff4d438;border-radius:28px;backdrop-filter:blur(8px)}.wordmark>span:not(.return-arrow){font:600 20px localserif,serif;letter-spacing:-.07em}.return-arrow{font-size:15px;opacity:.8}.chapter-title{margin:0;align-self:center;font:600 28px/1.3 localserif,serif;letter-spacing:-.07em;color:#fff2d4;text-shadow:0 2px 8px #17302bc0}.tools{justify-self:end;display:flex;gap:7px}.icon-button{width:44px;height:44px;padding:10px;border:1px solid #fff4d438;background:#173d345e;border-radius:50%;display:grid;place-items:center;color:#fff2d4;backdrop-filter:blur(8px)}.icon-button:hover,.wordmark:hover{background:#183f34b0}.icon-button svg{width:22px;height:22px}.main,.world-wrap,.world,.landscape-picture,.scene-layer{position:absolute;inset:0;width:100%;height:100%}.world{isolation:isolate;overflow:hidden;container-type:inline-size}.landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:500;color:var(--muted);margin:0 0 22px}h2{font:600 32px/1.3 localserif,serif;letter-spacing:-.05em;margin:0}
.scene{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform:translate(-50%,-75%);padding:0;border:0;background:none;z-index:var(--z,3);overflow:visible;display:flex;align-items:flex-end;justify-content:center}.scene:before{content:'';position:absolute;inset:5% 8% 12%;border-radius:50%;background:#fff2aa00;transition:background .25s,box-shadow .25s}.scene:hover:before,.scene:focus-visible:before{background:#fff2aa25;box-shadow:0 0 18px #ffe9a540}.scene:focus-visible{outline-offset:0;border-radius:40%}.scene-art{position:absolute;inset:0 0 15%;transform-origin:50% 90%;animation:idle var(--period,6s) ease-in-out infinite;animation-delay:var(--delay,0s);transition:filter .2s}.scene:hover .scene-art,.scene:focus-visible .scene-art{filter:drop-shadow(0 0 3px #fff4bb)}.sprite{position:absolute;object-fit:contain;max-width:100%;width:100%;height:100%;bottom:0;left:0;user-select:none;pointer-events:none;filter:drop-shadow(0 2px 1px #493c2b38);transform-origin:50% 90%}.scene-tag{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:clamp(8px,2.3cqw,11px);font-weight:650;color:#382e20;line-height:1.5;background:#fff2d5ed;border:1px solid #5c472035;box-shadow:0 1px 3px #342c2220;border-radius:2px;padding:2px 5px;z-index:8;transition:background .2s,color .2s}.scene-tag small{font:600 .8em Georgia,serif;color:#9e5036}.scene:hover .scene-tag,.scene:focus-visible .scene-tag{background:#8d3e2b;color:#fff2d5}.scene:hover .scene-tag small{color:#edd9ac}.comic{position:absolute;left:52%;top:0;transform:rotate(-8deg);font:700 clamp(10px,3cqw,16px) localserif,serif;color:#8d3524;text-shadow:1px 1px #fff4d1,-1px -1px #fff4d1,1px -1px #fff4d1,-1px 1px #fff4d1;white-space:nowrap;opacity:0;animation:comic var(--comic-period,15s) infinite;animation-delay:var(--delay,0s);pointer-events:none;z-index:10}.scene:hover .comic{opacity:1;animation:none}.scene[data-id="01"] .scene-art{animation-name:boat}.scene[data-id="02"] .cow{width:69%;left:31%}.scene[data-id="02"] .puller{width:45%;left:0;bottom:0;height:85%}.scene[data-id="02"] .rope{position:absolute;left:27%;top:55%;width:35%;height:1px;background:#795732;transform:rotate(9deg);z-index:-1}.scene[data-id="03"] .sprite{animation:thresh 8s infinite;animation-delay:-3s}.scene[data-id="03"] .sprite.alt{animation:thresh-alt 8s infinite;animation-delay:-3s}.sprite.alt{opacity:0}.scene[data-id="04"] .sprite{animation:thresh 11s infinite;animation-delay:-7s}.scene[data-id="04"] .sprite.alt{animation:thresh-alt 11s infinite;animation-delay:-7s}.scene[data-id="05"] .boat{height:36%;bottom:0;z-index:3}.scene[data-id="05"] .fisher{height:83%;width:54%;left:27%;bottom:16%;z-index:2}.scene[data-id="05"] .friend{height:52%;width:36%;left:2%;bottom:20%;z-index:1}.scene[data-id="05"] .friend2{height:48%;width:33%;left:63%;bottom:20%;z-index:1}.fishing-rod{position:absolute;left:57%;top:17%;height:73%;width:40%;overflow:visible;z-index:4;pointer-events:none}.scene[data-id="06"] .boat{height:32%;bottom:0;z-index:3}.scene[data-id="06"] .yangsik{height:92%;width:81%;left:12%;bottom:12%;z-index:2}.scene[data-id="07"] .rock{height:40%;bottom:0;z-index:0}.scene[data-id="07"] .haeu{height:96%;width:85%;left:8%;bottom:5%;z-index:2}.scene[data-id="07"] .seaweed{height:21%;width:40%;left:0;bottom:12%;z-index:3}.scene[data-id="08"] .scene-art{animation:swimmer 9s ease-in-out infinite}.scene[data-id="09"] .namu{height:100%;width:68%;left:0;z-index:3}.scene[data-id="09"] .stump{height:40%;width:34%;left:50%;bottom:1%;z-index:2}.scene[data-id="09"] .son{height:38%;width:43%;left:62%;bottom:3%;z-index:1}.scene[data-id="10"] .scene-art{animation:walk 4s ease-in-out infinite;animation-delay:-2s}.scene[data-id="10"] .cargo{position:absolute;left:4%;top:1%;width:42%;height:28%;display:flex;align-items:flex-end;gap:0;transform:rotate(-12deg);z-index:2}.cargo img{object-fit:contain;width:50%;height:100%}.scene[data-id="10"] .sprite{z-index:3}
@keyframes idle{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-1.5%)}}@keyframes boat{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2%)}}@keyframes walk{0%,100%{transform:rotate(-3deg) translateY(0)}25%{transform:rotate(1deg) translateY(-2%)}50%{transform:rotate(3deg)}75%{transform:rotate(-1deg) translateY(-2%)}}@keyframes swimmer{0%,60%,100%{transform:translateY(0) rotate(-2deg)}68%{transform:translateY(20%) scale(.8);opacity:.5}78%{transform:translateY(0) rotate(3deg);opacity:1}}@keyframes thresh{0%,64%,100%{opacity:1}65%,88%{opacity:0}}@keyframes thresh-alt{0%,64%,100%{opacity:0}65%,88%{opacity:1}}@keyframes comic{0%,83%,100%{opacity:0;translate:0 3px}85%,95%{opacity:1;translate:0 0}}.still *,.still *:before,.still *:after{animation-play-state:paused!important}.still .comic{opacity:0}.still .sprite.alt{opacity:0;animation:none}.still .sprite:not(.alt){opacity:1;animation:none}
dialog{padding:0;border:0;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#142b29a8;backdrop-filter:blur(5px)}.memory-dialog{width:min(660px,calc(100% - 28px));max-height:calc(100svh - 30px);border-radius:8px;overflow:auto;box-shadow:0 25px 100px #13272050}.memory-shell{position:relative}.close-button{position:absolute;top:12px;right:12px;z-index:10;border:1px solid #46392330;border-radius:50%;width:44px;height:44px;background:#f7ecd7e8;font:300 28px/1 system-ui}.close-button:hover{background:#fff5e1}.memory-picture{height:280px;position:relative;overflow:hidden;background:#bfceaa}.memory-picture:after{content:'';position:absolute;inset:0;box-shadow:inset 0 -35px 30px -20px var(--paper);pointer-events:none}.memory-picture .detail-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.memory-picture .detail-art{position:absolute;left:18%;right:18%;top:8%;bottom:0}.memory-picture .scene-art{animation:idle 5s infinite}.memory-picture .scene-tag,.memory-picture .comic{display:none}.memory-picture .scene{position:absolute;left:50%!important;top:72%!important;width:62%!important;height:95%!important;transform:translate(-50%,-65%);pointer-events:none}.memory-copy{padding:25px 32px 26px}.memory-copy .eyebrow{margin:0 0 10px;font-size:10px;color:var(--red)}h2{font:600 32px/1.3 localserif,serif;letter-spacing:-.05em;margin:0}.memory-line{font:500 17px/1.6 localserif,serif;margin:11px 0 7px}.memory-description{font-size:12px;line-height:1.85;color:var(--muted);margin:0 0 23px}.memory-actions{display:flex;gap:10px}.play-game,.listen{border-radius:3px;padding:13px 18px;font-size:13px;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:25px}.play-game{background:var(--green);border:1px solid var(--green);color:#fff0cf;flex:1}.play-game:hover{background:#183e34}.listen{background:transparent;border:1px solid #6c62423b}.audio-status{font-size:11px;color:var(--red);margin-top:10px}.audio-status:empty{display:none}.song-player{display:flex;align-items:center;gap:12px;margin-top:16px}.song-player[hidden]{display:none}.song-player input{width:100%;accent-color:var(--green)}.song-player span{white-space:nowrap;font-size:10px;color:var(--muted)}.list-dialog{width:min(480px,calc(100% - 28px));max-height:calc(100svh - 40px);padding:30px 25px;border-radius:7px}.list-dialog .eyebrow{margin:3px 0 13px}.list-dialog h2{margin-bottom:22px}.song-list-items{display:grid}.list-item{display:flex;align-items:center;gap:15px;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:11px 0;text-align:left;min-height:55px}.list-item:hover{background:#69562a0a}.list-item .num{font:12px Georgia,serif;color:var(--red);width:24px}.list-item img{width:40px;height:40px;object-fit:contain}.list-item .name{font-size:14px;flex:1}.list-item .arrow{color:var(--muted)}.game-dialog{width:100%;max-width:none;height:100svh;max-height:none;margin:0;background:#102a28;overflow:hidden}.game-dialog[open]{display:flex;flex-direction:column}.game-nav{height:48px;min-height:48px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);padding:0 12px;font-size:11px}.game-nav button{border:0;background:transparent;min-width:48px;min-height:44px}.game-nav button:first-child{padding:0 12px}.game-nav span{font-size:12px;font-weight:600}.game-nav button:last-child{font-size:25px}#game-frame{border:0;flex:1;width:100%;min-height:0;background:#132e2b}

/* Ten scene anchors follow the separately composed mobile and desktop paintings. */
.scene[data-id="02"] .puller{width:49%;left:-7%;bottom:5%;height:89%}.scene[data-id="02"] .cow{width:66%;left:34%}
.scene[data-id="10"] .cargo{left:-2%;top:13%;width:45%;height:39%;display:block;z-index:4;transform:rotate(-12deg)}.cargo img{position:absolute;width:90%;height:45%;left:0;bottom:0}.cargo img:nth-child(2){bottom:28%;left:6%;height:65%;width:92%}.cargo img:nth-child(3){left:44%;bottom:2%;width:48%;height:38%}
@media(min-aspect-ratio:1/1){.scene-layer>.scene{left:var(--dx);top:var(--dy);width:var(--dw);height:var(--dh)}.scene-tag{font-size:12px;padding:2px 7px}.comic{font-size:18px}}
@media(max-aspect-ratio:1/1){.header{padding:calc(10px + env(safe-area-inset-top,0px)) 12px 22px;gap:6px}.wordmark{min-height:42px;padding:0 12px;gap:6px}.wordmark>span:not(.return-arrow){font-size:18px}.return-arrow{font-size:13px}.chapter-title{font-size:25px}.tools{gap:5px}.icon-button{width:42px;height:42px}.scene-tag{font-size:11px;padding:1px 5px}.comic{font-size:13px}.memory-picture{height:230px}.memory-copy{padding:20px 23px 23px}.memory-copy h2{font-size:29px}.memory-line{font-size:16px}.listen{padding:12px 14px;gap:12px}.play-game{padding:12px 16px}}
.song-player input{min-height:36px;touch-action:pan-y}
/* Resting son is one complete illustration, rather than a sprite-sheet cell. */
.scene[data-id="09"] .son{height:46%;width:47%;left:58%;bottom:3%}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.sprite.alt{display:none}.comic{display:none}}
@media(max-aspect-ratio:1/1) and (max-height:650px){.scene-layer>.scene[data-id="09"]{top:19%}}

/* Chapter entrance: the title belongs to the landscape, every scene remains the entrance. */
.chapter-heading{text-align:center;align-self:start;padding-top:2px}.chapter-heading p{margin:0 0 5px;font:10px/1.4 localserif,serif;letter-spacing:.1em;color:#fff2d4cc}.chapter-heading .chapter-title{font-size:34px;font-weight:500;letter-spacing:.04em}
.header{padding-bottom:32px;background:linear-gradient(#112e37ba,#142a2b55 58%,transparent)}
.list-open{width:auto;border-radius:24px;display:flex;gap:7px;padding:10px 14px}.list-open span{font-size:12px;white-space:nowrap}.list-open svg{width:19px}
.chapter-invitation{position:absolute;z-index:8;top:102px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap;color:#fff4d8;text-shadow:0 2px 5px #203f38,0 1px 18px #1c342c}
.chapter-invitation p{font:500 23px/1.4 localserif,serif;margin:0 0 5px}.chapter-invitation>span{font-size:11px;letter-spacing:.02em}
.chapter-list-link{position:absolute;z-index:40;left:50%;bottom:calc(17px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:46px;padding:11px 20px;border-radius:28px;border:1px solid #fff4d465;background:#173d34c9;color:#fff2d4;backdrop-filter:blur(8px);font-size:12px;box-shadow:0 3px 16px #122e3133}.chapter-list-link:hover{background:#183f34ed}
.scene-layer>.scene{min-width:48px;min-height:48px}.scene-tag{padding:3px 7px;background:#fff2d5f5}
@media(max-aspect-ratio:1/1){.header{grid-template-columns:1fr auto 1fr;padding:calc(12px + env(safe-area-inset-top,0px)) 12px 30px;gap:4px}.chapter-heading p{font-size:8px;letter-spacing:0}.chapter-heading .chapter-title{font-size:29px}.tools{gap:4px;flex-wrap:wrap;max-width:100px;justify-content:end}.icon-button{width:40px;height:40px;padding:9px}.list-open{width:84px;height:34px;padding:5px 11px;justify-content:center}.list-open span{font-size:11px}.list-open svg{width:16px}.chapter-invitation{top:auto;bottom:calc(80px + env(safe-area-inset-bottom,0px))}.chapter-invitation p{font-size:21px}.chapter-invitation>span{font-size:10px}.chapter-list-link{min-height:44px;bottom:calc(18px + env(safe-area-inset-bottom,0px));padding:10px 18px}.scene-tag{font-size:11px;padding:3px 6px}}
@media(max-width:360px){.wordmark{padding:0 9px}.wordmark>span:not(.return-arrow){font-size:16px}.chapter-heading p{font-size:7px}.tools{gap:3px;max-width:83px}.icon-button{width:38px;height:38px}.list-open{width:79px;height:30px}}
@media(max-aspect-ratio:1/1) and (max-height:650px){.chapter-invitation{display:none}.scene-layer>.scene[data-id="09"]{top:22%}.chapter-list-link{bottom:9px}}
@media(max-aspect-ratio:1/1){
 .tools{max-width:none;flex-wrap:nowrap}.header .list-open{display:none}
 .chapter-invitation{display:none}
 .scene-layer>.scene[data-id="09"]{top:19%}
}
@media(max-aspect-ratio:1/1) and (max-height:650px){.scene-layer>.scene[data-id="09"]{top:22%}}

.list-dialog{width:min(600px,calc(100% - 24px))}.list-item{gap:10px}.list-item .name{font-size:13px}.list-item img{width:30px;height:36px}.list-item .num{width:22px;font-size:10px}.row-listen,.row-play{font-size:11px;min-height:44px;padding:7px 10px;border:1px solid #6c62423b;border-radius:4px;white-space:nowrap;background:none}.row-play{background:#294e43;color:#fff0cf}#list-player{position:sticky;bottom:0;background:var(--paper);padding:15px 0 0;border-top:1px solid var(--line)}#list-player[hidden]{display:none}.song-player button{min-width:44px;min-height:44px;border:0;background:none}.song-player input{min-height:44px}.game-dialog{height:100dvh}.game-nav{height:48px;min-height:48px}#game-loading{position:absolute;inset:48px 0 0;z-index:5;display:grid;place-content:center;justify-items:center;gap:20px;background:#173b39;color:#f5e8cb;font:24px localserif,serif}#game-loading[hidden]{display:none}#game-loading i{width:28px;height:28px;border:1px solid #f5e8cb35;border-top-color:#f5e8cb;border-radius:50%;animation:load-turn 1s linear infinite}@keyframes load-turn{to{transform:rotate(360deg)}}
@media(max-width:400px){.list-dialog{padding:26px 14px}.list-item{gap:6px}.list-item .name{font-size:12px}.list-item img{display:none}.row-listen,.row-play{padding:6px 7px;font-size:10px}}

/* Games occupy the complete scene; return controls live inside the artwork. */
.game-dialog{padding:0!important;max-width:none!important;max-height:none!important;width:100vw!important;height:100dvh!important;overflow:hidden!important;background:#243e35}.game-dialog .game-nav{display:none!important}.game-dialog #game-frame{display:block!important;border:0!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important}.game-dialog #game-loading{inset:0!important}