/* 지페 · player.css — 영상 플레이어 (js/player.js). 토큰은 css/site.css (--blue, --out, --spring). */
.gpv{--g-blue:var(--blue,#1e4dd8);--g-glass:rgba(17,19,23,.72);--g-dim:rgba(255,255,255,.74);
  position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;isolation:isolate;background:#000;color:#fff;
  box-shadow:0 22px 44px -22px rgba(25,31,40,.42);font:600 13px/1.2 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:0}
.gpv:focus-visible{outline:3px solid var(--g-blue);outline-offset:3px}
/* 무대: 폰 화면 녹화가 잘리지 않게 contain (페이지의 .vcard2 video / .rv video 규칙보다 우선) */
.gpv .gpv__v{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:0;object-fit:contain;background:#000;cursor:pointer}
.gpv.is-idle.is-playing .gpv__v,.gpv.is-idle.is-playing{cursor:none}
.gpv:fullscreen{border-radius:0;aspect-ratio:auto;box-shadow:none}
.gpv:-webkit-full-screen{border-radius:0;aspect-ratio:auto;box-shadow:none}

/* 큰 재생 버튼 · 로딩 · 오류 */
.gpv__big{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--g-blue);cursor:pointer;
  box-shadow:0 14px 34px -8px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .2s,transform .3s var(--spring,ease),visibility 0s .3s}
.gpv__big svg{width:30px;height:30px;margin-left:3px}
.gpv.is-ended .gpv__big svg{margin-left:0}
.gpv.is-fresh:not(.is-playing):not(.is-err) .gpv__big,.gpv.is-ended:not(.is-err) .gpv__big{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.gpv__big:hover{transform:scale(1.07)!important}
.gpv__big:active{transform:scale(.96)!important}
.gpv__spin{position:absolute;left:50%;top:50%;z-index:2;display:none;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;pointer-events:none;animation:gpvspin .8s linear infinite}
.gpv.is-wait:not(.is-err) .gpv__spin{display:block}
@keyframes gpvspin{to{transform:rotate(360deg)}}
.gpv__err{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;background:rgba(17,19,23,.88);font-size:15px;line-height:1.5}
.gpv.is-err .gpv__err{display:flex}
.gpv__retry{height:40px;padding:0 20px;border:0;border-radius:12px;background:#fff;color:var(--ink,#191f28);font:inherit;font-weight:800;cursor:pointer}
.gpv__retry:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 컨트롤 바: 하단에서 띄운 어두운 유리 */
.gpv__bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 8px;border-radius:14px;color:#fff;background:var(--g-glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.09);transition:opacity .25s,transform .3s var(--out,ease)}
.gpv.is-idle .gpv__bar{opacity:0;transform:translateY(8px);pointer-events:none}
.gpv.is-err .gpv__bar{display:none}
.gpv__seek{position:relative;flex:1 1 56px;min-width:0;height:22px;margin:0 8px 0 4px}
.gpv__time{margin:0 6px 0 4px;color:var(--g-dim);font-size:13px;white-space:nowrap}
.gpv__cur{color:#fff}
.gpv__b{position:relative;z-index:3;display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}
.gpv__b svg{width:22px;height:22px;pointer-events:none}
.gpv__b:hover{background:rgba(255,255,255,.14)}
.gpv__b:active{transform:scale(.92)}
.gpv__b:focus-visible,.gpv__menu button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.gpv__spdb{width:auto;min-width:44px;padding:0 8px;font-size:13px}

/* 재생 위치 슬라이더: input[type=range] + 아래에 깔린 막대(버퍼 · 재생 채움) */
.gpv__rng,.gpv__vrng{-webkit-appearance:none;appearance:none;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:none}
.gpv__rng{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.gpv__trk{position:absolute;left:8px;right:8px;top:50%;z-index:1;height:4px;margin-top:-2px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.26);pointer-events:none;transition:transform .15s}
.gpv__rng:hover~.gpv__trk,.gpv__rng:active~.gpv__trk,.gpv__rng:focus-visible~.gpv__trk{transform:scaleY(1.6)}
.gpv__buf,.gpv__fill{position:absolute;inset:0;display:block;transform:scaleX(0);transform-origin:0 50%}
.gpv__buf{background:rgba(255,255,255,.4)}
.gpv__fill{background:var(--g-blue)}
.gpv__rng::-webkit-slider-runnable-track{height:22px;background:transparent;border:0}
.gpv__rng::-moz-range-track{height:22px;background:transparent;border:0}
.gpv__rng::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:3px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5);transform:scale(.72);transition:transform .15s var(--spring,ease)}
.gpv__rng::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5);transform:scale(.72);transition:transform .15s}
.gpv__rng:hover::-webkit-slider-thumb,.gpv__rng:active::-webkit-slider-thumb,.gpv__rng:focus-visible::-webkit-slider-thumb{transform:scale(1.2)}
.gpv__rng:hover::-moz-range-thumb,.gpv__rng:active::-moz-range-thumb,.gpv__rng:focus-visible::-moz-range-thumb{transform:scale(1.2)}
.gpv__rng:focus-visible{outline:2px solid #fff;outline-offset:0;border-radius:11px}
.gpv__tip{position:absolute;bottom:calc(100% + 18px);left:0;padding:4px 8px;border-radius:8px;background:rgba(17,19,23,.94);color:#fff;font-size:12px;line-height:1;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .12s}
@media (hover:hover){.gpv__seek:hover .gpv__tip{opacity:1}}

/* 음량 (PC에서 슬라이더 펼침) */
.gpv__vol{position:relative;z-index:3;display:flex;align-items:center}
.gpv__vrng{width:0;height:22px;opacity:0;transition:width .2s,opacity .2s,margin .2s}
.gpv__vol:hover .gpv__vrng,.gpv__vol:focus-within .gpv__vrng{width:64px;margin:0 8px 0 2px;opacity:1}
.gpv__vrng::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--v,100%),rgba(255,255,255,.28) 0)}
.gpv__vrng::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.28)}
.gpv__vrng::-moz-range-progress{height:4px;border-radius:4px;background:#fff}
.gpv__vrng::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.gpv__vrng::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.gpv__vrng:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* 재생 속도 메뉴 */
.gpv__spd{position:relative;z-index:3}
.gpv__menu{position:absolute;right:0;bottom:calc(100% + 12px);display:none;min-width:104px;padding:6px;border-radius:14px;background:rgba(17,19,23,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px -8px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.1)}
.gpv.is-menu .gpv__menu{display:block}
.gpv__menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#fff;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.gpv__menu button:hover{background:rgba(255,255,255,.12)}
.gpv__menu button[aria-checked="true"]{background:rgba(255,255,255,.16)}
.gpv__menu button[aria-checked="true"]::after{content:"";width:6px;height:11px;margin:-3px 3px 0 0;border:solid #fff;border-width:0 2.4px 2.4px 0;border-radius:1px;transform:rotate(40deg)}

/* 상태별 숨김 */
.gpv.is-silent .gpv__vol,.gpv.no-fs .gpv__fs{display:none}
.gpv--m .gpv__vrng,.gpv--m .gpv__spd{display:none}   /* 좁은 화면: 음량 슬라이더 · 속도는 숨김(확대하면 나타남) */
.gpv--s .gpv__seek{order:-1;flex:0 0 100%;margin:0 0 2px}
.gpv--s .gpv__time{margin-right:auto}
.gpv--s .gpv__tip{bottom:calc(100% + 14px)}
.gpv--m .gpv__big{top:calc(50% - 12px);width:60px;height:60px;margin:-30px 0 0 -30px}   /* 바가 큰 버튼을 덮지 않게 조금 위로 */
.gpv--m .gpv__big svg{width:26px;height:26px}
.gpv--s .gpv__big{top:calc(50% - 34px)}   /* 2단 바 */
.gpv--xs .gpv__bar{left:8px;right:8px;bottom:8px}
.gpv--xs .gpv__big{width:52px;height:52px;margin:-26px 0 0 -26px}
.gpv--xs .gpv__big svg{width:22px;height:22px}
.gpv--xs .gpv__time{margin:0 4px}

/* 터치 기기: 44px 터치 영역 (슬라이더는 위아래로 눈에 안 보이게 확장) */
@media (pointer:coarse){
  .gpv__b{width:44px;height:44px}
  .gpv__spdb{width:auto}
  .gpv__seek{height:24px}
  .gpv__rng{top:-10px;bottom:auto;height:calc(100% + 20px)}   /* 44px 입력 상자를 막대 가운데에 (height 가 있으면 bottom 은 무시되므로 height 를 직접 지정) */
  .gpv__rng::-webkit-slider-runnable-track{height:44px}
  .gpv__rng::-moz-range-track{height:44px}
  .gpv__rng::-webkit-slider-thumb{width:20px;height:20px;margin-top:12px;transform:scale(1)}
  .gpv__rng::-moz-range-thumb{width:20px;height:20px;transform:scale(1)}
  .gpv__trk{left:10px;right:10px}
  .gpv__vol{display:none}
  .gpv__menu button{height:44px}
}

/* 전체 화면(확대): 무대가 화면을 채우고 바는 가운데에 */
.gpv.is-fs .gpv__bar{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:auto;max-width:960px;margin:0 auto;padding:8px 14px 6px;font-size:14px}
.gpv.is-fs .gpv__b{width:44px;height:44px}
.gpv.is-fs .gpv__time{font-size:14px}
.gpv.is-fs .gpv__bar,.gpv.is-fs .gpv__big{zoom:calc(var(--gpv-k,1) / var(--zm,1))}   /* 넓은 창의 페이지 zoom(--zm)을 상쇄 */
.gpv.is-fs .gpv__big{width:88px;height:88px;margin:-44px 0 0 -44px}
.gpv.is-fs .gpv__big svg{width:36px;height:36px}

/* 페이지 안 배치 */
.vcard2 .gpv{border-radius:22px}
.rv .gpv{position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#fff}   /* 폰 프레임 안: 화면과 같은 흰 바탕 */
.rv .gpv .gpv__v{background:transparent}
.rv .gpv.is-fs{background:#000}
.rv .gpv .gpv__bar{left:10px;right:10px;bottom:20px}
.rv .gpv.is-fs .gpv__bar{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom))}
.rv .gpv:focus-visible{outline-offset:-3px}
.is-story .rv .phone{transform:none;will-change:auto}   /* 영상 폰은 마우스 기울임 제외 — 기울면 슬라이더 · 버튼이 커서 아래에서 움직여 클릭이 빗나감 */

@media (prefers-reduced-motion:reduce){
  .gpv *,.gpv *::before,.gpv *::after{transition:none!important}
  .gpv__spin{animation-duration:2.4s}
}
@media (forced-colors:active){
  .gpv__bar,.gpv__menu{background:Canvas;color:CanvasText;border:1px solid CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .gpv__b,.gpv__menu button,.gpv__time,.gpv__cur{color:ButtonText}
  .gpv__trk{background:GrayText}
  .gpv__buf{background:transparent}
  .gpv__fill{background:Highlight;forced-color-adjust:none}
  .gpv__rng::-webkit-slider-thumb,.gpv__vrng::-webkit-slider-thumb{background:ButtonText;border:1px solid Canvas}
  .gpv__big{background:ButtonFace;color:ButtonText;border:2px solid ButtonText}
  .gpv:focus-visible,.gpv__b:focus-visible,.gpv__rng:focus-visible,.gpv__vrng:focus-visible{outline-color:Highlight}
}