:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;color:#17181b;background:#f6f7fb;--bg:#f6f7fb;--card:#fff;--line:#e5e7eb;--muted:#6b7280;--accent:#2d6cdf;--danger:#d92d20;--shadow:0 10px 30px rgba(16,24,40,.08);--toolbar:rgba(255,255,255,.92)}
:root[data-theme="dark"]{color:#f4f4f5;background:#111318;--bg:#111318;--card:#1b1e24;--line:#2a2f38;--muted:#a1a1aa;--accent:#6ea2ff;--danger:#ff6b61;--shadow:0 10px 30px rgba(0,0,0,.3);--toolbar:rgba(27,30,36,.94)}
*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;height:100%;background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app-shell{height:100%;display:grid;grid-template-columns:230px 1fr;overflow:hidden}.sidebar{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;gap:8px;z-index:10}.brand{font-weight:800;font-size:25px;letter-spacing:-.03em;padding:4px 8px 18px}.nav-btn{border:0;background:transparent;color:inherit;border-radius:12px;padding:12px 14px;text-align:left;font-weight:650;display:flex;gap:10px;align-items:center}.nav-btn.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.nav-spacer{flex:1}.save-state{font-size:12px;color:var(--muted);padding:8px}
.main{overflow:auto}.page{padding:28px;max-width:1280px;margin:0 auto}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.page-title{font-size:30px;font-weight:800;letter-spacing:-.04em;margin:0}.page-sub{color:var(--muted);margin-top:5px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:var(--card);color:inherit;border-radius:11px;padding:9px 13px;font-weight:650;box-shadow:0 1px 2px rgba(0,0,0,.03)}.btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.danger{color:var(--danger)}.btn.small{padding:6px 9px;font-size:13px}.btn.icon{width:40px;height:40px;border-radius:50%;padding:0;display:grid;place-items:center}.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.search{min-width:240px;flex:1}.input,.select,.textarea{width:100%;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:10px;padding:10px 11px;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.score-card{display:flex;flex-direction:column;gap:10px}.score-title{font-weight:760;font-size:18px}.meta{display:flex;gap:6px;flex-wrap:wrap}.badge{border:1px solid var(--line);border-radius:999px;padding:3px 8px;font-size:12px;color:var(--muted)}.row{display:flex;gap:10px;align-items:center}.row.space{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:12px}.muted{color:var(--muted)}.empty{padding:48px;text-align:center;color:var(--muted)}.folder-strip{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.folder-chip{white-space:nowrap}.folder-chip.active{border-color:var(--accent);color:var(--accent)}
.list{display:flex;flex-direction:column;gap:8px}.list-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px}.drag-handle{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:grid;place-items:center;padding:20px}.modal{width:min(720px,96vw);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);padding:20px}.modal.wide{width:min(1100px,97vw)}.modal h2{margin:0 0 16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1/-1}
.reader{position:fixed;inset:0;z-index:70;background:#2a2b2f;display:grid;grid-template-rows:64px 1fr 72px;color:#fff}.reader-top,.reader-bottom{background:rgba(24,25,28,.95);display:flex;align-items:center;gap:8px;padding:10px 14px;backdrop-filter:blur(16px);z-index:5}.reader-top{justify-content:space-between}.reader-title{font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}.reader-tools{display:flex;gap:6px;align-items:center;overflow-x:auto}.reader .btn{background:#383a40;border-color:#4a4d55;color:#fff;box-shadow:none}.reader .btn.active{background:#fff;color:#111;border-color:#fff}.reader-stage{position:relative;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px;touch-action:none}.spread{display:flex;gap:10px;align-items:flex-start;justify-content:center;min-width:max-content}.page-pane{position:relative;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:visible;touch-action:none}.pdf-canvas{display:block;background:#fff}.draw-canvas,.annotation-layer{position:absolute;inset:0;width:100%;height:100%}.draw-canvas{touch-action:none}.annotation-layer{pointer-events:none}.ann{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;user-select:none;touch-action:none;white-space:nowrap;line-height:1.05;text-shadow:0 1px 1px rgba(255,255,255,.35)}.ann.chord{font-weight:760}.ann.selected{color:#e32929!important;outline:1px dashed rgba(227,41,41,.6);outline-offset:3px}.ann.text{font-weight:600}.notation-block{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;color:#111;background:transparent}.notation-block.selected{outline:1px dashed #e32929}.notation-svg{display:block;overflow:visible}.reader-bottom{justify-content:space-between}.progress-wrap{flex:1;display:flex;align-items:center;gap:10px}.progress{height:10px;background:#52545b;border-radius:999px;position:relative;flex:1;overflow:visible}.progress-fill{height:100%;background:#fff;border-radius:999px}.progress-marker{position:absolute;top:-4px;width:2px;height:18px;background:#ff4f4f}.progress-click{position:absolute;inset:-12px 0;cursor:pointer}.page-count{font-variant-numeric:tabular-nums;min-width:75px;text-align:center}.floating-panel{position:fixed;right:16px;top:78px;z-index:76;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 170px);overflow:auto;background:var(--toolbar);color:var(--text,#17181b);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}:root[data-theme="dark"] .floating-panel{--text:#f4f4f5}.tool-section{padding:10px 0;border-bottom:1px solid var(--line)}.tool-section:last-child{border-bottom:0}.tool-title{font-weight:760;margin-bottom:8px}.seg{display:flex;gap:5px;flex-wrap:wrap}.seg .btn{font-size:12px;padding:6px 8px}.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #999}.loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.18);font-weight:700}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;background:#15171b;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);font-size:14px}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}.stat{font-size:28px;font-weight:800}.divider{height:1px;background:var(--line);margin:8px 0}.tiny{font-size:12px}.danger-zone{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
@media (max-width:820px){.app-shell{grid-template-columns:1fr;grid-template-rows:1fr 62px}.sidebar{position:fixed;left:0;right:0;bottom:0;height:62px;border-right:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:6px;gap:4px}.brand,.nav-spacer,.save-state{display:none}.nav-btn{justify-content:center;padding:8px 4px;font-size:12px;flex-direction:column;gap:3px}.main{padding-bottom:62px}.page{padding:18px 14px}.page-title{font-size:25px}.page-header{align-items:center}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.reader-title{max-width:28vw}.reader-top{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}.reader{grid-template-rows:calc(58px + env(safe-area-inset-top)) 1fr calc(62px + env(safe-area-inset-bottom))}.reader-bottom{padding-bottom:max(8px,env(safe-area-inset-bottom))}.floating-panel{top:calc(70px + env(safe-area-inset-top));max-height:calc(100vh - 155px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.reader-stage{padding:8px}.grid{grid-template-columns:1fr 1fr}.score-card{min-width:0}}
@media (max-width:520px){.grid{grid-template-columns:1fr}.reader-tools .btn span.label{display:none}.page-sub{display:none}.toolbar{align-items:stretch}.search{min-width:100%}}
.ann.chord{position:absolute}.ann.chord .chord-body{display:inline-block}.ann.chord .tension-stack{position:absolute;left:100%;bottom:72%;font-size:.52em;line-height:.9;text-align:left;font-weight:750;margin-left:2px}