:root{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#50351e;background:#233d35;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at center,#53684d,#1d322d)}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #fff6b2;outline-offset:5px}#app{width:100%;display:grid;place-items:center}.stage{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size;background:#c4d5ae;box-shadow:0 12px 80px #071e2866}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2;user-select:none;pointer-events:none}.view{position:absolute;inset:0;animation:arrive .35s ease-out}@keyframes arrive{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:scale(1)}}button{border:0}.image-button{position:absolute;padding:0;background:none;transition:transform .2s,filter .2s}.image-button img{display:block;width:100%;pointer-events:none}.image-button:hover:not(:disabled){transform:scale(1.045);filter:brightness(1.08) drop-shadow(0 5px 8px #59402550)}.back{left:1.7%;bottom:2.1%;width:14.5%;z-index:8;filter:drop-shadow(0 3px 4px #37291750)}.home-wordmark{position:absolute;top:1%;left:30%;width:40%;height:auto;object-fit:contain;pointer-events:none;user-select:none}.home-title{height:3.6cqw;position:absolute;top:27%;left:0;right:0;text-align:center;margin:0;color:#fffbea;text-shadow:0 3px 1px #684928,0 5px 18px #3b542c;font-size:3cqw;font-weight:900;letter-spacing:-.06em}.mode{width:29%;top:35%;filter:drop-shadow(0 12px 12px #243e4266)}.mode.adventure{left:17%}.mode.free{right:17%}.corner-note{position:absolute;bottom:2.6%;right:2.2%;font-size:.9cqw;background:#fff8e9db;border:1px solid #d5ba80;padding:.65% 1.2%;border-radius:20px;color:#705339}.heading{position:absolute;top:3%;left:28%;right:28%;text-align:center;margin:0;font-size:1.65cqw;line-height:1.5;font-weight:800;background:#fff8e8ed;border:1px solid #ad8449;border-radius:30px;padding:.45% 1%;box-shadow:0 3px 10px #4a462e25;z-index:3}.heading small{display:block;font-size:.78cqw;letter-spacing:.04em;font-weight:500}.hotspot{position:absolute;background:transparent;border:2px solid transparent;border-radius:20%;transition:background .2s,box-shadow .2s,border-color .2s}.hotspot:hover,.hotspot:focus-visible{background:#fff6b51a;border-color:#fff4b0;box-shadow:0 0 24px #fffacb99,inset 0 0 26px #fffacc88}.hotspot-label{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-10%);white-space:nowrap;background:#fff5dc;color:#54361d;padding:6px 12px;border-radius:20px;font-size:1cqw;box-shadow:0 3px 7px #34271240;opacity:0;transition:opacity .2s}.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{opacity:1}.place{position:absolute;transform:translate(-50%,-50%);width:5%;height:8%;border-radius:50%;background:linear-gradient(#fff3ba,#f3bf53);border:3px solid #fff5d4;color:#6d431d;font-size:2.1cqw;font-weight:900;box-shadow:0 3px 0 #a16e29,0 6px 12px #32261140;transition:filter .2s,scale .2s}.place:hover{scale:1.09;filter:brightness(1.1)}.place.locked{background:linear-gradient(#e2ded1,#a49e87);color:#4e4c43}.place .lock{position:absolute;right:-22%;top:-28%;font-size:1.3cqw}.place .status{position:absolute;left:50%;top:110%;transform:translateX(-50%);font-size:.72cqw;background:#fff9e6f2;padding:3px 7px;border-radius:9px;white-space:nowrap;color:#6c5533;box-shadow:0 1px 3px #211b2030}.status.complete{color:#9b6414}.notice{position:absolute;right:3%;bottom:3%;max-width:34%;padding:1.3% 1.7%;border-radius:18px;border:1px solid #c7a168;background:#fff9e8f5;box-shadow:0 5px 22px #32422433;font-size:1.02cqw;line-height:1.7}.notice strong{display:block;font-size:1.3cqw}.notice p{margin:.4em 0 0}.door-label{position:absolute;transform:translate(-50%,-50%);font-size:1.6cqw;font-weight:800;color:#59371f;text-shadow:0 1px #ffeabf;pointer-events:none;white-space:nowrap}.door:hover{background:#ffe8aa29;box-shadow:0 0 25px #ffe6a080}.book-trigger{left:50%;top:50%;translate:-50% -50%;width:42%;filter:drop-shadow(0 3px 9px #ffdb8066)}.book-caption{position:absolute;left:69%;top:72%;font-size:1.15cqw;background:#fff6dfe8;padding:.6% 1.2%;border-radius:18px;pointer-events:none}.book-view .scene{filter:brightness(.37) blur(3px);transform:scale(1.01)}.book-art{position:absolute;left:6%;top:7%;width:88%;height:86%;object-fit:contain;filter:drop-shadow(0 12px 20px #130c0955);animation:openbook .45s ease-out;pointer-events:none}@keyframes openbook{from{opacity:0;transform:perspective(1000px) rotateX(10deg) scale(.93)}to{opacity:1;transform:none}}.book-title{position:absolute;top:0.8%;left:34%;right:34%;margin:0;text-align:center;color:#fff1cd;letter-spacing:.08em;font-size:1.4cqw}.search-wrap{position:absolute;top:17%;left:18%;width:64%;height:7%;display:flex;gap:1%;align-items:center;border:2px solid #694828;background:#fff9e6;box-shadow:0 3px 9px #60452920;border-radius:9px;padding:0 1.3%;font-size:1.15cqw}.search-wrap span{font-size:1.3cqw;color:#8a693f}.search-wrap input{min-width:0;flex:1;width:100%;height:90%;border:0;background:transparent;color:#4c341e;outline:none;font-size:1.15cqw}.clear-search{background:transparent;border-radius:50%;font-size:1.4cqw;color:#6c4a29;padding:0 5px}.book-page{position:absolute;top:30%;width:30%;height:44%;display:flex;flex-direction:column;justify-content:flex-start;gap:5%;animation:arrive .23s ease}.book-page.left{left:16%}.book-page.right{right:16%}.grammar-item{background:transparent;text-align:left;border-bottom:1px solid #9b744c66;font-size:1.3cqw;color:#53371e;padding:4% 3%;height:21%;transition:background .2s}.grammar-item:hover{background:#c29b5630;border-radius:5px}.grammar-item small{font-size:.8cqw;color:#957345;margin-right:4%}.empty{margin:auto;text-align:center;font-size:1.3cqw;line-height:1.9;color:#826346}.empty small{display:block;font-size:.9cqw}.book-aside{margin:auto;text-align:center;color:#9b825a;font-size:1.1cqw;line-height:2}.book-aside b{display:block;color:#6c4e2e;font-size:2cqw}.page-count{position:absolute;bottom:17%;left:42%;width:16%;text-align:center;font-size:1cqw;color:#795432}.page-arrow{position:absolute;bottom:13%;width:9%;height:10%;padding:0;background-color:transparent;background-repeat:no-repeat;background-size:200% 100%;transition:filter .2s,transform .2s}.page-arrow.prev{left:22%;background-position:left}.page-arrow.next{right:22%;background-position:right}.page-arrow:hover:not(:disabled){transform:scale(1.07);filter:brightness(1.1)}.page-arrow:disabled{opacity:.35;filter:grayscale(.5)}.coming-shade{position:absolute;inset:0;background:#21322560;backdrop-filter:blur(3px)}.coming-card{position:absolute;left:29%;top:28%;width:42%;padding:4% 3%;text-align:center;background:linear-gradient(130deg,#fff9e9,#f3e6c7);border:2px solid #af8650;border-radius:20px;box-shadow:0 16px 60px #13221c55}.coming-card .eyebrow{color:#9f7547;font-size:.9cqw;letter-spacing:.18em}.coming-card h1{font-size:2.5cqw;margin:4% 0 6%}.coming-card p{font-size:1.2cqw;line-height:1.9;margin:0}.coming-card .soon{display:inline-block;padding:2% 7%;margin-bottom:5%;border:1px solid #b49a69;border-radius:30px;color:#82613c;font-size:1cqw}.toast{position:absolute;bottom:4%;left:25%;right:25%;z-index:20;text-align:center;padding:1.2%;background:#fff8e9fa;border:1px solid #97703d;border-radius:13px;box-shadow:0 5px 20px #231c2244;font-size:1.15cqw;animation:arrive .2s ease}.storage-warning{position:absolute;top:12%;left:32%;right:32%;font-size:.8cqw;background:#fff1d9;padding:.5%;border-radius:7px;text-align:center;z-index:6}.stage-marker{position:absolute;transform:translate(-50%,-50%);width:6%;aspect-ratio:1.5;background:transparent url('assets/나무 발판.png?v=9547ee83a07c7f8090140c20cf9db7d475c0ff6d1b01d28e51d683a87a4a39f4') center/contain no-repeat;font-weight:bold;color:#614022;font-size:1.6cqw}.activity-host{position:absolute;inset:12% 12% 18%;background:#fff8e8f7;border-radius:16px;padding:3%;overflow:auto}.stage:has(.mode) .corner-note{font-size:.8cqw}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:700px) and (orientation:portrait){.stage{width:100vw}.heading{font-size:2cqw}.corner-note{font-size:1.1cqw}}

.home-question{position:absolute;left:50%;top:50%;translate:-50% -50%;width:30cqw;height:auto;max-width:none;pointer-events:none;user-select:none}

/* Only the opening screen fills the viewport. Maps retain their 16:9 coordinates. */
.stage.home-stage{
 width:100%;max-width:none;min-height:100vh;min-height:100dvh;
 aspect-ratio:auto;box-shadow:none;
}
.home-stage>.view{animation:home-arrive .35s ease-out}
.home-stage .scene{object-fit:cover;object-position:50% 100%}
.home-stage .home-layout{
 position:absolute;left:50%;top:50%;translate:-50% -50%;
 width:min(100%,177.7778dvh);aspect-ratio:16/9;container-type:inline-size;
}
.home-stage .home-layout .corner-note{font-size:max(11px,.8cqw)}
@keyframes home-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:600px) and (max-aspect-ratio:3/4){
 .home-stage .home-layout{inset:0;translate:none;width:100%;height:100%;aspect-ratio:auto}
 .home-stage .home-wordmark{top:4%;left:5%;width:90%}
 .home-stage .home-title{top:calc(4% + 40cqw);height:8cqw}
 .home-stage .home-question{width:80cqw}
 .home-stage .mode{top:calc(4% + 64cqw);width:46%}
 .home-stage .mode.adventure{left:2%}
 .home-stage .mode.free{right:2%}
 .home-stage .corner-note{right:3%;bottom:max(2.6%,env(safe-area-inset-bottom))}
}