/*
 * BRM 보충 스타일 (plain CSS — Tailwind 빌드 없이 사용).
 * Metronic 사전컴파일 styles.css 에 없는 유틸리티/헬퍼만 정의한다.
 * (styles.css 는 demo10 에서 실제 사용된 클래스만 포함하므로 일부 유틸리티가 빠져 있음)
 */

[x-cloak] { display: none !important; }

/* ── 대전MBC CI 컬러 팔레트 (https://tjmbc.co.kr/DaejeonMBCCI) ──── */
:root {
  --mbc-dark-gray: #344655;  --mbc-gray: #9fb8b8;
  --mbc-red: #ee313c;        --mbc-blue: #53bee2;
  --mbc-yellow: #ffc121;     --mbc-jade: #56c4cf;
  --mbc-violet: #5a90cb;     --mbc-light-gray: #dbe1de;
}

/* MBC 컬러 유틸리티 (bg-/text-/border-mbc-*) — 마크업에서 직접 사용 */
.bg-mbc-dark-gray  { background-color: var(--mbc-dark-gray); }
.bg-mbc-gray       { background-color: var(--mbc-gray); }
.bg-mbc-red        { background-color: var(--mbc-red); }
.bg-mbc-blue       { background-color: var(--mbc-blue); }
.bg-mbc-yellow     { background-color: var(--mbc-yellow); }
.bg-mbc-jade       { background-color: var(--mbc-jade); }
.bg-mbc-violet     { background-color: var(--mbc-violet); }
.bg-mbc-light-gray { background-color: var(--mbc-light-gray); }

.text-mbc-dark-gray  { color: var(--mbc-dark-gray); }
.text-mbc-gray       { color: var(--mbc-gray); }
.text-mbc-red        { color: var(--mbc-red); }
.text-mbc-blue       { color: var(--mbc-blue); }
.text-mbc-yellow     { color: var(--mbc-yellow); }
.text-mbc-jade       { color: var(--mbc-jade); }
.text-mbc-violet     { color: var(--mbc-violet); }
.text-mbc-light-gray { color: var(--mbc-light-gray); }

.border-mbc-dark-gray  { border-color: var(--mbc-dark-gray); }
.border-mbc-gray       { border-color: var(--mbc-gray); }
.border-mbc-red        { border-color: var(--mbc-red); }
.border-mbc-blue       { border-color: var(--mbc-blue); }
.border-mbc-yellow     { border-color: var(--mbc-yellow); }
.border-mbc-jade       { border-color: var(--mbc-jade); }
.border-mbc-violet     { border-color: var(--mbc-violet); }
.border-mbc-light-gray { border-color: var(--mbc-light-gray); }

/* 모바일 가로 스크롤 방지(고정 사이드바/넓은 콘텐츠가 뷰포트를 밀어내지 않도록).
   넓은 표는 자체 .overflow-x-auto 컨테이너에서 스크롤된다. */
html, body { max-width: 100%; overflow-x: hidden; }
#scrollable_content { overflow-x: hidden; }

/* ── 사이드바/모바일헤더 다크 배경 ───────────────────────────────
   (Metronic 사전컴파일 CSS 에 bg-zinc-950 유틸리티가 없어 직접 지정) */
#sidebar { background-color: var(--mbc-dark-gray); }
#header { background-color: var(--mbc-dark-gray); }
/* 사이드바 로고 영역 — 검정 배경 */
#sidebar_header { background-color: #000000; }
/* 상단 페이지 타이틀 바 — 검정 배경 + 흰 글자 */
#topbar { background-color: #000000; border-bottom-color: rgba(255,255,255,.12); position: sticky; top: 0; z-index: 20; }
#topbar h1 { color: #ffffff; }
#topbar .kt-btn-ghost { color: #d4dbe0; }
#topbar .kt-btn-ghost:hover { color: #ffffff; }
/* 사이드바 옆 둥근 모서리 틈에 비치는 body 배경도 맞춰 이질감 제거 */
body.bg-mono { background-color: var(--mbc-dark-gray); }
/* 다크 사이드바 내 메뉴 텍스트 가독성 보장 */
#sidebar .kt-menu-title { color: #e4e4e7; }
#sidebar .kt-menu-link:hover .kt-menu-title { color: #ffffff; }
#sidebar .kt-menu-icon { color: #a1a1aa; }
/* 활성 메뉴 — MBC Yellow 배경 + 검정 텍스트/아이콘 */
#sidebar a.kt-menu-link-active,
#sidebar a.kt-menu-link-active:hover { background-color: var(--mbc-yellow); }
#sidebar .kt-menu-link-active .kt-menu-title,
#sidebar .kt-menu-link-active .kt-menu-icon { color: #000000; }
#sidebar .kt-menu-arrow { color: #71717a; margin-inline-start: auto; }
#sidebar h3 { color: #71717a; }
#sidebar .kt-menu-link:hover { background-color: rgba(255,255,255,.06); }
#sidebar_user { border-bottom: 1px solid rgba(255,255,255,.08); }

/* ── 관리자 영역 구분(body.is-admin — layouts/app/sidebar.blade.php) ─────
   /admin/* 에서는 사이드바·모바일헤더·body 틈 배경을 딥 버건디로 바꿔
   일반 화면(--mbc-dark-gray)과 한눈에 구분한다. 활성 메뉴 노랑은 그대로. */
body.is-admin #sidebar,
body.is-admin #header,
body.is-admin.bg-mono { background-color: #471b1b; }

/* 사이드바 스크롤바(다크, 얇게) */
#sidebar_menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
#sidebar_menu::-webkit-scrollbar { width: 6px; }
#sidebar_menu::-webkit-scrollbar-track { background: transparent; }
#sidebar_menu::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.15); border-radius: 9999px; }
#sidebar_menu::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.3); }

/* ── TipTap 에디터 본문 기본 스타일 ───────────────────────────── */
.tiptap:focus { outline: none; }
.tiptap p { margin: 0.25em 0; }
.tiptap h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0; }
.tiptap h2 { font-size: 1.25em; font-weight: 700; margin: 0.5em 0; }
.tiptap h3 { font-size: 1.1em; font-weight: 600; margin: 0.5em 0; }
.tiptap ul { list-style: disc; padding-inline-start: 1.5em; }
.tiptap ol { list-style: decimal; padding-inline-start: 1.5em; }
.tiptap blockquote { border-inline-start: 3px solid #cbd5e1; padding-inline-start: 1em; color: #64748b; }
.tiptap a { color: #2563eb; text-decoration: underline; }
.tiptap img { max-width: 100%; height: auto; }

/* ── 누락 유틸리티 보충 ───────────────────────────────────────── */
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.tracking-wide { letter-spacing: 0.025em; }
.border-s-4 { border-inline-start-width: 4px; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.overflow-y-auto { overflow-y: auto; }
.min-h-0 { min-height: 0; }
.font-bold { font-weight: 700; }
.opacity-70 { opacity: 0.7; }
.underline-offset-4 { text-underline-offset: 4px; }
.hover\:underline:hover { text-decoration-line: underline; }
.first\:border-t-0:first-child { border-top-width: 0; }
.bg-card { background-color: var(--card); }

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 레이아웃/드로어 보충(사전컴파일 누락) ─────────────────────── */
.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.z-30 { z-index: 30; }
.bg-black\/50 { background-color: rgba(0, 0, 0, .5); }
.transition-transform { transition-property: transform; transition-duration: .3s; transition-timing-function: ease; }
.translate-x-0 { transform: translateX(0); }
.-translate-x-full { transform: translateX(-100%); }
.rotate-180 { transform: rotate(180deg); }
@media (min-width: 1024px) {
    .lg\:translate-x-0 { transform: translateX(0); }
}

/* ── 사용자 메뉴(다크 팝오버) ─────────────────────────────────── */
.brm-umenu-avatar { background-color: rgba(255, 255, 255, .10); color: #fff; }
.brm-umenu-trigger { color: #e4e4e7; }
.brm-umenu-trigger:hover { background-color: rgba(255, 255, 255, .06); }
.brm-umenu-pop { background-color: #18181b; border: 1px solid rgba(255, 255, 255, .10); }
.brm-umenu-sep { border-top: 1px solid rgba(255, 255, 255, .10); }
.brm-umenu-name { color: #fff; }
.brm-umenu-muted { color: #a1a1aa; }
.brm-umenu-item { color: #e4e4e7; }
.brm-umenu-item:hover { background-color: rgba(255, 255, 255, .06); color: #fff; }
.brm-umenu-chevron { color: #71717a; }

/* ── 편성표 폴더형 탭 ─────────────────────────────────────────── */
.brm-tablist { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.brm-tab {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .875rem; margin-bottom: -1px;
    font-size: .875rem; font-weight: 500; color: var(--secondary-foreground);
    border: 1px solid transparent; border-radius: .5rem .5rem 0 0; cursor: pointer;
    background: transparent;
}
.brm-tab:hover { color: var(--mono); }
.brm-tab-active { color: var(--mono); background: var(--card); border-color: var(--border); border-bottom-color: var(--card); }

/* ── 대시보드 상태 카드 숫자 색상 ─────────────────────────────── */
.brm-num-zinc   { color: var(--mono, #18181b); }
.brm-num-indigo { color: #4f46e5; }
.brm-num-amber  { color: #d97706; }
.brm-num-red    { color: #dc2626; }
.brm-num-green  { color: #16a34a; }
.brm-num-muted  { color: var(--muted-foreground, #a1a1aa); }
.dark .brm-num-zinc   { color: var(--mono, #e4e4e7); }
.dark .brm-num-indigo { color: #818cf8; }
.dark .brm-num-amber  { color: #fbbf24; }
.dark .brm-num-red    { color: #f87171; }
.dark .brm-num-green  { color: #4ade80; }

/* ── 대시보드 편성표 시간대 밴드 색상 ────────────────────────── */
.brm-band { display: inline-flex; align-items: center; border-radius: 0.375rem;
            padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; }
.brm-band-dawn    { background: #e0e7ff; color: #4338ca; }
.brm-band-morning { background: #e0f2fe; color: #0369a1; }
.brm-band-noon    { background: #fef3c7; color: #b45309; }
.brm-band-evening { background: #ffe4e6; color: #be123c; }
.brm-band-night   { background: #ede9fe; color: #6d28d9; }
.brm-band-unset   { background: var(--muted, #f4f4f5); color: var(--muted-foreground, #71717a); }
.dark .brm-band-dawn    { background: rgba(67,56,202,.25);  color: #a5b4fc; }
.dark .brm-band-morning { background: rgba(3,105,161,.25);  color: #7dd3fc; }
.dark .brm-band-noon    { background: rgba(180,83,9,.25);   color: #fcd34d; }
.dark .brm-band-evening { background: rgba(190,18,60,.25);  color: #fda4af; }
.dark .brm-band-night   { background: rgba(109,40,217,.25); color: #c4b5fd; }

.brm-bar-dawn    { border-inline-start-color: #6366f1; }
.brm-bar-morning { border-inline-start-color: #0ea5e9; }
.brm-bar-noon    { border-inline-start-color: #f59e0b; }
.brm-bar-evening { border-inline-start-color: #f43f5e; }
.brm-bar-night   { border-inline-start-color: #8b5cf6; }
.brm-bar-unset   { border-inline-start-color: var(--border, #d4d4d8); }

.brm-time-dawn    { color: #4f46e5; }
.brm-time-morning { color: #0284c7; }
.brm-time-noon    { color: #d97706; }
.brm-time-evening { color: #e11d48; }
.brm-time-night   { color: #7c3aed; }
.brm-time-unset   { color: var(--muted-foreground, #71717a); }

/* 콘텐츠 종류 태그(TV/Radio/기타) */
.brm-kind-tv    { color: #6366f1; }
.brm-kind-radio { color: #f59e0b; }
.brm-kind-etc   { color: var(--muted-foreground, #a1a1aa); }