/* ==========================================================================
   StanThat - Modern Dark Theme & Glassmorphic Responsive Stylesheet
   ========================================================================== */

:root {
    --bg-main: #0f0f13;
    --bg-secondary: #18181f;
    --bg-card: #20202b;
    --bg-card-hover: #2a2a38;
    --bg-glass: rgba(28, 28, 38, 0.75);
    
    --accent-red: #ff2a55;
    --accent-red-glow: rgba(255, 42, 85, 0.35);
    --accent-purple: #8a2be2;
    
    --text-primary: #f1f1f5;
    --text-secondary: #a0a0b2;
    --text-muted: #6c6c80;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);
    
    --sidebar-width: 280px;
    --header-height: 70px;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 25px var(--accent-red-glow);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', 'Pretendard', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select {
    font-family: inherit;
}

/* Glassmorphism Panel */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #333344;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-red);
}

/* ==========================================================================
   Login Landing Page
   ========================================================================== */
.login-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

.login-background-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 42, 85, 0.25) 0%, rgba(138, 43, 226, 0.15) 50%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.login-card-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
}

.login-card {
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.brand-logo-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.logo-pulse {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    box-shadow: var(--shadow-glow);
    margin-bottom: 12px;
    animation: pulse 3s infinite alternate ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 42, 85, 0.4); }
    100% { transform: scale(1.06); box-shadow: 0 0 35px rgba(255, 42, 85, 0.7); }
}

.login-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-title span {
    color: var(--accent-red);
}

.login-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 28px;
    word-break: keep-all;
}

/* Alert Boxes */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    text-align: left;
    margin-bottom: 24px;
    line-height: 1.4;
}

.alert-info {
    background: rgba(66, 133, 244, 0.12);
    border: 1px solid rgba(66, 133, 244, 0.3);
    color: #8ab4f8;
}

.alert-info i {
    font-size: 18px;
    margin-top: 2px;
}

/* Google Login Button */
.btn-google-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: #ffffff;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-google-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
    background: #f8f9fa;
}

.google-icon {
    width: 22px;
    height: 22px;
}

/* Feature Showcase */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 36px;
    margin-bottom: 24px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 10px;
    transition: var(--transition-fast);
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-highlight);
}

.feature-icon {
    font-size: 20px;
    color: var(--accent-red);
    margin-bottom: 8px;
}

.feature-item h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-item p {
    font-size: 11px;
    color: var(--text-muted);
}

.login-footer-info {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

/* ==========================================================================
   Dashboard Layout (App Core)
   ========================================================================== */
.app-layout {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* Left Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    transition: var(--transition-normal);
}

.sidebar-header {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;  /* 로고 가운데 (10-21) — 닫기 버튼(모바일)은 오른쪽 끝에 따로 */
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-header .close-sidebar-btn { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo { display: block; height: 27px; width: auto; }  /* 로고 이미지 (10-21) — 80% 로 축소 34→27px (11-03) */

.brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.brand-name span {
    color: var(--accent-red);
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--accent-red);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.close-sidebar-btn {
    display: none;
    color: var(--text-secondary);
    font-size: 20px;
}

/* 상단 사용자 메뉴 (드롭다운) */
.user-menu {
    position: relative;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-pill:hover,
.user-menu.open .user-pill {
    background: rgba(255, 255, 255, 0.12);
}

.user-pill img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.user-pill-name {
    font-size: 13px;
    font-weight: 500;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-pill-caret {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.user-menu.open .user-pill-caret {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 90;
}

.user-menu.open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
}

.user-menu-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}


.badge-linked {
    padding: 2px 6px;
    font-size: 10px;
    color: #34A853;
    background: rgba(52, 168, 83, 0.2);
    border: 1px solid rgba(52, 168, 83, 0.3);
    border-radius: 4px;
    text-decoration: none;
}
/* 상단 메뉴 'YouTube 연동'(DATA LIVE YouTube 멤버) · 'Patreon 연동' (10-27, 예전 '구독 연동됨' 대체) */
.badge-yt { color: #ff4e45; background: rgba(255, 0, 51, 0.14); border-color: rgba(255, 0, 51, 0.35); }
.badge-patreon { color: #ff7a6e; background: rgba(255, 66, 77, 0.12); border-color: rgba(255, 66, 77, 0.32); }
.badge-yt i, .badge-patreon i { margin-right: 2px; }

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-fast);
}

.user-menu-item:hover {
    background: rgba(255, 42, 85, 0.15);
    color: var(--accent-red);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--accent-red);
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 상단 메뉴 이름 변경 (10-27) — 이름 옆 연필 → 입력칸 */
.user-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.user-name-edit, .user-name-save, .user-name-cancel {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border: none; border-radius: 5px;
    background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
}
.user-name-edit:hover, .user-name-cancel:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.user-name-save { color: #fff; background: var(--accent-red); }
.user-name-save:disabled { opacity: 0.5; cursor: default; }
.user-name-form { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.user-name-form input {
    width: 150px; min-width: 0; padding: 4px 7px; border: 1px solid var(--border-color); border-radius: 6px;
    background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 13px; font-weight: 600;
}
.user-name-form input:focus { outline: none; border-color: var(--accent-red); }
.user-name-hint { font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
.user-name-hint.is-error { color: #ff6b6b; }
.user-name-row[hidden], .user-name-form[hidden], .user-name-hint[hidden] { display: none; }

.user-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    margin-top: 2px;
}

.demo-badge {
    background: var(--accent-purple);
    color: #fff;
    width: fit-content;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
}

.nav-section {
    margin-bottom: 24px;
}

.section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px 8px;
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.channel-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.channel-search-box {
    position: relative;
    margin: 8px;
    margin-bottom: 12px;
}

.channel-search-box i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
}

.channel-search-box input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: var(--transition-fast);
}

.channel-search-box input:focus {
    border-color: var(--accent-red);
}

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

.nav-item {
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

.nav-link i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.nav-item:hover .nav-link,
.nav-item.active .nav-link {
    color: var(--text-primary);
    background: rgba(255, 42, 85, 0.12);
}

.nav-item.active .nav-link i {
    color: var(--accent-red);
}

/* Subscribed Channels List */
.channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.channel-item:hover,
.channel-item.active {
    background: rgba(255, 255, 255, 0.06);
}

.channel-item.active {
    border-left: 3px solid var(--accent-red);
}

.channel-thumb {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.channel-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.channel-item:hover .channel-name,
.channel-item.active .channel-name {
    color: var(--text-primary);
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition-fast);
}

.btn-logout:hover {
    background: rgba(255, 42, 85, 0.2);
    color: var(--accent-red);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 90;
}

/* ==========================================================================
   Main Right Feed Content
   ========================================================================== */
.main-content {
    flex: 1;
    min-width: 0;  /* 긴 내용(채널관리 목록 등)이 화면보다 넓어지지 않게 */
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-main);
}

/* Top App Header Bar */
.top-bar {
    height: var(--header-height);
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 80;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.mobile-toggle-btn {
    display: none;
    font-size: 20px;
    color: var(--text-primary);
}

.page-title {
    font-size: 20px;
    font-weight: 700;
}

/* 상단 메뉴 '전체 | {지금 화면} | 나의 STAN' (10-27, app.js setFeedHeading) + 채널 화면 카테고리 버튼 */
.page-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-menu { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.page-menu-item {
    flex-shrink: 0; color: var(--text-muted); font-size: 18px; font-weight: 700; text-decoration: none;
    padding: 2px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.page-menu-item:hover { color: #fff; }
.page-menu-item.active { color: #fff; border-bottom-color: var(--accent-red); }
.page-menu-current { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-menu-stan i { color: #ffc233; font-size: 0.85em; }
.page-menu-stan.active { border-bottom-color: #ffc233; }
.page-menu-sep { color: rgba(255, 255, 255, 0.22); font-size: 16px; font-weight: 400; }
.page-menu-item[hidden], .page-menu-sep[hidden] { display: none; }
@media (max-width: 640px) {
    .page-menu { gap: 7px; }
    .page-menu-item { font-size: 15px; }
    .page-menu-sep { font-size: 13px; }
    .page-title-wrap { gap: 6px; }
    .page-cate-btn { max-width: 90px; }
}
.page-cate-btn {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    max-width: 180px;
    padding: 2px 10px;
    border: 1px solid rgba(110, 214, 160, 0.45);
    border-radius: var(--radius-full);
    background: rgba(110, 214, 160, 0.12);
    color: #8fe0b5;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.page-cate-btn[hidden] { display: none; }
/* 채널 카테고리 설정 모달 안 새 영상·라이브 알림 🔔 (10-28, app.js push) */
.assign-bell-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: #c9c9d6; font-size: 15px; cursor: pointer;
}
.assign-bell-btn[hidden] { display: none; }
.assign-bell-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.assign-bell-btn.active { border-color: rgba(255, 194, 51, 0.6); background: rgba(255, 194, 51, 0.16); color: #ffc233; }
.assign-bell-btn:disabled { opacity: 0.5; cursor: default; }
.assign-help { margin: 14px 0 0; padding: 10px 12px; list-style: none; display: flex; flex-direction: column; gap: 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.assign-help li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.55; color: #9a9aae; }
.assign-help i { flex-shrink: 0; width: 14px; margin-top: 2px; text-align: center; color: #c9c9d6; }
.page-cate-btn:hover { background: rgba(110, 214, 160, 0.22); border-color: #8fe0b5; }
.page-cate-btn.is-empty { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); color: #c9c9d6; }
.page-cate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-cate-edit { font-size: 10px; opacity: 0.8; }


.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-bar {
    position: relative;
    width: 280px;
}

.search-bar i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.search-bar input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: var(--transition-fast);
}

.search-bar input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 12px var(--accent-red-glow);
    width: 320px;
}

.clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: none;
}

.view-options {
    display: flex;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

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

/* Video Feed Section */
.video-feed-section {
    padding: 28px;
    flex: 1;
}

.feed-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.feed-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-controls label {
    white-space: nowrap;
}

.custom-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
}

/* Video Cards Grid Layout */
.video-grid {
    display: grid;
    gap: 24px;
    transition: var(--transition-normal);
}

.video-grid.grid-view {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.video-grid.list-view {
    grid-template-columns: 1fr;
}

/* Video Card Item */
.video-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
    cursor: pointer;
    position: relative;
}

.video-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-highlight);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.video-thumbnail-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-normal);
}

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

.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-fast);
}

.play-button-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-red);
    color: #fff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--shadow-glow);
}

.video-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.video-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.video-channel-name {
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-channel-name i {
    color: var(--accent-red);
}

/* List View Style Adjustments */
.video-grid.list-view .video-card {
    flex-direction: row;
    height: 140px;
}

.video-grid.list-view .video-thumbnail-wrap {
    width: 240px;
    height: 100%;
}

/* Skeleton Loading Cards */
.skeleton-card {
    pointer-events: none;
}

.skeleton-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, #1c1c28 25%, #2a2a3a 50%, #1c1c28 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

.skeleton-details {
    padding: 16px;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1c1c28 25%, #2a2a3a 50%, #1c1c28 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    margin-bottom: 8px;
}

.title-line { width: 90%; }
.title-line-short { width: 60%; }
.channel-line { width: 40%; margin-top: 12px; }

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

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

.empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-primary {
    background: var(--accent-red);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    background: #e02047;
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   Video Player Modal
   ========================================================================== */
.video-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal-backdrop.active {
    display: flex;
}

.video-modal-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

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

.video-modal-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.modal-close-btn {
    color: var(--text-secondary);
    font-size: 20px;
    transition: var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--accent-red);
}

.video-iframe-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
}

.video-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.video-channel-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.channel-icon {
    color: var(--accent-red);
}

/* 영상 모달 하단: 채널 카테고리 변경 버튼 */
.modal-cate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 4px 12px;
    background: rgba(255, 42, 85, 0.28);
    border: 1px solid rgba(255, 90, 120, 0.7);
    border-radius: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.modal-cate-name { white-space: nowrap; }  /* 모바일은 JS 가 6자로 자름 (app.js shortCateName) */

.modal-cate-btn[hidden] {
    display: none;
}

.modal-cate-btn:hover {
    background: rgba(255, 42, 85, 0.45);
    border-color: #ff5a78;
}

.modal-cate-btn.is-empty {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #eee;
}

.modal-cate-edit {
    font-size: 10px;
    color: #fff;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   Responsive Breakpoints (Desktop vs Tablet & Mobile)
   ========================================================================== */
@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.active {
        display: block;
    }

    .mobile-toggle-btn {
        display: block;
    }

    .close-sidebar-btn {
        display: block;
    }

    .top-bar {
        padding: 0 16px;
    }

    .search-bar {
        width: 180px;
    }

    .search-bar input:focus {
        width: 220px;
    }
}

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

    .video-feed-section {
        padding: 16px;
    }

    .video-grid.grid-view {
        grid-template-columns: 1fr;
    }

    .search-bar {
        display: none;
    }

    .user-pill {
        padding: 3px 8px 3px 3px;
    }

    .user-pill-name {
        display: none;
    }

    .video-grid.list-view .video-card {
        flex-direction: column;
        height: auto;
    }

    .video-grid.list-view .video-thumbnail-wrap {
        width: 100%;
    }
}

/* ==========================================================================
   Category Navigation & Management Styles
   ========================================================================== */
.category-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.category-item.active .category-count-badge {
    background: rgba(255, 42, 85, 0.25);
    color: var(--accent-red);
}

.category-item {
    position: relative;
}

.category-item .btn-edit-cat {
    opacity: 0;
    visibility: hidden;
    padding: 2px 6px;
    color: #888;
    font-size: 11px;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.category-item:hover .btn-edit-cat {
    opacity: 1;
    visibility: visible;
}

.category-item .btn-edit-cat:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.channel-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.channel-info-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.channel-cate-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: var(--transition-fast);
}

.channel-cate-tag:hover {
    background: rgba(255, 42, 85, 0.15);
    color: var(--accent-red);
    border-color: rgba(255, 42, 85, 0.3);
}

.btn-edit-channel-cate {
    opacity: 0;
    visibility: hidden;
    padding: 4px 6px;
    color: #888;
    font-size: 11px;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.channel-item:hover .btn-edit-channel-cate {
    opacity: 1;
    visibility: visible;
}

.btn-edit-channel-cate:hover {
    color: #ff2a55;
    background: rgba(255, 42, 85, 0.15);
}


/* ==========================================================================
   Video Modal — 댓글 패널 (플레이어 오른쪽, 모바일은 아래)
   ========================================================================== */
.video-modal-container {
    max-height: calc(100vh - 40px);
    transition: max-width 0.25s ease;
}

.video-modal-container.comments-open {
    max-width: 1320px;
}

.video-modal-body {
    display: flex;
    min-height: 0;
}

.video-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.video-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-comments-toggle.active {
    background: rgba(255, 42, 85, 0.2);
    border-color: rgba(255, 42, 85, 0.45);
    color: #fff;
}

.video-comments-panel {
    position: relative;
    width: 400px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.18);
}

.video-comments-panel[hidden] {
    display: none;
}

/* 패널이 플레이어 높이를 늘리지 않도록 내부를 절대 배치 */
.comments-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.comments-total {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
}

.comments-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comments-order {
    background: #0f0f13;
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 6px;
}

.comments-close-btn {
    color: var(--text-secondary);
    font-size: 16px;
    padding: 4px 6px;
}

.comments-close-btn:hover {
    color: var(--accent-red);
}

.comments-compose {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.comments-compose textarea {
    width: 100%;
    min-height: 60px;
    max-height: 160px;
    resize: vertical;
    padding: 9px 11px;
    background: #0f0f13;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
}

.comments-compose textarea:focus {
    border-color: var(--accent-red);
}

.compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.compose-submit {
    padding: 6px 16px;
    background: var(--accent-red);
    color: #fff;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.compose-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.compose-notice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.compose-notice .btn-scope {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    color: #222;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.compose-message {
    margin-top: 8px;
    font-size: 12px;
}

.compose-message.error {
    color: #ff9b9b;
}

.compose-message.info {
    color: #8ab4f8;
}

.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 16px 16px;
}

.comment-item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
}

.comment-item + .comment-item {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

.comment-reply .comment-avatar {
    width: 24px;
    height: 24px;
}

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

.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 3px;
}

.comment-author {
    font-weight: 600;
    color: #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-time {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.comment-text {
    font-size: 13px;
    color: #ddd;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

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

.comment-replies-toggle {
    color: #8ab4f8;
    font-size: 12px;
    font-weight: 600;
}

.comment-replies {
    margin-top: 4px;
}

.comment-replies[hidden] {
    display: none;
}

.comment-replies .comment-item {
    padding: 8px 0;
    border-top: none;
}

.comment-replies-more {
    display: inline-block;
    font-size: 12px;
    color: #8ab4f8;
    margin: 2px 0 4px 34px;
}

.comment-held {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #f5c542;
}

.comments-state {
    padding: 28px 8px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.comments-state .btn-scope {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #fff;
    color: #222;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.comments-more-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ddd;
    font-size: 12px;
}

.comments-more-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1024px) {
    .video-modal-container {
        overflow-y: auto;
    }

    .video-modal-body {
        flex-direction: column;
    }

    .video-comments-panel {
        width: 100%;
        height: 55vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .video-modal-footer {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* 영상 모달 하단: 조회수·좋아요 */
.video-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.video-stats[hidden] {
    display: none;
}

.video-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.video-stat[hidden] {
    display: none;
}

.video-stat i {
    color: #aaa;
}

.video-stat b {
    color: #fff;
    font-weight: 600;
}

/* ==========================================================================
   라이브 구분: 필터 탭 + 썸네일 배지
   ========================================================================== */
.feed-kind-tabs {
    display: inline-flex;
    padding: 3px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 18px;
}

.feed-kind-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}

.feed-kind-tab:hover {
    color: #fff;
}

.feed-kind-tab.active {
    background: var(--accent-red);
    color: #fff;
}

.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7);
    animation: live-pulse 1.6s infinite;
}

.feed-kind-tab.active .live-dot {
    background: #fff;
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}


.live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    pointer-events: none;
}

.live-badge.is-live {
    background: #16a34a;  /* 라이브 중 — 녹색 계통 (10-07, 썸네일에 박힌 빨간 LIVE 와 구분) */
}

.live-badge.is-live .live-dot {
    background: #fff;
    animation: none;
}

.live-badge.is-upcoming {
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.live-badge.is-replay {
    background: #606060;
    pointer-events: auto;  /* title 툴팁 표시 */
}

.live-badge.is-replay .live-dot {
    background: #fff;
    animation: none;
}

.video-time.is-live {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 640px) {
    /* 모바일: 1줄 영상 개수 / 2줄 탭(왼쪽) + 정렬(오른쪽) */
    .feed-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .feed-kind-tabs {
        margin-right: auto;
    }

    .feed-kind-tab {
        padding: 5px 12px;
    }

    .feed-controls label {
        display: none;
    }
}

/* ==========================================================================
   플레이어 상단 (10-02, 10-05 리본 삭제): [STAN 별 — 맨 왼쪽, 세로 가운데] [제목 한 줄, 길면 …] [조회수·좋아요] [닫기 — 오른쪽 끝 전체 높이]
   ========================================================================== */
.video-modal-header {
    gap: 14px;
    min-height: 58px;
    padding: 0;  /* 왼쪽 별 칸·오른쪽 닫기 칸이 위아래 꽉 차게 (10-22) */
}

.video-modal-title {
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: 15px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-header-right {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 14px;
    flex-shrink: 0;
}

/* 닫기: 헤더 오른쪽 끝을 위아래로 꽉 채우는 칸, 배경색을 달리해 분명하게 (모서리는 플레이어 둥근 테두리를 따름) */
.video-header-right .modal-close-btn {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-height: 52px;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: #34344a;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
.video-header-right .modal-close-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

/* 라이브: 아이콘만 빨간색, 시청자 수 글자는 흰색 (눈 피로 감소) */
.video-stat.is-live i {
    color: #ff5a5a;
}

.btn-comments-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.comments-btn-count {
    padding: 0 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
}

.comments-btn-count:empty {
    display: none;
}

@media (max-width: 640px) {
    /* 1줄: [STAN][제목 …][닫기] / 2줄: 조회수·좋아요 */
    .video-modal-header {
        flex-wrap: wrap;
        row-gap: 0;
        min-height: 0;
        padding: 0;
        column-gap: 10px;
    }

    .video-modal-title {
        flex: 1 1 0;
        font-size: 14px;
    }

    .video-header-right {
        display: contents;  /* 안의 조회수·닫기를 헤더 줄에 직접 배치 */
    }

    .modal-stan-btn { order: 0; width: 52px; }
    .video-modal-title { order: 1; }
    .video-header-right .modal-close-btn { order: 2; width: 52px; }
    .video-header-right .video-stats {
        order: 3;
        flex-basis: 100%;
        padding: 8px 4px 10px;
    }
}

/* ==========================================================================
   플레이어 크기: 데스크탑 화면 가로 80% (영상 전체가 화면 높이 안에 들어오도록 상한),
   모바일(≤768px) 가로 100% 전체 화면
   ========================================================================== */
@media (min-width: 769px) {
    .video-modal-container,
    .video-modal-container.comments-open {
        max-width: none;
    }

    /* 190px = 상단(제목 2줄) + 하단 + 여백 */
    .video-modal-container {
        width: min(80vw, calc((100vh - 190px) * 16 / 9));
        transition: width 0.25s ease;
    }
}

@media (min-width: 1025px) {
    /* 댓글 패널(400px)이 옆에 붙을 때는 그만큼 더 넓힘 (역시 80% 상한) */
    .video-modal-container.comments-open {
        width: min(80vw, calc((100vh - 190px) * 16 / 9 + 400px));
    }
}

@media (max-width: 768px) {
    .video-modal-backdrop {
        padding: 0;
        align-items: stretch;
    }

    .video-modal-container,
    .video-modal-container.comments-open {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border: none;
        border-radius: 0;
        overflow-y: auto;
    }
}

/* ==========================================================================
   라이브 실시간 채팅 (YouTube live_chat iframe — API 사용량 0)
   ========================================================================== */
.live-chat-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.live-chat-wrap[hidden] {
    display: none;
}

.live-chat-wrap iframe {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #0f0f0f;
}

.live-chat-hint {
    padding: 8px 14px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.comments-order[hidden],
.comments-compose[hidden],
.comments-list[hidden] {
    display: none;
}

/* 라이브 중: 하단 버튼을 채팅 버튼으로 강조 */
.btn-comments-toggle.is-live-chat i {
    color: #ff5a5a;
}

/* 라이브 배지: 썸네일 자체에 박힌 LIVE 글자와 겹치지 않도록 카드 중앙 배치.
   마우스를 올리면 배지는 사라지고 중앙 재생 버튼이 보임 */
.live-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 12px;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: opacity 0.2s ease;
}

.video-card:hover .live-badge {
    opacity: 0;
}

/* 영상 길이 — 썸네일 오른쪽 아래 (10-28, app.js durationBadgeHtml) */
.duration-badge {
    position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 1px 5px; border-radius: 4px;
    background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5;
    pointer-events: none;
}

/* 무한 스크롤 — 피드 끝 상태 (더 불러오는 중 / 모두 불러옴 / 다시 시도) */
.feed-more {
    min-height: 1px;
    padding: 24px 0 32px;
    text-align: center;
    color: #888;
    font-size: 13px;
}
.feed-more i { margin-right: 6px; color: #ff2a55; }
.feed-more-retry {
    margin-left: 8px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

/* STAN 버튼 공통 — 카드·플레이어는 아래에서 별만 보이게 덮음 */
.stan-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;  /* 10-01 사용자 요청으로 1.5배 (이전 4px 10px / 11px) */
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 21px;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.stan-btn:hover { background: rgba(0, 0, 0, 0.8); }
.stan-btn.is-stanned {
    background: #ffc233;
    color: #1a1400;
    border-color: #ffc233;
}
/* 카드 STAN — 카드 왼쪽 위 모서리에 붙은 카드 배경색(--bg-card, 불투명) 사각형(왼쪽 위·오른쪽 아래만 둥글게) 안에 별
   (10-08 사용자 요청: 오른쪽 별만 → 왼쪽 원형 → 모서리 탭 → 카드색). 왼쪽 위 둥근 모양은 카드 모서리
   STAN 안 함: 검정별(비어 있음) / 7일: 은별 / 소장: 금별 (10-20 회색·녹색 → 검정·은) */
.video-thumbnail-wrap .stan-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 46px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 0 0 var(--radius-md) 0;  /* 왼쪽 위는 카드 모서리(overflow:hidden)가 잘라 줌 — 같은 반경을 겹치면 경계에 썸네일이 비침 */
    background: var(--bg-card);
    line-height: 1;
}
.video-thumbnail-wrap .stan-btn:hover,
.video-thumbnail-wrap .stan-btn.is-stanned:hover { background: #2c2c3a; border: none; }  /* 카드색보다 조금 밝게, 불투명 */
.video-thumbnail-wrap .stan-btn.is-stanned { background: var(--bg-card); border: none; }  /* 공통 .stan-btn 의 노란 배경 덮음 */
.stan-btn .stan-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.video-thumbnail-wrap .stan-btn .stan-icon { justify-content: center; }  /* 원 가운데 */
/* STAN 전(피드 3일): 비어 있는 검정별 — 테두리 없이 안쪽 그림자(#stanInset)로 카드에 파인 홈처럼 + 아래 1px 빛 (10-22, 피드 카드 기준 — 작은 아이콘은 고려 안 함), 1.3배 */
.stan-btn .stan-empty { display: block; width: 29px; height: 29px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.stan-btn .stan-empty path { fill: url(#stanHollow); stroke: none; filter: url(#stanInset); }
/* 안으로 파인 느낌: 위는 더 어둡게(그라데이션), 아래 가장자리에 얇은 빛 */
.stan-btn .stan-empty { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)); }
/* STAN 함: 금별 (#stanGold 그라데이션 + 짙은 갈색 테두리 + 반사광), 1.3배 */
.stan-btn .stan-gold { display: none; width: 31px; height: 31px; margin-top: -1px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.stan-btn .stan-gold path { fill: url(#stanGold); stroke: #4a2c00; stroke-width: 1.4; stroke-linejoin: round; }
.stan-btn .stan-gold path.stan-gold-shine { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.1; stroke-linecap: round; }
.stan-btn.is-stanned .stan-gold { display: block; }
/* STAN 7일: 같은 별을 은색으로 (소장 stan-l2 = 금별) */
.stan-btn.stan-l1 .stan-gold path:not(.stan-gold-shine) { fill: url(#stanSilver); stroke: #2f343b; }
.stan-btn.is-stanned .stan-off { display: none; }
/* 플레이어 STAN — 리본 없이 별만, 카드 별의 1.5배 (10-05).
   10-22: 헤더 왼쪽 끝 위아래 꽉 찬 칸(닫기 칸과 대칭) + 밝은 배경 — 3일 별(파인 홈)이 잘 보이게 */
.modal-stan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    width: 58px;
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    background: #2c2c3a;
    line-height: 1;
}
.modal-stan-btn:hover,
.modal-stan-btn.is-stanned { background: #2c2c3a; border: none; border-right: 1px solid rgba(255, 255, 255, 0.1); }  /* 공통 .stan-btn 의 어두운/노란 배경 덮음 */
.modal-stan-btn:hover { background: #34344a; }
.modal-stan-btn[hidden] { display: none; }
.modal-stan-btn .stan-icon { justify-content: center; }
.modal-stan-btn .stan-empty { width: 43.5px; height: 43.5px; }
.modal-stan-btn .stan-gold { width: 46.5px; height: 46.5px; margin-top: -1.5px; }
.feed-kind-stan i { color: #ffc233; margin-right: 3px; }
/* STAN 페이지는 [STAN 전체 | 7일 | 소장]만, 다른 화면은 STAN 전체 숨김 (11-03, app.js loadVideos) */
.feed-kind-tabs:not(.is-mystan) .feed-kind-tab[data-kind="stan"] { display: none; }
.feed-kind-tabs.is-mystan .feed-kind-tab[data-kind="all"], .feed-kind-tabs.is-mystan .feed-kind-tab[data-kind="recent"] { display: none; }
/* 7일(은별)·소장(금별) 탭 — 그 단계 STAN 영상만, 모바일은 별만 (11-02) */
.feed-kind-star { display: inline-flex; align-items: center; gap: 5px; }
.feed-kind-star .stan-legend-star { width: 14px; height: 14px; }
.feed-kind-star .stan-legend-star.is-empty path { fill: #15151c; stroke: #9a9aab; stroke-width: 1.6; filter: none; }  /* 3일 탭 검정별 — 어두운 탭 위에서도 보이게 테두리 (11-03) */
@media (max-width: 640px) {
    .feed-kind-star .feed-kind-label { display: none; }
    .feed-kind-star .stan-legend-star { width: 16px; height: 16px; }
}

/* 플레이어 설명 패널 (댓글 패널 자리) — 줄바꿈 유지, 링크는 새 탭 */
.video-desc-text {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #d6d6de;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.video-desc-text a { color: #8ab4f8; text-decoration: none; }
.video-desc-text a:hover { text-decoration: underline; }
.video-desc-title {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    overflow-wrap: anywhere;
}

/* 사이드바 '나의 STAN' — 별 아이콘 금색 */
.category-item[data-cate-id="mystan"] .fa-star { color: #ffc233; }

/* 탭 줄: [영상 수] [검색 — 가운데] [전체 | STAN] (10-02) — 헤더 검색 규칙(폭·모바일 숨김)을 덮음 */
.feed-status-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 560px) minmax(0, 1fr);  /* 양옆 칸은 내용 길이와 무관하게 같게 → 검색창 가운데 유지 */
    align-items: center;
}
.feed-status-bar .feed-count-row { justify-self: start; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }  /* 영상 수 + 채널 화면 🔔·카테고리 (10-28) */
.feed-status-bar .feed-search-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; justify-self: center; }
.feed-status-bar .feed-search { display: block; width: 100%; flex: 1; min-width: 0; }
.feed-status-bar .feed-search input,
.feed-status-bar .feed-search input:focus { width: 100%; }
/* 검색창 크게 + 안내 글자 조금 밝게 (10-05) */
.feed-status-bar .feed-search input { padding: 12px 40px 12px 42px; font-size: 15px; }
.feed-status-bar .feed-search input::placeholder { color: #8e8ea2; opacity: 1; }
.feed-status-bar .feed-search > i { left: 16px; font-size: 16px; }
.feed-status-bar .feed-controls { justify-self: end; }
/* 보관 안내: 전체 | STAN 버튼 바로 아래 — (검정별) 3일 (은별) 7일 (금별) 소장 (데스크탑 오른쪽 정렬 / 모바일 한 줄) */
.feed-retention-note {
    grid-column: 3;
    justify-self: end;
    margin: -4px 2px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #c9c9d6;
    white-space: nowrap;
    cursor: default;
}
.feed-retention-note .stan-legend { display: inline-flex; align-items: center; gap: 4px; }
/* 보관 안내 별 받침 (10-22) — 카드 별 탭처럼 둥근 사각 배경, 3일 별(파인 홈)이 어두운 바탕에서도 보이게 */
.stan-legend-box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #2c2c3a; }
.stan-legend-star { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.stan-legend-star path { stroke-width: 1.5; stroke-linejoin: round; }
.stan-legend-star.is-empty path { fill: url(#stanHollow); stroke: none; filter: url(#stanInset); }
.stan-legend-star.is-empty { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)); }
.stan-legend-star.is-silver path { fill: url(#stanSilver); stroke: #2f343b; }
.stan-legend-star.is-gold path { fill: url(#stanGold); stroke: #4a2c00; }
/* 보관 안내 옆 '상세설명' 버튼 */
.stan-help-btn {
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #d6d6e2;
    font-size: 11.5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.stan-help-btn:hover { background: rgba(255, 194, 51, 0.16); border-color: #ffc233; color: #fff; }

/* STAN·보관 상세설명 모달 */
.stan-help-backdrop { align-items: center; justify-content: center; z-index: 9999; }
.stan-help {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 540px;
    max-height: 86vh;
    background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.stan-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stan-help-header h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.stan-help-header .stan-legend-star { width: 20px; height: 20px; }
.stan-help-close { padding: 4px; border: none; background: none; color: #888; font-size: 18px; cursor: pointer; }
.stan-help-close:hover { color: #fff; }
.stan-help-body { flex: 1; overflow-y: auto; padding: 6px 20px 18px; }
.stan-help-body section { padding-top: 16px; }
.stan-help-body h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #ffc233; }
.stan-help-body p { margin: 0; font-size: 13px; line-height: 1.7; color: #c4c4d2; }
.stan-help-body b { color: #fff; font-weight: 600; }
.stan-help-levels { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stan-help-levels li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.stan-help-levels .stan-legend-star { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.stan-help-levels div { display: flex; flex-direction: column; gap: 2px; }
.stan-help-levels div > b { font-size: 13.5px; }
.stan-help-levels span { font-size: 12.5px; line-height: 1.6; color: #b4b4c4; }
.stan-help-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    color: #ddd;
}
.stan-help-flow span { display: inline-flex; align-items: center; gap: 4px; }
.stan-help-flow i { color: #6c6c80; font-size: 11px; }
.stan-help-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: #c4c4d2; }
.stan-help-list li + li { margin-top: 4px; }
.stan-help-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}
.stan-help-footer button {
    min-width: 96px;
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: #ff2a55;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
/* StanThat 소개 팝업 (10-26, 인트로 페이지 대체 — _about_modal.html, 안 내용은 intro.css) */
.about-backdrop { align-items: center; justify-content: center; z-index: 9999; }
.about-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 94%;
    max-width: 1140px;
    max-height: 92vh;
    background: #090a0f radial-gradient(ellipse 80% 40% at 50% 0%, rgba(120, 50, 220, 0.14), transparent);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}
.about-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #bbb;
    font-size: 17px;
    cursor: pointer;
}
.about-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.about-close:disabled { opacity: 0.3; cursor: not-allowed; }
.about-close:disabled:hover { color: #bbb; border-color: rgba(255, 255, 255, 0.12); }
/* 슬라이드 (10-28, static/js/intro.js) — 한 장씩, 높이 고정(넘길 때 버튼 줄이 움직이지 않게), 길면 슬라이드 안에서 스크롤 */
.about-modal { height: min(92vh, 720px); }
.about-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.about-body .intro { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding-top: 28px; padding-bottom: 28px; }
.about-body .intro .about-slide:not(.active) { display: none !important; }
.about-body .intro .about-slide.active { animation: aboutSlideIn 0.35s ease; }
.about-body .intro .about-slide.feature { border-top: none; padding: 24px 0; }
.about-body .intro .about-slide .intro-hero { padding: 12px 0 28px; }
.about-body .intro .about-slide.intro-data { margin-top: 0; }
@keyframes aboutSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.about-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
}
.about-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: #ff2a55;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.about-nav-btn[hidden] { display: none; }
.about-prev { background: rgba(255, 255, 255, 0.08); color: #ddd; }
.about-prev:disabled { opacity: 0.35; cursor: default; }
.about-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; min-width: 0; }
.about-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: rgba(255, 255, 255, 0.18); cursor: pointer; transition: width 0.2s, background 0.2s; }
.about-dot.seen { background: rgba(255, 255, 255, 0.42); }
.about-dot.active { width: 22px; background: #ff2a55; }
/* 방침·약관 — 하단 고정 (10-28) */
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; padding: 0 16px 12px; background: rgba(0, 0, 0, 0.35); font-size: 12px; }
.about-links a { color: #9a9aae; text-decoration: none; }
.about-links a:hover { color: #fff; text-decoration: underline; }
.about-links span { color: #4a4a58; }
@media (max-width: 640px) {
    .about-modal { width: 100%; height: 100%; max-height: 100%; border: none; border-radius: 0; }
    .about-nav { padding: 10px 12px; gap: 8px; }
    .about-nav-btn { min-width: 0; padding: 9px 14px; }
    .about-prev span, .about-next span { display: none; }
    .about-dot { width: 7px; height: 7px; }
    .about-dot.active { width: 16px; }
    .about-links { font-size: 11px; }
}
/* 태블릿·모바일(≤1279px — 10-28 태블릿 세로 깨짐, iPad Pro 13 세로 1032px 는 사이드바가 보여 피드 폭이 좁음):
   1줄 검색창 전체 폭 / 2줄 영상 수 + 전체|STAN / 3줄 보관 안내 */
@media (max-width: 1279px) {
    .feed-status-bar { grid-template-columns: 1fr auto; }
    .feed-status-bar .feed-search-row { grid-column: 1 / -1; grid-row: 1; }
    .feed-status-bar .feed-count-row { grid-row: 2; }
    .feed-status-bar .feed-controls { grid-row: 2; }
    .feed-retention-note { grid-column: 1 / -1; grid-row: 3; justify-self: start; white-space: normal; margin: 0; }
}

/* 채널 화면 '추천영상' (11-02) — 최신·STAN 영상 아래, 라벨 + 안내 */
.feed-picks { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.feed-picks[hidden] { display: none; }
.feed-picks-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 14px; }
.feed-picks-label { font-size: 13px; color: var(--text-secondary); }  /* '총 n개의 영상' 과 같은 글자 (11-02) */
.feed-picks-sub { font-size: 12px; color: var(--text-secondary); }

/* 검색어 교정 안내 (11-02) */
.search-fix { margin: -6px 0 14px; font-size: 13px; color: var(--text-secondary); }
.search-fix[hidden] { display: none; }
.search-fix b { color: var(--text-primary); }
.search-fix-orig { color: #6ea8ff; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; }
.search-fix-orig:hover { text-decoration: underline; }

/* 채널 검색 중 오버레이 (11-02) — 화면 전체를 막고 가운데 진행 표시 */
.search-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    background: rgba(8, 8, 14, 0.62); backdrop-filter: blur(2px); padding: 16px; }
.search-overlay[hidden] { display: none; }
.search-overlay-box { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 240px; max-width: 360px;
    padding: 24px 28px; border-radius: 16px; background: rgba(24, 24, 31, 0.9); /* --bg-secondary 90% (11-02) */ border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); text-align: center; color: var(--text-primary); }
.search-overlay-box b { font-size: 15px; word-break: break-all; }
.search-overlay-box span { font-size: 13px; color: var(--text-secondary); min-height: 1em; }
.search-overlay-box span:empty { display: none; }
.search-overlay-ic { font-size: 26px; color: var(--accent-red); animation: search-overlay-bob 1s ease-in-out infinite; }
@keyframes search-overlay-bob { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(4px, -3px); } 75% { transform: translate(-4px, 3px); } }
.search-overlay-cancel { margin-top: 4px; padding: 6px 18px; border-radius: 999px; font-size: 13px;
    color: var(--text-secondary); border: 1px solid var(--border-color); background: transparent; cursor: pointer; }
.search-overlay-cancel:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* 채널 화면 검색은 Enter·돋보기 클릭으로 (11-02) */
.feed-status-bar:not(.is-cate) .feed-search > i { cursor: pointer; z-index: 1; }

/* 카테고리 화면 검색 (11-02): 가운데 긴 검색창 없이 영상 수 옆 🔍 → 그 자리에서 펼침 (채널 화면은 위 긴 검색창 그대로) */
.cate-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
    color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 13px; cursor: pointer; }
.cate-search-btn:hover { color: var(--text-primary); border-color: var(--accent-red); }
.cate-search-btn[hidden] { display: none; }
.feed-status-bar.is-cate { grid-template-columns: minmax(0, 1fr) auto; }
.feed-status-bar.is-cate .feed-search-row { display: none; }
.feed-status-bar.is-cate .feed-count-row { grid-row: 1; flex-wrap: nowrap; }
.feed-status-bar.is-cate .feed-controls { grid-row: 1; }
.feed-status-bar.is-cate .feed-retention-note { grid-row: 2; }
@media (min-width: 1280px) { .feed-status-bar.is-cate .feed-retention-note { grid-column: 2; } }  /* 칸이 2개라 3번째 칸 대신 오른쪽 칸 */
.feed-status-bar.is-cate .feed-search { display: none; width: 240px; flex: 0 1 240px; }
.feed-status-bar.is-cate .feed-search.is-open { display: block; }
.feed-status-bar.is-cate .feed-search input { padding: 7px 32px 7px 32px; font-size: 13px; }
.feed-status-bar.is-cate .feed-search > i { left: 12px; font-size: 13px; }
/* 모바일 (11-02): 🔍 는 영상 수 바로 옆 한 줄 — 펼치면 검색창이 첫 줄 전체, 탭은 다음 줄 */
@media (max-width: 640px) {
    .feed-status-bar.is-cate .feed-count-row { gap: 4px; }
    .feed-status-bar.is-cate .video-count-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .cate-search-btn { width: 26px; height: 26px; font-size: 12px; }
    .feed-status-bar.is-cate .feed-search { flex: 1 1 auto; width: auto; }
    .feed-status-bar.is-cate:has(.feed-search.is-open) .feed-count-row { grid-column: 1 / -1; }
    .feed-status-bar.is-cate:has(.feed-search.is-open) .feed-controls { display: none; }  /* 검색 펼치면 링크 추가·탭 숨김 — 한 줄 유지 (11-03) */
}

/* 사이드바 채널 목록 제목 '전체 채널' / '{카테고리명} 채널' — 길면 … (채널갱신 버튼과 겹치지 않게) */
#channelSectionTitle {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 채널이동 — 카드·플레이어의 채널명 + 버튼 (10-02) */
.channel-go { cursor: pointer; min-width: 0; }
.channel-go-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-go:hover .channel-go-name { color: #fff; text-decoration: underline; }
.channel-go-btn {
    flex-shrink: 0;
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #bdbdc9;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}
.channel-go:hover .channel-go-btn { background: rgba(255, 42, 85, 0.18); border-color: rgba(255, 42, 85, 0.45); color: #fff; }
.video-card-meta .video-channel-name { min-width: 0; flex: 1 1 auto; margin-right: 8px; }
.video-card-meta .video-time { flex-shrink: 0; }
/* 플레이어 하단 */
.modal-channel-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
}
.modal-channel-go .channel-go-btn { font-size: 11.5px; padding: 2px 9px; }

/* ==========================================================================
   채널관리 페이지 (/channels, static/js/channels.js) — 10-05
   ========================================================================== */
.chm-view { flex: 1; padding: 28px; }
.chm-view[hidden] { display: none; }
.chm-main { display: flex; flex-direction: column; gap: 18px; max-width: 1440px; margin: 0 auto; padding-bottom: 60px; }
.chm-card {
    padding: 18px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.chm-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.chm-card-title > i { color: #8ab4f8; font-size: 14px; }
.chm-count { padding: 1px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 600; color: #ddd; }
.chm-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.chm-hint b { color: #fff; font-weight: 600; }

/* 채널 검색 */
.chm-find { position: relative; display: flex; gap: 8px; }
.chm-find > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 15px; }
.chm-find input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px 12px 42px;
    background: var(--bg-main);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 14.5px;
    outline: none;
}
.chm-find input::placeholder { color: #8e8ea2; }
.chm-find input:focus { border-color: var(--accent-red); box-shadow: 0 0 12px var(--accent-red-glow); }
.chm-find button {
    flex-shrink: 0;
    padding: 0 22px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.chm-find button:disabled { opacity: 0.6; cursor: default; }
.chm-find-result { margin-top: 12px; }
.chm-find-result[hidden] { display: none; }
.chm-find-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chm-find-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.chm-find-row .chm-thumb { width: 44px; height: 44px; }
.chm-find-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.chm-find-title { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-find-meta { font-size: 12px; color: #9aa6ff; }
.chm-find-desc { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-find-status { flex-shrink: 0; font-size: 12px; color: var(--text-secondary); }
.chm-find-status.is-added { color: #4fd377; }
.chm-find-empty { margin: 4px 2px; font-size: 13px; color: var(--text-secondary); }
.chm-find-empty.is-error { color: #ff8a8a; }
.chm-find-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 12.5px;
    cursor: pointer;
}
.chm-find-more i { color: #ff3333; }
.chm-find-more:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }

/* 거르기·일괄 처리 */
.chm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chm-filter-search { position: relative; flex: 1; min-width: 180px; }
.chm-filter-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
.chm-filter-search input,
.chm-filters select,
.chm-bulk select {
    height: 36px;
    padding: 0 12px;
    background: var(--bg-main);
    border: 1px solid var(--border-highlight);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.chm-filter-search input { width: 100%; padding-left: 32px; }
.chm-filters select option,
.chm-bulk select option { background: #1a1a24; }
.chm-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.chm-check-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #ddd; cursor: pointer; }
.chm-selected { font-size: 12.5px; color: var(--text-secondary); }
.chm-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.chm-bulk-actions .chm-btn.chm-add-cate { flex: none; width: 36px; padding: 0; justify-content: center; }  /* 카테고리 + (11-02) */
.chm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-highlight);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e6e6ee;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.chm-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.chm-btn:disabled { opacity: 0.45; cursor: default; }
.chm-btn-primary { height: 32px; border-color: transparent; background: var(--accent-red); color: #fff; }
.chm-btn-primary:hover:not(:disabled) { background: #ff4a6f; }
.chm-btn-danger { border-color: rgba(234, 67, 53, 0.45); background: rgba(234, 67, 53, 0.14); color: #ff9b9b; }
.chm-btn-danger:hover:not(:disabled) { background: rgba(234, 67, 53, 0.26); }
.chm-view input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-red); cursor: pointer; }

/* 채널 목록 */
.chm-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.chm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
}
.chm-row:hover { background: rgba(255, 255, 255, 0.03); }
.chm-row.is-checked { background: rgba(255, 42, 85, 0.08); }
.chm-row-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; cursor: pointer; }
.chm-thumb { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #2a2a38; }
.chm-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: #ff3333; font-size: 14px; }
.chm-row-main .chm-thumb { width: 40px; height: 40px; }
.chm-row-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1px; }
.chm-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: #eee; }
.chm-row-meta { font-size: 12px; color: #9aa6ff; }
.chm-row-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-muted); }
.chm-row.is-new { background: rgba(79, 211, 119, 0.10); box-shadow: inset 3px 0 0 #4fd377; }
.chm-row-del {
    flex-shrink: 0;
    padding: 5px 11px;
    border: 1px solid rgba(234, 67, 53, 0.4);
    border-radius: 7px;
    background: rgba(234, 67, 53, 0.1);
    color: #ff9b9b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.chm-row-del:hover:not(:disabled) { background: rgba(234, 67, 53, 0.24); color: #fff; }
.chm-row-del:disabled { opacity: 0.5; cursor: default; }
.chm-tag { flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; white-space: nowrap; }
.chm-tag-cate { background: rgba(52, 168, 83, 0.16); color: #7ddc98; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.chm-tag-cate.is-none { background: rgba(255, 255, 255, 0.07); color: var(--text-muted); }
.chm-tag-youtube { background: rgba(255, 51, 51, 0.12); color: #ff8a8a; }
.chm-tag-manual { background: rgba(138, 180, 248, 0.14); color: #8ab4f8; }
.chm-empty { padding: 26px 10px; text-align: center; font-size: 13px; color: var(--text-secondary); }

/* 확인·알림 모달 */
.chm-modal-backdrop { align-items: center; justify-content: center; z-index: 10000; }
/* 채널 추가 모달 (11-02) — 알림 모달(10000)보다 아래 */
.chm-add-backdrop { align-items: flex-start; justify-content: center; z-index: 9990; padding: 8vh 16px 16px; }
.chm-add-modal { width: 100%; max-width: 560px; max-height: 84vh; overflow-y: auto; background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); padding: 18px 20px 20px; }
.chm-add-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.chm-add-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.chm-add-head h3 i { color: var(--accent-red); }
.chm-add-close { width: 32px; height: 32px; border-radius: 50%; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-size: 16px; }
.chm-add-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.chm-add-result { margin-top: 12px; }
.chm-find-status.is-added { color: #34a853; }
.btn-add-channel { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: #aaa; cursor: pointer;
    font-size: 11px; padding: 2px 7px; border-radius: 6px; display: flex; align-items: center; margin-left: auto; transition: all 0.2s; }
.btn-add-channel:hover { color: #fff; border-color: var(--accent-red); }
.btn-add-channel + .btn-manage-channels { margin-left: 6px; }
.chm-modal {
    width: 90%;
    max-width: 420px;
    background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.chm-modal-body { padding: 26px 22px 18px; text-align: center; }
.chm-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 22px;
}
.chm-modal-icon.is-info { background: rgba(66, 133, 244, 0.18); color: #8ab4f8; }
.chm-modal-icon.is-success { background: rgba(52, 168, 83, 0.18); color: #34a853; }
.chm-modal-icon.is-error,
.chm-modal-icon.is-danger { background: rgba(234, 67, 53, 0.18); color: #ff6b6b; }
.chm-modal-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #fff; }
.chm-modal-msg { margin: 0; font-size: 13px; line-height: 1.6; color: #bbb; white-space: pre-line; text-align: center; }  /* 가운데 정렬 (11-02) */
.chm-modal-foot {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}
.chm-modal-foot button { min-width: 96px; padding: 8px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chm-modal-foot button[hidden] { display: none; }
.chm-modal-cancel { background: rgba(255, 255, 255, 0.08); color: #bbb; }
.chm-modal-ok { background: #ff2a55; color: #fff; }
.chm-modal-ok.is-danger { background: #d93a2f; }

@media (max-width: 640px) {
    .chm-view { padding: 16px; }
    .chm-card { padding: 16px 14px; }
    .chm-bulk-actions { width: 100%; margin-left: 0; }
    .chm-bulk-actions select { flex: 1; min-width: 0; }
    .chm-find button { padding: 0 16px; }
}

/* 채널관리 상단: YouTube 구독과 맞추기 (채널갱신 / 채널초기화) */
.chm-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.chm-sync-text { flex: 1; min-width: 240px; }
.chm-sync-text .chm-card-title > i { color: #ff3333; }
.chm-sync .chm-hint { margin-bottom: 0; }
.chm-sync-actions { display: flex; gap: 8px; }
.chm-btn-warn { border-color: rgba(255, 194, 51, 0.45); background: rgba(255, 194, 51, 0.12); color: #ffd166; }
.chm-btn-warn:hover:not(:disabled) { background: rgba(255, 194, 51, 0.22); }
@media (max-width: 640px) {
    .chm-sync-actions { width: 100%; }
    .chm-sync-actions .chm-btn { flex: 1; justify-content: center; }
}

/* 채널관리 '영상' — DB 의 최근 영상 (누르면 플레이어) */
.chm-row { flex-wrap: wrap; }
.chm-row-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border-highlight);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #d6d6e2;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.chm-row-btn:hover, .chm-row-btn.is-open { background: rgba(138, 180, 248, 0.16); border-color: rgba(138, 180, 248, 0.5); color: #fff; }
.chm-videos { flex-basis: 100%; padding: 8px 0 4px 26px; }
.chm-videos-msg { margin: 4px 0; font-size: 12.5px; color: var(--text-secondary); }
.chm-videos-msg.is-error { color: #ff8a8a; }
.chm-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.chm-video { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.chm-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #2a2a38; }
.chm-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.chm-video:hover .chm-video-thumb img { transform: scale(1.04); }
.chm-video-live { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: #16a34a; color: #fff; font-size: 10.5px; }  /* 피드 라이브 배지와 같은 녹색 (10-15) */
.chm-video-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12.5px;
    line-height: 1.4;
    color: #e6e6ee;
}
.chm-video:hover .chm-video-title { color: #fff; }
.chm-video-date { font-size: 11.5px; color: var(--text-muted); }
#manageChannelsBtn.active { background: rgba(255, 42, 85, 0.15) !important; border-color: rgba(255, 42, 85, 0.4) !important; color: #ff6b85 !important; }
@media (max-width: 640px) {
    .chm-videos { padding-left: 0; }
    .chm-video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 채널관리 모바일 (10-05): 채널 줄 = [체크·썸네일·이름] / [카테고리·종류 … 영상·삭제] 두 줄 */
.chm-view, .chm-main, .chm-card { min-width: 0; }
@media (max-width: 640px) {
    .chm-card-title { flex-wrap: wrap; }
    .chm-sync-text { min-width: 0; flex-basis: 100%; }
    .chm-find button { padding: 0 14px; }
    .chm-find input { padding-right: 10px; font-size: 14px; }
    .chm-filter-search { flex-basis: 100%; min-width: 0; }
    .chm-filters select { flex: 1; min-width: 0; }
    .chm-bulk { gap: 8px 10px; }
    .chm-bulk-actions { flex-wrap: wrap; }
    .chm-bulk-actions select { flex-basis: 100%; }
    .chm-bulk-actions .chm-btn { flex: 1; justify-content: center; padding: 0 8px; }
    .chm-row { gap: 6px 8px; padding: 10px 4px; }
    .chm-row-main { flex-basis: 100%; }
    /* 카테고리명이 길면 … 로 잘림 — 기준 폭 0 이라 둘째 줄이 다시 줄바꿈되지 않고, 남는 폭만큼만 늘어남 */
    .chm-tag-cate { flex: 1 1 0; min-width: 0; max-width: max-content; margin-left: 26px; }
    .chm-row-videos { margin-left: auto; }
    .chm-video-list { gap: 10px; }
}

/* 소장 영상 조회수 추이 패널 (플레이어 오른쪽, app.js trend) */
.trend-body { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 8px 12px 16px; }
.trend-msg { margin: 14px 4px; font-size: 13px; color: var(--text-secondary); }
.trend-msg.is-error { color: #ff8a8a; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { padding: 6px 6px; text-align: right; white-space: nowrap; }
.trend-table th:first-child, .trend-table td:first-child { text-align: left; }
.trend-table thead tr:last-child th { position: sticky; top: 0; background: #1d1d27; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--border-color); }
.trend-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.trend-table tbody td { color: #e6e6ee; }
.trend-table tbody td:first-child { color: var(--text-secondary); }
.trend-tools th { padding: 4px 4px 10px; }
.trend-tools-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-tools-bar > span { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.trend-chart-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid rgba(138, 180, 248, 0.45);
    border-radius: 7px;
    background: rgba(138, 180, 248, 0.12);
    color: #c9dbff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.trend-chart-btn:hover, .trend-chart-btn.active { background: rgba(138, 180, 248, 0.24); color: #fff; }
.trend-chart-row th { padding: 0 0 10px; text-align: left; }
.trend-chart { display: block; width: 100%; height: auto; background: rgba(255, 255, 255, 0.03); border-radius: 8px; }
.trend-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.trend-axis { fill: #8e8ea2; font-size: 9.5px; }
.trend-line { fill: none; stroke: #ffc233; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: #ffc233; }
.trend-line.is-likes { stroke: #6ea8ff; }
.trend-dot.is-likes { fill: #6ea8ff; }
.trend-axis.is-views { fill: #e0b54d; }
.trend-axis.is-likes { fill: #8fb6f5; }
.trend-legend { fill: #c9c9d6; font-size: 9.5px; }
/* 증가량 (app.js trend.showDelta) — 표 색·막대 그래프 */
.trend-tools-btns { display: flex; gap: 6px; }
.trend-delta-note { margin: 8px 0 0; font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--text-muted); text-align: left; white-space: normal; }
.trend-table tbody td.trend-delta.is-up { color: #7ddc98; }
.trend-table tbody td.trend-delta.is-down { color: #ff8a8a; }
.trend-zero { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.trend-bar { fill: #ffc233; }
.trend-bar.is-likes { fill: #6ea8ff; }
.trend-bar.is-comments { fill: #5fd39a; }
.trend-bar.is-down { fill: #ff8a8a; }
.trend-axis.is-comments { fill: #7ddc98; }

/* StanThat 실제 시청 (조회수 추이 패널 위) — 자체 집계 표시 */
.watch-box { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid rgba(79, 211, 119, 0.3); border-radius: 10px; background: rgba(79, 211, 119, 0.07); }
.watch-box-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #7ddc98; }
.watch-box-note { margin-left: auto; padding: 2px 6px; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.watch-box-line { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.watch-box-line b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.watch-box-disclaim { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 10.5px; letter-spacing: -0.2px; line-height: 1.5; color: var(--text-muted); }

/* 툴팁 (app.js tooltip, [data-tip]) — Bootstrap 모양 검정, 줄마다 한 줄(가장 긴 줄 폭, 화면보다 넓으면 줄바꿈) */
.tip { position: fixed; z-index: 20000; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.tip.show { opacity: 1; }
.tip-inner {
    width: max-content;
    max-width: min(480px, calc(100vw - 16px));
    padding: 8px 11px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-line;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
/* 화살표: 같은 색 사각형을 45도 돌림 */
.tip-arrow { position: absolute; bottom: -4px; width: 9px; height: 9px; margin-left: -4.5px; background: #111; transform: rotate(45deg); }
.tip.is-below .tip-arrow { top: -4px; bottom: auto; }


.trend-login { margin-left: 6px; color: #8ab4f8; font-weight: 600; text-decoration: none; }
.trend-login:hover { text-decoration: underline; }

/* 조회수 추이 — YouTube 수치 측정 스위치 (STAN + 스위치 켬만 측정, 무료 동시 3개) */
.trend-switch-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.trend-switch-bar.is-on { border-color: rgba(255, 194, 51, 0.4); background: rgba(255, 194, 51, 0.07); }
.trend-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trend-switch-title { font-size: 12.5px; font-weight: 700; color: #fff; }
.trend-switch-title i { color: #ff4e45; }
.trend-switch-quota { font-size: 11.5px; color: var(--text-muted); }
.trend-switch { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: #4a4a58; cursor: pointer; transition: background 0.15s; }
.trend-switch[aria-checked="true"] { background: #ffc233; }
.trend-switch:disabled { opacity: 0.6; cursor: wait; }
.trend-switch:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
.trend-switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.trend-switch[aria-checked="true"] .trend-switch-knob { transform: translateX(18px); }
.trend-switch-error { margin: -4px 4px 10px; }

/* 조회수 추이 — 측정 실패한 칸 */
.trend-table tbody tr.is-failed td:last-child { text-align: center; color: #ff8a8a; }

/* 조회수 추이 패널 가운데 안내 상자 (로그인 필요 / STAN 한 영상만) */
.trend-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 4px; }
.trend-notice {
    word-break: keep-all;  /* 한글 단어 중간에서 줄바꿈하지 않음 */
    width: 100%;
    max-width: 340px;
    padding: 22px 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
}
.trend-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(255, 194, 51, 0.14);
    color: #ffc233;
    font-size: 19px;
}
.trend-notice-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: #fff; white-space: nowrap; }
.trend-notice-sub { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 380px) {  /* 아주 좁은 화면에서만 줄바꿈 허용 */
    .trend-notice-title, .trend-notice-sub { white-space: normal; }
}
.trend-notice-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.trend-notice-btn:hover { opacity: 0.9; }

/* 사이드바 '나의 STAN' 아래 메뉴(채널관리·StanThat 시청 — app.js PANELS, renderCategories) 다음 구분선, 그 아래 전체 채널부터 카테고리 */
.nav-divider { height: 1px; margin: 8px 6px; background: var(--border-color); list-style: none; }

/* StanThat 시청 화면 (/watch, watchstats.js) — 카드·제목은 채널관리(chm-) 재사용. 자체 집계라 YouTube 수치와 구분 */
.wst-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wst-head .chm-card-title { margin: 0; }
.wst-periods { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.wst-periods button { padding: 5px 14px; border: 0; border-radius: 7px; background: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wst-periods button.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.wst-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wst-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.wst-tile-label { font-size: 12px; color: var(--text-secondary); }
.wst-tile-value { font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.wst-tile-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-msg { margin: 10px 2px; font-size: 13px; color: var(--text-secondary); list-style: none; }
.wst-msg.is-error { color: #ff8a8a; }

.wst-chart { position: relative; }
.wst-svg { display: block; width: 100%; height: auto; }
.wst-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.wst-grid.is-base { stroke: rgba(255, 255, 255, 0.22); }
.wst-axis { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.wst-bar { fill: #36a85d; transition: opacity 0.15s; }
.wst-bar.is-selected { fill: #4fd377; }
.wst-bar.is-dim { opacity: 0.45; }
.wst-hit { fill: transparent; cursor: pointer; }
.wst-hit:hover { fill: rgba(255, 255, 255, 0.05); }
.wst-tip {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #23232d;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}
.wst-tip[hidden] { display: none; }
.wst-tip b { color: #fff; }

.wst-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.wst-table-wrap { max-height: 520px; overflow-y: auto; }
.wst-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.wst-table th, .wst-table td { padding: 7px 8px; text-align: right; white-space: nowrap; }
.wst-table th:first-child, .wst-table td:first-child { text-align: left; }
.wst-table thead th { position: sticky; top: 0; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--border-color); }
.wst-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; color: #e6e6ee; }
.wst-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.wst-table tbody tr.is-zero { color: var(--text-muted); }
.wst-table tbody tr.is-selected { background: rgba(79, 211, 119, 0.12); }

.wst-table tbody tr.is-picked td:first-child { font-weight: 600; }
.wst-table tbody tr.wst-table-sep { cursor: default; border-bottom: 0; }
.wst-table tbody tr.wst-table-sep:hover { background: none; }
.wst-table tbody tr.wst-table-sep td { padding: 10px 8px 4px; text-align: left; font-size: 11.5px; color: var(--text-muted); }
.wst-date-search { display: flex; gap: 6px; }
.wst-date-search input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-highlight);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    color-scheme: dark;
}
.wst-date-search .chm-btn { height: 32px; font-size: 12.5px; }
.wst-day-clear { height: 30px; font-size: 12px; }
.wst-day-clear[hidden] { display: none; }
.wst-videos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.wst-video { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.wst-video:hover { background: rgba(255, 255, 255, 0.05); }
.wst-rank { width: 18px; flex-shrink: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wst-video img { width: 96px; height: 54px; flex-shrink: 0; object-fit: cover; border-radius: 6px; background: #000; }
.wst-video-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wst-video-title { font-size: 13px; font-weight: 600; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wst-video-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-video-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; font-size: 11.5px; color: var(--text-muted); }
.wst-video-count b { font-size: 14px; color: #fff; }
.wst-disclaim { margin: 0; padding: 12px 14px; border: 1px solid rgba(79, 211, 119, 0.3); border-radius: 10px; background: rgba(79, 211, 119, 0.07); font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.wst-disclaim b { color: #7ddc98; }


/* 최근 본 영상 (/recent, recent.js) — 목록은 StanThat 시청의 .wst-video 그대로 */
.rcv-day { margin: 14px 2px 4px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.rcv-day:first-child { margin-top: 4px; }
.rcv-noimg { width: 96px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #000; color: var(--text-muted); }
.wst-video.is-gone { cursor: default; }
.rcv-remove { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.rcv-remove:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* 방송 일정 (/schedule, schedule.js, 10-28) — 목록은 .wst-video 그대로 */
.sch-day-live { color: #ff5a6e; }
.sch-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; min-width: 72px; font-size: 11.5px; color: var(--text-muted); }
.sch-when b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.sch-live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 700; }
.sch-live i { font-size: 6px; animation: schBlink 1.2s ease-in-out infinite; }
@keyframes schBlink { 50% { opacity: 0.3; } }
.sch-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sch-actions:empty { display: none; }
.sch-cal {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px;
    background: rgba(255, 255, 255, 0.05); color: #ddd; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.sch-cal:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (max-width: 640px) {
    .sch-item { flex-wrap: wrap; }
    .sch-item .wst-video-text { flex-basis: calc(100% - 106px); }
    .sch-when { flex-direction: row; align-items: center; gap: 8px; min-width: 0; margin-left: 106px; }
    .sch-actions { margin-left: auto; }
    .sch-cal span { display: none; }
}

@media (max-width: 1024px) {
    .wst-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .wst-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wst-tile-value { font-size: 19px; }
    .wst-video img, .rcv-noimg { width: 80px; height: 45px; }
    .wst-table th, .wst-table td { padding: 7px 5px; }
}

/* 카테고리 순서 변경 모달 (app.js orderModal) */
.order-cate-list {
    list-style: none;
    margin: 0;
    padding: 6px 20px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-cate-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #eee;
    font-size: 14px;
}

.order-cate-item.is-moved {
    border-color: rgba(255, 42, 85, 0.45);
}

.order-cate-item > i {
    width: 16px;
    text-align: center;
    color: #aaa;
}

.order-cate-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-cate-kind {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.order-cate-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
    cursor: pointer;
}

.order-cate-btn:hover:not(:disabled) {
    background: rgba(255, 42, 85, 0.18);
    color: #fff;
}

.order-cate-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* 카테고리 수정 모달: 자동분류 카테고리 이름 고정 (app.js openCategoryModal) */
#newCategoryName.is-locked {
    color: #999 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    cursor: not-allowed;
}

/* TikTok 링크 STAN (app.js stanLinkModal) */
.stan-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #ddd;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.stan-link-btn:hover {
    background: rgba(255, 42, 85, 0.15);
    border-color: rgba(255, 42, 85, 0.4);
    color: #fff;
}

.stan-link-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.stan-link-submit.is-keep {
    background: #ff2a55;
    border-color: #ff2a55;
    box-shadow: 0 4px 12px rgba(255, 42, 85, 0.35);
}

.stan-link-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

.stan-link-submit.is-busy::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: stan-link-spin 0.8s linear infinite;
}

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

.stan-link-error {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(234, 67, 53, 0.14);
    border: 1px solid rgba(234, 67, 53, 0.35);
    color: #ff9b9b;
    font-size: 12px;
}

.stan-link-error[hidden] {
    display: none;
}

/* TikTok 세로 영상: 플레이어 상자(16:9) 가운데에 9:16 — iframe 의 aspect-ratio 는 브라우저에서 무시돼(10-12) 폭을 직접 계산.
   상자 높이 = 폭 × 9/16 → 영상 폭 = 상자 높이 × 9/16 = 상자 폭 × 81/256 (31.640625%). 모바일은 상자를 세로로 키움 */
.video-iframe-wrapper.is-vertical iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 31.640625%;
    height: 100%;
}

@media (max-width: 768px) {
    .video-iframe-wrapper.is-vertical {
        aspect-ratio: auto;
        height: min(72vh, 72dvh, 177.8vw);
    }

    .video-iframe-wrapper.is-vertical iframe {
        width: min(100%, calc(min(72vh, 72dvh, 177.8vw) * 9 / 16));
    }
}

/* 전체 | STAN 버튼 왼쪽 (10-13) — 탭 묶음 높이에 맞춤 */
.feed-controls .stan-link-btn {
    align-self: stretch;
    padding: 0 14px;
    font-size: 12px;
}

.stan-link-btn[hidden] {
    display: none;
}
/* STAN 화면 플랫폼 버튼 (10-29) — 🔗 는 항상, PC 는 이름 / 모바일은 로고 (좁은 폭에서 영상 수·전체|STAN 이 깨지지 않게) */
.stan-link-pf { display: none; }
.stan-link-btn .fa-youtube { color: #ff3b3b; }
.stan-link-btn .fa-instagram { color: #e1306c; }
.feed-kind-tab, .video-count-info { white-space: nowrap; }
@media (max-width: 640px) {
    .stan-link-btn.is-platform .stan-link-pf { display: inline-block; font-size: 14px; }
    .stan-link-btn.is-platform .stan-link-label { display: none; }
    .feed-controls .stan-link-btn.is-platform { padding: 0 10px; gap: 4px; }
    .feed-controls { gap: 6px; }
}

/* 영상 수: PC 는 글자, 모바일은 아이콘 + 숫자 (11-02, app.js updateVideoCount) */
.video-count-info .vc-short { display: none; }
.video-count-info .vc-short i { font-size: 12px; opacity: 0.85; }
@media (max-width: 640px) {
    .video-count-info .vc-full { display: none; }
    .video-count-info .vc-short { display: inline; }
}

/* 모바일 플레이어 하단 버튼 (11-02): 한 줄에 같은 폭으로, 글자 대신 아이콘(+개수) — 댓글 버튼이 화면 밖으로 밀리지 않게 */
@media (max-width: 640px) {
    .video-footer-actions { width: 100%; gap: 6px; }
    .video-footer-actions .btn-comments-toggle { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 6px; font-size: 15px; }
    .video-footer-actions .comments-btn-label { display: none; }
}

/* 플레이어 하단 버튼 hidden (TikTok 댓글보기 등) — .btn-comments-toggle 의 display 가 hidden 을 덮어쓰지 않게 */
.btn-comments-toggle[hidden] {
    display: none !important;
}

/* 사용자 메뉴 구분선 (나의 STAN·채널관리·StanThat 시청 | 로그아웃) (10-13) */
.user-menu-sep { height: 1px; background: var(--border-color); }

/* 사이드바 하단 고정 '나의 STAN' — 관리자 모드 잠금 위 (10-13) */
.sidebar-fixed-menu {
    margin: 0;
    padding: 8px 12px;
    list-style: none;
    border-top: 1px solid var(--border-color);
}
.sidebar-fixed-menu .category-item[data-cate-id="mystan"] .fa-star { color: #ffc233; }

/* ==========================================================================
   요금제 (10-14) — 요금제 화면(/pricing)·내 요금제(/plan)·구독 신청 확인 (plans.js)
   ========================================================================== */
.plan-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
    color: #c9c9d6; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; text-decoration: none; }
.plan-badge:hover { filter: brightness(1.2); }
.plan-badge-lg { padding: 5px 12px; font-size: 14px; border-radius: 8px; }
.plan-badge.plan-lv-10 { color: #8fd3a6; background: rgba(79, 211, 119, 0.12); border-color: rgba(79, 211, 119, 0.35); }
.plan-badge.plan-lv-20 { color: #8ab4f8; background: rgba(138, 180, 248, 0.12); border-color: rgba(138, 180, 248, 0.35); }
.plan-badge.plan-lv-30 { color: #c6a4ff; background: rgba(170, 120, 255, 0.12); border-color: rgba(170, 120, 255, 0.4); }
.plan-badge.plan-lv-40 { color: #ffc233; background: rgba(255, 194, 51, 0.12); border-color: rgba(255, 194, 51, 0.4); }
.plan-badge.plan-lv-99 { color: #ff8aa0; background: rgba(255, 42, 85, 0.12); border-color: rgba(255, 42, 85, 0.4); }

.topbar-pricing-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar-pricing-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.plan-cycle { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.plan-cycle button { padding: 6px 14px; border: 0; border-radius: 7px; background: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.plan-cycle button.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.plan-cycle-save { margin-left: 4px; color: #7ddc98; font-size: 11px; }
.plan-cycle-sm button { padding: 4px 10px; font-size: 12px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border: 1px solid var(--border-color);
    border-top: 3px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.plan-card.plan-lv-10 { border-top-color: #4fd377; }
.plan-card.plan-lv-20 { border-top-color: #8ab4f8; }
.plan-card.plan-lv-30 { border-top-color: #aa78ff; }
.plan-card.plan-lv-40 { border-top-color: #ffc233; }
.plan-card.is-current { background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset; }
.plan-current-tag { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; color: #111; background: #fff; }
.plan-name { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.6px; color: #fff; }
.plan-price { display: flex; align-items: baseline; gap: 3px; }
.plan-price b { font-size: 26px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 12.5px; color: var(--text-secondary); }
.plan-price-sub { margin-top: -6px; font-size: 11.5px; color: #7ddc98; min-height: 16px; }
.plan-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); min-height: 18px; }
.plan-features { list-style: none; margin: 4px 0 6px; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan-features li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.plan-features li i { width: 14px; text-align: center; color: #8e8ea2; font-size: 11.5px; }
.plan-features li.plan-includes, .plan-features li.plan-includes i { color: #6ee7a0; }
.plan-features li span { flex: 1; min-width: 0; }
.plan-features li b { color: #fff; font-weight: 600; white-space: nowrap; }
.plan-features-sm { margin: 12px 0; padding: 10px 12px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.plan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 8px;
    background: #ff2a55; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
    white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }  /* 긴 번역(vi·es·pt…)은 버튼 안에서 줄바꿈 (10-18) */
.plan-btn:hover:not(:disabled) { filter: brightness(1.1); }
.plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.plan-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #ddd; }
.plan-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-muted); }
/* Paddle 결제 (11-03) — 원화 가격·결제 영역 */
.plan-price-krw { margin-top: 2px; font-size: 11.5px; color: var(--text-secondary); }
.plan-billing { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.plan-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plan-btn-danger-text { color: #ff8a8a; }
.plan-note.is-warn { color: #ffb84d; }
.plan-faq { margin: 8px 0 0; }
.plan-faq dt { margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: #fff; }
.plan-faq dt:first-child { margin-top: 4px; }
.plan-faq dd { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }

.plan-modal-backdrop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.6); }
.plan-modal-backdrop[hidden] { display: none; }
.plan-modal { width: 100%; max-width: 440px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; background: #181822;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }
.plan-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.plan-modal-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: #fff; }
.plan-modal-head h3 i { color: #ffc233; }
.plan-modal-body { padding: 16px 18px; overflow-y: auto; }
.plan-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.2); }
.plan-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text-secondary); }
.plan-confirm-row b { color: #fff; }
.plan-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.55; color: #ddd; cursor: pointer; }
.plan-agree input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent-red); flex: none; }

.plan-mine { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-mine-price { font-size: 13px; color: var(--text-secondary); }
.plan-usage { display: flex; flex-direction: column; gap: 14px; }
.plan-usage-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--text-secondary); }
.plan-usage-top b { color: #fff; font-variant-numeric: tabular-nums; }
.plan-usage-top em { margin-left: 4px; font-style: normal; font-size: 11px; color: var(--text-muted); }
.plan-usage-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.plan-usage-bar i { display: block; height: 100%; border-radius: 3px; background: #8ab4f8; }
.plan-usage-row.is-full .plan-usage-bar i { background: #ff8a8a; }
.plan-usage-row.is-full .plan-usage-top b { color: #ff8a8a; }
.trend-switch-quota a { color: #8ab4f8; text-decoration: none; }
.trend-switch-quota a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .topbar-pricing-link span { display: none; }
    .plan-grid { grid-template-columns: 1fr; }  /* 모바일: 카드 한 줄에 하나 (두 줄이면 기능 이름이 깨짐, 10-16) */
}

/* 요금제 남은 횟수 (n) · 무제한 아이콘 — [data-quota] (app.js planQuota, 10-15) */
.quota-left { margin-left: 2px; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quota-left .fa-infinity { font-size: 0.9em; }
.quota-left.is-empty { color: #ff8a8a; opacity: 1; }
.quota-left[hidden] { display: none; }

/* DATA LIVE Patreon 회원 (요금제·내 요금제, plans.js renderPatreon, 10-15) */
/* Patreon·YouTube 멤버 카드 — PC 는 가로 정렬, 그 아래는 다른 카드처럼 위아래 (11-04) */
.plan-member-cards { display: contents; }
@media (min-width: 1024px) {
    .plan-member-cards { display: flex; align-items: stretch; gap: 18px; }
    .plan-member-cards > .chm-card { flex: 1 1 0; min-width: 0; }
}
.patreon-card .chm-card-title > i { color: #ff5a4f; }
.patreon-table { width: 100%; max-width: 520px; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
.patreon-table th, .patreon-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.patreon-table th { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.patreon-table td:nth-child(2) { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.patreon-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.patreon-btn { background: #ff424d; }
.patreon-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.patreon-linked-name { color: #fff; font-weight: 600; }
.patreon-linked-name i { color: #ff5a4f; }
.patreon-linked-tier b { color: #fff; }
.patreon-linked-time { font-size: 11.5px; color: var(--text-muted); }
/* DATA LIVE YouTube 채널 멤버 (요금제, plans.js renderYtMember, 10-27) — 표·줄은 Patreon 카드 클래스 재사용 */
.ytmember-card .chm-card-title > i, .ytmember-card .patreon-linked-name i { color: #ff3b3b; }
.ytmember-btn { background: #ff0033; }
.ytmember-none { margin-top: 4px; }

/* 이용약관·개인정보처리방침 (templates/legal, 10-16) */
.legal-page { min-height: 100vh; background: var(--bg-primary, #0f0f15); color: #ddd; }
.legal-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 14px 24px; background: rgba(15, 15, 21, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); }
.legal-brand { font-size: 20px; font-weight: 800; color: #fff; text-decoration: none; }
.legal-brand span { color: #ff2a55; }
.legal-nav { display: flex; gap: 6px; }
.legal-nav a { padding: 6px 12px; border-radius: 8px; color: var(--text-secondary, #aaa); font-size: 13px; text-decoration: none; }
.legal-nav a.active, .legal-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.legal-body { max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; font-size: 14px; line-height: 1.8; }
.legal-body h1 { margin: 0 0 4px; font-size: 26px; color: #fff; }
.legal-body h2 { margin: 34px 0 10px; font-size: 17px; color: #fff; scroll-margin-top: 70px; }
.legal-body p, .legal-body li { color: #cfcfdb; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin: 4px 0; }
.legal-body a { color: #8ab4f8; }
.legal-meta { color: var(--text-muted, #888) !important; font-size: 13px; margin: 0 0 18px; }
.legal-toc { margin: 18px 0; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.legal-toc ol { margin: 0; columns: 2; column-gap: 24px; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; line-height: 1.6; }
.legal-table th, .legal-table td { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); vertical-align: top; text-align: left; }
.legal-table th { background: rgba(255, 255, 255, 0.05); color: #fff; font-weight: 600; white-space: nowrap; }
.legal-table-narrow { max-width: 480px; }
/* 공통 푸터 (11-04, _site_footer.html) — 고정하지 않음, 내용이 짧은 화면에서만 아래로 밀어 둠 */
.site-footer { padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: var(--bg-secondary); text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--text-muted, #888); }
.site-footer p { margin: 0; }
.site-footer a { color: #aaa; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer-links { display: flex; justify-content: center; gap: 8px; }
.main-content > .site-footer { margin-top: auto; }
/* 문의 모달 (11-04) — 소개 팝업(9999) 위로 */
.contact-backdrop { z-index: 10001; }
.contact-close { background: none; border: 0; padding: 4px; font-size: 16px; color: #aaa; cursor: pointer; }
.contact-close:hover { color: #fff; }
.contact-intro { margin: 0 0 6px; font-size: 13px; color: #ddd; }
.contact-admin { margin: 0 0 14px; font-size: 12.5px; color: var(--text-secondary); }
.contact-admin a { color: #8ab4ff; }
.contact-field { display: block; margin-bottom: 12px; font-size: 12.5px; color: var(--text-secondary); }
.contact-field[hidden], .contact-intro[hidden], .contact-privacy[hidden] { display: none; }
.contact-field input, .contact-field textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 5px; padding: 9px 11px; font: inherit; font-size: 13.5px; color: #fff; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--accent-red); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-privacy { margin: 0; font-size: 11.5px; color: var(--text-muted, #888); }
.contact-status { margin: 10px 0 0; font-size: 13px; color: #ff8a8a; }
.contact-status.ok { margin-top: 0; color: #6ee7a0; }
.contact-send[hidden] { display: none; }
@media (max-width: 640px) {
    .legal-toc ol { columns: 1; }
    .legal-table { display: block; overflow-x: auto; }
}
.sidebar-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 6px 12px 10px; font-size: 11px; color: var(--text-muted, #777); }
.sidebar-legal a { color: var(--text-muted, #888); text-decoration: none; }
.sidebar-legal a:hover { color: #ccc; text-decoration: underline; }
.plan-btn-danger { background: rgba(234, 67, 53, 0.15); color: #ff8a80; border: 1px solid rgba(234, 67, 53, 0.35); }

/* 언어 선택 (상단 비로그인·사용자 메뉴, app.js bindLanguageSelect, 10-16) */
.lang-select { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: rgba(255, 255, 255, 0.06);
    color: #ddd; font-size: 12.5px; cursor: pointer; outline: none; }
.lang-select option { background: #1a1a24; color: #ddd; }
.user-menu-lang { cursor: default; }
.user-menu-lang .lang-select { margin-left: auto; }
.legal-note { padding: 8px 12px; border-radius: 8px; background: rgba(138, 180, 248, 0.08); border: 1px solid rgba(138, 180, 248, 0.25); color: #b7cdf8 !important; font-size: 13px; }
.legal-nav a.legal-lang { margin-left: 4px; border: 1px solid rgba(255, 255, 255, 0.15); }

/* 빈 TikTok 카테고리 안내 아래 TikTok 버튼 (10-18) */
.empty-state .empty-tiktok-btn {
    padding: 9px 20px;
    font-size: 14px;
}
.empty-state .empty-tiktok-btn[hidden],
.empty-state #resetFilterBtn[hidden] {
    display: none;
}

/* Instagram 게시물 (10-19) — 썸네일 없음(Meta 심사 전) → 기본 카드, 플레이어는 공개 임베드(세로로 긴 게시물, 안에서 스크롤) */
.ig-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 54px;
}
.video-iframe-wrapper.is-instagram {
    background: #fff;
}
.video-iframe-wrapper.is-instagram iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 480px);
    height: 100%;
    background: #fff;
}
@media (max-width: 768px) {
    .video-iframe-wrapper.is-instagram {
        aspect-ratio: auto;
        height: min(72vh, 72dvh, 177.8vw);
    }
}

/* 이전/다음 영상 (10-20, app.js playNav) — 데스크탑: 플레이어 좌우(배경 위), 모바일(≤768px): 플레이어 아래 줄 */
.video-nav-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(30, 30, 40, 0.75);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
/* 플레이어(가로 min(80vw, …)) 바깥 여백 가운데쯤 — 여백이 좁으면 화면 끝 10px */
.video-nav-side.is-prev { left: max(10px, calc((100vw - min(80vw, (100vh - 190px) * 16 / 9)) / 4 - 26px)); }
.video-nav-side.is-next { right: max(10px, calc((100vw - min(80vw, (100vh - 190px) * 16 / 9)) / 4 - 26px)); }
.video-modal-backdrop:has(.comments-open) .video-nav-side.is-prev { left: 10px; }
.video-modal-backdrop:has(.comments-open) .video-nav-side.is-next { right: 10px; }
.video-nav-side:hover:not(:disabled) { background: #ff2a55; border-color: #ff2a55; }
.video-nav-side:disabled { opacity: 0.25; cursor: default; }
.video-nav-side[hidden], .video-nav-bar[hidden] { display: none; }
.video-nav-bar { display: none; }

@media (max-width: 768px) {
    .video-nav-side { display: none; }
    .video-nav-bar:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        border-top: 1px solid var(--border-color);
    }
    .video-nav-btn {
        flex: 1;
        max-width: 140px;
        padding: 9px 12px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .video-nav-btn:disabled { opacity: 0.3; cursor: default; }
    .video-nav-pos { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
}

/* LOOP 반복재생 (10-20, app.js loop) — 나의 STAN 카드 체크 · 피드 위 툴바 · 플레이어 아래 LOOP 중 표시 */
.loop-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    color: transparent;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.loop-check:hover { background: rgba(0, 0, 0, 0.8); }
.loop-check[aria-pressed="true"] { background: #ff2a55; border-color: #ff2a55; color: #fff; }
.video-card.is-loop-checked { outline: 2px solid #ff2a55; outline-offset: -2px; }

.loop-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 42, 85, 0.35);
    border-radius: 10px;
    background: rgba(255, 42, 85, 0.07);
}
.loop-toolbar[hidden] { display: none; }
.loop-toolbar-badge, .video-loop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: #ff2a55;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.loop-toolbar-count { flex: 1; min-width: 120px; font-size: 13px; color: var(--text-secondary); }
.loop-tool-btn {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.loop-tool-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.loop-tool-btn.is-primary { background: #ff2a55; border-color: #ff2a55; }
.loop-tool-btn.is-primary:hover:not(:disabled) { background: #ff4b70; }
.loop-tool-btn:disabled { opacity: 0.4; cursor: default; }
.loop-tool-btn[hidden] { display: none; }

.video-loop-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 42, 85, 0.35);
    background: rgba(255, 42, 85, 0.1);
}
.video-loop-bar[hidden] { display: none; }
.video-loop-badge i { animation: loop-spin 2.4s linear infinite; }
@keyframes loop-spin { to { transform: rotate(360deg); } }
.video-loop-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-loop-stop {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
}
.video-loop-stop:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 640px) {
    .loop-check { width: 34px; height: 34px; }
    .loop-toolbar-count { flex-basis: 100%; order: 1; }
}

/* LOOP 줄(약 50px)이 생기면 그만큼 플레이어를 줄여 하단이 잘리지 않게 (위 190px 계산에 더함) */
@media (min-width: 769px) {
    .video-modal-container.is-looping { width: min(80vw, calc((100vh - 240px) * 16 / 9)); }
    .video-modal-backdrop:has(.is-looping) .video-nav-side.is-prev { left: max(10px, calc((100vw - min(80vw, (100vh - 240px) * 16 / 9)) / 4 - 26px)); }
    .video-modal-backdrop:has(.is-looping) .video-nav-side.is-next { right: max(10px, calc((100vw - min(80vw, (100vh - 240px) * 16 / 9)) / 4 - 26px)); }
}
@media (min-width: 1025px) {
    .video-modal-container.is-looping.comments-open { width: min(80vw, calc((100vh - 240px) * 16 / 9 + 400px)); }
}

/* 이어보기 줄 (10-28, app.js resume) */
.video-resume-bar { border-top-color: rgba(138, 180, 248, 0.4); background: rgba(138, 180, 248, 0.1); }
.video-resume-bar .video-loop-badge i { animation: none; color: #a9c4f7; }
.rcv-pos { color: #a9c4f7; }
/* 장면 북마크·구간 LOOP (10-28, app.js scenes) — 구간 LOOP 줄도 LOOP 줄처럼 플레이어를 줄임 */
.video-section-bar { border-top-color: rgba(255, 194, 51, 0.4); background: rgba(255, 194, 51, 0.1); }
.video-section-bar .video-loop-badge { color: #ffc233; }
@media (min-width: 769px) {
    .video-modal-container.is-section-looping { width: min(80vw, calc((100vh - 240px) * 16 / 9)); }
    .video-modal-container.is-section-looping.is-looping { width: min(80vw, calc((100vh - 290px) * 16 / 9)); }
}
@media (min-width: 1025px) {
    .video-modal-container.is-section-looping.comments-open { width: min(80vw, calc((100vh - 240px) * 16 / 9 + 400px)); }
}
.scenes-tools { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border-color); }
.scene-note-input {
    width: 100%; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px;
    background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 13px;
}
.scene-note-input:focus { outline: none; border-color: var(--accent-red); }
.scene-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.06);
    color: #e6e6ee; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.scene-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.scene-btn:disabled { opacity: 0.4; cursor: default; }
.scene-btn b { font-variant-numeric: tabular-nums; color: #fff; }
.scene-btn-main { background: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.scene-btn-main:hover:not(:disabled) { background: #ff4b70; }
.scene-ab { display: flex; align-items: center; gap: 6px; }
.scene-ab-btn { flex: 1; }
.scene-ab-sep { color: var(--text-muted); }
.scene-ab-actions { display: flex; gap: 6px; }
.scene-ab-actions .scene-btn { flex: 1; }
.scene-loop-btn.active { background: rgba(255, 194, 51, 0.18); border-color: #ffc233; color: #ffd36b; }
.scene-hint { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.scene-hint.is-error { color: #ff6b6b; }
.scenes-list { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.scenes-empty { margin: 16px 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); text-align: center; }
.scene-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.scene-item:hover { background: rgba(255, 255, 255, 0.05); }
.scene-item.is-playing { background: rgba(255, 194, 51, 0.12); }
.scene-time {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: none; border-radius: 6px;
    background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.scene-time i { font-size: 10px; color: var(--accent-red); }
.scene-item.is-section .scene-time i { color: #ffc233; }
.scene-time:hover { background: rgba(255, 255, 255, 0.16); }
.scene-note { flex: 1; min-width: 0; font-size: 12.5px; color: #c9c9d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.scene-note-empty { color: var(--text-muted); font-style: normal; opacity: 0.7; }
.scene-note-edit { width: 100%; padding: 3px 6px; border: 1px solid var(--accent-red); border-radius: 5px; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 12.5px; }
.scene-del { flex-shrink: 0; padding: 4px 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.scene-del:hover { color: #ff6b6b; }

/* 첫 로그인 'AI로 자동분류' 모달 (10-29, _onboarding_modal.html · onboarding.js) */
.onb-backdrop { align-items: center; justify-content: center; z-index: 10000; }
.onb-modal {
    width: 92%; max-width: 480px; padding: 28px 26px 22px; border-radius: 18px;
    background: #12121a radial-gradient(ellipse 90% 50% at 50% 0%, rgba(138, 120, 248, 0.22), transparent);
    border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.onb-head { text-align: center; }
.onb-orb {
    display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 12px; border-radius: 50%;
    background: linear-gradient(135deg, #8a78f8, #ff2a55); color: #fff; font-size: 24px; box-shadow: 0 0 0 0 rgba(138, 120, 248, 0.5);
}
.onb-modal.is-running .onb-orb { animation: onbPulse 1.6s ease-out infinite; }
.onb-modal.is-running .onb-orb i { animation: onbWiggle 1.2s ease-in-out infinite; }
.onb-modal.is-done .onb-orb { background: linear-gradient(135deg, #34d399, #10b981); }
@keyframes onbPulse { 0% { box-shadow: 0 0 0 0 rgba(138, 120, 248, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(138, 120, 248, 0); } }
@keyframes onbWiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) scale(1.08); } }
.onb-head h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; }
.onb-sub { margin: 0; font-size: 13.5px; line-height: 1.6; color: #b4b4c4; }
.onb-progress { margin: 20px 0 6px; }
.onb-progress[hidden] { display: none; }
.onb-bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.onb-bar span {
    display: block; height: 100%; width: 0; border-radius: 6px; transition: width 0.45s ease;
    background: linear-gradient(90deg, #8a78f8, #ff2a55, #ffc233); background-size: 200% 100%; animation: onbFlow 2s linear infinite;
}
@keyframes onbFlow { to { background-position: -200% 0; } }
.onb-pct { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font-size: 12.5px; color: #9a9aae; }
.onb-pct b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.onb-steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.onb-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: #8e8ea0; font-size: 13.5px; transition: background 0.2s, color 0.2s; }
.onb-ic { width: 16px; text-align: center; }
.onb-ic:not([class*="fa-"])::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.onb-label { flex: 1; }
.onb-val { color: #fff; font-variant-numeric: tabular-nums; }
.onb-steps li.active { background: rgba(138, 120, 248, 0.14); color: #fff; }
.onb-steps li.active .onb-ic { color: #a99bff; }
.onb-steps li.done { color: #d6d6e0; }
.onb-steps li.done .onb-ic { color: #34d399; }
.onb-steps li.error .onb-ic { color: #ff6b6b; }
.onb-created { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.onb-created[hidden] { display: none; }
.onb-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
    background: rgba(255, 194, 51, 0.12); border: 1px solid rgba(255, 194, 51, 0.4); color: #fff; font-size: 13px; font-weight: 600;
    animation: onbPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.onb-chip i { color: #ffc233; }
.onb-chip b { font-weight: 500; color: #c9c9d6; font-size: 12px; }
.onb-chip.is-rest { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); }
.onb-chip.is-rest i { color: #9a9aae; }
@keyframes onbPop { from { opacity: 0; transform: scale(0.6) translateY(6px); } to { opacity: 1; transform: none; } }
.onb-msg { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(234, 67, 53, 0.12); color: #ff9b9b; font-size: 13px; line-height: 1.6; }
.onb-msg[hidden] { display: none; }
.onb-actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.onb-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #8a78f8, #ff2a55); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.onb-btn[hidden] { display: none; }
.onb-btn.onb-ghost { background: rgba(255, 255, 255, 0.08); color: #ccc; font-weight: 600; }