/* ============================================================
 * maba-vendor.css — vendor 위젯 스타일 오버라이드 (토큰 기준)
 * 대상: SweetAlert2(3단계), Tabulator·flatpickr·Tom Select·Jodit·
 * FullCalendar·noUiSlider(4단계)
 * vendor 원본 파일은 수정 금지 — 모든 커스터마이징은 이 파일에서.
 * ============================================================ */

/* ---------- SweetAlert2 (design.md 1.1·9 — 기본 디자인 사용 금지) ---------- */
/* 팝업·토스트 배경은 서피스 토큰 — 라이트=흰색 동일, 다크모드 자동 전환 */
.swal2-popup { background: var(--maba-surface); color: var(--maba-text); }
/* 다이얼로그 배경(딤) — 기본 40%보다 진하게 50% (뒤 페이지가 덜 비치도록). 토스트는 backdrop 없음이라 영향 없음 */
.swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .5); }
/* 헤더(제목+X) + 본문(아이콘 칩+메시지 가로) + 우측 버튼 — 컴팩트, 구분선 없음 */
.maba-swal.swal2-popup {
  font-family: var(--bs-font-sans-serif);
  border-radius: var(--maba-radius);
  box-shadow: var(--maba-shadow-lg);
  width: min(420px, 92vw);
  padding: 0;
  text-align: left;
}
/* 헤더 — 제목 좌측 (X는 우측, 아래 close) */
.maba-swal .swal2-title {
  font-size: 20px; font-weight: 600; color: var(--maba-text);
  text-align: left; margin: 0; padding: 28px 52px 8px 18px;
}
/* 본문 — 아이콘 칩(흑백) + 메시지 가로 배치 */
.maba-swal .swal2-html-container {
  font-size: 16px; color: var(--maba-text); text-align: left;
  margin: 0; padding: 14px 18px 10px;
}
.maba-swal__body { display: flex; align-items: center; gap: 14px; }
.maba-swal__ic {
  flex: none; display: grid; place-items: center;
  font-size: 38px; line-height: 1; color: var(--maba-text);
}
.maba-swal__msg { flex: 1; min-width: 0; line-height: 1.5; }
/* 푸터 — 버튼 우측 정렬 */
.maba-swal .swal2-actions {
  justify-content: flex-end; gap: 8px; margin: 0;
  padding: 8px 18px 20px;
}
.maba-swal .swal2-actions .btn { min-width: 72px; margin: 0; }
/* 닫기 X — 헤더 우측, 제목 텍스트와 세로 중앙 정렬 (swal2 기본은 position:static이라 absolute로 고정) */
.maba-swal .swal2-close {
  position: absolute;
  top: 20px; right: 14px; width: 28px; height: 28px;
  font-size: 24px; line-height: 1; color: var(--maba-text-sub); box-shadow: none;
}
.maba-swal .swal2-close:hover { color: var(--maba-text); background: transparent; }

/* 토스트 — z-index를 로딩 오버레이 위로 (design.md 6) */
.swal2-container.swal2-top-end,
.swal2-container.maba-toast-ctr { z-index: var(--maba-z-toast) !important; }
/* 토스트 컨테이너가 화면 클릭을 막지 않게 — 토스트만 클릭 가능.
   위치와 무관하게 모든 토스트에 걸린다(maba.js가 클래스를 항상 붙인다) — 컨테이너는 토스트
   너비가 아니라 그 줄 전체를 차지해서, 보정이 없으면 그 아래 버튼이 첫 클릭을 잃는다. */
.swal2-container.maba-toast-ctr { pointer-events: none; }
.swal2-container.maba-toast-ctr .swal2-toast { pointer-events: auto; }
/* 토스트 — 타입색은 --maba-toast-c 하나로 통일(아이콘 칩·엣지·진행바가 참조).
   스타일 5종은 .maba-toast--st-*(JS opts.style / maba.toast.style)로 전환 — 기본 solid. */
.maba-toast--success.swal2-popup { --maba-toast-c: var(--maba-success); }
.maba-toast--error.swal2-popup { --maba-toast-c: var(--maba-danger); }
.maba-toast--info.swal2-popup { --maba-toast-c: var(--maba-info); }
.maba-toast--warning.swal2-popup { --maba-toast-c: var(--maba-warning); }
/* 공통 틀 (스타일 미지정='edge' 구 기본: 흰 카드 + 좌측 엣지) */
.maba-toast.swal2-popup {
  font-family: var(--bs-font-sans-serif);
  box-shadow: var(--maba-shadow-md);
  border-radius: var(--maba-radius);
  padding: 10px 16px 10px 12px;
  border-left: 3px solid var(--maba-toast-c, var(--maba-gray-400));
}
.maba-toast .swal2-title { font-size: 14px; font-weight: 600; color: var(--maba-text); margin: 2px 0 0 10px; padding: 0; }
.maba-toast .maba-toast__icon.swal2-icon {
  width: 26px; height: 26px; min-width: 26px;
  margin: 0; border: 0; border-radius: 50%; color: #fff;
  background: var(--maba-toast-c, var(--maba-gray-400));
}
.maba-toast .maba-toast__icon .swal2-icon-content { font-size: 15px; line-height: 1; }
.maba-toast .swal2-timer-progress-bar { height: 3px; opacity: .4; background: var(--maba-toast-c, var(--maba-gray-400)); }
/* st-solid (기본): 원색 90% 배경 + 흰 글자 — 흰 배경에서 가장 잘 보임 */
.maba-toast--st-solid.swal2-popup { background: color-mix(in srgb, var(--maba-toast-c) 90%, white); border-left: 0; }
.maba-toast--st-solid .swal2-title { color: #fff; }
.maba-toast--st-solid .maba-toast__icon.swal2-icon { background: rgba(255, 255, 255, .22); }
.maba-toast--st-solid .swal2-timer-progress-bar { background: #fff; opacity: .55; }
/* st-solid 노랑(warning)만 다크그레이 글자 — 노랑 위 흰 글자는 안 보임 (Bootstrap btn-warning과 같은 관례).
   2026-07-18 확정 #212529: 브라운 톤(노랑+검정 혼합)·순검정(#000, 너무 강함)·흰색(전 두께) 비교 후 선택 */
.maba-toast--st-solid.maba-toast--warning .swal2-title { color: #212529; }
.maba-toast--st-solid.maba-toast--warning .maba-toast__icon.swal2-icon { background: rgba(0, 0, 0, .14); }
.maba-toast--st-solid.maba-toast--warning .swal2-timer-progress-bar { background: rgba(0, 0, 0, .5); opacity: .5; }
/* st-tint: 소프트 틴트(원색 14%+surface) + 진한 원색 글자 — notify soft·badge-soft와 같은 언어 */
.maba-toast--st-tint.swal2-popup {
  background: color-mix(in srgb, var(--maba-toast-c) 14%, var(--maba-surface));
  border: 1px solid color-mix(in srgb, var(--maba-toast-c) 32%, var(--maba-surface));
}
.maba-toast--st-tint .swal2-title { color: color-mix(in srgb, var(--maba-toast-c) 82%, black); }
[data-bs-theme="dark"] .maba-toast--st-tint .swal2-title { color: color-mix(in srgb, var(--maba-toast-c) 70%, white); }
/* st-outline: 흰 카드 유지 + 전체 컬러 테두리 + 그림자 강화 */
.maba-toast--st-outline.swal2-popup {
  background: var(--maba-surface);
  border: 1px solid color-mix(in srgb, var(--maba-toast-c) 45%, var(--maba-surface));
  border-left: 4px solid var(--maba-toast-c);
  box-shadow: var(--maba-shadow-lg);
}
/* st-dark: 다크 뉴트럴(슬레이트) + 컬러 아이콘 칩 (gray-800은 다크에서도 안 뒤집힘 — 흰 글자 고정) */
.maba-toast--st-dark.swal2-popup { background: var(--maba-gray-800); border-left: 0; }
.maba-toast--st-dark .swal2-title { color: #fff; }
[data-bs-theme="dark"] .maba-toast--st-dark.swal2-popup { border: 1px solid var(--maba-border); }  /* 다크 페이지와 톤 분리 */

/* ---------- flatpickr (달력 — 토큰 색. 기본 색 규칙은 무스코프라 두 달 캘린더에도 적용된다) ---------- */
.flatpickr-calendar { background: var(--maba-surface); box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 8px 28px rgba(0,0,0,.16); border: 0; }   /* border 대신 그림자로 경계 */
/* 달력 하단 오늘·지우기 버튼 바 (maba.date 래퍼가 생성) */
.flatpickr-calendar .maba-fp-footer { display: flex; gap: 6px; justify-content: flex-end; padding: 7px 9px; border-top: 1px solid var(--maba-border); }
.flatpickr-day { color: var(--maba-text); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--maba-gray-100); border-color: var(--maba-gray-100); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--maba-gray-400); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--maba-primary); border-color: var(--maba-primary); color: #fff;
}
.flatpickr-day.inRange { background: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 82%); border-color: transparent; box-shadow: none; }
.flatpickr-day.today { border-color: var(--maba-primary); }
.flatpickr-months .flatpickr-month, .flatpickr-weekday,
.flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color: var(--maba-text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--maba-text); }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { color: var(--maba-text); }

/* ===== 아래 커스텀(안드로이드식 배너·년/월 목록·헤더 재배치·화살표 보정)은 단일 달 전용 =====
   calendarContainer에 .maba-fp 가 있을 때만 적용된다(fpEnhance가 showMonths<=1에만 붙임).
   showMonths>1(두 달 나란히)이면 .maba-fp 가 없어 위의 flatpickr 기본 달력이 그대로 뜬다 — 두 달 캘린더가 깨지지 않는다. */
/* overflow:hidden 대신 팝업·배너·버튼바에 직접 모서리 radius를 준다 — hidden이 열림 transform 애니와
   만나 팝업 상단에 1px 흰 줄(모서리 클리핑)을 남기던 문제. 이러면 열림 애니는 그대로 두고 흰 줄만 없어진다. */
.flatpickr-calendar.maba-fp { border-radius: 6px; }
.flatpickr-calendar.maba-fp .maba-fp-banner { border-radius: 6px 6px 0 0; }
.flatpickr-calendar.maba-fp .maba-fp-footer { border-radius: 0 0 6px 6px; }
/* 앵커(PC) 드롭다운의 입력칸 연결 삼각형 제거 — border 없는 배너 위에 흰 삼각형으로 비치던 것 */
.flatpickr-calendar.maba-fp::before, .flatpickr-calendar.maba-fp::after { display: none; }

/* < > 화살표 15px + 굵게(획 stroke) + 월 텍스트와 세로 중앙 정렬(months padding-top 탓에 위로 뜨던 것 보정) */
.maba-fp .flatpickr-prev-month svg, .maba-fp .flatpickr-next-month svg { width: 15px; height: 15px; }
.maba-fp .flatpickr-prev-month svg path, .maba-fp .flatpickr-next-month svg path { stroke: var(--maba-text); stroke-width: 1.2px; }
.maba-fp .flatpickr-prev-month, .maba-fp .flatpickr-next-month { top: 50%; transform: translateY(calc(-50% + 1px)); }

/* 상단 여백(화살표 기준줄) + 요일 줄 여백 + 오늘 강조 */
.maba-fp .flatpickr-months { padding-top: 6px; position: relative; }
.maba-fp .flatpickr-weekdays { margin-top: 5px; }
.maba-fp .flatpickr-day.today:not(.selected) { border-color: transparent; color: var(--maba-primary); font-weight: 700; }

/* 년도 = 탭하면 목록: 숫자 스피너 화살표를 숨기고 년도 영역을 클릭 버튼처럼 */
.maba-fp .flatpickr-current-month .numInputWrapper.maba-fp-yearbtn { cursor: pointer; border-radius: 6px; }
.maba-fp .flatpickr-current-month .numInputWrapper.maba-fp-yearbtn:hover { background: var(--maba-gray-100); }
.maba-fp .flatpickr-current-month .numInputWrapper .arrowUp,
.maba-fp .flatpickr-current-month .numInputWrapper .arrowDown { display: none; }
.maba-fp .flatpickr-current-month input.cur-year { pointer-events: none; }

/* 년/월 목록 오버레이 — 날짜 그리드 영역만 덮는다(위쪽 월·년 네비는 남아 다시 닫을 수 있다) */
.maba-fp .flatpickr-innerContainer, .maba-fp-multi .flatpickr-innerContainer { position: relative; }
.maba-fp .maba-fp-years, .maba-fp .maba-fp-months,
.maba-fp-multi .maba-fp-years, .maba-fp-multi .maba-fp-months {
  position: absolute; inset: 0; z-index: 4;
  background: var(--maba-surface);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 0; -webkit-overflow-scrolling: touch;
}
.maba-fp .maba-fp-year, .maba-fp .maba-fp-month,
.maba-fp-multi .maba-fp-year, .maba-fp-multi .maba-fp-month {
  display: block; width: 100%; border: 0; background: transparent;
  padding: 9px 0; line-height: 1.2;
  font-size: 16px; color: var(--maba-text);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.maba-fp .maba-fp-year:hover, .maba-fp .maba-fp-month:hover,
.maba-fp-multi .maba-fp-year:hover, .maba-fp-multi .maba-fp-month:hover { background: var(--maba-gray-100); }
.maba-fp .maba-fp-year.is-current, .maba-fp .maba-fp-month.is-current,
.maba-fp-multi .maba-fp-year.is-current, .maba-fp-multi .maba-fp-month.is-current { color: var(--maba-primary); font-weight: 700; font-size: 22px; }

/* 월 라벨(static) — 년도처럼 굵게, 탭하면 fpMonths 목록이 뜬다. hover 배경으로 눌리는 곳임을 표시 */
.maba-fp .flatpickr-current-month .cur-month { font-size: 16px; font-weight: 700; line-height: 1; margin: 0; padding: 1px 5px; cursor: pointer; border-radius: 6px; font-variant-numeric: tabular-nums; }   /* tabular-nums: 년도(input)와 숫자 글리프 통일 — 없으면 "2026"과 "6월"의 숫자가 달라 보인다 */
.maba-fp .flatpickr-current-month .cur-month:hover { background: var(--maba-gray-100); }

/* 상단 파랑 날짜 띠 — 고른 날짜를 큰 글씨로 보여준다(안드로이드 날짜 선택기 배너) */
.maba-fp .maba-fp-banner { background: var(--maba-primary); color: #fff; padding: 13px 16px; }
.maba-fp .maba-fp-banner__y { font-size: 16px; font-weight: 500; opacity: .9; }
.maba-fp .maba-fp-banner__d { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 1px; }

/* 헤더를 한국식 "2026년 7월" 순서로 — 년도를 왼쪽에 두고 뒤에 '년' 표기 */
.maba-fp .flatpickr-current-month { display: flex; align-items: center; justify-content: center; gap: 6px; }
.maba-fp .flatpickr-current-month .numInputWrapper { order: -1; display: inline-flex; align-items: center; }
.maba-fp .flatpickr-current-month input.cur-year { width: 4ch; text-align: center; padding: 0; box-sizing: content-box; font-variant-numeric: tabular-nums; line-height: 18px; height: 18px; }   /* 월 라벨(16px+상하1px=18px)과 박스·글리프 중심 일치 — input의 auto 높이(19px, 홀수)가 0.5px 어긋남을 만들던 것 */
.maba-fp .flatpickr-current-month .numInputWrapper.maba-fp-yearbtn::after { content: '년'; margin-left: 1px; font-weight: 700; color: var(--maba-text); }

/* 월 이동 페이드 — 좌우 슬라이드(translateX)는 그리드 반대편에 빈칸(흰 배경)을 만들어 흰 줄처럼 보인다.
   방향 없는 페이드로 부드럽게만 전환한다(스와이프·화살표·월 목록 공통). */
.maba-fp .dayContainer.maba-fp-nx, .maba-fp .dayContainer.maba-fp-pv,
.maba-fp-multi .dayContainer.maba-fp-nx, .maba-fp-multi .dayContainer.maba-fp-pv { animation: maba-fp-fade .2s ease; }
@keyframes maba-fp-fade { from { opacity: .25; } to { opacity: 1; } }

/* 두 달 캘린더(showMonths>1) 헤더 — 커스텀 UI(배너·중앙 모달·스와이프)는 꺼져 있지만,
   헤더는 단일 달과 통일한다: 한국식 "2026년 7월"·16px·700, 헤더 높이 44px,
   년/월은 탭하면 목록으로 선택(두 헤더 모두 — 스피너 화살표는 숨긴다). */
.maba-fp-multi .flatpickr-months .flatpickr-month { height: 44px; }
.maba-fp-multi .flatpickr-months .flatpickr-prev-month, .maba-fp-multi .flatpickr-months .flatpickr-next-month { height: 44px; display: flex; align-items: center; justify-content: center; }
/* 화살표·오늘·요일 여백도 단일 달과 동일하게 */
.maba-fp-multi .flatpickr-prev-month svg, .maba-fp-multi .flatpickr-next-month svg { width: 15px; height: 15px; }
.maba-fp-multi .flatpickr-prev-month svg path, .maba-fp-multi .flatpickr-next-month svg path { stroke: var(--maba-text); stroke-width: 1.2px; }
.maba-fp-multi .flatpickr-weekdays { margin-top: 5px; }
.maba-fp-multi .flatpickr-day.today:not(.selected) { border-color: transparent; color: var(--maba-primary); font-weight: 700; }
.maba-fp-multi .flatpickr-current-month { height: 44px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 0; }
.maba-fp-multi .flatpickr-current-month .numInputWrapper { order: -1; display: inline-flex; align-items: center; width: auto; cursor: pointer; border-radius: 6px; }
.maba-fp-multi .flatpickr-current-month .numInputWrapper:hover { background: var(--maba-gray-100); }
.maba-fp-multi .flatpickr-current-month .numInputWrapper .arrowUp,
.maba-fp-multi .flatpickr-current-month .numInputWrapper .arrowDown { display: none; }
.maba-fp-multi .flatpickr-current-month input.cur-year { font-size: 16px; font-weight: 700; width: 4ch; text-align: center; padding: 0; box-sizing: content-box; font-variant-numeric: tabular-nums; line-height: 18px; height: 18px; pointer-events: none; }
.maba-fp-multi .flatpickr-current-month .cur-month { font-size: 16px; font-weight: 700; line-height: 1; margin: 0; padding: 1px 5px; cursor: pointer; border-radius: 6px; font-variant-numeric: tabular-nums; }
.maba-fp-multi .flatpickr-current-month .cur-month:hover { background: var(--maba-gray-100); }
.maba-fp-multi .flatpickr-current-month .numInputWrapper::after { content: '년'; margin-left: 1px; font-weight: 700; color: var(--maba-text); }

/* 모바일(터치 기기·좁은 화면)에서는 화면 가운데 팝업으로 — 두 달은 fpModal을 건너뛰어(maba-fp-modal 미부여) 자동 제외 */
body.maba-fp-lock { overflow: hidden; }   /* 모달 열림 동안 뒤 페이지 스크롤 잠금(위아래 스와이프로 뒤 화면이 안 움직이게) */
.maba-fp-backdrop { display: none; }   /* 기본(PC): 백드롭 없음 */
@media (pointer: coarse), (max-width: 600px) {
  .maba-fp-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45); z-index: 1055;
  }
  .flatpickr-calendar.maba-fp-modal.open {
    position: fixed !important;
    top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1056; width: min(92vw, 360px); max-width: 360px;
  }
  /* 넓어진 폭에 맞춰 내부를 100%로 펴고 날짜 셀을 크게(터치 타깃) */
  .maba-fp-modal .flatpickr-innerContainer,
  .maba-fp-modal .flatpickr-rContainer,
  .maba-fp-modal .flatpickr-days,
  .maba-fp-modal .dayContainer { width: 100%; min-width: 100%; max-width: 100%; }
  .maba-fp-modal .flatpickr-day { max-width: 14.2857%; flex-basis: 14.2857%; height: 42px; line-height: 42px; }
  .maba-fp-modal .flatpickr-day.selected { border-radius: 50%; }
}

/* ---------- Tom Select (포커스·태그 토큰 색) ---------- */
.ts-control { background-color: var(--maba-surface); color: var(--maba-text); } /* --bs-body-bg(회색) 상속 방지 — form-control과 동일 원칙 */
.ts-control:focus-within { border-color: var(--maba-primary); box-shadow: 0 0 0 .2rem rgba(32,107,196,.2); }
.ts-dropdown { background: var(--maba-surface); color: var(--maba-text); border-color: var(--maba-border); }
.ts-dropdown .active { background: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 84%); color: var(--maba-text); }
.ts-control .item { background: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 82%); color: var(--maba-primary); border-radius: var(--maba-radius-sm); }

/* ---------- noUiSlider (연결바·핸들 토큰 색) ---------- */
/* 부가 UI 공간 확보 — 값 툴팁은 위쪽, 눈금(pips)은 아래쪽 여백 필요 */
.maba-slider-tooltips { margin-top: 34px; }
.maba-slider-pips { margin-bottom: 46px; }
.noUi-connect { background: var(--maba-primary); }
.noUi-handle { border-color: var(--maba-border); box-shadow: var(--maba-shadow-sm); border-radius: 50%; }
.noUi-handle:before, .noUi-handle:after { display: none; }
.noUi-horizontal .noUi-handle { width: 20px; height: 20px; right: -10px; top: -6px; }
.noUi-target { border: 0; box-shadow: none; background: var(--maba-gray-200); height: 6px; }
/* 값 툴팁 (핸들 위 배지) */
.noUi-tooltip {
  border: 0; border-radius: var(--maba-radius-sm);
  background: var(--maba-gray-800); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 8px;
}
.noUi-horizontal .noUi-tooltip { bottom: 150%; }
/* 눈금 (pips) */
.noUi-pips { color: var(--maba-text-sub); font-size: 11.5px; }
.noUi-marker { background: var(--maba-border); }
.noUi-marker-large { background: var(--maba-border); }

/* ---------- Tabulator (모던 스킨 — 진한 줄무늬 제거, 얇은 구분선 + hover 강조) ---------- */
.tabulator { border: 1px solid var(--maba-border); border-radius: var(--maba-radius); font-size: 14px; background: var(--maba-surface); }
/* 헤더: 연한 배경 + 보조색 13px 라벨 */
.tabulator .tabulator-header { border-bottom: 1px solid var(--maba-border); background: var(--maba-gray-100); }
.tabulator .tabulator-header .tabulator-col { background: transparent; border-right: 0; }
/* 고정 열(frozen) 헤더 셀은 불투명 채움 — 기본 transparent면 가로 스크롤 시 뒤 컬럼 헤더가 비쳐 겹친다(토큰이라 다크 자동) */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen { background: var(--maba-gray-100); }
/* 그룹 헤더가 있으면 단일 열 헤더가 위로 붙는 문제 — 제목을 세로 가운데 정렬 */
.tabulator .tabulator-header .tabulator-col:not(.tabulator-col-group) .tabulator-col-content { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { align-items: stretch; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-size: 13px; font-weight: 600; color: var(--maba-text-sub); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 10px 12px; }
/* 정렬 아이콘 — Tabler ↑↓(중립)·방향(정렬 중)을 라벨 옆 inline 표시, 정렬 컬럼은 파랑 하이라이트 (이미지 #44) */
.tabulator .tabulator-header .tabulator-col .tabulator-col-title-holder { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 0; width: auto; max-width: 100%; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-arrow { display: none !important; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter {
  position: static; width: auto; height: auto; opacity: 1; flex: none; display: inline-flex; align-items: center;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter::after {
  font-family: "tabler-icons"; font-size: 15px; line-height: 1; content: "\eb5a"; color: var(--maba-gray-400);
}
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter::after { content: "\eb26"; color: var(--maba-primary); }
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-sorter::after { content: "\eb27"; color: var(--maba-primary); }
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-content { background: color-mix(in srgb, var(--maba-primary), transparent 92%); }
.tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-title { color: var(--maba-primary); }
/* 행: 줄무늬 없이 얇은 구분선, hover 시 연한 프라이머리 */
.tabulator .tabulator-row { background: var(--maba-surface); border-bottom: 1px solid var(--maba-gray-100); }
.tabulator .tabulator-row.tabulator-row-even { background: var(--maba-surface); }
.tabulator .tabulator-row.tabulator-selectable:hover { background: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 95%); }
.tabulator .tabulator-row.tabulator-selected { background: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 86%); }
.tabulator .tabulator-row .tabulator-cell { border-right: 0; padding: 10px 12px; color: var(--maba-text); }
/* 행 컨테이너 배경 제거 — 행(surface)이 배경을 담당하고 빈 영역은 .tabulator(surface)가 보이게.
   (Tabulator 기본이 흰색이라 다크모드에서 하단 빈 영역이 흰 배경으로 남던 것 방지) */
.tabulator .tabulator-tableholder .tabulator-table { background: transparent; }
/* 계산행(합계 등): vendor가 `.tabulator .tabulator-footer/header .tabulator-calcs-holder`(3클래스)에 흰 배경 !important를
   걸어서, 특성성을 맞춰야 이긴다(같은 3클래스 + maba-vendor.css가 뒤에 로드). 다크에서 흰 배경이 튀는 것 방지 */
.tabulator .tabulator-footer .tabulator-calcs-holder,
.tabulator .tabulator-header .tabulator-calcs-holder { background: var(--maba-gray-100) !important; border-color: var(--maba-border) !important; }
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { background: var(--maba-gray-100) !important; color: var(--maba-text) !important; }
/* 푸터(페이징): 흰 배경 + 작은 버튼 */
.tabulator .tabulator-footer { background: var(--maba-surface); border-top: 1px solid var(--maba-border); padding: 8px 12px; }
.tabulator .tabulator-footer .tabulator-footer-contents { padding: 0; }
.tabulator .tabulator-footer .tabulator-page, .tabulator .tabulator-footer .tabulator-page-size {
  font-size: 13px; padding: 4px 10px; border: 1px solid var(--maba-border);
  border-radius: var(--maba-radius-sm); background: var(--maba-surface); color: var(--maba-text);
}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { background: var(--maba-gray-100); color: var(--maba-text); }
.tabulator .tabulator-footer .tabulator-page.active { background: var(--maba-primary); border-color: var(--maba-primary); color: #fff; }
/* Tabulator는 disabled를 :disabled 속성으로 준다(클래스 아님) — vendor의 흰 배경(#fff)이 다크에서 남지 않게 :disabled도 오버라이드 */
.tabulator .tabulator-footer .tabulator-page:disabled,
.tabulator .tabulator-footer .tabulator-page.disabled {
  background: var(--maba-surface); color: var(--maba-text-sub); border-color: var(--maba-border); opacity: .5;
}
.tabulator .tabulator-footer .tabulator-page-size { margin: 0 8px; }
/* 흰 헤더 + 내부 격자 라인 변형 (.maba-grid-lined 를 그리드 카드에) — 헤더 음영 대신 라인으로 구획 */
.maba-grid-lined .tabulator-header { background: var(--maba-surface); }
.maba-grid-lined .tabulator-header .tabulator-col .tabulator-col-title { color: var(--maba-text); }
.maba-grid-lined .tabulator-header .tabulator-col { border-right: 1px solid var(--maba-gray-200); }
.maba-grid-lined .tabulator-row .tabulator-cell { border-right: 1px solid var(--maba-gray-200); }
.maba-grid-lined .tabulator-row { border-bottom-color: var(--maba-gray-200); }
/* 세로선만 변형 (.maba-grid-vlined) — 열 구분선만, 행(가로) 구분선 없음 */
.maba-grid-vlined .tabulator-header { background: var(--maba-surface); }
.maba-grid-vlined .tabulator-header .tabulator-col .tabulator-col-title { color: var(--maba-text); }
.maba-grid-vlined .tabulator-header .tabulator-col { border-right: 1px solid var(--maba-gray-200); }
.maba-grid-vlined .tabulator-row .tabulator-cell { border-right: 1px solid var(--maba-gray-200); }
.maba-grid-vlined .tabulator-row { border-bottom: 0; }
/* 조밀(compact) 변형 (.maba-grid-compact) — 행 높이·셀 패딩 축소 (데이터 많은 목록용) */
.maba-grid-compact .tabulator-header .tabulator-col .tabulator-col-content { padding-top: 6px; padding-bottom: 6px; }
.maba-grid-compact .tabulator-row .tabulator-cell { padding-top: 4px; padding-bottom: 4px; font-size: 13px; line-height: 1.35; }
.maba-grid-compact .maba-pill { padding: 1px 7px; font-size: 11px; }
.maba-grid-compact .tabulator-row { min-height: 0; }
.tabulator .tabulator-footer .tabulator-paginator > label { font-size: 13px; color: var(--maba-text-sub); font-weight: 400; }
/* 좁은 표의 페이징 줄 — 폭 360 폰에서 줄(329px)이 표(안쪽 276px)보다 길어 '다음'·'마지막'이 잘렸다(2026-09-30).
   화면 폭이 아니라 푸터 폭 기준(컨테이너 쿼리)이라 PC의 좁은 카드 안 표에도 먹는다.
   340px 이하: '페이지 크기' 글자 숨김 + 여백 축소(242px), 300px 이하(360 폰): 쪽 번호 숨김(Tabulator도 넘치면 숨기지만
   재는 시점에 따라 남아 '마지막'이 밀렸다 — inline style이라 !important), 250px 이하(320 폰): 처음·마지막도 숨김 */
.tabulator .tabulator-footer { container-type: inline-size; }
@container (max-width: 340px) {
  .tabulator .tabulator-footer .tabulator-paginator > label { display: none; }
  .tabulator .tabulator-footer .tabulator-page-size { margin: 0 6px 0 0; }
  .tabulator .tabulator-footer .tabulator-page { padding-left: 8px; padding-right: 8px; }
}
@container (max-width: 300px) {
  .tabulator .tabulator-footer .tabulator-pages { display: none !important; }
}
@container (max-width: 250px) {
  .tabulator .tabulator-footer .tabulator-page[data-page="first"],
  .tabulator .tabulator-footer .tabulator-page[data-page="last"] { display: none; }
}
/* 셀 안 체크/스위치 — form-check 기본 min-height가 행을 밀어올리는 것 방지 */
.tabulator-cell .form-check { min-height: 0; }

/* ---------- FullCalendar (--fc-* 토큰) ---------- */
:root {
  --fc-button-bg-color: var(--maba-primary);
  --fc-button-border-color: var(--maba-primary);
  --fc-button-hover-bg-color: color-mix(in srgb, var(--maba-primary), black 12%);
  --fc-button-hover-border-color: color-mix(in srgb, var(--maba-primary), black 12%);
  --fc-button-active-bg-color: color-mix(in srgb, var(--maba-primary), black 18%);
  --fc-today-bg-color: color-mix(in srgb, var(--maba-primary), var(--maba-surface) 90%);
  --fc-border-color: var(--maba-border);
  --fc-event-bg-color: var(--maba-primary);
  --fc-event-border-color: var(--maba-primary);
  --fc-page-bg-color: var(--maba-surface);
  --fc-neutral-bg-color: var(--maba-gray-100);
  --fc-list-event-hover-bg-color: var(--maba-gray-100);
}
.fc { font-size: 14px; }
/* 날짜 숫자·요일 헤더·more 링크가 전역 링크 스타일(파랑·밑줄)로 보이는 것 방지 */
.fc a { color: inherit; text-decoration: none; }
.fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--maba-text); }
/* 일·토 요일 강조 (요일 헤더 + 날짜 숫자) — 한국 캘린더 관례 */
.fc .fc-day-sun .fc-col-header-cell-cushion, .fc .fc-day-sun .fc-daygrid-day-number { color: var(--maba-red); }
.fc .fc-day-sat .fc-col-header-cell-cushion, .fc .fc-day-sat .fc-daygrid-day-number { color: var(--maba-blue); }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--maba-text-sub); opacity: .65; }
/* 툴바 중앙 그룹(prev,title,next) — 실제 wrapping div가 fc-toolbar-chunk의 자식(클래스 없음)이라 그 div도 flex로 */
.fc .fc-toolbar-chunk { display: flex; align-items: center; gap: var(--maba-space-2); }
.fc .fc-toolbar-chunk > div { display: flex; align-items: center; gap: var(--maba-space-2); }
/* 요일 헤더·날짜 셀 높이 확보 */
.fc .fc-col-header-cell-cushion { padding: 10px 4px; }
.fc .fc-daygrid-day-frame { min-height: 90px; padding: 6px; }
/* 날짜 숫자 좌측 상단 (기본은 row-reverse로 우측 정렬) */
.fc .fc-daygrid-day-top { flex-direction: row; }
.fc .fc-daygrid-day-number { padding: 2px 4px; }
/* prev·next — 투명 원형 아이콘 버튼 (maba-icon-btn과 동일 톤) */
.fc .fc-prev-button, .fc .fc-next-button {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none !important; color: var(--maba-text-sub) !important;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none !important; transition: background var(--maba-transition-micro), color var(--maba-transition-micro);
}
.fc .fc-prev-button:hover, .fc .fc-next-button:hover,
.fc .fc-prev-button:focus, .fc .fc-next-button:focus { background: var(--maba-bg) !important; color: var(--maba-text) !important; }
.fc .fc-prev-button:active, .fc .fc-next-button:active { background: var(--maba-gray-200) !important; }
/* 일정(이벤트) 텍스트 크기 */
.fc .fc-event-title, .fc .fc-event-time { font-size: 13px; }
/* 오늘·월/주/목록 버튼 — btn-outline-gray 톤 (prev·next는 위에서 이미 별도 처리) */
.fc .fc-button-primary {
  background-color: transparent !important; border-color: var(--maba-gray-500) !important; color: var(--maba-gray-500) !important;
}
.fc .fc-button-primary:hover, .fc .fc-button-primary:focus-visible {
  background-color: var(--maba-gray-500) !important; border-color: var(--maba-gray-500) !important; color: #fff !important;
}
.fc .fc-button-primary:disabled { opacity: .5; }
.fc .fc-button-primary.fc-button-active {
  background-color: var(--maba-gray-500) !important; border-color: var(--maba-gray-500) !important; color: #fff !important;
}
.fc .fc-button:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow: none; }
/* 오늘 버튼 앞에 캘린더 아이콘 (Tabler 웹폰트 글리프) */
.fc .fc-today-button::before {
  font-family: "tabler-icons" !important; content: "\ea53"; margin-right: 6px; font-size: 15px; line-height: 1; vertical-align: -2px;
}
/* 오늘 버튼은 상태와 무관하게 항상 라이트(아웃라인) 톤 유지 */
.fc .fc-today-button, .fc .fc-today-button:hover, .fc .fc-today-button:focus-visible, .fc .fc-today-button:active, .fc .fc-today-button.fc-button-active {
  background-color: transparent !important; border-color: var(--maba-gray-500) !important; color: var(--maba-gray-500) !important;
}
/* 월·주·목록 버튼 앞 아이콘 */
.fc .fc-dayGridMonth-button::before { font-family: "tabler-icons" !important; content: "\fd2f"; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: -2px; }
.fc .fc-timeGridWeek-button::before { font-family: "tabler-icons" !important; content: "\fd30"; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: -2px; }
.fc .fc-listWeek-button::before { font-family: "tabler-icons" !important; content: "\eb6b"; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: -2px; }


/* ══════════════════════════════════════════════════════════════
   Plyr (동영상 재생) — 템플릿 토큰에 맞춘다.
   Plyr은 자체 CSS 변수를 쓰므로 --maba-* 값을 그 변수에 넘겨 준다.
   ══════════════════════════════════════════════════════════════ */
.plyr {
  --plyr-color-main: var(--maba-primary);
  --plyr-font-family: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", sans-serif;
  --plyr-font-size-base: 15px;
  --plyr-font-size-small: 14px;
  --plyr-badge-background: var(--maba-primary);
  --plyr-menu-color: var(--maba-text);
  --plyr-menu-background: var(--maba-surface);
  --plyr-menu-border-color: var(--maba-border);
  --plyr-range-thumb-background: #fff;
  border-radius: var(--maba-radius);
  overflow: hidden;   /* 둥근 모서리 안으로 영상을 자른다 */
}
.plyr__control--overlaid { background: color-mix(in srgb, var(--maba-primary) 90%, white); }
/* 설정 메뉴는 카드와 같은 테두리·그림자로 */
.plyr__menu__container { box-shadow: var(--maba-shadow-lg, 0 6px 18px rgba(0,0,0,.12)); }