/* SCPlayer 스타일 — 원본 /app/eniavod/apps/landing/css/landing.css 발췌 사본
   발췌 범위: 3~5행(자막 @font-face 2건), :root 다크 토큰 중 플레이어 참조분, 94~95행(.art/.art-char),
   105~113행(.btn 계열 — 오류·종료 오버레이 버튼), 222~303행(PLAYER 섹션 전체), 345~350행(.toasts/.toast).
   호스트(unescon 테마)와 전역 충돌을 막기 위해 선택자를 #playerMount/#toasts 로 스코프하고
   @keyframes 이름에 sc- 접두사를 붙였다(규칙 본문·수치는 원본 그대로). 원본 갱신 시 이 파일도 재발췌.
   폰트 URL 은 /media/fonts/... (nginx → eniavod:8300 프록시). */

/* 플레이어 자막 폰트 — 번인 렌더와 동일 페이스. 로컬 설치 우선, 없으면 서버 WOFF2. */
@font-face{font-family:'Noto Sans CJK KR';font-weight:400;font-display:swap;src:local('Noto Sans CJK KR'),url('/media/fonts/NotoSansCJKkr-Regular.woff2') format('woff2')}
@font-face{font-family:'Noto Sans CJK KR';font-weight:700;font-display:swap;src:local('Noto Sans CJK KR Bold'),url('/media/fonts/NotoSansCJKkr-Bold.woff2') format('woff2')}

/* 플레이어 스코프 토큰 — 원본 :root + :root[data-theme="dark"] 중 플레이어가 참조하는 변수만.
   호스트 테마 토큰(--verd/--ink 등)과 이름이 겹치지 않으며, 스코프 밖에는 영향이 없다. */
#playerMount,#toasts{
  --mono:"SF Mono","JetBrains Mono","D2Coding",Consolas,ui-monospace,monospace;
  --accent:#7c5cff; --accent-2:#a78bff; --accent-3:#4d7cff; --accent-rgb:124,92,255;
  --grad:linear-gradient(135deg,#7c5cff 0%,#4d7cff 100%);
  --gold:#ffb648;
  --tr:.22s cubic-bezier(.4,0,.2,1);
  --surface:#14141c; --surface-2:#1c1c27;
  --border:rgba(255,255,255,.09); --border-s:rgba(255,255,255,.2);
  --text:#f3f3f8; --text-2:#bcbccc; --muted:#7d7d90;
  --shadow:0 18px 50px rgba(0,0,0,.55); --shadow-sm:0 4px 16px rgba(0,0,0,.4);
}
/* 원본 리셋 중 플레이어 내부에 필요한 부분(호스트 base.css 는 button 여백/테두리를 남긴다) */
#playerMount button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none;padding:0}
#playerMount video{display:block;max-width:100%}

/* ============ Common (artOf 포스터) ============ */
#playerMount .art{position:absolute;inset:0;overflow:hidden}
#playerMount .art .art-char{position:absolute;right:5%;bottom:-16%;font-weight:900;line-height:1;pointer-events:none;letter-spacing:-2px}

/* ============ Buttons (오류·종료 오버레이) ============ */
#playerMount .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:12px;font-size:14.5px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:var(--tr);white-space:nowrap}
#playerMount .btn svg{width:18px;height:18px}
#playerMount .btn:hover{border-color:var(--border-s);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
#playerMount .btn.primary{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(var(--accent-rgb),.4)}
#playerMount .btn.primary:hover{filter:brightness(1.1)}
#playerMount .btn.ghost-d{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(4px)}
#playerMount .btn.ghost-d:hover{background:rgba(255,255,255,.18)}
#playerMount .btn.sm{height:38px;padding:0 16px;font-size:13px;border-radius:10px}
#playerMount .btn.sm svg{width:15px;height:15px}

/* ============ PLAYER ============ */
#playerMount .player{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 24px 70px rgba(0,0,0,.6);isolation:isolate;user-select:none}
#playerMount .player:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%}
#playerMount .player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
/* 자막 오버레이 — 커스텀 렌더러(편집기 지오메트리 미러). video 위·포스터/컨트롤 아래(DOM 순서 스택) */
#playerMount .pl-subs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#playerMount .pl-subcue{position:absolute;display:flex;align-items:center;overflow:hidden}
#playerMount .pl-subcue-text{width:100%;white-space:pre;font-family:'Noto Sans CJK KR','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif}
#playerMount .pl-subcue.plain{display:block;white-space:pre;font-family:'Noto Sans CJK KR','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif}
#playerMount .pl-poster{position:absolute;inset:0;overflow:hidden;z-index:1}
#playerMount .pl-poster::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 42%,transparent 52%,rgba(0,0,0,.5) 100%)}
#playerMount .pl-poster .mark-tl{position:absolute;top:16px;left:18px;font-size:10px;font-weight:800;letter-spacing:2px;color:rgba(244,244,250,.55);display:flex;align-items:center;gap:7px;z-index:2}
#playerMount .pl-poster .mark-tl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2)}
#playerMount .player.playing .pl-poster{display:none}
#playerMount .pl-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
#playerMount .pl-bigplay{width:86px;height:86px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 44px rgba(0,0,0,.6),0 0 0 10px rgba(var(--accent-rgb),.2);transition:var(--tr);pointer-events:auto}
#playerMount .pl-bigplay:hover{transform:scale(1.08)}
#playerMount .pl-bigplay svg{width:34px;height:34px;margin-left:5px}
#playerMount .player.playing .pl-bigplay{display:none}
#playerMount .pl-spinner{width:60px;height:60px;border-radius:50%;border:4px solid rgba(244,244,250,.2);border-top-color:var(--accent-2);animation:sc-spin .8s linear infinite;display:none}
#playerMount .player.buffering .pl-spinner{display:block}
#playerMount .player.buffering .pl-bigplay{display:none}
@keyframes sc-spin{to{transform:rotate(360deg)}}
#playerMount .pl-error{position:absolute;inset:0;z-index:16;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(8,8,14,.92);color:#f0f0f6;text-align:center;padding:24px}
#playerMount .player.errored .pl-error{display:flex}
#playerMount .pl-error svg{width:44px;height:44px;color:var(--gold);opacity:.9}
#playerMount .pl-error h4{font-size:18px;font-weight:800}
#playerMount .pl-error p{font-size:13px;color:rgba(244,244,250,.65);max-width:340px;line-height:1.6}
#playerMount .pl-skip-fx{position:absolute;top:0;bottom:0;width:32%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6;color:#f0f0f6}
#playerMount .pl-skip-fx.l{left:0;background:radial-gradient(60% 60% at 30% 50%,rgba(0,0,0,.5),transparent)}
#playerMount .pl-skip-fx.r{right:0;background:radial-gradient(60% 60% at 70% 50%,rgba(0,0,0,.5),transparent)}
#playerMount .pl-skip-fx.show{opacity:1}
#playerMount .pl-skip-fx b{font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:6px}
#playerMount .pl-skip-fx svg{width:26px;height:26px}
/* 화면 클릭 재생/멈춤 반투명 아이콘 플래시 (중앙, 확대되며 사라짐) */
#playerMount .pl-toggle-fx{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#f0f0f6;opacity:0;pointer-events:none;z-index:6}
#playerMount .pl-toggle-fx svg{width:32px;height:32px}
#playerMount .pl-toggle-fx.show{animation:sc-togglefx .5s ease-out forwards}
@keyframes sc-togglefx{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
/* controls */
#playerMount .pl-ctrl{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:8;transition:opacity .3s;opacity:1}
#playerMount .player.hidectrl .pl-ctrl{opacity:0;pointer-events:none}
#playerMount .player.hidectrl{cursor:none}
#playerMount .pl-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;margin-bottom:6px}
#playerMount .pl-seek .track{position:relative;width:100%;height:5px;border-radius:4px;background:rgba(244,244,250,.22);transition:height .15s}
#playerMount .pl-seek:hover .track{height:8px}
#playerMount .pl-seek .buffer{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:rgba(244,244,250,.32);width:0}
#playerMount .pl-seek .played{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--grad);width:0}
#playerMount .pl-seek .knob{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);transform:translate(-50%,-50%) scale(0);transition:transform .15s;z-index:3;left:0}
#playerMount .pl-seek:hover .knob{transform:translate(-50%,-50%) scale(1)}
#playerMount .seek-tip{position:absolute;bottom:26px;transform:translateX(-50%);background:rgba(10,10,16,.95);border:1px solid rgba(244,244,250,.18);color:#f0f0f6;border-radius:9px;padding:6px 11px;font-size:11px;white-space:nowrap;pointer-events:none;display:none;z-index:9;font-family:var(--mono);font-weight:700}
#playerMount .pl-row{display:flex;align-items:center;gap:4px;color:#f0f0f6}
#playerMount .pbtn{width:38px;height:38px;border-radius:9px;color:#f0f0f6;display:flex;align-items:center;justify-content:center;transition:var(--tr);position:relative}
#playerMount .pbtn:hover{background:rgba(244,244,250,.15)}
#playerMount .pbtn svg{width:20px;height:20px}
#playerMount .pbtn.wide{width:auto;padding:0 11px;font-size:12.5px;font-weight:800;gap:6px}
#playerMount .pbtn.on{color:var(--accent-2);background:rgba(var(--accent-rgb),.16)}
#playerMount .pl-time{font-family:var(--mono);font-size:12px;color:rgba(244,244,250,.85);padding:0 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
#playerMount .pl-time .cur{color:#fff;font-weight:700}
#playerMount .pl-sp{flex:1}
#playerMount .vol-wrap{display:flex;align-items:center}
#playerMount .vol-slider{width:0;overflow:hidden;transition:width .25s;display:flex;align-items:center}
#playerMount .vol-wrap:hover .vol-slider,#playerMount .vol-wrap:focus-within .vol-slider{width:80px}
#playerMount .vol-slider input{width:70px;accent-color:var(--accent-2);height:4px;cursor:pointer;margin-left:6px}
#playerMount .qbadge{font-family:var(--mono);font-size:10.5px;color:rgba(244,244,250,.6);padding:0 8px;white-space:nowrap;display:flex;flex-direction:column;line-height:1.35;text-align:right}
#playerMount .qbadge b{color:var(--accent-2);font-size:11px}
@media(max-width:640px){#playerMount .qbadge,#playerMount .btn-pip{display:none}#playerMount .pl-ctrl{padding:34px 10px 8px}}
/* settings popover */
#playerMount .pl-pop{position:absolute;right:12px;bottom:64px;width:260px;max-height:60%;overflow-y:auto;background:rgba(12,12,18,.97);border:1px solid rgba(244,244,250,.16);border-radius:14px;padding:8px;z-index:20;display:none;box-shadow:0 18px 50px rgba(0,0,0,.6);backdrop-filter:blur(10px)}
#playerMount .pl-pop.open{display:block;animation:sc-popIn .18s cubic-bezier(.34,1.4,.64,1)}
@keyframes sc-popIn{from{transform:translateY(8px) scale(.97);opacity:0}}
#playerMount .pl-pop .pp-title{font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:rgba(244,244,250,.5);padding:8px 12px 5px;text-transform:uppercase}
#playerMount .pl-pop .pp-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 12px;border-radius:9px;color:#f0f0f6;font-size:13px;font-weight:600;transition:var(--tr);text-align:left}
#playerMount .pl-pop .pp-item:hover{background:rgba(244,244,250,.1)}
#playerMount .pl-pop .pp-item .chk{color:var(--accent-2);font-weight:800;font-size:12px}
#playerMount .pl-pop .pp-item small{color:rgba(244,244,250,.5);font-size:10.5px;margin-left:8px;font-family:var(--mono)}
/* end overlay */
#playerMount .pl-end{position:absolute;inset:0;background:rgba(8,8,14,.9);z-index:15;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#f0f0f6;text-align:center;padding:20px}
#playerMount .pl-end.show{display:flex;animation:sc-fadeIn .3s}
@keyframes sc-fadeIn{from{opacity:0}}
#playerMount .pl-end .ne-lbl{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--accent-2)}
#playerMount .pl-end h4{font-size:20px;max-width:420px;line-height:1.35;font-weight:800}

/* ============ toast (SC.toast) ============
   호스트 hybrid.js 가 전역 .toast(고정·opacity:0) 규칙을 주입하므로 #toasts 스코프로 되돌린다. */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:200;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
#toasts .toast{position:relative;left:auto;bottom:auto;transform:none;opacity:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-s);border-radius:30px;padding:12px 22px;box-shadow:var(--shadow);font-size:13.5px;font-weight:600;color:var(--text);animation:sc-tIn .3s cubic-bezier(.34,1.4,.64,1)}
#toasts .toast svg{width:16px;height:16px;color:var(--accent-2)}
@keyframes sc-tIn{from{transform:translateY(16px);opacity:0}}
#toasts .toast.out{animation:sc-tOut .25s forwards}
@keyframes sc-tOut{to{transform:translateY(16px);opacity:0}}