/* TT Score 소개 화면(/tt/score, app/tt_score_page.py).
 *
 * 탁구 놀이터 키트(kit.css)의 토큰·티티·히어로·카드를 그대로 쓰고, 이 화면만의 조각(3단계 그림·라이브 카드·데모 갤러리·
 * 정확도 타일)을 더한다. 색은 사이트 토큰(var(--…))이라 다크 모드가 사이트와 함께 바뀐다. 그림 판은 두 테마 모두
 * 밝은 스티커로 둔다 — 진한 선(#2a2326)이 어두운 판에서 사라진다(kit.css 의 .tpTools .art 와 같은 이유).
 *
 * 움직임은 transform·opacity 만. 숨겼다가 보여 주는 등장 효과는 score.js 가 <html> 에 .tsJs 를 붙였을 때만 —
 * 자바스크립트가 없거나 움직임 줄이기면 처음부터 다 보인다. 움직임 줄이기면 맨 아래에서 전부 멈춘다.
 */

/* ── 히어로 ── */
/* 한국어는 낱말 가운데서 줄을 바꾸지 않는다(「점 / 수가」). 아주 긴 낱말만 넘칠 때 끊는다. */
.tsHero,.tsSec{word-break:keep-all;overflow-wrap:anywhere}
.tsHero .tsEyebrow{display:inline-block;margin:0 0 var(--sp-2);padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.18);
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em}
.tsHeroBtns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0 0}
.tsHeroBtn{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;background:#fff;color:#93102f;
  font-weight:800;text-decoration:none;box-shadow:0 5px 0 rgba(0,0,0,.22);transition:transform .25s var(--tp-spring),box-shadow .25s var(--tp-spring)}
.tsHeroBtn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8);box-shadow:none}
.tsHeroBtn:hover{transform:translateY(-2px)}
.tsHeroBtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.tsHeroBtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tsHero .tpPongi{cursor:pointer}
/* 코트 위를 오가는 공 — 티티의 친구. 코트가 숨는 좁은 화면에서는 함께 숨는다. */
.tsHeroBall{position:absolute;right:178px;bottom:58px;width:14px;height:14px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);
  z-index:1;animation:tsRally 2.2s ease-in-out infinite}
@keyframes tsRally{0%,100%{transform:translate(0,0)}25%{transform:translate(80px,-34px)}50%{transform:translate(160px,0)}75%{transform:translate(80px,-26px)}}

/* ── 구역 공통 ── */
.tsSec{margin:0 0 var(--sp-7);scroll-margin-top:72px}
.tsSec h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tsSec h2::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--tp-ball);border:3px solid var(--tp-ink);
  box-shadow:3px 3px 0 var(--accent)}
.tsLead{color:var(--dim);margin:0 0 var(--sp-4);max-width:46em}

/* 등장 효과 — score.js 가 .tsJs 를 붙인 뒤에만 숨겼다가 화면에 들어오면 튀어 오른다 */
.tsJs .tsReveal{opacity:0;transform:translateY(18px) scale(.98)}
.tsJs .tsReveal.tsIn{opacity:1;transform:none;transition:opacity .5s ease,transform .6s var(--tp-spring)}

/* ── 3단계 ── */
.tsSteps{list-style:none;padding:0;margin:0 0 var(--sp-5);display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:none}
.tsStep{display:grid;grid-template-rows:auto 1fr;border:2px solid var(--border-2);border-radius:22px;background:var(--surface);overflow:hidden;
  box-shadow:0 5px 0 var(--border-2)}
.tsStep:nth-child(2).tsIn{transition-delay:.12s}.tsStep:nth-child(3).tsIn{transition-delay:.24s}
.tsArt{display:grid;place-items:center;padding:var(--sp-3);background:radial-gradient(circle at 10px 10px,rgba(179,18,63,.12) 2.5px,transparent 3px) 0 0/22px 22px,#fcedf0}
.tsArtSvg{display:block;width:100%;max-width:240px;height:auto;overflow:visible}
.tsStepTxt{display:grid;gap:4px;padding:var(--sp-4)}
.tsStepTxt b{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg)}
.tsStepTxt span{color:var(--dim);font-size:var(--fs-md);line-height:1.55}
.tsStepTxt .tsNum{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:900}

/* 그림 속 움직임 */
.tsRec{animation:tsBlink 1.2s steps(2,start) infinite}
@keyframes tsBlink{to{opacity:.15}}
.tsFrame{transform-box:fill-box;transform-origin:50% 50%;animation:tsFocus 2.6s ease-in-out infinite}
@keyframes tsFocus{0%,100%{transform:scale(1)}50%{transform:scale(.96)}}
.tsTrack{animation:tsTrack 2.4s ease-in-out infinite}
@keyframes tsTrack{0%{transform:translate(0,0)}30%{transform:translate(34px,-34px)}55%{transform:translate(64px,-18px)}75%,100%{transform:translate(104px,8px)}}
.tsRing{transform-box:fill-box;transform-origin:50% 50%;animation:tsRing 2.4s ease-out infinite}
@keyframes tsRing{0%,70%{opacity:0;transform:scale(.4)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.tsBump{transform-box:fill-box;transform-origin:50% 50%;animation:tsBump 2.6s var(--tp-spring) infinite}
@keyframes tsBump{0%,55%{transform:scale(1)}65%{transform:scale(1.3) rotate(-6deg)}80%,100%{transform:scale(1)}}
.tsPlus{animation:tsPlus 2.6s ease-out infinite}
@keyframes tsPlus{0%,50%{opacity:0;transform:translateY(18px)}62%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(-12px)}}

/* 지금 / 준비 중 */
.tsState{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tsNow,.tsLater{border-radius:18px;padding:var(--sp-4) var(--sp-5);border:2px solid var(--border-2);background:var(--surface)}
.tsNow{border-color:color-mix(in srgb,var(--accent) 55%,var(--border-2))}
.tsLater{border-style:dashed;background:var(--surface-2)}
.tsNow h3,.tsLater h3{margin:0 0 var(--sp-2);font-size:var(--fs-base)}
.tsNow h3::before{content:"● ";color:#1f9d55}
.tsLater h3::before{content:"◌ ";color:var(--dim)}
.tsNow ul,.tsLater ul{margin:0;padding-left:var(--sp-5)}
.tsNow li,.tsLater li{margin:0 0 4px;font-size:var(--fs-md)}
/* 「지금 해 볼 수 있어요」 의 링크는 목록 속 입구라 손가락 크기(44px)를 준다 */
.tsNow li{margin:0}
.tsNow a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
/* 키보드 포커스 — 이 화면의 글 속 링크·카드 모두 눈에 띄게 */
.tsSec a:focus-visible,.tsHero a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.tsHero a:focus-visible{outline-color:#fff}
/* 영상 조작 막대는 브라우저 안쪽(그림자 DOM)이라 겉에 포커스 테두리를 그린다 */
.tsVid:focus-within{outline:3px solid var(--accent);outline-offset:2px}

/* ── 실시간 카드 ── */
.tsLive{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border:2px solid var(--accent);border-radius:22px;
  background:var(--surface);color:inherit;text-decoration:none;box-shadow:0 6px 0 var(--accent);
  transition:transform .3s var(--tp-spring),box-shadow .3s var(--tp-spring)}
.tsLive:hover,.tsLive:focus-visible{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 9px 0 var(--accent)}
.tsLive:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.tsLiveIco{flex:none;display:grid;place-items:center;width:92px;height:92px;border-radius:20px;background:#fcedf0}
.tsLiveArt{width:76px;height:76px;overflow:visible}
.tsLiveDot{transform-box:fill-box;transform-origin:50% 50%;animation:tsPulse 1.4s ease-in-out infinite}
@keyframes tsPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.tsLiveTxt{display:grid;gap:4px}
.tsLiveTxt b{font-size:var(--fs-lg);line-height:1.35}
.tsLiveTxt span{color:var(--dim);font-size:var(--fs-md)}
.tsLiveTxt .go{color:var(--accent-text);font-weight:800}
/* 실시간 카드 아래 상태(score.js 가 채운다) — 불러오는 중은 스켈레톤, 로그인 전은 로그인 단추 */
.tsLiveState{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 0;padding:var(--sp-3) var(--sp-4);
  border-radius:16px;border:2px solid var(--border-2);background:var(--surface);min-height:56px}
.tsLiveState[hidden]{display:none}
.tsLiveState p{margin:0;font-size:var(--fs-md);flex:1 1 220px}
.tsLiveState[data-state="ready"]{border-color:#1f9d55}
.tsLiveState[data-state="busy"],.tsLiveState[data-state="quota"]{border-color:var(--warn-fill);background:var(--warn-bg)}
.tsLiveState[data-state="error"]{border-style:dashed}
.tsLiveState .tpBtn{min-height:44px}
.tsSkel{display:block;flex:1 1 auto;height:16px;border-radius:999px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%) 0 0/200% 100%;animation:tsShimmer 1.2s linear infinite}
@keyframes tsShimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.tsStatus{margin:var(--sp-4) 0 var(--sp-2);border-left:3px solid var(--warn-fill);background:var(--warn-bg);padding:var(--sp-2) var(--sp-3);
  border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-md)}

/* ── 데모 갤러리 ── */
.tsGallery{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tsDemo{margin:0;border:2px solid var(--border-2);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 5px 0 var(--border-2)}
.tsDemo:nth-child(3n+2).tsIn{transition-delay:.1s}.tsDemo:nth-child(3n).tsIn{transition-delay:.2s}
/* 포스터가 오기 전에는 스켈레톤이 반짝인다(score.js 가 포스터를 받으면 .tsReady 로 멈춘다). 영상 바탕을 비워 두어야
   그 아래 스켈레톤이 보인다. */
.tsVid{position:relative;background:linear-gradient(90deg,#1d1819 25%,#2c2426 50%,#1d1819 75%) 0 0/200% 100%}
.tsJs .tsVid:not(.tsReady){animation:tsShimmer 1.4s linear infinite}
.tsVid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:transparent}
/* 불러오는 중(waiting) — 가운데서 작은 공이 통통 */
.tsVid::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--tp-ball);
  border:3px solid var(--tp-ink);opacity:0;pointer-events:none;transition:opacity .2s}
.tsVid.tsBusy::after{opacity:1;animation:tsWait .6s ease-in-out infinite alternate}
@keyframes tsWait{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
/* 오류 — 영상 위에 덮는 안내와 다시 시도 */
.tsErr{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--sp-2);padding:var(--sp-4);text-align:center;
  background:rgba(18,15,16,.86);color:#fff}
.tsErr p{margin:0;font-size:var(--fs-md);max-width:22em}
.tsNo{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tp-ball);
  color:var(--tp-ink);border:2px solid var(--tp-ink);font-weight:900;font-size:var(--fs-sm);pointer-events:none}
.tsDemo figcaption{display:grid;gap:4px;padding:var(--sp-3) var(--sp-4) var(--sp-4);font-size:var(--fs-md);line-height:1.55}
.tsDemo figcaption b{font-size:var(--fs-base)}
.tsStat{font-weight:700;color:var(--accent-text)}
.tsDemo .dim{font-size:var(--fs-sm)}
.tsLegendBox{margin:var(--sp-5) 0 var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:18px;background:var(--surface-2);border:1px solid var(--border)}
.tsLegendBox h3{margin:0 0 var(--sp-2);font-size:var(--fs-base)}
.tsLegend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-md)}
.tsLegend li{display:flex;align-items:flex-start;gap:10px}
.tsLegend .sw{flex:none;width:22px;height:16px;margin-top:3px;border-radius:4px}
.tsLegend .sw.box{border:3px solid #d0103f}
.tsLegend .sw.ring{border:3px solid #d0103f;border-radius:50%}
.tsLegend .sw.grey{background:#e9e4e6;border:2px solid #8a8286;border-radius:999px}
.tsLegend .sw.line{border:2px solid #fff;outline:2px dashed #e6c229;outline-offset:-6px;background:#1c3f8f}
.tsCredit{font-size:var(--fs-sm);color:var(--dim);border-left:3px solid var(--accent);padding:var(--sp-2) var(--sp-3);background:var(--surface-2);
  border-radius:0 var(--r) var(--r) 0;margin:var(--sp-3) 0 0;line-height:1.6}

/* ── 정확도 ── */
.tsTiles{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.tsTile{padding:var(--sp-4) var(--sp-5);border:2px solid var(--border-2);border-radius:20px;background:var(--surface);box-shadow:0 5px 0 var(--border-2)}
.tsTile:nth-child(2n).tsIn{transition-delay:.1s}
.tsTile h3{margin:0;font-size:var(--fs-base);color:var(--dim)}
.tsTile p{margin:var(--sp-2) 0 0;font-size:var(--fs-md);line-height:1.55}
.tsTile .tsBig{margin:2px 0 var(--sp-2);font-size:clamp(34px,7vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:var(--accent-text)}
.tsTile .tsBig small{font-size:.5em;color:var(--dim);font-weight:800}
.tsTile.warn .tsBig{color:var(--warn)}
.tsTile .tsCond{font-size:var(--fs-sm);color:var(--dim)}
.tsMeter{display:block;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.tsMeter i{display:block;height:100%;border-radius:999px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--v,0))}
.tsTile.warn .tsMeter i{background:var(--warn-fill)}
.tsJs .tsTile .tsMeter i{transform:scaleX(0)}
.tsJs .tsTile.tsIn .tsMeter i{transform:scaleX(var(--v,0));transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.tsUnknown{padding:var(--sp-4) var(--sp-5);border-radius:18px;border:2px dashed var(--warn-fill);background:var(--warn-bg)}
.tsUnknown h3{margin:0 0 var(--sp-2);font-size:var(--fs-base)}
.tsUnknown ul{margin:0 0 var(--sp-3);padding-left:var(--sp-5)}
.tsUnknown li{margin:0 0 4px;font-size:var(--fs-md)}
.tsUnknown p{margin:0;font-size:var(--fs-md)}

/* ── 함께 쓰기(놀이터 카드 tpTools 를 그대로, 그림만 작게) ── */
.tsWith{margin-bottom:0;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tsWith .art{height:96px}
.tsWith .art svg{width:76px;height:76px}
.tsWith .txt{padding-bottom:var(--sp-4)}

/* ── 곧 나와요 ── */
.tsSoon{list-style:none;padding:0;margin:0 0 var(--sp-3);display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tsSoon li{display:grid;gap:4px;padding:var(--sp-4);border:2px dashed var(--border-2);border-radius:18px;background:var(--surface-2)}
.tsSoon b::after{content:" · 곧";color:var(--accent-text);font-size:var(--fs-sm)}
.tsSoon span{color:var(--dim);font-size:var(--fs-md)}

@media (max-width:640px){
  .tsHeroBall{display:none}
  .tsLive{align-items:flex-start;padding:var(--sp-4)}
  .tsLiveIco{width:64px;height:64px;border-radius:16px}
  .tsLiveArt{width:54px;height:54px}
  .tsGallery{grid-template-columns:1fr}
  .tsTiles{grid-template-columns:1fr}
}

/* ── 움직임 줄이기 ── 정지 그림, 등장 효과 없음 */
@media (prefers-reduced-motion:reduce){
  .tsHeroBall,.tsRec,.tsFrame,.tsTrack,.tsRing,.tsBump,.tsPlus,.tsLiveDot,.tsSkel,.tsVid,.tsVid.tsBusy::after{animation:none!important}
  .tsHeroBall{display:none}
  .tsJs .tsReveal{opacity:1;transform:none}
  .tsJs .tsTile .tsMeter i{transform:scaleX(var(--v,0))}
  .tsHeroBtn,.tsLive,.tsJs .tsReveal.tsIn,.tsJs .tsTile.tsIn .tsMeter i{transition:none}
  .tsHeroBtn:hover,.tsLive:hover,.tsLive:focus-visible{transform:none}
}