/* 탁구 공통 공유 — 단추·하단 시트(폰)·팝오버(넓은 화면). 색·간격은 design.css 토큰만 쓴다(다크 모드가 저절로 따라온다).
   터치 칸은 44px 이상, 움직임은 prefers-reduced-motion 이 아닐 때만(share.js 가 .anim 을 붙인다). */
.ttShareRow{margin:var(--sp-3) 0 var(--sp-5)}
.ttShareRow[hidden]{display:none}
.ttShareBtn{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ttShareBtn[hidden]{display:none}
.ttShareIco{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ttShareNote{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:var(--sp-3) 0;padding:var(--sp-3) var(--sp-4);
  border:1px dashed var(--border-2);border-radius:var(--r);background:var(--surface-2);color:var(--dim);font-size:var(--fs-md)}
.ttShareNote a{font-weight:var(--fw-semibold);min-height:44px;display:inline-flex;align-items:center}

html.ttsOpen{overflow:hidden}
.ttsRoot{position:fixed;inset:0;z-index:1000}
.ttsScrim{position:absolute;inset:0;background:rgba(18,12,14,.5)}
.ttsSheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;
  background:var(--surface);color:var(--text);border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:var(--sp-4) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom))}
.ttsRoot.anim .ttsSheet{animation:ttsUp .22s ease-out}
.ttsRoot.anim .ttsScrim{animation:ttsFade .22s ease-out}
@keyframes ttsUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes ttsFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ttsRoot .ttsSheet,.ttsRoot .ttsScrim{animation:none}}
@media (min-width:640px){
  .ttsScrim{background:rgba(18,12,14,.18)}
  .ttsSheet{right:auto;bottom:auto;top:15vh;left:calc(50% - 200px);width:400px;max-height:70vh;border-radius:var(--r-lg);
    box-shadow:0 12px 40px rgba(0,0,0,.28)}
  .ttsRoot.anim .ttsSheet{animation-name:ttsPop}
  @keyframes ttsPop{from{transform:translateY(-6px) scale(.98);opacity:.4}to{transform:none;opacity:1}}
}
.ttsHead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.ttsHead h2{margin:0;font-size:var(--fs-xl)}
.ttsX{appearance:none;border:0;background:transparent;color:var(--text);font-size:28px;line-height:1;width:44px;height:44px;
  border-radius:var(--r-full);cursor:pointer}
.ttsX:hover{background:var(--surface-2)}
.ttsSheet :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ttsWhat{display:grid;gap:2px;margin:0 0 var(--sp-4);font-size:var(--fs-md);color:var(--dim)}
.ttsWhat b{color:var(--text);font-size:var(--fs-base);overflow-wrap:anywhere}
.ttsGrid{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.ttsCh{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-sm);width:100%;min-height:76px;
  display:grid;justify-items:center;align-content:start;gap:6px;padding:6px 2px;border-radius:var(--r);cursor:pointer;text-align:center}
.ttsCh:hover{background:var(--surface-2)}
.ttsCh span:last-child{line-height:1.25;overflow-wrap:anywhere}
.ttsIco{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--b);color:var(--f);
  font-weight:900;font-size:17px;letter-spacing:-.02em;box-shadow:0 0 0 1px var(--border-2)}
.ttsIco.plain{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.ttsIco svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ttsLink{display:flex;gap:var(--sp-2);align-items:center}
.ttsUrl{flex:1;min-width:0;min-height:44px;padding:0 var(--sp-3);border:1px solid var(--border-2);border-radius:var(--r);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:var(--fs-sm)}
.ttsLink .tpBtn{min-height:44px;white-space:nowrap}
.ttsPanelHead{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3)}
.ttsPanelHead h3{margin:0;font-size:var(--fs-lg)}
.ttsBack{appearance:none;border:0;background:transparent;color:var(--accent-text);font:inherit;font-weight:var(--fw-semibold);
  min-height:44px;padding:0 var(--sp-2);border-radius:var(--r);cursor:pointer}
.ttsBack:hover{background:var(--surface-2)}
.ttsHint{margin:var(--sp-2) 0;color:var(--dim);font-size:var(--fs-md)}
.ttsBtns{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0 0}
.ttsBtns .tpBtn{min-height:44px}
.ttsQr{display:grid;place-items:center;background:#fff;border-radius:var(--r);padding:var(--sp-3);border:1px solid var(--border)}
.ttsQr svg{width:min(240px,62vw);height:auto}
.ttsStory{margin:0;display:grid;place-items:center}
.ttsStory img{width:min(200px,48vw);height:auto;border-radius:12px;border:1px solid var(--border-2)}
.ttsLive{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}