@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+KR:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#111318;--panel:#191c22;--line:#2a2e36;--muted:#747b87;--text:#eef1f4;--green:#56c77a;--blue:#748aaf;--red:#ed6380;--guide:#31353c;--answer:#8b919c;--grid:#262a31;--overlay:#111318dd;--tab:#2b3038;--tap:#ffffff0b}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Noto Sans KR',sans-serif}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button{border:0;background:none;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.app{height:100dvh;max-width:760px;margin:auto;padding:max(12px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:48px 58px minmax(0,1fr) 46px;gap:6px}.topbar,.practice-footer{display:grid;grid-template-columns:48px 1fr 48px;align-items:center}.top-actions{display:flex;justify-content:center;gap:clamp(7px,4vw,26px)}.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:25px;line-height:1}.icon-button:active{background:var(--tap)}
.lesson{position:relative;display:flex;align-items:center;justify-content:center}.stage-pill{position:absolute;left:0;padding:7px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);font-size:11px}.reading{display:flex;gap:10px;align-items:center;color:#555b64;font:500 29px 'Noto Sans JP',sans-serif}.reading b{color:var(--muted);font-weight:500}.status{position:absolute;right:1px;color:var(--muted);font-size:11px}
.board{position:relative;min-height:0;width:100%;height:100%;overflow:hidden;touch-action:none;user-select:none;background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--grid) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),var(--grid) 50%,transparent calc(50% + .5px));border-radius:18px;isolation:isolate}.board svg,.board canvas{position:absolute;inset:0;width:100%;height:100%}.board svg{z-index:0;pointer-events:none}.board canvas{z-index:1;touch-action:none;cursor:crosshair}.result-mark{z-index:3;position:absolute;left:50%;top:7%;translate:-50% 0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:78px;font-weight:400;line-height:1;opacity:0;scale:.75;transition:opacity .15s,scale .2s;pointer-events:none}.result-mark.show{opacity:1;scale:1}.result-mark.good{color:var(--green);border:6px solid var(--green);font-size:68px}.result-mark.bad{color:var(--red);border:6px solid var(--red)}.result-mark.close{color:#f0b45c;border:5px solid #f0b45c;font-size:60px}.compare-legend{z-index:4;position:absolute;right:12px;top:12px;display:flex;gap:13px;padding:7px 10px;border-radius:14px;background:var(--overlay);color:var(--muted);font-size:10px;pointer-events:none}.compare-legend span:before{content:'';display:inline-block;width:12px;height:3px;border-radius:3px;background:var(--blue);vertical-align:middle;margin-right:5px}.compare-legend span+span:before{background:var(--red)}
.feedback{z-index:5;position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--overlay);box-shadow:0 8px 28px #0003;backdrop-filter:blur(10px);animation:rise .18s ease;pointer-events:none}.feedback strong{display:block;font-size:13px}.feedback p{margin:4px 0 0;color:#abb0b8;font-size:12px;line-height:1.55}.feedback.bad{border-color:#ed638055}.feedback.close{border-color:#f0b45c55}.feedback.good{border-color:#56c77a55}.practice-footer{color:var(--muted);font-size:11px}.practice-footer #progress{padding-left:7px}.auto-note{text-align:center}.practice-footer .icon-button{justify-self:end;font-size:22px}
dialog{width:min(92vw,480px);max-height:88dvh;padding:0;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--text);box-shadow:0 20px 60px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.sheet{padding:20px}.sheet header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.sheet header strong{font-size:16px}.sheet header button{font-size:26px;color:var(--muted)}.type-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--bg);margin-bottom:12px}.type-tabs button{padding:9px;border-radius:9px;color:var(--muted)}.type-tabs button.active{background:var(--tab);color:var(--text)}.rows{display:flex;gap:7px;overflow-x:auto;padding:3px 1px 13px;scrollbar-width:none}.rows::-webkit-scrollbar{display:none}.row-button{flex:0 0 auto;padding:7px 11px;border:1px solid var(--line);border-radius:18px;color:var(--muted);font-size:11px}.row-button.active{border-color:var(--green);color:var(--green);background:color-mix(in srgb,var(--green) 9%,transparent)}.letters{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.letter{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.letter b{display:block;font:400 29px 'Noto Sans JP',sans-serif}.letter small{color:var(--muted)}.letter.selected{border-color:var(--green);color:var(--green)}.letter.learned:after{content:'✓';position:absolute;top:4px;right:7px;color:var(--green);font-size:10px}
.modes>button{display:block;width:100%;padding:15px;text-align:left;border-top:1px solid var(--line)}.modes>button b,.modes>button small{display:block}.modes>button small{margin-top:4px;color:var(--muted)}.settings-sheet>label,.settings-sheet>button,.settings-sheet>a{display:flex;width:100%;justify-content:space-between;align-items:center;padding:14px 2px;border-top:1px solid var(--line);color:var(--text);text-decoration:none;font-size:13px}.settings-sheet input{accent-color:var(--green)}.restore{cursor:pointer}body.credits{overflow:auto}.credits main{display:block;max-width:760px;margin:auto;padding:45px 25px;line-height:1.8}.credits a{color:var(--green)}
.start-screen{height:100dvh;max-width:760px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom));display:grid;grid-template-rows:56px minmax(0,1fr) 34px}.start-header{display:flex;align-items:center;justify-content:space-between}.start-brand{display:flex;align-items:center;gap:10px}.start-brand span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--green);color:white;font:500 24px 'Noto Sans JP',sans-serif}.start-brand b{font-size:15px}.start-content{overflow:auto;padding:clamp(28px,7vh,70px) 2px 30px}.start-kicker{margin:0 0 12px;color:var(--green);font-size:10px;letter-spacing:2px}.start-content h1{margin:0 0 32px;font-size:clamp(30px,7vw,46px);line-height:1.3;letter-spacing:-1.5px}.start-tabs{max-width:380px;margin-bottom:22px}.row-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.row-card{min-height:112px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel);text-align:left}.row-card strong{display:flex;justify-content:space-between;align-items:center;font-size:15px}.row-card strong span{color:var(--muted);font-size:10px;font-weight:400}.row-card .row-chars{display:block;margin-top:15px;color:var(--muted);font:400 21px 'Noto Sans JP',sans-serif;letter-spacing:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-card.complete{border-color:color-mix(in srgb,var(--green) 55%,var(--line))}.row-card.complete strong:after{content:'✓';color:var(--green)}.start-footer{display:flex;align-items:center;color:var(--muted);font-size:11px;padding-left:4px}
body.light{color-scheme:light;--bg:#f7f7f4;--panel:#ffffff;--line:#dedfda;--muted:#777c82;--text:#202329;--green:#34945a;--blue:#5d7195;--red:#d94f6d;--guide:#d9dbd7;--answer:#777d85;--grid:#e1e2dd;--overlay:#fffffff0;--tab:#e9ebe6;--tap:#00000008}[hidden]{display:none!important}@keyframes rise{from{opacity:0;transform:translateY(5px)}}@media(min-width:700px){.app{padding-inline:40px}.board{border:1px solid var(--line)}.start-screen{padding-inline:40px}}@media(max-width:440px){.row-grid{grid-template-columns:1fr}.row-card{min-height:98px}}@media(max-height:680px){.app{grid-template-rows:42px 46px minmax(0,1fr) 38px}.icon-button{width:38px;height:38px}.reading{font-size:24px}.result-mark{width:76px;height:76px;font-size:60px}.result-mark.good{font-size:54px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}