.hangul-menu{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:0 auto;max-width:900px;padding:2rem}a.hangul-menu-box{align-items:center;background:var(--bg-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);display:flex;font-size:1.1rem;font-weight:600;justify-content:center;min-height:120px;padding:1.25rem;text-align:center;text-decoration:none;transition:all var(--transition)}a.hangul-menu-box:hover{background:var(--bg-surface-hover);border-color:var(--color-primary);box-shadow:0 8px 24px rgba(124,106,239,.15);transform:translateY(-2px)}.hangul-learn{display:flex;min-height:calc(100vh - var(--navbar-height))}.hangul-sidebar{background:var(--bg-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;max-height:calc(100vh - var(--navbar-height));min-width:320px;overflow-y:auto;position:sticky;top:var(--navbar-height);width:320px}.hangul-main{align-items:center;display:flex;flex:1;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--navbar-height));padding:2rem}.sidebar-header{border-bottom:1px solid var(--color-border);color:var(--color-text-muted);font-size:.8rem;font-weight:600;letter-spacing:.05em;padding:1rem 1.25rem;text-transform:uppercase}.sidebar-section{padding:1.25rem}.sidebar-stats{display:flex;font-size:1.75rem;font-weight:700;gap:2rem;justify-content:center;margin-bottom:.75rem}.stat-plus{color:var(--color-success)}.stat-minus{color:var(--color-danger)}.sidebar-progress{background:hsla(0,0%,100%,.06);border-radius:3px;display:flex;height:6px;margin-bottom:1rem;overflow:hidden}.sidebar-progress .bar-plus{background:var(--color-success);transition:width .4s ease}.sidebar-progress .bar-minus{background:var(--color-danger);transition:width .4s ease}.sidebar-streaks{display:grid;gap:.75rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.streak-box{background:var(--bg-elevated);border-radius:var(--radius-sm);padding:.6rem .75rem;text-align:center}.streak-label{color:var(--color-text-muted);font-size:.75rem;margin-bottom:.15rem}.streak-value{color:var(--color-primary);font-size:1.25rem;font-weight:700}.sidebar-actions{display:flex;gap:.5rem;padding:0 1.25rem 1rem}.sidebar-actions .btn{flex:1;font-size:.85rem}.sidebar-items-divider{border-top:1px solid var(--color-border);margin:0}.sidebar-items{display:grid;gap:.4rem;padding:1rem 1.25rem}.sidebar-items-2col{grid-template-columns:1fr 1fr}.sidebar-items-4col{grid-template-columns:1fr 1fr 1fr 1fr}.sidebar-item{align-items:center;display:flex;flex-direction:column;gap:.15rem;padding:.25rem}.sidebar-item-char{font-size:1rem;font-weight:500}.sidebar-item-stats{align-items:center;display:flex;font-size:.65rem;gap:.15rem;line-height:1;opacity:.8}.stat-plus-sm{color:var(--color-success)}.stat-minus-sm{color:var(--color-danger)}.stat-sep,.stat-time{color:var(--color-muted)}.stat-time{font-size:.6rem;margin-left:.15rem}.sidebar-item-bar{background:hsla(0,0%,100%,.06);border-radius:2px;display:flex;height:4px;overflow:hidden;width:100%}.sidebar-item-bar .bar-plus{background:var(--color-success)}.sidebar-item-bar .bar-minus{background:var(--color-danger)}.bottom-sheet-toggle{display:none}.playground-card{background:var(--bg-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);max-width:500px;padding:2.5rem 2rem;text-align:center;width:100%}.playground-char{font-size:4rem;font-weight:700;line-height:1.2;margin-bottom:1rem}.playground-audio{margin:1rem 0}.playground-audio-tts{margin:.75rem 0}.btn-tts{background:none;border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);cursor:pointer;font-size:1.25rem;padding:.4rem .75rem;transition:all .15s}.btn-tts:hover{background:rgba(99,102,241,.1);border-color:var(--color-primary)}.playground-divider{border-color:var(--color-border);margin:1.5rem 0;opacity:.3}.playground-result{color:var(--color-primary);font-size:2rem;font-weight:600;margin-bottom:.5rem;min-height:3rem}.playground-result-sub{color:var(--color-text-muted);font-size:1.1rem;margin-bottom:1rem}.playground-buttons{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem}.playground-buttons .btn{font-size:1.1rem;min-width:120px;padding:.6rem 1.5rem}.playground-pool-hint{color:var(--color-text-muted);font-size:.85rem;margin-top:1.5rem}.playground-pool-hint a{color:var(--color-primary);text-decoration:none}.playground-pool-hint a:hover{text-decoration:underline}.sidebar-pool-info{color:var(--color-text-muted);font-size:.75rem;font-weight:400;margin-top:.15rem}.syllable-filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.filter-tab{background:var(--bg-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);font-size:.9rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s}.filter-tab:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.timer-bar{background:var(--color-border);border-radius:2px;height:4px;margin-bottom:1.5rem;overflow:hidden;width:100%}.timer-bar-fill{border-radius:2px;height:100%;transition:width .1s linear}.timer-settings{border-top:1px solid var(--color-border);gap:1rem;justify-content:center;margin-top:1.5rem;padding-top:1rem}.timer-settings,.timer-toggle{align-items:center;display:flex}.timer-toggle{color:var(--color-text-muted);cursor:pointer;font-size:.85rem;gap:.5rem}.timer-toggle input[type=checkbox]{accent-color:var(--color-primary);height:1rem;width:1rem}.timer-limit-control{align-items:center;display:flex;gap:.4rem}.btn-timer-adj{align-items:center;background:var(--bg-surface);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text);cursor:pointer;display:flex;font-size:1rem;height:1.75rem;justify-content:center;line-height:1;transition:all .15s;width:1.75rem}.btn-timer-adj:hover{border-color:var(--color-primary);color:var(--color-primary)}.timer-limit-value{color:var(--color-text);font-size:.9rem;font-weight:600;min-width:2rem;text-align:center}@media (max-width:768px){.hangul-menu{gap:.75rem;grid-template-columns:repeat(2,1fr);padding:1rem}a.hangul-menu-box{font-size:1rem;min-height:90px}.hangul-learn{flex-direction:column}.hangul-sidebar{border-radius:var(--radius) var(--radius) 0 0;border-right:none;border-top:1px solid var(--color-border);bottom:0;box-shadow:0 -8px 32px rgba(0,0,0,.4);display:none;left:0;max-height:60vh;min-width:100%;position:fixed;right:0;top:auto;width:100%;z-index:900}.hangul-sidebar.open{display:flex}.hangul-main{padding:1.25rem 1.25rem 5rem}.bottom-sheet-toggle{align-items:center;background:var(--color-primary);border:none;border-radius:50%;bottom:1rem;box-shadow:0 4px 16px rgba(124,106,239,.4);color:#fff;cursor:pointer;display:flex;font-size:1.25rem;height:48px;justify-content:center;position:fixed;right:1rem;transition:all var(--transition);width:48px;z-index:1000}.bottom-sheet-toggle:hover{transform:scale(1.1)}.playground-card{padding:1.5rem 1rem}.playground-char{font-size:3rem}.playground-result{font-size:1.5rem}.playground-buttons .btn{min-width:100px}.sidebar-items-4col{grid-template-columns:1fr 1fr 1fr}}@media (max-width:480px){.hangul-menu{grid-template-columns:1fr}.sidebar-items-4col{grid-template-columns:1fr 1fr}}