/* 탁구 용구 — 놀이터 키트(kit.css) 위에 얹는다.
 *
 * 색·간격은 사이트 토큰(var(--…))과 키트의 탁구 소품 색만 쓴다 — 다크 모드가 한 곳에서 바뀌게. 새로 정하는 것은
 * 그림의 나무·심재·섬유 색뿐이고, 그것도 다크에서 한 번 더 정한다.
 * 정보가 먼저다: 움직임은 카드가 랠리처럼 차례로 앉고 퐁이가 결과에 반응하는 정도. transform·opacity 만 쓰고,
 * prefers-reduced-motion 이면 맨 아래에서 전부 멈춘다. 누르는 것은 모두 44px 이상.
 */
:root{--tg-wood:#e9c48f;--tg-wood-2:#d9a96b;--tg-core:#f3dfb8;--tg-fiber:#2a2326;--tg-sponge:#ffb36b;--tg-sheet:#b3123f;--tg-anti:#6b5f66}
[data-theme="dark"]{--tg-fiber:#9aa3b5;--tg-sponge:#e8995a;--tg-sheet:#ff6f8f;--tg-anti:#b5a9b0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){--tg-fiber:#9aa3b5;--tg-sponge:#e8995a;--tg-sheet:#ff6f8f;--tg-anti:#b5a9b0}}

/* 구역 안 갈래 */
.tgSub{margin:0 0 var(--sp-4)}
.tgSub ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tgSub a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;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-md)}
.tgSub a:hover{border-color:var(--accent)}
.tgSub a[aria-current="page"]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-text)}
.tgSub a:focus-visible,.tgCard a:focus-visible,.tgShop a:focus-visible,.tgPick:focus-visible,.tgCcTabs a:focus-visible,
.tgQuick a:focus-visible,.tgScale summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tgQuick{margin:0 0 var(--sp-4);font-size:var(--fs-md)}
.tgQuick a{display:inline-flex;align-items:center;min-height:44px}

/* 등급 경고 — 정보가 먼저라 접어 두되 제목은 늘 보인다 */
.tgScale{border:2px solid var(--warn-fill,var(--accent));background:var(--warn-bg,var(--accent-bg));border-radius:16px;padding:0 var(--sp-4);margin:0 0 var(--sp-4)}
.tgScale summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none}
.tgScale summary::-webkit-details-marker{display:none}
.tgScale summary::after{content:"＋";margin-left:auto;font-weight:900;color:var(--dim)}
.tgScale[open] summary::after{content:"－"}
.tgScale p,.tgScale ul{margin:0 0 var(--sp-3);font-size:var(--fs-md)}
.tgScale ul{padding-left:var(--sp-5)}
.tgScale li{margin:0 0 4px}
.tgWarn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tp-ball);color:var(--tp-ink);border:2px solid var(--tp-ink);font-weight:900;flex:none}
.tgTalk{margin:0 0 var(--sp-4)}
.tgTalk .tpPongi{width:56px}

/* 거르기 */
.tgFilters{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end;
  padding:var(--sp-4);border:2px solid var(--border-2);border-radius:20px;background:var(--surface);margin:0 0 var(--sp-3)}
.tgField{display:grid;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--dim)}
.tgField select,.tgField input,.tgMyForm select,.tgMyForm input{min-height:44px;font:inherit;font-size:var(--fs-base);color:var(--text);
  background:var(--surface-2);border:2px solid var(--border-2);border-radius:12px;padding:0 12px;width:100%;box-sizing:border-box}
.tgField select:focus-visible,.tgField input:focus-visible,.tgMyForm select:focus-visible,.tgMyForm input:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.tgQ{grid-column:1/-1}
.tgFormBtns{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0}
.tgFilters .tpBtn.small,.tgEmpty .tpBtn.small,.tgError .tpBtn.small,.tgMy .tpBtn.small,.tgSetup .tpBtn.small{min-height:44px}
.tgJs .tgFilters [data-tg-go]{display:none}
.tgCount{margin:0 0 var(--sp-4);color:var(--dim);font-size:var(--fs-md);font-variant-numeric:tabular-nums}

/* 상태 */
.tgEmpty,.tgError,.tgState{display:flex;align-items:center;gap:var(--sp-4);border:2px dashed var(--border-2);border-radius:20px;padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-5);background:var(--surface)}
.tgEmpty[hidden]{display:none}
.tgError{border-color:var(--err,var(--accent));background:var(--err-bg,var(--accent-bg))}
.tgEmpty p,.tgError p,.tgState p{margin:0 0 var(--sp-2)}
.tgEmpty .tpPongi,.tgError .tpPongi,.tgState .tpPongi{width:72px}

/* 목록 */
.tgGroup{margin:0 0 var(--sp-6)}
.tgGroup[hidden]{display:none}
.tgGroup h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tgList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tgCard{display:flex;flex-direction:column;gap:6px;min-width:0;padding:var(--sp-3) var(--sp-4);border:2px solid var(--border-2);border-radius:20px;background:var(--surface);
  box-shadow:0 4px 0 var(--border-2);animation:tgIn .45s var(--tp-spring) both;animation-delay:calc(var(--i,0) * 28ms);scroll-margin-top:84px}
.tgCard[hidden]{display:none}
.tgCard:hover{border-color:var(--accent)}
.tgFlash{animation:tgFlash 1.4s ease}
@keyframes tgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tgFlash{0%,100%{box-shadow:0 4px 0 var(--border-2)}30%{box-shadow:0 0 0 4px var(--accent)}}
.tgCardHead{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tgBrand{font-size:var(--fs-sm);font-weight:800;color:var(--accent-text);letter-spacing:.02em}
.tgType,.tgTag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:var(--fs-sm);font-weight:700;background:var(--surface-2);color:var(--text)}
.tgType::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink)}
.tgType.t-rubber::before{background:var(--tg-sheet)}.tgType.t-blade::before{background:var(--tg-wood-2)}
.tgName{margin:0;font-size:var(--fs-lg);line-height:1.3;overflow-wrap:anywhere}
.tgLocal{color:var(--dim);font-size:var(--fs-sm)}
.tgArt{margin:2px 0;display:flex;align-items:center;gap:10px}
.tgArt svg{display:block;width:120px;flex:none;height:auto}
.tgArtNote{margin:0;font-size:var(--fs-xs,12px);line-height:1.35}
/* 사양은 「이름 값」 쌍을 줄바꿈하며 흘린다 — 카드가 200개라 한 줄에 하나씩 두면 폰에서 끝없이 길어진다 */
.tgSpec{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-md);line-height:1.4}
.tgSpec div{display:flex;gap:6px;align-items:baseline;min-width:0}
.tgSpec dt{color:var(--dim);font-size:var(--fs-sm);white-space:nowrap}
.tgSpec dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;font-weight:600}
.tgUnk{display:inline-block;border:1.5px dashed var(--border-2);border-radius:999px;padding:0 8px;font-size:var(--fs-sm);color:var(--dim)}
.tgSrc{margin:auto 0 0;font-size:var(--fs-sm)}
.tgSrc a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.tgDataNote{margin-top:var(--sp-6)}

/* 그림 */
.tgPly.wood{fill:var(--tg-wood)}.tgPly.core{fill:var(--tg-core)}.tgPly.fiber{fill:var(--tg-fiber)}
.tgPly{stroke:var(--tp-ink);stroke-width:.6}
.tgSponge{fill:var(--tg-sponge);stroke:var(--tp-ink);stroke-width:.8}
.tgPore{fill:color-mix(in srgb,var(--tp-ink) 25%,transparent)}
.tgSheet,.tgPip{fill:var(--tg-sheet);stroke:var(--tp-ink);stroke-width:.6}
.tgSheet.anti{fill:var(--tg-anti)}
.tgFigRow{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:var(--sp-3) 0}
.tgFigCell{margin:0;padding:var(--sp-3);border:2px solid var(--border-2);border-radius:16px;background:var(--surface)}
.tgFigCell svg{display:block;width:100%;height:auto}
.tgFigCell figcaption{font-size:var(--fs-sm);font-weight:700;margin:6px 0 0;text-align:center}
.tgFigNote{font-size:var(--fs-sm);margin:0 0 var(--sp-3)}
.tgFig{margin:var(--sp-3) 0}
.tgFig svg{display:block;width:100%;max-width:420px;height:auto}
.tgHead{fill:var(--tg-sheet);stroke:var(--tp-ink);stroke-width:2}
.tgHandle{fill:var(--tg-wood);stroke:var(--tp-ink);stroke-width:2}
.tgLbl{fill:var(--text);font-size:13px;font-weight:800}
.tgGuide h3{font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-2)}

/* 조합 */
.tgEd{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:var(--fs-sm);font-weight:800;background:var(--tp-sun);color:var(--tp-ink);vertical-align:middle}
.tgEdNote{border:2px dashed var(--tp-sun);border-radius:16px;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-md);background:var(--surface)}
.tgSetup{border:2px solid var(--border-2);border-radius:24px;background:var(--surface);padding:var(--sp-5);margin:0 0 var(--sp-5);box-shadow:0 5px 0 var(--border-2);scroll-margin-top:84px}
.tgSetup header h2{margin:0 0 4px;font-size:var(--fs-xl)}
.tgSetup header p{margin:0 0 var(--sp-3)}
.tgSlots{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 var(--sp-3)}
.tgSlot{border:2px solid var(--border);border-radius:16px;padding:var(--sp-3);background:var(--surface-2);min-width:0}
.tgSlot h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--dim)}
.tgPick{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;min-height:44px;align-content:center;text-decoration:none;color:var(--text)}
.tgPick b{overflow-wrap:anywhere}
.tgPick:hover b{color:var(--accent-text);text-decoration:underline}
.tgAltsH{margin:6px 0 0;font-size:var(--fs-xs,12px)}
.tgAlts{list-style:none;margin:0;padding:0}
.tgAlts .tgPick{font-size:var(--fs-md)}
.tgWhy{margin:0 0 var(--sp-3);padding-left:var(--sp-5)}
.tgWhy li{margin:0 0 6px}
.tgSetup h3{font-size:var(--fs-lg);margin:var(--sp-3) 0 var(--sp-2);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tgTest{font-size:var(--fs-md)}
.tgTest .tgTag{min-height:32px;text-decoration:none}

/* 구매처 */
.tgCcTabs{list-style:none;padding:0;margin:0 0 var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tgCcTabs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border-radius:999px;border:2px solid var(--border-2);background:var(--surface);color:var(--text);text-decoration:none;font-weight:700}
.tgCcTabs a:hover{border-color:var(--accent)}
.tgCcTabs b{color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums}
.tgCcTabs .tvBall,.tgCountry .tvBall{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--tp-ball);border:2.5px solid var(--tp-ink);color:var(--tp-ink);font-size:11px;font-weight:900}
.tgCountry{margin:0 0 var(--sp-6);scroll-margin-top:84px}
.tgCountry h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tgShops{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tgShop{border:2px solid var(--border-2);border-radius:18px;background:var(--surface);padding:var(--sp-3) var(--sp-4);min-width:0;animation:tgIn .45s var(--tp-spring) both}
.tgShop h3{margin:4px 0 0;font-size:var(--fs-lg);overflow-wrap:anywhere}
.tgShop h3 a{display:inline-flex;align-items:center;min-height:44px}
.tgShop p{margin:0;font-size:var(--fs-sm)}
.tgKind{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px 2px 6px;font-size:var(--fs-sm);font-weight:700;background:var(--surface-2);color:var(--text)}
.tgKind::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--kc,var(--tp-ball));border:2px solid var(--tp-ink)}
.tgKind.k-official{--kc:var(--accent)}.tgKind.k-specialist{--kc:var(--tp-sun)}

/* 내 용구 */
.tgMy{margin:0 0 var(--sp-5)}
.tgMy h2{font-size:var(--fs-xl);margin:var(--sp-5) 0 var(--sp-3)}
.tgSkelList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tgSkel{display:grid;gap:8px;padding:var(--sp-4);border:2px solid var(--border);border-radius:18px;background:var(--surface)}
.tgSkel span{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));background-size:200% 100%;animation:tgShimmer 1.2s linear infinite}
.tgSkel span:nth-child(2){width:70%}.tgSkel span:nth-child(3){width:40%}
@keyframes tgShimmer{from{background-position:200% 0}to{background-position:0 0}}
.tgNowList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tgNow{display:grid;gap:4px;padding:var(--sp-4);border:2px solid var(--border-2);border-radius:18px;background:var(--surface);box-shadow:0 4px 0 var(--border-2);animation:tgIn .45s var(--tp-spring) both}
.tgNow.none{border-style:dashed;box-shadow:none}
.tgNowSlot{font-size:var(--fs-sm);font-weight:800;color:var(--accent-text)}
.tgNowName{font-size:var(--fs-lg);overflow-wrap:anywhere}
.tgNowSince{display:flex;flex-wrap:wrap;gap:8px;color:var(--dim);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tgDays{border-radius:999px;padding:0 8px;background:var(--tp-ball);color:var(--tp-ink);border:2px solid var(--tp-ink);font-weight:800}
.tgMyForm{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;padding:var(--sp-4);border:2px solid var(--border-2);border-radius:20px;background:var(--surface);margin:var(--sp-4) 0}
.tgMyForm h2{grid-column:1/-1;margin:0!important}
.tgMyForm label{display:grid;gap:4px;font-size:var(--fs-sm);font-weight:700;color:var(--dim)}
.tgMyForm p{margin:0}
.tgFormMsg{grid-column:1/-1;min-height:1.4em}
.tgFormMsg.err{color:var(--err,var(--accent-text));font-weight:700}
.tgHist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.tgHistRow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:var(--sp-3);padding:6px var(--sp-3);border-bottom:1px solid var(--border)}
.tgHistDate{font-variant-numeric:tabular-nums;color:var(--dim);font-size:var(--fs-sm)}
.tgHistSlot{font-size:var(--fs-sm);font-weight:700}
.tgHistName{min-width:0;overflow-wrap:anywhere}
.tgDel{min-height:44px}

@media (max-width:640px){
  .tgList,.tgShops{grid-template-columns:1fr}
  .tgFilters{grid-template-columns:1fr 1fr;padding:var(--sp-3)}
  .tgSetup{padding:var(--sp-4)}
  .tgHistRow{grid-template-columns:1fr auto;gap:4px var(--sp-2)}
  .tgHistDate,.tgHistSlot{grid-column:1}
  .tgHistName{grid-column:1}
  .tgDel{grid-column:2;grid-row:1/span 3}
  .tgEmpty,.tgError,.tgState{align-items:flex-start;padding:var(--sp-3)}
  .tgEmpty .tpPongi,.tgError .tpPongi,.tgState .tpPongi{width:52px}
}

/* 움직임 줄이기 — 정지 화면과 짧은 페이드만 */
@media (prefers-reduced-motion:reduce){
  .tgCard,.tgShop,.tgNow{animation:tgFade .2s ease both!important}
  .tgFlash{animation:none;outline:3px solid var(--accent)}
  .tgSkel span{animation:none}
}
@keyframes tgFade{from{opacity:0}to{opacity:1}}