/* 탁구 기록·순위·연습 루틴 화면(app/tt_records.py, tt/records/*.js, tt/practice/*.js).
 *
 * 색·글꼴·간격은 /design.css 의 토큰을 쓴다 — 다크 모드와 브랜드(크림슨·차콜)가 사이트 전체와
 * 한 곳에서 바뀌게. 여기서 새로 정하는 색은 탁구대(차콜)·공(흰색·주황)처럼 토큰에 없는 사물의
 * 색뿐이다.
 *
 * 움직임은 transform·opacity 만 쓴다(저사양 폰에서 레이아웃을 다시 계산하지 않게). 맨 아래의
 * prefers-reduced-motion 블록이 전부 멈춘다.
 */
:root {
  --ttr-table: #2b2d33;
  --ttr-table-line: rgba(255, 255, 255, .85);
  --ttr-ball: #fffdf8;
  --ttr-ball-edge: #e9dcdf;
  --ttr-ink: #2b2326;
  --ttr-orange: #ff8a3d;
  --ttr-gold: #f2b23c;
  --ttr-silver: #b8bcc6;
  --ttr-bronze: #c98552;
  --ttr-bounce: cubic-bezier(.34, 1.56, .64, 1);
}
[data-theme="dark"] {
  --ttr-table: #1f2126;
  --ttr-ball-edge: #b9adb0;
}

/* ── 퐁이 ─────────────────────────────────────────────────── */
/* 그림의 원본은 놀이터의 /tt/play/pongi.svg 하나다(서버가 <template id="pongiTpl"> 로 넣고 ui.mjs 가
   kit.js 로 복제한다). 표정·옷은 그 그림 안의 스타일이 고르고, 여기서는 크기와 움직임만 정한다. */
.pongi { width: 88px; height: 91px; flex: none; overflow: visible; cursor: default; }
.pongi.mini { width: 44px; height: 46px; }
.pongi.micro { width: 18px; height: 19px; vertical-align: -4px; margin-right: 4px; }
.pongi .p-shadow { transform-box: fill-box; transform-origin: center; animation: pgShadow 1.8s ease-in-out infinite; }
.pongi .p-body { transform-box: fill-box; transform-origin: 50% 100%; animation: pgHop 1.8s cubic-bezier(.3, 0, .3, 1) infinite; }
.pongi[data-mood="sad"] .p-body { animation-duration: 3.2s; }
.pongi.pgBoing .p-body { animation: pgBoing .55s var(--ttr-bounce) 1, pgHop 1.8s cubic-bezier(.3, 0, .3, 1) .55s infinite; }
.pongi.mini .p-shadow, .pongi.micro .p-shadow { display: none; }
.pongi.micro .p-body { animation: none; }
@keyframes pgHop {
  0%, 100% { transform: translateY(0) scale(1.05, .95); }
  12% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-9px) scale(.98, 1.02); }
  88% { transform: translateY(0) scale(1, 1); }
}
@keyframes pgShadow { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.7); opacity: .07; } }
@keyframes pgBoing { 0% { transform: scale(1); } 35% { transform: scale(1.18, .86); } 70% { transform: scale(.94, 1.08); } 100% { transform: scale(1); } }

/* ── 머리 ── (하위 메뉴는 없다 — 탁구 섹션 바 하나를 쓴다)────────────────────────────────────── */
.ttrHero { position: relative; display: flex; align-items: center; gap: var(--sp-5); margin: 0 0 var(--sp-6); }
.ttrHero h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-2); }
.ttrHero .lead { color: var(--dim); font-size: var(--fs-lg); margin: 0; }
.ttrFoot { margin-top: var(--sp-7); }

/* ── 공용 조각 ───────────────────────────────────────────── */
.ttrApp { min-height: 240px; }
.ttrLoading { display: flex; align-items: center; gap: var(--sp-3); color: var(--dim); padding: var(--sp-6) 0; }
.ttrDots { display: inline-flex; gap: 6px; }
.ttrDots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ttr-orange); animation: ttrDot 1s var(--ttr-bounce) infinite; }
.ttrDots i:nth-child(2) { animation-delay: .15s; background: var(--accent); }
.ttrDots i:nth-child(3) { animation-delay: .3s; background: var(--ttr-ball-edge); }
@keyframes ttrDot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

.ttrCard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); min-width: 0; }
.ttrCard h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.ttrCardHead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ttrGrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0 0 var(--sp-4); }
.ttrGrid .ttrCard { margin: 0; }
.ttrRise { animation: ttrRise .5s var(--ttr-bounce) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ttrRise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ttrChip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--dim); white-space: nowrap; }
.ttrChip.pub { background: var(--accent-bg); border-color: transparent; color: var(--accent-fg); }
button.ttrChip { cursor: pointer; font: inherit; font-size: var(--fs-sm); }
button.ttrChip:hover { border-color: var(--accent); }
.ttrNoteSmall { font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.ttrList { list-style: none; padding: 0; margin: 0; }
.ttrRowBtns { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 0; }
.ttrEmpty { text-align: center; padding: var(--sp-7) var(--sp-4); background: var(--surface-2); border-radius: var(--r-xl); }
.ttrEmpty .pongi { width: 110px; height: 114px; }
.ttrEmptyRow { display: flex; align-items: center; gap: var(--sp-3); color: var(--dim); }
.ttrEmptyRow p { margin: 0; }
.btn.ttrBig { min-height: 46px; padding-inline: var(--sp-5); font-size: var(--fs-base); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center; }
.ttrApp .btn, .ttrBuilder .btn, .ttrDialog .btn, .ttrRoutine .btn { transition: transform .15s var(--ttr-bounce); }
.ttrApp .btn:active, .ttrBuilder .btn:active, .ttrDialog .btn:active, .ttrRoutine .btn:active { transform: scale(.94); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.ttrBallIcon { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 30%, #ffe9dc 31% 100%); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .12); }
.ttrPaddleIcon { width: 14px; height: 18px; border-radius: 50% 50% 45% 45%; background: var(--accent); box-shadow: 0 7px 0 -4px #a26f3e; }
.btn.primary .ttrPaddleIcon { background: #fff; }

/* ── 내 기록 ─────────────────────────────────────────────── */
.ttrActions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.ttrGuest { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--accent-bg); border-color: transparent; }
.ttrGuest p { flex: 1 1 220px; margin: 0; color: var(--accent-fg); }
.ttrWaiting { border: 2px solid var(--accent); background: linear-gradient(180deg, var(--accent-bg), var(--surface) 70%); }
.ttrCount { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--fs-sm); animation: pgBoing .6s var(--ttr-bounce) .3s both; }
.ttrWaitRow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.ttrScoreLine { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-top: 2px; }
.ttrSets { font-weight: var(--fw-bold); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ttrSets.win { color: var(--accent-text); }
.ttrGames { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--dim); word-spacing: 4px; }
.ttrRatingRow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ttrRating { font-size: clamp(40px, 8vw, 54px); font-weight: var(--fw-bold); color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.ttrPopNum { animation: pgBoing .5s var(--ttr-bounce); display: inline-block; }
.ttrBadge { font-size: var(--fs-sm); padding: 3px 10px; border-radius: var(--r-full); background: var(--warn-bg); color: var(--warn); }
.ttrBadge.ok { background: var(--ok-bg); color: var(--ok); }
.ttrGraph { width: 100%; height: auto; margin-top: var(--sp-3); overflow: visible; }
.ttrGraphEmpty { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.ttrAreaTop { stop-color: var(--accent); stop-opacity: .22; }
.ttrAreaBottom { stop-color: var(--accent); stop-opacity: 0; }
.ttrLine { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ttrDraw 1.1s ease-out .2s forwards; }
@keyframes ttrDraw { to { stroke-dashoffset: 0; } }
.ttrDot { fill: var(--ttr-ball); stroke: var(--accent); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: ttrPop .5s var(--ttr-bounce) both; animation-delay: calc(.3s + var(--i) * 60ms); }
.ttrDot.last { fill: var(--accent); stroke: var(--ttr-ball); animation: ttrPop .5s var(--ttr-bounce) both, ttrBob 1.6s ease-in-out 1.4s infinite; }
@keyframes ttrPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ttrBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ttrWin, .ttrStreak { display: flex; align-items: center; gap: var(--sp-4); }
.ttrWin p, .ttrStreak p { margin: 2px 0 0; }
.ttrRing { width: 88px; height: 88px; flex: none; }
.ttrRingBg { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.ttrRingFg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ttr-bounce); }
.ttrBigNum { font-size: var(--fs-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ttrFlame { width: 54px; height: 64px; flex: none; transform-origin: 50% 100%; }
.ttrFlameOut { fill: var(--surface-3); }
.ttrFlameIn { fill: var(--border-2); }
.ttrFlame.on .ttrFlameOut { fill: var(--ttr-orange); }
.ttrFlame.on .ttrFlameIn { fill: var(--ttr-gold); }
.ttrFlame.on { animation: ttrFlicker 1.4s ease-in-out infinite; }
@keyframes ttrFlicker { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.96, 1.06) rotate(-2deg); } 60% { transform: scale(1.03, .97) rotate(2deg); } }
.ttrCalScroll { overflow-x: auto; padding-bottom: 4px; }
.ttrCal { display: flex; gap: 4px; width: max-content; }
.ttrCalDays, .ttrCalWeek { display: grid; grid-template-rows: repeat(7, 14px); gap: 4px; }
.ttrCalDays span { font-size: var(--fs-2xs); color: var(--dimmer); line-height: 14px; width: 14px; }
.ttrCell { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); display: inline-block; animation: ttrPop .35s var(--ttr-bounce) both; animation-delay: calc(var(--w, 0) * 25ms); }
.ttrCell.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); }
.ttrCell.l2 { background: color-mix(in srgb, var(--accent) 52%, var(--surface-2)); }
.ttrCell.l3 { background: color-mix(in srgb, var(--accent) 78%, var(--surface-2)); }
.ttrCell.l4 { background: var(--accent); box-shadow: 0 0 0 2px var(--ttr-orange) inset; }
.ttrCell.future { background: transparent; border: 1px dashed var(--border); animation: none; }
.ttrCell.today { outline: 2px solid var(--text); outline-offset: 1px; }
.ttrLegend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--dimmer); }
.ttrLegend .ttrCell { width: 10px; height: 10px; animation: none; }
.ttrMatch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); animation: ttrRise .45s var(--ttr-bounce) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ttrMatch:first-child { border-top: 0; }
.ttrWL { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 2px solid var(--ttr-ball-edge); background: var(--ttr-ball); color: var(--ttr-ink); }
.ttrMatch.win .ttrWL { background: var(--accent); border-color: var(--accent); color: #fff; }
.ttrMatchMain { flex: 1; min-width: 0; }
.ttrMatchMain b { margin-right: var(--sp-2); }
.ttrMeta { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ttrMatchSide { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ttrStatus { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-full); background: var(--surface-2); color: var(--dim); white-space: nowrap; }
.ttrStatus.st-confirmed { background: var(--ok-bg); color: var(--ok); }
.ttrStatus.st-pending { background: var(--warn-bg); color: var(--warn); }
.ttrStatus.st-disputed { background: var(--accent-bg); color: var(--accent-fg); }
.ttrDelta { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.ttrDelta.up { color: var(--ok); }
.ttrDelta.down { color: var(--accent-text); }
.ttrDel { background: none; border: 0; padding: 0; color: var(--dimmer); font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; }
.ttrHeads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.ttrHeads li { display: grid; grid-template-columns: minmax(0, 8em) 1fr auto; gap: var(--sp-3); align-items: center; }
.ttrHeadName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttrHeadNum { font-size: var(--fs-sm); color: var(--dim); font-variant-numeric: tabular-nums; }
.ttrBar { height: 10px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.ttrBar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transform-origin: left; animation: ttrGrow .8s var(--ttr-bounce) .2s both; }
@keyframes ttrGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ttrFacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.ttrFacts div { background: var(--surface-2); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); }
.ttrFacts dt { font-size: var(--fs-xs); color: var(--dimmer); }
.ttrFacts dd { margin: 2px 0 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.ttrCard .ttrFacts { margin-bottom: 0; }

/* ── 창(dialog)과 입력 ───────────────────────────────────── */
.ttrDialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: auto; }
.ttrDialog[open] { animation: ttrDlg .4s var(--ttr-bounce); }
.ttrDialog::backdrop { background: rgba(20, 14, 16, .55); }
@keyframes ttrDlg { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.ttrDialogHead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; }
.ttrDialogHead h2 { flex: 1; font-size: var(--fs-xl); margin: 0; }
.ttrClose { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.ttrDialogBody { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.ttrForm { display: grid; gap: var(--sp-4); }
.ttrForm label { display: grid; gap: 6px; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.ttrForm fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4) var(--sp-4); margin: 0; min-width: 0; display: grid; gap: var(--sp-3); }
.ttrForm legend { font-weight: var(--fw-semibold); padding: 0 6px; }
.ttrForm input[type="text"], .ttrForm input[type="search"], .ttrForm input[type="number"], .ttrForm input[type="date"], .ttrForm select, .ttrForm textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--border-input); background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
}
.ttrForm input:focus-visible, .ttrForm select:focus-visible, .ttrForm textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ttrTwo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ttrSegs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: var(--r-full); padding: 4px; }
.ttrSeg { border: 0; background: transparent; border-radius: var(--r-full); padding: 8px; font: inherit; font-weight: var(--fw-medium); color: var(--dim); cursor: pointer; transition: background .2s, color .2s; }
.ttrSeg[aria-pressed="true"] { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ttrResults { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ttrResult { width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.ttrResult:hover, .ttrResult:focus-visible { border-color: var(--accent); }
.ttrPicked:empty { display: none; }
.ttrX { border: 0; background: none; color: inherit; font-size: 16px; cursor: pointer; padding: 0 0 0 4px; }
.ttrRows { display: grid; gap: var(--sp-2); }
.ttrGameRow { display: grid; grid-template-columns: 4em 1fr auto 1fr; align-items: center; gap: var(--sp-2); animation: ttrRise .35s var(--ttr-bounce) both; }
.ttrGameNo { font-size: var(--fs-sm); color: var(--dim); }
.ttrColon { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.ttrForm input.ttrPt { text-align: center; font-size: 20px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ttrVerdict { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-md); color: var(--dim); }
.ttrVerdict.win { background: var(--accent-bg); color: var(--accent-fg); font-weight: var(--fw-semibold); }
.ttrVerdict.loss { background: var(--surface-2); color: var(--text); }
.ttrVerdict.shake { animation: ttrShake .4s; }
@keyframes ttrShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ttrPresets { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: calc(var(--sp-2) * -1); }
.ttrPick summary { cursor: pointer; padding: 6px 0; font-weight: var(--fw-medium); }
.ttrChecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px var(--sp-3); padding: 0 0 var(--sp-2); }
.ttrForm label.ttrCheck { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-regular); }
.ttrCheck input { width: 18px; height: 18px; accent-color: var(--accent); }
.ttrForm input[type="range"] { accent-color: var(--accent); width: 100%; }
.ttrSwitchRow { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: var(--sp-3) !important; }
.ttrSwitch { appearance: none; flex: none; width: 46px; height: 28px; border-radius: var(--r-full); background: var(--surface-3); position: relative; cursor: pointer; transition: background .2s; margin-top: 2px; }
.ttrSwitch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ttr-ball); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s var(--ttr-bounce); }
.ttrSwitch:checked { background: var(--accent); }
.ttrSwitch:checked::after { transform: translateX(18px); }
.ttrSwitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 첫 기록 때 이름부터 — 기록 창 맨 위에 퐁이가 묻는다. */
.ttrForm fieldset.ttrNameGate { border: 2px solid var(--accent); background: var(--accent-bg); animation: ttrRise .45s var(--ttr-bounce) both; }
.ttrForm fieldset.ttrNameGate[hidden] { display: none; }
.ttrNameAsk { display: flex; align-items: center; gap: var(--sp-3); }
.ttrNameAsk p { margin: 0; color: var(--accent-fg); }
.ttrNameAsk .dim { color: var(--accent-fg); opacity: .85; }

/* 랠리 전환 — 공 하나가 머리 위를 포물선으로 건너간다. 가로·세로를 두 겹으로 나눠 곡선을 만든다. */
.ttrRallyBall { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; animation: ttrRallyX .9s linear forwards; }
.ttrRallyBall i { position: absolute; left: 0; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--ttr-ball); box-shadow: 0 0 0 1.5px var(--ttr-orange), 0 3px 6px rgba(0, 0, 0, .2); animation: ttrRallyY .9s cubic-bezier(.3, 0, .7, 1) forwards; }
@keyframes ttrRallyX { from { transform: translateX(-16px); } to { transform: translateX(calc(100% + 16px)); } }
@keyframes ttrRallyY { 0% { transform: translateY(0); } 50% { transform: translateY(-22px); } 100% { transform: translateY(14px); opacity: 0; } }

/* ── 알림·색종이 ─────────────────────────────────────────── */
.ttrToasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.ttrToast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--ttr-table); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: var(--fs-md); animation: ttrToastIn .45s var(--ttr-bounce); }
.ttrToast.err { background: var(--accent); }
.ttrToast.out { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.ttrToastBall { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ttr-ball); box-shadow: 0 0 0 2px var(--ttr-orange); animation: ttrDot .8s var(--ttr-bounce) 2; }
@keyframes ttrToastIn { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }

/* ── 순위표·프로필 ───────────────────────────────────────── */
.ttrRank { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; gap: var(--sp-2); }
.ttrRankRow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "no name rating" "no meta games"; align-items: center; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); animation: ttrRise .5s var(--ttr-bounce) both; animation-delay: calc(var(--i, 0) * 50ms); }
.ttrRankRow > a { grid-area: name; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttrRankRow > a:hover b { color: var(--accent-text); }
.ttrRankMeta { grid-area: meta; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: var(--fs-sm); color: var(--dimmer); }
.ttrRankNo { grid-area: no; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ttr-ball); border: 2px solid var(--ttr-ball-edge); font-weight: var(--fw-bold); color: var(--ttr-ink); }
.ttrRankRow[data-medal="1"] .ttrRankNo { background: var(--ttr-gold); border-color: var(--ttr-gold); animation: ttrBob 1.8s ease-in-out infinite; }
.ttrRankRow[data-medal="2"] .ttrRankNo { background: var(--ttr-silver); border-color: var(--ttr-silver); }
.ttrRankRow[data-medal="3"] .ttrRankNo { background: var(--ttr-bronze); border-color: var(--ttr-bronze); color: #fff; }
.ttrRankRow[data-medal="1"] { border-color: var(--ttr-gold); }
.ttrRankRating { grid-area: rating; font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ttrRankGames { grid-area: games; justify-self: end; font-size: var(--fs-xs); }
.ttrRecent { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-2); }
.ttrRecent li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.ttrRecent .ttrWL { width: 28px; height: 28px; font-size: var(--fs-xs); }
.ttrRecent .win .ttrWL { background: var(--accent); border-color: var(--accent); color: #fff; }
.ttrScore { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ── 연습 루틴·드릴 ─────────────────────────────────────── */
.ttrBuilder { position: relative; background: var(--surface-2); border-radius: var(--r-xl); padding: var(--sp-5); margin: 0 0 var(--sp-7); overflow: hidden; }
.ttrBuilder h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); }
.ttrBuilder .ttrForm { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.ttrBuilder .ttrForm .btn { min-height: 42px; }
.ttrBuilder > .dim { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.ttrRoutine:empty { display: none; }
.ttrRoutine { margin-top: var(--sp-5); }
.ttrRoutineCard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); animation: ttrRise .5s var(--ttr-bounce) both; }
.ttrRoutineHead { position: relative; display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.ttrRoutineHead p { margin: 0; }
.ttrRoutineTitle { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.ttrPhaseBar { display: flex; height: 34px; border-radius: var(--r-full); overflow: hidden; margin: 0 0 var(--sp-4); background: var(--surface-3); }
.ttrPhaseBar span { flex: 0 0 var(--w); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-xs); color: #fff; white-space: nowrap; overflow: hidden; transform-origin: left; animation: ttrGrow .6s var(--ttr-bounce) both; animation-delay: calc(var(--i) * 120ms); }
.ph-warmup { --ph: #d98a2b; }
.ph-skill { --ph: var(--accent); }
.ph-game { --ph: #3c5d8f; }
.ph-cooldown { --ph: #3f7a62; }
.ttrPhaseBar span { background: var(--ph); }
.ttrPhases { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ttrPhase { border-left: 4px solid var(--ph); padding: 0 0 0 var(--sp-3); animation: ttrRise .45s var(--ttr-bounce) both; animation-delay: calc(.2s + var(--i) * 90ms); }
.ttrPhaseHead { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 4px; }
.ttrPhaseDot { width: 10px; height: 10px; border-radius: 50%; background: var(--ph); }
.ttrPhase ol { margin: 0; padding-left: 1.2em; }
.ttrPhase li { margin: 2px 0; }
.ttrMin { margin-left: 6px; font-size: var(--fs-sm); color: var(--dimmer); font-variant-numeric: tabular-nums; }
.ttrFilters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-5); }
.ttrFilter { padding: 6px 14px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); color: var(--dim); font: inherit; font-size: var(--fs-md); cursor: pointer; transition: transform .15s var(--ttr-bounce); }
.ttrFilter:active { transform: scale(.92); }
.ttrFilter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ttrGroupHead { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
.ttrDrills { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ttrDrill { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); scroll-margin-top: 80px; }
.ttrDrill h3 { margin: 0 0 4px; font-size: var(--fs-base); }
.ttrDrill p { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.ttrDrill details { font-size: var(--fs-md); }
.ttrDrill summary { cursor: pointer; color: var(--accent-text); font-weight: var(--fw-medium); }
.ttrDrill ol, .ttrDrill ul { margin: var(--sp-2) 0; padding-left: 1.2em; }
.ttrMiss { margin: var(--sp-2) 0 0 !important; }
.ttrTags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ttrChip.lv-intro { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.ttrChip.lv-basic { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.ttrChip.lv-mid { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; }
.ttrFlash { animation: ttrFlash 1.2s ease-out; }
@keyframes ttrFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ttrTable { width: 76px; height: auto; }
.ttrTop { fill: var(--ttr-table); stroke: var(--ttr-table-line); stroke-width: 2; }
.ttrMid { stroke: var(--ttr-table-line); stroke-width: .8; opacity: .55; }
.ttrNet { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.ttrTrail { fill: none; stroke: var(--ttr-orange); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: .9; }
.ttrBounce { fill: var(--ttr-orange); opacity: .55; }
.ttrBall { fill: var(--ttr-ball); stroke: var(--ttr-orange); stroke-width: 1.2; }
.ttrNoTable { display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r); aspect-ratio: 112 / 192; }
.ttrNoTable .pongi { width: 56px; height: 58px; }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .ttrHero { gap: var(--sp-3); align-items: flex-start; }
  .ttrHero .pongi { width: 64px; height: 66px; }
  .ttrHero h1 { font-size: var(--fs-2xl); }
  .ttrHero .lead { font-size: var(--fs-base); }
  .ttrCard { padding: var(--sp-4); }
  .ttrActions { grid-template-columns: 1fr; }
  .ttrBuilder { padding: var(--sp-4); }
  .ttrBuilder .ttrForm { grid-template-columns: 1fr 1fr; }
  .ttrBuilder .ttrForm .btn { grid-column: 1 / -1; }
  .ttrBuilder .ttrForm label:nth-child(3) { grid-column: 1 / -1; }
  .ttrDrill { grid-template-columns: 60px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .ttrTable { width: 60px; }
  .ttrMatchSide { max-width: 34%; }
  .ttrDialogHead { padding: var(--sp-3) var(--sp-4); }
  .ttrDialogBody { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .ttrGameRow { grid-template-columns: 3.4em 1fr auto 1fr; }
}

/* ── 움직임 줄이기 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pongi *, .ttrRise, .ttrMatch, .ttrDot, .ttrDot.last, .ttrLine, .ttrCell, .ttrBar i, .ttrFlame, .ttrCount, .ttrPhaseBar span,
  .ttrPhase, .ttrRoutineCard, .ttrForm fieldset.ttrNameGate, .ttrRankRow, .ttrRankNo, .ttrGameRow, .ttrDots i, .ttrToast, .ttrToastBall, .ttrDialog[open],
  .ttrPopNum, .ttrVerdict.shake, .ttrFlash, .ttrRankRow[data-medal="1"] .ttrRankNo {
    animation: none !important;
  }
  .ttrLine { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ttrRingFg, .ttrSwitch::after, .ttrSeg, .ttrApp .btn, .ttrFilter { transition: none !important; }
  .ttrRallyBall { display: none; }
  .ttrToast.out { transition: opacity .2s; transform: none; }
}

/* ── 가입 권유(흐린 예시 + 퐁이 카드) ─────────────────────── */
/* 흐린 칸과 카드를 같은 격자 칸에 겹친다. 절대 위치로 띄우면 흐린 칸이 짧을 때(순위표 다섯 줄) 카드가
   넘쳐 아래 글을 덮는다 — 격자는 둘 중 큰 쪽의 높이를 갖는다. 흐린 칸의 내용은 언제나 예시다(ui.teaser). */
.ttrTeaser { display: grid; margin: 0 0 var(--sp-6); }
.ttrTeaser > * { grid-area: 1 / 1; min-width: 0; }
.ttrTeaserBlur { filter: blur(5px) saturate(.85); opacity: .7; pointer-events: none; user-select: none; -webkit-user-select: none;
  max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ttrTeaserCard { align-self: center; justify-self: center; z-index: 1; width: min(420px, calc(100% - 16px)); margin: var(--sp-4) 0;
  display: grid; justify-items: center; text-align: center; gap: 8px; background: var(--surface); border: 2px solid var(--accent);
  border-radius: 22px; padding: 18px 18px 16px; box-shadow: var(--shadow-lg); }
.ttrTeaserCard h2 { margin: 0; font-size: var(--fs-xl); }
.ttrTeaserCard p { margin: 0; }
.ttrTeaserNote { font-size: var(--fs-sm); color: var(--dim); }
.ttrTeaserBtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.ttrLogSpot { margin: var(--sp-6) 0; }
.ttrLogSpot h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }