.spr-page, .spr-page * { box-sizing:border-box; }
.spr-page { color:#1f2937; }
/* 보드와 시간 패널 사이 여백은 다른 퍼즐(_puzzle_panel_style.php 의 #pzPanel margin-top:10px)과
   같은 값을 쓴다. 예전에는 0 이라 풀이 중에만 시간 패널이 보드에 붙어 복기 화면과 달라 보였다. */
.spr-board-wrap { position:relative; }
#ocviewerFrame { max-width:100%; display:block; border:0; }
.spr-input-shield { position:absolute; inset:0; z-index:4; background:transparent; }
.spr-input-shield.is-open { display:none; }
.spr-flash {
  display:inline-block; max-width:100%; padding:4px 6px; border-radius:999px; border:1px solid #d1d5db;
  background:#fff; color:#111827;
  font-size:15px; line-height:1.2; font-weight:700; text-align:center; white-space:normal; opacity:0; pointer-events:none;
  transition:opacity .08s ease;
}
/* Start and feedback share the same right-hand slot without shifting controls. */
.spr-feedback-slot { display:grid; align-items:center; justify-items:center; flex:0 0 76px; width:76px; min-width:76px; min-height:38px; }
.spr-feedback-slot > * { grid-area:1 / 1; }
.spr-feedback-slot #sprStartBtn { width:100%; }
.spr-flash.show { opacity:1; }
/* 복기 중에는 Start 가 숨겨져도 남던 예약 슬롯을 접고, 넓은 화면에서 보이는
   확대 버튼보다 뒤로 보내 Eval 을 오른쪽 끝에 붙인다. */
#pzPanel.spr-reviewing .spr-feedback-slot { display:none; }
#pzPanel.spr-reviewing #sprReviewEvalBtn { order:2; }
/* 검증 상태 박스 — 개별 퍼즐 결과창의 pz-verify-info 와 같은 서식을 쓰되 복기 줄 아래에 둔다. */
#sprVerifyBtn { border-color:#94a3b8; color:#334155; }
#sprVerifyBtn.is-active { border-color:#1d4ed8; background:#1d4ed8; color:#fff; }
.spr-verify-info { margin-top:6px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:7px; background:#f8fafc; }
/* 판정 결과 색은 개별 퍼즐 결과창(#pzResult)과 같은 값을 쓴다. */
.spr-verify-info.is-correct { background:#dcfce7; border-color:#86efac; color:#166534; }
.spr-verify-info.is-close   { background:#fef9c3; border-color:#fcd34d; color:#854d0e; }
.spr-verify-info.is-wrong   { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
.spr-flash.good { background:#dcfce7; border-color:#86efac; color:#166534; }
.spr-flash.near { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.spr-flash.bad { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
#pzPanel .spr-control-row { min-height:45px; }
#pzPanel .spr-hud { display:flex; align-items:center; gap:16px; overflow:visible; }
.spr-hud-item { display:flex; flex-direction:column; min-width:44px; line-height:1.1; }
.spr-hud-item small { color:#6b7280; font-size:11px; font-weight:700; }
.spr-hud-item b { margin-top:3px; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.spr-strike-item { min-width:70px; }
#sprStrikes { color:#dc2626; letter-spacing:1px; }
.spr-timer-track { width:100%; height:7px; margin:3px 0 8px; border-radius:999px; overflow:hidden; background:#e5e7eb; }
.spr-timer-track span { display:block; width:100%; height:100%; background:#2563eb; transform-origin:left center; }
.spr-timer-track span.is-low { background:#dc2626; }
.spr-meta { display:flex; justify-content:space-between; gap:10px; min-height:22px; color:#6b7280; font-size:13px; }
#sprModeDifficulty { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }
.spr-meta.is-reviewing { margin-top:2px; padding:7px 9px; border:1px solid #93c5fd; border-radius:7px; background:#eff6ff; color:#1e3a8a; }
.spr-meta.is-reviewing #sprSequence { flex:0 0 auto; font-weight:900; color:#1d4ed8; }
.spr-meta.is-reviewing #sprModeDifficulty { font-weight:700; }
.spr-intro { margin-top:7px; padding:12px; border:1px solid #e5e7eb; border-radius:9px; background:#f9fafb; font-size:13px; line-height:1.5; }
.spr-intro strong { display:block; margin-bottom:6px; font-size:14px; color:#111827; }
.spr-intro ul { margin:0; padding-left:18px; }
.spr-notice { margin:9px 0 0; padding:8px 10px; border-radius:7px; background:#eff6ff; color:#1e40af; }
.spr-notice.is-error { background:#fef2f2; color:#991b1b; }
.spr-result { margin-top:8px; }
.spr-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.spr-result-head strong { font-size:16px; }
#sprResultScore { color:#2563eb; font-size:28px; font-weight:900; font-variant-numeric:tabular-nums; }
.spr-result p { margin:3px 0 8px; color:#4b5563; }
/* 결과 요약의 '가장 높은 난이도 해결'(2026-09-09). 진행 중에는 난이도를 감추고 여기서만 알려 준다. */
.spr-result .spr-result-highest { margin-top:-4px; color:#254ead; font-weight:800; }
.spr-result #sprAgainBtn { width:100%; }
.spr-review { margin-top:10px; }
/* 복기 표는 항상 펼친 상태 — 접기 토글과 화살표는 쓰지 않는다(2026-09-09). */
.spr-review-title { margin:0; color:#254ead; font-size:14px; font-weight:800; }
/* 복기 표는 10행까지 보이고 그 뒤로 스크롤한다(2026-09-09). 375px 기준 실측: 헤더 28.5px + 행 29px
   → 10행 = 318.5px. 짧은 화면(가로 모드 등)에서는 60vh 로 제한해 결과 카드가 화면을 넘지 않게 한다. */
.spr-review-scroll { margin-top:7px; min-width:0; max-width:100%; overflow:auto; --spr-review-rows:10; max-height:min(60vh, calc(29px * (var(--spr-review-rows) + 1))); }
/* Fit the available width first; only unbreakable cell content may overflow. */
.spr-review table { width:100%; min-width:0; table-layout:auto; border-collapse:collapse; font-size:12px; }
.spr-review th, .spr-review td { padding:5px 4px; border-bottom:1px solid #e5e7eb; text-align:center; white-space:normal; overflow-wrap:anywhere; }
.spr-review td:nth-child(1), .spr-review td:nth-child(3), .spr-review td:nth-child(5) { white-space:nowrap; overflow-wrap:normal; }
.spr-review th { background:#f9fafb; color:#4b5563; }
.spr-review .is-correct { color:#15803d; font-weight:800; }
.spr-review .is-close { color:#b45309; font-weight:800; }
.spr-review .is-wrong { color:#b91c1c; font-weight:800; }
.spr-review tr.is-reviewing { background:#dbeafe; box-shadow:inset 4px 0 #2563eb; }
.spr-review tr.is-reviewing td { border-bottom-color:#93c5fd; }
.spr-review-link { display:inline-block; min-width:24px; color:#1d4ed8; font-weight:900; text-decoration:underline; text-underline-offset:2px; }
.spr-review-link:hover { color:#1e40af; }
.spr-review tr.is-reviewing .spr-review-link { color:#1e3a8a; }
.spr-record-card .card-body { padding:14px 16px; }
.spr-record-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; color:#374151; font-size:14px; }
.spr-record-grid span { display:flex; justify-content:space-between; gap:8px; }
.spr-period-tabs { display:flex; gap:3px; padding:2px; border-radius:8px; background:#f3f4f6; }
.spr-period-tabs button { border:0; border-radius:6px; padding:5px 8px; background:transparent; color:#6b7280; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; }
.spr-period-tabs button.active { background:#111827; color:#fff; }
.spr-leaderboard-head { align-items:flex-start; padding-bottom:2px !important; }
/* Let translated labels wrap locally without widening the board or page. */
#pzPanel .spr-control-row { flex-wrap:wrap; }
#pzPanel .spr-control-row .pz-right { margin-left:auto; max-width:100%; flex-wrap:wrap; }
#pzPanel .spr-hud { flex:1 0 auto; }
.spr-page .pz-record-head { flex-wrap:wrap; }
.spr-page .pz-record-head .card-title { flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
.spr-record-grid span { min-width:0; flex-wrap:wrap; overflow-wrap:anywhere; }
.spr-record-grid b { flex-shrink:0; }
.spr-period-tabs { max-width:100%; flex:0 0 auto; flex-wrap:wrap; }
.spr-rank-table th { white-space:normal; overflow-wrap:anywhere; }
.spr-result-head strong, .spr-intro, .spr-result p { min-width:0; overflow-wrap:anywhere; }
.spr-flash { white-space:normal; overflow-wrap:anywhere; }
.spr-rank-table col.c-num { width:8%; }
.spr-rank-table col.c-user { width:40%; }
.spr-rank-table col.c-score { width:17%; }
.spr-rank-table col.c-strike { width:17%; }
.spr-rank-table col.c-time { width:18%; }
.spr-rank-table td:nth-child(n+3), .spr-rank-table th:nth-child(n+3) { text-align:center; font-variant-numeric:tabular-nums; }
.spr-rank-table tr[data-me="1"] { background:#eff6ff !important; font-weight:800; }
.spr-empty { padding:24px 8px !important; color:#9ca3af; text-align:center !important; }
.spr-player { display:flex; align-items:center; min-width:0; }
.spr-player .spr-player-photo { width:16px; height:16px; margin-right:5px; border-radius:50%; object-fit:cover; background:#eee; flex:0 0 auto; }
.spr-player .spr-player-flag { width:20px; height:15px; margin-right:4px; border:1px solid rgba(0,0,0,.15); border-radius:2px; object-fit:cover; background:transparent; flex:0 0 auto; }
.spr-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#254ead; cursor:pointer; }
.spr-player-name:hover, .spr-player-name:focus-visible { color:#0d6efd; outline:none; }
.spr-verified { display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px; width:14px; height:14px; margin-left:4px; border-radius:50%; background:#18a058; color:#fff; font-size:9px; font-weight:900; }
body.pz-zoom #pzPanel .spr-intro { margin-bottom:0; }
@media (max-width:575.98px) {
  .spr-review th, .spr-review td { padding-left:2px; padding-right:2px; }
  #pzPanel .spr-hud { gap:12px; }
  .spr-hud-item { min-width:40px; }
  .spr-strike-item { min-width:58px; }
  .spr-hud-item b { font-size:16px; }
  .spr-period-tabs button { padding:5px 6px; }
  .spr-page .spr-leaderboard-head .card-title { flex-basis:100%; }
}
.spr-entry-overlay{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.38)}
.spr-entry-overlay[hidden]{display:none}
.spr-entry-dialog{width:min(360px,100%);max-height:calc(100dvh - 36px);overflow:auto;border:1px solid #d7dde8;border-radius:14px;background:#fff;color:#111827;box-shadow:0 18px 45px rgba(15,23,42,.22);padding:18px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.spr-entry-dialog p{margin:0 0 14px}
.spr-entry-dialog ul{padding-left:20px;margin:0 0 16px}
.spr-entry-dialog li+li{margin-top:8px}
.spr-entry-actions{display:flex;gap:10px;justify-content:center}
.spr-entry-actions .pz-message-confirm-btn{appearance:none;-webkit-appearance:none;border-radius:10px;cursor:pointer;font:inherit;font-size:15px;font-weight:800;line-height:1;padding:11px 16px;min-width:94px;outline:none;-webkit-tap-highlight-color:transparent}
.spr-entry-actions .is-primary{border:1px solid #2563eb;background:#2563eb;color:#fff}
.spr-entry-actions .is-secondary{border:1px solid #d1d5db;background:#fff;color:#111827}
html.fs-app-theme-dark .spr-entry-dialog{background:var(--fs-app-surface-2,#1c2635);border-color:var(--fs-app-border,#334155);color:var(--fs-app-text,#f1f5f9)}
html.fs-app-theme-dark .spr-page { color:var(--fs-app-text,#f1f5f9); }
html.fs-app-theme-dark .spr-hud-item small,
html.fs-app-theme-dark .spr-meta,
html.fs-app-theme-dark .spr-result .spr-result-highest { color:#93c5fd; }
html.fs-app-theme-dark .spr-result p,
html.fs-app-theme-dark .spr-record-grid { color:var(--fs-app-text-2,#cbd5e1); }
html.fs-app-theme-dark .spr-intro,
html.fs-app-theme-dark .spr-review-title { color:#93c5fd; }
html.fs-app-theme-dark .spr-review th { background:var(--fs-app-surface-2,#1c2635); border-color:var(--fs-app-border,#334155); color:var(--fs-app-text,#f1f5f9); }
html.fs-app-theme-dark .spr-intro strong { color:#fff; }
html.fs-app-theme-dark .spr-timer-track { background:#334155; }
html.fs-app-theme-dark .spr-period-tabs { background:#253247; }
html.fs-app-theme-dark .spr-period-tabs button { color:#cbd5e1; }
html.fs-app-theme-dark .spr-period-tabs button.active { background:#2563eb; color:#fff; }
html.fs-app-theme-dark .spr-rank-table tr[data-me="1"] { background:rgba(37,99,235,.22) !important; }
html.fs-app-theme-dark .spr-meta.is-reviewing { background:#172554; border-color:#3b82f6; color:#dbeafe; }
/* 복기 중 행 강조 — 다크 공용 테이블 규칙이 td 배경을 !important 로 칠해 tr 배경이 가려진다.
   같은 방식으로 셀에 직접 칠하고 왼쪽 표식도 셀 기준으로 준다(2026-09-10). */
/* 공용 규칙이 `html.fs-app-theme-dark table:not(.board-frame):not(.oc-board) tbody > tr:nth-child(odd) > td`
   (클래스 4·요소 5) 로 셀 배경을 !important 로 칠한다. 같은 !important 끼리는 특이도가 이겨야 하므로
   클래스 수를 그보다 높인다(.is-reviewing 중복). 요소 수만 맞추면 동점이라 로드 순서에 의존하게 된다. */
html.fs-app-theme-dark .spr-review table tbody > tr.is-reviewing.is-reviewing > td {
  background-color:#1e3a5f !important; border-bottom-color:#3b82f6 !important;
}
html.fs-app-theme-dark .spr-review table tbody > tr.is-reviewing.is-reviewing > td:first-child {
  box-shadow:inset 4px 0 #60a5fa;
}
/* 공용 다크 테이블 규칙(table td { color })이 결과 색보다 우선순위가 높아 정답·Close·오답이
   전부 흰색으로 보였다. 어두운 배경에서 읽히는 색으로 다시 지정한다(2026-09-10). */
/* 결과 색은 앱 공용 결과 토큰을 그대로 쓴다 — 퍼즐 기록 팝업과 같은 값(2026-09-10 통일). */
html.fs-app-theme-dark .spr-review td.is-correct { color:var(--fs-result-win-text) !important; }
html.fs-app-theme-dark .spr-review td.is-close   { color:var(--fs-result-draw-text) !important; }
html.fs-app-theme-dark .spr-review td.is-wrong   { color:var(--fs-result-loss-text) !important; }
html.fs-app-theme-dark .spr-verify-info { background:var(--fs-app-surface-2,#1c2635); border-color:var(--fs-app-border,#334155); color:var(--fs-app-text-2,#cbd5e1); }
html.fs-app-theme-dark .spr-verify-info.is-correct { background:#14372a; border-color:#15803d; color:#bbf7d0; }
html.fs-app-theme-dark .spr-verify-info.is-close   { background:#3a2f0b; border-color:#b45309; color:#fde68a; }
html.fs-app-theme-dark .spr-verify-info.is-wrong   { background:#3b1618; border-color:#b91c1c; color:#fecaca; }
html.fs-app-theme-dark #sprVerifyBtn { background:var(--fs-app-surface-2,#1c2635); border-color:var(--fs-app-border,#334155); color:var(--fs-app-text-2,#cbd5e1); }
html.fs-app-theme-dark #sprVerifyBtn.is-active { background:#1d4ed8; border-color:#3b82f6; color:#fff; }
html.fs-app-theme-dark .spr-review-link { color:#93c5fd; }
html.fs-app-theme-dark .spr-review-link:hover { color:#dbeafe; }