:root{--cream: #fbf3e6;--cream-2: #f5e7d1;--cream-3: #efdcc0;--paper: #fffaf1;--ink: #1e2a45;--ink-soft: #46536f;--ink-mute: #7f8aa3;--edge: #e3d0ae;--edge-strong: #d8c19a;--line: rgba(60, 45, 25, .12);--mint: #a5ddc6;--mint-deep: #1c8a68;--sky: #a8c8f6;--lavender: #c4b5f2;--coral: #f7b7a0;--teal: #92d8d6;--gold: #ffd489;--gold-deep: #d9a52a;--warn: #c1534a;--radius-lg: 24px;--radius-md: 16px;--radius-sm: 11px;--shadow-soft: 0 8px 18px rgba(70, 50, 25, .14);--shadow-lift: 0 14px 30px rgba(45, 32, 14, .22);--font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;--font-craft-title: 800 14px/1.2 var(--font);--font-score: 700 11px/1.3 var(--font);--font-score-number: 800 9px/1 var(--font);--board-min: 288px;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}body{min-height:100%;overscroll-behavior-y:contain;background-image:radial-gradient(circle at 12% 8%,rgba(165,221,198,.28),transparent 42%),radial-gradient(circle at 88% 4%,rgba(168,200,246,.26),transparent 38%),radial-gradient(circle at 50% 100%,rgba(196,181,242,.22),transparent 46%)}#app{display:block;height:100dvh}h1,h2,h3,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}.shop [hidden]{display:none!important}::focus-visible{outline:3px solid var(--ink);outline-offset:2px}.shop{position:relative;display:flex;flex-direction:column;gap:7px;height:100%;min-height:100dvh;max-width:560px;margin-inline:auto;padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(12px + var(--safe-left))}.shop>:not(.board-area){flex-shrink:0}.card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:inset 0 2px #ffffffe6,0 4px 0 var(--edge),var(--shadow-soft);padding:10px 12px}.bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px}.bar__code{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--gold-deep)}.bar__title{font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.01em}.bar__tag{display:none;margin-top:2px;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--ink-mute)}.bar__tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:0 0 auto}.pill{appearance:none;border:0;border-radius:999px;background:var(--paper);color:var(--ink-soft);font:700 12px/1 var(--font);padding:9px 11px;min-height:36px;cursor:pointer;box-shadow:0 2px 0 var(--edge),0 4px 10px #4632191a}.pill:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--edge)}.pill:disabled{opacity:.5;cursor:default}.pill--pause[aria-pressed=true]{background:var(--gold);color:var(--ink);box-shadow:0 2px #c98e2c}.stage{display:flex;flex-direction:column;gap:7px}.stage__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}.stage__title{font-size:14px;font-weight:800;letter-spacing:.02em}.stage__supply{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:3px 8px;border-radius:999px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:10.5px;font-weight:700;line-height:1.25;color:var(--ink-soft)}.stage__supply-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage__coins{font-size:15px;font-weight:800;color:var(--gold-deep);font-variant-numeric:tabular-nums;white-space:nowrap}.goals{display:flex;flex-wrap:wrap;gap:6px}body[data-box-height=xs] .goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.goal{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 9px 4px 5px;border-radius:999px;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}.goal__name{font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.goal__count{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}.goal[data-state=current]{background:linear-gradient(180deg,#fff5e0,var(--gold));box-shadow:inset 0 0 0 1px var(--gold-deep)}.goal[data-state=current] .goal__name,.goal[data-state=current] .goal__count{color:var(--ink)}.goal[data-state=done]{background:var(--mint);box-shadow:inset 0 0 0 1px var(--mint-deep)}.goal[data-state=done] .goal__count{color:var(--mint-deep)}.stage__meter{font-size:10.5px;font-weight:700;color:var(--ink-mute)}.craft{display:flex;flex-direction:column;gap:6px}.craft__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}.craft__title{grid-column:2;font:var(--font-craft-title);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.craft__combo{grid-column:3;font-size:11px;font-weight:800;color:var(--ink-mute);white-space:nowrap}.craft__combo[data-live=true]{color:var(--mint-deep)}.craft__queue{display:flex;align-items:center;justify-content:space-between;gap:6px;font:var(--font-score);color:var(--ink-soft)}.craft__queue-count{flex-shrink:0}.craft__queue-next{min-width:0;text-align:right}.score__cue{font:var(--font-score);text-align:center;min-height:15px;color:var(--mint-deep)}.score{position:relative;height:68px;overflow:hidden;border:1px solid var(--edge);border-radius:var(--radius-sm);background:var(--cream-2)}.score[data-phase=ready]{background:linear-gradient(180deg,#fdf6e7,var(--cream-2))}.score[data-paused=true]{filter:grayscale(.6);opacity:.75}.score__track{position:absolute;inset:0;will-change:transform}.score__note{position:absolute;top:14px;width:40px;height:40px;border-radius:var(--radius-sm)}.score__note[data-current=true]{outline:2px solid var(--gold-deep)}.score__note[data-grade=start],.score__note[data-grade=perfect],.score__note[data-grade=hit]{opacity:.4}.score__number{position:absolute;top:-6px;left:-3px;padding:3px 4px;background:var(--ink);color:var(--paper);border-radius:3px;font:var(--font-score-number)}.score__line{position:absolute;top:0;bottom:0;width:2px;z-index:1;background:var(--ink);pointer-events:none}.score[data-window=true]:not([data-paused=true]) .score__line{background:var(--mint-deep);box-shadow:0 0 0 4px var(--mint)}.howto{display:none;font-size:11.5px;font-weight:700;color:var(--ink-mute);text-align:center}.board-area{flex:1 1 0;min-height:var(--board-min);display:flex;align-items:center;justify-content:center}.board{position:relative;border-radius:var(--radius-lg);padding:var(--board-pad, 9px);background:linear-gradient(180deg,#f8ebd6,var(--cream-3));box-shadow:inset 0 2px #ffffffd9,inset 0 -2px 6px #785a2d1f,0 5px 0 var(--edge-strong),var(--shadow-soft);touch-action:none}.board__canvas{display:block;border-radius:calc(var(--radius-lg) - 8px)}.board__grid{position:absolute;inset:var(--board-pad, 9px);display:grid;grid-template-columns:repeat(var(--cols, 7),1fr);grid-template-rows:repeat(var(--rows, 9),1fr);touch-action:none}.cell{appearance:none;margin:0;padding:0;border:0;background:transparent;border-radius:26%;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.cell[aria-disabled=true]{cursor:default}.cell[aria-disabled=false]{cursor:pointer}.cell:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}.shop[data-busy=true] .board{filter:saturate(.96)}.shop[data-paused=true] .board{filter:grayscale(.55) brightness(.98)}.note{border-radius:var(--radius-md);background:#fffaf1eb;box-shadow:inset 0 0 0 1px var(--line);padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-height:58px}.note__main{font-size:13.5px;font-weight:800;line-height:1.3}.note__next{font-size:11.5px;line-height:1.35;color:var(--ink-soft)}.note__aside{font-size:11px;line-height:1.35;font-weight:700;color:var(--warn)}.btn{appearance:none;border:0;border-radius:var(--radius-md);background:var(--paper);color:var(--ink);font:800 14px/1.1 var(--font);padding:11px 12px;min-height:50px;cursor:pointer;box-shadow:0 3px 0 var(--edge),0 6px 14px #4632191f;transition:transform .12s ease,box-shadow .12s ease}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--edge),0 2px 6px #46321929}.btn:disabled{color:var(--ink-mute);box-shadow:0 2px 0 var(--edge);opacity:.55;cursor:default}.btn--go{background:linear-gradient(180deg,var(--gold),#f6b95f);box-shadow:0 3px #c98e2c,0 8px 18px #b4781e47;padding-inline:16px}@media(prefers-reduced-motion:no-preference){.dlg--done .btn--go{animation:nudge 1.7s ease-in-out infinite}}@keyframes nudge{0%,72%,to{transform:translateY(0)}80%{transform:translateY(-3px)}88%{transform:translateY(0)}}.legend{display:none;padding:10px 12px 12px}.legend__title{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink-soft)}.legend__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:6px}.legend__list li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.legend__name{font-size:9px;font-weight:700;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.legend__note{margin-top:6px;font-size:10px;color:var(--ink-mute)}.chip{display:block;width:46px;height:46px;flex:0 0 auto}.chip--score{width:40px;height:40px}.chip--sm{width:26px;height:26px}.chip--craft{width:30px;height:30px}.chip--next{width:22px;height:22px}.legend__list .chip--sm{width:34px;height:34px}.dlg{position:fixed;inset:0;margin:auto;border:0;width:min(520px,calc(100vw - 26px));max-height:min(86dvh,760px);overflow-y:auto;border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);padding:16px 16px 18px;box-shadow:var(--shadow-lift)}.dlg::backdrop{background:#2a1f1075}.dlg__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:10px;border-radius:var(--radius-md);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}.opt__in{position:absolute;width:1px;height:1px;opacity:0;margin:0}.opt__sw{width:48px;height:28px;border-radius:999px;background:var(--edge);position:relative;box-shadow:inset 0 2px 4px #4632192e;transition:background .16s ease}.opt__sw:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #281e0f4d;transition:transform .16s ease}.opt__in:checked+.opt__sw{background:var(--mint-deep)}.opt__in:checked+.opt__sw:after{transform:translate(20px)}.opt__in:focus-visible+.opt__sw{outline:3px solid var(--ink);outline-offset:2px}.opt__text{display:flex;flex-direction:column;gap:2px}.opt__k{font-size:14px;font-weight:800}.opt__d{font-size:11.5px;line-height:1.4;color:var(--ink-soft)}.seg{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px;border-radius:var(--radius-md);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}.seg__btn{appearance:none;border:0;border-radius:999px;background:var(--paper);color:var(--ink-soft);font:700 13px/1 var(--font);padding:10px 13px;min-height:40px;cursor:pointer;box-shadow:0 2px 0 var(--edge)}.seg__btn[aria-pressed=true]{background:var(--ink);color:#fff8ea;box-shadow:0 2px #101a2e}.guide h3{font-size:14px;font-weight:800;margin-top:12px}.guide h3:first-child{margin-top:0}.guide p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin-top:3px}.store__desc{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}.store__list{display:grid;gap:6px;margin-top:12px}.store__list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 12px 7px 8px;border-radius:var(--radius-md);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}.store__list li[data-empty=true]{opacity:.55}.store__name{font-size:13px;font-weight:700}.store__count{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.store__total{margin-top:10px;font-size:12px;font-weight:800;color:var(--ink-soft);text-align:right}.dlg--done{text-align:center}.done__title{font-size:22px;font-weight:800}.done__coins{margin-top:4px;font-size:30px;font-weight:800;color:var(--gold-deep);font-variant-numeric:tabular-nums}.done__body{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}.done__label{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-mute)}.done__goals,.done__stored{display:grid;gap:5px;margin-top:6px}.done__goals li,.done__stored li{padding:8px 10px;border-radius:var(--radius-md);background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:700}.dlg--done .btn{margin-top:16px;width:100%}body[data-box-height=xs] .shop{gap:4px}body[data-box-height=xs] .bar__id{display:none}body[data-box-height=xs] .bar__tools{flex:1;justify-content:space-between;gap:4px}body[data-box-height=xs] .pill{min-height:30px;padding:7px 6px;font-size:11px}body[data-box-height=xs] .card{padding:6px 9px}body[data-box-height=xs] .stage,body[data-box-height=xs] .craft{gap:4px}body[data-box-height=xs] .stage__meter,body[data-box-height=xs] .note__main,body[data-box-height=xs] .note__next{display:none}body[data-box-height=xs] .note{min-height:0;padding:0;background:none;box-shadow:none}body[data-box-height=xs] .goal{padding:2px 8px 2px 3px}body[data-box-height=xs] .goal__name{font-size:10.5px}body[data-box-height=xs] .score{height:52px}body[data-box-height=xs] .score__note{top:6px}body[data-box-height=xs] .score__cue{min-height:13px;font-size:10.5px}body[data-box-height=xs] .craft__head{gap:6px}body[data-box-height=xs] .chip--craft{width:22px;height:22px}@media(min-width:1024px){.shop{max-width:1140px;display:grid;gap:14px 16px;grid-template-columns:300px minmax(340px,1fr) 290px;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"bar bar bar" "stage stage stage" "legend craft note" "legend board howto" "legend board .";align-content:start}.bar{grid-area:bar}.stage{grid-area:stage}.craft{grid-area:craft;align-self:start}.howto{grid-area:howto}.board-area{grid-area:board}.note{grid-area:note}.legend{grid-area:legend;align-self:start}.legend__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.legend__name{font-size:10px}.bar__title{font-size:26px}body[data-box-height] .legend,body[data-box-height] .bar__tag,body[data-box-height] .howto{display:block}}