/* ═══════════════════════════════════════════════
   MUNIT AI 분석 — Step Flow Page
   ═══════════════════════════════════════════════ */
#maaApp,#maaApp *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html:has(#maaApp),body:has(#maaApp){
    font-family:'Pretendard',sans-serif;background:#f5f5f7;
    -webkit-font-smoothing:antialiased;height:100%;overflow:hidden;
}
.maa-app{
    max-width:480px;margin:0 auto;height:100vh;height:100dvh;
    display:flex;flex-direction:column;background:#f5f5f7;
    position:relative;overflow:hidden;
}

/* ── 네비게이션 (다크) ── */
.maa-nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px 12px;
    padding-top:calc(12px + env(safe-area-inset-top,0));
    background:linear-gradient(160deg,#1a1040 0%,#2d1b69 100%);
    flex-shrink:0;
}
.maa-back{
    width:28px;height:28px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:16px;color:#fff;
    box-shadow:none;
}
.maa-back svg path{stroke:#fff}
.maa-back:active{background:rgba(255,255,255,.22)}
.maa-nav-title{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.3px}
.maa-nav-credits{
    font-size:11px;font-weight:600;
    color:#e0d0ff;background:rgba(255,255,255,.12);padding:3px 12px;border-radius:10px;
}

/* ── 스텝 인디케이터 ── */
.maa-steps{
    display:flex;align-items:center;justify-content:center;gap:0;
    padding:16px 0 16px;flex-shrink:0;
}
.maa-step{display:flex;align-items:center;gap:0}
.maa-step-dot{
    width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:600;transition:all .3s;
    flex-shrink:0;
}
.maa-step-dot.done{background:#3B82F6;color:#fff}
.maa-step-dot.active{background:#3B82F6;color:#fff;box-shadow:0 0 0 4px rgba(59,130,246,0.2)}
.maa-step-dot.pending{background:#e0d8f8;color:#93C5FD}
.maa-step-line{width:32px;height:2px;margin:0 4px;border-radius:2px;transition:background .3s}
.maa-step-line.done{background:#3B82F6}
.maa-step-line.pending{background:#d8cfef}

/* ── 스크롤 영역 ── */
.maa-body{
    flex:1;overflow-y:auto;padding:0 20px 100px;
    -webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;gap:12px;
}
.maa-body::-webkit-scrollbar{display:none}

/* ── 공통 섹션 ── */
.maa-section{
    background:#fff;border-radius:16px;padding:16px 16px;
    box-shadow:0 1px 4px rgba(59,130,246,0.06);
    border:none;margin-top:0;
}
.maa-section-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;
}
.maa-section-title{
    font-size:13px;font-weight:600;color:#1d1d1f;
    margin-bottom:0;letter-spacing:-0.2px;
}
.maa-badge-opt{
    font-size:10px;font-weight:500;background:#d1fae5;color:#065f46;
    padding:2px 8px;border-radius:7px;
}
.maa-section-sub{font-size:12px;color:#9B8FBF;margin-bottom:16px}
.maa-section.disabled{opacity:.45;pointer-events:none}

/* ── 악기 선택 (Step 1 - 확인됨) ── */
.maa-inst-confirmed{
    display:flex;align-items:center;gap:12px;
    padding:12px 12px;background:#faf8ff;border-radius:12px;
    border:1.5px solid #ede9fe;cursor:pointer;
}
.maa-inst-icon{
    width:42px;height:42px;border-radius:12px;background:#ede9fe;
    display:flex;align-items:center;justify-content:center;
    font-size:21px;flex-shrink:0;
}
.maa-inst-name{font-size:14px;font-weight:600;color:#3b0764;flex:1}
.maa-inst-check{margin-left:auto;color:#7B5CF7;font-size:16px}
.maa-inst-change{
    font-size:12px;color:#3B82F6;font-weight:500;
    cursor:pointer;text-decoration:none;
}

/* ── 악기 그리드 (변경 시) ── */
.maa-inst-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.maa-inst-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:12px 4px;border-radius:12px;border:1.5px solid #ede9fe;
    cursor:pointer;transition:all .15s;background:#faf8ff;
}
.maa-inst-item.active{border-color:#3B82F6;background:#ede9fe}
.maa-inst-item:active{transform:scale(.95)}
.maa-inst-item-icon{font-size:20px}
.maa-inst-item-lbl{font-size:10px;font-weight:500;color:#6B7280;white-space:nowrap}
.maa-inst-item.active .maa-inst-item-lbl{color:#3b0764;font-weight:700}
.maa-inst-disabled{opacity:.45;cursor:not-allowed;position:relative}
.maa-inst-disabled:active{transform:none}
.maa-inst-badge{
    position:absolute;top:-6px;right:-6px;
    font-size:9px;font-weight:700;color:#fff;background:#93C5FD;
    padding:1px 4px;border-radius:8px;white-space:nowrap;
}

/* ── 원곡 입력 (Step 2) ── */
.maa-toggle-row{
    display:flex;background:#f5f3ff;border-radius:10px;padding:3px;margin-bottom:12px;
}
.maa-toggle-btn{
    flex:1;padding:8px 0;border-radius:8px;border:none;
    font-size:12px;font-weight:500;color:#9f7aea;text-align:center;
    cursor:pointer;transition:all .15s;background:transparent;font-family:inherit;
    -webkit-user-select:none;
}
.maa-toggle-btn.on{background:#3B82F6;color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(59,130,246,0.25)}
.maa-yt-input{
    display:flex;align-items:center;gap:8px;
}
.maa-yt-input input{
    flex:1;padding:12px 12px;border:1.5px solid #e5e5e5;border-radius:11px;
    font-size:13px;color:#1d1d1f;background:#f9f9f9;outline:none;
    font-family:inherit;
}
.maa-yt-input input::placeholder{color:#c4c4c4}
.maa-yt-input input:focus{border-color:#3B82F6;background:#fff}
.maa-yt-extract-btn{
    flex-shrink:0;padding:12px 16px;border-radius:11px;
    background:#ede9fe;color:#3B82F6;font-size:12px;font-weight:600;
    border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.maa-yt-extract-btn.active{background:#3B82F6;color:#fff}
.maa-yt-extract-btn:disabled{background:#ede9fe;color:#c4b5fd;cursor:not-allowed}
.maa-yt-extract-btn:active:not(:disabled){opacity:.8}
.maa-extracted-info{
    display:flex;align-items:center;gap:8px;
    padding:12px 16px;background:#E0F9EE;border-radius:12px;
    margin-top:8px;
}
.maa-extracted-icon{font-size:16px}
.maa-extracted-text{font-size:12px;font-weight:600;color:#059669;flex:1;min-width:0}
.maa-extracted-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maa-extracted-remove{
    font-size:14px;cursor:pointer;color:#9CA3AF;flex-shrink:0;
}
/* 원곡 파일 업로드 탭 */
.maa-orig-file-pane{
    background:#f5f3ff;border-radius:11px;padding:16px;text-align:center;
}
.maa-orig-file-hint{font-size:12px;color:#9f7aea;margin-bottom:8px}
.maa-orig-file-btn{
    background:#3B82F6;color:#fff;border:none;border-radius:22px;
    padding:8px 20px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
}

/* ── 파일 업로드 공통 ── */
.maa-upload-area{
    border:2px dashed #c4b5fd;border-radius:13px;padding:28px 16px;
    text-align:center;cursor:pointer;transition:all .2s;
    background:#faf8ff;display:block;
}
.maa-upload-area:active{background:#ede9fe;border-color:#3B82F6}
.maa-upload-area.has-file{border-style:solid;border-color:#3B82F6;background:#f5f3ff}
.maa-upload-icon{font-size:30px;margin-bottom:8px}
.maa-upload-label{font-size:13px;font-weight:600;color:#3b0764;margin-bottom:3px}
.maa-upload-hint{font-size:11px;color:#9f7aea;margin-top:0;margin-bottom:12px;line-height:1.5}
.maa-upload-select-btn{
    background:#3B82F6;color:#fff;border:none;border-radius:22px;
    padding:8px 24px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
}
.maa-upload-file{
    display:flex;align-items:center;gap:8px;padding:12px 16px;
    border-radius:12px;background:#ede9fe;margin-top:12px;
}
.maa-upload-file-name{font-size:12px;font-weight:600;color:#3b0764;flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maa-upload-file-size{font-size:10px;color:#9f7aea;flex-shrink:0}
.maa-upload-file-remove{font-size:14px;cursor:pointer;color:#9CA3AF;flex-shrink:0}

/* ── 하단 CTA ── */
.maa-bottom{
    position:absolute;bottom:0;left:0;right:0;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom,0));
    max-width:480px;margin:0 auto;
}
.maa-cta{
    width:100%;padding:16px 0;border-radius:14px;border:1.5px solid #E5E7EB;
    font-size:15px;font-weight:700;color:#1d1d1f;cursor:pointer;
    font-family:inherit;transition:all .15s;
    background:#fff;
}
.maa-cta:disabled{
    background:#F3F4F6;color:#9CA3AF;border-color:#E5E7EB;cursor:default;
}
.maa-cta:active:not(:disabled){transform:scale(.98);opacity:.9}

/* ── 분석 중 로딩 화면 ── */
.maa-loading-page{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:#f5f5f7;z-index:100;padding:24px;
}
.maa-loading-wrap{
    width:100%;max-width:400px;background:#fff;border-radius:20px;
    box-shadow:0 4px 24px rgba(0,0,0,.08);padding:32px 28px;
}
.maa-loading-top{
    display:flex;flex-direction:column;align-items:center;padding-bottom:24px;
}
/* 음파 바 */
.maa-wave{display:flex;align-items:center;gap:4px;height:56px;margin-bottom:24px}
.maa-wb{width:5px;border-radius:3px;background:#3B82F6;animation:maa-wave 2.4s ease-in-out infinite}
@keyframes maa-wave{0%,100%{height:8px;opacity:.3}50%{height:56px;opacity:1}}
/* 카운트업 % */
.maa-pct-num{font-size:40px;font-weight:300;color:#3B82F6;letter-spacing:-2px;line-height:1;margin-bottom:3px;transition:all .3s}
.maa-pct-lbl{font-size:11px;color:#aaa;margin-bottom:20px}
.maa-loading-title{font-size:18px;font-weight:600;color:#1d1d1f;text-align:center;line-height:1.4;margin-bottom:8px}
.maa-loading-sub{font-size:13px;color:#888;text-align:center;line-height:1.65}
/* 스텝 리스트 영역 */
.maa-loading-card{background:#f5f5f7;border-radius:12px;padding:12px}
.maa-step-list{display:flex;flex-direction:column;gap:12px}
.maa-step{display:flex;align-items:center;gap:12px}
.maa-sico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s}
.maa-sico.done{background:#d1fae5}
.maa-sico.done svg{width:12px;height:12px;stroke:#065f46;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.maa-sico.active{background:#ede9fe}
.maa-active-dot{width:8px;height:8px;border-radius:50%;background:#3B82F6;animation:maa-pulse 1s ease-in-out infinite}
@keyframes maa-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.maa-sico.idle{background:#f0f0f0}
.maa-idle-dot{width:7px;height:7px;border-radius:50%;background:#d0d0d0}
.maa-stxt{font-size:13px;color:#c4c4c4;flex:1;transition:color .3s}
.maa-stxt.done{color:#6e6e73}
.maa-stxt.active{color:#1d1d1f;font-weight:600}
/* 알림받기 CTA – Toss style */
.maa-notify-cta{margin-top:16px;cursor:pointer}
.maa-notify-cta-inner{display:flex;align-items:center;gap:12px;background:#F3EEFF;border:none;border-radius:14px;padding:12px 16px;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(59,130,246,.1)}
.maa-notify-cta-inner:active{transform:scale(.97);box-shadow:0 1px 4px rgba(59,130,246,.08)}
.maa-notify-cta-bell{width:30px;height:30px;border-radius:8px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.maa-notify-cta-bell svg{animation:maa-bell-swing 2.5s ease-in-out infinite}
@keyframes maa-bell-swing{0%,100%{transform:rotate(0)}5%{transform:rotate(12deg)}10%{transform:rotate(-10deg)}15%{transform:rotate(6deg)}20%{transform:rotate(0)}}
.maa-notify-cta-text{flex:1;min-width:0}
.maa-notify-cta-title{font-size:13px;font-weight:700;color:#5B21B6;letter-spacing:-.02em}
.maa-notify-cta-sub{font-size:11px;color:#8B7AAF;margin-top:1px}
.maa-notify-cta-arrow{width:24px;height:24px;border-radius:50%;background:rgba(59,130,246,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.maa-cancel-link{text-align:center;margin-top:16px;font-size:12px;color:#999;text-decoration:underline;cursor:pointer}
.maa-cancel-link:active{color:#666}
.maa-popup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;animation:maa-fade-in .2s ease}
.maa-popup-card{background:#fff;border-radius:20px;padding:32px 24px;text-align:center;max-width:320px;width:90%;animation:maa-slide-up .25s ease}
.maa-popup-icon{font-size:40px;margin-bottom:12px}
.maa-popup-title{font-size:18px;font-weight:700;margin-bottom:8px;color:#1a1a1a}
.maa-popup-desc{font-size:14px;color:#666;line-height:1.6;margin-bottom:20px}
.maa-popup-btn{width:100%;padding:16px;border:none;border-radius:12px;background:#3B82F6;color:#fff;font-size:16px;font-weight:600;cursor:pointer}
.maa-popup-btn:active{background:#2563EB}
.maa-popup-sub{margin-top:12px;font-size:13px;color:#999;cursor:pointer}
.maa-popup-sub:active{color:#666}
@keyframes maa-fade-in{from{opacity:0}to{opacity:1}}
@keyframes maa-slide-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ── 악기 프레이즈 타임라인 바 ── */
.maa-phrase-timeline{position:relative;height:8px;background:rgba(0,0,0,.04);border-radius:4px;margin:8px 0 0;overflow:hidden}
.maa-ptl-seg{position:absolute;top:0;height:100%;border-radius:4px;opacity:.75;cursor:default;transition:opacity .15s}
.maa-ptl-seg.active{opacity:1;outline:2px solid rgba(59,130,246,.5);outline-offset:1px}

/* ── 악기 프레이즈 카드 뷰 ── */
.maa-piano-view{padding:0 0 12px}
.maa-piano-play-row{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid #f0f0f0}
.maa-piano-play-row button{flex:1;padding:12px;border-radius:10px;border:1px solid #e8e5f0;background:#faf9fe;color:#6e6e73;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px}
.maa-piano-play-row button:active{background:#f0edf8}

.maa-piano-play-btn{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#F3F0FF;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.maa-piano-play-btn:active{background:#EDE9FE}

/* 악기 구간 카드 (표현력 탭 + 음정·박자 탭 공용) */
.maa-piano-card{background:#fff;border:1px solid #f0f0f0;border-radius:12px;margin:8px 16px;padding:16px;border-left:3px solid #E5E7EB}
#maaPitchRhythmView .maa-piano-card .maa-dyn-svg,
#maaPitchRhythmView .maa-piano-card .maa-seg-bar-wrap,
#maaPitchRhythmView .maa-piano-card .maa-seg-fb-list{display:none}
#maaPitchRhythmView .maa-piano-card.expanded .maa-dyn-svg{display:block}
#maaPitchRhythmView .maa-piano-card.expanded .maa-seg-bar-wrap{display:block}
#maaPitchRhythmView .maa-piano-card.expanded .maa-seg-fb-list{display:flex}
#maaLyricsView .maa-piano-card .maa-dyn-svg,
#maaLyricsView .maa-piano-card .maa-piano-comment,
#maaLyricsView .maa-piano-card .maa-seg-fb-list{display:none}
#maaLyricsView .maa-piano-card.expanded .maa-dyn-svg{display:block}
#maaLyricsView .maa-piano-card.expanded .maa-piano-comment{display:block}
#maaLyricsView .maa-piano-card.expanded .maa-seg-fb-list{display:flex}
.maa-piano--ok{border-left-color:#10B981}
.maa-piano--warn{border-left-color:#F59E0B}
.maa-piano--err{border-left-color:#EF4444}
.maa-piano-hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.maa-piano-name{font-size:14px;font-weight:700;color:#1d1d1f}
.maa-piano-time{font-size:11px;color:#8E8E93}
.maa-piano-notes-label{display:flex;justify-content:space-between;padding:2px 2px 0;font-size:9px;color:#aeaeb2}
.maa-piano-comment{background:#FAFAFE;border-radius:8px;padding:12px;margin-top:12px}
.maa-piano-cmt--ok{border-left:2px solid #10B981}
.maa-piano-cmt--warn{border-left:2px solid #F59E0B}
.maa-piano-cmt--err{border-left:2px solid #EF4444}
.maa-piano-cmt-text{font-size:13px;color:#1d1d1f;line-height:1.7}
.maa-piano-cmt-action{font-size:12px;color:#6e6e73;margin-top:8px;font-style:italic;line-height:1.6;padding-top:8px;border-top:1px solid #f0f0f0}
.maa-piano-card.active{outline:2px solid #3B82F6;outline-offset:-1px}

/* 요약 카드 */
.maa-pr-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 16px 8px}
.maa-pr-stat-card{background:#FAFAFE;border:1px solid #EDE9FE;border-radius:12px;padding:12px;text-align:left}
.maa-pr-stat-label{font-size:11px;color:#8E8E93;margin-bottom:4px}
.maa-pr-stat-value{font-size:17px;font-weight:700;color:#1d1d1f}
.maa-pr-stat-sub{font-size:11px;color:#8E8E93;margin-top:2px}

/* 구간별 박자 오차 */
.maa-pr-timing-section{padding:0 16px 16px}
.maa-pr-timing-section h3{font-size:13px;font-weight:600;color:#1d1d1f;padding:16px 16px;background:#fff;border:1px solid #f0f0f0;border-radius:12px 12px 0 0;margin:8px 0 0}
.maa-pr-timing-list{background:#fff;border:1px solid #f0f0f0;border-top:none;border-radius:0 0 12px 12px;overflow:hidden}
.maa-pr-timing-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f5f5f5}
.maa-pr-timing-row:last-child{border-bottom:none}
.maa-pr-timing-row.active{background:#fff;border:1.5px solid #3B82F6;border-radius:8px;margin:-1px}
.maa-pr-phrase-feedback{padding:8px 16px 12px 60px;background:#FAFAFE;border-bottom:1px solid #f5f5f5;font-size:11px;line-height:1.6;animation:maaFbSlide .2s ease}
.maa-pr-fb-comment{color:#6e6e73;margin-bottom:2px}
.maa-pr-fb-action{color:#3B82F6}
@keyframes maaFbSlide{from{opacity:0;max-height:0}to{opacity:1;max-height:80px}}
.maa-pr-timing-name-wrap{min-width:70px;flex-shrink:0}
.maa-pr-timing-name{font-size:12px;font-weight:600;color:#1d1d1f}
.maa-pr-timing-time{font-size:9px;color:#8E8E93;display:block;margin-top:1px}
.maa-pr-timing-bar-wrap{flex:1;display:flex;flex-direction:column;gap:2px}
.maa-pr-timing-bar-bg{height:6px;background:#EFEFEF;border-radius:3px;overflow:hidden}
.maa-pr-timing-bar{height:100%;border-radius:3px;min-width:4px;transition:width .3s}
.maa-pr-timing-val{font-size:10px;color:#8E8E93}
.maa-pr-timing-tag{font-size:10px;padding:3px 8px;border-radius:8px;font-weight:600;flex-shrink:0}
.maa-pr-timing-tag--ok{background:#ECFDF5;color:#059669}
.maa-pr-timing-tag--fast{background:#F3EEFF;color:#8B5CF6}
.maa-pr-timing-tag--slow{background:#EFF6FF;color:#3B82F6}

/* AI 피드백 */
.maa-pr-ai-feedback{margin:0 16px 16px;background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:20px}
.maa-pr-ai-header{font-size:11px;color:#8E8E93;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.maa-pr-ai-comment{font-size:13px;color:#1d1d1f;line-height:1.7}
.maa-pr-ai-action{font-size:12px;color:#6e6e73;margin-top:12px;font-style:italic;line-height:1.6;padding-top:12px;border-top:1px solid #f0f0f0}

/* ── 악기 다이나믹(표현력) 뷰 ── */
.maa-dyn-view{padding:0 0 20px}
.maa-dyn-legend{display:flex;gap:16px;align-items:center;padding:8px 16px 2px;flex-wrap:wrap}
.maa-dyn-ideal,.maa-dyn-mine{display:flex;align-items:center;gap:4px;font-size:9px;color:#aeaeb2}
.maa-dyn-ideal::before{content:'';width:16px;height:2px;background:#534AB7;border-radius:1px}
.maa-dyn-mine::before{content:'';width:16px;height:0;border-top:2px dashed #EF9F27}
#maaPitchRhythmView .maa-dyn-mine::before{border-color:#10B981}
.maa-dyn-summary{margin-left:auto;font-size:9px;color:#3B82F6}
.maa-dyn-tag{font-size:10px;padding:2px 8px;border-radius:8px;font-weight:500;margin-left:auto}
.maa-dyn-tag--ok{background:#D1FAE5;color:#065F46}
.maa-dyn-tag--warn{background:#FEF3C7;color:#92400E}
.maa-dyn-tag--err{background:#FEE2E2;color:#991B1B}
.maa-dyn-svg{width:100%;height:72px;display:block;background:#FAFAFA;border-radius:8px}
.maa-dyn-fb-list{margin-top:8px;display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)}
.maa-dyn-fb-item{display:flex;align-items:flex-start;gap:8px}
.maa-dyn-fb-badge{font-size:11px;font-weight:600;padding:1px 8px;border-radius:4px;flex-shrink:0;line-height:1.4}
.maa-dyn-fb--pitch{background:#FEE2E2;color:#991B1B}
.maa-dyn-fb--rhythm{background:#FEF3C7;color:#92400E}
.maa-dyn-fb--expression{background:#F3EEFF;color:#3B82F6}
.maa-dyn-fb--touch{background:#FEF3C7;color:#92400E}
.maa-dyn-fb--bowing{background:#DBEAFE;color:#1E40AF}
.maa-dyn-fb--vibrato{background:#FCE7F3;color:#9D174D}
.maa-dyn-fb--technique{background:#D1FAE5;color:#065F46}
.maa-dyn-fb--phrasing{background:#DBEAFE;color:#1E40AF}
.maa-dyn-fb--stroke{background:#FEE2E2;color:#991B1B}
.maa-dyn-fb--mute{background:#FEF3C7;color:#92400E}
.maa-dyn-fb-msg{font-size:12px;color:#374151;line-height:1.5}
.maa-dyn-fb-group{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px}
.maa-dyn-fb-msgs{margin:0;padding:0 0 0 4px;list-style:none;font-size:12px;color:#374151;line-height:1.7}

/* ── 구간 타임라인 바 ── */
.maa-seg-bar-wrap{padding:4px 0 0}
.maa-seg-bar{position:relative;height:8px;border-radius:4px;background:#E8E8ED}
.maa-seg-block{position:absolute;top:0;height:100%;min-width:3px;border-radius:3px}
.maa-seg-block:first-child{border-radius:4px 0 0 4px}
.maa-seg-block:last-child{border-radius:0 4px 4px 0}
.maa-seg-labels{position:relative;height:14px;margin-top:2px;font-size:9px;color:#aeaeb2}
.maa-seg-labels span{position:absolute;white-space:nowrap}
.maa-seg-fb-list{margin-top:8px;display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)}
.maa-seg-fb-list .maa-seg-fb-time{font-size:10px;color:#8E8E93;margin-right:2px}

/* ── 결과 화면 ── */
.maa-result{padding:0}
.maa-result-header{
    text-align:center;padding:24px 0 16px;
}
.maa-result-emoji{font-size:48px;margin-bottom:8px}
.maa-result-title{font-size:20px;font-weight:800;color:#1A1040}
.maa-result-song{font-size:13px;color:#9B8FBF;margin-top:4px}

.maa-score-circle{
    width:120px;height:120px;border-radius:50%;margin:16px auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#7B5CF7,#5B3FD6);
    box-shadow:0 8px 32px rgba(123,92,247,0.35);
}
.maa-score-num{font-size:36px;font-weight:900;color:#fff}
.maa-score-unit{font-size:12px;color:#C4B8F7;font-weight:600}

.maa-score-bars{
    background:#fff;border-radius:16px;padding:16px;margin-top:16px;
    border:1px solid #EEE8FF;
}
.maa-bar-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.maa-bar-label{font-size:12px;font-weight:600;color:#6B7280;width:50px;flex-shrink:0}
.maa-bar-track{flex:1;height:8px;border-radius:4px;background:#F3F4F6;overflow:hidden}
.maa-bar-fill{height:100%;border-radius:4px;transition:width .8s ease}
.maa-bar-score{font-size:12px;font-weight:700;width:28px;text-align:right;flex-shrink:0}

/* ── 결과 전용 body (상단+좌우 여백 제거 → 히어로 풀와이드) ── */
.maa-body--result{padding:0 0 100px!important}

/* ── 다크 히어로 v4 (풀와이드, 상단 꽉참) ── */
.maa-dark-hero{
    background:linear-gradient(160deg,#1a1040 0%,#2d1b69 100%);
    padding:0 24px 28px;margin:0;border-radius:0;
    padding-top:calc(16px + env(safe-area-inset-top,0));
    position:relative;overflow:hidden;
}
.maa-dark-hero::before{
    content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(123,92,247,.15) 0%,transparent 70%);
    pointer-events:none;
}
.maa-dark-hero::after{
    content:'';position:absolute;bottom:-40px;left:-40px;width:120px;height:120px;
    background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);
    pointer-events:none;
}
/* 상단 헤더: 뒤로가기 + 배지/크레딧 */
.maa-dh-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-top:2px}
.maa-dh-back{
    width:34px;height:34px;border-radius:50%;border:none;
    background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.maa-dh-back:active{background:rgba(255,255,255,.2)}
.maa-dh-header-right{display:flex;align-items:center;gap:8px}
.maa-dh-badge{
    font-size:11px;font-weight:700;color:#c4b5fd;
    background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.2);
    border-radius:20px;padding:4px 16px;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.maa-dh-credits{
    font-size:11px;font-weight:600;color:#fff;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
    border-radius:20px;padding:4px 16px;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* 점수 + 메시지 2컬럼 */
.maa-dh-score-row{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.maa-dh-circle{width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.maa-dh-ring{position:absolute;inset:0;width:100%;height:100%}
.maa-dh-num{font-size:34px;font-weight:800;color:#fff;letter-spacing:-2px;line-height:1;position:relative}
.maa-dh-lbl{font-size:11px;color:rgba(255,255,255,.4);margin-top:4px;position:relative;font-weight:500}
.maa-dh-msg-col{flex:1;min-width:0}
.maa-dh-song{font-size:12px;font-weight:500;color:rgba(255,255,255,.5);margin-bottom:8px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.maa-dh-encourage{font-size:16px;font-weight:700;color:#fff;line-height:1.5;word-break:keep-all}
.maa-dh-encourage-emoji{font-size:13px;margin-left:2px}
/* 카테고리 3칸 카드 그리드 */
.maa-dh-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.maa-dh-cat{
    background:rgba(255,255,255,.18);border-radius:14px;padding:12px 12px 8px;
    display:flex;flex-direction:column;gap:4px;
}
.maa-dh-cat-head{display:flex;align-items:center;justify-content:space-between}
.maa-dh-cat-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.maa-dh-cat-badge{
    font-size:9px;font-weight:700;border-radius:8px;padding:2px 8px;
    color:rgba(255,255,255,.9);
}
.maa-dh-cat-score{font-size:18px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1}
.maa-dh-cat-score small{font-size:11px;font-weight:500;color:rgba(255,255,255,.35);margin-left:1px}
.maa-dh-cat-track{height:4px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;margin-top:2px}
.maa-dh-cat-fill{height:100%;border-radius:2px;transition:width .8s ease}
.maa-dh-cat-grade{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);margin-top:1px}
/* 다크 히어로 아래 콘텐츠 — 풀와이드 */
.maa-result-body{padding:0}

/* ── 스크러버 (파형 플레이어) ── */
/* 컴팩트 스크러버 */
.maa-scrubber-wrap{
    background:#fff;border-radius:0;padding:16px 24px 12px;margin:0;
    border-bottom:1px solid #EEE8FF;position:relative;
}
.maa-scrubber-row{
    display:flex;align-items:center;gap:12px;
}
.maa-scrub-play{
    width:36px;height:36px;min-width:36px;border-radius:50%;background:#3B82F6;
    border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(59,130,246,.3);transition:transform .1s;padding:0;
}
.maa-scrub-play:active{transform:scale(.92)}
.maa-scrubber-wave{
    position:relative;flex:1;height:40px;cursor:pointer;touch-action:none;
    user-select:none;-webkit-user-select:none;
}
.maa-scrubber-bars{
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;gap:1.5px;
}
.maa-scrub-bar{
    flex:1;border-radius:1px;min-width:1px;background:#3B82F6;opacity:0.3;
    transition:opacity .08s;
}
.maa-scrub-bar.played{opacity:1.0}
.maa-scrubber-playhead{
    position:absolute;top:0;bottom:0;width:2px;
    display:flex;flex-direction:column;align-items:center;
    transform:translateX(-1px);z-index:5;pointer-events:none;left:0%;
}
.maa-scrubber-pin-line{
    flex:1;width:2px;background:#3B82F6;border-radius:1px;
}
.maa-scrubber-pin-dot{
    width:10px;height:10px;border-radius:50%;background:#3B82F6;flex-shrink:0;
    border:2px solid #fff;box-shadow:0 1px 4px rgba(59,130,246,.4);
}
.maa-scrubber-time{
    font-size:11px;font-weight:600;color:#3B82F6;white-space:nowrap;min-width:30px;text-align:right;
}
.maa-scrubber-bottom{
    padding:0 0 0 48px;
}
.maa-scrubber-progress-track{
    height:2px;background:#f0f0f5;border-radius:2px;margin-top:8px;overflow:hidden;
}
.maa-scrubber-progress-fill{
    height:100%;width:0%;background:#3B82F6;border-radius:2px;transition:width .1s linear;
}
.maa-scrubber-timerow{
    display:flex;justify-content:space-between;padding:4px 0 0;
    font-size:10px;color:#9CA3AF;font-weight:500;
}
.maa-feedback-card.highlight{
    border:2px solid var(--hl-color,#7B5CF7);border-radius:10px;
    padding:8px;transition:border-color .3s;
}

.maa-feedback-section{
    background:#fff;border-radius:0;padding:20px 24px;margin-top:0;
    border-bottom:1px solid #EEE8FF;
}
.maa-feedback-title{font-size:14px;font-weight:700;color:#1A1040;margin-bottom:12px}
.maa-feedback-summary{
    font-size:13px;color:#4B5563;line-height:1.7;padding:12px 16px;
    background:#F9F7FF;border-radius:12px;margin-bottom:16px;
}
.maa-feedback-card{
    display:flex;align-items:center;gap:8px;padding:12px 0;
    border-bottom:1px solid #F5F3FF;
}
.maa-feedback-card:last-child{border-bottom:none}
.maa-fb-play{
    width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:#F3F4F6;color:#6B7280;font-size:12px;flex-shrink:0;
    transition:all .15s;
}
.maa-fb-play:active{transform:scale(.92)}
.maa-fb-play.playing{background:#7B5CF7;color:#fff}
.maa-fb-time{
    font-size:11px;font-weight:600;color:#9B8FBF;white-space:nowrap;flex-shrink:0;
    min-width:72px;text-align:center;
}
.maa-fb-msg{font-size:12px;color:#4B5563;line-height:1.5;flex:1;min-width:0}
.maa-fb-msgs{margin:0;padding-left:16px;list-style:disc}.maa-fb-msgs li{margin-bottom:2px}
.maa-fb-badge{
    font-size:10px;font-weight:700;padding:3px 12px;border-radius:20px;
    white-space:nowrap;flex-shrink:0;color:#fff;letter-spacing:0.1px;
}
.maa-fb-badge.pitch{background:#E24B4A}
.maa-fb-badge.rhythm{background:#EF9F27}
.maa-fb-badge.expression{background:#185FA5}
.maa-fb-badge.good{background:#1D9E75}
.maa-fb-badge.bowing{background:#1E40AF}
.maa-fb-badge.vibrato{background:#9D174D}
.maa-fb-badge.technique{background:#065F46}
.maa-fb-badge.touch{background:#92400E}
.maa-fb-badge.phrasing{background:#1E40AF}
.maa-fb-badge.stroke{background:#DC2626}
.maa-fb-badge.mute{background:#78716C}
/* 가사 기반 연주진단 그룹 */
.maa-lyric-group{margin-bottom:4px;border-bottom:1px solid #F0EDF8;padding-bottom:4px}
.maa-lyric-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.maa-lyric-header{font-size:14px;font-weight:700;color:#1A1040;padding:16px 0 8px;line-height:1.5}
.maa-lyric-group .maa-feedback-card:last-child{border-bottom:none}
/* 레거시 피드백 폴백 */
.maa-feedback-item{
    display:flex;gap:8px;padding:8px 0;
    border-bottom:1px solid #F5F3FF;
}
.maa-feedback-item:last-child{border-bottom:none}
.maa-feedback-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.maa-feedback-text{font-size:12px;color:#4B5563;line-height:1.5}

.maa-result-actions{
    display:flex;gap:8px;margin-top:16px;
}
.maa-result-btn{
    flex:1;padding:12px 0;border-radius:12px;border:none;
    font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
    transition:all .15s;
}
.maa-result-btn:active{transform:scale(.98)}
.maa-result-btn.primary{background:#7B5CF7;color:#fff}
.maa-result-btn.secondary{background:#F0ECFF;color:#5B3FD6}

/* ── 피드백 뷰 토글 ── */
.maa-view-toggle{display:flex;gap:0;margin:0;border-bottom:1px solid #F0ECF8;background:#fff;border-radius:0;overflow:hidden}
.maa-view-tab{flex:1;padding:16px 0;text-align:center;font-size:13px;font-weight:600;color:#B0A4CC;background:none;border:none;cursor:pointer;position:relative;font-family:inherit;transition:color .2s}
.maa-view-tab.active{color:#3B82F6}
.maa-view-tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2.5px;background:#3B82F6;border-radius:2px}

/* ── 가사 앵커 아코디언 뷰 ── */
.maa-lyrics-view{background:#fff;border-radius:0;padding:20px 24px;border-bottom:1px solid #EEE8FF;margin-top:0}
.maa-lyrics-empty{text-align:center;padding:32px 16px;color:#9B8FBF;font-size:13px;line-height:1.6}
.maa-lyrics-anchor{padding:0}
.maa-la-hint{font-size:12px;color:#9CA3AF;text-align:center;padding:16px 16px 8px}
.maa-la-wrap{padding:0 0 8px}
.maa-la-row{margin-bottom:2px}
.maa-la-line{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:10px;cursor:default;transition:background .1s}
.maa-la-line.has-feedback{cursor:pointer}
.maa-la-line.has-feedback:hover{background:#FAFAFA}
.maa-la-line:active{transform:scale(.99)}
.maa-la-line.open-issue{background:#FFF1F2;border-radius:10px 10px 0 0}
.maa-la-line.open-good{background:#F0FDF4;border-radius:10px 10px 0 0}
.maa-la-text{font-size:17px;color:#1F2937;font-weight:400;line-height:1.4}
.maa-la-line:hover{background:#FAFAFA}
.maa-la-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:8px}
.maa-la-dot.dot-issue{background:#EF4444}
.maa-la-dot.dot-good{background:#10B981}
/* 아코디언 패널 */
.maa-la-panel{max-height:0;overflow:hidden;padding:0 12px;border-radius:0 0 10px 10px;border-top:1px dashed;margin-bottom:8px;opacity:0;transition:max-height .3s ease,padding .3s ease,opacity .25s ease}
.maa-la-panel.issue{background:#FFF1F2;border-top-color:#FECACA}
.maa-la-panel.good{background:#F0FDF4;border-top-color:#A7F3D0}
.maa-la-panel.show{max-height:600px;padding:12px 12px 16px;opacity:1}
.maa-la-fb-divider{height:1px;background:#E5E0F0;margin:12px 0}
.maa-la-fb-inner{display:flex;gap:12px;align-items:flex-start}
.maa-la-fb-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;margin-top:1px}
.maa-la-fb-icon.issue{background:#FEE2E2;color:#EF4444}
.maa-la-fb-icon.good{background:#D1FAE5;color:#10B981}
.maa-la-fb-body{flex:1}
.maa-la-fb-label{font-size:11px;font-weight:600;margin-bottom:3px}
.maa-la-fb-label.issue{color:#EF4444}
.maa-la-fb-label.good{color:#10B981}
.maa-la-fb-text{font-size:13px;color:#374151;line-height:1.5}
.maa-la-play-btn{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#374151;background:#fff;border:1px solid #E5E7EB;padding:8px 16px;border-radius:20px;cursor:pointer;transition:background .1s;font-family:inherit}
.maa-la-play-btn:hover{background:#F9FAFB}
.maa-la-play-btn .play-icon{font-size:10px}
.maa-lyrics-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid #F0EDF8}
.maa-legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:#6B7280}
.maa-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── 가사 앵커 아코디언 ── */
.maa-lyrics-anchor{background:#fff;border-radius:0;padding:0 24px 20px;border-bottom:1px solid #EEE8FF;margin-top:0;overflow:hidden;text-align:center}
.maa-la-hint{font-size:12px;color:#B0A4CC;text-align:center;padding:16px 0 12px;font-weight:500}
.maa-la-wrap{padding:0;text-align:left}
.maa-la-row{margin-bottom:2px}
.maa-la-line{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:12px;cursor:pointer;transition:background .15s}
.maa-la-line:active{transform:scale(.99)}
.maa-la-line.has-feedback:hover{background:#F8F7FF}
.maa-la-line.open-issue{background:#F5F0FF;border-radius:12px 12px 0 0}
.maa-la-line.open-good{background:#F0FDF4;border-radius:12px 12px 0 0}
.maa-la-text{font-size:16px;color:#1F2937;font-weight:500;line-height:1.5;letter-spacing:-0.2px}
.maa-la-line:hover{background:#FAFAFA}
.maa-la-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-left:8px}
.maa-la-dot.dot-issue{background:#3B82F6}
.maa-la-dot.dot-good{background:#10B981}
.maa-la-panel{max-height:0;overflow:hidden;padding:0 16px;border-radius:0 0 12px 12px;border-top:1px dashed;margin-bottom:8px;opacity:0;transition:max-height .3s ease,padding .3s ease,opacity .25s ease}
.maa-la-panel.issue{background:#F5F0FF;border-top-color:#DDD6FE}
.maa-la-panel.good{background:#F0FDF4;border-top-color:#A7F3D0}
.maa-la-panel.show{max-height:600px;padding:16px 16px 16px;opacity:1}
.maa-la-fb-divider{height:1px;background:#E5E0F0;margin:12px 0}
.maa-la-fb-inner{display:flex;gap:12px;align-items:flex-start}
.maa-la-fb-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;margin-top:1px}
.maa-la-fb-icon.issue{background:#EDE9FE;color:#3B82F6}
.maa-la-fb-icon.good{background:#D1FAE5;color:#10B981}
.maa-la-fb-body{flex:1}
.maa-la-fb-label{font-size:11px;font-weight:600;margin-bottom:3px}
.maa-la-fb-label.issue{color:#3B82F6}
.maa-la-fb-label.good{color:#10B981}
.maa-la-fb-text{font-size:13px;color:#3B82F6;line-height:1.5}
.maa-la-play-btn{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#374151;background:#fff;border:1px solid #E5E7EB;padding:8px 16px;border-radius:20px;cursor:pointer;transition:background .1s;font-family:inherit}
.maa-la-play-btn:hover{background:#F9FAFB}
.maa-la-play-btn .play-icon{font-size:10px}
.maa-lyrics-anchor .maa-lyrics-legend{padding:0 16px}

/* ── 가사 라인 재생 하이라이트 ── */
.maa-la-line.active{background:#F3F0FF;border-radius:12px;transition:background .3s ease}
.maa-la-line.active .maa-la-text{font-weight:700;color:#1F2937;font-size:18px;transition:font-size .25s ease,font-weight .15s ease}
.maa-la-line:not(.active) .maa-la-text{transition:font-size .25s ease,color .3s ease}

/* ── 가사뷰 섹션 헤더 (VERSE/CHORUS) ── */
.maa-la-section-header{font-size:10px;font-weight:700;color:#B0A4CC;text-transform:uppercase;letter-spacing:0.8px;padding:20px 12px 8px;margin-top:4px}
.maa-la-section-header:first-child{margin-top:0}

/* ── 가사 수정 에디터 ── */
.maa-la-edit-wrap{padding:8px 16px 4px;text-align:right}
.maa-la-edit-btn{font-size:11px;color:#9B8FBF;background:none;border:1px solid #EEE8FF;padding:4px 12px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .15s}
.maa-la-edit-btn:hover{background:#F8F7FF;color:#3B82F6;border-color:#D8D0F0}
.maa-lyrics-editor{padding:8px 16px 16px}
.maa-lyrics-textarea{width:100%;min-height:200px;border:1.5px solid #EEE8FF;border-radius:12px;padding:12px;font-size:14px;font-family:inherit;line-height:1.8;color:#1F2937;resize:vertical;outline:none;transition:border-color .2s;box-sizing:border-box}
.maa-lyrics-textarea:focus{border-color:#3B82F6}
.maa-lyrics-editor-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.maa-lyrics-editor-btn{font-size:12px;font-weight:600;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;transition:all .15s}
.maa-lyrics-editor-btn.cancel{background:#F3F4F6;color:#6B7280}
.maa-lyrics-editor-btn.cancel:hover{background:#E5E7EB}
.maa-lyrics-editor-btn.save{background:#3B82F6;color:#fff}
.maa-lyrics-editor-btn.save:hover{background:#2563EB}

/* ── 전체 시작하기 버튼 ── */
.maa-full-play-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin:16px auto 4px;padding:12px 32px;
  background:#FAFAFE;color:#1d1d1f;
  border:1.5px solid #E8E5F0;border-radius:28px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .2s;
  box-shadow:0 1px 3px rgba(59,130,246,.06);letter-spacing:-0.2px;
}
.maa-lyrics-anchor .maa-full-play-btn{display:flex;width:auto;margin-left:auto;margin-right:auto}
.maa-full-play-btn:hover{background:#F5F3FF;border-color:#DDD6FE}
.maa-full-play-btn:active{transform:scale(.97);background:#F0ECFF}
.maa-full-play-btn.playing{background:#FEE2E2;color:#DC2626;border-color:#FECACA;box-shadow:0 1px 3px rgba(220,38,38,.1)}

/* ── 하단 고정 싱크 컨트롤 바 ── */
.maa-sync-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:480px;z-index:9999;
  background:#1d1d1f;color:#fff;
  transition:transform .3s ease;
  box-shadow:0 -2px 12px rgba(0,0,0,.2);
  border-radius:12px 12px 0 0;
}
.maa-sync-bar.show{transform:translateX(-50%) translateY(0)}
.maa-sync-progress{
  position:absolute;top:0;left:0;height:3px;background:#7B5CF7;
  transition:width .3s linear;width:0;
}
.maa-sync-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;margin:0 auto;
}
.maa-sync-time{font-size:13px;color:#aaa;font-variant-numeric:tabular-nums}
.maa-sync-stop{
  background:#DC2626;color:#fff;border:none;border-radius:8px;
  padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
.maa-sync-stop:hover{background:#B91C1C}
.maa-sync-stop:active{transform:scale(.96)}

/* ── 프롬프트 뷰 ── */
#maaPromptView{background:#fff;border-radius:0 0 16px 16px;border:1px solid #EEE8FF;border-top:none;overflow:hidden}
.maa-prompt-view{padding:4px 24px 20px;background:#fff;}
.maa-prompt-section{margin-bottom:16px;}
.maa-prompt-label{font-size:14px;font-weight:700;color:#3B82F6;margin-bottom:12px;}
.maa-gemini-report{
  background:#FAFAFE;border:1px solid #EEEAF5;border-radius:14px;
  padding:20px 16px;font-size:13px;line-height:1.8;color:#1F2937;
  font-family:'Pretendard Variable',sans-serif;
}
.maa-gemini-heading{
  font-size:14px;font-weight:700;color:#4C1D95;
  margin:16px 0 8px;padding-bottom:4px;
  border-bottom:1px solid #EDE9FE;
}
.maa-gemini-heading:first-child{margin-top:0;}
.maa-gemini-p{margin:4px 0;color:#374151;}
.maa-gemini-list{margin:4px 0 8px 8px;padding-left:20px;}
.maa-gemini-list li{margin:3px 0;color:#374151;list-style:decimal;}
.maa-gemini-list li::marker{color:#3B82F6;font-weight:700;}
.maa-gemini-gap{height:8px;}
.maa-gemini-code{
  background:#EDE9FE;color:#2563EB;padding:1px 4px;
  border-radius:4px;font-size:12px;font-family:monospace;
}
.maa-gemini-time{
  background:#DBEAFE;color:#1D4ED8;padding:1px 8px;
  border-radius:4px;font-size:12px;font-weight:600;
  cursor:pointer;transition:background .15s;
}
.maa-gemini-time:hover{background:#BFDBFE;}
.maa-gemini-time.playing{background:#93C5FD;color:#1E3A8A;}
.maa-gemini-report strong{color:#4C1D95;}
.maa-gemini-report em{color:#6B7280;font-style:italic;}

/* ── 정밀분석 서브탭 ── */
.maa-prompt-subtabs{display:flex;gap:0;background:#FAFAFE;border-bottom:1px solid #EDE9FE;padding:0 16px}
.maa-prompt-subtab{flex:1;padding:12px 0;text-align:center;font-size:12px;font-weight:600;color:#B0A4CC;background:none;border:none;cursor:pointer;position:relative;font-family:inherit;transition:color .2s}
.maa-prompt-subtab.active{color:#3B82F6}
.maa-prompt-subtab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2.5px;background:#3B82F6;border-radius:2px}

/* ── 음정·박자 시각화 (화이트 모드) ── */
.maa-pr-wrap{padding:16px}
.maa-pr-header{margin-bottom:16px}
.maa-pr-title{font-size:16px;font-weight:700;color:#1A1040;margin:0 0 4px}
.maa-pr-subtitle{font-size:11px;color:#9B8FBF;margin-bottom:12px}
.maa-pr-legend{display:flex;gap:16px;margin-top:8px}
.maa-pr-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:#6B7280}
.maa-pr-legend-line{display:inline-block;width:22px;height:2px}
.maa-pr-legend-line.solid{background:#3B82F6}
.maa-pr-legend-line.dashed{background:repeating-linear-gradient(90deg,#9CA3AF 0,#9CA3AF 4px,transparent 4px,transparent 7px)}

.maa-pr-card{background:#fff;border-radius:12px;padding:16px 16px 12px;margin-bottom:12px;border:1px solid #EDE9FE;box-shadow:0 1px 4px rgba(59,130,246,0.06)}
.maa-pr-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:8px}
.maa-pr-lyric{font-size:13px;font-weight:600;color:#1F2937;flex:1;min-width:0}
.maa-pr-badges{display:flex;gap:8px;flex-shrink:0}
.maa-pr-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:10px}
.maa-pr-chart{margin-top:2px}
.maa-pr-svg{width:100%;height:auto;display:block}

.maa-pr-section-bg{background:#F9F7FF;border-radius:16px;padding:20px 16px;margin:0;border:1px solid #EDE9FE}

.maa-pr-summary{background:#F5F3FF;border-radius:12px;padding:16px;margin-top:16px}
.maa-pr-summary-label{font-size:12px;font-weight:600;color:#3B82F6;margin-bottom:8px}
.maa-pr-summary-text{font-size:13px;line-height:1.7;color:#374151}

/* ── 매칭 경고 배너 ── */
.maa-pr-match-warning{
    display:flex;align-items:flex-start;gap:12px;
    background:#FEF3C7;border:1px solid #FCD34D;border-radius:12px;
    padding:16px 16px;margin-bottom:16px;
}
.maa-pr-warning-icon{font-size:18px;flex-shrink:0;line-height:1.2}
.maa-pr-warning-body{flex:1;min-width:0}
.maa-pr-warning-title{font-size:13px;font-weight:700;color:#92400E;margin-bottom:3px}
.maa-pr-warning-text{font-size:12px;line-height:1.6;color:#A16207}

/* ── 전체 구간 재생 카드 ── */
.maa-pr-play-all{
    background:linear-gradient(135deg,#4A3EBE,#3B82F6);border-radius:12px;
    padding:12px 16px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.maa-pr-play-all-info{flex:1;min-width:0}
.maa-pr-play-all-label{font-size:12px;color:rgba(255,255,255,.8);margin-bottom:2px}
.maa-pr-play-all-title{font-size:14px;font-weight:700;color:#fff}
.maa-pr-play-all-btn{
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.2);border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;font-size:16px;color:#fff;
}

/* ── 개별 카드 재생 버튼 ── */
.maa-pr-play-btn{
    width:30px;height:30px;border-radius:50%;
    background:#F3F0FF;border:0.5px solid #E5E5EA;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;font-size:12px;color:#3B82F6;
    transition:all .2s;
}
.maa-pr-play-btn.playing{
    background:#3B82F6;color:#fff;border-color:#3B82F6;
    animation:maa-pr-pulse 1.5s infinite;
}
@keyframes maa-pr-pulse{
    0%{box-shadow:0 0 0 0 rgba(59,130,246,.4)}
    70%{box-shadow:0 0 0 5px transparent}
    100%{box-shadow:0 0 0 0 transparent}
}

/* ── 재생 중 카드 하이라이트 ── */
.maa-pr-card.playing{border:1.5px solid #3B82F6;background:#FDFBFF}
.maa-pr-playing-label{font-size:9px;color:#3B82F6;font-weight:600;display:none;text-align:right;margin-bottom:2px}
.maa-pr-card.playing .maa-pr-playing-label{display:block}

/* ── 음정박자 아코디언 코멘트 ── */
.maa-pr-comment{max-height:0;overflow:hidden;opacity:0;border-top:1px dashed transparent;margin-top:0;border-radius:0 0 12px 12px;transition:max-height .3s ease,padding .3s ease,opacity .25s ease,margin-top .3s ease}
.maa-pr-comment.issue{background:#F5F0FF;border-top-color:#DDD6FE}
.maa-pr-comment.good{background:#F0FDF4;border-top-color:#A7F3D0}
.maa-pr-comment.show{max-height:300px;padding:16px 16px 16px;opacity:1;margin-top:8px}
.maa-pr-comment-line{font-size:12px;line-height:1.7;color:#374151;margin-bottom:4px}
.maa-pr-comment-line:last-child{margin-bottom:0}

/* ── 에러 토스트 ── */
.maa-error{
    position:fixed;top:80px;left:50%;transform:translateX(-50%);
    background:#DC2626;color:#fff;padding:12px 20px;border-radius:12px;
    font-size:12px;font-weight:600;z-index:200;
    animation:maa-fade-in .3s;white-space:nowrap;
}
@keyframes maa-fade-in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}