/* ============================================================
   theme.css - MyPlayer 베이스 스타일시트
   YouTube 스타일 독립 overlay 컨트롤, CSS Variables 기반
   ============================================================ */

/* -------------------------------------------------------------------
   디자인 토큰 (CSS Variables)
   ------------------------------------------------------------------- */
.myplayer {
  /* ── 컬러 팔레트 ── */
  --myplayer-bg: #000000;
  --myplayer-text-color: #ffffff;
  --myplayer-accent: #00FF88;               /* 메인 강조색 */
  --myplayer-progress-track: rgba(255, 255, 255, 0.2);
  --myplayer-progress-filled: var(--myplayer-accent);
  --myplayer-progress-buffered: rgba(255, 255, 255, 0.35);
  --myplayer-progress-hover: rgba(255, 255, 255, 0.5);
  --myplayer-progress-thumb: var(--myplayer-accent);
  --myplayer-volume-track: rgba(255, 255, 255, 0.25);
  --myplayer-volume-filled: #ffffff;
  --myplayer-btn-hover: rgba(255, 255, 255, 0.1);
  --myplayer-big-play-bg: rgba(0, 0, 0, 0.6);
  --myplayer-skip-ad-bg: #FFFFFF;           /* 광고 건너뛰기 배경 - 흰색 */
  --myplayer-skip-ad-text: #000000;         /* 광고 건너뛰기 텍스트 - 검정 */
  --myplayer-settings-bg: #19191CE6;        /* 설정 패널 배경 */
  --myplayer-settings-text: #FFFFFF;        /* 설정 패널 텍스트 */
  --myplayer-settings-font-size: 14px;      /* 설정 패널 폰트 크기 */
  --myplayer-settings-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --myplayer-settings-padding: 8px 0px;     /* 설정 패널 안쪽 여백 */
  --myplayer-settings-width: 230px;         /* 설정 패널 너비 */
  --myplayer-settings-max-height: 280px;    /* 설정 패널 최대 높이 (스크롤) */
  --myplayer-scene-preview-bg: rgba(0, 0, 0, 0.85);
  --myplayer-gradient-bottom: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  --myplayer-big-play-size: 100px;
  --myplayer-big-play-icon-size: 48px;
  --myplayer-context-menu-bg: #19191CE6;    /* 우클릭 메뉴 배경 */
  --myplayer-context-menu-text: #FFFFFF;    /* 우클릭 메뉴 텍스트 */
  --myplayer-context-menu-font-size: 14px;
  --myplayer-context-menu-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --myplayer-context-menu-padding: 8px 0px;

  /* ── 레이아웃 / 치수 ── */
  --myplayer-controls-height: 48px;
  --myplayer-progress-height: 5px;
  --myplayer-progress-hover-height: 7px;
  --myplayer-progress-thumb-size: 16px;
  --myplayer-btn-size: 44px;
  --myplayer-icon-size: 24px;
  --myplayer-font-size: 14px;
  --myplayer-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --myplayer-border-radius: 0px;
  --myplayer-transition-speed: 0.2s;

  /* ── 간격 ── */
  --myplayer-padding-h: 16px;
  --myplayer-gap: 8px;
  --myplayer-time-margin-left: 12px;
  --myplayer-progress-side-padding: 16px;  /* 프로그레스 바 좌우 여백 (YouTube 스타일) */

  /* ── Z-index 계층 ── */
  --myplayer-z-video: 1;
  --myplayer-z-ad-video: 2;
  --myplayer-z-ad-progress: 3;
  --myplayer-z-gradient: 3;
  --myplayer-z-controls: 10;
  --myplayer-z-progress: 11;
  --myplayer-z-big-play: 12;
  --myplayer-z-skip-ad: 13;
  --myplayer-z-scene-preview: 14;
  --myplayer-z-settings-panel: 20;
  --myplayer-z-context-menu: 25;

  /* ── 기본 변수 적용 ── */
  position: relative;
  width: 100%;
  max-width: 100%;
  background: var(--myplayer-bg);
  font-family: var(--myplayer-font-family);
  font-size: var(--myplayer-font-size);
  color: var(--myplayer-text-color);
  line-height: 1.4;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--myplayer-border-radius);
  direction: ltr;
  cursor: default;
}

/* -------------------------------------------------------------------
   비디오 레이어
   ------------------------------------------------------------------- */
.myplayer__video-layer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--myplayer-bg);
  cursor: pointer;
}

.myplayer__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: var(--myplayer-z-video);
}

/* 광고 비디오 - 광고 전용 플레이어 */
.myplayer__ad-video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: var(--myplayer-z-ad-video);
}

.myplayer.is-ad-playing .myplayer__ad-video {
  display: block;
}

.myplayer.is-ad-playing .myplayer__video {
  opacity: 0;
  pointer-events: none;
}

/* 광고 재생 중 메인 프로그레스 바, 그라데이션, 큰 재생 버튼만 숨김 (컨트롤은 유지) */
.myplayer.is-ad-playing .myplayer__progress-bar,
.myplayer.is-ad-playing .myplayer__gradient-bottom,
.myplayer.is-ad-playing .myplayer__big-play-btn {
  display: none;
}

/* 광고 재생 중 컨트롤은 보이지만 재생바 조작 불가 */
.myplayer.is-ad-playing .myplayer__controls {
  display: flex;
}

/* -------------------------------------------------------------------
   광고 전용 프로그레스 바 (노란색)
   ------------------------------------------------------------------- */
.myplayer__ad-progress-bar {
  display: none;
  position: absolute;
  bottom: var(--myplayer-controls-height);
  left: var(--myplayer-progress-side-padding);
  right: var(--myplayer-progress-side-padding);
  height: 5px;
  z-index: var(--myplayer-z-ad-progress);
  cursor: default;
  pointer-events: none;
}

.myplayer.is-ad-playing .myplayer__ad-progress-bar {
  display: block;
}

.myplayer__ad-progress-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  overflow: hidden;
}

.myplayer__ad-progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #FFD600;  /* 노란색 */
  border-radius: 0;
  transition: width 0.1s linear;
}

/* -------------------------------------------------------------------
   광고주 정보 (광고 재생 시 좌측 재생바 바로 위, 퍼지는 그림자)
   ------------------------------------------------------------------- */
.myplayer__ad-info {
  display: none;
  position: absolute;
  bottom: calc(var(--myplayer-controls-height) + var(--myplayer-progress-height) + 16px + 12px);
  left: var(--myplayer-progress-side-padding);
  z-index: var(--myplayer-z-skip-ad);
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.7), 0 0 48px rgba(0, 0, 0, 0.5);
}

.myplayer.is-ad-playing .myplayer__ad-info {
  display: flex;
}

.myplayer__ad-info-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.myplayer__ad-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--myplayer-text-color);
}

.myplayer__ad-info-link {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.15s ease;
}

.myplayer__ad-info-link:hover {
  color: var(--myplayer-accent);
  text-decoration: underline;
}

/* -------------------------------------------------------------------
   하단 그라데이션 오버레이
   ------------------------------------------------------------------- */
.myplayer__gradient-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: var(--myplayer-gradient-bottom);
  z-index: var(--myplayer-z-gradient);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--myplayer-transition-speed) ease;
}

/* -------------------------------------------------------------------
   중앙 큰 재생 버튼
   ------------------------------------------------------------------- */
.myplayer__big-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: var(--myplayer-big-play-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--myplayer-z-big-play);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--myplayer-transition-speed) ease,
              visibility var(--myplayer-transition-speed) ease,
              transform 0.15s ease;
  pointer-events: auto;
}

.myplayer__big-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.myplayer__big-play-btn .myplayer__big-play-icon {
  width: 36px;
  height: 36px;
  margin-left: 3px;
}

.myplayer.is-playing .myplayer__big-play-btn,
.myplayer.is-ad-playing .myplayer__big-play-btn {
  opacity: 0;
  visibility: hidden;
}

/* -------------------------------------------------------------------
   Seek 인디케이터 (좌/우 이동 시 표시되는 아이콘)
   검정 그라데이션 + 아이콘(박스 없음) + +/-5 텍스트
   ------------------------------------------------------------------- */
.myplayer__seek-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: var(--myplayer-z-big-play);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.myplayer__seek-indicator.is-visible {
  display: flex;
  opacity: 1;
}

.myplayer__seek-indicator--left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.myplayer__seek-indicator--right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

.myplayer__seek-indicator-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.myplayer__seek-indicator-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--myplayer-text-color);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* -------------------------------------------------------------------
   광고 건너뛰기 버튼 - 완전히 둥글고 흰색, 외곽선 없음
   ------------------------------------------------------------------- */
.myplayer__skip-ad-btn {
  position: absolute;
  bottom: 80px;
  right: 20px;
  z-index: var(--myplayer-z-skip-ad);
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--myplayer-skip-ad-bg);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-skip-ad-text);
  transition: background 0.15s ease, transform 0.15s ease;
  pointer-events: auto;
}

.myplayer__skip-ad-btn:hover {
  background: rgba(230, 230, 230, 1);
}

.myplayer.is-ad-playing .myplayer__skip-ad-btn.is-visible {
  display: flex;
}

.myplayer__skip-ad-text {
  display: none;
}

.myplayer__skip-ad-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 600;
  color: var(--myplayer-skip-ad-text);
}

/* 건너뛰기 가능 상태 - 버튼 확장 */
.myplayer__skip-ad-btn.is-visible {
  width: auto;
  border-radius: 24px;
  padding: 10px 20px;
}

.myplayer__skip-ad-btn.is-visible .myplayer__skip-ad-text {
  display: inline;
}

/* -------------------------------------------------------------------
   씬 미리보기 (Progress bar hover thumbnail)
   캡처 박스와 시간 분리, 더 큰 사이즈
   ------------------------------------------------------------------- */
.myplayer__scene-preview {
  position: absolute;
  bottom: 70px;
  transform: translateX(-50%);
  z-index: var(--myplayer-z-scene-preview);
  display: none;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.myplayer__scene-preview.is-visible {
  display: flex;
}

/* 캡처 박스 - 위쪽에만 */
.myplayer__scene-preview-box {
  background: var(--myplayer-scene-preview-bg);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.myplayer__scene-canvas {
  width: 200px;
  height: 112px;
  display: block;
}

/* 시간 정보 - 박스 없이 아래에 별도 표시, 더 큰 사이즈 */
.myplayer__scene-time {
  padding: 4px 0 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--myplayer-text-color);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  text-align: center;
}

/* -------------------------------------------------------------------
   프로그레스 바 (독립 overlay) - 좌우 패딩 적용 (YouTube 스타일)
   ------------------------------------------------------------------- */
.myplayer__progress-bar {
  position: absolute;
  bottom: var(--myplayer-controls-height);
  left: var(--myplayer-progress-side-padding);
  right: var(--myplayer-progress-side-padding);
  height: calc(var(--myplayer-progress-height) + 16px);
  padding: 6px 0;
  cursor: pointer;
  z-index: var(--myplayer-z-progress);
  outline: none;
  transition: padding 0.15s ease;
}

.myplayer__progress-bar:hover {
  padding: 3px 0;
}

.myplayer__progress-track {
  position: relative;
  width: 100%;
  height: var(--myplayer-progress-height);
  background: var(--myplayer-progress-track);
  border-radius: 0;
  overflow: visible;
  transition: height 0.15s ease;
}

.myplayer__progress-bar:hover .myplayer__progress-track {
  height: var(--myplayer-progress-hover-height);
}

.myplayer__progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--myplayer-progress-buffered);
  border-radius: 0;
}

.myplayer__progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--myplayer-progress-filled);
  border-radius: 0;
  z-index: 1;
  transition: width 0.1s linear;
}

.myplayer__progress-hover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--myplayer-progress-hover);
  border-radius: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.myplayer__progress-bar:hover .myplayer__progress-hover {
  opacity: 1;
}

.myplayer__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: var(--myplayer-progress-thumb-size);
  height: var(--myplayer-progress-thumb-size);
  background: var(--myplayer-progress-thumb);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 2;
  transition: transform 0.15s ease, left 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}

.myplayer__progress-bar:hover .myplayer__progress-thumb,
.myplayer__progress-bar:active .myplayer__progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* -------------------------------------------------------------------
   컨트롤 영역 (독립 overlay, 하단 배치)
   ------------------------------------------------------------------- */
.myplayer__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--myplayer-controls-height);
  padding: 0 var(--myplayer-padding-h);
  gap: var(--myplayer-gap);
  z-index: var(--myplayer-z-controls);
}

.myplayer__controls-left,
.myplayer__controls-right {
  display: flex;
  align-items: center;
  gap: var(--myplayer-gap);
}

/* -------------------------------------------------------------------
   공통 버튼 스타일
   ------------------------------------------------------------------- */
.myplayer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--myplayer-btn-size);
  height: var(--myplayer-btn-size);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--myplayer-text-color);
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--myplayer-transition-speed) ease;
  flex-shrink: 0;
}

.myplayer__btn:hover {
  background: var(--myplayer-btn-hover);
}

.myplayer__btn:focus-visible {
  outline: 2px solid var(--myplayer-accent);
  outline-offset: 1px;
}

.myplayer__btn svg,
.myplayer__btn img {
  width: var(--myplayer-icon-size);
  height: var(--myplayer-icon-size);
  pointer-events: none;
}

/* 일시정지/볼륨/설정 아이콘 크기 확대 */
.myplayer__play-btn img,
.myplayer__volume-btn img,
.myplayer__settings-btn img {
  width: 28px;
  height: 28px;
}

/* ── 재생/일시정지 아이콘 토글 ── */
.myplayer__icon-pause { display: none; }
.myplayer.is-playing .myplayer__icon-play { display: none; }
.myplayer.is-playing .myplayer__icon-pause { display: inline-block; }

/* 광고 재생 중에는 항상 play 아이콘만 표시 (일시정지 아이콘 숨김) */
.myplayer.is-ad-playing .myplayer__icon-pause { display: none !important; }
.myplayer.is-ad-playing .myplayer__icon-play { display: inline-block !important; }

/* ── 볼륨 아이콘 3단계 ── */
.myplayer__icon-volume-low { display: none; }
.myplayer__icon-volume-muted { display: none; }
/* 기본: volume_max 표시 */
.myplayer.is-muted .myplayer__icon-volume-high { display: none; }
.myplayer.is-muted .myplayer__icon-volume-low { display: none; }
.myplayer.is-muted .myplayer__icon-volume-muted { display: inline-block; }
/* 볼륨 0 초과 0.5 이하: volume_lv1 */
.myplayer.is-volume-low .myplayer__icon-volume-high { display: none; }
.myplayer.is-volume-low .myplayer__icon-volume-muted { display: none; }
.myplayer.is-volume-low .myplayer__icon-volume-low { display: inline-block; }
/* 볼륨 0.5 초과: volume_max (기본) */

/* ── 전체화면 아이콘 토글 ── */
.myplayer__icon-fullscreen-exit { display: none; }
.myplayer.is-fullscreen .myplayer__icon-fullscreen-enter { display: none; }
.myplayer.is-fullscreen .myplayer__icon-fullscreen-exit { display: inline-block; }

/* ── 자막 아이콘 (단일 cc.svg, opacity 방식) ── */
.myplayer__icon-cc {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.myplayer.is-cc-on .myplayer__icon-cc {
  opacity: 1;
}

/* -------------------------------------------------------------------
   볼륨 슬라이더
   ------------------------------------------------------------------- */
.myplayer__volume-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.myplayer__volume-slider-wrapper {
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  transition: width var(--myplayer-transition-speed) ease;
}

.myplayer__volume-group:hover .myplayer__volume-slider-wrapper {
  width: 72px;
}

.myplayer__volume-slider {
  width: 72px;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--myplayer-volume-track);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0;
}

.myplayer__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 18px;
  background: var(--myplayer-volume-filled);
  border-radius: 3px;
  cursor: pointer;
  border: none;
}

.myplayer__volume-slider::-moz-range-thumb {
  width: 12px;
  height: 18px;
  background: var(--myplayer-volume-filled);
  border-radius: 3px;
  cursor: pointer;
  border: none;
}

/* -------------------------------------------------------------------
   시간 표시
   ------------------------------------------------------------------- */
.myplayer__time-display {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--myplayer-text-color);
  opacity: 0.9;
  flex-shrink: 0;
  margin-left: var(--myplayer-time-margin-left);
  font-weight: 400;
  font-size: var(--myplayer-font-size);
  letter-spacing: 0.02em;
}

.myplayer__time-separator {
  opacity: 0.45;
  margin: 0 4px;
}

/* -------------------------------------------------------------------
   설정 드롭다운 패널 - YouTube 스타일 탭
   재생바 위쪽, 우측 정렬 (끝선을 재생바 끝선과 맞춤)
   max-height + overflow-y: auto 로 무한 확장 방지
   ------------------------------------------------------------------- */
.myplayer__settings-group {
  position: relative;
}

.myplayer__settings-panel {
  position: absolute;
  bottom: calc(var(--myplayer-controls-height) + var(--myplayer-progress-height) + 16px + 8px);
  right: calc(-1 * var(--myplayer-progress-side-padding));
  width: var(--myplayer-settings-width);
  max-height: var(--myplayer-settings-max-height);
  background: var(--myplayer-settings-bg);
  border-radius: 12px;
  padding: var(--myplayer-settings-padding);
  z-index: var(--myplayer-z-settings-panel);
  display: none;
  flex-direction: column;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
  overflow-y: auto;
  overflow-x: hidden;
}

.myplayer__settings-panel.is-open {
  display: flex;
}

/* 메인 메뉴 & 서브 메뉴 공통 */
.myplayer__settings-main-menu,
.myplayer__settings-sub-menu {
  display: flex;
  flex-direction: column;
}

/* 설정 항목 - 우측 상태값 우측정렬 */
.myplayer__settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
}

.myplayer__settings-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-label {
  color: var(--myplayer-settings-text);
  opacity: 0.9;
  flex-shrink: 0;
}

.myplayer__settings-value {
  color: var(--myplayer-settings-text);
  opacity: 0.7;
  font-weight: 400;
  text-align: right;
  flex: 1;
  margin-left: 12px;
}

.myplayer__settings-arrow {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: 4px;
}

/* 서브 메뉴 헤더 */
.myplayer__settings-sub-header {
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.myplayer__settings-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--myplayer-settings-text);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}

.myplayer__settings-back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-back-btn svg {
  width: 20px;
  height: 20px;
}

.myplayer__settings-sub-title {
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
  font-weight: 500;
  margin-left: 4px;
}

/* 속도 옵션 */
.myplayer__settings-speed-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
}

.myplayer__settings-speed-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-speed-option.is-active {
  color: var(--myplayer-accent);
  font-weight: 500;
}

/* 화질 옵션 */
.myplayer__settings-quality-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
}

.myplayer__settings-quality-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-quality-option.is-active {
  color: var(--myplayer-accent);
  font-weight: 500;
}

/* 자막 옵션 */
.myplayer__settings-subtitle-option {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
}

.myplayer__settings-subtitle-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-subtitle-option.is-active {
  color: var(--myplayer-accent);
  font-weight: 500;
}

/* 자막 상세 설정 */
.myplayer__settings-subtitle-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-settings-font-size);
  font-family: var(--myplayer-settings-font-family);
  color: var(--myplayer-settings-text);
}

.myplayer__settings-subtitle-detail-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__settings-subtitle-detail-item .myplayer__settings-label {
  flex-shrink: 0;
}

.myplayer__settings-subtitle-detail-item .myplayer__settings-value {
  text-align: right;
  flex: 1;
  margin-left: 12px;
}

.myplayer__settings-reset-label {
  color: var(--myplayer-accent) !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------
   우클릭 컨텍스트 메뉴 - 설정 패널과 동일한 색상 정보 공유
   ------------------------------------------------------------------- */
.myplayer__context-menu {
  position: absolute;
  z-index: var(--myplayer-z-context-menu);
  display: none;
  flex-direction: column;
  background: var(--myplayer-context-menu-bg);
  border-radius: 12px;
  padding: var(--myplayer-context-menu-padding);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--myplayer-context-menu-font-size);
  font-family: var(--myplayer-context-menu-font-family);
  color: var(--myplayer-context-menu-text);
  min-width: 200px;
}

.myplayer__context-menu.is-open {
  display: flex;
}

.myplayer__context-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: var(--myplayer-context-menu-font-size);
  font-family: var(--myplayer-context-menu-font-family);
  color: var(--myplayer-context-menu-text);
}

.myplayer__context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.myplayer__context-label {
  color: var(--myplayer-context-menu-text);
  opacity: 0.9;
}

.myplayer__context-toggle {
  color: var(--myplayer-context-menu-text);
  opacity: 0.7;
  font-size: 13px;
}

.myplayer__context-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* -------------------------------------------------------------------
   UI 숨김/표시 (마우스 호버 제거 시, 전체화면 좌측 끝)
   ------------------------------------------------------------------- */
/* 기본: 컨트롤 표시 */
.myplayer__controls,
.myplayer__progress-bar,
.myplayer__gradient-bottom,
.myplayer__ad-progress-bar {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* UI 숨김 상태 */
.myplayer.is-ui-hidden .myplayer__controls,
.myplayer.is-ui-hidden .myplayer__progress-bar,
.myplayer.is-ui-hidden .myplayer__gradient-bottom,
.myplayer.is-ui-hidden .myplayer__ad-progress-bar {
  opacity: 0;
  pointer-events: none;
}

/* UI 숨김 시 광고 건너뛰기 버튼과 광고주 정보도 부드럽게 아래로 이동 */
.myplayer__skip-ad-btn,
.myplayer__ad-info {
  transition: bottom 0.3s ease, opacity 0.3s ease;
}

.myplayer.is-ui-hidden .myplayer__skip-ad-btn {
  bottom: 12px;
}

.myplayer.is-ui-hidden .myplayer__ad-info {
  bottom: 12px;
  opacity: 0;
  pointer-events: none;
}

/* UI 숨김 시 얇은 광고 프로그레스 바 표시 (바닥에 붙은 얇은 띠) */
.myplayer__ad-progress-bar-thin {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--myplayer-z-ad-progress);
  cursor: default;
  pointer-events: none;
}

.myplayer.is-ad-playing.is-ui-hidden .myplayer__ad-progress-bar-thin {
  display: block;
}

.myplayer__ad-progress-track-thin {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0;
  overflow: hidden;
}

.myplayer__ad-progress-filled-thin {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #FFD600;
  border-radius: 0;
  transition: width 0.1s linear;
}

/* 전체화면에서 커서가 좌측 끝에 있을 때 UI 숨김 */
.myplayer.is-fullscreen.is-cursor-left-edge .myplayer__controls,
.myplayer.is-fullscreen.is-cursor-left-edge .myplayer__progress-bar,
.myplayer.is-fullscreen.is-cursor-left-edge .myplayer__gradient-bottom,
.myplayer.is-fullscreen.is-cursor-left-edge .myplayer__ad-progress-bar {
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------
   전체화면 상태
   ------------------------------------------------------------------- */
.myplayer.is-fullscreen .myplayer__video-layer {
  aspect-ratio: auto;
  height: 100vh;
}

.myplayer.is-fullscreen {
  border-radius: 0;
}

.myplayer.is-fullscreen .myplayer__gradient-bottom {
  height: 180px;
}

/* -------------------------------------------------------------------
   자막 위치 - 재생바와 연동 (부드러운 이동)
   ------------------------------------------------------------------- */
.myplayer ::cue {
  visibility: visible;
  transition: all 0.35s ease;
}

/* UI가 보일 때: 자막을 위로 (line: -2) - CSS 변수로 부드럽게 */
.myplayer:not(.is-ui-hidden) ::cue {
  line: -2;
}

/* UI 숨김 상태: 자막 기본 위치 */
.myplayer.is-ui-hidden ::cue {
  line: auto;
}

/* -------------------------------------------------------------------
   접근성
   ------------------------------------------------------------------- */
.myplayer__progress-bar:focus-visible {
  outline: 2px solid var(--myplayer-accent);
  outline-offset: 2px;
}