:root{--bg: #fff8ef;--surface: #ffffff;--ink: #2a2522;--muted: #8a7f76;--line: #eadfd0;--accent: #e8574f;--accent-soft: #fde3e1;--radius: 20px;--btn: 64px;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Malgun Gothic,Noto Sans KR,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}.screen{height:100%;display:flex;flex-direction:column;padding:16px;gap:16px}.topbar{display:flex;align-items:center;gap:12px;min-height:var(--btn)}.title{flex:1;margin:0;font-size:32px;font-size:clamp(22px,3.2vw,34px);text-align:center}.topbar-spacer{width:120px}.btn{min-width:var(--btn);min-height:var(--btn);padding:0 20px;border:2px solid var(--line);border-radius:18px;background:var(--surface);font-size:20px;font-weight:600;box-shadow:0 3px 0 var(--line)}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}.btn:disabled{opacity:.35;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px #b8403a}.btn-back{width:120px}.btn-icon{padding:0;font-size:28px}.card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;border:3px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 4px 0 var(--line)}.card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.card.is-last{border-color:var(--accent)}.card-sample{font-size:68px;font-size:clamp(40px,7vw,72px);font-weight:700;line-height:1.1}.card-title{font-size:22px;font-weight:700}.card-sub{font-size:15px;color:var(--muted)}.card-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-auto-rows:minmax(150px,1fr);gap:16px;overflow-y:auto}@media (orientation: landscape){.card-grid{grid-template-columns:repeat(12,1fr)}.card-grid>.group-card{grid-column:span 3}.card-grid>.group-card:nth-child(-n+3){grid-column:span 4}}.dev-links{display:flex;gap:16px;justify-content:center;font-size:14px}.dev-links a{color:var(--muted)}.mode-list{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-content:center;max-width:900px;width:100%;margin:0 auto}.mode-card{min-height:240px}.mode-card .card-title{font-size:32px}.tile{border:3px solid var(--line);border-radius:16px;background:var(--surface);font-size:48px;font-weight:700;box-shadow:0 3px 0 var(--line)}.tile.is-empty{color:#cfc6bd;background:transparent;box-shadow:none;border-style:dashed;cursor:default}.screen-practice{gap:12px}.glyph-title{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.glyph-name{font-size:38px;font-size:clamp(26px,4vw,40px);font-weight:800}.progress{width:120px;text-align:right;font-size:20px;font-weight:700;color:#c98a12}.glyph-strip{display:grid;grid-gap:6px;gap:6px}.strip-tile{position:relative;min-width:0;height:46px;padding:0;border:2px solid transparent;border-radius:10px;background:#f3ece2;color:#b3a597;font-size:24px;font-weight:700;line-height:1}.strip-tile.is-cleared{background:var(--surface);border-color:#b9e3c8;color:var(--ink)}.strip-tile.is-cleared:after{content:"✓";position:absolute;top:-6px;right:-4px;width:18px;height:18px;border-radius:50%;background:#3db46d;color:#fff;font-size:12px;line-height:18px;text-align:center}.strip-tile.is-current{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);box-shadow:0 0 0 2px var(--accent)}.stage-area{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}.stage-area>.stage{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}.stage{position:relative;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 3px var(--line);touch-action:none}.stage-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:inherit}.stage-ink{touch-action:none;cursor:crosshair}.stage.is-review .stage-layer:first-child{z-index:1;opacity:.55;pointer-events:none}.stage.is-review .stage-ink{cursor:default}.glyph-caption{text-align:center;font-size:36px;font-size:clamp(28px,4.5vh,44px);font-weight:800;line-height:1}.glyph-caption.is-alert{font-size:24px;font-size:clamp(20px,3.2vh,30px);line-height:1.2;color:var(--accent)}.toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.button-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}[hidden]{display:none!important}.btn-check{min-width:140px;font-size:24px}.toolbar-spacer{flex:1;min-width:0}.toast{position:absolute;top:12px;left:50%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:calc(100% - 24px);padding:12px 28px;border-radius:24px;text-align:center;background:#2a2522e0;color:#fff;pointer-events:none;opacity:0;transform:translate(-50%,-12px);transition:opacity .2s,transform .2s}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast strong{font-size:26px}.toast span{font-size:18px;color:#ffd9d6}.praise{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#fff8efbf;animation:fade-in .2s ease-out}.praise-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:36px 40px;border:3px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 10px 0 var(--line);animation:pop-in .35s cubic-bezier(.2,1.4,.4,1)}.praise-star{font-size:96px;line-height:1}.praise-msg{font-size:42px;font-size:clamp(30px,5vw,44px);font-weight:800}.praise{cursor:pointer}.praise-sub{font-size:20px;font-weight:600;color:var(--muted)}.praise-timer{width:220px;height:6px;border-radius:3px;background:var(--accent);transform-origin:left;animation-name:praise-timer;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes praise-timer{to{transform:scaleX(0)}}.praise.is-big .praise-star{font-size:128px}.praise.is-big .praise-msg{font-size:56px}.praise.is-big .praise-card{padding:48px 64px}.praise-star{animation:star-spin .9s cubic-bezier(.2,1.4,.4,1)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti-piece,.confetti-star{position:absolute;left:50%;top:45%;animation:burst 1.6s cubic-bezier(.15,.7,.3,1) var(--delay) both}.confetti-piece{width:14px;height:22px;margin:-11px 0 0 -7px;border-radius:3px}.confetti-star{margin:-18px 0 0 -18px;font-size:36px;line-height:1}@keyframes burst{0%{transform:translate(0) scale(.3) rotate(0);opacity:1}70%{opacity:1}to{transform:translate(var(--x),calc(var(--y) + 14vmin)) scale(1) rotate(var(--r));opacity:0}}@keyframes star-spin{0%{transform:scale(.2) rotate(-180deg)}}@media (prefers-reduced-motion: reduce){.confetti{display:none}.praise-star,.praise-card{animation:none}}.gear-wrap{position:relative;width:120px;display:flex;justify-content:flex-end}.btn-gear{position:relative;overflow:hidden;-webkit-touch-callout:none}.btn-gear:after{content:"";position:absolute;left:0;bottom:0;height:6px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.btn-gear.is-pressing:after{transform:scaleX(1);transition:transform var(--press-ms, 2s) linear}.gear-hint{position:absolute;right:0;top:calc(100% + 6px);z-index:5;white-space:nowrap;padding:6px 12px;border-radius:10px;background:#2a2522e0;color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}.gear-hint.is-visible{opacity:1}.screen-settings{overflow-y:auto}.setting-list{display:grid;gap:12px;width:100%;max-width:860px;margin:0 auto}.setting-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border:3px solid var(--line);border-radius:var(--radius);background:var(--surface)}.setting-text h2{margin:0 0 4px;font-size:22px}.setting-text p{margin:0;color:var(--muted);font-size:15px}.seg{display:flex;gap:0;border:2px solid var(--line);border-radius:16px;overflow:hidden}.seg-btn{min-width:96px;min-height:var(--btn);padding:0 16px;border:0;border-left:2px solid var(--line);background:var(--surface);font-size:19px;font-weight:600}.seg-btn:first-child{border-left:0}.seg-btn.is-on{background:var(--accent);color:#fff}.setting-note{text-align:center;color:var(--muted);margin:0}.setting-note.credit{margin-top:24px;font-size:14px;line-height:1.6}.setting-note.credit a{color:inherit}.update-banner{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);white-space:nowrap;padding:10px 12px 10px 24px;border-radius:22px;background:var(--ink);color:#fff;font-size:20px;font-weight:700;transform:translate(-50%);box-shadow:0 6px 20px #0003}.update-banner .btn:not(.btn-primary){background:transparent;color:#fff;border-color:transparent;box-shadow:none}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{transform:scale(.6);opacity:0}}html{touch-action:manipulation}.no-flexgap .screen>*+*{margin-top:16px}.no-flexgap .screen-practice>*+*{margin-top:12px}.no-flexgap .topbar>*+*,.no-flexgap .update-banner>*+*{margin-left:12px}.no-flexgap .glyph-title>*+*{margin-left:8px}.no-flexgap .card>*+*{margin-top:6px}.no-flexgap .toast>*+*{margin-top:4px}.no-flexgap .praise-card>*+*{margin-top:16px}.no-flexgap .dev-links>*+*{margin-left:16px}.no-flexgap .toolbar{margin-left:-6px;margin-right:-6px}.no-flexgap .toolbar>*,.no-flexgap .setting-row>*{margin:6px}.no-flexgap .button-row>*+*{margin-left:12px}