/* 10초 맞추기 전용 CSS (2026-11-04). 무대(설정 줄 + 차례 띠 + 다이얼 단추 + 결과 한 줄)·결과(멈춘 시간 | 과녁 눈금 + 내 최고/순위) tsc-*. 공용 부품은 assets/v2.css
   다이얼: 재는 동안 테두리·고리가 진해지고(색만이 아니라 글자 '누르면 멈춤'도 바뀜), 숨긴 동안에는 숫자 자리에 ??.??와 점선 고리만 남긴다(시간을 짐작할 움직임 없음). */
.tsc{container:tscw / inline-size}
.tsc-stage{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 18px 18px;border-bottom:1px solid var(--soft)}
.tsc-bar{display:flex;align-items:flex-start;gap:10px 16px}
.tsc-sets{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.tsc-set{display:flex;flex-direction:column;gap:5px;min-width:0}
.tsc-set .v2-label{margin:0}
.tsc-btns{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.tsc-set .v2-seg button:disabled,.tsc-btns .v2-btn:disabled{opacity:.5;cursor:default}

/* 여럿이: 차례 띠와 이름 바꾸기 */
.tsc-pl{display:flex;flex-direction:column;gap:8px}
.tsc-pl[hidden],.tsc-plbox[hidden],.tsc-turn[hidden],.tsc-box[hidden]{display:none} /* display 를 준 클래스가 hidden 속성을 덮지 않게 */
.tsc-plrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tsc-plrow .v2-label{margin:0}
.tsc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;flex:1 1 220px;min-width:0}
.tsc-chips li{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:14px;background:var(--paper);font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.tsc-chips li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tsc-chips li b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tsc-chips li em{font-style:normal;font-weight:700;color:var(--muted);white-space:nowrap}
.tsc-chips li.is-now{border-color:var(--ink);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--ink)}
.tsc-chips li.is-win{border-color:var(--accent);color:var(--ink)}
.tsc-chips li.is-win em{color:var(--accent)}
.tsc-pledit{height:30px;padding:0 10px;font-size:12px}
.tsc-plbox{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.tsc-plbox .v2-label{margin:0}
.tsc-ta{width:100%;box-sizing:border-box;min-height:96px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;resize:vertical}
.tsc-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.tsc-ta[aria-invalid="true"]{border-color:var(--accent)}
.tsc-plfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.tsc-plmsg{flex:1 1 200px;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.tsc-plmsg.is-error{color:var(--accent)}

/* 다이얼 단추 */
.tsc-arena{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px}
.tsc-turn{margin:0;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);text-align:center}
.tsc-go{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:min(300px,76cqi);aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation;container-type:inline-size;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.tsc-go:hover{border-color:var(--ink)}
.tsc-go:focus{outline:none}
.tsc-go:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tsc-dial{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);pointer-events:none}
.tsc-track{fill:none;stroke:var(--soft);stroke-width:6}
.tsc-ring{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-dasharray:578.05;stroke-dashoffset:578.05}
.tsc-dig{position:relative;font-family:var(--sans);font-size:24cqi;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.tsc-dig.is-l6{font-size:19cqi}
.tsc-dig.is-l7{font-size:16cqi} /* 결과 10.032(6자)·123.456(7자)도 안쪽 고리 안에 */
.tsc-cap{position:relative;max-width:78%;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--muted);text-align:center}
.tsc-stage[data-ph="run"] .tsc-go{border-color:var(--ink);background:var(--wash)}
.tsc-stage[data-ph="run"] .tsc-cap{color:var(--ink)}
.tsc-stage[data-fog="1"] .tsc-dig{color:var(--muted);letter-spacing:.04em}
.tsc-stage[data-fog="1"] .tsc-ring{opacity:0}
.tsc-stage[data-fog="1"] .tsc-track{stroke-dasharray:4 7}
.tsc-stage[data-ph="idle"] .tsc-ring,.tsc-stage[data-ph="end"] .tsc-ring{stroke:var(--accent)}
.tsc-stage[data-ph="void"] .tsc-dig{color:var(--muted)}
.tsc-msg{min-height:3.1em;max-width:36em;margin:0;font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.55;color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.tsc-help{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.tsc-live{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 전체 화면(R46): 무대만 크게. API 가 없으면 화면을 덮는 고정 보기 */
.tsc-stage:fullscreen{padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto;container:tscw / inline-size}
.tsc-stage:-webkit-full-screen{padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto}
.tsc-stage.is-full{position:fixed;inset:0;z-index:1000;padding:16px clamp(16px,4vw,48px) 24px;background:var(--paper);overflow:auto}
.tsc-stage:fullscreen .tsc-arena,.tsc-stage.is-full .tsc-arena{flex:1;justify-content:center}
.tsc-stage:-webkit-full-screen .tsc-arena{flex:1;justify-content:center}
.tsc-stage:fullscreen .tsc-go,.tsc-stage.is-full .tsc-go{width:min(440px,70vmin)}
.tsc-stage:-webkit-full-screen .tsc-go{width:min(440px,70vmin)}
html.tsc-lock{overflow:hidden}

/* 결과 */
.tsc-res{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.tsc-box{min-width:0;padding:16px 18px 18px}
.tsc-hero{border-right:1px solid var(--soft)}
.tsc-side{display:flex;flex-direction:column;min-width:0}
.tsc-side .tsc-box+.tsc-box{flex:1;border-top:1px solid var(--soft)}
.tsc-tag{margin:0 0 8px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.tsc-tag.is-ex,.tsc-tag.is-shared{color:var(--accent)}
.tsc-hero .v2-big{margin:4px 0 8px}
.tsc-hero .v2-sub{margin:0 0 12px}
.tsc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:14px}
.tsc-bhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px}
.tsc-bhead .v2-label{margin:0}
.tsc-legend{display:flex;flex-wrap:wrap;gap:2px 10px;margin-left:auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.tsc-legend .lg::before{content:"";display:inline-block;margin-right:4px;vertical-align:-1px}
.tsc-legend .lg-dot::before{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.tsc-legend .lg-mean::before{width:0;height:11px;border-left:2px dashed var(--muted)}
.tsc-legend .lg-band::before{width:12px;height:9px;background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--soft)}
.tsc-legend .lg-shared::before{width:7px;height:7px;background:var(--ink);transform:rotate(45deg)}
.tsc-strip{min-height:126px}
.tsc-strip svg{display:block;width:100%;height:auto;overflow:visible}
.tsc-b10{fill:var(--wash)}
.tsc-b3{fill:color-mix(in srgb, var(--accent-wash) 55%, var(--wash))}
.tsc-b1{fill:var(--accent-wash)}
.tsc-axis{stroke:var(--line);stroke-width:1}
.tsc-tick{font-family:var(--sans);font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.tsc-tick.is-zero{font-weight:700;fill:var(--ink)}
.tsc-side-lab{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.tsc-target{stroke:var(--accent);stroke-width:2}
.tsc-mean{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3}
.tsc-dot{fill:var(--ink)}
.tsc-dot.is-last{stroke:var(--accent);stroke-width:2.5}
.tsc-dot.is-ex{fill:var(--card);stroke:var(--muted);stroke-width:1.5}
.tsc-dot.is-ex.is-last{stroke:var(--accent);stroke-width:2}
.tsc-dot.is-new{transform-box:fill-box;transform-origin:center;animation:tsc-drop .34s ease-out}
@keyframes tsc-drop{from{transform:translateY(-18px);opacity:.15}}
.tsc-shared{fill:var(--ink)}
.tsc-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.tsc-bhead .tsc-clr{margin-left:auto;height:28px;padding:0 10px;font-size:12px}
.tsc-tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums}
.tsc-tbl th{padding:5px 6px;border-bottom:1px solid var(--line);font-weight:600;color:var(--muted);text-align:left;white-space:nowrap}
.tsc-tbl td{padding:5px 6px;border-bottom:1px solid var(--soft);color:var(--ink)}
.tsc-tbl td:nth-child(2){overflow-wrap:anywhere}
.tsc-tbl .n{text-align:right;white-space:nowrap}
.tsc-tbl tr.is-cur td{font-weight:700}
.tsc-tbl tr.is-cur td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tsc-tbl tr.is-win td{font-weight:700}
.tsc-tbl tr.is-win td:first-child{color:var(--accent)}

@container tscw (max-width:640px){
  .tsc-res{grid-template-columns:minmax(0,1fr)}
  .tsc-hero{border-right:0;border-bottom:1px solid var(--soft)}
  .tsc-bar{flex-direction:column;align-items:stretch}
  .tsc-btns{justify-content:flex-start}
}
@container tscw (max-width:420px){
  .tsc-stage{padding:12px 12px 14px}
  .tsc-box{padding:14px 12px 16px}
  .tsc-sets{gap:10px 12px}
  .tsc-tbl th,.tsc-tbl td{padding:5px 4px}
}
@media (prefers-reduced-motion:reduce){
  .tsc-dot.is-new{animation:none}
}