/* 자세 코칭(/tt/coach). 놀이터 키트(kit.css)의 무대·단추·티티·말풍선과 사이트 토큰(/design.css)을 그대로 쓴다 —
 * 간격·글꼴·색·둥근 모서리·그림자가 다른 탁구 화면과 같아야 한다. 여기서 정하는 색은 골격 색표(lib/coach.mjs 의
 * JOINT_COLOR)와 같은 값뿐이다. 움직임은 transform·opacity 만, 움직임 줄이기면 맨 아래에서 끈다. */
.ttcHead .tpPongi{width:76px}
.ttcStage{min-height:420px}
.ttcStage .tpScreen{gap:var(--sp-5)}

/* ── 불러오는 중(스켈레톤) ── */
.ttcSkel{display:grid;gap:var(--sp-3)}
.ttcSkel span{display:block;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%) 0 0/200% 100%;animation:ttcShimmer 1.4s linear infinite}
.ttcSkelTabs{height:48px;width:min(100%,360px)}
.ttcSkelView{aspect-ratio:16/9;width:100%}
.ttcSkelLine{height:18px;width:90%}
.ttcSkelLine.short{width:55%}
@keyframes ttcShimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ── 탭 ── */
.ttcTabs{display:inline-flex;gap:6px;padding:6px;border-radius:var(--r-full);background:var(--surface-2);border:2px solid var(--border-2);justify-self:start;max-width:100%}
.ttcTab{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-md);
  min-height:44px;padding:8px 18px;border-radius:var(--r-full);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ttcTab[aria-selected="true"]{background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 3px 0 var(--accent-hover)}
.ttcTab:focus-visible,.ttcSegOpt:focus-within,.ttcDrop:focus-within,.ttcHistBtn:focus-visible,.ttcDrill:focus-visible,.ttcWhy summary:focus-visible,.ttcTips summary:focus-visible,.ttcTable summary:focus-visible{outline:3px solid var(--focus,var(--text));outline-offset:3px}
.ttcTabDot{width:12px;height:12px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);flex:none}
.ttcPanel{display:grid;gap:var(--sp-4)}
.ttcPanel[hidden]{display:none}

/* ── 티티 말 ── */
.ttcTalk{display:flex;align-items:flex-end;gap:var(--sp-3)}
.ttcTalkBody{display:grid;gap:var(--sp-3);flex:1;min-width:0}
.ttcTalk .tpBubble{margin:0}
.ttcTalkSm .tpPongi{width:52px}
.ttcCue{flex:1}
.ttcFine{font-size:var(--fs-sm);color:var(--dim);margin:0;line-height:1.55}
.ttcWarn{color:var(--warn);font-weight:var(--fw-semibold);margin:0}

/* ── 고르기(라디오 알약) ── */
.ttcRow{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.ttcSeg{border:0;margin:0;padding:0;min-width:0}
.ttcSeg legend{font-weight:var(--fw-bold);font-size:var(--fs-md);margin-bottom:var(--sp-2);padding:0}
.ttcSegRow{display:flex;flex-wrap:wrap;gap:8px}
.ttcSegOpt{position:relative;display:inline-flex}
.ttcSegOpt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ttcSegOpt span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--r-full);border:2px solid var(--border-2);
  background:var(--surface);font-weight:var(--fw-semibold);font-size:var(--fs-md);color:var(--text)}
.ttcSegOpt input:checked + span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent-text)}
.ttcSegOpt input:checked + span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:8px}

/* ── 실시간 화면 ── */
.ttcLiveWrap{position:relative}
.ttcView{position:relative;width:100%;max-height:70vh;aspect-ratio:16/9;margin:0 auto;background:#120f10;border-radius:var(--r-lg);overflow:hidden;
  border:3px solid var(--tp-ink);box-shadow:0 6px 0 var(--border-2)}
.ttcView video,.ttcView canvas{position:absolute;inset:0;width:100%;height:100%}
.ttcView video{object-fit:contain}
.ttcView.mirror video,.ttcView.mirror canvas{transform:scaleX(-1)}
.ttcHud{position:absolute;top:10px;right:10px;background:rgba(18,15,16,.75);color:#fffaf2;border-radius:var(--r-full);padding:3px 10px;
  font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;pointer-events:none}
.ttcHud:empty{display:none}
.ttcChips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
.ttcChip{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-lg);border:2px solid var(--border-2);background:var(--surface)}
.ttcChip span{font-size:var(--fs-sm);color:var(--dim)}
.ttcChip b{font-size:var(--fs-xl);font-variant-numeric:tabular-nums;line-height:1.1}
.ttcChip[data-state="ok"]{border-color:var(--ok);background:var(--ok-bg)}
.ttcChip[data-state="ok"] b{color:var(--ok)}
.ttcChip[data-state="high"],.ttcChip[data-state="low"]{border-color:var(--warn);background:var(--warn-bg)}
.ttcChip[data-state="high"] b,.ttcChip[data-state="low"] b{color:var(--warn)}
.ttcChip[data-state="ok"] b::after{content:" 좋아요";font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.ttcChip[data-state="high"] b::after,.ttcChip[data-state="low"] b::after{content:" 살펴요";font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.ttcLegend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-sm);color:var(--dim)}
.ttcLegend i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px rgba(18,15,16,.5)}

/* ── 영상 분석: 고르기 ── */
.ttcCard{border:2px solid var(--border-2);border-radius:var(--r-xl,20px);background:var(--surface);padding:var(--sp-4) var(--sp-5);
  box-shadow:0 4px 0 var(--border-2);display:grid;gap:var(--sp-3)}
.ttcCard h3{margin:0;font-size:var(--fs-lg)}
.ttcForm{gap:var(--sp-5)}
.ttcField{display:grid;gap:var(--sp-2)}
.ttcLegend3{font-weight:var(--fw-bold);font-size:var(--fs-md)}
.ttcDrop{display:flex;align-items:center;gap:var(--sp-4);min-height:88px;padding:var(--sp-4);border:3px dashed var(--border-2);border-radius:var(--r-xl,20px);
  background:var(--surface-2);cursor:pointer;color:var(--text)}
.ttcDrop:hover{border-color:var(--accent)}
.ttcDropIcon{color:var(--accent-text);flex:none;line-height:0}
.ttcDropText{display:grid;gap:2px}
.ttcDropText b{font-size:var(--fs-lg)}
.ttcDropText span{color:var(--dim);font-size:var(--fs-sm)}
.ttcFileInfo{margin:0;font-size:var(--fs-sm);color:var(--dim);min-height:1.4em}
.ttcFileInfo[data-state="ok"]{color:var(--ok);font-weight:var(--fw-semibold)}
.ttcFileInfo[data-state="bad"]{color:var(--err);font-weight:var(--fw-semibold)}
.ttcGo{justify-content:flex-start}
.ttcTips summary,.ttcTable summary,.ttcWhy summary{cursor:pointer;font-weight:var(--fw-bold);min-height:44px;display:flex;align-items:center}
.ttcTips ul{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* 기록 */
.ttcHist ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ttcHistBtn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:48px;padding:8px 12px;
  border:2px solid var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.ttcHistBtn:hover{border-color:var(--accent)}
.ttcHistMain{font-weight:var(--fw-semibold)}
.ttcHistSub{font-size:var(--fs-sm);color:var(--dim)}
.ttcDotState{width:12px;height:12px;border-radius:50%;background:var(--dim)}
.ttcDotState.done{background:var(--ok)}
.ttcDotState.failed{background:var(--err)}
.ttcDotState.running{background:var(--warn)}
.ttcEmpty{display:flex;align-items:center;gap:var(--sp-3);color:var(--dim)}
.ttcEmpty p{margin:0}

/* ── 진행 중 ── */
.ttcRun{display:grid;justify-items:center;gap:var(--sp-4);text-align:center;padding:var(--sp-4) 0}
.ttcSwing{position:relative;display:inline-block}
.ttcRacket{position:absolute;right:-30px;top:18px;transform-origin:20% 80%;animation:ttcSwing 1.1s var(--tp-spring) infinite}
@keyframes ttcSwing{0%,100%{transform:rotate(-35deg)}45%{transform:rotate(40deg)}60%{transform:rotate(30deg)}}
.ttcUp{display:flex;align-items:center;gap:var(--sp-3);width:min(100%,420px)}
.ttcProgress{flex:1;height:14px;accent-color:var(--accent)}
.ttcPct{font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);min-width:3.5em}
.ttcSteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ttcSteps li{padding:6px 12px;border-radius:var(--r-full);border:2px solid var(--border-2);font-size:var(--fs-sm);color:var(--dim)}
.ttcSteps li.on{border-color:var(--accent);color:var(--accent-text);font-weight:var(--fw-bold)}

/* ── 결과 ── */
.ttcStrip{position:relative;height:18px;border-radius:var(--r-full);background:var(--tp-table);border:2px solid var(--tp-ink)}
.ttcStrip i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink)}
.ttcCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-3)}
.ttcFb{border-left-width:8px}
.ttcFb.good{border-left-color:var(--ok)}
.ttcFb.fix{border-left-color:var(--accent)}
.ttcCardHead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.ttcKind{font-weight:var(--fw-black);font-size:var(--fs-sm);letter-spacing:.02em}
.ttcFb.good .ttcKind{color:var(--ok)}
.ttcFb.fix .ttcKind{color:var(--accent-text)}
.ttcCardText{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:1.45}
.ttcBadge{font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:3px 9px;border-radius:var(--r-full);border:1.5px solid currentColor;white-space:nowrap}
.ttcBadge.evidence{color:var(--ok);background:var(--ok-bg)}
.ttcBadge.reference{color:var(--warn);background:var(--warn-bg)}
.ttcBadge.fact{color:var(--dim)}
.ttcNums{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:var(--fs-sm)}
.ttcNums b{font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.ttcDrills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ttcDrills .dim{font-size:var(--fs-sm);margin-right:2px}
.ttcDrill{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:var(--r-full);border:2px solid var(--border-2);
  background:var(--surface-2);color:var(--text);text-decoration:none;font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.ttcDrill:hover{border-color:var(--accent);color:var(--accent-text)}
.ttcWhy p{margin:0 0 6px;font-size:var(--fs-sm);line-height:1.6;color:var(--dim)}
.ttcWhy ul{margin:0;padding-left:1.1em;font-size:var(--fs-sm)}

/* 기준 자세 vs 내 자세 — 탁구대 판 위에 같은 색표로 나란히 */
.ttcCompare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.ttcFig{margin:0;display:grid;gap:6px;justify-items:center;text-align:center}
.ttcPose{width:100%;max-width:240px;height:auto}
.ttcPoseBg{fill:var(--tp-table)}
.ttcFloor{stroke:#fffaf2;stroke-width:3;opacity:.7}
.ttcFig figcaption{display:grid;gap:2px;font-size:var(--fs-sm)}
.ttcFig figcaption span{color:var(--dim);font-variant-numeric:tabular-nums}
.ttcEmptyFig{align-self:center;color:var(--dim);font-size:var(--fs-sm)}

.ttcTable table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ttcTable th,.ttcTable td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border)}
.ttcTable td{font-variant-numeric:tabular-nums}
.ttcSaveRow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.ttcSaveRow label{font-weight:var(--fw-semibold)}
.ttcNum{width:6em;min-height:44px;padding:8px 12px;border-radius:var(--r-lg);border:2px solid var(--border-input,var(--border-2));background:var(--surface);color:var(--text);font:inherit}
.ttcNum:focus-visible{outline:3px solid var(--focus,var(--text));outline-offset:2px}
.ttcSave.done p{margin:0;font-weight:var(--fw-semibold);color:var(--ok)}
.ttcSources{display:grid;gap:var(--sp-3);padding-left:1.1em}

/* ── 폰 폭 ── */
@media (max-width:520px){
  .ttcStage{padding:var(--sp-5) var(--sp-3) var(--sp-6)}
  .ttcTabs{display:flex;width:100%}
  .ttcTab{flex:1;justify-content:center;padding:8px 10px}
  .ttcChip{padding:8px}
  .ttcChip b{font-size:var(--fs-lg)}
  .ttcChip b::after{display:block}
  .ttcCard{padding:var(--sp-3) var(--sp-4)}
  .ttcTalk .tpPongi.lg{width:88px}
  .ttcDrop{min-height:76px}
  .ttcRacket{right:-22px;width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .ttcSkel span{animation:none}
  .ttcRacket{animation:none;transform:rotate(20deg)}
}