/* ==========================================================================
   MOIGO Hero 제작기 (made_video) — 완전 독립 스타일. 기존 MOIGO2 css/main.css 등을
   import/참조하지 않는다. PC 전용(모바일 반응형 없음).
   편집 흐름: 인트로 → 사진/동영상(좌: 콘텐츠 / 우: 편집·효과·미리보기) → 엔딩
   ========================================================================== */

:root {
  /* 전문 편집기 느낌의 다크 네이비/블루 대시보드 테마(요청 — 디자인 개선) */
  --color-primary: #3B82F6;
  --color-primary-soft: rgba(59, 130, 246, 0.16);
  --color-dark: #F1F5F9;
  --color-text-main: #E2E8F0;
  --color-text-muted: #8DA0BC;
  --color-border: #26354D;
  --color-border-hover: #37496A;
  --color-surface: #16233A;
  --color-bg: #0B1626;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 28px -6px rgba(0, 0, 0, 0.45);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-width: 1180px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(1200px 480px at 15% -10%, rgba(59, 130, 246, 0.14), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(124, 58, 237, 0.10), transparent 55%),
    var(--color-bg);
  color: var(--color-text-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* 상단 약 3/5(편집 영역) : 하단 약 2/5(사진·동영상 작업공간, 요청) — body를 뷰포트
 * 높이에 고정한 flex column으로 만들고, 그 안에서 topbar는 내용만큼(flex:0 0 auto),
 * .mv-layout이 나머지 전체를 차지한 뒤(.mv-section-editor : .mv-media-dock)을 flex
 * 3:2 비율로 나눈다 — 브라우저 창 높이가 달라져도 항상 같은 비율로 페이지 전체
 * 세로 스크롤 없이 맞춰진다(요청 "전체 페이지 세로 스크롤은 없어야 한다"). */
/* SEO용 실제 텍스트 설명(요청) — 기본은 한 줄로 접혀 있어 편집기 작업 공간을 거의
 * 차지하지 않는다(펼쳤을 때만 내용이 늘어남). */
.mv-seo-intro { position: relative; z-index: 20; flex: 0 0 auto; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.3rem 1rem; font-size: 0.78rem; color: var(--color-text-muted); }
.mv-seo-intro summary { cursor: pointer; font-weight: 500; color: var(--color-text-main); list-style: none; }
.mv-seo-intro summary::-webkit-details-marker { display: none; }
.mv-layer-btns { margin-left: auto; display: inline-flex; gap: 0.2rem; }
.mv-layer-btns[hidden] { display: none; }
.mv-layer-btn { border: 0; background: rgba(255,255,255,0.16); cursor: pointer; font-size: 1.25rem; font-weight: 500; line-height: 1; padding: 0.3rem 0.55rem; border-radius: 6px; color: #fff; opacity: 1; }
.mv-layer-btn:hover { background: rgba(255,255,255,0.32); }
.mv-seo-intro summary::before { content: '▸ '; }
.mv-seo-intro[open] summary::before { content: '▾ '; }
/* PC는 body 전체가 스크롤되지 않는 고정 뷰포트 레이아웃이라(요청 "전체 페이지 세로
 * 스크롤 없음" 기존 설계), 펼쳤을 때 내용이 화면 밖으로 잘려 안 보이지 않도록 이 영역만
 * 자체 스크롤을 둔다(다른 패널의 overflow-y:auto와 동일한 기존 패턴 재사용). */
.mv-seo-intro:not([open]) .mv-seo-intro-body { display: none; }
.mv-seo-intro[open] .mv-seo-intro-body { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0.6rem 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0,0,0,0.45); max-width: none; }
.mv-seo-intro-body { margin-top: 0.4rem; line-height: 1.6; max-width: 760px; max-height: 40vh; overflow-y: auto; }
.mv-seo-intro-body h1 { font-size: 0.95rem; margin: 0 0 0.3rem; color: var(--color-dark); }
.mv-seo-intro-body h2 { font-size: 0.82rem; margin: 0.5rem 0 0.15rem; color: var(--color-dark); }
.mv-seo-intro-body p { margin: 0 0 0.3rem; }
.mv-seo-intro-body a { color: var(--color-primary); }

.mv-topbar { flex: 0 0 auto; position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.mv-topbar-inner { max-width: 1520px; margin: 0 auto; padding: 0.4rem 1rem; display: flex; align-items: center; gap: 0.45rem; }
/* PC: 상단바를 레이아웃과 같은 3열(3fr 4fr 3fr)로 나눠 — 왼쪽 열엔 브랜드/비율, 오른쪽 열엔
 * 새로 만들기~영상 만들기+아이콘, 가운데는 비워서 중앙 뷰어가 이 줄까지 올라오게 한다(요청).
 * 올라오는 높이(--mv-rise)는 topbar-rise.js가 실제 위치로 계산한다. */
@media (min-width: 901px) {
  .mv-topbar-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: 0.7rem; padding: 0.4rem 1.35rem; }
  .mv-topbar-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; grid-column: 1; }
  .mv-topbar-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.3rem; grid-column: 3; min-width: 0; }
  .mv-topbar-break { display: none; }
  .mv-topbar-right .mv-btn-compact { padding: 0.34rem 0.5rem; }
  .mv-topbar { z-index: 20; }
  .mv-editor-center { position: relative; z-index: 21; margin-top: calc(-1 * var(--mv-rise, 0px)); }
  /* 끌어올린 중앙 열의 맨 위가 곧 sticky 기준점 — top을 0으로 해야 미리보기 박스가 아래로
   * 밀려 컷팅 버튼 줄을 덮지 않는다(고정은 유지, 아래 내용은 모두 보임). */
  .mv-editor-center .mv-preview-sticky { top: 0; }
  /* 안내 줄은 평소 뷰어 아래로 깔리고, 펼칠 때만 맨 위로 올라와 내용을 보여준다 */
  .mv-seo-intro[open] { z-index: 40; }
}
.mv-brand { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--color-dark); }
a.mv-brand { text-decoration: none; cursor: pointer; }
.mv-brand-icon { font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.35)); }
.mv-brand-text {
  background: linear-gradient(90deg, var(--color-primary), #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#mv-new-project-btn { margin-left: auto; }
.mv-topbar-note { font-size: 0.75rem; color: var(--color-text-muted); flex: 1; }

/* 출력 화면 비율 토글(요청 1번) */
.mv-ratio-toggle { display: flex; gap: 0.25rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.2rem; }
.mv-ratio-btn { border: none; background: transparent; color: var(--color-text-muted); font-size: 0.76rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; }
.mv-ratio-btn.is-active { background: var(--color-primary); color: #fff; }

.mv-btn { border: none; border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; white-space: nowrap; }
.mv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mv-btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.mv-btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mv-btn-ghost { background: var(--color-primary-soft); color: var(--color-primary); }
.mv-btn-ghost:hover:not(:disabled) { background: #E0EAFE; }
.mv-icon-btn { font-size: 0.8rem; }
/* 요청 — 상단 주요 버튼(새로 만들기/전체 초기화/되돌리기/다시실행/영상 만들기)과
 * 미리보기 제어 버튼(선택 위치부터/전체 미리보기/일시정지)을 딱 한 단계만 더 간결하게
 * (기능/문구는 그대로, 차지하는 공간만 축소). 모바일 터치 크기 규칙은 아래 @media
 * 안의 기존 .mv-btn 규칙이 더 뒤에 와서 그대로 유지된다(모바일 손가락 조작 크기 유지). */
.mv-btn-compact { padding: 0.38rem 0.65rem; font-size: 0.76rem; }

.mv-layout { max-width: 1520px; margin: 0 auto; padding: 0.4rem 0.75rem 0.5rem; gap: 0.4rem; flex: 1 1 auto; min-height: 0; width: 100%; }

.mv-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.55rem 0.75rem; box-shadow: var(--shadow-sm); }
.mv-section-title { font-size: 0.86rem; font-weight: 600; color: var(--color-dark); margin: 0 0 0.4rem; }

/* ---------- 인트로 · 시작 Light 패널(요청 5/6번, 요청 21 — 한 화면에 들어오도록 압축) ---------- */
.mv-intro-mode { display: flex; gap: 0.6rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.mv-intro-mode .mv-radio { white-space: nowrap; font-size: 0.78rem; }
.mv-intro-black-fields { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.mv-subpanel-title { font-size: 0.64rem; font-weight: 500; color: var(--color-text-muted); margin: 0.2rem 0 0.15rem; }

/* Intro 영상: 썸네일 중심 4열(요청 — 텍스트 이름 숨기고 썸네일만, 촘촘하게) — 클릭 선택
 * 기능(intro-picker.js)은 그대로 두고, 이름 텍스트만 title(마우스오버 툴팁)로 옮긴다. */
.mv-intro-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; max-height: none; overflow-y: visible; padding-right: 2px; }
.mv-intro-item { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 6px; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 3 / 2; }
.mv-intro-item.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.mv-intro-item-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 0; flex-shrink: 0; }
.mv-intro-item-name { display: none; } /* 요청 — 썸네일만, 이름은 title 툴팁으로만 노출 */
.mv-intro-item .mv-fav-star { top: 1px; left: auto; right: 1px; transform: none; font-size: 0.65rem; }

/* 시작화면 Light 효과 6종(요청 — 텍스트 없이 실제 효과 화면 중심) — 6열 구조는 유지.
 * 6개가 6열이면 항상 1행뿐이라 세로 공간이 남던 것을 요청대로 카드 높이를 기존의 약
 * 2/3로 줄여(92px→61px) 불필요한 빈 공간을 없앴다. 가로 크기/열 구조는 그대로. */
.mv-light-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; max-height: 160px; overflow-y: auto; padding-right: 2px; }
.mv-light-btn { position: relative; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); padding: 0.22rem; cursor: pointer; }
.mv-light-num { position: absolute; top: 2px; left: 2px; z-index: 2; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: rgba(15,23,42,0.75); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
.mv-light-btn.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.mv-light-canvas { width: 100%; height: 41px; border-radius: 4px; display: block; background: #000; } /* 요청 — 세로 높이 2/3로 축소(61px→41px), PC/모바일 공통 적용 */

/* ---------- 2) 대시보드 배치(요청) ----------
 * .mv-layout은 세로로 (편집 영역) → (미디어 전체 폭)만 쌓는 단순 flex column이고,
 * 실제 좌/중앙/우 3열은 .mv-section-editor 하나가 담당한다. 각 열(.mv-editor-left/
 * -center/-right)은 "진짜" flex column 컨테이너라 다른 열의 높이에 영향받지 않고
 * 자기 콘텐츠 높이만큼만 차지한다 — 이전에는 3열의 패널들을 grid-row 번호로 억지로
 * 맞춰서 배치해 짧은 열에 불필요한 빈 칸이 생겼는데(예: 사진 효과가 숨겨진 칸),
 * 그 원인을 없앤 것. HTML은 각 열의 실제 내용물만 그 열의 wrapper 안으로 옮겼을 뿐
 * id/class/내부 마크업은 그대로다. */
.mv-layout { display: flex; flex-direction: column; }

.mv-section-editor { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 0.7rem; align-items: stretch; padding: 0.45rem 0.6rem; flex: 3.5 1 0; min-height: 0; }
.mv-editor-left, .mv-editor-center, .mv-editor-right { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; min-height: 0; overflow-y: auto; }
.mv-editor-center { gap: 0; overflow-y: visible; } /* 미리보기 바로 아래 컷팅이 이어붙어 보이도록(요청) — 스크롤은 안쪽 .mv-center-scroll이 담당 */

/* 중앙 열 안에서 메인 미리보기는 항상 고정 노출, BGM/컷팅만 남는 공간에서 내부
 * 스크롤(요청 — BGM 때문에 미리보기·컷팅이 작아지지 않게, 페이지 전체 스크롤 없이). */
.mv-preview-sticky { flex: 0 0 auto; }
.mv-center-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; }

/* 좌/중앙 하단 바닥선 정렬(요청) — 각 열의 마지막 영역(좌: 마무리·엔딩 메시지,
 * 중앙: 텍스트)을 margin으로 밀어내지 않고, flex:1로 그 영역 자체가 남는 세로 공간을
 * 차지하도록 확장한다 — 앞 내용은 그대로 자기 크기만큼만 차지해 위쪽에 공백이 생기지
 * 않고, 마지막 영역은 바로 이어붙은 채로 아래로 늘어나 바닥선이 정확히 맞는다.
 * 우측 열은 제외(요청 — BGM/음성 녹음을 억지로 늘리지 않고 각자 필요한 만큼만
 * 차지해, 음성 녹음이 절대 잘리지 않도록 한다). */
.mv-editor-left > *:last-child,
.mv-center-scroll > #mv-text-panel {
  flex: 1 1 auto;
  min-height: 0;
}

#mv-video-trim { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }

/* 하단: 사진/동영상/음악 미디어 영역 — 화면 전체 폭(요청) */
.mv-media-dock {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0.4rem 0.75rem;
  flex: 1.5 1 0;
  min-height: 0;
}
.mv-media-dock #mv-media-list { flex: 1; max-height: none; }
.mv-media-dock .mv-media-card { width: 74px; height: 74px; flex-basis: 74px; }
.mv-media-dock .mv-media-arrow { width: 12px; font-size: 0.85rem; }
.mv-media-dock .mv-media-row { gap: 0.22rem; }

/* 메인 미리보기 고정(요청 22-3번) — 상단 고정 툴바 아래에 붙어서, 스크롤해도 항상 같은
 * 자리에 보인다. 미리보기 재생/일시정지/중지 로직은 전혀 손대지 않음. */
.mv-preview-sticky {
  position: sticky;
  top: 60px;
  z-index: 5;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.6rem 0.6rem 0.4rem;
}

.mv-left-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; flex-wrap: nowrap; }
.mv-left-header .mv-section-title { flex: 0 0 auto; white-space: nowrap; margin: 0; }
.mv-photo-duration-control { flex: 0 0 auto; white-space: nowrap; font-size: 0.85rem; font-weight: 500; color: var(--color-text-main); background: var(--color-primary-soft); padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); margin: 0; }
.mv-photo-duration-control input { width: 44px; padding: 0.25rem 0.35rem; border: 1px solid var(--color-border); border-radius: 6px; font-weight: 500; text-align: center; margin: 0 0.3rem; }

.mv-dropzone { flex: 1 1 auto; min-width: 0; border: 2px dashed var(--color-border-hover); border-radius: var(--radius-md); padding: 0.5rem 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.mv-dropzone:hover, .mv-dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-soft); }

/* 사진/동영상: 한 줄 최대 7개 + 카드 사이 항상 화살표 1개(요청) — 줄 단위는 JS
 * (media-list.js render())가 직접 7개씩 잘라 .mv-media-row로 감싸 만든다. 각 줄은
 * flex row로 카드 크기를 고정폭(88px)으로 유지해 화살표가 섞여도 카드 크기·정렬이
 * 깨지지 않는다(요청 "그리드 정렬이나 카드 크기가 깨지지 않게"). 이전 auto-fill grid는
 * 줄당 개수를 컨테이너 너비에 맡겼는데, 지금은 정확히 7개로 고정해야 해서 flex row +
 * 줄바꿈(다음 줄)으로 바꿨다. 컨테이너가 좁아 7개+화살표 6개 폭보다 좁으면 잘리지 않고
 * 가로 스크롤되게 한다. */
.mv-media-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 620px; overflow-y: auto; overflow-x: auto; padding: 2px; }
.mv-media-row { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.mv-media-card { position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--color-border); cursor: grab; background: var(--color-bg); }
.mv-media-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-soft); }
.mv-media-card.is-dragging { opacity: 0.4; }

/* x3 프리미엄 갤러리 효과가 이미 통째로 담고 있는 "뒤" 사진 카드(요청 5번) — 지금
 * 프리미엄 효과가 이 구간을 독점하고 있음을 어둡게 표시로 나타낸다. */
.mv-media-card.is-premium-consumed { opacity: 0.42; filter: grayscale(0.5); }
.mv-media-card.is-premium-consumed::after { content: '✦'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); font-size: 0.9rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; }

/* 요청 — 프리미엄 3초 모드: 개별 사진/동영상 선택이 의미 없으므로 카드를 완전히
 * 비활성화한다(클릭/드래그 전부 통과 — pointer-events:none 하나로 순수 UI 잠금). */
.mv-media-card.is-locked { opacity: 0.38; filter: grayscale(0.6); pointer-events: none; cursor: not-allowed; }

/* 프리미엄 카드(요청 개편) — 미디어 목록 안의 독립 카드, 실제 사진/동영상과 구분되는
 * 그라디언트 배경 + 라벨. */
.mv-premium-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.2rem; background: linear-gradient(160deg, #0A58CA, #063e94); border-color: #0A58CA; cursor: grab; text-align: center; }
.mv-premium-card-label { font-size: 0.58rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.mv-premium-card-name { font-size: 0.52rem; font-weight: 500; color: rgba(255,255,255,0.9); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-premium-card-sec { font-size: 0.5rem; font-weight: 500; color: rgba(255,255,255,0.75); }
.mv-premium-card .mv-media-remove { background: rgba(255,255,255,0.2); color: #fff; }

/* 생일축하 카드(요청 6번) — 프리미엄 카드와 같은 패턴, 생일축하 톤(핑크)의 독립 카드. */
.mv-birthday-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.2rem; background: linear-gradient(160deg, #ff8fc2, #ff4fa3); border-color: #ff4fa3; cursor: grab; text-align: center; }
.mv-birthday-card-label { font-size: 0.58rem; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.mv-birthday-card-name { font-size: 0.52rem; font-weight: 500; color: rgba(255,255,255,0.92); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-birthday-card .mv-media-remove { background: rgba(255,255,255,0.2); color: #fff; }

/* #mv-birthday-fields는 .mv-intro-black-fields를 그대로 재사용하는데, 그 규칙이
 * display:flex를 항상 지정해 [hidden] 속성(브라우저 기본 display:none)을 덮어써 버려
 * OFF여도 입력란이 계속 보이는 문제가 있었다(요청 2/11번 검증 중 발견). 생일축하
 * 입력란에만 한정해 더 높은 우선순위로 확실히 숨긴다(다른 곳에 쓰이는
 * .mv-intro-black-fields 자체는 건드리지 않음). */
#mv-birthday-fields[hidden] { display: none; }

/* 사진 드로잉 카드 — 생일축하 카드와 같은 패턴, 연필/종이 톤의 독립 카드. */
.mv-photo-drawing-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.2rem; background: linear-gradient(160deg, #f3e3c3, #c99a52); border-color: #c99a52; cursor: grab; text-align: center; }
.mv-photo-drawing-card-label { font-size: 0.56rem; font-weight: 600; color: #3b2a14; letter-spacing: 0.02em; }
.mv-photo-drawing-card .mv-media-remove { background: rgba(0,0,0,0.18); color: #fff; }

/* Split로 나뉜 구간 표시(요청 1번 "화면만 봐도 Split된 것을 바로 알 수 있어야 한다") —
 * 점선 강조 테두리 + "구간 N/전체" 배지. is-selected와 동시에 있어도 selected의 실선
 * 테두리 색이 우선 적용되도록 순서상 뒤에 둔다. */
.mv-media-card.is-split { border-style: dashed; border-color: #F59E0B; }
.mv-media-card.is-split.is-selected { border-color: var(--color-primary); }
.mv-media-split-badge { position: absolute; top: 2px; left: 2px; background: #F59E0B; color: #fff; font-size: 0.5rem; font-weight: 500; padding: 0.05rem 0.3rem; border-radius: 4px; z-index: 2; }
.mv-media-split-sep { flex: 0 0 auto; font-size: 0.6rem; font-weight: 600; color: #F59E0B; letter-spacing: 0.03em; padding: 0 0.3rem; user-select: none; }

/* Split 구간 묶음 박스(요청 4번) — [영상1]|SPLIT|[영상2]가 일반 카드 목록과 확실히
 * 구분되도록 카드+SPLIT 구분자들을 하나의 테두리·배경 박스로 감싼다. */
.mv-split-group { flex: 0 0 auto; display: flex; align-items: center; background: rgba(245,158,11,0.12); border: 2px solid #F59E0B; border-radius: 10px; padding: 4px; gap: 0; }
.mv-split-group .mv-media-card { border-style: solid; }

/* 카드 사이 항상 표시되는 연결 화살표(요청) — 드래그 중에만 나타나는 삽입 표시
 * (.mv-media-card.is-drop-target, 아래)와는 별개의 항상-표시 요소다. */
.mv-media-arrow { flex: 0 0 auto; width: 16px; text-align: center; color: var(--color-text-muted); font-size: 1rem; line-height: 1; user-select: none; }

/* 드래그앤드롭 삽입 위치 화살표(복구) — 대상 카드 자체의 의사요소로 겹쳐 그려서
 * CSS grid 칸 정렬에는 전혀 영향을 주지 않는다(칸을 하나 더 차지하는 별도 요소가
 * 아님). overflow는 이 상태일 때만 visible로 풀어 카드 바깥으로 화살표가 튀어나오게
 * 한다(평소에는 기존처럼 hidden 유지 — 썸네일 crop에 영향 없음). */
.mv-media-card.is-drop-target { overflow: visible; }
.mv-media-card.is-drop-target::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--color-primary);
  z-index: 5;
  pointer-events: none;
}

/* Intro/Ending도 사진·동영상과 동일한 카드 크기/정렬로 통일(요청 12번) — 검정 배경 +
 * 짧은 안내 문구만, 드래그/선택 대상은 아니다(data-id 없음, cursor도 기본으로). */
.mv-flow-card { cursor: default; background: #0F172A; display: flex; align-items: center; justify-content: center; padding: 0.3rem; }
.mv-flow-card-text { color: #fff; font-size: 0.6rem; font-weight: 500; text-align: center; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.mv-media-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-media-badge { position: absolute; bottom: 3px; left: 4px; background: rgba(15,23,42,0.75); color: #fff; font-size: 0.55rem; padding: 0.05rem 0.3rem; border-radius: 4px; }
.mv-media-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(15,23,42,0.55); color: #fff; font-size: 0.7rem; cursor: pointer; line-height: 1; z-index: 2; }
.mv-media-remove:hover { background: #EF4444; }
.mv-media-empty { padding: 0.5rem; color: var(--color-text-muted); font-size: 0.85rem; }

.mv-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.mv-field input[type="text"], .mv-field textarea { padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--color-text-main); }

/* 인트로 제목/날짜 입력창(요청) — 배경은 흰색 그대로, 입력 글자만 검정으로 고정해
 * 흐리게/안 보이게 보이지 않도록 한다(포커스 상태 포함). */
#mv-intro-title, #mv-intro-date { color: #000; }
#mv-intro-title:focus, #mv-intro-date:focus { color: #000; }
/* 생일축하 이름/축하문구 입력창(요청) — 위 제목/날짜와 동일한 진한 검정(#000)을 그대로
 * 재사용해 입력 글자와 예시(placeholder) 텍스트 모두 옅은 회색으로 보이지 않게 한다. */
#mv-birthday-name, #mv-birthday-message { color: #000; }
#mv-birthday-name:focus, #mv-birthday-message:focus { color: #000; }
#mv-birthday-name::placeholder, #mv-birthday-message::placeholder { color: #000; opacity: 1; }
.mv-field-inline { flex-direction: row; align-items: center; gap: 0.4rem; margin-bottom: 0; }
.mv-field-inline input[type="range"] { width: 90px; }
.mv-field-inline input[type="text"] { width: 130px; padding: 0.35rem 0.5rem; }
.mv-radio { font-size: 0.82rem; font-weight: 600; color: var(--color-text-main); }
.mv-checkbox { font-size: 0.76rem; color: var(--color-text-main); display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }

.mv-upload-btn { font-size: 0.78rem; font-weight: 500; color: var(--color-primary); background: var(--color-primary-soft); padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }

/* ---------- 우측 미리보기 ---------- */
/* 화면 비율(요청 1번) — aspect-ratio는 js/aspect-ratio.js가 state.aspectRatio에 맞춰 inline으로 지정 */
.mv-preview-frame { position: relative; width: 100%; max-width: 700px; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: var(--shadow-md); margin: 0 auto; }
.mv-preview-frame.is-portrait { width: min(100%, 240px); } /* 9:16은 기존(300px)의 2/3(요청) — 세로가 길어 아래 제어판이 밀려 가려지던 문제도 함께 해소 */
.mv-preview-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
.mv-preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; text-align: center; padding: 1rem; }
.mv-privacy-card { max-width: 92%; box-sizing: border-box; background: #000; border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 0.9rem 1.1rem; text-align: left; color: #fff; }
.mv-privacy-head { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 1rem; }
.mv-privacy-head svg { color: #22c55e; flex: 0 0 auto; }
.mv-privacy-sub { margin-top: 0.5rem; font-size: 0.72rem; color: #fff; opacity: 0.8; }
.mv-privacy-card p { margin: 0.5rem 0; font-size: 0.82rem; line-height: 1.6; color: #fff; }
.mv-privacy-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.72rem; color: #fff; }
.mv-privacy-tags span::before { content: '● '; color: #22c55e; font-size: 0.6rem; }
.mv-privacy-hint { font-size: 0.72rem; color: #fff; opacity: 0.6; }
.mv-preview-layer { position: absolute; inset: 0; opacity: 0; }
.mv-preview-layer.is-active { z-index: 1; }
.mv-preview-media { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.mv-preview-intro-card { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; gap: 0.9rem; }
/* Intro 영상 위에도 검정화면과 같은 제목/날짜(요청 23-4번) */
.mv-preview-intro-title-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; text-align: center; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.mv-preview-light-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 생일축하(요청) — 사진/영상 없는 독립 클립이라 캔버스 자체가 전체 화면을 채운다. */
.mv-preview-birthday-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 3차 신규 gl-transitions 포팅 bakedFx 전용 오버레이(요청) — 텍스트(z-index:5)보다는
   아래, 일반 레이어(is-active 시 z-index:1)보다는 위에 그려져야 한다. */
.mv-preview-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; display: none; }
.mv-preview-photofx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
/* 원인 수정 — 2차 사진효과의 배경(액자/부스 등)을 img "뒤"에 그리기 위한 캔버스.
   fx 캔버스와 동일한 스타일, DOM 순서만 img보다 앞이라 자연히 뒤에 깔린다. */
.mv-preview-photobg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
/* 프리미엄 카드(요청 개편) — 독립 클립 자기 레이어 안에서 전체를 그리는 캔버스 */
.mv-preview-premium-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 요청 9번 — 흰 글자 가독성 개선: 검정 1px 외곽선을 공통 적용(위치/애니메이션은 그대로). */
.mv-preview-intro-title, .mv-preview-intro-date { position: relative; z-index: 1; -webkit-text-stroke: 0; text-shadow: none; }
.mv-preview-intro-title, .mv-preview-intro-date { font-family: 'IBM Plex Sans KR', 'Malgun Gothic', sans-serif; color: #fff; }
/* 제목 — 크기 유지, 넉넉한 자간. 날짜 — 한 단계 작고 가벼운(400) 보조 정보, 넓은 자간.
 * 등장(페이드+미세 상승+약한 scale, 자간 수렴)은 preview.js updateIntroTitleAnim()이 재생 시간에 맞춰 준다. */
.mv-preview-intro-title { font-size: 3.6cqw; font-weight: 600; letter-spacing: 0.06em; }
.mv-preview-intro-date { font-size: 2.88cqw; font-weight: 400; letter-spacing: 0.08em; opacity: 0.78; }
.mv-preview-text-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.mv-preview-ending { position: absolute; inset: 0; background: #000; overflow: hidden; display: flex; justify-content: center; }
.mv-preview-ending-scroll { position: absolute; top: 0; width: 70%; text-align: center; color: #fff; font-size: calc(2.7cqw * var(--fs, 1) * var(--es, 1) * var(--fit, 1)); line-height: 1.7; white-space: pre; }

.mv-preview-controls { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.mv-time-label { font-size: 0.74rem; color: var(--color-text-muted); margin-left: auto; }

/* ---------- 우측 하위 패널 공통 ---------- */
.mv-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; box-shadow: var(--shadow-sm); }
.mv-panel-title, .mv-item-options-title { font-size: 0.74rem; font-weight: 600; margin: 0 0 0.22rem; color: var(--color-dark); }

/* 접기/펼치기(Light/BGM, 요청) — <details>/<summary>가 접히면 콘텐츠가 레이아웃에서
 * 완전히 빠지므로 빈 공간 없이 아래 내용이 자연스럽게 위로 올라온다(브라우저 기본 동작
 * 그대로 활용, 별도 JS 불필요) — <summary> 자체가 제목 전체를 덮는 클릭 영역이라
 * "제목 영역 전체 클릭"도 이미 만족한다. 펼침 상태(▼)/접힘 상태(▲)를 화살표 글자
 * 자체를 바꿔서 표시한다(요청 — 회전 대신 정확한 방향 문자로). */
.mv-collapse-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.mv-collapse-summary::-webkit-details-marker { display: none; }
.mv-collapse-summary::after { content: '▼'; font-size: 0.7rem; color: var(--color-text-muted); }
.mv-collapse:not([open]) .mv-collapse-summary::after { content: '▲'; }
.mv-collapse:not([open]) { padding-bottom: 0.85rem; }

/* 동영상 컷팅 */
/* 미리보기 영상 + 오른쪽 세로 볼륨(요청) — 영상 자체는 세로 폭(max-height)만 120%로
 * 키우고(140px→168px), 가로는 aspect-ratio를 그대로 유지하는 기존 replaced-element
 * 크기 계산(width:100%+max-height, height 미지정)을 그대로 재사용한다 — 찌그러짐 없음. */
/* 컷팅 전용 미리보기를 없애면서(요청) 이 영역엔 볼륨 하나만 남아, 세로형 슬라이더가
 * 불필요하게 세로 공간을 많이 차지했다 — 가로형으로 바꿔 한 줄로 압축한다(기능/값은
 * 동일, 방향만 변경). */
.mv-trim-row-all { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; flex-wrap: nowrap; margin-top: 0.4rem; }
.mv-trim-row-all[hidden] { display: none; }
.mv-trim-time-edit { cursor: text; text-decoration: underline dotted; font-weight: 500; }
.mv-trim-time-edit { white-space: nowrap; }
.mv-trim-time-edit:focus { outline: 1px solid currentColor; text-decoration: none; }
.mv-trim-row-all { flex-wrap: wrap; }
/* 유튜브식 플레이어 바 — 미리보기 바로 아래 한 줄 전체 폭 */
.mv-player-bar { flex: 0 0 100%; display: flex; align-items: center; gap: 0.5rem; }
.mv-pb-btn { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2rem 0.3rem; color: var(--color-text-main); }
.mv-pb-time { font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-main); }
.mv-pb-track { position: relative; flex: 1; height: 8px; background: rgba(128,128,128,0.35); border-radius: 4px; cursor: pointer; touch-action: none; }
.mv-pb-range { position: absolute; top: 0; bottom: 0; background: rgba(255,200,0,0.45); border-radius: 4px; }
.mv-pb-fill { position: absolute; top: 0; bottom: 0; left: 0; background: #e53935; border-radius: 4px; pointer-events: none; }
.mv-pb-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #e53935; border-radius: 50%; pointer-events: none; }
.mv-pb-tip { position: absolute; bottom: 16px; transform: translateX(-50%); background: #000; color: #fff; border-radius: 4px; padding: 3px; text-align: center; font-size: 0.7rem; pointer-events: none; z-index: 5; white-space: nowrap; }
.mv-pb-tip[hidden] { display: none; }
.mv-pb-tip canvas { display: block; width: 160px; background: #111; }
.mv-trim-volume-vertical { flex: 1 1 110px; display: flex; align-items: center; gap: 0.4rem; min-width: 90px; }
.mv-trim-volume-label { font-size: 0.72rem; font-weight: 500; color: var(--color-text-main); white-space: nowrap; }
.mv-trim-volume-slider { flex: 1; width: 100%; height: 20px; }
.mv-trim-row-all .mv-field-inline { flex: 1 1 auto; white-space: nowrap; font-size: 0.74rem; margin-bottom: 0; }
.mv-trim-row-all .mv-field-inline input[type="range"] { width: 100%; flex: 1; }
.mv-trim-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
/* 종료점 아래 한 줄: 컷팅 구간 미리보기/재생/적용/저장 + 오디오 모드 3버튼 */
.mv-trim-row-all .mv-trim-actions { flex: 1 1 100%; flex-wrap: nowrap; margin-top: 0; }
.mv-trim-row-all .mv-trim-actions .mv-motion-modes { flex-wrap: nowrap; }
.mv-trim-actions .mv-btn { padding: 0.35rem 0.55rem; font-size: 0.74rem; white-space: nowrap; }
.mv-trim-status:empty { display: none; }
.mv-trim-status { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.4rem; min-height: 1em; }

/* 사진 움직임(요청 10번 — 한 줄에 3개씩) */
.mv-motion-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.5rem; }
.mv-motion-mode-btn, .mv-kb-dir-btn { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 0.28rem 0.6rem; font-size: 0.72rem; cursor: pointer; text-align: center; }
.mv-motion-mode-btn.is-active, .mv-kb-dir-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.mv-kb-directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin: 0.5rem 0; }

/* 전환 효과: 즐겨찾기 + 이름 중심의 간결한 버튼 목록, 한 줄에 3개씩(요청 5번), 내부 스크롤 */
/* 화면전환 효과 20종 전체를 스크롤 없이 한 화면에 표시(요청) — 3열 유지, 행 높이만
 * 압축한다(효과 종류/선택 로직은 그대로). */
/* 원인 수정(가로 스크롤) — grid-template-columns가 1fr(=minmax(auto,1fr))이면 트랙이
   내용의 최소 크기(min-content) 밑으로 줄어들지 못해, 카드 안의 별(고정폭+테두리) 때문에
   트랙 전체가 패널 폭을 넘어서고 있었다. minmax(0,1fr)로 바꿔 트랙이 실제로 패널 폭
   안으로 줄어들 수 있게 한다(overflow-x:hidden으로 가리는 방식이 아니라 실제 폭 축소). */
.mv-transition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.16rem; max-height: none; overflow-y: visible; padding-right: 2px; margin-bottom: 0.25rem; }
/* "기타 ▼" 펼침 토글 — PC에서는 숨기고(요청, 기존 그대로 전체 노출), 나머지 효과
   목록은 display:contents로 그리드에 그대로 평탄화되어 PC 레이아웃에 영향 없음. */
.mv-tx-other-toggle { display: none; }
.mv-tx-other-list { display: contents; }
.mv-tx-row { position: relative; display: flex; align-items: center; gap: 0.25rem; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; padding: 0.16rem 18px 0.16rem 0.2rem; cursor: pointer; font-size: 0.62rem; font-weight: 600; color: var(--color-text-main); text-align: left; min-width: 0; transition: border-color 120ms ease, background 120ms ease; }
/* 요청 — "기본자동/랜덤자동" 버튼도 다른 화면전환 효과 버튼과 완전히 동일한 hover를
 * 갖도록(둘 다 다른 20종과 마크업이 이미 같은 .mv-tx-row라, hover 자체가 전체에 빠져
 * 있던 것이 원인이었다 — 이 규칙 하나로 모든 .mv-tx-row 버튼에 동일하게 적용된다). */
.mv-tx-row:hover { border-color: var(--color-border-hover); background: var(--color-primary-soft); }
.mv-tx-row.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.mv-tx-row.is-active:hover { border-color: var(--color-primary); }
/* min-width:0 — flex 아이템은 기본값(auto)이 "내용 전체 폭"이라 overflow:hidden만으로는
   줄어들지 않는다(그래서 카드가 실제로 넘쳤다). 0으로 낮춰야 ellipsis가 실제로 작동한다. */
.mv-tx-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 클립별 화면 전환 적용 대상 표시(요청 24-5번) */
.mv-tx-target-label { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.mv-tx-target-label b { color: var(--color-text-main); }
.mv-tx-reset-btn { border: 1px solid var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.68rem; font-weight: 500; cursor: pointer; }

/* 즐겨찾기 별(요청 15번) — 기존 카드/행 크기를 그대로 두고 작은 배지로 겹쳐 배치 */
.mv-fav-star { position: absolute; top: 50%; left: 0.35rem; transform: translateY(-50%); z-index: 2; width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 0.8rem; color: rgba(15,23,42,0.35); border-radius: 50%; cursor: pointer; user-select: none; }
.mv-fav-star:hover { color: #F59E0B; }
.mv-fav-star.is-fav { color: #F59E0B; }
.mv-light-btn .mv-fav-star { top: 2px; left: auto; right: 2px; transform: none; background: rgba(255,255,255,0.85); }

/* 즐겨찾기 별 통일(요청 — BGM/화면 전환 효과/프리미엄 효과 모두 동일한 위치·크기·색상).
 * 프리미엄 효과는 화면 전환 효과와 같은 .mv-tx-row 마크업을 그대로 재사용하므로 이
 * 규칙 하나로 세 영역 모두에 적용된다. 카드 오른쪽 세로 중앙 고정, 기본은 흰 빈 별(☆),
 * 즐겨찾기 상태는 노란 채운 별(★). */
.mv-bgm-row .mv-fav-star,
.mv-tx-row .mv-fav-star {
  position: absolute;
  top: 50%;
  left: auto;
  right: 4px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 0.74rem;
  background: none;
  border-radius: 0;
  color: #fff;
}
.mv-bgm-row .mv-fav-star:hover,
.mv-tx-row .mv-fav-star:hover,
.mv-bgm-row .mv-fav-star.is-fav,
.mv-tx-row .mv-fav-star.is-fav {
  color: #F59E0B;
}

/* BEST 참고 배지(요청 2/3/4번 — 공식 순위 아님, 참고용 표시만) */
.mv-best-badge { flex-shrink: 0; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.02em; color: #B45309; background: #FEF3C7; border-radius: 4px; padding: 0.08rem 0.3rem; }

/* 음악: 카테고리 탭 + 곡명 중심 텍스트 목록(요청 3번 — 큰 카드/아이콘 대신 타이트한 한 줄) */
/* BGM 본문(요청 — BGM 때문에 미리보기·컷팅이 밀려나지 않도록, 제목은 항상 보이고
 * 본문만 일정 높이 안에서 자체 스크롤) */
.mv-bgm-body { max-height: none; overflow-y: visible; padding-right: 2px; }
.mv-bgm-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; flex-wrap: nowrap; }
.mv-bgm-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0; }
.mv-bgm-tab { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.66rem; font-weight: 500; cursor: pointer; }
.mv-bgm-tab.is-active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
/* 5x4(카드 20개, 실제 음악만 — "없음" 카드 삭제) 고정 배치. 카드 높이를 고정해 제목
 * 줄 수와 무관하게 그리드가 항상 가지런하다. */
.mv-bgm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; overflow: visible; margin-top: 0.25rem; }
/* 카드 세로 크기를 기존(64px)의 약 2/3로 축소(요청). 재생 버튼이 없어졌으니 오른쪽에는
 * 즐겨찾기 별만큼만 여백을 두면 된다. 화면 전환 효과 카드(.mv-tx-row)와 같은 hover
 * 효과를 그대로 쓴다(요청 3번) — 재생 버튼 hover 노출 효과는 제거. */
.mv-bgm-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-width: 0; height: 43px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; padding: 0.15rem 16px 0.15rem 0.25rem; cursor: pointer; position: relative; text-align: center; transition: border-color 120ms ease, background 120ms ease; }
.mv-bgm-row:hover { border-color: var(--color-border-hover); background: var(--color-primary-soft); }
.mv-bgm-row.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mv-bgm-row.is-selected:hover { border-color: var(--color-primary); }
/* 곡명만 표시(요청 — 저작자명 UI 노출 금지), 최대 2줄까지만 보여주고 그 이상은
 * 말줄임(…) 처리한다. 카드 높이가 고정이라 줄 수와 무관하게 그리드가 무너지지 않는다. */
.mv-bgm-row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-main);
  white-space: normal;
  word-break: break-word;
}
/* BGM 제목 오른쪽 볼륨 컨트롤(요청 2/3번) — 아래쪽에 있던 볼륨 슬라이더를 여기로 이동 */
.mv-bgm-summary-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mv-bgm-volume-inline { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; }
.mv-bgm-mute-btn { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 50%; font-size: 0.68rem; line-height: 1; padding: 0; cursor: pointer; }
.mv-bgm-mute-btn[aria-pressed="true"] { border-color: var(--color-text-muted); opacity: 0.7; }
.mv-bgm-volume-range { width: 72px; height: 4px; cursor: pointer; }

/* 음성 녹음(요청 8번) — 기존 BGM 패널 톤과 어울리는 간단한 컨트롤 한 줄 */
.mv-record-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.mv-subpanel-title-inline { margin: 0; white-space: nowrap; }
.mv-record-status { font-size: 0.74rem; color: var(--color-text-muted); }
.mv-record-status.is-recording { color: #DC2626; font-weight: 500; }
.mv-record-playback { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.mv-record-playback audio { height: 30px; max-width: 220px; }

/* ---------- 동영상별 별도 음성(요청) — 영상/음성 미니 타임라인 + 드래그 이동 ---------- */
.mv-voice-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.mv-voice-info { font-size: 0.76rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mv-voice-timeline { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; }
.mv-voice-timeline-row { display: flex; align-items: center; gap: 0.5rem; }
.mv-voice-timeline-row-label { flex: 0 0 auto; width: 30px; font-size: 0.7rem; font-weight: 500; color: var(--color-text-muted); }
.mv-voice-timeline-track { position: relative; flex: 1; height: 26px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.mv-voice-timeline-track-len { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; color: var(--color-text-muted); }
.mv-voice-timeline-video .mv-voice-timeline-track { background: var(--color-primary-soft); }
.mv-voice-block { position: absolute; top: 2px; bottom: 2px; left: 0; min-width: 6%; background: var(--color-primary); border-radius: 4px; cursor: grab; display: flex; align-items: center; justify-content: center; touch-action: none; }
.mv-voice-block:active { cursor: grabbing; }
.mv-voice-block-label { font-size: 0.62rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; padding: 0 0.2rem; }

/* ---------- 텍스트(요청 3번) ---------- */
.mv-panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.mv-panel-title-row .mv-panel-title { margin: 0; }
.mv-btn-xs { padding: 0.3rem 0.6rem; font-size: 0.72rem; }
.mv-text-empty { color: var(--color-text-muted); font-size: 0.82rem; padding: 0.4rem 0; }
.mv-text-list { display: flex; flex-direction: column; gap: 0.6rem; }
.mv-text-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem; background: var(--color-bg); }
.mv-text-card-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.mv-text-card-row:last-child { margin-bottom: 0; }
.mv-text-content { flex: 1; padding: 0.4rem 0.55rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.82rem; font-family: inherit; resize: vertical; min-height: calc(2.6em / var(--fs, 1)); }
.mv-text-remove { flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(15,23,42,0.08); color: var(--color-text-muted); cursor: pointer; font-size: 0.72rem; }
.mv-text-remove:hover { background: #EF4444; color: #fff; }
.mv-text-card-controls { flex-wrap: wrap; gap: 0.5rem; }
.mv-text-position { padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.76rem; }
.mv-text-size-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; }
.mv-text-size-label input[type="range"] { width: 80px; }
.mv-text-color { width: 30px; height: 26px; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; }

/* 요청 7번 — 텍스트 투명(흰 글자+검정 외곽선)/불투명(자막 배경) 전환 */
.mv-text-mode-row { gap: 0.4rem; margin-top: 0.35rem; }
.mv-text-mode-btn { flex: 1; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 6px; padding: 0.28rem 0.4rem; font-size: 0.68rem; font-weight: 500; color: var(--color-text-main); cursor: pointer; }
.mv-text-mode-btn:hover { border-color: var(--color-border-hover); }
.mv-text-mode-btn.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }

/* 텍스트 효과 10개 — 작은 샘플 자동 반복(요청 3/10번) */
.mv-text-fx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-top: 0.5rem; }
.mv-text-fx-btn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; border: 2px solid var(--color-border); background: var(--color-surface); border-radius: 6px; padding: 0.2rem; cursor: pointer; }
.mv-text-fx-btn.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mv-text-fx-sample { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; border-radius: 4px; background: #0F172A; color: #fff; font-size: 0.78rem; font-weight: 600; overflow: hidden; }
.mv-text-fx-name { font-size: 0.56rem; font-weight: 500; color: var(--color-text-main); }

@keyframes mv-fx-fade { 0%,100% { opacity: 0; } 15%,85% { opacity: 1; } }
@keyframes mv-fx-slide-up { 0%,100% { opacity: 0; transform: translateY(8px); } 15%,85% { opacity: 1; transform: translateY(0); } }
@keyframes mv-fx-slide-left { 0%,100% { opacity: 0; transform: translateX(12px); } 15%,85% { opacity: 1; transform: translateX(0); } }
@keyframes mv-fx-slide-right { 0%,100% { opacity: 0; transform: translateX(-12px); } 15%,85% { opacity: 1; transform: translateX(0); } }
@keyframes mv-fx-zoom { 0%,100% { opacity: 0; transform: scale(0.55); } 15%,85% { opacity: 1; transform: scale(1); } }
@keyframes mv-fx-pop { 0%,100% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.2); } 18%,85% { opacity: 1; transform: scale(1); } }
@keyframes mv-fx-typewriter { 0%,100% { clip-path: inset(0 100% 0 0); } 15%,85% { clip-path: inset(0 0 0 0); } }
@keyframes mv-fx-rise { 0%,100% { opacity: 0; transform: translateY(14px) scale(0.96); } 18%,85% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mv-fx-blur-reveal { 0%,100% { opacity: 0; filter: blur(6px); } 15%,85% { opacity: 1; filter: blur(0); } }
@keyframes mv-fx-cinematic-reveal { 0%,100% { opacity: 1; clip-path: inset(0 100% 0 0); transform: scale(1.04); } 20%,85% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); } }

.mv-text-fx-fade { animation: mv-fx-fade 2.6s ease-in-out infinite; }
.mv-text-fx-slide-up { animation: mv-fx-slide-up 2.6s ease-in-out infinite; }
.mv-text-fx-slide-left { animation: mv-fx-slide-left 2.6s ease-in-out infinite; }
.mv-text-fx-slide-right { animation: mv-fx-slide-right 2.6s ease-in-out infinite; }
.mv-text-fx-zoom { animation: mv-fx-zoom 2.6s ease-in-out infinite; }
.mv-text-fx-pop { animation: mv-fx-pop 2.6s ease-in-out infinite; }
.mv-text-fx-typewriter { animation: mv-fx-typewriter 2.6s steps(8, end) infinite; }
.mv-text-fx-rise { animation: mv-fx-rise 2.6s ease-out infinite; }
.mv-text-fx-blur-reveal { animation: mv-fx-blur-reveal 2.6s ease-in-out infinite; }
.mv-text-fx-cinematic-reveal { animation: mv-fx-cinematic-reveal 2.6s ease-in-out infinite; }

/* ---------- 3) 엔딩 ---------- */
/* 마무리/엔딩 메시지 입력칸을 세로로 한 줄 더 입력할 수 있게 확장(요청 3번) — 가로
 * 폭(width:100%)은 그대로, 높이만 늘려 최소 2줄 정도를 한 번에 볼 수 있게 한다.
 * PC/모바일 공통 적용(모바일은 반응형 구조상 이미 폭 100%라 별도 처리 불필요). */
.mv-ending-textarea { width: 100%; min-height: 76px; height: 76px; resize: vertical; font-family: inherit; font-size: 0.78rem; }

/* ---------- 내보내기 오버레이 ---------- */
.mv-export-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,0.55); display: flex; align-items: center; justify-content: center; }
.mv-export-overlay[hidden] { display: none; }
.mv-export-box { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.75rem 2rem; width: min(380px, 90vw); box-shadow: var(--shadow-md); text-align: center; }
.mv-export-title { font-weight: 600; margin-bottom: 1rem; color: var(--color-dark); }
.mv-progress-track { height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.mv-progress-fill { height: 100%; width: 0%; background: var(--color-primary); transition: width 200ms ease; }
.mv-export-box { position: relative; }
.mv-export-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; border-radius: 50%; }
.mv-export-close:hover { background: rgba(15,23,42,0.08); }
.mv-export-stop { margin-top: 1rem; padding: 0.5rem 1.25rem; cursor: pointer; }
.mv-export-status {margin-top: 0.75rem; font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- 영상 스타일 프리셋(요청) — 말풍선형 칩 5개, 세로 공간 최소화 ---------- */
/* 스타일 5개를 한 줄에(요청 — 큰 카드 대신 작은 버튼) */
.mv-style-row-list { display: flex; gap: 0.2rem; flex-wrap: nowrap; }
.mv-style-chip { display: flex; align-items: center; gap: 0; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 999px; padding: 0.12rem 0.12rem 0.12rem 0.32rem; flex: 0 0 auto; justify-content: center; }
.mv-style-chip.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.mv-style-chip-main { border: none; background: transparent; font-weight: 500; font-size: 0.66rem; padding: 0.22rem 0.05rem; cursor: pointer; color: var(--color-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mv-style-chip.is-active .mv-style-chip-main { color: var(--color-primary); }
.mv-style-chip-info { flex-shrink: 0; width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--color-bg); color: var(--color-text-muted); font-size: 0.58rem; cursor: pointer; line-height: 1; }
.mv-style-chip-info:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* 스타일 메모 팝업 — 내보내기 오버레이와 같은 톤/구조 재사용 */
.mv-style-popup-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,0.55); display: flex; align-items: center; justify-content: center; }
.mv-style-popup-overlay[hidden] { display: none; }
.mv-style-popup-box { background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; width: min(380px, 90vw); box-shadow: var(--shadow-md); }
.mv-style-popup-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--color-dark); }
.mv-style-popup-textarea { width: 100%; min-height: 60px; resize: vertical; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; font-family: inherit; font-size: 0.82rem; margin-bottom: 0.5rem; box-sizing: border-box; }
.mv-style-popup-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }

/* ==========================================================================
   모바일 반응형(요청) — PC 레이아웃(위 전체 규칙)은 그대로 두고, 아래는
   max-width 미디어쿼리 안에서만 적용되는 추가 규칙이다. PC 화면(위 규칙이 적용되는
   기본 상태)은 전혀 바뀌지 않는다. HTML 구조는 손대지 않고, 3열(.mv-editor-left/
   -center/-right)에만 display:contents를 걸어 실제 자식 패널들을 .mv-section-editor의
   flex 자식으로 "평탄화"한 뒤 order로 요청된 세로 순서(①미리보기 ②동영상 제어판
   ③볼륨/시작점/종료점 ④컷팅 구간 ⑤텍스트 ⑥화면전환 ⑦Intro·Light ⑧Intro 영상
   ⑨시작 영상 ⑩마무리·엔딩 ⑪BGM ⑫사진·동영상)을 만든다.
   주의(겹침 버그 수정) — 처음 구현에서는 .mv-center-scroll까지 2단으로 겹쳐
   display:contents를 걸었는데, 실기기(특히 iOS Safari)에서 중첩된 display:contents가
   완전히 평탄화되지 않고 자식이 원래 자리(부모가 차지했어야 할 위치)에 그대로 겹쳐
   그려지는 문제가 있었다 — 이게 "화면 전환 효과가 다른 패널과 겹치는" 원인이었다.
   지금은 display:contents를 1단만 쓰고(.mv-editor-left/-center/-right), 그 안의
   .mv-center-scroll(컷팅+텍스트)은 실제 박스로 남겨 두 항목을 통째로 order 하나만
   지정한다 — 중첩 평탄화가 필요 없어져 실기기에서도 안전하다. */
@media (max-width: 900px) {
  html { height: auto; }
  body {
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    overflow-x: hidden; /* 가로 스크롤 절대 금지(요청) */
  }

  .mv-topbar { position: static; }
  /* 요청 — 모바일 상단 메뉴를 정확히 2줄로 고정한다: 1줄(브랜드+16:9/9:16), 2줄(새로
     만들기~영상 만들기). 가로 스크롤 대신 flex-wrap으로 자연스럽게 둘째 줄로 내려가되,
     .mv-topbar-break(폭 100%짜리 빈 아이템)가 항상 그 지점에서 강제로 줄을 바꿔 화면
     폭에 따라 줄 수가 들쭉날쭉해지지 않게 한다. */
  .mv-topbar-inner {
    max-width: 100%;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    gap: 0.35rem;
  }
  .mv-topbar-left, .mv-topbar-right { display: contents; }
  .mv-topbar-break { display: block; flex-basis: 100%; height: 0; }
  /* 요청 "정확히 2줄" 구성에는 전체 초기화가 포함되지 않아, 모바일에서만 숨긴다
     (버튼/기능 삭제 아님 — PC에는 그대로 남아 있다). */
  #mv-full-reset-btn { display: none; }
  .mv-brand { font-size: 1rem; flex: 0 0 auto; }
  #mv-new-project-btn { margin-left: 0; }
  .mv-ratio-toggle, .mv-btn { flex: 0 0 auto; }
  .mv-btn { padding: 0.5rem 0.65rem; font-size: 0.8rem; } /* 터치하기 편한 크기는 유지하되 두 줄에 맞게 살짝 축소 */

  .mv-layout { max-width: 100%; padding: 0.5rem 0.6rem 0.8rem; }

  /* 페이지 세로 스크롤은 허용, 가로 스크롤은 금지(요청 8번) */
  .mv-layout, .mv-section, .mv-media-dock { width: 100%; max-width: 100%; }

  /* 원인 수정(요청 — "모바일 고정 순서") — 사진/동영상(.mv-media-dock)이 .mv-section-editor
     밖(.mv-layout의 형제)에 있어, .mv-section-editor가 그 자체로 별도 flex 컨테이너인 한
     그 안의 개별 패널들과 order로 섞일 수 없었다(별도 순서 그룹). .mv-section-editor도
     .mv-editor-left/center/right와 마찬가지로 display:contents로 평탄화해, 안의 모든
     패널이 .mv-layout 하나의 flex 순서(.mv-media-dock 포함)에서 order로 자유롭게
     섞이도록 한다 — DOM 구조/PC 레이아웃(위 데스크톱 규칙은 그대로)은 전혀 바꾸지 않는다. */
  .mv-section-editor {
    display: contents;
  }
  .mv-editor-left, .mv-editor-center, .mv-editor-right {
    display: contents; /* DOM은 그대로, 레이아웃 배치만 평탄화(중첩 금지) */
  }

  /* .mv-center-scroll은 실제 박스로 유지 — PC용 내부 스크롤/축소 속성만 모바일에서
     해제해서 내용 높이만큼 자연스럽게 늘어나게 한다(요청 3/5번, 겹침 방지 핵심).
     안에는 텍스트 → (JS가 옮겨 넣는) 볼륨/시작점/종료점 → 컷팅 순서(요청 모바일 고정
     순서 3→4)로 내부 order를 따로 둔다. */
  .mv-center-scroll {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    overflow: visible;
    gap: 0.5rem;
    order: 2; /* 미리보기 바로 다음(요청 순서 2) */
  }
  .mv-center-scroll > .mv-panel { order: 1; } /* 텍스트 */
  #mv-trim-row-all { order: 2; } /* 볼륨/시작점/종료점 — JS가 모바일에서만 여기로 옮긴다 */
  #mv-video-trim { order: 3; margin-top: 0; } /* 컷팅(나머지 버튼/상태), PC 전용 -1px 겹침 보정 해제 */

  /* 미리보기 + 동영상 제어판(볼륨/시작점/종료점은 JS가 모바일에서 .mv-center-scroll로
     옮겨 텍스트 다음에 오도록 한다 — 요청 "모바일 고정 순서" 2번(미리보기) 3번(텍스트)
     4번(볼륨/시작점/종료점) 그대로 반영). */
  .mv-preview-sticky {
    order: 1;
    /* 요청 — "미리보기 화면 상단 고정"을 모바일에도 적용한다(기존에는 화면을 계속
       가리지 않도록 여기서 고정을 해제했었다). 모바일 상단바(.mv-topbar)는 이 화면
       크기에서 position:static이라 스크롤하면 같이 밀려 올라가므로, top:0으로 두면
       미리보기가 뷰포트 맨 위에 붙어 계속 보이고 그 아래 설정 패널들만 스크롤된다. */
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.55rem 0.55rem 0.5rem;
  }
  /* 요청 "모바일 고정 순서" — 사진/동영상 → 인트로 → 시작Light → 프리미엄 → 화면전환 →
     사진효과 → 마무리 → BGM → 스타일. .mv-section-editor를 display:contents로 평탄화해
     .mv-media-dock도 이제 같은 순서 그룹에 속하므로 order로 정확히 배치할 수 있다. */
  .mv-media-dock { order: 3; } /* 사진 · 동영상 */
  .mv-editor-left > .mv-collapse:nth-child(1) { order: 4; } /* 인트로 · 시작 · Light */
  .mv-editor-right > .mv-panel:nth-child(1) { order: 5; } /* 프리미엄 효과 */
  .mv-editor-right > .mv-panel:nth-child(2) { order: 6; } /* 화면전환 효과 */
  .mv-editor-right > .mv-panel:nth-child(3) { order: 7; } /* 사진 효과 */
  #mv-item-options { order: 8; } /* 이 사진의 움직임(선택된 클립 옵션) */
  .mv-section-ending { order: 9; } /* 마무리 · 엔딩 메시지 */
  .mv-bgm-panel { order: 10; } /* BGM */
  .mv-voice-record-panel { order: 11; } /* 음성 녹음 */

  .mv-editor-left > *,
  .mv-center-scroll > * { flex: 0 0 auto; min-height: auto; height: auto; } /* PC 전용 바닥선 늘리기/축소 전부 해제 — 내용 높이만큼만 차지 */

  /* ⑫ 사진 · 동영상 작업 영역 — PC 전용 flex:1.5 1 0 + min-height:0도 section-editor와
     같은 이유로 해제(콘텐츠 높이만큼만 차지, 겹침 방지). */
  .mv-media-dock { padding: 0.5rem 0.6rem; flex: 0 0 auto; min-height: auto; }

  /* ---- 미리보기 ---- */
  .mv-preview-frame { max-width: 100%; }
  .mv-preview-controls { gap: 0.5rem; }
  .mv-preview-controls .mv-btn { padding: 0.55rem 0.7rem; font-size: 0.8rem; }
  .mv-time-label { width: 100%; margin-left: 0; text-align: right; }

  /* ---- 볼륨/시작점/종료점: 터치하기 편하게(요청 4번) ---- */
  .mv-trim-row-all { flex-wrap: wrap; gap: 0.7rem 1rem; }
  .mv-trim-volume-vertical { flex: 1 1 100%; }
  .mv-trim-row-all .mv-field-inline { flex: 1 1 100%; }

  /* range 슬라이더: 손가락으로 조작하기 편한 두께(요청 7번) */
  input[type="range"] { height: 30px; }
  .mv-field-inline input[type="range"] { width: auto; flex: 1 1 auto; }
  .mv-trim-volume-slider { height: 30px; }

  /* 텍스트 입력창도 좁은 화면에서 폭 확보 */
  .mv-field-inline input[type="text"] { width: auto; flex: 1 1 120px; }

  /* ---- 인트로 · Light · Intro 영상: 카드 수 축소(터치 크기 확보, 요청 7번) ---- */
  .mv-intro-grid { grid-template-columns: repeat(5, 1fr); }
  .mv-light-grid { grid-template-columns: repeat(3, 1fr); max-height: none; }
  .mv-intro-mode { gap: 0.8rem; }

  /* ---- 프리미엄/화면전환/사진효과 카드: 모바일은 1줄 3개, 카드 폭 균등, 2줄 정보
     구조(요청 "모바일 카드") — 이름이 길어 한 줄에 안 들어가면 두 번째 줄로 자연스럽게
     감싸지도록(말줄임 대신 줄바꿈) 세로 스택형으로 바꾼다. */
  .mv-transition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-tx-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.05rem;
    padding: 0.4rem 18px 0.4rem 0.35rem;
    font-size: 0.68rem;
    min-width: 0;
    min-height: 2.6em; /* 2줄 정보 구조 — 카드 높이를 균일하게 */
  }
  .mv-tx-row-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }

  /* ---- 화면 전환 효과: 스마트폰은 기본자동/랜덤자동만 노출, 나머지는 "기타 ▼"로
     펼침/접힘(요청) ---- */
  .mv-tx-other-toggle {
    display: block;
    grid-column: 1 / -1;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: 6px;
    padding: 0.5rem 0.5rem;
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
  }
  .mv-tx-other-list { display: none; grid-column: 1 / -1; }
  .mv-tx-other-list.is-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem; }

  /* ---- 사진 움직임 ---- */
  .mv-motion-mode-btn, .mv-kb-dir-btn { padding: 0.5rem 0.6rem; font-size: 0.78rem; }

  /* ---- 텍스트 효과 ---- */
  .mv-text-fx-grid { grid-template-columns: repeat(3, 1fr); }
  .mv-text-fx-sample { height: 34px; }
  .mv-text-card-controls { gap: 0.6rem; }

  /* ---- BGM: 모바일 폭에서도 가로 스크롤 없이 5열 그대로 유지(요청) ---- */
  .mv-bgm-body { max-height: none; overflow-y: visible; }
  .mv-bgm-grid { grid-template-columns: repeat(5, 1fr); overflow-x: hidden; gap: 0.2rem; }
  .mv-bgm-row { height: 41px; padding: 0.12rem 16px 0.12rem 0.2rem; }
  .mv-bgm-row-title { font-size: 0.56rem; }
  .mv-bgm-toolbar { flex-wrap: wrap; }

  /* ---- 음성 녹음 / 업로드 버튼 ---- */
  .mv-upload-btn, .mv-record-controls .mv-btn { padding: 0.55rem 0.8rem; }

  /* ---- 사진 · 동영상 업로드 영역 ---- */
  .mv-left-header { flex-wrap: wrap; }
  .mv-dropzone { flex: 1 1 100%; white-space: normal; padding: 0.8rem 1rem; }
  .mv-photo-duration-control { flex: 1 1 100%; }

  .mv-media-dock #mv-media-list, .mv-media-list { max-height: none; flex: 0 0 auto; overflow-y: visible; overflow-x: hidden; }
  .mv-media-remove { width: 24px; height: 24px; font-size: 0.85rem; }

  /* ---- 모바일 카드 5개/1줄(요청 2번) ----
     PC는 JS(media-list.js ROW_SIZE=15)가 15개씩 .mv-media-row로 묶어 가로 한 줄
     + 화살표로 그린다 — 이 JS 로직은 전혀 건드리지 않는다. 모바일에서는 그 묶음
     안에서 화살표(연결 표시용 장식 요소, 순서 변경 기능과는 무관)만 숨기고
     .mv-media-row를 flex 가로 한 줄 대신 5열 grid로 바꿔, 같은 15개 묶음이 자동으로
     5개씩 줄바꿈되게 한다 — ROW_SIZE를 5로 바꾸지 않고도(PC 로직 무변경) "정확히
     5개/줄"을 만드는 CSS만으로 충분한 방법. 카드 폭은 grid 칸(1fr)에 맞춰 자동
     계산되어 화면 폭이 달라져도 5개가 항상 균등 배치된다. */
  .mv-media-arrow { display: none; }
  .mv-media-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
  }
  .mv-media-dock .mv-media-card, .mv-media-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex-basis: auto;
  }
  /* Split로 나뉜 구간 묶음은 카드 여러 장이 안에 나란히 들어가므로 grid 한 칸이 아닌
     전체 폭을 쓰고, 넘치면 자체적으로 줄바꿈한다(요청 — 5개/줄은 일반 카드 기준,
     Split 묶음 기능 자체는 그대로 유지). */
  .mv-split-group { grid-column: 1 / -1; flex-wrap: wrap; }
  .mv-split-group .mv-media-card { width: 78px; height: 78px; flex-basis: 78px; aspect-ratio: auto; }

  /* ---- 모바일 터치 순서 변경(요청, media-list.js pointerdown/move/up와 짝) ----
     카드에서 시작하는 터치는 브라우저 기본 스크롤/길게누르기 메뉴/이미지 드래그를
     막고 JS의 길게누르기-드래그 로직이 전담하도록 한다(요청 3번 "touch-action 등
     드래그를 막는 부분 확인"). 카드 밖(줄 간격/화살표 등)에서는 기본 동작 그대로라
     페이지 세로 스크롤은 여전히 가능하다. */
  .mv-media-card[data-id] {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .mv-media-card[data-id] .mv-media-thumb { -webkit-user-drag: none; }

  /* 손가락으로 옮기는 중인 카드를 손끝 위에 명확하게 띄워 보여주는 고스트
     (요청 2번 "이동 중인 카드가 명확하게 표시") — 원본 카드는 기존 .is-dragging
     클래스(데스크톱과 공유)로 흐리게 남고, 이 고스트가 실제 이동 위치를 보여준다. */
  .mv-media-touch-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    opacity: 0.95;
    box-shadow: var(--shadow-md);
    transform: scale(1.08);
    transition: none;
  }

  /* ---- 스타일 칩 ---- */
  .mv-style-row-list { flex-wrap: wrap; }
  .mv-style-chip-main { font-size: 0.76rem; padding: 0.4rem 0.18rem; }
  .mv-style-chip-info { width: 19px; height: 19px; font-size: 0.7rem; }
}

@media (max-width: 480px) {
  .mv-brand-text { font-size: 0.95rem; }
  .mv-btn { padding: 0.5rem 0.65rem; font-size: 0.78rem; }
  .mv-intro-grid { grid-template-columns: repeat(5, 1fr); }
  /* 요청 — 시작 Light 효과는 화면 폭과 무관하게 항상 3개(위 900px 규칙과 동일 유지),
     여기서 2개로 다시 줄이던 규칙을 제거한다. */
  .mv-transition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-tx-other-list.is-open { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-tx-row { font-size: 0.62rem; padding: 0.32rem 18px 0.32rem 0.28rem; }
  .mv-text-fx-grid { grid-template-columns: repeat(2, 1fr); }
  .mv-bgm-grid { grid-template-columns: repeat(5, 1fr); }
  .mv-intro-black-fields { flex-direction: column; align-items: stretch; }
  .mv-intro-black-fields .mv-field-inline { flex-wrap: wrap; }
  .mv-intro-black-fields input[type="text"] { width: 100%; }
}

/* ==========================================================================
   PC 디자인 정리(요청 — 전문 편집 툴처럼): 선을 없애고 "영역 구분이 꼭 필요한 곳"만 블럭으로 둔다.
   - 모든 가로 여백/정렬선을 --mv-g 하나로 통일 → 안내 줄·상단바·본문·하단이 같은 좌우 끝에 맞는다.
   - 바깥 큰 박스/상단바/안내 줄의 테두리·그림자 제거(중첩된 선이 부딪히던 원인).
   - 패널은 테두리 대신 배경 톤 차이(블럭)로만 구분한다. 모바일(900px 이하)은 기존 그대로.
   ========================================================================== */
@media (min-width: 901px) {
  :root { --mv-g: 16px; --mv-gap: 12px; }

  .mv-seo-intro, .mv-topbar-inner, .mv-layout { max-width: 1520px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }

  /* 안내 줄: 배경/선 없이 작고 차분한 한 줄 */
  .mv-seo-intro { background: transparent; border: 0; padding: 0.45rem var(--mv-g) 0; font-size: 0.74rem; }
  .mv-seo-intro summary { font-weight: 600; color: var(--color-text-muted); }
  .mv-seo-intro summary:hover { color: var(--color-text-main); }

  /* 상단바: 선/배경 없이 본문과 한 덩어리 */
  .mv-topbar { background: transparent; border: 0; box-shadow: none; }
  .mv-topbar-inner { padding: 0.55rem var(--mv-g) 0.65rem; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--mv-gap); }

  /* 본문: 바깥 큰 박스 제거, 3열이 같은 좌우 끝에서 시작/끝남 */
  .mv-layout { padding: 0 var(--mv-g) var(--mv-g); gap: var(--mv-gap); }
  .mv-section { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .mv-section-editor { padding: 0; gap: var(--mv-gap); }
  .mv-editor-left, .mv-editor-right { gap: var(--mv-gap); }

  /* 블럭(패널)만 배경 톤으로 구분 — 선/그림자 없음 */
  .mv-panel, .mv-preview-sticky, .mv-media-dock { border: 0; box-shadow: none; border-radius: 12px; }
  .mv-panel { padding: 0.6rem 0.75rem; }
  .mv-media-dock { padding: 0.6rem 0.75rem; }
  .mv-preview-sticky { padding: 0.7rem 0.75rem 0.5rem; }
  #mv-video-trim { margin-top: var(--mv-gap); border-radius: 12px; }

  /* 스크롤바는 얇고 조용하게 — 열 끝선을 밀어내지 않도록 */
  .mv-editor-left, .mv-editor-right, .mv-center-scroll, .mv-media-dock, .mv-seo-intro-body { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.35) transparent; }
}
@media (min-width: 901px) {
  /* 열 안의 <section class="mv-section">(마무리·엔딩 메시지 등)은 블럭으로 */
  .mv-editor-left > .mv-section, .mv-editor-right > .mv-section, .mv-center-scroll > .mv-section { background: var(--color-surface); border-radius: 12px; padding: 0.6rem 0.75rem; }
}

/* 안내 줄 제거(요청) — 화면에서는 완전히 빼고(마크업은 그대로 둠), 픽스컴 동영상 편집기 줄이 맨 위로 올라온다 */
.mv-seo-intro { display: none; }

/* 생일축하/사진 드로잉 체크박스를 한 줄로(요청) */
.mv-intro-toggles { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mv-intro-toggles .mv-checkbox { margin-top: 0.3rem; white-space: nowrap; }

/* 스타일 패널(요청): "스타일  [스타일 1][스타일 2]…" 한 줄 — 제목을 왼쪽으로 띄우고 칩이 같은 줄을 나눠 쓴다 */
@media (min-width: 901px) {
  .mv-editor-left > .mv-collapse:first-child { display: block; }
  .mv-editor-left > .mv-collapse:first-child > summary { float: left; margin: 0.15rem 0.6rem 0 0; }
  .mv-editor-left > .mv-collapse:first-child > summary::after { display: none; }
  .mv-editor-left > .mv-collapse:first-child::after { content: ''; display: block; clear: both; }
  .mv-editor-left > .mv-collapse:first-child #mv-style-row { overflow: hidden; gap: 0.15rem; }
  .mv-editor-left > .mv-collapse:first-child .mv-style-chip { flex: 1 1 0; min-width: 0; padding-left: 0.2rem; }
  .mv-editor-left > .mv-collapse:first-child .mv-style-chip-main { font-size: 0.64rem; flex: 1 1 auto; min-width: 0; }
}
/* 마무리 · 엔딩 메시지 제목 한 단계 작게(요청) */
.mv-section-ending .mv-section-title { font-size: 0.78rem; }

/* 9:16 등으로 중앙 열이 길어져도 아래 컷팅 제어판이 가려지지 않게(요청) — PC만:
 * 하단 사진/동영상 영역은 필요한 높이(약 190px)만 쓰고 나머지는 모두 편집 영역에 준다.
 * 볼륨/시작점/종료점은 한 줄로 합쳐 세로 공간을 줄인다. */
@media (min-width: 901px) {
  .mv-section-editor { flex: 1 1 0; }
  .mv-media-dock { flex: 0 1 190px; }
  .mv-trim-row-all .mv-trim-volume-vertical { flex: 1 1 0; min-width: 0; }
  .mv-trim-row-all .mv-field-inline { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 901px) {
  .mv-media-dock { flex: 0 1 165px; }
  .mv-editor-left > .mv-collapse:first-child > summary { margin-right: 0.4rem; }
  .mv-editor-left > .mv-collapse:first-child .mv-style-chip { border-width: 1px; padding-right: 0.1rem; }
  .mv-editor-left > .mv-collapse:first-child .mv-style-chip-main { font-size: 0.6rem; }
}

/* 9:16(요청): 좌측 영상 / 우측 제어(선택 위치부터·전체 미리보기·재생바·볼륨·시작점·종료점) — PC만 */
@media (min-width: 901px) {
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 0.9rem;
    align-content: start;
    align-items: start;
  }
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-preview-frame { grid-column: 1; grid-row: 1 / span 3; width: 240px; margin: 0; }
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-preview-controls { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-trim-row-all { grid-column: 2; grid-row: 2; margin-top: 0.6rem; }
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-trim-row-all .mv-trim-volume-vertical,
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-trim-row-all .mv-field-inline { flex: 1 1 100%; }
  /* 사진/동영상: 카드 2줄은 프레임이 보이도록 높이 확보(요청) */
  .mv-media-dock { flex: 0 1 235px; }
}

@media (min-width: 901px) {
  /* 9:16에서 영상 오른쪽으로 올라온 컷팅 패널 — 바깥 블럭과 겹쳐 보이지 않게 배경/여백 없이 */
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) > #mv-video-trim { grid-column: 2; grid-row: 3; margin-top: 0.5rem; padding: 0; background: transparent; border-radius: 0; }
}

/* 음성 불러오기(왼쪽) + 영상/음성 타임라인(오른쪽)을 한 줄로(요청 — 공간 절약) */
.mv-voice-row { display: flex; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.mv-voice-row .mv-voice-toolbar { margin-bottom: 0; flex: 0 0 auto; }
.mv-voice-row .mv-voice-timeline { flex: 1 1 200px; min-width: 0; margin-bottom: 0; }

/* 마무리 · 엔딩 메시지: 입력칸이 박스 끝까지 채우도록(요청) */
.mv-section-ending { display: flex; flex-direction: column; }
.mv-section-ending .mv-ending-textarea { flex: 1 1 auto; height: auto; min-height: 60px; resize: none; }

@media (min-width: 901px) {
  /* 텍스트 입력: 박스 안의 박스 제거 — 흰 입력칸만 보이게(요청) */
  .mv-text-card { border: 0; background: transparent; padding: 0; }
}

/* 오디오 모드를 저장·적용 옆으로(요청 — "오디오 모드" 글자 없이 같은 줄에) */
.mv-trim-actions .mv-motion-modes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; flex: 1 1 auto; }
.mv-trim-actions .mv-motion-mode-btn { flex: 1 1 auto; padding: 0.35rem 0.5rem; font-size: 0.74rem; white-space: nowrap; }

@media (min-width: 901px) {
  /* 텍스트 패널: 열 맨 아래 블럭 끝(좌측 마무리·엔딩 메시지와 같은 바닥선)까지 채우고, 입력칸이 남는 높이를 쓴다(요청) */
  .mv-center-scroll > #mv-text-panel { display: flex; flex-direction: column; min-height: 130px; }
  .mv-center-scroll > #mv-text-panel .mv-text-list { flex: 1 1 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card-row:has(.mv-text-content) { flex: 1 1 auto; align-items: stretch; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-content { resize: none; height: auto; }
}

/* 뷰어와 "선택 위치부터" 줄 사이에 여유(요청) — 9:16 좌우 배치에서는 영상 상단과 맞추려고 제외 */
.mv-preview-controls { margin-top: 0.6rem; }
@media (min-width: 901px) {
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) .mv-preview-controls { margin-top: 0; }
}

/* 마무리·엔딩 메시지 입력칸 모서리 둥글게(요청) */
.mv-ending-textarea { border-radius: 10px; padding: 0.5rem 0.7rem; }
@media (min-width: 901px) {
  /* 오디오 모드 버튼(요청): 선택 안 됨=흰 글자, 선택됨=파란 글자 */
  .mv-trim-actions .mv-motion-mode-btn { color: #fff; }
  .mv-trim-actions .mv-motion-mode-btn.is-active { color: #3b82f6; }
}

@media (min-width: 901px) {
  /* 9:16에서 동영상을 선택하지 않았을 때(볼륨/컷팅 패널 없음) — 선택 위치부터·전체 미리보기·일시정지가 영상 세로 기준 중앙에 */
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait):has(> #mv-trim-row-all[hidden]) .mv-preview-controls { grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}

/* 자막 입력 시 레이아웃 깨짐 수정(요청) — 자막 카드(위치/크기/색/효과 줄)가 남는 높이보다 클 때
 * 위 규칙의 min-height:0 때문에 카드가 내용보다 작게 줄어들어 줄들이 서로 겹쳤다.
 * 패널·목록·카드는 내용 높이 아래로 줄지 않게(flex-shrink 0) 하고, 남는 높이가 있으면 입력칸이 늘어나며,
 * 모자라면 중앙 열 안에서 스크롤한다. */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel { flex: 1 0 auto; min-height: 130px; }
  .mv-center-scroll > #mv-text-panel .mv-text-list { flex: 1 0 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card { flex: 1 0 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card-row:has(.mv-text-content) { flex: 1 0 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-content { min-height: calc(4.2em / var(--fs, 1)); }
}

/* 전체 타임라인 음성 위치 바(요청) */
.mv-voice-tl { margin-top: 0.6rem; --lw: 58px; }
.mv-voice-tl[hidden] { display: none; }
.mv-vtl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; margin-bottom: 0.3rem; color: var(--color-text-muted); }
.mv-vtl-title { font-weight: 500; color: var(--color-text-main); }
.mv-vtl-time { font-variant-numeric: tabular-nums; }
.mv-vtl-body { position: relative; display: flex; flex-direction: column; gap: 0.3rem; }
.mv-vtl-row { display: flex; align-items: center; gap: 0.5rem; }
.mv-vtl-label { flex: 0 0 calc(var(--lw) - 0.5rem); font-size: 0.66rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-vtl-track { position: relative; overflow: hidden; flex: 1; height: 24px; border-radius: 6px; background: rgba(148,163,184,0.16); touch-action: none; cursor: pointer; }
.mv-vtl-track-base { height: 14px; overflow: hidden; }
.mv-vtl-seg { position: absolute; top: 0; bottom: 0; background: rgba(148,163,184,0.28); }
.mv-vtl-seg.is-alt { background: rgba(148,163,184,0.14); }
.mv-vtl-block { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; cursor: grab; display: flex; align-items: center; overflow: hidden; touch-action: none; min-width: 6px; }
.mv-vtl-block:active { cursor: grabbing; }
.mv-vtl-block-rec { background: #ef4444; }
.mv-vtl-block-voice { background: #3b82f6; }
.mv-vtl-block-label { font-size: 0.62rem; color: #fff; padding: 0 0.35rem; white-space: nowrap; pointer-events: none; }
.mv-vtl-ph { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #facc15; pointer-events: none; left: calc(var(--lw) + (100% - var(--lw)) * var(--p, 0)); border-radius: 1px; }
@media (min-width: 901px) {
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) > .mv-voice-tl { grid-column: 1 / -1; grid-row: 4; }
}

/* 자막 패널: 왼쪽 3/5 = 글자 입력, 오른쪽 2/5 = 글자를 입력하면 나타나는 설정(위치·크기·색·투명/불투명·효과)(요청) */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { display: grid; grid-template-columns: 3fr 2fr; gap: 0.7rem; align-items: stretch; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-column: 1; margin-bottom: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-style-area { grid-column: 2; min-width: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area .mv-text-card-controls { margin-bottom: 0.4rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area .mv-text-size-label input[type="range"] { width: 64px; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area .mv-text-fx-grid { grid-template-columns: repeat(3, 1fr); }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area .mv-text-mode-btn { padding: 0.28rem 0.2rem; font-size: 0.64rem; }
}

/* 글자색 기본 3색 스와치(요청) */
.mv-text-colors { display: inline-flex; gap: 0.35rem; align-items: center; }
.mv-text-swatch { min-width: 30px; height: 26px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.25); background: #64748b; cursor: pointer; padding: 0 0.3rem; font-size: 0.9rem; font-weight: 600; line-height: 1;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
.mv-text-swatch.is-black { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 3px #fff; }
.mv-text-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--color-primary); }
@media (min-width: 901px) {
  /* 글자 입력칸은 스크롤해도 고정(요청) — 오른쪽 설정 목록만 스크롤된다 */
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { position: sticky; top: 0; align-self: start; height: 190px; max-height: 100%; }
}

/* 자막 패널 재배치(요청): 위 = 위치·크기·색·투명/불투명 한 줄씩 → 아래 = 왼쪽 자막 입력(2줄 높이) + 오른쪽 효과 전체를 한꺼번에 */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: auto auto auto; gap: 0.5rem 0.7rem; align-items: start; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area { display: contents; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area[hidden] { display: none; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-card-controls { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-mode-row { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-column: 1; grid-row: 3; position: static; height: auto; max-height: none; align-self: start; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-content { height: calc(3.6em / var(--fs, 1)); min-height: 0; resize: none; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-fx-grid { grid-column: 2; grid-row: 3; margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.2rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-btn { padding: 0.15rem 0.1rem; gap: 0.1rem; border-width: 1px; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-name { font-size: 0.54rem; line-height: 1.1; text-align: center; word-break: keep-all; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-btn .mv-text-fx-sample { font-size: 0.8rem; }
  .mv-center-scroll > #mv-text-panel { flex: 1 0 auto; }
}

/* 자막 패널 균형 배열(요청): 왼쪽 = 자막 박스 → 투명/불투명 → 위치·크기 → 글자색 4개 / 오른쪽 = 효과 4·4·2 */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-column: 1; grid-row: 1; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-mode-row { grid-column: 1; grid-row: 2; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-card-controls { grid-column: 1; grid-row: 3; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-colors-row { grid-column: 1; grid-row: 4; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-fx-grid {
    grid-column: 2; grid-row: 1 / span 4;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; align-content: flex-start;
  }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-grid .mv-text-fx-btn { flex: 0 0 calc(25% - 0.19rem); }
}

/* 자막 패널 재배열(요청): 효과 5×2(한 단계 더 작게), 왼쪽은 설정이 위·자막 박스가 맨 아래(왼쪽 마무리·엔딩 메시지와 같은 바닥선) */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { grid-template-rows: auto auto auto minmax(3.6em, 1fr); align-content: stretch; align-items: start; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-mode-row { grid-row: 1; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-card-controls { grid-row: 2; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-colors-row { grid-row: 3; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-row: 4; align-self: stretch; align-items: stretch; min-height: 3.6em; }
  .mv-center-scroll > #mv-text-panel .mv-text-content { height: auto; min-height: calc(3.6em / var(--fs, 1)); flex: 1 1 auto; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-fx-grid { grid-row: 1 / span 3; gap: 0.18rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-grid .mv-text-fx-btn { flex: 0 0 calc(20% - 0.15rem); padding: 0.1rem 0.05rem; gap: 0.05rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-btn .mv-text-fx-sample { font-size: 0.68rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-name { font-size: 0.48rem; }
}

/* 자막 설정 두 줄(요청): ① 투명·불투명 + 위치(하단) 한 줄 ② 글자색 4개 + 크기 한 줄 */
.mv-text-mode-row, .mv-text-colors-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; }
.mv-text-mode-row .mv-text-mode-btn { flex: 1 1 auto; white-space: nowrap; }
.mv-text-mode-row .mv-text-position { flex: 0 0 auto; width: 4.6rem; }
.mv-text-colors-row .mv-text-size-label { flex: 1 1 auto; min-width: 0; }
.mv-text-colors-row .mv-text-size-label input[type="range"] { flex: 1; width: auto; min-width: 40px; }
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { grid-template-rows: auto auto minmax(3.6em, 1fr); }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-colors-row { grid-row: 2; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-row: 3; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-fx-grid { grid-row: 1 / span 2; }
}

/* 자막 패널: 좌·우가 서로 행 높이에 영향을 주지 않게(요청) — 효과(오른쪽)가 세 행 전체에 걸치도록 해서
 * 남는 높이는 맨 아래 자막 박스 행이 흡수한다 → 설정 줄과 자막 박스 사이 빈 공간 없음 */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { row-gap: 0.35rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area > .mv-text-fx-grid { grid-row: 1 / span 3; }
}

/* 9:16 영상 1.2배(288px) + 사진일 때 자막 패널을 영상 오른쪽에(요청) — 좁은 칸이라 세로로 쌓는다 */
@media (min-width: 901px) {
  .mv-preview-sticky:has(.mv-preview-frame.is-portrait) > #mv-text-panel { grid-column: 2; grid-row: 2; margin-top: 0.5rem; padding: 0; background: transparent; border-radius: 0; min-height: 0; }
  .mv-preview-sticky.mv-preview-sticky:has(.mv-preview-frame.is-portrait):has(> #mv-text-panel) > .mv-preview-controls { grid-row: 1; align-self: start; }
  #mv-text-panel.is-docked .mv-panel-title-row { margin-bottom: 0.3rem; }
  #mv-text-panel.is-docked .mv-text-list { display: block; }
  #mv-text-panel.is-docked .mv-text-card { display: flex; flex-direction: column; gap: 0.35rem; border: 0; background: transparent; padding: 0; }
  #mv-text-panel.is-docked .mv-text-style-area { display: flex; flex-direction: column; gap: 0.35rem; order: 1; }
  #mv-text-panel.is-docked .mv-text-style-area[hidden] { display: none; }
  #mv-text-panel.is-docked .mv-text-card > .mv-text-card-row:first-child { order: 2; margin: 0; }
  #mv-text-panel.is-docked .mv-text-content { height: calc(4.4em / var(--fs, 1)); min-height: calc(3.6em / var(--fs, 1)); resize: none; }
  #mv-text-panel.is-docked .mv-text-fx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.18rem; margin: 0; }
  #mv-text-panel.is-docked .mv-text-fx-btn { padding: 0.1rem 0.05rem; gap: 0.05rem; border-width: 1px; }
  #mv-text-panel.is-docked .mv-text-fx-name { font-size: 0.48rem; line-height: 1.1; text-align: center; }
  #mv-text-panel.is-docked .mv-text-fx-btn .mv-text-fx-sample { font-size: 0.68rem; }
  #mv-text-panel.is-docked .mv-text-mode-btn { font-size: 0.64rem; padding: 0.28rem 0.2rem; }
}

/* 자막이 들어간 사진/동영상 카드 배지(요청) */
.mv-media-sub-badge { position: absolute; bottom: 3px; right: 4px; background: #facc15; color: #111827; font-size: 0.55rem; font-weight: 600; padding: 0.05rem 0.3rem; border-radius: 4px; }

/* 폭 낭비 최소화(요청) — 컷팅 버튼 줄과 자막 박스의 여백/간격만 줄인다(기능·구조 변경 없음) */
@media (min-width: 901px) {
  .mv-trim-row-all { gap: 0.4rem; }
  .mv-trim-row-all .mv-trim-actions { gap: 0.2rem; }
  .mv-trim-row-all .mv-trim-actions .mv-btn { padding: 0.3rem 0.3rem; font-size: 0.7rem; letter-spacing: -0.02em; }
  .mv-trim-row-all .mv-trim-actions .mv-motion-modes { gap: 0.2rem; flex: 1 1 0; min-width: 0; }
  .mv-trim-row-all .mv-trim-actions .mv-motion-mode-btn { flex: 1 1 0; min-width: 0; padding: 0.3rem 0.2rem; font-size: 0.7rem; letter-spacing: -0.02em; }
  #mv-text-panel { padding: 0.35rem 0.3rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-card { gap: 0.3rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-card-row { gap: 0.25rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-content { padding: 0.3rem 0.35rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-card-controls { gap: 0.3rem; }
  .mv-center-scroll > #mv-text-panel .mv-text-fx-grid { gap: 0.2rem; }
}

/* 자막(요청) — 왼쪽 입력칸은 열 바닥선(좌측 마무리·엔딩 메시지 박스 밑단)까지 채우고, 오른쪽은 제어 툴(투명/불투명·위치, 글자색·글꼴 크기) */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { align-items: stretch; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { align-items: stretch; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child .mv-text-content { height: 100%; min-height: calc(3.6em / var(--fs, 1)); resize: none; }
  .mv-center-scroll > #mv-text-panel .mv-text-style-area { align-self: start; }
}

/* 자막 최종 배치(요청) — 효과 제거 후: 왼쪽 = 자막 박스(전체 높이), 오른쪽 = 제어 툴 2줄
 * ① 투명·불투명·위치(하단) ② 글자색 가가가가 + 글꼴 크기. 위의 옛 행 배치 규칙을 모두 덮어쓴다. */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: 0.4rem; row-gap: 0.35rem;
    align-items: start;
  }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child .mv-text-content { height: 100%; min-height: calc(4.4em / var(--fs, 1)); resize: none; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-style-area > .mv-text-mode-row { grid-column: 2; grid-row: 1; margin: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-style-area > .mv-text-colors-row { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
}

/* 자막(요청) — 박스 밑단 = 오른쪽 글자색·크기 줄 밑단, 박스 아래 빈 공간 없이 별도 음성이 바로 아래에 붙는다 */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel { flex: 0 0 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-list,
  .mv-center-scroll > #mv-text-panel .mv-text-card { flex: 0 0 auto; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card { grid-template-columns: minmax(0, 8fr) minmax(0, 7fr); grid-template-rows: auto auto; align-items: start; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-row: 1 / span 2; align-self: stretch; min-height: 0; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child .mv-text-content { height: 100%; min-height: calc(3.2em / var(--fs, 1)); }
}

/* 자막 ↔ 별도 음성 사이 공백 삭제 + 별도 음성(내레이션 등) 제목이 잘리지 않게 위로 끌어올림(요청) */
@media (min-width: 901px) {
  .mv-center-scroll { gap: 0; }
  .mv-center-scroll > #mv-text-panel { padding-bottom: 0.3rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -1px; }
  #mv-video-trim { margin-top: 0; padding-top: 0.3rem; border-top-left-radius: 0; border-top-right-radius: 0; }
  #mv-video-trim .mv-item-options-title { margin-bottom: 0.15rem; }
  #mv-video-trim .mv-voice-row { margin-bottom: 0; }
}

/* 자막 입력칸 = 서식 편집 가능한 contenteditable(요청 — 블록 지정한 부분만 색/크기). 실제 글자색/크기가 그대로 보인다. */
.mv-text-content { white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; outline: none; line-height: 1.32; font-weight: 500; cursor: text; box-sizing: border-box; }
.mv-text-content:focus { border-color: var(--color-primary); }
.mv-text-content:empty::before { content: attr(data-placeholder); color: #94a3b8; font-weight: 400; pointer-events: none; }

/* 미리보기 최대화면(요청) — 버튼은 프레임 우상단, 전체화면에서는 화면 비율을 유지해 최대 크기로 맞춘다. */
.mv-fullscreen-btn { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 5; width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0.85; }
.mv-fullscreen-btn:hover { opacity: 1; background: rgba(0,0,0,0.65); }
.mv-preview-frame:fullscreen { width: 100vw !important; height: 100vh !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; margin: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.mv-preview-frame:fullscreen .mv-preview-stage { position: relative; inset: auto; flex: none; aspect-ratio: 16 / 9; width: min(100vw, 100vh * 16 / 9); height: auto; }
.mv-preview-frame.is-portrait:fullscreen .mv-preview-stage { aspect-ratio: 9 / 16; width: auto; height: min(100vh, 100vw * 16 / 9); }
.mv-preview-frame:-webkit-full-screen { width: 100vw !important; height: 100vh !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0; margin: 0; display: flex; align-items: center; justify-content: center; background: #000; }

/* 미리보기 글자(제목/날짜/엔딩)는 스테이지 너비에 비례(cqw)해 화면이 커지면 같이 커진다 — 최대화면 포함.
   16:9 700px 폭에서 기존 크기와 같고, 세로(9:16)는 폭이 좁아 기존 크기를 유지하도록 배율을 키웠다. */
.mv-preview-stage { container-type: inline-size; }
.mv-preview-frame.is-portrait .mv-preview-intro-title { font-size: 10.5cqw; }
.mv-preview-frame.is-portrait .mv-preview-intro-date { font-size: 8.35cqw; }
/* 제목과 날짜 사이 간격 — 글자가 커진 만큼 스테이지 너비에 비례해 넉넉히(요청) */
.mv-preview-intro-card, .mv-preview-intro-title-overlay { gap: 2.4cqw; }
.mv-preview-frame.is-portrait .mv-preview-intro-card, .mv-preview-frame.is-portrait .mv-preview-intro-title-overlay { gap: 6.5cqw; }
.mv-preview-frame.is-portrait .mv-preview-ending-scroll { font-size: calc(7.7cqw * var(--fs, 1) * var(--es, 1) * var(--fit, 1)); }

/* 개인정보 안내 배너 — 미리보기 위(미디어 없을 때만, JS가 hidden 토글) */
.mv-privacy-banner { display: flex; align-items: center; gap: 0.9rem; position: relative; margin-bottom: 0.6rem; padding: 0.8rem 2.2rem 0.8rem 0.9rem; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, rgba(16,185,129,0.34), rgba(13,148,136,0.16) 55%, rgba(15,23,42,0.5));
  border: 1px solid rgba(52,211,153,0.55); box-shadow: 0 0 0 1px rgba(52,211,153,0.08), 0 8px 28px rgba(16,185,129,0.14); backdrop-filter: blur(8px); }
.mv-privacy-banner[hidden] { display: none; }
.mv-pb-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #6ee7b7; background: rgba(16,185,129,0.18); border: 1px solid rgba(110,231,183,0.4); }
.mv-pb-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mv-pb-text strong { font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: -0.01em; }
.mv-pb-text span { font-size: 0.78rem; line-height: 1.5; color: #fff; opacity: 0.88; }
.mv-pb-chips { flex: 0 0 auto; display: flex; gap: 0.4rem; padding: 0.3rem; border-radius: 12px; background: rgba(2,6,23,0.4); border: 1px solid rgba(255,255,255,0.1); }
.mv-pb-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 9px; font-size: 0.7rem; color: #fff; background: rgba(255,255,255,0.06); white-space: nowrap; }
.mv-pb-chip i { font-style: normal; font-size: 0.85rem; }
.mv-pb-close { position: absolute; top: 0.4rem; right: 0.5rem; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: 0.7; cursor: pointer; font-size: 0.75rem; line-height: 1; }
.mv-pb-close:hover { opacity: 1; background: rgba(255,255,255,0.14); }
@media (max-width: 900px) { .mv-privacy-banner { flex-wrap: wrap; } .mv-pb-chips { flex: 1 1 100%; } }

/* ===== 깔끔한 타이포/아이콘/플레이어 (요청) ===== */
body { -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
.mv-brand-text { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: #fff !important; font-weight: 600; letter-spacing: -0.01em; }
.mv-panel-title, .mv-section-title { font-size: 0.82rem; font-weight: 600; color: #fff; letter-spacing: 0; }
.mv-title-wrap { display: inline-flex; align-items: center; gap: 0.45rem; }
.mv-ico { width: 16px; height: 16px; flex: 0 0 auto; color: rgba(255,255,255,0.72); }
.mv-collapse-summary::after { margin-left: 0.6rem; }
.mv-panel-title-row.mv-collapse-summary { cursor: pointer; list-style: none; }
.mv-panel-title-row.mv-collapse-summary::-webkit-details-marker { display: none; }
.mv-panel-title-row.mv-collapse-summary .mv-ratio-toggle { margin-left: auto; }
details.mv-collapse:not([open]) > .mv-panel-title-row { margin-bottom: 0; }

.mv-preview-empty { gap: 0; padding: 0; }
.mv-preview-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.mv-preview-empty::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.45)); }
.mv-preview-caption { position: absolute; z-index: 1; left: 50%; top: 14px; transform: translateX(-50%); padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.74rem; font-weight: 400; color: #fff; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); white-space: nowrap; }

.mv-player { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fff; }
.mv-player > * { pointer-events: auto; }
.mv-player-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); cursor: pointer; transition: transform 160ms ease, background 160ms ease, opacity 160ms ease; }
.mv-player-big svg { margin-left: 3px; }
.mv-player-big:hover { background: rgba(0,0,0,0.7); transform: translate(-50%, -50%) scale(1.06); }
.mv-player.is-playing .mv-player-big { opacity: 0; pointer-events: none; }
.mv-player:not(.has-media) .mv-player-big { opacity: 0.55; cursor: default; }
.mv-pl-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.8rem 0.45rem; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)); transition: opacity 180ms ease; }
.mv-player.is-playing .mv-pl-bar { opacity: 0; }
.mv-preview-frame:hover .mv-pl-bar, .mv-player.is-playing .mv-pl-bar:focus-within, .mv-player.is-playing .mv-pl-bar:hover { opacity: 1; }
.mv-player-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.mv-pl-spacer { flex: 1 1 0; }
.mv-pl-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.mv-pl-btn:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.mv-pl-btn:disabled { opacity: 0.45; cursor: default; }
.mv-pl-vol { display: inline-flex; align-items: center; }
.mv-pl-vol .mv-vol { width: 0; opacity: 0; margin: 0; transition: width 160ms ease, opacity 160ms ease, margin 160ms ease; }
.mv-pl-vol:hover .mv-vol, .mv-pl-vol:focus-within .mv-vol { width: 70px; opacity: 1; margin: 0 0.35rem; }
.mv-player .mv-time-label { font-size: 0.74rem; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-pl-text { height: 26px; padding: 0 0.7rem; border: 0; border-radius: 999px; font-size: 0.72rem; font-weight: 500; color: #fff; background: rgba(255,255,255,0.14); cursor: pointer; white-space: nowrap; }
.mv-pl-text:hover:not(:disabled) { background: rgba(255,255,255,0.26); }
.mv-pl-text:disabled { opacity: 0.4; cursor: default; }
.mv-pl-fs .mv-fullscreen-btn { position: static; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; opacity: 1; }
.mv-pl-fs .mv-fullscreen-btn:hover { background: rgba(255,255,255,0.16); }
.mv-seek, .mv-vol { -webkit-appearance: none; appearance: none; height: 14px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.mv-seek { display: block; width: 100%; }
.mv-seek::-webkit-slider-runnable-track, .mv-vol::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, #fff var(--p), rgba(255,255,255,0.3) var(--p)); }
.mv-seek::-moz-range-track, .mv-vol::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); }
.mv-seek::-moz-range-progress, .mv-vol::-moz-range-progress { height: 3px; border-radius: 3px; background: #fff; }
.mv-seek::-webkit-slider-thumb, .mv-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
.mv-seek::-moz-range-thumb, .mv-vol::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; }
.mv-seek:disabled { cursor: default; opacity: 0.6; }
.mv-preview-frame:fullscreen .mv-player { z-index: 6; }

/* ===== 플레이어 최종 스타일(요청) — 동그라미 없이 흰 재생 아이콘만, 미디어가 없을 땐 사진만 ===== */
.mv-player:not(.has-media) .mv-player-big, .mv-player:not(.has-media) .mv-pl-bar { display: none; }
.mv-player .mv-player-big { width: 72px; height: 72px; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55)); }
.mv-player .mv-player-big svg { width: 56px; height: 56px; margin-left: 0; }
.mv-player .mv-player-big:hover { background: none; transform: translate(-50%, -50%) scale(1.1); }
.mv-pl-bar { background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); }
.mv-player .mv-time-label, .mv-pl-btn, .mv-pl-fs .mv-fullscreen-btn { color: #fff; }
/* 영상 안에 플레이어가 들어갔으므로 아래 컷팅 영역의 별도 재생 버튼은 숨긴다(요청) */
#mv-pb-play, #mv-trim-pause-btn { display: none; }
/* 영상 안 플레이어와 중복되는 아래 위치 막대·볼륨 슬라이더 숨김(요청) */
.mv-trim-row-all .mv-player-bar, .mv-trim-row-all .mv-trim-volume-vertical, #mv-video-trim .mv-player-bar, #mv-video-trim .mv-trim-volume-vertical { display: none !important; }
/* 글자 굵기 통일(요청) — "픽스컴 동영상 편집기" 제목만 굵게, 나머지 전부 보통 굵기 */
body, body * { font-weight: 400 !important; }
body .mv-brand-text { font-weight: 600 !important; }
/* ===== 왼쪽 인트로 · 마무리 영역 정리(요청) — 박스는 작게, 세로 간격은 넉넉하게 ===== */
.mv-editor-left { gap: 0.7rem; }
.mv-editor-left > .mv-collapse, .mv-editor-left > .mv-section-ending { padding: 0.75rem 0.9rem; }
.mv-editor-left > .mv-collapse > .mv-collapse-summary { margin-bottom: 0.7rem; }
.mv-editor-left .mv-intro-mode { gap: 1.1rem; margin-bottom: 0.7rem; }
.mv-editor-left .mv-intro-black-fields { gap: 0.8rem; margin-bottom: 0.7rem; }
.mv-editor-left .mv-intro-toggles { gap: 1.4rem; margin: 0.2rem 0 0.7rem; }
.mv-editor-left .mv-intro-toggles .mv-checkbox { margin-top: 0; }
.mv-editor-left .mv-intro-style-area { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.7rem; }
.mv-editor-left .mv-subpanel-title { margin: 0.5rem 0 0.4rem; font-size: 0.7rem; }
.mv-editor-left .mv-light-grid, .mv-editor-left .mv-intro-grid { gap: 0.5rem; }
.mv-editor-left .mv-intro-item { aspect-ratio: 16 / 10; border-radius: 8px; }
.mv-section-ending .mv-section-title { margin-bottom: 0.6rem; }
.mv-section-ending .mv-ending-textarea { flex: 0 0 auto; min-height: 52px; height: 52px; }

/* 시작점/끝점 등록 줄(요청) — 영상을 멈춘 현재 초를 보여주고 그 지점을 바로 등록 */
.mv-trim-mark { flex: 1 1 100%; display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0; }
.mv-trim-now { min-width: 4.2rem; margin-right: 0.6rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: #fff; }
.mv-trim-mark .mv-btn { padding: 0.35rem 0.8rem; font-size: 0.76rem; }

/* 영상 위 위치 막대에 컷팅 구간(시작~끝)과 현재 위치를 함께 표시(요청) */
.mv-seek-wrap { position: relative; display: block; width: 100%; }
.mv-seek-range { display: none; position: absolute; top: 50%; height: 5px; margin-top: -2.5px; left: var(--rs, 0%); width: calc(var(--re, 0%) - var(--rs, 0%)); background: #3b82f6; border-radius: 3px; pointer-events: none; }
.mv-seek-wrap.has-range .mv-seek-range { display: block; }
.mv-seek-wrap.has-range::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255,255,255,0.3); }
.mv-seek-wrap .mv-seek { position: relative; z-index: 1; }
.mv-seek-wrap.has-range .mv-seek::-webkit-slider-runnable-track { background: linear-gradient(to right, #fff var(--p), transparent var(--p)); }
.mv-seek-wrap.has-range .mv-seek::-moz-range-track { background: transparent; }
/* 인트로 라디오(검정 시작화면 / Intro 영상 / 없음)는 항상 한 줄(요청), 엔딩 입력칸은 한 줄 더 */
.mv-editor-left .mv-intro-mode { flex-wrap: nowrap; gap: 0.9rem; white-space: nowrap; }
.mv-editor-left .mv-intro-mode .mv-radio { white-space: nowrap; flex: 0 0 auto; }
.mv-section-ending .mv-ending-textarea { min-height: 74px; height: 74px; }

/* 시작점~끝점 구간 바(요청) — 선택 구간 파란색 / 나머지 흰색, 손잡이로 이동 */
.mv-trim-row-all .mv-field-inline:has(#mv-trim-start), .mv-trim-row-all .mv-field-inline:has(#mv-trim-end) { display: none; }
.mv-range { flex: 1 1 100%; padding: 1.5rem 0.6rem 0.4rem; }
.mv-range-track { position: relative; height: 8px; border-radius: 4px; background: #fff; }
.mv-range-sel { position: absolute; top: 0; bottom: 0; background: #3b82f6; border-radius: 4px; pointer-events: none; }
.mv-range-head { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); pointer-events: none; }
.mv-range-h { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid #3b82f6; cursor: ew-resize; touch-action: none; z-index: 2; }
.mv-range-h.is-drag { transform: scale(1.15); }
.mv-range-tag { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }

/* 음성 불러오기 막대를 영상 구간 바에 합쳐 표시(요청) — 별도 영상/음성 줄은 숨김 */
#mv-voice-timeline { display: none !important; }
.mv-range-track .mv-voice-block { position: absolute; top: 18px; height: 12px; margin: 0; padding: 0; border-radius: 6px; background: #60a5fa; border: 0; cursor: grab; overflow: hidden; z-index: 1; display: flex; align-items: center; }
.mv-range-track .mv-voice-block[hidden] { display: none; }
.mv-range-track .mv-voice-block-label { font-size: 0.55rem; color: #fff; padding: 0 0.3rem; white-space: nowrap; pointer-events: none; }
.mv-range:has(.mv-voice-block:not([hidden])) { padding-bottom: 1.4rem; }
/* 구간 바를 영상 위 플레이어 막대처럼 얇게(요청) */
.mv-range { padding: 1.3rem 0.6rem 0.3rem; }
.mv-range-track { height: 3px; border-radius: 3px; }
.mv-range-sel { border-radius: 3px; }
.mv-range-head { top: -5px; bottom: -5px; width: 1px; margin-left: 0; box-shadow: none; background: #fff; }
.mv-range-h { width: 11px; height: 11px; margin: -4px 0 0 -5.5px; border-width: 2px; }
.mv-range-tag { bottom: 12px; font-size: 0.66rem; }
.mv-range-track .mv-voice-block { top: 10px; height: 5px; border-radius: 3px; }
.mv-range-track .mv-voice-block-label { display: none; }
.mv-range:has(.mv-voice-block:not([hidden])) { padding-bottom: 0.9rem; }
/* 음성 막대는 두 줄이 아니라 같은 구간 바 위에 겹쳐 표시하고 좌우로 끌어 맞춘다(요청) */
.mv-range-track .mv-voice-block { top: 50%; height: 11px; margin-top: -5.5px; border-radius: 6px; background: rgba(147,197,253,0.6); border: 1px solid #93c5fd; box-sizing: border-box; cursor: grab; touch-action: none; z-index: 1; }
.mv-range-track .mv-voice-block:active { cursor: grabbing; }
.mv-range-h { z-index: 3; }
.mv-range-head { z-index: 2; }
.mv-range, .mv-range:has(.mv-voice-block:not([hidden])) { padding-bottom: 0.4rem; }



/* PC: 좌·중앙·우 3열이 항상 같은 바닥선에서 끝나도록 — 각 열의 마지막 박스가 남는 높이를 채운다(요청, 모바일 제외) */
@media (min-width: 901px) {
  .mv-editor-center { align-self: stretch; }
  .mv-editor-center .mv-center-scroll { flex: 1 1 auto; min-height: 0; }
  .mv-editor-center .mv-center-scroll > .mv-voice-record-panel { flex: 1 1 auto; }
  .mv-editor-left > :last-child, .mv-editor-right > :last-child { flex: 1 1 auto; }
}

/* 카드 호버 말풍선(요청) */
.mv-card-tip { position: fixed; z-index: 100000; transform: translate(-50%, -100%); padding: 0.4rem 0.7rem; border-radius: 8px; background: #0b1220; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 6px 20px rgba(0,0,0,0.45); color: #fff; font-size: 0.74rem; white-space: nowrap; pointer-events: none; }
.mv-card-tip[hidden] { display: none; }
.mv-card-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: #0b1220; border-right: 1px solid rgba(255,255,255,0.22); border-bottom: 1px solid rgba(255,255,255,0.22); transform: rotate(45deg); }

/* 시작 Light 효과 제목 옆에 길이를 한 줄로(요청) */
.mv-light-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: nowrap; }
.mv-light-head .mv-subpanel-title { margin: 0 !important; white-space: nowrap; }
.mv-light-head .mv-field-inline { white-space: nowrap; flex: 0 1 auto; }
.mv-light-head input[type="range"] { width: 110px; }



/* 선택한 음성 막대 표시(Del 키로 삭제 가능) */
#mv-voice-tl .mv-vtl-block.is-selected { outline: 2px solid #fff; outline-offset: 1px; }

/* 전체 타임라인 위치 바 — 자막 / 녹음 두 개의 얇은 바, 파란 구간 + 초 표시(요청) */
#mv-voice-tl { --lw: 2.8rem; --rw: 7.4rem; margin-top: 0.5rem; }
#mv-voice-tl .mv-vtl-title, #mv-voice-tl .mv-vtl-seg { display: none; }
#mv-voice-tl .mv-vtl-head { display: flex; justify-content: flex-end; margin: 0 0 0.15rem; font-size: 0.7rem; color: #fff; }
#mv-voice-tl .mv-vtl-body { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0; }
#mv-voice-tl .mv-vtl-row { display: flex; align-items: center; gap: 0.5rem; height: 22px; }
#mv-voice-tl .mv-vtl-label { display: block; flex: 0 0 calc(var(--lw) - 0.5rem); font-size: 0.72rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mv-voice-tl .mv-vtl-track { position: relative; flex: 1 1 0; min-width: 0; height: 3px; border-radius: 3px; background: #fff; overflow: visible; touch-action: none; cursor: pointer; }
#mv-voice-tl .mv-vtl-track::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; z-index: 0; }
#mv-voice-tl .mv-vtl-times { flex: 0 0 var(--rw); width: var(--rw); font-size: 0.7rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#mv-voice-tl .mv-vtl-block { position: absolute; top: 50%; bottom: auto; height: 10px; margin-top: -5px; border-radius: 5px; background: #3b82f6; z-index: 1; cursor: grab; }
#mv-voice-tl .mv-vtl-block:active { cursor: grabbing; }
#mv-voice-tl .mv-vtl-block-label { display: none; }
#mv-voice-tl .mv-vtl-ph { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; pointer-events: none; z-index: 3; left: calc(var(--lw) + (100% - var(--lw) - var(--rw) - 0.5rem) * var(--p, 0)); }

/* 별도 음성(내레이션 등) · 음성 불러오기(동영상별)는 사용하지 않아 화면에서 숨김(요청) — 음성은 아래 "음성 녹음" 패널에서 녹음/불러오기 */
#mv-video-trim .mv-item-options-title, #mv-video-trim .mv-voice-row { display: none !important; }

/* 녹음 시작 버튼이 녹음 중에는 '녹음 중지'로 바뀐 상태 표시 */
#mv-record-start-btn.is-recording { background: rgba(239, 68, 68, 0.18); color: #fff; }
#mv-record-stop-btn[hidden] { display: none !important; }

/* 자막 패널은 내용 높이만큼만(아래 공백 제거), 녹음 패널은 위쪽 공백 없이 붙임(요청) */
@media (min-width: 901px) {
  .mv-editor-center .mv-center-scroll { gap: 0.3rem; }
  .mv-editor-center .mv-center-scroll > #mv-text-panel { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; padding-top: 0.45rem; padding-bottom: 0.45rem; margin-bottom: 0; }
  .mv-editor-center .mv-center-scroll > #mv-text-panel .mv-text-list,
  .mv-editor-center .mv-center-scroll > #mv-text-panel .mv-text-card { flex: 0 0 auto !important; min-height: 0 !important; margin-bottom: 0; }
  .mv-editor-center .mv-center-scroll > .mv-voice-record-panel { padding-top: 0.45rem; }
}
.mv-voice-record-panel .mv-record-controls { margin-top: 0; }
.mv-voice-record-panel .mv-record-playback { margin-top: 0.4rem; }

/* 자막 글꼴 선택(요청) */
.mv-text-font { padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.76rem; flex: 0 0 auto; width: 6.2rem; }
.mv-text-mode-row { flex-wrap: wrap; }

/* 이 사진의 움직임 버튼(랜덤 자동 / 고정(움직임 없음) / 방향 직접 선택 및 방향 버튼) 글자는 흰색(요청) — 선택된 것은 파란 테두리/배경으로 구분 */
.mv-motion-mode-btn, .mv-kb-dir-btn, .mv-motion-mode-btn.is-active, .mv-kb-dir-btn.is-active { color: #fff !important; }

/* 시작 Light 효과 줄: 길이 옆, 맨 오른쪽에 접기 표시 — 접으면 Light 목록 + Intro 영상까지 접힘(요청) */
.mv-light-head { margin-bottom: 0.5rem; }
.mv-light-head:has(+ .mv-intro-style-area[hidden]) .mv-field-inline { display: none; }
.mv-light-toggle { margin-left: auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 0.7rem; }
.mv-light-toggle::after { content: '▼'; }
details[data-light-collapsed] .mv-light-toggle::after { content: '▲'; }
.mv-light-toggle:hover { color: #fff; }
details[data-light-collapsed] #mv-intro-style-area, details[data-light-collapsed] .mv-intro-video-block { display: none !important; }

/* 녹음 장치 선택(오른쪽) + 녹음 중 파란 파형 바(요청) */
.mv-record-controls { flex-wrap: wrap; }
.mv-record-device { margin-left: auto; max-width: 11rem; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.74rem; }
.mv-record-wave { display: block; width: 100%; height: 56px; margin-top: 0.5rem; border-radius: 10px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.35); }
.mv-record-wave[hidden] { display: none; }
.mv-record-status.is-recording { color: #fff; }

/* 위치 바 구간의 번호(자막1·녹음1 …의 숫자)와 이름표 */
#mv-voice-tl .mv-vtl-block { height: 14px; margin-top: -7px; display: flex; align-items: center; justify-content: center; border-radius: 7px; }
#mv-voice-tl .mv-vtl-block-label { display: block; font-size: 0.62rem; line-height: 1; color: #fff; pointer-events: none; }
#mv-voice-tl { --rw: 6.5rem; }
.mv-dock-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.mv-dock-labels[hidden] { display: none; }
.mv-dock-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: #fff; font-size: 0.72rem; cursor: pointer; }
.mv-dock-chip:hover { background: rgba(255, 255, 255, 0.1); }
.mv-dock-chip.is-sub, .mv-dock-chip.is-rec { border-color: rgba(59, 130, 246, 0.6); }
.mv-dock-chip-x { opacity: 0.7; font-size: 0.64rem; }
.mv-dock-chip-x:hover { opacity: 1; }

/* 녹음 중 자라나는 파란 구간(요청) */
#mv-voice-tl .mv-vtl-block-live { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.35); animation: mv-live-pulse 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes mv-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* 자막 스타일 영역 3줄 배치(요청): ① 투명 · 불투명 · 위치  ② 글꼴 · 글꼴 크기  ③ 가 가 가 가(글자색) */
.mv-text-style-area { display: flex !important; flex-direction: column; gap: 0.5rem; }
.mv-text-style-area > .mv-text-card-row { display: flex !important; align-items: center; gap: 0.5rem; flex-wrap: nowrap !important; margin: 0 !important; min-width: 0; grid-column: auto !important; grid-row: auto !important; }
.mv-text-style-area .mv-text-font { flex: 0 0 auto; width: 6.4rem; }
.mv-text-style-area .mv-text-position { flex: 0 0 auto; width: 4.6rem; }
.mv-text-style-area .mv-text-size-label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.74rem; color: #fff; }
.mv-text-style-area .mv-text-size-label input[type="range"] { width: 90px; }
.mv-text-style-area .mv-text-mode-btn { white-space: nowrap; }
.mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-style-area { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: start; }

/* 자막 불투명 체크박스(요청) */
.mv-text-row-label { font-size: 0.78rem; color: #fff; white-space: nowrap; }
.mv-text-opaque-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: #fff; white-space: nowrap; cursor: pointer; }

/* 사진·동영상 카드 순서 번호(요청) */
.mv-media-num { position: absolute; top: 2px; left: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 8px; background: rgba(15,23,42,0.78); color: #fff; font-size: 0.6rem; line-height: 1; z-index: 2; pointer-events: none; }
.mv-media-split-badge { top: 20px; }

/* 자막 입력칸 세로 약 1.3배(요청) */
/* 기존 4.4em(약 58px) 기준 1.3배 = 5.7em(약 75px) */
.mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { min-height: 5.7em; }
.mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child .mv-text-content,
.mv-center-scroll > #mv-text-panel .mv-text-content,
#mv-text-panel.is-docked .mv-text-content { height: calc(5.7em / var(--fs, 1)) !important; min-height: calc(5.7em / var(--fs, 1)) !important; }

/* 녹음 목록 플레이어(요청) — 파형 · 재생/일시정지 · 진행 · 시간 */
.mv-record-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.mv-record-list:empty { display: none; }
.mv-rec-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 10px; background: rgba(59, 130, 246, 0.07); }
.mv-rec-play { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #3b82f6; color: #fff; cursor: pointer; }
.mv-rec-play:hover { background: #60a5fa; }
.mv-rec-name { flex: 0 0 auto; font-size: 0.74rem; color: #fff; white-space: nowrap; }
.mv-rec-wave { flex: 1 1 0; min-width: 0; height: 34px; cursor: pointer; }
.mv-rec-time { flex: 0 0 auto; font-size: 0.7rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-rec-del { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: 0.7; cursor: pointer; font-size: 0.7rem; }
.mv-rec-del:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* 가 가 가 가(글자색) 아래 빈 바탕 제거(요청) — 자막 카드는 내용 높이만큼만, 불필요한 빈 줄/최소 높이 없음 */
@media (min-width: 901px) {
  .mv-center-scroll > #mv-text-panel .mv-text-card { grid-template-rows: auto !important; grid-auto-rows: auto !important; align-content: start !important; align-items: start !important; min-height: 0 !important; height: auto !important; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-style-area { grid-row: 1 !important; grid-column: 2 !important; align-self: start; }
  .mv-center-scroll > #mv-text-panel .mv-text-card > .mv-text-card-row:first-child { grid-row: 1 !important; grid-column: 1 !important; align-self: start; }
  .mv-center-scroll > #mv-text-panel { padding-bottom: 0.4rem !important; }
  .mv-text-style-area > .mv-text-colors-row { padding-bottom: 0; }
}

/* ===== 자막 스타일 2줄(요청): ① 글꼴 · 위치 · 50 ────  ② 가 가 가 가 가 · ☐ 불투명 ===== */
.mv-text-style-area .mv-text-font { width: 5.6rem; }
.mv-text-style-area .mv-text-position { width: 3.9rem; }
.mv-text-style-area .mv-text-size-label input[type="range"] { width: 72px; }
.mv-text-style-area .mv-text-colors-row { justify-content: flex-start; }
.mv-text-style-area .mv-text-opaque-label { margin-left: 0.2rem; }

/* ===== 고정 구간(요청) — 동영상/사진/녹음 유무로 아래 칸이 위아래로 움직이지 않게 자리를 항상 확보한다 (PC) ===== */
@media (min-width: 901px) {
  /* 안내 배너는 영상 위에 겹쳐 띄워서(자리를 차지하지 않음) 사라져도 아래가 움직이지 않는다 */
  .mv-editor-center { position: relative; }
  .mv-privacy-banner { position: absolute; top: 12px; left: 0; right: 0; margin: 0; z-index: 8; }
  /* 동영상 전용 컷팅 줄 / 위치 바 / 자막 칸은 비어 있어도 같은 높이를 유지 */
  #mv-trim-row-all { min-height: 92px; }
  #mv-trim-row-all[hidden] { display: flex !important; visibility: hidden; }
  #mv-voice-tl { min-height: 56px; }
  #mv-voice-tl[hidden] { display: block !important; visibility: hidden; }
  #mv-text-panel { min-height: 96px; }
  /* 컷팅 상태 문구 칸은 문구가 있을 때만 */
  #mv-video-trim:not(:has(#mv-trim-status:not(:empty))) { display: none !important; }
  /* 위치 바를 조금 촘촘하게 */
  #mv-voice-tl .mv-vtl-row { height: 19px; }
  #mv-voice-tl .mv-vtl-head { margin-bottom: 0; line-height: 1.1; }
  #mv-voice-tl { margin-top: 0.25rem; }
  /* 컷팅 버튼 줄(미리보기·적용·저장 + 오디오 모드)을 한 줄로 */
  .mv-trim-row-all .mv-trim-actions { flex-wrap: nowrap; gap: 0.25rem; }
  .mv-trim-row-all .mv-trim-actions .mv-btn { padding: 0.28rem 0.45rem; font-size: 0.68rem; }
  .mv-trim-row-all .mv-trim-actions .mv-motion-modes { flex-wrap: nowrap; gap: 0.2rem; }
  .mv-trim-row-all .mv-trim-actions .mv-motion-mode-btn { padding: 0.28rem 0.35rem; font-size: 0.66rem; letter-spacing: -0.03em; }
}

/* 고정 구간 높이 맞춤(측정값 기준) + 세로 여백 줄임 */
@media (min-width: 901px) {
  .mv-trim-row-all { margin-top: 0.2rem; margin-bottom: 0.15rem; }
  .mv-range { padding-top: 1.1rem; padding-bottom: 0.2rem; }
  #mv-voice-tl .mv-vtl-row { height: 18px; }
  #mv-text-panel { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
}

/* 고정 구간 높이 확정(측정값: 컷팅 줄 98px · 위치 바 56px · 자막 칸 91px) */
@media (min-width: 901px) {
  #mv-trim-row-all { min-height: 98px; }
  .mv-editor-center .mv-center-scroll > #mv-text-panel { min-height: 91px !important; }
  .mv-editor-center .mv-center-scroll { gap: 0.2rem; }
  #mv-voice-tl { margin-top: 0.1rem; }
}

/* 시작점 등록 · 끝점 등록 · 구간 바를 한 줄로(요청) */
.mv-trim-mark { flex: 1 1 100%; display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.mv-trim-mark .mv-btn { flex: 0 0 auto; white-space: nowrap; }
.mv-trim-mark .mv-range { flex: 1 1 0; min-width: 0; padding: 1rem 0.5rem 0.2rem; }

/* 컷팅 안내 토스트 + 시작점 등록 줄과 컷팅 버튼 줄 사이 세로 공백 최소화(요청) */
.mv-trim-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100001; max-width: min(90vw, 560px); padding: 0.6rem 1rem; border-radius: 10px; background: #0b1220; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.5); color: #fff; font-size: 0.8rem; line-height: 1.5; text-align: center; }
.mv-trim-toast[hidden] { display: none; }
.mv-trim-row-all { row-gap: 0.1rem; gap: 0.1rem 0.6rem; }
.mv-trim-mark .mv-range { padding-top: 0.8rem; padding-bottom: 0; }
.mv-trim-row-all .mv-trim-actions { margin-top: 0; }

/* 컷팅 줄은 위쪽부터 붙여서 줄 사이 빈 공간을 없앤다(요청) — 예약 높이는 실제 내용 높이로 맞춤 */
@media (min-width: 901px) {
  #mv-trim-row-all { align-content: flex-start; align-items: center; min-height: 57px; }
}

/* 마무리 · 엔딩 메시지를 적는 동안 미리보기에는 재생 버튼/컨트롤이 보이지 않게(요청) */
.mv-player.is-ending .mv-player-big, .mv-player.is-ending .mv-pl-bar { display: none !important; }

/* 배너는 영상 위에 겹치지 않고 바로 위 칸에 둔다(요청) — 미리보기(뷰어)는 배너 아래 */
@media (min-width: 901px) {
  .mv-privacy-banner { position: relative; top: auto; left: auto; right: auto; margin: 0 0 0.4rem; }
}
/* 사진/동영상 영역 높이 조절 손잡이 */
.mv-dock-resizer { flex: 0 0 auto; height: 14px; display: grid; place-items: center; cursor: row-resize; touch-action: none; user-select: none; }
.mv-dock-resizer span { width: 56px; height: 5px; border-radius: 3px; background: rgba(148,163,184,0.7); }
.mv-dock-resizer:hover span, .mv-dock-resizer:focus-visible span, .mv-dock-resizer.is-drag span { background: #34d399; }
.mv-dock-resizer:focus-visible { outline: 2px solid #34d399; outline-offset: -2px; border-radius: 6px; }
.mv-media-dock.is-resized { overflow-y: auto; overflow-x: hidden; }
@media (max-width: 900px) { .mv-dock-resizer { height: 22px; order: 3; } .mv-media-dock { order: 3; } }

/* 손잡이를 공간 차지 없는 얇은 선으로 — 사진/동영상 영역 맨 위 테두리에 겹쳐 둔다(요청) */
.mv-media-dock { position: relative; }
.mv-dock-resizer { position: absolute; top: -6px; left: 0; right: 0; height: 12px; z-index: 5; order: 0; display: block; }
.mv-dock-resizer span { position: absolute; top: 5px; left: 0; right: 0; width: auto; height: 2px; border-radius: 0; background: rgba(148,163,184,0.55); }
.mv-dock-resizer:hover span, .mv-dock-resizer:focus-visible span, .mv-dock-resizer.is-drag span { height: 3px; top: 4px; background: #34d399; }
@media (max-width: 900px) { .mv-dock-resizer { height: 22px; top: -11px; } .mv-dock-resizer span { top: 10px; } }
/* 스크롤 영역에 잘리지 않도록 손잡이를 영역 안쪽 맨 위에 둔다 */
.mv-dock-resizer { top: 0; height: 10px; }
.mv-dock-resizer span { top: 0; }
.mv-dock-resizer:hover span, .mv-dock-resizer:focus-visible span, .mv-dock-resizer.is-drag span { top: 0; }
@media (max-width: 900px) { .mv-dock-resizer { top: 0; height: 18px; } .mv-dock-resizer span { top: 0; } }

/* 편집기 로고 + 모바일 브랜드 글자 검정(요청) */
.mv-brand-logo { width: 28px; height: 28px; flex: 0 0 auto; display: block; }

/* 사진/동영상 영역을 키워 편집 영역이 줄어도, 뷰어 아래 칸(컷팅/자막 등)이 사진·동영상 카드를 덮지 않게(요청)
   — 중앙 열은 자기 칸 안에서만 스크롤하고, 사진/동영상 영역이 항상 중앙 열 위에 놓인다. */
@media (min-width: 901px) {
  .mv-editor-center { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  .mv-media-dock { z-index: 30; }
}

/* 사진 드로잉 위치 표시(헷갈림 개선) — 드로잉 카드에 대상 사진 번호, 대상 사진에는 점선 테두리 + 배지 */
.mv-photo-drawing-card-target { font-size: 0.52rem; font-weight: 700; color: #5a3a10; background: rgba(255,255,255,0.55); border-radius: 4px; padding: 0 0.25rem; }
.mv-media-card.is-drawing-anchor { outline: 2px dashed #c99a52; outline-offset: 1px; }
.mv-media-card.is-drawing-anchor::before { content: '✏️'; position: absolute; left: 2px; bottom: 2px; z-index: 3; font-size: 0.7rem; line-height: 1; padding: 1px 3px; border-radius: 4px; background: rgba(201,154,82,0.92); pointer-events: none; }

/* 자막 입력칸은 선택한 글꼴로 보인다(요청) — JS가 인라인 font-family를 지정 */
.mv-text-content { font-family: "Nanum Gothic", "Malgun Gothic", sans-serif; }

/* 마무리 · 엔딩 메시지 제목 오른쪽에 글꼴 선택(요청) */
.mv-ending-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mv-ending-head .mv-section-title { margin-bottom: 0.4rem; min-width: 0; }
.mv-ending-font { flex: 0 0 auto; max-width: 9rem; margin-bottom: 0.4rem; font-size: 0.75rem; padding: 0.15rem 0.3rem; border-radius: 6px; }

/* 맨 뒤로 놓기 표시(요청) — 마지막 카드 오른쪽에 삽입 화살표 */
.mv-media-card.is-drop-end { overflow: visible; }
.mv-media-card.is-drop-end::after { content: ''; position: absolute; top: 50%; right: -10px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 7px 9px 7px 0; border-color: transparent var(--color-primary) transparent transparent; z-index: 5; pointer-events: none; }

/* 효과 목록(화면 전환·사진 효과·프리미엄·Light)에 마우스를 올리거나 키로 이동하면 테두리 흰색 + 글자 노란색(요청) — PC(어두운 배경) */
@media (min-width: 901px) {
  .mv-tx-row:hover, .mv-tx-row:focus-visible, .mv-tx-row.is-active:hover,
  .mv-light-btn:hover, .mv-light-btn:focus-visible, .mv-light-btn.is-active:hover { border-color: #fff; color: #ffd400; outline: none; }
  .mv-tx-row:hover .mv-tx-row-name, .mv-tx-row:focus-visible .mv-tx-row-name { color: #ffd400; }
}

/* 글꼴별로 글자가 작게 보이는 것은 자동 보정(요청) — --fs 는 JS가 글꼴별 배율로 지정(기본 1). 입력칸 기본 크기는 그대로 */
/* 입력칸 안 글자는 글꼴별로 자동 보정(--fs), 칸 크기(높이)는 항상 고정 — em 높이는 위에서 /var(--fs)로 상쇄 */
.mv-ending-textarea, .mv-section-ending .mv-ending-textarea { font-size: calc(0.78rem * var(--fs, 1)); }
.mv-text-content, .mv-center-scroll > #mv-text-panel .mv-text-content { font-size: calc(0.82rem * var(--fs, 1)); }

/* 엔딩 메시지 글자 크기 슬라이더 */
.mv-ending-size-label { flex: 1 1 auto; display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin-bottom: 0.4rem; font-size: 0.72rem; }
.mv-ending-size-label b { min-width: 1.6em; text-align: right; font-weight: 600; }
.mv-ending-size { flex: 1 1 0; min-width: 40px; }

/* ==========================================================================
   디자인 리뉴얼(요청) — 시안(딥 네이비 글래스 대시보드)에 맞춘 마감 레이어. 기존 구조/클래스는
   그대로 두고 색·모서리·그림자만 덮어쓴다(파일 맨 끝 → 앞 규칙보다 우선).
   호버: 테두리는 흰색 그대로, 안의 내용만 연두색.
   ========================================================================== */
:root {
  --color-surface: rgba(17, 30, 52, 0.82);
  --color-bg: #08111f;
  --color-border: rgba(94, 128, 190, 0.28);
  --color-border-hover: rgba(125, 165, 230, 0.5);
  --color-primary: #3B8BFF;
  --color-primary-soft: rgba(59, 139, 255, 0.18);
  --radius-md: 16px;
  --radius-lg: 20px;
  --mv-lime: #a6f23c;
  --mv-green-dark: #0f7a3a;
}
body {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(40, 110, 255, 0.22), transparent 60%),
    radial-gradient(900px 480px at 100% 100%, rgba(110, 60, 255, 0.18), transparent 60%),
    var(--color-bg);
}
.mv-panel, .mv-media-dock, .mv-preview-sticky {
  background: linear-gradient(180deg, rgba(22, 38, 66, 0.88), rgba(14, 26, 47, 0.88));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}
.mv-panel-title, .mv-section-title { font-size: 0.9rem; font-weight: 700; }

/* 선택(활성) 항목 — 밝은 파란 그라데이션 */
.mv-tx-row.is-active, .mv-light-btn.is-active, .mv-style-chip.is-active {
  border-color: #4c9bff;
  background: linear-gradient(180deg, rgba(59, 139, 255, 0.32), rgba(59, 139, 255, 0.14));
  box-shadow: 0 0 0 1px rgba(76, 155, 255, 0.35), 0 0 14px rgba(59, 139, 255, 0.25);
}
.mv-tx-row, .mv-light-btn, .mv-intro-item {
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s, color .15s;
}

/* 호버 — 효과 목록·Intro 영상·Light: 테두리는 흰색 그대로, 안의 내용(글자·아이콘)만 연두색 */
@media (min-width: 901px) {
  .mv-tx-row:hover, .mv-tx-row:focus-visible, .mv-tx-row.is-active:hover,
  .mv-light-btn:hover, .mv-light-btn:focus-visible, .mv-light-btn.is-active:hover {
    border-color: #fff;
    color: var(--mv-lime);
    box-shadow: none;
    outline: none;
  }
  .mv-tx-row:hover .mv-tx-row-name, .mv-tx-row:focus-visible .mv-tx-row-name,
  .mv-tx-row:hover .mv-fav-star, .mv-light-btn:hover .mv-light-num { color: var(--mv-lime); }
}
.mv-intro-item:hover, .mv-intro-item:focus-visible, .mv-intro-item.is-selected:hover {
  border-color: #fff;
  box-shadow: none;
  outline: none;
  z-index: 2;
}
.mv-intro-item.is-selected { border-color: #4c9bff; box-shadow: 0 0 0 2px rgba(59, 139, 255, 0.45); }

/* 입력칸 — 흰 배경 금지: 패널보다 살짝 밝은 네이비 + 은은한 흰 테두리(시안) */
input[type="text"], input[type="date"], input[type="search"], input[type="number"], textarea, select,
.mv-field input[type="text"], .mv-field textarea, .mv-text-content, .mv-ending-textarea {
  background: rgba(40, 62, 100, 0.55);
  color: var(--color-text-main);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color-scheme: dark;
}
input[type="text"]::placeholder, textarea::placeholder { color: rgba(170, 190, 225, 0.55); }
input[type="text"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(48, 74, 118, 0.65);
}
select option { background: #16233a; color: var(--color-text-main); }

/* 녹음 시작 · 음성 불러오기 — 같은 크기 + 호버(흰 테두리, 안의 글자 연두색) */
.mv-record-controls #mv-record-start-btn, .mv-record-controls .mv-upload-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 128px; height: 34px; padding: 0 0.9rem; margin: 0;
  font-size: 0.78rem; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
  background: rgba(40, 62, 100, 0.55); color: var(--color-text-main); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.mv-record-controls #mv-record-start-btn:hover, .mv-record-controls .mv-upload-btn:hover,
.mv-record-controls #mv-record-start-btn:focus-visible {
  border-color: #fff; color: var(--mv-lime); outline: none;
}

/* Intro 영상 호버 — 시작 Light(.mv-light-btn)와 같은 2px 흰 테두리 + 살짝 튀어나오는 느낌 */
.mv-intro-item { border-width: 2px; }
.mv-intro-item:hover, .mv-intro-item:focus-visible, .mv-intro-item.is-selected:hover {
  border-color: #fff;
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.55);
  z-index: 3;
}

/* 제목·날짜 입력 글자색 통일 — 예전 #000 고정 때문에 어두운 입력칸에서 글자가 안 보였음 */
#mv-intro-title, #mv-intro-date, #mv-intro-title:focus, #mv-intro-date:focus { color: var(--color-text-main); }

/* 녹음 중 파형 높이 = 녹음 후 "녹음1" 행 높이(30px 버튼 + 패딩 + 테두리 ≈ 42px) — 누를 때 세로가 늘어나지 않게.
   녹음 중에는 기존 행을 숨겨 파형이 그 자리를 그대로 대신한다. */
.mv-record-wave { box-sizing: border-box; height: 42px; margin-top: 0.5rem; }
.mv-record-wave:not([hidden]) + .mv-record-list { display: none; }

/* 음성 불러오기 — 글자 진하기 제거(보통 굵기) */
.mv-record-controls .mv-upload-btn { font-weight: 400; }

/* 자막 입력칸 = 엔딩 메시지 입력칸과 같은 모양(배경·테두리·모서리·여백·글자 크기·글자색·안내문 색) */
.mv-text-content, .mv-center-scroll > #mv-text-panel .mv-text-content {
  background: rgba(40, 62, 100, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  color: var(--color-text-main);
  font-size: calc(0.78rem * var(--fs, 1));
}
.mv-text-content:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); background: rgba(48, 74, 118, 0.65); }
.mv-text-content:empty::before { color: rgba(170, 190, 225, 0.55); }

/* 즐겨찾기 별 — 호버하면 속이 채워진 밝은 노랑 ★ (이미 즐겨찾기한 별도 같은 밝은 노랑) */
.mv-fav-star.is-fav, .mv-tx-row:hover .mv-fav-star.is-fav, .mv-bgm-row .mv-fav-star.is-fav { color: #FFD60A; }
.mv-fav-star:not(.is-fav):hover, .mv-tx-row:hover .mv-fav-star:not(.is-fav):hover,
.mv-bgm-row .mv-fav-star:not(.is-fav):hover, .mv-tx-row .mv-fav-star:not(.is-fav):hover { color: transparent; }
.mv-fav-star:not(.is-fav):hover::before { content: '\2605'; position: absolute; inset: 0; color: #FFD60A; }

/* 화면 전환·프리미엄 효과 줄 높이 통일 — 한글 이름("없음"/"기본 자동")이 들어간 첫 줄만 폰트 대체로 4px 더 커졌음.
   두 번째 줄 높이(18px)를 기준으로 모든 줄을 고정 */
@media (min-width: 901px) {
  .mv-tx-row { height: 18px; box-sizing: border-box; }
  .mv-tx-row .mv-tx-row-name { line-height: 1; }
}

/* Intro 영상 호버 — 튀어나옴을 약 1/3로 축소 */
.mv-intro-item:hover, .mv-intro-item:focus-visible, .mv-intro-item.is-selected:hover {
  transform: translateY(-1px) scale(1.023);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* 입력칸 배경을 반투명이 아닌 단색으로 고정 — 아래 바탕(자막 카드는 더 어두움)에 따라 색이 달라 보이던 문제 해결.
   자막 입력칸 · 엔딩 메시지 · 제목/날짜 등 모든 입력칸이 항상 같은 색 */
input[type="text"], input[type="date"], input[type="search"], input[type="number"], textarea, select,
.mv-field input[type="text"], .mv-field textarea, .mv-text-content, .mv-ending-textarea,
.mv-center-scroll > #mv-text-panel .mv-text-content { background: #1d2f4e; }
input[type="text"]:focus, input[type="date"]:focus, textarea:focus, select:focus, .mv-text-content:focus { background: #233a60; }

/* 자막 입력칸 글자 모양도 엔딩 메시지 입력칸과 동일(굵기·줄 간격) */
.mv-text-content, .mv-center-scroll > #mv-text-panel .mv-text-content { font-weight: 400; line-height: 1.5; }

/* 자막 글자색 칩(가 가 가 가 가) — 투박한 회색 블록 대신 입력칸과 같은 네이비 칩 + 가는 테두리 */
.mv-text-colors { gap: 0.3rem; }
.mv-text-swatch {
  min-width: 28px; height: 26px; padding: 0 0.3rem;
  background: #1d2f4e;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
.mv-text-swatch:hover { border-color: #fff; background: #233a60; }
.mv-text-swatch.is-active { border-color: #fff; background: #284470; box-shadow: inset 0 -2px 0 currentColor; }
.mv-text-swatch.is-black { text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff; }

/* 불투명 · 음성 불러오기 — 글자 굵기 보통(400) */
.mv-text-opaque-label, .mv-text-opaque-label *,
.mv-record-controls .mv-upload-btn, label.mv-upload-btn { font-weight: 400 !important; }

/* 시작 Light 효과는 즐겨찾기 별 없음 */
.mv-light-btn .mv-fav-star { display: none; }

/* 시작 Light 효과 · Intro 영상 소제목 — 앞에 아이콘 */
.mv-subpanel-title { display: flex; align-items: center; gap: 0.35rem; }
.mv-subpanel-title .mv-ico { width: 16px; height: 16px; }

/* 녹음 중: '녹음 시작' 칸(128px)이 '잠시멈춤' / '정지저장' 두 칸으로 나뉜다 */
.mv-record-controls #mv-record-pause-btn, .mv-record-controls #mv-record-stop-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; width: 62px; height: 34px; padding: 0; margin: 0;
  font-size: 0.76rem; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
  background: rgba(40, 62, 100, 0.55); color: var(--color-text-main); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.mv-record-controls #mv-record-pause-btn { margin-right: -0.25rem; }
.mv-record-controls #mv-record-stop-btn { border-color: rgba(239, 68, 68, 0.6); }
.mv-record-controls #mv-record-pause-btn:hover, .mv-record-controls #mv-record-stop-btn:hover { border-color: #fff; color: var(--mv-lime); }
.mv-record-controls #mv-record-start-btn[hidden], .mv-record-controls #mv-record-pause-btn[hidden],
.mv-record-controls #mv-record-stop-btn[hidden] { display: none !important; }

/* 자막 안내 문구 줄바꿈(&#10;) 표시 */
.mv-text-content:empty::before { white-space: pre-line; }
.mv-ending-textarea::placeholder { white-space: pre-line; }

/* Intro 영상도 즐겨찾기 별 없음 */
.mv-intro-item .mv-fav-star { display: none; }

/* 마무리 · 엔딩 메시지 — 제목·글꼴·크기 슬라이더를 항상 한 줄에 */
.mv-ending-head { flex-wrap: nowrap; }
.mv-ending-head .mv-section-title, .mv-ending-head .mv-title-wrap { white-space: nowrap; flex: 0 0 auto; }
.mv-ending-head .mv-ending-font { flex: 0 1 auto; min-width: 0; width: 6.5rem; }
.mv-ending-head .mv-ending-size-label { flex: 1 1 0; min-width: 60px; }
.mv-ending-head .mv-ending-size { min-width: 30px; }

/* 마무리 · 엔딩 메시지 — 제목 옆 공백 + 글꼴 선택/크기 바를 자막 칸과 같은 크기로, 사이 간격 */
.mv-ending-head { justify-content: flex-start; gap: 0; }
.mv-ending-head .mv-section-title { margin-right: 1.6rem; }
.mv-ending-head .mv-ending-font {
  flex: 0 0 auto; width: 5.6rem; padding: 0.3rem 0.4rem; border-radius: 6px; font-size: 0.76rem;
  margin-right: 1.1rem;
}
.mv-ending-head .mv-ending-size-label {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  white-space: nowrap; font-size: 0.74rem; color: #fff;
}
.mv-ending-head .mv-ending-size-label b { min-width: 1.6em; text-align: right; font-weight: 600; }
.mv-ending-head .mv-ending-size { flex: 0 0 auto; width: 72px; min-width: 72px; }

/* 글꼴 선택 + 크기 바를 오른쪽 끝으로 — 끝선에서 글자 두 개(약 1.6rem) 안쪽 */
.mv-ending-head { padding-right: 1.6rem; }
.mv-ending-head .mv-ending-font { margin-left: auto; }


/* "이 사진의 움직임" 패널 삭제(요청) — 사진 움직임은 기본(랜덤 자동)으로만 동작 */
#mv-item-options { display: none !important; }

/* 카드에 효과N 표기 — 개별 지정한 화면 전환/사진 효과 */
.mv-media-fx-badge { position: absolute; bottom: 16px; left: 4px; background: #a6f23c; color: #10200a; font-size: 0.55rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 4px; }

/* 화면 전환 효과 번호 */
.mv-tx-row-num { flex: 0 0 auto; min-width: 1.15em; text-align: right; margin-right: 0.15rem; font-size: 0.58rem; font-weight: 700; color: var(--color-text-muted); }
.mv-tx-row:hover .mv-tx-row-num { color: var(--mv-lime); }

/* 효과N — 카드 맨 밑단(왼쪽). 같은 자리를 쓰던 동영상N은 효과가 있을 때만 한 칸 위로 */
.mv-media-fx-badge { bottom: 3px; left: 4px; }
.mv-media-card:has(.mv-media-fx-badge) .mv-media-badge { bottom: 16px; }

/* 번호 없는 항목(효과 삭제 · 기본 자동 · 랜덤 자동) — 번호가 있는 항목의 이름 시작점에 맞춰 들여쓰기(약 3칸) */
.mv-tx-row-name.is-indent { margin-left: 0.85rem; }

/* 모바일(900px 이하) 사진·동영상 영역 — 끌어다 놓는 칸은 원래 크기 그대로, 그 아래에 사진/동영상 자리를 항상 확보
   (비어 있어도 카드 2줄 높이, 늘어나면 내용만큼 같이 늘어남). 한 줄 5개, 화살표 없음. 파일 맨 끝 → 앞 규칙보다 우선. */
@media (max-width: 900px) {
  /* 저장된 드래그 높이가 있어도 내용이 잘리지 않게 — 항상 내용 높이만큼 */
  .mv-media-dock, .mv-media-dock.is-resized {
    height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; overflow: visible !important;
  }
  .mv-media-dock #mv-media-list, .mv-media-list {
    max-height: none !important; overflow: visible !important;
    min-height: 80vw; /* 비어 있어도 카드 약 4줄 높이 확보 */
  }
  .mv-media-arrow { display: none !important; }
  .mv-media-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
  .mv-media-dock .mv-media-card, .mv-media-row > .mv-media-card {
    width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: auto;
  }
  .mv-split-group { grid-column: 1 / -1; }
}

/* 모바일(900px 이하) 시작 Light 효과 — 한 줄 4개(요청). 480px 이하 규칙(3개)보다도 우선하도록 파일 맨 끝에 둔다. */
@media (max-width: 900px) {
  .mv-light-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
}

/* 녹음 버튼 3종(녹음 시작 · 잠시멈춤/이어녹음 · 정지저장) — 아이콘 + 선명한 색(PC/모바일 공통) */
.mv-record-controls #mv-record-start-btn, .mv-record-controls #mv-record-pause-btn, .mv-record-controls #mv-record-stop-btn {
  gap: 0.35rem; font-weight: 700; color: #fff; border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mv-record-controls #mv-record-pause-btn, .mv-record-controls #mv-record-stop-btn { width: auto; min-width: 82px; padding: 0 0.7rem; margin-right: 0; }
.mv-rec-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.mv-record-controls #mv-record-start-btn { background: linear-gradient(180deg, #f87171, #dc2626); }
.mv-record-controls #mv-record-pause-btn { background: linear-gradient(180deg, #fbbf24, #d97706); }
.mv-record-controls #mv-record-stop-btn { background: linear-gradient(180deg, #34d399, #059669); }
.mv-record-controls #mv-record-start-btn:hover, .mv-record-controls #mv-record-pause-btn:hover,
.mv-record-controls #mv-record-stop-btn:hover, .mv-record-controls #mv-record-start-btn:focus-visible {
  color: #fff; filter: brightness(1.1); border: 0;
}
@media (max-width: 900px) {
  .mv-record-controls #mv-record-start-btn, .mv-record-controls #mv-record-pause-btn, .mv-record-controls #mv-record-stop-btn { color: #fff; height: 40px; }
  .mv-record-controls #mv-record-start-btn { background: linear-gradient(180deg, #f87171, #dc2626); border: 0; }
  #mv-record-start-btn.is-recording { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; }
}

/* 녹음 버튼 3종 — 파스텔 톤(과한 색 완화): 연한 바탕 + 같은 계열 진한 글자/아이콘 */
.mv-record-controls #mv-record-start-btn, .mv-record-controls #mv-record-pause-btn, .mv-record-controls #mv-record-stop-btn {
  border: 1px solid transparent; box-shadow: none; font-weight: 600;
}
.mv-record-controls #mv-record-start-btn { background: #FECACA; color: #991B1B; border-color: #FCA5A5; }
.mv-record-controls #mv-record-pause-btn { background: #FDE68A; color: #92400E; border-color: #FCD34D; }
.mv-record-controls #mv-record-stop-btn { background: #BBF7D0; color: #166534; border-color: #86EFAC; }
.mv-record-controls #mv-record-start-btn:hover, .mv-record-controls #mv-record-pause-btn:hover,
.mv-record-controls #mv-record-stop-btn:hover, .mv-record-controls #mv-record-start-btn:focus-visible {
  filter: brightness(0.97); border-width: 1px;
}
.mv-record-controls #mv-record-start-btn:hover { color: #991B1B; border-color: #F87171; }
.mv-record-controls #mv-record-pause-btn:hover { color: #92400E; border-color: #FBBF24; }
.mv-record-controls #mv-record-stop-btn:hover { color: #166534; border-color: #4ADE80; }
@media (max-width: 900px) {
  .mv-record-controls #mv-record-start-btn { background: #FECACA; color: #991B1B; border: 1px solid #FCA5A5; }
  .mv-record-controls #mv-record-pause-btn { background: #FDE68A; color: #92400E; }
  .mv-record-controls #mv-record-stop-btn { background: #BBF7D0; color: #166534; }
  #mv-record-start-btn.is-recording { background: #FECACA; color: #991B1B; }
}

/* 개인정보 안내 배너는 뷰어(미리보기) 안쪽 한가운데에 겹쳐 작업 시작 전까지 계속 보인다(요청) — 뷰어 크기에 비례해 크기가 조절된다 */
.mv-preview-frame { container-type: inline-size; }
.mv-preview-frame .mv-privacy-banner { position: absolute; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 88%; max-width: 560px; margin: 0; box-sizing: border-box; padding: 2.2cqw 6cqw 2.2cqw 2.6cqw; gap: 2cqw; z-index: 8; transition: opacity 0.4s; }
.mv-preview-frame .mv-privacy-banner[hidden] { display: none; }
.mv-preview-frame .mv-privacy-banner.is-fading { opacity: 0; pointer-events: none; }
.mv-preview-frame .mv-pb-icon { width: clamp(24px, 6cqw, 40px); height: clamp(24px, 6cqw, 40px); }
.mv-preview-frame .mv-pb-icon svg { width: 60%; height: 60%; }
.mv-preview-frame .mv-pb-text strong { font-size: clamp(11px, 2.8cqw, 17px); }
.mv-preview-frame .mv-pb-text span { font-size: clamp(9px, 1.9cqw, 12px); line-height: 1.4; }
.mv-preview-frame .mv-pb-chips { display: none; }

/* 미디어가 없는 첫 화면(뷰어가 빈 안내 상태)에서는 컷팅 줄·음성 위치 바 자리를 비워 두지 않는다(요청) —
   뷰어 검은 화면 아래 어두운 빈 공간 제거. 사진/동영상이 들어오면 기존 고정 높이가 그대로 적용된다. */
.mv-preview-sticky:has(.mv-preview-empty) #mv-trim-row-all,
.mv-preview-sticky:has(.mv-preview-empty) #mv-voice-tl { display: none !important; min-height: 0 !important; margin: 0 !important; }

/* 박스 정리(요청) — 음성 녹음 박스가 남는 높이만큼 늘어나 아래가 비어 보이던 것을 내용 높이로 줄이고,
   박스 사이 간격·모서리를 통일한다. 첫 화면(미디어 없음)에서는 자막 박스의 고정 높이도 풀어 안내 문구 한 줄만 차지한다. */
.mv-editor-center .mv-center-scroll > .mv-voice-record-panel { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.mv-editor-center .mv-center-scroll > .mv-voice-record-panel:has(.mv-record-list:not(:empty)) { justify-content: flex-start; }
.mv-editor-center:has(.mv-preview-empty) .mv-center-scroll { margin-top: 0.5rem; gap: 0.5rem; }
.mv-editor-center:has(.mv-preview-empty) .mv-center-scroll > #mv-text-panel { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; border-radius: 12px !important; }
.mv-editor-center:has(.mv-preview-empty) .mv-center-scroll > .mv-voice-record-panel { border-radius: 12px; padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* 왼쪽 열(인트로·엔딩) 스크롤 제거(요청) — 가로: 라디오 한 줄 고정(nowrap)이 칸보다 넓어 생기던 가로 스크롤을 줄바꿈 허용으로 해소.
   세로: 박스 안팎 여백을 줄여 한 화면에 들어오게 하고, 그래도 넘칠 때만 스크롤바 없이 휠로 이동한다. */
.mv-editor-left { overflow-x: hidden; gap: 0.5rem; scrollbar-width: none; -ms-overflow-style: none; }
.mv-editor-left::-webkit-scrollbar { display: none; }
.mv-editor-left > .mv-collapse, .mv-editor-left > .mv-section-ending { padding: 0.55rem 0.75rem; }
.mv-editor-left > .mv-collapse > .mv-collapse-summary { margin-bottom: 0.45rem; }
.mv-editor-left .mv-intro-mode { flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-bottom: 0.45rem; white-space: normal; }
.mv-editor-left .mv-intro-black-fields { gap: 0.6rem; margin-bottom: 0.45rem; }
.mv-editor-left .mv-intro-toggles { gap: 1rem; margin: 0.1rem 0 0.45rem; }
.mv-editor-left .mv-intro-style-area { gap: 0.4rem; margin-bottom: 0.45rem; }
.mv-editor-left .mv-subpanel-title { margin: 0.3rem 0 0.3rem; }
.mv-editor-left .mv-light-grid, .mv-editor-left .mv-intro-grid { gap: 0.35rem; }
.mv-editor-left .mv-light-grid { max-height: none; overflow: visible; }
.mv-section-ending .mv-section-title { margin-bottom: 0.4rem; }

/* 인트로 박스(요청) — 아이콘+"인트로"·접기 화살표 오른쪽 같은 줄에 Light 효과/Intro 영상/없음을 올린다 */
.mv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mv-editor-left details.mv-collapse:has(> .mv-intro-mode) { display: block; }
.mv-editor-left details.mv-collapse:has(> .mv-intro-mode) > .mv-collapse-summary { float: left; margin: 0.1rem 0.7rem 0.45rem 0; }
.mv-editor-left details.mv-collapse:has(> .mv-intro-mode) > .mv-intro-mode { margin-bottom: 0.45rem; gap: 0.3rem 0.7rem; }
.mv-editor-left details.mv-collapse:has(> .mv-intro-mode) > .mv-intro-mode ~ * { clear: both; }

/* 왼쪽 "마무리 · 엔딩 메시지" 박스와 가운데 "녹음 시작" 박스의 아래 선을 맞추고(둘 다 열 끝까지), 박스 아래 사진·동영상 칸과의 사이에 여백을 더 둔다(요청) */
.mv-editor-left, .mv-editor-center, .mv-editor-right { padding-bottom: 0.7rem; box-sizing: border-box; }
.mv-editor-left > .mv-section-ending { flex: 1 1 auto; }

/* 가운데 열 남는 세로 공간은 자막 박스와 녹음 박스가 2:1로 나눠 갖고, 각 박스 안 내용은 세로 가운데에 둔다(요청) —
   뷰어 아래 선이 왼쪽 엔딩 박스 아래 선과 맞는다. 모바일(세로 쌓임)은 건드리지 않는다. */
@media (min-width: 901px) {
  .mv-editor-center .mv-center-scroll > #mv-text-panel { flex: 2 1 auto !important; display: flex; flex-direction: column; justify-content: center; }
  .mv-editor-center .mv-center-scroll > .mv-voice-record-panel { flex: 1 1 auto !important; }
}

/* 뷰어 아래 예약 공간 안내(요청) — 동영상 편집 줄/자막·녹음 위치 바가 아직 없을 때 빈 칸 대신 안내 카드를 보여준다(PC) */
.mv-guide { display: none; align-items: center; gap: 0.7rem; box-sizing: border-box; margin-top: 0.4rem; padding: 0.45rem 0.8rem; border: 1.5px dashed rgba(96,165,250,0.45); border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, rgba(59,130,246,0.14), rgba(15,23,42,0.3)); }
.mv-guide-ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #93c5fd; background: rgba(59,130,246,0.2); border: 1px solid rgba(96,165,250,0.4); }
.mv-guide-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mv-guide-text strong { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
.mv-guide-text span { font-size: 0.72rem; line-height: 1.4; opacity: 0.72; }
@media (min-width: 901px) {
  .mv-preview-sticky #mv-trim-row-all[hidden], .mv-preview-sticky #mv-voice-tl[hidden] { display: none !important; }
  .mv-preview-sticky #mv-trim-row-all[hidden] + #mv-guide-trim, .mv-preview-sticky #mv-voice-tl[hidden] + #mv-guide-voice { display: flex; }
  .mv-preview-sticky #mv-guide-trim { min-height: 50px; }
  .mv-preview-sticky #mv-guide-voice { min-height: 50px; margin-top: 0.3rem; }
  .mv-preview-sticky:has(.mv-preview-empty) .mv-guide { display: none !important; }
}

/* 녹음 박스 버튼 정리(요청) — 요즘 흐름의 단순·고급 스타일: 유리 느낌의 어두운 버튼 + 포인트 색 한 가지.
   녹음 시작 = 마이크 아이콘(포인트 코랄), 음성 불러오기 = 겹친 폴더 아이콘(은은한 블루). 잠시멈춤/중지는 같은 틀에 아이콘 색만 다르게. */
.mv-voice-record-panel .mv-record-controls { gap: 0.6rem; align-items: center; }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 40px; padding: 0 1rem; min-width: 0; margin: 0;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #f1f5f9;
  font-size: 0.82rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn:hover,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn:hover,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn:hover,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.26); color: #fff; transform: translateY(-1px); }
.mv-voice-record-panel .mv-record-controls .mv-rec-ico { width: 18px; height: 18px; }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn { background: linear-gradient(135deg, rgba(251,113,133,0.22), rgba(244,63,94,0.12)); border-color: rgba(251,113,133,0.5); color: #fff; }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn .mv-rec-ico { color: #fb7185; }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn:hover { background: linear-gradient(135deg, rgba(251,113,133,0.32), rgba(244,63,94,0.18)); border-color: rgba(251,113,133,0.75); }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn.is-recording { background: rgba(244,63,94,0.28); border-color: #fb7185; }
.mv-voice-record-panel .mv-record-controls .mv-upload-btn .mv-rec-ico { color: #7dd3fc; }
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn .mv-rec-ico { color: #fcd34d; }
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn { border-color: rgba(251,113,133,0.5); }
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn[hidden],
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn[hidden],
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn[hidden] { display: none !important; }
.mv-voice-record-panel .mv-record-status { font-size: 0.76rem; color: rgba(226,232,240,0.62); }
.mv-voice-record-panel .mv-record-status.is-recording { color: #fda4af; }
.mv-voice-record-panel .mv-record-device { height: 40px; padding: 0 0.7rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: #f1f5f9; font-size: 0.78rem; }

/* 세로 박스 사이 간격 통일(요청) — 왼쪽 열(인트로↔엔딩)처럼 가운데 열도 뷰어 ↔ 자막 ↔ 녹음 박스 사이에 같은 간격을 둔다 */
.mv-editor-left { gap: 0.6rem; }
@media (min-width: 901px) {
  .mv-editor-center { gap: 0.6rem; }
  .mv-editor-center .mv-center-scroll,
  .mv-editor-center:has(.mv-preview-empty) .mv-center-scroll { gap: 0.6rem !important; margin-top: 0 !important; }
  .mv-editor-center .mv-center-scroll > #mv-text-panel { margin: 0 !important; border-radius: 12px !important; }
  .mv-editor-center .mv-center-scroll > .mv-voice-record-panel { border-radius: 12px; }
}

/* 아래 선 맞춤 유지(요청) — 가운데 열 안쪽 스크롤바가 생겨 폭·바닥이 어긋나 보이지 않도록 스크롤바만 숨긴다(휠 이동은 그대로) */
@media (min-width: 901px) {
  .mv-editor-center .mv-center-scroll { scrollbar-width: none; }
  .mv-editor-center .mv-center-scroll::-webkit-scrollbar { display: none; }
}

/* 화면 전환 효과(요청) — "적용 대상" 줄 오른쪽에 전환 길이 슬라이더를 같은 줄로 올려 아래 공간을 확보한다 */
.mv-tx-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; }
.mv-tx-headrow .mv-tx-target-label { margin: 0; flex: 0 1 auto; min-width: 0; }
.mv-tx-headrow .mv-field-inline { margin: 0; flex: 1 1 0; min-width: 9rem; max-width: 15rem; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.74rem; }
.mv-tx-headrow .mv-field-inline input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto; }

/* 미디어가 없는 첫 화면(요청) — 뷰어 아래 칸이 접혀 있으므로, 녹음 시작 위 빈 자리에 같은 모양의 구간 안내 카드를 보여준다 */
.mv-guide-stack { display: none; }
.mv-editor-center:has(.mv-preview-empty) .mv-guide-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.mv-guide-stack .mv-guide { display: flex; margin-top: 0; }

/* 해상도·확대 배율이 달라도 깨지지 않게(요청) */
/* 1) 상단: 제목/화면비 버튼이 두 줄로 꺾이지 않게 한 줄 고정 + 좁은 폭에서는 글자만 줄인다 */
@media (min-width: 901px) {
  .mv-topbar-left, .mv-topbar-left * { white-space: nowrap; }
  .mv-topbar-left { overflow: hidden; }
  .mv-brand { font-size: clamp(0.92rem, 1.35vw, 1.15rem); min-width: 0; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  .mv-topbar-left .mv-btn, .mv-topbar-left button { padding-left: 0.55rem; padding-right: 0.55rem; font-size: 0.74rem; }
}
/* 2) 녹음 박스의 구간 안내 카드는 세로 공간이 넉넉할 때만 보이고, 내용이 넘쳐도 위 자막 박스를 덮지 않는다 */
.mv-editor-center .mv-center-scroll > .mv-voice-record-panel { justify-content: safe center; overflow: hidden; }
@media (max-height: 760px) and (min-width: 901px) {
  .mv-editor-center:has(.mv-preview-empty) .mv-guide-stack { display: none; }
}

/* 녹음 줄(요청) — "녹음된 음성 없음" 문구 제거, 마이크 선택칸이 아래로 꺾여 잘리지 않게 한 줄에서 남는 폭을 차지한다 */
.mv-voice-record-panel .mv-record-status:empty { display: none; }
.mv-voice-record-panel .mv-record-controls { flex-wrap: nowrap; }
.mv-voice-record-panel .mv-record-controls > button, .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { flex: 0 0 auto; }
.mv-voice-record-panel .mv-record-controls .mv-record-device { flex: 1 1 0; min-width: 5.5rem; max-width: none; margin-left: 0; text-overflow: ellipsis; }

/* 마이크 선택칸(요청) — 차지하는 자리는 그대로 두고 선택칸만 작게, 앞에 설정(제어판) 아이콘을 붙인다 */
.mv-voice-record-panel .mv-record-device-wrap { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.mv-voice-record-panel .mv-record-device-wrap .mv-rec-ico { width: 18px; height: 18px; flex: 0 0 auto; color: rgba(226,232,240,0.7); }
.mv-voice-record-panel .mv-record-device-wrap .mv-record-device { flex: 0 1 8.5rem; width: 8.5rem; min-width: 4.5rem; height: 34px; padding: 0 0.5rem; font-size: 0.74rem; border-radius: 10px; }

/* 마이크 선택칸(요청) — 아이콘이 선택칸 "안"에 들어가도록 테두리·배경을 감싸는 칸으로 옮기고 select는 투명하게 둔다 */
.mv-voice-record-panel .mv-record-device-wrap { flex: 0 1 9.5rem; margin-left: auto; width: 9.5rem; min-width: 5.5rem; height: 34px; box-sizing: border-box; padding: 0 0.2rem 0 0.55rem; gap: 0.3rem; justify-content: flex-start;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
.mv-voice-record-panel .mv-record-device-wrap:focus-within { border-color: rgba(125,211,252,0.6); }
.mv-voice-record-panel .mv-record-device-wrap .mv-record-device { flex: 1 1 0; width: auto; min-width: 0; height: 100%; padding: 0 0.3rem 0 0; border: 0; background: transparent; color: #f1f5f9; outline: 0; text-overflow: ellipsis; }

/* 마이크 목록(드롭다운) 왼쪽 정렬(요청) — select가 칸 전체를 차지해야 목록이 칸의 왼쪽 선에서 시작한다. 아이콘은 select 위에 겹쳐 둔다 */
.mv-voice-record-panel .mv-record-device-wrap { position: relative; padding: 0; }
.mv-voice-record-panel .mv-record-device-wrap .mv-rec-ico { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.mv-voice-record-panel .mv-record-device-wrap .mv-record-device { flex: 1 1 100%; width: 100%; padding: 0 0.3rem 0 2.1rem; border-radius: 10px; cursor: pointer; }

/* 음성 불러오기 위치 고정(요청) — 녹음 시작 ↔ 잠시멈춤/중지로 버튼이 바뀌어도 "음성 불러오기"는 중앙보다 살짝 오른쪽 같은 자리에 둔다.
   3칸 격자: [녹음 버튼들+상태] [음성 불러오기] [마이크 선택]. 왼쪽 칸을 조금 더 넓게 잡아 가운데에서 오른쪽으로 치우치게 한다. */
@media (min-width: 901px) {
  .mv-voice-record-panel .mv-record-controls { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.8fr); align-items: center; column-gap: 0.6rem; flex-wrap: nowrap; }
  .mv-voice-record-panel .mv-rec-actions { display: flex; align-items: center; gap: 0.6rem; min-width: 0; justify-self: start; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { grid-column: 2; justify-self: center; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { grid-column: 3; justify-self: end; margin-left: 0; }
}
@media (max-width: 900px) { .mv-rec-actions { display: contents; } }

/* 녹음 중 줄(요청) — 녹음 상태/시간이 좁아 두 줄로 꺾이므로, 음성 불러오기·마이크 선택은 작게 줄여 오른쪽에 붙이고(위치 고정) 왼쪽 칸을 넓힌다 */
@media (min-width: 901px) {
  .mv-voice-record-panel .mv-record-controls { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.5rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { grid-column: 2; justify-self: end; height: 36px; padding: 0 0.7rem; gap: 0.35rem; font-size: 0.76rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn .mv-rec-ico { width: 16px; height: 16px; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { grid-column: 3; justify-self: end; width: 6.5rem; min-width: 6.5rem; flex: 0 0 6.5rem; height: 36px; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-record-device { font-size: 0.72rem; padding-left: 1.9rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-rec-ico { left: 0.5rem; width: 16px; height: 16px; }
  .mv-voice-record-panel .mv-rec-actions { gap: 0.45rem; }
  .mv-voice-record-panel .mv-rec-actions .mv-btn { height: 36px; padding: 0 0.8rem; }
  .mv-voice-record-panel .mv-record-status { white-space: nowrap; font-size: 0.74rem; }
}

/* 잠시멈춤/이어녹음/정지저장 버튼 글자가 두 줄로 꺾이지 않게 한 줄 고정(요청) */
.mv-voice-record-panel .mv-rec-actions .mv-btn, .mv-voice-record-panel .mv-rec-actions .mv-btn span { white-space: nowrap; word-break: keep-all; }
.mv-voice-record-panel .mv-rec-actions .mv-btn { flex: 0 0 auto; width: auto; }
.mv-voice-record-panel .mv-rec-actions { flex-wrap: nowrap; }

/* 음성 불러오기 글자 장평 통일(요청) — label은 본문 글꼴, button은 브라우저 기본 글꼴이라 자폭이 달라 보였다. 같은 글꼴·자간·최소폭 없음으로 맞춘다 */
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn,
.mv-voice-record-panel .mv-record-controls .mv-record-device { font-family: inherit; font-stretch: normal; letter-spacing: -0.01em; font-weight: 500 !important; min-width: 0; }
.mv-voice-record-panel .mv-record-controls .mv-upload-btn { width: auto; }
.mv-voice-record-panel .mv-record-controls .mv-record-device-wrap .mv-record-device { min-width: 0; }

/* 마이크 선택칸(요청) — 아이콘 제거, "기본 마이크"가 잘리지 않도록 폭·안쪽 여백 조정 */
@media (min-width: 901px) {
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { width: 8rem; min-width: 8rem; flex: 0 0 8rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-record-device { padding: 0 0.3rem 0 0.7rem; }
}

/* 녹음 줄 겹침 방지(요청) — 오른쪽 버튼(음성 불러오기·마이크)을 더 줄이고, 왼쪽 칸은 넘치는 부분을 잘라 오른쪽 버튼과 절대 겹치지 않게 한다.
   박스 폭에 따라 단계적으로 줄인다(컨테이너 쿼리). */
@media (min-width: 901px) {
  .mv-voice-record-panel { container-type: inline-size; }
  .mv-voice-record-panel .mv-rec-actions { overflow: hidden; }
  .mv-voice-record-panel .mv-record-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { padding: 0 0.6rem; font-size: 0.72rem; height: 34px; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { width: 6.6rem; min-width: 6.6rem; flex-basis: 6.6rem; height: 34px; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-record-device { font-size: 0.7rem; padding-left: 0.55rem; }
  .mv-voice-record-panel .mv-rec-actions .mv-btn { padding: 0 0.6rem; font-size: 0.76rem; height: 34px; }
}
@container (max-width: 560px) {
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn .mv-rec-ico { display: none; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { width: 5.8rem; min-width: 5.8rem; flex-basis: 5.8rem; }
  .mv-voice-record-panel .mv-rec-actions .mv-btn { padding: 0 0.5rem; gap: 0.3rem; }
  .mv-voice-record-panel .mv-record-controls { column-gap: 0.35rem; }
}

/* 잠시멈춤·정지저장 버튼 더 작게(요청) — 상태 문구(녹음 중 시간)가 잘리지 않도록 자리를 더 확보 */
@media (min-width: 901px) {
  .mv-voice-record-panel .mv-rec-actions { gap: 0.3rem; }
  .mv-voice-record-panel .mv-rec-actions #mv-record-pause-btn,
  .mv-voice-record-panel .mv-rec-actions #mv-record-stop-btn { height: 30px; padding: 0 0.45rem; gap: 0.25rem; font-size: 0.7rem; border-radius: 9px; }
  .mv-voice-record-panel .mv-rec-actions #mv-record-pause-btn .mv-rec-ico,
  .mv-voice-record-panel .mv-rec-actions #mv-record-stop-btn .mv-rec-ico { width: 13px; height: 13px; }
}

/* 녹음 줄 높이·잘림 정리(요청) — 모든 컨트롤 같은 높이(34px), 버튼 윗선이 잘리지 않게 하고, "기본 마이크"가 다 보이게 한다 */
@media (min-width: 901px) {
  .mv-voice-record-panel .mv-rec-actions { overflow: visible; padding: 2px 0; }
  .mv-voice-record-panel .mv-rec-actions .mv-btn,
  .mv-voice-record-panel .mv-rec-actions #mv-record-pause-btn,
  .mv-voice-record-panel .mv-rec-actions #mv-record-stop-btn,
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn,
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { height: 34px; }
  .mv-voice-record-panel .mv-rec-actions .mv-btn { padding: 0 0.5rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap,
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-record-device { text-overflow: clip; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { width: 7.2rem; min-width: 7.2rem; flex-basis: 7.2rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap .mv-record-device { padding: 0 0 0 0.55rem; }
}
@container (max-width: 560px) {
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { width: 7.2rem; min-width: 7.2rem; flex-basis: 7.2rem; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { padding: 0 0.5rem; }
}

/* 녹음 줄 컨트롤 통일(최종) — 녹음 시작/잠시멈춤/정지저장/음성 불러오기/마이크 선택이 높이·모서리·글자·아이콘·테두리까지 전부 같은 규격.
   앞선 규칙들이 ID 선택자·!important로 따로 높이를 정하고 있어(녹음 시작만 40px로 남음) 여기서 한 곳으로 모아 덮어쓴다. */
.mv-voice-record-panel .mv-record-controls {
  --rec-h: 34px; --rec-r: 10px; --rec-fs: 0.74rem; --rec-px: 0.6rem;
}
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn,
.mv-voice-record-panel .mv-record-controls .mv-record-device-wrap {
  box-sizing: border-box !important; height: var(--rec-h) !important; min-height: var(--rec-h) !important; max-height: var(--rec-h) !important;
  border-radius: var(--rec-r) !important; border-width: 1px !important; line-height: 1 !important;
}
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn {
  padding: 0 var(--rec-px) !important; font-size: var(--rec-fs) !important; gap: 0.35rem !important;
}
.mv-voice-record-panel .mv-record-controls #mv-record-start-btn .mv-rec-ico,
.mv-voice-record-panel .mv-record-controls #mv-record-pause-btn .mv-rec-ico,
.mv-voice-record-panel .mv-record-controls #mv-record-stop-btn .mv-rec-ico,
.mv-voice-record-panel .mv-record-controls .mv-upload-btn .mv-rec-ico { width: 16px !important; height: 16px !important; }
.mv-voice-record-panel .mv-record-controls .mv-record-device-wrap .mv-record-device { font-size: var(--rec-fs) !important; }

/* 뷰어 첫 화면 재디자인(요청) — 네온 초록 가로 배너 대신, 가운데 세로형 유리 카드(아이콘·제목·설명·칩)로 정리하고
   "미디어를 추가하면…" 안내는 아래쪽 은은한 문구로 내린다. 색은 어두운 바탕 + 에메랄드 포인트 하나. */
.mv-preview-frame:has(.mv-preview-empty) { background: radial-gradient(120% 90% at 50% 0%, #10213a 0%, #070b14 62%, #04060b 100%); }
.mv-preview-frame .mv-preview-empty::after { background: none; }
.mv-preview-frame .mv-preview-caption { top: auto; bottom: 14px; padding: 0; background: transparent; border: 0; backdrop-filter: none; font-size: 0.74rem; letter-spacing: -0.01em; color: rgba(226,232,240,0.5); }
.mv-preview-frame .mv-privacy-banner {
  flex-direction: column; align-items: center; text-align: center; gap: clamp(6px, 1.6cqw, 12px);
  width: min(80%, 440px); max-width: 440px; padding: clamp(14px, 3cqw, 24px) clamp(16px, 4cqw, 32px);
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.045);
  backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
}
.mv-preview-frame .mv-pb-icon { width: clamp(34px, 7cqw, 46px); height: clamp(34px, 7cqw, 46px); border-radius: 50%; color: #6ee7b7; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.mv-preview-frame .mv-pb-text { align-items: center; gap: 0.3rem; flex: 0 0 auto; }
.mv-preview-frame .mv-pb-text strong { font-size: clamp(13px, 2.7cqw, 17px); font-weight: 600; letter-spacing: -0.02em; }
.mv-preview-frame .mv-pb-text span { max-width: 34ch; font-size: clamp(10px, 1.9cqw, 12.5px); line-height: 1.6; color: rgba(226,232,240,0.68); opacity: 1; }
.mv-preview-frame .mv-pb-chips { display: flex; justify-content: center; gap: 0.4rem; padding: 0; background: none; border: 0; }
.mv-preview-frame .mv-pb-chip { gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.7rem; color: rgba(226,232,240,0.8); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.mv-preview-frame .mv-pb-chip i { display: none; }
.mv-preview-frame .mv-pb-chip::before { content: '✓'; font-size: 0.7rem; color: #6ee7b7; }
.mv-preview-frame .mv-pb-close { top: 10px; right: 12px; color: rgba(226,232,240,0.6); }
@container (max-width: 480px) { .mv-preview-frame .mv-pb-chips { display: none; } }

/* 뷰어 안내 카드 보정(요청) — 설명은 2줄(문장 단위), 테두리·초록 배경은 예전 스타일로 되돌리고 뷰어 바탕색은 그대로 둔다 */
.mv-preview-frame .mv-privacy-banner {
  width: min(88%, 540px); max-width: 540px;
  border: 1px solid rgba(52,211,153,0.55);
  background: linear-gradient(120deg, rgba(16,185,129,0.34), rgba(13,148,136,0.16) 55%, rgba(15,23,42,0.5));
  box-shadow: 0 0 0 1px rgba(52,211,153,0.08), 0 8px 28px rgba(16,185,129,0.14);
  backdrop-filter: blur(8px);
}
.mv-preview-frame .mv-pb-icon { border-radius: 12px; background: rgba(16,185,129,0.18); border: 1px solid rgba(52,211,153,0.45); }
.mv-preview-frame .mv-pb-text span { max-width: none; white-space: normal; color: rgba(255,255,255,0.88); }
.mv-preview-frame .mv-pb-chip { border-color: rgba(52,211,153,0.3); background: rgba(2,6,23,0.4); }

/* 스마트폰(요청) — PC와 같은 모양: 뷰어 안내 카드·구간 안내 카드·녹음 줄 규격을 그대로 쓴다.
   녹음 줄은 폭이 모자라므로 1행 = 녹음 버튼+상태, 2행 = 음성 불러오기(왼쪽) · 마이크 선택(오른쪽). 높이·모서리·글자는 PC와 같은 변수(--rec-*)를 쓴다. */
@media (max-width: 900px) {
  .mv-voice-record-panel .mv-record-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; row-gap: 0.5rem; align-items: center; flex-wrap: nowrap; }
  .mv-voice-record-panel .mv-rec-actions { display: flex; grid-column: 1 / -1; flex-wrap: nowrap; align-items: center; gap: 0.4rem; min-width: 0; padding: 2px 0; }
  .mv-voice-record-panel .mv-record-controls > .mv-upload-btn { grid-column: 1; justify-self: start; width: auto; }
  .mv-voice-record-panel .mv-record-controls > .mv-record-device-wrap { grid-column: 2; justify-self: end; width: 7.2rem; min-width: 7.2rem; flex: 0 0 7.2rem; margin: 0; }
  .mv-voice-record-panel .mv-record-controls .mv-record-device-wrap .mv-record-device { padding: 0 0 0 0.55rem; text-overflow: clip; }
  .mv-voice-record-panel .mv-record-status { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; }
  .mv-voice-record-panel .mv-record-status:empty { display: none; }
  .mv-voice-record-panel .mv-record-controls .mv-rec-actions .mv-btn,
  .mv-voice-record-panel .mv-record-controls .mv-rec-actions .mv-btn span { white-space: nowrap; word-break: keep-all; }
}

/* 첫 화면(미디어 없음)에서는 비활성 재생 막대·큰 재생 버튼을 숨긴다(요청) — 안내 카드 아래로 막대의 그라데이션 경계가 줄처럼 비쳐 보이던 문제 */
.mv-preview-frame:has(.mv-preview-empty) .mv-pl-bar,
.mv-preview-frame:has(.mv-preview-empty) .mv-player-big { display: none !important; }