/* =============================================================================
   [SandbagSession] 3조 샌드백 훈련 스타일
   ============================================================================= */

/* ── 설정 화면 ── */
.sb-setup-title {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 4px;
}

.sb-setup-sub {
  font-size: 13px;
  color: #999;
  text-align: center;
  margin-bottom: 20px;
}

.sb-player-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.sb-player-card {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-player-bag {
  font-size: 16px;
  font-weight: 900;
  min-width: 40px;
  text-align: center;
}

.sb-player-input {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  outline: none;
  background: #f8f8f8;
}

.sb-player-input:focus {
  border-color: #1a1a1a;
  background: #fff;
}

.sb-round-info {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.sb-round-info-item {
  flex: 1;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #555;
}

.sb-start-btn {
  width: 100%;
  padding: 14px;
  background: #1a1a1a;
  color: #00FF88;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  margin-bottom: 8px;
}

.sb-start-btn:hover {
  background: #333;
}

.sb-back-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: #999;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
}

/* ── 오버레이 (READY / START / TIME UP) ── */
.sb-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s;
}

.sb-overlay-main {
  font-size: 180px;
  font-weight: 900;
  color: #FFD600;
  font-family: 'Share Tech Mono', monospace;
  text-shadow: 0 0 60px rgba(255, 214, 0, 0.5);
  animation: sb-pulse 0.6s ease-in-out infinite alternate;
  letter-spacing: 4px;
}

.sb-overlay-sub {
  font-size: 36px;
  color: #ccc;
  font-weight: 700;
  margin-top: 16px;
}

@keyframes sb-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* ── 플레이 화면: 헤더 ── */
.sb-header {
  text-align: center;
  padding: 20px 0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 8px;
}

.sb-timer {
  font-family: 'Digital Numbers', sans-serif;
  font-size: 110px;       /* 160 → 110 */
  color: #00FF88;
  line-height: 1;
  text-shadow: 0 0 32px rgba(0, 255, 136, 0.6);
  background: #1a1a1a;
  border-radius: 20px;
  padding: 16px 40px;
  display: inline-block;
  margin: 8px 0;
  letter-spacing: 4px;
}

.sb-round-banner {
  font-size: 56px;        /* 40 → 56 (라운드 안내 잘 보이게) */
  font-weight: 900;
  min-height: 64px;
  transition: opacity 0.5s;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

/* 라운드 안내 부제 (단타+스텝 등) */
.sb-round-banner small,
.sb-round-banner .sb-round-sub {
  font-size: 22px;        /* 부제도 잘 보이게 */
  font-weight: 700;
  color: #555;
  margin-left: 8px;
}

.sb-round-label {
  font-size: 26px;        /* 22 → 26 */
  color: #555;
  margin-top: 10px;
  font-weight: 800;
}

.sb-last-hit {
  font-size: 14px;
  font-weight: 900;
  margin-top: 6px;
  transition: opacity 0.3s;
  font-family: 'Share Tech Mono', monospace;
}

/* ── 순위표 ── */
.sb-ranking-list {
  padding: 0 4px;
}

.sb-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.sb-rank-row:last-child {
  border-bottom: none;
}

/* ★ 1등: 가장 크게 + 골드 배경 */
.sb-rank-1st {
  background: linear-gradient(135deg, #FFFDE7, #FFF8E1);
  border: 3px solid #FFD600;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 8px;
  border-bottom: none;
}

.sb-rank-1st .sb-rank-pos { font-size: 40px; min-width: 50px; }
.sb-rank-1st .sb-rank-bag { font-size: 24px; }
.sb-rank-1st .sb-rank-name { font-size: 26px; }
.sb-rank-1st .sb-rank-score { font-size: 34px; min-width: 80px; }
.sb-rank-1st .sb-rank-bar-wrap { height: 18px; }

/* ★ 2등: 크게 + 실버 배경 */
.sb-rank-2nd {
  background: linear-gradient(135deg, #FAFAFA, #F5F5F5);
  border: 2px solid #BDBDBD;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 6px;
  border-bottom: none;
}

.sb-rank-2nd .sb-rank-pos { font-size: 32px; min-width: 44px; }
.sb-rank-2nd .sb-rank-bag { font-size: 20px; }
.sb-rank-2nd .sb-rank-name { font-size: 22px; }
.sb-rank-2nd .sb-rank-score { font-size: 28px; min-width: 70px; }
.sb-rank-2nd .sb-rank-bar-wrap { height: 16px; }

/* ★ 3등: 약간 크게 + 동 배경 */
.sb-rank-3rd {
  background: linear-gradient(135deg, #FFF3E0, #FBE9E7);
  border: 2px solid #FFAB91;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-bottom: none;
}

.sb-rank-3rd .sb-rank-pos { font-size: 26px; min-width: 40px; }
.sb-rank-3rd .sb-rank-bag { font-size: 18px; }
.sb-rank-3rd .sb-rank-name { font-size: 20px; }
.sb-rank-3rd .sb-rank-score { font-size: 24px; min-width: 65px; }
.sb-rank-3rd .sb-rank-bar-wrap { height: 14px; }

/* ★ 4~8등: 작게 + 회색 톤 */
.sb-rank-rest {
  padding: 5px 12px;
  opacity: 0.7;
}

.sb-rank-rest .sb-rank-pos { font-size: 14px; min-width: 32px; }
.sb-rank-rest .sb-rank-bag { font-size: 12px; }
.sb-rank-rest .sb-rank-name { font-size: 13px; color: #888; }
.sb-rank-rest .sb-rank-score { font-size: 14px; color: #888; }
.sb-rank-rest .sb-rank-bar-wrap { height: 6px; }

.sb-rank-pos {
  font-size: 16px;
  min-width: 32px;
  text-align: center;
}

.sb-rank-bag {
  font-size: 13px;
  font-weight: 900;
  min-width: 36px;
}

.sb-rank-name {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  min-width: 60px;
  flex-shrink: 0;
}

.sb-rank-bar-wrap {
  flex: 1;
  height: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

.sb-rank-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.sb-rank-score {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  font-weight: 900;
  color: #1a1a1a;
  min-width: 60px;
  text-align: right;
}

/* ── 하단 컨트롤 ── */
.sb-controls {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.sb-sim-btn {
  flex: 1;
  padding: 16px;
  background: #FF9800;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
}

.sb-stop-btn {
  flex: 1;
  padding: 16px 24px;
  background: #E53935;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

.sb-stop-btn:hover {
  background: #C62828;
}

/* ── 결과 화면 ── */
.sb-result-header {
  text-align: center;
  margin-bottom: 24px;
  margin-top: 8px;
}

.sb-result-title {
  font-size: 36px;          /* 22 → 36 */
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 1px;
}

.sb-result-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.sb-result-card {
  background: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 16px;
  padding: 22px 16px;
  text-align: center;
}

.sb-result-first {
  grid-column: span 2;
  background: #FFFDE7;
  padding: 32px 20px;
  border-width: 4px;
}

.sb-result-rank {
  font-size: 36px;          /* 20 → 36 (등수 크게) */
  margin-bottom: 6px;
}

.sb-result-first .sb-result-rank {
  font-size: 48px;          /* 1등은 더 크게 */
}

.sb-result-bag {
  font-size: 22px;          /* 14 → 22 */
  font-weight: 900;
  margin-top: 4px;
}

.sb-result-first .sb-result-bag {
  font-size: 28px;
}

.sb-result-name {
  font-size: 20px;          /* 16 → 20 */
  font-weight: 900;
  color: #1a1a1a;
  margin-top: 6px;
}

.sb-result-first .sb-result-name {
  font-size: 24px;
}

.sb-result-score {
  font-family: 'Share Tech Mono', monospace;
  font-size: 42px;          /* 24 → 42 (점수 크게) */
  font-weight: 900;
  color: #1a1a1a;
  margin-top: 8px;
  letter-spacing: 1px;
}

.sb-result-first .sb-result-score {
  font-size: 56px;
  color: #F57F17;
  text-shadow: 0 0 12px rgba(245, 127, 23, 0.3);
}

.sb-result-stats {
  font-size: 14px;          /* 11 → 14 */
  color: #777;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 14px;
  font-weight: 700;
}

.sb-result-actions {
  margin-top: 20px;
}

/* ── 모바일 반응형 ── */
@media (max-width: 480px) {
  .sb-player-grid { grid-template-columns: 1fr; }
  .sb-result-cards { grid-template-columns: 1fr; }
  .sb-result-first { grid-column: span 1; }
  .sb-overlay-main { font-size: 110px; letter-spacing: 2px; }
  .sb-overlay-sub { font-size: 24px; }
  .sb-timer { font-size: 80px; padding: 14px 28px; letter-spacing: 3px; }
  .sb-round-banner { font-size: 36px; min-height: 44px; }
  .sb-round-label { font-size: 18px; }
  .sb-rank-1st .sb-rank-name { font-size: 22px; }
  .sb-rank-1st .sb-rank-score { font-size: 28px; }
  .sb-rank-2nd .sb-rank-name { font-size: 18px; }
  .sb-rank-2nd .sb-rank-score { font-size: 24px; }
}

/* ── 다크 배경 대응 ── */
@media (prefers-color-scheme: dark) {
  .sb-controls {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* ── 샌드백 세션은 스크롤 가능하게 ── */
#sb-session-setup,
#sb-session-play,
#sb-session-result {
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-bottom: 24px;
}

/* ★ 플레이 화면은 우상단 중단 버튼 absolute 기준점 */
#sb-session-play {
  position: relative;
}

/* ★ 우상단 작은 훈련 중단 버튼 */
.sb-stop-corner {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 50;
  padding: 8px 16px;
  background: rgba(255, 59, 48, 0.92);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.15s;
}
.sb-stop-corner:hover {
  background: rgb(220, 40, 30);
  transform: translateY(-1px);
}

/* ── 아이 모드 토글 패널 ── */
.sb-mode-panel-title {
  font-size: 18px;
  font-weight: 900;
  color: #333;
  margin: 20px 0 10px 4px;
}

.sb-mode-panel-sub {
  font-size: 14px;
  color: #888;
  font-weight: 400;
  margin-left: 6px;
}

.sb-mode-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.sb-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px;
  background: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Noto Sans KR', sans-serif;
  min-height: 80px;
}

.sb-mode-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sb-mode-btn-kids {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  border-width: 3px;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.25);
}

.sb-mode-bag {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.sb-mode-label {
  font-size: 16px;
  font-weight: 800;
  color: #555;
}

.sb-mode-btn-kids .sb-mode-label {
  color: #E65100;
}

/* 모바일/태블릿 */
@media (max-width: 768px) {
  .sb-mode-panel { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sb-mode-btn { padding: 14px 4px; min-height: 70px; }
  .sb-mode-bag { font-size: 18px; }
  .sb-mode-label { font-size: 13px; }
}

@media (max-width: 480px) {
  .sb-mode-panel { gap: 5px; }
  .sb-mode-btn { padding: 10px 2px; min-height: 60px; }
  .sb-mode-bag { font-size: 15px; }
  .sb-mode-label { font-size: 11px; }
}

/* ═══════════════ 페어 반응 토글 (설정 화면) ═══════════════ */
.sb-pair-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border: 2px solid #2196F3;
  border-radius: 12px;
  margin-bottom: 12px;
}

.sb-pair-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-pair-toggle-text {
  font-size: 16px;
  font-weight: 900;
  color: #0D47A1;
}

.sb-pair-toggle-desc {
  font-size: 11px;
  color: #666;
}

.sb-pair-toggle {
  padding: 10px 18px;
  border: 2px solid #BDBDBD;
  border-radius: 10px;
  background: #fff;
  color: #757575;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  white-space: nowrap;
  transition: all 0.15s;
}

.sb-pair-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.sb-pair-toggle-on {
  background: #1a1a1a;
  color: #00FF88;
  border-color: #1a1a1a;
}

.sb-pair-server-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f8f8f8;
  border-radius: 10px;
  margin-bottom: 12px;
}

.sb-pair-server-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  min-width: 100px;
}

.sb-pair-server-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  font-family: 'Share Tech Mono', monospace;
}

.sb-pair-server-input:focus {
  border-color: #2196F3;
}

/* ═══════════════ 좌우 분할 모드 (플레이 화면) ═══════════════ */
/**
 * 좌우 분할 레이아웃:
 *   ┌──────────────────┬──────────────────────┐
 *   │  타이머/라운드     │  카메라 화면          │
 *   │  순위표 (1~3등)    │  페어 신호 + 결과     │
 *   ├──────────────────┴──────────────────────┤
 *   │       훈련 중단 (공통)                     │
 *   └─────────────────────────────────────────┘
 */
#sb-session-play.sb-split-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-template-areas:
    "header pair"
    "ranking pair";
  grid-template-rows: auto 1fr;
}

/* sb-session-play가 숨김 처리되면 grid도 무시 */
#sb-session-play[style*="display: none"] {
  display: none !important;
}

#sb-session-play.sb-split-mode .sb-header {
  grid-area: header;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 16px;
}

/* 분할 모드에서는 타이머를 더 작게 */
#sb-session-play.sb-split-mode .sb-timer {
  font-size: 80px;
  padding: 10px 24px;
  letter-spacing: 3px;
}

#sb-session-play.sb-split-mode .sb-round-banner {
  font-size: 36px;
  min-height: 44px;
}

#sb-session-play.sb-split-mode .sb-round-label {
  font-size: 20px;
}

#sb-session-play.sb-split-mode .sb-ranking-list {
  grid-area: ranking;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}

#sb-session-play.sb-split-mode #sb-pair-panel {
  grid-area: pair;
  display: flex;
  flex-direction: column;
  border-left: 2px solid #e0e0e0;
  padding-left: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

/* 일반 모드에서는 페어 패널 숨김 */
#sb-pair-panel {
  display: none;
}

/* 페어 패널 내부 */
.sb-pair-panel-title {
  font-size: 18px;
  font-weight: 900;
  color: #2196F3;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2196F3;
  text-align: center;
}

/* ── 신호 박스 (상단) ── */
.sb-pair-signal-box {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.sb-pair-signal-label {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sb-pair-signal {
  font-size: 44px;
  font-weight: 900;
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 16px currentColor;
  margin-bottom: 6px;
  line-height: 1.1;
}

.sb-pair-signal-sub {
  font-size: 13px;
  font-weight: 700;
  color: #666;
}

/* ── 4쌍 그리드 (세로 1열) ── */
.sb-pair-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-pair-cell {
  background: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.25s ease;
}

.sb-pair-cell-label {
  font-size: 14px;
  font-weight: 800;
  color: #888;
  letter-spacing: 1px;
  min-width: 50px;
}

.sb-pair-cell-result {
  font-size: 24px;
  font-weight: 900;
  color: #333;
  line-height: 1.15;
  flex: 1;
}

.sb-pair-cell-ms {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #666;
  min-width: 70px;
  text-align: right;
}

/* 승리 색상별 강조 */
.sb-pair-cell-blue {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  border-color: #2196F3;
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.25);
  transform: scale(1.02);
}

.sb-pair-cell-blue .sb-pair-cell-result {
  color: #0D47A1;
}

.sb-pair-cell-red {
  background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
  border-color: #FF3B30;
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.25);
  transform: scale(1.02);
}

.sb-pair-cell-red .sb-pair-cell-result {
  color: #B71C1C;
}

.sb-pair-cell-both {
  background: linear-gradient(135deg, #FFFDE7, #FFF59D);
  border-color: #FFD600;
  box-shadow: 0 4px 16px rgba(255, 214, 0, 0.3);
  transform: scale(1.02);
}

.sb-pair-cell-both .sb-pair-cell-result {
  color: #F57F17;
}

.sb-pair-cell-tie {
  background: #F5F5F5;
  border-color: #999;
}

.sb-pair-cell-tie .sb-pair-cell-result {
  color: #555;
}

/* 모바일에서는 분할 모드를 상하 분할로 */
@media (max-width: 768px) {
  #sb-session-play.sb-split-mode {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "ranking"
      "pair";
    grid-template-rows: auto auto auto;
  }

  #sb-session-play.sb-split-mode .sb-ranking-list {
    max-height: 300px;
    border-right: none;
    padding-right: 0;
  }

  #sb-session-play.sb-split-mode #sb-pair-panel {
    border-left: none;
    border-top: 2px solid #e0e0e0;
    padding-left: 0;
    padding-top: 16px;
    max-height: none;
  }

  #sb-session-play.sb-split-mode .sb-timer {
    font-size: 80px;
    padding: 16px 30px;
  }

  .sb-pair-signal { font-size: 36px; }
}

/* ═══════════════ 카메라 영역 (캘리브레이션 화면 등에서 사용) ═══════════════ */
.sb-pair-camera {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sb-pair-camera-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-pair-camera-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #888;
}

.sb-pair-cam-icon {
  font-size: 48px;
  opacity: 0.6;
}

.sb-pair-cam-msg {
  font-size: 14px;
  font-weight: 700;
  color: #aaa;
}

.sb-pair-cam-btn {
  margin-top: 12px;
  padding: 10px 20px;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
}

.sb-pair-cam-btn:hover {
  background: #1976D2;
}

/* ═══════════════ 결과 화면 좌우 분할 (통합 모드) ═══════════════ */
.sb-result-wrap {
  display: block;
}

.sb-result-wrap.sb-result-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sb-result-section {
  background: #fafafa;
  border-radius: 14px;
  padding: 16px;
}

.sb-result-section-title {
  font-size: 22px;
  font-weight: 900;
  color: #333;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
}

/* ── 페어 결과 카드 ── */
.sb-pair-result-card {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}

.sb-pair-result-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.sb-pair-result-team {
  text-align: center;
}

.sb-pair-result-team-label {
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}

.sb-pair-result-team-wins {
  font-family: 'Share Tech Mono', monospace;
  font-size: 22px;
  font-weight: 900;
}

.sb-pair-result-vs-text {
  font-size: 12px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1px;
}

.sb-pair-result-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #e0e0e0;
  margin: 10px 0 6px;
}

.sb-pair-result-bar-blue,
.sb-pair-result-bar-red {
  transition: width 0.5s ease;
  min-width: 0;
}

@media (max-width: 768px) {
  .sb-result-wrap.sb-result-split {
    grid-template-columns: 1fr;
  }
}


/* ── 캘리브레이션 버튼 (설정 화면) ── */
.sb-calib-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.25);
  transition: all 0.15s;
}

.sb-calib-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35);
}