/* 서현우의 생윤 OX v32.36 */

/* 명예의 전당 4위 이하: 순위-이름 간격을 줄이고 점수/연속 기록은 무조건 한 줄 */
.leaderboard-row {
  grid-template-columns: 30px minmax(0, 1fr) max-content !important;
  column-gap: 7px !important;
  row-gap: 0 !important;
}

.leaderboard-rank {
  min-width: 0 !important;
  justify-self: start !important;
  white-space: nowrap !important;
}

.leaderboard-person {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.leaderboard-score {
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.leaderboard-score,
.leaderboard-score * {
  white-space: nowrap !important;
}

/* 문항별 공통 정답률: 기존 일일 OX 바의 인상은 유지하되 훨씬 컴팩트하게 */
.question-accuracy-compact {
  width: 100%;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
}

.question-accuracy-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted, #64748b);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.question-accuracy-title strong {
  color: var(--text-soft, #334155);
  font-size: 11px;
  font-weight: 950;
}

.question-accuracy-list {
  display: grid;
  gap: 8px;
}

.question-accuracy-row {
  min-width: 0;
}

.question-accuracy-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 10.5px;
  line-height: 1.3;
}

.question-accuracy-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft, #334155);
  font-weight: 900;
}

.question-accuracy-value {
  flex: 0 0 auto;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.question-accuracy-value strong {
  color: var(--text, #0f172a);
  font-size: 11px;
  font-weight: 1000;
}

.question-accuracy-bar {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted, #f1f5f9);
}

.question-accuracy-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--point, #64748b);
  transition: width .22s ease;
}

/* 화면이 아주 좁아도 연속 기록이 두 줄로 깨지지 않도록 이름 영역만 먼저 줄인다. */
@media (max-width: 430px) {
  .leaderboard-row {
    grid-template-columns: 26px minmax(0, 1fr) max-content !important;
    column-gap: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .leaderboard-score {
    gap: 4px !important;
  }
}


/* v32.36: 정답률 바 카드 폭 보정 */
.question-accuracy-compact {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  padding: 10px 0 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.question-accuracy-title {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 7px !important;
}

.question-accuracy-list,
.question-accuracy-row,
.question-accuracy-meta,
.question-accuracy-bar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.question-accuracy-meta {
  gap: 7px !important;
}

.question-accuracy-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.question-accuracy-value {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 72% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
}

.question-accuracy-bar {
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
}

.question-accuracy-fill {
  width: 0%;
  max-width: 100%;
  will-change: width;
  transition: width .62s cubic-bezier(.22, 1, .36, 1) !important;
}

/* 기존 일일 OX 정답률 UI는 혹시 남은 DOM이 있어도 표시하지 않는다. */
html body.daily-learning-active #appRoot #dailyQuizShell #statBox,
html body.daily-learning-active #appRoot #dailyQuizShell #dailyMultiTargetStats {
  display: none !important;
}

@media (max-width: 430px) {
  .question-accuracy-compact {
    margin-top: 10px !important;
    padding-top: 9px !important;
  }

  .question-accuracy-title strong {
    font-size: 10.5px !important;
  }

  .question-accuracy-meta {
    font-size: 10px !important;
  }

  .question-accuracy-value {
    max-width: 68% !important;
    font-size: 9.5px !important;
  }
}


/* v32.36: 정답률 UI를 실제 결과 카드 내부, 질문하기 버튼 바로 위에 고정 */
.question-accuracy-compact {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 10px 0 8px !important;
  padding: 9px 10px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.question-accuracy-title {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
}

.question-accuracy-title strong {
  display: block !important;
  color: var(--text-soft, #334155) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.question-accuracy-list,
.question-accuracy-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.question-accuracy-list {
  display: grid !important;
  gap: 7px !important;
}

.question-accuracy-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 7px !important;
  margin: 0 0 4px !important;
  box-sizing: border-box !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.question-accuracy-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--text-soft, #334155) !important;
  font-weight: 850 !important;
}

.question-accuracy-value {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 74% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted, #64748b) !important;
  font-size: 9.5px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
}

.question-accuracy-value strong {
  color: var(--text, #0f172a) !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
}

.question-accuracy-bar {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 5px !important;
  min-height: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--surface-muted, #f1f5f9) !important;
}

.question-accuracy-fill {
  display: block !important;
  width: 0%;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: var(--point, #64748b) !important;
  will-change: width;
  transition: width .62s cubic-bezier(.22, 1, .36, 1) !important;
}

/* 일일 OX는 기존 플레이어 위치/높이 계산을 그대로 사용한다.
   정답률 패치에서 daily shell/card 자체의 geometry는 건드리지 않는다. */
html body.daily-learning-active #appRoot #dailyQuizShell .question-accuracy-compact {
  flex: 0 0 auto !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

/* 구형 DOM이 혹시 캐시에 남더라도 중복 정답률은 표시하지 않는다. */
#statBox,
#dailyMultiTargetStats {
  display: none !important;
}

@media (max-width: 430px) {
  .question-accuracy-compact {
    padding: 8px 9px 9px !important;
    margin: 8px 0 7px !important;
    border-radius: 11px !important;
  }

  .question-accuracy-title {
    margin-bottom: 6px !important;
  }

  .question-accuracy-title strong {
    font-size: 10px !important;
  }

  .question-accuracy-meta {
    gap: 5px !important;
    font-size: 9.5px !important;
  }

  .question-accuracy-value {
    max-width: 70% !important;
    font-size: 9px !important;
  }

  .question-accuracy-value strong {
    font-size: 10px !important;
  }
}


/* v32.36: 복합선지 사상가별 결과 박스처럼 결과 배경과 톤을 맞추고 테두리만 약하게 */
.feedback.show.correct .question-accuracy-compact,
.exam-feedback.show.correct .question-accuracy-compact {
  background: transparent !important;
  border-color: rgba(11, 171, 104, .22) !important;
}

.feedback.show.wrong .question-accuracy-compact,
.exam-feedback.show.wrong .question-accuracy-compact {
  background: transparent !important;
  border-color: rgba(213, 82, 91, .22) !important;
}

/* 중립 상태에서도 별도 흰 판이 떠 보이지 않게 유지 */
.question-accuracy-compact {
  background-clip: padding-box !important;
}