:root{--bg: #fdf6ec;--bg-accent: #fff3d6;--card: #fffdf8;--apricot: #ffd9b3;--apricot-deep: #ffb877;--accent: #f2803c;--accent-deep: #e06a24;--ink: #5b4632;--ink-soft: #94805f;--staff-line: #d9c7a8;--shadow: 0 6px 18px rgba(180, 140, 90, .18);--radius: 20px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:linear-gradient(160deg,var(--bg) 0%,var(--bg-accent) 100%);min-height:100vh;color:var(--ink);font-family:Pretendard,Malgun Gothic,맑은 고딕,Apple SD Gothic Neo,sans-serif;font-size:17px}.app{max-width:980px;margin:0 auto;padding:20px 20px 40px}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 6px 22px;flex-wrap:wrap}.header h1{margin:0;font-size:1.9rem;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.logo{font-size:2rem}.subtitle{font-size:.95rem;font-weight:500;color:var(--ink-soft)}.toggle-btn{border:2px solid var(--apricot-deep);background:var(--card);color:var(--ink);font-size:1.05rem;font-weight:700;padding:12px 22px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow);transition:all .15s ease}.toggle-btn:hover{transform:translateY(-1px)}.toggle-btn.on{background:var(--accent);border-color:var(--accent-deep);color:#fff}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.main{display:flex;flex-direction:column;gap:18px}.example-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.chip{background:var(--apricot);border:none;color:var(--ink);font-size:1.15rem;font-weight:700;padding:12px 24px;border-radius:999px;cursor:pointer;transition:all .15s ease}.chip:hover:not(:disabled){background:var(--apricot-deep);transform:translateY(-2px)}.chip:disabled{opacity:.5;cursor:default}.input-row{display:flex;gap:12px;flex-wrap:wrap}.word-input{flex:1;min-width:220px;font-size:1.35rem;padding:14px 20px;border:2px solid var(--apricot);border-radius:16px;background:#fff;color:var(--ink);outline:none;font-family:inherit}.word-input:focus{border-color:var(--accent)}.play-btn{background:var(--accent);color:#fff;border:none;font-size:1.3rem;font-weight:800;padding:14px 34px;border-radius:16px;cursor:pointer;box-shadow:var(--shadow);transition:all .15s ease;font-family:inherit}.play-btn:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-2px)}.play-btn:disabled{opacity:.55;cursor:default}.controls-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:0 8px}.control{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--ink-soft)}.control input[type=range]{width:160px;accent-color:var(--accent)}.control.checkbox{cursor:pointer}.control.checkbox input{width:20px;height:20px;accent-color:var(--accent)}.replay-btn{margin-left:auto;background:var(--card);border:2px solid var(--apricot-deep);color:var(--ink);font-size:1rem;font-weight:700;padding:10px 20px;border-radius:999px;cursor:pointer;transition:all .15s ease;font-family:inherit}.replay-btn:hover:not(:disabled){background:var(--apricot)}.replay-btn:disabled{opacity:.45;cursor:default}.staff-card{padding:10px 6px}.staff-scroll{overflow-x:auto}.staff-svg{display:block}.clef{-webkit-user-select:none;user-select:none}.note-halo{fill:var(--accent);opacity:.18}.note.active{filter:drop-shadow(0 0 6px rgba(242,128,60,.55))}.note-char{font-size:1.05rem;font-weight:700}.note-char.active{font-size:1.25rem}.staff-placeholder{fill:var(--ink-soft);font-size:1.05rem}.cards-row{display:flex;gap:14px;flex-wrap:wrap}.syl-card{padding:14px 18px;min-width:168px;border:2px solid transparent;transition:border-color .12s ease,transform .12s ease}.syl-card.active{border-color:var(--accent);transform:translateY(-3px)}.syl-char{font-size:2rem;font-weight:800;text-align:center;margin-bottom:6px}.syl-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.95rem}.syl-facts .jamo{display:inline-block;width:1.6em;text-align:center;font-weight:800;background:var(--bg-accent);border-radius:6px}.syl-facts .arrow{color:var(--ink-soft);margin:0 6px}.coding-panel{border:2px dashed var(--apricot-deep)}.coding-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}.coding-head h2{margin:0;font-size:1.25rem}.coding-hint{margin:0;color:var(--ink-soft);font-size:.92rem;flex:1}.reset-btn{background:var(--bg-accent);border:2px solid var(--apricot);color:var(--ink);font-weight:700;padding:8px 18px;border-radius:999px;cursor:pointer;font-family:inherit}.reset-btn:hover{background:var(--apricot)}.coding-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}@media (max-width: 760px){.coding-grid{grid-template-columns:1fr}}.coding-section h3{margin:0 0 10px;font-size:1.05rem;color:var(--accent-deep)}.mapping-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.mapping-list{display:flex;flex-direction:column;gap:8px}.mapping-item{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:12px;padding:7px 10px}.mapping-item.wide{justify-content:space-between;font-size:.92rem}.mapping-item select{flex:1;font-size:.95rem;padding:6px 8px;border-radius:8px;border:1.5px solid var(--apricot);background:#fff;color:var(--ink);font-family:inherit}.mapping-item.wide select{flex:0 0 86px}.jamo.big{font-size:1.2rem;font-weight:800;width:1.5em;text-align:center}.coding-note{margin:10px 0 0;font-size:.85rem;color:var(--ink-soft)}.footer{text-align:center;color:var(--ink-soft);font-size:.85rem;padding-top:30px}