:root{--bg1: #120a3a;--bg2: #2a1170;--ink: #1b1b2e;--card: rgba(255, 255, 255, .96);--go: #ff6b3d;--go2: #ffb03b;--accent: #6f5bff;--radius: 28px;--tap: clamp(52px, 8.4dvh, 72px);--gap: clamp(6px, 1dvh, 10px);font-family:Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;color:#fff;background:radial-gradient(120% 90% at 50% 0%,var(--bg2),var(--bg1) 70%)}input{-webkit-user-select:text;user-select:text}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.35}#stars{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 10% 20%,#fff8,transparent),radial-gradient(1.5px 1.5px at 30% 70%,#fff6,transparent),radial-gradient(2px 2px at 70% 30%,#fff9,transparent),radial-gradient(1.5px 1.5px at 85% 80%,#fff7,transparent),radial-gradient(1px 1px at 55% 55%,#fff8,transparent),radial-gradient(2px 2px at 92% 12%,#fff8,transparent);background-size:400px 300px;animation:drift 60s linear infinite}@keyframes drift{to{background-position:400px 300px}}.screen{position:fixed;inset:0;height:100dvh;display:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.screen.active{display:flex;flex-direction:column;animation:fade .35s ease}@keyframes fade{0%{opacity:0;transform:scale(.98)}}.home-head{text-align:center;padding:2.5dvh 16px .5dvh}.home-head h1{margin:0;font-size:clamp(24px,min(4.4vw,6dvh),48px);letter-spacing:-.5px;text-shadow:0 4px 24px #8a6bff}.home-head p{margin:6px 0 0;font-size:clamp(16px,2vw,22px);opacity:.85}.cards{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.4dvh,18px);padding:1dvh clamp(12px,2.5vw,32px) 2dvh;min-height:0}@media (orientation: portrait){.cards{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,minmax(0,1fr))}}.card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--card);color:var(--ink);border-radius:var(--radius);padding:10px;min-height:0;box-shadow:0 10px #0000002e,0 0 0 4px #ffffff26;transition:transform .12s}.card:active{transform:translateY(6px) scale(.97);box-shadow:0 4px #0000002e}.card canvas{width:100%;flex:1;min-height:0;object-fit:contain;animation:bob 3s ease-in-out infinite}.card:nth-child(2n) canvas{animation-delay:-1.5s}@keyframes bob{50%{transform:translateY(-6%) rotate(-3deg)}}.card b{font-size:clamp(16px,min(2.4vw,3dvh),28px)}.card small{font-size:clamp(11px,min(1.5vw,1.9dvh),16px);color:#5a5a7a;white-space:nowrap}.card .emoji{position:absolute;top:10px;left:14px;font-size:clamp(22px,3vw,34px)}.topbar{display:flex;align-items:center;gap:10px;padding:var(--gap) 14px 0}.topbar .title{flex:1;text-align:center;font-size:clamp(18px,3.2dvh,30px);font-weight:800}.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:4px 12px;border-radius:20px;background:#ffffff24}.chip span{font-size:calc(var(--tap) * .38);line-height:1}.chip b{font-size:12px;margin-top:3px}.chip:active{background:#ffffff4d}.workspace{flex:1;min-height:0;display:flex;gap:var(--gap);padding:var(--gap) 12px 12px}.palette{display:grid;grid-template-columns:repeat(3,var(--tap));grid-auto-rows:var(--tap);gap:var(--gap);align-content:center;padding:6px}.swatch{width:var(--tap);height:var(--tap);border-radius:50%;box-shadow:inset 0 -5px #0000002e,0 0 0 3px #ffffff59}.swatch[data-color="#000000"]{box-shadow:inset 0 -5px #ffffff1f,0 0 0 3px #fff9}.swatch[aria-checked=true]{box-shadow:inset 0 -5px #0000002e,0 0 0 5px #fff,0 0 18px 6px #fff9;transform:scale(1.06)}.board-wrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}.board{position:relative;aspect-ratio:1;width:min(100cqw,100cqh);border-radius:32px;overflow:hidden;background:repeating-conic-gradient(#ffffff10 0 25%,#ffffff05 0 50%) 0 0 / 40px 40px,#140a4680;box-shadow:0 0 0 4px #fff3,0 20px 50px #0006;touch-action:none}.board canvas{position:absolute;inset:0;width:100%;height:100%}#lines{pointer-events:none;mix-blend-mode:multiply}.face-layer{pointer-events:none}.board.free{background:repeating-conic-gradient(#ffffff12 0 25%,#ffffff06 0 50%) 0 0 / 40px 40px,#ffffffeb}#cursor{position:absolute;pointer-events:none;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);display:none;mix-blend-mode:difference}.tools{display:flex;flex-direction:column;gap:var(--gap);justify-content:center;min-height:0}.tool-grid{display:grid;grid-template-columns:repeat(2,calc(var(--tap) * 1.45));grid-auto-rows:calc(var(--tap) * 1.05);gap:var(--gap)}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;background:#ffffff24}.tool span{font-size:calc(var(--tap) * .42);line-height:1}.tool b{font-size:12px;margin-top:3px}.tool[aria-checked=true]{background:#fff;color:var(--ink);box-shadow:0 0 0 4px var(--accent),0 0 20px #a08cffcc}.sizes{display:flex;gap:4px;justify-content:center;background:#ffffff1a;border-radius:20px;padding:4px}.size{flex:0 0 auto;width:calc(var(--tap) * .92);height:var(--tap);display:flex;align-items:center;justify-content:center;border-radius:16px}.size i{display:block;border-radius:50%;background:#fff}.size[aria-checked=true]{background:#ffffff4d;box-shadow:0 0 0 3px #fff}.send{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:calc(var(--tap) * 1.1);padding:8px 14px;border-radius:999px;font-size:clamp(17px,2.6dvh,24px);font-weight:900;color:#fff;background:linear-gradient(135deg,var(--go),var(--go2));box-shadow:0 6px #b33d16,0 0 26px #ff8c3cb3}.send span{font-size:calc(var(--tap) * .45)}.send:not(:disabled){animation:pulse 1.6s ease-in-out infinite}.send:active{transform:translateY(5px);box-shadow:0 2px #b33d16}@keyframes pulse{50%{transform:scale(1.04)}}.stamp-pop{position:fixed;z-index:4;display:grid;grid-template-columns:repeat(3,var(--tap));gap:8px;padding:12px;background:#fff;border-radius:24px;box-shadow:0 16px 50px #00000080}.stamp-pop button{width:var(--tap);height:var(--tap);border-radius:18px;background:#f1edff;font-size:calc(var(--tap) * .5)}.stamp-pop button[aria-checked=true]{box-shadow:0 0 0 4px var(--accent)}@media (orientation: portrait){.workspace{flex-direction:column}.board-wrap{order:1}.tools{order:2;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}.tool-grid{grid-template-columns:repeat(7,calc(var(--tap) * 1.05))}.send{width:auto;padding:8px 28px}.palette{order:3;grid-template-columns:repeat(9,var(--tap));justify-content:center}}#confirm{align-items:center;justify-content:center}.confirm-card{width:min(92vw,640px);background:var(--card);color:var(--ink);border-radius:36px;padding:28px;text-align:center;box-shadow:0 30px 80px #00000080}.preview{width:min(46vh,340px);aspect-ratio:1;margin:0 auto}.preview canvas{width:100%;height:100%;animation:bob 2.4s ease-in-out infinite}.confirm-card h2{margin:8px 0 14px;font-size:clamp(22px,3vw,32px)}.name-row{display:flex;flex-direction:column;gap:6px;font-size:16px;color:#555;margin-bottom:18px}.name-row input{font:inherit;font-size:26px;font-weight:800;text-align:center;padding:12px;border-radius:18px;border:3px solid #d7d0ff;outline:none;color:var(--ink)}.name-row input:focus{border-color:var(--accent)}.confirm-actions,.launch-actions{display:flex;gap:14px;justify-content:center}.big{display:flex;align-items:center;justify-content:center;gap:10px;min-height:84px;padding:12px 28px;border-radius:999px;font-size:clamp(20px,2.4vw,28px);font-weight:900}.big span{font-size:34px}.big.go{color:#fff;background:linear-gradient(135deg,var(--go),var(--go2));box-shadow:0 7px #b33d16}.big.ghost{background:#eeeaff;color:var(--ink);box-shadow:0 7px #c8c0f0}.big.warn{color:#fff;background:#ff4f6d;box-shadow:0 7px #b02640}.big.candy{color:#fff;background:linear-gradient(135deg,#ff5fd2,#9b5cff);box-shadow:0 7px #6a2bb5}.big:active{transform:translateY(5px);box-shadow:none}#launch{align-items:center;justify-content:center;overflow:hidden}.countdown{position:absolute;top:12%;font-size:18vh;font-weight:900;text-shadow:0 0 40px #ff9a3c}.flyer{width:min(40vh,320px);aspect-ratio:1}.flyer canvas{width:100%;height:100%}.flyer.go{animation:blast 1.4s cubic-bezier(.5,0,.9,.3) forwards}@keyframes blast{0%{transform:translateY(0) scale(1) rotate(0)}15%{transform:translateY(4vh) scale(1.05,.92)}to{transform:translateY(-120vh) scale(.3) rotate(-25deg);opacity:.2}}.flyer.shake{animation:shake .12s linear infinite}@keyframes shake{25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}.launch-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;animation:fade .5s}.launch-msg h2{font-size:clamp(30px,5vw,56px);margin:0;text-shadow:0 0 30px #8a6bff}.launch-msg p{font-size:clamp(18px,2.4vw,26px);margin:10px 0 34px;opacity:.9}.spark{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;animation:spark 1s ease-out forwards}@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#08041eb3;backdrop-filter:blur(6px)}.overlay[hidden]{display:none}.overlay-card{background:var(--card);color:var(--ink);border-radius:32px;padding:30px 36px;text-align:center;min-width:min(90vw,420px)}.overlay-card h2{margin:0 0 10px;font-size:30px}.overlay-card p{font-size:20px;margin:0 0 22px}.status{position:fixed;left:10px;bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;font-size:12px;opacity:.6;z-index:2}.status i{width:10px;height:10px;border-radius:50%;background:#4dff9a;box-shadow:0 0 8px #4dff9a}.status.off i{background:#ff4d6d;box-shadow:0 0 8px #ff4d6d}.stamp-pop[hidden]{display:none}.big.touch{color:#fff;background:linear-gradient(135deg,#22c1ff,#3d5afe);box-shadow:0 7px #1f3aa8}.launch-actions{flex-wrap:wrap}.touchpad{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;gap:10px;padding:14px;background:#060318f5}.touchpad[hidden]{display:none}.tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:clamp(18px,2.4vw,26px)}#tp-canvas{flex:1;width:100%;min-height:0;border-radius:24px;background:radial-gradient(120% 140% at 50% 0%,#2a1170,#0a0620);touch-action:none}.tp-foot{display:flex;justify-content:center}.eye-pop{grid-template-columns:repeat(2,calc(var(--tap) * 2))}.eye-pop button{width:calc(var(--tap) * 2);height:calc(var(--tap) * 1.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink)}.eye-pop button canvas{width:80%;height:auto}.eye-pop button b{font-size:12px}.eye-pop[hidden]{display:none}
