/*
  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}

.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-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:22px;
  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(74%,520px);
  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{
  padding:18px 20px 15px;
  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-body{
  margin:16px 18px 0;
  min-height:130px;
  max-height:260px;
  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-actions{
  padding:16px 18px 18px;
  display:flex;
  justify-content:flex-end;
}
.txp-player .txp-info-close{
  appearance:none;
  -webkit-appearance:none;
  min-width:76px;
  height:36px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  color:#fff;
  background:rgba(255,255,255,.10);
  font:700 13px/1 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",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: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-dialog{width:92%;max-height:76%}
  .txp-player .txp-info-title{padding:14px 15px 12px;font-size:15px}
  .txp-player .txp-info-body{margin:12px 13px 0;max-height:190px;padding:12px;font-size:12px;line-height:1.6}
  .txp-player .txp-info-actions{padding:12px 13px 14px}
}