/* ============================================================
 * mango-tools-dock.css — 복습퀴즈 옆 "교재도구 / 필기도구" 토글 칩
 *   클릭 시 해당 도구바가 그 아래로 '세로(아래로)' 드롭다운,
 *   드롭다운 배경은 '투명'.
 *  - 수업 중(body.vc-in-call)에만 도킹 적용
 *  - 기존 버튼/기능은 그대로, 배치만 변경
 * ============================================================ */

/* 콘텐츠 영역을 절대배치 기준으로 */
body.vc-in-call #vc-content-pane { position: relative !important; }

/* ── 탭바 칩 버튼 (복습퀴즈 바로 옆) — 깔끔한 라인(아웃라인) 스타일 ── */
.mango-tool-chip {
  align-self: center;
  margin-left: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;            /* 꽉 찬 배경 제거 → 투명 */
  border: 1px solid #FBBF24;          /* 기본(교재도구): 파스텔 노랑 */
  color: #FBBF24;                     /* 글자색 = 테두리색 */
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* 교재도구 = 노랑 라인 */
.mango-tool-chip[data-tool="materials"] { border-color: #FBBF24; color: #FBBF24; }
.mango-tool-chip[data-tool="materials"]:hover {
  background: rgba(251, 191, 36, 0.15);   /* hover 시에만 은은히 채움 */
  color: #FCD34D;
}
.mango-tool-chip[data-tool="materials"].open {
  background: rgba(251, 191, 36, 0.20);   /* 펼쳐진 동안 약하게 채워 활성 표시 */
}

/* 필기도구 = 파랑 라인 */
.mango-tool-chip[data-tool="write"] { border-color: #60A5FA; color: #60A5FA; }
.mango-tool-chip[data-tool="write"]:hover {
  background: rgba(96, 165, 250, 0.15);
  color: #93C5FD;
}
.mango-tool-chip[data-tool="write"].open {
  background: rgba(96, 165, 250, 0.20);
}

/* 라이트(파스텔) 테마 — 흰 배경 위 가독성 위해 글자만 약간 진하게 */
body.vc-theme-light .mango-tool-chip[data-tool="materials"] { color: #D97706; border-color: #FBBF24; }
body.vc-theme-light .mango-tool-chip[data-tool="materials"]:hover { color: #B45309; background: rgba(251,191,36,0.18); }
body.vc-theme-light .mango-tool-chip[data-tool="write"] { color: #2563EB; border-color: #60A5FA; }
body.vc-theme-light .mango-tool-chip[data-tool="write"]:hover { color: #1D4ED8; background: rgba(96,165,250,0.18); }

/* ── 교재/필기 도구바 = 세로 드롭다운(아래로) + 배경 투명 ──── */
body.vc-in-call #tab-pdf .pdf-controls,
body.vc-in-call #tab-pdf .pdf-anno-bar {
  position: absolute !important;
  top: 46px !important;            /* JS 가 칩 아래로 재배치(미실행 시 기본값) */
  right: 12px !important;
  left: auto !important;
  z-index: 47 !important;
  display: flex !important;
  flex-direction: column !important;   /* ⬇ 세로(아래로) */
  align-items: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 300px !important;
  max-height: calc(100% - 54px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;  /* 🫥 드롭다운 바탕 투명 */
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-wrap: nowrap !important;
}
body.vc-in-call #tab-pdf .pdf-controls > *,
body.vc-in-call #tab-pdf .pdf-anno-bar > * {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
/* 내부 그룹(span: 페이지뷰/줌, 범례)도 줄바꿈 없이 한 줄씩 */
body.vc-in-call #tab-pdf .pdf-controls > span,
body.vc-in-call #tab-pdf .pdf-anno-bar > span {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ============================================================
 * 🔧 (2026-07-06) 칠판 필기도구 — 칠판 탭에서 "✍️ 필기도구" 칩을 누르면
 *   칠판 전용 도구바(.wb-toolbar)가 칩 아래로 세로 드롭다운(배경 투명)으로 펼쳐짐.
 *   평소엔 #mg-hide-wb-toolbar 가 .wb-toolbar 를 숨기지만(display:none), 이 규칙은
 *   .wb-toolbar.mango-wb-dock-open 로 특이도가 더 높아 열렸을 때만 이긴다.
 *   → 칠판은 그대로 남고, 펜/지우개/선/도형/색상 등을 칠판 위에서 바로 사용.
 * ============================================================ */
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open {
  display: flex !important;
  position: absolute !important;
  top: 46px !important;            /* JS 가 칩 아래로 재배치(미실행 시 기본값) */
  right: 12px !important;
  left: auto !important;
  z-index: 47 !important;
  flex-direction: column !important;   /* ⬇ 세로(아래로) */
  align-items: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 300px !important;
  max-height: calc(100% - 54px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;  /* 🫥 드롭다운 바탕 투명 */
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-wrap: nowrap !important;
}
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open > * {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* ============================================================
 * 🎨 (2026-07-14) 필기도구(Writing Tools) 드롭다운 가독성 개선
 *   드롭다운 바탕이 '투명'이라 각 버튼이 스스로 대비를 확보해야 함.
 *   → 교재도구(.pdf-controls)의 pill + glass 스타일을 그대로 필기도구
 *     (.pdf-anno-bar 주석 툴바 / .wb-toolbar 칠판 툴바) 버튼에도 적용.
 *   [특이도] body + #tab-* (id) 선택자라 index.html 인라인 ph259/기본 규칙보다 이김.
 * ============================================================ */
body.vc-in-call #tab-pdf .pdf-anno-bar > button,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open > button {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  /* 거의 불투명한 슬레이트 → 뒤 배경(흰 PDF·칠판)에 상관없이 글자 또렷 */
  background: linear-gradient(135deg, rgba(51,65,85,0.96), rgba(30,41,59,0.96)) !important;
  color: #f1f5f9 !important;                 /* 밝은 글자색 = 다크모드 가독성 */
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(96,165,250,0.38) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
  white-space: nowrap !important;
}
body.vc-in-call #tab-pdf .pdf-anno-bar > button:hover,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open > button:hover {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border-color: rgba(147,197,253,0.7) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
body.vc-in-call #tab-pdf .pdf-anno-bar > button.active,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open > button.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(59,130,246,0.5) !important;
}
/* 색상 피커·굵기 슬라이더·필기자 범례도 투명 바탕 위에서 또렷하게 */
body.vc-in-call #tab-pdf .pdf-anno-bar input[type="color"],
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open input[type="color"] {
  border: 2px solid rgba(148,163,184,0.55) !important;
  background: rgba(15,23,42,0.9) !important;
  border-radius: 8px !important;
}
body.vc-in-call #tab-pdf .pdf-anno-bar #pdf-anno-legend {
  color: #e2e8f0 !important;
  background: rgba(15,23,42,0.85) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* ============================================================
 * 🎨 (2026-07-14 보완) 필기도구 드롭다운을 교재도구(.pdf-controls)와
 *   동일한 '짙은 글래스 회색 패널'로 통일 — 투명 바탕이라 흰 PDF·칠판 위에서
 *   글자가 묻히던 문제를 근본 해결(사장님: 교재도구 회색 배경 참고, 일관 가독성).
 *   ① 드롭다운 컨테이너에 패널 배경 부여(위 transparent 규칙을 덮어씀)
 *   ② 직속(> button)뿐 아니라 중첩된 button·label·span 도 밝은 글자로.
 * ============================================================ */
body.vc-in-call #tab-pdf .pdf-anno-bar,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open {
  background: linear-gradient(135deg, rgba(30,41,59,0.94), rgba(15,23,42,0.94)) !important;
  border: 1px solid rgba(96,165,250,0.22) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}
/* 중첩 버튼(예: span > button)도 교재도구식 슬레이트 pill 로 */
body.vc-in-call #tab-pdf .pdf-anno-bar button,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open button {
  background: linear-gradient(135deg, rgba(51,65,85,0.96), rgba(30,41,59,0.96)) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(96,165,250,0.38) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
/* 라벨·범례·설명 텍스트도 밝게(회색 패널 위 가독성) */
body.vc-in-call #tab-pdf .pdf-anno-bar label,
body.vc-in-call #tab-pdf .pdf-anno-bar span,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open label,
body.vc-in-call #tab-whiteboard .wb-toolbar.mango-wb-dock-open span {
  color: #e2e8f0 !important;
}

/* ============================================================
 * 🎨 (2026-07-17) 교재도구(Textbook Tools) 드롭다운 = 필기도구와 동일한 디자인
 *   [문제] 위 56~80행이 교재도구 컨테이너를 background:transparent + padding:0 으로
 *          만들어, 필기도구만 '짙은 글래스 패널'이고 교재도구는 버튼이 흰 PDF 위에
 *          반투명하게 떠 있어 글자가 묻혔다(사장님: 두 메뉴 배경 똑같이).
 *   [해결] 필기도구(.pdf-anno-bar)에 쓴 패널·pill 규칙을 그대로 교재도구에도 적용.
 *          선택자 특이도가 같고 더 뒤에 오므로 위 transparent 규칙을 덮어쓴다.
 *   [예외] 라이브러리(파랑)·공유 중지(빨강)는 의도된 강조색이라 :not() 으로 보존.
 * ============================================================ */
body.vc-in-call #tab-pdf .pdf-controls {
  background: linear-gradient(135deg, rgba(30,41,59,0.94), rgba(15,23,42,0.94)) !important;
  border: 1px solid rgba(96,165,250,0.22) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}
/* 일반 버튼 — 필기도구와 동일한 슬레이트 pill (거의 불투명 → 어떤 배경에서도 또렷) */
body.vc-in-call #tab-pdf .pdf-controls button:not([onclick*="openTextbookLibrary"]):not([onclick*="pdfStopShare"]),
body.vc-in-call #tab-pdf .pdf-controls > label {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(51,65,85,0.96), rgba(30,41,59,0.96)) !important;
  color: #f1f5f9 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(96,165,250,0.38) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease !important;
  white-space: nowrap !important;
}
body.vc-in-call #tab-pdf .pdf-controls button:not([onclick*="openTextbookLibrary"]):not([onclick*="pdfStopShare"]):hover,
body.vc-in-call #tab-pdf .pdf-controls > label:hover {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border-color: rgba(147,197,253,0.7) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
body.vc-in-call #tab-pdf .pdf-controls button.active:not([onclick*="openTextbookLibrary"]):not([onclick*="pdfStopShare"]) {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(59,130,246,0.5) !important;
}
/* 페이지·줌 정보와 그룹 구분선도 패널 위에서 또렷하게 */
body.vc-in-call #tab-pdf .pdf-controls span,
body.vc-in-call #tab-pdf .pdf-controls label {
  color: #e2e8f0 !important;
}
body.vc-in-call #tab-pdf .pdf-controls #pdf-page-info,
body.vc-in-call #tab-pdf .pdf-controls #pdf-zoom-info {
  color: #e2e8f0 !important;
  background: rgba(15,23,42,0.85) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* ============================================================
 * "시간 정보 없음" 배지 ↔ REC 녹화 배지 크기 동일하게 (데스크탑)
 *  - 모바일(REC 원형)은 건드리지 않도록 데스크탑 폭에서만 적용
 * ============================================================ */
@media (min-width: 901px) {
  #mango-class-time,
  #mango-rec-badge {
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* 아이콘/점 크기도 맞춰 동일한 높이감 */
  #mango-class-time .mct-clock { font-size: 14px !important; line-height: 1 !important; }
  #mango-rec-badge .mango-rec-stop { font-size: 13px !important; line-height: 1 !important; }
}