:root{--paper: #FFF8EC;--sand: #E8D7B5;--pebble: #8C8A85;--water: #2F8F9D;--water-d: #1F6B76;--coral: #F06B4F;--sun: #F2B33D;--ink: #3B2F28;--ink-2: #6B5D52;--card: #FFFFFF;--line: #D9CBB0;--ok: #2F8F9D;--no: #C2563F;--grid: #E3D8C4;--btn: #237A86;--on-btn: #FFFFFF;--r: 18px;--tap: 56px;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--paper: #1C2326;--card: #263035;--sand: #3B4A4F;--ink: #F3EADB;--ink-2: #C9BEB0;--line: #44545A;--grid: #34434A;--water: #4FB3C1;--water-d: #7FCBD6;--pebble: #A9A59E;--btn: #6CC4D0;--on-btn: #0F2A2E;color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink)}body{font-family:system-ui,-apple-system,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;font-size:18px;line-height:1.5;-webkit-tap-highlight-color:transparent}#app{max-width:720px;margin:0 auto;min-height:100dvh}.screen{padding:16px 16px 96px;outline:none;display:flex;flex-direction:column;gap:14px}h1{font-size:1.6rem;margin:4px 0;line-height:1.3}h2{font-size:1.15rem;margin:8px 0 4px}p{margin:0}.lead{font-size:1.2rem;font-weight:600}.small{font-size:.9rem;color:var(--ink-2)}.hidden{display:none}.char{width:160px;height:160px;object-fit:contain;align-self:center;border-radius:50%;background:var(--sand)}.char.hero{width:200px;height:200px}.char.sm{width:72px;height:72px}.char.tiny{width:64px;height:64px;flex:none}.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--sand)}.avatar.sm{width:40px;height:40px}.btn{min-height:var(--tap);padding:10px 20px;border-radius:var(--r);border:2px solid var(--water);background:var(--card);color:var(--water-d);font:inherit;font-weight:700;cursor:pointer}.btn.primary{background:var(--btn);color:var(--on-btn);border-color:var(--water-d);box-shadow:0 4px 0 var(--water-d)}.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--water-d)}.btn.big{font-size:1.15rem;width:100%}.btn.ghost{border-color:var(--line);color:var(--ink)}.btn.small{min-height:48px;padding:6px 14px;font-size:.95rem}.btn.danger{border-color:var(--no);color:var(--no)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}:focus-visible{outline:3px solid var(--coral);outline-offset:2px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:var(--tap);min-width:var(--tap);padding:6px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}.chip.sel{border-color:var(--btn);background:var(--btn);color:var(--on-btn)}.welcome{text-align:center;align-items:stretch}.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.avbtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;min-height:var(--tap);border:3px solid transparent;border-radius:var(--r);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}.avbtn.sel{border-color:var(--coral)}.nickrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.nick{font-size:1.25rem;font-weight:700;padding:8px 14px;background:var(--card);border-radius:var(--r);border:2px dashed var(--line)}.who{display:grid;gap:10px}.whocard{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px;border-radius:var(--r);border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-height:88px}.whocard img{grid-row:span 2}.wname{font-weight:700;font-size:1.1rem}.wsub{color:var(--ink-2);font-size:.9rem}.topbar{display:flex;align-items:center;gap:12px}.me{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;min-height:48px;margin-right:auto;padding:0}.stat{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:1.1rem}.ico{display:inline-block;width:22px;height:22px;border-radius:50%}.ico.pebble{background:radial-gradient(circle at 35% 35%,#d8d5cf,var(--pebble));border-radius:50% 46% 52% 48%}.ico.lantern{background:radial-gradient(circle at 50% 40%,#ffe7a3,var(--sun));border-radius:40% 40% 46% 46%}.today{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r);background:var(--card);border:2px solid var(--water)}.today>div{flex:1}.today .btn{width:auto;min-width:120px}.today.done{border-color:var(--sun)}.path{display:flex;flex-direction:column;gap:4px}.band{margin:14px 0 4px;color:var(--ink-2);font-size:1rem}.stones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.stone{display:flex;align-items:center;gap:12px}.stone.k1{padding-left:56px}.stone.k2{padding-left:96px}.stone.k3{padding-left:40px}.sbtn{width:var(--tap);height:48px;border-radius:50% 46% 52% 48%/55% 50% 50% 45%;border:3px solid var(--line);background:var(--sand);cursor:pointer;flex:none}.stone.placed .sbtn,.stone.mastered .sbtn{background:var(--pebble);border-color:var(--ink-2)}.stone.mastered .sbtn{background:radial-gradient(circle at 35% 35%,#cfe9ec,var(--water));border-color:var(--water-d)}.stone.learning .sbtn{background:#fbe0d7;border-color:var(--coral)}.stone.front .sbtn{box-shadow:0 0 0 4px var(--coral)}.sname{font-size:.95rem}.stone.unknown .sname{color:var(--ink-2)}.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:2px solid var(--line);z-index:5}.navb{flex:1;max-width:170px;min-height:var(--tap);border:0;background:none;color:var(--ink-2);font:inherit;font-weight:700;border-radius:12px;cursor:pointer}.navb.cur{color:var(--water-d);background:color-mix(in srgb,var(--water) 14%,transparent)}.qtop{display:flex;align-items:center;gap:12px}.quit{width:48px;height:48px;border-radius:50%;border:0;background:none;font-size:1.4rem;color:var(--ink-2);cursor:pointer}.progress{flex:1;height:14px;border-radius:999px;background:var(--sand);overflow:hidden}.pfill{display:block;height:100%;background:var(--water);border-radius:999px;transition:width .25s}.tag{color:var(--coral);font-weight:700}.prompt{font-size:1.35rem;font-weight:700}.math .frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.85em;line-height:1.1;margin:0 2px}.math .frac .num{border-bottom:2px solid currentColor;padding:0 3px}.math .frac .den{padding:0 3px}.figwrap{display:flex;justify-content:center}.fig{max-width:100%;height:auto}.svgtext{fill:var(--ink);font-family:inherit}.f-none{fill:none}.f-water{fill:var(--water)}.f-pebble{fill:var(--pebble)}.f-coral{fill:var(--coral)}.f-sun{fill:var(--sun)}.f-ink{fill:var(--ink)}.f-sand{fill:var(--sand)}.f-paper{fill:var(--card)}.f-grid{fill:var(--grid)}.s-ink{stroke:var(--ink);stroke-width:2}.s-water{stroke:var(--water);stroke-width:3}.s-coral{stroke:var(--coral);stroke-width:3}.s-grid{stroke:var(--grid);stroke-width:1}.s-pebble{stroke:var(--pebble);stroke-width:2}.s-sun{stroke:var(--sun);stroke-width:2}.s-none{stroke:none}.thick{stroke-width:3}.dash{stroke-dasharray:6 4}.hand-h{stroke-width:6;stroke-linecap:round}.hand-m{stroke-width:4;stroke-linecap:round}.cursor{stroke-dasharray:3 2}.chart{margin:0;padding:12px;background:var(--card);border-radius:var(--r)}.chart figcaption{font-weight:700;margin-bottom:6px}.barrow{display:grid;grid-template-columns:5.5em 1fr 3em;align-items:center;gap:8px;margin:4px 0}.bar{height:22px;background:var(--grid);border-radius:6px;overflow:hidden}.barfill{display:block;height:100%;background:var(--water)}.barval{text-align:right;font-weight:700}.pict{display:flex;flex-wrap:wrap;gap:3px;align-items:center}.pbig{width:22px;height:22px;border-radius:50% 46% 52% 48%;background:var(--pebble)}.psmall{width:12px;height:12px;border-radius:50%;background:var(--pebble)}.legend{font-size:.85rem;color:var(--ink-2);margin-top:6px}.tbl{border-collapse:collapse;width:100%;background:var(--card);border-radius:12px;overflow:hidden}.tbl th,.tbl td{border:1px solid var(--line);padding:8px;text-align:center}.lines{background:var(--card);border-radius:var(--r);padding:12px 12px 12px 40px;margin:0;font-size:1.15rem}.coins{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.coin{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-weight:800;font-size:.8rem;background:#d9d4cb;color:#3b2f28;border:2px solid #9d968a}.coin.c10{background:#e7b98d;border-color:#b07c4f}.coin.c50{width:48px;height:48px}.coin.c500{width:58px;height:58px}.coin.cbill{width:84px;height:46px;border-radius:6px;background:#c9d9b8;border-color:#8aa070}.numw{display:flex;flex-direction:column;gap:10px;align-items:center}.numfield{min-width:180px;min-height:64px;padding:8px 16px;border-radius:var(--r);background:var(--card);border:3px solid var(--water);font-size:1.8rem;font-weight:800;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px}.numfield .ph{color:var(--line)}.numfield .unit{font-size:1.1rem;color:var(--ink-2)}.keypad{display:grid;grid-template-columns:repeat(3,var(--tap));gap:8px;justify-content:center}.keypad:has(.key:nth-child(12)){grid-template-columns:repeat(4,var(--tap))}.key{width:var(--tap);height:var(--tap);border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1.4rem;font-weight:800;cursor:pointer}.key.del{color:var(--coral)}.choices{display:grid;gap:10px}.choices.vis,.choices.tfrow{grid-template-columns:1fr 1fr}.choice{min-height:var(--tap);display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r);border:3px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1.15rem;text-align:left;cursor:pointer}.choice.sel{border-color:var(--water);background:color-mix(in srgb,var(--water) 12%,var(--card))}.choices.vis .choice{flex-direction:column}.choice .fig{max-height:140px}.cnum{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sand);display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800}.choice.tf{justify-content:center;font-size:1.3rem;font-weight:800;min-height:80px}.tfmark{font-size:1.6rem}.orderw,.matchw{display:flex;flex-direction:column;gap:12px}.seqrow{list-style:none;margin:0;padding:10px;display:flex;flex-wrap:wrap;gap:8px;min-height:76px;border-radius:var(--r);border:2px dashed var(--line)}.seqrow .slot{min-width:64px;min-height:52px;border-radius:12px;background:var(--grid);color:var(--ink-2);display:flex;align-items:center;justify-content:center}.pool{display:flex;flex-wrap:wrap;gap:8px}.card,.mcard{min-height:var(--tap);min-width:64px;padding:8px 14px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer}.card.placed{border-color:var(--water)}.mcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mcol{display:flex;flex-direction:column;gap:8px}.mcard.cur{border-color:var(--coral);border-width:3px}.mcard.vis{padding:4px}.mcard .fig{max-height:120px}.mcard.p0{background:#d5eef1;border-color:var(--water)}.mcard.p1{background:#fde2d9;border-color:var(--coral)}.mcard.p2{background:#fbecc4;border-color:var(--sun)}.mcard.p3{background:#e6e1f5;border-color:#8a7cc2}.mcard.p4{background:#e9e6df;border-color:var(--pebble)}.mcard.p5{background:#f4d9ea;border-color:#c06ea0}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .mcard[class*=" p"]{color:#1c2326}}.hintline{color:var(--ink-2);font-size:.95rem;text-align:center}.linew{padding:20px 0 10px}.ticks{display:flex;justify-content:space-between;position:relative}.ticks:before{content:"";position:absolute;left:22px;right:22px;top:22px;height:4px;background:var(--ink);border-radius:2px}.tick{position:relative;width:44px;min-height:var(--tap);border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:var(--ink);font:inherit;padding:0}.tmark{width:4px;height:30px;background:var(--ink);margin-top:9px;border-radius:2px}.tick.sel .tmark{width:22px;height:22px;border-radius:50%;background:var(--coral);margin-top:13px}.tlab{font-size:.85rem;margin-top:2px;min-height:1.2em}.shadebar{display:flex;border:3px solid var(--ink);border-radius:8px;overflow:hidden;height:72px}.shadebar .cell{flex:1;border:0;border-right:2px solid var(--ink);background:var(--card);cursor:pointer;min-width:24px}.shadebar .cell:last-child{border-right:0}.shadebar .cell.on{background:var(--water)}.wedge{fill:var(--card);stroke:var(--ink);stroke-width:2;cursor:pointer}.wedge.on{fill:var(--water)}.clockw,.coinsw,.sliderw,.pointw{display:flex;flex-direction:column;align-items:center;gap:10px}.clockread{font-size:1.3rem;font-weight:800}.clockbtns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.grp{display:inline-flex;align-items:center;gap:6px}.pill{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid var(--water);background:var(--card);color:var(--water-d);font-size:1.5rem;font-weight:800;cursor:pointer}.tray{display:flex;flex-wrap:wrap;gap:6px;min-height:70px;width:100%;padding:8px;border:2px dashed var(--line);border-radius:var(--r);justify-content:center}.coinbank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.coinbtn{background:none;border:0;padding:2px;cursor:pointer;min-height:var(--tap);min-width:var(--tap)}.sliderw input{width:100%;height:var(--tap);accent-color:var(--water)}.srange{display:flex;justify-content:space-between;width:100%;color:var(--ink-2)}.gridw{cursor:crosshair;border-radius:12px}.foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;padding:10px 0;background:var(--paper)}.foot .check{flex:1;min-width:160px}.hints{display:flex;flex-direction:column;gap:6px}.hint{background:#fff3c9;color:#3b2f28;border-radius:12px;padding:8px 12px}.fb{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;border-radius:var(--r) var(--r) 0 0;background:var(--card);border-top:4px solid var(--ok);box-shadow:0 -6px 18px #00000014}.fb>div{flex:1;min-width:200px}.fb.no{border-top-color:var(--coral)}.fb .btn{width:100%}.fbt{font-size:1.25rem;font-weight:800}.fb.ok .fbt{color:var(--water-d)}.fb.no .fbt{color:var(--no)}.ans{font-weight:700;margin-top:4px}.steps{margin:6px 0 0;padding-left:22px;color:var(--ink-2)}.result{text-align:center}.rewards{list-style:none;padding:0;display:flex;justify-content:center;gap:18px;font-weight:800;font-size:1.15rem}.rewards li{display:inline-flex;gap:6px;align-items:center}.newly{background:var(--card);border-radius:var(--r);padding:12px;text-align:left}.big{font-size:1.2rem;font-weight:700}.scene{position:relative;min-height:260px;border-radius:var(--r);overflow:hidden;background:url(../img/river-bg.webp) center 60% / cover,var(--water);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:70px;align-items:end;justify-items:center;padding:10px}.deco{font-size:2.2rem}.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.shopitem{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;min-height:96px;border-radius:var(--r);border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}.shopitem.owned{border-color:var(--water)}.sico{font-size:2rem}.cost{font-size:.85rem;color:var(--ink-2)}.panel{display:flex;flex-direction:column;gap:8px}section.panel{padding:14px;border-radius:var(--r);background:var(--card);border:2px solid var(--line)}.grow{display:grid;grid-template-columns:7.5em 1fr 3.5em;gap:8px;align-items:center}.gbar{display:flex;height:16px;border-radius:8px;background:var(--grid);overflow:hidden}.gm{background:var(--water)}.gl{background:#f6c4b5}.gnum{text-align:right;font-weight:700}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap)}.row input[type=checkbox]{width:28px;height:28px;accent-color:var(--water)}select,.gin{min-height:48px;font:inherit;padding:6px 10px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink)}.gin{font-size:1.4rem;width:8em}.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;z-index:20;max-width:90vw}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}@media (max-width: 380px){.stone.k1{padding-left:32px}.stone.k2{padding-left:56px}.stone.k3{padding-left:20px}}