/* 탁구 대회·리그(/tt/events) — 놀이터 키트(kit.css) 위에 얹는다. 설계 docs/superpowers/specs/2026-10-11-tt-events-leagues-design.md
 *
 * 색·간격·모서리·그림자는 사이트 토큰(design.css)과 키트의 탁구 소품 색(--tp-*)만 쓴다 — 다크 모드가 한 곳에서 바뀌고,
 * 탁구장 찾기(venues.css)와 같은 카드 모양(2px 테두리·20px 모서리·아래로 4px 그림자)이 된다.
 * 정보가 먼저다: 날짜·이름이 가장 크고, 움직임은 카드가 차례로 날아와 앉는 것과 진행 중 표시의 깜빡임뿐이다.
 * 움직임은 transform·opacity 만. prefers-reduced-motion 이면 맨 아래에서 전부 멈춘다.
 */
.teHero .heroTxt p{max-width:38em}
/* 한국어는 낱말 중간에서 줄을 바꾸지 않는다(「안내」 가 「안 / 내」 로 갈라졌다). 아주 긴 로마자 이름은 그래도 넘치지 않게 anywhere. */
.teHero h1,.teHero p,.teCalName,.teCardTxt b,.teNextTop b,.teHead h1,.teHead p,.teEmpty p,.teTalk .tpBubble{word-break:keep-all;overflow-wrap:anywhere}

/* 갈래 그림 */
/* 그림은 탁구공 색 판 위에 — 선이 잉크색이라 다크 모드의 검은 바탕에 그대로 두면 사라진다. */
.teIco{flex:none;width:44px;height:44px;box-sizing:border-box;padding:3px;border-radius:14px;background:var(--tp-ball);border:2px solid var(--tp-ink)}
.teIco.sm{width:28px;height:28px;padding:2px;border-radius:9px;border-width:1.5px;vertical-align:-7px;margin-right:6px}
.teIco.xs{width:22px;height:22px;padding:1px;border-radius:7px;border-width:1.5px;margin-right:2px}
.teIco.lg{width:72px;height:72px;padding:6px;border-radius:20px;box-shadow:0 4px 0 var(--tp-ink)}

/* 나라 칩 — 국기 대신 IOC 세 글자를 적은 탁구공 */
.teFlag{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.teFlagBall{display:inline-grid;place-items:center;min-width:34px;height:20px;padding:0 5px;border-radius:999px;background:var(--tp-ball);
  border:2px solid var(--tp-ink);color:var(--tp-ink);font-size:10.5px;font-weight:900;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.teFlagName{font-size:var(--fs-sm)}

/* 칩(갈래 거르기) */
.teChipsNav{margin:var(--sp-5) 0 var(--sp-4);scroll-margin-top:84px}
.teChips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.teChip{display:inline-flex;align-items:center;gap:6px;min-height:44px;box-sizing:border-box;padding:6px 14px;border:2px solid var(--border-2);
  border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;font-weight:700;font-size:var(--fs-md);
  transition:transform .2s var(--tp-spring),border-color .15s,background-color .15s}
.teChip b{color:var(--dim);font-weight:700;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.teChip:hover{border-color:var(--accent);transform:translateY(-2px)}
.teChip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.teChip[aria-pressed="true"],.teChip[aria-current="true"]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text)}
.teChip[aria-pressed="true"] b,.teChip[aria-current="true"] b{color:var(--accent-text)}

/* 다가오는 대회 — 카드형 달력 */
.teSecHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.teSecHead h2,.teMonth h2,.teGroup h2,.teTbd h2,.teBlock h2{font-size:var(--fs-xl);margin:0 0 var(--sp-2)}
.teMore{font-weight:700;font-size:var(--fs-md);display:inline-flex;align-items:center;min-height:44px}
.teUpcoming{margin:0 0 var(--sp-5)}
.teUpcoming>.dim{margin:0 0 var(--sp-3);font-size:var(--fs-md)}
.teCals{list-style:none;padding:0;margin:0 0 var(--sp-5);display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.teCal{min-width:0;animation:teDeal .5s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 40ms)}
.teCal[hidden]{display:none}
.teCal>a{display:flex;gap:var(--sp-3);align-items:flex-start;height:100%;box-sizing:border-box;padding:var(--sp-4);border:2px solid var(--border-2);
  border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 4px 0 var(--border-2);
  transition:transform .25s var(--tp-spring),border-color .15s}
.teCal>a:hover{transform:translateY(-3px);border-color:var(--accent)}
.teCal>a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.teCal.on>a{border-color:var(--accent);box-shadow:0 4px 0 var(--accent)}
.teDay{flex:none;display:grid;place-items:center;align-content:center;width:56px;height:56px;border-radius:50%;background:var(--tp-ball);
  border:2.5px solid var(--tp-ink);color:var(--tp-ink);line-height:1;box-shadow:inset -5px -6px 0 rgba(42,35,38,.08)}
.teDay b{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.teDay small{font-size:11px;font-weight:800;margin-top:2px}
.teCal.on .teDay{background:var(--accent);border-color:var(--accent-hover);color:#fff}
.teDay.tbd{background:var(--surface-2)}
.teCalBody{display:grid;gap:3px;min-width:0}
.teCalTop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--fs-sm);color:var(--dim)}
.teCalTop .teIco{margin-right:0}
.teCat{font-weight:700}
.teCalName{font-size:var(--fs-lg);line-height:1.35;overflow-wrap:anywhere}
.teCalWhen{font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--fs-md);margin:0}
.teCalWhere{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--dim);font-size:var(--fs-md);margin:0}

/* 남은 날·진행 중 표시 */
.teBadge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 9px;font-size:var(--fs-sm);font-weight:800;
  background:var(--surface-2);color:var(--text);border:1.5px solid var(--border-2);white-space:nowrap}
.teBadge.soon{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent)}
.teBadge.on{background:var(--accent);color:#fff;border-color:var(--accent-hover)}
.teBadge.on i{width:8px;height:8px;border-radius:50%;background:#fff;animation:teLive 1.2s ease-in-out infinite}
.teBadge.tbd{border-style:dashed;color:var(--dim)}
@keyframes teLive{0%,100%{opacity:1}50%{opacity:.25}}

/* 갈래 묶음의 대회·리그 카드 */
.teGroup{margin:0 0 var(--sp-6);scroll-margin-top:84px}
.teGroup[hidden],.teMonth[hidden]{display:none}
.teGroup h2 .dim{font-size:var(--fs-md);font-weight:500}
.teCards{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.teCard{min-width:0;animation:teDeal .5s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 35ms)}
.teCard>a{display:flex;gap:var(--sp-3);align-items:flex-start;height:100%;box-sizing:border-box;padding:var(--sp-4);border:2px solid var(--border-2);
  border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 4px 0 var(--border-2);
  transition:transform .25s var(--tp-spring),border-color .15s}
.teCard>a:hover{transform:translateY(-3px) rotate(-.4deg);border-color:var(--accent)}
.teCard>a:hover .teIco{animation:teHop .5s var(--tp-spring)}
.teCard>a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.teCardTxt{display:grid;gap:4px;min-width:0}
.teCardTxt b{font-size:var(--fs-lg);line-height:1.35;overflow-wrap:anywhere}
.teCycle{color:var(--dim);font-size:var(--fs-sm)}
.teCardNext{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:650;font-variant-numeric:tabular-nums}
.teCardNext.dim{font-weight:400;font-size:var(--fs-sm)}

/* 상세 */
.teHead{align-items:flex-start}
.teHead h1{margin:0 0 var(--sp-2)}
.teHead p{margin:0 0 var(--sp-2)}
.teCatLine{color:var(--accent-text);font-weight:800;font-size:var(--fs-sm);letter-spacing:.02em;margin:0 0 2px!important}
.teOfficial{margin:var(--sp-3) 0 0!important}
.teOfficial .tpBtn{min-height:44px}
.teBlock{margin:var(--sp-6) 0 0}
.teNexts{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.teNext{border:2px solid var(--border-2);border-radius:20px;background:var(--surface);padding:var(--sp-4);box-shadow:0 4px 0 var(--border-2);display:grid;gap:4px;min-width:0}
.teNext.on{border-color:var(--accent);box-shadow:0 4px 0 var(--accent)}
.teNext p{margin:0}
.teNextTop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.teNextTop b{font-size:var(--fs-lg);line-height:1.35;overflow-wrap:anywhere}
.teFacts{display:grid;gap:var(--sp-3);margin:0}
.teFact{border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--r) var(--r) 0;padding:var(--sp-3) var(--sp-4)}
.teFact dt{font-weight:800;font-size:var(--fs-sm);color:var(--accent-text);margin:0 0 4px}
.teFact dd{margin:0;line-height:1.65}
.teLatestHead{margin:0 0 var(--sp-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.teTable table{min-width:0}
.teTable td,.teTable th{vertical-align:middle}
.teTable tbody th{color:var(--text);font-weight:650;font-size:var(--fs-md)}
.teRecords{margin:0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2)}
.teSources{margin:0;padding-left:var(--sp-5);display:grid;gap:4px;font-size:var(--fs-md)}
.teSrc{color:var(--dim);font-size:var(--fs-sm);white-space:normal}
.teSrc a{display:inline-block;padding:2px 0;overflow-wrap:anywhere}
.teActions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-6) 0}
.teActions .tpBtn,.teTbd~p .tpBtn{min-height:44px}
.teTbd{margin:var(--sp-5) 0}
.teTalk{margin:var(--sp-6) 0 var(--sp-4)}
.teTalk .tpPongi{width:64px;flex:none}
.teTalk .tpBubble{font-size:var(--fs-md);margin:0}
.teData{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-4) 0 0}
.teData a{font-weight:700}

/* 비어 있음 */
.teEmpty{display:flex;align-items:center;gap:var(--sp-4);border:2px dashed var(--border-2);border-radius:20px;padding:var(--sp-5);margin:0 0 var(--sp-5);
  background:radial-gradient(circle at 12px 12px,var(--tp-dot) 3px,transparent 3.5px) 0 0/28px 28px,var(--surface)}
.teEmpty .tpPongi{width:84px;flex:none}
.teEmpty p{margin:0;font-weight:650}
.teEmpty.sm{padding:var(--sp-3) var(--sp-4)}
.teEmpty.sm .tpPongi{width:56px}

@keyframes teDeal{from{opacity:0;transform:translate(-16px,12px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes teHop{0%{transform:none}40%{transform:translateY(-6px) rotate(-6deg)}100%{transform:none}}

@media (max-width:640px){
  .teCal>a,.teCard>a{padding:var(--sp-3)}
  .teDay{width:50px;height:50px}
  .teDay b{font-size:19px}
  .teIco.lg{width:52px;height:52px}
  .teHead{flex-direction:column}
  .teChip{padding:6px 12px;font-size:var(--fs-sm)}
  .teEmpty{flex-direction:column;text-align:center}
}

/* ── 움직임 줄이기 ── 정지 화면 */
@media (prefers-reduced-motion:reduce){
  .teCal,.teCard,.teBadge.on i,.teCard>a:hover .teIco{animation:none!important}
  .teChip,.teCal>a,.teCard>a{transition:none}
  .teChip:hover,.teCal>a:hover,.teCard>a:hover{transform:none}
}