/* 경기 영상 화면(/tt/videos) — 색·글꼴·간격은 사이트 토큰(design.css)과 놀이터 키트(kit.css)를 그대로 쓴다.
 * 다크 모드는 토큰이 바꾼다(여기서 색을 새로 정하지 않는다). 누르는 자리는 44px 이상, 포커스는 늘 보이게,
 * 움직임 줄이기면 스켈레톤 반짝임과 티티 움직임을 멈춘다. 375px 에서 가로 스크롤이 생기지 않게 한 줄씩 접힌다. */
.ttvApp{display:grid;gap:var(--sp-4);margin:0 0 var(--sp-7);min-height:240px}
.ttvCard{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--shadow-sm);display:grid;gap:var(--sp-3);min-width:0}
.ttvCard h2,.ttvCard h3{margin:0;line-height:var(--lh-snug)}
.ttvCard h2{font-size:var(--fs-xl)}
.ttvCard h3{font-size:var(--fs-lg);margin-top:var(--sp-2)}
.ttvCard p{margin:0}
.ttvTalk{grid-template-columns:auto 1fr;align-items:start}
.ttvTalk .tpPongi{width:64px}
.ttvTalk > div{display:grid;gap:var(--sp-3);min-width:0}
.ttvBig{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.ttvMeta{color:var(--dim);font-size:var(--fs-sm)}
.ttvHint{color:var(--dim);font-size:var(--fs-sm);line-height:var(--lh-base)}
.ttvInfo{font-size:var(--fs-sm);overflow-wrap:anywhere}
.ttvSr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ttvLoading{color:var(--dim);margin:0}
/* 화면이 바뀔 때 제목으로 옮기는 포커스는 화면 읽기용이다 — 테두리를 그리지 않는다(키보드 포커스는 아래 :focus-visible 이 그린다). */
.ttvApp [data-focus]:focus{outline:none}

.ttvActions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.ttvBtn{min-height:44px;padding:var(--sp-2) var(--sp-5);font-size:var(--fs-md);text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;text-align:center}
.ttvBtn:focus-visible,.ttvTab:focus-visible,.ttvRow2:focus-visible,.ttvItem:focus-visible,.ttvTapLayer:focus-visible,
.ttvSegOpt:focus-within,.ttvCheck input:focus-visible,.ttvField input:focus-visible,.ttvUrl:focus-visible,.ttvFile:focus-visible{
  outline:3px solid var(--focus,var(--text));outline-offset:2px}
.ttvDanger{color:var(--err)!important;border-color:var(--err)!important}

.ttvNote{border-left:4px solid var(--accent);background:var(--accent-bg);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
.ttvNote.warn{border-color:var(--warn);background:var(--warn-bg)}
.ttvNote.err{border-color:var(--err);background:var(--err-bg);color:var(--text)}

/* 단계 */
.ttvSteps{display:flex;gap:var(--sp-2);list-style:none;margin:0;padding:0;counter-reset:s;flex-wrap:wrap}
.ttvSteps li{counter-increment:s;font-size:var(--fs-sm);color:var(--dim);display:flex;align-items:center;gap:var(--sp-2)}
.ttvSteps li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--border-2);font-weight:var(--fw-bold)}
.ttvSteps li.now{color:var(--text);font-weight:var(--fw-bold)}
.ttvSteps li.now::before{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.ttvSteps li.done::before{content:"✓";border-color:var(--ok);color:var(--ok)}

/* 입력 */
.ttvLabel{font-weight:var(--fw-semibold)}
.ttvFile{min-height:44px;max-width:100%;font-size:var(--fs-md)}
.ttvRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3)}
.ttvField{display:grid;gap:var(--sp-1)}
.ttvField label{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.ttvField input,.ttvUrl{min-height:44px;padding:0 var(--sp-3);border:1px solid var(--border-input,var(--border-2));
  border-radius:var(--r);background:var(--bg);color:var(--text);font:inherit;width:100%;box-sizing:border-box}
.ttvSeg{border:0;margin:0;padding:0;display:grid;gap:var(--sp-2);min-width:0}
.ttvSeg legend{font-weight:var(--fw-semibold);padding:0;margin-bottom:var(--sp-2)}
.ttvSegRow{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ttvSegOpt{position:relative;display:flex;align-items:center;min-height:44px;padding:var(--sp-2) var(--sp-4);
  border:2px solid var(--border-2);border-radius:var(--r);cursor:pointer;background:var(--surface);flex:1 1 auto}
.ttvSegOpt input{position:absolute;opacity:0;width:1px;height:1px}
.ttvSegOpt:has(input:checked){border-color:var(--accent);background:var(--accent-bg);font-weight:var(--fw-bold)}
.ttvCheck{display:grid;grid-template-columns:28px 1fr;gap:var(--sp-1) var(--sp-3);align-items:center;min-height:44px}
.ttvCheck input{width:24px;height:24px;margin:0;accent-color:var(--accent)}
.ttvCheck label{cursor:pointer}
.ttvCheck .ttvHint{grid-column:2}

/* 미리 보기와 탁구대 짚기 */
.ttvPreview{position:relative;border-radius:var(--r);overflow:hidden;background:#000;line-height:0}
.ttvVideo{width:100%;max-height:70vh;background:#000;border-radius:var(--r);display:block}
.ttvPreview .ttvVideo{border-radius:0}
.ttvTapLayer{position:absolute;inset:0 0 48px 0;background:transparent;border:0;padding:0;cursor:crosshair}
.ttvMarks{position:absolute;inset:0 0 48px 0;pointer-events:none}
.ttvMark{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--accent);
  color:#fff;font:700 14px/28px var(--font-sans);text-align:center;box-shadow:0 0 0 3px #fff}

/* 진행 막대 */
.ttvBar{height:12px;border-radius:var(--r-full);background:var(--surface-3,var(--border));overflow:hidden}
.ttvBar span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s ease}

/* 목록 */
.ttvList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.ttvItem{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-3);align-items:center;padding:var(--sp-3);
  border:1px solid var(--border-2);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-decoration:none;min-height:44px}
.ttvItem img,.ttvThumb{width:120px;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:var(--r-sm);background:var(--tp-table,#26201f)}
.ttvItemText{display:grid;gap:var(--sp-1);min-width:0}
.ttvItemText strong{overflow-wrap:anywhere}
.ttvPlain{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.ttvPlain li{display:grid;gap:var(--sp-2)}
.ttvBadge{justify-self:start;display:inline-block;padding:2px var(--sp-2);border-radius:var(--r-full);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);border:1px solid var(--border-2);background:var(--surface-2)}
.ttvBadge.ph-done{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.ttvBadge.ph-failed{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.ttvBadge.ph-running,.ttvBadge.ph-retrying{border-color:var(--warn);background:var(--warn-bg)}
.ttvHead{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center}
.ttvHead h2{margin:0;font-size:var(--fs-xl);overflow-wrap:anywhere}

/* 결과 */
.ttvTabs{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.ttvTab{min-height:44px;padding:0 var(--sp-4);border:2px solid var(--border-2);border-radius:var(--r-full);background:var(--surface);
  color:var(--text);font:inherit;cursor:pointer}
.ttvTab[aria-selected="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent,#fff);font-weight:var(--fw-bold)}
.ttvGames{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;display:block;overflow-x:auto}
.ttvGames th,.ttvGames td{padding:var(--sp-2) var(--sp-3);text-align:center;border-bottom:1px solid var(--border)}
.ttvGames th[scope="row"]{text-align:left;max-width:9em;overflow-wrap:anywhere}
.ttvGames td.w{font-weight:var(--fw-black)}
.ttvGames td.sets{font-weight:var(--fw-black);color:var(--accent-text,var(--accent))}
.ttvGames tr.win th{color:var(--accent-text,var(--accent))}
.ttvHl,.ttvRallies{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.ttvRallies{max-height:420px;overflow-y:auto}
.ttvRow2{width:100%;min-height:44px;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;text-align:left;
  padding:var(--sp-2) var(--sp-3);border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--text);
  font:inherit;cursor:pointer}
.ttvRow2:hover{background:var(--surface-2)}
.ttvRow2 .n{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--surface-2);
  font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.ttvRow2 .t,.ttvRow2 .sc{font-variant-numeric:tabular-nums;color:var(--dim)}
.ttvRow2 .w{font-weight:var(--fw-semibold)}

/* 스켈레톤 */
.ttvSkel{display:grid;gap:var(--sp-3)}
.ttvSkel span{display:block;height:18px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3,var(--border)) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:ttvShine 1.4s ease-in-out infinite}
.ttvSkel span.w60{width:60%}
@keyframes ttvShine{from{background-position:200% 0}to{background-position:-200% 0}}

@media (max-width:480px){
  .ttvCard{padding:var(--sp-4)}
  .ttvItem{grid-template-columns:88px 1fr}
  .ttvItem img,.ttvThumb{width:88px}
  .ttvActions .ttvBtn{flex:1 1 100%}
  .ttvTalk{grid-template-columns:1fr}
  .ttvTalk .tpPongi{width:48px}
}
@media (prefers-reduced-motion:reduce){
  .ttvSkel span{animation:none}
  .ttvBar span{transition:none}
}