/* Site-made control bar over YouTube embeds and site videos (see assets/js/yt-player.js). */
.kj-player{--kj-accent:#9d8cff;--kj-ratio:16 / 9;--kj-crop:160px;position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:68dvh;overflow:hidden;background:#000;outline:none;user-select:none;-webkit-user-select:none;container-type:size}
.kj-player:focus-visible{box-shadow:inset 0 0 0 2px var(--kj-accent)}
.kj-player>video.kj-player-video{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;object-fit:contain;background:#000;pointer-events:none}
/* YouTube draws its own title, channel, "AI" notice and logo along the player's top and bottom edges.
   The box below has the clip's exact shape; the iframe inside is taller by --kj-crop at each end, so the
   clip still fills the box while those edges (and everything YouTube puts there) fall outside and are cut off. */
.kj-player-media{position:absolute;left:50%;top:50%;width:min(100cqw,calc(100cqh * var(--kj-ratio)));aspect-ratio:var(--kj-ratio);overflow:hidden;transform:translate(-50%,-50%);pointer-events:none}
.kj-player-media>iframe.kj-player-video{position:absolute;left:0;top:calc(-1 * var(--kj-crop));display:block;width:100%;height:calc(100% + 2 * var(--kj-crop));max-height:none;aspect-ratio:auto;border:0;background:#000;pointer-events:none}
.kj-player-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none}
.kj-player-hit:focus{outline:none}


.kj-player-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 16px 10px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.42) 55%,transparent);opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;pointer-events:none}
.kj-player.is-active .kj-player-bar,.kj-player.is-seeking .kj-player-bar,.kj-player-bar:focus-within:has(:focus-visible){opacity:1;transform:none;pointer-events:auto}

.kj-player-progress{position:relative;height:16px;margin:0 2px 2px;display:flex;align-items:center;touch-action:none;outline:none}
.kj-player-progress::before,.kj-player-loaded,.kj-player-played{content:'';position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;transform-origin:left center;transition:height .12s,margin .12s}
.kj-player-progress::before{background:rgba(255,255,255,.22)}
.kj-player-loaded{background:rgba(255,255,255,.38);transform:scaleX(0)}
.kj-player-played{background:var(--kj-accent);transform:scaleX(0)}
.kj-player-thumb{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(157,140,255,.35);transform:scale(0);transition:transform .12s}
.kj-player-progress:hover::before,.kj-player-progress:hover .kj-player-loaded,.kj-player-progress:hover .kj-player-played,.kj-player.is-seeking .kj-player-progress::before,.kj-player.is-seeking .kj-player-loaded,.kj-player.is-seeking .kj-player-played{height:5px;margin-top:-2.5px}
.kj-player-progress:hover .kj-player-thumb,.kj-player-progress:focus-visible .kj-player-thumb,.kj-player.is-seeking .kj-player-thumb{transform:scale(1)}

.kj-player-row{display:flex;align-items:center;gap:4px;min-width:0;color:#fff;font:500 12px/1 'DM Sans',sans-serif}
.kj-player-btn{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;-webkit-appearance:none;appearance:none;transition:background .15s}
.kj-player-btn:hover,.kj-player-btn:focus-visible{background:rgba(255,255,255,.12);outline:none}
.kj-player-btn svg{width:20px;height:20px;fill:currentColor}

.kj-player-volume{display:flex;align-items:center}
.kj-player-range{--fill:100%;width:0;height:16px;margin:0;opacity:0;background:transparent;-webkit-appearance:none;appearance:none;transition:width .18s,opacity .18s,margin .18s}
.kj-player-volume:hover .kj-player-range,.kj-player-range:focus-visible{width:72px;margin:0 8px 0 2px;opacity:1}
.kj-player-range:focus{outline:none}
.kj-player-range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#fff var(--fill),rgba(255,255,255,.28) var(--fill))}
.kj-player-range::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;border-radius:50%;background:#fff;-webkit-appearance:none;appearance:none}
.kj-player-range::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.28)}
.kj-player-range::-moz-range-progress{height:3px;border-radius:3px;background:#fff}
.kj-player-range::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#fff}

.kj-player-time{flex:none;margin-left:6px;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.kj-player-spacer{flex:1}

/* Icons swap by the button's state; both stay in the markup so a click never lands on a removed node. */
.kj-player-btn[data-state="play"] .kj-icon-pause,.kj-player-btn[data-state="pause"] .kj-icon-play,
.kj-player-btn[data-state="sound"] .kj-icon-muted,.kj-player-btn[data-state="muted"] .kj-icon-sound,
.kj-player-btn[data-state="full"] .kj-icon-exitFull,.kj-player-btn[data-state="exitFull"] .kj-icon-full{display:none}
/* Scoped tightly: the home reel styles every ".v2-reel a" as a big card. */
.kj-player .kj-player-bar a.kj-player-yt{display:inline-flex;align-items:center;gap:7px;flex:none;width:auto;height:30px;margin:0 4px;padding:0 12px 0 10px;overflow:visible;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.06);box-shadow:none;color:#fff;text-decoration:none;font:600 11px/1 'Pretendard','DM Sans',sans-serif;letter-spacing:-.01em;transform:none;transition:background .15s,border-color .15s}
.kj-player .kj-player-bar a.kj-player-yt:hover,.kj-player .kj-player-bar a.kj-player-yt:focus-visible{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.14);transform:none;outline:none}
.kj-player .kj-player-bar a.kj-player-yt svg{width:18px;height:18px;fill:#ff0033}
.kj-player .kj-player-bar a.kj-player-yt span{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit}

.kj-player.is-fullscreen{max-height:none;aspect-ratio:auto;width:100vw;height:100vh}
.kj-player.is-fullscreen .kj-player-bar{padding:48px 28px 18px}

@media(max-width:640px){
  .kj-player-bar{padding:26px 8px 6px}
  .kj-player-row{gap:0;font-size:11px}
  .kj-player-btn{width:32px;height:32px}
  .kj-player-volume .kj-player-range{display:none}
  .kj-player .kj-player-bar a.kj-player-yt span{display:none}
  .kj-player .kj-player-bar a.kj-player-yt{width:32px;height:32px;padding:0;justify-content:center;border:0;background:transparent}
}
/* Touch screens have no hover: keep the bar reachable whenever the video is paused. */
@media(hover:none){
  .kj-player.is-paused .kj-player-bar{opacity:1;transform:none;pointer-events:auto}
}

/* Home reel: the frame already sets the 16:9 box. */
.v2-inline-frame .kj-player{height:100%;max-height:none}
/* The site's custom cursor lives outside the fullscreen element, so use the system pointer there (hidden while idle). */
:root .kj-player.is-fullscreen,:root .kj-player.is-fullscreen *{cursor:auto!important}
:root .kj-player.is-fullscreen:not(.is-active),:root .kj-player.is-fullscreen:not(.is-active) *{cursor:none!important}
/* Hover time over the progress bar: the site cursor carries it normally; in fullscreen that cursor is gone, so show a tip. */
.kj-player-tip{position:absolute;bottom:18px;left:0;padding:5px 8px;border-radius:6px;background:rgba(16,14,30,.86);color:#fff;font:600 11px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .12s}
.kj-player.is-fullscreen .kj-player-progress:hover .kj-player-tip,.kj-player.is-fullscreen.is-seeking .kj-player-tip{opacity:1}