/* ══════════════════════════════════════════════════════════
   SUBCrAFT Review — 검수 전용 슬림 UI
   독립 빌드 (style.css 의존성 없음)
═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --rv-bg:        #0f1419;
    --rv-bg-2:      #161c23;
    --rv-bg-3:      #1e252e;
    --rv-bg-hi:     #2a323d;
    --rv-border:    #2d3744;
    --rv-text:      #e6edf3;
    --rv-text-dim:  #8b98a8;
    --rv-text-mute: #5d6b7c;

    --rv-accent:    #3b82f6;
    --rv-accent-d:  #2563eb;
    --rv-success:   #22c55e;
    --rv-warn:      #f59e0b;
    --rv-danger:    #ef4444;
    --rv-info:      #06b6d4;

    --rv-status-pending:  #6b7280;
    --rv-status-approved: #22c55e;
    --rv-status-hold:     #f59e0b;
    --rv-status-fix:      #ef4444;

    --rv-header-h:  56px;
    --rv-bottom-h:  220px;

    --rv-radius:    6px;
    --rv-shadow:    0 4px 16px rgba(0,0,0,.4);

    --rv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Malgun Gothic", "Pretendard", sans-serif;
}

html, body {
    height: 100%;
    background: var(--rv-bg);
    color: var(--rv-text);
    font-family: var(--rv-font);
    font-size: 13px;
    overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.rv-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--rv-header-h);
    background: var(--rv-bg-2);
    border-bottom: 1px solid var(--rv-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 24px;
    z-index: 100;
}
.rv-header-left   { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rv-header-center { flex: 1; display: flex; align-items: center; min-width: 0; }
.rv-header-right  { display: flex; align-items: center; gap: 6px; }

.rv-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--rv-text);
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.rv-title i { color: var(--rv-accent); }
.rv-badge {
    background: var(--rv-accent);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    letter-spacing: 0.5px;
}

.rv-project-info {
    display: flex; align-items: center; gap: 6px;
    color: var(--rv-text-dim);
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
}
.rv-project-name { color: var(--rv-text); font-weight: 500; }
.rv-project-sep  { color: var(--rv-text-mute); }
.rv-video-name   { color: var(--rv-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 진행률 바 */
.rv-progress-wrap {
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    max-width: 700px;
}
.rv-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--rv-bg-3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.rv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rv-success), #4ade80);
    transition: width 0.3s ease;
}
.rv-progress-stats {
    display: flex; gap: 10px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rv-stat-approved { color: var(--rv-status-approved); }
.rv-stat-hold     { color: var(--rv-status-hold); }
.rv-stat-fix      { color: var(--rv-status-fix); }
.rv-stat-pending  { color: var(--rv-status-pending); }
.rv-stat-total    { color: var(--rv-text-dim); }

/* 버튼 */
.rv-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--rv-radius);
    border: 1px solid var(--rv-border);
    background: var(--rv-bg-3);
    color: var(--rv-text);
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.rv-btn:hover { background: var(--rv-bg-hi); border-color: var(--rv-text-mute); }
.rv-btn:active { transform: translateY(1px); }
.rv-btn-primary { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }
.rv-btn-primary:hover { background: var(--rv-accent-d); }
.rv-btn-success { background: var(--rv-success); border-color: var(--rv-success); color: #fff; }
.rv-btn-success:hover { background: #16a34a; }
.rv-btn-secondary { /* default */ }

.rv-divider {
    width: 1px;
    height: 24px;
    background: var(--rv-border);
    margin: 0 4px;
}


/* ══════════════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════════════ */
.rv-main {
    position: fixed;
    top: var(--rv-header-h);
    left: 0; right: 0;
    bottom: var(--rv-bottom-h);
    display: grid;
    /* [RV-VRESIZER 2026-06-19] 3-column grid: player | resizer(6px) | table.
       기본 비율은 1fr : 6px : 1.2fr — JS 가 사용자 드래그 시 px 값으로 덮어씀. */
    grid-template-columns: minmax(360px, 1fr) 6px minmax(420px, 1.2fr);
    gap: 0;
    background: var(--rv-border);
}

/* [RV-VRESIZER 2026-06-19] 가로 리사이저 핸들 (player ↔ table) */
.rv-vresizer {
    background: var(--rv-border);
    cursor: col-resize;
    position: relative;
    transition: background 0.12s ease;
    user-select: none;
    z-index: 5;
}
.rv-vresizer:hover,
.rv-vresizer.is-dragging {
    background: var(--rv-accent);
}
/* 시각적 그립 표시 (3개 점) */
.rv-vresizer::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 24px;
    background: rgba(255,255,255,0.25);
    border-radius: 1px;
    box-shadow:
        -3px 0 0 rgba(255,255,255,0.25),
         3px 0 0 rgba(255,255,255,0.25);
}
.rv-vresizer:hover::before,
.rv-vresizer.is-dragging::before {
    background: rgba(255,255,255,0.85);
    box-shadow:
        -3px 0 0 rgba(255,255,255,0.85),
         3px 0 0 rgba(255,255,255,0.85);
}

.rv-pane {
    background: var(--rv-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.rv-pane-head {
    height: 32px;
    padding: 0 12px;
    background: var(--rv-bg-2);
    border-bottom: 1px solid var(--rv-border);
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rv-text-dim);
}
.rv-pane-head i { color: var(--rv-accent); }
.rv-pane-head-right {
    margin-left: auto;
    display: flex; align-items: center; gap: 6px;
}

/* [RV-SUBSIZE 2026-06-20] 자막 크기 조절 컨트롤 — 미리보기 헤더 우측 끝 */
.rv-sub-size-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 0 4px;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    border-radius: 4px;
    font-size: 11px;
}
.rv-sub-size-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 4px;
    color: var(--rv-text-mute);
    font-weight: 500;
    border-right: 1px solid var(--rv-border);
    margin-right: 2px;
    line-height: 1;
    user-select: none;
}
.rv-sub-size-label i {
    color: var(--rv-accent);
    font-size: 10px;
}
.rv-sub-size-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    color: var(--rv-text-dim);
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rv-sub-size-btn:hover {
    background: var(--rv-bg-2);
    color: var(--rv-text);
    border-color: var(--rv-border);
}
.rv-sub-size-btn:active {
    background: var(--rv-accent);
    color: #fff;
    border-color: var(--rv-accent);
}
.rv-sub-size-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.rv-sub-size-btn:disabled:hover {
    background: transparent;
    color: var(--rv-text-dim);
    border-color: transparent;
}
.rv-sub-size-val {
    display: inline-block;
    min-width: 32px;
    text-align: center;
    color: var(--rv-text);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 500;
    padding: 0 2px;
    user-select: none;
}
.rv-sub-size-reset {
    margin-left: 2px;
    border-left: 1px solid var(--rv-border);
    border-radius: 0 3px 3px 0;
    padding-left: 4px;
    width: 22px;
}


/* ══════════════════════════════════════════════════════════
   PLAYER
═══════════════════════════════════════════════════════════ */
.rv-pane-player { padding: 0; }
.rv-player-wrap {
    flex: 1;
    background: #000;
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex; align-items: center; justify-content: center;
}
/* [RV-KBFIX 2026-06-20] 비디오 원본 비율 유지
   width/height:100% 제거 → 인라인에서 aspect-ratio + max-* 로 비율 제어.
   object-fit:contain 은 안전망으로 유지 (메타데이터 없을 때 기본 contain). */
.rv-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
    display: none;
    margin: 0 auto;
}
.rv-video.is-loaded { display: block; }

.rv-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    color: var(--rv-text-dim);
    text-align: center;
    padding: 32px;
    pointer-events: none;
}
.rv-video-placeholder i { font-size: 48px; color: var(--rv-text-mute); }
.rv-video-placeholder p { line-height: 1.6; pointer-events: auto; }
.rv-video-placeholder .rv-hint { font-size: 11px; color: var(--rv-text-mute); }
.rv-video.is-loaded ~ .rv-video-placeholder { display: none; }

.rv-link {
    background: transparent;
    border: none;
    color: var(--rv-accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}
.rv-link:hover { color: var(--rv-accent-d); }

/* [RV-MASK 2026-06-20] 자막 마스크 투명도 — 메인 앱(css/style.css L460-462) 동등
   메인 앱 기본값과 동일하게 0.55 (반투명). 향후 사용자 슬라이더로 조정 가능.
   [RV-SUBSIZE 2026-06-20] 자막 폰트 크기 — 사용자가 헤더 +/− 버튼으로 조절.
   localStorage('rv.subFontSize') 에 영속화되어 다음 세션에서도 유지됨. */
:root {
    --rv-sub-mask-opacity: 0.55;
    --rv-sub-font-size:    1.20rem;    /* 기본값 — 메인 앱과 동일 */
}

/* 비디오 위 자막 오버레이
   [RV-MASK 2026-06-20] 메인앱 .pv-sub-overlay 와 완전 동등 구조:
     - 한 텍스트 그룹 = 하나의 <div class="rv-sub-line"> (마스크 1개로 통합)
     - 여러 줄(\n)은 white-space: pre-line 이 CSS 차원에서 처리
     - viewMode='both' 일 때만 2개의 .rv-sub-line (원문+번역) 으로 분리됨 */
.rv-sub-overlay {
    position: absolute;
    left: 0; right: 0;
    bottom: 8%;
    text-align: center;
    pointer-events: none;
    padding: 0 16px;
    /* flex column — 'both' 모드에서 원문 / 번역 두 그룹을 세로 스택 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 20;
}
.rv-sub-overlay .rv-sub-line {
    display: inline-block;
    /* ★ 메인 앱과 동일한 마스크 투명도 변수 */
    background: rgba(0, 0, 0, var(--rv-sub-mask-opacity));
    color: #fff;
    padding: 5px 16px;
    border-radius: 5px;
    margin: 0;
    /* [RV-SUBSIZE 2026-06-20] 사용자 조절 변수로 폰트 크기 동적 적용 */
    font-size: var(--rv-sub-font-size, 1.20rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    max-width: 92%;
    border: 1px solid rgba(255,255,255,0.08);
    /* ★ \n 을 실제 줄바꿈으로 렌더 — 한 마스크 안에 2줄 통합 표시 */
    white-space: pre-line;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background 0.15s ease;
}
/* 'both' 모드의 원문 라인 — 메인앱 .pv-sub-line-original 동등 (작고 회색 톤)
   [RV-SUBSIZE 2026-06-20] em 단위로 비례 축소 (사용자 조절에 따라 함께 변화) */
.rv-sub-overlay .rv-sub-line-original {
    font-size: 0.80em;       /* 본문 대비 80% */
    font-weight: 400;
    color: #cbd5e1;
    opacity: 0.92;
}

/* [RV-WF-V3 2026-06-20] 영상 전체 시크바 — 메인앱(#preview-seek) 동등 */
.rv-video-seek-row {
    height: 18px;
    background: var(--rv-bg-2);
    border-top: 1px solid var(--rv-border);
    display: flex; align-items: center;
    padding: 0 10px;
}
.rv-video-seek {
    width: 100%;
    height: 12px;
    margin: 0;
    accent-color: var(--rv-accent);
    cursor: pointer;
}
.rv-video-seek:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 플레이어 컨트롤 */
.rv-player-controls {
    height: 44px;
    background: var(--rv-bg-2);
    border-top: 1px solid var(--rv-border);
    display: flex; align-items: center;
    padding: 0 10px;
    gap: 6px;
}
.rv-pc-btn {
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    color: var(--rv-text);
    border-radius: 4px;
    font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    transition: background 0.15s;
}
.rv-pc-btn:hover { background: var(--rv-bg-hi); }
.rv-pc-play { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; min-width: 38px; }
.rv-pc-play:hover { background: var(--rv-accent-d); }
.rv-pc-time {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--rv-text-dim);
    margin-left: 8px;
}
.rv-pc-spacer { flex: 1; }
.rv-pc-rate, .rv-pc-vol {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--rv-text-dim);
}
.rv-pc-rate select {
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    color: var(--rv-text);
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
}
.rv-pc-vol input[type=range] {
    width: 80px;
    accent-color: var(--rv-accent);
}


/* ══════════════════════════════════════════════════════════
   SUBTITLE TABLE
═══════════════════════════════════════════════════════════ */
.rv-search {
    height: 24px;
    width: 140px;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    color: var(--rv-text);
    padding: 0 8px;
    border-radius: 3px;
    font-size: 11px;
}
.rv-filter {
    height: 24px;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    color: var(--rv-text);
    padding: 0 6px;
    border-radius: 3px;
    font-size: 11px;
}

.rv-table-wrap {
    flex: 1;
    overflow: auto;
    background: var(--rv-bg);
    position: relative;
}
.rv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rv-table thead th {
    position: sticky;
    top: 0;
    background: var(--rv-bg-2);
    border-bottom: 1px solid var(--rv-border);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--rv-text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}
.rv-table tbody tr {
    border-bottom: 1px solid var(--rv-bg-3);
    transition: background 0.1s;
}
.rv-table tbody tr:hover { background: var(--rv-bg-2); }
.rv-table tbody tr.is-active {
    background: rgba(59, 130, 246, 0.18) !important;
    box-shadow: inset 3px 0 0 var(--rv-accent);
}
/* [RV-CURHL 2026-06-20] 재생 중 현재 자막 행 하이라이트
   ── 이전: 노란색(#facc15, 0.18 / 0.28) — 가독성 저하 보고
   ── 신규: 연한 블루(#60a5fa = sky-400, 0.10 / 0.18) — 글씨 가독성 확보 */
.rv-table tbody tr.is-current-subtitle {
    background: rgba(96, 165, 250, 0.10) !important;       /* 매우 연한 블루 */
    box-shadow: inset 4px 0 0 #60a5fa;                      /* 좌측 인디케이터만 또렷 */
}
.rv-table tbody tr.is-current-subtitle td {
    color: var(--rv-text);
}
.rv-table tbody tr.is-active.is-current-subtitle {
    background: rgba(96, 165, 250, 0.18) !important;       /* 선택 + 현재 = 약간 진하게 */
    box-shadow: inset 4px 0 0 #60a5fa, inset 0 0 0 1px var(--rv-accent);
}
.rv-table tbody td {
    padding: 6px 10px;
    vertical-align: top;
    line-height: 1.5;
}
/* [RV-UIFIT 2026-06-20] 확인/보류/수정 상태 컬럼 제거 — 자막칸 확장 */
.rv-col-idx     { width: 44px; text-align: right; color: var(--rv-text-mute); font-variant-numeric: tabular-nums; }
.rv-col-tc      { width: 86px; font-variant-numeric: tabular-nums; color: var(--rv-text-dim); font-size: 11px; }
.rv-col-text    { min-width: 280px; }   /* 자막 본문이 가장 넓게 — 검수 작업 핵심 영역 */
.rv-col-comment { width: 220px; }       /* 메모는 적당히 */

.rv-cell-text {
    cursor: text;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
    word-break: break-word;
    white-space: pre-wrap;
}
.rv-cell-text:focus {
    outline: none;
    background: var(--rv-bg-2);
    box-shadow: 0 0 0 2px var(--rv-accent);
}
.rv-cell-text.is-modified::after {
    content: " *";
    color: var(--rv-warn);
    font-weight: bold;
}

.rv-cell-comment {
    cursor: text;
    border-radius: 3px;
    padding: 4px 6px;
    background: var(--rv-bg-2);
    color: var(--rv-text-dim);
    font-size: 11px;
    min-height: 22px;
    word-break: break-word;
    white-space: pre-wrap;
}
.rv-cell-comment:empty::before {
    content: "메모 추가...";
    color: var(--rv-text-mute);
    font-style: italic;
}
.rv-cell-comment:focus {
    outline: none;
    color: var(--rv-text);
    box-shadow: 0 0 0 2px var(--rv-accent);
}

/* 검수 상태 칩 */
.rv-status-chips {
    display: flex; gap: 3px;
}
.rv-chip {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--rv-bg-3);
    color: var(--rv-text-mute);
    transition: all 0.15s;
    white-space: nowrap;
}
.rv-chip:hover { background: var(--rv-bg-hi); }
.rv-chip[data-status="approved"].is-active {
    background: rgba(34, 197, 94, 0.18);
    color: var(--rv-status-approved);
    border-color: var(--rv-status-approved);
}
.rv-chip[data-status="hold"].is-active {
    background: rgba(245, 158, 11, 0.18);
    color: var(--rv-status-hold);
    border-color: var(--rv-status-hold);
}
.rv-chip[data-status="fix"].is-active {
    background: rgba(239, 68, 68, 0.18);
    color: var(--rv-status-fix);
    border-color: var(--rv-status-fix);
}

.rv-table-empty {
    position: absolute;
    inset: 32px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--rv-text-mute);
    text-align: center;
    gap: 8px;
}
.rv-table-empty i { font-size: 40px; }
.rv-table-empty.is-hidden { display: none; }
.rv-table-empty .rv-hint { font-size: 11px; }


/* ══════════════════════════════════════════════════════════
   WAVEFORM
═══════════════════════════════════════════════════════════ */
.rv-bottom {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: var(--rv-bottom-h);
    background: var(--rv-bg-2);
    border-top: 1px solid var(--rv-border);
    display: flex;
    flex-direction: column;
}
/* [RV-TLBAR 2026-06-20] 타임라인 헤더 — 편집 툴바 + 원문 보기를 수용하기 위해 38px 로 확장 */
.rv-bottom-head {
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--rv-border);
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rv-text-dim);
    flex-shrink: 0;
    overflow-x: auto;             /* 좁은 화면에서 가로 스크롤 허용 (헤더만) */
    overflow-y: hidden;
    white-space: nowrap;
}
.rv-bottom-head::-webkit-scrollbar { height: 4px; }
.rv-bottom-head::-webkit-scrollbar-thumb { background: var(--rv-border); border-radius: 2px; }
.rv-bottom-head > i.fa-wave-square { color: var(--rv-accent); flex-shrink: 0; }
.rv-bottom-title { flex-shrink: 0; }
.rv-tlbar-divider {
    width: 1px;
    height: 22px;
    background: var(--rv-border);
    margin: 0 4px;
    flex-shrink: 0;
}
.rv-bottom-head-right {
    margin-left: auto;
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
/* 타임라인 헤더의 편집 툴바 / 원문 보기 그룹 — 줄어들지 않도록 */
.rv-bottom-head .rv-edit-toolbar,
.rv-bottom-head .rv-orig-view-btns { flex-shrink: 0; }
.rv-wf-status {
    font-size: 11px;
    color: var(--rv-text-mute);
    margin-right: 6px;
}
.rv-wf-status.is-ok { color: var(--rv-success); }
.rv-wf-status.is-busy { color: var(--rv-warn); }
.rv-wf-status.is-err { color: var(--rv-danger); }

/* ──────────────────────────────────────────────────────────
   [RV-WF-V2 2026-06-19] 메인앱(waveformTimeline.js v5.2) 패턴
   구조:
     .rv-wf-ruler         (눈금자 캔버스, 22px, 스크롤과 동기)
     .rv-wf-body          (overflow-x:auto, 뷰포트)
       ├─ .rv-wf-canvas-wrap (position:sticky, left:0, 뷰포트 너비)
       │     ├─ canvas.rv-wf-canvas      (파형)
       │     ├─ canvas.rv-wf-sub-canvas  (자막 블록, 이벤트 받음)
       │     └─ div.rv-wf-playhead       (HTML 재생헤드)
       └─ .rv-wf-scroll-dummy            (스크롤 범위 만드는 더미)
────────────────────────────────────────────────────────── */
.rv-wf-zoom-label {
    font-size: 11px;
    color: var(--rv-text-dim);
    min-width: 34px;
    text-align: center;
    user-select: none;
}

/* 눈금자 — 가로 폭 100%, 스크롤 영역과 별도 */
.rv-wf-ruler {
    display: block;
    width: 100%;
    height: 22px;
    background: var(--rv-bg-3);
    border-bottom: 1px solid var(--rv-border);
    cursor: grab;
    flex-shrink: 0;
}

/* 본체 — overflow-x:auto, 가로 스크롤바 표시 */
.rv-wf-body {
    flex: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background: #0a0d12;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-border) transparent;
}
.rv-wf-body::-webkit-scrollbar        { height: 8px; }
.rv-wf-body::-webkit-scrollbar-track  { background: transparent; }
.rv-wf-body::-webkit-scrollbar-thumb  { background: var(--rv-border); border-radius: 4px; }
.rv-wf-body::-webkit-scrollbar-thumb:hover { background: var(--rv-accent); }

/* sticky 래퍼 — 스크롤해도 화면 왼쪽에 고정, 뷰포트 너비만 사용 */
.rv-wf-canvas-wrap {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 140px;    /* 파형 80 + 자막 60 */
    z-index: 1;
}

/* 스크롤 범위 더미 — 너비만 설정 (JS), 내용 없음 */
.rv-wf-scroll-dummy {
    position: absolute;
    top: 0; left: 0;
    height: 1px;
    min-width: 100%;
    pointer-events: none;
}

/* 파형 캔버스 */
.rv-wf-canvas {
    position: absolute;
    top: 0; left: 0;
    /* width/height는 JS에서 직접 설정 */
    display: block;
    cursor: grab;
    z-index: 1;
}

/* 자막 블록 캔버스 — 파형 위 + 자막 영역 모두 이벤트 받음 */
.rv-wf-sub-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 140px;       /* JS가 크기 재설정 전에도 클릭 영역 확보 */
    display: block;
    cursor: crosshair;
    z-index: 2;
}

/* HTML 재생헤드 — 빨간 세로선 + 상단 작은 삼각형 */
.rv-wf-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 140px;
    background: #ef4444;
    pointer-events: none;
    z-index: 5;
    transform: translateX(-1px);
    will-change: left;
    display: none;        /* 영상 로드 전 숨김 */
}
.rv-wf-playhead.is-active { display: block; }
.rv-wf-playhead::before {
    /* 상단 삼각형 마커 */
    content: '';
    position: absolute;
    top: -1px;
    left: -5px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #ef4444;
}

/* 안내 (웨이브폼 없을 때) */
.rv-wf-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center; justify-content: center;
    color: var(--rv-text-mute);
    font-size: 12px;
    padding: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 3;
}
.rv-wf-empty.is-hidden { display: none; }


/* ══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.rv-toast-wrap {
    position: fixed;
    bottom: calc(var(--rv-bottom-h) + 16px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
    pointer-events: none;
}
.rv-toast {
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    border-left: 4px solid var(--rv-info);
    color: var(--rv-text);
    padding: 10px 14px;
    border-radius: var(--rv-radius);
    box-shadow: var(--rv-shadow);
    font-size: 12px;
    min-width: 260px;
    max-width: 420px;
    animation: rv-toast-in 0.25s ease;
    pointer-events: auto;
}
.rv-toast-ok    { border-left-color: var(--rv-success); }
.rv-toast-warn  { border-left-color: var(--rv-warn); }
.rv-toast-err   { border-left-color: var(--rv-danger); }
.rv-toast-info  { border-left-color: var(--rv-info); }

@keyframes rv-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}


/* ══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.rv-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center; justify-content: center;
}
.rv-modal[hidden] { display: none; }
.rv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.rv-modal-box {
    position: relative;
    background: var(--rv-bg-2);
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    box-shadow: var(--rv-shadow);
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rv-modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--rv-border);
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600;
}
.rv-modal-close {
    background: transparent;
    border: none;
    color: var(--rv-text-dim);
    font-size: 18px;
    width: 28px; height: 28px;
    border-radius: 4px;
}
.rv-modal-close:hover { background: var(--rv-bg-3); color: var(--rv-text); }
.rv-modal-body {
    padding: 18px;
    overflow: auto;
    flex: 1;
    line-height: 1.6;
    font-size: 13px;
}
.rv-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--rv-border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: var(--rv-bg);
}


/* ══════════════════════════════════════════════════════════
   DRAG & DROP
═══════════════════════════════════════════════════════════ */
body.is-dragging::after {
    content: "MP4 또는 프로젝트 JSON을 드롭하세요";
    position: fixed;
    inset: 0;
    background: rgba(59, 130, 246, 0.2);
    border: 4px dashed var(--rv-accent);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center; justify-content: center;
    z-index: 999;
    pointer-events: none;
    backdrop-filter: blur(4px);
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .rv-main { grid-template-columns: 1fr 1fr; }
    .rv-header-center { display: none; }
}
@media (max-width: 800px) {
    .rv-main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .rv-progress-stats .rv-stat-pending,
    .rv-progress-stats .rv-stat-total { display: none; }
}


/* ══════════════════════════════════════════════════════════
   [RV-MINI-HUD 2026-06-20] 미니 타임라인
   메인앱 #mini-hud-wrap 동등. ±5초 플로우 + 중앙 고정 빨간 playhead.
   #rv-mini-hud-wrap > #rv-mini-hud-body > (canvas, playhead, tooltip)
═══════════════════════════════════════════════════════════ */
.rv-mini-hud-wrap {
    /* 컨테이너 — body가 display:none 일 때는 높이 0 */
    background: var(--rv-bg-2);
    border-top: 1px solid var(--rv-border);
}
.rv-mini-hud-body {
    position: relative;
    height: 84px;
    overflow: hidden;
    background:
        linear-gradient(to bottom,
            rgba(59,130,246,0.04) 0%,
            rgba(59,130,246,0.04) 58%,
            rgba(0,0,0,0)         58%,
            rgba(0,0,0,0)         60%,
            rgba(255,255,255,0.02) 60%,
            rgba(255,255,255,0.02) 96%,
            rgba(0,0,0,0)         96%,
            rgba(0,0,0,0)         100%),
        var(--rv-bg-3);
    cursor: pointer;
    user-select: none;
}
.rv-mini-hud-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.rv-mini-hud-playhead {
    /* 중앙 고정 빨간 세로선 — Premiere/DaVinci 스타일 */
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--rv-danger);
    box-shadow:
        0 0 4px rgba(239,68,68,0.7),
        0 0 1px rgba(255,255,255,0.5);
    pointer-events: none;
    z-index: 2;
}
.rv-mini-hud-playhead::before {
    /* 상단 작은 삼각형 표식 */
    content: "";
    position: absolute;
    top: -1px;
    left: -4px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--rv-danger);
}
.rv-mini-hud-tooltip {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.1);
}

/* 토글 버튼 활성 상태 — 웨이브폼 헤더 [미니] 버튼 */
.rv-btn-mini-hud.is-active {
    background: var(--rv-accent);
    border-color: var(--rv-accent);
    color: #fff;
}
.rv-btn-mini-hud.is-active:hover { background: var(--rv-accent-d); }


/* ══════════════════════════════════════════════════════════
   [RV-ORIGPV 2026-06-20] 원문 보기 — 3버튼 그룹 + 원문 라인
   메인앱 #btn-view-translated/original/both 동등.
═══════════════════════════════════════════════════════════ */
.rv-pc-divider {
    width: 1px;
    height: 22px;
    background: var(--rv-border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   [RV-EDIT 2026-06-20] 자막 편집 툴바 — 메인앱 pv-merge-group/pv-split-group/pv-add-row-btn 동등
═══════════════════════════════════════════════════════════ */
.rv-edit-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rv-edit-toolbar .rv-edit-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 4px;
    color: var(--rv-text);
    display: inline-flex; align-items: center; gap: 4px;
}
.rv-edit-toolbar .rv-edit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.rv-edit-toolbar .rv-edit-btn i { font-size: 11px; }
/* 색상 구분 — 메인앱 hue 따라감 */
.rv-edit-add        { background: rgba(34,197,94,0.15);  border-color: rgba(34,197,94,0.5);  color: #86efac !important; }
.rv-edit-add:hover:not(:disabled)        { background: rgba(34,197,94,0.28); }
.rv-edit-merge-1p   { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.5); color: #7dd3fc !important; }
.rv-edit-merge-1p:hover:not(:disabled)   { background: rgba(56,189,248,0.28); }
.rv-edit-merge-2p   { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.5); color: #d8b4fe !important; }
.rv-edit-merge-2p:hover:not(:disabled)   { background: rgba(168,85,247,0.28); }
.rv-edit-split-1p   { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.5); color: #fcd34d !important; }
.rv-edit-split-1p:hover:not(:disabled)   { background: rgba(245,158,11,0.28); }
.rv-edit-split-2p   { background: rgba(239,68,68,0.13);  border-color: rgba(239,68,68,0.5);  color: #fca5a5 !important; }
.rv-edit-split-2p:hover:not(:disabled)   { background: rgba(239,68,68,0.25); }
.rv-edit-group-sep {
    width: 1px; height: 18px;
    background: var(--rv-border);
    margin: 0 2px;
    flex-shrink: 0;
}

/* 자막 테이블 — 다중 선택된 행 (Ctrl+Click) */
.rv-table tbody tr.is-multiselected td {
    background: rgba(56, 189, 248, 0.18);
    box-shadow: inset 2px 0 0 #38bdf8;
}
/* [RV-CURHL2 2026-06-20] 다중선택 + 현재 재생 — 노란색 → 연한 블루로 통일
   (이전: 노란 0.32 / #facc15 — 행 전체 양옆에 굵은 노란 띠 + 글씨 가독성 저하 보고)
   ⚠️ 이 규칙은 td 셀렉터라 .is-current-subtitle 의 tr 규칙보다 우선순위 높음 */
.rv-table tbody tr.is-multiselected.is-current-subtitle td {
    background: rgba(96, 165, 250, 0.18);   /* 연한 블루 18% */
    box-shadow: none;                        /* 셀별 노란 띠 제거 — tr 좌측 4px 인디케이터만 사용 */
}

.rv-orig-view-btns {
    display: inline-flex;
    align-items: center;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    border-radius: 4px;
    overflow: hidden;
}
.rv-orig-view-btn {
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--rv-border);
    color: var(--rv-text-dim);
    font-size: 11px;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background 0.15s, color 0.15s;
}
.rv-orig-view-btn:last-child { border-right: none; }
.rv-orig-view-btn:hover:not(:disabled):not(.is-active) {
    background: var(--rv-bg-hi);
    color: var(--rv-text);
}
.rv-orig-view-btn.is-active {
    background: var(--rv-accent);
    color: #fff;
    font-weight: 500;
}
.rv-orig-view-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rv-orig-view-btn i { font-size: 10px; }

/* 영상 위 오버레이 — 원문 라인 (both 모드에서 번역문 위에 작게) */
.rv-sub-overlay .rv-sub-line.rv-sub-line-original {
    font-size: 14px;
    opacity: 0.78;
    background: rgba(0,0,0,0.6);
    color: #cfd6dd;
    font-style: italic;
    display: block;
    margin: 0 auto 4px auto;
    width: fit-content;
    max-width: 90%;
}

/* 테이블 셀 — 원문 라인 (원문/둘다 모드에서 번역 위에 작게) */
.rv-cell-text-original {
    display: block;
    font-size: 11px;
    color: var(--rv-text-mute);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 3px;
    padding: 1px 4px;
    border-left: 2px solid var(--rv-border);
    background: rgba(255,255,255,0.015);
    border-radius: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 'original' 모드에서 번역문 셀이 보조 정보가 됨 */
.rv-cell-text.is-secondary {
    opacity: 0.55;
    font-size: 11px;
    color: var(--rv-text-dim);
}


/* ══════════════════════════════════════════════════════════
   [RV-ANALYSIS 2026-06-20] 작품 분석 — 헤더 배지 + 모달
═══════════════════════════════════════════════════════════ */
.rv-work-analysis-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    height: 22px;
    padding: 0 9px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border: 1px solid #6d28d9;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 11px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    box-shadow: 0 1px 3px rgba(124,58,237,0.4);
}
.rv-work-analysis-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(124,58,237,0.55);
}
.rv-work-analysis-badge i { font-size: 10px; }
.rv-work-analysis-badge .rv-wab-text { white-space: nowrap; }

/* 모달 내부 — 작품 정보 / 시놉시스 / 등장인물 / 용어집 */
.rv-wa-section {
    margin-bottom: 20px;
}
.rv-wa-section:last-child { margin-bottom: 0; }
.rv-wa-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--rv-accent);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--rv-border);
    display: flex; align-items: center; gap: 6px;
}
.rv-wa-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--rv-text);
}
.rv-wa-info dt {
    color: var(--rv-text-dim);
    font-weight: 500;
}
.rv-wa-info dd { color: var(--rv-text); }
.rv-wa-summary {
    font-size: 12px;
    color: var(--rv-text);
    line-height: 1.7;
    background: var(--rv-bg-3);
    padding: 10px 12px;
    border-radius: 4px;
    border-left: 3px solid var(--rv-accent);
    white-space: pre-wrap;
}
.rv-wa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rv-wa-table thead th {
    background: var(--rv-bg-3);
    color: var(--rv-text-dim);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--rv-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.rv-wa-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rv-border);
    vertical-align: top;
    line-height: 1.5;
}
.rv-wa-table tbody tr:last-child td { border-bottom: none; }
.rv-wa-table tbody tr:hover { background: var(--rv-bg-3); }


/* ══════════════════════════════════════════════════════════
   [RV-SRREF 2026-06-20] 자막행 인라인 대본분석 (📜/🎧/📊)
   tbody.is-srref-on 부모 클래스 활성화 시에만 표시.
═══════════════════════════════════════════════════════════ */
.rv-sub-row-srref-wrap {
    display: none;             /* 기본 숨김 */
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(59,130,246,0.04);
    border-left: 3px solid var(--rv-info);
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
}
.rv-table tbody.is-srref-on .rv-sub-row-srref-wrap {
    display: block;            /* 토글 ON 시 표시 */
}

.rv-srref-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 2px 0;
    color: var(--rv-text);
    flex-wrap: wrap;
}
.rv-srref-line + .rv-srref-line {
    margin-top: 2px;
    border-top: 1px dashed rgba(255,255,255,0.05);
    padding-top: 4px;
}
.rv-srref-icon {
    flex-shrink: 0;
    font-size: 12px;
    width: 16px;
    text-align: center;
    line-height: 1.5;
}
.rv-srref-text {
    flex: 1;
    min-width: 0;
    color: var(--rv-text);
    word-break: break-word;
}
.rv-srref-line.is-script.is-empty .rv-srref-text {
    color: var(--rv-text-mute);
    font-style: italic;
}
.rv-srref-line.is-audio .rv-srref-text {
    color: var(--rv-text-dim);
    font-style: italic;
}
.rv-srref-line.is-analysis {
    gap: 4px;
}

/* 칩 (action / 신뢰도 / 매칭 / 환각) */
.rv-srref-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: 9px;
    background: var(--rv-bg-3);
    border: 1px solid var(--rv-border);
    color: var(--rv-text-dim);
    line-height: 1.5;
    white-space: nowrap;
}
.rv-srref-chip b {
    font-weight: 600;
    color: var(--rv-text);
}

/* action 종류별 색상 */
.rv-srref-chip.action-verbatim {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.4);
    color: #86efac;
}
.rv-srref-chip.action-polished {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #93c5fd;
}
.rv-srref-chip.action-audio_override {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.4);
    color: #fcd34d;
}
.rv-srref-chip.action-adlib {
    background: rgba(168,85,247,0.15);
    border-color: rgba(168,85,247,0.4);
    color: #d8b4fe;
}
.rv-srref-chip.action-narration {
    background: rgba(14,165,233,0.15);
    border-color: rgba(14,165,233,0.4);
    color: #7dd3fc;
}

/* 점수 색상 (신뢰도/매칭) */
.rv-srref-chip.score-high {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.35);
    color: #86efac;
}
.rv-srref-chip.score-mid {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.35);
    color: #fcd34d;
}
.rv-srref-chip.score-low {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
}

/* 환각 위험도 */
.rv-srref-chip.hall-warn {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.4);
    color: #fcd34d;
}
.rv-srref-chip.hall-bad {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.5);
    color: #fca5a5;
    font-weight: 500;
}

.rv-srref-note {
    flex-basis: 100%;
    margin-top: 2px;
    padding: 3px 6px;
    background: rgba(255,255,255,0.025);
    border-radius: 3px;
    color: var(--rv-text-dim);
    font-style: italic;
    font-size: 10.5px;
    line-height: 1.5;
}

/* 토글 버튼 활성 상태 — 자막 테이블 헤더 [대본분석] 버튼 */
.rv-btn-srref.is-active {
    background: var(--rv-info);
    border-color: var(--rv-info);
    color: #fff;
}
.rv-btn-srref.is-active:hover { background: #0891b2; }
.rv-btn-srref:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════
   [RV-UIFIT 2026-06-20] 라인 번호 매칭 색상 — 메인앱 srl-row-* 동등
   왼쪽 3px 색상 띠로 대본 매칭 결과를 한눈에 표시.
   - verbatim          : 녹색  (대본 그대로)
   - polished          : 연녹  (대본 다듬음)
   - audio_override    : 황색  (오디오가 대본과 다름 → 채택)
   - audio_supplement  : 노랑  (대본 외 오디오 추가)
   - adlib             : 주황  (즉흥 대사)
   - narration         : 하늘  (내레이션)
═══════════════════════════════════════════════════════════ */
.rv-table tbody tr.srl-row-verbatim         > .rv-col-idx { box-shadow: inset 3px 0 0 #22c55e; }
.rv-table tbody tr.srl-row-polished         > .rv-col-idx { box-shadow: inset 3px 0 0 #4ade80; }
.rv-table tbody tr.srl-row-audio-override   > .rv-col-idx { box-shadow: inset 3px 0 0 #fbbf24; }
.rv-table tbody tr.srl-row-audio-supplement > .rv-col-idx { box-shadow: inset 3px 0 0 #facc15; }
.rv-table tbody tr.srl-row-adlib            > .rv-col-idx { box-shadow: inset 3px 0 0 #fb923c; }
.rv-table tbody tr.srl-row-narration        > .rv-col-idx { box-shadow: inset 3px 0 0 #38bdf8; }

/* 색상별 # 번호 자체에도 살짝 색상 적용 — 시인성 향상 */
.rv-table tbody tr.srl-row-verbatim         > .rv-col-idx { color: #4ade80; }
.rv-table tbody tr.srl-row-polished         > .rv-col-idx { color: #86efac; }
.rv-table tbody tr.srl-row-audio-override   > .rv-col-idx { color: #fcd34d; }
.rv-table tbody tr.srl-row-audio-supplement > .rv-col-idx { color: #fde68a; }
.rv-table tbody tr.srl-row-adlib            > .rv-col-idx { color: #fdba74; }
.rv-table tbody tr.srl-row-narration        > .rv-col-idx { color: #7dd3fc; }

/* 의심 행 — 매칭이라 했는데 신뢰도 낮음 또는 unmatched+adlib 아님 */
.rv-table tbody tr.srl-row-suspicious {
    background: rgba(248, 113, 113, 0.08);
}
.rv-table tbody tr.srl-row-suspicious:hover {
    background: rgba(248, 113, 113, 0.16);
}


/* ══════════════════════════════════════════════════════════
   [RV-MINI-HUD/ORIGPV] 반응형 보조
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* 좁은 화면에서 원문 라벨 텍스트 숨기고 아이콘만 */
    .rv-orig-view-btn span { display: none; }
    .rv-mini-hud-body { height: 64px; }
}


/* ══════════════════════════════════════════════════════════
   [RV-AUTH 2026-06-20] 로그인 게이트
   페이지 진입 전 자격 검증 모달 — 인증 성공 전까지 body 콘텐츠 가림
   하드코딩 자격: ID=craftai / PW=2026
═══════════════════════════════════════════════════════════ */

/* 인증 전: 로그인 게이트를 제외한 모든 콘텐츠 숨김
   body.rv-locked > *:not(.rv-auth-gate):not(script) */
body.rv-locked > *:not(.rv-auth-gate):not(script) {
    display: none !important;
}
body.rv-locked {
    overflow: hidden;
    background: var(--rv-bg);
}

/* 게이트 컨테이너 — 전체 화면 덮음 */
.rv-auth-gate {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top, rgba(59,130,246,0.10), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(34,197,94,0.06), transparent 60%),
        var(--rv-bg);
    padding: 24px;
    animation: rvAuthFadeIn 0.3s ease-out;
}

/* 인증 완료 시 페이드아웃 후 제거 */
.rv-auth-gate.is-hiding {
    animation: rvAuthFadeOut 0.25s ease-out forwards;
    pointer-events: none;
}

@keyframes rvAuthFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rvAuthFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}

/* 카드 */
.rv-auth-card {
    width: 100%;
    max-width: 380px;
    padding: 32px 28px 24px;
    background: var(--rv-bg-2);
    border: 1px solid var(--rv-border);
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.02) inset;
    animation: rvAuthCardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rvAuthCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 브랜드 */
.rv-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.rv-auth-brand i {
    font-size: 28px;
    color: var(--rv-accent);
}
.rv-auth-brand h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--rv-text);
    letter-spacing: 0.3px;
}
.rv-auth-brand .rv-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--rv-accent);
    color: #fff;
    border-radius: 10px;
    vertical-align: middle;
}

.rv-auth-sub {
    margin: 0 0 24px;
    color: var(--rv-text-dim);
    font-size: 13px;
}

/* 폼 */
.rv-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rv-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-auth-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rv-text-dim);
    font-weight: 500;
}
.rv-auth-label i {
    width: 12px;
    color: var(--rv-text-mute);
}

.rv-auth-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--rv-bg);
    color: var(--rv-text);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    font-family: var(--rv-font);
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.rv-auth-input:focus {
    outline: none;
    border-color: var(--rv-accent);
    background: var(--rv-bg-3);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.rv-auth-input.is-error {
    border-color: var(--rv-danger);
    animation: rvAuthShake 0.4s;
}
@keyframes rvAuthShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-6px); }
    50%     { transform: translateX(6px); }
    75%     { transform: translateX(-3px); }
}

/* 메시지 영역 (에러/안내) */
.rv-auth-msg {
    min-height: 18px;
    font-size: 12px;
    color: var(--rv-danger);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rv-auth-msg:empty {
    min-height: 0;
}
.rv-auth-msg.is-info {
    color: var(--rv-info);
}

/* 제출 버튼 */
.rv-auth-submit {
    margin-top: 4px;
    padding: 11px 16px;
    background: var(--rv-accent);
    color: #fff;
    border: none;
    border-radius: var(--rv-radius);
    font-family: var(--rv-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, transform 0.05s;
}
.rv-auth-submit:hover  { background: var(--rv-accent-d); }
.rv-auth-submit:active { transform: scale(0.98); }
.rv-auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 푸터 */
.rv-auth-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rv-border);
    font-size: 11px;
    color: var(--rv-text-mute);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rv-auth-footer i {
    color: var(--rv-text-mute);
}