/* ==========================================================================
   player.css — 유튜브 플레이어 부품 · 단계 목록 = 영상 장 (B2 · DESIGN 4-8 · 4-9)
   - 겉면 = 16:9 · 모서리 18(sm 14) · 그림자 sh-2 · 차콜 원 72(sm 56) · 흰 ▶ · 올리면 주황 고리
   - 누르면 같은 상자 · 같은 크기 · 같은 모서리 안에서 재생(무대 .tx-player__stage)
   - 상태 표시 · 대역 표시는 화면 0(주석 층에만) · 그라데이션 · 빛 번짐 0
   - .tx-steps 진행선 · 지금 장 꼴은 이 파일 하나(B3 docs.css · B4 home.css 는 자리 · 여백만 — 빌더 점검 M4)
   ========================================================================== */

/* ── 상자 ── */
.tx-player{
  position:relative; display:block; margin:0; width:100%;
  aspect-ratio:16/9; border-radius:var(--r-card, 18px); overflow:hidden;
  background:#1B1F23; box-shadow:var(--sh-2); isolation:isolate;
  contain:layout paint;
}
.tx-player.is-small{ border-radius:14px; }
@media (max-width:600.98px){ .tx-player{ border-radius:14px; } }

/* ── 겉면 ── */
.tx-player__face{
  position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%;
  margin:0; padding:0; border:0; border-radius:inherit; background:#1B1F23;
  color:#fff; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
/* 판단(10/18 통합 · B6 요청): 포스터를 absolute 로 두면 Chrome 이 겉면(쌓임 맥락)의 초점 고리를 포스터 아래에 그려 안 보임 →
   포스터는 흐름 안(static) 그림으로(같은 자리 · 같은 크기) — 고리는 그 위, 재생 원 · 길이 알약은 고리 위(겹치지 않는 자리) */
.tx-player__face img{ position:static; display:block; width:100%; height:100%; object-fit:cover; }
html[data-theme="dark"] .tx-player__face img{ filter:brightness(.86); }
.tx-player__face:focus-visible{ outline:3px solid var(--focus); outline-offset:-6px; }

.tx-player__play{
  position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
  border-radius:50%; background:rgba(44,58,66,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.26);
  transition:box-shadow var(--ui-fast, 160ms) ease-out, transform var(--ui-fast, 160ms) ease-out;
}
.tx-player__play::before{   /* 흰 ▶ */
  content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -7px;
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff;
}
.tx-player__face:hover .tx-player__play,
.tx-player__face:focus-visible .tx-player__play{
  box-shadow:0 0 0 4px var(--accent), 0 6px 18px rgba(0,0,0,.26); transform:scale(1.04);
}
.tx-player__face:active .tx-player__play{ transform:scale(.96); }
.tx-player.is-small .tx-player__play{ width:56px; height:56px; margin:-28px 0 0 -28px; }
.tx-player.is-small .tx-player__play::before{ margin:-9px 0 0 -6px; border-width:9px 0 9px 15px; }
@media (max-width:600.98px){
  .tx-player__play{ width:56px; height:56px; margin:-28px 0 0 -28px; }
  .tx-player__play::before{ margin:-9px 0 0 -6px; border-width:9px 0 9px 15px; }
}

/* 길이 알약 — 왼쪽 아래 · 고정폭 숫자 */
.tx-player__len{
  position:absolute; left:12px; bottom:12px; height:26px; padding:0 9px; border-radius:8px;
  background:#2C3A42; color:#fff; font-size:13px; font-weight:600; line-height:26px;
  font-variant-numeric:tabular-nums; letter-spacing:0; pointer-events:none;
}
.tx-player.is-small .tx-player__len{ left:10px; bottom:10px; }

/* ── 재생 무대(같은 상자 안) ── */
.tx-player__stage{ position:absolute; inset:0; z-index:2; background:#000; border-radius:inherit; overflow:hidden; }
.tx-player__stage > iframe,
.tx-player__stage > video,
.tx-player__stage > .tx-player__host,
.tx-player__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.tx-player.is-live .tx-player__face{ visibility:hidden; }

/* ── 실패 카드(그때만 · 4-8) ── */
.tx-player__fail{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:20px; background:var(--surface-2); color:var(--ink); text-align:center;
}
.tx-player__failmsg{ margin:0; font-size:15px; font-weight:600; line-height:1.5; word-break:keep-all; }
.tx-player__faillink{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--r-btn, 12px);
  background:var(--btn); color:var(--btn-ink); font-size:15px; font-weight:650; text-decoration:none;
}
.tx-player__faillink:hover{ text-decoration:underline; text-underline-offset:3px; }
.tx-player__faillink:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* ── 3초 이어 보기(H7) — 겉면 왼쪽 아래 카드(런처 쪽 아님) ── */
.tx-player.has-cd .tx-player__face img{ filter:brightness(.72); }
.tx-player.has-cd .tx-player__play,
.tx-player.has-cd .tx-player__len{ visibility:hidden; }
.tx-player__cd{
  position:absolute; left:16px; bottom:16px; z-index:3; max-width:calc(100% - 32px);
  padding:14px 16px 16px; border-radius:14px; overflow:hidden;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-2);
}
.tx-player__cdmsg{ margin:0 0 10px; font-size:15px; font-weight:650; line-height:1.45; word-break:keep-all; }
.tx-player__cdnum{ font-weight:750; font-variant-numeric:tabular-nums; }
.tx-player__cdbtns{ display:flex; flex-wrap:wrap; gap:8px; }
.tx-player__cdbtns button{
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; margin:0;
  border-radius:var(--r-btn, 12px); font:inherit; font-size:14px; font-weight:650; line-height:1; cursor:pointer;
}
.tx-player__cdstop{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
.tx-player__cdnow{ background:var(--btn); color:var(--btn-ink); border:1.5px solid var(--btn); }
.tx-player__cdbtns button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tx-player__cdbar{   /* 남은 시간 — 아래 3px 선 하나(면 0) */
  position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--accent);
  transform-origin:0 50%; transform:scaleX(1); pointer-events:none;
}
.tx-player.is-small .tx-player__cd{ left:10px; bottom:10px; max-width:calc(100% - 20px); padding:10px 12px 12px; }
.tx-player.is-small .tx-player__cdmsg{ font-size:14px; margin-bottom:8px; }
.tx-player.is-small .tx-player__cdbtns button{ min-height:36px; padding:0 12px; font-size:13.5px; }
@media (max-width:600.98px){
  .tx-player__cd{ left:10px; bottom:10px; max-width:calc(100% - 20px); padding:10px 12px 12px; }
  .tx-player__cdmsg{ font-size:14px; margin-bottom:8px; }
  .tx-player__cdbtns button{ min-height:40px; padding:0 12px; }
}

/* 「다음 · {편} ▶」 — 멈춘 뒤 · 줄인 움직임일 때 겉면 왼쪽 위 */
.tx-player__nextbtn{
  position:absolute; left:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  max-width:calc(100% - 24px); min-height:36px; margin:0; padding:0 12px 0 14px; border:0; border-radius:999px;
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);
  font:inherit; font-size:14px; font-weight:650; line-height:1.2; text-align:left; cursor:pointer;
}
.tx-player__nextbtn:hover{ box-shadow:var(--sh-2); }
.tx-player__nextbtn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tx-player__ico{ width:16px; height:16px; flex:none; }
.tx-player__nextbtn .tx-player__ico{ width:14px; height:14px; color:var(--accent-ink); }

/* ── 단계 목록 = 영상 장(4-9) ── */
.tx-steps{ list-style:none; margin:0; padding:0; position:relative; }
.tx-steps > li{ margin:0; padding:0; }
.tx-steps::before,
.tx-steps::after{
  content:""; position:absolute; left:8px; top:var(--tx-track-top, 0px); width:2px; margin-left:-1px;
  border-radius:2px; pointer-events:none;
}
.tx-steps::before{ height:var(--tx-track-h, 0px); background:var(--line-2); }      /* 세로 2px 바탕선 */
.tx-steps::after{ top:var(--tx-prog-top, var(--tx-track-top, 0px)); height:var(--tx-prog, 0px); background:var(--accent); }   /* 지금까지 — 장 사이 비율만큼(ω10 ζ.9) · 여러 편 목록은 지금 편 첫 단계부터(B3 요청 · 10/18) */

.tx-step{
  position:relative; display:grid; grid-template-columns:16px 3.3em minmax(0, 1fr); align-items:baseline;
  width:100%; min-height:40px; margin:0; padding:8px 10px 8px 0; border:0; border-radius:10px;
  background:transparent; color:var(--ink-2); font:inherit; text-align:left; cursor:pointer;
  transition:color var(--ui-fast, 160ms) ease-out;
}
.tx-step::before{   /* 지금 장 앞 주황 점 8px — 진행선 위 */
  content:""; grid-column:1; align-self:center; justify-self:center; position:relative; z-index:1;
  width:8px; height:8px; border-radius:50%; background:transparent;
}
.tx-step__t{ grid-column:2; font-size:13px; font-weight:600; line-height:1.4; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:0; }
.tx-step__name{ grid-column:3; font-size:15px; font-weight:550; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; }
.tx-step:hover{ color:var(--ink); }
.tx-step:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tx-step[aria-current="step"]{ color:var(--ink); }
.tx-step[aria-current="step"]::before{ background:var(--accent); }
.tx-step[aria-current="step"] .tx-step__name{ font-weight:750; }
.tx-step[aria-current="step"] .tx-step__t{ color:var(--accent-ink); }
/* 3-8 채팅 길 — ≤1023 단계 목록 줄은 오른쪽 84 에서 끝남 */
@media (max-width:1023.98px){ .tx-steps{ max-width:calc(100% - 52px); } }
@media (max-width:600.98px){ .tx-steps{ max-width:calc(100% - 68px); } }

/* 가이드 글 단계 제목 옆 작은 시각(상자 0 · 13px · 고정폭 — 4-9 · U13) */
.tx-steptime{
  display:inline-block; margin:0 0 0 10px; padding:2px 4px; border:0; border-radius:6px; background:none;
  color:var(--ink-3); font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; letter-spacing:0;
  font-variant-numeric:tabular-nums; vertical-align:middle; cursor:pointer;
}
.tx-steptime::before{ content:attr(data-time); }   /* 글자는 속성에서 — 제목 textContent 에 시각이 섞이지 않게(SEO · 10/21) */
.tx-steptime:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.tx-steptime:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tx-steptime.is-now{ color:var(--accent-ink); }
.tx-stepdot{   /* 재생 중 지금 단계 제목 앞 주황 점 8px */
  display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%;
  background:var(--accent); vertical-align:middle; position:relative; top:-.08em;
}

/* 줄인 움직임 — 즉시 */
html.rm .tx-player__play, html.rm .tx-step{ transition:none; }
@media (prefers-reduced-motion: reduce){ .tx-player__play, .tx-step{ transition:none; } }