/* BeatVerse */
:root{--p:#6C5CE7;--pl:#A29BFE;--pd:#5A4BD1;--a:#FD79A8;--ag:rgba(253,121,168,.25);--bg:#0F0F1A;--c:#1A1A2E;--ch:#222240;--t:#F0F0F5;--td:#8888AA;--ok:#00B894;--w:#FDCB6E;--ng:#E17055;--r:12px;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--t);min-height:100vh;line-height:1.6;}
.app-container{max-width:500px;margin:0 auto;padding:14px;min-height:100vh;display:flex;flex-direction:column;}

/* header */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px;}
.app-header h1{font-size:1.15rem;font-weight:800;background:linear-gradient(135deg,var(--pl),var(--a));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.h-brand{display:flex;flex-direction:column;gap:2px;line-height:1.1;}
.h-user{font-size:.72rem;color:var(--td);letter-spacing:.02em;}
.h-user .h-badge{display:inline-block;background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;padding:1px 6px;border-radius:4px;font-size:.62rem;font-weight:700;margin-left:4px;vertical-align:1px;}
.header-stats{display:flex;gap:10px;font-size:.76rem;color:var(--td);}

/* screen */
.screen{display:none;flex-direction:column;flex:1;}
.screen.active{display:flex;}
.hidden{display:none!important;}

/* 생성 작업 복구 배너 */
.resume-banner{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(108,92,231,.25),rgba(253,121,168,.2));border:1px solid rgba(162,155,254,.4);border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:.78rem;color:var(--t);font-weight:600;}
.resume-banner .rb-spin{display:inline-block;animation:rbSpin 2s linear infinite;color:var(--pl);font-size:1rem;}
@keyframes rbSpin{to{transform:rotate(360deg);}}
.resume-banner .rb-x{margin-left:auto;background:none;border:none;color:var(--td);font-size:1.1rem;cursor:pointer;width:24px;height:24px;border-radius:50%;}
.resume-banner .rb-x:hover{color:var(--t);background:rgba(255,255,255,.1);}

/* SunoAPI 크레딧 카드 */
.credit-card{background:linear-gradient(135deg,rgba(108,92,231,.18),rgba(253,121,168,.12));border:1px solid rgba(162,155,254,.3);border-radius:12px;padding:10px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,background .2s;}
.credit-card.low{border-color:rgba(253,203,110,.5);background:linear-gradient(135deg,rgba(253,203,110,.18),rgba(253,121,168,.08));}
.credit-card.err{border-color:rgba(225,112,85,.55);background:linear-gradient(135deg,rgba(225,112,85,.2),rgba(108,92,231,.08));}
.credit-card .cc-row{display:flex;align-items:center;gap:8px;}
.credit-card .cc-icon{font-size:1.05rem;}
.credit-card .cc-label{font-size:.78rem;color:var(--td);font-weight:600;}
.credit-card .cc-val{margin-left:auto;font-size:1rem;font-weight:800;color:var(--pl);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.credit-card.low .cc-val{color:var(--w);}
.credit-card.err .cc-val{color:var(--ng);}
.credit-card .cc-val.cc-loading{font-size:.78rem;color:var(--td);font-weight:500;}
.credit-card .cc-val.cc-err{color:var(--ng);font-size:.78rem;font-weight:600;}
.credit-card .cc-refresh{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--t);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.88rem;display:flex;align-items:center;justify-content:center;transition:transform .3s,background .2s;}
.credit-card .cc-refresh:hover{background:rgba(255,255,255,.16);transform:rotate(180deg);}
.credit-card .cc-sub{font-size:.7rem;color:var(--td);line-height:1.4;}
.credit-card .cc-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.credit-card .cc-link{font-size:.7rem;color:var(--pl);text-decoration:none;background:rgba(162,155,254,.12);border:1px solid rgba(162,155,254,.25);padding:3px 9px;border-radius:999px;font-weight:600;transition:background .15s,border-color .15s;}
.credit-card .cc-link:hover{background:rgba(162,155,254,.25);border-color:rgba(162,155,254,.45);color:#fff;}
.credit-card .cc-active{display:none;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding:7px 10px;border-radius:10px;font-size:.76rem;font-weight:600;background:linear-gradient(135deg,rgba(0,184,148,.15),rgba(108,92,231,.08));border:1px solid rgba(0,184,148,.35);color:var(--t);}
.credit-card .cc-active.ok{display:flex;}
.credit-card .cc-active.err{display:flex;background:rgba(225,112,85,.14);border-color:rgba(225,112,85,.4);}
.credit-card .cc-active .ak-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(0,184,148,.8);animation:akPulse 1.8s ease-in-out infinite;}
.credit-card .cc-active.err .ak-dot,.credit-card .cc-active .ak-dot-err{background:var(--ng);box-shadow:0 0 8px rgba(225,112,85,.7);}
@keyframes akPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.credit-card .cc-active .ak-label{color:var(--td);font-weight:500;}
.credit-card .cc-active .ak-idx{color:var(--ok);font-weight:800;padding:1px 7px;border-radius:999px;background:rgba(0,184,148,.18);}
.credit-card .cc-active.err .ak-idx{color:var(--ng);background:rgba(225,112,85,.18);}
.credit-card .cc-active .ak-tail{color:var(--td);font-family:monospace;font-size:.7rem;}
.credit-card .cc-active .ak-credit{margin-left:auto;color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums;}
.credit-card .cc-breakdown{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.credit-card .cc-breakdown:empty{display:none;}
.credit-card .kb-row.is-active{border-color:var(--ok);background:rgba(0,184,148,.08);box-shadow:0 0 0 1px rgba(0,184,148,.25);}
.credit-card .kb-row.is-active .kb-idx{color:var(--ok);}

/* 생성 진행 중 "사용 중인 API" */
.gen-key{display:none;align-items:center;gap:8px;font-size:.78rem;color:var(--t);margin-top:6px;padding:6px 10px;border-radius:999px;background:rgba(108,92,231,.18);border:1px solid rgba(162,155,254,.35);font-weight:600;}
.gen-key:not(:empty){display:inline-flex;}
.gen-key .gk-dot{width:8px;height:8px;border-radius:50%;background:var(--pl);box-shadow:0 0 8px rgba(162,155,254,.9);animation:akPulse 1.6s ease-in-out infinite;}
.gen-key .gk-tail{font-family:monospace;font-size:.72rem;color:var(--td);}
.gen-key b{color:var(--pl);font-weight:800;}
.gen-key .gk-v{font-size:.7rem;color:var(--td);padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:600;}
.gen-key .gk-v.gk-variant{color:var(--w);background:rgba(253,203,110,.15);border:1px solid rgba(253,203,110,.3);}

/* 생성 오류 배너 */
.gen-error{background:linear-gradient(135deg,rgba(225,112,85,.18),rgba(108,92,231,.08));border:1px solid rgba(225,112,85,.45);border-radius:12px;padding:12px 14px;margin-top:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px -10px rgba(225,112,85,.4);animation:geSlide .25s ease-out;}
@keyframes geSlide{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.gen-error .ge-head{display:flex;align-items:center;gap:8px;}
.gen-error .ge-icon{font-size:1.25rem;color:var(--ng);filter:drop-shadow(0 0 6px rgba(225,112,85,.55));animation:geShake .4s ease-out;}
@keyframes geShake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-3px);}40%,80%{transform:translateX(3px);}}
.gen-error .ge-title{flex:1;font-size:.95rem;font-weight:800;color:var(--ng);letter-spacing:-.01em;}
.gen-error .ge-close{background:rgba(0,0,0,.2);border:none;color:var(--t);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;}
.gen-error .ge-close:hover{background:rgba(0,0,0,.4);color:#fff;}
.gen-error .ge-detail{font-size:.85rem;color:var(--t);line-height:1.5;font-weight:500;}
.gen-error .ge-hint{font-size:.78rem;color:var(--td);line-height:1.45;padding:8px 10px;background:rgba(0,0,0,.18);border-radius:8px;border-left:3px solid var(--pl);}

/* 생성 결과 플레이어 — hero-player 클래스를 공유하되 컨테이너 여백/완료 상태만 재정의 */
.gen-result.hero-player{margin-top:16px;animation:geSlide .3s ease-out;}
.gen-result.hero-player .hp-title{color:#fff;background:linear-gradient(135deg,rgba(0,184,148,.35),rgba(162,155,254,.25));border-color:rgba(0,184,148,.5);}
.gen-result.hero-player .hp-meta{color:#FDCB6E;background:rgba(253,203,110,.18);border-color:rgba(253,203,110,.35);}
.gen-result.hero-player .btn-block{margin-top:4px;}
.gen-result.hero-player .hp-controls{justify-content:center;margin-top:2px;}
.credit-card .kb-row{display:flex;align-items:center;gap:8px;font-size:.7rem;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);}
.credit-card .kb-row.kb-ok{border-color:rgba(0,184,148,.25);}
.credit-card .kb-row.kb-low{border-color:rgba(253,203,110,.35);}
.credit-card .kb-row.kb-exhausted{border-color:rgba(225,112,85,.4);opacity:.8;}
.credit-card .kb-row.kb-err{border-color:rgba(225,112,85,.4);background:rgba(225,112,85,.08);}
.credit-card .kb-idx{color:var(--td);font-weight:700;min-width:24px;}
.credit-card .kb-tail{color:var(--td);font-family:monospace;font-size:.68rem;}
.credit-card .kb-credit{margin-left:auto;font-weight:700;color:var(--t);font-variant-numeric:tabular-nums;}
.credit-card .kb-row.kb-exhausted .kb-credit,.credit-card .kb-row.kb-err .kb-credit{color:var(--ng);}
.credit-card .kb-row.kb-low .kb-credit{color:var(--w);}
.credit-card .kb-row.kb-ok .kb-credit{color:var(--ok);}
.credit-card .kb-status{font-size:.62rem;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08);}
.credit-card .kb-row.kb-ok .kb-status{background:rgba(0,184,148,.2);color:var(--ok);}
.credit-card .kb-row.kb-low .kb-status{background:rgba(253,203,110,.2);color:var(--w);}
.credit-card .kb-row.kb-exhausted .kb-status,.credit-card .kb-row.kb-err .kb-status{background:rgba(225,112,85,.2);color:var(--ng);}

/* 관리자 폼 - 멀티라인 키 입력 */
.admin-field textarea.admin-multi{width:100%;background:var(--bg);color:var(--t);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;font-size:.82rem;font-family:monospace;resize:vertical;outline:none;line-height:1.5;}
.admin-field textarea.admin-multi:focus{border-color:var(--pl);}
.admin-field textarea.admin-multi.highlight{border-color:var(--a);box-shadow:0 0 0 3px rgba(253,121,168,.3);animation:adminHighlight 2s ease-out;}
@keyframes adminHighlight{0%{box-shadow:0 0 0 0 rgba(253,121,168,.6);}100%{box-shadow:0 0 0 8px rgba(253,121,168,0);}}
.credit-card .cc-link-btn{border:1px solid rgba(253,121,168,.4);background:linear-gradient(135deg,rgba(253,121,168,.18),rgba(108,92,231,.14));color:#fff;cursor:pointer;font-family:inherit;}
.credit-card .cc-link-btn:hover{background:linear-gradient(135deg,rgba(253,121,168,.35),rgba(108,92,231,.28));border-color:rgba(253,121,168,.6);}
.admin-field pre.masked-multi{background:rgba(0,0,0,.25);padding:6px 10px;border-radius:6px;font-size:.72rem;color:var(--td);white-space:pre;overflow-x:auto;font-family:monospace;margin:2px 0;}

/* onboarding */
.onboarding{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;gap:16px;padding:24px 16px;}
.onboarding h2{font-size:1.3rem;font-weight:800;}
.onboarding p{color:var(--td);font-size:.88rem;max-width:280px;}

/* auth — grid 한 열로 아이디/비밀번호/버튼 폭을 동일하게 유지 */
.auth-form{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;width:100%;max-width:280px;}
.auth-form input,.add-form input,.add-form textarea{background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 13px;color:var(--t);font-size:.9rem;outline:none;font-family:inherit;}
.auth-form > input{width:100%;min-width:0;}
.auth-form input:focus,.add-form input:focus,.add-form textarea:focus{border-color:var(--p);}
.auth-form input::placeholder,.add-form input::placeholder,.add-form textarea::placeholder{color:var(--td);}
.auth-toggle{color:var(--pl);cursor:pointer;font-size:.78rem;}
.pw-wrap{position:relative;display:block;width:100%;min-width:0;}
.pw-wrap input{width:100%;min-width:0;padding-right:42px;box-sizing:border-box;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--td);cursor:pointer;padding:0;line-height:0;transition:background .15s,color .15s;}
.pw-eye svg{width:18px;height:18px;display:block;pointer-events:none;}
.pw-eye:hover{color:var(--t);background:rgba(255,255,255,.06);}
.pw-eye:focus-visible{outline:2px solid var(--p);outline-offset:1px;}
.pw-eye.on{color:var(--p);}

/* manage list (추가 화면 등록 구절 노래방 연습) */
.manage-list{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.lib-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px;margin-top:8px;border-bottom:2px solid var(--p);}
.lib-head.lib-head-sub{border-bottom-color:rgba(255,255,255,.1);margin-top:24px;}
.lib-title{font-size:1rem;color:var(--t);font-weight:800;letter-spacing:.01em;}
.lib-count{font-size:.75rem;color:var(--p);background:rgba(108,92,231,.15);padding:2px 10px;border-radius:12px;font-weight:700;}
.lib-empty{font-size:.85rem;color:var(--td);padding:24px 16px;background:var(--c);border-radius:var(--r);text-align:center;line-height:1.6;border:1px dashed rgba(255,255,255,.1);}
.mig-banner{padding:12px 14px;border-radius:8px;font-size:.82rem;line-height:1.6;margin-bottom:10px;}
.mig-banner code{background:rgba(255,255,255,.1);padding:2px 6px;border-radius:4px;font-size:.78rem;}
.mig-banner.mig-warn{background:rgba(253,203,110,.12);border:1px solid var(--w);color:var(--w);}
.manage-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;}
.manage-card.manage-ai{border:1px solid rgba(108,92,231,.35);background:linear-gradient(180deg,rgba(108,92,231,.08),var(--c));}
.manage-card .verse-ref{cursor:default;font-weight:700;}
.manage-karaoke{background:var(--ch);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;line-height:1.7;max-height:180px;overflow-y:auto;}
.manage-karaoke .k-word{font-size:.85rem;color:var(--td);padding:1px 4px;border-radius:3px;transition:color .1s,font-weight .1s;}
.manage-karaoke .k-word.active{color:#fff;font-weight:800;background:transparent;box-shadow:none;}
.manage-karaoke .k-word.done{color:rgba(255,255,255,.42);font-weight:500;}
.manage-card audio{display:none;}
.aud-bar{position:relative;width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:2px;cursor:pointer;margin:4px 0 2px;overflow:hidden;}
.aud-bar:hover{height:6px;}
.aud-bar-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--p),var(--a));border-radius:2px;width:0%;transition:width .08s linear;}
.aud-time{display:flex;justify-content:space-between;font-size:.68rem;color:var(--td);font-family:monospace;}
.manage-noaudio{font-size:.78rem;color:var(--td);padding:6px 10px;background:var(--ch);border-radius:6px;text-align:center;}
.manage-del{display:flex;justify-content:flex-end;}

/* 싱크 보정 컨트롤 */
.sync-ctrl{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--ch);border-radius:6px;font-size:.78rem;}
.sync-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--td);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:.72rem;font-family:monospace;transition:all .15s;}
.sync-btn:hover{color:var(--t);border-color:var(--p);}
.sync-range{flex:1;accent-color:var(--p);height:4px;}
.sync-val{font-family:monospace;font-size:.75rem;color:var(--pl);min-width:44px;text-align:right;}
.sync-edit-row{display:flex;justify-content:flex-end;}
.sync-edit-row .btn{font-size:.74rem;}

/* 업로드 박스 */
.upload-box{background:var(--c);border:1px dashed rgba(255,255,255,.14);border-radius:var(--r);padding:14px;margin-top:14px;}
.upload-box h3{font-size:.95rem;color:var(--pl);margin-bottom:6px;}
.upload-box .help{font-size:.78rem;color:var(--td);line-height:1.5;margin-bottom:10px;}
.upload-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.upload-row input[type=file]{flex:1;min-width:0;font-size:.82rem;color:var(--t);}
.upload-row input[type=file]::file-selector-button{background:var(--ch);color:var(--t);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;margin-right:8px;cursor:pointer;}
.upload-box>input[type=text],.upload-box>input[type=file],.upload-box>textarea{width:100%;box-sizing:border-box;background:var(--ch);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 12px;color:var(--t);font-size:.88rem;font-family:inherit;outline:none;margin-top:8px;}
.upload-box>input[type=file]::file-selector-button{background:var(--bg);color:var(--t);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;margin-right:8px;cursor:pointer;}
.upload-box>textarea{resize:vertical;min-height:70px;}
.upload-box>input:focus,.upload-box>textarea:focus{border-color:var(--p);}
.upload-opt{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--td);margin-top:8px;cursor:pointer;}
.upload-opt input{accent-color:var(--p);}
#uploadBtn{margin-top:10px;}

/* 탭 얼라인 오버레이 — 헤더/오디오/액션 고정, 가사만 flex-grow */
.align-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:999;display:flex;align-items:center;justify-content:center;padding:10px;}
.align-panel{background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;width:100%;max-width:680px;height:96vh;max-height:96vh;display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.align-head{flex:none;display:flex;justify-content:space-between;align-items:center;font-size:1.02rem;font-weight:800;color:var(--t);}
.align-close{background:transparent;border:none;color:var(--td);font-size:1.6rem;cursor:pointer;padding:0 6px;line-height:1;}
.align-close:hover{color:var(--t);}
.align-panel .help{flex:none;font-size:.76rem;color:var(--td);line-height:1.45;margin:0;}
.align-panel audio{display:none;}
.align-transport{flex:none;display:flex;align-items:center;gap:10px;}
.align-transport .btn{min-width:90px;}
.align-timer{font-family:monospace;font-size:.82rem;color:var(--td);}
.align-panel .aud-bar{flex:none;}
.align-panel .aud-time{flex:none;}
.align-progress{flex:none;font-size:.76rem;color:var(--pl);text-align:right;font-family:monospace;}
.align-words{flex:1 1 auto;min-height:120px;background:var(--c);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;}
.align-section{background:var(--ch);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;border:1.5px solid transparent;transition:border-color .12s,background .12s;}
.align-section.active{border-color:var(--a);background:linear-gradient(180deg,rgba(253,121,168,.08),var(--ch));}
.align-section.active .align-sec-words .k-word{color:#fff;font-weight:700;}
.align-section.has-ts .sec-badge.sec-done{background:var(--ok);color:#fff;}
.align-sec-head{display:flex;align-items:center;gap:8px;}
.align-sec-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--pl);font-size:.72rem;font-weight:800;}
.align-sec-play{background:var(--p);color:#fff;border:none;border-radius:6px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.78rem;padding:0;transition:background .12s;}
.align-sec-play:hover{background:var(--pd);}
.align-sec-play.playing{background:var(--a);}
.align-sec-time{width:70px;background:var(--bg);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:4px 8px;color:var(--t);font-size:.78rem;font-family:monospace;outline:none;text-align:center;}
.align-sec-time:focus{border-color:var(--p);}
.align-sec-time.err{border-color:var(--ng);color:var(--ng);}
.align-sec-now{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--pl);border-radius:6px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.82rem;padding:0;transition:all .12s;}
.align-sec-now:hover{background:rgba(162,155,254,.15);border-color:var(--pl);}
.align-sec-split,.align-sec-merge{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--td);border-radius:6px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.78rem;padding:0;transition:all .12s;}
.align-sec-split:hover,.align-sec-merge:hover{background:rgba(255,255,255,.06);color:var(--t);}
.align-sec-split.on{background:var(--a);color:#fff;border-color:var(--a);}
.align-split-hint{font-size:.72rem;color:var(--a);padding:2px 4px;}
/* 문장 편집 오버레이 (텍스트 기반) */
.content-edit-panel{height:auto;max-height:90vh;gap:12px;}
.content-edit-panel textarea{flex:1 1 auto;min-height:220px;background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 14px;color:var(--t);font-size:.95rem;line-height:1.7;font-family:inherit;outline:none;resize:vertical;}
.content-edit-panel textarea:focus{border-color:var(--p);}
.content-edit-actions{flex:none;display:flex;gap:8px;justify-content:flex-end;}
.content-edit-actions .btn{min-width:100px;}
.sec-badge{margin-left:auto;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:10px;}
.sec-badge.sec-done{background:var(--ok);color:#fff;}
.sec-badge.sec-part{background:rgba(253,203,110,.2);color:var(--w);}
.sec-badge.sec-empty{background:rgba(255,255,255,.06);color:var(--td);}
.align-sec-words{display:flex;flex-wrap:wrap;gap:4px 6px;line-height:1.85;}
.align-words .k-word{font-size:.95rem;color:var(--td);padding:2px 6px;border-radius:4px;cursor:pointer;user-select:none;transition:background .1s,color .1s;}
.align-words .k-word:hover{background:rgba(108,92,231,.18);color:var(--t);}
.align-actions{flex:none;display:flex;gap:6px;}
.align-actions .btn{flex:1;}
.align-form{flex:none;display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);}
.align-form input{background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px 12px;color:var(--t);font-size:.88rem;outline:none;}

/* 옵션 행 (레거시 호환용) */
.opt-row{display:flex;gap:8px;align-items:center;}
.opt-lbl{font-size:.76rem;color:var(--td);font-weight:700;min-width:42px;}
.opt-row select{flex:1;background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:var(--t);font-size:.85rem;outline:none;}

/* 장르·보컬·분위기 pill 스타일 */
.opt-section{background:var(--c);border-radius:10px;padding:10px 12px;margin-top:8px;}
.opt-section:first-child{margin-top:0;}
.opt-title{font-size:.85rem;color:var(--pl);font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:4px;}
.opt-title .opt-note{color:var(--td);font-weight:500;font-size:.72rem;margin-left:2px;}
.opt-sub{font-size:.72rem;color:var(--td);font-weight:700;margin:8px 0 4px;letter-spacing:.02em;}
.opt-sub:first-of-type{margin-top:4px;}
.pill-group{display:flex;flex-wrap:wrap;gap:5px;}
.pill{display:inline-block;cursor:pointer;user-select:none;}
.pill input{position:absolute;opacity:0;pointer-events:none;}
.pill span{display:inline-block;padding:7px 12px;background:var(--ch);border:1px solid rgba(255,255,255,.08);border-radius:16px;font-size:.78rem;color:var(--t);transition:all .15s;white-space:nowrap;}
.pill:hover span{background:rgba(108,92,231,.14);border-color:rgba(108,92,231,.35);}
.pill input:checked + span{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;border-color:var(--p);font-weight:700;box-shadow:0 2px 10px rgba(108,92,231,.4);transform:translateY(-1px);}
.pill input:focus-visible + span{outline:2px solid var(--pl);outline-offset:2px;}

/* 분위기 chip 버튼 */
.mood-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.chip{background:var(--ch);border:1px solid rgba(255,255,255,.08);color:var(--t);border-radius:16px;padding:7px 12px;font-size:.78rem;cursor:pointer;transition:all .15s;font-family:inherit;}
.chip:hover{background:rgba(253,121,168,.14);border-color:rgba(253,121,168,.4);}
.chip.active{background:linear-gradient(135deg,var(--a),#E84393);border-color:var(--a);color:#fff;font-weight:700;box-shadow:0 2px 10px var(--ag);}
#fMood{width:100%;box-sizing:border-box;background:var(--ch);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 12px;color:var(--t);font-size:.85rem;font-family:inherit;outline:none;}
#fMood:focus{border-color:var(--p);}

/* 커버 + 플레이 오버레이 */
.manage-top{display:flex;gap:12px;align-items:flex-start;}
.card-cover{position:relative;width:88px;height:88px;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--ch);}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.card-cover-empty{display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--td);}
.cover-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);color:#fff;border:none;font-size:1.8rem;cursor:pointer;opacity:.75;transition:opacity .15s,background .15s;padding:0;text-shadow:0 2px 6px rgba(0,0,0,.5);}
.card-cover:hover .cover-play,.cover-play:focus{opacity:1;}
.card-cover:hover .cover-play{background:rgba(108,92,231,.55);}
.card-cover.playing .cover-play{opacity:1;background:rgba(108,92,231,.45);}
.cover-gen{position:absolute;bottom:4px;left:4px;right:4px;background:rgba(108,92,231,.85);color:#fff;border:none;border-radius:4px;font-size:.62rem;font-weight:700;padding:3px 4px;cursor:pointer;line-height:1.2;}
.cover-gen:hover{background:var(--p);}
.cover-gen:disabled{opacity:.6;cursor:wait;}
.manage-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.sync-badge{display:inline-block;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:4px;}
.sync-badge.sync-exact{background:var(--ok);color:#fff;}
.sync-badge.sync-approx{background:rgba(253,203,110,.25);color:var(--w);}

/* 히어로 플레이어 */
.hero-player{position:relative;overflow:hidden;background:linear-gradient(135deg,#2B1B6E 0%,#3A1E5E 35%,#6B2A6E 70%,#A22C7A 100%);border:1px solid rgba(162,155,254,.35);border-radius:18px;padding:14px 14px 16px;margin-bottom:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 38px -18px rgba(108,92,231,.75),0 0 0 1px rgba(255,255,255,.04) inset;}
.hero-player::before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(162,155,254,.8),rgba(253,121,168,.7),rgba(108,92,231,.3));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.45;}
.hero-player.is-playing::before{opacity:.85;animation:hpGlow 3.2s ease-in-out infinite;}
@keyframes hpGlow{0%,100%{opacity:.5;}50%{opacity:.95;}}
.hp-orb{position:absolute;border-radius:50%;filter:blur(34px);opacity:.55;pointer-events:none;}
.hp-orb-a{width:180px;height:180px;background:radial-gradient(circle,#A29BFE 0%,transparent 70%);top:-60px;left:-40px;animation:hpOrbA 9s ease-in-out infinite;}
.hp-orb-b{width:220px;height:220px;background:radial-gradient(circle,#FD79A8 0%,transparent 70%);bottom:-90px;right:-60px;animation:hpOrbB 11s ease-in-out infinite;}
@keyframes hpOrbA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,30px) scale(1.15);}}
@keyframes hpOrbB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-28px,-18px) scale(1.12);}}
.hero-player>:not(.hp-orb){position:relative;z-index:1;}
.hp-top{display:flex;justify-content:space-between;align-items:center;}
.hp-title{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);}
.hp-meta{font-size:.72rem;color:#fff;background:rgba(0,0,0,.28);padding:3px 10px;border-radius:999px;font-weight:600;border:1px solid rgba(255,255,255,.1);}
.hp-body{display:flex;gap:14px;align-items:center;}
.hp-cover{position:relative;width:108px;height:108px;flex-shrink:0;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#5A4BD1,#A22C7A);box-shadow:0 12px 30px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1) inset;}
.hp-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.hp-cover.has-img .hp-cover-ph{display:none;}
.hp-cover-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(255,255,255,.85);}
.hp-cover.playing img{animation:hpCoverPulse 2.4s ease-in-out infinite;}
@keyframes hpCoverPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.hp-viz{position:absolute;left:8px;bottom:8px;display:flex;gap:3px;align-items:flex-end;height:22px;opacity:0;transition:opacity .3s;}
.hp-cover.playing .hp-viz{opacity:1;}
.hp-viz span{width:3px;background:linear-gradient(180deg,#fff,#FD79A8);border-radius:2px;animation:hpViz 1s ease-in-out infinite;}
.hp-viz span:nth-child(1){height:40%;animation-delay:0s;}
.hp-viz span:nth-child(2){height:80%;animation-delay:.15s;}
.hp-viz span:nth-child(3){height:55%;animation-delay:.3s;}
.hp-viz span:nth-child(4){height:95%;animation-delay:.45s;}
.hp-viz span:nth-child(5){height:65%;animation-delay:.6s;}
@keyframes hpViz{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
.hp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.hp-now{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hp-now-title{font-size:1rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.hp-now-sub{font-size:.74rem;color:rgba(255,255,255,.7);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-player audio{display:none;}
.hp-bar{height:5px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden;cursor:pointer;}
.hp-bar-fill{height:100%;background:linear-gradient(90deg,#fff,#FD79A8 70%,#A29BFE);border-radius:999px;box-shadow:0 0 8px rgba(253,121,168,.6);transition:width .15s linear;}
.hp-time{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;font-weight:600;}
.hp-controls{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:2px;}
.hp-btn{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .2s,box-shadow .2s;font-size:.95rem;}
.hp-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06);}
.hp-btn:active{transform:scale(.96);}
.hp-btn-sm{width:38px;height:38px;}
.hp-btn-lg{width:54px;height:54px;font-size:1.3rem;background:linear-gradient(135deg,#fff,#F0F0F5);color:#2B1B6E;box-shadow:0 8px 22px -6px rgba(255,255,255,.5),0 0 0 2px rgba(255,255,255,.12);}
.hp-btn-lg:hover{background:#fff;box-shadow:0 10px 26px -4px rgba(255,255,255,.7);}
.hp-karaoke{background:rgba(0,0,0,.32);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;line-height:1.7;max-height:120px;overflow-y:auto;border:1px solid rgba(255,255,255,.06);}
.hp-karaoke .k-word{font-size:.82rem;color:rgba(255,255,255,.5);padding:1px 3px;border-radius:3px;transition:color .1s,font-weight .1s;}
.hp-karaoke .k-word.active{color:#fff;font-weight:800;text-shadow:0 0 10px rgba(253,121,168,.9);}
.hp-karaoke .k-word.done{color:rgba(255,255,255,.3);font-weight:500;}

/* 히어로 배너 (AI 음원 없을 때) */
.hero-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,#2B1B6E 0%,#3A1E5E 35%,#6B2A6E 70%,#A22C7A 100%);border:1px solid rgba(162,155,254,.35);border-radius:18px;padding:18px 16px;margin-bottom:18px;box-shadow:0 14px 38px -18px rgba(108,92,231,.75),0 0 0 1px rgba(255,255,255,.04) inset;}
.hero-banner::before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(162,155,254,.8),rgba(253,121,168,.7),rgba(108,92,231,.3));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6;animation:hpGlow 4s ease-in-out infinite;}
.hero-banner>:not(.hp-orb){position:relative;z-index:1;}
.hb-inner{display:flex;gap:14px;align-items:center;}
.hb-cover{position:relative;width:84px;height:84px;flex-shrink:0;border-radius:14px;background:linear-gradient(135deg,#6C5CE7 0%,#FD79A8 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(253,121,168,.55),0 0 0 1px rgba(255,255,255,.12) inset;animation:hbBreathe 3.2s ease-in-out infinite;}
@keyframes hbBreathe{0%,100%{transform:scale(1);box-shadow:0 10px 24px -8px rgba(253,121,168,.55),0 0 0 1px rgba(255,255,255,.12) inset;}50%{transform:scale(1.04);box-shadow:0 14px 32px -8px rgba(253,121,168,.85),0 0 0 1px rgba(255,255,255,.22) inset;}}
.hb-emoji{font-size:2.4rem;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));}
.hb-viz{position:absolute;left:7px;bottom:7px;opacity:.9;}
.hb-viz span{animation-duration:1.2s;}
.hb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.hb-eyebrow{font-size:.62rem;font-weight:900;letter-spacing:.28em;color:rgba(255,255,255,.7);}
.hb-title{font-size:1.18rem;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.2;background:linear-gradient(135deg,#fff 30%,#FDCB6E);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hb-sub{font-size:.78rem;color:rgba(255,255,255,.75);line-height:1.45;font-weight:500;}

/* admin */
.admin-head{margin-bottom:14px;}
.admin-head h2{font-size:1.1rem;margin-bottom:4px;}
.admin-sub{font-size:.78rem;color:var(--td);line-height:1.5;}
.admin-form{display:flex;flex-direction:column;gap:12px;}
.admin-msg{font-size:.82rem;min-height:18px;}
.admin-msg.ok{color:var(--ok);}
.admin-msg.err{color:var(--ng);}
.admin-section{background:var(--c);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.admin-section h3{font-size:.88rem;color:var(--pl);font-weight:700;}
.admin-field{display:flex;flex-direction:column;gap:4px;}
.admin-field label{font-size:.76rem;color:var(--td);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.admin-field .status{font-size:.68rem;padding:1px 7px;border-radius:4px;font-weight:700;}
.admin-field .status.set{background:var(--ok);color:#fff;}
.admin-field .status.unset{background:rgba(255,255,255,.1);color:var(--td);}
.admin-field input{background:var(--ch);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:9px 12px;color:var(--t);font-size:.88rem;outline:none;font-family:inherit;width:100%;box-sizing:border-box;}
.admin-field input:focus{border-color:var(--p);}
.admin-field .masked{font-family:monospace;font-size:.75rem;color:var(--td);}
.admin-field .help{font-size:.7rem;color:var(--td);}
.admin-actions{display:flex;gap:8px;margin-top:4px;}
.admin-actions .btn{flex:1;}

/* btn */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-primary{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(108,92,231,.4);}
.btn-secondary{background:var(--c);color:var(--t);border:1px solid rgba(255,255,255,.1);}
.btn-accent{background:linear-gradient(135deg,var(--a),#E84393);color:#fff;}
.btn-accent:hover{box-shadow:0 4px 16px var(--ag);}
.btn-sm{padding:7px 12px;font-size:.78rem;}
.btn-block{width:100%;}
.btn-icon{width:38px;height:38px;padding:0;border-radius:50%;font-size:1rem;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-play{background:linear-gradient(135deg,var(--p),var(--a));color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:1rem;font-weight:700;cursor:pointer;flex:1;transition:all .2s;}
.btn-play:hover{box-shadow:0 4px 20px var(--ag);transform:translateY(-1px);}
.btn-play.on{background:linear-gradient(135deg,var(--ng),#E84393);}

/* tabs */
.tab-nav{display:flex;gap:3px;margin-bottom:12px;background:var(--c);border-radius:10px;padding:3px;}
.tab-btn{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:var(--td);font-size:.8rem;font-weight:600;cursor:pointer;}
.tab-btn.active{background:var(--p);color:#fff;}

/* search */
.search-bar{position:relative;margin-bottom:12px;}
.search-bar input{width:100%;background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 13px 10px 35px;color:var(--t);font-size:.88rem;outline:none;}
.search-bar::before{content:'\1F50D';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.85rem;}

/* verse list */
.verse-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;padding-bottom:14px;}
.verse-card{position:relative;background:linear-gradient(135deg,var(--c) 0%,var(--ch) 100%);border-radius:14px;padding:12px;cursor:pointer;border:1px solid rgba(255,255,255,.05);transition:transform .18s,border-color .2s,box-shadow .2s;display:flex;gap:12px;align-items:stretch;overflow:hidden;}
.verse-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--pl),var(--a));opacity:0;transition:opacity .2s;}
.verse-card:hover{transform:translateY(-2px);border-color:rgba(162,155,254,.35);box-shadow:0 12px 28px -14px rgba(108,92,231,.55);}
.verse-card:hover::before{opacity:1;}
.verse-card.vcard-ai{background:linear-gradient(135deg,rgba(108,92,231,.18),rgba(253,121,168,.12) 70%,var(--c));border-color:rgba(162,155,254,.25);}
.verse-card.vcard-ai::before{opacity:.7;}
.verse-card.vcard-ai:hover{box-shadow:0 14px 34px -12px rgba(253,121,168,.5);}
.vc-thumb{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#5A4BD1,#A22C7A);box-shadow:0 6px 16px -6px rgba(0,0,0,.6);}
.vc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vc-thumb-ph{display:flex;align-items:center;justify-content:center;}
.vc-thumb-ph.vc-thumb-ai{background:linear-gradient(135deg,#6C5CE7,#FD79A8);}
.vc-thumb-ph.vc-thumb-yt{background:linear-gradient(135deg,#E17055,#FDCB6E);}
.vc-thumb-ph.vc-thumb-beat{background:linear-gradient(135deg,#1A1A2E,#5A4BD1);}
.vc-thumb-emoji{font-size:1.8rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.vc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42);color:#fff;font-size:1.1rem;opacity:0;transition:opacity .2s;}
.verse-card:hover .vc-play{opacity:1;}
.vc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.vc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:1px;}
.vc-badge{font-size:.62rem;font-weight:800;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;}
.badge-ai{background:linear-gradient(135deg,rgba(108,92,231,.35),rgba(253,121,168,.35));color:#fff;border-color:rgba(162,155,254,.4);}
.badge-yt{background:rgba(225,112,85,.22);color:#FDCB6E;border-color:rgba(253,203,110,.3);}
.badge-beat{background:rgba(108,92,231,.18);color:var(--pl);}
.vc-title{font-size:.92rem;font-weight:700;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.vc-sub{font-size:.7rem;color:var(--pl);font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc-text{font-size:.78rem;line-height:1.45;color:rgba(240,240,245,.72);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;}
.vc-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:.66rem;color:var(--td);font-weight:500;letter-spacing:.01em;}
.vc-meta-date,.vc-meta-by{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,.05);padding:2px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.06);}
.vc-meta-by{color:var(--pl);}
/* 기존 vRef 클래스 호환 (manage-card 등) */
.verse-ref{font-size:.74rem;color:var(--pl);font-weight:600;margin-bottom:2px;}
.verse-text{font-size:.84rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.verse-card .fav-btn{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.92rem;cursor:pointer;color:var(--td);flex-shrink:0;transition:transform .15s,color .2s,background .2s;}
.verse-card .fav-btn:hover{transform:scale(1.1);background:rgba(0,0,0,.5);}
.verse-card .fav-btn.active{color:var(--a);background:rgba(253,121,168,.18);border-color:rgba(253,121,168,.4);}

/* steps */
.step-indicator{display:flex;align-items:center;justify-content:center;margin-bottom:14px;gap:4px;}
.step{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--td);font-weight:600;transition:all .15s;}
.step .sl{white-space:nowrap;}
.step.active{color:var(--a);font-weight:800;}
.step.done{color:var(--ok);}
.sn{width:26px;height:26px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;border:2px solid var(--td);transition:all .15s;}
.step.active .sn{border-color:var(--a);background:var(--a);color:#fff;box-shadow:0 0 12px var(--ag);transform:scale(1.1);}
.step.done .sn{border-color:var(--ok);background:var(--ok);color:#fff;}
.step-line{width:28px;height:2px;background:var(--td);margin:0 2px;opacity:.35;}
.step.done + .step-line{background:var(--ok);opacity:.5;}

/* 단계 안내 카드 */
.phase-intro{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(108,92,231,.15),rgba(253,121,168,.1));border:1px solid rgba(108,92,231,.28);border-radius:10px;padding:12px 14px;margin-bottom:2px;}
.phase-intro .pi-emoji{font-size:1.6rem;flex-shrink:0;line-height:1;}
.phase-intro .pi-text{font-size:.82rem;color:var(--t);line-height:1.55;}
.phase-intro .pi-text b{color:var(--pl);font-size:.88rem;}
/* practice-intro 은 기존 CSS 를 phase-intro 스타일로 흡수 — HTML 에서 phase-intro 로 바꿨지만 혹시 남아있을 경우 대비 */
.practice-intro{display:none;}

/* phase */
.phase{display:flex;flex-direction:column;gap:12px;flex:1;}
.phase.hidden{display:none;}
.vref{color:var(--pl);font-size:.85rem;font-weight:700;text-align:center;}

/* karaoke */
.karaoke{background:var(--c);border-radius:var(--r);padding:20px 16px;min-height:100px;display:flex;flex-direction:column;gap:6px;line-height:2.0;text-align:center;}
.k-word{font-size:1.1rem;font-weight:500;color:var(--td);padding:2px 4px;border-radius:4px;transition:color .1s,font-weight .1s;}
.k-word.active{color:#fff;font-weight:800;background:transparent;box-shadow:none;transform:none;}
.k-word.done{color:rgba(255,255,255,.42);font-weight:500;}

/* phrase highlight (whole phrase) */
/* 문장(phrase) 단위 카라오케 하이라이트 — 재생 중 한 줄(구간) 전체가 하얀 굵은 글씨 */
.k-phrase{display:block;width:100%;box-sizing:border-box;transition:color .15s,background .15s;padding:3px 8px;border-radius:5px;}
.k-phrase.active{background:linear-gradient(135deg,rgba(108,92,231,.35),rgba(253,121,168,.25));}
.k-phrase.active .k-word{color:#fff;font-weight:800;background:transparent;box-shadow:none;transform:none;}
.k-phrase.done .k-word{color:rgba(255,255,255,.42);font-weight:500;background:transparent;transform:none;box-shadow:none;}

/* visualizer */
.visualizer{height:34px;display:flex;align-items:flex-end;gap:2px;justify-content:center;padding:4px 0;}
.visualizer.small{height:22px;}
.v-bar{width:4px;background:var(--p);border-radius:2px;height:4px;transition:height .08s;}

/* controls */
.controls-box{background:var(--c);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;}
.ctrl-row{display:flex;align-items:center;gap:8px;}
.ctrl-row label{font-size:.76rem;color:var(--td);font-weight:600;min-width:32px;}
.ctrl-row input[type=range]{flex:1;accent-color:var(--p);}
.bpm-val{font-size:.88rem;font-weight:700;color:var(--pl);min-width:26px;text-align:center;}
.rep-btns{display:flex;gap:5px;}
.rep-btn{padding:4px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--td);font-size:.75rem;cursor:pointer;}
.rep-btn.active{background:var(--p);color:#fff;border-color:var(--p);}
.play-row{display:flex;gap:8px;align-items:center;}
.listen-info{font-size:.76rem;color:var(--td);text-align:center;}

/* yt ref */
.yt-ref{text-align:center;padding:4px 0;}
.yt-ref a{color:var(--pl);font-size:.82rem;text-decoration:none;}
.yt-ref a:hover{text-decoration:underline;}

/* hint */
.hint-box{background:var(--c);border-radius:var(--r);padding:12px;}
.hint-toggle{font-size:.8rem;color:var(--pl);cursor:pointer;text-align:center;font-weight:600;}
.hint-text{margin-top:8px;font-size:.92rem;line-height:1.9;text-align:center;}
.hint-text.hidden{display:none;}
.practice-btns{display:flex;gap:6px;flex-wrap:wrap;}

/* record */
.rec-box{background:var(--c);border-radius:var(--r);padding:14px;text-align:center;}
.rec-label{font-size:.8rem;color:var(--td);margin-bottom:8px;}
.rec-row{display:flex;align-items:center;justify-content:center;gap:12px;}
.btn-rec{width:50px;height:50px;border-radius:50%;border:3px solid var(--ng);background:transparent;color:var(--ng);font-size:1.2rem;cursor:pointer;transition:all .2s;}
.btn-rec.on{background:var(--ng);color:#fff;animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,112,85,.4);}50%{box-shadow:0 0 0 10px rgba(225,112,85,0);}}
.rec-timer{font-size:.92rem;font-weight:600;min-width:42px;}
.pb-row{display:flex;gap:6px;justify-content:center;margin-top:8px;}

.phase-nav{display:flex;gap:8px;margin-top:10px;}
.phase-nav .btn{flex:1;padding:13px 16px;font-size:.92rem;font-weight:700;}
.btn-lg{padding:14px 22px;font-size:1rem;font-weight:800;}

/* quiz */
.quiz-box{background:var(--c);border-radius:var(--r);padding:16px;text-align:center;}
.quiz-label{font-size:.85rem;color:var(--pl);font-weight:700;margin-bottom:12px;}
.quiz-blanks{font-size:.98rem;line-height:2.2;margin-bottom:10px;text-align:left;}
.quiz-blank{display:inline-block;min-width:42px;border-bottom:2px dashed var(--p);padding:1px 4px;margin:0 2px;cursor:pointer;color:var(--pl);}
.quiz-blank.filled{border-color:var(--ok);color:var(--ok);}
.quiz-blank.wrong{border-color:var(--ng);color:var(--ng);}
.quiz-blank.sel{border-color:var(--w);background:rgba(253,203,110,.1);}
.quiz-opts{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:10px;}
.quiz-opt{padding:5px 12px;background:rgba(108,92,231,.1);border:1px solid var(--p);border-radius:14px;color:var(--t);font-size:.83rem;cursor:pointer;}
.quiz-opt:hover{background:rgba(108,92,231,.25);}
.quiz-opt.used{opacity:.25;pointer-events:none;}
.quiz-result{font-size:1.1rem;font-weight:700;margin:10px 0;}
.quiz-result.pass{color:var(--ok);}
.quiz-result.fail{color:var(--w);}

/* result */
.result-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 14px;text-align:center;flex:1;justify-content:center;}
.r-title{font-size:1.1rem;font-weight:700;}
.r-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.r-card{background:var(--c);border-radius:var(--r);padding:12px;}
.r-val{font-size:1.2rem;font-weight:700;color:var(--pl);}
.r-lbl{font-size:.7rem;color:var(--td);margin-top:2px;}
.r-actions{display:flex;gap:8px;width:100%;}
.r-actions .btn{flex:1;}

/* dash */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.d-card{background:var(--c);border-radius:var(--r);padding:12px;text-align:center;}
.d-val{font-size:1.4rem;font-weight:700;color:var(--pl);}
.d-lbl{font-size:.7rem;color:var(--td);margin-top:2px;}
.recent-list{display:flex;flex-direction:column;gap:6px;}
.rec-item{background:var(--c);border-radius:8px;padding:9px;display:flex;justify-content:space-between;align-items:center;}
.rec-item-ref{font-size:.78rem;color:var(--pl);}
.rec-item-date{font-size:.68rem;color:var(--td);}
.rec-item-score{font-size:.78rem;font-weight:600;color:var(--ok);}

/* add form */
.add-form{display:flex;flex-direction:column;gap:9px;}
.row2{display:flex;gap:7px;}
.row2 input{flex:1;}

/* nav */
.bottom-nav{display:flex;justify-content:space-around;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:auto;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--td);font-size:.63rem;cursor:pointer;}
.nav-item.active{color:var(--pl);}
.nav-item .nav-icon{font-size:1.1rem;}

/* AI generate */
.gen-progress{text-align:center;padding:20px 0;}
.gen-progress.hidden{display:none;}
.gen-spinner{width:36px;height:36px;border:3px solid var(--c);border-top-color:var(--a);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px;}
@keyframes spin{to{transform:rotate(360deg);}}
.gen-status{font-size:.9rem;font-weight:600;color:var(--t);}
.gen-sub{font-size:.76rem;color:var(--td);margin-top:4px;}
.gen-result{text-align:center;padding:16px 0;}
.gen-result.hidden{display:none;}
.gen-done-icon{font-size:2rem;margin-bottom:6px;}
.gen-done-title{font-size:.95rem;font-weight:700;color:var(--ok);margin-bottom:8px;}
.add-form select{background:var(--c);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px 13px;color:var(--t);font-size:.9rem;outline:none;width:100%;}
.add-form select:focus{border-color:var(--p);}

/* AI toggle */
.ai-toggle-row{padding:4px 0;}
.ai-toggle-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--pl);cursor:pointer;font-weight:600;}
.ai-toggle-label input[type=checkbox]{accent-color:var(--p);width:16px;height:16px;}
.ai-options{margin-top:4px;}
.ai-options.hidden{display:none;}

/* manage list */
.manage-list .verse-card{cursor:default;margin-bottom:8px;}
.manage-list .verse-song{font-size:.72rem;color:var(--a);margin-bottom:3px;}
.manage-list .manage-del{margin-top:6px;}
.manage-list .manage-del .btn{font-size:.75rem;}

/* AI audio player in study */
.ai-audio-box{background:var(--c);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:4px;}
.ai-audio-box.hidden{display:none;}
.ai-audio-box audio{display:none;}
.ai-audio-label{font-size:.78rem;color:var(--a);font-weight:700;}
.study-cover{position:relative;width:100%;max-width:200px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--ch);}
.study-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.study-cover-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:var(--td);pointer-events:none;}
.study-cover .cover-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);color:#fff;border:none;font-size:2.4rem;cursor:pointer;opacity:.75;transition:opacity .15s,background .15s;padding:0;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.study-cover:hover .cover-play,.study-cover .cover-play:focus{opacity:1;}
.study-cover:hover .cover-play{background:rgba(108,92,231,.5);}
.study-cover.playing .cover-play{opacity:1;background:rgba(108,92,231,.4);}
.study-audio-meta{width:100%;display:flex;flex-direction:column;gap:6px;}
.study-transport{display:flex;align-items:center;gap:10px;justify-content:center;}
.study-timer{font-family:monospace;font-size:.82rem;color:var(--td);}
#studyBar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);cursor:pointer;overflow:hidden;}
#studyBar:hover{height:7px;}
#studyFill{height:100%;background:linear-gradient(90deg,var(--p),var(--a));border-radius:3px;width:0%;transition:width .08s linear;}

/* Phase 2 (따라하기) */
.practice-intro{background:linear-gradient(135deg,rgba(253,121,168,.12),rgba(108,92,231,.12));border:1px solid rgba(253,121,168,.25);border-radius:8px;padding:10px 12px;font-size:.82rem;color:var(--t);line-height:1.55;}
.practice-audio-box{background:var(--c);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.practice-audio-box audio{display:none;}
.practice-transport{display:flex;gap:10px;align-items:center;}
.practice-timer{font-family:monospace;font-size:.82rem;color:var(--td);}
#practiceBar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);cursor:pointer;overflow:hidden;}
#practiceBar:hover{height:7px;}
#practiceFill{height:100%;background:linear-gradient(90deg,var(--p),var(--a));border-radius:3px;width:0%;transition:width .08s linear;}
.practice-speed{display:flex;align-items:center;gap:6px;padding-top:4px;border-top:1px solid rgba(255,255,255,.06);}
.speed-label{font-size:.72rem;color:var(--td);font-weight:700;min-width:40px;}
.speed-btn{background:var(--ch);border:1px solid rgba(255,255,255,.08);color:var(--t);border-radius:14px;padding:4px 12px;font-size:.76rem;cursor:pointer;font-family:monospace;transition:all .12s;}
.speed-btn:hover{background:rgba(108,92,231,.14);border-color:rgba(108,92,231,.3);}
.speed-btn.active{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;border-color:var(--p);font-weight:700;}
.practice-lyrics-box{background:var(--c);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.practice-lyrics-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--pl);font-weight:700;}
.lyr-toggle{font-size:.74rem;color:var(--td);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;}
.lyr-toggle input{accent-color:var(--p);}
.practice-lyrics{display:flex;flex-direction:column;gap:4px;line-height:1.8;font-size:.95rem;color:var(--t);transition:opacity .2s;}
.practice-lyrics.hidden{display:none;}
.pr-line{padding:2px 4px;}

/* youtube */
.yt-box{margin-bottom:8px;}
.yt-box.hidden{display:none;}
.yt-wrap{position:relative;width:100%;padding-bottom:56.25%;border-radius:var(--r);overflow:hidden;background:#000;}
.yt-box.small .yt-wrap{padding-bottom:42%;}
.yt-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

/* mode switch */
.mode-switch{display:flex;gap:3px;background:var(--c);border-radius:10px;padding:3px;margin-bottom:8px;}
.mode-switch.hidden{display:none;}
.mode-btn{flex:1;padding:7px;border:none;border-radius:8px;background:transparent;color:var(--td);font-size:.78rem;font-weight:600;cursor:pointer;}
.mode-btn.active{background:var(--p);color:#fff;}

/* yt controls */
.yt-controls{text-align:center;padding:4px 0;}
.yt-controls.hidden{display:none;}
.beat-controls.hidden{display:none;}

@media(max-width:360px){.app-container{padding:10px;}.k-word{font-size:.95rem;}}