/* ==========================================================================
   player.css — 커스텀 Vanilla 플레이어 스타일
   (Next.js lecture-player/lecture-controls/seek-bar/player-hud/stage-topbar/
    shortcut-help-dialog의 Tailwind 클래스 → 수기 CSS 이식)
   ========================================================================== */

:root {
  --vp-primary: #3182f6;      /* 시크바 played·썸·자막 on 색 */
  --vp-focus: #1a73e8;        /* 포커스 링 — 흰 배경 4.5:1·검정 배경 4.66:1 (WCAG) */
  --vp-navy: #191f28;         /* 에러 포스터 배경 */
  --vp-navy-muted: #b0b8c1;
  --vp-panel: rgba(23, 23, 23, 0.95);  /* neutral-900/95 */
}

/* Tailwind 원본과 동일하게 border-box 전제 (reset.css는 content-box 기본) */
.vp-stage,
.vp-stage * {
  box-sizing: border-box;
}

/* hidden 속성이 display:flex 등 작성 스타일에 지지 않도록 보정 */
.vp-stage [hidden] {
  display: none !important;
}

/* ── 무대(stage) ─────────────────────────────────────────────── */
.vp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  color: #fff;
  outline: none;
  container-type: inline-size; /* 자막 폰트의 cqw 기준 */
}
.vp-stage:focus-visible {
  outline: 2px solid var(--vp-focus);
  outline-offset: -2px;
}

/* 플레이어 내 포커스 링 — 브랜드 파랑 + 흰색 1px 분리 링(이중 링)으로
   밝은/어두운 영상 프레임 어디서든 3:1 대비 확보 (WCAG 2.4.11) */
.vp-btn:focus-visible,
.vp-menu-item:focus-visible,
.vp-cap-radio:focus-visible,
.vp-set-back:focus-visible,
.vp-volume:focus-visible,
.vp-rate-slider:focus-visible {
  outline: 2px solid var(--vp-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.vp-stage:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
/* Safari(webkit prefix) — :fullscreen과 묶으면 셀렉터 전체가 무효라 분리 */
.vp-stage:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

.vp-box {
  position: absolute;
  inset: 0;
}
.vp-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
/* iOS 네이티브 전체화면(webkitEnterFullscreen)에서만 쓰이는 네이티브 큐 스타일.
   배경은 iOS 시스템 자막 박스 하나만 사용 — ::cue에 background를 주면
   시스템 박스와 겹쳐 2중 배경이 된다. 좌우 여백은 VTT 생성 시 NBSP로,
   하단 여백은 큐 설정 line:-2로 처리.
   (iOS 손쉬운 사용 > 자막 스타일 사용자 설정이 있으면 그 설정이 우선됨) */
.vp-box video::cue {
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
}

/* ── 커스텀 자막 (네이티브 ::cue 대신 자체 렌더 — YouTube식) ──── */
.vp-caption {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4.5%;
  z-index: 8;
  text-align: center;
  pointer-events: none;
  transition: bottom 0.3s; /* 컨트롤바 슬라이드(300ms)와 동기 */
  font-size: 22px; /* cqw 미지원 브라우저 폴백 */
  font-size: clamp(15px, 2.6cqw, 34px);
}
/* 컨트롤바 표시 중이면 자막을 그 위로 밀어올림 (overlap 방지) */
.vp-stage:not(.vp--chrome-hidden) .vp-caption {
  bottom: 68px;
}
.vp--error .vp-caption {
  display: none;
}
.vp-caption-row {
  margin-top: 0.18em;
}
.vp-caption-line {
  display: inline; /* 줄바꿈 시 줄마다 박스가 감싸도록 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(8, 8, 8, 0.75);
  color: #fff;
  padding: 0.12em 0.45em;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap;
}

.vp-ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.vp-ico--lg { width: 32px; height: 32px; }
.vp-ico--sm { width: 18px; height: 18px; }
.vp-ico--xs { width: 14px; height: 14px; }
.vp-ico--play { transform: translateX(2px); } /* ▶ 시각 중심 보정 */

/* ── 클릭 레이어 / 중앙 아이콘 / 플래시 ──────────────────────── */
.vp-clicklayer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 56px; /* 컨트롤바 영역(bottom-14)은 덮지 않음 */
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
/* 중앙 배지·플래시는 컨트롤바 포함 전체 영상 기준으로 수직 중앙정렬 */
.vp-center,
.vp-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vp-center-badge,
.vp-flash-badge {
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vp-flash-badge {
  animation: vp-flash-out 0.7s forwards;
  transform-origin: center;
}
@keyframes vp-flash-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}

/* ── HUD (단축키 피드백 배지) ────────────────────────────────── */
.vp-hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px; /* top-14 */
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.vp-hud-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.65);
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
  animation: vp-hud-out 1s forwards;
}
@keyframes vp-hud-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── 컨트롤바 ────────────────────────────────────────────────── */
.vp-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 32px 12px 8px; /* pt-8 px-3 pb-2 */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.45),
    transparent
  );
  color: #fff;
  transition: transform 0.3s;
  will-change: transform;
}
.vp--chrome-hidden .vp-controls {
  transform: translateY(100%);
}
.vp--error .vp-controls,
.vp--error .vp-clicklayer {
  display: none;
}

.vp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vp-spacer {
  flex: 1;
}

.vp-btn {
  position: relative;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
  font-family: inherit;
}
.vp-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.vp-btn:disabled {
  pointer-events: none;
  opacity: 0.4;
}

/* 상태별 아이콘 2벌 토글 */
.vp-i-pause, .vp--playing .vp-i-play { display: none; }
.vp--playing .vp-i-pause { display: block; }
.vp-i-volx, .vp--muted .vp-i-vol { display: none; }
.vp--muted .vp-i-volx { display: block; }
.vp-i-ccfill, .vp--cc-on .vp-i-cc { display: none; }
.vp--cc-on .vp-i-ccfill { display: block; }
.vp--cc-on .vp-cc { color: var(--vp-primary); }
.vp-i-fsx, .vp--fullscreen .vp-i-fs { display: none; }
.vp--fullscreen .vp-i-fsx { display: block; }

/* ── 커스텀 툴팁 (포털 없음 → 전체화면에서도 표시) ───────────── */
.vp-tip {
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: var(--vp-panel);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.15s;
  z-index: 30;
}
.vp-tip--start { left: 0; transform: none; }
.vp-tip--end { left: auto; right: 0; transform: none; }
.vp-btn:hover .vp-tip,
.vp-btn:focus-visible .vp-tip {
  opacity: 1;
}
.vp-btn[aria-expanded="true"] .vp-tip {
  opacity: 0 !important;
}

/* ── 볼륨 ────────────────────────────────────────────────────── */
.vp-volgroup {
  display: flex;
  align-items: center;
}
.vp-volume {
  height: 4px;
  width: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(to right, #fff 100%, rgba(255,255,255,0.3) 100%);
  transition: width 0.2s, opacity 0.2s;
}
.vp-volgroup:hover .vp-volume,
.vp-volume:focus-visible {
  width: 64px;
  opacity: 1;
}
.vp-volume::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background: #fff;
  border: 0;
}
.vp-volume::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #fff;
  border: 0;
}

/* ── 시간 ────────────────────────────────────────────────────── */
.vp-time {
  margin-left: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 시크바 ──────────────────────────────────────────────────── */
.vp-seek {
  position: relative;
  display: flex;
  height: 16px;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  margin-bottom: 4px;
  outline: none;
}
.vp-seek:focus-visible {
  outline: 2px solid var(--vp-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.vp-seek-track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 9999px;
  transition: height 0.15s;
}
.vp-seek:hover .vp-seek-track,
.vp--scrubbing .vp-seek-track {
  height: 5px;
}
.vp-seek-bg,
.vp-seek-buffered,
.vp-seek-played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 9999px;
}
.vp-seek-bg {
  right: 0;
  background: rgba(255, 255, 255, 0.2);
}
.vp-seek-buffered {
  background: rgba(255, 255, 255, 0.4);
  width: 0;
}
.vp-seek-played {
  background: var(--vp-primary);
  width: 0;
}
.vp-seek-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: var(--vp-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s;
}
.vp-seek:hover .vp-seek-thumb,
.vp--scrubbing .vp-seek-thumb {
  opacity: 1;
}
.vp-seek-tip {
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.85);
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  z-index: 30;
}

/* ── 드롭업 메뉴 (재생속도·설정) ─────────────────────────────── */
.vp-menuwrap {
  position: relative;
}
.vp-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  z-index: 20;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--vp-panel);
  color: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vp-menu--rate {
  width: 190px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 16px;
}
.vp-menu--set {
  width: 256px;
  right: 0;
  padding: 6px;
}
.vp-menu-label {
  padding-bottom: 4px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.vp-rate-slider {
  width: 100%;
  height: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(to right, #fff 33%, rgba(255,255,255,0.25) 33%);
}
.vp-rate-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.vp-rate-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  border: 0;
}
.vp-rate-value {
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.vp-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 12px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.vp-menu-item:hover:not(.vp-menu-item--disabled) {
  background: rgba(255, 255, 255, 0.1);
}
.vp-menu-item--disabled {
  opacity: 0.5;
  cursor: default;
}
.vp-menu-item .vp-ico--sm {
  color: rgba(255, 255, 255, 0.85);
}
.vp-menu-value {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.vp-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.1);
}

.vp-set-sub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.vp-set-back {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  font-family: inherit;
}
.vp-set-back:hover {
  background: rgba(255, 255, 255, 0.1);
}
.vp-set-sub-note {
  margin-left: auto;
  font-size: 12px;
  color: var(--vp-primary);
}
.vp-cap-radio {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.vp-cap-radio:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}
.vp-cap-radio:disabled {
  opacity: 0.4;
  cursor: default;
}
.vp-cap-check {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
}
.vp-cap-radio.is-checked .vp-cap-check {
  visibility: visible;
}

/* ── 단축키 도움말 ───────────────────────────────────────────── */
.vp-help {
  position: absolute;
  inset: 0;
  z-index: 40;
}
.vp-help-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.vp-help-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  width: min(26rem, 90%);
  max-height: 85%;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--vp-panel);
  padding: 20px;
  color: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: vp-zoom-in 0.15s ease-out;
}
@keyframes vp-zoom-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.vp-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vp-help-title {
  font-size: 16px;
  font-weight: 700;
}
.vp-help-close {
  width: 32px;
  height: 32px;
}
.vp-help-desc {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.vp-help-list {
  margin-top: 16px;
  list-style: none;
  padding: 0;
}
.vp-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 14px;
}
.vp-help-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.vp-help-label {
  color: rgba(255, 255, 255, 0.85);
}
.vp-help-keys {
  display: flex;
  gap: 4px;
  flex: none;
}
.vp-help-keys kbd {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
}

/* ── 에러 폴백 (CDN/CORS 실패) ───────────────────────────────── */
.vp-error {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--vp-navy);
  padding: 24px;
  text-align: center;
}
.vp-error-badge {
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(49, 130, 246, 0.15);
  color: var(--vp-primary);
  box-shadow: inset 0 0 0 1px rgba(49, 130, 246, 0.3);
}
.vp-error-title {
  font-weight: 600;
  color: #fff;
}
.vp-error-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--vp-navy-muted);
}
.vp-error-src {
  max-width: 28rem;
  font-size: 12px;
  word-break: break-all;
  color: rgba(176, 184, 193, 0.7);
}

/* ── 토스트 (sonner 대체) ────────────────────────────────────── */
.vp-toasts {
  position: absolute;
  right: 12px;
  bottom: 64px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.vp-toast {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: var(--vp-panel);
  padding: 10px 14px;
  font-size: 13px;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  animation: vp-toast-in 0.2s ease-out;
  transition: opacity 0.3s;
}
.vp-toast--out {
  opacity: 0;
}
@keyframes vp-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 컴팩트 모드 (본학습 외 소형 플레이어) ───────────────────── */
.vp--compact .vp-menuwrap--rate,
.vp--compact .vp-cc,
.vp--compact .vp-pip,
.vp--compact .vp-menuwrap--set,
.vp--compact .vp-volume {
  display: none;
}
.vp--compact .vp-controls {
  padding: 20px 6px 4px;
}
.vp--compact .vp-row {
  gap: 2px;
}
.vp--compact .vp-btn {
  width: 28px;
  height: 28px;
}
.vp--compact .vp-btn .vp-ico {
  width: 16px;
  height: 16px;
}
.vp--compact .vp-time {
  font-size: 10px;
  margin-left: 2px;
}
.vp--compact .vp-clicklayer {
  bottom: 40px;
}
.vp--compact .vp-center-badge,
.vp--compact .vp-flash-badge {
  width: 40px;
  height: 40px;
}
.vp--compact .vp-center-badge .vp-ico--lg,
.vp--compact .vp-flash-badge .vp-ico--lg {
  width: 20px;
  height: 20px;
}
.vp--compact .vp-hud {
  top: 8px;
}
.vp--compact .vp-hud-badge {
  font-size: 12px;
  padding: 4px 10px;
}
.vp--compact .vp-error-badge {
  width: 40px;
  height: 40px;
}
.vp--compact .vp-error-src {
  display: none;
}
.vp--compact .vp-error {
  gap: 8px;
  font-size: 12px;
}