/* 탁구 동호회(app/tt_clubs.py, tt/clubs/*.js) — 놀이터 키트(kit.css) 위에 얹는다.
 *
 * 색·간격은 사이트 토큰(/design.css)과 키트의 탁구 소품 색(--tp-ball·--tp-table…)만 쓴다 — 다크 모드가 한 곳에서 바뀌게.
 * 새로 정하는 색은 엠블럼 바탕(--em, 서버의 고정 목록)과 메달(금·은·동)뿐이다.
 * 움직임은 transform·opacity 만(저사양 폰에서 레이아웃을 다시 계산하지 않게). 카드는 랠리처럼 차례로 날아와 앉고,
 * 참석을 누르면 공이 통 튀고, 1위 티티는 단상에서 뛴다. prefers-reduced-motion 이면 맨 아래에서 전부 멈춘다.
 */
:root { --tc-gold: #f2b23c; --tc-silver: #b8bcc6; --tc-bronze: #c98552; }

/* ── 엠블럼: 바탕색 동그라미 위의 티티 ─────────────────────── */
.tcEmblem { --em: #b3123f; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, color-mix(in srgb, #fff 28%, var(--em)) 0 18%, var(--em) 62%);
  border: 3px solid var(--tp-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--em) 55%, #000); overflow: hidden; line-height: 0; }
.tcEmblem .pongi { width: 82%; height: auto; margin-top: 10%; }
.tcEmblem .pongi .p-shadow { display: none; }
.tcEmblem.sm { width: 44px; height: 44px; border-width: 2px; box-shadow: 0 3px 0 color-mix(in srgb, var(--em) 55%, #000); }
.tcEmblem.lg { width: 104px; height: 104px; border-width: 4px; }
.tcEmblem.lg .pongi .p-body { transform-box: fill-box; transform-origin: 50% 100%; animation: tcBob 2.4s ease-in-out infinite; }

/* ── 머리 ─────────────────────────────────────────────────── */
.tcHero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-5);
  margin: 0 0 var(--sp-6); padding: var(--sp-6); border-radius: 28px; color: #fff;
  background: radial-gradient(circle at 14px 14px, color-mix(in srgb, #fff 16%, transparent) 3px, transparent 3.5px) 0 0/30px 30px,
    linear-gradient(135deg, var(--accent), var(--accent-hover)); }
.tcHero h1 { margin: 0 0 var(--sp-2); font-size: clamp(30px, 6vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.tcHero p { margin: 0; font-size: var(--fs-lg); line-height: 1.55; max-width: 32em; }
.tcHeroBtns { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4) !important; }
.tcHero .tpBtn { background: #fff; color: #93102f; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); text-decoration: none; }
.tcHero .tpBtn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.tcHeroArt { position: relative; width: 210px; height: 130px; }
.tcHeroArt .tcEmblem { position: absolute; bottom: 20px; animation: tcBob 2.2s ease-in-out infinite; }
.tcHeroArt .a1 { left: 0; animation-delay: -.4s; }
.tcHeroArt .a2 { left: 70px; bottom: 34px; width: 76px; height: 76px; animation-delay: -1.1s; }
.tcHeroArt .a3 { right: 0; animation-delay: -1.7s; }
.tcNet { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 10px; border-radius: 6px; background: var(--tp-table); border: 2px solid #fff; }
.tcNet::after { content: ""; position: absolute; left: 50%; top: -12px; width: 3px; height: 12px; margin-left: -1px; background: #fff; border-radius: 2px; }

.tcBack { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.tcH2 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-xl); }
.tcNote, .tcSide { color: var(--dim); font-size: var(--fs-sm); margin: var(--sp-4) 0; }
.tcMeta { color: var(--dim); font-size: var(--fs-sm); }
.tcTag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; border-radius: 999px; padding: 2px 10px; font-size: var(--fs-xs);
  font-weight: 700; background: var(--accent-bg); color: var(--accent-fg); vertical-align: 2px; white-space: nowrap; }
.tcTag.isWait { background: var(--warn-bg); color: var(--warn); }
.tcTag.isWarn { background: var(--err-bg); color: var(--err); }
/* 글자 단추도 터치 영역은 44px — 폰에서 「탈퇴」·「신고」 를 옆 단추와 헷갈려 누르지 않게. */
.tcLink { appearance: none; border: 0; background: none; padding: 6px 6px; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-text); font: inherit; font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tcLink.danger { color: var(--err); }
.tcLink:disabled { opacity: .5; cursor: progress; }
.tcBtns { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-3) 0 0; }
.tcTools { margin: 0 0 var(--sp-4); }

/* ── 지역 칩 ──────────────────────────────────────────────── */
.tcChips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.tcChip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; min-height: 44px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--border-2);
  background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
  transition: transform .2s var(--tp-spring), border-color .15s; }
.tcChip b { color: var(--dim); font-variant-numeric: tabular-nums; }
.tcChip:hover { transform: translateY(-2px); border-color: var(--accent); }
.tcChip[aria-current="page"] { background: var(--accent); border-color: var(--accent-hover); color: #fff; }
.tcChip[aria-current="page"] b { color: #fff; }

/* ── 카드 ─────────────────────────────────────────────────── */
.tcCards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tcCards > li { animation: tcFly .55s var(--tp-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
.tcCard, .tcMineCard { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 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), box-shadow .25s var(--tp-spring), border-color .15s; min-width: 0; }
.tcCard:hover, .tcMineCard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 7px 0 var(--accent); }
.tcCard:hover .tcEmblem .p-body, .tcMineCard:hover .tcEmblem .p-body { transform-box: fill-box; transform-origin: 50% 100%; animation: tcHop .6s var(--tp-spring); }
.tcCard:focus-visible, .tcMineCard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tcCardTxt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tcCardTxt b { font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcCardTxt .tcMeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcCount { display: grid; justify-items: end; gap: 6px; font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; }
.tcCount .tcTag { margin: 0; }
.tcCount b { font-size: var(--fs-xl); color: var(--text); font-variant-numeric: tabular-nums; }
.tcCount.sm { display: inline; margin-left: 6px; font-size: var(--fs-xs); }
.tcMine { margin: 0 0 var(--sp-5); }
.tcMineList { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tcMineEmpty { color: var(--dim); }
.tcDday { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--tp-ball); color: var(--tp-ink); border: 2px solid var(--tp-ink);
  font-size: var(--fs-xs); font-weight: 900; margin-left: 6px; }
.tcDday.isToday { background: var(--tp-orange); animation: tcPulse 1.4s ease-in-out infinite; }

.tcEmpty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border: 2px dashed var(--border-2); border-radius: 22px; background: var(--surface); }
.tcEmpty p { margin: 0; }
.tcEmpty.small { padding: var(--sp-4); }
.tcEmpty .tpPongi { width: 72px; }
.tcEmpty .tpPongi.sm { width: 52px; }

/* 스켈레톤 — 실제 카드와 같은 모양의 회색 판. 빛이 한 번씩 지나간다(움직임 줄이기면 멈춘다). */
.tcSkels { display: grid; gap: var(--sp-3); }
.tcSkel { display: grid; gap: 10px; padding: var(--sp-4); border: 2px solid var(--border-2); border-radius: 20px; background: var(--surface); position: relative; overflow: hidden; }
.tcSkel i { display: block; height: 14px; border-radius: 7px; background: var(--surface-3); }
.tcSkel i:first-child { width: 55%; height: 18px; }
.tcSkel i:nth-child(2) { width: 85%; }
.tcSkel i:nth-child(3) { width: 40%; }
.tcSkel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: tcShine 1.4s ease-in-out infinite; }
@keyframes tcShine { to { transform: translateX(100%); } }
.tcLoading { display: flex; align-items: center; gap: var(--sp-3); color: var(--dim); padding: var(--sp-4) 0; }
.tcDots { display: inline-flex; gap: 6px; }
.tcDots i { width: 10px; height: 10px; border-radius: 50%; background: var(--tp-orange); animation: tcDot 1s var(--tp-spring) infinite; }
.tcDots i:nth-child(2) { animation-delay: .15s; background: var(--accent); }
.tcDots i:nth-child(3) { animation-delay: .3s; background: var(--tp-ball); border: 1px solid var(--border-2); }

/* ── 만들기 폼 ─────────────────────────────────────────────── */
.tcFormHead { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.tcFormHead h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-3xl); }
.tcFormHead p { margin: 0; color: var(--dim); }
.tcForm { display: grid; gap: var(--sp-4); max-width: 680px; }
.tcForm.tcLocked { opacity: .55; }
.tcField { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tcField > span, .tcField > legend { font-weight: 800; font-size: var(--fs-md); padding: 0; }
.tcField i { font-style: normal; font-size: var(--fs-xs); color: var(--accent-text); margin-left: 4px; }
.tcField small { color: var(--dim); font-size: var(--fs-sm); }
.tcField input:not([type=radio]), .tcField select, .tcField textarea, .tcCommentForm textarea, .tcCap, .tcInvite {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--surface);
  border: 2px solid var(--border-input, var(--border-2)); border-radius: 14px; padding: 10px 12px; }
.tcField input:focus, .tcField select:focus, .tcField textarea:focus, .tcCommentForm textarea:focus { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.tcField input:disabled { opacity: .5; }
.tcRow { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcVisList { display: grid; gap: var(--sp-2); }
.tcVis { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 2px solid var(--border-2); border-radius: 16px; cursor: pointer; background: var(--surface); }
.tcVis:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.tcVis input { margin-top: 4px; accent-color: var(--accent); }
.tcVis span { display: grid; gap: 2px; }
.tcVis small { color: var(--dim); }
.tcEmblems { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.tcEmblemPick { position: relative; display: grid; justify-items: center; gap: 4px; padding: var(--sp-2); border: 2px solid transparent; border-radius: 18px;
  cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--dim); text-align: center; }
.tcEmblemPick input { position: absolute; opacity: 0; pointer-events: none; }
.tcEmblemPick:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--text); }
.tcEmblemPick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.tcEmblemPick:has(input:checked) .tcEmblem { transform: translateY(-3px) scale(1.06); }
.tcEmblemPick .tcEmblem { transition: transform .3s var(--tp-spring); }
.tcSubmit { margin: var(--sp-2) 0 0; }
.tcGate:empty { display: none; }
.tcGateCard { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-4); margin: 0 0 var(--sp-4); border: 2px solid var(--accent);
  border-radius: 18px; background: var(--accent-bg); }
.tcGateCard p { margin: 0; flex: 1 1 220px; }
.tcGateCard .tpBtn { text-decoration: none; }
[data-question][hidden] { display: none; }

/* ── 동호회 화면 ───────────────────────────────────────────── */
.tcClubHead { display: flex; gap: var(--sp-4); align-items: center; margin: 0 0 var(--sp-4); }
.tcClubHead h1 { margin: 0 0 var(--sp-1); font-size: clamp(26px, 5vw, 38px); line-height: 1.15; overflow-wrap: anywhere; }
.tcFacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--dim); font-size: var(--fs-md); }
.tcIntro { white-space: pre-line; font-size: var(--fs-md); line-height: 1.65; padding: var(--sp-4); border-radius: 18px; background: var(--surface-2); margin: 0 0 var(--sp-4); overflow-wrap: anywhere; }
.tcApp { min-height: 200px; }
.tcSsr h2 { font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-2); }
.tcSsrList { margin: 0; padding-left: var(--sp-5); display: grid; gap: 4px; }
.tcSsrList li .tcMeta { margin-left: 8px; }
.tcBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
  border: 2px solid var(--border-2); border-radius: 18px; background: var(--surface); }
.tcBar .tpBtn { text-decoration: none; }
.tcJoin { animation: tcNudge 2.8s ease-in-out 1s infinite; }
.tcRole { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }
.tcBall { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--tp-ball); border: 2px solid var(--tp-ink); flex: none; }
.tcRole .tcBall { background: var(--tp-orange); animation: tcBob 1.8s ease-in-out infinite; }
.tcToggle { appearance: none; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; padding: 6px 14px; min-height: 44px; border-radius: 999px;
  border: 2px solid var(--border-2); background: var(--surface-2); color: var(--text); }
.tcToggle.isOn { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-text); }

/* 탭 — 고른 탭 밑에서 공이 통 튄다 */
.tcTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); border-bottom: 2px solid var(--border-2); }
.tcTab { position: relative; appearance: none; border: 0; background: none; font: inherit; font-weight: 800; font-size: var(--fs-md); color: var(--dim);
  padding: 10px 14px 14px; min-height: 44px; min-width: 44px; cursor: pointer; border-radius: 12px 12px 0 0; }
.tcTab:hover { color: var(--text); background: var(--surface-2); }
.tcTab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.tcTab[aria-selected="true"] { color: var(--accent-text); }
.tcTab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--tp-orange); border: 2px solid var(--tp-ink); animation: tcBob 1.6s ease-in-out infinite; }
.tcPanel:focus { outline: none; }

/* 모임 카드 */
.tcMeetups { display: grid; gap: var(--sp-3); }
.tcMeetup { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border: 2px solid var(--border-2); border-radius: 20px;
  background: var(--surface); box-shadow: 0 4px 0 var(--border-2); animation: tcFly .5s var(--tp-spring) both; animation-delay: calc(var(--i, 0) * 70ms); }
.tcMeetup.ans-yes { border-color: var(--ok-fill, var(--ok)); box-shadow: 0 4px 0 var(--ok-fill, var(--ok)); }
.tcMeetup.ans-wait { border-color: var(--warn-fill, var(--warn)); box-shadow: 0 4px 0 var(--warn-fill, var(--warn)); }
.tcMeetup.isCanceled { opacity: .6; }
.tcMeetup { position: relative; }
/* 다음 모임 — 크림슨 테두리와 옅은 판, 모서리의 「다음 모임」 리본 */
.tcMeetup.isNext { border-color: var(--accent); box-shadow: 0 5px 0 var(--accent); background: linear-gradient(180deg, var(--accent-bg), var(--surface) 75%); padding-top: calc(var(--sp-4) + 10px); }
.tcNextLabel { position: absolute; top: -12px; left: 18px; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: var(--fs-xs); font-weight: 900; box-shadow: 0 3px 0 var(--accent-hover); }
.tcNextLabel::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--tp-ball); border: 1.5px solid var(--tp-ink); vertical-align: 0; animation: tcBob 1.4s ease-in-out infinite; }
.tcMeetup h3 { margin: 0; font-size: var(--fs-lg); }
.tcMeetup p { margin: 2px 0; }
.tcDate { display: grid; place-items: center; width: 58px; height: 64px; border-radius: 14px; background: var(--tp-table); color: #fff; border: 3px solid var(--tp-ink);
  position: relative; grid-row: span 2; }
.tcDate b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.tcDate span { font-size: var(--fs-xs); font-weight: 700; }
.tcDate::before { content: ""; position: absolute; top: -9px; right: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--tp-ball); border: 2px solid var(--tp-ink); }
.tcMeetupTxt { min-width: 0; overflow-wrap: anywhere; }
.tcNoteText { white-space: pre-line; color: var(--text); font-size: var(--fs-sm); }
.tcMeetupActs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tcRsvp { appearance: none; font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 2px solid var(--border-2); background: var(--surface-2); color: var(--text); transition: transform .2s var(--tp-spring); }
.tcRsvp:hover { transform: translateY(-2px); }
.tcRsvp:active { transform: translateY(2px) scale(.97); }
/* 채움 위 글자는 대비 AA 를 맞춘다 — 다크 모드의 --ok 는 밝은 초록이라 흰 글자를 못 올린다(채움 토큰 -fill 을 쓴다). */
.tcRsvp.yes.isOn { background: var(--ok-fill, var(--ok)); border-color: var(--ok-fill, var(--ok)); color: #fff; }
.ans-wait .tcRsvp.yes.isOn { background: var(--warn-fill, var(--warn)); border-color: var(--warn-fill, var(--warn)); color: var(--tp-ink); }
.tcRsvp.no.isOn { background: var(--surface-3); border-color: var(--dimmer); }
.tcRsvp.yes.isOn::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--tp-ball);
  border: 2px solid var(--tp-ink); vertical-align: -1px; animation: tcBob 1.2s ease-in-out infinite; }
.tcRsvp:disabled { opacity: .6; cursor: progress; }
.tcSeats { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: -2px; margin-left: 6px; }
.tcSeats i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--surface-2); }
.tcSeats i.isOn { background: var(--tp-orange); border-color: var(--tp-ink); animation: tcPop .4s var(--tp-spring) both; animation-delay: var(--d, 0ms); }
.tcSeatBar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; vertical-align: 1px; margin-left: 6px; }
.tcSeatBar i { display: block; height: 100%; background: var(--tp-orange); }
.tcWho { grid-column: 1 / -1; border-top: 2px dashed var(--border-2); padding-top: var(--sp-3); }
.tcWho h4 { margin: var(--sp-2) 0; font-size: var(--fs-md); }
.tcPeople { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tcPeople li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--surface-2);
  font-weight: 700; font-size: var(--fs-sm); animation: tcPop .35s var(--tp-spring) both; animation-delay: calc(var(--i, 0) * 30ms); }
.tcPeople.isWait li { background: var(--warn-bg); }
.tcMatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tcMatches li { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--tp-table); color: #fff; }
.tcMatches li b:last-child { text-align: right; }
.tcMatches b.isWin::after { content: " 🏆"; }
.tcScore { font-weight: 900; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 999px; background: var(--tp-ball); color: var(--tp-ink); }
.tcOps { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.tcCap { width: 110px !important; }
.tcPast { margin-top: var(--sp-4); }
.tcPast summary { cursor: pointer; font-weight: 800; padding: var(--sp-2) 0; }
.tcPast .tcMeetup { margin-top: var(--sp-2); }

/* 게시판 */
.tcPosts { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 6px; }
.tcPosts.pinned { padding-bottom: var(--sp-3); border-bottom: 2px dashed var(--border-2); }
.tcPostBtn { appearance: none; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--border-2); border-radius: 16px; background: var(--surface); transition: transform .2s var(--tp-spring), border-color .15s; }
.tcPostBtn:hover { transform: translateX(4px); border-color: var(--accent); }
.tcPost.isNotice .tcPostBtn { background: var(--accent-bg); }
.tcPost.isHidden .tcPostBtn { opacity: .6; border-style: dashed; }
.tcPostTitle { font-weight: 800; overflow-wrap: anywhere; }
.tcPostTitle .tcTag:first-child { margin: 0 6px 0 0; }
.tcExcerpt { color: var(--dim); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcArticle { padding: var(--sp-4); border: 2px solid var(--border-2); border-radius: 18px; background: var(--surface); margin: var(--sp-2) 0 var(--sp-4); }
.tcArticle h3 { margin: 0 0 4px; font-size: var(--fs-xl); overflow-wrap: anywhere; }
.tcBody { line-height: 1.7; overflow-wrap: anywhere; }
.tcBody p { margin: var(--sp-2) 0; }
.tcBody ul { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.tcPostActs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.tcComments { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); }
.tcComments li { padding: var(--sp-3); border-radius: 14px; background: var(--surface-2); }
.tcComments li.isHidden { opacity: .6; }
.tcCommentForm { display: flex; gap: var(--sp-2); align-items: flex-end; }
.tcCommentForm textarea { flex: 1; }

/* 회원 */
.tcMembers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tcMembers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 2px solid var(--border-2); border-radius: 16px;
  background: var(--surface); animation: tcFly .45s var(--tp-spring) both; animation-delay: calc(var(--i, 0) * 35ms); }
.tcAvatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tp-ball); color: var(--tp-ink); border: 2.5px solid var(--tp-ink);
  font-weight: 900; flex: none; }
.tcAvatar.r-owner { background: var(--tc-gold); }
.tcAvatar.r-admin { background: var(--tp-orange); }
.tcMemberTxt { display: grid; min-width: 0; flex: 1; }
.tcMemberTxt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcMemberOps { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; }

/* 순위 — 단상 */
.tcPodium { list-style: none; margin: var(--sp-4) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); align-items: end; }
.tcPodium li { display: grid; justify-items: center; gap: 4px; padding: var(--sp-3) var(--sp-2); border-radius: 16px 16px 6px 6px; background: var(--tp-table); color: #fff;
  text-align: center; animation: tcRise .6s var(--tp-spring) both; min-width: 0; }
.tcPodium li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tcPodium li .tcMeta { color: rgba(255, 255, 255, .8); }
.tcPodium .p1 { min-height: 170px; animation-delay: .2s; }
.tcPodium .p2 { min-height: 130px; animation-delay: .1s; }
.tcPodium .p3 { min-height: 110px; animation-delay: .3s; }
.tcPodium .tpPongi { width: 54px; margin-top: -40px; }
.tcMedal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--tp-ink); color: var(--tp-ink); font-weight: 900; }
.p1 .tcMedal { background: var(--tc-gold); }
.p2 .tcMedal { background: var(--tc-silver); }
.p3 .tcMedal { background: var(--tc-bronze); }
.tcRankList { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); display: grid; gap: 4px; }
.tcRankList li .tcMeta { margin-left: 8px; }
.tcRankList.prov { list-style: none; padding-left: 0; }

/* 운영 */
.tcAdmin h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-lg); }
.tcPending { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.tcPending li { padding: var(--sp-3); border: 2px solid var(--border-2); border-radius: 14px; background: var(--surface); display: grid; gap: 4px; }
.tcQuote { margin: 0; padding: 6px 10px; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; white-space: pre-line; overflow-wrap: anywhere; }
.tcQuestion { margin: 0; padding: var(--sp-3); border-radius: 14px; background: var(--surface-2); }
.tcConsent { font-size: var(--fs-sm); color: var(--dim); margin: 0; }
.tcInviteRow { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.tcInvite { flex: 1 1 220px; font-size: var(--fs-sm) !important; }
.tcReasons { display: grid; gap: 6px; }
.tcReasons label { display: flex; gap: 8px; align-items: center; }

/* 창 */
.tcDialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 3px solid var(--tp-ink); border-radius: 24px; padding: 0;
  background: var(--bg-elev, var(--surface)); color: var(--text); box-shadow: 0 10px 0 rgba(0, 0, 0, .2); }
.tcDialog[open] { animation: tcPopIn .4s var(--tp-spring); }
.tcDialog::backdrop { background: rgba(20, 14, 16, .55); }
.tcDialogHead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid var(--border-2); }
.tcDialogHead h2 { margin: 0; font-size: var(--fs-lg); flex: 1; }
.tcMini { display: inline-block; width: 38px; line-height: 0; }
.tcMini .pongi { width: 100%; height: auto; }
.tcClose { appearance: none; border: 0; background: var(--surface-2); color: var(--text); width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.tcDialogBody { padding: var(--sp-4); overflow-y: auto; }

/* 알림 */
.tcToasts { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: grid; gap: 8px;
  width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.tcToast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--tp-table); color: #fff; font-weight: 700;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25); animation: tcPopIn .35s var(--tp-spring); transition: opacity .4s, transform .4s; }
.tcToast.err { background: var(--err-fill, var(--err)); }
.tcToast.out { opacity: 0; transform: translateY(10px); }
.tcToastBall { width: 14px; height: 14px; border-radius: 50%; background: var(--tp-ball); border: 2px solid var(--tp-ink); flex: none; animation: tcBounce .7s var(--tp-spring) 2; }

/* ── 움직임 ──────────────────────────────────────────────── */
.tcBoing { animation: tcBoing .55s var(--tp-spring); }
.tcShake { animation: tcShake .35s; }
.tcHit { animation: tcHit .45s var(--tp-spring); }
.tcIn { animation: tcIn .35s var(--tp-spring); }
.tcGlow { animation: tcGlow 1s ease; }
@keyframes tcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tcHop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px) scale(.96, 1.04); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
@keyframes tcFly { from { opacity: 0; transform: translate(-24px, -14px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes tcPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tcPopIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tcBoing { 0% { transform: scale(1); } 35% { transform: scale(1.04, .96); } 70% { transform: scale(.98, 1.02); } 100% { transform: scale(1); } }
@keyframes tcShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes tcHit { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: none; } }
@keyframes tcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tcGlow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tp-orange) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes tcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes tcDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tcBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tcNudge { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-3deg) translateY(-2px); } 96% { transform: rotate(3deg) translateY(-2px); } }
@keyframes tcRise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 좁은 화면(폰) ─────────────────────────────────────────── */
@media (max-width: 560px) {
  .tcHero { grid-template-columns: 1fr; padding: var(--sp-5); }
  .tcHeroArt { width: 190px; height: 110px; justify-self: center; }
  .tcHeroArt .a2 { left: 62px; }
  .tcRow { grid-template-columns: 1fr; }
  .tcClubHead { align-items: flex-start; }
  .tcEmblem.lg { width: 76px; height: 76px; }
  .tcTab { padding: 8px 10px 12px; font-size: var(--fs-sm); }
  .tcMeetup { padding: var(--sp-3); gap: var(--sp-2) var(--sp-3); }
  .tcDate { width: 50px; height: 56px; }
  .tcEmblems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcCommentForm { flex-direction: column; align-items: stretch; }
}

/* ── 움직임 줄이기: 전부 멈춘다 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tcEmblem .p-body, .tcHeroArt .tcEmblem, .tcCards > li, .tcMeetup, .tcMembers li, .tcPeople li, .tcPodium li, .tcSeats i.isOn,
  .tcTab[aria-selected="true"]::after, .tcRole .tcBall, .tcRsvp.yes.isOn::before, .tcDday.isToday, .tcSkel::after, .tcDots i, .tcToast, .tcToastBall,
  .tcDialog[open], .tcJoin, .tcNextLabel::before, .tcSkel, .tcBoing, .tcShake, .tcHit, .tcIn, .tcGlow, .tcCard:hover .tcEmblem .p-body, .tcMineCard:hover .tcEmblem .p-body {
    animation: none !important; }
  .tcCard, .tcMineCard, .tcChip, .tcRsvp, .tcPostBtn, .tcEmblemPick .tcEmblem, .tcToast { transition: none !important; }
  .tcCard:hover, .tcMineCard:hover, .tcChip:hover, .tcRsvp:hover, .tcPostBtn:hover { transform: none; }
}

/* ── 키보드 포커스 — 어느 단추든 크림슨 테두리로 보인다 ─────── */
.tcLink:focus-visible, .tcToggle:focus-visible, .tcRsvp:focus-visible, .tcPostBtn:focus-visible, .tcClose:focus-visible,
.tcChip:focus-visible, .tcBar .tpBtn:focus-visible, .tcApp .tpBtn:focus-visible, .tcVis:has(input:focus-visible) {
  outline: 3px solid var(--accent); outline-offset: 2px; }
/* 키트의 작은 단추(40px)도 여기서는 44px — 동호회 화면은 폰에서 손가락으로 누르는 일이 대부분이다. */
.tcApp .tpBtn.small, .tcDialog .tpBtn.small, .tcGateCard .tpBtn, .tcBar .tpBtn, .tcTools .tpBtn { min-height: 44px; }
.tcNext { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; white-space: normal !important; }
.tcNext .tcDday { margin-left: 0; }
.tcSsrMeet li:first-child { padding: 6px 10px; border-radius: 12px; background: var(--accent-bg); color: var(--accent-fg); list-style-position: inside; }