:root{--ink:#21304c;--muted:#5d6c85;--line:#cbdcec;--blue:#4354cf;--good:#167656;--bad:#c24757}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:system-ui,"Noto Sans KR",sans-serif;color:var(--ink);background:linear-gradient(165deg,#e9f7ff,#fff8e8)}button{font:inherit;cursor:pointer}button:focus-visible{outline:4px solid #ffae42;outline-offset:3px}.app-shell{width:min(1120px,calc(100% - 28px));margin:auto;padding:18px 0 40px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.brand{font-size:clamp(20px,3vw,29px);font-weight:900;letter-spacing:-.04em}.progress{font-size:17px;font-weight:800;white-space:nowrap;background:#fff;border-radius:999px;padding:10px 16px}.progress-dots{display:inline-flex;gap:5px;margin-left:8px}.progress-dots i{display:block;width:11px;height:11px;background:#c7d7ec;border-radius:50%}.progress-dots i.done{background:#38ad83}.progress-dots i.active{background:#f59e38;box-shadow:0 0 0 3px #ffe2ad}.game{background:#fff;border:2px solid #dbe8f4;border-radius:27px;padding:clamp(16px,3vw,30px);box-shadow:0 12px 32px #1b3e6a19}.mission-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.eyebrow{font-size:15px;font-weight:850;color:var(--blue);margin:0 0 5px}h1{font-size:clamp(27px,4vw,40px);letter-spacing:-.05em;margin:0}.instruction{font-size:clamp(18px,2.5vw,23px);font-weight:800;margin:8px 0 0}.icon-button{font-size:28px;border:2px solid var(--line);background:#f4faff;border-radius:18px;width:62px;height:60px;flex:none}.guide{min-height:29px;margin:14px 0 8px;color:var(--muted);font-weight:700;font-size:16px}.board,.choices{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(7px,1.2vw,13px);padding:12px 2px}.board{min-height:184px;background:#f5faff;border-radius:22px}.choices{margin-top:6px;background:#fffaf0;border-radius:18px}.choices::before{content:"하나 골라 빈칸에 넣어요";width:100%;text-align:center;font-size:16px;font-weight:800;color:#765c35}.card,.empty-slot{width:clamp(105px,15.5vw,174px);height:clamp(105px,15.5vw,174px);border-radius:19px;flex:none}.card{background:#fff;border:3px solid #c5d7ed;padding:5px;box-shadow:0 5px 0 #dae8f6;touch-action:manipulation;transition:transform .15s,border-color .15s;position:relative}.card img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;pointer-events:none}.card:hover{transform:translateY(-3px)}.card.selected{border-color:#f49a24;box-shadow:0 0 0 4px #ffdb9a}.card.playing{border-color:#4669e3;transform:translateY(-8px)}.card.wrong{border-color:var(--bad);animation:shake .4s}.card.correct{border-color:var(--good)}.card[disabled]{cursor:default}.empty-slot{border:4px dashed #efad51;background:#fffaeb;color:#8d622e;display:grid;place-items:center;text-align:center;font-size:19px;font-weight:850;line-height:1.3}.empty-slot.pulse{animation:pulse .6s}.situation{height:clamp(160px,24vw,240px);margin-top:16px;border-radius:20px;background:#162035 center/cover no-repeat;position:relative;overflow:hidden}.situation::after{content:"🔦 ?";font-size:clamp(34px,5vw,55px);display:grid;place-items:center;color:#fff;position:absolute;inset:0;text-shadow:0 3px 9px #000}.situation.lit::after{content:"✨";background:radial-gradient(circle,#fff6aabb,transparent 57%)}.trash-wrap{text-align:center;margin:12px 0 0}.trash{border:3px dashed #dc877e;border-radius:18px;background:#fff6f1;color:#983d39;padding:12px 25px;font-size:20px;font-weight:850;min-height:62px}.trash.over{background:#ffe1d8}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 8px}.controls button{border-radius:16px;border:0;padding:14px 24px;min-height:59px;font-size:20px;font-weight:900}.primary{background:var(--blue);color:#fff}.primary:disabled{background:#9fa8cb}.secondary{background:#eaf2ff;color:#32467e}.result{min-height:36px;text-align:center;font-size:clamp(19px,3vw,25px);font-weight:850;padding:8px 0}.result.good{color:var(--good)}.result.bad{color:var(--bad)}.preview{display:flex;justify-content:center;align-items:center;gap:8px;min-height:0}.preview img{width:clamp(55px,11vw,104px);height:clamp(55px,11vw,104px);object-fit:contain;border:2px solid #dbe4f1;border-radius:12px}.preview .halt{font-size:28px;color:var(--bad);font-weight:900}.preview:empty{display:none}@keyframes shake{25%,75%{transform:translateX(-6px)}50%{transform:translateX(6px)}}@keyframes pulse{50%{background:#ffdd96;transform:scale(1.04)}}@media(max-width:700px){.topbar{align-items:flex-start;flex-direction:column}.board{min-height:130px}.card,.empty-slot{width:clamp(86px,27vw,130px);height:clamp(86px,27vw,130px)}.controls button{font-size:17px}.choices::before{font-size:14px}}
/* 8: brief, answer-neutral gesture examples on the first visit to each type. */
.demo{height:65px;margin:0 0 12px;padding:7px;display:flex;align-items:center;justify-content:center;gap:18px;border-radius:17px;background:#edf7f7;overflow:hidden}.demo>div{position:relative;width:144px;height:47px;display:none;align-items:center;justify-content:space-between}.demo.sequence .demo-swap,.demo.fixOne .demo-swap,.demo.multiSequence .demo-swap,.demo.missing .demo-fill,.demo.extra .demo-remove,.demo.challenge .demo-remove,.demo.challenge .demo-swap{display:flex}.demo-tile{display:block;width:40px;height:40px;border:3px solid #5161ae;border-radius:8px;background:#a9d4f6;flex:none}.demo-tile.two,.demo-tile.incoming{background:#f9bf73;border-color:#aa692f}.demo-tile.slot{border-style:dashed;background:transparent}.demo-bin{font-size:32px;line-height:1}.demo-pointer{position:absolute;left:23px;top:23px;font-size:21px;z-index:1;filter:drop-shadow(0 1px 1px #fff)}.demo-swap .one{animation:demo-first 2.4s ease-in-out both}.demo-swap .two{animation:demo-second 2.4s ease-in-out both}.demo-swap .demo-pointer{animation:demo-tap 2.4s ease-in-out both}.demo-fill .incoming{animation:demo-in 2.4s ease-in-out both}.demo-fill .demo-pointer{left:95px;animation:demo-in 2.4s ease-in-out both}.demo-remove .leaving{animation:demo-out 2.4s ease-in-out both}.demo-remove .demo-pointer{animation:demo-out 2.4s ease-in-out both}.demo.challenge .demo-remove{animation:demo-first-half 2.4s both}.demo.challenge .demo-swap{animation:demo-last-half 2.4s both}@keyframes demo-first{0%,35%{transform:translateX(0)}70%,100%{transform:translateX(104px)}}@keyframes demo-second{0%,35%{transform:translateX(0)}70%,100%{transform:translateX(-104px)}}@keyframes demo-tap{0%,28%{transform:translate(0,0)}38%{transform:translate(0,-8px)}48%,100%{transform:translate(103px,0)}}@keyframes demo-in{0%,35%{transform:translateX(0)}70%,100%{transform:translateX(-104px)}}@keyframes demo-out{0%,35%{transform:translateX(0);opacity:1}75%,100%{transform:translateX(104px);opacity:0}}@keyframes demo-first-half{0%,48%{opacity:1}49%,100%{opacity:0}}@keyframes demo-last-half{0%,48%{opacity:.2}49%,100%{opacity:1}}@media(prefers-reduced-motion:reduce){.demo *{animation:none!important}}
.board .card::after,.board .empty-slot::after{content:attr(data-step);position:absolute;top:-6px;left:-6px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#465b9c;color:#fff;font-size:14px;font-weight:900;box-shadow:0 1px 3px #0003}.board .empty-slot{position:relative}.board{column-gap:clamp(8px,1.2vw,13px);row-gap:16px}
@media(max-width:700px){.card,.empty-slot{width:clamp(75px,24vw,120px);height:clamp(75px,24vw,120px)}.board,.choices{column-gap:7px;row-gap:16px}.demo.challenge{gap:3px}.demo.challenge>div{width:120px}}
.result.good::before{content:"⭐";display:inline-block;margin-right:8px}.result.bad::before{content:"↩";display:inline-block;margin-right:8px;font-size:1.15em}
@media(max-width:700px){.demo.challenge>div{width:144px}.demo.challenge{gap:2px}}
@media(max-width:380px){.demo.challenge>div{transform:scale(.8);margin:0 -15px}}
.progress-dots{flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:240px;vertical-align:middle}.progress-dots i{width:8px;height:8px}.progress-dots i.active{box-shadow:0 0 0 2px #ffe2ad}
@media(max-width:700px){.progress{white-space:normal}.progress-dots{justify-content:flex-start;margin:7px 0 0;max-width:100%}}