/* 실험실 > 녹음 분석 창(modals/voice.js, docs/features/lab.md). 셸은 메신저·환경설정과 같은 .settings-shell + .side-nav(좁으면 서랍).
   내 분석·곡 기록은 창 폭과 상관없이 목록 → 결과(뒤로 화살표), 사이드바는 그대로(캐릭터 채팅처럼, 2026-10-14 요청).
   글자 크기는 homepage.css 글자 크기 구역(.voice-title·.voice-stat-value·.voice-note). 색은 영역 변수와 --focus-color 하나. */
.voice-app { container: voice / inline-size; }
.voice-view { flex: 1 1 auto; min-height: 0; overflow: auto; }
.voice-view[hidden] { display: none; }
:is(.voice-drop, .voice-file-row, .voice-pill, .voice-icon-btn, .voice-worker-name, .voice-add-worker) > svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 사이드바 아래 분석기 상태 줄 */
.voice-nav-foot {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3); min-height: 32px;
  padding: var(--space-3) var(--space-6) 0;
  border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
/* 상태 줄 = 분석기 관리 단추(루트 소유자만 눌린다, 톱니). 다른 사람에겐 상태만. */
.voice-nav-foot { width: 100%; border-radius: 0; text-align: left; }
.voice-nav-foot:disabled { cursor: default; opacity: 1; }
.settings-shell > .side-nav > .voice-nav-foot[hidden] { display: none; } /* 친구 창(subject)은 분석기 줄도 없다(사이드바 한 뼈대 .side-nav-status 의 flex 를 이긴다) */
.voice-nav-foot:disabled .voice-nav-gear { display: none; }
.voice-nav-gear { width: 15px; height: 15px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--system-c-area-b-base-desc-font-color); }
.voice-nav-foot.is-active .voice-nav-gear { color: var(--focus-color); }
/* 좁은 창 서랍(.is-nav-small)은 사이드바에 좌우 8px 안쪽 여백이 있다 — 구분선은 서랍 벽까지(요청), 글자 자리는 그대로 */
.settings-shell.is-nav-small .voice-nav-foot { margin-inline: -8px; width: calc(100% + 16px); padding-inline: calc(var(--space-6) + 8px); }
.voice-api-card .voice-set > a.small-btn { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.voice-note { color: var(--system-c-area-b-base-desc-font-color); }
.panel-header-title-row > .voice-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: var(--space-3); }
.voice-add-worker { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.voice-add-worker[hidden] { display: none; }
.voice-add-worker svg { width: 14px; height: 14px; }
a.voice-add-worker, .voice-token-actions a { text-decoration: none; } /* [설치 파일]은 내려받기 링크(<a download>)라 밑줄을 뺀다 */
.voice-token-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* 켜짐 점: 꺼짐 = 빈 동그라미, 켜짐·분석 중 = Focus 로 채움 */
.voice-dot {
  flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--system-c-area-b-base-desc-font-color) !important;
}
.voice-dot.is-on { background: var(--focus-color); border-color: var(--focus-color) !important; }
.voice-state { display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; color: var(--system-c-area-b-base-desc-font-color); }
.voice-state:has(.is-on) { color: var(--system-c-area-b-base-font-color); }
.voice-pill { border-color: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.voice-pill svg { width: 13px; height: 13px; }
.voice-pill.is-focus { color: var(--focus-color); border-color: var(--focus-color) !important; }
/* 얇은 진행 막대(올리기·분석 중) */
.voice-bar { height: 3px; border-radius: var(--radius-pill); overflow: hidden; background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.voice-bar[hidden] { display: none; }
.voice-bar > i { display: block; height: 100%; width: 2%; border-radius: inherit; background: var(--focus-color); }

/* 설정 줄(이름 | 조작) — 노래방 기기·분석기 설정 */
.voice-set {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 40px;
  padding: var(--space-2) var(--space-2);
  border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
.voice-set > span:first-child { min-width: 0; }
.voice-set .custom-select-wrap { flex: none; width: 96px; height: 32px; }
.voice-num { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.voice-num input { width: 64px; height: 32px; text-align: right; }

/* ── 새 분석 ── */
.voice-new-col { max-width: 560px; margin: 0 auto; padding: var(--space-4) 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.voice-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 160px; text-align: center; cursor: pointer;
}
.voice-drop[hidden], .voice-file[hidden] { display: none; }
.voice-drop { border: 1px dashed rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-drop:hover, .voice-drop.is-over { border-color: var(--focus-color) !important; }
.voice-drop > svg { width: 24px; height: 24px; color: var(--focus-color); }
.voice-file { display: flex; flex-direction: column; gap: var(--space-4); }
.voice-file-row { display: flex; align-items: center; gap: var(--space-4); min-height: 40px; padding: 0 var(--space-2); }
.voice-file-row > svg { flex: none; width: 20px; height: 20px; color: var(--system-c-area-b-base-desc-font-color); }
.voice-file-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.voice-file-row > .small-btn { min-height: 32px; }
.voice-file-row > .small-btn[hidden] { display: none; }
.voice-options.is-busy { opacity: .6; }
/* 동의 줄: 위 칸(노래방 기기)이 빠져 구분선이 홀로 남았다(요청) — 선 없이 위아래 같은 여백 */
.voice-consent { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-2); }
/* 곡 나누기 위 설명 · [취소] [저장] [확정] 줄은 카드로(요청) */
.voice-recorded-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.voice-new-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); } /* 단추 오른쪽 끝 = 위 카드 오른쪽 끝(요청: 너비 맞추기) */
.voice-new-actions .voice-note { flex: 1 1 auto; min-width: 0; }
.voice-new-actions .small-btn { min-height: 32px; padding: 0 var(--space-8); }
.voice-new-actions [hidden] { display: none; }

/* ── 내 분석: [목록 | 결과] ── */
.voice-my { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.voice-my .voice-detail { display: none; }
.voice-my.is-detail-open .voice-list { display: none; }
.voice-my.is-detail-open .voice-detail { display: flex; }
.voice-job-list { overflow: hidden; } /* 고른 줄의 왼쪽 막대가 둥근 모서리 밖으로 나가지 않게 */
.voice-list, .voice-detail { min-height: 0; overflow: auto; }
.voice-detail:focus { outline: none; } /* Enter 로 연 상세 판(초점 자리일 뿐, 테두리 없음) */
.voice-my.is-empty { grid-template-columns: minmax(0, 1fr); }
.voice-my.is-empty .voice-list { display: flex; align-items: center; justify-content: center; }
.voice-my.is-empty .voice-detail { display: none; }
.voice-job-list { padding: 0; overflow: hidden; }
.voice-job {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-2) var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; outline: none;
}
.voice-job + .voice-job { border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-job.is-selected, .voice-job:focus-visible { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
@media (any-hover: hover) and (any-pointer: fine) {
  .voice-job:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}
.voice-job.is-selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--focus-color); }
.voice-job-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.voice-job-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 녹음 줄(2026-10-21 디자인 2차 2.2): 아이콘 · 이름·날짜(·다음 단계) · 오른쪽 상태 칸(220px, 오른쪽 맞춤 — 막대·단계 글·까닭은 그 안에 쌓는다) */
.voice-job:has(> .voice-job-icon) { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 220px); gap: var(--space-2) var(--space-6); min-height: 56px; box-sizing: border-box; }
.voice-job-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(var(--system-c-area-b-base-divider-rgb), .35); }
.voice-job-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-job-state { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); min-width: 0; text-align: right; }
.voice-job-state > .voice-bar { display: block; flex: none; width: min(160px, 100%); margin: 0; }
.voice-job-state > .voice-note { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-job-state > .small-btn { min-height: 28px; }
@container voice (max-width: 520px) {
  .voice-job:has(> .voice-job-icon) { grid-template-columns: minmax(0, 1fr) auto; }
  .voice-job-icon { display: none; }
  .voice-job-state { max-width: 140px; }
}
.voice-job.is-canceled .voice-job-name { color: var(--system-c-area-b-base-desc-font-color); }

/* 결과(미리 보기) */
.voice-detail { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: var(--space-8); }
.voice-icon-btn { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.voice-icon-btn svg { width: 18px; height: 18px; }
.voice-back { display: inline-flex; }
.voice-detail-line { margin: 0; padding: 0 var(--space-2); color: var(--system-c-area-b-base-desc-font-color); }
/* 평가 숫자: 칸이 좁으면 두 줄 이름("길게 끈 음 중 흔들린 비율")이 넘쳤다(요청: 영역에 비해 내용이 크다) — 칸이 180px 보다 좁아지면 열을 줄인다 */
.voice-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }
.voice-stat {
  min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); /* 프로필 칸(.voice-pstat)·배지와 한 가족: 같은 면·모서리·테두리·안쪽 여백 */
}
.voice-stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-stat-value.is-empty { color: var(--v-muted); font-weight: 400; } /* 값 없음 "-" 는 흐리게(글자 크기는 homepage.css 본문 크기) */
/* 머리줄 "곡 목록 · 잘 부른 순 …": 기본 .panel-card-head 규칙은 캐릭터 창 CSS 에만 있어 그 창을 열었느냐에 따라 가운데 정렬이 되며
   작은 글씨가 위로 떠 보였다(2026-10-14) — 이 창이 스스로 글자 아래선(baseline)에 맞춘다. */
.voice-chart .panel-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--space-2) var(--space-4); }
.voice-chart .panel-card-head > strong, .voice-worker-name strong { font-weight: 700; }

/* 3단계 결과 그림(voice.js rangeMapSVG·pitchLineSVG). 선·칠은 영역 글자색·구분선색·Focus 만 쓴다(위험·주의도 Focus, DESIGN.md). */
.voice-chart { display: flex; flex-direction: column; gap: var(--space-4); }
.voice-chart > .panel-card-head { margin-bottom: 0; } /* 머리줄 아래는 칸 간격(space-4) 하나만. 공용 margin 8 까지 더해 16 으로 벌어지던 것 */
.voice-scroll { overflow-x: auto; overflow-y: hidden; }
.voice-svg { display: block; overflow: visible; }
/* 아이콘용 전역 svg { stroke: currentColor; stroke-width: 1.8 } 가 그래프 글자·칸에 테두리를 둘렀다(2026-10-14 화면: 이름표가 굵고 번져 보였다).
   그래프는 테두리를 끄고, 선은 아래 규칙들이 따로 준다. */
.voice-app svg:is(.voice-svg, .voice-legend-line) { stroke: none; stroke-width: 1; } /* 전역 svg:not([fill=…]) 보다 구체적이어야 한다 */
.voice-svg text { font-weight: 400; }
.voice-range-svg { width: 100%; min-width: 520px; height: auto; }
.voice-svg text { fill: var(--system-c-area-b-base-desc-font-color); }
.voice-svg .voice-grid { stroke: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); stroke-width: 1; }
.voice-svg .voice-grid.is-c { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .5; }
.voice-svg .voice-sec { fill: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.voice-svg .voice-sec:not(.is-stable) { fill: rgba(var(--focus-rgb), .12); }
.voice-svg .voice-sec-line { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .6; }
.voice-svg .voice-sec-label { fill: var(--system-c-area-b-base-font-color); font-weight: 700; }
.voice-svg .voice-sec-label:not(.is-stable) { fill: var(--focus-color); }
.voice-svg .voice-key { fill: var(--system-c-area-b-base-font-color); fill-opacity: .08; }
.voice-svg .voice-key.is-black { fill-opacity: .45; }
.voice-svg .voice-key-name.is-c { fill: var(--system-c-area-b-base-font-color); font-weight: 700; }
.voice-svg .voice-curve, .voice-svg .voice-pitch { fill: none; stroke: var(--focus-color); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.voice-svg .voice-curve.is-sparse { stroke: var(--system-c-area-b-base-desc-font-color); stroke-width: 1.6; }
.voice-svg .voice-pitch { stroke-width: 1.6; }
.voice-svg .voice-mark { stroke: var(--focus-color); stroke-width: 1.5; }
.voice-svg .voice-mark-label { fill: var(--focus-color); font-weight: 700; }
.voice-svg .voice-flag rect { fill: rgba(var(--focus-rgb), .18); }
.voice-svg .voice-flag text { fill: var(--focus-color); }
.voice-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: 0 var(--space-2); }
.voice-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.voice-legend-item > i { flex: none; width: 16px; height: 10px; border-radius: 2px; }
/* 범례 견본은 배경·그림자로 칠한다 — 전역 * { border-color: … !important } 가 테두리 색을 영역 테두리색으로 덮어
   선 견본(정확도 흐름·데이터 적음)이 안 보였다(2026-10-14 화면). */
.voice-legend-item > i.is-curve { height: 2px; border-radius: 1px; background: var(--focus-color); }
.voice-legend-item > i.is-sparse { height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--system-c-area-b-base-desc-font-color) 0 4px, transparent 4px 7px); }
.voice-legend-item > i.is-stable { background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); box-shadow: inset 0 0 0 1px var(--system-c-area-b-base-desc-font-color); }
.voice-legend-item > i.is-unstable { background: rgba(var(--focus-rgb), .12); box-shadow: inset 0 0 0 1px var(--focus-color); }
.voice-range-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 곡 상세(3뎁스)의 곡 칸: 제목 줄 · 다시 듣기 · 음높이 선 · 정답지 줄 · 흔들린 곳 · 음 고치기 */
.voice-song { display: flex; flex-direction: column; min-width: 0; }
.voice-song-head { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-4); }
.voice-song-line { padding: var(--space-2) 0 var(--space-4); }


/* 곡 카드: 제목 + 친구 공개 표시, 다시 듣기 줄(docs/features/lab-voice-history.md). 세그먼트는 캘린더 .cal-seg 그대로. */
.voice-song-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.voice-player { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-2) 0; }
.voice-player audio, .voice-player[hidden] { display: none; } /* 음 고치기 중에는 도구 줄이 이 자리를 쓴다 */
.voice-seg { flex: none; }
.cal-seg.voice-seg > button { flex: 1 0 auto; } /* 같은 몫(1 1 0)이면 긴 이름(플레이트·옥타브·리버브)이 칸 밖으로 잘렸다 */
.voice-seg > button:disabled { opacity: .4; cursor: default; }
.voice-song:has(.voice-player) .voice-pitch-svg { cursor: pointer; }
.voice-svg .voice-playhead { display: none; stroke: var(--system-c-area-b-base-font-color); stroke-width: 1.5; }
.voice-song.is-played .voice-playhead { display: inline; }

/* 곡 카드 제목 줄: 가수(보조 글자)·노래방 번호 알약 */
.voice-song-title { flex-wrap: wrap; }
.voice-song-singer, .voice-song-date { white-space: nowrap; }

/* 곡 나누기 고치기(voice.js startEdit·splitChartSVG, docs/features/lab-voice-edit.md): 고치는 중 안내 칸, 녹음 전체 그림(세로 점선 경계), 새 곡 목록 */
.voice-resplit-note { display: flex; flex-direction: column; gap: var(--space-3); }
.voice-chart.voice-split { gap: var(--space-1); } /* 재생 줄 바로 아래 그림(요청: 둘 사이가 너무 멀다), 그림 위 곡 번호 줄이 틈을 맡는다 */
/* 곡 나누기 리모컨 시안(2026-10-20 요청: 휴대폰에서 리모컨이 위라 불편하다) — 머리줄 [취소][저장][확정](좁으면 ⋯ + 확정),
   아래에 붙는 리모컨(진행 막대 + 곡 경계 눈금, ⟲10 ‹1 ▶ 1› 10⟳ ✂), 곡 목록 줄은 번호 칸 · 곡 이름(없으면 옅게) · "재생 중". 색은 이 창의 강조색 하나. */
.voice-split-head { display: flex; align-items: center; gap: var(--space-4); }
.voice-split-head[hidden] { display: none; }
.voice-split-head .voice-split-narrow { display: none; }
.voice-split-note { display: block; margin: 0 0 var(--space-3) 4px; }
.voice-job.voice-split-row { grid-template-columns: 22px minmax(0, 1fr) auto; } /* 번호 칸 · 이름·구간 · 오른쪽 표시 */
.voice-split-num { text-align: center; font-weight: 700; }
.voice-split-row .voice-job-name.is-unnamed { font-weight: 400; color: var(--system-c-area-b-base-desc-font-color); }
.voice-split-playing { display: none; align-items: center; gap: var(--space-2); }
.voice-split-row.is-playing .voice-split-playing { display: inline-flex; }
.voice-split-row.is-playing { background: rgba(var(--focus-rgb), .06); }
.voice-split-transport { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); box-shadow: 0 -6px 14px -10px rgba(0, 0, 0, .25); }
/* 좁은 곡 나누기: 곡이 적어 판이 남아도 리모컨은 판 아래 끝(엄지 자리)에 — 떠 있지 않게 판 아래 여백도 뺀다(2026-10-21 휴대폰에서 화면 가운데 떴다) */
.voice-detail:has(> .voice-split-transport) { padding-bottom: 0; }
.voice-detail > .voice-split-transport { margin-top: auto; }
.voice-split-track-row { display: flex; align-items: center; gap: var(--space-5); }
.voice-split-clock { flex: none; font-variant-numeric: tabular-nums; }
.voice-split-track { position: relative; flex: 1; min-width: 0; height: 16px; cursor: pointer; touch-action: none; }
.voice-split-track::before, .voice-split-track > i { content: ''; position: absolute; left: 0; top: 6px; height: 4px; border-radius: var(--radius-pill); }
.voice-split-track::before { right: 0; background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.voice-split-track > i { width: 0; background: var(--focus-color); }
.voice-split-track > span > b { position: absolute; top: 3px; width: 1px; height: 10px; background: var(--system-c-area-b-base-desc-font-color); opacity: .6; } /* 곡 경계 */
.voice-split-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.voice-split-key { min-width: 44px; height: 44px; padding: 0 var(--space-3); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--radius-sm); }
.voice-split-key svg, .voice-split-cutbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-split-key small { line-height: 1; }
.voice-split-key.is-play { min-width: 56px; color: var(--focus-color); border-color: var(--focus-color) !important; }
.voice-split-key.is-play svg { fill: currentColor; }
.voice-split-cutbtn { min-height: 44px; flex: none; display: inline-flex; align-items: center; gap: var(--space-3); white-space: nowrap; } /* 글자가 세로로 깨지지 않게(요청) */
@media (pointer: coarse) { .voice-detail:not(.is-split-wide) .voice-split-help { display: none; } } /* 손가락만 쓰는 좁은 화면은 단축키가 없다(두 손가락 벌리기) */
.voice-split-chart { touch-action: pan-x pan-y; background: var(--v-card); border-radius: var(--radius-sm); }
.voice-svg .voice-split-loud { fill: none; stroke: rgba(var(--focus-rgb), .45); stroke-linecap: butt; } /* 곡 나누기 확인 대기: 분석 전 소리 크기 막대(splitChartSVG loud) */
.voice-split-svg { cursor: pointer; user-select: none; }
.voice-svg .voice-split-gap { fill: rgba(var(--v-line-rgb), .8); }
.voice-svg .voice-split-audio { fill: var(--v-card); }
.voice-svg .voice-split-song { fill: rgba(var(--focus-rgb), .06); }
.voice-svg .voice-split-song.is-alt { fill: rgba(var(--focus-rgb), .13); }
.voice-svg .voice-split-song.is-ex { fill: rgba(var(--v-muted-rgb), .28); }
.voice-svg .voice-split-song.is-sel { fill: rgba(var(--focus-rgb), .24); }
.voice-svg .voice-split-num.is-sel { fill: var(--focus-color); font-weight: 700; }
.voice-svg .voice-split-line { stroke: var(--v-fg); stroke-width: 1.5; stroke-dasharray: 4 3; }
.voice-svg .voice-split-knob { fill: var(--v-fg); }
.voice-svg .voice-split-grip { fill: transparent; pointer-events: all; cursor: ew-resize; }
.voice-split-handle:hover .voice-split-line { stroke: var(--focus-color); }
.voice-split-handle:hover .voice-split-knob { fill: var(--focus-color); }
.voice-split-handle.is-fixed { opacity: .45; }
.voice-split-handle.is-fixed .voice-split-grip { cursor: default; }
.voice-split-chart.is-played .voice-playhead { display: inline; }
.voice-split-row { cursor: pointer; }
.voice-split-row.is-ex .voice-job-name { color: var(--system-c-area-b-base-desc-font-color); }
.voice-split-row .voice-song-tags { align-items: center; }
.voice-split-row .small-btn { min-height: 28px; }
.voice-detail .voice-new-actions { flex-wrap: wrap; }
.voice-detail .voice-new-actions .small-btn { flex: none; white-space: nowrap; }

/* 곡 정하기 대화상자(노래방 곡 맞추기): 검색 결과·가사 추천 목록, 기기 + 번호 한 줄 */
.voice-k-dialog { width: min(440px, calc(100% - 32px)); max-width: none; }
.voice-k-list {
  display: flex; flex-direction: column; max-height: 180px; overflow: auto; margin: 0 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important;
}
.voice-k-list[hidden] { display: none; }
.voice-k-list > small { padding: var(--space-4); }
.voice-k-item { display: flex; align-items: center; min-height: 44px; padding: var(--space-3) var(--space-4); text-align: left; border-radius: 0; }
.voice-k-item + .voice-k-item { border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-k-list small { text-align: left; }
/* 답 붙여넣기 칸(프로필 문장·녹음본 분석·정답지 가사): 밑줄 입력칸(auth-input)의 굵은 초점 테두리 대신 얇은 상자, 크기 고정(요청) */
.voice-answer-input {
  box-sizing: border-box; width: 100%; height: 96px; min-height: 0; resize: none; margin: 0; padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha)) !important;
  border-radius: var(--radius-sm); background: rgba(var(--system-c-area-b-base-rgb), var(--system-c-area-b-base-alpha)); box-shadow: none; outline: none;
}
.voice-answer-input:focus { border-color: var(--focus-color) !important; box-shadow: none; }

/* ── 곡 기록: 내 분석과 같은 [목록 | 결과](.voice-my), 그래프·줄 표 ── */
.voice-hist-svg { display: block; } /* 칸 폭 그대로 그린다(voice.js drawHistChart) */
.voice-svg .voice-hist-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.voice-svg .voice-hist-line.is-mine { stroke: var(--focus-color); stroke-width: 2.6; }
.voice-svg .voice-hist-line.is-friend { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .6; stroke-width: 1.6; }
.voice-svg .voice-hist-dot.is-mine { fill: var(--focus-color); }
.voice-svg .voice-hist-dot.is-friend { fill: var(--system-c-area-b-base-desc-font-color); fill-opacity: .6; }
.voice-legend-line { flex: none; width: 16px; height: 4px; overflow: visible; }
.voice-legend-line .voice-hist-line { fill: none; stroke-linecap: round; }
.voice-legend-line .is-mine { stroke: var(--focus-color); stroke-width: 2.6; }
.voice-legend-line .is-friend { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .6; stroke-width: 1.6; }
.voice-table { width: 100%; border-collapse: collapse; }
.voice-table th, .voice-table td { padding: var(--space-3) var(--space-2); text-align: right; white-space: nowrap; }
.voice-table th:first-child, .voice-table td:first-child { text-align: left; }
.voice-table th { color: var(--system-c-area-b-base-desc-font-color); font-weight: 400; }
.voice-table tbody tr { cursor: pointer; outline: none; border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-table tbody tr:focus-visible { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
@media (any-hover: hover) and (any-pointer: fine) {
  .voice-table tbody tr:hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); }
}

/* ── 분석기 ── */
.voice-workers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); align-items: start; }
.voice-workers > .settings-empty { grid-column: 1 / -1; }
.voice-worker { display: flex; flex-direction: column; }
.voice-worker > .panel-card-head { margin-bottom: var(--space-2); }
.voice-worker-name { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.voice-worker-name svg { flex: none; width: 16px; height: 16px; color: var(--system-c-area-b-base-desc-font-color); }
.voice-worker-doing { padding: 0 var(--space-2) var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-worker-doing.is-on { color: var(--system-c-area-b-base-font-color); }

/* 친구 한도(분석기 화면 아래): 기본값 줄 + 사람마다 아바타·이름·이번 주 사용 | 한도(빈 칸 = 기본값) */
.voice-quotas { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } /* 친구 한도·API 사용 카드 사이 */
.voice-quotas:empty { display: none; }
.voice-quota-card > .panel-card-head { margin-bottom: var(--space-2); }
/* 머리줄 오른쪽 설명의 끝을 아래 줄(.voice-set, 좌우 space-2)의 끝과 맞추고, 이름은 다른 카드 머리줄처럼 굵게 */
:is(.voice-quota-card, .voice-api-card) > .panel-card-head { padding-right: var(--space-2); }
:is(.voice-quota-card, .voice-api-card) > .panel-card-head > strong { font-weight: 700; }
.voice-quota-card .voice-num input { width: 80px; }
.voice-quota-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.voice-quota-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; }
.voice-quota-empty { display: block; padding: var(--space-3) var(--space-2); }
.voice-quota-line { text-align: right; }
.voice-quota-line.is-over { color: var(--focus-color); }

/* 연결 열쇠 대화상자: 명령은 코드 칸 색 */
.voice-token-dialog { width: min(420px, calc(100% - 32px)); max-width: none; }
.voice-token {
  display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md); background: var(--system-c-area-d-base-color); color: var(--system-c-area-d-base-font-color);
  border: 1px solid rgba(var(--system-c-area-d-base-border-rgb), var(--system-c-area-d-base-border-alpha)) !important;
}
.voice-token code { font-family: monospace; white-space: pre-wrap; word-break: break-all; user-select: all; -webkit-user-select: all; }
.voice-token .small-btn { align-self: flex-end; min-height: 32px; }

@container voice (max-width: 480px) {
  /* 폰(좁은 창)은 창 바깥 여백이 4px 라 카드가 화면 끝에 붙었다(요청) — 안쪽 8px 를 더해 머리줄 ☰ 와 같은 x 에 맞춘다 */
  .voice-view { padding-inline: var(--space-4); }
  /* 머리줄 오른쪽 테두리 단추([저장·공유]·[분석기 추가])도 카드 오른쪽 끝에 맞춘다(요청: 오른쪽으로 치우쳤다) */
  .voice-content > .settings-panel-header { padding-right: var(--space-4); }
  /* 곡 나누기: 머리줄은 ⋯ + [확정], 리모컨 단추는 한 줄을 고르게 나눠 갖는다 */
  .voice-split-head .voice-split-wide, .voice-split-cutbtn .voice-split-wide { display: none; }
  .voice-split-head .voice-split-narrow { display: inline-flex; }
  .voice-split-keys { gap: var(--space-2); }
  .voice-split-key { flex: 1; min-width: 40px; padding: 0; } /* 40px 아래로는 줄이지 않는다 — 아이콘과 숫자가 겹쳤다(2026-10-21) */
  .voice-split-cutbtn { flex: 1.6; justify-content: center; padding: 0; }
  /* 편집 리모컨: 되돌리기·다시 하기·비교는 옮기기 단추 아래 자기 줄로(한 줄에 몰아 옮기기 단추가 찌그러졌다) */
  .voice-edit-remote .voice-edit-remote-more { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .voice-stats { gap: var(--space-2); }
  .voice-workers { grid-template-columns: minmax(0, 1fr); }
}

/* ── 창 테마: 이 창 안은 사이트 테마와 상관없이 라이트로 고정하고, 강조색만 목소리 높이로(2026-10-14 요청, lab-voice-report.md §4).
   창 바깥 틀(윈도우바·주소줄 = 영역 B)은 그대로 두고 창 안 영역 C 변수만 덮는다. --v-accent-rgb 는 voice.js applyTheme 가
   최고음으로 정한다(분석이 없으면 무채색). 팔레트는 아래 --v-* 토큰(시안 색 토큰 표). */
.window.voice-window {
  --v-accent-rgb: 128, 121, 113;
  --v-accent-soft-rgb: 238, 234, 229;
  --v-good-rgb: 44, 122, 75;
  --v-good-soft: #E2F0E6;
  --v-warn-rgb: 176, 47, 85;
  --v-warn-soft: #F8E0E7;
  /* 바탕·판·선·글자는 강조색과 같은 색상각을 아주 옅게 섞는다(voice.js voiceTheme → applyTheme 가 덮는다). 아래는 주황 기준 처음 값. */
  --v-bg-rgb: 246, 241, 234; --v-panel-rgb: 238, 231, 221; --v-line-rgb: 230, 221, 209; --v-fg-rgb: 32, 28, 23; --v-muted-rgb: 115, 106, 95; --v-faint-rgb: 169, 159, 146;
  --v-bg: rgb(var(--v-bg-rgb)); --v-panel: rgb(var(--v-panel-rgb)); --v-card: #FFFFFF; --v-fg: rgb(var(--v-fg-rgb)); --v-muted: rgb(var(--v-muted-rgb)); --v-faint: rgb(var(--v-faint-rgb)); --v-line: rgb(var(--v-line-rgb));
  color-scheme: light;
  --focus-color: rgb(var(--v-accent-rgb));
  --focus-rgb: var(--v-accent-rgb);
  --focus-font-color: #ffffff;
  --system-c-area-a-base-rgb: var(--v-bg-rgb); --system-c-area-a-base-alpha: 1; --system-c-area-a-base-color: var(--v-bg);
  --system-c-area-a-base-font-color: var(--v-fg); --system-c-area-a-base-desc-font-color: var(--v-muted);
  --system-c-area-a-base-border-rgb: var(--v-line-rgb); --system-c-area-a-base-border-alpha: 1;
  --system-c-area-b-base-rgb: 255, 255, 255; --system-c-area-b-base-alpha: 1; --system-c-area-b-base-color: #ffffff;
  --system-c-area-b-base-font-color: var(--v-fg); --system-c-area-b-base-font-rgb: var(--v-fg-rgb); --system-c-area-b-base-desc-font-color: var(--v-muted);
  --system-c-area-b-base-border-rgb: var(--v-line-rgb); --system-c-area-b-base-border-alpha: 1; --system-c-area-b-base-border-color: var(--v-line);
  --system-c-area-b-base-divider-rgb: var(--v-line-rgb); --system-c-area-b-base-divider-alpha: 1; --system-c-area-b-base-divider-color: var(--v-line);
  --system-c-area-b-accent-rgb: var(--v-accent-rgb); --system-c-area-b-accent-alpha: .1; --system-c-area-b-accent-color: rgb(var(--v-accent-soft-rgb));
  --system-c-area-b-accent-font-color: rgb(var(--v-accent-rgb)); --system-c-area-b-accent-desc-font-color: var(--v-muted);
  --system-c-area-b-accent-border-rgb: var(--v-accent-rgb); --system-c-area-b-accent-border-alpha: .35;
  --system-c-area-c-base-rgb: var(--v-panel-rgb); --system-c-area-c-base-alpha: 1; --system-c-area-c-base-color: var(--v-panel);
  --system-c-area-c-base-font-color: var(--v-fg); --system-c-area-c-base-font-rgb: var(--v-fg-rgb); --system-c-area-c-base-desc-font-color: var(--v-muted);
  --system-c-area-c-base-border-rgb: var(--v-line-rgb); --system-c-area-c-base-border-alpha: 1; --system-c-area-c-base-border-color: var(--v-line);
  --system-c-area-c-base-divider-rgb: var(--v-line-rgb); --system-c-area-c-base-divider-alpha: 1; --system-c-area-c-base-divider-color: var(--v-line);
  --system-c-area-c-accent-rgb: var(--v-accent-rgb); --system-c-area-c-accent-alpha: .12; --system-c-area-c-accent-color: rgb(var(--v-accent-soft-rgb));
  --system-c-area-c-accent-font-color: rgb(var(--v-accent-rgb)); --system-c-area-c-accent-desc-font-color: var(--v-muted);
  --system-c-area-c-accent-border-rgb: var(--v-accent-rgb); --system-c-area-c-accent-border-alpha: .35; --system-c-area-c-accent-border-color: rgb(var(--v-accent-rgb));
  --system-c-area-d-base-color: var(--v-panel); --system-c-area-d-base-font-color: var(--v-fg);
  --system-c-area-d-base-border-rgb: var(--v-line-rgb); --system-c-area-d-base-border-alpha: 1;
  --system-c-button-base-color: #ffffff; --system-c-button-base-font-color: var(--v-fg);
  --system-c-button-base-border-rgb: var(--v-line-rgb); --system-c-button-base-border-alpha: 1;
  --system-c-button-accent-color: rgb(var(--v-accent-rgb)); --system-c-button-accent-alpha: 1; --system-c-button-accent-font-color: #ffffff;
  --system-c-button-accent-border-rgb: var(--v-accent-rgb); --system-c-button-accent-border-alpha: 1;
  --system-c-button-primary-border-rgb: var(--v-accent-rgb); --system-c-button-primary-border-alpha: 1;
}
.voice-app { position: relative; background: var(--v-bg); color: var(--v-fg); }

/* ── 끌어 놓기 덮개(창 어디든 녹음 파일 → 새 분석) ── */
.voice-drop-overlay {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--space-8);
  background: rgba(var(--v-bg-rgb), .86); pointer-events: none;
}
.voice-drop-overlay[hidden] { display: none; }
.voice-drop-overlay-box {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: 20px 24px;
  border-radius: var(--radius-lg); background: var(--v-card); color: rgb(var(--v-accent-rgb));
  box-shadow: inset 0 0 0 2px rgb(var(--v-accent-rgb)), 0 12px 32px rgba(var(--v-fg-rgb), .12);
}
.voice-drop-overlay-box svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 프로필 ── */
.voice-profile-view { padding-bottom: 72px; } /* [+] 가 마지막 카드를 가리지 않게 */
.voice-profile { display: flex; flex-direction: column; gap: 20px; }
.voice-psec { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* 섹션 머리: 제목 하나(이중 제목 금지, DESIGN.md 3장) + 정의가 있으면 옆에 작은 ? */
.voice-sec-head { display: flex; align-items: center; gap: var(--space-2); padding: 0; } /* 제목 글자 = 아래 카드 바깥 선(2026-10-26: 4px 안쪽이라 카드 선·카드 글자 어느 쪽과도 안 맞았다) */
.voice-sec-title { font-weight: 700; }
/* 숫자 정의 ? 단추(helpBtn): 제목 줄 높이에 맞춘 작은 동그라미 */
.voice-help { width: 22px; height: 22px; border-radius: 50%; font-weight: 700; color: var(--v-muted); cursor: help; }
.voice-pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.voice-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); }
.voice-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.voice-hero-who { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-4); }
.voice-hero-avatar { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: rgb(var(--v-accent-rgb)); }
.voice-hero-avatar .voice-avatar { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--v-card); }
.voice-lv {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 8px; border-radius: var(--radius-pill); white-space: nowrap;
  background: rgb(var(--v-accent-rgb)); color: var(--v-card); box-shadow: 0 0 0 2px var(--v-card);
}
.voice-type-badge { padding: 2px 10px; border-radius: var(--radius-pill); background: rgb(var(--v-accent-rgb)); color: var(--v-card); font-weight: 700; letter-spacing: .08em; }
.voice-hero-title { font-weight: 700; line-height: 1.3; }
/* 1안(요청): "당신의 목소리 유형은"은 제목 바로 위에 붙여 한 문장으로 읽히게, 배지는 제목 아래 */
.voice-hero-type { display: flex; flex-direction: column; gap: 2px; }
.voice-hero-desc { margin: 0; color: var(--v-muted); }
.voice-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.voice-tag { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); }
.voice-tag.is-accent { background: rgb(var(--v-accent-soft-rgb)); color: rgb(var(--v-accent-rgb)); box-shadow: none; font-weight: 700; }
.voice-hero-start { min-height: 32px; padding: 0 var(--space-8); }
/* 레벨 바는 이름·Lv 바로 아래(요청) — 막대 + 오른쪽에 다음 레벨까지 */
.voice-hero-who { align-self: stretch; }
.voice-hero-id { flex: 1 1 auto; min-width: 0; }
.voice-xp { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); max-width: 320px; }
.voice-xp > .voice-xp-bar { flex: 1 1 auto; }
.voice-xp > small { flex: none; }
.voice-xp-bar { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--v-panel); overflow: hidden; }
.voice-xp-bar > i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--v-accent-rgb)); }
.voice-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-content: start; }
/* 위 카드(2026-10-21 디자인 2차 2.2): 왼쪽 = 아바타(Lv 알약) · 이름 · 목소리 유형(19px) · 설명 · 레벨 막대, 오른쪽 300px = 음역 막대 · 최근 4주 정확도 */
.voice-hero-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.voice-hero-name { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; max-width: 100%; }
.voice-hero-id > .voice-xp { align-self: stretch; }
.voice-hero-typeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.voice-hero-who { align-items: flex-start; margin-bottom: 0; }
.voice-hero-aside { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.voice-range-bar { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: var(--v-panel); }
.voice-range-bar > i, .voice-range-bar > u { position: absolute; top: 0; bottom: 0; border-radius: inherit; }
.voice-range-bar > i { background: rgb(var(--v-accent-soft-rgb)); }
.voice-range-bar > u { background: rgb(var(--v-accent-rgb)); }
.voice-range-labels { display: flex; justify-content: space-between; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.voice-week-line { display: block; width: 100%; height: 48px; overflow: visible; }
.voice-week-line path { fill: none; stroke: rgb(var(--v-accent-rgb)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.voice-week-line circle { fill: rgb(var(--v-accent-rgb)); }
.voice-pstat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); }
.voice-pstat .voice-stat-value { display: flex; align-items: baseline; gap: var(--space-2); }
.voice-delta { font-weight: 700; }
.voice-delta.is-good { color: rgb(var(--v-good-rgb)); }
.voice-delta.is-warn { color: rgb(var(--v-warn-rgb)); }

.voice-best-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.voice-best {
  display: flex; align-items: center; gap: var(--space-5); min-width: 0; padding: var(--space-4) var(--space-5); text-align: left;
  border-radius: var(--radius-md); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line);
}
@media (any-hover: hover) and (any-pointer: fine) {
  button.voice-best:hover { box-shadow: inset 0 0 0 1px rgb(var(--v-accent-rgb)); }
}
.voice-rank { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgb(var(--v-accent-soft-rgb)); color: rgb(var(--v-accent-rgb)); font-weight: 700; }
.voice-rank.is-top { background: rgb(var(--v-accent-rgb)); color: var(--v-card); }

.voice-axes { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-5); } /* 카드 안 글자 시작은 숫자 칸·배지(.voice-stat 가족)와 같은 10px(2026-10-26) */
.voice-axis { display: flex; flex-direction: column; gap: var(--space-2); }
.voice-axis-labels { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--v-muted); }
.voice-axis-labels .is-strong { color: var(--v-fg); font-weight: 700; }
.voice-axis-bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--v-panel); overflow: hidden; }
.voice-axis-bar > i { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: rgb(var(--v-accent-rgb)); }
.voice-axis-bar > i.is-left { left: 0; }
.voice-axis-bar > i.is-right { right: 0; }

.voice-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.voice-badge { display: flex; align-items: center; gap: var(--space-4); min-width: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); }
.voice-badge-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--v-panel); color: var(--v-faint); }
.voice-badge.is-got .voice-badge-icon { background: rgb(var(--v-accent-soft-rgb)); color: rgb(var(--v-accent-rgb)); }
.voice-badge:not(.is-got) .voice-job-name { color: var(--v-muted); }
:is(.voice-badge-icon, .voice-fit-icon, .voice-habit-icon) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.voice-fit { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--v-card); box-shadow: inset 0 0 0 1px var(--v-line); }
.voice-fit-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.voice-fit.is-good .voice-fit-icon { background: var(--v-good-soft); color: rgb(var(--v-good-rgb)); }
.voice-fit.is-warn .voice-fit-icon { background: var(--v-warn-soft); color: rgb(var(--v-warn-rgb)); }
.voice-habits { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-8); }
.voice-habit-head { display: flex; align-items: center; gap: var(--space-3); }
.voice-habit-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; }
.voice-habit.is-good .voice-habit-icon { background: var(--v-good-soft); color: rgb(var(--v-good-rgb)); }
.voice-habit.is-warn .voice-habit-icon { background: rgb(var(--v-warn-rgb)); color: var(--v-card); }
.voice-habit ul { margin: var(--space-2) 0 0; padding-left: calc(20px + var(--space-3)); /* 글 = 머리줄 이름(아이콘 20 + 간격), 점 = 아이콘 아래(카드 테두리에 붙지 않게) */ display: flex; flex-direction: column; gap: var(--space-1); }

/* 음역 지도 구간: 안정 = 좋음 색, 불안정·흔들림 = 주의 색(시안 색 토큰) */
.voice-window .voice-svg .voice-sec.is-stable { fill: var(--v-good-soft); }
.voice-window .voice-svg .voice-sec:not(.is-stable) { fill: var(--v-warn-soft); }
.voice-window .voice-svg .voice-sec-label.is-stable { fill: rgb(var(--v-good-rgb)); }
.voice-window .voice-svg .voice-sec-label:not(.is-stable) { fill: rgb(var(--v-warn-rgb)); }
.voice-window .voice-legend-item > i.is-stable { background: var(--v-good-soft); box-shadow: inset 0 0 0 1px rgb(var(--v-good-rgb)); }
.voice-window .voice-legend-item > i.is-unstable { background: var(--v-warn-soft); box-shadow: inset 0 0 0 1px rgb(var(--v-warn-rgb)); }

@container voice (min-width: 760px) {
  .voice-hero.has-aside { grid-template-columns: minmax(0, 1fr) 300px; }
  .voice-hero-aside { padding-left: var(--space-8); border-left: 1px solid var(--v-line); }
  .voice-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .voice-best-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voice-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@container voice (max-width: 480px) {
  .voice-hero { padding: var(--space-6); }
  .voice-badges { grid-template-columns: minmax(0, 1fr); }
}

/* 프로필 Claude 문장 안내 줄 · 연습 제안 · 마무리 · 저장·공유 단추 */
.voice-ai { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-5); background: rgb(var(--v-accent-soft-rgb)); box-shadow: none; } /* 글자 시작 10px = 숫자 칸 */
.voice-ai-title { flex: none; }
.voice-ai-text { flex: 1 1 auto; min-width: 0; }
.voice-ai-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; } /* 글 없이 단추만 있어도 오른쪽(결과지 칸과 같게) */
.voice-ai-actions .small-btn { min-height: 32px; }
.voice-practice { display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--space-2) var(--space-8); list-style: none; }
.voice-practice > li { display: flex; align-items: flex-start; gap: var(--space-6); padding: var(--space-5) 0; }
.voice-practice > li + li { border-top: 1px solid var(--v-line) !important; }
.voice-practice-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--v-accent-soft-rgb)); color: rgb(var(--v-accent-rgb)); font-weight: 700; }
.voice-closing { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; }
.voice-closing-text { font-weight: 700; line-height: 1.4; }
.voice-save-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.voice-save-btn[hidden] { display: none; }
/* 내 프로필 머리줄 "친구에게 공개 ? [스위치]"(저장·공유 옆, 2026-10-26) */
.voice-share-head { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; white-space: nowrap; min-height: 32px; } /* 머리줄은 위 맞춤이라 [저장·공유](32px)와 같은 높이여야 가운데가 맞는다 */
.voice-share-head[hidden] { display: none; }
.voice-save-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-answer-input { height: 180px; }

/* 음높이 선: 반음 줄(검은건반 옅게), 가까운 음 막대, 20초 구간 정확도 띠, 흔들린 곳 칩 */
.voice-svg .voice-grid.is-black { stroke-dasharray: 2 3; stroke-opacity: .7; }
.voice-svg .voice-target { fill: rgba(var(--focus-rgb), .38); }
.voice-svg .voice-window-strip { fill: rgba(var(--system-c-area-b-base-divider-rgb), 1); }
.voice-svg .voice-window-strip.is-good { fill: rgba(var(--v-good-rgb, 44, 122, 75), .55); }
.voice-svg .voice-window-strip.is-warn { fill: rgba(var(--v-warn-rgb, 176, 47, 85), .55); }
.voice-legend-item > i.is-target { height: 6px; border-radius: 3px; background: rgba(var(--focus-rgb), .38); }
.voice-legend-item > i.is-flag { background: rgba(var(--focus-rgb), .18); }
.voice-legend-item > i.is-strip { height: 6px; background: linear-gradient(90deg, rgba(var(--v-good-rgb, 44, 122, 75), .55) 0 50%, rgba(var(--v-warn-rgb, 176, 47, 85), .55) 50% 100%); }
.voice-line-legend { padding-bottom: var(--space-2); }
.voice-flags { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2) var(--space-4); }
.voice-flag-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.voice-flag-chip { min-height: 28px; }
/* 스크롤 막대(요청): 굴리는 동안만 얇게 보인다(voice.js 가 굴리는 칸에 .is-scrolling 을 잠깐 붙인다). 한 칸이 가로·세로 막대를
   함께 갖지 않게 — 화면·목록·상세는 세로만, 가로로 넓은 그래프·표는 .voice-scroll 안에서 가로만 굴린다.
   막대 모양은 사이트 공통(common.css·homepage.css *::-webkit-scrollbar: 5px, Focus 색 thumb, 화살표 없음)이고 여기서는 thumb 를 굴리는 동안만 칠한다.
   scrollbar-width·scrollbar-color 를 주면 Chromium 은 ::-webkit-scrollbar 를 버리고 화살표 달린 기본 막대를 그린다(요청: "음역 지도 스크롤이 기본 스크롤")
   — 표준 속성은 ::-webkit-scrollbar 가 없는 브라우저(Firefox)에만 준다. */
.voice-app ::-webkit-scrollbar-thumb { background: transparent; }
.voice-app .is-scrolling::-webkit-scrollbar-thumb { background: rgba(var(--focus-rgb), .75); }
@supports not selector(::-webkit-scrollbar) {
  .voice-app, .voice-app * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .voice-app .is-scrolling { scrollbar-color: rgba(var(--focus-rgb), .75) transparent; }
}
.voice-view, .voice-list, .voice-detail { overflow-x: hidden; overflow-y: auto; }

/* 음 고치기: 다시 듣기 줄 자리의 도구 줄(들어 보기 · 소리 고르기 · WAV 저장 · 끝내기). 막대는 바로 아래 음높이 선에서 끈다(voice.js pitchLineSVG edit). */
.voice-retune { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-2) 0 var(--space-2); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgb(var(--v-accent-soft-rgb, 238, 234, 229)); }
.voice-retune[hidden] { display: none; }
.voice-retune-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.voice-retune-bar .small-btn { min-height: 32px; }
.voice-retune-gap { flex: 1 1 auto; }
.voice-retune-open { min-height: 28px; margin-left: auto; }
.voice-svg .voice-pitch.is-orig { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .45; stroke-dasharray: 3 3; }
.voice-svg .voice-handle { cursor: move; touch-action: none; } /* 위아래 = 음 높이, 옆 = 시간 */
.voice-svg .voice-handle rect { fill: rgba(var(--focus-rgb), .22); stroke: rgba(var(--focus-rgb), .5); stroke-width: 1; }
.voice-svg .voice-handle.is-moved rect { fill: rgba(var(--focus-rgb), .5); }
.voice-svg .voice-handle.is-sel rect { stroke: var(--focus-color); stroke-width: 2; }
.voice-svg .voice-handle text { fill: var(--focus-color); font-weight: 700; }
.voice-retune-svg:focus { outline: none; }
/* 편집(voice.js edBarHTML·edBodyHTML): 위 운반 줄, 아래 [음정 | 믹스] 칸. 음표 막대는 반음 줄 높이, 음계에서 25센트 넘게 어긋나면 경고 색 */
.voice-line-legend > .is-edit, .voice-song.is-editing .voice-line-legend > :not(.is-edit) { display: none; } /* 편집 중엔 편집용 범례 */
.voice-song.is-editing .voice-line-legend > .is-edit { display: inline-flex; }
.voice-legend-item > i.is-blob { height: 8px; border-radius: 4px; background: rgba(var(--focus-rgb), .22); box-shadow: inset 0 0 0 1px rgba(var(--focus-rgb), .5); }
.voice-legend-item > i.is-blob.is-off { background: rgba(var(--v-warn-rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--v-warn-rgb), .6); }
.voice-svg .voice-handle.is-off rect { fill: rgba(var(--v-warn-rgb), .2); stroke: rgba(var(--v-warn-rgb), .6); }
.voice-svg .voice-handle text.voice-handle-name { fill: var(--system-c-area-b-base-font-color); font-weight: 600; pointer-events: none; }
/* 막대 위 손잡이(voice.js smartShow, 마우스만): 위 가운데 ↕ 음정 맞추기 · 위 왼쪽 점선 흔들림 줄이기 · 양 끝 · 아래 가위 · 읽음표. 눈에 보이는 건 작게, 누를 자리(.voice-smart-hit)는 24px */
.voice-svg .voice-smart-hit { fill: transparent; stroke: none; }
.voice-retune-svg .voice-pitch { pointer-events: none; } /* 막대 위를 지나는 고친 선이 막대 누르기·올리기를 가로채지 않게 */
.voice-svg .voice-smart-knob { fill: var(--system-c-area-b-base-color); stroke: var(--focus-color); stroke-width: 2.5; }
.voice-svg .voice-smart-h.is-drift .voice-smart-knob { stroke-dasharray: 2.5 2; }
.voice-svg .voice-smart-h.is-center, .voice-svg .voice-smart-h.is-drift { cursor: ns-resize; }
.voice-svg .voice-smart-h.is-edge { cursor: ew-resize; }
.voice-svg .voice-smart-h.is-cut { cursor: pointer; }
.voice-svg .voice-smart-h.is-cut .voice-smart-knob { fill: var(--system-c-area-b-base-font-color); stroke: none; }
.voice-svg .voice-smart-icon { fill: none; stroke: var(--system-c-area-b-base-color); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.voice-svg .voice-smart-cutline { stroke: var(--system-c-area-b-base-font-color); stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
.voice-svg .voice-smart.is-drag .is-cut { display: none; }
.voice-svg .voice-smart-tip { pointer-events: none; }
.voice-svg .voice-handle.is-smart > text:not(.voice-handle-name) { visibility: hidden; }
.voice-svg .voice-smart-tip rect { fill: var(--system-c-area-b-base-font-color); }
.voice-svg .voice-smart-tip text { fill: var(--system-c-area-b-base-color); font-variant-numeric: tabular-nums; }
.voice-edit-time { font-variant-numeric: tabular-nums; }
/* 곡 편집 아래 리모컨(곡 나누기 리모컨과 같은 부품): 옮기기 단추 다음에 되돌리기·다시 하기·비교 묶음, 자리가 모자라면 아래 줄로 */
.voice-edit-remote[hidden] { display: none; }
.voice-edit-remote-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-left: auto; }
/* 손가락: 리모컨의 되돌리기·다시 하기도 리모컨 단추 높이(44px) — 곡 나누기 휴대폰 리모컨에서 옆 [나누기](44px) 곁에 27px 로 작았다(2026-10-21). */
@media (pointer: coarse) { .voice-edit-remote-more > .small-btn { min-height: 44px; } }
.voice-edit-title { font-weight: 700; }
.voice-edit-tabs .cal-seg { width: fit-content; }
.voice-edit-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.voice-edit-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-1) var(--space-6); }
.voice-edit-scale > select { min-width: 0; }
.voice-ed-insp, .voice-ed-insp-in, .voice-ed-mixer, .voice-ed-mixer-more, .voice-ed-lanes, .voice-ed-sec { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.voice-ed-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.voice-ed-chip { justify-content: center; padding: 0 var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; }
.voice-ed-more { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 32px; justify-content: flex-start; }
.voice-ed-more > span { flex: 1 1 auto; min-width: 0; text-align: left; } /* 펼침 화살표는 오른쪽 끝 */
.voice-ed-more > svg, .voice-ed-mixer-toggle > svg, .voice-ed-wav > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-ed-more[aria-expanded="true"] > svg, .voice-ed-mixer.is-open .voice-ed-mixer-toggle > svg { transform: rotate(180deg); }
.voice-ed-wav, .voice-ed-mixer-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
.voice-ed-mixer-toggle { display: none; } /* 접기·펼치기는 넓은 편집에서만(좁으면 [믹스] 칸이 늘 다 보인다) */
.voice-ed-mixer-title { font-weight: 700; }
/* 넓은 편집(2026-10-21 디자인 2차 방향 A + 2.1 보완): voice.js edFit 이 사이드바를 뺀 편집 폭 960px~ 이면 곡 칸·셸에 is-ed-wide 를 붙인다.
   사이드바는 서랍(☰ 로 겹쳐 열기, drawer.setBreakpoint), 창 머리줄·곡 칸 둘레(곡별 피드백·음역 지도·설정)는 감추고, 곡 칸이 스크롤 판의 보이는 높이(--ed-view)를 꼭 채운다:
   위 머리줄 / 가운데 음높이 그림(240px 아래로 줄지 않는다) · 범례 · 그림 아래 칸(믹서, 넘치면 안에서 굴린다) / 오른쪽 인스펙터 280px(머리줄 아래 ~ 리모컨 위) / 맨 아래 리모컨(판 아래 끝에 붙는다). */
.voice-shell.is-ed-fill .voice-content > .settings-panel-header { display: none; } /* 편집 중(넓든 좁든)은 곡 칸 머리줄이 창 머리줄 노릇(☰ 포함) */
.voice-shell:is(.is-ed-fill, .is-split-wide, .is-vp-open).is-nav-small .side-nav { width: 280px; } /* 편집·곡 나누기·연습 중 서랍도 다른 서랍과 같은 280px(사이드바 한 뼈대, 2026-10-21) */
.voice-rec:has(> .voice-song.is-ed-wide) { padding-bottom: 0; }
.voice-rec:has(> .voice-song.is-ed-wide) > :not(.is-ed-wide) { display: none; }
.voice-song.is-ed-wide {
  display: grid; box-sizing: border-box; height: max(var(--ed-view, 100%), 520px); overflow: hidden;
  grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto minmax(240px, 1fr) auto minmax(0, auto) auto; gap: var(--space-2) var(--space-4);
  grid-template-areas: "bar bar" "line insp" "legend insp" "low insp" "remote remote";
}
.voice-song.is-ed-wide > * { grid-column: 1 / -1; min-width: 0; }
.voice-song.is-ed-wide > .voice-song-head, .voice-song.is-ed-wide > [data-voice-guide-fit], .voice-song.is-ed-wide > .voice-flags { display: none; }
.voice-song.is-ed-wide > [data-voice-edit-bar] { grid-area: bar; margin: 0; padding: var(--space-2) var(--space-4); }
.voice-song.is-ed-wide > .voice-song-line { grid-area: line; min-height: 0; overflow: auto; padding: 0; }
.voice-song.is-ed-wide > .voice-line-legend { grid-area: legend; }
.voice-song.is-ed-wide > [data-voice-edit-remote] { grid-area: remote; position: static; margin-top: 0; flex-direction: row; align-items: center; gap: var(--space-5); padding-block: var(--space-2); box-shadow: none; } /* 한 줄: 시각·진행 막대 | 옮기기 단추 · 되돌리기 · 비교 */
.voice-song.is-ed-wide > [data-voice-edit-remote] > .voice-split-track-row { flex: 1 1 auto; min-width: 160px; }
.voice-song.is-ed-wide > [data-voice-edit-remote] > .voice-split-keys { flex: none; }
.voice-song.is-ed-wide > [data-voice-edit-body] { display: contents; }
.voice-song.is-ed-wide > [data-voice-edit-body] > .voice-ed-insp { grid-area: insp; display: flex; min-height: 0; }
.voice-song.is-ed-wide > [data-voice-edit-body] > .voice-ed-low { grid-area: low; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; max-height: calc(var(--ed-view, 100vh) * .4); overflow-y: auto; overscroll-behavior: contain; }
.voice-song.is-ed-wide .voice-ed-insp > .voice-ed-insp-in, .voice-song.is-ed-wide .voice-ed-mixer, .voice-song.is-ed-wide .voice-ed-lanes { display: flex; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgb(var(--v-accent-soft-rgb, 238, 234, 229)); }
.voice-song.is-ed-wide .voice-ed-insp > .voice-ed-insp-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.voice-song.is-ed-wide .voice-ed-mixer:not(.is-open) .voice-ed-mixer-more { display: none; }
.voice-song.is-ed-wide .voice-ed-mixer-toggle { display: inline-flex; }
.voice-ed-crumb { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.voice-ed-crumb > * { overflow: hidden; text-overflow: ellipsis; }
.voice-ed-crumb > :first-child, .voice-ed-status { flex: none; white-space: nowrap; }
/* 믹서 트랙: 한 줄 28px(이름 · M/S · 볼륨 · 미터와 봉우리 · LUFS), 펼치면 다음 줄에 팬·싱크·키·효과 수. 좁은 편집은 예전 칸 그대로(more 를 풀어 둔다). */
.voice-mix-track-more { display: contents; }
.voice-song.is-ed-wide .voice-mix-tracks { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.voice-song.is-ed-wide .voice-ed-mixer-head .small-btn { min-height: 28px; }
.voice-song.is-ed-wide .voice-ed-mixer { gap: var(--space-2); padding-block: var(--space-2); }
.voice-song.is-ed-wide .voice-ed-mixer-head { position: sticky; top: calc(-1 * var(--space-2)); z-index: 1; margin-block: calc(-1 * var(--space-2)) 0; padding-block: var(--space-2); background: rgb(var(--v-accent-soft-rgb, 238, 234, 229)); } /* 믹서가 안에서 굴러도 [믹서 접기]는 늘 보인다 */
.voice-song.is-ed-wide .voice-mix-track { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); min-height: 28px; padding: 0 var(--space-3); }
.voice-song.is-ed-wide .voice-mix-track .voice-mix-slider { min-height: 28px; }
.voice-song.is-ed-wide .voice-mix-track-head { flex: 0 0 150px; min-height: 28px; }
.voice-song.is-ed-wide .voice-mix-track-head > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-song.is-ed-wide .voice-mix-flag { min-height: 24px; min-width: 28px; padding: 0 var(--space-2); justify-content: center; }
.voice-song.is-ed-wide .voice-mix-track > .voice-mix-slider { order: 1; flex: 0 1 240px; }
.voice-song.is-ed-wide .voice-mix-meter-row { order: 2; flex: 1 1 140px; margin: 0; }
.voice-song.is-ed-wide .voice-mix-lufs { order: 3; flex: none; }
.voice-song.is-ed-wide .voice-mix-scale { display: none; }
.voice-song.is-ed-wide .voice-mix-track-more { order: 4; display: none; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); padding-left: calc(150px + var(--space-4)); box-sizing: border-box; }
.voice-song.is-ed-wide .voice-ed-mixer.is-open .voice-mix-track-more { display: flex; }
.voice-song.is-ed-wide .voice-mix-track-more > .voice-mix-slider, .voice-song.is-ed-wide .voice-mix-track-more > .voice-set { flex: 0 1 240px; }
/* 효과 카드(켠 것만, 끌어서 순서) + 꺼진 효과 칩 줄 */
.voice-fx-group { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--v-card); }
.voice-fx-head, .voice-fx-offs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.voice-fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); }
.voice-fx-cards > .voice-fx-order { display: contents; }
.voice-fx-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-1); box-sizing: border-box; min-height: 84px; min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: rgb(var(--v-accent-soft-rgb, 238, 234, 229)); }
.voice-fx-card[data-drag-id] { cursor: grab; }
.voice-fx-card.is-active { box-shadow: inset 0 0 0 2px var(--focus-color); }
.voice-fx-card-head { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; }
.voice-fx-card-head > strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-fx-card-head .settings-toggle { flex: none; }
.voice-fx-more { flex: none; min-height: 24px; padding: 0 var(--space-2); }
.voice-fx-vals { display: flex; gap: var(--space-5); }
.voice-fx-vals > span { display: flex; flex-direction: column; min-width: 0; }
.voice-fx-vals b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.voice-fx-add { min-height: 28px; border-radius: var(--radius-pill); }
.voice-fx-order > .desktop-area-sort-placeholder { width: 3px; height: auto; }
/* 인스펙터 280px: 슬라이더는 이름·값 한 줄 + 막대 한 줄, 옮기기 넷은 한 줄 */
.voice-song.is-ed-wide .voice-ed-insp .voice-mix-slider { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
.voice-song.is-ed-wide .voice-ed-insp .voice-mix-slider > input { grid-column: 1 / -1; }
.voice-song.is-ed-wide .voice-ed-insp .voice-edit-scale { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); }
.voice-song.is-ed-wide .voice-ed-insp .voice-edit-scale > span:empty { display: none; }
.voice-song.is-ed-wide .voice-ed-insp .voice-edit-tools { grid-template-columns: minmax(0, 1fr); }
.voice-song.is-ed-wide .voice-ed-insp .voice-mix-fx-item .cal-seg { flex-wrap: wrap; }
.voice-song.is-ed-wide .voice-ed-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.voice-song.is-ed-wide .voice-ed-moves > .small-btn { justify-content: center; padding: 0 var(--space-1); white-space: nowrap; }
.voice-song.is-ed-wide .voice-ed-moves > [data-voice-rt-glue] { grid-column: 1 / -1; }
.voice-song.is-ed-wide .voice-ed-insp .voice-ed-foot { margin-top: auto; position: sticky; bottom: calc(-1 * var(--space-3)); margin-bottom: calc(-1 * var(--space-3)); padding: var(--space-3) 0; background: inherit; } /* [세로 −/+]·[음정 처음대로]는 굴려도 늘 보인다 */
/* 좁은 편집(2026-10-21 2b, 휴대폰·좁은 창, voice.js edFit is-ed-narrow · edSheetHTML): 곡 칸이 판 높이(--ed-view)를 꼭 채운다 — 머리줄(☰ · 제목 · ↶ ↷ · ⋯ · 끝내기) /
   그림(남은 높이, 안에서 굴린다) / 아래 시트(접힘 = 손잡이 + 한 줄, 폄 = + 도구, 판 높이의 55%까지) / 리모컨(판 아래 끝, 떠 있지 않아 아래로 아무것도 비치지 않는다). */
.voice-rec:has(> .voice-song.is-ed-narrow) { padding-bottom: 0; }
.voice-rec:has(> .voice-song.is-ed-narrow) > :not(.is-ed-narrow) { display: none; }
.voice-song.is-ed-narrow { box-sizing: border-box; height: max(var(--ed-view, 100%), 360px); overflow: hidden; gap: var(--space-2); padding-bottom: 0; }
.voice-song.is-ed-narrow > :is(.voice-song-head, [data-voice-guide-fit], .voice-flags, .voice-line-legend) { display: none; }
.voice-song.is-ed-narrow > [data-voice-edit-bar] { flex: none; margin: 0; }
.voice-song.is-ed-narrow > [data-voice-edit-bar] > .voice-retune-bar { flex-wrap: nowrap; gap: var(--space-1); }
.voice-song.is-ed-narrow .voice-ed-crumb { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-ed-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
.voice-ed-icon > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-ed-icon:disabled { opacity: .35; }
.voice-song.is-ed-narrow > [data-voice-edit-bar] .small-btn { flex: none; white-space: nowrap; }
.voice-song.is-ed-narrow > .voice-song-line { flex: 1 1 0; min-height: 96px; overflow: auto; padding: 0; }
.voice-song.is-ed-narrow > [data-voice-edit-body] { position: relative; flex: 0 1 auto; min-height: 0; max-height: calc(var(--ed-view, 100vh) * .55); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 0 var(--space-4) var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0; background: rgb(var(--v-accent-soft-rgb, 238, 234, 229)); box-shadow: 0 -6px 14px -10px rgba(0, 0, 0, .25); }
.voice-ed-grab { position: relative; flex: none; display: block; width: 100%; height: 24px; padding: 0; border: 0 !important; background: transparent; cursor: ns-resize; touch-action: none; }
.voice-ed-grab::before { content: ''; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--radius-pill); background: rgba(var(--v-muted-rgb, 128, 121, 113), .45); }
.voice-ed-grab:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.voice-ed-peek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.voice-ed-peek > .cal-seg { flex: none; }
.voice-ed-peek-info { flex: 1 1 8em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.voice-ed-peek-acts { display: flex; gap: var(--space-2); margin-left: auto; }
.voice-ed-peek-acts > .small-btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
@container voice (max-width: 560px) { .voice-ed-peek-acts { flex: 1 1 100%; } } /* 휴대폰: [음정 | 믹스] · 고른 음 / 정답지 · −1 · +1 두 줄 */
.voice-ed-sheet-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-2); border-top: 1px solid var(--v-line) !important; }
.voice-ed-sheet-body .voice-mix-slider { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
.voice-ed-sheet-body .voice-mix-slider > input { grid-column: 1 / -1; }
.voice-ed-sheet-body .voice-ed-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.voice-ed-sheet-body .voice-ed-moves > .small-btn { justify-content: center; padding: 0 var(--space-1); white-space: nowrap; }
.voice-ed-sheet-body .voice-ed-moves > [data-voice-rt-glue] { display: none; } /* 붙이기는 아래 막대 일 줄에 */
.voice-ed-sheet-body .voice-edit-tools { grid-template-columns: minmax(0, 1fr); }
.voice-ed-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.voice-ed-acts > .small-btn { justify-content: center; padding: 0 var(--space-1); white-space: nowrap; }
.voice-ed-sheet-body .voice-mix-tracks { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.voice-ed-sheet-body .voice-mix-scale { display: none; }
.voice-ed-sheet-body .voice-fx-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.voice-ed-sheet-body .voice-ed-mixer-head { flex-wrap: wrap; }
/* 그림 오른쪽 아래 세로 −/+(시트 바로 위에 뜬다, 터치엔 Alt+휠이 없어 휴대폰 폭에서만) */
/* 세로 −/+ 는 접힘 한 줄 안(고른 음 오른쪽) — 그림 위에 띄우면 볼륨 오토메이션 줄을 덮었다 */
.voice-ed-zoom { display: none; flex: none; border: 1px solid var(--v-line) !important; border-radius: var(--radius-md); background: var(--v-card); overflow: hidden; }
.voice-ed-zoom > button { width: 44px; height: 40px; padding: 0; border: 0 !important; border-radius: 0; font-weight: 700; }
.voice-ed-zoom > button + button { border-left: 1px solid var(--v-line) !important; }
@container voice (max-width: 560px) { .voice-song.is-ed-narrow .voice-ed-zoom { display: flex; } }
.voice-song.is-ed-narrow > [data-voice-edit-remote] { flex: none; position: static; margin: 0; gap: var(--space-2); padding-block: var(--space-2); border-radius: 0; box-shadow: none; }
.voice-song.is-ed-narrow > [data-voice-edit-remote] .voice-edit-remote-more { display: none; } /* 되돌리기·다시 하기는 머리줄, 비교는 [원래] */
.voice-song.is-ed-narrow > [data-voice-edit-remote] > .voice-split-keys { flex-wrap: nowrap; gap: var(--space-2); }
@container voice (max-width: 560px) { /* 휴대폰: 일곱 단추가 한 줄을 고르게 나눠 갖는다 */
  .voice-song.is-ed-narrow > [data-voice-edit-remote] .voice-split-key { flex: 1 1 0; min-width: 36px; padding: 0; }
  .voice-song.is-ed-narrow > [data-voice-edit-remote] .voice-split-key.is-play { flex-grow: 1.4; }
}
.voice-ed-ab[aria-pressed="true"] { color: var(--focus-color); border-color: var(--focus-color) !important; }
@media (pointer: coarse) { .voice-song.is-ed-narrow :is(.small-btn, .cal-seg > button) { min-height: 44px; } .voice-ed-icon { width: 44px; height: 44px; } }
/* 고른 구간 띠(빈 곳 끌기) — 마우스는 띠를 위아래로 끌어 구간째 옮긴다 */
.voice-song .voice-svg.voice-retune-svg { cursor: crosshair; user-select: none; -webkit-user-select: none; } /* 다시 듣기의 cursor: pointer 보다 뒤·같은 무게 */
/* 반복 구간 띠(꺼져 있으면 옅게)와 아래 시각 눈금(끌어서 구간, 끌기 전용이라 손가락도 굴리지 않는다) */
.voice-svg .voice-loop-band { fill: rgba(var(--focus-rgb), .05); pointer-events: none; }
.voice-svg .voice-loop-band.is-on { fill: rgba(var(--focus-rgb), .14); }
.voice-svg .voice-loop-ruler { fill: transparent; cursor: ew-resize; touch-action: none; }
.voice-svg .voice-loop-ruler:hover { fill: rgba(var(--focus-rgb), .06); }
/* 단축키 표(? 키) */
.voice-keys-body { max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.voice-keys { width: 100%; border-collapse: collapse; }
.voice-keys th { text-align: left; white-space: nowrap; padding: 2px var(--space-4) 2px 0; vertical-align: top; }
.voice-keys td { padding: 2px 0; color: var(--system-c-area-b-base-desc-font-color); }
.voice-svg .voice-rt-range { fill: rgba(var(--focus-rgb), .12); stroke: rgba(var(--focus-rgb), .6); stroke-width: 1; stroke-dasharray: 4 3; cursor: ns-resize; }
/* 믹싱(voice.js mixPanelHTML, voice-mix.js): 음 고치기와 같은 자리·도구 줄. 트랙 띠 셋(목소리·반주·마스터) + 효과 묶음. 슬라이더는 사이트 .themed-range + 메뉴 슬라이더 줄 격자 */
.voice-mix-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); } /* 셋이 들어갈 폭이 아니면 접는다(창 기준 container 는 사이드바까지 재서 760 창에서 머리 단추가 잘렸다) */
.voice-mix-track, .voice-mix-group { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--v-card); }
.voice-mix-track-head { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.voice-mix-track-head > strong { flex: 1 1 auto; min-width: 0; }
.voice-mix-flag { min-height: 28px; }
.voice-mix-meter { height: 6px; margin: var(--space-1) 0 var(--space-2); border-radius: var(--radius-pill); overflow: hidden; background: var(--v-line); }
.voice-mix-meter > i { display: block; height: 100%; width: calc(var(--lv, 0) * 100%); border-radius: inherit; background: var(--focus-color); transition: width .06s linear; }
.voice-mix-meter > i.is-clip { background: rgb(var(--v-warn-rgb)); }
/* 미터 옆 봉우리 dB(1.5초 붙잡음) + 아래 눈금(−48·−24·−12·−6·0, 미터와 같은 폭) + 마스터 단기 LUFS(voice.js edMeters) */
.voice-mix-meter-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.voice-mix-meter-row > .voice-mix-meter { flex: 1 1 auto; margin: 0; }
.voice-mix-peak { flex: 0 0 52px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.voice-mix-scale { display: block; position: relative; height: 1.2em; margin: 2px calc(52px + var(--space-2)) var(--space-1) 0; color: var(--system-c-area-b-base-desc-font-color); opacity: .7; }
.voice-mix-scale > span { position: absolute; top: 0; line-height: 1; transform: translateX(-50%); white-space: nowrap; }
.voice-mix-scale > span:first-child { transform: none; }
.voice-mix-scale > span:last-child { transform: translateX(-100%); }
.voice-mix-lufs { font-variant-numeric: tabular-nums; }
/* 값 글자를 누르면 숫자 입력칸(voice.js sliderType) */
.voice-mix-slider > output { cursor: text; white-space: nowrap; }
.voice-mx-type { width: 100%; min-width: 0; height: 24px; padding: 0 var(--space-1); text-align: right; }
.voice-mix-slider { grid-template-columns: 3.4em 5.6em minmax(0, 1fr); padding: 0; color: inherit; }
.voice-mix-slider > input { min-width: 0; }
.voice-mix-fx { display: flex; flex-direction: column; gap: var(--space-3); }
.voice-mix-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--space-6); }
.voice-mix-group > strong { grid-column: 1 / -1; padding-top: var(--space-1); }
.voice-mix-fx-item { min-width: 0; padding-bottom: var(--space-2); }
.voice-mix-fx-item .cal-seg { width: fit-content; margin: var(--space-1) 0; }
.voice-mix-fx-item.is-off > :not(.voice-mix-fx-head) { opacity: .45; }
.voice-mix-track .voice-set { border-top: 0 !important; padding-inline: 0; }
.panel-card > .voice-set:first-child { border-top: 0 !important; } /* 카드 맨 위 줄은 위 구분선이 없다(친구 프로필 공개 스위치 카드 등) */
.voice-mix-fx-head { padding-inline: 0; } /* 효과 이름이 아래 슬라이더 이름과 같은 줄에서 시작하게 */
@media (pointer: coarse) { .voice-mix-slider > input { height: 24px; } } /* 손가락으로 잡기 쉽게(막대 모양은 그대로) */
@container voice (max-width: 480px) { .voice-mix-tracks { grid-template-columns: minmax(0, 1fr); } .voice-mix-group { grid-template-columns: minmax(0, 1fr); } }
/* 두 손가락 벌리기는 페이지 확대가 아니라 그래프 가로 확대(voice.js zoomChart) */
.voice-song-line { touch-action: pan-x pan-y; }

/* 곡 목록: 줄 오른쪽 "등록된 곡" 알약, 합치기 고르기 강조, 번호 두 칸 */
.voice-k-item { gap: var(--space-4); }
.voice-k-item > .voice-pill { flex: none; margin-left: auto; }
.voice-k-item.is-selected { background: rgba(var(--focus-rgb), .12); }

/* 곡 정답지: 출처 배지(마우스를 올리면 출처), 상세 칸 */
.voice-guide-badge {
  display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 1px 7px 1px 5px; border-radius: var(--radius-pill);
  background: rgba(var(--focus-rgb), .12); color: var(--focus-color); font-weight: 700; cursor: help; white-space: nowrap;
}
.voice-guide-badge.is-icon { padding: 3px; }
.voice-guide-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voice-job > .voice-guide-badge, .voice-job > .voice-pill { align-self: center; }
.voice-guide { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.voice-guide .panel-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); justify-content: flex-start; }
.voice-guide-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.voice-guide-actions .small-btn { min-height: 30px; }
.voice-guide-requests .voice-guide-actions { flex-wrap: nowrap; }
/* 정답지 겹쳐 보기: 음높이 선 뒤 옅은 음표 막대(맞춘 시간·키), 곡 카드 안 맞춤 줄(시간·키 손으로 고치기) */
.voice-svg .voice-guide-notes rect { fill: var(--system-c-area-b-base-desc-font-color); fill-opacity: .3; }
.voice-svg .voice-guide-links line { stroke: var(--system-c-area-b-base-desc-font-color); stroke-opacity: .5; stroke-width: 1; stroke-linecap: round; }
.voice-legend-item > i.is-guide { height: 8px; border-radius: 2px; background: var(--system-c-area-b-base-desc-font-color); opacity: .3; }
.voice-guide-fit[hidden] { display: none; }
.voice-guide-fit { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2) var(--space-4); }
.voice-guide-fit > .voice-legend { align-items: center; gap: var(--space-2) var(--space-4); padding: 0; }
.voice-guide-fit > .voice-guide-actions { justify-content: flex-start; }
.voice-k-art { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm, 6px); object-fit: cover; }

/* 곡 정하기: 검색칸 하나 + 그 아래 드롭다운(영화 찾기 .movie-search-dropdown 과 같은 모양, 창을 늘리지 않는다) */
.voice-k-now { display: block; margin: 0 0 var(--space-4); text-align: center; }
.voice-k-search { position: relative; }
.voice-k-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px; max-height: 240px; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; border-radius: 8px; box-shadow: var(--shadow-4);
  background: rgb(var(--system-c-area-b-base-rgb)) !important;
  border: 1px solid rgba(var(--system-c-area-b-base-border-rgb), var(--system-c-area-b-base-border-alpha)) !important;
}
.voice-k-drop::-webkit-scrollbar { display: none; }
.voice-k-drop[hidden] { display: none; }
.voice-k-drop > small { padding: var(--space-4); text-align: left; }
.voice-k-drop .voice-k-item + .voice-k-item { border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-k-manual { margin-top: var(--space-4); }
.voice-k-manual[hidden] { display: none; }
/* 잘 부른 곡: 원곡 썸네일 바탕(한 톤 어둡게) + 흰 글씨 — 작업표시줄 음악 알약(.music-pill.has-cover)과 같은 처리 */
.voice-best.has-cover {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), var(--best-cover) !important;
  background-size: cover !important; background-position: center !important; box-shadow: none;
}
.voice-best.has-cover .voice-job-name, .voice-best.has-cover .voice-note { color: rgb(255, 255, 255) !important; }

/* ── 녹음 → 곡 상세(3뎁스, 2026-10-14 요청): 캐릭터 채팅의 줄 댓글처럼 화면 칸을 갈아 끼운다(넓든 좁든 같다) ── */
.voice-rec { display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: 72px; } /* [+] 가 마지막 칸을 가리지 않게 */
/* 아래 리모컨(곡 나누기·편집)은 스크롤 판의 padding 안쪽 끝에 붙는다 — 위 72px 만큼 떠서 "아래보다 위에 붙었다"(2026-10-21 요청). 그 여백을 건너 판 아래 8px 위에. */
.voice-rec .voice-split-transport { bottom: -64px; }
.voice-rec[hidden] { display: none; }
.voice-rec > [data-voice-rec-report]:empty { display: none; } /* 빈 자리가 칸 사이 간격을 한 번 더 먹지 않게 */
.voice-rec-set { padding-block: 0; }
/* 곡 목록 머리줄을 위 테두리와 아래 구분선 사이 가운데로(요청: 위로 붙어 보였다) — 위·아래 여백을 판 여백(--pane-pad)으로 같게. */
.voice-songs { gap: 0; }
.voice-songs > .panel-card-head { margin-bottom: 0; padding-bottom: var(--pane-pad); }
.voice-songs > .voice-job-list { margin-inline: calc(-1 * var(--pane-pad)); margin-bottom: calc(-1 * var(--pane-pad)); border-radius: 0 0 var(--pane-radius) var(--pane-radius); border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) !important; }
.voice-song-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* 분석 단계 줄(분석 요청 > 곡별 분리 > 분석 > 결과 만들기): 끝남·지금 = Focus 점, 지금 단계 이름은 Focus, 실패는 경고 아이콘. 좁으면 줄을 바꾼다. */
.voice-steps { list-style: none; margin: 0; padding: var(--space-6) var(--space-2) var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.voice-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-2); text-align: center; }
/* 칸 사이 선: 앞 동그라미 가운데에서 이 동그라미 가운데까지. 끝났거나 지금 단계로 오는 선은 강조색 */
.voice-step + .voice-step::before { content: ''; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--v-line); }
.voice-step.is-done + .voice-step::before { background: rgb(var(--v-accent-rgb)); }
.voice-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--v-card); box-shadow: inset 0 0 0 2px var(--v-line); color: var(--system-c-area-b-base-desc-font-color); font-weight: 700;
}
.voice-step-dot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.voice-step.is-done .voice-step-dot { background: rgb(var(--v-accent-soft-rgb)); box-shadow: none; color: rgb(var(--v-accent-rgb)); }
.voice-step.is-active .voice-step-dot { background: rgb(var(--v-accent-rgb)); box-shadow: 0 0 0 4px rgb(var(--v-accent-soft-rgb)); color: var(--v-card); }
.voice-step.is-failed .voice-step-dot { background: rgb(var(--v-warn-rgb)); box-shadow: none; color: var(--v-card); }
.voice-step-label { font-weight: 600; color: var(--system-c-area-b-base-desc-font-color); overflow-wrap: anywhere; }
.voice-step.is-done .voice-step-label, .voice-step.is-active .voice-step-label { color: var(--system-c-area-b-base-font-color); }
.voice-step.is-active .voice-step-label { font-weight: 700; }

/* 녹음본 분석(결과 만들기): 프로필과 같은 부품(.voice-psec·.voice-ai·.voice-habits·.voice-fit·.voice-practice·.voice-closing) + 표지·풀이 줄·인용 */
.voice-report, .voice-report-body { display: flex; flex-direction: column; gap: var(--space-6); }
.voice-report-cover { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-6); text-align: center; }
.voice-report-cover .voice-tags { justify-content: center; }
.voice-report-list { list-style: none; margin: 0; padding: var(--space-2) var(--space-8); display: flex; flex-direction: column; }
.voice-report-list > li { display: flex; align-items: flex-start; gap: var(--space-6); padding: var(--space-5) 0; }
.voice-report-list > li + li { border-top: 1px solid var(--v-line) !important; }
.voice-report-list > li > .voice-pill { flex: none; min-width: 84px; justify-content: center; }
.voice-report-key { flex: none; width: 84px; }
/* 버릇처럼 제목이 문장인 목록은 늘 제목 위 · 설명 아래(84px 칸에 갇혀 두세 줄로 꺾이던 것) */
.voice-report-list.is-stack > li { flex-direction: column; gap: var(--space-2); }
.voice-report-list.is-stack .voice-report-key { width: auto; }
.voice-range-kind.is-stable, .voice-tier.is-top { color: rgb(var(--v-good-rgb)); border-color: rgb(var(--v-good-rgb)) !important; }
.voice-range-kind:is(.is-unstable, .is-wobble), .voice-tier.is-practice { color: rgb(var(--v-warn-rgb)); border-color: rgb(var(--v-warn-rgb)) !important; }
.voice-report-detail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-8); }
.voice-report-detail p { margin: 0; line-height: 1.6; }
.voice-quote { margin: 0; padding: var(--space-1) 0 var(--space-1) var(--space-6); border-left: 3px solid rgb(var(--v-accent-rgb)) !important; font-weight: 700; line-height: 1.5; }
.voice-report-ranks .voice-job { cursor: pointer; }
.voice-rank-text { flex-direction: row; align-items: center; gap: var(--space-5); }
.voice-report-src { padding: 0 var(--space-2); text-align: center; }
.voice-report-song .voice-habit ul { margin-top: var(--space-2); }
.voice-report-fit { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: rgba(var(--system-c-area-c-base-rgb), var(--system-c-area-c-base-alpha)); }
.voice-report-fit > .voice-pill { flex: none; }
@container voice (max-width: 480px) {
  .voice-report-list { padding-inline: var(--space-5); }
  .voice-report-list > li { flex-direction: column; gap: var(--space-2); }
  .voice-report-key { width: auto; }
  .voice-report-detail { padding-inline: var(--space-5); }
}
/* 진행 중인 단계: 동그라미 테두리를 진행률(--p)만큼 강조색으로 채운다(요청). 안쪽은 흰 바탕 + 강조색 번호라 고리만 도드라진다. */
.voice-step-dot.is-progress { background: conic-gradient(rgb(var(--v-accent-rgb)) calc(var(--p) * 1%), var(--v-line) 0) !important; box-shadow: none !important; }
.voice-step-dot.is-progress { width: 30px; height: 30px; margin-top: -2px; }
.voice-step-dot.is-progress > span { display: grid; place-items: center; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; background: var(--v-card); color: rgb(var(--v-accent-rgb)); }
.voice-step-dot:not(.is-progress) > span { display: contents; }
.voice-head-more[hidden] { display: none; }
/* 녹음 상세 알림 칸(곡 분리 확인·고치는 중): 안쪽 여백을 평가 숫자 칸과 같게(요청: 블럭 패딩·내용 시작 위치 맞추기), 제목은 굵게 */
.voice-resplit-note { padding: var(--space-5) var(--space-6); }
.voice-resplit-note > .voice-state { font-weight: 700; color: var(--system-c-area-b-base-font-color); }
/* 곡 목록 머리줄의 [곡 나누기 고치기]는 오른쪽 끝(요청) — 줄이 넘쳐 내려가도 오른쪽에 */
.voice-songs > .panel-card-head .voice-split-open { margin-left: auto; }
/* 머리줄 글자·단추를 알림·평가 칸 내용과 같은 x 에(판 여백 + 여기 = 칸 안쪽 12px) */
.voice-songs > .panel-card-head { padding-inline: calc(var(--space-6) - var(--pane-pad)); }
/* 단계 설명은 낱말 중간에서 끊지 않는다("곡 연 / 결 0/15"로 갈렸다) */
.voice-step > .voice-note { word-break: keep-all; overflow-wrap: break-word; }

/* ── 노래 연습(voice-practice.js, docs/features/lab-voice-practice.md) ── */
/* 정답지 찾기 창: 검색칸 + [찾기], 정답지 있는 영상 목록, 못 찾으면 안내 + [등록 요청] */
.voice-gs-row { display: flex; align-items: flex-end; gap: var(--space-3); }
.voice-gs-row > .auth-field { flex: 1 1 auto; min-width: 0; }
.voice-gs-row > .small-btn { flex: none; min-height: 32px; }
.voice-gs-list { max-height: 240px; overflow: auto; }
.voice-gs-none { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; }
.vp-list, .vp-hint { margin-bottom: var(--space-4); }
.vp-hint { display: block; word-break: keep-all; }
.vp-new .vp-step { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.vp-new .vp-step > .small-btn { align-self: flex-start; }
.vp-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-4); }
.vp-video { aspect-ratio: 16 / 9; border-radius: var(--radius-md, 8px); overflow: hidden; background: rgba(0, 0, 0, .06); }
.vp-video iframe, .vp-video > div { width: 100%; height: 100%; display: block; border: 0; }
.vp-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.vp-tune, .vp-score { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
/* 아래 리모컨(곡 나누기·편집과 같은 .voice-split-transport, 2026-10-21 요청): 연습 화면 끝에 붙어 판 아래에 머문다. 녹음·이 줄 반복은 옮기기 단추 오른쪽, 좁으면 아래 줄 */
.vp-remote-acts { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.vp-sync:empty { display: none; }
.vp-mic { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.vp-mic select, .vp-mic .custom-select-wrap { flex: 1 1 auto; min-width: 0; max-width: 220px; } /* 커스텀 select 는 감싼 칸이 자리를 잡는다 */
.vp-mic > .small-btn { flex: none; white-space: nowrap; }
.vp-level { flex: 1 1 60px; height: 6px; border-radius: 3px; background: rgba(128, 128, 128, .2); overflow: hidden; }
.vp-level > i { display: block; height: 100%; width: 0; background: rgb(var(--v-good-rgb)); transition: width .06s linear; }
.vp-level > i.is-hot { background: rgb(var(--v-warn-rgb)); }
.vp-mic [hidden] { display: none; }
.vp-score strong { margin-right: var(--space-6); }
.vp-map-card { padding: 0; margin-bottom: var(--space-4); overflow: hidden; }
.vp-map { display: block; width: 100%; height: 220px; color: inherit; }
.vp-lyric { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6); margin-bottom: var(--space-6); text-align: center; word-break: keep-all; }
.vp-lyric-now span { opacity: .65; transition: opacity .12s; }
.vp-lyric-now span.is-sung { opacity: 1; color: var(--focus-color); }
.vp-lyric-next { opacity: .6; }
.vp-line > .voice-job-text { cursor: pointer; }
.vp-line.is-selected { box-shadow: inset 3px 0 0 var(--focus-color); }
.vp-pick { width: 140px; max-width: 160px; } /* 커스텀 select 는 감싼 칸이 이 클래스를 받아 내용 폭이 거의 0 이라 폭을 준다 */
.vp-final { flex-wrap: wrap; }
@container voice (max-width: 720px) {
  .vp-stage { grid-template-columns: minmax(0, 1fr); }
}
/* 좁은 창·폰(요청: 부를 때 가사와 음 지도가 화면 밖으로 밀렸다): 영상 → 가사 → 음 지도 → 점수 → 마이크·싱크·키 → 안내 → 줄·버전 목록 → 아래 리모컨(재생·녹음).
   틀(.vp-stage·.vp-side)을 풀어 연습 화면 한 줄 흐름에서 order 로 자리를 바꾼다. 줄 목록은 고르기·단추를 글 아래 줄로. */
@container voice (max-width: 560px) {
  [data-voice-practice]:has(> .vp-stage) { display: flex; flex-direction: column; gap: var(--space-4); }
  .vp-stage, .vp-side { display: contents; }
  .vp-video { order: 1; }
  .vp-remote { order: 10; }
  .vp-remote-acts { flex: 1 1 100%; margin-left: 0; }
  .vp-remote-acts > .voice-split-cutbtn { flex: 1; justify-content: center; }
  .vp-lyric { order: 3; margin-bottom: 0; padding: var(--space-5); }
  .vp-map-card { order: 4; margin-bottom: 0; }
  .vp-map { height: 170px; }
  .vp-score { order: 5; }
  .vp-mic { order: 6; }
  .vp-tune { order: 7; }
  .vp-hint { order: 8; margin-bottom: 0; }
  [data-voice-practice] > .voice-psec { order: 9; }
  .vp-mic .small-btn, .vp-tune .small-btn { flex: none; white-space: nowrap; }
  .vp-line, .vp-take { grid-template-columns: minmax(0, 1fr); }
  .vp-line .voice-song-tags, .vp-take .voice-song-tags { justify-content: flex-start; }
  .vp-line .vp-pick { flex: 1 1 140px; max-width: none; }
}
/* 프로필 최저음·최고음 칸: 누르면 그 곡 상세로 */
.voice-stat.is-link { cursor: pointer; }
.voice-stat.is-link:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

/* 편집: 음높이 그림 아래 목소리 구간·오토메이션 줄(2026-10-16, voice.js laneSVG) */
.voice-lane-svg { margin-top: var(--space-2); touch-action: pan-x pan-y; } /* 손가락은 밀면 굴리기, 길게 누른 뒤 끌기(voice.js laneHold) */
.voice-lane-svg:focus-visible, .voice-eq-svg:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.voice-svg .voice-lane-label { fill: var(--system-c-area-b-base-desc-font-color); }
.voice-svg .voice-clip { cursor: grab; }
.voice-svg .voice-clip rect { fill: rgba(var(--focus-rgb), .1); stroke: rgba(var(--focus-rgb), .45); stroke-width: 1; }
.voice-svg .voice-clip.is-moved rect { fill: rgba(var(--focus-rgb), .18); }
.voice-svg .voice-clip.is-sel rect { stroke: var(--focus-color); stroke-width: 2; }
.voice-svg .voice-clip-wave { stroke: rgba(var(--focus-rgb), .7); stroke-width: 1; fill: none; }
.voice-svg .voice-clip-fade { stroke: var(--focus-color); stroke-width: 1.5; fill: none; }
.voice-svg .voice-clip text { fill: var(--focus-color); font-weight: 700; }
.voice-svg .voice-auto-bg { fill: rgba(var(--system-c-area-b-base-divider-rgb), .12); cursor: crosshair; }
.voice-svg .voice-auto-zero { stroke: rgba(var(--system-c-area-b-base-divider-rgb), .6); stroke-dasharray: 3 3; }
.voice-svg .voice-auto-line { stroke: var(--focus-color); stroke-width: 2; fill: none; pointer-events: none; }
.voice-svg .voice-auto-pt { fill: var(--focus-color); stroke: var(--v-card); stroke-width: 1.5; cursor: grab; }
.voice-lane-tools { flex-wrap: wrap; }
/* 정밀 EQ */
.voice-eq-svg { width: 100%; height: auto; max-width: 720px; touch-action: none; }
.voice-svg .voice-eq-spec { fill: rgba(var(--focus-rgb), .12); stroke: none; pointer-events: none; }
.voice-svg .voice-eq-curve { stroke: var(--focus-color); stroke-width: 2; fill: none; pointer-events: none; }
.voice-svg .voice-eq-pt { cursor: grab; }
.voice-svg .voice-eq-pt circle { fill: var(--focus-color); stroke: var(--v-card); stroke-width: 1.5; }
.voice-svg .voice-eq-pt text { fill: var(--v-card); font-weight: 700; pointer-events: none; }
.voice-eq2 > .voice-mix-fx-item { grid-column: 1 / -1; } /* 그림이 반쪽 칸에 끼어 작았다 */
.voice-eq2 .voice-mix-fx-item { display: flex; flex-direction: column; gap: var(--space-3); }
/* 효과 순서: 위에서 아래로 지나간다, 끌어서 바꾼다(UI.bindVerticalReorder) */
.voice-fx-order { display: flex; flex-direction: column; gap: var(--space-1); grid-column: 1 / -1; }
/* 노래별 분석 종합(historySummaryHTML) */
.voice-hist-summary-lines { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); }
.voice-hist-summary-fb { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }

/* 목록이 비면(녹음별·노래별 분석, 노래 연습) 빈 문구 한 줄을 내용 판 가로·세로 가운데에(디자인 공통 규칙 2). */
.voice-view:not([hidden]):has(> :is(.voice-list, [data-voice-practice]) > .settings-empty:only-child) { display: flex; flex-direction: column; justify-content: center; }

/* 노래별 분석 곡 카드(2026-10-21 디자인 2차 2.2): 두 칸 격자, 좁으면 한 칸 */
.voice-hist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@container voice (max-width: 720px) { .voice-hist-grid { grid-template-columns: minmax(0, 1fr); } }
.voice-hist-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); cursor: pointer; outline: none; min-width: 0; }
.voice-hist-card.is-selected, .voice-hist-card:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-color); }
@media (any-hover: hover) and (any-pointer: fine) { .voice-hist-card:hover { box-shadow: inset 0 0 0 1px var(--focus-color); } }
.voice-hist-card-head { display: flex; align-items: baseline; gap: var(--space-4); min-width: 0; }
.voice-hist-card-head > .voice-hist-card-title { flex: 0 1 auto; font-weight: 700; }
.voice-hist-card-head > small { flex: none; }
.voice-hist-card-head > small.voice-job-name { flex: 0 1 auto; }
.voice-hist-card-head > .voice-pill, .voice-hist-card-head > .voice-guide-badge { align-self: center; }
.voice-hist-recs { display: flex; flex-direction: column; }
.voice-hist-rec { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); align-items: center; min-height: 28px; border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); font-variant-numeric: tabular-nums; }
.voice-hist-rec > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-hist-rec.is-new { font-weight: 700; }
.voice-hist-rec .is-up { color: var(--focus-color); }
.voice-hist-rec:not(.is-head):focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
@media (any-hover: hover) and (any-pointer: fine) { .voice-hist-rec:not(.is-head):hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); } }
.voice-hist-all { align-self: flex-start; min-height: 28px; }
/* 노래 연습 넓은 화면(2026-10-21 디자인 2차 2.2, 틀만): 왼쪽 = 마이크·싱크·점수 · 음 지도 · 가사 · 녹음 버전, 오른쪽 280px 인스펙터 = 반주 영상 · 가사 줄(줄마다 버전), 아래 리모컨 */
@container voice (min-width: 1000px) {
  [data-voice-practice]:has(> .vp-stage) {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4) var(--space-6);
    grid-template-areas: "side video" "map lines" "lyric lines" "takes lines" "remote remote";
  }
  [data-voice-practice] > .vp-stage { display: contents; }
  .vp-video { grid-area: video; }
  .vp-side { grid-area: side; }
  .vp-map-card { grid-area: map; margin-bottom: 0; }
  .vp-lyric { grid-area: lyric; margin-bottom: 0; }
  [data-voice-practice] > .voice-psec:has([data-vp-lines]) { grid-area: lines; }
  [data-voice-practice] > .voice-psec:has([data-vp-takes]) { grid-area: takes; }
  [data-voice-practice] > .vp-remote { grid-area: remote; }
  .vp-lines .voice-job { grid-template-columns: minmax(0, 1fr); }
  .vp-lines .voice-song-tags { justify-content: flex-start; flex-wrap: wrap; }
  .vp-lines .vp-pick { flex: 1 1 140px; max-width: none; }
}
/* 곡 나누기 넓은 화면(2026-10-21 디자인 2차 2.2, voice.js splitFit): 편집과 같은 틀 — 가운데 그림 · 오른쪽 280px 인스펙터(곡 목록, 안에서 굴림) · 아래 리모컨 한 줄.
   창 머리줄([취소][저장][확정])은 그대로 둔다. */
.voice-my.is-detail-open .voice-detail.is-split-wide {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-4);
  grid-template-areas: "chart insp" "remote remote"; overflow: hidden; padding-bottom: 0;
}
.voice-detail.is-split-wide > .voice-split { grid-area: chart; min-height: 0; overflow: auto; align-self: stretch; }
.voice-detail.is-split-wide > .voice-split-songs { grid-area: insp; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; }
.voice-detail.is-split-wide > .voice-split-songs .voice-job-list { margin-inline: calc(-1 * var(--pane-pad)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* 판이 세로 flex 라 목록이 줄어들며 overflow:hidden 으로 잘려 굴러가지 않았다(2026-10-22 운영: 23곡 중 15번 아래가 안 보임) — 머리줄은 두고 목록만 굴린다 */
.voice-detail.is-split-wide .voice-split-row { grid-template-columns: 22px minmax(0, 1fr); }
.voice-detail.is-split-wide .voice-split-row > .voice-song-tags { grid-column: 2; justify-content: flex-start; }
.voice-detail.is-split-wide > .voice-split-transport { grid-area: remote; position: static; margin-top: 0; flex-direction: row; align-items: center; gap: var(--space-5); padding-block: var(--space-2); box-shadow: none; }
.voice-detail.is-split-wide > .voice-split-transport > .voice-split-track-row { flex: 1 1 auto; min-width: 160px; }
.voice-detail.is-split-wide > .voice-split-transport > .voice-split-keys { flex: none; flex-wrap: nowrap; }
.voice-split-help { font-weight: 700; }
/* 좁은 곡 나누기 머리줄: 녹음 이름 칸을 빼서 "곡 나누기" 제목이 잘리지 않게(녹음 이름은 앞 화면에 있다) */
@container voice (max-width: 480px) {
  .voice-content:has(.voice-split-head:not([hidden])) [data-voice-crumb2] { display: none; }
}

/* 줄별 점수 · 비교 화면(2026-10-22 표 → 2026-10-26 디자인 r5-c 비교 화면, docs/features/lab-voice-history.md).
   칸은 점수만큼 강조색을 깔고(--s = 0~1), 줄마다 가장 높은 칸은 굵게 + 테두리. 띠 = 녹음마다 한 줄, 가사 줄마다 한 칸. */
.voice-ls .panel-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.voice-ls .voice-cmp-strip { cursor: pointer; }
.voice-cmp { display: flex; flex-direction: column; gap: var(--space-4); }
.voice-cmp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.voice-cmp-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-4); border: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); border-radius: 999px; background: rgb(var(--system-c-area-b-base-rgb)); color: inherit; cursor: pointer; white-space: nowrap; }
.voice-cmp-chip.is-on { border-color: rgb(var(--v-accent-rgb)); background: rgba(var(--v-accent-rgb), .08); font-weight: 700; }
.voice-cmp-chip:focus-visible, .voice-cmp-row:focus-visible { outline: 2px solid var(--focus-color); outline-offset: -2px; }
.voice-cmp-mk { flex: none; width: 14px; height: 2.5px; background: rgb(var(--v-accent-rgb)); } /* 테두리로 그리면 창 안 테두리 색 규칙이 덮었다 */
.voice-cmp-mk.is-thin { height: 1.5px; }
.voice-cmp-mk.is-friend { height: 2px; background: repeating-linear-gradient(90deg, rgb(var(--v-accent-rgb)) 0 4px, transparent 4px 7px); }
.voice-cmp-strip { display: flex; flex-direction: column; gap: 3px; }
.voice-cmp-sr { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.voice-cmp-sl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-cmp-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1px; height: 14px; }
.voice-cmp-cells > i { border-radius: 1px; background: rgba(var(--v-accent-rgb), calc(.06 + var(--s, 0) * .6)); cursor: pointer; }
.voice-cmp-cells > i:not([style]) { background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.voice-cmp-cells > i.is-sel { box-shadow: 0 0 0 1.5px var(--system-c-area-b-base-font-color); }
.voice-cmp-body { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.voice-cmp-table { padding: 0; overflow: hidden; }
.voice-cmp-tools { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.voice-cmp-seg > .is-active > .voice-note { color: inherit; opacity: .8; }
.voice-cmp-head, .voice-cmp-row { display: grid; grid-template-columns: 2.2em minmax(8em, 1fr) repeat(var(--cols), 4.4em); align-items: center; gap: var(--space-2); padding: 0 var(--space-5); }
.voice-cmp-head { padding-block: var(--space-2); text-align: center; }
.voice-cmp-head > span:nth-child(2) { text-align: left; }
.voice-cmp-head .voice-cmp-mk { display: inline-block; vertical-align: middle; margin-right: 4px; }
.voice-cmp-row { min-height: 32px; border-top: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); cursor: pointer; }
.voice-cmp-row.is-selected { background: rgba(var(--v-accent-rgb), .06); box-shadow: inset 3px 0 0 rgb(var(--v-accent-rgb)); }
@media (any-hover: hover) and (any-pointer: fine) { .voice-cmp-row:not(.is-selected):hover { background: rgba(var(--system-c-area-b-accent-rgb), var(--system-c-area-b-accent-alpha)); } }
.voice-cmp-no { font-variant-numeric: tabular-nums; }
.voice-cmp-ly { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-cmp-cell { display: flex; align-items: center; justify-content: center; align-self: stretch; margin-block: 3px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; background: rgba(var(--v-accent-rgb), calc(var(--s, 0) * .45)); }
.voice-cmp-cell > b { font-weight: 400; }
.voice-cmp-cell.is-best { box-shadow: inset 0 0 0 2px rgb(var(--v-accent-rgb)); }
.voice-cmp-cell.is-best > b { font-weight: 700; }
.voice-cmp-cell.is-none { background: none; color: var(--system-c-area-b-base-desc-font-color); }
.voice-cmp-who, .voice-cmp-bar { display: none; }
.voice-cmp-insp { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.voice-cmp-ih { display: flex; align-items: center; gap: var(--space-2); }
.voice-cmp-lyric { margin: 0; }
.voice-cmp-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.voice-cmp-ls > li { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; }
.voice-cmp-ls > li > .voice-job-name { flex: 1 1 auto; min-width: 0; }
.voice-cmp-ls b { font-weight: 400; font-variant-numeric: tabular-nums; }
.voice-cmp-ls b.is-best { font-weight: 700; }
.voice-cmp-top { color: rgb(var(--v-accent-rgb)); }
.voice-cmp-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); } /* [차례로 듣기 | 이 줄 연습하기] 반반(하나면 꽉) */
.voice-cmp-acts > button { min-height: 36px; }
.voice-cmp-ls > li { gap: var(--space-2); }
.voice-cmp-ls > li > .voice-icon-btn { margin-left: calc(-1 * var(--space-2)); }
/* 줄 판 음높이 겹쳐 보기: 회색 = 정답지 음표, 선 = 녹음(표는 칩과 같다) */
.voice-cmp-overlay { display: block; width: 100%; height: 120px; border: 1px solid rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); border-radius: var(--radius-sm); background: rgb(var(--v-bg-rgb)); }
.voice-cmp-overlay text { fill: var(--system-c-area-b-base-desc-font-color); }
.voice-cmp-gnote { fill: rgba(var(--system-c-area-b-base-divider-rgb), 1); }
.voice-cmp-pline { fill: none; stroke: rgb(var(--v-accent-rgb)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.voice-cmp-pline.is-thin { stroke-width: 1.5; }
.voice-cmp-pline.is-friend { stroke-width: 1.5; stroke-dasharray: 4 3; }
/* 넓은 칸: 표 + 오른쪽 280px 줄 판(굴려도 그 자리) */
@container voice (min-width: 860px) {
  .voice-cmp-body.has-line { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .voice-cmp-insp { position: sticky; top: 0; }
  .voice-cmp-close { display: none; }
}
/* 좁은 칸(휴대폰): 줄마다 가사 한 줄 + 녹음마다 막대(이름 · 막대 · 값). 860 밑에서는 고른 줄 판이 창 아래에 붙는다 */
@container voice (max-width: 640px) {
  .voice-cmp-head { display: none; }
  .voice-cmp-row { grid-template-columns: 1.6em minmax(0, 1fr); row-gap: 2px; padding-block: var(--space-3); }
  .voice-cmp-cell { grid-column: 2; display: grid; grid-template-columns: 6em minmax(0, 1fr) 3em; gap: var(--space-3); margin: 0; background: none; box-shadow: none; }
  .voice-cmp-cell.is-best { box-shadow: none; }
  .voice-cmp-who { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice-cmp-bar { display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--v-accent-rgb)) calc(var(--s, 0) * 100%), rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)) 0); }
  .voice-cmp-cell > b { text-align: right; }
}
@container voice (max-width: 859px) { .voice-cmp-insp { position: sticky; bottom: calc(-1 * var(--space-8)); margin-bottom: calc(-1 * var(--space-8)); /* 곡 상세 칸 아래 여백(.voice-detail padding-bottom)만큼 떠 있었다(2026-10-26 휴대폰) */ box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, .2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }

/* ── 친구 창 프로필 "나와 비교"(2026-10-26, docs/features/lab-voice-profile.md): 표 머리의 두 점(친구 = 강조색, 나 = 진한 테두리)이 아래 막대·점의 범례 ── */
.voice-vs { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-8); }
.voice-vs-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, auto) minmax(56px, auto); gap: var(--space-3) var(--space-8); align-items: baseline; font-variant-numeric: tabular-nums; }
.voice-vs-table > :not(:nth-child(3n + 1)) { text-align: right; justify-self: end; min-width: 0; }
.voice-vs-who { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 120px; font-weight: 700; }
.voice-vs-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.voice-vs-dot.is-them, .voice-vs-track > i.is-them { background: rgb(var(--v-accent-rgb)); }
.voice-vs-dot.is-me, .voice-vs-track > i.is-me { background: transparent; box-shadow: inset 0 0 0 2.5px var(--v-fg); } /* 속이 빈 고리: 친구 점과 겹쳐도 둘 다 보인다 */
.voice-vs-ranges { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: center; padding-top: var(--space-6); border-top: 1px solid var(--v-line); }
.voice-vs-ranges > .voice-job-name { max-width: 120px; }
.voice-range-bar.is-me > i { background: rgba(var(--v-fg-rgb), .14); }
.voice-range-bar.is-me > u { background: var(--v-fg); }
.voice-vs-axes { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--v-line); }
.voice-vs-track { position: relative; height: 10px; margin-inline: 7px; border-radius: var(--radius-pill); background: var(--v-panel); }
.voice-vs-track > i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
@container voice (max-width: 560px) { .voice-vs { padding: var(--space-5) var(--space-6); } .voice-vs-table { gap: var(--space-3) var(--space-5); } }