/* ═══════════════════════════════════════════════════════
   YouTube ViewTrap - 스타일시트
   다크 테마 기본 / 글래스모피즘 / 반응형
   ═══════════════════════════════════════════════════════ */

/* ─── CSS 변수 (테마 시스템) ─── */
:root {
    /* 다크 테마 (기본) */
    --bg-primary: #0f0f14;
    --bg-secondary: #161620;
    --bg-card: #1a1a26;
    --bg-card-hover: #20202e;
    --bg-sidebar: #111118;
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-input-focus: rgba(255, 255, 255, 0.1);

    --text-primary: #e8e8f0;
    --text-secondary: #9898b8;
    --text-muted: #6868a0;
    --text-inverse: #0f0f14;

    /* YouTube Red 기반 강조색 */
    --accent: #FF0033;
    --accent-hover: #ff1a4a;
    --accent-glow: rgba(255, 0, 51, 0.25);
    --accent-soft: rgba(255, 0, 51, 0.12);

    /* Instagram 그래디언트 */
    --ig-start: #833AB4;
    --ig-mid: #FD1D1D;
    --ig-end: #F77737;
    --ig-gradient: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737);

    /* 플랫폼 배지 */
    --yt-color: #FF0000;
    --ig-color: #E1306C;

    --success: #00c896;
    --warning: #ffb830;
    --danger: #ff4757;
    --info: #3498db;

    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.18);   /* 입력창·필터칩 전용 — 배경과 뚜렷이 구분되는 테두리 */
    --border-focus: rgba(255, 0, 51, 0.4);
    --border-card: rgba(255, 255, 255, 0.05);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* 사이드바 */
    --sidebar-width: 220px;
    --sidebar-collapsed: 64px;

    --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', '맑은 고딕', sans-serif;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 라이트 테마 (기본) — 휴먼 SaaS 스타일 v2 */
[data-theme="light"] {
    --bg-primary: #f7f8fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;
    --bg-sidebar: #ffffff;
    --bg-input: #f2f4f6;
    --bg-input-focus: #eef1f4;

    --text-primary: #191f28;
    --text-secondary: #4e5968;
    --text-muted: #8b95a1;
    --text-inverse: #ffffff;

    /* 주 강조색: 블루 (YouTube Red는 플랫폼 배지 전용) */
    --accent: #3182f6;
    --accent-hover: #1b64da;
    --accent-glow: rgba(49, 130, 246, 0.18);
    --accent-soft: rgba(49, 130, 246, 0.09);

    /* 라이트 테마 전용 상태색 — 미정의 시 다크값(#ffb830 등)으로 폴백돼 흰 배경 대비가 낮음 */
    --warning: #d97706;   /* amber-600 — 흰 배경 가독성 확보 */
    --danger:  #dc2626;   /* red-600 — 라이트 테마 가독성 */

    --border: #e5e8eb;
    --border-strong: #c1c8d1;   /* 입력창·필터칩 전용 — 흰 배경에서도 또렷이 보이는 테두리 (Phase 53) */
    --border-focus: rgba(49, 130, 246, 0.45);
    --border-card: #eaedf0;
    --shadow: 0 2px 10px rgba(25, 31, 40, 0.05);
    --shadow-hover: 0 6px 24px rgba(25, 31, 40, 0.09);
    --shadow-card: 0 1px 4px rgba(25, 31, 40, 0.04);
}

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

html {
    scroll-behavior: smooth;
    /* 스크롤바 자리를 항상 예약 — 모달 오픈 시 body overflow:hidden으로 스크롤바가 사라져도
       콘텐츠 폭이 변하지 않게 한다. 이게 없으면 auto-fill 그리드가 4→5열로 리플로우됨(사용자 지적). */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
    background-image:
        radial-gradient(ellipse at 10% 80%, rgba(255, 0, 51, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(131, 58, 180, 0.04) 0%, transparent 40%);
}

/* ─── 헤더 ─── */
#app-header {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 12px 20px;
    background: rgba(15, 15, 20, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    height: 56px;
}

[data-theme="light"] #app-header {
    background: rgba(255, 255, 255, 0.85);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    /* [Phase 128] 좁은 폭에서 이 칸이 눌리면 h1 텍스트가 밖으로 흘러 옆 배지와
       겹쳐 보였다(좌표상 겹침은 없어 측정으로는 안 잡히고 눈에만 보였다). */
    min-width: 0;
    overflow: hidden;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
}

.logo-icon .ico {
    width: 16px;
    height: 16px;
}

.logo h1 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 배지 ─── */
.badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-mock {
    background: rgba(253, 203, 110, 0.15);
    color: var(--warning);
    border: 1px solid rgba(253, 203, 110, 0.3);
}

.badge-live {
    background: rgba(225, 112, 85, 0.15);
    color: var(--danger);
    border: 1px solid rgba(225, 112, 85, 0.3);
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── 버튼 ─── */
.btn-icon {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-icon:hover {
    background: var(--bg-input-focus);
    transform: rotate(15deg);
}

.btn-primary {
    width: 100%;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: white;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-input-focus);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── 앱 레이아웃 (사이드바 + 메인) ─── */
.app-layout {
    display: flex;
    min-height: calc(100vh - 56px);
}

/* ─── 사이드바 ─── */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    z-index: 100;
    transition: width 0.25s ease;
}

/* 메뉴만 스크롤되는 영역 — sidebar-guide는 이 밖에 둬서 메뉴가 길어도 항상 100% 보이게 함 */
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

[data-theme="light"] .sidebar {
    background: #1a1a26;
}

/* 라이트 모드에서도 사이드바는 어두운 배경 → 글씨는 흰색 계열로 고정 */
[data-theme="light"] .sidebar-nav-btn,
[data-theme="light"] .sidebar-section-title {
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="light"] .sidebar-nav-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .sidebar-nav-btn.active {
    color: var(--accent);
    background: rgba(255, 0, 51, 0.15);
}
[data-theme="light"] .sidebar-platform-badge {
    color: rgba(255, 255, 255, 0.75) !important;
}

.sidebar-section {
    padding: 16px 12px 8px;
}

.sidebar-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555570;
    padding: 0 8px;
    margin-bottom: 4px;
}

.sidebar-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sidebar-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    white-space: nowrap;
}

.sidebar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.sidebar-nav-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.sidebar-nav-btn.active .nav-icon {
    filter: none;
}

.nav-icon {
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─── 사이드바 실시간 가이드 (Phase 61) ─── */
/* 스크롤 영역(.sidebar-scroll) 밖에 위치 — 메뉴가 길어도 항상 잘리지 않고 100% 보임(Phase 63.1).
   그래도 창이 작아 공간이 부족한 최악의 경우엔 flex-shrink:0 + 자체 스크롤(max-height)로 방어. */
/* Phase 63.1: 하드코딩된 rgba(255,255,255,X) 대신 테마 토큰 사용 —
   사이드바가 라이트 테마(기본)에서 흰 배경(.sidebar-nav-btn과 동일 규칙)이라
   흰색 계열 고정 색상은 사실상 안 보였음(흰 배경 위 흰 글씨). 토큰은 라이트/다크
   양쪽에서 자동으로 대비가 뒤집히므로 어느 테마에서도 항상 보인다. */
.sidebar-guide {
    flex-shrink: 0;
    padding: 14px 12px 16px;
    border-top: 1px solid var(--border);
    max-height: 60vh;
    overflow-y: auto;
}

.sg-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.sg-now {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 10px;
}

.sg-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.sg-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* 다른 탭으로 바로 이동하는 단계(Phase 63.6) — 클릭 가능함을 시각적으로 표시 */
.sg-step-link {
    cursor: pointer;
    margin: -4px -6px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.sg-step-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.sg-step-mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-step-mark .ico {
    width: 9px;
    height: 9px;
}

.sg-step.done {
    color: var(--text-muted);
    text-decoration: line-through;
}

.sg-step.done .sg-step-mark {
    background: var(--success);
    border-color: transparent;
    color: #fff;
}

.sg-step.current {
    color: var(--text-primary);
    font-weight: 600;
}

.sg-step.current .sg-step-mark {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.sg-extra {
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}

.sg-extra-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sg-extra-item {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 3px;
}

@media (max-width: 960px) {
    .sidebar-guide { display: none !important; }
}

.sidebar-platform-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 12px;
    /* button과 a의 기본 너비 차이 통일 — 둘 다 좌우 margin 제외 전체 너비 (Phase 34.14) */
    box-sizing: border-box;
    width: calc(100% - 24px);
    border: none;
    font-family: inherit;
    text-align: left;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: white;
}

.badge-yt {
    background: linear-gradient(135deg, #FF0000, #cc0000);
}

.badge-ig {
    background: var(--ig-gradient);
}

.sidebar-platform-badge:hover {
    transform: translateX(3px);
    opacity: 0.9;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 12px;
}

/* ─── 사이드바 접힘 (JS 토글) ─── */
.sidebar.sidebar-collapsed .sidebar-section-title,
.sidebar.sidebar-collapsed .sidebar-nav-btn span:not(.nav-icon),
.sidebar.sidebar-collapsed .sidebar-platform-badge span:not(:first-child) {
    display: none;
}

/* "뜨는 영상"은 검색과 다른 개념(실시간 급상승) — 그라데이션 깜빡임 빨간색으로 항상 눈에 띄게 (Phase 64.2).
   ID 선택자라 라이트 테마의 .sidebar-nav-btn.active 색상 규칙보다 항상 우선한다. */
#snb-hot {
    position: relative;
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.16), rgba(255, 140, 66, 0.16), rgba(255, 71, 87, 0.16));
    background-size: 200% 100%;
    border: 1px solid rgba(255, 71, 87, 0.35);
    color: var(--danger);
    animation: hot-gradient-shift 3s linear infinite, hot-blink 1.8s ease-in-out infinite;
}
#snb-hot:hover {
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.26), rgba(255, 140, 66, 0.26), rgba(255, 71, 87, 0.26));
    background-size: 200% 100%;
}
@keyframes hot-gradient-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes hot-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

.sidebar.sidebar-collapsed .sidebar-nav-btn {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

.sidebar.sidebar-collapsed .sidebar-platform-badge {
    justify-content: center;
    padding: 10px;
    gap: 0;
    margin: 4px 8px;
    width: calc(100% - 16px);  /* 접힘 상태 좌우 margin(8px) 대응 (Phase 34.14) */
}

/* ─── 메인 콘텐츠 ─── */
#app-main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: calc(100% - var(--sidebar-width));
}

/* ─── 글래스 카드 (단색 카드로 전환) ─── */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─── 검색 폼 ─── */
.search-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 40px;
}

.input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    transition: var(--transition);
    outline: none;
}

input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

input[type="text"]::placeholder {
    color: var(--text-muted);
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ─── 기간 선택 ─── */
.period-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.period-btn, .ca-period-btn, .viral-period-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.period-btn:hover, .ca-period-btn:hover, .viral-period-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.period-btn.active, .ca-period-btn.active, .viral-period-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.period-custom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.period-custom input {
    width: 90px;
    padding: 8px 12px;
    font-size: 13px;
}

.period-custom span {
    font-size: 13px;
    color: var(--text-muted);
}

/* ─── 스피너 ─── */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
    border-color: rgba(108, 92, 231, 0.2);
    border-top-color: var(--accent);
}

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

/* ─── 내 채널 입력 ─── */
.my-channel-group { margin-top: 4px; }

.input-with-btn {
    display: flex;
    gap: 8px;
}
.input-with-btn input {
    flex: 1;
}
.input-with-btn .btn-secondary {
    white-space: nowrap;
    flex-shrink: 0;
}

.label-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* 입력 필드 도움말 (Phase 45.3) */
.field-help {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.field-help strong { color: var(--text-primary); font-weight: 600; }
.field-help-warn {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff8e6;
    color: #8a6100;
    border: 1px solid #ffe6a8;
}
[data-theme="light"] .field-help-warn { background: #fff8e6; color: #8a6100; }

/* 내 채널 비교 결과 도움말 배너 */
.mch-help-banner {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--accent-soft, #eef4ff);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.55;
}
.mch-help-banner strong { color: var(--accent, #3182f6); }
.mch-help-warn { color: #c0392b; font-weight: 600; }

/* ─── 내 채널 패널 ─── */
.mch-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.mch-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.mch-name { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.mch-meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }

.mch-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.mch-stat-card {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    text-align: center;
    border: 1px solid var(--border);
}
.mch-stat-label { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 6px; }
.mch-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.mch-hint { font-size: 0.7rem; color: var(--text-muted); }

.mch-section { margin-bottom: 20px; }
.mch-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.mch-top-video {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 12px;
    border: 1px solid var(--border);
}
.mch-thumb {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.mch-video-title a {
    font-size: 0.9rem;
    color: var(--text-primary);
    text-decoration: none;
}
.mch-video-title a:hover { color: var(--accent); text-decoration: underline; }
.mch-video-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; }

.mch-gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mch-video-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mch-video-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-primary);
    padding: 6px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}
.mch-video-list a {
    color: var(--text-primary);
    text-decoration: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mch-video-list a:hover { color: var(--accent); }
.mch-view-badge {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.mch-gap .mch-gap-dot { color: var(--accent); margin-right: 4px; flex-shrink: 0; }
.mch-empty { color: var(--text-muted); font-style: italic; padding: 8px; }

/* ── 강화 결과 안 본능분석 ── */
.refine-instinct {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}
.refine-instinct-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 10px;
}

/* ── 본능분석 + 반박제거 공통 ── */
.instinct-section { border-left: 3px solid #a78bfa; }
.instinct-desc { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 14px; }
.instinct-core {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.instinct-core-item {
    padding: 12px 14px;
    border-radius: 10px;
}
.instinct-desire { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); }
.instinct-fear   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.25); }
.instinct-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.instinct-text { font-size: 0.88rem; color: var(--text-primary); margin: 0; line-height: 1.5; }
.instinct-sub-title { font-size: 0.9rem; font-weight: 700; margin: 0 0 10px; color: var(--text-secondary); }
.instinct-obj-card {
    display: flex;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.instinct-obj-num {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: #a78bfa;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 2px;
}
.instinct-obj-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.instinct-obj-row { display: flex; align-items: flex-start; gap: 8px; }
.instinct-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(167,139,250,0.18);
    color: #a78bfa;
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
    margin-top: 2px;
}
.instinct-badge-removal {
    background: rgba(251,191,36,0.15);
    color: #f59e0b;
}
.instinct-obj-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.instinct-obj-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--bg-input);
    border-radius: 6px;
    padding: 7px 10px;
    margin-top: 4px;
}

/* ── 탭 네비게이션 ── */
.tab-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.tab-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.tab-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── 채널 분석 패널 ── */
#ca-analyze-btn { margin-top: 20px; }

.channel-panel-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: -4px 0 18px;
    line-height: 1.6;
}
.channel-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* 채널 정보 헤더 */
.ca-channel-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-input);
    border-radius: 12px;
    margin-bottom: 20px;
}
.ca-channel-thumb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.ca-channel-name { font-size: 1rem; font-weight: 700; }
.ca-channel-stats { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }

/* 영상 테이블 */
.ca-videos-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ca-videos-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
}
.ca-videos-table tr:hover td { background: var(--bg-input); }
.ca-rank { width: 32px; text-align: center; color: var(--text-muted); font-weight: 700; padding: 8px 4px; }
.ca-thumb-cell { width: 80px; padding: 6px 8px; }
.ca-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: 5px; display: block; }
.ca-title-cell { padding: 8px 10px; }
.ca-video-link {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.83rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ca-video-link:hover { color: var(--accent); }
.ca-views { white-space: nowrap; padding: 8px 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* 패턴 카드 */
.ca-pattern-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.ca-pattern-name { font-size: 0.95rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.ca-pattern-example { font-size: 0.83rem; color: var(--text-secondary); margin-bottom: 4px; }
.ca-pattern-why { font-size: 0.82rem; color: var(--text-muted); }

/* 각색 아이디어 카드 */
.ca-idea-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.ca-idea-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.ca-idea-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.ca-idea-topic { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.ca-pattern-ref { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; display: block; }
.ca-titles-list { margin-bottom: 10px; }

/* 롱폼/숏폼 2열 그리드 */
.ca-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 4px;
}
.ca-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    vertical-align: middle;
    margin-left: 6px;
}
.ca-type-long { background: rgba(99,102,241,0.18); color: #818cf8; }
.ca-type-short { background: rgba(249,115,22,0.18); color: #fb923c; }
.ca-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.ca-duration {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.ca-upload-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.75;
}
.ca-empty { text-align: center; color: var(--text-muted); font-style: italic; padding: 16px; }

@media (max-width: 900px) {
    .ca-top-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .channel-form-grid { grid-template-columns: 1fr; }
    .mch-compare-grid { grid-template-columns: 1fr; }
    .mch-gap-grid { grid-template-columns: 1fr; }
}

/* ─── 결과 헤더 ─── */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.results-header .section-title {
    margin-bottom: 0;
}

.count-badge {
    background: var(--accent);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.filter-info {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ─── 테이블 ─── */
.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

#results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#results-table thead {
    position: sticky;
    top: 0;
}

#results-table th {
    background: rgba(108, 92, 231, 0.15);
    color: var(--text-secondary);
    padding: 12px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
}

#results-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    transition: var(--transition);
}

#results-table tbody tr {
    transition: var(--transition);
}

#results-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.col-no { width: 50px; text-align: center; }
.col-thumb { width: 100px; }
.col-title { min-width: 200px; }
.col-channel { min-width: 120px; }
.col-views,
.col-likes,
.col-comments { width: 90px; text-align: right; }
.col-date { width: 100px; white-space: nowrap; }
.col-action { width: 80px; text-align: center; }

.video-thumbnail {
    width: 90px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    transition: var(--transition);
}

.video-thumbnail:hover {
    transform: scale(1.1);
}

/* 인기 영상 분석 테이블 썸네일 러닝타임 배지 (Phase 35) */
.vt-thumb-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.vt-duration-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
}

.video-title-cell {
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-title-cell a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.video-title-cell a:hover {
    color: var(--accent);
}

.view-count {
    font-weight: 600;
    color: var(--success);
}

.btn-analyze {
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-analyze:hover {
    background: var(--accent);
    color: white;
}

.btn-analyze:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── 빈 결과 ─── */
.empty-state,
.loading-state,
.warning-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-icon,
.warning-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 15px;
}

.empty-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 8px;
}

.loading-state p {
    color: var(--text-secondary);
    margin-top: 16px;
}

/* ─── 댓글 패널 ─── */
.comments-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.comments-header .section-title {
    margin-bottom: 0;
    flex: 1;
}

.comments-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-title-badge {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 8px;
}

/* 스크롤바 스타일 */
.comments-list::-webkit-scrollbar {
    width: 6px;
}

.comments-list::-webkit-scrollbar-track {
    background: transparent;
}

.comments-list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.comment-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: var(--transition);
    animation: fadeInUp 0.3s ease-out;
}

.comment-item:hover {
    background: var(--bg-input-focus);
    border-color: var(--border-focus);
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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

.comment-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.comment-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.comment-likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--accent);
}

.comment-likes.high {
    color: var(--danger);
}

/* ─── 토스트 알림 ─── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.toast-success { background: linear-gradient(135deg, #00b894, #00cec9); }
.toast-error { background: linear-gradient(135deg, #d63031, #e17055); }
.toast-warning { background: linear-gradient(135deg, #e17055, #fdcb6e); }
.toast-info { background: linear-gradient(135deg, var(--accent), #5a4bd1); }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ─── 푸터 ─── */
#app-footer {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
    margin-top: 40px;
}

/* ─── 반응형 ─── */
@media (max-width: 768px) {
    #app-header {
        padding: 12px 16px;
    }

    .logo h1 {
        font-size: 18px;
    }

    #app-main {
        padding: 16px 12px;
    }

    .glass-card {
        padding: 20px 16px;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .period-selector {
        gap: 6px;
    }

    .period-btn, .viral-period-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .col-thumb,
    .col-likes,
    .col-comments {
        display: none;
    }

    .video-title-badge {
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    .col-channel,
    .col-date {
        display: none;
    }
}

/* ═══ 일괄 수집 바 ═══ */
.bulk-collect-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.bulk-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 4px;
    min-width: 80px;
}

.bulk-guide {
    font-size: 12px;
    color: var(--text-muted);
}
.bulk-guide strong { color: var(--accent); font-weight: 600; }

/* AI 분석 결과 — 사용된 댓글 목록 */
.ai-comments-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
}
.ai-comments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-comment-item {
    padding: 10px 12px;
    background: var(--bg-input, #f7f8fa);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ai-comment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.ai-comment-author { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ai-comment-likes { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.ai-comment-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.ai-comment-source { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.ai-comments-more {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.ai-comments-more:hover { background: var(--accent-soft, #eef4ff); }

.col-check {
    width: 36px;
    text-align: center;
}

.video-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.btn-bulk {
    padding: 5px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.btn-bulk:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}
.btn-bulk:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bulk-progress {
    font-size: 13px;
    color: var(--warning);
    margin-left: 4px;
}

.btn-analyze.collected {
    background: rgba(0, 206, 201, 0.15);
    border-color: var(--success);
    color: var(--success);
    cursor: default;
}
.btn-analyze.collected:hover {
    transform: none;
    background: rgba(0, 206, 201, 0.15);
}

/* ═══ AI 콘텐츠 분석 리포트 ═══ */
.btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(162,155,254,0.1));
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-ai:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(108,92,231,0.3), rgba(162,155,254,0.2));
    transform: translateY(-1px);
}
.btn-ai:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-ai .spinner {
    width: 14px;
    height: 14px;
    border-color: rgba(49, 130, 246, 0.25);
    border-top-color: var(--accent);
}

.ai-section {
    margin-bottom: 28px;
}
.ai-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── "분석한 영상" 스트립 (Phase 92) ─────────────────────────────────────────
   리포트가 결과 목록 아래에 길게 붙어서 "내가 어느 영상을 골랐는지" 확인하려면 매번 위로
   스크롤해야 했다(사용자 보고). 리포트 맨 위에 고른 영상의 썸네일·제목을 다시 보여준다. */
.analyzed-videos-section {
    padding: 16px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.avs-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -8px 0 12px;
}
.avs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
}
.avs-card {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 9px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition);
}
.avs-card:hover { border-color: var(--accent); }
.avs-thumb {
    flex: 0 0 104px;
    aspect-ratio: 16 / 9;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-input);
}
.avs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avs-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.avs-title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.avs-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.avs-ratio {
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 20px;
    padding: 1px 7px;
}
.avs-vision { border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.avs-vision.on { color: var(--success); background: rgba(0, 200, 150, 0.12); }
.avs-vision.off { color: var(--text-muted); background: var(--bg-input); cursor: help; }

@media (max-width: 560px) {
    .avs-list { grid-template-columns: 1fr; }
    .avs-thumb { flex-basis: 88px; }
}

/* 아이디어 카드 */
.ai-idea-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.ai-idea-card:hover { border-color: var(--accent); }

.ai-idea-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-idea-body { flex: 1; }
/* 아이디어 카드 안의 각 구획(주제/AI 요약/제목 후보)이 서로 헷갈리지 않도록 명시적 라벨 (Phase 64.3) */
.ai-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 10px 0 4px;
    line-height: 1.4;
}
.ai-idea-topic {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.ai-pain-point {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}
/* 콘텐츠 아이디어의 근거 댓글 원문 — pain_point 판단이 어떤 실제 댓글에서 나왔는지
   검증 가능하게 보여줌(Phase 64.1). pain_point와 색상을 분리해 "이건 AI 요약이 아니라
   실제 인용"임을 시각적으로 구분. */
.ai-evidence-quote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--warning-soft, rgba(255, 184, 48, 0.1));
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
}
.ai-evidence-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ai-evidence-text {
    font-size: 0.84rem;
    color: var(--text-primary);
    line-height: 1.5;
    font-style: italic;
}
.ai-evidence-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.ai-evidence-source {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.ai-evidence-likes {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--warning);
    white-space: nowrap;
}
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-chip {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
}
.ai-chip-title {
    background: rgba(108,92,231,0.15);
    color: var(--accent);
    border: 1px solid rgba(108,92,231,0.3);
}
.ai-chip-thumb {
    background: rgba(0,184,148,0.1);
    color: #00b894;
    border: 1px solid rgba(0,184,148,0.3);
}

/* 제목 클릭률 스코어 */
.ai-titles-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.ai-title-item {
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
/* 오프닝 원고 작성 대상 제목 선택(라디오 방식, Phase 64.2) — 기본은 최고 점수 제목 */
.ai-title-item.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ai-title-select-mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-title-item.selected .ai-title-select-mark {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--bg-input);
}
.ai-idea-cta-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.ai-idea-cta-btn:hover { background: var(--accent-hover); }
.ai-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.ai-title-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-refine {
    padding: 2px 8px;
    font-size: 0.75rem;
    background: rgba(108,92,231,0.12);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: 6px;
    color: var(--accent);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-refine:hover:not(:disabled) {
    background: rgba(108,92,231,0.25);
}
.btn-refine:disabled { opacity: 0.5; cursor: not-allowed; }

/* 강화 결과 */
.refine-result {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.refine-loading { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }
.refine-header {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.refine-item {
    background: rgba(108,92,231,0.06);
    border: 1px solid rgba(108,92,231,0.15);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.refine-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.refine-title-text {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}
.refine-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ai-title-text { font-size: 0.9rem; color: var(--text-primary); flex: 1; }
.ai-score {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.score-high { background: rgba(0,206,201,0.15); color: var(--success); }
.score-mid  { background: rgba(253,203,110,0.15); color: var(--warning); }
.score-low  { background: rgba(225,112,85,0.15); color: var(--danger); }
.ai-title-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.ai-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(108,92,231,0.15);
    color: var(--accent);
    border: 1px solid rgba(108,92,231,0.25);
}
.ai-title-reason {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}
.ai-score-bar {
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.ai-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* 패턴 카드 */
.ai-pattern-card {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.ai-pattern-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ai-pattern-example {
    font-size: 0.82rem;
    color: var(--accent);
    margin-bottom: 4px;
}
.ai-pattern-insight {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* 시급 니즈 카드 */
.ai-needs-meta {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}
.ai-needs-meta strong { color: var(--text-primary); }
.ai-needs-warn {
    display: inline-block;
    margin-left: 6px;
    color: #e55;
    font-weight: 500;
}

.ai-need-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.ai-freq {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
}
.ai-freq-high { background: rgba(255,118,117,0.15); color: #ff7675; border: 1px solid rgba(255,118,117,0.3); }
.ai-freq-mid  { background: rgba(253,203,110,0.15); color: #fdcb6e; border: 1px solid rgba(253,203,110,0.3); }
.ai-freq-low  { background: rgba(0,184,148,0.15);   color: #00b894; border: 1px solid rgba(0,184,148,0.3); }
.ai-need-body { flex: 1; }
.ai-need-body strong { font-size: 0.88rem; color: var(--text-primary); }
.ai-need-evidence {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

/* ═══ col-action 너비 확장 (오프닝 버튼 추가) ═══ */
.col-action { width: 140px !important; }

/* ═══ 채널 분석 테이블 오프닝 버튼 컬럼 ═══ */
.ca-action-cell {
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

/* ═══ 오프닝 30초 분석 버튼 ═══ */
.btn-transcript {
    display: block;
    margin-top: 5px;
    padding: 5px 10px;
    border: 1px solid #00b894;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #00b894;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    width: 100%;
}
.btn-transcript:hover {
    background: #00b894;
    color: white;
}

/* ═══ 오프닝 30초 분석 패널 ═══ */
.transcript-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.transcript-header .section-title {
    margin-bottom: 0;
    flex: 1;
}

.transcript-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.transcript-script-box {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid #00b894;
}
.transcript-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #00b894;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.transcript-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.transcript-analysis {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.transcript-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.transcript-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.hook-tag    { background: rgba(108,92,231,0.15); color: var(--accent); border: 1px solid rgba(108,92,231,0.3); }
.formula-tag { background: rgba(0,184,148,0.1);  color: #00b894;       border: 1px solid rgba(0,184,148,0.3); }
.trigger-tag { background: rgba(253,203,110,0.15); color: #fdcb6e;     border: 1px solid rgba(253,203,110,0.3); }
.phrase-tag  { background: rgba(255,118,117,0.12); color: #ff7675;     border: 1px solid rgba(255,118,117,0.3); }

.transcript-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
}
.transcript-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.transcript-phrase {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border-radius: 4px;
    padding: 2px 8px;
}

.transcript-adapt {
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(0,184,148,0.06));
    border-radius: var(--radius-sm);
    border: 1px solid rgba(108,92,231,0.2);
}
.transcript-adapt-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}
.transcript-adapt-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.7;
}

/* ─── 인기 영상 분석 탭 ─── */
.btn-viral-analyze {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #e17055;
    color: #e17055;
    background: rgba(225, 112, 85, 0.08);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-viral-analyze:hover {
    background: rgba(225, 112, 85, 0.18);
    transform: translateY(-1px);
}

/* 인기 영상 분석 테이블 컬럼 너비 */
#viral-results-table .col-views  { width: 100px; text-align: right;  white-space: nowrap; padding-right: 16px; }
#viral-results-table .col-date   { width: 100px; text-align: center; white-space: nowrap; padding-left: 12px; }
#viral-results-table .col-subs   { width: 80px;  text-align: right;  white-space: nowrap; padding-right: 12px; }
#viral-results-table .col-ratio  { width: 78px;  text-align: center; white-space: nowrap; }
#viral-results-table .col-exposure { width: 92px; text-align: center; white-space: nowrap; }
#viral-results-table .col-action { width: 72px;  text-align: center; }

.sub-count-cell {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 채널 링크 */
a.channel-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
a.channel-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* 썸네일 호버 커서 */
.vt-thumb-hover { cursor: zoom-in; }

.perf-ratio-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--bg-secondary, #f2f4f6);
    color: var(--text-muted, #8b95a1);
    white-space: nowrap;
}
.perf-ratio-badge.viral {
    background: rgba(26, 127, 75, 0.12);
    color: #1a7f4b;
}
.perf-ratio-badge.na { color: var(--text-muted); }

/* 노출도(Exposure) 5단계 배지 — "지금도 홈에 뜨는가" (Phase 46) */
.exposure-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.exposure-badge.exp-excellent { background: rgba(26, 127, 75, 0.16); color: #146c3f; }
.exposure-badge.exp-best      { background: rgba(26, 127, 75, 0.10); color: #1a7f4b; }
.exposure-badge.exp-good      { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.exposure-badge.exp-bad       { background: rgba(220, 38, 38, 0.10); color: #c0392b; }
.exposure-badge.exp-worst     { background: rgba(220, 38, 38, 0.16); color: #991b1b; }
.exposure-badge .exp-est-mark { opacity: 0.6; margin-left: 1px; font-weight: 400; }
/* 후킹 제목 배지의 '추정' 표기 (Phase 97) — hover에만 두면 터치 기기에서 고지가 안 된다 */
.hook-badge .hook-est-mark { opacity: 0.7; margin-left: 1px; font-weight: 400; }
/* 카드뷰용 노출도 칩 (Phase 46.7 — 검색 결과 카드) */
.exposure-card-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.exposure-card-label { font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* 인기 영상 정렬 버튼 */
.trend-sort-btn {
    font-size: 11.5px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.trend-sort-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.trend-sort-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}

/* 리포트 패널 */
.viral-report-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

/* 분석 리포트 — 영상 정보 헤더 */
.vr-video-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--bg-secondary, #f7f8fa);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.vr-thumb-link { flex-shrink: 0; }
.vr-thumb {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.vr-video-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.vr-video-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vr-video-title:hover { color: var(--accent); text-decoration: underline; }
.vr-video-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.vr-channel-link {
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
}
.vr-channel-link:hover { color: var(--accent); text-decoration: underline; }
.vr-channel-name { font-weight: 600; }
.vr-dot { opacity: 0.4; }
.vr-ratio-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-muted);
}
.vr-ratio-badge.viral { background: rgba(26,127,75,0.12); color: #1a7f4b; }

.viral-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.viral-view-badge {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 4px 12px;
    border-radius: 20px;
}

.viral-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}
.viral-section-success {
    border-color: rgba(0, 184, 148, 0.3);
}
.viral-section-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 12px 20px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}
.viral-section-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.viral-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.viral-row-highlight {
    background: rgba(108, 92, 231, 0.06);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}
.viral-row-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 100px;
    padding-top: 2px;
}
.viral-row-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    flex: 1;
}
.viral-improvement {
    color: var(--warning);
    font-weight: 600;
}

.viral-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.viral-tag {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border-radius: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
}
.viral-tag-none {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.viral-hook-tag {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(108, 92, 231, 0.15);
    color: var(--accent);
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.viral-script-box {
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border-left: 3px solid #00b894;
    margin-bottom: 4px;
}
.viral-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00b894;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.viral-script-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.viral-factors {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.viral-factor-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.viral-factor-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.viral-factor-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.6;
    padding-top: 2px;
}

.viral-improvements {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.viral-improve-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.viral-improve-icon {
    flex-shrink: 0;
}
.viral-no-improve {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ─── 인기 영상 분석 — 내 영상에 적용 (Phase 34.8) ─── */
.viral-apply-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.6;
}
.viral-apply-textarea {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    font-size: 13px;
    line-height: 1.6;
    border-radius: 8px;
    padding: 10px 12px;
}
.viral-apply-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.viral-apply-status {
    font-size: 12px;
    color: var(--text-muted);
}
.viral-apply-strategy {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-card-hover, #f9fafb);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
}
.viral-apply-group-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0 8px;
}
.viral-apply-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.viral-apply-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.viral-apply-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.viral-apply-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.viral-apply-card-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}
.viral-apply-copy {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.viral-apply-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.viral-apply-card-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: keep-all;
}
.viral-apply-thumb-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}
.viral-apply-reason {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .viral-apply-grid { grid-template-columns: 1fr; }
}

/* ─── 작업 선택 허브 ─── */
.hub-head {
    margin-bottom: 22px;
}
.hub-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.4px;
}
.hub-sub {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
#hub-panel .guide-toggle {
    margin-top: 18px;
}

.guide-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    transition: background 0.2s;
}
.guide-toggle:hover { background: var(--bg-input); }
.guide-toggle-icon { font-size: 1.1rem; }
.guide-toggle-title { flex: 1; }
.guide-toggle-arrow {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.25s;
}
.guide-toggle-arrow.open { transform: rotate(180deg); }

.guide-body { padding: 0 20px 20px; }

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.guide-card {
    background: var(--bg-input);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.guide-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.92rem;
}
.guide-header-search { background: rgba(108, 92, 231, 0.18); border-bottom: 1px solid rgba(108,92,231,0.3); }
.guide-header-viral  { background: rgba(253, 121,  50, 0.18); border-bottom: 1px solid rgba(253,121,50,0.3); }
.guide-header-opening{ background: rgba(  0, 206, 201, 0.18); border-bottom: 1px solid rgba(0,206,201,0.3); }
.guide-header-channel{ background: rgba(253, 203, 110, 0.18); border-bottom: 1px solid rgba(253,203,110,0.3); }
.guide-header-body   { background: rgba( 52, 152, 219, 0.18); border-bottom: 1px solid rgba(52,152,219,0.3); }

.guide-card-icon { font-size: 1.05rem; }
.guide-card-title { font-size: 0.9rem; }

.guide-card-body { padding: 14px 16px; }

.guide-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 12px;
}

.guide-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.guide-steps li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--text-primary);
    line-height: 1.6;
}
.guide-steps li > span:last-child {
    flex: 1;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.guide-step-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.guide-tip {
    font-size: 0.8rem;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
    border-left: 3px solid #e74c3c;
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* ─── 오프닝 원고 생성 탭 ─── */
.opening-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.opening-textarea {
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.8;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s;
}
.opening-textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.opening-textarea::placeholder {
    color: var(--text-muted);
    line-height: 1.9;
}

.label-required {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 6px;
}

/* 결과 패널 */
.og-result-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 4px;
}

/* 썸네일 이미지 분석 반영 배지 (Phase 56) */
.og-vision-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
}
.og-vision-badge .ico { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── 시청자 인사이트 배지 + 내 비즈니스 프로필 (Phase 64) ─── */
.insight-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
}

.insight-badge-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--accent);
    cursor: pointer;
}

.insight-badge-label input.insight-use-check {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
}

.insight-badge-hint {
    font-size: 0.76rem;
    color: var(--text-secondary);
}

.biz-profile-section {
    margin-top: 18px;
}

.biz-saved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--success);
    margin-left: 8px;
}

.biz-saved-badge .ico { width: 12px; height: 12px; }

.biz-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .biz-profile-grid { grid-template-columns: 1fr; }
}

.biz-profile-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.biz-profile-field input {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.86rem;
    border-radius: var(--radius-sm);
}

.biz-profile-hint {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* 참고 영상 분석 섹션 */
.og-ref-section {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 4px solid #6c5ce7;
    overflow: hidden;
}
.og-ref-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 12px 20px;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}
.og-ref-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.og-transcript-box {
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border-left: 3px solid #00b894;
}
.og-transcript-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00b894;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.og-transcript-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
}
.og-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.og-ref-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.og-ref-full {
    grid-column: 1 / -1;
}
.og-ref-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.og-ref-value {
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: 500;
}
.og-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.og-phrase {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-radius: 4px;
    padding: 3px 10px;
}

/* 생성된 원고 섹션 */
.og-scripts-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.og-scripts-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.og-scripts-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* ═══ 상세 인사이트 3종 (Phase 70 — 성장속도·썸네일카피·채널대비) ═══ */
.vd-insight-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.vd-insight-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.vd-insight-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.vd-insight-live { color: #00926f; font-weight: 700; }
.vd-insight-est { color: var(--text-muted); font-weight: 500; }
.vd-insight-value { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.45; }
.vd-insight-velocity .vd-insight-value { color: #1b6fe0; }
.vd-insight-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }
.vd-copy-text { font-size: 0.92rem; word-break: keep-all; }
.vd-copy-make-btn {
    margin-top: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: #3182f6;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}
.vd-copy-make-btn:hover { background: #1b6fe0; }
.vd-vs-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vd-vs-name { flex: 0 0 60px; font-size: 0.75rem; color: var(--text-muted); }
.vd-vs-track { flex: 1; height: 10px; background: var(--bg-input); border-radius: 6px; overflow: hidden; }
.vd-vs-bar { height: 100%; border-radius: 6px; }
.vd-vs-bar--avg { background: var(--border); }
.vd-vs-bar--this { background: #3182f6; }
.vd-vs-num { flex: 0 0 auto; font-size: 0.76rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ═══ 계정 메뉴 — 헤더 드롭다운 "마이페이지" (Phase 66.3) ═══ */
.account-menu { position: relative; }
.account-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px 5px 6px;
    cursor: pointer;
    color: var(--text-primary);
}
.account-menu-trigger:hover, .account-menu-trigger.open { background: var(--bg-input); }
.account-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent, #3182f6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.account-menu-name { font-size: 0.85rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform .15s;
}
.account-menu-trigger.open .account-menu-caret { transform: rotate(180deg); }

.account-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 16px;
    z-index: 200;
}
.account-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.account-menu-email { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-badge {
    flex-shrink: 0;
    background: rgba(108,92,231,0.15); color: #6c5ce7;
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
}
.account-usage-title { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 8px; }
.account-usage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.account-usage-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; color: var(--text-primary);
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 8px;
}
.account-usage-row--cap { color: #d64545; }
.account-usage-row--unlimited { justify-content: center; color: #00b894; font-weight: 600; }
.account-usage-label { color: var(--text-muted); }
.account-usage-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.account-usage-row--cap .account-usage-num { color: #d64545; }
.account-logout {
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
}
.account-logout:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* ═══ 허용 이메일 명단 (자동 승인, Phase 66.1) ═══ */
.roster-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px 20px;
    margin-bottom: 24px;
}
.roster-title { font-weight: 700; font-size: 0.98rem; color: var(--text-primary); margin-bottom: 6px; }
.roster-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.roster-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-input);
    resize: vertical;
}
.roster-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.roster-status { font-size: 0.82rem; color: var(--text-muted); }
.roster-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.roster-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 20px; padding: 5px 6px 5px 13px; font-size: 0.83rem; color: var(--text-primary);
}
.roster-remove {
    border: none; background: var(--bg-input); color: #d64545;
    border-radius: 14px; padding: 3px 9px; font-size: 0.75rem; cursor: pointer;
}
.roster-empty { font-size: 0.85rem; color: var(--text-muted); padding: 4px 0; }
.members-subhead { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin: 6px 0 12px; }

/* ═══ 회원 승인 목록 (관리자, Phase 66) ═══ */
.members-list { display: flex; flex-direction: column; gap: 10px; }
.member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.member-email { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.member-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
.member-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.member-actions { display: flex; gap: 6px; }
.member-status { font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.member-status--pending { background: rgba(245,166,35,0.15); color: #d98700; }
.member-status--active { background: rgba(0,184,148,0.15); color: #00926f; }
.member-status--rejected, .member-status--suspended { background: rgba(231,76,60,0.12); color: #d64545; }
.member-status--admin { background: rgba(108,92,231,0.15); color: #6c5ce7; }
.member-btn {
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 6px 13px;
    cursor: pointer;
}
.member-btn:disabled { opacity: .6; cursor: default; }
.member-btn--approve { background: #3182f6; color: #fff; }
.member-btn--reject, .member-btn--suspend { background: var(--bg-input); color: #d64545; border: 1px solid var(--border); }

/* 다음 단계 CTA — 오프닝 → 본문 원고 이어가기 (Phase 65.1) */
.og-next-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(0,184,148,0.08));
    border: 1.5px solid rgba(108,92,231,0.35);
    border-radius: 12px;
}
.og-next-cta-text {
    flex: 1 1 260px;
    min-width: 0;
}
.og-next-cta-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.og-next-cta-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.og-next-cta-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.og-script-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 4px solid #6c5ce7;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.og-version-header {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.og-formula-chip {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    line-height: 1.5;
}
.og-script-text {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text-primary);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    border: 1px solid var(--border);
    white-space: pre-wrap;
}
/* 추천 배너 */
.og-rec-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(0,184,148,0.1));
    border: 1.5px solid rgba(108,92,231,0.4);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 16px 0 8px;
}
.og-rec-icon { font-size: 1.6rem; flex-shrink: 0; }
.og-rec-title { font-weight: 700; font-size: 0.95rem; color: var(--accent); margin-bottom: 4px; }
.og-rec-reason { font-size: 0.84rem; color: var(--text-primary); line-height: 1.6; margin-bottom: 6px; }
.og-rec-strength { font-size: 0.8rem; color: var(--success); }

/* 추천 카드 강조 */
.og-script-card--rec { box-shadow: 0 0 0 2px var(--accent); }
.og-rec-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 6px;
    vertical-align: middle;
}

/* 점수 바 */
.og-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
}
.og-score-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}
.og-score-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.og-score-num {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 44px;
    text-align: right;
}
.og-score-reason {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* 카드 액션 버튼 영역 */
.og-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* 100점 만들기 버튼 */
.og-improve-btn {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--success);
    color: var(--success);
    background: rgba(0,184,148,0.08);
    cursor: pointer;
    transition: var(--transition);
}
.og-improve-btn:hover:not(:disabled) { background: var(--success); color: #fff; }
.og-improve-disabled {
    border-color: var(--text-muted);
    color: var(--text-muted);
    background: none;
    cursor: default;
}

/* 개선 결과 영역 */
.og-improve-result {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(0,184,148,0.08);
    border: 1.5px solid rgba(0,184,148,0.3);
    border-radius: 10px;
}
.og-improve-header {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--success);
    margin-bottom: 10px;
}
.og-improve-script {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}
.og-improve-changes-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.og-improve-changes {
    padding-left: 18px;
    margin: 0 0 6px;
}
.og-improve-changes li {
    font-size: 0.81rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 4px;
}

.og-three-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
}
.og-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.83rem;
    line-height: 1.6;
}
.og-step-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.og-step-text {
    color: var(--text-primary);
    flex: 1;
}
.og-script-divider {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
    margin-bottom: 6px;
}

.og-copy-btn {
    align-self: flex-end;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
    cursor: pointer;
    transition: var(--transition);
}
.og-copy-btn:hover {
    background: var(--accent);
    color: white;
}

@media (max-width: 600px) {
    .og-ref-grid { grid-template-columns: 1fr; }
}

/* ─── 오프닝 3요소 분석 공통 블록 ─── */
.te-block {
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
}
.te-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.te-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.84rem;
    line-height: 1.6;
}
.te-badge {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 2px;
}
.te-text {
    color: var(--text-primary);
    flex: 1;
}
.te-order {
    font-size: 0.77rem;
    color: var(--text-muted);
    margin-top: 6px;
}
.te-missing {
    font-size: 0.77rem;
    color: var(--warning);
    margin-top: 4px;
}

/* ─── 유튜브 원고 탭 ─── */
.body-form { display: flex; flex-direction: column; gap: 18px; }
.section-desc { font-size: 0.88rem; color: var(--text-muted); margin: -8px 0 8px; }
.label-optional { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

.body-textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    background: var(--bg-input);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.87rem;
    line-height: 1.7;
    font-family: inherit;
    transition: var(--transition);
    box-sizing: border-box;
}
.body-textarea:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input-focus); }
.body-textarea--sm { min-height: 60px; }
.body-textarea--free { min-height: 180px; }
.body-mat-hint { font-size: 0.82rem; color: var(--text-muted); margin: 4px 0 10px; line-height: 1.5; }

/* [Phase 117] 배·인·완·도·본 접이식 가이드.
   토글 동작·마크업은 허브의 `.guide-toggle`을 그대로 쓰되, 이 자리는 폼 안이라 크기를 줄인다
   (허브 것은 padding 16px 20px의 큰 버튼이고, hover 배경도 이 섹션 배경과 같아 안 보인다). */
.body-mat-guide-toggle {
    padding: 8px 10px;
    margin: 0 0 8px;
    font-size: 0.82rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.body-mat-guide-toggle:hover { background: var(--bg-card); }
.body-mat-guide {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.body-mat-guide-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.82rem;
    line-height: 1.9;
    color: var(--text-secondary);
}
.body-mat-guide-list b { color: var(--accent); }
.body-mat-guide-note {
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.body-mat-section, .body-pv-section {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid var(--border);
}
.body-mat-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 14px;
}
.body-mat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 700px) { .body-mat-grid { grid-template-columns: 1fr; } }

.body-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.87rem;
    cursor: pointer;
    transition: var(--transition);
}
.body-select:focus { outline: none; border-color: var(--border-focus); }

.body-pv-question {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: rgba(108, 92, 231, 0.1);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 500;
    line-height: 1.6;
}

/* 결과 패널 */
.result-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.result-panel-header h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.loading-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.bs-result-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }

.bs-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

/* [Phase 118] 개인가치가 AI 예시일 때의 경고 — 그대로 읽으면 안 되는 자리임을 알린다. */
.bs-example-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #fff7e6;
    border: 1px solid #ffd591;
}
.bs-example-banner b { font-size: 13px; color: #ad6800; }
.bs-example-banner span { font-size: 12.5px; line-height: 1.6; color: #8c6d1f; }
[data-theme="dark"] .bs-example-banner { background: rgba(217, 135, 0, 0.12); border-color: rgba(217, 135, 0, 0.35); }
[data-theme="dark"] .bs-example-banner b,
[data-theme="dark"] .bs-example-banner span { color: #f0b429; }

/* [Phase 118] "확인이 필요한 부분" — AI가 재료에 없이 연출한 것을 스스로 신고한 목록.
   촬영 전에 내 실제와 맞는지 훑는 자리라, 결과 섹션과 같은 모양이되 톤만 낮춘다. */
.bs-section--check { border-style: dashed; }
.bs-check-sub { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.bs-check-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.bs-check-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.bs-section-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}
.bs-hook-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    vertical-align: middle;
}
.bs-section-body {
    padding: 14px 16px;
    font-size: 0.87rem;
    color: var(--text-primary);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* 본문 6요소 */
.bs-elements { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bs-element-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.84rem;
    line-height: 1.6;
}
.bs-badge {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 2px;
}
.bs-element-text { color: var(--text-primary); flex: 1; }

.bs-combined-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
    margin-bottom: 8px;
}
.bs-combined {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text-primary);
    background: var(--bg-input);
    padding: 12px 14px;
    border-radius: 8px;
    white-space: pre-wrap;
}

/* 개인가치 */
.bs-pv-question {
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}
.bs-pv-script { font-size: 0.87rem; line-height: 1.7; }

/* 원고 잘림 경고 배너 + 빈 값 placeholder (Phase 36) */
.bs-warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 0.83rem;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
}
.bs-empty { color: var(--text-muted, #9ca3af); font-style: italic; font-size: 0.85rem; }

/* 전체 합본 */
.bs-full-section {
    background: rgba(108, 92, 231, 0.06);
    border: 1.5px solid rgba(108, 92, 231, 0.25);
    border-radius: 12px;
    padding: 16px;
}
.bs-full-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 10px; }
.bs-full-script {
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin-bottom: 12px;
}
.bs-full-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bs-send-ppt-btn {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
}
.bs-send-ppt-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 인기 영상 분석 — 모드 토글 */
.viral-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.viral-mode-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.viral-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.viral-mode-btn:not(.active):hover {
    border-color: var(--accent);
    color: var(--accent);
}
.form-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* 채점 */
.bs-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
}
.bs-score-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}
.bs-score-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.bs-score-num { font-size: 1rem; font-weight: 700; color: var(--accent); min-width: 50px; text-align: right; }
.bs-score-reason { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* 액션 버튼 */
.bs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bs-improve-btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--success);
    color: var(--success);
    background: rgba(0,184,148,0.08);
    cursor: pointer;
    transition: var(--transition);
}
.bs-improve-btn:hover:not(:disabled) { background: var(--success); color: #fff; }
.bs-improve-disabled { border-color: var(--text-muted); color: var(--text-muted); background: none; cursor: default; }

/* 개선 결과 */
.bs-improve-header { font-weight: 700; font-size: 0.9rem; color: var(--success); margin-bottom: 10px; }
.bs-improve-script {
    font-size: 0.88rem;
    line-height: 1.8;
    white-space: pre-wrap;
    background: var(--bg-input);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.bs-improve-changes-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.bs-improve-changes { padding-left: 18px; margin: 0 0 8px; }
.bs-improve-changes li { font-size: 0.81rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }

#bs-improve-result {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(0,184,148,0.08);
    border: 1.5px solid rgba(0,184,148,0.3);
    border-radius: 10px;
}

.btn-full { width: 100%; }
.btn-spinner { font-size: 1.1rem; }

/* ─── PPT 만들기 탭 ─── */
.guide-header-ppt {
    background: rgba(9, 132, 227, 0.18);
    border-bottom: 1px solid rgba(9, 132, 227, 0.3);
}

.ppt-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.ppt-info-box {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}

.ppt-info-title {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.ppt-info-list {
    padding-left: 18px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.ppt-key-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.ppt-key-list li { display: flex; align-items: center; gap: 6px; }

kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--accent);
}

/* ── 미디어 마커 가이드 박스 ──────────────────────────────────────────── */
.ppt-marker-guide {
    border: 1px solid rgba(108, 92, 231, 0.25);
    border-radius: 10px;
    background: rgba(108, 92, 231, 0.05);
    padding: 14px 18px;
    margin-bottom: 4px;
}

.ppt-marker-guide-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 10px;
}

.ppt-marker-guide-body p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.6;
}

.ppt-marker-example {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.ppt-marker-example-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ppt-marker-example-code {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.ppt-marker-rules {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ppt-marker-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.ppt-marker-rule-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.ppt-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ppt-script-textarea {
    width: 100%;
    min-height: 220px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    transition: var(--transition);
    box-sizing: border-box;
}
.ppt-script-textarea:focus { outline: none; border-color: var(--border-focus); background: var(--bg-input-focus); }

.ppt-image-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--bg-input);
    cursor: pointer;
}

.ppt-image-section summary {
    font-size: 0.9rem;
    color: var(--text-muted);
    user-select: none;
}

.ppt-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ppt-preview-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.ppt-result {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.ppt-download-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.ppt-success-msg {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}

.ppt-tip {
    font-size: 0.8rem;
    color: #e74c3c;
    margin: 0;
}

@media (max-width: 600px) {
    .ppt-info-grid { grid-template-columns: 1fr; }
}

/* ═══ 썸네일·제목 생성기 ═══ */
.section-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.thumb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.thumb-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

.thumb-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thumb-saved-badge {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--accent);
    background: rgba(108, 92, 231, 0.12);
    padding: 2px 8px;
    border-radius: 20px;
}

.required-mark {
    color: #e74c3c;
    font-weight: 700;
}

.optional-mark {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.thumb-file-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-file-select {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s;
}
.btn-file-select:hover { border-color: var(--accent); }

.thumb-file-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-file-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.btn-file-clear:hover { color: #e74c3c; }

/* ═══ 관리자: 오늘의 시스템 상태 (Phase 83) ═══ */
.admin-status {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.admin-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.admin-status-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.admin-status-refresh {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.admin-status-refresh:hover { border-color: var(--accent); color: var(--accent); }
.admin-status-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.admin-check {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--border);
    background: var(--bg-subtle, rgba(0, 0, 0, 0.03));
    color: var(--text-secondary);
}
.admin-check--warn {
    border-left-color: var(--warning);
    background: var(--warning-soft, rgba(255, 184, 48, 0.1));
    color: var(--text-primary);
}
.admin-check--ok {
    border-left-color: var(--success);
    color: var(--text-secondary);
}
.admin-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg-subtle, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.admin-stat-label { font-size: 0.72rem; color: var(--text-muted); }
.admin-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.admin-stat-sub { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.4; }

/* A: 내 영상 성과 비교 배너 (Phase 89·A) */
.vd-mine-banner {
    background: rgba(0,200,150,0.10); border: 1px solid var(--border);
    border-left: 3px solid var(--success); border-radius: 8px;
    padding: 10px 12px; margin: 8px 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary);
}
.vd-mine-banner strong { color: var(--text-primary); }
.vd-mine-banner b { color: var(--success); }
/* 내 영상 ↔ 오마주 대상 나란히 비교 (Phase 99) */
.vd-cmp { margin: 8px 0 6px; display: flex; flex-direction: column; gap: 5px; }
.vd-cmp-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vd-cmp-name { flex-shrink: 0; min-width: 92px; font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.vd-cmp-val { font-size: 0.8rem; color: var(--text-primary); }
.vd-cmp-na { font-size: 0.74rem; color: var(--text-muted); }
.vd-cmp-verdict { margin-top: 3px; font-size: 0.78rem; line-height: 1.6; color: var(--text-primary); }
.vd-cmp-verdict.good { color: var(--success); font-weight: 600; }
.vd-cmp-note { font-size: 0.72rem; line-height: 1.65; color: var(--text-muted); }
.studio-act.track { background: var(--success); border-color: var(--success); }

/* 내 작업실 (Phase 89·B) */
.my-studio {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; margin-bottom: 20px;
}
.my-studio-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.my-studio-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.my-studio-summary { font-size: 0.8rem; color: var(--text-secondary); }
.my-studio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.studio-card { display: flex; gap: 10px; background: var(--bg-subtle, rgba(0,0,0,0.03)); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.studio-thumb { width: 76px; height: 43px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: rgba(0,0,0,0.06); }
.studio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.studio-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-meta { font-size: 0.7rem; color: var(--text-secondary); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.studio-badge { background: var(--accent-soft); color: var(--text-primary); border-radius: 20px; padding: 1px 7px; font-weight: 600; }
.studio-status.studio-making { background: var(--warning-soft, rgba(255,184,48,0.15)); color: var(--warning); }
.studio-status.studio-published { background: rgba(0,200,150,0.12); color: var(--success); }
.studio-status.studio-scrap { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }

/* ═══ 내 작업실 재구성 (Phase 99) ═══════════════════════════════════════════
   [무엇이 문제였나] 종전 그리드는 minmax(230px, 1fr) 열에 flex 카드였고, 그 안에 버튼이 최대
   5개라 본문 폭 ~120px에서 3~4줄로 줄바꿈됐다(카드 높이가 제각각인 직접 원인).
   `.studio-*`를 다루는 @media 규칙은 **하나도 없었다**. 여기서는 이미 검증된
   `.video-card-grid`의 반응형 골격(900px/640px 브레이크포인트)을 따른다. */

/* 허브 상단 요약 카드 — 전체 목록은 '내 작업실' 탭이 담당한다 */
.my-studio--summary { padding: 14px 16px; }
.studio-sum-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.studio-sum-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.studio-sum-stat { display: flex; align-items: baseline; gap: 5px; }
.studio-sum-stat b { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.studio-sum-stat span { font-size: 0.76rem; color: var(--text-secondary); }
.studio-sum-empty { font-size: 0.8rem; line-height: 1.7; color: var(--text-secondary); }
.btn-studio-enter {
    margin-left: auto; padding: 8px 16px; border-radius: 9px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.btn-studio-enter:hover { filter: brightness(1.06); }

/* 사이드바 개수 배지 */
.nav-count {
    margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 700; text-align: center;
    background: var(--accent-soft); color: var(--accent);
}

/* [Phase 115.1] 사이드바 단계 번호 — 허브의 `.step-num`(1~6)과 같은 것을 가리킨다.
   `.nav-count`(내 작업실 개수 배지)와 같은 자리·같은 모양 규칙을 쓰되 강조는 낮춘다:
   개수는 "확인할 것이 있다"는 알림이고 이 번호는 "순서"라 서로 다른 무게여야 한다.
   접힌 사이드바에서는 기존 규칙(`.sidebar-nav-btn span:not(.nav-icon)`)이 자동으로 숨긴다. */
.nav-step {
    margin-left: auto; min-width: 18px; padding: 1px 5px; border-radius: 20px;
    font-size: 0.66rem; font-weight: 700; text-align: center;
    background: var(--bg-input); color: var(--text-muted);
}
.sidebar-nav-btn.active .nav-step {
    background: var(--accent-soft); color: var(--accent);
}

/* 상태 필터 칩 — 뜨는 영상의 .hot-band-btn 계열과 같은 모양(학습 비용 0).
   실제 시각 규칙은 아래 공용 셀렉터 목록에 .studio-filter-btn을 추가해 공유한다. */

/* 작업실 그리드 — 카드가 넉넉한 폭을 갖도록 최소 폭을 넓히고 높이를 맞춘다 */
.studio-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px; margin-top: 16px; align-items: stretch;
}
.studio-grid .studio-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px;
}
.studio-grid .studio-thumb-wrap { flex-shrink: 0; width: 128px; }
.studio-grid .studio-thumb { width: 128px; height: 72px; border-radius: 8px; }
.studio-grid .studio-body { gap: 5px; }
.studio-grid .studio-name { font-size: 0.86rem; line-height: 1.4; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-ch { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-grid .studio-actions { margin-top: 6px; row-gap: 5px; }
.studio-act.primary { font-weight: 700; }
.studio-act.ghost.danger { color: var(--text-muted); }
.studio-act.ghost.danger:hover { border-color: var(--danger, #e03131); color: var(--danger, #e03131); }

.studio-more-wrap { display: flex; justify-content: center; margin-top: 16px; }
.studio-more-btn {
    padding: 9px 20px; border-radius: 9px; cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
}
.studio-more-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ═══ 발굴 보관함 둘러보기 (Phase 99) ═══ */
.archive-browse {
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);
}
/* 썸네일에서 읽어낸 실제 문구 — 사용자가 가장 반복 요구한 축이라 카드에서 눈에 띄게 둔다.
   추정치임을 라벨과 툴팁으로 함께 밝힌다(정직 표기 규칙). */
.ab-copy {
    display: flex; gap: 7px; align-items: flex-start; margin: 6px 0 2px;
    padding: 7px 9px; border-radius: 8px; line-height: 1.5;
    background: var(--accent-soft); border: 1px dashed var(--border);
}
.ab-copy-label {
    flex-shrink: 0; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--accent); padding-top: 1px;
}
.ab-copy-text {
    font-size: 0.76rem; font-weight: 600; color: var(--text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 작업 카드 제작 체크리스트 (Phase 103) ──
   "만든 것 1"만으로는 어디까지 왔는지 알 수 없어, 3단계를 눈으로 보여준다. */
.studio-steps {
    display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 7px 0 9px;
}
.studio-step {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
}
.studio-step.done { color: var(--accent); }
.studio-step .ico { width: 11px; height: 11px; }
/* 미완 단계의 빈 동그라미 — `--border`를 쓰면 다크에서 rgba(255,255,255,0.07)로
   거의 보이지 않는다(실측). `currentColor`를 쓰면 옆 글자(muted)와 같은 색을 따라가
   두 테마 모두에서 "아직 안 한 단계"가 눈에 남는다. */
.studio-step-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid currentColor; opacity: 0.55; display: inline-block;
}
.studio-act.primary.done { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ── 기간 밖 관련 영상 안내 (Phase 102.3) ── */
.aged-hint {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 10px 0 4px; padding: 11px 14px; border-radius: 10px;
    background: var(--accent-soft); border: 1px dashed var(--border);
    font-size: 0.82rem; line-height: 1.65; color: var(--text-primary);
}
.btn-aged-include {
    flex-shrink: 0; margin-left: auto;
    padding: 7px 14px; border-radius: 8px; border: 1px solid var(--accent);
    background: var(--accent); color: #fff;
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.btn-aged-include:hover { filter: brightness(1.06); }
.btn-aged-include:disabled { opacity: 0.6; cursor: default; }

/* ── 어제 대비 가장 크게 튄 영상 (Phase 102) ──
   '다시 올 이유'라 뜨는 영상 탭 상단에 상시 노출된다. 색은 전부 토큰만 쓴다(하드코딩 금지 규칙). */
.movers-wrap {
    margin-top: 18px; padding: 16px 18px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft);
}
.movers-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 12px;
}
.movers-title {
    margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}
.movers-sub { font-size: 0.74rem; color: var(--text-muted); }
/* [Phase 115] 접기 토글 — 카드 20장이 첫 화면을 통째로 차지해 '오늘 찍을 것'이 밀렸다.
   기본은 펼침(재방문자의 주 화면). margin-left:auto로 헤더 오른쪽 끝에 붙인다. */
.movers-toggle {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}
.movers-toggle:hover { color: var(--text-primary); }
.movers-wrap.collapsed #movers-body { display: none; }
.movers-empty {
    padding: 20px 4px; text-align: center; font-size: 0.82rem;
    color: var(--text-muted); line-height: 1.7;
}
.movers-list {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* [Phase 103] 두 층 — 각 층이 제 이름값을 하도록 제목·설명을 붙여 구분한다. */
.movers-tier { margin-top: 14px; }
.movers-tier:first-of-type { margin-top: 0; }
.movers-tier-title {
    margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: baseline; gap: 6px;
}
.movers-tier-n { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.movers-tier-desc {
    margin: 3px 0 9px; font-size: 0.74rem; line-height: 1.6; color: var(--text-muted);
}
/* 어제 하루 증가분 — 썸네일 위 배지. 이 화면에서 가장 먼저 읽혀야 하는 값이다. */
.mover-gain-badge {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    padding: 3px 8px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em;
    background: var(--accent); color: #fff;   /* accent 배경 위 흰 글자 — 기존 배지들과 같은 관례 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.stat-chip.mover-accel { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

@media (max-width: 900px) {
    .studio-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 640px) {
    .studio-grid { grid-template-columns: 1fr; }
    .studio-grid .studio-thumb-wrap, .studio-grid .studio-thumb { width: 104px; }
    .studio-grid .studio-thumb { height: 59px; }
    .btn-studio-enter { margin-left: 0; width: 100%; }
}
/* ─── 쿼터 절약/보호 모드 (Phase 94-A) ──────────────────────────────────────── */
.quota-mode-banner {
    display: none; padding: 9px 20px; font-size: 0.8rem; line-height: 1.6;
    text-align: center; color: var(--text-primary);
    background: var(--bg-secondary); border-bottom: 1px solid var(--border);
}
.quota-mode-banner--saver { border-bottom-color: var(--warning); }
.quota-mode-banner--guard { border-bottom-color: var(--danger); }
.quota-mode-badge {
    margin-left: 6px; font-size: 0.66rem; font-weight: 700;
    padding: 1px 7px; border-radius: 20px;
    background: var(--bg-input); color: var(--text-secondary);
}
.quota-mode--saver { color: var(--warning); background: var(--warning-soft, rgba(255, 184, 48, 0.14)); }
.quota-mode--guard { color: var(--danger); background: var(--danger-soft, rgba(255, 71, 87, 0.14)); }

/* ─── 생성물 작업실 저장 (Phase 90) ─────────────────────────────────────────── */
/* "지금 작업 중" 칩 — 만든 원고가 어디로 저장되는지 사용자가 알 수 있게 */
.active-work-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--accent-soft); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 12px; }
.awc-label { font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.awc-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.awc-note { font-size: 0.72rem; color: var(--text-secondary); }
.awc-close { margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); display: inline-flex; padding: 2px; }
.awc-close:hover { color: var(--text-primary); }
.awc-close .ico { width: 14px; height: 14px; }

/* 카드에 "무엇까지 만들었나" 배지 */
.studio-badge.studio-made { background: var(--bg-secondary); color: var(--text-secondary);
    border: 1px solid var(--border); font-weight: 500; }

/* 만든 것 보기 모달 */
.work-outputs-modal { max-width: 780px; margin: 0 auto; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 14px; padding: 22px; position: relative; }
.wo-modal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; padding-right: 32px; }
.wo-section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.wo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--bg-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.wo-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.wo-at { font-size: 0.72rem; color: var(--text-secondary); }
.wo-trunc { font-size: 0.7rem; color: var(--warning); }
.wo-copy { margin-left: auto; font-size: 0.72rem; padding: 3px 10px; border-radius: 6px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.wo-text { margin: 0; padding: 12px 14px; font-size: 0.8rem; line-height: 1.75;
    color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
    font-family: inherit; max-height: 420px; overflow-y: auto; }

/* 빈 작업실 안내 (Phase 89.3·C4) — 숨기지 않고 무엇을 하면 채워지는지 알려준다 */
.studio-empty { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 10px; padding: 16px 18px; background: var(--bg-secondary); }
.studio-empty-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.studio-empty-desc { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.65; }

/* 저장 시점 표기 (Phase 89.3·A5) — 카드 배수가 스냅샷임을 작게 명시 */
.studio-badge-note { margin-left: 4px; font-weight: 500; font-size: 0.62rem; color: var(--text-secondary); }
/* flex-wrap 필수: 카드가 230px까지 좁아지는데 버튼이 최대 4개라 넘친다 (Phase 89.3·C6) */
.studio-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.studio-act { font-size: 0.72rem; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.studio-act.ghost { background: none; color: var(--text-secondary); border-color: var(--border); }
.studio-act.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 찜(스크랩) 하트 버튼 (Phase 89·C) */
.scrap-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.45); border-radius: 50%; transition: transform 0.15s, background 0.2s;
}
.scrap-btn .ico { width: 17px; height: 17px; fill: #fff; stroke: none; }
.scrap-btn:hover { transform: scale(1.12); background: rgba(0, 0, 0, 0.6); }
.scrap-btn.on { background: rgba(255, 0, 51, 0.92); }
.scrap-btn.on .ico { fill: #fff; }
/* 썸네일 위에 얹는 위치 */
.scrap-on-thumb { position: absolute; top: 8px; right: 8px; z-index: 3; }
.video-card-thumb, .hot-pick-card { position: relative; }

/* 온보딩 채널 설정 폼 (Phase 89·D) */
.ob-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; text-align: left; }
.ob-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--text-secondary); }
.ob-field span { font-weight: 600; color: var(--text-primary); }
.ob-field em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.ob-field input {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-card); color: var(--text-primary); font-size: 0.88rem;
}
.ob-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ═══ 오늘 찍을 것 추천 3개 (Phase 82) ═══ */
.hot-pick-wrap {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.hot-pick-head { margin-bottom: 12px; }
.hot-pick-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.hot-pick-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.hot-pick-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

/* 검색 진행 표시 (Phase 101.1) */
.search-progress { padding: 18px 20px; }
.search-progress .sp-row { display: flex; align-items: center; gap: 14px; }
.search-progress .spinner { width: 22px; height: 22px; border-width: 3px; flex-shrink: 0; }
.search-progress .sp-text { min-width: 0; }
.search-progress .sp-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.search-progress .sp-step { margin-top: 3px; font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.search-progress .sp-note {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 0.78rem; line-height: 1.65; color: var(--text-muted);
}

/* 보관함 0건 안내 (Phase 101.1) — 무관한 것으로 채우는 대신 왜 없는지 말한다 */
.archive-empty-hint {
    margin: 0 0 12px; padding: 11px 14px; border-radius: 10px;
    background: var(--bg-secondary); border: 1px dashed var(--border);
    font-size: 0.8rem; line-height: 1.7; color: var(--text-secondary);
}

/* 검색 탭 '우리가 발굴해 둔 것' 섹션 (Phase 101) — 아래 검색 결과 카드와 **같은 크기**로.
   `.hot-pick-list`는 `auto-fit`이라 항목이 1개면 그 한 칸이 전체 폭으로 늘어나고,
   썸네일이 `aspect-ratio: 16/9`라 높이까지 따라 커져 카드 하나가 화면을 덮었다(사용자 지적).
   `auto-fill`은 빈 트랙을 남기므로 1개여도 320px를 유지한다 — 바로 아래 `.video-card-grid`와
   같은 값을 써서 두 목록이 한 화면에서 같은 크기로 보이게 한다.
   (추천 3개 `#hot-pick-list`는 항상 3개라 늘어나는 게 자연스러우므로 그대로 둔다.) */
#archive-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.hot-pick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}
.hot-pick-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 50%;
}
.hot-pick-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg-subtle, rgba(0, 0, 0, 0.06));
}
.hot-pick-body { flex: 1; min-width: 0; }
.hot-pick-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}
.hot-pick-ch {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.hot-pick-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.hot-pick-reason {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: var(--accent-soft);
    border-radius: 20px;
    padding: 2px 8px;
}
.hot-pick-reason b { color: var(--text-primary); font-weight: 700; }
.hot-pick-btn {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.hot-pick-btn:hover { opacity: 0.88; }

/* ═══ 오마주 대상 참고 카드 (오마주 진입 시에만 표시) ═══ */
/* [Phase 116] "이 버튼을 누르면 무엇이 나오는가" — 생성 버튼 바로 아래 상시 표기.
   [왜] 결과 패널은 생성 전엔 `display:none`이라 **여기에 무엇이 나오는지 말하는 자리가 없었다**.
   퍼널·작업실은 이미 그 자리를 갖고 있어 8개 탭 중 자기설명력이 가장 높았다 — 같은 것을 이식한다.
   결과가 있든 없든 참인 문장이라 토글이 필요 없다(상태를 만들지 않는다). */
.stage-outcome {
    /* 부모가 flex 행인 탭(썸네일 등)에서 버튼 옆에 끼어 붙지 않도록 한 줄을 통째로 차지한다 */
    flex-basis: 100%;
    width: 100%;
    margin: 10px 2px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* [Phase 116] 원고 입력 실시간 글자 수 — 문턱을 눌러 보기 전에 알 수 있게 */
.char-count { display: block; margin-top: 6px; }
.char-count--short { color: var(--warning, #d98700); font-weight: 600; }
.char-count--ok { color: var(--success, #00b894); font-weight: 600; }

/* [Phase 116] 전제 안내 배너 — 전 단계를 거치지 않고 들어왔을 때 그 자리를 지킨다.
   오마주 참고 카드(.homage-ref-card)와 **같은 자리·같은 형태**를 쓰되, 강조는 낮춘다:
   참고 카드는 "지금 이걸 오마주하는 중"이라는 사실이고, 이건 "이렇게 하면 더 좋다"는 안내다.
   막는 장치가 아니므로 accent 강조선 대신 중립 테두리를 쓴다. */
.prereq-note {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.prereq-body { flex: 1 1 240px; min-width: 0; }
.prereq-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.prereq-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.prereq-go {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.prereq-go:hover { color: #fff; background: var(--accent); }

.homage-ref-card {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
}
.homage-ref-thumb {
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--bg-subtle, rgba(0, 0, 0, 0.06));
}
.homage-ref-body {
    flex: 1;
    min-width: 0;
    padding-right: 54px; /* 우상단 해제 버튼과 겹침 방지 */
}
.homage-ref-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: 20px;
    padding: 1px 8px;
    margin-bottom: 5px;
}
.homage-ref-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.homage-ref-meta {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.homage-ref-guide {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
    padding-right: 0;
}
.homage-ref-guide strong { color: var(--text-primary); font-weight: 600; }
.homage-ref-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.homage-ref-clear:hover { border-color: var(--accent); color: var(--accent); }
.homage-ref-clear .ico { width: 12px; height: 12px; }

/* 오마주 대상과 같은 소재로 만들기 (원클릭) */
.homage-use-title-btn {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--border);
    color: var(--accent);
    font-size: 0.78rem;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.homage-use-title-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.thumb-btn-row {
    display: flex;
    justify-content: center;
    /* [Phase 116] 아래 `.stage-outcome`(산출물 안내)이 버튼 옆에 끼어 버튼 폭을 줄이지 않도록
       줄바꿈을 허용한다. 이 행의 자식은 버튼과 그 안내 둘뿐이라 다른 영향은 없다. */
    flex-wrap: wrap;
    margin-top: 8px;
}

.result-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.btn-copy {
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.btn-copy:hover {
    border-color: var(--accent);
    background: rgba(108, 92, 231, 0.1);
}

.thumb-result-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-primary);
}

/* 썸네일 결과 렌더링 — 구조 클래스 */
.tr-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
}
.tr-section-header span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}
.tr-sub-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(108, 92, 231, 0.08);
    border-left: 3px solid var(--accent);
    padding: 6px 12px;
    border-radius: 0 6px 6px 0;
    margin: 18px 0 8px;
}
.tr-copy-box {
    background: #16103a;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.6;
    padding: 24px 20px;
    border-radius: 12px;
    text-align: center;
    margin: 8px 0 12px;
    letter-spacing: 0.3px;
    border: 2px solid rgba(108, 92, 231, 0.45);
    box-shadow: 0 4px 20px rgba(108, 92, 231, 0.15);
}
.tr-option-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 22px 0 4px;
    letter-spacing: 0.5px;
}
.tr-badge-blue   { background: #3b82f6; color: #fff; }
.tr-badge-purple { background: var(--accent); color: #fff; }
.tr-badge-green  { background: #10b981; color: #fff; }

.tr-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(108, 92, 231, 0.07);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    margin: 14px 0 4px;
    flex-wrap: wrap;
}
.tr-title-badge {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}
.tr-title-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.tr-recommend-combo {
    background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(52,211,153,0.1));
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 4px;
}
.tr-recommend-reason {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 4px 0 12px 4px;
}
.tr-list {
    margin: 6px 0 10px 18px;
    padding: 0;
}
.tr-list li {
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
}
.tr-list-num { list-style: decimal; }
.tr-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
    opacity: 0.5;
}
.tr-para {
    font-size: 0.87rem;
    color: var(--text-secondary);
    margin: 3px 0;
    line-height: 1.65;
}
.tr-inline-code {
    background: rgba(108,92,231,0.12);
    color: var(--accent);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.82em;
    font-family: monospace;
}

#thumb-topic {
    width: 100%;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    transition: var(--transition);
    outline: none;
}
#thumb-topic:focus {
    border-color: var(--border-focus);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
#thumb-topic::placeholder {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .thumb-form-grid { grid-template-columns: 1fr; }
}

/* ════ UI 가이드 강화 ════ */

/* 헤더 우측 그룹 */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 헤더 '튜토리얼' 링크 (Phase 91) — 로고 옆 상시 노출.
   예전 우측의 "처음이세요?" 버튼(.btn-guide-shortcut)을 이 링크로 통합했다. 그 버튼은
   눈에 띄지 않아 첫 사용자가 순서를 모른 채 헤맸고, 480px 이하에선 아예 숨겨져 있었다.
   이 링크는 처음 사용자가 순서를 찾는 유일한 입구라 좁은 화면에서도 숨기지 않는다. */
.btn-tutorial {
    padding: 6px 13px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}
.btn-tutorial:hover {
    background: var(--accent);
    color: #fff;
}

/* 목적 카드 섹션 */
.goal-section {
    margin-bottom: 16px;
}
.goal-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.goal-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.goal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 18px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    width: 100%;
    color: var(--text-primary);
    font-family: var(--font);
    position: relative;
    overflow: hidden;
    min-height: 120px;
}
.goal-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--accent-glow);
}
.goal-card:active { transform: translateY(0); }
.goal-icon {
    font-size: 1.9rem;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.goal-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-width: 0;
}
.goal-title {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: normal;
    line-height: 1.3;
}
.goal-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.45;
    white-space: normal;
}
.goal-arrow {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: var(--transition);
    align-self: flex-end;
    margin-top: 12px;
}
.goal-card:hover .goal-arrow {
    color: var(--accent);
    transform: translateX(3px);
}
[data-theme="light"] .goal-card { background: rgba(108,92,231,0.04); }
[data-theme="light"] .goal-card:hover { background: rgba(108,92,231,0.09); }

/* ─── 5단계 제작 파이프라인 (허브) ─── */
.pipeline-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pipeline-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font);
    position: relative;
}
button.pipeline-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    transform: translateX(4px);
    box-shadow: 0 6px 20px var(--accent-glow);
}
.pipeline-card-multi { cursor: default; align-items: flex-start; }
[data-theme="light"] .pipeline-card { background: rgba(108,92,231,0.04); }
[data-theme="light"] button.pipeline-card:hover { background: rgba(108,92,231,0.09); }

.pipeline-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
}
.pipeline-ico {
    flex-shrink: 0;
    color: var(--accent);
    display: flex;
    align-items: center;
}
.pipeline-ico .ico { width: 22px; height: 22px; }
.pipeline-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pipeline-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.pipeline-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.pipeline-arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: var(--transition);
}
button.pipeline-card:hover .pipeline-arrow {
    color: var(--accent);
    transform: translateX(3px);
}
.pipeline-entries {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pipeline-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
}
.pipeline-entry .ico { width: 15px; height: 15px; }
.pipeline-entry:hover { background: var(--accent-hover, var(--accent)); transform: translateY(-1px); filter: brightness(1.08); }

/* 선택 도구 구역 */
.tool-section { margin-top: 24px; }
.tool-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tool-section-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}
.tool-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font);
    flex: 1;
    min-width: 200px;
}
.tool-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}
[data-theme="light"] .tool-card { background: rgba(108,92,231,0.04); }
[data-theme="light"] .tool-card:hover { background: rgba(108,92,231,0.09); }
.tool-ico { flex-shrink: 0; color: var(--text-secondary); display: flex; }
.tool-ico .ico { width: 18px; height: 18px; }
.tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-title { font-size: 0.85rem; font-weight: 700; }
.tool-desc { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.4; }

/* 마지막 단계 완료 안내 */
.context-done {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--success);
}

/* 컨텍스트 배너 */
.tab-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.context-desc {
    display: flex;
    align-items: center;
    gap: 7px;
}
.context-icon { font-size: 0.95rem; flex-shrink: 0; }
.context-text { font-size: 0.8rem; color: var(--text-secondary); }
.context-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.context-prev-btn,
.context-next-btn {
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.context-prev-btn:hover { border-color: var(--accent); color: var(--accent); }
.context-next-btn {
    background: rgba(108,92,231,0.12);
    border-color: rgba(108,92,231,0.3);
    color: var(--accent);
}
.context-next-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* 반응형 */
@media (max-width: 900px) {
    .goal-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .goal-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .goal-cards { grid-template-columns: 1fr; }
    .tab-context-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .context-nav { width: 100%; justify-content: flex-end; }
}

/* ─── 모드 전환 버튼 (롱폼 헤더) ─── */
.mode-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}
.mode-switch-btn:hover {
    border-color: var(--success);
    color: var(--success);
    background: rgba(0, 206, 201, 0.08);
}

/* ─── 연관 키워드 칩 ─── */
.kw-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
}
.kw-chip-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-right: 4px;
}
.kw-chip {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.6;
}
.kw-chip:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════
   비디오 카드 그리드 (테이블 → 카드 전환)
   ═══════════════════════════════════════════════ */
.video-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
    animation: fadeInUp 0.3s ease-out both;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    border-color: var(--border-focus);
    box-shadow: 0 4px 20px rgba(255, 0, 51, 0.12);
    transform: translateY(-2px);
}

.video-card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #0a0a0a;
    flex-shrink: 0;
    cursor: pointer;            /* 썸네일 클릭으로 선택/해제 */
}

.video-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-card-thumb img {
    transform: scale(1.03);
}

.video-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    pointer-events: none;       /* 평소엔 클릭 통과 → 체크박스 클릭 가능 */
    transition: opacity 0.2s;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    gap: 6px;
}

.video-card:hover .video-card-overlay {
    opacity: 1;
    pointer-events: auto;       /* 호버 시에만 오버레이 버튼 클릭 활성 */
}

.video-card-play-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #111;
    cursor: pointer;
    transition: background 0.15s;
}

.video-card-play-btn:hover {
    background: #fff;
}

.video-card-check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
    cursor: pointer;
    z-index: 5;                 /* 오버레이보다 위 → 항상 클릭 가능 */
}

.video-card-views-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.video-card-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.video-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 2.8em;  /* 2줄 공간 확보 — 1줄 제목도 레이아웃 통일 */
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}

.video-card-title:hover {
    color: var(--accent);
}

.video-card-channel {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 뜨는 영상 채널 정보 (프로필 사진 + 레이블) */
.hot-channel-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0 4px;
}
.hot-channel-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
}
.hot-channel-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.hot-channel-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hot-channel-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.hot-channel-label {
    font-size: 10px;
    color: var(--text-muted, #999);
    background: var(--bg-secondary, #f4f4f5);
    border-radius: 3px;
    padding: 0 4px;
    line-height: 16px;
    white-space: nowrap;
}
.hot-channel-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.hot-channel-name:hover {
    color: var(--accent);
    text-decoration: underline;
}
.hot-channel-value {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.video-card-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-chip .stat-icon {
    font-size: 12px;
}

.stat-chip.stat-views {
    color: var(--text-secondary);
    font-weight: 600;
}

.video-card-actions {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: rgba(0,0,0,0.1);
}

.btn-card-action {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-card-action:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-card-action.loading {
    opacity: 0.6;
    cursor: wait;
}

/* 검색 결과 카드의 제작 진입점 (Phase 101) — 종전엔 이 카드에 찜·오마주·상세가 하나도 없어
   검색으로 찾은 영상이 제작으로 넘어갈 길이 없었다(3계명 ③). '오마주 제작'은 주 버튼이므로
   accent로 채워 다른 보조 버튼과 위계를 만든다. 버튼이 4개가 되므로 줄바꿈을 허용한다. */
.video-card-actions { flex-wrap: wrap; row-gap: 6px; }
.btn-card-action.btn-search-homage {
    flex: 1 1 100%;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}
.btn-card-action.btn-search-homage:hover { filter: brightness(1.06); color: #fff; }

/* 카드 그리드 반응형 */
@media (max-width: 900px) {
    .video-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .video-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   온보딩 스텝 표시기
   ═══════════════════════════════════════════════ */
.onboarding-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 4px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font);
    cursor: pointer;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.2s;
    flex-shrink: 0;
}

.step-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}

.step-item.active .step-num {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.step-item.active .step-label {
    color: var(--text-primary);
    font-weight: 600;
}

.step-item.done .step-num {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.step-item.done .step-label {
    color: var(--text-secondary);
}

.step-arrow {
    color: var(--border);
    font-size: 14px;
    margin: 0 6px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   플랫폼 배지 & 탭 헤더
   ═══════════════════════════════════════════════ */
.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.platform-badge.yt {
    background: rgba(255, 0, 0, 0.12);
    color: #FF0000;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

.platform-badge.ig {
    background: rgba(225, 48, 108, 0.12);
    color: #E1306C;
    border: 1px solid rgba(225, 48, 108, 0.2);
}

/* ═══════════════════════════════════════════════
   사이드바 반응형 (모바일)
   ═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    .sidebar {
        width: var(--sidebar-collapsed);
        min-width: var(--sidebar-collapsed);
    }

    .sidebar-section-title,
    .sidebar-nav-btn span:not(.nav-icon),
    .sidebar-platform-badge span {
        display: none;
    }

    .sidebar-platform-badge {
        justify-content: center;
        padding: 10px;
    }

    #app-main {
        max-width: calc(100% - var(--sidebar-collapsed));
        padding: 16px;
    }
}

/* 모바일 드로어 배경 — **기본은 없는 것과 같아야 한다** (Phase 100).
   미디어쿼리 안에만 display:none을 두면, 그 밖(=PC)에서는 규칙이 없어 div의 기본값인
   block이 되어 `.app-layout`(flex)의 **빈 플렉스 아이템**으로 자리를 차지한다.
   실측으로 잡은 회귀 — 601px에서 배경이 block으로 떠 있었다. 새 클래스라 기존 PC 규칙과
   충돌하지 않는다. */
.mobile-nav-backdrop { display: none; }

/* ═══ 모바일 드로어 내비게이션 (Phase 100) ═══════════════════════════════════
   [무엇이 문제였나] 종전 이 블록은 `.sidebar { display: none; }` 한 줄이었다. 그런데
   `.tab-nav`는 base에서 `display:none !important`(사이드바로 대체됨)라, 폰에서는
   **클릭 가능한 탭 버튼이 0개**가 되어 첫 화면에 갇혔다(실측 390px).
   탭이 10개라 하단 탭바로는 안 들어가므로, **기존 사이드바 마크업을 그대로** 오버레이
   드로어로 띄운다(새로 만드는 내비게이션 없음 = 두 벌 관리 안 함).

   ⚠️ PC 안전장치: 이 블록은 전부 `max-width: 600px` 안에 있어 PC(≥601px)에는 적용되지
   않는다. 폭 관련 값에 `!important`를 쓰는 이유는 **PC용 접기 토글이 인라인 style로
   width를 박기 때문**이다(app.js의 sidebar.style.width). 인라인은 미디어쿼리를 이기므로,
   PC에서 접은 채 폰 폭으로 줄이면 드로어가 64px로 찌그러진다. 그 인라인만 무력화한다. */
@media (max-width: 600px) {
    .app-layout { display: block; }

    #app-main {
        max-width: 100%;
        padding: 12px;
    }

    .sidebar {
        display: flex;                     /* 종전 none — 드로어로 되살린다 */
        position: fixed;
        top: 56px;                         /* 헤더 높이 */
        left: 0;
        height: calc(100vh - 56px);
        width: 264px !important;           /* PC 토글이 남긴 인라인 width 무력화 */
        min-width: 0 !important;
        max-width: 84vw;
        transform: translateX(-100%);      /* 기본은 화면 밖 */
        transition: transform 0.22s ease;
        z-index: 300;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
    }
    .sidebar.mobile-open { transform: none; }

    /* 960px 블록이 라벨을 숨겨 뒀지만(아이콘 전용 사이드바), 드로어는 넓으므로 되살린다.
       안 되살리면 폰에서 아이콘만 뜬 채 무슨 탭인지 알 수 없다.

       ⚠️ [Phase 101] `.sidebar.sidebar-collapsed`까지 셀렉터에 넣어야 한다. base의
       `.sidebar.sidebar-collapsed .sidebar-nav-btn span:not(.nav-icon){display:none}`(클래스 4개)이
       `.sidebar .sidebar-nav-btn span:not(.nav-icon)`(3개)를 **명시도로 이기기** 때문이다.
       PC에서 사이드바를 접은 뒤 창을 폰 폭으로 줄이면 드로어가 아이콘만 남았다 —
       이 블록 주석이 예고한 바로 그 실패를 실제로 재현한 것. 미디어쿼리 안이라 PC 무영향. */
    .sidebar .sidebar-section-title,
    .sidebar.sidebar-collapsed .sidebar-section-title,
    .sidebar .sidebar-nav-btn span:not(.nav-icon),
    .sidebar.sidebar-collapsed .sidebar-nav-btn span:not(.nav-icon),
    .sidebar .sidebar-platform-badge span,
    .sidebar.sidebar-collapsed .sidebar-platform-badge span:not(:first-child) { display: inline; }
    .sidebar .sidebar-platform-badge,
    .sidebar.sidebar-collapsed .sidebar-platform-badge { justify-content: flex-start; padding: 8px 12px; }
    /* 위 규칙이 span을 전부 `inline`으로 되살리는데, 배지는 min-width·text-align을 쓰므로
       inline이면 모양이 깨진다. 다만 실측상 `.sidebar-nav-btn`이 flex 컨테이너라 자식이
       블록화되어 지금은 어느 쪽이든 computed display가 `block`이다 — 즉 이 줄은 **보험**이다.
       버튼이 flex가 아니게 되는 날 조용히 깨지는 것을 막는다. `.nav-count`와 같은 취급. */
    .sidebar .nav-count,
    .sidebar .nav-step { display: inline-block; }
    /* 터치 타깃 — 손가락으로 누를 수 있는 최소 높이 */
    .sidebar .sidebar-nav-btn { min-height: 44px; }

    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        top: 56px; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.42);
        z-index: 299;
    }
    .mobile-nav-backdrop.show { display: block; }

    /* 헤더 가로 넘침 제거 — 실측 390px에서 .header-right가 132px 넘쳐 가로 스크롤이 생겼다.
       정보를 지우지 않고 '이름 → 아바타만', '여백 축소'로 줄인다. */
    #app-header { padding: 10px 12px; gap: 8px; }
    .header-left { gap: 8px; min-width: 0; }
    .header-right { gap: 6px; flex-shrink: 0; }
    /* [Phase 128] 실측 390px: "ContentsKit"에 91px가 필요한데 가용 85px라 잘렸다.
       LIVE/테스트 배지(개발자용 표시)를 접고 글자를 1px 줄여 온전히 넣는다. */
    #app-header .badge-live,
    #app-header .badge-mock { display: none; }
    .logo h1 { font-size: 15px; }
    .logo { min-width: 0; gap: 7px; }
    .btn-tutorial { padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }
    .account-menu-name { display: none; }   /* 아바타로 대체 — 계정 메뉴를 열면 이름이 나온다 */
    .account-menu-caret { display: none; }
    /* 계정 패널이 화면 밖으로 나가지 않게 */
    .account-menu-panel { right: 0; left: auto; max-width: 88vw; }
}

/* 아주 좁은 기기(≤380px) — 로고 글자까지 접는다. 아이콘은 남겨 홈으로 돌아갈 길을 유지. */
/* [Phase 128] 380 → 400px. 이 앱은 아주 좁으면 로고 글자를 숨기는 설계인데,
   그 경계가 390px(가장 흔한 폰 폭) 바로 아래라 **애매하게 잘린 채**("Contents…")
   보였다(실측 필요 85px vs 가용 81px). 경계를 올려 아이콘만 깔끔히 남긴다. */
@media (max-width: 400px) {
    .logo h1 { display: none; }
    .badge-live { display: none; }   /* '테스트 모드' 배지는 남긴다 — 그건 알아야 하는 정보 */
}

/* ═══════════════════════════════════════════════
   탭 네비게이션 숨김 (사이드바로 대체)
   ═══════════════════════════════════════════════ */
.tab-nav {
    display: none !important;
}

/* ═══════════════════════════════════════════════
   컨텍스트 배너 이전/다음 버튼 accent 색상 수정
   ═══════════════════════════════════════════════ */
.context-next-btn {
    background: var(--accent-soft);
    border-color: rgba(255, 0, 51, 0.3);
    color: var(--accent);
}

.context-next-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ─── 탭 패널 표시 ─── */
.tab-panel {
    display: none;
}
.tab-panel.active-panel {
    display: block !important;
    animation: fadeInUp 0.3s ease-out;
}

/* ═══════════════════════════════════════════════
   핫 비디오 — velocity / grade / engagement 배지
   ═══════════════════════════════════════════════ */

/* 🔥 velocity 배지 — 썸네일 좌하단 오버레이 */
.velocity-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: linear-gradient(135deg, #FF6B35, #FF0033);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* 등급 배지 — stat-chip 안에 인라인 (5단계 텍스트 대응) */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0.9;
}
.grade-excellent { background: none; color: #00b894; }
.grade-verygood  { background: none; color: #00cec9; }
.grade-average   { background: none; color: #f0a500; }
.grade-poor      { background: none; color: #e17055; }
.grade-verypoor  { background: none; color: #95a5a6; }
/* 기존 클래스 호환 유지 */
.grade-A { background: #00b894; color: white; }
.grade-B { background: #fdcb6e; color: #333; }
.grade-C { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); }

/* 참여율 배지 */
.engagement-badge {
    color: #a29bfe !important;
    font-weight: 600 !important;
}

/* 업로드 날짜 배지 */
.hot-upload-date {
    color: var(--text-muted) !important;
    font-size: 11px !important;
}

/* 뜨는 영상 — 정렬 바 (sticky) */
/* 수집 진행 바 — 실시간 진행 증거 (Phase 34.13) */
.hot-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.hot-progress-track {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 999px;
    overflow: hidden;
}
.hot-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.hot-progress-meta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 110px;
    text-align: right;
}
.hot-progress-meta.hot-progress-stale {
    color: #e03131;
    font-weight: 700;
}

#hot-sort-bar {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: var(--bg-card);
    margin: 0 -28px 12px;
    padding: 8px 28px;
    border-bottom: 1px solid var(--border);
}

/* 새 영상 알림 배너 — 스크롤 중에도 보이는 상단 중앙 플로팅 (Phase 34.12) */
.hot-new-banner {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}
.hot-new-banner > button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: var(--transition);
}
.hot-new-banner > button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.hot-new-banner .ico { width: 16px; height: 16px; }

.hot-sort-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.hot-sort-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.hot-sort-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sort-arrow {
    display: inline-block;
    margin-left: 2px;
    font-size: 11px;
}

/* 뜨는 영상 — 채널 대비·구독자 대비·노출도 지표 행 (Phase 99.1에서 라벨 개명) */
.hot-metrics-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.hot-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 2px;
    padding: 4px 2px;
    background: var(--bg-input);
    border-radius: 6px;
}
.hot-metric-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}
.hot-metric-grade {
    font-size: 12px;
    font-weight: 700;
}
/* 노출지수는 '노출도'와 헷갈리지 않도록 부가 지표로 톤다운 (Phase 65) */
.hot-metric-sub {
    opacity: 0.72;
}
/* [Phase 114] 등급 아래에 **근거가 되는 배수 숫자**를 함께 적는다.
   등급만 있던 시절엔 "저조"가 무엇을 기준으로 한 말인지 카드에서 알 방법이 없었다. */
.hot-metric-num {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}
/* 결과 헤더 "?" 옆 '지표 설명' 안내 라벨 (Phase 65) */
.metric-help-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 2px;
    vertical-align: middle;
}
/* 지표 팝오버는 영상 상세 모달(z-index:9999) 안에서도 열리므로 그 위에 떠야 함 (Phase 65) */
#metric-glossary-popover { z-index: 10000; }
.grade-great {
    color: #00b894 !important;
}
.grade-good {
    color: #fdcb6e !important;
}
.grade-dash {
    color: var(--text-muted) !important;
}

/* 뜨는 영상 + 영상 검색 타입 필터 버튼 */
.search-type-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hot-type-btn,
.hot-band-btn,
.hot-age-btn,
.hot-cat-btn,
.studio-filter-btn,
.search-type-btn,
.trend-video-type-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.hot-type-btn:hover,
.hot-band-btn:hover,
.hot-age-btn:hover,
.hot-cat-btn:hover,
.studio-filter-btn:hover,
.search-type-btn:hover,
.trend-video-type-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.hot-type-btn.active,
.hot-band-btn.active,
.hot-age-btn.active,
.hot-cat-btn.active,
.studio-filter-btn.active,
.search-type-btn.active,
.trend-video-type-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* 검색 결과 정렬 버튼 */
.search-sort-btn {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.search-sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.search-sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="light"] .search-sort-btn { background: #fff; border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .search-sort-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* 영상 카드 채널명 옆 구독자 수 (Phase 45.1) */
.vc-sub-count {
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-muted, #8b95a1);
    font-weight: 500;
}

/* 썸네일·제목 분석 버튼 (2모드) — 보라 배경엔 흰 글자(저대비 해소), 비활성은 명확한 회색 */
.btn-ai-visual {
    margin-left: 6px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    border-color: #5b21b6;
    color: #fff;
}
.btn-ai-visual:hover:not(:disabled) {
    background: linear-gradient(135deg, #6d28d9, #4c1d95);
    color: #fff;
}
.btn-ai-visual:disabled {
    opacity: 1;
    background: #eef0f3;
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}
.btn-ai-visual .spinner { border-top-color: #fff; }

/* 썸네일·제목 분석 결과 (가독성 우선) */
.vz-pattern-card {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--bg-card, #fff);
}
.vz-pattern-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vz-formula { font-size: 14px; font-weight: 700; color: var(--accent); }
.vz-why { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
.vz-examples { display: flex; flex-direction: column; gap: 3px; }
.vz-example { font-size: 12px; color: var(--text-primary); background: var(--bg-input,#f4f6f8); padding: 4px 8px; border-radius: 6px; }

.vz-thumb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vz-thumb-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card,#fff); }
.vz-thumb-label { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
.vz-thumb-val { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.vz-factor-list { margin: 0; padding-left: 18px; }
.vz-factor-list li { font-size: 13px; color: var(--text-primary); line-height: 1.7; }

.vz-checklist-section {
    background: var(--accent-soft, #eef4ff);
    border-radius: 12px;
    padding: 14px 16px;
}
.vz-checklist { list-style: none; margin: 0; padding: 0; }
.vz-checklist li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    line-height: 1.55; padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.vz-checklist li:last-child { border-bottom: none; }
.vz-check {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.vz-templates { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.vz-templates-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.vz-template {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    background: var(--bg-card,#fff); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 6px;
}
.vz-empty { font-size: 13px; color: var(--text-muted); }

/* AI 분석 도움말 ? 배지 + 팝오버 */
.ai-analyze-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.help-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-input, #fff);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
}
.help-badge:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.help-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: 80vw;
    padding: 12px 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    z-index: 50;
    text-align: left;
    white-space: normal;
    font-weight: 400;
}
.help-popover.show { display: block; }
.help-popover strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: 13px; }
.help-popover b { color: var(--accent); }
/* 용어 사전 본문 문단 (Phase 99.1) — 종전엔 \n\n이 무시돼 설명이 한 덩어리로 붙어 있었다 */
.help-popover .gl-p { display: block; }
.help-popover .gl-p + .gl-p { margin-top: 8px; }
.help-popover-step {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* 벤치마크 "채널 분석 중" — 빨간 그라데이션 천천히 깜빡임 (작업 중 인지) */
#benchmark-status.analyzing {
    color: #e03131;
    font-weight: 600;
    animation: benchmark-pulse 1.8s ease-in-out infinite;
}
#benchmark-status.analyzing .spinner {
    border-color: rgba(224, 49, 49, 0.25);
    border-top-color: #e03131;
}
@keyframes benchmark-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* 채널 대비 성과 배지 */
.yt-perf-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.yt-perf-badge.good   { background: #e6f7ee; color: #1a7f4b; }
.yt-perf-badge.normal { background: #fff3cd; color: #8a6100; }
.yt-perf-badge.caution{ background: #fde8e8; color: #c0392b; }
/* 배수를 못 구한 영상 — '성과 나쁨'과 구분되어야 한다 (Phase 98) */
.yt-perf-badge.na     { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }
/* 터진 영상 — 채널 평균 대비 N배 이상 (강조) */
.yt-perf-badge.viral {
    background: linear-gradient(135deg, #3182f6, #1b64da);
    color: #fff;
    box-shadow: 0 2px 6px rgba(49, 130, 246, 0.3);
}
.yt-perf-ratio        { font-size: 11px; color: var(--text-secondary); }

/* 쇼츠 영상 카드에 ⚡ 배지 */
.shorts-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255, 0, 51, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

/* 소규모 채널 급상승 🚀 배지 (Phase 25) */
.breakout-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #ff6b35, #f7c948);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    pointer-events: none;
    z-index: 2;
}

/* ═══ 온보딩 튜토리얼 모달 (Phase 37) ══════════════════════════ */
.ob-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ob-modal {
    position: relative;
    background: var(--bg-card, #fff);
    border-radius: 18px;
    max-width: 460px;
    width: 100%;
    padding: 36px 32px 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    animation: fadeInUp 0.3s ease-out;
}
.ob-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
}
.ob-close:hover { background: var(--bg-card-hover, #f3f4f6); color: var(--text-primary); }
.ob-close .ico { width: 20px; height: 20px; }
.ob-body { text-align: center; min-height: 188px; }
.ob-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 16px;
    background: var(--accent, #3182f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ob-icon .ico { width: 28px; height: 28px; }
.ob-modal .ob-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary, #191f28);
    margin: 0 0 12px;
    letter-spacing: -0.4px;
}
.ob-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-secondary, #4e5968);
    margin: 0;
}
.ob-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    gap: 12px;
}
.ob-dots { display: flex; gap: 7px; }
.ob-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border, #e5e8eb);
    transition: var(--transition, all 0.2s);
}
.ob-dot.active { background: var(--accent, #3182f6); width: 20px; border-radius: 4px; }
.ob-actions { display: flex; align-items: center; gap: 8px; }
.ob-skip {
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 10px;
}
.ob-skip:hover { color: var(--text-secondary); }
.ob-prev {
    background: none;
    border: 1px solid var(--border, #e5e8eb);
    color: var(--text-secondary, #4e5968);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
}
.ob-prev:hover { border-color: var(--accent); color: var(--accent); }
.ob-next {
    background: var(--accent, #3182f6);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 9px 20px;
    border-radius: 8px;
    transition: opacity 0.15s;
}
.ob-next:hover { opacity: 0.9; }
@media (max-width: 520px) {
    .ob-modal { padding: 30px 22px 20px; }
    .ob-footer { flex-direction: column-reverse; align-items: stretch; }
    .ob-actions { justify-content: space-between; }
    .ob-dots { justify-content: center; }
}

/* ═══ 영상 상세 팝업 (Phase 27) ══════════════════════════════ */
.video-detail-modal {
    position: relative;
    background: var(--bg-card, #fff);
    border-radius: 16px;
    max-width: 740px;
    margin: 0 auto;
    padding: 32px 28px 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vd-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted, #888);
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.vd-close-btn:hover { background: var(--bg-secondary, #f4f4f5); }
.vd-header { display: flex; gap: 18px; align-items: flex-start; }
.vd-thumb-wrap { position: relative; flex-shrink: 0; width: 200px; }
.vd-thumbnail { width: 200px; height: 112px; object-fit: cover; border-radius: 10px; display: block; }
.vd-duration-badge {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.82); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}
.vd-header-info { flex: 1; min-width: 0; }
.vd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.vd-tag { font-size: 11px; color: var(--accent, #5865f2); font-weight: 500; }
.vd-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; color: var(--text-primary, #111); word-break: keep-all; }
.vd-meta { font-size: 12px; color: var(--text-muted, #888); margin-bottom: 12px; }
.vd-sep { margin: 0 6px; }
.btn-vd-yt {
    display: inline-block; padding: 7px 16px;
    background: transparent; border: 1.5px solid var(--accent, #5865f2);
    color: var(--accent, #5865f2); border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.btn-vd-yt:hover { background: var(--accent, #5865f2); color: #fff; }
.vd-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-card { background: var(--bg-secondary, #f8f8fa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 14px 16px; }
.vd-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #222); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.vd-description-text { font-size: 12px; color: var(--text-secondary, #555); line-height: 1.6; max-height: 90px; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.vd-description-text.expanded { max-height: none; }
.vd-more-btn { background: none; border: none; font-size: 12px; color: var(--accent, #5865f2); cursor: pointer; padding: 4px 0 0; font-weight: 600; }
.vd-comment-wrap { display: flex; flex-direction: column; gap: 8px; }
.vd-comment-author { display: flex; align-items: center; gap: 8px; }
.vd-comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vd-comment-name { font-size: 12px; font-weight: 600; color: var(--text-primary, #222); }
.vd-comment-text { font-size: 12px; color: var(--text-secondary, #555); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vd-comment-likes { font-size: 11px; color: var(--text-muted, #999); }
.vd-no-comment { font-size: 12px; color: var(--text-muted, #aaa); text-align: center; padding: 16px 0; }
.vd-metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vd-metric-card { background: var(--bg-secondary, #f8f8fa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 14px 12px; text-align: center; }
.vd-metric-label { font-size: 11px; color: var(--text-muted, #999); margin-bottom: 6px; font-weight: 500; }
.vd-metric-value { font-size: 20px; font-weight: 800; color: var(--text-primary, #111); line-height: 1.2; margin-bottom: 4px; }
.vd-metric-sub { font-size: 11px; color: var(--text-muted, #888); }
.vd-metric-up { color: #22c55e; }
.vd-growth-section { background: var(--bg-secondary, #f8f8fa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 16px; }
.vd-estimate-badge { font-size: 10px; background: #fef9c3; color: #92400e; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.vd-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.vd-card-title-row .vd-card-title { margin-bottom: 0; }

/* 회원 행 정보 래퍼 + 오프닝→본문 다음단계 (Phase 72 복구) */
.member-info { min-width: 0; }
.og-next-step { margin-top: 22px; text-align: center; }
.og-next-btn { width: 100%; max-width: 420px; justify-content: center; }
.og-next-hint { font-size: 0.82rem; color: var(--text-muted); margin: 8px 0 0; }
.vd-growth-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; gap: 12px; }
.vd-growth-icon { font-size: 36px; }
.btn-vd-graph { background: var(--accent, #5865f2); color: #fff; border: none; border-radius: 24px; padding: 10px 28px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
.btn-vd-graph:hover { opacity: 0.88; }
.btn-vd-graph:disabled { opacity: 0.5; cursor: not-allowed; }
.vd-estimate-note { font-size: 11px; color: var(--text-muted, #aaa); margin: 8px 0 0; text-align: center; }
.vd-tracking-status { font-size: 11px; color: var(--brand, #2563eb); margin: 4px 0 0; text-align: center; }

/* 초반 30초 원고 (Phase 127) */
.vd-script-section { background: var(--bg-secondary, #f8f8fa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.vd-script-body { max-height: 280px; overflow-y: auto; margin-top: 4px; }
.vd-script-line { display: flex; gap: 10px; padding: 6px 4px; font-size: 12.5px; line-height: 1.55; border-bottom: 1px solid var(--border, #e5e7eb); }
.vd-script-line:last-child { border-bottom: none; }
.vd-script-time { flex-shrink: 0; width: 38px; color: var(--text-muted, #aaa); font-variant-numeric: tabular-nums; }
.vd-script-text { color: var(--text-secondary, #555); }
.vd-script-loading, .vd-script-empty { font-size: 12.5px; color: var(--text-muted, #aaa); text-align: center; padding: 16px 0; }
.vd-script-note { font-size: 11px; color: var(--text-muted, #aaa); margin-bottom: 8px; }
.vd-channel-section { display: flex; align-items: flex-start; gap: 14px; background: var(--bg-secondary, #f8f8fa); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 16px; }

/* 라이트 테마: --bg-secondary가 모달 배경과 같은 흰색 → 카드 배경을 옅은 회색으로 분리 */
[data-theme="light"] .vd-card,
[data-theme="light"] .vd-metric-card,
[data-theme="light"] .vd-growth-section,
[data-theme="light"] .vd-script-section,
[data-theme="light"] .vd-channel-section {
    background: var(--bg-card-hover, #f9fafb);
}
.vd-ch-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border, #e5e7eb); }
.vd-ch-info { flex: 1; }
.vd-ch-name { font-size: 15px; font-weight: 700; color: var(--text-primary, #111); margin-bottom: 8px; }
.vd-ch-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted, #888); margin-bottom: 4px; }
.vd-ch-stats strong { color: var(--text-primary, #222); font-weight: 700; }
.grade-Excellent { color: #7c3aed; }
.grade-VeryGood  { color: #2563eb; }
.grade-Average   { color: #d97706; }
.grade-Poor      { color: #dc2626; }
.grade-VeryPoor  { color: #9ca3af; }
@media (max-width: 600px) {
    .video-detail-modal { padding: 20px 14px; }
    .vd-header { flex-direction: column; }
    .vd-thumb-wrap { width: 100%; }
    .vd-thumbnail { width: 100%; height: auto; }
    .vd-info-row { grid-template-columns: 1fr; }
    .vd-metrics-row { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════════════════════
   디자인 시스템 v2 — 휴먼 SaaS 스타일 (Phase 33)
   SVG 아이콘 공용 클래스 + 라이트 테마 폴리시
   ═══════════════════════════════════════════════════════ */

/* ─── SVG 아이콘 공용 ─── */
.ico {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

.btn-icon .ico {
    width: 18px;
    height: 18px;
    margin: 0 auto;
}

.nav-icon .ico {
    width: 17px;
    height: 17px;
}

.goal-icon .ico,
.guide-card-icon .ico {
    width: 20px;
    height: 20px;
}

.sidebar-platform-badge .ico {
    width: 14px;
    height: 14px;
}

.guide-toggle-icon .ico {
    width: 16px;
    height: 16px;
}

/* 과한 모션 제거 — 사람이 만든 차분한 인터랙션 */
.btn-primary::before {
    display: none;
}

.btn-primary {
    font-weight: 600;
    letter-spacing: -0.2px;
}

.btn-primary:hover {
    transform: none;
    background: var(--accent-hover);
    box-shadow: none;
}

.badge-live {
    animation: none;
}

.glass-card {
    animation: none;
}

/* ─── 라이트 테마 폴리시 ─── */
body[data-theme="light"] {
    background-image: none;
}

/* 플랫폼 배지 — 라이트에서는 차분한 아웃라인 스타일 */
[data-theme="light"] .sidebar-platform-badge {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 500;
}

[data-theme="light"] .sidebar-platform-badge:hover {
    border-color: #d8dde2;
    background: #f9fafb;
    color: var(--text-primary);
}

[data-theme="light"] .sidebar-platform-badge.badge-yt span:first-child {
    color: #e52d27;
}

[data-theme="light"] .sidebar-platform-badge.badge-ig span:first-child {
    color: #e1306c;
}

/* 플랫폼 배지 텍스트 라벨 — 라이트 테마에서 확실히 보이도록 명시 */
[data-theme="light"] .sidebar-platform-badge .platform-badge-label {
    color: var(--text-primary);
    font-weight: 600;
}

[data-theme="light"] .context-next-btn {
    border-color: rgba(49, 130, 246, 0.35);
}

[data-theme="light"] .context-next-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

[data-theme="light"] #app-header {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="light"] .sidebar {
    background: var(--bg-sidebar);
}

[data-theme="light"] .sidebar-nav-btn {
    color: var(--text-secondary);
    font-weight: 500;
}

[data-theme="light"] .sidebar-nav-btn:hover {
    background: #f2f4f6;
    color: var(--text-primary);
}

[data-theme="light"] .sidebar-nav-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="light"] .sidebar-section-title {
    color: var(--text-muted);
}

[data-theme="light"] .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-card);
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-theme="light"] .badge-mock {
    background: #fff7e0;
    color: #b25e00;
    border: 1px solid #f5e3b3;
}

[data-theme="light"] .badge-live {
    background: #ffeef0;
    color: #d6293e;
    border: 1px solid #f7ccd2;
}

[data-theme="light"] .btn-secondary {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

[data-theme="light"] .btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #ffffff;
}

[data-theme="light"] .period-btn,
[data-theme="light"] .hot-type-btn,
[data-theme="light"] .hot-band-btn,
[data-theme="light"] .hot-age-btn,
[data-theme="light"] .hot-cat-btn,
[data-theme="light"] .studio-filter-btn,
[data-theme="light"] .hot-sort-btn,
[data-theme="light"] .viral-period-btn,
[data-theme="light"] .ca-period-btn,
[data-theme="light"] .viral-mode-btn,
[data-theme="light"] .search-type-btn,
[data-theme="light"] .trend-video-type-btn {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

[data-theme="light"] .period-btn.active,
[data-theme="light"] .hot-type-btn.active,
[data-theme="light"] .hot-band-btn.active,
[data-theme="light"] .hot-age-btn.active,
[data-theme="light"] .hot-cat-btn.active,
[data-theme="light"] .studio-filter-btn.active,
[data-theme="light"] .hot-sort-btn.active,
[data-theme="light"] .viral-period-btn.active,
[data-theme="light"] .ca-period-btn.active,
[data-theme="light"] .viral-mode-btn.active,
[data-theme="light"] .search-type-btn.active,
[data-theme="light"] .trend-video-type-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="light"] .section-title {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.3px;
}

[data-theme="light"] .video-card {
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
}

[data-theme="light"] .video-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: #d8dde2;
}

[data-theme="light"] .count-badge {
    background: var(--accent-soft);
    color: var(--accent);
}

[data-theme="light"] #app-footer {
    color: var(--text-muted);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #d1d6db;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: transparent;
}

/* ═══ 퍼널 진단 도구 (Phase 54, 명칭 변경 Phase 93 — 구 "매출 퍼널 시트") ═══ */
.funnel-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.funnel-section:first-of-type { border-top: none; margin-top: 16px; padding-top: 0; }

.funnel-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.funnel-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -6px 0 12px;
    line-height: 1.6;
}

.funnel-goal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}
@media (max-width: 900px) { .funnel-goal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .funnel-goal-grid { grid-template-columns: 1fr; } }

/* 퍼널 다이어그램 — 위→아래로 좁아지는 깔때기 */
.funnel-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.funnel-step {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    text-align: center;
}
.funnel-step-last {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.funnel-step-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.funnel-step-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.funnel-step-last .funnel-step-value { color: var(--accent); }
.funnel-step-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.funnel-rate-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.funnel-rate-badge {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 10px;
    border-radius: 20px;
}
.funnel-rate-owner {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.funnel-sensitivity {
    margin-top: 14px;
    padding: 12px 16px;
    background: rgba(0, 200, 150, 0.07);
    border: 1px solid rgba(0, 200, 150, 0.25);
    border-radius: var(--radius-md);
    font-size: 0.84rem;
    color: var(--text-primary);
    line-height: 1.7;
}
.funnel-sensitivity:empty { display: none; }
.funnel-sensitivity .ico { vertical-align: -2px; margin-right: 4px; color: var(--success); }

/* 실적 기록 폼 */
.funnel-record-form {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, 1fr) auto;
    gap: 8px;
    margin-bottom: 14px;
}
@media (max-width: 900px) { .funnel-record-form { grid-template-columns: repeat(3, 1fr); } }
.funnel-record-form input {
    padding: 9px 10px;
    font-size: 0.84rem;
}
.funnel-add-btn {
    padding: 9px 18px;
    font-size: 0.84rem;
    white-space: nowrap;
}

/* 실적 테이블 */
.funnel-table-wrap { overflow-x: auto; }
.funnel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.funnel-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.funnel-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
}
.funnel-label-cell { font-weight: 600; }
.funnel-ok   { color: var(--success); font-weight: 700; }
.funnel-warn { color: var(--warning); font-weight: 700; }
.funnel-bad  { color: var(--danger);  font-weight: 700; }
.funnel-na   { color: var(--text-muted); font-size: 0.78rem; }
.funnel-empty-row { text-align: center; color: var(--text-muted); padding: 20px 0 !important; }

.funnel-del-btn {
    padding: 4px 10px;
    font-size: 0.74rem;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.funnel-del-btn:hover { border-color: var(--danger); color: var(--danger); }

/* 병목 진단 카드 */
.funnel-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
    background: var(--bg-input);
    border-radius: var(--radius-md);
}
.funnel-diag-card {
    padding: 16px 20px;
    background: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
}
.funnel-diag-good {
    background: rgba(0, 200, 150, 0.06);
    border-color: rgba(0, 200, 150, 0.3);
    border-left-color: var(--success);
}
.funnel-diag-head {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.funnel-diag-target { font-weight: 500; color: var(--text-muted); font-size: 0.8rem; }
.funnel-diag-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.funnel-diag-owner {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.funnel-diag-goto {
    margin-top: 12px;
    padding: 8px 18px;
    font-size: 0.84rem;
}

/* ═══ Phase 55 — 용어 팝오버·목표-실적 통합·증감·수정·요약 ═══ */

/* "?" 배지를 라벨/제목 안에서 자연스럽게 정렬 (기존 .help-badge 재사용, 위치만 보정) — 퍼널 패널 한정 */
#funnel-panel .funnel-section-title .help-badge,
#funnel-panel .form-group label .help-badge {
    margin-left: 4px;
    vertical-align: middle;
}
#funnel-panel .form-group label {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 목표-실적 통합 서브라인 */
.funnel-step-actual {
    display: block;
    width: 100%;
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 2px;
}
.funnel-step-actual.funnel-ok   { color: var(--success); }
.funnel-step-actual.funnel-warn { color: var(--warning); }
.funnel-step-actual.funnel-bad  { color: var(--danger); }

/* 증감 배지 */
.funnel-delta {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}
.funnel-delta-up   { color: var(--success); }
.funnel-delta-down { color: var(--danger); }
.funnel-delta-flat { color: var(--text-muted); font-weight: 500; }

/* 행 액션(수정/삭제) */
.funnel-row-actions { display: flex; gap: 6px; }
.funnel-edit-btn {
    padding: 4px 10px;
    font-size: 0.74rem;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.funnel-edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 수정 모드 표시줄 */
.funnel-form-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}
.funnel-cancel-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.funnel-cancel-link:hover { color: var(--text-primary); }

/* 누적 요약 카드 */
.funnel-summary-card {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.funnel-summary-card:empty { display: none; margin-bottom: 0; }
@media (max-width: 900px) { .funnel-summary-card { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .funnel-summary-card { grid-template-columns: repeat(2, 1fr); } }
.funnel-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.funnel-summary-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.funnel-summary-value { font-size: 0.98rem; color: var(--text-primary); font-weight: 800; }

/* ═══ 퍼널 자동 계산 — 내 채널 연결 (Phase 134) ═══
   토큰만 쓴다(하드코딩 색상 금지). 라이트/다크 모두 토큰이 바뀌면 함께 따라온다. */
.funnel-auto-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.funnel-sub-title {
    margin: 18px 0 6px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
}

.funnel-connect-card { margin-bottom: 8px; }
.funnel-connect-empty,
.funnel-connect-ok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.funnel-connect-ok { border-left: 3px solid var(--success); }
.funnel-connect-warn { border-left-color: var(--danger); }
.funnel-connect-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;               /* 넘침 방지 — 그리드/플렉스 아이템 기본 min-width:auto (Phase 128) */
    flex: 1 1 320px;
}
.funnel-connect-text b { font-size: 0.92rem; color: var(--text-primary); }
.funnel-connect-text span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.funnel-connect-err { color: var(--danger) !important; font-weight: 700; }
.funnel-connect-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 모달이 아니라 넓은 탭 안이라 폭 100%가 그대로 새면 버튼이 1000px가 된다 (Phase 130) */
.funnel-connect-btn { width: auto !important; display: inline-block; text-decoration: none; }

.funnel-pair-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.funnel-pair-form .funnel-select,
.funnel-pair-form input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
}
.funnel-pair-form .btn-primary { width: auto !important; flex: 0 0 auto; padding: 9px 18px; }

.funnel-pair-list { display: flex; flex-direction: column; gap: 6px; }
.funnel-pair-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}
.funnel-pair-label { font-weight: 800; color: var(--text-primary); flex-shrink: 0; }
.funnel-pair-flow { color: var(--text-muted); flex: 1 1 auto; min-width: 0; }
.funnel-pair-arrow { color: var(--accent); font-weight: 800; margin: 0 4px; }

/* 자동 행 — 유튜브에서 온 줄임을 눈으로 구분할 수 있어야 한다 */
.funnel-auto-row { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.funnel-period { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }
.funnel-adj { font-size: 0.66rem; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
.funnel-inline-input {
    width: 72px;
    padding: 4px 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-family: inherit;
}
.funnel-inline-input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 600px) {
    .funnel-connect-empty, .funnel-connect-ok { align-items: flex-start; }
    .funnel-connect-actions { width: 100%; }
    .funnel-pair-item { flex-wrap: wrap; }
}

/* 후킹 제목 배지 (Phase 96-E) — 규칙 기반 '제목 패턴 추정'임을 툴팁으로 정직 표기 */
.hook-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

/* 분야(카테고리) 칩 — 개수 배지 (Phase 97-P2) */
.hot-cat-btn .hot-cat-n {
    opacity: 0.65;
    font-weight: 500;
    margin-left: 2px;
}
/* 카드의 분야 라벨 — 값만 던지지 않도록 title로 무엇인지 밝힌다 */
.stat-chip.hot-cat-chip {
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: transparent;
}


/* ═══ 제목 Develop (Phase 121) ═══════════════════════════════════
   터진 제목의 구조를 내 주제로 이식하는 모달. 상세 팝업(.vd-*)과 같은 톤을 쓰고
   색은 전부 토큰으로 — 하드코딩 색상 금지(docs/ui-conventions.md). 이모지 미사용. */
.vd-action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-vd-develop {
    display: inline-block; padding: 7px 16px; cursor: pointer;
    background: var(--accent, #FF0033); border: 1.5px solid var(--accent, #FF0033);
    color: #fff; border-radius: 8px; font-size: 13px; font-weight: 700;
    transition: background 0.15s, opacity 0.15s;
}
.btn-vd-develop:hover { background: var(--accent-hover, #ff1a4a); }

/* [Phase 130] 모달(#td-overlay/.td-modal) → 보관함 탭 안의 작업 영역.
   사용자 요청: "팝업창으로 띄우지 말고 보관함 같은 것처럼". 화면을 덮지 않으므로
   결과와 아래 목록이 한 흐름으로 읽힌다. 왼쪽 강조선으로 '지금 만드는 중'을 표시한다. */
.td-workspace {
    position: relative;
    margin-bottom: 22px;
    padding: 22px 22px 18px;
    background: var(--bg-secondary, #f8f8fa);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--accent, #5865f2);
    border-radius: 12px;
}
.td-head { margin-bottom: 18px; }
.td-title { font-size: 19px; font-weight: 800; color: var(--text-primary, #222); margin: 0 0 6px; }
.td-sub { font-size: 12.5px; color: var(--text-secondary, #555); line-height: 1.6; margin: 0; }

.td-label {
    font-size: 12.5px; font-weight: 700; color: var(--text-primary, #222);
    margin: 18px 0 8px; display: flex; align-items: center; gap: 8px;
}
.td-label-hint { font-size: 11px; font-weight: 500; color: var(--text-muted, #888); }

.td-src-list { display: flex; flex-direction: column; gap: 8px; }
.td-src-row {
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    padding: 11px 13px; border: 1px solid var(--border, #e5e7eb); border-radius: 9px;
    background: var(--bg-secondary, #f8f8fa);
}
.td-src-row.disabled { opacity: 0.55; cursor: not-allowed; }
.td-src-row input { margin-top: 3px; flex-shrink: 0; }
.td-src-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-src-name { font-size: 11.5px; font-weight: 700; color: var(--text-muted, #888); }
.td-src-text { font-size: 13px; color: var(--text-primary, #222); line-height: 1.5; word-break: break-word; }

.td-chip-box { display: flex; flex-direction: column; gap: 10px; }
.td-chip-group-label { font-size: 11px; font-weight: 700; color: var(--text-muted, #888); margin-bottom: 5px; }
.td-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.td-chip {
    padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px;
    border: 1px solid var(--border, #e5e7eb); background: transparent;
    color: var(--text-secondary, #555); transition: all 0.14s;
}
.td-chip:hover { border-color: var(--accent, #FF0033); color: var(--accent, #FF0033); }
.td-chip.active {
    background: var(--accent, #FF0033); border-color: var(--accent, #FF0033);
    color: #fff; font-weight: 700;
}
.td-chip-empty {
    font-size: 12px; color: var(--text-muted, #888); line-height: 1.6;
    padding: 12px 14px; border: 1px dashed var(--border, #e5e7eb); border-radius: 9px;
}

.td-add-row { display: flex; gap: 8px; margin-top: 10px; }
.td-input {
    flex: 1; padding: 9px 12px; border-radius: 8px; font-size: 13px;
    border: 1px solid var(--border, #e5e7eb); background: var(--bg-input, #fff);
    color: var(--text-primary, #222);
}
.td-selected {
    margin-top: 10px; font-size: 12.5px; color: var(--text-secondary, #555);
    padding: 9px 12px; border-radius: 8px; background: var(--accent-soft, rgba(255, 0, 51, 0.08));
}
.td-selected b { color: var(--accent, #FF0033); }
.td-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
/* [Phase 130] 모달(720px)에서 탭(전체 폭)으로 옮기면서 주 버튼이 1028px까지 늘어났다
   — `.btn-primary`가 폭 100%를 쓰기 때문. 두 버튼을 나란히 오른쪽에 둔다. */
.td-actions .btn-primary,
.td-actions .btn-secondary { width: auto; min-width: 120px; flex: 0 0 auto; }
@media (max-width: 600px) {
    /* 좁은 폭에서는 손가락으로 누르기 쉽게 가로로 꽉 채운다 */
    .td-actions { flex-direction: column-reverse; }
    .td-actions .btn-primary,
    .td-actions .btn-secondary { width: 100%; }
}

/* 진행 — 진행률을 아는 척하지 않는다. 단계만 순차로 보여준다(Phase 101.1). */
.td-steps { display: flex; flex-direction: column; gap: 9px; padding: 12px 4px; }
.td-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted, #888); }
.td-step .td-step-mark {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--border, #d5d5dd);
}
.td-step.now { color: var(--text-primary, #222); font-weight: 700; }
.td-step.now .td-step-mark { background: var(--accent, #FF0033); }
.td-step.done { color: var(--text-secondary, #555); }
.td-step.done .td-step-mark { background: var(--success, #00c896); }
.td-progress-note { font-size: 11.5px; color: var(--text-muted, #888); text-align: center; margin-top: 12px; }

/* 결과 */
.td-res-head {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: 14px;
}
.td-res-src { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-res-src-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted, #888); }
.td-res-src-text { font-size: 13px; color: var(--text-primary, #222); word-break: break-word; }
.td-res-topic {
    font-size: 12.5px; font-weight: 700; color: var(--accent, #FF0033);
    padding: 5px 12px; border-radius: 999px; background: var(--accent-soft, rgba(255, 0, 51, 0.1));
    white-space: nowrap;
}
.td-structure {
    font-size: 12.5px; color: var(--text-secondary, #555); line-height: 1.65;
    padding: 12px 14px; border-radius: 9px; background: var(--bg-secondary, #f8f8fa);
    margin-bottom: 14px;
}
.td-structure-label { font-size: 11px; font-weight: 700; color: var(--text-muted, #888); margin-bottom: 5px; }

.td-list { display: flex; flex-direction: column; gap: 9px; }
.td-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
    padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
    background: var(--bg-secondary, #f8f8fa);
}
.td-row-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.td-row-text { font-size: 14px; font-weight: 700; color: var(--text-primary, #222); line-height: 1.45; word-break: break-word; }
.td-row-strategy {
    align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft, rgba(255, 0, 51, 0.1)); color: var(--accent, #FF0033);
}
.td-row-why { font-size: 11.5px; color: var(--text-muted, #888); line-height: 1.55; }
.td-row-btns { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.td-mini {
    padding: 5px 9px; font-size: 11.5px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--border, #e5e7eb); background: transparent; color: var(--text-secondary, #555);
}
.td-mini:hover { border-color: var(--accent, #FF0033); color: var(--accent, #FF0033); }
.td-mini.on { color: var(--warning, #f5a623); border-color: var(--warning, #f5a623); }
.td-next { padding: 6px 12px !important; font-size: 12px !important; }
.td-res-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 600px) {
    .td-workspace { padding: 18px 14px 16px; }
    .td-row { flex-direction: column; align-items: stretch; }
    .td-row-btns { justify-content: flex-end; }
    .td-res-head { flex-direction: column; align-items: flex-start; }
}

/* [Phase 121.1] 재료 문구 2개 동시 사용 안내 */
.td-src-note {
    font-size: 11.5px; color: var(--text-muted, #888); line-height: 1.55; margin-top: 8px;
}
.td-src-warn {
    font-size: 12px; color: var(--accent, #FF0033); margin-top: 8px; font-weight: 600;
}
.td-res-src-line { display: block; font-size: 12.5px; color: var(--text-primary, #222); line-height: 1.55; word-break: break-word; }
.td-res-src-line b {
    display: inline-block; min-width: 42px; font-size: 10.5px; font-weight: 700;
    color: var(--text-muted, #888);
}


/* ═══ 제목·도입부 보관함 (Phase 122) ═══ */
.aidev-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.aidev-filters { display: flex; gap: 6px; }
.aidev-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.aidev-loading { font-size: 13px; color: var(--text-muted, #888); padding: 18px 4px; }

.aidev-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 13px 15px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
    background: var(--bg-secondary, #f8f8fa);
}
.aidev-row-main { display: flex; align-items: center; gap: 8px; min-width: 220px; flex: 1; flex-wrap: wrap; }
.aidev-row-text { font-size: 14px; font-weight: 700; color: var(--text-primary, #222); word-break: break-word; }
.aidev-row-topic {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-soft, rgba(255,0,51,.1)); color: var(--accent, #FF0033);
}
.aidev-fav-mark { color: var(--warning, #f5a623); font-size: 14px; }
.aidev-row-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aidev-date { font-size: 11px; color: var(--text-muted, #888); white-space: nowrap; }
.aidev-mini { padding: 6px 12px !important; font-size: 12px !important; }

.aidev-card {
    border: 1.5px solid var(--accent, #FF0033); border-radius: 12px; padding: 16px 18px;
    background: var(--bg-card, #fff);
}
.aidev-card-sec { margin-bottom: 14px; }
.aidev-card-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted, #888); margin-bottom: 6px; }
.aidev-title-box {
    font-size: 14.5px; font-weight: 700; color: var(--text-primary, #222); line-height: 1.5;
    padding: 11px 13px; border-radius: 8px; background: var(--bg-secondary, #f8f8fa);
    border: 1px solid var(--border, #e5e7eb);
}
.aidev-src { font-size: 11.5px; color: var(--text-muted, #888); margin-top: 6px; }
.aidev-src a { color: var(--accent, #FF0033); }
.aidev-opening {
    width: 100%; font-size: 13.5px; line-height: 1.75; color: var(--text-primary, #222);
    padding: 13px 15px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f8f8fa); resize: vertical; font-family: inherit;
}
.aidev-opening-empty, .aidev-opening-wait {
    font-size: 12.5px; color: var(--text-muted, #888); line-height: 1.6;
    padding: 16px; border: 1px dashed var(--border, #e5e7eb); border-radius: 9px;
}
.aidev-blanks {
    margin-top: 10px; padding: 11px 13px; border-radius: 8px; font-size: 12px;
    background: var(--accent-soft, rgba(255,0,51,.08)); color: var(--text-secondary, #555);
}
.aidev-blanks b { color: var(--accent, #FF0033); display: block; margin-bottom: 5px; font-size: 11.5px; }
.aidev-blanks ul { margin: 0 0 6px; padding-left: 18px; }
.aidev-blanks li { line-height: 1.6; }
.aidev-blanks-why { font-size: 11px; color: var(--text-muted, #888); line-height: 1.55; }
.aidev-elements { margin-top: 10px; font-size: 11.5px; color: var(--text-secondary, #555); }
.aidev-elements b { display: block; font-size: 11px; color: var(--text-muted, #888); margin-bottom: 5px; }
.aidev-elements div { line-height: 1.6; margin-bottom: 3px; }
.aidev-elements span {
    display: inline-block; min-width: 40px; font-weight: 700; font-size: 10.5px;
    color: var(--accent, #FF0033);
}
.aidev-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aidev-card-btns { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.aidev-run { padding: 7px 14px !important; font-size: 12.5px !important; }

@media (max-width: 600px) {
    .aidev-row { flex-direction: column; align-items: stretch; }
    .aidev-row-side { justify-content: flex-end; }
    .aidev-card-foot { flex-direction: column; align-items: stretch; }
}

/* [Phase 122.1] 도입부 따오기 — 제목 따오기와 같은 자리의 보조 버튼(외곽선형) */
.btn-vd-develop-alt {
    background: transparent; color: var(--accent, #FF0033);
}
.btn-vd-develop-alt:hover { background: var(--accent-soft, rgba(255,0,51,.12)); }

/* [Phase 122.3] 보관함 '더 보기' — 조용히 잘리는 목록을 만들지 않는다 */
.aidev-more { width: 100%; margin-top: 4px; padding: 11px !important; font-size: 12.5px !important; }

/* ─── 썸네일 문구 따오기 결과 (Phase 131) ─── */
.tc-refs {
    margin: 14px 0 18px; padding: 12px 14px;
    background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
}
.tc-refs-head { font-size: 12px; font-weight: 700; color: var(--text-primary, #222); margin-bottom: 8px; }
.tc-refs-hint { font-weight: 500; color: var(--text-muted, #888); }
.tc-ref-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tc-ref-thumb {
    width: 96px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border, #e5e7eb); background: var(--bg-secondary, #f8f8fa);
}
/* [Phase 132] `refs`는 "원본 문구:" 줄들과 "구조:" 문단으로 오는데, 개행을 살리지 않아
   한 덩어리로 뭉쳐 읽을 수 없었다. escape는 그대로 두고 표시만 개행을 살린다
   (Phase 99.1: 사용자에게 보이는 텍스트는 렌더러를 먼저 확인할 것). */
.tc-refs-text {
    font-size: 12px; color: var(--text-secondary, #555); line-height: 1.6; margin: 0;
    white-space: pre-line;
    max-height: 190px; overflow-y: auto;
}
.tc-row { align-items: flex-start; }
/* 덩어리(/)를 실제 썸네일처럼 줄로 나눠 보여준다 — 그대로 옮겨 적으면 된다 */
.tc-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.tc-line { font-size: 16px; font-weight: 800; color: var(--text-primary, #222); line-height: 1.3; }
.tc-line:first-child { font-size: 13px; font-weight: 700; color: var(--text-secondary, #555); }
.tc-layout {
    font-size: 11.5px; color: var(--text-secondary, #555); line-height: 1.55; margin-top: 4px;
    padding: 6px 8px; background: var(--bg-secondary, #f8f8fa); border-radius: 6px;
}
.tc-layout b { color: var(--text-muted, #888); font-weight: 700; margin-right: 4px; }

/* 보관함 카드 안의 썸네일 문구 — 결과 화면보다 조금 작게 (Phase 131) */
.tc-row-sm { padding: 8px 10px; margin-bottom: 6px; }
.tc-row-sm .tc-line { font-size: 14px; }
.tc-row-sm .tc-line:first-child { font-size: 12px; }
.aidev-card-hint { font-weight: 500; color: var(--text-muted, #888); font-size: 11px; margin-left: 4px; }

/* 참고 썸네일 — 오마주 대상과 보조 참고를 구분 (Phase 132) */
.tc-ref-item { position: relative; display: inline-block; }
.tc-ref-badge {
    position: absolute; left: 4px; bottom: 4px;
    padding: 1px 5px; border-radius: 3px;
    background: rgba(0,0,0,0.72); color: #fff;
    font-size: 9.5px; font-weight: 700; letter-spacing: -0.2px;
}
.tc-ref-target .tc-ref-thumb { border: 2px solid var(--accent, #5865f2); }
.tc-ref-target .tc-ref-badge { background: var(--accent, #5865f2); }

/* ═══ 게스트 모드 — 비로그인 공개 (Phase 136) ═══ */
.guest-login-btn {
    display: inline-flex; align-items: center; padding: 7px 16px;
    background: var(--accent); color: #fff; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.guest-login-btn:hover { filter: brightness(1.08); }
.guest-login-pulse { animation: guestPulse .6s ease-in-out 2; }
@keyframes guestPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* 잠긴 탭 — 숨기지 않고 '준비 중'을 붙인다. 무엇이 더 있는지 보여야 로그인할 이유가 생긴다 */
.sidebar-nav-item.guest-locked .sidebar-nav-btn { opacity: .45; cursor: not-allowed; }
.sidebar-nav-item.guest-locked .sidebar-nav-btn::after {
    content: '준비 중'; margin-left: auto; font-size: 0.62rem; font-weight: 800;
    color: var(--text-muted); background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; flex-shrink: 0;
}
.sidebar.collapsed .sidebar-nav-item.guest-locked .sidebar-nav-btn::after { display: none; }

.guest-banner {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: var(--radius-md); padding: 13px 16px; margin-bottom: 16px;
    font-size: 0.84rem; line-height: 1.65; color: var(--text-primary);
}
.guest-banner a { color: var(--accent); font-weight: 800; text-decoration: none; }
.guest-banner a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .guest-login-btn { padding: 6px 12px; font-size: 0.78rem; }
    .guest-banner { font-size: 0.8rem; padding: 11px 13px; }
}