:root{--bg:#000;--text:#e9e9e9;--muted:#858585;--red:#ff6262;--blue:#6e9fff;--green:#54d892;--lyric-size:21px;--app-title-size:24px}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}button{font:inherit;color:inherit}.screen{display:none;height:100%}.screen.on{display:block}#list{overflow:auto;padding:18px 14px 28px}#appTitle{font-size:var(--app-title-size);margin:5px 0 5px;white-space:pre-line;line-height:1.18}.desc{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:15px}.song{display:block;width:100%;text-align:left;border:0;background:#111;padding:15px 16px;margin:7px 0;border-radius:12px;font-size:16px;font-weight:750}.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:16px 2px}.red{color:var(--red);font-weight:850}.blue{color:var(--blue);font-weight:850}.green{color:var(--green);font-weight:850}
#player{position:relative;overflow:hidden}.header{height:64px;position:absolute;z-index:10;top:0;left:0;right:0;padding:9px 12px;background:#000;border-bottom:1px solid #1d1d1d;display:flex;align-items:center;gap:10px}.back{border:0;background:#181818;border-radius:9px;padding:9px 11px}.headtext{min-width:0;flex:1}#title{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#speedText{font-size:11px;color:var(--muted);margin-top:2px}
#viewport{position:absolute;top:64px;bottom:72px;left:0;right:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}#viewport::-webkit-scrollbar{display:none}#lyrics{padding:28vh 22px 56vh;font-size:var(--lyric-size);line-height:1.72;word-break:keep-all}.line{min-height:1.72em;margin:0 0 .12em}.line.blank{min-height:1.2em}
.controls{height:72px;position:absolute;z-index:10;bottom:0;left:0;right:0;padding:8px 10px max(8px,env(safe-area-inset-bottom));background:#000;border-top:1px solid #1d1d1d;display:grid;grid-template-columns:82px 1fr 58px;gap:8px}.controls button{border:0;border-radius:11px;background:#181818;font-weight:800}#play{background:#eee;color:#111;font-size:16px}.more-btn{font-size:24px;line-height:1}.practice-sheet{display:none;position:absolute;z-index:25;left:10px;right:10px;bottom:82px;background:#111;border:1px solid #2b2b2b;border-radius:16px;padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.45)}.practice-sheet.on{display:block}.practice-sheet h3{margin:0 0 12px;font-size:16px}.sheet-row{display:grid;grid-template-columns:84px 44px 1fr 44px;gap:8px;align-items:center;margin:10px 0}.sheet-label{font-size:13px;color:#bbb;font-weight:800}.sheet-value{text-align:center;background:#080808;border:1px solid #2d2d2d;border-radius:10px;padding:10px 8px;font-weight:850}.sheet-row button{border:0;border-radius:10px;background:#242424;padding:10px 0;font-weight:900}.sheet-note{font-size:11px;color:#777;line-height:1.4;margin-top:8px}

.list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.head-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.settings-btn,.share-btn{border:0;background:#181818;border-radius:10px;padding:9px 12px;font-weight:800;flex:0 0 auto}.share-btn{background:#242424}
.modal{display:none;position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.78);padding:18px;align-items:center;justify-content:center}.modal.on{display:flex}.modal-card{width:min(520px,100%);max-height:88vh;overflow:auto;background:#111;border:1px solid #2b2b2b;border-radius:16px;padding:18px}.modal-card h2{font-size:20px;margin:0 0 14px}.field{display:block;margin:11px 0}.field span{display:block;color:#aaa;font-size:12px;margin-bottom:5px}.field input,.field textarea{width:100%;border:1px solid #333;border-radius:9px;background:#080808;color:#eee;padding:11px 12px;font-size:16px;font-family:inherit}.field textarea{min-height:76px;resize:vertical;line-height:1.4}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.modal-actions button{border:0;border-radius:10px;background:#242424;padding:10px 14px;font-weight:800}.modal-actions .primary{background:#eee;color:#111}.error{min-height:1.3em;color:#ff7474;font-size:12px;margin-top:7px}.admin-note{color:#777;font-size:11px;line-height:1.45;margin-top:10px}

.search-wrap{margin:14px 0 10px}.song-search{width:100%;border:1px solid #2c2c2c;border-radius:11px;background:#0b0b0b;color:#eee;padding:12px 13px;font-size:15px}.section-title{font-size:13px;color:#aaa;font-weight:800;margin:16px 2px 7px}.song-row{display:grid;grid-template-columns:1fr 46px;gap:7px;align-items:stretch}.song-row .song{margin:4px 0}.fav-btn{border:0;background:#181818;border-radius:12px;margin:4px 0;font-size:22px;color:#777}.fav-btn.on{color:#ffd65a}.empty-note{color:#777;font-size:13px;padding:8px 3px 2px}.scroll-hint{font-size:11px;color:#777;margin-top:3px}.manual-scrolling #lyrics{opacity:.96}
.promo-carousel{position:relative;width:100%;max-width:100%;margin:10px 0 16px;border:1px solid #343434;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:3.68/1;min-height:0;isolation:isolate;touch-action:pan-y;box-shadow:0 8px 24px rgba(0,0,0,.28)}.promo-carousel[hidden]{display:none}.promo-bg,.promo-shade,.promo-copy{display:none!important}.promo-main{position:absolute;z-index:1;inset:0;display:block;width:100%;max-width:100%;height:100%;object-fit:contain;object-position:center;background:#000;filter:none;transition:opacity .35s ease;transform:none}.promo-carousel.changing .promo-main{opacity:0}.promo-carousel.active .promo-main{transform:none}.promo-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#bbb;font-size:14px;line-height:1.5}.promo-placeholder[hidden]{display:none}.ad-dots{position:absolute;z-index:4;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:6px;pointer-events:none}.ad-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.38);transition:width .22s ease,background .22s ease}.ad-dot.on{width:18px;border-radius:99px;background:#fff}.field-check{display:flex;align-items:center;gap:9px;margin:11px 0;color:#ddd;font-size:14px}.field-check input{width:18px;height:18px}.file-note{color:#777;font-size:11px;line-height:1.45;margin-top:5px}.ad-editor{border:1px solid #292929;border-radius:12px;padding:12px;margin:10px 0;background:#0b0b0b}.ad-editor-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.ad-editor-title{font-size:13px;font-weight:850}.ad-remove,.ad-add{border:0;border-radius:9px;background:#242424;color:#eee;padding:8px 10px;font-weight:800}.ad-add{width:100%;margin-top:8px}.ad-editor .field{margin:8px 0}.ad-editor .field span{font-size:11px}.ad-editor select{width:100%;border:1px solid #333;border-radius:9px;background:#080808;color:#eee;padding:11px 12px;font-size:15px}

.user-settings-card{width:min(480px,100%)}.settings-section{border-top:1px solid #252525;padding-top:14px;margin-top:14px}.settings-section:first-of-type{border-top:0;padding-top:0;margin-top:0}.settings-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:#181818;border-radius:12px;padding:13px 14px;margin:8px 0;text-align:left}.settings-item-main{min-width:0}.settings-item-title{font-size:14px;font-weight:850}.settings-item-value{font-size:12px;color:#999;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-item-arrow{color:#888;font-size:20px}.music-options{display:grid;gap:7px;margin-top:8px}.music-option{display:flex;align-items:center;gap:10px;border:1px solid #2e2e2e;border-radius:11px;padding:11px 12px;background:#0b0b0b}.music-option input{width:18px;height:18px}.admin-entry{background:#222}.music-open-btn{border:0;background:#1d1d1d;color:#eee;border-radius:10px;padding:8px 10px;font-weight:800;white-space:nowrap}.header{padding-right:10px}.headtext{min-width:0}.music-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 0;border-bottom:1px solid #242424}.music-sheet-name{font-size:13px;font-weight:850}.music-sheet-value{font-size:12px;color:#999;margin-top:3px}.sheet-change-btn{border:0;border-radius:9px;background:#242424;padding:9px 11px;font-weight:800}.user-note{font-size:11px;color:#777;line-height:1.45;margin-top:10px}

/* v0.6.7 안정화: YouTube 영역 단일 정의 */
#play:disabled{opacity:.55;cursor:wait}
#player{--youtube-panel-height:0px}
#player .youtube-practice{
  display:none;position:absolute;top:74px;left:14px;right:14px;
  width:auto;margin:0;z-index:12;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#111;border:1px solid #292929;
  box-shadow:0 10px 28px rgba(0,0,0,.55)
}
#player .youtube-practice.on{display:block}
#player .youtube-practice iframe{display:block;width:100%;height:100%;border:0}
.youtube-status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:#111;color:#aaa;font-size:13px;z-index:2;white-space:pre-line}
.youtube-status[hidden]{display:none}
#player.youtube-mode #viewport{top:calc(74px + var(--youtube-panel-height) + 12px)}
#player:not(.youtube-mode) #viewport{top:64px}
#player.youtube-mode #lyrics{padding-top:22vh;padding-bottom:56vh}
.line.sync-active{opacity:1!important;filter:none;font-weight:inherit}
.line.sync-preview{opacity:1!important;filter:brightness(1.12)}
.line.sync-past{opacity:.42}.line.sync-future{opacity:.68}
.sync-manual .line:not(.sync-preview){opacity:.38}.sync-manual .line.sync-preview{opacity:1}

/* v0.6.3 관리자 퀵 편집 */
.quick-edit-trigger{width:18px;height:34px;padding:0;border:0;background:transparent;color:#777;opacity:.22;font-size:22px;line-height:1;flex:0 0 18px;touch-action:none;user-select:none;-webkit-user-select:none}.quick-edit-trigger:active{opacity:.5}.quick-admin-card{width:min(360px,100%)}
.quick-editor{display:none;position:absolute;z-index:30;left:8px;right:8px;bottom:80px;background:rgba(15,15,15,.98);border:1px solid #303030;border-radius:15px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.58)}.quick-editor.on{display:block}.quick-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.quick-editor-head strong{font-size:14px}.quick-editor-head button{border:0;border-radius:8px;background:#252525;padding:7px 10px;font-weight:800}.quick-editor-head #quickEditorMeta{font-size:11px;color:#888;margin-top:3px}.quick-editor-line{margin-top:10px;padding:10px 11px;min-height:42px;background:#080808;border-radius:10px;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-editor-time{text-align:center;font-variant-numeric:tabular-nums;font-size:23px;font-weight:900;letter-spacing:.02em;padding:9px 0}.quick-editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.quick-editor-grid button{border:0;border-radius:9px;background:#242424;padding:10px 6px;font-size:12px;font-weight:850}.quick-editor-grid .quick-primary{background:#eee;color:#111}.quick-editor-note{font-size:10px;color:#737373;line-height:1.4;margin-top:8px}.line.quick-selected{outline:1px solid rgba(255,255,255,.35);outline-offset:4px;border-radius:4px}.quick-editing #viewport{padding-bottom:230px}

/* v0.6.4: single settings entry + hidden admin access */
.sheet-actions{display:flex;gap:7px}.sheet-open-btn{border:0;border-radius:9px;background:#eee;color:#111;padding:9px 11px;font-weight:850}.version-entry{display:block;margin:15px auto 0;border:0;background:transparent;color:#3f3f3f;font-size:10px;padding:10px 18px;letter-spacing:.01em}.version-entry:active{color:#666}.header .headtext{padding-right:4px}

.json-preview-card{width:min(620px,100%)}.json-filename{font-size:13px;font-weight:850;color:#ddd;background:#080808;border:1px solid #303030;border-radius:9px;padding:10px 12px;margin-bottom:9px;word-break:break-all}.json-preview-text{width:100%;height:42vh;min-height:240px;resize:vertical;background:#070707;color:#e9e9e9;border:1px solid #303030;border-radius:10px;padding:12px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.json-guide{font-size:12px;color:#999;line-height:1.5;margin-top:10px}.json-guide b{color:#ddd}

/* v0.6.7 안정화: 모바일 동적 화면 높이와 하단 안전영역 */
:root{--control-base:72px;--control-safe:env(safe-area-inset-bottom,0px);--control-height:calc(var(--control-base) + var(--control-safe))}
html,body{height:100%;min-height:100dvh;overflow:hidden}
.screen{height:100dvh;min-height:100dvh}
#list{overflow:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
#viewport{bottom:var(--control-height)}
.controls{height:var(--control-height);padding:8px 10px calc(8px + var(--control-safe))}
.practice-sheet{bottom:calc(var(--control-height) + 10px)}
.quick-editor{bottom:calc(var(--control-height) + 8px)}
@supports not (height:100dvh){.screen{height:100%;min-height:100%}}