/* ===== CSS 변수 (다크 테마) ===== */
:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: #2a2a3e;
    --bg-input: #1e1e32;
    --bg-hover: #353550;
    --text-primary: #e0e0e0;
    --text-secondary: #9e9e9e;
    --text-muted: #666;
    --border-color: #3a3a50;
    --accent-green: #00c853;
    --accent-blue: #448aff;
    --accent-red: #ff5252;
    --accent-orange: #ff9800;
    --accent-purple: #7c4dff;
    --accent-yellow: #ffd740;
    --btn-primary: #448aff;
    --btn-success: #00c853;
    --btn-danger: #ff5252;
    --btn-warning: #ff9800;
    --btn-purple: #7c4dff;
    --sidebar-width: 80px;
    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --transition: all 0.2s ease;
}

/* ===== 리셋 & 기본 ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== 앱 컨테이너 ===== */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ===== 사이드바 ===== */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-right: 1px solid var(--border-color);
    z-index: 10;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar-logo {
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    cursor: pointer;
}

.sidebar-logo img {
    width: 100%;
    height: 100%;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-divider {
    width: 40px;
    height: 1px;
    background: var(--border-color);
    margin: 6px auto;
}

.sidebar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    border-radius: var(--radius);
    transition: var(--transition);
    width: 64px;
}

.sidebar-btn i {
    font-size: 20px;
}

.sidebar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-btn.active {
    background: var(--bg-card);
    color: var(--accent-green);
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sidebar-version {
    font-size: 10px;
    color: var(--text-muted);
}

.btn-ddalkkak {
    background: rgba(230, 138, 0, 0.1) !important;
    color: var(--accent-orange) !important;
    border: 1.5px solid var(--accent-orange) !important;
    border-radius: 6px !important;
}

.btn-ddalkkak:hover {
    background: rgba(230, 138, 0, 0.25) !important;
    color: #ffb340 !important;
    border-color: #ffb340 !important;
}

/* ===== 메인 콘텐츠 ===== */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    background: var(--bg-primary);
}

/* ===== 페이지 전환 ===== */
.page {
    display: none;
    animation: fadeIn 0.25s ease;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 프로젝트 바 ===== */
.project-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.project-name-input {
    flex: 1;
    max-width: 400px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
}

.project-name-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* ===== 상태 바 ===== */
.status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--accent-green);
    margin-bottom: 12px;
}

.status-bar.processing {
    color: var(--accent-orange);
}

.status-bar.error {
    color: var(--accent-red);
}

/* ===== 탭 네비게이션 ===== */
.tab-nav {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.tab-btn.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

/* 탭 구분선 */
.tab-divider {
    width: 1px;
    background: var(--border-color);
    margin: 6px 4px;
    flex-shrink: 0;
}

/* 9-Step 번호 뱃지 */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: var(--transition);
}
.tab-btn.active .step-num {
    background: var(--accent-purple);
    color: #fff;
}
.tab-btn.step-done .step-num {
    background: var(--accent-green);
    color: #fff;
}
.tab-btn.step-done .step-num::after {
    content: '\2713';
    position: absolute;
}

/* 9-Step 진행 바 (탭 네비 안에 인라인 배치) */
.step-progress-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}
.step-progress-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 12px;
    transition: var(--transition);
}
.step-progress-item:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.step-progress-item.active {
    background: var(--accent-purple);
    color: #fff;
}
.step-progress-item.done {
    background: rgba(0,200,83,0.15);
    color: var(--accent-green);
}
.step-progress-item.done.active {
    background: var(--accent-purple);
    color: #fff;
}
.step-progress-item .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}
.step-progress-item.active .step-dot { background: #fff; }
.step-progress-item.done .step-dot { background: var(--accent-green); }
.step-progress-item.done.active .step-dot { background: #fff; }
.step-progress-connector {
    width: 16px;
    height: 2px;
    background: var(--border-color);
    flex-shrink: 0;
}
.step-progress-connector.done {
    background: var(--accent-green);
}

.tab-content {
    display: none;
    animation: fadeIn 0.2s ease;
}

.tab-content.active {
    display: block;
}

/* ===== 버튼 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

.btn-primary {
    background: var(--btn-primary);
    color: #fff;
}

.btn-primary:hover {
    background: #3370e0;
}

.btn-success {
    background: var(--btn-success);
    color: #fff;
}

.btn-success:hover {
    background: #00a844;
}

.btn-danger {
    background: var(--btn-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #e04545;
}

.btn-success {
    background: #4caf50;
    color: #fff;
}

.btn-success:hover {
    background: #43a047;
}

.btn-warning {
    background: var(--btn-warning);
    color: #fff;
}

.btn-warning:hover {
    background: #e68a00;
}

.btn-purple {
    background: var(--btn-purple);
    color: #fff;
}

.btn-purple:hover {
    background: #6a3de0;
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover {
    background: var(--bg-hover);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-icon.active {
    color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.15);
}

/* 영상 즐겨찾기 시청 상태 배지/셀렉트 */
.vf-status-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* 시청 상태 라디오 버튼 */
.vf-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.vf-radio-label input[type="radio"] {
    width: 10px; height: 10px;
    margin: 0; cursor: pointer;
    accent-color: var(--accent-blue);
}
.vf-radio-label:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
.vf-radio-label.active.status-0 {
    background: rgba(158,158,158,0.2); border-color: #757575; color: #bbb;
}
.vf-radio-label.active.status-1 {
    background: rgba(255,152,0,0.2); border-color: var(--accent-orange); color: var(--accent-orange);
}
.vf-radio-label.active.status-2 {
    background: rgba(0,200,83,0.2); border-color: var(--accent-green); color: var(--accent-green);
}

.vf-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.vf-status-badge.status-0 {
    background: rgba(158, 158, 158, 0.2);
    color: var(--text-secondary);
}

/* 아직 안본 */
.vf-status-badge.status-1 {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange);
}

/* 보는 중 */
.vf-status-badge.status-2 {
    background: rgba(0, 200, 83, 0.2);
    color: var(--accent-green);
}

/* 다 본 */

/* vf-item 레이아웃 조정 */
.vf-item .cf-ch-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vf-item .cf-ch-badges {
    margin-top: 4px;
}

/* 시청 상태 필터 버튼 (CII 스타일 그룹 버튼) */
.vf-status-filter-group {
    display: flex;
    gap: 0;
    margin-left: auto;
}

.vf-filter-btn {
    padding: 5px 12px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.vf-filter-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.vf-filter-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.vf-filter-btn:not(:first-child) {
    border-left: none;
}

.vf-filter-btn:hover {
    border-color: var(--text-muted);
}

.vf-filter-btn.active[data-status="all"] {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.vf-filter-btn.active[data-status="0"] {
    background: #757575;
    /* Grey for Not Watched */
    border-color: #757575;
    color: #fff;
}

.vf-filter-btn.active[data-status="1"] {
    background: var(--accent-orange);
    /* Orange for Watching */
    border-color: var(--accent-orange);
    color: #fff;
}

.vf-filter-btn.active[data-status="2"] {
    background: var(--accent-green);
    /* Green for Finished */
    border-color: var(--accent-green);
    color: #fff;
}

/* ===== 공통 폼 요소 ===== */
.input-full,
.select-full,
.textarea-full {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
}

.input-full:focus,
.select-full:focus,
.textarea-full:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.textarea-full {
    resize: vertical;
    min-height: 60px;
    line-height: 1.6;
}

.input-sm,
.select-sm {
    padding: 6px 10px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.input-sm {
    width: 60px;
}

.input-xs {
    width: 48px;
    padding: 4px 6px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.select-xs {
    padding: 4px 6px;
    font-size: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.color-picker {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
}

/* ===== 라디오 & 토글 ===== */
.option-group {
    margin-bottom: 12px;
}

.option-label {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
    color: var(--text-secondary);
}

.radio-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.radio-group.radio-sm {
    gap: 12px;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.radio-item input[type="radio"] {
    accent-color: var(--accent-blue);
    width: 16px;
    height: 16px;
}

.inline-input {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    font-size: 13px;
}

.toggle-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}

.toggle-item input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    position: relative;
    transition: var(--transition);
}

.toggle-slider::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: var(--transition);
}

.toggle-item input:checked+.toggle-slider {
    background: var(--accent-green);
}

.toggle-item input:checked+.toggle-slider::after {
    left: 18px;
}

/* ===== 슬라이더 ===== */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-blue);
    border-radius: 50%;
    cursor: pointer;
}

.slider-full {
    width: 100%;
}

.slider-sm {
    width: 120px;
}

.slider-xs {
    width: 60px;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.slider-val {
    font-size: 12px;
    color: var(--accent-blue);
    margin-left: 6px;
    min-width: 30px;
}

.speed-value {
    color: var(--accent-blue);
    font-weight: 500;
}

/* ===== 섹션 헤더 ===== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px;
}

.section-header h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ===== 대본 탭 ===== */
.script-options {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.script-mode.hidden {
    display: none;
}

.bench-header {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.bench-header-left,
.bench-header-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bench-header-left {
    justify-content: space-between;
}

.bench-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

.bench-header .radio-group {
    white-space: nowrap;
}

.bench-category-input {
    margin-left: auto;
    min-width: 180px;
    max-width: 240px;
    padding: 6px 10px;
    font-size: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    flex-shrink: 0;
}

.script-columns {
    display: flex;
    gap: 16px;
}

.script-col-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.script-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.script-col-left .btn,
.script-col-right .btn {
    align-self: center;
}

.topic-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-muted);
    gap: 8px;
}

.topic-empty i {
    font-size: 36px;
    opacity: 0.5;
}

.topic-empty p {
    font-size: 13px;
    margin: 0;
}

/* 주제 리스트 */
.topic-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.topic-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.topic-item:hover {
    background: var(--bg-hover);
}

.topic-item.selected {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.1);
}

.topic-item.copied {
    background: rgba(0, 200, 83, 0.15);
    border-color: var(--accent-green);
    transition: background 0.3s ease;
}

.topic-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.topic-content {
    flex: 1;
    min-width: 0;
}

.topic-text {
    font-size: 13px;
    line-height: 1.4;
    display: block;
}

.topic-desc {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

.topic-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-high {
    background: rgba(255, 82, 82, 0.2);
    color: var(--accent-red);
}

.badge-mid {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange);
}

/* 시장 검증 버튼 */
.topic-verify-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 11px;
    flex-shrink: 0;
    transition: var(--transition);
}

.topic-verify-btn:hover {
    color: #4caf50;
    border-color: #4caf50;
}

.topic-verify-result {
    padding: 8px 12px 8px 36px;
}

.verify-mini-report {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
}

.verify-mini-report strong { color: var(--text-primary); }
.verify-mini-report i { margin-right: 4px; }
.verify-competition-high { color: #ff5252; }
.verify-competition-mid { color: #ff9800; }
.verify-competition-low { color: #4caf50; }

.topic-actions {
    display: flex;
    gap: 8px;
}

/* 벤치 분석 상세 결과 */
.bench-analysis-detail {
    padding: 12px;
}

.analysis-item {
    margin-bottom: 10px;
}

.analysis-item strong {
    display: block;
    font-size: 12px;
    color: var(--accent-blue);
    margin-bottom: 4px;
}

.analysis-item strong i {
    margin-right: 4px;
}

.analysis-item p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    white-space: pre-line;
}

.bench-guidelines {
    margin: 0 12px 10px;
    padding: 10px 12px;
    background: rgba(76, 175, 80, 0.08);
    border-left: 3px solid var(--accent-green);
    border-radius: var(--radius-sm);
}

.bench-guidelines strong {
    display: block;
    font-size: 12px;
    color: var(--accent-green);
    margin-bottom: 4px;
}

.bench-guidelines strong i {
    margin-right: 4px;
}

.bench-guidelines p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    white-space: pre-line;
}

.bench-topics-header {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.bench-topics-header strong {
    font-size: 12px;
    color: var(--accent-orange);
}

.bench-topics-header strong i {
    margin-right: 4px;
}

/* 주제 상세 모달 */
.topic-modal-title {
    padding: 24px 24px 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--accent-yellow);
}

.topic-modal-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px 16px;
}

.topic-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.topic-modal-card-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-green);
    margin-bottom: 6px;
}

.topic-modal-card-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-line;
}

.topic-modal-viral {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.topic-modal-viral-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.topic-modal-viral-badge.high {
    background: rgba(0, 200, 83, 0.2);
    color: var(--accent-green);
}

.topic-modal-viral-badge.mid {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange);
}

.bench-analysis-summary {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(68, 138, 255, 0.08);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.bench-analysis-summary i {
    color: var(--accent-blue);
    margin-right: 4px;
}

.youtube-script-section {
    margin-top: 16px;
}

.char-count {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 유튜브 대본 편집 영역 */
.youtube-script-editor {
    min-height: 280px;
    max-height: 60vh;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.8;
    resize: vertical;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.youtube-script-editor:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(68, 138, 255, 0.25);
}

/* ===== 장면/이미지 탭 ===== */
.scene-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* 드롭다운 */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 100;
    padding: 4px 0;
    margin-top: 4px;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

/* 장면 설정 바 (2행 그룹) */
.scene-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow: hidden;
}

.scene-settings-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.setting-group-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
    align-self: flex-end;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-item label {
    font-size: 11px;
    color: var(--text-secondary);
}

.setting-style-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.style-preview-lg {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
}

.style-preview-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.style-preview-placeholder {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

.scene-settings-characters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.scene-settings-characters > label {
    font-size: 11px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.character-slots {
    display: flex;
    gap: 8px;
}

.character-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-size: 10px;
    color: var(--text-secondary);
}

.character-slot:hover {
    background: var(--bg-hover);
}

.char-avatar-lg {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    border-radius: 50%;
    font-size: 16px;
    color: var(--text-muted);
    overflow: hidden;
}

.character-slot.has-char .char-avatar-lg {
    border-style: solid;
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.scene-char-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* ===== 캐릭터 관리 섹션 ===== */
.character-section {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.character-section h3 {
    margin-bottom: 12px;
}

.character-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: normal;
}

/* 캐릭터 그리드 — 스타일 프리셋과 동일한 레이아웃 */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    font-size: 12px;
}

.character-card:hover {
    border-color: var(--text-muted);
}

.character-card.active {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.1);
}

.character-card.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.character-card-thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    font-size: 28px;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.character-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.char-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    font-size: 32px;
    color: var(--text-muted);
}

.character-card-thumb i {
    font-size: 28px;
    color: var(--text-muted);
    transition: var(--transition);
}

/* 캐릭터 추가 카드 — 스타일 업로드 카드와 동일한 디자인 */
#character-add-card .character-card-thumb {
    border: 2px dashed var(--border-color);
    background: transparent;
    transition: var(--transition);
}

#character-add-card .character-card-thumb:hover {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.05);
}

#character-add-card .character-card-thumb i {
    font-size: 28px;
    color: var(--text-muted);
    transition: var(--transition);
}

#character-add-card .character-card-thumb:hover i {
    color: var(--accent-blue);
}

#character-add-card.active::after {
    display: none;
}

.character-card span {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 동적 캐릭터 카드 */
.character-card.dynamic-char {
    position: relative;
}

.character-card.dynamic-char .character-card-thumb {
    position: relative;
}

.char-card-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.character-card:hover .char-card-delete-btn {
    opacity: 1;
}

.character-card-label.analyzing {
    color: var(--accent-orange);
    font-style: italic;
}

.character-card-label.analyze-failed {
    color: var(--accent-red);
    font-size: 10px;
    font-style: italic;
}

.character-card:hover .retry-overlay i {
    color: #fff !important;
}

/* 드래그&드롭 오버레이 (스타일 프리셋 + 캐릭터 공용) */
.drop-zone-active {
    position: relative;
}

.drop-zone-active::after {
    content: '이미지를 놓으세요';
    position: absolute;
    inset: 0;
    background: rgba(68, 138, 255, 0.15);
    border: 2px dashed var(--accent-blue);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-blue);
    z-index: 10;
    pointer-events: none;
}

/* 캐릭터 설명 영역 — 스타일 설명과 동일 */
.character-description {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    min-height: 60px;
    transition: border-color 0.2s ease;
}

.character-description.has-selection {
    border-color: var(--accent-blue);
}

.character-desc-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* 캐릭터 상세 정보 */
.character-detail {
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius);
    padding: 16px;
}

.character-detail-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.character-detail-img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 2px solid var(--accent-blue);
    flex-shrink: 0;
}

.character-detail-info {
    flex: 1;
    min-width: 0;
}

.character-name-input {
    width: 100%;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.character-name-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.character-detail-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.character-detail-prompt {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-darker);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    max-height: 80px;
    overflow-y: auto;
    display: none;
}

.character-detail-prompt:not(:empty) {
    display: block;
}

/* 장면 리스트 */
.scene-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    padding-right: 4px;
}

.scene-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 12px 16px;
    border: 1px solid var(--border-color);
}

.scene-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.scene-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
}

.scene-num-badge {
    background: var(--accent-blue);
    color: #fff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.char-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(0, 200, 83, 0.2);
    color: var(--accent-green);
}

.scene-actions {
    display: flex;
    gap: 4px;
}

.scene-actions .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* 장면 카드 바디 (2컬럼) */
.scene-card-body {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.scene-card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.scene-card-right {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scene-textarea {
    width: 100%;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
    min-height: 40px;
    line-height: 1.5;
}

.scene-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.scene-textarea-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.scene-textarea-prompt {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

/* 이미지 썸네일 (확대 180x120, 3:2) */
.scene-thumb-lg {
    width: 180px;
    aspect-ratio: 3 / 2;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    flex-shrink: 0;
}

.scene-thumb-lg:hover {
    border-color: var(--accent-blue);
}

.scene-thumb-lg.has-video {
    border-color: var(--accent-green);
}

.scene-thumb-lg i {
    font-size: 24px;
    color: var(--text-muted);
}

.scene-thumb-lg .upload-hint {
    font-size: 10px;
    color: var(--text-muted);
}

.scene-thumb-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-play-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: var(--transition);
}

.scene-thumb-lg:hover .scene-play-overlay {
    opacity: 1;
}

.scene-play-overlay i {
    font-size: 24px;
    color: #fff;
}

/* 장면 상태 배지 */
.scene-status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.scene-status-pending {
    background: rgba(255, 183, 77, 0.15);
    color: #ffb74d;
}

.scene-status-done {
    background: rgba(0, 200, 83, 0.15);
    color: var(--accent-green);
}

/* 장면 카드 내 캐릭터 아바타 (작은 원형) */
.scene-char-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent-green);
    vertical-align: middle;
    margin-right: 4px;
}

/* 이미지 생성 중 로딩 상태 */
.scene-generating {
    position: relative;
}

.scene-generating::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.scene-generating .spinner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.scene-generating .spinner-overlay i {
    font-size: 28px;
    color: var(--accent-blue);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.scene-thumb-error {
    border-color: var(--accent-red, #ef5350) !important;
}

.scene-thumb-error i {
    color: var(--accent-red, #ef5350) !important;
}

/* Empty State */
.scene-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.scene-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    color: var(--text-muted);
    opacity: 0.5;
}

.scene-empty-state h3 {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.scene-empty-state p {
    font-size: 13px;
    margin-bottom: 24px;
}

.scene-empty-steps {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.scene-empty-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 120px;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.step-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.step-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 18px;
    margin-top: 10px;
}

/* ===== 음성 탭 ===== */
.voice-layout {
    display: flex;
    gap: 20px;
}

.voice-left {
    flex: 1;
}

.voice-right {
    flex: 1;
}

.voice-controls-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.voice-settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setting-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-row>label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 오디오 미리듣기 */
.audio-preview {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    min-height: 60px;
}

.audio-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.audio-placeholder i {
    font-size: 24px;
}

.audio-placeholder p {
    font-size: 12px;
}

.audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.audio-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--accent-purple);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.audio-btn:hover {
    background: var(--accent-blue);
}

.audio-btn-sm {
    width: 28px;
    height: 28px;
    font-size: 12px;
    background: transparent;
    color: var(--text-secondary);
}

.audio-btn-sm:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.audio-timeline {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.audio-timeline:hover {
    height: 8px;
}

.audio-timeline:hover .audio-thumb {
    width: 16px;
    height: 16px;
    top: -4px;
}

.audio-progress {
    width: 0%;
    height: 100%;
    background: var(--accent-purple);
    border-radius: 3px;
    pointer-events: none;
}

.audio-thumb {
    position: absolute;
    top: -3px;
    left: 0%;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--accent-purple);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 6px rgba(124, 77, 255, 0.6);
    transition: width 0.15s, height 0.15s, top 0.15s;
}

.audio-time {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ===== 음성 생성 이력 ===== */
.voice-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.voice-history-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 16px 0;
}

.voice-history-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.voice-history-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
}

.voice-history-card:hover {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.05);
}

.voice-history-card.active {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.08);
}

.vh-left { flex-shrink: 0; }

.vh-play-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.vh-play-btn:hover,
.vh-play-btn.playing {
    background: var(--accent-purple);
    color: #fff;
}

.vh-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vh-voice {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vh-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.vh-time {
    font-size: 10px;
    color: var(--text-muted);
}

.vh-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.vh-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.vh-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.vh-use-btn:hover {
    background: rgba(124, 77, 255, 0.15);
    color: var(--accent-purple);
}

/* ===== 최종영상 탭 ===== */
.video-layout {
    display: flex;
    gap: 16px;
}

.video-left {
    flex: 2;
}

.video-right {
    flex: 1;
    min-width: 280px;
}

.video-top-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* 폰트 툴바 */
.font-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.font-toolbar .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border: 1px solid var(--border-color);
}

.font-toolbar .select-sm {
    min-width: 100px;
}

.video-sliders {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.slider-row label {
    white-space: nowrap;
}

.effect-settings {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.effect-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.effect-row label {
    white-space: nowrap;
}

/* 비디오 캔버스 */
.video-preview-container {
    position: relative;
    margin-bottom: 8px;
}

.video-canvas {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.video-canvas.portrait {
    aspect-ratio: 9/16;
    max-height: 500px;
    margin: 0 auto;
    width: auto;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.video-placeholder i {
    font-size: 48px;
}

.video-placeholder p {
    font-size: 13px;
}

.video-subtitle {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    max-width: 80%;
}

.aspect-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-sm);
    padding: 2px;
}

.aspect-toggle .btn-icon {
    color: #fff;
    width: 28px;
    height: 28px;
}

.aspect-toggle .btn-icon.active {
    background: var(--accent-blue);
}

/* 재생 컨트롤 */
.playback-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.timeline-container {
    flex: 1;
}

.timeline {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.timeline-progress {
    width: 0%;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

.timeline-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent-blue);
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: 0%;
    cursor: grab;
    display: none;
}

.timeline:hover .timeline-thumb {
    display: block;
}

.time-display {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 자막 편집 */
.subtitle-list {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subtitle-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.subtitle-num {
    font-size: 11px;
    color: var(--text-muted);
    width: 20px;
    text-align: center;
    padding-top: 4px;
    flex-shrink: 0;
}

.subtitle-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subtitle-time {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: monospace;
}

.subtitle-text {
    width: 100%;
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    resize: none;
    min-height: 32px;
}

.subtitle-text:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.subtitle-palette {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ===== 채널분석 페이지 ===== */

/* 헤더 + 검색바 */
.ch-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ch-header h2 {
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ch-search-bar {
    display: flex;
    gap: 8px;
    flex: 1;
}

.ch-search-bar input {
    flex: 1;
}

/* ── 검색/필터 패널 ── */
.ch-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 8px;
    position: relative;
    flex-shrink: 0;
}

.ch-panel-label {
    position: absolute;
    top: -9px;
    left: 14px;
    background: var(--bg-card);
    padding: 0 8px;
    font-size: 11px;
    color: var(--accent-blue);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ch-panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ch-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ch-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
    flex-shrink: 0;
}

.ch-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ch-field label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.ch-select {
    padding: 5px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    min-width: 90px;
}

.ch-select:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* 정렬 토글 버튼 그룹 */
.ch-btn-group {
    display: flex;
    gap: 0;
}

.ch-toggle {
    padding: 5px 14px;
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ch-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
}

.ch-toggle.active {
    background: var(--accent-blue);
    color: #fff;
}

/* 정렬 토글 (CII 스타일 연결형) */
.ch-toggle-sort {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ch-toggle-sort:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.ch-toggle-sort:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ch-toggle-sort:not(:first-child) {
    border-left: none;
}

.ch-toggle-sort:hover {
    border-color: var(--text-muted);
}

.ch-toggle-sort.active[data-value="all"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ch-toggle-sort.active[data-value="views"] {
    background: #00c853;
    border-color: #00c853;
    color: #fff;
}

.ch-toggle-sort.active[data-value="date"] {
    background: #69f0ae;
    border-color: #69f0ae;
    color: #1a1a2e;
}

/* CII 토글 (그룹 버튼) */
.ch-toggle-cii {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ch-toggle-cii:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.ch-toggle-cii:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ch-toggle-cii:not(:first-child) {
    border-left: none;
}

.ch-toggle-cii:hover {
    border-color: var(--text-muted);
}

.ch-toggle-cii.active[data-value="all"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ch-toggle-cii.active[data-value="Great!!"] {
    background: #00c853;
    border-color: #00c853;
    color: #fff;
}

.ch-toggle-cii.active[data-value="Good"] {
    background: #69f0ae;
    border-color: #69f0ae;
    color: #1a1a2e;
}

.ch-toggle-cii.active[data-value="Not bad"] {
    background: #fff176;
    border-color: #fff176;
    color: #1a1a2e;
}

/* 영상구분 토글 */
.ch-toggle-vtype {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ch-toggle-vtype:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.ch-toggle-vtype:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ch-toggle-vtype:not(:first-child) {
    border-left: none;
}

.ch-toggle-vtype:hover {
    border-color: var(--text-muted);
}

.ch-toggle-vtype.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* 채널 검색 버튼 (오렌지) */
.ch-btn-search {
    padding: 6px 18px;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ch-btn-search:hover {
    opacity: 0.85;
}

.ch-btn-search:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 채널 URL 입력 */
.ch-input-url {
    padding: 5px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    flex: 1;
    min-width: 160px;
}

.ch-input-url:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* 검색 / Clear 버튼 */
.ch-btn-go {
    padding: 5px 14px;
    background: var(--accent-green);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ch-btn-go:hover {
    opacity: 0.85;
}

.ch-btn-clear {
    padding: 5px 14px;
    background: #ff5252;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ch-btn-clear:hover {
    opacity: 0.85;
}

/* 필터 적용 (핑크) / 해제 (초록) */

/* 자막 수집 (파란색) */
.ch-btn-subtitle {
    padding: 5px 14px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ch-btn-subtitle:hover {
    opacity: 0.85;
}

/* 보관함 버튼 (자막수집 버튼과 동일 크기) */
.ch-btn-bookmark {
    padding: 5px 14px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.ch-btn-bookmark:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ── AI 기능 버튼 (노트북LM분석, AI 추천 아이디어, 타이틀 메이커) ── */
.ch-btn-ai {
    padding: 5px 14px;
    background: transparent;
    color: #a78bfa;
    border: 1px solid #a78bfa;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.ch-btn-ai:hover {
    background: rgba(167, 139, 250, 0.15);
}

/* ═══ AI 추천 아이디어 리포트 스타일 ═══ */
.ai-report-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

/* 트렌드 분석 섹션 */
.ai-trend-section {
    background: rgba(33, 150, 243, 0.08);
    border: 1px solid rgba(33, 150, 243, 0.25);
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
}

.ai-section-header {
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.ai-section-header-trend {
    background: rgba(33, 150, 243, 0.2);
    color: #90caf9;
}

.ai-section-header-idea {
    background: rgba(233, 30, 99, 0.2);
    color: #f48fb1;
}

.ai-trend-body {
    padding: 16px 20px;
}

.ai-trend-block {
    margin-bottom: 14px;
}

.ai-trend-block:last-child {
    margin-bottom: 0;
}

.ai-trend-label {
    font-weight: 700;
    font-size: 13px;
    color: #90caf9;
    margin-bottom: 6px;
}

.ai-trend-label i {
    margin-right: 4px;
}

.ai-trend-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 12px;
}

.ai-trend-list li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 2px 0;
    line-height: 1.6;
}

.ai-trend-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #64b5f6;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* 아이디어 섹션 */
.ai-ideas-section {
    border: 1px solid rgba(233, 30, 99, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.ai-idea-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.ai-idea-card:last-child {
    border-bottom: none;
}

.ai-idea-num {
    font-size: 15px;
    font-weight: 700;
    color: #ffd54f;
    margin-bottom: 10px;
}

.ai-idea-num i {
    color: #ffd54f;
    margin-right: 4px;
}

.ai-idea-field {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 4px;
}

.ai-idea-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
    margin-right: 4px;
}

.ai-idea-icon i {
    font-size: 11px;
}

.ai-idea-field-label {
    font-weight: 700;
    color: #ce93d8;
}

.ai-idea-points {
    list-style: none;
    padding: 0;
    margin: 2px 0 6px 26px;
}

.ai-idea-points li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 2px 0;
    line-height: 1.6;
}

.ai-idea-points li::before {
    content: '\2022';
    color: #a78bfa;
    margin-right: 8px;
}

/* ═══ 타이틀 메이커 스타일 ═══ */
.tm-wrap {
    padding: 24px;
}

.tm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.tm-header-left {
    flex: 1;
}

.tm-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.tm-title i {
    margin-right: 6px;
}

.tm-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.tm-header-right {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.tm-stat {
    font-size: 13px;
    color: var(--text-secondary);
}

.tm-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
}

.tm-badge-blue {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.tm-badge-green {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* 분석 영역 */
.tm-analysis {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.tm-analysis-top {
    text-align: right;
    margin-bottom: 10px;
}

.tm-copy-tags-btn {
    padding: 6px 14px;
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tm-copy-tags-btn:hover {
    background: #43a047;
}

.tm-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.tm-col {
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.tm-col-header {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.tm-col-blue {
    background: rgba(33, 150, 243, 0.18);
    color: #90caf9;
}

.tm-col-green {
    background: rgba(76, 175, 80, 0.18);
    color: #a5d6a7;
}

.tm-col-orange {
    background: rgba(255, 152, 0, 0.18);
    color: #ffcc80;
}

.tm-col-body {
    padding: 12px 14px;
}

.tm-col-item {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 3px 0;
    line-height: 1.6;
}

.tm-col-item i {
    margin-right: 4px;
}

.tm-col-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px;
}

/* 제목 생성 영역 */
.tm-generate {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.tm-gen-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffd54f;
    margin-bottom: 8px;
}

.tm-gen-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.tm-gen-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.tm-gen-input:focus {
    border-color: #a78bfa;
    outline: none;
}

.tm-gen-input::placeholder {
    color: var(--text-muted);
}

.tm-gen-result {
    margin-top: 16px;
}

/* 생성된 제목 결과 — 카드 레이아웃 */
.tmr-header {
    margin-bottom: 16px;
}

.tmr-header-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.tmr-header-title i {
    margin-right: 6px;
}

.tmr-header-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.tmr-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tmr-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.tmr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}

.tmr-card-style {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tmr-card-btns {
    display: flex;
    gap: 8px;
}

.tmr-btn-regen,
.tmr-btn-copy {
    padding: 5px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tmr-btn-regen {
    background: #ef5350;
    color: #fff;
}

.tmr-btn-regen:hover {
    background: #e53935;
}

.tmr-btn-copy {
    background: #42a5f5;
    color: #fff;
}

.tmr-btn-copy:hover {
    background: #1e88e5;
}

.tmr-card-body {
    padding: 14px 18px;
}

.tmr-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 8px;
}

.tmr-card-reason {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    white-space: pre-line;
}

/* 하단 버튼 */
.tm-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.tm-btn {
    padding: 10px 28px;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tm-btn-red {
    background: #ef5350;
    color: #fff;
}

.tm-btn-red:hover {
    background: #e53935;
}

.tm-btn-blue {
    background: #42a5f5;
    color: #fff;
}

.tm-btn-blue:hover {
    background: #1e88e5;
}

.tm-btn-gray {
    background: #78909c;
    color: #fff;
}

.tm-btn-gray:hover {
    background: #607d8b;
}

/* 고급 설정 서브 모달 */
.tm-adv-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    border-radius: inherit;
}

.tm-adv-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 440px;
    max-height: 80vh;
    overflow-y: auto;
}

.tm-adv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.tm-adv-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.tm-adv-body {
    padding: 20px;
}

.tm-adv-group {
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.tm-adv-group:last-child {
    margin-bottom: 0;
}

.tm-adv-label {
    font-size: 14px;
    font-weight: 700;
    color: #64b5f6;
    margin-bottom: 10px;
    display: block;
}

.tm-adv-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.tm-adv-select,
.tm-adv-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}

.tm-adv-select:focus,
.tm-adv-input:focus {
    border-color: #64b5f6;
    outline: none;
}

.tm-adv-select option {
    background: var(--bg-secondary);
}

.tm-adv-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
}

/* ── 작업실로 보내기 버튼 ── */
.ch-btn-send-bench {
    padding: 5px 14px;
    background: rgba(124, 58, 237, 0.25);
    color: #c4b5fd;
    border: 1px solid #7c3aed;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}

.ch-btn-send-bench:hover {
    background: rgba(124, 58, 237, 0.45);
    color: #ede9fe;
}

/* ── 시선집중 가져오기 버튼 ── */
.ch-btn-heatmap {
    padding: 5px 14px;
    background: rgba(255, 82, 82, 0.2);
    color: #ff8a80;
    border: 1px solid #ff5252;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
}

.ch-btn-heatmap:hover {
    background: rgba(255, 82, 82, 0.4);
    color: #ffcdd2;
}

/* ── 벤치 참고 영상 메타 표시 ── */
.bench-video-meta-info {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}

.bench-video-meta-info strong {
    color: #c4b5fd;
}

.bench-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.bench-meta-chip {
    background: rgba(124, 58, 237, 0.2);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
    color: #ddd6fe;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 인사이트 페이지 ── */
.page-insights.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 48px);
}

.ins-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.ins-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.ins-tab-content .cf-group-bar {
    flex-shrink: 0;
}

.ins-tab-content .cf-body {
    flex: 1;
    min-height: 0;
}

.ins-tab-content .bm-top-bar {
    flex-shrink: 0;
}

.ins-tab-content .bm-bottom-bar {
    flex-shrink: 0;
}

.ins-tabs {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}

.ins-tab {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}

.ins-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ins-tab.active {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.1);
}

.ins-tab[data-tab="channel"].active {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    background: rgba(255, 152, 0, 0.1);
}

.ins-tab[data-tab="video-fav"].active {
    color: var(--accent-red);
    border-color: var(--accent-red);
    background: rgba(239, 83, 80, 0.1);
}

/* 영상 즐겨찾기 - 채널 지정 행 */
.vf-channel-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.vf-channel-input {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
}

.vf-channel-input::placeholder {
    color: var(--text-muted);
}

.vf-channel-input.resolved {
    border-color: var(--accent-green);
    background: rgba(76, 175, 80, 0.05);
}

.vf-ch-resolve-btn {
    flex-shrink: 0;
    padding: 5px 10px !important;
}

.vf-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(68, 138, 255, 0.12);
    color: var(--accent-blue);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vf-channel-badge .vf-ch-clear {
    cursor: pointer;
    margin-left: 2px;
    opacity: 0.7;
}

.vf-channel-badge .vf-ch-clear:hover {
    opacity: 1;
}

/* 영상 즐겨찾기 썸네일 */
.vf-thumb {
    width: 120px;
    height: 68px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: #000;
    pointer-events: none; /* 이미지 기본 드래그 방지 — 부모 span이 드래그 담당 */
}

.bm-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.bm-select-badge {
    padding: 4px 14px;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.bm-search {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    width: 260px;
}

.bm-search::placeholder {
    color: var(--text-muted);
}

.bm-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
    min-height: 200px;
}

.bm-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.bm-item:hover {
    background: var(--bg-hover);
}

.bm-item.bm-checked {
    background: rgba(68, 138, 255, 0.08);
    border-color: var(--accent-blue);
}

.bm-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-secondary);
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    position: relative;
}

.bm-item input[type="checkbox"]:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.bm-item input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

.bm-item-info {
    flex: 1;
}

.bm-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    transition: background 0.15s;
}

.bm-item-title:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bm-title-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-blue);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
}

.bm-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.bm-item-meta i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
}

.bm-bottom-bar {
    display: flex;
    border-top: 1px solid var(--border-color);
}

.bm-action-btn {
    flex: 1;
    padding: 12px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    color: #fff;
    transition: opacity 0.15s;
}

.bm-action-btn:hover {
    opacity: 0.85;
}

.bm-action-btn.bm-load {
    background: #666;
}

.bm-action-btn.bm-toggle {
    background: var(--accent-purple);
}

.bm-action-btn.bm-delete {
    background: var(--accent-red);
}

.bm-action-btn.bm-close {
    background: #888;
}

.bm-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── 보관함 탭 ── */
.bm-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    padding: 0 16px;
    gap: 4px;
    flex-shrink: 0;
}

.bm-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.bm-tab:hover {
    color: var(--text-primary);
}

.bm-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.bm-tab[data-tab="channel"].active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

.bm-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── 채널 즐겨찾기: 그룹 바 ── */
.cf-group-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cf-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cf-group-select {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    min-width: 120px;
}

.cf-group-btn {
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.15s;
}

.cf-group-btn.cf-edit {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.cf-group-btn.cf-del {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.cf-group-btn.cf-add {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.cf-group-btn:hover {
    opacity: 0.8;
}

/* ── 그룹 입력 미니 모달 ── */
.mini-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalIn 0.15s ease;
}

.mini-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.mini-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.mini-modal-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.mini-modal-input:focus {
    border-color: var(--accent-blue);
}

.mini-modal-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.mini-modal-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.mini-modal-select:focus {
    border-color: var(--accent-blue);
}

.mini-modal-msg {
    margin-top: 8px;
    font-size: 12px;
    color: var(--accent-red);
}

.mini-modal-btns {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}

.mini-modal-btn {
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: all 0.15s;
}

.mini-modal-btn.mini-cancel {
    background: transparent;
    color: var(--text-secondary);
}

.mini-modal-btn.mini-cancel:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.mini-modal-btn.mini-confirm {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.mini-modal-btn.mini-confirm:hover {
    opacity: 0.85;
}

.mini-modal-btn.mini-confirm.mini-danger {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

/* ── 그룹 사이드바 (영상 즐겨찾기) ── */
.vf-group-sidebar {
    width: 140px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vf-gs-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    margin: 0 6px;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.vf-gs-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.vf-gs-item.active {
    background: rgba(var(--accent-blue-rgb, 66,133,244), 0.15);
    color: var(--accent-blue);
    font-weight: 600;
}
.vf-gs-item i { width: 14px; text-align: center; font-size: 12px; flex-shrink: 0; }
.vf-gs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.vf-gs-count {
    font-size: 10px;
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.vf-gs-item.active .vf-gs-count { background: rgba(var(--accent-blue-rgb, 66,133,244), 0.2); color: var(--accent-blue); }

/* 드래그 오버 시 폴더 하이라이트 */
.vf-gs-item.vf-gs-dragover {
    background: rgba(var(--accent-green-rgb, 76,175,80), 0.2) !important;
    color: var(--accent-green) !important;
    outline: 2px dashed var(--accent-green);
    outline-offset: -2px;
}

/* 드래그 중 영상 아이템 반투명 */
.vf-item.vf-dragging { opacity: 0.4; }

.vf-gs-ungroup { margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 10px; }

/* ── 채널 즐겨찾기: 좌우 분할 ── */
.cf-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.cf-left,
.cf-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cf-left {
    border-right: 1px solid var(--border-color);
}

/* 왼쪽 헤더 */
.cf-left-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cf-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cf-filter {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
}

.cf-filter::placeholder {
    color: var(--text-muted);
}

/* 채널 리스트 */
.cf-channel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    user-select: none;
}

.cf-ch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.cf-ch-item:hover {
    background: var(--bg-hover);
}

.cf-ch-item:last-child {
    border-bottom: none;
}

.cf-ch-item.cf-checked {
    background: rgba(68, 138, 255, 0.08);
}

.cf-ch-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-blue);
    background: var(--bg-secondary);
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    position: relative;
}

.cf-ch-item input[type="checkbox"]:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.cf-ch-item input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

/* ── 즐겨찾기 메모 ── */
.fav-memo-btn {
    flex-shrink: 0;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    vertical-align: middle;
}
.fav-memo-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--accent-amber);
    border-color: var(--accent-amber);
}
.fav-memo-btn.has-memo {
    color: var(--accent-amber);
    border-color: var(--accent-amber);
    opacity: 0.85;
}
.fav-memo-btn.has-memo:hover { opacity: 1; }
.fav-memo-preview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--accent-amber);
    opacity: 0.75;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.fav-memo-preview i { font-size: 10px; flex-shrink: 0; }

/* 메모 모달 */
.memo-modal { min-width: 360px; max-width: 440px; }
.memo-modal-target {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.memo-modal-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 300px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
}
.memo-modal-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(var(--accent-blue-rgb), 0.15);
}
.memo-modal-charcount {
    text-align: right;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    margin-bottom: 8px;
}

.cf-ch-thumb-wrap {
    cursor: grab;
    flex-shrink: 0;
    display: block;
}
.cf-ch-thumb-wrap:active { cursor: grabbing; }
.cf-ch-thumb {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-input);
    pointer-events: none;
}

.cf-ch-info {
    flex: 1;
    min-width: 0;
}

.cf-ch-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-ch-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cf-ch-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.cf-ch-badge.subs {
    background: rgba(68, 138, 255, 0.15);
    color: var(--accent-blue);
}

.cf-ch-badge.vids {
    background: rgba(255, 152, 0, 0.15);
    color: var(--accent-orange);
}

.cf-ch-badge.group {
    background: rgba(124, 77, 255, 0.15);
    color: var(--accent-purple);
}

/* 왼쪽 푸터 */
.cf-left-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cf-move-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.cf-move-btn:hover {
    background: var(--accent-purple);
    color: #fff;
}

.cf-video-count {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    text-align: center;
}

/* 오른쪽 헤더 */
.cf-right-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cf-search-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    overflow-y: auto;
    max-height: 90px;
}

.cf-search-input::placeholder {
    color: var(--text-muted);
}

.cf-search-btn {
    padding: 6px 18px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cf-search-btn:hover {
    opacity: 0.85;
}

/* 검색 결과 */
.cf-search-result {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--bg-secondary);
}

.cf-search-count {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0 8px;
}

/* 검색 결과 테이블 */
.cf-search-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cf-search-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.cf-search-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    user-select: none;
}

.cf-st-sortable {
    cursor: pointer;
}

.cf-st-sortable:hover {
    color: var(--accent-blue);
}

.cf-st-sortable i {
    font-size: 10px;
    margin-left: 2px;
}

.cf-search-table td {
    padding: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.cf-st-row {
    cursor: pointer;
    transition: background 0.1s;
}

.cf-st-row:hover {
    background: rgba(124, 92, 252, 0.06);
}

.cf-st-row.cf-st-checked {
    background: rgba(68, 138, 255, 0.15);
}

.cf-st-check {
    width: 30px;
    text-align: center;
}

.cf-st-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-secondary);
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    position: relative;
    vertical-align: middle;
}

.cf-st-check input[type="checkbox"]:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.cf-st-check input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: -1px;
    left: 1.5px;
    font-size: 11px;
    color: #fff;
    font-weight: bold;
}

.cf-st-no {
    width: 35px;
    text-align: center;
    color: var(--text-muted);
}

.cf-st-thumb {
    width: 36px;
}

.cf-st-thumb img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.cf-st-name {
    min-width: 120px;
}

.cf-st-subs,
.cf-st-vids {
    width: 80px;
    text-align: right;
    white-space: nowrap;
}

/* 추가 버튼 */
.cf-add-btn {
    padding: 10px;
    background: var(--accent-green);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}

.cf-add-btn:hover {
    opacity: 0.85;
}

/* 영상 카운트 */
.ch-video-count {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

/* 채널 정보 바 */
.ch-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-top: 12px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* 아웃라이어 요약 카드 */
.ch-outlier-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.outlier-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.outlier-card strong {
    color: var(--text-primary);
}

.ch-toggle-outlier {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.ch-toggle-outlier.active {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border-color: #ff5252;
}

.ch-info-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ch-info-name {
    font-weight: 600;
    font-size: 15px;
}

.ch-info-stat {
    font-size: 13px;
    color: var(--text-muted);
}

/* Outlier 범례 (채널 정보 바 오른쪽 끝) */
.outlier-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.outlier-legend-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 2px;
}

.outlier-legend-sep {
    color: var(--border-color);
    font-size: 13px;
    margin: 0 4px;
}

.outlier-legend .outlier-badge {
    font-size: 10px;
    padding: 1px 6px;
    cursor: default;
}

.outlier-legend .outlier-badge:hover {
    transform: none;
}

/* 채널분석 페이지 레이아웃: 테이블만 스크롤 */
.page-channel.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    overflow: hidden;
}

/* 스프레드시트 테이블 */
.ch-table-wrap {
    overflow: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    flex: 1;
    min-height: 0;
}

.ch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1500px;
}

.ch-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.channel-th {
    background: #2a3a5c;
    color: #a8c4e6;
    padding: 10px 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 2px solid #3a5a8c;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.channel-th:hover {
    background: #3a4a6c;
}

.channel-th.sort-asc::after {
    content: ' ▲';
    font-size: 10px;
}

.channel-th.sort-desc::after {
    content: ' ▼';
    font-size: 10px;
}

.ch-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.ch-table tbody tr:hover {
    background: rgba(124, 92, 252, 0.06);
}

.ch-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.ch-table tbody tr:nth-child(even):hover {
    background: rgba(124, 92, 252, 0.06);
}

.ch-table tbody tr.ch-selected {
    background: rgba(68, 138, 255, 0.35) !important;
    border-left: 3px solid #448aff;
}

.ch-table tbody tr.ch-selected td {
    color: #fff;
}

.ch-table td {
    padding: 8px;
    vertical-align: middle;
}

.ch-loading {
    text-align: center;
    padding: 40px !important;
    color: var(--text-muted);
}

/* 셀 타입 */
.cc {
    text-align: center;
}

.cr {
    text-align: right;
    white-space: nowrap;
}

.cb {
    font-weight: 600;
}

/* 채널 기여도 프로그래스바 */
.contrib-bar {
    position: relative;
    width: 100%;
    height: 18px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    overflow: hidden;
}

.contrib-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.4s ease;
}

.contrib-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.c-thumb img {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.c-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.c-thumb img:hover {
    transform: scale(1.08);
}

.btn-thumb-save {
    padding: 2px 8px;
    font-size: 10px;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.c-thumb:hover .btn-thumb-save {
    opacity: 1;
}

.btn-vid-dl {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
}

.btn-vid-dl:disabled {
    opacity: 0.6;
    cursor: wait;
}

.btn-timeline-sum {
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid #42a5f5 !important;
    color: #42a5f5 !important;
    background: transparent;
}

.btn-timeline-sum:hover {
    background: rgba(66, 165, 245, 0.12);
}

/* 타임라인 요약 모달 */
.tl-title-bar {
    padding: 0 0 14px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.tl-video-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.tl-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tl-card {
    display: flex;
    gap: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.2s;
}

.tl-card:hover {
    border-color: #42a5f5;
}

.tl-card-thumb {
    flex-shrink: 0;
    width: 200px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.tl-card-frame {
    image-rendering: auto;
}

.tl-card-thumb img {
    width: 100%;
    display: block;
}

.tl-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-card-time {
    font-size: 14px;
    font-weight: 700;
    color: #42a5f5;
}

.tl-card-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.tl-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.tl-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.tl-btn {
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.tl-btn:hover {
    border-color: #42a5f5;
    color: #42a5f5;
}

.c-dl-cell {
    text-align: center;
    vertical-align: middle !important;
}

.c-dl-cell .btn {
    display: block;
    margin: 3px auto;
}

.c-ch {
    white-space: nowrap;
    cursor: pointer;
}

.c-ch:hover {
    color: #7c9cff;
    text-decoration: underline;
}

.c-title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-idx {
    cursor: cell;
    user-select: none;
}

.c-tags {
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.c-tags:hover {
    color: #40c4ff;
    text-decoration: underline;
}

.tags-modal-content {
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    background: rgba(64, 196, 255, 0.12);
    color: #40c4ff;
    border: 1px solid rgba(64, 196, 255, 0.3);
}

.c-desc {
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.c-desc:hover {
    color: #40c4ff;
    text-decoration: underline;
}

/* 타입 배지 (쇼츠/롱폼) */
.vtype-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.vtype-short {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid #666;
}

.vtype-long {
    background: #555;
    color: #fff;
}

/* VPH 배지 */
.vph-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #667eea;
    background: rgba(102, 126, 234, 0.12);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 시선집중 보유 여부 아이콘 */
.hm-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    vertical-align: middle;
}
.hm-indicator-on {
    color: #f97316;
    opacity: 0.9;
}
.hm-indicator-off {
    color: var(--text-muted);
    opacity: 0.35;
}

/* ===== Outlier Score 배지 ===== */
.outlier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
    transition: transform 0.15s;
    white-space: nowrap;
}

.outlier-badge:hover {
    transform: scale(1.1);
}

/* 🔴 10x 이상 */
.outlier-hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .35);
}

/* 🟠 5~10x */
.outlier-high {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    box-shadow: 0 2px 6px rgba(249, 115, 22, .35);
}

/* 🟡 2~5x */
.outlier-good {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #fff;
    box-shadow: 0 2px 6px rgba(234, 179, 8, .35);
}

/* 🟢 1~2x */
.outlier-normal {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, .35);
}

/* ⚪ 1x 미만 */
.outlier-low {
    background: #555;
    color: #ccc;
}

/* ===== 댓글 분석 모달 ===== */
.ca-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.ca-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 영상별 그룹 */
.ca-video-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.ca-video-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.ca-video-idx {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ca-video-title {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-video-count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
}

.ca-video-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ca-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .15s;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ca-item:last-child {
    border-bottom: none;
}

.ca-item:hover {
    background: rgba(255, 255, 255, .04);
}

.ca-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--accent-green);
    width: 16px;
    height: 16px;
}

.ca-pri {
    flex-shrink: 0;
    font-size: 12px;
}

.ca-cat {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.ca-strength .ca-cat {
    color: #22c55e;
}

.ca-improve .ca-cat {
    color: #f97316;
}

.ca-text {
    color: var(--text-primary);
}

/* 시선집중 급상승 구간 모달 */
.hm-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.hm-no-data {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

.hm-video-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hm-video {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.hm-video-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.hm-video-header .hm-idx {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-green);
    color: #000;
    font-size: 11px;
    font-weight: 700;
}

.hm-video-header .hm-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.hm-peaks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hm-peak {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: 13px;
    line-height: 1.5;
}

.hm-peak:last-child {
    border-bottom: none;
}

.hm-time {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(239, 68, 68, .15);
    color: #f87171;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Consolas', monospace;
    white-space: nowrap;
}

.hm-intensity {
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.hm-intensity-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f97316, #ef4444);
    vertical-align: middle;
}

.hm-intensity-val {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 상승/개선 포인트 뱃지 */
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.hm-badge-surge {
    background: rgba(249, 115, 22, .15);
    color: #fb923c;
}

.hm-badge-drop {
    background: rgba(59, 130, 246, .15);
    color: #60a5fa;
}

/* AI 인사이트 */
.hm-insight {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 2px;
}

.hm-insight-surge {
    background: rgba(249, 115, 22, .08);
    color: #fdba74;
    border-left: 3px solid rgba(249, 115, 22, .4);
}

.hm-insight-drop {
    background: rgba(59, 130, 246, .08);
    color: #93c5fd;
    border-left: 3px solid rgba(59, 130, 246, .4);
}

/* 자막 원문 */
.hm-transcript {
    width: 100%;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    background: rgba(255, 255, 255, .04);
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 3px solid rgba(239, 68, 68, .3);
}

.hm-transcript:empty::after {
    content: '(자막 없음)';
    font-style: italic;
}

.hm-peak-rank {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    padding-top: 2px;
}

/* 시선집중 섹션 라벨 */
.hm-section-label {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hm-label-surge {
    color: #f97316;
}

.hm-label-drop {
    color: #60a5fa;
    margin-top: 4px;
}

/* 급락 구간 스타일 — 전체 파란색 톤 */
.hm-drop .hm-peak-rank {
    color: #3b82f6;
}

.hm-drop .hm-time {
    color: #60a5fa;
}

.hm-drop .hm-time i {
    color: #3b82f6;
}

.hm-drop .hm-intensity-val {
    color: #93c5fd;
}

.hm-drop-bar {
    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
}

.hm-drop-transcript {
    border-left-color: rgba(96, 165, 250, .4) !important;
}

.hm-video-empty {
    opacity: .55;
}

.hm-idx-empty {
    background: var(--text-muted) !important;
}

.hm-no-badge {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
}

.hm-empty-msg {
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.hm-empty-msg i {
    margin-right: 6px;
    opacity: .5;
}

/* ── 작업실 전송 진행 상태 모달 ── */
.pg-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pg-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 13px;
    color: var(--text-muted);
    transition: color .25s, opacity .25s;
}

.pg-step:last-child {
    border-bottom: none;
}

.pg-step-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
    transition: background .3s, color .3s;
}

.pg-step-label {
    flex: 1;
}

.pg-step-detail {
    font-size: 11px;
    color: var(--text-muted);
    opacity: .7;
    margin-left: auto;
    flex-shrink: 0;
}

/* 상태별 */
.pg-step.active {
    color: var(--text-color);
}

.pg-step.active .pg-step-icon {
    background: var(--primary-color);
    color: #fff;
    animation: pgPulse 1.2s infinite;
}

.pg-step.done {
    color: var(--text-muted);
    opacity: .7;
}

.pg-step.done .pg-step-icon {
    background: rgba(52, 211, 153, .15);
    color: #34d399;
}

.pg-step.error .pg-step-icon {
    background: rgba(239, 68, 68, .15);
    color: #ef4444;
}

@keyframes pgPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, .4);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }
}

/* ===== 내채널관리 그리드 ===== */
.mw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    padding: 4px 0;
}

.mw-grid-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 2px;
}

.mw-grid-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.mw-grid-divider span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.mw-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}

.mw-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .15);
    transform: translateY(-2px);
}

.mw-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
}

.mw-card-body {
    flex: 1;
    min-width: 0;
}

.mw-card-body h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 3px;
}

.mw-card-body p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-card-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
    opacity: .4;
    transition: opacity .2s;
}

.mw-card:hover .mw-card-arrow {
    opacity: 1;
    color: var(--primary-color);
}

/* ===== 내채널관리 서브섹션 공통 ===== */
.mw-section { padding: 0; }
.mw-section-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.mw-section-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.mw-btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px; font-size: 13px;
    background: var(--bg-card); border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer; transition: all .2s;
}
.mw-btn-back:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ===== 영상관리 ===== */
.vm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vm-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    overflow: hidden; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.vm-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(99,102,241,.15); transform: translateY(-2px); }
.vm-card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.vm-card-body { padding: 12px; }
.vm-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; line-height: 1.4; }
.vm-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); }
.vm-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.vm-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.vm-badge-public { background: rgba(34,197,94,.15); color: #4ade80; }
.vm-badge-unlisted { background: rgba(234,179,8,.15); color: #facc15; }
.vm-badge-private { background: rgba(239,68,68,.15); color: #f87171; }
.vm-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.vm-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vm-modal {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
    width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 24px;
}
.vm-modal h3 { margin: 0 0 16px; font-size: 16px; }
.vm-modal label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 12px 0 4px; }
.vm-modal input, .vm-modal textarea, .vm-modal select {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary); font-size: 13px;
}
.vm-modal textarea { min-height: 100px; resize: vertical; }
.vm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ===== 재생목록 관리 ===== */
.pm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pm-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    overflow: hidden; cursor: pointer; transition: border-color .2s, transform .15s;
}
.pm-card:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.pm-card-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.pm-card-body { padding: 12px; }
.pm-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.pm-card-meta { font-size: 11px; color: var(--text-muted); }
.pm-items { list-style: none; padding: 0; margin: 0; }
.pm-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px;
}
.pm-item-drag { cursor: grab; color: var(--text-muted); font-size: 14px; }
.pm-item-thumb { width: 120px; height: 68px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.pm-item-info { flex: 1; min-width: 0; }
.pm-item-title { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-item-channel { font-size: 11px; color: var(--text-muted); }
.pm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.pm-modal { background: var(--bg-card); border-radius: 12px; padding: 24px; width: 100%; max-width: 480px; }

/* ===== 댓글관리 ===== */
.cm-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.cm-tabs .tab-btn {
    padding: 8px 16px; font-size: 13px; font-weight: 500; border: none; background: none;
    color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s;
}
.cm-tabs .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.cm-list { display: flex; flex-direction: column; gap: 8px; }
.cm-thread {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px;
}
.cm-thread-header { display: flex; align-items: flex-start; gap: 10px; }
.cm-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cm-author { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cm-date { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.cm-text { font-size: 13px; color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }
.cm-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.cm-stats span { display: inline-flex; align-items: center; gap: 3px; }
.cm-actions { display: flex; gap: 6px; margin-top: 8px; }
.cm-actions button {
    padding: 4px 10px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color);
    background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; transition: all .2s;
}
.cm-actions button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cm-actions .cm-btn-danger:hover { border-color: #ef4444; color: #ef4444; }
.cm-actions .cm-btn-success:hover { border-color: #22c55e; color: #22c55e; }
.cm-replies { margin: 10px 0 0 42px; display: flex; flex-direction: column; gap: 8px; }
.cm-reply { padding: 10px; background: var(--bg-primary); border-radius: 8px; }
.cm-reply-form { margin-top: 10px; display: flex; gap: 8px; }
.cm-reply-form textarea { flex: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; min-height: 36px; resize: vertical; }
.cm-video-select { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 13px; max-width: 300px; }

/* ===== 채널성과 ===== */
.ca-period-selector { display: flex; gap: 4px; margin-left: auto; }
.ca-period-selector button {
    padding: 5px 12px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .2s;
}
.ca-period-selector button.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.ca-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ca-metric-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px;
}
.ca-metric-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin: 0 0 6px; }
.ca-metric-value { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.ca-metric-change { font-size: 12px; }
.ca-metric-change.up { color: #4ade80; }
.ca-metric-change.down { color: #f87171; }
.ca-metric-prev { font-size: 11px; color: var(--text-muted); }
.ca-chart-container {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    padding: 16px; margin-bottom: 16px;
}
.ca-chart-container h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }
.ca-chart-container canvas { width: 100% !important; height: 300px !important; }
.ca-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 768px) { .ca-chart-row { grid-template-columns: 1fr; } }
.ca-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ca-table th { text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color); }
.ca-table td { padding: 8px 10px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.ca-table tr:hover td { background: rgba(99,102,241,.05); }
.ca-table img { width: 60px; height: 34px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.ca-revenue-unavailable { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }

/* ===== 유튜브리포트 ===== */
.yr-create-form { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.yr-create-form h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }
.yr-create-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.yr-select, .yr-input {
    padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-primary); color: var(--text-primary); font-size: 13px;
}
.yr-select { min-width: 200px; }
.yr-input { flex: 1; min-width: 150px; }
.yr-jobs-table, .yr-reports-table, .yr-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.yr-jobs-table th, .yr-reports-table th, .yr-preview-table th {
    text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 600;
    border-bottom: 1px solid var(--border-color); font-size: 11px;
}
.yr-jobs-table td, .yr-reports-table td, .yr-preview-table td {
    padding: 8px 10px; color: var(--text-primary); border-bottom: 1px solid var(--border-color);
}
.yr-job-row { cursor: pointer; transition: background .2s; }
.yr-job-row:hover { background: rgba(99,102,241,.05); }
.yr-job-selected { background: rgba(99,102,241,.1) !important; }
.yr-preview-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; margin-top: 16px; }
.yr-preview-scroll { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.yr-preview-limit { text-align: center; color: var(--text-muted); font-size: 12px; padding: 8px; }
.yr-loading { text-align: center; padding: 40px; color: var(--text-muted); }
.yr-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }
.yr-section { margin-bottom: 20px; }
.yr-section h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px; }

/* Outlier 호버 툴팁 */
.outlier-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .92);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.outlier-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, .92);
}

.outlier-badge:hover .outlier-tooltip {
    opacity: 1;
    visibility: visible;
}

.outlier-tooltip-title {
    font-weight: 700;
    color: #f97316;
}

.outlier-tooltip-desc {
    color: #d1d5db;
    font-size: 10px;
    line-height: 1.4;
}

/* CII 배지 */
.cii-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    border: 1.5px solid;
}

.cii-great {
    background: rgba(0, 200, 83, 0.12);
    color: #00c853;
    border-color: #00c853;
}

.cii-good {
    background: rgba(105, 240, 174, 0.12);
    color: #69f0ae;
    border-color: #69f0ae;
}

.cii-notbad {
    background: rgba(255, 241, 118, 0.12);
    color: #fff176;
    border-color: #fff176;
}

.cii-bad {
    background: rgba(255, 82, 82, 0.06);
    color: #a05050;
    border-color: #7a3a3a;
}

/* 자막 수집 버튼 (쇼츠 뱃지 스타일) */
.sub-badge-btn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid #666;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sub-badge-btn:hover {
    background: #40c4ff;
    color: #1a1a2e;
    border-color: #40c4ff;
}

/* 자막 수집완료 뱃지 */
.sub-collected {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #40c4ff;
    color: #1a1a2e;
    cursor: pointer;
    transition: background 0.15s;
}

.sub-collected:hover {
    background: #80d8ff;
}

/* 댓글 수 클릭 가능 스타일 */
.c-comment-count {
    cursor: pointer;
}

.c-comment-count:hover {
    color: #40c4ff;
    text-decoration: underline;
}

/* 베스트 댓글 모달 */
.comment-block {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-author {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.comment-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-text {
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--text-secondary);
}

/* 빈 상태 */
.ch-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    flex: 1;
    min-height: 0;
    gap: 12px;
}

.ch-empty-state i {
    font-size: 48px;
    opacity: 0.3;
}

/* 하단 툴바 */
.ch-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-card);
    flex-shrink: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.ch-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.ch-result-count {
    font-size: 13px;
    color: var(--text-muted);
}

.ch-search-filter {
    padding: 6px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    width: 200px;
}

.ch-search-filter:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* 설정 힌트 텍스트 */
.config-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ===== 프로젝트 페이지 ===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.page-header h2 {
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.project-card:hover {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.project-card-thumb {
    width: 64px;
    height: 48px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.project-card-info {
    flex: 1;
}

.project-card-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.project-date {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 0;
}
.project-date-sep {
    margin: 0 6px;
    opacity: 0.4;
}

.project-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.project-card-actions {
    display: flex;
    gap: 4px;
}

/* --- 프로젝트 카드 단계 표시 --- */
.pc-steps {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.pc-step {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--bg-hover);
    color: var(--text-muted);
    white-space: nowrap;
}
.pc-step-done {
    background: rgba(0, 200, 83, 0.18);
    color: var(--accent-green);
}

/* --- 새 프로젝트 카드 --- */
.project-card-new {
    border: 2px dashed var(--border-color);
    background: transparent;
    justify-content: center;
    min-height: 80px;
}
.project-card-new:hover {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.06);
}
.project-card-new-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent-purple);
    flex-shrink: 0;
    transition: var(--transition);
}
.project-card-new:hover .project-card-new-icon {
    background: rgba(124, 77, 255, 0.22);
    transform: scale(1.08);
}
.project-card-new .project-card-info h4 {
    color: var(--accent-purple);
    font-size: 15px;
}
.project-card-new .project-card-info .project-meta {
    color: var(--text-muted);
}

/* ===== 설정 페이지 ===== */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.settings-tab-btn {
    padding: 8px 20px;
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}

.settings-tab-btn:hover {
    color: var(--text-primary);
}

.settings-tab-btn.active {
    background: var(--bg-hover);
    color: var(--accent-blue);
}

.settings-content {
    display: none;
}

.settings-content.active {
    display: block;
}

.settings-content h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* 스타일+캐릭터 좌우 레이아웃 */
.style-character-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.style-panel {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.style-panel .style-grid {
    flex: 1;
}

.style-character-layout .character-section {
    flex: 2;
    min-width: 0;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--border-color);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
}

.style-character-layout .character-grid {
    flex: 1;
    align-content: flex-start;
}

/* 우측 캐릭터 그리드: 프리셋과 동일한 auto-fill */
.style-character-layout .character-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* 스타일 그리드 */
.style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: 12px;
}

.style-card {
    position: relative;
}

.style-card:hover {
    border-color: var(--text-muted);
}

.style-card.active {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.1);
}

.style-card.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

#custom-style-upload-card.active::after {
    display: none;
}

.style-thumb {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.8);
    background: var(--bg-input);
    overflow: hidden;
}

.style-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 커스텀 스타일 업로드 */
.custom-style-thumb {
    position: relative;
    cursor: pointer;
}

.custom-upload-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 10px;
    color: #fff;
}

.custom-upload-overlay i {
    font-size: 18px;
}

.custom-style-thumb:hover .custom-upload-overlay {
    opacity: 1;
}

.custom-style-thumb.has-image .custom-upload-overlay span {
    display: block;
}

.custom-style-thumb.has-image #custom-style-icon {
    display: none;
}

/* (커스텀 삭제 버튼 스타일은 .custom-card-delete-btn 으로 이전) */

/* 동적 커스텀 카드 */
.style-card.dynamic-custom {
    position: relative;
}

.custom-card-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.style-card.dynamic-custom:hover .custom-card-delete-btn {
    opacity: 1;
}

.custom-card-label.analyzing {
    color: var(--accent-orange);
    font-style: italic;
}

.custom-card-label.analyze-failed {
    color: var(--accent-red);
    font-size: 10px;
    font-style: italic;
}

/* 재분석 오버레이 */
.retry-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.retry-overlay i {
    font-size: 24px !important;
    color: var(--accent-orange) !important;
}

.style-card.dynamic-custom:hover .retry-overlay i {
    color: #fff !important;
}

/* 분석 중 스피너 오버레이 */
.analyzing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-sm);
}

.mini-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.style-card.dynamic-custom .style-thumb {
    position: relative;
}

/* 업로드 카드 "+" 아이콘 */
#custom-style-upload-card .style-thumb {
    border: 2px dashed var(--border-color);
    background: transparent;
    transition: var(--transition);
}

#custom-style-upload-card .style-thumb:hover {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.05);
}

#custom-style-upload-card .style-thumb i {
    font-size: 28px;
    color: var(--text-muted);
    transition: var(--transition);
}

#custom-style-upload-card .style-thumb:hover i {
    color: var(--accent-blue);
}

/* 스타일 설명 영역 */
.style-description {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius);
    min-height: 60px;
}

.style-desc-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* 설정 구성 */
.config-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.config-section.config-disabled {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.config-section h3 {
    margin-bottom: 12px;
}

.config-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.config-row>label {
    font-size: 12px;
    color: var(--text-secondary);
}

.config-value {
    font-size: 13px;
}

.input-with-btn {
    display: flex;
    gap: 8px;
}

.input-with-btn .input-full {
    flex: 1;
}

.key-display {
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.key-display code {
    font-family: monospace;
    color: var(--accent-yellow);
    letter-spacing: 2px;
}

.config-buttons {
    display: flex;
    gap: 8px;
}

/* ── API 사용량 대시보드 ── */
#api-usage-result:empty { display: none; }

.au-loading {
    padding: 16px;
    color: var(--text-muted);
    text-align: center;
}

.au-section {
    margin-top: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
}

.au-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.au-section-title i { margin-right: 4px; }

.au-key-list { display: flex; flex-direction: column; gap: 6px; }

.au-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 12px;
    flex-wrap: wrap;
}

.au-key-inactive { opacity: 0.6; }

.au-key-idx {
    font-weight: 700;
    color: var(--accent-purple);
    min-width: 22px;
}

.au-key-val {
    font-family: 'Fira Code', monospace;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.au-key-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.au-status-active {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.au-status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.au-key-time {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: auto;
}

.au-key-error {
    color: #ef4444;
    font-size: 10px;
    width: 100%;
    padding-left: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.au-stats-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.au-stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
}

.au-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.au-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-purple);
}

.au-sub-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 4px;
    padding-left: 2px;
}

.au-empty-row {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 8px;
}

.au-action-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.au-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.au-action-name {
    flex: 1;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
    font-size: 11px;
}

.au-action-cnt {
    color: var(--accent-blue);
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.au-action-tok {
    color: var(--text-muted);
    min-width: 70px;
    text-align: right;
    font-size: 11px;
}

/* 설정 2열 그리드 */
.config-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

.config-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.config-status {
    font-size: 11px;
    margin-left: 8px;
}

.config-status.ok {
    color: var(--accent-green);
}

.config-status.ok::before {
    content: '● ';
}

.config-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 로그인 전 잠금 상태 */
.config-section.config-locked {
    position: relative;
    overflow: hidden;
}

.config-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(26, 26, 46, 0.8);
    backdrop-filter: blur(2px);
    color: var(--text-muted);
    font-size: 13px;
    z-index: 2;
    border-radius: var(--radius);
}

.config-lock-overlay i {
    color: var(--accent-orange);
}

.config-section.config-unlocked .config-lock-overlay {
    display: none;
}

/* Google 인증 */
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-google:hover {
    background: #3367d6;
}

.google-logged-in .google-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.google-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--accent-green);
}

.google-user-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.google-user-name {
    font-size: 13px;
    font-weight: 500;
}

.google-user-email {
    font-size: 11px;
    color: var(--text-secondary);
}

/* YouTube 채널 목록 (설정) */
.yt-channels-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.yt-ch-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--bg-card);
}

.yt-ch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-top: none;
    cursor: pointer;
    transition: var(--transition);
}

.yt-ch-item:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.yt-ch-item:hover {
    background: rgba(124, 77, 255, 0.05);
}

.yt-ch-item.selected {
    background: rgba(124, 77, 255, 0.15);
}

.yt-ch-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.yt-ch-item .ch-email {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-ch-item .ch-divider {
    color: var(--text-muted);
    flex-shrink: 0;
}

.yt-ch-item .ch-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.yt-ch-badge {
    font-size: 11px;
    background: var(--accent-purple);
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.yt-ch-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

.btn-ch-add {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--btn-primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-ch-add:hover {
    background: #3370e0;
}

.btn-ch-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-ch-delete {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-ch-delete:hover:not(:disabled) {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-ch-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* YouTube API 다중 키 목록 */
.yt-keys-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.yt-key-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
}

.yt-key-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent-green);
    transition: var(--transition);
}

.yt-key-item.inactive {
    border-left-color: var(--accent-red);
    opacity: 0.7;
}

.yt-key-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.yt-key-masked {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
}

.yt-key-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.yt-key-badge.active {
    background: rgba(0, 200, 83, 0.15);
    color: var(--accent-green);
}

.yt-key-badge.error {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
}

.yt-key-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.yt-key-meta.error {
    color: var(--accent-red);
}

.yt-key-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: var(--transition);
    flex-shrink: 0;
}

.yt-key-delete:hover {
    color: var(--accent-red);
    background: rgba(255, 82, 82, 0.1);
}

.yt-key-count {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* 사이드바 로그인 아이콘 */
.sidebar-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.sidebar-auth:hover {
    background: var(--bg-hover);
}

.sidebar-auth i {
    font-size: 16px;
    color: var(--text-muted);
}

.sidebar-auth.logged-in {
    background: none;
    border: 2px solid var(--accent-green);
    overflow: hidden;
}

.sidebar-auth.logged-in i {
    display: none;
}

.sidebar-auth-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-auth-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--accent-blue);
    border-radius: 50%;
    text-transform: uppercase;
}

/* ===== 내구독채널 (My Channels) ===== */
.mc-container {
    display: flex;
    gap: 10px;
    height: calc(100vh - 48px);
}

/* 1/6: 연결된 채널 패널 */
.mc-accounts {
    flex: 1;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-accounts-header {
    padding: 12px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mc-manage-btn {
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.mc-manage-btn:hover {
    opacity: 0.85;
}

.mc-account-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
    white-space: nowrap;
}

.mc-accounts-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 연결 채널 행 (한 줄 수평 레이아웃) */
.mc-acc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    cursor: pointer;
    transition: var(--transition);
    min-height: 44px;
}

.mc-acc-row:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.mc-acc-row.selected {
    border-color: var(--accent-yellow);
    background: rgba(255, 215, 64, 0.08);
}

.mc-acc-email-pill {
    background: rgba(124, 77, 255, 0.15);
    color: #b39ddb;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    flex-shrink: 0;
}

.mc-acc-dot {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.mc-acc-name {
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.mc-acc-selected {
    background: var(--accent-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.mc-acc-selected i {
    font-size: 9px;
}

.btn-xs {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 2/6: 구독 리스트 패널 */
.mc-sidebar {
    flex: 2;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-sidebar-header {
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-badge {
    background: var(--accent-purple);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.mc-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

.mc-search .input-full {
    padding: 6px 10px;
    font-size: 12px;
}

.mc-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.mc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
    margin-bottom: 2px;
}

.mc-item:hover {
    background: var(--bg-hover);
}

.mc-item.active {
    background: rgba(124, 77, 255, 0.15);
    border-color: var(--accent-purple);
}

.mc-item-fav {
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.4;
    transition: var(--transition);
}

.mc-item:hover .mc-item-fav {
    opacity: 0.7;
}

.mc-item-fav.faved {
    opacity: 1;
    color: #ffd740;
}

.mc-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}

.mc-item-info {
    flex: 1;
    min-width: 0;
}

.mc-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-item-desc {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-content {
    flex: 3;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-content-header {
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    gap: 10px;
}

.mc-content-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-filter-group {
    display: inline-flex;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.mc-filter-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.mc-filter-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.mc-filter-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.mc-filter-btn.active {
    color: #fff;
    background: var(--accent-purple);
    font-weight: 600;
}

.mc-filter-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.mc-filter-btn:disabled:hover {
    color: var(--text-muted);
    background: transparent;
}

.mc-mini-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: mc-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

.mc-detail {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.mc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    line-height: 2;
}

.mc-empty i {
    font-size: 32px;
    margin-bottom: 8px;
}

.mc-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 8px 0;
}

/* 영상 카드 */
.mc-video {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.mc-video:hover {
    border-color: var(--border-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.mc-video-thumb {
    width: 200px;
    height: 112px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.mc-video-info {
    flex: 1;
    min-width: 0;
}

.mc-video-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-video-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mc-video-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}

.mc-video-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mc-vph {
    color: var(--accent-blue) !important;
    font-weight: 600;
    background: rgba(68, 138, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Outlier Score 배지 */
.mc-outlier {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    cursor: help;
    position: relative;
}

.mc-outlier.hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.mc-outlier.high {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.mc-outlier.good {
    background: linear-gradient(135deg, #eab308, #ca8a04);
}

.mc-outlier.normal {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.mc-outlier.low {
    background: #6b7280;
}

.mc-outlier-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 50;
    pointer-events: none;
}

.mc-outlier:hover .mc-outlier-tip {
    opacity: 1;
    visibility: visible;
}

/* 채널 정보 모달 */
.mc-ci-header {
    background: linear-gradient(135deg, #7c3aed, #a855f7, #6366f1);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-ci-header h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mc-ci-header .btn-icon {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.mc-ci-header .btn-icon:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.mc-ci-body {
    padding: 0;
    max-height: 75vh;
    overflow-y: auto;
}

.mc-ci-content {
    text-align: center;
    padding: 28px 24px 20px;
}

.mc-ci-thumb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
    border: 4px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.mc-ci-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.mc-ci-section {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.mc-ci-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-ci-label i {
    width: 14px;
    text-align: center;
}

.mc-ci-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
}

.mc-ci-desc {
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.mc-ci-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.mc-ci-bottom-item {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.mc-ci-bottom-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mc-ci-bottom-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.mc-ci-sub-count {
    color: var(--accent-blue);
}

.mc-ci-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.mc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.mc-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== 앱 인증 상태 토글 ===== */
.app-container.hidden-by-auth .main-content {
    display: none !important;
}

/* ===== 랜딩페이지 ===== */
.landing-page {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

.landing-page.visible {
    display: block;
}

/* 네비게이션 */
.landing-nav {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 101;
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.landing-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.landing-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.landing-nav-logo img {
    border-radius: 8px;
}

.landing-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c4dff, #00e5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 랜딩 nav 원형 로그인 아이콘 (사이드바와 동일) */
.landing-nav-auth {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.landing-nav-auth:hover {
    background: var(--bg-hover);
}

.landing-nav-auth i {
    font-size: 16px;
    color: var(--text-muted);
}
.landing-auth-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

/* Google 로그인 버튼 (공통) */
.btn-google-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-google-login:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.btn-google-login:active {
    transform: translateY(0);
}

.btn-google-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-google-login .google-icon {
    flex-shrink: 0;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
}

.btn-google-sm {
    padding: 8px 18px;
    font-size: 14px;
}

.btn-google-lg {
    padding: 16px 40px;
    font-size: 17px;
    border-radius: 12px;
}

/* 히어로 섹션 */
.landing-hero {
    padding: 160px 32px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.landing-hero-inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.landing-hero-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(124, 77, 255, 0.15);
    border: 1px solid rgba(124, 77, 255, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-purple);
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}

.landing-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.landing-gradient-text {
    background: linear-gradient(135deg, var(--accent-purple), #00bcd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-hero-desc {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.landing-hero-sub {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

/* 섹션 공통 */
.landing-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.landing-section-title {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.landing-section-desc {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 56px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 핵심 기능 섹션 */
.landing-features {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(30, 30, 60, 1) 100%);
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.landing-feature-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 28px;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.landing-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 77, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.landing-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fc) 15%, transparent);
    color: var(--fc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.landing-feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.landing-feature-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.landing-feature-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* 타겟별 솔루션 섹션 */
.landing-personas {
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(124, 77, 255, 0.04) 0%, var(--bg-primary) 100%);
}

.landing-personas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.landing-persona-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 28px;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.landing-persona-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.25s;
}

.landing-persona-card[data-persona="creator"]::before {
    background: linear-gradient(90deg, #e91e63, #ff5252);
}

.landing-persona-card[data-persona="analyst"]::before {
    background: linear-gradient(90deg, #7c4dff, #00bcd4);
}

.landing-persona-card[data-persona="business"]::before {
    background: linear-gradient(90deg, #ff9800, #4caf50);
}

.landing-persona-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-purple);
    box-shadow: 0 12px 40px rgba(124, 77, 255, 0.15);
}

.landing-persona-card:hover::before {
    opacity: 1;
}

.landing-persona-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.landing-persona-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.landing-persona-card[data-persona="creator"] .landing-persona-icon {
    background: rgba(233, 30, 99, 0.12);
    color: #e91e63;
}

.landing-persona-card[data-persona="analyst"] .landing-persona-icon {
    background: rgba(124, 77, 255, 0.12);
    color: #7c4dff;
}

.landing-persona-card[data-persona="business"] .landing-persona-icon {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}

.landing-persona-tag {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary, #fff);
}

.landing-persona-slogan {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-persona-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.landing-persona-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-persona-list li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-persona-list li i {
    color: #4caf50;
    font-size: 11px;
    flex-shrink: 0;
}

/* 워크플로우 섹션 */
.landing-workflow {
    padding: 100px 0;
}

.landing-workflow-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.landing-wf-step {
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 220px;
    transition: transform 0.2s, border-color 0.2s;
}

.landing-wf-step:hover {
    transform: translateY(-4px);
    border-color: var(--accent-purple);
}

.landing-wf-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple), #00bcd4);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.landing-wf-step h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.landing-wf-step p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.landing-wf-arrow {
    color: var(--text-muted);
    font-size: 20px;
    padding: 0 12px;
    flex-shrink: 0;
}

/* CTA 섹션 */
.landing-cta {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(124, 77, 255, 0.08) 100%);
}

.landing-cta-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
}

.landing-cta-desc {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

/* 푸터 */
.landing-footer {
    padding: 32px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 13px;
}

/* 랜딩페이지 반응형 */
@media (max-width: 1024px) {
    .landing-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .landing-personas-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .landing-hero-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .landing-features-grid {
        grid-template-columns: 1fr;
    }
    .landing-hero-title {
        font-size: 32px;
    }
    .landing-hero {
        padding: 120px 20px 60px;
    }
    .landing-section-title {
        font-size: 28px;
    }
    .landing-personas {
        padding: 60px 0;
    }
    .landing-persona-slogan {
        font-size: 20px;
    }
    .landing-workflow-steps {
        flex-direction: column;
        gap: 16px;
    }
    .landing-wf-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }
    .landing-wf-step {
        width: 100%;
        max-width: 300px;
    }
    .btn-google-lg {
        padding: 14px 28px;
        font-size: 15px;
    }
}

/* ===== 채널 비교 ===== */
.compare-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.compare-search {
    display: flex;
    gap: 8px;
    flex: 1;
}

.compare-search .cs-input {
    flex: 1;
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
}

.compare-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.compare-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.compare-slot {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    border-top: 3px solid var(--slot-color, var(--border-color));
}

.compare-slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    color: var(--text-muted);
    font-size: 13px;
    border-style: dashed;
    cursor: pointer;
    transition: border-color 0.2s;
}
.compare-slot-empty:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.compare-slot-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.compare-slot-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.compare-slot-icon { font-size: 32px; color: var(--text-muted); flex-shrink: 0; }

.compare-slot-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.compare-slot-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;
}
.compare-slot-country { color: var(--text-muted); }
.compare-slot-grade { font-weight: 600; font-size: 10px; }

.compare-slot-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}
.compare-slot { position: relative; }
.compare-slot-remove:hover { color: #ff5252; }

.compare-slot-stats-row {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
    flex-wrap: wrap;
}
.compare-slot-stats-row em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 10px;
    margin-right: 3px;
}
.compare-slot-pubdate {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.compare-slot-pubdate em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 10px;
    margin-right: 3px;
}

.compare-slot-growth {
    font-size: 12px;
    font-weight: 600;
}
.compare-slot-growth.positive { color: #4caf50; }
.compare-slot-growth.negative { color: #ff5252; }

.compare-slot-desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: default;
}

/* JS 기반 커스텀 툴팁 (채널 설명 + 메모 공용) */
.slot-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 380px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
}

/* ─── 비교 섹션 공통 ─── */
.compare-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}
.compare-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── 레이더 + 성장 추이 좌우 배치 ─── */
.compare-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.compare-chart-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}
.compare-growth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.compare-growth-header .compare-section-title { margin-bottom: 0; }
.compare-growth-period { display: flex; gap: 4px; }
.compare-period-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.compare-period-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}
.compare-growth-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    font-size: 13px;
    gap: 8px;
}

/* ─── 인기 영상 비교 ─── */
.compare-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.compare-video-col {
    border-left: 3px solid var(--col-color, var(--border-color));
    padding-left: 12px;
}
.compare-video-col-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.compare-video-card {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}
.compare-video-card:hover { background: rgba(255,255,255,0.05); }
.compare-video-thumb {
    width: 80px;
    height: 45px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.compare-video-info { flex: 1; overflow: hidden; }
.compare-video-title {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.compare-video-stats {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ─── AI 비교 분석 ─── */
.compare-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.compare-ai-header .compare-section-title { margin-bottom: 0; }
.compare-ai-result {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.compare-ai-text { padding: 8px 0; }
.compare-ai-text strong { color: var(--text-primary); }
.ai-num { color: var(--accent-blue); font-weight: 700; }

/* ─── 핵심 지표 테이블 ─── */
.compare-metric-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
}

.compare-metric-row td {
    padding: 10px 0;
    vertical-align: middle;
}

.compare-metric-row:not(:last-child) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

td.compare-metric-label {
    width: 110px;
    font-size: 15px;
    font-weight: 700;
    color: #e0e0e0;
    padding-right: 20px;
    white-space: nowrap;
    vertical-align: middle;
    letter-spacing: -0.3px;
}

td.compare-metric-bars {
    width: 100%;
}

.compare-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.compare-bar-row:last-child { margin-bottom: 0; }

.compare-bar-name {
    width: 80px;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.compare-bar-track {
    flex: 1;
    height: 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.compare-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.compare-bar-val {
    width: 90px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    flex-shrink: 0;
}

/* ===== 로그아웃 확인 모달 ===== */
.logout-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.logout-modal-overlay.show {
    display: flex;
}
.logout-modal {
    background: var(--bg-card, #1e1e3a);
    border: 1px solid var(--border-color, #2a2a4a);
    border-radius: 16px;
    padding: 32px 36px;
    text-align: center;
    min-width: 300px;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: logoutModalIn 0.2s ease-out;
}
@keyframes logoutModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.logout-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.logout-modal-icon i {
    font-size: 22px;
    color: var(--accent-purple, #7c4dff);
}
.logout-modal-email {
    font-size: 14px;
    color: var(--text-secondary, #aaa);
    margin-bottom: 4px;
}
.logout-modal-msg {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 24px;
}
.logout-modal-btns {
    display: flex;
    gap: 10px;
}
.logout-modal-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, 0.2s);
}
.logout-modal-btn.btn-confirm {
    background: var(--accent-purple, #7c4dff);
    color: #fff;
}
.logout-modal-btn.btn-confirm:hover {
    background: #6a3de8;
}
.logout-modal-btn.btn-cancel {
    background: var(--bg-hover, #2a2a4a);
    color: var(--text-secondary, #aaa);
}
.logout-modal-btn.btn-cancel:hover {
    background: var(--border-color, #3a3a5a);
}

/* ===== 모달 ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease;
}

.modal-lg {
    max-width: 680px;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease;
}

.modal-content.modal-lg {
    max-width: 900px;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.subtitle-video-block {
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.subtitle-video-title {
    padding: 10px 14px;
    background: var(--bg-card);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.subtitle-video-title .sub-copy-btn {
    cursor: pointer;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 11px;
}

.subtitle-video-title .sub-copy-btn:hover {
    color: #fff;
    border-color: #448aff;
}

.subtitle-text {
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--text-primary);
    max-height: 300px;
    overflow-y: auto;
}

.subtitle-error {
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--accent-red);
}

.subtitle-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

/* 딸깍 스텝 */
.ddalkkak-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ddalkkak-step {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-hover);
}

.step-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-header h3 {
    font-size: 13px;
    font-weight: 500;
}

.step-content {
    padding: 12px 14px;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.step-row:last-child {
    margin-bottom: 0;
}

.step-row>label {
    width: 100px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ===== 로딩 오버레이 ===== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-overlay.hidden {
    display: none;
}

.loading-content {
    text-align: center;
    color: var(--text-primary);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 14px;
    margin-bottom: 12px;
}

.loading-progress {
    width: 200px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.loading-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ===== 채널검색 페이지 ===== */
.page-channel-search.active,
.page-rapid-growth.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px);
    overflow: hidden;
}

/* ═══════════════════════════════════════════
   떡상체크 페이지
═══════════════════════════════════════════ */

/* 헤더 */
.rg-header {
    flex-shrink: 0;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color, #333);
    background: var(--bg-secondary, #1a1a2e);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rg-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
}
.rg-header-sub {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}
.rg-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}
.rg-url-input {
    flex: 1;
    padding: 9px 14px;
    background: var(--bg-primary, #111);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #e0e0e0);
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.rg-url-input:focus { border-color: #ff6b35; }
.rg-guide-info {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

/* 결과 스크롤 영역 */
.rg-result-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 로딩 / 에러 / 플레이스홀더 */
.rg-loading, .rg-error, .rg-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #888;
    padding: 60px 20px;
    text-align: center;
    font-size: 14px;
}
.rg-loading { color: #aaa; }
.rg-error   { color: #f44336; }

/* 영상 카드 */
.rg-video-card {
    display: flex;
    gap: 14px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 10px;
    padding: 14px;
    align-items: flex-start;
}
.rg-thumb {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #222;
}
.rg-video-info { flex: 1; min-width: 0; }
.rg-video-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-word;
}
.rg-video-title a { color: var(--text-primary, #e0e0e0); text-decoration: none; }
.rg-video-title a:hover { color: #ff6b35; }
.rg-video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #888;
}
.rg-video-meta span { display: flex; align-items: center; gap: 4px; }

/* 점수 섹션 */
.rg-score-section {
    display: flex;
    gap: 20px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 10px;
    padding: 20px;
    align-items: center;
}
.rg-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rg-score-circle {
    position: relative;
    width: 100px;
    height: 100px;
}
.rg-score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.rg-sc-bg {
    fill: none;
    stroke: #2a2a3e;
    stroke-width: 10;
}
.rg-sc-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 264;
    transition: stroke-dashoffset .6s ease;
}
.rg-score-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rg-score-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.rg-score-denom {
    font-size: 11px;
    color: #666;
}
.rg-level-badge {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: .5px;
}
.rg-score-right { flex: 1; min-width: 0; }
.rg-message {
    font-size: 14px;
    color: var(--text-primary, #e0e0e0);
    font-style: italic;
    margin-bottom: 14px;
    line-height: 1.5;
}

/* 가중치 바 */
.rg-weight-bars { display: flex; flex-direction: column; gap: 6px; }
.rg-wb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.rg-wb-name { width: 90px; color: #aaa; flex-shrink: 0; }
.rg-wb-track {
    flex: 1;
    height: 6px;
    background: #2a2a3e;
    border-radius: 3px;
    overflow: hidden;
}
.rg-wb-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
}
.rg-wb-val { width: 32px; text-align: right; color: #aaa; flex-shrink: 0; }

/* 체크리스트 */
.rg-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 860px) { .rg-checklist { grid-template-columns: 1fr; } }
.rg-cl-section {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rg-cl-title {
    font-size: 13px;
    font-weight: 700;
    color: #aaa;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #333);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rg-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.rg-check-pass { background: rgba(76,175,80,.08); }
.rg-check-fail { background: rgba(244,67,54,.06); }
.rg-check-emoji { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.rg-check-body { flex: 1; min-width: 0; }
.rg-check-label {
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rg-check-pts {
    font-size: 11px;
    color: #666;
    font-weight: 400;
}
.rg-check-note {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.4;
}
.rg-ci-pass { color: #4caf50; font-size: 16px; flex-shrink: 0; }
.rg-ci-fail { color: #f44336; font-size: 16px; flex-shrink: 0; }

/* 개선 제안 */
.rg-improve-section {
    background: rgba(255,107,53,.06);
    border: 1px solid rgba(255,107,53,.25);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rg-improve-title {
    font-size: 13px;
    font-weight: 700;
    color: #ff9d6a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rg-improve-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
}
.rg-improve-emoji { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.rg-improve-body  { flex: 1; min-width: 0; }
.rg-improve-row strong { color: var(--text-primary, #e0e0e0); }
.rg-improve-row p { margin: 2px 0 6px; color: #888; font-size: 12px; line-height: 1.4; }

/* AI 제안 문구 박스 */
.rg-suggestion-box {
    background: rgba(68, 138, 255, .08);
    border: 1px solid rgba(68, 138, 255, .3);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 4px;
    position: relative;
}
.rg-suggestion-label {
    font-size: 11px;
    font-weight: 700;
    color: #448aff;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.rg-suggestion-text {
    font-size: 13px;
    color: var(--text-primary, #e0e0e0);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 60px;
}
.rg-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(68, 138, 255, .15);
    border: 1px solid rgba(68, 138, 255, .4);
    color: #448aff;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.rg-copy-btn:hover  { background: rgba(68, 138, 255, .3); }
.rg-copy-btn.rg-copy-done {
    background: rgba(76, 175, 80, .2);
    border-color: rgba(76, 175, 80, .5);
    color: #4caf50;
}

/* ── 이전 / AI 제안 비교 박스 (좌·우 2열) ── */
.rg-compare-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
}
.rg-compare-before,
.rg-compare-after {
    padding: 11px 14px;
    position: relative;
}
.rg-compare-before {
    background: rgba(255,255,255,.03);
    border-right: 1px solid #2a2a3a;
}
.rg-compare-after {
    background: rgba(76, 175, 80, .05);
}
.rg-compare-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 7px;
}
.rg-compare-before .rg-compare-label { color: #888; }
.rg-compare-after  .rg-compare-label { color: #7ec87e; }
.rg-compare-text {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.rg-compare-before .rg-compare-text { color: #999; }
.rg-compare-after  .rg-compare-text {
    color: #e8f5e9;
    padding-bottom: 30px; /* 복사 버튼 공간 확보 */
}
.rg-compare-after .rg-copy-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    top: auto; /* 기존 top 값 초기화 */
}
/* AI 제안 로딩 / 에러 상태 */
.rg-sug-pending {
    color: #555 !important;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rg-sug-pending .fa-spinner { color: #448aff; }
.rg-sug-error {
    color: #e57373 !important;
    font-size: 12px;
}
.rg-timeline-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: rgba(255, 160, 0, .1);
    border: 1px solid rgba(255, 160, 0, .35);
    border-radius: 5px;
    padding: 7px 10px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: #ffb74d;
    line-height: 1.5;
}
.rg-timeline-warning .fa-triangle-exclamation {
    flex-shrink: 0;
    margin-top: 2px;
    color: #ffa000;
}
/* 화면이 좁을 때 세로 배치 */
@media (max-width: 600px) {
    .rg-compare-box { grid-template-columns: 1fr; }
    .rg-compare-before { border-right: none; border-bottom: 1px solid #2a2a3a; }
}

.cs-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.cs-header h2 {
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 급성장 모드 토글 */
.cs-mode-toggle {
    display: flex;
    gap: 4px;
}

.cs-mode-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.cs-mode-btn.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}

.cs-mode-btn i { margin-right: 4px; }

.cs-rapid-tier {
    display: inline-flex;
}

.cs-tier-btn {
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    border-right: none;
}
.cs-tier-btn:first-child {
    border-radius: 6px 0 0 6px;
}
.cs-tier-btn:last-child {
    border-radius: 0 6px 6px 0;
    border-right: 1px solid var(--border-color);
}

.cs-tier-btn.active {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border-color: #ff9800;
}
.cs-tier-btn.active + .cs-tier-btn {
    border-left-color: #ff9800;
}

/* 급성장 티어 기준 태그 */
.cs-tier-criteria {
    display: inline-flex;
    gap: 0;
    margin-left: 8px;
}
.cs-tc-item {
    padding: 4px 10px;
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-right: none;
    background: transparent;
    white-space: nowrap;
    transition: var(--transition);
}
.cs-tc-item:first-child { border-radius: 6px 0 0 6px; }
.cs-tc-item:last-child { border-radius: 0 6px 6px 0; border-right: 1px solid var(--border-color); }
.cs-tc-item b {
    color: #ff9800;
    margin-right: 4px;
    font-weight: 700;
}
.cs-tc-item.active {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.3);
    color: var(--text-secondary);
}
.cs-tc-item.active + .cs-tc-item {
    border-left-color: rgba(255, 152, 0, 0.3);
}

/* 급성장 도움말 버튼 */
.cs-rapid-help-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: -2px;
    transition: color 0.2s;
    display: none;
}
.cs-rapid-help-btn:hover { color: #ff9800; }
.cs-mode-btn[data-mode="rapid"].active ~ .cs-rapid-help-btn { display: inline-flex; }

/* 급성장 기준 도움말 모달 */
.cs-rapid-help-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.cs-rapid-help-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: 520px;
    max-width: 94vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.cs-rapid-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255,152,0,0.15), rgba(255,87,34,0.1));
    border-bottom: 1px solid var(--border-color);
    border-radius: 14px 14px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #ff9800;
}
.cs-rapid-help-header i { margin-right: 8px; }
.cs-rapid-help-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.cs-rapid-help-close:hover { color: var(--text-primary); }

.cs-rapid-help-body {
    padding: 20px;
}
.cs-rh-section {
    margin-bottom: 18px;
}
.cs-rh-section:last-child { margin-bottom: 0; }
.cs-rh-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cs-rh-section-title i {
    color: #ff9800;
    margin-right: 6px;
    width: 14px;
    text-align: center;
}
.cs-rh-section p {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}
.cs-rh-section p strong { color: var(--text-primary); }
.cs-rh-section p em {
    font-style: normal;
    color: #ff9800;
    font-weight: 600;
}

/* 기준 테이블 */
.cs-rh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.cs-rh-table th {
    background: rgba(255,152,0,0.08);
    color: #ff9800;
    font-weight: 600;
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.cs-rh-table td {
    padding: 8px 10px;
    text-align: center;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cs-rh-table tr:last-child td { border-bottom: none; }
.cs-rh-rate {
    color: #66bb6a;
    font-weight: 700;
}
.cs-rh-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.cs-rh-tier-badge.t20k  { background: rgba(76,175,80,0.15); color: #4caf50; }
.cs-rh-tier-badge.t50k  { background: rgba(33,150,243,0.15); color: #2196f3; }
.cs-rh-tier-badge.t100k { background: rgba(156,39,176,0.15); color: #ce93d8; }
.cs-rh-tier-badge.t200k { background: rgba(255,152,0,0.15);  color: #ff9800; }

/* 참고 사항 리스트 */
.cs-rh-notes {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
}
.cs-rh-notes li::marker { color: #ff9800; }

/* 성장률 컬럼 색상 */
.cs-rate { color: var(--text-muted); font-size: 12px; }
.cs-rate-hot { color: #4caf50; font-weight: 700; }
.cs-rate-warm { color: #8bc34a; }
.cs-rate-neg { color: #ef5350; }

.cs-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px;
    position: relative;
    flex-shrink: 0;
}

.cs-panel-label {
    position: absolute;
    top: -9px;
    left: 14px;
    background: var(--bg-card);
    padding: 0 8px;
    font-size: 11px;
    color: var(--accent-blue);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cs-panel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-field label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.cs-field-check {
    margin-left: 4px;
}

.cs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.cs-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-blue);
    width: 15px;
    height: 15px;
}

.cs-input {
    padding: 5px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    width: 160px;
}

.cs-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.cs-select {
    padding: 5px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    min-width: 90px;
}

.cs-select:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.cs-btn-group {
    display: flex;
    gap: 6px;
}

.cs-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cs-info-bar strong {
    color: var(--accent-green);
}

.cs-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cs-page-info {
    font-size: 12px;
    white-space: nowrap;
}

.cs-grade-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cs-grade-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
    color: #fff;
    line-height: 1.4;
}

.cs-grade-chip em {
    font-style: normal;
    font-weight: 700;
    margin-right: 2px;
}

.cs-grade-chip[data-grade="A1"] {
    background: #e53935;
}

.cs-grade-chip[data-grade="A2"] {
    background: #e53935;
}

.cs-grade-chip[data-grade="A3"] {
    background: #e53935;
}

.cs-grade-chip[data-grade="B1"] {
    background: #1e88e5;
}

.cs-grade-chip[data-grade="B2"] {
    background: #1e88e5;
}

.cs-grade-chip[data-grade="B3"] {
    background: #1e88e5;
}

.cs-grade-chip[data-grade="B4"] {
    background: #1e88e5;
}

.cs-grade-chip[data-grade="B5"] {
    background: #1e88e5;
}

.cs-grade-chip[data-grade="C1"] {
    background: #43a047;
}

.cs-grade-chip[data-grade="C2"] {
    background: #43a047;
}

.cs-grade-chip[data-grade="C3"] {
    background: #43a047;
}

.cs-table-wrap {
    overflow: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    flex: 1;
    min-height: 0;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 1800px;
}

.cs-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.cs-th {
    background: #2a3a5c;
    color: #a8c4e6;
    padding: 10px 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    border-bottom: 2px solid #3a5a8c;
    user-select: none;
}

.cs-th-sortable {
    cursor: pointer;
    transition: background 0.15s;
}

.cs-th-sortable:hover {
    background: #3a4a6c;
}

.cs-th-sortable.sort-asc::after {
    content: ' ▲';
    font-size: 10px;
}

.cs-th-sortable.sort-desc::after {
    content: ' ▼';
    font-size: 10px;
}

.cs-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.cs-table tbody tr:hover {
    background: rgba(124, 92, 252, 0.06);
}

.cs-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.cs-table tbody tr:nth-child(even):hover {
    background: rgba(124, 92, 252, 0.06);
}

.cs-table td {
    padding: 8px;
    vertical-align: middle;
}

.cs-growth {
    color: #4caf50;
}

.cs-growth.cs-est {
    color: #81c784;
    font-style: italic;
}

.cs-thumb img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.cs-thumb i {
    font-size: 20px;
    color: var(--text-muted);
}

.cs-channel-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-channel-name a {
    color: var(--accent-blue);
    text-decoration: none;
}

.cs-channel-name a:hover {
    text-decoration: underline;
}

.cs-empty,
.cs-loading {
    text-align: center;
    padding: 60px 20px !important;
    color: var(--text-muted);
    font-size: 14px;
}

.cs-loading i {
    margin-right: 6px;
}

.grade-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.grade-badge[data-grade^="A"] {
    background: rgba(0, 200, 83, 0.25);
    color: #69f0ae;
}

.grade-badge[data-grade^="B"] {
    background: rgba(68, 138, 255, 0.25);
    color: #82b1ff;
}

.grade-badge[data-grade^="C"] {
    background: rgba(255, 152, 0, 0.25);
    color: #ffcc80;
}

.cs-deleted-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255, 82, 82, 0.25);
    color: #ff5252;
    vertical-align: middle;
    margin-left: 2px;
}

.cs-row-deleted {
    opacity: 0.45;
    background: rgba(255, 82, 82, 0.04) !important;
}
.cs-row-deleted td {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 82, 82, 0.4);
}
.cs-row-deleted td:first-child,
.cs-row-deleted td:nth-child(2) {
    text-decoration: none;
}

.cs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg-card);
    flex-shrink: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.cs-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cs-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cs-page-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cs-page-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.cs-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cs-page-dots {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 4px;
}

/* ===== 영상 호버 툴팁 ===== */
.cs-row-active {
    background: rgba(124, 92, 252, 0.1) !important;
}

.cs-table tbody tr.cs-selected {
    background: rgba(68, 138, 255, 0.35) !important;
    border-left: 3px solid #448aff;
}

.cs-table tbody tr.cs-selected td {
    color: #fff;
}

/* 노트북LM 영상목록 모달 */
.nb-channel-section {
    margin-bottom: 20px;
}

.nb-channel-header {
    padding: 8px 12px;
    background: rgba(124, 92, 252, 0.1);
    border-radius: 6px 6px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.nb-check-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.nb-video-count {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

.nb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid var(--border-color);
}

.nb-table thead {
    background: var(--bg-secondary);
}

.nb-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.nb-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nb-table tbody tr:hover {
    background: rgba(124, 92, 252, 0.06);
}

.nb-table a {
    color: var(--text-primary);
    text-decoration: none;
}

.nb-table a:hover {
    color: #448aff;
}

.nb-table tbody tr.nb-drag-over {
    background: rgba(68, 138, 255, 0.15);
}

#notebook-modal-body {
    user-select: none;
    -webkit-user-select: none;
}

/* ===== 영상 분석 모달 (Lilys-style) ===== */
.vfa-modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: 95vw;
    max-width: 1200px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease;
}

.vfa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.vfa-header h3 {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vfa-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* 좌측: 플레이어 + 영상 정보 + 북마크 */
.vfa-left {
    width: 420px;
    min-width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
}

.vfa-player {
    background: #000;
    aspect-ratio: 16/9;
    flex-shrink: 0;
}

.vfa-player iframe,
.vfa-player #vfa-yt-player {
    width: 100%;
    height: 100%;
    border: none;
}

.vfa-info {
    padding: 14px 16px;
    font-size: 12px;
    flex-shrink: 0;
}

.vfa-info-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.vfa-info-channel {
    color: var(--accent-blue);
    font-size: 12px;
    margin-bottom: 6px;
}

.vfa-info-channel i {
    margin-right: 4px;
}

.vfa-info-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.vfa-info-stats span i {
    margin-right: 3px;
}

.vfa-info-desc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* 우측: 탭 + 콘텐츠 */
.vfa-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vfa-tabs {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.vfa-tab {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.vfa-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.vfa-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.vfa-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* 요약노트 탭 */
.vfa-core-summary {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: 13px;
    border-left: 3px solid var(--accent-blue);
}

.vfa-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.vfa-keyword {
    background: rgba(68, 138, 255, 0.12);
    color: var(--accent-blue);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.vfa-section {
    margin-bottom: 14px;
}

.vfa-section-head {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vfa-section-head::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    flex-shrink: 0;
}

.vfa-section-body {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-left: 12px;
}

.vfa-insights {
    background: rgba(167, 139, 250, 0.08);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.vfa-insights-title {
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vfa-insight-item {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 2px 0;
    padding-left: 14px;
    position: relative;
}

.vfa-insight-item::before {
    content: '💡';
    position: absolute;
    left: 0;
}

/* 스크립트 탭 */
.vfa-script-wrap {
    font-size: 12.5px;
    line-height: 1.8;
}

.vfa-script-seg {
    padding: 4px 0;
    display: flex;
    gap: 10px;
}

.vfa-script-seg:hover {
    background: rgba(255, 255, 255, 0.03);
}

.vfa-script-time {
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    width: 50px;
    cursor: pointer;
    padding-top: 1px;
}

.vfa-script-time:hover {
    text-decoration: underline;
}

.vfa-script-text {
    color: var(--text-primary);
}

.vfa-script-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.vfa-script-toolbar button {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.vfa-script-toolbar button:hover {
    color: #fff;
    border-color: var(--accent-blue);
}

/* 타임스탬프 탭 */
.vfa-ts-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
    position: relative;
}

.vfa-ts-item:hover {
    background: rgba(68, 138, 255, 0.06);
}

/* 북마크된 아이템 — 골드 테두리 */
.vfa-ts-item.bookmarked {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}

/* 현재 재생 중인 구간 — 블루 글로우 */
.vfa-ts-item.ts-playing {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(68, 138, 255, 0.3);
}

/* 북마크 + 재생 중 — 골드+블루 그라디언트 */
.vfa-ts-item.bookmarked.ts-playing {
    border-image: linear-gradient(135deg, #f59e0b, var(--accent-blue)) 1;
    background: rgba(68, 138, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3);
}

/* 북마크 버튼 */
.vfa-ts-bm-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
    margin-top: 1px;
}

.vfa-ts-bm-btn:hover {
    color: #f59e0b;
    transform: scale(1.2);
}

.vfa-ts-item.bookmarked .vfa-ts-bm-btn {
    color: #f59e0b;
}

/* 좌측 북마크 클릭 시 우측 항목 플래시 하이라이트 */
.vfa-ts-item.bm-flash {
    animation: vfaBmFlash 1.5s ease-out;
}
@keyframes vfaBmFlash {
    0%, 30% { background: rgba(245, 158, 11, 0.25); box-shadow: 0 0 0 2px #f59e0b; }
    100% { background: transparent; box-shadow: none; }
}

.vfa-ts-time {
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    width: 90px;
    padding-top: 2px;
}

.vfa-ts-body {
    flex: 1;
}

.vfa-ts-heading {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.vfa-ts-summary {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── 북마크 패널 (좌측 하단) ── */
.vfa-bookmark-panel {
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.vfa-bookmark-header {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vfa-bookmark-list {
    overflow-y: auto;
    flex: 1;
    padding: 0 8px 8px;
}

.vfa-bm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    line-height: 1.5;
}

.vfa-bm-empty i {
    font-size: 20px;
    opacity: 0.4;
}

.vfa-bm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, border-color 0.2s;
    border: 1px solid rgba(245, 158, 11, 0.2);
    margin-bottom: 4px;
    background: rgba(245, 158, 11, 0.04);
}

.vfa-bm-item:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* 현재 재생 중인 북마크 */
.vfa-bm-item.bm-playing {
    border-color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.12);
    box-shadow: 0 0 6px rgba(68, 138, 255, 0.2);
}

.vfa-bm-time {
    color: var(--accent-blue);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 11px;
    min-width: 36px;
}

.vfa-bm-heading {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.vfa-bm-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.vfa-bm-item:hover .vfa-bm-remove {
    opacity: 1;
}

.vfa-bm-remove:hover {
    color: var(--accent-red);
}

/* AI Q&A 탭 */
.vfa-qna-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    min-height: 100px;
}

.vfa-qna-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.6;
}

.vfa-qna-msg.user {
    align-self: flex-end;
    background: var(--accent-blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.vfa-qna-msg.ai {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}

.vfa-qna-input-row {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    padding-top: 8px;
}

.vfa-qna-input-row input {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
}

.vfa-qna-input-row input:focus {
    border-color: var(--accent-blue);
}

.vfa-qna-input-row button {
    padding: 10px 18px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.vfa-qna-input-row button:hover {
    opacity: 0.85;
}

.vfa-qna-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.vfa-qna-suggest button {
    font-size: 11px;
    padding: 5px 12px;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.25);
    color: #a78bfa;
    border-radius: 16px;
    cursor: pointer;
}

.vfa-qna-suggest button:hover {
    background: rgba(167, 139, 250, 0.2);
}

/* 로딩/빈 상태 */
/* 확인 화면 */
.vfa-confirm {
    text-align: center;
    padding: 60px 20px;
}

.vfa-confirm i {
    font-size: 36px;
    color: var(--accent-blue);
    margin-bottom: 16px;
    display: block;
}

.vfa-confirm p {
    font-size: 14px;
    margin: 0 0 4px;
}

.vfa-confirm-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.vfa-confirm-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.vfa-confirm-ok {
    padding: 10px 28px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(68, 138, 255, 0.35);
}

.vfa-confirm-ok:hover {
    background: #5a9cff;
    box-shadow: 0 4px 12px rgba(68, 138, 255, 0.45);
    transform: translateY(-1px);
}

.vfa-confirm-cancel {
    padding: 10px 28px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.vfa-confirm-cancel:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.vfa-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
}

.vfa-loading i {
    margin-right: 6px;
}

/* 진행률 표시 */
.vfa-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 30px;
    gap: 12px;
}

.vfa-progress-icon {
    font-size: 28px;
    color: var(--accent-blue);
    margin-bottom: 4px;
}

.vfa-progress-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.vfa-progress-bar-bg {
    width: 100%;
    max-width: 320px;
    height: 6px;
    background: var(--bg-tertiary, rgba(255,255,255,0.06));
    border-radius: 3px;
    overflow: hidden;
}

.vfa-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-blue), #60a5fa);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.vfa-progress-stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    font-size: 13px;
    font-weight: 600;
}

.vfa-progress-stats span:first-child {
    color: var(--accent-blue);
}

.vfa-progress-stats span:last-child {
    color: var(--text-secondary);
}

.vfa-progress-tip {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.vfa-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
}

.vfa-empty i {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.3;
}

/* 영상 즐겨찾기 썸네일 호버 효과 */
.vf-thumb-link {
    cursor: grab;
    position: relative;
    display: block;
    flex-shrink: 0;
}
.vf-thumb-link:active { cursor: grabbing; }

.vf-thumb-link::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.vf-thumb-link:hover::after {
    opacity: 1;
}

/* 플로팅 팝업 컨테이너 */
.cs-video-popup {
    position: absolute;
    z-index: 9999;
    display: none;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.cs-video-popup.cs-popup-visible {
    display: block;
}

.cs-video-popup {
    min-width: 320px;
    max-width: 380px;
}

.cs-video-tooltip {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-vt-desc {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    padding: 6px 8px;
    background: rgba(124, 92, 252, 0.06);
    border-left: 2px solid rgba(124, 92, 252, 0.3);
    border-radius: 0 4px 4px 0;
    max-height: 54px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.cs-enriched {
    animation: cs-enriched-flash 2s ease-out;
}
@keyframes cs-enriched-flash {
    0% { background-color: rgba(52, 211, 153, 0.3); }
    100% { background-color: transparent; }
}

.cs-vt-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 6px 0;
    gap: 6px;
    align-items: center;
}

.cs-vt-card {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 6px;
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
    min-width: 0;
}

.cs-vt-card:hover {
    background: rgba(124, 92, 252, 0.12);
}

.cs-vt-thumb {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 68px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.cs-vt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-vt-short {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #f44336;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}

.cs-vt-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.cs-vt-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cs-vt-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.cs-vt-meta i {
    margin-right: 2px;
    font-size: 10px;
}

/* ===== 유틸리티 ===== */
.hidden {
    display: none !important;
}

/* ===== 실시간 검색어 모달 ===== */
.trends-loading,
.trends-empty {
    text-align: center;
    padding: 32px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.trends-loading i,
.trends-empty i {
    margin-right: 6px;
}

.trends-cache-info {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.trends-cache-info i {
    margin-right: 4px;
}

.trends-columns {
    display: flex;
    gap: 12px;
}

.trends-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.trends-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.trends-item:hover {
    background: var(--bg-hover);
}

.trends-item:hover .trends-arrow {
    opacity: 1;
}

.trends-rank {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.trends-item:nth-child(-n+3) .trends-rank {
    background: var(--accent-red);
    color: #fff;
}

.trends-keyword {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trends-traffic {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.trends-source {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.trends-rank-zum {
    background: var(--accent-blue);
    color: #fff;
}

.trends-rank-yt {
    background: #ff0000;
    color: #fff;
}

.trends-arrow {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

/* ===== 채널생성 도우미 위자드 ===== */
#cc-wizard {
    max-width: 100%;
}

.cc-wizard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.cc-wizard-header h3 {
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.cc-steps-indicator {
    display: flex;
    gap: 6px;
}

.cc-step-dot {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all 0.2s;
}

.cc-step-dot.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.cc-step-dot.done {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
}

/* Step 공통 */
.cc-section {
    margin-bottom: 16px;
}

.cc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.cc-required {
    color: var(--accent-red);
}

.cc-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 14px;
}

.cc-input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.cc-select {
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 200px;
}

.cc-select:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* 퀵버튼 */
.cc-quick-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cc-quick-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.cc-quick-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(68, 138, 255, 0.08);
}

.cc-btn-main {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    margin-top: 8px;
}

.cc-step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.cc-step-desc strong {
    color: var(--accent-blue);
}

.cc-step-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* Step 2: 채널명 리스트 */
.cc-names-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    padding: 2px;
}

.cc-name-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.cc-name-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-hover);
}

.cc-name-card.cc-recommended {
    border-color: rgba(255, 215, 64, 0.4);
    background: rgba(255, 215, 64, 0.04);
}

.cc-name-card.cc-recommended:hover {
    border-color: rgba(255, 215, 64, 0.6);
    background: rgba(255, 215, 64, 0.08);
}

.cc-name-card.selected {
    border-color: var(--accent-green);
    background: rgba(0, 200, 83, 0.08);
    box-shadow: 0 0 0 1px var(--accent-green);
}

.cc-rec-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 215, 64, 0.18);
    color: #ffd740;
    white-space: nowrap;
}

.cc-rec-badge i {
    font-size: 10px;
}

.cc-eng-name {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
    font-family: 'Consolas', monospace;
}

.cc-name-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 180px;
}

.cc-name-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.cc-seo-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.cc-score-high {
    background: rgba(0, 200, 83, 0.2);
    color: #69f0ae;
}

.cc-score-mid {
    background: rgba(255, 215, 64, 0.2);
    color: #ffd740;
}

.cc-score-low {
    background: rgba(255, 82, 82, 0.2);
    color: #ff8a80;
}

/* 유튜브 핸들 사용가능 여부 뱃지 */
.cc-avail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.cc-avail-checking {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

.cc-avail-checking .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.cc-avail-ok {
    background: rgba(0, 200, 83, 0.18);
    color: #69f0ae;
}

.cc-avail-taken {
    background: rgba(255, 82, 82, 0.18);
    color: #ff8a80;
}

.cc-avail-unknown {
    background: rgba(158, 158, 158, 0.15);
    color: #9e9e9e;
}

.cc-name-detail {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.cc-detail-row {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.cc-detail-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
}

.cc-slogan {
    font-style: italic;
    color: var(--accent-purple);
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

/* Step 3: 로고 */
.cc-logo-section {
    text-align: center;
}

.cc-logo-preview-wrap {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-logo-loading,
.cc-logo-placeholder,
.cc-logo-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}

.cc-logo-loading i,
.cc-logo-placeholder i {
    font-size: 28px;
}

.cc-logo-error {
    color: var(--accent-red);
}

.cc-logo-error i {
    font-size: 24px;
}

/* Step 4: 완료 카드 */
.cc-final-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.cc-final-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-final-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-final-logo i {
    font-size: 28px;
    color: var(--text-muted);
}

.cc-final-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cc-final-slogan {
    font-size: 13px;
    font-style: italic;
    color: var(--accent-purple);
    margin-bottom: 4px;
}

.cc-final-niche {
    font-size: 12px;
    color: var(--text-muted);
}

.cc-final-niche i {
    margin-right: 4px;
}

/* 이력 */
.cc-history-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.cc-history-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 20px;
}

.cc-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
}

.cc-history-item:hover {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.cc-history-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-history-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-history-logo i {
    font-size: 16px;
    color: var(--text-muted);
}

.cc-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-history-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-history-niche {
    font-size: 11px;
    color: var(--text-muted);
}

.cc-history-date {
    font-size: 11px;
    color: var(--text-muted);
}

.cc-history-delete {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.cc-history-delete:hover {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
}

/* ===== 반응형 (최소 1280px) ===== */
@media (max-width: 1280px) {
    .script-columns {
        flex-direction: column;
    }

    .voice-layout {
        flex-direction: column;
    }

    .subtitle-layout {
        flex-direction: column;
    }

    .split-toolbar-actions {
        flex-direction: column;
    }


    .video-layout {
        flex-direction: column;
    }

    .video-right {
        min-width: auto;
    }

    .cc-name-card {
        flex-wrap: wrap;
    }

    .cc-name-detail {
        flex-wrap: wrap;
    }
}

/* ===== TTS 프로그레스 ===== */
.tts-progress {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-card, #2a2a3e);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tts-progress.hidden {
    display: none;
}

.tts-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.tts-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue, #448aff), #82b1ff);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.tts-progress-msg {
    font-size: 12px;
    color: var(--text-secondary, #9e9e9e);
}

/* ===== SSML 힌트 ===== */
.voice-ssml-hint {
    padding: 10px 14px;
    background: rgba(68, 138, 255, 0.08);
    border-radius: 6px;
    border-left: 3px solid var(--accent-blue, #448aff);
    margin-bottom: 12px;
}

.voice-ssml-hint p {
    font-size: 12px;
    color: var(--text-secondary, #9e9e9e);
    line-height: 1.6;
    margin: 0;
}

/* ===== TTS 엔진 선택 ===== */
.tts-engine-options {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tts-engine-option {
    flex: 1;
    cursor: pointer;
}

.tts-engine-option input[type="radio"] {
    display: none;
}

.tts-engine-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #2a2a4a);
    background: var(--bg-tertiary, #1e1e3a);
    transition: all 0.2s;
    text-align: center;
}

.tts-engine-card i {
    font-size: 18px;
    color: var(--text-muted, #666);
}

.tts-engine-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
}

.tts-engine-desc {
    font-size: 10px;
    color: var(--text-muted, #666);
}

.tts-engine-option.active .tts-engine-card,
.tts-engine-option input:checked + .tts-engine-card {
    border-color: var(--accent-purple, #7c4dff);
    background: rgba(124, 77, 255, 0.12);
}

.tts-engine-option.active .tts-engine-card i,
.tts-engine-option input:checked + .tts-engine-card i {
    color: var(--accent-purple, #7c4dff);
}

.tts-engine-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== 장면 카드 타임스탬프 뱃지 ===== */
.scene-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(68, 138, 255, 0.15);
    color: #82b1ff;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
}

.scene-time-badge i {
    font-size: 10px;
}

/* ===== 장면 효과 드롭다운 ===== */
.scene-effect-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.scene-effect-row label {
    font-size: 12px;
    color: var(--text-secondary, #9e9e9e);
    white-space: nowrap;
}

.scene-effect-row select {
    flex: 1;
    padding: 4px 8px;
    background: var(--bg-secondary, #16213e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary, #e0e0e0);
    font-size: 12px;
}

.scene-effect-row .btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* ===== 영상 탭 - 실제 비디오 + 다운로드 ===== */
.video-canvas video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.video-download-area {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-card, #2a2a3e);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.video-download-area.hidden {
    display: none;
}

.video-assembly-progress {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-card, #2a2a3e);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.video-assembly-progress.hidden {
    display: none;
}

.assembly-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.assembly-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #00c853, #69f0ae);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}

.assembly-progress-msg {
    font-size: 12px;
    color: var(--text-secondary, #9e9e9e);
}

/* ===== 2.자막 탭 ===== */
.subtitle-layout {
    display: flex;
    gap: 20px;
}

.subtitle-left {
    flex: 1;
}

.subtitle-right {
    flex: 1;
}

.subtitle-engine-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.engine-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.engine-card:hover { border-color: var(--accent-purple); }
.engine-card.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.engine-card.selected { border-color: var(--accent-purple); background: rgba(124,77,255,0.08); }
.engine-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent-purple);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}
.engine-card h4 { font-size: 15px; margin-bottom: 8px; color: var(--text-primary); }
.engine-card p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.subtitle-result {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid var(--border-color);
}
.subtitle-token-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 500px;
    overflow-y: auto;
}

.subtitle-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.subtitle-row:hover {
    background: rgba(124, 77, 255, 0.1);
}

.subtitle-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.subtitle-row:nth-child(even):hover {
    background: rgba(124, 77, 255, 0.1);
}

.subtitle-time-input {
    width: 52px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-size: 11px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.subtitle-time-input:hover {
    border-color: var(--border-color);
    background: rgba(124, 77, 255, 0.06);
}

.subtitle-time-input:focus {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.12);
    color: #fff;
}

.subtitle-time-sep {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.subtitle-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* 레거시 호환 */
.subtitle-token {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(124,77,255,0.12);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}
.subtitle-token:hover { background: rgba(124,77,255,0.25); }
.subtitle-token.active { background: var(--accent-purple); color: #fff; }

/* ===== 3.분할 탭 ===== */
.split-toolbar {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    border: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.split-toolbar-actions {
    display: flex;
    gap: 24px;
}
.split-action-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.split-action-group .btn {
    align-self: flex-start;
}
.split-action-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.split-current-settings {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.split-setting-tag {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.split-setting-tag i {
    color: var(--accent-purple);
    font-size: 13px;
}
.split-setting-tag strong {
    color: var(--text-primary);
}
.split-settings-panel .setting-row label {
    min-width: 120px;
    font-size: 13px;
    color: var(--text-secondary);
}
.split-scene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.split-scene-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    transition: var(--transition);
    cursor: pointer;
}
.split-scene-card:hover { border-color: var(--accent-blue); }
.split-scene-card.active { border-color: var(--accent-purple); background: rgba(124,77,255,0.06); }
.split-scene-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.split-scene-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent-purple);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.split-scene-time {
    font-size: 11px;
    color: var(--accent-blue);
    background: rgba(68,138,255,0.1);
    padding: 2px 8px;
    border-radius: 10px;
}
.split-scene-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
}
.split-scene-translation {
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent-blue);
    line-height: 1.5;
}
.split-scene-translation i {
    margin-right: 4px;
    font-size: 10px;
    opacity: 0.7;
}
.split-scene-prompt {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    max-height: 40px;
    overflow: hidden;
}

/* 대본 뷰 */
.split-scene-script {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.split-script-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}
.split-script-row:hover {
    background: rgba(124,77,255,0.04);
}
.split-script-row:last-child {
    border-bottom: none;
}
.split-script-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-purple);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}
.split-script-body {
    flex: 1;
    min-width: 0;
}
.split-script-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.split-script-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--accent-blue);
    min-width: 110px;
}
.split-script-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
}
.split-script-meta {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    opacity: 0.82;
    transition: opacity 0.2s;
}
.split-script-row:hover .split-script-meta {
    opacity: 1;
}
.split-meta-tag {
    font-size: 11px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.split-meta-tag i {
    color: var(--accent-purple);
    font-size: 10px;
}
.split-meta-translation {
    width: 100%;
    font-size: 12px;
    color: var(--accent-blue);
    line-height: 1.6;
}
.split-meta-translation i {
    color: var(--accent-blue);
    margin-right: 4px;
    font-size: 10px;
    opacity: 0.7;
}
.split-meta-prompt {
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.split-meta-prompt i {
    color: var(--accent-blue);
    margin-right: 4px;
    font-size: 10px;
}

/* ===== 공통 탭 툴바 ===== */
.tab-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
}
.tab-toolbar .btn { font-size: 12px; padding: 6px 12px; }
.tab-toolbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.tab-toolbar-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 4px;
}
.tab-view-toggles {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.tab-view-toggles .btn-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
    white-space: nowrap;
}
.tab-view-toggles .btn-toggle:hover {
    border-color: var(--accent-purple);
    color: var(--text-primary);
}
.tab-view-toggles .btn-toggle.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}
.tab-view-toggles .btn-toggle i { font-size: 11px; }

/* ===== 4.이미지 탭 ===== */
/* image-toolbar → tab-toolbar로 통합됨, 하위 호환용 유지 */
.image-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
}
.image-toolbar .btn { font-size: 12px; padding: 6px 12px; }
.image-view-toggles {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.image-view-toggles .btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.image-view-toggles .btn-icon.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}
/* 이미지 생성 진행률 */
.image-gen-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(124,77,255,0.08);
    border: 1px solid rgba(124,77,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent-purple);
    transition: all 0.3s;
}
.image-gen-status.done {
    background: rgba(0,200,83,0.08);
    border-color: rgba(0,200,83,0.25);
    color: var(--accent-green);
}
.image-gen-spinner {
    font-size: 13px;
    flex-shrink: 0;
}
.image-gen-status.done .image-gen-spinner {
    color: var(--accent-green);
    animation: none;
}
.image-gen-text {
    font-weight: 600;
    white-space: nowrap;
}
.image-gen-progress {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.image-gen-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
    border-radius: 3px;
    transition: width 0.4s ease;
}
.image-gen-progress-bar.done {
    background: linear-gradient(90deg, var(--accent-green), #69f0ae);
}
.image-gen-progress-bar.stopped {
    background: linear-gradient(90deg, var(--accent-red, #ef4444), #f87171);
    animation: none;
}
.image-gen-count {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
    white-space: nowrap;
}
.btn-gen-stop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-red, #ef4444);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-gen-stop:hover { background: #dc2626; }
.image-gen-status.done .btn-gen-stop,
.image-gen-status.stopped .btn-gen-stop { display: none; }

/* 이미지 생성 모델 선택 카드 */
.img-model-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 8px;
}
.img-model-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.img-model-title i {
    color: var(--accent-purple);
    margin-right: 4px;
}
.img-model-selector {
    display: flex;
    gap: 6px;
    align-items: center;
}
.img-model-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.img-model-label input[type="radio"] { display: none; }
.img-model-label i { font-size: 10px; }
.img-model-label:hover { border-color: var(--accent-purple); color: var(--text-secondary); }
.img-model-label.active {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.12);
    color: var(--text-primary);
}
.img-model-label.active i { color: var(--accent-purple); }
.img-model-price {
    font-size: 10px;
    opacity: 0.8;
    font-weight: 400;
}
.img-model-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    flex-shrink: 0;
}

.image-scene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.image-scene-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}
.image-scene-card:hover { border-color: var(--accent-blue); }
.image-scene-card.selected { border-color: var(--accent-purple); }
.image-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0,0,0,0.2);
}
.image-card-header .scene-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.image-card-actions {
    display: flex;
    gap: 4px;
}
.image-card-actions .btn-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255,255,255,0.1);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: var(--transition);
}
.image-card-actions .btn-icon:hover { background: rgba(255,255,255,0.2); color: #fff; }
.image-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.image-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-card-thumb .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.2s;
}
.image-card-thumb:hover .play-overlay { opacity: 1; }
.image-card-thumb .play-overlay i { font-size: 32px; color: #fff; }
.image-card-placeholder {
    color: var(--text-muted);
    font-size: 32px;
}
/* 실패 카드 시각 표시 */
.image-scene-card.image-failed .image-card-thumb {
    border: 2px dashed var(--accent-orange, #ff9800);
    background: rgba(255, 152, 0, 0.08);
}
.image-card-fail-icon {
    color: var(--accent-orange, #ff9800);
    font-size: 28px;
    margin-bottom: 4px;
}
.image-card-fail-text {
    color: var(--accent-orange, #ff9800);
    font-size: 11px;
    font-weight: 500;
}
.image-card-footer {
    padding: 8px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.image-card-time {
    font-size: 10px;
    color: var(--accent-blue);
    margin-bottom: 4px;
}
.image-card-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}
.image-card-translation {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
    font-size: 11px;
    color: var(--accent-blue);
    line-height: 1.5;
    word-break: break-word;
}
.image-card-translation i {
    margin-right: 3px;
    font-size: 10px;
    opacity: 0.7;
}
.image-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.image-meta-tag {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.image-meta-tag i {
    color: var(--accent-purple);
    font-size: 9px;
}
.image-card-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 10px 8px;
}
.image-card-bottom .btn-icon { font-size: 11px; color: var(--text-muted); cursor: pointer; background: none; border: none; }
.image-card-bottom .btn-icon:hover { color: var(--text-primary); }

/* ===== 5.이미지 탭 — 대본 뷰 ===== */
.image-script-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.img-script-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}
.img-script-row:hover { background: rgba(124,77,255,0.04); }
.img-script-row:last-child { border-bottom: none; }
.img-script-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-purple); color: #fff;
    border-radius: 50%; font-size: 11px; font-weight: 700; margin-top: 2px;
}
.img-script-body { flex: 1; min-width: 0; }
.img-script-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
}
.img-script-time {
    flex-shrink: 0; font-size: 11px; color: var(--accent-blue); min-width: 110px;
}
.img-script-badge {
    font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.img-script-badge.img-done { background: rgba(76,175,80,0.15); color: #4caf50; }
.img-script-badge.img-none { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.img-script-text {
    font-size: 13px; color: var(--text-primary); line-height: 1.6;
}
.img-script-translation {
    margin-top: 4px; font-size: 12px; color: var(--accent-blue); line-height: 1.6;
}
.img-script-translation i { margin-right: 4px; font-size: 10px; opacity: 0.7; }
.img-script-meta {
    margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; opacity: 0.82;
}

/* ===== 5.이미지 탭 — 프롬프트 뷰 ===== */
.image-prompt-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.img-prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}
.img-prompt-row:hover { background: rgba(124,77,255,0.04); }
.img-prompt-row:last-child { border-bottom: none; }
.img-prompt-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-purple); color: #fff;
    border-radius: 50%; font-size: 11px; font-weight: 700; margin-top: 2px;
}
.img-prompt-body { flex: 1; min-width: 0; }
.img-prompt-top {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.img-prompt-time {
    flex-shrink: 0; font-size: 11px; color: var(--accent-blue); min-width: 110px;
}
.img-prompt-narration {
    font-size: 12px; color: var(--text-muted); overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
}
.img-prompt-textarea {
    width: 100%; min-height: 60px;
    background: rgba(0,0,0,0.3); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 6px;
    padding: 8px 10px; font-size: 12px; line-height: 1.5;
    font-family: 'Consolas', 'Monaco', monospace;
    resize: vertical; transition: border-color 0.2s;
}
.img-prompt-textarea:focus {
    outline: none; border-color: var(--accent-blue);
}
.img-prompt-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
.img-prompt-meta {
    margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; opacity: 0.82;
}
.img-prompt-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    margin-bottom: 4px; display: flex; align-items: center; gap: 5px;
}
.img-prompt-label i { font-size: 10px; color: var(--accent-blue); }
.img-prompt-label-full { margin-top: 10px; }
.img-prompt-label-full i { color: var(--accent-purple); }
.img-prompt-style-badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px;
    background: rgba(124,77,255,0.15); color: var(--accent-purple);
    display: inline-flex; align-items: center; gap: 4px;
}
.img-prompt-style-badge i { font-size: 9px; }
.img-prompt-full-box {
    width: 100%; min-height: 50px;
    background: rgba(124,77,255,0.06);
    border: 1px solid rgba(124,77,255,0.2); border-radius: 6px;
    padding: 8px 10px; font-size: 12px; line-height: 1.6;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--text-secondary); white-space: pre-wrap; word-break: break-word;
    user-select: text; cursor: default;
}
.img-prompt-empty { color: var(--text-muted); font-style: italic; font-family: inherit; }

/* ===== 6.비디오 탭 ===== */
.vidclip-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.vidclip-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 16px;
}
.vidclip-panel h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vidclip-system-instruction {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
    white-space: pre-wrap;
}
.vidclip-response-area {
    width: 100%;
    min-height: 200px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    color: var(--text-primary);
    font-size: 12px;
    resize: vertical;
}
.vidclip-preview-list {
    margin-top: 16px;
}
.vidclip-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}
.clip-thumb-wrap {
    width: 80px;
    height: 45px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    background: #000;
}
.clip-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clip-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 18px;
}
.clip-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.clip-play-btn i {
    color: #fff;
    font-size: 18px;
}
.clip-thumb-wrap:hover .clip-play-btn {
    opacity: 1;
}
.clip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vidclip-preview-item .scene-badge {
    background: var(--accent-blue);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    align-self: flex-start;
}
.vidclip-preview-item .prompt-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vidclip-preview-item .duration-badge {
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.vidclip-preview-item.clip-done {
    border-color: var(--accent-green);
}
.clip-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.clip-status-badge.done {
    background: rgba(76, 175, 80, 0.15);
    color: var(--accent-green);
}
.clip-status-badge.pending {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}
.vidclip-fill-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}
.vidclip-fill-options label:hover { border-color: var(--accent-purple); }
.vidclip-fill-options input:checked + span { color: var(--accent-purple); }

/* --- 이미지 업로드 & 씬 매칭 --- */
.img-upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 16px;
}
.img-upload-zone:hover,
.img-upload-zone.drag-over {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.06);
}
.img-upload-zone i {
    font-size: 36px;
    color: var(--accent-purple);
    margin-bottom: 8px;
    display: block;
}
.img-upload-zone p {
    color: var(--text-primary);
    font-size: 14px;
    margin: 0 0 4px;
}
.img-upload-zone span {
    color: var(--text-muted);
    font-size: 12px;
}

/* --- 영상 업로드 & 씬 매칭 --- */
.vidclip-upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 16px;
}
.vidclip-upload-zone:hover,
.vidclip-upload-zone.drag-over {
    border-color: var(--accent-purple);
    background: rgba(124, 77, 255, 0.06);
}
.vidclip-upload-zone i {
    font-size: 36px;
    color: var(--accent-purple);
    margin-bottom: 8px;
    display: block;
}
.vidclip-upload-zone p {
    color: var(--text-primary);
    font-size: 14px;
    margin: 0 0 4px;
}
.vidclip-upload-zone span {
    color: var(--text-muted);
    font-size: 12px;
}

.vidclip-scene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.vidclip-scene-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}
.vidclip-scene-card.has-video {
    border-color: var(--accent-green, #4caf50);
}
.vidclip-scene-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}
.vidclip-scene-card-header .scene-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-purple);
}
.vidclip-scene-card-header .scene-time {
    font-size: 11px;
    color: var(--text-muted);
}
.vidclip-scene-card-body {
    padding: 10px 12px;
}
.vidclip-scene-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vidclip-video-area {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vidclip-video-area video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.vidclip-video-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
    gap: 6px;
    cursor: pointer;
}
.vidclip-video-empty i {
    font-size: 24px;
    opacity: 0.5;
}
.vidclip-video-empty:hover {
    color: var(--accent-purple);
}
.vidclip-video-empty:hover i {
    opacity: 1;
}
.vidclip-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 10px;
}
.vidclip-card-footer .vid-info {
    font-size: 11px;
    color: var(--text-muted);
}
.vidclip-card-footer .vid-info strong {
    color: var(--text-primary);
}
.vidclip-card-actions {
    display: flex;
    gap: 6px;
}
.vidclip-card-actions button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition);
}
.vidclip-card-actions button:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
}
.vidclip-card-actions button.btn-remove:hover {
    border-color: var(--accent-red, #f44336);
    color: var(--accent-red, #f44336);
}

/* ===== 7.씬효과 탭 ===== */
.effects-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.effects-tab-bar button {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}
.effects-tab-bar button.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}
.effects-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.effects-bulk-bar label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.effects-bulk-bar .select-sm { font-size: 12px; }
.effects-bulk-bar .btn { font-size: 12px; padding: 5px 12px; }
.effects-concurrent {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}
.effects-concurrent button {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: var(--transition);
}
.effects-concurrent button.active {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple);
}
.effects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.effects-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}
.effects-card:hover { border-color: var(--accent-blue); }
.effects-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
}
.effects-card-header input[type="checkbox"] { accent-color: var(--accent-purple); }
.effects-card-header span { font-size: 12px; color: var(--text-primary); }
.effects-card-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.effects-card-thumb img, .effects-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.effects-card-select {
    padding: 6px 8px;
}
.effects-card-select select {
    width: 100%;
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}
.effects-bottom-bar {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    border-radius: 0 0 var(--radius) var(--radius);
}
.effects-bottom-bar .count { font-size: 13px; color: var(--text-secondary); }

/* ===== 8.영상 탭 ===== */
.assembly-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.assembly-info-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 16px;
}
.assembly-info-panel h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.assembly-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.assembly-stat-card {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}
.assembly-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.assembly-stat-card .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.assembly-preview-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.assembly-video-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.assembly-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.assembly-video-placeholder {
    color: var(--text-muted);
    text-align: center;
}
.assembly-video-placeholder i { font-size: 48px; margin-bottom: 8px; }
.assembly-video-placeholder p { font-size: 13px; }
.assembly-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
}
.assembly-controls .btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}
.assembly-controls .time-display { font-size: 12px; color: var(--text-secondary); }
.assembly-controls .timeline {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.assembly-controls .timeline-fill {
    height: 100%;
    background: var(--accent-purple);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s;
}

/* ===== 9.편집 탭 ===== */
.edit-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
}
.edit-settings-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}
.edit-accordion-item {
    border-bottom: 1px solid var(--border-color);
}
.edit-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: var(--transition);
}
.edit-accordion-header:hover { background: var(--bg-hover); }
.edit-accordion-header i { color: var(--text-muted); transition: transform 0.2s; }
.edit-accordion-item.open .edit-accordion-header i { transform: rotate(180deg); }
.edit-accordion-body {
    padding: 0 16px 16px;
    display: none;
}
.edit-accordion-item.open .edit-accordion-body { display: block; }
.edit-field {
    margin-bottom: 12px;
}
.edit-field label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.edit-field input[type="range"] { width: 100%; }
.edit-field .color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.edit-field .color-row input[type="color"] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: none;
    cursor: pointer;
}
.edit-preview-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.edit-preview-video {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.edit-preview-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.edit-preview-subtitle {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 18px;
    text-align: center;
    max-width: 80%;
}
.edit-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}
.edit-bottom-bar .info { font-size: 12px; color: var(--text-secondary); }
.edit-bottom-bar .actions { display: flex; gap: 8px; }

/* ═══════════════════════════════════════
   성장 지표 패널
   ═══════════════════════════════════════ */
.ch-btn-growth {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}
.ch-btn-growth:hover {
    background: rgba(76, 175, 80, 0.3);
    border-color: #66bb6a;
}
.ch-growth-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin: 8px 0;
    overflow: hidden;
}
.growth-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
.growth-panel-header h4 {
    margin: 0;
    font-size: 13px;
    color: #66bb6a;
}
.growth-panel-header h4 i { margin-right: 6px; }
.growth-panel-body { padding: 12px 16px; }
.growth-contrib-section h5 {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.growth-empty {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    padding: 16px 0;
}
.growth-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.growth-bar-rank {
    width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.growth-bar-item:nth-child(-n+3) .growth-bar-rank { color: #ff6b6b; }
.growth-bar-info {
    flex: 1;
    min-width: 0;
}
.growth-bar-title {
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.growth-bar-track {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.growth-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.growth-bar-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    min-width: 110px;
    justify-content: flex-end;
}
.growth-bar-views {
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 600;
}
.growth-bar-pct {
    font-size: 11px;
    color: var(--accent-purple);
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

/* ===== Midjourney Style Browser ===== */
.mj-browser {
    margin-top: 24px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
/* 검색 */
.mj-search-wrap {
    position: relative;
    width: 220px;
}
.mj-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.mj-search-input {
    width: 100%;
    padding: 6px 30px 6px 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.mj-search-input:focus {
    border-color: var(--accent-blue);
}
.mj-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
}
.mj-search-clear:hover { color: var(--text-primary); }
.mj-tree-item.search-hidden { display: none; }
.mj-tree-item.search-match .mj-tree-name { color: var(--accent-yellow, #f0c040); }

.mj-browser-layout {
    display: flex;
    gap: 16px;
    height: 520px;
}
.mj-tree-panel {
    width: 280px;
    min-width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-y: auto;
    padding: 8px 0;
}
.mj-tree-loading {
    padding: 16px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.mj-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 16px;
}
.mj-tree > ul {
    padding-left: 8px;
}
.mj-tree li {
    user-select: none;
}
.mj-tree-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.6;
}
.mj-tree-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.mj-tree-item.active {
    background: var(--accent-blue);
    color: #fff;
}
.mj-tree-toggle {
    width: 14px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.mj-tree-toggle.open {
    transform: rotate(90deg);
}
.mj-tree-icon {
    font-size: 12px;
    color: var(--accent-yellow, #f0c040);
    flex-shrink: 0;
}
.mj-tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.mj-tree-count {
    font-size: 11px;
    color: var(--accent-blue);
    margin-left: 2px;
    flex-shrink: 0;
    font-weight: 600;
}
.mj-tree-item.has-images .mj-tree-name {
    color: var(--text-primary);
    font-weight: 600;
}
.mj-tree li > ul {
    display: none;
}
.mj-tree li.expanded > ul {
    display: block;
}

/* 이미지 패널 */
.mj-images-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mj-images-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
    flex-shrink: 0;
}
.mj-images-path {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.mj-images-count {
    font-size: 12px;
    color: var(--text-muted);
}
.mj-images-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: start;
}
.mj-images-empty {
    width: 100%;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.mj-images-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.4;
}
.mj-img-card {
    width: 180px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    background: var(--bg-tertiary);
    position: relative;
}
.mj-img-card:hover {
    border-color: var(--accent-blue);
    transform: scale(1.05);
    z-index: 1;
}
.mj-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mj-img-card .mj-img-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #fff;
    font-size: 10px;
    padding: 12px 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s;
}
.mj-img-card:hover .mj-img-name {
    opacity: 1;
}

/* 이미지 확대 모달 */
.mj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.mj-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.mj-lightbox-bottom {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.7);
    padding: 8px 16px;
    border-radius: 24px;
    backdrop-filter: blur(8px);
}
.mj-lightbox-name {
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
}
.mj-lightbox-download {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s;
}
.mj-lightbox-download:hover {
    background: rgba(255,255,255,0.25);
}
.mj-lightbox-register {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 16px;
    background: var(--accent-blue, #4a9eff);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.mj-lightbox-register:hover {
    background: #3a8eef;
}
.mj-lightbox-register:disabled {
    opacity: 0.7;
    cursor: wait;
}