:root{--ink:#173c26;--green:#56a52c;--lime:#dfff9e;--cream:#fffdf4;--orange:#ff9c4a;--blue:#42a5d5;--shadow:0 10px 24px rgba(34,94,50,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Arial Rounded MT Bold","Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);background:linear-gradient(180deg,#e9ffd9 0,#fffdf4 45%,#e8f8ff 100%)}body{min-height:100svh;padding:clamp(24px,4vh,48px) clamp(20px,3.5vw,48px)}main{max-width:1200px;margin:0 auto;min-height:calc(100svh - clamp(48px,8vh,96px));display:flex;flex-direction:column;justify-content:center}header{text-align:center;margin-bottom:26px}h1{margin:0;font-size:clamp(1.75rem,3.8vw,3rem);letter-spacing:-.06em;line-height:1.2;color:#276b32}.guide{margin:10px 0 0;font-size:clamp(1rem,1.7vw,1.25rem);font-weight:700;color:#51705a}.stage{min-height:92px;margin:24px auto 32px;max-width:900px;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:14px;background:white;border:3px solid #8fd356;border-radius:26px;box-shadow:var(--shadow);text-align:center}.stage-icon{font-size:2rem;animation:pulse 1.4s ease-in-out infinite}#spokenText{font-size:clamp(1.25rem,3vw,2.2rem);font-weight:900;line-height:1.25;letter-spacing:-.04em}#spokenText .sound{color:#e6672c;margin-left:.35em}.grid-wrap{overflow-x:auto;padding:4px 4px 18px}.frog-grid{display:grid;grid-template-columns:repeat(5,minmax(146px,1fr));gap:24px 18px;min-width:790px}.card{position:relative;display:flex;min-height:255px;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px 10px 15px;border:3px solid rgba(68,143,60,.22);border-radius:25px;background:rgba(255,255,255,.94);box-shadow:0 7px 0 rgba(68,143,60,.13);color:inherit;cursor:pointer;overflow:hidden}.card.active{border-color:#ff963e;background:#fff8d9}.artbox{position:relative;width:100%;height:160px;display:grid;place-items:center}.frog{width:152px;height:152px;background-image:var(--frog-sprite);background-repeat:no-repeat;background-size:500% 200%;filter:drop-shadow(0 7px 4px rgba(30,82,40,.13));will-change:transform}.frog[data-i="0"]{background-position:0% 0%}.frog[data-i="1"]{background-position:25% 0%}.frog[data-i="2"]{background-position:50% 0%}.frog[data-i="3"]{background-position:75% 0%;clip-path:polygon(0 0,100% 0,100% 100%,24% 100%,24% 69%,0 69%)}.frog[data-i="4"]{background-position:100% 0%}.frog[data-i="5"]{background-position:0% 100%}.frog[data-i="6"]{background-position:25% 100%}.frog[data-i="7"]{background-position:50% 100%}.frog[data-i="8"]{background-position:75% 100%}.frog[data-i="9"]{background-position:100% 100%}.label{font-size:1.05rem;font-weight:900}.onomatopoeia{display:inline-block;margin-top:5px;padding:4px 10px;border-radius:999px;background:#e7f9ce;color:#36752d;font-size:1rem;font-weight:900}.hint{text-align:center;font-size:.92rem;font-weight:700;color:#5e7765;margin:18px 0 12px}.active .onomatopoeia{background:#ff9c4a;color:#fff}.active.walk .frog{animation:walk 1.25s ease-in-out}.active.jump .frog{animation:jump 1.05s cubic-bezier(.2,.7,.2,1)}.active.swim .frog{animation:swim 1.5s ease-in-out}.active.sing .frog{animation:sing .42s ease-in-out 4}.active.dance .frog{animation:dance .38s ease-in-out 5}.active.laugh .frog{animation:laugh .25s ease-in-out 7}.active.cry .frog{animation:cry .2s ease-in-out 7}.active.fart .frog{animation:fart .55s ease-out 3}.active.eat .frog{animation:eat .3s ease-in-out 6}.active.sleep .frog{animation:sleep 1.6s ease-in-out 2}.puff{position:absolute;right:12px;bottom:46px;opacity:0;font-size:2.2rem}.active.fart .puff{animation:puff 1.1s ease-out 1}@keyframes walk{0%,100%{transform:translateX(-14px) rotate(-4deg)}25%{transform:translate(0,-8px) rotate(4deg)}50%{transform:translateX(14px) rotate(-4deg)}75%{transform:translate(0,-8px) rotate(4deg)}}@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-58px) rotate(5deg)}}@keyframes swim{0%,100%{transform:translateX(-14px) rotate(-5deg)}50%{transform:translateX(16px) rotate(5deg)}}@keyframes sing{50%{transform:scale(1.09) translateY(-3px)}}@keyframes dance{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg) translateY(-9px)}}@keyframes laugh{50%{transform:translateY(-6px) scale(1.04)}}@keyframes cry{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}@keyframes fart{35%{transform:translateX(-16px) rotate(-4deg)}}@keyframes puff{20%{opacity:1}100%{opacity:0;transform:translate(46px,-34px) scale(1.5)}}@keyframes eat{50%{transform:scale(1.06,.96)}}@keyframes sleep{0%,100%{transform:rotate(-2deg)}50%{transform:scale(1.03) rotate(2deg)}}@keyframes pulse{50%{transform:scale(1.14)}}[hidden]{display:none!important}.page-nav{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 clamp(32px,4vh,48px);justify-content:center}.page-nav button,.exercise-tools button{font:inherit;font-weight:800;padding:14px 18px;border:2px solid #73ae53;border-radius:15px;background:white;color:#214e2b;cursor:pointer;min-height:48px}.page-nav button[aria-current="page"]{background:#276b32;color:white;border-color:#276b32}button:focus-visible{outline:4px solid #165ca5;outline-offset:3px}.exercise-head{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;margin:0 4px clamp(26px,3.5vh,40px)}.exercise-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap}#progress{font-size:1.2rem;font-weight:900}.match-feedback:empty{display:none}.match-feedback{padding:9px 14px;border-radius:16px;background:white;border:2px solid #8fd356;font-size:1.2rem;font-weight:800;margin:6px 0 10px}.matching-board{display:flex;flex-direction:column;gap:clamp(28px,4vh,44px);overflow-x:auto;padding:6px 6px 16px;max-width:1100px;margin:0 auto}.match-column{min-width:720px}.match-column h3{text-align:center;margin:0 0 16px;color:#526952}.match-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,24px)}.match-button{position:relative;width:100%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 10px;border:3px solid #a2c98c;border-radius:18px;background:white;color:#173c26;font:inherit;font-weight:800;cursor:pointer;overflow:hidden}.match-button .frog{width:85%;height:auto;aspect-ratio:1;filter:none}.match-button.selected{border-color:#e88318;background:#fff0c9}.match-button.matched{border-color:#3d8b31;background:#e5f7da;color:#204f27}.match-button.wrong{border-color:#c86b20;background:#fff1e4}.match-mark{position:absolute;right:6px;top:3px;font-size:.9rem;background:#276b32;color:white;border-radius:8px;padding:1px 5px}.sentence-subject{font-size:clamp(1rem,12cqi,1.5rem);font-weight:600;color:#526952}.sentence-action{font-size:clamp(1.5rem,21cqi,3rem);font-weight:900;color:#225c2a;white-space:nowrap}.sentence-action.long{font-size:clamp(1.25rem,15cqi,2.25rem)}.sound-word{font-size:clamp(1.4rem,20cqi,2.8rem);font-weight:900;color:#225c2a;white-space:nowrap}.listen-mark{position:absolute;bottom:7px;right:9px}@media(max-width:860px){.card{min-height:230px}.artbox{height:140px}.frog{width:136px;height:136px}.frog-grid{min-width:740px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}