/* 탁구 놀이터 테마 키트.
 *
 * 색·글꼴·간격은 사이트 토큰(/design.css 의 var(--…))을 그대로 쓴다 — 다크 모드와 브랜드가
 * 사이트와 한 곳에서 바뀌어야 하기 때문이다. 여기서 새로 정하는 것은 탁구 소품의 색(공·탁구대)뿐이다.
 *
 * 움직임은 transform·opacity 만 쓴다. 레이아웃을 흔드는 속성(top·width…)을 움직이면 저사양 폰에서
 * 끊긴다(설계 8절). prefers-reduced-motion 이면 맨 아래에서 전부 멈추고 짧은 페이드만 남긴다.
 */
:root{
  --tp-ball:#fffaf2;
  --tp-ball-edge:#2a2326;
  --tp-orange:#ff8a3d;
  --tp-sun:#ffc83d;
  --tp-table:#26201f;
  --tp-table-2:#332b2c;
  --tp-line:#fffaf2;
  --tp-ink:#2a2326;
  --tp-spring:cubic-bezier(.34,1.56,.64,1);
  --tp-dot:color-mix(in srgb,var(--accent) 9%,transparent);
}
[data-theme="dark"]{--tp-table:#2f2829;--tp-table-2:#3b3234;--tp-dot:color-mix(in srgb,var(--accent) 16%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="dark"]){--tp-table:#2f2829;--tp-table-2:#3b3234}}

/* ── 퐁이 ── */
.pongi{display:block;width:100%;height:auto;overflow:visible}
.tpPongi{display:inline-block;width:88px;flex:none;line-height:0}
.tpPongi.sm{width:44px}.tpPongi.lg{width:132px}.tpPongi.xl{width:168px}
.tpPongi .p-body{transform-box:fill-box;transform-origin:50% 100%}
.tpPongi.bob .p-body{animation:tpBob 2.4s ease-in-out infinite}
.tpPongi.bounce .p-body{animation:tpBounce .9s var(--tp-spring) infinite}
.tpPongi.hop .p-body{animation:tpHop .6s var(--tp-spring)}
.tpPongi.wiggle .p-body{animation:tpWiggle .5s ease-in-out}
.tpPongi .p-shadow{transform-box:fill-box;transform-origin:50% 50%}
.tpPongi.bounce .p-shadow{animation:tpShadow .9s var(--tp-spring) infinite}
.tpPongi .pf .eye{transform-box:fill-box;transform-origin:50% 50%;animation:tpBlink 4.2s infinite}
@keyframes tpBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes tpBounce{0%,100%{transform:translateY(0) scale(1.08,.9)}12%{transform:translateY(-2px) scale(.94,1.08)}50%{transform:translateY(-26px) scale(1,1)}88%{transform:translateY(-2px) scale(.98,1.02)}}
@keyframes tpShadow{0%,100%{transform:scale(1);opacity:.16}50%{transform:scale(.55);opacity:.07}}
@keyframes tpHop{0%{transform:translateY(0) scale(1.1,.88)}45%{transform:translateY(-18px) scale(.95,1.06)}100%{transform:translateY(0)}}
@keyframes tpWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes tpBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* ── 무대(도구 하나가 그려지는 판) ── */
.tpStage{position:relative;overflow:hidden;border:2px solid 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);
  box-shadow:var(--shadow);padding:var(--sp-6) var(--sp-5) var(--sp-7);min-height:360px;margin:0 0 var(--sp-7)}
.tpStage:focus{outline:none}
.tpScreen{display:grid;gap:var(--sp-4);animation:tpIn .45s var(--tp-spring) both}
.tpScreen > h2,.tpScreen > .tpTitle{margin:0;font-size:var(--fs-2xl);line-height:1.25;letter-spacing:-.01em}
.tpScreen > h2:focus{outline:none}
.tpScreen p{margin:0}
.tpCenter{text-align:center;justify-items:center}
@keyframes tpIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.tpLoading{display:grid;place-items:center;gap:var(--sp-3);min-height:300px;color:var(--dim);font-size:var(--fs-md)}

/* 랠리 전환 — 화면이 바뀔 때 공이 무대 위 작은 탁구대를 넘어간다 */
.tpRally{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;z-index:3;animation:tpRallyFade .75s ease both}
@keyframes tpRallyFade{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
.tpRally::after{content:"";position:absolute;left:10%;right:10%;bottom:10px;height:4px;border-radius:2px;background:var(--tp-table);opacity:.55}
.tpRally .net{position:absolute;left:50%;bottom:10px;width:3px;height:14px;margin-left:-1px;background:var(--accent);border-radius:2px}
.tpRally .fly{position:absolute;left:10%;bottom:14px;animation:tpFlyX .7s linear forwards}
.tpRally .fly i{display:block;width:14px;height:14px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);animation:tpFlyY .7s forwards}
@keyframes tpFlyX{from{transform:translateX(0)}to{transform:translateX(var(--tp-w,300px))}}
@keyframes tpFlyY{0%{transform:translateY(0);animation-timing-function:ease-out}25%{transform:translateY(-40px);animation-timing-function:ease-in}50%{transform:translateY(0);animation-timing-function:ease-out}75%{transform:translateY(-26px);animation-timing-function:ease-in}100%{transform:translateY(0);opacity:0}}

/* ── 버튼 ── 누르면 공처럼 눌렸다 튀어 오른다 */
.tpBtn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:var(--fs-lg);color:#fff;background:var(--accent);
  border-radius:999px;padding:14px 26px;box-shadow:0 5px 0 var(--accent-hover),0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .25s var(--tp-spring),box-shadow .25s var(--tp-spring);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;text-decoration:none}
.tpBtn:hover{transform:translateY(-2px)}
.tpBtn:active{transform:translateY(4px) scale(.97);box-shadow:0 1px 0 var(--accent-hover)}
.tpBtn:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.tpBtn.ghost{color:var(--text);background:var(--surface);box-shadow:0 4px 0 var(--border-2);border:2px solid var(--border-2)}
.tpBtn.ghost:active{box-shadow:0 1px 0 var(--border-2)}
.tpBtn.small{font-size:var(--fs-md);padding:8px 16px;min-height:40px;box-shadow:0 3px 0 var(--accent-hover)}
.tpBtn.ghost.small{box-shadow:0 3px 0 var(--border-2)}
.tpBtn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.tpBtns{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}

/* 보기(퀴즈·테스트·회전) — 번호는 작은 공 안에. 키보드 숫자와 같다 */
.tpChoices{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.tpChoices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tpChoices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tpChoice{appearance:none;font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px;
  border-radius:18px;border:2px solid var(--border-2);background:var(--surface);color:var(--text);font-size:var(--fs-base);font-weight:650;
  box-shadow:0 4px 0 var(--border-2);transition:transform .25s var(--tp-spring),box-shadow .25s var(--tp-spring),border-color .15s}
.tpChoice:hover{border-color:var(--accent);transform:translateY(-2px)}
.tpChoice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border-2)}
.tpChoice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tpChoice .k{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tp-ball);color:var(--tp-ink);
  border:2px solid var(--tp-ink);font-size:var(--fs-sm);font-weight:800}
.tpChoice.right{border-color:var(--ok);background:var(--ok-bg);box-shadow:0 4px 0 var(--ok)}
.tpChoice.wrong{border-color:var(--err);background:var(--err-bg);box-shadow:0 4px 0 var(--err);animation:tpShake .35s}
.tpChoice[disabled]{cursor:default}
.tpChoice[disabled]:not(.right):not(.wrong){opacity:.55}
@keyframes tpShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* 진행 — 공이 하나씩 채워진다 */
.tpDots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;list-style:none;margin:0;padding:0}
.tpDots li{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-2);background:var(--surface-2)}
.tpDots li.done{background:var(--tp-ball);border-color:var(--tp-ink)}
.tpDots li.hit{background:var(--accent);border-color:var(--accent-hover)}
.tpDots li.miss{background:var(--surface-3);border-color:var(--dimmer)}
.tpDots li.now{border-color:var(--accent);animation:tpNow 1s var(--tp-spring) infinite}
@keyframes tpNow{50%{transform:translateY(-4px)}}

/* 말풍선 — 퐁이가 말할 때 */
.tpTalk{display:flex;align-items:flex-end;gap:var(--sp-3)}
.tpBubble{position:relative;background:var(--surface-2);border:2px solid var(--border-2);border-radius:18px;padding:12px 16px;font-size:var(--fs-base);line-height:1.55}
.tpBubble::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:inherit;border-left:2px solid var(--border-2);border-bottom:2px solid var(--border-2);transform:rotate(45deg)}
.tpBubble b{color:var(--accent-text)}

/* 점수·큰 숫자 */
.tpBig{font-size:clamp(44px,12vw,84px);font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pop{animation:tpPop .45s var(--tp-spring)}
@keyframes tpPop{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-4deg)}100%{transform:scale(1)}}
.tpTag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-size:var(--fs-sm);font-weight:700;background:var(--accent-bg);color:var(--accent-fg)}
.tpMeta{color:var(--dim);font-size:var(--fs-sm)}
.tpCard{border:2px solid var(--border-2);border-radius:18px;background:var(--surface);padding:var(--sp-4)}
.tpCard h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
.tpCard ul{margin:0;padding-left:var(--sp-5)}
.tpCard li{margin:0 0 4px}
.tpGrid2{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* 탁구대(위에서 본 모습) */
.tpTable{position:relative;background:linear-gradient(180deg,var(--tp-table-2),var(--tp-table));border:3px solid var(--tp-line);border-radius:10px;box-shadow:0 10px 0 -2px color-mix(in srgb,var(--tp-table) 70%,#000),var(--shadow)}
.tpTable::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:color-mix(in srgb,var(--tp-line) 80%,transparent)}

/* 공유 카드 미리보기 */
.tpShare{display:grid;gap:var(--sp-3);justify-items:center}
.tpShare img{width:min(260px,70vw);height:auto;border-radius:16px;border:2px solid var(--border-2);box-shadow:var(--shadow)}

.tpSr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tpConfetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* ── 서버가 그리는 틀(놀이터 첫 화면·도구 머리) ── */
.tpHero{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;
  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));color:#fff;position:relative;overflow:hidden}
.tpHero h1{margin:0 0 var(--sp-2);font-size:clamp(30px,6vw,46px);line-height:1.1;letter-spacing:-.02em;color:#fff}
.tpHero p{margin:0;color:#fff;font-size:var(--fs-lg);line-height:1.55;max-width:34em}
.tpHero .tpPongi{width:150px}
.tpHero .court{position:absolute;right:20px;bottom:16px;width:190px;height:44px;border-radius:8px;background:var(--tp-table);border:3px solid #fff;transform:perspective(260px) rotateX(55deg);z-index:0}
.tpHero .court::after{content:"";position:absolute;left:50%;top:-14px;bottom:0;width:4px;margin-left:-2px;background:#fff;border-radius:2px}
.tpHero .heroBall{position:relative;z-index:1;margin:0 28px 22px 0;grid-column:2;grid-row:1}
.tpHero .heroTxt{grid-column:1;grid-row:1;position:relative;z-index:1}
.tpHead{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-5)}
.tpHead h1{margin:0 0 4px;font-size:clamp(26px,5vw,34px);line-height:1.2;letter-spacing:-.02em}
.tpHead p{margin:0;color:var(--dim);font-size:var(--fs-lg)}
.tpTools{list-style:none;padding:0;margin:0 0 var(--sp-7);display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tpTools a{display:grid;grid-template-rows:auto 1fr auto;height:100%;text-decoration:none;color:inherit;border:2px solid var(--border-2);border-radius:22px;background:var(--surface);overflow:hidden;
  box-shadow:0 5px 0 var(--border-2);transition:transform .3s var(--tp-spring),box-shadow .3s var(--tp-spring),border-color .2s}
.tpTools a:hover,.tpTools a:focus-visible{transform:translateY(-4px) rotate(-.6deg);border-color:var(--accent);box-shadow:0 9px 0 var(--accent)}
.tpTools a:focus-visible{outline:3px solid var(--text);outline-offset:3px}
/* 그림은 진한 선(#2a2326)으로 그렸다. 다크 모드의 어두운 판 위에서는 선이 사라지므로 그림 판은 두 테마 모두 밝은 스티커처럼 둔다. */
.tpTools .art{display:grid;place-items:center;height:118px;background:radial-gradient(circle at 10px 10px,rgba(179,18,63,.12) 2.5px,transparent 3px) 0 0/22px 22px,var(--tp-art,#fcedf0)}
[data-theme="dark"] .tpTools .art{--tp-art:#f1d9df}
.tpTools .art svg{width:96px;height:96px;transition:transform .4s var(--tp-spring)}
.tpTools a:hover .art svg{transform:rotate(-8deg) scale(1.08)}
.tpTools .txt{padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.tpTools b{display:block;font-size:var(--fs-lg);margin:0 0 4px}
.tpTools span{color:var(--dim);font-size:var(--fs-md);line-height:1.5}
.tpTools .go{padding:0 var(--sp-4) var(--sp-4);font-weight:800;color:var(--accent-text);font-size:var(--fs-md)}
.tpMore{list-style:none;padding:0;margin:0 0 var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tpMore a{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--border-2);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--text);font-weight:650;font-size:var(--fs-md);background:var(--surface)}
.tpMore a:hover{border-color:var(--accent);color:var(--accent-text)}
.tpMore a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink)}
.tpAbout{margin:0 0 var(--sp-6)}
.tpAbout h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tpAbout ol,.tpAbout ul{margin:0;padding-left:var(--sp-5)}
.tpAbout li{margin:0 0 var(--sp-2)}
.tpAbout .tpMore{padding:0}.tpAbout .tpMore li{margin:0}
.tpSource{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-3) 0 0}

@media (max-width:640px){
  .tpStage{padding:var(--sp-5) var(--sp-3) var(--sp-6);border-radius:20px}
  .tpHero{grid-template-columns:1fr;padding:var(--sp-5);text-align:left}
  .tpHero{display:block}
  .tpHero .heroBall{float:right;margin:-4px -6px 4px 10px}
  .tpHero .tpPongi{width:84px}
  .tpHero .court{display:none}
  .tpChoices.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpBtn{font-size:var(--fs-base);padding:12px 20px}
}

/* ── 움직임 줄이기 ── 정지 화면과 짧은 페이드만 */
@media (prefers-reduced-motion:reduce){
  .tpPongi .p-body,.tpPongi .p-shadow,.tpPongi .pf .eye,.tpDots li.now{animation:none!important}
  .tpScreen{animation:tpFade .2s ease both}
  .tpRally{display:none}
  .pop,.tpChoice.wrong{animation:none}
  .tpBtn,.tpChoice,.tpTools a,.tpTools .art svg{transition:none}
  .tpTools a:hover,.tpTools a:focus-visible{transform:none}
}
@keyframes tpFade{from{opacity:0}to{opacity:1}}