:root{--bg:#14161a;--panel:#1e2128;--border:#2e323b;--text:#e8eaed;--dim:#9aa0a8;--accent:#4fa3ff;--root:#ffb84f;--good:#6fcf7c;--fret:#3d434e}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Noto Sans KR,sans-serif}.app{max-width:900px;margin:0 auto;padding:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;padding:12px}.note-grid{flex-wrap:wrap;gap:6px;display:flex}.note-btn{background:var(--bg);min-width:42px;color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:8px 6px;font-size:15px}.note-btn.active{background:var(--accent);color:#0b0d10;border-color:var(--accent)}.type-select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:15px}.cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.card{background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:10px;padding:8px}.card .meta{color:var(--dim);margin:4px 0;font-size:12px}.tag{border:1px solid var(--border);color:var(--dim);border-radius:999px;margin:1px;padding:1px 6px;font-size:11px;display:inline-block}.card button{border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;margin:2px;padding:6px 10px;font-size:13px}.card button.primary{background:var(--accent);color:#0b0d10;border-color:var(--accent)}.hint{color:var(--dim);font-size:13px}.more{border:1px solid var(--border);background:var(--bg);color:var(--dim);cursor:pointer;border-radius:8px;margin-top:8px;padding:6px 12px;font-size:13px}h1{margin:8px 0;font-size:18px}h2{color:var(--dim);margin:0 0 8px;font-size:14px;font-weight:600}.fretboard-scroll{overflow-x:auto}.fretboard-input .fret-cell{cursor:pointer}.fretboard-input .out .fret-cell-dot{fill:#0000}.fretboard-input .out .fret-cell-name{fill:var(--dim);opacity:.35}.fretboard-input .in-scale .fret-cell-dot{fill:var(--accent);fill-opacity:.18;stroke:var(--accent);stroke-opacity:.55}.fretboard-input .in-scale .fret-cell-name{fill:var(--text)}.fretboard-input .tonic .fret-cell-dot{fill:var(--root)}.fretboard-input .tonic .fret-cell-name{fill:#0b0d10;font-weight:700}.fretboard-input .fret-cell:hover .fret-cell-dot{fill:var(--accent);fill-opacity:1;stroke:var(--accent);stroke-opacity:1}.fretboard-input .fret-cell:hover .fret-cell-name{fill:#0b0d10;opacity:1}.legend{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:2px;display:inline-block}.legend.tonic{background:var(--root)}.legend.in-scale{background:var(--accent);opacity:.5}.legend.out{border:1px solid var(--dim)}.timeline{gap:8px;padding-bottom:6px;display:flex;overflow-x:auto}.event{background:var(--bg);border:1px solid var(--border);text-align:center;cursor:pointer;border-radius:8px;flex:0 0 92px;width:92px;padding:6px;position:relative}.event.melody-only{border-style:dashed}.event.selected{border-color:var(--accent)}.event .num{color:var(--dim);font-size:11px}.event .note{font-size:15px;font-weight:600}.event .chord{color:var(--good);font-size:13px}.event .notes{color:var(--dim);letter-spacing:.02em;font-size:10px}.card .notes{color:var(--dim);margin-top:4px;font-size:11px}.harmony-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.link-btn{cursor:pointer;color:var(--dim);text-underline-offset:3px;background:0 0;border:none;padding:0;font-size:13px;text-decoration:underline}.link-btn:hover{color:var(--text)}.suggest-row{align-items:center;gap:10px;margin-bottom:6px;display:flex}.suggest-row .row-label{color:var(--dim);letter-spacing:.06em;text-align:right;flex:0 0 38px;font-size:11px}.chord-notes{margin:10px 0 0;font-size:14px}.chord-notes .notes{color:var(--accent);letter-spacing:.03em;font-weight:600}.event .chord.dim{color:var(--dim);font-size:11px}.event .del{color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;position:absolute;top:2px;right:4px}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.toolbar input,.toolbar select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:14px}.toolbar button{border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 12px;font-size:14px}