/* YouTube Analytics — 레거시 스프레드시트·필터 보조 스타일 (Tailwind CDN 보완) */

.yt-analytics-root {
  -webkit-font-smoothing: antialiased;
  min-height: 40vh;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .yt-analytics-root {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

.layout-wide .main--wide {
  width: min(100% - 16px, 100%);
  max-width: none;
}

.yt-analytics-root .min-h-screen {
  width: 100%;
  max-width: 100%;
}

/* astro-island display:contents 시 마운트 실패하면 빈 화면 — 블록 레이아웃 강제 */
.yt-analytics-root > astro-island {
  display: block;
  width: 100%;
  min-height: 32vh;
}

.yt-analytics-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 320px;
  padding: 48px 16px;
  color: #334155;
}

html[data-theme="dark"] .yt-analytics-fallback {
  color: #cbd5e1;
}

.yt-analytics-fallback__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: yt-analytics-spin 0.9s linear infinite;
}

html[data-theme="dark"] .yt-analytics-fallback__spinner {
  border-color: #334155;
  border-top-color: #60a5fa;
}

.yt-analytics-fallback__text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

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

.yt-analytics-root table {
  border-collapse: separate;
  border-spacing: 0;
}

.yt-analytics-root .overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.yt-analytics-root .overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

.yt-analytics-root .overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 4px;
}

.yt-analytics-root thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgb(229 231 235);
  color: rgb(31 41 55);
}

html[data-theme="dark"] .yt-analytics-root thead th {
  background: rgb(55 65 81);
  color: rgb(209 213 219);
}

.yt-analytics-root :where(label.text-gray-300, span.text-gray-300, div.text-gray-300, button.text-gray-300) {
  color: rgb(55 65 81) !important;
}

.yt-analytics-root :where(label.text-gray-400, span.text-gray-400, div.text-gray-400, button.text-gray-400) {
  color: rgb(75 85 99) !important;
}

html[data-theme="dark"] .yt-analytics-root :where(label.text-gray-300, span.text-gray-300, div.text-gray-300, button.text-gray-300) {
  color: rgb(209 213 219) !important;
}

html[data-theme="dark"] .yt-analytics-root :where(label.text-gray-400, span.text-gray-400, div.text-gray-400, button.text-gray-400) {
  color: rgb(156 163 175) !important;
}

.yt-analytics-root :where(.bg-white, .bg-white\/95) {
  color: rgb(17 24 39);
}

.yt-analytics-root :where(input.bg-gray-700, select.bg-gray-700, textarea.bg-gray-700) {
  border-color: rgb(203 213 225) !important;
  background: #fff !important;
  color: rgb(15 23 42) !important;
}

.yt-analytics-root :where(button.bg-gray-700, button.bg-gray-600, button.bg-gray-800) {
  border-color: rgb(203 213 225) !important;
  background: rgb(248 250 252) !important;
  color: rgb(30 41 59) !important;
}

.yt-analytics-root :where(button.bg-gray-700:hover, button.bg-gray-600:hover, button.bg-gray-800:hover) {
  border-color: rgb(147 197 253) !important;
  background: rgb(239 246 255) !important;
  color: rgb(29 78 216) !important;
}

.yt-analytics-root :where(.bg-gray-900, .bg-gray-800) {
  color: rgb(15 23 42);
}

html[data-theme="dark"] .yt-analytics-root :where(.dark\:bg-gray-800, .dark\:bg-gray-800\/95) {
  color: rgb(243 244 246);
}

html[data-theme="dark"] .yt-analytics-root :where(input.bg-gray-700, select.bg-gray-700, textarea.bg-gray-700) {
  border-color: rgb(75 85 99) !important;
  background: rgb(31 41 55) !important;
  color: rgb(243 244 246) !important;
}

html[data-theme="dark"] .yt-analytics-root :where(button.bg-gray-700, button.bg-gray-600, button.bg-gray-800) {
  border-color: rgb(75 85 99) !important;
  background: rgb(55 65 81) !important;
  color: rgb(229 231 235) !important;
}

.yt-analytics-root tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

.yt-analytics-root .filter-chip-scroll {
  scrollbar-width: thin;
}

/* analytics: 배너 ~ 테이블 헤더 구간 세로 간격 축소 */
@media (min-width: 640px) {
.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner {
  margin-bottom: 6px;
  padding: 2px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner-inner {
  gap: 4px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner-head {
  gap: 4px;
  min-width: 132px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner-head-icon {
  width: 28px;
  height: 28px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner-desktop {
  gap: 2px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-top-banner-grid {
  gap: 2px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .affiliate-banner-tile {
  min-height: 30px;
  padding: 4px 6px;
}

.shell--affiliate-chrome:has(.yt-analytics-root) .main--wide {
  padding-top: 4px;
}
}

.yt-analytics-root #youtube-table-header th {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

@media (min-width: 768px) {
  .yt-analytics-root #youtube-table-header th {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}