/* 경기 영상 검토(/tt/play/review). 색·간격·모서리·그림자는 사이트 디자인 토큰(design.css)과 놀이터 키트(kit.css)의 것만
 * 쓴다 — 다른 탁구 화면과 같은 느낌이 나야 한다. 상태색: 맞음 = --ok, 확인 필요 = --warn, 무효 = --err.
 * 큰 단추는 엄지로 누르는 자리라 56px 이상, 나머지 누를 곳도 44px 이상. 움직임 줄이기에서는 강조를 테두리로만. */
.rvHead{display:grid;gap:var(--sp-2)}
.rvBoard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-2);text-align:center;color:#fffaf2;
  background:linear-gradient(180deg,var(--tp-table-2),var(--tp-table));border:3px solid var(--tp-line);border-radius:var(--r-xl,20px);
  padding:var(--sp-3) var(--sp-3);box-shadow:0 5px 0 color-mix(in srgb,var(--tp-table) 60%,#000)}
.rvName{font-weight:800;font-size:var(--fs-sm);overflow-wrap:anywhere}
.rvBig{font-weight:900;font-size:clamp(34px,10vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.rvGames{grid-column:1/-1;font-size:var(--fs-sm);opacity:.88}
.rvTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:2px solid var(--border-2);border-radius:var(--r-full,999px);padding:4px}
.rvTab{appearance:none;font:inherit;font-weight:800;min-height:44px;border:0;border-radius:var(--r-full,999px);background:transparent;color:var(--text);cursor:pointer}
.rvTab.on{background:var(--accent);color:#fff}
.rvTab:focus-visible,.rvChoice:focus-visible,.rvAct:focus-visible,.rvInsert summary:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.rvEdits{margin:0;color:var(--dim);font-size:var(--fs-sm);text-align:center}

/* 남은 개수 + 진행 막대 */
.rvMeter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px var(--sp-2)}
.rvMeter p{margin:0;font-weight:800}
.rvCount{font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.rvProgress{grid-column:1/-1;height:12px;border-radius:var(--r-full,999px);background:var(--surface-3,var(--border-2));overflow:hidden;border:2px solid var(--border-2)}
.rvProgress i{display:block;height:100%;background:var(--ok-fill,var(--ok));border-radius:inherit;transition:width .35s var(--tp-spring)}

/* 확인 카드 */
.rvCard{display:grid;gap:var(--sp-3);box-shadow:var(--shadow-sm);animation:tpIn .35s var(--tp-spring) both}
.rvCardTop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.rvCardTop h3{margin:0;font-size:var(--fs-xl)}
.rvWhy{display:inline-flex;align-items:center;font-weight:800;font-size:var(--fs-sm);color:var(--warn);background:var(--warn-bg);
  border:2px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:var(--r-full,999px);padding:2px 10px}
.rvClip{margin:0;display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:var(--sp-3);align-items:center;background:var(--surface-2);
  border:2px dashed var(--border-2);border-radius:var(--r-lg,14px);padding:var(--sp-3)}
.rvClip figcaption{display:grid;gap:2px;font-size:var(--fs-sm);color:var(--dim)}
.rvClip figcaption b{color:var(--text);font-variant-numeric:tabular-nums}
.rvCourt{width:100%;height:auto}
.rvCourt .top{fill:var(--tp-table)}
.rvCourt .win{fill:var(--accent)}
.rvCourt .net,.rvCourt .leg{fill:var(--tp-ink)}
.rvCourt .ball{fill:var(--tp-ball);stroke:var(--tp-ink);stroke-width:2.5}
.rvCourt .lbl{font:800 10px system-ui,sans-serif;fill:var(--dim)}
[data-theme="dark"] .rvCourt .net,[data-theme="dark"] .rvCourt .leg{fill:#fffaf2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rvCourt .net,:root:not([data-theme="light"]) .rvCourt .leg{fill:#fffaf2}}
.rvSuggest{display:grid;gap:4px}
.rvSuggestLine{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-weight:800;font-size:var(--fs-md)}
.rvSuggestLine .tpPongi{width:36px;flex:none}
.rvSuggestScore{margin:0;font-weight:900;font-size:var(--fs-lg);font-variant-numeric:tabular-nums;white-space:pre}
.rvChoices{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.rvChoice{appearance:none;font:inherit;cursor:pointer;display:grid;gap:2px;justify-items:center;align-content:center;min-height:64px;
  padding:var(--sp-2);border-radius:var(--r-lg,14px);border:3px solid var(--border-2);background:var(--surface);color:var(--text);
  box-shadow:0 4px 0 var(--border-2);transition:transform .15s var(--tp-spring)}
.rvChoice b{font-size:var(--fs-lg);overflow-wrap:anywhere}
.rvChoice span{font-size:var(--fs-xs,12px);color:var(--dim)}
.rvChoice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border-2)}
.rvChoice.ok{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok));color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--ok-fill,var(--ok)) 60%,#000)}
.rvChoice.ok span{color:#f2fff8}
.rvChoice.no{border-color:color-mix(in srgb,var(--err) 55%,transparent);color:var(--err)}
.rvCardTools{justify-content:space-between}
.rvDone{display:grid;justify-items:center;text-align:center;gap:var(--sp-3)}
.rvDone h3{margin:0}

/* 전체 목록 */
.rvTools{justify-content:flex-end}
.rvInsert summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.rvInsertRow{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.rvInput{border:2px solid var(--border-input,var(--border-2));border-radius:var(--r,12px);padding:8px 10px;font:inherit;background:var(--surface);color:var(--text);width:7.5em;min-height:44px}
.rvInput:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--accent)}
.rvNote{font-size:var(--fs-sm);color:var(--dim);margin:4px 0 0}
.rvList{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rvRow{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"time main score" "acts acts acts";gap:4px var(--sp-2);
  align-items:center;border:2px solid var(--border-2);border-radius:var(--r-lg,14px);padding:8px 10px;background:var(--surface)}
.rvRow.ask{border-color:color-mix(in srgb,var(--warn) 55%,transparent);box-shadow:inset 6px 0 0 var(--warn-fill,var(--warn))}
.rvRow.s-deleted{opacity:.6}
.rvRow.s-deleted .rvVerdict{text-decoration:line-through}
.rvTime{grid-area:time;font:700 13px/1 var(--font-mono,ui-monospace,Menlo,monospace);color:var(--dim)}
.rvMain{grid-area:main;min-width:0;display:grid;gap:4px}
.rvVerdict{font-size:var(--fs-base);overflow-wrap:anywhere}
.rvMeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--fs-xs,12px)}
.rvTag{border-radius:var(--r-full,999px);padding:1px 8px;font-weight:800;background:var(--surface-2);color:var(--text);border:1px solid var(--border-2)}
.rvTag.s-approved{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.rvTag.s-flipped,.rvTag.s-inserted{background:var(--accent-bg);color:var(--accent-fg);border-color:transparent}
.rvTag.s-deleted{background:var(--err-bg);color:var(--err);border-color:transparent}
.rvConf{position:relative;display:inline-flex;align-items:center;width:64px;height:16px;border-radius:var(--r-full,999px);background:var(--surface-2);border:1px solid var(--border-2);overflow:hidden}
.rvConf i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--tp-orange) 70%,transparent)}
.rvConf em{position:relative;font-style:normal;font-weight:800;font-size:10px;padding-left:6px;color:var(--text)}
.rvScore{grid-area:score;font-weight:900;font-variant-numeric:tabular-nums;text-align:right;font-size:var(--fs-sm)}
.rvActs{grid-area:acts;display:flex;gap:6px;justify-content:flex-end}
.rvAct{appearance:none;font:inherit;font-weight:900;min-width:44px;min-height:44px;border-radius:var(--r,12px);border:2px solid var(--border-2);
  background:var(--surface);color:var(--text);cursor:pointer;transition:transform .15s var(--tp-spring)}
.rvAct:active{transform:scale(.92)}
.rvAct.on{background:var(--ok-fill,var(--ok));border-color:var(--ok-fill,var(--ok));color:#fff}

/* 불러오는 중 — 자리를 먼저 잡는 회색 틀 */
.rvSkel{display:grid;gap:var(--sp-3)}
.rvSkel .sk{border-radius:var(--r-lg,14px);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3,var(--border-2)) 50%,var(--surface-2) 75%) 0 0/300% 100%;
  animation:rvShine 1.3s ease-in-out infinite}
.rvSkel .board{height:96px}.rvSkel .bar{height:44px}.rvSkel .card{height:300px}
@keyframes rvShine{0%{background-position:100% 0}100%{background-position:0 0}}

@media (min-width:640px){.rvRow{grid-template-columns:3.5em 1fr auto auto;grid-template-areas:"time main score acts"}
  .rvChoices{grid-template-columns:repeat(4,1fr)}}
/* 폰: 카드(정보와 단추)가 첫 화면에 들도록 머리 점수판을 줄이고, 영상 칸은 그림·글을 옆으로 붙인다. */
@media (max-width:480px){.rvBoard{padding:var(--sp-2);gap:4px}.rvBig{font-size:34px}.rvGames{font-size:var(--fs-xs,12px)}
  .rvTab{min-height:44px}.rvClip{grid-template-columns:96px 1fr;padding:var(--sp-2);gap:var(--sp-2)}
  .rvCard{padding:var(--sp-3);gap:var(--sp-2)}.rvCardTop h3{font-size:var(--fs-lg)}}
@media (prefers-reduced-motion:reduce){.rvChoice,.rvAct,.rvProgress i{transition:none}.rvCard{animation:none}
  .rvSkel .sk{animation:none}.rvRow.ask{box-shadow:none;border-width:3px}}