:root{--cream:#fdf6ea;--cream-2:#f6e7cf;--wood:#c99a61;--wood-dark:#8a5f30;--ink:#4a3524;--ink-soft:#7b6350;--accent:#d9694a;--accent-2:#3f8f6a;--danger:#d9482f;--panel:#fffcf5f0;--shadow:0 10px 30px #5e42262e;--radius:16px;--pad-top:env(safe-area-inset-top,0px);--pad-bottom:env(safe-area-inset-bottom,0px);--pad-left:env(safe-area-inset-left,0px);--pad-right:env(safe-area-inset-right,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--cream-2);height:100%;color:var(--ink);-webkit-text-size-adjust:100%;margin:0;padding:0;font-family:Malgun Gothic,Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,sans-serif}body{overscroll-behavior:none;overflow:hidden}#app{padding:calc(6px + var(--pad-top)) calc(8px + var(--pad-right)) calc(6px + var(--pad-bottom)) calc(8px + var(--pad-left));background:radial-gradient(120% 80% at 50% 0,#fff8ec 0%,#f6e7cf 60%,#eed9ba 100%);flex-direction:column;gap:6px;display:flex;position:fixed;inset:0}#topbar{flex:none;align-items:center;gap:10px;min-height:48px;display:flex}.brand{flex-direction:column;gap:1px;min-width:0;display:flex}.brand-mark{letter-spacing:.16em;color:var(--accent);font-size:10.5px;font-weight:700}.brand-title{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:clamp(15px,2.6vw,20px);font-weight:800;overflow:hidden}.scoreboard{gap:12px;margin-left:auto;display:flex}.score-item{flex-direction:column;align-items:flex-end;line-height:1.15;display:flex}.score-label{color:var(--ink-soft);letter-spacing:.03em;font-size:10.5px}.score-value{font-variant-numeric:tabular-nums;color:var(--ink);font-size:clamp(16px,2.8vw,21px)}.score-value.bump{animation:.32s ease-out scoreBump}@keyframes scoreBump{0%{color:var(--ink);transform:scale(1)}35%{color:var(--accent);transform:scale(1.24)}to{color:var(--ink);transform:scale(1)}}.toolbar{flex:none;gap:6px;display:flex}.icon-btn{background:var(--panel);width:44px;height:44px;color:var(--ink);cursor:pointer;border:1.5px solid #d9bd94;border-radius:12px;justify-content:center;align-items:center;padding:0;font-size:17px;line-height:1;transition:background .12s,transform 90ms;display:inline-flex}.icon-btn:hover{background:#fff}.icon-btn:active{transform:translateY(1px)}.icon-btn[aria-pressed=true]{border-color:var(--accent);background:#fff3dc}.icon-btn:focus-visible,.btn:focus-visible,.choice:focus-visible,.ladder-item:focus-visible{outline-offset:2px;outline:3px solid #2f6fd0}#main{flex-direction:row;flex:auto;gap:10px;min-width:0;min-height:0;display:flex}#board-area{border-radius:var(--radius);min-width:0;min-height:0;box-shadow:var(--shadow);touch-action:none;background:#fdf3e3;flex:auto;position:relative;overflow:hidden}#board{touch-action:none;width:100%;height:100%;display:block}#sidebar{flex-direction:column;flex:0 0 190px;gap:8px;min-height:0;display:flex}.previews{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:6px;padding:8px;display:flex}.preview{flex-direction:column;flex:1 1 0;align-items:center;gap:2px;min-width:0;display:flex}.preview-label{color:var(--ink-soft);font-size:10.5px}.preview-canvas{width:64px;height:64px}.preview-name{text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:12.5px;font-weight:800;overflow:hidden}.preview-name-en{color:var(--ink-soft);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9.5px;font-weight:500;overflow:hidden}.goal{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);grid-template-columns:42px 1fr;align-items:center;gap:2px 8px;padding:8px;display:grid}.goal-label{color:var(--ink-soft);grid-column:1/-1;font-size:10.5px}.goal-canvas{grid-row:2/span 2;width:40px;height:40px}.goal-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:800;overflow:hidden}.goal-en{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;font-size:9.5px;overflow:hidden}.goal.done{outline:2px solid var(--accent-2)}.goal.done .goal-label:after{content:" ✓";color:var(--accent-2);font-weight:800}.preview-arrow{color:#c2a37a;font-size:20px}.danger-meter{background:#c9a06a47;border-radius:10px;align-items:center;height:20px;display:flex;position:relative;overflow:hidden}.danger-fill{background:linear-gradient(90deg, #f0b45c, var(--danger));transition:right 90ms linear;position:absolute;inset:0 100% 0 0}.danger-meter.armed .danger-fill{right:0%}.danger-text{z-index:1;color:var(--ink);opacity:0;padding-left:8px;font-size:11px;font-weight:700;transition:opacity .12s;position:relative}.danger-meter.armed .danger-text{opacity:1}.ladder{background:var(--panel);border-radius:var(--radius);min-height:0;box-shadow:var(--shadow);flex:auto;padding:8px;overflow-y:auto}.ladder-title{color:var(--ink-soft);margin-bottom:6px;font-size:11px;display:block}.ladder-list{flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;display:flex}.ladder-more{color:#b9a488;text-align:center;font-size:10.5px;line-height:1}.ladder-item{text-align:left;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;grid-template-columns:40px 1fr;align-items:center;gap:8px;padding:5px 6px;display:grid}.ladder-item.locked{opacity:.42;filter:grayscale(.75)}.ladder-item.current{background:#fff1d6;outline:2px solid #e6bd7d}.ladder-canvas{width:38px;height:38px}.ladder-name{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:700;overflow:hidden}.ladder-name small{color:var(--ink-soft);font-size:9px;font-weight:500;display:block}.hint{pointer-events:none;flex-direction:column;align-items:center;gap:6px;transition:opacity .26s;display:flex;position:absolute;bottom:14%;left:0;right:0}.hint.hidden{opacity:0}.hint-pointer{border:2px solid var(--wood-dark);background:#ffffffe6;border-radius:50%;width:26px;height:26px;animation:1.8s ease-in-out infinite hintMove;display:block}@keyframes hintMove{0%,to{transform:translate(-34px)}50%{transform:translate(34px)}}.hint-text{color:#6b5238;background:#ffffffd1;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}.phrase{pointer-events:none;background:#ffffffdb;border-radius:999px;align-items:baseline;gap:6px;max-width:calc(100% - 16px);padding:3px 12px;display:flex;position:absolute;bottom:4px;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #5e422624}.phrase[hidden]{display:none}.phrase strong{color:#4a3524;white-space:nowrap;font-size:14px;font-weight:800}.phrase small{color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;font-size:10.5px;font-weight:500;overflow:hidden}@media (prefers-reduced-motion:reduce){.hint-pointer{animation:none}}.tutorial{z-index:4;pointer-events:none;max-width:min(420px,100% - 16px);position:absolute;top:10px;left:50%;transform:translate(-50%)}.tutorial[hidden]{display:none}.tutorial-card{box-shadow:var(--shadow);pointer-events:auto;background:#fffcf5f2;border:2px solid #e6bd7d;border-radius:14px;align-items:center;gap:10px;padding:8px 12px;display:flex}.tutorial-body{flex-direction:column;gap:3px;min-width:0;display:flex}.tutorial-line{flex-direction:column;line-height:1.2;display:flex}.tutorial-line strong{color:var(--ink);font-size:17px;font-weight:800}.tutorial-line span{color:var(--ink-soft);font-size:10.5px}.tutorial-skip{color:var(--ink-soft);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:9px;flex:none;min-height:36px;padding:8px;font-size:11px;font-weight:700}.tutorial-skip:hover{background:#f6e7cf}.tutorial-skip:focus-visible{outline-offset:2px;outline:3px solid #2f6fd0}.overlay-root{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;background:#402c1a52;justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0}.overlay-root[hidden]{display:none}.panel{background:var(--panel);width:min(420px,100%);max-height:100%;box-shadow:var(--shadow);text-align:center;border-radius:20px;flex-direction:column;align-items:center;gap:12px;padding:18px;display:flex;overflow-y:auto}.panel h2{margin:0;font-size:20px}.panel .tagline{color:var(--ink-soft);margin:0;font-size:14px}.panel .tagline-en{color:#a08a74;margin:-6px 0 0;font-size:11.5px}.panel-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.btn{appearance:none;font:inherit;cursor:pointer;color:var(--ink);background:#f0dcbe;border:0;border-radius:999px;min-height:44px;padding:12px 22px;font-weight:700}.btn.primary{background:linear-gradient(180deg, #e8845f, var(--accent));color:#fff;padding:14px 34px;font-size:17px;box-shadow:0 6px 16px #d9694a52}.btn.ghost{background:0 0;border:1.5px solid #d9bd94}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;width:100%;display:grid}.collection-cell{background:#fff8ec;border:1px solid #eeddc0;border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;display:flex}.collection-cell.locked{color:#a99a8a;background:#f1e9dc}.collection-cell.locked .collection-canvas{filter:grayscale()opacity(.28)}.collection-canvas{width:56px;height:56px}.collection-name{text-align:center;font-size:11.5px;font-weight:700}.collection-name small{color:var(--ink-soft);font-size:9.5px;font-weight:500;display:block}.collection-sentence{text-align:center;color:var(--ink);font-size:10.5px;font-weight:600;line-height:1.25}.collection-sentence small{color:var(--ink-soft);font-size:9px;font-weight:500;display:block}.setting-row{text-align:left;background:#fff8ec;border:1px solid #eeddc0;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:9px 12px;display:flex}.setting-row .setting-label{font-size:14px;font-weight:700}.setting-row .setting-hint{color:var(--ink-soft);font-size:11px;font-weight:500;display:block}.volume{flex:none;align-items:center;gap:8px;display:inline-flex}.volume input[type=range]{width:108px;accent-color:var(--accent)}.volume-value{text-align:right;min-width:34px;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:11px}.btn.compact{min-height:38px;padding:8px 14px;font-size:12.5px}.switch{border:1.5px solid #d9bd94;border-radius:999px;flex:none;display:inline-flex;overflow:hidden}.switch .choice{font:inherit;cursor:pointer;min-height:40px;color:var(--ink-soft);background:0 0;border:0;padding:8px 14px;font-size:12.5px;font-weight:700}.switch .choice[aria-pressed=true]{background:var(--accent);color:#fff}.result-stats{grid-template-columns:repeat(2,1fr);gap:8px;width:100%;display:grid}.stat{background:#fff8ec;border:1px solid #eeddc0;border-radius:12px;flex-direction:column;gap:2px;padding:8px;display:flex}.stat .stat-label{color:var(--ink-soft);font-size:10.5px}.stat .stat-value{font-variant-numeric:tabular-nums;font-size:17px;font-weight:800}.result-snack{align-items:center;gap:10px;display:flex}.result-snack canvas{width:58px;height:58px}.new-record{color:var(--accent);margin:0;font-size:16px;font-weight:800}.again-line{color:var(--ink-soft);align-items:baseline;gap:6px;margin:0;display:flex}.again-line strong{color:var(--ink);font-size:14.5px;font-weight:800}.again-line small{font-size:11px}.result-notes{flex-direction:column;gap:4px;width:100%;margin:0;padding:0;list-style:none;display:flex}.result-notes li{color:var(--ink-soft);background:#fff8ec;border:1px solid #eeddc0;border-radius:10px;padding:6px 10px;font-size:12.5px}.result-notes li.done{color:var(--accent-2);font-weight:800}.result-notes li strong{color:var(--ink);font-size:13.5px}.result-notes .result-sub{color:var(--ink-soft);font-size:11.5px;display:block}.notice{color:var(--ink-soft);margin:0;font-size:12px}.panel .section-title{color:var(--ink-soft);text-transform:none;align-self:flex-start;font-size:12px;font-weight:700}.collection-note{color:var(--ink-soft);margin:0;font-size:12px}.collection-brand{color:var(--ink-soft);flex-direction:column;gap:2px;margin:0;font-size:11px;display:flex}.collection-brand strong{letter-spacing:.16em;color:var(--accent);font-size:11px}.ladder-panel-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;width:100%;display:grid}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.boot-error{color:#4a3524;z-index:99;background:#fff;padding:24px;font-size:15px;line-height:1.6;position:fixed;inset:0;overflow:auto}@media (min-width:761px) and (min-height:621px){#btn-growth{display:none}}@media (max-width:760px),(max-height:620px) and (orientation:landscape){#main{flex-direction:column}#sidebar{flex-direction:row;flex:none;order:-1;align-items:stretch;gap:8px}.goal{flex:0 auto;align-items:center;gap:6px;min-width:0;padding:5px 8px;display:flex}.goal-label{display:none}.goal-canvas{width:32px;height:32px}.goal-name{font-size:12px}.goal-en{display:none}.previews{flex:none;gap:4px;padding:5px 8px}.preview-canvas{width:44px;height:44px}.preview-name{font-size:11px}.danger-meter{flex:auto;align-self:center;height:18px}#ladder{display:none}#ladder.open{z-index:8;display:block;position:absolute;inset:60px 8px;overflow-y:auto}#ladder.open .ladder-list{flex-flow:wrap;justify-content:center;gap:6px}#ladder.open .ladder-item{background:#fff8ec;border:1px solid #eeddc0;grid-template-columns:30px auto;width:auto}}@media (max-width:430px){.toolbar{gap:4px}.icon-btn{border-radius:10px;width:38px;height:38px}.goal{gap:4px;padding:4px 6px}.goal-canvas{width:26px;height:26px}.goal-name{font-size:11px}.volume input[type=range]{width:84px}}@media (max-width:380px){.brand{display:none}.icon-btn{width:36px;height:36px}.preview-canvas{width:38px;height:38px}}@media (orientation:landscape) and (max-height:620px){#main{flex-direction:row}#topbar{min-height:40px}.icon-btn{width:40px;height:40px}#sidebar{flex-direction:column;flex:0 0 150px;order:0}#ladder{display:block}.preview-canvas{width:40px;height:40px}}@media (prefers-reduced-motion:reduce){.score-value.bump{animation:none}}