/* 보호 플레이어 스타일 (설계.md §12.14.5 · §12.14.6).
   동작은 참고 코드를 따랐지만 **보이는 것은 우리 디자인 가이드**(§12.10 — 종이색·잉크색·포인트 1색)다.
   site.css 뒤에 로드한다. /videos/ 에서만 쓴다.

   쌓는 층: iframe 0 · 클릭 가림막 10 · 일시정지 가림막 18 · 컨트롤바 25 ·
            워터마크 30 · 세션/보안 오버레이 60. */

.gk-vp {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.gk-vp.fs { border-radius: 0; }

.gk-vp-frame { position: absolute; inset: 0; z-index: 0; }
.gk-vp-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 클릭 가림막 — 유튜브 로고·제목·"YouTube에서 보기"·우클릭 메뉴를 막는다(§12.14.5-2) */
.gk-vp-shield {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  cursor: pointer;
}

/* 컨트롤바 */
.gk-vp-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  padding: 18px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  transition: opacity 0.25s;
}
.gk-vp.hide-ui .gk-vp-bar { opacity: 0; pointer-events: none; }
.gk-vp.hide-ui { cursor: none; }

.gk-vp-seek { height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.gk-vp-track {
  position: relative; width: 100%; height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px; overflow: hidden;
}
.gk-vp-fill { height: 100%; width: 0; background: #e0788c; border-radius: 3px; }

.gk-vp-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gk-vp-gap { flex: 1 1 auto; }

.gk-vp-b {
  background: none; border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; border-radius: 999px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
  min-height: 32px;
}
.gk-vp-b:hover { background: rgba(255, 255, 255, 0.14); }

.gk-vp-time, .gk-vp-pct {
  color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gk-vp-pct { color: #f0c9d1; }

.gk-vp-rate { position: relative; }
.gk-vp-rate-menu {
  position: absolute; right: 0; bottom: 38px;
  background: rgba(16, 18, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.gk-vp-rate-i {
  background: none; border: 0; color: #fff; font-family: var(--font);
  font-size: 13px; padding: 7px 16px; cursor: pointer; border-radius: 6px; text-align: right;
}
.gk-vp-rate-i:hover { background: rgba(255, 255, 255, 0.14); }

/* 일시정지·종료 가림막(§12.14.5-3).
   일시정지에서는 컨트롤바 60px 를 열어 두어 탐색은 계속할 수 있게 한다. */
.gk-vp-pause {
  position: absolute; top: 0; left: 0; right: 0; bottom: 60px;
  z-index: 18;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gk-vp-pause.ended { bottom: 0; }
.gk-vp-pause-b {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff; border-radius: 999px;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 10px 22px; cursor: pointer; min-height: 44px;
}

/* 워터마크(§12.14.5-4) */
.gk-vm-mark {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  color: #fff; opacity: 0.15; white-space: nowrap;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  transition: top 0.8s ease, left 0.8s ease;
}
@media (prefers-reduced-motion: reduce) { .gk-vm-mark { transition: none; } }

/* 세션·보안 오버레이(§12.14.5-5 · 6) */
.gk-vp-over {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
}
.gk-vp-over-t { color: #fff; font-size: 16px; font-weight: 700; margin: 0; }
.gk-vp-over-b { color: #c8c9cb; font-size: 13.5px; margin: 0; line-height: 1.7; }
.gk-vp-over-warn { color: #f0a5b1; }
.gk-vp-over .gk-btn { margin-top: 4px; }

@media (max-width: 480px) {
  .gk-vp-b { font-size: 12px; padding: 5px 9px; }
  .gk-vp-time, .gk-vp-pct { font-size: 11.5px; }
  .gk-vm-mark { font-size: 11px; }
}