/* 경주 재현. chart.css 의 토큰(--ink/--muted/--line/--accent)을 그대로 쓴다. */
/* 스크립트가 붙기 전에는 되짚어 볼 수단이 없다. 움직이지 않는 레인과 죽은 버튼 대신
   착순·주파 기록과 아래 표만 보여 준다. */
#race-replay:not([data-replay-ready]) .replay-scale,
#race-replay:not([data-replay-ready]) .replay-scale-note,
#race-replay:not([data-replay-ready]) .replay-lane,
#race-replay:not([data-replay-ready]) .replay-status,
#race-replay:not([data-replay-ready]) .replay-switches{display:none}
#race-replay:not([data-replay-ready]) .replay-row{grid-template-columns:var(--c-rank) minmax(0,1fr) var(--c-read)}

.replay-panel .chart-data-heading{margin-top:28px}
.replay-controls{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#f8fafd;margin-bottom:14px}
.replay-buttons{display:flex;gap:8px}
.replay-buttons .chart-button{min-width:88px}
.replay-speeds{display:inline-flex;padding:3px;background:#e9eef5;border-radius:9px;gap:2px}
.replay-speeds button{min-height:34px;padding:6px 11px;border:0;background:transparent;border-radius:7px;font-size:12px;font-weight:650;color:#52657c;cursor:pointer}
.replay-speeds [aria-pressed=true]{background:#fff;color:#214eab;box-shadow:0 1px 4px #2034501a}
.replay-scrub{flex:1 1 200px;display:flex;min-width:160px}
.replay-scrub input{width:100%;accent-color:var(--accent)}
.replay-clock{font-size:13px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.replay-status{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:22px;margin-bottom:12px;font-size:14px}
.replay-status strong{font-weight:700}
.replay-status span{font-size:13px;color:var(--muted)}

.replay-track{--c-rank:28px;--c-name:132px;--c-read:74px;--c-gap:10px;
  border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;background:linear-gradient(#fcfdff,#fff)}
.replay-scale{position:relative;height:17px;padding:0;list-style:none;
  margin:0 calc(var(--c-read) + var(--c-gap)) 9px calc(var(--c-rank) + var(--c-name) + var(--c-gap)*2)}
.replay-scale li{position:absolute;left:var(--at);transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#7b8a9e}
.replay-scale li:first-child{transform:none}
.replay-scale li:last-child{transform:translateX(-100%)}

.replay-lanes{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.replay-row{display:grid;grid-template-columns:var(--c-rank) var(--c-name) minmax(0,1fr) var(--c-read);
  gap:var(--c-gap);align-items:center;min-width:0}
.replay-rank{font-size:12px;font-weight:700;color:#7b8a9e;text-align:center;font-variant-numeric:tabular-nums}
.replay-runner{display:inline-flex;align-items:center;gap:7px;min-width:0}
.replay-name{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.replay-lane{position:relative;height:22px;border-radius:11px;background:#eef2f7;border:1px solid #e3e9f1;min-width:0}
.replay-tick{position:absolute;top:3px;bottom:3px;width:1px;background:#ccd6e3}
.replay-lane:after{content:'';position:absolute;right:0;top:0;bottom:0;width:7px;border-radius:0 10px 10px 0;
  background:repeating-conic-gradient(#3d4c60 0 25%,#f4f7fb 0 50%) 0 0/7px 7px}
.replay-marker{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  box-shadow:0 0 0 1px #8b98aa,0 1px 3px #0f1f3a40}
.replay-readout{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.replay-row.is-leading .replay-lane{background:#e8f0ff;border-color:#b6caee}
.replay-row.is-leading .replay-rank{color:#1c58cb}
.replay-row.is-leading .replay-marker{width:17px;height:17px;margin:-8.5px 0 0 -8.5px;box-shadow:0 0 0 1px #2854a2,0 2px 5px #0f1f3a4d}
.replay-row.is-finished .replay-readout{color:#1c58cb;font-weight:650}

.replay-scale-note{display:none;font-size:10px;color:#7b8a9e;margin:0 0 9px;min-height:17px;line-height:1.5}
.replay-track[data-view=gap] .replay-scale-note{display:block}
.replay-track[data-view=gap] .replay-scale,
.replay-track[data-view=gap] .replay-tick,
.replay-track[data-view=gap] .replay-lane:after{display:none}
.replay-track[data-view=gap] .replay-lane{background:linear-gradient(90deg,#f4f7fb,#e4ecf7)}

.replay-switches{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:14px}
.replay-order-switch{display:flex;align-items:center;gap:8px}
.replay-order-switch button{min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;color:#52657c;cursor:pointer}
.replay-order-switch [aria-pressed=true]{background:#203e64;color:#fff;border-color:#203e64}

@media(max-width:700px){
  .replay-track{--c-rank:18px;--c-name:92px;--c-read:50px;--c-gap:6px;padding:12px 10px 13px}
  .replay-controls{padding:11px 12px;gap:9px}
  .replay-buttons .chart-button{min-width:0;padding:9px 13px}
  .replay-scrub{flex-basis:100%;order:5}
  .replay-name{font-size:12px}
  .replay-readout{font-size:11px}
  .replay-scale li:not(:first-child):not(:last-child){display:none}
}

/* 가상 경주. 실측 재현과 한눈에 구분되어야 한다. */
.forecast-panel{border-color:#e2d5b8;background:linear-gradient(#fffdf7,#fff)}
.forecast-badge{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:6px;background:#fdf0d5;color:#8a6414;font-size:12px;font-weight:750;vertical-align:middle}
.forecast-track{background:linear-gradient(#fffdf7,#fff);border-style:dashed}
.forecast-track .replay-lane{background:#f6f1e6;border-color:#e6dcc8}
.forecast-track .replay-lane:after{background:repeating-conic-gradient(#8a7a55 0 25%,#fbf7ee 0 50%) 0 0/7px 7px}
.forecast-track .replay-row.is-leading .replay-lane{background:#fdf3dd;border-color:#dcc48a}
.forecast-track .replay-row.is-substitute{opacity:.72}
.forecast-track .replay-row.is-substitute .replay-lane{border-style:dashed}
.forecast-basis-field{display:inline-block;padding:2px 7px;border-radius:5px;background:#fdf0d5;color:#8a6414;font-size:11px;font-weight:700}
.forecast-adjusted{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:5px;background:#e8f0ff;color:#24508f;font-size:11px;font-weight:700}
.forecast-thin{color:#8a6414}
.forecast-controls{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;padding:13px 15px;border:1px solid #e6dcc8;border-radius:12px;background:#fffaf0;margin-bottom:14px}
.forecast-editor{margin-top:22px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.forecast-editor summary{cursor:pointer;font-weight:700;font-size:15px}
.forecast-editor>p{margin-top:8px}
.forecast-field{display:flex;flex-direction:column;gap:4px;min-width:96px}
.forecast-field em{font-style:normal;font-size:11px;color:var(--muted)}
.forecast-field input{width:92px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;min-height:40px}
@media(max-width:700px){.forecast-editor{padding:13px 11px}.forecast-field input{width:74px}}