:root{--bg-cream:#fbf2e4;--bg-lavender:#efe6fa;--ink-purple:#5b3e96;--ink-purple-deep:#3d2a66;--ink-text:#3a2e4d;--gold:#e3a73c;--gold-light:#f6d688;--coral:#f0906e;--white:#fffdf8;--line-soft:#e1d5f2;--shadow-soft:0 10px 30px #5b3e961f}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%;margin:0;padding:0}body{min-height:100dvh;color:var(--ink-text);background:radial-gradient(circle at 30% 0,#f6ecfb 0%,#ede3f6 45%,#e3d7f2 100%);justify-content:center;align-items:flex-start;font-family:Noto Sans KR,sans-serif;display:flex}.app-shell{background:var(--bg-cream);flex-direction:column;width:100%;max-width:430px;min-height:100dvh;display:flex;position:relative;overflow:hidden;box-shadow:0 0 60px #3d2a662e}header.app-header{background:linear-gradient(180deg, var(--bg-lavender), #efe6fa00);z-index:5;flex-shrink:0;padding:22px 20px 14px;position:relative}.top-row{justify-content:space-between;align-items:center;min-height:28px;margin-bottom:14px;display:flex}.brand{letter-spacing:.5px;color:var(--ink-purple);opacity:.85;align-items:center;gap:6px;font-family:Jua,sans-serif;font-size:14px;display:flex}.back-btn{background:var(--white);width:34px;height:34px;color:var(--ink-purple);cursor:pointer;visibility:hidden;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex;box-shadow:0 3px 8px #5b3e9626}.back-btn.show{visibility:visible}.step-title{color:var(--ink-purple-deep);text-align:center;margin:0 0 12px;font-family:Jua,sans-serif;font-size:18px}.dots{justify-content:center;gap:10px;display:flex}.dot{background:var(--white);opacity:.45;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;transition:all .25s;display:flex;transform:scale(.9);box-shadow:0 2px 6px #5b3e9614}.dot.active{opacity:1;background:var(--gold-light);transform:scale(1.12);box-shadow:0 4px 12px #e3a73c66}.dot.done{opacity:1;background:var(--ink-purple);color:#fff}main.app-body{flex:1;min-height:0;position:relative;overflow:hidden}.screen{opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;padding:20px;transition:opacity .32s,transform .32s;display:flex;position:absolute;inset:0;transform:translate(24px)scale(.98)}.screen.active{opacity:1;pointer-events:auto;transform:translate(0)scale(1)}#screen-home,#screen-gallery{overscroll-behavior:contain;justify-content:flex-start;padding-top:8px;overflow-y:auto}#homeLanding{flex-direction:column;align-items:center;width:100%;display:flex}.home-hero{text-align:center;flex-shrink:0;padding:6px 10px 10px}.home-hero h1{color:var(--ink-purple-deep);margin:0 0 6px;font-family:Jua,sans-serif;font-size:22px}.home-hero p{color:#7a6b95;margin:0;font-size:12.5px;line-height:1.5}.mywritings-link{background:var(--white);color:var(--ink-purple);box-shadow:var(--shadow-soft);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:7px;margin-top:20px;padding:11px 22px;font-family:Jua,sans-serif;font-size:13px;transition:transform .15s;display:flex}.mywritings-link:active{transform:scale(.97)}.yuka-brand{border-radius:999px;align-items:center;gap:8px;margin-top:34px;padding:8px 16px;display:flex}.yuka-logo{object-fit:contain;width:26px;height:26px}.yuka-link{color:#9a8ab5;letter-spacing:.3px;font-family:Jua,sans-serif;font-size:12px;text-decoration:none}#homeGrid{flex-direction:column;align-items:center;width:100%;display:flex}.back-link{color:var(--ink-purple);cursor:pointer;background:0 0;border:none;align-self:flex-start;margin-bottom:6px;padding:4px 4px 2px;font-family:Jua,sans-serif;font-size:13px}.category-explain{background:var(--white);box-shadow:var(--shadow-soft);color:var(--ink-text);text-align:center;border-radius:16px;max-width:280px;margin-bottom:10px;padding:10px 16px;font-size:12px;line-height:1.5}.progress-row{align-items:center;gap:8px;display:flex}.progress-pill{background:var(--white);color:var(--ink-purple);box-shadow:var(--shadow-soft);border-radius:999px;width:fit-content;margin:2px auto 0;padding:6px 16px;font-size:12px;font-weight:700}.reset-link{color:#b08a9a;cursor:pointer;background:0 0;border:none;padding:6px 4px;font-family:Jua,sans-serif;font-size:11.5px}.jamo-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;padding:14px 6px 28px;display:grid}.jamo-card{aspect-ratio:1/1.05;background:var(--white);box-shadow:var(--shadow-soft);cursor:pointer;border:2px solid #0000;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;transition:transform .18s,box-shadow .18s;display:flex;position:relative}.jamo-card:active{transform:scale(.94)}.jamo-card .ch{color:var(--ink-purple-deep);font-family:Gowun Batang,serif;font-size:30px;font-weight:700}.jamo-card .nm{color:#9a8ab5;text-align:center;margin-top:2px;font-size:9.5px;line-height:1.3}.jamo-card.collected{border-color:var(--gold)}.stamp{background:var(--gold);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;animation:.35s stampPop;display:flex;position:absolute;top:-8px;right:-8px;transform:rotate(12deg);box-shadow:0 4px 10px #e3a73c80}@keyframes stampPop{0%{transform:rotate(12deg)scale(0)}to{transform:rotate(12deg)scale(1)}}.gallery-title{color:var(--ink-purple-deep);margin:4px 0 6px;font-family:Jua,sans-serif;font-size:19px}.gallery-empty{color:#9a8ab5;text-align:center;max-width:230px;margin:30px auto;font-size:12.5px;line-height:1.6}.gallery-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;padding:10px 4px 24px;display:grid;overflow-y:auto}.gallery-card{background:var(--white);box-shadow:var(--shadow-soft);aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden}.gallery-card img{object-fit:cover;width:100%;height:100%;display:block}.gallery-card .gc-label{color:#fff;background:#3d2a66bf;border-radius:999px;padding:2px 7px;font-family:Jua,sans-serif;font-size:9.5px;position:absolute;bottom:5px;left:6px}.gallery-card .gc-del{color:#b0455a;cursor:pointer;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;display:flex;position:absolute;top:4px;right:4px}.see-char{color:var(--ink-purple-deep);text-shadow:0 8px 20px #5b3e962e;margin-bottom:4px;font-family:Gowun Batang,serif;font-size:120px;font-weight:700;line-height:1}.see-sub{color:var(--ink-purple);align-items:center;gap:8px;margin-bottom:12px;font-family:Jua,sans-serif;font-size:16px;display:flex}.see-sub .phonics{color:#9a8ab5;background:var(--white);box-shadow:var(--shadow-soft);border-radius:999px;padding:3px 10px;font-family:Noto Sans KR,sans-serif;font-size:11.5px;font-weight:500}.combo-row{align-items:center;gap:8px;margin-bottom:18px;display:flex}.combo-tile{background:var(--white);color:var(--ink-purple-deep);box-shadow:var(--shadow-soft);text-align:center;border-radius:14px;min-width:24px;padding:8px 14px;font-family:Gowun Batang,serif;font-size:26px}.combo-op{color:#9a8ab5;font-family:Jua,sans-serif;font-size:16px}.combo-result{background:linear-gradient(135deg, var(--gold-light), var(--gold));color:#fff;border-radius:14px;padding:8px 18px;font-family:Gowun Batang,serif;font-size:30px;box-shadow:0 8px 20px #e3a73c66}.speaker-btn{background:linear-gradient(150deg, var(--gold-light), var(--gold));color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:92px;height:92px;font-size:38px;transition:transform .15s;display:flex;position:relative;box-shadow:0 12px 26px #e3a73c73}.speaker-btn:active{transform:scale(.94)}.wave{border:3px solid var(--gold);opacity:0;border-radius:50%;position:absolute;inset:0}.wave.animate{animation:1s ease-out waveOut}@keyframes waveOut{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}.sound-popup{color:var(--ink-purple-deep);background:var(--white);opacity:0;pointer-events:none;z-index:10;border-radius:20px;flex-direction:column;align-items:center;gap:3px;padding:14px 28px;font-family:Jua,sans-serif;display:flex;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)scale(.6);box-shadow:0 14px 30px #5b3e9640}.sound-popup .roman{font-size:26px}.sound-popup .kr{color:#9a8ab5;font-family:Noto Sans KR,sans-serif;font-size:12px;font-weight:500}.sound-popup .soundline{color:var(--gold);margin-top:2px;font-family:Noto Sans KR,sans-serif;font-size:11.5px;font-weight:700}.sound-popup.show{animation:1.3s popIn}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}18%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}30%{transform:translate(-50%,-50%)scale(1)}82%{opacity:1}to{opacity:0;transform:translate(-50%,-58%)scale(1)}}.hint-text{color:#9a8ab5;margin-top:16px;font-size:12.5px}.hint-text.small{margin-top:10px;font-size:12px}.rule-banner{background:var(--white);color:var(--ink-purple-deep);box-shadow:var(--shadow-soft);border-radius:999px;align-items:center;gap:6px;margin-bottom:10px;padding:7px 14px;font-size:11px;font-weight:700;display:flex}.trace-toolbar{align-items:center;gap:10px;margin-bottom:10px;display:flex}.mini-btn{background:var(--white);color:var(--ink-purple);box-shadow:var(--shadow-soft);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:6px;padding:8px 16px;font-size:12.5px;font-weight:700;display:flex}.canvas-frame{background:var(--white);width:270px;height:270px;box-shadow:var(--shadow-soft);touch-action:none;border-radius:26px;position:relative;overflow:hidden}canvas{touch-action:none;position:absolute;inset:0}canvas.no-touch{pointer-events:none}.pen-tip{pointer-events:none;opacity:0;filter:drop-shadow(0 3px 4px #0003);font-size:22px;position:absolute;transform:translate(-6px,-6px)}.particle{background:var(--gold);pointer-events:none;border-radius:50%;width:6px;height:6px;animation:.7s ease-out forwards sparkleUp;position:absolute}@keyframes sparkleUp{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-26px)scale(.3)}}.stroke-counter{color:var(--ink-purple);background:var(--white);box-shadow:var(--shadow-soft);opacity:0;border-radius:999px;margin-top:10px;padding:5px 14px;font-size:12px;font-weight:700;transition:opacity .2s}.write-toolbar{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.action-btn{background:var(--white);color:var(--ink-purple-deep);box-shadow:var(--shadow-soft);cursor:pointer;white-space:nowrap;border:none;border-radius:999px;align-items:center;gap:5px;padding:10px 16px;font-size:12.5px;font-weight:700;transition:transform .15s;display:flex}.action-btn:active{transform:scale(.96)}.action-btn.primary{background:var(--ink-purple);color:#fff}.action-btn.accent{background:linear-gradient(135deg, var(--gold-light), var(--gold));color:#fff}#screen-complete .big-emoji{margin-bottom:10px;font-size:70px;animation:.6s bounceIn}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}to{transform:scale(1)}}#screen-complete h2{color:var(--ink-purple-deep);margin:0 0 8px;font-family:Jua,sans-serif;font-size:22px}#screen-complete p{color:#7a6b95;text-align:center;margin:0 0 18px;font-size:13.5px;line-height:1.6}.earned-card{background:var(--white);box-shadow:var(--shadow-soft);border-radius:24px;flex-direction:column;align-items:center;margin-bottom:6px;padding:20px 36px;display:flex}.earned-card .ch{color:var(--ink-purple-deep);font-family:Gowun Batang,serif;font-size:58px}.confetti-piece{opacity:.9;border-radius:2px;animation:linear forwards fall;position:absolute;top:-10px}@keyframes fall{to{opacity:0;transform:translateY(800px)rotate(400deg)}}footer.app-footer{background:linear-gradient(0deg, var(--bg-cream) 60%, #fbf2e400);flex-shrink:0;padding:16px 20px 22px}.next-btn{background:linear-gradient(135deg, var(--ink-purple), var(--ink-purple-deep));color:#fff;cursor:pointer;border:none;border-radius:20px;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px;font-family:Jua,sans-serif;font-size:17px;transition:transform .15s;display:flex;box-shadow:0 12px 24px #5b3e9659}.next-btn:active{transform:scale(.97)}.next-btn.gold{background:linear-gradient(135deg, var(--gold), #d68f2a);box-shadow:0 12px 24px #e3a73c66}.complete-nav{gap:12px;display:flex}.nav-btn{cursor:pointer;background:var(--white);color:var(--ink-purple);box-shadow:var(--shadow-soft);border:none;border-radius:20px;flex:1;justify-content:center;align-items:center;gap:6px;padding:16px;font-family:Jua,sans-serif;font-size:15px;transition:transform .15s;display:flex}.nav-btn.primary{background:linear-gradient(135deg, var(--ink-purple), var(--ink-purple-deep));color:#fff;box-shadow:0 12px 24px #5b3e9659}.nav-btn:active{transform:scale(.97)}.nav-btn.disabled{opacity:.4;pointer-events:none}@supports (padding-bottom:env(safe-area-inset-bottom)){footer.app-footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}}