:root{--ink: #4E4677;--ink-soft: #6A6199;--cream: #FDF2E0;--cream-1: #FBE3C8;--card: #fffaf2;--yellow: #F7C85C;--sky: #C2D9F7;--shadow: 0 6px 18px rgba(78, 70, 119, .14), 0 1px 3px rgba(78, 70, 119, .12)}*{box-sizing:border-box}:lang(ko){word-break:keep-all;overflow-wrap:break-word}:lang(ja){word-break:keep-all;overflow-wrap:break-word}html,body,#root{height:100%;margin:0}html,body{overflow:hidden;overscroll-behavior:none}body{position:fixed;top:0;right:0;bottom:0;left:0}body{background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif;-webkit-tap-highlight-color:transparent}.app{height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:8px 12px calc(10px + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none}.top{display:flex;align-items:center;gap:8px;min-width:0}.top h1{margin:0;font-size:18px;font-weight:800;color:var(--ink-soft)}.grow{flex:1 1 auto}.stage{position:relative;flex:1 1 auto;min-height:0;border-radius:24px;overflow:hidden;background:var(--sky);box-shadow:var(--shadow);touch-action:none}.world{display:block;width:100%;height:100%}.meter{position:absolute;left:8px;top:8px;font:12px/1.3 ui-monospace,monospace;color:var(--ink);background:#fdf2e0d9;padding:3px 6px;border-radius:6px}.stamp{animation:stamp 1.2s ease-out forwards}@keyframes stamp{0%{transform-box:fill-box;opacity:0}15%{opacity:1}70%{opacity:1}to{opacity:0}}.leaving{animation:leave 2.4s ease-in forwards}@keyframes leave{0%,30%{transform:none;opacity:1}to{transform:translate(-90px);opacity:0}}.round{display:grid;place-items:center;width:56px;height:56px;padding:0;flex:none;border:0;border-radius:18px;background:var(--card);box-shadow:var(--shadow);cursor:pointer}.round.quiet{width:44px;height:44px;border-radius:14px;box-shadow:none;background:var(--cream-1)}.round.on{background:var(--yellow)}.round:active{transform:translateY(1px) scale(.97)}.doors{flex:1 1 auto;min-height:0;display:grid;gap:14px;grid-template-columns:1fr 1fr;grid-template-rows:3fr 2fr;padding:6px 0 4px}.door.main{grid-column:1 / -1}@media (orientation: landscape) and (min-width: 700px){.doors{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:none}.door.main{grid-column:auto}}@media (orientation: landscape) and (min-width: 1100px) and (min-height: 700px){.app.doorsScreen,.app.stepsScreen{max-width:min(1400px,150vh)}.doors{flex:0 1 auto;height:min(100%,72vh);margin-block:auto}.stepsScreen .stepGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.stepsScreen .stepArt{width:104px;height:104px}}.door{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0;padding:10px;border:0;border-radius:28px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer;container-type:size;overflow:hidden}.doorArt{position:relative;display:block;width:min(70cqh,86cqw);aspect-ratio:1}.doorArt.wide{width:min(110cqh,90cqw);aspect-ratio:1.45}.doorArt svg{display:block;width:100%;height:100%}.doorName{font-size:20px;font-weight:800;text-align:center}.door.soon{cursor:default;box-shadow:none;background:var(--cream-1)}.door.soon .doorArt,.door.soon .doorName{opacity:.55}.door.soon .doorName{font-size:16px}.badge{position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800}.stage.night{background:#39325c}.glow{animation:glow 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes glow{50%{transform:scale(1.15)}}.wipe{transform-box:fill-box;transform-origin:50% 100%;animation:wipe .8s ease-in-out infinite alternate}@keyframes wipe{0%{transform:rotate(-16deg)}to{transform:rotate(16deg)}}.rain .drop{animation:fall .7s linear infinite}.rain .d1{animation-delay:-.2s}.rain .d2{animation-delay:-.4s}.rain .d3{animation-delay:-.55s}@keyframes fall{0%{transform:translateY(-60px)}to{transform:translate(-20px,60px)}}.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:96px;touch-action:none}.toys{display:flex;gap:10px}.pedal{width:112px;height:112px;border:0;border-radius:32px;background:var(--yellow);box-shadow:var(--shadow);cursor:pointer;touch-action:none;display:grid;place-items:center;flex:none}.pedal:active{transform:translateY(3px) scale(.96);box-shadow:none}@media (orientation: portrait){.driveScreen .stage{flex:0 0 auto;height:min(40svh,92vw)}.driveScreen .controls{flex:1 1 auto;flex-direction:column;justify-content:center;gap:22px}.pedal{width:132px;height:132px;border-radius:38px}}@media (orientation: portrait) and (min-width: 600px){.driveScreen .stage{height:min(56svh,92vw)}}@media (orientation: landscape){.driveScreen{display:grid;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:auto minmax(0,1fr);column-gap:12px;max-width:1400px}.driveScreen .top{grid-column:1 / -1}.driveScreen .stage{grid-column:1;grid-row:2}.driveScreen .controls{grid-column:2;grid-row:2;flex-direction:column;justify-content:space-between;min-height:0}.driveScreen .toys{flex-direction:column;align-items:center}}@media (orientation: landscape) and (max-height: 500px){.driveScreen .toys .round{width:48px;height:48px}.driveScreen .pedal{width:104px;height:104px}}.stageNo{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:12px;background:var(--cream-1);font-weight:800;color:var(--ink-soft)}.starRow{display:flex;gap:2px}.star.on{animation:gotIt .5s ease-out}@keyframes gotIt{40%{transform:scale(1.35)}}.routeMap{flex:0 0 auto;height:116px;padding:2px 8px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);pointer-events:none}@media (orientation: landscape){.routeScreen .routeMap{grid-column:1;grid-row:2;align-self:start;justify-self:center;z-index:2;width:min(94%,760px);height:96px;margin-top:8px}}.routeMap svg{display:block;width:100%;height:100%}.pedal.next{background:var(--yellow)}.pedal.next.ready{animation:ready 1.2s ease-in-out infinite}@keyframes ready{50%{transform:translateY(-4px)}}.controls.done{animation:rise .35s ease-out}@keyframes rise{0%{transform:translateY(12px);opacity:0}}.stepGrid{flex:1 1 auto;min-height:0;overflow-y:auto;touch-action:pan-y;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:4px 2px 12px;align-content:start}.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border:0;border-radius:18px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer}.step:before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:4px;border-radius:4px 4px 0 0}.step.zone0:before{background:#edd6b0}.step.zone1:before{background:#86cc93}.step.zone2:before{background:#8fb6f0}.step.zone3:before{background:#fbdd8e}.step.zone4:before{background:#8a81b8}.step.zone5:before{background:#c0894b}.stepNo{position:absolute;left:10px;top:6px;font-size:14px;font-weight:800;color:var(--ink-soft)}.stepMark{position:absolute;right:6px;top:4px;display:flex}.stepMark svg{width:20px;height:20px}.stepArt{display:block;width:64px;height:64px}.stepDots{display:flex;gap:3px}.stepDots i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft)}.stepStars{display:flex;gap:1px}.devAuto{position:absolute;right:8px;bottom:8px}.chip{border:0;border-radius:12px;padding:8px 14px;background:var(--cream-1);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}.swishIn{animation:swishIn .32s ease-out}@keyframes swishIn{0%{transform:translate(14%);opacity:.2}}.hoodMap{flex:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;pointer-events:none}.hood{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;border-radius:14px;box-shadow:var(--shadow)}.hood.dim{filter:saturate(.35);opacity:.5;box-shadow:none}.hoodLogos{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}.hoodLogos .logo{position:relative;display:block;width:22px;height:22px}.hoodLogos .logo>img:first-child{width:22px;height:22px;display:block;border-radius:5px}.hoodLogos .logo.pinned>img:first-child{outline:3px solid #EC6A5E;outline-offset:1px}.hoodLogos .pin{position:absolute;left:50%;bottom:14px;width:34px;height:34px;transform:translate(-50%)}.hereBus{position:absolute;right:4px;top:4px;width:16px;height:11px;border-radius:4px;background:#5fbb6e;outline:2px solid var(--ink)}@media (orientation: landscape){.forkScreen .hoodMap{grid-column:1;grid-row:2;align-self:start;justify-self:center;z-index:2;width:min(94%,680px);margin-top:8px}}.controls.choose{justify-content:center;gap:12px}.sign{flex:1 1 0;max-width:260px;min-height:96px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:0;border-radius:22px;box-shadow:var(--shadow);cursor:pointer;animation:rise .3s ease-out}.signArrow{width:38px;height:38px;flex:none}.signInside{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.signInside img{width:30px;height:30px;border-radius:7px}@media (orientation: landscape){.controls.choose{flex-direction:column}.sign{flex:0 0 auto;width:100%;flex-direction:column;min-height:0;padding:8px}}.stepGoals{display:flex;gap:2px}.stepGoals img{width:22px;height:22px;border-radius:5px}.pedal.nudge{animation:nudge 1s ease-in-out infinite}@keyframes nudge{0%,60%,to{transform:none}20%{transform:translateY(-8px)}40%{transform:translateY(0) scale(1.04,.96)}}.pic{display:grid;place-items:center;border-radius:50%}.pic.goal{animation:goal 1.1s ease-in-out infinite}@keyframes goal{50%{transform:scale(1.22);box-shadow:0 0 0 5px #fdf2e0f2}}.signInside img.goal{outline:3px solid #EC6A5E;outline-offset:1px}.beckonRing{transform-box:fill-box;transform-origin:center;animation:beckon 1.1s ease-out infinite}@keyframes beckon{0%{transform:scale(1);opacity:1}to{transform:scale(1.9);opacity:0}}.sign{position:relative}.finger{position:absolute;right:10%;bottom:-20px;pointer-events:none;animation:poke .9s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(78,70,119,.3))}@keyframes poke{0%,to{transform:translateY(8px)}45%{transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.pedal.nudge,.pic.goal,.beckonRing,.finger{animation-duration:2.4s}}.sheetBack{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;background:#4e46776b}.sheetBack .sheet{width:min(480px,100%);max-height:calc(100svh - 32px);overflow-y:auto;touch-action:pan-y;padding:20px 18px;border-radius:24px;background:var(--cream);box-shadow:var(--shadow);color:var(--ink)}.sheetBack h2{margin:0 0 10px;font-size:20px}.sheetBack h3{margin:16px 0 4px;font-size:16px}.sheetBack .hint,.sheetBack p{margin:4px 0;font-size:14px;color:var(--ink-soft);line-height:1.5}.sheet.gate{display:grid;justify-items:center;text-align:center;gap:10px}.hold{display:grid;justify-items:center;gap:4px;padding:6px;border:0;background:none;color:var(--ink);font:inherit;font-weight:800;touch-action:none;cursor:pointer}.textBtn{padding:8px 14px;border:0;border-radius:12px;background:var(--cream-1);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.textBtn.danger{margin-top:18px}.textBtn.danger.sure{background:#ec6a5e;color:#fdf2e0}.seg{display:inline-flex;gap:6px}.seg button{padding:8px 16px;border:0;border-radius:12px;background:var(--cream-1);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.seg button.on{background:#5fbb6e}.round.wide{width:100%;margin-top:18px;font:inherit;font-weight:800;color:var(--ink)}@media (orientation: portrait) and (max-height: 700px){.routeScreen .controls{flex:1 1 auto;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-height:0}.routeScreen .pedal{width:104px;height:104px;border-radius:32px}.routeScreen .controls.choose{justify-content:center;align-items:stretch}.routeScreen .sign{flex-direction:column;justify-content:center;min-height:0;padding:8px;gap:4px}.routeScreen .signArrow{width:30px;height:30px}.routeScreen .sign .pic svg{width:32px;height:32px}.routeScreen .signInside{justify-content:center}.routeScreen .signInside img{width:26px;height:26px}}
