@import"https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@300;400;500;700&display=swap";:root{--bg-color: #FDFBF7;--sidebar-bg: #F5EFE6;--panel-bg: #FFFFFF;--accent-color: #D4B996;--accent-hover: #C5A075;--text-primary: #4A4036;--text-secondary: #8C7E6A;--border-color: #E3D8C7;--shadow-soft: 0 4px 12px rgba(74, 64, 54, .08);--radius: 16px;--font-body: "Noto Sans KR", sans-serif;--font-heading: "Gowun Dodum", sans-serif}*{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-body);background:var(--bg-color);color:var(--text-primary);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;color:var(--text-primary);margin:0 0 16px}button,input,textarea,select{font-family:inherit}.layout-container{display:flex;height:100vh;overflow:hidden;background:var(--bg-color)}.sidebar{width:280px;background:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;z-index:100;box-shadow:2px 0 12px #00000005}.sidebar-header{padding:24px;display:flex;justify-content:space-between;align-items:center}.home-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-primary);font-family:var(--font-heading);font-weight:700;padding:8px 0;display:flex;align-items:center;gap:10px;transition:color .2s}.home-btn:hover{color:var(--accent-hover)}.close-btn{background:none;border:none;cursor:pointer;display:none;color:var(--text-secondary);padding:4px;border-radius:50%;transition:background .2s}.close-btn:hover{background:#0000000d}.sidebar-actions{padding:0 24px 16px}.editor-btn{width:100%;padding:12px;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-weight:500;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #00000005;display:flex;align-items:center;justify-content:center;gap:8px}.editor-btn:hover{background:var(--bg-color);border-color:var(--accent-color);transform:translateY(-1px);box-shadow:var(--shadow-soft)}.song-list{list-style:none;padding:0 16px 24px;margin:0;overflow-y:auto;flex:1}.song-list li{margin-bottom:8px}.song-list li button{width:100%;text-align:left;padding:10px;background:transparent;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;font-size:15px;color:var(--text-primary);transition:all .2s;display:flex;align-items:center;gap:12px}.song-list li button:hover{background:#ffffff80}.song-list li.active button{background:var(--panel-bg);border-color:var(--accent-color);box-shadow:var(--shadow-soft);color:var(--text-primary);font-weight:500}.song-cover{width:48px;height:48px;object-fit:cover;border-radius:10px;background:var(--border-color);flex-shrink:0;box-shadow:0 2px 4px #0000001a}.song-title{flex:1;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px}.main-content{flex:1;display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative}.header{padding:24px 40px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fdfbf7cc}.menu-btn{background:none;border:none;cursor:pointer;display:none;color:var(--text-primary);padding:8px;margin-left:-8px;border-radius:50%;transition:background .2s}.menu-btn:hover{background:#0000000d}.header-text h1{font-size:24px;margin:0;color:var(--text-primary);font-family:var(--font-heading)}.header-text p{margin:4px 0 0;color:var(--text-secondary);font-size:14px}.panel{background:var(--panel-bg);border-radius:var(--radius);padding:24px;margin:0 40px 24px;box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.8);transition:transform .2s,box-shadow .2s}.panel:hover{box-shadow:0 8px 24px #4a40361f}.panel.display{background:transparent;box-shadow:none;border:none;padding:0;margin-top:0}.panel.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.welcome-screen{text-align:center;padding:60px 24px;background:transparent;box-shadow:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.welcome-screen h2{font-size:36px;margin-bottom:16px;color:var(--text-primary)}.welcome-screen p{font-size:18px;color:var(--text-secondary);margin-bottom:8px;max-width:600px}.row{display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap}.row.space{justify-content:space-between}.input,.textarea{flex:1;padding:12px 16px;border:1px solid var(--border-color);border-radius:12px;background:#fcfcfc;font-size:15px;transition:all .2s;color:var(--text-primary)}.input:focus,.textarea:focus{outline:none;border-color:var(--accent-color);background:#fff;box-shadow:0 0 0 4px #d4b99626}.textarea{min-height:120px;resize:vertical;line-height:1.6}.btn{padding:10px 20px;border:1px solid var(--border-color);background:#fff;border-radius:12px;cursor:pointer;font-weight:500;color:var(--text-primary);font-size:14px;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{background:#f8f8f8;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.btn:active{transform:translateY(0)}.btn.primary{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}.btn.primary:hover{background:#3a322a;border-color:#3a322a;box-shadow:0 4px 16px #3a322a40}.btn.small{padding:6px 12px;font-size:13px;border-radius:8px}.player{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px #00000026}.lyrics{text-align:center;padding:40px 24px;min-height:200px}.lyrics .line{margin:16px 0;color:var(--text-secondary);font-size:18px;transition:all .5s ease;opacity:.5;filter:blur(.5px)}.lyrics .line.current{color:var(--text-primary);font-size:26px;font-weight:700;font-family:var(--font-heading);transform:scale(1.05);opacity:1;filter:blur(0);text-shadow:0 2px 4px rgba(0,0,0,.05)}.lyrics .time{font-size:12px;color:var(--accent-color);margin-top:4px;font-weight:400}.cue-list{display:grid;gap:8px}.cue{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border:1px solid transparent;border-radius:12px;transition:all .2s}.cue:hover{border-color:var(--border-color);background:#fafafa}.cue.active{background:var(--sidebar-bg);border-color:var(--accent-color);box-shadow:var(--shadow-soft)}.cue-time{font-family:monospace;font-size:13px;color:var(--text-secondary);width:140px;flex-shrink:0}.cue-text{flex:1;white-space:pre-wrap;color:var(--text-primary);line-height:1.5}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#2f261a66;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-body{background:#fff;padding:32px;border-radius:20px;width:min(600px,90vw);display:grid;gap:20px;box-shadow:0 20px 48px #0003;animation:modalIn .3s cubic-bezier(.16,1,.3,1)}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.hidden{display:none!important}.label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-secondary);font-size:14px}.error{color:#d32f2f;font-size:14px;margin-top:8px;background:#ffebee;padding:8px 12px;border-radius:8px}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;display:none}@media (max-width: 768px){.sidebar{position:fixed;transform:translate(-100%);height:100%}.sidebar.open{transform:translate(0)}.menu-btn,.overlay{display:block}.header{padding:16px 20px}.panel{margin:0 20px 20px;padding:20px}.panel.grid{grid-template-columns:1fr}}
