:root{color-scheme:light;font-family:Noto Sans KR,Apple SD Gothic Neo,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--display: "Jua", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;--bg: #f3effc;--bg-deep: #ece5fa;--surface: #ffffff;--surface-2: #f7f4fe;--line: #e6def7;--text: #3b3163;--muted: #9a90bb;--purple: #8b5cf6;--purple-dark: #6d45d9;--purple-soft: #ede7fd;--lav: #c4b5fd;--mint: #2fbf8f;--mint-dark: #229a72;--mint-soft: #e2f8ef;--amber: #f6a821;--amber-dark: #d78a0c;--amber-soft: #fdf2dc;--danger: #f25f7a;--danger-soft: #fde8ec;--sky: #38a8f8;--sky-soft: #e3f2fe}*{box-sizing:border-box}html{background:var(--bg-deep)}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(rgba(139,92,246,.07) 1.7px,transparent 1.7px),radial-gradient(rgba(139,92,246,.05) 1.7px,transparent 1.7px),linear-gradient(160deg,#f6f1ff,#f3effc 45%,#efe7fb);background-size:34px 34px,34px 34px,100% 100%;background-position:0 0,17px 17px,0 0;background-attachment:fixed}button,input{font:inherit}button{color:inherit;border:0;cursor:pointer;background:none}button:focus-visible,a:focus-visible{outline:3px solid var(--lav);outline-offset:2px;border-radius:12px}a{color:var(--purple)}.icon{flex:0 0 auto}.app-frame{width:min(100%,560px);min-height:100vh;margin:0 auto;position:relative}.app-content{min-height:100vh;padding:max(22px,env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom))}.app-loading{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;color:var(--muted)}.logo-note{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--purple),var(--purple-dark));font:800 30px Georgia,serif;box-shadow:0 10px 26px #8b5cf659}.overline{margin:0 0 5px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em}.error-banner{margin-bottom:16px;padding:12px 16px;border-radius:14px;color:#9c3d52;background:var(--danger-soft);font-size:13px;font-weight:600}.error-banner button{margin-left:8px;color:var(--danger);font-weight:800;text-decoration:underline}.safe-bottom-space{height:14px}.screen-header,.home-top{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.screen-header h1,.home-top h1{margin:0;font-family:var(--display);font-size:27px;font-weight:400;letter-spacing:-.01em}.panel h2,.boss-card-head h2,.unit-sheet h2,.session-body h2,.session-finished h2,.sheet-done h2{font-family:var(--display);font-weight:400}.level-chip,.quest-state,.progress-badge,.pill,.deck-hero-stats strong,.unit-cards,.card-tag{font-family:var(--display)}.hello{margin:0 0 4px;color:var(--muted);font-size:13px;font-weight:700}.stat-pills{display:flex;gap:8px}.pill{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:99px;font-size:14px;font-weight:900;background:var(--surface);border:2px solid var(--line)}.pill-flame{color:#e8710a;border-color:#fadeba;background:#fef4e4}.pill-star{color:var(--purple);border-color:#ded2fb;background:var(--purple-soft)}.progress-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;color:var(--purple);background:var(--purple-soft);font-size:13px;font-weight:900}.xp-card{margin-bottom:18px;padding:16px 18px;border-radius:20px;background:var(--surface);border:2px solid var(--line)}.xp-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.level-chip{padding:7px 12px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--purple),var(--purple-dark));font-size:13px;font-weight:900;box-shadow:0 3px 0 var(--purple-dark)}.xp-card-top strong{display:block;font-size:15px;font-weight:900}.xp-card-top p{margin:2px 0 0;color:var(--muted);font-size:12px;font-weight:600}.xp-track{height:12px;border-radius:99px;overflow:hidden;background:var(--purple-soft)}.xp-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lav),var(--purple));transition:width .5s ease}.quest-list{display:grid;gap:12px;margin-bottom:22px}.quest{display:flex;align-items:center;gap:14px;padding:16px;text-align:left;border-radius:20px;background:var(--surface);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);transition:transform .1s ease,box-shadow .1s ease}.quest:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.quest.done{background:var(--mint-soft);border-color:#bfeeda;box-shadow:0 4px #bfeeda}.quest:disabled{cursor:default}.quest-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:16px;color:#fff}.quest-icon-deck{background:linear-gradient(145deg,#59b7f9,#2f8fe0);box-shadow:0 3px #2578c2}.quest-icon-lesson{background:linear-gradient(145deg,var(--purple),var(--purple-dark));box-shadow:0 3px 0 var(--purple-dark)}.quest-icon-day{background:linear-gradient(145deg,#3ecf9a,var(--mint-dark));box-shadow:0 3px 0 var(--mint-dark)}.quest.done .quest-icon{filter:saturate(.75)}.quest-copy{flex:1;min-width:0}.quest-copy strong{display:block;font-size:15px;font-weight:900}.quest-copy em{display:block;margin-top:3px;color:var(--muted);font-style:normal;font-size:12.5px;font-weight:600;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.quest-state{min-width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--purple);background:var(--purple-soft);font-size:14px;font-weight:900}.quest.done .quest-state{color:#fff;background:var(--mint)}.path-mini{margin-bottom:22px;padding:14px 18px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}.path-mini>div:first-child{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.path-mini strong{font-size:14px;font-weight:900}.path-mini-track{height:10px;border-radius:99px;overflow:hidden;background:var(--purple-soft)}.path-mini-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),#6fd7b2);transition:width .5s ease}.boss-card{padding:18px;border-radius:20px;background:var(--amber-soft);border:2px solid #f5ddb0;box-shadow:0 4px #f0d59f}.boss-card.cleared{background:var(--mint-soft);border-color:#bfeeda;box-shadow:0 4px #bfeeda}.boss-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.boss-card-head span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#fff;background:linear-gradient(145deg,var(--amber),var(--amber-dark));box-shadow:0 3px 0 var(--amber-dark)}.boss-card.cleared .boss-card-head span{background:linear-gradient(145deg,#3ecf9a,var(--mint-dark));box-shadow:0 3px 0 var(--mint-dark)}.boss-card-head h2{margin:0;font-size:16px;font-weight:900}.boss-card>p{margin:0 0 14px;color:#8a6a2f;font-size:13px;font-weight:600;line-height:1.6}.boss-card.cleared>p{color:#2f7d5f}.boss-attempt{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;color:#fff;background:var(--amber);box-shadow:0 4px 0 var(--amber-dark);font-size:14px;font-weight:900}.boss-attempt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--amber-dark)}.boss-actions{display:grid;gap:8px}.boss-actions button{height:46px;border-radius:14px;font-size:13px;font-weight:900}.boss-clear{color:#fff;background:var(--mint);box-shadow:0 4px 0 var(--mint-dark)}.boss-fail{color:var(--danger);background:#fff;border:2px solid #f8ccd6}.boss-cancel{color:var(--muted);background:#fff9}.path-hint{margin:-6px 0 18px;padding:12px 16px;border-radius:14px;color:#6d5fa8;background:var(--purple-soft);font-size:13px;font-weight:600;line-height:1.6}.course-list{display:grid;gap:12px}.course-block{border-radius:20px;background:var(--surface);border:2px solid var(--line);overflow:hidden}.course-block.current{border-color:var(--lav);box-shadow:0 4px 0 var(--lav)}.course-block.done{opacity:.82}.course-head{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;text-align:left}.course-badge{flex:0 0 auto;padding:6px 10px;border-radius:10px;font-size:11px;font-weight:900}.level-beginner{color:#1f7d5c;background:var(--mint-soft)}.level-intermediate{color:#2f77c2;background:var(--sky-soft)}.level-advanced{color:#a04ad6;background:#f6e9fe}.course-title{flex:1;min-width:0}.course-title strong{display:block;font-size:14.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-title em{display:block;margin-top:2px;color:var(--muted);font-style:normal;font-size:12px;font-weight:700}.course-chevron{color:var(--muted);transition:transform .2s ease}.course-block.open .course-chevron{transform:rotate(180deg)}.course-block.done .course-chevron{color:var(--mint);transform:none}.unit-list{display:grid;gap:6px;padding:4px 12px 14px}.unit-node{display:flex;align-items:center;gap:12px;padding:11px 12px;text-align:left;border-radius:14px;background:var(--surface-2)}.unit-node.current{background:var(--purple-soft);border:2px solid var(--lav);box-shadow:0 3px 0 var(--lav)}.unit-node.locked{opacity:.55;cursor:default}.unit-dot{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;color:var(--muted);background:#fff;border:2px solid var(--line)}.unit-node.done .unit-dot{color:#fff;background:var(--mint);border-color:var(--mint)}.unit-node.current .unit-dot{color:#fff;background:var(--purple);border-color:var(--purple);animation:pulse 1.6s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #8b5cf659}50%{box-shadow:0 0 0 7px #8b5cf600}}.unit-copy{flex:1;min-width:0}.unit-copy strong{display:block;font-size:13.5px;font-weight:800}.unit-copy em{display:block;margin-top:1px;color:var(--muted);font-style:normal;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unit-cards{flex:0 0 auto;padding:5px 9px;border-radius:99px;color:#2f77c2;background:var(--sky-soft);font-size:11px;font-weight:900}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;align-items:end;justify-items:center;background:#3b316359;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.unit-sheet{width:min(100%,560px);max-height:86vh;overflow-y:auto;position:relative;padding:26px 22px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:var(--surface)}.sheet-close{position:absolute;top:16px;right:16px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--muted);background:var(--surface-2)}.unit-sheet h2{margin:2px 0 6px;font-size:21px;font-weight:900;line-height:1.35}.unit-sheet>.overline,.unit-sheet>h2{padding-right:42px}.sheet-duration{margin:0 0 6px;color:var(--muted);font-size:13px;font-weight:700}.sheet-unlock-note{display:flex;align-items:center;gap:7px;margin:10px 0 0;padding:10px 13px;border-radius:12px;color:#2f77c2;background:var(--sky-soft);font-size:12.5px;font-weight:800}.sheet-pdfs{display:grid;gap:8px;margin:16px 0 4px}.sheet-pdfs a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:2px solid var(--line);text-decoration:none;color:var(--text)}.sheet-pdfs a span{padding:5px 8px;border-radius:8px;color:#fff;background:var(--danger);font-size:10px;font-weight:900}.sheet-pdfs a strong{font-size:13px;font-weight:800}.sheet-steps{margin:16px 0 20px;padding-left:20px;color:#6d5fa8;font-size:13px;font-weight:600;line-height:2}.sheet-completed-tag{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;color:var(--mint-dark);font-size:14px;font-weight:900}.sheet-done{display:grid;justify-items:center;gap:10px;padding:18px 0 6px;text-align:center}.sheet-done-mark{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--mint);box-shadow:0 0 0 12px var(--mint-soft)}.sheet-done h2{margin:8px 0 0}.sheet-done p{margin:0 0 12px;color:var(--muted);font-size:14px;font-weight:600}.sheet-done p strong{color:var(--purple)}.big-button{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;color:#fff;background:var(--purple);box-shadow:0 5px 0 var(--purple-dark);font-size:15px;font-weight:900;transition:transform .1s ease,box-shadow .1s ease}.big-button:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 var(--purple-dark)}.big-button:disabled{background:#cfc6e8;box-shadow:0 5px #bdb2dd;cursor:default}.panel{margin-top:18px;padding:18px;border-radius:20px;background:var(--surface);border:2px solid var(--line)}.panel h2{margin:0 0 14px;font-size:16px;font-weight:900}.hint-note{margin:14px 0 0;color:var(--muted);font-size:12px;font-weight:600;line-height:1.6}.deck-hero{padding:18px;border-radius:20px;background:var(--surface);border:2px solid var(--line)}.deck-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.deck-hero-stats article{padding:13px 6px;display:grid;justify-items:center;gap:3px;border-radius:14px;background:var(--surface-2)}.deck-hero-stats strong{font-size:21px;font-weight:900;color:var(--purple)}.deck-hero-stats span{color:var(--muted);font-size:10px;font-weight:800}.box-bars{display:grid;gap:10px}.box-bars article{display:grid;grid-template-columns:92px 1fr 34px;align-items:center;gap:10px}.box-bars span{color:var(--muted);font-size:11px;font-weight:800}.box-bars strong{text-align:right;font-size:13px;font-weight:900}.box-track{height:11px;border-radius:99px;overflow:hidden;background:var(--surface-2)}.box-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--lav),var(--purple));transition:width .5s ease}.rule-list{margin:0;padding-left:18px;color:var(--muted);font-size:13px;font-weight:600;line-height:2}.rule-list strong{color:var(--text)}.session-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;width:min(100%,560px);margin:0 auto;overflow-y:auto;background:linear-gradient(170deg,#f8f4ff,#f0e9fc)}.session-overlay>header{min-height:68px;padding:max(15px,env(safe-area-inset-top)) 18px 10px;display:grid;grid-template-columns:38px 1fr 44px;align-items:center;gap:12px}.session-overlay>header button{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border-radius:50%;background:#fff;border:2px solid var(--line)}.session-overlay>header>span{color:var(--muted);font-size:12px;font-weight:800;text-align:right}.session-progress{height:12px;overflow:hidden;border-radius:99px;background:#fff;border:2px solid var(--line)}.session-progress i{display:block;height:100%;border-radius:inherit;background:var(--mint);transition:width .3s ease}.session-body{padding:44px 24px 60px;text-align:center}.card-tag{display:inline-block;padding:6px 12px;border-radius:99px;color:var(--purple);background:var(--purple-soft);font-size:11px;font-weight:900;letter-spacing:.08em}.session-body h2{margin:18px 0 10px;font-size:23px;font-weight:900;line-height:1.45}.card-instruction{margin:0 0 28px;color:var(--muted);font-size:14px;font-weight:600}.card-back{margin:14px 0 20px;padding:16px 18px;border-radius:16px;color:#1f7d5c;background:var(--mint-soft);border:2px solid #bfeeda;font-size:15px;font-weight:700;line-height:1.65}.grade-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grade-row button{min-height:68px;display:grid;place-content:center;gap:3px;border-radius:18px;font-size:16px;font-weight:900}.grade-row small{font-size:11px;font-weight:800;opacity:.8}.grade-fail{color:var(--danger);background:#fff;border:2px solid #f8ccd6;box-shadow:0 4px #f8ccd6}.grade-success{color:#fff;background:var(--mint);box-shadow:0 4px 0 var(--mint-dark)}.grade-row button:active{transform:translateY(3px);box-shadow:none}.grade-row button:disabled{opacity:.55}.session-finished{min-height:calc(100vh - 90px);padding:90px 26px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}.finish-mark{width:86px;height:86px;margin-bottom:26px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--mint);box-shadow:0 0 0 14px var(--mint-soft)}.session-finished h2{margin:6px 0 10px;font-size:24px;font-weight:900}.session-finished>p:not(.overline){max-width:320px;margin:0 0 34px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.7}.session-finished .big-button{margin-top:auto}.archive-grid{display:grid;gap:10px}.archive-grid article{padding:15px;border-radius:16px;background:var(--surface-2);border:2px solid var(--line);border-left:6px solid var(--accent, var(--purple))}.archive-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--accent, var(--purple))}.archive-top strong{font-size:17px;font-weight:900}.archive-top em{margin-left:4px;font-size:10px;font-style:normal;font-weight:800;color:var(--muted)}.archive-grid h3{margin:0 0 4px;font-size:14.5px;font-weight:900}.archive-grid p{margin:0 0 10px;color:var(--muted);font-size:12px;font-weight:600;line-height:1.55}.archive-actions{display:flex;gap:8px}.archive-actions a{padding:7px 13px;border-radius:99px;background:#fff;border:2px solid var(--line);font-size:12px;font-weight:800;text-decoration:none}.asset-list{display:grid;gap:8px}.asset-list a{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:2px solid var(--line);text-decoration:none;color:var(--text)}.asset-list a span{min-width:52px;padding:8px 6px;border-radius:12px;text-align:center;color:#fff;background:var(--accent, var(--purple));font-size:13px;font-weight:900}.asset-list strong{display:block;font-size:13.5px;font-weight:900}.asset-list p{margin:2px 0 0;color:var(--muted);font-size:11.5px;font-weight:600}.link-list{display:grid;gap:8px}.link-list a{padding:12px 15px;border-radius:13px;background:var(--surface-2);border:2px solid var(--line);font-size:13px;font-weight:800;text-decoration:none}.chord-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin:-8px 0 16px}.secondary-button{min-height:44px;padding:0 14px;border-radius:16px;color:var(--purple);background:var(--surface);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-size:13px;font-weight:900}.secondary-button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}.chord-complete{min-height:48px}.chord-complete:disabled{opacity:.64;cursor:default}.wide-panel{margin-top:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.panel-heading h3{margin:0;font-family:var(--display);font-size:20px;font-weight:400;line-height:1.2}.panel-label{margin:0 0 5px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.mini-meter{height:9px;overflow:hidden;border-radius:99px;background:var(--purple-soft)}.mini-meter span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--mint),#6fd7b2)}.chord-course-panel{overflow:hidden}.course-layout{display:grid;gap:18px}.course-index{display:grid;gap:13px;min-width:0}.course-summary{display:grid;gap:9px;padding:13px;border-radius:16px;background:var(--surface-2);border:2px solid var(--line)}.course-summary>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.course-summary span{color:var(--muted);font-size:12px;font-weight:800}.course-summary strong{color:var(--purple);font-size:22px;font-weight:900}.phase-list{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}.phase-list span{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;border-radius:12px;color:#6d5fa8;background:var(--purple-soft);font-size:10px;font-weight:900;white-space:nowrap}.day-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:280px;overflow:auto;padding-right:2px}.day-grid button{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid var(--line);border-radius:14px;color:var(--text);background:var(--surface);box-shadow:0 2px 0 var(--line)}.day-grid button.done{border-color:#bfeeda;color:var(--mint-dark);background:var(--mint-soft);box-shadow:0 2px #bfeeda}.day-grid button.active{color:#fff;border-color:var(--purple-dark);background:var(--purple);box-shadow:0 3px 0 var(--purple-dark)}.day-grid strong{font-size:13px;line-height:1}.day-grid small{max-width:100%;color:inherit;opacity:.9;overflow:hidden;font-size:9px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.lesson-stage{min-width:0;display:grid;gap:16px}.starter-lesson{display:grid;gap:15px;padding-bottom:16px;border-bottom:2px solid var(--line)}.starter-copy h3{margin:0 0 8px;font-family:var(--display);font-size:24px;font-weight:400;line-height:1.2}.starter-copy p:last-child{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.6}.triad-table{min-width:0;overflow:hidden;border:2px solid var(--line);border-radius:16px;background:var(--surface)}.triad-row{min-height:40px;display:grid;grid-template-columns:.7fr 1fr 1fr;align-items:center;border-top:2px solid var(--line)}.triad-row:first-child{border-top:0}.triad-row span,.triad-row strong{min-width:0;padding:0 10px;overflow-wrap:anywhere}.triad-row strong{color:var(--mint-dark);font-size:16px}.triad-head{min-height:36px;color:var(--muted);background:var(--surface-2);font-size:10px;font-weight:900}.starter-practice{display:grid;gap:12px;padding:14px;border:2px solid #f5ddb0;border-radius:16px;background:var(--amber-soft)}.starter-practice strong{display:block;margin-bottom:6px;color:#9a6408;font-family:var(--display);font-size:22px;font-weight:400;line-height:1.15}.starter-practice span{display:block;color:#8a6a2f;font-size:12px;font-weight:900;line-height:1.35}.starter-practice ol{margin:0;padding-left:18px;color:#6d5fa8;font-size:13px;font-weight:600;line-height:1.65}.lesson-toolbar{min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}.lesson-toolbar>div{min-width:0;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.done-pill{color:#fff;border-color:var(--mint-dark);background:var(--mint)}.lesson-hero{display:grid;gap:12px;padding:16px;border:2px solid var(--line);border-radius:18px;background:radial-gradient(circle at 100% 0,rgba(139,92,246,.13),transparent 42%),var(--surface-2)}.lesson-hero h3{margin:0 0 6px;color:var(--purple);font-family:var(--display);font-size:42px;font-weight:400;letter-spacing:0}.lesson-hero p:last-child{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.55}.progression-chip{width:fit-content;max-width:100%;padding:10px 12px;border-radius:14px;color:#1f7d5c;background:var(--mint-soft);font-size:12px;font-weight:900;overflow-wrap:anywhere}.lesson-grid{display:grid;gap:12px}.lesson-block{min-width:0;padding:13px;border:2px solid var(--line);border-radius:16px;background:var(--surface)}.lesson-block p:last-child{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.55}.hand-notes{display:grid;gap:10px}.hand-notes div{min-width:0;display:grid;gap:4px}.hand-notes span{color:var(--muted);font-size:11px;font-weight:900}.hand-notes strong{font-size:16px;line-height:1.3;overflow-wrap:anywhere}.notation-panel{display:grid;gap:14px;align-items:end;padding-top:2px}.sheet-chord{width:100%;min-height:144px;border:2px solid var(--line);border-radius:16px;background:#fbfaf6}.sheet-chord line{stroke:#3b3163;stroke-width:1.4}.sheet-chord .ledger{stroke-width:1.8}.sheet-chord ellipse{fill:var(--purple)}.sheet-chord text{fill:#3b3163;font-family:Noto Sans KR,ui-sans-serif,system-ui,sans-serif;font-weight:900}.sheet-chord .clef{fill:#9a90bb;font-family:Georgia,Times New Roman,serif;font-size:42px}.sheet-chord .accidental{fill:var(--danger);font-size:16px}.sheet-chord .sheet-note-names{fill:#9a90bb;font-size:12px}.mini-keyboard{position:relative;min-height:118px;overflow-x:auto;padding-top:8px}.keyboard-canvas{position:relative;min-width:560px;height:112px}.white-key-row{height:112px;display:grid;grid-template-columns:repeat(28,1fr);overflow:hidden;border:2px solid #ded8ef;border-radius:14px;background:#fff}.white-key-row span{position:relative;border-right:1px solid #e7e2f4;background:#fffdf8}.white-key-row span.active{background:linear-gradient(#fff8df,#f9df9f)}.white-key-row em,.black-key em{position:absolute;left:50%;bottom:8px;transform:translate(-50%);color:var(--text);font-size:9px;font-style:normal;font-weight:900}.black-key{width:2.5%;height:68px;position:absolute;top:0;z-index:2;border-radius:0 0 6px 6px;background:linear-gradient(#31284e,#1f1838);box-shadow:0 4px 6px #3b316347}.black-key.active{background:linear-gradient(#53d9b0,var(--mint))}.black-key em{bottom:6px;color:#fff;font-size:8px}.bottom-nav{width:min(100% - 20px,540px);height:calc(70px + env(safe-area-inset-bottom)/2);padding:8px 10px calc(env(safe-area-inset-bottom)/2);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:fixed;z-index:20;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translate(-50%);border-radius:26px;border:2px solid var(--line);background:#fffffff0;box-shadow:0 10px 28px #6d45d924;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.bottom-nav button{display:grid;place-content:center;justify-items:center;gap:4px;color:var(--muted);font-size:10px;font-weight:800;border-radius:18px;transition:transform .15s ease}.bottom-nav button.active{color:var(--purple);background:var(--purple-soft)}.bottom-nav button:active{transform:scale(.93)}.levelup-toast{position:fixed;left:50%;top:16%;z-index:70;transform:translate(-50%);display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--amber),var(--amber-dark));box-shadow:0 14px 34px #d68a0c59;cursor:pointer;animation:levelup-pop .45s cubic-bezier(.2,1.6,.4,1)}.levelup-toast strong{display:block;font-size:17px;font-weight:900}.levelup-toast p{margin:2px 0 0;font-size:12.5px;font-weight:800}@keyframes levelup-pop{0%{transform:translate(-50%) scale(.6);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@media(min-width:760px){.app-frame,.bottom-nav{width:min(100%,760px)}.app-content{padding-left:34px;padding-right:34px;padding-top:34px}.screen-header h1,.home-top h1{font-size:30px}.session-overlay,.unit-sheet{width:min(100%,640px)}.grade-row button{min-height:78px}}@media(min-width:1180px){.app-frame{width:min(100%,1080px);display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 12px}.app-content{grid-column:2;grid-row:1;width:min(100%,720px);margin:0 auto;padding:44px 24px 80px}.bottom-nav{grid-column:1;grid-row:1;position:sticky;top:0;left:auto;bottom:auto;transform:none;width:auto;height:100vh;padding:44px 14px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;border:0;border-right:2px solid var(--line);border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.bottom-nav button{width:100%;min-height:56px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:0 18px;border-radius:16px;font-size:14px}.session-overlay{width:min(100%,680px);border-radius:0}.sheet-backdrop{align-items:center}.unit-sheet{border-radius:26px;max-height:82vh}.chord-course-panel{padding:24px}.course-layout{grid-template-columns:280px minmax(0,1fr);align-items:start}.course-index{position:sticky;top:32px}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:620px}.starter-lesson{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.starter-practice,.starter-keyboard{grid-column:1 / -1}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.notation-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.notation-panel>div:last-child{grid-column:1 / -1}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.pill-lang{color:var(--sky);border-color:#cfe9fd;background:var(--sky-soft);cursor:pointer;font-size:12px;white-space:nowrap}.stat-pills{align-items:center}.stat-pills .pill{white-space:nowrap}.fox-badge{display:grid;place-items:center;padding:9px;border-radius:50%;background:linear-gradient(150deg,#8febd2,#34d3a6);box-shadow:0 0 0 5px #fff,0 0 0 7px var(--line),0 6px 16px #34d3a647}.fox{display:block}.fox-bob{animation:fox-bob 2.4s ease-in-out infinite}@keyframes fox-bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}.xp-card-top .fox-badge{flex:0 0 auto;padding:6px;box-shadow:0 0 0 3px var(--mint-soft)}.sheet-done-mark,.finish-mark{background:linear-gradient(150deg,#8febd2,#34d3a6);animation:fox-pop .5s cubic-bezier(.2,1.6,.4,1)}@keyframes fox-pop{0%{transform:scale(.4) rotate(-14deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.level-chip,.quest-state,.progress-badge,.pill,.deck-hero-stats strong,.unit-cards,.card-tag{font-weight:400}.level-chip{transform:rotate(-3deg)}.home-top h1:after{content:" ♪";color:var(--lav);font-size:.8em}.quest-icon{border-radius:18px;transform:rotate(-3deg);transition:transform .18s ease}.quest:nth-child(2) .quest-icon{transform:rotate(3deg)}.quest:not(:disabled):hover .quest-icon{transform:rotate(0) scale(1.06)}.xp-card,.quest,.boss-card,.panel,.deck-hero,.course-block{border-radius:24px}.xp-track i,.path-mini-track i,.session-progress i,.box-track i{position:relative;overflow:hidden}.xp-track i:after,.path-mini-track i:after,.session-progress i:after,.box-track i:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.3) 0 7px,transparent 7px 14px)}@media(hover:hover){.quest:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--line)}.quest.done:not(:disabled):hover{box-shadow:0 6px #bfeeda}.unit-node:not(:disabled):hover{filter:brightness(.985)}.big-button:not(:disabled):hover{filter:brightness(1.05)}}