/* ==========================================================
   YouTube Live Portal — 커스텀 스타일
   Tailwind는 CDN으로 주입되며, 보조 스타일만 여기에 정의합니다.
   ========================================================== */

/* 부드러운 스크롤 + 폰트 렌더링 */
html { -webkit-font-smoothing: antialiased; }
body { font-feature-settings: "ss01", "tnum"; }

/* 글래스 카드 — 시인성을 위해 약간 더 밝고 보더 강화 */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.11);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.15);
}

/* 카드 hover */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 20px 40px -20px rgba(237, 21, 21, 0.25);
}

/* 라이브 뱃지 */
.live-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .55rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff3838, #c80d0d);
  color: white;
  text-transform: uppercase;
}
.live-badge::before {
  content: '';
  width: .4rem; height: .4rem;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: live-pulse 1.4s infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 .35rem rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0); }
}

/* 썸네일 그라디언트 오버레이 */
.thumb-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
}

/* aspect-ratio (구브라우저 대응) */
.aspect-video-fallback { position: relative; padding-bottom: 56.25%; height: 0; }
.aspect-video-fallback > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 폼 다크 테마 */
input, select, textarea {
  color-scheme: dark;
}
.form-input,
.form-select,
.form-textarea {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e6e6ec;
  border-radius: .65rem;
  padding: .65rem .85rem;
  width: 100%;
  font-size: .9rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(237, 21, 21, .6);
  background-color: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(237, 21, 21, .15);
}
.form-input::placeholder, .form-textarea::placeholder { color: #5a5a6c; }

label.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #b8b8c4;
  margin-bottom: .35rem;
}

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.05rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: .65rem;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #ff3838, #c80d0d);
  color: white;
  box-shadow: 0 8px 20px -8px rgba(237, 21, 21, .6);
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e6e6ec;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-danger {
  background: rgba(244, 63, 94, .12);
  border: 1px solid rgba(244, 63, 94, .35);
  color: #fca5a5;
}
.btn-danger:hover { background: rgba(244, 63, 94, .2); }

/* 테이블 (관리자) */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem;
}
.tbl th {
  text-align: left;
  padding: .75rem 1rem;
  background: rgba(255,255,255,0.03);
  font-weight: 600;
  color: #b8b8c4;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tbl td {
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.tbl tr:hover td { background: rgba(255,255,255,0.02); }

/* 상태 뱃지 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  font-size: .7rem;
  font-weight: 600;
  border-radius: .45rem;
  ring: 1px;
}
.badge-pending  { background: rgba(245, 158, 11, .12); color: #fcd34d; }
.badge-approved { background: rgba(16, 185, 129, .12); color: #6ee7b7; }
.badge-rejected { background: rgba(244, 63, 94, .12);  color: #fda4af; }
.badge-suspended{ background: rgba(100, 116, 139, .15); color: #cbd5e1; }
.badge-admin    { background: rgba(251, 191, 36, .12); color: #fcd34d; }
.badge-member   { background: rgba(99, 102, 241, .12); color: #a5b4fc; }
.badge-notice   { background: rgba(244, 63, 94, .12);  color: #fda4af; }
.badge-news     { background: rgba(56, 189, 248, .12); color: #7dd3fc; }
.badge-general  { background: rgba(148, 163, 184, .15); color: #cbd5e1; }

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* prose 다크 보정 */
.prose-dark { color: #d6d6df; }
.prose-dark a { color: #fda4a4; }
.prose-dark strong { color: #fff; }
.prose-dark code { background: rgba(255,255,255,0.06); padding: .1rem .35rem; border-radius: .25rem; }

/* utils */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================
   ☀️ 라이트 모드
   html.theme-light 가 적용되면 다크 → 라이트로 전환
   ========================================================== */
html.theme-light { color-scheme: light; }
html.theme-light body {
  background-color: #f5f5f7 !important;
  color: #1a1a1f !important;
}

/* 히어로 배경 블러 옅게 */
html.theme-light .fixed.inset-0.-z-10 > div { opacity: 0.55; }

/* ink 배경 컬러 → 라이트 톤 */
html.theme-light .bg-ink-900 { background-color: #f5f5f7 !important; }
html.theme-light .bg-ink-900\/0 { background-color: transparent !important; }
html.theme-light .bg-ink-900\/50 { background-color: rgba(245,245,247,0.6) !important; }
html.theme-light .bg-ink-900\/70 { background-color: rgba(245,245,247,0.85) !important; }
html.theme-light .bg-ink-800 { background-color: #ffffff !important; }
html.theme-light .bg-ink-800\/80 { background-color: rgba(255,255,255,0.85) !important; }
html.theme-light .bg-ink-700 { background-color: #ebebef !important; }
html.theme-light .bg-ink-700\/50 { background-color: rgba(235,235,239,0.5) !important; }
html.theme-light .from-ink-700 { --tw-gradient-from: #ebebef !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
html.theme-light .to-ink-800 { --tw-gradient-to: #dcdce0 !important; }
html.theme-light .to-ink-900 { --tw-gradient-to: #d0d0d6 !important; }

/* 텍스트 컬러 */
html.theme-light .text-ink-100 { color: #1a1a1f !important; }
html.theme-light .text-ink-200 { color: #3a3a45 !important; }
html.theme-light .text-ink-300 { color: #6a6a76 !important; }
html.theme-light .text-ink-400 { color: #9a9aa6 !important; }
html.theme-light .text-white { color: #1a1a1f !important; }
html.theme-light .hover\:text-white:hover { color: #000 !important; }

/* white 투명도 → black 투명도 */
html.theme-light .bg-white\/0  { background-color: transparent !important; }
html.theme-light .bg-white\/5  { background-color: rgba(0,0,0,0.04) !important; }
html.theme-light .bg-white\/10 { background-color: rgba(0,0,0,0.07) !important; }
html.theme-light .bg-white\/20 { background-color: rgba(0,0,0,0.10) !important; }
html.theme-light .ring-white\/5  { --tw-ring-color: rgba(0,0,0,0.04) !important; }
html.theme-light .ring-white\/10 { --tw-ring-color: rgba(0,0,0,0.08) !important; }
html.theme-light .ring-white\/20 { --tw-ring-color: rgba(0,0,0,0.14) !important; }
html.theme-light .border-white\/5  { border-color: rgba(0,0,0,0.06) !important; }
html.theme-light .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; }
html.theme-light .border-white\/20 { border-color: rgba(0,0,0,0.14) !important; }
html.theme-light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0,0,0,0.06) !important; }
html.theme-light .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,0.04) !important; }
html.theme-light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; }

/* 글래스 카드 */
html.theme-light .glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html.theme-light .glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* 폼 */
html.theme-light .form-input,
html.theme-light .form-select,
html.theme-light .form-textarea {
  background-color: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: #1a1a1f;
}
html.theme-light .form-input::placeholder,
html.theme-light .form-textarea::placeholder { color: #9a9aa6; }
html.theme-light label.form-label { color: #4a4a55; }

/* 버튼 ghost */
html.theme-light .btn-ghost {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
  color: #1a1a1f;
}
html.theme-light .btn-ghost:hover { background: rgba(0,0,0,0.10); }

/* 테이블 */
html.theme-light .tbl th {
  background: rgba(0,0,0,0.03);
  color: #4a4a55;
  border-color: rgba(0,0,0,0.08);
}
html.theme-light .tbl td { border-color: rgba(0,0,0,0.06); }
html.theme-light .tbl tr:hover td { background: rgba(0,0,0,0.02); }

/* prose */
html.theme-light .prose-dark { color: #2a2a35; }
html.theme-light .prose-dark strong { color: #000; }
html.theme-light .prose-dark code { background: rgba(0,0,0,0.06); color: #1a1a1f; }

/* 배지 */
html.theme-light .badge-pending  { background: rgba(245,158,11,.18); color: #92400e; }
html.theme-light .badge-approved { background: rgba(16,185,129,.18); color: #047857; }
html.theme-light .badge-rejected { background: rgba(244,63,94,.18);  color: #9f1239; }
html.theme-light .badge-suspended{ background: rgba(100,116,139,.20); color: #475569; }
html.theme-light .badge-admin    { background: rgba(217,119,6,.18); color: #92400e; }
html.theme-light .badge-member   { background: rgba(99,102,241,.16); color: #4338ca; }
html.theme-light .badge-notice   { background: rgba(244,63,94,.16); color: #9f1239; }
html.theme-light .badge-news     { background: rgba(56,189,248,.18); color: #0369a1; }
html.theme-light .badge-general  { background: rgba(148,163,184,.20); color: #475569; }

/* 스크롤바 */
html.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }
html.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

/* 사이드바 (admin) */
html.theme-light aside { background-color: #ffffff !important; }

/* SVG 등 input color-scheme */
html.theme-light input, html.theme-light textarea, html.theme-light select { color-scheme: light; }

/* ==========================================================
   🔘 테마 토글 플로팅 버튼
   ========================================================== */
.theme-toggle-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 60;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  color: #fbbf24; /* 다크 모드 햇빛 */
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.theme-toggle-btn:hover { transform: translateY(-2px) rotate(15deg); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
.theme-toggle-btn:active { transform: translateY(0) scale(0.96); }
html.theme-light .theme-toggle-btn {
  background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
  border-color: rgba(0,0,0,0.10);
  color: #4338ca; /* 라이트 모드 달 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 0 0 4px rgba(0,0,0,0.02);
}

/* 라이브 카드 헤일로 */
.live-halo {
  position: relative;
}
.live-halo::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(237,21,21,.6), transparent);
  background-size: 200% 100%;
  animation: halo 3s linear infinite;
  z-index: -1;
  filter: blur(12px);
  opacity: .55;
}
@keyframes halo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}