:root{--font-family-primary:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;--font-size-xs:10px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-size-xl:20px;--font-size-2xl:28px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--line-height-base:26px;--color-text-primary:#fff;--color-text-secondary:#a6a6a6;--color-text-tertiary:#775eff;--color-text-tertiary-hover:#9380ff;--color-text-inverse:#f6f6f6;--color-surface-base:#000;--color-surface-muted:#232323;--color-surface-raised:#1c1c1c;--color-surface-strong:#121212;--color-border-strong:#fff;--color-border-muted:#1c1c1c;--color-border-focus:#775eff;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:16px;--space-6:24px;--space-7:32px;--space-8:48px;--radius-xs:12px;--radius-sm:16px;--radius-md:9999px;--motion-duration-instant:.15s;--motion-duration-normal:.25s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-surface-base);color:var(--color-text-primary);font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);line-height:var(--line-height-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{width:100%;max-width:800px;padding:var(--space-6) var(--space-5);gap:var(--space-6);flex-direction:column;flex:1;margin:0 auto;display:flex}h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:-.5px;align-items:center;gap:var(--space-4);display:flex}h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-4)}button,input,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}@media (hover:none) and (pointer:coarse){input,textarea,select{font-size:16px!important}}button{cursor:pointer;transition:all var(--motion-duration-instant) ease-in-out;justify-content:center;align-items:center;gap:var(--space-2);background:0 0;border:none;display:inline-flex}button:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:2px solid var(--color-border-strong);outline-offset:2px}.btn-primary{background-color:var(--color-text-tertiary);color:var(--color-text-primary);padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-weight:var(--font-weight-bold);min-height:48px}.btn-primary:hover{background-color:var(--color-text-tertiary-hover)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-secondary{background-color:var(--color-surface-muted);border:1px solid var(--color-border-muted);color:var(--color-text-secondary);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);min-height:44px}.btn-secondary:hover{color:var(--color-text-primary);border-color:var(--color-text-secondary);background-color:var(--color-surface-raised)}.btn-secondary:active{transform:scale(.98)}.btn-icon-only{border-radius:var(--radius-md);width:44px;height:44px;color:var(--color-text-secondary);background-color:var(--color-surface-muted);border:1px solid var(--color-border-muted)}.btn-icon-only:hover{color:var(--color-text-primary);background-color:var(--color-surface-raised)}.card-glass{-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);padding:var(--space-5);transition:border-color var(--motion-duration-instant) ease;background-color:#1c1c1ca6}.card-glass:hover{border-color:#775eff66}.search-wrapper{gap:var(--space-4);width:100%;display:flex}.input-search-container{flex:1;align-items:center;display:flex;position:relative}.input-search{background-color:var(--color-surface-raised);border:1px solid var(--color-border-muted);border-radius:var(--radius-md);width:100%;height:48px;padding:0 var(--space-8) 0 var(--space-5);color:var(--color-text-primary);font-size:var(--font-size-lg);transition:border-color var(--motion-duration-instant) ease}.input-search:focus{border-color:var(--color-border-focus)}.btn-clear-search{right:var(--space-4);color:var(--color-text-secondary);padding:var(--space-2);position:absolute}.btn-clear-search:hover{color:var(--color-text-primary)}.badge-group{gap:var(--space-3);margin:var(--space-4) 0;flex-wrap:wrap;display:flex}.badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-xs);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);display:inline-flex}.badge-tj{color:#a394ff;background-color:#775eff26;border:1px solid #775eff4d}.badge-ky{color:#ff94d4;background-color:#ff5eb826;border:1px solid #ff5eb84d}.song-card{gap:var(--space-3);text-align:left;flex-direction:column;display:flex;position:relative}.song-card-header{justify-content:space-between;align-items:flex-start;gap:var(--space-5);display:flex}.song-info{flex-direction:column;display:flex}.song-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.song-artist{font-size:var(--font-size-md);color:var(--color-text-secondary)}.song-card-actions{gap:var(--space-3);display:flex}.lyric-snippet{font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-base);margin-top:var(--space-3);padding:var(--space-4);border-radius:var(--radius-xs);white-space:pre-line;background-color:#0000004d;max-height:120px;position:relative;overflow:hidden}.lyric-snippet-fade{pointer-events:none;background:linear-gradient(#0000,#000000b3);width:100%;height:40px;position:absolute;bottom:0;left:0}.settings-section{gap:var(--space-4);margin-bottom:var(--space-4);flex-direction:column;display:flex}.settings-input-group{gap:var(--space-2);flex-direction:column;display:flex}.settings-input-group label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.settings-input{background-color:var(--color-surface-raised);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);width:100%;height:44px;padding:0 var(--space-4);color:var(--color-text-primary)}.settings-input:focus{border-color:var(--color-border-focus)}.vault-header{margin-top:var(--space-6);border-bottom:1px solid var(--color-border-muted);padding-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.vault-grid{gap:var(--space-5);margin-top:var(--space-5);grid-template-columns:1fr;display:grid}@media (width>=600px){.vault-grid{grid-template-columns:1fr 1fr}}.empty-state{padding:var(--space-8) var(--space-6);text-align:center;color:var(--color-text-secondary);border:1px dashed var(--color-border-muted);border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.empty-state-title{color:var(--color-text-primary);font-weight:var(--font-weight-bold)}.skeleton-card{background-color:var(--color-surface-muted);padding:20px;position:relative;overflow:hidden}.skeleton-line{background-color:var(--color-surface-raised);border-radius:var(--radius-xs);height:20px;margin-bottom:var(--space-4)}.skeleton-line.title{width:60%;height:24px}.skeleton-line.artist{width:40%}.skeleton-line.badge{width:30%;margin-right:var(--space-4);display:inline-block}.skeleton-line.snippet{width:100%;height:60px;margin-top:var(--space-4)}.skeleton-card:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff0d 50%,#0000 100%);animation:1.5s infinite skeleton-wave;position:absolute;inset:0}@keyframes skeleton-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:var(--space-5);z-index:1000;background-color:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--color-surface-raised);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);flex-direction:column;width:100%;max-width:600px;max-height:85vh;animation:.2s ease-out modal-appear;display:flex;position:relative}@keyframes modal-appear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{padding:var(--space-5);border-bottom:1px solid var(--color-border-muted);justify-content:space-between;align-items:flex-start;display:flex}.modal-body{padding:var(--space-5);gap:var(--space-5);flex-direction:column;flex:1;display:flex;overflow-y:auto}.modal-footer{padding:var(--space-5);border-top:1px solid var(--color-border-muted);justify-content:flex-end;gap:var(--space-4);display:flex}.modal-close-btn{color:var(--color-text-secondary)}.modal-close-btn:hover{color:var(--color-text-primary)}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-group label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-bold)}.form-control{background-color:var(--color-surface-muted);border:1px solid var(--color-border-muted);border-radius:var(--radius-xs);padding:var(--space-4);color:var(--color-text-primary);width:100%}.form-control:focus{border-color:var(--color-border-focus)}textarea.form-control{resize:vertical;min-height:150px;font-size:var(--font-size-md);line-height:var(--line-height-base)}.full-lyrics-view{padding:var(--space-5);border-radius:var(--radius-xs);white-space:pre-line;max-height:350px;font-size:var(--font-size-md);line-height:var(--line-height-base);border:1px solid var(--color-border-muted);background-color:#0006;overflow-y:auto}