/*
  Trans-ACT HTML5 Player
  모든 스타일은 .txp-player 아래로만 제한되어 홈페이지 CSS와 충돌하지 않습니다.
*/
.txp-player{
  --txp-accent:#ff0038;
  --txp-caption-top:80%;
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:14px;
  background:#000;
  color:#fff;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
  isolation:isolate;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.txp-player,
.txp-player *{box-sizing:border-box}

.txp-player .txp-video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.txp-player .txp-caption{
  position:absolute;
  z-index:5;
  left:7%;
  right:7%;
  top:var(--txp-caption-top);
  transform:translateY(-50%);
  pointer-events:none;
  text-align:center;
  white-space:pre-line;
  color:#fff;
  font-size:clamp(17px,1.8vw,18px);
  font-weight:700;
  line-height:1.42;
  letter-spacing:-.02em;
  text-shadow:0 2px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity .08s linear;
}

.txp-player .txp-caption.txp-caption-visible{opacity:1}

.txp-player .txp-caption:not(:empty){
  display:block;
  width:max-content;
  max-width:86%;
  left:50%;
  right:auto;
  transform:translate(-50%,-50%);
  padding:.13em .38em .18em;
  border-radius:3px;
  background:rgba(0,0,0,.58);
}

.txp-player .txp-center-play{
  appearance:none;
  position:absolute;
  z-index:6;
  inset:0;
  width:72px;
  height:72px;
  margin:auto;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(2px);
  cursor:pointer;
  opacity:1;
  transition:opacity .18s ease,transform .16s ease,background .16s ease;
}

.txp-player .txp-center-play:hover{background:rgba(0,0,0,.58);transform:scale(1.05)}
.txp-player .txp-center-play.txp-center-hidden{opacity:0;pointer-events:none}
.txp-player .txp-center-play svg{width:34px;height:34px;fill:currentColor;margin-left:3px}

.txp-player .txp-loading{
  position:absolute;
  z-index:7;
  inset:0;
  width:44px;
  height:44px;
  margin:auto;
  border:4px solid rgba(255,255,255,.26);
  border-top-color:#fff;
  border-radius:50%;
  display:none;
  animation:txp-spin .75s linear infinite;
}
.txp-player.txp-is-waiting .txp-loading{display:block}

.txp-player .txp-controls{
  position:absolute;
  z-index:10;
  left:0;
  right:0;
  bottom:0;
  padding:58px 18px 10px;
  color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.08) 15%,rgba(0,0,0,.72) 100%);
  opacity:1;
  transition:opacity .18s ease;
}

.txp-player.txp-hide-controls{cursor:none}
.txp-player.txp-hide-controls .txp-controls{opacity:0;pointer-events:none}

.txp-player .txp-seek{
  position:relative;
  height:14px;
  margin:0 2px 2px;
  display:flex;
  align-items:center;
  touch-action:none;
  cursor:pointer;
}

.txp-player .txp-seek-base,
.txp-player .txp-seek-buffer,
.txp-player .txp-seek-current{
  position:absolute;
  left:0;
  height:4px;
  border-radius:999px;
  transition:height .08s ease;
}
.txp-player .txp-seek-base{right:0;background:rgba(255,255,255,.32)}
.txp-player .txp-seek-buffer{width:0;background:rgba(255,255,255,.48)}
.txp-player .txp-seek-current{width:0;background:var(--txp-accent)}

.txp-player .txp-seek-knob{
  position:absolute;
  left:0;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--txp-accent);
  transform:translateX(-50%);
  opacity:1;
  transition:transform .08s ease;
}

.txp-player .txp-seek:hover .txp-seek-base,
.txp-player .txp-seek:hover .txp-seek-buffer,
.txp-player .txp-seek:hover .txp-seek-current{height:5px}
.txp-player .txp-seek:hover .txp-seek-knob{transform:translateX(-50%) scale(1.08)}

.txp-player .txp-control-row{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.txp-player .txp-left-controls,
.txp-player .txp-right-controls{
  display:flex;
  align-items:center;
  min-width:0;
  gap:2px;
}

.txp-player .txp-btn{
  appearance:none;
  -webkit-appearance:none;
  width:38px;
  height:38px;
  padding:7px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:transparent;
  box-shadow:none;
  outline:none;
  cursor:pointer;
  line-height:1;
  transition:background .12s ease,transform .12s ease,color .12s ease;
}

.txp-player .txp-btn:hover,
.txp-player .txp-btn:focus-visible{background:rgba(255,255,255,.14)}
.txp-player .txp-btn:active{transform:scale(.92)}
.txp-player .txp-btn svg{display:block;width:23px;height:23px;fill:currentColor}
.txp-player .txp-btn.txp-active{color:#fff}

.txp-player .txp-volume-box{
  height:38px;
  display:flex;
  align-items:center;
}

.txp-player .txp-volume-slider-box{
  width:0;
  overflow:hidden;
  opacity:0;
  transition:width .16s ease,opacity .14s ease;
}

.txp-player .txp-volume-box:hover .txp-volume-slider-box,
.txp-player .txp-volume-box:focus-within .txp-volume-slider-box{
  width:88px;
  opacity:1;
}

.txp-player .txp-volume-slider{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:76px;
  height:3px;
  margin:0 7px 0 2px;
  padding:0;
  border:0;
  border-radius:99px;
  outline:0;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  accent-color:#fff;
}

.txp-player .txp-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:11px;
  height:11px;
  border-radius:50%;
  border:0;
  background:#fff;
}
.txp-player .txp-volume-slider::-moz-range-thumb{
  width:11px;
  height:11px;
  border:0;
  border-radius:50%;
  background:#fff;
}

.txp-player .txp-time{
  margin-left:5px;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  color:#fff;
  font-size:13px;
  font-weight:600;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.txp-player .txp-time-sep{opacity:.72}
.txp-player .txp-duration{opacity:.92}

/* 배속: CC 버튼 왼쪽에 위치하는 위쪽 선택 메뉴 */
.txp-player .txp-speed-box{position:relative;display:flex;align-items:center;z-index:26}
.txp-player .txp-btn.txp-speed{
  width:46px;
  padding:4px 2px;
  font:700 12px/1 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  white-space:nowrap;
}
.txp-player .txp-speed-menu{
  position:absolute;
  right:0;
  bottom:38px;
  width:94px;
  overflow-y:auto;
  padding:5px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(28,28,28,.97);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  z-index:30;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(7px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
}
.txp-player .txp-speed-menu.txp-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.txp-player .txp-speed-item{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-height:33px;
  padding:7px 8px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#f7f7f7;
  font:600 13px/1.3 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  text-align:center;
  cursor:pointer;
}
.txp-player .txp-speed-item:hover,
.txp-player .txp-speed-item:focus-visible{background:rgba(255,255,255,.12)}
.txp-player .txp-speed-item.txp-selected{background:rgba(255,255,255,.12);font-weight:800}

.txp-player .txp-subtitle-box{position:relative;display:flex;align-items:center;z-index:25}

.txp-player .txp-subtitle-menu{
  position:absolute;
  right:-6px;
  bottom:34px;
  width:max-content;
  min-width:190px;
  max-width:min(320px,70vw);
  max-height:260px;
  overflow:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(28,28,28,.97);
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  z-index:30;
  opacity:0;
  visibility:hidden;
  transform:translateY(7px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
}

.txp-player .txp-subtitle-menu.txp-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.txp-player .txp-subtitle-item{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:38px;
  padding:8px 12px 8px 8px;
  border:0;
  border-radius:6px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:5px;
  color:#f7f7f7;
  background:transparent;
  font:600 13px/1.35 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  text-align:left;
  cursor:pointer;
}

.txp-player .txp-subtitle-item:hover{background:rgba(255,255,255,.11)}
.txp-player .txp-subtitle-item.txp-selected{background:rgba(255,255,255,.08)}
.txp-player .txp-subtitle-check{opacity:0;color:#fff;font-size:14px;text-align:center}
.txp-player .txp-subtitle-item.txp-selected .txp-subtitle-check{opacity:1}
.txp-player .txp-subtitle-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@keyframes txp-spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .txp-player{border-radius:10px}
  .txp-player .txp-controls{padding:44px 8px 6px}
  .txp-player .txp-btn{width:34px;height:34px;padding:6px}
  .txp-player .txp-btn svg{width:21px;height:21px}
  .txp-player .txp-stop{display:none}
  .txp-player .txp-time{font-size:11px;margin-left:2px;gap:3px}
  .txp-player .txp-volume-slider-box{display:none}
  .txp-player .txp-caption{font-size:clamp(14px,3.5vw,18px);max-width:92%}
  .txp-player .txp-btn.txp-speed{width:41px;font-size:11px}
  .txp-player .txp-speed-menu{bottom:34px}
  .txp-player .txp-subtitle-menu{right:-38px;min-width:165px;max-width:75vw}
}

/* =========================================================
   Video information button + centered modal
   ========================================================= */
.txp-player .txp-info-btn{
  appearance:none;
  -webkit-appearance:none;
  height:32px;
  margin-left:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  color:#fff;
  background:rgba(28,28,32,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.18);
  font:700 12px/1 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
}
.txp-player .txp-info-btn:hover,
.txp-player .txp-info-btn:focus-visible{background:rgba(53,53,60,.96);border-color:rgba(255,255,255,.24)}
.txp-player .txp-info-btn:active{transform:scale(.96)}
.txp-player .txp-info-btn span{font-size:18px;line-height:1;margin-top:-1px;opacity:.82}
.txp-player .txp-info-btn[hidden]{display:none!important}

.txp-player .txp-info-overlay{
  position:absolute;
  z-index:60;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(0,0,0,.54);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease;
}
.txp-player .txp-info-overlay.txp-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.txp-player .txp-info-dialog{
  width:min(560px,78%);
  max-height:min(520px, 100%);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(180deg,rgba(31,31,35,.98),rgba(16,16,19,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(8px) scale(.985);
  transition:transform .16s ease;
}
.txp-player .txp-info-overlay.txp-open .txp-info-dialog{transform:translateY(0) scale(1)}
.txp-player .txp-info-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  padding:8px 14px 8px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:17px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.02em;
}
.txp-player .txp-info-title span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.txp-player .txp-info-body{
  margin:16px 18px 16px;
  min-height:0;
  max-height:260px;
  flex:1 1 auto;
  overflow-y:auto;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  outline:none;
  color:#e9e9ec;
  background:rgba(0,0,0,.28);
  font:500 13px/1.7 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  white-space:pre-wrap;
  user-select:text;
  -webkit-user-select:text;
}
.txp-player .txp-info-body:focus{border-color:rgba(255,255,255,.20)}
.txp-player .txp-info-body::-webkit-scrollbar{width:8px}
.txp-player .txp-info-body::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px}
.txp-player .txp-info-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:8px}
.txp-player .txp-info-close{
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.10);
  font:500 24px/1 Arial,sans-serif;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
}
.txp-player .txp-info-close:hover,
.txp-player .txp-info-close:focus-visible{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24)}
.txp-player .txp-info-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.txp-player .txp-info-close:active{transform:scale(.96)}

@media (max-width:640px){
  .txp-player .txp-info-btn{height:30px;margin-left:4px;padding:0 10px;font-size:11px}
  .txp-player .txp-info-overlay{padding:8px}
  .txp-player .txp-info-dialog{width:92%;max-height:100%}
  .txp-player .txp-info-title{padding:7px 10px 7px 15px;font-size:15px}
  .txp-player .txp-info-body{margin:12px 13px 12px;max-height:190px;padding:12px;font-size:12px;line-height:1.6}
}


/* =========================================================
   SEEK HOVER PREVIEW — buffered ranges only
   ========================================================= */
.txp-player .txp-seek{overflow:visible}
.txp-player .txp-seek-preview{
  --txp-preview-width:180px;
  --txp-preview-height:101px;
  position:absolute;
  left:50%;
  bottom:18px;
  width:var(--txp-preview-width);
  height:calc(var(--txp-preview-height) + 28px);
  transform:translate(-50%,8px);
  z-index:30;
  padding:5px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:9px;
  background:rgba(5,8,15,.94);
  box-shadow:0 12px 32px rgba(0,0,0,.58),0 0 0 1px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .10s ease,transform .10s ease,visibility .10s;
}
.txp-player .txp-seek-preview.txp-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.txp-player .txp-seek-preview-canvas{
  display:block;
  width:100%;
  height:var(--txp-preview-height);
  border-radius:5px;
  background:#05070b;
  object-fit:cover;
}
.txp-player .txp-seek-preview:not(.txp-has-frame) .txp-seek-preview-canvas{
  background:
    linear-gradient(110deg,rgba(255,255,255,.035) 8%,rgba(255,255,255,.075) 18%,rgba(255,255,255,.035) 33%) #05070b;
  background-size:200% 100%;
  animation:txpPreviewLoading 1s linear infinite;
}
@keyframes txpPreviewLoading{to{background-position-x:-200%}}
.txp-player .txp-seek-preview-time{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 3px #000;
}
.txp-player .txp-preview-video{
  position:absolute!important;
  left:-99999px!important;
  top:-99999px!important;
  width:2px!important;
  height:2px!important;
  opacity:.001!important;
  pointer-events:none!important;
}
@media(max-width:700px){
  .txp-player .txp-seek-preview{
    --txp-preview-width:144px;
    --txp-preview-height:81px;
  }
}
@media(hover:none),(pointer:coarse){
  .txp-player .txp-seek-preview{display:none!important}
}

/* MOT: YOLOv8n / ONNX Runtime Web (WASM). Overlay never captures player input. */
.txp-player .txp-mot-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}
.txp-player .txp-btn.txp-mot{
  width:46px;
  height:34px;
  padding:4px 3px;
  border-radius:7px;
  color:rgba(255,255,255,.9);
  font:800 12px/1 sans-serif;
  letter-spacing:.3px;
}
.txp-player .txp-btn.txp-mot.txp-mot-on{
  color:#0f241c;
  background:#32e6a8;
  box-shadow:0 0 0 1px rgba(50,230,168,.3),0 0 14px rgba(50,230,168,.30);
}
.txp-player .txp-btn.txp-mot.txp-mot-on:hover{background:#65f2c1}
.txp-player .txp-mot-status{
  position:absolute;
  z-index:8;
  top:12px;
  left:50%;
  max-width:calc(100% - 26px);
  transform:translateX(-50%);
  padding:8px 11px;
  border-radius:8px;
  background:rgba(0,0,0,.83);
  color:#fff;
  font:600 12px/1.5 sans-serif;
  text-align:center;
  pointer-events:none;
}
.txp-player .txp-mot-status[hidden]{display:none!important}
@media(max-width:640px){
  .txp-player .txp-btn.txp-mot{width:36px;height:31px;font-size:10px}
  .txp-player .txp-mot-status{top:6px;font-size:10px;padding:5px 7px}
}

/* Preserve all toolbar actions without collisions on narrow phone widths. */
@media(max-width:420px){
  .txp-player .txp-control-row{gap:4px}
  .txp-player .txp-left-controls,.txp-player .txp-right-controls{gap:1px}
  .txp-player .txp-info-btn{
    width:26px;
    min-width:26px;
    height:26px;
    padding:0;
    margin-left:1px;
    justify-content:center;
    font-size:0;
  }
  .txp-player .txp-info-btn::before{content:'ⓘ';font:700 16px/1 Arial,sans-serif}
  .txp-player .txp-info-btn span{display:none}
  .txp-player .txp-btn.txp-mot{width:33px}
  .txp-player .txp-btn.txp-speed{width:37px}
}