/*
 * 탐색 과정 재생기 스타일. 모든 선택자는 .rp- 접두어를 써서 스튜디오(studio.css) 안에 들어가도 서로 침범하지 않는다.
 * 1440×900 독립 페이지: 페이지 스크롤 0. 모바일(≤700px): 일정판이 길어지므로 이 페이지만 세로 스크롤을 허용한다.
 */
.rp {
  --rp-navy: #0A1E3C; --rp-blue: #1F5FD6; --rp-blue-line: #B7CBF2; --rp-sel: #E7EEFC;
  --rp-bg: #F3F4F6; --rp-surface: #FFFFFF; --rp-surface-2: #F8F9FB; --rp-line: #E2E5EA; --rp-line-2: #D2D7DF;
  --rp-text: #172033; --rp-text-2: #435067; --rp-text-3: #5F697D; --rp-ok: #13703F; --rp-bad: #B3261E;
  --rp-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --rp-score-w: 360px;
  font: 13px/1.45 var(--rp-font); color: var(--rp-text); background: var(--rp-bg);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; min-width: 0; outline: none;
  -webkit-font-smoothing: antialiased;
}
.rp:focus-visible { box-shadow: inset 0 0 0 2px var(--rp-blue); }
.rp-embedded { grid-template-rows: minmax(0, 1fr) auto auto; --rp-score-w: 320px; }
.rp *, .rp *::before, .rp *::after { box-sizing: border-box; }
.rp button { font: inherit; color: inherit; cursor: pointer; }
.rp-muted { color: var(--rp-text-3); font-size: 12px; }
.rp-i { width: 16px; height: 16px; fill: none; flex: none; }

/* 독립 페이지 뼈대 (replay.html) */
html.rp-html, body.rp-body { margin: 0; height: 100%; overflow: hidden; background: #F3F4F6; }
.rp-page { height: 100vh; min-height: 0; display: flex; flex-direction: column; }
.rp-page > .rp { flex: 1; min-height: 0; }
.rp-msg { margin: auto; padding: 24px 28px; background: #fff; border: 1px solid #E2E5EA; border-radius: 6px; font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: #172033; text-align: center; }
.rp-msg.rp-err { border-color: #EFB1AC; background: #FCEBEA; color: #7A1D17; }
.rp-msg small { color: #5F697D; font-size: 12px; }

/* 상단 */
.rp-top { height: 44px; background: var(--rp-navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px; min-width: 0; }
.rp-brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 14px; }
.rp-mark { width: 34px; height: 22px; border-radius: 4px; background: #fff; color: var(--rp-navy); font-weight: 800; font-size: 11px; display: grid; place-items: center; }
.rp-meta { color: #C9D4E6; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-link { margin-left: auto; color: #C9D4E6; font-size: 12px; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; padding: 3px 9px; }
.rp-link:hover { color: #fff; border-color: #fff; }

/* 본문: 일정판 + 점수 곡선 */
.rp-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--rp-score-w); gap: 10px; padding: 10px; min-height: 0; min-width: 0; }
.rp-board-wrap, .rp-score { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--rp-surface); border: 1px solid var(--rp-line); border-radius: 6px; overflow: hidden; }
.rp-board-h, .rp-score-h { flex: none; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--rp-line); white-space: nowrap; min-width: 0; }
.rp-board-h b, .rp-score-h b { font-size: 13px; }
.rp-pool { font-size: 11.5px; font-weight: 700; color: #8A5300; background: #FFF3D9; border: 1px solid #EDCB84; border-radius: 3px; padding: 0 6px; }
.rp-legend { margin-left: auto; display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--rp-text-2); white-space: nowrap; }
.rp-chip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.rp-board { position: relative; flex: 1; min-height: 0; padding: 4px; }
.rp-grid { height: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; min-height: 0; }
.rp-slot { border: 1px solid var(--rp-line); border-radius: 4px; background: var(--rp-surface-2); min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.rp-slot.wk { background: #F3F7FF; border-color: #DCE6F8; }
.rp-slot-h { flex: none; height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 5px; font-size: 10.5px; color: var(--rp-text-2); border-bottom: 1px dashed var(--rp-line); white-space: nowrap; overflow: hidden; }
.rp-slot.wk .rp-slot-h { color: var(--rp-blue); }
.rp-slot-h .rp-g { color: var(--rp-text-3); }

.rp-cards { position: absolute; inset: 0; pointer-events: none; }
.rp-card {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; align-items: center; gap: 4px; padding: 0 4px 0 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--c) 9%, #fff); border-left: 3px solid var(--c);
  font-size: 10.5px; line-height: 1; white-space: nowrap; overflow: hidden; color: var(--rp-text);
  will-change: transform; transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, background-color .3s;
}
.rp-card b { font-weight: 700; color: var(--c); }
.rp-card span { color: var(--rp-text-2); overflow: hidden; text-overflow: ellipsis; }
.rp-card.rp-hot { background: #fff; box-shadow: 0 0 0 2px var(--rp-blue), 0 4px 12px rgba(10, 30, 60, .28); z-index: 2; }
.rp-nomotion .rp-card { transition: none !important; }
.rp-tight .rp-card { font-size: 9.5px; gap: 3px; padding: 0 3px 0 4px; }
.rp-tight .rp-card span { display: none; }

/* 점수 곡선 */
.rp-levels { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); padding: 2px 10px 0; }
.rp-lv { display: flex; flex-direction: column; min-height: 0; padding: 4px 0 2px; border-bottom: 1px solid var(--rp-line); }
.rp-lv:last-child { border-bottom: 0; }
.rp-lv-h { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--rp-text-2); }
.rp-lv-name { font-weight: 600; }
.rp-lv-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-lv-val b { color: var(--rp-text); font-size: 12.5px; }
.rp-lv-val small { margin-left: 6px; color: var(--rp-text-3); font-size: 10.5px; }
.rp-lv.zero .rp-lv-val b { color: var(--rp-ok); }
.rp-lv-svg { flex: 1; min-height: 0; width: 100%; display: block; overflow: visible; }
.rp-gl { stroke: var(--rp-line); stroke-width: 1; }
.rp-area { fill: var(--rp-blue); fill-opacity: .08; }
.rp-line { fill: none; stroke: var(--rp-blue); stroke-width: 1.6; stroke-linejoin: round; }
.rp-lv:last-child .rp-line { stroke: var(--rp-navy); }
.rp-lv:last-child .rp-area { fill: var(--rp-navy); }
.rp-tick { font-size: 9.5px; fill: var(--rp-text-3); font-family: var(--rp-font); }
.rp-cur line { stroke: var(--rp-bad); stroke-width: 1; stroke-dasharray: 2 2; }
.rp-cur circle { fill: #fff; stroke: var(--rp-bad); stroke-width: 2; }
.rp-axis { flex: none; display: flex; justify-content: space-between; padding: 2px 10px 6px; font-size: 10.5px; color: var(--rp-text-3); font-variant-numeric: tabular-nums; }

/* 해설 한 줄 */
.rp-cap { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 16px; background: var(--rp-surface); border-top: 1px solid var(--rp-line); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-cap b { color: var(--rp-blue); }

/* 컨트롤 */
.rp-ctrl { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--rp-surface); border-top: 1px solid var(--rp-line); min-width: 0; }
.rp-btn { height: 30px; min-width: 30px; padding: 0 7px; border: 1px solid var(--rp-line-2); border-radius: 4px; background: var(--rp-surface); display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--rp-text); white-space: nowrap; }
.rp-btn:hover:not([disabled]) { background: #F2F5FA; border-color: #B4BBC7; }
.rp-btn[disabled] { opacity: .4; cursor: not-allowed; }
.rp-play { background: var(--rp-blue); border-color: var(--rp-blue); color: #fff; font-weight: 600; padding: 0 14px; min-width: 104px; }
.rp-play:hover:not([disabled]) { background: #184FB5; border-color: #184FB5; }
.rp-spd { display: inline-flex; margin-left: 4px; }
.rp-spd .rp-btn { border-radius: 0; margin-left: -1px; font-size: 12px; min-width: 42px; }
.rp-spd .rp-btn:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.rp-spd .rp-btn:last-child { border-radius: 0 4px 4px 0; }
.rp-spd .rp-btn.on { background: var(--rp-sel); border-color: var(--rp-blue-line); color: var(--rp-blue); font-weight: 700; position: relative; z-index: 1; }
.rp-range { flex: 1; min-width: 80px; accent-color: var(--rp-blue); margin: 0 6px; }
.rp-time { font-variant-numeric: tabular-nums; color: var(--rp-text-2); white-space: nowrap; font-size: 12.5px; }
.rp-time b { color: var(--rp-text); }

/* 모바일: 일정판 3열, 페이지 세로 스크롤 허용 */
@media (max-width: 700px) {
  html.rp-html, body.rp-body { overflow: auto; height: auto; }
  .rp-page { height: auto; min-height: 100vh; }
  .rp { height: auto; min-height: 100vh; grid-template-rows: auto auto auto auto; }
  .rp-top { padding: 0 10px; gap: 10px; }
  .rp-meta, .rp-legend { display: none; }
  .rp-main { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
  .rp-board { flex: none; }
  .rp-grid { height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 116px; }
  .rp-score { height: 440px; flex: none; }
  .rp-cap { height: auto; min-height: 36px; padding: 8px 12px; white-space: normal; font-size: 12.5px; line-height: 1.4; }
  .rp-ctrl { position: sticky; bottom: 0; z-index: 5; height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 6px; box-shadow: 0 -4px 12px rgba(10, 30, 60, .08); }
  .rp-range { flex: 1 1 100%; order: 9; margin: 0; }
  .rp-time { margin-left: auto; }
  .rp-play { min-width: 92px; }
}