/* 탁구인 사이트 모음 — 놀이터 키트(kit.css) 위에 얹는다.
 *
 * 정보가 먼저다. 티티는 머리와 말풍선 둘에만 있고, 카드는 이름·설명·확인 날짜가 한눈에 읽히는 평범한 칸이다.
 * 색은 사이트 토큰과 키트의 탁구 소품 색만 — 다크 모드가 한 곳에서 바뀌게. 움직임은 transform·opacity 만,
 * prefers-reduced-motion 이면 맨 아래에서 멈춘다. 누르는 것(칩·표 칸 단추·링크)은 모두 44px 이상.
 */
.tlHero{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-4)}
.tlHero .tpPongi{width:76px}
.tlHero h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin:0 0 var(--sp-1)}
.tlHero .lead{color:var(--dim);font-size:var(--fs-lg);margin:0}
.tlTalk{margin:0 0 var(--sp-5)}
.tlTalk .tpPongi{width:44px}
.tlTalk .tpBubble{font-size:var(--fs-md)}

/* 나라·언어 칩 */
.tlTools[hidden]{display:none}
.tlToolsH{margin:0 0 var(--sp-2);font-weight:700;font-size:var(--fs-sm);color:var(--dim)}
.tlChips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.tlChip{appearance:none;font:inherit;cursor:pointer;min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid var(--border-2);
  background:var(--surface);color:var(--text);font-size:var(--fs-md);font-weight:650;display:inline-flex;align-items:center;gap:6px;
  transition:transform .25s var(--tp-spring),border-color .15s}
.tlChip b{font-variant-numeric:tabular-nums;color:var(--dim);font-weight:700}
.tlChip:hover{border-color:var(--accent);transform:translateY(-1px)}
.tlChip:focus-visible,.tlRowBtn:focus-visible,.tlCard a:focus-visible,.tlJump a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tlChip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-hover);color:var(--on-accent,#fff)}
.tlChip[aria-pressed="true"] b{color:inherit}
.tlEmpty{margin:0;color:var(--dim);font-size:var(--fs-md);min-height:1em}

/* 분류로 건너뛰기 */
.tlJump ul{list-style:none;padding:0;margin:var(--sp-3) 0 var(--sp-6);display:flex;flex-wrap:wrap;gap:6px 8px}
.tlJump a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;background:var(--surface-2);color:var(--text);
  text-decoration:none;font-size:var(--fs-md);font-weight:600}
.tlJump a:hover{color:var(--accent-text)}
.tlJump .dim{margin-left:6px;font-variant-numeric:tabular-nums}

/* 분류 */
.tlCat{margin:0 0 var(--sp-7);scroll-margin-top:72px}
.tlCat[hidden]{display:none}
.tlCat h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tlCat h2 .dim{font-size:var(--fs-md);font-weight:500}
.tlBall{width:18px;height:18px;border-radius:50%;background:var(--bc,var(--tp-ball));border:2.5px solid var(--tp-ink);flex:none}
.c-federation{--bc:var(--accent)}.c-league{--bc:var(--tp-sun)}.c-broadcast{--bc:#4d8fe0}.c-gear{--bc:var(--tp-orange)}
.c-community{--bc:#3bb273}.c-lessons{--bc:#9b6bd6}.c-rules{--bc:var(--tp-ball)}.c-apps{--bc:#2bb3b1}.c-stats{--bc:#e0609b}
.tlGrid{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tlCard{display:grid;align-content:start;gap:6px;padding:var(--sp-3) var(--sp-4) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  min-width:0;animation:tlIn .4s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 18ms)}
.tlCard[hidden]{display:none}
.tlCard:hover{border-color:var(--border-2)}
.tlTop{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tlRegion,.tlLang{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;font-size:var(--fs-xs,12px);font-weight:700;line-height:1.6}
.tlRegion{background:var(--accent-bg);color:var(--accent-fg,var(--accent-text))}
.tlLang{background:var(--surface-2);color:var(--dim)}
.tlCard h3{margin:0;font-size:var(--fs-base);line-height:1.35}
.tlCard h3 a{display:inline-flex;align-items:flex-start;gap:4px;min-height:44px;align-items:center;color:var(--text);text-decoration:none;font-weight:750;overflow-wrap:anywhere}
.tlCard h3 a:hover{color:var(--accent-text);text-decoration:underline}
.tlOut{color:var(--dim);font-size:.85em}
.tlDesc{margin:0;font-size:var(--fs-md);line-height:1.6;color:var(--text)}
.tlCheck{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:var(--fs-sm);color:var(--dim)}
.tlDot{width:8px;height:8px;border-radius:50%;background:var(--ok-fill,var(--ok));flex:none}
.tlCheck.warn .tlDot{background:var(--warn-fill)}
.tlNone[hidden]{display:none}
@keyframes tlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 나라 × 분류 표 — 폰에서는 표 칸만 가로로 밀린다(쪽 전체가 밀리지 않게) */
.tlMatrix{margin:var(--sp-7) 0}
.tlMatrix h2{font-size:var(--fs-xl);margin:0 0 var(--sp-1)}
.tlTableWrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);margin:var(--sp-3) 0 0}
.tlTableWrap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tlMatrix table{border-collapse:collapse;width:100%;min-width:720px;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tlMatrix th,.tlMatrix td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:center}
.tlMatrix thead th{color:var(--dim);font-weight:600;vertical-align:bottom;white-space:nowrap}
.tlMatrix thead a{color:inherit}
.tlMatrix tbody th{text-align:left;position:sticky;left:0;background:var(--surface)}
.tlMatrix td.zero{color:var(--dimmer)}
.tlMatrix td.sum{font-weight:800}
.tlRowBtn{display:inline-flex;align-items:center;font-weight:700;color:var(--accent-text);min-height:44px;padding:0 4px;white-space:nowrap}
.tlRowBtn:hover{text-decoration:underline}

.tlHow{border-top:1px solid var(--border);padding-top:var(--sp-5);margin:var(--sp-7) 0 0}
.tlHow h2{font-size:var(--fs-lg);margin:0 0 var(--sp-2)}
.tlHow ul{margin:0 0 var(--sp-3);padding-left:var(--sp-5);font-size:var(--fs-md)}
.tlHow li{margin:0 0 var(--sp-1)}

/* 폰: 카드가 첫 화면에 보이게 — 칩과 분류는 한 줄로 가로로 밀고(쪽은 밀리지 않는다), 말풍선은 맨 아래 「어떻게 골랐나요」 가 대신한다 */
@media (max-width:520px){
  .tlHero{gap:var(--sp-3);margin-bottom:var(--sp-3)}
  .tlHero .tpPongi{width:52px}
  .tlHero h1{font-size:var(--fs-2xl)}
  .tlHero .lead{font-size:var(--fs-md)}
  .tlTalk{display:none}
  .tlChips,.tlJump ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tlChips::-webkit-scrollbar,.tlJump ul::-webkit-scrollbar{display:none}
  .tlChip,.tlJump a{flex:none;white-space:nowrap}
  .tlJump ul{margin:var(--sp-2) 0 var(--sp-5)}
  .tlGrid{grid-template-columns:1fr;gap:var(--sp-2)}
  .tlCard{padding:var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  .tlCard{animation:none}
  .tlChip{transition:none}
}