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

/* 전역 user-select 방지 */
button,
a,
.header,
.side-menu,
label {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* CSS 변수 정의 */
:root {
  /* 라이트 모드 */
  --bg-primary: #f8f9fa; /* 라이트 모드 단일 배경 */
  --bg-secondary: transparent; /* 섹션 배경 제거 */
  --bg-tertiary: transparent; /* 테이블 헤더 배경 제거 */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #ffffff;
  --border-color: #d1d5db;
  --border-hover: #3b82f6;
  --card-bg: transparent;
  --card-hover: rgba(0, 0, 0, 0.02);
  --input-bg: #ffffff;
  --button-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --button-text: #ffffff;
  --shadow: rgba(59, 130, 246, 0.1);

  /* 상태별 색상 */
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --success-color: #374151;
  --success-hover: #1f2937;
  --success-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  --success-bg: #f3f4f6;
  --error-color: #374151;
  --error-hover: #1f2937;
  --error-bg: #f3f4f6;
  --error-border: #d1d5db;
  --warning-color: #374151;
  --warning-bg: #f3f4f6;
  --info-color: #374151;
  --info-bg: #f3f4f6;
  --disabled-bg: #9ca3af;

  /* AI 자동화 버튼 색상 */
  --ai-btn-bg: #10b981;
  --ai-btn-hover: #059669;
  --ai-btn-border: #10b981;
  --collect-btn-bg: #3b82f6;
  --collect-btn-hover: #2563eb;
  --collect-btn-border: #3b82f6;

  /* 등급 색상 (라이트 모드: 어두운 색상) */
  --grade-1: #047857; /* 최고 (녹색) */
  --grade-2: #1d4ed8; /* 좋음 (파란색) */
  --grade-3: #b45309; /* 보통 (주황색) */
  --grade-4: #b91c1c; /* 나쁨 (빨간색) */
  --grade-5: #7f1d1d; /* 최하 (진한 빨간색) */
  --ratio-purple: #6d28d9; /* 배율 보라색 */

  /* 채널 지뢰밭: 불투명 표면과 전경색을 한 쌍으로 관리한다. */
  --minefield-danger-surface: #b91c1c;
  --minefield-danger-surface-hover: #991b1b;
  --minefield-danger-text: #ffffff;
  --minefield-danger-border: #7f1d1d;
  --minefield-danger-emphasis: #991b1b;
  --minefield-warning-surface: #92400e;
  --minefield-warning-surface-hover: #78350f;
  --minefield-warning-text: #ffffff;
  --minefield-warning-border: #78350f;
  --minefield-warning-emphasis: #78350f;
  --minefield-inactive-surface: #f3f4f6;
  --minefield-inactive-text: #4b5563;
  --minefield-inactive-border: #9ca3af;
  --minefield-inactive-dot: #6b7280;
  --minefield-neutral-active-surface: #1d4ed8;
  --minefield-neutral-active-text: #ffffff;

  /* 채널 트렌드 성장 진단: 지뢰밭과 같은 구조에 기회(초록) 색만 갈아끼운다. */
  --growth-strong-surface: #047857;
  --growth-strong-surface-hover: #065f46;
  --growth-strong-text: #ffffff;
  --growth-strong-border: #065f46;
  --growth-strong-emphasis: #065f46;
  --growth-mid-surface: #0f766e;
  --growth-mid-surface-hover: #115e59;
  --growth-mid-text: #ffffff;
  --growth-mid-border: #115e59;
  --growth-mid-emphasis: #115e59;
  --growth-base-surface: #475569;
  --growth-base-surface-hover: #334155;
  --growth-base-text: #ffffff;
  --growth-base-border: #334155;
  --growth-base-emphasis: #334155;

  --section-title-color: #1f2937;
}

/* 다크 모드 변수 - preload 시에도 즉시 적용 */
html.dark-theme-loading,
body.dark-theme {
  --bg-primary: #0a0a0a; /* 다크 모드 단일 배경 */
  --bg-secondary: transparent; /* 섹션 배경 제거 */
  --bg-tertiary: transparent; /* 테이블 헤더 배경 제거 */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-light: #ffffff;
  --border-color: #333333;
  --border-hover: #dc2626;
  --card-bg: transparent;
  --card-hover: rgba(255, 255, 255, 0.05);
  --input-bg: #0a0a0a;
  --button-primary: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --button-text: #ffffff;
  --shadow: rgba(220, 38, 38, 0.2);

  /* 상태별 색상 */
  --primary-color: #dc2626;
  --primary-hover: #b91c1c;
  --success-color: #dc2626;
  --success-hover: #b91c1c;
  --success-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --success-bg: #dc2626;
  --error-color: #ef4444;
  --error-hover: #dc2626;
  --error-bg: #1a1a1a;
  --error-border: #333333;
  --warning-color: #fbbf24;
  --warning-bg: #1a1a1a;
  --info-color: #38bdf8;
  --info-bg: #1a1a1a;
  --disabled-bg: #374151;

  /* AI 자동화 버튼 색상 (다크모드) */
  --ai-btn-bg: #dc2626;
  --ai-btn-hover: #b91c1c;
  --ai-btn-border: #dc2626;
  --collect-btn-bg: #dc2626;
  --collect-btn-hover: #b91c1c;
  --collect-btn-border: #dc2626;

  /* 등급 색상 (다크 모드: 밝은 색상) */
  --grade-1: #10b981; /* 최고 (녹색) */
  --grade-2: #3b82f6; /* 좋음 (파란색) */
  --grade-3: #f59e0b; /* 보통 (주황색) */
  --grade-4: #ef4444; /* 나쁨 (빨간색) */
  --grade-5: #991b1b; /* 최하 (진한 빨간색) */
  --ratio-purple: #8b5cf6; /* 배율 보라색 */

  --minefield-danger-surface: #991b1b;
  --minefield-danger-surface-hover: #7f1d1d;
  --minefield-danger-text: #ffffff;
  --minefield-danger-border: #ef4444;
  --minefield-danger-emphasis: #fecaca;
  --minefield-warning-surface: #78350f;
  --minefield-warning-surface-hover: #92400e;
  --minefield-warning-text: #ffffff;
  --minefield-warning-border: #f59e0b;
  --minefield-warning-emphasis: #fde68a;
  --minefield-inactive-surface: #171717;
  --minefield-inactive-text: #d1d5db;
  --minefield-inactive-border: #525252;
  --minefield-inactive-dot: #a3a3a3;
  --minefield-neutral-active-surface: #1e40af;
  --minefield-neutral-active-text: #ffffff;

  --growth-strong-surface: #065f46;
  --growth-strong-surface-hover: #047857;
  --growth-strong-text: #ffffff;
  --growth-strong-border: #10b981;
  --growth-strong-emphasis: #a7f3d0;
  --growth-mid-surface: #115e59;
  --growth-mid-surface-hover: #0f766e;
  --growth-mid-text: #ffffff;
  --growth-mid-border: #14b8a6;
  --growth-mid-emphasis: #99f6e4;
  --growth-base-surface: #334155;
  --growth-base-surface-hover: #475569;
  --growth-base-text: #ffffff;
  --growth-base-border: #64748b;
  --growth-base-emphasis: #cbd5e1;

  --section-title-color: #ffffff;
}

/* 다크모드 로딩 중 body 배경 즉시 적용 */
html.dark-theme-loading body {
  background: #0a0a0a;
  color: #ffffff;
}

/* AI 자동화 버튼 스타일 */
.ai-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ai-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  transform: translateY(-1px);
}
body.dark-theme .ai-btn {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}
body.dark-theme .ai-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* 검색 결과 카드의 AI 버튼 */
.video-action-btn.ai-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}
.video-action-btn.ai-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}
body.dark-theme .video-action-btn.ai-btn {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}
body.dark-theme .video-action-btn.ai-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

/* 수집 버튼 스타일 */
.collect-btn {
  background: var(--collect-btn-bg) !important;
  border-color: var(--collect-btn-border) !important;
  color: #ffffff !important;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.collect-btn:hover {
  background: var(--collect-btn-hover) !important;
  border-color: var(--collect-btn-hover) !important;
}

/* 수집 완료✓  버튼 스타일 */
.automation-btn.collected {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer;
}
.automation-btn.collected:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}
body.dark-theme .automation-btn.collected {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}
body.dark-theme .automation-btn.collected:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}
body.dark-theme .automation-btn.collected {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
}
body.dark-theme .automation-btn.collected:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

body.dark-theme .data-table {
  color: #ffffff;
}

body.dark-theme .data-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

body.dark-theme .data-table td {
  border-bottom: 1px solid #333333;
}

body.dark-theme .data-table tr:hover {
  background: #0a0a0a;
}

/* 다크모드 드롭다운 */
body.dark-theme select {
  background: #0a0a0a;
  color: #ffffff;
  border: 2px solid #333333;
}

body.dark-theme select:focus {
  border-color: #dc2626;
  background: #0a0a0a;
}

/* 분석 지표 드롭다운 optgroup 스타일 (다크 모드) */
body.dark-theme select#metricSelect optgroup,
body.dark-theme select#metricSelectQuick optgroup {
  font-weight: 700;
  font-size: 0.9rem;
  font-style: normal;
  background: #4b5563 !important;
  color: #ffffff !important;
  padding: 8px;
  margin: 4px 0;
}

body.dark-theme option {
  background: #0a0a0a;
  color: #ffffff;
}

body.dark-theme option:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

body.dark-theme select[multiple] option:checked {
  background: var(--primary-color);
  color: white;
}

/* 카테고리 태그 스타일 */
.category-tag {
  display: inline-block;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-tag:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

body.dark-theme .category-tag {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

body.dark-theme .category-tag:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* 선택된 카테고리 표시 영역 */
.selected-categories {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 0;
}

/* 필터 확장 버튼 */
.filter-expand-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 6px;
  margin-right: 6px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-expand-btn:hover {
  background: #4f46e5;
  transform: scale(1.05);
}

/* 필터 버튼 표시/숨김 */
.filter-button.hidden-default {
  display: none;
}

.filter-button.visible-default {
  display: inline-block;
}

/* 다크모드 카테고리 제외 드롭다운 */
body.dark-theme .exclude-dropdown-btn {
  background: #2d2d44;
  color: #e0e6ed;
  border: 2px solid #2d2d44;
}

body.dark-theme .exclude-dropdown-menu {
  background: #2d2d44;
  border: 1px solid #2d2d44;
}

body.dark-theme .exclude-option {
  background: #2d2d44;
  color: #e0e6ed;
  border-bottom: 1px solid #1a1a2e;
}

body.dark-theme .exclude-option:hover {
  background: #242448;
}

body.dark-theme .exclude-option label {
  color: #e0e6ed;
}

/* 다크모드 해외채널 필터 */
body.dark-theme .overseas-checkbox {
  background: #2d2d44;
  color: #e0e6ed;
}

body.dark-theme .overseas-checkbox:hover {
  background: #242448;
}

body.dark-theme .overseas-label {
  color: #e0e6ed;
}

body.dark-theme .overseas-status {
  color: #a0a8b0;
}

/* 다크모드 데이터 결과 섹션 */
body.dark-theme .results-container {
  background: #1a1a2e;
  border: 1px solid #2d2d44;
}

body.dark-theme .no-data {
  background: #141414;
  color: #cccccc;
  border: 1px solid #333333;
}

/* 다크모드 메인 컨테이너 */
body.dark-theme .container {
  background: transparent;
}

/* 다크모드 섹션들 */
body.dark-theme .section {
  background: transparent !important; /* body 배경 사용 */
  border: 1px solid #e0e0e0 !important;
}

body.dark-theme .controls {
  background: transparent; /* body 배경 사용 */
  border: 1px solid rgba(255, 255, 255, 0.6);
}

body.dark-theme .stats-modal-content {
  background: #141414;
  color: #ffffff;
}

body.dark-theme .autocomplete-dropdown {
  background: #0a0a0a;
  border: 1px solid #333333;
}

body.dark-theme .autocomplete-item {
  background: #0a0a0a;
  color: #e0e6ed;
}

body.dark-theme .autocomplete-item:hover {
  background: #242448;
}

/* 다크모드 필터 버튼 텍스트 */
body.dark-theme .filter-button {
  background: #2d2d44;
  border: 2px solid #2d2d44;
  color: #e0e6ed;
}

body.dark-theme .filter-button:hover {
  border-color: #4c5bae;
  background: #242448;
  color: #4c5bae;
}

body.dark-theme .filter-button.active {
  background: #4c5bae;
  border-color: #4c5bae;
  color: #ffffff;
}

/* 다크모드 데이터 테이블 텍스트 */
body.dark-theme .channel-name {
  color: #e0e6ed;
}

body.dark-theme .subscriber-badge {
  color: #e0e6ed;
}

body.dark-theme .video-title {
  color: #e0e6ed;
}

body.dark-theme .video-title:hover {
  color: #4c5bae;
}

/* 날짜 선택 버튼 스타일 */
.date-picker-btn {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-picker-btn:hover {
  border-color: var(--primary-color);
  background: var(--card-hover);
}

.calendar-icon {
  font-size: 1.1rem;
}

/* 날짜 선택 모달 스타일 */
.date-picker-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.date-picker-content {
  background-color: var(--bg-secondary);
  margin: 5% auto;
  padding: 0;
  border-radius: 12px;
  width: 450px;
  max-width: 95%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

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

.date-picker-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: var(--card-hover);
  color: var(--text-primary);
}

.date-picker-body {
  padding: 20px;
}

.date-info {
  margin-bottom: 20px;
}

.date-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
  text-align: center;
}

.calendar-container {
  margin-bottom: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.nav-btn {
  background: var(--button-primary);
  color: var(--button-text);
  border: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px var(--shadow);
}

#currentMonth {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

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

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--card-bg);
}

.weekdays div {
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  border-right: 1px solid var(--border-color);
}

.weekdays div:last-child {
  border-right: none;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--input-bg);
}

.calendar-day {
  padding: 12px;
  text-align: center;
  cursor: pointer;
  background: white;
  border: 1px solid var(--border-color);
  margin: -1px 0 0 -1px;
  transition: all 0.3s ease;
  color: var(--text-primary);
  font-weight: 500;
}

.calendar-day.empty {
  cursor: default;
}

.calendar-day:hover:not(.empty) {
  background: var(--card-hover);
  color: var(--primary-color);
}

.calendar-day.today {
  background: var(--primary-color);
  color: var(--button-text);
  font-weight: 700;
}

.calendar-day.selected {
  background: var(--success-color);
  color: white;
  font-weight: 700;
}

.calendar-day.selected:hover {
  background: var(--success-hover);
}

.calendar-day.in-range {
  background: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
}

.calendar-day.in-range:hover {
  background: var(--primary-color);
  color: white;
}

.selected-dates {
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.selected-dates span {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}

.date-picker-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-secondary {
  padding: 10px 20px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: var(--text-secondary);
  background: var(--card-hover);
}

.btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(55, 65, 81, 0.3);
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

/* 다크모드 날짜 선택 모달 */
body.dark-theme .date-picker-btn {
  background: #0a0a0a;
  border: 2px solid #333333;
  color: #ffffff;
}

body.dark-theme .date-picker-btn:hover {
  border-color: #dc2626;
  background: #2a2a2a;
}

body.dark-theme .date-picker-content {
  background: #0a0a0a;
}

body.dark-theme .date-picker-header {
  border-bottom: 1px solid #333333;
}

body.dark-theme .date-input {
  background: #0a0a0a;
  border: 2px solid #333333;
  color: #ffffff;
}

body.dark-theme .date-input:focus {
  border-color: #dc2626;
}

body.dark-theme .btn-secondary {
  border: 2px solid #2d2d44;
  color: #a0a8b0;
}

body.dark-theme .btn-secondary:hover {
  border-color: #4c5bae;
  background: #242448;
}

/* 다크모드 달력 스타일 */
body.dark-theme .calendar-grid {
  border: 1px solid #333333;
}

body.dark-theme .weekdays {
  background: #141414;
}

body.dark-theme .weekdays div {
  border-right: 1px solid #333333;
  color: #cccccc;
}

body.dark-theme .calendar-days {
  background: #0a0a0a;
}

body.dark-theme .calendar-day {
  background: #141414;
  color: #ffffff;
  border: 1px solid #333333;
}

body.dark-theme .calendar-day:hover:not(.empty) {
  background: #2a2a2a;
  color: #dc2626;
}

body.dark-theme .calendar-day.today {
  background: #dc2626;
  color: #ffffff;
}

body.dark-theme .calendar-day.selected {
  background: #dc2626;
  color: #ffffff;
}

body.dark-theme .calendar-day.selected:hover {
  background: #b91c1c;
}

body.dark-theme .calendar-day.in-range {
  background: #2a2a2a !important;
  color: #dc2626 !important;
}

body.dark-theme .calendar-day.in-range:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

body.dark-theme .selected-dates {
  background: #141414;
  border: 1px solid #333333;
}

body.dark-theme .selected-dates span {
  color: #e0e6ed;
}

/* ========== 기존 스타일 ========== */

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  background: var(--bg-primary);
  min-height: 100vh;
  padding: 10px;
  margin: 0;
  color: var(--text-primary);
  transition:
    background-color 0.2s ease,
    color 0.2s ease; /* 배경과 텍스트만 전환 */
}

/* 메인 컨테이너 */
.container {
  margin-left: 64px;
  margin-top: 55px;
  margin-right: 0;
  width: calc(100% - 64px);
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
  transition: none;
  background: transparent; /* body 배경 사용 */
}

body.menu-expanded .container {
  margin-left: 180px;
  width: calc(100% - 180px);
}

/* 콘텐츠 컨테이너 - body 영역만 좁게 */
.content-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.partner-ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  margin: 24px 0 10px;
  overflow: hidden;
  background: var(--bg-primary, #f8f9fa);
  color: var(--text-primary, #333333);
}

.partner-ticker-label {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--primary-color, #3b82f6);
  background: linear-gradient(90deg, var(--bg-primary, #f8f9fa) 78%, rgba(248, 249, 250, 0));
}

.partner-ticker-track {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.partner-ticker-row {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: max-content;
  padding-right: 34px;
  animation: partnerTickerScroll 240s linear infinite;
}

.partner-ticker:hover .partner-ticker-row {
  animation-play-state: paused;
}

.partner-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.46em;
  white-space: nowrap;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  opacity: 0.95;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* condensed wordmarks (gaming / engines / studios) */
.partner-logo.t-cond {
  font-family: "Saira Condensed", "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* rounded wordmarks (creator / playful brands) */
.partner-logo.t-round {
  font-family: "Baloo 2", "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

/* real brand logo mark, recolored to the brand hue via mask */
.partner-logo.has-mark::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

/* hover: dim the crowd, spotlight the one under the cursor */
.partner-ticker:hover .partner-logo {
  opacity: 0.45;
}

.partner-ticker .partner-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

body.dark-theme .partner-ticker {
  background: var(--bg-primary, #0a0a0a);
  color: var(--text-primary, #ffffff);
}

body.dark-theme .partner-ticker-label {
  color: var(--primary-color, #dc2626);
  background: linear-gradient(90deg, var(--bg-primary, #0a0a0a) 78%, rgba(10, 10, 10, 0));
}

body.dark-theme .partner-logo {
  color: #ffffff;
  opacity: 0.95;
}

body.dark-theme .partner-ticker:hover .partner-logo {
  opacity: 0.4;
}

body.dark-theme .partner-ticker .partner-logo:hover {
  opacity: 1;
}

@keyframes partnerTickerScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-ticker-row {
    animation: none;
  }
}

@media (max-width: 768px) {
  .partner-ticker {
    min-height: 40px;
    margin-bottom: 8px;
  }

  .partner-ticker-label {
    padding: 0 8px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .partner-ticker-row {
    gap: 26px;
    padding-right: 26px;
    animation-duration: 190s;
  }

  .partner-logo {
    font-size: 0.9rem;
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1003;
  background: #ffffff !important; /* 라이트모드 불투명 배경 */
  border-bottom: 1px solid transparent;
  box-shadow: none;
  color: var(--text-light);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  backdrop-filter: none !important;
}

/* 다크모드 헤더 배경 */
body.dark-theme .header {
  background: #0a0a0a !important; /* 다크모드 불투명 배경 */
  border-bottom: 1px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: none !important;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 0 24px;
  gap: 24px;
}

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

.header-search-wrapper {
  position: relative;
  flex: 1;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.search-type-select {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 40px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-type-select:hover {
  border-color: var(--primary-color);
}

.search-type-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.header-search-input {
  width: 100%;
  padding: 10px 50px 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 40px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}

.header-search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.header-search-button {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.header-search-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .header-search-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

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

.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border: 1px solid #d0d0d0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555555;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-icon-btn:hover {
  background: linear-gradient(135deg, #e8e8e8 0%, #dadada 100%);
  border-color: #b0b0b0;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

body.dark-theme .header-icon-btn {
  background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
  border: 1px solid #3a3a3a;
  color: #cccccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-theme .header-icon-btn:hover {
  background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
  border-color: #4a4a4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.header-icon-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 2px solid #1d4ed8 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

body.dark-theme .header-icon-btn.active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border: 2px solid #ff4444 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

.icon-svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.icon-svg-small {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  flex-shrink: 0;
}

.profile-menu-container {
  position: relative;
}

.profile-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.profile-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .profile-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #ffffff; /* 라이트모드 불투명 배경 */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

/* 다크모드 드롭다운 배경 */
body.dark-theme .profile-dropdown {
  background: #0a0a0a; /* 다크모드 불투명 배경 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.profile-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none !important; /* 모든 외곽선 제거 */
  outline: none; /* 포커스 외곽선도 제거 */
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.2s ease;
}

.profile-menu-item:hover {
  background: var(--card-hover);
}

.menu-item-icon {
  font-size: 1.2rem;
}

.profile-menu-divider {
  display: none; /* 구분선 제거 */
}

.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 8px;
  border-radius: 50%;
  transition: background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  z-index: 1006;
  margin-left: -8px;
}

.hamburger-menu:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .hamburger-menu:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hamburger-menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: all 0.2s ease;
  border-radius: 1px;
  margin: 0;
}

/* 라이트모드: 검정색 햄버거 */
.hamburger-menu {
  color: #030303;
}

/* 다크모드: 흰색 햄버거 */
body.dark-theme .hamburger-menu {
  color: #ffffff;
}

.header-logo {
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.logo-image {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.logo-dark { display: none; }
.dark-theme .logo-light { display: none; }
.dark-theme .logo-dark { display: inline; }

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

/* 다크모드에서는 흰색 유지 */
body.dark-theme .logo-text {
  color: #ffffff;
}

.theme-icon {
  font-size: 1.2rem;
}

/* 768px 미디어 쿼리 #1 - 통합됨 */
/* 세부 통계 모달 스타일 */
.stats-modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s ease;
}

.stats-modal.show {
  display: block;
}

.stats-modal-content {
  background-color: white;
  margin: 2% auto;
  padding: 30px;
  border-radius: 15px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease;
}

.stats-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 2px solid #f8f9fa;
  padding-bottom: 15px;
}

.stats-modal-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: visible;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 15px;
  padding: 25px;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card-title {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
}

body.dark-theme .stat-card {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 4px solid #dc2626;
  box-shadow: none;
}

body.dark-theme .stat-card-title {
  color: #cccccc;
}

body.dark-theme .stat-card-value {
  color: #ffffff;
}

.category-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.category-stats-table th {
  background: var(--primary-color);
  color: var(--text-light);
  padding: 12px;
  text-align: left;
  font-weight: 600;
}

.category-stats-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.category-stats-table tr:hover {
  background: var(--card-hover);
}

/* 다크모드에서 카테고리 통계 테이블 스타일 */
body.dark-theme .category-stats-table {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

body.dark-theme .category-stats-table th {
  background: var(--primary-color);
  color: var(--text-light);
}

body.dark-theme .category-stats-table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

body.dark-theme .category-stats-table tr:hover {
  background: var(--card-hover);
}

/* 카테고리 통계 제목 스타일 */
.category-stats-title {
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text-primary);
}

/* 다크모드에서 세부 통계 모달 스타일 */
body.dark-theme .stats-modal-content {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

body.dark-theme .stats-modal-header {
  border-bottom: 2px solid var(--border-color);
}

body.dark-theme .stats-modal-title {
  color: var(--text-primary);
}

/* 업데이트 시간 표시 스타일 */
.update-time-container {
  margin: 20px 0;
  padding: 12px 16px;
  background: var(--info-bg);
  border: 1px solid var(--info-color);
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
}

.update-time-label {
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 8px;
}

.update-time-value {
  color: var(--text-primary);
  font-weight: 600;
  font-family: "Courier New", monospace;
}

/* 다크모드에서 업데이트 시간 표시 */
body.dark-theme .update-time-container {
  background: var(--info-bg);
  border: 1px solid var(--info-color);
}

body.dark-theme .update-time-label {
  color: var(--text-secondary);
}

body.dark-theme .update-time-value {
  color: var(--text-primary);
}

/* 필터 및 정렬 컨트롤 스타일 */
.filter-sort-controls {
  background: transparent; /* body 배경 사용 */
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-theme .filter-sort-controls {
  border: 1px solid #e0e0e0;
}

.filter-section {
  margin-bottom: 20px;
  padding-top: 20px;
}

.filter-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

/* 접혔을 때 퀵 셀렉션 제목 - 테마색 + 두꺼운 선 */
.filter-sort-controls > .filter-title {
  border-bottom: 3px solid var(--primary-color);
}

/* 펼쳤을 때 필터 및 설정 제목 - 원래 스타일 */
.filter-sort-controls > .filter-title.expanded {
  border-bottom: 1px solid var(--border-color);
}

.filter-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 15px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  flex: 1;
}

.filter-group label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.filter-input {
  padding: 10px 15px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  font-weight: 500;
  min-width: 100px;
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow);
}

.range-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.range-separator {
  color: #666;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sort-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.sort-select {
  padding: 10px 15px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.sort-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.license-filter-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
}

.license-filter-control .sort-select {
  min-width: 210px;
}

.cc-license-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 6px;
  padding: 2px 6px;
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

body.dark-theme .cc-license-badge {
  color: #a7f3d0;
  background: rgba(6, 95, 70, 0.35);
  border-color: #047857;
}

/* 영상무덤 전용 — "이 영상은 이미 유튜브에 없다"를 제목 옆에 한 칸으로 박는다.
   CC BY 배지와 같은 자리·같은 치수를 쓰되 색만 회색으로 눕힌다. 무덤 목록에서
   유일하게 죽음을 말하는 요소라 눈에는 걸려야 하지만, 옆의 성과 배지(메가히트 등)와
   경쟁하는 빨강을 쓰면 표가 경보판이 된다. */
.gone-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 6px;
  color: #57534e;
  background: #e7e5e4;
  border: 1px solid #d6d3d1;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}

body.dark-theme .gone-badge {
  color: #d6d3d1;
  background: rgba(68, 64, 60, 0.6);
  border-color: #57534e;
}

.sort-order-toggle {
  display: flex;
  gap: 5px;
}

.sort-order-btn {
  padding: 10px 15px;
  border: 2px solid #e1e8ed;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sort-order-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.sort-order-btn:hover:not(.active) {
  border-color: #667eea;
  background: #f8f9fa;
}

/* 비디오 타입 토글 버튼 */
.video-type-toggle {
  display: flex;
  gap: 5px;
}

.video-type-btn {
  padding: 10px 15px;
  border: 2px solid #e1e8ed;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.video-type-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.video-type-btn:hover:not(.active) {
  border-color: var(--primary-color);
  background: #f8f9fa;
}

/* 채널 분석 기간 선택 버튼 */
.channel-analysis-controls {
  display: none;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
  padding: 9px 10px;
  overflow-x: auto;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/* --- 랭킹 목록 내 키워드 검색 -------------------------------------------
   6종 랭킹에서만 노출된다. 색은 전부 테마 토큰으로만 — 하드코딩하면
   다크모드에서 흰 배경 위 흰 글자가 난다. */
/* 검색은 분석기간 탭 줄의 오른쪽 끝에 붙인다.
   margin-left:auto 로 밀어야 기간 버튼 개수가 달라져도 항상 끝에 선다. */
.channel-list-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

/* 입력칸과 지우기 버튼만 감싸는 기준 상자.
   요약 문구까지 같은 relative 안에 두면 좁은 화면에서 버튼이 문구 위로 올라탄다. */
.channel-list-search-field {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
}

/* 돋보기 아이콘 — 입력칸 왼쪽 안쪽. 안내 문구를 지운 자리를 이 아이콘이 대신한다
   (문구가 없으므로 접근성 이름은 input 의 aria-label 이 맡는다). */
.channel-list-search-field::before {
  position: absolute;
  left: 9px;
  width: 13px;
  height: 13px;
  content: "";
  background-color: var(--text-secondary);
  pointer-events: none;
  -webkit-mask: var(--channel-search-icon) center / contain no-repeat;
  mask: var(--channel-search-icon) center / contain no-repeat;
}

:root {
  --channel-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M7 1.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM11 11l3.5 3.5'/%3E%3C/svg%3E");
}

.channel-list-search-input {
  width: 168px;
  padding: 5px 26px 5px 27px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.channel-list-search-input:focus {
  outline: none;
  border-color: var(--collect-btn-border);
}

/* 지우기 버튼 — 입력칸 오른쪽 안쪽에 겹쳐 둔다(입력 폭을 잡아먹지 않도록).
   입력칸의 오른쪽 padding 26px 안에 들어가므로 글자를 가리지 않는다. */
.channel-list-search-clear {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  padding: 0;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.channel-list-search-clear:hover {
  color: var(--text-primary);
}

.channel-list-search-summary {
  color: var(--text-secondary);
  font-size: 0.82rem;
  white-space: nowrap;
}

.channel-list-search-summary.is-empty {
  color: var(--grade-4);
  font-weight: 700;
}

@media (max-width: 768px) {
  .channel-list-search {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .channel-list-search-field {
    flex: 1 1 auto;
    min-width: 0;
  }
  .channel-list-search-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .channel-list-search-summary {
    flex: 1 1 100%;
    white-space: normal;
  }
}

.apply-filter-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  min-height: 42px;
}

.apply-filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.reset-filter-btn {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  min-height: 42px;
}

.reset-filter-btn:hover {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.quick-filter-reset {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}

.quick-filter-reset:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.quick-filter-reset:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (max-width: 380px) {
  #trendFilterControls > .filter-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  #allFiltersIcon { grid-column: 2; grid-row: 1; }
  .quick-filter-reset { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 0; }
}

.controls {
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  flex: 1;
}

.control-group label {
  font-weight: 600;
  color: #555;
  font-size: 0.9rem;
  white-space: nowrap;
}

select {
  padding: 10px 15px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  min-width: 150px;
}

/* 드롭다운 option 기본 스타일 (라이트 모드) */
option {
  background: #ffffff;
  color: #333333;
  padding: 8px;
}

option:hover {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* 분석 지표 드롭다운 optgroup 스타일 (라이트 모드) */
select#metricSelect optgroup,
select#metricSelectQuick optgroup {
  font-weight: 700;
  font-size: 0.9rem;
  font-style: normal;
  background: #6b7280 !important;
  color: #ffffff !important;
  padding: 8px;
  margin: 4px 0;
}

select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.refresh-btn {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  margin-left: auto;
  min-height: 42px;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(55, 65, 81, 0.3);
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.settings-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.settings-btn:hover {
  background: #545b62;
  transform: translateY(-2px);
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

.summary-card:hover {
  transform: translateY(-5px);
}

.summary-card .number {
  font-size: 2.2rem;
  font-weight: bold;
  color: #3b82f6;
  margin-bottom: 5px;
}

.summary-card .label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
}

.summary-card .detail-hint {
  font-size: 0.75rem;
  color: #999;
  margin-top: 5px;
  opacity: 0.8;
}

body.dark-theme .summary-card {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

body.dark-theme .summary-card .number {
  color: #dc2626;
}

body.dark-theme .summary-card .label {
  color: #cccccc;
}

body.dark-theme .summary-card .detail-hint {
  color: #999999;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* 구독자수 강조 스타일 */
.subscriber-badge {
  color: rgb(0, 0, 0);
  padding: 4px 10px;
  border-radius: 15px;
  font-weight: 700;
  font-size: 14px;
  display: inline-block;
  white-space: nowrap;
}

/* 업로드 날짜 강조 스타일 */
.upload-date-badge {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  white-space: nowrap;
  border: none;
  align-items: center;
}

/* 다크모드 업로드 날짜 */
body.dark-theme .upload-date-badge {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: #ffffff;
  border: none;
}

/* 날짜 형식 반응형 처리 */
/* 기본(1800px 이상): 전체 날짜 표시 */
.upload-date-badge .date-full {
  display: inline;
}

.upload-date-badge .date-short {
  display: none;
}

/* 2000px 이하: 정렬 퀵드롭다운 숨김 */
@media (max-width: 2000px) {
  .quick-selection-dropdowns .quick-sort-section {
    display: none !important;
  }
}

/* 1800px 이하: 짧은 날짜 표시 */
@media (max-width: 1800px) {
  .upload-date-badge .date-full {
    display: none;
  }

  .upload-date-badge .date-short {
    display: inline;
  }
}

.section {
  background: white;
  border-radius: 15px;
  padding: 25px;
  border: 1px solid #333333;
  overflow-x: auto; /* 가로 스크롤 추가 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 10px;
}

.section-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-left: 0px;
  line-height: 1.4rem;
  display: flex;
  align-items: center;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 12px;
  background: transparent;
}

body.dark-theme .section-title {
  color: #e0e6ed;
  border-color: #e0e6ed;
}

.section-icon {
  font-size: 1.4rem;
  line-height: 1.4rem;
  display: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* fixed에서 auto로 변경 */
  font-size: 0.95rem;
}

/* 데스크탑에서만 최소 너비 설정 */
@media (min-width: 769px) {
  .data-table {
    min-width: 1200px;
  }
}

.data-table th {
  background: transparent; /* body 배경 사용 */
  padding: 15px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: none;
  position: sticky;
  top: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 1rem;
}

.data-table td {
  padding: 15px 10px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.95rem;
}
/* 1) 기본: 헤더/셀 모두 가운데 정렬 */
.data-table th,
.data-table td {
  text-align: center;
}

/* 2) 텍스트 가독성 필요한 컬럼(영상 정보=3, 채널 정보=4)은 좌측 정렬로 오버라이드 */
.data-table th:nth-child(3),
.data-table td:nth-child(3) {
  text-align: left;
}
.data-table th:nth-child(4),
.data-table td:nth-child(4) {
  text-align: center;
}

/* ===== 테이블 컬럼 너비 설정 (카테고리가 2번째) ===== */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
  width: 4%;
  min-width: 60px;
} /* 순위 */

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
  width: 50px;
  min-width: 50px;
  max-width: 70px;
} /* 순위 */

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
  width: 25%;
  min-width: 250px;
} /* 채널 정보 */

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
  width: 70%;
  min-width: 900px;
  white-space: normal; /* 영상 제목은 줄바꿈 허용 */
} /* 영상 정보 */

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
  width: 3%;
  min-width: 25px;
} /* 조회수 */

.data-table th:nth-child(6),
.data-table td:nth-child(6) {
  width: 10%;
  min-width: 100px;
} /* 업로드 날짜 */

.data-table th:nth-child(7),
.data-table td:nth-child(7) {
  width: 12%;
  min-width: 110px;
} /* 시간당 조회수 */

.data-table th:nth-child(8),
.data-table td:nth-child(8) {
  width: 100px;
  min-width: 100px;
} /* 시간당 조회수 */

.data-table th:nth-child(9),
.data-table td:nth-child(9),
.data-table th:nth-child(10),
.data-table td:nth-child(10),
.data-table th:nth-child(11),
.data-table td:nth-child(11) {
  width: 85px;
  min-width: 85px;
} /* 바이럴, 기여도, 성과지수 */

/* ===== 채널 분석 테이블 전용 스타일 ===== */
.channel-table {
  min-width: 900px;
  table-layout: fixed;
}

/* 채널 테이블 - collection-header (숨김) */
.channel-table th:nth-child(1),
.channel-table td:nth-child(1) {
  width: 0;
  min-width: 0;
  padding: 0;
  display: none;
}

/* 채널 테이블 - 순위 */
.channel-table th:nth-child(2),
.channel-table td:nth-child(2) {
  width: 50px;
}

/* 채널 테이블 - 카테고리 */
.channel-table th:nth-child(3),
.channel-table td:nth-child(3) {
  width: 80px;
  text-align: center;
}

/* 채널 테이블 - 채널 정보 */
.channel-table th:nth-child(4),
.channel-table td:nth-child(4) {
  width: 120px;
  max-width: 120px;
  text-align: left;
  vertical-align: middle;
}

/* 채널 테이블 - 최신 영상 (1600px 이상에서만) */
.channel-table th:nth-child(5) {
  min-width: 300px;
  text-align: center;
}

.channel-table td:nth-child(5) {
  min-width: 300px;
  text-align: left;
}

.channel-table th:nth-child(6),
.channel-table td:nth-child(6) {
  width: 160px;
}

.channel-table th:nth-child(7),
.channel-table td:nth-child(7) {
  width: 90px;
}

/* 채널 테이블 - 추가 데이터 컬럼들 (8번째 이후) */
.channel-table th:nth-child(n + 8),
.channel-table td:nth-child(n + 8) {
  width: 85px;
  max-width: 85px;
}

/* 지뢰밭 4개 표는 index.html의 8개 visible-column colgroup을 유일한 폭 계약으로 쓴다.
   공용 hidden status DOM은 colgroup에서 제외하고 channel-table nth-child 폭/숨김 규칙을 격리한다. */
.channel-table.minefield-table {
  --minefield-table-width: 100%;
  width: max(100%, var(--minefield-table-width));
  min-width: var(--minefield-table-width);
  max-width: none;
  table-layout: fixed;
}

.data-table.channel-table.minefield-table th[class*="minefield-col-"],
.data-table.channel-table.minefield-table td[class*="minefield-col-"] {
  display: table-cell !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.data-table.channel-table.minefield-table th:first-child,
.data-table.channel-table.minefield-table td:first-child {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
}

.channel-table.minefield-table .minefield-col-rank,
.channel-table.minefield-table .minefield-col-category {
  text-align: center !important;
}

.channel-table.minefield-table .minefield-col-category .category-tag {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

/* 진단 3열은 값이 배지·점수·버튼 하나씩이라 셋 다 가운데 정렬이다. */
.data-table.channel-table.minefield-table .minefield-col-grade,
.data-table.channel-table.minefield-table .minefield-col-signals,
.data-table.channel-table.minefield-table .minefield-col-benchmark {
  text-align: center !important;
  overflow: hidden;
}

/* ── 진단 3열: 등급 · 신호 · 같은 주제 비교 ────────────────────────────────
   2026-09-06: 한 칸 안에 카드를 그리던 것을 헤더 3열로 폈다. 라벨이 헤더로 올라가
   행마다 반복되지 않고, 카드 껍데기(테두리·좌측 액센트·min-height 82px)가 사라져
   행 높이가 내용만큼만 남는다. 색은 카드가 아니라 각 셀이 변수로 가진다. */
.minefield-diagnosis-cell {
  --diagnostic-active-surface: var(--minefield-danger-surface);
  --diagnostic-active-surface-hover: var(--minefield-danger-surface-hover);
  --diagnostic-active-text: var(--minefield-danger-text);
  --diagnostic-active-border: var(--minefield-danger-border);
  --diagnostic-emphasis: var(--minefield-danger-emphasis);
  vertical-align: middle;
}

.minefield-diagnosis-cell.graveyard,
.minefield-diagnosis-cell.dormant {
  --diagnostic-active-surface: var(--minefield-warning-surface);
  --diagnostic-active-surface-hover: var(--minefield-warning-surface-hover);
  --diagnostic-active-text: var(--minefield-warning-text);
  --diagnostic-active-border: var(--minefield-warning-border);
  --diagnostic-emphasis: var(--minefield-warning-emphasis);
}

.minefield-diagnosis-cell.subscriber-loss {
  --diagnostic-active-surface: var(--minefield-danger-surface);
}

/* 성장 진단: 신호 개수에 따라 3단계로 색 강도를 낮춘다. */
.minefield-diagnosis-cell.growth {
  --diagnostic-active-surface: var(--growth-base-surface);
  --diagnostic-active-surface-hover: var(--growth-base-surface-hover);
  --diagnostic-active-text: var(--growth-base-text);
  --diagnostic-active-border: var(--growth-base-border);
  --diagnostic-emphasis: var(--growth-base-emphasis);
}

.minefield-diagnosis-cell.growth.growth-tier-3 {
  --diagnostic-active-surface: var(--growth-strong-surface);
  --diagnostic-active-surface-hover: var(--growth-strong-surface-hover);
  --diagnostic-active-text: var(--growth-strong-text);
  --diagnostic-active-border: var(--growth-strong-border);
  --diagnostic-emphasis: var(--growth-strong-emphasis);
}

.minefield-diagnosis-cell.growth.growth-tier-2 {
  --diagnostic-active-surface: var(--growth-mid-surface);
  --diagnostic-active-surface-hover: var(--growth-mid-surface-hover);
  --diagnostic-active-text: var(--growth-mid-text);
  --diagnostic-active-border: var(--growth-mid-border);
  --diagnostic-emphasis: var(--growth-mid-emphasis);
}

.minefield-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 9px;
  color: var(--diagnostic-active-text);
  background: var(--diagnostic-active-surface);
  border: 1px solid var(--diagnostic-active-border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.minefield-grade-badge::before {
  width: 8px;
  height: 8px;
  content: "";
  background: currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

/* 성장 등급 배지는 위험 마름모 대신 상승 삼각형을 쓴다. */
.minefield-diagnosis-cell.growth .minefield-grade-badge::before {
  width: 0;
  height: 0;
  background: transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
  border-left: 5px solid transparent;
  border-radius: 0;
  transform: none;
}

/* 신호는 칩을 나열하지 않고 점수 한 칸으로 환산한다(5개 = 100점).
   칩으로 두면 성장 6종처럼 라벨이 긴 지표에서 한 칸에 한 줄씩 쌓여 행 높이가
   다섯 배가 된다(2026-09-06 대표님 지적). 켜진 신호 이름은 title 툴팁에 남는다. */
.minefield-signal-score {
  display: inline-block;
  min-width: 42px;
  padding: 3px 8px;
  color: var(--diagnostic-active-text);
  background: var(--diagnostic-active-surface);
  border: 1px solid var(--diagnostic-active-border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: help;
}

/* 걸린 신호가 없으면(0점) 위험색을 쓰지 않는다. */
.minefield-signal-score[data-signal-count="0"] {
  color: var(--minefield-inactive-text);
  background: var(--minefield-inactive-surface);
  border-color: var(--minefield-inactive-border);
}

.minefield-benchmark-trigger {
  flex: 0 0 auto;
  width: 100%;
  padding: 6px 8px;
  color: var(--minefield-inactive-text);
  background: var(--minefield-inactive-surface);
  border: 1px solid var(--minefield-inactive-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.69rem;
  font-weight: 800;
  cursor: pointer;
}

.minefield-benchmark-trigger:hover {
  color: var(--diagnostic-active-text);
  background: var(--diagnostic-active-surface-hover);
  border-color: var(--diagnostic-active-border);
}

.minefield-benchmark-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 12, 20, 0.68);
  backdrop-filter: blur(8px);
}

.minefield-benchmark-modal[hidden] {
  display: none;
}

.minefield-benchmark-dialog {
  width: min(760px, 100%);
  max-height: min(760px, 88vh);
  overflow: auto;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

.minefield-benchmark-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 17px;
  border-bottom: 1px solid var(--border-color);
}

.minefield-benchmark-dialog h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.15rem;
}

.minefield-benchmark-dialog p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.minefield-benchmark-close {
  width: 34px;
  height: 34px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font-size: 1.2rem;
  cursor: pointer;
}

.minefield-benchmark-results {
  display: grid;
  gap: 10px;
  padding: 18px 24px 24px;
}

.minefield-benchmark-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.minefield-benchmark-result:hover {
  background: var(--card-hover);
  border-color: var(--border-hover);
}

.minefield-benchmark-result img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
}

.minefield-benchmark-avatar-fallback {
  width: 42px;
  height: 42px;
  background:
    radial-gradient(circle at 50% 35%, rgba(100, 116, 139, 0.55) 0 20%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(100, 116, 139, 0.42) 0 38%, transparent 40%),
    rgba(148, 163, 184, 0.14);
  border-radius: 10px;
}

.minefield-benchmark-state {
  padding: 28px 18px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.minefield-benchmark-result-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minefield-benchmark-result-meta {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.74rem;
}

.minefield-benchmark-retention {
  color: var(--grade-1);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .channel-analysis-controls {
    flex-wrap: wrap;
    overflow: visible;
  }

  .minefield-benchmark-modal {
    padding: 12px;
  }

  .minefield-benchmark-dialog-header,
  .minefield-benchmark-results {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.data-table tr:hover {
  background: #f8f9fa;
}

/* 클릭 가능한 링크 스타일 개선 */
.video-title,
.channel-name {
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
  display: block;
  margin-bottom: 0px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.3s ease;
}

.video-title:hover,
.channel-name:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* 채널 정보 레이아웃 개선 */
.channel-info {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.3;
  align-items: center;
}

.channel-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.video-info {
  font-size: 14px;
  color: #666;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}

.video-thumbnail {
  width: 120px;
  height: 68px;
  border-radius: 6px;
  object-fit: cover;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

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

.metric {
  font-weight: bold;
  color: #374151;
  font-size: 14px;
}

.metric.positive {
  color: #374151;
}

.metric.viral {
  color: #374151;
}

.metric.performance {
  color: #374151;
}

/* 다크모드 metric 색상 */
body.dark-theme .metric {
  color: #9ca3af;
}

body.dark-theme .metric.positive {
  color: #9ca3af;
}

body.dark-theme .metric.viral {
  color: #9ca3af;
}

body.dark-theme .metric.performance {
  color: #9ca3af;
}

body.dark-theme .metric.highlighted {
  color: #d1d5db;
  font-weight: 800;
}

.category-tag {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* 바이럴 지수 표시 */
.viral-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* 메가히트 - 머스타드/골드 텍스트 */
.viral-indicator.high {
  color: #fbbf24;
}

/* 히트 - 주황 텍스트 */
.viral-indicator.medium {
  color: #fb923c;
}

/* 일반 - 흰색 텍스트 */
.viral-indicator.low {
  color: #ffffff;
}

/* 다크모드 */
body.dark-theme .viral-indicator {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

body.dark-theme .viral-indicator.high {
  color: #fbbf24;
}

body.dark-theme .viral-indicator.medium {
  color: #fb923c;
}

body.dark-theme .viral-indicator.low {
  color: #ffffff;
}

/* 다운로드 버튼 */
.download-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  margin: 2px;
}

.download-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  transform: translateY(-1px);
}

.download-btn:disabled {
  background: var(--disabled-bg);
  cursor: not-allowed;
}

body.dark-theme .download-btn {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}

body.dark-theme .download-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.download-btn.downloading {
  background: #f59e0b;
}

/* 날짜 표시 개선 */
.upload-date {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 500;
}

.loading {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 500;
}

.loading::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-color);
  padding: 15px;
  border-radius: 8px;
  margin: 10px 0;
  text-align: center;
}

.no-data {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px;
  font-style: italic;
}

/* 다운로드 모달 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease;
}

.modal.show {
  display: block;
}

.modal-content {
  background-color: var(--bg-secondary);
  margin: 5% auto;
  padding: 30px;
  border-radius: 15px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 15px;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-primary);
}

.close {
  color: var(--text-secondary);
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

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

.download-list {
  display: grid;
  gap: 15px;
}

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
}

.download-info {
  flex: 1;
}

.download-filename {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.download-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.download-actions {
  display: flex;
  gap: 10px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-download {
  background: var(--primary-color);
  color: var(--button-text);
}

.btn-download:hover {
  background: var(--primary-hover);
}

.btn-delete {
  background: var(--error-color);
  color: var(--button-text);
}

.btn-delete:hover {
  background: var(--error-hover);
}

/* 통합 상단 컨트롤 패널 스타일 */
.top-control-panel {
  background: var(--bg-secondary);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px var(--shadow);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  border: 1px solid var(--border-color);
}

.control-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 8px;
  margin-bottom: 5px;
}

.control-row {
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
}

/* 다운로드 컨트롤 스타일 */
.download-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-tabs-compact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.platform-tab {
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.platform-tab:hover {
  border-color: var(--primary-color);
  background: var(--card-bg);
}

.platform-tab.active {
  border-color: var(--primary-color);
  background: var(--bg-primary);
  color: var(--button-text);
}

.url-input-container-compact {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.url-input-compact {
  flex: 1;
  min-width: 300px;
  padding: 10px 12px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.url-input-compact:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow);
}

.download-url-btn-compact {
  padding: 10px 16px;
  background: var(--success-gradient);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.download-url-btn-compact:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.3);
}

.download-url-btn-compact:disabled {
  background: var(--disabled-bg);
  cursor: not-allowed;
  transform: none;
}

.download-url-btn-compact.downloading {
  background: #f59e0b;
}

.platform-info-compact {
  padding: 8px 12px;
  background: var(--card-bg);
  border-radius: 6px;
  border-left: 3px solid var(--primary-color);
  font-size: 0.85rem;
}

.info-text {
  color: var(--text-secondary);
}

.detected-platform {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--primary-color);
}

.download-progress-compact {
  padding: 10px;
  background: var(--card-bg);
  border-radius: 6px;
}

.progress-bar-compact {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill-compact {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text-compact {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

/* 링크 버튼 스타일 */
.link-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

/* 해외채널 필터 스타일 추가 */
.overseas-filter-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-width: 180px;
}

.overseas-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overseas-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
  font-size: 0.9rem;
}

.overseas-checkbox:hover {
  background-color: #e2e8f0;
}

.overseas-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.overseas-label {
  font-weight: 500;
  color: #374151;
  user-select: none;
}

.overseas-status {
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
  padding: 4px 6px;
  background: #ffffff;
  border-radius: 3px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.overseas-status.active {
  color: #dc2626;
  font-weight: 600;
}

.overseas-status.overseas-only {
  color: #059669;
  font-weight: 600;
}

.overseas-status.exclude-overseas {
  color: #7c3aed;
  font-weight: 600;
}

/* 체크박스가 선택되었을 때 스타일 */
.overseas-checkbox input[type="checkbox"]:checked + .overseas-label {
  color: #1f2937;
  font-weight: 600;
}

/* 768px 미디어 쿼리 #2 - 통합됨 */
.link-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 5px;
}

.link-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-btn {
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.link-btn.trend {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.link-btn.trend:hover {
  background: #0369a1;
  color: white;
}

.link-btn.community {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.link-btn.community:hover {
  background: #d97706;
  color: white;
}

.link-btn.news {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.link-btn.news:hover {
  background: #dc2626;
  color: white;
}

.link-btn.management {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.link-btn.management:hover {
  background: #4b5563;
  color: white;
}

.link-btn.platform {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.link-btn.platform:hover {
  background: #7c3aed;
  color: white;
}

.link-btn.stats {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

.link-btn.stats:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  color: white;
}

/* 새로운 버튼 스타일 */
.link-btn.ai-tool {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: 1px solid #a855f7;
}

.link-btn.ai-tool:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
}

.link-btn.edit-tool {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: 1px solid #f59e0b;
}

.link-btn.edit-tool:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
}

.link-btn.report-tool {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: white;
  border: 1px solid #16a34a;
}

.link-btn.report-tool:hover:not(:disabled) {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  color: white;
}

.link-btn.report-tool:disabled {
  background: #9ca3af;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 0.5;
}

/* 통합 검색 (유튜브 스타일) */
.unified-search-container {
  width: 100%;
  max-width: 700px;
  margin: 20px auto 30px;
  padding: 0 20px;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 40px;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px var(--shadow);
}

.unified-search-input {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 1rem;
  outline: none;
}

.unified-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.unified-search-button {
  padding: 14px 28px;
  background: var(--button-primary);
  color: var(--button-text);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid var(--border-color);
}

.unified-search-button:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.unified-search-button:active {
  transform: scale(0.98);
}

/* 자동완성 드롭다운 - 통합 검색용 */
.search-input-wrapper .autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
}

.search-input-wrapper .autocomplete-dropdown:not(:empty) {
  display: block;
}

/* 반응형 */
@media (max-width: 768px) {
  .unified-search-container {
    margin: 15px auto 20px;
    padding: 0 15px;
  }

  .unified-search-input {
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .unified-search-button {
    padding: 12px 20px;
    font-size: 1rem;
  }
}

/* 채널 검색 관련 스타일 */
.channel-search-container {
  position: relative;
  min-width: 250px;
}

.channel-search-input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 2px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.channel-search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.search-icon:hover {
  color: #667eea;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 500;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.autocomplete-dropdown.show {
  display: block;
}

.autocomplete-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.autocomplete-item:hover {
  background-color: #f8f9fa;
}

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

.autocomplete-channel-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.autocomplete-channel-info {
  font-size: 0.85rem;
  color: #666;
}

.autocomplete-subscriber {
  font-size: 0.8rem;
  color: #667eea;
  font-weight: 600;
}

.no-results {
  padding: 15px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.search-results-section {
  background: var(--bg-primary);
  border: 1px solid #333333;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: none;
}

body.dark-theme .search-results-section {
  border: 1px solid #e0e0e0;
}

.search-results-section.show {
  display: block;
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f8f9fa;
}

.search-results-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}

.clear-search-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.clear-search-btn:hover {
  background: #545b62;
  transform: translateY(-1px);
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
}

.channel-search-result {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 320px;
}

.channel-search-result:hover {
  border-color: var(--border-hover);
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--shadow);
}

.channel-result-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
  min-height: 2.1rem;
  display: flex;
  align-items: flex-start;
}

.channel-result-category {
  display: inline-block;
  background: #667eea;
  color: white !important;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 15px;
  text-shadow: none;
}

.channel-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 15px;
}

.channel-result-stats-extended {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.channel-result-stat {
  text-align: center;
  padding: 12px 8px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
}

.channel-result-stat-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.channel-result-stat-label {
  font-size: 0.9rem;
  color: #666;
}

.channel-result-latest {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 18px;
  flex-grow: 1;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.view-channel-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  margin-top: auto;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-channel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

/* 모바일 반응형 */
/* 1200px 미디어 쿼리 - 통합됨 */
/* 768px 미디어 쿼리 - 통합됨 */
.exclude-category-container {
  position: relative;
  min-width: 200px;
  z-index: 1001; /* 이 줄 추가 */
}

/* 카테고리 제외 스타일 */
.exclude-category-container .exclude-dropdown-menu.show {
  display: block;
}

.exclude-dropdown-btn {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  line-height: 1.2;
  min-height: 42px;
}

.exclude-dropdown-btn:hover,
.exclude-dropdown-btn.active {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* 다크모드에서 해외채널 필터 드롭다운 활성 상태 수정 */
body.dark-theme .exclude-dropdown-btn:hover,
body.dark-theme .exclude-dropdown-btn.active {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  background: #2d2d44;
}

.exclude-dropdown-btn.active .dropdown-arrow {
  transform: rotate(180deg);
}

.exclude-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  display: none;
  margin-top: 2px;
}

.exclude-dropdown-menu.show {
  display: block;
}

.exclude-option {
  padding: 10px 15px;
  border-bottom: 1px solid #e5e7eb;
}

.exclude-option:last-child {
  border-bottom: none;
}

.exclude-option label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  margin: 0;
}

.exclude-option:hover {
  background-color: #fef2f2;
}

.exclude-option input[type="checkbox"] {
  margin: 0;
  accent-color: #dc2626;
}

.exclude-divider {
  border: none;
  border-top: 1px solid #e9ecef;
  margin: 0;
}

.excluded-categories-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 0;
}

.excluded-categories-tags:empty {
  display: none; /* 빈 상태일 때 완전히 숨김 */
}

.exclude-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dc2626;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.exclude-tag .remove-tag {
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.exclude-tag .remove-tag:hover {
  opacity: 1;
}

/* Footer: 다운로드 섹션 (사이드바 접힌 64px 기준 고정, 토스트와 동일 중심축) */
.download-report-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.download-report-section {
  margin: 30px 0 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.download-report-card {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  color: white;
  box-shadow: 0 10px 30px rgba(55, 65, 81, 0.3);
  max-width: 600px;
  width: 90%;
}

.download-report-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.download-report-desc {
  font-size: 0.95rem;
  margin-bottom: 20px;
  opacity: 0.9;
  line-height: 1.4;
}

.download-report-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  margin-bottom: 15px;
}

.download-report-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

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

.download-report-btn.downloading {
  background: rgba(245, 158, 11, 0.3);
  border-color: rgba(245, 158, 11, 0.5);
}

.download-report-info {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 10px;
}

.last-updated {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  margin-top: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

.loading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #16a34a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 5px;
}

/* 구글 트렌드 연하늘색 테마 통일 */
.link-btn {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1565c0 !important;
  border: 1px solid #90caf9 !important;
  transition: all 0.3s ease !important;
}

.link-btn:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%) !important;
  color: #0d47a1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3) !important;
}

.link-group-title {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
  color: #1565c0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  border: 1px solid #90caf9 !important;
}

/* 가로 배치용 필터 섹션 스타일 - 반응형 개선 */
.filter-row-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.filter-section-half {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 20px;
}

/* 컴팩트한 입력 필드들 - 영상지표와 일관성 맞춤 */
.filter-input-compact {
  padding: 10px 15px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.3s ease;
  width: 150px;
  min-width: 100px;
  font-weight: 500;
}

.filter-input-compact:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow);
}

.channel-search-input-compact {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 2px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  font-weight: 500;
}

.channel-search-input-compact:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow);
}

/* 컴팩트한 필터 그룹 - 반응형 개선 */
.filter-group-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  flex: 1;
}

.filter-group-compact label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.range-input-group-compact {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.range-input-group-compact .range-separator {
  color: #666;
  font-weight: 600;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* 다운로드 버튼 완료 상태 */
.download-btn.completed {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  color: white;
}

.download-btn.completed:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

/* 다크모드 다운로드 완료 상태 */
body.dark-theme .download-btn.completed {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  color: white;
}

body.dark-theme .download-btn.completed:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

body.dark-theme .download-btn.completed:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

/* 링크 행 레이아웃 */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 15px;
}

/* 링크 버튼 기본 스타일 */
.link-btn {
  position: relative;
  z-index: 1;
  margin: 0;
  flex-shrink: 0;
}

/* 인증 버튼 컨테이너 */
#authButtons {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

#authButtons .link-btn {
  margin: 0;
  z-index: 2;
}

/* 사용자명 표시 스타일 */
#authButtons .link-btn[style*="background: #28a745"] {
  border: 2px solid #1e7e34;
  font-weight: 600;
}

/* 버튼 겹침 방지 */
.link-group .link-row {
  min-height: 45px;
  margin-bottom: 12px;
}

/* 컴팩트 필터 버튼 */
.apply-filter-btn-compact {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  height: fit-content;
  align-self: flex-end;
}

.apply-filter-btn-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(55, 65, 81, 0.3);
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

/* 버튼형 필터 스타일 */
.filter-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

.filter-button {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  user-select: none;
}

.filter-button:hover {
  border-color: var(--primary-color);
  background: var(--card-hover);
  color: var(--primary-color);
}

.filter-button.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-color: #3b82f6;
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.filter-button.active:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #2563eb;
}

body.dark-theme .filter-button {
  background: #0a0a0a;
  border-color: #333333;
  color: #cccccc;
}

body.dark-theme .filter-button.active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-color: #dc2626;
  color: white;
}

body.dark-theme .filter-button.active:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  border-color: #b91c1c;
}

/* 닫힘 시 필터 뷰 - 1줄 인라인 */
.collapsed-filter-view {
  margin-bottom: 15px;
}

.filter-summary-inline {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.filter-summary-inline .summary-section {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-summary-inline .summary-label {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-right: 2px;
}

.filter-summary-inline .summary-divider {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: bold;
}

/* 요약 버튼 - selected-filter-tag와 동일 스타일 */
.filter-summary-inline .summary-btn {
  padding: 5px 10px;
  font-size: 0.74rem;
}

.filter-summary-inline .summary-btn.active {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border-color: #374151;
  color: white;
  box-shadow: none;
}

.filter-summary-inline .summary-btn.active:hover {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-color: #1f2937;
}

body.dark-theme .filter-summary-inline .summary-btn.active {
  background: #2a2a2a;
  border-color: #4b5563;
  color: #f9fafb;
}

body.dark-theme .filter-summary-inline .summary-btn.active:hover {
  background: #3a3a3a;
  border-color: #4b5563;
}

.filter-summary-inline .summary-btn .value {
  font-weight: 600;
}

/* 라이트 퀵 셀렉션의 선택 요약도 흰색 표면을 유지한다. */
body:not(.dark-theme) .filter-summary-inline .summary-btn,
body:not(.dark-theme) .selected-filter-tag {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: none;
}
body:not(.dark-theme) .filter-summary-inline .summary-btn:hover,
body:not(.dark-theme) .selected-filter-tag:hover {
  background: #fff;
  border-color: #9ca3af;
  transform: none;
  box-shadow: none;
}
body:not(.dark-theme) .filter-summary-inline .summary-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* 퀵 날짜 버튼 - filter-button 스타일 그대로 사용 */
.filter-summary-inline .quick-date-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* 퀵 셀렉션 드롭다운 우측 정렬 */
.quick-selection-dropdowns {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

/* 분석지표는 기본적으로 통합 셀렉터 하나를 유지한다. */
.quick-metric-split-controls {
  display: none;
}

/* 접힌 상태 분석지표 드롭다운 - 모든 드롭다운 통일 */
select.quick-metric-select,
div.quick-metric-select,
button.quick-metric-select {
  padding: 8px 12px;
  padding-right: 28px;
  font-size: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

body.dark-theme select.quick-metric-select,
body.dark-theme div.quick-metric-select,
body.dark-theme button.quick-metric-select {
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
  border: 1px solid var(--border-color);
}

button.quick-split-metric-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: inherit;
  line-height: normal;
  text-align: left;
}

button.quick-split-metric-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.quick-split-metric-trigger.is-placeholder {
  color: var(--text-secondary);
}

#categoryQuickMenu {
  min-width: 220px;
  padding: 0;
  max-height: none;
  overflow: hidden;
}

.quick-category-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.quick-category-tabs button {
  flex: 1;
  padding: 10px 12px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.quick-category-tabs button[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: #3b82f6;
  font-weight: 700;
}

.quick-category-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0;
}

#categoryQuickMenu .quick-multi-item {
  width: 100%;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  text-align: left;
}

#categoryQuickMenu .quick-multi-item[aria-pressed="true"] {
  color: #3b82f6;
  font-weight: 700;
}

#categoryQuickDropdown button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

body .quick-multi-menu.quick-split-metric-menu,
body.dark-theme .quick-multi-menu.quick-split-metric-menu {
  min-width: 100%;
  color: var(--text-primary);
  background: var(--input-bg);
  border-color: var(--border-color);
}

body .quick-split-metric-menu .quick-multi-item,
body.dark-theme .quick-split-metric-menu .quick-multi-item {
  color: var(--text-primary);
  background: var(--input-bg);
}

body .quick-split-metric-menu .quick-multi-item:hover,
body .quick-split-metric-menu .quick-multi-item:focus-visible,
body.dark-theme .quick-split-metric-menu .quick-multi-item:hover,
body.dark-theme .quick-split-metric-menu .quick-multi-item:focus-visible {
  color: var(--text-primary);
  background: var(--card-hover);
  outline: none;
}

body .quick-split-metric-menu .quick-multi-item:focus-visible,
body.dark-theme .quick-split-metric-menu .quick-multi-item:focus-visible {
  box-shadow: inset 3px 0 0 var(--primary-color);
}

body .quick-split-metric-menu .quick-multi-item.active,
body .quick-split-metric-menu .quick-multi-item[aria-selected="true"],
body.dark-theme .quick-split-metric-menu .quick-multi-item.active,
body.dark-theme .quick-split-metric-menu .quick-multi-item[aria-selected="true"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--primary-color) 16%, var(--input-bg));
  box-shadow: inset 3px 0 0 var(--primary-color);
  font-weight: 700;
}

.quick-metric-select:hover {
  border-color: var(--primary-color);
}

.quick-metric-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* 영상 트렌드·채널 트렌드·지뢰밭 세 개만 <button>이라, 마우스로 고르는 순간
   포커스가 남아 --primary-color(다크에서 #dc2626) 링이 계속 둘러싸인다.
   나머지 퀵 셀렉터는 <div>라 포커스를 못 받아 이 셋에만 빨간 테두리가 보였다.
   마우스 클릭에는 링을 없애고, 키보드 이동일 때만 중립색으로 남긴다. */
button.quick-split-metric-trigger:focus {
  border-color: var(--border-color);
  box-shadow: none;
}

button.quick-split-metric-trigger:focus-visible {
  border-color: var(--text-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-secondary) 35%, transparent);
}

/* 퀵 셀렉션 드롭다운 - 창밖 삐져나감 방지 */
.quick-metric-select {
  max-width: 144px;
}

/* 여유 폭에서만 영상/채널/지뢰밭을 독립 셀렉터로 펼친다.
   2399px까지는 기존 통합 분석지표가 유일한 진입점이다. */
@media (min-width: 2400px) {
  .quick-selection-dropdowns .quick-metric-combined-section {
    display: none !important;
  }

  .quick-selection-dropdowns .quick-metric-split-controls {
    display: contents;
  }

  .quick-selection-dropdowns .quick-metric-split-section {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
  }

  .quick-selection-dropdowns .quick-metric-split-section .summary-label {
    margin-right: 0;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .quick-selection-dropdowns .quick-metric-split-section .quick-metric-select {
    width: 126px;
    min-width: 112px;
    max-width: 126px;
    padding-right: 24px;
  }
}

/* 필터 그룹 제목 */
.filter-button-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: block;
}

/* 선택된 필터 표시 */
.filter-selection-count {
  font-size: 0.8rem;
  color: #667eea;
  font-weight: 600;
  margin-left: 8px;
}

/* 선택된 필터 표시 영역 */
.selected-filters-display {
  margin-top: 20px;
  padding: 15px;
  background: transparent; /* body 배경 사용 */
  border: 1px solid var(--border-color);
  border-radius: 10px;
  border-left: 4px solid var(--primary-color);
}

.selected-filters-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #667eea;
}

.selected-filters-content {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}

.selected-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.selected-filter-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.selected-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.selected-filter-tag {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selected-filter-tag:hover {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  transform: translateY(-1px);
}

.selected-filter-tag .remove-tag {
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.selected-filter-tag .remove-tag:hover {
  opacity: 1;
}

/* 영상 UI 스타일로 테이블 수정 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 20px 0;
  font-size: 15px; /* 글씨 크기 복원 */
}

.data-table th {
  background: transparent;
  border: none;
  padding: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  box-sizing: border-box;
}

.data-table th > div {
  background: transparent;
  color: #333 !important;
  border: 2px solid #d1d5db;
  padding: 8px 6px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* 순위 헤더 - 넘침 방지 */
.data-table th:nth-child(2) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-theme .data-table th > div {
  color: #e0e6ed !important;
  border: 2px solid #e0e6ed;
}

.data-table td {
  padding: 10px 12px; /* 행 간격 축소 */
  box-sizing: border-box;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-size: 14px; /* 글씨 크기 증가 */
}

.data-table tr:hover {
  background: #f8f9ff;
  transition: background 0.2s ease;
}

/* 컬럼 너비 조정 - 영상 UI 스타일 */
.data-table th:nth-child(1), /* 순위 */
.data-table td:nth-child(1) {
  width: 45px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.data-table th:nth-child(2), /* 카테고리 */
.data-table td:nth-child(2) {
  width: 120px;
  text-align: center;
}

.data-table th:nth-child(3), /* 채널 정보 */
.data-table td:nth-child(3) {
  width: 120px;
  text-align: center;
}

.data-table th:nth-child(4), /* 구독자 */
.data-table td:nth-child(4) {
  width: 120px;
  text-align: center;
}

.data-table th:nth-child(5), /* 최신 영상 */
.data-table td:nth-child(5) {
  width: 300px;
  max-width: 300px;
}

/* 추가 컬럼들 */
.data-table th:nth-child(6),
.data-table td:nth-child(6) {
  width: 160px;
  text-align: center;
}

.data-table th:nth-child(7),
.data-table td:nth-child(7) {
  width: 100px;
  text-align: center;
}

/* 채널명 스타일 - 영상 제목과 비슷하게 */
.channel-name {
  font-weight: 700;
  color: #2d3748;
  text-decoration: none;
  font-size: 14px;
  display: block;
  line-height: 1.2;
  word-break: break-word;
  margin-bottom: 0;
}

.channel-name:hover {
  color: #667eea;
  text-decoration: underline;
}

/* 카테고리 태그 - 영상 UI와 동일하게 */
.category-tag {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  display: inline-block;
}

/* 구독자 정보 */
.subscriber-info {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
}

/* 영상 정보 스타일 */
.video-info {
  text-align: left;
}

.latest-video-title {
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1.4;
  color: #2d3748;
  font-size: 14px;
}

.upload-date {
  color: #6b7280;
  font-size: 14px;
}

.metric.daily-views.highlighted {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

.metric.positive {
  font-weight: 700;
}

.metric.performance {
  font-weight: 700;
}

.metric.viral {
  font-weight: 700;
}

/* 반응형 처리 */
@media (max-width: 1400px) {
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    width: 160px !important;
    min-width: 160px !important;
  } /* 채널 정보 */

  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 800px !important;
    min-width: 450px !important;
  } /* 영상 정보 */

  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: 30px !important;
    min-width: 30px !important;
  } /* 조회수 */

  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 110px !important;
    min-width: 110px !important;
  } /* 시간당 조회수 */
}

/* 1200px 미디어 쿼리 - 통합됨 */

/* 태블릿 반응형 */
/* 768px 미디어 쿼리 - 통합됨 */

/* 카테고리별 구분을 위한 미세한 색상 차이 */
.trend {
  filter: hue-rotate(0deg) !important;
}
.news {
  filter: hue-rotate(10deg) !important;
}
.ai-tool {
  filter: hue-rotate(20deg) !important;
}
.edit-tool {
  filter: hue-rotate(30deg) !important;
}
.platform {
  filter: hue-rotate(40deg) !important;
}
.community {
  filter: hue-rotate(50deg) !important;
}
.stats {
  filter: hue-rotate(60deg) !important;
}
.management {
  filter: hue-rotate(70deg) !important;
}
.report-tool {
  filter: hue-rotate(80deg) !important;
}

/* 햄버거 메뉴 스타일 - 위쪽에서 정의됨 */

/* 사이드 메뉴 스타일 */
.side-menu {
  position: fixed;
  top: 56px;
  left: 0;
  width: 180px;
  height: calc(100vh - 56px);
  background: #ffffff !important; /* 라이트모드 불투명 흰색 */
  border: none;
  border-right: none;
  transition: width 0.1s ease;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 다크모드 사이드 메뉴 배경 */
body.dark-theme .side-menu {
  background: #141414 !important; /* 다크모드 불투명 배경 */
  border-right: 1px solid #333333;
}

body:not(.menu-expanded) .side-menu {
  width: 64px;
}

.side-menu-header {
  display: none;
}

.side-menu-content {
  padding: 12px 4px;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.side-menu-content.loaded {
  opacity: 1;
}

/* 펼쳐진 상태에서 좌측 패딩 */
body.menu-expanded .side-menu-content {
  padding-left: 8px;
  padding-right: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  height: 48px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text-primary);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 0;
  margin: 4px 0;
  white-space: nowrap;
}

/* 닫힌 상태에서 세로 정렬 */
body:not(.menu-expanded) .menu-item {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  min-height: 74px;
  padding: 10px 6px;
  margin: 2px 0;
}

.menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  background: rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

body.dark-theme .menu-item.active {
  background: rgba(255, 255, 255, 0.15);
}

body.menu-expanded .menu-item.active {
  background: rgba(0, 0, 0, 0.1);
}

body.dark-theme.menu-expanded .menu-item.active {
  background: rgba(255, 255, 255, 0.15);
}

.menu-icon {
  color: var(--text-primary);
  transition: all 0.2s ease;
  min-width: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 펼쳐진 상태 */
body.menu-expanded .menu-icon {
  min-width: 48px;
  width: 48px;
}

.menu-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* 닫힌 상태에서 아이콘 크게 */
body:not(.menu-expanded) .menu-icon {
  width: 100%;
  min-width: 100%;
  margin-bottom: 4px;
}

body:not(.menu-expanded) .menu-icon svg {
  width: 24px;
  height: 24px;
}

.menu-text {
  opacity: 1;
  transition: none;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
  letter-spacing: 0;
}

/* 닫힌 상태에서 작은 텍스트로 표시 */
body:not(.menu-expanded) .menu-text {
  display: block;
  font-size: 10px;
  text-align: center;
  width: 100%;
  max-width: 64px;
  opacity: 1;
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
  overflow: visible;
  padding: 0 2px;
}

/* 사이드 메뉴 오버레이 */
.side-menu-overlay {
  display: none;
}

/* Multiple select 스타일 */
select[multiple] {
  min-height: 80px;
  overflow-y: auto;
}

select[multiple] option {
  padding: 6px 8px;
  margin: 1px 0;
  border-radius: 3px;
}

select[multiple] option:checked {
  background: var(--primary-color);
  color: white;
}

/* 다크모드 스타일 */
body.dark-theme .side-menu {
  background: var(--bg-secondary);
  border: none !important;
  border-right: none !important;
}

body.dark-theme .side-menu-header {
  background: var(--bg-primary);
  border-bottom: none;
}

body.dark-theme .close-menu:hover {
  background: #0a0a0a;
}

/* 페이지 시스템 스타일 */
.page-container {
  width: 100%;
}

.page {
  width: 100%;
  display: block;
}

.page.hidden {
  display: none;
}

/* 페이지네이션 버튼 스타일 */
.pagination-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color, #ddd);
  background: var(--bg-primary, white);
  color: var(--text-primary, #333);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 40px;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-hover, #f5f5f5);
  border-color: var(--border-hover, #999);
}

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

.pagination-btn.active {
  background: var(--accent-color, #007bff);
  color: white;
  border-color: var(--accent-color, #007bff);
}

/* 다크모드 페이지네이션 */
body.dark-theme .pagination-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

body.dark-theme .pagination-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

body.dark-theme .pagination-btn.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

/* 통계 섹션 접기/펼치기 스타일 */
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.stats-header:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.stats-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.toggle-icon {
  font-size: 1.2rem;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
}

.toggle-icon.expanded {
  transform: rotate(180deg);
}

/* 접힌 상태의 summary-cards */
.summary-cards.collapsed {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
  opacity: 0;
  transition: all 0.3s ease;
}

.summary-cards:not(.collapsed) {
  max-height: 500px;
  opacity: 1;
  transition: all 0.3s ease;
}

/* 다크모드 스타일 */
body.dark-theme .stats-header {
  background: #141414;
  border-color: #333333;
}

body.dark-theme .stats-header:hover {
  background: #0a0a0a;
  border-color: #dc2626;
}

body.dark-theme .top-control-panel {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* 다크모드 흰색 outline 적용 */
body.dark-theme .controls,
body.dark-theme .section,
body.dark-theme .data-table,
body.dark-theme .filter-sort-controls,
body.dark-theme .search-results-section,
body.dark-theme .autocomplete-dropdown,
body.dark-theme .channel-search-result,
body.dark-theme .video-result-item,
body.dark-theme .filter-section-half {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}

/* 영상 다운로드 페이지 스타일 */
.download-page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: var(--bg-secondary);
  border-radius: 15px;
  border: 1px solid var(--border-color);
}

.download-page-header h2 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.download-page-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.download-page-content {
  max-width: 100%;
  margin: 0 auto;
}

.download-section {
  background: #ffffff;
  border-radius: 15px;
  padding: 15px;
  border: 1px solid #d0d5dd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 15px;
}

.platform-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
  flex-wrap: wrap;
}

.platform-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.platform-info-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.platform-tab {
  padding: 8px 16px;
  border: 2px solid var(--border-color);
  border-radius: 25px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.platform-tab:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
}

.platform-tab.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.url-input-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.url-input {
  flex: 1;
  min-width: 300px;
  padding: 10px 14px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.url-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.download-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.download-btn.downloading {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  cursor: not-allowed;
}

.loading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  margin-left: 8px;
}

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

.download-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.folder-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.folder-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

.platform-info {
  text-align: center;
  padding: 8px;
  background: var(--card-bg);
  border-radius: 12px;
  margin-bottom: 10px;
}

.info-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.download-progress {
  margin-top: 10px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: var(--success-gradient);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 다크모드 스타일 */
body.dark-theme .download-page-header {
  background: #141414;
  border-color: #333333;
}

body.dark-theme .download-section {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none;
}

body.dark-theme .url-input {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

body.dark-theme .url-input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

body.dark-theme .platform-tab {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

body.dark-theme .platform-tab:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

body.dark-theme .platform-tab.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

body.dark-theme .platform-info {
  background: #0a0a0a;
}

body.dark-theme .progress-bar {
  background: #0a0a0a;
}

/* 반응형 디자인 */
/* 768px 미디어 쿼리 - 통합됨 */

/* 생산성 링크 페이지 스타일 */
.productivity-page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: var(--bg-secondary);
  border-radius: 15px;
  border: 1px solid var(--border-color);
}

.productivity-page-header h2 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.productivity-page-header p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.productivity-page-content {
  max-width: 100%;
  margin: 0 auto;
}

.link-section {
  margin-bottom: 10px;
  background: var(--bg-secondary);
  border-radius: 15px;
  padding: 12px;
  border: 1px solid #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.link-section-title {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border-color);
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.productivity-link {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 500;
}

.productivity-link:hover {
  border-color: var(--primary-color);
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.link-icon {
  font-size: 1.2rem;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.link-name {
  font-size: 1rem;
  color: var(--text-primary);
}

/* download.html 전용 정사각형 링크 */
.productivity-link-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 8px;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 500;
  gap: 4px;
}

.productivity-link-square:hover {
  border-color: var(--primary-color);
  background: var(--card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.productivity-link-square .link-icon {
  font-size: 1.3rem;
  margin-right: 0;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.productivity-link-square .link-name {
  font-size: 0.7rem;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.1;
  word-break: keep-all;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 카테고리별 색상 */
.productivity-link.trend:hover,
.productivity-link-square.trend:hover {
  border-color: #10b981;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.productivity-link.ai:hover,
.productivity-link-square.ai:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.productivity-link.dev:hover,
.productivity-link-square.dev:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.productivity-link.tool:hover,
.productivity-link-square.tool:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.productivity-link.stats:hover,
.productivity-link-square.stats:hover {
  border-color: #ef4444;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.productivity-link.report:hover,
.productivity-link-square.report:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.productivity-link.management:hover,
.productivity-link-square.management:hover {
  border-color: #84cc16;
  box-shadow: 0 4px 15px rgba(132, 204, 22, 0.2);
}

.productivity-link.news:hover,
.productivity-link-square.news:hover {
  border-color: #0891b2;
  box-shadow: 0 4px 15px rgba(8, 145, 178, 0.2);
}

.productivity-link.social:hover,
.productivity-link-square.social:hover {
  border-color: #ec4899;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
}

.productivity-link.edit:hover,
.productivity-link-square.edit:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}

/* 다크모드 스타일 */
body.dark-theme .productivity-page-header {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

body.dark-theme .link-section {
  background: transparent;
  border: 1px solid #e0e0e0 !important;
}

body.dark-theme .link-section-title {
  border-bottom-color: var(--border-color);
}

body.dark-theme .productivity-link-square {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

body.dark-theme .productivity-link-square:hover {
  background: var(--card-hover);
  border-color: var(--primary-color);
}

/* 채널 통계 스타일 */
.channel-stats {
  font-size: 13px;
  color: #666;
  margin-top: 0px !important;
  padding-top: 0px !important;
  line-height: 1.2;
}

/* 채널 분석 테이블 전용 - 채널명과 구독자 간격 제거 */
.channel-table .channel-name {
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.channel-table .channel-stats {
  margin-top: 0px !important;
  padding-top: 0px !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.channel-table .subscriber-count {
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.subscriber-count {
  display: inline-block;
  color: #666;
  font-weight: 500;
}

/* 다크모드 채널 통계 */
body.dark-theme .channel-stats {
  color: #a0a8b0;
}

body.dark-theme .subscriber-count {
  color: #a0a8b0;
}

/* 태블릿 반응형 디자인 (1600px 이하부터 세로 정렬) */
/* 1600px 미디어 쿼리 - 통합됨 */

/* 모바일 반응형 디자인 (768px 이하) */
/* 768px 미디어 쿼리 - 통합됨 */

/* 헤더 버튼 컨테이너 */
.header-buttons-container {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 헤더 버튼 공통 스타일 */
.header-button {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
  width: 140px; /* 고정 너비 */
  height: 44px; /* 고정 높이 (padding 8px + border 2px * 2 + 텍스트 높이 고려) */
  transition: all 0.3s ease;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  box-sizing: border-box; /* border와 padding 포함한 크기 계산 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.header-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow);
}

/* 수집 모드 활성 상태 스타일 */
.collection-mode-toggle.active {
  background: var(--success-gradient);
  border-color: var(--success-color);
  color: white;
}

.collection-mode-toggle.active:hover {
  background: var(--success-gradient);
  border-color: var(--success-hover);
}

/* 1600px 미디어 쿼리 #2 - 통합됨 */
/* 업로드 날짜 스타일 */
.upload-date-badge {
  text-align: center;
}

/* 1200px 이하에서 약간 축소 */
/* 1200px 미디어 쿼리 - 통합됨 */

/* 1000px 이하에서 더 축소 - 비활성화됨 (하단 통합 미디어 쿼리 사용) */
/* @media (max-width: 1000px) {
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 26px !important;
  }

  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 120px !important;
  }

  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
    min-width: 200px !important;
  }

  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 100px !important;
  }

  .data-table .video-thumbnail {
    width: 48px !important;
    height: 36px !important;
  }
} */

/* 800px 이하에서 최대 축소 + 말줄임표 - 비활성화됨 (하단 통합 미디어 쿼리 사용) */
/* @media (max-width: 800px) {
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 25px !important;
  }

  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 100px !important;
  }

  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
    min-width: 150px !important;
  }

  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 90px !important;
  }

  .data-table .channel-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .data-table .video-title {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .data-table .video-info {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .data-table .video-thumbnail {
    width: 45px !important;
    height: 34px !important;
    flex-shrink: 0;
  }
} */

/* ============================================
   통합 반응형 디자인 (HTML에서 이동 완료)
   ============================================ */

/* 기본 테이블 컬럼 너비 설정 (769px 이상만 적용) */
@media (min-width: 769px) {
  .data-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .data-table th:nth-child(1) {
    width: 30px !important;
  } /* 체크박스 */
  .data-table th:nth-child(2) {
    width: 50px !important;
  } /* 순위 */
  .data-table th:nth-child(3) {
    width: 90px !important;
    min-width: 90px !important;
  } /* 카테고리 */
  /* 영상 테이블용 컬럼 너비 */
  .data-table:not(.channel-table) th:nth-child(4) {
    width: 130px !important;
  } /* 채널 정보 */
  .data-table:not(.channel-table) th:nth-child(5),
  .data-table:not(.channel-table) td:nth-child(5) {
    width: 300px !important;
    min-width: 300px !important;
  } /* 영상 정보 */
  .data-table:not(.channel-table) th:nth-child(6) {
    width: 160px !important;
  } /* 업로드 날짜 */
  .data-table:not(.channel-table) th:nth-child(7) {
    width: 110px !important;
  } /* 조회수 */
  .data-table:not(.channel-table) th:nth-child(8) {
    width: 110px !important;
  } /* 시간당 조회수 */
  .data-table:not(.channel-table) th:nth-child(9),
  .data-table:not(.channel-table) td:nth-child(9) {
    width: 85px !important;
  } /* 바이럴 */
  .data-table:not(.channel-table) th:nth-child(10),
  .data-table:not(.channel-table) td:nth-child(10) {
    width: 85px !important;
  } /* 기여도 */
  .data-table:not(.channel-table) th:nth-child(11),
  .data-table:not(.channel-table) td:nth-child(11) {
    width: 85px !important;
  } /* 성과지수 */
}

/* 채널 테이블용 컬럼 너비 */
.data-table.channel-table th:nth-child(1) {
  width: 30px !important;
} /* 체크박스 */
.data-table.channel-table th:nth-child(2) {
  width: 30px !important;
} /* 순위 */
.data-table.channel-table th:nth-child(3) {
  width: 70px !important;
} /* 카테고리 */
.data-table.channel-table th:nth-child(4) {
  width: 120px !important;
  max-width: 120px !important;
} /* 채널 정보 */
.data-table.channel-table th:nth-child(5) {
  min-width: 300px !important;
  text-align: center !important;
} /* 최신 영상 */
.data-table.channel-table td:nth-child(5) {
  min-width: 300px !important;
} /* 최신 영상 */
.data-table.channel-table th:nth-child(6),
.data-table.channel-table td:nth-child(6) {
  width: 160px !important;
} /* 업로드 날짜 */
.data-table.channel-table th:nth-child(7),
.data-table.channel-table td:nth-child(7) {
  width: 90px !important;
} /* 조회수 */
.data-table.channel-table th:nth-child(8),
.data-table.channel-table td:nth-child(8) {
  width: 85px !important;
  max-width: 85px !important;
} /* 종합점수 등 */
.data-table.channel-table th:nth-child(n + 9),
.data-table.channel-table td:nth-child(n + 9) {
  width: 85px !important;
  max-width: 85px !important;
} /* 나머지 추가 컬럼들 */

/* 영상 정보 컬럼 내부 요소 스타일 */
.data-table .video-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  overflow: visible !important;
}

.data-table .video-thumbnail {
  width: 60px !important;
  height: 45px !important;
  flex-shrink: 0 !important;
}

.data-table .video-title {
  flex: 1 !important;
  min-width: 0 !important;
  word-wrap: break-word !important;
  line-height: 1.3 !important;
}

/* Keep desktop video table columns deterministic across browsers. */
.video-table .status-header,
.video-table .status-cell {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.video-table th > div {
  max-width: 100%;
}

/* 카테고리 셀은 좌우 여백을 2px씩 줄여 배지에 자리를 더 준다(12px → 10px). */
.video-table td:nth-child(3) {
  padding-left: 10px;
  padding-right: 10px;
}

/* 카테고리 배지: 한국어 최장(일본플레이리스트 120px)은 열 안에 통째로 들어가고,
   그보다 긴 en/ja 표기(Japan Movies & Drama 160px, 海外ファッション＆スタイル 193px)만
   말줄임으로 접는다. 열 밖으로 넘어가 채널 열을 덮던 것을 막는 안전망. */
.video-table .category-tag {
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.video-table .upload-date-badge {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.video-table .metric {
  white-space: nowrap;
}

.video-table td:nth-child(6),
.video-table td:nth-child(7),
.video-table td:nth-child(8),
.video-table td:nth-child(12) {
  overflow: hidden;
}

@media (min-width: 1504px) {
  .video-table {
    table-layout: fixed !important;
    min-width: 1535px !important;
  }

  /* 순위 헤더가 '순…'으로 잘리는 경계선(필요 54px)이라 4px 만 준다. */
  .video-table col.rank-col {
    width: 54px;
  }

  /* 카테고리는 '일본플레이리스트'(배지 120px)까지 통째로 들어가야 한다.
     늘린 43px은 아래 지표 3열에서 그대로 빼왔다(표 총폭 1640px 불변). */
  .video-table col.category-col {
    width: 143px;
  }

  .video-table col.channel-col {
    width: 170px;
  }

  .video-table col.video-col {
    width: 430px;
  }

  .video-table col.date-col {
    width: 170px;
  }

  .video-table col.views-col {
    width: 103px;
  }

  .video-table col.hourly-col {
    width: 120px;
  }

  /* 지표 열의 바닥값 = max(헤더 글자폭, 값 라벨 폭). 한국어 실측:
     바이럴 99(🔥 메가히트) · 기여도 87(헤더) · 성과지수 100 · 배율 54(헤더).
     ⚠ 값 라벨 폭은 "이미 두 줄로 접힌 셀"을 재면 작게 나온다 — nowrap 으로 재야 한다.
     ⚠ 여기서 더 줄이면 헤더가 '성과지…'로 잘리거나 '🔥 메가히트'가 두 줄로 접힌다. */
  .video-table col.viral-col {
    width: 99px;
  }

  .video-table col.contribution-col {
    width: 87px;
  }

  .video-table col.performance-col {
    width: 100px;
  }

  .video-table col.ratio-col {
    width: 54px;
  }

  .video-table col.download-col {
    width: 110px;
  }

  .video-table col.automation-col {
    width: 90px;
  }
}

/* 반응형 디자인 - 1600px 이하부터 태블릿 모드 (업로드 날짜 표시) */
/* 1600px 미디어 쿼리 - 통합됨 */

/* 반응형 디자인 - 중간 화면 (1200px ~ 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: 300px !important;
  } /* 영상 정보 */
}

/* 반응형 디자인 - 작은 화면 (768px ~ 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 100px !important;
  } /* 채널 정보 */
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: 250px !important;
  } /* 영상 정보 */
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    width: 80px !important;
  } /* 조회수 */
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 80px !important;
  } /* 업로드 날짜 */
}

/* 반응형 디자인 - 모바일 (768px 이하) */
@media (max-width: 767px) {
  .data-table {
    font-size: 12px !important;
  }

  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    width: 30px !important;
  } /* 순위 */
  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 70px !important;
  } /* 채널 정보 */
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
  } /* 영상 정보 */
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    width: 60px !important;
  } /* 조회수 */
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 70px !important;
  } /* 업로드 날짜 */

  .data-table .video-thumbnail {
    width: 50px !important;
    height: 38px !important;
  }

  .data-table .video-info {
    gap: 5px !important;
  }
}

/* ============================================
   HTML 인라인 CSS 이동 (전체 1340줄)
   ============================================ */

/* 가로 배치용 필터 섹션 스타일 */
.filter-row-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}

.filter-section-half {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 20px;
  overflow: visible !important;
}

/* 일반필터 내부 요소들의 width 설정 */
/* 일반 필터 그리드 레이아웃 */
.general-filter-grid {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex-wrap: nowrap; /* 줄바꿈 금지 */
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden; /* 넘치는 부분 숨김 */
}

.general-filter-grid .filter-group-compact {
  flex: 1 1 0; /* 균등 분배, 축소 가능 */
  min-width: 0; /* min-width 제거하여 축소 가능하게 */
  padding: 15px;
  border-right: 1px solid var(--border-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden; /* 내부 overflow 처리 */
}

.general-filter-grid .filter-group-compact:last-child {
  border-right: none;
}

/* 작은 화면에서 버튼 세로 배치 */
@media (max-width: 800px) {
  /* 버튼 그룹 세로 배치 */
  .general-filter-grid .filter-button-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .general-filter-grid .filter-button {
    width: 100%;
  }

  /* 성과 지표 및 날짜 필터 내부 flexbox 세로 배치 */
  .general-filter-grid .filter-group-compact > div[style*="flex"] {
    flex-direction: column !important;
  }

  .general-filter-grid .filter-group-compact > div[style*="flex"] > div {
    width: 100% !important;
    min-width: unset !important;
    flex: unset !important;
  }
}

/* 텍스트 좌측 정렬 및 overflow 처리 */
.general-filter-grid .filter-group-compact label {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 버튼 기본 스타일 */
.general-filter-grid .filter-button {
  text-align: left;
}

/* 버튼 그룹 overflow 처리 */
.general-filter-grid .filter-button-group {
  overflow: hidden;
}

/* Select 요소 스타일 */
.general-filter-grid select {
  width: 100%;
  text-align: left;
}

/* 날짜 선택 버튼 좌측 정렬 */
.general-filter-grid .date-picker-btn {
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}

/* 세부 조정 영역 좌측 정렬 */
.general-filter-grid .custom-filter-section {
  text-align: left;
}

.general-filter-grid .subscriber-range-info {
  text-align: left;
}

.general-filter-grid .direct-input-container {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
}

/* ============================================
   핵심 반응형 미디어 쿼리 복구
   ============================================ */

/* 태블릿 반응형 디자인 (1800px 이하부터 태블릿 모드) */
@media (max-width: 1800px) {
  /* 헤더 태블릿 최적화 */
  .header h1 {
    font-size: 4rem !important;
  }

  .header .subtitle {
    font-size: 1rem !important;
  }

  /* 태블릿 헤더 버튼 스타일 - 세로 정렬 시작 */
  .header-content .header-buttons-container,
  .header-buttons-container,
  div.header-buttons-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .header-button {
    font-size: 0.85rem !important;
    padding: 7px 14px !important;
    width: 130px !important;
    height: 42px !important;
  }

  /* 태블릿 테이블 스타일 - 필수 컬럼만 표시 */
  .data-table {
    font-size: 13px !important;
  }

  /* 필수 컬럼만 표시 - 순위/채널정보/영상정보/조회수/업로드날짜 */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 20px !important;
  } /* 체크박스 */
  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    width: 35px !important;
  } /* 순위 */
  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 80px !important;
  } /* 채널 정보 */
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
    min-width: 200px !important;
  } /* 영상 정보 */
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    width: 80px !important;
  } /* 업로드 날짜 */
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 60px !important;
  } /* 조회수 */

  /* 카테고리 - 너비 유지 및 중앙 정렬 */
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    width: 80px !important;
    min-width: 80px !important;
    text-align: center !important;
  }

  /* ⚠ 여기서 시간당조회수·바이럴·기여도·성과지수·배율·자동화 6개를 한꺼번에
     숨기고 있었다. 1800px 하나로 6칸이 동시에 사라져 1401~1800px 구간이 통째로
     같은 모습이었고, 화면에 자리가 남아도 열이 돌아오지 않았다(대표님 지적).
     → 파일 맨 끝 "영상표 열 계단식 감축"으로 옮겨 한 칸씩 떨어지게 했다.
     여기에 되살리지 말 것. 채널표(.channel-table)는 이 규칙과 무관하다. */

  /* 자동화 헤더/셀 클래스로도 숨기기 */
  .automation-header,
  .automation-cell {
    display: none !important;
  }

  /* 채널 테이블은 모든 컬럼 표시 유지 */
  .data-table.channel-table th:nth-child(1),
  .data-table.channel-table td:nth-child(1) {
    display: none !important;
  } /* 상태 - 숨김 */
  .data-table.channel-table th:nth-child(2),
  .data-table.channel-table td:nth-child(2) {
    width: 25px !important;
    display: table-cell !important;
  } /* 순위 */
  .data-table.channel-table th:nth-child(3),
  .data-table.channel-table td:nth-child(3) {
    width: 60px !important;
    display: table-cell !important;
  } /* 카테고리 */
  .data-table.channel-table th:nth-child(4),
  .data-table.channel-table td:nth-child(4) {
    width: 120px !important;
    max-width: 120px !important;
    display: table-cell !important;
  } /* 채널 정보 */
  .data-table.channel-table th:nth-child(5),
  .data-table.channel-table td:nth-child(5) {
    display: none !important;
  } /* 시간당 조회수 - 숨김 */
  .data-table.channel-table th:nth-child(6),
  .data-table.channel-table td:nth-child(6) {
    width: 70px !important;
    display: table-cell !important;
  } /* 조회수 추이(스파크라인) - 항상 표시 */
  .data-table.channel-table th:nth-child(7),
  .data-table.channel-table td:nth-child(7) {
    display: none !important;
  } /* 구독자대비 - 숨김 */
  .data-table.channel-table th:nth-child(8),
  .data-table.channel-table td:nth-child(8) {
    display: none !important;
  } /* 증감률 - 숨김 */
  .data-table.channel-table th:nth-child(n + 9),
  .data-table.channel-table td:nth-child(n + 9) {
    width: 70px !important;
    max-width: 70px !important;
    display: table-cell !important;
  } /* 추가 데이터 컬럼들 - 1800px 이하에서 더 좁게 */

  /* 스파크라인 칼럼 항상 표시 */
  .data-table.channel-table th.sparkline-col,
  .data-table.channel-table td.sparkline-col {
    display: table-cell !important;
    width: 70px !important;
  }

  .video-thumbnail {
    width: 55px !important;
    height: 41px !important;
  }

  /* 카테고리 태그 태블릿 최적화 */
  .category-tag {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-align: center !important;
  }

  /* 컨테이너 태블릿 최적화 */
  .container {
    padding: 15px !important;
  }

  /* 다운로드 페이지 반응형 - 태블릿 */
  .download-layout-wrapper {
    flex-direction: column;
  }

  .download-left-section {
    flex: 1;
    min-width: 100%;
    width: 100%;
  }

  .download-right-section {
    flex: 1;
    width: 100%;
  }

  .link-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

/* 모바일 반응형 디자인 (768px 이하) */
@media (max-width: 768px) {
  /* 모바일에서는 사이드 메뉴를 오버레이 방식으로 변경 */
  .container {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 20px;
  }

  .side-menu {
    top: 0 !important; /* 헤더와 같은 높이에서 시작 */
    padding-top: 80px !important; /* 헤더 높이보다 조금 더 여백 확보 */
    left: -64px !important; /* 완전히 숨김 */
    width: 64px !important; /* 항상 접힌 상태 */
    height: 100vh !important;
    transition: left 0.3s ease !important;
    z-index: 1005 !important;
  }

  body.menu-expanded .side-menu {
    left: 0 !important; /* 나타남 */
    width: 64px !important; /* 넓어지지 않음 */
  }

  .side-menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    pointer-events: none;
  }

  body.menu-expanded .side-menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 모바일에서 메뉴 텍스트 항상 표시 */
  .menu-text {
    opacity: 1 !important;
    width: auto !important;
    font-size: 0.75rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .menu-icon {
    min-width: 100% !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .menu-item {
    height: auto !important;
    flex-direction: column !important;
    padding: 8px 4px !important;
    min-height: 64px !important;
  }

  /* 헤더 반응형 스타일 */
  .header {
    height: auto !important; /* 모바일에서 자동 높이 */
    z-index: 1002 !important;
  }

  .header-content {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 12px;
    height: auto !important; /* 모바일에서 자동 높이 */
  }

  .header-left {
    gap: 12px;
  }

  .logo-image {
    height: 28px;
  }

  .logo-text {
    font-size: 1.3rem;
  }

  /* 모바일에서는 검색창을 전체 너비로 */
  .header-search-wrapper {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }

  /* 모바일에서 본문이 헤더와 겹치지 않도록 상단 여백 추가 */
  body {
    padding-top: 130px !important; /* 헤더 높이 + 여유 공간 */
  }

  .container {
    margin-top: 0 !important;
  }

  .header-right {
    order: 2;
    gap: 4px;
  }

  .header-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .profile-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  /* 컨테이너 모바일 최적화 */
  .container {
    padding: 10px !important;
  }

  /* 다운로드 페이지 반응형 - 모바일 */
  .download-layout-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .download-left-section {
    min-width: 100%;
  }

  .link-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
  }

  .link-section {
    padding: 15px;
    margin-bottom: 20px;
  }

  .link-section-title {
    font-size: 1rem;
  }

  .productivity-link {
    font-size: 0.85rem;
    padding: 10px 8px;
  }

  /* 테이블 반응형 스타일 */
  .data-table {
    font-size: 12px !important;
  }

  /* 이 설정은 7191번 라인의 모바일 전용 설정으로 대체됨 - 주석처리 */
  /* .data-table th:nth-child(1) {
    width: 25px !important;
  }
  .data-table th:nth-child(2) {
    width: 30px !important;
  }
  .data-table th:nth-child(4) {
    width: 70px !important;
  }
  .data-table th:nth-child(5) {
    width: auto !important;
  }
  .data-table th:nth-child(6) {
    width: 60px !important;
  }
  .data-table th:nth-child(7) {
    width: 70px !important;
  }
  .data-table th:nth-child(3) {
    width: 80px !important;
    min-width: 80px !important;
  } */

  .data-table th:nth-child(8), /* 시간당조회수 */
  .data-table th:nth-child(9), /* 바이럴지수 */
  .data-table th:nth-child(10), /* 다운로드 */
  .data-table td:nth-child(8),
  .data-table td:nth-child(9),
  .data-table td:nth-child(10) {
    display: none !important;
  }

  .video-thumbnail {
    width: 50px !important;
    height: 38px !important;
  }

  .video-info {
    gap: 5px !important;
  }

  /* 카테고리 태그 모바일 최적화 */
  .category-tag {
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-align: center !important;
  }

  /* 필터 섹션 모바일 최적화 */
  .filter-row-horizontal {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  #generalFilterContent .filter-row {
    flex-direction: column;
  }

  #generalFilterContent .filter-row .filter-group-compact {
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    padding: 10px !important;
  }

  #generalFilterContent .filter-row .filter-group-compact:last-child {
    border-bottom: none;
  }

  /* 상단 컨트롤 패널 모바일 최적화 */
  .top-control-panel {
    padding: 15px;
    gap: 20px;
  }

  .control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .control-group {
    min-width: auto;
  }

  /* URL 입력 모바일 최적화 */
  .url-input-container {
    flex-direction: column;
  }

  .url-input {
    min-width: auto;
  }

  .platform-tabs {
    flex-direction: column;
    align-items: center;
  }

  /* 링크 그리드 모바일 최적화 */
  .link-grid {
    grid-template-columns: 1fr;
  }

  .productivity-link {
    padding: 12px 16px;
  }

  .link-section {
    padding: 20px;
  }

  .filter-section-half {
    padding: 15px;
  }

  .search-tabs {
    flex-direction: column;
    gap: 8px;
  }

  .search-tab {
    text-align: left;
  }
}

/* 날짜 선택 버튼 크기 조정 */
#generalFilterContent .date-picker-btn {
  max-width: 140px !important;
  width: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

#generalFilterContent .date-picker-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 70%;
}

#generalFilterContent .date-picker-btn .calendar-icon {
  font-size: 12px;
  margin-left: 5px;
}

/* 달력 범위 내 날짜를 초록색으로 표시 */
.calendar-day.in-range {
  background: #dcfce7 !important;
}

/* 컬렉션 모드 체크박스 스타일 */
.collection-header {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 8px 4px !important;
  text-align: center !important;
}

.collection-cell {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 8px 4px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.item-checkbox {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer;
}

.calendar-day.in-range:hover {
  background: #16a34a !important;
  color: white !important;
}

/* 다크모드 검색 결과 스타일 */
body.dark-theme .video-result-item {
  background: #141414;
  border-color: #333333;
  color: #ffffff;
}

body.dark-theme .video-result-title {
  color: #f3f4f6;
}

body.dark-theme .video-result-channel {
  color: #9ca3af;
}

body.dark-theme .video-result-stats {
  color: #9ca3af;
}

body.dark-theme .video-result-item:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

body.dark-theme .autocomplete-dropdown {
  background: #374151;
  border-color: #6366f1;
}

body.dark-theme .autocomplete-item {
  color: #ffffff;
  border-bottom-color: #4b5563;
}

body.dark-theme .autocomplete-item:hover,
body.dark-theme .autocomplete-item.highlighted {
  background-color: #4b5563;
}

body.dark-theme .autocomplete-channel {
  color: #8b5cf6;
}

body.dark-theme .autocomplete-video {
  color: #a78bfa;
}

body.dark-theme .autocomplete-meta {
  color: #d1d5db;
}

/* 검색 키워드 하이라이트 - 테마 색상 통일 */
.search-highlight,
.autocomplete-item mark {
  background: rgba(102, 126, 234, 0.25) !important;
  color: inherit !important;
  padding: 2px 4px;
  border-radius: 3px;
}

body.dark-theme .search-highlight,
body.dark-theme .autocomplete-item mark {
  background: rgba(129, 140, 248, 0.35) !important;
  color: inherit !important;
}

body.dark-theme .autocomplete-channel-name {
  color: #ffffff !important;
}

body.dark-theme .autocomplete-channel-info {
  color: #d1d5db !important;
}

body.dark-theme .pagination button {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

body.dark-theme .pagination button:hover:not(:disabled) {
  background: #6366f1;
  border-color: #6366f1;
}

body.dark-theme .pagination button.active {
  background: #6366f1;
  border-color: #6366f1;
}

body.dark-theme .pagination .page-info {
  color: #9ca3af;
}

body.dark-theme .channel-search-result {
  background: #141414;
  border-color: #333333;
  color: #ffffff;
}

body.dark-theme .channel-search-result:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

body.dark-theme .channel-result-name {
  color: #f3f4f6;
}

body.dark-theme .channel-result-category {
  color: #a78bfa !important;
  background: #4c1d95;
}

body.dark-theme .channel-result-stat {
  background: #2a253d;
  border-color: #2c233e;
}

body.dark-theme .channel-result-stat-value {
  color: #f3f4f6;
}

body.dark-theme .channel-result-stat-label {
  color: #e2e8f0;
}

body.dark-theme .channel-result-latest {
  color: #d1d5db;
}

body.dark-theme .view-channel-btn {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* 커스텀 필터 섹션 스타일 */
.custom-filter-section {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  max-width: 100%;
  box-sizing: border-box;
}

.custom-filter-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #555;
}

.range-slider-container {
  margin-bottom: 15px;
}

.range-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #777;
  margin-bottom: 8px;
}

.range-display {
  font-weight: 600;
  color: #333 !important;
}

.range-slider-wrapper {
  position: relative;
  height: 20px;
  margin-bottom: 10px;
}

.range-track {
  position: absolute;
  top: 7px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  left: 0%;
  width: 100%;
}

.range-thumb {
  position: absolute;
  top: 4px;
  width: 12px;
  height: 12px;
  background: #4f46e5;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 3;
  pointer-events: none;
}

.range-thumb-min {
  left: 0%;
  transform: translateX(-50%);
}

.range-thumb-max {
  left: 100%;
  transform: translateX(-50%);
}

.range-input {
  position: absolute;
  width: 100%;
  height: 20px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.range-input::-webkit-slider-thumb {
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #374151;
  cursor: pointer;
  -webkit-appearance: none;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.range-input::-moz-range-thumb {
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #374151;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  -moz-appearance: none;
}

.range-input::-webkit-slider-track {
  background: transparent;
  height: 6px;
}

.range-input::-moz-range-track {
  background: transparent;
  height: 6px;
  border: none;
}

/* 구독자 범위 정보 표시 */
.subscriber-range-info {
  text-align: center;
  margin: 10px 0;
  padding: 8px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.dark .subscriber-range-info {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
}

/* 선택된 필터 다크모드 스타일 */
body.dark-theme .selected-filters-display {
  background: #0a0a0a !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}

body.dark-theme .selected-filters-title {
  color: #f9fafb !important;
  border-bottom-color: #dc2626 !important;
}

body.dark-theme .selected-filter-label {
  color: #f9fafb !important;
}

body.dark-theme .selected-filter-tag {
  background: #2a2a2a !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}

body.dark-theme .selected-filter-tag:hover {
  background: #3a3a3a !important;
}

body.dark-theme .category-tag {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

body.dark-theme .category-tag:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* 비디오 타입 버튼 다크모드 */
body.dark-theme .video-type-btn {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #333333;
}

body.dark-theme .video-type-btn.active {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

body.dark-theme .video-type-btn:hover:not(.active) {
  border-color: #dc2626;
  background: #2a2a2a;
}

/* 정렬 버튼 다크모드 */
body.dark-theme .sort-order-btn {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #333333;
}

body.dark-theme .sort-order-btn:hover {
  border-color: #dc2626;
  background: #2a2a2a;
}

/* 수집모드 컨트롤 바 */
.collection-control-bar {
  display: none;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(59, 130, 246, 0.15)
  );
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.collection-control-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.collection-mode-title {
  font-weight: 600;
  color: var(--text-primary);
}

.selected-count-badge {
  background: var(--primary-color);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.collection-control-buttons {
  display: flex;
  gap: 10px;
}

.collection-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.collection-btn-close {
  background: var(--primary-color);
  color: white;
}

.collection-btn-close:hover {
  opacity: 0.85;
}

.collection-btn-select {
  background: var(--primary-color);
  color: white;
}

.collection-btn-select:hover {
  opacity: 0.85;
}

.collection-btn-clear {
  background: #6b7280;
  color: white;
}

.collection-btn-clear:hover {
  background: #4b5563;
}

.collection-btn-collect {
  background: var(--primary-color);
  color: white;
  padding: 10px 20px;
  font-size: 1rem;
}

.collection-btn-collect:hover:not(:disabled) {
  opacity: 0.85;
}

.collection-btn-collect:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 다크모드 수집모드 컨트롤 바 */
body.dark-theme .collection-control-bar {
  background: linear-gradient(
    135deg,
    rgba(220, 38, 38, 0.1),
    rgba(220, 38, 38, 0.15)
  );
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

/* 포커스 시 더 명확하게 보이도록 */
.range-input:focus::-webkit-slider-thumb {
  background: #1f2937;
  box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.3);
}

.range-input:focus::-moz-range-thumb {
  background: #1f2937;
  box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.3);
}

.direct-input-container {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.direct-input {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  background: #ffffff;
}

.input-separator {
  color: #999;
  font-size: 12px;
  margin: 0 2px;
}

.custom-filter-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
}

.apply-btn {
  background: linear-gradient(135deg, #374151, #1f2937);
  color: white;
}

.apply-btn:hover {
  background: linear-gradient(135deg, #1f2937, #111827);
}

.reset-btn {
  background: linear-gradient(135deg, #374151, #1f2937);
  color: white;
}

.reset-btn:hover {
  background: linear-gradient(135deg, #1f2937, #111827);
}

/* 다크모드 스타일 */
body.dark-theme .custom-filter-section {
  background: #0a0a0a;
  border-color: #374151;
}

body.dark-theme .custom-filter-title {
  color: #d1d5db;
}

body.dark-theme .range-slider-labels span {
  color: #9ca3af;
}

body.dark-theme .range-display {
  color: #f3f4f6 !important;
}

body.dark-theme .range-thumb {
  background: #6366f1;
  border-color: #1f2937;
}

body.dark-theme .direct-input {
  background: #0a0a0a;
  border-color: #333333;
  color: #ffffff;
  color-scheme: dark;
}

body.dark-theme .direct-input:-webkit-autofill,
body.dark-theme .direct-input:-webkit-autofill:hover,
body.dark-theme .direct-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
  -webkit-text-fill-color: #ffffff;
  border-color: #333333;
}

body.dark-theme .direct-input::placeholder {
  color: #666666;
}

body.dark-theme .subscriber-range-info {
  background: #0a0a0a;
  border-color: #333333;
  color: #cccccc;
}

body.dark-theme .range-slider-title {
  color: #ffffff;
}

body.dark-theme .input-separator {
  color: #6b7280;
}

/* 채널 검색 결과 기본 스타일 */
.channel-search-result {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
  border: 2px solid #e8ecf0;
  border-radius: 24px;
  padding: 32px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-height: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.channel-search-result:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
}

.channel-result-name {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 16px;
  line-height: 1.3;
  word-break: break-word;
}

.channel-result-category {
  color: #4f46e5 !important;
  background: #e0e7ff;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-block;
}

.channel-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.channel-result-stats-extended {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.channel-result-stats-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
  width: 100%;
}

/* 영상 형식 필터 버튼 스타일 */
.video-format-filter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.video-format-buttons {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.format-filter-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 80px;
}

.format-filter-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

.format-filter-btn.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* 다크모드 스타일 */
body.dark-theme .video-format-buttons {
  background: rgba(30, 41, 59, 0.8);
}

body.dark-theme .format-filter-btn {
  color: #cbd5e1;
}

body.dark-theme .format-filter-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #a78bfa;
}

/* 영상 형식 표시 라벨 */
.video-format {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-format.long-form {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.video-format.shorts {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.channel-result-stat {
  background: rgba(255, 255, 255, 0.8);
  padding: 18px 12px;
  border-radius: 14px;
  border: 1px solid #e9ecef;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  text-align: center;
}

.channel-result-stat:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: #6366f1;
}

.channel-result-stat-value {
  font-size: 22px;
  font-weight: 700;
  display: block;
  color: #2d3748;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* 채널 현황 기간 버튼 */
.stats-period-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
  background: white;
  color: var(--text-primary);
}

.stats-period-btn:hover {
  border-color: #999;
  background: #f5f5f5;
}

.stats-period-btn.active {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  border-color: var(--primary-color);
}

body.dark-theme .stats-period-btn {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
}

body.dark-theme .stats-period-btn:hover {
  background: #222;
  border-color: #666;
  color: #ddd;
}

body.dark-theme .stats-period-btn.active {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* 목표 템플릿 기간 버튼 */
.goal-period-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s;
  background: white;
  color: var(--text-primary);
}

.goal-period-btn:hover {
  border-color: #999;
  background: #f5f5f5;
}

.goal-period-btn.active {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  border-color: var(--primary-color);
}

body.dark-theme .goal-period-btn {
  background: transparent;
  color: #aaa;
  border: 1px solid #444;
}

body.dark-theme .goal-period-btn:hover {
  background: #222;
  border-color: #666;
  color: #ddd;
}

body.dark-theme .goal-period-btn.active {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* 목표 강도 버튼 */
.goal-intensity-btn {
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  background: white;
  color: var(--text-primary);
}

.goal-intensity-btn:hover {
  border-color: #999;
  background: #f5f5f5;
}

.goal-intensity-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

body.dark-theme .goal-intensity-btn {
  background: #141414;
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-theme .goal-intensity-btn:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
}

body.dark-theme .goal-intensity-btn.active {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* 목표 추천 카드 */
.goal-recommendation-card {
  padding: 14px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.15s;
  background: white;
}

.goal-recommendation-card:hover {
  border-color: var(--primary-color);
}

.goal-recommendation-card .card-label {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 6px;
  text-align: center;
}

.goal-recommendation-card .card-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 6px;
  text-align: center;
}

.goal-recommendation-card .card-range {
  font-size: 0.78rem;
  color: #999;
  text-align: center;
}

body.dark-theme .goal-recommendation-card {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-theme .goal-recommendation-card:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
}

body.dark-theme .goal-recommendation-card .card-label {
  color: #888;
}

body.dark-theme .goal-recommendation-card .card-value {
  color: #ef4444;
}

/* 목표 생성 버튼 */
.goal-create-btn {
  display: block;
  margin-left: auto;
  padding: 10px 28px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--primary-color);
  color: white;
}

.goal-create-btn:hover {
  opacity: 0.85;
}

body.dark-theme .goal-create-btn {
  background: #dc2626;
}

/* 내 목표 리스트 카드 */
.goal-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.goal-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

body.dark-theme .goal-recommendation-card .card-range {
  color: #999;
}

/* 채널 현황 카드 */
.channel-stats-card {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: white;
}

.channel-stats-card .card-label {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 4px;
}

.channel-stats-card .card-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.channel-stats-card .card-sub {
  font-size: 0.75rem;
  color: #999;
  margin-top: 2px;
}

body.dark-theme .channel-stats-card {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* 목표 생성 성공 메시지 */
.goal-success-message {
  margin-top: 10px;
  padding: 10px 14px;
  background: #d1fae5;
  border: 1px solid #10b981;
  border-radius: 6px;
  color: #047857;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.5;
}

body.dark-theme .goal-success-message {
  background: #7f1d1d;
  border: 1px solid #dc2626;
  color: #fca5a5;
}

/* 목표 생성 경고 메시지 */
.goal-warning-message {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  color: #856404;
  font-size: 0.9rem;
  text-align: center;
}

body.dark-theme .goal-warning-message {
  background: #713f12;
  border: 1px solid #ffc107;
  color: #fde68a;
}

/* 목표 카드 수치 조절 버튼 */
.goal-adjust-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
  width: 24px;
  height: 24px;
}

.goal-adjust-btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

.goal-adjust-btn:active {
  transform: scale(0.95);
}

body.dark-theme .goal-adjust-btn {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.12);
  color: #999;
}

body.dark-theme .goal-adjust-btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* 베스트 영상 정렬 버튼 */
.best-video-sort-btn {
  transition: all 0.2s;
}

.best-video-sort-btn.active {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  font-weight: 600;
}

.best-video-sort-btn:hover {
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

body.dark-theme .channel-stats-card .card-label {
  color: #999;
}

body.dark-theme .channel-stats-card .card-value {
  color: #dc2626;
}

body.dark-theme .channel-stats-card .card-sub {
  color: #999;
}

/* 목표 컨테이너 */
.goal-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
}

/* 반응형: 1600px 이하에서 세로 정렬 */
@media (max-width: 1600px) {
  .goal-container {
    grid-template-columns: 1fr !important;
  }

  .goal-progress-wrapper {
    flex-direction: column !important;
  }

  .goal-progress-wrapper > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  .goal-progress-wrapper > div:last-child {
    width: 100% !important;
  }

  .goal-progress-wrapper .channel-stats-card {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 200px !important;
  }

  /* 자동화 컬럼 숨김 */
  .automation-header,
  .automation-cell {
    display: none !important;
  }
}

.channel-result-stat-label {
  font-size: 13px;
  color: #718096;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.channel-result-latest {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.4;
}

.view-channel-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

/* 검색 탭 스타일 */
.search-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
  border-bottom: 2px solid #f8f9fa;
}

.search-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.search-tab:hover {
  color: #3b82f6;
}

body.dark-theme .search-tab {
  color: #cccccc;
}

body.dark-theme .search-tab.active {
  color: #dc2626;
  border-bottom-color: #dc2626;
}

body.dark-theme .search-tab:hover {
  color: #dc2626;
}

body.dark-theme .search-tabs {
  border-bottom-color: #333333;
}

/* 검색 패널 스타일 */
.search-panel {
  display: none;
}

.search-panel.active {
  display: block;
}

/* 영상 검색 결과 스타일 */
.video-search-results {
  display: grid;
  gap: 20px;
  padding: 10px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  margin-top: 20px;
}

.pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 40px;
}

.pagination button:hover:not(:disabled) {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination .page-info {
  margin: 0 15px;
  font-size: 14px;
  color: #666;
}

.video-result-item {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
  border: 2px solid #e8ecf0;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 자동완성 드롭다운 스타일 */
.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: fixed !important;
  background: white;
  border: 2px solid #007bff;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 500 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: none;
  min-width: 300px;
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
  background-color: #f8f9fa;
}

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

.autocomplete-channel {
  color: #667eea;
  font-weight: 600;
}

.autocomplete-video {
  color: #764ba2;
  font-weight: 500;
}

.autocomplete-meta {
  font-size: 12px;
  color: #666;
  margin-left: auto;
}

.channel-search-container {
  position: relative;
  overflow: visible !important;
  z-index: 500;
}

.video-result-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.video-result-item:hover::before {
  opacity: 1;
}

.video-result-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.video-result-thumbnail {
  width: 140px;
  height: 79px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.video-result-thumbnail::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-result-item:hover .video-result-thumbnail::after {
  opacity: 1;
}

.video-result-info {
  flex: 1;
  min-width: 0;
}

.video-result-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.video-result-item:hover .video-result-title {
  color: #667eea;
}

.video-result-channel {
  font-size: 0.95rem;
  color: #667eea;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-result-stats {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 10px;
  font-weight: 500;
}

.video-result-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  margin-bottom: 15px;
}

.video-result-category {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.8rem;
}

.video-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.video-action-btn {
  padding: 8px 16px;
  border: 2px solid #e5e7eb;
  background: white;
  color: #374151;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

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

/* 수집 버튼 스타일 */
.collect-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: white !important;
  border-color: #f59e0b !important;
}

.collect-btn:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #d97706 !important;
  transform: translateY(-1px);
}

.collect-channel-btn {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  color: white !important;
  border-color: #7c3aed !important;
}

.collect-channel-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-color: #6d28d9 !important;
  transform: translateY(-1px);
}

.video-action-btn:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
  transform: translateY(-2px);
}

/* 수집 모드 체크박스 스타일 */
.collection-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.collection-checkbox:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.collection-checkbox input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* 다크모드 호환 */
body.dark-theme .collection-checkbox {
  background: rgba(30, 30, 45, 0.9);
  border: 1px solid #4b5563;
}

body.dark-theme .collection-checkbox:hover {
  background: rgba(30, 30, 45, 1);
}

/* 영상/채널 아이템에 상대 위치 설정 */
.video-result-item {
  position: relative;
}

.channel-search-result {
  position: relative;
}

.video-action-btn.download-btn {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  border-color: #6b7280;
}

.video-action-btn.download-btn:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3);
}

.video-action-btn.download-btn.completed {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  border-color: #6b7280;
  cursor: default;
}

.video-action-btn.download-btn.completed:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3);
}

/* 다크모드 비디오 액션 버튼 다운로드 완료 */
body.dark-theme .video-action-btn.download-btn.completed {
  background: linear-gradient(135deg, #374151, #1f2937);
  border-color: #374151;
}

body.dark-theme .video-action-btn.download-btn.completed:hover {
  background: linear-gradient(135deg, #374151, #1f2937);
  border-color: #374151;
  box-shadow: 0 4px 12px rgba(55, 65, 81, 0.3);
}

.video-action-btn.folder-btn {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  border-color: #6b7280;
}

.video-action-btn.folder-btn:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

/* 로딩 스피너 애니메이션 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.daily-views {
  color: #28a745;
  font-weight: 600;
}

.daily-views.highlighted {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.growth-rate {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.growth-rate.positive {
  background-color: #d4edda;
  color: #155724;
}

.growth-rate.negative {
  background-color: #f8d7da;
  color: #721c24;
}

.highlighted {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 접이식 섹션 스타일 */
.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.collapsible-header:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.collapse-icon {
  font-size: 0.9em;
  transition: transform 0.3s ease;
  color: #666;
}

.collapsible-content {
  transition: all 0.3s ease;
  overflow: visible;
}

/* 토스트 메시지 애니메이션 */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

/* ========================================
   YouTube/SOOP 스타일 배경 최적화
   모든 섹션 배경을 body로 통일
   ======================================== */

/* 라이트 모드 - body 배경만 사용 */
.container,
.filter-sort-controls,
.filter-section-half,
.search-results-section,
.selected-filters-display,
.data-table,
.section,
.controls,
.stats-modal-content,
.content-container,
.filter-section,
.main-content,
.results-container {
  background: transparent !important;
}

.data-table th {
  background: transparent !important;
  color: var(--text-primary) !important;
}

/* 외곽선 설정 (라이트모드) */
.filter-sort-controls {
  border: 1px solid #333333 !important;
}

.search-results-section {
  border: 1px solid #333333 !important;
}

/* 다크 모드 - body 배경만 사용 */
body.dark-theme .container,
body.dark-theme .filter-sort-controls,
body.dark-theme .filter-section-half,
body.dark-theme .search-results-section,
body.dark-theme .selected-filters-display,
body.dark-theme .data-table,
body.dark-theme .controls,
body.dark-theme .stats-modal-content,
body.dark-theme .content-container,
body.dark-theme .filter-section,
body.dark-theme .main-content,
body.dark-theme .results-container {
  background: transparent !important;
  border-color: var(--border-color) !important;
}

/* .section은 별도로 관리 - #e0e0e0 외곽선 유지 */
body.dark-theme .section {
  background: transparent !important;
  border: 1px solid #e0e0e0 !important;
}

body.dark-theme .data-table th {
  background: transparent !important;
  color: var(--text-primary) !important;
}

/* 외곽선 설정 (다크모드) */
body.dark-theme .filter-sort-controls {
  border: 1px solid #e0e0e0 !important;
}

body.dark-theme .search-results-section {
  border: 1px solid #e0e0e0 !important;
}

/* 테이블 호버 효과만 유지 */
body.dark-theme .data-table tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.data-table tr:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* body transition 최적화 */
body {
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

/* ========================================
   툴팁 아이콘 스타일
   ======================================== */
/* ⓘ 아이콘만 클릭 가능하게 */
th span[title],
td span[title] {
  cursor: help !important;
  position: relative;
}

/* ======================================== */

/* ========================================
   옵션 그룹 스타일 (카테고리/분석지표)
   ======================================== */
/* ========================================
/* ========================================
   옵션 그룹 스타일 (국내/해외 채널만)
/* ========================================
   카테고리 select 옵션 배경 초기화
   ======================================== */
/* select 자체의 배경 */
/* select 자체 배경 (닫혔을 때) */
select#categorySelect {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
}

/* 모든 option의 기본 배경 (라이트) */
select#categorySelect option {
  background: #ffffff !important;
  color: #333333 !important;
}

/* 모든 option의 기본 배경 (다크) */
body.dark-theme select#categorySelect option {
  background: #141414 !important;
  color: #ffffff !important;
}

/* 국내/해외 채널 optgroup만 회색 배경 (라이트) */
select#categorySelect optgroup.category-group,
select#categorySelectQuick optgroup.category-group {
  font-weight: 700;
  font-size: 0.9rem;
  background: #6b7280 !important;
  color: #ffffff !important;
  padding: 8px;
}

/* 국내/해외 채널 optgroup만 회색 배경 (다크) */
body.dark-theme select#categorySelect optgroup.category-group,
body.dark-theme select#categorySelectQuick optgroup.category-group {
  background: #4b5563 !important;
  color: #ffffff !important;
}

/* 내 수집함 옵션 테마색 */
select#categorySelect option[value="[내 수집함]"] {
  background: rgba(59, 130, 246, 0.5) !important;
  color: #333333 !important;
}

body.dark-theme select#categorySelect option[value="[내 수집함]"] {
  background: rgba(220, 38, 38, 0.5) !important;
  color: #ffffff !important;
}

/* ========================================
   테이블 컬럼 반응형 숨김 처리
   ======================================== */

/* 1400px 이하: 채널정보, 영상정보, 업로드날짜, 조회수만 표시 */
/* ⚠ 경계가 1400 이 아니라 1503 인 이유: 고정폭 구간의 7칸 합계 1180px 이
   뷰포트 1504px 부터만 들어간다(표 자리 = 뷰포트 - 312px, 실측 2026-09-12).
   1401~1503 을 고정폭에 맡기면 표가 넘친다. 이 블록(가변폭 + 좁은 열폭)이
   거기까지 맡는다.
   2026-09-12: 카테고리 열을 100→143px 로 넓히면서 7칸 합계가 1161→1180px 이
   되어 경계가 1437 → 1503 으로 밀렸다. 계단 경계도 함께 옮겼다. */
@media (max-width: 1503.98px) {
  /* 테이블 min-width 제거 */
  .data-table {
    min-width: 0 !important;
    table-layout: auto !important;
  }

  /* 기본 컬럼 min-width 제거 */
  .data-table th,
  .data-table td {
    min-width: 0 !important;
  }

  /* 순위, 카테고리 숨김 */
  .data-table th:nth-child(2),
  .data-table td:nth-child(2),
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) {
    display: none;
  }

  /* 시간당조회수, 바이럴, 기여도, 성과지수, 배율, 다운로드 숨김 */
  .data-table th:nth-child(8),
  .data-table td:nth-child(8),
  .data-table th:nth-child(9),
  .data-table td:nth-child(9),
  .data-table th:nth-child(10),
  .data-table td:nth-child(10),
  .data-table th:nth-child(11),
  .data-table td:nth-child(11),
  .data-table th:nth-child(12),
  .data-table td:nth-child(12),
  .data-table th:nth-child(13),
  .data-table td:nth-child(13) {
    display: none;
  }

  /* 남은 컬럼 너비 강제 조정 */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  } /* 체크박스 */

  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  } /* 채널 정보 */

  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  } /* 영상 정보 */

  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  } /* 업로드 날짜 */

  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  } /* 조회수 */
}

/* 1000px 이하 769px 이상: 채널정보, 영상정보, 조회수만 표시 */
@media (max-width: 1000px) and (min-width: 769px) {
  /* 업로드날짜도 숨김 */
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    display: none !important;
  }

  /* 남은 컬럼 너비 재조정 */
  .data-table th:nth-child(4),
  .data-table td:nth-child(4) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  } /* 채널 정보 */

  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  } /* 영상 정보 */

  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  } /* 조회수 */
}

/* 768px 이하 (모바일): 영상정보, 조회수만 표시 */
@media (max-width: 768px) {
  /* 전체 페이지 overflow 제어 */
  body,
  html {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 메인 컨테이너 */
  main,
  .container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 테이블 너비 제한 제거 */
  .data-table {
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 !important;
  }

  /* 테이블 wrapper도 제한 */
  .table-wrapper,
  .data-table-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 순위, 카테고리, 채널정보, 업로드날짜 숨김 */
  .data-table th:nth-child(2),
  .data-table td:nth-child(2),
  .data-table th:nth-child(3),
  .data-table td:nth-child(3),
  .data-table th:nth-child(4),
  .data-table td:nth-child(4),
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    display: none !important;
  }

  /* 시간당조회수 이후 모든 컬럼 숨김 */
  .data-table th:nth-child(8),
  .data-table td:nth-child(8),
  .data-table th:nth-child(9),
  .data-table td:nth-child(9),
  .data-table th:nth-child(10),
  .data-table td:nth-child(10),
  .data-table th:nth-child(11),
  .data-table td:nth-child(11),
  .data-table th:nth-child(12),
  .data-table td:nth-child(12),
  .data-table th:nth-child(13),
  .data-table td:nth-child(13) {
    display: none !important;
  }

  /* 체크박스 */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    padding: 2px !important;
  }

  /* 영상 정보 - 7:3 비율 */
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 10px 8px !important;
  }

  /* 조회수 - 7:3 비율 */
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 30% !important;
    max-width: 30% !important;
    min-width: 0 !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  /* 테이블 행 높이 여유있게 */
  .data-table tbody tr {
    min-height: 60px !important;
  }

  .data-table td {
    padding: 10px 6px !important;
    vertical-align: middle !important;
  }

  /* 영상 정보 컨테이너 */
  .data-table .video-info {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 영상 제목이 들어있는 flex 컨테이너 */
  .data-table .video-info > div {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 영상 제목 링크 */
  .data-table .video-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    min-width: 0 !important;
  }

  /* 영상 정보 내부 모든 요소 */
  .data-table td:nth-child(5) * {
    max-width: 100%;
  }

  /* 썸네일 크기 축소 */
  .data-table .video-thumbnail,
  .data-table .channel-thumbnail {
    width: 50px !important;
    height: 28px !important;
    min-width: 50px !important;
  }
}

/* 480px 이하 (매우 작은 모바일) */
@media (max-width: 480px) {
  /* 체크박스 더 축소 */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 1px !important;
  }

  /* 영상 정보 - 70% (calc() 조합이 table-layout:fixed에서 컬럼폭 계산을
     깨뜨려 테이블이 내용 크기로 쪼그라들던 버그 → 768px 블록과 동일하게
     단순 퍼센트로 통일) */
  .data-table th:nth-child(5),
  .data-table td:nth-child(5) {
    width: 70% !important;
    max-width: 70% !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
  }

  /* 조회수 - 30% */
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    width: 30% !important;
    max-width: 30% !important;
    min-width: 0 !important;
    padding: 10px 4px !important;
    font-size: 11px !important;
  }

  /* 최협폭: 영상 길이 뱃지 + 유튜브 아이콘 숨김 → 제목/조회수만 노출
     (좁은 화면에서 제목 가독 공간 확보) */
  .data-table td:nth-child(5) .video-info a[href*="youtube.com"],
  .data-table td:nth-child(5) .video-info > div > span {
    display: none !important;
  }

  /* 썸네일 더 축소 */
  .data-table .video-thumbnail,
  .data-table .channel-thumbnail {
    width: 40px !important;
    height: 22px !important;
    min-width: 40px !important;
  }

  /* 체크박스 크기 */
  .data-table input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
  }

  /* 헤더 폰트 크기 */
  .data-table th {
    font-size: 11px !important;
    padding: 4px 2px !important;
  }

  .data-table td {
    font-size: 11px !important;
  }
}

/* 공용 1800/768px channel-table 축약 규칙보다 뒤에서 지뢰밭 열 계약을 복원한다.
   폭은 colgroup + --minefield-table-width 한 곳에서만 오며, 좁은 화면은 열을 숨기지 않고 스크롤한다. */
#dataContainer:has(.channel-table.minefield-table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.data-table.channel-table.minefield-table {
  display: table;
  width: max(100%, var(--minefield-table-width)) !important;
  min-width: var(--minefield-table-width) !important;
  max-width: none !important;
  table-layout: fixed !important;
}

.data-table.channel-table.minefield-table th[class*="minefield-col-"],
.data-table.channel-table.minefield-table td[class*="minefield-col-"] {
  display: table-cell !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.data-table.channel-table.minefield-table th:first-child,
.data-table.channel-table.minefield-table td:first-child {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
}

/* ── 진단 3열의 반응형 계약 ─────────────────────────────────────────────────
   설계
   1) 진단 3열(등급·신호·비교)은 폭이 충분한 화면에서만 켠다. 켜는 규칙 자체를 그 구간
      안에만 두므로, 그 아래에서는 이 기능이 처음부터 없던 것과 같아지고 기존 채널표
      반응형(≤1800px 3열 숨김 / ≤1400px table-layout:auto 전환)이 원래 계약대로 돈다.
   2) 표 전체 width는 손대지 않는다. table-layout:fixed는 지정된 열 폭 합만큼 표를
      알아서 넓히고, 넘치는 만큼만 컨테이너가 가로 스크롤한다(지뢰밭 표와 같은 정책).
      width:max-content를 쓰면 모든 열이 콘텐츠 기준으로 재배분되어 채널 정보 열이
      900px까지 부푼다 — 쓰지 말 것.
   3) 진단 열 폭은 아래 세 변수 한 곳에서만 온다.
   4) .channel-table은 8번째 이후 열을 85px !important로 못박으므로, 파일 뒤쪽 +
      #dataContainer 프리픽스로 우선순위를 확보해야 이긴다.
   5) 컷이 2101 → 1500px로 내려왔다. 카드를 3열로 펴면서 다른 열과 겹치던 것을 걷어내고
      신호를 점수 한 칸으로 환산해 진단 폭이 760 → 288px가 됐다. 줄어든 472px만큼
      더 좁은 화면에서 켤 수 있다.
      ⚠️ 정수 경계는 뷰포트가 1899.5일 때 양쪽 다 안 걸려 규칙이 통째로 빠진다.
      max-width 쪽을 .98로 물릴 것(2026-08-20 영상표에서 실측으로 확인한 함정). */
:root {
  --growth-col-grade: 92px;
  --growth-col-signals: 84px;
  --growth-col-benchmark: 112px;
}

@media (min-width: 1500px) {
  /* 진단 열이 폭을 통째로 가져가면 표에 남는 여유가 없어져 앞쪽 3열이 지정된 최소폭
     (순위 30 / 카테고리 70 / 채널 120)까지 눌린다. 진단이 없을 때는 남는 폭을 비례로
     나눠 받아 넉넉했던 열들이라, 진단이 켜진 표에 한해 읽을 수 있는 폭을 따로 계약한다. */
  .growth-diagnosis-table {
    --growth-col-rank: 54px;
    --growth-col-category: 88px;
    --growth-col-channel: 190px;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th:nth-child(2),
  #dataContainer .data-table.channel-table.growth-diagnosis-table td:nth-child(2) {
    width: var(--growth-col-rank) !important;
    max-width: none !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th:nth-child(3),
  #dataContainer .data-table.channel-table.growth-diagnosis-table td:nth-child(3) {
    width: var(--growth-col-category) !important;
    max-width: none !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th:nth-child(4),
  #dataContainer .data-table.channel-table.growth-diagnosis-table td:nth-child(4) {
    width: var(--growth-col-channel) !important;
    max-width: var(--growth-col-channel) !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-grade {
    display: table-cell !important;
    width: var(--growth-col-grade) !important;
    min-width: var(--growth-col-grade) !important;
    max-width: none !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-signals {
    display: table-cell !important;
    width: var(--growth-col-signals) !important;
    min-width: var(--growth-col-signals) !important;
    max-width: none !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-benchmark,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-benchmark {
    display: table-cell !important;
    width: var(--growth-col-benchmark) !important;
    min-width: var(--growth-col-benchmark) !important;
    max-width: none !important;
  }

  /* 배지·점수·버튼 하나씩이라 진단 3열은 헤더와 값 모두 가운데 정렬이다.
     세 열의 폭 규칙보다 뒤에 둔다 — 폭을 찾을 때 이 블록이 먼저 걸리면 안 된다. */
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-benchmark,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-benchmark {
    text-align: center !important;
  }

  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-benchmark {
    padding: 8px 10px !important;
  }

  /* 표가 컨테이너보다 넓어지는 만큼만 가로 스크롤. 지뢰밭 표와 같은 정책이다. */
  #dataContainer.has-growth-diagnosis {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
}

/* ≤1899.98px: 진단 3열을 접는다. 기존 nth-child(n+9) 규칙이 85px 칸으로 되살리지
   않도록 여기서만 명시적으로 못박고, 나머지 열은 원래 반응형 계약에 그대로 맡긴다. */
@media (max-width: 1499.98px) {
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-grade,
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-signals,
  #dataContainer .data-table.channel-table.growth-diagnosis-table th.growth-col-benchmark,
  #dataContainer .data-table.channel-table.growth-diagnosis-table td.growth-col-benchmark {
    display: none !important;
  }
}

/* 지뢰밭 4종도 같은 컷을 쓴다. 다만 이 표는 colgroup + --minefield-table-width로 폭이
   고정돼 있어서 셀만 숨기면 표는 여전히 진단 폭만큼 넓다. col의 폭까지 0으로 접고
   표 폭 계약에서도 진단 3열 폭을 빼야 한다(두 값 모두 index.html이 인라인으로 넘긴다). */
@media (max-width: 1499.98px) {
  #dataContainer .data-table.channel-table.minefield-table th.minefield-col-grade,
  #dataContainer .data-table.channel-table.minefield-table td.minefield-col-grade,
  #dataContainer .data-table.channel-table.minefield-table th.minefield-col-signals,
  #dataContainer .data-table.channel-table.minefield-table td.minefield-col-signals,
  #dataContainer .data-table.channel-table.minefield-table th.minefield-col-benchmark,
  #dataContainer .data-table.channel-table.minefield-table td.minefield-col-benchmark {
    display: none !important;
  }

  #dataContainer .data-table.channel-table.minefield-table col.minefield-col-grade,
  #dataContainer .data-table.channel-table.minefield-table col.minefield-col-signals,
  #dataContainer .data-table.channel-table.minefield-table col.minefield-col-benchmark {
    width: 0 !important;
  }

  #dataContainer .data-table.channel-table.minefield-table {
    --minefield-table-compact: calc(
      var(--minefield-table-width) - var(--minefield-diagnosis-width, 0px)
    );
    width: max(100%, var(--minefield-table-compact)) !important;
    min-width: var(--minefield-table-compact) !important;
  }
}

/* "지금 급락 중" 배지 — 급제동률 셀 아래 한 줄.
   이미 다 무너져 정체된 채널과 현재 진행형 급락을 구분한다(정렬 상단의 근거).
   열을 추가하지 않으므로 표 폭 계약(colgroup min-width)은 그대로다. */
#dataContainer .data-table.channel-table.minefield-table td.minefield-col-metric-primary
  .minefield-falling-now {
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #f87171;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ========================================
   퀵 셀렉션 반응형 (파일 끝에 배치하여 우선순위 확보)
   ======================================== */

/* 1800px 이하: 타입 제거 */
@media (max-width: 1800px) {
  .quick-selection-dropdowns .quick-type-section {
    display: none !important;
  }
}

/* 1600px 이하: 지역(해외) + 카테고리 제거 (함께 사라지도록) */
@media (max-width: 1600px) {
  .quick-selection-dropdowns .quick-overseas-section,
  .quick-selection-dropdowns .quick-category-section {
    display: none !important;
  }
}

/* 1400px 이하: 구독자 제거 */
@media (max-width: 1400px) {
  .quick-selection-dropdowns .quick-subscriber-section {
    display: none !important;
  }
}

/* 1200px 이하: 영상 길이 드롭다운 제거 */
@media (max-width: 1200px) {
  .quick-selection-dropdowns .quick-duration-section {
    display: none !important;
  }
}

/* 분석지표 드롭다운은 가장 작은 화면까지 계속 노출한다 (숨기지 않음).
   ≤1200px에서 나머지 드롭다운(정렬·타입·해외·구독자·카테고리·영상길이)이
   모두 숨겨져 분석지표만 남으므로 별도 숨김 규칙을 두지 않는다. */

/* 800px 이하: 선택된 필터 칩 숨김 → 분석지표 드롭다운만 노출 (우측 정렬 유지) */
@media (max-width: 800px) {
  .filter-summary-inline > .summary-section {
    display: none !important;
  }
  /* 분석지표 값을 그대로 미러링하는 섹션 제목/아이콘 숨김 (중복 제거) */
  #sectionTitle,
  #sectionIcon {
    display: none !important;
  }
  /* 분석지표: 라벨+드롭다운+별(☆)을 한 줄로 유지 (드롭다운 줄바꿈 방지는
     .quick-metric-select 기본 규칙의 white-space:nowrap 가 처리) */
  .quick-metric-section {
    flex-wrap: nowrap !important;
  }
}

/* 600px 이하: 선택된 필터 세로 정렬 */
@media (max-width: 600px) {
  .filter-summary-inline {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* 칩(직계 자식)에만 적용 — 분석지표/프리셋 드롭다운 섹션은 제외해
     라벨+드롭다운+별이 세로로 깨지지 않도록 한다 */
  .filter-summary-inline > .summary-section {
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-summary-inline .summary-label,
  .filter-summary-inline .summary-btn {
    flex: 0 0 auto !important;
  }
  .filter-summary-inline .summary-btn {
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  .collapsed-filter-view {
    padding: 10px !important;
  }
}

/* ========================================
   Burning Bonus 헤더 아이콘 스타일
   ======================================== */

/* Burning Bonus 헤더 아이콘 */
.burning-icon {
  display: none;
  margin-left: 4px;
  font-size: 0.85em;
  cursor: help;
}

/* Burning Bonus 활성화 시 아이콘 표시 */
.burning-active .burning-icon {
  display: inline;
}

/* ========================================
   채널 검색 결과 디자인
   ======================================== */

.channel-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 20px;
  padding: 24px 0;
}

.channel-card-compact {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.channel-card-compact:hover {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.channel-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.channel-avatar-compact {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f4f6;
}

.channel-avatar-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-info-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.channel-name-compact {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  line-height: 1.3;
  word-break: break-word;
}

.channel-name-compact mark {
  background: rgba(59, 130, 246, 0.25);
  color: inherit;
  border-radius: 3px;
  padding: 1px 4px;
}

.channel-category-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  max-width: fit-content;
}

.channel-stats-row {
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 18px;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: var(--bg-tertiary, #f9fafb);
  border-radius: 12px;
}

.stat-item .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #374151);
}

.stat-item .stat-label {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}

/* 다크 테마 - 채널 컴팩트 카드 */
body.dark-theme .channel-card-compact {
  background: #141414;
  border-color: #333333;
}

body.dark-theme .channel-card-compact:hover {
  border-color: #dc2626;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body.dark-theme .channel-avatar-compact {
  background: #2a2a2a;
}

body.dark-theme .channel-name-compact {
  color: #f3f4f6;
}

body.dark-theme .channel-name-compact mark {
  background: rgba(220, 38, 38, 0.35);
}

body.dark-theme .channel-category-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

body.dark-theme .channel-stats-row {
  border-top-color: #333333;
}

body.dark-theme .stat-item {
  background: #1f1f1f;
}

body.dark-theme .stat-item .stat-value {
  color: #f3f4f6;
}

body.dark-theme .stat-item .stat-label {
  color: #9ca3af;
}

/* 반응형 - 768px 이하 */
@media (max-width: 768px) {
  .channel-search-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .channel-card-compact {
    padding: 18px;
  }

  .channel-card-header {
    gap: 14px;
  }

  .channel-avatar-compact {
    width: 60px;
    height: 60px;
  }

  .channel-name-compact {
    font-size: 17px;
  }

  .channel-stats-row {
    gap: 10px;
  }

  .stat-item {
    padding: 12px 8px;
  }

  .stat-item .stat-value {
    font-size: 16px;
  }
}

/* 반응형 - 1200px 이하 */
@media (max-width: 1200px) {
  .channel-search-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}

/* ============================================
   구독 게이트 시스템 (블러/CTA/모달)
   ============================================ */

/* 필터/퀵셀렉션 잠금 (guest/free) */
.filter-locked {
  opacity: 0.45;
  cursor: not-allowed !important;
  position: relative;
}

.filter-locked * {
  pointer-events: none !important;
}

/* 블러 처리된 행 */
.gated-row {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 블러 영역 위 CTA 오버레이 */
/* 잠긴 행 경계(top은 JS가 지정)부터 표 끝까지를 덮는 띠.
   이 구간의 높이가 곧 카드가 화면에 머무를 수 있는 범위가 된다. */
.subscription-gate-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 56px;
}

/* 잠긴 구간을 스크롤하는 동안 카드를 화면에 붙들어 둔다(페이월 표준).
   ⚠ position:sticky는 못 쓴다 — 조상 `.section`이 표 가로 스크롤 때문에
   overflow:auto라서 sticky의 기준 스크롤 포트를 가로채는데, 정작 세로 스크롤은
   window에서 일어나 고정될 자리가 없다.
   ⚠ JS로 매 스크롤마다 translateY를 다시 먹이는 방식도 쓰지 말 것 — 계산이 한 프레임
   늦어 카드가 스크롤에 끌려다니는 느낌이 난다(대표님 지적). fixed는 브라우저가
   합성 단계에서 붙잡으므로 그 지연이 아예 없다.
   전환 시점은 "자연 위치가 화면 중앙에 닿는 순간"이라 위치가 이어져 튀지 않는다. */
.subscription-gate-cta.gate-cta-stuck {
  position: fixed;
  /* !important 필수 — 잠긴 행 위치를 담은 인라인 top이 붙어 있어서, 그냥 두면
     화면이 아니라 그 지점부터 정렬되어 카드가 아래로 밀린다(실측 356→502). */
  inset: 0 !important;
  padding-top: 0;
  padding-left: var(--auth-overlay-offset, 0px);
  box-sizing: border-box;
  align-items: center;
}

/* 게스트용 — 로그인 모달과 정확히 같은 자리(화면 중앙)에 겹쳐 모달 뒤로 숨긴다.
   가로축은 .auth-modal-overlay와 같은 --auth-overlay-offset을 써야 어긋나지 않는다.
   ⚠ fixed가 뷰포트 기준으로 서려면 조상에 filter/transform이 없어야 한다.
   예전 auth-check.js는 본문에 blur를 걸어 이 전제를 깨뜨렸다(자세한 경위는 그 파일 주석). */
.subscription-gate-cta.gate-cta-centered {
  position: fixed;
  inset: 0;
  padding-top: 0;
  padding-left: var(--auth-overlay-offset, 0px);
  box-sizing: border-box;
  align-items: center;
}

.gate-cta-box {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  z-index: 11;
}

.dark-theme .gate-cta-box {
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.gate-cta-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.gate-cta-title {
  font-size: 17px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 8px;
}

.dark-theme .gate-cta-title {
  color: #ffffff;
}

.gate-cta-desc {
  font-size: 13px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.dark-theme .gate-cta-desc {
  color: rgba(255, 255, 255, 0.5);
}

/* 라이트모드: 파란 버튼 */
.gate-cta-btn {
  display: inline-block;
  padding: 11px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  letter-spacing: 0.3px;
}

.gate-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* 다크모드: 빨간 버튼 */
.dark-theme .gate-cta-btn {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.dark-theme .gate-cta-btn:hover {
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* 페이지 전체 구독 게이트 오버레이 (free tier 차단용) */
.subscription-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.subscription-page-gate-box {
  position: relative;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 40px 44px 32px;
  text-align: center;
  max-width: 440px;
  width: 92%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.dark-theme .subscription-page-gate-box {
  background: rgba(20, 20, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.subscription-page-gate-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #999;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.subscription-page-gate-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #333;
}

.dark-theme .subscription-page-gate-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* 로그인/업그레이드 모달 공통 */
.subscription-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.subscription-modal {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.dark-theme .subscription-modal {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.subscription-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-primary);
}

.subscription-modal p {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-btn-primary {
  display: inline-block;
  padding: 10px 28px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 0 6px;
  transition: transform 0.15s;
}

.modal-btn-primary:hover {
  transform: translateY(-1px);
}

body.dark-theme .modal-btn-primary {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.modal-btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  margin: 0 6px;
}

.dark-theme .modal-btn-secondary {
  border-color: rgba(255, 255, 255, 0.12);
}

.modal-btn-secondary:hover {
  background: var(--card-hover);
}

/* ===== 프로필 인증 뱃지 (인스타그램식) ===== */
.profile-verified-badge {
  position: absolute;
  bottom: 4px;
  right: 2px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 0;
}

.profile-verified-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 플랜별 색상 */
.badge-standard { color: #3b82f6; }
.badge-pro { color: #dc2626; }
.badge-premium { color: #f59e0b; }

/* ===== CTA 비교 테이블 (free 티어) ===== */
.gate-cta-compare {
  max-width: 460px;
}

.gate-compare-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0 20px;
}

.gate-compare-col {
  padding: 12px 20px;
  border-radius: 10px;
  text-align: center;
  min-width: 100px;
}

.gate-compare-current {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.dark-theme .gate-compare-current {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 강조색은 플랜 배지(.badge-standard)와 같은 파랑을 쓴다.
   앰버 계열(rgba(251,191,36,…))은 다크 배경에 얹히면 탁한 갈색으로 보여 폐기. */
.gate-compare-upgrade {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(37, 99, 235, 0.13) 100%
  );
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.dark-theme .gate-compare-upgrade {
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.12) 0%,
    rgba(59, 130, 246, 0.18) 100%
  );
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.gate-compare-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.gate-compare-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.gate-compare-extra {
  font-size: 11px;
  color: #1d4ed8;
  margin-top: 4px;
  font-weight: 500;
}

.dark-theme .gate-compare-extra {
  color: #93c5fd;
}

.gate-compare-arrow {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 700;
}

.gate-cta-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.gate-cta-btn-secondary {
  display: inline-block;
  padding: 10px 24px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
}

.gate-cta-btn-secondary:hover {
  background: var(--card-hover);
}

.dark-theme .gate-cta-btn-secondary {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

.dark-theme .gate-cta-btn-secondary:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ===== 검색 제한 모달 (free 티어) ===== */
.usage-limit-modal {
  max-width: 420px;
}

.usage-limit-compare {
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usage-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
}

.dark-theme .usage-limit-row {
  background: rgba(255, 255, 255, 0.04);
}

.usage-limit-highlight {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.08) 0%,
    rgba(245, 158, 11, 0.12) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.dark-theme .usage-limit-highlight {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.1) 0%,
    rgba(245, 158, 11, 0.15) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.usage-limit-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.usage-limit-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
}

.usage-limit-highlight .usage-limit-value {
  color: #b45309;
}

.dark-theme .usage-limit-highlight .usage-limit-value {
  color: #fbbf24;
}

/* 모바일 반응형 */
@media (max-width: 768px) {

  .gate-compare-table {
    gap: 8px;
  }

  .gate-compare-col {
    padding: 10px 14px;
    min-width: 80px;
  }

  .gate-compare-value {
    font-size: 17px;
  }
}

/* ===== 인증 모달 ===== */
.auth-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  /* 배경 흐림은 전적으로 이 오버레이가 담당한다. 예전에는 auth-check.js가 body 직계
     자식에 filter:blur(6px)를 함께 걸었는데, filter는 자손 fixed의 기준을 바꿔버려
     .container 안의 .header를 사이드바 폭만큼 밀어냈다(자세한 내용은 auth-check.js 주석). */
  backdrop-filter: blur(6px);
  /* 모달을 본문(.container)과 같은 세로 중심축에 세운다. 사이드바가 있는 페이지는
     그 폭을 이 변수로 알려주고, 변수가 없는 페이지는 0이라 화면 중앙 그대로다. */
  padding-left: var(--auth-overlay-offset, 0px);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}
.auth-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.auth-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  max-width: 440px;
  width: 92%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s;
}
.auth-modal-overlay.active .auth-modal {
  transform: translateY(0) scale(1);
}

.dark-theme .auth-modal {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.auth-modal-close:hover {
  background: var(--card-hover);
}

.auth-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  text-align: center;
}
.auth-modal-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 24px;
}

/* Google 버튼 */
.auth-btn-google {
  width: 100%;
  padding: 11px 16px;
  background: #fff;
  color: #333;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.auth-btn-google svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  flex-shrink: 0;
}
.auth-btn-google:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.auth-btn-google:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dark-theme .auth-btn-google {
  background: #1a1a1a;
  color: #e5e5e5;
  border-color: rgba(255, 255, 255, 0.12);
}
.dark-theme .auth-btn-google:hover {
  background: #222;
  border-color: rgba(255, 255, 255, 0.25);
}

/* YouTube 버튼 */
.auth-btn-youtube {
  width: 100%;
  padding: 11px 16px;
  background: #fff;
  color: #333;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.auth-btn-youtube svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  flex-shrink: 0;
}
.auth-btn-youtube:hover {
  background: #fff5f5;
  border-color: #fca5a5;
}
/* Google 버튼과 같은 조건(Firebase 미초기화)으로 꺼지므로 표시도 같아야 한다.
   이 규칙이 없어 "구글만 비활성"으로 보이던 오진이 있었다. */
.auth-btn-youtube:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dark-theme .auth-btn-youtube {
  background: #1a1a1a;
  color: #e5e5e5;
  border-color: rgba(255, 255, 255, 0.12);
}
.dark-theme .auth-btn-youtube:hover {
  background: #1f1010;
  border-color: rgba(255, 0, 0, 0.35);
}

/* 약관 텍스트 */
.auth-terms {
  text-align: center;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.auth-terms a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* 에러/성공 메시지 */
.auth-message {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
  text-align: center;
}
.auth-message.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.auth-message.success {
  display: block;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.auth-message.info {
  display: block;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ============================================================
   ============================================================ */

/* real logo marks (Simple Icons, CC0) */
.b-perplexity{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTIyLjM5NzcgNy4wODk2aC0yLjMxMDZWLjA2NzZsLTcuNTA5NCA2LjM1NDJWLjE1NzdoLTEuMTU1NHY2LjE5NjZMNC40OTA0IDB2Ny4wODk2SDEuNjAyM3YxMC4zOTc2aDIuODg4MlYyNGw2LjkzMi02LjM1OTF2Ni4yMDA1aDEuMTU1NHYtNi4wNDY5bDYuOTMxOCA2LjE4MDd2LTYuNDg3OWgyLjg4ODJWNy4wODk2em0tMy40NjU3LTQuNTMxdjQuNTMxaC01LjM1NWw1LjM1NS00LjUzMXptLTEzLjI4NjIuMDY3NiA0Ljg2OTEgNC40NjM0SDUuNjQ1OFYyLjYyNjJ6TTIuNzU3NiAxNi4zMzJWOC4yNDVoNy44NDc2bC02LjExNDkgNi4xMTQ3djEuOTcyM0gyLjc1NzZ6bTIuODg4MiA1LjA0MDR2LTMuODg1MmguMDAwMXYtMi42NDg4bDUuNzc2My01Ljc3NjR2Ny4wMTExbC01Ljc3NjQgNS4yOTkzem0xMi43MDg2LjAyNDgtNS43NzY2LTUuMTUwOVY5LjA2MThsNS43NzY2IDUuNzc2NnY2LjU1ODh6bTIuODg4Mi01LjA2NTJoLTEuNzMzdi0xLjk3MjNMMTMuMzk0OCA4LjI0NWg3Ljg0Nzh2OC4wODd6Jy8+PC9zdmc+")}
.b-meta{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTYuOTE1IDQuMDNjLTEuOTY4IDAtMy42ODMgMS4yOC00Ljg3MSAzLjExM0MuNzA0IDkuMjA4IDAgMTEuODgzIDAgMTQuNDQ5YzAgLjcwNi4wNyAxLjM2OS4yMSAxLjk3M2E2LjYyNCA2LjYyNCAwIDAgMCAuMjY1Ljg2IDUuMjk3IDUuMjk3IDAgMCAwIC4zNzEuNzYxYy42OTYgMS4xNTkgMS44MTggMS45MjcgMy41OTMgMS45MjcgMS40OTcgMCAyLjYzMy0uNjcxIDMuOTY1LTIuNDQ0Ljc2LTEuMDEyIDEuMTQ0LTEuNjI2IDIuNjYzLTQuMzJsLjc1Ni0xLjMzOS4xODYtLjMyNWMuMDYxLjEuMTIxLjE5Ni4xODMuM2wyLjE1MiAzLjU5NWMuNzI0IDEuMjEgMS42NjUgMi41NTYgMi40NyAzLjMxNCAxLjA0Ni45ODcgMS45OTIgMS4yMiAzLjA2IDEuMjIgMS4wNzUgMCAxLjg3Ni0uMzU1IDIuNDU1LS44NDNhMy43NDMgMy43NDMgMCAwIDAgLjgxLS45NzNjLjU0Mi0uOTM5Ljg2MS0yLjEyNy44NjEtMy43NDUgMC0yLjcyLS42ODEtNS4zNTctMi4wODQtNy40NS0xLjI4Mi0xLjkxMi0yLjk1Ny0yLjkzLTQuNzE2LTIuOTMtMS4wNDcgMC0yLjA4OC40NjctMy4wNTMgMS4zMDgtLjY1Mi41Ny0xLjI1NyAxLjI5LTEuODIgMi4wNS0uNjktLjg3NS0xLjMzNS0xLjU0Ny0xLjk1OC0yLjA1Ni0xLjE4Mi0uOTY2LTIuMzE1LTEuMzAzLTMuNDU0LTEuMzAzem0xMC4xNiAyLjA1M2MxLjE0NyAwIDIuMTg4Ljc1OCAyLjk5MiAxLjk5OSAxLjEzMiAxLjc0OCAxLjY0NyA0LjE5NSAxLjY0NyA2LjQgMCAxLjU0OC0uMzY4IDIuOS0xLjgzOSAyLjktLjU4IDAtMS4wMjctLjIzLTEuNjY0LTEuMDA0LS40OTYtLjYwMS0xLjM0My0xLjg3OC0yLjgzMi00LjM1OGwtLjYxNy0xLjAyOGE0NC45MDggNDQuOTA4IDAgMCAwLTEuMjU1LTEuOThjLjA3LS4xMDkuMTQxLS4yMjQuMjExLS4zMjcgMS4xMi0xLjY2NyAyLjExOC0yLjYwMiAzLjM1OC0yLjYwMnptLTEwLjIwMS41NTNjMS4yNjUgMCAyLjA1OC43OTEgMi42NzUgMS40NDYuMzA3LjMyNy43MzcuODcxIDEuMjM0IDEuNTc5bC0xLjAyIDEuNTY2Yy0uNzU3IDEuMTYzLTEuODgyIDMuMDE3LTIuODM3IDQuMzM4LTEuMTkxIDEuNjQ5LTEuODEgMS44MTctMi40ODYgMS44MTctLjUyNCAwLTEuMDM4LS4yMzctMS4zODMtLjc5NC0uMjYzLS40MjYtLjQ2NC0xLjEzLS40NjQtMi4wNDYgMC0yLjIyMS42My00LjUzNSAxLjY2LTYuMDg4LjQ1NC0uNjg3Ljk2NC0xLjIyNiAxLjUzMy0xLjUzM2EyLjI2NCAyLjI2NCAwIDAgMSAxLjA4OC0uMjg1eicvPjwvc3ZnPg==")}
.b-vercel{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTI0IDIyLjUyNUgwbDEyLTIxLjA1IDEyIDIxLjA1eicvPjwvc3ZnPg==")}
.b-nvidia{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTguOTQ4IDguNzk4di0xLjQzYTYuNyA2LjcgMCAwIDEgLjQyNC0uMDE4YzMuOTIyLS4xMjQgNi40OTMgMy4zNzQgNi40OTMgMy4zNzRzLTIuNzc0IDMuODUxLTUuNzUgMy44NTFjLS4zOTggMC0uNzg3LS4wNjItMS4xNTgtLjE4NXYtNC4zNDZjMS41MjguMTg1IDEuODM3Ljg1NyAyLjc0NyAyLjM4NWwyLjA0LTEuNzE0cy0xLjQ5Mi0xLjk1Mi00LTEuOTUyYTYuMDE2IDYuMDE2IDAgMCAwLS43OTYuMDM1bTAtNC43MzV2Mi4xMzhsLjQyNC0uMDI3YzUuNDUtLjE4NSA5LjAxIDQuNDcgOS4wMSA0LjQ3cy00LjA4IDQuOTY0LTguMzMgNC45NjRjLS4zNyAwLS43MzMtLjAzNS0xLjA5NS0uMDk3djEuMzI1Yy4zLjAzNS42MS4wNjIuOTEuMDYyIDMuOTU3IDAgNi44Mi0yLjAyMyA5LjU5My00LjQwOC40NTkuMzcxIDIuMzQgMS4yNjMgMi43MyAxLjY1Mi0yLjYzMyAyLjIwOC04Ljc3MiAzLjk4NC0xMi4yNTMgMy45ODQtLjMzNSAwLS42NTMtLjAxOC0uOTcxLS4wNTN2MS44NjRIMjRWNC4wNjN6bTAgMTAuMzI2djEuMTMxYy0zLjY1Ny0uNjU0LTQuNjczLTQuNDYtNC42NzMtNC40NnMxLjc1OC0xLjk0NCA0LjY3My0yLjI2MnYxLjIzN0g4Ljk0Yy0xLjUyOC0uMTg2LTIuNzMgMS4yNDUtMi43MyAxLjI0NXMuNjggMi40MTIgMi43MzkgMy4xMU0yLjQ1NiAxMC45czIuMTY0LTMuMTk3IDYuNS0zLjUzM1Y2LjIwMUM0LjE1MyA2LjU5IDAgMTAuNjUzIDAgMTAuNjUzczIuMzUgNi44MDIgOC45NDggNy40MnYtMS4yMzdjLTQuODQtLjYtNi40OTItNS45MzYtNi40OTItNS45MzZ6Jy8+PC9zdmc+")}
.b-replit{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTIgMS41QTEuNSAxLjUgMCAwIDEgMy41IDBoN0ExLjUgMS41IDAgMCAxIDEyIDEuNVY4SDMuNUExLjUgMS41IDAgMCAxIDIgNi41Wk0xMiA4aDguNUExLjUgMS41IDAgMCAxIDIyIDkuNXY1YTEuNSAxLjUgMCAwIDEtMS41IDEuNUgxMlpNMiAxNy41QTEuNSAxLjUgMCAwIDEgMy41IDE2SDEydjYuNWExLjUgMS41IDAgMCAxLTEuNSAxLjVoLTdBMS41IDEuNSAwIDAgMSAyIDIyLjVaJy8+PC9zdmc+")}
.b-roblox{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE4LjkyNiAyMy45OTggMCAxOC44OTIgNS4wNzUuMDAyIDI0IDUuMTA4Wk0xNS4zNDggMTAuMDlsLTUuMjgyLTEuNDUzLTEuNDE0IDUuMjczIDUuMjgyIDEuNDUzeicvPjwvc3ZnPg==")}
.b-github{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIC4yOTdjLTYuNjMgMC0xMiA1LjM3My0xMiAxMiAwIDUuMzAzIDMuNDM4IDkuOCA4LjIwNSAxMS4zODUuNi4xMTMuODItLjI1OC44Mi0uNTc3IDAtLjI4NS0uMDEtMS4wNC0uMDE1LTIuMDQtMy4zMzguNzI0LTQuMDQyLTEuNjEtNC4wNDItMS42MUM0LjQyMiAxOC4wNyAzLjYzMyAxNy43IDMuNjMzIDE3LjdjLTEuMDg3LS43NDQuMDg0LS43MjkuMDg0LS43MjkgMS4yMDUuMDg0IDEuODM4IDEuMjM2IDEuODM4IDEuMjM2IDEuMDcgMS44MzUgMi44MDkgMS4zMDUgMy40OTUuOTk4LjEwOC0uNzc2LjQxNy0xLjMwNS43Ni0xLjYwNS0yLjY2NS0uMy01LjQ2Ni0xLjMzMi01LjQ2Ni01LjkzIDAtMS4zMS40NjUtMi4zOCAxLjIzNS0zLjIyLS4xMzUtLjMwMy0uNTQtMS41MjMuMTA1LTMuMTc2IDAgMCAxLjAwNS0uMzIyIDMuMyAxLjIzLjk2LS4yNjcgMS45OC0uMzk5IDMtLjQwNSAxLjAyLjAwNiAyLjA0LjEzOCAzIC40MDUgMi4yOC0xLjU1MiAzLjI4NS0xLjIzIDMuMjg1LTEuMjMuNjQ1IDEuNjUzLjI0IDIuODczLjEyIDMuMTc2Ljc2NS44NCAxLjIzIDEuOTEgMS4yMyAzLjIyIDAgNC42MS0yLjgwNSA1LjYyNS01LjQ3NSA1LjkyLjQyLjM2LjgxIDEuMDk2LjgxIDIuMjIgMCAxLjYwNi0uMDE1IDIuODk2LS4wMTUgMy4yODYgMCAuMzE1LjIxLjY5LjgyNS41N0MyMC41NjUgMjIuMDkyIDI0IDE3LjU5MiAyNCAxMi4yOTdjMC02LjYyNy01LjM3My0xMi0xMi0xMicvPjwvc3ZnPg==")}
.b-figma{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE1Ljg1MiA4Ljk4MWgtNC41ODhWMGg0LjU4OGMyLjQ3NiAwIDQuNDkgMi4wMTQgNC40OSA0LjQ5cy0yLjAxNCA0LjQ5MS00LjQ5IDQuNDkxek0xMi43MzUgNy41MWgzLjExN2MxLjY2NSAwIDMuMDE5LTEuMzU1IDMuMDE5LTMuMDE5cy0xLjM1NS0zLjAxOS0zLjAxOS0zLjAxOWgtMy4xMTdWNy41MXptMCAxLjQ3MUg4LjE0OGMtMi40NzYgMC00LjQ5LTIuMDE0LTQuNDktNC40OVM1LjY3MiAwIDguMTQ4IDBoNC41ODh2OC45ODF6bS00LjU4Ny03LjUxYy0xLjY2NSAwLTMuMDE5IDEuMzU1LTMuMDE5IDMuMDE5czEuMzU0IDMuMDIgMy4wMTkgMy4wMmgzLjExN1YxLjQ3MUg4LjE0OHptNC41ODcgMTUuMDE5SDguMTQ4Yy0yLjQ3NiAwLTQuNDktMi4wMTQtNC40OS00LjQ5czIuMDE0LTQuNDkgNC40OS00LjQ5aDQuNTg4djguOTh6TTguMTQ4IDguOTgxYy0xLjY2NSAwLTMuMDE5IDEuMzU1LTMuMDE5IDMuMDE5czEuMzU1IDMuMDE5IDMuMDE5IDMuMDE5aDMuMTE3VjguOTgxSDguMTQ4ek04LjE3MiAyNGMtMi40ODkgMC00LjUxNS0yLjAxNC00LjUxNS00LjQ5czIuMDE0LTQuNDkgNC40OS00LjQ5aDQuNTg4djQuNDQxYzAgMi41MDMtMi4wNDcgNC41MzktNC41NjMgNC41Mzl6bS0uMDI0LTcuNTFhMy4wMjMgMy4wMjMgMCAwIDAtMy4wMTkgMy4wMTljMCAxLjY2NSAxLjM2NSAzLjAxOSAzLjA0NCAzLjAxOSAxLjcwNSAwIDMuMDkzLTEuMzc2IDMuMDkzLTMuMDY4di0yLjk3SDguMTQ4em03LjcwNCAwaC0uMDk4Yy0yLjQ3NiAwLTQuNDktMi4wMTQtNC40OS00LjQ5czIuMDE0LTQuNDkgNC40OS00LjQ5aC4wOThjMi40NzYgMCA0LjQ5IDIuMDE0IDQuNDkgNC40OXMtMi4wMTQgNC40OS00LjQ5IDQuNDl6bS0uMDk3LTcuNTA5Yy0xLjY2NSAwLTMuMDE5IDEuMzU1LTMuMDE5IDMuMDE5czEuMzU1IDMuMDE5IDMuMDE5IDMuMDE5aC4wOThjMS42NjUgMCAzLjAxOS0xLjM1NSAzLjAxOS0zLjAxOXMtMS4zNTUtMy4wMTktMy4wMTktMy4wMTloLS4wOTh6Jy8+PC9zdmc+")}
.b-huggingface{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEuNDQ0NiAxMS41MDU5YzAgMS4xMDIxLjE2NzMgMi4xNTg1LjQ4NDcgMy4xNTYzLS4wMzc4LS4wMDI4LS4wNjkxLS4wMDU4LS4xMDU4LS4wMDU4LS40MjA5IDAtLjgwMTUuMTYtMS4wNzA0LjQ1MTItLjM0NTQuMzczNy0uNDk4NC44MzM1LS40MzE2IDEuMjkzYTEuNTc2IDEuNTc2IDAgMCAwIC4yMTQ4LjU5NzhjLS4yMzE5LjE4NjQtLjQwMTguNDQ1Ni0uNDg0NC43NTc4LS4wNjQ2LjI0NDgtLjEzMS43NTQzLjIxNDkgMS4yNzk0YTEuNDU1MiAxLjQ1NTIgMCAwIDAtLjA2MjUuMTA1NWMtLjIwOC4zOTIzLS4yMjA3LjgzNzItLjAzNzEgMS4yNS4yNzgzLjYyNTguOTY5NiAxLjExNzUgMi4zMTI2IDEuNjQ2Ny44MzU2LjMyOTIgMS41OTg4LjU0MTEgMS42MDU2LjU0MyAxLjEwNDYuMjg0NyAyLjEwNC40Mjc3IDIuOTY5LjQyNzcgMS40MTczIDAgMi40NzU0LS4zODQ5IDMuMTUyNS0xLjE0NDYgMS41MzguMjY1MSAyLjc5MS4xNDAzIDMuNTkyLjAwNi42NzczLjc1NTUgMS43MzMyIDEuMTM4NyAzLjE0NjcgMS4xMzg3Ljg2NDkgMCAxLjg2NDMtLjE0MyAyLjk2OS0uNDI3OC4wMDY4LS4wMDE5Ljc3LS4yMTM4IDEuNjA1Ni0uNTQzIDEuMzQzLS41MjkyIDIuMDM0My0xLjAyMDggMi4zMTI2LTEuNjQ2Ni4xODM2LS40MTI5LjE3MS0uODU3Ny0uMDM3LTEuMjVhMS40Njg1IDEuNDY4NSAwIDAgMC0uMDYyNi0uMTA1NmMuMzQ2LS41MjUuMjc5NS0xLjAzNDYuMjE0OS0xLjI3OTMtLjA4MjYtLjMxMjItLjI1MjUtLjU3MTQtLjQ4NDQtLjc1NzkuMTEtLjE4MTYuMTgzMS0uMzc4OC4yMTQ4LS41OTc3LjA2NjktLjQ1OTUtLjA4NjItLjkxOTMtLjQzMTYtMS4yOTMtLjI2ODgtLjI5MTMtLjY0OTUtLjQ1MTMtMS4wNzA0LS40NTEzLS4wMjA5IDAtLjAzNzYuMDAwOC0uMDU4OC4wMDE4LjMxNjItLjk5NjYuNDg0Ni0yLjA1MTguNDg0Ni0zLjE1MjMgMC01LjgwNy00LjczNjItMTAuNTE0NC0xMC41Nzg5LTEwLjUxNDQtNS44NDI2IDAtMTAuNTc4OCA0LjcwNzMtMTAuNTc4OCAxMC41MTQ0Wm0xMC41Nzg4LTkuNDgzMWM1LjI3MjcgMCA5LjU0NzYgNC4yNDYgOS41NDc2IDkuNDgzYTkuNDIwMSA5LjQyMDEgMCAwIDEtLjI2OTYgMi4yMzY1Yy0uMDAzOS0uMDA0Ny0uMDA3OS0uMDExLS4wMTE3LS4wMTU2LS4yNzQtLjMyNTUtLjY2NzktLjUwNTktMS4xMDc1LS41MDU5LS4zNTIgMC0uNzE0LjExNTUtMS4wNzYzLjM0MzgtLjI0MDMuMTUxNy0uNTA1OC40MjItLjc3OTMuNzU5OC0uMjUzNC0uMzQ5Mi0uNjA4LS41ODMyLTEuMDEzNy0uNjQ2NWExLjUxNzQgMS41MTc0IDAgMCAwLS4yMzQ0LS4wMTc2Yy0uOTI2MyAwLTEuNDgyOC43OTkzLTEuNjkzNSAxLjUxNzctLjEwNDYuMjQyNi0uNjA2NSAxLjM0ODItMS4zNjE0IDIuMDk3OC0xLjE2ODEgMS4xNjAxLTEuNDQ1OCAyLjM1MzQtLjgzOTYgMy42MzgyLS44NDMuMTAyOS0xLjU4MzYuMDkyNy0yLjM2NS0uMDA2LjU5MDYtMS4yMTIuMzYyNi0yLjQzODgtLjg0MjYtMy42MzIyLS43NTUtLjc0OTYtMS4yNTY4LTEuODU1Mi0xLjM2MTQtMi4wOTc4LS4yMTA3LS43MTg0LS43NjczLTEuNTE3Ny0xLjY5MzUtMS41MTc3LS4wNzggMC0uMTU2OC4wMDU0LS4yMzQ0LjAxNzYtLjQwNTcuMDYzMy0uNzYwNC4yOTczLTEuMDEzNy42NDY1LS4yNzM1LS4zMzc5LS41MzktLjYwODEtLjc3OTQtLjc1OTgtLjM2MjItLjIyODMtLjcyNDMtLjM0MzgtMS4wNzYyLS4zNDM4LS40MjY2IDAtLjgwOTQuMTcxLTEuMDgyMS40Nzg2YTkuNDIwOCA5LjQyMDggMCAwIDEtLjI1OTgtMi4xOTM2YzAtNS4yMzcgNC4yNzQ5LTkuNDgzIDkuNTQ3NS05LjQ4M3pNOC42NDQzIDcuMDAzNmMtLjQ4MzguMDA0My0uOTUwMy4yNjY3LTEuMTkzNC43MjI3LS4zNTM2LjY2MzMtLjEwMDYgMS40ODczLjU2NDUgMS44NC4zNTEuMTg2Mi40ODgzLS41MjYxLjgzNi0uNjQ4NS4zMTA3LS4xMDk1Ljg0MS4zOTkgMS4wMDc4LjA4Ni4zNTM2LS42NjM0LjEwMjUtMS40ODc0LS41NjI1LTEuODRhMS4zNjU5IDEuMzY1OSAwIDAgMC0uNjUyNC0uMTYwMlptNi44NDAzIDBjLS4yMTk5LS4wMDItLjQ0MjYuMDUtLjY1MDQuMTYwMi0uNjY1LjM1MjYtLjkxODEgMS4xNzY2LS41NjQ1IDEuODQuMTY2OS4zMTMuNjk3MS0uMTk1NSAxLjAwNzktLjA4Ni4zNDc2LjEyMjQuNDg2Ny44MzQ3LjgzOC42NDg1LjY2NDktLjM1MjcuOTE2LTEuMTc2Ny41NjI0LTEuODQtLjI0My0uNDU2LS43MDk2LS43MTg0LTEuMTkzNC0uNzIyN1ptLTkuNzU2NSAxLjQxOGEuODc2OC44NzY4IDAgMCAwLS44NzcuODc3YzAgLjQ4NDYuMzkyNS44NzcuODc3Ljg3N2EuODc2OC44NzY4IDAgMCAwIC44NzctLjg3Ny44NzY4Ljg3NjggMCAwIDAtLjg3Ny0uODc3em0xMi42NDM0IDBjLS40ODQ1IDAtLjg3OS4zOTI1LS44NzkuODc3IDAgLjQ4NDYuMzk0NS44NzcuODc5Ljg3N2EuODc2OC44NzY4IDAgMCAwIC44NzctLjg3Ny44NzY4Ljg3NjggMCAwIDAtLjg3Ny0uODc3ek04Ljc5MjcgMTEuNDU5Yy0uMTc5LS4wMDMtLjI3OTMuMTEwNy0uMjc5My40MTYgMCAuODA5Ny4zODc0IDIuMTI1IDEuNDI3OSAyLjkyNC4yMDctLjcxMjMgMS4zNDUzLTEuMjgzMiAxLjUwNzktMS4yMDEyLjIzMTUuMTE2Ny4yMTkxLjQ0MTcuNjA3NC43MjY2LjM4ODQtLjI4NS4zNzQtLjYwOTguNjA1Ni0uNzI2Ni4xNjI3LS4wODIgMS4zMDA5LjQ4ODkgMS41MDc5IDEuMjAxMiAxLjA0MDQtLjc5OSAxLjQyNzgtMi4xMTQ0IDEuNDI3OC0yLjkyNCAwLTEuMjIxMi0xLjU4My42NDAyLTMuNTQxMy42NDg1LTEuNDY4Ni0uMDA2MS0yLjcyNjYtMS4wNTU4LTMuMjYzOS0xLjA2NDV6TTQuMzEyIDE0LjQ3NjhjLjU3OTIuMzY1IDEuNjk2NCAyLjI3NTEgMi4xMDU2IDMuMDE3Ny4xMzcxLjI0ODguMzcxLjM1MzYuNTgyLjM1MzYuNDE4OCAwIC43NDY1LS40MTM4LjAzOTEtLjkzOTUtMS4wNjM2LS43OTEtLjY5MTQtMi4wODQ2LS4xODM2LTIuMTY0MmEuNDMwMi40MzAyIDAgMCAxIC4wNjY0LS4wMDRjLjQ2MTYgMCAuNjY2Ljc4OTIuNjY2Ljc4OTJzLjU5NTkgMS40ODk4IDEuNjIxMyAyLjUwOGMuOTQyLjkzNTYgMS4wNjIgMS43MDMuNDk2MSAyLjY2NjEtLjAxNjQtLjAwNC0uMDE1OS4wMjM2LS4xNDg0LjIxNDktLjE4NTMuMjY3My0uNDMyMi40Njg4LS43MTg4LjYxNTItLjUwNjIuMjI2OS0xLjEzOTcuMjY5Ni0xLjc4MzMuMjY5Ni0xLjAzNyAwLTIuMTAxNy0uMTgyNC0yLjY5NzUtLjMzNi0uMDI5My0uMDA3NS0zLjY1MDUtLjk1NjctMy4xOTE2LTEuODIyNC4wNzcxLS4xNDU0LjIwMzMtLjIwMzEuMzYzMy0uMjAzMS42NDYzIDAgMS44MjMuOTU1MSAyLjMyODMuOTU1MS4xMTMgMCAuMTk2LS4wODY1LjIyODUtLjIwMzEuMjI0OS0uODA0NS0zLjI3ODctMS4wNTIyLTIuOTg0Ni0yLjE2NDIuMDUxOS0uMTk2Ny4xOTMtLjI3NTcuMzkwNy0uMjc1NC44NTQgMCAyLjc3MDQgMS40OTIzIDMuMTcyIDEuNDkyMy4wMzA3IDAgLjA1MjUtLjAwODUuMDY0NS0uMDI3NC4yMDEyLS4zMjI3LjEwOTYtLjU4NjUtMS4zMDg3LTEuNDM5NS0xLjQxODItLjg1MzMtMi40MzE1LTEuMzI5LTEuODY1My0xLjk0MTYuMDY1MS0uMDcwNy4xNTc0LS4xMDE1LjI2OTUtLjEwMTUuODYxMS4wMDAyIDIuODk0OCAxLjg0IDIuODk0OCAxLjg0cy41NDg3LjU2ODMuODgwOS41NjgzYy4wNzYyIDAgLjE0MTYtLjAzMTUuMTg1NS0uMTA1NC4yMzU1LS4zOTQ2LTIuMTg1OC0yLjIxODMtMi4zMjI0LTIuOTcxLS4wOTI2LS41MS4wNjQxLS43Njc2LjM1NTUtLjc2NzYtLjAwMDYuMDA4LjE3MDEtLjAyODUuNDk0Mi4xNzU5em0xNi4yMjU3LjU5MThjLS4xMzY2Ljc1MjYtMi41NTc5IDIuNTc2NC0yLjMyMjQgMi45NzA5LjA0NC4wNzQuMTA5Mi4xMDU1LjE4NTUuMTA1NS4zMzIxIDAgLjg4MS0uNTY4NC44ODEtLjU2ODRzMi4wMzM2LTEuODM5NyAyLjg5NDctMS44NGMuMTEyMSAwIC4yMDQ0LjAzMDguMjY5NS4xMDE2LjU2NjIuNjEyNS0uNDQ3IDEuMDg4Mi0xLjg2NTMgMS45NDE1LTEuNDE4My44NTMtMS41MSAxLjExNjgtMS4zMDg3IDEuNDM5Ni4wMTIuMDE4OC4wMzM3LjAyNzMuMDY0NC4wMjczLjQwMTYgMCAyLjMxODEtMS40OTIzIDMuMTcyMS0xLjQ5MjMuMTk3Ny0uMDAwMi4zMzg4LjA3ODcuMzkwNy4yNzU0LjI5NCAxLjExMi0zLjIwOTUgMS4zNTk3LTIuOTg0NiAyLjE2NDIuMDMyNS4xMTY2LjExNTYuMjAzMi4yMjg1LjIwMzIuNTA1NCAwIDEuNjgyLS45NTUyIDIuMzI4My0uOTU1Mi4xNiAwIC4yODYyLjA1NzcuMzYzMy4yMDMyLjQ1OS44NjU2LTMuMTYyMyAxLjgxNDktMy4xOTE2IDEuODIyNC0uNTk1OC4xNTM1LTEuNjYwNS4zMzYtMi42OTc1LjMzNi0uNjM1MSAwLTEuMjYxLS4wNDA5LTEuNzYzOC0uMjU5OS0uMjk0OS0uMTQ3Mi0uNTQ4OC0uMzUxNi0uNzM4My0uNjI1LS4wNDExLS4wNjgyLS4xMDI2LS4xNDc2LS4xNDI2LS4yMDUtLjU3MjYtLjk2NzktLjQ1NS0xLjczNzEuNDkwMy0yLjY3NiAxLjAyNTQtMS4wMTgyIDEuNjIxMi0yLjUwOCAxLjYyMTItMi41MDhzLjIwNDQtLjc4OTEuNjY2LS43ODkxYS40MzE4LjQzMTggMCAwIDEgLjA2NjUuMDAzOWMuNTA3OC4wNzk2Ljg4IDEuMzczMi0uMTgzNiAyLjE2NDItLjcwNzQuNTI1Ny0uMzc5Ny45Mzk1LjAzOS45Mzk1LjIxMSAwIC40NDUtLjEwNDcuNTgyMS0uMzUzNS40MDkyLS43NDI2IDEuNTI2NC0yLjY1MjcgMi4xMDU2LTMuMDE3OC41NTg4LS4zNTI0Ljk5LS4xODE2Ljg0OTcuNTkxOHonLz48L3N2Zz4=")}
.b-anthropic{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE3LjMwNDEgMy41NDFoLTMuNjcxOGw2LjY5NiAxNi45MThIMjRabS0xMC42MDgyIDBMMCAyMC40NTloMy43NDQybDEuMzY5My0zLjU1MjdoNy4wMDUybDEuMzY5MyAzLjU1MjhoMy43NDQyTDEwLjUzNjMgMy41NDA5Wm0tLjM3MTIgMTAuMjIzMiAyLjI5MTQtNS45NDU2IDIuMjkxNCA1Ljk0NTZaJy8+PC9zdmc+")}
.b-tiktok{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyLjUyNS4wMmMxLjMxLS4wMiAyLjYxLS4wMSAzLjkxLS4wMi4wOCAxLjUzLjYzIDMuMDkgMS43NSA0LjE3IDEuMTIgMS4xMSAyLjcgMS42MiA0LjI0IDEuNzl2NC4wM2MtMS40NC0uMDUtMi44OS0uMzUtNC4yLS45Ny0uNTctLjI2LTEuMS0uNTktMS42Mi0uOTMtLjAxIDIuOTIuMDEgNS44NC0uMDIgOC43NS0uMDggMS40LS41NCAyLjc5LTEuMzUgMy45NC0xLjMxIDEuOTItMy41OCAzLjE3LTUuOTEgMy4yMS0xLjQzLjA4LTIuODYtLjMxLTQuMDgtMS4wMy0yLjAyLTEuMTktMy40NC0zLjM3LTMuNjUtNS43MS0uMDItLjUtLjAzLTEtLjAxLTEuNDkuMTgtMS45IDEuMTItMy43MiAyLjU4LTQuOTYgMS42Ni0xLjQ0IDMuOTgtMi4xMyA2LjE1LTEuNzIuMDIgMS40OC0uMDQgMi45Ni0uMDQgNC40NC0uOTktLjMyLTIuMTUtLjIzLTMuMDIuMzctLjYzLjQxLTEuMTEgMS4wNC0xLjM2IDEuNzUtLjIxLjUxLS4xNSAxLjA3LS4xNCAxLjYxLjI0IDEuNjQgMS44MiAzLjAyIDMuNSAyLjg3IDEuMTItLjAxIDIuMTktLjY2IDIuNzctMS42MS4xOS0uMzMuNC0uNjcuNDEtMS4wNi4xLTEuNzkuMDYtMy41Ny4wNy01LjM2LjAxLTQuMDMtLjAxLTguMDUuMDItMTIuMDd6Jy8+PC9zdmc+")}
.b-suno{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE2LjUgMEMyMC42NDIgMCAyNCA1LjM3MyAyNCAxMmgtOWMwIDYuNjI3LTMuMzU4IDEyLTcuNSAxMkMzLjM1OCAyNCAwIDE4LjYyNyAwIDEyaDljMC02LjYyNyAzLjM1OC0xMiA3LjUtMTJaJy8+PC9zdmc+")}
.b-epicgames{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTMuNTM3IDBDMi4xNjUgMCAxLjY2LjUwNiAxLjY2IDEuODc5VjE4LjQ0YTQuMjYyIDQuMjYyIDAgMDAuMDIuNDMzYy4wMzEuMy4wMzcuNTkuMzE2LjkyLjAyNy4wMzMuMzExLjI0NS4zMTEuMjQ1LjE1My4wNzUuMjU4LjEzLjQzLjJsOC4zMzUgMy40OTFjLjQzMy4xOTkuNjE0LjI3Ni45MjguMjdoLjAwMmMuMzE0LjAwNi40OTUtLjA3MS45MjgtLjI3bDguMzM1LTMuNDkyYy4xNzItLjA3LjI3Ny0uMTI0LjQzLS4yIDAgMCAuMjg0LS4yMTEuMzExLS4yNDMuMjgtLjMzLjI4NS0uNjIxLjMxNi0uOTJhNC4yNjEgNC4yNjEgMCAwMC4wMi0uNDM0VjEuODc5YzAtMS4zNzMtLjUwNi0xLjg4LTEuODc4LTEuODh6bTEzLjM2NiAzLjExaC42OGMxLjEzOCAwIDEuNjg4LjU1MyAxLjY4OCAxLjY5NnYxLjg4aC0xLjM3NHYtMS44YzAtLjM2OS0uMTctLjU0LS41MjMtLjU0aC0uMjM1Yy0uMzY3IDAtLjUzNy4xNy0uNTM3LjUzOXY1LjgxYzAgLjM2OS4xNy41NC41MzcuNTRoLjI2MmMuMzUzIDAgLjUyMy0uMTcxLjUyMy0uNTRWOC42MTloMS4zNzN2Mi4xNDNjMCAxLjE0NC0uNTYyIDEuNzEtMS43IDEuNzFoLS42OTRjLTEuMTM4IDAtMS43LS41NjYtMS43LTEuNzFWNC44MmMwLTEuMTQ0LjU2Mi0xLjcwOSAxLjctMS43MDl6bS0xMi4xODYuMDhoMy4xMTR2MS4yNzRINi4xMTd2Mi42MDNoMS42NDh2MS4yNzVINi4xMTd2Mi43NzRoMS43NHYxLjI3NWgtMy4xNHptMy44MTYgMGgyLjE5OGMxLjEzOCAwIDEuNy41NjQgMS43IDEuNzA4djIuNDQ1YzAgMS4xNDQtLjU2MiAxLjcxLTEuNyAxLjcxaC0uNzk5djMuMzM4aC0xLjR6bTQuNTMgMGgxLjR2OS4yMDFoLTEuNHptLTMuMTMgMS4yMzV2My4zOTJoLjU3NWMuMzU0IDAgLjUyMy0uMTcxLjUyMy0uNTRWNC45NjVjMC0uMzY4LS4xNy0uNTQtLjUyMy0uNTR6bS0zLjc0IDEwLjE0N2ExLjcwOCAxLjcwOCAwIDAxLjU5MS4xMDggMS43NDUgMS43NDUgMCAwMS40OS4yOTlsLS40NTIuNTQ2YTEuMjQ3IDEuMjQ3IDAgMDAtLjMwOC0uMTk1LjkxLjkxIDAgMDAtLjM2My0uMDY4LjY1OC42NTggMCAwMC0uMjguMDYuNzAzLjcwMyAwIDAwLS4yMjQuMTYzLjc4My43ODMgMCAwMC0uMTUxLjI0My43OTkuNzk5IDAgMDAtLjA1Ni4yOTl2LjAwOGEuODUyLjg1MiAwIDAwLjA1Ni4zMS43LjcgMCAwMC4xNTcuMjQ1LjczNi43MzYgMCAwMC4yMzguMTYuNzc0Ljc3NCAwIDAwLjMwMy4wNTguNzkuNzkgMCAwMC40NDUtLjExNnYtLjMzOWgtLjU0OHYtLjU2NUg3LjM3djEuMjU1YTIuMDE5IDIuMDE5IDAgMDEtLjUyNC4zMDcgMS43ODkgMS43ODkgMCAwMS0uNjgzLjEyMyAxLjY0MiAxLjY0MiAwIDAxLS42MDItLjEwNyAxLjQ2IDEuNDYgMCAwMS0uNDc4LS4zIDEuMzcxIDEuMzcxIDAgMDEtLjMxOC0uNDU1IDEuNDM4IDEuNDM4IDAgMDEtLjExNS0uNTh2LS4wMDhhMS40MjYgMS40MjYgMCAwMS4xMTMtLjU3IDEuNDQ5IDEuNDQ5IDAgMDEuMzEyLS40NiAxLjQxOCAxLjQxOCAwIDAxLjQ3NC0uMzA5IDEuNTggMS41OCAwIDAxLjU5OC0uMTExIDEuNzA4IDEuNzA4IDAgMDEuMDQ1IDB6bTExLjk2My4wMDhhMi4wMDYgMi4wMDYgMCAwMS42MTIuMDk0IDEuNjEgMS42MSAwIDAxLjUwNy4yNzdsLS4zODYuNTQ2YTEuNTYyIDEuNTYyIDAgMDAtLjM5LS4yMDUgMS4xNzggMS4xNzggMCAwMC0uMzg4LS4wNy4zNDcuMzQ3IDAgMDAtLjIwOC4wNTIuMTU0LjE1NCAwIDAwLS4wNy4xMjd2LjAwOGEuMTU4LjE1OCAwIDAwLjAyMi4wODQuMTk4LjE5OCAwIDAwLjA3Ni4wNjYuODMxLjgzMSAwIDAwLjE0Ny4wNmMuMDYyLjAyLjE0LjA0LjIzNi4wNjFhMy4zODkgMy4zODkgMCAwMS40My4xMjIgMS4yOTIgMS4yOTIgMCAwMS4zMjguMTcuNjc4LjY3OCAwIDAxLjIwNy4yNC43MzkuNzM5IDAgMDEuMDcxLjMzN3YuMDA4YS44NjUuODY1IDAgMDEtLjA4MS4zODIuODIuODIgMCAwMS0uMjI5LjI4NSAxLjAzMiAxLjAzMiAwIDAxLS4zNTMuMTggMS42MDYgMS42MDYgMCAwMS0uNDYuMDYxIDIuMTYgMi4xNiAwIDAxLS43MS0uMTE2IDEuNzE4IDEuNzE4IDAgMDEtLjU5My0uMzQ2bC40My0uNTE0Yy4yNzcuMjIzLjU3OC4zMzUuOS4zMzVhLjQ1Ny40NTcgMCAwMC4yMzYtLjA1LjE1Ny4xNTcgMCAwMC4wODItLjE0MnYtLjAwOGEuMTUuMTUgMCAwMC0uMDItLjA3Ny4yMDQuMjA0IDAgMDAtLjA3My0uMDY2Ljc1My43NTMgMCAwMC0uMTQzLS4wNjIgMi40NSAyLjQ1IDAgMDAtLjIzMy0uMDYyIDUuMDM2IDUuMDM2IDAgMDEtLjQxMy0uMTEzIDEuMjYgMS4yNiAwIDAxLS4zMzEtLjE2LjcyLjcyIDAgMDEtLjIyMi0uMjQzLjczLjczIDAgMDEtLjA4Mi0uMzZ2LS4wMDhhLjg2My44NjMgMCAwMS4wNzQtLjM1OS43OTQuNzk0IDAgMDEuMjE0LS4yODMgMS4wMDcgMS4wMDcgMCAwMS4zNC0uMTg1IDEuNDIzIDEuNDIzIDAgMDEuNDQ4LS4wNjYgMi4wMDYgMi4wMDYgMCAwMS4wMjUgMHptLTkuMzU4LjAyNWguNzQybDEuMTgzIDIuODFoLS44MjVsLS4yMDMtLjQ5OUg4LjYyM2wtLjE5OC40OThoLS44MXptMi4xOTcuMDJoLjgxNGwuNjYzIDEuMDguNjYzLTEuMDhoLjgxNHYyLjc5aC0uNzY2di0xLjYwMmwtLjcxMSAxLjA5MWgtLjAxNmwtLjcwNy0xLjA4M3YxLjU5M2gtLjc1NHptMy40NjkgMGgyLjIzNXYuNjU4aC0xLjQ3M3YuNDIyaDEuMzM0di42MWgtMS4zMzR2LjQ0MmgxLjQ5M3YuNjU4aC0yLjI1NXptLTUuMy44OTdsLS4zMTUuNzkzaC42MjR6bS0xLjE0NSA1LjE5aDguMDE0bC00LjA5IDEuMzQ4eicvPjwvc3ZnPg==")}
.b-sony{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTguNTUwNSA5Ljg4ODFjLjkyMSAwIDEuNjU3NC4yMzAzIDIuMjIwOS43NDIzLjM4NDguMzQ4NS41OTk5Ljg0NTQuNTkzOSAxLjM2NjVhMS45MDgxIDEuOTA4MSAwIDAgMS0uNTkzOSAxLjM3MjZjLS41MjcyLjQ4NDgtMS4zNDgzLjc0MjMtMi4yMjEuNzQyMy0uODcyNSAwLTEuNjc4NS0uMjU3NS0yLjIxNDgtLjc0MjMtLjM5MDgtLjM0ODUtLjYwOS0uODQ4NC0uNjAzLTEuMzcyNiAwLS41MTguMjE4Mi0xLjAxNS42MDMtMS4zNjY1LjUtLjQ1NDUgMS4zODQ3LS43NDIzIDIuMjE0OS0uNzQyM3ptLjAwMyAzLjY2OTJjLjQ2MDYgMCAuODg3OC0uMTYwNiAxLjE4NzgtLjQ1NzUuMjk5OS0uMjk5OS40MzMyLS42NjA1LjQzMzItMS4xMDI5IDAtLjQyNDItLjE0ODQtLjgyMS0uNDMzMy0xLjEwMjktLjI5MzgtLjI5MDgtLjczMzItLjQ1NDUtMS4xODc3LS40NTQ1cy0uODkzOC4xNjM3LTEuMTkwNy40NTQ1Yy0uMjg0OC4yODE4LS40MzMzLjY3ODctLjQzMzMgMS4xMDMtLjAwNi40MDkuMTQ4NS44MDYuNDMzMyAxLjEwMjkuMjk2OS4yOTM5LjczMzIuNDU3NSAxLjE5MDcuNDU3NXptLTQuODQxOC0xLjk2NjVjLjE2MDUuMDQyNC4zMTUuMDk0LjQ2NjYuMTYzNmExLjM1MiAxLjM1MiAwIDAgMSAuMzc4Ny4yNTc2Yy4xOTcuMjA2LjMwOS40ODE3LjMwNi43NjY1YS45NjQzLjk2NDMgMCAwIDEtLjM3ODcuNzc4OCAyLjA2NjIgMi4wNjYyIDAgMCAxLS43MDkuMzQ4NSAzLjcyMzEgMy43MjMxIDAgMCAxLTEuMTkzOC4xNjk3Yy0uMzUyIDAtLjU0NjctLjA0MDYtLjgxMzgtLjA5NjJsLS4wNzctLjAxNmMtLjI5NC0uMDY2Ni0uNTgxNy0uMTU3NS0uODU3NS0uMjc4N2EuMDY5NS4wNjk1IDAgMCAwLS4wNDI0LS4wMTIxYy0uMDQ1NCAwLS4wODE4LjAzOTQtLjA4MTguMDg0OHYuMjAzSC4xMjEydi0xLjQ3ODZoLjUyNDJhLjc1NTkuNzU1OSAwIDAgMCAuMTM2My40MThjLjIxMjEuMjYwNy40Mzk0LjM2MDcuNjU3NS40Mzk1LjM2NjYuMTIxMi43NTE0LjE4NDggMS4xMzYyLjE5NjkuNTUyNiAwIC44NzU2LS4xMzQuOTQ1NS0uMTYzbC4wMDktLjAwMzcuMDA2Mi0uMDAyM2MuMDYxNi0uMDIyNi4zMTE5LS4xMTQzLjMxMTktLjM5MTYgMC0uMjc0My0uMjMzOC0uMzM0LS4zODctLjM3M2wtLjAyMi0uMDA1OGMtLjE3MDgtLjA0Ni0uNTYyLS4wODcyLS45ODk3LS4xMzIzbC0uMTUyNi0uMDE2Yy0uNDg0OC0uMDUxNS0uOTY5Ni0uMTI3My0xLjE5NjgtLjE3NTgtLjQ5NzctLjEwOTctLjY5NDItLjI5MTctLjgxNi0uNDA0NWwtLjAwODItLjAwNzZBMS4wMTkyIDEuMDE5MiAwIDAgMSAwIDExLjE2MDhjMC0uNDk3LjMzOTQtLjc5Ny43NTc1LS45ODE3LjQ0NTQtLjIuOTc1Ni0uMjg4IDEuNDM5Mi0uMjg4LjgyMTEuMDAzMSAxLjQ4NzcuMjY5NyAxLjcyNy4zOTQuMDk3LjA1MTUuMTQ1NS0uMDEyMS4xNDU1LS4wNjA2di0uMTQ4NGguNTI3MnYxLjI4NzZoLS40NzI3YS45MDU2LjkwNTYgMCAwIDAtLjI5MzktLjQ5MDkgMS4yODkgMS4yODkgMCAwIDAtLjI5Ny0uMTc4N2MtLjM5NjgtLjE2NjctLjgyMS0uMjUxNS0xLjI1MTMtLjI0NTUtLjQ0MjMgMC0uODY2NS4wODUtMS4wNzg2LjIxNTMtLjEzMzMuMDgxOC0uMi4xODQ4LS4yLjMwNiAwIC4xNzI3LjE0NTQuMjQyNC4yMTgyLjI2MzYuMTk2Ny4wNTk3LjYzMjguMTAzLjk3Mi4xMzY5LjA3MzYuMDA3My4xNDI2LjAxNDIuMjAzNi4wMjA2LjMyNzIuMDMzNCAxLjAxMi4xMjQzIDEuMzE1LjJ6bTE4LjE2NzMtLjk5NjZ2LS40Nzg3SDI0di40Njk2aC0uNDc1N2MtLjE3MjcgMC0uMjQyNC4wMzM0LS4zNzI3LjE3ODhsLTEuNDI3MSAxLjYzYS4wOTguMDk4IDAgMCAwLS4wMTgyLjA2OTh2Ljc0MjNhMS4xMDYgMS4xMDYgMCAwIDAgLjAxMjEuMTAzLjE0OTYuMTQ5NiAwIDAgMCAuMS4wOTA5LjkzNjguOTM2OCAwIDAgMCAuMTMwMy4wMDloLjQ4NDh2LjQ2OThoLTIuNTcyNHYtLjQ2OTdoLjQ2MDZhLjkzNDMuOTM0MyAwIDAgMCAuMTMwMi0uMDA5MS4xNjI3LjE2MjcgMCAwIDAgLjEwMzEtLjA5MS41NjI2LjU2MjYgMCAwIDAgLjAwOS0uMXYtLjc0MjJjMC0uMDI0MiAwLS4wMjQyLS4wMzMzLS4wNjM2YTYwNi43NTkyIDYwNi43NTkyIDAgMCAwLTEuNDExOS0xLjYwMjhjLS4wNzU4LS4wNzg4LS4yMDYxLS4yMDYxLS40MDYtLjIwNjFoLS40NTc2di0uNDY5NmgyLjU4NzZ2LjQ2OTZoLS4zMTIxYy0uMDY5NyAwLS4xMTgyLjA2OTctLjA1NzYuMTQ1NSAwIDAgLjg2OTYgMS4wMzkyLjg3ODcgMS4wNTEzLjAwOTEuMDEyMi4wMTUyLjAxMjIuMDI3My4wMDMuMDEyMS0uMDA5Ljg5MzgtMS4wNDUzLjg5OTktMS4wNTQzYS4wOTEyLjA5MTIgMCAwIDAtLjAxODItLjEyNzMuMTA5NS4xMDk1IDAgMCAwLS4wNjA2LS4wMTgyem0tNi4yODQtLjAwMzFoLjQ4NDhjLjIyMTIgMCAuMjYwNi4wODQ4LjI2MzYuMjkwOWwuMDI3MyAxLjU2NjQtMi41ODE1LTIuMzI0SDExLjk0NHYuNDY5N2guNDEyYy4yOTcgMCAuMzE4Mi4xNjM2LjMxODIuMzA5djIuMjEzOGMuMDAwNC4xMjg1LjAwMDkuMjk1LS4xODE4LjI5NWgtLjUwNnYuNDY2N2gyLjE2MzR2LS40Njk3aC0uNTI3M2MtLjIxMiAwLS4yMjExLS4wOTctLjIyNDItLjMwM3YtMS44ODE2bDIuOTcyNCAyLjY1MTFoLjc1NzVsLS4wMzk0LTIuOTk2NmMuMDAzLS4yMTguMDE4Mi0uMjkwOC4yNDI0LS4yOTA4aC40NzI2di0uNDY5N0gxNS41OTVaJy8+PC9zdmc+")}
.b-canva{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDBDNS4zNzMgMCAwIDUuMzczIDAgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTJTMTguNjI3IDAgMTIgMHpNNi45NjIgNy42OGMuNzU0IDAgMS4zMzcuNTQ5IDEuNDA1IDEuMi4wNjkuNTgzLS4xNzEgMS4wOTctLjgyMiAxLjQwNi0uMzQzLjE3MS0uNDguMTcyLS41NDkuMDY5LS4wMzQtLjA2OSAwLS4xMzcuMDY5LS4yMDYuNjE3LS41MTQuNjE3LS45MjYuNTQ4LTEuNTA4LS4wMzQtLjM3OC0uMzA4LS42MTgtLjU4My0uNjE4LTEuMiAwLTIuOTE0IDIuNjc0LTIuNjc0IDQuNjI5LjEwMy43NTQuNTQ5IDEuNjQ2IDEuNTA5IDEuNjQ2LjMwOCAwIC42NS0uMTAzLjk2LS4yNC41LS4yNjQuNzk5LS40NyAxLjA5Ny0uOC0uMDczLS44ODUuNzA0LTIuMDQ2IDEuODUxLTIuMDQ2LjUxNSAwIC45MjYuMjA1Ljk2LjU4My4wNjguNTE0LS4zNzcuNTgyLS41MTQuNTgycy0uMzc4LS4wMzQtLjM3OC0uMTdjLS4wMzQtLjEzOC4zMDktLjA3LjI3NS0uMzc4LS4wMzUtLjIwNi0uMjQtLjI3NC0uNDQ2LS4yNzQtLjcyIDAtMS4xMzEuOTk0LTEuMDI5IDEuNjExLjAzNS4yNzUuMTcyLjU0OS40NDcuNTQ5LjIwNSAwIC41MTQtLjMxLjYxNy0uNzU1LjA2OC0uMzA4LjM0My0uNTE0LjU4My0uNTE0LjEwMiAwIC4xNy4wMzQuMjA1LjE3MXYuMTM4Yy0uMDM0LjEzNy0uMTM3LjU0OC0uMTAyLjY1MSAwIC4wNjkuMDM0LjE3MS4xNy4xNzEuMDkyIDAgLjQzNi0uMTguNzc3LS40NTkuMTE3LS41OS4yNTMtMS4yOTguMjUzLTEuMzU3LjAzNC0uMjQuMTM3LS40OC42MTctLjQ4LjEwMyAwIC4xNzEuMDM0LjIwNS4xNzF2LjEzOGwtLjEzNi42MTdjLjQ0NS0uNTgzIDEuMDk3LS45OTQgMS41MDgtLjk5NC4xNzIgMCAuMzA5LjEwMi4zMDkuMjc0IDAgLjEwMyAwIC4yNzQtLjA2OS40NDYtLjEzNy4zNzctLjMwOS45Ni0uNDEyIDEuNDc0IDAgLjEzNy4wMzUuMjc0LjIwNy4yNzQuMTcxIDAgLjY4NS0uMjA2IDEuMDk2LS43NTRsLjAwNy0uMDA0Yy0uMDAyLS4wNjgtLjAwNy0uMTM0LS4wMDctLjIwMiAwLS40MTEuMDM1LS43NTQuMTA0LS45OTQuMDY4LS4yNzQuNDExLS41MTQuNjE3LS41MTQuMTAzIDAgLjIwNS4wNjkuMjA1LjE3MSAwIC4wMzUgMCAuMTAzLS4wMzQuMTM3LS4xMzcuNDQ2LS4yNC44NTctLjI0IDEuMjY5IDAgLjI0LjAzNC41ODIuMTAyLjc4OCAwIC4wMzQuMDM1LjA2OS4wNy4wNjkuMDY4IDAgLjU0OC0uNDQ1Ljg5LTEuMDI4LS4zMDgtLjIwNi0uNDgtLjU0OS0uNDgtLjk2IDAtLjcyLjQ0Ni0xLjA5Ny44NTgtMS4wOTcuMzQzIDAgLjYxNy4yNC42MTcuNzIgMCAuMzA4LS4xMDMuNjUtLjI3NC45NmguMTAyYS43Ny43NyAwIDAgMCAuNTg0LS4yNC4yOTMuMjkzIDAgMCAxIC4xMzQtLjExN2MuMzM1LS40MjUuODMtLjc0IDEuNDEtLjc0LjQ4IDAgLjkyNC4yMDUuOTU5LjU4Mi4wNjguNTE1LS4zNzguNjE4LS41MTUuNjE4bC0uMDAyLS4wMDJjLS4xMzggMC0uMzc3LS4wMzUtLjM3Ny0uMTcyIDAtLjEzNy4zMDktLjA2OC4yNzQtLjM3Ni0uMDM0LS4yMDYtLjI0LS4yNzUtLjQ0Ni0uMjc1LS42ODYgMC0xLjEzLjg5MS0xLjAyOCAxLjYxMS4wMzQuMjc1LjE3MS41ODMuNDQ1LjU4My4yMDYgMCAuNTE1LS4zMDguNjUyLS43NTQuMDY4LS4yNzQuMzQzLS41MTQuNTgzLS41MTQuMTAzIDAgLjE3LjAzNC4yMDUuMTcxIDAgLjA2OSAwIC4yMDYtLjEzNy42NTItLjE3LjMwOC0uMTcxLjQ4LS4xMzcuNjE3LjAzNC4yNzQuMTcxLjQ4LjMwOS41ODMuMDM0LjAzNC4wNjguMTAyLjA2OC4xMDIgMCAuMDY5LS4wMzQuMTM4LS4xMzcuMTM4LS4wMzQgMC0uMDY4IDAtLjEwMy0uMDM1LS41MTQtLjIwNS0uNzItLjU0OC0uNzg5LS44OTEtLjIwNS4yNC0uNDQ1LjM3Ny0uNzIuMzc3LS40NDUgMC0uODktLjQxMS0uOTYtLjkyNmExLjYwOSAxLjYwOSAwIDAgMSAuMDc1LS42NDljLS4yMDMuMTMtLjQyMi4yMDMtLjYyMy4yMDNoLS4xN2MtLjQ0Ny42NTItLjkyNyAxLjA5OC0xLjI3IDEuMzAzYS44OTYuODk2IDAgMCAxLS4zNzcuMTA0Yy0uMDY4IDAtLjE3MS0uMDM1LS4yMDUtLjEwNC0uMDk1LS4xNTItLjE1Ni0uMzkyLS4xOTMtLjY2Ny0uNDgxLjUyNy0xLjE0NS44MDUtMS40NTMuODA1LS4zNDMgMC0uNTQ4LS4yMDYtLjU4Mi0uNTV2LS4zNzZjLjEwMi0uNzU0LjM3Ny0xLjIuMzc3LTEuMzM3YS4wNzQuMDc0IDAgMCAwLS4wNjktLjA3Yy0uMjQgMC0xLjAyOC44MjQtMS4xNjYgMS4zNzNsLS4xMDMuNDQ1Yy0uMDY4LjMwOS0uMzc3LjUxNS0uNTgyLjUxNS0uMTAzIDAtLjE3Mi0uMDM1LS4yMDYtLjE3MnYtLjEzN2wuMDQ2LS4yMzNjLS40MzUuMzEtLjg3LjUwOC0xLjA3NS41MDgtLjMwOCAwLS40OC0uMTcyLS41MTQtLjQxMi0uMjA2LjI3NC0uNDQ1LjQxMi0uNzU0LjQxMi0uMzUyIDAtLjY5Ni0uMjQtLjg2Mi0uNTkzLS4yNDQuMjc1LS41MjMuNTUzLS44NTIuNzY0LS40OC4zMDktMS4wMjguNTQ5LTEuNjguNTQ5LS41ODIgMC0xLjA5Ny0uMzA5LTEuMzcxLS41ODMtLjQxMi0uMzc3LS42NTEtLjk2LS42ODYtMS41MDktLjIwNS0xLjY4LjgyMy0zLjg0IDIuNC00LjguMzc4LS4yMDUuNzU1LS4zNDMgMS4xMzItLjM0M3ptOS43NyAzLjI5MWMtLjEwNCAwLS4xNzIuMTcyLS4xNzIuMzQzIDAgLjI3NC4xMzcuNTgzLjMwOS43NTVhMS43NCAxLjc0IDAgMCAwIC4xMDItLjU4M2MwLS4zNDMtLjEzNy0uNTE1LS4yNC0uNTE1eicvPjwvc3ZnPg==")}
.b-adobe{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEzLjk2NiAyMi42MjRsLTEuNjktNC4yODFIOC4xMjJsMy44OTItOS4xNDQgNS42NjIgMTMuNDI1ek04Ljg4NCAxLjM3NkgwdjIxLjI0OHptMTUuMTE2IDBoLTguODg0TDI0IDIyLjYyNFonLz48L3N2Zz4=")}
.b-unity{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nbTEyLjkyODggNC4yOTM5IDMuNzk5NyAyLjE5MjljLjEzNjYuMDc3LjE0MTUuMjkwNSAwIC4zNjc1bC00LjUxNSAyLjYwNzZhLjQxOTIuNDE5MiAwIDAgMS0uNDI0NiAwTDcuMjc0IDYuODU0M2MtLjEzOS0uMDc0NS0uMTQxNS0uMjkzIDAtLjM2NzVsMy43OTcyLTIuMTkzVjBMMS4zNzU4IDUuNTk3N1YxNi43OTNsMy43MTc3LTIuMTQ1NnYtNC4zODU4Yy0uMDAyNS0uMTU2NS4xODEzLS4yNjgyLjMxOC0uMTgzOGw0LjUxNDggMi42MDc2YS40MjUyLjQyNTIgMCAwIDEgLjIxMzYuMzY3NnY1LjIxMjdjLjAwMjUuMTU2NS0uMTgxMy4yNjgyLS4zMTc5LjE4MzhsLTMuNzk5Ni0yLjE5MjktMy43MTc4IDIuMTQ1N0wxMiAyNGw5LjY5NTQtNS41OTc3LTMuNzE3OC0yLjE0NTctMy43OTk2IDIuMTkyOWMtLjEzNDEuMDgyLS4zMjI5LS4wMjQ4LS4zMTc5LS4xODM4VjEzLjA1M2MwLS4xNTY1LjA4Ny0uMjk1Ni4yMTM2LS4zNjc2bDQuNTE0OS0yLjYwNzZjLjEzNC0uMDgyLjMyMjguMDIyNC4zMTc5LjE4Mzh2NC4zODU4bDMuNzE3NyAyLjE0NTZWNS41OTc3TDEyLjkyODggMFonLz48L3N2Zz4=")}
.b-shopify{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE1LjMzNyAyMy45NzlsNy4yMTYtMS41NjFzLTIuNjA0LTE3LjYxMy0yLjYyNS0xNy43M2MtLjAxOC0uMTE2LS4xMTQtLjE5Mi0uMjExLS4xOTJzLTEuOTI5LS4xMzYtMS45MjktLjEzNi0xLjI3NS0xLjI3NC0xLjQzOS0xLjQxMWMtLjA0NS0uMDM3LS4wNzUtLjA1Ny0uMTIxLS4wNzRsLS45MTQgMjEuMTA0aC4wMjN6TTExLjcxIDExLjMwNXMtLjgxLS40MjQtMS43NzQtLjQyNGMtMS40NDcgMC0xLjUwNC45MDYtMS41MDQgMS4xNDEgMCAxLjIzMiAzLjI0IDEuNzE1IDMuMjQgNC42MjkgMCAyLjI5NS0xLjQ0IDMuNzYtMy40MDYgMy43Ni0yLjM1NCAwLTMuNTQtMS40NjUtMy41NC0xLjQ2NWwuNjQ2LTIuMDg2czEuMjQ1IDEuMDY2IDIuMjggMS4wNjZjLjY3NSAwIC45NzUtLjU0NS45NzUtLjkzMiAwLTEuNjE5LTIuNjU0LTEuNjk0LTIuNjU0LTQuMzU5LS4wMzQtMi4yMzcgMS41NzEtNC40MTYgNC44MjctNC40MTYgMS4yNTcgMCAxLjg3NS4zNjEgMS44NzUuMzYxbC0uOTQ1IDIuNzE1LS4wMi4wMXpNMTEuMTcuODNjLjEzNiAwIC4yNzEuMDM4LjQwNS4xMzUtLjk4NC40NjUtMi4wNjQgMS42MzktMi41MDggMy45OTItLjY1Ni4yMTMtMS4yOTMuNDA1LTEuODg5LjU3OEM3LjY5NyAzLjc1IDguOTUxLjg0IDExLjE3Ljg0Vi44M3ptMS4yMzUgMi45NDl2LjEzNWMtLjc1NC4yMzItMS41ODMuNDg0LTIuMzk0LjczNi40NjYtMS43NzcgMS4zMzMtMi42NDUgMi4wODUtMi45NzEuMTkzLjUwMS4zMDkgMS4xNzYuMzA5IDIuMXptLjUzOS0yLjIzNGMuNjk0LjA3NCAxLjE0MS44NjcgMS40MjkgMS43NTUtLjM0OS4xMTQtLjczNS4yMzEtMS4xNTguMzY2di0uMjUyYzAtLjc1Mi0uMDk2LTEuMzcxLS4yNzEtMS44NzF2LjAwMnptMi45OTIgMS4yODljLS4wMiAwLS4wNi4wMjEtLjA3OC4wMjFzLS4yODkuMDc1LS43MTQuMjFjLS40MjMtMS4yMzMtMS4xNzYtMi4zNy0yLjUwOC0yLjM3aC0uMTE1QzEyLjEzNS4yMDkgMTEuNjY5IDAgMTEuMjY1IDAgOC4xNTkgMCA2LjY3NSAzLjg3NyA2LjIxIDUuODQ2Yy0xLjE5NC4zNjUtMi4wNjMuNjM2LTIuMTYuNjc0LS42NzUuMjEzLS42OTQuMjMyLS43NzIuODctLjA3NS40NjItMS44MyAxNC4wNjMtMS44MyAxNC4wNjNMMTUuMDA5IDI0bC45MjctMjEuMTY2eicvPjwvc3ZnPg==")}
.b-discord{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTIwLjMxNyA0LjM2OThhMTkuNzkxMyAxOS43OTEzIDAgMDAtNC44ODUxLTEuNTE1Mi4wNzQxLjA3NDEgMCAwMC0uMDc4NS4wMzcxYy0uMjExLjM3NTMtLjQ0NDcuODY0OC0uNjA4MyAxLjI0OTUtMS44NDQ3LS4yNzYyLTMuNjgtLjI3NjItNS40ODY4IDAtLjE2MzYtLjM5MzMtLjQwNTgtLjg3NDItLjYxNzctMS4yNDk1YS4wNzcuMDc3IDAgMDAtLjA3ODUtLjAzNyAxOS43MzYzIDE5LjczNjMgMCAwMC00Ljg4NTIgMS41MTUuMDY5OS4wNjk5IDAgMDAtLjAzMjEuMDI3N0MuNTMzNCA5LjA0NTgtLjMxOSAxMy41Nzk5LjA5OTIgMTguMDU3OGEuMDgyNC4wODI0IDAgMDAuMDMxMi4wNTYxYzIuMDUyOCAxLjUwNzYgNC4wNDEzIDIuNDIyOCA1Ljk5MjkgMy4wMjk0YS4wNzc3LjA3NzcgMCAwMC4wODQyLS4wMjc2Yy40NjE2LS42MzA0Ljg3MzEtMS4yOTUyIDEuMjI2LTEuOTk0MmEuMDc2LjA3NiAwIDAwLS4wNDE2LS4xMDU3Yy0uNjUyOC0uMjQ3Ni0xLjI3NDMtLjU0OTUtMS44NzIyLS44OTIzYS4wNzcuMDc3IDAgMDEtLjAwNzYtLjEyNzdjLjEyNTgtLjA5NDMuMjUxNy0uMTkyMy4zNzE4LS4yOTE0YS4wNzQzLjA3NDMgMCAwMS4wNzc2LS4wMTA1YzMuOTI3OCAxLjc5MzMgOC4xOCAxLjc5MzMgMTIuMDYxNCAwYS4wNzM5LjA3MzkgMCAwMS4wNzg1LjAwOTVjLjEyMDIuMDk5LjI0Ni4xOTgxLjM3MjguMjkyNGEuMDc3LjA3NyAwIDAxLS4wMDY2LjEyNzYgMTIuMjk4NiAxMi4yOTg2IDAgMDEtMS44NzMuODkxNC4wNzY2LjA3NjYgMCAwMC0uMDQwNy4xMDY3Yy4zNjA0LjY5OC43NzE5IDEuMzYyOCAxLjIyNSAxLjk5MzJhLjA3Ni4wNzYgMCAwMC4wODQyLjAyODZjMS45NjEtLjYwNjcgMy45NDk1LTEuNTIxOSA2LjAwMjMtMy4wMjk0YS4wNzcuMDc3IDAgMDAuMDMxMy0uMDU1MmMuNTAwNC01LjE3Ny0uODM4Mi05LjY3MzktMy41NDg1LTEzLjY2MDRhLjA2MS4wNjEgMCAwMC0uMDMxMi0uMDI4NnpNOC4wMiAxNS4zMzEyYy0xLjE4MjUgMC0yLjE1NjktMS4wODU3LTIuMTU2OS0yLjQxOSAwLTEuMzMzMi45NTU1LTIuNDE4OSAyLjE1Ny0yLjQxODkgMS4yMTA4IDAgMi4xNzU3IDEuMDk1MiAyLjE1NjggMi40MTkgMCAxLjMzMzItLjk1NTUgMi40MTg5LTIuMTU2OSAyLjQxODl6bTcuOTc0OCAwYy0xLjE4MjUgMC0yLjE1NjktMS4wODU3LTIuMTU2OS0yLjQxOSAwLTEuMzMzMi45NTU0LTIuNDE4OSAyLjE1NjktMi40MTg5IDEuMjEwOCAwIDIuMTc1NyAxLjA5NTIgMi4xNTY4IDIuNDE5IDAgMS4zMzMyLS45NDYgMi40MTg5LTIuMTU2OCAyLjQxODlaJy8+PC9zdmc+")}
.b-slack{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTUuMDQyIDE1LjE2NWEyLjUyOCAyLjUyOCAwIDAgMS0yLjUyIDIuNTIzQTIuNTI4IDIuNTI4IDAgMCAxIDAgMTUuMTY1YTIuNTI3IDIuNTI3IDAgMCAxIDIuNTIyLTIuNTJoMi41MnYyLjUyek02LjMxMyAxNS4xNjVhMi41MjcgMi41MjcgMCAwIDEgMi41MjEtMi41MiAyLjUyNyAyLjUyNyAwIDAgMSAyLjUyMSAyLjUydjYuMzEzQTIuNTI4IDIuNTI4IDAgMCAxIDguODM0IDI0YTIuNTI4IDIuNTI4IDAgMCAxLTIuNTIxLTIuNTIydi02LjMxM3pNOC44MzQgNS4wNDJhMi41MjggMi41MjggMCAwIDEtMi41MjEtMi41MkEyLjUyOCAyLjUyOCAwIDAgMSA4LjgzNCAwYTIuNTI4IDIuNTI4IDAgMCAxIDIuNTIxIDIuNTIydjIuNTJIOC44MzR6TTguODM0IDYuMzEzYTIuNTI4IDIuNTI4IDAgMCAxIDIuNTIxIDIuNTIxIDIuNTI4IDIuNTI4IDAgMCAxLTIuNTIxIDIuNTIxSDIuNTIyQTIuNTI4IDIuNTI4IDAgMCAxIDAgOC44MzRhMi41MjggMi41MjggMCAwIDEgMi41MjItMi41MjFoNi4zMTJ6TTE4Ljk1NiA4LjgzNGEyLjUyOCAyLjUyOCAwIDAgMSAyLjUyMi0yLjUyMUEyLjUyOCAyLjUyOCAwIDAgMSAyNCA4LjgzNGEyLjUyOCAyLjUyOCAwIDAgMS0yLjUyMiAyLjUyMWgtMi41MjJWOC44MzR6TTE3LjY4OCA4LjgzNGEyLjUyOCAyLjUyOCAwIDAgMS0yLjUyMyAyLjUyMSAyLjUyNyAyLjUyNyAwIDAgMS0yLjUyLTIuNTIxVjIuNTIyQTIuNTI3IDIuNTI3IDAgMCAxIDE1LjE2NSAwYTIuNTI4IDIuNTI4IDAgMCAxIDIuNTIzIDIuNTIydjYuMzEyek0xNS4xNjUgMTguOTU2YTIuNTI4IDIuNTI4IDAgMCAxIDIuNTIzIDIuNTIyQTIuNTI4IDIuNTI4IDAgMCAxIDE1LjE2NSAyNGEyLjUyNyAyLjUyNyAwIDAgMS0yLjUyLTIuNTIydi0yLjUyMmgyLjUyek0xNS4xNjUgMTcuNjg4YTIuNTI3IDIuNTI3IDAgMCAxLTIuNTItMi41MjMgMi41MjYgMi41MjYgMCAwIDEgMi41Mi0yLjUyaDYuMzEzQTIuNTI3IDIuNTI3IDAgMCAxIDI0IDE1LjE2NWEyLjUyOCAyLjUyOCAwIDAgMS0yLjUyMiAyLjUyM2gtNi4zMTN6Jy8+PC9zdmc+")}
.b-openai{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTIyLjI4MTkgOS44MjExYTUuOTg0NyA1Ljk4NDcgMCAwIDAtLjUxNTctNC45MTA4IDYuMDQ2MiA2LjA0NjIgMCAwIDAtNi41MDk4LTIuOUE2LjA2NTEgNi4wNjUxIDAgMCAwIDQuOTgwNyA0LjE4MThhNS45ODQ3IDUuOTg0NyAwIDAgMC0zLjk5NzcgMi45IDYuMDQ2MiA2LjA0NjIgMCAwIDAgLjc0MjcgNy4wOTY2IDUuOTggNS45OCAwIDAgMCAuNTExIDQuOTEwNyA2LjA1MSA2LjA1MSAwIDAgMCA2LjUxNDYgMi45MDAxQTUuOTg0NyA1Ljk4NDcgMCAwIDAgMTMuMjU5OSAyNGE2LjA1NTcgNi4wNTU3IDAgMCAwIDUuNzcxOC00LjIwNTggNS45ODk0IDUuOTg5NCAwIDAgMCAzLjk5NzctMi45MDAxIDYuMDU1NyA2LjA1NTcgMCAwIDAtLjc0NzUtNy4wNzI5em0tOS4wMjIgMTIuNjA4MWE0LjQ3NTUgNC40NzU1IDAgMCAxLTIuODc2NC0xLjA0MDhsLjE0MTktLjA4MDQgNC43NzgzLTIuNzU4MmEuNzk0OC43OTQ4IDAgMCAwIC4zOTI3LS42ODEzdi02LjczNjlsMi4wMiAxLjE2ODZhLjA3MS4wNzEgMCAwIDEgLjAzOC4wNTJ2NS41ODI2YTQuNTA0IDQuNTA0IDAgMCAxLTQuNDk0NSA0LjQ5NDR6bS05LjY2MDctNC4xMjU0YTQuNDcwOCA0LjQ3MDggMCAwIDEtLjUzNDYtMy4wMTM3bC4xNDIuMDg1MiA0Ljc4MyAyLjc1ODJhLjc3MTIuNzcxMiAwIDAgMCAuNzgwNiAwbDUuODQyOC0zLjM2ODV2Mi4zMzI0YS4wODA0LjA4MDQgMCAwIDEtLjAzMzIuMDYxNUw5Ljc0IDE5Ljk1MDJhNC40OTkyIDQuNDk5MiAwIDAgMS02LjE0MDgtMS42NDY0ek0yLjM0MDggNy44OTU2YTQuNDg1IDQuNDg1IDAgMCAxIDIuMzY1NS0xLjk3MjhWMTEuNmEuNzY2NC43NjY0IDAgMCAwIC4zODc5LjY3NjVsNS44MTQ0IDMuMzU0My0yLjAyMDEgMS4xNjg1YS4wNzU3LjA3NTcgMCAwIDEtLjA3MSAwbC00LjgzMDMtMi43ODY1QTQuNTA0IDQuNTA0IDAgMCAxIDIuMzQwOCA3Ljg3MnptMTYuNTk2MyAzLjg1NThMMTMuMTAzOCA4LjM2NCAxNS4xMTkyIDcuMmEuMDc1Ny4wNzU3IDAgMCAxIC4wNzEgMGw0LjgzMDMgMi43OTEzYTQuNDk0NCA0LjQ5NDQgMCAwIDEtLjY3NjUgOC4xMDQydi01LjY3NzJhLjc5Ljc5IDAgMCAwLS40MDctLjY2N3ptMi4wMTA3LTMuMDIzMWwtLjE0Mi0uMDg1Mi00Ljc3MzUtMi43ODE4YS43NzU5Ljc3NTkgMCAwIDAtLjc4NTQgMEw5LjQwOSA5LjIyOTdWNi44OTc0YS4wNjYyLjA2NjIgMCAwIDEgLjAyODQtLjA2MTVsNC44MzAzLTIuNzg2NmE0LjQ5OTIgNC40OTkyIDAgMCAxIDYuNjgwMiA0LjY2ek04LjMwNjUgMTIuODYzbC0yLjAyLTEuMTYzOGEuMDgwNC4wODA0IDAgMCAxLS4wMzgtLjA1NjdWNi4wNzQyYTQuNDk5MiA0LjQ5OTIgMCAwIDEgNy4zNzU3LTMuNDUzN2wtLjE0Mi4wODA1TDguNzA0IDUuNDU5YS43OTQ4Ljc5NDggMCAwIDAtLjM5MjcuNjgxM3ptMS4wOTc2LTIuMzY1NGwyLjYwMi0xLjQ5OTggMi42MDY5IDEuNDk5OHYyLjk5OTRsLTIuNTk3NCAxLjQ5OTctMi42MDY3LTEuNDk5N1onLz48L3N2Zz4=")}
.b-unreal{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDBhMTIgMTIgMCAxMDEyIDEyQTEyIDEyIDAgMDAxMiAwem0wIDIzLjUyQTExLjUyIDExLjUyIDAgMTEyMy41MiAxMiAxMS41MiAxMS41MiAwIDAxMTIgMjMuNTJ6bTcuMTMtOS43OTFjLS4yMDYuOTk3LTEuMTI2IDMuNTU3LTQuMDYgNC45NDJsLTEuMTc5LTEuMzI1LTEuOTg4IDJhNy4zMzggNy4zMzggMCAwMS01LjgwNC0yLjk3OCAyLjg1OSAyLjg1OSAwIDAwLjY1LjEyM2MuMzI2LjAwNi42NzgtLjExNC42NzgtLjY2di01LjM5NGEuODkuODkgMCAwMC0xLjExNi0uODljLS45Mi4yMTItMS42NTYgMi41MDktMS42NTYgMi41MDlhNy4zMDQgNy4zMDQgMCAwMTIuNTI4LTUuNTk3IDcuNDA4IDcuNDA4IDAgMDEzLjczLTEuNzIxYy0xLjAwNi41NzMtMS41NyAxLjUwNy0xLjU3IDIuMjkgMCAxLjI2Mi43NiAxLjEwOS45ODQuOTIzdjcuMjhhMS4xNTcgMS4xNTcgMCAwMC4xNDguMjU2IDEuMDc1IDEuMDc1IDAgMDAuODguNDQ1Yy43NiAwIDEuNzQ3LS44NjggMS43NDctLjg2OFY5LjE3MmMwLS42LS40NTItMS4zMjQtLjkwNS0xLjU3MiAwIDAgLjgzOC0uMTQ5IDEuNDg0LjM0NmE1LjUzNyA1LjUzNyAwIDAxLjM4Ny0uNDI1YzEuNTA4LTEuNDggMi45MjktMS45MDIgNC4xMTItMi4xMTIgMCAwLTIuMTUxIDEuNjktMi4xNTEgMy45NiAwIDEuNjg3LjA0MyA1LjgwMS4wNDMgNS44MDEuNzk5Ljc3MSAxLjk4Ni0uMzQyIDMuMDU5LTEuNDQxWicvPjwvc3ZnPg==")}
.b-stripe{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEzLjk3NiA5LjE1Yy0yLjE3Mi0uODA2LTMuMzU2LTEuNDI2LTMuMzU2LTIuNDA5IDAtLjgzMS42ODMtMS4zMDUgMS45MDEtMS4zMDUgMi4yMjcgMCA0LjUxNS44NTggNi4wOSAxLjYzMWwuODktNS40OTRDMTguMjUyLjk3NSAxNS42OTcgMCAxMi4xNjUgMCA5LjY2NyAwIDcuNTg5LjY1NCA2LjEwNCAxLjg3MiA0LjU2IDMuMTQ3IDMuNzU3IDQuOTkyIDMuNzU3IDcuMjE4YzAgNC4wMzkgMi40NjcgNS43NiA2LjQ3NiA3LjIxOSAyLjU4NS45MiAzLjQ0NSAxLjU3NCAzLjQ0NSAyLjU4MyAwIC45OC0uODQgMS41NDUtMi4zNTQgMS41NDUtMS44NzUgMC00Ljk2NS0uOTIxLTYuOTktMi4xMDlsLS45IDUuNTU1QzUuMTc1IDIyLjk5IDguMzg1IDI0IDExLjcxNCAyNGMyLjY0MSAwIDQuODQzLS42MjQgNi4zMjgtMS44MTMgMS42NjQtMS4zMDUgMi41MjUtMy4yMzYgMi41MjUtNS43MzIgMC00LjEyOC0yLjUyNC01Ljg1MS02LjU5NC03LjMwNWguMDAzeicvPjwvc3ZnPg==")}
.b-googlecloud{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyLjE5IDIuMzhhOS4zNDQgOS4zNDQgMCAwIDAtOS4yMzQgNi44OTNjLjA1My0uMDItLjA1NS4wMTMgMCAwLTMuODc1IDIuNTUxLTMuOTIyIDguMTEtLjI0NyAxMC45NDFsLjAwNi0uMDA3LS4wMDcuMDNhNi43MTcgNi43MTcgMCAwIDAgNC4wNzcgMS4zNTZoNS4xNzNsLjAzLjAzaDUuMTkyYzYuNjg3LjA1MyA5LjM3Ni04LjYwNSAzLjgzNS0xMi4zNWE5LjM2NSA5LjM2NSAwIDAgMC0yLjgyMS00LjU1MmwtLjA0My4wNDMuMDA2LS4wNUE5LjM0NCA5LjM0NCAwIDAgMCAxMi4xOSAyLjM4em0tLjM1OCA0LjE0NmMxLjI0NC0uMDQgMi41MTguMzY4IDMuNDg2IDEuMTVhNS4xODYgNS4xODYgMCAwIDEgMS44NjIgNC4wNzh2LjUxOGMzLjUzLS4wNyAzLjUzIDUuMjYyIDAgNS4xOTNoLTUuMTkzbC0uMDA4LjAwOXYtLjA0SDYuNzg1YTIuNTkgMi41OSAwIDAgMS0xLjA2Ny0uMjNoLjAwMWEyLjU5NyAyLjU5NyAwIDEgMSAzLjQzNy0zLjQzN2wzLjAxMy0zLjAxMkE2Ljc0NyA2Ljc0NyAwIDAgMCA4LjExIDguMjRjLjAxOC0uMDEuMDQtLjAyNi4wNTQtLjAyM2E1LjE4NiA1LjE4NiAwIDAgMSAzLjY3LTEuNjl6Jy8+PC9zdmc+")}
.b-elevenlabs{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTQuNjAzNSAwdjI0aDQuOTMxN1Ywem05Ljg2MTMgMHYyNGg0LjkzMTdWMHonLz48L3N2Zz4=")}
.b-notion{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTQuNDU5IDQuMjA4Yy43NDYuNjA2IDEuMDI2LjU2IDIuNDI4LjQ2NmwxMy4yMTUtLjc5M2MuMjggMCAuMDQ3LS4yOC0uMDQ2LS4zMjZMMTcuODYgMS45NjhjLS40Mi0uMzI2LS45ODEtLjctMi4wNTUtLjYwN0wzLjAxIDIuMjk1Yy0uNDY2LjA0Ni0uNTYuMjgtLjM3NC40NjZ6bS43OTMgMy4wOHYxMy45MDRjMCAuNzQ3LjM3MyAxLjAyNyAxLjIxNC45OGwxNC41MjMtLjg0Yy44NDEtLjA0Ni45MzUtLjU2LjkzNS0xLjE2N1Y2LjM1NGMwLS42MDYtLjIzMy0uOTMzLS43NDgtLjg4N2wtMTUuMTc3Ljg4N2MtLjU2LjA0Ny0uNzQ3LjMyNy0uNzQ3LjkzM3ptMTQuMzM3Ljc0NWMuMDkzLjQyIDAgLjg0LS40Mi44ODhsLS43LjE0djEwLjI2NGMtLjYwOC4zMjctMS4xNjguNTE0LTEuNjM1LjUxNC0uNzQ4IDAtLjkzNS0uMjM0LTEuNDk1LS45MzNsLTQuNTc3LTcuMTg2djYuOTUyTDEyLjIxIDE5czAgLjg0LTEuMTY4Ljg0bC0zLjIyMi4xODZjLS4wOTMtLjE4NiAwLS42NTMuMzI3LS43NDZsLjg0LS4yMzNWOS44NTRMNy44MjIgOS43NmMtLjA5NC0uNDIuMTQtMS4wMjYuNzkzLTEuMDczbDMuNDU2LS4yMzMgNC43NjQgNy4yNzl2LTYuNDRsLTEuMjE1LS4xMzljLS4wOTMtLjUxNC4yOC0uODg3Ljc0Ny0uOTMzek0xLjkzNiAxLjAzNWwxMy4zMS0uOThjMS42MzQtLjE0IDIuMDU1LS4wNDcgMy4wODIuN2w0LjI0OSAyLjk4NmMuNy41MTMuOTM0LjY1My45MzQgMS4yMTN2MTYuMzc4YzAgMS4wMjYtLjM3MyAxLjYzNC0xLjY4IDEuNzI2bC0xNS40NTguOTM0Yy0uOTguMDQ3LTEuNDQ4LS4wOTMtMS45NjItLjc0N2wtMy4xMjktNC4wNmMtLjU2LS43NDctLjc5My0xLjMwNi0uNzkzLTEuOTZWMi42NjdjMC0uODM5LjM3NC0xLjU0IDEuNDQ3LTEuNjMyeicvPjwvc3ZnPg==")}

.b-aws{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTYuNzYzIDEwLjAzNmMwIC4yOTYuMDMyLjUzNS4wODguNzEuMDY0LjE3Ni4xNDQuMzY4LjI1Ni41NzYuMDQuMDYzLjA1Ni4xMjcuMDU2LjE4MyAwIC4wOC0uMDQ4LjE2LS4xNTIuMjRsLS41MDMuMzM1YS4zODMuMzgzIDAgMCAxLS4yMDguMDcyYy0uMDggMC0uMTYtLjA0LS4yMzktLjExMmEyLjQ3IDIuNDcgMCAwIDEtLjI4Ny0uMzc1IDYuMTggNi4xOCAwIDAgMS0uMjQ4LS40NzFjLS42MjIuNzM0LTEuNDA1IDEuMTAxLTIuMzQ3IDEuMTAxLS42NyAwLTEuMjA1LS4xOTEtMS41OTYtLjU3NC0uMzkxLS4zODQtLjU5LS44OTQtLjU5LTEuNTMzIDAtLjY3OC4yMzktMS4yMy43MjYtMS42NDQuNDg3LS40MTUgMS4xMzMtLjYyMyAxLjk1NS0uNjIzLjI3MiAwIC41NTEuMDI0Ljg0Ni4wNjQuMjk2LjA0LjYuMTA0LjkxOC4xNzZ2LS41ODNjMC0uNjA3LS4xMjctMS4wMy0uMzc1LTEuMjc3LS4yNTUtLjI0OC0uNjg2LS4zNjctMS4zLS4zNjctLjI4IDAtLjU2OC4wMzEtLjg2My4xMDMtLjI5NS4wNzItLjU4My4xNi0uODYyLjI3MmEyLjI4NyAyLjI4NyAwIDAgMS0uMjguMTA0LjQ4OC40ODggMCAwIDEtLjEyNy4wMjNjLS4xMTIgMC0uMTY4LS4wOC0uMTY4LS4yNDd2LS4zOTFjMC0uMTI4LjAxNi0uMjI0LjA1Ni0uMjhhLjU5Ny41OTcgMCAwIDEgLjIyNC0uMTY3Yy4yNzktLjE0NC42MTQtLjI2NCAxLjAwNS0uMzZhNC44NCA0Ljg0IDAgMCAxIDEuMjQ2LS4xNTFjLjk1IDAgMS42NDQuMjE2IDIuMDkxLjY0Ny40MzkuNDMuNjYyIDEuMDg1LjY2MiAxLjk2M3YyLjU4NnptLTMuMjQgMS4yMTRjLjI2MyAwIC41MzQtLjA0OC44MjItLjE0NC4yODctLjA5Ni41NDMtLjI3MS43NTgtLjUxLjEyOC0uMTUyLjIyNC0uMzIuMjcyLS41MTIuMDQ3LS4xOTEuMDgtLjQyMy4wOC0uNjk0di0uMzM1YTYuNjYgNi42NiAwIDAgMC0uNzM1LS4xMzYgNi4wMiA2LjAyIDAgMCAwLS43NS0uMDQ4Yy0uNTM1IDAtLjkyNi4xMDQtMS4xOS4zMi0uMjYzLjIxNS0uMzkuNTE4LS4zOS45MTcgMCAuMzc1LjA5NS42NTUuMjk1Ljg0Ni4xOTEuMi40Ny4yOTYuODM4LjI5NnptNi40MS44NjJjLS4xNDQgMC0uMjQtLjAyNC0uMzA0LS4wOC0uMDY0LS4wNDgtLjEyLS4xNi0uMTY4LS4zMTFMNy41ODYgNS41NWExLjM5OCAxLjM5OCAwIDAgMS0uMDcyLS4zMmMwLS4xMjguMDY0LS4yLjE5MS0uMmguNzgzYy4xNTEgMCAuMjU1LjAyNS4zMS4wOC4wNjUuMDQ4LjExMy4xNi4xNi4zMTJsMS4zNDIgNS4yODQgMS4yNDUtNS4yODRjLjA0LS4xNi4wODgtLjI2NC4xNTEtLjMxMmEuNTQ5LjU0OSAwIDAgMSAuMzItLjA4aC42MzhjLjE1MiAwIC4yNTYuMDI1LjMyLjA4LjA2My4wNDguMTIuMTYuMTUxLjMxMmwxLjI2MSA1LjM0OCAxLjM4MS01LjM0OGMuMDQ4LS4xNi4xMDQtLjI2NC4xNi0uMzEyYS41Mi41MiAwIDAgMSAuMzExLS4wOGguNzQzYy4xMjcgMCAuMi4wNjUuMi4yIDAgLjA0LS4wMDkuMDgtLjAxNy4xMjhhMS4xMzcgMS4xMzcgMCAwIDEtLjA1Ni4ybC0xLjkyMyA2LjE3Yy0uMDQ4LjE2LS4xMDQuMjYzLS4xNjguMzExYS41MS41MSAwIDAgMS0uMzAzLjA4aC0uNjg3Yy0uMTUxIDAtLjI1NS0uMDI0LS4zMi0uMDgtLjA2My0uMDU2LS4xMTktLjE2LS4xNS0uMzJsLTEuMjM4LTUuMTQ4LTEuMjMgNS4xNGMtLjA0LjE2LS4wODcuMjY0LS4xNS4zMi0uMDY1LjA1Ni0uMTc3LjA4LS4zMi4wOHptMTAuMjU2LjIxNWMtLjQxNSAwLS44My0uMDQ4LTEuMjI5LS4xNDMtLjM5OS0uMDk2LS43MS0uMi0uOTE4LS4zMi0uMTI4LS4wNzEtLjIxNS0uMTUxLS4yNDctLjIyM2EuNTYzLjU2MyAwIDAgMS0uMDQ4LS4yMjR2LS40MDdjMC0uMTY3LjA2NC0uMjQ3LjE4My0uMjQ3LjA0OCAwIC4wOTYuMDA4LjE0NC4wMjQuMDQ4LjAxNi4xMi4wNDguMi4wOC4yNzEuMTIuNTY2LjIxNS44NzguMjc5LjMxOS4wNjQuNjMuMDk2Ljk1LjA5Ni41MDIgMCAuODk0LS4wODggMS4xNjUtLjI2NGEuODYuODYgMCAwIDAgLjQxNS0uNzU4Ljc3Ny43NzcgMCAwIDAtLjIxNS0uNTU5Yy0uMTQ0LS4xNTEtLjQxNi0uMjg3LS44MDctLjQxNWwtMS4xNTctLjM2Yy0uNTgzLS4xODMtMS4wMTQtLjQ1NC0xLjI3Ny0uODEzYTEuOTAyIDEuOTAyIDAgMCAxLS40LTEuMTU4YzAtLjMzNS4wNzMtLjYzLjIxNi0uODg2LjE0NC0uMjU1LjMzNS0uNDc5LjU3NS0uNjU0LjI0LS4xODQuNTEtLjMyLjgzLS40MTUuMzItLjA5Ni42NTUtLjEzNiAxLjAwNi0uMTM2LjE3NSAwIC4zNTkuMDA4LjUzNS4wMzIuMTgzLjAyNC4zNS4wNTYuNTE4LjA4OC4xNi4wNC4zMTIuMDguNDU1LjEyNy4xNDQuMDQ4LjI1Ni4wOTYuMzM2LjE0NGEuNjkuNjkgMCAwIDEgLjI0LjIuNDMuNDMgMCAwIDEgLjA3MS4yNjN2LjM3NWMwIC4xNjgtLjA2NC4yNTYtLjE4NC4yNTZhLjgzLjgzIDAgMCAxLS4zMDMtLjA5NiAzLjY1MiAzLjY1MiAwIDAgMC0xLjUzMi0uMzExYy0uNDU1IDAtLjgxNS4wNzEtMS4wNjIuMjIzLS4yNDguMTUyLS4zNzUuMzgzLS4zNzUuNzEgMCAuMjI0LjA4LjQxNi4yNC41NjcuMTU5LjE1Mi40NTQuMzA0Ljg3Ny40NGwxLjEzNC4zNThjLjU3NC4xODQuOTkuNDQgMS4yMzcuNzY3LjI0Ny4zMjcuMzY3LjcwMi4zNjcgMS4xMTcgMCAuMzQzLS4wNzIuNjU1LS4yMDcuOTI2LS4xNDQuMjcyLS4zMzYuNTExLS41ODMuNzAzLS4yNDguMi0uNTQzLjM0My0uODg2LjQ0Ny0uMzYuMTExLS43MzQuMTY3LTEuMTQyLjE2N3pNMjEuNjk4IDE2LjIwN2MtMi42MjYgMS45NC02LjQ0MiAyLjk2OS05LjcyMiAyLjk2OS00LjU5OCAwLTguNzQtMS43LTExLjg3LTQuNTI2LS4yNDctLjIyMy0uMDI0LS41MjcuMjcyLS4zNTEgMy4zODQgMS45NjMgNy41NTkgMy4xNTMgMTEuODc3IDMuMTUzIDIuOTE0IDAgNi4xMTQtLjYwNyA5LjA2LTEuODUyLjQzOS0uMi44MTQuMjg3LjM4My42MDd6TTIyLjc5MiAxNC45NjFjLS4zMzYtLjQzLTIuMjItLjIwNy0zLjA3NC0uMTAzLS4yNTUuMDMyLS4yOTUtLjE5Mi0uMDYzLS4zNiAxLjUtMS4wNTMgMy45NjctLjc1IDQuMjU0LS4zOTkuMjg3LjM2LS4wOCAyLjgyNi0xLjQ4NSA0LjAwNy0uMjE1LjE4NC0uNDIzLjA4OC0uMzI3LS4xNTEuMzItLjc5IDEuMDMtMi41Ny42OTUtMi45OTR6Jy8+PC9zdmc+")}
.b-bambulab{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyLjY2MiAyNFY4Ljk1OWw4LjUzNSAzLjM2OVYyNHptLTkuODU5LS4wMDN2LTcuNTIxbDguNTM0LTMuMzcxLS4wMDEgMTAuODkyek0yLjgwMyAwaDguNTMzbC4wMDEgMTEuNjcyLTguNTM0IDMuMzY5em05Ljg1OSAwaDguNTM1djEwLjg5MmwtOC41MzUtMy4zNzF6Jy8+PC9zdmc+")}
.b-microsoft{--mark:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPjxwYXRoIGZpbGw9IiNGMTUxMUIiIGQ9Ik0xMjEuNjY2IDEyMS42NjZIMFYwaDEyMS42NjZ6Ii8+PHBhdGggZmlsbD0iIzgwQ0MyOCIgZD0iTTI1NiAxMjEuNjY2SDEzNC4zMzVWMEgyNTZ6Ii8+PHBhdGggZmlsbD0iIzAwQURFRiIgZD0iTTEyMS42NjMgMjU2LjAwMkgwVjEzNC4zMzZoMTIxLjY2M3oiLz48cGF0aCBmaWxsPSIjRkJCQzA5IiBkPSJNMjU2IDI1Ni4wMDJIMTM0LjMzNVYxMzQuMzM2SDI1NnoiLz48L3N2Zz4=")}
.b-runway{--mark:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDMwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzFfMikiPjxwYXRoIGQ9Ik0yMTIuNDg2IDEwNS4yMkMyMTYuMjU0IDExNi45MzggMjE1LjI2MSAxMjcuNjQyIDIwNy40NTIgMTM3LjMxMkMyMDMuOTQzIDE0MS42NTggMTk4Ljk3MyAxNDQuNDg1IDE4OS4xMyAxNDcuMDA1QzE5MS41NyAxNDkuMjc5IDE5My44MDkgMTUxLjI0MiAxOTUuOTA2IDE1My4zNDdDMTk5Ljk2IDE1Ny40MTcgMjAzLjk4NiAxNjEuNTE4IDIwNy45MzIgMTY1LjY5M0MyMTcuMTU0IDE3NS40NTEgMjE2LjgwNCAxODkuNTQ2IDIxMC41NDEgMjAwLjY5M0MyMDIuMjcxIDIxNS40MTIgMTgxLjE5MSAyMjAuMTg3IDE2OC40OCAyMDkuMjM4QzE2Mi40MjEgMjA0LjAxOSAxNTYuNzMzIDE5OC4zNjggMTUwLjkwNCAxOTIuODg0QzE0OS43MzMgMTkxLjc4MiAxNDguNjgxIDE5MC41NTMgMTQ3LjQwNyAxODkuMjA1QzE0Ni40MDEgMTkyLjMxMSAxNDUuNzUxIDE5NS4yNDIgMTQ0LjUzNyAxOTcuOTE4QzEzNy43NzUgMjEyLjgyMiAxMTguNjk4IDIxOC44NTcgMTAzLjE1MyAyMTEuMTk4QzkyLjU5ODYgMjA1Ljk5NyA4Ny42NjAxIDE5Ny4wODcgODcuNDkzOSAxODUuODMyQzg3LjE1MjEgMTYyLjY5IDg3LjI2MDIgMTM5LjUzOSA4Ny40Mzg2IDExNi4zOTNDODcuNTU4NSAxMDAuODM4IDEwMC4yNDUgODcuNDg2MiAxMTUuNzY2IDg3LjIyMDVDMTM5LjQ0OCA4Ni44MTUyIDE2My4xNDYgODYuODcyNSAxODYuODMxIDg3LjIxMzJDMTk5LjAwMiA4Ny4zODgzIDIwNy42MjggOTMuNjQ3NiAyMTIuNDg2IDEwNS4yMlpNMTI1LjAxIDEwOC4wODZDMTIxLjExOSAxMDUuMDMyIDExNi44NzUgMTAzLjkzNSAxMTIuMzI0IDEwNi4zNDNDMTA3LjcyMyAxMDguNzc4IDEwNS41NzUgMTEyLjYzOCAxMDUuNjAzIDExOC4wMDNDMTA1LjcyIDE0MC4xNDkgMTA1LjYyNSAxNjIuMjk1IDEwNS42OTggMTg0LjQ0MUMxMDUuNzA1IDE4Ni40NDIgMTA1Ljk3MiAxODguNjE3IDEwNi43ODggMTkwLjQwNUMxMDkuMDE2IDE5NS4yODIgMTE0Ljk5MiAxOTcuNjcyIDEyMC41OTggMTk2LjI4MUMxMjUuOTU5IDE5NC45NSAxMjkuMTAxIDE5MC44NjkgMTI5LjEwNCAxODUuMTExQzEyOS4xMTggMTYyLjYzOSAxMjkuMDYyIDE0MC4xNjcgMTI5LjE1OCAxMTcuNjk1QzEyOS4xNzQgMTEzLjk1MSAxMjguMDE1IDExMC45MzggMTI1LjAxIDEwOC4wODZaTTE1MC40NDIgMTQ2Ljg0NkMxNDkuNDk4IDE0Ni44OTEgMTQ4LjU1MyAxNDYuOTM2IDE0Ny4zOSAxNDYuOTkxQzE0Ny4zOSAxNTIuMjcgMTQ3LjMzNiAxNTcuMzU4IDE0Ny40NDMgMTYyLjQ0M0MxNDcuNDYxIDE2My4yOTEgMTQ3Ljk4MyAxNjQuMzEzIDE0OC41OTcgMTY0LjkzNUMxNTguMDM1IDE3NC41MDEgMTY3LjQ0MiAxODQuMTAyIDE3Ny4wODMgMTkzLjQ2QzE3OC44MjEgMTk1LjE0OCAxODEuNDczIDE5Ni4zOTUgMTgzLjg3OCAxOTYuNzkxQzE4OC43NzkgMTk3LjU5OSAxOTMuNzMxIDE5NC4zMTMgMTk2LjE0NCAxODkuNDI2QzE5OC4xNTcgMTg1LjM0OCAxOTcuMjA5IDE4MC4zMzUgMTkzLjU1IDE3Ni42MDZDMTg1LjI2MyAxNjguMTYyIDE3Ni44MzYgMTU5Ljg1NCAxNjguNjQzIDE1MS4zMjFDMTY1LjQzNyAxNDcuOTgxIDE2Mi4wMjkgMTQ2LjAzOCAxNTcuMjU5IDE0Ni43OTNDMTU1LjI0NSAxNDcuMTEyIDE1My4xMzggMTQ2Ljg0NiAxNTAuNDQyIDE0Ni44NDZaTTE2OS4yMzkgMTA1LjA0MkMxNjEuMjcyIDEwNS4wNDIgMTUzLjMwNSAxMDUuMDQyIDE0NS45NDggMTA1LjA0MkMxNDYuNjE0IDExMy4xNTEgMTQ3LjI1MiAxMjAuOTM0IDE0Ny45MDUgMTI4Ljg4NkMxNjAuMTc2IDEyOC44ODYgMTcyLjUyNiAxMjguOTE3IDE4NC44NzYgMTI4Ljg3NUMxOTIuMjEgMTI4Ljg0OSAxOTYuODU2IDEyNC4xMDEgMTk2LjgxMiAxMTYuODI0QzE5Ni43NyAxMDkuODk3IDE5MS45MTcgMTA1LjA5NSAxODQuODU3IDEwNS4wNDlDMTc5Ljg2OSAxMDUuMDE2IDE3NC44OCAxMDUuMDQyIDE2OS4yMzkgMTA1LjA0MloiIGZpbGw9IiNGRUZFRkUiLz48cGF0aCBkPSJNMTI1LjE4NCAxMDguMjQ5QzEyOC4wMTUgMTEwLjkzOCAxMjkuMTc0IDExMy45NTEgMTI5LjE1OCAxMTcuNjk1QzEyOS4wNjIgMTQwLjE2NyAxMjkuMTE4IDE2Mi42MzkgMTI5LjEwNCAxODUuMTExQzEyOS4xMDEgMTkwLjg2OSAxMjUuOTU5IDE5NC45NSAxMjAuNTk4IDE5Ni4yODFDMTE0Ljk5MiAxOTcuNjcyIDEwOS4wMTYgMTk1LjI4MiAxMDYuNzg4IDE5MC40MDVDMTA1Ljk3MiAxODguNjE3IDEwNS43MDUgMTg2LjQ0MiAxMDUuNjk4IDE4NC40NDFDMTA1LjYyNSAxNjIuMjk1IDEwNS43MiAxNDAuMTQ5IDEwNS42MDMgMTE4LjAwM0MxMDUuNTc1IDExMi42MzggMTA3LjcyMyAxMDguNzc4IDExMi4zMjQgMTA2LjM0M0MxMTYuODc1IDEwMy45MzUgMTIxLjExOSAxMDUuMDMyIDEyNS4xODQgMTA4LjI0OVoiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTE1MC43NTggMTQ2Ljg0NkMxNTMuMTM4IDE0Ni44NDYgMTU1LjI0NSAxNDcuMTEyIDE1Ny4yNTkgMTQ2Ljc5M0MxNjIuMDI5IDE0Ni4wMzggMTY1LjQzNyAxNDcuOTgxIDE2OC42NDMgMTUxLjMyMUMxNzYuODM2IDE1OS44NTQgMTg1LjI2MyAxNjguMTYyIDE5My41NSAxNzYuNjA2QzE5Ny4yMDkgMTgwLjMzNSAxOTguMTU3IDE4NS4zNDggMTk2LjE0NCAxODkuNDI2QzE5My43MzEgMTk0LjMxMyAxODguNzc5IDE5Ny41OTkgMTgzLjg3OCAxOTYuNzkxQzE4MS40NzMgMTk2LjM5NSAxNzguODIxIDE5NS4xNDggMTc3LjA4MyAxOTMuNDZDMTY3LjQ0MiAxODQuMTAyIDE1OC4wMzUgMTc0LjUwMSAxNDguNTk3IDE2NC45MzVDMTQ3Ljk4MyAxNjQuMzEzIDE0Ny40NjEgMTYzLjI5MSAxNDcuNDQzIDE2Mi40NDNDMTQ3LjMzNiAxNTcuMzU4IDE0Ny4zOSAxNTIuMjcgMTQ3LjM5IDE0Ni45OTFDMTQ4LjU1MyAxNDYuOTM2IDE0OS40OTggMTQ2Ljg5MSAxNTAuNzU4IDE0Ni44NDZaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xNjkuNTY1IDEwNS4wNDJDMTc0Ljg4IDEwNS4wNDIgMTc5Ljg2OSAxMDUuMDE2IDE4NC44NTcgMTA1LjA0OUMxOTEuOTE3IDEwNS4wOTUgMTk2Ljc3IDEwOS44OTcgMTk2LjgxMiAxMTYuODI0QzE5Ni44NTcgMTI0LjEwMSAxOTIuMjEgMTI4Ljg0OSAxODQuODc2IDEyOC44NzVDMTcyLjUyNiAxMjguOTE3IDE2MC4xNzYgMTI4Ljg4NiAxNDcuOTA1IDEyOC44ODZDMTQ3LjI1MiAxMjAuOTM0IDE0Ni42MTQgMTEzLjE1MSAxNDUuOTQ4IDEwNS4wNDJDMTUzLjMwNSAxMDUuMDQyIDE2MS4yNzIgMTA1LjA0MiAxNjkuNTY1IDEwNS4wNDJaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik0xMzcuNjQ1IDMwMEM5MS41NTE4IDMwMCA0NS43ODUyIDMwMCAwIDMwMEMwIDIwMC4wMiAwIDEwMC4wNCAwIDBDOTkuOTU0MSAwIDE5OS45MjcgMCAzMDAgMEMzMDAgOTkuOTYwMyAzMDAgMTk5Ljk4IDMwMCAzMDBDMjQ2LjAyOCAzMDAgMTkxLjk5OSAzMDAgMTM3LjY0NSAzMDBaTTIxMS43ODkgMTA0LjI5OEMyMDcuMDM5IDkyLjk1NDQgMTk4LjQxIDg2LjY5MzkgMTg2LjIzNCA4Ni41MTg3QzE2Mi41NCA4Ni4xNzggMTM4LjgzMyA4Ni4xMjA3IDExNS4xNDEgODYuNTI2MUM5OS42MTMyIDg2Ljc5MTggODYuOTIyMSAxMDAuMTQ2IDg2LjgwMjIgMTE1LjcwNUM4Ni42MjM3IDEzOC44NTUgODYuNTE1NiAxNjIuMDExIDg2Ljg1NzUgMTg1LjE1N0M4Ny4wMjM4IDE5Ni40MTQgOTEuOTY0MiAyMDUuMzI2IDEwMi41MjMgMjEwLjUyOEMxMTguMDc0IDIxOC4xODggMTM3LjE1OCAyMTIuMTUyIDE0My45MjMgMTk3LjI0NUMxNDUuMTM3IDE5NC41NjkgMTQ1Ljc4OCAxOTEuNjM3IDE0Ni43OTQgMTg4LjUzQzE0OC4wNjkgMTg5Ljg3OSAxNDkuMTIxIDE5MS4xMDggMTUwLjI5MyAxOTIuMjFDMTU2LjEyNCAxOTcuNjk1IDE2MS44MTQgMjAzLjM0OCAxNjcuODc2IDIwOC41NjhDMTgwLjU5MiAyMTkuNTE4IDIwMS42OCAyMTQuNzQzIDIwOS45NTMgMjAwLjAyMUMyMTYuMjE4IDE4OC44NzEgMjE2LjU2OSAxNzQuNzc0IDIwNy4zNDMgMTY1LjAxNEMyMDMuMzk2IDE2MC44MzggMTk5LjM2OSAxNTYuNzM2IDE5NS4zMTIgMTUyLjY2NkMxOTMuMjE1IDE1MC41NjEgMTkwLjk3NSAxNDguNTk3IDE4OC41MzQgMTQ2LjMyM0MxOTguMzggMTQzLjgwMiAyMDMuMzUyIDE0MC45NzQgMjA2Ljg2MyAxMzYuNjI4QzIxNC42NzUgMTI2Ljk1NiAyMTUuNjY4IDExNi4yNSAyMTEuNzg5IDEwNC4yOThaIiBmaWxsPSJibGFjayIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzFfMiI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9IndoaXRlIi8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+")}
.b-midjourney{--mark:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjk4IiBoZWlnaHQ9IjU4MyIgdmlld0JveD0iMCAwIDY5OCA1ODMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkgNTczLjVDMjkgNTczLjUgNTkgNTMxLjUgOTQgNTI1LjVDMTE0IDUyNS41IDEyOSA1NjcuNSAxNzkgNTczLjVDMjE0IDU3My41IDIyOSA1MzEuNSAyNjQgNTMxLjVDMjk5IDUzMS41IDMxNCA1NzMuNSAzNDkgNTczLjVDMzg0IDU3My41IDM5OSA1MzEuNSA0MzQgNTMxLjVDNDY5IDUzMS41IDQ4NCA1NzMuNSA1MTkgNTczLjVDNTU0IDU3My41IDU2OSA1MzEuNSA2MDQgNTMxLjVDNjM5IDUzMS41IDY1NCA1NzMuNSA2ODkgNTczLjUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik03Ny40IDUzMS43TDU0LjUgNDg3LjlMNjQ0LjUgNDQ5LjlDNTk4LjEgNDkyLjEgNTM4LjUgNTI2LjMgNDc4LjIgNTU0LjMiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yODkuNCA3OS45MDA0QzM4OS44IDExMC42IDUzMC4yIDI1OC45IDU3OCA0MTguM0M1NTEuOCA0MDggNTMyLjIgMzk3LjUgNDk1LjQgNDA2LjlDNDU5LjggMjc3LjQgMzk2LjEgMTUzLjcgMjg5LjQgNzkuOTAwNFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMDIuNyA5LjAwMDQ5QzIzMS4zIDY0LjAwMDUgNDA3LjcgMjE3LjEgNDQwLjEgNDIxQzI5MS44IDM2MS4yIDE3OC45IDM5My4xIDEwMC4zIDQ0MS42QzIyMC4yIDI4OS4yIDE2Ni40IDExNS45IDEwMi43IDkuMDAwNDlaIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjE4IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=")}
.b-stabilityai{--mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjEzIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgdmlld0JveD0iMCAwIDI1NiAyMTMiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjUwJSIgeDI9IjUwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlEMzlGRiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0EzODBGRiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGZpbGw9InVybCgjYSkiIGQ9Ik03Mi40MTggMjEyLjQ1YzQ5LjQ3OCAwIDgxLjY1OC0yNi4yMDUgODEuNjU4LTY1LjYyNiAwLTMwLjU3Mi0xOS41NzItNDkuOTk4LTU0LjU2OS01OC4wNDNsLTIyLjQ2OS02Ljc0Yy0xOS43MS00LjQyNC0zMS4yMTUtOS43MzgtMjguNTA1LTIzLjMxMiAyLjI1NS0xMS4yOTIgOS4wMDItMTcuNjY3IDI0LjY5LTE3LjY2NyA0OS44NzIgMCA2OC4zNSAxNy42NjcgNjguMzUgMTcuNjY3VjE2LjIzN1MxMjMuNTgzIDAgNzMuMjIzIDBDMjUuNzU3IDAgMCAyNC40MjQgMCA2Mi4yMzZjMCAzMC41NzEgMTcuODUgNDguMzUgNTQuMDUyIDU2Ljc5OCAyLjUzNC42MzMgMy44My45NTkgMy44ODUuOTc2IDUuNTA3IDEuNzA0IDEyLjkzOCAzLjk1NiAyMi4yOTMgNi43NTUgMTguNTA0IDQuNDI1IDIzLjI2MiA5LjEyMSAyMy4yNjIgMjMuMiAwIDEyLjg3Mi0xMy4zNzQgMjAuMTktMzEuMDc0IDIwLjE5QzIxLjQzMiAxNzAuMTU0IDAgMTQ0LjM2IDAgMTQ0LjM2djQ3LjA3OHMxMy40MDIgMjEuMDEgNzIuNDE4IDIxLjAxWiIvPjxwYXRoIGZpbGw9IiNFODAwMDAiIGQ9Ik0yMjUuNDQyIDIwOS4yNjZjMTcuNTE1IDAgMzAuNTU4LTEyLjY3IDMwLjU1OC0yOS44MTIgMC0xNy41MTUtMTIuNjctMjkuODEzLTMwLjU1OC0yOS44MTMtMTcuNTE1IDAtMzAuMTg1IDEyLjI5OC0zMC4xODUgMjkuODEzczEyLjY3IDI5LjgxMiAzMC4xODUgMjkuODEyWiIvPjwvc3ZnPg==")}

/* 정지/삭제된 채널 목록의 '현재상태' 열과 배지. */
.data-table.channel-table.deleted-channel-table {
  table-layout: fixed;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(2),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(2) {
  width: 4% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(3),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(3) {
  width: 10% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table th.deleted-status-column,
#dataContainer .data-table.channel-table td.deleted-status-column {
  width: 9% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 7px;
  padding-right: 7px;
  white-space: nowrap;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(5),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(5) {
  width: 16% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(6),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(6) {
  width: 33% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(7),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(7) {
  width: 9% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(8),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(8) {
  width: 7% !important;
  min-width: 0 !important;
  max-width: none !important;
}
#dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(9),
#dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(9) {
  width: 12% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.deleted-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}
.deleted-status-badge.status-no-videos {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.45);
  cursor: help;
}
/* 정지 = YouTube가 제재로 내린 채널. 삭제(빨강)와 한눈에 갈라져야 해서 보라 계열. */
.deleted-status-badge.status-terminated {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.45);
  cursor: help;
}
.deleted-status-badge.status-deleted {
  background: rgba(255, 68, 68, 0.14);
  color: #ff6b6b;
  border: 1px solid rgba(255, 68, 68, 0.4);
  cursor: help;
}
.deleted-status-badge.status-active {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.38);
}
.deleted-status-badge.status-checking,
.deleted-status-badge.status-waiting,
.deleted-status-badge.status-unchecked,
.deleted-status-badge.status-unknown {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.deleted-status-badge.status-unchecked {
  cursor: help;
}

/* 정지/삭제된 채널 목록의 현재상태 필터.
   한 목록에 정지·삭제·영상 0 이 섞여 있다(정지가 절반을 넘는다). 배지가 틀린
   게 아니라 — 문구는 YouTube 가 채널 페이지에 띄운 사유 그대로다 — 세 상태가
   한 화면에 있는 것이라, 갈라 볼 수단을 준다. 칩 색은 배지와 같은 팔레트를 써서
   "위의 칩 = 아래의 배지"가 설명 없이 읽히게 한다. */
.deleted-status-filter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.deleted-status-chip {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
}

.deleted-status-chip:hover {
  color: var(--text-primary);
}

.deleted-status-chip.is-active {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.deleted-status-chip.is-active[data-status="terminated"] {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.45);
}

.deleted-status-chip.is-active[data-status="deleted"] {
  color: #ff6b6b;
  background: rgba(255, 68, 68, 0.14);
  border-color: rgba(255, 68, 68, 0.4);
}

.deleted-status-chip.is-active[data-status="suspended"] {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.45);
}

/* 채널 정보: 아바타 오른쪽에 채널명과 구독자 수를 위아래로 정렬한다. */
#dataContainer .channel-table .channel-table-channel-cell {
  text-align: center !important;
}
#dataContainer .channel-table .channel-table-channel-layout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#dataContainer .channel-table .channel-table-channel-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}
#dataContainer .channel-table .channel-table-channel-copy .channel-name {
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
#dataContainer .channel-table .channel-table-subscriber-line {
  display: flex;
  width: 100%;
  margin: 0 !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#dataContainer .channel-table .channel-table-subscriber-line .subscriber-badge {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* 좁은 화면의 정지/삭제 채널 표: 순위 · 카테고리 · 채널정보만 표시. */
@media (max-width: 1000px) {
  #dataContainer .data-table.channel-table.deleted-channel-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(1),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(1),
  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(4),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(4),
  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(6),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(6),
  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(7),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(7),
  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(8),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(8),
  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(9),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(9) {
    display: none !important;
  }

  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(2),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(2) {
    display: table-cell !important;
    width: 12% !important;
    min-width: 0 !important;
    max-width: 12% !important;
  }

  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(3),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(3) {
    display: table-cell !important;
    width: 28% !important;
    min-width: 0 !important;
    max-width: 28% !important;
  }

  #dataContainer .data-table.channel-table.deleted-channel-table th:nth-child(5),
  #dataContainer .data-table.channel-table.deleted-channel-table td:nth-child(5) {
    display: table-cell !important;
    width: 60% !important;
    min-width: 0 !important;
    max-width: 60% !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   영상표 열 계단식 감축 (2026-08-20)

   폭이 줄면 열을 "한 칸씩" 떨어뜨린다. 예전에는 1800px 한 곳에서 6칸이
   동시에 사라져, 1401~1800px 어디에 있든 똑같이 7칸만 보였다.

   ⚠ 폭 0 으로 만드는 <col> 은 "숨긴 열"이 아니라 "맨 뒤 열"이다. th 를
   display:none 하면 그 칸은 렌더 자체가 안 되므로, 남은 K칸이 col 을 앞에서부터
   차례로 물어간다(=항상 col 1~K 사용). 그래서 남는 건 늘 뒤쪽 col 이다.
   의미상 같은 col 을 0 으로 만들면 뒤쪽이 남아 오른쪽에 빈칸이 생긴다.

   ⚠ 핵심 함정: th/td 에 display:none 을 걸어도 <colgroup> 의 <col> 은
   폭을 그대로 붙들고 있다. 그래서 숨긴 6칸의 570px 이 빈칸으로 남아
   표가 1730px 로 버티고, 1600px 화면에서 가로 스크롤이 407px 생겼다.
   (실측 2026-08-20). 열을 숨길 때는 반드시 그 <col> 의 width 도 0 으로.

   버리는 순서 = 덜 중요한 것부터: 자동화 → 기여도 → 바이럴 → 성과지수
   → 배율 → 시간당조회수. 경계값은 "남은 열 폭 합계 + 297"(사이드바 펼침
   210 + 좌우 패딩 67)로 잡았다.

   ⚠ .video-table 만 겨냥한다 — 채널표는 열 구성이 달라 건드리면 깨진다.
   ⚠ 1400px 이하는 별도 블록(약 9175줄)이 맡는다. 그 블록은 순위·카테고리·
   다운로드 3칸을 한꺼번에 지우므로, 아래 "1400px 이하 계단"에서 폭이 되는
   만큼 다시 되살려 한 칸씩 떨어지게 이어붙였다.
   ============================================================ */

@media (min-width: 1504px) {
  /* 계단이 스스로 폭을 정하도록, 고정 min-width 를 푼다.
     이게 남아 있으면 열을 지워도 표가 1535px 아래로 못 내려온다. */
  .video-table {
    min-width: 0 !important;
  }
}

/* 비관리자: 자동화 열은 아예 없다 (2026-09-18)
   자동화가 여는 스튜디오 홈탭이 실험실(관리자 전용)로 들어가, 일반 사용자가 눌러도
   영상만 수집되고 제작탭으로 밀려나므로 입구를 닫는다. th/td 는 data-admin-only 가
   숨기지만 <col> 은 폭을 그대로 붙들고 있어(위 계단 주석의 핵심 함정) 2007px 이상에서
   오른쪽에 90px 빈칸이 남는다 → 여기서 0 으로 만든다. 자동화는 맨 뒤 열이라
   지워도 다른 열이 밀리지 않고, 계단 경계도 그대로 유효하다.
   완성해서 되돌릴 때는 data-admin-only 와 이 블록을 같이 지울 것. */
html:not(.is-admin) .video-table col.automation-col {
  width: 0 !important;
}

/* ~2006px: 자동화 내림 */
@media (min-width: 1504px) and (max-width: 2006px) {
  .video-table th:nth-child(14),
  .video-table td:nth-child(14) {
    display: none !important;
  }
  .video-table col.automation-col {
    width: 0 !important;
  }
}

/* ~1916px: 기여도 내림 */
@media (min-width: 1504px) and (max-width: 1916px) {
  .video-table th:nth-child(10),
  .video-table td:nth-child(10) {
    display: none !important;
  }
  .video-table col.download-col {
    width: 0 !important;
  }
}

/* ~1821px: 바이럴 내림 */
@media (min-width: 1504px) and (max-width: 1829px) {
  .video-table th:nth-child(9),
  .video-table td:nth-child(9) {
    display: none !important;
  }
  .video-table col.ratio-col {
    width: 0 !important;
  }
}

/* ~1726px: 성과지수 내림 */
@media (min-width: 1504px) and (max-width: 1740px) {
  .video-table th:nth-child(11),
  .video-table td:nth-child(11) {
    display: none !important;
  }
  .video-table col.performance-col {
    width: 0 !important;
  }
}

/* ~1621px: 배율 내림 */
@media (min-width: 1504px) and (max-width: 1640px) {
  .video-table th:nth-child(12),
  .video-table td:nth-child(12) {
    display: none !important;
  }
  .video-table col.contribution-col {
    width: 0 !important;
  }
}

/* ~1546px: 시간당조회수 내림 */
@media (min-width: 1504px) and (max-width: 1586px) {
  .video-table th:nth-child(8),
  .video-table td:nth-child(8) {
    display: none !important;
  }
  .video-table col.viral-col {
    width: 0 !important;
  }
}

/* ⚠ 여기서 1401~1546px 만 table-layout:auto 로 돌려봤다가 되돌렸다.
   가변폭으로 바꾸면 th 의 인라인 width 와 내용이 표를 오히려 1741px 로 부풀려
   더 크게 넘쳤다(실측). 고정폭 구간에서는 "경계를 옮기는" 쪽이 답이다. */

/* ── 1400px 이하 계단 ────────────────────────────────────────
   이 구간은 table-layout:auto 라 표가 자리에 맞춰 줄어든다. 그래서 칸을 지우는
   기준은 "고정폭 합계"가 아니라 **줄어들 대로 줄었을 때의 최소폭**이다.
   실측(사이드바 펼침, 표 자리 = 뷰포트 - 277):
     7칸 최소 938px → 뷰포트 1215px 부터
     6칸 최소 816px → 뷰포트 1093px 부터
     5칸 최소 704px → 뷰포트  981px 부터 (1000px 이하는 사이드바가 강제로
                                          접히며 기존 규칙이 맡으므로 1001 에서 끊음)
   버리는 순서: 다운로드 → 카테고리 → (순위는 순위표라 가장 오래 남긴다)

   2026-09-16 대표님 지시로 바꿨다: 이 구간에서 카테고리·다운로드를 살려 두면 채널 칸이
   110px 까지 눌려 채널명이 7줄로 접히고 구독자 수가 영상 칸을 덮었다(실측 1440px 이하
   12행 전부 넘침). 그래서 고정폭 구간이 끝나는 1503px 부터 둘 다 내리고, 그 폭을 채널·영상에 준다.
   채널 184px = 셀 여백 16 + 프로필 36 + 간격 10 + 구독자 배지 최대 122(`👥 400,000,000명`).
   영상 칸의 300px 바닥(769px 이상 블록, :not() 때문에 특이도가 높다)은 풀어서 남는 폭을 다 받게 한다.
   순위까지 5칸이면 1054px 까지 넘치진 않지만 영상 칸이 266px(제목 5줄)까지 눌린다.
   영상 칸이 300px 아래로 가기 전인 1094px 에서 순위를 내린다(실측 1093px: 영상 357px). */
@media (min-width: 1094px) and (max-width: 1503.98px) {
  .video-table th:nth-child(2),
  .video-table td:nth-child(2) {
    display: table-cell !important;
  }
}

@media (min-width: 1001px) and (max-width: 1503.98px) {
  .data-table.video-table th:nth-child(4),
  .data-table.video-table td:nth-child(4) {
    width: 184px !important;
    min-width: 184px !important;
    max-width: 184px !important;
  }

  .data-table.video-table th:nth-child(5),
  .data-table.video-table td:nth-child(5) {
    width: auto !important;
    min-width: 0 !important;
  }

  /* 영상 칸이 남는 폭을 다 가져가면 날짜 칸이 바닥 140px 에 붙는데, 배지 최대 117px + 셀 여백 24px 이라
     1px 모자라 "26.09.16 / 08:…" 로 잘렸다(실측). */
  .data-table.video-table th:nth-child(6),
  .data-table.video-table td:nth-child(6) {
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
  }
}

/* 채널 순증감: 중립적인 잉크색, 관측점 강조, 수집 공백을 보존하는 작은 차트. */
.channel-sparkline {
  color: #315bb7;
  display: inline-block;
  vertical-align: middle;
  cursor: help;
  border-radius: 4px;
}
body.dark-theme .channel-sparkline { color: #85a5e5; }
.channel-sparkline-zero {
  stroke: var(--text-secondary);
  stroke-width: 0.75;
  stroke-dasharray: 1 3;
  opacity: 0.22;
}
.channel-sparkline-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.channel-sparkline-area { opacity: 0.75; transition: opacity 160ms ease-out; }
.channel-sparkline-point { fill: currentColor; opacity: 0; transition: opacity 160ms ease-out; }
.channel-sparkline-point.is-isolated { opacity: 1; }
.channel-sparkline-end-ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.24; }
.channel-sparkline-end { fill: currentColor; stroke: var(--bg-primary); stroke-width: 1; }
.channel-sparkline:hover .channel-sparkline-area,
.channel-sparkline:focus-visible .channel-sparkline-area { opacity: 1; }
.channel-sparkline:hover .channel-sparkline-point,
.channel-sparkline:focus-visible .channel-sparkline-point { opacity: 0.8; }
.channel-sparkline:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.channel-sparkline-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: help;
}
.channel-sparkline-empty::before { content: ""; width: 12px; border-top: 1px dashed currentColor; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .channel-sparkline-area, .channel-sparkline-point { transition: none; }
}