/* 탁구장 찾기 — 놀이터 키트(kit.css) 위에 얹는다.
 *
 * 색·간격은 사이트 토큰과 키트의 탁구 소품 색(--tp-ball·--tp-table…)만 쓴다 — 다크 모드가 한 곳에서 바뀌게.
 * 움직임은 transform·opacity 만. 탭을 고르면 공이 통 튀고, 카드는 랠리처럼 차례로 날아와 앉고,
 * 점 지도의 공은 탁구대 위로 하나씩 떨어진다. prefers-reduced-motion 이면 맨 아래에서 전부 멈춘다.
 */
.tvBack{margin:0 0 var(--sp-3);font-size:var(--fs-md)}
.tvHero .tvNearBtn{background:#fff;color:#93102f;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.tvHero b{color:#fff}
.tvNearRow{margin:var(--sp-4) 0 0!important}
.tvNearBtn[hidden],[data-tv-near][hidden]{display:none}

/* 작은 탁구공 — 탭의 나라 글자, 단추 앞 장식 */
.tvBall{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tp-ball);border:2.5px solid var(--tp-ink);
  color:var(--tp-ink);font-size:11px;font-weight:900;letter-spacing:.02em;box-shadow:inset -4px -5px 0 rgba(42,35,38,.08);flex:none}
.tvBall.sm{width:16px;height:16px;border-width:2px;box-shadow:none}

/* 나라 탭 */
.tvTabs{list-style:none;padding:0;margin:var(--sp-5) 0 var(--sp-4);display:grid;gap:var(--sp-3);grid-template-columns:repeat(4,minmax(0,1fr))}
.tvTab{display:grid;justify-items:center;gap:4px;padding:var(--sp-3) var(--sp-2);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}
.tvTab:hover{transform:translateY(-2px);border-color:var(--accent)}
.tvTab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tvTabName{font-weight:800;font-size:var(--fs-lg)}
.tvTabN{color:var(--dim);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tvJs .tvTab[aria-current="true"]{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 4px 0 var(--accent)}
.tvJs .tvTab[aria-current="true"] .tvBall{background:var(--accent);color:#fff;border-color:var(--accent-hover);animation:tvBob 1.6s ease-in-out infinite}
.tvJs .tvTab[aria-current="true"] .tvTabN{color:var(--accent-text)}
.tvHit{animation:tvHit .5s var(--tp-spring)!important}
@keyframes tvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tvHit{0%{transform:scale(1)}30%{transform:translateY(-12px) scale(1.15,.9)}60%{transform:translateY(0) scale(.92,1.08)}100%{transform:none}}

/* 지역 목록 */
.tvPanel{margin:0 0 var(--sp-6)}
.tvPanel h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tvPanel h2:focus{outline:none}
.tvPanel h2 .dim{font-size:var(--fs-md);font-weight:500}
.tvRegions{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tvRegions a,.tvRegions li.none{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:10px 12px 10px 14px;border-radius:999px;
  border:2px solid var(--border-2);background:var(--surface);color:var(--text);text-decoration:none;font-weight:650;font-size:var(--fs-md)}
.tvRegions a{transition:transform .25s var(--tp-spring),border-color .15s}
.tvRegions a:hover,.tvRegions a:focus-visible{transform:translateY(-2px) rotate(-.5deg);border-color:var(--accent)}
.tvRegions li{min-width:0}
.tvRegions a span,.tvRegions li.none span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tvRegions b{flex:none;display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;background:var(--tp-ball);color:var(--tp-ink);
  border:2px solid var(--tp-ink);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tvRegions b{white-space:nowrap}
.tvRegions a:hover b{animation:tvBob .6s var(--tp-spring)}
.tvRegions li.none{opacity:.55;border-style:dashed;font-weight:500}
.tvRegions li.none b{border-color:var(--border-2);color:var(--dim)}
.tvPanel:not([hidden]) .tvRegions li{animation:tvIn .45s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes tvIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

.tvNote{border:2px dashed var(--accent);background:var(--accent-bg);border-radius:16px;padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--fs-md)}

/* 종류 이름표 — 색 점이 탁구공 */
.tvKinds{list-style:none;padding:0;margin:0 0 var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tvKind{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px 3px 6px;font-size:var(--fs-sm);font-weight:700;background:var(--surface-2);color:var(--text)}
.tvKind::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--kc,var(--tp-ball));border:2px solid var(--tp-ink)}
.k-hall{--kc:var(--accent)}.k-club{--kc:var(--tp-sun)}.k-sports{--kc:var(--tp-orange)}.k-public{--kc:#3bb273}.k-school{--kc:#4d8fe0}.k-user{--kc:#9b6bd6}

/* 점 지도 — 탁구대 위의 탁구공 */
.tvMap{margin:0 0 var(--sp-4)}
.tvMap svg{display:block;width:100%;height:auto;max-height:360px}
.tvMapTable{fill:var(--tp-table);stroke:var(--tp-line);stroke-width:5}
.tvMapLine{stroke:color-mix(in srgb,var(--tp-line) 55%,transparent);stroke-width:2}
.tvMapNet{stroke:color-mix(in srgb,var(--tp-line) 35%,transparent);stroke-width:3;stroke-dasharray:2 7}
.tvDot circle{fill:var(--tp-ball);stroke:var(--tp-ink);stroke-width:2.5;transform-box:fill-box;transform-origin:50% 50%;transition:transform .2s var(--tp-spring),opacity .2s}
.tvDot.k-public circle{fill:var(--tp-orange)}
.tvDot{animation:tvDrop .6s var(--tp-spring) both;animation-delay:var(--d,0ms)}
.tvDot:hover circle,.tvDot:focus circle{transform:scale(1.5)}
.tvDot:focus{outline:none}.tvDot:focus-visible circle{stroke:var(--accent);stroke-width:4}
.tvDot.dim circle{opacity:.18}
@keyframes tvDrop{0%{opacity:0;transform:translateY(-36px)}60%{opacity:1;transform:translateY(3px)}80%{transform:translateY(-4px)}100%{transform:none}}
.tvMap figcaption{font-size:var(--fs-sm);color:var(--dim);margin:6px 0 0}

/* 도구 줄 */
.tvTools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3)}
.tvTools[hidden]{display:none}
.tvFilters{display:flex;flex-wrap:wrap;gap:6px}
.tvFilter{appearance:none;font:inherit;cursor:pointer;border:2px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 12px;
  font-size:var(--fs-sm);font-weight:700;transition:transform .2s var(--tp-spring),border-color .15s}
.tvFilter b{color:var(--dim);font-weight:700;margin-left:2px}
.tvFilter[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg)}
.tvFilter:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tvNearMsg{min-height:1.4em;margin:0 0 var(--sp-3);color:var(--dim);font-size:var(--fs-md)}
.tvBusy{opacity:.7;cursor:progress}

/* 시설 카드 */
.tvList{list-style:none;padding:0;margin:0 0 var(--sp-6);display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.tvCard{position:relative;border:2px solid var(--border-2);border-radius:20px;background:var(--surface);padding:var(--sp-4);box-shadow:0 4px 0 var(--border-2);
  animation:tvDeal .5s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 45ms);scroll-margin-top:84px;min-width:0}
.tvCard[hidden]{display:none}
.tvCard:target{border-color:var(--accent);box-shadow:0 4px 0 var(--accent),0 0 0 4px var(--accent-bg)}
.tvCard h3{margin:var(--sp-2) 0 2px;font-size:var(--fs-lg);line-height:1.35;overflow-wrap:anywhere}
.tvKo{display:block;color:var(--dim);font-size:var(--fs-md);margin:0 0 4px}
.tvCardHead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.tvDist{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:800;color:var(--tp-ink);background:var(--tp-ball);border:2px solid var(--tp-ink);border-radius:999px;padding:1px 9px}
.tvDist[hidden]{display:none}
.tvChips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0}
.tvChip{font-size:var(--fs-xs,12px);font-weight:700;border:1.5px solid var(--border-2);border-radius:999px;padding:0 8px;color:var(--dim)}
.tvFacts{list-style:none;padding:0;margin:var(--sp-2) 0 0;display:grid;gap:4px;font-size:var(--fs-md)}
.tvFacts li{display:flex;gap:6px;align-items:flex-start;overflow-wrap:anywhere}
.tvFacts code{font-size:var(--fs-sm);background:var(--surface-2);border-radius:6px;padding:0 5px;white-space:normal}
.tvIco{flex:none;width:1.2em;text-align:center}
.tvLinks{margin:var(--sp-3) 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--fs-sm)}
.tvLinks a{font-weight:700}
.tvNoteText{margin:var(--sp-2) 0 0;font-size:var(--fs-md);white-space:pre-line;overflow-wrap:anywhere}
.tvRedeal{animation:tvDeal .5s var(--tp-spring) both!important}
.tvGone{animation:tvOut .45s ease forwards}
.tvGone.ok{border-color:var(--ok)}
@keyframes tvDeal{from{opacity:0;transform:translate(-18px,14px) rotate(-3deg) scale(.95)}to{opacity:1;transform:none}}
@keyframes tvOut{to{opacity:0;transform:translateX(40px) rotate(4deg) scale(.9)}}

/* 내 위치 근처(허브) */
.tvNear:empty{display:none}
.tvNear{margin:0 0 var(--sp-5)}
.tvNear h2{font-size:var(--fs-xl);margin:0 0 4px}
.tvNear h2:focus{outline:none}
.tvNearList{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:grid;gap:var(--sp-2)}
.tvNearCard{display:flex;align-items:center;gap:var(--sp-3);border:2px solid var(--border-2);border-radius:18px;background:var(--surface);padding:10px 14px;
  animation:tvRoll .55s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 70ms)}
.tvNearCard a{flex:1;min-width:0;display:grid;text-decoration:none;color:var(--text)}
.tvNearCard a b{overflow-wrap:anywhere}
.tvNearCard .dim{font-size:var(--fs-sm)}
.tvDistBall{flex:none;width:18px;height:18px;border-radius:50%;background:var(--tp-ball);border:2.5px solid var(--tp-ink)}
.tvNearCard:first-child .tvDistBall{background:var(--accent);border-color:var(--accent-hover)}
@keyframes tvRoll{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.tvDots{display:inline-flex;gap:4px;vertical-align:middle}
.tvDots i{width:9px;height:9px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);animation:tvBob .7s ease-in-out infinite}
.tvDots i:nth-child(2){animation-delay:.12s}.tvDots i:nth-child(3){animation-delay:.24s}
.tvSearching .p-body{animation:tpBounce .55s var(--tp-spring) infinite!important}

/* 이용자 제안 */
.tvSuggested{margin:var(--sp-6) 0 var(--sp-5)}
.tvSuggested h2{font-size:var(--fs-xl);margin:0 0 4px}
.tvSuggest{margin:var(--sp-6) 0;padding:var(--sp-5);border:2px dashed var(--border-2);border-radius:24px;
  background:radial-gradient(circle at 12px 12px,var(--tp-dot) 3px,transparent 3.5px) 0 0/28px 28px,var(--surface)}
.tvSuggest .tpTalk{margin:0 0 var(--sp-4)}
.tvSuggest .tpBubble{font-size:var(--fs-md)}
.tvForm{display:grid;gap:var(--sp-3);max-width:560px}
.tvForm label{display:grid;gap:4px;font-weight:700;font-size:var(--fs-md)}
.tvForm input,.tvForm select,.tvForm textarea{font:inherit;font-weight:400;font-size:var(--fs-base);color:var(--text);background:var(--surface);border:2px solid var(--border-2);
  border-radius:12px;padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
.tvForm input:focus,.tvForm select:focus,.tvForm textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.tvForm fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tvForm legend{font-weight:700;font-size:var(--fs-md);margin:0 0 4px;padding:0}
.tvRadio{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer}
.tvRadio input{width:18px;height:18px;min-height:0;accent-color:var(--accent);margin:0}
.tvHere{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0}
.tvHere .dim{font-size:var(--fs-sm)}
.tvForm p{margin:0}
.tvFormMsg{min-height:1.4em;font-weight:700}
.tvFormMsg.ok{color:var(--ok)}.tvFormMsg.err{color:var(--err)}
.tvForm .dim{font-size:var(--fs-sm);font-weight:400}
.tvEmpty{margin:0 0 var(--sp-5)}

/* 출처 — ODbL 4.3 */
.tvSource{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-6) 0 0}
.tvAbout .dim{font-size:var(--fs-md)}

@media (max-width:640px){
  .tvTabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .tvTab{grid-template-columns:auto 1fr;justify-items:start;align-items:center;column-gap:10px;padding:10px 12px}
  .tvTab .tvBall{grid-row:span 2;width:30px;height:30px}
  .tvTabName{font-size:var(--fs-base)}
  .tvRegions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tvRegions a,.tvRegions li.none{padding:8px 8px 8px 12px;font-size:var(--fs-sm)}
  .tvSuggest{padding:var(--sp-4) var(--sp-3)}
  .tvMap svg{max-height:240px}
}

/* ── 움직임 줄이기 ── 정지 화면 */
@media (prefers-reduced-motion:reduce){
  .tvPanel:not([hidden]) .tvRegions li,.tvCard,.tvRedeal,.tvNearCard,.tvDot,.tvDots i,.tvHit,.tvGone,
  .tvJs .tvTab[aria-current="true"] .tvBall,.tvRegions a:hover b,.tvSearching .p-body{animation:none!important}
  .tvGone{opacity:0}
  .tvTab,.tvRegions a,.tvFilter,.tvDot circle{transition:none}
  .tvTab:hover,.tvRegions a:hover,.tvRegions a:focus-visible{transform:none}
  .tvDot:hover circle,.tvDot:focus circle{transform:none}
}