/* 세계 탁구 소식(/tt/news/world) — events.css 위에 얹는다. 칩·빈 상태·출처 줄은 대회·리그 화면과 같은 것을 쓴다.
 * 카드는 정보가 먼저다: 제목이 가장 크고, 출처·나라·언어·시각은 한 줄 메타로. 움직임은 카드가 차례로 들어오는 것과
 * 불러오는 동안의 빈 카드(스켈레톤) 반짝임뿐이고, prefers-reduced-motion 이면 멈춘다.
 */
.twFold{margin:var(--sp-4) 0 var(--sp-5)}
.twFold>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;color:var(--accent-text);list-style:none}
.twFold>summary::-webkit-details-marker{display:none}
.twFold>summary::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);transition:transform .25s var(--tp-spring)}
.twFold[open]>summary::before{transform:translateY(2px) scale(.9)}
.twFold>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.twFilters{display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 0;padding:var(--sp-3) var(--sp-4);border:2px solid var(--border-2);border-radius:20px;background:var(--surface)}
.twRow{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:var(--sp-2)}
.twRowName{font-weight:800;font-size:var(--fs-sm);color:var(--dim)}
.twRow .teChip{min-height:44px}
/* 칩 줄은 옆으로 민다 — 줄을 바꾸면 칩만 폰 화면 두 장, 데스크톱에서도 한 장을 채워 기사가 보이지 않았다(375px·1280px 확인).
   끝이 흐려져 더 있다는 것을 보인다. 키보드로는 Tab 이 칩을 차례로 따라가며 줄이 저절로 밀린다. */
.twRow .teChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 3px 5px;margin:0 -3px;
  mask-image:linear-gradient(90deg,#000 90%,transparent)}
.twRow .teChips::-webkit-scrollbar{display:none}
.twRow .teChips li{flex:none}
.twReset{margin:0;font-size:var(--fs-sm)}
.twReset a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.twCards{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%,340px),1fr))}
.twCard{min-width:0;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:6px;align-content:start;animation:teDeal .5s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 30ms)}
.twCard h3{margin:0;font-size:var(--fs-lg);line-height:1.4;overflow-wrap:anywhere}
.twCard h3 a{color:var(--text);text-decoration:none}
.twCard h3 a:hover{color:var(--accent-text);text-decoration:underline}
.twCard h3 a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.twMeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--dim);font-size:var(--fs-sm)}
.twLang{font-weight:700}
.twPara{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:0 8px;background:var(--accent-bg);color:var(--accent-text);font-weight:800}
.twSum{margin:0;font-size:var(--fs-md);color:var(--text);opacity:.9;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.twMore{font-size:var(--fs-md)}
.twMore summary{cursor:pointer;font-weight:700;color:var(--accent-text);min-height:44px;display:flex;align-items:center}
.twMore summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.twMore ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);display:grid;gap:6px}
.twMore .dim{font-size:var(--fs-sm)}

/* 불러오는 중 — 빈 카드 */
.twSkel i{display:block;height:12px;border-radius:6px;background:var(--surface-2);position:relative;overflow:hidden}
.twSkel .twMeta i{width:45%}
.twSkel h3 i{height:18px;margin:0 0 6px}.twSkel h3 i+i{width:70%}
.twSkel p i{width:90%}
.twSkel i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);animation:twShine 1.2s ease-in-out infinite}
@keyframes twShine{to{transform:translateX(100%)}}

@media (max-width:640px){
  /* 머리의 티티는 작게 옆에 — 기사보다 먼저 화면을 차지하지 않게. */
  .twHead{flex-direction:row!important;align-items:flex-start}
  .twHead>.tpPongi{width:48px;flex:none}
  .twRow{grid-template-columns:1fr;gap:4px}
  .twFilters{padding:var(--sp-3)}
  .twCard{padding:var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  .twCard{animation:none!important}
  .twSkel i::after{animation:none}
}